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/development.yml b/.github/workflows/development.yml
index b8617263b44..5fc8b4cbdd6 100644
--- a/.github/workflows/development.yml
+++ b/.github/workflows/development.yml
@@ -112,9 +112,7 @@ jobs:
- '*.md'
- .storybook/*.md
- .storybook/*/*.md
- - .storybook/*/*.mdx
- components/*/*.md
- - components/*/stories/*.mdx
- plugins/*/*.md
- tokens/*.md
- tools/*/*.md
diff --git a/.github/workflows/lint.yml b/.github/workflows/lint.yml
index a3af10310ec..acdbc78df0b 100644
--- a/.github/workflows/lint.yml
+++ b/.github/workflows/lint.yml
@@ -116,10 +116,11 @@ 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
+ if: ${{ inputs.mdlint_added_files != '' || inputs.mdlint_modified_files != '' }}
with:
reporter: github-pr-review
filter_mode: diff_context
diff --git a/.storybook/assets/base.css b/.storybook/assets/base.css
index e5886de13ec..1644b455fb6 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.
*
@@ -31,7 +29,7 @@ body {
.spectrum {
color: var(--spectrum-neutral-content-color-default);
background-color: var(--spectrum-background-base-color);
- -webkit-tap-highlight-color: rgba(0, 0, 0, 0%);
+ -webkit-tap-highlight-color: rgb(0, 0, 0, 0%);
}
.spectrum .spectrum-examples-static-black {
@@ -61,7 +59,7 @@ svg:has(symbol):not(:has(use)) {
line-height: normal;
letter-spacing: normal;
text-transform: none;
- border-block-end: 1px solid hsla(203deg, 50%, 30%, 15%);
+ border-block-end: 1px solid hsl(203deg, 50%, 30%, 15%);
}
/* Force the modal wrapper to be contained by the frame not the viewport */
@@ -77,4 +75,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 b18c09d34ce..73a53b763df 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.
*
@@ -125,5 +123,3 @@ div.sb-bar {
color: var(--spectrum-neutral-content-color-default) !important;
background-color: var(--spectrum-background-layer-2-color) !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 5914dd5b083..f55e71c60a2 100644
--- a/.storybook/main.js
+++ b/.storybook/main.js
@@ -68,6 +68,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 0b445a6175a..d5f39102ba8 100644
--- a/.storybook/package.json
+++ b/.storybook/package.json
@@ -48,6 +48,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",
@@ -60,7 +61,7 @@
"@storybook/core-events": "8.4.7",
"@storybook/manager-api": "8.4.7",
"@storybook/preview-api": "8.4.7",
- "@storybook/test-runner": "^0.22.0",
+ "@storybook/test-runner": "^0.23.0",
"@storybook/theming": "8.4.7",
"@storybook/web-components-vite": "8.4.7",
"@whitespace/storybook-addon-html": "^7.0.0",
diff --git a/.storybook/preview.js b/.storybook/preview.js
index e9be0e5c367..4c583d4a9b1 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 f0f32dc03c2..dbdf622b042 100644
--- a/components/accordion/dist/metadata.json
+++ b/components/accordion/dist/metadata.json
@@ -17,230 +17,1171 @@
".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-item.is-open > .spectrum-Accordion-itemContent",
".spectrum-Accordion-item.is-open > .spectrum-Accordion-itemHeading .spectrum-Accordion-itemIndicator",
- ".spectrum-Accordion-item:first-child",
".spectrum-Accordion-itemContent",
".spectrum-Accordion-itemDirectActions",
".spectrum-Accordion-itemHeader",
- ".spectrum-Accordion-itemHeader.spectrum-Accordion-itemHeader:active",
".spectrum-Accordion-itemHeader:focus-visible",
".spectrum-Accordion-itemHeader:has(+ .spectrum-Accordion-itemDirectActions)",
".spectrum-Accordion-itemHeader:hover",
+ ".spectrum-Accordion-itemHeader.spectrum-Accordion-itemHeader:active",
".spectrum-Accordion-itemHeading",
".spectrum-Accordion-itemIndicator",
".spectrum-Accordion-itemTitle",
- ".spectrum-Accordion.spectrum-Accordion--noInlinePadding",
".spectrum-Accordion:dir(rtl)",
".spectrum-Accordion:lang(ja)",
".spectrum-Accordion:lang(ko)",
- ".spectrum-Accordion:lang(zh)"
- ],
- "modifiers": [
- "--mod-accordion-animation-duration",
- "--mod-accordion-background-color-default",
- "--mod-accordion-background-color-down",
- "--mod-accordion-background-color-hover",
- "--mod-accordion-background-color-key-focus",
- "--mod-accordion-content-padding-inline",
- "--mod-accordion-corner-radius",
- "--mod-accordion-disclosure-indicator-height",
- "--mod-accordion-disclosure-indicator-to-text-space",
- "--mod-accordion-divider-color",
- "--mod-accordion-divider-thickness",
- "--mod-accordion-edge-to-content-area",
- "--mod-accordion-edge-to-disclosure-indicator-space",
- "--mod-accordion-edge-to-text-space",
- "--mod-accordion-item-content-area-bottom-to-content",
- "--mod-accordion-item-content-area-top-to-content",
- "--mod-accordion-item-content-color",
- "--mod-accordion-item-content-disabled-color",
- "--mod-accordion-item-content-font",
- "--mod-accordion-item-content-font-size",
- "--mod-accordion-item-content-font-style",
- "--mod-accordion-item-content-font-weight",
- "--mod-accordion-item-content-line-height",
- "--mod-accordion-item-direct-actions-height",
- "--mod-accordion-item-direct-actions-spacing",
- "--mod-accordion-item-direct-actions-vertical-spacing",
- "--mod-accordion-item-focus-indicator-color",
- "--mod-accordion-item-focus-indicator-gap",
- "--mod-accordion-item-focus-indicator-thickness",
- "--mod-accordion-item-header-bottom-to-text-space",
- "--mod-accordion-item-header-color-default",
- "--mod-accordion-item-header-color-down",
- "--mod-accordion-item-header-color-hover",
- "--mod-accordion-item-header-color-key-focus",
- "--mod-accordion-item-header-disabled-color",
- "--mod-accordion-item-header-font",
- "--mod-accordion-item-header-font-size",
- "--mod-accordion-item-header-font-style",
- "--mod-accordion-item-header-font-weight",
- "--mod-accordion-item-header-line-height",
- "--mod-accordion-item-header-to-direct-actions-space",
- "--mod-accordion-item-header-top-to-text-space",
- "--mod-accordion-item-min-block-size",
- "--mod-accordion-item-minimum-height",
- "--mod-accordion-item-minimum-width",
- "--mod-accordion-item-width",
- "--mod-accordion-top-to-disclosure-indicator"
- ],
- "component": [
- "--spectrum-accordion-animation-duration",
- "--spectrum-accordion-background-color-default",
- "--spectrum-accordion-background-color-down",
- "--spectrum-accordion-background-color-hover",
- "--spectrum-accordion-background-color-key-focus",
- "--spectrum-accordion-bottom-to-text-compact-extra-large",
- "--spectrum-accordion-bottom-to-text-compact-large",
- "--spectrum-accordion-bottom-to-text-compact-medium",
- "--spectrum-accordion-bottom-to-text-compact-small",
- "--spectrum-accordion-bottom-to-text-extra-large",
- "--spectrum-accordion-bottom-to-text-large",
- "--spectrum-accordion-bottom-to-text-medium",
- "--spectrum-accordion-bottom-to-text-small",
- "--spectrum-accordion-bottom-to-text-spacious-extra-large",
- "--spectrum-accordion-bottom-to-text-spacious-large",
- "--spectrum-accordion-bottom-to-text-spacious-medium",
- "--spectrum-accordion-bottom-to-text-spacious-small",
- "--spectrum-accordion-content-area-bottom-to-content",
- "--spectrum-accordion-content-area-edge-to-content-extra-large",
- "--spectrum-accordion-content-area-edge-to-content-large",
- "--spectrum-accordion-content-area-edge-to-content-medium",
- "--spectrum-accordion-content-area-edge-to-content-small",
- "--spectrum-accordion-content-area-top-to-content",
- "--spectrum-accordion-content-padding-inline",
- "--spectrum-accordion-corner-radius",
- "--spectrum-accordion-disclosure-indicator-height",
- "--spectrum-accordion-disclosure-indicator-to-text-extra-large",
- "--spectrum-accordion-disclosure-indicator-to-text-large",
- "--spectrum-accordion-disclosure-indicator-to-text-medium",
- "--spectrum-accordion-disclosure-indicator-to-text-small",
- "--spectrum-accordion-disclosure-indicator-to-text-space",
- "--spectrum-accordion-divider-color",
- "--spectrum-accordion-divider-thickness",
- "--spectrum-accordion-edge-to-content-area",
- "--spectrum-accordion-edge-to-content-area-extra-large",
- "--spectrum-accordion-edge-to-content-area-large",
- "--spectrum-accordion-edge-to-content-area-medium",
- "--spectrum-accordion-edge-to-content-area-small",
- "--spectrum-accordion-edge-to-disclosure-indicator-space",
- "--spectrum-accordion-edge-to-text",
- "--spectrum-accordion-edge-to-text-space",
- "--spectrum-accordion-item-content-area-bottom-to-content",
- "--spectrum-accordion-item-content-area-top-to-content",
- "--spectrum-accordion-item-content-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-direct-actions-height",
- "--spectrum-accordion-item-direct-actions-spacing",
- "--spectrum-accordion-item-direct-actions-vertical-spacing",
- "--spectrum-accordion-item-focus-indicator-color",
- "--spectrum-accordion-item-focus-indicator-gap",
- "--spectrum-accordion-item-focus-indicator-thickness",
- "--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-cursor",
- "--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-to-direct-actions-space",
- "--spectrum-accordion-item-header-top-to-text-space",
- "--spectrum-accordion-item-min-block-size",
- "--spectrum-accordion-item-minimum-height",
- "--spectrum-accordion-item-minimum-width",
- "--spectrum-accordion-item-width",
- "--spectrum-accordion-minimum-width",
- "--spectrum-accordion-top-to-disclosure-indicator",
- "--spectrum-accordion-top-to-text-compact-extra-large",
- "--spectrum-accordion-top-to-text-compact-large",
- "--spectrum-accordion-top-to-text-compact-medium",
- "--spectrum-accordion-top-to-text-compact-small",
- "--spectrum-accordion-top-to-text-extra-large",
- "--spectrum-accordion-top-to-text-large",
- "--spectrum-accordion-top-to-text-medium",
- "--spectrum-accordion-top-to-text-small",
- "--spectrum-accordion-top-to-text-spacious-extra-large",
- "--spectrum-accordion-top-to-text-spacious-large",
- "--spectrum-accordion-top-to-text-spacious-medium",
- "--spectrum-accordion-top-to-text-spacious-small"
- ],
- "global": [
- "--spectrum-animation-duration-100",
- "--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-chevron-icon-size-100",
- "--spectrum-chevron-icon-size-200",
- "--spectrum-chevron-icon-size-300",
- "--spectrum-chevron-icon-size-75",
- "--spectrum-cjk-line-height-100",
- "--spectrum-component-height-100",
- "--spectrum-component-height-200",
- "--spectrum-component-height-300",
- "--spectrum-component-height-400",
- "--spectrum-component-height-50",
- "--spectrum-component-height-75",
- "--spectrum-corner-radius-medium-size-extra-large",
- "--spectrum-corner-radius-medium-size-large",
- "--spectrum-corner-radius-medium-size-medium",
- "--spectrum-corner-radius-medium-size-small",
- "--spectrum-default-font-style",
- "--spectrum-disabled-content-color",
- "--spectrum-divider-thickness-small",
- "--spectrum-field-default-width-extra-large",
- "--spectrum-field-default-width-large",
- "--spectrum-field-default-width-medium",
- "--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-field-top-to-disclosure-icon-compact-extra-large",
- "--spectrum-field-top-to-disclosure-icon-compact-large",
- "--spectrum-field-top-to-disclosure-icon-compact-medium",
- "--spectrum-field-top-to-disclosure-icon-compact-small",
- "--spectrum-field-top-to-disclosure-icon-extra-large",
- "--spectrum-field-top-to-disclosure-icon-large",
- "--spectrum-field-top-to-disclosure-icon-medium",
- "--spectrum-field-top-to-disclosure-icon-small",
- "--spectrum-field-top-to-disclosure-icon-spacious-extra-large",
- "--spectrum-field-top-to-disclosure-icon-spacious-large",
- "--spectrum-field-top-to-disclosure-icon-spacious-medium",
- "--spectrum-field-top-to-disclosure-icon-spacious-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-400",
- "--spectrum-gray-200",
- "--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",
- "--spectrum-spacing-100",
- "--spectrum-transparent-black-100",
- "--spectrum-transparent-black-25",
- "--spectrum-transparent-black-300"
+ ".spectrum-Accordion:lang(zh)",
+ ".spectrum-Accordion.spectrum-Accordion--noInlinePadding"
],
- "passthroughs": [],
- "high-contrast": []
+ "modifiers": {
+ "mod-accordion-background-color-default": {
+ "description": "Used by `--spectrum-accordion-background-color-default`.
Defaults to `var(--spectrum-transparent-black-25)`, if not set.",
+ "control": "color",
+ "category": "Modifier"
+ },
+ "mod-accordion-background-color-hover": {
+ "description": "Used by `--spectrum-accordion-background-color-hover`.
Defaults to `var(--spectrum-transparent-black-100)`, if not set.",
+ "control": "color",
+ "category": "Modifier"
+ },
+ "mod-accordion-background-color-down": {
+ "description": "Used by `--spectrum-accordion-background-color-down`.
Defaults to `var(--spectrum-transparent-black-300)`, if not set.",
+ "control": "color",
+ "category": "Modifier"
+ },
+ "mod-accordion-background-color-key-focus": {
+ "description": "Used by `--spectrum-accordion-background-color-key-focus`.
Defaults to `var(--spectrum-transparent-black-100)`, if not set.",
+ "control": "color",
+ "category": "Modifier"
+ },
+ "mod-accordion-item-content-color": {
+ "description": "Used by `--spectrum-accordion-item-content-color`.
Defaults to `var(--spectrum-body-color)`, if not set.",
+ "control": "color",
+ "category": "Modifier"
+ },
+ "mod-accordion-divider-color": {
+ "description": "Used by `--spectrum-accordion-divider-color`.
Defaults to `var(--spectrum-gray-200)`, if not set.",
+ "control": "color",
+ "category": "Modifier"
+ },
+ "mod-accordion-item-focus-indicator-color": {
+ "description": "Used by `--spectrum-accordion-item-focus-indicator-color`.
Defaults to `var(--spectrum-focus-indicator-color)`, if not set.",
+ "control": "color",
+ "category": "Modifier"
+ },
+ "mod-accordion-item-header-color-default": {
+ "description": "Used by `--spectrum-accordion-item-header-color-default`.
Defaults to `var(--spectrum-neutral-content-color-default)`, if not set.",
+ "control": "color",
+ "category": "Modifier"
+ },
+ "mod-accordion-item-header-color-hover": {
+ "description": "Used by `--spectrum-accordion-item-header-color-hover`.
Defaults to `var(--spectrum-neutral-content-color-hover)`, if not set.",
+ "control": "color",
+ "category": "Modifier"
+ },
+ "mod-accordion-item-header-color-down": {
+ "description": "Used by `--spectrum-accordion-item-header-color-down`.
Defaults to `var(--spectrum-neutral-content-color-down)`, if not set.",
+ "control": "color",
+ "category": "Modifier"
+ },
+ "mod-accordion-item-header-color-key-focus": {
+ "description": "Used by `--spectrum-accordion-item-header-color-key-focus`.
Defaults to `var(--spectrum-neutral-content-color-key-focus)`, if not set.",
+ "control": "color",
+ "category": "Modifier"
+ },
+ "mod-accordion-item-minimum-height": {
+ "description": "Used by `--spectrum-accordion-item-min-block-size`.
Defaults to `var(--spectrum-accordion-item-minimum-height)`, if not set.",
+ "control": "text",
+ "category": "Modifier"
+ },
+ "mod-accordion-item-header-top-to-text-space": {
+ "description": "Used by `--spectrum-accordion-item-min-block-size`, `.spectrum-Accordion-itemTitle`.
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": {
+ "description": "Used by `--spectrum-accordion-item-min-block-size`, `.spectrum-Accordion-itemTitle`.
Defaults to `var(--spectrum-accordion-item-header-bottom-to-text-space)`, if not set.",
+ "control": "text",
+ "category": "Modifier"
+ },
+ "mod-accordion-item-header-font-size": {
+ "description": "Used by `--spectrum-accordion-item-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": {
+ "description": "Used by `--spectrum-accordion-item-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-min-block-size": {
+ "description": "Used by `--spectrum-accordion-item-direct-actions-vertical-spacing`, `.spectrum-Accordion-item`.
Defaults to `var(--spectrum-accordion-item-min-block-size)`, if not set.",
+ "control": "text",
+ "category": "Modifier"
+ },
+ "mod-accordion-item-direct-actions-height": {
+ "description": "Used by `--spectrum-accordion-item-direct-actions-vertical-spacing`.
Defaults to `var(--spectrum-accordion-item-direct-actions-height)`, if not set.",
+ "control": "text",
+ "category": "Modifier"
+ },
+ "mod-accordion-item-content-disabled-color": {
+ "description": "Used by `--spectrum-accordion-item-content-color`.
Defaults to `var(--spectrum-disabled-content-color)`, if not set.",
+ "control": "color",
+ "category": "Modifier"
+ },
+ "mod-accordion-item-header-disabled-color": {
+ "description": "Used by `--spectrum-accordion-item-header-color-default`, `--spectrum-accordion-item-header-color-hover`, `--spectrum-accordion-item-header-color-down`, `--spectrum-accordion-item-header-color-key-focus`.
Defaults to `var(--spectrum-disabled-content-color)`, if not set.",
+ "control": "color",
+ "category": "Modifier"
+ },
+ "mod-accordion-item-minimum-width": {
+ "description": "Used by `.spectrum-Accordion-item`.
Defaults to `var(--spectrum-accordion-item-minimum-width)`, if not set.",
+ "control": "text",
+ "category": "Modifier"
+ },
+ "mod-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-thickness": {
+ "description": "Used by `.spectrum-Accordion-item`, `.spectrum-Accordion-item:first-child`.
Defaults to `var(--spectrum-accordion-divider-thickness)`, if not set.",
+ "control": "text",
+ "category": "Modifier"
+ },
+ "mod-accordion-disclosure-indicator-height": {
+ "description": "Used by `.spectrum-Accordion-itemIndicator`.
Defaults to `var(--spectrum-accordion-disclosure-indicator-height)`, if not set.",
+ "control": "text",
+ "category": "Modifier"
+ },
+ "mod-accordion-animation-duration": {
+ "description": "Used by `.spectrum-Accordion-itemIndicator`.
Defaults to `var(--spectrum-accordion-animation-duration)`, if not set.",
+ "control": "text",
+ "category": "Modifier"
+ },
+ "mod-accordion-top-to-disclosure-indicator": {
+ "description": "Used by `.spectrum-Accordion-itemIndicator`.
Defaults to `var(--spectrum-accordion-top-to-disclosure-indicator)`, if not set.",
+ "control": "text",
+ "category": "Modifier"
+ },
+ "mod-accordion-edge-to-disclosure-indicator-space": {
+ "description": "Used by `.spectrum-Accordion-itemIndicator`.
Defaults to `var(--spectrum-accordion-edge-to-disclosure-indicator-space)`, if not set.",
+ "control": "text",
+ "category": "Modifier"
+ },
+ "mod-accordion-disclosure-indicator-to-text-space": {
+ "description": "Used by `.spectrum-Accordion-itemIndicator`.
Defaults to `var(--spectrum-accordion-disclosure-indicator-to-text-space)`, if not set.",
+ "control": "text",
+ "category": "Modifier"
+ },
+ "mod-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": {
+ "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-content-padding-inline": {
+ "description": "Used by `.spectrum-Accordion-itemContent`.
Defaults to `var(--spectrum-accordion-content-padding-inline)`, if not set.",
+ "control": "text",
+ "category": "Modifier"
+ },
+ "mod-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": {
+ "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": {
+ "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": {
+ "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": {
+ "description": "Used by `.spectrum-Accordion-itemContent`.
Defaults to `var(--spectrum-accordion-item-content-line-height)`, if not set.",
+ "control": "text",
+ "category": "Modifier"
+ },
+ "mod-accordion-edge-to-text-space": {
+ "description": "Used by `.spectrum-Accordion-itemTitle`.
Defaults to `var(--spectrum-accordion-edge-to-text-space)`, if not set.",
+ "control": "text",
+ "category": "Modifier"
+ },
+ "mod-accordion-edge-to-content-area": {
+ "description": "Used by `.spectrum-Accordion-itemHeader`, `.spectrum-Accordion-itemDirectActions`.
Defaults to `var(--spectrum-accordion-edge-to-content-area)`, if not set.",
+ "control": "text",
+ "category": "Modifier"
+ },
+ "mod-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": {
+ "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": {
+ "description": "Used by `.spectrum-Accordion-itemHeader`.
Defaults to `var(--spectrum-accordion-item-header-font)`, if not set.",
+ "control": "text",
+ "category": "Modifier"
+ },
+ "mod-accordion-corner-radius": {
+ "description": "Used by `.spectrum-Accordion-itemHeader:focus-visible`, `.spectrum-Accordion--quiet .spectrum-Accordion-itemHeader:active`, `.spectrum-Accordion--quiet .spectrum-Accordion-itemHeader:hover`.
Defaults to `var(--spectrum-accordion-corner-radius)`, if not set.",
+ "control": "text",
+ "category": "Modifier"
+ },
+ "mod-accordion-item-focus-indicator-thickness": {
+ "description": "Used by `.spectrum-Accordion-itemHeader:focus-visible`.
Defaults to `var(--spectrum-accordion-item-focus-indicator-thickness)`, if not set.",
+ "control": "text",
+ "category": "Modifier"
+ },
+ "mod-accordion-item-focus-indicator-gap": {
+ "description": "Used by `.spectrum-Accordion-itemHeader:focus-visible`.
Defaults to `var(--spectrum-accordion-item-focus-indicator-gap)`, if not set.",
+ "control": "text",
+ "category": "Modifier"
+ },
+ "mod-accordion-item-header-to-direct-actions-space": {
+ "description": "Used by `.spectrum-Accordion-itemHeader:has(+ .spectrum-Accordion-itemDirectActions)`.
Defaults to `var(--spectrum-accordion-item-header-to-direct-actions-space)`, if not set.",
+ "control": "text",
+ "category": "Modifier"
+ },
+ "mod-accordion-item-direct-actions-spacing": {
+ "description": "Used by `.spectrum-Accordion-itemDirectActions`.
Defaults to `var(--spectrum-accordion-item-direct-actions-spacing)`, if not set.",
+ "control": "text",
+ "category": "Modifier"
+ },
+ "mod-accordion-item-direct-actions-vertical-spacing": {
+ "description": "Used by `.spectrum-Accordion-itemDirectActions`.
Defaults to `var(--spectrum-accordion-item-direct-actions-vertical-spacing)`, if not set.",
+ "control": "text",
+ "category": "Modifier"
+ }
+ },
+ "component": {
+ "spectrum-accordion-item-minimum-height": {
+ "value": "56px",
+ "description": "Defined in `.spectrum-Accordion`, `.spectrum-Accordion--sizeS`, `.spectrum-Accordion--sizeL`, `.spectrum-Accordion--sizeXL`, `.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`.
Used by `--spectrum-accordion-item-min-block-size`.
Defaults to `var(--spectrum-component-height-400)`, if not set.",
+ "control": "text",
+ "category": "Component"
+ },
+ "spectrum-accordion-item-minimum-width": {
+ "value": "200px",
+ "description": "Defined in `.spectrum-Accordion`.
Used by `.spectrum-Accordion-item`.
Defaults to `var(--spectrum-accordion-minimum-width)`, if not set.",
+ "control": "text",
+ "category": "Component"
+ },
+ "spectrum-accordion-minimum-width": {
+ "value": "200px",
+ "description": "Used by `--spectrum-accordion-item-minimum-width`, `--spectrum-accordion-item-width`.",
+ "control": "text",
+ "category": "Component"
+ },
+ "spectrum-accordion-item-width": {
+ "value": "240px",
+ "description": "Defined in `.spectrum-Accordion`, `.spectrum-Accordion--sizeS`, `.spectrum-Accordion--sizeL`, `.spectrum-Accordion--sizeXL`.
Used by `.spectrum-Accordion-item`.
Defaults to `var(--spectrum-field-default-width-extra-large)`, if not set.",
+ "control": "text",
+ "category": "Component"
+ },
+ "spectrum-accordion-disclosure-indicator-height": {
+ "value": "14px",
+ "description": "Defined in `.spectrum-Accordion`, `.spectrum-Accordion--sizeS`, `.spectrum-Accordion--sizeL`, `.spectrum-Accordion--sizeXL`.
Used by `.spectrum-Accordion-itemIndicator`.
Defaults to `var(--spectrum-chevron-icon-size-300)`, if not set.",
+ "control": "text",
+ "category": "Component"
+ },
+ "spectrum-accordion-disclosure-indicator-to-text-space": {
+ "value": "17px",
+ "description": "Defined in `.spectrum-Accordion`, `.spectrum-Accordion--sizeS`, `.spectrum-Accordion--sizeL`, `.spectrum-Accordion--sizeXL`.
Used by `.spectrum-Accordion-itemIndicator`.
Defaults to `var(--spectrum-accordion-disclosure-indicator-to-text-extra-large)`, if not set.",
+ "control": "text",
+ "category": "Component"
+ },
+ "spectrum-accordion-disclosure-indicator-to-text-medium": {
+ "value": "11px",
+ "description": "Used by `--spectrum-accordion-disclosure-indicator-to-text-space`.",
+ "control": "text",
+ "category": "Component"
+ },
+ "spectrum-accordion-edge-to-disclosure-indicator-space": {
+ "value": "0px",
+ "description": "Defined in `.spectrum-Accordion`, `.spectrum-Accordion--sizeS`, `.spectrum-Accordion--sizeL`, `.spectrum-Accordion--sizeXL`, `.spectrum-Accordion.spectrum-Accordion--noInlinePadding`.
Used by `.spectrum-Accordion-itemIndicator`.
Defaults to `0px`, if not set.",
+ "control": "text",
+ "category": "Component"
+ },
+ "spectrum-accordion-content-padding-inline": {
+ "value": "15px",
+ "description": "Defined in `.spectrum-Accordion`, `.spectrum-Accordion--sizeS`, `.spectrum-Accordion--sizeL`, `.spectrum-Accordion--sizeXL`.
Used by `.spectrum-Accordion-itemContent`.
Defaults to `var(--spectrum-accordion-content-area-edge-to-content-extra-large)`, if not set.",
+ "control": "text",
+ "category": "Component"
+ },
+ "spectrum-accordion-content-area-edge-to-content-medium": {
+ "value": "9px",
+ "description": "Used by `--spectrum-accordion-content-padding-inline`.",
+ "control": "text",
+ "category": "Component"
+ },
+ "spectrum-accordion-edge-to-content-area": {
+ "value": "0px",
+ "description": "Defined in `.spectrum-Accordion`, `.spectrum-Accordion--sizeS`, `.spectrum-Accordion--sizeL`, `.spectrum-Accordion--sizeXL`, `.spectrum-Accordion.spectrum-Accordion--noInlinePadding`.
Used by `.spectrum-Accordion-itemHeader`, `.spectrum-Accordion-itemDirectActions`.
Defaults to `0px`, if not set.",
+ "control": "text",
+ "category": "Component"
+ },
+ "spectrum-accordion-edge-to-content-area-medium": {
+ "value": "11px",
+ "description": "Used by `--spectrum-accordion-edge-to-content-area`.",
+ "control": "text",
+ "category": "Component"
+ },
+ "spectrum-accordion-edge-to-text-space": {
+ "value": "0px",
+ "description": "Defined in `.spectrum-Accordion`.
Used by `.spectrum-Accordion-itemTitle`.
Defaults to `var(--spectrum-accordion-edge-to-text)`, if not set.",
+ "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": {
+ "value": "17px",
+ "description": "Defined in `.spectrum-Accordion`, `.spectrum-Accordion--sizeS`, `.spectrum-Accordion--sizeL`, `.spectrum-Accordion--sizeXL`, `.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`.
Used by `--spectrum-accordion-item-min-block-size`, `.spectrum-Accordion-itemTitle`.
Defaults to `var(--spectrum-accordion-top-to-text-spacious-extra-large)`, if not set.",
+ "control": "text",
+ "category": "Component"
+ },
+ "spectrum-accordion-top-to-text-medium": {
+ "value": "9px",
+ "description": "Used by `--spectrum-accordion-item-header-top-to-text-space`.",
+ "control": "text",
+ "category": "Component"
+ },
+ "spectrum-accordion-item-header-bottom-to-text-space": {
+ "value": "16px",
+ "description": "Defined in `.spectrum-Accordion`, `.spectrum-Accordion--sizeS`, `.spectrum-Accordion--sizeL`, `.spectrum-Accordion--sizeXL`, `.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`.
Used by `--spectrum-accordion-item-min-block-size`, `.spectrum-Accordion-itemTitle`.
Defaults to `var(--spectrum-accordion-bottom-to-text-spacious-extra-large)`, if not set.",
+ "control": "text",
+ "category": "Component"
+ },
+ "spectrum-accordion-bottom-to-text-medium": {
+ "value": "9px",
+ "description": "Used by `--spectrum-accordion-item-header-bottom-to-text-space`.",
+ "control": "text",
+ "category": "Component"
+ },
+ "spectrum-accordion-top-to-disclosure-indicator": {
+ "value": "25px",
+ "description": "Defined in `.spectrum-Accordion`, `.spectrum-Accordion--sizeS`, `.spectrum-Accordion--sizeL`, `.spectrum-Accordion--sizeXL`, `.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`.
Used by `.spectrum-Accordion-itemIndicator`.
Defaults to `var(--spectrum-field-top-to-disclosure-icon-spacious-extra-large)`, if not set.",
+ "control": "text",
+ "category": "Component"
+ },
+ "spectrum-accordion-item-focus-indicator-thickness": {
+ "value": "2px",
+ "description": "Defined in `.spectrum-Accordion`.
Used by `.spectrum-Accordion-itemHeader:focus-visible`.
Defaults to `var(--spectrum-focus-indicator-thickness)`, if not set.",
+ "control": "text",
+ "category": "Component"
+ },
+ "spectrum-accordion-item-focus-indicator-gap": {
+ "value": "2px",
+ "description": "Defined in `.spectrum-Accordion`.
Used by `.spectrum-Accordion-itemHeader:focus-visible`.
Defaults to `var(--spectrum-focus-indicator-gap)`, if not set.",
+ "control": "text",
+ "category": "Component"
+ },
+ "spectrum-accordion-corner-radius": {
+ "value": "10px",
+ "description": "Defined in `.spectrum-Accordion`, `.spectrum-Accordion--sizeS`, `.spectrum-Accordion--sizeL`, `.spectrum-Accordion--sizeXL`.
Used by `.spectrum-Accordion-itemHeader:focus-visible`, `.spectrum-Accordion--quiet .spectrum-Accordion-itemHeader:active`, `.spectrum-Accordion--quiet .spectrum-Accordion-itemHeader:hover`.
Defaults to `var(--spectrum-corner-radius-medium-size-extra-large)`, if not set.",
+ "control": "text",
+ "category": "Component"
+ },
+ "spectrum-accordion-item-content-area-top-to-content": {
+ "value": "8px",
+ "description": "Defined in `.spectrum-Accordion`.
Used by `.spectrum-Accordion-itemContent`.
Defaults to `var(--spectrum-accordion-content-area-top-to-content)`, if not set.",
+ "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": {
+ "value": "16px",
+ "description": "Defined in `.spectrum-Accordion`.
Used by `.spectrum-Accordion-itemContent`.
Defaults to `var(--spectrum-accordion-content-area-bottom-to-content)`, if not set.",
+ "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-divider-thickness": {
+ "value": "0px",
+ "description": "Defined in `.spectrum-Accordion`, `.spectrum-Accordion--quiet`.
Used by `.spectrum-Accordion-item`, `.spectrum-Accordion-item:first-child`.
Defaults to `0px`, if not set.",
+ "control": "text",
+ "category": "Component"
+ },
+ "spectrum-accordion-item-direct-actions-height": {
+ "value": "48px",
+ "description": "Defined in `.spectrum-Accordion`, `.spectrum-Accordion--sizeS`, `.spectrum-Accordion--sizeL`, `.spectrum-Accordion--sizeXL`.
Used by `--spectrum-accordion-item-direct-actions-vertical-spacing`.
Defaults to `var(--spectrum-component-height-300)`, if not set.",
+ "control": "text",
+ "category": "Component"
+ },
+ "spectrum-accordion-item-header-to-direct-actions-space": {
+ "value": "8px",
+ "description": "Defined in `.spectrum-Accordion`.
Used by `.spectrum-Accordion-itemHeader:has(+ .spectrum-Accordion-itemDirectActions)`.
Defaults to `var(--spectrum-spacing-100)`, if not set.",
+ "control": "text",
+ "category": "Component"
+ },
+ "spectrum-accordion-item-header-font": {
+ "value": "var(--spectrum-sans-font-family-stack)",
+ "description": "Defined in `.spectrum-Accordion`.
Used by `.spectrum-Accordion-itemHeader`.
Defaults to `var(--spectrum-sans-font-family-stack)`, if not set.",
+ "control": "text",
+ "category": "Component"
+ },
+ "spectrum-accordion-item-header-font-weight": {
+ "value": "700",
+ "description": "Defined in `.spectrum-Accordion`.
Used by `.spectrum-Accordion-itemHeader`.
Defaults to `var(--spectrum-bold-font-weight)`, if not set.",
+ "control": "text",
+ "category": "Component"
+ },
+ "spectrum-accordion-item-header-font-style": {
+ "value": "normal",
+ "description": "Defined in `.spectrum-Accordion`.
Used by `.spectrum-Accordion-itemHeader`.
Defaults to `var(--spectrum-default-font-style)`, if not set.",
+ "control": "text",
+ "category": "Component"
+ },
+ "spectrum-accordion-item-header-font-size": {
+ "value": "20px",
+ "description": "Defined in `.spectrum-Accordion`, `.spectrum-Accordion--sizeS`, `.spectrum-Accordion--sizeL`, `.spectrum-Accordion--sizeXL`.
Used by `--spectrum-accordion-item-min-block-size`, `.spectrum-Accordion-itemHeader`.
Defaults to `var(--spectrum-font-size-400)`, if not set.",
+ "control": "text",
+ "category": "Component"
+ },
+ "spectrum-accordion-item-header-line-height": {
+ "value": "1.5",
+ "description": "Defined in `.spectrum-Accordion`, `.spectrum-Accordion:lang(ja), .spectrum-Accordion:lang(ko), .spectrum-Accordion:lang(zh)`.
Used by `--spectrum-accordion-item-min-block-size`, `.spectrum-Accordion-itemHeader`.
Defaults to `var(--spectrum-cjk-line-height-100)`, if not set.",
+ "control": "text",
+ "category": "Component"
+ },
+ "spectrum-accordion-item-header-cursor": {
+ "value": "default",
+ "description": "Defined in `.spectrum-Accordion`, `.spectrum-Accordion-item.is-disabled`.
Used by `.spectrum-Accordion-itemHeader`.
Defaults to `default`, if not set.",
+ "control": "text",
+ "category": "Component"
+ },
+ "spectrum-accordion-item-direct-actions-spacing": {
+ "value": "8px",
+ "description": "Defined in `.spectrum-Accordion`.
Used by `.spectrum-Accordion-itemDirectActions`.
Defaults to `var(--spectrum-spacing-100)`, if not set.",
+ "control": "text",
+ "category": "Component"
+ },
+ "spectrum-accordion-animation-duration": {
+ "value": "var(--spectrum-animation-duration-100)",
+ "description": "Defined in `.spectrum-Accordion`.
Used by `.spectrum-Accordion-itemIndicator`.
Defaults to `var(--spectrum-animation-duration-100)`, if not set.",
+ "control": "text",
+ "category": "Component"
+ },
+ "spectrum-accordion-item-content-font": {
+ "value": "var(--spectrum-sans-font-family-stack)",
+ "description": "Defined in `.spectrum-Accordion`.
Used by `.spectrum-Accordion-itemContent`.
Defaults to `var(--spectrum-sans-font-family-stack)`, if not set.",
+ "control": "text",
+ "category": "Component"
+ },
+ "spectrum-accordion-item-content-font-weight": {
+ "value": "400",
+ "description": "Defined in `.spectrum-Accordion`.
Used by `.spectrum-Accordion-itemContent`.
Defaults to `var(--spectrum-body-sans-serif-font-weight)`, if not set.",
+ "control": "text",
+ "category": "Component"
+ },
+ "spectrum-accordion-item-content-font-style": {
+ "value": "normal",
+ "description": "Defined in `.spectrum-Accordion`.
Used by `.spectrum-Accordion-itemContent`.
Defaults to `var(--spectrum-body-sans-serif-font-style)`, if not set.",
+ "control": "text",
+ "category": "Component"
+ },
+ "spectrum-accordion-item-content-font-size": {
+ "value": "var(--spectrum-font-size-300)",
+ "description": "Defined in `.spectrum-Accordion`, `.spectrum-Accordion--sizeS`, `.spectrum-Accordion--sizeL`, `.spectrum-Accordion--sizeXL`.
Used by `.spectrum-Accordion-itemContent`.
Defaults to `var(--spectrum-body-size-l)`, if not set.",
+ "control": "text",
+ "category": "Component"
+ },
+ "spectrum-accordion-item-content-line-height": {
+ "value": "1.5",
+ "description": "Defined in `.spectrum-Accordion`, `.spectrum-Accordion:lang(ja), .spectrum-Accordion:lang(ko), .spectrum-Accordion:lang(zh)`.
Used by `.spectrum-Accordion-itemContent`.
Defaults to `var(--spectrum-cjk-line-height-100)`, if not set.",
+ "control": "text",
+ "category": "Component"
+ },
+ "spectrum-accordion-background-color-default": {
+ "value": "transparent",
+ "description": "Defined in `.spectrum-Accordion`, `.spectrum-Accordion-item.is-disabled`.
Used by `.spectrum-Accordion-itemHeader`.
Defaults to `transparent`, if not set.",
+ "control": "color",
+ "category": "Component"
+ },
+ "spectrum-accordion-background-color-hover": {
+ "value": "transparent",
+ "description": "Defined in `.spectrum-Accordion`, `.spectrum-Accordion-item.is-disabled`.
Used by `.spectrum-Accordion-itemHeader:hover`.
Defaults to `transparent`, if not set.",
+ "control": "color",
+ "category": "Component"
+ },
+ "spectrum-accordion-background-color-down": {
+ "value": "transparent",
+ "description": "Defined in `.spectrum-Accordion`, `.spectrum-Accordion-item.is-disabled`.
Used by `.spectrum-Accordion-itemHeader.spectrum-Accordion-itemHeader:active`.
Defaults to `transparent`, if not set.",
+ "control": "color",
+ "category": "Component"
+ },
+ "spectrum-accordion-background-color-key-focus": {
+ "value": "transparent",
+ "description": "Defined in `.spectrum-Accordion`, `.spectrum-Accordion-item.is-disabled`.
Used by `.spectrum-Accordion-itemHeader:focus-visible`.
Defaults to `transparent`, if not set.",
+ "control": "color",
+ "category": "Component"
+ },
+ "spectrum-accordion-item-content-color": {
+ "value": "var(--mod-accordion-item-content-disabled-color, var(--spectrum-disabled-content-color))",
+ "description": "Defined in `.spectrum-Accordion`, `.spectrum-Accordion-item.is-disabled`.
Used by `.spectrum-Accordion-itemContent`.
Defaults to `var(--mod-accordion-item-content-disabled-color, var(--spectrum-disabled-content-color))`, if not set.",
+ "control": "color",
+ "category": "Component"
+ },
+ "spectrum-accordion-divider-color": {
+ "value": "var(--mod-accordion-divider-color, var(--spectrum-gray-200))",
+ "description": "Defined in `.spectrum-Accordion`.
Used by `.spectrum-Accordion-item`, `.spectrum-Accordion-item:first-child`.
Defaults to `var(--mod-accordion-divider-color, var(--spectrum-gray-200))`, if not set.",
+ "control": "color",
+ "category": "Component"
+ },
+ "spectrum-accordion-item-focus-indicator-color": {
+ "value": "Highlight",
+ "description": "Defined in `.spectrum-Accordion`.
Used by `.spectrum-Accordion-itemHeader:focus-visible`.
Defaults to `Highlight`, if not set.",
+ "control": "color",
+ "category": "Component"
+ },
+ "spectrum-accordion-item-header-color-default": {
+ "value": "var(--mod-accordion-item-header-disabled-color, var(--spectrum-disabled-content-color))",
+ "description": "Defined in `.spectrum-Accordion`, `.spectrum-Accordion-item.is-disabled`.
Used by `.spectrum-Accordion-itemHeader`.
Defaults to `var(--mod-accordion-item-header-disabled-color, var(--spectrum-disabled-content-color))`, if not set.",
+ "control": "color",
+ "category": "Component"
+ },
+ "spectrum-accordion-item-header-color-hover": {
+ "value": "var(--mod-accordion-item-header-disabled-color, var(--spectrum-disabled-content-color))",
+ "description": "Defined in `.spectrum-Accordion`, `.spectrum-Accordion-item.is-disabled`.
Used by `.spectrum-Accordion-itemHeader:hover`.
Defaults to `var(--mod-accordion-item-header-disabled-color, var(--spectrum-disabled-content-color))`, if not set.",
+ "control": "color",
+ "category": "Component"
+ },
+ "spectrum-accordion-item-header-color-down": {
+ "value": "var(--mod-accordion-item-header-disabled-color, var(--spectrum-disabled-content-color))",
+ "description": "Defined in `.spectrum-Accordion`, `.spectrum-Accordion-item.is-disabled`.
Used by `.spectrum-Accordion-itemHeader.spectrum-Accordion-itemHeader:active`.
Defaults to `var(--mod-accordion-item-header-disabled-color, var(--spectrum-disabled-content-color))`, if not set.",
+ "control": "color",
+ "category": "Component"
+ },
+ "spectrum-accordion-item-header-color-key-focus": {
+ "value": "var(--mod-accordion-item-header-disabled-color, var(--spectrum-disabled-content-color))",
+ "description": "Defined in `.spectrum-Accordion`, `.spectrum-Accordion-item.is-disabled`.
Used by `.spectrum-Accordion-itemHeader:focus-visible`.
Defaults to `var(--mod-accordion-item-header-disabled-color, var(--spectrum-disabled-content-color))`, if not set.",
+ "control": "color",
+ "category": "Component"
+ },
+ "spectrum-accordion-item-min-block-size": {
+ "value": "max(var(--mod-accordion-item-minimum-height, var(--spectrum-accordion-item-minimum-height)),var(--mod-accordion-item-header-top-to-text-space, var(--spectrum-accordion-item-header-top-to-text-space)) + var(--mod-accordion-item-header-bottom-to-text-space, var(--spectrum-accordion-item-header-bottom-to-text-space)) + (var(--mod-accordion-item-header-font-size, var(--spectrum-accordion-item-header-font-size)) * var(--mod-accordion-item-header-line-height, var(--spectrum-accordion-item-header-line-height))))",
+ "description": "Defined in `.spectrum-Accordion`.
Used by `--spectrum-accordion-item-direct-actions-vertical-spacing`, `.spectrum-Accordion-item`.
Defaults to `max(var(--mod-accordion-item-minimum-height, var(--spectrum-accordion-item-minimum-height)),var(--mod-accordion-item-header-top-to-text-space, var(--spectrum-accordion-item-header-top-to-text-space)) + var(--mod-accordion-item-header-bottom-to-text-space, var(--spectrum-accordion-item-header-bottom-to-text-space)) + (var(--mod-accordion-item-header-font-size, var(--spectrum-accordion-item-header-font-size)) * var(--mod-accordion-item-header-line-height, var(--spectrum-accordion-item-header-line-height))))`, if not set.",
+ "control": "text",
+ "category": "Component"
+ },
+ "spectrum-accordion-item-direct-actions-vertical-spacing": {
+ "value": "calc((var(--mod-accordion-item-min-block-size, var(--spectrum-accordion-item-min-block-size)) - var(--mod-accordion-item-direct-actions-height, var(--spectrum-accordion-item-direct-actions-height))) / 2)",
+ "description": "Defined in `.spectrum-Accordion`.
Used by `.spectrum-Accordion-itemDirectActions`.
Defaults to `calc((var(--mod-accordion-item-min-block-size, var(--spectrum-accordion-item-min-block-size)) - var(--mod-accordion-item-direct-actions-height, var(--spectrum-accordion-item-direct-actions-height))) / 2)`, if not set.",
+ "control": "text",
+ "category": "Component"
+ },
+ "spectrum-accordion-disclosure-indicator-to-text-small": {
+ "value": "7px",
+ "description": "Used by `--spectrum-accordion-disclosure-indicator-to-text-space`.",
+ "control": "text",
+ "category": "Component"
+ },
+ "spectrum-accordion-content-area-edge-to-content-small": {
+ "value": "8px",
+ "description": "Used by `--spectrum-accordion-content-padding-inline`.",
+ "control": "text",
+ "category": "Component"
+ },
+ "spectrum-accordion-edge-to-content-area-small": {
+ "value": "7px",
+ "description": "Used by `--spectrum-accordion-edge-to-content-area`.",
+ "control": "text",
+ "category": "Component"
+ },
+ "spectrum-accordion-top-to-text-small": {
+ "value": "7px",
+ "description": "Used by `--spectrum-accordion-item-header-top-to-text-space`.",
+ "control": "text",
+ "category": "Component"
+ },
+ "spectrum-accordion-bottom-to-text-small": {
+ "value": "7px",
+ "description": "Used by `--spectrum-accordion-item-header-bottom-to-text-space`.",
+ "control": "text",
+ "category": "Component"
+ },
+ "spectrum-accordion-disclosure-indicator-to-text-large": {
+ "value": "14px",
+ "description": "Used by `--spectrum-accordion-disclosure-indicator-to-text-space`.",
+ "control": "text",
+ "category": "Component"
+ },
+ "spectrum-accordion-content-area-edge-to-content-large": {
+ "value": "12px",
+ "description": "Used by `--spectrum-accordion-content-padding-inline`.",
+ "control": "text",
+ "category": "Component"
+ },
+ "spectrum-accordion-edge-to-content-area-large": {
+ "value": "14px",
+ "description": "Used by `--spectrum-accordion-edge-to-content-area`.",
+ "control": "text",
+ "category": "Component"
+ },
+ "spectrum-accordion-top-to-text-large": {
+ "value": "12px",
+ "description": "Used by `--spectrum-accordion-item-header-top-to-text-space`.",
+ "control": "text",
+ "category": "Component"
+ },
+ "spectrum-accordion-bottom-to-text-large": {
+ "value": "11px",
+ "description": "Used by `--spectrum-accordion-item-header-bottom-to-text-space`.",
+ "control": "text",
+ "category": "Component"
+ },
+ "spectrum-accordion-disclosure-indicator-to-text-extra-large": {
+ "value": "17px",
+ "description": "Used by `--spectrum-accordion-disclosure-indicator-to-text-space`.",
+ "control": "text",
+ "category": "Component"
+ },
+ "spectrum-accordion-content-area-edge-to-content-extra-large": {
+ "value": "15px",
+ "description": "Used by `--spectrum-accordion-content-padding-inline`.",
+ "control": "text",
+ "category": "Component"
+ },
+ "spectrum-accordion-edge-to-content-area-extra-large": {
+ "value": "17px",
+ "description": "Used by `--spectrum-accordion-edge-to-content-area`.",
+ "control": "text",
+ "category": "Component"
+ },
+ "spectrum-accordion-top-to-text-extra-large": {
+ "value": "13px",
+ "description": "Used by `--spectrum-accordion-item-header-top-to-text-space`.",
+ "control": "text",
+ "category": "Component"
+ },
+ "spectrum-accordion-bottom-to-text-extra-large": {
+ "value": "12px",
+ "description": "Used by `--spectrum-accordion-item-header-bottom-to-text-space`.",
+ "control": "text",
+ "category": "Component"
+ },
+ "spectrum-accordion-top-to-text-compact-medium": {
+ "value": "5px",
+ "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": "3px",
+ "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": "8px",
+ "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": "8px",
+ "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": "13px",
+ "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-top-to-text-spacious-small": {
+ "value": "11px",
+ "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": "16px",
+ "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": "17px",
+ "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"
+ }
+ },
+ "global": {
+ "spectrum-component-height-100": {
+ "value": "32px",
+ "description": "Used by `--spectrum-accordion-item-minimum-height`, `--spectrum-accordion-item-direct-actions-height`.",
+ "control": "text",
+ "category": "Global"
+ },
+ "spectrum-field-default-width-medium": {
+ "value": "208px",
+ "description": "Used by `--spectrum-accordion-item-width`.",
+ "control": "text",
+ "category": "Global"
+ },
+ "spectrum-chevron-icon-size-100": {
+ "value": "10px",
+ "description": "Used by `--spectrum-accordion-disclosure-indicator-height`.",
+ "control": "text",
+ "category": "Global"
+ },
+ "spectrum-field-edge-to-disclosure-icon-100": {
+ "value": "11px",
+ "description": "Used by `--spectrum-accordion-edge-to-disclosure-indicator-space`.",
+ "control": "text",
+ "category": "Global"
+ },
+ "spectrum-field-top-to-disclosure-icon-medium": {
+ "value": "15px",
+ "description": "Used by `--spectrum-accordion-top-to-disclosure-indicator`.",
+ "control": "text",
+ "category": "Global"
+ },
+ "spectrum-focus-indicator-thickness": {
+ "value": "2px",
+ "description": "Used by `--spectrum-accordion-item-focus-indicator-thickness`.",
+ "control": "text",
+ "category": "Global"
+ },
+ "spectrum-focus-indicator-gap": {
+ "value": "2px",
+ "description": "Used by `--spectrum-accordion-item-focus-indicator-gap`.",
+ "control": "text",
+ "category": "Global"
+ },
+ "spectrum-corner-radius-medium-size-medium": {
+ "value": "8px",
+ "description": "Used by `--spectrum-accordion-corner-radius`.",
+ "control": "text",
+ "category": "Global"
+ },
+ "spectrum-divider-thickness-small": {
+ "value": "1px",
+ "description": "Used by `--spectrum-accordion-divider-thickness`.",
+ "control": "text",
+ "category": "Global"
+ },
+ "spectrum-spacing-100": {
+ "value": "8px",
+ "description": "Used by `--spectrum-accordion-item-header-to-direct-actions-space`, `--spectrum-accordion-item-direct-actions-spacing`.",
+ "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-200": {
+ "value": "16px",
+ "description": "Used by `--spectrum-accordion-item-header-font-size`.",
+ "control": "text",
+ "category": "Global"
+ },
+ "spectrum-line-height-100": {
+ "value": "1.3",
+ "description": "Used by `--spectrum-accordion-item-header-line-height`, `--spectrum-accordion-item-content-line-height`.",
+ "control": "text",
+ "category": "Global"
+ },
+ "spectrum-animation-duration-100": {
+ "description": "Used by `--spectrum-accordion-animation-duration`.",
+ "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-transparent-black-25": {
+ "value": "rgba(0, 0, 0, 0)",
+ "description": "Used by `--spectrum-accordion-background-color-default`.",
+ "control": "text",
+ "category": "Global"
+ },
+ "spectrum-transparent-black-100": {
+ "value": "rgba(0, 0, 0, 0.09)",
+ "description": "Used by `--spectrum-accordion-background-color-hover`, `--spectrum-accordion-background-color-key-focus`.",
+ "control": "text",
+ "category": "Global"
+ },
+ "spectrum-transparent-black-300": {
+ "value": "rgba(0, 0, 0, 0.15)",
+ "description": "Used by `--spectrum-accordion-background-color-down`.",
+ "control": "text",
+ "category": "Global"
+ },
+ "spectrum-body-color": {
+ "value": "var(--spectrum-gray-800)",
+ "description": "Used by `--spectrum-accordion-item-content-color`.",
+ "control": "color",
+ "category": "Global"
+ },
+ "spectrum-gray-200": {
+ "value": "light-dark(rgb(225, 225, 225), rgb(50, 50, 50))",
+ "description": "Used by `--spectrum-accordion-divider-color`.",
+ "control": "text",
+ "category": "Global"
+ },
+ "spectrum-focus-indicator-color": {
+ "value": "var(--spectrum-blue-800)",
+ "description": "Used by `--spectrum-accordion-item-focus-indicator-color`.",
+ "control": "color",
+ "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-logical-rotation": {
+ "value": "matrix(-1, 0, 0, 1, 0, 0)",
+ "description": "Defined in `.spectrum-Accordion:dir(rtl)`.
Used by `.spectrum-Accordion-itemIndicator`, `.spectrum-Accordion-item.is-open > .spectrum-Accordion-itemHeading .spectrum-Accordion-itemIndicator`.
Defaults to `matrix(-1, 0, 0, 1, 0, 0)`, if not set.",
+ "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-minimum-height`, `--spectrum-accordion-item-direct-actions-height`.",
+ "control": "text",
+ "category": "Global"
+ },
+ "spectrum-chevron-icon-size-75": {
+ "value": "10px",
+ "description": "Used by `--spectrum-accordion-disclosure-indicator-height`.",
+ "control": "text",
+ "category": "Global"
+ },
+ "spectrum-field-edge-to-disclosure-icon-75": {
+ "value": "7px",
+ "description": "Used by `--spectrum-accordion-edge-to-disclosure-indicator-space`.",
+ "control": "text",
+ "category": "Global"
+ },
+ "spectrum-corner-radius-medium-size-small": {
+ "value": "7px",
+ "description": "Used by `--spectrum-accordion-corner-radius`.",
+ "control": "text",
+ "category": "Global"
+ },
+ "spectrum-font-size-100": {
+ "value": "14px",
+ "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-field-top-to-disclosure-icon-small": {
+ "value": "11px",
+ "description": "Used by `--spectrum-accordion-top-to-disclosure-indicator`.",
+ "control": "text",
+ "category": "Global"
+ },
+ "spectrum-component-height-200": {
+ "value": "40px",
+ "description": "Used by `--spectrum-accordion-item-minimum-height`, `--spectrum-accordion-item-direct-actions-height`.",
+ "control": "text",
+ "category": "Global"
+ },
+ "spectrum-field-default-width-large": {
+ "value": "224px",
+ "description": "Used by `--spectrum-accordion-item-width`.",
+ "control": "text",
+ "category": "Global"
+ },
+ "spectrum-chevron-icon-size-200": {
+ "value": "12px",
+ "description": "Used by `--spectrum-accordion-disclosure-indicator-height`.",
+ "control": "text",
+ "category": "Global"
+ },
+ "spectrum-field-edge-to-disclosure-icon-200": {
+ "value": "14px",
+ "description": "Used by `--spectrum-accordion-edge-to-disclosure-indicator-space`.",
+ "control": "text",
+ "category": "Global"
+ },
+ "spectrum-corner-radius-medium-size-large": {
+ "value": "9px",
+ "description": "Used by `--spectrum-accordion-corner-radius`.",
+ "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-size-m": {
+ "value": "var(--spectrum-font-size-200)",
+ "description": "Used by `--spectrum-accordion-item-content-font-size`.",
+ "control": "text",
+ "category": "Global"
+ },
+ "spectrum-field-top-to-disclosure-icon-large": {
+ "value": "18px",
+ "description": "Used by `--spectrum-accordion-top-to-disclosure-indicator`.",
+ "control": "text",
+ "category": "Global"
+ },
+ "spectrum-component-height-300": {
+ "value": "48px",
+ "description": "Used by `--spectrum-accordion-item-minimum-height`, `--spectrum-accordion-item-direct-actions-height`.",
+ "control": "text",
+ "category": "Global"
+ },
+ "spectrum-field-default-width-extra-large": {
+ "value": "240px",
+ "description": "Used by `--spectrum-accordion-item-width`.",
+ "control": "text",
+ "category": "Global"
+ },
+ "spectrum-chevron-icon-size-300": {
+ "value": "14px",
+ "description": "Used by `--spectrum-accordion-disclosure-indicator-height`.",
+ "control": "text",
+ "category": "Global"
+ },
+ "spectrum-field-edge-to-disclosure-icon-300": {
+ "value": "17px",
+ "description": "Used by `--spectrum-accordion-edge-to-disclosure-indicator-space`.",
+ "control": "text",
+ "category": "Global"
+ },
+ "spectrum-corner-radius-medium-size-extra-large": {
+ "value": "10px",
+ "description": "Used by `--spectrum-accordion-corner-radius`.",
+ "control": "text",
+ "category": "Global"
+ },
+ "spectrum-font-size-400": {
+ "value": "20px",
+ "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-field-top-to-disclosure-icon-extra-large": {
+ "value": "21px",
+ "description": "Used by `--spectrum-accordion-top-to-disclosure-indicator`.",
+ "control": "text",
+ "category": "Global"
+ },
+ "spectrum-field-top-to-disclosure-icon-compact-medium": {
+ "value": "11px",
+ "description": "Used by `--spectrum-accordion-top-to-disclosure-indicator`.",
+ "control": "text",
+ "category": "Global"
+ },
+ "spectrum-component-height-50": {
+ "value": "20px",
+ "description": "Used by `--spectrum-accordion-item-minimum-height`.",
+ "control": "text",
+ "category": "Global"
+ },
+ "spectrum-field-top-to-disclosure-icon-compact-small": {
+ "value": "7px",
+ "description": "Used by `--spectrum-accordion-top-to-disclosure-indicator`.",
+ "control": "text",
+ "category": "Global"
+ },
+ "spectrum-field-top-to-disclosure-icon-compact-large": {
+ "value": "14px",
+ "description": "Used by `--spectrum-accordion-top-to-disclosure-indicator`.",
+ "control": "text",
+ "category": "Global"
+ },
+ "spectrum-field-top-to-disclosure-icon-compact-extra-large": {
+ "value": "17px",
+ "description": "Used by `--spectrum-accordion-top-to-disclosure-indicator`.",
+ "control": "text",
+ "category": "Global"
+ },
+ "spectrum-field-top-to-disclosure-icon-spacious-medium": {
+ "value": "19px",
+ "description": "Used by `--spectrum-accordion-top-to-disclosure-indicator`.",
+ "control": "text",
+ "category": "Global"
+ },
+ "spectrum-field-top-to-disclosure-icon-spacious-small": {
+ "value": "15px",
+ "description": "Used by `--spectrum-accordion-top-to-disclosure-indicator`.",
+ "control": "text",
+ "category": "Global"
+ },
+ "spectrum-field-top-to-disclosure-icon-spacious-large": {
+ "value": "22px",
+ "description": "Used by `--spectrum-accordion-top-to-disclosure-indicator`.",
+ "control": "text",
+ "category": "Global"
+ },
+ "spectrum-component-height-400": {
+ "value": "56px",
+ "description": "Used by `--spectrum-accordion-item-minimum-height`.",
+ "control": "text",
+ "category": "Global"
+ },
+ "spectrum-field-top-to-disclosure-icon-spacious-extra-large": {
+ "value": "25px",
+ "description": "Used by `--spectrum-accordion-top-to-disclosure-indicator`.",
+ "control": "text",
+ "category": "Global"
+ },
+ "spectrum-disabled-content-color": {
+ "value": "var(--spectrum-gray-400)",
+ "description": "Used by `--spectrum-accordion-item-content-color`, `--spectrum-accordion-item-header-color-default`, `--spectrum-accordion-item-header-color-hover`, `--spectrum-accordion-item-header-color-down`, `--spectrum-accordion-item-header-color-key-focus`.",
+ "control": "color",
+ "category": "Global"
+ }
+ },
+ "passthroughs": {},
+ "high-contrast": {}
}
diff --git a/components/accordion/index.css b/components/accordion/index.css
index d250feb2f21..97deea91630 100644
--- a/components/accordion/index.css
+++ b/components/accordion/index.css
@@ -87,6 +87,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 925ed7c7cd2..023b16f266e 100644
--- a/components/accordion/stories/accordion.stories.js
+++ b/components/accordion/stories/accordion.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 { isQuiet, size } from "@spectrum-css/preview/types";
-import metadata from "../dist/metadata.json";
-import packageJson from "../package.json";
import { AccordionGroup, testsContent as accordionContent, directActionsContent, longerContent } 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,
@@ -118,8 +120,12 @@ export default {
status: {
type: "migrated",
},
- tags: ["migrated"],
+ cssprops: {
+ ...metadata.modifiers,
+ ...metadata.component,
+ },
},
+ tags: ["migrated"],
};
/**
diff --git a/components/actionbar/dist/metadata.json b/components/actionbar/dist/metadata.json
index 2073a6be7d6..de0c5c238f0 100644
--- a/components/actionbar/dist/metadata.json
+++ b/components/actionbar/dist/metadata.json
@@ -11,76 +11,344 @@
".spectrum-ActionBar--fixed",
".spectrum-ActionBar--flexible .spectrum-ActionBar-popover",
".spectrum-ActionBar--sticky",
- ".spectrum-ActionBar.is-open",
- ".spectrum-ActionBar.spectrum-ActionBar--emphasized",
".spectrum-ActionBar:lang(ja)",
".spectrum-ActionBar:lang(ko)",
- ".spectrum-ActionBar:lang(zh)"
- ],
- "modifiers": [
- "--mod-actionbar-close-button-to-counter",
- "--mod-actionbar-corner-radius",
- "--mod-actionbar-height",
- "--mod-actionbar-item-counter-color",
- "--mod-actionbar-item-counter-line-height-cjk",
- "--mod-actionbar-minimum-width",
- "--mod-actionbar-popover-background-color",
- "--mod-actionbar-popover-border-color",
- "--mod-actionbar-shadow-blur",
- "--mod-actionbar-shadow-color",
- "--mod-actionbar-shadow-horizontal",
- "--mod-actionbar-shadow-vertical",
- "--mod-actionbar-spacing-action-group-edge",
- "--mod-actionbar-spacing-bottom-area",
- "--mod-actionbar-spacing-label-to-action-group",
- "--mod-actionbar-spacing-outer-edge",
- "--mod-actionbar-spacing-top-area"
- ],
- "component": [
- "--spectrum-action-bar-border-color",
- "--spectrum-action-bar-bottom-to-content-area",
- "--spectrum-action-bar-close-button-to-counter",
- "--spectrum-action-bar-counter-font-size",
- "--spectrum-action-bar-edge-to-content-area",
- "--spectrum-action-bar-height",
- "--spectrum-action-bar-label-to-action-group-area",
- "--spectrum-action-bar-minimum-width",
- "--spectrum-action-bar-top-to-content-area",
- "--spectrum-actionbar-close-button-to-counter",
- "--spectrum-actionbar-corner-radius",
- "--spectrum-actionbar-height",
- "--spectrum-actionbar-item-counter-color",
- "--spectrum-actionbar-item-counter-line-height",
- "--spectrum-actionbar-item-counter-line-height-cjk",
- "--spectrum-actionbar-minimum-width",
- "--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-bottom-area",
- "--spectrum-actionbar-spacing-label-to-action-group",
- "--spectrum-actionbar-spacing-outer-edge",
- "--spectrum-actionbar-spacing-padding-inline",
- "--spectrum-actionbar-spacing-top-area"
- ],
- "global": [
- "--spectrum-background-elevated-color",
- "--spectrum-cjk-line-height-100",
- "--spectrum-corner-radius-medium-size-extra-large",
- "--spectrum-drop-shadow-elevated-blur",
- "--spectrum-drop-shadow-elevated-color",
- "--spectrum-drop-shadow-elevated-x",
- "--spectrum-drop-shadow-elevated-y",
- "--spectrum-gray-25",
- "--spectrum-line-height-100",
- "--spectrum-neutral-content-color-default",
- "--spectrum-spacing-300"
- ],
- "passthroughs": [
- "--mod-fieldlabel-font-size",
- "--mod-fieldlabel-line-height"
+ ".spectrum-ActionBar:lang(zh)",
+ ".spectrum-ActionBar.is-open",
+ ".spectrum-ActionBar.spectrum-ActionBar--emphasized"
],
- "high-contrast": ["--highcontrast-actionbar-popover-border-color"]
+ "modifiers": {
+ "mod-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": {
+ "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-minimum-width": {
+ "description": "Used by `.spectrum-ActionBar .spectrum-ActionBar-popover`.
Defaults to `var(--spectrum-actionbar-minimum-width)`, if not set.",
+ "control": "text",
+ "category": "Modifier"
+ },
+ "mod-actionbar-spacing-action-group-edge": {
+ "description": "Used by `.spectrum-ActionBar .spectrum-ActionBar-popover`.
Defaults to `var(--spectrum-actionbar-spacing-padding-inline)`, if not set.",
+ "control": "text",
+ "category": "Modifier"
+ },
+ "mod-actionbar-spacing-top-area": {
+ "description": "Used by `.spectrum-ActionBar .spectrum-ActionBar-popover`.
Defaults to `var(--spectrum-actionbar-spacing-top-area)`, if not set.",
+ "control": "text",
+ "category": "Modifier"
+ },
+ "mod-actionbar-spacing-bottom-area": {
+ "description": "Used by `.spectrum-ActionBar .spectrum-ActionBar-popover`.
Defaults to `var(--spectrum-actionbar-spacing-bottom-area)`, if not set.",
+ "control": "text",
+ "category": "Modifier"
+ },
+ "mod-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": {
+ "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": {
+ "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": {
+ "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": {
+ "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": {
+ "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": {
+ "description": "Used by `.spectrum-ActionBar .spectrum-ActionBar-popover`.
Defaults to `var(--spectrum-actionbar-shadow-color)`, if not set.",
+ "control": "color",
+ "category": "Modifier"
+ },
+ "mod-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-close-button-to-counter": {
+ "description": "Used by `.spectrum-ActionBar .spectrum-FieldLabel`.
Defaults to `var(--spectrum-actionbar-close-button-to-counter)`, if not set.",
+ "control": "text",
+ "category": "Modifier"
+ },
+ "mod-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-label-to-action-group": {
+ "description": "Used by `.spectrum-ActionBar .spectrum-ActionGroup`.
Defaults to `var(--spectrum-actionbar-spacing-label-to-action-group)`, if not set.",
+ "control": "text",
+ "category": "Modifier"
+ }
+ },
+ "component": {
+ "spectrum-actionbar-height": {
+ "value": "var(--spectrum-component-height-400)",
+ "description": "Defined in `.spectrum-ActionBar`.
Used by `.spectrum-ActionBar.is-open`, `.spectrum-ActionBar .spectrum-ActionBar-popover`.
Defaults to `var(--spectrum-action-bar-height)`, if not set.",
+ "control": "text",
+ "category": "Component"
+ },
+ "spectrum-action-bar-height": {
+ "value": "var(--spectrum-component-height-400)",
+ "description": "Used by `--spectrum-actionbar-height`.",
+ "control": "text",
+ "category": "Component"
+ },
+ "spectrum-actionbar-minimum-width": {
+ "value": "176px",
+ "description": "Defined in `.spectrum-ActionBar`.
Used by `.spectrum-ActionBar .spectrum-ActionBar-popover`.
Defaults to `var(--spectrum-action-bar-minimum-width)`, if not set.",
+ "control": "text",
+ "category": "Component"
+ },
+ "spectrum-action-bar-minimum-width": {
+ "value": "176px",
+ "description": "Used by `--spectrum-actionbar-minimum-width`.",
+ "control": "text",
+ "category": "Component"
+ },
+ "spectrum-actionbar-corner-radius": {
+ "value": "10px",
+ "description": "Defined in `.spectrum-ActionBar`.
Used by `.spectrum-ActionBar .spectrum-ActionBar-popover`.
Defaults to `var(--spectrum-corner-radius-medium-size-extra-large)`, if not set.",
+ "control": "text",
+ "category": "Component"
+ },
+ "spectrum-actionbar-spacing-label-to-action-group": {
+ "value": "16px",
+ "description": "Defined in `.spectrum-ActionBar`.
Used by `.spectrum-ActionBar .spectrum-ActionGroup`.
Defaults to `var(--spectrum-action-bar-label-to-action-group-area)`, if not set.",
+ "control": "text",
+ "category": "Component"
+ },
+ "spectrum-action-bar-label-to-action-group-area": {
+ "value": "16px",
+ "description": "Used by `--spectrum-actionbar-spacing-label-to-action-group`.",
+ "control": "text",
+ "category": "Component"
+ },
+ "spectrum-actionbar-spacing-padding-inline": {
+ "value": "8px",
+ "description": "Defined in `.spectrum-ActionBar`.
Used by `.spectrum-ActionBar .spectrum-ActionBar-popover`.
Defaults to `var(--spectrum-action-bar-edge-to-content-area)`, if not set.",
+ "control": "text",
+ "category": "Component"
+ },
+ "spectrum-action-bar-edge-to-content-area": {
+ "value": "8px",
+ "description": "Used by `--spectrum-actionbar-spacing-padding-inline`.",
+ "control": "text",
+ "category": "Component"
+ },
+ "spectrum-actionbar-spacing-top-area": {
+ "value": "12px",
+ "description": "Defined in `.spectrum-ActionBar`.
Used by `.spectrum-ActionBar .spectrum-ActionBar-popover`.
Defaults to `var(--spectrum-action-bar-top-to-content-area)`, if not set.",
+ "control": "text",
+ "category": "Component"
+ },
+ "spectrum-action-bar-top-to-content-area": {
+ "value": "12px",
+ "description": "Used by `--spectrum-actionbar-spacing-top-area`.",
+ "control": "text",
+ "category": "Component"
+ },
+ "spectrum-actionbar-spacing-bottom-area": {
+ "value": "12px",
+ "description": "Defined in `.spectrum-ActionBar`.
Used by `.spectrum-ActionBar .spectrum-ActionBar-popover`.
Defaults to `var(--spectrum-action-bar-bottom-to-content-area)`, if not set.",
+ "control": "text",
+ "category": "Component"
+ },
+ "spectrum-action-bar-bottom-to-content-area": {
+ "value": "12px",
+ "description": "Used by `--spectrum-actionbar-spacing-bottom-area`.",
+ "control": "text",
+ "category": "Component"
+ },
+ "spectrum-actionbar-close-button-to-counter": {
+ "value": "var(--spectrum-text-to-control-50)",
+ "description": "Defined in `.spectrum-ActionBar`.
Used by `.spectrum-ActionBar .spectrum-FieldLabel`.
Defaults to `var(--spectrum-action-bar-close-button-to-counter)`, if not set.",
+ "control": "text",
+ "category": "Component"
+ },
+ "spectrum-action-bar-close-button-to-counter": {
+ "value": "var(--spectrum-text-to-control-50)",
+ "description": "Used by `--spectrum-actionbar-close-button-to-counter`.",
+ "control": "text",
+ "category": "Component"
+ },
+ "spectrum-actionbar-item-counter-line-height": {
+ "value": "1.3",
+ "description": "Defined in `.spectrum-ActionBar`.
Used by `--mod-fieldlabel-line-height`.
Defaults to `var(--spectrum-line-height-100)`, if not set.",
+ "control": "text",
+ "category": "Component"
+ },
+ "spectrum-actionbar-item-counter-color": {
+ "value": "light-dark(rgb(255, 255, 255), rgb(17, 17, 17))",
+ "description": "Defined in `.spectrum-ActionBar`, `.spectrum-ActionBar.spectrum-ActionBar--emphasized`.
Used by `.spectrum-ActionBar .spectrum-FieldLabel`.
Defaults to `var(--spectrum-gray-25)`, if not set.",
+ "control": "color",
+ "category": "Component"
+ },
+ "spectrum-actionbar-popover-background-color": {
+ "value": "var(--spectrum-gray-800)",
+ "description": "Defined in `.spectrum-ActionBar`, `.spectrum-ActionBar.spectrum-ActionBar--emphasized`.
Used by `.spectrum-ActionBar .spectrum-ActionBar-popover`.
Defaults to `var(--spectrum-neutral-content-color-default)`, if not set.",
+ "control": "color",
+ "category": "Component"
+ },
+ "spectrum-actionbar-popover-border-color": {
+ "value": "rgba(255, 255, 255, 0)",
+ "description": "Defined in `.spectrum-ActionBar`.
Used by `.spectrum-ActionBar .spectrum-ActionBar-popover`.
Defaults to `var(--spectrum-action-bar-border-color)`, if not set.",
+ "control": "color",
+ "category": "Component"
+ },
+ "spectrum-action-bar-border-color": {
+ "value": "rgba(255, 255, 255, 0)",
+ "description": "Used by `--spectrum-actionbar-popover-border-color`.",
+ "control": "color",
+ "category": "Component"
+ },
+ "spectrum-actionbar-spacing-outer-edge": {
+ "value": "16px",
+ "description": "Defined in `.spectrum-ActionBar`.
Used by `.spectrum-ActionBar`, `.spectrum-ActionBar.is-open`.
Defaults to `var(--spectrum-spacing-300)`, if not set.",
+ "control": "text",
+ "category": "Component"
+ },
+ "spectrum-actionbar-shadow-horizontal": {
+ "value": "0px",
+ "description": "Defined in `.spectrum-ActionBar`.
Used by `.spectrum-ActionBar .spectrum-ActionBar-popover`.
Defaults to `var(--spectrum-drop-shadow-elevated-x)`, if not set.",
+ "control": "text",
+ "category": "Component"
+ },
+ "spectrum-actionbar-shadow-vertical": {
+ "value": "2px",
+ "description": "Defined in `.spectrum-ActionBar`.
Used by `.spectrum-ActionBar .spectrum-ActionBar-popover`.
Defaults to `var(--spectrum-drop-shadow-elevated-y)`, if not set.",
+ "control": "text",
+ "category": "Component"
+ },
+ "spectrum-actionbar-shadow-blur": {
+ "value": "8px",
+ "description": "Defined in `.spectrum-ActionBar`.
Used by `.spectrum-ActionBar .spectrum-ActionBar-popover`.
Defaults to `var(--spectrum-drop-shadow-elevated-blur)`, if not set.",
+ "control": "text",
+ "category": "Component"
+ },
+ "spectrum-actionbar-shadow-color": {
+ "value": "var(--spectrum-drop-shadow-color-200)",
+ "description": "Defined in `.spectrum-ActionBar`.
Used by `.spectrum-ActionBar .spectrum-ActionBar-popover`.
Defaults to `var(--spectrum-drop-shadow-elevated-color)`, if not set.",
+ "control": "color",
+ "category": "Component"
+ },
+ "spectrum-actionbar-item-counter-line-height-cjk": {
+ "value": "1.5",
+ "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)`.
Defaults to `var(--spectrum-cjk-line-height-100)`, if not set.",
+ "control": "text",
+ "category": "Component"
+ },
+ "spectrum-action-bar-counter-font-size": {
+ "value": "var(--spectrum-font-size-100)",
+ "description": "Used by `--mod-fieldlabel-font-size`.",
+ "control": "text",
+ "category": "Component"
+ }
+ },
+ "global": {
+ "spectrum-corner-radius-medium-size-extra-large": {
+ "value": "10px",
+ "description": "Used by `--spectrum-actionbar-corner-radius`.",
+ "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`, `--spectrum-actionbar-popover-background-color`.",
+ "control": "color",
+ "category": "Global"
+ },
+ "spectrum-background-elevated-color": {
+ "value": "var(--spectrum-gray-25)",
+ "description": "Used by `--spectrum-actionbar-popover-background-color`.",
+ "control": "color",
+ "category": "Global"
+ },
+ "spectrum-spacing-300": {
+ "value": "16px",
+ "description": "Used by `--spectrum-actionbar-spacing-outer-edge`.",
+ "control": "text",
+ "category": "Global"
+ },
+ "spectrum-drop-shadow-elevated-x": {
+ "value": "0px",
+ "description": "Used by `--spectrum-actionbar-shadow-horizontal`.",
+ "control": "text",
+ "category": "Global"
+ },
+ "spectrum-drop-shadow-elevated-y": {
+ "value": "2px",
+ "description": "Used by `--spectrum-actionbar-shadow-vertical`.",
+ "control": "text",
+ "category": "Global"
+ },
+ "spectrum-drop-shadow-elevated-blur": {
+ "value": "8px",
+ "description": "Used by `--spectrum-actionbar-shadow-blur`.",
+ "control": "text",
+ "category": "Global"
+ },
+ "spectrum-drop-shadow-elevated-color": {
+ "value": "var(--spectrum-drop-shadow-color-200)",
+ "description": "Used by `--spectrum-actionbar-shadow-color`.",
+ "control": "color",
+ "category": "Global"
+ },
+ "spectrum-gray-25": {
+ "value": "light-dark(rgb(255, 255, 255), rgb(17, 17, 17))",
+ "description": "Used by `--spectrum-actionbar-item-counter-color`.",
+ "control": "text",
+ "category": "Global"
+ },
+ "spectrum-cjk-line-height-100": {
+ "value": "1.5",
+ "description": "Used by `--spectrum-actionbar-item-counter-line-height-cjk`.",
+ "control": "text",
+ "category": "Global"
+ }
+ },
+ "passthroughs": {
+ "mod-fieldlabel-font-size": {
+ "category": "Passthrough"
+ },
+ "mod-fieldlabel-line-height": {
+ "category": "Passthrough"
+ }
+ },
+ "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`.
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 c19710c0051..ae1001469d9 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.
*
@@ -75,8 +77,12 @@ export default {
status: {
type: "migrated",
},
- tags: ["migrated"],
+ cssprops: {
+ ...metadata.modifiers,
+ ...metadata.component,
+ },
},
+ tags: ["migrated"],
};
export const Default = ActionBarGroup.bind({});
diff --git a/components/actionbar/stories/template.js b/components/actionbar/stories/template.js
index 44b7d8265e3..721d12e59dc 100644
--- a/components/actionbar/stories/template.js
+++ b/components/actionbar/stories/template.js
@@ -2,15 +2,17 @@ import { Template as ActionGroup } from "@spectrum-css/actiongroup/stories/templ
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 } from "@spectrum-css/preview/decorators";
+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";
export const Template = ({
rootClass = "spectrum-ActionBar",
+ id = getRandomId("action-bar"),
isOpen = true,
isEmphasized = false,
isSticky = false,
@@ -31,6 +33,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 f8685ad4f90..5d49d2ca3a8 100644
--- a/components/actionbutton/dist/metadata.json
+++ b/components/actionbutton/dist/metadata.json
@@ -13,18 +13,6 @@
".spectrum-ActionButton-icon",
".spectrum-ActionButton-label",
".spectrum-ActionButton-label:empty",
- ".spectrum-ActionButton.is-disabled",
- ".spectrum-ActionButton.is-selected",
- ".spectrum-ActionButton.is-selected.spectrum-ActionButton--emphasized",
- ".spectrum-ActionButton.is-selected.spectrum-ActionButton--staticBlack",
- ".spectrum-ActionButton.is-selected.spectrum-ActionButton--staticWhite",
- ".spectrum-ActionButton.spectrum-ActionButton--quiet",
- ".spectrum-ActionButton.spectrum-ActionButton--quiet.is-selected",
- ".spectrum-ActionButton.spectrum-ActionButton--quiet:disabled:not(.is-selected)",
- ".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",
".spectrum-ActionButton::-moz-focus-inner",
".spectrum-ActionButton:active",
".spectrum-ActionButton:after",
@@ -36,197 +24,1049 @@
".spectrum-ActionButton:has(.spectrum-ActionButton-icon)",
".spectrum-ActionButton:hover",
".spectrum-ActionButton:not(:has(.spectrum-ActionButton-label))",
+ ".spectrum-ActionButton.is-disabled",
+ ".spectrum-ActionButton.is-selected",
+ ".spectrum-ActionButton.is-selected.spectrum-ActionButton--emphasized",
+ ".spectrum-ActionButton.is-selected.spectrum-ActionButton--staticBlack",
+ ".spectrum-ActionButton.is-selected.spectrum-ActionButton--staticWhite",
+ ".spectrum-ActionButton.spectrum-ActionButton--quiet",
+ ".spectrum-ActionButton.spectrum-ActionButton--quiet:disabled:not(.is-selected)",
+ ".spectrum-ActionButton.spectrum-ActionButton--quiet.is-selected",
+ ".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",
"a.spectrum-ActionButton"
],
- "modifiers": [
- "--mod-actionbutton-animation-duration",
- "--mod-actionbutton-background-color-default",
- "--mod-actionbutton-background-color-default-selected",
- "--mod-actionbutton-background-color-default-selected-emphasized",
- "--mod-actionbutton-background-color-disabled",
- "--mod-actionbutton-background-color-down",
- "--mod-actionbutton-background-color-down-selected",
- "--mod-actionbutton-background-color-down-selected-emphasized",
- "--mod-actionbutton-background-color-focus",
- "--mod-actionbutton-background-color-focus-selected",
- "--mod-actionbutton-background-color-focus-selected-emphasized",
- "--mod-actionbutton-background-color-hover",
- "--mod-actionbutton-background-color-hover-selected",
- "--mod-actionbutton-background-color-hover-selected-emphasized",
- "--mod-actionbutton-border-radius",
- "--mod-actionbutton-content-color-default",
- "--mod-actionbutton-content-color-default-selected",
- "--mod-actionbutton-content-color-default-selected-emphasized",
- "--mod-actionbutton-content-color-disabled",
- "--mod-actionbutton-content-color-down",
- "--mod-actionbutton-content-color-down-selected",
- "--mod-actionbutton-content-color-down-selected-emphasized",
- "--mod-actionbutton-content-color-focus",
- "--mod-actionbutton-content-color-focus-selected",
- "--mod-actionbutton-content-color-focus-selected-emphasized",
- "--mod-actionbutton-content-color-hover",
- "--mod-actionbutton-content-color-hover-selected",
- "--mod-actionbutton-content-color-hover-selected-emphasized",
- "--mod-actionbutton-edge-to-hold-icon",
- "--mod-actionbutton-edge-to-text",
- "--mod-actionbutton-edge-to-visual",
- "--mod-actionbutton-edge-to-visual-only",
- "--mod-actionbutton-focus-indicator-border-radius",
- "--mod-actionbutton-focus-indicator-color",
- "--mod-actionbutton-focus-indicator-gap",
- "--mod-actionbutton-focus-indicator-thickness",
- "--mod-actionbutton-font-size",
- "--mod-actionbutton-font-style",
- "--mod-actionbutton-font-weight",
- "--mod-actionbutton-height",
- "--mod-actionbutton-icon-size",
- "--mod-actionbutton-label-color",
- "--mod-actionbutton-line-height",
- "--mod-actionbutton-min-width",
- "--mod-actionbutton-text-to-visual"
- ],
- "component": [
- "--spectrum-action-button-edge-to-hold-icon-extra-large",
- "--spectrum-action-button-edge-to-hold-icon-extra-small",
- "--spectrum-action-button-edge-to-hold-icon-large",
- "--spectrum-action-button-edge-to-hold-icon-medium",
- "--spectrum-action-button-edge-to-hold-icon-small",
- "--spectrum-actionbutton-animation-duration",
- "--spectrum-actionbutton-background-color-default",
- "--spectrum-actionbutton-background-color-disabled",
- "--spectrum-actionbutton-background-color-down",
- "--spectrum-actionbutton-background-color-focus",
- "--spectrum-actionbutton-background-color-hover",
- "--spectrum-actionbutton-border-color",
- "--spectrum-actionbutton-border-radius",
- "--spectrum-actionbutton-border-width",
- "--spectrum-actionbutton-content-color-default",
- "--spectrum-actionbutton-content-color-disabled",
- "--spectrum-actionbutton-content-color-down",
- "--spectrum-actionbutton-content-color-focus",
- "--spectrum-actionbutton-content-color-hover",
- "--spectrum-actionbutton-downstate-perspective",
- "--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-border-radius",
- "--spectrum-actionbutton-focus-indicator-color",
- "--spectrum-actionbutton-focus-indicator-gap",
- "--spectrum-actionbutton-focus-indicator-thickness",
- "--spectrum-actionbutton-font-size",
- "--spectrum-actionbutton-font-style",
- "--spectrum-actionbutton-font-weight",
- "--spectrum-actionbutton-height",
- "--spectrum-actionbutton-icon-size",
- "--spectrum-actionbutton-line-height",
- "--spectrum-actionbutton-min-width",
- "--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-component-size-difference-down",
- "--spectrum-component-size-minimum-perspective-down",
- "--spectrum-component-size-width-ratio-down",
- "--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-default-font-style",
- "--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-downstate-height",
- "--spectrum-downstate-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-50",
- "--spectrum-font-size-75",
- "--spectrum-gray-100",
- "--spectrum-gray-200",
- "--spectrum-gray-25",
- "--spectrum-line-height-100",
- "--spectrum-logical-rotation",
- "--spectrum-medium-font-weight",
- "--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-25",
- "--spectrum-transparent-black-800",
- "--spectrum-transparent-black-900",
- "--spectrum-transparent-white-100",
- "--spectrum-transparent-white-200",
- "--spectrum-transparent-white-25",
- "--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"
- ],
- "passthroughs": [
- "--mod-button-animation-duration",
- "--mod-button-font-family",
- "--mod-button-line-height"
- ],
- "high-contrast": [
- "--highcontrast-actionbutton-animation-duration",
- "--highcontrast-actionbutton-background-color-default",
- "--highcontrast-actionbutton-background-color-disabled",
- "--highcontrast-actionbutton-border-color",
- "--highcontrast-actionbutton-content-color-default",
- "--highcontrast-actionbutton-content-color-disabled",
- "--highcontrast-actionbutton-focus-indicator-color"
- ]
+ "modifiers": {
+ "mod-actionbutton-background-color-default": {
+ "description": "Defined in `.spectrum-ActionButton.is-selected`, `.spectrum-ActionButton.is-selected.spectrum-ActionButton--emphasized`.
Used by `.spectrum-ActionButton`.
Defaults to `var(--spectrum-actionbutton-background-color-default)`, if not set.",
+ "control": "color",
+ "category": "Modifier"
+ },
+ "mod-actionbutton-background-color-default-selected": {
+ "description": "Used by `--mod-actionbutton-background-color-default`.
Defaults to `var(--spectrum-neutral-background-color-selected-default)`, if not set.",
+ "control": "color",
+ "category": "Modifier"
+ },
+ "mod-actionbutton-background-color-hover": {
+ "description": "Defined in `.spectrum-ActionButton.is-selected`, `.spectrum-ActionButton.is-selected.spectrum-ActionButton--emphasized`.
Used by `.spectrum-ActionButton:hover`.
Defaults to `var(--spectrum-actionbutton-background-color-hover)`, if not set.",
+ "control": "color",
+ "category": "Modifier"
+ },
+ "mod-actionbutton-background-color-hover-selected": {
+ "description": "Used by `--mod-actionbutton-background-color-hover`.
Defaults to `var(--spectrum-neutral-background-color-selected-hover)`, if not set.",
+ "control": "color",
+ "category": "Modifier"
+ },
+ "mod-actionbutton-background-color-down": {
+ "description": "Defined in `.spectrum-ActionButton.is-selected`, `.spectrum-ActionButton.is-selected.spectrum-ActionButton--emphasized`.
Used by `.spectrum-ActionButton:active`.
Defaults to `var(--spectrum-actionbutton-background-color-down)`, if not set.",
+ "control": "color",
+ "category": "Modifier"
+ },
+ "mod-actionbutton-background-color-down-selected": {
+ "description": "Used by `--mod-actionbutton-background-color-down`.
Defaults to `var(--spectrum-neutral-background-color-selected-down)`, if not set.",
+ "control": "color",
+ "category": "Modifier"
+ },
+ "mod-actionbutton-background-color-focus": {
+ "description": "Defined in `.spectrum-ActionButton.is-selected`, `.spectrum-ActionButton.is-selected.spectrum-ActionButton--emphasized`.
Used by `.spectrum-ActionButton:focus-visible`.
Defaults to `var(--spectrum-actionbutton-background-color-focus)`, if not set.",
+ "control": "color",
+ "category": "Modifier"
+ },
+ "mod-actionbutton-background-color-focus-selected": {
+ "description": "Used by `--mod-actionbutton-background-color-focus`.
Defaults to `var(--spectrum-neutral-background-color-selected-key-focus)`, if not set.",
+ "control": "color",
+ "category": "Modifier"
+ },
+ "mod-actionbutton-content-color-default": {
+ "description": "Defined in `.spectrum-ActionButton.is-selected`, `.spectrum-ActionButton.is-selected.spectrum-ActionButton--emphasized`.
Used by `.spectrum-ActionButton`.
Defaults to `var(--spectrum-actionbutton-content-color-default)`, if not set.",
+ "control": "color",
+ "category": "Modifier"
+ },
+ "mod-actionbutton-content-color-default-selected": {
+ "description": "Used by `--mod-actionbutton-content-color-default`.
Defaults to `var(--spectrum-gray-25)`, if not set.",
+ "control": "color",
+ "category": "Modifier"
+ },
+ "mod-actionbutton-content-color-hover": {
+ "description": "Defined in `.spectrum-ActionButton.is-selected`, `.spectrum-ActionButton.is-selected.spectrum-ActionButton--emphasized`.
Used by `.spectrum-ActionButton:hover`.
Defaults to `var(--spectrum-actionbutton-content-color-hover)`, if not set.",
+ "control": "color",
+ "category": "Modifier"
+ },
+ "mod-actionbutton-content-color-hover-selected": {
+ "description": "Used by `--mod-actionbutton-content-color-hover`.
Defaults to `var(--spectrum-gray-25)`, if not set.",
+ "control": "color",
+ "category": "Modifier"
+ },
+ "mod-actionbutton-content-color-down": {
+ "description": "Defined in `.spectrum-ActionButton.is-selected`, `.spectrum-ActionButton.is-selected.spectrum-ActionButton--emphasized`.
Used by `.spectrum-ActionButton:active`.
Defaults to `var(--spectrum-actionbutton-content-color-down)`, if not set.",
+ "control": "color",
+ "category": "Modifier"
+ },
+ "mod-actionbutton-content-color-down-selected": {
+ "description": "Used by `--mod-actionbutton-content-color-down`.
Defaults to `var(--spectrum-gray-25)`, if not set.",
+ "control": "color",
+ "category": "Modifier"
+ },
+ "mod-actionbutton-content-color-focus": {
+ "description": "Defined in `.spectrum-ActionButton.is-selected`, `.spectrum-ActionButton.is-selected.spectrum-ActionButton--emphasized`.
Used by `.spectrum-ActionButton:focus-visible`.
Defaults to `var(--spectrum-actionbutton-content-color-focus)`, if not set.",
+ "control": "color",
+ "category": "Modifier"
+ },
+ "mod-actionbutton-content-color-focus-selected": {
+ "description": "Used by `--mod-actionbutton-content-color-focus`.
Defaults to `var(--spectrum-gray-25)`, if not set.",
+ "control": "color",
+ "category": "Modifier"
+ },
+ "mod-actionbutton-background-color-default-selected-emphasized": {
+ "description": "Used by `--mod-actionbutton-background-color-default`.
Defaults to `var(--spectrum-accent-background-color-default)`, if not set.",
+ "control": "color",
+ "category": "Modifier"
+ },
+ "mod-actionbutton-background-color-hover-selected-emphasized": {
+ "description": "Used by `--mod-actionbutton-background-color-hover`.
Defaults to `var(--spectrum-accent-background-color-hover)`, if not set.",
+ "control": "color",
+ "category": "Modifier"
+ },
+ "mod-actionbutton-background-color-down-selected-emphasized": {
+ "description": "Used by `--mod-actionbutton-background-color-down`.
Defaults to `var(--spectrum-accent-background-color-down)`, if not set.",
+ "control": "color",
+ "category": "Modifier"
+ },
+ "mod-actionbutton-background-color-focus-selected-emphasized": {
+ "description": "Used by `--mod-actionbutton-background-color-focus`.
Defaults to `var(--spectrum-accent-background-color-key-focus)`, if not set.",
+ "control": "color",
+ "category": "Modifier"
+ },
+ "mod-actionbutton-content-color-default-selected-emphasized": {
+ "description": "Used by `--mod-actionbutton-content-color-default`.
Defaults to `var(--spectrum-white)`, if not set.",
+ "control": "color",
+ "category": "Modifier"
+ },
+ "mod-actionbutton-content-color-hover-selected-emphasized": {
+ "description": "Used by `--mod-actionbutton-content-color-hover`.
Defaults to `var(--spectrum-white)`, if not set.",
+ "control": "color",
+ "category": "Modifier"
+ },
+ "mod-actionbutton-content-color-down-selected-emphasized": {
+ "description": "Used by `--mod-actionbutton-content-color-down`.
Defaults to `var(--spectrum-white)`, if not set.",
+ "control": "color",
+ "category": "Modifier"
+ },
+ "mod-actionbutton-content-color-focus-selected-emphasized": {
+ "description": "Used by `--mod-actionbutton-content-color-focus`.
Defaults to `var(--spectrum-white)`, if not set.",
+ "control": "color",
+ "category": "Modifier"
+ },
+ "mod-actionbutton-min-width": {
+ "description": "Used by `.spectrum-ActionButton`.
Defaults to `var(--spectrum-actionbutton-min-width)`, if not set.",
+ "control": "text",
+ "category": "Modifier"
+ },
+ "mod-actionbutton-height": {
+ "description": "Used by `.spectrum-ActionButton`.
Defaults to `var(--spectrum-actionbutton-height)`, if not set.",
+ "control": "text",
+ "category": "Modifier"
+ },
+ "mod-actionbutton-line-height": {
+ "description": "Used by `.spectrum-ActionButton`.
Defaults to `var(--spectrum-actionbutton-line-height)`, if not set.",
+ "control": "text",
+ "category": "Modifier"
+ },
+ "mod-actionbutton-border-radius": {
+ "description": "Used by `.spectrum-ActionButton`.
Defaults to `var(--spectrum-actionbutton-border-radius)`, if not set.",
+ "control": "text",
+ "category": "Modifier"
+ },
+ "mod-actionbutton-text-to-visual": {
+ "description": "Used by `.spectrum-ActionButton`.
Defaults to `var(--spectrum-actionbutton-text-to-visual)`, if not set.",
+ "control": "text",
+ "category": "Modifier"
+ },
+ "mod-actionbutton-edge-to-text": {
+ "description": "Used by `.spectrum-ActionButton`.
Defaults to `var(--spectrum-actionbutton-edge-to-text)`, if not set.",
+ "control": "text",
+ "category": "Modifier"
+ },
+ "mod-actionbutton-background-color-disabled": {
+ "description": "Used by `.spectrum-ActionButton.is-disabled, .spectrum-ActionButton:disabled`.
Defaults to `var(--spectrum-actionbutton-background-color-disabled)`, if not set.",
+ "control": "color",
+ "category": "Modifier"
+ },
+ "mod-actionbutton-content-color-disabled": {
+ "description": "Used by `.spectrum-ActionButton.is-disabled, .spectrum-ActionButton:disabled`.
Defaults to `var(--spectrum-actionbutton-content-color-disabled)`, if not set.",
+ "control": "color",
+ "category": "Modifier"
+ },
+ "mod-actionbutton-icon-size": {
+ "description": "Used by `.spectrum-ActionButton-icon`.
Defaults to `var(--spectrum-actionbutton-icon-size)`, if not set.",
+ "control": "text",
+ "category": "Modifier"
+ },
+ "mod-actionbutton-edge-to-visual": {
+ "description": "Used by `.spectrum-ActionButton:has(.spectrum-ActionButton-icon)`.
Defaults to `var(--spectrum-actionbutton-edge-to-visual)`, if not set.",
+ "control": "text",
+ "category": "Modifier"
+ },
+ "mod-actionbutton-edge-to-visual-only": {
+ "description": "Used by `.spectrum-ActionButton:not(:has(.spectrum-ActionButton-label))`.
Defaults to `var(--spectrum-actionbutton-edge-to-visual-only)`, if not set.",
+ "control": "text",
+ "category": "Modifier"
+ },
+ "mod-actionbutton-font-size": {
+ "description": "Used by `.spectrum-ActionButton-label`.
Defaults to `var(--spectrum-actionbutton-font-size)`, if not set.",
+ "control": "text",
+ "category": "Modifier"
+ },
+ "mod-actionbutton-font-weight": {
+ "description": "Used by `.spectrum-ActionButton-label`.
Defaults to `var(--spectrum-actionbutton-font-weight)`, if not set.",
+ "control": "text",
+ "category": "Modifier"
+ },
+ "mod-actionbutton-font-style": {
+ "description": "Used by `.spectrum-ActionButton-label`.
Defaults to `var(--spectrum-actionbutton-font-style)`, if not set.",
+ "control": "text",
+ "category": "Modifier"
+ },
+ "mod-actionbutton-label-color": {
+ "description": "Used by `.spectrum-ActionButton-label`.",
+ "control": "color",
+ "category": "Modifier"
+ },
+ "mod-actionbutton-edge-to-hold-icon": {
+ "description": "Used by `.spectrum-ActionButton-hold`.
Defaults to `var(--spectrum-actionbutton-edge-to-hold-icon)`, if not set.",
+ "control": "text",
+ "category": "Modifier"
+ },
+ "mod-actionbutton-animation-duration": {
+ "description": "Used by `.spectrum-ActionButton`, `.spectrum-ActionButton:after`.
Defaults to `var(--spectrum-actionbutton-animation-duration)`, if not set.",
+ "control": "text",
+ "category": "Modifier"
+ },
+ "mod-actionbutton-focus-indicator-gap": {
+ "description": "Used by `.spectrum-ActionButton:after`.
Defaults to `var(--spectrum-actionbutton-focus-indicator-gap)`, if not set.",
+ "control": "text",
+ "category": "Modifier"
+ },
+ "mod-actionbutton-focus-indicator-border-radius": {
+ "description": "Used by `.spectrum-ActionButton:after`.
Defaults to `var(--spectrum-actionbutton-focus-indicator-border-radius)`, if not set.",
+ "control": "text",
+ "category": "Modifier"
+ },
+ "mod-actionbutton-focus-indicator-thickness": {
+ "description": "Used by `.spectrum-ActionButton:focus-visible:after`.
Defaults to `var(--spectrum-actionbutton-focus-indicator-thickness)`, if not set.",
+ "control": "text",
+ "category": "Modifier"
+ },
+ "mod-actionbutton-focus-indicator-color": {
+ "description": "Used by `.spectrum-ActionButton:focus-visible:after`.
Defaults to `var(--spectrum-actionbutton-focus-indicator-color)`, if not set.",
+ "control": "color",
+ "category": "Modifier"
+ }
+ },
+ "component": {
+ "spectrum-actionbutton-animation-duration": {
+ "value": "var(--spectrum-animation-duration-100)",
+ "description": "Defined in `.spectrum-ActionButton`.
Used by `.spectrum-ActionButton`, `.spectrum-ActionButton:after`.
Defaults to `var(--spectrum-animation-duration-100)`, if not set.",
+ "control": "text",
+ "category": "Component"
+ },
+ "spectrum-actionbutton-border-radius": {
+ "value": "10px",
+ "description": "Defined in `.spectrum-ActionButton`, `.spectrum-ActionButton--sizeXS`, `.spectrum-ActionButton--sizeS`, `.spectrum-ActionButton--sizeL`, `.spectrum-ActionButton--sizeXL`.
Used by `--spectrum-actionbutton-focus-indicator-border-radius`, `.spectrum-ActionButton`.
Defaults to `var(--spectrum-corner-radius-medium-size-extra-large)`, if not set.",
+ "control": "text",
+ "category": "Component"
+ },
+ "spectrum-actionbutton-border-width": {
+ "value": "1px",
+ "description": "Defined in `.spectrum-ActionButton`.
Used by `.spectrum-ActionButton`, `.spectrum-ActionButton:has(.spectrum-ActionButton-icon)`, `.spectrum-ActionButton:not(:has(.spectrum-ActionButton-label))`, `.spectrum-ActionButton-hold`, `.spectrum-ActionButton:after`.
Defaults to `var(--spectrum-border-width-100)`, if not set.",
+ "control": "text",
+ "category": "Component"
+ },
+ "spectrum-actionbutton-border-color": {
+ "value": "transparent",
+ "description": "Defined in `.spectrum-ActionButton`.
Used by `.spectrum-ActionButton`.
Defaults to `transparent`, if not set.",
+ "control": "color",
+ "category": "Component"
+ },
+ "spectrum-actionbutton-content-color-default": {
+ "value": "rgb(255, 255, 255)",
+ "description": "Defined in `.spectrum-ActionButton`, `.spectrum-ActionButton.spectrum-ActionButton--staticBlack`, `.spectrum-ActionButton.spectrum-ActionButton--staticWhite`, `.spectrum-ActionButton.is-selected.spectrum-ActionButton--staticWhite`, `.spectrum-ActionButton.is-selected.spectrum-ActionButton--staticBlack`.
Used by `.spectrum-ActionButton`.
Defaults to `var(--spectrum-white)`, if not set.",
+ "control": "color",
+ "category": "Component"
+ },
+ "spectrum-actionbutton-content-color-hover": {
+ "value": "rgb(255, 255, 255)",
+ "description": "Defined in `.spectrum-ActionButton`, `.spectrum-ActionButton.spectrum-ActionButton--staticBlack`, `.spectrum-ActionButton.spectrum-ActionButton--staticWhite`, `.spectrum-ActionButton.is-selected.spectrum-ActionButton--staticWhite`, `.spectrum-ActionButton.is-selected.spectrum-ActionButton--staticBlack`.
Used by `.spectrum-ActionButton:hover`.
Defaults to `var(--spectrum-white)`, if not set.",
+ "control": "color",
+ "category": "Component"
+ },
+ "spectrum-actionbutton-content-color-down": {
+ "value": "rgb(255, 255, 255)",
+ "description": "Defined in `.spectrum-ActionButton`, `.spectrum-ActionButton.spectrum-ActionButton--staticBlack`, `.spectrum-ActionButton.spectrum-ActionButton--staticWhite`, `.spectrum-ActionButton.is-selected.spectrum-ActionButton--staticWhite`, `.spectrum-ActionButton.is-selected.spectrum-ActionButton--staticBlack`.
Used by `.spectrum-ActionButton:active`.
Defaults to `var(--spectrum-white)`, if not set.",
+ "control": "color",
+ "category": "Component"
+ },
+ "spectrum-actionbutton-content-color-focus": {
+ "value": "rgb(255, 255, 255)",
+ "description": "Defined in `.spectrum-ActionButton`, `.spectrum-ActionButton.spectrum-ActionButton--staticBlack`, `.spectrum-ActionButton.spectrum-ActionButton--staticWhite`, `.spectrum-ActionButton.is-selected.spectrum-ActionButton--staticWhite`, `.spectrum-ActionButton.is-selected.spectrum-ActionButton--staticBlack`.
Used by `.spectrum-ActionButton:focus-visible`.
Defaults to `var(--spectrum-white)`, if not set.",
+ "control": "color",
+ "category": "Component"
+ },
+ "spectrum-actionbutton-content-color-disabled": {
+ "value": "rgba(255, 255, 255, 0.21)",
+ "description": "Defined in `.spectrum-ActionButton`, `.spectrum-ActionButton.spectrum-ActionButton--staticBlack`, `.spectrum-ActionButton.spectrum-ActionButton--staticWhite`.
Used by `.spectrum-ActionButton.is-disabled, .spectrum-ActionButton:disabled`.
Defaults to `var(--spectrum-disabled-static-white-content-color)`, if not set.",
+ "control": "color",
+ "category": "Component"
+ },
+ "spectrum-actionbutton-background-color-default": {
+ "value": "rgba(0, 0, 0, 0.84)",
+ "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`, `.spectrum-ActionButton.is-selected.spectrum-ActionButton--staticWhite`, `.spectrum-ActionButton.is-selected.spectrum-ActionButton--staticBlack`.
Used by `.spectrum-ActionButton`.
Defaults to `var(--spectrum-transparent-black-800)`, if not set.",
+ "control": "color",
+ "category": "Component"
+ },
+ "spectrum-actionbutton-background-color-hover": {
+ "value": "rgba(0, 0, 0, 0.93)",
+ "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`, `.spectrum-ActionButton.is-selected.spectrum-ActionButton--staticWhite`, `.spectrum-ActionButton.is-selected.spectrum-ActionButton--staticBlack`.
Used by `.spectrum-ActionButton:hover`.
Defaults to `var(--spectrum-transparent-black-900)`, if not set.",
+ "control": "color",
+ "category": "Component"
+ },
+ "spectrum-actionbutton-background-color-down": {
+ "value": "rgba(0, 0, 0, 0.93)",
+ "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`, `.spectrum-ActionButton.is-selected.spectrum-ActionButton--staticWhite`, `.spectrum-ActionButton.is-selected.spectrum-ActionButton--staticBlack`.
Used by `.spectrum-ActionButton:active`.
Defaults to `var(--spectrum-transparent-black-900)`, if not set.",
+ "control": "color",
+ "category": "Component"
+ },
+ "spectrum-actionbutton-background-color-focus": {
+ "value": "rgba(0, 0, 0, 0.93)",
+ "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`, `.spectrum-ActionButton.is-selected.spectrum-ActionButton--staticWhite`, `.spectrum-ActionButton.is-selected.spectrum-ActionButton--staticBlack`.
Used by `.spectrum-ActionButton:focus-visible`.
Defaults to `var(--spectrum-transparent-black-900)`, if not set.",
+ "control": "color",
+ "category": "Component"
+ },
+ "spectrum-actionbutton-background-color-disabled": {
+ "value": "rgba(0, 0, 0, 0.09)",
+ "description": "Defined in `.spectrum-ActionButton`, `.spectrum-ActionButton.spectrum-ActionButton--quiet`, `.spectrum-ActionButton.spectrum-ActionButton--quiet.is-selected`, `.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`, `.spectrum-ActionButton.is-selected.spectrum-ActionButton--staticWhite`, `.spectrum-ActionButton.is-selected.spectrum-ActionButton--staticBlack`.
Used by `.spectrum-ActionButton.is-disabled, .spectrum-ActionButton:disabled`.
Defaults to `var(--spectrum-disabled-static-black-background-color)`, if not set.",
+ "control": "color",
+ "category": "Component"
+ },
+ "spectrum-actionbutton-focus-indicator-gap": {
+ "value": "2px",
+ "description": "Defined in `.spectrum-ActionButton`.
Used by `--spectrum-actionbutton-focus-indicator-border-radius`, `.spectrum-ActionButton:after`.
Defaults to `var(--spectrum-focus-indicator-gap)`, if not set.",
+ "control": "text",
+ "category": "Component"
+ },
+ "spectrum-actionbutton-focus-indicator-thickness": {
+ "value": "2px",
+ "description": "Defined in `.spectrum-ActionButton`.
Used by `.spectrum-ActionButton:focus-visible:after`.
Defaults to `var(--spectrum-focus-indicator-thickness)`, if not set.",
+ "control": "text",
+ "category": "Component"
+ },
+ "spectrum-actionbutton-focus-indicator-color": {
+ "value": "rgb(255, 255, 255)",
+ "description": "Defined in `.spectrum-ActionButton`, `.spectrum-ActionButton.spectrum-ActionButton--staticBlack`, `.spectrum-ActionButton.spectrum-ActionButton--staticWhite`.
Used by `.spectrum-ActionButton:focus-visible:after`.
Defaults to `var(--spectrum-static-white-focus-indicator-color)`, if not set.",
+ "control": "color",
+ "category": "Component"
+ },
+ "spectrum-actionbutton-focus-indicator-border-radius": {
+ "value": "calc(var(--spectrum-actionbutton-border-radius) + var(--spectrum-actionbutton-focus-indicator-gap))",
+ "description": "Defined in `.spectrum-ActionButton`.
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": "Component"
+ },
+ "spectrum-actionbutton-min-width": {
+ "value": "calc(var(--spectrum-component-edge-to-visual-only-300) * 2 + var(--spectrum-workflow-icon-size-300))",
+ "description": "Defined in `.spectrum-ActionButton`, `.spectrum-ActionButton--sizeXS`, `.spectrum-ActionButton--sizeS`, `.spectrum-ActionButton--sizeL`, `.spectrum-ActionButton--sizeXL`.
Used by `.spectrum-ActionButton`.
Defaults to `calc(var(--spectrum-component-edge-to-visual-only-300) * 2 + var(--spectrum-workflow-icon-size-300))`, if not set.",
+ "control": "text",
+ "category": "Component"
+ },
+ "spectrum-actionbutton-height": {
+ "value": "48px",
+ "description": "Defined in `.spectrum-ActionButton`, `.spectrum-ActionButton--sizeXS`, `.spectrum-ActionButton--sizeS`, `.spectrum-ActionButton--sizeL`, `.spectrum-ActionButton--sizeXL`.
Used by `--spectrum-actionbutton-line-height`, `.spectrum-ActionButton`.
Defaults to `var(--spectrum-component-height-300)`, if not set.",
+ "control": "text",
+ "category": "Component"
+ },
+ "spectrum-actionbutton-icon-size": {
+ "value": "26px",
+ "description": "Defined in `.spectrum-ActionButton`, `.spectrum-ActionButton--sizeXS`, `.spectrum-ActionButton--sizeS`, `.spectrum-ActionButton--sizeL`, `.spectrum-ActionButton--sizeXL`.
Used by `.spectrum-ActionButton-icon`.
Defaults to `var(--spectrum-workflow-icon-size-300)`, if not set.",
+ "control": "text",
+ "category": "Component"
+ },
+ "spectrum-actionbutton-font-size": {
+ "value": "18px",
+ "description": "Defined in `.spectrum-ActionButton`, `.spectrum-ActionButton--sizeXS`, `.spectrum-ActionButton--sizeS`, `.spectrum-ActionButton--sizeL`, `.spectrum-ActionButton--sizeXL`.
Used by `.spectrum-ActionButton-label`.
Defaults to `var(--spectrum-font-size-300)`, if not set.",
+ "control": "text",
+ "category": "Component"
+ },
+ "spectrum-actionbutton-font-weight": {
+ "value": "500",
+ "description": "Defined in `.spectrum-ActionButton`.
Used by `.spectrum-ActionButton-label`.
Defaults to `var(--spectrum-medium-font-weight)`, if not set.",
+ "control": "text",
+ "category": "Component"
+ },
+ "spectrum-actionbutton-font-style": {
+ "value": "normal",
+ "description": "Defined in `.spectrum-ActionButton`.
Used by `.spectrum-ActionButton-label`.
Defaults to `var(--spectrum-default-font-style)`, if not set.",
+ "control": "text",
+ "category": "Component"
+ },
+ "spectrum-actionbutton-line-height": {
+ "value": "var(--spectrum-actionbutton-height)",
+ "description": "Defined in `.spectrum-ActionButton`.
Used by `.spectrum-ActionButton`.
Defaults to `var(--spectrum-actionbutton-height)`, if not set.",
+ "control": "text",
+ "category": "Component"
+ },
+ "spectrum-actionbutton-text-to-visual": {
+ "value": "8px",
+ "description": "Defined in `.spectrum-ActionButton`, `.spectrum-ActionButton--sizeXS`, `.spectrum-ActionButton--sizeS`, `.spectrum-ActionButton--sizeL`, `.spectrum-ActionButton--sizeXL`.
Used by `.spectrum-ActionButton`.
Defaults to `var(--spectrum-text-to-visual-300)`, if not set.",
+ "control": "text",
+ "category": "Component"
+ },
+ "spectrum-actionbutton-edge-to-hold-icon": {
+ "value": "6px",
+ "description": "Defined in `.spectrum-ActionButton`, `.spectrum-ActionButton--sizeXS`, `.spectrum-ActionButton--sizeS`, `.spectrum-ActionButton--sizeL`, `.spectrum-ActionButton--sizeXL`.
Used by `.spectrum-ActionButton-hold`.
Defaults to `var(--spectrum-action-button-edge-to-hold-icon-extra-large)`, if not set.",
+ "control": "text",
+ "category": "Component"
+ },
+ "spectrum-action-button-edge-to-hold-icon-medium": {
+ "value": "4px",
+ "description": "Used by `--spectrum-actionbutton-edge-to-hold-icon`.",
+ "control": "text",
+ "category": "Component"
+ },
+ "spectrum-actionbutton-edge-to-visual": {
+ "value": "15px",
+ "description": "Defined in `.spectrum-ActionButton`, `.spectrum-ActionButton--sizeXS`, `.spectrum-ActionButton--sizeS`, `.spectrum-ActionButton--sizeL`, `.spectrum-ActionButton--sizeXL`.
Used by `.spectrum-ActionButton:has(.spectrum-ActionButton-icon)`.
Defaults to `var(--spectrum-component-edge-to-visual-300)`, if not set.",
+ "control": "text",
+ "category": "Component"
+ },
+ "spectrum-actionbutton-edge-to-text": {
+ "value": "18px",
+ "description": "Defined in `.spectrum-ActionButton`, `.spectrum-ActionButton--sizeXS`, `.spectrum-ActionButton--sizeS`, `.spectrum-ActionButton--sizeL`, `.spectrum-ActionButton--sizeXL`.
Used by `.spectrum-ActionButton`.
Defaults to `var(--spectrum-component-edge-to-text-300)`, if not set.",
+ "control": "text",
+ "category": "Component"
+ },
+ "spectrum-actionbutton-edge-to-visual-only": {
+ "value": "11px",
+ "description": "Defined in `.spectrum-ActionButton`, `.spectrum-ActionButton--sizeXS`, `.spectrum-ActionButton--sizeS`, `.spectrum-ActionButton--sizeL`, `.spectrum-ActionButton--sizeXL`.
Used by `.spectrum-ActionButton:not(:has(.spectrum-ActionButton-label))`.
Defaults to `var(--spectrum-component-edge-to-visual-only-300)`, if not set.",
+ "control": "text",
+ "category": "Component"
+ },
+ "spectrum-actionbutton-downstate-perspective": {
+ "value": "24px",
+ "description": "Defined in `.spectrum-ActionButton`, `.spectrum-ActionButton--sizeXS`, `.spectrum-ActionButton--sizeS`.
Used by `.spectrum-ActionButton:active`.
Defaults to `var(--spectrum-component-size-minimum-perspective-down)`, if not set.",
+ "control": "text",
+ "category": "Component"
+ },
+ "spectrum-action-button-edge-to-hold-icon-extra-small": {
+ "value": "3px",
+ "description": "Used by `--spectrum-actionbutton-edge-to-hold-icon`.",
+ "control": "text",
+ "category": "Component"
+ },
+ "spectrum-action-button-edge-to-hold-icon-small": {
+ "value": "3px",
+ "description": "Used by `--spectrum-actionbutton-edge-to-hold-icon`.",
+ "control": "text",
+ "category": "Component"
+ },
+ "spectrum-action-button-edge-to-hold-icon-large": {
+ "value": "5px",
+ "description": "Used by `--spectrum-actionbutton-edge-to-hold-icon`.",
+ "control": "text",
+ "category": "Component"
+ },
+ "spectrum-action-button-edge-to-hold-icon-extra-large": {
+ "value": "6px",
+ "description": "Used by `--spectrum-actionbutton-edge-to-hold-icon`.",
+ "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-animation-duration`.",
+ "control": "text",
+ "category": "Global"
+ },
+ "spectrum-corner-radius-medium-size-medium": {
+ "value": "8px",
+ "description": "Used by `--spectrum-actionbutton-border-radius`.",
+ "control": "text",
+ "category": "Global"
+ },
+ "spectrum-border-width-100": {
+ "value": "1px",
+ "description": "Used by `--spectrum-actionbutton-border-width`.",
+ "control": "text",
+ "category": "Global"
+ },
+ "spectrum-neutral-content-color-default": {
+ "value": "var(--spectrum-gray-800)",
+ "description": "Used by `--spectrum-actionbutton-content-color-default`.",
+ "control": "color",
+ "category": "Global"
+ },
+ "spectrum-neutral-content-color-hover": {
+ "value": "var(--spectrum-gray-900)",
+ "description": "Used by `--spectrum-actionbutton-content-color-hover`.",
+ "control": "color",
+ "category": "Global"
+ },
+ "spectrum-neutral-content-color-down": {
+ "value": "var(--spectrum-gray-900)",
+ "description": "Used by `--spectrum-actionbutton-content-color-down`.",
+ "control": "color",
+ "category": "Global"
+ },
+ "spectrum-neutral-content-color-key-focus": {
+ "value": "var(--spectrum-gray-900)",
+ "description": "Used by `--spectrum-actionbutton-content-color-focus`.",
+ "control": "color",
+ "category": "Global"
+ },
+ "spectrum-disabled-content-color": {
+ "value": "var(--spectrum-gray-400)",
+ "description": "Used by `--spectrum-actionbutton-content-color-disabled`.",
+ "control": "color",
+ "category": "Global"
+ },
+ "spectrum-gray-100": {
+ "value": "light-dark(rgb(233, 233, 233), rgb(44, 44, 44))",
+ "description": "Used by `--spectrum-actionbutton-background-color-default`.",
+ "control": "text",
+ "category": "Global"
+ },
+ "spectrum-gray-200": {
+ "value": "light-dark(rgb(225, 225, 225), rgb(50, 50, 50))",
+ "description": "Used by `--spectrum-actionbutton-background-color-hover`, `--spectrum-actionbutton-background-color-down`, `--spectrum-actionbutton-background-color-focus`.",
+ "control": "text",
+ "category": "Global"
+ },
+ "spectrum-disabled-background-color": {
+ "value": "var(--spectrum-gray-100)",
+ "description": "Used by `--spectrum-actionbutton-background-color-disabled`.",
+ "control": "color",
+ "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-component-edge-to-visual-only-100": {
+ "value": "6px",
+ "description": "Used by `--spectrum-actionbutton-min-width`, `--spectrum-actionbutton-edge-to-visual-only`.",
+ "control": "text",
+ "category": "Global"
+ },
+ "spectrum-workflow-icon-size-100": {
+ "value": "20px",
+ "description": "Used by `--spectrum-actionbutton-min-width`, `--spectrum-actionbutton-icon-size`.",
+ "control": "text",
+ "category": "Global"
+ },
+ "spectrum-component-height-100": {
+ "value": "32px",
+ "description": "Used by `--spectrum-actionbutton-height`.",
+ "control": "text",
+ "category": "Global"
+ },
+ "spectrum-font-size-100": {
+ "value": "14px",
+ "description": "Used by `--spectrum-actionbutton-font-size`.",
+ "control": "text",
+ "category": "Global"
+ },
+ "spectrum-medium-font-weight": {
+ "value": "500",
+ "description": "Used by `--spectrum-actionbutton-font-weight`.",
+ "control": "text",
+ "category": "Global"
+ },
+ "spectrum-default-font-style": {
+ "value": "normal",
+ "description": "Used by `--spectrum-actionbutton-font-style`.",
+ "control": "text",
+ "category": "Global"
+ },
+ "spectrum-text-to-visual-100": {
+ "value": "6px",
+ "description": "Used by `--spectrum-actionbutton-text-to-visual`.",
+ "control": "text",
+ "category": "Global"
+ },
+ "spectrum-component-edge-to-visual-100": {
+ "value": "10px",
+ "description": "Used by `--spectrum-actionbutton-edge-to-visual`.",
+ "control": "text",
+ "category": "Global"
+ },
+ "spectrum-component-edge-to-text-100": {
+ "value": "12px",
+ "description": "Used by `--spectrum-actionbutton-edge-to-text`.",
+ "control": "text",
+ "category": "Global"
+ },
+ "spectrum-downstate-height": {
+ "description": "Used by `--spectrum-actionbutton-downstate-perspective`.",
+ "control": "text",
+ "category": "Global"
+ },
+ "spectrum-downstate-width": {
+ "description": "Used by `--spectrum-actionbutton-downstate-perspective`.",
+ "control": "text",
+ "category": "Global"
+ },
+ "spectrum-component-size-width-ratio-down": {
+ "value": "0.3333",
+ "description": "Used by `--spectrum-actionbutton-downstate-perspective`.",
+ "control": "text",
+ "category": "Global"
+ },
+ "spectrum-logical-rotation": {
+ "value": "matrix(-1, 0, 0, 1, 0, 0)",
+ "description": "Defined in `.spectrum-ActionButton:dir(rtl)`.
Used by `.spectrum-ActionButton-hold`.
Defaults to `matrix(-1, 0, 0, 1, 0, 0)`, if not set.",
+ "control": "text",
+ "category": "Global"
+ },
+ "spectrum-transparent-black-100": {
+ "value": "rgba(0, 0, 0, 0.09)",
+ "description": "Used by `--spectrum-actionbutton-background-color-default`.",
+ "control": "text",
+ "category": "Global"
+ },
+ "spectrum-transparent-black-200": {
+ "value": "rgba(0, 0, 0, 0.12)",
+ "description": "Used by `--spectrum-actionbutton-background-color-hover`, `--spectrum-actionbutton-background-color-down`, `--spectrum-actionbutton-background-color-focus`.",
+ "control": "text",
+ "category": "Global"
+ },
+ "spectrum-disabled-static-black-background-color": {
+ "value": "rgba(0, 0, 0, 0.09)",
+ "description": "Used by `--spectrum-actionbutton-background-color-disabled`.",
+ "control": "color",
+ "category": "Global"
+ },
+ "spectrum-transparent-black-800": {
+ "value": "rgba(0, 0, 0, 0.84)",
+ "description": "Used by `--spectrum-actionbutton-content-color-default`, `--spectrum-actionbutton-background-color-default`.",
+ "control": "text",
+ "category": "Global"
+ },
+ "spectrum-transparent-black-900": {
+ "value": "rgba(0, 0, 0, 0.93)",
+ "description": "Used by `--spectrum-actionbutton-content-color-hover`, `--spectrum-actionbutton-content-color-down`, `--spectrum-actionbutton-content-color-focus`, `--spectrum-actionbutton-background-color-hover`, `--spectrum-actionbutton-background-color-down`, `--spectrum-actionbutton-background-color-focus`.",
+ "control": "text",
+ "category": "Global"
+ },
+ "spectrum-disabled-static-black-content-color": {
+ "value": "rgba(0, 0, 0, 0.22)",
+ "description": "Used by `--spectrum-actionbutton-content-color-disabled`.",
+ "control": "color",
+ "category": "Global"
+ },
+ "spectrum-static-black-focus-indicator-color": {
+ "value": "rgb(0, 0, 0)",
+ "description": "Used by `--spectrum-actionbutton-focus-indicator-color`.",
+ "control": "color",
+ "category": "Global"
+ },
+ "spectrum-transparent-black-25": {
+ "value": "rgba(0, 0, 0, 0)",
+ "description": "Used by `--spectrum-actionbutton-background-color-disabled`.",
+ "control": "text",
+ "category": "Global"
+ },
+ "spectrum-transparent-white-100": {
+ "value": "rgba(255, 255, 255, 0.11)",
+ "description": "Used by `--spectrum-actionbutton-background-color-default`.",
+ "control": "text",
+ "category": "Global"
+ },
+ "spectrum-transparent-white-200": {
+ "value": "rgba(255, 255, 255, 0.14)",
+ "description": "Used by `--spectrum-actionbutton-background-color-hover`, `--spectrum-actionbutton-background-color-down`, `--spectrum-actionbutton-background-color-focus`.",
+ "control": "text",
+ "category": "Global"
+ },
+ "spectrum-disabled-static-white-background-color": {
+ "value": "rgba(255, 255, 255, 0.11)",
+ "description": "Used by `--spectrum-actionbutton-background-color-disabled`.",
+ "control": "color",
+ "category": "Global"
+ },
+ "spectrum-transparent-white-800": {
+ "value": "rgba(255, 255, 255, 0.85)",
+ "description": "Used by `--spectrum-actionbutton-content-color-default`, `--spectrum-actionbutton-background-color-default`.",
+ "control": "text",
+ "category": "Global"
+ },
+ "spectrum-transparent-white-900": {
+ "value": "rgba(255, 255, 255, 0.94)",
+ "description": "Used by `--spectrum-actionbutton-content-color-hover`, `--spectrum-actionbutton-content-color-down`, `--spectrum-actionbutton-content-color-focus`, `--spectrum-actionbutton-background-color-hover`, `--spectrum-actionbutton-background-color-down`, `--spectrum-actionbutton-background-color-focus`.",
+ "control": "text",
+ "category": "Global"
+ },
+ "spectrum-disabled-static-white-content-color": {
+ "value": "rgba(255, 255, 255, 0.21)",
+ "description": "Used by `--spectrum-actionbutton-content-color-disabled`.",
+ "control": "color",
+ "category": "Global"
+ },
+ "spectrum-static-white-focus-indicator-color": {
+ "value": "rgb(255, 255, 255)",
+ "description": "Used by `--spectrum-actionbutton-focus-indicator-color`.",
+ "control": "color",
+ "category": "Global"
+ },
+ "spectrum-transparent-white-25": {
+ "value": "rgba(255, 255, 255, 0)",
+ "description": "Used by `--spectrum-actionbutton-background-color-disabled`.",
+ "control": "text",
+ "category": "Global"
+ },
+ "spectrum-neutral-background-color-selected-default": {
+ "value": "var(--spectrum-gray-800)",
+ "description": "Used by `--mod-actionbutton-background-color-default`.",
+ "control": "color",
+ "category": "Global"
+ },
+ "spectrum-neutral-background-color-selected-hover": {
+ "value": "var(--spectrum-gray-900)",
+ "description": "Used by `--mod-actionbutton-background-color-hover`.",
+ "control": "color",
+ "category": "Global"
+ },
+ "spectrum-neutral-background-color-selected-down": {
+ "value": "var(--spectrum-gray-900)",
+ "description": "Used by `--mod-actionbutton-background-color-down`.",
+ "control": "color",
+ "category": "Global"
+ },
+ "spectrum-neutral-background-color-selected-key-focus": {
+ "value": "var(--spectrum-gray-900)",
+ "description": "Used by `--mod-actionbutton-background-color-focus`.",
+ "control": "color",
+ "category": "Global"
+ },
+ "spectrum-gray-25": {
+ "value": "light-dark(rgb(255, 255, 255), rgb(17, 17, 17))",
+ "description": "Used by `--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-accent-background-color-default": {
+ "value": "var(--spectrum-accent-color-900)",
+ "description": "Used by `--mod-actionbutton-background-color-default`.",
+ "control": "color",
+ "category": "Global"
+ },
+ "spectrum-accent-background-color-hover": {
+ "value": "var(--spectrum-accent-color-1000)",
+ "description": "Used by `--mod-actionbutton-background-color-hover`.",
+ "control": "color",
+ "category": "Global"
+ },
+ "spectrum-accent-background-color-down": {
+ "value": "var(--spectrum-accent-color-1000)",
+ "description": "Used by `--mod-actionbutton-background-color-down`.",
+ "control": "color",
+ "category": "Global"
+ },
+ "spectrum-accent-background-color-key-focus": {
+ "value": "var(--spectrum-accent-color-1000)",
+ "description": "Used by `--mod-actionbutton-background-color-focus`.",
+ "control": "color",
+ "category": "Global"
+ },
+ "spectrum-white": {
+ "value": "rgb(255, 255, 255)",
+ "description": "Used by `--mod-actionbutton-content-color-default`, `--mod-actionbutton-content-color-hover`, `--mod-actionbutton-content-color-down`, `--mod-actionbutton-content-color-focus`, `--spectrum-actionbutton-content-color-default`, `--spectrum-actionbutton-content-color-hover`, `--spectrum-actionbutton-content-color-down`, `--spectrum-actionbutton-content-color-focus`.",
+ "control": "text",
+ "category": "Global"
+ },
+ "spectrum-black": {
+ "value": "rgb(0, 0, 0)",
+ "description": "Used by `--spectrum-actionbutton-content-color-default`, `--spectrum-actionbutton-content-color-hover`, `--spectrum-actionbutton-content-color-down`, `--spectrum-actionbutton-content-color-focus`.",
+ "control": "text",
+ "category": "Global"
+ },
+ "spectrum-corner-radius-medium-size-extra-small": {
+ "value": "6px",
+ "description": "Used by `--spectrum-actionbutton-border-radius`.",
+ "control": "text",
+ "category": "Global"
+ },
+ "spectrum-component-edge-to-visual-only-50": {
+ "value": "3px",
+ "description": "Used by `--spectrum-actionbutton-min-width`, `--spectrum-actionbutton-edge-to-visual-only`.",
+ "control": "text",
+ "category": "Global"
+ },
+ "spectrum-workflow-icon-size-50": {
+ "value": "14px",
+ "description": "Used by `--spectrum-actionbutton-min-width`, `--spectrum-actionbutton-icon-size`.",
+ "control": "text",
+ "category": "Global"
+ },
+ "spectrum-component-height-50": {
+ "value": "20px",
+ "description": "Used by `--spectrum-actionbutton-height`.",
+ "control": "text",
+ "category": "Global"
+ },
+ "spectrum-font-size-50": {
+ "value": "11px",
+ "description": "Used by `--spectrum-actionbutton-font-size`.",
+ "control": "text",
+ "category": "Global"
+ },
+ "spectrum-text-to-visual-50": {
+ "value": "5px",
+ "description": "Used by `--spectrum-actionbutton-text-to-visual`.",
+ "control": "text",
+ "category": "Global"
+ },
+ "spectrum-component-edge-to-visual-50": {
+ "value": "6px",
+ "description": "Used by `--spectrum-actionbutton-edge-to-visual`.",
+ "control": "text",
+ "category": "Global"
+ },
+ "spectrum-component-edge-to-text-50": {
+ "value": "8px",
+ "description": "Used by `--spectrum-actionbutton-edge-to-text`.",
+ "control": "text",
+ "category": "Global"
+ },
+ "spectrum-component-size-minimum-perspective-down": {
+ "value": "24px",
+ "description": "Used by `--spectrum-actionbutton-downstate-perspective`.",
+ "control": "text",
+ "category": "Global"
+ },
+ "spectrum-corner-radius-medium-size-small": {
+ "value": "7px",
+ "description": "Used by `--spectrum-actionbutton-border-radius`.",
+ "control": "text",
+ "category": "Global"
+ },
+ "spectrum-component-edge-to-visual-only-75": {
+ "value": "4px",
+ "description": "Used by `--spectrum-actionbutton-min-width`, `--spectrum-actionbutton-edge-to-visual-only`.",
+ "control": "text",
+ "category": "Global"
+ },
+ "spectrum-workflow-icon-size-75": {
+ "value": "16px",
+ "description": "Used by `--spectrum-actionbutton-min-width`, `--spectrum-actionbutton-icon-size`.",
+ "control": "text",
+ "category": "Global"
+ },
+ "spectrum-component-height-75": {
+ "value": "24px",
+ "description": "Used by `--spectrum-actionbutton-height`.",
+ "control": "text",
+ "category": "Global"
+ },
+ "spectrum-font-size-75": {
+ "value": "12px",
+ "description": "Used by `--spectrum-actionbutton-font-size`.",
+ "control": "text",
+ "category": "Global"
+ },
+ "spectrum-text-to-visual-75": {
+ "value": "5px",
+ "description": "Used by `--spectrum-actionbutton-text-to-visual`.",
+ "control": "text",
+ "category": "Global"
+ },
+ "spectrum-component-edge-to-visual-75": {
+ "value": "7px",
+ "description": "Used by `--spectrum-actionbutton-edge-to-visual`.",
+ "control": "text",
+ "category": "Global"
+ },
+ "spectrum-component-edge-to-text-75": {
+ "value": "9px",
+ "description": "Used by `--spectrum-actionbutton-edge-to-text`.",
+ "control": "text",
+ "category": "Global"
+ },
+ "spectrum-corner-radius-medium-size-large": {
+ "value": "9px",
+ "description": "Used by `--spectrum-actionbutton-border-radius`.",
+ "control": "text",
+ "category": "Global"
+ },
+ "spectrum-component-edge-to-visual-only-200": {
+ "value": "9px",
+ "description": "Used by `--spectrum-actionbutton-min-width`, `--spectrum-actionbutton-edge-to-visual-only`.",
+ "control": "text",
+ "category": "Global"
+ },
+ "spectrum-workflow-icon-size-200": {
+ "value": "22px",
+ "description": "Used by `--spectrum-actionbutton-min-width`, `--spectrum-actionbutton-icon-size`.",
+ "control": "text",
+ "category": "Global"
+ },
+ "spectrum-component-height-200": {
+ "value": "40px",
+ "description": "Used by `--spectrum-actionbutton-height`.",
+ "control": "text",
+ "category": "Global"
+ },
+ "spectrum-font-size-200": {
+ "value": "16px",
+ "description": "Used by `--spectrum-actionbutton-font-size`.",
+ "control": "text",
+ "category": "Global"
+ },
+ "spectrum-text-to-visual-200": {
+ "value": "7px",
+ "description": "Used by `--spectrum-actionbutton-text-to-visual`.",
+ "control": "text",
+ "category": "Global"
+ },
+ "spectrum-component-edge-to-visual-200": {
+ "value": "13px",
+ "description": "Used by `--spectrum-actionbutton-edge-to-visual`.",
+ "control": "text",
+ "category": "Global"
+ },
+ "spectrum-component-edge-to-text-200": {
+ "value": "15px",
+ "description": "Used by `--spectrum-actionbutton-edge-to-text`.",
+ "control": "text",
+ "category": "Global"
+ },
+ "spectrum-corner-radius-medium-size-extra-large": {
+ "value": "10px",
+ "description": "Used by `--spectrum-actionbutton-border-radius`.",
+ "control": "text",
+ "category": "Global"
+ },
+ "spectrum-component-edge-to-visual-only-300": {
+ "value": "11px",
+ "description": "Used by `--spectrum-actionbutton-min-width`, `--spectrum-actionbutton-edge-to-visual-only`.",
+ "control": "text",
+ "category": "Global"
+ },
+ "spectrum-workflow-icon-size-300": {
+ "value": "26px",
+ "description": "Used by `--spectrum-actionbutton-min-width`, `--spectrum-actionbutton-icon-size`.",
+ "control": "text",
+ "category": "Global"
+ },
+ "spectrum-component-height-300": {
+ "value": "48px",
+ "description": "Used by `--spectrum-actionbutton-height`.",
+ "control": "text",
+ "category": "Global"
+ },
+ "spectrum-font-size-300": {
+ "value": "18px",
+ "description": "Used by `--spectrum-actionbutton-font-size`.",
+ "control": "text",
+ "category": "Global"
+ },
+ "spectrum-text-to-visual-300": {
+ "value": "8px",
+ "description": "Used by `--spectrum-actionbutton-text-to-visual`.",
+ "control": "text",
+ "category": "Global"
+ },
+ "spectrum-component-edge-to-visual-300": {
+ "value": "15px",
+ "description": "Used by `--spectrum-actionbutton-edge-to-visual`.",
+ "control": "text",
+ "category": "Global"
+ },
+ "spectrum-component-edge-to-text-300": {
+ "value": "18px",
+ "description": "Used by `--spectrum-actionbutton-edge-to-text`.",
+ "control": "text",
+ "category": "Global"
+ },
+ "spectrum-component-size-difference-down": {
+ "value": "-2px",
+ "description": "Used by `.spectrum-ActionButton:active`.",
+ "control": "text",
+ "category": "Global"
+ }
+ },
+ "passthroughs": {
+ "mod-button-font-family": {
+ "category": "Passthrough"
+ },
+ "mod-button-line-height": {
+ "category": "Passthrough"
+ },
+ "mod-button-animation-duration": {
+ "category": "Passthrough"
+ }
+ },
+ "high-contrast": {
+ "highcontrast-actionbutton-border-color": {
+ "value": "var(--spectrum-actionbutton-border-color)",
+ "description": "Defined in `.spectrum-ActionButton`, `.spectrum-ActionButton.spectrum-ActionButton--quiet`, `.spectrum-ActionButton.spectrum-ActionButton--quiet:disabled:not(.is-selected)`, `.spectrum-ActionButton:active, .spectrum-ActionButton:focus-visible`, `.spectrum-ActionButton:hover`, `.spectrum-ActionButton.is-selected`, `.spectrum-ActionButton:disabled`.
Used by `.spectrum-ActionButton`.
Defaults to `var(--spectrum-actionbutton-border-color)`, if not set.",
+ "control": "color"
+ },
+ "highcontrast-actionbutton-background-color-default": {
+ "value": "var(--mod-actionbutton-background-color-down, var(--spectrum-actionbutton-background-color-down))",
+ "description": "Defined in `.spectrum-ActionButton`, `.spectrum-ActionButton.spectrum-ActionButton--quiet`, `.spectrum-ActionButton.is-selected`.
Used by `.spectrum-ActionButton`, `.spectrum-ActionButton:hover`, `.spectrum-ActionButton:focus-visible`, `.spectrum-ActionButton:active`.
Defaults to `var(--mod-actionbutton-background-color-down, var(--spectrum-actionbutton-background-color-down))`, if not set.",
+ "control": "color"
+ },
+ "highcontrast-actionbutton-content-color-default": {
+ "value": "var(--mod-actionbutton-content-color-down, var(--spectrum-actionbutton-content-color-down))",
+ "description": "Defined in `.spectrum-ActionButton`, `.spectrum-ActionButton.spectrum-ActionButton--quiet`, `.spectrum-ActionButton.is-selected`.
Used by `.spectrum-ActionButton`, `.spectrum-ActionButton:hover`, `.spectrum-ActionButton:focus-visible`, `.spectrum-ActionButton:active`.
Defaults to `var(--mod-actionbutton-content-color-down, var(--spectrum-actionbutton-content-color-down))`, if not set.",
+ "control": "color"
+ },
+ "highcontrast-actionbutton-background-color-disabled": {
+ "value": "var(--mod-actionbutton-background-color-disabled, var(--spectrum-actionbutton-background-color-disabled))",
+ "description": "Defined in `.spectrum-ActionButton`, `.spectrum-ActionButton.spectrum-ActionButton--quiet`.
Used by `.spectrum-ActionButton.is-disabled, .spectrum-ActionButton:disabled`.
Defaults to `var(--mod-actionbutton-background-color-disabled, var(--spectrum-actionbutton-background-color-disabled))`, if not set.",
+ "control": "color"
+ },
+ "highcontrast-actionbutton-content-color-disabled": {
+ "value": "var(--mod-actionbutton-content-color-disabled, var(--spectrum-actionbutton-content-color-disabled))",
+ "description": "Defined in `.spectrum-ActionButton`.
Used by `.spectrum-ActionButton.is-disabled, .spectrum-ActionButton:disabled`.
Defaults to `var(--mod-actionbutton-content-color-disabled, var(--spectrum-actionbutton-content-color-disabled))`, if not set.",
+ "control": "color"
+ },
+ "highcontrast-actionbutton-animation-duration": {
+ "value": "var(--mod-actionbutton-animation-duration, var(--spectrum-actionbutton-animation-duration))",
+ "description": "Defined in `.spectrum-ActionButton`.
Used by `.spectrum-ActionButton`, `.spectrum-ActionButton:after`.
Defaults to `var(--mod-actionbutton-animation-duration, var(--spectrum-actionbutton-animation-duration))`, if not set.",
+ "control": "text"
+ },
+ "highcontrast-actionbutton-focus-indicator-color": {
+ "value": "var(--mod-actionbutton-focus-indicator-color, var(--spectrum-actionbutton-focus-indicator-color))",
+ "description": "Defined in `.spectrum-ActionButton`.
Used by `.spectrum-ActionButton:focus-visible:after`.
Defaults to `var(--mod-actionbutton-focus-indicator-color, var(--spectrum-actionbutton-focus-indicator-color))`, if not set.",
+ "control": "color"
+ }
+ }
}
diff --git a/components/actionbutton/stories/actionbutton.stories.js b/components/actionbutton/stories/actionbutton.stories.js
index d1599920baa..c4b7f097ae6 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, withDownStateDimensionCapture } 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, Template, 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.
*
@@ -99,6 +101,10 @@ export default {
},
packageJson,
metadata,
+ cssprops: {
+ ...metadata.modifiers,
+ ...metadata.component,
+ },
docs: {
story: {
height: "auto",
diff --git a/components/actionbutton/stories/template.js b/components/actionbutton/stories/template.js
index 942c3bccefa..aa444957325 100644
--- a/components/actionbutton/stories/template.js
+++ b/components/actionbutton/stories/template.js
@@ -43,6 +43,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",
@@ -62,7 +63,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 8d4d2ba86b7..0e2e5edd122 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,31 +28,122 @@
".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"
- ],
- "passthroughs": ["--mod-actionbutton-focus-indicator-border-radius"],
- "high-contrast": []
+ "modifiers": {
+ "mod-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": {
+ "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": {
+ "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": {
+ "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": {
+ "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": {
+ "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": {
+ "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": {
+ "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-gap-size-compact": {
+ "value": "0",
+ "description": "Defined in `.spectrum-ActionGroup`.
Used by `.spectrum-ActionGroup--compact`, `.spectrum-ActionGroup--compact.spectrum-ActionGroup--vertical:not(.spectrum-ActionGroup--quiet)`.
Defaults to `0`, if not set.",
+ "control": "text",
+ "category": "Component"
+ },
+ "spectrum-actiongroup-horizontal-spacing-compact": {
+ "value": "-1px",
+ "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`.
Defaults to `-1px`, if not set.",
+ "control": "text",
+ "category": "Component"
+ },
+ "spectrum-actiongroup-vertical-spacing-compact": {
+ "value": "-1px",
+ "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`.
Defaults to `-1px`, if not set.",
+ "control": "text",
+ "category": "Component"
+ },
+ "spectrum-actiongroup-button-spacing-reset": {
+ "value": "0",
+ "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`.
Defaults to `0`, if not set.",
+ "control": "text",
+ "category": "Component"
+ },
+ "spectrum-actiongroup-border-radius-reset": {
+ "value": "0",
+ "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`.
Defaults to `0`, if not set.",
+ "control": "text",
+ "category": "Component"
+ },
+ "spectrum-actiongroup-border-radius": {
+ "value": "4px",
+ "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`.
Defaults to `var(--spectrum-corner-radius-100)`, if not set.",
+ "control": "text",
+ "category": "Component"
+ },
+ "spectrum-actiongroup-horizontal-spacing-regular": {
+ "value": "8px",
+ "description": "Defined in `.spectrum-ActionGroup--sizeS, .spectrum-ActionGroup--sizeXS`, `.spectrum-ActionGroup--sizeL, .spectrum-ActionGroup--sizeM, .spectrum-ActionGroup--sizeXL`.
Used by `.spectrum-ActionGroup`.
Defaults to `var(--spectrum-spacing-100)`, if not set.",
+ "control": "text",
+ "category": "Component"
+ },
+ "spectrum-actiongroup-vertical-spacing-regular": {
+ "value": "8px",
+ "description": "Defined in `.spectrum-ActionGroup--sizeS, .spectrum-ActionGroup--sizeXS`, `.spectrum-ActionGroup--sizeL, .spectrum-ActionGroup--sizeM, .spectrum-ActionGroup--sizeXL`.
Used by `.spectrum-ActionGroup--vertical`.
Defaults to `var(--spectrum-spacing-100)`, if not set.",
+ "control": "text",
+ "category": "Component"
+ }
+ },
+ "global": {
+ "spectrum-corner-radius-100": {
+ "value": "4px",
+ "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"
+ }
+ },
+ "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 0fd9731f55b..17d146ec084 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, Template, 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.
*/
@@ -102,6 +104,10 @@ export default {
status: {
type: "migrated",
},
+ cssprops: {
+ ...metadata.modifiers,
+ ...metadata.component,
+ },
},
tags: ["migrated"],
};
diff --git a/components/actiongroup/stories/template.js b/components/actiongroup/stories/template.js
index 25d8f25f4e0..84848f41671 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";
@@ -9,6 +10,7 @@ import "../index.css";
export const Template = ({
rootClass = "spectrum-ActionGroup",
+ id = getRandomId("accordion-group"),
size = "m",
areQuiet = false,
areEmphasized = false,
@@ -38,6 +40,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 b3cab764ac2..c5ff951ae78 100644
--- a/components/actionmenu/stories/actionmenu.stories.js
+++ b/components/actionmenu/stories/actionmenu.stories.js
@@ -4,9 +4,12 @@ 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 metadata from "../dist/metadata.json";
+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.
*/
@@ -46,6 +49,10 @@ export default {
],
},
packageJson,
+ cssprops: {
+ ...metadata.modifiers,
+ ...metadata.component,
+ },
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 deed56dd2c9..a6b08d96c46 100644
--- a/components/alertbanner/dist/metadata.json
+++ b/components/alertbanner/dist/metadata.json
@@ -8,90 +8,397 @@
".spectrum-AlertBanner-content",
".spectrum-AlertBanner-icon",
".spectrum-AlertBanner-text",
- ".spectrum-AlertBanner.is-open",
".spectrum-AlertBanner:has(.spectrum-CloseButton) .spectrum-AlertBanner-body",
".spectrum-AlertBanner:lang(ja)",
".spectrum-AlertBanner:lang(ko)",
- ".spectrum-AlertBanner:lang(zh)"
+ ".spectrum-AlertBanner:lang(zh)",
+ ".spectrum-AlertBanner.is-open"
],
- "modifiers": [
- "--mod-alert-banner-background",
- "--mod-alert-banner-block-edge-to-button",
- "--mod-alert-banner-bottom-to-text",
- "--mod-alert-banner-close-button-to-content",
- "--mod-alert-banner-close-button-to-inline-end",
- "--mod-alert-banner-font-color",
- "--mod-alert-banner-font-family",
- "--mod-alert-banner-font-size",
- "--mod-alert-banner-icon-size",
- "--mod-alert-banner-icon-to-text",
- "--mod-alert-banner-informative-background",
- "--mod-alert-banner-inline-end-to-content",
- "--mod-alert-banner-inline-size",
- "--mod-alert-banner-inline-start-to-content",
- "--mod-alert-banner-line-height",
- "--mod-alert-banner-max-inline-size",
- "--mod-alert-banner-min-height",
- "--mod-alert-banner-negative-background",
- "--mod-alert-banner-neutral-background",
- "--mod-alert-banner-text-margin-block-end",
- "--mod-alert-banner-text-margin-block-start",
- "--mod-alert-banner-text-to-button-horizontal",
- "--mod-alert-banner-text-to-button-vertical",
- "--mod-alert-banner-top-to-close-button",
- "--mod-alert-banner-top-to-icon",
- "--mod-alert-banner-top-to-text"
- ],
- "component": [
- "--spectrum-alert-banner-background",
- "--spectrum-alert-banner-block-edge-to-button",
- "--spectrum-alert-banner-bottom-to-text",
- "--spectrum-alert-banner-close-button-spacing",
- "--spectrum-alert-banner-close-button-to-content",
- "--spectrum-alert-banner-close-button-to-inline-end",
- "--spectrum-alert-banner-font-color",
- "--spectrum-alert-banner-font-family",
- "--spectrum-alert-banner-font-size",
- "--spectrum-alert-banner-icon-size",
- "--spectrum-alert-banner-icon-to-text",
- "--spectrum-alert-banner-inline-end-to-content",
- "--spectrum-alert-banner-inline-size",
- "--spectrum-alert-banner-inline-start-to-content",
- "--spectrum-alert-banner-line-height",
- "--spectrum-alert-banner-max-inline-size",
- "--spectrum-alert-banner-min-height",
- "--spectrum-alert-banner-minimum-height",
- "--spectrum-alert-banner-text-margin-block-end",
- "--spectrum-alert-banner-text-margin-block-start",
- "--spectrum-alert-banner-text-to-button-horizontal",
- "--spectrum-alert-banner-text-to-button-vertical",
- "--spectrum-alert-banner-top-to-text",
- "--spectrum-alert-banner-top-to-workflow-icon",
- "--spectrum-alert-banner-width"
- ],
- "global": [
- "--spectrum-border-width-100",
- "--spectrum-cjk-line-height-100",
- "--spectrum-font-size-100",
- "--spectrum-informative-background-color-default",
- "--spectrum-line-height-100",
- "--spectrum-negative-background-color-default",
- "--spectrum-neutral-subdued-background-color-default",
- "--spectrum-sans-font-family-stack",
- "--spectrum-spacing-200",
- "--spectrum-spacing-300",
- "--spectrum-text-to-visual-300",
- "--spectrum-white",
- "--spectrum-workflow-icon-size-100"
- ],
- "passthroughs": [
- "--mod-closebutton-align-self",
- "--mod-closebutton-margin-inline",
- "--mod-closebutton-margin-top",
- "--mod-icon-size"
- ],
- "high-contrast": [
- "--highcontrast-alert-banner-border-color",
- "--highcontrast-alert-banner-border-width"
- ]
+ "modifiers": {
+ "mod-alert-banner-top-to-text": {
+ "description": "Used by `--spectrum-alert-banner-text-margin-block-start`.
Defaults to `var(--spectrum-alert-banner-top-to-text)`, if not set.",
+ "control": "text",
+ "category": "Modifier"
+ },
+ "mod-alert-banner-block-edge-to-button": {
+ "description": "Used by `--spectrum-alert-banner-text-margin-block-start`, `--spectrum-alert-banner-text-margin-block-end`, `.spectrum-AlertBanner-body`, `.spectrum-AlertBanner-icon`.
Defaults to `var(--spectrum-alert-banner-block-edge-to-button)`, if not set.",
+ "control": "text",
+ "category": "Modifier"
+ },
+ "mod-alert-banner-bottom-to-text": {
+ "description": "Used by `--spectrum-alert-banner-text-margin-block-end`.
Defaults to `var(--spectrum-alert-banner-bottom-to-text)`, if not set.",
+ "control": "text",
+ "category": "Modifier"
+ },
+ "mod-alert-banner-neutral-background": {
+ "description": "Used by `--spectrum-alert-banner-background`.
Defaults to `var(--spectrum-neutral-subdued-background-color-default)`, if not set.",
+ "control": "text",
+ "category": "Modifier"
+ },
+ "mod-alert-banner-close-button-to-content": {
+ "description": "Used by `--mod-closebutton-margin-inline`.
Defaults to `var(--spectrum-alert-banner-close-button-to-content)`, if not set.",
+ "control": "text",
+ "category": "Modifier"
+ },
+ "mod-alert-banner-close-button-to-inline-end": {
+ "description": "Used by `--mod-closebutton-margin-inline`.
Defaults to `var(--spectrum-alert-banner-close-button-to-inline-end)`, if not set.",
+ "control": "text",
+ "category": "Modifier"
+ },
+ "mod-alert-banner-top-to-close-button": {
+ "description": "Used by `--mod-closebutton-margin-top`.
Defaults to `var(--spectrum-alert-banner-block-edge-to-button)`, if not set.",
+ "control": "text",
+ "category": "Modifier"
+ },
+ "mod-alert-banner-informative-background": {
+ "description": "Used by `--spectrum-alert-banner-background`.
Defaults to `var(--spectrum-informative-background-color-default)`, if not set.",
+ "control": "text",
+ "category": "Modifier"
+ },
+ "mod-alert-banner-negative-background": {
+ "description": "Used by `--spectrum-alert-banner-background`.
Defaults to `var(--spectrum-negative-background-color-default)`, if not set.",
+ "control": "text",
+ "category": "Modifier"
+ },
+ "mod-alert-banner-inline-size": {
+ "description": "Used by `.spectrum-AlertBanner`.
Defaults to `var(--spectrum-alert-banner-inline-size)`, if not set.",
+ "control": "text",
+ "category": "Modifier"
+ },
+ "mod-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": {
+ "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": {
+ "description": "Used by `.spectrum-AlertBanner`.
Defaults to `var(--spectrum-alert-banner-font-size)`, if not set.",
+ "control": "text",
+ "category": "Modifier"
+ },
+ "mod-alert-banner-font-family": {
+ "description": "Used by `.spectrum-AlertBanner`.
Defaults to `var(--spectrum-alert-banner-font-family)`, if not set.",
+ "control": "text",
+ "category": "Modifier"
+ },
+ "mod-alert-banner-line-height": {
+ "description": "Used by `.spectrum-AlertBanner`.
Defaults to `var(--spectrum-alert-banner-line-height)`, if not set.",
+ "control": "text",
+ "category": "Modifier"
+ },
+ "mod-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-background": {
+ "description": "Used by `.spectrum-AlertBanner`.
Defaults to `var(--spectrum-alert-banner-background)`, if not set.",
+ "control": "text",
+ "category": "Modifier"
+ },
+ "mod-alert-banner-text-to-button-horizontal": {
+ "description": "Used by `.spectrum-AlertBanner-body`.
Defaults to `var(--spectrum-alert-banner-text-to-button-horizontal)`, if not set.",
+ "control": "text",
+ "category": "Modifier"
+ },
+ "mod-alert-banner-text-to-button-vertical": {
+ "description": "Used by `.spectrum-AlertBanner-body`.",
+ "control": "text",
+ "category": "Modifier"
+ },
+ "mod-alert-banner-inline-start-to-content": {
+ "description": "Used by `.spectrum-AlertBanner-body`.
Defaults to `var(--spectrum-alert-banner-inline-start-to-content)`, if not set.",
+ "control": "text",
+ "category": "Modifier"
+ },
+ "mod-alert-banner-inline-end-to-content": {
+ "description": "Used by `.spectrum-AlertBanner-body`.
Defaults to `var(--spectrum-alert-banner-inline-end-to-content)`, if not set.",
+ "control": "text",
+ "category": "Modifier"
+ },
+ "mod-alert-banner-icon-size": {
+ "description": "Used by `--mod-icon-size`.
Defaults to `var(--spectrum-alert-banner-icon-size)`, if not set.",
+ "control": "text",
+ "category": "Modifier"
+ },
+ "mod-alert-banner-top-to-icon": {
+ "description": "Used by `.spectrum-AlertBanner-icon`.
Defaults to `var(--spectrum-alert-banner-top-to-workflow-icon)`, if not set.",
+ "control": "text",
+ "category": "Modifier"
+ },
+ "mod-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-text-margin-block-start": {
+ "description": "Used by `.spectrum-AlertBanner-text`.
Defaults to `var(--spectrum-alert-banner-text-margin-block-start)`, if not set.",
+ "control": "text",
+ "category": "Modifier"
+ },
+ "mod-alert-banner-text-margin-block-end": {
+ "description": "Used by `.spectrum-AlertBanner-text`.
Defaults to `var(--spectrum-alert-banner-text-margin-block-end)`, if not set.",
+ "control": "text",
+ "category": "Modifier"
+ }
+ },
+ "component": {
+ "spectrum-alert-banner-min-height": {
+ "value": "56px",
+ "description": "Defined in `.spectrum-AlertBanner`.
Used by `.spectrum-AlertBanner`.
Defaults to `var(--spectrum-alert-banner-minimum-height)`, if not set.",
+ "control": "text",
+ "category": "Component"
+ },
+ "spectrum-alert-banner-minimum-height": {
+ "value": "56px",
+ "description": "Used by `--spectrum-alert-banner-min-height`.",
+ "control": "text",
+ "category": "Component"
+ },
+ "spectrum-alert-banner-max-inline-size": {
+ "value": "832px",
+ "description": "Defined in `.spectrum-AlertBanner`.
Used by `.spectrum-AlertBanner`.
Defaults to `var(--spectrum-alert-banner-width)`, if not set.",
+ "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-inline-size": {
+ "value": "auto",
+ "description": "Defined in `.spectrum-AlertBanner`.
Used by `.spectrum-AlertBanner`.
Defaults to `auto`, if not set.",
+ "control": "text",
+ "category": "Component"
+ },
+ "spectrum-alert-banner-font-size": {
+ "value": "14px",
+ "description": "Defined in `.spectrum-AlertBanner`.
Used by `.spectrum-AlertBanner`.
Defaults to `var(--spectrum-font-size-100)`, if not set.",
+ "control": "text",
+ "category": "Component"
+ },
+ "spectrum-alert-banner-line-height": {
+ "value": "1.5",
+ "description": "Defined in `.spectrum-AlertBanner`, `.spectrum-AlertBanner:lang(ja), .spectrum-AlertBanner:lang(ko), .spectrum-AlertBanner:lang(zh)`.
Used by `.spectrum-AlertBanner`.
Defaults to `var(--spectrum-cjk-line-height-100)`, if not set.",
+ "control": "text",
+ "category": "Component"
+ },
+ "spectrum-alert-banner-font-family": {
+ "value": "var(--spectrum-sans-font-family-stack)",
+ "description": "Defined in `.spectrum-AlertBanner`.
Used by `.spectrum-AlertBanner`.
Defaults to `var(--spectrum-sans-font-family-stack)`, if not set.",
+ "control": "text",
+ "category": "Component"
+ },
+ "spectrum-alert-banner-icon-size": {
+ "value": "20px",
+ "description": "Defined in `.spectrum-AlertBanner`.
Used by `--mod-icon-size`.
Defaults to `var(--spectrum-workflow-icon-size-100)`, if not set.",
+ "control": "text",
+ "category": "Component"
+ },
+ "spectrum-alert-banner-icon-to-text": {
+ "value": "8px",
+ "description": "Defined in `.spectrum-AlertBanner`.
Used by `.spectrum-AlertBanner-icon`.
Defaults to `var(--spectrum-text-to-visual-300)`, if not set.",
+ "control": "text",
+ "category": "Component"
+ },
+ "spectrum-alert-banner-inline-start-to-content": {
+ "value": "16px",
+ "description": "Defined in `.spectrum-AlertBanner`.
Used by `.spectrum-AlertBanner-body`.
Defaults to `var(--spectrum-spacing-300)`, if not set.",
+ "control": "text",
+ "category": "Component"
+ },
+ "spectrum-alert-banner-inline-end-to-content": {
+ "value": "16px",
+ "description": "Defined in `.spectrum-AlertBanner`.
Used by `.spectrum-AlertBanner-body`.
Defaults to `var(--spectrum-spacing-300)`, if not set.",
+ "control": "text",
+ "category": "Component"
+ },
+ "spectrum-alert-banner-text-to-button-horizontal": {
+ "value": "16px",
+ "description": "Defined in `.spectrum-AlertBanner`.
Used by `.spectrum-AlertBanner-body`.
Defaults to `var(--spectrum-spacing-300)`, if not set.",
+ "control": "text",
+ "category": "Component"
+ },
+ "spectrum-alert-banner-block-edge-to-button": {
+ "value": "12px",
+ "description": "Defined in `.spectrum-AlertBanner`.
Used by `--spectrum-alert-banner-text-margin-block-start`, `--spectrum-alert-banner-text-margin-block-end`, `--mod-closebutton-margin-top`, `.spectrum-AlertBanner-body`, `.spectrum-AlertBanner-icon`.
Defaults to `var(--spectrum-spacing-200)`, if not set.",
+ "control": "text",
+ "category": "Component"
+ },
+ "spectrum-alert-banner-close-button-to-content": {
+ "value": "16px",
+ "description": "Defined in `.spectrum-AlertBanner`.
Used by `--mod-closebutton-margin-inline`.
Defaults to `var(--spectrum-spacing-300)`, if not set.",
+ "control": "text",
+ "category": "Component"
+ },
+ "spectrum-alert-banner-close-button-to-inline-end": {
+ "value": "var(--spectrum-alert-banner-close-button-spacing)",
+ "description": "Defined in `.spectrum-AlertBanner`.
Used by `--mod-closebutton-margin-inline`.
Defaults to `var(--spectrum-alert-banner-close-button-spacing)`, if not set.",
+ "control": "text",
+ "category": "Component"
+ },
+ "spectrum-alert-banner-close-button-spacing": {
+ "description": "Used by `--spectrum-alert-banner-close-button-to-inline-end`.",
+ "control": "text",
+ "category": "Component"
+ },
+ "spectrum-alert-banner-text-margin-block-start": {
+ "value": "max(0px, var(--mod-alert-banner-top-to-text, var(--spectrum-alert-banner-top-to-text)) - var(--mod-alert-banner-block-edge-to-button, var(--spectrum-alert-banner-block-edge-to-button)))",
+ "description": "Defined in `.spectrum-AlertBanner`.
Used by `.spectrum-AlertBanner-text`.
Defaults to `max(0px, var(--mod-alert-banner-top-to-text, var(--spectrum-alert-banner-top-to-text)) - var(--mod-alert-banner-block-edge-to-button, var(--spectrum-alert-banner-block-edge-to-button)))`, if not set.",
+ "control": "text",
+ "category": "Component"
+ },
+ "spectrum-alert-banner-top-to-text": {
+ "value": "18px",
+ "description": "Used by `--spectrum-alert-banner-text-margin-block-start`.",
+ "control": "text",
+ "category": "Component"
+ },
+ "spectrum-alert-banner-text-margin-block-end": {
+ "value": "max(0px, var(--mod-alert-banner-bottom-to-text, var(--spectrum-alert-banner-bottom-to-text)) - var(--mod-alert-banner-block-edge-to-button, var(--spectrum-alert-banner-block-edge-to-button)))",
+ "description": "Defined in `.spectrum-AlertBanner`.
Used by `.spectrum-AlertBanner-body`, `.spectrum-AlertBanner-text`.
Defaults to `max(0px, var(--mod-alert-banner-bottom-to-text, var(--spectrum-alert-banner-bottom-to-text)) - var(--mod-alert-banner-block-edge-to-button, var(--spectrum-alert-banner-block-edge-to-button)))`, if not set.",
+ "control": "text",
+ "category": "Component"
+ },
+ "spectrum-alert-banner-bottom-to-text": {
+ "value": "20px",
+ "description": "Used by `--spectrum-alert-banner-text-margin-block-end`.",
+ "control": "text",
+ "category": "Component"
+ },
+ "spectrum-alert-banner-background": {
+ "value": "var(--mod-alert-banner-negative-background, var(--spectrum-negative-background-color-default))",
+ "description": "Defined in `.spectrum-AlertBanner`, `.spectrum-AlertBanner--info`, `.spectrum-AlertBanner--negative`.
Used by `.spectrum-AlertBanner`.
Defaults to `var(--mod-alert-banner-negative-background, var(--spectrum-negative-background-color-default))`, if not set.",
+ "control": "text",
+ "category": "Component"
+ },
+ "spectrum-alert-banner-font-color": {
+ "value": "rgb(255, 255, 255)",
+ "description": "Defined in `.spectrum-AlertBanner`.
Used by `.spectrum-AlertBanner`.
Defaults to `var(--spectrum-white)`, if not set.",
+ "control": "color",
+ "category": "Component"
+ },
+ "spectrum-alert-banner-text-to-button-vertical": {
+ "description": "Used by `.spectrum-AlertBanner-body`.",
+ "control": "text",
+ "category": "Component"
+ },
+ "spectrum-alert-banner-top-to-workflow-icon": {
+ "value": "18px",
+ "description": "Used by `.spectrum-AlertBanner-icon`.",
+ "control": "text",
+ "category": "Component"
+ }
+ },
+ "global": {
+ "spectrum-font-size-100": {
+ "value": "14px",
+ "description": "Used by `--spectrum-alert-banner-font-size`.",
+ "control": "text",
+ "category": "Global"
+ },
+ "spectrum-line-height-100": {
+ "value": "1.3",
+ "description": "Used by `--spectrum-alert-banner-line-height`.",
+ "control": "text",
+ "category": "Global"
+ },
+ "spectrum-sans-font-family-stack": {
+ "description": "Used by `--spectrum-alert-banner-font-family`.",
+ "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-inline-start-to-content`, `--spectrum-alert-banner-inline-end-to-content`, `--spectrum-alert-banner-text-to-button-horizontal`, `--spectrum-alert-banner-close-button-to-content`.",
+ "control": "text",
+ "category": "Global"
+ },
+ "spectrum-spacing-200": {
+ "value": "12px",
+ "description": "Used by `--spectrum-alert-banner-block-edge-to-button`.",
+ "control": "text",
+ "category": "Global"
+ },
+ "spectrum-neutral-subdued-background-color-default": {
+ "value": "var(--spectrum-gray-700)",
+ "description": "Used by `--spectrum-alert-banner-background`.",
+ "control": "color",
+ "category": "Global"
+ },
+ "spectrum-white": {
+ "value": "rgb(255, 255, 255)",
+ "description": "Used by `--spectrum-alert-banner-font-color`.",
+ "control": "text",
+ "category": "Global"
+ },
+ "spectrum-cjk-line-height-100": {
+ "value": "1.5",
+ "description": "Used by `--spectrum-alert-banner-line-height`.",
+ "control": "text",
+ "category": "Global"
+ },
+ "spectrum-informative-background-color-default": {
+ "value": "var(--spectrum-informative-color-900)",
+ "description": "Used by `--spectrum-alert-banner-background`.",
+ "control": "color",
+ "category": "Global"
+ },
+ "spectrum-negative-background-color-default": {
+ "value": "var(--spectrum-negative-color-900)",
+ "description": "Used by `--spectrum-alert-banner-background`.",
+ "control": "color",
+ "category": "Global"
+ },
+ "spectrum-border-width-100": {
+ "value": "1px",
+ "description": "Used by `--highcontrast-alert-banner-border-width`.",
+ "control": "text",
+ "category": "Global"
+ }
+ },
+ "passthroughs": {
+ "mod-closebutton-margin-inline": {
+ "category": "Passthrough"
+ },
+ "mod-closebutton-margin-top": {
+ "category": "Passthrough"
+ },
+ "mod-closebutton-align-self": {
+ "category": "Passthrough"
+ },
+ "mod-icon-size": {
+ "category": "Passthrough"
+ }
+ },
+ "high-contrast": {
+ "highcontrast-alert-banner-border-width": {
+ "value": "var(--spectrum-border-width-100)",
+ "description": "Defined in `.spectrum-AlertBanner`.
Used by `.spectrum-AlertBanner`.
Defaults to `var(--spectrum-border-width-100)`, if not set.",
+ "control": "text"
+ },
+ "highcontrast-alert-banner-border-color": {
+ "value": "CanvasText",
+ "description": "Defined in `.spectrum-AlertBanner`.
Used by `.spectrum-AlertBanner`.
Defaults to `CanvasText`, if not set.",
+ "control": "color"
+ }
+ }
}
diff --git a/components/alertbanner/stories/alertbanner.stories.js b/components/alertbanner/stories/alertbanner.stories.js
index c6d638008c2..47d9b7dfaf7 100644
--- a/components/alertbanner/stories/alertbanner.stories.js
+++ b/components/alertbanner/stories/alertbanner.stories.js
@@ -1,10 +1,12 @@
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 { AlertBannerGroup } from "./alertbanner.test.js";
import { ActionableOptionsTemplate, Template, TextOverflowTemplate } from "./template.js";
+// Local assets to render the component styles and structure
+import metadata from "../dist/metadata.json";
+import packageJson from "../package.json";
+
/**
* 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.
@@ -78,6 +80,10 @@ export default {
status: {
type: "migrated",
},
+ cssprops: {
+ ...metadata.modifiers,
+ ...metadata.component,
+ },
},
tags: ["migrated"],
};
diff --git a/components/alertbanner/stories/template.js b/components/alertbanner/stories/template.js
index ec0278583fd..a12aa218e9a 100644
--- a/components/alertbanner/stories/template.js
+++ b/components/alertbanner/stories/template.js
@@ -12,7 +12,7 @@ import "../index.css";
export const Template = ({
rootClass = "spectrum-AlertBanner",
- id = getRandomId("alertbanner"),
+ id = getRandomId("alert-banner"),
testId,
isOpen = true,
text,
@@ -37,7 +37,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": {
+ "description": "Used by `.spectrum-AlertDialog`.
Defaults to `var(--spectrum-alert-dialog-max-width)`, if not set.",
+ "control": "text",
+ "category": "Modifier"
+ },
+ "mod-alert-dialog-background-color": {
+ "description": "Used by `.spectrum-AlertDialog`.
Defaults to `var(--spectrum-alert-dialog-background-color)`, if not set.",
+ "control": "color",
+ "category": "Modifier"
+ },
+ "mod-alert-dialog-edge-to-content": {
+ "description": "Used by `.spectrum-AlertDialog`.
Defaults to `var(--spectrum-alert-dialog-edge-to-content)`, if not set.",
+ "control": "text",
+ "category": "Modifier"
+ },
+ "mod-alert-dialog-corner-radius": {
+ "description": "Used by `.spectrum-AlertDialog`.
Defaults to `var(--spectrum-alert-dialog-corner-radius)`, if not set.",
+ "control": "text",
+ "category": "Modifier"
+ },
+ "mod-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-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": {
+ "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-minimum-title-to-icon": {
+ "description": "Used by `.spectrum-AlertDialog-header`.
Defaults to `var(--spectrum-alert-dialog-minimum-title-to-icon)`, if not set.",
+ "control": "text",
+ "category": "Modifier"
+ },
+ "mod-alert-dialog-title-to-description": {
+ "description": "Used by `.spectrum-AlertDialog-header`.
Defaults to `var(--spectrum-alert-dialog-title-to-description)`, if not set.",
+ "control": "text",
+ "category": "Modifier"
+ },
+ "mod-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": {
+ "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": {
+ "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-heading-size": {
+ "description": "Used by `.spectrum-AlertDialog-heading`.
Defaults to `var(--spectrum-alert-dialog-heading-size)`, if not set.",
+ "control": "text",
+ "category": "Modifier"
+ },
+ "mod-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": {
+ "description": "Used by `.spectrum-AlertDialog-heading`.
Defaults to `var(--spectrum-alert-dialog-title-color)`, if not set.",
+ "control": "color",
+ "category": "Modifier"
+ },
+ "mod-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": {
+ "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": {
+ "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-description-content-size": {
+ "description": "Used by `.spectrum-AlertDialog-content`.
Defaults to `var(--spectrum-alert-dialog-description-content-size)`, if not set.",
+ "control": "text",
+ "category": "Modifier"
+ },
+ "mod-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": {
+ "description": "Used by `.spectrum-AlertDialog-content`.
Defaults to `var(--spectrum-alert-dialog-body-color)`, if not set.",
+ "control": "color",
+ "category": "Modifier"
+ },
+ "mod-alert-dialog-description-to-button-group": {
+ "description": "Used by `.spectrum-AlertDialog-content`.
Defaults to `var(--spectrum-alert-dialog-description-to-button-group)`, if not set.",
+ "control": "text",
+ "category": "Modifier"
+ }
+ },
+ "component": {
+ "spectrum-alert-dialog-min-width": {
+ "value": "288px",
+ "description": "Defined in `.spectrum-AlertDialog`.
Used by `.spectrum-AlertDialog`.
Defaults to `var(--spectrum-alert-dialog-minimum-width)`, if not set.",
+ "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": {
+ "value": "480px",
+ "description": "Defined in `.spectrum-AlertDialog`.
Used by `.spectrum-AlertDialog`.
Defaults to `var(--spectrum-alert-dialog-maximum-width)`, if not set.",
+ "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": {
+ "value": "20px",
+ "description": "Defined in `.spectrum-AlertDialog`.
Used by `.spectrum-AlertDialog .spectrum-Icon`.
Defaults to `var(--spectrum-workflow-icon-size-100)`, if not set.",
+ "control": "text",
+ "category": "Component"
+ },
+ "spectrum-alert-dialog-corner-radius": {
+ "value": "16px",
+ "description": "Defined in `.spectrum-AlertDialog`.
Used by `.spectrum-AlertDialog`.
Defaults to `var(--spectrum-corner-radius-extra-large-default)`, if not set.",
+ "control": "text",
+ "category": "Component"
+ },
+ "spectrum-alert-dialog-warning-icon-color": {
+ "value": "var(--spectrum-notice-color-800)",
+ "description": "Defined in `.spectrum-AlertDialog`.
Used by `--mod-icon-color`.
Defaults to `var(--spectrum-notice-visual-color)`, if not set.",
+ "control": "color",
+ "category": "Component"
+ },
+ "spectrum-alert-dialog-error-icon-color": {
+ "value": "var(--spectrum-negative-color-800)",
+ "description": "Defined in `.spectrum-AlertDialog`.
Used by `--mod-icon-color`.
Defaults to `var(--spectrum-negative-visual-color)`, if not set.",
+ "control": "color",
+ "category": "Component"
+ },
+ "spectrum-alert-dialog-background-color": {
+ "value": "var(--spectrum-gray-25)",
+ "description": "Defined in `.spectrum-AlertDialog`.
Used by `.spectrum-AlertDialog`.
Defaults to `var(--spectrum-background-layer-2-color)`, if not set.",
+ "control": "color",
+ "category": "Component"
+ },
+ "spectrum-alert-dialog-title-font-family": {
+ "value": "var(--spectrum-sans-font-family-stack)",
+ "description": "Defined in `.spectrum-AlertDialog`.
Used by `.spectrum-AlertDialog-heading`.
Defaults to `var(--spectrum-sans-font-family-stack)`, if not set.",
+ "control": "text",
+ "category": "Component"
+ },
+ "spectrum-alert-dialog-title-font-weight": {
+ "value": "800",
+ "description": "Defined in `.spectrum-AlertDialog`.
Used by `.spectrum-AlertDialog-heading`.
Defaults to `var(--spectrum-heading-sans-serif-font-weight)`, if not set.",
+ "control": "text",
+ "category": "Component"
+ },
+ "spectrum-alert-dialog-title-font-style": {
+ "value": "normal",
+ "description": "Defined in `.spectrum-AlertDialog`.
Used by `.spectrum-AlertDialog-heading`.
Defaults to `var(--spectrum-heading-sans-serif-font-style)`, if not set.",
+ "control": "text",
+ "category": "Component"
+ },
+ "spectrum-alert-dialog-title-line-height": {
+ "value": "1.3",
+ "description": "Defined in `.spectrum-AlertDialog`.
Used by `.spectrum-AlertDialog-heading`.
Defaults to `var(--spectrum-heading-line-height)`, if not set.",
+ "control": "text",
+ "category": "Component"
+ },
+ "spectrum-alert-dialog-title-color": {
+ "value": "var(--spectrum-gray-900)",
+ "description": "Defined in `.spectrum-AlertDialog`.
Used by `.spectrum-AlertDialog-heading`.
Defaults to `var(--spectrum-heading-color)`, if not set.",
+ "control": "color",
+ "category": "Component"
+ },
+ "spectrum-alert-dialog-heading-size": {
+ "value": "var(--spectrum-title-size-xl)",
+ "description": "Defined in `.spectrum-AlertDialog`.
Used by `.spectrum-AlertDialog-heading`.
Defaults to `var(--spectrum-alert-dialog-title-font-size)`, if not set.",
+ "control": "text",
+ "category": "Component"
+ },
+ "spectrum-alert-dialog-title-font-size": {
+ "value": "var(--spectrum-title-size-xl)",
+ "description": "Used by `--spectrum-alert-dialog-heading-size`.",
+ "control": "text",
+ "category": "Component"
+ },
+ "spectrum-alert-dialog-description-content-size": {
+ "value": "var(--spectrum-body-size-s)",
+ "description": "Defined in `.spectrum-AlertDialog`.
Used by `.spectrum-AlertDialog-content`.
Defaults to `var(--spectrum-alert-dialog-description-font-size)`, if not set.",
+ "control": "text",
+ "category": "Component"
+ },
+ "spectrum-alert-dialog-description-font-size": {
+ "value": "var(--spectrum-body-size-s)",
+ "description": "Used by `--spectrum-alert-dialog-description-content-size`.",
+ "control": "text",
+ "category": "Component"
+ },
+ "spectrum-alert-dialog-body-font-family": {
+ "value": "var(--spectrum-sans-font-family-stack)",
+ "description": "Defined in `.spectrum-AlertDialog`.
Used by `.spectrum-AlertDialog-content`.
Defaults to `var(--spectrum-sans-font-family-stack)`, if not set.",
+ "control": "text",
+ "category": "Component"
+ },
+ "spectrum-alert-dialog-body-font-weight": {
+ "value": "400",
+ "description": "Defined in `.spectrum-AlertDialog`.
Used by `.spectrum-AlertDialog-content`.
Defaults to `var(--spectrum-body-sans-serif-font-weight)`, if not set.",
+ "control": "text",
+ "category": "Component"
+ },
+ "spectrum-alert-dialog-body-font-style": {
+ "value": "normal",
+ "description": "Defined in `.spectrum-AlertDialog`.
Used by `.spectrum-AlertDialog-content`.
Defaults to `var(--spectrum-body-sans-serif-font-style)`, if not set.",
+ "control": "text",
+ "category": "Component"
+ },
+ "spectrum-alert-dialog-body-line-height": {
+ "value": "1.5",
+ "description": "Defined in `.spectrum-AlertDialog`.
Used by `.spectrum-AlertDialog-content`.
Defaults to `var(--spectrum-line-height-200)`, if not set.",
+ "control": "text",
+ "category": "Component"
+ },
+ "spectrum-alert-dialog-body-color": {
+ "value": "var(--spectrum-gray-800)",
+ "description": "Defined in `.spectrum-AlertDialog`.
Used by `.spectrum-AlertDialog-content`.
Defaults to `var(--spectrum-body-color)`, if not set.",
+ "control": "color",
+ "category": "Component"
+ },
+ "spectrum-alert-dialog-title-to-description": {
+ "value": "16px",
+ "description": "Defined in `.spectrum-AlertDialog`.
Used by `.spectrum-AlertDialog-header`.
Defaults to `var(--spectrum-spacing-300)`, if not set.",
+ "control": "text",
+ "category": "Component"
+ },
+ "spectrum-alert-dialog-minimum-title-to-icon": {
+ "value": "8px",
+ "description": "Defined in `.spectrum-AlertDialog`.
Used by `.spectrum-AlertDialog-header`.
Defaults to `var(--spectrum-spacing-100)`, if not set.",
+ "control": "text",
+ "category": "Component"
+ },
+ "spectrum-alert-dialog-description-to-button-group": {
+ "value": "32px",
+ "description": "Defined in `.spectrum-AlertDialog`.
Used by `.spectrum-AlertDialog-content`.
Defaults to `var(--spectrum-spacing-500)`, if not set.",
+ "control": "text",
+ "category": "Component"
+ },
+ "spectrum-alert-dialog-edge-to-content": {
+ "description": "Used by `.spectrum-AlertDialog`.",
+ "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-corner-radius-extra-large-default": {
+ "value": "16px",
+ "description": "Used by `--spectrum-alert-dialog-corner-radius`.",
+ "control": "text",
+ "category": "Global"
+ },
+ "spectrum-notice-visual-color": {
+ "value": "var(--spectrum-notice-color-800)",
+ "description": "Used by `--spectrum-alert-dialog-warning-icon-color`.",
+ "control": "color",
+ "category": "Global"
+ },
+ "spectrum-negative-visual-color": {
+ "value": "var(--spectrum-negative-color-800)",
+ "description": "Used by `--spectrum-alert-dialog-error-icon-color`.",
+ "control": "color",
+ "category": "Global"
+ },
+ "spectrum-background-layer-2-color": {
+ "value": "var(--spectrum-gray-25)",
+ "description": "Used by `--spectrum-alert-dialog-background-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": "800",
+ "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-200": {
+ "value": "1.5",
+ "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-300": {
+ "value": "16px",
+ "description": "Used by `--spectrum-alert-dialog-title-to-description`.",
+ "control": "text",
+ "category": "Global"
+ },
+ "spectrum-spacing-100": {
+ "value": "8px",
+ "description": "Used by `--spectrum-alert-dialog-minimum-title-to-icon`.",
+ "control": "text",
+ "category": "Global"
+ },
+ "spectrum-spacing-500": {
+ "value": "32px",
+ "description": "Used by `--spectrum-alert-dialog-description-to-button-group`.",
+ "control": "text",
+ "category": "Global"
+ }
+ },
+ "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 e5b563f7658..a33f1c645f2 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.
*/
@@ -77,12 +79,17 @@ export default {
metadata,
status: {
type: "migrated",
- }
+ },
+ cssprops: {
+ ...metadata.modifiers,
+ ...metadata.component,
+ },
},
tags: ["migrated"],
decorators: [
withUnderlayWrapper,
],
+ tags: ["migrated"],
};
export const Default = AlertDialogGroup.bind({});
diff --git a/components/alertdialog/stories/template.js b/components/alertdialog/stories/template.js
index 7504cc687da..87c83f4a09d 100644
--- a/components/alertdialog/stories/template.js
+++ b/components/alertdialog/stories/template.js
@@ -69,12 +69,12 @@ const buttonMap = {
export const Dialog = ({
rootClass = "spectrum-AlertDialog",
+ id = getRandomId("alert-dialog"),
heading,
content,
customClasses = [],
variant,
hasVerticalButtons,
- id = getRandomId("alertdialog"),
customStyles = {},
} = {}, context = {}) => {
return html`
diff --git a/components/asset/dist/metadata.json b/components/asset/dist/metadata.json
index 6389e295f47..338139abd75 100644
--- a/components/asset/dist/metadata.json
+++ b/components/asset/dist/metadata.json
@@ -10,26 +10,95 @@
".spectrum-Asset-folderOutline",
".spectrum-Asset-image"
],
- "modifiers": [
- "--mod-asset-file-background-color",
- "--mod-asset-folder-background-color",
- "--mod-asset-icon-margin",
- "--mod-asset-icon-max-width",
- "--mod-asset-icon-min-width",
- "--mod-asset-icon-outline-color"
- ],
- "component": [
- "--spectrum-asset-file-background",
- "--spectrum-asset-file-outline",
- "--spectrum-asset-folder-background",
- "--spectrum-asset-folder-outline"
- ],
- "global": [
- "--spectrum-animation-duration-100",
- "--spectrum-gray-200",
- "--spectrum-gray-25",
- "--spectrum-gray-500"
- ],
- "passthroughs": [],
- "high-contrast": ["--highcontrast-asset-icon-background-color"]
+ "modifiers": {
+ "mod-asset-folder-background-color": {
+ "description": "Used by `--spectrum-asset-folder-background`.
Defaults to `var(--spectrum-gray-200)`, if not set.",
+ "control": "color",
+ "category": "Modifier"
+ },
+ "mod-asset-file-background-color": {
+ "description": "Used by `--spectrum-asset-file-background`.
Defaults to `var(--spectrum-gray-25)`, if not set.",
+ "control": "color",
+ "category": "Modifier"
+ },
+ "mod-asset-icon-outline-color": {
+ "description": "Used by `--spectrum-asset-folder-outline`, `--spectrum-asset-file-outline`.
Defaults to `var(--spectrum-gray-500)`, 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": {
+ "value": "var(--highcontrast-asset-icon-background-color, var(--mod-asset-folder-background-color, var(--spectrum-gray-200)))",
+ "description": "Defined in `.spectrum-Asset`.
Used by `.spectrum-Asset-folderBackground`.
Defaults to `var(--highcontrast-asset-icon-background-color, var(--mod-asset-folder-background-color, var(--spectrum-gray-200)))`, if not set.",
+ "control": "text",
+ "category": "Component"
+ },
+ "spectrum-asset-file-background": {
+ "value": "var(--highcontrast-asset-icon-background-color, var(--mod-asset-file-background-color, var(--spectrum-gray-25)))",
+ "description": "Defined in `.spectrum-Asset`.
Used by `.spectrum-Asset-fileBackground`.
Defaults to `var(--highcontrast-asset-icon-background-color, var(--mod-asset-file-background-color, var(--spectrum-gray-25)))`, if not set.",
+ "control": "text",
+ "category": "Component"
+ },
+ "spectrum-asset-folder-outline": {
+ "value": "var(--mod-asset-icon-outline-color, var(--spectrum-gray-500))",
+ "description": "Defined in `.spectrum-Asset`.
Used by `.spectrum-Asset-folderOutline`.
Defaults to `var(--mod-asset-icon-outline-color, var(--spectrum-gray-500))`, if not set.",
+ "control": "text",
+ "category": "Component"
+ },
+ "spectrum-asset-file-outline": {
+ "value": "var(--mod-asset-icon-outline-color, var(--spectrum-gray-500))",
+ "description": "Defined in `.spectrum-Asset`.
Used by `.spectrum-Asset-fileOutline`.
Defaults to `var(--mod-asset-icon-outline-color, var(--spectrum-gray-500))`, if not set.",
+ "control": "text",
+ "category": "Component"
+ }
+ },
+ "global": {
+ "spectrum-gray-200": {
+ "value": "light-dark(rgb(225, 225, 225), rgb(50, 50, 50))",
+ "description": "Used by `--spectrum-asset-folder-background`.",
+ "control": "text",
+ "category": "Global"
+ },
+ "spectrum-gray-25": {
+ "value": "light-dark(rgb(255, 255, 255), rgb(17, 17, 17))",
+ "description": "Used by `--spectrum-asset-file-background`.",
+ "control": "text",
+ "category": "Global"
+ },
+ "spectrum-gray-500": {
+ "value": "light-dark(rgb(143, 143, 143), rgb(109, 109, 109))",
+ "description": "Used by `--spectrum-asset-folder-outline`, `--spectrum-asset-file-outline`.",
+ "control": "text",
+ "category": "Global"
+ },
+ "spectrum-animation-duration-100": {
+ "description": "Used by `.spectrum-Asset-image`.",
+ "control": "text",
+ "category": "Global"
+ }
+ },
+ "passthroughs": {},
+ "high-contrast": {
+ "highcontrast-asset-icon-background-color": {
+ "value": "var(--mod-asset-file-background-color, var(--spectrum-gray-25))",
+ "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-gray-25))`, if not set.",
+ "control": "color"
+ }
+ }
}
diff --git a/components/asset/stories/asset.stories.js b/components/asset/stories/asset.stories.js
index 927c1009aad..ae1750dccd6 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,10 @@ export default {
parameters: {
packageJson,
metadata,
+ cssprops: {
+ ...metadata.modifiers,
+ ...metadata.component,
+ },
},
};
diff --git a/components/assetcard/dist/metadata.json b/components/assetcard/dist/metadata.json
index 94bf07de0af..4809f8fe418 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,149 +31,762 @@
".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"
+ ".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": {
+ "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": {
+ "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": {
+ "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": {
+ "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": {
+ "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": {
+ "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": {
+ "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": {
+ "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": {
+ "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": {
+ "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": {
+ "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": {
+ "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": {
+ "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": {
+ "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": {
+ "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": {
+ "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": {
+ "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": {
+ "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": {
+ "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": {
+ "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": {
+ "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": {
+ "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": {
+ "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": {
+ "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": {
+ "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": {
+ "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": {
+ "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": {
+ "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": {
+ "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": {
+ "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": {
+ "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": {
+ "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": {
+ "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": {
+ "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": {
+ "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": {
+ "description": "Used by `.spectrum-AssetCard-selectionIndicator`.
Defaults to `var(--spectrum-assetcard-selectionindicator-margin)`, if not set.",
+ "control": "text",
+ "category": "Modifier"
+ },
+ "mod-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": {
+ "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": {
+ "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": {
+ "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": {
+ "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": {
+ "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": {
+ "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": {
+ "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": {
+ "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": {
+ "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": {
+ "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-background-color": {
+ "value": "light-dark(rgb(243, 243, 243), rgb(34, 34, 34))",
+ "description": "Defined in `.spectrum-AssetCard`.
Used by `.spectrum-AssetCard-assetContainer`.
Defaults to `var(--spectrum-gray-75)`, if not set.",
+ "control": "color",
+ "category": "Component"
+ },
+ "spectrum-assetcard-asset-size": {
+ "value": "224px",
+ "description": "Defined in `.spectrum-AssetCard`.
Used by `.spectrum-AssetCard`, `.spectrum-AssetCard-assetContainer`.
Defaults to `224px`, if not set.",
+ "control": "text",
+ "category": "Component"
+ },
+ "spectrum-assetcard-overlay-background-color": {
+ "value": "rgb(27 127 245/10%)",
+ "description": "Defined in `.spectrum-AssetCard`.
Used by `.spectrum-AssetCard.is-drop-target .spectrum-AssetCard-selectionOverlay, .spectrum-AssetCard.is-selected .spectrum-AssetCard-selectionOverlay`.
Defaults to `rgb(27 127 245/10%)`, if not set.",
+ "control": "color",
+ "category": "Component"
+ },
+ "spectrum-assetcard-asset-animation-duration": {
+ "value": "var(--spectrum-animation-duration-100)",
+ "description": "Defined in `.spectrum-AssetCard`.
Used by `.spectrum-AssetCard-assetContainer`, `.spectrum-AssetCard-assetContainer:before`, `.spectrum-AssetCard-asset`, `.spectrum-AssetCard-selectionOverlay`, `.spectrum-AssetCard-selectionIndicator`.
Defaults to `var(--spectrum-animation-duration-100)`, if not set.",
+ "control": "text",
+ "category": "Component"
+ },
+ "spectrum-assetcard-asset-container-border-size": {
+ "value": "1px",
+ "description": "Defined in `.spectrum-AssetCard`.
Used by `.spectrum-AssetCard-assetContainer:after`.
Defaults to `1px`, if not set.",
+ "control": "text",
+ "category": "Component"
+ },
+ "spectrum-assetcard-header-margin-block-start": {
+ "value": "16px",
+ "description": "Defined in `.spectrum-AssetCard`.
Used by `.spectrum-AssetCard-header`.
Defaults to `var(--spectrum-spacing-300)`, if not set.",
+ "control": "text",
+ "category": "Component"
+ },
+ "spectrum-assetcard-border-radius": {
+ "value": "4px",
+ "description": "Defined in `.spectrum-AssetCard`.
Used by `.spectrum-AssetCard-assetContainer`, `.spectrum-AssetCard-asset, .spectrum-AssetCard-assetContainer:after`, `.spectrum-AssetCard-selectionOverlay`.
Defaults to `var(--spectrum-corner-radius-100)`, if not set.",
+ "control": "text",
+ "category": "Component"
+ },
+ "spectrum-assetcard-border-color": {
+ "value": "transparent",
+ "description": "Defined in `.spectrum-AssetCard`.
Used by `.spectrum-AssetCard-assetContainer:after`.
Defaults to `transparent`, if not set.",
+ "control": "color",
+ "category": "Component"
+ },
+ "spectrum-assetcard-border-color-hover": {
+ "value": "light-dark(rgb(143, 143, 143), rgb(109, 109, 109))",
+ "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(--spectrum-gray-500)`, if not set.",
+ "control": "color",
+ "category": "Component"
+ },
+ "spectrum-assetcard-border-color-down": {
+ "value": "light-dark(rgb(113, 113, 113), rgb(138, 138, 138))",
+ "description": "Defined in `.spectrum-AssetCard`.
Used by `.spectrum-AssetCard:active .spectrum-AssetCard-assetContainer:after`.
Defaults to `var(--spectrum-gray-600)`, if not set.",
+ "control": "color",
+ "category": "Component"
+ },
+ "spectrum-assetcard-focus-ring-gap": {
+ "value": "5px",
+ "description": "Defined in `.spectrum-AssetCard`.
Used by `.spectrum-AssetCard-assetContainer:before`.
Defaults to `5px`, if not set.",
+ "control": "text",
+ "category": "Component"
+ },
+ "spectrum-assetcard-focus-indicator-thickness": {
+ "value": "2px",
+ "description": "Defined in `.spectrum-AssetCard`.
Used by `.spectrum-AssetCard-assetContainer:before`.
Defaults to `var(--spectrum-focus-indicator-thickness)`, if not set.",
+ "control": "text",
+ "category": "Component"
+ },
+ "spectrum-assetcard-selectionindicator-size": {
+ "value": "40px",
+ "description": "Defined in `.spectrum-AssetCard`.
Used by `.spectrum-AssetCard-selectionIndicator`.
Defaults to `var(--spectrum-card-selection-background-size)`, if not set.",
+ "control": "text",
+ "category": "Component"
+ },
+ "spectrum-assetcard-selectionindicator-border-radius": {
+ "value": "4px",
+ "description": "Defined in `.spectrum-AssetCard`.
Used by `.spectrum-AssetCard-selectionIndicator`.
Defaults to `var(--spectrum-corner-radius-100)`, if not set.",
+ "control": "text",
+ "category": "Component"
+ },
+ "spectrum-assetcard-selectionindicator-offset-y": {
+ "value": "4px",
+ "description": "Defined in `.spectrum-AssetCard`.
Used by `.spectrum-AssetCard-selectionIndicator`.
Defaults to `4px`, if not set.",
+ "control": "text",
+ "category": "Component"
+ },
+ "spectrum-assetcard-selectionindicator-blur": {
+ "value": "6px",
+ "description": "Defined in `.spectrum-AssetCard`.
Used by `.spectrum-AssetCard-selectionIndicator`.
Defaults to `6px`, if not set.",
+ "control": "text",
+ "category": "Component"
+ },
+ "spectrum-assetcard-selectionindicator-color": {
+ "value": "rgb(255, 255, 255)",
+ "description": "Defined in `.spectrum-AssetCard`.
Used by `.spectrum-AssetCard-selectionIndicator`.
Defaults to `var(--spectrum-white)`, if not set.",
+ "control": "color",
+ "category": "Component"
+ },
+ "spectrum-assetcard-selectionindicator-font-weight": {
+ "value": "700",
+ "description": "Defined in `.spectrum-AssetCard`.
Used by `.spectrum-AssetCard-selectionIndicator`.
Defaults to `var(--spectrum-bold-font-weight)`, if not set.",
+ "control": "text",
+ "category": "Component"
+ },
+ "spectrum-assetcard-selectionindicator-font-size": {
+ "value": "20px",
+ "description": "Defined in `.spectrum-AssetCard`.
Used by `.spectrum-AssetCard-selectionIndicator`.
Defaults to `var(--spectrum-font-size-400)`, if not set.",
+ "control": "text",
+ "category": "Component"
+ },
+ "spectrum-assetcard-selectionindicator-background-color-default": {
+ "value": "rgb(var(--spectrum-gray-75-rgb), 0.9)",
+ "description": "Defined in `.spectrum-AssetCard`.
Used by `.spectrum-AssetCard--checkboxSelection .spectrum-AssetCard-selectionIndicator`.
Defaults to `rgb(var(--spectrum-gray-75-rgb), 0.9)`, if not set.",
+ "control": "color",
+ "category": "Component"
+ },
+ "spectrum-assetcard-selectionindicator-box-shadow-color": {
+ "value": "rgba(0, 0, 0, 0.15)",
+ "description": "Defined in `.spectrum-AssetCard`.
Used by `.spectrum-AssetCard-selectionIndicator`.
Defaults to `var(--spectrum-transparent-black-300)`, if not set.",
+ "control": "color",
+ "category": "Component"
+ },
+ "spectrum-assetcard-title-text-color": {
+ "value": "light-dark(rgb(19, 19, 19), rgb(242, 242, 242))",
+ "description": "Defined in `.spectrum-AssetCard`.
Used by `.spectrum-AssetCard-title`.
Defaults to `var(--spectrum-gray-900)`, if not set.",
+ "control": "color",
+ "category": "Component"
+ },
+ "spectrum-assetcard-title-font-family": {
+ "value": "var(--spectrum-cjk-font-family-stack)",
+ "description": "Defined in `.spectrum-AssetCard`, `.spectrum-AssetCard:lang(ja), .spectrum-AssetCard:lang(ko), .spectrum-AssetCard:lang(zh)`.
Used by `.spectrum-AssetCard-title`.
Defaults to `var(--spectrum-cjk-font-family-stack)`, if not set.",
+ "control": "text",
+ "category": "Component"
+ },
+ "spectrum-assetcard-title-font-weight": {
+ "value": "800",
+ "description": "Defined in `.spectrum-AssetCard`, `.spectrum-AssetCard:lang(ja), .spectrum-AssetCard:lang(ko), .spectrum-AssetCard:lang(zh)`.
Used by `.spectrum-AssetCard-title`.
Defaults to `var(--spectrum-heading-cjk-font-weight)`, if not set.",
+ "control": "text",
+ "category": "Component"
+ },
+ "spectrum-assetcard-title-font-style": {
+ "value": "normal",
+ "description": "Defined in `.spectrum-AssetCard`, `.spectrum-AssetCard:lang(ja), .spectrum-AssetCard:lang(ko), .spectrum-AssetCard:lang(zh)`.
Used by `.spectrum-AssetCard-title`.
Defaults to `var(--spectrum-heading-cjk-font-style)`, if not set.",
+ "control": "text",
+ "category": "Component"
+ },
+ "spectrum-assetcard-title-line-height": {
+ "value": "1.5",
+ "description": "Defined in `.spectrum-AssetCard`, `.spectrum-AssetCard:lang(ja), .spectrum-AssetCard:lang(ko), .spectrum-AssetCard:lang(zh)`.
Used by `.spectrum-AssetCard-title`.
Defaults to `var(--spectrum-heading-cjk-line-height)`, if not set.",
+ "control": "text",
+ "category": "Component"
+ },
+ "spectrum-assetcard-title-letter-spacing": {
+ "value": "0em",
+ "description": "Defined in `.spectrum-AssetCard`, `.spectrum-AssetCard:lang(ja), .spectrum-AssetCard:lang(ko), .spectrum-AssetCard:lang(zh)`.
Used by `.spectrum-AssetCard-title`.
Defaults to `var(--spectrum-cjk-letter-spacing)`, if not set.",
+ "control": "text",
+ "category": "Component"
+ },
+ "spectrum-assetcard-header-content-text-color": {
+ "value": "light-dark(rgb(19, 19, 19), rgb(242, 242, 242))",
+ "description": "Defined in `.spectrum-AssetCard`.
Used by `.spectrum-AssetCard-headerContent`.
Defaults to `var(--spectrum-gray-900)`, if not set.",
+ "control": "color",
+ "category": "Component"
+ },
+ "spectrum-assetcard-header-content-font-family": {
+ "value": "var(--spectrum-cjk-font-family-stack)",
+ "description": "Defined in `.spectrum-AssetCard`, `.spectrum-AssetCard:lang(ja), .spectrum-AssetCard:lang(ko), .spectrum-AssetCard:lang(zh)`.
Used by `.spectrum-AssetCard-headerContent`.
Defaults to `var(--spectrum-cjk-font-family-stack)`, if not set.",
+ "control": "text",
+ "category": "Component"
+ },
+ "spectrum-assetcard-header-content-font-weight": {
+ "value": "400",
+ "description": "Defined in `.spectrum-AssetCard`, `.spectrum-AssetCard:lang(ja), .spectrum-AssetCard:lang(ko), .spectrum-AssetCard:lang(zh)`.
Used by `.spectrum-AssetCard-headerContent`.
Defaults to `var(--spectrum-body-cjk-font-weight)`, if not set.",
+ "control": "text",
+ "category": "Component"
+ },
+ "spectrum-assetcard-header-content-font-style": {
+ "value": "normal",
+ "description": "Defined in `.spectrum-AssetCard`, `.spectrum-AssetCard:lang(ja), .spectrum-AssetCard:lang(ko), .spectrum-AssetCard:lang(zh)`.
Used by `.spectrum-AssetCard-headerContent`.
Defaults to `var(--spectrum-body-cjk-font-style)`, if not set.",
+ "control": "text",
+ "category": "Component"
+ },
+ "spectrum-assetcard-header-content-line-height": {
+ "value": "1.7",
+ "description": "Defined in `.spectrum-AssetCard`, `.spectrum-AssetCard:lang(ja), .spectrum-AssetCard:lang(ko), .spectrum-AssetCard:lang(zh)`.
Used by `.spectrum-AssetCard-headerContent`.
Defaults to `var(--spectrum-body-cjk-line-height)`, if not set.",
+ "control": "text",
+ "category": "Component"
+ },
+ "spectrum-assetcard-header-content-letter-spacing": {
+ "value": "0em",
+ "description": "Defined in `.spectrum-AssetCard`, `.spectrum-AssetCard:lang(ja), .spectrum-AssetCard:lang(ko), .spectrum-AssetCard:lang(zh)`.
Used by `.spectrum-AssetCard-headerContent`.
Defaults to `var(--spectrum-cjk-letter-spacing)`, if not set.",
+ "control": "text",
+ "category": "Component"
+ },
+ "spectrum-assetcard-content-text-color": {
+ "value": "light-dark(rgb(80, 80, 80), rgb(175, 175, 175))",
+ "description": "Defined in `.spectrum-AssetCard`.
Used by `.spectrum-AssetCard-content`.
Defaults to `var(--spectrum-gray-700)`, if not set.",
+ "control": "color",
+ "category": "Component"
+ },
+ "spectrum-assetcard-content-font-family": {
+ "value": "var(--spectrum-cjk-font-family-stack)",
+ "description": "Defined in `.spectrum-AssetCard`, `.spectrum-AssetCard:lang(ja), .spectrum-AssetCard:lang(ko), .spectrum-AssetCard:lang(zh)`.
Used by `.spectrum-AssetCard-content`.
Defaults to `var(--spectrum-cjk-font-family-stack)`, if not set.",
+ "control": "text",
+ "category": "Component"
+ },
+ "spectrum-assetcard-content-font-weight": {
+ "value": "400",
+ "description": "Defined in `.spectrum-AssetCard`, `.spectrum-AssetCard:lang(ja), .spectrum-AssetCard:lang(ko), .spectrum-AssetCard:lang(zh)`.
Used by `.spectrum-AssetCard-content`.
Defaults to `var(--spectrum-body-cjk-font-weight)`, if not set.",
+ "control": "text",
+ "category": "Component"
+ },
+ "spectrum-assetcard-content-font-style": {
+ "value": "normal",
+ "description": "Defined in `.spectrum-AssetCard`, `.spectrum-AssetCard:lang(ja), .spectrum-AssetCard:lang(ko), .spectrum-AssetCard:lang(zh)`.
Used by `.spectrum-AssetCard-content`.
Defaults to `var(--spectrum-body-cjk-font-style)`, if not set.",
+ "control": "text",
+ "category": "Component"
+ },
+ "spectrum-assetcard-content-line-height": {
+ "value": "1.7",
+ "description": "Defined in `.spectrum-AssetCard`, `.spectrum-AssetCard:lang(ja), .spectrum-AssetCard:lang(ko), .spectrum-AssetCard:lang(zh)`.
Used by `.spectrum-AssetCard-content`.
Defaults to `var(--spectrum-body-cjk-line-height)`, if not set.",
+ "control": "text",
+ "category": "Component"
+ },
+ "spectrum-assetcard-content-letter-spacing": {
+ "value": "0em",
+ "description": "Defined in `.spectrum-AssetCard`, `.spectrum-AssetCard:lang(ja), .spectrum-AssetCard:lang(ko), .spectrum-AssetCard:lang(zh)`.
Used by `.spectrum-AssetCard-content`.
Defaults to `var(--spectrum-cjk-letter-spacing)`, if not set.",
+ "control": "text",
+ "category": "Component"
+ },
+ "spectrum-assetcard-content-margin-block-start": {
+ "value": "4px",
+ "description": "Defined in `.spectrum-AssetCard`.
Used by `.spectrum-AssetCard-content`.
Defaults to `var(--spectrum-spacing-75)`, if not set.",
+ "control": "text",
+ "category": "Component"
+ },
+ "spectrum-assetcard-title-font-size": {
+ "value": "var(--spectrum-font-size-200)",
+ "description": "Defined in `.spectrum-AssetCard:lang(ja), .spectrum-AssetCard:lang(ko), .spectrum-AssetCard:lang(zh)`.
Used by `.spectrum-AssetCard-title`.
Defaults to `var(--spectrum-heading-cjk-size-xs)`, if not set.",
+ "control": "text",
+ "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-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-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-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 `--spectrum-assetcard-background-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": "4px",
+ "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": "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-75-rgb": {
+ "description": "Used by `--spectrum-assetcard-selectionindicator-background-color-default`.",
+ "control": "text",
+ "category": "Global"
+ },
+ "spectrum-transparent-black-300": {
+ "value": "rgba(0, 0, 0, 0.15)",
+ "description": "Used by `--spectrum-assetcard-selectionindicator-box-shadow-color`.",
+ "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": "800",
+ "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": "0em",
+ "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"
+ }
+ },
+ "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..cdcf7c292fc 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,10 @@ export default {
},
packageJson,
metadata,
+ cssprops: {
+ ...metadata.modifiers,
+ ...metadata.component,
+ },
},
};
diff --git a/components/assetcard/stories/template.js b/components/assetcard/stories/template.js
index 1b44be4e568..5ca467192ae 100644
--- a/components/assetcard/stories/template.js
+++ b/components/assetcard/stories/template.js
@@ -11,6 +11,7 @@ import "../index.css";
export const Template = ({
rootClass = "spectrum-AssetCard",
+ id = getRandomId("asset-card"),
image,
exampleImage,
title,
@@ -22,7 +23,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 0da89f4ae57..0c84f8e6a0b 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,81 +21,331 @@
".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)"
],
- "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"
- ],
- "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": {
+ "description": "Used by `.spectrum-AssetList-item`.
Defaults to `var(--spectrum-assetlist-label-color)`, if not set.",
+ "control": "color",
+ "category": "Modifier"
+ },
+ "mod-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": {
+ "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": {
+ "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": {
+ "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": {
+ "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": {
+ "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": {
+ "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": {
+ "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": {
+ "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": {
+ "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": {
+ "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": {
+ "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": {
+ "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": {
+ "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": {
+ "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": {
+ "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": {
+ "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": {
+ "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": {
+ "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-item-background-color-down": {
+ "value": "light-dark(rgb(225, 225, 225), rgb(50, 50, 50))",
+ "description": "Defined in `.spectrum-AssetList`.
Used by `.spectrum-AssetList-item.is-navigated, .spectrum-AssetList-item.is-navigated:focus`, `.spectrum-AssetList-item.is-navigated:hover`.
Defaults to `var(--spectrum-gray-200)`, if not set.",
+ "control": "color",
+ "category": "Component"
+ },
+ "spectrum-assetlist-item-background-color-hover": {
+ "value": "light-dark(rgb(233, 233, 233), rgb(44, 44, 44))",
+ "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`.
Defaults to `var(--spectrum-gray-100)`, if not set.",
+ "control": "color",
+ "category": "Component"
+ },
+ "spectrum-assetlist-width": {
+ "value": "272px",
+ "description": "Defined in `.spectrum-AssetList`.
Used by `.spectrum-AssetList-item`.
Defaults to `272px`, if not set.",
+ "control": "text",
+ "category": "Component"
+ },
+ "spectrum-assetlist-child-indicator-animation": {
+ "value": "var(--spectrum-animation-duration-100)",
+ "description": "Defined in `.spectrum-AssetList`.
Used by `.spectrum-AssetList-itemChildIndicator`.
Defaults to `var(--spectrum-animation-duration-100)`, if not set.",
+ "control": "text",
+ "category": "Component"
+ },
+ "spectrum-assetlist-item-height": {
+ "value": "40px",
+ "description": "Defined in `.spectrum-AssetList`.
Used by `.spectrum-AssetList-item, .spectrum-AssetList-item:before`.
Defaults to `var(--spectrum-spacing-600)`, if not set.",
+ "control": "text",
+ "category": "Component"
+ },
+ "spectrum-assetlist-item-padding-inline-start": {
+ "value": "16px",
+ "description": "Defined in `.spectrum-AssetList`.
Used by `.spectrum-AssetList-item`.
Defaults to `var(--spectrum-spacing-300)`, if not set.",
+ "control": "text",
+ "category": "Component"
+ },
+ "spectrum-assetlist-item-padding-inline-end": {
+ "value": "16px",
+ "description": "Defined in `.spectrum-AssetList`.
Used by `.spectrum-AssetList-item`.
Defaults to `var(--spectrum-spacing-300)`, if not set.",
+ "control": "text",
+ "category": "Component"
+ },
+ "spectrum-assetlist-item-margin-block-end": {
+ "value": "4px",
+ "description": "Defined in `.spectrum-AssetList`.
Used by `.spectrum-AssetList-item`.
Defaults to `var(--spectrum-spacing-75)`, if not set.",
+ "control": "text",
+ "category": "Component"
+ },
+ "spectrum-assetlist-item-border-radius": {
+ "value": "4px",
+ "description": "Defined in `.spectrum-AssetList`.
Used by `.spectrum-AssetList-item, .spectrum-AssetList-item:before`.
Defaults to `var(--spectrum-spacing-75)`, if not set.",
+ "control": "text",
+ "category": "Component"
+ },
+ "spectrum-assetlist-item-animation": {
+ "value": "var(--spectrum-animation-duration-100)",
+ "description": "Defined in `.spectrum-AssetList`.
Used by `.spectrum-AssetList-item`.
Defaults to `var(--spectrum-animation-duration-100)`, if not set.",
+ "control": "text",
+ "category": "Component"
+ },
+ "spectrum-assetlist-item-font-size": {
+ "value": "14px",
+ "description": "Defined in `.spectrum-AssetList`.
Used by `.spectrum-AssetList-item`.
Defaults to `var(--spectrum-font-size-100)`, if not set.",
+ "control": "text",
+ "category": "Component"
+ },
+ "spectrum-assetlist-item-font-weight": {
+ "value": "400",
+ "description": "Defined in `.spectrum-AssetList`.
Used by `.spectrum-AssetList-item`.
Defaults to `var(--spectrum-regular-font-weight)`, if not set.",
+ "control": "text",
+ "category": "Component"
+ },
+ "spectrum-assetlist-thumbnail-width": {
+ "value": "24px",
+ "description": "Defined in `.spectrum-AssetList`.
Used by `.spectrum-AssetList-item .spectrum-AssetList-itemThumbnail`.
Defaults to `var(--spectrum-spacing-400)`, if not set.",
+ "control": "text",
+ "category": "Component"
+ },
+ "spectrum-assetlist-thumbnail-height": {
+ "value": "24px",
+ "description": "Defined in `.spectrum-AssetList`.
Used by `.spectrum-AssetList-item .spectrum-AssetList-itemThumbnail`.
Defaults to `var(--spectrum-spacing-400)`, if not set.",
+ "control": "text",
+ "category": "Component"
+ },
+ "spectrum-assetlist-thumbnail-margin-inline-start": {
+ "value": "8px",
+ "description": "Defined in `.spectrum-AssetList`.
Used by `.spectrum-AssetList-item .spectrum-AssetList-itemThumbnail`.
Defaults to `var(--spectrum-spacing-100)`, if not set.",
+ "control": "text",
+ "category": "Component"
+ },
+ "spectrum-assetlist-item-label-padding-inline-start": {
+ "value": "8px",
+ "description": "Defined in `.spectrum-AssetList`.
Used by `.spectrum-AssetList-itemLabel`.
Defaults to `var(--spectrum-spacing-100)`, if not set.",
+ "control": "text",
+ "category": "Component"
+ },
+ "spectrum-assetlist-label-color": {
+ "value": "var(--spectrum-gray-800)",
+ "description": "Defined in `.spectrum-AssetList`.
Used by `.spectrum-AssetList-item`.
Defaults to `var(--spectrum-neutral-content-color-default)`, if not set.",
+ "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-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 `--spectrum-assetlist-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 `--spectrum-assetlist-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": {
+ "value": "matrix(-1, 0, 0, 1, 0, 0)",
+ "description": "Defined in `.spectrum-AssetList:dir(rtl)`.
Used by `.spectrum-AssetList-itemChildIndicator`.
Defaults to `matrix(-1, 0, 0, 1, 0, 0)`, if not set.",
+ "control": "text",
+ "category": "Global"
+ }
+ },
+ "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..ddbcd5438fb 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,10 @@ export default {
},
packageJson,
metadata,
+ cssprops: {
+ ...metadata.modifiers,
+ ...metadata.component,
+ },
},
};
diff --git a/components/assetlist/stories/template.js b/components/assetlist/stories/template.js
index f5c6d9731af..22d373ae292 100644
--- a/components/assetlist/stories/template.js
+++ b/components/assetlist/stories/template.js
@@ -73,9 +73,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": {
+ "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": {
+ "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": {
+ "description": "Used by `.spectrum-Avatar`.
Defaults to `var(--spectrum-avatar-color-opacity)`, if not set.",
+ "control": "color",
+ "category": "Modifier"
+ },
+ "mod-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": {
+ "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": {
+ "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": {
+ "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": {
+ "value": "1",
+ "description": "Defined in `.spectrum-Avatar`.
Used by `.spectrum-Avatar`.
Defaults to `1`, if not set.",
+ "control": "color",
+ "category": "Component"
+ },
+ "spectrum-avatar-inline-size": {
+ "value": "104px",
+ "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`, `.spectrum-Avatar--size800`, `.spectrum-Avatar--size900`, `.spectrum-Avatar--size1000`, `.spectrum-Avatar--size1100`, `.spectrum-Avatar--size1200`, `.spectrum-Avatar--size1300`, `.spectrum-Avatar--size1400`, `.spectrum-Avatar--size1500`.
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-size-1500)`, if not set.",
+ "control": "text",
+ "category": "Component"
+ },
+ "spectrum-avatar-size-100": {
+ "value": "24px",
+ "description": "Used by `--spectrum-avatar-inline-size`, `--spectrum-avatar-block-size`.",
+ "control": "text",
+ "category": "Component"
+ },
+ "spectrum-avatar-block-size": {
+ "value": "104px",
+ "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`, `.spectrum-Avatar--size800`, `.spectrum-Avatar--size900`, `.spectrum-Avatar--size1000`, `.spectrum-Avatar--size1100`, `.spectrum-Avatar--size1200`, `.spectrum-Avatar--size1300`, `.spectrum-Avatar--size1400`, `.spectrum-Avatar--size1500`.
Used by `--spectrum-avatar-border-radius`, `.spectrum-Avatar`, `.spectrum-Avatar-image`.
Defaults to `var(--spectrum-avatar-size-1500)`, if not set.",
+ "control": "text",
+ "category": "Component"
+ },
+ "spectrum-avatar-border-radius": {
+ "value": "var(--spectrum-avatar-block-size)",
+ "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`.
Defaults to `var(--spectrum-avatar-block-size)`, if not set.",
+ "control": "text",
+ "category": "Component"
+ },
+ "spectrum-avatar-border-thickness": {
+ "value": "1px",
+ "description": "Defined in `.spectrum-Avatar`.
Used by `.spectrum-Avatar`.
Defaults to `var(--spectrum-avatar-border-width)`, if not set.",
+ "control": "text",
+ "category": "Component"
+ },
+ "spectrum-avatar-border-width": {
+ "value": "1px",
+ "description": "Used by `--spectrum-avatar-border-thickness`.",
+ "control": "text",
+ "category": "Component"
+ },
+ "spectrum-avatar-border-color-default": {
+ "value": "var(--spectrum-gray-25)",
+ "description": "Defined in `.spectrum-Avatar`.
Used by `.spectrum-Avatar`.
Defaults to `var(--spectrum-avatar-border-color)`, if not set.",
+ "control": "color",
+ "category": "Component"
+ },
+ "spectrum-avatar-border-color": {
+ "value": "var(--spectrum-gray-25)",
+ "description": "Used by `--spectrum-avatar-border-color-default`.",
+ "control": "color",
+ "category": "Component"
+ },
+ "spectrum-avatar-focus-indicator-thickness": {
+ "value": "2px",
+ "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(--spectrum-focus-indicator-thickness)`, if not set.",
+ "control": "text",
+ "category": "Component"
+ },
+ "spectrum-avatar-focus-indicator-gap": {
+ "value": "2px",
+ "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(--spectrum-focus-indicator-gap)`, if not set.",
+ "control": "text",
+ "category": "Component"
+ },
+ "spectrum-avatar-focus-indicator-color": {
+ "value": "var(--spectrum-blue-800)",
+ "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(--spectrum-focus-indicator-color)`, if not set.",
+ "control": "color",
+ "category": "Component"
+ },
+ "spectrum-avatar-color-opacity-disabled": {
+ "value": "0.3",
+ "description": "Defined in `.spectrum-Avatar`.
Used by `.spectrum-Avatar.is-disabled`.
Defaults to `var(--spectrum-avatar-opacity-disabled)`, if not set.",
+ "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": "20px",
+ "description": "Used by `--spectrum-avatar-inline-size`, `--spectrum-avatar-block-size`.",
+ "control": "text",
+ "category": "Component"
+ },
+ "spectrum-avatar-size-200": {
+ "value": "28px",
+ "description": "Used by `--spectrum-avatar-inline-size`, `--spectrum-avatar-block-size`.",
+ "control": "text",
+ "category": "Component"
+ },
+ "spectrum-avatar-size-300": {
+ "value": "32px",
+ "description": "Used by `--spectrum-avatar-inline-size`, `--spectrum-avatar-block-size`.",
+ "control": "text",
+ "category": "Component"
+ },
+ "spectrum-avatar-size-400": {
+ "value": "36px",
+ "description": "Used by `--spectrum-avatar-inline-size`, `--spectrum-avatar-block-size`.",
+ "control": "text",
+ "category": "Component"
+ },
+ "spectrum-avatar-size-500": {
+ "value": "40px",
+ "description": "Used by `--spectrum-avatar-inline-size`, `--spectrum-avatar-block-size`.",
+ "control": "text",
+ "category": "Component"
+ },
+ "spectrum-avatar-size-600": {
+ "value": "44px",
+ "description": "Used by `--spectrum-avatar-inline-size`, `--spectrum-avatar-block-size`.",
+ "control": "text",
+ "category": "Component"
+ },
+ "spectrum-avatar-size-700": {
+ "value": "48px",
+ "description": "Used by `--spectrum-avatar-inline-size`, `--spectrum-avatar-block-size`.",
+ "control": "text",
+ "category": "Component"
+ },
+ "spectrum-avatar-size-800": {
+ "value": "52px",
+ "description": "Used by `--spectrum-avatar-inline-size`, `--spectrum-avatar-block-size`.",
+ "control": "text",
+ "category": "Component"
+ },
+ "spectrum-avatar-size-900": {
+ "value": "56px",
+ "description": "Used by `--spectrum-avatar-inline-size`, `--spectrum-avatar-block-size`.",
+ "control": "text",
+ "category": "Component"
+ },
+ "spectrum-avatar-size-1000": {
+ "value": "64px",
+ "description": "Used by `--spectrum-avatar-inline-size`, `--spectrum-avatar-block-size`.",
+ "control": "text",
+ "category": "Component"
+ },
+ "spectrum-avatar-size-1100": {
+ "value": "72px",
+ "description": "Used by `--spectrum-avatar-inline-size`, `--spectrum-avatar-block-size`.",
+ "control": "text",
+ "category": "Component"
+ },
+ "spectrum-avatar-size-1200": {
+ "value": "80px",
+ "description": "Used by `--spectrum-avatar-inline-size`, `--spectrum-avatar-block-size`.",
+ "control": "text",
+ "category": "Component"
+ },
+ "spectrum-avatar-size-1300": {
+ "value": "88px",
+ "description": "Used by `--spectrum-avatar-inline-size`, `--spectrum-avatar-block-size`.",
+ "control": "text",
+ "category": "Component"
+ },
+ "spectrum-avatar-size-1400": {
+ "value": "96px",
+ "description": "Used by `--spectrum-avatar-inline-size`, `--spectrum-avatar-block-size`.",
+ "control": "text",
+ "category": "Component"
+ },
+ "spectrum-avatar-size-1500": {
+ "value": "104px",
+ "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"
+ }
+ },
+ "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 b3f4d56aea8..7d95d915c76 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.
*/
@@ -62,6 +64,10 @@ export default {
status: {
type: "migrated",
},
+ cssprops: {
+ ...metadata.modifiers,
+ ...metadata.component,
+ },
},
tags: ["migrated"],
};
diff --git a/components/badge/dist/metadata.json b/components/badge/dist/metadata.json
index 29aa729974a..927d9135c9e 100644
--- a/components/badge/dist/metadata.json
+++ b/components/badge/dist/metadata.json
@@ -32,13 +32,13 @@
".spectrum-Badge--sizeL",
".spectrum-Badge--sizeS",
".spectrum-Badge--sizeXL",
+ ".spectrum-Badge--style-outline:is(.spectrum-Badge--neutral, .spectrum-Badge--accent, .spectrum-Badge--informative, .spectrum-Badge--negative, .spectrum-Badge--positive, .spectrum-Badge--notice)",
".spectrum-Badge--style-outline.spectrum-Badge--accent",
".spectrum-Badge--style-outline.spectrum-Badge--informative",
".spectrum-Badge--style-outline.spectrum-Badge--negative",
".spectrum-Badge--style-outline.spectrum-Badge--neutral",
".spectrum-Badge--style-outline.spectrum-Badge--notice",
".spectrum-Badge--style-outline.spectrum-Badge--positive",
- ".spectrum-Badge--style-outline:is(.spectrum-Badge--neutral, .spectrum-Badge--accent, .spectrum-Badge--informative, .spectrum-Badge--negative, .spectrum-Badge--positive, .spectrum-Badge--notice)",
".spectrum-Badge--style-subtle",
".spectrum-Badge--style-subtle.spectrum-Badge--accent",
".spectrum-Badge--style-subtle.spectrum-Badge--blue",
@@ -75,269 +75,1485 @@
".spectrum-Badge-label:lang(ko)",
".spectrum-Badge-label:lang(zh)"
],
- "modifiers": [
- "--mod-badge-background-color-accent",
- "--mod-badge-background-color-blue",
- "--mod-badge-background-color-brown",
- "--mod-badge-background-color-celery",
- "--mod-badge-background-color-chartreuse",
- "--mod-badge-background-color-cinnamon",
- "--mod-badge-background-color-cyan",
- "--mod-badge-background-color-default",
- "--mod-badge-background-color-fuchsia",
- "--mod-badge-background-color-gray",
- "--mod-badge-background-color-green",
- "--mod-badge-background-color-indigo",
- "--mod-badge-background-color-informative",
- "--mod-badge-background-color-magenta",
- "--mod-badge-background-color-negative",
- "--mod-badge-background-color-notice",
- "--mod-badge-background-color-orange",
- "--mod-badge-background-color-pink",
- "--mod-badge-background-color-positive",
- "--mod-badge-background-color-purple",
- "--mod-badge-background-color-red",
- "--mod-badge-background-color-seafoam",
- "--mod-badge-background-color-silver",
- "--mod-badge-background-color-turquoise",
- "--mod-badge-background-color-yellow",
- "--mod-badge-border-color",
- "--mod-badge-border-width",
- "--mod-badge-corner-radius",
- "--mod-badge-font-size",
- "--mod-badge-height",
- "--mod-badge-icon-only-spacing-horizontal",
- "--mod-badge-icon-spacing-horizontal",
- "--mod-badge-icon-spacing-vertical-top",
- "--mod-badge-icon-text-spacing",
- "--mod-badge-label-icon-color",
- "--mod-badge-label-spacing-horizontal",
- "--mod-badge-label-spacing-vertical-bottom",
- "--mod-badge-label-spacing-vertical-top",
- "--mod-badge-line-height",
- "--mod-badge-line-height-cjk",
- "--mod-badge-outline-background-color-default",
- "--mod-badge-outline-border-color-accent",
- "--mod-badge-outline-border-color-informative",
- "--mod-badge-outline-border-color-negative",
- "--mod-badge-outline-border-color-neutral",
- "--mod-badge-outline-border-color-notice",
- "--mod-badge-outline-border-color-positive",
- "--mod-badge-outline-label-icon-color",
- "--mod-badge-subtle-background-color-accent",
- "--mod-badge-subtle-background-color-blue",
- "--mod-badge-subtle-background-color-brown",
- "--mod-badge-subtle-background-color-celery",
- "--mod-badge-subtle-background-color-chartreuse",
- "--mod-badge-subtle-background-color-cinnamon",
- "--mod-badge-subtle-background-color-cyan",
- "--mod-badge-subtle-background-color-default",
- "--mod-badge-subtle-background-color-fuchsia",
- "--mod-badge-subtle-background-color-gray",
- "--mod-badge-subtle-background-color-green",
- "--mod-badge-subtle-background-color-indigo",
- "--mod-badge-subtle-background-color-informative",
- "--mod-badge-subtle-background-color-magenta",
- "--mod-badge-subtle-background-color-negative",
- "--mod-badge-subtle-background-color-notice",
- "--mod-badge-subtle-background-color-orange",
- "--mod-badge-subtle-background-color-pink",
- "--mod-badge-subtle-background-color-positive",
- "--mod-badge-subtle-background-color-purple",
- "--mod-badge-subtle-background-color-red",
- "--mod-badge-subtle-background-color-seafoam",
- "--mod-badge-subtle-background-color-silver",
- "--mod-badge-subtle-background-color-turquoise",
- "--mod-badge-subtle-background-color-yellow",
- "--mod-badge-subtle-label-icon-color",
- "--mod-badge-workflow-icon-size"
- ],
- "component": [
- "--spectrum-badge-background-color-accent",
- "--spectrum-badge-background-color-blue",
- "--spectrum-badge-background-color-brown",
- "--spectrum-badge-background-color-celery",
- "--spectrum-badge-background-color-chartreuse",
- "--spectrum-badge-background-color-cinnamon",
- "--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-pink",
- "--spectrum-badge-background-color-positive",
- "--spectrum-badge-background-color-purple",
- "--spectrum-badge-background-color-red",
- "--spectrum-badge-background-color-seafoam",
- "--spectrum-badge-background-color-silver",
- "--spectrum-badge-background-color-turquoise",
- "--spectrum-badge-background-color-yellow",
- "--spectrum-badge-border-color",
- "--spectrum-badge-border-width",
- "--spectrum-badge-corner-radius",
- "--spectrum-badge-font-size",
- "--spectrum-badge-font-weight",
- "--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-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-outline-background-color",
- "--spectrum-badge-outline-border-color-accent",
- "--spectrum-badge-outline-border-color-informative",
- "--spectrum-badge-outline-border-color-negative",
- "--spectrum-badge-outline-border-color-neutral",
- "--spectrum-badge-outline-border-color-notice",
- "--spectrum-badge-outline-border-color-positive",
- "--spectrum-badge-outline-label-icon-color",
- "--spectrum-badge-subtle-background-color-accent",
- "--spectrum-badge-subtle-background-color-blue",
- "--spectrum-badge-subtle-background-color-brown",
- "--spectrum-badge-subtle-background-color-celery",
- "--spectrum-badge-subtle-background-color-chartreuse",
- "--spectrum-badge-subtle-background-color-cinnamon",
- "--spectrum-badge-subtle-background-color-cyan",
- "--spectrum-badge-subtle-background-color-default",
- "--spectrum-badge-subtle-background-color-fuchsia",
- "--spectrum-badge-subtle-background-color-gray",
- "--spectrum-badge-subtle-background-color-green",
- "--spectrum-badge-subtle-background-color-indigo",
- "--spectrum-badge-subtle-background-color-informative",
- "--spectrum-badge-subtle-background-color-magenta",
- "--spectrum-badge-subtle-background-color-negative",
- "--spectrum-badge-subtle-background-color-notice",
- "--spectrum-badge-subtle-background-color-orange",
- "--spectrum-badge-subtle-background-color-pink",
- "--spectrum-badge-subtle-background-color-positive",
- "--spectrum-badge-subtle-background-color-purple",
- "--spectrum-badge-subtle-background-color-red",
- "--spectrum-badge-subtle-background-color-seafoam",
- "--spectrum-badge-subtle-background-color-silver",
- "--spectrum-badge-subtle-background-color-turquoise",
- "--spectrum-badge-subtle-background-color-yellow",
- "--spectrum-badge-subtle-label-icon-color",
- "--spectrum-badge-workflow-icon-size"
- ],
- "global": [
- "--spectrum-accent-background-color-default",
- "--spectrum-accent-subtle-background-color-default",
- "--spectrum-accent-visual-color",
- "--spectrum-background-layer-2-color",
- "--spectrum-black",
- "--spectrum-blue-background-color-default",
- "--spectrum-blue-subtle-background-color-default",
- "--spectrum-border-width-200",
- "--spectrum-brown-background-color-default",
- "--spectrum-brown-subtle-background-color-default",
- "--spectrum-celery-background-color-default",
- "--spectrum-celery-subtle-background-color-default",
- "--spectrum-chartreuse-background-color-default",
- "--spectrum-chartreuse-subtle-background-color-default",
- "--spectrum-cinnamon-background-color-default",
- "--spectrum-cinnamon-subtle-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-medium-size-extra-large",
- "--spectrum-corner-radius-medium-size-large",
- "--spectrum-corner-radius-medium-size-medium",
- "--spectrum-corner-radius-medium-size-small",
- "--spectrum-cyan-background-color-default",
- "--spectrum-cyan-subtle-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-fuchsia-subtle-background-color-default",
- "--spectrum-gray-1000",
- "--spectrum-gray-background-color-default",
- "--spectrum-gray-subtle-background-color-default",
- "--spectrum-green-background-color-default",
- "--spectrum-green-subtle-background-color-default",
- "--spectrum-indigo-background-color-default",
- "--spectrum-indigo-subtle-background-color-default",
- "--spectrum-informative-background-color-default",
- "--spectrum-informative-subtle-background-color-default",
- "--spectrum-informative-visual-color",
- "--spectrum-line-height-100",
- "--spectrum-magenta-background-color-default",
- "--spectrum-magenta-subtle-background-color-default",
- "--spectrum-medium-font-weight",
- "--spectrum-negative-background-color-default",
- "--spectrum-negative-subtle-background-color-default",
- "--spectrum-negative-visual-color",
- "--spectrum-neutral-subdued-background-color-default",
- "--spectrum-neutral-subtle-background-color-default",
- "--spectrum-neutral-visual-color",
- "--spectrum-notice-background-color-default",
- "--spectrum-notice-subtle-background-color-default",
- "--spectrum-notice-visual-color",
- "--spectrum-orange-background-color-default",
- "--spectrum-orange-subtle-background-color-default",
- "--spectrum-pink-background-color-default",
- "--spectrum-pink-subtle-background-color-default",
- "--spectrum-positive-background-color-default",
- "--spectrum-positive-subtle-background-color-default",
- "--spectrum-positive-visual-color",
- "--spectrum-purple-background-color-default",
- "--spectrum-purple-subtle-background-color-default",
- "--spectrum-red-background-color-default",
- "--spectrum-red-subtle-background-color-default",
- "--spectrum-seafoam-background-color-default",
- "--spectrum-seafoam-subtle-background-color-default",
- "--spectrum-silver-background-color-default",
- "--spectrum-silver-subtle-background-color-default",
- "--spectrum-text-to-visual-100",
- "--spectrum-text-to-visual-200",
- "--spectrum-text-to-visual-300",
- "--spectrum-text-to-visual-75",
- "--spectrum-turquoise-background-color-default",
- "--spectrum-turquoise-subtle-background-color-default",
- "--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",
- "--spectrum-yellow-subtle-background-color-default"
- ],
- "passthroughs": [],
- "high-contrast": ["--highcontrast-badge-border-color"]
+ "modifiers": {
+ "mod-badge-border-width": {
+ "description": "Used by `--spectrum-badge-border-width`.
Defaults to `var(--spectrum-border-width-200)`, if not set.",
+ "control": "text",
+ "category": "Modifier"
+ },
+ "mod-badge-height": {
+ "description": "Used by `.spectrum-Badge`.
Defaults to `var(--spectrum-badge-height)`, if not set.",
+ "control": "text",
+ "category": "Modifier"
+ },
+ "mod-badge-border-color": {
+ "description": "Used by `.spectrum-Badge`.
Defaults to `var(--spectrum-badge-border-color)`, if not set.",
+ "control": "color",
+ "category": "Modifier"
+ },
+ "mod-badge-corner-radius": {
+ "description": "Used by `.spectrum-Badge`.
Defaults to `var(--spectrum-badge-corner-radius)`, if not set.",
+ "control": "text",
+ "category": "Modifier"
+ },
+ "mod-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-label-icon-color": {
+ "description": "Used by `.spectrum-Badge`.
Defaults to `var(--spectrum-badge-label-icon-color)`, if not set.",
+ "control": "color",
+ "category": "Modifier"
+ },
+ "mod-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": {
+ "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": {
+ "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": {
+ "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": {
+ "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": {
+ "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": {
+ "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": {
+ "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": {
+ "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": {
+ "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": {
+ "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": {
+ "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": {
+ "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": {
+ "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": {
+ "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": {
+ "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": {
+ "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": {
+ "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": {
+ "description": "Used by `.spectrum-Badge--magenta`.
Defaults to `var(--spectrum-badge-background-color-magenta)`, if not set.",
+ "control": "color",
+ "category": "Modifier"
+ },
+ "mod-badge-background-color-pink": {
+ "description": "Used by `.spectrum-Badge--pink`.
Defaults to `var(--spectrum-badge-background-color-pink)`, if not set.",
+ "control": "color",
+ "category": "Modifier"
+ },
+ "mod-badge-background-color-turquoise": {
+ "description": "Used by `.spectrum-Badge--turquoise`.
Defaults to `var(--spectrum-badge-background-color-turquoise)`, if not set.",
+ "control": "color",
+ "category": "Modifier"
+ },
+ "mod-badge-background-color-brown": {
+ "description": "Used by `.spectrum-Badge--brown`.
Defaults to `var(--spectrum-badge-background-color-brown)`, if not set.",
+ "control": "color",
+ "category": "Modifier"
+ },
+ "mod-badge-background-color-cinnamon": {
+ "description": "Used by `.spectrum-Badge--cinnamon`.
Defaults to `var(--spectrum-badge-background-color-cinnamon)`, if not set.",
+ "control": "color",
+ "category": "Modifier"
+ },
+ "mod-badge-background-color-silver": {
+ "description": "Used by `.spectrum-Badge--silver`.
Defaults to `var(--spectrum-badge-background-color-silver)`, if not set.",
+ "control": "color",
+ "category": "Modifier"
+ },
+ "mod-badge-subtle-label-icon-color": {
+ "description": "Used by `.spectrum-Badge--style-subtle`.
Defaults to `var(--spectrum-badge-subtle-label-icon-color)`, if not set.",
+ "control": "color",
+ "category": "Modifier"
+ },
+ "mod-badge-subtle-background-color-default": {
+ "description": "Used by `.spectrum-Badge--style-subtle.spectrum-Badge--neutral`.
Defaults to `var(--spectrum-badge-subtle-background-color-default)`, if not set.",
+ "control": "color",
+ "category": "Modifier"
+ },
+ "mod-badge-subtle-background-color-accent": {
+ "description": "Used by `.spectrum-Badge--style-subtle.spectrum-Badge--accent`.
Defaults to `var(--spectrum-badge-subtle-background-color-accent)`, if not set.",
+ "control": "color",
+ "category": "Modifier"
+ },
+ "mod-badge-subtle-background-color-informative": {
+ "description": "Used by `.spectrum-Badge--style-subtle.spectrum-Badge--informative`.
Defaults to `var(--spectrum-badge-subtle-background-color-informative)`, if not set.",
+ "control": "color",
+ "category": "Modifier"
+ },
+ "mod-badge-subtle-background-color-negative": {
+ "description": "Used by `.spectrum-Badge--style-subtle.spectrum-Badge--negative`.
Defaults to `var(--spectrum-badge-subtle-background-color-negative)`, if not set.",
+ "control": "color",
+ "category": "Modifier"
+ },
+ "mod-badge-subtle-background-color-positive": {
+ "description": "Used by `.spectrum-Badge--style-subtle.spectrum-Badge--positive`.
Defaults to `var(--spectrum-badge-subtle-background-color-positive)`, if not set.",
+ "control": "color",
+ "category": "Modifier"
+ },
+ "mod-badge-subtle-background-color-notice": {
+ "description": "Used by `.spectrum-Badge--style-subtle.spectrum-Badge--notice`.
Defaults to `var(--spectrum-badge-subtle-background-color-notice)`, if not set.",
+ "control": "color",
+ "category": "Modifier"
+ },
+ "mod-badge-subtle-background-color-gray": {
+ "description": "Used by `.spectrum-Badge--style-subtle.spectrum-Badge--gray`.
Defaults to `var(--spectrum-badge-subtle-background-color-gray)`, if not set.",
+ "control": "color",
+ "category": "Modifier"
+ },
+ "mod-badge-subtle-background-color-red": {
+ "description": "Used by `.spectrum-Badge--style-subtle.spectrum-Badge--red`.
Defaults to `var(--spectrum-badge-subtle-background-color-red)`, if not set.",
+ "control": "color",
+ "category": "Modifier"
+ },
+ "mod-badge-subtle-background-color-orange": {
+ "description": "Used by `.spectrum-Badge--style-subtle.spectrum-Badge--orange`.
Defaults to `var(--spectrum-badge-subtle-background-color-orange)`, if not set.",
+ "control": "color",
+ "category": "Modifier"
+ },
+ "mod-badge-subtle-background-color-yellow": {
+ "description": "Used by `.spectrum-Badge--style-subtle.spectrum-Badge--yellow`.
Defaults to `var(--spectrum-badge-subtle-background-color-yellow)`, if not set.",
+ "control": "color",
+ "category": "Modifier"
+ },
+ "mod-badge-subtle-background-color-chartreuse": {
+ "description": "Used by `.spectrum-Badge--style-subtle.spectrum-Badge--chartreuse`.
Defaults to `var(--spectrum-badge-subtle-background-color-chartreuse)`, if not set.",
+ "control": "color",
+ "category": "Modifier"
+ },
+ "mod-badge-subtle-background-color-celery": {
+ "description": "Used by `.spectrum-Badge--style-subtle.spectrum-Badge--celery`.
Defaults to `var(--spectrum-badge-subtle-background-color-celery)`, if not set.",
+ "control": "color",
+ "category": "Modifier"
+ },
+ "mod-badge-subtle-background-color-green": {
+ "description": "Used by `.spectrum-Badge--style-subtle.spectrum-Badge--green`.
Defaults to `var(--spectrum-badge-subtle-background-color-green)`, if not set.",
+ "control": "color",
+ "category": "Modifier"
+ },
+ "mod-badge-subtle-background-color-seafoam": {
+ "description": "Used by `.spectrum-Badge--style-subtle.spectrum-Badge--seafoam`.
Defaults to `var(--spectrum-badge-subtle-background-color-seafoam)`, if not set.",
+ "control": "color",
+ "category": "Modifier"
+ },
+ "mod-badge-subtle-background-color-cyan": {
+ "description": "Used by `.spectrum-Badge--style-subtle.spectrum-Badge--cyan`.
Defaults to `var(--spectrum-badge-subtle-background-color-cyan)`, if not set.",
+ "control": "color",
+ "category": "Modifier"
+ },
+ "mod-badge-subtle-background-color-blue": {
+ "description": "Used by `.spectrum-Badge--style-subtle.spectrum-Badge--blue`.
Defaults to `var(--spectrum-badge-subtle-background-color-blue)`, if not set.",
+ "control": "color",
+ "category": "Modifier"
+ },
+ "mod-badge-subtle-background-color-indigo": {
+ "description": "Used by `.spectrum-Badge--style-subtle.spectrum-Badge--indigo`.
Defaults to `var(--spectrum-badge-subtle-background-color-indigo)`, if not set.",
+ "control": "color",
+ "category": "Modifier"
+ },
+ "mod-badge-subtle-background-color-purple": {
+ "description": "Used by `.spectrum-Badge--style-subtle.spectrum-Badge--purple`.
Defaults to `var(--spectrum-badge-subtle-background-color-purple)`, if not set.",
+ "control": "color",
+ "category": "Modifier"
+ },
+ "mod-badge-subtle-background-color-fuchsia": {
+ "description": "Used by `.spectrum-Badge--style-subtle.spectrum-Badge--fuchsia`.
Defaults to `var(--spectrum-badge-subtle-background-color-fuchsia)`, if not set.",
+ "control": "color",
+ "category": "Modifier"
+ },
+ "mod-badge-subtle-background-color-magenta": {
+ "description": "Used by `.spectrum-Badge--style-subtle.spectrum-Badge--magenta`.
Defaults to `var(--spectrum-badge-subtle-background-color-magenta)`, if not set.",
+ "control": "color",
+ "category": "Modifier"
+ },
+ "mod-badge-subtle-background-color-pink": {
+ "description": "Used by `.spectrum-Badge--style-subtle.spectrum-Badge--pink`.
Defaults to `var(--spectrum-badge-subtle-background-color-pink)`, if not set.",
+ "control": "color",
+ "category": "Modifier"
+ },
+ "mod-badge-subtle-background-color-turquoise": {
+ "description": "Used by `.spectrum-Badge--style-subtle.spectrum-Badge--turquoise`.
Defaults to `var(--spectrum-badge-subtle-background-color-turquoise)`, if not set.",
+ "control": "color",
+ "category": "Modifier"
+ },
+ "mod-badge-subtle-background-color-brown": {
+ "description": "Used by `.spectrum-Badge--style-subtle.spectrum-Badge--brown`.
Defaults to `var(--spectrum-badge-subtle-background-color-brown)`, if not set.",
+ "control": "color",
+ "category": "Modifier"
+ },
+ "mod-badge-subtle-background-color-cinnamon": {
+ "description": "Used by `.spectrum-Badge--style-subtle.spectrum-Badge--cinnamon`.
Defaults to `var(--spectrum-badge-subtle-background-color-cinnamon)`, if not set.",
+ "control": "color",
+ "category": "Modifier"
+ },
+ "mod-badge-subtle-background-color-silver": {
+ "description": "Used by `.spectrum-Badge--style-subtle.spectrum-Badge--silver`.
Defaults to `var(--spectrum-badge-subtle-background-color-silver)`, if not set.",
+ "control": "color",
+ "category": "Modifier"
+ },
+ "mod-badge-outline-background-color-default": {
+ "description": "Used by `.spectrum-Badge--style-outline:is(.spectrum-Badge--neutral, .spectrum-Badge--accent, .spectrum-Badge--informative, .spectrum-Badge--negative, .spectrum-Badge--positive, .spectrum-Badge--notice)`.
Defaults to `var(--spectrum-badge-outline-background-color)`, if not set.",
+ "control": "color",
+ "category": "Modifier"
+ },
+ "mod-badge-outline-label-icon-color": {
+ "description": "Used by `.spectrum-Badge--style-outline:is(.spectrum-Badge--neutral, .spectrum-Badge--accent, .spectrum-Badge--informative, .spectrum-Badge--negative, .spectrum-Badge--positive, .spectrum-Badge--notice)`.
Defaults to `var(--spectrum-badge-outline-label-icon-color)`, if not set.",
+ "control": "color",
+ "category": "Modifier"
+ },
+ "mod-badge-outline-border-color-neutral": {
+ "description": "Used by `.spectrum-Badge--style-outline.spectrum-Badge--neutral`.
Defaults to `var(--spectrum-badge-outline-border-color-neutral)`, if not set.",
+ "control": "color",
+ "category": "Modifier"
+ },
+ "mod-badge-outline-border-color-accent": {
+ "description": "Used by `.spectrum-Badge--style-outline.spectrum-Badge--accent`.
Defaults to `var(--spectrum-badge-outline-border-color-accent)`, if not set.",
+ "control": "color",
+ "category": "Modifier"
+ },
+ "mod-badge-outline-border-color-informative": {
+ "description": "Used by `.spectrum-Badge--style-outline.spectrum-Badge--informative`.
Defaults to `var(--spectrum-badge-outline-border-color-informative)`, if not set.",
+ "control": "color",
+ "category": "Modifier"
+ },
+ "mod-badge-outline-border-color-negative": {
+ "description": "Used by `.spectrum-Badge--style-outline.spectrum-Badge--negative`.
Defaults to `var(--spectrum-badge-outline-border-color-negative)`, if not set.",
+ "control": "color",
+ "category": "Modifier"
+ },
+ "mod-badge-outline-border-color-positive": {
+ "description": "Used by `.spectrum-Badge--style-outline.spectrum-Badge--positive`.
Defaults to `var(--spectrum-badge-outline-border-color-positive)`, if not set.",
+ "control": "color",
+ "category": "Modifier"
+ },
+ "mod-badge-outline-border-color-notice": {
+ "description": "Used by `.spectrum-Badge--style-outline.spectrum-Badge--notice`.
Defaults to `var(--spectrum-badge-outline-border-color-notice)`, if not set.",
+ "control": "color",
+ "category": "Modifier"
+ },
+ "mod-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": {
+ "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": {
+ "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": {
+ "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": {
+ "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": {
+ "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": {
+ "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": {
+ "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": {
+ "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": {
+ "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": {
+ "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-border-width": {
+ "value": "var(--mod-badge-border-width, var(--spectrum-border-width-200))",
+ "description": "Defined in `.spectrum-Badge`.
Used by `.spectrum-Badge`, `.spectrum-Badge-label`, `.spectrum-Badge-icon`, `.spectrum-Badge-icon--no-label`.
Defaults to `var(--mod-badge-border-width, var(--spectrum-border-width-200))`, if not set.",
+ "control": "text",
+ "category": "Component"
+ },
+ "spectrum-badge-border-color": {
+ "value": "transparent",
+ "description": "Defined in `.spectrum-Badge`.
Used by `.spectrum-Badge`.
Defaults to `transparent`, if not set.",
+ "control": "color",
+ "category": "Component"
+ },
+ "spectrum-badge-line-height": {
+ "value": "1.3",
+ "description": "Defined in `.spectrum-Badge`.
Used by `.spectrum-Badge-label`.
Defaults to `var(--spectrum-line-height-100)`, if not set.",
+ "control": "text",
+ "category": "Component"
+ },
+ "spectrum-badge-line-height-cjk": {
+ "value": "1.5",
+ "description": "Defined in `.spectrum-Badge`.
Used by `.spectrum-Badge-label:lang(ja), .spectrum-Badge-label:lang(ko), .spectrum-Badge-label:lang(zh)`.
Defaults to `var(--spectrum-cjk-line-height-100)`, if not set.",
+ "control": "text",
+ "category": "Component"
+ },
+ "spectrum-badge-font-weight": {
+ "value": "500",
+ "description": "Defined in `.spectrum-Badge`.
Used by `.spectrum-Badge-label`.
Defaults to `var(--spectrum-medium-font-weight)`, if not set.",
+ "control": "text",
+ "category": "Component"
+ },
+ "spectrum-badge-label-icon-color": {
+ "value": "rgb(0, 0, 0)",
+ "description": "Defined in `.spectrum-Badge`, `.spectrum-Badge--celery, .spectrum-Badge--chartreuse, .spectrum-Badge--notice, .spectrum-Badge--orange, .spectrum-Badge--yellow`.
Used by `.spectrum-Badge`.
Defaults to `var(--spectrum-black)`, if not set.",
+ "control": "color",
+ "category": "Component"
+ },
+ "spectrum-badge-background-color-default": {
+ "value": "var(--spectrum-gray-700)",
+ "description": "Defined in `.spectrum-Badge`.
Used by `.spectrum-Badge`, `.spectrum-Badge--neutral`.
Defaults to `var(--spectrum-neutral-subdued-background-color-default)`, if not set.",
+ "control": "color",
+ "category": "Component"
+ },
+ "spectrum-badge-background-color-accent": {
+ "value": "var(--spectrum-accent-color-900)",
+ "description": "Defined in `.spectrum-Badge`.
Used by `.spectrum-Badge--accent`.
Defaults to `var(--spectrum-accent-background-color-default)`, if not set.",
+ "control": "color",
+ "category": "Component"
+ },
+ "spectrum-badge-background-color-informative": {
+ "value": "var(--spectrum-informative-color-900)",
+ "description": "Defined in `.spectrum-Badge`.
Used by `.spectrum-Badge--informative`.
Defaults to `var(--spectrum-informative-background-color-default)`, if not set.",
+ "control": "color",
+ "category": "Component"
+ },
+ "spectrum-badge-background-color-negative": {
+ "value": "var(--spectrum-negative-color-900)",
+ "description": "Defined in `.spectrum-Badge`.
Used by `.spectrum-Badge--negative`.
Defaults to `var(--spectrum-negative-background-color-default)`, if not set.",
+ "control": "color",
+ "category": "Component"
+ },
+ "spectrum-badge-background-color-positive": {
+ "value": "var(--spectrum-positive-color-900)",
+ "description": "Defined in `.spectrum-Badge`.
Used by `.spectrum-Badge--positive`.
Defaults to `var(--spectrum-positive-background-color-default)`, if not set.",
+ "control": "color",
+ "category": "Component"
+ },
+ "spectrum-badge-background-color-notice": {
+ "value": "var(--spectrum-notice-color-600)",
+ "description": "Defined in `.spectrum-Badge`.
Used by `.spectrum-Badge--notice`.
Defaults to `var(--spectrum-notice-background-color-default)`, if not set.",
+ "control": "color",
+ "category": "Component"
+ },
+ "spectrum-badge-background-color-gray": {
+ "value": "var(--spectrum-gray-700)",
+ "description": "Defined in `.spectrum-Badge`.
Used by `.spectrum-Badge--gray`.
Defaults to `var(--spectrum-gray-background-color-default)`, if not set.",
+ "control": "color",
+ "category": "Component"
+ },
+ "spectrum-badge-background-color-red": {
+ "value": "var(--spectrum-red-900)",
+ "description": "Defined in `.spectrum-Badge`.
Used by `.spectrum-Badge--red`.
Defaults to `var(--spectrum-red-background-color-default)`, if not set.",
+ "control": "color",
+ "category": "Component"
+ },
+ "spectrum-badge-background-color-orange": {
+ "value": "var(--spectrum-orange-600)",
+ "description": "Defined in `.spectrum-Badge`.
Used by `.spectrum-Badge--orange`.
Defaults to `var(--spectrum-orange-background-color-default)`, if not set.",
+ "control": "color",
+ "category": "Component"
+ },
+ "spectrum-badge-background-color-yellow": {
+ "value": "var(--spectrum-yellow-400)",
+ "description": "Defined in `.spectrum-Badge`.
Used by `.spectrum-Badge--yellow`.
Defaults to `var(--spectrum-yellow-background-color-default)`, if not set.",
+ "control": "color",
+ "category": "Component"
+ },
+ "spectrum-badge-background-color-chartreuse": {
+ "value": "var(--spectrum-chartreuse-500)",
+ "description": "Defined in `.spectrum-Badge`.
Used by `.spectrum-Badge--chartreuse`.
Defaults to `var(--spectrum-chartreuse-background-color-default)`, if not set.",
+ "control": "color",
+ "category": "Component"
+ },
+ "spectrum-badge-background-color-celery": {
+ "value": "var(--spectrum-celery-600)",
+ "description": "Defined in `.spectrum-Badge`.
Used by `.spectrum-Badge--celery`.
Defaults to `var(--spectrum-celery-background-color-default)`, if not set.",
+ "control": "color",
+ "category": "Component"
+ },
+ "spectrum-badge-background-color-green": {
+ "value": "var(--spectrum-green-900)",
+ "description": "Defined in `.spectrum-Badge`.
Used by `.spectrum-Badge--green`.
Defaults to `var(--spectrum-green-background-color-default)`, if not set.",
+ "control": "color",
+ "category": "Component"
+ },
+ "spectrum-badge-background-color-seafoam": {
+ "value": "var(--spectrum-seafoam-900)",
+ "description": "Defined in `.spectrum-Badge`.
Used by `.spectrum-Badge--seafoam`.
Defaults to `var(--spectrum-seafoam-background-color-default)`, if not set.",
+ "control": "color",
+ "category": "Component"
+ },
+ "spectrum-badge-background-color-cyan": {
+ "value": "var(--spectrum-cyan-900)",
+ "description": "Defined in `.spectrum-Badge`.
Used by `.spectrum-Badge--cyan`.
Defaults to `var(--spectrum-cyan-background-color-default)`, if not set.",
+ "control": "color",
+ "category": "Component"
+ },
+ "spectrum-badge-background-color-blue": {
+ "value": "var(--spectrum-blue-900)",
+ "description": "Defined in `.spectrum-Badge`.
Used by `.spectrum-Badge--blue`.
Defaults to `var(--spectrum-blue-background-color-default)`, if not set.",
+ "control": "color",
+ "category": "Component"
+ },
+ "spectrum-badge-background-color-indigo": {
+ "value": "var(--spectrum-indigo-900)",
+ "description": "Defined in `.spectrum-Badge`.
Used by `.spectrum-Badge--indigo`.
Defaults to `var(--spectrum-indigo-background-color-default)`, if not set.",
+ "control": "color",
+ "category": "Component"
+ },
+ "spectrum-badge-background-color-purple": {
+ "value": "var(--spectrum-purple-900)",
+ "description": "Defined in `.spectrum-Badge`.
Used by `.spectrum-Badge--purple`.
Defaults to `var(--spectrum-purple-background-color-default)`, if not set.",
+ "control": "color",
+ "category": "Component"
+ },
+ "spectrum-badge-background-color-fuchsia": {
+ "value": "var(--spectrum-fuchsia-900)",
+ "description": "Defined in `.spectrum-Badge`.
Used by `.spectrum-Badge--fuchsia`.
Defaults to `var(--spectrum-fuchsia-background-color-default)`, if not set.",
+ "control": "color",
+ "category": "Component"
+ },
+ "spectrum-badge-background-color-magenta": {
+ "value": "var(--spectrum-magenta-900)",
+ "description": "Defined in `.spectrum-Badge`.
Used by `.spectrum-Badge--magenta`.
Defaults to `var(--spectrum-magenta-background-color-default)`, if not set.",
+ "control": "color",
+ "category": "Component"
+ },
+ "spectrum-badge-background-color-pink": {
+ "value": "var(--spectrum-pink-900)",
+ "description": "Defined in `.spectrum-Badge`.
Used by `.spectrum-Badge--pink`.
Defaults to `var(--spectrum-pink-background-color-default)`, if not set.",
+ "control": "color",
+ "category": "Component"
+ },
+ "spectrum-badge-background-color-turquoise": {
+ "value": "var(--spectrum-turquoise-900)",
+ "description": "Defined in `.spectrum-Badge`.
Used by `.spectrum-Badge--turquoise`.
Defaults to `var(--spectrum-turquoise-background-color-default)`, if not set.",
+ "control": "color",
+ "category": "Component"
+ },
+ "spectrum-badge-background-color-brown": {
+ "value": "var(--spectrum-brown-900)",
+ "description": "Defined in `.spectrum-Badge`.
Used by `.spectrum-Badge--brown`.
Defaults to `var(--spectrum-brown-background-color-default)`, if not set.",
+ "control": "color",
+ "category": "Component"
+ },
+ "spectrum-badge-background-color-cinnamon": {
+ "value": "var(--spectrum-cinnamon-900)",
+ "description": "Defined in `.spectrum-Badge`.
Used by `.spectrum-Badge--cinnamon`.
Defaults to `var(--spectrum-cinnamon-background-color-default)`, if not set.",
+ "control": "color",
+ "category": "Component"
+ },
+ "spectrum-badge-background-color-silver": {
+ "value": "var(--spectrum-silver-900)",
+ "description": "Defined in `.spectrum-Badge`.
Used by `.spectrum-Badge--silver`.
Defaults to `var(--spectrum-silver-background-color-default)`, if not set.",
+ "control": "color",
+ "category": "Component"
+ },
+ "spectrum-badge-subtle-label-icon-color": {
+ "value": "light-dark(rgb(0, 0, 0), rgb(255, 255, 255))",
+ "description": "Defined in `.spectrum-Badge`.
Used by `.spectrum-Badge--style-subtle`.
Defaults to `var(--spectrum-gray-1000)`, if not set.",
+ "control": "color",
+ "category": "Component"
+ },
+ "spectrum-badge-subtle-background-color-default": {
+ "value": "var(--spectrum-gray-100)",
+ "description": "Defined in `.spectrum-Badge`.
Used by `.spectrum-Badge--style-subtle.spectrum-Badge--neutral`.
Defaults to `var(--spectrum-neutral-subtle-background-color-default)`, if not set.",
+ "control": "color",
+ "category": "Component"
+ },
+ "spectrum-badge-subtle-background-color-accent": {
+ "value": "var(--spectrum-accent-color-200)",
+ "description": "Defined in `.spectrum-Badge`.
Used by `.spectrum-Badge--style-subtle.spectrum-Badge--accent`.
Defaults to `var(--spectrum-accent-subtle-background-color-default)`, if not set.",
+ "control": "color",
+ "category": "Component"
+ },
+ "spectrum-badge-subtle-background-color-informative": {
+ "value": "var(--spectrum-informative-color-200)",
+ "description": "Defined in `.spectrum-Badge`.
Used by `.spectrum-Badge--style-subtle.spectrum-Badge--informative`.
Defaults to `var(--spectrum-informative-subtle-background-color-default)`, if not set.",
+ "control": "color",
+ "category": "Component"
+ },
+ "spectrum-badge-subtle-background-color-negative": {
+ "value": "var(--spectrum-negative-color-200)",
+ "description": "Defined in `.spectrum-Badge`.
Used by `.spectrum-Badge--style-subtle.spectrum-Badge--negative`.
Defaults to `var(--spectrum-negative-subtle-background-color-default)`, if not set.",
+ "control": "color",
+ "category": "Component"
+ },
+ "spectrum-badge-subtle-background-color-positive": {
+ "value": "var(--spectrum-positive-color-200)",
+ "description": "Defined in `.spectrum-Badge`.
Used by `.spectrum-Badge--style-subtle.spectrum-Badge--positive`.
Defaults to `var(--spectrum-positive-subtle-background-color-default)`, if not set.",
+ "control": "color",
+ "category": "Component"
+ },
+ "spectrum-badge-subtle-background-color-notice": {
+ "value": "var(--spectrum-notice-color-200)",
+ "description": "Defined in `.spectrum-Badge`.
Used by `.spectrum-Badge--style-subtle.spectrum-Badge--notice`.
Defaults to `var(--spectrum-notice-subtle-background-color-default)`, if not set.",
+ "control": "color",
+ "category": "Component"
+ },
+ "spectrum-badge-subtle-background-color-gray": {
+ "value": "var(--spectrum-gray-100)",
+ "description": "Defined in `.spectrum-Badge`.
Used by `.spectrum-Badge--style-subtle.spectrum-Badge--gray`.
Defaults to `var(--spectrum-gray-subtle-background-color-default)`, if not set.",
+ "control": "color",
+ "category": "Component"
+ },
+ "spectrum-badge-subtle-background-color-red": {
+ "value": "var(--spectrum-red-200)",
+ "description": "Defined in `.spectrum-Badge`.
Used by `.spectrum-Badge--style-subtle.spectrum-Badge--red`.
Defaults to `var(--spectrum-red-subtle-background-color-default)`, if not set.",
+ "control": "color",
+ "category": "Component"
+ },
+ "spectrum-badge-subtle-background-color-orange": {
+ "value": "var(--spectrum-orange-200)",
+ "description": "Defined in `.spectrum-Badge`.
Used by `.spectrum-Badge--style-subtle.spectrum-Badge--orange`.
Defaults to `var(--spectrum-orange-subtle-background-color-default)`, if not set.",
+ "control": "color",
+ "category": "Component"
+ },
+ "spectrum-badge-subtle-background-color-yellow": {
+ "value": "var(--spectrum-yellow-200)",
+ "description": "Defined in `.spectrum-Badge`.
Used by `.spectrum-Badge--style-subtle.spectrum-Badge--yellow`.
Defaults to `var(--spectrum-yellow-subtle-background-color-default)`, if not set.",
+ "control": "color",
+ "category": "Component"
+ },
+ "spectrum-badge-subtle-background-color-chartreuse": {
+ "value": "var(--spectrum-chartreuse-200)",
+ "description": "Defined in `.spectrum-Badge`.
Used by `.spectrum-Badge--style-subtle.spectrum-Badge--chartreuse`.
Defaults to `var(--spectrum-chartreuse-subtle-background-color-default)`, if not set.",
+ "control": "color",
+ "category": "Component"
+ },
+ "spectrum-badge-subtle-background-color-celery": {
+ "value": "var(--spectrum-celery-200)",
+ "description": "Defined in `.spectrum-Badge`.
Used by `.spectrum-Badge--style-subtle.spectrum-Badge--celery`.
Defaults to `var(--spectrum-celery-subtle-background-color-default)`, if not set.",
+ "control": "color",
+ "category": "Component"
+ },
+ "spectrum-badge-subtle-background-color-green": {
+ "value": "var(--spectrum-green-200)",
+ "description": "Defined in `.spectrum-Badge`.
Used by `.spectrum-Badge--style-subtle.spectrum-Badge--green`.
Defaults to `var(--spectrum-green-subtle-background-color-default)`, if not set.",
+ "control": "color",
+ "category": "Component"
+ },
+ "spectrum-badge-subtle-background-color-seafoam": {
+ "value": "var(--spectrum-seafoam-200)",
+ "description": "Defined in `.spectrum-Badge`.
Used by `.spectrum-Badge--style-subtle.spectrum-Badge--seafoam`.
Defaults to `var(--spectrum-seafoam-subtle-background-color-default)`, if not set.",
+ "control": "color",
+ "category": "Component"
+ },
+ "spectrum-badge-subtle-background-color-cyan": {
+ "value": "var(--spectrum-cyan-200)",
+ "description": "Defined in `.spectrum-Badge`.
Used by `.spectrum-Badge--style-subtle.spectrum-Badge--cyan`.
Defaults to `var(--spectrum-cyan-subtle-background-color-default)`, if not set.",
+ "control": "color",
+ "category": "Component"
+ },
+ "spectrum-badge-subtle-background-color-blue": {
+ "value": "var(--spectrum-blue-200)",
+ "description": "Defined in `.spectrum-Badge`.
Used by `.spectrum-Badge--style-subtle.spectrum-Badge--blue`.
Defaults to `var(--spectrum-blue-subtle-background-color-default)`, if not set.",
+ "control": "color",
+ "category": "Component"
+ },
+ "spectrum-badge-subtle-background-color-indigo": {
+ "value": "var(--spectrum-indigo-200)",
+ "description": "Defined in `.spectrum-Badge`.
Used by `.spectrum-Badge--style-subtle.spectrum-Badge--indigo`.
Defaults to `var(--spectrum-indigo-subtle-background-color-default)`, if not set.",
+ "control": "color",
+ "category": "Component"
+ },
+ "spectrum-badge-subtle-background-color-purple": {
+ "value": "var(--spectrum-purple-200)",
+ "description": "Defined in `.spectrum-Badge`.
Used by `.spectrum-Badge--style-subtle.spectrum-Badge--purple`.
Defaults to `var(--spectrum-purple-subtle-background-color-default)`, if not set.",
+ "control": "color",
+ "category": "Component"
+ },
+ "spectrum-badge-subtle-background-color-fuchsia": {
+ "value": "var(--spectrum-fuchsia-200)",
+ "description": "Defined in `.spectrum-Badge`.
Used by `.spectrum-Badge--style-subtle.spectrum-Badge--fuchsia`.
Defaults to `var(--spectrum-fuchsia-subtle-background-color-default)`, if not set.",
+ "control": "color",
+ "category": "Component"
+ },
+ "spectrum-badge-subtle-background-color-magenta": {
+ "value": "var(--spectrum-magenta-200)",
+ "description": "Defined in `.spectrum-Badge`.
Used by `.spectrum-Badge--style-subtle.spectrum-Badge--magenta`.
Defaults to `var(--spectrum-magenta-subtle-background-color-default)`, if not set.",
+ "control": "color",
+ "category": "Component"
+ },
+ "spectrum-badge-subtle-background-color-pink": {
+ "value": "var(--spectrum-pink-200)",
+ "description": "Defined in `.spectrum-Badge`.
Used by `.spectrum-Badge--style-subtle.spectrum-Badge--pink`.
Defaults to `var(--spectrum-pink-subtle-background-color-default)`, if not set.",
+ "control": "color",
+ "category": "Component"
+ },
+ "spectrum-badge-subtle-background-color-turquoise": {
+ "value": "var(--spectrum-turquoise-200)",
+ "description": "Defined in `.spectrum-Badge`.
Used by `.spectrum-Badge--style-subtle.spectrum-Badge--turquoise`.
Defaults to `var(--spectrum-turquoise-subtle-background-color-default)`, if not set.",
+ "control": "color",
+ "category": "Component"
+ },
+ "spectrum-badge-subtle-background-color-brown": {
+ "value": "var(--spectrum-brown-200)",
+ "description": "Defined in `.spectrum-Badge`.
Used by `.spectrum-Badge--style-subtle.spectrum-Badge--brown`.
Defaults to `var(--spectrum-brown-subtle-background-color-default)`, if not set.",
+ "control": "color",
+ "category": "Component"
+ },
+ "spectrum-badge-subtle-background-color-cinnamon": {
+ "value": "var(--spectrum-cinnamon-200)",
+ "description": "Defined in `.spectrum-Badge`.
Used by `.spectrum-Badge--style-subtle.spectrum-Badge--cinnamon`.
Defaults to `var(--spectrum-cinnamon-subtle-background-color-default)`, if not set.",
+ "control": "color",
+ "category": "Component"
+ },
+ "spectrum-badge-subtle-background-color-silver": {
+ "value": "var(--spectrum-silver-200)",
+ "description": "Defined in `.spectrum-Badge`.
Used by `.spectrum-Badge--style-subtle.spectrum-Badge--silver`.
Defaults to `var(--spectrum-silver-subtle-background-color-default)`, if not set.",
+ "control": "color",
+ "category": "Component"
+ },
+ "spectrum-badge-outline-label-icon-color": {
+ "value": "light-dark(rgb(0, 0, 0), rgb(255, 255, 255))",
+ "description": "Defined in `.spectrum-Badge`.
Used by `.spectrum-Badge--style-outline:is(.spectrum-Badge--neutral, .spectrum-Badge--accent, .spectrum-Badge--informative, .spectrum-Badge--negative, .spectrum-Badge--positive, .spectrum-Badge--notice)`.
Defaults to `var(--spectrum-gray-1000)`, if not set.",
+ "control": "color",
+ "category": "Component"
+ },
+ "spectrum-badge-outline-background-color": {
+ "value": "var(--spectrum-gray-25)",
+ "description": "Defined in `.spectrum-Badge`.
Used by `.spectrum-Badge--style-outline:is(.spectrum-Badge--neutral, .spectrum-Badge--accent, .spectrum-Badge--informative, .spectrum-Badge--negative, .spectrum-Badge--positive, .spectrum-Badge--notice)`.
Defaults to `var(--spectrum-background-layer-2-color)`, if not set.",
+ "control": "color",
+ "category": "Component"
+ },
+ "spectrum-badge-outline-border-color-neutral": {
+ "value": "var(--spectrum-gray-500)",
+ "description": "Defined in `.spectrum-Badge`.
Used by `.spectrum-Badge--style-outline.spectrum-Badge--neutral`.
Defaults to `var(--spectrum-neutral-visual-color)`, if not set.",
+ "control": "color",
+ "category": "Component"
+ },
+ "spectrum-badge-outline-border-color-accent": {
+ "value": "var(--spectrum-accent-color-800)",
+ "description": "Defined in `.spectrum-Badge`.
Used by `.spectrum-Badge--style-outline.spectrum-Badge--accent`.
Defaults to `var(--spectrum-accent-visual-color)`, if not set.",
+ "control": "color",
+ "category": "Component"
+ },
+ "spectrum-badge-outline-border-color-informative": {
+ "value": "var(--spectrum-informative-color-800)",
+ "description": "Defined in `.spectrum-Badge`.
Used by `.spectrum-Badge--style-outline.spectrum-Badge--informative`.
Defaults to `var(--spectrum-informative-visual-color)`, if not set.",
+ "control": "color",
+ "category": "Component"
+ },
+ "spectrum-badge-outline-border-color-negative": {
+ "value": "var(--spectrum-negative-color-800)",
+ "description": "Defined in `.spectrum-Badge`.
Used by `.spectrum-Badge--style-outline.spectrum-Badge--negative`.
Defaults to `var(--spectrum-negative-visual-color)`, if not set.",
+ "control": "color",
+ "category": "Component"
+ },
+ "spectrum-badge-outline-border-color-notice": {
+ "value": "var(--spectrum-notice-color-800)",
+ "description": "Defined in `.spectrum-Badge`.
Used by `.spectrum-Badge--style-outline.spectrum-Badge--notice`.
Defaults to `var(--spectrum-notice-visual-color)`, if not set.",
+ "control": "color",
+ "category": "Component"
+ },
+ "spectrum-badge-outline-border-color-positive": {
+ "value": "var(--spectrum-positive-color-800)",
+ "description": "Defined in `.spectrum-Badge`.
Used by `.spectrum-Badge--style-outline.spectrum-Badge--positive`.
Defaults to `var(--spectrum-positive-visual-color)`, if not set.",
+ "control": "color",
+ "category": "Component"
+ },
+ "spectrum-badge-corner-radius": {
+ "value": "10px",
+ "description": "Defined in `.spectrum-Badge`, `.spectrum-Badge--sizeS`, `.spectrum-Badge--sizeL`, `.spectrum-Badge--sizeXL`.
Used by `.spectrum-Badge`.
Defaults to `var(--spectrum-corner-radius-medium-size-extra-large)`, if not set.",
+ "control": "text",
+ "category": "Component"
+ },
+ "spectrum-badge-height": {
+ "value": "32px",
+ "description": "Defined in `.spectrum-Badge`, `.spectrum-Badge--sizeS`, `.spectrum-Badge--sizeL`, `.spectrum-Badge--sizeXL`.
Used by `.spectrum-Badge`.
Defaults to `var(--spectrum-component-height-100)`, if not set.",
+ "control": "text",
+ "category": "Component"
+ },
+ "spectrum-badge-font-size": {
+ "value": "18px",
+ "description": "Defined in `.spectrum-Badge`, `.spectrum-Badge--sizeS`, `.spectrum-Badge--sizeL`, `.spectrum-Badge--sizeXL`.
Used by `.spectrum-Badge-label`.
Defaults to `var(--spectrum-font-size-300)`, if not set.",
+ "control": "text",
+ "category": "Component"
+ },
+ "spectrum-badge-label-spacing-vertical-top": {
+ "value": "12px",
+ "description": "Defined in `.spectrum-Badge`, `.spectrum-Badge--sizeS`, `.spectrum-Badge--sizeL`, `.spectrum-Badge--sizeXL`.
Used by `.spectrum-Badge-label`.
Defaults to `var(--spectrum-component-top-to-text-300)`, if not set.",
+ "control": "text",
+ "category": "Component"
+ },
+ "spectrum-badge-label-spacing-vertical-bottom": {
+ "value": "14px",
+ "description": "Defined in `.spectrum-Badge`, `.spectrum-Badge--sizeS`, `.spectrum-Badge--sizeL`, `.spectrum-Badge--sizeXL`.
Used by `.spectrum-Badge-label`.
Defaults to `var(--spectrum-component-bottom-to-text-300)`, if not set.",
+ "control": "text",
+ "category": "Component"
+ },
+ "spectrum-badge-label-spacing-horizontal": {
+ "value": "18px",
+ "description": "Defined in `.spectrum-Badge`, `.spectrum-Badge--sizeS`, `.spectrum-Badge--sizeL`, `.spectrum-Badge--sizeXL`.
Used by `.spectrum-Badge-label`.
Defaults to `var(--spectrum-component-edge-to-text-300)`, if not set.",
+ "control": "text",
+ "category": "Component"
+ },
+ "spectrum-badge-workflow-icon-size": {
+ "value": "26px",
+ "description": "Defined in `.spectrum-Badge`, `.spectrum-Badge--sizeS`, `.spectrum-Badge--sizeL`, `.spectrum-Badge--sizeXL`.
Used by `.spectrum-Badge-icon`.
Defaults to `var(--spectrum-workflow-icon-size-300)`, if not set.",
+ "control": "text",
+ "category": "Component"
+ },
+ "spectrum-badge-icon-text-spacing": {
+ "value": "8px",
+ "description": "Defined in `.spectrum-Badge`, `.spectrum-Badge--sizeS`, `.spectrum-Badge--sizeL`, `.spectrum-Badge--sizeXL`.
Used by `.spectrum-Badge-icon`.
Defaults to `var(--spectrum-text-to-visual-300)`, if not set.",
+ "control": "text",
+ "category": "Component"
+ },
+ "spectrum-badge-icon-spacing-horizontal": {
+ "value": "15px",
+ "description": "Defined in `.spectrum-Badge`, `.spectrum-Badge--sizeS`, `.spectrum-Badge--sizeL`, `.spectrum-Badge--sizeXL`.
Used by `.spectrum-Badge-icon`.
Defaults to `var(--spectrum-component-edge-to-visual-300)`, if not set.",
+ "control": "text",
+ "category": "Component"
+ },
+ "spectrum-badge-icon-spacing-vertical-top": {
+ "value": "11px",
+ "description": "Defined in `.spectrum-Badge`, `.spectrum-Badge--sizeS`, `.spectrum-Badge--sizeL`, `.spectrum-Badge--sizeXL`.
Used by `.spectrum-Badge-icon`.
Defaults to `var(--spectrum-component-top-to-workflow-icon-300)`, if not set.",
+ "control": "text",
+ "category": "Component"
+ },
+ "spectrum-badge-icon-only-spacing-horizontal": {
+ "value": "11px",
+ "description": "Defined in `.spectrum-Badge`, `.spectrum-Badge--sizeS`, `.spectrum-Badge--sizeL`, `.spectrum-Badge--sizeXL`.
Used by `.spectrum-Badge-icon--no-label`.
Defaults to `var(--spectrum-component-edge-to-visual-only-300)`, if not set.",
+ "control": "text",
+ "category": "Component"
+ }
+ },
+ "global": {
+ "spectrum-border-width-200": {
+ "value": "2px",
+ "description": "Used by `--spectrum-badge-border-width`.",
+ "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-medium-font-weight": {
+ "value": "500",
+ "description": "Used by `--spectrum-badge-font-weight`.",
+ "control": "text",
+ "category": "Global"
+ },
+ "spectrum-white": {
+ "value": "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-700)",
+ "description": "Used by `--spectrum-badge-background-color-default`.",
+ "control": "color",
+ "category": "Global"
+ },
+ "spectrum-accent-background-color-default": {
+ "value": "var(--spectrum-accent-color-900)",
+ "description": "Used by `--spectrum-badge-background-color-accent`.",
+ "control": "color",
+ "category": "Global"
+ },
+ "spectrum-informative-background-color-default": {
+ "value": "var(--spectrum-informative-color-900)",
+ "description": "Used by `--spectrum-badge-background-color-informative`.",
+ "control": "color",
+ "category": "Global"
+ },
+ "spectrum-negative-background-color-default": {
+ "value": "var(--spectrum-negative-color-900)",
+ "description": "Used by `--spectrum-badge-background-color-negative`.",
+ "control": "color",
+ "category": "Global"
+ },
+ "spectrum-positive-background-color-default": {
+ "value": "var(--spectrum-positive-color-900)",
+ "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-700)",
+ "description": "Used by `--spectrum-badge-background-color-gray`.",
+ "control": "color",
+ "category": "Global"
+ },
+ "spectrum-red-background-color-default": {
+ "value": "var(--spectrum-red-900)",
+ "description": "Used by `--spectrum-badge-background-color-red`.",
+ "control": "color",
+ "category": "Global"
+ },
+ "spectrum-orange-background-color-default": {
+ "value": "var(--spectrum-orange-600)",
+ "description": "Used by `--spectrum-badge-background-color-orange`.",
+ "control": "color",
+ "category": "Global"
+ },
+ "spectrum-yellow-background-color-default": {
+ "value": "var(--spectrum-yellow-400)",
+ "description": "Used by `--spectrum-badge-background-color-yellow`.",
+ "control": "color",
+ "category": "Global"
+ },
+ "spectrum-chartreuse-background-color-default": {
+ "value": "var(--spectrum-chartreuse-500)",
+ "description": "Used by `--spectrum-badge-background-color-chartreuse`.",
+ "control": "color",
+ "category": "Global"
+ },
+ "spectrum-celery-background-color-default": {
+ "value": "var(--spectrum-celery-600)",
+ "description": "Used by `--spectrum-badge-background-color-celery`.",
+ "control": "color",
+ "category": "Global"
+ },
+ "spectrum-green-background-color-default": {
+ "value": "var(--spectrum-green-900)",
+ "description": "Used by `--spectrum-badge-background-color-green`.",
+ "control": "color",
+ "category": "Global"
+ },
+ "spectrum-seafoam-background-color-default": {
+ "value": "var(--spectrum-seafoam-900)",
+ "description": "Used by `--spectrum-badge-background-color-seafoam`.",
+ "control": "color",
+ "category": "Global"
+ },
+ "spectrum-cyan-background-color-default": {
+ "value": "var(--spectrum-cyan-900)",
+ "description": "Used by `--spectrum-badge-background-color-cyan`.",
+ "control": "color",
+ "category": "Global"
+ },
+ "spectrum-blue-background-color-default": {
+ "value": "var(--spectrum-blue-900)",
+ "description": "Used by `--spectrum-badge-background-color-blue`.",
+ "control": "color",
+ "category": "Global"
+ },
+ "spectrum-indigo-background-color-default": {
+ "value": "var(--spectrum-indigo-900)",
+ "description": "Used by `--spectrum-badge-background-color-indigo`.",
+ "control": "color",
+ "category": "Global"
+ },
+ "spectrum-purple-background-color-default": {
+ "value": "var(--spectrum-purple-900)",
+ "description": "Used by `--spectrum-badge-background-color-purple`.",
+ "control": "color",
+ "category": "Global"
+ },
+ "spectrum-fuchsia-background-color-default": {
+ "value": "var(--spectrum-fuchsia-900)",
+ "description": "Used by `--spectrum-badge-background-color-fuchsia`.",
+ "control": "color",
+ "category": "Global"
+ },
+ "spectrum-magenta-background-color-default": {
+ "value": "var(--spectrum-magenta-900)",
+ "description": "Used by `--spectrum-badge-background-color-magenta`.",
+ "control": "color",
+ "category": "Global"
+ },
+ "spectrum-pink-background-color-default": {
+ "value": "var(--spectrum-pink-900)",
+ "description": "Used by `--spectrum-badge-background-color-pink`.",
+ "control": "color",
+ "category": "Global"
+ },
+ "spectrum-turquoise-background-color-default": {
+ "value": "var(--spectrum-turquoise-900)",
+ "description": "Used by `--spectrum-badge-background-color-turquoise`.",
+ "control": "color",
+ "category": "Global"
+ },
+ "spectrum-brown-background-color-default": {
+ "value": "var(--spectrum-brown-900)",
+ "description": "Used by `--spectrum-badge-background-color-brown`.",
+ "control": "color",
+ "category": "Global"
+ },
+ "spectrum-cinnamon-background-color-default": {
+ "value": "var(--spectrum-cinnamon-900)",
+ "description": "Used by `--spectrum-badge-background-color-cinnamon`.",
+ "control": "color",
+ "category": "Global"
+ },
+ "spectrum-silver-background-color-default": {
+ "value": "var(--spectrum-silver-900)",
+ "description": "Used by `--spectrum-badge-background-color-silver`.",
+ "control": "color",
+ "category": "Global"
+ },
+ "spectrum-gray-1000": {
+ "value": "light-dark(rgb(0, 0, 0), rgb(255, 255, 255))",
+ "description": "Used by `--spectrum-badge-subtle-label-icon-color`, `--spectrum-badge-outline-label-icon-color`.",
+ "control": "text",
+ "category": "Global"
+ },
+ "spectrum-neutral-subtle-background-color-default": {
+ "value": "var(--spectrum-gray-100)",
+ "description": "Used by `--spectrum-badge-subtle-background-color-default`.",
+ "control": "color",
+ "category": "Global"
+ },
+ "spectrum-accent-subtle-background-color-default": {
+ "value": "var(--spectrum-accent-color-200)",
+ "description": "Used by `--spectrum-badge-subtle-background-color-accent`.",
+ "control": "color",
+ "category": "Global"
+ },
+ "spectrum-informative-subtle-background-color-default": {
+ "value": "var(--spectrum-informative-color-200)",
+ "description": "Used by `--spectrum-badge-subtle-background-color-informative`.",
+ "control": "color",
+ "category": "Global"
+ },
+ "spectrum-negative-subtle-background-color-default": {
+ "value": "var(--spectrum-negative-color-200)",
+ "description": "Used by `--spectrum-badge-subtle-background-color-negative`.",
+ "control": "color",
+ "category": "Global"
+ },
+ "spectrum-positive-subtle-background-color-default": {
+ "value": "var(--spectrum-positive-color-200)",
+ "description": "Used by `--spectrum-badge-subtle-background-color-positive`.",
+ "control": "color",
+ "category": "Global"
+ },
+ "spectrum-notice-subtle-background-color-default": {
+ "value": "var(--spectrum-notice-color-200)",
+ "description": "Used by `--spectrum-badge-subtle-background-color-notice`.",
+ "control": "color",
+ "category": "Global"
+ },
+ "spectrum-gray-subtle-background-color-default": {
+ "value": "var(--spectrum-gray-100)",
+ "description": "Used by `--spectrum-badge-subtle-background-color-gray`.",
+ "control": "color",
+ "category": "Global"
+ },
+ "spectrum-red-subtle-background-color-default": {
+ "value": "var(--spectrum-red-200)",
+ "description": "Used by `--spectrum-badge-subtle-background-color-red`.",
+ "control": "color",
+ "category": "Global"
+ },
+ "spectrum-orange-subtle-background-color-default": {
+ "value": "var(--spectrum-orange-200)",
+ "description": "Used by `--spectrum-badge-subtle-background-color-orange`.",
+ "control": "color",
+ "category": "Global"
+ },
+ "spectrum-yellow-subtle-background-color-default": {
+ "value": "var(--spectrum-yellow-200)",
+ "description": "Used by `--spectrum-badge-subtle-background-color-yellow`.",
+ "control": "color",
+ "category": "Global"
+ },
+ "spectrum-chartreuse-subtle-background-color-default": {
+ "value": "var(--spectrum-chartreuse-200)",
+ "description": "Used by `--spectrum-badge-subtle-background-color-chartreuse`.",
+ "control": "color",
+ "category": "Global"
+ },
+ "spectrum-celery-subtle-background-color-default": {
+ "value": "var(--spectrum-celery-200)",
+ "description": "Used by `--spectrum-badge-subtle-background-color-celery`.",
+ "control": "color",
+ "category": "Global"
+ },
+ "spectrum-green-subtle-background-color-default": {
+ "value": "var(--spectrum-green-200)",
+ "description": "Used by `--spectrum-badge-subtle-background-color-green`.",
+ "control": "color",
+ "category": "Global"
+ },
+ "spectrum-seafoam-subtle-background-color-default": {
+ "value": "var(--spectrum-seafoam-200)",
+ "description": "Used by `--spectrum-badge-subtle-background-color-seafoam`.",
+ "control": "color",
+ "category": "Global"
+ },
+ "spectrum-cyan-subtle-background-color-default": {
+ "value": "var(--spectrum-cyan-200)",
+ "description": "Used by `--spectrum-badge-subtle-background-color-cyan`.",
+ "control": "color",
+ "category": "Global"
+ },
+ "spectrum-blue-subtle-background-color-default": {
+ "value": "var(--spectrum-blue-200)",
+ "description": "Used by `--spectrum-badge-subtle-background-color-blue`.",
+ "control": "color",
+ "category": "Global"
+ },
+ "spectrum-indigo-subtle-background-color-default": {
+ "value": "var(--spectrum-indigo-200)",
+ "description": "Used by `--spectrum-badge-subtle-background-color-indigo`.",
+ "control": "color",
+ "category": "Global"
+ },
+ "spectrum-purple-subtle-background-color-default": {
+ "value": "var(--spectrum-purple-200)",
+ "description": "Used by `--spectrum-badge-subtle-background-color-purple`.",
+ "control": "color",
+ "category": "Global"
+ },
+ "spectrum-fuchsia-subtle-background-color-default": {
+ "value": "var(--spectrum-fuchsia-200)",
+ "description": "Used by `--spectrum-badge-subtle-background-color-fuchsia`.",
+ "control": "color",
+ "category": "Global"
+ },
+ "spectrum-magenta-subtle-background-color-default": {
+ "value": "var(--spectrum-magenta-200)",
+ "description": "Used by `--spectrum-badge-subtle-background-color-magenta`.",
+ "control": "color",
+ "category": "Global"
+ },
+ "spectrum-pink-subtle-background-color-default": {
+ "value": "var(--spectrum-pink-200)",
+ "description": "Used by `--spectrum-badge-subtle-background-color-pink`.",
+ "control": "color",
+ "category": "Global"
+ },
+ "spectrum-turquoise-subtle-background-color-default": {
+ "value": "var(--spectrum-turquoise-200)",
+ "description": "Used by `--spectrum-badge-subtle-background-color-turquoise`.",
+ "control": "color",
+ "category": "Global"
+ },
+ "spectrum-brown-subtle-background-color-default": {
+ "value": "var(--spectrum-brown-200)",
+ "description": "Used by `--spectrum-badge-subtle-background-color-brown`.",
+ "control": "color",
+ "category": "Global"
+ },
+ "spectrum-cinnamon-subtle-background-color-default": {
+ "value": "var(--spectrum-cinnamon-200)",
+ "description": "Used by `--spectrum-badge-subtle-background-color-cinnamon`.",
+ "control": "color",
+ "category": "Global"
+ },
+ "spectrum-silver-subtle-background-color-default": {
+ "value": "var(--spectrum-silver-200)",
+ "description": "Used by `--spectrum-badge-subtle-background-color-silver`.",
+ "control": "color",
+ "category": "Global"
+ },
+ "spectrum-background-layer-2-color": {
+ "value": "var(--spectrum-gray-25)",
+ "description": "Used by `--spectrum-badge-outline-background-color`.",
+ "control": "color",
+ "category": "Global"
+ },
+ "spectrum-neutral-visual-color": {
+ "value": "var(--spectrum-gray-500)",
+ "description": "Used by `--spectrum-badge-outline-border-color-neutral`.",
+ "control": "color",
+ "category": "Global"
+ },
+ "spectrum-accent-visual-color": {
+ "value": "var(--spectrum-accent-color-800)",
+ "description": "Used by `--spectrum-badge-outline-border-color-accent`.",
+ "control": "color",
+ "category": "Global"
+ },
+ "spectrum-informative-visual-color": {
+ "value": "var(--spectrum-informative-color-800)",
+ "description": "Used by `--spectrum-badge-outline-border-color-informative`.",
+ "control": "color",
+ "category": "Global"
+ },
+ "spectrum-negative-visual-color": {
+ "value": "var(--spectrum-negative-color-800)",
+ "description": "Used by `--spectrum-badge-outline-border-color-negative`.",
+ "control": "color",
+ "category": "Global"
+ },
+ "spectrum-notice-visual-color": {
+ "value": "var(--spectrum-notice-color-800)",
+ "description": "Used by `--spectrum-badge-outline-border-color-notice`.",
+ "control": "color",
+ "category": "Global"
+ },
+ "spectrum-positive-visual-color": {
+ "value": "var(--spectrum-positive-color-800)",
+ "description": "Used by `--spectrum-badge-outline-border-color-positive`.",
+ "control": "color",
+ "category": "Global"
+ },
+ "spectrum-corner-radius-medium-size-medium": {
+ "value": "8px",
+ "description": "Used by `--spectrum-badge-corner-radius`.",
+ "control": "text",
+ "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-corner-radius-medium-size-small": {
+ "value": "7px",
+ "description": "Used by `--spectrum-badge-corner-radius`.",
+ "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": "9px",
+ "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": "7px",
+ "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-corner-radius-medium-size-large": {
+ "value": "9px",
+ "description": "Used by `--spectrum-badge-corner-radius`.",
+ "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-corner-radius-medium-size-extra-large": {
+ "value": "10px",
+ "description": "Used by `--spectrum-badge-corner-radius`.",
+ "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": "18px",
+ "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": "15px",
+ "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"
+ }
+ },
+ "passthroughs": {},
+ "high-contrast": {
+ "highcontrast-badge-border-color": {
+ "value": "CanvasText",
+ "description": "Defined in `.spectrum-Badge`.
Used by `.spectrum-Badge`.
Defaults to `CanvasText`, if not set.",
+ "control": "color"
+ }
+ }
}
diff --git a/components/badge/stories/badge.stories.js b/components/badge/stories/badge.stories.js
index e5027efded1..ef988342cb2 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";
+
/**
* Badges are for showing a small amount of color-categorized metadata. They're ideal for getting a user's attention. There are two additional styles - subtle fill and outline - in addition to the default, bold fill style.
*
@@ -83,6 +85,10 @@ export default {
status: {
type: "migrated",
},
+ cssprops: {
+ ...metadata.modifiers,
+ ...metadata.component,
+ },
},
tags: ["migrated"]
};
diff --git a/components/breadcrumb/dist/metadata.json b/components/breadcrumb/dist/metadata.json
index 01ed6639e32..e47749fc3cf 100644
--- a/components/breadcrumb/dist/metadata.json
+++ b/components/breadcrumb/dist/metadata.json
@@ -9,16 +9,16 @@
".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:first-of-type > .spectrum-Breadcrumbs-itemLink",
".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 + .spectrum-Breadcrumbs-itemSeparator",
- ".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]:active",
@@ -31,134 +31,695 @@
".spectrum-Breadcrumbs-itemSeparator",
".spectrum-Breadcrumbs-itemSeparator:dir(rtl)"
],
- "modifiers": [
- "--mod-breadcrumbs-action-button-color",
- "--mod-breadcrumbs-action-button-color-disabled",
- "--mod-breadcrumbs-action-button-spacing-block",
- "--mod-breadcrumbs-action-button-spacing-inline",
- "--mod-breadcrumbs-block-size",
- "--mod-breadcrumbs-focus-indicator-color",
- "--mod-breadcrumbs-focus-indicator-gap",
- "--mod-breadcrumbs-focus-indicator-thickness",
- "--mod-breadcrumbs-font-family",
- "--mod-breadcrumbs-font-family-current",
- "--mod-breadcrumbs-font-size",
- "--mod-breadcrumbs-font-size-current",
- "--mod-breadcrumbs-font-style",
- "--mod-breadcrumbs-font-weight",
- "--mod-breadcrumbs-font-weight-current",
- "--mod-breadcrumbs-icon-spacing-block",
- "--mod-breadcrumbs-inline-end",
- "--mod-breadcrumbs-inline-start",
- "--mod-breadcrumbs-inline-start-to-truncated-menu",
- "--mod-breadcrumbs-item-dragged-background",
- "--mod-breadcrumbs-item-link-border-radius",
- "--mod-breadcrumbs-line-height",
- "--mod-breadcrumbs-separator-color",
- "--mod-breadcrumbs-separator-spacing-inline",
- "--mod-breadcrumbs-text-color",
- "--mod-breadcrumbs-text-color-current",
- "--mod-breadcrumbs-text-color-disabled",
- "--mod-breadcrumbs-text-decoration-gap",
- "--mod-breadcrumbs-text-decoration-thickness",
- "--mod-breadcrumbs-text-spacing-block-end",
- "--mod-breadcrumbs-text-spacing-block-start",
- "--mod-breadcrumbs-title-spacing-block-end",
- "--mod-breadcrumbs-title-spacing-block-start",
- "--mod-heading-margin-end",
- "--mod-heading-margin-start"
- ],
- "component": [
- "--spectrum-breadcrumbs-action-button-color",
- "--spectrum-breadcrumbs-action-button-color-disabled",
- "--spectrum-breadcrumbs-action-button-spacing-block",
- "--spectrum-breadcrumbs-action-button-spacing-inline",
- "--spectrum-breadcrumbs-block-size",
- "--spectrum-breadcrumbs-bottom-to-text-multiline",
- "--spectrum-breadcrumbs-end-edge-to-text",
- "--spectrum-breadcrumbs-focus-indicator-color",
- "--spectrum-breadcrumbs-focus-indicator-gap",
- "--spectrum-breadcrumbs-focus-indicator-thickness",
- "--spectrum-breadcrumbs-font-family",
- "--spectrum-breadcrumbs-font-family-current",
- "--spectrum-breadcrumbs-font-size",
- "--spectrum-breadcrumbs-font-size-current",
- "--spectrum-breadcrumbs-font-style",
- "--spectrum-breadcrumbs-font-weight",
- "--spectrum-breadcrumbs-font-weight-current",
- "--spectrum-breadcrumbs-height-multiline",
- "--spectrum-breadcrumbs-icon-spacing-block",
- "--spectrum-breadcrumbs-inline-end",
- "--spectrum-breadcrumbs-inline-start",
- "--spectrum-breadcrumbs-inline-start-to-truncated-menu",
- "--spectrum-breadcrumbs-item-dragged-background",
- "--spectrum-breadcrumbs-item-link-border-radius",
- "--spectrum-breadcrumbs-line-height",
- "--spectrum-breadcrumbs-separator-color",
- "--spectrum-breadcrumbs-separator-spacing-inline",
- "--spectrum-breadcrumbs-separator-to-bottom-text-multiline",
- "--spectrum-breadcrumbs-start-edge-to-text-large",
- "--spectrum-breadcrumbs-start-edge-to-text-medium",
- "--spectrum-breadcrumbs-start-edge-to-text-multiline",
- "--spectrum-breadcrumbs-start-edge-to-truncated-menu",
- "--spectrum-breadcrumbs-text-color",
- "--spectrum-breadcrumbs-text-color-current",
- "--spectrum-breadcrumbs-text-color-disabled",
- "--spectrum-breadcrumbs-text-decoration-gap",
- "--spectrum-breadcrumbs-text-decoration-thickness",
- "--spectrum-breadcrumbs-text-spacing-block-end",
- "--spectrum-breadcrumbs-text-spacing-block-start",
- "--spectrum-breadcrumbs-text-to-separator-large",
- "--spectrum-breadcrumbs-text-to-separator-medium",
- "--spectrum-breadcrumbs-text-to-separator-multiline",
- "--spectrum-breadcrumbs-title-spacing-block-end",
- "--spectrum-breadcrumbs-title-spacing-block-start",
- "--spectrum-breadcrumbs-top-text-to-bottom-text",
- "--spectrum-breadcrumbs-top-to-separator-large",
- "--spectrum-breadcrumbs-top-to-separator-medium",
- "--spectrum-breadcrumbs-top-to-separator-multiline",
- "--spectrum-breadcrumbs-top-to-text-multiline",
- "--spectrum-breadcrumbs-top-to-truncated-menu",
- "--spectrum-breadcrumbs-truncated-menu-to-bottom-text",
- "--spectrum-breadcrumbs-truncated-menu-to-separator"
- ],
- "global": [
- "--spectrum-bold-font-weight",
- "--spectrum-component-bottom-to-text-100",
- "--spectrum-component-bottom-to-text-200",
- "--spectrum-component-height-100",
- "--spectrum-component-height-200",
- "--spectrum-component-top-to-text-100",
- "--spectrum-component-top-to-text-200",
- "--spectrum-corner-radius-small-default",
- "--spectrum-default-font-style",
- "--spectrum-disabled-content-color",
- "--spectrum-drop-zone-background-color-opacity",
- "--spectrum-drop-zone-background-color-rgb",
- "--spectrum-extra-bold-font-weight",
- "--spectrum-focus-indicator-color",
- "--spectrum-focus-indicator-gap",
- "--spectrum-focus-indicator-thickness",
- "--spectrum-font-size-100",
- "--spectrum-font-size-200",
- "--spectrum-font-size-75",
- "--spectrum-heading-size-l",
- "--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-underline-gap",
- "--spectrum-text-underline-thickness"
- ],
- "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-heading-margin-end": {
+ "description": "Defined in `.spectrum-Breadcrumbs`.
Defaults to `0px`, if not set.",
+ "control": "text",
+ "category": "Modifier"
+ },
+ "mod-heading-margin-start": {
+ "description": "Defined in `.spectrum-Breadcrumbs`.
Defaults to `0px`, if not set.",
+ "control": "text",
+ "category": "Modifier"
+ },
+ "mod-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": {
+ "description": "Used by `.spectrum-Breadcrumbs`.
Defaults to `var(--spectrum-breadcrumbs-block-size)`, if not set.",
+ "control": "text",
+ "category": "Modifier"
+ },
+ "mod-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-color": {
+ "description": "Used by `.spectrum-Breadcrumbs-itemSeparator`.
Defaults to `var(--spectrum-breadcrumbs-separator-color)`, if not set.",
+ "control": "color",
+ "category": "Modifier"
+ },
+ "mod-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": {
+ "description": "Used by `.spectrum-Breadcrumbs-item`.
Defaults to `var(--spectrum-breadcrumbs-font-size)`, if not set.",
+ "control": "text",
+ "category": "Modifier"
+ },
+ "mod-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-font-style": {
+ "description": "Used by `.spectrum-Breadcrumbs-item`.
Defaults to `var(--spectrum-breadcrumbs-font-style)`, if not set.",
+ "control": "text",
+ "category": "Modifier"
+ },
+ "mod-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-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": {
+ "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": {
+ "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-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": {
+ "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": {
+ "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": {
+ "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-inline-start": {
+ "description": "Used by `.spectrum-Breadcrumbs-item:first-of-type > .spectrum-Breadcrumbs-itemLink`, `.spectrum-Breadcrumbs--multiline .spectrum-Breadcrumbs-item:last-of-type > .spectrum-Breadcrumbs-itemLink`.
Defaults to `var(--spectrum-breadcrumbs-inline-start)`, if not set.",
+ "control": "text",
+ "category": "Modifier"
+ },
+ "mod-breadcrumbs-inline-start-to-truncated-menu": {
+ "description": "Used by `.spectrum-Breadcrumbs-item:first-of-type > .spectrum-ActionButton`.
Defaults to `var(--spectrum-breadcrumbs-inline-start-to-truncated-menu)`, if not set.",
+ "control": "text",
+ "category": "Modifier"
+ },
+ "mod-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": {
+ "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": {
+ "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": {
+ "description": "Used by `.spectrum-Breadcrumbs-itemLink`.
Defaults to `var(--spectrum-breadcrumbs-text-spacing-block-end)`, if not set.",
+ "control": "text",
+ "category": "Modifier"
+ },
+ "mod-breadcrumbs-separator-spacing-inline": {
+ "description": "Used by `.spectrum-Breadcrumbs-itemLink`, `.spectrum-Breadcrumbs-itemLink + .spectrum-Breadcrumbs-itemSeparator`.
Defaults to `var(--spectrum-breadcrumbs-separator-spacing-inline)`, if not set.",
+ "control": "text",
+ "category": "Modifier"
+ },
+ "mod-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": {
+ "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-title-spacing-block-start": {
+ "description": "Used by `.spectrum-Breadcrumbs-item:last-of-type .spectrum-Breadcrumbs-itemLink`.
Defaults to `var(--spectrum-breadcrumbs-title-spacing-block-start)`, if not set.",
+ "control": "text",
+ "category": "Modifier"
+ },
+ "mod-breadcrumbs-title-spacing-block-end": {
+ "description": "Used by `.spectrum-Breadcrumbs-item:last-of-type .spectrum-Breadcrumbs-itemLink`.
Defaults to `var(--spectrum-breadcrumbs-title-spacing-block-end)`, if not set.",
+ "control": "text",
+ "category": "Modifier"
+ },
+ "mod-breadcrumbs-text-decoration-thickness": {
+ "description": "Used by `.spectrum-Breadcrumbs-itemLink[href]:active, .spectrum-Breadcrumbs-itemLink[href]:focus-visible, .spectrum-Breadcrumbs-itemLink[tabindex=\"0\"]:active, .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": {
+ "description": "Used by `.spectrum-Breadcrumbs-itemLink[href]:active, .spectrum-Breadcrumbs-itemLink[href]:focus-visible, .spectrum-Breadcrumbs-itemLink[tabindex=\"0\"]:active, .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": {
+ "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": {
+ "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": {
+ "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"
+ },
+ "mod-breadcrumbs-item-dragged-background": {
+ "description": "Used by `.spectrum-Breadcrumbs-item.is-dragged .spectrum-Breadcrumbs-itemLink:before`.
Defaults to `var(--spectrum-breadcrumbs-item-dragged-background)`, if not set.",
+ "control": "text",
+ "category": "Modifier"
+ }
+ },
+ "component": {
+ "spectrum-breadcrumbs-block-size": {
+ "value": "72px",
+ "description": "Defined in `.spectrum-Breadcrumbs`, `.spectrum-Breadcrumbs--sizeL`, `.spectrum-Breadcrumbs--multiline`.
Used by `.spectrum-Breadcrumbs`.
Defaults to `var(--spectrum-breadcrumbs-height-multiline)`, if not set.",
+ "control": "text",
+ "category": "Component"
+ },
+ "spectrum-breadcrumbs-line-height": {
+ "value": "1.3",
+ "description": "Defined in `.spectrum-Breadcrumbs`.
Used by `.spectrum-Breadcrumbs-item`.
Defaults to `var(--spectrum-line-height-100)`, if not set.",
+ "control": "text",
+ "category": "Component"
+ },
+ "spectrum-breadcrumbs-font-size": {
+ "value": "12px",
+ "description": "Defined in `.spectrum-Breadcrumbs`, `.spectrum-Breadcrumbs--sizeL`, `.spectrum-Breadcrumbs--multiline`.
Used by `.spectrum-Breadcrumbs-item`.
Defaults to `var(--spectrum-font-size-75)`, if not set.",
+ "control": "text",
+ "category": "Component"
+ },
+ "spectrum-breadcrumbs-font-family": {
+ "value": "var(--spectrum-sans-font-family-stack)",
+ "description": "Defined in `.spectrum-Breadcrumbs`.
Used by `.spectrum-Breadcrumbs-item`.
Defaults to `var(--spectrum-sans-font-family-stack)`, if not set.",
+ "control": "text",
+ "category": "Component"
+ },
+ "spectrum-breadcrumbs-font-weight": {
+ "value": "400",
+ "description": "Defined in `.spectrum-Breadcrumbs`.
Used by `.spectrum-Breadcrumbs-item`.
Defaults to `var(--spectrum-regular-font-weight)`, if not set.",
+ "control": "text",
+ "category": "Component"
+ },
+ "spectrum-breadcrumbs-font-style": {
+ "value": "normal",
+ "description": "Defined in `.spectrum-Breadcrumbs`.
Used by `.spectrum-Breadcrumbs-item`.
Defaults to `var(--spectrum-default-font-style)`, if not set.",
+ "control": "text",
+ "category": "Component"
+ },
+ "spectrum-breadcrumbs-font-size-current": {
+ "value": "var(--spectrum-font-size-700)",
+ "description": "Defined in `.spectrum-Breadcrumbs`, `.spectrum-Breadcrumbs--sizeL`, `.spectrum-Breadcrumbs--multiline`.
Used by `.spectrum-Breadcrumbs-item:last-of-type`.
Defaults to `var(--spectrum-heading-size-l)`, if not set.",
+ "control": "text",
+ "category": "Component"
+ },
+ "spectrum-breadcrumbs-font-family-current": {
+ "value": "var(--spectrum-sans-font-family-stack)",
+ "description": "Defined in `.spectrum-Breadcrumbs`.
Used by `.spectrum-Breadcrumbs-item:last-of-type`.
Defaults to `var(--spectrum-sans-font-family-stack)`, if not set.",
+ "control": "text",
+ "category": "Component"
+ },
+ "spectrum-breadcrumbs-font-weight-current": {
+ "value": "800",
+ "description": "Defined in `.spectrum-Breadcrumbs`, `.spectrum-Breadcrumbs--multiline`.
Used by `.spectrum-Breadcrumbs-item:last-of-type`.
Defaults to `var(--spectrum-extra-bold-font-weight)`, if not set.",
+ "control": "text",
+ "category": "Component"
+ },
+ "spectrum-breadcrumbs-text-decoration-thickness": {
+ "value": "1px",
+ "description": "Defined in `.spectrum-Breadcrumbs`.
Used by `.spectrum-Breadcrumbs-itemLink[href]:active, .spectrum-Breadcrumbs-itemLink[href]:focus-visible, .spectrum-Breadcrumbs-itemLink[tabindex=\"0\"]:active, .spectrum-Breadcrumbs-itemLink[tabindex=\"0\"]:focus-visible`, `.spectrum-Breadcrumbs-itemLink[href]:hover, .spectrum-Breadcrumbs-itemLink[tabindex=\"0\"]:hover`.
Defaults to `var(--spectrum-text-underline-thickness)`, if not set.",
+ "control": "text",
+ "category": "Component"
+ },
+ "spectrum-breadcrumbs-text-decoration-gap": {
+ "value": "1px",
+ "description": "Defined in `.spectrum-Breadcrumbs`.
Used by `.spectrum-Breadcrumbs-itemLink[href]:active, .spectrum-Breadcrumbs-itemLink[href]:focus-visible, .spectrum-Breadcrumbs-itemLink[tabindex=\"0\"]:active, .spectrum-Breadcrumbs-itemLink[tabindex=\"0\"]:focus-visible`, `.spectrum-Breadcrumbs-itemLink[href]:hover, .spectrum-Breadcrumbs-itemLink[tabindex=\"0\"]:hover`.
Defaults to `var(--spectrum-text-underline-gap)`, if not set.",
+ "control": "text",
+ "category": "Component"
+ },
+ "spectrum-breadcrumbs-separator-spacing-inline": {
+ "value": "4px",
+ "description": "Defined in `.spectrum-Breadcrumbs`, `.spectrum-Breadcrumbs--sizeL`, `.spectrum-Breadcrumbs--multiline`.
Used by `.spectrum-Breadcrumbs-itemLink`, `.spectrum-Breadcrumbs-itemLink + .spectrum-Breadcrumbs-itemSeparator`.
Defaults to `var(--spectrum-breadcrumbs-text-to-separator-multiline)`, if not set.",
+ "control": "text",
+ "category": "Component"
+ },
+ "spectrum-breadcrumbs-text-to-separator-medium": {
+ "value": "6px",
+ "description": "Used by `--spectrum-breadcrumbs-separator-spacing-inline`.",
+ "control": "text",
+ "category": "Component"
+ },
+ "spectrum-breadcrumbs-text-spacing-block-start": {
+ "value": "4px",
+ "description": "Defined in `.spectrum-Breadcrumbs`, `.spectrum-Breadcrumbs--sizeL`, `.spectrum-Breadcrumbs--multiline`.
Used by `--spectrum-breadcrumbs-title-spacing-block-start`, `.spectrum-Breadcrumbs-itemLink`.
Defaults to `var(--spectrum-breadcrumbs-top-to-text-multiline)`, if not set.",
+ "control": "text",
+ "category": "Component"
+ },
+ "spectrum-breadcrumbs-text-spacing-block-end": {
+ "value": "9px",
+ "description": "Defined in `.spectrum-Breadcrumbs`, `.spectrum-Breadcrumbs--sizeL`, `.spectrum-Breadcrumbs--multiline`.
Used by `--spectrum-breadcrumbs-title-spacing-block-end`, `.spectrum-Breadcrumbs-itemLink`.
Defaults to `var(--spectrum-breadcrumbs-top-text-to-bottom-text)`, if not set.",
+ "control": "text",
+ "category": "Component"
+ },
+ "spectrum-breadcrumbs-icon-spacing-block": {
+ "value": "var(--spectrum-breadcrumbs-top-to-separator-multiline) var(--spectrum-breadcrumbs-separator-to-bottom-text-multiline)",
+ "description": "Defined in `.spectrum-Breadcrumbs`, `.spectrum-Breadcrumbs--sizeL`, `.spectrum-Breadcrumbs--multiline`.
Used by `.spectrum-Breadcrumbs-itemSeparator`.
Defaults to `var(--spectrum-breadcrumbs-top-to-separator-multiline) var(--spectrum-breadcrumbs-separator-to-bottom-text-multiline)`, if not set.",
+ "control": "text",
+ "category": "Component"
+ },
+ "spectrum-breadcrumbs-top-to-separator-medium": {
+ "value": "11px",
+ "description": "Used by `--spectrum-breadcrumbs-icon-spacing-block`.",
+ "control": "text",
+ "category": "Component"
+ },
+ "spectrum-breadcrumbs-title-spacing-block-start": {
+ "value": "0",
+ "description": "Defined in `.spectrum-Breadcrumbs`, `.spectrum-Breadcrumbs--multiline`.
Used by `.spectrum-Breadcrumbs-item:last-of-type .spectrum-Breadcrumbs-itemLink`.
Defaults to `0`, if not set.",
+ "control": "text",
+ "category": "Component"
+ },
+ "spectrum-breadcrumbs-title-spacing-block-end": {
+ "value": "9px",
+ "description": "Defined in `.spectrum-Breadcrumbs`, `.spectrum-Breadcrumbs--multiline`.
Used by `.spectrum-Breadcrumbs-item:last-of-type .spectrum-Breadcrumbs-itemLink`.
Defaults to `var(--spectrum-breadcrumbs-bottom-to-text-multiline)`, if not set.",
+ "control": "text",
+ "category": "Component"
+ },
+ "spectrum-breadcrumbs-inline-start": {
+ "value": "4px",
+ "description": "Defined in `.spectrum-Breadcrumbs`, `.spectrum-Breadcrumbs--sizeL`, `.spectrum-Breadcrumbs--multiline`.
Used by `.spectrum-Breadcrumbs-item:first-of-type > .spectrum-Breadcrumbs-itemLink`, `.spectrum-Breadcrumbs--multiline .spectrum-Breadcrumbs-item:last-of-type > .spectrum-Breadcrumbs-itemLink`.
Defaults to `var(--spectrum-breadcrumbs-start-edge-to-text-multiline)`, if not set.",
+ "control": "text",
+ "category": "Component"
+ },
+ "spectrum-breadcrumbs-start-edge-to-text-medium": {
+ "value": "6px",
+ "description": "Used by `--spectrum-breadcrumbs-inline-start`.",
+ "control": "text",
+ "category": "Component"
+ },
+ "spectrum-breadcrumbs-inline-end": {
+ "value": "0px",
+ "description": "Defined in `.spectrum-Breadcrumbs`.
Used by `.spectrum-Breadcrumbs`.
Defaults to `var(--spectrum-breadcrumbs-end-edge-to-text)`, if not set.",
+ "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-inline-start-to-truncated-menu": {
+ "value": "0px",
+ "description": "Defined in `.spectrum-Breadcrumbs`.
Used by `.spectrum-Breadcrumbs-item:first-of-type > .spectrum-ActionButton`.
Defaults to `var(--spectrum-breadcrumbs-start-edge-to-truncated-menu)`, if not set.",
+ "control": "text",
+ "category": "Component"
+ },
+ "spectrum-breadcrumbs-start-edge-to-truncated-menu": {
+ "value": "0px",
+ "description": "Used by `--spectrum-breadcrumbs-inline-start-to-truncated-menu`.",
+ "control": "text",
+ "category": "Component"
+ },
+ "spectrum-breadcrumbs-action-button-spacing-inline": {
+ "value": "0px",
+ "description": "Defined in `.spectrum-Breadcrumbs`.
Used by `.spectrum-Breadcrumbs-item > .spectrum-ActionButton`.
Defaults to `var(--spectrum-breadcrumbs-truncated-menu-to-separator)`, if not set.",
+ "control": "text",
+ "category": "Component"
+ },
+ "spectrum-breadcrumbs-truncated-menu-to-separator": {
+ "value": "0px",
+ "description": "Used by `--spectrum-breadcrumbs-action-button-spacing-inline`.",
+ "control": "text",
+ "category": "Component"
+ },
+ "spectrum-breadcrumbs-action-button-spacing-block": {
+ "value": "var(--spectrum-breadcrumbs-top-to-truncated-menu) var(--spectrum-breadcrumbs-truncated-menu-to-bottom-text)",
+ "description": "Defined in `.spectrum-Breadcrumbs`, `.spectrum-Breadcrumbs--multiline`.
Used by `.spectrum-Breadcrumbs-item > .spectrum-ActionButton`.
Defaults to `var(--spectrum-breadcrumbs-top-to-truncated-menu) var(--spectrum-breadcrumbs-truncated-menu-to-bottom-text)`, if not set.",
+ "control": "text",
+ "category": "Component"
+ },
+ "spectrum-breadcrumbs-top-to-truncated-menu": {
+ "value": "0px",
+ "description": "Used by `--spectrum-breadcrumbs-action-button-spacing-block`.",
+ "control": "text",
+ "category": "Component"
+ },
+ "spectrum-breadcrumbs-focus-indicator-thickness": {
+ "value": "2px",
+ "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(--spectrum-focus-indicator-thickness)`, if not set.",
+ "control": "text",
+ "category": "Component"
+ },
+ "spectrum-breadcrumbs-focus-indicator-gap": {
+ "value": "2px",
+ "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(--spectrum-focus-indicator-gap)`, if not set.",
+ "control": "text",
+ "category": "Component"
+ },
+ "spectrum-breadcrumbs-item-link-border-radius": {
+ "value": "4px",
+ "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`.
Defaults to `var(--spectrum-corner-radius-small-default)`, if not set.",
+ "control": "text",
+ "category": "Component"
+ },
+ "spectrum-breadcrumbs-text-color": {
+ "value": "var(--spectrum-gray-700)",
+ "description": "Defined in `.spectrum-Breadcrumbs`.
Used by `.spectrum-Breadcrumbs-itemLink`.
Defaults to `var(--spectrum-neutral-subdued-content-color-default)`, if not set.",
+ "control": "color",
+ "category": "Component"
+ },
+ "spectrum-breadcrumbs-text-color-current": {
+ "value": "var(--spectrum-gray-800)",
+ "description": "Defined in `.spectrum-Breadcrumbs`.
Used by `.spectrum-Breadcrumbs-item:last-of-type .spectrum-Breadcrumbs-itemLink`.
Defaults to `var(--spectrum-neutral-content-color-default)`, if not set.",
+ "control": "color",
+ "category": "Component"
+ },
+ "spectrum-breadcrumbs-text-color-disabled": {
+ "value": "var(--spectrum-gray-400)",
+ "description": "Defined in `.spectrum-Breadcrumbs`.
Used by `.spectrum-Breadcrumbs-itemLink.is-disabled, .spectrum-Breadcrumbs-itemLink[aria-disabled=\"true\"]`.
Defaults to `var(--spectrum-disabled-content-color)`, if not set.",
+ "control": "color",
+ "category": "Component"
+ },
+ "spectrum-breadcrumbs-separator-color": {
+ "value": "var(--spectrum-gray-800)",
+ "description": "Defined in `.spectrum-Breadcrumbs`.
Used by `.spectrum-Breadcrumbs-itemSeparator`.
Defaults to `var(--spectrum-neutral-content-color-default)`, if not set.",
+ "control": "color",
+ "category": "Component"
+ },
+ "spectrum-breadcrumbs-action-button-color": {
+ "value": "var(--spectrum-gray-700)",
+ "description": "Defined in `.spectrum-Breadcrumbs`.
Used by `.spectrum-Breadcrumbs-item > .spectrum-ActionButton`.
Defaults to `var(--spectrum-neutral-subdued-content-color-default)`, if not set.",
+ "control": "color",
+ "category": "Component"
+ },
+ "spectrum-breadcrumbs-action-button-color-disabled": {
+ "value": "var(--spectrum-gray-400)",
+ "description": "Defined in `.spectrum-Breadcrumbs`.
Used by `.spectrum-Breadcrumbs-item > .spectrum-ActionButton:disabled`.
Defaults to `var(--spectrum-disabled-content-color)`, if not set.",
+ "control": "color",
+ "category": "Component"
+ },
+ "spectrum-breadcrumbs-focus-indicator-color": {
+ "value": "var(--spectrum-blue-800)",
+ "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(--spectrum-focus-indicator-color)`, if not set.",
+ "control": "color",
+ "category": "Component"
+ },
+ "spectrum-breadcrumbs-item-dragged-background": {
+ "value": "rgb(var(--spectrum-drop-zone-background-color-rgb), var(--spectrum-drop-zone-background-color-opacity))",
+ "description": "Defined in `.spectrum-Breadcrumbs`.
Used by `.spectrum-Breadcrumbs-item.is-dragged .spectrum-Breadcrumbs-itemLink:before`.
Defaults to `rgb(var(--spectrum-drop-zone-background-color-rgb), var(--spectrum-drop-zone-background-color-opacity))`, if not set.",
+ "control": "text",
+ "category": "Component"
+ },
+ "spectrum-breadcrumbs-text-to-separator-large": {
+ "value": "9px",
+ "description": "Used by `--spectrum-breadcrumbs-separator-spacing-inline`.",
+ "control": "text",
+ "category": "Component"
+ },
+ "spectrum-breadcrumbs-top-to-separator-large": {
+ "value": "15px",
+ "description": "Used by `--spectrum-breadcrumbs-icon-spacing-block`.",
+ "control": "text",
+ "category": "Component"
+ },
+ "spectrum-breadcrumbs-start-edge-to-text-large": {
+ "value": "9px",
+ "description": "Used by `--spectrum-breadcrumbs-inline-start`.",
+ "control": "text",
+ "category": "Component"
+ },
+ "spectrum-breadcrumbs-height-multiline": {
+ "value": "72px",
+ "description": "Used by `--spectrum-breadcrumbs-block-size`.",
+ "control": "text",
+ "category": "Component"
+ },
+ "spectrum-breadcrumbs-text-to-separator-multiline": {
+ "value": "4px",
+ "description": "Used by `--spectrum-breadcrumbs-separator-spacing-inline`.",
+ "control": "text",
+ "category": "Component"
+ },
+ "spectrum-breadcrumbs-top-to-text-multiline": {
+ "value": "4px",
+ "description": "Used by `--spectrum-breadcrumbs-text-spacing-block-start`.",
+ "control": "text",
+ "category": "Component"
+ },
+ "spectrum-breadcrumbs-top-text-to-bottom-text": {
+ "value": "9px",
+ "description": "Used by `--spectrum-breadcrumbs-text-spacing-block-end`.",
+ "control": "text",
+ "category": "Component"
+ },
+ "spectrum-breadcrumbs-top-to-separator-multiline": {
+ "value": "7px",
+ "description": "Used by `--spectrum-breadcrumbs-icon-spacing-block`.",
+ "control": "text",
+ "category": "Component"
+ },
+ "spectrum-breadcrumbs-separator-to-bottom-text-multiline": {
+ "value": "11px",
+ "description": "Used by `--spectrum-breadcrumbs-icon-spacing-block`.",
+ "control": "text",
+ "category": "Component"
+ },
+ "spectrum-breadcrumbs-bottom-to-text-multiline": {
+ "value": "9px",
+ "description": "Used by `--spectrum-breadcrumbs-title-spacing-block-end`.",
+ "control": "text",
+ "category": "Component"
+ },
+ "spectrum-breadcrumbs-start-edge-to-text-multiline": {
+ "value": "4px",
+ "description": "Used by `--spectrum-breadcrumbs-inline-start`.",
+ "control": "text",
+ "category": "Component"
+ },
+ "spectrum-breadcrumbs-truncated-menu-to-bottom-text": {
+ "value": "4px",
+ "description": "Used by `--spectrum-breadcrumbs-action-button-spacing-block`.",
+ "control": "text",
+ "category": "Component"
+ }
+ },
+ "global": {
+ "spectrum-component-height-100": {
+ "value": "32px",
+ "description": "Used by `--spectrum-breadcrumbs-block-size`.",
+ "control": "text",
+ "category": "Global"
+ },
+ "spectrum-line-height-100": {
+ "value": "1.3",
+ "description": "Used by `--spectrum-breadcrumbs-line-height`.",
+ "control": "text",
+ "category": "Global"
+ },
+ "spectrum-font-size-100": {
+ "value": "14px",
+ "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`.",
+ "control": "text",
+ "category": "Global"
+ },
+ "spectrum-regular-font-weight": {
+ "value": "400",
+ "description": "Used by `--spectrum-breadcrumbs-font-weight`.",
+ "control": "text",
+ "category": "Global"
+ },
+ "spectrum-default-font-style": {
+ "value": "normal",
+ "description": "Used by `--spectrum-breadcrumbs-font-style`.",
+ "control": "text",
+ "category": "Global"
+ },
+ "spectrum-bold-font-weight": {
+ "value": "700",
+ "description": "Used by `--spectrum-breadcrumbs-font-weight-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-component-top-to-text-100": {
+ "value": "6px",
+ "description": "Used by `--spectrum-breadcrumbs-text-spacing-block-start`.",
+ "control": "text",
+ "category": "Global"
+ },
+ "spectrum-component-bottom-to-text-100": {
+ "value": "9px",
+ "description": "Used by `--spectrum-breadcrumbs-text-spacing-block-end`.",
+ "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-small-default": {
+ "value": "4px",
+ "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"
+ },
+ "spectrum-drop-zone-background-color-rgb": {
+ "description": "Used by `--spectrum-breadcrumbs-item-dragged-background`.",
+ "control": "color",
+ "category": "Global"
+ },
+ "spectrum-drop-zone-background-color-opacity": {
+ "value": "0.1",
+ "description": "Used by `--spectrum-breadcrumbs-item-dragged-background`.",
+ "control": "color",
+ "category": "Global"
+ },
+ "spectrum-component-height-200": {
+ "value": "40px",
+ "description": "Used by `--spectrum-breadcrumbs-block-size`.",
+ "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-component-top-to-text-200": {
+ "value": "9px",
+ "description": "Used by `--spectrum-breadcrumbs-text-spacing-block-start`.",
+ "control": "text",
+ "category": "Global"
+ },
+ "spectrum-component-bottom-to-text-200": {
+ "value": "11px",
+ "description": "Used by `--spectrum-breadcrumbs-text-spacing-block-end`.",
+ "control": "text",
+ "category": "Global"
+ },
+ "spectrum-font-size-75": {
+ "value": "12px",
+ "description": "Used by `--spectrum-breadcrumbs-font-size`.",
+ "control": "text",
+ "category": "Global"
+ },
+ "spectrum-heading-size-l": {
+ "value": "var(--spectrum-font-size-700)",
+ "description": "Used by `--spectrum-breadcrumbs-font-size-current`.",
+ "control": "text",
+ "category": "Global"
+ },
+ "spectrum-extra-bold-font-weight": {
+ "value": "800",
+ "description": "Used by `--spectrum-breadcrumbs-font-weight-current`.",
+ "control": "text",
+ "category": "Global"
+ }
+ },
+ "passthroughs": {},
+ "high-contrast": {
+ "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-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-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-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-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 33faf477ad0..8a4a92b7282 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, size } from "@spectrum-css/preview/types";
-import metadata from "../dist/metadata.json";
-import packageJson from "../package.json";
import { BreadcrumbGroup } from "./breadcrumb.test.js";
import { BreadcrumbTitleHeadings, 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.
*/
@@ -141,7 +143,11 @@ export default {
metadata,
status: {
type: "migrated",
- }
+ },
+ cssprops: {
+ ...metadata.modifiers,
+ ...metadata.component,
+ },
},
tags: ["migrated"],
};
diff --git a/components/breadcrumb/stories/template.js b/components/breadcrumb/stories/template.js
index 0a0ad48c0d9..d725f66e683 100644
--- a/components/breadcrumb/stories/template.js
+++ b/components/breadcrumb/stories/template.js
@@ -1,16 +1,19 @@
import { Template as ActionButton } from "@spectrum-css/actionbutton/stories/template.js";
import { Template as Icon } from "@spectrum-css/icon/stories/template.js";
-import { Container } from "@spectrum-css/preview/decorators";
+import { Container, getRandomId } from "@spectrum-css/preview/decorators";
import { Template as Typography } from "@spectrum-css/typography/stories/template.js";
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 Template = ({
rootClass = "spectrum-Breadcrumbs",
+ id = getRandomId("breadcrumbs"),
+ customStyles = {},
customClasses = [],
items = [],
size = "m",
@@ -48,6 +51,8 @@ export const Template = ({
[`${rootClass}--${variant}`]: typeof variant !== "undefined",
...customClasses.reduce((a, c) => ({ ...a, [c]: true }), {}),
})}
+ id=${ifDefined(id)}
+ style=${styleMap(customStyles)}
>
${breadcrumbItems.map((item, idx, arr) => {
const { label, isDisabled, iconName, iconSet } = item;
diff --git a/components/button/dist/metadata.json b/components/button/dist/metadata.json
index 660dfcc6d96..6b737777551 100644
--- a/components/button/dist/metadata.json
+++ b/components/button/dist/metadata.json
@@ -13,6 +13,16 @@
".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:not(.spectrum-Button--primary, .spectrum-Button--negative, .spectrum-Button--secondary, .spectrum-Button--staticBlack, .spectrum-Button--staticWhite)",
+ ".spectrum-Button:not(.spectrum-Button--primary, .spectrum-Button--negative, .spectrum-Button--secondary, .spectrum-Button--staticBlack, .spectrum-Button--staticWhite) .spectrum-Button-label",
".spectrum-Button.is-disabled",
".spectrum-Button.is-focused",
".spectrum-Button.is-focused:after",
@@ -38,234 +48,1162 @@
".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::-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:not(.spectrum-Button--primary, .spectrum-Button--negative, .spectrum-Button--secondary, .spectrum-Button--staticBlack, .spectrum-Button--staticWhite)",
- ".spectrum-Button:not(.spectrum-Button--primary, .spectrum-Button--negative, .spectrum-Button--secondary, .spectrum-Button--staticBlack, .spectrum-Button--staticWhite) .spectrum-Button-label",
".spectrum-Button[pending]",
".spectrum-Button[pending] .spectrum-Button-label",
".spectrum-Button[pending] .spectrum-Icon",
".spectrum-Button[pending] .spectrum-ProgressCircle",
"a.spectrum-Button"
],
- "modifiers": [
- "--mod-button-animation-duration",
- "--mod-button-background-color-default",
- "--mod-button-background-color-disabled",
- "--mod-button-background-color-down",
- "--mod-button-background-color-focus",
- "--mod-button-background-color-hover",
- "--mod-button-border-color-default",
- "--mod-button-border-color-disabled",
- "--mod-button-border-color-down",
- "--mod-button-border-color-focus",
- "--mod-button-border-color-hover",
- "--mod-button-border-radius",
- "--mod-button-border-width",
- "--mod-button-bottom-to-text",
- "--mod-button-content-color-default",
- "--mod-button-content-color-disabled",
- "--mod-button-content-color-down",
- "--mod-button-content-color-focus",
- "--mod-button-content-color-hover",
- "--mod-button-edge-to-text",
- "--mod-button-edge-to-visual",
- "--mod-button-edge-to-visual-only",
- "--mod-button-focus-ring-border-radius",
- "--mod-button-focus-ring-color",
- "--mod-button-focus-ring-gap",
- "--mod-button-focus-ring-thickness",
- "--mod-button-font-family",
- "--mod-button-font-size",
- "--mod-button-font-weight",
- "--mod-button-height",
- "--mod-button-icon-margin-block-start",
- "--mod-button-line-height",
- "--mod-button-margin-block",
- "--mod-button-margin-left",
- "--mod-button-margin-right",
- "--mod-button-max-inline-size",
- "--mod-button-min-width",
- "--mod-button-padding-label-to-icon",
- "--mod-button-text-align",
- "--mod-button-text-align-with-icon",
- "--mod-button-top-to-icon",
- "--mod-button-top-to-text"
- ],
- "component": [
- "--spectrum-button-animation-duration",
- "--spectrum-button-background-color-default",
- "--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-font-weight",
- "--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-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-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-size-difference-down",
- "--spectrum-component-size-minimum-perspective-down",
- "--spectrum-component-size-width-ratio-down",
- "--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-full",
- "--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-downstate-height",
- "--spectrum-downstate-perspective",
- "--spectrum-downstate-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-25",
- "--spectrum-gray-300",
- "--spectrum-gray-400",
- "--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-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-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"
- ],
- "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",
- "--highcontrast-button-focus-ring-color"
- ]
+ "modifiers": {
+ "mod-button-font-family": {
+ "description": "Used by `.spectrum-Button`.
Defaults to `var(--spectrum-sans-font-family-stack)`, if not set.",
+ "control": "text",
+ "category": "Modifier"
+ },
+ "mod-button-line-height": {
+ "description": "Used by `.spectrum-Button`, `.spectrum-Button-label`.
Defaults to `var(--spectrum-button-line-height)`, if not set.",
+ "control": "text",
+ "category": "Modifier"
+ },
+ "mod-button-animation-duration": {
+ "description": "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`.
Defaults to `var(--spectrum-button-animation-duration, 0.13s)`, if not set.",
+ "control": "text",
+ "category": "Modifier"
+ },
+ "mod-button-border-width": {
+ "description": "Used by `--spectrum-button-edge-to-visual`, `--spectrum-button-edge-to-visual-only`, `--spectrum-button-edge-to-text`, `.spectrum-Button`, `.spectrum-Button .spectrum-Icon`, `.spectrum-Button:after`, `.spectrum-Button-label`.
Defaults to `var(--spectrum-button-border-width)`, if not set.",
+ "control": "text",
+ "category": "Modifier"
+ },
+ "mod-button-border-radius": {
+ "description": "Used by `.spectrum-Button`, `.spectrum-Button:after`.
Defaults to `var(--spectrum-button-border-radius)`, if not set.",
+ "control": "text",
+ "category": "Modifier"
+ },
+ "mod-button-font-size": {
+ "description": "Used by `.spectrum-Button`.
Defaults to `var(--spectrum-button-font-size)`, if not set.",
+ "control": "text",
+ "category": "Modifier"
+ },
+ "mod-button-font-weight": {
+ "description": "Used by `.spectrum-Button`.
Defaults to `var(--spectrum-button-font-weight)`, if not set.",
+ "control": "text",
+ "category": "Modifier"
+ },
+ "mod-button-padding-label-to-icon": {
+ "description": "Used by `.spectrum-Button`.
Defaults to `var(--spectrum-button-padding-label-to-icon)`, if not set.",
+ "control": "text",
+ "category": "Modifier"
+ },
+ "mod-button-max-inline-size": {
+ "description": "Used by `.spectrum-Button`.",
+ "control": "text",
+ "category": "Modifier"
+ },
+ "mod-button-min-width": {
+ "description": "Used by `.spectrum-Button`.
Defaults to `var(--spectrum-button-min-width)`, if not set.",
+ "control": "text",
+ "category": "Modifier"
+ },
+ "mod-button-height": {
+ "description": "Used by `.spectrum-Button`.
Defaults to `var(--spectrum-button-height)`, if not set.",
+ "control": "text",
+ "category": "Modifier"
+ },
+ "mod-button-edge-to-text": {
+ "description": "Used by `.spectrum-Button`, `.spectrum-Button .spectrum-Icon`.
Defaults to `var(--spectrum-button-edge-to-text)`, if not set.",
+ "control": "text",
+ "category": "Modifier"
+ },
+ "mod-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": {
+ "description": "Used by `.spectrum-Button`.
Defaults to `var(--spectrum-button-border-color-default)`, if not set.",
+ "control": "color",
+ "category": "Modifier"
+ },
+ "mod-button-content-color-default": {
+ "description": "Used by `.spectrum-Button`.
Defaults to `var(--spectrum-button-content-color-default)`, if not set.",
+ "control": "color",
+ "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-icon-margin-block-start": {
+ "description": "Used by `.spectrum-Button .spectrum-Icon`.
Defaults to `max(0px, var(--mod-button-top-to-icon, var(--spectrum-button-top-to-icon)) - var(--mod-button-border-width, var(--spectrum-button-border-width)) + (var(--_icon-size-difference, 0px) / 2))`, if not set.",
+ "control": "text",
+ "category": "Modifier"
+ },
+ "mod-button-top-to-icon": {
+ "description": "Used by `.spectrum-Button .spectrum-Icon`.
Defaults to `var(--spectrum-button-top-to-icon)`, if not set.",
+ "control": "text",
+ "category": "Modifier"
+ },
+ "mod-button-edge-to-visual": {
+ "description": "Used by `.spectrum-Button .spectrum-Icon`.
Defaults to `var(--spectrum-button-edge-to-visual)`, if not set.",
+ "control": "text",
+ "category": "Modifier"
+ },
+ "mod-button-focus-ring-gap": {
+ "description": "Used by `.spectrum-Button:after`.
Defaults to `var(--spectrum-button-focus-ring-gap)`, if not set.",
+ "control": "text",
+ "category": "Modifier"
+ },
+ "mod-button-focus-ring-border-radius": {
+ "description": "Used by `.spectrum-Button:after`.
Defaults to `calc(var(--mod-button-border-radius, var(--spectrum-button-border-radius)) + var(--mod-button-focus-ring-gap, var(--spectrum-button-focus-ring-gap)))`, if not set.",
+ "control": "text",
+ "category": "Modifier"
+ },
+ "mod-button-focus-ring-thickness": {
+ "description": "Used by `.spectrum-Button.is-focused:after, .spectrum-Button:focus-visible:after`.
Defaults to `var(--spectrum-button-focus-ring-thickness)`, if not set.",
+ "control": "text",
+ "category": "Modifier"
+ },
+ "mod-button-focus-ring-color": {
+ "description": "Used by `.spectrum-Button.is-focused:after, .spectrum-Button:focus-visible:after`.
Defaults to `var(--spectrum-button-focus-indicator-color)`, if not set.",
+ "control": "color",
+ "category": "Modifier"
+ },
+ "mod-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": {
+ "description": "Used by `.spectrum-Button:hover`.
Defaults to `var(--spectrum-button-border-color-hover)`, if not set.",
+ "control": "color",
+ "category": "Modifier"
+ },
+ "mod-button-content-color-hover": {
+ "description": "Used by `.spectrum-Button:hover`.
Defaults to `var(--spectrum-button-content-color-hover)`, if not set.",
+ "control": "color",
+ "category": "Modifier"
+ },
+ "mod-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": {
+ "description": "Used by `.spectrum-Button:focus-visible`.
Defaults to `var(--spectrum-button-border-color-focus)`, if not set.",
+ "control": "color",
+ "category": "Modifier"
+ },
+ "mod-button-content-color-focus": {
+ "description": "Used by `.spectrum-Button:focus-visible`.
Defaults to `var(--spectrum-button-content-color-focus)`, if not set.",
+ "control": "color",
+ "category": "Modifier"
+ },
+ "mod-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": {
+ "description": "Used by `.spectrum-Button:active`.
Defaults to `var(--spectrum-button-border-color-down)`, if not set.",
+ "control": "color",
+ "category": "Modifier"
+ },
+ "mod-button-content-color-down": {
+ "description": "Used by `.spectrum-Button:active`.
Defaults to `var(--spectrum-button-content-color-down)`, if not set.",
+ "control": "color",
+ "category": "Modifier"
+ },
+ "mod-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": {
+ "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": {
+ "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-top-to-text": {
+ "description": "Used by `.spectrum-Button-label`.
Defaults to `var(--spectrum-button-top-to-text)`, if not set.",
+ "control": "text",
+ "category": "Modifier"
+ },
+ "mod-button-bottom-to-text": {
+ "description": "Used by `.spectrum-Button-label`.
Defaults to `var(--spectrum-button-bottom-to-text)`, if not set.",
+ "control": "text",
+ "category": "Modifier"
+ },
+ "mod-button-text-align": {
+ "description": "Used by `.spectrum-Button-label`.",
+ "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-edge-to-visual-only": {
+ "description": "Used by `.spectrum-Button.spectrum-Button--iconOnly`.
Defaults to `var(--spectrum-button-edge-to-visual-only)`, if not set.",
+ "control": "text",
+ "category": "Modifier"
+ }
+ },
+ "component": {
+ "spectrum-button-animation-duration": {
+ "value": "var(--spectrum-animation-duration-100)",
+ "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`.
Defaults to `var(--spectrum-animation-duration-100)`, if not set.",
+ "control": "text",
+ "category": "Component"
+ },
+ "spectrum-button-focus-ring-gap": {
+ "value": "2px",
+ "description": "Defined in `.spectrum-Button`.
Used by `.spectrum-Button:after`.
Defaults to `var(--spectrum-focus-indicator-gap)`, if not set.",
+ "control": "text",
+ "category": "Component"
+ },
+ "spectrum-button-focus-ring-thickness": {
+ "value": "2px",
+ "description": "Defined in `.spectrum-Button`.
Used by `.spectrum-Button.is-focused:after, .spectrum-Button:focus-visible:after`.
Defaults to `var(--spectrum-focus-indicator-thickness)`, if not set.",
+ "control": "text",
+ "category": "Component"
+ },
+ "spectrum-button-focus-indicator-color": {
+ "value": "rgb(0, 0, 0)",
+ "description": "Defined in `.spectrum-Button`, `.spectrum-Button.spectrum-Button--staticWhite`, `.spectrum-Button.spectrum-Button--staticBlack`.
Used by `.spectrum-Button.is-focused:after, .spectrum-Button:focus-visible:after`.
Defaults to `var(--spectrum-static-black-focus-indicator-color)`, if not set.",
+ "control": "color",
+ "category": "Component"
+ },
+ "spectrum-button-min-width": {
+ "value": "calc(var(--spectrum-component-height-300) * var(--spectrum-button-minimum-width-multiplier))",
+ "description": "Defined in `.spectrum-Button`, `.spectrum-Button--sizeS`, `.spectrum-Button--sizeL`, `.spectrum-Button--sizeXL`.
Used by `.spectrum-Button`.
Defaults to `calc(var(--spectrum-component-height-300) * var(--spectrum-button-minimum-width-multiplier))`, if not set.",
+ "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-height": {
+ "value": "48px",
+ "description": "Defined in `.spectrum-Button`, `.spectrum-Button--sizeS`, `.spectrum-Button--sizeL`, `.spectrum-Button--sizeXL`.
Used by `--spectrum-button-border-radius`, `.spectrum-Button`.
Defaults to `var(--spectrum-component-height-300)`, if not set.",
+ "control": "text",
+ "category": "Component"
+ },
+ "spectrum-button-border-radius": {
+ "value": "9999px",
+ "description": "Defined in `.spectrum-Button`, `.spectrum-Button.spectrum-Button--iconOnly`.
Used by `.spectrum-Button`, `.spectrum-Button:after`.
Defaults to `var(--spectrum-corner-radius-full)`, if not set.",
+ "control": "text",
+ "category": "Component"
+ },
+ "spectrum-button-border-width": {
+ "value": "2px",
+ "description": "Defined in `.spectrum-Button`.
Used by `--spectrum-button-edge-to-visual`, `--spectrum-button-edge-to-visual-only`, `--spectrum-button-edge-to-text`, `.spectrum-Button`, `.spectrum-Button .spectrum-Icon`, `.spectrum-Button:after`, `.spectrum-Button-label`.
Defaults to `var(--spectrum-border-width-200)`, if not set.",
+ "control": "text",
+ "category": "Component"
+ },
+ "spectrum-button-line-height": {
+ "value": "1.2",
+ "description": "Defined in `.spectrum-Button`.
Used by `.spectrum-Button-label`.
Defaults to `1.2`, if not set.",
+ "control": "text",
+ "category": "Component"
+ },
+ "spectrum-button-font-weight": {
+ "value": "700",
+ "description": "Defined in `.spectrum-Button`.
Used by `.spectrum-Button`.
Defaults to `var(--spectrum-bold-font-weight)`, if not set.",
+ "control": "text",
+ "category": "Component"
+ },
+ "spectrum-button-font-size": {
+ "value": "18px",
+ "description": "Defined in `.spectrum-Button`, `.spectrum-Button--sizeS`, `.spectrum-Button--sizeL`, `.spectrum-Button--sizeXL`.
Used by `.spectrum-Button`.
Defaults to `var(--spectrum-font-size-300)`, if not set.",
+ "control": "text",
+ "category": "Component"
+ },
+ "spectrum-button-edge-to-visual": {
+ "value": "calc(var(--spectrum-component-pill-edge-to-visual-300) - var(--mod-button-border-width, var(--spectrum-button-border-width)))",
+ "description": "Defined in `.spectrum-Button`, `.spectrum-Button--sizeS`, `.spectrum-Button--sizeL`, `.spectrum-Button--sizeXL`.
Used by `.spectrum-Button .spectrum-Icon`.
Defaults to `calc(var(--spectrum-component-pill-edge-to-visual-300) - var(--mod-button-border-width, var(--spectrum-button-border-width)))`, if not set.",
+ "control": "text",
+ "category": "Component"
+ },
+ "spectrum-button-edge-to-visual-only": {
+ "value": "calc(var(--spectrum-component-pill-edge-to-visual-only-300) - var(--mod-button-border-width, var(--spectrum-button-border-width)))",
+ "description": "Defined in `.spectrum-Button`, `.spectrum-Button--sizeS`, `.spectrum-Button--sizeL`, `.spectrum-Button--sizeXL`.
Used by `.spectrum-Button.spectrum-Button--iconOnly`.
Defaults to `calc(var(--spectrum-component-pill-edge-to-visual-only-300) - var(--mod-button-border-width, var(--spectrum-button-border-width)))`, if not set.",
+ "control": "text",
+ "category": "Component"
+ },
+ "spectrum-button-edge-to-text": {
+ "value": "calc(var(--spectrum-component-pill-edge-to-text-300) - var(--mod-button-border-width, var(--spectrum-button-border-width)))",
+ "description": "Defined in `.spectrum-Button`, `.spectrum-Button--sizeS`, `.spectrum-Button--sizeL`, `.spectrum-Button--sizeXL`.
Used by `.spectrum-Button`, `.spectrum-Button .spectrum-Icon`.
Defaults to `calc(var(--spectrum-component-pill-edge-to-text-300) - var(--mod-button-border-width, var(--spectrum-button-border-width)))`, if not set.",
+ "control": "text",
+ "category": "Component"
+ },
+ "spectrum-button-padding-label-to-icon": {
+ "value": "8px",
+ "description": "Defined in `.spectrum-Button`, `.spectrum-Button--sizeS`, `.spectrum-Button--sizeL`, `.spectrum-Button--sizeXL`.
Used by `.spectrum-Button`.
Defaults to `var(--spectrum-text-to-visual-300)`, if not set.",
+ "control": "text",
+ "category": "Component"
+ },
+ "spectrum-button-top-to-text": {
+ "value": "var(--spectrum-button-top-to-text-extra-large)",
+ "description": "Defined in `.spectrum-Button`, `.spectrum-Button--sizeS`, `.spectrum-Button--sizeL`, `.spectrum-Button--sizeXL`.
Used by `.spectrum-Button-label`.
Defaults to `var(--spectrum-button-top-to-text-extra-large)`, if not set.",
+ "control": "text",
+ "category": "Component"
+ },
+ "spectrum-button-top-to-text-medium": {
+ "description": "Used by `--spectrum-button-top-to-text`.",
+ "control": "text",
+ "category": "Component"
+ },
+ "spectrum-button-bottom-to-text": {
+ "value": "var(--spectrum-button-bottom-to-text-extra-large)",
+ "description": "Defined in `.spectrum-Button`, `.spectrum-Button--sizeS`, `.spectrum-Button--sizeL`, `.spectrum-Button--sizeXL`.
Used by `.spectrum-Button-label`.
Defaults to `var(--spectrum-button-bottom-to-text-extra-large)`, if not set.",
+ "control": "text",
+ "category": "Component"
+ },
+ "spectrum-button-bottom-to-text-medium": {
+ "description": "Used by `--spectrum-button-bottom-to-text`.",
+ "control": "text",
+ "category": "Component"
+ },
+ "spectrum-button-top-to-icon": {
+ "value": "11px",
+ "description": "Defined in `.spectrum-Button`, `.spectrum-Button--sizeS`, `.spectrum-Button--sizeL`, `.spectrum-Button--sizeXL`.
Used by `.spectrum-Button .spectrum-Icon`.
Defaults to `var(--spectrum-component-top-to-workflow-icon-300)`, if not set.",
+ "control": "text",
+ "category": "Component"
+ },
+ "spectrum-button-intended-icon-size": {
+ "value": "26px",
+ "description": "Defined in `.spectrum-Button`, `.spectrum-Button--sizeS`, `.spectrum-Button--sizeL`, `.spectrum-Button--sizeXL`.
Used by `--_icon-size-difference`.
Defaults to `var(--spectrum-workflow-icon-size-300)`, if not set.",
+ "control": "text",
+ "category": "Component"
+ },
+ "spectrum-button-top-to-text-small": {
+ "description": "Used by `--spectrum-button-top-to-text`.",
+ "control": "text",
+ "category": "Component"
+ },
+ "spectrum-button-bottom-to-text-small": {
+ "description": "Used by `--spectrum-button-bottom-to-text`.",
+ "control": "text",
+ "category": "Component"
+ },
+ "spectrum-button-top-to-text-large": {
+ "description": "Used by `--spectrum-button-top-to-text`.",
+ "control": "text",
+ "category": "Component"
+ },
+ "spectrum-button-bottom-to-text-large": {
+ "description": "Used by `--spectrum-button-bottom-to-text`.",
+ "control": "text",
+ "category": "Component"
+ },
+ "spectrum-button-top-to-text-extra-large": {
+ "description": "Used by `--spectrum-button-top-to-text`.",
+ "control": "text",
+ "category": "Component"
+ },
+ "spectrum-button-bottom-to-text-extra-large": {
+ "description": "Used by `--spectrum-button-bottom-to-text`.",
+ "control": "text",
+ "category": "Component"
+ },
+ "spectrum-button-border-color-default": {
+ "value": "rgba(0, 0, 0, 0.15)",
+ "description": "Defined in `.spectrum-Button`, `.spectrum-Button.spectrum-Button--primary.spectrum-Button--outline`, `.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`.
Defaults to `var(--spectrum-transparent-black-300)`, if not set.",
+ "control": "color",
+ "category": "Component"
+ },
+ "spectrum-button-border-color-hover": {
+ "value": "rgba(0, 0, 0, 0.22)",
+ "description": "Defined in `.spectrum-Button`, `.spectrum-Button.spectrum-Button--primary.spectrum-Button--outline`, `.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:hover`.
Defaults to `var(--spectrum-transparent-black-400)`, if not set.",
+ "control": "color",
+ "category": "Component"
+ },
+ "spectrum-button-border-color-down": {
+ "value": "rgba(0, 0, 0, 0.22)",
+ "description": "Defined in `.spectrum-Button`, `.spectrum-Button.spectrum-Button--primary.spectrum-Button--outline`, `.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`.
Defaults to `var(--spectrum-transparent-black-400)`, if not set.",
+ "control": "color",
+ "category": "Component"
+ },
+ "spectrum-button-border-color-focus": {
+ "value": "rgba(0, 0, 0, 0.22)",
+ "description": "Defined in `.spectrum-Button`, `.spectrum-Button.spectrum-Button--primary.spectrum-Button--outline`, `.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:focus-visible`.
Defaults to `var(--spectrum-transparent-black-400)`, if not set.",
+ "control": "color",
+ "category": "Component"
+ },
+ "spectrum-button-content-color-default": {
+ "value": "rgba(0, 0, 0, 0.84)",
+ "description": "Defined in `.spectrum-Button`, `.spectrum-Button.spectrum-Button--primary`, `.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--staticBlack`, `.spectrum-Button.spectrum-Button--staticBlack.spectrum-Button--outline`, `.spectrum-Button.spectrum-Button--staticBlack.spectrum-Button--secondary`.
Used by `.spectrum-Button`.
Defaults to `var(--spectrum-transparent-black-800)`, if not set.",
+ "control": "color",
+ "category": "Component"
+ },
+ "spectrum-button-content-color-hover": {
+ "value": "rgba(0, 0, 0, 0.93)",
+ "description": "Defined in `.spectrum-Button`, `.spectrum-Button.spectrum-Button--primary`, `.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--staticBlack`, `.spectrum-Button.spectrum-Button--staticBlack.spectrum-Button--outline`, `.spectrum-Button.spectrum-Button--staticBlack.spectrum-Button--secondary`.
Used by `.spectrum-Button:hover`.
Defaults to `var(--spectrum-transparent-black-900)`, if not set.",
+ "control": "color",
+ "category": "Component"
+ },
+ "spectrum-button-content-color-down": {
+ "value": "rgba(0, 0, 0, 0.93)",
+ "description": "Defined in `.spectrum-Button`, `.spectrum-Button.spectrum-Button--primary`, `.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--staticBlack`, `.spectrum-Button.spectrum-Button--staticBlack.spectrum-Button--outline`, `.spectrum-Button.spectrum-Button--staticBlack.spectrum-Button--secondary`.
Used by `.spectrum-Button:active`.
Defaults to `var(--spectrum-transparent-black-900)`, if not set.",
+ "control": "color",
+ "category": "Component"
+ },
+ "spectrum-button-content-color-focus": {
+ "value": "rgba(0, 0, 0, 0.93)",
+ "description": "Defined in `.spectrum-Button`, `.spectrum-Button.spectrum-Button--primary`, `.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--staticBlack`, `.spectrum-Button.spectrum-Button--staticBlack.spectrum-Button--outline`, `.spectrum-Button.spectrum-Button--staticBlack.spectrum-Button--secondary`.
Used by `.spectrum-Button:focus-visible`.
Defaults to `var(--spectrum-transparent-black-900)`, if not set.",
+ "control": "color",
+ "category": "Component"
+ },
+ "spectrum-button-background-color-disabled": {
+ "value": "rgba(0, 0, 0, 0)",
+ "description": "Defined in `.spectrum-Button`, `.spectrum-Button.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]`.
Defaults to `var(--spectrum-transparent-black-25)`, if not set.",
+ "control": "color",
+ "category": "Component"
+ },
+ "spectrum-button-border-color-disabled": {
+ "value": "rgba(0, 0, 0, 0.15)",
+ "description": "Defined in `.spectrum-Button`, `.spectrum-Button.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]`.
Defaults to `var(--spectrum-disabled-static-black-border-color)`, if not set.",
+ "control": "color",
+ "category": "Component"
+ },
+ "spectrum-button-content-color-disabled": {
+ "value": "rgba(0, 0, 0, 0.22)",
+ "description": "Defined in `.spectrum-Button`, `.spectrum-Button.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]`.
Defaults to `var(--spectrum-disabled-static-black-content-color)`, if not set.",
+ "control": "color",
+ "category": "Component"
+ },
+ "spectrum-button-background-color-default": {
+ "value": "rgba(0, 0, 0, 0)",
+ "description": "Defined in `.spectrum-Button, .spectrum-Button.spectrum-Button--accent`, `.spectrum-Button.spectrum-Button--negative`, `.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--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`.
Defaults to `var(--spectrum-transparent-black-25)`, if not set.",
+ "control": "color",
+ "category": "Component"
+ },
+ "spectrum-button-background-color-hover": {
+ "value": "rgba(0, 0, 0, 0.09)",
+ "description": "Defined in `.spectrum-Button, .spectrum-Button.spectrum-Button--accent`, `.spectrum-Button.spectrum-Button--negative`, `.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--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`.
Defaults to `var(--spectrum-transparent-black-100)`, if not set.",
+ "control": "color",
+ "category": "Component"
+ },
+ "spectrum-button-background-color-down": {
+ "value": "rgba(0, 0, 0, 0.09)",
+ "description": "Defined in `.spectrum-Button, .spectrum-Button.spectrum-Button--accent`, `.spectrum-Button.spectrum-Button--negative`, `.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--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`.
Defaults to `var(--spectrum-transparent-black-100)`, if not set.",
+ "control": "color",
+ "category": "Component"
+ },
+ "spectrum-button-background-color-focus": {
+ "value": "rgba(0, 0, 0, 0.09)",
+ "description": "Defined in `.spectrum-Button, .spectrum-Button.spectrum-Button--accent`, `.spectrum-Button.spectrum-Button--negative`, `.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--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`.
Defaults to `var(--spectrum-transparent-black-100)`, if not set.",
+ "control": "color",
+ "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-animation-duration`.",
+ "control": "text",
+ "category": "Global"
+ },
+ "spectrum-focus-indicator-gap": {
+ "value": "2px",
+ "description": "Used by `--spectrum-button-focus-ring-gap`.",
+ "control": "text",
+ "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-component-height-100": {
+ "value": "32px",
+ "description": "Used by `--spectrum-button-min-width`, `--spectrum-button-height`.",
+ "control": "text",
+ "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-font-weight`.",
+ "control": "text",
+ "category": "Global"
+ },
+ "spectrum-font-size-100": {
+ "value": "14px",
+ "description": "Used by `--spectrum-button-font-size`.",
+ "control": "text",
+ "category": "Global"
+ },
+ "spectrum-component-pill-edge-to-visual-100": {
+ "value": "14px",
+ "description": "Used by `--spectrum-button-edge-to-visual`.",
+ "control": "text",
+ "category": "Global"
+ },
+ "spectrum-component-pill-edge-to-visual-only-100": {
+ "value": "6px",
+ "description": "Used by `--spectrum-button-edge-to-visual-only`.",
+ "control": "text",
+ "category": "Global"
+ },
+ "spectrum-component-pill-edge-to-text-100": {
+ "value": "16px",
+ "description": "Used by `--spectrum-button-edge-to-text`.",
+ "control": "text",
+ "category": "Global"
+ },
+ "spectrum-text-to-visual-100": {
+ "value": "6px",
+ "description": "Used by `--spectrum-button-padding-label-to-icon`.",
+ "control": "text",
+ "category": "Global"
+ },
+ "spectrum-component-top-to-workflow-icon-100": {
+ "value": "6px",
+ "description": "Used by `--spectrum-button-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-downstate-perspective": {
+ "value": "24px",
+ "description": "Defined in `.spectrum-Button`, `.spectrum-Button--sizeS.spectrum-Button--iconOnly`.
Used by `.spectrum-Button:active`.
Defaults to `var(--spectrum-component-size-minimum-perspective-down)`, if not set.",
+ "control": "text",
+ "category": "Global"
+ },
+ "spectrum-downstate-height": {
+ "description": "Used by `--spectrum-downstate-perspective`.",
+ "control": "text",
+ "category": "Global"
+ },
+ "spectrum-downstate-width": {
+ "description": "Used by `--spectrum-downstate-perspective`.",
+ "control": "text",
+ "category": "Global"
+ },
+ "spectrum-component-size-width-ratio-down": {
+ "value": "0.3333",
+ "description": "Used by `--spectrum-downstate-perspective`.",
+ "control": "text",
+ "category": "Global"
+ },
+ "spectrum-corner-radius-full": {
+ "value": "9999px",
+ "description": "Used by `--spectrum-button-border-radius`.",
+ "control": "text",
+ "category": "Global"
+ },
+ "spectrum-component-height-75": {
+ "value": "24px",
+ "description": "Used by `--spectrum-button-min-width`, `--spectrum-button-height`.",
+ "control": "text",
+ "category": "Global"
+ },
+ "spectrum-font-size-75": {
+ "value": "12px",
+ "description": "Used by `--spectrum-button-font-size`.",
+ "control": "text",
+ "category": "Global"
+ },
+ "spectrum-component-pill-edge-to-visual-75": {
+ "value": "10px",
+ "description": "Used by `--spectrum-button-edge-to-visual`.",
+ "control": "text",
+ "category": "Global"
+ },
+ "spectrum-component-pill-edge-to-visual-only-75": {
+ "value": "4px",
+ "description": "Used by `--spectrum-button-edge-to-visual-only`.",
+ "control": "text",
+ "category": "Global"
+ },
+ "spectrum-component-pill-edge-to-text-75": {
+ "value": "12px",
+ "description": "Used by `--spectrum-button-edge-to-text`.",
+ "control": "text",
+ "category": "Global"
+ },
+ "spectrum-text-to-visual-75": {
+ "value": "5px",
+ "description": "Used by `--spectrum-button-padding-label-to-icon`.",
+ "control": "text",
+ "category": "Global"
+ },
+ "spectrum-component-top-to-workflow-icon-75": {
+ "value": "4px",
+ "description": "Used by `--spectrum-button-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-size-minimum-perspective-down": {
+ "value": "24px",
+ "description": "Used by `--spectrum-downstate-perspective`.",
+ "control": "text",
+ "category": "Global"
+ },
+ "spectrum-component-height-200": {
+ "value": "40px",
+ "description": "Used by `--spectrum-button-min-width`, `--spectrum-button-height`.",
+ "control": "text",
+ "category": "Global"
+ },
+ "spectrum-font-size-200": {
+ "value": "16px",
+ "description": "Used by `--spectrum-button-font-size`.",
+ "control": "text",
+ "category": "Global"
+ },
+ "spectrum-component-pill-edge-to-visual-200": {
+ "value": "18px",
+ "description": "Used by `--spectrum-button-edge-to-visual`.",
+ "control": "text",
+ "category": "Global"
+ },
+ "spectrum-component-pill-edge-to-visual-only-200": {
+ "value": "9px",
+ "description": "Used by `--spectrum-button-edge-to-visual-only`.",
+ "control": "text",
+ "category": "Global"
+ },
+ "spectrum-component-pill-edge-to-text-200": {
+ "value": "20px",
+ "description": "Used by `--spectrum-button-edge-to-text`.",
+ "control": "text",
+ "category": "Global"
+ },
+ "spectrum-text-to-visual-200": {
+ "value": "7px",
+ "description": "Used by `--spectrum-button-padding-label-to-icon`.",
+ "control": "text",
+ "category": "Global"
+ },
+ "spectrum-component-top-to-workflow-icon-200": {
+ "value": "9px",
+ "description": "Used by `--spectrum-button-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-min-width`, `--spectrum-button-height`.",
+ "control": "text",
+ "category": "Global"
+ },
+ "spectrum-font-size-300": {
+ "value": "18px",
+ "description": "Used by `--spectrum-button-font-size`.",
+ "control": "text",
+ "category": "Global"
+ },
+ "spectrum-component-pill-edge-to-visual-300": {
+ "value": "21px",
+ "description": "Used by `--spectrum-button-edge-to-visual`.",
+ "control": "text",
+ "category": "Global"
+ },
+ "spectrum-component-pill-edge-to-visual-only-300": {
+ "value": "11px",
+ "description": "Used by `--spectrum-button-edge-to-visual-only`.",
+ "control": "text",
+ "category": "Global"
+ },
+ "spectrum-component-pill-edge-to-text-300": {
+ "value": "24px",
+ "description": "Used by `--spectrum-button-edge-to-text`.",
+ "control": "text",
+ "category": "Global"
+ },
+ "spectrum-text-to-visual-300": {
+ "value": "8px",
+ "description": "Used by `--spectrum-button-padding-label-to-icon`.",
+ "control": "text",
+ "category": "Global"
+ },
+ "spectrum-component-top-to-workflow-icon-300": {
+ "value": "11px",
+ "description": "Used by `--spectrum-button-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-white": {
+ "value": "rgb(255, 255, 255)",
+ "description": "Used by `--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-disabled-background-color": {
+ "value": "var(--spectrum-gray-100)",
+ "description": "Used by `--spectrum-button-background-color-disabled`.",
+ "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-border-color": {
+ "value": "var(--spectrum-gray-300)",
+ "description": "Used by `--spectrum-button-border-color-disabled`.",
+ "control": "color",
+ "category": "Global"
+ },
+ "spectrum-accent-background-color-default": {
+ "value": "var(--spectrum-accent-color-900)",
+ "description": "Used by `--spectrum-button-background-color-default`.",
+ "control": "color",
+ "category": "Global"
+ },
+ "spectrum-accent-background-color-hover": {
+ "value": "var(--spectrum-accent-color-1000)",
+ "description": "Used by `--spectrum-button-background-color-hover`.",
+ "control": "color",
+ "category": "Global"
+ },
+ "spectrum-accent-background-color-down": {
+ "value": "var(--spectrum-accent-color-1000)",
+ "description": "Used by `--spectrum-button-background-color-down`.",
+ "control": "color",
+ "category": "Global"
+ },
+ "spectrum-accent-background-color-key-focus": {
+ "value": "var(--spectrum-accent-color-1000)",
+ "description": "Used by `--spectrum-button-background-color-focus`.",
+ "control": "color",
+ "category": "Global"
+ },
+ "spectrum-negative-background-color-default": {
+ "value": "var(--spectrum-negative-color-900)",
+ "description": "Used by `--spectrum-button-background-color-default`.",
+ "control": "color",
+ "category": "Global"
+ },
+ "spectrum-negative-background-color-hover": {
+ "value": "var(--spectrum-negative-color-1000)",
+ "description": "Used by `--spectrum-button-background-color-hover`.",
+ "control": "color",
+ "category": "Global"
+ },
+ "spectrum-negative-background-color-down": {
+ "value": "var(--spectrum-negative-color-1000)",
+ "description": "Used by `--spectrum-button-background-color-down`.",
+ "control": "color",
+ "category": "Global"
+ },
+ "spectrum-negative-background-color-key-focus": {
+ "value": "var(--spectrum-negative-color-1000)",
+ "description": "Used by `--spectrum-button-background-color-focus`.",
+ "control": "color",
+ "category": "Global"
+ },
+ "spectrum-gray-25": {
+ "value": "light-dark(rgb(255, 255, 255), rgb(17, 17, 17))",
+ "description": "Used by `--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-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-100": {
+ "value": "light-dark(rgb(233, 233, 233), rgb(44, 44, 44))",
+ "description": "Used by `--spectrum-button-background-color-hover`, `--spectrum-button-background-color-down`, `--spectrum-button-background-color-focus`, `--spectrum-button-background-color-default`.",
+ "control": "text",
+ "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-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-gray-200": {
+ "value": "light-dark(rgb(225, 225, 225), rgb(50, 50, 50))",
+ "description": "Used by `--spectrum-button-background-color-hover`, `--spectrum-button-background-color-down`, `--spectrum-button-background-color-focus`.",
+ "control": "text",
+ "category": "Global"
+ },
+ "spectrum-gray-300": {
+ "value": "light-dark(rgb(218, 218, 218), rgb(57, 57, 57))",
+ "description": "Used by `--spectrum-button-border-color-default`.",
+ "control": "text",
+ "category": "Global"
+ },
+ "spectrum-gray-400": {
+ "value": "light-dark(rgb(198, 198, 198), rgb(68, 68, 68))",
+ "description": "Used by `--spectrum-button-border-color-hover`, `--spectrum-button-border-color-down`, `--spectrum-button-border-color-focus`.",
+ "control": "text",
+ "category": "Global"
+ },
+ "spectrum-transparent-white-800": {
+ "value": "rgba(255, 255, 255, 0.85)",
+ "description": "Used by `--spectrum-button-background-color-default`, `--spectrum-button-border-color-default`, `--spectrum-button-content-color-default`.",
+ "control": "text",
+ "category": "Global"
+ },
+ "spectrum-transparent-white-900": {
+ "value": "rgba(255, 255, 255, 0.94)",
+ "description": "Used by `--spectrum-button-background-color-hover`, `--spectrum-button-background-color-down`, `--spectrum-button-background-color-focus`, `--spectrum-button-border-color-hover`, `--spectrum-button-border-color-down`, `--spectrum-button-border-color-focus`, `--spectrum-button-content-color-hover`, `--spectrum-button-content-color-down`, `--spectrum-button-content-color-focus`.",
+ "control": "text",
+ "category": "Global"
+ },
+ "spectrum-black": {
+ "value": "rgb(0, 0, 0)",
+ "description": "Used by `--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-static-white-focus-indicator-color": {
+ "value": "rgb(255, 255, 255)",
+ "description": "Used by `--spectrum-button-focus-indicator-color`.",
+ "control": "color",
+ "category": "Global"
+ },
+ "spectrum-disabled-static-white-background-color": {
+ "value": "rgba(255, 255, 255, 0.11)",
+ "description": "Used by `--spectrum-button-background-color-disabled`.",
+ "control": "color",
+ "category": "Global"
+ },
+ "spectrum-disabled-static-white-content-color": {
+ "value": "rgba(255, 255, 255, 0.21)",
+ "description": "Used by `--spectrum-button-content-color-disabled`.",
+ "control": "color",
+ "category": "Global"
+ },
+ "spectrum-transparent-white-25": {
+ "value": "rgba(255, 255, 255, 0)",
+ "description": "Used by `--spectrum-button-background-color-default`, `--spectrum-button-background-color-disabled`.",
+ "control": "text",
+ "category": "Global"
+ },
+ "spectrum-transparent-white-100": {
+ "value": "rgba(255, 255, 255, 0.11)",
+ "description": "Used by `--spectrum-button-background-color-hover`, `--spectrum-button-background-color-down`, `--spectrum-button-background-color-focus`, `--spectrum-button-background-color-default`.",
+ "control": "text",
+ "category": "Global"
+ },
+ "spectrum-disabled-static-white-border-color": {
+ "value": "rgba(255, 255, 255, 0.17)",
+ "description": "Used by `--spectrum-button-border-color-disabled`.",
+ "control": "color",
+ "category": "Global"
+ },
+ "spectrum-transparent-white-200": {
+ "value": "rgba(255, 255, 255, 0.14)",
+ "description": "Used by `--spectrum-button-background-color-hover`, `--spectrum-button-background-color-down`, `--spectrum-button-background-color-focus`.",
+ "control": "text",
+ "category": "Global"
+ },
+ "spectrum-transparent-white-300": {
+ "value": "rgba(255, 255, 255, 0.17)",
+ "description": "Used by `--spectrum-button-border-color-default`.",
+ "control": "text",
+ "category": "Global"
+ },
+ "spectrum-transparent-white-400": {
+ "value": "rgba(255, 255, 255, 0.21)",
+ "description": "Used by `--spectrum-button-border-color-hover`, `--spectrum-button-border-color-down`, `--spectrum-button-border-color-focus`.",
+ "control": "text",
+ "category": "Global"
+ },
+ "spectrum-transparent-black-800": {
+ "value": "rgba(0, 0, 0, 0.84)",
+ "description": "Used by `--spectrum-button-background-color-default`, `--spectrum-button-border-color-default`, `--spectrum-button-content-color-default`.",
+ "control": "text",
+ "category": "Global"
+ },
+ "spectrum-transparent-black-900": {
+ "value": "rgba(0, 0, 0, 0.93)",
+ "description": "Used by `--spectrum-button-background-color-hover`, `--spectrum-button-background-color-down`, `--spectrum-button-background-color-focus`, `--spectrum-button-border-color-hover`, `--spectrum-button-border-color-down`, `--spectrum-button-border-color-focus`, `--spectrum-button-content-color-hover`, `--spectrum-button-content-color-down`, `--spectrum-button-content-color-focus`.",
+ "control": "text",
+ "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-background-color": {
+ "value": "rgba(0, 0, 0, 0.09)",
+ "description": "Used by `--spectrum-button-background-color-disabled`.",
+ "control": "color",
+ "category": "Global"
+ },
+ "spectrum-disabled-static-black-content-color": {
+ "value": "rgba(0, 0, 0, 0.22)",
+ "description": "Used by `--spectrum-button-content-color-disabled`.",
+ "control": "color",
+ "category": "Global"
+ },
+ "spectrum-transparent-black-25": {
+ "value": "rgba(0, 0, 0, 0)",
+ "description": "Used by `--spectrum-button-background-color-default`, `--spectrum-button-background-color-disabled`.",
+ "control": "text",
+ "category": "Global"
+ },
+ "spectrum-transparent-black-100": {
+ "value": "rgba(0, 0, 0, 0.09)",
+ "description": "Used by `--spectrum-button-background-color-hover`, `--spectrum-button-background-color-down`, `--spectrum-button-background-color-focus`, `--spectrum-button-background-color-default`.",
+ "control": "text",
+ "category": "Global"
+ },
+ "spectrum-disabled-static-black-border-color": {
+ "value": "rgba(0, 0, 0, 0.15)",
+ "description": "Used by `--spectrum-button-border-color-disabled`.",
+ "control": "color",
+ "category": "Global"
+ },
+ "spectrum-transparent-black-200": {
+ "value": "rgba(0, 0, 0, 0.12)",
+ "description": "Used by `--spectrum-button-background-color-hover`, `--spectrum-button-background-color-down`, `--spectrum-button-background-color-focus`.",
+ "control": "text",
+ "category": "Global"
+ },
+ "spectrum-transparent-black-300": {
+ "value": "rgba(0, 0, 0, 0.15)",
+ "description": "Used by `--spectrum-button-border-color-default`.",
+ "control": "text",
+ "category": "Global"
+ },
+ "spectrum-transparent-black-400": {
+ "value": "rgba(0, 0, 0, 0.22)",
+ "description": "Used by `--spectrum-button-border-color-hover`, `--spectrum-button-border-color-down`, `--spectrum-button-border-color-focus`.",
+ "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-component-size-difference-down": {
+ "value": "-2px",
+ "description": "Used by `.spectrum-Button:active`.",
+ "control": "text",
+ "category": "Global"
+ },
+ "spectrum-progress-circle-thickness-medium": {
+ "value": "3px",
+ "description": "Used by `--mod-progress-circle-thickness`.",
+ "control": "text",
+ "category": "Global"
+ }
+ },
+ "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--accent, .spectrum-Button:not(.spectrum-Button--primary, .spectrum-Button--negative, .spectrum-Button--secondary, .spectrum-Button--staticBlack, .spectrum-Button--staticWhite)`.
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`.
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))",
+ "description": "Defined in `.spectrum-Button.spectrum-Button--accent, .spectrum-Button:not(.spectrum-Button--primary, .spectrum-Button--negative, .spectrum-Button--secondary, .spectrum-Button--staticBlack, .spectrum-Button--staticWhite)`.
Used by `.spectrum-Button`.
Defaults to `var(--mod-button-content-color-default, var(--spectrum-button-content-color-default))`, if not set.",
+ "control": "color"
+ },
+ "highcontrast-button-focus-ring-color": {
+ "value": "var(--mod-button-focus-ring-color, var(--spectrum-button-focus-indicator-color))",
+ "description": "Defined in `.spectrum-Button`.
Used by `.spectrum-Button.is-focused:after, .spectrum-Button:focus-visible:after`.
Defaults to `var(--mod-button-focus-ring-color, var(--spectrum-button-focus-indicator-color))`, 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--accent, .spectrum-Button:not(.spectrum-Button--primary, .spectrum-Button--negative, .spectrum-Button--secondary, .spectrum-Button--staticBlack, .spectrum-Button--staticWhite)`.
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`.
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--accent, .spectrum-Button:not(.spectrum-Button--primary, .spectrum-Button--negative, .spectrum-Button--secondary, .spectrum-Button--staticBlack, .spectrum-Button--staticWhite)`.
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-focus": {
+ "value": "var(--mod-button-background-color-focus, var(--spectrum-button-background-color-focus))",
+ "description": "Defined in `.spectrum-Button.spectrum-Button--accent, .spectrum-Button:not(.spectrum-Button--primary, .spectrum-Button--negative, .spectrum-Button--secondary, .spectrum-Button--staticBlack, .spectrum-Button--staticWhite)`.
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`.
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--accent, .spectrum-Button:not(.spectrum-Button--primary, .spectrum-Button--negative, .spectrum-Button--secondary, .spectrum-Button--staticBlack, .spectrum-Button--staticWhite)`.
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--accent, .spectrum-Button:not(.spectrum-Button--primary, .spectrum-Button--negative, .spectrum-Button--secondary, .spectrum-Button--staticBlack, .spectrum-Button--staticWhite)`.
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`.
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--accent, .spectrum-Button:not(.spectrum-Button--primary, .spectrum-Button--negative, .spectrum-Button--secondary, .spectrum-Button--staticBlack, .spectrum-Button--staticWhite)`.
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-disabled": {
+ "value": "var(--mod-button-background-color-disabled, var(--spectrum-button-background-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-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`.
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 4f3b09d5928..b48d0850ca9 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, withDownStateDimensionCapture } 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.
*
@@ -104,6 +106,10 @@ export default {
status: {
type: "migrated",
},
+ cssprops: {
+ ...metadata.modifiers,
+ ...metadata.component,
+ },
},
decorators: [
withDownStateDimensionCapture,
diff --git a/components/buttongroup/dist/metadata.json b/components/buttongroup/dist/metadata.json
index 04dc22bce0f..904ab5fb64a 100644
--- a/components/buttongroup/dist/metadata.json
+++ b/components/buttongroup/dist/metadata.json
@@ -6,20 +6,73 @@
".spectrum-ButtonGroup.spectrum-ButtonGroup--sizeS",
".spectrum-ButtonGroup.spectrum-ButtonGroup--vertical"
],
- "modifiers": [
- "--mod-buttongroup-flex-wrap",
- "--mod-buttongroup-justify-content",
- "--mod-buttongroup-spacing",
- "--mod-buttongroup-spacing-horizontal",
- "--mod-buttongroup-spacing-vertical"
- ],
- "component": [
- "--spectrum-buttongroup-display",
- "--spectrum-buttongroup-flex-direction",
- "--spectrum-buttongroup-justify-content",
- "--spectrum-buttongroup-spacing"
- ],
- "global": ["--spectrum-spacing-200", "--spectrum-spacing-300"],
- "passthroughs": [],
- "high-contrast": []
+ "modifiers": {
+ "mod-buttongroup-spacing": {
+ "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": {
+ "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"
+ },
+ "mod-buttongroup-flex-wrap": {
+ "description": "Used by `.spectrum-ButtonGroup`.",
+ "control": "text",
+ "category": "Modifier"
+ }
+ },
+ "component": {
+ "spectrum-buttongroup-spacing": {
+ "value": "var(--mod-buttongroup-spacing, var(--mod-buttongroup-spacing-horizontal, var(--spectrum-spacing-200)))",
+ "description": "Defined in `.spectrum-ButtonGroup`, `.spectrum-ButtonGroup.spectrum-ButtonGroup--sizeS`.
Used by `.spectrum-ButtonGroup`.
Defaults to `var(--mod-buttongroup-spacing, var(--mod-buttongroup-spacing-horizontal, var(--spectrum-spacing-200)))`, if not set.",
+ "control": "text",
+ "category": "Component"
+ },
+ "spectrum-buttongroup-display": {
+ "value": "inline-flex",
+ "description": "Defined in `.spectrum-ButtonGroup`, `.spectrum-ButtonGroup.spectrum-ButtonGroup--vertical`.
Used by `.spectrum-ButtonGroup`.
Defaults to `inline-flex`, if not set.",
+ "control": "text",
+ "category": "Component"
+ },
+ "spectrum-buttongroup-flex-direction": {
+ "value": "column",
+ "description": "Defined in `.spectrum-ButtonGroup`, `.spectrum-ButtonGroup.spectrum-ButtonGroup--vertical`.
Used by `.spectrum-ButtonGroup`.
Defaults to `column`, if not set.",
+ "control": "text",
+ "category": "Component"
+ },
+ "spectrum-buttongroup-justify-content": {
+ "value": "var(--mod-buttongroup-justify-content, normal)",
+ "description": "Defined in `.spectrum-ButtonGroup`.
Used by `.spectrum-ButtonGroup`.
Defaults to `var(--mod-buttongroup-justify-content, normal)`, if not set.",
+ "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"
+ }
+ },
+ "passthroughs": {},
+ "high-contrast": {}
}
diff --git a/components/buttongroup/stories/buttongroup.stories.js b/components/buttongroup/stories/buttongroup.stories.js
index ae0cab736cb..c5c433cfe8b 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.
*/
@@ -67,6 +69,10 @@ export default {
status: {
type: "migrated",
},
+ cssprops: {
+ ...metadata.modifiers,
+ ...metadata.component,
+ },
},
tags: ["migrated"],
};
diff --git a/components/calendar/dist/metadata.json b/components/calendar/dist/metadata.json
index cc1fb80035c..e33299dd2d2 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",
@@ -56,145 +56,721 @@
".spectrum-Calendar-title",
".spectrum-Calendar:dir(rtl)"
],
- "modifiers": [
- "--mod-calendar-border-radius-reset",
- "--mod-calendar-border-width-reset",
- "--mod-calendar-button-icon-color",
- "--mod-calendar-day-background-color",
- "--mod-calendar-day-background-color-cap-selected",
- "--mod-calendar-day-background-color-down",
- "--mod-calendar-day-background-color-focus",
- "--mod-calendar-day-background-color-hover",
- "--mod-calendar-day-background-color-key-focus",
- "--mod-calendar-day-background-color-selected",
- "--mod-calendar-day-background-color-selected-hover",
- "--mod-calendar-day-background-layer-color",
- "--mod-calendar-day-border-color",
- "--mod-calendar-day-border-color-key-focus",
- "--mod-calendar-day-border-size",
- "--mod-calendar-day-fill-content",
- "--mod-calendar-day-fill-display",
- "--mod-calendar-day-height",
- "--mod-calendar-day-padding",
- "--mod-calendar-day-text-color",
- "--mod-calendar-day-text-color-cap-selected",
- "--mod-calendar-day-text-color-disabled",
- "--mod-calendar-day-text-color-hover",
- "--mod-calendar-day-text-color-key-focus",
- "--mod-calendar-day-text-color-selected",
- "--mod-calendar-day-text-font-weight",
- "--mod-calendar-day-text-font-weight-cap-selected",
- "--mod-calendar-day-text-font-weight-selected",
- "--mod-calendar-day-text-size",
- "--mod-calendar-day-text-size-han",
- "--mod-calendar-day-title-text-color",
- "--mod-calendar-day-title-text-font-weight",
- "--mod-calendar-day-title-text-size",
- "--mod-calendar-day-today-background-color-selected-hover",
- "--mod-calendar-day-today-border-color",
- "--mod-calendar-day-today-border-color-disabled",
- "--mod-calendar-day-today-text-color",
- "--mod-calendar-day-today-text-font-weight",
- "--mod-calendar-day-visibility",
- "--mod-calendar-day-width",
- "--mod-calendar-margin-x",
- "--mod-calendar-margin-y",
- "--mod-calendar-title-height",
- "--mod-calendar-title-text-letter-spacing",
- "--mod-calendar-title-text-size",
- "--mod-calendar-width"
- ],
- "component": [
- "--spectrum-calendar-border-radius-reset",
- "--spectrum-calendar-border-width-reset",
- "--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"
- ],
- "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": {
+ "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": {
+ "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": {
+ "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": {
+ "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": {
+ "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": {
+ "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": {
+ "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": {
+ "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": {
+ "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`.
Defaults to `var(--spectrum-calendar-day-background-cap-selected)`, if not set.",
+ "control": "color",
+ "category": "Modifier"
+ },
+ "mod-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": {
+ "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": {
+ "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": {
+ "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": {
+ "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": {
+ "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`.
Defaults to `var(--spectrum-calendar-day-background-selected)`, if not set.",
+ "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`.
Defaults to `var(--spectrum-calendar-day-today-border-color)`, if not set.",
+ "control": "color",
+ "category": "Modifier"
+ },
+ "mod-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": {
+ "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": {
+ "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": {
+ "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": {
+ "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": {
+ "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": {
+ "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": {
+ "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": {
+ "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": {
+ "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": {
+ "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": {
+ "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": {
+ "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": {
+ "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": {
+ "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": {
+ "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": {
+ "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`.
Defaults to `none`, if not set.",
+ "control": "text",
+ "category": "Modifier"
+ },
+ "mod-calendar-day-visibility": {
+ "description": "Defined in `.spectrum-Calendar-date.is-outsideMonth`.
Used by `.spectrum-Calendar-date`.
Defaults to `none`, if not set.",
+ "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`.
Defaults to `block`, if not set.",
+ "control": "text",
+ "category": "Modifier"
+ },
+ "mod-calendar-day-background-color-focus": {
+ "description": "Defined in `.spectrum-Calendar-date.is-disabled`.
Defaults to `transparent`, if not set.",
+ "control": "color",
+ "category": "Modifier"
+ }
+ },
+ "component": {
+ "spectrum-calendar-day-background-color-selected-disabled": {
+ "value": "rgb(var(--spectrum-gray-100-rgb), 0.4)",
+ "description": "Defined in `.spectrum-Calendar`, `.spectrum-Calendar-date`.
Used by `--mod-calendar-day-background-color-selected`.
Defaults to `rgb(var(--spectrum-gray-100-rgb), 0.4)`, if not set.",
+ "control": "color",
+ "category": "Component"
+ },
+ "spectrum-calendar-day-width": {
+ "value": "var(--mod-calendar-day-width, var(--spectrum-component-height-100))",
+ "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`.
Defaults to `var(--mod-calendar-day-width, var(--spectrum-component-height-100))`, if not set.",
+ "control": "text",
+ "category": "Component"
+ },
+ "spectrum-calendar-day-height": {
+ "value": "var(--mod-calendar-day-height, var(--spectrum-component-height-100))",
+ "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`.
Defaults to `var(--mod-calendar-day-height, var(--spectrum-component-height-100))`, if not set.",
+ "control": "text",
+ "category": "Component"
+ },
+ "spectrum-calendar-day-border-size": {
+ "value": "var(--mod-calendar-day-border-size, var(--spectrum-border-width-200))",
+ "description": "Defined in `.spectrum-Calendar`.
Used by `.spectrum-Calendar-date`, `.spectrum-Calendar-date:before`.
Defaults to `var(--mod-calendar-day-border-size, var(--spectrum-border-width-200))`, if not set.",
+ "control": "text",
+ "category": "Component"
+ },
+ "spectrum-calendar-day-padding": {
+ "value": "var(--mod-calendar-day-padding, 4px)",
+ "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`.
Defaults to `var(--mod-calendar-day-padding, 4px)`, if not set.",
+ "control": "text",
+ "category": "Component"
+ },
+ "spectrum-calendar-border-radius-reset": {
+ "value": "var(--mod-calendar-border-radius-reset, 0)",
+ "description": "Defined in `.spectrum-Calendar`.
Used by `.spectrum-Calendar-date.is-range-selection`.
Defaults to `var(--mod-calendar-border-radius-reset, 0)`, if not set.",
+ "control": "text",
+ "category": "Component"
+ },
+ "spectrum-calendar-border-width-reset": {
+ "value": "var(--mod-calendar-border-width-reset, 0)",
+ "description": "Defined in `.spectrum-Calendar`.
Used by `.spectrum-Calendar-date.is-range-selection`.
Defaults to `var(--mod-calendar-border-width-reset, 0)`, if not set.",
+ "control": "text",
+ "category": "Component"
+ },
+ "spectrum-calendar-margin-y": {
+ "value": "var(--mod-calendar-margin-y, 24px)",
+ "description": "Defined in `.spectrum-Calendar`.
Used by `.spectrum-Calendar--padded`.
Defaults to `var(--mod-calendar-margin-y, 24px)`, if not set.",
+ "control": "text",
+ "category": "Component"
+ },
+ "spectrum-calendar-margin-x": {
+ "value": "var(--mod-calendar-margin-x, 32px)",
+ "description": "Defined in `.spectrum-Calendar`.
Used by `.spectrum-Calendar--padded`.
Defaults to `var(--mod-calendar-margin-x, 32px)`, if not set.",
+ "control": "text",
+ "category": "Component"
+ },
+ "spectrum-calendar-width": {
+ "value": "var(--mod-calendar-width, calc((var(--spectrum-calendar-day-width) + var(--spectrum-calendar-day-padding) * 2) * 7))",
+ "description": "Defined in `.spectrum-Calendar`.
Used by `.spectrum-Calendar`.
Defaults to `var(--mod-calendar-width, calc((var(--spectrum-calendar-day-width) + var(--spectrum-calendar-day-padding) * 2) * 7))`, if not set.",
+ "control": "text",
+ "category": "Component"
+ },
+ "spectrum-calendar-title-text-letter-spacing": {
+ "value": "var(--mod-calendar-title-text-letter-spacing, 0.06em)",
+ "description": "Defined in `.spectrum-Calendar`.
Used by `.spectrum-Calendar-dayOfWeek[title]`.
Defaults to `var(--mod-calendar-title-text-letter-spacing, 0.06em)`, if not set.",
+ "control": "text",
+ "category": "Component"
+ },
+ "spectrum-calendar-title-height": {
+ "value": "var(--mod-calendar-title-height, 32px)",
+ "description": "Defined in `.spectrum-Calendar`.
Used by `.spectrum-Calendar-title`.
Defaults to `var(--mod-calendar-title-height, 32px)`, if not set.",
+ "control": "text",
+ "category": "Component"
+ },
+ "spectrum-calendar-title-text-size": {
+ "value": "var(--mod-calendar-title-text-size, var(--spectrum-font-size-300))",
+ "description": "Defined in `.spectrum-Calendar`.
Used by `.spectrum-Calendar-title`.
Defaults to `var(--mod-calendar-title-text-size, var(--spectrum-font-size-300))`, if not set.",
+ "control": "text",
+ "category": "Component"
+ },
+ "spectrum-calendar-title-text-font-weight": {
+ "value": "var(--mod-calendar-day-title-text-font-weight, var(--spectrum-bold-font-weight))",
+ "description": "Defined in `.spectrum-Calendar`.
Used by `.spectrum-Calendar-title`, `.spectrum-Calendar-dayOfWeek`.
Defaults to `var(--mod-calendar-day-title-text-font-weight, var(--spectrum-bold-font-weight))`, if not set.",
+ "control": "text",
+ "category": "Component"
+ },
+ "spectrum-calendar-title-text-color": {
+ "value": "var(--highcontrast-calendar-day-title-text-color, var(--mod-calendar-day-title-text-color, var(--spectrum-neutral-subdued-content-color-default)))",
+ "description": "Defined in `.spectrum-Calendar`.
Used by `.spectrum-Calendar-title`, `.spectrum-Calendar-dayOfWeek`.
Defaults to `var(--highcontrast-calendar-day-title-text-color, var(--mod-calendar-day-title-text-color, var(--spectrum-neutral-subdued-content-color-default)))`, if not set.",
+ "control": "color",
+ "category": "Component"
+ },
+ "spectrum-calendar-heading-text-size": {
+ "value": "var(--mod-calendar-day-title-text-size, var(--spectrum-font-size-50))",
+ "description": "Defined in `.spectrum-Calendar`.
Used by `.spectrum-Calendar-dayOfWeek`.
Defaults to `var(--mod-calendar-day-title-text-size, var(--spectrum-font-size-50))`, if not set.",
+ "control": "text",
+ "category": "Component"
+ },
+ "spectrum-calendar-button-icon-color": {
+ "value": "var(--mod-calendar-button-icon-color, var(--spectrum-neutral-subdued-content-color-default))",
+ "description": "Defined in `.spectrum-Calendar`.
Used by `--mod-actionbutton-content-color-default`.
Defaults to `var(--mod-calendar-button-icon-color, var(--spectrum-neutral-subdued-content-color-default))`, if not set.",
+ "control": "color",
+ "category": "Component"
+ },
+ "spectrum-calendar-day-background": {
+ "value": "var(--mod-calendar-day-background-color, transparent)",
+ "description": "Defined in `.spectrum-Calendar-date`.
Used by `.spectrum-Calendar-date:before`.
Defaults to `var(--mod-calendar-day-background-color, transparent)`, if not set.",
+ "control": "text",
+ "category": "Component"
+ },
+ "spectrum-calendar-day-background-selected": {
+ "value": "var(--highcontrast-calendar-day-background-selected, var(--mod-calendar-day-background-color-selected, var(--spectrum-calendar-day-background-color-selected)))",
+ "description": "Defined in `.spectrum-Calendar-date`.
Used by `--mod-calendar-day-background-color`, `--mod-calendar-day-background-layer-color`.
Defaults to `var(--highcontrast-calendar-day-background-selected, var(--mod-calendar-day-background-color-selected, var(--spectrum-calendar-day-background-color-selected)))`, if not set.",
+ "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": {
+ "value": "var(--highcontrast-calendar-day-background-selected-hover, var(--mod-calendar-day-background-color-selected-hover, var(--spectrum-calendar-day-background-color-selected-hover)))",
+ "description": "Defined in `.spectrum-Calendar-date`.
Used by `--mod-calendar-day-background-color`.
Defaults to `var(--highcontrast-calendar-day-background-selected-hover, var(--mod-calendar-day-background-color-selected-hover, var(--spectrum-calendar-day-background-color-selected-hover)))`, if not set.",
+ "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": {
+ "value": "var(--highcontrast-calendar-day-background-cap-selected, var(--mod-calendar-day-background-color-cap-selected, var(--spectrum-calendar-day-background-color-cap-selected)))",
+ "description": "Defined in `.spectrum-Calendar-date`.
Used by `--mod-calendar-day-background-color-key-focus`, `--mod-calendar-day-background-color`.
Defaults to `var(--highcontrast-calendar-day-background-cap-selected, var(--mod-calendar-day-background-color-cap-selected, var(--spectrum-calendar-day-background-color-cap-selected)))`, if not set.",
+ "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": {
+ "value": "var(--highcontrast-calendar-day-background-hover, var(--mod-calendar-day-background-color-hover, var(--spectrum-calendar-day-background-color-hover)))",
+ "description": "Defined in `.spectrum-Calendar-date`.
Used by `--mod-calendar-day-background-color`.
Defaults to `var(--highcontrast-calendar-day-background-hover, var(--mod-calendar-day-background-color-hover, var(--spectrum-calendar-day-background-color-hover)))`, if not set.",
+ "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": {
+ "value": "var(--highcontrast-calendar-day-background-focus, var(--mod-calendar-day-background-color-key-focus, var(--spectrum-calendar-day-background-color-key-focus)))",
+ "description": "Defined in `.spectrum-Calendar-date`.
Used by `--mod-calendar-day-background-color`.
Defaults to `var(--highcontrast-calendar-day-background-focus, var(--mod-calendar-day-background-color-key-focus, var(--spectrum-calendar-day-background-color-key-focus)))`, if not set.",
+ "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": {
+ "value": "var(--highcontrast-calendar-day-background-down, var(--mod-calendar-day-background-color-down, var(--spectrum-calendar-day-background-color-down)))",
+ "description": "Defined in `.spectrum-Calendar-date`.
Used by `--mod-calendar-day-background-layer-color`.
Defaults to `var(--highcontrast-calendar-day-background-down, var(--mod-calendar-day-background-color-down, var(--spectrum-calendar-day-background-color-down)))`, if not set.",
+ "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": {
+ "value": "var(--mod-calendar-day-background-layer-color, transparent)",
+ "description": "Defined in `.spectrum-Calendar-date`.
Used by `.spectrum-Calendar-date`.
Defaults to `var(--mod-calendar-day-background-layer-color, transparent)`, if not set.",
+ "control": "color",
+ "category": "Component"
+ },
+ "spectrum-calendar-day-border-color": {
+ "value": "var(--mod-calendar-day-border-color, transparent)",
+ "description": "Defined in `.spectrum-Calendar-date`.
Used by `.spectrum-Calendar-date`.
Defaults to `var(--mod-calendar-day-border-color, transparent)`, if not set.",
+ "control": "color",
+ "category": "Component"
+ },
+ "spectrum-calendar-day-border-color-focus": {
+ "value": "var(--highcontrast-calendar-day-border-color-focus, var(--mod-calendar-day-border-color-key-focus, var(--spectrum-calendar-day-border-color-key-focus)))",
+ "description": "Defined in `.spectrum-Calendar-date`.
Used by `--mod-calendar-day-border-color`.
Defaults to `var(--highcontrast-calendar-day-border-color-focus, var(--mod-calendar-day-border-color-key-focus, var(--spectrum-calendar-day-border-color-key-focus)))`, if not set.",
+ "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": {
+ "value": "var(--mod-calendar-day-text-size-han, var(--spectrum-font-size-50))",
+ "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`.
Defaults to `var(--mod-calendar-day-text-size-han, var(--spectrum-font-size-50))`, if not set.",
+ "control": "text",
+ "category": "Component"
+ },
+ "spectrum-calendar-day-text-font-weight": {
+ "value": "var(--mod-calendar-day-text-font-weight, var(--spectrum-regular-font-weight))",
+ "description": "Defined in `.spectrum-Calendar-date`.
Used by `.spectrum-Calendar-date`.
Defaults to `var(--mod-calendar-day-text-font-weight, var(--spectrum-regular-font-weight))`, if not set.",
+ "control": "text",
+ "category": "Component"
+ },
+ "spectrum-calendar-day-text-font-weight-selected": {
+ "value": "var(--mod-calendar-day-text-font-weight-selected, var(--spectrum-bold-font-weight))",
+ "description": "Defined in `.spectrum-Calendar-date`.
Used by `--mod-calendar-day-text-font-weight`.
Defaults to `var(--mod-calendar-day-text-font-weight-selected, var(--spectrum-bold-font-weight))`, if not set.",
+ "control": "text",
+ "category": "Component"
+ },
+ "spectrum-calendar-day-text-font-weight-cap-selected": {
+ "value": "var(--mod-calendar-day-text-font-weight-cap-selected, var(--spectrum-bold-font-weight))",
+ "description": "Defined in `.spectrum-Calendar-date`.
Used by `--mod-calendar-day-text-font-weight`.
Defaults to `var(--mod-calendar-day-text-font-weight-cap-selected, var(--spectrum-bold-font-weight))`, if not set.",
+ "control": "text",
+ "category": "Component"
+ },
+ "spectrum-calendar-day-today-background-selected-hover": {
+ "value": "var(--highcontrast-calendar-day-today-background-selected-hover, 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 `--mod-calendar-day-background-color-hover`.
Defaults to `var(--highcontrast-calendar-day-today-background-selected-hover, var(--mod-calendar-day-today-background-color-selected-hover, var(--spectrum-calendar-day-today-background-color-selected-hover)))`, if not set.",
+ "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": {
+ "value": "var(--mod-calendar-day-today-text-font-weight, var(--spectrum-bold-font-weight))",
+ "description": "Defined in `.spectrum-Calendar-date`.
Used by `--mod-calendar-day-text-font-weight`.
Defaults to `var(--mod-calendar-day-today-text-font-weight, var(--spectrum-bold-font-weight))`, if not set.",
+ "control": "text",
+ "category": "Component"
+ },
+ "spectrum-calendar-day-today-text-color": {
+ "value": "var(--highcontrast-calendar-day-today-text-color, var(--mod-calendar-day-today-text-color, var(--spectrum-neutral-content-color-default)))",
+ "description": "Defined in `.spectrum-Calendar-date`.
Used by `--mod-calendar-day-text-color`.
Defaults to `var(--highcontrast-calendar-day-today-text-color, var(--mod-calendar-day-today-text-color, var(--spectrum-neutral-content-color-default)))`, if not set.",
+ "control": "color",
+ "category": "Component"
+ },
+ "spectrum-calendar-day-today-border-color": {
+ "value": "var(--highcontrast-calendar-day-today-border-color, var(--mod-calendar-day-today-border-color, var(--spectrum-gray-800)))",
+ "description": "Defined in `.spectrum-Calendar-date`.
Used by `--mod-calendar-day-border-color`.
Defaults to `var(--highcontrast-calendar-day-today-border-color, var(--mod-calendar-day-today-border-color, var(--spectrum-gray-800)))`, if not set.",
+ "control": "color",
+ "category": "Component"
+ },
+ "spectrum-calendar-day-text-color": {
+ "value": "var(--mod-calendar-day-text-color, var(--spectrum-neutral-subdued-content-color-default))",
+ "description": "Defined in `.spectrum-Calendar-date`.
Used by `.spectrum-Calendar-date`.
Defaults to `var(--mod-calendar-day-text-color, var(--spectrum-neutral-subdued-content-color-default))`, if not set.",
+ "control": "color",
+ "category": "Component"
+ },
+ "spectrum-calendar-day-text-color-selected": {
+ "value": "var(--highcontrast-calendar-day-text-color-selected, var(--mod-calendar-day-text-color-selected, var(--spectrum-neutral-content-color-down)))",
+ "description": "Defined in `.spectrum-Calendar-date`.
Used by `--mod-calendar-day-text-color`.
Defaults to `var(--highcontrast-calendar-day-text-color-selected, var(--mod-calendar-day-text-color-selected, var(--spectrum-neutral-content-color-down)))`, if not set.",
+ "control": "color",
+ "category": "Component"
+ },
+ "spectrum-calendar-day-text-color-cap-selected": {
+ "value": "var(--highcontrast-calendar-day-text-color-cap-selected, var(--mod-calendar-day-text-color-cap-selected, var(--spectrum-neutral-content-color-down)))",
+ "description": "Defined in `.spectrum-Calendar-date`.
Used by `--mod-calendar-day-text-color`, `--mod-calendar-day-text-color-key-focus`.
Defaults to `var(--highcontrast-calendar-day-text-color-cap-selected, var(--mod-calendar-day-text-color-cap-selected, var(--spectrum-neutral-content-color-down)))`, if not set.",
+ "control": "color",
+ "category": "Component"
+ },
+ "spectrum-calendar-day-text-color-hover": {
+ "value": "var(--highcontrast-calendar-day-text-color-hover, var(--mod-calendar-day-text-color-hover, var(--spectrum-neutral-content-color-hover)))",
+ "description": "Defined in `.spectrum-Calendar-date`.
Used by `--mod-calendar-day-text-color`.
Defaults to `var(--highcontrast-calendar-day-text-color-hover, var(--mod-calendar-day-text-color-hover, var(--spectrum-neutral-content-color-hover)))`, if not set.",
+ "control": "color",
+ "category": "Component"
+ },
+ "spectrum-calendar-day-text-color-key-focus": {
+ "value": "var(--highcontrast-calendar-day-text-color-key-focus, var(--mod-calendar-day-text-color-key-focus, var(--spectrum-neutral-content-color-key-focus)))",
+ "description": "Defined in `.spectrum-Calendar-date`.
Used by `--mod-calendar-day-text-color`.
Defaults to `var(--highcontrast-calendar-day-text-color-key-focus, var(--mod-calendar-day-text-color-key-focus, var(--spectrum-neutral-content-color-key-focus)))`, if not set.",
+ "control": "color",
+ "category": "Component"
+ },
+ "spectrum-calendar-day-text-color-disabled": {
+ "value": "var(--mod-calendar-day-text-color-disabled, var(--spectrum-disabled-content-color))",
+ "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`.
Defaults to `var(--mod-calendar-day-text-color-disabled, var(--spectrum-disabled-content-color))`, if not set.",
+ "control": "color",
+ "category": "Component"
+ },
+ "spectrum-calendar-day-today-border-color-disabled": {
+ "value": "var(--mod-calendar-day-today-border-color-disabled, var(--spectrum-disabled-border-color))",
+ "description": "Defined in `.spectrum-Calendar-date`.
Used by `--mod-calendar-day-today-border-color`.
Defaults to `var(--mod-calendar-day-today-border-color-disabled, var(--spectrum-disabled-border-color))`, if not set.",
+ "control": "color",
+ "category": "Component"
+ }
+ },
+ "global": {
+ "spectrum-gray-100-rgb": {
+ "description": "Used by `--spectrum-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": {
+ "value": "matrix(-1, 0, 0, 1, 0, 0)",
+ "description": "Defined in `.spectrum-Calendar:dir(rtl)`.
Used by `.spectrum-Calendar-nextMonth, .spectrum-Calendar-prevMonth`.
Defaults to `matrix(-1, 0, 0, 1, 0, 0)`, if not set.",
+ "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"
+ }
+ },
+ "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..62af6245e07 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,10 @@ export default {
},
packageJson,
metadata,
+ cssprops: {
+ ...metadata.modifiers,
+ ...metadata.component,
+ },
},
};
diff --git a/components/card/dist/metadata.json b/components/card/dist/metadata.json
index d1d22100c30..048da5e2128 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",
@@ -35,14 +35,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:after",
".spectrum-Card:before",
".spectrum-Card:focus .spectrum-Card-actions",
@@ -53,143 +45,738 @@
".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-border-radius",
- "--mod-card-actions-drop-shadow-blur",
- "--mod-card-actions-drop-shadow-color",
- "--mod-card-actions-drop-shadow-x",
- "--mod-card-actions-drop-shadow-y",
- "--mod-card-actions-size",
- "--mod-card-actions-spacing",
- "--mod-card-animation-duration",
- "--mod-card-background-color",
- "--mod-card-background-color-hover",
- "--mod-card-background-color-selected",
- "--mod-card-body-font-color",
- "--mod-card-body-font-family",
- "--mod-card-body-font-size",
- "--mod-card-body-font-style",
- "--mod-card-body-font-weight",
- "--mod-card-body-line-height",
- "--mod-card-body-padding-block-end",
- "--mod-card-body-padding-block-start",
- "--mod-card-body-padding-inline-end",
- "--mod-card-body-padding-inline-start",
- "--mod-card-body-spacing",
- "--mod-card-border-color",
- "--mod-card-border-color-hover",
- "--mod-card-border-color-selected",
- "--mod-card-border-width",
- "--mod-card-content-margin-bottom",
- "--mod-card-content-margin-top",
- "--mod-card-corner-radius",
- "--mod-card-divider-color",
- "--mod-card-focus-indicator-color",
- "--mod-card-focus-indicator-width",
- "--mod-card-footer-margin-block-start",
- "--mod-card-footer-margin-inline-end",
- "--mod-card-footer-margin-inline-start",
- "--mod-card-footer-padding-block-end",
- "--mod-card-footer-padding-block-start",
- "--mod-card-horizontal-body-padding",
- "--mod-card-horizontal-preview-padding",
- "--mod-card-minimum-width",
- "--mod-card-preview-background-color",
- "--mod-card-preview-background-color-hover",
- "--mod-card-preview-minimum-height",
- "--mod-card-selected-background-color-rgb",
- "--mod-card-selected-background-opacity",
- "--mod-card-subtitle-padding-right",
- "--mod-card-title-font-color",
- "--mod-card-title-font-family",
- "--mod-card-title-font-size",
- "--mod-card-title-font-style",
- "--mod-card-title-font-weight",
- "--mod-card-title-line-height",
- "--mod-card-title-padding-right",
- "--mod-overlay-animation-duration"
- ],
- "component": [
- "--spectrum-card-actions-border-radius",
- "--spectrum-card-actions-drop-shadow-blur",
- "--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-color-selected",
- "--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-minimum-height",
- "--spectrum-card-selected-background-color-rgb",
- "--spectrum-card-selected-background-opacity",
- "--spectrum-card-selection-background-color",
- "--spectrum-card-selection-background-size",
- "--spectrum-card-subtitle-padding-right",
- "--spectrum-card-title-font-color",
- "--spectrum-card-title-font-family",
- "--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-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"
+ ".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"
],
- "passthroughs": [],
- "high-contrast": []
+ "modifiers": {
+ "mod-card-border-color": {
+ "description": "Defined in `.spectrum-Card.is-selected`, `.spectrum-Card:hover`, `.spectrum-Card--horizontal:hover .spectrum-Card-preview`.
Used by `--spectrum-card-border-color`.
Defaults to `var(--spectrum-gray-100)`, if not set.",
+ "control": "color",
+ "category": "Modifier"
+ },
+ "mod-card-border-color-hover": {
+ "description": "Defined in `.spectrum-Card--gallery`.
Used by `--spectrum-card-border-color-hover`.
Defaults to `var(--spectrum-gray-200)`, if not set.",
+ "control": "color",
+ "category": "Modifier"
+ },
+ "mod-card-border-color-selected": {
+ "description": "Used by `--spectrum-card-border-color-selected`.
Defaults to `var(--spectrum-blue-700)`, if not set.",
+ "control": "color",
+ "category": "Modifier"
+ },
+ "mod-card-divider-color": {
+ "description": "Used by `--spectrum-card-divider-color`.
Defaults to `var(--spectrum-gray-200)`, if not set.",
+ "control": "color",
+ "category": "Modifier"
+ },
+ "mod-card-preview-background-color": {
+ "description": "Used by `--spectrum-card-preview-background-color`.
Defaults to `var(--mod-card-background-color, var(--spectrum-gray-100))`, if not set.",
+ "control": "color",
+ "category": "Modifier"
+ },
+ "mod-card-background-color": {
+ "description": "Defined in `.spectrum-Card.is-drop-target`.
Used by `--spectrum-card-preview-background-color`, `--spectrum-card-background-color`.
Defaults to `var(--spectrum-background-layer-2-color)`, if not set.",
+ "control": "color",
+ "category": "Modifier"
+ },
+ "mod-card-preview-background-color-hover": {
+ "description": "Used by `--spectrum-card-preview-background-color-hover`.
Defaults to `var(--mod-card-background-color-hover, var(--spectrum-gray-200))`, if not set.",
+ "control": "color",
+ "category": "Modifier"
+ },
+ "mod-card-background-color-hover": {
+ "description": "Used by `--spectrum-card-preview-background-color-hover`.
Defaults to `var(--spectrum-gray-200)`, if not set.",
+ "control": "color",
+ "category": "Modifier"
+ },
+ "mod-card-body-spacing": {
+ "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": {
+ "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": {
+ "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": {
+ "description": "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": {
+ "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": {
+ "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": {
+ "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": {
+ "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": {
+ "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": {
+ "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": {
+ "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": {
+ "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": {
+ "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": {
+ "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": {
+ "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": {
+ "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": {
+ "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": {
+ "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": {
+ "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": {
+ "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": {
+ "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": {
+ "description": "Used by `--spectrum-card-actions-spacing`.
Defaults to `var(--spectrum-spacing-300)`, if not set.",
+ "control": "text",
+ "category": "Modifier"
+ },
+ "mod-card-actions-size": {
+ "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": {
+ "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-drop-shadow-color": {
+ "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": {
+ "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": {
+ "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": {
+ "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": {
+ "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": {
+ "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": {
+ "description": "Used by `--spectrum-card-selected-background-opacity`, `.spectrum-Card--gallery.is-selected .spectrum-Card-preview:before`.
Defaults to `var(--spectrum-card-selected-background-opacity)`, if not set.",
+ "control": "text",
+ "category": "Modifier"
+ },
+ "mod-card-horizontal-body-padding": {
+ "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": {
+ "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": {
+ "description": "Used by `.spectrum-Card`.
Defaults to `var(--spectrum-card-minimum-width)`, if not set.",
+ "control": "text",
+ "category": "Modifier"
+ },
+ "mod-card-background-color-selected": {
+ "description": "Used by `.spectrum-Card.is-selected:before`.
Defaults to `var(--spectrum-card-selection-background-color)`, if not set.",
+ "control": "color",
+ "category": "Modifier"
+ },
+ "mod-overlay-animation-duration": {
+ "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": {
+ "description": "Used by `.spectrum-Card-coverPhoto`, `.spectrum-Card--gallery .spectrum-Card-preview`.
Defaults to `var(--spectrum-card-preview-minimum-height)`, if not set.",
+ "control": "text",
+ "category": "Modifier"
+ },
+ "mod-card-body-padding-inline-end": {
+ "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": {
+ "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": {
+ "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": {
+ "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": {
+ "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": {
+ "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": {
+ "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-animation-duration": {
+ "description": "Used by `.spectrum-Card--gallery .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": {
+ "description": "Used by `.spectrum-Card--gallery .spectrum-Card-preview`.
Defaults to `var(--spectrum-animation-duration-100)`, if not set.",
+ "control": "text",
+ "category": "Modifier"
+ },
+ "mod-card-selected-background-color-rgb": {
+ "description": "Used by `.spectrum-Card--gallery.is-selected .spectrum-Card-preview:before`.
Defaults to `var(--spectrum-card-selected-background-color-rgb)`, if not set.",
+ "control": "color",
+ "category": "Modifier"
+ }
+ },
+ "component": {
+ "spectrum-card-border-color": {
+ "value": "var(--mod-card-border-color, var(--spectrum-gray-100))",
+ "description": "Defined in `.spectrum-Card`.
Used by `.spectrum-Card`, `.spectrum-Card.is-drop-target`, `.spectrum-Card-coverPhoto`, `.spectrum-Card--horizontal .spectrum-Card-preview`.
Defaults to `var(--mod-card-border-color, var(--spectrum-gray-100))`, if not set.",
+ "control": "color",
+ "category": "Component"
+ },
+ "spectrum-card-border-color-hover": {
+ "value": "var(--mod-card-border-color-hover, var(--spectrum-gray-200))",
+ "description": "Defined in `.spectrum-Card`.
Used by `--mod-card-border-color`.
Defaults to `var(--mod-card-border-color-hover, var(--spectrum-gray-200))`, if not set.",
+ "control": "color",
+ "category": "Component"
+ },
+ "spectrum-card-border-color-selected": {
+ "value": "var(--mod-card-border-color-selected, var(--spectrum-blue-700))",
+ "description": "Defined in `.spectrum-Card`.
Used by `--mod-card-border-color`.
Defaults to `var(--mod-card-border-color-selected, var(--spectrum-blue-700))`, if not set.",
+ "control": "color",
+ "category": "Component"
+ },
+ "spectrum-card-divider-color": {
+ "value": "var(--mod-card-divider-color, var(--spectrum-gray-200))",
+ "description": "Defined in `.spectrum-Card`.
Used by `.spectrum-Card-footer`.
Defaults to `var(--mod-card-divider-color, var(--spectrum-gray-200))`, if not set.",
+ "control": "color",
+ "category": "Component"
+ },
+ "spectrum-card-preview-background-color": {
+ "value": "var(--mod-card-preview-background-color, var(--mod-card-background-color, var(--spectrum-gray-100)))",
+ "description": "Defined in `.spectrum-Card`.
Used by `.spectrum-Card-coverPhoto`, `.spectrum-Card--gallery .spectrum-Card-preview`, `.spectrum-Card--gallery.is-drop-target .spectrum-Card-preview`, `.spectrum-Card--horizontal .spectrum-Card-preview`.
Defaults to `var(--mod-card-preview-background-color, var(--mod-card-background-color, var(--spectrum-gray-100)))`, if not set.",
+ "control": "color",
+ "category": "Component"
+ },
+ "spectrum-card-preview-background-color-hover": {
+ "value": "var(--mod-card-preview-background-color-hover, var(--mod-card-background-color-hover, var(--spectrum-gray-200)))",
+ "description": "Defined in `.spectrum-Card`.
Used by `.spectrum-Card--gallery:hover .spectrum-Card-preview`.
Defaults to `var(--mod-card-preview-background-color-hover, var(--mod-card-background-color-hover, var(--spectrum-gray-200)))`, if not set.",
+ "control": "color",
+ "category": "Component"
+ },
+ "spectrum-card-background-color": {
+ "value": "var(--mod-card-background-color, var(--spectrum-background-layer-2-color))",
+ "description": "Defined in `.spectrum-Card`.
Used by `.spectrum-Card`.
Defaults to `var(--mod-card-background-color, var(--spectrum-background-layer-2-color))`, if not set.",
+ "control": "color",
+ "category": "Component"
+ },
+ "spectrum-card-body-spacing": {
+ "value": "var(--mod-card-body-spacing, var(--spectrum-spacing-400))",
+ "description": "Defined in `.spectrum-Card`.
Used by `.spectrum-Card-body`, `.spectrum-Card-footer`.
Defaults to `var(--mod-card-body-spacing, var(--spectrum-spacing-400))`, if not set.",
+ "control": "text",
+ "category": "Component"
+ },
+ "spectrum-card-body-padding-block-start": {
+ "value": "var(--mod-card-body-padding-block-start, var(--spectrum-spacing-300))",
+ "description": "Defined in `.spectrum-Card`.
Used by `.spectrum-Card-body`.
Defaults to `var(--mod-card-body-padding-block-start, var(--spectrum-spacing-300))`, if not set.",
+ "control": "text",
+ "category": "Component"
+ },
+ "spectrum-card-title-padding-right": {
+ "value": "var(--mod-card-title-padding-right, var(--spectrum-spacing-400))",
+ "description": "Defined in `.spectrum-Card`.
Used by `.spectrum-Card-title`.
Defaults to `var(--mod-card-title-padding-right, var(--spectrum-spacing-400))`, if not set.",
+ "control": "text",
+ "category": "Component"
+ },
+ "spectrum-card-content-margin-top": {
+ "value": "8px",
+ "description": "Defined in `.spectrum-Card`, `.spectrum-Card.spectrum-Card--gallery`.
Used by `.spectrum-Card-content`, `.spectrum-Card--gallery .spectrum-Card-body`.
Defaults to `var(--spectrum-spacing-100)`, if not set.",
+ "control": "text",
+ "category": "Component"
+ },
+ "spectrum-card-content-margin-bottom": {
+ "value": "var(--mod-card-content-margin-bottom, var(--spectrum-spacing-300))",
+ "description": "Defined in `.spectrum-Card`.
Used by `.spectrum-Card-footer`.
Defaults to `var(--mod-card-content-margin-bottom, var(--spectrum-spacing-300))`, if not set.",
+ "control": "text",
+ "category": "Component"
+ },
+ "spectrum-card-footer-padding-top": {
+ "value": "var(--mod-card-footer-padding-block-start, var(--spectrum-spacing-100))",
+ "description": "Defined in `.spectrum-Card`.
Used by `.spectrum-Card-footer`.
Defaults to `var(--mod-card-footer-padding-block-start, var(--spectrum-spacing-100))`, if not set.",
+ "control": "text",
+ "category": "Component"
+ },
+ "spectrum-card-subtitle-padding-right": {
+ "value": "var(--mod-card-subtitle-padding-right, var(--spectrum-spacing-100))",
+ "description": "Defined in `.spectrum-Card`.
Used by `.spectrum-Card-subtitle`, `.spectrum-Card-subtitle + .spectrum-Card-description:before`.
Defaults to `var(--mod-card-subtitle-padding-right, var(--spectrum-spacing-100))`, if not set.",
+ "control": "text",
+ "category": "Component"
+ },
+ "spectrum-card-border-width": {
+ "value": "var(--mod-card-border-width, var(--spectrum-border-width-100))",
+ "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`.
Defaults to `var(--mod-card-border-width, var(--spectrum-border-width-100))`, if not set.",
+ "control": "text",
+ "category": "Component"
+ },
+ "spectrum-card-corner-radius": {
+ "value": "var(--mod-card-corner-radius, var(--spectrum-corner-radius-100))",
+ "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--gallery .spectrum-Card-preview:after`, `.spectrum-Card--horizontal .spectrum-Card-preview`.
Defaults to `var(--mod-card-corner-radius, var(--spectrum-corner-radius-100))`, if not set.",
+ "control": "text",
+ "category": "Component"
+ },
+ "spectrum-card-title-font-family": {
+ "value": "var(--mod-card-title-font-family, var(--spectrum-sans-font-family-stack))",
+ "description": "Defined in `.spectrum-Card`.
Used by `.spectrum-Card-title`.
Defaults to `var(--mod-card-title-font-family, var(--spectrum-sans-font-family-stack))`, if not set.",
+ "control": "text",
+ "category": "Component"
+ },
+ "spectrum-card-title-font-size": {
+ "value": "var(--mod-card-title-font-size, var(--spectrum-heading-size-xxs))",
+ "description": "Defined in `.spectrum-Card`.
Used by `.spectrum-Card-title`.
Defaults to `var(--mod-card-title-font-size, var(--spectrum-heading-size-xxs))`, if not set.",
+ "control": "text",
+ "category": "Component"
+ },
+ "spectrum-card-title-font-weight": {
+ "value": "var(--mod-card-title-font-weight, var(--spectrum-heading-sans-serif-font-weight))",
+ "description": "Defined in `.spectrum-Card`.
Used by `.spectrum-Card-title`.
Defaults to `var(--mod-card-title-font-weight, var(--spectrum-heading-sans-serif-font-weight))`, if not set.",
+ "control": "text",
+ "category": "Component"
+ },
+ "spectrum-card-title-font-style": {
+ "value": "var(--mod-card-title-font-style, var(--spectrum-heading-sans-serif-font-style))",
+ "description": "Defined in `.spectrum-Card`.
Used by `.spectrum-Card-title`.
Defaults to `var(--mod-card-title-font-style, var(--spectrum-heading-sans-serif-font-style))`, if not set.",
+ "control": "text",
+ "category": "Component"
+ },
+ "spectrum-card-title-line-height": {
+ "value": "var(--mod-card-title-line-height, var(--spectrum-heading-line-height))",
+ "description": "Defined in `.spectrum-Card`.
Used by `.spectrum-Card-title`.
Defaults to `var(--mod-card-title-line-height, var(--spectrum-heading-line-height))`, if not set.",
+ "control": "text",
+ "category": "Component"
+ },
+ "spectrum-card-title-font-color": {
+ "value": "var(--mod-card-title-font-color, var(--spectrum-heading-color))",
+ "description": "Defined in `.spectrum-Card`.
Used by `.spectrum-Card-title`, `.spectrum-Card-subtitle`.
Defaults to `var(--mod-card-title-font-color, var(--spectrum-heading-color))`, if not set.",
+ "control": "color",
+ "category": "Component"
+ },
+ "spectrum-card-body-font-family": {
+ "value": "var(--mod-card-body-font-family, var(--spectrum-sans-font-family-stack))",
+ "description": "Defined in `.spectrum-Card`.
Used by `.spectrum-Card-description`.
Defaults to `var(--mod-card-body-font-family, var(--spectrum-sans-font-family-stack))`, if not set.",
+ "control": "text",
+ "category": "Component"
+ },
+ "spectrum-card-body-font-size": {
+ "value": "var(--mod-card-body-font-size, var(--spectrum-body-size-s))",
+ "description": "Defined in `.spectrum-Card`.
Used by `.spectrum-Card-description`.
Defaults to `var(--mod-card-body-font-size, var(--spectrum-body-size-s))`, if not set.",
+ "control": "text",
+ "category": "Component"
+ },
+ "spectrum-card-body-font-weight": {
+ "value": "var(--mod-card-body-font-weight, var(--spectrum-body-sans-serif-font-weight))",
+ "description": "Defined in `.spectrum-Card`.
Used by `.spectrum-Card-description`.
Defaults to `var(--mod-card-body-font-weight, var(--spectrum-body-sans-serif-font-weight))`, if not set.",
+ "control": "text",
+ "category": "Component"
+ },
+ "spectrum-card-body-font-style": {
+ "value": "var(--mod-card-body-font-style, var(--spectrum-body-sans-serif-font-style))",
+ "description": "Defined in `.spectrum-Card`.
Used by `.spectrum-Card-description`.
Defaults to `var(--mod-card-body-font-style, var(--spectrum-body-sans-serif-font-style))`, if not set.",
+ "control": "text",
+ "category": "Component"
+ },
+ "spectrum-card-body-line-height": {
+ "value": "var(--mod-card-body-line-height, var(--spectrum-body-line-height))",
+ "description": "Defined in `.spectrum-Card`.
Used by `.spectrum-Card-description, .spectrum-Card-footer`.
Defaults to `var(--mod-card-body-line-height, var(--spectrum-body-line-height))`, if not set.",
+ "control": "text",
+ "category": "Component"
+ },
+ "spectrum-card-body-font-color": {
+ "value": "var(--mod-card-body-font-color, var(--spectrum-body-color))",
+ "description": "Defined in `.spectrum-Card`.
Used by `.spectrum-Card-preview`, `.spectrum-Card-description, .spectrum-Card-footer`.
Defaults to `var(--mod-card-body-font-color, var(--spectrum-body-color))`, if not set.",
+ "control": "color",
+ "category": "Component"
+ },
+ "spectrum-card-actions-spacing": {
+ "value": "var(--mod-card-actions-spacing, var(--spectrum-spacing-300))",
+ "description": "Defined in `.spectrum-Card`.
Used by `.spectrum-Card-quickActions`, `.spectrum-Card-actions`.
Defaults to `var(--mod-card-actions-spacing, var(--spectrum-spacing-300))`, if not set.",
+ "control": "text",
+ "category": "Component"
+ },
+ "spectrum-card-actions-size": {
+ "value": "var(--mod-card-actions-size, var(--spectrum-card-selection-background-size))",
+ "description": "Defined in `.spectrum-Card`.
Used by `.spectrum-Card-quickActions`.
Defaults to `var(--mod-card-actions-size, var(--spectrum-card-selection-background-size))`, if not set.",
+ "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": {
+ "value": "var(--mod-card-actions-border-radius, var(--spectrum-corner-radius-100))",
+ "description": "Defined in `.spectrum-Card`.
Used by `.spectrum-Card-quickActions`.
Defaults to `var(--mod-card-actions-border-radius, var(--spectrum-corner-radius-100))`, if not set.",
+ "control": "text",
+ "category": "Component"
+ },
+ "spectrum-card-actions-drop-shadow-color": {
+ "value": "var(--mod-card-actions-drop-shadow-color, var(--spectrum-drop-shadow-color))",
+ "description": "Defined in `.spectrum-Card`.
Used by `.spectrum-Card-quickActions`.
Defaults to `var(--mod-card-actions-drop-shadow-color, var(--spectrum-drop-shadow-color))`, if not set.",
+ "control": "color",
+ "category": "Component"
+ },
+ "spectrum-card-actions-drop-shadow-x": {
+ "value": "var(--mod-card-actions-drop-shadow-x, var(--spectrum-drop-shadow-x))",
+ "description": "Defined in `.spectrum-Card`.
Used by `.spectrum-Card-quickActions`.
Defaults to `var(--mod-card-actions-drop-shadow-x, var(--spectrum-drop-shadow-x))`, if not set.",
+ "control": "text",
+ "category": "Component"
+ },
+ "spectrum-card-actions-drop-shadow-y": {
+ "value": "var(--mod-card-actions-drop-shadow-y, var(--spectrum-drop-shadow-y))",
+ "description": "Defined in `.spectrum-Card`.
Used by `.spectrum-Card-quickActions`.
Defaults to `var(--mod-card-actions-drop-shadow-y, var(--spectrum-drop-shadow-y))`, if not set.",
+ "control": "text",
+ "category": "Component"
+ },
+ "spectrum-card-actions-drop-shadow-blur": {
+ "value": "var(--mod-card-actions-drop-shadow-blur, var(--spectrum-drop-shadow-blur))",
+ "description": "Defined in `.spectrum-Card`.
Used by `.spectrum-Card-quickActions`.
Defaults to `var(--mod-card-actions-drop-shadow-blur, var(--spectrum-drop-shadow-blur))`, if not set.",
+ "control": "text",
+ "category": "Component"
+ },
+ "spectrum-card-focus-indicator-color": {
+ "value": "var(--mod-card-focus-indicator-color, var(--spectrum-focus-indicator-color))",
+ "description": "Defined in `.spectrum-Card`.
Used by `.spectrum-Card:focus-visible:after`, `.spectrum-Card--gallery.is-drop-target .spectrum-Card-preview:before`.
Defaults to `var(--mod-card-focus-indicator-color, var(--spectrum-focus-indicator-color))`, if not set.",
+ "control": "color",
+ "category": "Component"
+ },
+ "spectrum-card-focus-indicator-width": {
+ "value": "var(--mod-card-focus-indicator-width, var(--spectrum-focus-indicator-thickness))",
+ "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--gallery .spectrum-Card-preview:after`.
Defaults to `var(--mod-card-focus-indicator-width, var(--spectrum-focus-indicator-thickness))`, if not set.",
+ "control": "text",
+ "category": "Component"
+ },
+ "spectrum-card-selected-background-opacity": {
+ "value": "var(--mod-card-selected-background-opacity, 0.1)",
+ "description": "Defined in `.spectrum-Card`.
Used by `.spectrum-Card--gallery.is-selected .spectrum-Card-preview:before`.
Defaults to `var(--mod-card-selected-background-opacity, 0.1)`, if not set.",
+ "control": "text",
+ "category": "Component"
+ },
+ "spectrum-card-horizontal-body-padding": {
+ "value": "var(--mod-card-horizontal-body-padding, var(--spectrum-spacing-300))",
+ "description": "Defined in `.spectrum-Card`.
Used by `.spectrum-Card--horizontal .spectrum-Card-body`.
Defaults to `var(--mod-card-horizontal-body-padding, var(--spectrum-spacing-300))`, if not set.",
+ "control": "text",
+ "category": "Component"
+ },
+ "spectrum-card-horizontal-preview-padding": {
+ "value": "var(--mod-card-horizontal-preview-padding, var(--spectrum-spacing-200))",
+ "description": "Defined in `.spectrum-Card`.
Used by `.spectrum-Card--horizontal .spectrum-Card-preview`.
Defaults to `var(--mod-card-horizontal-preview-padding, var(--spectrum-spacing-200))`, if not set.",
+ "control": "text",
+ "category": "Component"
+ },
+ "spectrum-card-minimum-width": {
+ "value": "100px",
+ "description": "Used by `.spectrum-Card`.",
+ "control": "text",
+ "category": "Component"
+ },
+ "spectrum-card-selection-background-color": {
+ "value": "rgba(0, 0, 0, 0.56)",
+ "description": "Used by `.spectrum-Card.is-selected:before`, `.spectrum-Card-quickActions`.",
+ "control": "color",
+ "category": "Component"
+ },
+ "spectrum-card-preview-minimum-height": {
+ "value": "130px",
+ "description": "Used by `.spectrum-Card-coverPhoto`, `.spectrum-Card--gallery .spectrum-Card-preview`.",
+ "control": "text",
+ "category": "Component"
+ },
+ "spectrum-card-selected-background-color-rgb": {
+ "description": "Used by `.spectrum-Card--gallery.is-selected .spectrum-Card-preview:before`.",
+ "control": "color",
+ "category": "Component"
+ }
+ },
+ "global": {
+ "spectrum-gray-100": {
+ "value": "light-dark(rgb(233, 233, 233), rgb(44, 44, 44))",
+ "description": "Used by `--spectrum-card-border-color`, `--spectrum-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 `--spectrum-card-border-color-hover`, `--spectrum-card-divider-color`, `--spectrum-card-preview-background-color-hover`.",
+ "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-selected`.",
+ "control": "text",
+ "category": "Global"
+ },
+ "spectrum-background-layer-2-color": {
+ "value": "var(--spectrum-gray-25)",
+ "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`.",
+ "control": "text",
+ "category": "Global"
+ },
+ "spectrum-border-width-100": {
+ "value": "1px",
+ "description": "Used by `--spectrum-card-border-width`.",
+ "control": "text",
+ "category": "Global"
+ },
+ "spectrum-corner-radius-100": {
+ "value": "4px",
+ "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": "800",
+ "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-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": "6px",
+ "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-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`.",
+ "control": "text",
+ "category": "Global"
+ }
+ },
+ "passthroughs": {},
+ "high-contrast": {}
}
diff --git a/components/card/stories/card.stories.js b/components/card/stories/card.stories.js
index 5afad0c1c20..dc5564f5777 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, 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.
*/
@@ -125,6 +127,10 @@ export default {
},
packageJson,
metadata,
+ cssprops: {
+ ...metadata.modifiers,
+ ...metadata.component,
+ },
},
};
diff --git a/components/checkbox/dist/metadata.json b/components/checkbox/dist/metadata.json
index daf35c48fa3..452e693242e 100644
--- a/components/checkbox/dist/metadata.json
+++ b/components/checkbox/dist/metadata.json
@@ -21,13 +21,24 @@
".spectrum-Checkbox .spectrum-Checkbox-input:hover:disabled + .spectrum-Checkbox-box:before",
".spectrum-Checkbox .spectrum-Checkbox-label",
".spectrum-Checkbox .spectrum-Checkbox-partialCheckmark",
+ ".spectrum-Checkbox--emphasized:not(.is-invalid) .spectrum-Checkbox-input:focus-visible: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:hover .spectrum-Checkbox-box:before",
".spectrum-Checkbox--emphasized.is-indeterminate:hover .spectrum-Checkbox-input:checked + .spectrum-Checkbox-box:before",
".spectrum-Checkbox--emphasized.is-indeterminate:not(.is-invalid) .spectrum-Checkbox-input:focus-visible + .spectrum-Checkbox-box:before",
- ".spectrum-Checkbox--emphasized:not(.is-invalid) .spectrum-Checkbox-input:focus-visible:checked + .spectrum-Checkbox-box:before",
".spectrum-Checkbox-input:focus-visible + .spectrum-Checkbox-box",
+ ".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:lang(ja)",
+ ".spectrum-Checkbox:lang(ko)",
+ ".spectrum-Checkbox:lang(zh)",
+ ".spectrum-Checkbox:not(.is-readOnly) .spectrum-Checkbox-input:active:not(:disabled) + .spectrum-Checkbox-box",
+ ".spectrum-Checkbox:not(.is-readOnly):active .spectrum-Checkbox-input:not(:disabled) + .spectrum-Checkbox-box",
".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",
@@ -43,164 +54,799 @@
".spectrum-Checkbox.spectrum-Checkbox--emphasized",
".spectrum-Checkbox.spectrum-Checkbox--sizeL",
".spectrum-Checkbox.spectrum-Checkbox--sizeS",
- ".spectrum-Checkbox.spectrum-Checkbox--sizeXL",
- ".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:lang(ja)",
- ".spectrum-Checkbox:lang(ko)",
- ".spectrum-Checkbox:lang(zh)",
- ".spectrum-Checkbox:not(.is-readOnly) .spectrum-Checkbox-input:active:not(:disabled) + .spectrum-Checkbox-box",
- ".spectrum-Checkbox:not(.is-readOnly):active .spectrum-Checkbox-input:not(:disabled) + .spectrum-Checkbox-box"
- ],
- "modifiers": [
- "--mod-checkbox-animation-duration",
- "--mod-checkbox-border-width",
- "--mod-checkbox-bottom-to-text",
- "--mod-checkbox-checkmark-color",
- "--mod-checkbox-content-color-default",
- "--mod-checkbox-content-color-disabled",
- "--mod-checkbox-content-color-down",
- "--mod-checkbox-content-color-focus",
- "--mod-checkbox-content-color-hover",
- "--mod-checkbox-control-color-default",
- "--mod-checkbox-control-color-disabled",
- "--mod-checkbox-control-color-down",
- "--mod-checkbox-control-color-focus",
- "--mod-checkbox-control-color-hover",
- "--mod-checkbox-control-corner-radius",
- "--mod-checkbox-control-selected-color-default",
- "--mod-checkbox-control-selected-color-down",
- "--mod-checkbox-control-selected-color-hover",
- "--mod-checkbox-control-size",
- "--mod-checkbox-focus-indicator-color",
- "--mod-checkbox-focus-indicator-gap",
- "--mod-checkbox-focus-indicator-thickness",
- "--mod-checkbox-font-size",
- "--mod-checkbox-height",
- "--mod-checkbox-line-height",
- "--mod-checkbox-line-height-cjk",
- "--mod-checkbox-margin-block",
- "--mod-checkbox-selected-border-width",
- "--mod-checkbox-text-to-control",
- "--mod-checkbox-top-to-text",
- "--mod-focus-indicator-thickness"
- ],
- "component": [
- "--spectrum-checkbox-animation-duration",
- "--spectrum-checkbox-background-color",
- "--spectrum-checkbox-border-width",
- "--spectrum-checkbox-bottom-to-text",
- "--spectrum-checkbox-checkmark-color",
- "--spectrum-checkbox-content-color-default",
- "--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-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-text-font-style",
- "--spectrum-checkbox-text-font-weight",
- "--spectrum-checkbox-text-to-control",
- "--spectrum-checkbox-top-to-control",
- "--spectrum-checkbox-top-to-control-extra-large",
- "--spectrum-checkbox-top-to-control-large",
- "--spectrum-checkbox-top-to-control-medium",
- "--spectrum-checkbox-top-to-control-small",
- "--spectrum-checkbox-top-to-text"
- ],
- "global": [
- "--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-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-size-difference-down",
- "--spectrum-component-size-minimum-perspective-down",
- "--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-small-size-extra-large",
- "--spectrum-corner-radius-small-size-large",
- "--spectrum-corner-radius-small-size-medium",
- "--spectrum-corner-radius-small-size-small",
- "--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-200",
- "--spectrum-font-size-300",
- "--spectrum-font-size-75",
- "--spectrum-gray-25",
- "--spectrum-line-height-100",
- "--spectrum-negative-color-1000",
- "--spectrum-negative-color-900",
- "--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-text-to-control-100",
- "--spectrum-text-to-control-200",
- "--spectrum-text-to-control-300",
- "--spectrum-text-to-control-75"
+ ".spectrum-Checkbox.spectrum-Checkbox--sizeXL"
],
- "passthroughs": [],
- "high-contrast": [
- "--highcontrast-checkbox-background-color-default",
- "--highcontrast-checkbox-color-default",
- "--highcontrast-checkbox-color-focus",
- "--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-hover"
- ]
+ "modifiers": {
+ "mod-checkbox-line-height": {
+ "description": "Defined in `.spectrum-Checkbox:lang(ja), .spectrum-Checkbox:lang(ko), .spectrum-Checkbox:lang(zh)`.
Used by `.spectrum-Checkbox .spectrum-Checkbox-label`.
Defaults to `var(--spectrum-checkbox-line-height)`, if not set.",
+ "control": "text",
+ "category": "Modifier"
+ },
+ "mod-checkbox-line-height-cjk": {
+ "description": "Used by `--mod-checkbox-line-height`.
Defaults to `var(--spectrum-checkbox-line-height-cjk)`, if not set.",
+ "control": "text",
+ "category": "Modifier"
+ },
+ "mod-checkbox-content-color-default": {
+ "description": "Used by `.spectrum-Checkbox`.
Defaults to `var(--spectrum-checkbox-content-color-default)`, if not set.",
+ "control": "color",
+ "category": "Modifier"
+ },
+ "mod-checkbox-height": {
+ "description": "Used by `.spectrum-Checkbox`.
Defaults to `var(--spectrum-checkbox-height)`, if not set.",
+ "control": "text",
+ "category": "Modifier"
+ },
+ "mod-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": {
+ "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": {
+ "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-animation-duration": {
+ "description": "Used by `.spectrum-Checkbox .spectrum-Checkbox-checkmark, .spectrum-Checkbox .spectrum-Checkbox-partialCheckmark`, `.spectrum-Checkbox .spectrum-Checkbox-label`, `.spectrum-Checkbox .spectrum-Checkbox-box:before`, `.spectrum-Checkbox .spectrum-Checkbox-box:after`.
Defaults to `var(--spectrum-checkbox-animation-duration)`, if not set.",
+ "control": "text",
+ "category": "Modifier"
+ },
+ "mod-checkbox-text-to-control": {
+ "description": "Used by `.spectrum-Checkbox .spectrum-Checkbox-label`.
Defaults to `var(--spectrum-checkbox-text-to-control)`, if not set.",
+ "control": "text",
+ "category": "Modifier"
+ },
+ "mod-checkbox-top-to-text": {
+ "description": "Used by `.spectrum-Checkbox .spectrum-Checkbox-label`.
Defaults to `var(--spectrum-checkbox-top-to-text)`, if not set.",
+ "control": "text",
+ "category": "Modifier"
+ },
+ "mod-checkbox-bottom-to-text": {
+ "description": "Used by `.spectrum-Checkbox .spectrum-Checkbox-label`.
Defaults to `var(--spectrum-checkbox-bottom-to-text)`, if not set.",
+ "control": "text",
+ "category": "Modifier"
+ },
+ "mod-checkbox-font-size": {
+ "description": "Used by `.spectrum-Checkbox .spectrum-Checkbox-label`.
Defaults to `var(--spectrum-checkbox-font-size)`, if not set.",
+ "control": "text",
+ "category": "Modifier"
+ },
+ "mod-checkbox-control-color-default": {
+ "description": "Used by `.spectrum-Checkbox .spectrum-Checkbox-input`, `.spectrum-Checkbox .spectrum-Checkbox-box:before`.
Defaults to `var(--spectrum-checkbox-control-color-default)`, if not set.",
+ "control": "color",
+ "category": "Modifier"
+ },
+ "mod-checkbox-control-selected-color-default": {
+ "description": "Used by `.spectrum-Checkbox .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": {
+ "description": "Used by `.spectrum-Checkbox .spectrum-Checkbox-input:checked + .spectrum-Checkbox-box:before`.
Defaults to `var(--spectrum-checkbox-checkmark-color)`, if not set.",
+ "control": "color",
+ "category": "Modifier"
+ },
+ "mod-checkbox-selected-border-width": {
+ "description": "Used by `.spectrum-Checkbox .spectrum-Checkbox-input:checked + .spectrum-Checkbox-box:before`, `.spectrum-Checkbox.is-indeterminate .spectrum-Checkbox-box:before, .spectrum-Checkbox.is-indeterminate .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-color-focus": {
+ "description": "Defined in `.spectrum-Checkbox--emphasized:not(.is-invalid) .spectrum-Checkbox-input:focus-visible:checked + .spectrum-Checkbox-box:before`.
Used by `.spectrum-Checkbox .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-focus-indicator-thickness": {
+ "description": "Used by `.spectrum-Checkbox .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": {
+ "description": "Used by `.spectrum-Checkbox .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": {
+ "description": "Used by `.spectrum-Checkbox .spectrum-Checkbox-input:focus-visible + .spectrum-Checkbox-box:after`, `.spectrum-Checkbox .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": {
+ "description": "Used by `.spectrum-Checkbox .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-margin-block": {
+ "description": "Used by `.spectrum-Checkbox .spectrum-Checkbox-box`.
Defaults to `var(--spectrum-checkbox-top-to-control)`, if not set.",
+ "control": "text",
+ "category": "Modifier"
+ },
+ "mod-checkbox-control-size": {
+ "description": "Used by `.spectrum-Checkbox .spectrum-Checkbox-box, .spectrum-Checkbox .spectrum-Checkbox-box:before`.
Defaults to `var(--spectrum-checkbox-control-size)`, if not set.",
+ "control": "text",
+ "category": "Modifier"
+ },
+ "mod-checkbox-control-corner-radius": {
+ "description": "Used by `.spectrum-Checkbox .spectrum-Checkbox-box:before`, `.spectrum-Checkbox .spectrum-Checkbox-box:after`.
Defaults to `var(--spectrum-checkbox-control-corner-radius)`, if not set.",
+ "control": "text",
+ "category": "Modifier"
+ },
+ "mod-checkbox-border-width": {
+ "description": "Used by `.spectrum-Checkbox .spectrum-Checkbox-box:before`.
Defaults to `var(--spectrum-checkbox-border-width)`, if not set.",
+ "control": "text",
+ "category": "Modifier"
+ },
+ "mod-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`, `.spectrum-Checkbox .spectrum-Checkbox-input:checked:hover:disabled + .spectrum-Checkbox-box:before, .spectrum-Checkbox .spectrum-Checkbox-input:hover:disabled + .spectrum-Checkbox-box:before`.
Defaults to `var(--spectrum-checkbox-control-color-disabled)`, if not set.",
+ "control": "color",
+ "category": "Modifier"
+ },
+ "mod-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": {
+ "description": "Used by `.spectrum-Checkbox: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": {
+ "description": "Used by `.spectrum-Checkbox:hover .spectrum-Checkbox-label`.
Defaults to `var(--spectrum-checkbox-content-color-hover)`, if not set.",
+ "control": "color",
+ "category": "Modifier"
+ },
+ "mod-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-control-color-disabled)`, if not set.",
+ "control": "color",
+ "category": "Modifier"
+ },
+ "mod-focus-indicator-thickness": {
+ "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-checkmark-color": {
+ "value": "light-dark(rgb(255, 255, 255), rgb(17, 17, 17))",
+ "description": "Defined in `.spectrum-Checkbox`.
Used by `.spectrum-Checkbox .spectrum-Checkbox-checkmark, .spectrum-Checkbox .spectrum-Checkbox-partialCheckmark`, `.spectrum-Checkbox .spectrum-Checkbox-input:checked + .spectrum-Checkbox-box:before`.
Defaults to `var(--spectrum-gray-25)`, if not set.",
+ "control": "color",
+ "category": "Component"
+ },
+ "spectrum-checkbox-background-color": {
+ "value": "light-dark(rgb(255, 255, 255), rgb(17, 17, 17))",
+ "description": "Defined in `.spectrum-Checkbox`.
Used by `.spectrum-Checkbox .spectrum-Checkbox-box:before`, `.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-gray-25)`, if not set.",
+ "control": "color",
+ "category": "Component"
+ },
+ "spectrum-checkbox-content-color-default": {
+ "value": "var(--spectrum-gray-800)",
+ "description": "Defined in `.spectrum-Checkbox`.
Used by `.spectrum-Checkbox`.
Defaults to `var(--spectrum-neutral-content-color-default)`, if not set.",
+ "control": "color",
+ "category": "Component"
+ },
+ "spectrum-checkbox-content-color-hover": {
+ "value": "var(--spectrum-gray-900)",
+ "description": "Defined in `.spectrum-Checkbox`.
Used by `.spectrum-Checkbox:hover .spectrum-Checkbox-label`.
Defaults to `var(--spectrum-neutral-content-color-hover)`, if not set.",
+ "control": "color",
+ "category": "Component"
+ },
+ "spectrum-checkbox-content-color-down": {
+ "value": "var(--spectrum-gray-900)",
+ "description": "Defined in `.spectrum-Checkbox`.
Used by `.spectrum-Checkbox:active .spectrum-Checkbox-label`.
Defaults to `var(--spectrum-neutral-content-color-down)`, if not set.",
+ "control": "color",
+ "category": "Component"
+ },
+ "spectrum-checkbox-content-color-focus": {
+ "value": "var(--spectrum-gray-900)",
+ "description": "Defined in `.spectrum-Checkbox`.
Used by `.spectrum-Checkbox .spectrum-Checkbox-input:focus-visible + .spectrum-Checkbox-label`.
Defaults to `var(--spectrum-neutral-content-color-key-focus)`, if not set.",
+ "control": "color",
+ "category": "Component"
+ },
+ "spectrum-checkbox-control-color-default": {
+ "value": "var(--spectrum-checkbox-invalid-color-default)",
+ "description": "Defined in `.spectrum-Checkbox`, `.spectrum-Checkbox.is-invalid`.
Used by `.spectrum-Checkbox .spectrum-Checkbox-input`, `.spectrum-Checkbox .spectrum-Checkbox-box:before`.
Defaults to `var(--spectrum-checkbox-invalid-color-default)`, if not set.",
+ "control": "color",
+ "category": "Component"
+ },
+ "spectrum-checkbox-control-color-hover": {
+ "value": "var(--spectrum-checkbox-invalid-color-hover)",
+ "description": "Defined in `.spectrum-Checkbox`, `.spectrum-Checkbox.is-invalid`.
Used by `.spectrum-Checkbox:hover .spectrum-Checkbox-box:before`.
Defaults to `var(--spectrum-checkbox-invalid-color-hover)`, if not set.",
+ "control": "color",
+ "category": "Component"
+ },
+ "spectrum-checkbox-control-color-down": {
+ "value": "var(--spectrum-checkbox-invalid-color-down)",
+ "description": "Defined in `.spectrum-Checkbox`, `.spectrum-Checkbox.is-invalid`.
Used by `.spectrum-Checkbox:active .spectrum-Checkbox-box:before`.
Defaults to `var(--spectrum-checkbox-invalid-color-down)`, if not set.",
+ "control": "color",
+ "category": "Component"
+ },
+ "spectrum-checkbox-control-color-focus": {
+ "value": "var(--spectrum-checkbox-invalid-color-focus)",
+ "description": "Defined in `.spectrum-Checkbox`, `.spectrum-Checkbox.is-invalid`.
Used by `.spectrum-Checkbox .spectrum-Checkbox-input:focus-visible + .spectrum-Checkbox-box:before`, `.spectrum-Checkbox.is-invalid.is-indeterminate .spectrum-Checkbox-input:focus-visible + .spectrum-Checkbox-box:before`.
Defaults to `var(--spectrum-checkbox-invalid-color-focus)`, if not set.",
+ "control": "color",
+ "category": "Component"
+ },
+ "spectrum-checkbox-focus-indicator-color": {
+ "value": "var(--spectrum-blue-800)",
+ "description": "Defined in `.spectrum-Checkbox`.
Used by `.spectrum-Checkbox .spectrum-Checkbox-input:focus-visible + .spectrum-Checkbox-box:after`, `.spectrum-Checkbox-input:focus-visible + .spectrum-Checkbox-box`.
Defaults to `var(--spectrum-focus-indicator-color)`, if not set.",
+ "control": "color",
+ "category": "Component"
+ },
+ "spectrum-checkbox-control-color-disabled": {
+ "value": "var(--spectrum-gray-400)",
+ "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:hover:disabled + .spectrum-Checkbox-box:before, .spectrum-Checkbox .spectrum-Checkbox-input:hover: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(--spectrum-disabled-content-color)`, if not set.",
+ "control": "color",
+ "category": "Component"
+ },
+ "spectrum-checkbox-invalid-color-default": {
+ "value": "var(--spectrum-red-900)",
+ "description": "Defined in `.spectrum-Checkbox`.
Used by `--spectrum-checkbox-control-color-default`, `--spectrum-checkbox-control-selected-color-default`.
Defaults to `var(--spectrum-negative-color-900)`, if not set.",
+ "control": "color",
+ "category": "Component"
+ },
+ "spectrum-checkbox-invalid-color-hover": {
+ "value": "var(--spectrum-red-1000)",
+ "description": "Defined in `.spectrum-Checkbox`.
Used by `--spectrum-checkbox-control-color-hover`, `--spectrum-checkbox-control-selected-color-hover`.
Defaults to `var(--spectrum-negative-color-1000)`, if not set.",
+ "control": "color",
+ "category": "Component"
+ },
+ "spectrum-checkbox-invalid-color-down": {
+ "value": "var(--spectrum-red-1000)",
+ "description": "Defined in `.spectrum-Checkbox`.
Used by `--spectrum-checkbox-control-color-down`, `--spectrum-checkbox-control-selected-color-down`.
Defaults to `var(--spectrum-negative-color-1000)`, if not set.",
+ "control": "color",
+ "category": "Component"
+ },
+ "spectrum-checkbox-invalid-color-focus": {
+ "value": "var(--spectrum-red-1000)",
+ "description": "Defined in `.spectrum-Checkbox`.
Used by `--spectrum-checkbox-control-color-focus`.
Defaults to `var(--spectrum-negative-color-1000)`, if not set.",
+ "control": "color",
+ "category": "Component"
+ },
+ "spectrum-checkbox-emphasized-color-default": {
+ "value": "var(--spectrum-accent-color-900)",
+ "description": "Defined in `.spectrum-Checkbox`.
Used by `--spectrum-checkbox-control-selected-color-default`.
Defaults to `var(--spectrum-accent-content-color-default)`, if not set.",
+ "control": "color",
+ "category": "Component"
+ },
+ "spectrum-checkbox-emphasized-color-hover": {
+ "value": "var(--spectrum-accent-color-1000)",
+ "description": "Defined in `.spectrum-Checkbox`.
Used by `--spectrum-checkbox-control-selected-color-hover`.
Defaults to `var(--spectrum-accent-content-color-hover)`, if not set.",
+ "control": "color",
+ "category": "Component"
+ },
+ "spectrum-checkbox-emphasized-color-down": {
+ "value": "var(--spectrum-accent-color-1000)",
+ "description": "Defined in `.spectrum-Checkbox`.
Used by `--spectrum-checkbox-control-selected-color-down`.
Defaults to `var(--spectrum-accent-content-color-down)`, if not set.",
+ "control": "color",
+ "category": "Component"
+ },
+ "spectrum-checkbox-emphasized-color-focus": {
+ "value": "var(--spectrum-accent-color-1000)",
+ "description": "Defined in `.spectrum-Checkbox`.
Used by `.spectrum-Checkbox--emphasized.is-indeterminate:not(.is-invalid) .spectrum-Checkbox-input:focus-visible + .spectrum-Checkbox-box:before`, `--mod-checkbox-control-color-focus`.
Defaults to `var(--spectrum-accent-content-color-key-focus)`, if not set.",
+ "control": "color",
+ "category": "Component"
+ },
+ "spectrum-checkbox-control-selected-color-default": {
+ "value": "var(--spectrum-checkbox-invalid-color-default)",
+ "description": "Defined in `.spectrum-Checkbox`, `.spectrum-Checkbox.spectrum-Checkbox--emphasized`, `.spectrum-Checkbox.is-invalid`.
Used by `.spectrum-Checkbox .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:not(:disabled) + .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-invalid-color-default)`, if not set.",
+ "control": "color",
+ "category": "Component"
+ },
+ "spectrum-checkbox-control-selected-color-hover": {
+ "value": "var(--spectrum-checkbox-invalid-color-hover)",
+ "description": "Defined in `.spectrum-Checkbox`, `.spectrum-Checkbox.spectrum-Checkbox--emphasized`, `.spectrum-Checkbox.is-invalid`.
Used by `.spectrum-Checkbox: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.is-invalid.is-indeterminate:hover .spectrum-Checkbox-box:before, .spectrum-Checkbox.is-invalid.is-indeterminate:hover .spectrum-Checkbox-input:checked:not(:disabled) + .spectrum-Checkbox-box:before`.
Defaults to `var(--spectrum-checkbox-invalid-color-hover)`, if not set.",
+ "control": "color",
+ "category": "Component"
+ },
+ "spectrum-checkbox-control-selected-color-down": {
+ "value": "var(--spectrum-checkbox-invalid-color-down)",
+ "description": "Defined in `.spectrum-Checkbox`, `.spectrum-Checkbox.spectrum-Checkbox--emphasized`, `.spectrum-Checkbox.is-invalid`.
Used by `.spectrum-Checkbox:active .spectrum-Checkbox-input:checked + .spectrum-Checkbox-box:before`.
Defaults to `var(--spectrum-checkbox-invalid-color-down)`, if not set.",
+ "control": "color",
+ "category": "Component"
+ },
+ "spectrum-checkbox-font-size": {
+ "value": "18px",
+ "description": "Defined in `.spectrum-Checkbox`, `.spectrum-Checkbox.spectrum-Checkbox--sizeS`, `.spectrum-Checkbox.spectrum-Checkbox--sizeL`, `.spectrum-Checkbox.spectrum-Checkbox--sizeXL`.
Used by `.spectrum-Checkbox .spectrum-Checkbox-label`.
Defaults to `var(--spectrum-font-size-300)`, if not set.",
+ "control": "text",
+ "category": "Component"
+ },
+ "spectrum-checkbox-line-height": {
+ "value": "1.3",
+ "description": "Defined in `.spectrum-Checkbox`.
Used by `.spectrum-Checkbox .spectrum-Checkbox-label`.
Defaults to `var(--spectrum-line-height-100)`, if not set.",
+ "control": "text",
+ "category": "Component"
+ },
+ "spectrum-checkbox-line-height-cjk": {
+ "value": "1.5",
+ "description": "Defined in `.spectrum-Checkbox`.
Used by `--mod-checkbox-line-height`.
Defaults to `var(--spectrum-cjk-line-height-100)`, if not set.",
+ "control": "text",
+ "category": "Component"
+ },
+ "spectrum-checkbox-text-font-weight": {
+ "value": "400",
+ "description": "Defined in `.spectrum-Checkbox`.
Used by `.spectrum-Checkbox .spectrum-Checkbox-label`.
Defaults to `var(--spectrum-regular-font-weight)`, if not set.",
+ "control": "text",
+ "category": "Component"
+ },
+ "spectrum-checkbox-text-font-style": {
+ "value": "normal",
+ "description": "Defined in `.spectrum-Checkbox`.
Used by `.spectrum-Checkbox .spectrum-Checkbox-label`.
Defaults to `var(--spectrum-default-font-style)`, if not set.",
+ "control": "text",
+ "category": "Component"
+ },
+ "spectrum-checkbox-height": {
+ "value": "48px",
+ "description": "Defined in `.spectrum-Checkbox`, `.spectrum-Checkbox.spectrum-Checkbox--sizeS`, `.spectrum-Checkbox.spectrum-Checkbox--sizeL`, `.spectrum-Checkbox.spectrum-Checkbox--sizeXL`.
Used by `.spectrum-Checkbox`.
Defaults to `var(--spectrum-component-height-300)`, if not set.",
+ "control": "text",
+ "category": "Component"
+ },
+ "spectrum-checkbox-control-size": {
+ "value": "20px",
+ "description": "Defined in `.spectrum-Checkbox`, `.spectrum-Checkbox.spectrum-Checkbox--sizeS`, `.spectrum-Checkbox.spectrum-Checkbox--sizeL`, `.spectrum-Checkbox.spectrum-Checkbox--sizeXL`.
Used by `--spectrum-checkbox-selected-border-width`, `.spectrum-Checkbox .spectrum-Checkbox-box, .spectrum-Checkbox .spectrum-Checkbox-box:before`.
Defaults to `var(--spectrum-checkbox-control-size-extra-large)`, if not set.",
+ "control": "text",
+ "category": "Component"
+ },
+ "spectrum-checkbox-control-size-medium": {
+ "value": "16px",
+ "description": "Used by `--spectrum-checkbox-control-size`.",
+ "control": "text",
+ "category": "Component"
+ },
+ "spectrum-checkbox-control-corner-radius": {
+ "value": "6px",
+ "description": "Defined in `.spectrum-Checkbox`, `.spectrum-Checkbox.spectrum-Checkbox--sizeS`, `.spectrum-Checkbox.spectrum-Checkbox--sizeL`, `.spectrum-Checkbox.spectrum-Checkbox--sizeXL`.
Used by `.spectrum-Checkbox .spectrum-Checkbox-box:before`, `.spectrum-Checkbox .spectrum-Checkbox-box:after`.
Defaults to `var(--spectrum-corner-radius-small-size-extra-large)`, if not set.",
+ "control": "text",
+ "category": "Component"
+ },
+ "spectrum-checkbox-focus-indicator-gap": {
+ "value": "2px",
+ "description": "Defined in `.spectrum-Checkbox`.
Used by `.spectrum-Checkbox .spectrum-Checkbox-input:focus-visible + .spectrum-Checkbox-box:after`, `.spectrum-Checkbox .spectrum-Checkbox-box:after`, `.spectrum-Checkbox-input:focus-visible + .spectrum-Checkbox-box`.
Defaults to `var(--spectrum-focus-indicator-gap)`, if not set.",
+ "control": "text",
+ "category": "Component"
+ },
+ "spectrum-checkbox-focus-indicator-thickness": {
+ "value": "2px",
+ "description": "Defined in `.spectrum-Checkbox`.
Used by `.spectrum-Checkbox .spectrum-Checkbox-input:focus-visible + .spectrum-Checkbox-box:after`.
Defaults to `var(--spectrum-focus-indicator-thickness)`, if not set.",
+ "control": "text",
+ "category": "Component"
+ },
+ "spectrum-checkbox-border-width": {
+ "value": "2px",
+ "description": "Defined in `.spectrum-Checkbox`.
Used by `.spectrum-Checkbox .spectrum-Checkbox-box:before`.
Defaults to `var(--spectrum-border-width-200)`, if not set.",
+ "control": "text",
+ "category": "Component"
+ },
+ "spectrum-checkbox-animation-duration": {
+ "value": "var(--spectrum-animation-duration-100)",
+ "description": "Defined in `.spectrum-Checkbox`.
Used by `.spectrum-Checkbox .spectrum-Checkbox-checkmark, .spectrum-Checkbox .spectrum-Checkbox-partialCheckmark`, `.spectrum-Checkbox .spectrum-Checkbox-label`, `.spectrum-Checkbox .spectrum-Checkbox-box:before`, `.spectrum-Checkbox .spectrum-Checkbox-box:after`.
Defaults to `var(--spectrum-animation-duration-100)`, if not set.",
+ "control": "text",
+ "category": "Component"
+ },
+ "spectrum-checkbox-top-to-text": {
+ "value": "12px",
+ "description": "Defined in `.spectrum-Checkbox`, `.spectrum-Checkbox.spectrum-Checkbox--sizeS`, `.spectrum-Checkbox.spectrum-Checkbox--sizeL`, `.spectrum-Checkbox.spectrum-Checkbox--sizeXL`.
Used by `.spectrum-Checkbox .spectrum-Checkbox-label`.
Defaults to `var(--spectrum-component-top-to-text-300)`, if not set.",
+ "control": "text",
+ "category": "Component"
+ },
+ "spectrum-checkbox-bottom-to-text": {
+ "value": "14px",
+ "description": "Defined in `.spectrum-Checkbox`, `.spectrum-Checkbox.spectrum-Checkbox--sizeS`, `.spectrum-Checkbox.spectrum-Checkbox--sizeL`, `.spectrum-Checkbox.spectrum-Checkbox--sizeXL`.
Used by `.spectrum-Checkbox .spectrum-Checkbox-label`.
Defaults to `var(--spectrum-component-bottom-to-text-300)`, if not set.",
+ "control": "text",
+ "category": "Component"
+ },
+ "spectrum-checkbox-text-to-control": {
+ "value": "13px",
+ "description": "Defined in `.spectrum-Checkbox`, `.spectrum-Checkbox.spectrum-Checkbox--sizeS`, `.spectrum-Checkbox.spectrum-Checkbox--sizeL`, `.spectrum-Checkbox.spectrum-Checkbox--sizeXL`.
Used by `.spectrum-Checkbox .spectrum-Checkbox-label`.
Defaults to `var(--spectrum-text-to-control-300)`, if not set.",
+ "control": "text",
+ "category": "Component"
+ },
+ "spectrum-checkbox-top-to-control": {
+ "value": "14px",
+ "description": "Defined in `.spectrum-Checkbox`, `.spectrum-Checkbox.spectrum-Checkbox--sizeS`, `.spectrum-Checkbox.spectrum-Checkbox--sizeL`, `.spectrum-Checkbox.spectrum-Checkbox--sizeXL`.
Used by `.spectrum-Checkbox .spectrum-Checkbox-box`.
Defaults to `var(--spectrum-checkbox-top-to-control-extra-large)`, if not set.",
+ "control": "text",
+ "category": "Component"
+ },
+ "spectrum-checkbox-top-to-control-medium": {
+ "value": "8px",
+ "description": "Used by `--spectrum-checkbox-top-to-control`.",
+ "control": "text",
+ "category": "Component"
+ },
+ "spectrum-checkbox-selected-border-width": {
+ "value": "calc(var(--spectrum-checkbox-control-size) / 2)",
+ "description": "Defined in `.spectrum-Checkbox`.
Used by `.spectrum-Checkbox .spectrum-Checkbox-input:checked + .spectrum-Checkbox-box:before`, `.spectrum-Checkbox.is-indeterminate .spectrum-Checkbox-box:before, .spectrum-Checkbox.is-indeterminate .spectrum-Checkbox-input:checked + .spectrum-Checkbox-box:before`.
Defaults to `calc(var(--spectrum-checkbox-control-size) / 2)`, if not set.",
+ "control": "text",
+ "category": "Component"
+ },
+ "spectrum-checkbox-control-size-small": {
+ "value": "14px",
+ "description": "Used by `--spectrum-checkbox-control-size`.",
+ "control": "text",
+ "category": "Component"
+ },
+ "spectrum-checkbox-top-to-control-small": {
+ "value": "5px",
+ "description": "Used by `--spectrum-checkbox-top-to-control`.",
+ "control": "text",
+ "category": "Component"
+ },
+ "spectrum-checkbox-control-size-large": {
+ "value": "18px",
+ "description": "Used by `--spectrum-checkbox-control-size`.",
+ "control": "text",
+ "category": "Component"
+ },
+ "spectrum-checkbox-top-to-control-large": {
+ "value": "11px",
+ "description": "Used by `--spectrum-checkbox-top-to-control`.",
+ "control": "text",
+ "category": "Component"
+ },
+ "spectrum-checkbox-control-size-extra-large": {
+ "value": "20px",
+ "description": "Used by `--spectrum-checkbox-control-size`.",
+ "control": "text",
+ "category": "Component"
+ },
+ "spectrum-checkbox-top-to-control-extra-large": {
+ "value": "14px",
+ "description": "Used by `--spectrum-checkbox-top-to-control`.",
+ "control": "text",
+ "category": "Component"
+ }
+ },
+ "global": {
+ "spectrum-gray-25": {
+ "value": "light-dark(rgb(255, 255, 255), rgb(17, 17, 17))",
+ "description": "Used by `--spectrum-checkbox-checkmark-color`, `--spectrum-checkbox-background-color`.",
+ "control": "text",
+ "category": "Global"
+ },
+ "spectrum-neutral-content-color-default": {
+ "value": "var(--spectrum-gray-800)",
+ "description": "Used by `--spectrum-checkbox-content-color-default`, `--spectrum-checkbox-control-color-default`, `--spectrum-checkbox-control-selected-color-default`.",
+ "control": "color",
+ "category": "Global"
+ },
+ "spectrum-neutral-content-color-hover": {
+ "value": "var(--spectrum-gray-900)",
+ "description": "Used by `--spectrum-checkbox-content-color-hover`, `--spectrum-checkbox-control-color-hover`, `--spectrum-checkbox-control-selected-color-hover`.",
+ "control": "color",
+ "category": "Global"
+ },
+ "spectrum-neutral-content-color-down": {
+ "value": "var(--spectrum-gray-900)",
+ "description": "Used by `--spectrum-checkbox-content-color-down`, `--spectrum-checkbox-control-color-down`, `--spectrum-checkbox-control-selected-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`, `--spectrum-checkbox-control-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-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-down`, `--spectrum-checkbox-invalid-color-focus`.",
+ "control": "color",
+ "category": "Global"
+ },
+ "spectrum-accent-content-color-default": {
+ "value": "var(--spectrum-accent-color-900)",
+ "description": "Used by `--spectrum-checkbox-emphasized-color-default`.",
+ "control": "color",
+ "category": "Global"
+ },
+ "spectrum-accent-content-color-hover": {
+ "value": "var(--spectrum-accent-color-1000)",
+ "description": "Used by `--spectrum-checkbox-emphasized-color-hover`.",
+ "control": "color",
+ "category": "Global"
+ },
+ "spectrum-accent-content-color-down": {
+ "value": "var(--spectrum-accent-color-1000)",
+ "description": "Used by `--spectrum-checkbox-emphasized-color-down`.",
+ "control": "color",
+ "category": "Global"
+ },
+ "spectrum-accent-content-color-key-focus": {
+ "value": "var(--spectrum-accent-color-1000)",
+ "description": "Used by `--spectrum-checkbox-emphasized-color-focus`.",
+ "control": "color",
+ "category": "Global"
+ },
+ "spectrum-font-size-100": {
+ "value": "14px",
+ "description": "Used by `--spectrum-checkbox-font-size`.",
+ "control": "text",
+ "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-regular-font-weight": {
+ "value": "400",
+ "description": "Used by `--spectrum-checkbox-text-font-weight`.",
+ "control": "text",
+ "category": "Global"
+ },
+ "spectrum-default-font-style": {
+ "value": "normal",
+ "description": "Used by `--spectrum-checkbox-text-font-style`.",
+ "control": "text",
+ "category": "Global"
+ },
+ "spectrum-component-height-100": {
+ "value": "32px",
+ "description": "Used by `--spectrum-checkbox-height`.",
+ "control": "text",
+ "category": "Global"
+ },
+ "spectrum-corner-radius-small-size-medium": {
+ "value": "4px",
+ "description": "Used by `--spectrum-checkbox-control-corner-radius`.",
+ "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-component-top-to-text-100": {
+ "value": "6px",
+ "description": "Used by `--spectrum-checkbox-top-to-text`.",
+ "control": "text",
+ "category": "Global"
+ },
+ "spectrum-component-bottom-to-text-100": {
+ "value": "9px",
+ "description": "Used by `--spectrum-checkbox-bottom-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-corner-radius-small-size-small": {
+ "value": "3px",
+ "description": "Used by `--spectrum-checkbox-control-corner-radius`.",
+ "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-component-bottom-to-text-75": {
+ "value": "5px",
+ "description": "Used by `--spectrum-checkbox-bottom-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-corner-radius-small-size-large": {
+ "value": "5px",
+ "description": "Used by `--spectrum-checkbox-control-corner-radius`.",
+ "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-component-bottom-to-text-200": {
+ "value": "11px",
+ "description": "Used by `--spectrum-checkbox-bottom-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-corner-radius-small-size-extra-large": {
+ "value": "6px",
+ "description": "Used by `--spectrum-checkbox-control-corner-radius`.",
+ "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-component-bottom-to-text-300": {
+ "value": "14px",
+ "description": "Used by `--spectrum-checkbox-bottom-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"
+ },
+ "spectrum-component-size-minimum-perspective-down": {
+ "value": "24px",
+ "description": "Used by `.spectrum-Checkbox:not(.is-readOnly) .spectrum-Checkbox-input:active:not(:disabled) + .spectrum-Checkbox-box, .spectrum-Checkbox:not(.is-readOnly):active .spectrum-Checkbox-input:not(:disabled) + .spectrum-Checkbox-box`.",
+ "control": "text",
+ "category": "Global"
+ },
+ "spectrum-component-size-difference-down": {
+ "value": "-2px",
+ "description": "Used by `.spectrum-Checkbox:not(.is-readOnly) .spectrum-Checkbox-input:active:not(:disabled) + .spectrum-Checkbox-box, .spectrum-Checkbox:not(.is-readOnly):active .spectrum-Checkbox-input:not(:disabled) + .spectrum-Checkbox-box`.",
+ "control": "text",
+ "category": "Global"
+ }
+ },
+ "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-background-color-default": {
+ "value": "var(--spectrum-checkbox-background-color)",
+ "description": "Defined in `.spectrum-Checkbox`.
Used by `.spectrum-Checkbox .spectrum-Checkbox-checkmark, .spectrum-Checkbox .spectrum-Checkbox-partialCheckmark`, `.spectrum-Checkbox .spectrum-Checkbox-input:checked + .spectrum-Checkbox-box:before`, `.spectrum-Checkbox .spectrum-Checkbox-box:before`, `.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-background-color)`, if not set.",
+ "control": "color"
+ },
+ "highcontrast-checkbox-highlight-color-default": {
+ "value": "var(--spectrum-checkbox-control-selected-color-default)",
+ "description": "Defined in `.spectrum-Checkbox`.
Used by `.spectrum-Checkbox .spectrum-Checkbox-input:checked + .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.is-invalid.is-indeterminate .spectrum-Checkbox-box:before, .spectrum-Checkbox.is-invalid.is-indeterminate .spectrum-Checkbox-input:checked:not(:disabled) + .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-control-selected-color-default)`, if not set.",
+ "control": "color"
+ },
+ "highcontrast-checkbox-color-focus": {
+ "value": "var(--spectrum-checkbox-emphasized-color-focus)",
+ "description": "Defined in `.spectrum-Checkbox`.
Used by `.spectrum-Checkbox .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--emphasized.is-indeterminate:not(.is-invalid) .spectrum-Checkbox-input:focus-visible + .spectrum-Checkbox-box:before`, `--mod-checkbox-control-color-focus`.
Defaults to `var(--spectrum-checkbox-emphasized-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 .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 .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-color-default": {
+ "value": "var(--mod-checkbox-control-color-default, var(--spectrum-checkbox-control-color-default))",
+ "description": "Defined in `.spectrum-Checkbox`.
Used by `.spectrum-Checkbox .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-disabled-color-default": {
+ "value": "var(--mod-checkbox-content-color-disabled, var(--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`, `.spectrum-Checkbox .spectrum-Checkbox-input:checked:hover:disabled + .spectrum-Checkbox-box:before, .spectrum-Checkbox .spectrum-Checkbox-input:hover: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-control-color-disabled))`, if not set.",
+ "control": "color"
+ },
+ "highcontrast-checkbox-highlight-color-hover": {
+ "value": "var(--spectrum-checkbox-control-selected-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--emphasized.is-indeterminate:hover .spectrum-Checkbox-box:before, .spectrum-Checkbox--emphasized.is-indeterminate: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:not(:disabled) + .spectrum-Checkbox-box:before`.
Defaults to `var(--spectrum-checkbox-control-selected-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`.
Defaults to `var(--mod-checkbox-content-color-hover, var(--spectrum-checkbox-content-color-hover))`, if not set.",
+ "control": "color"
+ }
+ }
}
diff --git a/components/checkbox/stories/checkbox.stories.js b/components/checkbox/stories/checkbox.stories.js
index 1941061d619..d788e820cc9 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 { isActive, 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.
*
@@ -64,6 +66,10 @@ export default {
status: {
type: "migrated",
},
+ cssprops: {
+ ...metadata.modifiers,
+ ...metadata.component,
+ },
},
tags: ["migrated"],
};
diff --git a/components/clearbutton/dist/metadata.json b/components/clearbutton/dist/metadata.json
index dd50b142662..ab1b6510664 100644
--- a/components/clearbutton/dist/metadata.json
+++ b/components/clearbutton/dist/metadata.json
@@ -5,10 +5,6 @@
".spectrum-ClearButton > .spectrum-Icon",
".spectrum-ClearButton-fill",
".spectrum-ClearButton-icon",
- ".spectrum-ClearButton.is-disabled",
- ".spectrum-ClearButton.spectrum-ClearButton--sizeL",
- ".spectrum-ClearButton.spectrum-ClearButton--sizeS",
- ".spectrum-ClearButton.spectrum-ClearButton--sizeXL",
".spectrum-ClearButton:disabled",
".spectrum-ClearButton:focus-visible",
".spectrum-ClearButton:not(:disabled)",
@@ -19,53 +15,245 @@
".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-component-size-difference-down",
- "--spectrum-component-size-minimum-perspective-down",
- "--spectrum-disabled-content-color",
- "--spectrum-in-field-button-edge-to-fill-extra-large",
- "--spectrum-in-field-button-edge-to-fill-large",
- "--spectrum-in-field-button-edge-to-fill-medium",
- "--spectrum-in-field-button-edge-to-fill-small",
- "--spectrum-neutral-content-color-default",
- "--spectrum-neutral-content-color-down",
- "--spectrum-neutral-content-color-hover",
- "--spectrum-neutral-content-color-key-focus"
+ ".spectrum-ClearButton:not(:disabled):hover .spectrum-ClearButton-fill",
+ ".spectrum-ClearButton.is-disabled",
+ ".spectrum-ClearButton.spectrum-ClearButton--sizeL",
+ ".spectrum-ClearButton.spectrum-ClearButton--sizeS",
+ ".spectrum-ClearButton.spectrum-ClearButton--sizeXL"
],
- "passthroughs": [],
- "high-contrast": ["--highcontrast-clear-button-icon-color-hover"]
+ "modifiers": {
+ "mod-clear-button-icon-color": {
+ "description": "Defined in `.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-icon-color-disabled": {
+ "description": "Used by `--mod-clear-button-icon-color`.
Defaults to `var(--spectrum-disabled-content-color)`, if not set.",
+ "control": "color",
+ "category": "Modifier"
+ },
+ "mod-clear-button-icon-color-hover": {
+ "description": "Defined in `.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": {
+ "description": "Defined in `.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-background-color": {
+ "description": "Defined in `.spectrum-ClearButton.is-disabled, .spectrum-ClearButton:disabled`.
Used by `.spectrum-ClearButton-fill`.
Defaults to `var(--spectrum-clear-button-background-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"
+ },
+ "mod-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": {
+ "description": "Used by `.spectrum-ClearButton`.
Defaults to `var(--spectrum-clear-button-width)`, if not set.",
+ "control": "text",
+ "category": "Modifier"
+ },
+ "mod-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-background-color-hover": {
+ "description": "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": {
+ "description": "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-icon-color-key-focus": {
+ "description": "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-background-color-key-focus": {
+ "description": "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"
+ }
+ },
+ "component": {
+ "spectrum-clear-button-height": {
+ "value": "48px",
+ "description": "Defined in `.spectrum-ClearButton`, `.spectrum-ClearButton.spectrum-ClearButton--sizeS`, `.spectrum-ClearButton.spectrum-ClearButton--sizeL`, `.spectrum-ClearButton.spectrum-ClearButton--sizeXL`.
Used by `.spectrum-ClearButton`.
Defaults to `var(--spectrum-component-height-300)`, if not set.",
+ "control": "text",
+ "category": "Component"
+ },
+ "spectrum-clear-button-width": {
+ "value": "48px",
+ "description": "Defined in `.spectrum-ClearButton`, `.spectrum-ClearButton.spectrum-ClearButton--sizeS`, `.spectrum-ClearButton.spectrum-ClearButton--sizeL`, `.spectrum-ClearButton.spectrum-ClearButton--sizeXL`.
Used by `.spectrum-ClearButton`.
Defaults to `var(--spectrum-component-height-300)`, if not set.",
+ "control": "text",
+ "category": "Component"
+ },
+ "spectrum-clear-button-padding": {
+ "value": "8px",
+ "description": "Defined in `.spectrum-ClearButton`, `.spectrum-ClearButton.spectrum-ClearButton--sizeS`, `.spectrum-ClearButton.spectrum-ClearButton--sizeL`, `.spectrum-ClearButton.spectrum-ClearButton--sizeXL`.
Used by `.spectrum-ClearButton`.
Defaults to `var(--spectrum-in-field-button-edge-to-fill-extra-large)`, if not set.",
+ "control": "text",
+ "category": "Component"
+ },
+ "spectrum-clear-button-icon-color": {
+ "value": "var(--spectrum-gray-800)",
+ "description": "Defined in `.spectrum-ClearButton`.
Used by `.spectrum-ClearButton`.
Defaults to `var(--spectrum-neutral-content-color-default)`, if not set.",
+ "control": "color",
+ "category": "Component"
+ },
+ "spectrum-clear-button-icon-color-hover": {
+ "value": "var(--spectrum-gray-900)",
+ "description": "Defined in `.spectrum-ClearButton`.
Used by `.spectrum-ClearButton:not(:disabled):hover`.
Defaults to `var(--spectrum-neutral-content-color-hover)`, if not set.",
+ "control": "color",
+ "category": "Component"
+ },
+ "spectrum-clear-button-icon-color-down": {
+ "value": "var(--spectrum-gray-900)",
+ "description": "Defined in `.spectrum-ClearButton`.
Used by `.spectrum-ClearButton:not(:disabled):active`.
Defaults to `var(--spectrum-neutral-content-color-down)`, if not set.",
+ "control": "color",
+ "category": "Component"
+ },
+ "spectrum-clear-button-icon-color-key-focus": {
+ "value": "var(--spectrum-gray-900)",
+ "description": "Defined in `.spectrum-ClearButton`.
Used by `.spectrum-ClearButton:not(:disabled):focus-visible, .spectrum-ClearButton:not(:disabled):focus-within`.
Defaults to `var(--spectrum-neutral-content-color-key-focus)`, if not set.",
+ "control": "color",
+ "category": "Component"
+ },
+ "spectrum-clear-button-background-color": {
+ "value": "transparent",
+ "description": "Defined in `.spectrum-ClearButton`.
Used by `.spectrum-ClearButton-fill`.
Defaults to `transparent`, if not set.",
+ "control": "color",
+ "category": "Component"
+ },
+ "spectrum-clear-button-background-color-hover": {
+ "value": "transparent",
+ "description": "Defined in `.spectrum-ClearButton`.
Used by `.spectrum-ClearButton:not(:disabled):hover .spectrum-ClearButton-fill`.
Defaults to `transparent`, if not set.",
+ "control": "color",
+ "category": "Component"
+ },
+ "spectrum-clear-button-background-color-down": {
+ "value": "transparent",
+ "description": "Defined in `.spectrum-ClearButton`.
Used by `.spectrum-ClearButton:not(:disabled):active .spectrum-ClearButton-fill`.
Defaults to `transparent`, if not set.",
+ "control": "color",
+ "category": "Component"
+ },
+ "spectrum-clear-button-background-color-key-focus": {
+ "value": "transparent",
+ "description": "Defined in `.spectrum-ClearButton`.
Used by `.spectrum-ClearButton:not(:disabled):focus-visible .spectrum-ClearButton-fill, .spectrum-ClearButton:not(:disabled):focus-within .spectrum-ClearButton-fill`.
Defaults to `transparent`, if not set.",
+ "control": "color",
+ "category": "Component"
+ }
+ },
+ "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-medium": {
+ "value": "6px",
+ "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-in-field-button-edge-to-fill-small": {
+ "value": "4px",
+ "description": "Used by `--spectrum-clear-button-padding`.",
+ "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-in-field-button-edge-to-fill-large": {
+ "value": "8px",
+ "description": "Used by `--spectrum-clear-button-padding`.",
+ "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-in-field-button-edge-to-fill-extra-large": {
+ "value": "8px",
+ "description": "Used by `--spectrum-clear-button-padding`.",
+ "control": "text",
+ "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"
+ },
+ "spectrum-component-size-minimum-perspective-down": {
+ "value": "24px",
+ "description": "Used by `.spectrum-ClearButton:not(:disabled):active`.",
+ "control": "text",
+ "category": "Global"
+ },
+ "spectrum-component-size-difference-down": {
+ "value": "-2px",
+ "description": "Used by `.spectrum-ClearButton:not(:disabled):active`.",
+ "control": "text",
+ "category": "Global"
+ }
+ },
+ "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 8b91f40d16b..4692edec7a7 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 { isActive, isDisabled, isHovered, size } 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](/docs/components-search-field--docs) and [tags](/docs/components-tag--docs).
*/
@@ -35,8 +37,12 @@ export default {
status: {
type: "migrated",
},
- tags: ["migrated"],
+ cssprops: {
+ ...metadata.modifiers,
+ ...metadata.component,
+ },
},
+ tags: ["migrated"],
};
export const Default = ClearButtonGroup.bind({});
diff --git a/components/closebutton/dist/metadata.json b/components/closebutton/dist/metadata.json
index 6c74f8bf61f..21254180377 100644
--- a/components/closebutton/dist/metadata.json
+++ b/components/closebutton/dist/metadata.json
@@ -8,10 +8,6 @@
".spectrum-CloseButton--staticBlack",
".spectrum-CloseButton--staticWhite",
".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::-moz-focus-inner",
".spectrum-CloseButton:after",
".spectrum-CloseButton:disabled",
@@ -28,86 +24,404 @@
".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",
"a.spectrum-CloseButton"
],
- "modifiers": [
- "--mod-closebutton-align-self",
- "--mod-closebutton-animation-duraction",
- "--mod-closebutton-animation-duration",
- "--mod-closebutton-background-color-default",
- "--mod-closebutton-background-color-down",
- "--mod-closebutton-background-color-focus",
- "--mod-closebutton-background-color-hover",
- "--mod-closebutton-border-radius",
- "--mod-closebutton-focus-indicator-color",
- "--mod-closebutton-focus-indicator-gap",
- "--mod-closebutton-focus-indicator-thickness",
- "--mod-closebutton-icon-color-default",
- "--mod-closebutton-icon-color-disabled",
- "--mod-closebutton-icon-color-down",
- "--mod-closebutton-icon-color-focus",
- "--mod-closebutton-icon-color-hover",
- "--mod-closebutton-margin-inline",
- "--mod-closebutton-margin-top",
- "--mod-closebutton-size"
- ],
- "component": [
- "--spectrum-closebutton-animation-duration",
- "--spectrum-closebutton-background-color-default",
- "--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"
- ],
- "global": [
- "--spectrum-animation-duration-100",
- "--spectrum-component-height-100",
- "--spectrum-component-height-200",
- "--spectrum-component-height-300",
- "--spectrum-component-height-75",
- "--spectrum-corner-radius-full",
- "--spectrum-disabled-content-color",
- "--spectrum-disabled-static-black-background-color",
- "--spectrum-disabled-static-white-background-color",
- "--spectrum-focus-indicator-color",
- "--spectrum-focus-indicator-gap",
- "--spectrum-focus-indicator-thickness",
- "--spectrum-gray-100",
- "--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-100",
- "--spectrum-transparent-black-800",
- "--spectrum-transparent-black-900",
- "--spectrum-transparent-white-100",
- "--spectrum-transparent-white-800",
- "--spectrum-transparent-white-900"
- ],
- "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-disabled",
- "--highcontrast-closebutton-icon-color-down",
- "--highcontrast-closebutton-icon-color-focus",
- "--highcontrast-closebutton-icon-color-hover"
- ]
+ "modifiers": {
+ "mod-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": {
+ "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": {
+ "description": "Used by `.spectrum-CloseButton:focus-visible:after`.
Defaults to `var(--spectrum-closebutton-animation-duration)`, if not set.",
+ "control": "text",
+ "category": "Modifier"
+ },
+ "mod-closebutton-size": {
+ "description": "Used by `.spectrum-CloseButton`.
Defaults to `var(--spectrum-closebutton-size)`, if not set.",
+ "control": "text",
+ "category": "Modifier"
+ },
+ "mod-closebutton-border-radius": {
+ "description": "Used by `.spectrum-CloseButton`, `.spectrum-CloseButton:after`.
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-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": {
+ "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": {
+ "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-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": {
+ "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-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": {
+ "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": {
+ "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": {
+ "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": {
+ "description": "Used by `.spectrum-CloseButton: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": {
+ "description": "Used by `.spectrum-CloseButton:disabled .spectrum-CloseButton-UIIcon`.
Defaults to `var(--spectrum-closebutton-icon-color-disabled)`, if not set.",
+ "control": "color",
+ "category": "Modifier"
+ }
+ },
+ "component": {
+ "spectrum-closebutton-border-radius": {
+ "value": "9999px",
+ "description": "Defined in `.spectrum-CloseButton`.
Used by `.spectrum-CloseButton`, `.spectrum-CloseButton:after`.
Defaults to `var(--spectrum-corner-radius-full)`, if not set.",
+ "control": "text",
+ "category": "Component"
+ },
+ "spectrum-closebutton-icon-color-default": {
+ "value": "rgba(0, 0, 0, 0.84)",
+ "description": "Defined in `.spectrum-CloseButton`, `.spectrum-CloseButton--staticWhite`, `.spectrum-CloseButton--staticBlack`.
Used by `.spectrum-CloseButton:not(:disabled) .spectrum-CloseButton-UIIcon`.
Defaults to `var(--spectrum-transparent-black-800)`, if not set.",
+ "control": "color",
+ "category": "Component"
+ },
+ "spectrum-closebutton-icon-color-hover": {
+ "value": "rgba(0, 0, 0, 0.93)",
+ "description": "Defined in `.spectrum-CloseButton`, `.spectrum-CloseButton--staticWhite`, `.spectrum-CloseButton--staticBlack`.
Used by `.spectrum-CloseButton:not(:disabled):hover .spectrum-CloseButton-UIIcon`.
Defaults to `var(--spectrum-transparent-black-900)`, if not set.",
+ "control": "color",
+ "category": "Component"
+ },
+ "spectrum-closebutton-icon-color-down": {
+ "value": "rgba(0, 0, 0, 0.93)",
+ "description": "Defined in `.spectrum-CloseButton`, `.spectrum-CloseButton--staticWhite`, `.spectrum-CloseButton--staticBlack`.
Used by `.spectrum-CloseButton:not(:disabled):active .spectrum-CloseButton-UIIcon`.
Defaults to `var(--spectrum-transparent-black-900)`, if not set.",
+ "control": "color",
+ "category": "Component"
+ },
+ "spectrum-closebutton-icon-color-focus": {
+ "value": "rgba(0, 0, 0, 0.93)",
+ "description": "Defined in `.spectrum-CloseButton`, `.spectrum-CloseButton--staticWhite`, `.spectrum-CloseButton--staticBlack`.
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-transparent-black-900)`, if not set.",
+ "control": "color",
+ "category": "Component"
+ },
+ "spectrum-closebutton-icon-color-disabled": {
+ "value": "rgba(0, 0, 0, 0.09)",
+ "description": "Defined in `.spectrum-CloseButton`, `.spectrum-CloseButton--staticWhite`, `.spectrum-CloseButton--staticBlack`.
Used by `.spectrum-CloseButton:disabled .spectrum-CloseButton-UIIcon`.
Defaults to `var(--spectrum-disabled-static-black-background-color)`, if not set.",
+ "control": "color",
+ "category": "Component"
+ },
+ "spectrum-closebutton-focus-indicator-thickness": {
+ "value": "2px",
+ "description": "Defined in `.spectrum-CloseButton`.
Used by `.spectrum-CloseButton:focus-visible:after`.
Defaults to `var(--spectrum-focus-indicator-thickness)`, if not set.",
+ "control": "text",
+ "category": "Component"
+ },
+ "spectrum-closebutton-focus-indicator-gap": {
+ "value": "2px",
+ "description": "Defined in `.spectrum-CloseButton`.
Used by `.spectrum-CloseButton:focus-visible:after`, `.spectrum-CloseButton:after`.
Defaults to `var(--spectrum-focus-indicator-gap)`, if not set.",
+ "control": "text",
+ "category": "Component"
+ },
+ "spectrum-closebutton-focus-indicator-color": {
+ "value": "rgb(0, 0, 0)",
+ "description": "Defined in `.spectrum-CloseButton`, `.spectrum-CloseButton--staticWhite`, `.spectrum-CloseButton--staticBlack`.
Used by `.spectrum-CloseButton:focus-visible:after`.
Defaults to `var(--spectrum-static-black-focus-indicator-color)`, if not set.",
+ "control": "color",
+ "category": "Component"
+ },
+ "spectrum-closebutton-size": {
+ "value": "48px",
+ "description": "Defined in `.spectrum-CloseButton`, `.spectrum-CloseButton--sizeS`, `.spectrum-CloseButton--sizeL`, `.spectrum-CloseButton--sizeXL`.
Used by `.spectrum-CloseButton`.
Defaults to `var(--spectrum-component-height-300)`, if not set.",
+ "control": "text",
+ "category": "Component"
+ },
+ "spectrum-closebutton-animation-duration": {
+ "value": "var(--spectrum-animation-duration-100)",
+ "description": "Defined in `.spectrum-CloseButton`.
Used by `.spectrum-CloseButton:focus-visible:after`, `.spectrum-CloseButton`, `.spectrum-CloseButton:after`.
Defaults to `var(--spectrum-animation-duration-100)`, if not set.",
+ "control": "text",
+ "category": "Component"
+ },
+ "spectrum-closebutton-background-color-default": {
+ "value": "transparent",
+ "description": "Defined in `.spectrum-CloseButton`, `.spectrum-CloseButton--staticWhite`, `.spectrum-CloseButton--staticBlack`.
Used by `.spectrum-CloseButton:not(:disabled)`, `.spectrum-CloseButton:disabled`.
Defaults to `transparent`, if not set.",
+ "control": "color",
+ "category": "Component"
+ },
+ "spectrum-closebutton-background-color-hover": {
+ "value": "rgba(0, 0, 0, 0.09)",
+ "description": "Defined in `.spectrum-CloseButton`, `.spectrum-CloseButton--staticWhite`, `.spectrum-CloseButton--staticBlack`.
Used by `.spectrum-CloseButton:not(:disabled):hover`.
Defaults to `var(--spectrum-transparent-black-100)`, if not set.",
+ "control": "color",
+ "category": "Component"
+ },
+ "spectrum-closebutton-background-color-down": {
+ "value": "rgba(0, 0, 0, 0.09)",
+ "description": "Defined in `.spectrum-CloseButton`, `.spectrum-CloseButton--staticWhite`, `.spectrum-CloseButton--staticBlack`.
Used by `.spectrum-CloseButton:not(:disabled):active`.
Defaults to `var(--spectrum-transparent-black-100)`, if not set.",
+ "control": "color",
+ "category": "Component"
+ },
+ "spectrum-closebutton-background-color-focus": {
+ "value": "rgba(0, 0, 0, 0.09)",
+ "description": "Defined in `.spectrum-CloseButton`, `.spectrum-CloseButton--staticWhite`, `.spectrum-CloseButton--staticBlack`.
Used by `.spectrum-CloseButton.is-keyboardFocused:not(:disabled), .spectrum-CloseButton:not(:disabled):focus-visible`.
Defaults to `var(--spectrum-transparent-black-100)`, if not set.",
+ "control": "color",
+ "category": "Component"
+ }
+ },
+ "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-corner-radius-full": {
+ "value": "9999px",
+ "description": "Used by `--spectrum-closebutton-border-radius`.",
+ "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-100": {
+ "value": "32px",
+ "description": "Used by `--spectrum-closebutton-size`.",
+ "control": "text",
+ "category": "Global"
+ },
+ "spectrum-gray-100": {
+ "value": "light-dark(rgb(233, 233, 233), rgb(44, 44, 44))",
+ "description": "Used by `--spectrum-closebutton-background-color-hover`, `--spectrum-closebutton-background-color-down`, `--spectrum-closebutton-background-color-focus`.",
+ "control": "text",
+ "category": "Global"
+ },
+ "spectrum-component-height-75": {
+ "value": "24px",
+ "description": "Used by `--spectrum-closebutton-size`.",
+ "control": "text",
+ "category": "Global"
+ },
+ "spectrum-component-height-200": {
+ "value": "40px",
+ "description": "Used by `--spectrum-closebutton-size`.",
+ "control": "text",
+ "category": "Global"
+ },
+ "spectrum-component-height-300": {
+ "value": "48px",
+ "description": "Used by `--spectrum-closebutton-size`.",
+ "control": "text",
+ "category": "Global"
+ },
+ "spectrum-transparent-white-800": {
+ "value": "rgba(255, 255, 255, 0.85)",
+ "description": "Used by `--spectrum-closebutton-icon-color-default`.",
+ "control": "text",
+ "category": "Global"
+ },
+ "spectrum-transparent-white-900": {
+ "value": "rgba(255, 255, 255, 0.94)",
+ "description": "Used by `--spectrum-closebutton-icon-color-hover`, `--spectrum-closebutton-icon-color-down`, `--spectrum-closebutton-icon-color-focus`.",
+ "control": "text",
+ "category": "Global"
+ },
+ "spectrum-disabled-static-white-background-color": {
+ "value": "rgba(255, 255, 255, 0.11)",
+ "description": "Used by `--spectrum-closebutton-icon-color-disabled`.",
+ "control": "color",
+ "category": "Global"
+ },
+ "spectrum-transparent-white-100": {
+ "value": "rgba(255, 255, 255, 0.11)",
+ "description": "Used by `--spectrum-closebutton-background-color-hover`, `--spectrum-closebutton-background-color-down`, `--spectrum-closebutton-background-color-focus`.",
+ "control": "text",
+ "category": "Global"
+ },
+ "spectrum-static-white-focus-indicator-color": {
+ "value": "rgb(255, 255, 255)",
+ "description": "Used by `--spectrum-closebutton-focus-indicator-color`.",
+ "control": "color",
+ "category": "Global"
+ },
+ "spectrum-transparent-black-800": {
+ "value": "rgba(0, 0, 0, 0.84)",
+ "description": "Used by `--spectrum-closebutton-icon-color-default`.",
+ "control": "text",
+ "category": "Global"
+ },
+ "spectrum-transparent-black-900": {
+ "value": "rgba(0, 0, 0, 0.93)",
+ "description": "Used by `--spectrum-closebutton-icon-color-hover`, `--spectrum-closebutton-icon-color-down`, `--spectrum-closebutton-icon-color-focus`.",
+ "control": "text",
+ "category": "Global"
+ },
+ "spectrum-disabled-static-black-background-color": {
+ "value": "rgba(0, 0, 0, 0.09)",
+ "description": "Used by `--spectrum-closebutton-icon-color-disabled`.",
+ "control": "color",
+ "category": "Global"
+ },
+ "spectrum-transparent-black-100": {
+ "value": "rgba(0, 0, 0, 0.09)",
+ "description": "Used by `--spectrum-closebutton-background-color-hover`, `--spectrum-closebutton-background-color-down`, `--spectrum-closebutton-background-color-focus`.",
+ "control": "text",
+ "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"
+ }
+ },
+ "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--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"
+ }
+ }
}
diff --git a/components/closebutton/stories/closebutton.stories.js b/components/closebutton/stories/closebutton.stories.js
index a991b559cb3..e9a05eb461e 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).
@@ -55,6 +57,10 @@ export default {
status: {
type: "migrated",
},
+ cssprops: {
+ ...metadata.modifiers,
+ ...metadata.component,
+ },
},
tags: ["migrated"],
};
@@ -139,7 +145,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 4f6c5d8c00e..8ebbcfd1f08 100644
--- a/components/closebutton/stories/template.js
+++ b/components/closebutton/stories/template.js
@@ -9,6 +9,7 @@ import "../index.css";
export const Template = ({
rootClass = "spectrum-CloseButton",
+ id = getRandomId("close-button"),
size = "m",
iconSize = "regular",
label = "Close",
@@ -18,7 +19,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 0bed4172eef..850441f881a 100644
--- a/components/coachindicator/dist/metadata.json
+++ b/components/coachindicator/dist/metadata.json
@@ -10,49 +10,211 @@
".spectrum-CoachIndicator.spectrum-CoachIndicator--staticBlack",
".spectrum-CoachIndicator.spectrum-CoachIndicator--staticWhite"
],
- "modifiers": [
- "--mod-coach-animation-indicator-ring-center-delay-multiple",
- "--mod-coach-animation-indicator-ring-duration",
- "--mod-coach-animation-indicator-ring-outer-delay-multiple",
- "--mod-coach-indicator-animation-name",
- "--mod-coach-indicator-block-size",
- "--mod-coach-indicator-gap",
- "--mod-coach-indicator-inline-size",
- "--mod-coach-indicator-inner-animation-delay-multiple",
- "--mod-coach-indicator-left",
- "--mod-coach-indicator-min-block-size",
- "--mod-coach-indicator-min-inline-size",
- "--mod-coach-indicator-quiet-animation-ring-inner-delay-multiple",
- "--mod-coach-indicator-quiet-ring-diameter",
- "--mod-coach-indicator-ring-block-size",
- "--mod-coach-indicator-ring-border-size",
- "--mod-coach-indicator-ring-default-color",
- "--mod-coach-indicator-ring-diameter",
- "--mod-coach-indicator-ring-inline-size",
- "--mod-coach-indicator-top"
- ],
- "component": [
- "--spectrum-coach-indicator-animation-keyframe-scale-initial",
- "--spectrum-coach-indicator-animation-ring-inner-delay-multiple",
- "--spectrum-coach-indicator-block-size",
- "--spectrum-coach-indicator-gap",
- "--spectrum-coach-indicator-inline-size",
- "--spectrum-coach-indicator-min-block-size",
- "--spectrum-coach-indicator-min-inline-size",
- "--spectrum-coach-indicator-quiet-ring-diameter",
- "--spectrum-coach-indicator-ring-border-size",
- "--spectrum-coach-indicator-ring-default-color",
- "--spectrum-coach-indicator-ring-diameter",
- "--spectrum-coach-indicator-ring-diameter-size",
- "--spectrum-coach-indicator-sizing-multiple"
- ],
- "global": [
- "--spectrum-animation-duration-6000",
- "--spectrum-black",
- "--spectrum-border-width-200",
- "--spectrum-coach-animation-indicator-ring-duration",
- "--spectrum-white"
- ],
- "passthroughs": [],
- "high-contrast": []
+ "modifiers": {
+ "mod-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": {
+ "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": {
+ "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": {
+ "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": {
+ "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": {
+ "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": {
+ "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-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": {
+ "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": {
+ "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": {
+ "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": {
+ "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": {
+ "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": {
+ "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": {
+ "value": "2px",
+ "description": "Defined in `.spectrum-CoachIndicator`.
Used by `.spectrum-CoachIndicator-ring`.
Defaults to `var(--spectrum-border-width-200)`, if not set.",
+ "control": "text",
+ "category": "Component"
+ },
+ "spectrum-coach-indicator-sizing-multiple": {
+ "value": "2.75",
+ "description": "Defined in `.spectrum-CoachIndicator`, `.spectrum-CoachIndicator.spectrum-CoachIndicator--quiet`.
Used by `--spectrum-coach-indicator-min-inline-size`, `--spectrum-coach-indicator-min-block-size`.
Defaults to `2.75`, if not set.",
+ "control": "text",
+ "category": "Component"
+ },
+ "spectrum-coach-indicator-ring-diameter-size": {
+ "value": "var(--mod-coach-indicator-quiet-ring-diameter, var(--spectrum-coach-indicator-quiet-ring-diameter))",
+ "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`.
Defaults to `var(--mod-coach-indicator-quiet-ring-diameter, var(--spectrum-coach-indicator-quiet-ring-diameter))`, if not set.",
+ "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": {
+ "value": "calc(var(--spectrum-coach-indicator-ring-diameter-size) * var(--spectrum-coach-indicator-sizing-multiple))",
+ "description": "Defined in `.spectrum-CoachIndicator`.
Used by `--spectrum-coach-indicator-inline-size`, `.spectrum-CoachIndicator`.
Defaults to `calc(var(--spectrum-coach-indicator-ring-diameter-size) * var(--spectrum-coach-indicator-sizing-multiple))`, if not set.",
+ "control": "text",
+ "category": "Component"
+ },
+ "spectrum-coach-indicator-min-block-size": {
+ "value": "calc(var(--spectrum-coach-indicator-ring-diameter-size) * var(--spectrum-coach-indicator-sizing-multiple))",
+ "description": "Defined in `.spectrum-CoachIndicator`.
Used by `--spectrum-coach-indicator-block-size`, `.spectrum-CoachIndicator`.
Defaults to `calc(var(--spectrum-coach-indicator-ring-diameter-size) * var(--spectrum-coach-indicator-sizing-multiple))`, if not set.",
+ "control": "text",
+ "category": "Component"
+ },
+ "spectrum-coach-indicator-inline-size": {
+ "value": "var(--mod-coach-indicator-inline-size, var(--spectrum-coach-indicator-min-inline-size))",
+ "description": "Defined in `.spectrum-CoachIndicator`.
Used by `.spectrum-CoachIndicator`, `.spectrum-CoachIndicator-ring`.
Defaults to `var(--mod-coach-indicator-inline-size, var(--spectrum-coach-indicator-min-inline-size))`, if not set.",
+ "control": "text",
+ "category": "Component"
+ },
+ "spectrum-coach-indicator-block-size": {
+ "value": "var(--mod-coach-indicator-block-size, var(--spectrum-coach-indicator-min-block-size))",
+ "description": "Defined in `.spectrum-CoachIndicator`.
Used by `.spectrum-CoachIndicator`, `.spectrum-CoachIndicator-ring`.
Defaults to `var(--mod-coach-indicator-block-size, var(--spectrum-coach-indicator-min-block-size))`, if not set.",
+ "control": "text",
+ "category": "Component"
+ },
+ "spectrum-coach-indicator-animation-keyframe-scale-initial": {
+ "value": "0.8",
+ "description": "Defined in `.spectrum-CoachIndicator`, `.spectrum-CoachIndicator.spectrum-CoachIndicator--quiet`.
Used by `0%`.
Defaults to `0.8`, if not set.",
+ "control": "text",
+ "category": "Component"
+ },
+ "spectrum-coach-indicator-animation-ring-inner-delay-multiple": {
+ "value": "var(--mod-coach-indicator-quiet-animation-ring-inner-delay-multiple, -0.33)",
+ "description": "Defined in `.spectrum-CoachIndicator`, `.spectrum-CoachIndicator.spectrum-CoachIndicator--quiet`.
Used by `.spectrum-CoachIndicator-ring:first-child`.
Defaults to `var(--mod-coach-indicator-quiet-animation-ring-inner-delay-multiple, -0.33)`, if not set.",
+ "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": {
+ "value": "rgb(0, 0, 0)",
+ "description": "Defined in `.spectrum-CoachIndicator.spectrum-CoachIndicator--staticWhite`, `.spectrum-CoachIndicator.spectrum-CoachIndicator--staticBlack`.
Used by `.spectrum-CoachIndicator-ring`.
Defaults to `var(--spectrum-black)`, if not set.",
+ "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": {
+ "value": "var(--spectrum-animation-duration-6000)",
+ "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)`.
Defaults to `var(--spectrum-animation-duration-6000)`, if not set.",
+ "control": "text",
+ "category": "Global"
+ },
+ "spectrum-animation-duration-6000": {
+ "description": "Used by `--spectrum-coach-animation-indicator-ring-duration`.",
+ "control": "text",
+ "category": "Global"
+ },
+ "spectrum-white": {
+ "value": "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"
+ }
+ },
+ "passthroughs": {},
+ "high-contrast": {}
}
diff --git a/components/coachindicator/stories/coachindicator.stories.js b/components/coachindicator/stories/coachindicator.stories.js
index f206b3bef9a..316a83cb56e 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,10 @@ export default {
},
packageJson,
metadata,
+ cssprops: {
+ ...metadata.modifiers,
+ ...metadata.component,
+ },
},
};
diff --git a/components/coachmark/dist/metadata.json b/components/coachmark/dist/metadata.json
index 9286c817c5f..70e75b2840c 100644
--- a/components/coachmark/dist/metadata.json
+++ b/components/coachmark/dist/metadata.json
@@ -16,109 +16,536 @@
".spectrum-CoachMark-step",
".spectrum-CoachMark-title"
],
- "modifiers": [
- "--mod-coachmark-action-menu-vertical-offset",
- "--mod-coachmark-body-to-footer",
- "--mod-coachmark-border-radius",
- "--mod-coachmark-border-size",
- "--mod-coachmark-content-font-color",
- "--mod-coachmark-content-font-family",
- "--mod-coachmark-content-font-size",
- "--mod-coachmark-content-font-style",
- "--mod-coachmark-content-font-weight",
- "--mod-coachmark-content-line-height",
- "--mod-coachmark-header-to-body",
- "--mod-coachmark-heading-to-action-button",
- "--mod-coachmark-image-to-heading",
- "--mod-coachmark-max-width",
- "--mod-coachmark-media-fixed-height",
- "--mod-coachmark-media-min-height",
- "--mod-coachmark-min-width",
- "--mod-coachmark-padding",
- "--mod-coachmark-step-color",
- "--mod-coachmark-step-font-size",
- "--mod-coachmark-step-font-style",
- "--mod-coachmark-step-text-font-weight",
- "--mod-coachmark-step-text-line-height",
- "--mod-coachmark-step-to-bottom",
- "--mod-coachmark-title-color",
- "--mod-coachmark-title-font-family",
- "--mod-coachmark-title-font-size",
- "--mod-coachmark-title-font-style",
- "--mod-coachmark-title-text-font-weight",
- "--mod-coachmark-title-text-line-height",
- "--mod-coachmark-width"
- ],
- "component": [
- "--spectrum-coach-mark-body-font-size",
- "--spectrum-coach-mark-edge-to-content",
- "--spectrum-coach-mark-maximum-width",
- "--spectrum-coach-mark-media-height",
- "--spectrum-coach-mark-media-minimum-height",
- "--spectrum-coach-mark-minimum-width",
- "--spectrum-coach-mark-pagination-body-font-size",
- "--spectrum-coach-mark-pagination-color",
- "--spectrum-coach-mark-pagination-text-to-bottom-edge",
- "--spectrum-coach-mark-title-font-size",
- "--spectrum-coach-mark-width",
- "--spectrum-coachmark-action-menu-vertical-offset",
- "--spectrum-coachmark-body-to-footer",
- "--spectrum-coachmark-border-radius",
- "--spectrum-coachmark-border-size",
- "--spectrum-coachmark-buttongroup-display",
- "--spectrum-coachmark-buttongroup-mobile-display",
- "--spectrum-coachmark-content-font-size",
- "--spectrum-coachmark-content-font-weight",
- "--spectrum-coachmark-header-to-body",
- "--spectrum-coachmark-image-to-heading",
- "--spectrum-coachmark-max-width",
- "--spectrum-coachmark-media-fixed-height",
- "--spectrum-coachmark-media-min-height",
- "--spectrum-coachmark-menu-display",
- "--spectrum-coachmark-menu-mobile-display",
- "--spectrum-coachmark-min-width",
- "--spectrum-coachmark-padding",
- "--spectrum-coachmark-step-color",
- "--spectrum-coachmark-step-font-size",
- "--spectrum-coachmark-step-font-style",
- "--spectrum-coachmark-step-text-font-weight",
- "--spectrum-coachmark-step-text-line-height",
- "--spectrum-coachmark-step-to-bottom",
- "--spectrum-coachmark-title-color",
- "--spectrum-coachmark-title-font-family",
- "--spectrum-coachmark-title-font-size",
- "--spectrum-coachmark-title-font-style",
- "--spectrum-coachmark-title-text-font-weight",
- "--spectrum-coachmark-title-text-line-height",
- "--spectrum-coachmark-width"
- ],
- "global": [
- "--spectrum-body-color",
- "--spectrum-body-line-height",
- "--spectrum-body-sans-serif-font-style",
- "--spectrum-body-sans-serif-font-weight",
- "--spectrum-body-serif-font-style",
- "--spectrum-border-width-100",
- "--spectrum-corner-radius-large-default",
- "--spectrum-heading-color",
- "--spectrum-line-height-200",
- "--spectrum-medium-font-weight",
- "--spectrum-popover-edge-to-content-area",
- "--spectrum-sans-serif-font",
- "--spectrum-spacing-100",
- "--spectrum-spacing-200",
- "--spectrum-spacing-300",
- "--spectrum-title-line-height",
- "--spectrum-title-sans-serif-font-weight",
- "--spectrum-title-serif-font-style"
- ],
- "passthroughs": [
- "--mod-button-edge-to-visual-only",
- "--mod-buttongroup-justify-content",
- "--mod-buttongroup-spacing",
- "--mod-popover-border-width",
- "--mod-popover-content-area-spacing",
- "--mod-popover-corner-radius"
- ],
- "high-contrast": []
+ "modifiers": {
+ "mod-coachmark-border-size": {
+ "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": {
+ "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": {
+ "description": "Used by `.spectrum-CoachMark`.
Defaults to `var(--spectrum-coachmark-min-width)`, if not set.",
+ "control": "text",
+ "category": "Modifier"
+ },
+ "mod-coachmark-max-width": {
+ "description": "Used by `.spectrum-CoachMark`.
Defaults to `var(--spectrum-coachmark-max-width)`, if not set.",
+ "control": "text",
+ "category": "Modifier"
+ },
+ "mod-coachmark-width": {
+ "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-min-height": {
+ "description": "Used by `.spectrum-CoachMark-image-wrapper`, `.spectrum-CoachMark-image`.
Defaults to `var(--spectrum-coachmark-media-min-height)`, if not set.",
+ "control": "text",
+ "category": "Modifier"
+ },
+ "mod-coachmark-media-fixed-height": {
+ "description": "Used by `.spectrum-CoachMark-image-wrapper--fixedHeight`.
Defaults to `var(--spectrum-coachmark-media-fixed-height)`, if not set.",
+ "control": "text",
+ "category": "Modifier"
+ },
+ "mod-coachmark-padding": {
+ "description": "Used by `.spectrum-CoachMark-content, .spectrum-CoachMark-footer, .spectrum-CoachMark-header`, `.spectrum-CoachMark-footer`, `.spectrum-CoachMark-step`.
Defaults to `var(--spectrum-coachmark-padding)`, if not set.",
+ "control": "text",
+ "category": "Modifier"
+ },
+ "mod-coachmark-image-to-heading": {
+ "description": "Used by `.spectrum-CoachMark-header`.
Defaults to `var(--spectrum-coachmark-image-to-heading)`, if not set.",
+ "control": "text",
+ "category": "Modifier"
+ },
+ "mod-coachmark-header-to-body": {
+ "description": "Used by `.spectrum-CoachMark-header`.
Defaults to `var(--spectrum-coachmark-header-to-body)`, if not set.",
+ "control": "text",
+ "category": "Modifier"
+ },
+ "mod-coachmark-title-color": {
+ "description": "Used by `.spectrum-CoachMark-title`.
Defaults to `var(--spectrum-coachmark-title-color)`, if not set.",
+ "control": "color",
+ "category": "Modifier"
+ },
+ "mod-coachmark-title-font-size": {
+ "description": "Used by `.spectrum-CoachMark-title`.
Defaults to `var(--spectrum-coachmark-title-font-size)`, if not set.",
+ "control": "text",
+ "category": "Modifier"
+ },
+ "mod-coachmark-title-text-font-weight": {
+ "description": "Used by `.spectrum-CoachMark-title`.
Defaults to `var(--spectrum-coachmark-title-text-font-weight)`, if not set.",
+ "control": "text",
+ "category": "Modifier"
+ },
+ "mod-coachmark-title-font-family": {
+ "description": "Used by `.spectrum-CoachMark-title`.
Defaults to `var(--spectrum-coachmark-title-font-family)`, if not set.",
+ "control": "text",
+ "category": "Modifier"
+ },
+ "mod-coachmark-title-font-style": {
+ "description": "Used by `.spectrum-CoachMark-title`.
Defaults to `var(--spectrum-coachmark-title-font-style)`, if not set.",
+ "control": "text",
+ "category": "Modifier"
+ },
+ "mod-coachmark-title-text-line-height": {
+ "description": "Used by `.spectrum-CoachMark-title`.
Defaults to `var(--spectrum-coachmark-title-text-line-height)`, if not set.",
+ "control": "text",
+ "category": "Modifier"
+ },
+ "mod-coachmark-heading-to-action-button": {
+ "description": "Used by `.spectrum-CoachMark-action-menu`.
Defaults to `var(--spectrum-spacing-300)`, if not set.",
+ "control": "text",
+ "category": "Modifier"
+ },
+ "mod-coachmark-action-menu-vertical-offset": {
+ "description": "Used by `.spectrum-CoachMark-action-menu`.
Defaults to `var(--spectrum-coachmark-action-menu-vertical-offset)`, if not set.",
+ "control": "text",
+ "category": "Modifier"
+ },
+ "mod-coachmark-body-to-footer": {
+ "description": "Used by `.spectrum-CoachMark-content`.
Defaults to `var(--spectrum-coachmark-body-to-footer)`, if not set.",
+ "control": "text",
+ "category": "Modifier"
+ },
+ "mod-coachmark-content-font-color": {
+ "description": "Used by `.spectrum-CoachMark-content`.
Defaults to `var(--spectrum-body-color)`, if not set.",
+ "control": "color",
+ "category": "Modifier"
+ },
+ "mod-coachmark-content-font-size": {
+ "description": "Used by `.spectrum-CoachMark-content`.
Defaults to `var(--spectrum-coachmark-content-font-size)`, if not set.",
+ "control": "text",
+ "category": "Modifier"
+ },
+ "mod-coachmark-content-font-weight": {
+ "description": "Used by `.spectrum-CoachMark-content`.
Defaults to `var(--spectrum-coachmark-content-font-weight)`, if not set.",
+ "control": "text",
+ "category": "Modifier"
+ },
+ "mod-coachmark-content-font-family": {
+ "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": {
+ "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": {
+ "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": {
+ "description": "Used by `.spectrum-CoachMark-step`.
Defaults to `var(--spectrum-coachmark-step-to-bottom)`, if not set.",
+ "control": "text",
+ "category": "Modifier"
+ },
+ "mod-coachmark-step-color": {
+ "description": "Used by `.spectrum-CoachMark-step`.
Defaults to `var(--spectrum-coachmark-step-color)`, if not set.",
+ "control": "color",
+ "category": "Modifier"
+ },
+ "mod-coachmark-step-font-size": {
+ "description": "Used by `.spectrum-CoachMark-step`.
Defaults to `var(--spectrum-coachmark-step-font-size)`, if not set.",
+ "control": "text",
+ "category": "Modifier"
+ },
+ "mod-coachmark-step-text-font-weight": {
+ "description": "Used by `.spectrum-CoachMark-step`.
Defaults to `var(--spectrum-coachmark-step-text-font-weight)`, if not set.",
+ "control": "text",
+ "category": "Modifier"
+ },
+ "mod-coachmark-step-font-style": {
+ "description": "Used by `.spectrum-CoachMark-step`.
Defaults to `var(--spectrum-coachmark-step-font-style)`, if not set.",
+ "control": "text",
+ "category": "Modifier"
+ },
+ "mod-coachmark-step-text-line-height": {
+ "description": "Used by `.spectrum-CoachMark-step`.
Defaults to `var(--spectrum-coachmark-step-text-line-height)`, if not set.",
+ "control": "text",
+ "category": "Modifier"
+ }
+ },
+ "component": {
+ "spectrum-coachmark-width": {
+ "value": "296px",
+ "description": "Defined in `.spectrum-CoachMark`.
Used by `.spectrum-CoachMark`.
Defaults to `var(--spectrum-coach-mark-width)`, if not set.",
+ "control": "text",
+ "category": "Component"
+ },
+ "spectrum-coach-mark-width": {
+ "value": "296px",
+ "description": "Used by `--spectrum-coachmark-width`, `.spectrum-CoachMark-image-wrapper`.",
+ "control": "text",
+ "category": "Component"
+ },
+ "spectrum-coachmark-min-width": {
+ "value": "296px",
+ "description": "Defined in `.spectrum-CoachMark`.
Used by `.spectrum-CoachMark`.
Defaults to `var(--spectrum-coach-mark-minimum-width)`, if not set.",
+ "control": "text",
+ "category": "Component"
+ },
+ "spectrum-coach-mark-minimum-width": {
+ "value": "296px",
+ "description": "Used by `--spectrum-coachmark-min-width`.",
+ "control": "text",
+ "category": "Component"
+ },
+ "spectrum-coachmark-max-width": {
+ "value": "380px",
+ "description": "Defined in `.spectrum-CoachMark`.
Used by `.spectrum-CoachMark`.
Defaults to `var(--spectrum-coach-mark-maximum-width)`, if not set.",
+ "control": "text",
+ "category": "Component"
+ },
+ "spectrum-coach-mark-maximum-width": {
+ "value": "380px",
+ "description": "Used by `--spectrum-coachmark-max-width`.",
+ "control": "text",
+ "category": "Component"
+ },
+ "spectrum-coachmark-media-min-height": {
+ "value": "166px",
+ "description": "Defined in `.spectrum-CoachMark`.
Used by `.spectrum-CoachMark-image-wrapper`, `.spectrum-CoachMark-image`.
Defaults to `var(--spectrum-coach-mark-media-minimum-height)`, if not set.",
+ "control": "text",
+ "category": "Component"
+ },
+ "spectrum-coach-mark-media-minimum-height": {
+ "value": "166px",
+ "description": "Used by `--spectrum-coachmark-media-min-height`.",
+ "control": "text",
+ "category": "Component"
+ },
+ "spectrum-coachmark-border-size": {
+ "value": "var(--mod-coachmark-border-size, var(--mod-popover-border-width))",
+ "description": "Defined in `.spectrum-CoachMark`.
Used by `.spectrum-CoachMark-image-wrapper`, `.spectrum-CoachMark-image`.
Defaults to `var(--mod-coachmark-border-size, var(--mod-popover-border-width))`, if not set.",
+ "control": "text",
+ "category": "Component"
+ },
+ "spectrum-coachmark-border-radius": {
+ "value": "var(--mod-coachmark-border-radius, var(--mod-popover-corner-radius))",
+ "description": "Defined in `.spectrum-CoachMark`.
Used by `.spectrum-CoachMark-image`.
Defaults to `var(--mod-coachmark-border-radius, var(--mod-popover-corner-radius))`, if not set.",
+ "control": "text",
+ "category": "Component"
+ },
+ "spectrum-coachmark-media-fixed-height": {
+ "value": "222px",
+ "description": "Defined in `.spectrum-CoachMark`.
Used by `.spectrum-CoachMark-image-wrapper--fixedHeight`.
Defaults to `var(--spectrum-coach-mark-media-height)`, if not set.",
+ "control": "text",
+ "category": "Component"
+ },
+ "spectrum-coach-mark-media-height": {
+ "value": "222px",
+ "description": "Used by `--spectrum-coachmark-media-fixed-height`.",
+ "control": "text",
+ "category": "Component"
+ },
+ "spectrum-coachmark-padding": {
+ "value": "16px",
+ "description": "Defined in `.spectrum-CoachMark`.
Used by `.spectrum-CoachMark-content, .spectrum-CoachMark-footer, .spectrum-CoachMark-header`, `.spectrum-CoachMark-footer`, `.spectrum-CoachMark-step`.
Defaults to `var(--spectrum-coach-mark-edge-to-content)`, if not set.",
+ "control": "text",
+ "category": "Component"
+ },
+ "spectrum-coach-mark-edge-to-content": {
+ "value": "16px",
+ "description": "Used by `--spectrum-coachmark-padding`, `--spectrum-coachmark-image-to-heading`.",
+ "control": "text",
+ "category": "Component"
+ },
+ "spectrum-coachmark-image-to-heading": {
+ "value": "16px",
+ "description": "Defined in `.spectrum-CoachMark`.
Used by `.spectrum-CoachMark-header`.
Defaults to `var(--spectrum-coach-mark-edge-to-content)`, if not set.",
+ "control": "text",
+ "category": "Component"
+ },
+ "spectrum-coachmark-header-to-body": {
+ "value": "12px",
+ "description": "Defined in `.spectrum-CoachMark`.
Used by `.spectrum-CoachMark-header`.
Defaults to `var(--spectrum-spacing-200)`, if not set.",
+ "control": "text",
+ "category": "Component"
+ },
+ "spectrum-coachmark-body-to-footer": {
+ "value": "16px",
+ "description": "Defined in `.spectrum-CoachMark`.
Used by `.spectrum-CoachMark-content`.
Defaults to `var(--spectrum-spacing-300)`, if not set.",
+ "control": "text",
+ "category": "Component"
+ },
+ "spectrum-coachmark-title-color": {
+ "value": "var(--spectrum-gray-900)",
+ "description": "Defined in `.spectrum-CoachMark`.
Used by `.spectrum-CoachMark-title`.
Defaults to `var(--spectrum-heading-color)`, if not set.",
+ "control": "color",
+ "category": "Component"
+ },
+ "spectrum-coachmark-title-font-family": {
+ "value": "var(--spectrum-sans-serif-font)",
+ "description": "Defined in `.spectrum-CoachMark`.
Used by `.spectrum-CoachMark-title`.
Defaults to `var(--spectrum-sans-serif-font)`, if not set.",
+ "control": "text",
+ "category": "Component"
+ },
+ "spectrum-coachmark-title-font-size": {
+ "value": "var(--spectrum-title-size-s)",
+ "description": "Defined in `.spectrum-CoachMark`.
Used by `.spectrum-CoachMark-title`.
Defaults to `var(--spectrum-coach-mark-title-font-size)`, if not set.",
+ "control": "text",
+ "category": "Component"
+ },
+ "spectrum-coach-mark-title-font-size": {
+ "value": "var(--spectrum-title-size-s)",
+ "description": "Used by `--spectrum-coachmark-title-font-size`.",
+ "control": "text",
+ "category": "Component"
+ },
+ "spectrum-coachmark-title-font-style": {
+ "value": "normal",
+ "description": "Defined in `.spectrum-CoachMark`.
Used by `.spectrum-CoachMark-title`.
Defaults to `var(--spectrum-title-serif-font-style)`, if not set.",
+ "control": "text",
+ "category": "Component"
+ },
+ "spectrum-coachmark-title-text-font-weight": {
+ "value": "700",
+ "description": "Defined in `.spectrum-CoachMark`.
Used by `.spectrum-CoachMark-title`.
Defaults to `var(--spectrum-title-sans-serif-font-weight)`, if not set.",
+ "control": "text",
+ "category": "Component"
+ },
+ "spectrum-coachmark-title-text-line-height": {
+ "value": "1.3",
+ "description": "Defined in `.spectrum-CoachMark`.
Used by `.spectrum-CoachMark-title`.
Defaults to `var(--spectrum-title-line-height)`, if not set.",
+ "control": "text",
+ "category": "Component"
+ },
+ "spectrum-coachmark-content-font-size": {
+ "value": "var(--spectrum-body-size-s)",
+ "description": "Defined in `.spectrum-CoachMark`.
Used by `.spectrum-CoachMark-content`.
Defaults to `var(--spectrum-coach-mark-body-font-size)`, if not set.",
+ "control": "text",
+ "category": "Component"
+ },
+ "spectrum-coach-mark-body-font-size": {
+ "value": "var(--spectrum-body-size-s)",
+ "description": "Used by `--spectrum-coachmark-content-font-size`.",
+ "control": "text",
+ "category": "Component"
+ },
+ "spectrum-coachmark-content-font-weight": {
+ "value": "400",
+ "description": "Defined in `.spectrum-CoachMark`.
Used by `.spectrum-CoachMark-content`.
Defaults to `var(--spectrum-body-sans-serif-font-weight)`, if not set.",
+ "control": "text",
+ "category": "Component"
+ },
+ "spectrum-coachmark-step-color": {
+ "value": "var(--spectrum-gray-600)",
+ "description": "Defined in `.spectrum-CoachMark`.
Used by `.spectrum-CoachMark-step`.
Defaults to `var(--spectrum-coach-mark-pagination-color)`, if not set.",
+ "control": "color",
+ "category": "Component"
+ },
+ "spectrum-coach-mark-pagination-color": {
+ "value": "var(--spectrum-gray-600)",
+ "description": "Used by `--spectrum-coachmark-step-color`.",
+ "control": "color",
+ "category": "Component"
+ },
+ "spectrum-coachmark-step-font-style": {
+ "value": "normal",
+ "description": "Defined in `.spectrum-CoachMark`.
Used by `.spectrum-CoachMark-step`.
Defaults to `var(--spectrum-body-serif-font-style)`, if not set.",
+ "control": "text",
+ "category": "Component"
+ },
+ "spectrum-coachmark-step-font-size": {
+ "value": "var(--spectrum-body-size-xs)",
+ "description": "Defined in `.spectrum-CoachMark`.
Used by `.spectrum-CoachMark-step`.
Defaults to `var(--spectrum-coach-mark-pagination-body-font-size)`, if not set.",
+ "control": "text",
+ "category": "Component"
+ },
+ "spectrum-coach-mark-pagination-body-font-size": {
+ "value": "var(--spectrum-body-size-xs)",
+ "description": "Used by `--spectrum-coachmark-step-font-size`.",
+ "control": "text",
+ "category": "Component"
+ },
+ "spectrum-coachmark-step-text-font-weight": {
+ "value": "500",
+ "description": "Defined in `.spectrum-CoachMark`.
Used by `.spectrum-CoachMark-step`.
Defaults to `var(--spectrum-medium-font-weight)`, if not set.",
+ "control": "text",
+ "category": "Component"
+ },
+ "spectrum-coachmark-step-text-line-height": {
+ "value": "1.5",
+ "description": "Defined in `.spectrum-CoachMark`.
Used by `.spectrum-CoachMark-step`.
Defaults to `var(--spectrum-line-height-200)`, if not set.",
+ "control": "text",
+ "category": "Component"
+ },
+ "spectrum-coachmark-step-to-bottom": {
+ "value": "33px",
+ "description": "Defined in `.spectrum-CoachMark`.
Used by `.spectrum-CoachMark-step`.
Defaults to `var(--spectrum-coach-mark-pagination-text-to-bottom-edge)`, if not set.",
+ "control": "text",
+ "category": "Component"
+ },
+ "spectrum-coach-mark-pagination-text-to-bottom-edge": {
+ "value": "33px",
+ "description": "Used by `--spectrum-coachmark-step-to-bottom`.",
+ "control": "text",
+ "category": "Component"
+ },
+ "spectrum-coachmark-action-menu-vertical-offset": {
+ "description": "Used by `.spectrum-CoachMark-action-menu`.",
+ "control": "text",
+ "category": "Component"
+ },
+ "spectrum-coachmark-menu-display": {
+ "value": "var(--spectrum-coachmark-menu-mobile-display)",
+ "description": "Defined in `.spectrum-CoachMark-menu--mobile`.
Used by `.spectrum-CoachMark-menu`.
Defaults to `var(--spectrum-coachmark-menu-mobile-display)`, if not set.",
+ "control": "text",
+ "category": "Component"
+ },
+ "spectrum-coachmark-menu-mobile-display": {
+ "description": "Used by `--spectrum-coachmark-menu-display`.",
+ "control": "text",
+ "category": "Component"
+ },
+ "spectrum-coachmark-buttongroup-display": {
+ "value": "var(--spectrum-coachmark-buttongroup-mobile-display)",
+ "description": "Defined in `.spectrum-CoachMark-buttongroup--mobile`.
Used by `.spectrum-CoachMark-buttongroup`.
Defaults to `var(--spectrum-coachmark-buttongroup-mobile-display)`, if not set.",
+ "control": "text",
+ "category": "Component"
+ },
+ "spectrum-coachmark-buttongroup-mobile-display": {
+ "description": "Used by `--spectrum-coachmark-buttongroup-display`.",
+ "control": "text",
+ "category": "Component"
+ }
+ },
+ "global": {
+ "spectrum-spacing-200": {
+ "value": "12px",
+ "description": "Used by `--spectrum-coachmark-header-to-body`.",
+ "control": "text",
+ "category": "Global"
+ },
+ "spectrum-spacing-300": {
+ "value": "16px",
+ "description": "Used by `--spectrum-coachmark-body-to-footer`, `.spectrum-CoachMark-action-menu`.",
+ "control": "text",
+ "category": "Global"
+ },
+ "spectrum-heading-color": {
+ "value": "var(--spectrum-gray-900)",
+ "description": "Used by `--spectrum-coachmark-title-color`.",
+ "control": "color",
+ "category": "Global"
+ },
+ "spectrum-sans-serif-font": {
+ "description": "Used by `--spectrum-coachmark-title-font-family`, `.spectrum-CoachMark-content`, `.spectrum-CoachMark-step`.",
+ "control": "text",
+ "category": "Global"
+ },
+ "spectrum-title-serif-font-style": {
+ "value": "normal",
+ "description": "Used by `--spectrum-coachmark-title-font-style`.",
+ "control": "text",
+ "category": "Global"
+ },
+ "spectrum-title-sans-serif-font-weight": {
+ "value": "700",
+ "description": "Used by `--spectrum-coachmark-title-text-font-weight`.",
+ "control": "text",
+ "category": "Global"
+ },
+ "spectrum-title-line-height": {
+ "value": "1.3",
+ "description": "Used by `--spectrum-coachmark-title-text-line-height`.",
+ "control": "text",
+ "category": "Global"
+ },
+ "spectrum-body-sans-serif-font-weight": {
+ "value": "400",
+ "description": "Used by `--spectrum-coachmark-content-font-weight`.",
+ "control": "text",
+ "category": "Global"
+ },
+ "spectrum-body-serif-font-style": {
+ "value": "normal",
+ "description": "Used by `--spectrum-coachmark-step-font-style`.",
+ "control": "text",
+ "category": "Global"
+ },
+ "spectrum-medium-font-weight": {
+ "value": "500",
+ "description": "Used by `--spectrum-coachmark-step-text-font-weight`.",
+ "control": "text",
+ "category": "Global"
+ },
+ "spectrum-line-height-200": {
+ "value": "1.5",
+ "description": "Used by `--spectrum-coachmark-step-text-line-height`.",
+ "control": "text",
+ "category": "Global"
+ },
+ "spectrum-border-width-100": {
+ "value": "1px",
+ "description": "Used by `--mod-popover-border-width`.",
+ "control": "text",
+ "category": "Global"
+ },
+ "spectrum-corner-radius-large-default": {
+ "value": "10px",
+ "description": "Used by `--mod-popover-corner-radius`.",
+ "control": "text",
+ "category": "Global"
+ },
+ "spectrum-popover-edge-to-content-area": {
+ "value": "8px",
+ "description": "Used by `--mod-popover-content-area-spacing`.",
+ "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-style": {
+ "value": "normal",
+ "description": "Used by `.spectrum-CoachMark-content`.",
+ "control": "text",
+ "category": "Global"
+ },
+ "spectrum-body-line-height": {
+ "value": "1.5",
+ "description": "Used by `.spectrum-CoachMark-content`.",
+ "control": "text",
+ "category": "Global"
+ },
+ "spectrum-spacing-100": {
+ "value": "8px",
+ "description": "Used by `--mod-buttongroup-spacing`.",
+ "control": "text",
+ "category": "Global"
+ }
+ },
+ "passthroughs": {
+ "mod-popover-border-width": {
+ "category": "Passthrough"
+ },
+ "mod-popover-corner-radius": {
+ "category": "Passthrough"
+ },
+ "mod-buttongroup-justify-content": {
+ "category": "Passthrough"
+ },
+ "mod-popover-content-area-spacing": {
+ "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 7bac386bc38..1591837bae9 100644
--- a/components/coachmark/stories/coachmark.stories.js
+++ b/components/coachmark/stories/coachmark.stories.js
@@ -1,8 +1,6 @@
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 {
CoachMarkMediaOptionsTemplate,
@@ -10,6 +8,10 @@ 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 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).
*/
@@ -94,6 +96,10 @@ export default {
},
packageJson,
metadata,
+ cssprops: {
+ ...metadata.modifiers,
+ ...metadata.component,
+ },
docs: {
story: {
height: "525px",
diff --git a/components/colorarea/dist/metadata.json b/components/colorarea/dist/metadata.json
index 2580a3d0eab..c65c5c763db 100644
--- a/components/colorarea/dist/metadata.json
+++ b/components/colorarea/dist/metadata.json
@@ -11,42 +11,175 @@
".spectrum-ColorArea.is-focused",
".spectrum-ColorHandle-color"
],
- "modifiers": [
- "--mod-colorarea-border-color",
- "--mod-colorarea-border-radius",
- "--mod-colorarea-border-width",
- "--mod-colorarea-disabled-background-color",
- "--mod-colorarea-height",
- "--mod-colorarea-min-height",
- "--mod-colorarea-min-width",
- "--mod-colorarea-width"
- ],
- "component": [
- "--spectrum-color-area-border-opacity",
- "--spectrum-color-area-border-rounding",
- "--spectrum-color-area-border-width",
- "--spectrum-color-area-height",
- "--spectrum-color-area-minimum-height",
- "--spectrum-color-area-minimum-width",
- "--spectrum-color-area-width",
- "--spectrum-colorarea-border-color",
- "--spectrum-colorarea-border-color-rgb",
- "--spectrum-colorarea-border-radius",
- "--spectrum-colorarea-border-width",
- "--spectrum-colorarea-disabled-background-color",
- "--spectrum-colorarea-height",
- "--spectrum-colorarea-min-height",
- "--spectrum-colorarea-min-width",
- "--spectrum-colorarea-width"
- ],
- "global": [
- "--spectrum-disabled-background-color",
- "--spectrum-gray-1000-rgb"
- ],
- "passthroughs": [],
- "high-contrast": [
- "--highcontrast-colorarea-border-color",
- "--highcontrast-colorarea-border-color-disabled",
- "--highcontrast-colorarea-fill-color-disabled"
- ]
+ "modifiers": {
+ "mod-colorarea-min-width": {
+ "description": "Used by `.spectrum-ColorArea`.
Defaults to `var(--spectrum-colorarea-min-width)`, if not set.",
+ "control": "color",
+ "category": "Modifier"
+ },
+ "mod-colorarea-min-height": {
+ "description": "Used by `.spectrum-ColorArea`.
Defaults to `var(--spectrum-colorarea-min-height)`, if not set.",
+ "control": "color",
+ "category": "Modifier"
+ },
+ "mod-colorarea-width": {
+ "description": "Used by `.spectrum-ColorArea`, `.spectrum-ColorArea-handle`.
Defaults to `var(--spectrum-colorarea-width)`, if not set.",
+ "control": "color",
+ "category": "Modifier"
+ },
+ "mod-colorarea-height": {
+ "description": "Used by `.spectrum-ColorArea`.
Defaults to `var(--spectrum-colorarea-height)`, if not set.",
+ "control": "color",
+ "category": "Modifier"
+ },
+ "mod-colorarea-border-radius": {
+ "description": "Used by `.spectrum-ColorArea`, `.spectrum-ColorArea-gradient`.
Defaults to `var(--spectrum-colorarea-border-radius)`, if not set.",
+ "control": "color",
+ "category": "Modifier"
+ },
+ "mod-colorarea-border-width": {
+ "description": "Used by `.spectrum-ColorArea`, `.spectrum-ColorArea.is-disabled`, `.spectrum-ColorArea-gradient`.
Defaults to `var(--spectrum-colorarea-border-width)`, if not set.",
+ "control": "color",
+ "category": "Modifier"
+ },
+ "mod-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": {
+ "description": "Used by `.spectrum-ColorArea.is-disabled`.
Defaults to `var(--spectrum-colorarea-disabled-background-color)`, if not set.",
+ "control": "color",
+ "category": "Modifier"
+ }
+ },
+ "component": {
+ "spectrum-colorarea-border-radius": {
+ "value": "7px",
+ "description": "Defined in `.spectrum-ColorArea`.
Used by `.spectrum-ColorArea`, `.spectrum-ColorArea-gradient`.
Defaults to `var(--spectrum-color-area-border-rounding)`, if not set.",
+ "control": "color",
+ "category": "Component"
+ },
+ "spectrum-color-area-border-rounding": {
+ "value": "7px",
+ "description": "Used by `--spectrum-colorarea-border-radius`.",
+ "control": "color",
+ "category": "Component"
+ },
+ "spectrum-colorarea-border-color-rgb": {
+ "value": "var(--spectrum-gray-1000-rgb)",
+ "description": "Defined in `.spectrum-ColorArea`.
Used by `--spectrum-colorarea-border-color`.
Defaults to `var(--spectrum-gray-1000-rgb)`, if not set.",
+ "control": "color",
+ "category": "Component"
+ },
+ "spectrum-colorarea-border-color": {
+ "value": "rgb(var(--spectrum-colorarea-border-color-rgb), var(--spectrum-color-area-border-opacity))",
+ "description": "Defined in `.spectrum-ColorArea`.
Used by `.spectrum-ColorArea`.
Defaults to `rgb(var(--spectrum-colorarea-border-color-rgb), var(--spectrum-color-area-border-opacity))`, if not set.",
+ "control": "color",
+ "category": "Component"
+ },
+ "spectrum-color-area-border-opacity": {
+ "value": "0.1",
+ "description": "Used by `--spectrum-colorarea-border-color`.",
+ "control": "color",
+ "category": "Component"
+ },
+ "spectrum-colorarea-border-width": {
+ "value": "1px",
+ "description": "Defined in `.spectrum-ColorArea`.
Used by `.spectrum-ColorArea`, `.spectrum-ColorArea.is-disabled`, `.spectrum-ColorArea-handle`, `.spectrum-ColorArea-gradient`.
Defaults to `var(--spectrum-color-area-border-width)`, if not set.",
+ "control": "color",
+ "category": "Component"
+ },
+ "spectrum-color-area-border-width": {
+ "value": "1px",
+ "description": "Used by `--spectrum-colorarea-border-width`.",
+ "control": "color",
+ "category": "Component"
+ },
+ "spectrum-colorarea-disabled-background-color": {
+ "value": "var(--spectrum-gray-100)",
+ "description": "Defined in `.spectrum-ColorArea`.
Used by `.spectrum-ColorArea.is-disabled`.
Defaults to `var(--spectrum-disabled-background-color)`, if not set.",
+ "control": "color",
+ "category": "Component"
+ },
+ "spectrum-colorarea-height": {
+ "value": "192px",
+ "description": "Defined in `.spectrum-ColorArea`.
Used by `.spectrum-ColorArea`.
Defaults to `var(--spectrum-color-area-height)`, if not set.",
+ "control": "color",
+ "category": "Component"
+ },
+ "spectrum-color-area-height": {
+ "value": "192px",
+ "description": "Used by `--spectrum-colorarea-height`.",
+ "control": "color",
+ "category": "Component"
+ },
+ "spectrum-colorarea-width": {
+ "value": "192px",
+ "description": "Defined in `.spectrum-ColorArea`.
Used by `.spectrum-ColorArea`, `.spectrum-ColorArea-handle`.
Defaults to `var(--spectrum-color-area-width)`, if not set.",
+ "control": "color",
+ "category": "Component"
+ },
+ "spectrum-color-area-width": {
+ "value": "192px",
+ "description": "Used by `--spectrum-colorarea-width`.",
+ "control": "color",
+ "category": "Component"
+ },
+ "spectrum-colorarea-min-width": {
+ "value": "64px",
+ "description": "Defined in `.spectrum-ColorArea`.
Used by `.spectrum-ColorArea`.
Defaults to `var(--spectrum-color-area-minimum-width)`, if not set.",
+ "control": "color",
+ "category": "Component"
+ },
+ "spectrum-color-area-minimum-width": {
+ "value": "64px",
+ "description": "Used by `--spectrum-colorarea-min-width`.",
+ "control": "color",
+ "category": "Component"
+ },
+ "spectrum-colorarea-min-height": {
+ "value": "64px",
+ "description": "Defined in `.spectrum-ColorArea`.
Used by `.spectrum-ColorArea`.
Defaults to `var(--spectrum-color-area-minimum-height)`, if not set.",
+ "control": "color",
+ "category": "Component"
+ },
+ "spectrum-color-area-minimum-height": {
+ "value": "64px",
+ "description": "Used by `--spectrum-colorarea-min-height`.",
+ "control": "color",
+ "category": "Component"
+ }
+ },
+ "global": {
+ "spectrum-gray-1000-rgb": {
+ "description": "Used by `--spectrum-colorarea-border-color-rgb`.",
+ "control": "text",
+ "category": "Global"
+ },
+ "spectrum-disabled-background-color": {
+ "value": "var(--spectrum-gray-100)",
+ "description": "Used by `--spectrum-colorarea-disabled-background-color`.",
+ "control": "color",
+ "category": "Global"
+ }
+ },
+ "passthroughs": {},
+ "high-contrast": {
+ "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-colorarea-disabled-background-color))",
+ "description": "Defined in `.spectrum-ColorArea`.
Used by `.spectrum-ColorArea.is-disabled`.
Defaults to `var(--mod-colorarea-disabled-background-color, var(--spectrum-colorarea-disabled-background-color))`, if not set.",
+ "control": "color"
+ },
+ "highcontrast-colorarea-border-color-disabled": {
+ "value": "GrayText",
+ "description": "Defined in `.spectrum-ColorArea`.
Used by `.spectrum-ColorArea.is-disabled`.
Defaults to `GrayText`, if not set.",
+ "control": "color"
+ }
+ }
}
diff --git a/components/colorarea/stories/colorarea.stories.js b/components/colorarea/stories/colorarea.stories.js
index a29245bcff2..07848741b49 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).
*
@@ -52,6 +54,10 @@ export default {
status: {
type: "migrated",
},
+ cssprops: {
+ ...metadata.modifiers,
+ ...metadata.component,
+ },
},
tags: ["migrated"],
};
diff --git a/components/colorhandle/dist/metadata.json b/components/colorhandle/dist/metadata.json
index cbd2b5d599f..45c9f3ad2da 100644
--- a/components/colorhandle/dist/metadata.json
+++ b/components/colorhandle/dist/metadata.json
@@ -3,52 +3,202 @@
"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"
],
- "passthroughs": ["--mod-opacity-checkerboard-position"],
- "high-contrast": [
- "--highcontrast-colorhandle-border-color-disabled",
- "--highcontrast-colorhandle-fill-color-disabled"
- ]
+ "modifiers": {
+ "mod-colorhandle-size": {
+ "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": {
+ "description": "Used by `.spectrum-ColorHandle`.
Defaults to `var(--spectrum-color-handle-border-width)`, if not set.",
+ "control": "color",
+ "category": "Modifier"
+ },
+ "mod-colorhandle-border-color": {
+ "description": "Used by `.spectrum-ColorHandle`.
Defaults to `var(--spectrum-white)`, if not set.",
+ "control": "color",
+ "category": "Modifier"
+ },
+ "mod-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": {
+ "description": "Used by `.spectrum-ColorHandle`.
Defaults to `var(--spectrum-colorhandle-outer-border-color)`, if not set.",
+ "control": "color",
+ "category": "Modifier"
+ },
+ "mod-colorhandle-animation-duration": {
+ "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": {
+ "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": {
+ "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": {
+ "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": {
+ "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": {
+ "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": {
+ "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": {
+ "value": "rgb(var(--spectrum-black-rgb), var(--spectrum-color-handle-outer-border-opacity))",
+ "description": "Defined in `.spectrum-ColorHandle`.
Used by `.spectrum-ColorHandle`.
Defaults to `rgb(var(--spectrum-black-rgb), var(--spectrum-color-handle-outer-border-opacity))`, if not set.",
+ "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": {
+ "value": "1px",
+ "description": "Defined in `.spectrum-ColorHandle`.
Used by `.spectrum-ColorHandle`.
Defaults to `var(--spectrum-color-handle-outer-border-width)`, if not set.",
+ "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": {
+ "value": "rgb(var(--spectrum-black-rgb), var(--spectrum-color-handle-inner-border-opacity))",
+ "description": "Defined in `.spectrum-ColorHandle`.
Used by `.spectrum-ColorHandle-inner`.
Defaults to `rgb(var(--spectrum-black-rgb), var(--spectrum-color-handle-inner-border-opacity))`, if not set.",
+ "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": "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"
+ }
+ },
+ "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 ff525d51d6d..2957824c238 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.
*/
@@ -55,6 +57,10 @@ export default {
status: {
type: "migrated",
},
+ cssprops: {
+ ...metadata.modifiers,
+ ...metadata.component,
+ },
},
tags: ["migrated"],
};
diff --git a/components/colorloupe/dist/metadata.json b/components/colorloupe/dist/metadata.json
index 8ec7836e2ed..784ea6126c7 100644
--- a/components/colorloupe/dist/metadata.json
+++ b/components/colorloupe/dist/metadata.json
@@ -7,57 +7,256 @@
".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)"
+ ".spectrum-ColorLoupe.is-open"
],
- "modifiers": [
- "--mod-colorloupe-animation-distance",
- "--mod-colorloupe-drop-shadow-blur",
- "--mod-colorloupe-drop-shadow-color",
- "--mod-colorloupe-drop-shadow-x",
- "--mod-colorloupe-drop-shadow-y",
- "--mod-colorloupe-inner-border-color",
- "--mod-colorloupe-inner-border-width",
- "--mod-colorloupe-offset",
- "--mod-colorloupe-outer-border-color",
- "--mod-colorloupe-outer-border-width"
- ],
- "component": [
- "--spectrum-color-loupe-bottom-to-color-handle",
- "--spectrum-color-loupe-height",
- "--spectrum-color-loupe-inner-border",
- "--spectrum-color-loupe-inner-border-width",
- "--spectrum-color-loupe-outer-border",
- "--spectrum-color-loupe-outer-border-width",
- "--spectrum-color-loupe-width",
- "--spectrum-colorloupe-animation-distance",
- "--spectrum-colorloupe-checkerboard-dark-color",
- "--spectrum-colorloupe-checkerboard-fill",
- "--spectrum-colorloupe-checkerboard-light-color",
- "--spectrum-colorloupe-drop-shadow-blur",
- "--spectrum-colorloupe-drop-shadow-color",
- "--spectrum-colorloupe-drop-shadow-x",
- "--spectrum-colorloupe-drop-shadow-y",
- "--spectrum-colorloupe-height",
- "--spectrum-colorloupe-inner-border-color",
- "--spectrum-colorloupe-inner-border-width",
- "--spectrum-colorloupe-offset",
- "--spectrum-colorloupe-outer-border-color",
- "--spectrum-colorloupe-outer-border-width",
- "--spectrum-colorloupe-width"
- ],
- "global": [
- "--spectrum-color-handle-outer-border-width",
- "--spectrum-color-handle-size",
- "--spectrum-drop-shadow-elevated-blur",
- "--spectrum-drop-shadow-elevated-color",
- "--spectrum-drop-shadow-elevated-x",
- "--spectrum-drop-shadow-elevated-y",
- "--spectrum-opacity-checkerboard-square-dark",
- "--spectrum-opacity-checkerboard-square-light",
- "--spectrum-picked-color"
- ],
- "passthroughs": [],
- "high-contrast": ["--highcontrast-colorloupe-outer-border-color"]
+ "modifiers": {
+ "mod-colorloupe-animation-distance": {
+ "description": "Used by `.spectrum-ColorLoupe`.
Defaults to `var(--spectrum-colorloupe-animation-distance)`, if not set.",
+ "control": "color",
+ "category": "Modifier"
+ },
+ "mod-colorloupe-offset": {
+ "description": "Used by `.spectrum-ColorLoupe`.
Defaults to `var(--spectrum-colorloupe-offset)`, if not set.",
+ "control": "color",
+ "category": "Modifier"
+ },
+ "mod-colorloupe-drop-shadow-x": {
+ "description": "Used by `.spectrum-ColorLoupe`.
Defaults to `var(--spectrum-colorloupe-drop-shadow-x)`, if not set.",
+ "control": "color",
+ "category": "Modifier"
+ },
+ "mod-colorloupe-drop-shadow-y": {
+ "description": "Used by `.spectrum-ColorLoupe`.
Defaults to `var(--spectrum-colorloupe-drop-shadow-y)`, if not set.",
+ "control": "color",
+ "category": "Modifier"
+ },
+ "mod-colorloupe-drop-shadow-blur": {
+ "description": "Used by `.spectrum-ColorLoupe`.
Defaults to `var(--spectrum-colorloupe-drop-shadow-blur)`, if not set.",
+ "control": "color",
+ "category": "Modifier"
+ },
+ "mod-colorloupe-drop-shadow-color": {
+ "description": "Used by `.spectrum-ColorLoupe`.
Defaults to `var(--spectrum-colorloupe-drop-shadow-color)`, if not set.",
+ "control": "color",
+ "category": "Modifier"
+ },
+ "mod-colorloupe-inner-border-color": {
+ "description": "Used by `.spectrum-ColorLoupe-inner-border`.
Defaults to `var(--spectrum-colorloupe-inner-border-color)`, if not set.",
+ "control": "color",
+ "category": "Modifier"
+ },
+ "mod-colorloupe-inner-border-width": {
+ "description": "Used by `.spectrum-ColorLoupe-inner-border`.
Defaults to `var(--spectrum-colorloupe-inner-border-width)`, if not set.",
+ "control": "color",
+ "category": "Modifier"
+ },
+ "mod-colorloupe-outer-border-color": {
+ "description": "Used by `.spectrum-ColorLoupe-outer-border`.
Defaults to `var(--spectrum-colorloupe-outer-border-color)`, if not set.",
+ "control": "color",
+ "category": "Modifier"
+ },
+ "mod-colorloupe-outer-border-width": {
+ "description": "Used by `.spectrum-ColorLoupe-outer-border`.
Defaults to `var(--spectrum-colorloupe-outer-border-width)`, if not set.",
+ "control": "color",
+ "category": "Modifier"
+ }
+ },
+ "component": {
+ "spectrum-colorloupe-width": {
+ "value": "48px",
+ "description": "Defined in `.spectrum-ColorLoupe`.
Used by `.spectrum-ColorLoupe`, `.spectrum-ColorLoupe:dir(rtl)`.
Defaults to `var(--spectrum-color-loupe-width)`, if not set.",
+ "control": "color",
+ "category": "Component"
+ },
+ "spectrum-color-loupe-width": {
+ "value": "48px",
+ "description": "Used by `--spectrum-colorloupe-width`.",
+ "control": "color",
+ "category": "Component"
+ },
+ "spectrum-colorloupe-height": {
+ "value": "64px",
+ "description": "Defined in `.spectrum-ColorLoupe`.
Used by `.spectrum-ColorLoupe`.
Defaults to `var(--spectrum-color-loupe-height)`, if not set.",
+ "control": "color",
+ "category": "Component"
+ },
+ "spectrum-color-loupe-height": {
+ "value": "64px",
+ "description": "Used by `--spectrum-colorloupe-height`.",
+ "control": "color",
+ "category": "Component"
+ },
+ "spectrum-colorloupe-offset": {
+ "value": "12px",
+ "description": "Defined in `.spectrum-ColorLoupe`.
Used by `.spectrum-ColorLoupe`.
Defaults to `var(--spectrum-color-loupe-bottom-to-color-handle)`, if not set.",
+ "control": "color",
+ "category": "Component"
+ },
+ "spectrum-color-loupe-bottom-to-color-handle": {
+ "value": "12px",
+ "description": "Used by `--spectrum-colorloupe-offset`.",
+ "control": "color",
+ "category": "Component"
+ },
+ "spectrum-colorloupe-animation-distance": {
+ "value": "8px",
+ "description": "Defined in `.spectrum-ColorLoupe`.
Used by `.spectrum-ColorLoupe`.
Defaults to `8px`, if not set.",
+ "control": "color",
+ "category": "Component"
+ },
+ "spectrum-colorloupe-drop-shadow-x": {
+ "value": "0px",
+ "description": "Defined in `.spectrum-ColorLoupe`.
Used by `.spectrum-ColorLoupe`.
Defaults to `var(--spectrum-drop-shadow-elevated-x)`, if not set.",
+ "control": "color",
+ "category": "Component"
+ },
+ "spectrum-colorloupe-drop-shadow-y": {
+ "value": "2px",
+ "description": "Defined in `.spectrum-ColorLoupe`.
Used by `.spectrum-ColorLoupe`.
Defaults to `var(--spectrum-drop-shadow-elevated-y)`, if not set.",
+ "control": "color",
+ "category": "Component"
+ },
+ "spectrum-colorloupe-drop-shadow-blur": {
+ "value": "8px",
+ "description": "Defined in `.spectrum-ColorLoupe`.
Used by `.spectrum-ColorLoupe`.
Defaults to `var(--spectrum-drop-shadow-elevated-blur)`, if not set.",
+ "control": "color",
+ "category": "Component"
+ },
+ "spectrum-colorloupe-drop-shadow-color": {
+ "value": "var(--spectrum-drop-shadow-color-200)",
+ "description": "Defined in `.spectrum-ColorLoupe`.
Used by `.spectrum-ColorLoupe`.
Defaults to `var(--spectrum-drop-shadow-elevated-color)`, if not set.",
+ "control": "color",
+ "category": "Component"
+ },
+ "spectrum-colorloupe-outer-border-width": {
+ "value": "2px",
+ "description": "Defined in `.spectrum-ColorLoupe`.
Used by `.spectrum-ColorLoupe-outer-border`.
Defaults to `var(--spectrum-color-loupe-outer-border-width)`, if not set.",
+ "control": "color",
+ "category": "Component"
+ },
+ "spectrum-color-loupe-outer-border-width": {
+ "value": "2px",
+ "description": "Used by `--spectrum-colorloupe-outer-border-width`.",
+ "control": "color",
+ "category": "Component"
+ },
+ "spectrum-colorloupe-inner-border-width": {
+ "value": "1px",
+ "description": "Defined in `.spectrum-ColorLoupe`.
Used by `.spectrum-ColorLoupe-inner-border`.
Defaults to `var(--spectrum-color-loupe-inner-border-width)`, if not set.",
+ "control": "color",
+ "category": "Component"
+ },
+ "spectrum-color-loupe-inner-border-width": {
+ "value": "1px",
+ "description": "Used by `--spectrum-colorloupe-inner-border-width`.",
+ "control": "color",
+ "category": "Component"
+ },
+ "spectrum-colorloupe-outer-border-color": {
+ "value": "rgb(255, 255, 255)",
+ "description": "Defined in `.spectrum-ColorLoupe`.
Used by `.spectrum-ColorLoupe-outer-border`.
Defaults to `var(--spectrum-color-loupe-outer-border)`, if not set.",
+ "control": "color",
+ "category": "Component"
+ },
+ "spectrum-color-loupe-outer-border": {
+ "value": "rgb(255, 255, 255)",
+ "description": "Used by `--spectrum-colorloupe-outer-border-color`.",
+ "control": "color",
+ "category": "Component"
+ },
+ "spectrum-colorloupe-inner-border-color": {
+ "value": "rgba(0, 0, 0, 0.12)",
+ "description": "Defined in `.spectrum-ColorLoupe`.
Used by `.spectrum-ColorLoupe-inner-border`.
Defaults to `var(--spectrum-color-loupe-inner-border)`, if not set.",
+ "control": "color",
+ "category": "Component"
+ },
+ "spectrum-color-loupe-inner-border": {
+ "value": "rgba(0, 0, 0, 0.12)",
+ "description": "Used by `--spectrum-colorloupe-inner-border-color`.",
+ "control": "color",
+ "category": "Component"
+ },
+ "spectrum-colorloupe-checkerboard-dark-color": {
+ "value": "var(--spectrum-gray-200)",
+ "description": "Defined in `.spectrum-ColorLoupe`.
Used by `.spectrum-ColorLoupe-checkerboard-pattern`.
Defaults to `var(--spectrum-opacity-checkerboard-square-dark)`, if not set.",
+ "control": "color",
+ "category": "Component"
+ },
+ "spectrum-colorloupe-checkerboard-light-color": {
+ "value": "rgb(255, 255, 255)",
+ "description": "Defined in `.spectrum-ColorLoupe`.
Used by `.spectrum-ColorLoupe-checkerboard-background`.
Defaults to `var(--spectrum-opacity-checkerboard-square-light)`, if not set.",
+ "control": "color",
+ "category": "Component"
+ },
+ "spectrum-colorloupe-checkerboard-fill": {
+ "description": "Used by `.spectrum-ColorLoupe-checkerboard-fill`.",
+ "control": "color",
+ "category": "Component"
+ }
+ },
+ "global": {
+ "spectrum-drop-shadow-elevated-x": {
+ "value": "0px",
+ "description": "Used by `--spectrum-colorloupe-drop-shadow-x`.",
+ "control": "text",
+ "category": "Global"
+ },
+ "spectrum-drop-shadow-elevated-y": {
+ "value": "2px",
+ "description": "Used by `--spectrum-colorloupe-drop-shadow-y`.",
+ "control": "text",
+ "category": "Global"
+ },
+ "spectrum-drop-shadow-elevated-blur": {
+ "value": "8px",
+ "description": "Used by `--spectrum-colorloupe-drop-shadow-blur`.",
+ "control": "text",
+ "category": "Global"
+ },
+ "spectrum-drop-shadow-elevated-color": {
+ "value": "var(--spectrum-drop-shadow-color-200)",
+ "description": "Used by `--spectrum-colorloupe-drop-shadow-color`.",
+ "control": "color",
+ "category": "Global"
+ },
+ "spectrum-opacity-checkerboard-square-dark": {
+ "value": "var(--spectrum-gray-200)",
+ "description": "Used by `--spectrum-colorloupe-checkerboard-dark-color`.",
+ "control": "text",
+ "category": "Global"
+ },
+ "spectrum-opacity-checkerboard-square-light": {
+ "value": "rgb(255, 255, 255)",
+ "description": "Used by `--spectrum-colorloupe-checkerboard-light-color`.",
+ "control": "text",
+ "category": "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-picked-color": {
+ "description": "Used by `.spectrum-ColorLoupe-inner-border`.",
+ "control": "color",
+ "category": "Global"
+ }
+ },
+ "passthroughs": {},
+ "high-contrast": {
+ "highcontrast-colorloupe-outer-border-color": {
+ "value": "var(--mod-colorloupe-outer-border-color, var(--spectrum-colorloupe-outer-border-color))",
+ "description": "Defined in `.spectrum-ColorLoupe`.
Used by `.spectrum-ColorLoupe-outer-border`.
Defaults to `var(--mod-colorloupe-outer-border-color, var(--spectrum-colorloupe-outer-border-color))`, if not set.",
+ "control": "color"
+ }
+ }
}
diff --git a/components/colorloupe/stories/colorloupe.stories.js b/components/colorloupe/stories/colorloupe.stories.js
index 242a4bf82bf..0fa244193dc 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.
@@ -48,6 +50,10 @@ export default {
status: {
type: "migrated",
},
+ cssprops: {
+ ...metadata.modifiers,
+ ...metadata.component,
+ },
},
tags: ["migrated"],
};
diff --git a/components/colorslider/dist/metadata.json b/components/colorslider/dist/metadata.json
index aad9494baf6..98386ce44ec 100644
--- a/components/colorslider/dist/metadata.json
+++ b/components/colorslider/dist/metadata.json
@@ -15,41 +15,168 @@
".spectrum-ColorSlider.is-disabled .spectrum-ColorSlider-gradient",
".spectrum-ColorSlider.is-focused"
],
- "modifiers": [
- "--mod-color-slider-background-color-disabled",
- "--mod-color-slider-border-color",
- "--mod-color-slider-border-color-disabled",
- "--mod-color-slider-border-rounding",
- "--mod-color-slider-border-width",
- "--mod-color-slider-control-track-height",
- "--mod-color-slider-control-track-width",
- "--mod-color-slider-handle-hitarea-border-radius",
- "--mod-color-slider-length",
- "--mod-color-slider-minimum-length",
- "--mod-color-slider-vertical-control-track-width",
- "--mod-color-slider-vertical-height",
- "--mod-color-slider-vertical-minimum-height"
- ],
- "component": [
- "--spectrum-color-slider-border-color-default",
- "--spectrum-color-slider-border-color-local",
- "--spectrum-color-slider-border-opacity",
- "--spectrum-color-slider-border-rounding",
- "--spectrum-color-slider-border-width",
- "--spectrum-color-slider-control-track-width",
- "--spectrum-color-slider-fill-color-disabled",
- "--spectrum-color-slider-length",
- "--spectrum-color-slider-minimum-length"
- ],
- "global": [
- "--spectrum-color-control-track-width",
- "--spectrum-disabled-background-color",
- "--spectrum-gray-1000-rgb"
- ],
- "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": {
+ "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": {
+ "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": {
+ "description": "Used by `.spectrum-ColorSlider`.
Defaults to `var(--spectrum-color-slider-control-track-width)`, if not set.",
+ "control": "color",
+ "category": "Modifier"
+ },
+ "mod-color-slider-vertical-minimum-height": {
+ "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": {
+ "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": {
+ "description": "Used by `.spectrum-ColorSlider--vertical`.
Defaults to `var(--mod-color-slider-control-track-height, var(--spectrum-color-slider-control-track-width))`, if not set.",
+ "control": "color",
+ "category": "Modifier"
+ },
+ "mod-color-slider-control-track-height": {
+ "description": "Used by `.spectrum-ColorSlider--vertical`.
Defaults to `var(--spectrum-color-slider-control-track-width)`, if not set.",
+ "control": "color",
+ "category": "Modifier"
+ },
+ "mod-color-slider-border-color": {
+ "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": {
+ "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": {
+ "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": {
+ "description": "Used by `--spectrum-color-slider-border-color-local`.
Defaults to `var(--spectrum-color-slider-fill-color-disabled)`, if not set.",
+ "control": "color",
+ "category": "Modifier"
+ },
+ "mod-color-slider-background-color-disabled": {
+ "description": "Used by `.spectrum-ColorSlider.is-disabled .spectrum-ColorSlider-checkerboard`.
Defaults to `var(--spectrum-color-slider-fill-color-disabled)`, if not set.",
+ "control": "color",
+ "category": "Modifier"
+ }
+ },
+ "component": {
+ "spectrum-color-slider-control-track-width": {
+ "value": "24px",
+ "description": "Defined in `.spectrum-ColorSlider`.
Used by `.spectrum-ColorSlider`, `.spectrum-ColorSlider--vertical`.
Defaults to `var(--spectrum-color-control-track-width)`, if not set.",
+ "control": "color",
+ "category": "Component"
+ },
+ "spectrum-color-slider-border-color-default": {
+ "value": "rgb(var(--spectrum-gray-1000-rgb), var(--spectrum-color-slider-border-opacity))",
+ "description": "Defined in `.spectrum-ColorSlider`.
Used by `--spectrum-color-slider-border-color-local`.
Defaults to `rgb(var(--spectrum-gray-1000-rgb), var(--spectrum-color-slider-border-opacity))`, if not set.",
+ "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-fill-color-disabled": {
+ "value": "var(--spectrum-gray-100)",
+ "description": "Defined in `.spectrum-ColorSlider`.
Used by `--spectrum-color-slider-border-color-local`, `.spectrum-ColorSlider.is-disabled .spectrum-ColorSlider-checkerboard`.
Defaults to `var(--spectrum-disabled-background-color)`, if not set.",
+ "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": {
+ "value": "var(--highcontrast-color-slider-border-color-disabled, var(--mod-color-slider-border-color-disabled, var(--spectrum-color-slider-fill-color-disabled)))",
+ "description": "Defined in `.spectrum-ColorSlider-checkerboard`, `.spectrum-ColorSlider.is-disabled .spectrum-ColorSlider-checkerboard`.
Used by `.spectrum-ColorSlider-checkerboard:before`.
Defaults to `var(--highcontrast-color-slider-border-color-disabled, var(--mod-color-slider-border-color-disabled, var(--spectrum-color-slider-fill-color-disabled)))`, if not set.",
+ "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-color-control-track-width": {
+ "value": "24px",
+ "description": "Used by `--spectrum-color-slider-control-track-width`.",
+ "control": "color",
+ "category": "Global"
+ },
+ "spectrum-gray-1000-rgb": {
+ "description": "Used by `--spectrum-color-slider-border-color-default`.",
+ "control": "text",
+ "category": "Global"
+ },
+ "spectrum-disabled-background-color": {
+ "value": "var(--spectrum-gray-100)",
+ "description": "Used by `--spectrum-color-slider-fill-color-disabled`.",
+ "control": "color",
+ "category": "Global"
+ }
+ },
+ "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-color-slider-fill-color-disabled))",
+ "description": "Defined in `.spectrum-ColorSlider`.
Used by `--spectrum-color-slider-border-color-local`.
Defaults to `var(--mod-color-slider-border-color-disabled, var(--spectrum-color-slider-fill-color-disabled))`, if not set.",
+ "control": "color"
+ },
+ "highcontrast-color-slider-background-color-disabled": {
+ "value": "var(--mod-color-slider-background-color-disabled, var(--spectrum-color-slider-fill-color-disabled))",
+ "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-color-slider-fill-color-disabled))`, if not set.",
+ "control": "color"
+ }
+ }
}
diff --git a/components/colorslider/stories/colorslider.stories.js b/components/colorslider/stories/colorslider.stories.js
index d6aed7a33be..12a6c4b4d41 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.
*
@@ -74,6 +76,10 @@ export default {
status: {
type: "migrated",
},
+ cssprops: {
+ ...metadata.modifiers,
+ ...metadata.component,
+ },
},
tags: ["migrated"],
};
diff --git a/components/colorwheel/dist/metadata.json b/components/colorwheel/dist/metadata.json
index 1c087a7f50f..9e73c82f3ac 100644
--- a/components/colorwheel/dist/metadata.json
+++ b/components/colorwheel/dist/metadata.json
@@ -2,58 +2,185 @@
"sourceFile": "index.css",
"selectors": [
".spectrum-ColorWheel",
+ ".spectrum-ColorWheel-colorarea-container",
".spectrum-ColorWheel-ColorArea-handle",
".spectrum-ColorWheel-ColorArea-handle:dir(rtl)",
- ".spectrum-ColorWheel-colorarea-container",
".spectrum-ColorWheel-handle",
".spectrum-ColorWheel-inner",
".spectrum-ColorWheel-slider",
".spectrum-ColorWheel-wheel",
".spectrum-ColorWheel-wheel.is-disabled",
+ ".spectrum-ColorWheel:after",
+ ".spectrum-ColorWheel:before",
".spectrum-ColorWheel.is-disabled",
".spectrum-ColorWheel.is-disabled .spectrum-ColorWheel-inner:before",
".spectrum-ColorWheel.is-disabled:after",
".spectrum-ColorWheel.is-disabled:before",
".spectrum-ColorWheel.is-dragged",
- ".spectrum-ColorWheel.is-focused",
- ".spectrum-ColorWheel:after",
- ".spectrum-ColorWheel:before"
- ],
- "modifiers": [
- "--mod-colorwheel-block-size",
- "--mod-colorwheel-border-color",
- "--mod-colorwheel-colorarea-container-size",
- "--mod-colorwheel-fill-color-disabled",
- "--mod-colorwheel-inline-size",
- "--mod-colorwheel-min-inline-size",
- "--mod-colorwheel-path",
- "--mod-colorwheel-track-width"
- ],
- "component": [
- "--spectrum-color-wheel-border-opacity",
- "--spectrum-color-wheel-minimum-width",
- "--spectrum-color-wheel-width",
- "--spectrum-colorwheel-block-size",
- "--spectrum-colorwheel-border-color",
- "--spectrum-colorwheel-border-color-rgb",
- "--spectrum-colorwheel-border-opacity",
- "--spectrum-colorwheel-border-width",
- "--spectrum-colorwheel-colorarea-container-size",
- "--spectrum-colorwheel-fill-color-disabled",
- "--spectrum-colorwheel-inline-size",
- "--spectrum-colorwheel-min-inline-size",
- "--spectrum-colorwheel-path",
- "--spectrum-colorwheel-track-width"
- ],
- "global": [
- "--spectrum-border-width-100",
- "--spectrum-color-control-track-width",
- "--spectrum-disabled-background-color",
- "--spectrum-gray-1000-rgb"
+ ".spectrum-ColorWheel.is-focused"
],
- "passthroughs": [],
- "high-contrast": [
- "--highcontrast-colorwheel-border-color-disabled",
- "--highcontrast-colorwheel-fill-color-disabled"
- ]
+ "modifiers": {
+ "mod-colorwheel-track-width": {
+ "description": "Used by `--_track-width`, `.spectrum-ColorWheel:after`, `.spectrum-ColorWheel-handle`.
Defaults to `var(--spectrum-colorwheel-track-width)`, if not set.",
+ "control": "color",
+ "category": "Modifier"
+ },
+ "mod-colorwheel-min-inline-size": {
+ "description": "Used by `.spectrum-ColorWheel`.
Defaults to `var(--spectrum-colorwheel-min-inline-size)`, if not set.",
+ "control": "color",
+ "category": "Modifier"
+ },
+ "mod-colorwheel-inline-size": {
+ "description": "Used by `.spectrum-ColorWheel`, `.spectrum-ColorWheel:before`, `.spectrum-ColorWheel-handle`.
Defaults to `var(--spectrum-colorwheel-inline-size)`, if not set.",
+ "control": "color",
+ "category": "Modifier"
+ },
+ "mod-colorwheel-block-size": {
+ "description": "Used by `.spectrum-ColorWheel`.
Defaults to `var(--spectrum-colorwheel-block-size)`, if not set.",
+ "control": "color",
+ "category": "Modifier"
+ },
+ "mod-colorwheel-border-color": {
+ "description": "Used by `.spectrum-ColorWheel:after, .spectrum-ColorWheel:before`.
Defaults to `var(--spectrum-colorwheel-border-color)`, if not set.",
+ "control": "color",
+ "category": "Modifier"
+ },
+ "mod-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-path": {
+ "description": "Used by `.spectrum-ColorWheel-wheel`.
Defaults to `var(--spectrum-colorwheel-path)`, if not set.",
+ "control": "color",
+ "category": "Modifier"
+ },
+ "mod-colorwheel-fill-color-disabled": {
+ "description": "Used by `.spectrum-ColorWheel-wheel.is-disabled`.
Defaults to `var(--spectrum-colorwheel-fill-color-disabled)`, if not set.",
+ "control": "color",
+ "category": "Modifier"
+ }
+ },
+ "component": {
+ "spectrum-colorwheel-inline-size": {
+ "value": "192px",
+ "description": "Defined in `.spectrum-ColorWheel`.
Used by `.spectrum-ColorWheel`, `.spectrum-ColorWheel:before`, `.spectrum-ColorWheel-handle`.
Defaults to `var(--spectrum-color-wheel-width)`, if not set.",
+ "control": "color",
+ "category": "Component"
+ },
+ "spectrum-color-wheel-width": {
+ "value": "192px",
+ "description": "Used by `--spectrum-colorwheel-inline-size`, `--spectrum-colorwheel-block-size`.",
+ "control": "color",
+ "category": "Component"
+ },
+ "spectrum-colorwheel-block-size": {
+ "value": "192px",
+ "description": "Defined in `.spectrum-ColorWheel`.
Used by `.spectrum-ColorWheel`.
Defaults to `var(--spectrum-color-wheel-width)`, if not set.",
+ "control": "color",
+ "category": "Component"
+ },
+ "spectrum-colorwheel-min-inline-size": {
+ "value": "175px",
+ "description": "Defined in `.spectrum-ColorWheel`.
Used by `.spectrum-ColorWheel`.
Defaults to `var(--spectrum-color-wheel-minimum-width)`, if not set.",
+ "control": "color",
+ "category": "Component"
+ },
+ "spectrum-color-wheel-minimum-width": {
+ "value": "175px",
+ "description": "Used by `--spectrum-colorwheel-min-inline-size`.",
+ "control": "color",
+ "category": "Component"
+ },
+ "spectrum-colorwheel-border-color-rgb": {
+ "value": "var(--spectrum-gray-1000-rgb)",
+ "description": "Defined in `.spectrum-ColorWheel`.
Used by `--spectrum-colorwheel-border-color`.
Defaults to `var(--spectrum-gray-1000-rgb)`, if not set.",
+ "control": "color",
+ "category": "Component"
+ },
+ "spectrum-colorwheel-border-opacity": {
+ "value": "0.1",
+ "description": "Defined in `.spectrum-ColorWheel`.
Used by `--spectrum-colorwheel-border-color`.
Defaults to `var(--spectrum-color-wheel-border-opacity)`, if not set.",
+ "control": "color",
+ "category": "Component"
+ },
+ "spectrum-color-wheel-border-opacity": {
+ "value": "0.1",
+ "description": "Used by `--spectrum-colorwheel-border-opacity`.",
+ "control": "color",
+ "category": "Component"
+ },
+ "spectrum-colorwheel-border-color": {
+ "value": "rgb(var(--spectrum-colorwheel-border-color-rgb), var(--spectrum-colorwheel-border-opacity))",
+ "description": "Defined in `.spectrum-ColorWheel`.
Used by `.spectrum-ColorWheel:after, .spectrum-ColorWheel:before`.
Defaults to `rgb(var(--spectrum-colorwheel-border-color-rgb), var(--spectrum-colorwheel-border-opacity))`, if not set.",
+ "control": "color",
+ "category": "Component"
+ },
+ "spectrum-colorwheel-border-width": {
+ "value": "1px",
+ "description": "Defined in `.spectrum-ColorWheel`.
Used by `--_border-width`, `.spectrum-ColorWheel:before`, `.spectrum-ColorWheel:after, .spectrum-ColorWheel:before`, `.spectrum-ColorWheel:after`, `.spectrum-ColorWheel-wheel`.
Defaults to `var(--spectrum-border-width-100)`, if not set.",
+ "control": "color",
+ "category": "Component"
+ },
+ "spectrum-colorwheel-track-width": {
+ "value": "24px",
+ "description": "Defined in `.spectrum-ColorWheel`.
Used by `--_track-width`, `.spectrum-ColorWheel:after`, `.spectrum-ColorWheel-handle`.
Defaults to `var(--spectrum-color-control-track-width)`, if not set.",
+ "control": "color",
+ "category": "Component"
+ },
+ "spectrum-colorwheel-fill-color-disabled": {
+ "value": "var(--spectrum-gray-100)",
+ "description": "Defined in `.spectrum-ColorWheel`.
Used by `.spectrum-ColorWheel-wheel.is-disabled`.
Defaults to `var(--spectrum-disabled-background-color)`, if not set.",
+ "control": "color",
+ "category": "Component"
+ },
+ "spectrum-colorwheel-colorarea-container-size": {
+ "description": "Used by `.spectrum-ColorWheel-inner`.",
+ "control": "color",
+ "category": "Component"
+ },
+ "spectrum-colorwheel-path": {
+ "description": "Used by `.spectrum-ColorWheel-wheel`.",
+ "control": "color",
+ "category": "Component"
+ }
+ },
+ "global": {
+ "spectrum-gray-1000-rgb": {
+ "description": "Used by `--spectrum-colorwheel-border-color-rgb`.",
+ "control": "text",
+ "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"
+ },
+ "spectrum-disabled-background-color": {
+ "value": "var(--spectrum-gray-100)",
+ "description": "Used by `--spectrum-colorwheel-fill-color-disabled`.",
+ "control": "color",
+ "category": "Global"
+ }
+ },
+ "passthroughs": {},
+ "high-contrast": {
+ "highcontrast-colorwheel-border-color-disabled": {
+ "value": "GrayText",
+ "description": "Defined in `.spectrum-ColorWheel`.
Used by `.spectrum-ColorWheel.is-disabled .spectrum-ColorWheel-inner:before, .spectrum-ColorWheel.is-disabled:after, .spectrum-ColorWheel.is-disabled:before`.
Defaults to `GrayText`, if not set.",
+ "control": "color"
+ },
+ "highcontrast-colorwheel-fill-color-disabled": {
+ "value": "var(--mod-colorwheel-fill-color-disabled, var(--spectrum-colorwheel-fill-color-disabled))",
+ "description": "Defined in `.spectrum-ColorWheel`.
Used by `.spectrum-ColorWheel-wheel.is-disabled`.
Defaults to `var(--mod-colorwheel-fill-color-disabled, 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 f55a704ff03..8d45463a584 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.
*
@@ -66,6 +68,10 @@ export default {
status: {
type: "migrated",
},
+ cssprops: {
+ ...metadata.modifiers,
+ ...metadata.component,
+ },
},
tags: ["migrated"],
};
diff --git a/components/combobox/dist/metadata.json b/components/combobox/dist/metadata.json
index ee4f97630eb..ea13f308e31 100644
--- a/components/combobox/dist/metadata.json
+++ b/components/combobox/dist/metadata.json
@@ -15,30 +15,28 @@
".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-content",
".spectrum-Combobox-helptext",
".spectrum-Combobox-helptext .spectrum-HelpText-text",
".spectrum-Combobox-input",
- ".spectrum-Combobox-input.spectrum-Combobox-autocomplete",
- ".spectrum-Combobox-input.spectrum-Combobox-autocomplete::selection",
".spectrum-Combobox-input:-internal-autofill-selected",
".spectrum-Combobox-input:-internal-autofill-selected::selection",
".spectrum-Combobox-input:-webkit-autofill",
@@ -57,264 +55,1172 @@
".spectrum-Combobox-input:lang(ja)",
".spectrum-Combobox-input:lang(ko)",
".spectrum-Combobox-input:lang(zh)",
+ ".spectrum-Combobox-input.spectrum-Combobox-autocomplete",
+ ".spectrum-Combobox-input.spectrum-Combobox-autocomplete::selection",
".spectrum-Combobox-label",
".spectrum-Combobox-progress-circle",
".spectrum-Combobox-progress-circle:dir(rtl)",
+ ".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-keyboardFocused .spectrum-Combobox-button.is-invalid:not(:disabled, .spectrum-PickerButton--quiet)",
".spectrum-Combobox.is-readOnly .spectrum-Combobox-input:read-only",
".spectrum-Combobox.is-readOnly .spectrum-Combobox-input:read-only:hover",
".spectrum-Combobox.is-readOnly .spectrum-Combobox-textfield.is-keyboardFocused .spectrum-Combobox-input",
".spectrum-Combobox.is-readOnly.is-disabled .spectrum-Combobox-input:read-only",
".spectrum-Combobox.is-readOnly.is-disabled .spectrum-Combobox-input:read-only:hover",
".spectrum-Combobox.is-readOnly.is-invalid .spectrum-Combobox-input:read-only",
- ".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-Textfield.is-disabled .spectrum-Textfield-validationIcon",
".spectrum-Textfield.is-loading .spectrum-Textfield-validationIcon",
".spectrum-Textfield.is-readOnly .spectrum-Textfield-validationIcon"
],
- "modifiers": [
- "--mod-combobox-alert-icon-color",
- "--mod-combobox-background-color-default",
- "--mod-combobox-background-color-disabled",
- "--mod-combobox-background-color-focus",
- "--mod-combobox-background-color-focus-hover",
- "--mod-combobox-background-color-hover",
- "--mod-combobox-background-color-key-focus",
- "--mod-combobox-block-size",
- "--mod-combobox-block-spacing-edge-to-icon",
- "--mod-combobox-block-spacing-edge-to-progress-circle",
- "--mod-combobox-border-color-default",
- "--mod-combobox-border-color-disabled",
- "--mod-combobox-border-color-focus",
- "--mod-combobox-border-color-focus-hover",
- "--mod-combobox-border-color-hover",
- "--mod-combobox-border-color-invalid-default",
- "--mod-combobox-border-color-invalid-focus",
- "--mod-combobox-border-color-invalid-focus-hover",
- "--mod-combobox-border-color-invalid-hover",
- "--mod-combobox-border-color-invalid-key-focus",
- "--mod-combobox-border-color-key-focus",
- "--mod-combobox-border-radius",
- "--mod-combobox-border-width",
- "--mod-combobox-button-width",
- "--mod-combobox-focus-indicator-color",
- "--mod-combobox-focus-indicator-gap",
- "--mod-combobox-focus-indicator-thickness",
- "--mod-combobox-font-color-default",
- "--mod-combobox-font-color-disabled",
- "--mod-combobox-font-color-focus",
- "--mod-combobox-font-color-focus-hover",
- "--mod-combobox-font-color-hover",
- "--mod-combobox-font-color-key-focus",
- "--mod-combobox-font-color-placeholder",
- "--mod-combobox-font-family",
- "--mod-combobox-icon-size",
- "--mod-combobox-inline-size",
- "--mod-combobox-line-height",
- "--mod-combobox-line-height-cjk",
- "--mod-combobox-min-inline-size",
- "--mod-combobox-popover-animation-distance",
- "--mod-combobox-readonly-border-color-disabled",
- "--mod-combobox-spacing-alert-icon-to-text",
- "--mod-combobox-spacing-block-end-edge-to-text",
- "--mod-combobox-spacing-block-start-edge-to-text",
- "--mod-combobox-spacing-inline-icon-to-button",
- "--mod-combobox-spacing-inline-icon-to-text",
- "--mod-combobox-spacing-inline-start-edge-to-text",
- "--mod-combobox-spacing-label-to-combobox",
- "--mod-combobox-spacing-side-label-to-field",
- "--mod-combobox-spacing-to-help-text",
- "--mod-combobox-textfield-background-color"
- ],
- "component": [
- "--spectrum-combo-box-minimum-width-multiplier",
- "--spectrum-combo-box-visual-to-field-button",
- "--spectrum-combobox-background-color-autofill",
- "--spectrum-combobox-background-color-default",
- "--spectrum-combobox-background-color-disabled",
- "--spectrum-combobox-block-size",
- "--spectrum-combobox-block-spacing-edge-to-icon",
- "--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-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-font-weight",
- "--spectrum-combobox-icon-size",
- "--spectrum-combobox-inline-size",
- "--spectrum-combobox-line-height",
- "--spectrum-combobox-line-height-cjk",
- "--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-inline-icon-to-button",
- "--spectrum-combobox-spacing-inline-icon-to-text",
- "--spectrum-combobox-spacing-inline-start-edge-to-text",
- "--spectrum-combobox-spacing-label-to-combobox",
- "--spectrum-combobox-spacing-side-label-to-field",
- "--spectrum-combobox-spacing-to-help-text"
- ],
- "global": [
- "--spectrum-blue-900-rgb",
- "--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-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-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-medium-size-extra-large",
- "--spectrum-corner-radius-medium-size-large",
- "--spectrum-corner-radius-medium-size-medium",
- "--spectrum-corner-radius-medium-size-small",
- "--spectrum-default-font-style",
- "--spectrum-disabled-background-color",
- "--spectrum-disabled-border-color",
- "--spectrum-disabled-content-color",
- "--spectrum-field-label-to-component",
- "--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-extra-large",
- "--spectrum-field-width-large",
- "--spectrum-field-width-medium",
- "--spectrum-field-width-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-400",
- "--spectrum-gray-800",
- "--spectrum-gray-900",
- "--spectrum-help-text-to-component",
- "--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-neutral-content-color-default",
- "--spectrum-regular-font-weight",
- "--spectrum-spacing-200",
- "--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"
- ],
- "passthroughs": [
- "--mod-divider-inline-minimum-size",
- "--mod-picker-button-background-color",
- "--mod-picker-button-background-color-disabled",
- "--mod-picker-button-border-color",
- "--mod-picker-button-border-color-disabled",
- "--mod-picker-button-border-width",
- "--mod-picker-button-font-color-disabled",
- "--mod-popover-animation-distance",
- "--mod-textfield-background-color",
- "--mod-textfield-background-color-disabled",
- "--mod-textfield-border-color",
- "--mod-textfield-border-color-disabled",
- "--mod-textfield-border-color-focus",
- "--mod-textfield-border-color-focus-hover",
- "--mod-textfield-border-color-hover",
- "--mod-textfield-border-color-invalid-default",
- "--mod-textfield-border-color-invalid-focus",
- "--mod-textfield-border-color-invalid-focus-hover",
- "--mod-textfield-border-color-invalid-hover",
- "--mod-textfield-border-color-invalid-keyboard-focus",
- "--mod-textfield-border-color-keyboard-focus",
- "--mod-textfield-border-width",
- "--mod-textfield-corner-radius",
- "--mod-textfield-focus-indicator-color",
- "--mod-textfield-focus-indicator-gap",
- "--mod-textfield-focus-indicator-width",
- "--mod-textfield-font-family",
- "--mod-textfield-font-size",
- "--mod-textfield-font-style",
- "--mod-textfield-font-weight",
- "--mod-textfield-icon-color-invalid",
- "--mod-textfield-spacing-block-end",
- "--mod-textfield-spacing-block-start",
- "--mod-textfield-text-color-default",
- "--mod-textfield-text-color-disabled",
- "--mod-textfield-text-color-focus",
- "--mod-textfield-text-color-focus-hover",
- "--mod-textfield-text-color-hover",
- "--mod-textfield-text-color-keyboard-focus"
- ],
- "high-contrast": [
- "--highcontrast-combobox-background-color-default",
- "--highcontrast-combobox-border-color-highlight",
- "--highcontrast-combobox-border-color-invalid",
- "--highcontrast-combobox-readonly-border-color"
- ]
+ "modifiers": {
+ "mod-combobox-popover-animation-distance": {
+ "description": "Defined in `.spectrum-Combobox`, `.spectrum-Combobox--sizeS`, `.spectrum-Combobox--sizeL`, `.spectrum-Combobox--sizeXL`.
Used by `--mod-popover-animation-distance`.
Defaults to `var(--spectrum-component-to-menu-extra-large)`, if not set.",
+ "control": "text",
+ "category": "Modifier"
+ },
+ "mod-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": {
+ "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": {
+ "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": {
+ "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-spacing-block-start-edge-to-text": {
+ "description": "Used by `--mod-textfield-spacing-block-start`.
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": {
+ "description": "Used by `--mod-textfield-spacing-block-end`.
Defaults to `var(--spectrum-combobox-spacing-block-end-edge-to-text)`, if not set.",
+ "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": {
+ "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`.
Defaults to `var(--spectrum-combobox-border-width)`, if not set.",
+ "control": "text",
+ "category": "Modifier"
+ },
+ "mod-combobox-border-color-default": {
+ "description": "Defined in `.spectrum-Combobox-input:focus, .spectrum-Combobox-textfield.is-focused .spectrum-Combobox-input`, `.spectrum-Combobox-textfield.is-keyboardFocused .spectrum-Combobox-input`, `.spectrum-Combobox-input:focus:hover, .spectrum-Combobox-textfield.is-focused .spectrum-Combobox-input:hover`.
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": {
+ "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": {
+ "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": {
+ "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": {
+ "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": {
+ "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-radius": {
+ "description": "Used by `--mod-textfield-corner-radius`.
Defaults to `var(--spectrum-combobox-border-radius)`, if not set.",
+ "control": "text",
+ "category": "Modifier"
+ },
+ "mod-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": {
+ "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": {
+ "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": {
+ "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": {
+ "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-inline-size": {
+ "description": "Used by `.spectrum-Combobox`.
Defaults to `var(--spectrum-combobox-inline-size)`, if not set.",
+ "control": "text",
+ "category": "Modifier"
+ },
+ "mod-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-min-inline-size": {
+ "description": "Used by `.spectrum-Combobox .spectrum-Combobox-content, .spectrum-Combobox .spectrum-Combobox-label`.
Defaults to `var(--spectrum-combobox-min-inline-size)`, if not set.",
+ "control": "text",
+ "category": "Modifier"
+ },
+ "mod-combobox-readonly-border-color-disabled": {
+ "description": "Used by `.spectrum-Combobox.is-readOnly.is-disabled .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": {
+ "description": "Used by `.spectrum-Combobox-progress-circle`, `.spectrum-Combobox-progress-circle:dir(rtl)`, `.spectrum-Combobox-textfield.is-invalid .spectrum-Combobox-input, .spectrum-Combobox-textfield.is-loading .spectrum-Combobox-input`, `.spectrum-Combobox-textfield.is-invalid .spectrum-Textfield-validationIcon`.
Defaults to `var(--spectrum-combobox-spacing-inline-icon-to-button)`, if not set.",
+ "control": "text",
+ "category": "Modifier"
+ },
+ "mod-combobox-button-width": {
+ "description": "Used by `.spectrum-Combobox-progress-circle`, `.spectrum-Combobox-progress-circle:dir(rtl)`, `.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`.
Defaults to `var(--spectrum-combobox-button-width)`, if not set.",
+ "control": "text",
+ "category": "Modifier"
+ },
+ "mod-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-icon": {
+ "description": "Used by `.spectrum-Combobox-progress-circle`, `.spectrum-Combobox-textfield.is-invalid .spectrum-Textfield-validationIcon`.
Defaults to `var(--spectrum-combobox-block-spacing-edge-to-icon)`, if not set.",
+ "control": "text",
+ "category": "Modifier"
+ },
+ "mod-combobox-spacing-inline-icon-to-text": {
+ "description": "Used by `.spectrum-Combobox-progress-circle`, `.spectrum-Combobox-input`, `.spectrum-Combobox-textfield.is-invalid .spectrum-Textfield-validationIcon`.
Defaults to `var(--spectrum-combobox-spacing-inline-icon-to-text)`, if not set.",
+ "control": "text",
+ "category": "Modifier"
+ },
+ "mod-combobox-block-size": {
+ "description": "Used by `.spectrum-Combobox-content`.
Defaults to `var(--spectrum-combobox-block-size)`, if not set.",
+ "control": "text",
+ "category": "Modifier"
+ },
+ "mod-combobox-textfield-background-color": {
+ "description": "Used by `.spectrum-Combobox-input`.
Defaults to `var(--spectrum-combobox-background-color-default)`, if not set.",
+ "control": "color",
+ "category": "Modifier"
+ },
+ "mod-combobox-spacing-inline-start-edge-to-text": {
+ "description": "Used by `.spectrum-Combobox-input`.
Defaults to `var(--spectrum-combobox-spacing-inline-start-edge-to-text)`, if not set.",
+ "control": "text",
+ "category": "Modifier"
+ },
+ "mod-combobox-line-height": {
+ "description": "Defined in `.spectrum-Combobox-input:lang(ja), .spectrum-Combobox-input:lang(ko), .spectrum-Combobox-input:lang(zh)`.
Used by `.spectrum-Combobox-input`.
Defaults to `var(--spectrum-combobox-block-size)`, 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-key-focus": {
+ "description": "Used by `--mod-textfield-background-color`.",
+ "control": "color",
+ "category": "Modifier"
+ },
+ "mod-combobox-icon-size": {
+ "description": "Used by `.spectrum-Combobox-textfield.is-invalid .spectrum-Combobox-input, .spectrum-Combobox-textfield.is-loading .spectrum-Combobox-input`, `.spectrum-Combobox-textfield.is-invalid .spectrum-Textfield-validationIcon`.
Defaults to `var(--spectrum-combobox-icon-size)`, if not set.",
+ "control": "text",
+ "category": "Modifier"
+ },
+ "mod-combobox-spacing-alert-icon-to-text": {
+ "description": "Used by `.spectrum-Combobox-textfield.is-invalid .spectrum-Combobox-input, .spectrum-Combobox-textfield.is-loading .spectrum-Combobox-input`.
Defaults to `var(--spectrum-combobox-spacing-inline-icon-to-text)`, if not set.",
+ "control": "text",
+ "category": "Modifier"
+ },
+ "mod-combobox-line-height-cjk": {
+ "description": "Used by `--mod-combobox-line-height`.
Defaults to `var(--spectrum-combobox-line-height-cjk)`, if not set.",
+ "control": "text",
+ "category": "Modifier"
+ },
+ "mod-combobox-background-color-focus-hover": {
+ "description": "Used by `--mod-textfield-background-color`.",
+ "control": "color",
+ "category": "Modifier"
+ },
+ "mod-combobox-spacing-to-help-text": {
+ "description": "Used by `.spectrum-Combobox-helptext`.
Defaults to `var(--spectrum-combobox-spacing-to-help-text)`, if not set.",
+ "control": "text",
+ "category": "Modifier"
+ },
+ "mod-combobox-spacing-side-label-to-field": {
+ "description": "Used by `.spectrum-Combobox--sideLabel .spectrum-Combobox-label`.
Defaults to `var(--spectrum-combobox-spacing-side-label-to-field)`, if not set.",
+ "control": "text",
+ "category": "Modifier"
+ }
+ },
+ "component": {
+ "spectrum-combobox-block-size": {
+ "value": "48px",
+ "description": "Defined in `.spectrum-Combobox`, `.spectrum-Combobox--sizeS`, `.spectrum-Combobox--sizeL`, `.spectrum-Combobox--sizeXL`.
Used by `--spectrum-combobox-min-inline-size`, `--spectrum-combobox-button-width`, `.spectrum-Combobox-content`, `.spectrum-Combobox-input`.
Defaults to `var(--spectrum-component-height-300)`, if not set.",
+ "control": "text",
+ "category": "Component"
+ },
+ "spectrum-combobox-icon-size": {
+ "value": "26px",
+ "description": "Defined in `.spectrum-Combobox`, `.spectrum-Combobox--sizeS`, `.spectrum-Combobox--sizeL`, `.spectrum-Combobox--sizeXL`.
Used by `.spectrum-Combobox-textfield.is-invalid .spectrum-Combobox-input, .spectrum-Combobox-textfield.is-loading .spectrum-Combobox-input`, `.spectrum-Combobox-textfield.is-invalid .spectrum-Textfield-validationIcon`.
Defaults to `var(--spectrum-workflow-icon-size-300)`, if not set.",
+ "control": "text",
+ "category": "Component"
+ },
+ "spectrum-combobox-font-size": {
+ "value": "18px",
+ "description": "Defined in `.spectrum-Combobox`, `.spectrum-Combobox--sizeS`, `.spectrum-Combobox--sizeL`, `.spectrum-Combobox--sizeXL`.
Used by `--mod-textfield-font-size`.
Defaults to `var(--spectrum-font-size-300)`, if not set.",
+ "control": "text",
+ "category": "Component"
+ },
+ "spectrum-combobox-line-height": {
+ "value": "1.3",
+ "description": "Defined in `.spectrum-Combobox`.
Used by `.spectrum-Combobox-input.spectrum-Combobox-autocomplete, .spectrum-Combobox-input:-internal-autofill-selected, .spectrum-Combobox-input:-webkit-autofill, .spectrum-Combobox-input:-webkit-autofill:active, .spectrum-Combobox-input:-webkit-autofill:focus`, `.spectrum-Combobox-input:-webkit-autofill:hover`.
Defaults to `var(--spectrum-line-height-100)`, if not set.",
+ "control": "text",
+ "category": "Component"
+ },
+ "spectrum-combobox-spacing-inline-icon-to-button": {
+ "value": "0px",
+ "description": "Defined in `.spectrum-Combobox`.
Used by `.spectrum-Combobox-progress-circle`, `.spectrum-Combobox-progress-circle:dir(rtl)`, `.spectrum-Combobox-textfield.is-invalid .spectrum-Combobox-input, .spectrum-Combobox-textfield.is-loading .spectrum-Combobox-input`, `.spectrum-Combobox-textfield.is-invalid .spectrum-Textfield-validationIcon`.
Defaults to `var(--spectrum-combo-box-visual-to-field-button)`, if not set.",
+ "control": "text",
+ "category": "Component"
+ },
+ "spectrum-combo-box-visual-to-field-button": {
+ "value": "0px",
+ "description": "Used by `--spectrum-combobox-spacing-inline-icon-to-button`.",
+ "control": "text",
+ "category": "Component"
+ },
+ "spectrum-combobox-block-spacing-edge-to-progress-circle": {
+ "value": "11px",
+ "description": "Defined in `.spectrum-Combobox`, `.spectrum-Combobox--sizeS`, `.spectrum-Combobox--sizeL`, `.spectrum-Combobox--sizeXL`.
Used by `.spectrum-Combobox-progress-circle`.
Defaults to `var(--spectrum-field-top-to-progress-circle-extra-large)`, if not set.",
+ "control": "text",
+ "category": "Component"
+ },
+ "spectrum-combobox-block-spacing-edge-to-icon": {
+ "value": "11px",
+ "description": "Defined in `.spectrum-Combobox`, `.spectrum-Combobox--sizeS`, `.spectrum-Combobox--sizeL`, `.spectrum-Combobox--sizeXL`.
Used by `.spectrum-Combobox-progress-circle`, `.spectrum-Combobox-textfield.is-invalid .spectrum-Textfield-validationIcon`.
Defaults to `var(--spectrum-component-top-to-workflow-icon-300)`, if not set.",
+ "control": "text",
+ "category": "Component"
+ },
+ "spectrum-combobox-spacing-block-start-edge-to-text": {
+ "value": "12px",
+ "description": "Defined in `.spectrum-Combobox`, `.spectrum-Combobox--sizeS`, `.spectrum-Combobox--sizeL`, `.spectrum-Combobox--sizeXL`.
Used by `--mod-textfield-spacing-block-start`.
Defaults to `var(--spectrum-component-top-to-text-300)`, if not set.",
+ "control": "text",
+ "category": "Component"
+ },
+ "spectrum-combobox-spacing-block-end-edge-to-text": {
+ "value": "14px",
+ "description": "Defined in `.spectrum-Combobox`, `.spectrum-Combobox--sizeS`, `.spectrum-Combobox--sizeL`, `.spectrum-Combobox--sizeXL`.
Used by `--mod-textfield-spacing-block-end`.
Defaults to `var(--spectrum-component-bottom-to-text-300)`, if not set.",
+ "control": "text",
+ "category": "Component"
+ },
+ "spectrum-combobox-spacing-inline-start-edge-to-text": {
+ "value": "18px",
+ "description": "Defined in `.spectrum-Combobox`, `.spectrum-Combobox--sizeS`, `.spectrum-Combobox--sizeL`, `.spectrum-Combobox--sizeXL`.
Used by `.spectrum-Combobox-input`.
Defaults to `var(--spectrum-component-edge-to-text-300)`, if not set.",
+ "control": "text",
+ "category": "Component"
+ },
+ "spectrum-combobox-spacing-inline-icon-to-text": {
+ "value": "8px",
+ "description": "Defined in `.spectrum-Combobox`, `.spectrum-Combobox--sizeS`, `.spectrum-Combobox--sizeL`, `.spectrum-Combobox--sizeXL`.
Used by `.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`.
Defaults to `var(--spectrum-text-to-visual-300)`, if not set.",
+ "control": "text",
+ "category": "Component"
+ },
+ "spectrum-combobox-spacing-to-help-text": {
+ "value": "0px",
+ "description": "Defined in `.spectrum-Combobox`.
Used by `.spectrum-Combobox-helptext`.
Defaults to `var(--spectrum-help-text-to-component)`, if not set.",
+ "control": "text",
+ "category": "Component"
+ },
+ "spectrum-combobox-inline-size": {
+ "value": "var(--spectrum-field-default-width-extra-large)",
+ "description": "Defined in `.spectrum-Combobox`, `.spectrum-Combobox--sizeS`, `.spectrum-Combobox--sizeL`, `.spectrum-Combobox--sizeXL`.
Used by `.spectrum-Combobox`.
Defaults to `var(--spectrum-field-width-extra-large)`, if not set.",
+ "control": "text",
+ "category": "Component"
+ },
+ "spectrum-combobox-min-inline-size": {
+ "value": "calc(var(--spectrum-combo-box-minimum-width-multiplier) * var(--spectrum-combobox-block-size))",
+ "description": "Defined in `.spectrum-Combobox`.
Used by `.spectrum-Combobox .spectrum-Combobox-content, .spectrum-Combobox .spectrum-Combobox-label`.
Defaults to `calc(var(--spectrum-combo-box-minimum-width-multiplier) * var(--spectrum-combobox-block-size))`, if not set.",
+ "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": {
+ "value": "var(--spectrum-combobox-block-size)",
+ "description": "Defined in `.spectrum-Combobox`.
Used by `.spectrum-Combobox-progress-circle`, `.spectrum-Combobox-progress-circle:dir(rtl)`, `.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`.
Defaults to `var(--spectrum-combobox-block-size)`, if not set.",
+ "control": "text",
+ "category": "Component"
+ },
+ "spectrum-combobox-focus-indicator-thickness": {
+ "value": "2px",
+ "description": "Defined in `.spectrum-Combobox`.
Used by `--mod-textfield-focus-indicator-width`.
Defaults to `var(--spectrum-focus-indicator-thickness)`, if not set.",
+ "control": "text",
+ "category": "Component"
+ },
+ "spectrum-combobox-focus-indicator-gap": {
+ "value": "2px",
+ "description": "Defined in `.spectrum-Combobox`.
Used by `--mod-textfield-focus-indicator-gap`.
Defaults to `var(--spectrum-focus-indicator-gap)`, if not set.",
+ "control": "text",
+ "category": "Component"
+ },
+ "spectrum-combobox-focus-indicator-color": {
+ "value": "var(--spectrum-blue-800)",
+ "description": "Defined in `.spectrum-Combobox`.
Used by `--mod-textfield-focus-indicator-color`.
Defaults to `var(--spectrum-focus-indicator-color)`, if not set.",
+ "control": "color",
+ "category": "Component"
+ },
+ "spectrum-combobox-border-radius": {
+ "value": "10px",
+ "description": "Defined in `.spectrum-Combobox`, `.spectrum-Combobox--sizeS`, `.spectrum-Combobox--sizeL`, `.spectrum-Combobox--sizeXL`.
Used by `--mod-textfield-corner-radius`.
Defaults to `var(--spectrum-corner-radius-medium-size-extra-large)`, if not set.",
+ "control": "text",
+ "category": "Component"
+ },
+ "spectrum-combobox-border-width": {
+ "value": "2px",
+ "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`.
Defaults to `var(--spectrum-border-width-200)`, if not set.",
+ "control": "text",
+ "category": "Component"
+ },
+ "spectrum-combobox-spacing-label-to-combobox": {
+ "value": "0px",
+ "description": "Defined in `.spectrum-Combobox`.
Used by `.spectrum-Combobox`.
Defaults to `var(--spectrum-field-label-to-component)`, if not set.",
+ "control": "text",
+ "category": "Component"
+ },
+ "spectrum-combobox-spacing-side-label-to-field": {
+ "value": "12px",
+ "description": "Defined in `.spectrum-Combobox`.
Used by `.spectrum-Combobox--sideLabel .spectrum-Combobox-label`.
Defaults to `var(--spectrum-spacing-200)`, if not set.",
+ "control": "text",
+ "category": "Component"
+ },
+ "spectrum-combobox-font-style": {
+ "value": "normal",
+ "description": "Defined in `.spectrum-Combobox`.
Used by `--mod-textfield-font-style`.
Defaults to `var(--spectrum-default-font-style)`, if not set.",
+ "control": "text",
+ "category": "Component"
+ },
+ "spectrum-combobox-font-weight": {
+ "value": "400",
+ "description": "Defined in `.spectrum-Combobox`.
Used by `--mod-textfield-font-weight`.
Defaults to `var(--spectrum-regular-font-weight)`, if not set.",
+ "control": "text",
+ "category": "Component"
+ },
+ "spectrum-combobox-line-height-cjk": {
+ "value": "1.5",
+ "description": "Defined in `.spectrum-Combobox`.
Used by `--mod-combobox-line-height`.
Defaults to `var(--spectrum-cjk-line-height-100)`, if not set.",
+ "control": "text",
+ "category": "Component"
+ },
+ "spectrum-combobox-background-color-disabled": {
+ "value": "light-dark(rgb(255, 255, 255), rgb(17, 17, 17))",
+ "description": "Defined in `.spectrum-Combobox`.
Used by `--mod-textfield-background-color-disabled`.
Defaults to `var(--spectrum-gray-25)`, if not set.",
+ "control": "color",
+ "category": "Component"
+ },
+ "spectrum-combobox-background-color-default": {
+ "value": "light-dark(rgb(255, 255, 255), rgb(17, 17, 17))",
+ "description": "Defined in `.spectrum-Combobox`.
Used by `--spectrum-combobox-readonly-input-background-color`, `.spectrum-Combobox-input`, `.spectrum-Combobox-input.spectrum-Combobox-autocomplete, .spectrum-Combobox-input:-internal-autofill-selected, .spectrum-Combobox-input:-webkit-autofill, .spectrum-Combobox-input:-webkit-autofill:active, .spectrum-Combobox-input:-webkit-autofill:focus`, `.spectrum-Combobox-input:-webkit-autofill:hover`.
Defaults to `var(--spectrum-gray-25)`, if not set.",
+ "control": "color",
+ "category": "Component"
+ },
+ "spectrum-combobox-border-color-default": {
+ "value": "light-dark(rgb(218, 218, 218), rgb(57, 57, 57))",
+ "description": "Defined in `.spectrum-Combobox`.
Used by `--mod-textfield-border-color`, `--mod-picker-button-border-color`, `--spectrum-combobox-readonly-input-border-color`, `.spectrum-Combobox-input.spectrum-Combobox-autocomplete, .spectrum-Combobox-input:-internal-autofill-selected, .spectrum-Combobox-input:-webkit-autofill, .spectrum-Combobox-input:-webkit-autofill:active, .spectrum-Combobox-input:-webkit-autofill:focus`, `.spectrum-Combobox-input:-webkit-autofill:hover`.
Defaults to `var(--spectrum-gray-300)`, if not set.",
+ "control": "color",
+ "category": "Component"
+ },
+ "spectrum-combobox-border-color-hover": {
+ "value": "light-dark(rgb(198, 198, 198), rgb(68, 68, 68))",
+ "description": "Defined in `.spectrum-Combobox`.
Used by `--mod-textfield-border-color-hover`, `--mod-picker-button-border-color`.
Defaults to `var(--spectrum-gray-400)`, if not set.",
+ "control": "color",
+ "category": "Component"
+ },
+ "spectrum-combobox-border-color-focus": {
+ "value": "light-dark(rgb(41, 41, 41), rgb(219, 219, 219))",
+ "description": "Defined in `.spectrum-Combobox`.
Used by `--mod-textfield-border-color-focus`, `--mod-picker-button-border-color`, `--mod-combobox-border-color-default`.
Defaults to `var(--spectrum-gray-800)`, if not set.",
+ "control": "color",
+ "category": "Component"
+ },
+ "spectrum-combobox-border-color-focus-hover": {
+ "value": "light-dark(rgb(19, 19, 19), rgb(242, 242, 242))",
+ "description": "Defined in `.spectrum-Combobox`.
Used by `--mod-textfield-border-color-focus-hover`, `--mod-picker-button-border-color`, `--mod-combobox-border-color-default`.
Defaults to `var(--spectrum-gray-900)`, if not set.",
+ "control": "color",
+ "category": "Component"
+ },
+ "spectrum-combobox-border-color-key-focus": {
+ "value": "light-dark(rgb(41, 41, 41), rgb(219, 219, 219))",
+ "description": "Defined in `.spectrum-Combobox`.
Used by `--mod-textfield-border-color-keyboard-focus`, `--mod-picker-button-border-color`, `--mod-combobox-border-color-default`.
Defaults to `var(--spectrum-gray-800)`, if not set.",
+ "control": "color",
+ "category": "Component"
+ },
+ "spectrum-combobox-border-color-disabled": {
+ "value": "var(--spectrum-gray-300)",
+ "description": "Defined in `.spectrum-Combobox`.
Used by `--mod-textfield-border-color-disabled`, `--mod-picker-button-border-color-disabled`.
Defaults to `var(--spectrum-disabled-border-color)`, if not set.",
+ "control": "color",
+ "category": "Component"
+ },
+ "spectrum-combobox-border-color-invalid-default": {
+ "value": "var(--spectrum-negative-color-900)",
+ "description": "Defined in `.spectrum-Combobox`.
Used by `--mod-textfield-border-color-invalid-default`, `--mod-picker-button-border-color`.
Defaults to `var(--spectrum-negative-border-color-default)`, if not set.",
+ "control": "color",
+ "category": "Component"
+ },
+ "spectrum-combobox-border-color-invalid-hover": {
+ "value": "var(--spectrum-negative-color-1000)",
+ "description": "Defined in `.spectrum-Combobox`.
Used by `--mod-textfield-border-color-invalid-hover`, `--mod-picker-button-border-color`.
Defaults to `var(--spectrum-negative-border-color-hover)`, if not set.",
+ "control": "color",
+ "category": "Component"
+ },
+ "spectrum-combobox-border-color-invalid-focus": {
+ "value": "var(--spectrum-negative-color-1000)",
+ "description": "Defined in `.spectrum-Combobox`.
Used by `--mod-textfield-border-color-invalid-focus`, `--mod-picker-button-border-color`.
Defaults to `var(--spectrum-negative-border-color-focus)`, if not set.",
+ "control": "color",
+ "category": "Component"
+ },
+ "spectrum-combobox-border-color-invalid-focus-hover": {
+ "value": "var(--spectrum-negative-border-color-down)",
+ "description": "Defined in `.spectrum-Combobox`.
Used by `--mod-textfield-border-color-invalid-focus-hover`, `--mod-picker-button-border-color`.
Defaults to `var(--spectrum-negative-border-color-focus-hover)`, if not set.",
+ "control": "color",
+ "category": "Component"
+ },
+ "spectrum-combobox-border-color-invalid-key-focus": {
+ "value": "var(--spectrum-negative-color-1000)",
+ "description": "Defined in `.spectrum-Combobox`.
Used by `--mod-textfield-border-color-invalid-keyboard-focus`, `--mod-picker-button-border-color`.
Defaults to `var(--spectrum-negative-border-color-key-focus)`, if not set.",
+ "control": "color",
+ "category": "Component"
+ },
+ "spectrum-combobox-background-color-autofill": {
+ "value": "rgb(var(--spectrum-blue-900-rgb), 0.3)",
+ "description": "Defined in `.spectrum-Combobox`.
Used by `.spectrum-Combobox-input.spectrum-Combobox-autocomplete::selection, .spectrum-Combobox-input:-internal-autofill-selected::selection, .spectrum-Combobox-input:-webkit-autofill::selection, .spectrum-Combobox-input:-webkit-autofill:active::selection, .spectrum-Combobox-input:-webkit-autofill:focus::selection`, `.spectrum-Combobox-input:-webkit-autofill:hover::selection`.
Defaults to `rgb(var(--spectrum-blue-900-rgb), 0.3)`, if not set.",
+ "control": "color",
+ "category": "Component"
+ },
+ "spectrum-combobox-readonly-input-background-color": {
+ "value": "var(--spectrum-combobox-background-color-default)",
+ "description": "Defined in `.spectrum-Combobox`.
Used by `.spectrum-Combobox.is-readOnly .spectrum-Combobox-input:read-only`.
Defaults to `var(--spectrum-combobox-background-color-default)`, if not set.",
+ "control": "color",
+ "category": "Component"
+ },
+ "spectrum-combobox-readonly-border-color-invalid-default": {
+ "value": "var(--spectrum-negative-color-900)",
+ "description": "Defined in `.spectrum-Combobox`.
Used by `.spectrum-Combobox.is-readOnly.is-invalid .spectrum-Combobox-input:read-only`.
Defaults to `var(--spectrum-negative-border-color-default)`, if not set.",
+ "control": "color",
+ "category": "Component"
+ },
+ "spectrum-combobox-readonly-background-color-disabled": {
+ "value": "var(--spectrum-gray-100)",
+ "description": "Defined in `.spectrum-Combobox`.
Used by `.spectrum-Combobox.is-readOnly.is-disabled .spectrum-Combobox-input:read-only`, `.spectrum-Combobox.is-readOnly.is-disabled .spectrum-Combobox-input:read-only:hover`.
Defaults to `var(--spectrum-disabled-background-color)`, if not set.",
+ "control": "color",
+ "category": "Component"
+ },
+ "spectrum-combobox-readonly-text-color-disabled": {
+ "value": "var(--spectrum-gray-400)",
+ "description": "Defined in `.spectrum-Combobox`.
Used by `.spectrum-Combobox.is-readOnly.is-disabled .spectrum-Combobox-input:read-only`.
Defaults to `var(--spectrum-disabled-content-color)`, if not set.",
+ "control": "color",
+ "category": "Component"
+ },
+ "spectrum-combobox-readonly-border-color-disabled": {
+ "value": "var(--spectrum-gray-300)",
+ "description": "Defined in `.spectrum-Combobox`.
Used by `.spectrum-Combobox.is-readOnly.is-disabled .spectrum-Combobox-input:read-only`.
Defaults to `var(--spectrum-disabled-border-color)`, if not set.",
+ "control": "color",
+ "category": "Component"
+ },
+ "spectrum-combobox-readonly-input-border-color": {
+ "value": "var(--spectrum-combobox-border-color-default)",
+ "description": "Defined in `.spectrum-Combobox`.
Used by `.spectrum-Combobox.is-readOnly .spectrum-Combobox-input:read-only`.
Defaults to `var(--spectrum-combobox-border-color-default)`, if not set.",
+ "control": "color",
+ "category": "Component"
+ }
+ },
+ "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-line-height-100": {
+ "value": "1.3",
+ "description": "Used by `--spectrum-combobox-line-height`.",
+ "control": "text",
+ "category": "Global"
+ },
+ "spectrum-field-top-to-progress-circle-medium": {
+ "value": "6px",
+ "description": "Used by `--spectrum-combobox-block-spacing-edge-to-progress-circle`.",
+ "control": "text",
+ "category": "Global"
+ },
+ "spectrum-component-top-to-workflow-icon-100": {
+ "value": "6px",
+ "description": "Used by `--spectrum-combobox-block-spacing-edge-to-icon`.",
+ "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`.",
+ "control": "text",
+ "category": "Global"
+ },
+ "spectrum-text-to-visual-100": {
+ "value": "6px",
+ "description": "Used by `--spectrum-combobox-spacing-inline-icon-to-text`.",
+ "control": "text",
+ "category": "Global"
+ },
+ "spectrum-help-text-to-component": {
+ "value": "0px",
+ "description": "Used by `--spectrum-combobox-spacing-to-help-text`.",
+ "control": "text",
+ "category": "Global"
+ },
+ "spectrum-field-width-medium": {
+ "value": "var(--spectrum-field-default-width-medium)",
+ "description": "Used by `--spectrum-combobox-inline-size`.",
+ "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-medium-size-medium": {
+ "value": "8px",
+ "description": "Used by `--spectrum-combobox-border-radius`.",
+ "control": "text",
+ "category": "Global"
+ },
+ "spectrum-border-width-200": {
+ "value": "2px",
+ "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-spacing-200": {
+ "value": "12px",
+ "description": "Used by `--spectrum-combobox-spacing-side-label-to-field`.",
+ "control": "text",
+ "category": "Global"
+ },
+ "spectrum-default-font-style": {
+ "value": "normal",
+ "description": "Used by `--spectrum-combobox-font-style`.",
+ "control": "text",
+ "category": "Global"
+ },
+ "spectrum-regular-font-weight": {
+ "value": "400",
+ "description": "Used by `--spectrum-combobox-font-weight`.",
+ "control": "text",
+ "category": "Global"
+ },
+ "spectrum-cjk-line-height-100": {
+ "value": "1.5",
+ "description": "Used by `--spectrum-combobox-line-height-cjk`.",
+ "control": "text",
+ "category": "Global"
+ },
+ "spectrum-gray-25": {
+ "value": "light-dark(rgb(255, 255, 255), rgb(17, 17, 17))",
+ "description": "Used by `--spectrum-combobox-background-color-disabled`, `--spectrum-combobox-background-color-default`.",
+ "control": "text",
+ "category": "Global"
+ },
+ "spectrum-gray-300": {
+ "value": "light-dark(rgb(218, 218, 218), rgb(57, 57, 57))",
+ "description": "Used by `--spectrum-combobox-border-color-default`.",
+ "control": "text",
+ "category": "Global"
+ },
+ "spectrum-gray-400": {
+ "value": "light-dark(rgb(198, 198, 198), rgb(68, 68, 68))",
+ "description": "Used by `--spectrum-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 `--spectrum-combobox-border-color-focus`, `--spectrum-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 `--spectrum-combobox-border-color-focus-hover`.",
+ "control": "text",
+ "category": "Global"
+ },
+ "spectrum-disabled-border-color": {
+ "value": "var(--spectrum-gray-300)",
+ "description": "Used by `--spectrum-combobox-border-color-disabled`, `--spectrum-combobox-readonly-border-color-disabled`.",
+ "control": "color",
+ "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-blue-900-rgb": {
+ "description": "Used by `--spectrum-combobox-background-color-autofill`.",
+ "control": "text",
+ "category": "Global"
+ },
+ "spectrum-component-to-menu-medium": {
+ "value": "6px",
+ "description": "Used by `--mod-combobox-popover-animation-distance`.",
+ "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-component-top-to-workflow-icon-75": {
+ "value": "4px",
+ "description": "Used by `--spectrum-combobox-block-spacing-edge-to-icon`.",
+ "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": "9px",
+ "description": "Used by `--spectrum-combobox-spacing-inline-start-edge-to-text`.",
+ "control": "text",
+ "category": "Global"
+ },
+ "spectrum-text-to-visual-75": {
+ "value": "5px",
+ "description": "Used by `--spectrum-combobox-spacing-inline-icon-to-text`.",
+ "control": "text",
+ "category": "Global"
+ },
+ "spectrum-field-width-small": {
+ "value": "var(--spectrum-field-default-width-small)",
+ "description": "Used by `--spectrum-combobox-inline-size`.",
+ "control": "text",
+ "category": "Global"
+ },
+ "spectrum-corner-radius-medium-size-small": {
+ "value": "7px",
+ "description": "Used by `--spectrum-combobox-border-radius`.",
+ "control": "text",
+ "category": "Global"
+ },
+ "spectrum-component-to-menu-small": {
+ "value": "6px",
+ "description": "Used by `--mod-combobox-popover-animation-distance`.",
+ "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": "9px",
+ "description": "Used by `--spectrum-combobox-block-spacing-edge-to-progress-circle`.",
+ "control": "text",
+ "category": "Global"
+ },
+ "spectrum-component-top-to-workflow-icon-200": {
+ "value": "9px",
+ "description": "Used by `--spectrum-combobox-block-spacing-edge-to-icon`.",
+ "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`.",
+ "control": "text",
+ "category": "Global"
+ },
+ "spectrum-text-to-visual-200": {
+ "value": "7px",
+ "description": "Used by `--spectrum-combobox-spacing-inline-icon-to-text`.",
+ "control": "text",
+ "category": "Global"
+ },
+ "spectrum-field-width-large": {
+ "value": "var(--spectrum-field-default-width-large)",
+ "description": "Used by `--spectrum-combobox-inline-size`.",
+ "control": "text",
+ "category": "Global"
+ },
+ "spectrum-corner-radius-medium-size-large": {
+ "value": "9px",
+ "description": "Used by `--spectrum-combobox-border-radius`.",
+ "control": "text",
+ "category": "Global"
+ },
+ "spectrum-component-to-menu-large": {
+ "value": "7px",
+ "description": "Used by `--mod-combobox-popover-animation-distance`.",
+ "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": "11px",
+ "description": "Used by `--spectrum-combobox-block-spacing-edge-to-progress-circle`.",
+ "control": "text",
+ "category": "Global"
+ },
+ "spectrum-component-top-to-workflow-icon-300": {
+ "value": "11px",
+ "description": "Used by `--spectrum-combobox-block-spacing-edge-to-icon`.",
+ "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": "18px",
+ "description": "Used by `--spectrum-combobox-spacing-inline-start-edge-to-text`.",
+ "control": "text",
+ "category": "Global"
+ },
+ "spectrum-text-to-visual-300": {
+ "value": "8px",
+ "description": "Used by `--spectrum-combobox-spacing-inline-icon-to-text`.",
+ "control": "text",
+ "category": "Global"
+ },
+ "spectrum-field-width-extra-large": {
+ "value": "var(--spectrum-field-default-width-extra-large)",
+ "description": "Used by `--spectrum-combobox-inline-size`.",
+ "control": "text",
+ "category": "Global"
+ },
+ "spectrum-corner-radius-medium-size-extra-large": {
+ "value": "10px",
+ "description": "Used by `--spectrum-combobox-border-radius`.",
+ "control": "text",
+ "category": "Global"
+ },
+ "spectrum-component-to-menu-extra-large": {
+ "value": "8px",
+ "description": "Used by `--mod-combobox-popover-animation-distance`.",
+ "control": "text",
+ "category": "Global"
+ },
+ "spectrum-neutral-content-color-default": {
+ "value": "var(--spectrum-gray-800)",
+ "description": "Used by `.spectrum-Combobox-input.spectrum-Combobox-autocomplete, .spectrum-Combobox-input:-internal-autofill-selected, .spectrum-Combobox-input:-webkit-autofill, .spectrum-Combobox-input:-webkit-autofill:active, .spectrum-Combobox-input:-webkit-autofill:focus`, `.spectrum-Combobox-input:-webkit-autofill:hover`.",
+ "control": "color",
+ "category": "Global"
+ }
+ },
+ "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-font-size": {
+ "category": "Passthrough"
+ },
+ "mod-textfield-font-style": {
+ "category": "Passthrough"
+ },
+ "mod-textfield-spacing-block-start": {
+ "category": "Passthrough"
+ },
+ "mod-textfield-spacing-block-end": {
+ "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-corner-radius": {
+ "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-divider-inline-minimum-size": {
+ "category": "Passthrough"
+ },
+ "mod-popover-animation-distance": {
+ "category": "Passthrough"
+ }
+ },
+ "high-contrast": {
+ "highcontrast-combobox-background-color-default": {
+ "value": "var(--spectrum-combobox-background-color-default)",
+ "description": "Defined in `.spectrum-Combobox`.
Used by `.spectrum-Combobox.is-readOnly .spectrum-Combobox-input:read-only`, `.spectrum-Combobox-input`, `.spectrum-Combobox-input.spectrum-Combobox-autocomplete, .spectrum-Combobox-input:-internal-autofill-selected, .spectrum-Combobox-input:-webkit-autofill, .spectrum-Combobox-input:-webkit-autofill:active, .spectrum-Combobox-input:-webkit-autofill:focus`, `.spectrum-Combobox-input:-webkit-autofill:hover`.
Defaults to `var(--spectrum-combobox-background-color-default)`, if not set.",
+ "control": "color"
+ },
+ "highcontrast-combobox-readonly-border-color": {
+ "value": "var(--spectrum-combobox-readonly-input-border-color)",
+ "description": "Defined in `.spectrum-Combobox`.
Used by `.spectrum-Combobox.is-readOnly .spectrum-Combobox-input:read-only`.
Defaults to `var(--spectrum-combobox-readonly-input-border-color)`, 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 `.spectrum-Combobox.is-readOnly.is-invalid .spectrum-Combobox-input:read-only`, `--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-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"
+ }
+ }
}
diff --git a/components/combobox/stories/combobox.stories.js b/components/combobox/stories/combobox.stories.js
index b1552e7264e..64d4a03560f 100644
--- a/components/combobox/stories/combobox.stories.js
+++ b/components/combobox/stories/combobox.stories.js
@@ -3,11 +3,13 @@ import { Sizes, withDownStateDimensionCapture } from "@spectrum-css/preview/deco
import { disableDefaultModes } from "@spectrum-css/preview/modes";
import { isDisabled, isFocused, isHovered, isInvalid, isKeyboardFocused, isLoading, isOpen, 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 { HelpTextTemplate, 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.
*
@@ -181,13 +183,17 @@ export default {
status: {
type: "migrated",
},
- tags: ["migrated"],
packageJson,
metadata,
+ cssprops: {
+ ...metadata.modifiers,
+ ...metadata.component,
+ },
},
decorators: [
withDownStateDimensionCapture,
],
+ tags: ["migrated"],
play: async ({ canvasElement }) => {
const canvas = within(canvasElement);
diff --git a/components/commons/package.json b/components/commons/package.json
index a6e1a1dbb29..614ccace802 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 a64ded05750..4a2ebd25e76 100644
--- a/components/contextualhelp/dist/metadata.json
+++ b/components/contextualhelp/dist/metadata.json
@@ -8,65 +8,293 @@
".spectrum-ContextualHelp-popover .spectrum-ContextualHelp-body",
".spectrum-ContextualHelp-popover .spectrum-ContextualHelp-heading"
],
- "modifiers": [
- "--mod-contextual-help-body-color",
- "--mod-contextual-help-body-line-height",
- "--mod-contextual-help-body-sans-serif-font-family",
- "--mod-contextual-help-body-sans-serif-font-style",
- "--mod-contextual-help-body-sans-serif-font-weight",
- "--mod-contextual-help-body-size",
- "--mod-contextual-help-content-spacing",
- "--mod-contextual-help-heading-size",
- "--mod-contextual-help-link-spacing",
- "--mod-contextual-help-min-inline-size",
- "--mod-contextual-help-padding",
- "--mod-contextual-help-popover-maximum-width",
- "--mod-contextual-help-title-color",
- "--mod-contextual-help-title-font-style",
- "--mod-contextual-help-title-font-weight",
- "--mod-contextual-help-title-line-height",
- "--mod-contextual-help-title-sans-serif-font-family"
- ],
- "component": [
- "--spectrum-contextual-help-body-color",
- "--spectrum-contextual-help-body-line-height",
- "--spectrum-contextual-help-body-sans-serif-font-family",
- "--spectrum-contextual-help-body-sans-serif-font-style",
- "--spectrum-contextual-help-body-sans-serif-font-weight",
- "--spectrum-contextual-help-body-size",
- "--spectrum-contextual-help-content-spacing",
- "--spectrum-contextual-help-link-spacing",
- "--spectrum-contextual-help-min-inline-size",
- "--spectrum-contextual-help-minimum-width",
- "--spectrum-contextual-help-padding",
- "--spectrum-contextual-help-title-color",
- "--spectrum-contextual-help-title-font-style",
- "--spectrum-contextual-help-title-font-weight",
- "--spectrum-contextual-help-title-line-height",
- "--spectrum-contextual-help-title-sans-serif-font-family",
- "--spectrum-contextual-help-title-size"
- ],
- "global": [
- "--spectrum-body-color",
- "--spectrum-body-sans-serif-font-style",
- "--spectrum-body-sans-serif-font-weight",
- "--spectrum-corner-radius-large-default",
- "--spectrum-line-height-200",
- "--spectrum-sans-font-family-stack",
- "--spectrum-spacing-100",
- "--spectrum-spacing-300",
- "--spectrum-spacing-400",
- "--spectrum-title-color",
- "--spectrum-title-line-height",
- "--spectrum-title-sans-serif-font-style",
- "--spectrum-title-sans-serif-font-weight"
- ],
- "passthroughs": [
- "--mod-popover-animation-distance",
- "--mod-popover-corner-radius"
- ],
- "high-contrast": [
- "--highcontrast-contextual-help-body-color",
- "--highcontrast-contextual-help-title-color"
- ]
+ "modifiers": {
+ "mod-contextual-help-min-inline-size": {
+ "description": "Used by `.spectrum-ContextualHelp`.
Defaults to `var(--spectrum-contextual-help-min-inline-size)`, if not set.",
+ "control": "text",
+ "category": "Modifier"
+ },
+ "mod-contextual-help-padding": {
+ "description": "Used by `.spectrum-ContextualHelp-popover`.
Defaults to `var(--spectrum-contextual-help-padding)`, if not set.",
+ "control": "text",
+ "category": "Modifier"
+ },
+ "mod-contextual-help-body-size": {
+ "description": "Used by `.spectrum-ContextualHelp-popover`, `.spectrum-ContextualHelp-popover .spectrum-ContextualHelp-body`.
Defaults to `var(--spectrum-contextual-help-body-size)`, if not set.",
+ "control": "text",
+ "category": "Modifier"
+ },
+ "mod-contextual-help-body-color": {
+ "description": "Used by `.spectrum-ContextualHelp-popover`, `.spectrum-ContextualHelp-popover .spectrum-ContextualHelp-body`.
Defaults to `var(--spectrum-contextual-help-body-color)`, if not set.",
+ "control": "color",
+ "category": "Modifier"
+ },
+ "mod-contextual-help-popover-maximum-width": {
+ "description": "Used by `.spectrum-ContextualHelp-popover`.",
+ "control": "text",
+ "category": "Modifier"
+ },
+ "mod-contextual-help-title-sans-serif-font-family": {
+ "description": "Used by `.spectrum-ContextualHelp-popover .spectrum-ContextualHelp-heading`.
Defaults to `var(--spectrum-contextual-help-title-sans-serif-font-family)`, if not set.",
+ "control": "text",
+ "category": "Modifier"
+ },
+ "mod-contextual-help-title-font-weight": {
+ "description": "Used by `.spectrum-ContextualHelp-popover .spectrum-ContextualHelp-heading`.
Defaults to `var(--spectrum-contextual-help-title-font-weight)`, if not set.",
+ "control": "text",
+ "category": "Modifier"
+ },
+ "mod-contextual-help-heading-size": {
+ "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-title-font-style": {
+ "description": "Used by `.spectrum-ContextualHelp-popover .spectrum-ContextualHelp-heading`.
Defaults to `var(--spectrum-contextual-help-title-font-style)`, if not set.",
+ "control": "text",
+ "category": "Modifier"
+ },
+ "mod-contextual-help-title-line-height": {
+ "description": "Used by `.spectrum-ContextualHelp-popover .spectrum-ContextualHelp-heading`.
Defaults to `var(--spectrum-contextual-help-title-line-height)`, if not set.",
+ "control": "text",
+ "category": "Modifier"
+ },
+ "mod-contextual-help-title-color": {
+ "description": "Used by `.spectrum-ContextualHelp-popover .spectrum-ContextualHelp-heading`.
Defaults to `var(--spectrum-contextual-help-title-color)`, if not set.",
+ "control": "color",
+ "category": "Modifier"
+ },
+ "mod-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-contextual-help-body-sans-serif-font-family": {
+ "description": "Used by `.spectrum-ContextualHelp-popover .spectrum-ContextualHelp-body`.
Defaults to `var(--spectrum-contextual-help-body-sans-serif-font-family)`, if not set.",
+ "control": "text",
+ "category": "Modifier"
+ },
+ "mod-contextual-help-body-sans-serif-font-weight": {
+ "description": "Used by `.spectrum-ContextualHelp-popover .spectrum-ContextualHelp-body`.
Defaults to `var(--spectrum-contextual-help-body-sans-serif-font-weight)`, if not set.",
+ "control": "text",
+ "category": "Modifier"
+ },
+ "mod-contextual-help-body-sans-serif-font-style": {
+ "description": "Used by `.spectrum-ContextualHelp-popover .spectrum-ContextualHelp-body`.
Defaults to `var(--spectrum-contextual-help-body-sans-serif-font-style)`, if not set.",
+ "control": "text",
+ "category": "Modifier"
+ },
+ "mod-contextual-help-body-line-height": {
+ "description": "Used by `.spectrum-ContextualHelp-popover .spectrum-ContextualHelp-body`.
Defaults to `var(--spectrum-contextual-help-body-line-height)`, if not set.",
+ "control": "text",
+ "category": "Modifier"
+ },
+ "mod-contextual-help-link-spacing": {
+ "description": "Used by `.spectrum-ContextualHelp-link`.
Defaults to `var(--spectrum-contextual-help-link-spacing)`, if not set.",
+ "control": "text",
+ "category": "Modifier"
+ }
+ },
+ "component": {
+ "spectrum-contextual-help-title-sans-serif-font-family": {
+ "value": "var(--spectrum-sans-font-family-stack)",
+ "description": "Defined in `.spectrum-ContextualHelp`.
Used by `.spectrum-ContextualHelp-popover .spectrum-ContextualHelp-heading`.
Defaults to `var(--spectrum-sans-font-family-stack)`, if not set.",
+ "control": "text",
+ "category": "Component"
+ },
+ "spectrum-contextual-help-title-font-weight": {
+ "value": "700",
+ "description": "Defined in `.spectrum-ContextualHelp`.
Used by `.spectrum-ContextualHelp-popover .spectrum-ContextualHelp-heading`.
Defaults to `var(--spectrum-title-sans-serif-font-weight)`, if not set.",
+ "control": "text",
+ "category": "Component"
+ },
+ "spectrum-contextual-help-title-font-style": {
+ "value": "normal",
+ "description": "Defined in `.spectrum-ContextualHelp`.
Used by `.spectrum-ContextualHelp-popover .spectrum-ContextualHelp-heading`.
Defaults to `var(--spectrum-title-sans-serif-font-style)`, if not set.",
+ "control": "text",
+ "category": "Component"
+ },
+ "spectrum-contextual-help-title-line-height": {
+ "value": "1.3",
+ "description": "Defined in `.spectrum-ContextualHelp`.
Used by `.spectrum-ContextualHelp-popover .spectrum-ContextualHelp-heading`.
Defaults to `var(--spectrum-title-line-height)`, if not set.",
+ "control": "text",
+ "category": "Component"
+ },
+ "spectrum-contextual-help-title-color": {
+ "value": "var(--spectrum-gray-900)",
+ "description": "Defined in `.spectrum-ContextualHelp`.
Used by `.spectrum-ContextualHelp-popover .spectrum-ContextualHelp-heading`.
Defaults to `var(--spectrum-title-color)`, if not set.",
+ "control": "color",
+ "category": "Component"
+ },
+ "spectrum-contextual-help-body-sans-serif-font-family": {
+ "value": "var(--spectrum-sans-font-family-stack)",
+ "description": "Defined in `.spectrum-ContextualHelp`.
Used by `.spectrum-ContextualHelp-popover .spectrum-ContextualHelp-body`.
Defaults to `var(--spectrum-sans-font-family-stack)`, if not set.",
+ "control": "text",
+ "category": "Component"
+ },
+ "spectrum-contextual-help-body-sans-serif-font-weight": {
+ "value": "400",
+ "description": "Defined in `.spectrum-ContextualHelp`.
Used by `.spectrum-ContextualHelp-popover .spectrum-ContextualHelp-body`.
Defaults to `var(--spectrum-body-sans-serif-font-weight)`, if not set.",
+ "control": "text",
+ "category": "Component"
+ },
+ "spectrum-contextual-help-body-sans-serif-font-style": {
+ "value": "normal",
+ "description": "Defined in `.spectrum-ContextualHelp`.
Used by `.spectrum-ContextualHelp-popover .spectrum-ContextualHelp-body`.
Defaults to `var(--spectrum-body-sans-serif-font-style)`, if not set.",
+ "control": "text",
+ "category": "Component"
+ },
+ "spectrum-contextual-help-body-line-height": {
+ "value": "1.5",
+ "description": "Defined in `.spectrum-ContextualHelp`.
Used by `.spectrum-ContextualHelp-popover .spectrum-ContextualHelp-body`.
Defaults to `var(--spectrum-line-height-200)`, if not set.",
+ "control": "text",
+ "category": "Component"
+ },
+ "spectrum-contextual-help-body-color": {
+ "value": "var(--spectrum-gray-800)",
+ "description": "Defined in `.spectrum-ContextualHelp`.
Used by `.spectrum-ContextualHelp-popover .spectrum-ContextualHelp-body`.
Defaults to `var(--spectrum-body-color)`, if not set.",
+ "control": "color",
+ "category": "Component"
+ },
+ "spectrum-contextual-help-min-inline-size": {
+ "value": "268px",
+ "description": "Defined in `.spectrum-ContextualHelp`.
Used by `.spectrum-ContextualHelp`.
Defaults to `var(--spectrum-contextual-help-minimum-width)`, if not set.",
+ "control": "text",
+ "category": "Component"
+ },
+ "spectrum-contextual-help-minimum-width": {
+ "value": "268px",
+ "description": "Used by `--spectrum-contextual-help-min-inline-size`.",
+ "control": "text",
+ "category": "Component"
+ },
+ "spectrum-contextual-help-link-spacing": {
+ "value": "16px",
+ "description": "Defined in `.spectrum-ContextualHelp`.
Used by `.spectrum-ContextualHelp-link`.
Defaults to `var(--spectrum-spacing-300)`, if not set.",
+ "control": "text",
+ "category": "Component"
+ },
+ "spectrum-contextual-help-padding": {
+ "value": "24px",
+ "description": "Defined in `.spectrum-ContextualHelp`.
Used by `.spectrum-ContextualHelp-popover`.
Defaults to `var(--spectrum-spacing-400)`, if not set.",
+ "control": "text",
+ "category": "Component"
+ },
+ "spectrum-contextual-help-body-size": {
+ "value": "var(--spectrum-contextual-help-body-font-size)",
+ "description": "Used by `.spectrum-ContextualHelp-popover`, `.spectrum-ContextualHelp-popover .spectrum-ContextualHelp-body`.",
+ "control": "text",
+ "category": "Component"
+ },
+ "spectrum-contextual-help-title-size": {
+ "value": "var(--spectrum-contextual-help-title-font-size)",
+ "description": "Used by `.spectrum-ContextualHelp-popover .spectrum-ContextualHelp-heading`.",
+ "control": "text",
+ "category": "Component"
+ },
+ "spectrum-contextual-help-content-spacing": {
+ "description": "Used by `.spectrum-ContextualHelp-popover .spectrum-ContextualHelp-heading`.",
+ "control": "text",
+ "category": "Component"
+ }
+ },
+ "global": {
+ "spectrum-sans-font-family-stack": {
+ "description": "Used by `--spectrum-contextual-help-title-sans-serif-font-family`, `--spectrum-contextual-help-body-sans-serif-font-family`.",
+ "control": "text",
+ "category": "Global"
+ },
+ "spectrum-title-sans-serif-font-weight": {
+ "value": "700",
+ "description": "Used by `--spectrum-contextual-help-title-font-weight`.",
+ "control": "text",
+ "category": "Global"
+ },
+ "spectrum-title-sans-serif-font-style": {
+ "value": "normal",
+ "description": "Used by `--spectrum-contextual-help-title-font-style`.",
+ "control": "text",
+ "category": "Global"
+ },
+ "spectrum-title-line-height": {
+ "value": "1.3",
+ "description": "Used by `--spectrum-contextual-help-title-line-height`.",
+ "control": "text",
+ "category": "Global"
+ },
+ "spectrum-title-color": {
+ "value": "var(--spectrum-gray-900)",
+ "description": "Used by `--spectrum-contextual-help-title-color`.",
+ "control": "color",
+ "category": "Global"
+ },
+ "spectrum-body-sans-serif-font-weight": {
+ "value": "400",
+ "description": "Used by `--spectrum-contextual-help-body-sans-serif-font-weight`.",
+ "control": "text",
+ "category": "Global"
+ },
+ "spectrum-body-sans-serif-font-style": {
+ "value": "normal",
+ "description": "Used by `--spectrum-contextual-help-body-sans-serif-font-style`.",
+ "control": "text",
+ "category": "Global"
+ },
+ "spectrum-line-height-200": {
+ "value": "1.5",
+ "description": "Used by `--spectrum-contextual-help-body-line-height`.",
+ "control": "text",
+ "category": "Global"
+ },
+ "spectrum-body-color": {
+ "value": "var(--spectrum-gray-800)",
+ "description": "Used by `--spectrum-contextual-help-body-color`, `.spectrum-ContextualHelp-popover`.",
+ "control": "color",
+ "category": "Global"
+ },
+ "spectrum-spacing-300": {
+ "value": "16px",
+ "description": "Used by `--spectrum-contextual-help-link-spacing`.",
+ "control": "text",
+ "category": "Global"
+ },
+ "spectrum-spacing-400": {
+ "value": "24px",
+ "description": "Used by `--spectrum-contextual-help-padding`.",
+ "control": "text",
+ "category": "Global"
+ },
+ "spectrum-spacing-100": {
+ "value": "8px",
+ "description": "Used by `--mod-popover-animation-distance`.",
+ "control": "text",
+ "category": "Global"
+ },
+ "spectrum-corner-radius-large-default": {
+ "value": "10px",
+ "description": "Used by `--mod-popover-corner-radius`.",
+ "control": "text",
+ "category": "Global"
+ }
+ },
+ "passthroughs": {
+ "mod-popover-animation-distance": {
+ "category": "Passthrough"
+ },
+ "mod-popover-corner-radius": {
+ "category": "Passthrough"
+ }
+ },
+ "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-title-color": {
+ "value": "var(--mod-contextual-help-title-color, var(--spectrum-contextual-help-title-color))",
+ "description": "Defined in `.spectrum-ContextualHelp`.
Used by `.spectrum-ContextualHelp-popover .spectrum-ContextualHelp-heading`.
Defaults to `var(--mod-contextual-help-title-color, var(--spectrum-contextual-help-title-color))`, if not set.",
+ "control": "color"
+ }
+ }
}
diff --git a/components/contextualhelp/stories/contextualhelp.stories.js b/components/contextualhelp/stories/contextualhelp.stories.js
index 117912f633b..389b9ace63f 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.
*/
@@ -107,6 +109,10 @@ export default {
},
packageJson,
metadata,
+ cssprops: {
+ ...metadata.modifiers,
+ ...metadata.component,
+ },
docs: {
story: {
height: "200px",
diff --git a/components/contextualhelp/stories/template.js b/components/contextualhelp/stories/template.js
index f6097cfd151..9e1ccfe2fb2 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 cf8fffe86db..809146fcd6a 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,135 +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"
- ],
- "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": {
+ "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": {
+ "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": {
+ "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": {
+ "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": {
+ "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": {
+ "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": {
+ "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": {
+ "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": {
+ "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": {
+ "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": {
+ "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": {
+ "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": {
+ "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": {
+ "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": {
+ "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": {
+ "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": {
+ "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": {
+ "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": {
+ "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": {
+ "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": {
+ "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": {
+ "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": {
+ "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": {
+ "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": {
+ "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": {
+ "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": {
+ "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": {
+ "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": {
+ "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": {
+ "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": {
+ "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": {
+ "value": "var(--mod-datepicker-border-radius, var(--spectrum-corner-radius-100))",
+ "description": "Defined in `.spectrum-DatePicker`.
Used by `.spectrum-DatePicker`, `--mod-datepicker-border-radius`, `.spectrum-DatePicker--range:after`.
Defaults to `var(--mod-datepicker-border-radius, var(--spectrum-corner-radius-100))`, if not set.",
+ "control": "text",
+ "category": "Component"
+ },
+ "spectrum-datepicker-border-radius-quiet": {
+ "value": "var(--mod-datepicker-border-radius-quiet, 0)",
+ "description": "Defined in `.spectrum-DatePicker`.
Used by `--mod-datepicker-border-radius`.
Defaults to `var(--mod-datepicker-border-radius-quiet, 0)`, if not set.",
+ "control": "text",
+ "category": "Component"
+ },
+ "spectrum-datepicker-border-width": {
+ "value": "1px",
+ "description": "Defined in `.spectrum-DatePicker`.
Used by `--spectrum-datepicker-padding-inline-end`.
Defaults to `var(--spectrum-border-width-100)`, if not set.",
+ "control": "text",
+ "category": "Component"
+ },
+ "spectrum-datepicker-min-width": {
+ "value": "var(--mod-datepicker-min-width, var(--spectrum-field-width))",
+ "description": "Defined in `.spectrum-DatePicker`.
Used by `.spectrum-DatePicker`.
Defaults to `var(--mod-datepicker-min-width, var(--spectrum-field-width))`, if not set.",
+ "control": "text",
+ "category": "Component"
+ },
+ "spectrum-datepicker-initial-height": {
+ "value": "32px",
+ "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`.
Defaults to `var(--spectrum-component-height-100)`, if not set.",
+ "control": "text",
+ "category": "Component"
+ },
+ "spectrum-datepicker-icon-size": {
+ "value": "20px",
+ "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`.
Defaults to `var(--spectrum-workflow-icon-size-100)`, if not set.",
+ "control": "text",
+ "category": "Component"
+ },
+ "spectrum-datepicker-pickerbutton-border-color": {
+ "value": "var(--highcontrast-datepicker-pickerbutton-border-color, var(--mod-datepicker-pickerbutton-border-color, var(--spectrum-gray-500)))",
+ "description": "Defined in `.spectrum-DatePicker`.
Used by `--mod-picker-button-border-color`.
Defaults to `var(--highcontrast-datepicker-pickerbutton-border-color, var(--mod-datepicker-pickerbutton-border-color, var(--spectrum-gray-500)))`, if not set.",
+ "control": "color",
+ "category": "Component"
+ },
+ "spectrum-datepicker-pickerbutton-border-color-invalid": {
+ "value": "var(--highcontrast-datepicker-pickerbutton-border-color, var(--mod-datepicker-pickerbutton-border-color-invalid, var(--spectrum-negative-border-color-default)))",
+ "description": "Defined in `.spectrum-DatePicker`.
Used by `--mod-picker-button-border-color`.
Defaults to `var(--highcontrast-datepicker-pickerbutton-border-color, var(--mod-datepicker-pickerbutton-border-color-invalid, var(--spectrum-negative-border-color-default)))`, if not set.",
+ "control": "color",
+ "category": "Component"
+ },
+ "spectrum-datepicker-pickerbutton-width": {
+ "value": "calc(var(--spectrum-field-edge-to-disclosure-icon-100) * 2 + var(--spectrum-workflow-icon-size-100))",
+ "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`.
Defaults to `calc(var(--spectrum-field-edge-to-disclosure-icon-100) * 2 + var(--spectrum-workflow-icon-size-100))`, if not set.",
+ "control": "text",
+ "category": "Component"
+ },
+ "spectrum-datepicker-quiet-button-offset": {
+ "value": "var(--mod-datepicker-quiet-button-offset, var(--spectrum-text-to-visual-100))",
+ "description": "Defined in `.spectrum-DatePicker`.
Used by `--spectrum-datepicker-pickerbutton-width-quiet`, `--spectrum-datepicker-padding-inline-end-quiet`, `.spectrum-DatePicker--quiet .spectrum-DatePicker-button`.
Defaults to `var(--mod-datepicker-quiet-button-offset, var(--spectrum-text-to-visual-100))`, if not set.",
+ "control": "text",
+ "category": "Component"
+ },
+ "spectrum-datepicker-icon-to-text": {
+ "value": "12px",
+ "description": "Defined in `.spectrum-DatePicker`.
Used by `--spectrum-datepicker-padding-inline-end-invalid-quiet`.
Defaults to `var(--spectrum-component-edge-to-text-100)`, if not set.",
+ "control": "text",
+ "category": "Component"
+ },
+ "spectrum-datepicker-pickerbutton-width-quiet": {
+ "value": "calc(var(--spectrum-datepicker-pickerbutton-width) - var(--spectrum-datepicker-quiet-button-offset))",
+ "description": "Defined in `.spectrum-DatePicker`.
Used by `--spectrum-datepicker-padding-inline-end-invalid-quiet`, `--mod-textfield-icon-spacing-inline-end-quiet-invalid`.
Defaults to `calc(var(--spectrum-datepicker-pickerbutton-width) - var(--spectrum-datepicker-quiet-button-offset))`, if not set.",
+ "control": "text",
+ "category": "Component"
+ },
+ "spectrum-datepicker-focus-ring-gap": {
+ "value": "var(--mod-datepicker-focus-ring-gap, var(--spectrum-focus-indicator-gap))",
+ "description": "Defined in `.spectrum-DatePicker`.
Used by `.spectrum-DatePicker--range:after`.
Defaults to `var(--mod-datepicker-focus-ring-gap, var(--spectrum-focus-indicator-gap))`, if not set.",
+ "control": "text",
+ "category": "Component"
+ },
+ "spectrum-datepicker-focus-thickness": {
+ "value": "var(--mod-datepicker-focus-thickness, var(--spectrum-focus-indicator-thickness))",
+ "description": "Defined in `.spectrum-DatePicker`.
Used by `.spectrum-DatePicker--range.spectrum-DatePicker--quiet.is-keyboardFocused:after`.
Defaults to `var(--mod-datepicker-focus-thickness, var(--spectrum-focus-indicator-thickness))`, if not set.",
+ "control": "text",
+ "category": "Component"
+ },
+ "spectrum-datepicker-focus-animation": {
+ "value": "var(--mod-datepicker-focus-animation, var(--spectrum-animation-duration-100))",
+ "description": "Defined in `.spectrum-DatePicker`.
Used by `.spectrum-DatePicker--range:after`.
Defaults to `var(--mod-datepicker-focus-animation, var(--spectrum-animation-duration-100))`, if not set.",
+ "control": "text",
+ "category": "Component"
+ },
+ "spectrum-datepicker-focus-ring-width": {
+ "value": "var(--mod-datepicker-focus-ring-width, var(--spectrum-border-width-100))",
+ "description": "Defined in `.spectrum-DatePicker`.
Used by `.spectrum-DatePicker--range.is-keyboardFocused:not(.spectrum-DatePicker--quiet):after`.
Defaults to `var(--mod-datepicker-focus-ring-width, var(--spectrum-border-width-100))`, if not set.",
+ "control": "text",
+ "category": "Component"
+ },
+ "spectrum-datepicker-focus-ring-color": {
+ "value": "var(--highcontrast-datepicker-focus-ring-color, var(--mod-datepicker-focus-ring-color, var(--spectrum-focus-indicator-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`.
Defaults to `var(--highcontrast-datepicker-focus-ring-color, var(--mod-datepicker-focus-ring-color, var(--spectrum-focus-indicator-color)))`, if not set.",
+ "control": "color",
+ "category": "Component"
+ },
+ "spectrum-datepicker-focus-line-gap": {
+ "value": "var(--mod-datepicker-focus-line-gap, var(--spectrum-spacing-75))",
+ "description": "Defined in `.spectrum-DatePicker`.
Used by `.spectrum-DatePicker--range.spectrum-DatePicker--quiet.is-keyboardFocused:after`.
Defaults to `var(--mod-datepicker-focus-line-gap, var(--spectrum-spacing-75))`, if not set.",
+ "control": "text",
+ "category": "Component"
+ },
+ "spectrum-datepicker-invalid-quiet-color": {
+ "value": "var(--mod-datepicker-invalid-quiet-color, var(--spectrum-negative-border-color-default))",
+ "description": "Defined in `.spectrum-DatePicker`.
Used by `--mod-picker-button-border-color`.
Defaults to `var(--mod-datepicker-invalid-quiet-color, var(--spectrum-negative-border-color-default))`, if not set.",
+ "control": "color",
+ "category": "Component"
+ },
+ "spectrum-datepicker-quiet-border-color-hover": {
+ "value": "var(--mod-datepicker-quiet-border-color-hover, var(--spectrum-gray-500))",
+ "description": "Defined in `.spectrum-DatePicker`.
Used by `--mod-picker-button-border-color`.
Defaults to `var(--mod-datepicker-quiet-border-color-hover, var(--spectrum-gray-500))`, if not set.",
+ "control": "color",
+ "category": "Component"
+ },
+ "spectrum-datepicker-border-color-disabled": {
+ "value": "var(--mod-datepicker-border-color-disabled, var(--spectrum-disabled-border-color))",
+ "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`.
Defaults to `var(--mod-datepicker-border-color-disabled, var(--spectrum-disabled-border-color))`, if not set.",
+ "control": "color",
+ "category": "Component"
+ },
+ "spectrum-datepicker-dash-font-size": {
+ "value": "var(--mod-datepicker-dash-font-size, var(--spectrum-font-size-100))",
+ "description": "Defined in `.spectrum-DatePicker`.
Used by `--spectrum-datepicker-range-dash-marin-inline-start`, `.spectrum-DatePicker-rangeDash:before`.
Defaults to `var(--mod-datepicker-dash-font-size, var(--spectrum-font-size-100))`, if not set.",
+ "control": "text",
+ "category": "Component"
+ },
+ "spectrum-datepicker-dash-color": {
+ "value": "var(--highcontrast-datepicker-dash-color, var(--mod-datepicker-dash-color, var(--spectrum-neutral-content-color-default)))",
+ "description": "Defined in `.spectrum-DatePicker`.
Used by `.spectrum-DatePicker-rangeDash`.
Defaults to `var(--highcontrast-datepicker-dash-color, var(--mod-datepicker-dash-color, var(--spectrum-neutral-content-color-default)))`, if not set.",
+ "control": "color",
+ "category": "Component"
+ },
+ "spectrum-datepicker-range-dash-padding-top": {
+ "value": "var(--mod-datepicker-range-dash-padding-top, 0)",
+ "description": "Defined in `.spectrum-DatePicker`.
Used by `.spectrum-DatePicker-rangeDash`.
Defaults to `var(--mod-datepicker-range-dash-padding-top, 0)`, if not set.",
+ "control": "text",
+ "category": "Component"
+ },
+ "spectrum-datepicker-range-dash-marin-inline-start": {
+ "value": "var(--mod-datepicker-range-dash-margin-left, calc(var(--spectrum-datepicker-dash-font-size) * -0.5))",
+ "description": "Defined in `.spectrum-DatePicker`.
Used by `.spectrum-DatePicker-rangeDash:before`.
Defaults to `var(--mod-datepicker-range-dash-margin-left, calc(var(--spectrum-datepicker-dash-font-size) * -0.5))`, if not set.",
+ "control": "text",
+ "category": "Component"
+ },
+ "spectrum-datepicker-range-input-width-first": {
+ "value": "var(--mod-datepicker-range-input-width-first, calc(var(--spectrum-datepicker-initial-width) - var(--spectrum-datepicker-generic-padding) * 2))",
+ "description": "Defined in `.spectrum-DatePicker`.
Used by `--spectrum-datepicker-input-width-base`, `.spectrum-DatePicker--range .spectrum-DatePicker-textfield:first-of-type`.
Defaults to `var(--mod-datepicker-range-input-width-first, calc(var(--spectrum-datepicker-initial-width) - var(--spectrum-datepicker-generic-padding) * 2))`, if not set.",
+ "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": {
+ "value": "calc(var(--spectrum-datepicker-range-input-width-first) + var(--spectrum-datepicker-icon-size))",
+ "description": "Defined in `.spectrum-DatePicker`.
Used by `--spectrum-datepicker-input-width`, `--spectrum-datepicker-datetime-input-width-first`, `--spectrum-datepicker-datetime-quiet-input-width-first`.
Defaults to `calc(var(--spectrum-datepicker-range-input-width-first) + var(--spectrum-datepicker-icon-size))`, if not set.",
+ "control": "text",
+ "category": "Component"
+ },
+ "spectrum-datepicker-input-width": {
+ "value": "var(--mod-datepicker-input-width, calc(var(--spectrum-datepicker-input-width-base) + var(--spectrum-datepicker-initial-height)))",
+ "description": "Defined in `.spectrum-DatePicker`.
Used by `.spectrum-DatePicker--range .spectrum-DatePicker-textfield`.
Defaults to `var(--mod-datepicker-input-width, calc(var(--spectrum-datepicker-input-width-base) + var(--spectrum-datepicker-initial-height)))`, if not set.",
+ "control": "text",
+ "category": "Component"
+ },
+ "spectrum-datepicker-range-input-width-quiet-first": {
+ "value": "var(--mod-datepicker-range-input-width-quiet-first, calc(var(--spectrum-datepicker-width-quiet-first) + var(--spectrum-datepicker-width-quiet-second)))",
+ "description": "Defined in `.spectrum-DatePicker`.
Used by `--spectrum-datepicker-input-width-quiet`, `.spectrum-DatePicker--range.spectrum-DatePicker--quiet .spectrum-DatePicker-textfield:first-of-type`.
Defaults to `var(--mod-datepicker-range-input-width-quiet-first, calc(var(--spectrum-datepicker-width-quiet-first) + var(--spectrum-datepicker-width-quiet-second)))`, if not set.",
+ "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": {
+ "value": "var(--mod-datepicker-input-width-quiet, calc(var(--spectrum-datepicker-range-input-width-quiet-first) + var(--spectrum-datepicker-icon-size) + var(--spectrum-datepicker-initial-height)))",
+ "description": "Defined in `.spectrum-DatePicker`.
Used by `.spectrum-DatePicker--range.spectrum-DatePicker--quiet .spectrum-DatePicker-textfield`.
Defaults to `var(--mod-datepicker-input-width-quiet, 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": "Component"
+ },
+ "spectrum-datepicker-datetime-input-width-first": {
+ "value": "var(--mod-datepicker-datetime-input-width-first, calc(var(--spectrum-datepicker-input-width-base) + var(--spectrum-datepicker-datetime-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`.
Defaults to `var(--mod-datepicker-datetime-input-width-first, calc(var(--spectrum-datepicker-input-width-base) + var(--spectrum-datepicker-datetime-width-first)))`, if not set.",
+ "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": {
+ "value": "var(--mod-datepicker-datetime-input-width, calc(var(--spectrum-datepicker-datetime-input-width-first) + var(--spectrum-datepicker-icon-size) + var(--spectrum-datepicker-initial-height)))",
+ "description": "Defined in `.spectrum-DatePicker`.
Used by `.spectrum-DatePicker--range.spectrum-DatePicker--datetimeRange .spectrum-DatePicker-textfield`.
Defaults to `var(--mod-datepicker-datetime-input-width, calc(var(--spectrum-datepicker-datetime-input-width-first) + var(--spectrum-datepicker-icon-size) + var(--spectrum-datepicker-initial-height)))`, if not set.",
+ "control": "text",
+ "category": "Component"
+ },
+ "spectrum-datepicker-datetime-quiet-input-width-first": {
+ "value": "var(--mod-datepicker-datetime-quiet-input-width-first, calc(var(--spectrum-datepicker-input-width-base) + var(--spectrum-datepicker-input-datetime-width)))",
+ "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`.
Defaults to `var(--mod-datepicker-datetime-quiet-input-width-first, calc(var(--spectrum-datepicker-input-width-base) + var(--spectrum-datepicker-input-datetime-width)))`, if not set.",
+ "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": {
+ "value": "var(--mod-datepicker-datetime-quiet-input-width, calc(var(--spectrum-datepicker-datetime-quiet-input-width-first) + var(--spectrum-datepicker-icon-size) + var(--spectrum-datepicker-initial-height)))",
+ "description": "Defined in `.spectrum-DatePicker`.
Used by `.spectrum-DatePicker--range.spectrum-DatePicker--datetimeRange.spectrum-DatePicker--quiet .spectrum-DatePicker-textfield`.
Defaults to `var(--mod-datepicker-datetime-quiet-input-width, 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": "Component"
+ },
+ "spectrum-datepicker-padding-inline-end": {
+ "value": "var(--mod-datepicker-padding-inline, calc(var(--spectrum-datepicker-pickerbutton-width) + var(--spectrum-component-edge-to-text-100) - var(--spectrum-datepicker-border-width) * 2))",
+ "description": "Defined in `.spectrum-DatePicker`.
Used by `.spectrum-DatePicker-input`.
Defaults to `var(--mod-datepicker-padding-inline, 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": "Component"
+ },
+ "spectrum-datepicker-padding-inline-end-quiet": {
+ "value": "var(--mod-datepicker-padding-inline-quiet, calc(var(--spectrum-datepicker-pickerbutton-width) + var(--spectrum-component-edge-to-text-100) - var(--spectrum-datepicker-quiet-button-offset)))",
+ "description": "Defined in `.spectrum-DatePicker`.
Used by `--mod-datepicker-padding-inline`.
Defaults to `var(--mod-datepicker-padding-inline-quiet, 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": "Component"
+ },
+ "spectrum-datepicker-padding-inline-end-invalid-quiet": {
+ "value": "var(--mod-datepicker-padding-inline-end-invalid-quiet, calc(var(--spectrum-datepicker-pickerbutton-width-quiet) + var(--spectrum-datepicker-icon-size) + var(--spectrum-datepicker-icon-to-text)))",
+ "description": "Defined in `.spectrum-DatePicker`.
Used by `.spectrum-DatePicker--quiet.is-invalid .spectrum-DatePicker-input:not(.spectrum-DatePicker-startField)`.
Defaults to `var(--mod-datepicker-padding-inline-end-invalid-quiet, calc(var(--spectrum-datepicker-pickerbutton-width-quiet) + var(--spectrum-datepicker-icon-size) + var(--spectrum-datepicker-icon-to-text)))`, if not set.",
+ "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-corner-radius-100": {
+ "value": "4px",
+ "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": "var(--spectrum-field-width-small)",
+ "description": "Used by `--spectrum-datepicker-min-width`.",
+ "control": "text",
+ "category": "Global"
+ },
+ "spectrum-component-height-100": {
+ "value": "32px",
+ "description": "Used by `--spectrum-datepicker-initial-height`.",
+ "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"
+ }
+ },
+ "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..a9a8eecd724 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,10 @@ export default {
},
packageJson,
metadata,
+ cssprops: {
+ ...metadata.modifiers,
+ ...metadata.component,
+ },
},
play: async ({ canvasElement }) => {
const canvas = within(canvasElement);
diff --git a/components/datepicker/stories/template.js b/components/datepicker/stories/template.js
index eebb928df80..fca0580d3da 100644
--- a/components/datepicker/stories/template.js
+++ b/components/datepicker/stories/template.js
@@ -12,7 +12,7 @@ import "../index.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 1d91c2bb539..b039cdee39c 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,92 +35,441 @@
".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"
- ],
- "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": {
+ "description": "Used by `.spectrum-Dial`.
Defaults to `var(--spectrum-dial-min-height)`, if not set.",
+ "control": "text",
+ "category": "Modifier"
+ },
+ "mod-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": {
+ "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": {
+ "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": {
+ "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": {
+ "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": {
+ "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": {
+ "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": {
+ "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": {
+ "description": "Used by `.spectrum-Dial-labelContainer`.
Defaults to `var(--spectrum-dial-label-gap-y)`, if not set.",
+ "control": "text",
+ "category": "Modifier"
+ },
+ "mod-dial-width": {
+ "description": "Used by `.spectrum-Dial-controls`.
Defaults to `var(--spectrum-dial-width)`, if not set.",
+ "control": "text",
+ "category": "Modifier"
+ },
+ "mod-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": {
+ "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": {
+ "description": "Used by `.spectrum-Dial-controls`.
Defaults to `var(--spectrum-dial-controls-margin)`, if not set.",
+ "control": "text",
+ "category": "Modifier"
+ },
+ "mod-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": {
+ "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": {
+ "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": {
+ "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": {
+ "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": {
+ "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": {
+ "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": {
+ "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": {
+ "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": {
+ "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": {
+ "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": {
+ "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": {
+ "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": {
+ "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": {
+ "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": {
+ "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": {
+ "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-background-color-default": {
+ "value": "light-dark(rgb(243, 243, 243), rgb(34, 34, 34))",
+ "description": "Defined in `.spectrum-Dial`.
Used by `.spectrum-Dial.is-disabled .spectrum-Dial-handle`.
Defaults to `var(--spectrum-gray-75)`, if not set.",
+ "control": "color",
+ "category": "Component"
+ },
+ "spectrum-dial-handle-marker-color-key-focus": {
+ "value": "light-dark(rgb(255, 255, 255), rgb(17, 17, 17))",
+ "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(--spectrum-gray-25)`, if not set.",
+ "control": "color",
+ "category": "Component"
+ },
+ "spectrum-dial-handle-marker-color": {
+ "value": "light-dark(rgb(80, 80, 80), rgb(175, 175, 175))",
+ "description": "Defined in `.spectrum-Dial`.
Used by `.spectrum-Dial-handle:after`.
Defaults to `var(--spectrum-gray-700)`, if not set.",
+ "control": "color",
+ "category": "Component"
+ },
+ "spectrum-dial-border-color": {
+ "value": "light-dark(rgb(80, 80, 80), rgb(175, 175, 175))",
+ "description": "Defined in `.spectrum-Dial`.
Used by `.spectrum-Dial-handle`.
Defaults to `var(--spectrum-gray-700)`, if not set.",
+ "control": "color",
+ "category": "Component"
+ },
+ "spectrum-dial-handle-marker-color-hover": {
+ "value": "light-dark(rgb(41, 41, 41), rgb(219, 219, 219))",
+ "description": "Defined in `.spectrum-Dial`.
Used by `.spectrum-Dial-handle:hover:after`.
Defaults to `var(--spectrum-gray-800)`, if not set.",
+ "control": "color",
+ "category": "Component"
+ },
+ "spectrum-dial-border-color-hover": {
+ "value": "light-dark(rgb(41, 41, 41), rgb(219, 219, 219))",
+ "description": "Defined in `.spectrum-Dial`.
Used by `.spectrum-Dial-handle:hover`, `.spectrum-Dial-handle.is-dragged, .spectrum-Dial-handle:active`.
Defaults to `var(--spectrum-gray-800)`, if not set.",
+ "control": "color",
+ "category": "Component"
+ },
+ "spectrum-dial-handle-marker-color-mouse-focus": {
+ "value": "light-dark(rgb(80, 80, 80), rgb(175, 175, 175))",
+ "description": "Defined in `.spectrum-Dial`.
Used by `.spectrum-Dial-handle:focus-visible, .spectrum-Dial-handle:focus-within`.
Defaults to `var(--spectrum-gray-700)`, if not set.",
+ "control": "color",
+ "category": "Component"
+ },
+ "spectrum-dial-min-max-tick-color": {
+ "value": "light-dark(rgb(113, 113, 113), rgb(138, 138, 138))",
+ "description": "Defined in `.spectrum-Dial`.
Used by `.spectrum-Dial-controls:after, .spectrum-Dial-controls:before`.
Defaults to `var(--spectrum-gray-600)`, if not set.",
+ "control": "color",
+ "category": "Component"
+ },
+ "spectrum-dial-label-text-color": {
+ "value": "light-dark(rgb(80, 80, 80), rgb(175, 175, 175))",
+ "description": "Defined in `.spectrum-Dial`.
Used by `.spectrum-Dial-labelContainer`.
Defaults to `var(--spectrum-gray-700)`, if not set.",
+ "control": "color",
+ "category": "Component"
+ },
+ "spectrum-dial-label-text-color-disabled": {
+ "value": "light-dark(rgb(80, 80, 80), rgb(175, 175, 175))",
+ "description": "Defined in `.spectrum-Dial`.
Used by `.spectrum-Dial.is-disabled .spectrum-Dial-labelContainer`.
Defaults to `var(--spectrum-gray-700)`, if not set.",
+ "control": "color",
+ "category": "Component"
+ },
+ "spectrum-dial-handle-border-color-disabled": {
+ "value": "light-dark(rgb(198, 198, 198), rgb(68, 68, 68))",
+ "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(--spectrum-gray-400)`, if not set.",
+ "control": "color",
+ "category": "Component"
+ },
+ "spectrum-dial-container-width": {
+ "value": "48px",
+ "description": "Defined in `.spectrum-Dial`.
Used by `.spectrum-Dial`.
Defaults to `48px`, if not set.",
+ "control": "text",
+ "category": "Component"
+ },
+ "spectrum-dial-handle-marker-width": {
+ "value": "12px",
+ "description": "Defined in `.spectrum-Dial`.
Used by `.spectrum-Dial-handle:after`.
Defaults to `12px`, if not set.",
+ "control": "text",
+ "category": "Component"
+ },
+ "spectrum-dial-handle-marker-height": {
+ "value": "2px",
+ "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`.
Defaults to `2px`, if not set.",
+ "control": "text",
+ "category": "Component"
+ },
+ "spectrum-dial-handle-marker-border-radius": {
+ "value": "1px",
+ "description": "Defined in `.spectrum-Dial`.
Used by `.spectrum-Dial-controls:after, .spectrum-Dial-controls:before`, `.spectrum-Dial-handle:after`.
Defaults to `1px`, if not set.",
+ "control": "text",
+ "category": "Component"
+ },
+ "spectrum-dial-handle-size": {
+ "value": "100%",
+ "description": "Defined in `.spectrum-Dial`.
Used by `.spectrum-Dial-handle`, `.spectrum-Dial-input`.
Defaults to `100%`, if not set.",
+ "control": "text",
+ "category": "Component"
+ },
+ "spectrum-dial-min-height": {
+ "value": "0",
+ "description": "Defined in `.spectrum-Dial`.
Used by `.spectrum-Dial`.
Defaults to `0`, if not set.",
+ "control": "text",
+ "category": "Component"
+ },
+ "spectrum-dial-controls-min-height": {
+ "value": "0",
+ "description": "Defined in `.spectrum-Dial`.
Used by `.spectrum-Dial-controls`.
Defaults to `0`, if not set.",
+ "control": "text",
+ "category": "Component"
+ },
+ "spectrum-dial-min-max-tick-angles": {
+ "value": "45deg",
+ "description": "Defined in `.spectrum-Dial`.
Used by `.spectrum-Dial-controls:before`, `.spectrum-Dial-controls:after, .spectrum-Dial-handle`.
Defaults to `45deg`, if not set.",
+ "control": "text",
+ "category": "Component"
+ },
+ "spectrum-dial-width": {
+ "value": "24px",
+ "description": "Defined in `.spectrum-Dial`, `.spectrum-Dial.spectrum-Dial--small`.
Used by `.spectrum-Dial-controls`.
Defaults to `24px`, if not set.",
+ "control": "text",
+ "category": "Component"
+ },
+ "spectrum-dial-height": {
+ "value": "24px",
+ "description": "Defined in `.spectrum-Dial`, `.spectrum-Dial.spectrum-Dial--small`.
Used by `.spectrum-Dial-controls`.
Defaults to `24px`, if not set.",
+ "control": "text",
+ "category": "Component"
+ },
+ "spectrum-dial-handle-border-size": {
+ "value": "2px",
+ "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`.
Defaults to `var(--spectrum-border-width-200)`, if not set.",
+ "control": "text",
+ "category": "Component"
+ },
+ "spectrum-dial-label-text-size": {
+ "value": "12px",
+ "description": "Defined in `.spectrum-Dial`.
Used by `.spectrum-Dial-labelContainer`.
Defaults to `var(--spectrum-font-size-75)`, if not set.",
+ "control": "text",
+ "category": "Component"
+ },
+ "spectrum-dial-label-line-height": {
+ "value": "1.5",
+ "description": "Defined in `.spectrum-Dial`.
Used by `.spectrum-Dial-labelContainer`.
Defaults to `var(--spectrum-line-height-200)`, if not set.",
+ "control": "text",
+ "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"
+ }
+ },
+ "global": {
+ "spectrum-gray-75": {
+ "value": "light-dark(rgb(243, 243, 243), rgb(34, 34, 34))",
+ "description": "Used by `--spectrum-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 `--spectrum-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"
+ }
+ },
+ "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 4491aa2b861..00bf7a7b21a 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.
*/
@@ -38,6 +40,10 @@ export default {
status: {
type: "migrated",
},
+ cssprops: {
+ ...metadata.modifiers,
+ ...metadata.component,
+ },
},
tags: ["migrated"],
};
diff --git a/components/dialog/dist/metadata.json b/components/dialog/dist/metadata.json
index 738156392db..28af442d9b0 100644
--- a/components/dialog/dist/metadata.json
+++ b/components/dialog/dist/metadata.json
@@ -41,101 +41,509 @@
".spectrum-Dialog-heading",
".spectrum-Dialog-hero"
],
- "modifiers": [
- "--mod-standard-dialog-background-color",
- "--mod-standard-dialog-border-radius",
- "--mod-standard-dialog-description-font-size",
- "--mod-standard-dialog-description-font-weight",
- "--mod-standard-dialog-description-line-height",
- "--mod-standard-dialog-description-text-color",
- "--mod-standard-dialog-header-content-font-size",
- "--mod-standard-dialog-heading-font-size",
- "--mod-standard-dialog-heading-font-weight",
- "--mod-standard-dialog-heading-line-height",
- "--mod-standard-dialog-heading-text-color",
- "--mod-standard-dialog-hero-block-size",
- "--mod-standard-dialog-max-width",
- "--mod-standard-dialog-max-width-large",
- "--mod-standard-dialog-max-width-small",
- "--mod-standard-dialog-min-inline-size",
- "--mod-standard-dialog-spacing-description-to-footer",
- "--mod-standard-dialog-spacing-edge-to-close-button",
- "--mod-standard-dialog-spacing-footer-to-button-group",
- "--mod-standard-dialog-spacing-grid-padding",
- "--mod-standard-dialog-spacing-title-to-description",
- "--mod-standard-dialog-spacing-title-to-header-content",
- "--mod-takeover-dialog-grid-spacing",
- "--mod-takeover-dialog-spacing-header-content-gap",
- "--mod-takeover-dialog-title-font-size"
- ],
- "component": [],
- "global": [
- "--spectrum-background-layer-2-color",
- "--spectrum-black-rgb",
- "--spectrum-body-color",
- "--spectrum-body-sans-serif-font-style",
- "--spectrum-body-sans-serif-font-weight",
- "--spectrum-corner-radius-extra-large-default",
- "--spectrum-heading-color",
- "--spectrum-line-height-200",
- "--spectrum-overlay-opacity",
- "--spectrum-sans-font-family-stack",
- "--spectrum-spacing-200",
- "--spectrum-spacing-300",
- "--spectrum-spacing-400",
- "--spectrum-spacing-500",
- "--spectrum-standard-dialog-background-color",
- "--spectrum-standard-dialog-body-font-size",
- "--spectrum-standard-dialog-border-radius",
- "--spectrum-standard-dialog-description-font-family",
- "--spectrum-standard-dialog-description-font-size",
- "--spectrum-standard-dialog-description-font-style",
- "--spectrum-standard-dialog-description-font-weight",
- "--spectrum-standard-dialog-description-line-height",
- "--spectrum-standard-dialog-description-text-color",
- "--spectrum-standard-dialog-header-content-font-size",
- "--spectrum-standard-dialog-heading-font-family",
- "--spectrum-standard-dialog-heading-font-size",
- "--spectrum-standard-dialog-heading-font-style",
- "--spectrum-standard-dialog-heading-font-weight",
- "--spectrum-standard-dialog-heading-line-height",
- "--spectrum-standard-dialog-heading-text-color",
- "--spectrum-standard-dialog-hero-block-size",
- "--spectrum-standard-dialog-max-width",
- "--spectrum-standard-dialog-maximum-width-large",
- "--spectrum-standard-dialog-maximum-width-medium",
- "--spectrum-standard-dialog-maximum-width-small",
- "--spectrum-standard-dialog-min-inline-size",
- "--spectrum-standard-dialog-minimum-width",
- "--spectrum-standard-dialog-padding",
- "--spectrum-standard-dialog-spacing-description-to-footer",
- "--spectrum-standard-dialog-spacing-edge-to-close-button",
- "--spectrum-standard-dialog-spacing-edge-to-content",
- "--spectrum-standard-dialog-spacing-edge-to-header-content-inline-end",
- "--spectrum-standard-dialog-spacing-footer-to-button-group",
- "--spectrum-standard-dialog-spacing-grid-padding",
- "--spectrum-standard-dialog-spacing-title-to-description",
- "--spectrum-standard-dialog-spacing-title-to-header-content",
- "--spectrum-standard-dialog-title-font-size",
- "--spectrum-takeover-dialog-block-size",
- "--spectrum-takeover-dialog-grid-spacing",
- "--spectrum-takeover-dialog-height",
- "--spectrum-takeover-dialog-inline-size",
- "--spectrum-takeover-dialog-spacing-grid-padding",
- "--spectrum-takeover-dialog-spacing-header-content-gap",
- "--spectrum-takeover-dialog-spacing-header-gap",
- "--spectrum-takeover-dialog-spacing-title-to-body",
- "--spectrum-takeover-dialog-spacing-title-to-content",
- "--spectrum-takeover-dialog-title-font-size",
- "--spectrum-takeover-dialog-width",
- "--spectrum-title-line-height",
- "--spectrum-title-sans-serif-font-style",
- "--spectrum-title-sans-serif-font-weight",
- "--spectrum-title-size-xxl"
- ],
- "passthroughs": [
- "--mod-buttongroup-flex-wrap",
- "--mod-buttongroup-justify-content"
- ],
- "high-contrast": []
+ "modifiers": {
+ "mod-standard-dialog-max-width-small": {
+ "description": "Used by `--spectrum-standard-dialog-max-width`.
Defaults to `var(--spectrum-standard-dialog-maximum-width-small)`, if not set.",
+ "control": "text",
+ "category": "Modifier"
+ },
+ "mod-standard-dialog-max-width-large": {
+ "description": "Used by `--spectrum-standard-dialog-max-width`.
Defaults to `var(--spectrum-standard-dialog-maximum-width-large)`, if not set.",
+ "control": "text",
+ "category": "Modifier"
+ },
+ "mod-standard-dialog-max-width": {
+ "description": "Used by `.spectrum-Dialog`.
Defaults to `var(--spectrum-standard-dialog-max-width)`, if not set.",
+ "control": "text",
+ "category": "Modifier"
+ },
+ "mod-standard-dialog-min-inline-size": {
+ "description": "Used by `.spectrum-Dialog`.
Defaults to `var(--spectrum-standard-dialog-min-inline-size)`, if not set.",
+ "control": "text",
+ "category": "Modifier"
+ },
+ "mod-standard-dialog-background-color": {
+ "description": "Used by `.spectrum-Dialog`.
Defaults to `var(--spectrum-standard-dialog-background-color)`, if not set.",
+ "control": "color",
+ "category": "Modifier"
+ },
+ "mod-standard-dialog-border-radius": {
+ "description": "Used by `.spectrum-Dialog`.
Defaults to `var(--spectrum-standard-dialog-border-radius)`, if not set.",
+ "control": "text",
+ "category": "Modifier"
+ },
+ "mod-standard-dialog-hero-block-size": {
+ "description": "Used by `.spectrum-Dialog-hero`.
Defaults to `var(--spectrum-standard-dialog-hero-block-size)`, if not set.",
+ "control": "text",
+ "category": "Modifier"
+ },
+ "mod-standard-dialog-spacing-grid-padding": {
+ "description": "Used by `.spectrum-Dialog-grid`, `.spectrum-Dialog--dismissible .spectrum-Dialog-grid`, `.spectrum-Dialog--fullscreen.spectrum-Dialog .spectrum-Dialog-grid, .spectrum-Dialog--fullscreenTakeover.spectrum-Dialog .spectrum-Dialog-grid`.
Defaults to `var(--spectrum-standard-dialog-spacing-grid-padding)`, if not set.",
+ "control": "text",
+ "category": "Modifier"
+ },
+ "mod-standard-dialog-heading-font-size": {
+ "description": "Used by `.spectrum-Dialog-heading`.
Defaults to `var(--spectrum-standard-dialog-heading-font-size)`, if not set.",
+ "control": "text",
+ "category": "Modifier"
+ },
+ "mod-standard-dialog-heading-font-weight": {
+ "description": "Used by `.spectrum-Dialog-heading`.
Defaults to `var(--spectrum-standard-dialog-heading-font-weight)`, if not set.",
+ "control": "text",
+ "category": "Modifier"
+ },
+ "mod-standard-dialog-heading-line-height": {
+ "description": "Used by `.spectrum-Dialog-heading`.
Defaults to `var(--spectrum-standard-dialog-heading-line-height)`, if not set.",
+ "control": "text",
+ "category": "Modifier"
+ },
+ "mod-standard-dialog-heading-text-color": {
+ "description": "Used by `.spectrum-Dialog-heading`.
Defaults to `var(--spectrum-standard-dialog-heading-text-color)`, if not set.",
+ "control": "color",
+ "category": "Modifier"
+ },
+ "mod-standard-dialog-spacing-title-to-description": {
+ "description": "Used by `.spectrum-Dialog-header`, `.spectrum-Dialog-heading`.
Defaults to `var(--spectrum-standard-dialog-spacing-title-to-description)`, if not set.",
+ "control": "text",
+ "category": "Modifier"
+ },
+ "mod-standard-dialog-spacing-title-to-header-content": {
+ "description": "Used by `.spectrum-Dialog-header`.
Defaults to `var(--spectrum-standard-dialog-spacing-title-to-header-content)`, if not set.",
+ "control": "text",
+ "category": "Modifier"
+ },
+ "mod-standard-dialog-header-content-font-size": {
+ "description": "Used by `.spectrum-Dialog-header > .spectrum-Dialog-headerContentWrapper`.
Defaults to `var(--spectrum-standard-dialog-header-content-font-size)`, if not set.",
+ "control": "text",
+ "category": "Modifier"
+ },
+ "mod-standard-dialog-description-font-size": {
+ "description": "Used by `.spectrum-Dialog-content`.
Defaults to `var(--spectrum-standard-dialog-description-font-size)`, if not set.",
+ "control": "text",
+ "category": "Modifier"
+ },
+ "mod-standard-dialog-description-font-weight": {
+ "description": "Used by `.spectrum-Dialog-content`.
Defaults to `var(--spectrum-standard-dialog-description-font-weight)`, if not set.",
+ "control": "text",
+ "category": "Modifier"
+ },
+ "mod-standard-dialog-description-line-height": {
+ "description": "Used by `.spectrum-Dialog-content`.
Defaults to `var(--spectrum-standard-dialog-description-line-height)`, if not set.",
+ "control": "text",
+ "category": "Modifier"
+ },
+ "mod-standard-dialog-description-text-color": {
+ "description": "Used by `.spectrum-Dialog-content`.
Defaults to `var(--spectrum-standard-dialog-description-text-color)`, if not set.",
+ "control": "color",
+ "category": "Modifier"
+ },
+ "mod-standard-dialog-spacing-footer-to-button-group": {
+ "description": "Used by `.spectrum-Dialog-footer`.
Defaults to `var(--spectrum-standard-dialog-spacing-footer-to-button-group)`, if not set.",
+ "control": "text",
+ "category": "Modifier"
+ },
+ "mod-standard-dialog-spacing-description-to-footer": {
+ "description": "Used by `.spectrum-Dialog-footer`, `.spectrum-Dialog-buttonGroup--noFooter`.
Defaults to `var(--spectrum-standard-dialog-spacing-description-to-footer)`, if not set.",
+ "control": "text",
+ "category": "Modifier"
+ },
+ "mod-standard-dialog-spacing-edge-to-close-button": {
+ "description": "Used by `.spectrum-Dialog-closeButton`.
Defaults to `var(--spectrum-standard-dialog-spacing-edge-to-close-button)`, if not set.",
+ "control": "text",
+ "category": "Modifier"
+ },
+ "mod-takeover-dialog-grid-spacing": {
+ "description": "Used by `.spectrum-Dialog--fullscreen .spectrum-Dialog-grid, .spectrum-Dialog--fullscreenTakeover .spectrum-Dialog-grid`.
Defaults to `var(--spectrum-takeover-dialog-grid-spacing)`, if not set.",
+ "control": "text",
+ "category": "Modifier"
+ },
+ "mod-takeover-dialog-spacing-header-content-gap": {
+ "description": "Used by `.spectrum-Dialog--fullscreen .spectrum-Dialog-header, .spectrum-Dialog--fullscreenTakeover .spectrum-Dialog-header`, `.spectrum-Dialog--fullscreen .spectrum-Dialog-header, .spectrum-Dialog--fullscreenTakeover .spectrum-Dialog-header`.
Defaults to `var(--spectrum-takeover-dialog-spacing-header-content-gap)`, if not set.",
+ "control": "text",
+ "category": "Modifier"
+ },
+ "mod-takeover-dialog-title-font-size": {
+ "description": "Used by `.spectrum-Dialog--fullscreen .spectrum-Dialog-heading, .spectrum-Dialog--fullscreenTakeover .spectrum-Dialog-heading`.
Defaults to `var(--spectrum-takeover-dialog-title-font-size)`, if not set.",
+ "control": "text",
+ "category": "Modifier"
+ }
+ },
+ "component": {},
+ "global": {
+ "spectrum-standard-dialog-max-width": {
+ "value": "var(--mod-standard-dialog-max-width-large, var(--spectrum-standard-dialog-maximum-width-large))",
+ "description": "Defined in `.spectrum-Dialog`, `.spectrum-Dialog--sizeS`, `.spectrum-Dialog--sizeL`.
Used by `.spectrum-Dialog`.
Defaults to `var(--mod-standard-dialog-max-width-large, var(--spectrum-standard-dialog-maximum-width-large))`, if not set.",
+ "control": "text",
+ "category": "Global"
+ },
+ "spectrum-standard-dialog-maximum-width-medium": {
+ "value": "480px",
+ "description": "Used by `--spectrum-standard-dialog-max-width`.",
+ "control": "text",
+ "category": "Global"
+ },
+ "spectrum-standard-dialog-min-inline-size": {
+ "value": "288px",
+ "description": "Defined in `.spectrum-Dialog`.
Used by `.spectrum-Dialog`.
Defaults to `var(--spectrum-standard-dialog-minimum-width)`, if not set.",
+ "control": "text",
+ "category": "Global"
+ },
+ "spectrum-standard-dialog-minimum-width": {
+ "value": "288px",
+ "description": "Used by `--spectrum-standard-dialog-min-inline-size`.",
+ "control": "text",
+ "category": "Global"
+ },
+ "spectrum-standard-dialog-border-radius": {
+ "value": "16px",
+ "description": "Defined in `.spectrum-Dialog`.
Used by `.spectrum-Dialog`.
Defaults to `var(--spectrum-corner-radius-extra-large-default)`, if not set.",
+ "control": "text",
+ "category": "Global"
+ },
+ "spectrum-corner-radius-extra-large-default": {
+ "value": "16px",
+ "description": "Used by `--spectrum-standard-dialog-border-radius`.",
+ "control": "text",
+ "category": "Global"
+ },
+ "spectrum-standard-dialog-heading-font-weight": {
+ "value": "700",
+ "description": "Defined in `.spectrum-Dialog`.
Used by `.spectrum-Dialog-heading`.
Defaults to `var(--spectrum-title-sans-serif-font-weight)`, if not set.",
+ "control": "text",
+ "category": "Global"
+ },
+ "spectrum-title-sans-serif-font-weight": {
+ "value": "700",
+ "description": "Used by `--spectrum-standard-dialog-heading-font-weight`.",
+ "control": "text",
+ "category": "Global"
+ },
+ "spectrum-standard-dialog-heading-font-size": {
+ "value": "var(--spectrum-title-size-xl)",
+ "description": "Defined in `.spectrum-Dialog`.
Used by `.spectrum-Dialog-heading`.
Defaults to `var(--spectrum-standard-dialog-title-font-size)`, if not set.",
+ "control": "text",
+ "category": "Global"
+ },
+ "spectrum-standard-dialog-title-font-size": {
+ "value": "var(--spectrum-title-size-xl)",
+ "description": "Used by `--spectrum-standard-dialog-heading-font-size`.",
+ "control": "text",
+ "category": "Global"
+ },
+ "spectrum-standard-dialog-heading-font-style": {
+ "value": "normal",
+ "description": "Defined in `.spectrum-Dialog`.
Used by `.spectrum-Dialog-heading`.
Defaults to `var(--spectrum-title-sans-serif-font-style)`, if not set.",
+ "control": "text",
+ "category": "Global"
+ },
+ "spectrum-title-sans-serif-font-style": {
+ "value": "normal",
+ "description": "Used by `--spectrum-standard-dialog-heading-font-style`.",
+ "control": "text",
+ "category": "Global"
+ },
+ "spectrum-standard-dialog-heading-font-family": {
+ "value": "var(--spectrum-sans-font-family-stack)",
+ "description": "Defined in `.spectrum-Dialog`.
Used by `.spectrum-Dialog-heading`.
Defaults to `var(--spectrum-sans-font-family-stack)`, if not set.",
+ "control": "text",
+ "category": "Global"
+ },
+ "spectrum-sans-font-family-stack": {
+ "description": "Used by `--spectrum-standard-dialog-heading-font-family`, `--spectrum-standard-dialog-description-font-family`.",
+ "control": "text",
+ "category": "Global"
+ },
+ "spectrum-standard-dialog-description-font-weight": {
+ "value": "400",
+ "description": "Defined in `.spectrum-Dialog`.
Used by `.spectrum-Dialog-content`.
Defaults to `var(--spectrum-body-sans-serif-font-weight)`, if not set.",
+ "control": "text",
+ "category": "Global"
+ },
+ "spectrum-body-sans-serif-font-weight": {
+ "value": "400",
+ "description": "Used by `--spectrum-standard-dialog-description-font-weight`.",
+ "control": "text",
+ "category": "Global"
+ },
+ "spectrum-standard-dialog-description-font-size": {
+ "value": "var(--spectrum-body-size-s)",
+ "description": "Defined in `.spectrum-Dialog`.
Used by `.spectrum-Dialog-content`.
Defaults to `var(--spectrum-standard-dialog-body-font-size)`, if not set.",
+ "control": "text",
+ "category": "Global"
+ },
+ "spectrum-standard-dialog-body-font-size": {
+ "value": "var(--spectrum-body-size-s)",
+ "description": "Used by `--spectrum-standard-dialog-description-font-size`, `--spectrum-standard-dialog-header-content-font-size`.",
+ "control": "text",
+ "category": "Global"
+ },
+ "spectrum-standard-dialog-description-font-style": {
+ "value": "normal",
+ "description": "Defined in `.spectrum-Dialog`.
Used by `.spectrum-Dialog-content`.
Defaults to `var(--spectrum-body-sans-serif-font-style)`, if not set.",
+ "control": "text",
+ "category": "Global"
+ },
+ "spectrum-body-sans-serif-font-style": {
+ "value": "normal",
+ "description": "Used by `--spectrum-standard-dialog-description-font-style`.",
+ "control": "text",
+ "category": "Global"
+ },
+ "spectrum-standard-dialog-description-font-family": {
+ "value": "var(--spectrum-sans-font-family-stack)",
+ "description": "Defined in `.spectrum-Dialog`.
Used by `.spectrum-Dialog-content`.
Defaults to `var(--spectrum-sans-font-family-stack)`, if not set.",
+ "control": "text",
+ "category": "Global"
+ },
+ "spectrum-standard-dialog-header-content-font-size": {
+ "value": "var(--spectrum-body-size-s)",
+ "description": "Defined in `.spectrum-Dialog`.
Used by `.spectrum-Dialog-header > .spectrum-Dialog-headerContentWrapper`.
Defaults to `var(--spectrum-standard-dialog-body-font-size)`, if not set.",
+ "control": "text",
+ "category": "Global"
+ },
+ "spectrum-standard-dialog-heading-line-height": {
+ "value": "1.3",
+ "description": "Defined in `.spectrum-Dialog`.
Used by `.spectrum-Dialog-heading`.
Defaults to `var(--spectrum-title-line-height)`, if not set.",
+ "control": "text",
+ "category": "Global"
+ },
+ "spectrum-title-line-height": {
+ "value": "1.3",
+ "description": "Used by `--spectrum-standard-dialog-heading-line-height`.",
+ "control": "text",
+ "category": "Global"
+ },
+ "spectrum-standard-dialog-description-line-height": {
+ "value": "1.5",
+ "description": "Defined in `.spectrum-Dialog`.
Used by `.spectrum-Dialog-content`.
Defaults to `var(--spectrum-line-height-200)`, if not set.",
+ "control": "text",
+ "category": "Global"
+ },
+ "spectrum-line-height-200": {
+ "value": "1.5",
+ "description": "Used by `--spectrum-standard-dialog-description-line-height`.",
+ "control": "text",
+ "category": "Global"
+ },
+ "spectrum-standard-dialog-heading-text-color": {
+ "value": "var(--spectrum-gray-900)",
+ "description": "Defined in `.spectrum-Dialog`.
Used by `.spectrum-Dialog-heading`.
Defaults to `var(--spectrum-heading-color)`, if not set.",
+ "control": "color",
+ "category": "Global"
+ },
+ "spectrum-heading-color": {
+ "value": "var(--spectrum-gray-900)",
+ "description": "Used by `--spectrum-standard-dialog-heading-text-color`.",
+ "control": "color",
+ "category": "Global"
+ },
+ "spectrum-standard-dialog-description-text-color": {
+ "value": "var(--spectrum-gray-800)",
+ "description": "Defined in `.spectrum-Dialog`.
Used by `.spectrum-Dialog-content`.
Defaults to `var(--spectrum-body-color)`, if not set.",
+ "control": "color",
+ "category": "Global"
+ },
+ "spectrum-body-color": {
+ "value": "var(--spectrum-gray-800)",
+ "description": "Used by `--spectrum-standard-dialog-description-text-color`.",
+ "control": "color",
+ "category": "Global"
+ },
+ "spectrum-standard-dialog-background-color": {
+ "value": "var(--spectrum-gray-25)",
+ "description": "Defined in `.spectrum-Dialog`.
Used by `.spectrum-Dialog`.
Defaults to `var(--spectrum-background-layer-2-color)`, if not set.",
+ "control": "color",
+ "category": "Global"
+ },
+ "spectrum-background-layer-2-color": {
+ "value": "var(--spectrum-gray-25)",
+ "description": "Used by `--spectrum-standard-dialog-background-color`.",
+ "control": "color",
+ "category": "Global"
+ },
+ "spectrum-standard-dialog-padding": {
+ "value": "var(--spectrum-standard-dialog-spacing-edge-to-content)",
+ "description": "Defined in `.spectrum-Dialog`.
Used by `--spectrum-standard-dialog-spacing-grid-padding`.
Defaults to `var(--spectrum-standard-dialog-spacing-edge-to-content)`, if not set.",
+ "control": "text",
+ "category": "Global"
+ },
+ "spectrum-standard-dialog-spacing-edge-to-content": {
+ "description": "Used by `--spectrum-standard-dialog-padding`, `.spectrum-Dialog--dismissible .spectrum-Dialog-grid`.",
+ "control": "text",
+ "category": "Global"
+ },
+ "spectrum-standard-dialog-spacing-title-to-description": {
+ "value": "16px",
+ "description": "Defined in `.spectrum-Dialog`.
Used by `.spectrum-Dialog-header`, `.spectrum-Dialog-heading`.
Defaults to `var(--spectrum-spacing-300)`, if not set.",
+ "control": "text",
+ "category": "Global"
+ },
+ "spectrum-spacing-300": {
+ "value": "16px",
+ "description": "Used by `--spectrum-standard-dialog-spacing-title-to-description`.",
+ "control": "text",
+ "category": "Global"
+ },
+ "spectrum-standard-dialog-spacing-description-to-footer": {
+ "value": "32px",
+ "description": "Defined in `.spectrum-Dialog`.
Used by `.spectrum-Dialog-footer`, `.spectrum-Dialog-buttonGroup--noFooter`.
Defaults to `var(--spectrum-spacing-500)`, if not set.",
+ "control": "text",
+ "category": "Global"
+ },
+ "spectrum-spacing-500": {
+ "value": "32px",
+ "description": "Used by `--spectrum-standard-dialog-spacing-description-to-footer`.",
+ "control": "text",
+ "category": "Global"
+ },
+ "spectrum-standard-dialog-spacing-title-to-header-content": {
+ "value": "24px",
+ "description": "Defined in `.spectrum-Dialog`.
Used by `.spectrum-Dialog-header`.
Defaults to `var(--spectrum-spacing-400)`, if not set.",
+ "control": "text",
+ "category": "Global"
+ },
+ "spectrum-spacing-400": {
+ "value": "24px",
+ "description": "Used by `--spectrum-standard-dialog-spacing-title-to-header-content`, `--spectrum-standard-dialog-spacing-edge-to-header-content-inline-end`, `--spectrum-standard-dialog-spacing-footer-to-button-group`.",
+ "control": "text",
+ "category": "Global"
+ },
+ "spectrum-standard-dialog-spacing-edge-to-header-content-inline-end": {
+ "value": "24px",
+ "description": "Defined in `.spectrum-Dialog`.
Used by `.spectrum-Dialog--dismissible .spectrum-Dialog-grid`.
Defaults to `var(--spectrum-spacing-400)`, if not set.",
+ "control": "text",
+ "category": "Global"
+ },
+ "spectrum-standard-dialog-spacing-footer-to-button-group": {
+ "value": "24px",
+ "description": "Defined in `.spectrum-Dialog`.
Used by `.spectrum-Dialog-footer`.
Defaults to `var(--spectrum-spacing-400)`, if not set.",
+ "control": "text",
+ "category": "Global"
+ },
+ "spectrum-standard-dialog-spacing-grid-padding": {
+ "value": "var(--spectrum-standard-dialog-padding)",
+ "description": "Defined in `.spectrum-Dialog`.
Used by `.spectrum-Dialog-grid`, `.spectrum-Dialog--dismissible .spectrum-Dialog-grid`, `.spectrum-Dialog--fullscreen.spectrum-Dialog .spectrum-Dialog-grid, .spectrum-Dialog--fullscreenTakeover.spectrum-Dialog .spectrum-Dialog-grid`.
Defaults to `var(--spectrum-standard-dialog-padding)`, if not set.",
+ "control": "text",
+ "category": "Global"
+ },
+ "spectrum-standard-dialog-spacing-edge-to-close-button": {
+ "value": "12px",
+ "description": "Defined in `.spectrum-Dialog`.
Used by `.spectrum-Dialog-closeButton`, `.spectrum-Dialog--dismissible .spectrum-Dialog-grid`.
Defaults to `var(--spectrum-spacing-200)`, if not set.",
+ "control": "text",
+ "category": "Global"
+ },
+ "spectrum-spacing-200": {
+ "value": "12px",
+ "description": "Used by `--spectrum-standard-dialog-spacing-edge-to-close-button`.",
+ "control": "text",
+ "category": "Global"
+ },
+ "spectrum-standard-dialog-hero-block-size": {
+ "value": "140px",
+ "description": "Defined in `.spectrum-Dialog`.
Used by `.spectrum-Dialog-hero`.
Defaults to `140px`, if not set.",
+ "control": "text",
+ "category": "Global"
+ },
+ "spectrum-takeover-dialog-title-font-size": {
+ "value": "var(--spectrum-font-size-500)",
+ "description": "Defined in `.spectrum-Dialog`.
Used by `.spectrum-Dialog--fullscreen .spectrum-Dialog-heading, .spectrum-Dialog--fullscreenTakeover .spectrum-Dialog-heading`.
Defaults to `var(--spectrum-title-size-xxl)`, if not set.",
+ "control": "text",
+ "category": "Global"
+ },
+ "spectrum-title-size-xxl": {
+ "value": "var(--spectrum-font-size-500)",
+ "description": "Used by `--spectrum-takeover-dialog-title-font-size`.",
+ "control": "text",
+ "category": "Global"
+ },
+ "spectrum-takeover-dialog-grid-spacing": {
+ "value": "var(--spectrum-takeover-dialog-spacing-grid-padding)",
+ "description": "Defined in `.spectrum-Dialog`.
Used by `.spectrum-Dialog--fullscreen .spectrum-Dialog-grid, .spectrum-Dialog--fullscreenTakeover .spectrum-Dialog-grid`.
Defaults to `var(--spectrum-takeover-dialog-spacing-grid-padding)`, if not set.",
+ "control": "text",
+ "category": "Global"
+ },
+ "spectrum-takeover-dialog-spacing-grid-padding": {
+ "description": "Used by `--spectrum-takeover-dialog-grid-spacing`.",
+ "control": "text",
+ "category": "Global"
+ },
+ "spectrum-takeover-dialog-spacing-header-content-gap": {
+ "value": "var(--spectrum-takeover-dialog-spacing-header-gap)",
+ "description": "Defined in `.spectrum-Dialog`.
Used by `.spectrum-Dialog--fullscreen .spectrum-Dialog-header, .spectrum-Dialog--fullscreenTakeover .spectrum-Dialog-header`, `.spectrum-Dialog--fullscreen .spectrum-Dialog-header, .spectrum-Dialog--fullscreenTakeover .spectrum-Dialog-header`.
Defaults to `var(--spectrum-takeover-dialog-spacing-header-gap)`, if not set.",
+ "control": "text",
+ "category": "Global"
+ },
+ "spectrum-takeover-dialog-spacing-header-gap": {
+ "description": "Used by `--spectrum-takeover-dialog-spacing-header-content-gap`.",
+ "control": "text",
+ "category": "Global"
+ },
+ "spectrum-takeover-dialog-spacing-title-to-content": {
+ "value": "var(--spectrum-takeover-dialog-spacing-title-to-body)",
+ "description": "Defined in `.spectrum-Dialog`.
Used by `.spectrum-Dialog--fullscreen .spectrum-Dialog-header, .spectrum-Dialog--fullscreenTakeover .spectrum-Dialog-header`.
Defaults to `var(--spectrum-takeover-dialog-spacing-title-to-body)`, if not set.",
+ "control": "text",
+ "category": "Global"
+ },
+ "spectrum-takeover-dialog-spacing-title-to-body": {
+ "description": "Used by `--spectrum-takeover-dialog-spacing-title-to-content`.",
+ "control": "text",
+ "category": "Global"
+ },
+ "spectrum-takeover-dialog-inline-size": {
+ "value": "100%",
+ "description": "Defined in `.spectrum-Dialog`.
Used by `.spectrum-Dialog--fullscreen, .spectrum-Dialog--fullscreenTakeover`.
Defaults to `var(--spectrum-takeover-dialog-width)`, if not set.",
+ "control": "text",
+ "category": "Global"
+ },
+ "spectrum-takeover-dialog-width": {
+ "value": "100%",
+ "description": "Used by `--spectrum-takeover-dialog-inline-size`.",
+ "control": "text",
+ "category": "Global"
+ },
+ "spectrum-takeover-dialog-block-size": {
+ "value": "100%",
+ "description": "Defined in `.spectrum-Dialog`.
Used by `.spectrum-Dialog--fullscreen, .spectrum-Dialog--fullscreenTakeover`.
Defaults to `var(--spectrum-takeover-dialog-height)`, if not set.",
+ "control": "text",
+ "category": "Global"
+ },
+ "spectrum-takeover-dialog-height": {
+ "value": "100%",
+ "description": "Used by `--spectrum-takeover-dialog-block-size`.",
+ "control": "text",
+ "category": "Global"
+ },
+ "spectrum-standard-dialog-maximum-width-small": {
+ "value": "400px",
+ "description": "Used by `--spectrum-standard-dialog-max-width`.",
+ "control": "text",
+ "category": "Global"
+ },
+ "spectrum-standard-dialog-maximum-width-large": {
+ "value": "640px",
+ "description": "Used by `--spectrum-standard-dialog-max-width`.",
+ "control": "text",
+ "category": "Global"
+ },
+ "spectrum-black-rgb": {
+ "description": "Used by `.spectrum-Dialog`.",
+ "control": "text",
+ "category": "Global"
+ },
+ "spectrum-overlay-opacity": {
+ "value": "light-dark(0.4, 0.6)",
+ "description": "Used by `.spectrum-Dialog`.",
+ "control": "text",
+ "category": "Global"
+ }
+ },
+ "passthroughs": {
+ "mod-buttongroup-justify-content": {
+ "category": "Passthrough"
+ },
+ "mod-buttongroup-flex-wrap": {
+ "category": "Passthrough"
+ }
+ },
+ "high-contrast": {}
}
diff --git a/components/dialog/stories/dialog.stories.js b/components/dialog/stories/dialog.stories.js
index 791316711fd..4dbc697b9c6 100644
--- a/components/dialog/stories/dialog.stories.js
+++ b/components/dialog/stories/dialog.stories.js
@@ -4,11 +4,13 @@ import { isOpen, size } from "@spectrum-css/preview/types";
import { Template as Steplist } from "@spectrum-css/steplist/stories/template.js";
import { Template as Table } from "@spectrum-css/table/stories/template.js";
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. Standard dialogs are the most frequent type of dialogs. They appear in the center of the screen over the interface and should be used for moderately complex tasks. Takeover dialogs are large types of dialogs. They use the totality of the screen and should be used for modal experiences with complex workflows.
*
@@ -166,6 +168,10 @@ export default {
status: {
type: "migrated",
},
+ cssprops: {
+ ...metadata.modifiers,
+ ...metadata.component,
+ },
},
decorators: [
withUnderlayWrapper,
diff --git a/components/divider/dist/metadata.json b/components/divider/dist/metadata.json
index 94ce19f83fd..340772408e5 100644
--- a/components/divider/dist/metadata.json
+++ b/components/divider/dist/metadata.json
@@ -11,34 +11,143 @@
".spectrum-Divider--vertical",
".spectrum-Divider:not(.spectrum-Divider.spectrum-Divider--vertical)"
],
- "modifiers": [
- "--mod-divider-background-color",
- "--mod-divider-block-minimum-size",
- "--mod-divider-inline-minimum-size",
- "--mod-divider-thickness",
- "--mod-divider-vertical-align",
- "--mod-divider-vertical-height",
- "--mod-divider-vertical-margin"
- ],
- "component": [
- "--spectrum-divider-background-color",
- "--spectrum-divider-block-minimum-size",
- "--spectrum-divider-horizontal-minimum-width",
- "--spectrum-divider-inline-minimum-size",
- "--spectrum-divider-thickness",
- "--spectrum-divider-thickness-large",
- "--spectrum-divider-thickness-medium",
- "--spectrum-divider-thickness-small",
- "--spectrum-divider-vertical-minimum-height"
- ],
- "global": [
- "--spectrum-gray-200",
- "--spectrum-gray-800",
- "--spectrum-transparent-black-200",
- "--spectrum-transparent-black-800",
- "--spectrum-transparent-white-200",
- "--spectrum-transparent-white-800"
- ],
- "passthroughs": [],
- "high-contrast": ["--highcontrast-divider-background-color"]
+ "modifiers": {
+ "mod-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-background-color": {
+ "description": "Used by `.spectrum-Divider`.
Defaults to `var(--spectrum-divider-background-color)`, if not set.",
+ "control": "color",
+ "category": "Modifier"
+ },
+ "mod-divider-inline-minimum-size": {
+ "description": "Used by `.spectrum-Divider:not(.spectrum-Divider.spectrum-Divider--vertical)`.
Defaults to `var(--spectrum-divider-inline-minimum-size)`, if not set.",
+ "control": "text",
+ "category": "Modifier"
+ },
+ "mod-divider-block-minimum-size": {
+ "description": "Used by `.spectrum-Divider--vertical`.
Defaults to `var(--spectrum-divider-block-minimum-size)`, if not set.",
+ "control": "text",
+ "category": "Modifier"
+ },
+ "mod-divider-vertical-margin": {
+ "description": "Used by `.spectrum-Divider--vertical`.",
+ "control": "text",
+ "category": "Modifier"
+ },
+ "mod-divider-vertical-height": {
+ "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-background-color": {
+ "value": "rgba(0, 0, 0, 0.84)",
+ "description": "Defined in `.spectrum-Divider`, `.spectrum-Divider--sizeL`, `.spectrum-Divider--staticWhite`, `.spectrum-Divider--staticWhite.spectrum-Divider--sizeL`, `.spectrum-Divider--staticBlack`, `.spectrum-Divider--staticBlack.spectrum-Divider--sizeL`.
Used by `.spectrum-Divider`.
Defaults to `var(--spectrum-transparent-black-800)`, if not set.",
+ "control": "color",
+ "category": "Component"
+ },
+ "spectrum-divider-thickness": {
+ "value": "4px",
+ "description": "Defined in `.spectrum-Divider`, `.spectrum-Divider--sizeS`, `.spectrum-Divider--sizeL`.
Used by `.spectrum-Divider`, `.spectrum-Divider--vertical`.
Defaults to `var(--spectrum-divider-thickness-large)`, if not set.",
+ "control": "text",
+ "category": "Component"
+ },
+ "spectrum-divider-thickness-medium": {
+ "value": "2px",
+ "description": "Used by `--spectrum-divider-thickness`.",
+ "control": "text",
+ "category": "Component"
+ },
+ "spectrum-divider-inline-minimum-size": {
+ "value": "200px",
+ "description": "Defined in `.spectrum-Divider`.
Used by `.spectrum-Divider:not(.spectrum-Divider.spectrum-Divider--vertical)`.
Defaults to `var(--spectrum-divider-horizontal-minimum-width)`, if not set.",
+ "control": "text",
+ "category": "Component"
+ },
+ "spectrum-divider-horizontal-minimum-width": {
+ "value": "200px",
+ "description": "Used by `--spectrum-divider-inline-minimum-size`.",
+ "control": "text",
+ "category": "Component"
+ },
+ "spectrum-divider-block-minimum-size": {
+ "value": "200px",
+ "description": "Defined in `.spectrum-Divider`.
Used by `.spectrum-Divider--vertical`.
Defaults to `var(--spectrum-divider-vertical-minimum-height)`, if not set.",
+ "control": "text",
+ "category": "Component"
+ },
+ "spectrum-divider-vertical-minimum-height": {
+ "value": "200px",
+ "description": "Used by `--spectrum-divider-block-minimum-size`.",
+ "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"
+ }
+ },
+ "global": {
+ "spectrum-gray-200": {
+ "value": "light-dark(rgb(225, 225, 225), rgb(50, 50, 50))",
+ "description": "Used by `--spectrum-divider-background-color`.",
+ "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-200": {
+ "value": "rgba(255, 255, 255, 0.14)",
+ "description": "Used by `--spectrum-divider-background-color`.",
+ "control": "text",
+ "category": "Global"
+ },
+ "spectrum-transparent-white-800": {
+ "value": "rgba(255, 255, 255, 0.85)",
+ "description": "Used by `--spectrum-divider-background-color`.",
+ "control": "text",
+ "category": "Global"
+ },
+ "spectrum-transparent-black-200": {
+ "value": "rgba(0, 0, 0, 0.12)",
+ "description": "Used by `--spectrum-divider-background-color`.",
+ "control": "text",
+ "category": "Global"
+ },
+ "spectrum-transparent-black-800": {
+ "value": "rgba(0, 0, 0, 0.84)",
+ "description": "Used by `--spectrum-divider-background-color`.",
+ "control": "text",
+ "category": "Global"
+ }
+ },
+ "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 fe5696c1371..0c15c4cc2d8 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.
*/
@@ -41,6 +43,10 @@ export default {
status: {
type: "migrated",
},
+ cssprops: {
+ ...metadata.modifiers,
+ ...metadata.component,
+ },
},
tags: ["migrated"],
};
diff --git a/components/dropindicator/dist/metadata.json b/components/dropindicator/dist/metadata.json
index 294d6ad70bb..fb0409ada7c 100644
--- a/components/dropindicator/dist/metadata.json
+++ b/components/dropindicator/dist/metadata.json
@@ -11,18 +11,61 @@
".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"],
- "passthroughs": [],
- "high-contrast": ["--highcontrast-dropindicator-color"]
+ "modifiers": {
+ "mod-dropindicator-border-color": {
+ "description": "Used by `.spectrum-DropIndicator`.
Defaults to `var(--spectrum-dropindicator-color)`, if not set.",
+ "control": "color",
+ "category": "Modifier"
+ },
+ "mod-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": {
+ "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": {
+ "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": {
+ "value": "2px",
+ "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`.
Defaults to `var(--spectrum-border-width-200)`, if not set.",
+ "control": "text",
+ "category": "Component"
+ },
+ "spectrum-dropindicator-circle-size": {
+ "value": "12px",
+ "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`.
Defaults to `12px`, if not set.",
+ "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"
+ }
+ },
+ "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..576db99579e 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,10 @@ export default {
parameters: {
packageJson,
metadata,
+ cssprops: {
+ ...metadata.modifiers,
+ ...metadata.component,
+ },
},
};
diff --git a/components/dropzone/dist/metadata.json b/components/dropzone/dist/metadata.json
index e91812f2d27..19dff183084 100644
--- a/components/dropzone/dist/metadata.json
+++ b/components/dropzone/dist/metadata.json
@@ -11,107 +11,471 @@
".spectrum-DropZone-content",
".spectrum-DropZone-stroke",
".spectrum-DropZone-strokePath",
+ ".spectrum-DropZone:focus-visible",
+ ".spectrum-DropZone:has(.spectrum-DropZone-stroke)",
".spectrum-DropZone.is-dragged",
".spectrum-DropZone.is-dragged .spectrum-DropZone-strokePath",
".spectrum-DropZone.is-filled",
".spectrum-DropZone.is-filled.is-dragged",
".spectrum-DropZone.is-filled.is-dragged .spectrum-DropZone-actions",
- ".spectrum-DropZone.is-filled.is-dragged .spectrum-DropZone-content",
- ".spectrum-DropZone:focus-visible",
- ".spectrum-DropZone:has(.spectrum-DropZone-stroke)"
- ],
- "modifiers": [
- "--mod-drop-zone-background-color",
- "--mod-drop-zone-background-color-opacity",
- "--mod-drop-zone-background-color-opacity-filled",
- "--mod-drop-zone-body-font-size",
- "--mod-drop-zone-body-to-action",
- "--mod-drop-zone-border-color",
- "--mod-drop-zone-border-color-hover",
- "--mod-drop-zone-border-dash-gap",
- "--mod-drop-zone-border-dash-length",
- "--mod-drop-zone-border-style",
- "--mod-drop-zone-border-style-dragged",
- "--mod-drop-zone-border-width",
- "--mod-drop-zone-content-background-color",
- "--mod-drop-zone-content-bottom-to-text",
- "--mod-drop-zone-content-font-family",
- "--mod-drop-zone-content-font-size",
- "--mod-drop-zone-content-font-weight",
- "--mod-drop-zone-content-height",
- "--mod-drop-zone-content-max-width",
- "--mod-drop-zone-content-maximum-width",
- "--mod-drop-zone-content-top-to-text",
- "--mod-drop-zone-corner-radius",
- "--mod-drop-zone-edge-to-text",
- "--mod-drop-zone-illustration-color-hover",
- "--mod-drop-zone-inline-size",
- "--mod-drop-zone-padding",
- "--mod-drop-zone-title-line-height"
- ],
- "component": [
- "--spectrum-drop-zone-background-color",
- "--spectrum-drop-zone-background-color-opacity",
- "--spectrum-drop-zone-background-color-opacity-filled",
- "--spectrum-drop-zone-background-color-rgb",
- "--spectrum-drop-zone-body-font-size",
- "--spectrum-drop-zone-body-to-action",
- "--spectrum-drop-zone-border-color",
- "--spectrum-drop-zone-border-color-hover",
- "--spectrum-drop-zone-border-dash-gap",
- "--spectrum-drop-zone-border-dash-length",
- "--spectrum-drop-zone-border-width",
- "--spectrum-drop-zone-component-height",
- "--spectrum-drop-zone-content-background-color",
- "--spectrum-drop-zone-content-bottom-to-text",
- "--spectrum-drop-zone-content-font-family",
- "--spectrum-drop-zone-content-font-size",
- "--spectrum-drop-zone-content-font-weight",
- "--spectrum-drop-zone-content-max-width",
- "--spectrum-drop-zone-content-maximum-width",
- "--spectrum-drop-zone-content-top-to-text",
- "--spectrum-drop-zone-corner-radius",
- "--spectrum-drop-zone-dragged-background-color",
- "--spectrum-drop-zone-edge-to-text",
- "--spectrum-drop-zone-illustration-color-hover",
- "--spectrum-drop-zone-inline-size",
- "--spectrum-drop-zone-padding",
- "--spectrum-drop-zone-stroke-dash-gap",
- "--spectrum-drop-zone-stroke-dash-length",
- "--spectrum-drop-zone-title-line-height",
- "--spectrum-drop-zone-width"
- ],
- "global": [
- "--spectrum-accent-content-color-default",
- "--spectrum-accent-visual-color",
- "--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-500",
- "--spectrum-corner-radius-700",
- "--spectrum-font-size-300",
- "--spectrum-gray-300",
- "--spectrum-line-height-100",
- "--spectrum-sans-font-family-stack",
- "--spectrum-spacing-300",
- "--spectrum-spacing-400"
- ],
- "passthroughs": [
- "--mod-button-border-radius",
- "--mod-illustrated-message-description-font-size",
- "--mod-illustrated-message-description-position",
- "--mod-illustrated-message-description-to-action",
- "--mod-illustrated-message-description-z-index",
- "--mod-illustrated-message-display",
- "--mod-illustrated-message-illustration-color",
- "--mod-illustrated-message-vertical-maximum-width"
+ ".spectrum-DropZone.is-filled.is-dragged .spectrum-DropZone-content"
],
- "high-contrast": [
- "--highcontrast-drop-zone-border-color",
- "--highcontrast-drop-zone-border-color-hover",
- "--highcontrast-drop-zone-button-color"
- ]
+ "modifiers": {
+ "mod-drop-zone-content-maximum-width": {
+ "description": "Used by `--mod-illustrated-message-vertical-maximum-width`.
Defaults to `var(--spectrum-drop-zone-content-maximum-width)`, if not set.",
+ "control": "text",
+ "category": "Modifier"
+ },
+ "mod-drop-zone-body-to-action": {
+ "description": "Used by `--mod-illustrated-message-description-to-action`.
Defaults to `var(--spectrum-drop-zone-body-to-action)`, if not set.",
+ "control": "text",
+ "category": "Modifier"
+ },
+ "mod-drop-zone-body-font-size": {
+ "description": "Used by `--mod-illustrated-message-description-font-size`.
Defaults to `var(--spectrum-drop-zone-body-font-size)`, if not set.",
+ "control": "text",
+ "category": "Modifier"
+ },
+ "mod-drop-zone-content-height": {
+ "description": "Defined in `.spectrum-DropZone`.
Used by `.spectrum-DropZone.is-filled.is-dragged`.
Defaults to `280px`, if not set.",
+ "control": "text",
+ "category": "Modifier"
+ },
+ "mod-drop-zone-inline-size": {
+ "description": "Used by `.spectrum-DropZone`.
Defaults to `var(--spectrum-drop-zone-inline-size)`, if not set.",
+ "control": "text",
+ "category": "Modifier"
+ },
+ "mod-drop-zone-padding": {
+ "description": "Used by `.spectrum-DropZone`.
Defaults to `var(--spectrum-drop-zone-padding)`, if not set.",
+ "control": "text",
+ "category": "Modifier"
+ },
+ "mod-drop-zone-border-width": {
+ "description": "Used by `.spectrum-DropZone`, `.spectrum-DropZone-strokePath`.
Defaults to `var(--spectrum-drop-zone-border-width)`, if not set.",
+ "control": "text",
+ "category": "Modifier"
+ },
+ "mod-drop-zone-corner-radius": {
+ "description": "Used by `.spectrum-DropZone`.
Defaults to `var(--spectrum-drop-zone-corner-radius)`, if not set.",
+ "control": "text",
+ "category": "Modifier"
+ },
+ "mod-drop-zone-background-color": {
+ "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-color": {
+ "description": "Used by `.spectrum-DropZone`, `.spectrum-DropZone-strokePath`.
Defaults to `var(--spectrum-drop-zone-border-color)`, if not set.",
+ "control": "color",
+ "category": "Modifier"
+ },
+ "mod-drop-zone-border-style": {
+ "description": "Defined in `.spectrum-DropZone.is-dragged`.
Defaults to `var(--mod-drop-zone-border-style-dragged, solid)`, if not set.",
+ "control": "text",
+ "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": {
+ "description": "Used by `--mod-drop-zone-background-color`.
Defaults to `var(--spectrum-drop-zone-dragged-background-color)`, if not set.",
+ "control": "color",
+ "category": "Modifier"
+ },
+ "mod-drop-zone-border-color-hover": {
+ "description": "Used by `--spectrum-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": {
+ "description": "Used by `--mod-illustrated-message-illustration-color`.
Defaults to `var(--spectrum-drop-zone-illustration-color-hover)`, if not set.",
+ "control": "color",
+ "category": "Modifier"
+ },
+ "mod-drop-zone-background-color-opacity-filled": {
+ "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-border-dash-length": {
+ "description": "Used by `.spectrum-DropZone-strokePath`.
Defaults to `var(--spectrum-drop-zone-stroke-dash-length)`, if not set.",
+ "control": "text",
+ "category": "Modifier"
+ },
+ "mod-drop-zone-border-dash-gap": {
+ "description": "Used by `.spectrum-DropZone-strokePath`.
Defaults to `var(--spectrum-drop-zone-stroke-dash-gap)`, if not set.",
+ "control": "text",
+ "category": "Modifier"
+ },
+ "mod-drop-zone-content-max-width": {
+ "description": "Used by `.spectrum-DropZone-button`.
Defaults to `var(--spectrum-drop-zone-content-max-width)`, if not set.",
+ "control": "text",
+ "category": "Modifier"
+ },
+ "mod-drop-zone-content-top-to-text": {
+ "description": "Used by `.spectrum-DropZone-button`.
Defaults to `var(--spectrum-drop-zone-content-top-to-text)`, if not set.",
+ "control": "text",
+ "category": "Modifier"
+ },
+ "mod-drop-zone-content-bottom-to-text": {
+ "description": "Used by `.spectrum-DropZone-button`.
Defaults to `var(--spectrum-drop-zone-content-bottom-to-text)`, if not set.",
+ "control": "text",
+ "category": "Modifier"
+ },
+ "mod-drop-zone-edge-to-text": {
+ "description": "Used by `.spectrum-DropZone-button`.
Defaults to `var(--spectrum-drop-zone-edge-to-text)`, if not set.",
+ "control": "text",
+ "category": "Modifier"
+ },
+ "mod-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"
+ },
+ "mod-drop-zone-content-font-family": {
+ "description": "Used by `.spectrum-DropZone-button`.
Defaults to `var(--spectrum-drop-zone-content-font-family)`, if not set.",
+ "control": "text",
+ "category": "Modifier"
+ },
+ "mod-drop-zone-content-font-weight": {
+ "description": "Used by `.spectrum-DropZone-button`.
Defaults to `var(--spectrum-drop-zone-content-font-weight)`, if not set.",
+ "control": "text",
+ "category": "Modifier"
+ },
+ "mod-drop-zone-title-line-height": {
+ "description": "Used by `.spectrum-DropZone-button`.
Defaults to `var(--spectrum-drop-zone-title-line-height)`, if not set.",
+ "control": "text",
+ "category": "Modifier"
+ },
+ "mod-drop-zone-content-font-size": {
+ "description": "Used by `.spectrum-DropZone-button .spectrum-Button-label`.
Defaults to `var(--spectrum-drop-zone-content-font-size)`, if not set.",
+ "control": "text",
+ "category": "Modifier"
+ }
+ },
+ "component": {
+ "spectrum-drop-zone-padding": {
+ "value": "24px",
+ "description": "Defined in `.spectrum-DropZone`.
Used by `.spectrum-DropZone`.
Defaults to `var(--spectrum-spacing-400)`, if not set.",
+ "control": "text",
+ "category": "Component"
+ },
+ "spectrum-drop-zone-border-width": {
+ "value": "2px",
+ "description": "Defined in `.spectrum-DropZone`.
Used by `.spectrum-DropZone`, `.spectrum-DropZone-strokePath`.
Defaults to `var(--spectrum-border-width-200)`, if not set.",
+ "control": "text",
+ "category": "Component"
+ },
+ "spectrum-drop-zone-corner-radius": {
+ "value": "10px",
+ "description": "Defined in `.spectrum-DropZone`.
Used by `.spectrum-DropZone`, `.spectrum-DropZone-strokePath`.
Defaults to `var(--spectrum-corner-radius-700)`, if not set.",
+ "control": "text",
+ "category": "Component"
+ },
+ "spectrum-drop-zone-border-color": {
+ "value": "var(--highcontrast-drop-zone-border-color-hover, var(--mod-drop-zone-border-color-hover, var(--spectrum-drop-zone-border-color-hover)))",
+ "description": "Defined in `.spectrum-DropZone`, `.spectrum-DropZone.is-dragged`, `.spectrum-DropZone:focus-visible`.
Used by `.spectrum-DropZone`, `.spectrum-DropZone-strokePath`.
Defaults to `var(--highcontrast-drop-zone-border-color-hover, var(--mod-drop-zone-border-color-hover, var(--spectrum-drop-zone-border-color-hover)))`, if not set.",
+ "control": "color",
+ "category": "Component"
+ },
+ "spectrum-drop-zone-inline-size": {
+ "value": "428px",
+ "description": "Defined in `.spectrum-DropZone`.
Used by `.spectrum-DropZone`.
Defaults to `var(--spectrum-drop-zone-width)`, if not set.",
+ "control": "text",
+ "category": "Component"
+ },
+ "spectrum-drop-zone-width": {
+ "value": "428px",
+ "description": "Used by `--spectrum-drop-zone-inline-size`.",
+ "control": "text",
+ "category": "Component"
+ },
+ "spectrum-drop-zone-background-color": {
+ "value": "var(--spectrum-accent-visual-color)",
+ "description": "Defined in `.spectrum-DropZone`.
Used by `.spectrum-DropZone`, `--mod-drop-zone-background-color`.
Defaults to `var(--spectrum-drop-zone-background-color-rgb)`, if not set.",
+ "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": {
+ "value": "var(--spectrum-accent-color-800)",
+ "description": "Defined in `.spectrum-DropZone`.
Used by `--spectrum-drop-zone-border-color`.
Defaults to `var(--spectrum-accent-visual-color)`, if not set.",
+ "control": "color",
+ "category": "Component"
+ },
+ "spectrum-drop-zone-illustration-color-hover": {
+ "value": "var(--spectrum-accent-color-900)",
+ "description": "Defined in `.spectrum-DropZone`.
Used by `--mod-illustrated-message-illustration-color`, `.spectrum-DropZone.is-dragged`.
Defaults to `var(--spectrum-accent-content-color-default)`, if not set.",
+ "control": "color",
+ "category": "Component"
+ },
+ "spectrum-drop-zone-body-to-action": {
+ "value": "16px",
+ "description": "Defined in `.spectrum-DropZone`.
Used by `--mod-illustrated-message-description-to-action`, `.spectrum-DropZone-actions`.
Defaults to `var(--spectrum-spacing-300)`, if not set.",
+ "control": "text",
+ "category": "Component"
+ },
+ "spectrum-drop-zone-stroke-dash-gap": {
+ "value": "6px",
+ "description": "Defined in `.spectrum-DropZone`.
Used by `.spectrum-DropZone-strokePath`.
Defaults to `var(--spectrum-drop-zone-border-dash-gap)`, if not set.",
+ "control": "text",
+ "category": "Component"
+ },
+ "spectrum-drop-zone-border-dash-gap": {
+ "value": "6px",
+ "description": "Used by `--spectrum-drop-zone-stroke-dash-gap`.",
+ "control": "text",
+ "category": "Component"
+ },
+ "spectrum-drop-zone-stroke-dash-length": {
+ "value": "8px",
+ "description": "Defined in `.spectrum-DropZone`.
Used by `.spectrum-DropZone-strokePath`.
Defaults to `var(--spectrum-drop-zone-border-dash-length)`, if not set.",
+ "control": "text",
+ "category": "Component"
+ },
+ "spectrum-drop-zone-border-dash-length": {
+ "value": "8px",
+ "description": "Used by `--spectrum-drop-zone-stroke-dash-length`.",
+ "control": "text",
+ "category": "Component"
+ },
+ "spectrum-drop-zone-dragged-background-color": {
+ "value": "0.1",
+ "description": "Defined in `.spectrum-DropZone`.
Used by `--mod-drop-zone-background-color`.
Defaults to `var(--spectrum-drop-zone-background-color-opacity)`, if not set.",
+ "control": "color",
+ "category": "Component"
+ },
+ "spectrum-drop-zone-background-color-opacity": {
+ "value": "0.1",
+ "description": "Used by `--spectrum-drop-zone-dragged-background-color`.",
+ "control": "color",
+ "category": "Component"
+ },
+ "spectrum-drop-zone-content-max-width": {
+ "value": "380px",
+ "description": "Defined in `.spectrum-DropZone`.
Used by `.spectrum-DropZone-button`.
Defaults to `var(--spectrum-drop-zone-content-maximum-width)`, if not set.",
+ "control": "text",
+ "category": "Component"
+ },
+ "spectrum-drop-zone-content-maximum-width": {
+ "value": "380px",
+ "description": "Used by `--spectrum-drop-zone-content-max-width`, `--mod-illustrated-message-vertical-maximum-width`.",
+ "control": "text",
+ "category": "Component"
+ },
+ "spectrum-drop-zone-content-top-to-text": {
+ "value": "12px",
+ "description": "Defined in `.spectrum-DropZone`.
Used by `.spectrum-DropZone-button`.
Defaults to `var(--spectrum-component-top-to-text-300)`, if not set.",
+ "control": "text",
+ "category": "Component"
+ },
+ "spectrum-drop-zone-content-bottom-to-text": {
+ "value": "14px",
+ "description": "Defined in `.spectrum-DropZone`.
Used by `.spectrum-DropZone-button`.
Defaults to `var(--spectrum-component-bottom-to-text-300)`, if not set.",
+ "control": "text",
+ "category": "Component"
+ },
+ "spectrum-drop-zone-component-height": {
+ "value": "48px",
+ "description": "Defined in `.spectrum-DropZone`.
Used by `.spectrum-DropZone-button`.
Defaults to `var(--spectrum-component-height-300)`, if not set.",
+ "control": "text",
+ "category": "Component"
+ },
+ "spectrum-drop-zone-edge-to-text": {
+ "value": "18px",
+ "description": "Defined in `.spectrum-DropZone`.
Used by `.spectrum-DropZone-button`.
Defaults to `var(--spectrum-component-edge-to-text-300)`, if not set.",
+ "control": "text",
+ "category": "Component"
+ },
+ "spectrum-drop-zone-content-font-family": {
+ "value": "var(--spectrum-sans-font-family-stack)",
+ "description": "Defined in `.spectrum-DropZone`.
Used by `.spectrum-DropZone-button`.
Defaults to `var(--spectrum-sans-font-family-stack)`, if not set.",
+ "control": "text",
+ "category": "Component"
+ },
+ "spectrum-drop-zone-content-font-weight": {
+ "value": "700",
+ "description": "Defined in `.spectrum-DropZone`.
Used by `.spectrum-DropZone-button`.
Defaults to `var(--spectrum-bold-font-weight)`, if not set.",
+ "control": "text",
+ "category": "Component"
+ },
+ "spectrum-drop-zone-content-font-size": {
+ "value": "18px",
+ "description": "Defined in `.spectrum-DropZone`.
Used by `.spectrum-DropZone-button .spectrum-Button-label`.
Defaults to `var(--spectrum-font-size-300)`, if not set.",
+ "control": "text",
+ "category": "Component"
+ },
+ "spectrum-drop-zone-title-line-height": {
+ "value": "1.3",
+ "description": "Defined in `.spectrum-DropZone`.
Used by `.spectrum-DropZone-button`.
Defaults to `var(--spectrum-line-height-100)`, if not set.",
+ "control": "text",
+ "category": "Component"
+ },
+ "spectrum-drop-zone-content-background-color": {
+ "value": "var(--spectrum-accent-color-800)",
+ "description": "Defined in `.spectrum-DropZone`.
Used by `.spectrum-DropZone-button`, `.spectrum-DropZone-button:focus`, `.spectrum-DropZone-button:hover`.
Defaults to `var(--spectrum-accent-visual-color)`, if not set.",
+ "control": "color",
+ "category": "Component"
+ },
+ "spectrum-drop-zone-body-font-size": {
+ "value": "var(--spectrum-illustrated-message-medium-body-font-size)",
+ "description": "Used by `--mod-illustrated-message-description-font-size`.",
+ "control": "text",
+ "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-spacing-400": {
+ "value": "24px",
+ "description": "Used by `--spectrum-drop-zone-padding`.",
+ "control": "text",
+ "category": "Global"
+ },
+ "spectrum-border-width-200": {
+ "value": "2px",
+ "description": "Used by `--spectrum-drop-zone-border-width`.",
+ "control": "text",
+ "category": "Global"
+ },
+ "spectrum-corner-radius-700": {
+ "value": "10px",
+ "description": "Used by `--spectrum-drop-zone-corner-radius`.",
+ "control": "text",
+ "category": "Global"
+ },
+ "spectrum-gray-300": {
+ "value": "light-dark(rgb(218, 218, 218), rgb(57, 57, 57))",
+ "description": "Used by `--spectrum-drop-zone-border-color`.",
+ "control": "text",
+ "category": "Global"
+ },
+ "spectrum-accent-visual-color": {
+ "value": "var(--spectrum-accent-color-800)",
+ "description": "Used by `--spectrum-drop-zone-border-color-hover`, `--spectrum-drop-zone-content-background-color`.",
+ "control": "color",
+ "category": "Global"
+ },
+ "spectrum-accent-content-color-default": {
+ "value": "var(--spectrum-accent-color-900)",
+ "description": "Used by `--spectrum-drop-zone-illustration-color-hover`.",
+ "control": "color",
+ "category": "Global"
+ },
+ "spectrum-spacing-300": {
+ "value": "16px",
+ "description": "Used by `--spectrum-drop-zone-body-to-action`.",
+ "control": "text",
+ "category": "Global"
+ },
+ "spectrum-component-top-to-text-300": {
+ "value": "12px",
+ "description": "Used by `--spectrum-drop-zone-content-top-to-text`.",
+ "control": "text",
+ "category": "Global"
+ },
+ "spectrum-component-bottom-to-text-300": {
+ "value": "14px",
+ "description": "Used by `--spectrum-drop-zone-content-bottom-to-text`.",
+ "control": "text",
+ "category": "Global"
+ },
+ "spectrum-component-height-300": {
+ "value": "48px",
+ "description": "Used by `--spectrum-drop-zone-component-height`.",
+ "control": "text",
+ "category": "Global"
+ },
+ "spectrum-component-edge-to-text-300": {
+ "value": "18px",
+ "description": "Used by `--spectrum-drop-zone-edge-to-text`.",
+ "control": "text",
+ "category": "Global"
+ },
+ "spectrum-sans-font-family-stack": {
+ "description": "Used by `--spectrum-drop-zone-content-font-family`.",
+ "control": "text",
+ "category": "Global"
+ },
+ "spectrum-bold-font-weight": {
+ "value": "700",
+ "description": "Used by `--spectrum-drop-zone-content-font-weight`.",
+ "control": "text",
+ "category": "Global"
+ },
+ "spectrum-font-size-300": {
+ "value": "18px",
+ "description": "Used by `--spectrum-drop-zone-content-font-size`.",
+ "control": "text",
+ "category": "Global"
+ },
+ "spectrum-line-height-100": {
+ "value": "1.3",
+ "description": "Used by `--spectrum-drop-zone-title-line-height`.",
+ "control": "text",
+ "category": "Global"
+ },
+ "spectrum-corner-radius-500": {
+ "value": "8px",
+ "description": "Used by `--mod-button-border-radius`.",
+ "control": "text",
+ "category": "Global"
+ }
+ },
+ "passthroughs": {
+ "mod-illustrated-message-vertical-maximum-width": {
+ "category": "Passthrough"
+ },
+ "mod-illustrated-message-description-to-action": {
+ "category": "Passthrough"
+ },
+ "mod-illustrated-message-description-position": {
+ "category": "Passthrough"
+ },
+ "mod-illustrated-message-description-z-index": {
+ "category": "Passthrough"
+ },
+ "mod-illustrated-message-description-font-size": {
+ "category": "Passthrough"
+ },
+ "mod-illustrated-message-illustration-color": {
+ "category": "Passthrough"
+ },
+ "mod-illustrated-message-display": {
+ "category": "Passthrough"
+ },
+ "mod-button-border-radius": {
+ "category": "Passthrough"
+ }
+ },
+ "high-contrast": {
+ "highcontrast-drop-zone-border-color": {
+ "value": "var(--mod-drop-zone-border-color, var(--spectrum-drop-zone-border-color))",
+ "description": "Defined in `.spectrum-DropZone`.
Used by `.spectrum-DropZone`, `.spectrum-DropZone-strokePath`.
Defaults to `var(--mod-drop-zone-border-color, var(--spectrum-drop-zone-border-color))`, if not set.",
+ "control": "color"
+ },
+ "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 `--spectrum-drop-zone-border-color`, `.spectrum-DropZone.is-dragged`, `.spectrum-DropZone.is-dragged .spectrum-DropZone-strokePath`.
Defaults to `var(--mod-drop-zone-border-color-hover, var(--spectrum-drop-zone-border-color-hover))`, if not set.",
+ "control": "color"
+ },
+ "highcontrast-drop-zone-button-color": {
+ "value": "var(--mod-drop-zone-content-background-color, var(--spectrum-drop-zone-content-background-color))",
+ "description": "Defined in `.spectrum-DropZone`.
Used by `.spectrum-DropZone-button`, `.spectrum-DropZone-button:focus`, `.spectrum-DropZone-button:hover`.
Defaults to `var(--mod-drop-zone-content-background-color, var(--spectrum-drop-zone-content-background-color))`, if not set.",
+ "control": "color"
+ }
+ }
}
diff --git a/components/dropzone/stories/dropzone.stories.js b/components/dropzone/stories/dropzone.stories.js
index 97e6bf7bd65..7031deb84df 100644
--- a/components/dropzone/stories/dropzone.stories.js
+++ b/components/dropzone/stories/dropzone.stories.js
@@ -3,11 +3,13 @@ import { default as IllustratedMessage } from "@spectrum-css/illustratedmessage/
import { Sizes } from "@spectrum-css/preview/decorators";
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 { DropzoneGroup } from "./dropzone.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 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.
*/
@@ -46,8 +48,9 @@ export default {
},
packageJson,
metadata,
- status: {
- type: "migrated",
+ cssprops: {
+ ...metadata.modifiers,
+ ...metadata.component,
},
},
tags: ["migrated"],
diff --git a/components/fieldgroup/dist/metadata.json b/components/fieldgroup/dist/metadata.json
index 3c2343b1019..05659b523db 100644
--- a/components/fieldgroup/dist/metadata.json
+++ b/components/fieldgroup/dist/metadata.json
@@ -10,9 +10,16 @@
".spectrum-FieldGroup--vertical .spectrum-FieldGroupInputLayout",
".spectrum-FieldGroupInputLayout"
],
- "modifiers": [],
- "component": [],
- "global": ["--spectrum-spacing-300"],
- "passthroughs": [],
- "high-contrast": []
+ "modifiers": {},
+ "component": {},
+ "global": {
+ "spectrum-spacing-300": {
+ "value": "16px",
+ "description": "Used by `.spectrum-FieldGroup--horizontal .spectrum-FieldGroupInputLayout .spectrum-FieldGroup-item:not(:last-child)`.",
+ "control": "text",
+ "category": "Global"
+ }
+ },
+ "passthroughs": {},
+ "high-contrast": {}
}
diff --git a/components/fieldgroup/stories/fieldgroup.stories.js b/components/fieldgroup/stories/fieldgroup.stories.js
index c49e4990598..5590d2999ff 100644
--- a/components/fieldgroup/stories/fieldgroup.stories.js
+++ b/components/fieldgroup/stories/fieldgroup.stories.js
@@ -1,11 +1,13 @@
import { disableDefaultModes } from "@spectrum-css/preview/modes";
import { isInvalid, isReadOnly, isRequired } from "@spectrum-css/preview/types";
import { default as RadioSettings } from "@spectrum-css/radio/stories/radio.stories.js";
-import metadata from "../dist/metadata.json";
-import packageJson from "../package.json";
import { FieldGroupSet } from "./fieldgroup.test.js";
import { InputOptionsFieldGroupTemplate, NecessityIndicatorFieldGroupTemplate, 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 field group is a group of fields which are usually radios (also known as a radio group) or checkboxes (also known as a checkbox group). It is composed of a [field label](/docs/components-field-label--docs), a group of [radio inputs](/docs/components-radio--docs) or [checkboxes](/docs/components-checkbox--docs), and [an optional help text component](/docs/components-help-text--docs).
*
@@ -99,6 +101,10 @@ export default {
status: {
type: "migrated",
},
+ cssprops: {
+ ...metadata.modifiers,
+ ...metadata.component,
+ },
},
tags: ["migrated"],
};
diff --git a/components/fieldlabel/dist/metadata.json b/components/fieldlabel/dist/metadata.json
index 2a55dbd82f4..4aec0787049 100644
--- a/components/fieldlabel/dist/metadata.json
+++ b/components/fieldlabel/dist/metadata.json
@@ -10,72 +10,341 @@
".spectrum-FieldLabel--staticBlack",
".spectrum-FieldLabel--staticWhite",
".spectrum-FieldLabel-requiredIcon",
- ".spectrum-FieldLabel.is-disabled",
".spectrum-FieldLabel:lang(ja)",
".spectrum-FieldLabel:lang(ko)",
- ".spectrum-FieldLabel:lang(zh)"
+ ".spectrum-FieldLabel:lang(zh)",
+ ".spectrum-FieldLabel.is-disabled"
],
- "modifiers": [
- "--mod-fieldlabel-asterisk-vertical-align",
- "--mod-fieldlabel-bottom-to-text",
- "--mod-fieldlabel-font-size",
- "--mod-fieldlabel-font-weight",
- "--mod-fieldlabel-line-height",
- "--mod-fieldlabel-line-height-cjk",
- "--mod-fieldlabel-min-height",
- "--mod-fieldlabel-padding-inline",
- "--mod-fieldlabel-side-margin-block-start",
- "--mod-fieldlabel-side-padding-right",
- "--mod-fieldlabel-text-to-asterisk",
- "--mod-fieldlabel-top-to-text"
- ],
- "component": [
- "--spectrum-field-label-text-to-asterisk-extra-large",
- "--spectrum-field-label-text-to-asterisk-large",
- "--spectrum-field-label-text-to-asterisk-medium",
- "--spectrum-field-label-text-to-asterisk-small",
- "--spectrum-field-label-top-margin-extra-large",
- "--spectrum-field-label-top-margin-large",
- "--spectrum-field-label-top-margin-medium",
- "--spectrum-field-label-top-margin-small",
- "--spectrum-fieldlabel-bottom-to-text",
- "--spectrum-fieldlabel-color",
- "--spectrum-fieldlabel-font-size",
- "--spectrum-fieldlabel-font-weight",
- "--spectrum-fieldlabel-line-height",
- "--spectrum-fieldlabel-min-height",
- "--spectrum-fieldlabel-side-margin-block-start",
- "--spectrum-fieldlabel-side-padding-right",
- "--spectrum-fieldlabel-text-to-asterisk",
- "--spectrum-fieldlabel-top-to-text"
- ],
- "global": [
- "--spectrum-black",
- "--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-font-size-100",
- "--spectrum-font-size-200",
- "--spectrum-font-size-300",
- "--spectrum-font-size-75",
- "--spectrum-line-height-100",
- "--spectrum-neutral-subdued-content-color-default",
- "--spectrum-regular-font-weight",
- "--spectrum-spacing-100",
- "--spectrum-spacing-200",
- "--spectrum-white"
- ],
- "passthroughs": [],
- "high-contrast": ["--highcontrast-fieldlabel-disabled-content-color"]
+ "modifiers": {
+ "mod-fieldlabel-line-height": {
+ "description": "Defined in `.spectrum-FieldLabel:lang(ja), .spectrum-FieldLabel:lang(ko), .spectrum-FieldLabel:lang(zh)`.
Used by `.spectrum-FieldLabel`.
Defaults to `var(--spectrum-fieldlabel-line-height)`, if not set.",
+ "control": "text",
+ "category": "Modifier"
+ },
+ "mod-fieldlabel-line-height-cjk": {
+ "description": "Used by `--mod-fieldlabel-line-height`.
Defaults to `var(--spectrum-cjk-line-height-100)`, if not set.",
+ "control": "text",
+ "category": "Modifier"
+ },
+ "mod-fieldlabel-min-height": {
+ "description": "Used by `.spectrum-FieldLabel`.
Defaults to `var(--spectrum-fieldlabel-min-height)`, if not set.",
+ "control": "text",
+ "category": "Modifier"
+ },
+ "mod-fieldlabel-top-to-text": {
+ "description": "Used by `.spectrum-FieldLabel`.
Defaults to `var(--spectrum-fieldlabel-top-to-text)`, if not set.",
+ "control": "text",
+ "category": "Modifier"
+ },
+ "mod-fieldlabel-bottom-to-text": {
+ "description": "Used by `.spectrum-FieldLabel`.
Defaults to `var(--spectrum-fieldlabel-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-font-size": {
+ "description": "Used by `.spectrum-FieldLabel`.
Defaults to `var(--spectrum-fieldlabel-font-size)`, if not set.",
+ "control": "text",
+ "category": "Modifier"
+ },
+ "mod-fieldlabel-font-weight": {
+ "description": "Used by `.spectrum-FieldLabel`.
Defaults to `var(--spectrum-fieldlabel-font-weight)`, if not set.",
+ "control": "text",
+ "category": "Modifier"
+ },
+ "mod-fieldlabel-text-to-asterisk": {
+ "description": "Used by `.spectrum-FieldLabel-requiredIcon`.
Defaults to `var(--spectrum-fieldlabel-text-to-asterisk)`, if not set.",
+ "control": "text",
+ "category": "Modifier"
+ },
+ "mod-fieldlabel-asterisk-vertical-align": {
+ "description": "Used by `.spectrum-FieldLabel-requiredIcon`.",
+ "control": "text",
+ "category": "Modifier"
+ },
+ "mod-fieldlabel-side-margin-block-start": {
+ "description": "Used by `.spectrum-FieldLabel--left, .spectrum-FieldLabel--right`.
Defaults to `var(--spectrum-fieldlabel-side-margin-block-start)`, if not set.",
+ "control": "text",
+ "category": "Modifier"
+ },
+ "mod-fieldlabel-side-padding-right": {
+ "description": "Used by `.spectrum-FieldLabel--left, .spectrum-FieldLabel--right`.
Defaults to `var(--spectrum-fieldlabel-side-padding-right)`, if not set.",
+ "control": "text",
+ "category": "Modifier"
+ }
+ },
+ "component": {
+ "spectrum-fieldlabel-min-height": {
+ "value": "48px",
+ "description": "Defined in `.spectrum-FieldLabel`, `.spectrum-FieldLabel--sizeS`, `.spectrum-FieldLabel--sizeL`, `.spectrum-FieldLabel--sizeXL`.
Used by `.spectrum-FieldLabel`.
Defaults to `var(--spectrum-component-height-300)`, if not set.",
+ "control": "text",
+ "category": "Component"
+ },
+ "spectrum-fieldlabel-color": {
+ "value": "rgb(255, 255, 255)",
+ "description": "Defined in `.spectrum-FieldLabel`, `.spectrum-FieldLabel.is-disabled`, `.spectrum-FieldLabel--staticBlack`, `.spectrum-FieldLabel--staticWhite`.
Used by `.spectrum-FieldLabel`.
Defaults to `var(--spectrum-white)`, if not set.",
+ "control": "color",
+ "category": "Component"
+ },
+ "spectrum-fieldlabel-top-to-text": {
+ "value": "12px",
+ "description": "Defined in `.spectrum-FieldLabel`, `.spectrum-FieldLabel--sizeS`, `.spectrum-FieldLabel--sizeL`, `.spectrum-FieldLabel--sizeXL`.
Used by `.spectrum-FieldLabel`.
Defaults to `var(--spectrum-component-top-to-text-300)`, if not set.",
+ "control": "text",
+ "category": "Component"
+ },
+ "spectrum-fieldlabel-bottom-to-text": {
+ "value": "14px",
+ "description": "Defined in `.spectrum-FieldLabel`, `.spectrum-FieldLabel--sizeS`, `.spectrum-FieldLabel--sizeL`, `.spectrum-FieldLabel--sizeXL`.
Used by `.spectrum-FieldLabel`.
Defaults to `var(--spectrum-component-bottom-to-text-300)`, if not set.",
+ "control": "text",
+ "category": "Component"
+ },
+ "spectrum-fieldlabel-text-to-asterisk": {
+ "value": "5px",
+ "description": "Defined in `.spectrum-FieldLabel`, `.spectrum-FieldLabel--sizeS`, `.spectrum-FieldLabel--sizeL`, `.spectrum-FieldLabel--sizeXL`.
Used by `.spectrum-FieldLabel-requiredIcon`.
Defaults to `var(--spectrum-field-label-text-to-asterisk-extra-large)`, if not set.",
+ "control": "text",
+ "category": "Component"
+ },
+ "spectrum-field-label-text-to-asterisk-medium": {
+ "value": "4px",
+ "description": "Used by `--spectrum-fieldlabel-text-to-asterisk`.",
+ "control": "text",
+ "category": "Component"
+ },
+ "spectrum-fieldlabel-font-size": {
+ "value": "18px",
+ "description": "Defined in `.spectrum-FieldLabel`, `.spectrum-FieldLabel--sizeS`, `.spectrum-FieldLabel--sizeL`, `.spectrum-FieldLabel--sizeXL`.
Used by `.spectrum-FieldLabel`.
Defaults to `var(--spectrum-font-size-300)`, if not set.",
+ "control": "text",
+ "category": "Component"
+ },
+ "spectrum-fieldlabel-font-weight": {
+ "value": "400",
+ "description": "Defined in `.spectrum-FieldLabel`.
Used by `.spectrum-FieldLabel`.
Defaults to `var(--spectrum-regular-font-weight)`, if not set.",
+ "control": "text",
+ "category": "Component"
+ },
+ "spectrum-fieldlabel-line-height": {
+ "value": "1.3",
+ "description": "Defined in `.spectrum-FieldLabel`.
Used by `.spectrum-FieldLabel`.
Defaults to `var(--spectrum-line-height-100)`, if not set.",
+ "control": "text",
+ "category": "Component"
+ },
+ "spectrum-fieldlabel-side-margin-block-start": {
+ "value": "0px",
+ "description": "Defined in `.spectrum-FieldLabel`, `.spectrum-FieldLabel--sizeS`, `.spectrum-FieldLabel--sizeL`, `.spectrum-FieldLabel--sizeXL`.
Used by `.spectrum-FieldLabel--left, .spectrum-FieldLabel--right`.
Defaults to `var(--spectrum-field-label-top-margin-extra-large)`, if not set.",
+ "control": "text",
+ "category": "Component"
+ },
+ "spectrum-field-label-top-margin-medium": {
+ "value": "0px",
+ "description": "Used by `--spectrum-fieldlabel-side-margin-block-start`.",
+ "control": "text",
+ "category": "Component"
+ },
+ "spectrum-fieldlabel-side-padding-right": {
+ "value": "12px",
+ "description": "Defined in `.spectrum-FieldLabel`, `.spectrum-FieldLabel--sizeS`, `.spectrum-FieldLabel--sizeL`, `.spectrum-FieldLabel--sizeXL`.
Used by `.spectrum-FieldLabel--left, .spectrum-FieldLabel--right`.
Defaults to `var(--spectrum-spacing-200)`, if not set.",
+ "control": "text",
+ "category": "Component"
+ },
+ "spectrum-field-label-text-to-asterisk-small": {
+ "value": "4px",
+ "description": "Used by `--spectrum-fieldlabel-text-to-asterisk`.",
+ "control": "text",
+ "category": "Component"
+ },
+ "spectrum-field-label-top-margin-small": {
+ "value": "0px",
+ "description": "Used by `--spectrum-fieldlabel-side-margin-block-start`.",
+ "control": "text",
+ "category": "Component"
+ },
+ "spectrum-field-label-text-to-asterisk-large": {
+ "value": "5px",
+ "description": "Used by `--spectrum-fieldlabel-text-to-asterisk`.",
+ "control": "text",
+ "category": "Component"
+ },
+ "spectrum-field-label-top-margin-large": {
+ "value": "0px",
+ "description": "Used by `--spectrum-fieldlabel-side-margin-block-start`.",
+ "control": "text",
+ "category": "Component"
+ },
+ "spectrum-field-label-text-to-asterisk-extra-large": {
+ "value": "5px",
+ "description": "Used by `--spectrum-fieldlabel-text-to-asterisk`.",
+ "control": "text",
+ "category": "Component"
+ },
+ "spectrum-field-label-top-margin-extra-large": {
+ "value": "0px",
+ "description": "Used by `--spectrum-fieldlabel-side-margin-block-start`.",
+ "control": "text",
+ "category": "Component"
+ }
+ },
+ "global": {
+ "spectrum-component-height-100": {
+ "value": "32px",
+ "description": "Used by `--spectrum-fieldlabel-min-height`.",
+ "control": "text",
+ "category": "Global"
+ },
+ "spectrum-neutral-subdued-content-color-default": {
+ "value": "var(--spectrum-gray-700)",
+ "description": "Used by `--spectrum-fieldlabel-color`.",
+ "control": "color",
+ "category": "Global"
+ },
+ "spectrum-component-top-to-text-100": {
+ "value": "6px",
+ "description": "Used by `--spectrum-fieldlabel-top-to-text`.",
+ "control": "text",
+ "category": "Global"
+ },
+ "spectrum-component-bottom-to-text-100": {
+ "value": "9px",
+ "description": "Used by `--spectrum-fieldlabel-bottom-to-text`.",
+ "control": "text",
+ "category": "Global"
+ },
+ "spectrum-font-size-100": {
+ "value": "14px",
+ "description": "Used by `--spectrum-fieldlabel-font-size`.",
+ "control": "text",
+ "category": "Global"
+ },
+ "spectrum-regular-font-weight": {
+ "value": "400",
+ "description": "Used by `--spectrum-fieldlabel-font-weight`.",
+ "control": "text",
+ "category": "Global"
+ },
+ "spectrum-line-height-100": {
+ "value": "1.3",
+ "description": "Used by `--spectrum-fieldlabel-line-height`.",
+ "control": "text",
+ "category": "Global"
+ },
+ "spectrum-spacing-200": {
+ "value": "12px",
+ "description": "Used by `--spectrum-fieldlabel-side-padding-right`.",
+ "control": "text",
+ "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 `--spectrum-fieldlabel-color`.",
+ "control": "color",
+ "category": "Global"
+ },
+ "spectrum-component-height-75": {
+ "value": "24px",
+ "description": "Used by `--spectrum-fieldlabel-min-height`.",
+ "control": "text",
+ "category": "Global"
+ },
+ "spectrum-component-top-to-text-75": {
+ "value": "4px",
+ "description": "Used by `--spectrum-fieldlabel-top-to-text`.",
+ "control": "text",
+ "category": "Global"
+ },
+ "spectrum-component-bottom-to-text-75": {
+ "value": "5px",
+ "description": "Used by `--spectrum-fieldlabel-bottom-to-text`.",
+ "control": "text",
+ "category": "Global"
+ },
+ "spectrum-font-size-75": {
+ "value": "12px",
+ "description": "Used by `--spectrum-fieldlabel-font-size`.",
+ "control": "text",
+ "category": "Global"
+ },
+ "spectrum-spacing-100": {
+ "value": "8px",
+ "description": "Used by `--spectrum-fieldlabel-side-padding-right`.",
+ "control": "text",
+ "category": "Global"
+ },
+ "spectrum-component-height-200": {
+ "value": "40px",
+ "description": "Used by `--spectrum-fieldlabel-min-height`.",
+ "control": "text",
+ "category": "Global"
+ },
+ "spectrum-component-top-to-text-200": {
+ "value": "9px",
+ "description": "Used by `--spectrum-fieldlabel-top-to-text`.",
+ "control": "text",
+ "category": "Global"
+ },
+ "spectrum-component-bottom-to-text-200": {
+ "value": "11px",
+ "description": "Used by `--spectrum-fieldlabel-bottom-to-text`.",
+ "control": "text",
+ "category": "Global"
+ },
+ "spectrum-font-size-200": {
+ "value": "16px",
+ "description": "Used by `--spectrum-fieldlabel-font-size`.",
+ "control": "text",
+ "category": "Global"
+ },
+ "spectrum-component-height-300": {
+ "value": "48px",
+ "description": "Used by `--spectrum-fieldlabel-min-height`.",
+ "control": "text",
+ "category": "Global"
+ },
+ "spectrum-component-top-to-text-300": {
+ "value": "12px",
+ "description": "Used by `--spectrum-fieldlabel-top-to-text`.",
+ "control": "text",
+ "category": "Global"
+ },
+ "spectrum-component-bottom-to-text-300": {
+ "value": "14px",
+ "description": "Used by `--spectrum-fieldlabel-bottom-to-text`.",
+ "control": "text",
+ "category": "Global"
+ },
+ "spectrum-font-size-300": {
+ "value": "18px",
+ "description": "Used by `--spectrum-fieldlabel-font-size`.",
+ "control": "text",
+ "category": "Global"
+ },
+ "spectrum-black": {
+ "value": "rgb(0, 0, 0)",
+ "description": "Used by `--spectrum-fieldlabel-color`.",
+ "control": "text",
+ "category": "Global"
+ },
+ "spectrum-white": {
+ "value": "rgb(255, 255, 255)",
+ "description": "Used by `--spectrum-fieldlabel-color`.",
+ "control": "text",
+ "category": "Global"
+ }
+ },
+ "passthroughs": {},
+ "high-contrast": {
+ "highcontrast-fieldlabel-disabled-content-color": {
+ "value": "var(--spectrum-disabled-content-color)",
+ "description": "Defined in `.spectrum-FieldLabel`.
Used by `--spectrum-fieldlabel-color`.
Defaults to `var(--spectrum-disabled-content-color)`, if not set.",
+ "control": "color"
+ }
+ }
}
diff --git a/components/fieldlabel/stories/fieldlabel.stories.js b/components/fieldlabel/stories/fieldlabel.stories.js
index 426e0a699c2..c425463d24a 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, staticColor } 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.
*/
@@ -55,6 +57,10 @@ export default {
status: {
type: "migrated",
},
+ cssprops: {
+ ...metadata.modifiers,
+ ...metadata.component,
+ },
},
tags: ["migrated"],
};
diff --git a/components/fieldlabel/stories/template.js b/components/fieldlabel/stories/template.js
index 3420504c4d7..04ed96fb54c 100644
--- a/components/fieldlabel/stories/template.js
+++ b/components/fieldlabel/stories/template.js
@@ -15,7 +15,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 0ddd22d190a..0a209f436d6 100644
--- a/components/floatingactionbutton/dist/metadata.json
+++ b/components/floatingactionbutton/dist/metadata.json
@@ -13,74 +13,351 @@
".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"
- ],
- "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": {
+ "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": {
+ "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": {
+ "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": {
+ "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": {
+ "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": {
+ "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": {
+ "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": {
+ "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": {
+ "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": {
+ "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": {
+ "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": {
+ "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": {
+ "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": {
+ "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": {
+ "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": {
+ "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": {
+ "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": {
+ "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": {
+ "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": {
+ "value": "40px",
+ "description": "Defined in `.spectrum-FloatingActionButton`.
Used by `.spectrum-FloatingActionButton`.
Defaults to `var(--spectrum-component-height-200)`, if not set.",
+ "control": "text",
+ "category": "Component"
+ },
+ "spectrum-floating-action-button-icon-size": {
+ "value": "22px",
+ "description": "Defined in `.spectrum-FloatingActionButton`.
Used by `.spectrum-Icon.spectrum-FloatingActionButton-icon`.
Defaults to `var(--spectrum-workflow-icon-size-200)`, if not set.",
+ "control": "text",
+ "category": "Component"
+ },
+ "spectrum-floating-action-button-padding": {
+ "value": "9px",
+ "description": "Defined in `.spectrum-FloatingActionButton`.
Used by `.spectrum-FloatingActionButton`.
Defaults to `var(--spectrum-component-pill-edge-to-visual-only-200)`, if not set.",
+ "control": "text",
+ "category": "Component"
+ },
+ "spectrum-floating-action-button-margin": {
+ "value": "12px",
+ "description": "Defined in `.spectrum-FloatingActionButton`.
Used by `.spectrum-FloatingActionButton`.
Defaults to `var(--spectrum-spacing-200)`, if not set.",
+ "control": "text",
+ "category": "Component"
+ },
+ "spectrum-floating-action-button-background-color": {
+ "value": "var(--spectrum-gray-25)",
+ "description": "Defined in `.spectrum-FloatingActionButton`, `.spectrum-FloatingActionButton--secondary`.
Used by `.spectrum-FloatingActionButton`.
Defaults to `var(--spectrum-background-layer-2-color)`, if not set.",
+ "control": "color",
+ "category": "Component"
+ },
+ "spectrum-floating-action-button-background-color-hover": {
+ "value": "var(--spectrum-gray-25)",
+ "description": "Defined in `.spectrum-FloatingActionButton`, `.spectrum-FloatingActionButton--secondary`.
Used by `.spectrum-FloatingActionButton:hover`.
Defaults to `var(--spectrum-background-layer-2-color)`, if not set.",
+ "control": "color",
+ "category": "Component"
+ },
+ "spectrum-floating-action-button-background-color-down": {
+ "value": "var(--spectrum-gray-25)",
+ "description": "Defined in `.spectrum-FloatingActionButton`, `.spectrum-FloatingActionButton--secondary`.
Used by `.spectrum-FloatingActionButton:active`.
Defaults to `var(--spectrum-background-layer-2-color)`, if not set.",
+ "control": "color",
+ "category": "Component"
+ },
+ "spectrum-floating-action-button-background-color-key-focus": {
+ "value": "var(--spectrum-gray-25)",
+ "description": "Defined in `.spectrum-FloatingActionButton`, `.spectrum-FloatingActionButton--secondary`.
Used by `.spectrum-FloatingActionButton:focus-visible`.
Defaults to `var(--spectrum-background-layer-2-color)`, if not set.",
+ "control": "color",
+ "category": "Component"
+ },
+ "spectrum-floating-action-button-icon-color": {
+ "value": "var(--spectrum-gray-700)",
+ "description": "Defined in `.spectrum-FloatingActionButton`, `.spectrum-FloatingActionButton--secondary`.
Used by `.spectrum-Icon.spectrum-FloatingActionButton-icon`.
Defaults to `var(--spectrum-neutral-subdued-content-color-default)`, if not set.",
+ "control": "color",
+ "category": "Component"
+ },
+ "spectrum-floating-action-button-icon-color-hover": {
+ "value": "var(--spectrum-gray-800)",
+ "description": "Defined in `.spectrum-FloatingActionButton`, `.spectrum-FloatingActionButton--secondary`.
Used by `.spectrum-FloatingActionButton:hover .spectrum-FloatingActionButton-icon`.
Defaults to `var(--spectrum-neutral-subdued-content-color-hover)`, if not set.",
+ "control": "color",
+ "category": "Component"
+ },
+ "spectrum-floating-action-button-icon-color-down": {
+ "value": "var(--spectrum-gray-800)",
+ "description": "Defined in `.spectrum-FloatingActionButton`, `.spectrum-FloatingActionButton--secondary`.
Used by `.spectrum-FloatingActionButton:active .spectrum-FloatingActionButton-icon`.
Defaults to `var(--spectrum-neutral-subdued-content-color-down)`, if not set.",
+ "control": "color",
+ "category": "Component"
+ },
+ "spectrum-floating-action-button-icon-color-key-focus": {
+ "value": "var(--spectrum-gray-800)",
+ "description": "Defined in `.spectrum-FloatingActionButton`, `.spectrum-FloatingActionButton--secondary`.
Used by `.spectrum-FloatingActionButton:focus-visible .spectrum-FloatingActionButton-icon`.
Defaults to `var(--spectrum-neutral-subdued-content-color-key-focus)`, if not set.",
+ "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": "rgba(0, 0, 0, 0.15)",
+ "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-900)",
+ "description": "Used by `--spectrum-floating-action-button-background-color`.",
+ "control": "color",
+ "category": "Global"
+ },
+ "spectrum-accent-background-color-hover": {
+ "value": "var(--spectrum-accent-color-1000)",
+ "description": "Used by `--spectrum-floating-action-button-background-color-hover`.",
+ "control": "color",
+ "category": "Global"
+ },
+ "spectrum-accent-background-color-down": {
+ "value": "var(--spectrum-accent-color-1000)",
+ "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-1000)",
+ "description": "Used by `--spectrum-floating-action-button-background-color-key-focus`.",
+ "control": "color",
+ "category": "Global"
+ },
+ "spectrum-white": {
+ "value": "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-25)",
+ "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"
+ }
+ },
+ "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..262c6834b5d 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,10 @@ export default {
parameters: {
packageJson,
metadata,
+ cssprops: {
+ ...metadata.modifiers,
+ ...metadata.component,
+ },
},
};
diff --git a/components/form/dist/metadata.json b/components/form/dist/metadata.json
index c07dfdca8d9..399c40bbfd6 100644
--- a/components/form/dist/metadata.json
+++ b/components/form/dist/metadata.json
@@ -11,26 +11,96 @@
".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"
- ],
- "passthroughs": [],
- "high-contrast": ["--highcontrast-form-item-disabled-content-color"]
+ "modifiers": {
+ "mod-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": {
+ "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": {
+ "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": {
+ "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": {
+ "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": {
+ "value": "16px",
+ "description": "Defined in `.spectrum-Form`.
Used by `.spectrum-Form`.
Defaults to `var(--spectrum-spacing-300)`, if not set.",
+ "control": "text",
+ "category": "Component"
+ },
+ "spectrum-form-item-block-spacing-labels-above": {
+ "value": "12px",
+ "description": "Defined in `.spectrum-Form`.
Used by `--mod-form-item-block-spacing`.
Defaults to `var(--spectrum-spacing-200)`, if not set.",
+ "control": "text",
+ "category": "Component"
+ },
+ "spectrum-form-grid-template-columns": {
+ "value": "auto auto",
+ "description": "Defined in `.spectrum-Form`.
Used by `.spectrum-Form`.
Defaults to `auto auto`, if not set.",
+ "control": "text",
+ "category": "Component"
+ },
+ "spectrum-form-grid-template-columns-labels-above": {
+ "value": "auto",
+ "description": "Defined in `.spectrum-Form`.
Used by `--mod-form-grid-template-columns`.
Defaults to `auto`, if not set.",
+ "control": "text",
+ "category": "Component"
+ },
+ "spectrum-form-item-disabled-content-color": {
+ "value": "var(--spectrum-gray-400)",
+ "description": "Defined in `.spectrum-Form`.
Used by `.spectrum-Form-itemLabel.is-disabled, .spectrum-Form-itemLabel.is-disabled .spectrum-FieldLabel-requiredIcon`.
Defaults to `var(--spectrum-disabled-content-color)`, if not set.",
+ "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"
+ }
+ },
+ "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 ab7af9d944b..b78750f70a4 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 NumberField } 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.
*/
@@ -110,6 +112,10 @@ export default {
status: {
type: "migrated",
},
+ cssprops: {
+ ...metadata.modifiers,
+ ...metadata.component,
+ },
},
tags: ["migrated"],
};
diff --git a/components/helptext/dist/metadata.json b/components/helptext/dist/metadata.json
index 4ed0075bb8c..651f6b3791b 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",
@@ -15,86 +18,403 @@
".spectrum-HelpText.spectrum-HelpText--neutral .spectrum-HelpText-validationIcon",
".spectrum-HelpText.spectrum-HelpText--sizeL",
".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-edge-to-workflow-icon",
- "--mod-helptext-bottom-to-text",
- "--mod-helptext-content-color-default",
- "--mod-helptext-font-family",
- "--mod-helptext-font-size",
- "--mod-helptext-font-style",
- "--mod-helptext-font-weight",
- "--mod-helptext-icon-color-default",
- "--mod-helptext-icon-size",
- "--mod-helptext-line-height",
- "--mod-helptext-line-height-cjk",
- "--mod-helptext-min-height",
- "--mod-helptext-text-to-visual",
- "--mod-helptext-top-edge-to-workflow-icon",
- "--mod-helptext-top-to-text"
- ],
- "component": [
- "--spectrum-helptext-bottom-to-text",
- "--spectrum-helptext-content-color-default",
- "--spectrum-helptext-edge-to-workflow-icon",
- "--spectrum-helptext-font-family",
- "--spectrum-helptext-font-size",
- "--spectrum-helptext-font-style",
- "--spectrum-helptext-font-weight",
- "--spectrum-helptext-icon-color-default",
- "--spectrum-helptext-icon-size",
- "--spectrum-helptext-line-height",
- "--spectrum-helptext-min-height",
- "--spectrum-helptext-text-to-visual",
- "--spectrum-helptext-top-to-text"
- ],
- "global": [
- "--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-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-default-font-style",
- "--spectrum-disabled-content-color",
- "--spectrum-font-size-100",
- "--spectrum-font-size-200",
- "--spectrum-font-size-300",
- "--spectrum-font-size-75",
- "--spectrum-line-height-100",
- "--spectrum-negative-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-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"
+ ".spectrum-HelpText.spectrum-HelpText--sizeXL"
],
- "passthroughs": [],
- "high-contrast": [
- "--highcontrast-helptext-content-color-default",
- "--highcontrast-helptext-content-color-disabled",
- "--highcontrast-helptext-icon-color-default",
- "--highcontrast-helptext-icon-color-disabled"
- ]
+ "modifiers": {
+ "mod-helptext-line-height": {
+ "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-helptext-line-height)`, if not set.",
+ "control": "text",
+ "category": "Modifier"
+ },
+ "mod-helptext-line-height-cjk": {
+ "description": "Used by `--mod-helptext-line-height`.
Defaults to `var(--spectrum-cjk-line-height-100)`, if not set.",
+ "control": "text",
+ "category": "Modifier"
+ },
+ "mod-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": {
+ "description": "Used by `.spectrum-HelpText`.
Defaults to `var(--spectrum-helptext-font-size)`, if not set.",
+ "control": "text",
+ "category": "Modifier"
+ },
+ "mod-helptext-min-height": {
+ "description": "Used by `.spectrum-HelpText`.
Defaults to `var(--spectrum-helptext-min-height)`, if not set.",
+ "control": "text",
+ "category": "Modifier"
+ },
+ "mod-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-edge-to-workflow-icon": {
+ "description": "Used by `.spectrum-HelpText .spectrum-HelpText-validationIcon`.
Defaults to `var(--spectrum-helptext-edge-to-workflow-icon)`, if not set.",
+ "control": "text",
+ "category": "Modifier"
+ },
+ "mod-helptext-bottom-edge-to-workflow-icon": {
+ "description": "Used by `.spectrum-HelpText .spectrum-HelpText-validationIcon`.
Defaults to `var(--spectrum-helptext-edge-to-workflow-icon)`, if not set.",
+ "control": "text",
+ "category": "Modifier"
+ },
+ "mod-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": {
+ "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": {
+ "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-font-family": {
+ "description": "Used by `.spectrum-HelpText .spectrum-HelpText-text`.
Defaults to `var(--spectrum-helptext-font-family)`, if not set.",
+ "control": "text",
+ "category": "Modifier"
+ },
+ "mod-helptext-font-style": {
+ "description": "Used by `.spectrum-HelpText .spectrum-HelpText-text`.
Defaults to `var(--spectrum-helptext-font-style)`, if not set.",
+ "control": "text",
+ "category": "Modifier"
+ },
+ "mod-helptext-font-weight": {
+ "description": "Used by `.spectrum-HelpText .spectrum-HelpText-text`.
Defaults to `var(--spectrum-helptext-font-weight)`, if not set.",
+ "control": "text",
+ "category": "Modifier"
+ },
+ "mod-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-min-height": {
+ "value": "48px",
+ "description": "Defined in `.spectrum-HelpText`, `.spectrum-HelpText.spectrum-HelpText--sizeS`, `.spectrum-HelpText.spectrum-HelpText--sizeL`, `.spectrum-HelpText.spectrum-HelpText--sizeXL`.
Used by `.spectrum-HelpText`.
Defaults to `var(--spectrum-component-height-300)`, if not set.",
+ "control": "text",
+ "category": "Component"
+ },
+ "spectrum-helptext-icon-size": {
+ "value": "26px",
+ "description": "Defined in `.spectrum-HelpText`, `.spectrum-HelpText.spectrum-HelpText--sizeS`, `.spectrum-HelpText.spectrum-HelpText--sizeL`, `.spectrum-HelpText.spectrum-HelpText--sizeXL`.
Used by `.spectrum-HelpText .spectrum-HelpText-validationIcon`.
Defaults to `var(--spectrum-workflow-icon-size-300)`, if not set.",
+ "control": "text",
+ "category": "Component"
+ },
+ "spectrum-helptext-text-to-visual": {
+ "value": "8px",
+ "description": "Defined in `.spectrum-HelpText`, `.spectrum-HelpText.spectrum-HelpText--sizeS`, `.spectrum-HelpText.spectrum-HelpText--sizeL`, `.spectrum-HelpText.spectrum-HelpText--sizeXL`.
Used by `.spectrum-HelpText .spectrum-HelpText-validationIcon`.
Defaults to `var(--spectrum-text-to-visual-300)`, if not set.",
+ "control": "text",
+ "category": "Component"
+ },
+ "spectrum-helptext-edge-to-workflow-icon": {
+ "value": "11px",
+ "description": "Defined in `.spectrum-HelpText`, `.spectrum-HelpText.spectrum-HelpText--sizeS`, `.spectrum-HelpText.spectrum-HelpText--sizeL`, `.spectrum-HelpText.spectrum-HelpText--sizeXL`.
Used by `.spectrum-HelpText .spectrum-HelpText-validationIcon`.
Defaults to `var(--spectrum-component-top-to-workflow-icon-300)`, if not set.",
+ "control": "text",
+ "category": "Component"
+ },
+ "spectrum-helptext-top-to-text": {
+ "value": "12px",
+ "description": "Defined in `.spectrum-HelpText`, `.spectrum-HelpText.spectrum-HelpText--sizeS`, `.spectrum-HelpText.spectrum-HelpText--sizeL`, `.spectrum-HelpText.spectrum-HelpText--sizeXL`.
Used by `.spectrum-HelpText .spectrum-HelpText-text`.
Defaults to `var(--spectrum-component-top-to-text-300)`, if not set.",
+ "control": "text",
+ "category": "Component"
+ },
+ "spectrum-helptext-bottom-to-text": {
+ "value": "14px",
+ "description": "Defined in `.spectrum-HelpText`, `.spectrum-HelpText.spectrum-HelpText--sizeS`, `.spectrum-HelpText.spectrum-HelpText--sizeL`, `.spectrum-HelpText.spectrum-HelpText--sizeXL`.
Used by `.spectrum-HelpText .spectrum-HelpText-text`.
Defaults to `var(--spectrum-component-bottom-to-text-300)`, if not set.",
+ "control": "text",
+ "category": "Component"
+ },
+ "spectrum-helptext-font-size": {
+ "value": "18px",
+ "description": "Defined in `.spectrum-HelpText`, `.spectrum-HelpText.spectrum-HelpText--sizeS`, `.spectrum-HelpText.spectrum-HelpText--sizeL`, `.spectrum-HelpText.spectrum-HelpText--sizeXL`.
Used by `.spectrum-HelpText`.
Defaults to `var(--spectrum-font-size-300)`, if not set.",
+ "control": "text",
+ "category": "Component"
+ },
+ "spectrum-helptext-font-family": {
+ "value": "var(--spectrum-sans-font-family-stack)",
+ "description": "Defined in `.spectrum-HelpText`.
Used by `.spectrum-HelpText .spectrum-HelpText-text`.
Defaults to `var(--spectrum-sans-font-family-stack)`, if not set.",
+ "control": "text",
+ "category": "Component"
+ },
+ "spectrum-helptext-font-style": {
+ "value": "normal",
+ "description": "Defined in `.spectrum-HelpText`.
Used by `.spectrum-HelpText .spectrum-HelpText-text`.
Defaults to `var(--spectrum-default-font-style)`, if not set.",
+ "control": "text",
+ "category": "Component"
+ },
+ "spectrum-helptext-line-height": {
+ "value": "1.3",
+ "description": "Defined in `.spectrum-HelpText`.
Used by `.spectrum-HelpText .spectrum-HelpText-text`.
Defaults to `var(--spectrum-line-height-100)`, if not set.",
+ "control": "text",
+ "category": "Component"
+ },
+ "spectrum-helptext-font-weight": {
+ "value": "400",
+ "description": "Defined in `.spectrum-HelpText`.
Used by `.spectrum-HelpText .spectrum-HelpText-text`.
Defaults to `var(--spectrum-regular-font-weight)`, if not set.",
+ "control": "text",
+ "category": "Component"
+ },
+ "spectrum-helptext-content-color-default": {
+ "value": "var(--spectrum-gray-400)",
+ "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`.
Defaults to `var(--spectrum-disabled-content-color)`, if not set.",
+ "control": "color",
+ "category": "Component"
+ },
+ "spectrum-helptext-icon-color-default": {
+ "value": "var(--spectrum-gray-400)",
+ "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`.
Defaults to `var(--spectrum-disabled-content-color)`, if not set.",
+ "control": "color",
+ "category": "Component"
+ }
+ },
+ "global": {
+ "spectrum-component-height-100": {
+ "value": "32px",
+ "description": "Used by `--spectrum-helptext-min-height`.",
+ "control": "text",
+ "category": "Global"
+ },
+ "spectrum-workflow-icon-size-100": {
+ "value": "20px",
+ "description": "Used by `--spectrum-helptext-icon-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-workflow-icon-100": {
+ "value": "6px",
+ "description": "Used by `--spectrum-helptext-edge-to-workflow-icon`.",
+ "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-font-size-100": {
+ "value": "14px",
+ "description": "Used by `--spectrum-helptext-font-size`.",
+ "control": "text",
+ "category": "Global"
+ },
+ "spectrum-sans-font-family-stack": {
+ "description": "Used by `--spectrum-helptext-font-family`.",
+ "control": "text",
+ "category": "Global"
+ },
+ "spectrum-default-font-style": {
+ "value": "normal",
+ "description": "Used by `--spectrum-helptext-font-style`.",
+ "control": "text",
+ "category": "Global"
+ },
+ "spectrum-line-height-100": {
+ "value": "1.3",
+ "description": "Used by `--spectrum-helptext-line-height`.",
+ "control": "text",
+ "category": "Global"
+ },
+ "spectrum-regular-font-weight": {
+ "value": "400",
+ "description": "Used by `--spectrum-helptext-font-weight`.",
+ "control": "text",
+ "category": "Global"
+ },
+ "spectrum-cjk-line-height-100": {
+ "value": "1.5",
+ "description": "Used by `--mod-helptext-line-height`.",
+ "control": "text",
+ "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-workflow-icon-75": {
+ "value": "4px",
+ "description": "Used by `--spectrum-helptext-edge-to-workflow-icon`.",
+ "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-component-height-200": {
+ "value": "40px",
+ "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-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-workflow-icon-200": {
+ "value": "9px",
+ "description": "Used by `--spectrum-helptext-edge-to-workflow-icon`.",
+ "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-component-height-300": {
+ "value": "48px",
+ "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-300": {
+ "value": "18px",
+ "description": "Used by `--spectrum-helptext-font-size`.",
+ "control": "text",
+ "category": "Global"
+ },
+ "spectrum-text-to-visual-300": {
+ "value": "8px",
+ "description": "Used by `--spectrum-helptext-text-to-visual`.",
+ "control": "text",
+ "category": "Global"
+ },
+ "spectrum-component-top-to-workflow-icon-300": {
+ "value": "11px",
+ "description": "Used by `--spectrum-helptext-edge-to-workflow-icon`.",
+ "control": "text",
+ "category": "Global"
+ },
+ "spectrum-component-top-to-text-300": {
+ "value": "12px",
+ "description": "Used by `--spectrum-helptext-top-to-text`.",
+ "control": "text",
+ "category": "Global"
+ },
+ "spectrum-component-bottom-to-text-300": {
+ "value": "14px",
+ "description": "Used by `--spectrum-helptext-bottom-to-text`.",
+ "control": "text",
+ "category": "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-negative-content-color-default": {
+ "value": "var(--spectrum-negative-color-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"
+ }
+ },
+ "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`.
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`.
Defaults to `var(--mod-helptext-icon-color-default, var(--spectrum-helptext-icon-color-default))`, if not set.",
+ "control": "color"
+ },
+ "highcontrast-helptext-content-color-disabled": {
+ "value": "var(--mod-helptext-content-color-default, var(--spectrum-helptext-content-color-default))",
+ "description": "Defined in `.spectrum-HelpText`.
Used by `.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-disabled": {
+ "value": "var(--mod-helptext-icon-color-default, var(--spectrum-helptext-icon-color-default))",
+ "description": "Defined in `.spectrum-HelpText`.
Used by `.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 01d56bd4f99..f27f769d9b3 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.
*/
@@ -66,6 +68,10 @@ export default {
status: {
type: "migrated",
},
+ cssprops: {
+ ...metadata.modifiers,
+ ...metadata.component,
+ },
},
tags: ["migrated"],
};
diff --git a/components/helptext/stories/template.js b/components/helptext/stories/template.js
index 894c60745cb..c7c0217a5ea 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 7fcad33c95b..8231f1201c3 100644
--- a/components/icon/dist/metadata.json
+++ b/components/icon/dist/metadata.json
@@ -114,86 +114,450 @@
".spectrum-UIIcon-LinkOut400",
".spectrum-UIIcon-LinkOut75"
],
- "modifiers": [
- "--mod-icon-block-size",
- "--mod-icon-color",
- "--mod-icon-inline-size",
- "--mod-icon-size"
- ],
- "component": [
- "--spectrum-icon-block-size",
- "--spectrum-icon-inline-size",
- "--spectrum-icon-size"
- ],
- "global": [
- "--spectrum-add-icon-size-100",
- "--spectrum-add-icon-size-200",
- "--spectrum-add-icon-size-300",
- "--spectrum-add-icon-size-50",
- "--spectrum-add-icon-size-75",
- "--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-drag-handle-icon-size-100",
- "--spectrum-drag-handle-icon-size-200",
- "--spectrum-drag-handle-icon-size-300",
- "--spectrum-drag-handle-icon-size-75",
- "--spectrum-gripper-icon-size-100",
- "--spectrum-link-out-icon-size-100",
- "--spectrum-link-out-icon-size-200",
- "--spectrum-link-out-icon-size-300",
- "--spectrum-link-out-icon-size-400",
- "--spectrum-link-out-icon-size-75",
- "--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"
- ],
- "passthroughs": [],
- "high-contrast": []
+ "modifiers": {
+ "mod-icon-color": {
+ "description": "Used by `--iconPrimary`, `.spectrum-Icon, .spectrum-UIIcon`.",
+ "control": "color",
+ "category": "Modifier"
+ },
+ "mod-icon-inline-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": {
+ "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": {
+ "description": "Used by `--spectrum-icon-block-size`.
Defaults to `var(--mod-icon-size, var(--spectrum-icon-size))`, if not set.",
+ "control": "text",
+ "category": "Modifier"
+ }
+ },
+ "component": {
+ "spectrum-icon-inline-size": {
+ "value": "var(--mod-icon-inline-size, var(--mod-icon-size, var(--spectrum-icon-size)))",
+ "description": "Defined in `.spectrum-Icon, .spectrum-UIIcon`.
Used by `.spectrum-Icon, .spectrum-UIIcon`, `.spectrum-Icon img, .spectrum-Icon svg`.
Defaults to `var(--mod-icon-inline-size, var(--mod-icon-size, var(--spectrum-icon-size)))`, if not set.",
+ "control": "text",
+ "category": "Component"
+ },
+ "spectrum-icon-size": {
+ "value": "16px",
+ "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`, `.spectrum-UIIcon-Add50`, `.spectrum-UIIcon-Add75`, `.spectrum-UIIcon-Add100`, `.spectrum-UIIcon-Add200`, `.spectrum-UIIcon-Add300`, `.spectrum-UIIcon-DragHandle75`, `.spectrum-UIIcon-DragHandle100`, `.spectrum-UIIcon-DragHandle200`, `.spectrum-UIIcon-DragHandle300`, `.spectrum-UIIcon-Gripper100`, `.spectrum-UIIcon-LinkOut75`, `.spectrum-UIIcon-LinkOut100`, `.spectrum-UIIcon-LinkOut200`, `.spectrum-UIIcon-LinkOut300`, `.spectrum-UIIcon-LinkOut400`.
Used by `--spectrum-icon-inline-size`, `--spectrum-icon-block-size`.
Defaults to `var(--spectrum-link-out-icon-size-400)`, if not set.",
+ "control": "text",
+ "category": "Component"
+ },
+ "spectrum-icon-block-size": {
+ "value": "var(--mod-icon-block-size, var(--mod-icon-size, var(--spectrum-icon-size)))",
+ "description": "Defined in `.spectrum-Icon, .spectrum-UIIcon`.
Used by `.spectrum-Icon, .spectrum-UIIcon`, `.spectrum-Icon img, .spectrum-Icon svg`.
Defaults to `var(--mod-icon-block-size, var(--mod-icon-size, var(--spectrum-icon-size)))`, if not set.",
+ "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-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"
+ },
+ "spectrum-add-icon-size-50": {
+ "value": "8px",
+ "description": "Used by `--spectrum-icon-size`.",
+ "control": "text",
+ "category": "Global"
+ },
+ "spectrum-add-icon-size-75": {
+ "value": "8px",
+ "description": "Used by `--spectrum-icon-size`.",
+ "control": "text",
+ "category": "Global"
+ },
+ "spectrum-add-icon-size-100": {
+ "value": "10px",
+ "description": "Used by `--spectrum-icon-size`.",
+ "control": "text",
+ "category": "Global"
+ },
+ "spectrum-add-icon-size-200": {
+ "value": "12px",
+ "description": "Used by `--spectrum-icon-size`.",
+ "control": "text",
+ "category": "Global"
+ },
+ "spectrum-add-icon-size-300": {
+ "value": "12px",
+ "description": "Used by `--spectrum-icon-size`.",
+ "control": "text",
+ "category": "Global"
+ },
+ "spectrum-drag-handle-icon-size-75": {
+ "value": "10px",
+ "description": "Used by `--spectrum-icon-size`.",
+ "control": "text",
+ "category": "Global"
+ },
+ "spectrum-drag-handle-icon-size-100": {
+ "value": "10px",
+ "description": "Used by `--spectrum-icon-size`.",
+ "control": "text",
+ "category": "Global"
+ },
+ "spectrum-drag-handle-icon-size-200": {
+ "value": "12px",
+ "description": "Used by `--spectrum-icon-size`.",
+ "control": "text",
+ "category": "Global"
+ },
+ "spectrum-drag-handle-icon-size-300": {
+ "value": "14px",
+ "description": "Used by `--spectrum-icon-size`.",
+ "control": "text",
+ "category": "Global"
+ },
+ "spectrum-gripper-icon-size-100": {
+ "value": "24px",
+ "description": "Used by `--spectrum-icon-size`.",
+ "control": "text",
+ "category": "Global"
+ },
+ "spectrum-link-out-icon-size-75": {
+ "value": "10px",
+ "description": "Used by `--spectrum-icon-size`.",
+ "control": "text",
+ "category": "Global"
+ },
+ "spectrum-link-out-icon-size-100": {
+ "value": "12px",
+ "description": "Used by `--spectrum-icon-size`.",
+ "control": "text",
+ "category": "Global"
+ },
+ "spectrum-link-out-icon-size-200": {
+ "value": "14px",
+ "description": "Used by `--spectrum-icon-size`.",
+ "control": "text",
+ "category": "Global"
+ },
+ "spectrum-link-out-icon-size-300": {
+ "value": "14px",
+ "description": "Used by `--spectrum-icon-size`.",
+ "control": "text",
+ "category": "Global"
+ },
+ "spectrum-link-out-icon-size-400": {
+ "value": "16px",
+ "description": "Used by `--spectrum-icon-size`.",
+ "control": "text",
+ "category": "Global"
+ }
+ },
+ "passthroughs": {},
+ "high-contrast": {}
}
diff --git a/components/icon/stories/icon.stories.js b/components/icon/stories/icon.stories.js
index 9287892c250..7bcbdc6ea35 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 metadata from "../dist/metadata.json";
-import packageJson from "../package.json";
import { IconGroup } from "./icon.test.js";
import { FullIconSetTemplate, Template, UIArrowsTemplate, UIDefaultTemplate, WorkflowDefaultTemplate } from "./template";
import { uiIconsWithDirections, workflowIconsCleaned, workflowSizes } from "./utilities.js";
+// Local assets to render the component styles and structure
+import metadata from "../dist/metadata.json";
+import packageJson from "../package.json";
+
/**
* The Icon component contains all of the CSS used for displaying both workflow and UI icons.
*
@@ -101,6 +103,10 @@ export default {
status: {
type: "migrated",
},
+ cssprops: {
+ ...metadata.modifiers,
+ ...metadata.component,
+ },
},
tags: ["migrated"],
};
diff --git a/components/illustratedmessage/dist/metadata.json b/components/illustratedmessage/dist/metadata.json
index 12705f6822e..2bed5e3a048 100644
--- a/components/illustratedmessage/dist/metadata.json
+++ b/components/illustratedmessage/dist/metadata.json
@@ -21,81 +21,409 @@
".spectrum-IllustratedMessage:lang(ko)",
".spectrum-IllustratedMessage:lang(zh)"
],
- "modifiers": [
- "--mod-illustrated-message-description-color",
- "--mod-illustrated-message-description-font-family",
- "--mod-illustrated-message-description-font-size",
- "--mod-illustrated-message-description-font-style",
- "--mod-illustrated-message-description-font-weight",
- "--mod-illustrated-message-description-line-height",
- "--mod-illustrated-message-description-pointer-events",
- "--mod-illustrated-message-description-position",
- "--mod-illustrated-message-description-to-action",
- "--mod-illustrated-message-description-z-index",
- "--mod-illustrated-message-display",
- "--mod-illustrated-message-heading-to-description",
- "--mod-illustrated-message-horizontal-maximum-width",
- "--mod-illustrated-message-illustrated-inline-size",
- "--mod-illustrated-message-illustration-block-size",
- "--mod-illustrated-message-illustration-color",
- "--mod-illustrated-message-illustration-size",
- "--mod-illustrated-message-illustration-to-heading",
- "--mod-illustrated-message-pointer-events",
- "--mod-illustrated-message-title-color",
- "--mod-illustrated-message-title-font-family",
- "--mod-illustrated-message-title-font-size",
- "--mod-illustrated-message-title-font-style",
- "--mod-illustrated-message-title-font-weight",
- "--mod-illustrated-message-title-line-height",
- "--mod-illustrated-message-vertical-maximum-width"
- ],
- "component": [
- "--spectrum-illustrated-message-description-color",
- "--spectrum-illustrated-message-description-font-family",
- "--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-to-action",
- "--spectrum-illustrated-message-heading-to-description",
- "--spectrum-illustrated-message-horizontal-maximum-width",
- "--spectrum-illustrated-message-illustration-color",
- "--spectrum-illustrated-message-illustration-size",
- "--spectrum-illustrated-message-illustration-to-content",
- "--spectrum-illustrated-message-illustration-to-heading",
- "--spectrum-illustrated-message-large-body-font-size",
- "--spectrum-illustrated-message-large-cjk-title-font-size",
- "--spectrum-illustrated-message-large-title-font-size",
- "--spectrum-illustrated-message-medium-body-font-size",
- "--spectrum-illustrated-message-medium-cjk-title-font-size",
- "--spectrum-illustrated-message-medium-title-font-size",
- "--spectrum-illustrated-message-small-body-font-size",
- "--spectrum-illustrated-message-small-cjk-title-font-size",
- "--spectrum-illustrated-message-small-title-font-size",
- "--spectrum-illustrated-message-title-color",
- "--spectrum-illustrated-message-title-font-family",
- "--spectrum-illustrated-message-title-font-size",
- "--spectrum-illustrated-message-title-font-style",
- "--spectrum-illustrated-message-title-font-weight",
- "--spectrum-illustrated-message-title-line-height",
- "--spectrum-illustrated-message-vertical-maximum-width"
- ],
- "global": [
- "--spectrum-body-color",
- "--spectrum-body-sans-serif-font-style",
- "--spectrum-body-sans-serif-font-weight",
- "--spectrum-heading-color",
- "--spectrum-line-height-200",
- "--spectrum-neutral-content-color-default",
- "--spectrum-sans-font-family-stack",
- "--spectrum-spacing-100",
- "--spectrum-spacing-200",
- "--spectrum-spacing-300",
- "--spectrum-spacing-75",
- "--spectrum-title-line-height",
- "--spectrum-title-sans-serif-font-style",
- "--spectrum-title-sans-serif-font-weight"
- ],
- "passthroughs": ["--mod-buttongroup-justify-content"],
- "high-contrast": ["--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-vertical-maximum-width": {
+ "description": "Used by `.spectrum-IllustratedMessage`.
Defaults to `var(--spectrum-illustrated-message-vertical-maximum-width)`, if not set.",
+ "control": "text",
+ "category": "Modifier"
+ },
+ "mod-illustrated-message-illustration-to-heading": {
+ "description": "Used by `.spectrum-IllustratedMessage-illustration`.
Defaults to `var(--spectrum-illustrated-message-illustration-to-heading)`, if not set.",
+ "control": "text",
+ "category": "Modifier"
+ },
+ "mod-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-block-size": {
+ "description": "Used by `.spectrum-IllustratedMessage-illustration`.
Defaults to `var(--mod-illustrated-message-illustration-size, var(--spectrum-illustrated-message-illustration-size))`, if not set.",
+ "control": "text",
+ "category": "Modifier"
+ },
+ "mod-illustrated-message-illustration-size": {
+ "description": "Used by `.spectrum-IllustratedMessage-illustration`.
Defaults to `var(--spectrum-illustrated-message-illustration-size)`, if not set.",
+ "control": "text",
+ "category": "Modifier"
+ },
+ "mod-illustrated-message-illustrated-inline-size": {
+ "description": "Used by `.spectrum-IllustratedMessage-illustration`.
Defaults to `var(--mod-illustrated-message-illustration-size, var(--spectrum-illustrated-message-illustration-size))`, if not set.",
+ "control": "text",
+ "category": "Modifier"
+ },
+ "mod-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": {
+ "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": {
+ "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": {
+ "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": {
+ "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": {
+ "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-to-description": {
+ "description": "Used by `.spectrum-IllustratedMessage-heading`.
Defaults to `var(--spectrum-illustrated-message-heading-to-description)`, if not set.",
+ "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": {
+ "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": {
+ "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": {
+ "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": {
+ "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": {
+ "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": {
+ "description": "Used by `.spectrum-IllustratedMessage-description`.
Defaults to `var(--spectrum-illustrated-message-description-color)`, if not set.",
+ "control": "color",
+ "category": "Modifier"
+ },
+ "mod-illustrated-message-horizontal-maximum-width": {
+ "description": "Used by `.spectrum-IllustratedMessage--horizontal`.
Defaults to `var(--spectrum-illustrated-message-horizontal-maximum-width)`, if not set.",
+ "control": "text",
+ "category": "Modifier"
+ },
+ "mod-illustrated-message-description-to-action": {
+ "description": "Used by `.spectrum-IllustratedMessage-actions`.
Defaults to `var(--spectrum-illustrated-message-description-to-action)`, if not set.",
+ "control": "text",
+ "category": "Modifier"
+ }
+ },
+ "component": {
+ "spectrum-illustrated-message-heading-to-description": {
+ "value": "4px",
+ "description": "Defined in `.spectrum-IllustratedMessage`.
Used by `.spectrum-IllustratedMessage-heading`.
Defaults to `var(--spectrum-spacing-75)`, if not set.",
+ "control": "text",
+ "category": "Component"
+ },
+ "spectrum-illustrated-message-illustration-to-heading": {
+ "value": "8px",
+ "description": "Defined in `.spectrum-IllustratedMessage`, `.spectrum-IllustratedMessage--sizeL`.
Used by `.spectrum-IllustratedMessage-illustration`.
Defaults to `var(--spectrum-spacing-100)`, if not set.",
+ "control": "text",
+ "category": "Component"
+ },
+ "spectrum-illustrated-message-illustration-to-content": {
+ "value": "8px",
+ "description": "Defined in `.spectrum-IllustratedMessage`, `.spectrum-IllustratedMessage--sizeL`.
Used by `.spectrum-IllustratedMessage--horizontal`.
Defaults to `var(--spectrum-spacing-100)`, if not set.",
+ "control": "text",
+ "category": "Component"
+ },
+ "spectrum-illustrated-message-description-to-action": {
+ "value": "16px",
+ "description": "Defined in `.spectrum-IllustratedMessage`.
Used by `.spectrum-IllustratedMessage-actions`.
Defaults to `var(--spectrum-spacing-300)`, if not set.",
+ "control": "text",
+ "category": "Component"
+ },
+ "spectrum-illustrated-message-illustration-color": {
+ "value": "var(--spectrum-gray-800)",
+ "description": "Defined in `.spectrum-IllustratedMessage`.
Used by `.spectrum-IllustratedMessage-illustration`.
Defaults to `var(--spectrum-neutral-content-color-default)`, if not set.",
+ "control": "color",
+ "category": "Component"
+ },
+ "spectrum-illustrated-message-illustration-size": {
+ "value": "160px",
+ "description": "Defined in `.spectrum-IllustratedMessage`, `.spectrum-IllustratedMessage--sizeL`.
Used by `.spectrum-IllustratedMessage-illustration`.
Defaults to `160px`, if not set.",
+ "control": "text",
+ "category": "Component"
+ },
+ "spectrum-illustrated-message-title-font-family": {
+ "value": "var(--spectrum-sans-font-family-stack)",
+ "description": "Defined in `.spectrum-IllustratedMessage`.
Used by `.spectrum-IllustratedMessage-heading`.
Defaults to `var(--spectrum-sans-font-family-stack)`, if not set.",
+ "control": "text",
+ "category": "Component"
+ },
+ "spectrum-illustrated-message-title-font-weight": {
+ "value": "700",
+ "description": "Defined in `.spectrum-IllustratedMessage`.
Used by `.spectrum-IllustratedMessage-heading`.
Defaults to `var(--spectrum-title-sans-serif-font-weight)`, if not set.",
+ "control": "text",
+ "category": "Component"
+ },
+ "spectrum-illustrated-message-title-font-style": {
+ "value": "normal",
+ "description": "Defined in `.spectrum-IllustratedMessage`.
Used by `.spectrum-IllustratedMessage-heading`.
Defaults to `var(--spectrum-title-sans-serif-font-style)`, if not set.",
+ "control": "text",
+ "category": "Component"
+ },
+ "spectrum-illustrated-message-title-font-size": {
+ "value": "var(--spectrum-title-cjk-size-xl)",
+ "description": "Defined in `.spectrum-IllustratedMessage`, `.spectrum-IllustratedMessage:lang(ja), .spectrum-IllustratedMessage:lang(ko), .spectrum-IllustratedMessage:lang(zh)`, `.spectrum-IllustratedMessage--sizeS`, `.spectrum-IllustratedMessage--sizeS:lang(ja), .spectrum-IllustratedMessage--sizeS:lang(ko), .spectrum-IllustratedMessage--sizeS:lang(zh)`, `.spectrum-IllustratedMessage--sizeL`, `.spectrum-IllustratedMessage--sizeL:lang(ja), .spectrum-IllustratedMessage--sizeL:lang(ko), .spectrum-IllustratedMessage--sizeL:lang(zh)`.
Used by `.spectrum-IllustratedMessage-heading`.
Defaults to `var(--spectrum-illustrated-message-large-cjk-title-font-size)`, if not set.",
+ "control": "text",
+ "category": "Component"
+ },
+ "spectrum-illustrated-message-medium-title-font-size": {
+ "value": "var(--spectrum-title-size-l)",
+ "description": "Used by `--spectrum-illustrated-message-title-font-size`.",
+ "control": "text",
+ "category": "Component"
+ },
+ "spectrum-illustrated-message-title-line-height": {
+ "value": "1.3",
+ "description": "Defined in `.spectrum-IllustratedMessage`.
Used by `.spectrum-IllustratedMessage-heading`.
Defaults to `var(--spectrum-title-line-height)`, if not set.",
+ "control": "text",
+ "category": "Component"
+ },
+ "spectrum-illustrated-message-title-color": {
+ "value": "var(--spectrum-gray-900)",
+ "description": "Defined in `.spectrum-IllustratedMessage`.
Used by `.spectrum-IllustratedMessage-heading`.
Defaults to `var(--spectrum-heading-color)`, if not set.",
+ "control": "color",
+ "category": "Component"
+ },
+ "spectrum-illustrated-message-description-font-family": {
+ "value": "var(--spectrum-sans-font-family-stack)",
+ "description": "Defined in `.spectrum-IllustratedMessage`.
Used by `.spectrum-IllustratedMessage-description`.
Defaults to `var(--spectrum-sans-font-family-stack)`, if not set.",
+ "control": "text",
+ "category": "Component"
+ },
+ "spectrum-illustrated-message-description-font-weight": {
+ "value": "400",
+ "description": "Defined in `.spectrum-IllustratedMessage`.
Used by `.spectrum-IllustratedMessage-description`.
Defaults to `var(--spectrum-body-sans-serif-font-weight)`, if not set.",
+ "control": "text",
+ "category": "Component"
+ },
+ "spectrum-illustrated-message-description-font-style": {
+ "value": "normal",
+ "description": "Defined in `.spectrum-IllustratedMessage`.
Used by `.spectrum-IllustratedMessage-description`.
Defaults to `var(--spectrum-body-sans-serif-font-style)`, if not set.",
+ "control": "text",
+ "category": "Component"
+ },
+ "spectrum-illustrated-message-description-font-size": {
+ "value": "var(--spectrum-body-size-xs)",
+ "description": "Defined in `.spectrum-IllustratedMessage`, `.spectrum-IllustratedMessage--sizeS`, `.spectrum-IllustratedMessage--sizeL`.
Used by `.spectrum-IllustratedMessage-description`.
Defaults to `var(--spectrum-illustrated-message-large-body-font-size)`, if not set.",
+ "control": "text",
+ "category": "Component"
+ },
+ "spectrum-illustrated-message-medium-body-font-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": {
+ "value": "1.5",
+ "description": "Defined in `.spectrum-IllustratedMessage`.
Used by `.spectrum-IllustratedMessage-description`.
Defaults to `var(--spectrum-line-height-200)`, if not set.",
+ "control": "text",
+ "category": "Component"
+ },
+ "spectrum-illustrated-message-description-color": {
+ "value": "var(--spectrum-gray-800)",
+ "description": "Defined in `.spectrum-IllustratedMessage`.
Used by `.spectrum-IllustratedMessage-description`.
Defaults to `var(--spectrum-body-color)`, if not set.",
+ "control": "color",
+ "category": "Component"
+ },
+ "spectrum-illustrated-message-medium-cjk-title-font-size": {
+ "value": "var(--spectrum-title-cjk-size-l)",
+ "description": "Used by `--spectrum-illustrated-message-title-font-size`.",
+ "control": "text",
+ "category": "Component"
+ },
+ "spectrum-illustrated-message-small-title-font-size": {
+ "value": "var(--spectrum-title-size-s)",
+ "description": "Used by `--spectrum-illustrated-message-title-font-size`.",
+ "control": "text",
+ "category": "Component"
+ },
+ "spectrum-illustrated-message-small-body-font-size": {
+ "value": "var(--spectrum-body-size-xs)",
+ "description": "Used by `--spectrum-illustrated-message-description-font-size`.",
+ "control": "text",
+ "category": "Component"
+ },
+ "spectrum-illustrated-message-small-cjk-title-font-size": {
+ "value": "var(--spectrum-title-cjk-size-s)",
+ "description": "Used by `--spectrum-illustrated-message-title-font-size`.",
+ "control": "text",
+ "category": "Component"
+ },
+ "spectrum-illustrated-message-large-title-font-size": {
+ "value": "var(--spectrum-title-size-xl)",
+ "description": "Used by `--spectrum-illustrated-message-title-font-size`.",
+ "control": "text",
+ "category": "Component"
+ },
+ "spectrum-illustrated-message-large-body-font-size": {
+ "value": "var(--spectrum-body-size-xs)",
+ "description": "Used by `--spectrum-illustrated-message-description-font-size`.",
+ "control": "text",
+ "category": "Component"
+ },
+ "spectrum-illustrated-message-large-cjk-title-font-size": {
+ "value": "var(--spectrum-title-cjk-size-xl)",
+ "description": "Used by `--spectrum-illustrated-message-title-font-size`.",
+ "control": "text",
+ "category": "Component"
+ },
+ "spectrum-illustrated-message-vertical-maximum-width": {
+ "value": "380px",
+ "description": "Used by `.spectrum-IllustratedMessage`.",
+ "control": "text",
+ "category": "Component"
+ },
+ "spectrum-illustrated-message-horizontal-maximum-width": {
+ "value": "535px",
+ "description": "Used by `.spectrum-IllustratedMessage--horizontal`.",
+ "control": "text",
+ "category": "Component"
+ }
+ },
+ "global": {
+ "spectrum-spacing-75": {
+ "value": "4px",
+ "description": "Used by `--spectrum-illustrated-message-heading-to-description`.",
+ "control": "text",
+ "category": "Global"
+ },
+ "spectrum-spacing-200": {
+ "value": "12px",
+ "description": "Used by `--spectrum-illustrated-message-illustration-to-heading`, `--spectrum-illustrated-message-illustration-to-content`.",
+ "control": "text",
+ "category": "Global"
+ },
+ "spectrum-spacing-300": {
+ "value": "16px",
+ "description": "Used by `--spectrum-illustrated-message-description-to-action`.",
+ "control": "text",
+ "category": "Global"
+ },
+ "spectrum-neutral-content-color-default": {
+ "value": "var(--spectrum-gray-800)",
+ "description": "Used by `--spectrum-illustrated-message-illustration-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-title-sans-serif-font-weight": {
+ "value": "700",
+ "description": "Used by `--spectrum-illustrated-message-title-font-weight`.",
+ "control": "text",
+ "category": "Global"
+ },
+ "spectrum-title-sans-serif-font-style": {
+ "value": "normal",
+ "description": "Used by `--spectrum-illustrated-message-title-font-style`.",
+ "control": "text",
+ "category": "Global"
+ },
+ "spectrum-title-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-line-height-200": {
+ "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"
+ },
+ "spectrum-spacing-100": {
+ "value": "8px",
+ "description": "Used by `--spectrum-illustrated-message-illustration-to-heading`, `--spectrum-illustrated-message-illustration-to-content`.",
+ "control": "text",
+ "category": "Global"
+ }
+ },
+ "passthroughs": {
+ "mod-buttongroup-justify-content": {
+ "category": "Passthrough"
+ }
+ },
+ "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"
+ }
+ }
}
diff --git a/components/illustratedmessage/stories/illustratedmessage.stories.js b/components/illustratedmessage/stories/illustratedmessage.stories.js
index b772ad28a22..f70b40d41bc 100644
--- a/components/illustratedmessage/stories/illustratedmessage.stories.js
+++ b/components/illustratedmessage/stories/illustratedmessage.stories.js
@@ -1,10 +1,12 @@
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 { 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, description and group of buttons. 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.
*/
@@ -69,6 +71,7 @@ export default {
description: "This page isn't available. Try checking the URL or visit a different page.",
},
parameters: {
+ layout: "centered",
design: {
type: "figma",
url: "https://www.figma.com/design/Mngz9H7WZLbrCvGQf3GnsY/S2-%2F-Desktop?node-id=20032-601",
@@ -78,7 +81,10 @@ export default {
status: {
type: "migrated",
},
- layout: "centered"
+ cssprops: {
+ ...metadata.modifiers,
+ ...metadata.component,
+ },
},
tags: ["migrated"],
};
diff --git a/components/infieldbutton/dist/metadata.json b/components/infieldbutton/dist/metadata.json
index cf5dfa5f4cc..bec3dd11c18 100644
--- a/components/infieldbutton/dist/metadata.json
+++ b/components/infieldbutton/dist/metadata.json
@@ -12,112 +12,498 @@
".spectrum-InfieldButton-inline",
".spectrum-InfieldButton-inline .spectrum-InfieldButton",
".spectrum-InfieldButton-inline > .spectrum-InfieldButton.spectrum-InfieldButton--sizeS",
- ".spectrum-InfieldButton.spectrum-InfieldButton--quiet",
- ".spectrum-InfieldButton.spectrum-InfieldButton--quiet:disabled",
- ".spectrum-InfieldButton.spectrum-InfieldButton--sizeL",
- ".spectrum-InfieldButton.spectrum-InfieldButton--sizeS",
- ".spectrum-InfieldButton.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-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-edge-to-fill",
- "--mod-infield-button-field-edge-to-icon",
- "--mod-infield-button-fill-justify-content",
- "--mod-infield-button-fill-padding",
- "--mod-infield-button-height",
- "--mod-infield-button-icon-color",
- "--mod-infield-button-icon-color-disabled",
- "--mod-infield-button-icon-color-down",
- "--mod-infield-button-icon-color-down-disabled",
- "--mod-infield-button-icon-color-hover",
- "--mod-infield-button-icon-color-hover-disabled",
- "--mod-infield-button-icon-color-key-focus",
- "--mod-infield-button-icon-color-key-focus-disabled",
- "--mod-infield-button-side-edge-to-fill",
- "--mod-infield-button-width"
- ],
- "component": [
- "--spectrum-in-field-button-edge-to-fill-extra-large",
- "--spectrum-in-field-button-edge-to-fill-large",
- "--spectrum-in-field-button-edge-to-fill-medium",
- "--spectrum-in-field-button-edge-to-fill-small",
- "--spectrum-in-field-button-side-edge-to-fill-extra-large",
- "--spectrum-in-field-button-side-edge-to-fill-large",
- "--spectrum-in-field-button-side-edge-to-fill-medium",
- "--spectrum-in-field-button-side-edge-to-fill-small",
- "--spectrum-infield-button-background-color",
- "--spectrum-infield-button-background-color-down",
- "--spectrum-infield-button-background-color-hover",
- "--spectrum-infield-button-border-radius",
- "--spectrum-infield-button-downstate-perspective",
- "--spectrum-infield-button-edge-to-fill",
- "--spectrum-infield-button-field-edge-to-disclosure-icon",
- "--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-inline-edge-to-fill",
- "--spectrum-infield-button-inline-field-edge-to-icon",
- "--spectrum-infield-button-width"
- ],
- "global": [
- "--spectrum-animation-duration-100",
- "--spectrum-component-height-100",
- "--spectrum-component-height-200",
- "--spectrum-component-height-300",
- "--spectrum-component-height-75",
- "--spectrum-component-size-difference-down",
- "--spectrum-component-size-minimum-perspective-down",
- "--spectrum-component-size-width-ratio-down",
- "--spectrum-corner-radius-small-size-extra-large",
- "--spectrum-corner-radius-small-size-large",
- "--spectrum-corner-radius-small-size-medium",
- "--spectrum-corner-radius-small-size-small",
- "--spectrum-disabled-background-color",
- "--spectrum-disabled-content-color",
- "--spectrum-downstate-height",
- "--spectrum-downstate-width",
- "--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-field-edge-to-icon-100",
- "--spectrum-field-edge-to-icon-200",
- "--spectrum-field-edge-to-icon-300",
- "--spectrum-field-edge-to-icon-75",
- "--spectrum-gray-100",
- "--spectrum-gray-200",
- "--spectrum-neutral-content-color-default",
- "--spectrum-neutral-content-color-down",
- "--spectrum-neutral-content-color-hover"
+ ".spectrum-InfieldButton:not(:disabled):hover",
+ ".spectrum-InfieldButton.spectrum-InfieldButton--quiet",
+ ".spectrum-InfieldButton.spectrum-InfieldButton--quiet:disabled",
+ ".spectrum-InfieldButton.spectrum-InfieldButton--sizeL",
+ ".spectrum-InfieldButton.spectrum-InfieldButton--sizeS",
+ ".spectrum-InfieldButton.spectrum-InfieldButton--sizeXL"
],
- "passthroughs": [],
- "high-contrast": [
- "--highcontrast-infield-button-background-color",
- "--highcontrast-infield-button-icon-color"
- ]
+ "modifiers": {
+ "mod-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`.
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": {
+ "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": {
+ "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": {
+ "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": {
+ "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": {
+ "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": {
+ "description": "Defined in `.spectrum-InfieldButton:disabled`, `.spectrum-InfieldButton.spectrum-InfieldButton--quiet:disabled`.
Defaults to `var(--mod-infield-button-border-color-quiet-disabled, transparent)`, if not set.",
+ "control": "color",
+ "category": "Modifier"
+ },
+ "mod-infield-button-border-color-disabled": {
+ "description": "Used by `--mod-infield-button-border-color`.
Defaults to `var(--spectrum-disabled-background-color)`, if not set.",
+ "control": "color",
+ "category": "Modifier"
+ },
+ "mod-infield-button-icon-color": {
+ "description": "Defined in `.spectrum-InfieldButton:disabled`, `.spectrum-InfieldButton:hover`, `.spectrum-InfieldButton:active`.
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": {
+ "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": {
+ "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": {
+ "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": {
+ "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": {
+ "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": {
+ "description": "Defined in `.spectrum-InfieldButton:disabled`.
Defaults to `var(--mod-infield-button-icon-color-key-focus-disabled, var(--spectrum-disabled-content-color))`, if not set.",
+ "control": "color",
+ "category": "Modifier"
+ },
+ "mod-infield-button-icon-color-key-focus-disabled": {
+ "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-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": {
+ "description": "Defined in `.spectrum-InfieldButton.spectrum-InfieldButton--quiet`.
Defaults to `var(--mod-infield-button-background-color-key-focus-quiet, transparent)`, 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-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": {
+ "description": "Used by `.spectrum-InfieldButton`.
Defaults to `var(--spectrum-infield-button-height)`, if not set.",
+ "control": "text",
+ "category": "Modifier"
+ },
+ "mod-infield-button-width": {
+ "description": "Used by `.spectrum-InfieldButton`, `.spectrum-InfieldButton-inline .spectrum-InfieldButton`, `.spectrum-InfieldButton-inline > .spectrum-InfieldButton.spectrum-InfieldButton--sizeS`.
Defaults to `var(--spectrum-infield-button-width)`, if not set.",
+ "control": "text",
+ "category": "Modifier"
+ },
+ "mod-infield-button-edge-to-fill": {
+ "description": "Used by `.spectrum-InfieldButton`, `.spectrum-InfieldButton-inline .spectrum-InfieldButton`.
Defaults to `var(--spectrum-infield-button-edge-to-fill)`, if not set.",
+ "control": "text",
+ "category": "Modifier"
+ },
+ "mod-infield-button-field-edge-to-icon": {
+ "description": "Defined in `.spectrum-InfieldButton-inline .spectrum-InfieldButton`.
Used by `.spectrum-InfieldButton-icon`.
Defaults to `var(--spectrum-infield-button-field-edge-to-disclosure-icon)`, if not set.",
+ "control": "text",
+ "category": "Modifier"
+ },
+ "mod-infield-button-side-edge-to-fill": {
+ "description": "Used by `.spectrum-InfieldButton-inline .spectrum-InfieldButton`.
Defaults to `var(--spectrum-infield-button-inline-edge-to-fill)`, if not set.",
+ "control": "text",
+ "category": "Modifier"
+ },
+ "mod-infield-button-border-radius": {
+ "description": "Used by `.spectrum-InfieldButton-fill`.
Defaults to `var(--spectrum-infield-button-border-radius)`, if not set.",
+ "control": "text",
+ "category": "Modifier"
+ },
+ "mod-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": {
+ "description": "Used by `.spectrum-InfieldButton-fill`.
Defaults to `var(--spectrum-infield-button-fill-justify-content)`, if not set.",
+ "control": "text",
+ "category": "Modifier"
+ }
+ },
+ "component": {
+ "spectrum-infield-button-background-color": {
+ "value": "light-dark(rgb(233, 233, 233), rgb(44, 44, 44))",
+ "description": "Defined in `.spectrum-InfieldButton`.
Used by `.spectrum-InfieldButton-fill`.
Defaults to `var(--spectrum-gray-100)`, if not set.",
+ "control": "color",
+ "category": "Component"
+ },
+ "spectrum-infield-button-background-color-hover": {
+ "value": "light-dark(rgb(225, 225, 225), rgb(50, 50, 50))",
+ "description": "Defined in `.spectrum-InfieldButton`.
Used by `--mod-infield-button-background-color`.
Defaults to `var(--spectrum-gray-200)`, if not set.",
+ "control": "color",
+ "category": "Component"
+ },
+ "spectrum-infield-button-background-color-down": {
+ "value": "light-dark(rgb(225, 225, 225), rgb(50, 50, 50))",
+ "description": "Defined in `.spectrum-InfieldButton`.
Used by `--mod-infield-button-background-color`.
Defaults to `var(--spectrum-gray-200)`, if not set.",
+ "control": "color",
+ "category": "Component"
+ },
+ "spectrum-infield-button-icon-color": {
+ "value": "var(--spectrum-gray-800)",
+ "description": "Defined in `.spectrum-InfieldButton`.
Used by `.spectrum-InfieldButton-icon`.
Defaults to `var(--spectrum-neutral-content-color-default)`, if not set.",
+ "control": "color",
+ "category": "Component"
+ },
+ "spectrum-infield-button-icon-color-hover": {
+ "value": "var(--spectrum-gray-900)",
+ "description": "Defined in `.spectrum-InfieldButton`.
Used by `--mod-infield-button-icon-color`.
Defaults to `var(--spectrum-neutral-content-color-hover)`, if not set.",
+ "control": "color",
+ "category": "Component"
+ },
+ "spectrum-infield-button-icon-color-down": {
+ "value": "var(--spectrum-gray-900)",
+ "description": "Defined in `.spectrum-InfieldButton`.
Used by `--mod-infield-button-icon-color`.
Defaults to `var(--spectrum-neutral-content-color-down)`, if not set.",
+ "control": "color",
+ "category": "Component"
+ },
+ "spectrum-infield-button-height": {
+ "value": "48px",
+ "description": "Defined in `.spectrum-InfieldButton`, `.spectrum-InfieldButton.spectrum-InfieldButton--sizeS`, `.spectrum-InfieldButton.spectrum-InfieldButton--sizeL`, `.spectrum-InfieldButton.spectrum-InfieldButton--sizeXL`.
Used by `.spectrum-InfieldButton`.
Defaults to `var(--spectrum-component-height-300)`, if not set.",
+ "control": "text",
+ "category": "Component"
+ },
+ "spectrum-infield-button-width": {
+ "value": "48px",
+ "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-inline .spectrum-InfieldButton`, `.spectrum-InfieldButton-inline > .spectrum-InfieldButton.spectrum-InfieldButton--sizeS`.
Defaults to `var(--spectrum-component-height-300)`, if not set.",
+ "control": "text",
+ "category": "Component"
+ },
+ "spectrum-infield-button-border-radius": {
+ "value": "6px",
+ "description": "Defined in `.spectrum-InfieldButton`, `.spectrum-InfieldButton.spectrum-InfieldButton--sizeS`, `.spectrum-InfieldButton.spectrum-InfieldButton--sizeL`, `.spectrum-InfieldButton.spectrum-InfieldButton--sizeXL`.
Used by `.spectrum-InfieldButton-fill`.
Defaults to `var(--spectrum-corner-radius-small-size-extra-large)`, if not set.",
+ "control": "text",
+ "category": "Component"
+ },
+ "spectrum-infield-button-edge-to-fill": {
+ "value": "8px",
+ "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-inline .spectrum-InfieldButton`.
Defaults to `var(--spectrum-in-field-button-edge-to-fill-extra-large)`, if not set.",
+ "control": "text",
+ "category": "Component"
+ },
+ "spectrum-in-field-button-edge-to-fill-medium": {
+ "value": "6px",
+ "description": "Used by `--spectrum-infield-button-edge-to-fill`.",
+ "control": "text",
+ "category": "Component"
+ },
+ "spectrum-infield-button-inline-field-edge-to-icon": {
+ "value": "var(--spectrum-field-edge-to-icon-300)",
+ "description": "Defined in `.spectrum-InfieldButton`, `.spectrum-InfieldButton.spectrum-InfieldButton--sizeS`, `.spectrum-InfieldButton.spectrum-InfieldButton--sizeL`, `.spectrum-InfieldButton.spectrum-InfieldButton--sizeXL`.
Used by `--mod-infield-button-field-edge-to-icon`.
Defaults to `var(--spectrum-field-edge-to-icon-300)`, if not set.",
+ "control": "text",
+ "category": "Component"
+ },
+ "spectrum-infield-button-inline-edge-to-fill": {
+ "value": "var(--spectrum-in-field-button-side-edge-to-fill-extra-large)",
+ "description": "Defined in `.spectrum-InfieldButton`, `.spectrum-InfieldButton.spectrum-InfieldButton--sizeS`, `.spectrum-InfieldButton.spectrum-InfieldButton--sizeL`, `.spectrum-InfieldButton.spectrum-InfieldButton--sizeXL`.
Used by `.spectrum-InfieldButton-inline .spectrum-InfieldButton`.
Defaults to `var(--spectrum-in-field-button-side-edge-to-fill-extra-large)`, if not set.",
+ "control": "text",
+ "category": "Component"
+ },
+ "spectrum-in-field-button-side-edge-to-fill-medium": {
+ "description": "Used by `--spectrum-infield-button-inline-edge-to-fill`.",
+ "control": "text",
+ "category": "Component"
+ },
+ "spectrum-infield-button-fill-padding": {
+ "value": "0px",
+ "description": "Defined in `.spectrum-InfieldButton`.
Used by `.spectrum-InfieldButton-fill`.
Defaults to `0px`, if not set.",
+ "control": "text",
+ "category": "Component"
+ },
+ "spectrum-infield-button-field-edge-to-disclosure-icon": {
+ "value": "17px",
+ "description": "Defined in `.spectrum-InfieldButton`, `.spectrum-InfieldButton.spectrum-InfieldButton--sizeS`, `.spectrum-InfieldButton.spectrum-InfieldButton--sizeL`, `.spectrum-InfieldButton.spectrum-InfieldButton--sizeXL`.
Used by `.spectrum-InfieldButton-icon`.
Defaults to `var(--spectrum-field-edge-to-disclosure-icon-300)`, if not set.",
+ "control": "text",
+ "category": "Component"
+ },
+ "spectrum-infield-button-fill-justify-content": {
+ "value": "center",
+ "description": "Defined in `.spectrum-InfieldButton`.
Used by `.spectrum-InfieldButton-fill`.
Defaults to `center`, if not set.",
+ "control": "text",
+ "category": "Component"
+ },
+ "spectrum-infield-button-downstate-perspective": {
+ "value": "24px",
+ "description": "Defined in `.spectrum-InfieldButton`, `.spectrum-InfieldButton.spectrum-InfieldButton--sizeS`.
Used by `.spectrum-InfieldButton:active`.
Defaults to `var(--spectrum-component-size-minimum-perspective-down)`, if not set.",
+ "control": "text",
+ "category": "Component"
+ },
+ "spectrum-in-field-button-edge-to-fill-small": {
+ "value": "4px",
+ "description": "Used by `--spectrum-infield-button-edge-to-fill`.",
+ "control": "text",
+ "category": "Component"
+ },
+ "spectrum-in-field-button-side-edge-to-fill-small": {
+ "description": "Used by `--spectrum-infield-button-inline-edge-to-fill`.",
+ "control": "text",
+ "category": "Component"
+ },
+ "spectrum-in-field-button-edge-to-fill-large": {
+ "value": "8px",
+ "description": "Used by `--spectrum-infield-button-edge-to-fill`.",
+ "control": "text",
+ "category": "Component"
+ },
+ "spectrum-in-field-button-side-edge-to-fill-large": {
+ "description": "Used by `--spectrum-infield-button-inline-edge-to-fill`.",
+ "control": "text",
+ "category": "Component"
+ },
+ "spectrum-in-field-button-edge-to-fill-extra-large": {
+ "value": "8px",
+ "description": "Used by `--spectrum-infield-button-edge-to-fill`.",
+ "control": "text",
+ "category": "Component"
+ },
+ "spectrum-in-field-button-side-edge-to-fill-extra-large": {
+ "description": "Used by `--spectrum-infield-button-inline-edge-to-fill`.",
+ "control": "text",
+ "category": "Component"
+ }
+ },
+ "global": {
+ "spectrum-gray-100": {
+ "value": "light-dark(rgb(233, 233, 233), rgb(44, 44, 44))",
+ "description": "Used by `--spectrum-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 `--spectrum-infield-button-background-color-hover`, `--spectrum-infield-button-background-color-down`.",
+ "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-component-height-100": {
+ "value": "32px",
+ "description": "Used by `--spectrum-infield-button-height`, `--spectrum-infield-button-width`.",
+ "control": "text",
+ "category": "Global"
+ },
+ "spectrum-corner-radius-small-size-medium": {
+ "value": "4px",
+ "description": "Used by `--spectrum-infield-button-border-radius`.",
+ "control": "text",
+ "category": "Global"
+ },
+ "spectrum-field-edge-to-icon-100": {
+ "description": "Used by `--spectrum-infield-button-inline-field-edge-to-icon`.",
+ "control": "text",
+ "category": "Global"
+ },
+ "spectrum-field-edge-to-disclosure-icon-100": {
+ "value": "11px",
+ "description": "Used by `--spectrum-infield-button-field-edge-to-disclosure-icon`.",
+ "control": "text",
+ "category": "Global"
+ },
+ "spectrum-downstate-height": {
+ "description": "Used by `--spectrum-infield-button-downstate-perspective`.",
+ "control": "text",
+ "category": "Global"
+ },
+ "spectrum-downstate-width": {
+ "description": "Used by `--spectrum-infield-button-downstate-perspective`.",
+ "control": "text",
+ "category": "Global"
+ },
+ "spectrum-component-size-width-ratio-down": {
+ "value": "0.3333",
+ "description": "Used by `--spectrum-infield-button-downstate-perspective`.",
+ "control": "text",
+ "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`, `--mod-infield-button-border-color`.",
+ "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-corner-radius-small-size-small": {
+ "value": "3px",
+ "description": "Used by `--spectrum-infield-button-border-radius`.",
+ "control": "text",
+ "category": "Global"
+ },
+ "spectrum-field-edge-to-disclosure-icon-75": {
+ "value": "7px",
+ "description": "Used by `--spectrum-infield-button-field-edge-to-disclosure-icon`.",
+ "control": "text",
+ "category": "Global"
+ },
+ "spectrum-field-edge-to-icon-75": {
+ "description": "Used by `--spectrum-infield-button-inline-field-edge-to-icon`.",
+ "control": "text",
+ "category": "Global"
+ },
+ "spectrum-component-size-minimum-perspective-down": {
+ "value": "24px",
+ "description": "Used by `--spectrum-infield-button-downstate-perspective`.",
+ "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-corner-radius-small-size-large": {
+ "value": "5px",
+ "description": "Used by `--spectrum-infield-button-border-radius`.",
+ "control": "text",
+ "category": "Global"
+ },
+ "spectrum-field-edge-to-disclosure-icon-200": {
+ "value": "14px",
+ "description": "Used by `--spectrum-infield-button-field-edge-to-disclosure-icon`.",
+ "control": "text",
+ "category": "Global"
+ },
+ "spectrum-field-edge-to-icon-200": {
+ "description": "Used by `--spectrum-infield-button-inline-field-edge-to-icon`.",
+ "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-corner-radius-small-size-extra-large": {
+ "value": "6px",
+ "description": "Used by `--spectrum-infield-button-border-radius`.",
+ "control": "text",
+ "category": "Global"
+ },
+ "spectrum-field-edge-to-disclosure-icon-300": {
+ "value": "17px",
+ "description": "Used by `--spectrum-infield-button-field-edge-to-disclosure-icon`.",
+ "control": "text",
+ "category": "Global"
+ },
+ "spectrum-field-edge-to-icon-300": {
+ "description": "Used by `--spectrum-infield-button-inline-field-edge-to-icon`.",
+ "control": "text",
+ "category": "Global"
+ },
+ "spectrum-component-size-difference-down": {
+ "value": "-2px",
+ "description": "Used by `.spectrum-InfieldButton:active`.",
+ "control": "text",
+ "category": "Global"
+ },
+ "spectrum-animation-duration-100": {
+ "description": "Used by `.spectrum-InfieldButton-fill`.",
+ "control": "text",
+ "category": "Global"
+ }
+ },
+ "passthroughs": {},
+ "high-contrast": {
+ "highcontrast-infield-button-background-color": {
+ "value": "var(--mod-infield-button-background-color, var(--spectrum-infield-button-background-color))",
+ "description": "Defined in `.spectrum-InfieldButton`, `.spectrum-InfieldButton:disabled`, `.spectrum-InfieldButton:not(:disabled):active, .spectrum-InfieldButton:not(:disabled):focus-visible`, `.spectrum-InfieldButton--quiet`, `.spectrum-InfieldButton--quiet:disabled`, `.spectrum-InfieldButton--quiet:not(:disabled):active, .spectrum-InfieldButton--quiet:not(:disabled):focus-visible`, `.spectrum-InfieldButton:not(:disabled):hover`, `.spectrum-InfieldButton--quiet:not(:disabled):hover`.
Used by `.spectrum-InfieldButton-fill`.
Defaults to `var(--mod-infield-button-background-color, var(--spectrum-infield-button-background-color))`, if not set.",
+ "control": "color"
+ },
+ "highcontrast-infield-button-icon-color": {
+ "value": "var(--mod-infield-button-icon-color, var(--spectrum-infield-button-icon-color))",
+ "description": "Defined in `.spectrum-InfieldButton`, `.spectrum-InfieldButton--quiet`, `.spectrum-InfieldButton--quiet:disabled`, `.spectrum-InfieldButton--quiet:not(:disabled):active, .spectrum-InfieldButton--quiet:not(:disabled):focus-visible`, `.spectrum-InfieldButton--quiet:not(:disabled):hover`.
Used by `.spectrum-InfieldButton-icon`.
Defaults to `var(--mod-infield-button-icon-color, var(--spectrum-infield-button-icon-color))`, if not set.",
+ "control": "color"
+ }
+ }
}
diff --git a/components/infieldbutton/stories/infieldbutton.stories.js b/components/infieldbutton/stories/infieldbutton.stories.js
index 2b3a91d6faa..00b3d0e3c66 100644
--- a/components/infieldbutton/stories/infieldbutton.stories.js
+++ b/components/infieldbutton/stories/infieldbutton.stories.js
@@ -2,11 +2,13 @@ import { default as IconStories } from "@spectrum-css/icon/stories/icon.stories.
import { Sizes, withDownStateDimensionCapture } from "@spectrum-css/preview/decorators";
import { disableDefaultModes } from "@spectrum-css/preview/modes";
import { isActive, isDisabled, 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 { InfieldButtonGroupVariant, InfieldButtonIcons, 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-field buttons are used to represent actions within input fields. They’re currently used inside the [number field](/docs/components-stepper--docs).
*/
@@ -62,6 +64,10 @@ export default {
status: {
type: "migrated",
},
+ cssprops: {
+ ...metadata.modifiers,
+ ...metadata.component,
+ },
},
decorators: [
withDownStateDimensionCapture,
diff --git a/components/infieldprogresscircle/dist/metadata.json b/components/infieldprogresscircle/dist/metadata.json
index ffc95f11390..3636c6d5520 100644
--- a/components/infieldprogresscircle/dist/metadata.json
+++ b/components/infieldprogresscircle/dist/metadata.json
@@ -7,19 +7,60 @@
".spectrum-InfieldProgressCircle--sizeS",
".spectrum-InfieldProgressCircle--sizeXL"
],
- "modifiers": [],
- "component": [
- "--spectrum-in-field-progress-circle-edge-to-fill",
- "--spectrum-in-field-progress-circle-size-100",
- "--spectrum-in-field-progress-circle-size-200",
- "--spectrum-in-field-progress-circle-size-300",
- "--spectrum-in-field-progress-circle-size-75",
- "--spectrum-infieldprogresscircle-padding-block"
- ],
- "global": ["--spectrum-progress-circle-thickness-small"],
- "passthroughs": [
- "--mod-progress-circle-size",
- "--mod-progress-circle-thickness"
- ],
- "high-contrast": []
+ "modifiers": {},
+ "component": {
+ "spectrum-in-field-progress-circle-size-100": {
+ "value": "20px",
+ "description": "Used by `--mod-progress-circle-size`.",
+ "control": "text",
+ "category": "Component"
+ },
+ "spectrum-infieldprogresscircle-padding-block": {
+ "value": "1px",
+ "description": "Defined in `.spectrum-InfieldProgressCircle`.
Used by `.spectrum-InfieldProgressCircle`.
Defaults to `var(--spectrum-in-field-progress-circle-edge-to-fill)`, if not set.",
+ "control": "text",
+ "category": "Component"
+ },
+ "spectrum-in-field-progress-circle-edge-to-fill": {
+ "value": "1px",
+ "description": "Used by `--spectrum-infieldprogresscircle-padding-block`.",
+ "control": "text",
+ "category": "Component"
+ },
+ "spectrum-in-field-progress-circle-size-75": {
+ "value": "16px",
+ "description": "Used by `--mod-progress-circle-size`.",
+ "control": "text",
+ "category": "Component"
+ },
+ "spectrum-in-field-progress-circle-size-200": {
+ "value": "22px",
+ "description": "Used by `--mod-progress-circle-size`.",
+ "control": "text",
+ "category": "Component"
+ },
+ "spectrum-in-field-progress-circle-size-300": {
+ "value": "26px",
+ "description": "Used by `--mod-progress-circle-size`.",
+ "control": "text",
+ "category": "Component"
+ }
+ },
+ "global": {
+ "spectrum-progress-circle-thickness-small": {
+ "value": "2px",
+ "description": "Used by `--mod-progress-circle-thickness`.",
+ "control": "text",
+ "category": "Global"
+ }
+ },
+ "passthroughs": {
+ "mod-progress-circle-thickness": {
+ "category": "Passthrough"
+ },
+ "mod-progress-circle-size": {
+ "category": "Passthrough"
+ }
+ },
+ "high-contrast": {}
}
diff --git a/components/inlinealert/dist/metadata.json b/components/inlinealert/dist/metadata.json
index 81ebe4df638..9adb0b29623 100644
--- a/components/inlinealert/dist/metadata.json
+++ b/components/inlinealert/dist/metadata.json
@@ -26,101 +26,512 @@
".spectrum-InLineAlert.spectrum-InLineAlert--positive.spectrum-InLineAlert--subtle",
".spectrum-InLineAlert.spectrum-InLineAlert--subtle"
],
- "modifiers": [
- "--mod-inlinealert-background-color",
- "--mod-inlinealert-border-and-icon-color",
- "--mod-inlinealert-border-radius",
- "--mod-inlinealert-border-width",
- "--mod-inlinealert-content-color",
- "--mod-inlinealert-content-font-family",
- "--mod-inlinealert-content-font-size",
- "--mod-inlinealert-content-font-style",
- "--mod-inlinealert-content-font-weight",
- "--mod-inlinealert-content-line-height",
- "--mod-inlinealert-header-color",
- "--mod-inlinealert-header-min-block-size",
- "--mod-inlinealert-heading-font-family",
- "--mod-inlinealert-heading-font-size",
- "--mod-inlinealert-heading-font-style",
- "--mod-inlinealert-heading-font-weight",
- "--mod-inlinealert-heading-line-height",
- "--mod-inlinealert-icon-size",
- "--mod-inlinealert-min-inline-size",
- "--mod-inlinealert-min-spacing-header-to-icon",
- "--mod-inlinealert-spacing-content-link-button",
- "--mod-inlinealert-spacing-edge-to-text",
- "--mod-inlinealert-spacing-header-content"
- ],
- "component": [
- "--spectrum-in-line-alert-minimum-width",
- "--spectrum-inlinealert-background-color",
- "--spectrum-inlinealert-border-and-icon-color",
- "--spectrum-inlinealert-border-radius",
- "--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-min-spacing-header-to-icon",
- "--spectrum-inlinealert-spacing-content-link-button",
- "--spectrum-inlinealert-spacing-edge-to-text",
- "--spectrum-inlinealert-spacing-header-content"
- ],
- "global": [
- "--spectrum-background-layer-2-color",
- "--spectrum-black",
- "--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-700",
- "--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-background-color-default",
- "--spectrum-informative-subtle-background-color-default",
- "--spectrum-informative-visual-color",
- "--spectrum-negative-background-color-default",
- "--spectrum-negative-subtle-background-color-default",
- "--spectrum-negative-visual-color",
- "--spectrum-neutral-background-color-default",
- "--spectrum-neutral-subtle-background-color-default",
- "--spectrum-neutral-visual-color",
- "--spectrum-notice-background-color-default",
- "--spectrum-notice-subtle-background-color-default",
- "--spectrum-notice-visual-color",
- "--spectrum-positive-background-color-default",
- "--spectrum-positive-subtle-background-color-default",
- "--spectrum-positive-visual-color",
- "--spectrum-sans-font-family-stack",
- "--spectrum-spacing-100",
- "--spectrum-spacing-200",
- "--spectrum-spacing-300",
- "--spectrum-white",
- "--spectrum-workflow-icon-size-100"
- ],
- "passthroughs": [],
- "high-contrast": [
- "--highcontrast-inlinealert-background-color",
- "--highcontrast-inlinealert-border-and-icon-color",
- "--highcontrast-inlinealert-border-width",
- "--highcontrast-inlinealert-content-color",
- "--highcontrast-inlinealert-header-color"
- ]
+ "modifiers": {
+ "mod-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": {
+ "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": {
+ "description": "Used by `.spectrum-InLineAlert`.
Defaults to `var(--spectrum-inlinealert-border-width)`, if not set.",
+ "control": "text",
+ "category": "Modifier"
+ },
+ "mod-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": {
+ "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": {
+ "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": {
+ "description": "Used by `.spectrum-InLineAlert-icon`.
Defaults to `var(--spectrum-inlinealert-icon-size)`, if not set.",
+ "control": "text",
+ "category": "Modifier"
+ },
+ "mod-inlinealert-spacing-header-content": {
+ "description": "Used by `.spectrum-InLineAlert-header`.
Defaults to `var(--spectrum-inlinealert-spacing-header-content)`, if not set.",
+ "control": "text",
+ "category": "Modifier"
+ },
+ "mod-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": {
+ "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": {
+ "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": {
+ "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": {
+ "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": {
+ "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": {
+ "description": "Used by `.spectrum-InLineAlert-header`.
Defaults to `var(--spectrum-inlinealert-header-color)`, if not set.",
+ "control": "color",
+ "category": "Modifier"
+ },
+ "mod-inlinealert-min-spacing-header-to-icon": {
+ "description": "Used by `.spectrum-InLineAlert-content, .spectrum-InLineAlert-header`.
Defaults to `var(--spectrum-inlinealert-min-spacing-header-to-icon)`, if not set.",
+ "control": "text",
+ "category": "Modifier"
+ },
+ "mod-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": {
+ "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": {
+ "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": {
+ "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": {
+ "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": {
+ "description": "Used by `.spectrum-InLineAlert-content`.
Defaults to `var(--spectrum-inlinealert-content-color)`, if not set.",
+ "control": "color",
+ "category": "Modifier"
+ },
+ "mod-inlinealert-spacing-content-link-button": {
+ "description": "Used by `.spectrum-InLineAlert-footer`.
Defaults to `var(--spectrum-inlinealert-spacing-content-link-button)`, if not set.",
+ "control": "text",
+ "category": "Modifier"
+ }
+ },
+ "component": {
+ "spectrum-inlinealert-heading-font-family": {
+ "value": "var(--spectrum-sans-font-family-stack)",
+ "description": "Defined in `.spectrum-InLineAlert`.
Used by `.spectrum-InLineAlert-header`.
Defaults to `var(--spectrum-sans-font-family-stack)`, if not set.",
+ "control": "text",
+ "category": "Component"
+ },
+ "spectrum-inlinealert-heading-font-weight": {
+ "value": "800",
+ "description": "Defined in `.spectrum-InLineAlert`.
Used by `.spectrum-InLineAlert-header`.
Defaults to `var(--spectrum-heading-sans-serif-font-weight)`, if not set.",
+ "control": "text",
+ "category": "Component"
+ },
+ "spectrum-inlinealert-heading-font-style": {
+ "value": "normal",
+ "description": "Defined in `.spectrum-InLineAlert`.
Used by `.spectrum-InLineAlert-header`.
Defaults to `var(--spectrum-heading-sans-serif-font-style)`, if not set.",
+ "control": "text",
+ "category": "Component"
+ },
+ "spectrum-inlinealert-heading-font-size": {
+ "value": "var(--spectrum-font-size-100)",
+ "description": "Defined in `.spectrum-InLineAlert`.
Used by `.spectrum-InLineAlert-header`.
Defaults to `var(--spectrum-heading-size-xxs)`, if not set.",
+ "control": "text",
+ "category": "Component"
+ },
+ "spectrum-inlinealert-heading-line-height": {
+ "value": "1.3",
+ "description": "Defined in `.spectrum-InLineAlert`.
Used by `.spectrum-InLineAlert-header`.
Defaults to `var(--spectrum-heading-line-height)`, if not set.",
+ "control": "text",
+ "category": "Component"
+ },
+ "spectrum-inlinealert-content-font-family": {
+ "value": "var(--spectrum-sans-font-family-stack)",
+ "description": "Defined in `.spectrum-InLineAlert`.
Used by `.spectrum-InLineAlert-content`.
Defaults to `var(--spectrum-sans-font-family-stack)`, if not set.",
+ "control": "text",
+ "category": "Component"
+ },
+ "spectrum-inlinealert-content-font-weight": {
+ "value": "400",
+ "description": "Defined in `.spectrum-InLineAlert`.
Used by `.spectrum-InLineAlert-content`.
Defaults to `var(--spectrum-body-sans-serif-font-weight)`, if not set.",
+ "control": "text",
+ "category": "Component"
+ },
+ "spectrum-inlinealert-content-font-style": {
+ "value": "normal",
+ "description": "Defined in `.spectrum-InLineAlert`.
Used by `.spectrum-InLineAlert-content`.
Defaults to `var(--spectrum-body-sans-serif-font-style)`, if not set.",
+ "control": "text",
+ "category": "Component"
+ },
+ "spectrum-inlinealert-content-font-size": {
+ "value": "var(--spectrum-font-size-100)",
+ "description": "Defined in `.spectrum-InLineAlert`.
Used by `.spectrum-InLineAlert-content`.
Defaults to `var(--spectrum-body-size-s)`, if not set.",
+ "control": "text",
+ "category": "Component"
+ },
+ "spectrum-inlinealert-content-line-height": {
+ "value": "1.5",
+ "description": "Defined in `.spectrum-InLineAlert`.
Used by `.spectrum-InLineAlert-content`.
Defaults to `var(--spectrum-body-line-height)`, if not set.",
+ "control": "text",
+ "category": "Component"
+ },
+ "spectrum-inlinealert-border-width": {
+ "value": "0px",
+ "description": "Defined in `.spectrum-InLineAlert`, `.spectrum-InLineAlert.spectrum-InLineAlert--bold, .spectrum-InLineAlert.spectrum-InLineAlert--subtle`.
Used by `.spectrum-InLineAlert`.
Defaults to `0px`, if not set.",
+ "control": "text",
+ "category": "Component"
+ },
+ "spectrum-inlinealert-border-radius": {
+ "value": "10px",
+ "description": "Defined in `.spectrum-InLineAlert`.
Used by `.spectrum-InLineAlert`.
Defaults to `var(--spectrum-corner-radius-700)`, if not set.",
+ "control": "text",
+ "category": "Component"
+ },
+ "spectrum-inlinealert-icon-size": {
+ "value": "20px",
+ "description": "Defined in `.spectrum-InLineAlert`.
Used by `.spectrum-InLineAlert-icon`.
Defaults to `var(--spectrum-workflow-icon-size-100)`, if not set.",
+ "control": "text",
+ "category": "Component"
+ },
+ "spectrum-inlinealert-min-inline-size": {
+ "value": "240px",
+ "description": "Defined in `.spectrum-InLineAlert`.
Used by `.spectrum-InLineAlert`.
Defaults to `var(--spectrum-in-line-alert-minimum-width)`, if not set.",
+ "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": {
+ "value": "20px",
+ "description": "Defined in `.spectrum-InLineAlert`.
Used by `.spectrum-InLineAlert-header`.
Defaults to `var(--spectrum-component-height-50)`, if not set.",
+ "control": "text",
+ "category": "Component"
+ },
+ "spectrum-inlinealert-spacing-edge-to-text": {
+ "value": "16px",
+ "description": "Defined in `.spectrum-InLineAlert`.
Used by `.spectrum-InLineAlert`.
Defaults to `var(--spectrum-spacing-300)`, if not set.",
+ "control": "text",
+ "category": "Component"
+ },
+ "spectrum-inlinealert-min-spacing-header-to-icon": {
+ "value": "8px",
+ "description": "Defined in `.spectrum-InLineAlert`.
Used by `.spectrum-InLineAlert-content, .spectrum-InLineAlert-header`.
Defaults to `var(--spectrum-spacing-100)`, if not set.",
+ "control": "text",
+ "category": "Component"
+ },
+ "spectrum-inlinealert-spacing-header-content": {
+ "value": "8px",
+ "description": "Defined in `.spectrum-InLineAlert`.
Used by `.spectrum-InLineAlert-header`.
Defaults to `var(--spectrum-spacing-100)`, if not set.",
+ "control": "text",
+ "category": "Component"
+ },
+ "spectrum-inlinealert-spacing-content-link-button": {
+ "value": "12px",
+ "description": "Defined in `.spectrum-InLineAlert`.
Used by `.spectrum-InLineAlert-footer`.
Defaults to `var(--spectrum-spacing-200)`, if not set.",
+ "control": "text",
+ "category": "Component"
+ },
+ "spectrum-inlinealert-background-color": {
+ "value": "var(--spectrum-gray-800)",
+ "description": "Defined in `.spectrum-InLineAlert`, `.spectrum-InLineAlert.spectrum-InLineAlert--info.spectrum-InLineAlert--subtle`, `.spectrum-InLineAlert.spectrum-InLineAlert--info.spectrum-InLineAlert--bold`, `.spectrum-InLineAlert.spectrum-InLineAlert--notice.spectrum-InLineAlert--subtle`, `.spectrum-InLineAlert.spectrum-InLineAlert--notice.spectrum-InLineAlert--bold`, `.spectrum-InLineAlert.spectrum-InLineAlert--positive.spectrum-InLineAlert--subtle`, `.spectrum-InLineAlert.spectrum-InLineAlert--positive.spectrum-InLineAlert--bold`, `.spectrum-InLineAlert.spectrum-InLineAlert--negative.spectrum-InLineAlert--subtle`, `.spectrum-InLineAlert.spectrum-InLineAlert--negative.spectrum-InLineAlert--bold`, `.spectrum-InLineAlert.spectrum-InLineAlert--neutral.spectrum-InLineAlert--subtle`, `.spectrum-InLineAlert.spectrum-InLineAlert--neutral.spectrum-InLineAlert--bold`.
Used by `.spectrum-InLineAlert`.
Defaults to `var(--spectrum-neutral-background-color-default)`, if not set.",
+ "control": "color",
+ "category": "Component"
+ },
+ "spectrum-inlinealert-border-and-icon-color": {
+ "value": "var(--spectrum-gray-500)",
+ "description": "Defined in `.spectrum-InLineAlert`, `.spectrum-InLineAlert.spectrum-InLineAlert--bold:not(.spectrum-InLineAlert--subtle, .spectrum-InLineAlert--notice)`, `.spectrum-InLineAlert.spectrum-InLineAlert--info`, `.spectrum-InLineAlert.spectrum-InLineAlert--info.spectrum-InLineAlert--subtle`, `.spectrum-InLineAlert.spectrum-InLineAlert--notice`, `.spectrum-InLineAlert.spectrum-InLineAlert--notice.spectrum-InLineAlert--subtle`, `.spectrum-InLineAlert.spectrum-InLineAlert--notice.spectrum-InLineAlert--bold`, `.spectrum-InLineAlert.spectrum-InLineAlert--positive`, `.spectrum-InLineAlert.spectrum-InLineAlert--positive.spectrum-InLineAlert--subtle`, `.spectrum-InLineAlert.spectrum-InLineAlert--negative`, `.spectrum-InLineAlert.spectrum-InLineAlert--negative.spectrum-InLineAlert--subtle`, `.spectrum-InLineAlert.spectrum-InLineAlert--neutral`, `.spectrum-InLineAlert.spectrum-InLineAlert--neutral.spectrum-InLineAlert--subtle`.
Used by `.spectrum-InLineAlert`, `.spectrum-InLineAlert-icon`.
Defaults to `var(--spectrum-neutral-visual-color)`, if not set.",
+ "control": "color",
+ "category": "Component"
+ },
+ "spectrum-inlinealert-header-color": {
+ "value": "rgb(255, 255, 255)",
+ "description": "Defined in `.spectrum-InLineAlert`, `.spectrum-InLineAlert.spectrum-InLineAlert--bold:not(.spectrum-InLineAlert--subtle, .spectrum-InLineAlert--notice)`.
Used by `.spectrum-InLineAlert-header`.
Defaults to `var(--spectrum-white)`, if not set.",
+ "control": "color",
+ "category": "Component"
+ },
+ "spectrum-inlinealert-content-color": {
+ "value": "rgb(255, 255, 255)",
+ "description": "Defined in `.spectrum-InLineAlert`, `.spectrum-InLineAlert.spectrum-InLineAlert--bold:not(.spectrum-InLineAlert--subtle, .spectrum-InLineAlert--notice)`.
Used by `.spectrum-InLineAlert-content`.
Defaults to `var(--spectrum-white)`, if not set.",
+ "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": "800",
+ "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`, `--highcontrast-inlinealert-border-width`.",
+ "control": "text",
+ "category": "Global"
+ },
+ "spectrum-corner-radius-700": {
+ "value": "10px",
+ "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-300": {
+ "value": "16px",
+ "description": "Used by `--spectrum-inlinealert-spacing-edge-to-text`.",
+ "control": "text",
+ "category": "Global"
+ },
+ "spectrum-spacing-100": {
+ "value": "8px",
+ "description": "Used by `--spectrum-inlinealert-min-spacing-header-to-icon`, `--spectrum-inlinealert-spacing-header-content`.",
+ "control": "text",
+ "category": "Global"
+ },
+ "spectrum-spacing-200": {
+ "value": "12px",
+ "description": "Used by `--spectrum-inlinealert-spacing-content-link-button`.",
+ "control": "text",
+ "category": "Global"
+ },
+ "spectrum-background-layer-2-color": {
+ "value": "var(--spectrum-gray-25)",
+ "description": "Used by `--spectrum-inlinealert-background-color`.",
+ "control": "color",
+ "category": "Global"
+ },
+ "spectrum-neutral-visual-color": {
+ "value": "var(--spectrum-gray-500)",
+ "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-white": {
+ "value": "rgb(255, 255, 255)",
+ "description": "Used by `--spectrum-inlinealert-header-color`, `--spectrum-inlinealert-content-color`, `--spectrum-inlinealert-border-and-icon-color`.",
+ "control": "text",
+ "category": "Global"
+ },
+ "spectrum-informative-visual-color": {
+ "value": "var(--spectrum-informative-color-800)",
+ "description": "Used by `--spectrum-inlinealert-border-and-icon-color`.",
+ "control": "color",
+ "category": "Global"
+ },
+ "spectrum-informative-subtle-background-color-default": {
+ "value": "var(--spectrum-informative-color-200)",
+ "description": "Used by `--spectrum-inlinealert-background-color`.",
+ "control": "color",
+ "category": "Global"
+ },
+ "spectrum-informative-background-color-default": {
+ "value": "var(--spectrum-informative-color-900)",
+ "description": "Used by `--spectrum-inlinealert-background-color`.",
+ "control": "color",
+ "category": "Global"
+ },
+ "spectrum-notice-visual-color": {
+ "value": "var(--spectrum-notice-color-800)",
+ "description": "Used by `--spectrum-inlinealert-border-and-icon-color`.",
+ "control": "color",
+ "category": "Global"
+ },
+ "spectrum-notice-subtle-background-color-default": {
+ "value": "var(--spectrum-notice-color-200)",
+ "description": "Used by `--spectrum-inlinealert-background-color`.",
+ "control": "color",
+ "category": "Global"
+ },
+ "spectrum-notice-background-color-default": {
+ "value": "var(--spectrum-notice-color-600)",
+ "description": "Used by `--spectrum-inlinealert-background-color`.",
+ "control": "color",
+ "category": "Global"
+ },
+ "spectrum-black": {
+ "value": "rgb(0, 0, 0)",
+ "description": "Used by `--spectrum-inlinealert-border-and-icon-color`.",
+ "control": "text",
+ "category": "Global"
+ },
+ "spectrum-positive-visual-color": {
+ "value": "var(--spectrum-positive-color-800)",
+ "description": "Used by `--spectrum-inlinealert-border-and-icon-color`.",
+ "control": "color",
+ "category": "Global"
+ },
+ "spectrum-positive-subtle-background-color-default": {
+ "value": "var(--spectrum-positive-color-200)",
+ "description": "Used by `--spectrum-inlinealert-background-color`.",
+ "control": "color",
+ "category": "Global"
+ },
+ "spectrum-positive-background-color-default": {
+ "value": "var(--spectrum-positive-color-900)",
+ "description": "Used by `--spectrum-inlinealert-background-color`.",
+ "control": "color",
+ "category": "Global"
+ },
+ "spectrum-negative-visual-color": {
+ "value": "var(--spectrum-negative-color-800)",
+ "description": "Used by `--spectrum-inlinealert-border-and-icon-color`.",
+ "control": "color",
+ "category": "Global"
+ },
+ "spectrum-negative-subtle-background-color-default": {
+ "value": "var(--spectrum-negative-color-200)",
+ "description": "Used by `--spectrum-inlinealert-background-color`.",
+ "control": "color",
+ "category": "Global"
+ },
+ "spectrum-negative-background-color-default": {
+ "value": "var(--spectrum-negative-color-900)",
+ "description": "Used by `--spectrum-inlinealert-background-color`.",
+ "control": "color",
+ "category": "Global"
+ },
+ "spectrum-neutral-subtle-background-color-default": {
+ "value": "var(--spectrum-gray-100)",
+ "description": "Used by `--spectrum-inlinealert-background-color`.",
+ "control": "color",
+ "category": "Global"
+ },
+ "spectrum-neutral-background-color-default": {
+ "value": "var(--spectrum-gray-800)",
+ "description": "Used by `--spectrum-inlinealert-background-color`.",
+ "control": "color",
+ "category": "Global"
+ }
+ },
+ "passthroughs": {},
+ "high-contrast": {
+ "highcontrast-inlinealert-border-width": {
+ "value": "var(--mod-inlinealert-border-width, var(--spectrum-inlinealert-border-width))",
+ "description": "Defined in `.spectrum-InLineAlert.spectrum-InLineAlert--bold, .spectrum-InLineAlert.spectrum-InLineAlert--subtle`.
Used by `.spectrum-InLineAlert`.
Defaults to `var(--mod-inlinealert-border-width, var(--spectrum-inlinealert-border-width))`, if not set.",
+ "control": "text"
+ },
+ "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(--spectrum-inlinealert-border-and-icon-color)",
+ "description": "Defined in `.spectrum-InLineAlert`.
Used by `.spectrum-InLineAlert`, `.spectrum-InLineAlert-icon`.
Defaults to `var(--spectrum-inlinealert-border-and-icon-color)`, 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 31f6ac0414f..45d4f9e679b 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 { AlertsWithStyleOptions } 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.
*
@@ -104,6 +106,10 @@ export default {
status: {
type: "migrated",
},
+ cssprops: {
+ ...metadata.modifiers,
+ ...metadata.component,
+ },
},
tags: ["migrated"],
};
diff --git a/components/link/dist/metadata.json b/components/link/dist/metadata.json
index 9c83915a752..fcf77ccfbe7 100644
--- a/components/link/dist/metadata.json
+++ b/components/link/dist/metadata.json
@@ -15,67 +15,320 @@
".spectrum-Link:lang(ko)",
".spectrum-Link:lang(zh)"
],
- "modifiers": [
- "--mod-link-animation-duration",
- "--mod-link-inline-font-weight",
- "--mod-link-line-height-cjk",
- "--mod-link-text-color",
- "--mod-link-text-color-active",
- "--mod-link-text-color-black",
- "--mod-link-text-color-focus",
- "--mod-link-text-color-hover",
- "--mod-link-text-color-secondary-active",
- "--mod-link-text-color-secondary-default",
- "--mod-link-text-color-secondary-focus",
- "--mod-link-text-color-secondary-hover",
- "--mod-link-text-color-white"
- ],
- "component": [
- "--spectrum-link-corner-radius",
- "--spectrum-link-default-font-family",
- "--spectrum-link-focus-indicator-color",
- "--spectrum-link-focus-indicator-gap",
- "--spectrum-link-focus-indicator-thickness",
- "--spectrum-link-font-size",
- "--spectrum-link-font-style",
- "--spectrum-link-font-weight",
- "--spectrum-link-inline-font-weight",
- "--spectrum-link-line-height",
- "--spectrum-link-line-height-cjk",
- "--spectrum-link-text-underline-gap",
- "--spectrum-link-text-underline-thickness"
- ],
- "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-cjk-line-height-100",
- "--spectrum-corner-radius-100",
- "--spectrum-default-font-style",
- "--spectrum-focus-indicator-color",
- "--spectrum-focus-indicator-gap",
- "--spectrum-focus-indicator-thickness",
- "--spectrum-font-size-100",
- "--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-static-black-focus-indicator-color",
- "--spectrum-static-white-focus-indicator-color",
- "--spectrum-text-underline-gap",
- "--spectrum-text-underline-thickness",
- "--spectrum-white"
- ],
- "passthroughs": [],
- "high-contrast": [
- "--highcontrast-link-focus-indicator-color",
- "--highcontrast-link-text-color"
- ]
+ "modifiers": {
+ "mod-link-animation-duration": {
+ "description": "Used by `.spectrum-Link`.
Defaults to `var(--spectrum-animation-duration-100)`, if not set.",
+ "control": "text",
+ "category": "Modifier"
+ },
+ "mod-link-text-color": {
+ "description": "Defined in `.spectrum-Link:active`, `.spectrum-Link:focus-visible`, `.spectrum-Link--secondary`, `.spectrum-Link:hover`, `.spectrum-Link--staticWhite`, `.spectrum-Link--staticBlack`.
Used by `.spectrum-Link`.
Defaults to `var(--spectrum-accent-content-color-default)`, if not set.",
+ "control": "color",
+ "category": "Modifier"
+ },
+ "mod-link-text-color-active": {
+ "description": "Defined in `.spectrum-Link--secondary`, `.spectrum-Link--staticWhite`, `.spectrum-Link--staticBlack`.
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-focus": {
+ "description": "Defined in `.spectrum-Link--secondary`, `.spectrum-Link--staticWhite`, `.spectrum-Link--staticBlack`.
Used by `--mod-link-text-color`.
Defaults to `var(--spectrum-accent-content-color-key-focus)`, if not set.",
+ "control": "color",
+ "category": "Modifier"
+ },
+ "mod-link-line-height-cjk": {
+ "description": "Used by `.spectrum-Link:lang(ja), .spectrum-Link:lang(ko), .spectrum-Link:lang(zh)`.
Defaults to `var(--spectrum-link-line-height-cjk)`, if not set.",
+ "control": "text",
+ "category": "Modifier"
+ },
+ "mod-link-text-color-secondary-default": {
+ "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": {
+ "description": "Defined in `.spectrum-Link--secondary`, `.spectrum-Link--staticWhite`, `.spectrum-Link--staticBlack`.
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-secondary-hover": {
+ "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-secondary-active": {
+ "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-secondary-focus": {
+ "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-inline-font-weight": {
+ "description": "Used by `--spectrum-link-font-weight`.
Defaults to `var(--spectrum-link-inline-font-weight)`, if not set.",
+ "control": "text",
+ "category": "Modifier"
+ },
+ "mod-link-text-color-white": {
+ "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": {
+ "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": {
+ "spectrum-link-focus-indicator-color": {
+ "value": "rgb(0, 0, 0)",
+ "description": "Defined in `.spectrum-Link`, `.spectrum-Link--staticWhite`, `.spectrum-Link--staticBlack`.
Used by `.spectrum-Link:focus-visible`.
Defaults to `var(--spectrum-static-black-focus-indicator-color)`, if not set.",
+ "control": "color",
+ "category": "Component"
+ },
+ "spectrum-link-focus-indicator-thickness": {
+ "value": "2px",
+ "description": "Defined in `.spectrum-Link`.
Used by `.spectrum-Link:focus-visible`.
Defaults to `var(--spectrum-focus-indicator-thickness)`, if not set.",
+ "control": "text",
+ "category": "Component"
+ },
+ "spectrum-link-focus-indicator-gap": {
+ "value": "2px",
+ "description": "Defined in `.spectrum-Link`.
Used by `.spectrum-Link:focus-visible`.
Defaults to `var(--spectrum-focus-indicator-gap)`, if not set.",
+ "control": "text",
+ "category": "Component"
+ },
+ "spectrum-link-corner-radius": {
+ "value": "4px",
+ "description": "Defined in `.spectrum-Link`.
Used by `.spectrum-Link:focus-visible`.
Defaults to `var(--spectrum-corner-radius-100)`, if not set.",
+ "control": "text",
+ "category": "Component"
+ },
+ "spectrum-link-default-font-family": {
+ "value": "var(--spectrum-sans-font-family-stack)",
+ "description": "Defined in `.spectrum-Link`.
Used by `.spectrum-Link`.
Defaults to `var(--spectrum-sans-font-family-stack)`, if not set.",
+ "control": "text",
+ "category": "Component"
+ },
+ "spectrum-link-line-height": {
+ "value": "1.3",
+ "description": "Defined in `.spectrum-Link`.
Used by `.spectrum-Link`.
Defaults to `var(--spectrum-line-height-100)`, if not set.",
+ "control": "text",
+ "category": "Component"
+ },
+ "spectrum-link-line-height-cjk": {
+ "value": "1.5",
+ "description": "Defined in `.spectrum-Link`.
Used by `.spectrum-Link:lang(ja), .spectrum-Link:lang(ko), .spectrum-Link:lang(zh)`.
Defaults to `var(--spectrum-cjk-line-height-100)`, if not set.",
+ "control": "text",
+ "category": "Component"
+ },
+ "spectrum-link-font-size": {
+ "value": "14px",
+ "description": "Defined in `.spectrum-Link`.
Used by `.spectrum-Link`.
Defaults to `var(--spectrum-font-size-100)`, if not set.",
+ "control": "text",
+ "category": "Component"
+ },
+ "spectrum-link-font-style": {
+ "value": "normal",
+ "description": "Defined in `.spectrum-Link`.
Used by `.spectrum-Link`.
Defaults to `var(--spectrum-default-font-style)`, if not set.",
+ "control": "text",
+ "category": "Component"
+ },
+ "spectrum-link-font-weight": {
+ "value": "var(--mod-link-inline-font-weight, var(--spectrum-link-inline-font-weight))",
+ "description": "Defined in `.spectrum-Link`, `.spectrum-Link--inline`.
Used by `.spectrum-Link`.
Defaults to `var(--mod-link-inline-font-weight, var(--spectrum-link-inline-font-weight))`, if not set.",
+ "control": "text",
+ "category": "Component"
+ },
+ "spectrum-link-text-underline-thickness": {
+ "value": "1px",
+ "description": "Defined in `.spectrum-Link`.
Used by `.spectrum-Link`.
Defaults to `var(--spectrum-text-underline-thickness)`, if not set.",
+ "control": "text",
+ "category": "Component"
+ },
+ "spectrum-link-text-underline-gap": {
+ "value": "1px",
+ "description": "Defined in `.spectrum-Link`.
Used by `.spectrum-Link`.
Defaults to `var(--spectrum-text-underline-gap)`, if not set.",
+ "control": "text",
+ "category": "Component"
+ },
+ "spectrum-link-inline-font-weight": {
+ "value": "400",
+ "description": "Defined in `.spectrum-Link`.
Used by `--spectrum-link-font-weight`.
Defaults to `var(--spectrum-regular-font-weight)`, if not set.",
+ "control": "text",
+ "category": "Component"
+ }
+ },
+ "global": {
+ "spectrum-focus-indicator-color": {
+ "value": "var(--spectrum-blue-800)",
+ "description": "Used by `--spectrum-link-focus-indicator-color`.",
+ "control": "color",
+ "category": "Global"
+ },
+ "spectrum-focus-indicator-thickness": {
+ "value": "2px",
+ "description": "Used by `--spectrum-link-focus-indicator-thickness`.",
+ "control": "text",
+ "category": "Global"
+ },
+ "spectrum-focus-indicator-gap": {
+ "value": "2px",
+ "description": "Used by `--spectrum-link-focus-indicator-gap`.",
+ "control": "text",
+ "category": "Global"
+ },
+ "spectrum-corner-radius-100": {
+ "value": "4px",
+ "description": "Used by `--spectrum-link-corner-radius`.",
+ "control": "text",
+ "category": "Global"
+ },
+ "spectrum-sans-font-family-stack": {
+ "description": "Used by `--spectrum-link-default-font-family`.",
+ "control": "text",
+ "category": "Global"
+ },
+ "spectrum-line-height-100": {
+ "value": "1.3",
+ "description": "Used by `--spectrum-link-line-height`.",
+ "control": "text",
+ "category": "Global"
+ },
+ "spectrum-cjk-line-height-100": {
+ "value": "1.5",
+ "description": "Used by `--spectrum-link-line-height-cjk`.",
+ "control": "text",
+ "category": "Global"
+ },
+ "spectrum-font-size-100": {
+ "value": "14px",
+ "description": "Used by `--spectrum-link-font-size`.",
+ "control": "text",
+ "category": "Global"
+ },
+ "spectrum-default-font-style": {
+ "value": "normal",
+ "description": "Used by `--spectrum-link-font-style`.",
+ "control": "text",
+ "category": "Global"
+ },
+ "spectrum-medium-font-weight": {
+ "value": "500",
+ "description": "Used by `--spectrum-link-font-weight`.",
+ "control": "text",
+ "category": "Global"
+ },
+ "spectrum-text-underline-thickness": {
+ "value": "1px",
+ "description": "Used by `--spectrum-link-text-underline-thickness`.",
+ "control": "text",
+ "category": "Global"
+ },
+ "spectrum-text-underline-gap": {
+ "value": "1px",
+ "description": "Used by `--spectrum-link-text-underline-gap`.",
+ "control": "text",
+ "category": "Global"
+ },
+ "spectrum-regular-font-weight": {
+ "value": "400",
+ "description": "Used by `--spectrum-link-inline-font-weight`.",
+ "control": "text",
+ "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-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-accent-content-color-hover": {
+ "value": "var(--spectrum-accent-color-1000)",
+ "description": "Used by `--mod-link-text-color`.",
+ "control": "color",
+ "category": "Global"
+ },
+ "spectrum-white": {
+ "value": "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-static-white-focus-indicator-color": {
+ "value": "rgb(255, 255, 255)",
+ "description": "Used by `--spectrum-link-focus-indicator-color`.",
+ "control": "color",
+ "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"
+ },
+ "spectrum-static-black-focus-indicator-color": {
+ "value": "rgb(0, 0, 0)",
+ "description": "Used by `--spectrum-link-focus-indicator-color`.",
+ "control": "color",
+ "category": "Global"
+ }
+ },
+ "passthroughs": {},
+ "high-contrast": {
+ "highcontrast-link-text-color": {
+ "value": "var(--mod-link-text-color, var(--spectrum-accent-content-color-default))",
+ "description": "Defined in `.spectrum-Link`.
Used by `.spectrum-Link`.
Defaults to `var(--mod-link-text-color, var(--spectrum-accent-content-color-default))`, if not set.",
+ "control": "color"
+ },
+ "highcontrast-link-focus-indicator-color": {
+ "value": "var(--spectrum-link-focus-indicator-color)",
+ "description": "Defined in `.spectrum-Link`.
Used by `.spectrum-Link:focus-visible`.
Defaults to `var(--spectrum-link-focus-indicator-color)`, if not set.",
+ "control": "color"
+ }
+ }
}
diff --git a/components/link/stories/link.stories.js b/components/link/stories/link.stories.js
index e747752b695..1f51da4dd23 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 { LinkGroupText, MultilineText, 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.
*/
@@ -92,6 +94,10 @@ export default {
status: {
type: "migrated",
},
+ cssprops: {
+ ...metadata.modifiers,
+ ...metadata.component,
+ },
},
tags: ["migrated"],
};
diff --git a/components/logicbutton/dist/metadata.json b/components/logicbutton/dist/metadata.json
index 195d8c87082..0129d11352f 100644
--- a/components/logicbutton/dist/metadata.json
+++ b/components/logicbutton/dist/metadata.json
@@ -6,102 +6,441 @@
".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-focus-indicator-gap",
- "--mod-logic-button-and-background-color",
- "--mod-logic-button-and-background-color-disabled",
- "--mod-logic-button-and-background-color-hover",
- "--mod-logic-button-and-background-color-hover-disabled",
- "--mod-logic-button-and-border-color",
- "--mod-logic-button-and-border-color-disabled",
- "--mod-logic-button-and-border-color-hover",
- "--mod-logic-button-and-border-color-hover-disabled",
- "--mod-logic-button-and-text-color",
- "--mod-logic-button-and-text-color-disabled",
- "--mod-logic-button-border-radius",
- "--mod-logic-button-border-width",
- "--mod-logic-button-focus-indicator-color",
- "--mod-logic-button-focus-indicator-gap",
- "--mod-logic-button-focus-indicator-width",
- "--mod-logic-button-font-size",
- "--mod-logic-button-font-weight",
- "--mod-logic-button-height",
- "--mod-logic-button-or-background-color",
- "--mod-logic-button-or-background-color-disabled",
- "--mod-logic-button-or-background-color-hover",
- "--mod-logic-button-or-background-color-hover-disabled",
- "--mod-logic-button-or-border-color",
- "--mod-logic-button-or-border-color-disabled",
- "--mod-logic-button-or-border-color-hover",
- "--mod-logic-button-or-border-color-hover-disabled",
- "--mod-logic-button-or-text-color",
- "--mod-logic-button-or-text-color-disabled",
- "--mod-logic-button-padding"
- ],
- "component": [
- "--spectrum-logic-button-and-background-color",
- "--spectrum-logic-button-and-background-color-disabled",
- "--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"
- ],
- "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-focus-indicator-gap": {
+ "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": {
+ "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": {
+ "description": "Used by `.spectrum-LogicButton`.
Defaults to `var(--spectrum-border-width-200)`, if not set.",
+ "control": "text",
+ "category": "Modifier"
+ },
+ "mod-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": {
+ "description": "Used by `.spectrum-LogicButton`.
Defaults to `var(--spectrum-font-size-100)`, if not set.",
+ "control": "text",
+ "category": "Modifier"
+ },
+ "mod-logic-button-font-weight": {
+ "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": {
+ "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": {
+ "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": {
+ "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": {
+ "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": {
+ "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": {
+ "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": {
+ "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": {
+ "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": {
+ "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": {
+ "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": {
+ "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": {
+ "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": {
+ "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": {
+ "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": {
+ "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": {
+ "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": {
+ "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": {
+ "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": {
+ "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": {
+ "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": {
+ "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": {
+ "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": {
+ "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-and-background-color-disabled": {
+ "value": "light-dark(rgb(233, 233, 233), rgb(44, 44, 44))",
+ "description": "Defined in `.spectrum-LogicButton`.
Used by `--mod-logic-button-and-background-color`.
Defaults to `var(--spectrum-gray-100)`, if not set.",
+ "control": "color",
+ "category": "Component"
+ },
+ "spectrum-logic-button-and-border-color-disabled": {
+ "value": "light-dark(rgb(233, 233, 233), rgb(44, 44, 44))",
+ "description": "Defined in `.spectrum-LogicButton`.
Used by `--mod-logic-button-and-border-color`.
Defaults to `var(--spectrum-gray-100)`, if not set.",
+ "control": "color",
+ "category": "Component"
+ },
+ "spectrum-logic-button-and-background-color-hover-disabled": {
+ "value": "light-dark(rgb(233, 233, 233), rgb(44, 44, 44))",
+ "description": "Defined in `.spectrum-LogicButton`.
Used by `--mod-logic-button-and-background-color-hover`.
Defaults to `var(--spectrum-gray-100)`, if not set.",
+ "control": "color",
+ "category": "Component"
+ },
+ "spectrum-logic-button-and-border-color-hover-disabled": {
+ "value": "light-dark(rgb(233, 233, 233), rgb(44, 44, 44))",
+ "description": "Defined in `.spectrum-LogicButton`.
Used by `--mod-logic-button-and-border-color-hover`.
Defaults to `var(--spectrum-gray-100)`, if not set.",
+ "control": "color",
+ "category": "Component"
+ },
+ "spectrum-logic-button-or-background-color-disabled": {
+ "value": "light-dark(rgb(233, 233, 233), rgb(44, 44, 44))",
+ "description": "Defined in `.spectrum-LogicButton`.
Used by `--mod-logic-button-or-background-color`.
Defaults to `var(--spectrum-gray-100)`, if not set.",
+ "control": "color",
+ "category": "Component"
+ },
+ "spectrum-logic-button-or-border-color-disabled": {
+ "value": "light-dark(rgb(233, 233, 233), rgb(44, 44, 44))",
+ "description": "Defined in `.spectrum-LogicButton`.
Used by `--mod-logic-button-or-border-color`.
Defaults to `var(--spectrum-gray-100)`, if not set.",
+ "control": "color",
+ "category": "Component"
+ },
+ "spectrum-logic-button-or-background-color-hover-disabled": {
+ "value": "light-dark(rgb(233, 233, 233), rgb(44, 44, 44))",
+ "description": "Defined in `.spectrum-LogicButton`.
Used by `--mod-logic-button-or-background-color-hover`.
Defaults to `var(--spectrum-gray-100)`, if not set.",
+ "control": "color",
+ "category": "Component"
+ },
+ "spectrum-logic-button-or-border-color-hover-disabled": {
+ "value": "light-dark(rgb(233, 233, 233), rgb(44, 44, 44))",
+ "description": "Defined in `.spectrum-LogicButton`.
Used by `--mod-logic-button-or-border-color-hover`.
Defaults to `var(--spectrum-gray-100)`, if not set.",
+ "control": "color",
+ "category": "Component"
+ },
+ "spectrum-logic-button-border-radius": {
+ "value": "4px",
+ "description": "Defined in `.spectrum-LogicButton`.
Used by `.spectrum-LogicButton`, `.spectrum-LogicButton:after`.
Defaults to `var(--spectrum-corner-radius-100)`, if not set.",
+ "control": "text",
+ "category": "Component"
+ },
+ "spectrum-logic-button-and-text-color": {
+ "value": "rgb(255, 255, 255)",
+ "description": "Defined in `.spectrum-LogicButton`.
Used by `.spectrum-LogicButton--and`.
Defaults to `var(--spectrum-white)`, if not set.",
+ "control": "color",
+ "category": "Component"
+ },
+ "spectrum-logic-button-and-background-color-hover": {
+ "value": "light-dark(rgb(29, 62, 207), rgb(124, 169, 252))",
+ "description": "Defined in `.spectrum-LogicButton`.
Used by `.spectrum-LogicButton--and:hover:not([disabled])`.
Defaults to `var(--spectrum-blue-1100)`, if not set.",
+ "control": "color",
+ "category": "Component"
+ },
+ "spectrum-logic-button-and-border-color-hover": {
+ "value": "light-dark(rgb(29, 62, 207), rgb(124, 169, 252))",
+ "description": "Defined in `.spectrum-LogicButton`.
Used by `.spectrum-LogicButton--and:hover:not([disabled])`.
Defaults to `var(--spectrum-blue-1100)`, if not set.",
+ "control": "color",
+ "category": "Component"
+ },
+ "spectrum-logic-button-or-text-color": {
+ "value": "rgb(255, 255, 255)",
+ "description": "Defined in `.spectrum-LogicButton`.
Used by `.spectrum-LogicButton--or`.
Defaults to `var(--spectrum-white)`, if not set.",
+ "control": "color",
+ "category": "Component"
+ },
+ "spectrum-logic-button-text-color-disabled": {
+ "value": "light-dark(rgb(143, 143, 143), rgb(109, 109, 109))",
+ "description": "Defined in `.spectrum-LogicButton`.
Used by `--mod-logic-button-and-text-color`, `--mod-logic-button-or-text-color`.
Defaults to `var(--spectrum-gray-500)`, if not set.",
+ "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 `--spectrum-logic-button-and-background-color-disabled`, `--spectrum-logic-button-and-border-color-disabled`, `--spectrum-logic-button-and-background-color-hover-disabled`, `--spectrum-logic-button-and-border-color-hover-disabled`, `--spectrum-logic-button-or-background-color-disabled`, `--spectrum-logic-button-or-border-color-disabled`, `--spectrum-logic-button-or-background-color-hover-disabled`, `--spectrum-logic-button-or-border-color-hover-disabled`.",
+ "control": "text",
+ "category": "Global"
+ },
+ "spectrum-corner-radius-100": {
+ "value": "4px",
+ "description": "Used by `--spectrum-logic-button-border-radius`.",
+ "control": "text",
+ "category": "Global"
+ },
+ "spectrum-white": {
+ "value": "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"
+ }
+ },
+ "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..515562d3b6e 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,10 @@ export default {
parameters: {
packageJson,
metadata,
+ cssprops: {
+ ...metadata.modifiers,
+ ...metadata.component,
+ },
},
};
diff --git a/components/menu/dist/metadata.json b/components/menu/dist/metadata.json
index 3693f34c5dc..42c19293c4d 100644
--- a/components/menu/dist/metadata.json
+++ b/components/menu/dist/metadata.json
@@ -9,10 +9,10 @@
".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: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,40 +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-itemDescription",
- ".spectrum-Menu-item.is-disabled .spectrum-Menu-itemIcon",
- ".spectrum-Menu-item.is-disabled .spectrum-Menu-itemLabel",
- ".spectrum-Menu-item.is-disabled .spectrum-Menu-itemThumbnail",
- ".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-focus-visible",
- ".spectrum-Menu-item.is-focus-visible .spectrum-Menu-linkout",
- ".spectrum-Menu-item.is-focus-visible > .spectrum-Menu-checkmark",
- ".spectrum-Menu-item.is-focus-visible > .spectrum-Menu-chevron",
- ".spectrum-Menu-item.is-focus-visible > .spectrum-Menu-itemDescription",
- ".spectrum-Menu-item.is-focus-visible > .spectrum-Menu-itemIcon:not(.spectrum-Menu-chevron, .spectrum-Menu-checkmark)",
- ".spectrum-Menu-item.is-focus-visible > .spectrum-Menu-itemLabel",
- ".spectrum-Menu-item.is-focus-visible > .spectrum-Menu-itemValue",
- ".spectrum-Menu-item.is-focus-visible > .spectrum-Menu-sectionHeading",
".spectrum-Menu-item:active",
".spectrum-Menu-item:active .spectrum-Menu-linkout",
".spectrum-Menu-item:active > .spectrum-Menu-checkmark",
@@ -117,13 +96,27 @@
".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-itemThumbnail",
- ".spectrum-Menu-itemValue",
+ ".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-itemThumbnail",
+ ".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-focus-visible",
+ ".spectrum-Menu-item.is-focus-visible .spectrum-Menu-linkout",
+ ".spectrum-Menu-item.is-focus-visible > .spectrum-Menu-checkmark",
+ ".spectrum-Menu-item.is-focus-visible > .spectrum-Menu-chevron",
+ ".spectrum-Menu-item.is-focus-visible > .spectrum-Menu-itemDescription",
+ ".spectrum-Menu-item.is-focus-visible > .spectrum-Menu-itemIcon:not(.spectrum-Menu-chevron, .spectrum-Menu-checkmark)",
+ ".spectrum-Menu-item.is-focus-visible > .spectrum-Menu-itemLabel",
+ ".spectrum-Menu-item.is-focus-visible > .spectrum-Menu-itemValue",
+ ".spectrum-Menu-item.is-focus-visible > .spectrum-Menu-sectionHeading",
".spectrum-Menu-item[aria-disabled=\"true\"] .spectrum-Menu-itemDescription",
".spectrum-Menu-item[aria-disabled=\"true\"] .spectrum-Menu-itemIcon",
".spectrum-Menu-item[aria-disabled=\"true\"] .spectrum-Menu-itemLabel",
@@ -136,337 +129,1769 @@
".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-itemThumbnail",
+ ".spectrum-Menu-itemValue",
".spectrum-Menu-sectionDescription",
".spectrum-Menu-sectionHeading",
+ ".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",
".spectrum-Menu.is-selectableMultiple .spectrum-Menu-itemCheckbox",
".spectrum-Menu.spectrum-Menu--sizeL",
".spectrum-Menu.spectrum-Menu--sizeS",
- ".spectrum-Menu.spectrum-Menu--sizeXL",
- ".spectrum-Menu:lang(ja)",
- ".spectrum-Menu:lang(ko)",
- ".spectrum-Menu:lang(zh)"
- ],
- "modifiers": [
- "--mod-menu-back-heading-color",
- "--mod-menu-back-icon-color-default",
- "--mod-menu-back-icon-margin-block",
- "--mod-menu-back-icon-margin-inline",
- "--mod-menu-back-padding-block-end",
- "--mod-menu-back-padding-block-start",
- "--mod-menu-back-padding-inline-end",
- "--mod-menu-back-padding-inline-start",
- "--mod-menu-checkmark-display",
- "--mod-menu-checkmark-icon-color-default",
- "--mod-menu-checkmark-icon-color-down",
- "--mod-menu-checkmark-icon-color-focus",
- "--mod-menu-checkmark-icon-color-hover",
- "--mod-menu-collapsible-icon-color",
- "--mod-menu-drillin-icon-color-default",
- "--mod-menu-drillin-icon-color-down",
- "--mod-menu-drillin-icon-color-focus",
- "--mod-menu-drillin-icon-color-hover",
- "--mod-menu-inline-size",
- "--mod-menu-item-background-color-default",
- "--mod-menu-item-background-color-down",
- "--mod-menu-item-background-color-hover",
- "--mod-menu-item-background-color-key-focus",
- "--mod-menu-item-bottom-edge-to-text",
- "--mod-menu-item-checkmark-height",
- "--mod-menu-item-checkmark-width",
- "--mod-menu-item-collapsible-no-icon-submenu-item-padding-x-start",
- "--mod-menu-item-corner-radius",
- "--mod-menu-item-description-color-default",
- "--mod-menu-item-description-color-disabled",
- "--mod-menu-item-description-color-down",
- "--mod-menu-item-description-color-focus",
- "--mod-menu-item-description-color-hover",
- "--mod-menu-item-description-font-size",
- "--mod-menu-item-description-line-height",
- "--mod-menu-item-description-line-height-cjk",
- "--mod-menu-item-focus-indicator-color",
- "--mod-menu-item-focus-indicator-width",
- "--mod-menu-item-icon-height",
- "--mod-menu-item-icon-width",
- "--mod-menu-item-label-content-color-default",
- "--mod-menu-item-label-content-color-disabled",
- "--mod-menu-item-label-content-color-down",
- "--mod-menu-item-label-content-color-focus",
- "--mod-menu-item-label-content-color-hover",
- "--mod-menu-item-label-font-size",
- "--mod-menu-item-label-icon-color-default",
- "--mod-menu-item-label-icon-color-disabled",
- "--mod-menu-item-label-icon-color-down",
- "--mod-menu-item-label-icon-color-focus",
- "--mod-menu-item-label-icon-color-hover",
- "--mod-menu-item-label-inline-edge-to-content",
- "--mod-menu-item-label-line-height",
- "--mod-menu-item-label-line-height-cjk",
- "--mod-menu-item-label-text-to-visual",
- "--mod-menu-item-label-to-description-spacing",
- "--mod-menu-item-label-to-value-area-min-spacing",
- "--mod-menu-item-linkout-icon-height",
- "--mod-menu-item-linkout-icon-width",
- "--mod-menu-item-min-height",
- "--mod-menu-item-selectable-edge-to-text-not-selected",
- "--mod-menu-item-text-to-control",
- "--mod-menu-item-thumbnail-height",
- "--mod-menu-item-thumbnail-opacity-disabled",
- "--mod-menu-item-thumbnail-to-label",
- "--mod-menu-item-thumbnail-width",
- "--mod-menu-item-top-edge-to-text",
- "--mod-menu-item-top-to-action",
- "--mod-menu-item-top-to-checkbox",
- "--mod-menu-item-top-to-checkmark",
- "--mod-menu-item-top-to-thumbnail",
- "--mod-menu-item-top-to-workflow-icon",
- "--mod-menu-item-value-color-default",
- "--mod-menu-item-value-color-down",
- "--mod-menu-item-value-color-focus",
- "--mod-menu-item-value-color-hover",
- "--mod-menu-section-description-color",
- "--mod-menu-section-description-font-size",
- "--mod-menu-section-description-font-weight",
- "--mod-menu-section-description-line-height",
- "--mod-menu-section-description-line-height-cjk",
- "--mod-menu-section-divider-margin-block",
- "--mod-menu-section-header-bottom-edge-to-text",
- "--mod-menu-section-header-color",
- "--mod-menu-section-header-font-size",
- "--mod-menu-section-header-font-weight",
- "--mod-menu-section-header-line-height",
- "--mod-menu-section-header-line-height-cjk",
- "--mod-menu-section-header-min-width",
- "--mod-menu-section-header-to-description",
- "--mod-menu-section-header-top-edge-to-text"
- ],
- "component": [
- "--spectrum-menu-back-icon-margin",
- "--spectrum-menu-checkmark-display",
- "--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-keyboard-focus",
- "--spectrum-menu-item-bottom-edge-to-text",
- "--spectrum-menu-item-checkmark-height",
- "--spectrum-menu-item-checkmark-width",
- "--spectrum-menu-item-chevron-height",
- "--spectrum-menu-item-chevron-width",
- "--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-color",
- "--spectrum-menu-item-focus-indicator-color-default",
- "--spectrum-menu-item-focus-indicator-offset",
- "--spectrum-menu-item-focus-indicator-outline-style",
- "--spectrum-menu-item-focus-indicator-width",
- "--spectrum-menu-item-focus-margin",
- "--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-extra-large",
- "--spectrum-menu-item-label-to-description-large",
- "--spectrum-menu-item-label-to-description-medium",
- "--spectrum-menu-item-label-to-description-small",
- "--spectrum-menu-item-label-to-value-area-min-spacing",
- "--spectrum-menu-item-linkout-icon-height",
- "--spectrum-menu-item-linkout-icon-width",
- "--spectrum-menu-item-min-height",
- "--spectrum-menu-item-section-divider-height",
- "--spectrum-menu-item-selectable-edge-to-text-not-selected",
- "--spectrum-menu-item-selectable-edge-to-text-not-selected-extra-large",
- "--spectrum-menu-item-selectable-edge-to-text-not-selected-large",
- "--spectrum-menu-item-selectable-edge-to-text-not-selected-medium",
- "--spectrum-menu-item-selectable-edge-to-text-not-selected-small",
- "--spectrum-menu-item-text-to-control",
- "--spectrum-menu-item-thumbnail-height",
- "--spectrum-menu-item-thumbnail-opacity-disabled",
- "--spectrum-menu-item-thumbnail-to-label",
- "--spectrum-menu-item-thumbnail-width",
- "--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-top-to-thumbnail",
- "--spectrum-menu-item-top-to-thumbnail-extra-large",
- "--spectrum-menu-item-top-to-thumbnail-large",
- "--spectrum-menu-item-top-to-thumbnail-medium",
- "--spectrum-menu-item-top-to-thumbnail-small",
- "--spectrum-menu-item-top-to-workflow-icon",
- "--spectrum-menu-item-value-color-default",
- "--spectrum-menu-item-value-color-down",
- "--spectrum-menu-item-value-color-focus",
- "--spectrum-menu-item-value-color-hover",
- "--spectrum-menu-section-description-color",
- "--spectrum-menu-section-description-font-size",
- "--spectrum-menu-section-description-font-weight",
- "--spectrum-menu-section-description-line-height",
- "--spectrum-menu-section-description-line-height-cjk",
- "--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",
- "--spectrum-menu-section-header-to-description",
- "--spectrum-menu-section-header-to-description-extra-large",
- "--spectrum-menu-section-header-to-description-large",
- "--spectrum-menu-section-header-to-description-medium",
- "--spectrum-menu-section-header-to-description-small"
- ],
- "global": [
- "--spectrum-accent-color-1000",
- "--spectrum-accent-color-1100",
- "--spectrum-accent-color-900",
- "--spectrum-bold-font-weight",
- "--spectrum-checkmark-icon-size-100",
- "--spectrum-checkmark-icon-size-200",
- "--spectrum-checkmark-icon-size-300",
- "--spectrum-checkmark-icon-size-75",
- "--spectrum-chevron-icon-size-100",
- "--spectrum-chevron-icon-size-200",
- "--spectrum-chevron-icon-size-300",
- "--spectrum-chevron-icon-size-75",
- "--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-size-difference-down",
- "--spectrum-component-size-width-ratio-down",
- "--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-400",
- "--spectrum-corner-radius-500",
- "--spectrum-corner-radius-600",
- "--spectrum-corner-radius-700",
- "--spectrum-disabled-content-color",
- "--spectrum-divider-thickness-medium",
- "--spectrum-divider-thickness-small",
- "--spectrum-downstate-height",
- "--spectrum-downstate-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-50",
- "--spectrum-font-size-75",
- "--spectrum-gray-900",
- "--spectrum-line-height-100",
- "--spectrum-link-out-icon-size-100",
- "--spectrum-link-out-icon-size-200",
- "--spectrum-link-out-icon-size-75",
- "--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-regular-font-weight",
- "--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-400",
- "--spectrum-text-to-visual-75",
- "--spectrum-thumbnail-size-500",
- "--spectrum-thumbnail-size-700",
- "--spectrum-thumbnail-size-800",
- "--spectrum-thumbnail-size-900",
- "--spectrum-workflow-icon-size-100",
- "--spectrum-workflow-icon-size-200",
- "--spectrum-workflow-icon-size-300",
- "--spectrum-workflow-icon-size-75"
- ],
- "passthroughs": [
- "--mod-checkbox-text-to-control",
- "--mod-checkbox-top-to-text",
- "--mod-switch-control-label-spacing",
- "--mod-switch-spacing-top-to-label"
+ ".spectrum-Menu.spectrum-Menu--sizeXL"
],
- "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": {
+ "description": "Used by `--spectrum-menu-item-focus-indicator-width`.
Defaults to `var(--spectrum-focus-indicator-thickness)`, if not set.",
+ "control": "text",
+ "category": "Modifier"
+ },
+ "mod-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": {
+ "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": {
+ "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": {
+ "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-section-description-line-height-cjk": {
+ "description": "Used by `--spectrum-menu-section-description-line-height`.
Defaults to `var(--spectrum-menu-section-description-line-height-cjk)`, if not set.",
+ "control": "text",
+ "category": "Modifier"
+ },
+ "mod-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": {
+ "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": {
+ "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": {
+ "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": {
+ "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": {
+ "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": {
+ "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": {
+ "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": {
+ "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": {
+ "description": "Used by `.spectrum-Menu .spectrum-Menu-checkmark`, `.spectrum-Menu .spectrum-Menu-itemIcon--workflowIcon`, `.spectrum-Menu-item`, `.spectrum-Menu-sectionHeading`, `.spectrum-Menu-itemThumbnail`, `.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": {
+ "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": {
+ "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": {
+ "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": {
+ "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": {
+ "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-top-to-workflow-icon": {
+ "description": "Used by `.spectrum-Menu .spectrum-Menu-itemIcon--workflowIcon`.
Defaults to `var(--spectrum-menu-item-top-to-workflow-icon)`, if not set.",
+ "control": "text",
+ "category": "Modifier"
+ },
+ "mod-menu-item-icon-height": {
+ "description": "Used by `.spectrum-Menu .spectrum-Menu-itemIcon:not(.spectrum-Menu-chevron, .spectrum-Menu-checkmark, .spectrum-Menu-linkout)`.
Defaults to `var(--spectrum-menu-item-icon-height)`, if not set.",
+ "control": "text",
+ "category": "Modifier"
+ },
+ "mod-menu-item-icon-width": {
+ "description": "Used by `.spectrum-Menu .spectrum-Menu-itemIcon:not(.spectrum-Menu-chevron, .spectrum-Menu-checkmark, .spectrum-Menu-linkout)`.
Defaults to `var(--spectrum-menu-item-icon-width)`, if not set.",
+ "control": "text",
+ "category": "Modifier"
+ },
+ "mod-menu-item-linkout-icon-height": {
+ "description": "Used by `.spectrum-Menu .spectrum-Menu-linkout`.
Defaults to `var(--spectrum-menu-item-linkout-icon-height)`, if not set.",
+ "control": "text",
+ "category": "Modifier"
+ },
+ "mod-menu-item-linkout-icon-width": {
+ "description": "Used by `.spectrum-Menu .spectrum-Menu-linkout`.
Defaults to `var(--spectrum-menu-item-linkout-icon-width)`, if not set.",
+ "control": "text",
+ "category": "Modifier"
+ },
+ "mod-menu-item-corner-radius": {
+ "description": "Used by `.spectrum-Menu-item`.
Defaults to `var(--spectrum-menu-item-corner-radius)`, if not set.",
+ "control": "text",
+ "category": "Modifier"
+ },
+ "mod-menu-item-background-color-default": {
+ "description": "Used by `.spectrum-Menu-item`.
Defaults to `var(--spectrum-menu-item-background-color-default)`, if not set.",
+ "control": "color",
+ "category": "Modifier"
+ },
+ "mod-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": {
+ "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": {
+ "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": {
+ "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": {
+ "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": {
+ "description": "Used by `.spectrum-Menu-item.is-focus-visible, .spectrum-Menu-item:focus-visible`.
Defaults to `var(--spectrum-menu-item-background-color-keyboard-focus)`, if not set.",
+ "control": "color",
+ "category": "Modifier"
+ },
+ "mod-menu-item-label-content-color-focus": {
+ "description": "Used by `.spectrum-Menu-item.is-focus-visible > .spectrum-Menu-itemLabel, .spectrum-Menu-item:focus-visible > .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": {
+ "description": "Used by `.spectrum-Menu-item.is-focus-visible > .spectrum-Menu-sectionHeading, .spectrum-Menu-item:focus-visible > .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": {
+ "description": "Used by `.spectrum-Menu-item.is-focus-visible > .spectrum-Menu-itemDescription, .spectrum-Menu-item:focus-visible > .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": {
+ "description": "Used by `.spectrum-Menu-item.is-focus-visible > .spectrum-Menu-itemValue, .spectrum-Menu-item:focus-visible > .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": {
+ "description": "Used by `.spectrum-Menu-item.is-focus-visible .spectrum-Menu-linkout, .spectrum-Menu-item.is-focus-visible > .spectrum-Menu-itemIcon:not(.spectrum-Menu-chevron, .spectrum-Menu-checkmark), .spectrum-Menu-item:focus-visible .spectrum-Menu-linkout, .spectrum-Menu-item:focus-visible > .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": {
+ "description": "Used by `.spectrum-Menu-item.is-focus-visible > .spectrum-Menu-chevron, .spectrum-Menu-item:focus-visible > .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": {
+ "description": "Used by `.spectrum-Menu-item.is-focus-visible > .spectrum-Menu-checkmark, .spectrum-Menu-item:focus-visible > .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": {
+ "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": {
+ "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": {
+ "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": {
+ "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": {
+ "description": "Used by `.spectrum-Menu-item:active .spectrum-Menu-linkout, .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": {
+ "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": {
+ "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": {
+ "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": {
+ "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-thumbnail-opacity-disabled": {
+ "description": "Used by `.spectrum-Menu-item.is-disabled .spectrum-Menu-itemThumbnail, .spectrum-Menu-item[aria-disabled=\"true\"] .spectrum-Menu-itemThumbnail`.
Defaults to `var(--spectrum-menu-item-thumbnail-opacity-disabled)`, if not set.",
+ "control": "text",
+ "category": "Modifier"
+ },
+ "mod-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-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-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": {
+ "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": {
+ "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": {
+ "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": {
+ "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": {
+ "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": {
+ "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": {
+ "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-section-description-color": {
+ "description": "Used by `.spectrum-Menu-sectionDescription`.
Defaults to `var(--spectrum-menu-section-description-color)`, if not set.",
+ "control": "color",
+ "category": "Modifier"
+ },
+ "mod-menu-section-description-font-weight": {
+ "description": "Used by `.spectrum-Menu-sectionDescription`.
Defaults to `var(--spectrum-menu-section-description-font-weight)`, if not set.",
+ "control": "text",
+ "category": "Modifier"
+ },
+ "mod-menu-section-description-line-height": {
+ "description": "Used by `.spectrum-Menu-sectionDescription`.
Defaults to `var(--spectrum-menu-section-description-line-height)`, if not set.",
+ "control": "text",
+ "category": "Modifier"
+ },
+ "mod-menu-section-description-font-size": {
+ "description": "Used by `.spectrum-Menu-sectionDescription`.
Defaults to `var(--spectrum-menu-section-description-font-size)`, if not set.",
+ "control": "text",
+ "category": "Modifier"
+ },
+ "mod-menu-section-header-to-description": {
+ "description": "Used by `.spectrum-Menu-sectionDescription`.
Defaults to `var(--spectrum-menu-section-header-to-description)`, if not set.",
+ "control": "text",
+ "category": "Modifier"
+ },
+ "mod-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": {
+ "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": {
+ "description": "Used by `.spectrum-Menu-itemDescription`.
Defaults to `var(--spectrum-menu-item-label-to-description)`, if not set.",
+ "control": "text",
+ "category": "Modifier"
+ },
+ "mod-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-thumbnail-height": {
+ "description": "Used by `.spectrum-Menu-itemThumbnail`.
Defaults to `var(--spectrum-menu-item-thumbnail-height)`, if not set.",
+ "control": "text",
+ "category": "Modifier"
+ },
+ "mod-menu-item-thumbnail-width": {
+ "description": "Used by `.spectrum-Menu-itemThumbnail`.
Defaults to `var(--spectrum-menu-item-thumbnail-width)`, if not set.",
+ "control": "text",
+ "category": "Modifier"
+ },
+ "mod-menu-item-top-to-thumbnail": {
+ "description": "Used by `.spectrum-Menu-itemThumbnail`.
Defaults to `var(--spectrum-menu-item-top-to-thumbnail)`, if not set.",
+ "control": "text",
+ "category": "Modifier"
+ },
+ "mod-menu-item-thumbnail-to-label": {
+ "description": "Used by `.spectrum-Menu-itemThumbnail`.
Defaults to `var(--spectrum-menu-item-thumbnail-to-label)`, if not set.",
+ "control": "text",
+ "category": "Modifier"
+ },
+ "mod-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": {
+ "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": {
+ "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": {
+ "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-linkout, .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": {
+ "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": {
+ "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": {
+ "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": {
+ "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": {
+ "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": {
+ "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": {
+ "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": {
+ "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": {
+ "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-background-color-default": {
+ "value": "var(--spectrum-gray-100)",
+ "description": "Defined in `.spectrum-Menu`, `.spectrum-Menu-item--drillIn.is-open`.
Used by `.spectrum-Menu-item`.
Defaults to `var(--highcontrast-menu-item-selected-background-color, var(--mod-menu-item-background-color-hover, var(--spectrum-menu-item-background-color-hover)))`, if not set.",
+ "control": "color",
+ "category": "Component"
+ },
+ "spectrum-menu-item-label-line-height": {
+ "value": "var(--mod-menu-item-label-line-height-cjk, var(--spectrum-menu-item-label-line-height-cjk))",
+ "description": "Defined in `.spectrum-Menu`, `.spectrum-Menu:lang(ja), .spectrum-Menu:lang(ko), .spectrum-Menu:lang(zh)`.
Used by `.spectrum-Menu-item`.
Defaults to `var(--mod-menu-item-label-line-height-cjk, var(--spectrum-menu-item-label-line-height-cjk))`, if not set.",
+ "control": "text",
+ "category": "Component"
+ },
+ "spectrum-menu-item-label-line-height-cjk": {
+ "value": "1.5",
+ "description": "Defined in `.spectrum-Menu`.
Used by `--spectrum-menu-item-label-line-height`.
Defaults to `var(--spectrum-cjk-line-height-100)`, if not set.",
+ "control": "text",
+ "category": "Component"
+ },
+ "spectrum-menu-item-label-to-value-area-min-spacing": {
+ "value": "8px",
+ "description": "Defined in `.spectrum-Menu`.
Used by `.spectrum-Menu-itemActions, .spectrum-Menu-itemValue`, `.spectrum-Menu-item--drillIn .spectrum-Menu-chevron`.
Defaults to `var(--spectrum-spacing-100)`, if not set.",
+ "control": "text",
+ "category": "Component"
+ },
+ "spectrum-menu-item-label-content-color-default": {
+ "value": "var(--spectrum-gray-800)",
+ "description": "Defined in `.spectrum-Menu`.
Used by `.spectrum-Menu-itemLabel`.
Defaults to `var(--spectrum-neutral-content-color-default)`, if not set.",
+ "control": "color",
+ "category": "Component"
+ },
+ "spectrum-menu-item-label-content-color-hover": {
+ "value": "var(--spectrum-gray-900)",
+ "description": "Defined in `.spectrum-Menu`.
Used by `.spectrum-Menu-item:hover > .spectrum-Menu-itemLabel`.
Defaults to `var(--spectrum-neutral-content-color-hover)`, if not set.",
+ "control": "color",
+ "category": "Component"
+ },
+ "spectrum-menu-item-label-content-color-down": {
+ "value": "var(--spectrum-gray-900)",
+ "description": "Defined in `.spectrum-Menu`.
Used by `.spectrum-Menu-item:active > .spectrum-Menu-itemLabel`.
Defaults to `var(--spectrum-neutral-content-color-down)`, if not set.",
+ "control": "color",
+ "category": "Component"
+ },
+ "spectrum-menu-item-label-content-color-focus": {
+ "value": "var(--spectrum-gray-900)",
+ "description": "Defined in `.spectrum-Menu`.
Used by `.spectrum-Menu-item.is-focus-visible > .spectrum-Menu-itemLabel, .spectrum-Menu-item:focus-visible > .spectrum-Menu-itemLabel`.
Defaults to `var(--spectrum-neutral-content-color-key-focus)`, if not set.",
+ "control": "color",
+ "category": "Component"
+ },
+ "spectrum-menu-item-label-icon-color-default": {
+ "value": "var(--spectrum-gray-800)",
+ "description": "Defined in `.spectrum-Menu`.
Used by `.spectrum-Menu .spectrum-Menu-itemIcon`.
Defaults to `var(--spectrum-neutral-content-color-default)`, if not set.",
+ "control": "color",
+ "category": "Component"
+ },
+ "spectrum-menu-item-label-icon-color-hover": {
+ "value": "var(--spectrum-gray-900)",
+ "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-linkout, .spectrum-Menu-item:hover > .spectrum-Menu-itemIcon:not(.spectrum-Menu-chevron, .spectrum-Menu-checkmark)`.
Defaults to `var(--spectrum-neutral-content-color-hover)`, if not set.",
+ "control": "color",
+ "category": "Component"
+ },
+ "spectrum-menu-item-label-icon-color-down": {
+ "value": "var(--spectrum-gray-900)",
+ "description": "Defined in `.spectrum-Menu`.
Used by `.spectrum-Menu-item:active .spectrum-Menu-linkout, .spectrum-Menu-item:active > .spectrum-Menu-itemIcon:not(.spectrum-Menu-chevron, .spectrum-Menu-checkmark)`.
Defaults to `var(--spectrum-neutral-content-color-down)`, if not set.",
+ "control": "color",
+ "category": "Component"
+ },
+ "spectrum-menu-item-label-icon-color-focus": {
+ "value": "var(--spectrum-gray-900)",
+ "description": "Defined in `.spectrum-Menu`.
Used by `.spectrum-Menu-item.is-focus-visible .spectrum-Menu-linkout, .spectrum-Menu-item.is-focus-visible > .spectrum-Menu-itemIcon:not(.spectrum-Menu-chevron, .spectrum-Menu-checkmark), .spectrum-Menu-item:focus-visible .spectrum-Menu-linkout, .spectrum-Menu-item:focus-visible > .spectrum-Menu-itemIcon:not(.spectrum-Menu-chevron, .spectrum-Menu-checkmark)`.
Defaults to `var(--spectrum-neutral-content-color-key-focus)`, if not set.",
+ "control": "color",
+ "category": "Component"
+ },
+ "spectrum-menu-item-label-content-color-disabled": {
+ "value": "var(--spectrum-gray-400)",
+ "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`.
Defaults to `var(--spectrum-disabled-content-color)`, if not set.",
+ "control": "color",
+ "category": "Component"
+ },
+ "spectrum-menu-item-label-icon-color-disabled": {
+ "value": "var(--spectrum-gray-400)",
+ "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`.
Defaults to `var(--spectrum-disabled-content-color)`, if not set.",
+ "control": "color",
+ "category": "Component"
+ },
+ "spectrum-menu-item-description-line-height": {
+ "value": "var(--mod-menu-item-description-line-height-cjk, var(--spectrum-menu-item-description-line-height-cjk))",
+ "description": "Defined in `.spectrum-Menu`, `.spectrum-Menu:lang(ja), .spectrum-Menu:lang(ko), .spectrum-Menu:lang(zh)`.
Used by `.spectrum-Menu-itemDescription`.
Defaults to `var(--mod-menu-item-description-line-height-cjk, var(--spectrum-menu-item-description-line-height-cjk))`, if not set.",
+ "control": "text",
+ "category": "Component"
+ },
+ "spectrum-menu-item-description-line-height-cjk": {
+ "value": "1.5",
+ "description": "Defined in `.spectrum-Menu`.
Used by `--spectrum-menu-item-description-line-height`.
Defaults to `var(--spectrum-cjk-line-height-100)`, if not set.",
+ "control": "text",
+ "category": "Component"
+ },
+ "spectrum-menu-item-description-color-default": {
+ "value": "var(--spectrum-gray-700)",
+ "description": "Defined in `.spectrum-Menu`.
Used by `.spectrum-Menu-itemDescription`.
Defaults to `var(--spectrum-neutral-subdued-content-color-default)`, if not set.",
+ "control": "color",
+ "category": "Component"
+ },
+ "spectrum-menu-item-description-color-hover": {
+ "value": "var(--spectrum-gray-800)",
+ "description": "Defined in `.spectrum-Menu`.
Used by `.spectrum-Menu-item:hover > .spectrum-Menu-itemDescription`.
Defaults to `var(--spectrum-neutral-subdued-content-color-hover)`, if not set.",
+ "control": "color",
+ "category": "Component"
+ },
+ "spectrum-menu-item-description-color-down": {
+ "value": "var(--spectrum-gray-800)",
+ "description": "Defined in `.spectrum-Menu`.
Used by `.spectrum-Menu-item:active > .spectrum-Menu-itemDescription`.
Defaults to `var(--spectrum-neutral-subdued-content-color-down)`, if not set.",
+ "control": "color",
+ "category": "Component"
+ },
+ "spectrum-menu-item-description-color-focus": {
+ "value": "var(--spectrum-gray-800)",
+ "description": "Defined in `.spectrum-Menu`.
Used by `.spectrum-Menu-item.is-focus-visible > .spectrum-Menu-itemDescription, .spectrum-Menu-item:focus-visible > .spectrum-Menu-itemDescription`.
Defaults to `var(--spectrum-neutral-subdued-content-color-key-focus)`, if not set.",
+ "control": "color",
+ "category": "Component"
+ },
+ "spectrum-menu-item-description-color-disabled": {
+ "value": "var(--spectrum-gray-400)",
+ "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`.
Defaults to `var(--spectrum-disabled-content-color)`, if not set.",
+ "control": "color",
+ "category": "Component"
+ },
+ "spectrum-menu-section-header-line-height": {
+ "value": "var(--mod-menu-section-header-line-height-cjk, var(--spectrum-menu-section-header-line-height-cjk))",
+ "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`.
Defaults to `var(--mod-menu-section-header-line-height-cjk, var(--spectrum-menu-section-header-line-height-cjk))`, if not set.",
+ "control": "text",
+ "category": "Component"
+ },
+ "spectrum-menu-section-header-line-height-cjk": {
+ "value": "1.5",
+ "description": "Defined in `.spectrum-Menu`.
Used by `--spectrum-menu-section-header-line-height`.
Defaults to `var(--spectrum-cjk-line-height-100)`, if not set.",
+ "control": "text",
+ "category": "Component"
+ },
+ "spectrum-menu-section-header-font-weight": {
+ "value": "700",
+ "description": "Defined in `.spectrum-Menu`.
Used by `.spectrum-Menu-sectionHeading`, `.spectrum-Menu-backHeading`.
Defaults to `var(--spectrum-bold-font-weight)`, if not set.",
+ "control": "text",
+ "category": "Component"
+ },
+ "spectrum-menu-section-header-color": {
+ "value": "var(--spectrum-gray-800)",
+ "description": "Defined in `.spectrum-Menu`.
Used by `.spectrum-Menu .spectrum-Menu-backIcon`, `.spectrum-Menu-item.is-focus-visible > .spectrum-Menu-sectionHeading, .spectrum-Menu-item:focus-visible > .spectrum-Menu-sectionHeading`, `.spectrum-Menu-item:active > .spectrum-Menu-sectionHeading`, `.spectrum-Menu-sectionHeading`, `.spectrum-Menu-item:hover > .spectrum-Menu-sectionHeading`, `.spectrum-Menu-backHeading`.
Defaults to `var(--spectrum-neutral-content-color-default)`, if not set.",
+ "control": "color",
+ "category": "Component"
+ },
+ "spectrum-menu-section-header-font-size": {
+ "value": "18px",
+ "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`.
Defaults to `var(--spectrum-font-size-300)`, if not set.",
+ "control": "text",
+ "category": "Component"
+ },
+ "spectrum-menu-section-header-min-width": {
+ "value": "48px",
+ "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`.
Defaults to `var(--spectrum-component-height-300)`, if not set.",
+ "control": "text",
+ "category": "Component"
+ },
+ "spectrum-menu-section-description-line-height": {
+ "value": "var(--mod-menu-section-description-line-height-cjk, var(--spectrum-menu-section-description-line-height-cjk))",
+ "description": "Defined in `.spectrum-Menu`, `.spectrum-Menu:lang(ja), .spectrum-Menu:lang(ko), .spectrum-Menu:lang(zh)`.
Used by `.spectrum-Menu-sectionDescription`.
Defaults to `var(--mod-menu-section-description-line-height-cjk, var(--spectrum-menu-section-description-line-height-cjk))`, if not set.",
+ "control": "text",
+ "category": "Component"
+ },
+ "spectrum-menu-section-description-line-height-cjk": {
+ "value": "1.5",
+ "description": "Defined in `.spectrum-Menu`.
Used by `--spectrum-menu-section-description-line-height`.
Defaults to `var(--spectrum-cjk-line-height-100)`, if not set.",
+ "control": "text",
+ "category": "Component"
+ },
+ "spectrum-menu-section-description-font-weight": {
+ "value": "400",
+ "description": "Defined in `.spectrum-Menu`.
Used by `.spectrum-Menu-sectionDescription`.
Defaults to `var(--spectrum-regular-font-weight)`, if not set.",
+ "control": "text",
+ "category": "Component"
+ },
+ "spectrum-menu-section-description-color": {
+ "value": "var(--spectrum-gray-700)",
+ "description": "Defined in `.spectrum-Menu`.
Used by `.spectrum-Menu-sectionDescription`.
Defaults to `var(--spectrum-neutral-subdued-content-color-default)`, if not set.",
+ "control": "color",
+ "category": "Component"
+ },
+ "spectrum-menu-section-header-to-description": {
+ "value": "2px",
+ "description": "Defined in `.spectrum-Menu`, `.spectrum-Menu.spectrum-Menu--sizeS`, `.spectrum-Menu.spectrum-Menu--sizeL`, `.spectrum-Menu.spectrum-Menu--sizeXL`.
Used by `.spectrum-Menu-sectionDescription`.
Defaults to `var(--spectrum-menu-section-header-to-description-extra-large)`, if not set.",
+ "control": "text",
+ "category": "Component"
+ },
+ "spectrum-menu-section-header-to-description-medium": {
+ "value": "1px",
+ "description": "Used by `--spectrum-menu-section-header-to-description`.",
+ "control": "text",
+ "category": "Component"
+ },
+ "spectrum-menu-item-label-to-description": {
+ "value": "2px",
+ "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`.
Defaults to `var(--spectrum-menu-item-label-to-description-extra-large)`, if not set.",
+ "control": "text",
+ "category": "Component"
+ },
+ "spectrum-menu-item-label-to-description-medium": {
+ "value": "1px",
+ "description": "Used by `--spectrum-menu-item-label-to-description`.",
+ "control": "text",
+ "category": "Component"
+ },
+ "spectrum-menu-collapsible-icon-color": {
+ "value": "light-dark(rgb(19, 19, 19), rgb(242, 242, 242))",
+ "description": "Defined in `.spectrum-Menu`.
Used by `.spectrum-Menu-item.is-focus-visible > .spectrum-Menu-chevron, .spectrum-Menu-item:focus-visible > .spectrum-Menu-chevron`, `.spectrum-Menu-item:active > .spectrum-Menu-chevron`, `.spectrum-Menu-item:hover > .spectrum-Menu-chevron`.
Defaults to `var(--spectrum-gray-900)`, if not set.",
+ "control": "color",
+ "category": "Component"
+ },
+ "spectrum-menu-checkmark-icon-color-default": {
+ "value": "var(--spectrum-blue-900)",
+ "description": "Defined in `.spectrum-Menu`.
Used by `.spectrum-Menu .spectrum-Menu-checkmark`.
Defaults to `var(--spectrum-accent-color-900)`, if not set.",
+ "control": "color",
+ "category": "Component"
+ },
+ "spectrum-menu-checkmark-icon-color-hover": {
+ "value": "var(--spectrum-blue-1000)",
+ "description": "Defined in `.spectrum-Menu`.
Used by `.spectrum-Menu-item--drillIn.is-open .spectrum-Menu-checkmark`, `.spectrum-Menu-item:hover > .spectrum-Menu-checkmark`.
Defaults to `var(--spectrum-accent-color-1000)`, if not set.",
+ "control": "color",
+ "category": "Component"
+ },
+ "spectrum-menu-checkmark-icon-color-down": {
+ "value": "var(--spectrum-blue-1100)",
+ "description": "Defined in `.spectrum-Menu`.
Used by `.spectrum-Menu-item:active > .spectrum-Menu-checkmark`.
Defaults to `var(--spectrum-accent-color-1100)`, if not set.",
+ "control": "color",
+ "category": "Component"
+ },
+ "spectrum-menu-checkmark-icon-color-focus": {
+ "value": "var(--spectrum-blue-1000)",
+ "description": "Defined in `.spectrum-Menu`.
Used by `.spectrum-Menu-item.is-focus-visible > .spectrum-Menu-checkmark, .spectrum-Menu-item:focus-visible > .spectrum-Menu-checkmark`.
Defaults to `var(--spectrum-accent-color-1000)`, if not set.",
+ "control": "color",
+ "category": "Component"
+ },
+ "spectrum-menu-drillin-icon-color-default": {
+ "value": "var(--spectrum-gray-700)",
+ "description": "Defined in `.spectrum-Menu`.
Used by `.spectrum-Menu-item--drillIn .spectrum-Menu-chevron`.
Defaults to `var(--spectrum-neutral-subdued-content-color-default)`, if not set.",
+ "control": "color",
+ "category": "Component"
+ },
+ "spectrum-menu-drillin-icon-color-hover": {
+ "value": "var(--spectrum-gray-800)",
+ "description": "Defined in `.spectrum-Menu`.
Used by `.spectrum-Menu-item--drillIn.is-open .spectrum-Menu-chevron`, `.spectrum-Menu-item--drillIn:hover .spectrum-Menu-chevron`.
Defaults to `var(--spectrum-neutral-subdued-content-color-hover)`, if not set.",
+ "control": "color",
+ "category": "Component"
+ },
+ "spectrum-menu-drillin-icon-color-down": {
+ "value": "var(--spectrum-gray-800)",
+ "description": "Defined in `.spectrum-Menu`.
Used by `.spectrum-Menu-item--drillIn:active .spectrum-Menu-chevron`.
Defaults to `var(--spectrum-neutral-subdued-content-color-down)`, if not set.",
+ "control": "color",
+ "category": "Component"
+ },
+ "spectrum-menu-drillin-icon-color-focus": {
+ "value": "var(--spectrum-gray-800)",
+ "description": "Defined in `.spectrum-Menu`.
Used by `.spectrum-Menu-item--drillIn.is-focused .spectrum-Menu-chevron, .spectrum-Menu-item--drillIn:focus .spectrum-Menu-chevron`.
Defaults to `var(--spectrum-neutral-subdued-content-color-key-focus)`, if not set.",
+ "control": "color",
+ "category": "Component"
+ },
+ "spectrum-menu-item-value-color-default": {
+ "value": "var(--spectrum-gray-700)",
+ "description": "Defined in `.spectrum-Menu`.
Used by `.spectrum-Menu-itemValue`.
Defaults to `var(--spectrum-neutral-subdued-content-color-default)`, if not set.",
+ "control": "color",
+ "category": "Component"
+ },
+ "spectrum-menu-item-value-color-hover": {
+ "value": "var(--spectrum-gray-800)",
+ "description": "Defined in `.spectrum-Menu`.
Used by `.spectrum-Menu-item:hover > .spectrum-Menu-itemValue`.
Defaults to `var(--spectrum-neutral-subdued-content-color-hover)`, if not set.",
+ "control": "color",
+ "category": "Component"
+ },
+ "spectrum-menu-item-value-color-down": {
+ "value": "var(--spectrum-gray-800)",
+ "description": "Defined in `.spectrum-Menu`.
Used by `.spectrum-Menu-item:active > .spectrum-Menu-itemValue`.
Defaults to `var(--spectrum-neutral-subdued-content-color-down)`, if not set.",
+ "control": "color",
+ "category": "Component"
+ },
+ "spectrum-menu-item-value-color-focus": {
+ "value": "var(--spectrum-gray-800)",
+ "description": "Defined in `.spectrum-Menu`.
Used by `.spectrum-Menu-item.is-focus-visible > .spectrum-Menu-itemValue, .spectrum-Menu-item:focus-visible > .spectrum-Menu-itemValue`.
Defaults to `var(--spectrum-neutral-subdued-content-color-key-focus)`, if not set.",
+ "control": "color",
+ "category": "Component"
+ },
+ "spectrum-menu-checkmark-display-hidden": {
+ "value": "none",
+ "description": "Defined in `.spectrum-Menu`.
Used by `--spectrum-menu-checkmark-display`.
Defaults to `none`, if not set.",
+ "control": "text",
+ "category": "Component"
+ },
+ "spectrum-menu-checkmark-display-shown": {
+ "value": "block",
+ "description": "Defined in `.spectrum-Menu`.
Used by `--spectrum-menu-checkmark-display`.
Defaults to `block`, if not set.",
+ "control": "text",
+ "category": "Component"
+ },
+ "spectrum-menu-checkmark-display": {
+ "value": "var(--spectrum-menu-checkmark-display-shown)",
+ "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`.
Defaults to `var(--spectrum-menu-checkmark-display-shown)`, if not set.",
+ "control": "text",
+ "category": "Component"
+ },
+ "spectrum-menu-item-min-height": {
+ "value": "48px",
+ "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`.
Defaults to `var(--spectrum-component-height-300)`, if not set.",
+ "control": "text",
+ "category": "Component"
+ },
+ "spectrum-menu-item-icon-height": {
+ "value": "26px",
+ "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, .spectrum-Menu-linkout)`.
Defaults to `var(--spectrum-workflow-icon-size-300)`, if not set.",
+ "control": "text",
+ "category": "Component"
+ },
+ "spectrum-menu-item-icon-width": {
+ "value": "26px",
+ "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, .spectrum-Menu-linkout)`.
Defaults to `var(--spectrum-workflow-icon-size-300)`, if not set.",
+ "control": "text",
+ "category": "Component"
+ },
+ "spectrum-menu-item-linkout-icon-height": {
+ "value": "14px",
+ "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-linkout`.
Defaults to `var(--spectrum-link-out-icon-size-200)`, if not set.",
+ "control": "text",
+ "category": "Component"
+ },
+ "spectrum-menu-item-linkout-icon-width": {
+ "value": "14px",
+ "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-linkout`.
Defaults to `var(--spectrum-link-out-icon-size-200)`, if not set.",
+ "control": "text",
+ "category": "Component"
+ },
+ "spectrum-menu-item-label-font-size": {
+ "value": "18px",
+ "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`.
Defaults to `var(--spectrum-font-size-300)`, if not set.",
+ "control": "text",
+ "category": "Component"
+ },
+ "spectrum-menu-item-label-text-to-visual": {
+ "value": "8px",
+ "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`.
Defaults to `var(--spectrum-text-to-visual-300)`, if not set.",
+ "control": "text",
+ "category": "Component"
+ },
+ "spectrum-menu-item-top-to-action": {
+ "value": "2px",
+ "description": "Defined in `.spectrum-Menu`.
Used by `.spectrum-Menu-item .spectrum-Menu-itemSwitch .spectrum-Switch-switch`.
Defaults to `var(--spectrum-spacing-50)`, if not set.",
+ "control": "text",
+ "category": "Component"
+ },
+ "spectrum-menu-item-top-to-checkbox": {
+ "value": "2px",
+ "description": "Defined in `.spectrum-Menu`.
Used by `.spectrum-Menu-item .spectrum-Menu-itemCheckbox .spectrum-Checkbox-box`.
Defaults to `var(--spectrum-spacing-50)`, if not set.",
+ "control": "text",
+ "category": "Component"
+ },
+ "spectrum-menu-item-top-to-workflow-icon": {
+ "value": "11px",
+ "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--workflowIcon`.
Defaults to `var(--spectrum-component-top-to-workflow-icon-300)`, if not set.",
+ "control": "text",
+ "category": "Component"
+ },
+ "spectrum-menu-item-label-inline-edge-to-content": {
+ "value": "18px",
+ "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`.
Defaults to `var(--spectrum-component-edge-to-text-300)`, if not set.",
+ "control": "text",
+ "category": "Component"
+ },
+ "spectrum-menu-item-top-edge-to-text": {
+ "value": "12px",
+ "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-itemIcon--workflowIcon`, `.spectrum-Menu-item`, `.spectrum-Menu-sectionHeading`, `.spectrum-Menu-itemThumbnail`, `.spectrum-Menu-item--collapsible > .spectrum-Menu-itemIcon`.
Defaults to `var(--spectrum-component-top-to-text-300)`, if not set.",
+ "control": "text",
+ "category": "Component"
+ },
+ "spectrum-menu-item-bottom-edge-to-text": {
+ "value": "14px",
+ "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`.
Defaults to `var(--spectrum-component-bottom-to-text-300)`, if not set.",
+ "control": "text",
+ "category": "Component"
+ },
+ "spectrum-menu-item-text-to-control": {
+ "value": "13px",
+ "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`.
Defaults to `var(--spectrum-text-to-control-300)`, if not set.",
+ "control": "text",
+ "category": "Component"
+ },
+ "spectrum-menu-item-selectable-edge-to-text-not-selected": {
+ "value": "var(--spectrum-menu-item-selectable-edge-to-text-not-selected-extra-large)",
+ "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`.
Defaults to `var(--spectrum-menu-item-selectable-edge-to-text-not-selected-extra-large)`, if not set.",
+ "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-description-font-size": {
+ "value": "16px",
+ "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`.
Defaults to `var(--spectrum-font-size-200)`, if not set.",
+ "control": "text",
+ "category": "Component"
+ },
+ "spectrum-menu-item-corner-radius": {
+ "value": "10px",
+ "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`.
Defaults to `var(--spectrum-corner-radius-700)`, if not set.",
+ "control": "text",
+ "category": "Component"
+ },
+ "spectrum-menu-item-checkmark-height": {
+ "value": "14px",
+ "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`.
Defaults to `var(--spectrum-checkmark-icon-size-300)`, if not set.",
+ "control": "text",
+ "category": "Component"
+ },
+ "spectrum-menu-item-checkmark-width": {
+ "value": "14px",
+ "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`.
Defaults to `var(--spectrum-checkmark-icon-size-300)`, if not set.",
+ "control": "text",
+ "category": "Component"
+ },
+ "spectrum-menu-item-top-to-checkmark": {
+ "value": "17px",
+ "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`.
Defaults to `var(--spectrum-menu-item-top-to-selected-icon-extra-large)`, if not set.",
+ "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-item-chevron-height": {
+ "value": "14px",
+ "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-chevron`.
Defaults to `var(--spectrum-chevron-icon-size-300)`, if not set.",
+ "control": "text",
+ "category": "Component"
+ },
+ "spectrum-menu-item-chevron-width": {
+ "value": "14px",
+ "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-chevron`.
Defaults to `var(--spectrum-chevron-icon-size-300)`, if not set.",
+ "control": "text",
+ "category": "Component"
+ },
+ "spectrum-menu-item-top-to-thumbnail": {
+ "value": "11px",
+ "description": "Defined in `.spectrum-Menu`, `.spectrum-Menu.spectrum-Menu--sizeS`, `.spectrum-Menu.spectrum-Menu--sizeL`, `.spectrum-Menu.spectrum-Menu--sizeXL`.
Used by `.spectrum-Menu-itemThumbnail`.
Defaults to `var(--spectrum-menu-item-top-to-thumbnail-extra-large)`, if not set.",
+ "control": "text",
+ "category": "Component"
+ },
+ "spectrum-menu-item-top-to-thumbnail-medium": {
+ "value": "9px",
+ "description": "Used by `--spectrum-menu-item-top-to-thumbnail`.",
+ "control": "text",
+ "category": "Component"
+ },
+ "spectrum-menu-item-thumbnail-to-label": {
+ "value": "9px",
+ "description": "Defined in `.spectrum-Menu`, `.spectrum-Menu.spectrum-Menu--sizeS`, `.spectrum-Menu.spectrum-Menu--sizeL`, `.spectrum-Menu.spectrum-Menu--sizeXL`.
Used by `.spectrum-Menu-itemThumbnail`.
Defaults to `var(--spectrum-text-to-visual-400)`, if not set.",
+ "control": "text",
+ "category": "Component"
+ },
+ "spectrum-menu-item-thumbnail-height": {
+ "value": "56px",
+ "description": "Defined in `.spectrum-Menu`, `.spectrum-Menu.spectrum-Menu--sizeS`, `.spectrum-Menu.spectrum-Menu--sizeL`, `.spectrum-Menu.spectrum-Menu--sizeXL`.
Used by `.spectrum-Menu-itemThumbnail`.
Defaults to `var(--spectrum-thumbnail-size-900)`, if not set.",
+ "control": "text",
+ "category": "Component"
+ },
+ "spectrum-menu-item-thumbnail-width": {
+ "value": "56px",
+ "description": "Defined in `.spectrum-Menu`, `.spectrum-Menu.spectrum-Menu--sizeS`, `.spectrum-Menu.spectrum-Menu--sizeL`, `.spectrum-Menu.spectrum-Menu--sizeXL`.
Used by `.spectrum-Menu-itemThumbnail`.
Defaults to `var(--spectrum-thumbnail-size-900)`, if not set.",
+ "control": "text",
+ "category": "Component"
+ },
+ "spectrum-menu-item-thumbnail-opacity-disabled": {
+ "value": "0.3",
+ "description": "Defined in `.spectrum-Menu`.
Used by `.spectrum-Menu-item.is-disabled .spectrum-Menu-itemThumbnail, .spectrum-Menu-item[aria-disabled=\"true\"] .spectrum-Menu-itemThumbnail`.
Defaults to `0.3`, if not set.",
+ "control": "text",
+ "category": "Component"
+ },
+ "spectrum-menu-back-icon-margin": {
+ "value": "15px",
+ "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`.
Defaults to `var(--spectrum-navigational-indicator-top-to-back-icon-extra-large)`, if not set.",
+ "control": "text",
+ "category": "Component"
+ },
+ "spectrum-menu-item-collapsible-no-icon-submenu-item-padding-x-start": {
+ "value": "calc(var(--spectrum-menu-item-label-inline-edge-to-content) + var(--spectrum-menu-item-checkmark-width) + var(--spectrum-menu-item-label-text-to-visual) + var(--spectrum-menu-item-focus-indicator-width))",
+ "description": "Defined in `.spectrum-Menu`.
Used by `.spectrum-Menu-item--collapsible .spectrum-Menu .spectrum-Menu-item`.
Defaults to `calc(var(--spectrum-menu-item-label-inline-edge-to-content) + var(--spectrum-menu-item-checkmark-width) + var(--spectrum-menu-item-label-text-to-visual) + var(--spectrum-menu-item-focus-indicator-width))`, if not set.",
+ "control": "text",
+ "category": "Component"
+ },
+ "spectrum-menu-item-focus-indicator-width": {
+ "value": "var(--mod-menu-item-focus-indicator-width, var(--spectrum-focus-indicator-thickness))",
+ "description": "Defined in `.spectrum-Menu`.
Used by `--spectrum-menu-item-collapsible-no-icon-submenu-item-padding-x-start`, `--spectrum-menu-item-focus-margin`, `.spectrum-Menu-back:focus-visible, .spectrum-Menu-item:focus-visible`.
Defaults to `var(--mod-menu-item-focus-indicator-width, var(--spectrum-focus-indicator-thickness))`, if not set.",
+ "control": "text",
+ "category": "Component"
+ },
+ "spectrum-menu-item-focus-indicator-color": {
+ "value": "var(--spectrum-blue-800)",
+ "description": "Defined in `.spectrum-Menu`.
Used by `--spectrum-menu-item-focus-indicator-color-default`.
Defaults to `var(--spectrum-focus-indicator-color)`, if not set.",
+ "control": "color",
+ "category": "Component"
+ },
+ "spectrum-menu-item-focus-indicator-offset": {
+ "value": "2px",
+ "description": "Defined in `.spectrum-Menu`.
Used by `--spectrum-menu-item-focus-margin`, `.spectrum-Menu-back:focus-visible, .spectrum-Menu-item:focus-visible`.
Defaults to `var(--spectrum-focus-indicator-gap)`, if not set.",
+ "control": "text",
+ "category": "Component"
+ },
+ "spectrum-menu-item-focus-indicator-outline-style": {
+ "value": "solid",
+ "description": "Defined in `.spectrum-Menu`.
Used by `.spectrum-Menu-back:focus-visible, .spectrum-Menu-item:focus-visible`.
Defaults to `solid`, if not set.",
+ "control": "text",
+ "category": "Component"
+ },
+ "spectrum-menu-item-focus-indicator-color-default": {
+ "value": "var(--highcontrast-menu-item-focus-indicator-color, var(--mod-menu-item-focus-indicator-color, var(--spectrum-menu-item-focus-indicator-color)))",
+ "description": "Defined in `.spectrum-Menu`.
Used by `.spectrum-Menu-back:focus-visible, .spectrum-Menu-item:focus-visible`.
Defaults to `var(--highcontrast-menu-item-focus-indicator-color, var(--mod-menu-item-focus-indicator-color, var(--spectrum-menu-item-focus-indicator-color)))`, if not set.",
+ "control": "color",
+ "category": "Component"
+ },
+ "spectrum-menu-item-focus-margin": {
+ "value": "calc(var(--spectrum-menu-item-focus-indicator-offset) + var(--spectrum-menu-item-focus-indicator-width))",
+ "description": "Defined in `.spectrum-Menu`.
Used by `.spectrum-Menu-item`, `.spectrum-Menu-sectionHeading`.
Defaults to `calc(var(--spectrum-menu-item-focus-indicator-offset) + var(--spectrum-menu-item-focus-indicator-width))`, if not set.",
+ "control": "text",
+ "category": "Component"
+ },
+ "spectrum-menu-section-description-font-size": {
+ "value": "16px",
+ "description": "Defined in `.spectrum-Menu.spectrum-Menu--sizeS`, `.spectrum-Menu.spectrum-Menu--sizeL`, `.spectrum-Menu.spectrum-Menu--sizeXL`.
Used by `.spectrum-Menu-sectionDescription`.
Defaults to `var(--spectrum-font-size-200)`, if not set.",
+ "control": "text",
+ "category": "Component"
+ },
+ "spectrum-menu-section-header-to-description-small": {
+ "value": "1px",
+ "description": "Used by `--spectrum-menu-section-header-to-description`.",
+ "control": "text",
+ "category": "Component"
+ },
+ "spectrum-menu-item-label-to-description-small": {
+ "value": "1px",
+ "description": "Used by `--spectrum-menu-item-label-to-description`.",
+ "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-top-to-selected-icon-small": {
+ "value": "7px",
+ "description": "Used by `--spectrum-menu-item-top-to-checkmark`.",
+ "control": "text",
+ "category": "Component"
+ },
+ "spectrum-menu-item-top-to-thumbnail-small": {
+ "value": "8px",
+ "description": "Used by `--spectrum-menu-item-top-to-thumbnail`.",
+ "control": "text",
+ "category": "Component"
+ },
+ "spectrum-menu-section-header-to-description-large": {
+ "value": "2px",
+ "description": "Used by `--spectrum-menu-section-header-to-description`.",
+ "control": "text",
+ "category": "Component"
+ },
+ "spectrum-menu-item-label-to-description-large": {
+ "value": "2px",
+ "description": "Used by `--spectrum-menu-item-label-to-description`.",
+ "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-top-to-selected-icon-large": {
+ "value": "14px",
+ "description": "Used by `--spectrum-menu-item-top-to-checkmark`.",
+ "control": "text",
+ "category": "Component"
+ },
+ "spectrum-menu-item-top-to-thumbnail-large": {
+ "value": "10px",
+ "description": "Used by `--spectrum-menu-item-top-to-thumbnail`.",
+ "control": "text",
+ "category": "Component"
+ },
+ "spectrum-menu-section-header-to-description-extra-large": {
+ "value": "2px",
+ "description": "Used by `--spectrum-menu-section-header-to-description`.",
+ "control": "text",
+ "category": "Component"
+ },
+ "spectrum-menu-item-label-to-description-extra-large": {
+ "value": "2px",
+ "description": "Used by `--spectrum-menu-item-label-to-description`.",
+ "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-top-to-selected-icon-extra-large": {
+ "value": "17px",
+ "description": "Used by `--spectrum-menu-item-top-to-checkmark`.",
+ "control": "text",
+ "category": "Component"
+ },
+ "spectrum-menu-item-top-to-thumbnail-extra-large": {
+ "value": "11px",
+ "description": "Used by `--spectrum-menu-item-top-to-thumbnail`.",
+ "control": "text",
+ "category": "Component"
+ },
+ "spectrum-menu-divider-thickness": {
+ "value": "1px",
+ "description": "Defined in `.spectrum-Menu .spectrum-Menu-divider`, `.spectrum-Menu .spectrum-Menu-divider.spectrum-Divider--sizeS`.
Used by `.spectrum-Menu .spectrum-Menu-divider`.
Defaults to `var(--spectrum-divider-thickness-small)`, if not set.",
+ "control": "text",
+ "category": "Component"
+ },
+ "spectrum-menu-item-section-divider-height": {
+ "value": "12px",
+ "description": "Used by `.spectrum-Menu .spectrum-Menu-divider`.",
+ "control": "text",
+ "category": "Component"
+ },
+ "spectrum-menu-item-background-color-keyboard-focus": {
+ "value": "var(--spectrum-gray-100)",
+ "description": "Used by `.spectrum-Menu-item.is-focus-visible, .spectrum-Menu-item:focus-visible`.",
+ "control": "color",
+ "category": "Component"
+ },
+ "spectrum-menu-item-background-color-down": {
+ "value": "var(--spectrum-gray-100)",
+ "description": "Used by `.spectrum-Menu-item:active`.",
+ "control": "color",
+ "category": "Component"
+ },
+ "spectrum-menu-item-background-color-hover": {
+ "value": "var(--spectrum-gray-100)",
+ "description": "Used by `--spectrum-menu-item-background-color-default`, `.spectrum-Menu-item:hover`.",
+ "control": "color",
+ "category": "Component"
+ }
+ },
+ "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`, `--spectrum-menu-section-description-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`, `--spectrum-menu-section-description-line-height-cjk`.",
+ "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`, `--spectrum-menu-section-header-color`.",
+ "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-section-description-color`, `--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-font-size-100": {
+ "value": "14px",
+ "description": "Used by `--spectrum-menu-section-header-font-size`, `--spectrum-menu-item-label-font-size`, `--spectrum-menu-item-description-font-size`, `--spectrum-menu-section-description-font-size`.",
+ "control": "text",
+ "category": "Global"
+ },
+ "spectrum-component-height-100": {
+ "value": "32px",
+ "description": "Used by `--spectrum-menu-section-header-min-width`, `--spectrum-menu-item-min-height`.",
+ "control": "text",
+ "category": "Global"
+ },
+ "spectrum-regular-font-weight": {
+ "value": "400",
+ "description": "Used by `--spectrum-menu-section-description-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-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-workflow-icon-size-100": {
+ "value": "20px",
+ "description": "Used by `--spectrum-menu-item-icon-height`, `--spectrum-menu-item-icon-width`.",
+ "control": "text",
+ "category": "Global"
+ },
+ "spectrum-link-out-icon-size-100": {
+ "value": "12px",
+ "description": "Used by `--spectrum-menu-item-linkout-icon-height`, `--spectrum-menu-item-linkout-icon-width`.",
+ "control": "text",
+ "category": "Global"
+ },
+ "spectrum-text-to-visual-100": {
+ "value": "6px",
+ "description": "Used by `--spectrum-menu-item-label-text-to-visual`, `--spectrum-menu-item-thumbnail-to-label`.",
+ "control": "text",
+ "category": "Global"
+ },
+ "spectrum-spacing-50": {
+ "value": "2px",
+ "description": "Used by `--spectrum-menu-item-top-to-action`, `--spectrum-menu-item-top-to-checkbox`.",
+ "control": "text",
+ "category": "Global"
+ },
+ "spectrum-component-top-to-workflow-icon-100": {
+ "value": "6px",
+ "description": "Used by `--spectrum-menu-item-top-to-workflow-icon`.",
+ "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-corner-radius-500": {
+ "value": "8px",
+ "description": "Used by `--spectrum-menu-item-corner-radius`.",
+ "control": "text",
+ "category": "Global"
+ },
+ "spectrum-checkmark-icon-size-100": {
+ "value": "10px",
+ "description": "Used by `--spectrum-menu-item-checkmark-height`, `--spectrum-menu-item-checkmark-width`.",
+ "control": "text",
+ "category": "Global"
+ },
+ "spectrum-chevron-icon-size-100": {
+ "value": "10px",
+ "description": "Used by `--spectrum-menu-item-chevron-height`, `--spectrum-menu-item-chevron-width`.",
+ "control": "text",
+ "category": "Global"
+ },
+ "spectrum-text-to-visual-200": {
+ "value": "7px",
+ "description": "Used by `--spectrum-menu-item-thumbnail-to-label`, `--spectrum-menu-item-label-text-to-visual`.",
+ "control": "text",
+ "category": "Global"
+ },
+ "spectrum-thumbnail-size-700": {
+ "value": "48px",
+ "description": "Used by `--spectrum-menu-item-thumbnail-height`, `--spectrum-menu-item-thumbnail-width`.",
+ "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-focus-indicator-thickness": {
+ "value": "2px",
+ "description": "Used by `--spectrum-menu-item-focus-indicator-width`, `.spectrum-Menu-backButton:focus-visible`.",
+ "control": "text",
+ "category": "Global"
+ },
+ "spectrum-focus-indicator-color": {
+ "value": "var(--spectrum-blue-800)",
+ "description": "Used by `--spectrum-menu-item-focus-indicator-color`, `.spectrum-Menu-backButton:focus-visible`.",
+ "control": "color",
+ "category": "Global"
+ },
+ "spectrum-focus-indicator-gap": {
+ "value": "2px",
+ "description": "Used by `--spectrum-menu-item-focus-indicator-offset`.",
+ "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": "9px",
+ "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-component-top-to-workflow-icon-75": {
+ "value": "4px",
+ "description": "Used by `--spectrum-menu-item-top-to-workflow-icon`.",
+ "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`, `--spectrum-menu-section-description-font-size`.",
+ "control": "text",
+ "category": "Global"
+ },
+ "spectrum-checkmark-icon-size-75": {
+ "value": "10px",
+ "description": "Used by `--spectrum-menu-item-checkmark-height`, `--spectrum-menu-item-checkmark-width`.",
+ "control": "text",
+ "category": "Global"
+ },
+ "spectrum-chevron-icon-size-75": {
+ "value": "10px",
+ "description": "Used by `--spectrum-menu-item-chevron-height`, `--spectrum-menu-item-chevron-width`.",
+ "control": "text",
+ "category": "Global"
+ },
+ "spectrum-link-out-icon-size-75": {
+ "value": "10px",
+ "description": "Used by `--spectrum-menu-item-linkout-icon-height`, `--spectrum-menu-item-linkout-icon-width`.",
+ "control": "text",
+ "category": "Global"
+ },
+ "spectrum-corner-radius-400": {
+ "value": "7px",
+ "description": "Used by `--spectrum-menu-item-corner-radius`.",
+ "control": "text",
+ "category": "Global"
+ },
+ "spectrum-thumbnail-size-500": {
+ "value": "40px",
+ "description": "Used by `--spectrum-menu-item-thumbnail-height`, `--spectrum-menu-item-thumbnail-width`.",
+ "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`, `--spectrum-menu-section-description-font-size`.",
+ "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-component-top-to-workflow-icon-200": {
+ "value": "9px",
+ "description": "Used by `--spectrum-menu-item-top-to-workflow-icon`.",
+ "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-checkmark-icon-size-200": {
+ "value": "12px",
+ "description": "Used by `--spectrum-menu-item-checkmark-height`, `--spectrum-menu-item-checkmark-width`.",
+ "control": "text",
+ "category": "Global"
+ },
+ "spectrum-chevron-icon-size-200": {
+ "value": "12px",
+ "description": "Used by `--spectrum-menu-item-chevron-height`, `--spectrum-menu-item-chevron-width`.",
+ "control": "text",
+ "category": "Global"
+ },
+ "spectrum-link-out-icon-size-200": {
+ "value": "14px",
+ "description": "Used by `--spectrum-menu-item-linkout-icon-height`, `--spectrum-menu-item-linkout-icon-width`.",
+ "control": "text",
+ "category": "Global"
+ },
+ "spectrum-corner-radius-600": {
+ "value": "9px",
+ "description": "Used by `--spectrum-menu-item-corner-radius`.",
+ "control": "text",
+ "category": "Global"
+ },
+ "spectrum-text-to-visual-300": {
+ "value": "8px",
+ "description": "Used by `--spectrum-menu-item-thumbnail-to-label`, `--spectrum-menu-item-label-text-to-visual`.",
+ "control": "text",
+ "category": "Global"
+ },
+ "spectrum-thumbnail-size-800": {
+ "value": "52px",
+ "description": "Used by `--spectrum-menu-item-thumbnail-height`, `--spectrum-menu-item-thumbnail-width`.",
+ "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-component-edge-to-text-300": {
+ "value": "18px",
+ "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-component-top-to-workflow-icon-300": {
+ "value": "11px",
+ "description": "Used by `--spectrum-menu-item-top-to-workflow-icon`.",
+ "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-checkmark-icon-size-300": {
+ "value": "14px",
+ "description": "Used by `--spectrum-menu-item-checkmark-height`, `--spectrum-menu-item-checkmark-width`.",
+ "control": "text",
+ "category": "Global"
+ },
+ "spectrum-chevron-icon-size-300": {
+ "value": "14px",
+ "description": "Used by `--spectrum-menu-item-chevron-height`, `--spectrum-menu-item-chevron-width`.",
+ "control": "text",
+ "category": "Global"
+ },
+ "spectrum-corner-radius-700": {
+ "value": "10px",
+ "description": "Used by `--spectrum-menu-item-corner-radius`.",
+ "control": "text",
+ "category": "Global"
+ },
+ "spectrum-text-to-visual-400": {
+ "value": "9px",
+ "description": "Used by `--spectrum-menu-item-thumbnail-to-label`.",
+ "control": "text",
+ "category": "Global"
+ },
+ "spectrum-thumbnail-size-900": {
+ "value": "56px",
+ "description": "Used by `--spectrum-menu-item-thumbnail-height`, `--spectrum-menu-item-thumbnail-width`.",
+ "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-downstate-height": {
+ "description": "Used by `.spectrum-Menu-item:active`.",
+ "control": "text",
+ "category": "Global"
+ },
+ "spectrum-downstate-width": {
+ "description": "Used by `.spectrum-Menu-item:active`.",
+ "control": "text",
+ "category": "Global"
+ },
+ "spectrum-component-size-width-ratio-down": {
+ "value": "0.3333",
+ "description": "Used by `.spectrum-Menu-item:active`.",
+ "control": "text",
+ "category": "Global"
+ },
+ "spectrum-component-size-difference-down": {
+ "value": "-2px",
+ "description": "Used by `.spectrum-Menu-item:active`.",
+ "control": "text",
+ "category": "Global"
+ }
+ },
+ "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-background-color-default`, `.spectrum-Menu-item`.
Defaults to `var(--mod-menu-item-background-color-default, var(--spectrum-menu-item-background-color-default))`, 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-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 `.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`, `--highcontrast-menu-item-color-focus`.
Defaults to `var(--mod-menu-back-heading-color, var(--spectrum-menu-section-header-color))`, 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-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-focus-visible, .spectrum-Menu-item:focus-visible`, `.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-focus-visible > .spectrum-Menu-itemLabel, .spectrum-Menu-item:focus-visible > .spectrum-Menu-itemLabel`, `.spectrum-Menu-item.is-focus-visible > .spectrum-Menu-sectionHeading, .spectrum-Menu-item:focus-visible > .spectrum-Menu-sectionHeading`, `.spectrum-Menu-item.is-focus-visible > .spectrum-Menu-itemDescription, .spectrum-Menu-item:focus-visible > .spectrum-Menu-itemDescription`, `.spectrum-Menu-item.is-focus-visible > .spectrum-Menu-itemValue, .spectrum-Menu-item:focus-visible > .spectrum-Menu-itemValue`, `.spectrum-Menu-item.is-focus-visible .spectrum-Menu-linkout, .spectrum-Menu-item.is-focus-visible > .spectrum-Menu-itemIcon:not(.spectrum-Menu-chevron, .spectrum-Menu-checkmark), .spectrum-Menu-item:focus-visible .spectrum-Menu-linkout, .spectrum-Menu-item:focus-visible > .spectrum-Menu-itemIcon:not(.spectrum-Menu-chevron, .spectrum-Menu-checkmark)`, `.spectrum-Menu-item.is-focus-visible > .spectrum-Menu-chevron, .spectrum-Menu-item:focus-visible > .spectrum-Menu-chevron`, `.spectrum-Menu-item.is-focus-visible > .spectrum-Menu-checkmark, .spectrum-Menu-item:focus-visible > .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-linkout, .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-linkout, .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-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-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 `--spectrum-menu-item-background-color-default`, `--highcontrast-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": {
+ "value": "SelectedItemText",
+ "description": "Defined in `.spectrum-Menu`.
Used by `--highcontrast-menu-item-color-default`.
Defaults to `SelectedItemText`, if not set.",
+ "control": "color"
+ },
+ "highcontrast-checkbox-highlight-color-hover": {
+ "value": "ButtonText",
+ "description": "Defined in `.spectrum-Menu .spectrum-Menu-item:focus .spectrum-Menu-itemCheckbox`, `.spectrum-Menu .spectrum-Menu-item:hover .spectrum-Menu-itemCheckbox`.
Defaults to `ButtonText`, if not set.",
+ "control": "color"
+ },
+ "highcontrast-checkbox-highlight-color-default": {
+ "value": "ButtonText",
+ "description": "Defined in `.spectrum-Menu .spectrum-Menu-item:focus .spectrum-Menu-itemCheckbox`, `.spectrum-Menu .spectrum-Menu-item:hover .spectrum-Menu-itemCheckbox`.
Defaults to `ButtonText`, if not set.",
+ "control": "color"
+ },
+ "highcontrast-switch-handle-border-color-hover": {
+ "value": "ButtonText",
+ "description": "Defined in `.spectrum-Menu .spectrum-Menu-item:focus .spectrum-Menu-itemSwitch`, `.spectrum-Menu .spectrum-Menu-item:hover .spectrum-Menu-itemSwitch`.
Defaults to `ButtonText`, if not set.",
+ "control": "color"
+ },
+ "highcontrast-switch-handle-border-color-selected-default": {
+ "value": "ButtonText",
+ "description": "Defined in `.spectrum-Menu .spectrum-Menu-item:focus .spectrum-Menu-itemSwitch`, `.spectrum-Menu .spectrum-Menu-item:hover .spectrum-Menu-itemSwitch`.
Defaults to `ButtonText`, if not set.",
+ "control": "color"
+ },
+ "highcontrast-switch-handle-border-color-selected-hover": {
+ "value": "ButtonText",
+ "description": "Defined in `.spectrum-Menu .spectrum-Menu-item:focus .spectrum-Menu-itemSwitch`, `.spectrum-Menu .spectrum-Menu-item:hover .spectrum-Menu-itemSwitch`.
Defaults to `ButtonText`, if not set.",
+ "control": "color"
+ },
+ "highcontrast-switch-background-color-selected-default": {
+ "value": "ButtonText",
+ "description": "Defined in `.spectrum-Menu .spectrum-Menu-item:focus .spectrum-Menu-itemSwitch`, `.spectrum-Menu .spectrum-Menu-item:hover .spectrum-Menu-itemSwitch`.
Defaults to `ButtonText`, if not set.",
+ "control": "color"
+ },
+ "highcontrast-switch-background-color-selected-hover": {
+ "value": "ButtonText",
+ "description": "Defined in `.spectrum-Menu .spectrum-Menu-item:focus .spectrum-Menu-itemSwitch`, `.spectrum-Menu .spectrum-Menu-item:hover .spectrum-Menu-itemSwitch`.
Defaults to `ButtonText`, if not set.",
+ "control": "color"
+ }
+ }
}
diff --git a/components/menu/stories/menu.stories.js b/components/menu/stories/menu.stories.js
index 75bda11d395..c78e8f5f2b3 100644
--- a/components/menu/stories/menu.stories.js
+++ b/components/menu/stories/menu.stories.js
@@ -12,8 +12,6 @@ import {
isSelected,
size,
} from "@spectrum-css/preview/types";
-import metadata from "../dist/metadata.json";
-import packageJson from "../package.json";
import {
MenuItemGroup,
MenuTraySubmenu,
@@ -27,6 +25,10 @@ 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 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.
@@ -115,6 +117,10 @@ export default {
status: {
type: "migrated",
},
+ cssprops: {
+ ...metadata.modifiers,
+ ...metadata.component,
+ },
},
decorators: [withDownStateDimensionCapture],
tags: ["migrated"],
diff --git a/components/menu/stories/template.js b/components/menu/stories/template.js
index 2415b816acf..5c052df4c96 100644
--- a/components/menu/stories/template.js
+++ b/components/menu/stories/template.js
@@ -8,7 +8,7 @@ import { Template as Thumbnail } from "@spectrum-css/thumbnail/stories/template.
import { Template as Tray } from "@spectrum-css/tray/stories/template.js";
import { Container, getRandomId } from "@spectrum-css/preview/decorators";
-import { html } from "lit";
+import { html, nothing } 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";
@@ -41,24 +41,18 @@ const Label = ({
}) => {
if (isCollapsible) {
return html`
- ${label}
- `;
- }
- else {
- return html`
- ${label}
- `;
+ class=${classMap({
+ ["spectrum-Menu-sectionHeading"]: true,
+ [`${rootClass}Label--truncate`]: shouldTruncate,
+ })}
+ >${label}`;
}
+ return html`${label}`;
};
const Visual = ({
@@ -106,9 +100,8 @@ const StartAction = ({
rootClass,
selectionMode,
size,
- context
-}) => {
- if (isUnavailable) return null;
+} = {}, context = {}) => {
+ if (isUnavailable) return nothing;
if (isCollapsible || (selectionMode == "single" && isSelected)) {
return html`
@@ -141,7 +134,7 @@ const StartAction = ({
},
context)}`;
}
- return null;
+ return nothing;
};
const EndAction = ({
@@ -156,8 +149,7 @@ const EndAction = ({
selectionMode,
size,
value,
- context
-}) => html`
+} = {}, context = {}) => html`
${when(value, () => html`
- ${StartAction({ hasActions, idx, isCollapsible, isDisabled, isSelected, isUnavailable, rootClass, selectionMode, size, context })}
+ ${StartAction({ hasActions, idx, isCollapsible, isDisabled, isSelected, isUnavailable, rootClass, selectionMode, size }, context)}
${Visual({ iconName, iconSet, rootClass, size, thumbnailUrl, hasExternalLink, isDrillIn })}
${Label({ hasActions, isCollapsible, label, rootClass, shouldTruncate })}
${when(description, () => Description({ description, rootClass }))}
- ${EndAction({ hasExternalLink, hasActions, idx, isUnavailable, isDisabled, isDrillIn, isSelected, rootClass, selectionMode, size, value, context })}
+ ${EndAction({ hasExternalLink, hasActions, idx, isUnavailable, isDisabled, isDrillIn, isSelected, rootClass, selectionMode, size, value }, context)}
${when(isCollapsible && items.length > 0, () =>
Template(
{
@@ -343,7 +335,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 53ce94ace9a..ef811bf1ac0 100644
--- a/components/meter/dist/metadata.json
+++ b/components/meter/dist/metadata.json
@@ -10,31 +10,106 @@
".spectrum-Meter.spectrum-Meter--sizeS",
".spectrum-Meter.spectrum-Meter--sizeXL"
],
- "modifiers": [
- "--mod-meter-help-text-to-progress-bar",
- "--mod-meter-max-width",
- "--mod-meter-min-width"
- ],
- "component": [
- "--spectrum-meter-help-text-to-progress-bar",
- "--spectrum-meter-maximum-width",
- "--spectrum-meter-minimum-width",
- "--spectrum-meter-thickness-extra-large",
- "--spectrum-meter-thickness-large",
- "--spectrum-meter-thickness-medium",
- "--spectrum-meter-thickness-small"
- ],
- "global": [
- "--spectrum-negative-visual-color",
- "--spectrum-notice-visual-color",
- "--spectrum-positive-visual-color",
- "--spectrum-spacing-75"
- ],
- "passthroughs": [
- "--mod-progressbar-fill-color",
- "--mod-progressbar-max-size",
- "--mod-progressbar-min-size",
- "--mod-progressbar-thickness"
- ],
- "high-contrast": []
+ "modifiers": {
+ "mod-meter-max-width": {
+ "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": {
+ "description": "Used by `--mod-progressbar-min-size`.
Defaults to `var(--spectrum-meter-minimum-width)`, if not set.",
+ "control": "text",
+ "category": "Modifier"
+ },
+ "mod-meter-help-text-to-progress-bar": {
+ "description": "Used by `.spectrum-Meter .spectrum-ProgressBar-helptext`.
Defaults to `var(--spectrum-meter-help-text-to-progress-bar)`, if not set.",
+ "control": "text",
+ "category": "Modifier"
+ }
+ },
+ "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-help-text-to-progress-bar": {
+ "value": "4px",
+ "description": "Defined in `.spectrum-Meter`.
Used by `.spectrum-Meter .spectrum-ProgressBar-helptext`.
Defaults to `var(--spectrum-spacing-75)`, if not set.",
+ "control": "text",
+ "category": "Component"
+ },
+ "spectrum-meter-thickness-medium": {
+ "value": "6px",
+ "description": "Used by `--mod-progressbar-thickness`.",
+ "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": "8px",
+ "description": "Used by `--mod-progressbar-thickness`.",
+ "control": "text",
+ "category": "Component"
+ },
+ "spectrum-meter-thickness-extra-large": {
+ "value": "10px",
+ "description": "Used by `--mod-progressbar-thickness`.",
+ "control": "text",
+ "category": "Component"
+ }
+ },
+ "global": {
+ "spectrum-spacing-75": {
+ "value": "4px",
+ "description": "Used by `--spectrum-meter-help-text-to-progress-bar`.",
+ "control": "text",
+ "category": "Global"
+ },
+ "spectrum-positive-visual-color": {
+ "value": "var(--spectrum-positive-color-800)",
+ "description": "Used by `--mod-progressbar-fill-color`.",
+ "control": "color",
+ "category": "Global"
+ },
+ "spectrum-notice-visual-color": {
+ "value": "var(--spectrum-notice-color-800)",
+ "description": "Used by `--mod-progressbar-fill-color`.",
+ "control": "color",
+ "category": "Global"
+ },
+ "spectrum-negative-visual-color": {
+ "value": "var(--spectrum-negative-color-800)",
+ "description": "Used by `--mod-progressbar-fill-color`.",
+ "control": "color",
+ "category": "Global"
+ }
+ },
+ "passthroughs": {
+ "mod-progressbar-max-size": {
+ "category": "Passthrough"
+ },
+ "mod-progressbar-min-size": {
+ "category": "Passthrough"
+ },
+ "mod-progressbar-thickness": {
+ "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 f86cbad0dcd..c67d3e54e53 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, staticColor } 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 representation of a quantity or an achievement. The progress is determined by user actions, rather than system actions.
*
@@ -61,6 +63,10 @@ export default {
status: {
type: "migrated",
},
+ cssprops: {
+ ...metadata.modifiers,
+ ...metadata.component,
+ },
},
tags: ["migrated"],
};
diff --git a/components/miller/dist/metadata.json b/components/miller/dist/metadata.json
index fbb3770d558..21ed8ef8fc6 100644
--- a/components/miller/dist/metadata.json
+++ b/components/miller/dist/metadata.json
@@ -5,14 +5,37 @@
".spectrum-MillerColumns-item",
".spectrum-MillerColumns-item:first-child"
],
- "modifiers": [
- "--mod-millercolumns-inline-size",
- "--mod-millercolumns-margin-inline-end",
- "--mod-millercolumns-margin-inline-start",
- "--mod-millercolumns-padding"
- ],
- "component": [],
- "global": ["--spectrum-spacing-100"],
- "passthroughs": [],
- "high-contrast": []
+ "modifiers": {
+ "mod-millercolumns-padding": {
+ "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": {
+ "description": "Used by `.spectrum-MillerColumns-item`.
Defaults to `var(--spectrum-spacing-100)`, if not set.",
+ "control": "text",
+ "category": "Modifier"
+ },
+ "mod-millercolumns-margin-inline-start": {
+ "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"
+ }
+ },
+ "passthroughs": {},
+ "high-contrast": {}
}
diff --git a/components/miller/stories/miller.stories.js b/components/miller/stories/miller.stories.js
index a255362e891..54ba1f1ea83 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,10 @@ export default {
parameters: {
packageJson,
metadata,
+ cssprops: {
+ ...metadata.modifiers,
+ ...metadata.component,
+ },
},
};
diff --git a/components/modal/dist/metadata.json b/components/modal/dist/metadata.json
index c27c44872d7..662f06244b4 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-duration",
- "--mod-modal-confirm-exit-animation-delay",
- "--mod-modal-confirm-exit-animation-duration",
- "--mod-modal-fullscreen-margin",
- "--mod-modal-max-height",
- "--mod-modal-max-width",
- "--mod-modal-transition-animation-duration"
- ],
- "component": [
- "--spectrum-modal-background-color",
- "--spectrum-modal-confirm-border-radius",
- "--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",
- "--spectrum-modal-max-height",
- "--spectrum-modal-max-width",
- "--spectrum-modal-takeover-window-to-edge",
- "--spectrum-modal-transition-animation-duration"
- ],
- "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-corner-radius-extra-large-default",
- "--spectrum-dialog-confirm-entry-animation-distance",
- "--spectrum-window-to-edge"
- ],
- "passthroughs": [],
- "high-contrast": []
+ "modifiers": {
+ "mod-modal-confirm-entry-animation-duration": {
+ "description": "Used by `--spectrum-modal-confirm-entry-animation-duration`.
Defaults to `var(--spectrum-animation-duration-500)`, if not set.",
+ "control": "text",
+ "category": "Modifier"
+ },
+ "mod-modal-confirm-entry-animation-delay": {
+ "description": "Used by `--spectrum-modal-confirm-entry-animation-delay`.
Defaults to `var(--spectrum-animation-duration-200)`, if not set.",
+ "control": "text",
+ "category": "Modifier"
+ },
+ "mod-modal-confirm-exit-animation-duration": {
+ "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": {
+ "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-background-color": {
+ "description": "Used by `--spectrum-modal-background-color`.",
+ "control": "color",
+ "category": "Modifier"
+ },
+ "mod-modal-confirm-border-radius": {
+ "description": "Used by `--spectrum-modal-confirm-border-radius`.
Defaults to `var(--spectrum-corner-radius-extra-large-default)`, if not set.",
+ "control": "text",
+ "category": "Modifier"
+ },
+ "mod-modal-transition-animation-duration": {
+ "description": "Used by `--spectrum-modal-transition-animation-duration`.
Defaults to `var(--spectrum-animation-duration-100)`, if not set.",
+ "control": "text",
+ "category": "Modifier"
+ },
+ "mod-modal-max-height": {
+ "description": "Used by `.spectrum-Modal`.
Defaults to `var(--spectrum-modal-max-height)`, if not set.",
+ "control": "text",
+ "category": "Modifier"
+ },
+ "mod-modal-max-width": {
+ "description": "Used by `.spectrum-Modal`.
Defaults to `var(--spectrum-modal-max-width)`, if not set.",
+ "control": "text",
+ "category": "Modifier"
+ },
+ "mod-modal-fullscreen-margin": {
+ "description": "Used by `.spectrum-Modal--fullscreen`.
Defaults to `var(--spectrum-modal-fullscreen-margin)`, if not set.",
+ "control": "text",
+ "category": "Modifier"
+ }
+ },
+ "component": {
+ "spectrum-modal-confirm-entry-animation-duration": {
+ "value": "var(--mod-modal-confirm-entry-animation-duration, var(--spectrum-animation-duration-500))",
+ "description": "Defined in `.spectrum-Modal`.
Used by `.spectrum-Modal.is-open`.
Defaults to `var(--mod-modal-confirm-entry-animation-duration, var(--spectrum-animation-duration-500))`, if not set.",
+ "control": "text",
+ "category": "Component"
+ },
+ "spectrum-modal-confirm-entry-animation-delay": {
+ "value": "var(--mod-modal-confirm-entry-animation-delay, var(--spectrum-animation-duration-200))",
+ "description": "Defined in `.spectrum-Modal`.
Used by `.spectrum-Modal.is-open`.
Defaults to `var(--mod-modal-confirm-entry-animation-delay, var(--spectrum-animation-duration-200))`, if not set.",
+ "control": "text",
+ "category": "Component"
+ },
+ "spectrum-modal-confirm-exit-animation-duration": {
+ "value": "var(--mod-modal-confirm-exit-animation-duration, var(--spectrum-animation-duration-100))",
+ "description": "Defined in `.spectrum-Modal`.
Used by `.spectrum-Modal`.
Defaults to `var(--mod-modal-confirm-exit-animation-duration, var(--spectrum-animation-duration-100))`, if not set.",
+ "control": "text",
+ "category": "Component"
+ },
+ "spectrum-modal-confirm-exit-animation-delay": {
+ "value": "var(--mod-modal-confirm-exit-animation-delay, var(--spectrum-animation-duration-0))",
+ "description": "Defined in `.spectrum-Modal`.
Used by `.spectrum-Modal`.
Defaults to `var(--mod-modal-confirm-exit-animation-delay, var(--spectrum-animation-duration-0))`, if not set.",
+ "control": "text",
+ "category": "Component"
+ },
+ "spectrum-modal-fullscreen-margin": {
+ "value": "40px",
+ "description": "Defined in `.spectrum-Modal`.
Used by `.spectrum-Modal--fullscreen`.
Defaults to `var(--spectrum-window-to-edge)`, if not set.",
+ "control": "text",
+ "category": "Component"
+ },
+ "spectrum-modal-takeover-window-to-edge": {
+ "value": "0",
+ "description": "Defined in `.spectrum-Modal`.
Used by `.spectrum-Modal--fullscreenTakeover`.
Defaults to `0`, if not set.",
+ "control": "text",
+ "category": "Component"
+ },
+ "spectrum-modal-max-height": {
+ "value": "90vh",
+ "description": "Defined in `.spectrum-Modal`.
Used by `.spectrum-Modal`.
Defaults to `90vh`, if not set.",
+ "control": "text",
+ "category": "Component"
+ },
+ "spectrum-modal-max-width": {
+ "value": "90%",
+ "description": "Defined in `.spectrum-Modal`.
Used by `.spectrum-Modal`.
Defaults to `90%`, if not set.",
+ "control": "text",
+ "category": "Component"
+ },
+ "spectrum-modal-background-color": {
+ "value": "var(--mod-modal-background-color, transparent)",
+ "description": "Defined in `.spectrum-Modal`.
Used by `.spectrum-Modal`.
Defaults to `var(--mod-modal-background-color, transparent)`, if not set.",
+ "control": "color",
+ "category": "Component"
+ },
+ "spectrum-modal-confirm-border-radius": {
+ "value": "var(--mod-modal-confirm-border-radius, var(--spectrum-corner-radius-extra-large-default))",
+ "description": "Defined in `.spectrum-Modal`.
Used by `.spectrum-Modal`.
Defaults to `var(--mod-modal-confirm-border-radius, var(--spectrum-corner-radius-extra-large-default))`, if not set.",
+ "control": "text",
+ "category": "Component"
+ },
+ "spectrum-modal-transition-animation-duration": {
+ "value": "var(--mod-modal-transition-animation-duration, var(--spectrum-animation-duration-100))",
+ "description": "Defined in `.spectrum-Modal`.
Used by `.spectrum-Modal-wrapper`.
Defaults to `var(--mod-modal-transition-animation-duration, var(--spectrum-animation-duration-100))`, if not set.",
+ "control": "text",
+ "category": "Component"
+ }
+ },
+ "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-transition-animation-duration`.",
+ "control": "text",
+ "category": "Global"
+ },
+ "spectrum-animation-duration-0": {
+ "description": "Used by `--spectrum-modal-confirm-exit-animation-delay`.",
+ "control": "text",
+ "category": "Global"
+ },
+ "spectrum-window-to-edge": {
+ "value": "40px",
+ "description": "Used by `--spectrum-modal-fullscreen-margin`.",
+ "control": "text",
+ "category": "Global"
+ },
+ "spectrum-corner-radius-extra-large-default": {
+ "value": "16px",
+ "description": "Used by `--spectrum-modal-confirm-border-radius`.",
+ "control": "text",
+ "category": "Global"
+ },
+ "spectrum-dialog-confirm-entry-animation-distance": {
+ "description": "Used by `.spectrum-Modal`.",
+ "control": "text",
+ "category": "Global"
+ },
+ "spectrum-animation-ease-in": {
+ "description": "Used by `.spectrum-Modal`.",
+ "control": "text",
+ "category": "Global"
+ },
+ "spectrum-animation-ease-out": {
+ "description": "Used by `.spectrum-Modal.is-open`.",
+ "control": "text",
+ "category": "Global"
+ }
+ },
+ "passthroughs": {},
+ "high-contrast": {}
}
diff --git a/components/modal/stories/modal.stories.js b/components/modal/stories/modal.stories.js
index 560f5663e43..332bb426fb8 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,10 @@ export default {
},
packageJson,
metadata,
+ cssprops: {
+ ...metadata.modifiers,
+ ...metadata.component,
+ },
},
decorators: [
withUnderlayWrapper,
diff --git a/components/opacitycheckerboard/dist/metadata.json b/components/opacitycheckerboard/dist/metadata.json
index 31fd76317b9..7450c952657 100644
--- a/components/opacitycheckerboard/dist/metadata.json
+++ b/components/opacitycheckerboard/dist/metadata.json
@@ -4,23 +4,79 @@
".spectrum-OpacityCheckerboard",
".spectrum-OpacityCheckerboard--sizeS"
],
- "modifiers": [
- "--mod-opacity-checkerboard-dark",
- "--mod-opacity-checkerboard-light",
- "--mod-opacity-checkerboard-position",
- "--mod-opacity-checkerboard-size"
- ],
- "component": [
- "--spectrum-opacity-checkerboard-dark",
- "--spectrum-opacity-checkerboard-light",
- "--spectrum-opacity-checkerboard-position",
- "--spectrum-opacity-checkerboard-size",
- "--spectrum-opacity-checkerboard-square-dark",
- "--spectrum-opacity-checkerboard-square-light",
- "--spectrum-opacity-checkerboard-square-size-medium",
- "--spectrum-opacity-checkerboard-square-size-small"
- ],
- "global": [],
- "passthroughs": [],
- "high-contrast": []
+ "modifiers": {
+ "mod-opacity-checkerboard-dark": {
+ "description": "Used by `--spectrum-opacity-checkerboard-dark`.
Defaults to `var(--spectrum-opacity-checkerboard-square-dark)`, if not set.",
+ "control": "text",
+ "category": "Modifier"
+ },
+ "mod-opacity-checkerboard-light": {
+ "description": "Used by `--spectrum-opacity-checkerboard-light`.
Defaults to `var(--spectrum-opacity-checkerboard-square-light)`, if not set.",
+ "control": "text",
+ "category": "Modifier"
+ },
+ "mod-opacity-checkerboard-size": {
+ "description": "Used by `--spectrum-opacity-checkerboard-size`.
Defaults to `var(--spectrum-opacity-checkerboard-square-size-small)`, if not set.",
+ "control": "text",
+ "category": "Modifier"
+ },
+ "mod-opacity-checkerboard-position": {
+ "description": "Used by `--spectrum-opacity-checkerboard-position`.",
+ "control": "text",
+ "category": "Modifier"
+ }
+ },
+ "component": {
+ "spectrum-opacity-checkerboard-dark": {
+ "value": "var(--mod-opacity-checkerboard-dark, var(--spectrum-opacity-checkerboard-square-dark))",
+ "description": "Defined in `.spectrum-OpacityCheckerboard`.
Used by `.spectrum-OpacityCheckerboard`.
Defaults to `var(--mod-opacity-checkerboard-dark, var(--spectrum-opacity-checkerboard-square-dark))`, if not set.",
+ "control": "text",
+ "category": "Component"
+ },
+ "spectrum-opacity-checkerboard-square-dark": {
+ "value": "var(--spectrum-gray-200)",
+ "description": "Used by `--spectrum-opacity-checkerboard-dark`.",
+ "control": "text",
+ "category": "Component"
+ },
+ "spectrum-opacity-checkerboard-light": {
+ "value": "var(--mod-opacity-checkerboard-light, var(--spectrum-opacity-checkerboard-square-light))",
+ "description": "Defined in `.spectrum-OpacityCheckerboard`.
Used by `.spectrum-OpacityCheckerboard`.
Defaults to `var(--mod-opacity-checkerboard-light, var(--spectrum-opacity-checkerboard-square-light))`, if not set.",
+ "control": "text",
+ "category": "Component"
+ },
+ "spectrum-opacity-checkerboard-square-light": {
+ "value": "rgb(255, 255, 255)",
+ "description": "Used by `--spectrum-opacity-checkerboard-light`.",
+ "control": "text",
+ "category": "Component"
+ },
+ "spectrum-opacity-checkerboard-size": {
+ "value": "var(--mod-opacity-checkerboard-size, var(--spectrum-opacity-checkerboard-square-size-small))",
+ "description": "Defined in `.spectrum-OpacityCheckerboard`, `.spectrum-OpacityCheckerboard--sizeS`.
Used by `.spectrum-OpacityCheckerboard`.
Defaults to `var(--mod-opacity-checkerboard-size, var(--spectrum-opacity-checkerboard-square-size-small))`, if not set.",
+ "control": "text",
+ "category": "Component"
+ },
+ "spectrum-opacity-checkerboard-square-size-medium": {
+ "value": "8px",
+ "description": "Used by `--spectrum-opacity-checkerboard-size`.",
+ "control": "text",
+ "category": "Component"
+ },
+ "spectrum-opacity-checkerboard-position": {
+ "value": "var(--mod-opacity-checkerboard-position, left top)",
+ "description": "Defined in `.spectrum-OpacityCheckerboard`.
Used by `.spectrum-OpacityCheckerboard`.
Defaults to `var(--mod-opacity-checkerboard-position, left top)`, if not set.",
+ "control": "text",
+ "category": "Component"
+ },
+ "spectrum-opacity-checkerboard-square-size-small": {
+ "value": "4px",
+ "description": "Used by `--spectrum-opacity-checkerboard-size`.",
+ "control": "text",
+ "category": "Component"
+ }
+ },
+ "global": {},
+ "passthroughs": {},
+ "high-contrast": {}
}
diff --git a/components/opacitycheckerboard/stories/opacitycheckerboard.stories.js b/components/opacitycheckerboard/stories/opacitycheckerboard.stories.js
index b37b326429a..03658377824 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.
*/
@@ -45,6 +47,10 @@ export default {
status: {
type: "migrated",
},
+ cssprops: {
+ ...metadata.modifiers,
+ ...metadata.component,
+ },
},
tags: ["migrated"],
};
diff --git a/components/page/dist/metadata.json b/components/page/dist/metadata.json
index 4e3ac035552..9a34f110366 100644
--- a/components/page/dist/metadata.json
+++ b/components/page/dist/metadata.json
@@ -1,12 +1,46 @@
{
"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"],
- "passthroughs": [],
- "high-contrast": []
+ "modifiers": {
+ "mod-page-background": {
+ "description": "Used by `--spectrum-page-background-color`.
Defaults to `var(--spectrum-gray-75)`, if not set.",
+ "control": "text",
+ "category": "Modifier"
+ },
+ "mod-page-content-tap-highlight": {
+ "description": "Used by `--spectrum-page-content-tap-highlight`.
Defaults to `var(--spectrum-transparent-black-25)`, if not set.",
+ "control": "text",
+ "category": "Modifier"
+ }
+ },
+ "component": {
+ "spectrum-page-background-color": {
+ "value": "var(--mod-page-background, var(--spectrum-gray-75))",
+ "description": "Defined in `:root`.
Used by `:root`.
Defaults to `var(--mod-page-background, var(--spectrum-gray-75))`, if not set.",
+ "control": "color",
+ "category": "Component"
+ },
+ "spectrum-page-content-tap-highlight": {
+ "value": "var(--mod-page-content-tap-highlight, var(--spectrum-transparent-black-25))",
+ "description": "Defined in `:root`.
Used by `:root`.
Defaults to `var(--mod-page-content-tap-highlight, var(--spectrum-transparent-black-25))`, if not set.",
+ "control": "text",
+ "category": "Component"
+ }
+ },
+ "global": {
+ "spectrum-gray-75": {
+ "value": "light-dark(rgb(243, 243, 243), rgb(34, 34, 34))",
+ "description": "Used by `--spectrum-page-background-color`.",
+ "control": "text",
+ "category": "Global"
+ },
+ "spectrum-transparent-black-25": {
+ "value": "rgba(0, 0, 0, 0)",
+ "description": "Used by `--spectrum-page-content-tap-highlight`.",
+ "control": "text",
+ "category": "Global"
+ }
+ },
+ "passthroughs": {},
+ "high-contrast": {}
}
diff --git a/components/page/stories/page.stories.js b/components/page/stories/page.stories.js
index 7327742970b..2cb3c15707e 100644
--- a/components/page/stories/page.stories.js
+++ b/components/page/stories/page.stories.js
@@ -25,6 +25,10 @@ export default {
},
packageJson,
metadata,
+ cssprops: {
+ ...metadata.modifiers,
+ ...metadata.component,
+ },
},
tags: ["!autodocs", "!dev"]
};
diff --git a/components/pagination/dist/metadata.json b/components/pagination/dist/metadata.json
index 6c52ad62e8c..dc3f959fd5d 100644
--- a/components/pagination/dist/metadata.json
+++ b/components/pagination/dist/metadata.json
@@ -12,27 +12,102 @@
".spectrum-Pagination-textfield",
".spectrum-Pagination:dir(rtl)"
],
- "modifiers": [
- "--mod-pagination-counter-color",
- "--mod-pagination-counter-font-size",
- "--mod-pagination-counter-line-height",
- "--mod-pagination-page-button-inline-spacing",
- "--mod-pagination-textfield-width"
- ],
- "component": [
- "--spectrum-pagination-counter-color",
- "--spectrum-pagination-counter-font-size",
- "--spectrum-pagination-counter-inline-spacing",
- "--spectrum-pagination-counter-line-height",
- "--spectrum-pagination-item-inline-spacing",
- "--spectrum-pagination-textfield-width"
- ],
- "global": [
- "--spectrum-font-size-100",
- "--spectrum-line-height-100",
- "--spectrum-logical-rotation",
- "--spectrum-neutral-subdued-content-color-default"
- ],
- "passthroughs": ["--mod-textfield-min-width", "--mod-textfield-width"],
- "high-contrast": []
+ "modifiers": {
+ "mod-pagination-counter-color": {
+ "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": {
+ "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": {
+ "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": {
+ "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": {
+ "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": {
+ "value": "var(--mod-pagination-counter-color, var(--spectrum-neutral-subdued-content-color-default))",
+ "description": "Defined in `.spectrum-Pagination`.
Used by `.spectrum-Pagination-counter`.
Defaults to `var(--mod-pagination-counter-color, var(--spectrum-neutral-subdued-content-color-default))`, if not set.",
+ "control": "color",
+ "category": "Component"
+ },
+ "spectrum-pagination-counter-font-size": {
+ "value": "var(--mod-pagination-counter-font-size, var(--spectrum-font-size-100))",
+ "description": "Defined in `.spectrum-Pagination`.
Used by `.spectrum-Pagination-counter`.
Defaults to `var(--mod-pagination-counter-font-size, var(--spectrum-font-size-100))`, if not set.",
+ "control": "text",
+ "category": "Component"
+ },
+ "spectrum-pagination-counter-line-height": {
+ "value": "var(--mod-pagination-counter-line-height, var(--spectrum-line-height-100))",
+ "description": "Defined in `.spectrum-Pagination`.
Used by `.spectrum-Pagination-counter`.
Defaults to `var(--mod-pagination-counter-line-height, var(--spectrum-line-height-100))`, if not set.",
+ "control": "text",
+ "category": "Component"
+ },
+ "spectrum-pagination-counter-inline-spacing": {
+ "value": "var(--mod-pagination-page-button-inline-spacing, var(--spectrum-pagination-item-inline-spacing))",
+ "description": "Defined in `.spectrum-Pagination`.
Used by `.spectrum-Pagination-counter, .spectrum-Pagination-nextButton`, `.spectrum-Pagination-prevButton`.
Defaults to `var(--mod-pagination-page-button-inline-spacing, var(--spectrum-pagination-item-inline-spacing))`, if not set.",
+ "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": {
+ "value": "matrix(-1, 0, 0, 1, 0, 0)",
+ "description": "Defined in `.spectrum-Pagination:dir(rtl)`.
Used by `.spectrum-Pagination-nextButton .spectrum-Icon`, `.spectrum-Pagination-prevButton .spectrum-Icon`.
Defaults to `matrix(-1, 0, 0, 1, 0, 0)`, if not set.",
+ "control": "text",
+ "category": "Global"
+ }
+ },
+ "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 1ce2bc1f1bc..7b2040244e9 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,9 +72,7 @@ export default {
},
packageJson,
metadata,
- status: {
- type: "migrated",
- },
+ cssprops: metadata.modifiers,
},
tags: ["migrated"],
};
diff --git a/components/picker/dist/metadata.json b/components/picker/dist/metadata.json
index bde45fd599a..499ba40f8f5 100644
--- a/components/picker/dist/metadata.json
+++ b/components/picker/dist/metadata.json
@@ -7,9 +7,9 @@
".spectrum-Picker .spectrum-ProgressCircle",
".spectrum-Picker--quiet",
".spectrum-Picker--quiet .spectrum-Picker-button",
- ".spectrum-Picker--quiet .spectrum-Picker-button.is-keyboardFocused:after",
".spectrum-Picker--quiet .spectrum-Picker-button:after",
".spectrum-Picker--quiet .spectrum-Picker-button:focus-visible:after",
+ ".spectrum-Picker--quiet .spectrum-Picker-button.is-keyboardFocused:after",
".spectrum-Picker--quiet.spectrum-Picker--sideLabel",
".spectrum-Picker--quiet.spectrum-Picker--sideLabel .spectrum-Picker-button",
".spectrum-Picker--sideLabel",
@@ -17,20 +17,37 @@
".spectrum-Picker--sizeS",
".spectrum-Picker--sizeXL",
".spectrum-Picker-button",
+ ".spectrum-Picker-button::-moz-focus-inner",
+ ".spectrum-Picker-button:active",
+ ".spectrum-Picker-button:active .spectrum-Picker-label.is-placeholder",
+ ".spectrum-Picker-button:active:after",
+ ".spectrum-Picker-button:disabled",
+ ".spectrum-Picker-button:disabled .spectrum-Picker-icon",
+ ".spectrum-Picker-button:disabled .spectrum-Picker-label.is-placeholder",
+ ".spectrum-Picker-button:disabled .spectrum-Picker-menuIcon",
+ ".spectrum-Picker-button:disabled .spectrum-Picker-validationIcon",
+ ".spectrum-Picker-button:disabled:not(.spectrum-Picker--quiet)",
+ ".spectrum-Picker-button:focus",
+ ".spectrum-Picker-button:focus-visible",
+ ".spectrum-Picker-button:focus-visible .spectrum-Picker-label.is-placeholder",
+ ".spectrum-Picker-button:focus-visible .spectrum-Picker-menuIcon",
+ ".spectrum-Picker-button:focus-visible:after",
+ ".spectrum-Picker-button:hover",
+ ".spectrum-Picker-button:hover .spectrum-Picker-menuIcon",
".spectrum-Picker-button.is-disabled",
".spectrum-Picker-button.is-disabled .spectrum-Picker-icon",
".spectrum-Picker-button.is-disabled .spectrum-Picker-label.is-placeholder",
".spectrum-Picker-button.is-disabled .spectrum-Picker-menuIcon",
".spectrum-Picker-button.is-disabled .spectrum-Picker-validationIcon",
".spectrum-Picker-button.is-disabled:not(.spectrum-Picker--quiet)",
- ".spectrum-Picker-button.is-invalid.is-keyboardFocused:not(:disabled, .is-disabled)",
- ".spectrum-Picker-button.is-invalid.is-open:not(:disabled, .is-disabled)",
- ".spectrum-Picker-button.is-invalid.is-open:not(:disabled, .is-disabled):hover",
".spectrum-Picker-button.is-invalid:not(:disabled, .is-disabled)",
".spectrum-Picker-button.is-invalid:not(:disabled, .is-disabled) .spectrum-Picker-validationIcon",
".spectrum-Picker-button.is-invalid:not(:disabled, .is-disabled):active",
".spectrum-Picker-button.is-invalid:not(:disabled, .is-disabled):focus-visible",
".spectrum-Picker-button.is-invalid:not(:disabled, .is-disabled):hover",
+ ".spectrum-Picker-button.is-invalid.is-keyboardFocused:not(:disabled, .is-disabled)",
+ ".spectrum-Picker-button.is-invalid.is-open:not(:disabled, .is-disabled)",
+ ".spectrum-Picker-button.is-invalid.is-open:not(:disabled, .is-disabled):hover",
".spectrum-Picker-button.is-keyboardFocused",
".spectrum-Picker-button.is-keyboardFocused .spectrum-Picker-label.is-placeholder",
".spectrum-Picker-button.is-keyboardFocused .spectrum-Picker-menuIcon",
@@ -39,23 +56,6 @@
".spectrum-Picker-button.is-open:not(.spectrum-Picker--quiet, :disabled, .is-disabled, .is-loading) .spectrum-Picker-menuIcon",
".spectrum-Picker-button.is-open:not(.spectrum-Picker--quiet, :disabled, .is-disabled, .is-loading):hover",
".spectrum-Picker-button.is-open:not(.spectrum-Picker--quiet, :disabled, .is-disabled, .is-loading):hover .spectrum-Picker-menuIcon",
- ".spectrum-Picker-button::-moz-focus-inner",
- ".spectrum-Picker-button:active",
- ".spectrum-Picker-button:active .spectrum-Picker-label.is-placeholder",
- ".spectrum-Picker-button:active:after",
- ".spectrum-Picker-button:disabled",
- ".spectrum-Picker-button:disabled .spectrum-Picker-icon",
- ".spectrum-Picker-button:disabled .spectrum-Picker-label.is-placeholder",
- ".spectrum-Picker-button:disabled .spectrum-Picker-menuIcon",
- ".spectrum-Picker-button:disabled .spectrum-Picker-validationIcon",
- ".spectrum-Picker-button:disabled:not(.spectrum-Picker--quiet)",
- ".spectrum-Picker-button:focus",
- ".spectrum-Picker-button:focus-visible",
- ".spectrum-Picker-button:focus-visible .spectrum-Picker-label.is-placeholder",
- ".spectrum-Picker-button:focus-visible .spectrum-Picker-menuIcon",
- ".spectrum-Picker-button:focus-visible:after",
- ".spectrum-Picker-button:hover",
- ".spectrum-Picker-button:hover .spectrum-Picker-menuIcon",
".spectrum-Picker-label",
".spectrum-Picker-label.is-placeholder",
".spectrum-Picker-label.is-placeholder:active",
@@ -63,255 +63,1327 @@
".spectrum-Picker-menuIcon",
".spectrum-Picker-menuIcon:active",
".spectrum-Picker-validationIcon",
- ".spectrum-Picker.is-keyboardFocused",
- ".spectrum-Picker.is-loading",
- ".spectrum-Picker.is-loading .spectrum-Picker-menuIcon",
".spectrum-Picker:after",
".spectrum-Picker:focus-visible",
".spectrum-Picker:lang(ja) .spectrum-Picker-label",
".spectrum-Picker:lang(ko) .spectrum-Picker-label",
- ".spectrum-Picker:lang(zh) .spectrum-Picker-label"
- ],
- "modifiers": [
- "--mod-picker-animation-duration",
- "--mod-picker-background-color-active",
- "--mod-picker-background-color-default",
- "--mod-picker-background-color-default-open",
- "--mod-picker-background-color-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-inline-size-quiet",
- "--mod-picker-line-height",
- "--mod-picker-line-height-cjk",
- "--mod-picker-min-inline-size",
- "--mod-picker-min-inline-size-quiet",
- "--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-starting-icon-to-text",
- "--mod-picker-spacing-text-to-icon-inline-end",
- "--mod-picker-spacing-top-to-alert-icon",
- "--mod-picker-spacing-top-to-disclosure-icon",
- "--mod-picker-spacing-top-to-progress-circle",
- "--mod-picker-spacing-top-to-text"
- ],
- "component": [
- "--spectrum-picker-animation-duration",
- "--spectrum-picker-background-color-active",
- "--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-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-line-height-cjk",
- "--spectrum-picker-min-inline-size",
- "--spectrum-picker-minimum-width-multiplier",
- "--spectrum-picker-placeholder-font-style",
- "--spectrum-picker-popover-animation-distance",
- "--spectrum-picker-spacing-bottom-to-text",
- "--spectrum-picker-spacing-edge-to-disclosure-icon",
- "--spectrum-picker-spacing-edge-to-text",
- "--spectrum-picker-spacing-icon-to-disclosure-icon",
- "--spectrum-picker-spacing-label-to-picker",
- "--spectrum-picker-spacing-label-to-picker-quiet",
- "--spectrum-picker-spacing-starting-icon-to-text",
- "--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-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-size-difference-down",
- "--spectrum-component-size-width-ratio-down",
- "--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-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-medium-size-extra-large",
- "--spectrum-corner-radius-medium-size-large",
- "--spectrum-corner-radius-medium-size-medium",
- "--spectrum-corner-radius-medium-size-small",
- "--spectrum-default-font-style",
- "--spectrum-disabled-background-color",
- "--spectrum-disabled-content-color",
- "--spectrum-downstate-height",
- "--spectrum-downstate-width",
- "--spectrum-field-default-width-extra-large",
- "--spectrum-field-default-width-large",
- "--spectrum-field-default-width-medium",
- "--spectrum-field-default-width-small",
- "--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-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-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-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"
- ],
- "passthroughs": [
- "--mod-button-animation-duration",
- "--mod-button-font-family",
- "--mod-button-line-height",
- "--mod-popover-animation-distance"
+ ".spectrum-Picker:lang(zh) .spectrum-Picker-label",
+ ".spectrum-Picker.is-keyboardFocused",
+ ".spectrum-Picker.is-loading",
+ ".spectrum-Picker.is-loading .spectrum-Picker-menuIcon"
],
- "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-picker-block-size": {
+ "description": "Used by `--spectrum-picker-min-inline-size`, `.spectrum-Picker-button`.
Defaults to `var(--spectrum-picker-block-size)`, if not set.",
+ "control": "text",
+ "category": "Modifier"
+ },
+ "mod-picker-min-inline-size-quiet": {
+ "description": "Used by `--spectrum-picker-min-inline-size`.",
+ "control": "text",
+ "category": "Modifier"
+ },
+ "mod-picker-inline-size-quiet": {
+ "description": "Used by `--spectrum-picker-inline-size`.",
+ "control": "text",
+ "category": "Modifier"
+ },
+ "mod-picker-spacing-edge-to-text-quiet": {
+ "description": "Used by `--spectrum-picker-spacing-edge-to-text`.
Defaults to `var(--spectrum-field-edge-to-text-quiet)`, if not set.",
+ "control": "text",
+ "category": "Modifier"
+ },
+ "mod-picker-spacing-edge-to-disclosure-icon-quiet": {
+ "description": "Used by `--spectrum-picker-spacing-edge-to-disclosure-icon`.
Defaults to `var(--spectrum-picker-end-edge-to-disclousure-icon-quiet)`, if not set.",
+ "control": "text",
+ "category": "Modifier"
+ },
+ "mod-picker-spacing-label-to-picker-quiet": {
+ "description": "Used by `--spectrum-picker-spacing-label-to-picker`.
Defaults to `var(--spectrum-picker-spacing-label-to-picker-quiet)`, if not set.",
+ "control": "text",
+ "category": "Modifier"
+ },
+ "mod-picker-min-inline-size": {
+ "description": "Used by `.spectrum-Picker-button`.
Defaults to `var(--spectrum-picker-min-inline-size)`, if not set.",
+ "control": "text",
+ "category": "Modifier"
+ },
+ "mod-picker-inline-size": {
+ "description": "Used by `.spectrum-Picker-button`.
Defaults to `var(--spectrum-picker-inline-size)`, if not set.",
+ "control": "text",
+ "category": "Modifier"
+ },
+ "mod-picker-spacing-label-to-picker": {
+ "description": "Used by `.spectrum-Picker-button`.
Defaults to `var(--spectrum-picker-spacing-label-to-picker)`, if not set.",
+ "control": "text",
+ "category": "Modifier"
+ },
+ "mod-picker-spacing-edge-to-text": {
+ "description": "Used by `.spectrum-Picker-button`.
Defaults to `var(--spectrum-picker-spacing-edge-to-text)`, if not set.",
+ "control": "text",
+ "category": "Modifier"
+ },
+ "mod-picker-spacing-edge-to-disclosure-icon": {
+ "description": "Used by `.spectrum-Picker-button`.
Defaults to `var(--spectrum-picker-spacing-edge-to-disclosure-icon)`, if not set.",
+ "control": "text",
+ "category": "Modifier"
+ },
+ "mod-picker-border-width": {
+ "description": "Used by `.spectrum-Picker-button`, `.spectrum-Picker-button.is-keyboardFocused:after, .spectrum-Picker-button:focus-visible:after`, `.spectrum-Picker-label`, `.spectrum-Picker-validationIcon`, `.spectrum-Picker .spectrum-ProgressCircle`, `.spectrum-Picker--quiet .spectrum-Picker-button.is-keyboardFocused:after, .spectrum-Picker--quiet .spectrum-Picker-button:focus-visible:after`.
Defaults to `var(--spectrum-picker-border-width)`, if not set.",
+ "control": "text",
+ "category": "Modifier"
+ },
+ "mod-picker-border-radius": {
+ "description": "Used by `.spectrum-Picker-button`, `.spectrum-Picker-button.is-keyboardFocused:after, .spectrum-Picker-button:focus-visible:after`.
Defaults to `var(--spectrum-picker-border-radius)`, if not set.",
+ "control": "text",
+ "category": "Modifier"
+ },
+ "mod-picker-animation-duration": {
+ "description": "Used by `.spectrum-Picker-button`, `.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": {
+ "description": "Used by `.spectrum-Picker-button`, `.spectrum-Picker-label.is-placeholder`, `.spectrum-Picker--quiet .spectrum-Picker-button`.
Defaults to `var(--spectrum-picker-font-color-default)`, if not set.",
+ "control": "color",
+ "category": "Modifier"
+ },
+ "mod-picker-background-color-default": {
+ "description": "Used by `.spectrum-Picker-button`.
Defaults to `var(--spectrum-picker-background-color-default)`, if not set.",
+ "control": "color",
+ "category": "Modifier"
+ },
+ "mod-picker-border-color-default": {
+ "description": "Used by `.spectrum-Picker-button`.
Defaults to `var(--spectrum-picker-border-color-default)`, if not set.",
+ "control": "color",
+ "category": "Modifier"
+ },
+ "mod-picker-background-color-active": {
+ "description": "Used by `.spectrum-Picker-button:active`.
Defaults to `var(--spectrum-picker-background-color-active)`, if not set.",
+ "control": "color",
+ "category": "Modifier"
+ },
+ "mod-picker-border-active": {
+ "description": "Used by `.spectrum-Picker-button:active`.
Defaults to `var(--spectrum-picker-border-color-active)`, if not set.",
+ "control": "text",
+ "category": "Modifier"
+ },
+ "mod-picker-font-color-active": {
+ "description": "Used by `.spectrum-Picker-button:active .spectrum-Picker-label.is-placeholder`, `.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": {
+ "description": "Used by `.spectrum-Picker-button.is-keyboardFocused, .spectrum-Picker-button:focus-visible`.
Defaults to `var(--spectrum-picker-background-color-key-focus)`, if not set.",
+ "control": "color",
+ "category": "Modifier"
+ },
+ "mod-picker-border-color-key-focus": {
+ "description": "Used by `.spectrum-Picker-button.is-keyboardFocused, .spectrum-Picker-button:focus-visible`.
Defaults to `var(--spectrum-picker-border-color-key-focus)`, if not set.",
+ "control": "color",
+ "category": "Modifier"
+ },
+ "mod-picker-font-color-key-focus": {
+ "description": "Used by `.spectrum-Picker-button.is-keyboardFocused, .spectrum-Picker-button:focus-visible`, `.spectrum-Picker-button.is-keyboardFocused .spectrum-Picker-label.is-placeholder, .spectrum-Picker-button: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": {
+ "description": "Used by `.spectrum-Picker-button.is-keyboardFocused:after, .spectrum-Picker-button:focus-visible:after`, `.spectrum-Picker--quiet .spectrum-Picker-button.is-keyboardFocused:after, .spectrum-Picker--quiet .spectrum-Picker-button:focus-visible:after`.
Defaults to `var(--spectrum-picker-focus-indicator-color)`, if not set.",
+ "control": "color",
+ "category": "Modifier"
+ },
+ "mod-picker-focus-indicator-gap": {
+ "description": "Used by `.spectrum-Picker-button.is-keyboardFocused:after, .spectrum-Picker-button:focus-visible:after`, `.spectrum-Picker--quiet .spectrum-Picker-button.is-keyboardFocused:after, .spectrum-Picker--quiet .spectrum-Picker-button:focus-visible:after`.
Defaults to `var(--spectrum-picker-focus-indicator-gap)`, if not set.",
+ "control": "text",
+ "category": "Modifier"
+ },
+ "mod-picker-focus-indicator-thickness": {
+ "description": "Used by `.spectrum-Picker-button.is-keyboardFocused:after, .spectrum-Picker-button:focus-visible:after`, `.spectrum-Picker--quiet .spectrum-Picker-button.is-keyboardFocused:after, .spectrum-Picker--quiet .spectrum-Picker-button:focus-visible:after`.
Defaults to `var(--spectrum-picker-focus-indicator-thickness)`, if not set.",
+ "control": "text",
+ "category": "Modifier"
+ },
+ "mod-picker-icon-color-key-focus": {
+ "description": "Used by `.spectrum-Picker-button.is-keyboardFocused .spectrum-Picker-menuIcon, .spectrum-Picker-button: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": {
+ "description": "Used by `.spectrum-Picker-button.is-open:not(.spectrum-Picker--quiet, :disabled, .is-disabled, .is-loading)`.
Defaults to `var(--spectrum-picker-font-color-default-open)`, if not set.",
+ "control": "color",
+ "category": "Modifier"
+ },
+ "mod-picker-background-color-default-open": {
+ "description": "Used by `.spectrum-Picker-button.is-open:not(.spectrum-Picker--quiet, :disabled, .is-disabled, .is-loading)`.
Defaults to `var(--spectrum-picker-background-color-default-open)`, if not set.",
+ "control": "color",
+ "category": "Modifier"
+ },
+ "mod-picker-border-default-open": {
+ "description": "Used by `.spectrum-Picker-button.is-open:not(.spectrum-Picker--quiet, :disabled, .is-disabled, .is-loading)`.
Defaults to `var(--spectrum-picker-border-color-default-open)`, if not set.",
+ "control": "text",
+ "category": "Modifier"
+ },
+ "mod-picker-icon-color-default-open": {
+ "description": "Used by `.spectrum-Picker-button.is-open:not(.spectrum-Picker--quiet, :disabled, .is-disabled, .is-loading) .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": {
+ "description": "Used by `.spectrum-Picker-button.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": {
+ "description": "Used by `.spectrum-Picker-button.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": {
+ "description": "Used by `.spectrum-Picker-button.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": {
+ "description": "Used by `.spectrum-Picker-button.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": {
+ "description": "Used by `.spectrum-Picker-button.is-invalid.is-keyboardFocused:not(:disabled, .is-disabled), .spectrum-Picker-button.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-spacing-starting-icon-to-text": {
+ "description": "Used by `.spectrum-Picker .spectrum-Picker-icon`.
Defaults to `var(--spectrum-picker-spacing-starting-icon-to-text)`, if not set.",
+ "control": "text",
+ "category": "Modifier"
+ },
+ "mod-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": {
+ "description": "Used by `.spectrum-Picker-label`.
Defaults to `var(--spectrum-picker-line-height)`, if not set.",
+ "control": "text",
+ "category": "Modifier"
+ },
+ "mod-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": {
+ "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": {
+ "description": "Used by `.spectrum-Picker-label`.
Defaults to `var(--spectrum-picker-spacing-bottom-to-text)`, if not set.",
+ "control": "text",
+ "category": "Modifier"
+ },
+ "mod-picker-spacing-text-to-icon-inline-end": {
+ "description": "Used by `.spectrum-Picker-label`.
Defaults to `var(--spectrum-picker-spacing-text-to-icon-inline-end)`, if not set.",
+ "control": "text",
+ "category": "Modifier"
+ },
+ "mod-picker-placeholder-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": {
+ "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-font-color-hover": {
+ "description": "Used by `.spectrum-Picker-button: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": {
+ "description": "Used by `.spectrum-Picker-button:hover`.
Defaults to `var(--spectrum-picker-background-color-hover)`, if not set.",
+ "control": "color",
+ "category": "Modifier"
+ },
+ "mod-picker-border-color-hover": {
+ "description": "Used by `.spectrum-Picker-button:hover`.
Defaults to `var(--spectrum-picker-border-color-hover)`, if not set.",
+ "control": "color",
+ "category": "Modifier"
+ },
+ "mod-picker-icon-color-hover": {
+ "description": "Used by `.spectrum-Picker-button: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": {
+ "description": "Used by `.spectrum-Picker-button.is-open:not(.spectrum-Picker--quiet, :disabled, .is-disabled, .is-loading):hover`.
Defaults to `var(--spectrum-picker-font-color-hover-open)`, if not set.",
+ "control": "color",
+ "category": "Modifier"
+ },
+ "mod-picker-background-color-hover-open": {
+ "description": "Used by `.spectrum-Picker-button.is-open:not(.spectrum-Picker--quiet, :disabled, .is-disabled, .is-loading):hover`.
Defaults to `var(--spectrum-picker-background-color-hover-open)`, if not set.",
+ "control": "color",
+ "category": "Modifier"
+ },
+ "mod-picker-border-color-hover-open": {
+ "description": "Used by `.spectrum-Picker-button.is-open:not(.spectrum-Picker--quiet, :disabled, .is-disabled, .is-loading):hover`.
Defaults to `var(--spectrum-picker-border-color-hover-open)`, if not set.",
+ "control": "color",
+ "category": "Modifier"
+ },
+ "mod-picker-icon-color-hover-open": {
+ "description": "Used by `.spectrum-Picker-button.is-open:not(.spectrum-Picker--quiet, :disabled, .is-disabled, .is-loading):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": {
+ "description": "Used by `.spectrum-Picker-button.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": {
+ "description": "Used by `.spectrum-Picker-button.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-line-height-cjk": {
+ "description": "Used by `.spectrum-Picker:lang(ja) .spectrum-Picker-label, .spectrum-Picker:lang(ko) .spectrum-Picker-label, .spectrum-Picker:lang(zh) .spectrum-Picker-label`.
Defaults to `var(--spectrum-picker-line-height-cjk)`, if not set.",
+ "control": "text",
+ "category": "Modifier"
+ },
+ "mod-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": {
+ "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": {
+ "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": {
+ "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-icon-to-disclosure-icon": {
+ "description": "Used by `.spectrum-Picker .spectrum-ProgressCircle, .spectrum-Picker-validationIcon`.
Defaults to `var(--spectrum-picker-spacing-icon-to-disclosure-icon)`, if not set.",
+ "control": "text",
+ "category": "Modifier"
+ },
+ "mod-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-font-color-disabled": {
+ "description": "Used by `.spectrum-Picker-button.is-disabled, .spectrum-Picker-button:disabled`, `.spectrum-Picker-button.is-disabled .spectrum-Picker-label.is-placeholder, .spectrum-Picker-button:disabled .spectrum-Picker-label.is-placeholder`.
Defaults to `var(--spectrum-picker-font-color-disabled)`, if not set.",
+ "control": "color",
+ "category": "Modifier"
+ },
+ "mod-picker-background-color-disabled": {
+ "description": "Used by `.spectrum-Picker-button.is-disabled:not(.spectrum-Picker--quiet), .spectrum-Picker-button:disabled:not(.spectrum-Picker--quiet)`.
Defaults to `var(--spectrum-picker-background-color-disabled)`, if not set.",
+ "control": "color",
+ "category": "Modifier"
+ },
+ "mod-picker-icon-color-disabled": {
+ "description": "Used by `.spectrum-Picker-button.is-disabled .spectrum-Picker-icon, .spectrum-Picker-button.is-disabled .spectrum-Picker-menuIcon, .spectrum-Picker-button.is-disabled .spectrum-Picker-validationIcon, .spectrum-Picker-button:disabled .spectrum-Picker-icon, .spectrum-Picker-button:disabled .spectrum-Picker-menuIcon, .spectrum-Picker-button:disabled .spectrum-Picker-validationIcon`, `.spectrum-Picker.is-loading .spectrum-Picker-menuIcon`.
Defaults to `var(--spectrum-picker-icon-color-disabled)`, if not set.",
+ "control": "color",
+ "category": "Modifier"
+ }
+ },
+ "component": {
+ "spectrum-picker-background-color-default": {
+ "value": "transparent",
+ "description": "Defined in `.spectrum-Picker`, `.spectrum-Picker--quiet`.
Used by `.spectrum-Picker-button`.
Defaults to `transparent`, if not set.",
+ "control": "color",
+ "category": "Component"
+ },
+ "spectrum-picker-background-color-default-open": {
+ "value": "transparent",
+ "description": "Defined in `.spectrum-Picker`, `.spectrum-Picker--quiet`.
Used by `.spectrum-Picker-button.is-open:not(.spectrum-Picker--quiet, :disabled, .is-disabled, .is-loading)`.
Defaults to `transparent`, if not set.",
+ "control": "color",
+ "category": "Component"
+ },
+ "spectrum-picker-background-color-hover": {
+ "value": "transparent",
+ "description": "Defined in `.spectrum-Picker`, `.spectrum-Picker--quiet`.
Used by `.spectrum-Picker-button:hover`.
Defaults to `transparent`, if not set.",
+ "control": "color",
+ "category": "Component"
+ },
+ "spectrum-picker-background-color-hover-open": {
+ "value": "transparent",
+ "description": "Defined in `.spectrum-Picker`, `.spectrum-Picker--quiet`.
Used by `.spectrum-Picker-button.is-open:not(.spectrum-Picker--quiet, :disabled, .is-disabled, .is-loading):hover`.
Defaults to `transparent`, if not set.",
+ "control": "color",
+ "category": "Component"
+ },
+ "spectrum-picker-background-color-active": {
+ "value": "transparent",
+ "description": "Defined in `.spectrum-Picker`, `.spectrum-Picker--quiet`.
Used by `.spectrum-Picker-button:active`.
Defaults to `transparent`, if not set.",
+ "control": "color",
+ "category": "Component"
+ },
+ "spectrum-picker-background-color-key-focus": {
+ "value": "transparent",
+ "description": "Defined in `.spectrum-Picker`, `.spectrum-Picker--quiet`.
Used by `.spectrum-Picker-button.is-keyboardFocused, .spectrum-Picker-button:focus-visible`.
Defaults to `transparent`, if not set.",
+ "control": "color",
+ "category": "Component"
+ },
+ "spectrum-picker-border-color-default": {
+ "value": "transparent",
+ "description": "Defined in `.spectrum-Picker`.
Used by `.spectrum-Picker-button`.
Defaults to `transparent`, if not set.",
+ "control": "color",
+ "category": "Component"
+ },
+ "spectrum-picker-border-color-default-open": {
+ "value": "transparent",
+ "description": "Defined in `.spectrum-Picker`.
Used by `.spectrum-Picker-button.is-open:not(.spectrum-Picker--quiet, :disabled, .is-disabled, .is-loading)`.
Defaults to `transparent`, if not set.",
+ "control": "color",
+ "category": "Component"
+ },
+ "spectrum-picker-border-color-hover": {
+ "value": "transparent",
+ "description": "Defined in `.spectrum-Picker`.
Used by `.spectrum-Picker-button:hover`.
Defaults to `transparent`, if not set.",
+ "control": "color",
+ "category": "Component"
+ },
+ "spectrum-picker-border-color-hover-open": {
+ "value": "transparent",
+ "description": "Defined in `.spectrum-Picker`.
Used by `.spectrum-Picker-button.is-open:not(.spectrum-Picker--quiet, :disabled, .is-disabled, .is-loading):hover`.
Defaults to `transparent`, if not set.",
+ "control": "color",
+ "category": "Component"
+ },
+ "spectrum-picker-border-color-active": {
+ "value": "transparent",
+ "description": "Defined in `.spectrum-Picker`.
Used by `.spectrum-Picker-button:active`.
Defaults to `transparent`, if not set.",
+ "control": "color",
+ "category": "Component"
+ },
+ "spectrum-picker-border-color-key-focus": {
+ "value": "transparent",
+ "description": "Defined in `.spectrum-Picker`.
Used by `.spectrum-Picker-button.is-keyboardFocused, .spectrum-Picker-button:focus-visible`.
Defaults to `transparent`, if not set.",
+ "control": "color",
+ "category": "Component"
+ },
+ "spectrum-picker-font-size": {
+ "value": "18px",
+ "description": "Defined in `.spectrum-Picker`, `.spectrum-Picker--sizeS`, `.spectrum-Picker--sizeL`, `.spectrum-Picker--sizeXL`.
Used by `.spectrum-Picker-label`.
Defaults to `var(--spectrum-font-size-300)`, if not set.",
+ "control": "text",
+ "category": "Component"
+ },
+ "spectrum-picker-font-weight": {
+ "value": "400",
+ "description": "Defined in `.spectrum-Picker`.
Used by `.spectrum-Picker-label`, `.spectrum-Picker-label.is-placeholder`.
Defaults to `var(--spectrum-regular-font-weight)`, if not set.",
+ "control": "text",
+ "category": "Component"
+ },
+ "spectrum-picker-placeholder-font-style": {
+ "value": "normal",
+ "description": "Defined in `.spectrum-Picker`.
Used by `.spectrum-Picker-label.is-placeholder`.
Defaults to `var(--spectrum-default-font-style)`, if not set.",
+ "control": "text",
+ "category": "Component"
+ },
+ "spectrum-picker-line-height": {
+ "value": "1.3",
+ "description": "Defined in `.spectrum-Picker`.
Used by `.spectrum-Picker-label`.
Defaults to `var(--spectrum-line-height-100)`, if not set.",
+ "control": "text",
+ "category": "Component"
+ },
+ "spectrum-picker-line-height-cjk": {
+ "value": "1.5",
+ "description": "Defined in `.spectrum-Picker`.
Used by `.spectrum-Picker:lang(ja) .spectrum-Picker-label, .spectrum-Picker:lang(ko) .spectrum-Picker-label, .spectrum-Picker:lang(zh) .spectrum-Picker-label`.
Defaults to `var(--spectrum-cjk-line-height-100)`, if not set.",
+ "control": "text",
+ "category": "Component"
+ },
+ "spectrum-picker-block-size": {
+ "value": "48px",
+ "description": "Defined in `.spectrum-Picker`, `.spectrum-Picker--sizeS`, `.spectrum-Picker--sizeL`, `.spectrum-Picker--sizeXL`.
Used by `--spectrum-picker-min-inline-size`, `.spectrum-Picker-button`.
Defaults to `var(--spectrum-component-height-300)`, if not set.",
+ "control": "text",
+ "category": "Component"
+ },
+ "spectrum-picker-inline-size": {
+ "value": "var(--mod-picker-inline-size-quiet, auto)",
+ "description": "Defined in `.spectrum-Picker`, `.spectrum-Picker--sizeS`, `.spectrum-Picker--sizeL`, `.spectrum-Picker--sizeXL`, `.spectrum-Picker--quiet`.
Used by `.spectrum-Picker-button`.
Defaults to `var(--mod-picker-inline-size-quiet, auto)`, if not set.",
+ "control": "text",
+ "category": "Component"
+ },
+ "spectrum-picker-min-inline-size": {
+ "value": "var(--mod-picker-min-inline-size-quiet, 0)",
+ "description": "Defined in `.spectrum-Picker`, `.spectrum-Picker--quiet`.
Used by `.spectrum-Picker-button`.
Defaults to `var(--mod-picker-min-inline-size-quiet, 0)`, if not set.",
+ "control": "text",
+ "category": "Component"
+ },
+ "spectrum-picker-minimum-width-multiplier": {
+ "value": "2",
+ "description": "Used by `--spectrum-picker-min-inline-size`.",
+ "control": "text",
+ "category": "Component"
+ },
+ "spectrum-picker-border-radius": {
+ "value": "10px",
+ "description": "Defined in `.spectrum-Picker`, `.spectrum-Picker--sizeS`, `.spectrum-Picker--sizeL`, `.spectrum-Picker--sizeXL`.
Used by `.spectrum-Picker-button`, `.spectrum-Picker-button.is-keyboardFocused:after, .spectrum-Picker-button:focus-visible:after`.
Defaults to `var(--spectrum-corner-radius-medium-size-extra-large)`, if not set.",
+ "control": "text",
+ "category": "Component"
+ },
+ "spectrum-picker-border-width": {
+ "value": "2px",
+ "description": "Defined in `.spectrum-Picker`.
Used by `.spectrum-Picker-button`, `.spectrum-Picker-button.is-keyboardFocused:after, .spectrum-Picker-button:focus-visible:after`, `.spectrum-Picker-label`, `.spectrum-Picker-validationIcon`, `.spectrum-Picker .spectrum-ProgressCircle`, `.spectrum-Picker--quiet .spectrum-Picker-button.is-keyboardFocused:after, .spectrum-Picker--quiet .spectrum-Picker-button:focus-visible:after`.
Defaults to `var(--spectrum-border-width-200)`, if not set.",
+ "control": "text",
+ "category": "Component"
+ },
+ "spectrum-picker-spacing-top-to-text": {
+ "value": "12px",
+ "description": "Defined in `.spectrum-Picker`, `.spectrum-Picker--sizeS`, `.spectrum-Picker--sizeL`, `.spectrum-Picker--sizeXL`.
Used by `.spectrum-Picker-label`.
Defaults to `var(--spectrum-component-top-to-text-300)`, if not set.",
+ "control": "text",
+ "category": "Component"
+ },
+ "spectrum-picker-spacing-bottom-to-text": {
+ "value": "14px",
+ "description": "Defined in `.spectrum-Picker`, `.spectrum-Picker--sizeS`, `.spectrum-Picker--sizeL`, `.spectrum-Picker--sizeXL`.
Used by `.spectrum-Picker-label`.
Defaults to `var(--spectrum-component-bottom-to-text-300)`, if not set.",
+ "control": "text",
+ "category": "Component"
+ },
+ "spectrum-picker-spacing-edge-to-text": {
+ "value": "var(--mod-picker-spacing-edge-to-text-quiet, var(--spectrum-field-edge-to-text-quiet))",
+ "description": "Defined in `.spectrum-Picker`, `.spectrum-Picker--sizeS`, `.spectrum-Picker--sizeL`, `.spectrum-Picker--sizeXL`, `.spectrum-Picker--quiet`.
Used by `.spectrum-Picker-button`.
Defaults to `var(--mod-picker-spacing-edge-to-text-quiet, var(--spectrum-field-edge-to-text-quiet))`, if not set.",
+ "control": "text",
+ "category": "Component"
+ },
+ "spectrum-picker-spacing-label-to-picker": {
+ "value": "var(--mod-picker-spacing-label-to-picker-quiet, var(--spectrum-picker-spacing-label-to-picker-quiet))",
+ "description": "Defined in `.spectrum-Picker`, `.spectrum-Picker--quiet`.
Used by `.spectrum-Picker-button`.
Defaults to `var(--mod-picker-spacing-label-to-picker-quiet, var(--spectrum-picker-spacing-label-to-picker-quiet))`, if not set.",
+ "control": "text",
+ "category": "Component"
+ },
+ "spectrum-picker-spacing-label-to-picker-quiet": {
+ "value": "-15px",
+ "description": "Defined in `.spectrum-Picker`, `.spectrum-Picker--sizeS`, `.spectrum-Picker--sizeL`, `.spectrum-Picker--sizeXL`.
Used by `--spectrum-picker-spacing-label-to-picker`.
Defaults to `var(--spectrum-field-label-to-component-quiet-extra-large)`, if not set.",
+ "control": "text",
+ "category": "Component"
+ },
+ "spectrum-picker-spacing-starting-icon-to-text": {
+ "value": "8px",
+ "description": "Defined in `.spectrum-Picker`, `.spectrum-Picker--sizeS`, `.spectrum-Picker--sizeL`, `.spectrum-Picker--sizeXL`.
Used by `.spectrum-Picker .spectrum-Picker-icon`.
Defaults to `var(--spectrum-text-to-visual-300)`, if not set.",
+ "control": "text",
+ "category": "Component"
+ },
+ "spectrum-picker-spacing-text-to-icon-inline-end": {
+ "value": "8px",
+ "description": "Defined in `.spectrum-Picker`, `.spectrum-Picker--sizeS`, `.spectrum-Picker--sizeL`, `.spectrum-Picker--sizeXL`.
Used by `.spectrum-Picker-label`.
Defaults to `var(--spectrum-text-to-visual-300)`, if not set.",
+ "control": "text",
+ "category": "Component"
+ },
+ "spectrum-picker-spacing-icon-to-disclosure-icon": {
+ "value": "10px",
+ "description": "Defined in `.spectrum-Picker`, `.spectrum-Picker--sizeS`, `.spectrum-Picker--sizeL`, `.spectrum-Picker--sizeXL`.
Used by `.spectrum-Picker .spectrum-ProgressCircle, .spectrum-Picker-validationIcon`.
Defaults to `var(--spectrum-picker-visual-to-disclosure-icon-extra-large)`, if not set.",
+ "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-top-to-alert-icon": {
+ "value": "11px",
+ "description": "Defined in `.spectrum-Picker`, `.spectrum-Picker--sizeS`, `.spectrum-Picker--sizeL`, `.spectrum-Picker--sizeXL`.
Used by `.spectrum-Picker-validationIcon`.
Defaults to `var(--spectrum-component-top-to-workflow-icon-300)`, if not set.",
+ "control": "text",
+ "category": "Component"
+ },
+ "spectrum-picker-spacing-top-to-progress-circle": {
+ "value": "11px",
+ "description": "Defined in `.spectrum-Picker`, `.spectrum-Picker--sizeS`, `.spectrum-Picker--sizeL`, `.spectrum-Picker--sizeXL`.
Used by `.spectrum-Picker .spectrum-ProgressCircle`.
Defaults to `var(--spectrum-field-top-to-progress-circle-extra-large)`, if not set.",
+ "control": "text",
+ "category": "Component"
+ },
+ "spectrum-picker-spacing-top-to-disclosure-icon": {
+ "value": "17px",
+ "description": "Defined in `.spectrum-Picker`, `.spectrum-Picker--sizeS`, `.spectrum-Picker--sizeL`, `.spectrum-Picker--sizeXL`.
Used by `.spectrum-Picker-menuIcon`.
Defaults to `var(--spectrum-field-top-to-disclosure-icon-300)`, if not set.",
+ "control": "text",
+ "category": "Component"
+ },
+ "spectrum-picker-spacing-edge-to-disclosure-icon": {
+ "value": "var(--mod-picker-spacing-edge-to-disclosure-icon-quiet, var(--spectrum-picker-end-edge-to-disclousure-icon-quiet))",
+ "description": "Defined in `.spectrum-Picker`, `.spectrum-Picker--sizeS`, `.spectrum-Picker--sizeL`, `.spectrum-Picker--sizeXL`, `.spectrum-Picker--quiet`.
Used by `.spectrum-Picker-button`.
Defaults to `var(--mod-picker-spacing-edge-to-disclosure-icon-quiet, var(--spectrum-picker-end-edge-to-disclousure-icon-quiet))`, if not set.",
+ "control": "text",
+ "category": "Component"
+ },
+ "spectrum-picker-animation-duration": {
+ "value": "var(--spectrum-animation-duration-100)",
+ "description": "Defined in `.spectrum-Picker`.
Used by `.spectrum-Picker-button`, `.spectrum-Picker-label.is-placeholder`, `.spectrum-Picker-menuIcon`.
Defaults to `var(--spectrum-animation-duration-100)`, if not set.",
+ "control": "text",
+ "category": "Component"
+ },
+ "spectrum-picker-font-color-default": {
+ "value": "var(--spectrum-gray-800)",
+ "description": "Defined in `.spectrum-Picker`.
Used by `.spectrum-Picker-button`, `.spectrum-Picker-label.is-placeholder`, `.spectrum-Picker--quiet .spectrum-Picker-button`.
Defaults to `var(--spectrum-neutral-content-color-default)`, if not set.",
+ "control": "color",
+ "category": "Component"
+ },
+ "spectrum-picker-font-color-default-open": {
+ "value": "var(--spectrum-neutral-content-color-down)",
+ "description": "Defined in `.spectrum-Picker`.
Used by `.spectrum-Picker-button.is-open:not(.spectrum-Picker--quiet, :disabled, .is-disabled, .is-loading)`.
Defaults to `var(--spectrum-neutral-content-color-focus)`, if not set.",
+ "control": "color",
+ "category": "Component"
+ },
+ "spectrum-picker-font-color-hover": {
+ "value": "var(--spectrum-gray-900)",
+ "description": "Defined in `.spectrum-Picker`.
Used by `.spectrum-Picker-button:hover`, `.spectrum-Picker-label.is-placeholder:hover`.
Defaults to `var(--spectrum-neutral-content-color-hover)`, if not set.",
+ "control": "color",
+ "category": "Component"
+ },
+ "spectrum-picker-font-color-hover-open": {
+ "value": "var(--spectrum-neutral-content-color-down)",
+ "description": "Defined in `.spectrum-Picker`.
Used by `.spectrum-Picker-button.is-open:not(.spectrum-Picker--quiet, :disabled, .is-disabled, .is-loading):hover`.
Defaults to `var(--spectrum-neutral-content-color-focus-hover)`, if not set.",
+ "control": "color",
+ "category": "Component"
+ },
+ "spectrum-picker-font-color-active": {
+ "value": "var(--spectrum-gray-900)",
+ "description": "Defined in `.spectrum-Picker`.
Used by `.spectrum-Picker-button:active .spectrum-Picker-label.is-placeholder`, `.spectrum-Picker-label.is-placeholder:active`.
Defaults to `var(--spectrum-neutral-content-color-down)`, if not set.",
+ "control": "color",
+ "category": "Component"
+ },
+ "spectrum-picker-font-color-key-focus": {
+ "value": "var(--spectrum-gray-900)",
+ "description": "Defined in `.spectrum-Picker`.
Used by `.spectrum-Picker-button.is-keyboardFocused, .spectrum-Picker-button:focus-visible`, `.spectrum-Picker-button.is-keyboardFocused .spectrum-Picker-label.is-placeholder, .spectrum-Picker-button:focus-visible .spectrum-Picker-label.is-placeholder`.
Defaults to `var(--spectrum-neutral-content-color-key-focus)`, if not set.",
+ "control": "color",
+ "category": "Component"
+ },
+ "spectrum-picker-icon-color-default": {
+ "value": "var(--spectrum-gray-800)",
+ "description": "Defined in `.spectrum-Picker`.
Used by `.spectrum-Picker-menuIcon`.
Defaults to `var(--spectrum-neutral-content-color-default)`, if not set.",
+ "control": "color",
+ "category": "Component"
+ },
+ "spectrum-picker-icon-color-default-open": {
+ "value": "var(--spectrum-neutral-content-color-down)",
+ "description": "Defined in `.spectrum-Picker`.
Used by `.spectrum-Picker-button.is-open:not(.spectrum-Picker--quiet, :disabled, .is-disabled, .is-loading) .spectrum-Picker-menuIcon`.
Defaults to `var(--spectrum-neutral-content-color-focus)`, if not set.",
+ "control": "color",
+ "category": "Component"
+ },
+ "spectrum-picker-icon-color-hover": {
+ "value": "var(--spectrum-gray-900)",
+ "description": "Defined in `.spectrum-Picker`.
Used by `.spectrum-Picker-button:hover .spectrum-Picker-menuIcon`.
Defaults to `var(--spectrum-neutral-content-color-hover)`, if not set.",
+ "control": "color",
+ "category": "Component"
+ },
+ "spectrum-picker-icon-color-hover-open": {
+ "value": "var(--spectrum-neutral-content-color-down)",
+ "description": "Defined in `.spectrum-Picker`.
Used by `.spectrum-Picker-button.is-open:not(.spectrum-Picker--quiet, :disabled, .is-disabled, .is-loading):hover .spectrum-Picker-menuIcon`.
Defaults to `var(--spectrum-neutral-content-color-focus-hover)`, if not set.",
+ "control": "color",
+ "category": "Component"
+ },
+ "spectrum-picker-icon-color-active": {
+ "value": "var(--spectrum-gray-900)",
+ "description": "Defined in `.spectrum-Picker`.
Used by `.spectrum-Picker-menuIcon:active`.
Defaults to `var(--spectrum-neutral-content-color-down)`, if not set.",
+ "control": "color",
+ "category": "Component"
+ },
+ "spectrum-picker-icon-color-key-focus": {
+ "value": "var(--spectrum-gray-900)",
+ "description": "Defined in `.spectrum-Picker`.
Used by `.spectrum-Picker-button.is-keyboardFocused .spectrum-Picker-menuIcon, .spectrum-Picker-button:focus-visible .spectrum-Picker-menuIcon`.
Defaults to `var(--spectrum-neutral-content-color-key-focus)`, if not set.",
+ "control": "color",
+ "category": "Component"
+ },
+ "spectrum-picker-border-color-error-default": {
+ "value": "var(--spectrum-negative-color-900)",
+ "description": "Defined in `.spectrum-Picker`.
Used by `.spectrum-Picker-button.is-invalid:not(:disabled, .is-disabled)`.
Defaults to `var(--spectrum-negative-border-color-default)`, if not set.",
+ "control": "color",
+ "category": "Component"
+ },
+ "spectrum-picker-border-color-error-default-open": {
+ "value": "var(--spectrum-negative-color-1000)",
+ "description": "Defined in `.spectrum-Picker`.
Used by `.spectrum-Picker-button.is-invalid.is-open:not(:disabled, .is-disabled)`.
Defaults to `var(--spectrum-negative-border-color-focus)`, if not set.",
+ "control": "color",
+ "category": "Component"
+ },
+ "spectrum-picker-border-color-error-hover": {
+ "value": "var(--spectrum-negative-color-1000)",
+ "description": "Defined in `.spectrum-Picker`.
Used by `.spectrum-Picker-button.is-invalid:not(:disabled, .is-disabled):hover`.
Defaults to `var(--spectrum-negative-border-color-hover)`, if not set.",
+ "control": "color",
+ "category": "Component"
+ },
+ "spectrum-picker-border-color-error-hover-open": {
+ "value": "var(--spectrum-negative-border-color-down)",
+ "description": "Defined in `.spectrum-Picker`.
Used by `.spectrum-Picker-button.is-invalid.is-open:not(:disabled, .is-disabled):hover`.
Defaults to `var(--spectrum-negative-border-color-focus-hover)`, if not set.",
+ "control": "color",
+ "category": "Component"
+ },
+ "spectrum-picker-border-color-error-active": {
+ "value": "var(--spectrum-negative-color-1100)",
+ "description": "Defined in `.spectrum-Picker`.
Used by `.spectrum-Picker-button.is-invalid:not(:disabled, .is-disabled):active`.
Defaults to `var(--spectrum-negative-border-color-down)`, if not set.",
+ "control": "color",
+ "category": "Component"
+ },
+ "spectrum-picker-border-color-error-key-focus": {
+ "value": "var(--spectrum-negative-color-1000)",
+ "description": "Defined in `.spectrum-Picker`.
Used by `.spectrum-Picker-button.is-invalid.is-keyboardFocused:not(:disabled, .is-disabled), .spectrum-Picker-button.is-invalid:not(:disabled, .is-disabled):focus-visible`.
Defaults to `var(--spectrum-negative-border-color-key-focus)`, if not set.",
+ "control": "color",
+ "category": "Component"
+ },
+ "spectrum-picker-icon-color-error": {
+ "value": "var(--spectrum-negative-color-800)",
+ "description": "Defined in `.spectrum-Picker`.
Used by `.spectrum-Picker-button.is-invalid:not(:disabled, .is-disabled) .spectrum-Picker-validationIcon`.
Defaults to `var(--spectrum-negative-visual-color)`, if not set.",
+ "control": "color",
+ "category": "Component"
+ },
+ "spectrum-picker-background-color-disabled": {
+ "value": "transparent",
+ "description": "Defined in `.spectrum-Picker`, `.spectrum-Picker--quiet`.
Used by `.spectrum-Picker-button.is-disabled:not(.spectrum-Picker--quiet), .spectrum-Picker-button:disabled:not(.spectrum-Picker--quiet)`.
Defaults to `transparent`, if not set.",
+ "control": "color",
+ "category": "Component"
+ },
+ "spectrum-picker-font-color-disabled": {
+ "value": "var(--spectrum-gray-400)",
+ "description": "Defined in `.spectrum-Picker`.
Used by `.spectrum-Picker-button.is-disabled, .spectrum-Picker-button:disabled`, `.spectrum-Picker-button.is-disabled .spectrum-Picker-label.is-placeholder, .spectrum-Picker-button:disabled .spectrum-Picker-label.is-placeholder`.
Defaults to `var(--spectrum-disabled-content-color)`, if not set.",
+ "control": "color",
+ "category": "Component"
+ },
+ "spectrum-picker-icon-color-disabled": {
+ "value": "var(--spectrum-gray-400)",
+ "description": "Defined in `.spectrum-Picker`.
Used by `.spectrum-Picker-button.is-disabled .spectrum-Picker-icon, .spectrum-Picker-button.is-disabled .spectrum-Picker-menuIcon, .spectrum-Picker-button.is-disabled .spectrum-Picker-validationIcon, .spectrum-Picker-button:disabled .spectrum-Picker-icon, .spectrum-Picker-button:disabled .spectrum-Picker-menuIcon, .spectrum-Picker-button:disabled .spectrum-Picker-validationIcon`, `.spectrum-Picker.is-loading .spectrum-Picker-menuIcon`.
Defaults to `var(--spectrum-disabled-content-color)`, if not set.",
+ "control": "color",
+ "category": "Component"
+ },
+ "spectrum-picker-focus-indicator-gap": {
+ "value": "2px",
+ "description": "Defined in `.spectrum-Picker`.
Used by `.spectrum-Picker-button.is-keyboardFocused:after, .spectrum-Picker-button:focus-visible:after`, `.spectrum-Picker--quiet .spectrum-Picker-button.is-keyboardFocused:after, .spectrum-Picker--quiet .spectrum-Picker-button:focus-visible:after`.
Defaults to `var(--spectrum-focus-indicator-gap)`, if not set.",
+ "control": "text",
+ "category": "Component"
+ },
+ "spectrum-picker-focus-indicator-thickness": {
+ "value": "2px",
+ "description": "Defined in `.spectrum-Picker`.
Used by `.spectrum-Picker-button.is-keyboardFocused:after, .spectrum-Picker-button:focus-visible:after`, `.spectrum-Picker--quiet .spectrum-Picker-button.is-keyboardFocused:after, .spectrum-Picker--quiet .spectrum-Picker-button:focus-visible:after`.
Defaults to `var(--spectrum-focus-indicator-thickness)`, if not set.",
+ "control": "text",
+ "category": "Component"
+ },
+ "spectrum-picker-focus-indicator-color": {
+ "value": "var(--spectrum-blue-800)",
+ "description": "Defined in `.spectrum-Picker`.
Used by `.spectrum-Picker-button.is-keyboardFocused:after, .spectrum-Picker-button:focus-visible:after`, `.spectrum-Picker--quiet .spectrum-Picker-button.is-keyboardFocused:after, .spectrum-Picker--quiet .spectrum-Picker-button:focus-visible:after`.
Defaults to `var(--spectrum-focus-indicator-color)`, if not set.",
+ "control": "color",
+ "category": "Component"
+ },
+ "spectrum-picker-popover-animation-distance": {
+ "value": "8px",
+ "description": "Defined in `.spectrum-Picker`, `.spectrum-Picker--sizeS`, `.spectrum-Picker--sizeL`, `.spectrum-Picker--sizeXL`.
Used by `--mod-popover-animation-distance`.
Defaults to `var(--spectrum-component-to-menu-extra-large)`, if not set.",
+ "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-end-edge-to-disclousure-icon-quiet": {
+ "value": "0px",
+ "description": "Used by `--spectrum-picker-spacing-edge-to-disclosure-icon`.",
+ "control": "text",
+ "category": "Component"
+ }
+ },
+ "global": {
+ "spectrum-sans-font-family-stack": {
+ "description": "Used by `.spectrum-Picker-button`.",
+ "control": "text",
+ "category": "Global"
+ },
+ "spectrum-line-height-100": {
+ "value": "1.3",
+ "description": "Used by `.spectrum-Picker-button`, `--spectrum-picker-line-height`.",
+ "control": "text",
+ "category": "Global"
+ },
+ "spectrum-animation-duration-100": {
+ "description": "Used by `.spectrum-Picker-button`, `--spectrum-picker-animation-duration`.",
+ "control": "text",
+ "category": "Global"
+ },
+ "spectrum-gray-100": {
+ "value": "light-dark(rgb(233, 233, 233), rgb(44, 44, 44))",
+ "description": "Used by `--spectrum-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 `--spectrum-picker-background-color-default-open`, `--spectrum-picker-background-color-hover`, `--spectrum-picker-background-color-hover-open`, `--spectrum-picker-background-color-active`, `--spectrum-picker-background-color-key-focus`.",
+ "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-cjk-line-height-100": {
+ "value": "1.5",
+ "description": "Used by `--spectrum-picker-line-height-cjk`.",
+ "control": "text",
+ "category": "Global"
+ },
+ "spectrum-component-height-100": {
+ "value": "32px",
+ "description": "Used by `--spectrum-picker-block-size`.",
+ "control": "text",
+ "category": "Global"
+ },
+ "spectrum-field-default-width-medium": {
+ "value": "208px",
+ "description": "Used by `--spectrum-picker-inline-size`.",
+ "control": "text",
+ "category": "Global"
+ },
+ "spectrum-corner-radius-medium-size-medium": {
+ "value": "8px",
+ "description": "Used by `--spectrum-picker-border-radius`.",
+ "control": "text",
+ "category": "Global"
+ },
+ "spectrum-border-width-200": {
+ "value": "2px",
+ "description": "Used by `--spectrum-picker-border-width`.",
+ "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-label-to-component": {
+ "value": "0px",
+ "description": "Used by `--spectrum-picker-spacing-label-to-picker`.",
+ "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-text-to-visual-100": {
+ "value": "6px",
+ "description": "Used by `--spectrum-picker-spacing-starting-icon-to-text`, `--spectrum-picker-spacing-text-to-icon-inline-end`.",
+ "control": "text",
+ "category": "Global"
+ },
+ "spectrum-component-top-to-workflow-icon-100": {
+ "value": "6px",
+ "description": "Used by `--spectrum-picker-spacing-top-to-alert-icon`.",
+ "control": "text",
+ "category": "Global"
+ },
+ "spectrum-field-top-to-progress-circle-medium": {
+ "value": "6px",
+ "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-800)",
+ "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-popover-animation-distance`.",
+ "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-field-default-width-small": {
+ "value": "192px",
+ "description": "Used by `--spectrum-picker-inline-size`.",
+ "control": "text",
+ "category": "Global"
+ },
+ "spectrum-corner-radius-medium-size-small": {
+ "value": "7px",
+ "description": "Used by `--spectrum-picker-border-radius`.",
+ "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": "9px",
+ "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-starting-icon-to-text`, `--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-component-top-to-workflow-icon-75": {
+ "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-popover-animation-distance`.",
+ "control": "text",
+ "category": "Global"
+ },
+ "spectrum-font-size-200": {
+ "value": "16px",
+ "description": "Used by `--spectrum-picker-font-size`.",
+ "control": "text",
+ "category": "Global"
+ },
+ "spectrum-field-default-width-large": {
+ "value": "224px",
+ "description": "Used by `--spectrum-picker-inline-size`.",
+ "control": "text",
+ "category": "Global"
+ },
+ "spectrum-component-height-200": {
+ "value": "40px",
+ "description": "Used by `--spectrum-picker-block-size`.",
+ "control": "text",
+ "category": "Global"
+ },
+ "spectrum-corner-radius-medium-size-large": {
+ "value": "9px",
+ "description": "Used by `--spectrum-picker-border-radius`.",
+ "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-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-starting-icon-to-text`, `--spectrum-picker-spacing-text-to-icon-inline-end`.",
+ "control": "text",
+ "category": "Global"
+ },
+ "spectrum-component-top-to-workflow-icon-200": {
+ "value": "9px",
+ "description": "Used by `--spectrum-picker-spacing-top-to-alert-icon`.",
+ "control": "text",
+ "category": "Global"
+ },
+ "spectrum-field-top-to-progress-circle-large": {
+ "value": "9px",
+ "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-popover-animation-distance`.",
+ "control": "text",
+ "category": "Global"
+ },
+ "spectrum-font-size-300": {
+ "value": "18px",
+ "description": "Used by `--spectrum-picker-font-size`.",
+ "control": "text",
+ "category": "Global"
+ },
+ "spectrum-field-default-width-extra-large": {
+ "value": "240px",
+ "description": "Used by `--spectrum-picker-inline-size`.",
+ "control": "text",
+ "category": "Global"
+ },
+ "spectrum-component-height-300": {
+ "value": "48px",
+ "description": "Used by `--spectrum-picker-block-size`.",
+ "control": "text",
+ "category": "Global"
+ },
+ "spectrum-corner-radius-medium-size-extra-large": {
+ "value": "10px",
+ "description": "Used by `--spectrum-picker-border-radius`.",
+ "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-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": "18px",
+ "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-starting-icon-to-text`, `--spectrum-picker-spacing-text-to-icon-inline-end`.",
+ "control": "text",
+ "category": "Global"
+ },
+ "spectrum-component-top-to-workflow-icon-300": {
+ "value": "11px",
+ "description": "Used by `--spectrum-picker-spacing-top-to-alert-icon`.",
+ "control": "text",
+ "category": "Global"
+ },
+ "spectrum-field-top-to-progress-circle-extra-large": {
+ "value": "11px",
+ "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-popover-animation-distance`.",
+ "control": "text",
+ "category": "Global"
+ },
+ "spectrum-field-edge-to-text-quiet": {
+ "value": "0px",
+ "description": "Used by `--spectrum-picker-spacing-edge-to-text`.",
+ "control": "text",
+ "category": "Global"
+ },
+ "spectrum-downstate-height": {
+ "description": "Used by `.spectrum-Picker-button:active`.",
+ "control": "text",
+ "category": "Global"
+ },
+ "spectrum-downstate-width": {
+ "description": "Used by `.spectrum-Picker-button:active`.",
+ "control": "text",
+ "category": "Global"
+ },
+ "spectrum-component-size-width-ratio-down": {
+ "value": "0.3333",
+ "description": "Used by `.spectrum-Picker-button:active`.",
+ "control": "text",
+ "category": "Global"
+ },
+ "spectrum-component-size-difference-down": {
+ "value": "-2px",
+ "description": "Used by `.spectrum-Picker-button:active`.",
+ "control": "text",
+ "category": "Global"
+ }
+ },
+ "passthroughs": {
+ "mod-button-font-family": {
+ "category": "Passthrough"
+ },
+ "mod-button-line-height": {
+ "category": "Passthrough"
+ },
+ "mod-button-animation-duration": {
+ "category": "Passthrough"
+ },
+ "mod-popover-animation-distance": {
+ "category": "Passthrough"
+ }
+ },
+ "high-contrast": {
+ "highcontrast-picker-content-color-default": {
+ "value": "var(--mod-picker-font-color-default, var(--spectrum-picker-font-color-default))",
+ "description": "Defined in `.spectrum-Picker`.
Used by `.spectrum-Picker-button`, `.spectrum-Picker-button:active .spectrum-Picker-label.is-placeholder`, `.spectrum-Picker-button.is-keyboardFocused, .spectrum-Picker-button:focus-visible`, `.spectrum-Picker-button.is-keyboardFocused .spectrum-Picker-label.is-placeholder, .spectrum-Picker-button:focus-visible .spectrum-Picker-label.is-placeholder`, `.spectrum-Picker-button.is-keyboardFocused .spectrum-Picker-menuIcon, .spectrum-Picker-button:focus-visible .spectrum-Picker-menuIcon`, `.spectrum-Picker-button.is-open:not(.spectrum-Picker--quiet, :disabled, .is-disabled, .is-loading)`, `.spectrum-Picker-button.is-open:not(.spectrum-Picker--quiet, :disabled, .is-disabled, .is-loading) .spectrum-Picker-menuIcon`, `.spectrum-Picker-button.is-invalid:not(:disabled, .is-disabled) .spectrum-Picker-validationIcon`, `.spectrum-Picker-label.is-placeholder`, `.spectrum-Picker-button:hover`, `.spectrum-Picker-button:hover .spectrum-Picker-menuIcon`, `.spectrum-Picker-button.is-open:not(.spectrum-Picker--quiet, :disabled, .is-disabled, .is-loading):hover`, `.spectrum-Picker-button.is-open:not(.spectrum-Picker--quiet, :disabled, .is-disabled, .is-loading):hover .spectrum-Picker-menuIcon`, `.spectrum-Picker-label.is-placeholder:hover`, `.spectrum-Picker-label.is-placeholder:active`, `.spectrum-Picker-menuIcon`, `.spectrum-Picker-menuIcon:active`, `.spectrum-Picker--quiet .spectrum-Picker-button`.
Defaults to `var(--mod-picker-font-color-default, var(--spectrum-picker-font-color-default))`, 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-button`, `.spectrum-Picker-button:active`, `.spectrum-Picker-button.is-keyboardFocused, .spectrum-Picker-button:focus-visible`, `.spectrum-Picker-button.is-open:not(.spectrum-Picker--quiet, :disabled, .is-disabled, .is-loading)`, `.spectrum-Picker-button:hover`, `.spectrum-Picker-button.is-open:not(.spectrum-Picker--quiet, :disabled, .is-disabled, .is-loading):hover`, `.spectrum-Picker-button.is-disabled:not(.spectrum-Picker--quiet), .spectrum-Picker-button:disabled:not(.spectrum-Picker--quiet)`.
Defaults to `var(--mod-picker-background-color-disabled, var(--spectrum-picker-background-color-disabled))`, 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-button`, `.spectrum-Picker-button:active`, `.spectrum-Picker-button.is-keyboardFocused, .spectrum-Picker-button:focus-visible`, `.spectrum-Picker-button.is-open:not(.spectrum-Picker--quiet, :disabled, .is-disabled, .is-loading)`, `.spectrum-Picker-button.is-invalid:not(:disabled, .is-disabled)`, `.spectrum-Picker-button.is-invalid:not(:disabled, .is-disabled):active`, `.spectrum-Picker-button.is-invalid.is-open:not(:disabled, .is-disabled)`, `.spectrum-Picker-button.is-invalid.is-keyboardFocused:not(:disabled, .is-disabled), .spectrum-Picker-button.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-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-button.is-keyboardFocused:after, .spectrum-Picker-button:focus-visible:after`, `.spectrum-Picker--quiet .spectrum-Picker-button.is-keyboardFocused:after, .spectrum-Picker--quiet .spectrum-Picker-button: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-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-button:hover`, `.spectrum-Picker-button.is-open:not(.spectrum-Picker--quiet, :disabled, .is-disabled, .is-loading):hover`, `.spectrum-Picker-button.is-invalid:not(:disabled, .is-disabled):hover`, `.spectrum-Picker-button.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": "GrayText",
+ "description": "Defined in `.spectrum-Picker`.
Used by `.spectrum-Picker-button.is-disabled, .spectrum-Picker-button:disabled`.
Defaults to `GrayText`, if not set.",
+ "control": "color"
+ },
+ "highcontrast-picker-content-color-disabled": {
+ "value": "var(--mod-picker-icon-color-disabled, var(--spectrum-picker-icon-color-disabled))",
+ "description": "Defined in `.spectrum-Picker`.
Used by `.spectrum-Picker-button.is-disabled, .spectrum-Picker-button:disabled`, `.spectrum-Picker-button.is-disabled .spectrum-Picker-icon, .spectrum-Picker-button.is-disabled .spectrum-Picker-menuIcon, .spectrum-Picker-button.is-disabled .spectrum-Picker-validationIcon, .spectrum-Picker-button:disabled .spectrum-Picker-icon, .spectrum-Picker-button:disabled .spectrum-Picker-menuIcon, .spectrum-Picker-button:disabled .spectrum-Picker-validationIcon`, `.spectrum-Picker-button.is-disabled .spectrum-Picker-label.is-placeholder, .spectrum-Picker-button:disabled .spectrum-Picker-label.is-placeholder`, `.spectrum-Picker.is-loading .spectrum-Picker-menuIcon`.
Defaults to `var(--mod-picker-icon-color-disabled, var(--spectrum-picker-icon-color-disabled))`, if not set.",
+ "control": "color"
+ }
+ }
}
diff --git a/components/picker/stories/picker.stories.js b/components/picker/stories/picker.stories.js
index 306a1490bdf..734d6b3f3ec 100644
--- a/components/picker/stories/picker.stories.js
+++ b/components/picker/stories/picker.stories.js
@@ -3,11 +3,13 @@ import { WithDividers as MenuStories } from "@spectrum-css/menu/stories/menu.sto
import { Sizes, withDownStateDimensionCapture } 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.
*/
@@ -157,12 +159,7 @@ export default {
},
packageJson,
metadata,
- downState: {
- selectors: [".spectrum-Picker:not(:disabled, .is-disabled, .is-loading)"],
- },
- status: {
- type: "migrated",
- },
+ cssprops: metadata.modifiers,
},
decorators: [
withDownStateDimensionCapture,
diff --git a/components/pickerbutton/dist/metadata.json b/components/pickerbutton/dist/metadata.json
index c6186980d83..70f5d4bc0dc 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,124 +25,598 @@
".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-border-width-100",
- "--spectrum-component-height-100",
- "--spectrum-component-height-200",
- "--spectrum-component-height-300",
- "--spectrum-component-height-75",
- "--spectrum-corner-radius-100",
- "--spectrum-corner-radius-200",
- "--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-gray-50",
- "--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"
+ ".spectrum-PickerButton.spectrum-PickerButton--uiicononly"
],
- "passthroughs": [],
- "high-contrast": []
+ "modifiers": {
+ "mod-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": {
+ "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": {
+ "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": {
+ "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": {
+ "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": {
+ "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": {
+ "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": {
+ "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": {
+ "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": {
+ "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": {
+ "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": {
+ "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": {
+ "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": {
+ "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": {
+ "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": {
+ "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": {
+ "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": {
+ "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": {
+ "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": {
+ "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": {
+ "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": {
+ "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": {
+ "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": {
+ "description": "Used by `.spectrum-PickerButton`.
Defaults to `var(--spectrum-picker-button-width)`, if not set.",
+ "control": "text",
+ "category": "Modifier"
+ },
+ "mod-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": {
+ "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": {
+ "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": {
+ "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": {
+ "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": {
+ "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": {
+ "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": {
+ "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": {
+ "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": {
+ "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": {
+ "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": {
+ "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": {
+ "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": {
+ "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": {
+ "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-padding": {
+ "value": "4px",
+ "description": "Defined in `.spectrum-PickerButton`.
Used by `.spectrum-PickerButton`, `.spectrum-PickerButton-fill`.
Defaults to `4px`, if not set.",
+ "control": "text",
+ "category": "Component"
+ },
+ "spectrum-picker-button-height": {
+ "value": "48px",
+ "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`.
Defaults to `var(--spectrum-component-height-300)`, if not set.",
+ "control": "text",
+ "category": "Component"
+ },
+ "spectrum-picker-button-width": {
+ "value": "48px",
+ "description": "Defined in `.spectrum-PickerButton`, `.spectrum-PickerButton.spectrum-PickerButton--sizeS`, `.spectrum-PickerButton.spectrum-PickerButton--sizeL`, `.spectrum-PickerButton.spectrum-PickerButton--sizeXL`.
Used by `.spectrum-PickerButton`.
Defaults to `var(--spectrum-component-height-300)`, if not set.",
+ "control": "text",
+ "category": "Component"
+ },
+ "spectrum-picker-button-gap": {
+ "value": "5px",
+ "description": "Defined in `.spectrum-PickerButton`.
Used by `.spectrum-PickerButton-fill`.
Defaults to `var(--spectrum-text-to-visual-50)`, if not set.",
+ "control": "text",
+ "category": "Component"
+ },
+ "spectrum-picker-button-label-padding": {
+ "value": "8px",
+ "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`.
Defaults to `var(--spectrum-text-to-visual-300)`, if not set.",
+ "control": "text",
+ "category": "Component"
+ },
+ "spectrum-picker-button-fill-padding": {
+ "value": "17px",
+ "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`.
Defaults to `var(--spectrum-field-edge-to-disclosure-icon-300)`, if not set.",
+ "control": "text",
+ "category": "Component"
+ },
+ "spectrum-picker-button-icon-color": {
+ "value": "var(--spectrum-gray-800)",
+ "description": "Defined in `.spectrum-PickerButton`.
Used by `.spectrum-PickerButton-icon`.
Defaults to `var(--spectrum-neutral-content-color-default)`, if not set.",
+ "control": "color",
+ "category": "Component"
+ },
+ "spectrum-picker-button-icon-color-hover": {
+ "value": "var(--spectrum-gray-900)",
+ "description": "Defined in `.spectrum-PickerButton`.
Used by `--mod-picker-button-icon-color`.
Defaults to `var(--spectrum-neutral-content-color-hover)`, if not set.",
+ "control": "color",
+ "category": "Component"
+ },
+ "spectrum-picker-button-icon-color-down": {
+ "value": "var(--spectrum-gray-900)",
+ "description": "Defined in `.spectrum-PickerButton`.
Used by `--mod-picker-button-icon-color`.
Defaults to `var(--spectrum-neutral-content-color-down)`, if not set.",
+ "control": "color",
+ "category": "Component"
+ },
+ "spectrum-picker-button-icon-color-key-focus": {
+ "value": "var(--spectrum-gray-900)",
+ "description": "Defined in `.spectrum-PickerButton`.
Used by `--mod-picker-button-icon-color`.
Defaults to `var(--spectrum-neutral-content-color-key-focus)`, if not set.",
+ "control": "color",
+ "category": "Component"
+ },
+ "spectrum-picker-button-font-color": {
+ "value": "var(--spectrum-gray-800)",
+ "description": "Defined in `.spectrum-PickerButton`.
Used by `.spectrum-PickerButton-label`.
Defaults to `var(--spectrum-neutral-content-color-default)`, if not set.",
+ "control": "color",
+ "category": "Component"
+ },
+ "spectrum-picker-button-font-color-hover": {
+ "value": "var(--spectrum-gray-900)",
+ "description": "Defined in `.spectrum-PickerButton`.
Used by `--mod-picker-button-font-color`.
Defaults to `var(--spectrum-neutral-content-color-hover)`, if not set.",
+ "control": "color",
+ "category": "Component"
+ },
+ "spectrum-picker-button-font-color-down": {
+ "value": "var(--spectrum-gray-900)",
+ "description": "Defined in `.spectrum-PickerButton`.
Used by `--mod-picker-button-font-color`.
Defaults to `var(--spectrum-neutral-content-color-down)`, if not set.",
+ "control": "color",
+ "category": "Component"
+ },
+ "spectrum-picker-button-font-color-key-focus": {
+ "value": "var(--spectrum-gray-900)",
+ "description": "Defined in `.spectrum-PickerButton`.
Used by `--mod-picker-button-font-color`.
Defaults to `var(--spectrum-neutral-content-color-key-focus)`, if not set.",
+ "control": "color",
+ "category": "Component"
+ },
+ "spectrum-picker-button-font-family": {
+ "value": "var(--spectrum-sans-font-family-stack)",
+ "description": "Defined in `.spectrum-PickerButton`.
Used by `.spectrum-PickerButton-label`.
Defaults to `var(--spectrum-sans-font-family-stack)`, if not set.",
+ "control": "text",
+ "category": "Component"
+ },
+ "spectrum-picker-button-font-style": {
+ "value": "normal",
+ "description": "Defined in `.spectrum-PickerButton`.
Used by `.spectrum-PickerButton-label`.
Defaults to `var(--spectrum-default-font-style)`, if not set.",
+ "control": "text",
+ "category": "Component"
+ },
+ "spectrum-picker-button-font-weight": {
+ "value": "400",
+ "description": "Defined in `.spectrum-PickerButton`.
Used by `.spectrum-PickerButton-label`.
Defaults to `var(--spectrum-body-sans-serif-font-weight)`, if not set.",
+ "control": "text",
+ "category": "Component"
+ },
+ "spectrum-picker-button-font-size": {
+ "value": "18px",
+ "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`.
Defaults to `var(--spectrum-font-size-300)`, if not set.",
+ "control": "text",
+ "category": "Component"
+ },
+ "spectrum-picker-button-border-color": {
+ "value": "inherit",
+ "description": "Defined in `.spectrum-PickerButton`.
Used by `.spectrum-PickerButton-fill`.
Defaults to `inherit`, if not set.",
+ "control": "color",
+ "category": "Component"
+ },
+ "spectrum-picker-button-border-radius": {
+ "value": "4px",
+ "description": "Defined in `.spectrum-PickerButton`.
Used by `.spectrum-PickerButton-fill`.
Defaults to `var(--spectrum-corner-radius-100)`, if not set.",
+ "control": "text",
+ "category": "Component"
+ },
+ "spectrum-picker-button-border-radius-rounded-sided": {
+ "value": "0",
+ "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`.
Defaults to `0`, if not set.",
+ "control": "text",
+ "category": "Component"
+ },
+ "spectrum-picker-button-border-radius-sided": {
+ "value": "0",
+ "description": "Defined in `.spectrum-PickerButton`.
Used by `.spectrum-PickerButton--right .spectrum-PickerButton-fill`, `.spectrum-PickerButton--left .spectrum-PickerButton-fill`.
Defaults to `0`, if not set.",
+ "control": "text",
+ "category": "Component"
+ },
+ "spectrum-picker-button-border-width": {
+ "value": "1px",
+ "description": "Defined in `.spectrum-PickerButton`.
Used by `.spectrum-PickerButton-fill`.
Defaults to `var(--spectrum-border-width-100)`, if not set.",
+ "control": "text",
+ "category": "Component"
+ },
+ "spectrum-picker-button-border-radius-rounded": {
+ "value": "5px",
+ "description": "Defined in `.spectrum-PickerButton`.
Used by `.spectrum-PickerButton--rounded .spectrum-PickerButton-fill`.
Defaults to `var(--spectrum-corner-radius-200)`, if not set.",
+ "control": "text",
+ "category": "Component"
+ },
+ "spectrum-picker-button-background-color": {
+ "value": "light-dark(rgb(248, 248, 248), rgb(27, 27, 27))",
+ "description": "Defined in `.spectrum-PickerButton`.
Used by `.spectrum-PickerButton-fill`.
Defaults to `var(--spectrum-gray-50)`, if not set.",
+ "control": "color",
+ "category": "Component"
+ },
+ "spectrum-picker-button-background-color-hover": {
+ "value": "light-dark(rgb(233, 233, 233), rgb(44, 44, 44))",
+ "description": "Defined in `.spectrum-PickerButton`.
Used by `--mod-picker-button-background-color`.
Defaults to `var(--spectrum-gray-100)`, if not set.",
+ "control": "color",
+ "category": "Component"
+ },
+ "spectrum-picker-button-background-color-down": {
+ "value": "light-dark(rgb(225, 225, 225), rgb(50, 50, 50))",
+ "description": "Defined in `.spectrum-PickerButton`.
Used by `--mod-picker-button-background-color`.
Defaults to `var(--spectrum-gray-200)`, if not set.",
+ "control": "color",
+ "category": "Component"
+ },
+ "spectrum-picker-button-background-color-key-focus": {
+ "value": "light-dark(rgb(233, 233, 233), rgb(44, 44, 44))",
+ "description": "Defined in `.spectrum-PickerButton`.
Used by `--mod-picker-button-background-color`.
Defaults to `var(--spectrum-gray-100)`, if not set.",
+ "control": "color",
+ "category": "Component"
+ },
+ "spectrum-picker-button-background-animation-duration": {
+ "value": "var(--spectrum-animation-duration-100)",
+ "description": "Defined in `.spectrum-PickerButton`.
Used by `.spectrum-PickerButton-fill`.
Defaults to `var(--spectrum-animation-duration-100)`, if not set.",
+ "control": "text",
+ "category": "Component"
+ }
+ },
+ "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-corner-radius-100": {
+ "value": "4px",
+ "description": "Used by `--spectrum-picker-button-border-radius`.",
+ "control": "text",
+ "category": "Global"
+ },
+ "spectrum-border-width-100": {
+ "value": "1px",
+ "description": "Used by `--spectrum-picker-button-border-width`.",
+ "control": "text",
+ "category": "Global"
+ },
+ "spectrum-corner-radius-200": {
+ "value": "5px",
+ "description": "Used by `--spectrum-picker-button-border-radius-rounded`.",
+ "control": "text",
+ "category": "Global"
+ },
+ "spectrum-gray-50": {
+ "value": "light-dark(rgb(248, 248, 248), rgb(27, 27, 27))",
+ "description": "Used by `--spectrum-picker-button-background-color`.",
+ "control": "text",
+ "category": "Global"
+ },
+ "spectrum-gray-100": {
+ "value": "light-dark(rgb(233, 233, 233), rgb(44, 44, 44))",
+ "description": "Used by `--spectrum-picker-button-background-color-hover`, `--spectrum-picker-button-background-color-key-focus`.",
+ "control": "text",
+ "category": "Global"
+ },
+ "spectrum-gray-200": {
+ "value": "light-dark(rgb(225, 225, 225), rgb(50, 50, 50))",
+ "description": "Used by `--spectrum-picker-button-background-color-down`.",
+ "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"
+ }
+ },
+ "passthroughs": {},
+ "high-contrast": {}
}
diff --git a/components/pickerbutton/stories/pickerbutton.stories.js b/components/pickerbutton/stories/pickerbutton.stories.js
index c01a0f00eec..2278057c1dc 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,10 @@ export default {
parameters: {
packageJson,
metadata,
+ cssprops: {
+ ...metadata.modifiers,
+ ...metadata.component,
+ },
},
};
diff --git a/components/pickerbutton/stories/template.js b/components/pickerbutton/stories/template.js
index 6adcb7398fd..18ace797032 100644
--- a/components/pickerbutton/stories/template.js
+++ b/components/pickerbutton/stories/template.js
@@ -11,7 +11,7 @@ import "../index.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 f78a1db58ae..b11fa0f4c5a 100644
--- a/components/popover/dist/metadata.json
+++ b/components/popover/dist/metadata.json
@@ -85,62 +85,298 @@
".spectrum-Popover.spectrum-Popover--withTip",
".spectrum-Popover.spectrum-Popover--withTip .spectrum-Popover-tip .spectrum-Popover-tip-triangle"
],
- "modifiers": [
- "--mod-overlay-animation-duration",
- "--mod-overlay-animation-duration-opened",
- "--mod-popover-animation-distance",
- "--mod-popover-background-color",
- "--mod-popover-border-color",
- "--mod-popover-border-width",
- "--mod-popover-box-shadow",
- "--mod-popover-content-area-spacing",
- "--mod-popover-corner-radius",
- "--mod-popover-drop-shadow-blur",
- "--mod-popover-drop-shadow-color",
- "--mod-popover-drop-shadow-x",
- "--mod-popover-drop-shadow-y",
- "--mod-popover-filter",
- "--mod-popover-pointer-edge-spacing",
- "--mod-popover-pointer-height",
- "--mod-popover-pointer-width"
- ],
- "component": [
- "--spectrum-popover-animation-distance",
- "--spectrum-popover-background-color",
- "--spectrum-popover-border-color-rgb",
- "--spectrum-popover-border-color-with-transparency",
- "--spectrum-popover-border-opacity",
- "--spectrum-popover-border-transparency",
- "--spectrum-popover-border-width",
- "--spectrum-popover-box-shadow",
- "--spectrum-popover-content-area-spacing",
- "--spectrum-popover-corner-radius",
- "--spectrum-popover-drop-shadow-blur",
- "--spectrum-popover-drop-shadow-color",
- "--spectrum-popover-drop-shadow-x",
- "--spectrum-popover-drop-shadow-y",
- "--spectrum-popover-edge-to-content-area",
- "--spectrum-popover-filter",
- "--spectrum-popover-pointer-edge-offset",
- "--spectrum-popover-pointer-edge-spacing",
- "--spectrum-popover-pointer-height",
- "--spectrum-popover-pointer-width",
- "--spectrum-popover-tip-height",
- "--spectrum-popover-tip-width"
- ],
- "global": [
- "--spectrum-animation-duration-0",
- "--spectrum-animation-duration-100",
- "--spectrum-background-layer-2-color",
- "--spectrum-border-width-100",
- "--spectrum-corner-radius-large-default",
- "--spectrum-drop-shadow-elevated-blur",
- "--spectrum-drop-shadow-elevated-color",
- "--spectrum-drop-shadow-elevated-x",
- "--spectrum-drop-shadow-elevated-y",
- "--spectrum-gray-200-rgb",
- "--spectrum-spacing-100"
- ],
- "passthroughs": [],
- "high-contrast": ["--highcontrast-popover-border-color"]
+ "modifiers": {
+ "mod-overlay-animation-duration": {
+ "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": {
+ "description": "Used by `.spectrum-Popover.is-open`.
Defaults to `var(--spectrum-animation-duration-0, 0s)`, if not set.",
+ "control": "text",
+ "category": "Modifier"
+ },
+ "mod-popover-drop-shadow-x": {
+ "description": "Used by `--spectrum-popover-filter`, `--spectrum-popover-box-shadow`.
Defaults to `var(--spectrum-popover-drop-shadow-x)`, if not set.",
+ "control": "text",
+ "category": "Modifier"
+ },
+ "mod-popover-drop-shadow-y": {
+ "description": "Used by `--spectrum-popover-filter`, `--spectrum-popover-box-shadow`.
Defaults to `var(--spectrum-popover-drop-shadow-y)`, if not set.",
+ "control": "text",
+ "category": "Modifier"
+ },
+ "mod-popover-drop-shadow-blur": {
+ "description": "Used by `--spectrum-popover-filter`, `--spectrum-popover-box-shadow`.
Defaults to `var(--spectrum-popover-drop-shadow-blur)`, if not set.",
+ "control": "text",
+ "category": "Modifier"
+ },
+ "mod-popover-drop-shadow-color": {
+ "description": "Used by `--spectrum-popover-filter`, `--spectrum-popover-box-shadow`.
Defaults to `var(--spectrum-popover-drop-shadow-color)`, if not set.",
+ "control": "color",
+ "category": "Modifier"
+ },
+ "mod-popover-content-area-spacing": {
+ "description": "Used by `.spectrum-Popover`.
Defaults to `var(--spectrum-popover-content-area-spacing)`, if not set.",
+ "control": "text",
+ "category": "Modifier"
+ },
+ "mod-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": {
+ "description": "Used by `.spectrum-Popover`, `.spectrum-Popover.spectrum-Popover--withTip .spectrum-Popover-tip .spectrum-Popover-tip-triangle`.
Defaults to `var(--spectrum-popover-border-color-with-transparency)`, if not set.",
+ "control": "color",
+ "category": "Modifier"
+ },
+ "mod-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": {
+ "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-box-shadow": {
+ "description": "Used by `.spectrum-Popover`.
Defaults to `var(--spectrum-popover-box-shadow)`, if not set.",
+ "control": "text",
+ "category": "Modifier"
+ },
+ "mod-popover-filter": {
+ "description": "Used by `.spectrum-Popover.spectrum-Popover--withTip`.
Defaults to `var(--spectrum-popover-filter)`, if not set.",
+ "control": "text",
+ "category": "Modifier"
+ },
+ "mod-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--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-height)`, if not set.",
+ "control": "text",
+ "category": "Modifier"
+ },
+ "mod-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)`, `.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)`.
Defaults to `var(--spectrum-popover-animation-distance)`, if not set.",
+ "control": "text",
+ "category": "Modifier"
+ },
+ "mod-popover-pointer-width": {
+ "description": "Used by `.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": {
+ "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": {
+ "value": "8px",
+ "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)`, `.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)`.
Defaults to `var(--spectrum-spacing-100)`, if not set.",
+ "control": "text",
+ "category": "Component"
+ },
+ "spectrum-popover-background-color": {
+ "value": "var(--spectrum-gray-25)",
+ "description": "Defined in `.spectrum-Popover`.
Used by `.spectrum-Popover`, `.spectrum-Popover.spectrum-Popover--withTip .spectrum-Popover-tip .spectrum-Popover-tip-triangle`.
Defaults to `var(--spectrum-background-layer-2-color)`, if not set.",
+ "control": "color",
+ "category": "Component"
+ },
+ "spectrum-popover-border-width": {
+ "value": "1px",
+ "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`.
Defaults to `var(--spectrum-border-width-100)`, if not set.",
+ "control": "text",
+ "category": "Component"
+ },
+ "spectrum-popover-border-color-rgb": {
+ "value": "var(--spectrum-gray-200-rgb)",
+ "description": "Defined in `.spectrum-Popover`.
Used by `--spectrum-popover-border-color-with-transparency`.
Defaults to `var(--spectrum-gray-200-rgb)`, if not set.",
+ "control": "color",
+ "category": "Component"
+ },
+ "spectrum-popover-border-transparency": {
+ "value": "light-dark(0, 1.0)",
+ "description": "Defined in `.spectrum-Popover`.
Used by `--spectrum-popover-border-color-with-transparency`.
Defaults to `var(--spectrum-popover-border-opacity)`, if not set.",
+ "control": "text",
+ "category": "Component"
+ },
+ "spectrum-popover-border-opacity": {
+ "value": "light-dark(0, 1.0)",
+ "description": "Used by `--spectrum-popover-border-transparency`.",
+ "control": "text",
+ "category": "Component"
+ },
+ "spectrum-popover-border-color-with-transparency": {
+ "value": "rgb(var(--spectrum-popover-border-color-rgb), var(--spectrum-popover-border-transparency))",
+ "description": "Defined in `.spectrum-Popover`.
Used by `.spectrum-Popover`, `.spectrum-Popover.spectrum-Popover--withTip .spectrum-Popover-tip .spectrum-Popover-tip-triangle`.
Defaults to `rgb(var(--spectrum-popover-border-color-rgb), var(--spectrum-popover-border-transparency))`, if not set.",
+ "control": "color",
+ "category": "Component"
+ },
+ "spectrum-popover-content-area-spacing": {
+ "value": "8px",
+ "description": "Defined in `.spectrum-Popover`.
Used by `.spectrum-Popover`.
Defaults to `var(--spectrum-popover-edge-to-content-area)`, if not set.",
+ "control": "text",
+ "category": "Component"
+ },
+ "spectrum-popover-edge-to-content-area": {
+ "value": "8px",
+ "description": "Used by `--spectrum-popover-content-area-spacing`.",
+ "control": "text",
+ "category": "Component"
+ },
+ "spectrum-popover-drop-shadow-x": {
+ "value": "0px",
+ "description": "Defined in `.spectrum-Popover`.
Used by `--spectrum-popover-filter`, `--spectrum-popover-box-shadow`.
Defaults to `var(--spectrum-drop-shadow-elevated-x)`, if not set.",
+ "control": "text",
+ "category": "Component"
+ },
+ "spectrum-popover-drop-shadow-y": {
+ "value": "2px",
+ "description": "Defined in `.spectrum-Popover`.
Used by `--spectrum-popover-filter`, `--spectrum-popover-box-shadow`.
Defaults to `var(--spectrum-drop-shadow-elevated-y)`, if not set.",
+ "control": "text",
+ "category": "Component"
+ },
+ "spectrum-popover-drop-shadow-blur": {
+ "value": "8px",
+ "description": "Defined in `.spectrum-Popover`.
Used by `--spectrum-popover-filter`, `--spectrum-popover-box-shadow`.
Defaults to `var(--spectrum-drop-shadow-elevated-blur)`, if not set.",
+ "control": "text",
+ "category": "Component"
+ },
+ "spectrum-popover-drop-shadow-color": {
+ "value": "var(--spectrum-drop-shadow-color-200)",
+ "description": "Defined in `.spectrum-Popover`.
Used by `--spectrum-popover-filter`, `--spectrum-popover-box-shadow`.
Defaults to `var(--spectrum-drop-shadow-elevated-color)`, if not set.",
+ "control": "color",
+ "category": "Component"
+ },
+ "spectrum-popover-corner-radius": {
+ "value": "10px",
+ "description": "Defined in `.spectrum-Popover`.
Used by `--spectrum-popover-pointer-edge-offset`, `.spectrum-Popover`.
Defaults to `var(--spectrum-corner-radius-large-default)`, if not set.",
+ "control": "text",
+ "category": "Component"
+ },
+ "spectrum-popover-pointer-width": {
+ "value": "16px",
+ "description": "Defined in `.spectrum-Popover`.
Used by `.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-tip-width)`, if not set.",
+ "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": {
+ "value": "8px",
+ "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--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-tip-height)`, if not set.",
+ "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": {
+ "value": "calc(var(--spectrum-popover-corner-radius) + var(--spectrum-popover-tip-width) / 2)",
+ "description": "Defined in `.spectrum-Popover`.
Used by `--spectrum-popover-pointer-edge-spacing`.
Defaults to `calc(var(--spectrum-popover-corner-radius) + var(--spectrum-popover-tip-width) / 2)`, if not set.",
+ "control": "text",
+ "category": "Component"
+ },
+ "spectrum-popover-pointer-edge-spacing": {
+ "value": "calc(var(--spectrum-popover-pointer-edge-offset) - var(--spectrum-popover-tip-width) / 2)",
+ "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`.
Defaults to `calc(var(--spectrum-popover-pointer-edge-offset) - var(--spectrum-popover-tip-width) / 2)`, if not set.",
+ "control": "text",
+ "category": "Component"
+ },
+ "spectrum-popover-filter": {
+ "value": "drop-shadow(var(--mod-popover-drop-shadow-x, var(--spectrum-popover-drop-shadow-x)) var(--mod-popover-drop-shadow-y, var(--spectrum-popover-drop-shadow-y)) calc(var(--mod-popover-drop-shadow-blur, var(--spectrum-popover-drop-shadow-blur)) / 2) var(--mod-popover-drop-shadow-color, var(--spectrum-popover-drop-shadow-color)))",
+ "description": "Defined in `.spectrum-Popover`.
Used by `.spectrum-Popover.spectrum-Popover--withTip`.
Defaults to `drop-shadow(var(--mod-popover-drop-shadow-x, var(--spectrum-popover-drop-shadow-x)) var(--mod-popover-drop-shadow-y, var(--spectrum-popover-drop-shadow-y)) calc(var(--mod-popover-drop-shadow-blur, var(--spectrum-popover-drop-shadow-blur)) / 2) var(--mod-popover-drop-shadow-color, var(--spectrum-popover-drop-shadow-color)))`, if not set.",
+ "control": "text",
+ "category": "Component"
+ },
+ "spectrum-popover-box-shadow": {
+ "value": "var(--mod-popover-drop-shadow-x, var(--spectrum-popover-drop-shadow-x)) var(--mod-popover-drop-shadow-y, var(--spectrum-popover-drop-shadow-y)) var(--mod-popover-drop-shadow-blur, var(--spectrum-popover-drop-shadow-blur)) var(--mod-popover-drop-shadow-color, var(--spectrum-popover-drop-shadow-color))",
+ "description": "Defined in `.spectrum-Popover`.
Used by `.spectrum-Popover`.
Defaults to `var(--mod-popover-drop-shadow-x, var(--spectrum-popover-drop-shadow-x)) var(--mod-popover-drop-shadow-y, var(--spectrum-popover-drop-shadow-y)) var(--mod-popover-drop-shadow-blur, var(--spectrum-popover-drop-shadow-blur)) var(--mod-popover-drop-shadow-color, var(--spectrum-popover-drop-shadow-color))`, if not set.",
+ "control": "text",
+ "category": "Component"
+ }
+ },
+ "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-25)",
+ "description": "Used by `--spectrum-popover-background-color`.",
+ "control": "color",
+ "category": "Global"
+ },
+ "spectrum-border-width-100": {
+ "value": "1px",
+ "description": "Used by `--spectrum-popover-border-width`.",
+ "control": "text",
+ "category": "Global"
+ },
+ "spectrum-gray-200-rgb": {
+ "description": "Used by `--spectrum-popover-border-color-rgb`.",
+ "control": "text",
+ "category": "Global"
+ },
+ "spectrum-drop-shadow-elevated-x": {
+ "value": "0px",
+ "description": "Used by `--spectrum-popover-drop-shadow-x`.",
+ "control": "text",
+ "category": "Global"
+ },
+ "spectrum-drop-shadow-elevated-y": {
+ "value": "2px",
+ "description": "Used by `--spectrum-popover-drop-shadow-y`.",
+ "control": "text",
+ "category": "Global"
+ },
+ "spectrum-drop-shadow-elevated-blur": {
+ "value": "8px",
+ "description": "Used by `--spectrum-popover-drop-shadow-blur`.",
+ "control": "text",
+ "category": "Global"
+ },
+ "spectrum-drop-shadow-elevated-color": {
+ "value": "var(--spectrum-drop-shadow-color-200)",
+ "description": "Used by `--spectrum-popover-drop-shadow-color`.",
+ "control": "color",
+ "category": "Global"
+ },
+ "spectrum-corner-radius-large-default": {
+ "value": "10px",
+ "description": "Used by `--spectrum-popover-corner-radius`.",
+ "control": "text",
+ "category": "Global"
+ }
+ },
+ "passthroughs": {},
+ "high-contrast": {
+ "highcontrast-popover-border-color": {
+ "value": "var(--mod-popover-border-color, var(--spectrum-popover-border-color-with-transparency))",
+ "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-with-transparency))`, if not set.",
+ "control": "color"
+ }
+ }
}
diff --git a/components/popover/stories/popover.stories.js b/components/popover/stories/popover.stories.js
index 54bf85af75f..168062f3192 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/or drop shadow) and floats on top of the rest of the interface.
@@ -98,9 +100,7 @@ export default {
},
packageJson,
metadata,
- status: {
- type: "migrated",
- },
+ cssprops: metadata.modifiers,
},
tags: ["migrated"],
};
diff --git a/components/progressbar/dist/metadata.json b/components/progressbar/dist/metadata.json
index 3caa917a2a5..5bbcb959ed2 100644
--- a/components/progressbar/dist/metadata.json
+++ b/components/progressbar/dist/metadata.json
@@ -31,92 +31,460 @@
".spectrum-ProgressBar--staticWhite .spectrum-ProgressBar-track",
".spectrum-ProgressBar-track"
],
- "modifiers": [
- "--mod-progressbar-animation-duration-indeterminate",
- "--mod-progressbar-animation-ease-in-out-indeterminate",
- "--mod-progressbar-fill-color",
- "--mod-progressbar-fill-color-black",
- "--mod-progressbar-fill-color-white",
- "--mod-progressbar-fill-size-indeterminate",
- "--mod-progressbar-font-size",
- "--mod-progressbar-inline-size",
- "--mod-progressbar-label-and-value-black",
- "--mod-progressbar-label-and-value-white",
- "--mod-progressbar-line-height",
- "--mod-progressbar-line-height-cjk",
- "--mod-progressbar-max-size",
- "--mod-progressbar-min-size",
- "--mod-progressbar-spacing-label-to-progressbar",
- "--mod-progressbar-spacing-label-to-text",
- "--mod-progressbar-spacing-top-to-text",
- "--mod-progressbar-text-color",
- "--mod-progressbar-thickness",
- "--mod-progressbar-track-color",
- "--mod-spacing-progressbar-label-to-text"
- ],
- "component": [
- "--spectrum-progress-bar-maximum-width",
- "--spectrum-progress-bar-minimum-width",
- "--spectrum-progress-bar-thickness-extra-large",
- "--spectrum-progress-bar-thickness-large",
- "--spectrum-progress-bar-thickness-medium",
- "--spectrum-progress-bar-thickness-small",
- "--spectrum-progressbar-animation-duration-indeterminate",
- "--spectrum-progressbar-animation-ease-in-out-indeterminate",
- "--spectrum-progressbar-corner-radius",
- "--spectrum-progressbar-fill-color",
- "--spectrum-progressbar-fill-color-black",
- "--spectrum-progressbar-fill-color-white",
- "--spectrum-progressbar-fill-size-indeterminate",
- "--spectrum-progressbar-font-size",
- "--spectrum-progressbar-inline-size",
- "--spectrum-progressbar-label-and-value-black",
- "--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-spacing-label-to-progressbar",
- "--spectrum-progressbar-spacing-label-to-text",
- "--spectrum-progressbar-spacing-top-to-text",
- "--spectrum-progressbar-text-color",
- "--spectrum-progressbar-thickness",
- "--spectrum-progressbar-track-color",
- "--spectrum-progressbar-track-color-black",
- "--spectrum-progressbar-track-color-white"
- ],
- "global": [
- "--spectrum-accent-content-color-default",
- "--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-full",
- "--spectrum-font-size-100",
- "--spectrum-font-size-200",
- "--spectrum-font-size-300",
- "--spectrum-font-size-75",
- "--spectrum-line-height-100",
- "--spectrum-meter-width",
- "--spectrum-neutral-subdued-content-color-default",
- "--spectrum-spacing-200",
- "--spectrum-spacing-75",
- "--spectrum-static-black-text-color",
- "--spectrum-static-black-track-color",
- "--spectrum-static-black-track-indicator-color",
- "--spectrum-static-white-text-color",
- "--spectrum-static-white-track-color",
- "--spectrum-static-white-track-indicator-color",
- "--spectrum-track-color"
- ],
- "passthroughs": [],
- "high-contrast": [
- "--highcontrast-progressbar-fill-color",
- "--highcontrast-progressbar-fill-color-black",
- "--highcontrast-progressbar-fill-color-white",
- "--highcontrast-progressbar-track-color"
- ]
+ "modifiers": {
+ "mod-progressbar-inline-size": {
+ "description": "Used by `.spectrum-ProgressBar`, `.spectrum-ProgressBar--sideLabel .spectrum-ProgressBar-track`.
Defaults to `var(--spectrum-progressbar-inline-size)`, if not set.",
+ "control": "text",
+ "category": "Modifier"
+ },
+ "mod-progressbar-max-size": {
+ "description": "Used by `.spectrum-ProgressBar`.
Defaults to `var(--spectrum-progressbar-max-size)`, if not set.",
+ "control": "text",
+ "category": "Modifier"
+ },
+ "mod-progressbar-min-size": {
+ "description": "Used by `.spectrum-ProgressBar`.
Defaults to `var(--spectrum-progressbar-min-size)`, if not set.",
+ "control": "text",
+ "category": "Modifier"
+ },
+ "mod-progressbar-spacing-top-to-text": {
+ "description": "Used by `.spectrum-ProgressBar .spectrum-ProgressBar-label, .spectrum-ProgressBar .spectrum-ProgressBar-percentage`.
Defaults to `var(--spectrum-progressbar-spacing-top-to-text)`, if not set.",
+ "control": "text",
+ "category": "Modifier"
+ },
+ "mod-progressbar-spacing-label-to-progressbar": {
+ "description": "Used by `.spectrum-ProgressBar .spectrum-ProgressBar-label, .spectrum-ProgressBar .spectrum-ProgressBar-percentage`.
Defaults to `var(--spectrum-progressbar-spacing-label-to-progressbar)`, if not set.",
+ "control": "text",
+ "category": "Modifier"
+ },
+ "mod-progressbar-line-height": {
+ "description": "Used by `.spectrum-ProgressBar .spectrum-ProgressBar-label, .spectrum-ProgressBar .spectrum-ProgressBar-percentage`.
Defaults to `var(--spectrum-progressbar-line-height)`, if not set.",
+ "control": "text",
+ "category": "Modifier"
+ },
+ "mod-progressbar-font-size": {
+ "description": "Used by `.spectrum-ProgressBar .spectrum-ProgressBar-label, .spectrum-ProgressBar .spectrum-ProgressBar-percentage`.
Defaults to `var(--spectrum-progressbar-font-size)`, if not set.",
+ "control": "text",
+ "category": "Modifier"
+ },
+ "mod-progressbar-text-color": {
+ "description": "Used by `.spectrum-ProgressBar .spectrum-ProgressBar-label, .spectrum-ProgressBar .spectrum-ProgressBar-percentage`.
Defaults to `var(--spectrum-progressbar-text-color)`, if not set.",
+ "control": "color",
+ "category": "Modifier"
+ },
+ "mod-progressbar-line-height-cjk": {
+ "description": "Used by `.spectrum-ProgressBar .spectrum-ProgressBar-label:lang(ja), .spectrum-ProgressBar .spectrum-ProgressBar-label:lang(ko), .spectrum-ProgressBar .spectrum-ProgressBar-label:lang(zh), .spectrum-ProgressBar .spectrum-ProgressBar-percentage:lang(ja), .spectrum-ProgressBar .spectrum-ProgressBar-percentage:lang(ko), .spectrum-ProgressBar .spectrum-ProgressBar-percentage:lang(zh)`.
Defaults to `var(--spectrum-progressbar-line-height-cjk)`, if not set.",
+ "control": "text",
+ "category": "Modifier"
+ },
+ "mod-progressbar-spacing-label-to-text": {
+ "description": "Used by `.spectrum-ProgressBar .spectrum-ProgressBar-percentage`, `.spectrum-ProgressBar--sideLabel .spectrum-ProgressBar-label`.
Defaults to `var(--spectrum-progressbar-spacing-label-to-text)`, if not set.",
+ "control": "text",
+ "category": "Modifier"
+ },
+ "mod-progressbar-thickness": {
+ "description": "Used by `.spectrum-ProgressBar .spectrum-ProgressBar-track`, `.spectrum-ProgressBar .spectrum-ProgressBar-fill`.
Defaults to `var(--spectrum-progressbar-thickness)`, if not set.",
+ "control": "text",
+ "category": "Modifier"
+ },
+ "mod-progressbar-track-color": {
+ "description": "Used by `.spectrum-ProgressBar .spectrum-ProgressBar-track`.
Defaults to `var(--spectrum-progressbar-track-color)`, if not set.",
+ "control": "color",
+ "category": "Modifier"
+ },
+ "mod-progressbar-fill-color": {
+ "description": "Used by `.spectrum-ProgressBar .spectrum-ProgressBar-fill`.
Defaults to `var(--spectrum-progressbar-fill-color)`, if not set.",
+ "control": "color",
+ "category": "Modifier"
+ },
+ "mod-progressbar-fill-size-indeterminate": {
+ "description": "Used by `.spectrum-ProgressBar--indeterminate .spectrum-ProgressBar-fill`.
Defaults to `var(--spectrum-progressbar-fill-size-indeterminate)`, if not set.",
+ "control": "text",
+ "category": "Modifier"
+ },
+ "mod-progressbar-animation-ease-in-out-indeterminate": {
+ "description": "Used by `.spectrum-ProgressBar--indeterminate .spectrum-ProgressBar-fill`.
Defaults to `var(--spectrum-progressbar-animation-ease-in-out-indeterminate)`, if not set.",
+ "control": "text",
+ "category": "Modifier"
+ },
+ "mod-spacing-progressbar-label-to-text": {
+ "description": "Used by `.spectrum-ProgressBar--sideLabel .spectrum-ProgressBar-percentage`.
Defaults to `var(--spectrum-progressbar-spacing-label-to-text)`, if not set.",
+ "control": "text",
+ "category": "Modifier"
+ },
+ "mod-progressbar-fill-color-white": {
+ "description": "Used by `.spectrum-ProgressBar--staticWhite .spectrum-ProgressBar-fill`.
Defaults to `var(--spectrum-progressbar-fill-color-white)`, if not set.",
+ "control": "color",
+ "category": "Modifier"
+ },
+ "mod-progressbar-label-and-value-white": {
+ "description": "Used by `.spectrum-ProgressBar--staticWhite .spectrum-ProgressBar-fill, .spectrum-ProgressBar--staticWhite .spectrum-ProgressBar-label, .spectrum-ProgressBar--staticWhite .spectrum-ProgressBar-percentage`.
Defaults to `var(--spectrum-progressbar-label-and-value-white)`, if not set.",
+ "control": "text",
+ "category": "Modifier"
+ },
+ "mod-progressbar-fill-color-black": {
+ "description": "Used by `.spectrum-ProgressBar--staticBlack .spectrum-ProgressBar-fill`.
Defaults to `var(--spectrum-progressbar-fill-color-black)`, if not set.",
+ "control": "color",
+ "category": "Modifier"
+ },
+ "mod-progressbar-label-and-value-black": {
+ "description": "Used by `.spectrum-ProgressBar--staticBlack .spectrum-ProgressBar-fill, .spectrum-ProgressBar--staticBlack .spectrum-ProgressBar-label, .spectrum-ProgressBar--staticBlack .spectrum-ProgressBar-percentage`.
Defaults to `var(--spectrum-progressbar-label-and-value-black)`, if not set.",
+ "control": "text",
+ "category": "Modifier"
+ },
+ "mod-progressbar-animation-duration-indeterminate": {
+ "description": "Used by `.spectrum-ProgressBar--indeterminate .spectrum-ProgressBar-fill`, `.spectrum-ProgressBar--indeterminate .spectrum-ProgressBar-fill:dir(rtl)`.
Defaults to `var(--spectrum-progressbar-animation-duration-indeterminate)`, if not set.",
+ "control": "text",
+ "category": "Modifier"
+ }
+ },
+ "component": {
+ "spectrum-progressbar-animation-ease-in-out-indeterminate": {
+ "value": "var(--spectrum-animation-ease-in-out)",
+ "description": "Defined in `.spectrum-ProgressBar`.
Used by `.spectrum-ProgressBar--indeterminate .spectrum-ProgressBar-fill`.
Defaults to `var(--spectrum-animation-ease-in-out)`, if not set.",
+ "control": "text",
+ "category": "Component"
+ },
+ "spectrum-progressbar-animation-duration-indeterminate": {
+ "value": "var(--spectrum-animation-duration-2000)",
+ "description": "Defined in `.spectrum-ProgressBar`.
Used by `.spectrum-ProgressBar--indeterminate .spectrum-ProgressBar-fill`, `.spectrum-ProgressBar--indeterminate .spectrum-ProgressBar-fill:dir(rtl)`.
Defaults to `var(--spectrum-animation-duration-2000)`, if not set.",
+ "control": "text",
+ "category": "Component"
+ },
+ "spectrum-progressbar-corner-radius": {
+ "value": "9999px",
+ "description": "Defined in `.spectrum-ProgressBar`.
Used by `.spectrum-ProgressBar .spectrum-ProgressBar-track`, `.spectrum-ProgressBar .spectrum-ProgressBar-fill`.
Defaults to `var(--spectrum-corner-radius-full)`, if not set.",
+ "control": "text",
+ "category": "Component"
+ },
+ "spectrum-progressbar-fill-size-indeterminate": {
+ "value": "70%",
+ "description": "Defined in `.spectrum-ProgressBar`.
Used by `.spectrum-ProgressBar--indeterminate .spectrum-ProgressBar-fill`.
Defaults to `70%`, if not set.",
+ "control": "text",
+ "category": "Component"
+ },
+ "spectrum-progressbar-inline-size": {
+ "value": "192px",
+ "description": "Defined in `.spectrum-ProgressBar`.
Used by `.spectrum-ProgressBar`, `.spectrum-ProgressBar--sideLabel .spectrum-ProgressBar-track`, `to`.
Defaults to `var(--spectrum-meter-width)`, if not set.",
+ "control": "text",
+ "category": "Component"
+ },
+ "spectrum-progressbar-font-size": {
+ "value": "18px",
+ "description": "Defined in `.spectrum-ProgressBar`, `.spectrum-ProgressBar--sizeS`, `.spectrum-ProgressBar--sizeL`, `.spectrum-ProgressBar--sizeXL`.
Used by `.spectrum-ProgressBar .spectrum-ProgressBar-label, .spectrum-ProgressBar .spectrum-ProgressBar-percentage`.
Defaults to `var(--spectrum-font-size-300)`, if not set.",
+ "control": "text",
+ "category": "Component"
+ },
+ "spectrum-progressbar-line-height": {
+ "value": "1.3",
+ "description": "Defined in `.spectrum-ProgressBar`.
Used by `.spectrum-ProgressBar .spectrum-ProgressBar-label, .spectrum-ProgressBar .spectrum-ProgressBar-percentage`.
Defaults to `var(--spectrum-line-height-100)`, if not set.",
+ "control": "text",
+ "category": "Component"
+ },
+ "spectrum-progressbar-line-height-cjk": {
+ "value": "1.5",
+ "description": "Defined in `.spectrum-ProgressBar`.
Used by `.spectrum-ProgressBar .spectrum-ProgressBar-label:lang(ja), .spectrum-ProgressBar .spectrum-ProgressBar-label:lang(ko), .spectrum-ProgressBar .spectrum-ProgressBar-label:lang(zh), .spectrum-ProgressBar .spectrum-ProgressBar-percentage:lang(ja), .spectrum-ProgressBar .spectrum-ProgressBar-percentage:lang(ko), .spectrum-ProgressBar .spectrum-ProgressBar-percentage:lang(zh)`.
Defaults to `var(--spectrum-cjk-line-height-100)`, if not set.",
+ "control": "text",
+ "category": "Component"
+ },
+ "spectrum-progressbar-min-size": {
+ "value": "48px",
+ "description": "Defined in `.spectrum-ProgressBar`.
Used by `.spectrum-ProgressBar`.
Defaults to `var(--spectrum-progress-bar-minimum-width)`, if not set.",
+ "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": {
+ "value": "768px",
+ "description": "Defined in `.spectrum-ProgressBar`.
Used by `.spectrum-ProgressBar`.
Defaults to `var(--spectrum-progress-bar-maximum-width)`, if not set.",
+ "control": "text",
+ "category": "Component"
+ },
+ "spectrum-progress-bar-maximum-width": {
+ "value": "768px",
+ "description": "Used by `--spectrum-progressbar-max-size`.",
+ "control": "text",
+ "category": "Component"
+ },
+ "spectrum-progressbar-thickness": {
+ "value": "10px",
+ "description": "Defined in `.spectrum-ProgressBar`, `.spectrum-ProgressBar--sizeS`, `.spectrum-ProgressBar--sizeL`, `.spectrum-ProgressBar--sizeXL`.
Used by `.spectrum-ProgressBar .spectrum-ProgressBar-track`, `.spectrum-ProgressBar .spectrum-ProgressBar-fill`.
Defaults to `var(--spectrum-progress-bar-thickness-extra-large)`, if not set.",
+ "control": "text",
+ "category": "Component"
+ },
+ "spectrum-progress-bar-thickness-medium": {
+ "value": "6px",
+ "description": "Used by `--spectrum-progressbar-thickness`.",
+ "control": "text",
+ "category": "Component"
+ },
+ "spectrum-progressbar-spacing-label-to-progressbar": {
+ "value": "4px",
+ "description": "Defined in `.spectrum-ProgressBar`.
Used by `.spectrum-ProgressBar .spectrum-ProgressBar-label, .spectrum-ProgressBar .spectrum-ProgressBar-percentage`.
Defaults to `var(--spectrum-spacing-75)`, if not set.",
+ "control": "text",
+ "category": "Component"
+ },
+ "spectrum-progressbar-spacing-top-to-text": {
+ "value": "12px",
+ "description": "Defined in `.spectrum-ProgressBar`, `.spectrum-ProgressBar--sizeS`, `.spectrum-ProgressBar--sizeL`, `.spectrum-ProgressBar--sizeXL`.
Used by `.spectrum-ProgressBar .spectrum-ProgressBar-label, .spectrum-ProgressBar .spectrum-ProgressBar-percentage`.
Defaults to `var(--spectrum-component-top-to-text-300)`, if not set.",
+ "control": "text",
+ "category": "Component"
+ },
+ "spectrum-progressbar-spacing-label-to-text": {
+ "value": "12px",
+ "description": "Defined in `.spectrum-ProgressBar`.
Used by `.spectrum-ProgressBar .spectrum-ProgressBar-percentage`, `.spectrum-ProgressBar--sideLabel .spectrum-ProgressBar-label`, `.spectrum-ProgressBar--sideLabel .spectrum-ProgressBar-percentage`.
Defaults to `var(--spectrum-spacing-200)`, if not set.",
+ "control": "text",
+ "category": "Component"
+ },
+ "spectrum-progressbar-text-color": {
+ "value": "var(--spectrum-gray-700)",
+ "description": "Defined in `.spectrum-ProgressBar`.
Used by `.spectrum-ProgressBar .spectrum-ProgressBar-label, .spectrum-ProgressBar .spectrum-ProgressBar-percentage`.
Defaults to `var(--spectrum-neutral-subdued-content-color-default)`, if not set.",
+ "control": "color",
+ "category": "Component"
+ },
+ "spectrum-progressbar-track-color": {
+ "value": "var(--spectrum-gray-300)",
+ "description": "Defined in `.spectrum-ProgressBar`.
Used by `.spectrum-ProgressBar .spectrum-ProgressBar-track`.
Defaults to `var(--spectrum-track-color)`, if not set.",
+ "control": "color",
+ "category": "Component"
+ },
+ "spectrum-progressbar-fill-color": {
+ "value": "var(--spectrum-accent-color-900)",
+ "description": "Defined in `.spectrum-ProgressBar`.
Used by `.spectrum-ProgressBar .spectrum-ProgressBar-fill`.
Defaults to `var(--spectrum-accent-content-color-default)`, if not set.",
+ "control": "color",
+ "category": "Component"
+ },
+ "spectrum-progressbar-label-and-value-white": {
+ "value": "rgb(255, 255, 255)",
+ "description": "Defined in `.spectrum-ProgressBar`.
Used by `.spectrum-ProgressBar--staticWhite .spectrum-ProgressBar-fill, .spectrum-ProgressBar--staticWhite .spectrum-ProgressBar-label, .spectrum-ProgressBar--staticWhite .spectrum-ProgressBar-percentage`.
Defaults to `var(--spectrum-static-white-text-color)`, if not set.",
+ "control": "text",
+ "category": "Component"
+ },
+ "spectrum-progressbar-track-color-white": {
+ "value": "rgba(255, 255, 255, 0.17)",
+ "description": "Defined in `.spectrum-ProgressBar`.
Used by `.spectrum-ProgressBar--staticWhite .spectrum-ProgressBar-track`.
Defaults to `var(--spectrum-static-white-track-color)`, if not set.",
+ "control": "color",
+ "category": "Component"
+ },
+ "spectrum-progressbar-fill-color-white": {
+ "value": "rgba(255, 255, 255, 0.94)",
+ "description": "Defined in `.spectrum-ProgressBar`.
Used by `.spectrum-ProgressBar--staticWhite .spectrum-ProgressBar-fill`.
Defaults to `var(--spectrum-static-white-track-indicator-color)`, if not set.",
+ "control": "color",
+ "category": "Component"
+ },
+ "spectrum-progressbar-label-and-value-black": {
+ "value": "rgb(0, 0, 0)",
+ "description": "Defined in `.spectrum-ProgressBar`.
Used by `.spectrum-ProgressBar--staticBlack .spectrum-ProgressBar-fill, .spectrum-ProgressBar--staticBlack .spectrum-ProgressBar-label, .spectrum-ProgressBar--staticBlack .spectrum-ProgressBar-percentage`.
Defaults to `var(--spectrum-static-black-text-color)`, if not set.",
+ "control": "text",
+ "category": "Component"
+ },
+ "spectrum-progressbar-track-color-black": {
+ "value": "rgba(0, 0, 0, 0.15)",
+ "description": "Defined in `.spectrum-ProgressBar`.
Used by `.spectrum-ProgressBar--staticBlack .spectrum-ProgressBar-track`.
Defaults to `var(--spectrum-static-black-track-color)`, if not set.",
+ "control": "color",
+ "category": "Component"
+ },
+ "spectrum-progressbar-fill-color-black": {
+ "value": "rgba(0, 0, 0, 0.93)",
+ "description": "Defined in `.spectrum-ProgressBar`.
Used by `.spectrum-ProgressBar--staticBlack .spectrum-ProgressBar-fill`.
Defaults to `var(--spectrum-static-black-track-indicator-color)`, if not set.",
+ "control": "color",
+ "category": "Component"
+ },
+ "spectrum-progress-bar-thickness-small": {
+ "value": "4px",
+ "description": "Used by `--spectrum-progressbar-thickness`.",
+ "control": "text",
+ "category": "Component"
+ },
+ "spectrum-progress-bar-thickness-large": {
+ "value": "8px",
+ "description": "Used by `--spectrum-progressbar-thickness`.",
+ "control": "text",
+ "category": "Component"
+ },
+ "spectrum-progress-bar-thickness-extra-large": {
+ "value": "10px",
+ "description": "Used by `--spectrum-progressbar-thickness`.",
+ "control": "text",
+ "category": "Component"
+ }
+ },
+ "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-full": {
+ "value": "9999px",
+ "description": "Used by `--spectrum-progressbar-corner-radius`.",
+ "control": "text",
+ "category": "Global"
+ },
+ "spectrum-meter-width": {
+ "value": "192px",
+ "description": "Used by `--spectrum-progressbar-inline-size`.",
+ "control": "text",
+ "category": "Global"
+ },
+ "spectrum-font-size-100": {
+ "value": "14px",
+ "description": "Used by `--spectrum-progressbar-font-size`.",
+ "control": "text",
+ "category": "Global"
+ },
+ "spectrum-line-height-100": {
+ "value": "1.3",
+ "description": "Used by `--spectrum-progressbar-line-height`.",
+ "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-spacing-75": {
+ "value": "4px",
+ "description": "Used by `--spectrum-progressbar-spacing-label-to-progressbar`.",
+ "control": "text",
+ "category": "Global"
+ },
+ "spectrum-component-top-to-text-100": {
+ "value": "6px",
+ "description": "Used by `--spectrum-progressbar-spacing-top-to-text`.",
+ "control": "text",
+ "category": "Global"
+ },
+ "spectrum-spacing-200": {
+ "value": "12px",
+ "description": "Used by `--spectrum-progressbar-spacing-label-to-text`.",
+ "control": "text",
+ "category": "Global"
+ },
+ "spectrum-neutral-subdued-content-color-default": {
+ "value": "var(--spectrum-gray-700)",
+ "description": "Used by `--spectrum-progressbar-text-color`.",
+ "control": "color",
+ "category": "Global"
+ },
+ "spectrum-track-color": {
+ "value": "var(--spectrum-gray-300)",
+ "description": "Used by `--spectrum-progressbar-track-color`.",
+ "control": "color",
+ "category": "Global"
+ },
+ "spectrum-accent-content-color-default": {
+ "value": "var(--spectrum-accent-color-900)",
+ "description": "Used by `--spectrum-progressbar-fill-color`.",
+ "control": "color",
+ "category": "Global"
+ },
+ "spectrum-static-white-text-color": {
+ "value": "rgb(255, 255, 255)",
+ "description": "Used by `--spectrum-progressbar-label-and-value-white`.",
+ "control": "color",
+ "category": "Global"
+ },
+ "spectrum-static-white-track-color": {
+ "value": "rgba(255, 255, 255, 0.17)",
+ "description": "Used by `--spectrum-progressbar-track-color-white`.",
+ "control": "color",
+ "category": "Global"
+ },
+ "spectrum-static-white-track-indicator-color": {
+ "value": "rgba(255, 255, 255, 0.94)",
+ "description": "Used by `--spectrum-progressbar-fill-color-white`.",
+ "control": "color",
+ "category": "Global"
+ },
+ "spectrum-static-black-text-color": {
+ "value": "rgb(0, 0, 0)",
+ "description": "Used by `--spectrum-progressbar-label-and-value-black`.",
+ "control": "color",
+ "category": "Global"
+ },
+ "spectrum-static-black-track-color": {
+ "value": "rgba(0, 0, 0, 0.15)",
+ "description": "Used by `--spectrum-progressbar-track-color-black`.",
+ "control": "color",
+ "category": "Global"
+ },
+ "spectrum-static-black-track-indicator-color": {
+ "value": "rgba(0, 0, 0, 0.93)",
+ "description": "Used by `--spectrum-progressbar-fill-color-black`.",
+ "control": "color",
+ "category": "Global"
+ },
+ "spectrum-font-size-75": {
+ "value": "12px",
+ "description": "Used by `--spectrum-progressbar-font-size`.",
+ "control": "text",
+ "category": "Global"
+ },
+ "spectrum-component-top-to-text-75": {
+ "value": "4px",
+ "description": "Used by `--spectrum-progressbar-spacing-top-to-text`.",
+ "control": "text",
+ "category": "Global"
+ },
+ "spectrum-font-size-200": {
+ "value": "16px",
+ "description": "Used by `--spectrum-progressbar-font-size`.",
+ "control": "text",
+ "category": "Global"
+ },
+ "spectrum-component-top-to-text-200": {
+ "value": "9px",
+ "description": "Used by `--spectrum-progressbar-spacing-top-to-text`.",
+ "control": "text",
+ "category": "Global"
+ },
+ "spectrum-font-size-300": {
+ "value": "18px",
+ "description": "Used by `--spectrum-progressbar-font-size`.",
+ "control": "text",
+ "category": "Global"
+ },
+ "spectrum-component-top-to-text-300": {
+ "value": "12px",
+ "description": "Used by `--spectrum-progressbar-spacing-top-to-text`.",
+ "control": "text",
+ "category": "Global"
+ }
+ },
+ "passthroughs": {},
+ "high-contrast": {
+ "highcontrast-progressbar-track-color": {
+ "value": "var(--mod-progressbar-track-color, var(--spectrum-progressbar-track-color))",
+ "description": "Defined in `.spectrum-ProgressBar-track`.
Used by `.spectrum-ProgressBar .spectrum-ProgressBar-track`.
Defaults to `var(--mod-progressbar-track-color, var(--spectrum-progressbar-track-color))`, if not set.",
+ "control": "color"
+ },
+ "highcontrast-progressbar-fill-color": {
+ "value": "var(--mod-progressbar-fill-color, var(--spectrum-progressbar-fill-color))",
+ "description": "Defined in `.spectrum-ProgressBar-track`.
Used by `.spectrum-ProgressBar .spectrum-ProgressBar-fill`.
Defaults to `var(--mod-progressbar-fill-color, var(--spectrum-progressbar-fill-color))`, if not set.",
+ "control": "color"
+ },
+ "highcontrast-progressbar-fill-color-white": {
+ "value": "var(--mod-progressbar-fill-color-white, var(--spectrum-progressbar-fill-color-white))",
+ "description": "Defined in `.spectrum-ProgressBar-track`.
Used by `.spectrum-ProgressBar--staticWhite .spectrum-ProgressBar-fill`.
Defaults to `var(--mod-progressbar-fill-color-white, var(--spectrum-progressbar-fill-color-white))`, if not set.",
+ "control": "color"
+ },
+ "highcontrast-progressbar-fill-color-black": {
+ "value": "var(--mod-progressbar-fill-color-black, var(--spectrum-progressbar-fill-color-black))",
+ "description": "Defined in `.spectrum-ProgressBar-track`.
Used by `.spectrum-ProgressBar--staticBlack .spectrum-ProgressBar-fill`.
Defaults to `var(--mod-progressbar-fill-color-black, var(--spectrum-progressbar-fill-color-black))`, if not set.",
+ "control": "color"
+ }
+ }
}
diff --git a/components/progressbar/stories/progressbar.stories.js b/components/progressbar/stories/progressbar.stories.js
index 7a127b668a4..e9486d8b676 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.
*
@@ -83,9 +85,7 @@ export default {
},
packageJson,
metadata,
- status: {
- type: "migrated",
- },
+ cssprops: metadata.modifiers,
},
tags: ["migrated"],
};
diff --git a/components/progresscircle/dist/metadata.json b/components/progresscircle/dist/metadata.json
index a252d2638db..4fce250acb7 100644
--- a/components/progresscircle/dist/metadata.json
+++ b/components/progresscircle/dist/metadata.json
@@ -7,41 +7,149 @@
".spectrum-ProgressCircle--sizeS",
".spectrum-ProgressCircle-fill",
".spectrum-ProgressCircle-track",
- ".spectrum-ProgressCircle.spectrum-ProgressCircle--staticBlack",
- ".spectrum-ProgressCircle.spectrum-ProgressCircle--staticWhite",
".spectrum-ProgressCircle:not(.spectrum-ProgressCircle--indeterminate) .spectrum-innerCircle",
- ".spectrum-ProgressCircle:not(.spectrum-ProgressCircle--indeterminate) .spectrum-outerCircle"
- ],
- "modifiers": [
- "--mod-progress-circle-fill-border-color",
- "--mod-progress-circle-position",
- "--mod-progress-circle-size",
- "--mod-progress-circle-thickness",
- "--mod-progress-circle-track-border-color"
- ],
- "component": [
- "--spectrum-progress-circle-fill-border-color",
- "--spectrum-progress-circle-size",
- "--spectrum-progress-circle-size-large",
- "--spectrum-progress-circle-size-medium",
- "--spectrum-progress-circle-size-small",
- "--spectrum-progress-circle-thickness",
- "--spectrum-progress-circle-thickness-large",
- "--spectrum-progress-circle-thickness-medium",
- "--spectrum-progress-circle-thickness-small",
- "--spectrum-progress-circle-track-border-color"
- ],
- "global": [
- "--spectrum-accent-content-color-default",
- "--spectrum-static-black-track-color",
- "--spectrum-static-black-track-indicator-color",
- "--spectrum-static-white-track-color",
- "--spectrum-static-white-track-indicator-color",
- "--spectrum-track-color"
+ ".spectrum-ProgressCircle:not(.spectrum-ProgressCircle--indeterminate) .spectrum-outerCircle",
+ ".spectrum-ProgressCircle.spectrum-ProgressCircle--staticBlack",
+ ".spectrum-ProgressCircle.spectrum-ProgressCircle--staticWhite"
],
- "passthroughs": [],
- "high-contrast": [
- "--highcontrast-progress-circle-fill-border-color",
- "--highcontrast-progress-circle-track-color"
- ]
+ "modifiers": {
+ "mod-progress-circle-size": {
+ "description": "Used by `.spectrum-ProgressCircle`, `.spectrum-ProgressCircle-fill, .spectrum-ProgressCircle-track`.
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-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": {
+ "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": {
+ "description": "Used by `.spectrum-ProgressCircle-fill`.
Defaults to `var(--spectrum-progress-circle-fill-border-color)`, if not set.",
+ "control": "color",
+ "category": "Modifier"
+ }
+ },
+ "component": {
+ "spectrum-progress-circle-track-border-color": {
+ "value": "rgba(0, 0, 0, 0.15)",
+ "description": "Defined in `.spectrum-ProgressCircle`, `.spectrum-ProgressCircle.spectrum-ProgressCircle--staticWhite`, `.spectrum-ProgressCircle.spectrum-ProgressCircle--staticBlack`.
Used by `.spectrum-ProgressCircle-track`.
Defaults to `var(--spectrum-static-black-track-color)`, if not set.",
+ "control": "color",
+ "category": "Component"
+ },
+ "spectrum-progress-circle-fill-border-color": {
+ "value": "rgba(0, 0, 0, 0.93)",
+ "description": "Defined in `.spectrum-ProgressCircle`, `.spectrum-ProgressCircle.spectrum-ProgressCircle--staticWhite`, `.spectrum-ProgressCircle.spectrum-ProgressCircle--staticBlack`.
Used by `.spectrum-ProgressCircle-fill`.
Defaults to `var(--spectrum-static-black-track-indicator-color)`, if not set.",
+ "control": "color",
+ "category": "Component"
+ },
+ "spectrum-progress-circle-size": {
+ "value": "64px",
+ "description": "Defined in `.spectrum-ProgressCircle`, `.spectrum-ProgressCircle--sizeS`, `.spectrum-ProgressCircle--sizeL`.
Used by `.spectrum-ProgressCircle`, `.spectrum-ProgressCircle-fill, .spectrum-ProgressCircle-track`.
Defaults to `var(--spectrum-progress-circle-size-large)`, if not set.",
+ "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": {
+ "value": "4px",
+ "description": "Defined in `.spectrum-ProgressCircle`, `.spectrum-ProgressCircle--sizeS`, `.spectrum-ProgressCircle--sizeL`.
Used by `.spectrum-ProgressCircle-track`, `.spectrum-ProgressCircle-fill`.
Defaults to `var(--spectrum-progress-circle-thickness-large)`, if not set.",
+ "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-small": {
+ "value": "16px",
+ "description": "Used by `--spectrum-progress-circle-size`.",
+ "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-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-track-color": {
+ "value": "var(--spectrum-gray-300)",
+ "description": "Used by `--spectrum-progress-circle-track-border-color`.",
+ "control": "color",
+ "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-static-white-track-color": {
+ "value": "rgba(255, 255, 255, 0.17)",
+ "description": "Used by `--spectrum-progress-circle-track-border-color`.",
+ "control": "color",
+ "category": "Global"
+ },
+ "spectrum-static-white-track-indicator-color": {
+ "value": "rgba(255, 255, 255, 0.94)",
+ "description": "Used by `--spectrum-progress-circle-fill-border-color`.",
+ "control": "color",
+ "category": "Global"
+ },
+ "spectrum-static-black-track-color": {
+ "value": "rgba(0, 0, 0, 0.15)",
+ "description": "Used by `--spectrum-progress-circle-track-border-color`.",
+ "control": "color",
+ "category": "Global"
+ },
+ "spectrum-static-black-track-indicator-color": {
+ "value": "rgba(0, 0, 0, 0.93)",
+ "description": "Used by `--spectrum-progress-circle-fill-border-color`.",
+ "control": "color",
+ "category": "Global"
+ }
+ },
+ "passthroughs": {},
+ "high-contrast": {
+ "highcontrast-progress-circle-track-color": {
+ "value": "var(--mod-progress-circle-track-border-color, var(--spectrum-progress-circle-track-border-color))",
+ "description": "Defined in `.spectrum-ProgressCircle`.
Used by `.spectrum-ProgressCircle-track`.
Defaults to `var(--mod-progress-circle-track-border-color, var(--spectrum-progress-circle-track-border-color))`, if not set.",
+ "control": "color"
+ },
+ "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"
+ }
+ }
}
diff --git a/components/progresscircle/stories/progresscircle.stories.js b/components/progresscircle/stories/progresscircle.stories.js
index 653c01ec3d9..9bfce9f2089 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.
*/
@@ -45,9 +47,7 @@ export default {
},
packageJson,
metadata,
- status: {
- type: "migrated",
- },
+ cssprops: metadata.modifiers,
},
tags: ["migrated"],
};
diff --git a/components/radio/dist/metadata.json b/components/radio/dist/metadata.json
index 5671fe2386a..a8f56aa5eb1 100644
--- a/components/radio/dist/metadata.json
+++ b/components/radio/dist/metadata.json
@@ -25,15 +25,6 @@
".spectrum-Radio-label:lang(ja)",
".spectrum-Radio-label:lang(ko)",
".spectrum-Radio-label:lang(zh)",
- ".spectrum-Radio.is-active .spectrum-Radio-button:before",
- ".spectrum-Radio.is-active .spectrum-Radio-input:checked + .spectrum-Radio-button:before",
- ".spectrum-Radio.is-active .spectrum-Radio-label",
- ".spectrum-Radio.is-readOnly .spectrum-Radio-input",
- ".spectrum-Radio.is-readOnly .spectrum-Radio-input + .spectrum-Radio-button:before",
- ".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.is-readOnly:hover .spectrum-Radio-input + .spectrum-Radio-button:before",
".spectrum-Radio:active .spectrum-Radio-button:before",
".spectrum-Radio:active .spectrum-Radio-input:checked + .spectrum-Radio-button:before",
".spectrum-Radio:active .spectrum-Radio-label",
@@ -48,145 +39,754 @@
".spectrum-Radio:lang(ja)",
".spectrum-Radio:lang(ko)",
".spectrum-Radio:lang(zh)",
- ".spectrum-Radio:not(.is-readOnly):active .spectrum-Radio-input:not(:disabled) + .spectrum-Radio-button"
- ],
- "modifiers": [
- "--mod-radio-animation-duration",
- "--mod-radio-border-width",
- "--mod-radio-button-background-color",
- "--mod-radio-button-border-color-default",
- "--mod-radio-button-border-color-down",
- "--mod-radio-button-border-color-focus",
- "--mod-radio-button-border-color-hover",
- "--mod-radio-button-checked-border-color-default",
- "--mod-radio-button-checked-border-color-down",
- "--mod-radio-button-checked-border-color-focus",
- "--mod-radio-button-checked-border-color-hover",
- "--mod-radio-button-control-size",
- "--mod-radio-button-top-to-control",
- "--mod-radio-disabled-border-color",
- "--mod-radio-disabled-content-color",
- "--mod-radio-emphasized-accent-color",
- "--mod-radio-emphasized-accent-color-down",
- "--mod-radio-emphasized-accent-color-focus",
- "--mod-radio-emphasized-accent-color-hover",
- "--mod-radio-focus-indicator-color",
- "--mod-radio-focus-indicator-thickness",
- "--mod-radio-font-size",
- "--mod-radio-height",
- "--mod-radio-line-height",
- "--mod-radio-line-height-cjk",
- "--mod-radio-neutral-content-color",
- "--mod-radio-neutral-content-color-down",
- "--mod-radio-neutral-content-color-focus",
- "--mod-radio-neutral-content-color-hover",
- "--mod-radio-text-to-control"
- ],
- "component": [
- "--spectrum-radio-animation-duration",
- "--spectrum-radio-border-width",
- "--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-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-font-style",
- "--spectrum-radio-text-font-weight",
- "--spectrum-radio-text-to-control"
- ],
- "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-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-size-difference-down",
- "--spectrum-component-size-minimum-perspective-down",
- "--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-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-200",
- "--spectrum-font-size-300",
- "--spectrum-font-size-75",
- "--spectrum-gray-25",
- "--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-regular-font-weight",
- "--spectrum-text-to-control-100",
- "--spectrum-text-to-control-200",
- "--spectrum-text-to-control-300",
- "--spectrum-text-to-control-75"
+ ".spectrum-Radio:not(.is-readOnly):active .spectrum-Radio-input:not(:disabled) + .spectrum-Radio-button",
+ ".spectrum-Radio.is-active .spectrum-Radio-button:before",
+ ".spectrum-Radio.is-active .spectrum-Radio-input:checked + .spectrum-Radio-button:before",
+ ".spectrum-Radio.is-active .spectrum-Radio-label",
+ ".spectrum-Radio.is-readOnly .spectrum-Radio-input",
+ ".spectrum-Radio.is-readOnly .spectrum-Radio-input + .spectrum-Radio-button:before",
+ ".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.is-readOnly:hover .spectrum-Radio-input + .spectrum-Radio-button:before"
],
- "passthroughs": [],
- "high-contrast": [
- "--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": {
+ "description": "Used by `.spectrum-Radio`.
Defaults to `var(--spectrum-radio-height)`, if not set.",
+ "control": "text",
+ "category": "Modifier"
+ },
+ "mod-radio-button-border-color-down": {
+ "description": "Used by `.spectrum-Radio.is-active .spectrum-Radio-button:before, .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": {
+ "description": "Used by `.spectrum-Radio.is-active .spectrum-Radio-input:checked + .spectrum-Radio-button:before, .spectrum-Radio:active .spectrum-Radio-input:checked + .spectrum-Radio-button:before`.
Defaults to `var(--spectrum-radio-button-border-color-down)`, if not set.",
+ "control": "color",
+ "category": "Modifier"
+ },
+ "mod-radio-neutral-content-color-down": {
+ "description": "Used by `.spectrum-Radio.is-active .spectrum-Radio-label, .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": {
+ "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": {
+ "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": {
+ "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": {
+ "description": "Used by `.spectrum-Radio:focus .spectrum-Radio-input:checked + .spectrum-Radio-button:before`.
Defaults to `var(--spectrum-radio-button-border-color-focus)`, if not set.",
+ "control": "color",
+ "category": "Modifier"
+ },
+ "mod-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": {
+ "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": {
+ "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": {
+ "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": {
+ "description": "Used by `.spectrum-Radio:hover .spectrum-Radio-input:checked + .spectrum-Radio-button:before`.
Defaults to `var(--spectrum-radio-button-border-color-hover)`, if not set.",
+ "control": "color",
+ "category": "Modifier"
+ },
+ "mod-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": {
+ "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": {
+ "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": {
+ "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": {
+ "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": {
+ "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": {
+ "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": {
+ "description": "Used by `.spectrum-Radio-input:checked + .spectrum-Radio-button:before`.
Defaults to `var(--spectrum-radio-button-border-color-default)`, if not set.",
+ "control": "color",
+ "category": "Modifier"
+ },
+ "mod-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": {
+ "description": "Used by `.spectrum-Radio-label`.
Defaults to `var(--spectrum-radio-font-size)`, if not set.",
+ "control": "text",
+ "category": "Modifier"
+ },
+ "mod-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": {
+ "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": {
+ "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": {
+ "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": {
+ "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": {
+ "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": {
+ "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-button-background-color": {
+ "value": "light-dark(rgb(255, 255, 255), rgb(17, 17, 17))",
+ "description": "Defined in `.spectrum-Radio`.
Used by `.spectrum-Radio-button:before`.
Defaults to `var(--spectrum-gray-25)`, if not set.",
+ "control": "color",
+ "category": "Component"
+ },
+ "spectrum-radio-neutral-content-color": {
+ "value": "var(--spectrum-gray-800)",
+ "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(--spectrum-neutral-content-color-default)`, if not set.",
+ "control": "color",
+ "category": "Component"
+ },
+ "spectrum-radio-neutral-content-color-hover": {
+ "value": "var(--spectrum-gray-900)",
+ "description": "Defined in `.spectrum-Radio`.
Used by `.spectrum-Radio:hover .spectrum-Radio-label`.
Defaults to `var(--spectrum-neutral-content-color-hover)`, if not set.",
+ "control": "color",
+ "category": "Component"
+ },
+ "spectrum-radio-neutral-content-color-down": {
+ "value": "var(--spectrum-gray-900)",
+ "description": "Defined in `.spectrum-Radio`.
Used by `.spectrum-Radio.is-active .spectrum-Radio-label, .spectrum-Radio:active .spectrum-Radio-label`.
Defaults to `var(--spectrum-neutral-content-color-down)`, if not set.",
+ "control": "color",
+ "category": "Component"
+ },
+ "spectrum-radio-neutral-content-color-focus": {
+ "value": "var(--spectrum-gray-900)",
+ "description": "Defined in `.spectrum-Radio`.
Used by `.spectrum-Radio:focus .spectrum-Radio-label`.
Defaults to `var(--spectrum-neutral-content-color-key-focus)`, if not set.",
+ "control": "color",
+ "category": "Component"
+ },
+ "spectrum-radio-focus-indicator-thickness": {
+ "value": "2px",
+ "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(--spectrum-focus-indicator-thickness)`, if not set.",
+ "control": "text",
+ "category": "Component"
+ },
+ "spectrum-radio-focus-indicator-gap": {
+ "value": "2px",
+ "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(--spectrum-focus-indicator-gap)`, if not set.",
+ "control": "text",
+ "category": "Component"
+ },
+ "spectrum-radio-focus-indicator-color": {
+ "value": "var(--spectrum-blue-800)",
+ "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(--spectrum-focus-indicator-color)`, if not set.",
+ "control": "color",
+ "category": "Component"
+ },
+ "spectrum-radio-disabled-content-color": {
+ "value": "var(--spectrum-gray-400)",
+ "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(--spectrum-disabled-content-color)`, if not set.",
+ "control": "color",
+ "category": "Component"
+ },
+ "spectrum-radio-disabled-border-color": {
+ "value": "var(--spectrum-gray-400)",
+ "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(--spectrum-disabled-content-color)`, if not set.",
+ "control": "color",
+ "category": "Component"
+ },
+ "spectrum-radio-emphasized-accent-color": {
+ "value": "var(--spectrum-accent-color-900)",
+ "description": "Defined in `.spectrum-Radio`.
Used by `.spectrum-Radio--emphasized .spectrum-Radio-input:checked + .spectrum-Radio-button:before`.
Defaults to `var(--spectrum-accent-content-color-default)`, if not set.",
+ "control": "color",
+ "category": "Component"
+ },
+ "spectrum-radio-emphasized-accent-color-hover": {
+ "value": "var(--spectrum-accent-color-1000)",
+ "description": "Defined in `.spectrum-Radio`.
Used by `.spectrum-Radio--emphasized:hover .spectrum-Radio-input:checked + .spectrum-Radio-button:before`.
Defaults to `var(--spectrum-accent-content-color-hover)`, if not set.",
+ "control": "color",
+ "category": "Component"
+ },
+ "spectrum-radio-emphasized-accent-color-down": {
+ "value": "var(--spectrum-accent-color-1000)",
+ "description": "Defined in `.spectrum-Radio`.
Used by `.spectrum-Radio--emphasized:active .spectrum-Radio-input:checked + .spectrum-Radio-button:before`.
Defaults to `var(--spectrum-accent-content-color-down)`, if not set.",
+ "control": "color",
+ "category": "Component"
+ },
+ "spectrum-radio-emphasized-accent-color-focus": {
+ "value": "var(--spectrum-accent-color-1000)",
+ "description": "Defined in `.spectrum-Radio`.
Used by `.spectrum-Radio--emphasized:focus .spectrum-Radio-input:checked + .spectrum-Radio-button:before`.
Defaults to `var(--spectrum-accent-content-color-key-focus)`, if not set.",
+ "control": "color",
+ "category": "Component"
+ },
+ "spectrum-radio-button-border-color-default": {
+ "value": "var(--spectrum-gray-800)",
+ "description": "Defined in `.spectrum-Radio`.
Used by `.spectrum-Radio-input:checked + .spectrum-Radio-button:before`, `.spectrum-Radio-button:before`.
Defaults to `var(--spectrum-neutral-content-color-default)`, if not set.",
+ "control": "color",
+ "category": "Component"
+ },
+ "spectrum-radio-button-border-color-hover": {
+ "value": "var(--spectrum-gray-900)",
+ "description": "Defined in `.spectrum-Radio`.
Used by `.spectrum-Radio:hover .spectrum-Radio-button:before`, `.spectrum-Radio:hover .spectrum-Radio-input:checked + .spectrum-Radio-button:before`.
Defaults to `var(--spectrum-neutral-content-color-hover)`, if not set.",
+ "control": "color",
+ "category": "Component"
+ },
+ "spectrum-radio-button-border-color-down": {
+ "value": "var(--spectrum-gray-900)",
+ "description": "Defined in `.spectrum-Radio`.
Used by `.spectrum-Radio.is-active .spectrum-Radio-button:before, .spectrum-Radio:active .spectrum-Radio-button:before`, `.spectrum-Radio.is-active .spectrum-Radio-input:checked + .spectrum-Radio-button:before, .spectrum-Radio:active .spectrum-Radio-input:checked + .spectrum-Radio-button:before`.
Defaults to `var(--spectrum-neutral-content-color-down)`, if not set.",
+ "control": "color",
+ "category": "Component"
+ },
+ "spectrum-radio-button-border-color-focus": {
+ "value": "var(--spectrum-gray-900)",
+ "description": "Defined in `.spectrum-Radio`.
Used by `.spectrum-Radio:focus .spectrum-Radio-button:before`, `.spectrum-Radio:focus .spectrum-Radio-input:checked + .spectrum-Radio-button:before`.
Defaults to `var(--spectrum-neutral-content-color-key-focus)`, if not set.",
+ "control": "color",
+ "category": "Component"
+ },
+ "spectrum-radio-line-height": {
+ "value": "1.3",
+ "description": "Defined in `.spectrum-Radio`.
Used by `.spectrum-Radio-input`, `.spectrum-Radio-label`.
Defaults to `var(--spectrum-line-height-100)`, if not set.",
+ "control": "text",
+ "category": "Component"
+ },
+ "spectrum-radio-animation-duration": {
+ "value": "var(--spectrum-animation-duration-100)",
+ "description": "Defined in `.spectrum-Radio`.
Used by `.spectrum-Radio-label`, `.spectrum-Radio-button:before`, `.spectrum-Radio-button:after`.
Defaults to `var(--spectrum-animation-duration-100)`, if not set.",
+ "control": "text",
+ "category": "Component"
+ },
+ "spectrum-radio-height": {
+ "value": "48px",
+ "description": "Defined in `.spectrum-Radio`, `.spectrum-Radio--sizeS`, `.spectrum-Radio--sizeL`, `.spectrum-Radio--sizeXL`.
Used by `.spectrum-Radio`.
Defaults to `var(--spectrum-component-height-300)`, if not set.",
+ "control": "text",
+ "category": "Component"
+ },
+ "spectrum-radio-button-control-size": {
+ "value": "18px",
+ "description": "Defined in `.spectrum-Radio`, `.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`.
Defaults to `var(--spectrum-radio-button-control-size-extra-large)`, if not set.",
+ "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": {
+ "value": "13px",
+ "description": "Defined in `.spectrum-Radio`, `.spectrum-Radio--sizeS`, `.spectrum-Radio--sizeL`, `.spectrum-Radio--sizeXL`.
Used by `.spectrum-Radio-label`.
Defaults to `var(--spectrum-text-to-control-300)`, if not set.",
+ "control": "text",
+ "category": "Component"
+ },
+ "spectrum-radio-label-top-to-text": {
+ "value": "12px",
+ "description": "Defined in `.spectrum-Radio`, `.spectrum-Radio--sizeS`, `.spectrum-Radio--sizeL`, `.spectrum-Radio--sizeXL`.
Used by `.spectrum-Radio-label`.
Defaults to `var(--spectrum-component-top-to-text-300)`, if not set.",
+ "control": "text",
+ "category": "Component"
+ },
+ "spectrum-radio-label-bottom-to-text": {
+ "value": "14px",
+ "description": "Defined in `.spectrum-Radio`, `.spectrum-Radio--sizeS`, `.spectrum-Radio--sizeL`, `.spectrum-Radio--sizeXL`.
Used by `.spectrum-Radio-label`.
Defaults to `var(--spectrum-component-bottom-to-text-300)`, if not set.",
+ "control": "text",
+ "category": "Component"
+ },
+ "spectrum-radio-button-top-to-control": {
+ "value": "15px",
+ "description": "Defined in `.spectrum-Radio`, `.spectrum-Radio--sizeS`, `.spectrum-Radio--sizeL`, `.spectrum-Radio--sizeXL`.
Used by `.spectrum-Radio-button`.
Defaults to `var(--spectrum-radio-button-top-to-control-extra-large)`, if not set.",
+ "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": {
+ "value": "18px",
+ "description": "Defined in `.spectrum-Radio`, `.spectrum-Radio--sizeS`, `.spectrum-Radio--sizeL`, `.spectrum-Radio--sizeXL`.
Used by `.spectrum-Radio-label`.
Defaults to `var(--spectrum-font-size-300)`, if not set.",
+ "control": "text",
+ "category": "Component"
+ },
+ "spectrum-radio-border-width": {
+ "value": "2px",
+ "description": "Defined in `.spectrum-Radio`.
Used by `.spectrum-Radio-button:before`.
Defaults to `var(--spectrum-border-width-200)`, if not set.",
+ "control": "text",
+ "category": "Component"
+ },
+ "spectrum-radio-text-font-weight": {
+ "value": "400",
+ "description": "Defined in `.spectrum-Radio`.
Used by `.spectrum-Radio-label`.
Defaults to `var(--spectrum-regular-font-weight)`, if not set.",
+ "control": "text",
+ "category": "Component"
+ },
+ "spectrum-radio-text-font-style": {
+ "value": "normal",
+ "description": "Defined in `.spectrum-Radio`.
Used by `.spectrum-Radio-label`.
Defaults to `var(--spectrum-default-font-style)`, if not set.",
+ "control": "text",
+ "category": "Component"
+ },
+ "spectrum-radio-line-height-cjk": {
+ "value": "1.5",
+ "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)`.
Defaults to `var(--spectrum-cjk-line-height-100)`, if not set.",
+ "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-selection-indicator": {
+ "value": "4px",
+ "description": "Used by `.spectrum-Radio-input:checked + .spectrum-Radio-button:before`.",
+ "control": "text",
+ "category": "Component"
+ }
+ },
+ "global": {
+ "spectrum-gray-25": {
+ "value": "light-dark(rgb(255, 255, 255), rgb(17, 17, 17))",
+ "description": "Used by `--spectrum-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`, `--spectrum-radio-button-border-color-default`.",
+ "control": "color",
+ "category": "Global"
+ },
+ "spectrum-neutral-content-color-hover": {
+ "value": "var(--spectrum-gray-900)",
+ "description": "Used by `--spectrum-radio-neutral-content-color-hover`, `--spectrum-radio-button-border-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`, `--spectrum-radio-button-border-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`, `--spectrum-radio-button-border-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-content-color-default": {
+ "value": "var(--spectrum-accent-color-900)",
+ "description": "Used by `--spectrum-radio-emphasized-accent-color`.",
+ "control": "color",
+ "category": "Global"
+ },
+ "spectrum-accent-content-color-hover": {
+ "value": "var(--spectrum-accent-color-1000)",
+ "description": "Used by `--spectrum-radio-emphasized-accent-color-hover`.",
+ "control": "color",
+ "category": "Global"
+ },
+ "spectrum-accent-content-color-down": {
+ "value": "var(--spectrum-accent-color-1000)",
+ "description": "Used by `--spectrum-radio-emphasized-accent-color-down`.",
+ "control": "color",
+ "category": "Global"
+ },
+ "spectrum-accent-content-color-key-focus": {
+ "value": "var(--spectrum-accent-color-1000)",
+ "description": "Used by `--spectrum-radio-emphasized-accent-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-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-border-width-200": {
+ "value": "2px",
+ "description": "Used by `--spectrum-radio-border-width`.",
+ "control": "text",
+ "category": "Global"
+ },
+ "spectrum-regular-font-weight": {
+ "value": "400",
+ "description": "Used by `--spectrum-radio-text-font-weight`.",
+ "control": "text",
+ "category": "Global"
+ },
+ "spectrum-default-font-style": {
+ "value": "normal",
+ "description": "Used by `--spectrum-radio-text-font-style`.",
+ "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-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"
+ },
+ "spectrum-component-size-minimum-perspective-down": {
+ "value": "24px",
+ "description": "Used by `.spectrum-Radio:not(.is-readOnly):active .spectrum-Radio-input:not(:disabled) + .spectrum-Radio-button`.",
+ "control": "text",
+ "category": "Global"
+ },
+ "spectrum-component-size-difference-down": {
+ "value": "-2px",
+ "description": "Used by `.spectrum-Radio:not(.is-readOnly):active .spectrum-Radio-input:not(:disabled) + .spectrum-Radio-button`.",
+ "control": "text",
+ "category": "Global"
+ }
+ },
+ "passthroughs": {},
+ "high-contrast": {
+ "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.is-active .spectrum-Radio-button:before, .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-checked-border-color-down": {
+ "value": "var(--mod-radio-button-checked-border-color-down, var(--spectrum-radio-button-border-color-down))",
+ "description": "Defined in `.spectrum-Radio`.
Used by `.spectrum-Radio.is-active .spectrum-Radio-input:checked + .spectrum-Radio-button:before, .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-border-color-down))`, 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.is-active .spectrum-Radio-label, .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-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-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"
+ },
+ "highcontrast-radio-button-checked-border-color-focus": {
+ "value": "var(--mod-radio-button-checked-border-color-focus, var(--spectrum-radio-button-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-border-color-focus))`, 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-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-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-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-checked-border-color-hover": {
+ "value": "var(--mod-radio-button-checked-border-color-hover, var(--spectrum-radio-button-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-border-color-hover))`, 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-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-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-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-button-checked-border-color-default": {
+ "value": "var(--mod-radio-button-checked-border-color-default, var(--spectrum-radio-button-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-border-color-default))`, 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`, `.spectrum-Radio.is-readOnly .spectrum-Radio-input + .spectrum-Radio-button:before`, `.spectrum-Radio.is-readOnly:hover .spectrum-Radio-input + .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"
+ }
+ }
}
diff --git a/components/radio/stories/radio.stories.js b/components/radio/stories/radio.stories.js
index ead1b1c051b..194ce7560be 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 { isActive, isChecked, isDisabled, isEmphasized, isFocused, isHovered, 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.
*
@@ -66,9 +68,7 @@ export default {
},
packageJson,
metadata,
- status: {
- type: "migrated",
- },
+ cssprops: metadata.modifiers,
},
tags: ["migrated"],
};
diff --git a/components/rating/dist/metadata.json b/components/rating/dist/metadata.json
index 591d987a853..90ebfd6133f 100644
--- a/components/rating/dist/metadata.json
+++ b/components/rating/dist/metadata.json
@@ -3,122 +3,466 @@
"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:active",
".spectrum-Rating--emphasized:hover .spectrum-Rating-icon:hover",
".spectrum-Rating--emphasized:hover .spectrum-Rating-icon:hover ~ .spectrum-Rating-icon",
+ ".spectrum-Rating--emphasized.is-focused .spectrum-Rating-icon.is-selected",
".spectrum-Rating--sizeS",
".spectrum-Rating-icon",
".spectrum-Rating-icon .spectrum-Rating-starActive",
".spectrum-Rating-icon .spectrum-Rating-starInactive",
".spectrum-Rating-icon svg",
+ ".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-selected",
".spectrum-Rating-icon.is-selected .spectrum-Rating-starActive",
".spectrum-Rating-icon.is-selected .spectrum-Rating-starInactive",
".spectrum-Rating-icon.is-selected.is-partial .spectrum-Rating-starActive",
".spectrum-Rating-icon.is-selected.is-partial .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.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-readOnly",
".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-starActive",
".spectrum-Rating:hover .spectrum-Rating-starInactive",
- ".spectrum-Rating:not(.is-readOnly) .spectrum-Rating-input:not(:disabled) ~ .spectrum-Rating-icon:active"
- ],
- "modifiers": [
- "--mod-rating-border-radius",
- "--mod-rating-bottom-to-content-area",
- "--mod-rating-edge-to-content-area",
- "--mod-rating-emphasized-icon-color-default",
- "--mod-rating-emphasized-icon-color-down",
- "--mod-rating-emphasized-icon-color-hover",
- "--mod-rating-emphasized-icon-color-key-focus",
- "--mod-rating-focus-indicator-color",
- "--mod-rating-focus-indicator-gap",
- "--mod-rating-focus-indicator-thickness",
- "--mod-rating-height",
- "--mod-rating-icon-color-default",
- "--mod-rating-icon-color-disabled",
- "--mod-rating-icon-color-down",
- "--mod-rating-icon-color-hover",
- "--mod-rating-icon-fill",
- "--mod-rating-icon-height",
- "--mod-rating-icon-spacing",
- "--mod-rating-icon-width",
- "--mod-rating-top-to-content-area",
- "--mod-rating-width"
- ],
- "component": [
- "--spectrum-rating-border-radius",
- "--spectrum-rating-bottom-to-content-area",
- "--spectrum-rating-bottom-to-content-area-medium",
- "--spectrum-rating-bottom-to-content-area-small",
- "--spectrum-rating-edge-to-content-area",
- "--spectrum-rating-edge-to-content-area-medium",
- "--spectrum-rating-edge-to-content-area-small",
- "--spectrum-rating-emphasized-icon-color-default",
- "--spectrum-rating-emphasized-icon-color-down",
- "--spectrum-rating-emphasized-icon-color-hover",
- "--spectrum-rating-emphasized-icon-color-key-focus",
- "--spectrum-rating-focus-indicator-color",
- "--spectrum-rating-focus-indicator-gap",
- "--spectrum-rating-focus-indicator-thickness",
- "--spectrum-rating-height",
- "--spectrum-rating-height-medium",
- "--spectrum-rating-height-small",
- "--spectrum-rating-icon-color-default",
- "--spectrum-rating-icon-color-disabled",
- "--spectrum-rating-icon-color-down",
- "--spectrum-rating-icon-color-hover",
- "--spectrum-rating-icon-fill",
- "--spectrum-rating-icon-height",
- "--spectrum-rating-icon-spacing",
- "--spectrum-rating-icon-width",
- "--spectrum-rating-top-to-content-area",
- "--spectrum-rating-top-to-content-area-medium",
- "--spectrum-rating-top-to-content-area-small",
- "--spectrum-rating-width",
- "--spectrum-rating-width-medium",
- "--spectrum-rating-width-small"
- ],
- "global": [
- "--spectrum-accent-content-color-default",
- "--spectrum-accent-content-color-down",
- "--spectrum-accent-content-color-hover",
- "--spectrum-component-size-difference-down",
- "--spectrum-component-size-minimum-perspective-down",
- "--spectrum-corner-radius-medium-size-medium",
- "--spectrum-corner-radius-medium-size-small",
- "--spectrum-disabled-content-color",
- "--spectrum-focus-indicator-color",
- "--spectrum-focus-indicator-gap",
- "--spectrum-focus-indicator-thickness",
- "--spectrum-neutral-content-color-default",
- "--spectrum-neutral-content-color-down",
- "--spectrum-neutral-content-color-hover",
- "--spectrum-spacing-75",
- "--spectrum-workflow-icon-size-100",
- "--spectrum-workflow-icon-size-75"
+ ".spectrum-Rating:not(.is-readOnly) .spectrum-Rating-input:not(:disabled) ~ .spectrum-Rating-icon:active",
+ ".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-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"
- ]
+ "modifiers": {
+ "mod-rating-icon-spacing": {
+ "description": "Used by `.spectrum-Rating`.
Defaults to `var(--spectrum-rating-icon-spacing)`, if not set.",
+ "control": "text",
+ "category": "Modifier"
+ },
+ "mod-rating-top-to-content-area": {
+ "description": "Defined in `.spectrum-Rating--sizeS`.
Used by `.spectrum-Rating`.
Defaults to `var(--spectrum-rating-top-to-content-area)`, if not set.",
+ "control": "text",
+ "category": "Modifier"
+ },
+ "mod-rating-bottom-to-content-area": {
+ "description": "Defined in `.spectrum-Rating--sizeS`.
Used by `.spectrum-Rating`.
Defaults to `var(--spectrum-rating-bottom-to-content-area)`, if not set.",
+ "control": "text",
+ "category": "Modifier"
+ },
+ "mod-rating-edge-to-content-area": {
+ "description": "Defined in `.spectrum-Rating--sizeS`.
Used by `.spectrum-Rating`.
Defaults to `var(--spectrum-rating-edge-to-content-area)`, if not set.",
+ "control": "text",
+ "category": "Modifier"
+ },
+ "mod-rating-border-radius": {
+ "description": "Defined in `.spectrum-Rating--sizeS`.
Used by `.spectrum-Rating`.
Defaults to `var(--spectrum-rating-border-radius)`, if not set.",
+ "control": "text",
+ "category": "Modifier"
+ },
+ "mod-rating-height": {
+ "description": "Defined in `.spectrum-Rating--sizeS`.
Used by `.spectrum-Rating`.
Defaults to `var(--spectrum-rating-height)`, if not set.",
+ "control": "text",
+ "category": "Modifier"
+ },
+ "mod-rating-width": {
+ "description": "Defined in `.spectrum-Rating--sizeS`.
Used by `.spectrum-Rating`.
Defaults to `var(--spectrum-rating-width)`, if not set.",
+ "control": "text",
+ "category": "Modifier"
+ },
+ "mod-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": {
+ "description": "Used by `.spectrum-Rating.is-focused`.
Defaults to `var(--spectrum-rating-focus-indicator-color)`, if not set.",
+ "control": "color",
+ "category": "Modifier"
+ },
+ "mod-rating-focus-indicator-gap": {
+ "description": "Used by `.spectrum-Rating.is-focused`.
Defaults to `var(--spectrum-rating-focus-indicator-gap)`, if not set.",
+ "control": "text",
+ "category": "Modifier"
+ },
+ "mod-rating-icon-height": {
+ "description": "Defined in `.spectrum-Rating--sizeS`.
Used by `.spectrum-Rating-icon, .spectrum-Rating-icon svg`.
Defaults to `var(--spectrum-rating-icon-height)`, if not set.",
+ "control": "text",
+ "category": "Modifier"
+ },
+ "mod-rating-icon-width": {
+ "description": "Defined in `.spectrum-Rating--sizeS`.
Used by `.spectrum-Rating-icon, .spectrum-Rating-icon svg`.
Defaults to `var(--spectrum-rating-icon-width)`, if not set.",
+ "control": "text",
+ "category": "Modifier"
+ },
+ "mod-rating-icon-fill": {
+ "description": "Used by `--spectrum-rating-icon-fill`.",
+ "control": "text",
+ "category": "Modifier"
+ },
+ "mod-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": {
+ "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": {
+ "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": {
+ "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": {
+ "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": {
+ "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": {
+ "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": {
+ "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-height": {
+ "value": "var(--spectrum-component-height-100)",
+ "description": "Defined in `.spectrum-Rating`.
Used by `.spectrum-Rating`.
Defaults to `var(--spectrum-rating-height-medium)`, if not set.",
+ "control": "text",
+ "category": "Component"
+ },
+ "spectrum-rating-height-medium": {
+ "value": "var(--spectrum-component-height-100)",
+ "description": "Used by `--spectrum-rating-height`.",
+ "control": "text",
+ "category": "Component"
+ },
+ "spectrum-rating-width": {
+ "value": "128px",
+ "description": "Defined in `.spectrum-Rating`.
Used by `.spectrum-Rating`.
Defaults to `var(--spectrum-rating-width-medium)`, if not set.",
+ "control": "text",
+ "category": "Component"
+ },
+ "spectrum-rating-width-medium": {
+ "value": "128px",
+ "description": "Used by `--spectrum-rating-width`.",
+ "control": "text",
+ "category": "Component"
+ },
+ "spectrum-rating-icon-height": {
+ "value": "20px",
+ "description": "Defined in `.spectrum-Rating`.
Used by `.spectrum-Rating-icon, .spectrum-Rating-icon svg`.
Defaults to `var(--spectrum-workflow-icon-size-100)`, if not set.",
+ "control": "text",
+ "category": "Component"
+ },
+ "spectrum-rating-icon-width": {
+ "value": "20px",
+ "description": "Defined in `.spectrum-Rating`.
Used by `.spectrum-Rating-icon, .spectrum-Rating-icon svg`.
Defaults to `var(--spectrum-workflow-icon-size-100)`, if not set.",
+ "control": "text",
+ "category": "Component"
+ },
+ "spectrum-rating-icon-color-default": {
+ "value": "var(--spectrum-gray-800)",
+ "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`.
Defaults to `var(--spectrum-neutral-content-color-default)`, if not set.",
+ "control": "color",
+ "category": "Component"
+ },
+ "spectrum-rating-icon-color-hover": {
+ "value": "var(--spectrum-gray-900)",
+ "description": "Defined in `.spectrum-Rating`.
Used by `.spectrum-Rating:hover .spectrum-Rating-icon:hover`.
Defaults to `var(--spectrum-neutral-content-color-hover)`, if not set.",
+ "control": "color",
+ "category": "Component"
+ },
+ "spectrum-rating-icon-color-down": {
+ "value": "var(--spectrum-gray-900)",
+ "description": "Defined in `.spectrum-Rating`.
Used by `.spectrum-Rating:hover .spectrum-Rating-icon:active`.
Defaults to `var(--spectrum-neutral-content-color-down)`, if not set.",
+ "control": "color",
+ "category": "Component"
+ },
+ "spectrum-rating-border-radius": {
+ "value": "8px",
+ "description": "Defined in `.spectrum-Rating`.
Used by `.spectrum-Rating`.
Defaults to `var(--spectrum-corner-radius-medium-size-medium)`, if not set.",
+ "control": "text",
+ "category": "Component"
+ },
+ "spectrum-rating-focus-indicator-thickness": {
+ "value": "2px",
+ "description": "Defined in `.spectrum-Rating`.
Used by `.spectrum-Rating.is-focused`.
Defaults to `var(--spectrum-focus-indicator-thickness)`, if not set.",
+ "control": "text",
+ "category": "Component"
+ },
+ "spectrum-rating-focus-indicator-color": {
+ "value": "var(--spectrum-blue-800)",
+ "description": "Defined in `.spectrum-Rating`.
Used by `.spectrum-Rating.is-focused`.
Defaults to `var(--spectrum-focus-indicator-color)`, if not set.",
+ "control": "color",
+ "category": "Component"
+ },
+ "spectrum-rating-focus-indicator-gap": {
+ "value": "2px",
+ "description": "Defined in `.spectrum-Rating`.
Used by `.spectrum-Rating.is-focused`.
Defaults to `var(--spectrum-focus-indicator-gap)`, if not set.",
+ "control": "text",
+ "category": "Component"
+ },
+ "spectrum-rating-icon-spacing": {
+ "value": "4px",
+ "description": "Defined in `.spectrum-Rating`.
Used by `.spectrum-Rating`.
Defaults to `var(--spectrum-spacing-75)`, if not set.",
+ "control": "text",
+ "category": "Component"
+ },
+ "spectrum-rating-top-to-content-area": {
+ "value": "6px",
+ "description": "Defined in `.spectrum-Rating`.
Used by `.spectrum-Rating`.
Defaults to `var(--spectrum-rating-top-to-content-area-medium)`, if not set.",
+ "control": "text",
+ "category": "Component"
+ },
+ "spectrum-rating-top-to-content-area-medium": {
+ "value": "6px",
+ "description": "Used by `--spectrum-rating-top-to-content-area`.",
+ "control": "text",
+ "category": "Component"
+ },
+ "spectrum-rating-bottom-to-content-area": {
+ "value": "6px",
+ "description": "Defined in `.spectrum-Rating`.
Used by `.spectrum-Rating`.
Defaults to `var(--spectrum-rating-bottom-to-content-area-medium)`, if not set.",
+ "control": "text",
+ "category": "Component"
+ },
+ "spectrum-rating-bottom-to-content-area-medium": {
+ "value": "6px",
+ "description": "Used by `--spectrum-rating-bottom-to-content-area`.",
+ "control": "text",
+ "category": "Component"
+ },
+ "spectrum-rating-edge-to-content-area": {
+ "value": "6px",
+ "description": "Defined in `.spectrum-Rating`.
Used by `.spectrum-Rating`.
Defaults to `var(--spectrum-rating-edge-to-content-area-medium)`, if not set.",
+ "control": "text",
+ "category": "Component"
+ },
+ "spectrum-rating-edge-to-content-area-medium": {
+ "value": "6px",
+ "description": "Used by `--spectrum-rating-edge-to-content-area`.",
+ "control": "text",
+ "category": "Component"
+ },
+ "spectrum-rating-emphasized-icon-color-default": {
+ "value": "var(--spectrum-accent-color-900)",
+ "description": "Defined in `.spectrum-Rating`.
Used by `.spectrum-Rating--emphasized .spectrum-Rating-icon.is-selected`, `.spectrum-Rating--emphasized:hover .spectrum-Rating-icon`.
Defaults to `var(--spectrum-accent-content-color-default)`, if not set.",
+ "control": "color",
+ "category": "Component"
+ },
+ "spectrum-rating-emphasized-icon-color-hover": {
+ "value": "var(--spectrum-accent-color-1000)",
+ "description": "Defined in `.spectrum-Rating`.
Used by `.spectrum-Rating--emphasized:hover .spectrum-Rating-icon:hover`.
Defaults to `var(--spectrum-accent-content-color-hover)`, if not set.",
+ "control": "color",
+ "category": "Component"
+ },
+ "spectrum-rating-emphasized-icon-color-down": {
+ "value": "var(--spectrum-accent-color-1000)",
+ "description": "Defined in `.spectrum-Rating`.
Used by `.spectrum-Rating--emphasized:hover .spectrum-Rating-icon:active`.
Defaults to `var(--spectrum-accent-content-color-down)`, if not set.",
+ "control": "color",
+ "category": "Component"
+ },
+ "spectrum-rating-emphasized-icon-color-key-focus": {
+ "value": "var(--spectrum-accent-color-900)",
+ "description": "Defined in `.spectrum-Rating`.
Used by `.spectrum-Rating--emphasized.is-focused .spectrum-Rating-icon.is-selected`.
Defaults to `var(--spectrum-accent-content-color-default)`, if not set.",
+ "control": "color",
+ "category": "Component"
+ },
+ "spectrum-rating-icon-color-disabled": {
+ "value": "var(--spectrum-gray-400)",
+ "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(--spectrum-disabled-content-color)`, if not set.",
+ "control": "color",
+ "category": "Component"
+ },
+ "spectrum-rating-height-small": {
+ "value": "var(--spectrum-component-height-75)",
+ "description": "Used by `--mod-rating-height`.",
+ "control": "text",
+ "category": "Component"
+ },
+ "spectrum-rating-width-small": {
+ "value": "104px",
+ "description": "Used by `--mod-rating-width`.",
+ "control": "text",
+ "category": "Component"
+ },
+ "spectrum-rating-top-to-content-area-small": {
+ "value": "4px",
+ "description": "Used by `--mod-rating-top-to-content-area`.",
+ "control": "text",
+ "category": "Component"
+ },
+ "spectrum-rating-edge-to-content-area-small": {
+ "value": "4px",
+ "description": "Used by `--mod-rating-edge-to-content-area`.",
+ "control": "text",
+ "category": "Component"
+ },
+ "spectrum-rating-bottom-to-content-area-small": {
+ "value": "4px",
+ "description": "Used by `--mod-rating-bottom-to-content-area`.",
+ "control": "text",
+ "category": "Component"
+ },
+ "spectrum-rating-icon-fill": {
+ "value": "var(--mod-rating-icon-fill, 100%)",
+ "description": "Defined in `.spectrum-Rating-icon`.
Used by `.spectrum-Rating-icon.is-selected.is-partial .spectrum-Rating-starActive`.
Defaults to `var(--mod-rating-icon-fill, 100%)`, if not set.",
+ "control": "text",
+ "category": "Component"
+ }
+ },
+ "global": {
+ "spectrum-workflow-icon-size-100": {
+ "value": "20px",
+ "description": "Used by `--spectrum-rating-icon-height`, `--spectrum-rating-icon-width`.",
+ "control": "text",
+ "category": "Global"
+ },
+ "spectrum-neutral-content-color-default": {
+ "value": "var(--spectrum-gray-800)",
+ "description": "Used by `--spectrum-rating-icon-color-default`.",
+ "control": "color",
+ "category": "Global"
+ },
+ "spectrum-neutral-content-color-hover": {
+ "value": "var(--spectrum-gray-900)",
+ "description": "Used by `--spectrum-rating-icon-color-hover`.",
+ "control": "color",
+ "category": "Global"
+ },
+ "spectrum-neutral-content-color-down": {
+ "value": "var(--spectrum-gray-900)",
+ "description": "Used by `--spectrum-rating-icon-color-down`.",
+ "control": "color",
+ "category": "Global"
+ },
+ "spectrum-corner-radius-medium-size-medium": {
+ "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-spacing-75": {
+ "value": "4px",
+ "description": "Used by `--spectrum-rating-icon-spacing`.",
+ "control": "text",
+ "category": "Global"
+ },
+ "spectrum-accent-content-color-default": {
+ "value": "var(--spectrum-accent-color-900)",
+ "description": "Used by `--spectrum-rating-emphasized-icon-color-default`, `--spectrum-rating-emphasized-icon-color-key-focus`.",
+ "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-disabled-content-color": {
+ "value": "var(--spectrum-gray-400)",
+ "description": "Used by `--spectrum-rating-icon-color-disabled`.",
+ "control": "color",
+ "category": "Global"
+ },
+ "spectrum-component-size-minimum-perspective-down": {
+ "value": "24px",
+ "description": "Used by `.spectrum-Rating:not(.is-readOnly) .spectrum-Rating-input:not(:disabled) ~ .spectrum-Rating-icon:active`.",
+ "control": "text",
+ "category": "Global"
+ },
+ "spectrum-component-size-difference-down": {
+ "value": "-2px",
+ "description": "Used by `.spectrum-Rating:not(.is-readOnly) .spectrum-Rating-input:not(:disabled) ~ .spectrum-Rating-icon:active`.",
+ "control": "text",
+ "category": "Global"
+ },
+ "spectrum-workflow-icon-size-75": {
+ "value": "16px",
+ "description": "Used by `--mod-rating-icon-height`, `--mod-rating-icon-width`.",
+ "control": "text",
+ "category": "Global"
+ },
+ "spectrum-corner-radius-medium-size-small": {
+ "value": "7px",
+ "description": "Used by `--mod-rating-border-radius`.",
+ "control": "text",
+ "category": "Global"
+ }
+ },
+ "passthroughs": {},
+ "high-contrast": {
+ "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`.
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": {
+ "value": "CanvasText",
+ "description": "Defined in `.spectrum-Rating`.
Used by `.spectrum-Rating.is-focused`.
Defaults to `CanvasText`, if not set.",
+ "control": "color"
+ }
+ }
}
diff --git a/components/rating/stories/rating.stories.js b/components/rating/stories/rating.stories.js
index a7def3b170c..231ce353549 100644
--- a/components/rating/stories/rating.stories.js
+++ b/components/rating/stories/rating.stories.js
@@ -1,11 +1,13 @@
import { Sizes } from "@spectrum-css/preview/decorators";
import { disableDefaultModes } from "@spectrum-css/preview/modes";
import { isDisabled, isEmphasized, isFocused, isReadOnly, size } 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.
*
@@ -76,9 +78,7 @@ export default {
},
packageJson,
metadata,
- status: {
- type: "migrated",
- },
+ cssprops: metadata.modifiers,
},
tags: ["migrated"],
};
diff --git a/components/search/dist/metadata.json b/components/search/dist/metadata.json
index f57d2c77c0f..7e883e4bad7 100644
--- a/components/search/dist/metadata.json
+++ b/components/search/dist/metadata.json
@@ -16,177 +16,832 @@
".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.is-disabled .spectrum-Search-clearButton",
".spectrum-Search:lang(ja)",
".spectrum-Search:lang(ko)",
- ".spectrum-Search:lang(zh)"
- ],
- "modifiers": [
- "--mod-search-background-color",
- "--mod-search-background-color-disabled",
- "--mod-search-block-size",
- "--mod-search-border-color-default",
- "--mod-search-border-color-disabled",
- "--mod-search-border-color-focus",
- "--mod-search-border-color-focus-hover",
- "--mod-search-border-color-hover",
- "--mod-search-border-color-key-focus",
- "--mod-search-border-radius",
- "--mod-search-border-width",
- "--mod-search-bottom-to-text",
- "--mod-search-button-inline-size",
- "--mod-search-color-default",
- "--mod-search-color-disabled",
- "--mod-search-color-focus",
- "--mod-search-color-focus-hover",
- "--mod-search-color-hover",
- "--mod-search-color-key-focus",
- "--mod-search-edge-to-visual",
- "--mod-search-focus-indicator-color",
- "--mod-search-focus-indicator-gap",
- "--mod-search-focus-indicator-thickness",
- "--mod-search-font-family",
- "--mod-search-font-style",
- "--mod-search-font-weight",
- "--mod-search-icon-size",
- "--mod-search-inline-size",
- "--mod-search-line-height",
- "--mod-search-min-inline-size",
- "--mod-search-text-to-icon",
- "--mod-search-to-help-text",
- "--mod-search-top-to-icon",
- "--mod-search-top-to-text"
- ],
- "component": [
- "--spectrum-search-background-color",
- "--spectrum-search-background-color-disabled",
- "--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-icon",
- "--spectrum-search-top-to-text"
- ],
- "global": [
- "--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-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-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-full",
- "--spectrum-default-font-style",
- "--spectrum-disabled-border-color",
- "--spectrum-disabled-content-color",
- "--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-300",
- "--spectrum-gray-400",
- "--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"
- ],
- "passthroughs": [
- "--mod-textfield-background-color",
- "--mod-textfield-background-color-disabled",
- "--mod-textfield-border-color",
- "--mod-textfield-border-color-disabled",
- "--mod-textfield-border-color-focus",
- "--mod-textfield-border-color-focus-hover",
- "--mod-textfield-border-color-hover",
- "--mod-textfield-border-color-keyboard-focus",
- "--mod-textfield-border-width",
- "--mod-textfield-corner-radius",
- "--mod-textfield-focus-indicator-color",
- "--mod-textfield-focus-indicator-gap",
- "--mod-textfield-focus-indicator-width",
- "--mod-textfield-font-family",
- "--mod-textfield-font-weight",
- "--mod-textfield-placeholder-font-size",
- "--mod-textfield-text-color-default",
- "--mod-textfield-text-color-disabled",
- "--mod-textfield-text-color-focus",
- "--mod-textfield-text-color-focus-hover",
- "--mod-textfield-text-color-hover",
- "--mod-textfield-text-color-keyboard-focus"
+ ".spectrum-Search:lang(zh)",
+ ".spectrum-Search.is-disabled .spectrum-Search-clearButton"
],
- "high-contrast": [
- "--highcontrast-search-color-default",
- "--highcontrast-search-color-disabled",
- "--highcontrast-search-color-focus",
- "--highcontrast-search-color-hover"
- ]
+ "modifiers": {
+ "mod-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": {
+ "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": {
+ "description": "Used by `--mod-textfield-corner-radius`, `.spectrum-Search-clearButton, .spectrum-Search-clearButton .spectrum-ClearButton-fill`.
Defaults to `var(--spectrum-search-border-radius)`, if not set.",
+ "control": "text",
+ "category": "Modifier"
+ },
+ "mod-search-border-width": {
+ "description": "Used by `--mod-textfield-border-width`, `.spectrum-Search-input`.
Defaults to `var(--spectrum-search-border-width)`, if not set.",
+ "control": "text",
+ "category": "Modifier"
+ },
+ "mod-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": {
+ "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": {
+ "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": {
+ "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": {
+ "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": {
+ "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": {
+ "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": {
+ "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": {
+ "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": {
+ "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": {
+ "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": {
+ "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": {
+ "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": {
+ "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": {
+ "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": {
+ "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": {
+ "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": {
+ "description": "Used by `.spectrum-Search`.
Defaults to `var(--spectrum-search-inline-size)`, if not set.",
+ "control": "text",
+ "category": "Modifier"
+ },
+ "mod-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": {
+ "description": "Used by `.spectrum-Search .spectrum-HelpText`.
Defaults to `var(--spectrum-search-to-help-text)`, if not set.",
+ "control": "text",
+ "category": "Modifier"
+ },
+ "mod-search-edge-to-visual": {
+ "description": "Used by `.spectrum-Search-icon`, `.spectrum-Search-input`.
Defaults to `var(--spectrum-search-edge-to-visual)`, if not set.",
+ "control": "text",
+ "category": "Modifier"
+ },
+ "mod-search-top-to-icon": {
+ "description": "Used by `.spectrum-Search-icon`.
Defaults to `var(--spectrum-search-top-to-icon)`, if not set.",
+ "control": "text",
+ "category": "Modifier"
+ },
+ "mod-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": {
+ "description": "Used by `.spectrum-Search-input`.
Defaults to `var(--spectrum-search-top-to-text)`, if not set.",
+ "control": "text",
+ "category": "Modifier"
+ },
+ "mod-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-icon-size": {
+ "description": "Used by `.spectrum-Search-input`.
Defaults to `var(--spectrum-search-icon-size)`, if not set.",
+ "control": "text",
+ "category": "Modifier"
+ },
+ "mod-search-text-to-icon": {
+ "description": "Used by `.spectrum-Search-input`.
Defaults to `var(--spectrum-search-text-to-icon)`, if not set.",
+ "control": "text",
+ "category": "Modifier"
+ },
+ "mod-search-button-inline-size": {
+ "description": "Used by `.spectrum-Search-input`.
Defaults to `var(--spectrum-search-button-inline-size)`, if not set.",
+ "control": "text",
+ "category": "Modifier"
+ },
+ "mod-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": {
+ "description": "Used by `.spectrum-Search-input`.
Defaults to `var(--spectrum-search-line-height)`, if not set.",
+ "control": "text",
+ "category": "Modifier"
+ }
+ },
+ "component": {
+ "spectrum-search-background-color": {
+ "value": "light-dark(rgb(255, 255, 255), rgb(17, 17, 17))",
+ "description": "Defined in `.spectrum-Search`.
Used by `--mod-textfield-background-color`.
Defaults to `var(--spectrum-gray-25)`, if not set.",
+ "control": "color",
+ "category": "Component"
+ },
+ "spectrum-search-border-color-default": {
+ "value": "light-dark(rgb(218, 218, 218), rgb(57, 57, 57))",
+ "description": "Defined in `.spectrum-Search`.
Used by `--mod-textfield-border-color`.
Defaults to `var(--spectrum-gray-300)`, if not set.",
+ "control": "color",
+ "category": "Component"
+ },
+ "spectrum-search-border-color-hover": {
+ "value": "light-dark(rgb(198, 198, 198), rgb(68, 68, 68))",
+ "description": "Defined in `.spectrum-Search`.
Used by `--mod-textfield-border-color-hover`.
Defaults to `var(--spectrum-gray-400)`, if not set.",
+ "control": "color",
+ "category": "Component"
+ },
+ "spectrum-search-border-color-focus": {
+ "value": "light-dark(rgb(41, 41, 41), rgb(219, 219, 219))",
+ "description": "Defined in `.spectrum-Search`.
Used by `--mod-textfield-border-color-focus`.
Defaults to `var(--spectrum-gray-800)`, if not set.",
+ "control": "color",
+ "category": "Component"
+ },
+ "spectrum-search-border-color-focus-hover": {
+ "value": "light-dark(rgb(19, 19, 19), rgb(242, 242, 242))",
+ "description": "Defined in `.spectrum-Search`.
Used by `--mod-textfield-border-color-focus-hover`.
Defaults to `var(--spectrum-gray-900)`, if not set.",
+ "control": "color",
+ "category": "Component"
+ },
+ "spectrum-search-border-color-key-focus": {
+ "value": "light-dark(rgb(41, 41, 41), rgb(219, 219, 219))",
+ "description": "Defined in `.spectrum-Search`.
Used by `--mod-textfield-border-color-keyboard-focus`.
Defaults to `var(--spectrum-gray-800)`, if not set.",
+ "control": "color",
+ "category": "Component"
+ },
+ "spectrum-search-border-width": {
+ "value": "2px",
+ "description": "Defined in `.spectrum-Search`.
Used by `--mod-textfield-border-width`, `.spectrum-Search-input`.
Defaults to `var(--spectrum-border-width-200)`, if not set.",
+ "control": "text",
+ "category": "Component"
+ },
+ "spectrum-search-border-radius": {
+ "value": "9999px",
+ "description": "Defined in `.spectrum-Search`.
Used by `--mod-textfield-corner-radius`, `.spectrum-Search-clearButton, .spectrum-Search-clearButton .spectrum-ClearButton-fill`.
Defaults to `var(--spectrum-corner-radius-full)`, if not set.",
+ "control": "text",
+ "category": "Component"
+ },
+ "spectrum-search-inline-size": {
+ "value": "var(--spectrum-field-width-small)",
+ "description": "Defined in `.spectrum-Search`.
Used by `.spectrum-Search`.
Defaults to `var(--spectrum-field-width)`, if not set.",
+ "control": "text",
+ "category": "Component"
+ },
+ "spectrum-search-block-size": {
+ "value": "48px",
+ "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`.
Defaults to `var(--spectrum-component-height-300)`, if not set.",
+ "control": "text",
+ "category": "Component"
+ },
+ "spectrum-search-button-inline-size": {
+ "value": "var(--spectrum-search-block-size)",
+ "description": "Defined in `.spectrum-Search`.
Used by `.spectrum-Search-input`.
Defaults to `var(--spectrum-search-block-size)`, if not set.",
+ "control": "text",
+ "category": "Component"
+ },
+ "spectrum-search-min-inline-size": {
+ "value": "calc(var(--spectrum-search-field-minimum-width-multiplier) * var(--spectrum-search-block-size))",
+ "description": "Defined in `.spectrum-Search`.
Used by `.spectrum-Search`.
Defaults to `calc(var(--spectrum-search-field-minimum-width-multiplier) * var(--spectrum-search-block-size))`, if not set.",
+ "control": "text",
+ "category": "Component"
+ },
+ "spectrum-search-field-minimum-width-multiplier": {
+ "value": "4",
+ "description": "Used by `--spectrum-search-min-inline-size`.",
+ "control": "text",
+ "category": "Component"
+ },
+ "spectrum-search-icon-size": {
+ "value": "26px",
+ "description": "Defined in `.spectrum-Search`, `.spectrum-Search--sizeS`, `.spectrum-Search--sizeL`, `.spectrum-Search--sizeXL`.
Used by `.spectrum-Search-input`.
Defaults to `var(--spectrum-workflow-icon-size-300)`, if not set.",
+ "control": "text",
+ "category": "Component"
+ },
+ "spectrum-search-text-to-icon": {
+ "value": "8px",
+ "description": "Defined in `.spectrum-Search`, `.spectrum-Search--sizeS`, `.spectrum-Search--sizeL`, `.spectrum-Search--sizeXL`.
Used by `.spectrum-Search-input`.
Defaults to `var(--spectrum-text-to-visual-300)`, if not set.",
+ "control": "text",
+ "category": "Component"
+ },
+ "spectrum-search-to-help-text": {
+ "value": "0px",
+ "description": "Defined in `.spectrum-Search`.
Used by `.spectrum-Search .spectrum-HelpText`.
Defaults to `var(--spectrum-help-text-to-component)`, if not set.",
+ "control": "text",
+ "category": "Component"
+ },
+ "spectrum-search-top-to-text": {
+ "value": "12px",
+ "description": "Defined in `.spectrum-Search`, `.spectrum-Search--sizeS`, `.spectrum-Search--sizeL`, `.spectrum-Search--sizeXL`.
Used by `.spectrum-Search-input`.
Defaults to `var(--spectrum-component-top-to-text-300)`, if not set.",
+ "control": "text",
+ "category": "Component"
+ },
+ "spectrum-search-bottom-to-text": {
+ "value": "14px",
+ "description": "Defined in `.spectrum-Search`, `.spectrum-Search--sizeS`, `.spectrum-Search--sizeL`, `.spectrum-Search--sizeXL`.
Used by `.spectrum-Search-input`.
Defaults to `var(--spectrum-component-bottom-to-text-300)`, if not set.",
+ "control": "text",
+ "category": "Component"
+ },
+ "spectrum-search-edge-to-visual": {
+ "value": "21px",
+ "description": "Defined in `.spectrum-Search`, `.spectrum-Search--sizeS`, `.spectrum-Search--sizeL`, `.spectrum-Search--sizeXL`.
Used by `.spectrum-Search-icon`, `.spectrum-Search-input`.
Defaults to `var(--spectrum-component-pill-edge-to-visual-300)`, if not set.",
+ "control": "text",
+ "category": "Component"
+ },
+ "spectrum-search-top-to-icon": {
+ "value": "11px",
+ "description": "Defined in `.spectrum-Search`, `.spectrum-Search--sizeS`, `.spectrum-Search--sizeL`, `.spectrum-Search--sizeXL`.
Used by `.spectrum-Search-icon`.
Defaults to `var(--spectrum-component-top-to-workflow-icon-300)`, if not set.",
+ "control": "text",
+ "category": "Component"
+ },
+ "spectrum-search-focus-indicator-thickness": {
+ "value": "2px",
+ "description": "Defined in `.spectrum-Search`.
Used by `--mod-textfield-focus-indicator-width`.
Defaults to `var(--spectrum-focus-indicator-thickness)`, if not set.",
+ "control": "text",
+ "category": "Component"
+ },
+ "spectrum-search-focus-indicator-gap": {
+ "value": "2px",
+ "description": "Defined in `.spectrum-Search`.
Used by `--mod-textfield-focus-indicator-gap`.
Defaults to `var(--spectrum-focus-indicator-gap)`, if not set.",
+ "control": "text",
+ "category": "Component"
+ },
+ "spectrum-search-focus-indicator-color": {
+ "value": "var(--spectrum-blue-800)",
+ "description": "Defined in `.spectrum-Search`.
Used by `--mod-textfield-focus-indicator-color`.
Defaults to `var(--spectrum-focus-indicator-color)`, if not set.",
+ "control": "color",
+ "category": "Component"
+ },
+ "spectrum-search-font-family": {
+ "value": "var(--spectrum-sans-font-family-stack)",
+ "description": "Defined in `.spectrum-Search`.
Used by `--mod-textfield-font-family`.
Defaults to `var(--spectrum-sans-font-family-stack)`, if not set.",
+ "control": "text",
+ "category": "Component"
+ },
+ "spectrum-search-font-weight": {
+ "value": "400",
+ "description": "Defined in `.spectrum-Search`.
Used by `--mod-textfield-font-weight`.
Defaults to `var(--spectrum-regular-font-weight)`, if not set.",
+ "control": "text",
+ "category": "Component"
+ },
+ "spectrum-search-font-style": {
+ "value": "normal",
+ "description": "Defined in `.spectrum-Search`.
Used by `.spectrum-Search-input`.
Defaults to `var(--spectrum-default-font-style)`, if not set.",
+ "control": "text",
+ "category": "Component"
+ },
+ "spectrum-search-line-height": {
+ "value": "1.5",
+ "description": "Defined in `.spectrum-Search`, `.spectrum-Search:lang(ja), .spectrum-Search:lang(ko), .spectrum-Search:lang(zh)`.
Used by `.spectrum-Search-input`.
Defaults to `var(--spectrum-cjk-line-height-100)`, if not set.",
+ "control": "text",
+ "category": "Component"
+ },
+ "spectrum-search-color-default": {
+ "value": "var(--spectrum-gray-800)",
+ "description": "Defined in `.spectrum-Search`.
Used by `--mod-textfield-text-color-default`, `--spectrum-search-color`.
Defaults to `var(--spectrum-neutral-content-color-default)`, if not set.",
+ "control": "color",
+ "category": "Component"
+ },
+ "spectrum-search-color-hover": {
+ "value": "var(--spectrum-gray-900)",
+ "description": "Defined in `.spectrum-Search`.
Used by `--mod-textfield-text-color-hover`, `--spectrum-search-color`.
Defaults to `var(--spectrum-neutral-content-color-hover)`, if not set.",
+ "control": "color",
+ "category": "Component"
+ },
+ "spectrum-search-color-focus": {
+ "value": "var(--spectrum-neutral-content-color-down)",
+ "description": "Defined in `.spectrum-Search`.
Used by `--mod-textfield-text-color-focus`, `--spectrum-search-color`.
Defaults to `var(--spectrum-neutral-content-color-focus)`, if not set.",
+ "control": "color",
+ "category": "Component"
+ },
+ "spectrum-search-color-focus-hover": {
+ "value": "var(--spectrum-neutral-content-color-down)",
+ "description": "Defined in `.spectrum-Search`.
Used by `--mod-textfield-text-color-focus-hover`, `--spectrum-search-color`.
Defaults to `var(--spectrum-neutral-content-color-focus-hover)`, if not set.",
+ "control": "color",
+ "category": "Component"
+ },
+ "spectrum-search-color-key-focus": {
+ "value": "var(--spectrum-gray-900)",
+ "description": "Defined in `.spectrum-Search`.
Used by `--mod-textfield-text-color-keyboard-focus`, `--spectrum-search-color`.
Defaults to `var(--spectrum-neutral-content-color-key-focus)`, if not set.",
+ "control": "color",
+ "category": "Component"
+ },
+ "spectrum-search-color-disabled": {
+ "value": "var(--spectrum-gray-400)",
+ "description": "Defined in `.spectrum-Search`.
Used by `--mod-textfield-text-color-disabled`, `--spectrum-search-color`.
Defaults to `var(--spectrum-disabled-content-color)`, if not set.",
+ "control": "color",
+ "category": "Component"
+ },
+ "spectrum-search-background-color-disabled": {
+ "value": "light-dark(rgb(255, 255, 255), rgb(17, 17, 17))",
+ "description": "Defined in `.spectrum-Search`.
Used by `--mod-textfield-background-color-disabled`.
Defaults to `var(--spectrum-gray-25)`, if not set.",
+ "control": "color",
+ "category": "Component"
+ },
+ "spectrum-search-border-color-disabled": {
+ "value": "var(--spectrum-gray-300)",
+ "description": "Defined in `.spectrum-Search`.
Used by `--mod-textfield-border-color-disabled`.
Defaults to `var(--spectrum-disabled-border-color)`, if not set.",
+ "control": "color",
+ "category": "Component"
+ },
+ "spectrum-search-color": {
+ "value": "var(--highcontrast-search-color-disabled, var(--mod-search-color-disabled, var(--spectrum-search-color-disabled)))",
+ "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`.
Defaults to `var(--highcontrast-search-color-disabled, var(--mod-search-color-disabled, var(--spectrum-search-color-disabled)))`, if not set.",
+ "control": "color",
+ "category": "Component"
+ }
+ },
+ "global": {
+ "spectrum-gray-25": {
+ "value": "light-dark(rgb(255, 255, 255), rgb(17, 17, 17))",
+ "description": "Used by `--spectrum-search-background-color`, `--spectrum-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 `--spectrum-search-border-color-default`.",
+ "control": "text",
+ "category": "Global"
+ },
+ "spectrum-gray-400": {
+ "value": "light-dark(rgb(198, 198, 198), rgb(68, 68, 68))",
+ "description": "Used by `--spectrum-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 `--spectrum-search-border-color-focus`, `--spectrum-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 `--spectrum-search-border-color-focus-hover`.",
+ "control": "text",
+ "category": "Global"
+ },
+ "spectrum-border-width-200": {
+ "value": "2px",
+ "description": "Used by `--spectrum-search-border-width`.",
+ "control": "text",
+ "category": "Global"
+ },
+ "spectrum-corner-radius-full": {
+ "value": "9999px",
+ "description": "Used by `--spectrum-search-border-radius`.",
+ "control": "text",
+ "category": "Global"
+ },
+ "spectrum-field-width": {
+ "value": "var(--spectrum-field-width-small)",
+ "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-component-pill-edge-to-visual-100": {
+ "value": "14px",
+ "description": "Used by `--spectrum-search-edge-to-visual`.",
+ "control": "text",
+ "category": "Global"
+ },
+ "spectrum-component-top-to-workflow-icon-100": {
+ "value": "6px",
+ "description": "Used by `--spectrum-search-top-to-icon`.",
+ "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-disabled-content-color": {
+ "value": "var(--spectrum-gray-400)",
+ "description": "Used by `--spectrum-search-color-disabled`.",
+ "control": "color",
+ "category": "Global"
+ },
+ "spectrum-disabled-border-color": {
+ "value": "var(--spectrum-gray-300)",
+ "description": "Used by `--spectrum-search-border-color-disabled`.",
+ "control": "color",
+ "category": "Global"
+ },
+ "spectrum-font-size-100": {
+ "value": "14px",
+ "description": "Used by `--mod-textfield-placeholder-font-size`.",
+ "control": "text",
+ "category": "Global"
+ },
+ "spectrum-cjk-line-height-100": {
+ "value": "1.5",
+ "description": "Used by `--spectrum-search-line-height`.",
+ "control": "text",
+ "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-pill-edge-to-visual-75": {
+ "value": "10px",
+ "description": "Used by `--spectrum-search-edge-to-visual`.",
+ "control": "text",
+ "category": "Global"
+ },
+ "spectrum-component-top-to-workflow-icon-75": {
+ "value": "4px",
+ "description": "Used by `--spectrum-search-top-to-icon`.",
+ "control": "text",
+ "category": "Global"
+ },
+ "spectrum-component-top-to-text-75": {
+ "value": "4px",
+ "description": "Used by `--spectrum-search-top-to-text`.",
+ "control": "text",
+ "category": "Global"
+ },
+ "spectrum-component-bottom-to-text-75": {
+ "value": "5px",
+ "description": "Used by `--spectrum-search-bottom-to-text`.",
+ "control": "text",
+ "category": "Global"
+ },
+ "spectrum-font-size-75": {
+ "value": "12px",
+ "description": "Used by `--mod-textfield-placeholder-font-size`.",
+ "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-pill-edge-to-visual-200": {
+ "value": "18px",
+ "description": "Used by `--spectrum-search-edge-to-visual`.",
+ "control": "text",
+ "category": "Global"
+ },
+ "spectrum-component-top-to-workflow-icon-200": {
+ "value": "9px",
+ "description": "Used by `--spectrum-search-top-to-icon`.",
+ "control": "text",
+ "category": "Global"
+ },
+ "spectrum-component-top-to-text-200": {
+ "value": "9px",
+ "description": "Used by `--spectrum-search-top-to-text`.",
+ "control": "text",
+ "category": "Global"
+ },
+ "spectrum-component-bottom-to-text-200": {
+ "value": "11px",
+ "description": "Used by `--spectrum-search-bottom-to-text`.",
+ "control": "text",
+ "category": "Global"
+ },
+ "spectrum-font-size-200": {
+ "value": "16px",
+ "description": "Used by `--mod-textfield-placeholder-font-size`.",
+ "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-component-pill-edge-to-visual-300": {
+ "value": "21px",
+ "description": "Used by `--spectrum-search-edge-to-visual`.",
+ "control": "text",
+ "category": "Global"
+ },
+ "spectrum-component-top-to-workflow-icon-300": {
+ "value": "11px",
+ "description": "Used by `--spectrum-search-top-to-icon`.",
+ "control": "text",
+ "category": "Global"
+ },
+ "spectrum-component-top-to-text-300": {
+ "value": "12px",
+ "description": "Used by `--spectrum-search-top-to-text`.",
+ "control": "text",
+ "category": "Global"
+ },
+ "spectrum-component-bottom-to-text-300": {
+ "value": "14px",
+ "description": "Used by `--spectrum-search-bottom-to-text`.",
+ "control": "text",
+ "category": "Global"
+ },
+ "spectrum-font-size-300": {
+ "value": "18px",
+ "description": "Used by `--mod-textfield-placeholder-font-size`.",
+ "control": "text",
+ "category": "Global"
+ }
+ },
+ "passthroughs": {
+ "mod-textfield-font-family": {
+ "category": "Passthrough"
+ },
+ "mod-textfield-font-weight": {
+ "category": "Passthrough"
+ },
+ "mod-textfield-placeholder-font-size": {
+ "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-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"
+ },
+ "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"
+ }
+ }
}
diff --git a/components/search/stories/search.stories.js b/components/search/stories/search.stories.js
index ad429e00554..55f6cde9caf 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, isFocused, isHovered, isKeyboardFocused, 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.
*
@@ -77,9 +79,7 @@ export default {
},
packageJson,
metadata,
- status: {
- type: "migrated",
- },
+ cssprops: metadata.modifiers,
},
tags: ["migrated"],
};
diff --git a/components/sidenav/dist/metadata.json b/components/sidenav/dist/metadata.json
index 0215529e384..5982df92ecd 100644
--- a/components/sidenav/dist/metadata.json
+++ b/components/sidenav/dist/metadata.json
@@ -12,189 +12,924 @@
".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"
- ],
- "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": {
+ "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": {
+ "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": {
+ "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": {
+ "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": {
+ "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": {
+ "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": {
+ "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": {
+ "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": {
+ "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": {
+ "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": {
+ "description": "Used by `.spectrum-SideNav-itemLink`.
Defaults to `var(--spectrum-sidenav-border-radius)`, if not set.",
+ "control": "text",
+ "category": "Modifier"
+ },
+ "mod-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": {
+ "description": "Used by `.spectrum-SideNav-itemLink`.
Defaults to `var(--spectrum-sidenav-content-color-default)`, if not set.",
+ "control": "color",
+ "category": "Modifier"
+ },
+ "mod-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": {
+ "description": "Used by `.spectrum-SideNav-itemLink`.
Defaults to `var(--spectrum-sidenav-min-width)`, if not set.",
+ "control": "text",
+ "category": "Modifier"
+ },
+ "mod-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": {
+ "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": {
+ "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": {
+ "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": {
+ "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": {
+ "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": {
+ "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": {
+ "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": {
+ "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": {
+ "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": {
+ "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": {
+ "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": {
+ "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": {
+ "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": {
+ "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": {
+ "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": {
+ "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": {
+ "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": {
+ "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": {
+ "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": {
+ "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": {
+ "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": {
+ "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": {
+ "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": {
+ "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": {
+ "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": {
+ "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": {
+ "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": {
+ "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": {
+ "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": {
+ "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": {
+ "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": {
+ "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": {
+ "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": {
+ "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": {
+ "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": {
+ "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": {
+ "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": {
+ "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": {
+ "value": "2px",
+ "description": "Defined in `.spectrum-SideNav`.
Used by `.spectrum-SideNav-itemLink.is-keyboardFocused, .spectrum-SideNav-itemLink:focus-visible`.
Defaults to `var(--spectrum-focus-indicator-thickness)`, if not set.",
+ "control": "text",
+ "category": "Component"
+ },
+ "spectrum-sidenav-focus-ring-gap": {
+ "value": "2px",
+ "description": "Defined in `.spectrum-SideNav`.
Used by `.spectrum-SideNav-itemLink.is-keyboardFocused, .spectrum-SideNav-itemLink:focus-visible`.
Defaults to `var(--spectrum-focus-indicator-gap)`, if not set.",
+ "control": "text",
+ "category": "Component"
+ },
+ "spectrum-sidenav-focus-ring-color": {
+ "value": "var(--spectrum-blue-800)",
+ "description": "Defined in `.spectrum-SideNav`.
Used by `.spectrum-SideNav-itemLink.is-keyboardFocused, .spectrum-SideNav-itemLink:focus-visible`.
Defaults to `var(--spectrum-focus-indicator-color)`, if not set.",
+ "control": "color",
+ "category": "Component"
+ },
+ "spectrum-sidenav-min-height": {
+ "value": "32px",
+ "description": "Defined in `.spectrum-SideNav`.
Used by `.spectrum-SideNav-itemLink`.
Defaults to `var(--spectrum-component-height-100)`, if not set.",
+ "control": "text",
+ "category": "Component"
+ },
+ "spectrum-sidenav-width": {
+ "value": "100%",
+ "description": "Defined in `.spectrum-SideNav`.
Used by `.spectrum-SideNav-itemLink`.
Defaults to `100%`, if not set.",
+ "control": "text",
+ "category": "Component"
+ },
+ "spectrum-sidenav-min-width": {
+ "value": "160px",
+ "description": "Defined in `.spectrum-SideNav`.
Used by `.spectrum-SideNav-itemLink`.
Defaults to `var(--spectrum-side-navigation-minimum-width)`, if not set.",
+ "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": {
+ "value": "240px",
+ "description": "Defined in `.spectrum-SideNav`.
Used by `.spectrum-SideNav-itemLink`.
Defaults to `var(--spectrum-side-navigation-maximum-width)`, if not set.",
+ "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": {
+ "value": "4px",
+ "description": "Defined in `.spectrum-SideNav`.
Used by `.spectrum-SideNav-itemLink`.
Defaults to `var(--spectrum-corner-radius-100)`, if not set.",
+ "control": "text",
+ "category": "Component"
+ },
+ "spectrum-sidenav-icon-size": {
+ "value": "20px",
+ "description": "Defined in `.spectrum-SideNav`.
Used by `.spectrum-SideNav-itemLink .spectrum-Icon`.
Defaults to `var(--spectrum-workflow-icon-size-100)`, if not set.",
+ "control": "text",
+ "category": "Component"
+ },
+ "spectrum-sidenav-icon-spacing": {
+ "value": "6px",
+ "description": "Defined in `.spectrum-SideNav`.
Used by `.spectrum-SideNav-itemLink .spectrum-Icon`.
Defaults to `var(--spectrum-text-to-visual-100)`, if not set.",
+ "control": "text",
+ "category": "Component"
+ },
+ "spectrum-sidenav-inline-padding": {
+ "value": "12px",
+ "description": "Defined in `.spectrum-SideNav`.
Used by `.spectrum-SideNav-itemLink`, `.spectrum-SideNav-heading`.
Defaults to `var(--spectrum-component-edge-to-text-100)`, if not set.",
+ "control": "text",
+ "category": "Component"
+ },
+ "spectrum-sidenav-gap": {
+ "value": "4px",
+ "description": "Defined in `.spectrum-SideNav`.
Used by `.spectrum-SideNav-itemLink`, `.spectrum-SideNav-heading`.
Defaults to `var(--spectrum-side-navigation-item-to-item)`, if not set.",
+ "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": {
+ "value": "6px",
+ "description": "Defined in `.spectrum-SideNav`.
Used by `.spectrum-SideNav-itemLink .spectrum-Icon`.
Defaults to `var(--spectrum-component-top-to-workflow-icon-100)`, if not set.",
+ "control": "text",
+ "category": "Component"
+ },
+ "spectrum-sidenav-top-to-label": {
+ "value": "6px",
+ "description": "Defined in `.spectrum-SideNav`.
Used by `.spectrum-SideNav-itemLink .spectrum-SideNav-link-text`.
Defaults to `var(--spectrum-component-top-to-text-100)`, if not set.",
+ "control": "text",
+ "category": "Component"
+ },
+ "spectrum-sidenav-bottom-to-label": {
+ "value": "8px",
+ "description": "Defined in `.spectrum-SideNav`.
Used by `.spectrum-SideNav-itemLink .spectrum-SideNav-link-text`.
Defaults to `var(--spectrum-side-navigation-bottom-to-text)`, if not set.",
+ "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": {
+ "value": "24px",
+ "description": "Defined in `.spectrum-SideNav`.
Used by `.spectrum-SideNav--multiLevel .spectrum-SideNav .spectrum-SideNav-itemLink`.
Defaults to `var(--spectrum-side-navigation-second-level-edge-to-text)`, if not set.",
+ "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": {
+ "value": "36px",
+ "description": "Defined in `.spectrum-SideNav`.
Used by `.spectrum-SideNav--multiLevel .spectrum-SideNav .spectrum-SideNav .spectrum-SideNav-itemLink`.
Defaults to `var(--spectrum-side-navigation-third-level-edge-to-text)`, if not set.",
+ "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": {
+ "value": "50px",
+ "description": "Defined in `.spectrum-SideNav`.
Used by `.spectrum-SideNav--hasIcon.spectrum-SideNav--multiLevel .spectrum-SideNav .spectrum-SideNav-itemLink`.
Defaults to `var(--spectrum-side-navigation-with-icon-second-level-edge-to-text)`, if not set.",
+ "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": {
+ "value": "62px",
+ "description": "Defined in `.spectrum-SideNav`.
Used by `.spectrum-SideNav--hasIcon.spectrum-SideNav--multiLevel .spectrum-SideNav .spectrum-SideNav .spectrum-SideNav-itemLink`.
Defaults to `var(--spectrum-side-navigation-with-icon-third-level-edge-to-text)`, if not set.",
+ "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": {
+ "value": "24px",
+ "description": "Defined in `.spectrum-SideNav`.
Used by `.spectrum-SideNav-heading`.
Defaults to `var(--spectrum-side-navigation-item-to-header)`, if not set.",
+ "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": {
+ "value": "8px",
+ "description": "Defined in `.spectrum-SideNav`.
Used by `.spectrum-SideNav-heading`.
Defaults to `var(--spectrum-side-navigation-header-to-item)`, if not set.",
+ "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": {
+ "value": "transparent",
+ "description": "Defined in `.spectrum-SideNav`.
Used by `.spectrum-SideNav-item.is-disabled .spectrum-SideNav-itemLink`.
Defaults to `transparent`, if not set.",
+ "control": "text",
+ "category": "Component"
+ },
+ "spectrum-sidenav-background-default": {
+ "value": "transparent",
+ "description": "Defined in `.spectrum-SideNav`.
Used by `.spectrum-SideNav-itemLink`.
Defaults to `transparent`, if not set.",
+ "control": "text",
+ "category": "Component"
+ },
+ "spectrum-sidenav-background-hover": {
+ "value": "light-dark(rgb(233, 233, 233), rgb(44, 44, 44))",
+ "description": "Defined in `.spectrum-SideNav`.
Used by `.spectrum-SideNav-itemLink:hover`.
Defaults to `var(--spectrum-gray-100)`, if not set.",
+ "control": "text",
+ "category": "Component"
+ },
+ "spectrum-sidenav-item-background-down": {
+ "value": "light-dark(rgb(225, 225, 225), rgb(50, 50, 50))",
+ "description": "Defined in `.spectrum-SideNav`.
Used by `.spectrum-SideNav-itemLink:active`.
Defaults to `var(--spectrum-gray-200)`, if not set.",
+ "control": "text",
+ "category": "Component"
+ },
+ "spectrum-sidenav-background-key-focus": {
+ "value": "light-dark(rgb(233, 233, 233), rgb(44, 44, 44))",
+ "description": "Defined in `.spectrum-SideNav`.
Used by `.spectrum-SideNav-itemLink.is-keyboardFocused, .spectrum-SideNav-itemLink:focus-visible`.
Defaults to `var(--spectrum-gray-100)`, if not set.",
+ "control": "text",
+ "category": "Component"
+ },
+ "spectrum-sidenav-item-background-default-selected": {
+ "value": "light-dark(rgb(233, 233, 233), rgb(44, 44, 44))",
+ "description": "Defined in `.spectrum-SideNav`.
Used by `.spectrum-SideNav-item.is-selected .spectrum-SideNav-itemLink`.
Defaults to `var(--spectrum-gray-100)`, if not set.",
+ "control": "text",
+ "category": "Component"
+ },
+ "spectrum-sidenav-background-hover-selected": {
+ "value": "light-dark(rgb(225, 225, 225), rgb(50, 50, 50))",
+ "description": "Defined in `.spectrum-SideNav`.
Used by `.spectrum-SideNav-item.is-selected .spectrum-SideNav-itemLink:hover`.
Defaults to `var(--spectrum-gray-200)`, if not set.",
+ "control": "text",
+ "category": "Component"
+ },
+ "spectrum-sidenav-item-background-down-selected": {
+ "value": "light-dark(rgb(225, 225, 225), rgb(50, 50, 50))",
+ "description": "Defined in `.spectrum-SideNav`.
Used by `.spectrum-SideNav-item.is-selected .spectrum-SideNav-itemLink:active`.
Defaults to `var(--spectrum-gray-200)`, if not set.",
+ "control": "text",
+ "category": "Component"
+ },
+ "spectrum-sidenav-background-key-focus-selected": {
+ "value": "light-dark(rgb(233, 233, 233), rgb(44, 44, 44))",
+ "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`.
Defaults to `var(--spectrum-gray-100)`, if not set.",
+ "control": "text",
+ "category": "Component"
+ },
+ "spectrum-sidenav-header-color": {
+ "value": "light-dark(rgb(113, 113, 113), rgb(138, 138, 138))",
+ "description": "Defined in `.spectrum-SideNav`.
Used by `.spectrum-SideNav-heading`.
Defaults to `var(--spectrum-gray-600)`, if not set.",
+ "control": "color",
+ "category": "Component"
+ },
+ "spectrum-sidenav-content-disabled-color": {
+ "value": "var(--spectrum-gray-400)",
+ "description": "Defined in `.spectrum-SideNav`.
Used by `.spectrum-SideNav-item.is-disabled .spectrum-SideNav-itemLink`.
Defaults to `var(--spectrum-disabled-content-color)`, if not set.",
+ "control": "color",
+ "category": "Component"
+ },
+ "spectrum-sidenav-content-color-default": {
+ "value": "var(--spectrum-gray-800)",
+ "description": "Defined in `.spectrum-SideNav`.
Used by `.spectrum-SideNav-itemLink`.
Defaults to `var(--spectrum-neutral-content-color-default)`, if not set.",
+ "control": "color",
+ "category": "Component"
+ },
+ "spectrum-sidenav-content-color-hover": {
+ "value": "var(--spectrum-gray-900)",
+ "description": "Defined in `.spectrum-SideNav`.
Used by `.spectrum-SideNav-itemLink:hover`.
Defaults to `var(--spectrum-neutral-content-color-hover)`, if not set.",
+ "control": "color",
+ "category": "Component"
+ },
+ "spectrum-sidenav-content-color-down": {
+ "value": "var(--spectrum-gray-900)",
+ "description": "Defined in `.spectrum-SideNav`.
Used by `.spectrum-SideNav-itemLink:active`.
Defaults to `var(--spectrum-neutral-content-color-down)`, if not set.",
+ "control": "color",
+ "category": "Component"
+ },
+ "spectrum-sidenav-content-color-key-focus": {
+ "value": "var(--spectrum-gray-900)",
+ "description": "Defined in `.spectrum-SideNav`.
Used by `.spectrum-SideNav-itemLink.is-keyboardFocused, .spectrum-SideNav-itemLink:focus-visible`.
Defaults to `var(--spectrum-neutral-content-color-key-focus)`, if not set.",
+ "control": "color",
+ "category": "Component"
+ },
+ "spectrum-sidenav-content-color-default-selected": {
+ "value": "var(--spectrum-gray-800)",
+ "description": "Defined in `.spectrum-SideNav`.
Used by `.spectrum-SideNav-item.is-selected .spectrum-SideNav-itemLink`.
Defaults to `var(--spectrum-neutral-content-color-default)`, if not set.",
+ "control": "color",
+ "category": "Component"
+ },
+ "spectrum-sidenav-content-color-hover-selected": {
+ "value": "var(--spectrum-gray-900)",
+ "description": "Defined in `.spectrum-SideNav`.
Used by `.spectrum-SideNav-item.is-selected .spectrum-SideNav-itemLink:hover`.
Defaults to `var(--spectrum-neutral-content-color-hover)`, if not set.",
+ "control": "color",
+ "category": "Component"
+ },
+ "spectrum-sidenav-content-color-down-selected": {
+ "value": "var(--spectrum-gray-900)",
+ "description": "Defined in `.spectrum-SideNav`.
Used by `.spectrum-SideNav-item.is-selected .spectrum-SideNav-itemLink:active`.
Defaults to `var(--spectrum-neutral-content-color-down)`, if not set.",
+ "control": "color",
+ "category": "Component"
+ },
+ "spectrum-sidenav-content-color-key-focus-selected": {
+ "value": "var(--spectrum-gray-900)",
+ "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`.
Defaults to `var(--spectrum-neutral-content-color-key-focus)`, if not set.",
+ "control": "color",
+ "category": "Component"
+ },
+ "spectrum-sidenav-text-font-family": {
+ "value": "var(--spectrum-sans-font-family-stack)",
+ "description": "Defined in `.spectrum-SideNav`.
Used by `.spectrum-SideNav-itemLink`.
Defaults to `var(--spectrum-sans-font-family-stack)`, if not set.",
+ "control": "text",
+ "category": "Component"
+ },
+ "spectrum-sidenav-text-font-weight": {
+ "value": "400",
+ "description": "Defined in `.spectrum-SideNav`.
Used by `.spectrum-SideNav-itemLink`, `.spectrum-SideNav--multiLevel .spectrum-SideNav .spectrum-SideNav-itemLink`.
Defaults to `var(--spectrum-regular-font-weight)`, if not set.",
+ "control": "text",
+ "category": "Component"
+ },
+ "spectrum-sidenav-text-font-style": {
+ "value": "normal",
+ "description": "Defined in `.spectrum-SideNav`.
Used by `.spectrum-SideNav-itemLink`.
Defaults to `var(--spectrum-default-font-style)`, if not set.",
+ "control": "text",
+ "category": "Component"
+ },
+ "spectrum-sidenav-text-font-size": {
+ "value": "14px",
+ "description": "Defined in `.spectrum-SideNav`.
Used by `.spectrum-SideNav-itemLink`.
Defaults to `var(--spectrum-font-size-100)`, if not set.",
+ "control": "text",
+ "category": "Component"
+ },
+ "spectrum-sidenav-text-line-height": {
+ "value": "1.5",
+ "description": "Defined in `.spectrum-SideNav`, `.spectrum-SideNav:lang(ja), .spectrum-SideNav:lang(ko), .spectrum-SideNav:lang(zh)`.
Used by `.spectrum-SideNav-itemLink`.
Defaults to `var(--spectrum-cjk-line-height-100)`, if not set.",
+ "control": "text",
+ "category": "Component"
+ },
+ "spectrum-sidenav-top-level-font-family": {
+ "value": "var(--spectrum-sans-font-family-stack)",
+ "description": "Defined in `.spectrum-SideNav`.
Used by `.spectrum-SideNav--multiLevel .spectrum-SideNav-itemLink`.
Defaults to `var(--spectrum-sans-font-family-stack)`, if not set.",
+ "control": "text",
+ "category": "Component"
+ },
+ "spectrum-sidenav-top-level-font-weight": {
+ "value": "700",
+ "description": "Defined in `.spectrum-SideNav`.
Used by `.spectrum-SideNav--multiLevel .spectrum-SideNav-itemLink`.
Defaults to `var(--spectrum-bold-font-weight)`, if not set.",
+ "control": "text",
+ "category": "Component"
+ },
+ "spectrum-sidenav-top-level-font-style": {
+ "value": "normal",
+ "description": "Defined in `.spectrum-SideNav`.
Used by `.spectrum-SideNav--multiLevel .spectrum-SideNav-itemLink`.
Defaults to `var(--spectrum-default-font-style)`, if not set.",
+ "control": "text",
+ "category": "Component"
+ },
+ "spectrum-sidenav-top-level-font-size": {
+ "value": "14px",
+ "description": "Defined in `.spectrum-SideNav`.
Used by `.spectrum-SideNav--multiLevel .spectrum-SideNav-itemLink`.
Defaults to `var(--spectrum-font-size-100)`, if not set.",
+ "control": "text",
+ "category": "Component"
+ },
+ "spectrum-sidenav-top-level-line-height": {
+ "value": "1.5",
+ "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`.
Defaults to `var(--spectrum-cjk-line-height-100)`, if not set.",
+ "control": "text",
+ "category": "Component"
+ },
+ "spectrum-sidenav-header-font-family": {
+ "value": "var(--spectrum-sans-font-family-stack)",
+ "description": "Defined in `.spectrum-SideNav`.
Used by `.spectrum-SideNav-heading`.
Defaults to `var(--spectrum-sans-font-family-stack)`, if not set.",
+ "control": "text",
+ "category": "Component"
+ },
+ "spectrum-sidenav-header-font-weight": {
+ "value": "500",
+ "description": "Defined in `.spectrum-SideNav`.
Used by `.spectrum-SideNav-heading`.
Defaults to `var(--spectrum-medium-font-weight)`, if not set.",
+ "control": "text",
+ "category": "Component"
+ },
+ "spectrum-sidenav-header-font-style": {
+ "value": "normal",
+ "description": "Defined in `.spectrum-SideNav`.
Used by `.spectrum-SideNav-heading`.
Defaults to `var(--spectrum-default-font-style)`, if not set.",
+ "control": "text",
+ "category": "Component"
+ },
+ "spectrum-sidenav-header-font-size": {
+ "value": "12px",
+ "description": "Defined in `.spectrum-SideNav`.
Used by `.spectrum-SideNav-heading`.
Defaults to `var(--spectrum-font-size-75)`, if not set.",
+ "control": "text",
+ "category": "Component"
+ },
+ "spectrum-sidenav-header-line-height": {
+ "value": "1.5",
+ "description": "Defined in `.spectrum-SideNav`, `.spectrum-SideNav:lang(ja), .spectrum-SideNav:lang(ko), .spectrum-SideNav:lang(zh)`.
Used by `.spectrum-SideNav-heading`.
Defaults to `var(--spectrum-cjk-line-height-100)`, if not set.",
+ "control": "text",
+ "category": "Component"
+ }
+ },
+ "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": "4px",
+ "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-100": {
+ "value": "light-dark(rgb(233, 233, 233), rgb(44, 44, 44))",
+ "description": "Used by `--spectrum-sidenav-background-hover`, `--spectrum-sidenav-background-key-focus`, `--spectrum-sidenav-item-background-default-selected`, `--spectrum-sidenav-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 `--spectrum-sidenav-item-background-down`, `--spectrum-sidenav-background-hover-selected`, `--spectrum-sidenav-item-background-down-selected`.",
+ "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"
+ }
+ },
+ "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-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-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-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-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-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-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-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-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-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"
+ },
+ "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-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": {
+ "value": "ButtonText",
+ "description": "Defined in `.spectrum-SideNav-item`.
Used by `.spectrum-SideNav--multiLevel .spectrum-SideNav-itemLink`.
Defaults to `ButtonText`, if not set.",
+ "control": "color"
+ }
+ }
}
diff --git a/components/sidenav/stories/sidenav.stories.js b/components/sidenav/stories/sidenav.stories.js
index b5381efd78d..dfe168a25f6 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,10 @@ export default {
},
packageJson,
metadata,
+ cssprops: {
+ ...metadata.modifiers,
+ ...metadata.component,
+ },
},
};
diff --git a/components/slider/dist/metadata.json b/components/slider/dist/metadata.json
index 7eaea714d74..fc1a84a5e5e 100644
--- a/components/slider/dist/metadata.json
+++ b/components/slider/dist/metadata.json
@@ -24,8 +24,8 @@
".spectrum-Slider--range .spectrum-Slider-value",
".spectrum-Slider--sideLabel",
".spectrum-Slider--sideLabel .spectrum-Slider-labelContainer",
- ".spectrum-Slider--sideLabel .spectrum-Slider-labelContainer + .spectrum-Slider-content",
".spectrum-Slider--sideLabel .spectrum-Slider-labelContainer .spectrum-Slider-label",
+ ".spectrum-Slider--sideLabel .spectrum-Slider-labelContainer + .spectrum-Slider-content",
".spectrum-Slider--sideLabel .spectrum-Slider-value",
".spectrum-Slider--sizeL",
".spectrum-Slider--sizeS",
@@ -44,12 +44,12 @@
".spectrum-Slider-fill--right",
".spectrum-Slider-fill:before",
".spectrum-Slider-handle",
- ".spectrum-Slider-handle.is-dragged",
- ".spectrum-Slider-handle.is-focused",
- ".spectrum-Slider-handle.is-tophandle",
".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-tophandle",
".spectrum-Slider-handleContainer",
".spectrum-Slider-input",
".spectrum-Slider-input:focus",
@@ -66,7 +66,6 @@
".spectrum-Slider-ramp svg",
".spectrum-Slider-tick",
".spectrum-Slider-tick .spectrum-Slider-tickLabel",
- ".spectrum-Slider-tick.spectrum-Slider-tick--track-height-large:after",
".spectrum-Slider-tick:after",
".spectrum-Slider-tick:first-of-type",
".spectrum-Slider-tick:first-of-type .spectrum-Slider-tickLabel",
@@ -74,6 +73,7 @@
".spectrum-Slider-tick:last-of-type",
".spectrum-Slider-tick:last-of-type .spectrum-Slider-tickLabel",
".spectrum-Slider-tick:last-of-type:after",
+ ".spectrum-Slider-tick.spectrum-Slider-tick--track-height-large:after",
".spectrum-Slider-ticks",
".spectrum-Slider-ticks ~ .spectrum-Slider-handleContainer .spectrum-Slider-handle",
".spectrum-Slider-track",
@@ -85,6 +85,19 @@
".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(.is-disabled) .spectrum-Slider-handle:focus",
+ ".spectrum-Slider:not(.is-disabled) .spectrum-Slider-handle:focus-visible",
+ ".spectrum-Slider:not(.is-disabled) .spectrum-Slider-handle:focus-visible:before",
+ ".spectrum-Slider:not(.is-disabled) .spectrum-Slider-handle:focus:before",
+ ".spectrum-Slider:not(.is-disabled) .spectrum-Slider-handle.is-focused",
+ ".spectrum-Slider:not(.is-disabled) .spectrum-Slider-handle.is-focused:before",
+ ".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",
@@ -99,244 +112,1193 @@
".spectrum-Slider.is-disabled .spectrum-Slider-track:before",
".spectrum-Slider.is-disabled.spectrum-Slider--filled .spectrum-Slider-track:first-child:before",
".spectrum-Slider.is-disabled.spectrum-Slider--range .spectrum-Slider-track:not(:first-of-type, :last-of-type):before",
- ".spectrum-Slider.spectrum-Slider--precise:not(.is-disabled) .spectrum-Slider-handle.is-focused:before",
".spectrum-Slider.spectrum-Slider--precise:not(.is-disabled) .spectrum-Slider-handle:focus-visible:before",
".spectrum-Slider.spectrum-Slider--precise:not(.is-disabled) .spectrum-Slider-handle:focus:before",
- ".spectrum-Slider.spectrum-Slider--ramp .spectrum-Slider-handle",
- ".spectrum-Slider:dir(rtl)",
- ".spectrum-Slider:dir(rtl) .spectrum-Slider-handle:before",
- ".spectrum-Slider:not(.is-disabled) .spectrum-Slider-handle.is-focused",
- ".spectrum-Slider:not(.is-disabled) .spectrum-Slider-handle.is-focused:before",
- ".spectrum-Slider:not(.is-disabled) .spectrum-Slider-handle:focus",
- ".spectrum-Slider:not(.is-disabled) .spectrum-Slider-handle:focus-visible",
- ".spectrum-Slider:not(.is-disabled) .spectrum-Slider-handle:focus-visible:before",
- ".spectrum-Slider:not(.is-disabled) .spectrum-Slider-handle:focus: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)"
- ],
- "modifiers": [
- "--mod-animation-duration-100",
- "--mod-focus-indicator-gap",
- "--mod-font-size-75",
- "--mod-line-height-100",
- "--mod-slider-cjk-line-height",
- "--mod-slider-control-height",
- "--mod-slider-control-to-side-field-label",
- "--mod-slider-control-to-text-field",
- "--mod-slider-controls-margin",
- "--mod-slider-disabled-border-color",
- "--mod-slider-editable-field-inline-size",
- "--mod-slider-emphasized-tick-mark-color",
- "--mod-slider-emphasized-track-fill-color",
- "--mod-slider-font-size",
- "--mod-slider-handle-background-color",
- "--mod-slider-handle-background-color-disabled",
- "--mod-slider-handle-border-color",
- "--mod-slider-handle-border-color-disabled",
- "--mod-slider-handle-border-color-down",
- "--mod-slider-handle-border-color-hover",
- "--mod-slider-handle-border-color-key-focus",
- "--mod-slider-handle-border-radius",
- "--mod-slider-handle-border-width",
- "--mod-slider-handle-disabled-background-color",
- "--mod-slider-handle-focus-ring-color-key-focus",
- "--mod-slider-handle-size",
- "--mod-slider-inline-size",
- "--mod-slider-input-left",
- "--mod-slider-input-top-size",
- "--mod-slider-label-font-family",
- "--mod-slider-label-font-style",
- "--mod-slider-label-font-weight",
- "--mod-slider-label-margin-start",
- "--mod-slider-label-text-color",
- "--mod-slider-label-text-color-disabled",
- "--mod-slider-ramp-track-color",
- "--mod-slider-ramp-track-color-disabled",
- "--mod-slider-ramp-track-fill-color",
- "--mod-slider-ramp-track-height",
- "--mod-slider-range-track-reset",
- "--mod-slider-tick-label-color",
- "--mod-slider-tick-mark-border-radius",
- "--mod-slider-tick-mark-color",
- "--mod-slider-tick-mark-color-filled-track",
- "--mod-slider-tick-mark-height",
- "--mod-slider-tick-mark-width",
- "--mod-slider-ticks-handle-background-color",
- "--mod-slider-track-color",
- "--mod-slider-track-color-disabled",
- "--mod-slider-track-corner-radius",
- "--mod-slider-track-fill-color",
- "--mod-slider-track-fill-color-disabled",
- "--mod-slider-track-fill-thickness",
- "--mod-slider-track-height-medium",
- "--mod-slider-track-thickness",
- "--mod-slider-value-inline-size"
- ],
- "component": [
- "--spectrum-slider-cjk-line-height",
- "--spectrum-slider-control-height",
- "--spectrum-slider-control-to-field-label",
- "--spectrum-slider-control-to-field-label-editable-extra-large",
- "--spectrum-slider-control-to-field-label-editable-large",
- "--spectrum-slider-control-to-field-label-editable-medium",
- "--spectrum-slider-control-to-field-label-editable-small",
- "--spectrum-slider-control-to-field-label-extra-large",
- "--spectrum-slider-control-to-field-label-large",
- "--spectrum-slider-control-to-field-label-medium",
- "--spectrum-slider-control-to-field-label-side-extra-large",
- "--spectrum-slider-control-to-field-label-side-large",
- "--spectrum-slider-control-to-field-label-side-medium",
- "--spectrum-slider-control-to-field-label-side-small",
- "--spectrum-slider-control-to-field-label-small",
- "--spectrum-slider-control-to-side-field-label",
- "--spectrum-slider-control-to-text-field",
- "--spectrum-slider-control-to-text-field-extra-large",
- "--spectrum-slider-control-to-text-field-large",
- "--spectrum-slider-control-to-text-field-medium",
- "--spectrum-slider-control-to-text-field-small",
- "--spectrum-slider-controls-margin",
- "--spectrum-slider-downstate-perspective",
- "--spectrum-slider-editable-control-to-field-label",
- "--spectrum-slider-editable-field-inline-size-extra-large",
- "--spectrum-slider-editable-field-inline-size-large",
- "--spectrum-slider-editable-field-inline-size-medium",
- "--spectrum-slider-editable-field-inline-size-small",
- "--spectrum-slider-emphasized-tick-mark-color",
- "--spectrum-slider-emphasized-track-fill-color",
- "--spectrum-slider-focus-indicator-gap",
- "--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-extra-large",
- "--spectrum-slider-handle-focus-ring-color-key-focus",
- "--spectrum-slider-handle-gap",
- "--spectrum-slider-handle-large",
- "--spectrum-slider-handle-margin-left",
- "--spectrum-slider-handle-medium",
- "--spectrum-slider-handle-size",
- "--spectrum-slider-handle-small",
- "--spectrum-slider-inline-size",
- "--spectrum-slider-input-left",
- "--spectrum-slider-input-top-size",
- "--spectrum-slider-label-font-family",
- "--spectrum-slider-label-font-style",
- "--spectrum-slider-label-font-weight",
- "--spectrum-slider-label-margin-start",
- "--spectrum-slider-label-text-color",
- "--spectrum-slider-label-text-color-disabled",
- "--spectrum-slider-precision-handle-height",
- "--spectrum-slider-precision-handle-height-extra-large",
- "--spectrum-slider-precision-handle-height-large",
- "--spectrum-slider-precision-handle-height-medium",
- "--spectrum-slider-precision-handle-height-small",
- "--spectrum-slider-precision-handle-width",
- "--spectrum-slider-ramp-track-color-disabled",
- "--spectrum-slider-ramp-track-height",
- "--spectrum-slider-range-track-reset",
- "--spectrum-slider-tick-label-color",
- "--spectrum-slider-tick-mark-border-radius",
- "--spectrum-slider-tick-mark-color",
- "--spectrum-slider-tick-mark-color-filled-track",
- "--spectrum-slider-tick-mark-height",
- "--spectrum-slider-tick-mark-width",
- "--spectrum-slider-ticks-handle-background-color",
- "--spectrum-slider-track-color",
- "--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-height-large",
- "--spectrum-slider-track-height-medium",
- "--spectrum-slider-value-inline-size"
- ],
- "global": [
- "--spectrum-accent-color-1000",
- "--spectrum-accent-content-color-default",
- "--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-size-difference-down",
- "--spectrum-component-size-minimum-perspective-down",
- "--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-500",
- "--spectrum-default-font-style",
- "--spectrum-disabled-background-color",
- "--spectrum-disabled-border-color",
- "--spectrum-disabled-content-color",
- "--spectrum-field-default-width-extra-large",
- "--spectrum-field-default-width-large",
- "--spectrum-field-default-width-medium",
- "--spectrum-field-default-width-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-400",
- "--spectrum-gray-700",
- "--spectrum-gray-75",
- "--spectrum-gray-800",
- "--spectrum-gray-900",
- "--spectrum-line-height-100",
- "--spectrum-logical-rotation",
- "--spectrum-neutral-content-color-default",
- "--spectrum-neutral-subdued-content-color-default",
- "--spectrum-regular-font-weight",
- "--spectrum-sans-font-family-stack",
- "--spectrum-spacing-300",
- "--spectrum-text-to-visual-75",
- "--spectrum-track-color"
- ],
- "passthroughs": [
- "--mod-fieldlabel-bottom-to-text",
- "--mod-fieldlabel-top-to-text",
- "--mod-textfield-width"
+ ".spectrum-Slider.spectrum-Slider--precise:not(.is-disabled) .spectrum-Slider-handle.is-focused:before",
+ ".spectrum-Slider.spectrum-Slider--ramp .spectrum-Slider-handle"
],
- "high-contrast": [
- "--highcontrast-slider-filled-track-fill-color",
- "--highcontrast-slider-handle-background-color",
- "--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-track-color",
- "--highcontrast-slider-ramp-track-color-disabled",
- "--highcontrast-slider-tick-mark-color",
- "--highcontrast-slider-tick-mark-color-disabled",
- "--highcontrast-slider-tick-mark-color-filled-track",
- "--highcontrast-slider-track-color",
- "--highcontrast-slider-track-color-disabled",
- "--highcontrast-slider-track-color-static",
- "--highcontrast-slider-track-fill-color-disabled"
- ]
+ "modifiers": {
+ "mod-slider-editable-field-inline-size": {
+ "description": "Used by `--mod-textfield-width`.
Defaults to `var(--spectrum-slider-editable-field-inline-size-medium)`, if not set.",
+ "control": "text",
+ "category": "Modifier"
+ },
+ "mod-slider-inline-size": {
+ "description": "Used by `.spectrum-Slider`.
Defaults to `var(--spectrum-slider-inline-size)`, if not set.",
+ "control": "text",
+ "category": "Modifier"
+ },
+ "mod-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-control-height": {
+ "description": "Used by `.spectrum-Slider--precise .spectrum-Slider-handle`, `.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-control-to-side-field-label": {
+ "description": "Used by `.spectrum-Slider--sideLabel .spectrum-Slider-labelContainer .spectrum-Slider-label`.
Defaults to `var(--spectrum-slider-control-to-side-field-label)`, if not set.",
+ "control": "text",
+ "category": "Modifier"
+ },
+ "mod-slider-control-to-text-field": {
+ "description": "Used by `.spectrum-Slider--sideLabel .spectrum-Slider-value`, `.spectrum-Slider-content--editable`.
Defaults to `var(--spectrum-slider-control-to-text-field)`, if not set.",
+ "control": "text",
+ "category": "Modifier"
+ },
+ "mod-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-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-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`, `.spectrum-Slider-fill:before`.
Defaults to `var(--spectrum-slider-track-corner-radius)`, if not set.",
+ "control": "text",
+ "category": "Modifier"
+ },
+ "mod-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-controls-margin": {
+ "description": "Used by `.spectrum-Slider-fill--right`.
Defaults to `var(--spectrum-slider-controls-margin)`, if not set.",
+ "control": "text",
+ "category": "Modifier"
+ },
+ "mod-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": {
+ "description": "Used by `.spectrum-Slider-handle`.
Defaults to `var(--spectrum-slider-handle-background-color)`, if not set.",
+ "control": "color",
+ "category": "Modifier"
+ },
+ "mod-slider-handle-size": {
+ "description": "Used by `.spectrum-Slider-handle`, `.spectrum-Slider-handle:before`, `.spectrum-Slider:not(.is-disabled) .spectrum-Slider-handle.is-focused:before, .spectrum-Slider:not(.is-disabled) .spectrum-Slider-handle:focus-visible:before, .spectrum-Slider:not(.is-disabled) .spectrum-Slider-handle:focus:before`, `.spectrum-Slider-input`.
Defaults to `var(--spectrum-slider-handle-size)`, if not set.",
+ "control": "text",
+ "category": "Modifier"
+ },
+ "mod-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": {
+ "description": "Used by `.spectrum-Slider-handle`.
Defaults to `var(--spectrum-slider-handle-size)`, if not set.",
+ "control": "text",
+ "category": "Modifier"
+ },
+ "mod-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-color-down": {
+ "description": "Used by `.spectrum-Slider-handle.is-dragged, .spectrum-Slider-handle:active`.
Defaults to `var(--spectrum-slider-handle-border-color-down)`, if not set.",
+ "control": "color",
+ "category": "Modifier"
+ },
+ "mod-slider-handle-border-color-key-focus": {
+ "description": "Used by `.spectrum-Slider:not(.is-disabled) .spectrum-Slider-handle.is-focused, .spectrum-Slider:not(.is-disabled) .spectrum-Slider-handle:focus, .spectrum-Slider:not(.is-disabled) .spectrum-Slider-handle:focus-visible`.
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": {
+ "description": "Used by `.spectrum-Slider:not(.is-disabled) .spectrum-Slider-handle.is-focused:before, .spectrum-Slider:not(.is-disabled) .spectrum-Slider-handle:focus-visible:before, .spectrum-Slider:not(.is-disabled) .spectrum-Slider-handle:focus:before`.
Defaults to `var(--spectrum-slider-handle-focus-ring-color-key-focus)`, if not set.",
+ "control": "color",
+ "category": "Modifier"
+ },
+ "mod-focus-indicator-gap": {
+ "description": "Used by `.spectrum-Slider:not(.is-disabled) .spectrum-Slider-handle.is-focused:before, .spectrum-Slider:not(.is-disabled) .spectrum-Slider-handle:focus-visible:before, .spectrum-Slider:not(.is-disabled) .spectrum-Slider-handle:focus:before`.
Defaults to `var(--spectrum-slider-focus-indicator-gap)`, if not set.",
+ "control": "text",
+ "category": "Modifier"
+ },
+ "mod-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": {
+ "description": "Used by `.spectrum-Slider-input`.
Defaults to `var(--spectrum-slider-input-left)`, if not set.",
+ "control": "text",
+ "category": "Modifier"
+ },
+ "mod-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": {
+ "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-font-weight": {
+ "description": "Used by `.spectrum-Slider-labelContainer`.
Defaults to `var(--spectrum-slider-label-font-weight)`, if not set.",
+ "control": "text",
+ "category": "Modifier"
+ },
+ "mod-slider-label-font-style": {
+ "description": "Used by `.spectrum-Slider-labelContainer`.
Defaults to `var(--spectrum-slider-label-font-style)`, if not set.",
+ "control": "text",
+ "category": "Modifier"
+ },
+ "mod-slider-label-font-family": {
+ "description": "Used by `.spectrum-Slider-labelContainer`.
Defaults to `var(--spectrum-slider-label-font-family)`, if not set.",
+ "control": "text",
+ "category": "Modifier"
+ },
+ "mod-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": {
+ "description": "Used by `.spectrum-Slider-value`.
Defaults to `var(--spectrum-slider-label-margin-start)`, if not set.",
+ "control": "text",
+ "category": "Modifier"
+ },
+ "mod-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-height-medium": {
+ "description": "Used by `.spectrum-Slider--tick .spectrum-Slider-controls`.
Defaults to `var(--spectrum-slider-track-height-medium)`, if not set.",
+ "control": "text",
+ "category": "Modifier"
+ },
+ "mod-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-track-thickness": {
+ "description": "Used by `.spectrum-Slider-tick`.
Defaults to `var(--spectrum-slider-control-height)`, if not set.",
+ "control": "text",
+ "category": "Modifier"
+ },
+ "mod-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": {
+ "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": {
+ "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": {
+ "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": {
+ "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": {
+ "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": {
+ "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`, `.spectrum-Slider--range .spectrum-Slider-track:first-of-type:before`.
Defaults to `var(--spectrum-slider-track-color)`, if not set.",
+ "control": "color",
+ "category": "Modifier"
+ },
+ "mod-slider-emphasized-track-fill-color": {
+ "description": "Used by `.spectrum-Slider--emphasized .spectrum-Slider-fill:before, .spectrum-Slider--emphasized .spectrum-Slider-track:first-child:before, .spectrum-Slider--emphasized.spectrum-Slider--range .spectrum-Slider-track:not(:first-of-type, :last-of-type):before`.
Defaults to `var(--spectrum-slider-emphasized-track-fill-color)`, if not set.",
+ "control": "color",
+ "category": "Modifier"
+ },
+ "mod-slider-ramp-track-color": {
+ "description": "Used by `.spectrum-Slider-ramp .spectrum-Slider-ramp-track`.
Defaults to `var(--spectrum-slider-track-color)`, if not set.",
+ "control": "color",
+ "category": "Modifier"
+ },
+ "mod-slider-ramp-track-fill-color": {
+ "description": "Used by `.spectrum-Slider-ramp .spectrum-Slider-ramp-track-fill`.
Defaults to `var(--spectrum-slider-track-fill-color)`, if not set.",
+ "control": "color",
+ "category": "Modifier"
+ },
+ "mod-slider-emphasized-tick-mark-color": {
+ "description": "Used by `.spectrum-Slider--emphasized .spectrum-Slider-tick:nth-child(-n + 4):after`.
Defaults to `var(--spectrum-slider-emphasized-tick-mark-color)`, if not set.",
+ "control": "color",
+ "category": "Modifier"
+ },
+ "mod-slider-tick-mark-color-filled-track": {
+ "description": "Used by `.spectrum-Slider--filled:not(.spectrum-Slider--range, .is-disabled, .spectrum-Slider--emphasized) .spectrum-Slider-tick:nth-child(-n + 4):after, .spectrum-Slider--offset:not(.spectrum-Slider--range, .is-disabled, .spectrum-Slider--emphasized) .spectrum-Slider-tick:nth-child(-n + 4):after, .spectrum-Slider--range .spectrum-Slider-tick:nth-child(3):after, .spectrum-Slider--range .spectrum-Slider-tick:nth-child(4):after, .spectrum-Slider--range .spectrum-Slider-tick:nth-child(5):after`.
Defaults to `var(--spectrum-slider-tick-mark-color-filled-track)`, if not set.",
+ "control": "color",
+ "category": "Modifier"
+ },
+ "mod-slider-tick-mark-color": {
+ "description": "Used by `.spectrum-Slider-tick:after, .spectrum-Slider.is-disabled .spectrum-Slider-tick:after`, `.spectrum-Slider.is-disabled .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": {
+ "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": {
+ "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": {
+ "description": "Used by `.spectrum-Slider.is-disabled .spectrum-Slider-handle`.
Defaults to `var(--spectrum-slider-handle-background-color-disabled)`, if not set.",
+ "control": "color",
+ "category": "Modifier"
+ },
+ "mod-slider-disabled-border-color": {
+ "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-border-color-disabled)`, if not set.",
+ "control": "color",
+ "category": "Modifier"
+ },
+ "mod-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": {
+ "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": {
+ "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": {
+ "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": {
+ "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"
+ }
+ },
+ "component": {
+ "spectrum-slider-font-size": {
+ "value": "18px",
+ "description": "Defined in `.spectrum-Slider`, `.spectrum-Slider--sizeS`, `.spectrum-Slider--sizeL`, `.spectrum-Slider--sizeXL`.
Used by `.spectrum-Slider-labelContainer`, `.spectrum-Slider-label`.
Defaults to `var(--spectrum-font-size-300)`, if not set.",
+ "control": "text",
+ "category": "Component"
+ },
+ "spectrum-slider-handle-size": {
+ "value": "24px",
+ "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-input-top-size`, `--spectrum-slider-handle-border-radius`, `.spectrum-Slider-handle`, `.spectrum-Slider-handle:before`, `.spectrum-Slider:not(.is-disabled) .spectrum-Slider-handle.is-focused:before, .spectrum-Slider:not(.is-disabled) .spectrum-Slider-handle:focus-visible:before, .spectrum-Slider:not(.is-disabled) .spectrum-Slider-handle:focus:before`, `.spectrum-Slider-input`, `.spectrum-Slider-handleContainer, .spectrum-Slider-trackContainer`.
Defaults to `var(--spectrum-slider-handle-extra-large)`, if not set.",
+ "control": "text",
+ "category": "Component"
+ },
+ "spectrum-slider-handle-medium": {
+ "value": "20px",
+ "description": "Used by `--spectrum-slider-handle-size`.",
+ "control": "text",
+ "category": "Component"
+ },
+ "spectrum-slider-control-height": {
+ "value": "48px",
+ "description": "Defined in `.spectrum-Slider`, `.spectrum-Slider--sizeS`, `.spectrum-Slider--sizeL`, `.spectrum-Slider--sizeXL`.
Used by `.spectrum-Slider--precise .spectrum-Slider-handle`, `.spectrum-Slider-controls`, `.spectrum-Slider--tick`, `.spectrum-Slider-fill, .spectrum-Slider-track`, `.spectrum-Slider-handle`, `.spectrum-Slider-tick`, `.spectrum-Slider-trackContainer`.
Defaults to `var(--spectrum-component-height-300)`, if not set.",
+ "control": "text",
+ "category": "Component"
+ },
+ "spectrum-slider-control-to-field-label": {
+ "value": "-20px",
+ "description": "Defined in `.spectrum-Slider`, `.spectrum-Slider--sizeS`, `.spectrum-Slider--sizeL`, `.spectrum-Slider--sizeXL`.
Used by `.spectrum-Slider-labelContainer + .spectrum-Slider-content`.
Defaults to `var(--spectrum-slider-control-to-field-label-extra-large)`, if not set.",
+ "control": "text",
+ "category": "Component"
+ },
+ "spectrum-slider-control-to-field-label-medium": {
+ "value": "-12px",
+ "description": "Used by `--spectrum-slider-control-to-field-label`.",
+ "control": "text",
+ "category": "Component"
+ },
+ "spectrum-slider-control-to-side-field-label": {
+ "value": "24px",
+ "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`.
Defaults to `var(--spectrum-slider-control-to-field-label-side-extra-large)`, if not set.",
+ "control": "text",
+ "category": "Component"
+ },
+ "spectrum-slider-control-to-field-label-side-medium": {
+ "value": "16px",
+ "description": "Used by `--spectrum-slider-control-to-side-field-label`.",
+ "control": "text",
+ "category": "Component"
+ },
+ "spectrum-slider-inline-size": {
+ "value": "240px",
+ "description": "Defined in `.spectrum-Slider`, `.spectrum-Slider--sizeS`, `.spectrum-Slider--sizeL`, `.spectrum-Slider--sizeXL`.
Used by `.spectrum-Slider`.
Defaults to `var(--spectrum-field-default-width-extra-large)`, if not set.",
+ "control": "text",
+ "category": "Component"
+ },
+ "spectrum-slider-label-font-weight": {
+ "value": "400",
+ "description": "Defined in `.spectrum-Slider`.
Used by `.spectrum-Slider-labelContainer`.
Defaults to `var(--spectrum-regular-font-weight)`, if not set.",
+ "control": "text",
+ "category": "Component"
+ },
+ "spectrum-slider-label-font-style": {
+ "value": "normal",
+ "description": "Defined in `.spectrum-Slider`.
Used by `.spectrum-Slider-labelContainer`.
Defaults to `var(--spectrum-default-font-style)`, if not set.",
+ "control": "text",
+ "category": "Component"
+ },
+ "spectrum-slider-label-font-family": {
+ "value": "var(--spectrum-sans-font-family-stack)",
+ "description": "Defined in `.spectrum-Slider`.
Used by `.spectrum-Slider-labelContainer`.
Defaults to `var(--spectrum-sans-font-family-stack)`, if not set.",
+ "control": "text",
+ "category": "Component"
+ },
+ "spectrum-slider-value-inline-size": {
+ "value": "22px",
+ "description": "Defined in `.spectrum-Slider`, `.spectrum-Slider--sizeL`, `.spectrum-Slider--sizeXL`.
Used by `.spectrum-Slider--sideLabel .spectrum-Slider-value`.
Defaults to `22px`, if not set.",
+ "control": "text",
+ "category": "Component"
+ },
+ "spectrum-slider-cjk-line-height": {
+ "value": "1.5",
+ "description": "Defined in `.spectrum-Slider`.
Used by `.spectrum-Slider-labelContainer:lang(ja), .spectrum-Slider-labelContainer:lang(ko), .spectrum-Slider-labelContainer:lang(zh)`.
Defaults to `var(--spectrum-cjk-line-height-100)`, if not set.",
+ "control": "text",
+ "category": "Component"
+ },
+ "spectrum-slider-label-margin-start": {
+ "value": "16px",
+ "description": "Defined in `.spectrum-Slider`.
Used by `.spectrum-Slider-value`.
Defaults to `var(--spectrum-spacing-300)`, if not set.",
+ "control": "text",
+ "category": "Component"
+ },
+ "spectrum-slider-handle-border-width": {
+ "value": "2px",
+ "description": "Defined in `.spectrum-Slider`.
Used by `.spectrum-Slider--precise .spectrum-Slider-handle`, `.spectrum-Slider-handle`.
Defaults to `var(--spectrum-border-width-200)`, if not set.",
+ "control": "text",
+ "category": "Component"
+ },
+ "spectrum-slider-handle-margin-left": {
+ "value": "calc(var(--spectrum-slider-handle-size) / -2)",
+ "description": "Defined in `.spectrum-Slider`.
Used by `--spectrum-slider-input-left`.
Defaults to `calc(var(--spectrum-slider-handle-size) / -2)`, if not set.",
+ "control": "text",
+ "category": "Component"
+ },
+ "spectrum-slider-controls-margin": {
+ "value": "calc(var(--spectrum-slider-handle-size) / 2)",
+ "description": "Defined in `.spectrum-Slider`.
Used by `.spectrum-Slider-fill--right`.
Defaults to `calc(var(--spectrum-slider-handle-size) / 2)`, if not set.",
+ "control": "text",
+ "category": "Component"
+ },
+ "spectrum-slider-input-top-size": {
+ "value": "calc(var(--spectrum-slider-handle-size) / -2 / 4)",
+ "description": "Defined in `.spectrum-Slider`.
Used by `.spectrum-Slider-input`.
Defaults to `calc(var(--spectrum-slider-handle-size) / -2 / 4)`, if not set.",
+ "control": "text",
+ "category": "Component"
+ },
+ "spectrum-slider-track-fill-thickness": {
+ "value": "16px",
+ "description": "Defined in `.spectrum-Slider`, `.spectrum-Slider--track-height-large .spectrum-Slider-fill, .spectrum-Slider--track-height-large .spectrum-Slider-track`.
Used by `.spectrum-Slider-fill, .spectrum-Slider-track`.
Defaults to `var(--spectrum-slider-track-height-large)`, if not set.",
+ "control": "text",
+ "category": "Component"
+ },
+ "spectrum-slider-track-height-medium": {
+ "value": "4px",
+ "description": "Used by `--spectrum-slider-track-fill-thickness`, `.spectrum-Slider--tick .spectrum-Slider-controls`.",
+ "control": "text",
+ "category": "Component"
+ },
+ "spectrum-slider-tick-mark-width": {
+ "value": "2px",
+ "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`.
Defaults to `var(--spectrum-border-width-200)`, if not set.",
+ "control": "text",
+ "category": "Component"
+ },
+ "spectrum-slider-tick-mark-border-radius": {
+ "value": "2px",
+ "description": "Defined in `.spectrum-Slider`.
Used by `.spectrum-Slider-tick:after`.
Defaults to `2px`, if not set.",
+ "control": "text",
+ "category": "Component"
+ },
+ "spectrum-slider-focus-indicator-gap": {
+ "value": "2px",
+ "description": "Defined in `.spectrum-Slider`.
Used by `.spectrum-Slider:not(.is-disabled) .spectrum-Slider-handle.is-focused:before, .spectrum-Slider:not(.is-disabled) .spectrum-Slider-handle:focus-visible:before, .spectrum-Slider:not(.is-disabled) .spectrum-Slider-handle:focus:before`, `.spectrum-Slider.spectrum-Slider--precise:not(.is-disabled) .spectrum-Slider-handle.is-focused:before, .spectrum-Slider.spectrum-Slider--precise:not(.is-disabled) .spectrum-Slider-handle:focus-visible:before, .spectrum-Slider.spectrum-Slider--precise:not(.is-disabled) .spectrum-Slider-handle:focus:before`.
Defaults to `var(--spectrum-focus-indicator-gap)`, if not set.",
+ "control": "text",
+ "category": "Component"
+ },
+ "spectrum-slider-downstate-perspective": {
+ "value": "24px",
+ "description": "Defined in `.spectrum-Slider`.
Used by `.spectrum-Slider-handle.is-dragged, .spectrum-Slider-handle:active`.
Defaults to `var(--spectrum-component-size-minimum-perspective-down)`, if not set.",
+ "control": "text",
+ "category": "Component"
+ },
+ "spectrum-slider-track-color": {
+ "value": "var(--spectrum-gray-300)",
+ "description": "Defined in `.spectrum-Slider`.
Used by `.spectrum-Slider-track:before`, `.spectrum-Slider-track:not(:has(~ .spectrum-Slider-fill)):before`, `.spectrum-Slider-ramp .spectrum-Slider-ramp-track`, `.spectrum-Slider--range .spectrum-Slider-track:first-of-type:before`.
Defaults to `var(--spectrum-track-color)`, if not set.",
+ "control": "color",
+ "category": "Component"
+ },
+ "spectrum-slider-track-fill-color": {
+ "value": "light-dark(rgb(80, 80, 80), rgb(175, 175, 175))",
+ "description": "Defined in `.spectrum-Slider`.
Used by `.spectrum-Slider--filled .spectrum-Slider-track:first-child:before, .spectrum-Slider-fill:before`, `.spectrum-Slider-ramp .spectrum-Slider-ramp-track-fill`, `.spectrum-Slider--range .spectrum-Slider-track:not(:first-of-type, :last-of-type):before`.
Defaults to `var(--spectrum-gray-700)`, if not set.",
+ "control": "color",
+ "category": "Component"
+ },
+ "spectrum-slider-track-color-disabled": {
+ "value": "var(--spectrum-gray-100)",
+ "description": "Defined in `.spectrum-Slider`.
Used by `--spectrum-slider-ramp-track-color-disabled`, `.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-disabled-background-color)`, if not set.",
+ "control": "color",
+ "category": "Component"
+ },
+ "spectrum-slider-ramp-track-color-disabled": {
+ "value": "var(--spectrum-slider-track-color-disabled)",
+ "description": "Defined in `.spectrum-Slider`.
Used by `.spectrum-Slider.is-disabled .spectrum-Slider-ramp path`.
Defaults to `var(--spectrum-slider-track-color-disabled)`, if not set.",
+ "control": "color",
+ "category": "Component"
+ },
+ "spectrum-slider-track-fill-color-disabled": {
+ "value": "var(--spectrum-gray-100)",
+ "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(--spectrum-disabled-background-color)`, if not set.",
+ "control": "color",
+ "category": "Component"
+ },
+ "spectrum-slider-handle-border-color-disabled": {
+ "value": "var(--spectrum-gray-300)",
+ "description": "Defined in `.spectrum-Slider`.
Used by `.spectrum-Slider.is-disabled .spectrum-Slider-handle`, `.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": "Component"
+ },
+ "spectrum-slider-label-text-color": {
+ "value": "var(--spectrum-gray-700)",
+ "description": "Defined in `.spectrum-Slider`.
Used by `.spectrum-Slider-labelContainer`.
Defaults to `var(--spectrum-neutral-subdued-content-color-default)`, if not set.",
+ "control": "color",
+ "category": "Component"
+ },
+ "spectrum-slider-tick-label-color": {
+ "value": "var(--spectrum-gray-800)",
+ "description": "Defined in `.spectrum-Slider`.
Used by `.spectrum-Slider-tick .spectrum-Slider-tickLabel`.
Defaults to `var(--spectrum-neutral-content-color-default)`, if not set.",
+ "control": "color",
+ "category": "Component"
+ },
+ "spectrum-slider-label-text-color-disabled": {
+ "value": "var(--spectrum-gray-400)",
+ "description": "Defined in `.spectrum-Slider`.
Used by `.spectrum-Slider.is-disabled .spectrum-Slider-labelContainer, .spectrum-Slider.is-disabled .spectrum-Slider-tickLabel`.
Defaults to `var(--spectrum-disabled-content-color)`, if not set.",
+ "control": "color",
+ "category": "Component"
+ },
+ "spectrum-slider-handle-background-color": {
+ "value": "light-dark(rgb(255, 255, 255), rgb(17, 17, 17))",
+ "description": "Defined in `.spectrum-Slider`.
Used by `--spectrum-slider-handle-background-color-disabled`, `.spectrum-Slider-handle`.
Defaults to `var(--spectrum-gray-25)`, if not set.",
+ "control": "color",
+ "category": "Component"
+ },
+ "spectrum-slider-handle-background-color-disabled": {
+ "value": "var(--spectrum-slider-handle-background-color)",
+ "description": "Defined in `.spectrum-Slider`.
Used by `.spectrum-Slider.is-disabled .spectrum-Slider-handle`, `.spectrum-Slider.is-disabled .spectrum-Slider-handle:active`, `.spectrum-Slider.is-disabled .spectrum-Slider-handle:hover`.
Defaults to `var(--spectrum-slider-handle-background-color)`, if not set.",
+ "control": "color",
+ "category": "Component"
+ },
+ "spectrum-slider-ticks-handle-background-color": {
+ "value": "light-dark(rgb(243, 243, 243), rgb(34, 34, 34))",
+ "description": "Defined in `.spectrum-Slider`.
Used by `.spectrum-Slider-ticks ~ .spectrum-Slider-handleContainer .spectrum-Slider-handle`.
Defaults to `var(--spectrum-gray-75)`, if not set.",
+ "control": "color",
+ "category": "Component"
+ },
+ "spectrum-slider-handle-border-color": {
+ "value": "light-dark(rgb(41, 41, 41), rgb(219, 219, 219))",
+ "description": "Defined in `.spectrum-Slider`.
Used by `.spectrum-Slider-handle`.
Defaults to `var(--spectrum-gray-800)`, if not set.",
+ "control": "color",
+ "category": "Component"
+ },
+ "spectrum-slider-tick-mark-color": {
+ "value": "light-dark(rgb(198, 198, 198), rgb(68, 68, 68))",
+ "description": "Defined in `.spectrum-Slider`.
Used by `.spectrum-Slider-tick:after, .spectrum-Slider.is-disabled .spectrum-Slider-tick:after`, `.spectrum-Slider.is-disabled .spectrum-Slider-tick:after`.
Defaults to `var(--spectrum-gray-400)`, if not set.",
+ "control": "color",
+ "category": "Component"
+ },
+ "spectrum-slider-tick-mark-color-filled-track": {
+ "value": "light-dark(rgb(41, 41, 41), rgb(219, 219, 219))",
+ "description": "Defined in `.spectrum-Slider`.
Used by `.spectrum-Slider--filled:not(.spectrum-Slider--range, .is-disabled, .spectrum-Slider--emphasized) .spectrum-Slider-tick:nth-child(-n + 4):after, .spectrum-Slider--offset:not(.spectrum-Slider--range, .is-disabled, .spectrum-Slider--emphasized) .spectrum-Slider-tick:nth-child(-n + 4):after, .spectrum-Slider--range .spectrum-Slider-tick:nth-child(3):after, .spectrum-Slider--range .spectrum-Slider-tick:nth-child(4):after, .spectrum-Slider--range .spectrum-Slider-tick:nth-child(5):after`.
Defaults to `var(--spectrum-gray-800)`, if not set.",
+ "control": "color",
+ "category": "Component"
+ },
+ "spectrum-slider-emphasized-tick-mark-color": {
+ "value": "var(--spectrum-blue-1000)",
+ "description": "Defined in `.spectrum-Slider`.
Used by `.spectrum-Slider--emphasized .spectrum-Slider-tick:nth-child(-n + 4):after`.
Defaults to `var(--spectrum-accent-color-1000)`, if not set.",
+ "control": "color",
+ "category": "Component"
+ },
+ "spectrum-slider-emphasized-track-fill-color": {
+ "value": "var(--spectrum-accent-color-900)",
+ "description": "Defined in `.spectrum-Slider`.
Used by `.spectrum-Slider--emphasized .spectrum-Slider-fill:before, .spectrum-Slider--emphasized .spectrum-Slider-track:first-child:before, .spectrum-Slider--emphasized.spectrum-Slider--range .spectrum-Slider-track:not(:first-of-type, :last-of-type):before`, `.spectrum-Slider--emphasized .spectrum-Slider-ramp .spectrum-Slider-ramp-track-fill`.
Defaults to `var(--spectrum-accent-content-color-default)`, if not set.",
+ "control": "color",
+ "category": "Component"
+ },
+ "spectrum-slider-handle-border-color-hover": {
+ "value": "light-dark(rgb(19, 19, 19), rgb(242, 242, 242))",
+ "description": "Defined in `.spectrum-Slider`.
Used by `.spectrum-Slider-handle:hover`.
Defaults to `var(--spectrum-gray-900)`, if not set.",
+ "control": "color",
+ "category": "Component"
+ },
+ "spectrum-slider-handle-border-color-down": {
+ "value": "light-dark(rgb(19, 19, 19), rgb(242, 242, 242))",
+ "description": "Defined in `.spectrum-Slider`.
Used by `.spectrum-Slider-handle.is-dragged, .spectrum-Slider-handle:active`.
Defaults to `var(--spectrum-gray-900)`, if not set.",
+ "control": "color",
+ "category": "Component"
+ },
+ "spectrum-slider-handle-border-color-key-focus": {
+ "value": "light-dark(rgb(19, 19, 19), rgb(242, 242, 242))",
+ "description": "Defined in `.spectrum-Slider`.
Used by `.spectrum-Slider:not(.is-disabled) .spectrum-Slider-handle.is-focused, .spectrum-Slider:not(.is-disabled) .spectrum-Slider-handle:focus, .spectrum-Slider:not(.is-disabled) .spectrum-Slider-handle:focus-visible`.
Defaults to `var(--spectrum-gray-900)`, if not set.",
+ "control": "color",
+ "category": "Component"
+ },
+ "spectrum-slider-handle-focus-ring-color-key-focus": {
+ "value": "var(--spectrum-blue-800)",
+ "description": "Defined in `.spectrum-Slider`.
Used by `.spectrum-Slider:not(.is-disabled) .spectrum-Slider-handle.is-focused:before, .spectrum-Slider:not(.is-disabled) .spectrum-Slider-handle:focus-visible:before, .spectrum-Slider:not(.is-disabled) .spectrum-Slider-handle:focus:before`.
Defaults to `var(--spectrum-focus-indicator-color)`, if not set.",
+ "control": "color",
+ "category": "Component"
+ },
+ "spectrum-slider-precision-handle-height": {
+ "value": "var(--spectrum-slider-precision-handle-height-extra-large)",
+ "description": "Defined in `.spectrum-Slider`, `.spectrum-Slider--sizeS`, `.spectrum-Slider--sizeL`, `.spectrum-Slider--sizeXL`.
Used by `.spectrum-Slider--precise .spectrum-Slider-handle`, `.spectrum-Slider.spectrum-Slider--precise:not(.is-disabled) .spectrum-Slider-handle.is-focused:before, .spectrum-Slider.spectrum-Slider--precise:not(.is-disabled) .spectrum-Slider-handle:focus-visible:before, .spectrum-Slider.spectrum-Slider--precise:not(.is-disabled) .spectrum-Slider-handle:focus:before`.
Defaults to `var(--spectrum-slider-precision-handle-height-extra-large)`, if not set.",
+ "control": "text",
+ "category": "Component"
+ },
+ "spectrum-slider-precision-handle-height-medium": {
+ "description": "Used by `--spectrum-slider-precision-handle-height`.",
+ "control": "text",
+ "category": "Component"
+ },
+ "spectrum-slider-control-to-text-field": {
+ "value": "24px",
+ "description": "Defined in `.spectrum-Slider`, `.spectrum-Slider--sizeS`, `.spectrum-Slider--sizeL`, `.spectrum-Slider--sizeXL`.
Used by `.spectrum-Slider--sideLabel .spectrum-Slider-value`, `.spectrum-Slider-content--editable`.
Defaults to `var(--spectrum-slider-control-to-text-field-extra-large)`, if not set.",
+ "control": "text",
+ "category": "Component"
+ },
+ "spectrum-slider-control-to-text-field-medium": {
+ "value": "16px",
+ "description": "Used by `--spectrum-slider-control-to-text-field`.",
+ "control": "text",
+ "category": "Component"
+ },
+ "spectrum-slider-editable-control-to-field-label": {
+ "value": "-20px",
+ "description": "Defined in `.spectrum-Slider`, `.spectrum-Slider--sizeS`, `.spectrum-Slider--sizeL`, `.spectrum-Slider--sizeXL`.
Used by `.spectrum-Slider-labelContainer + .spectrum-Slider-content--editable`.
Defaults to `var(--spectrum-slider-control-to-field-label-editable-extra-large)`, if not set.",
+ "control": "text",
+ "category": "Component"
+ },
+ "spectrum-slider-control-to-field-label-editable-medium": {
+ "value": "-12px",
+ "description": "Used by `--spectrum-slider-editable-control-to-field-label`.",
+ "control": "text",
+ "category": "Component"
+ },
+ "spectrum-slider-input-left": {
+ "value": "calc(var(--spectrum-slider-handle-margin-left) / 4)",
+ "description": "Defined in `.spectrum-Slider`.
Used by `.spectrum-Slider-input`.
Defaults to `calc(var(--spectrum-slider-handle-margin-left) / 4)`, if not set.",
+ "control": "text",
+ "category": "Component"
+ },
+ "spectrum-slider-range-track-reset": {
+ "value": "0",
+ "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`.
Defaults to `0`, if not set.",
+ "control": "text",
+ "category": "Component"
+ },
+ "spectrum-slider-track-corner-radius": {
+ "value": "2px",
+ "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`, `.spectrum-Slider-fill:before`.
Defaults to `2px`, if not set.",
+ "control": "text",
+ "category": "Component"
+ },
+ "spectrum-slider-handle-border-radius": {
+ "value": "calc(var(--spectrum-corner-radius-500) * 4)",
+ "description": "Defined in `.spectrum-Slider`, `.spectrum-Slider--sizeS`, `.spectrum-Slider--sizeL`, `.spectrum-Slider--sizeXL`.
Used by `.spectrum-Slider.spectrum-Slider--precise:not(.is-disabled) .spectrum-Slider-handle.is-focused:before, .spectrum-Slider.spectrum-Slider--precise:not(.is-disabled) .spectrum-Slider-handle:focus-visible:before, .spectrum-Slider.spectrum-Slider--precise:not(.is-disabled) .spectrum-Slider-handle:focus:before`.
Defaults to `calc(var(--spectrum-corner-radius-500) * 4)`, if not set.",
+ "control": "text",
+ "category": "Component"
+ },
+ "spectrum-slider-editable-field-inline-size-medium": {
+ "description": "Used by `--mod-textfield-width`.",
+ "control": "text",
+ "category": "Component"
+ },
+ "spectrum-slider-handle-small": {
+ "value": "18px",
+ "description": "Used by `--spectrum-slider-handle-size`.",
+ "control": "text",
+ "category": "Component"
+ },
+ "spectrum-slider-control-to-field-label-small": {
+ "value": "-4px",
+ "description": "Used by `--spectrum-slider-control-to-field-label`.",
+ "control": "text",
+ "category": "Component"
+ },
+ "spectrum-slider-control-to-field-label-side-small": {
+ "value": "16px",
+ "description": "Used by `--spectrum-slider-control-to-side-field-label`.",
+ "control": "text",
+ "category": "Component"
+ },
+ "spectrum-slider-precision-handle-height-small": {
+ "description": "Used by `--spectrum-slider-precision-handle-height`.",
+ "control": "text",
+ "category": "Component"
+ },
+ "spectrum-slider-control-to-text-field-small": {
+ "value": "16px",
+ "description": "Used by `--spectrum-slider-control-to-text-field`.",
+ "control": "text",
+ "category": "Component"
+ },
+ "spectrum-slider-control-to-field-label-editable-small": {
+ "value": "-4px",
+ "description": "Used by `--spectrum-slider-editable-control-to-field-label`.",
+ "control": "text",
+ "category": "Component"
+ },
+ "spectrum-slider-editable-field-inline-size-small": {
+ "description": "Used by `--mod-textfield-width`.",
+ "control": "text",
+ "category": "Component"
+ },
+ "spectrum-slider-handle-large": {
+ "value": "22px",
+ "description": "Used by `--spectrum-slider-handle-size`.",
+ "control": "text",
+ "category": "Component"
+ },
+ "spectrum-slider-control-to-field-label-large": {
+ "value": "-16px",
+ "description": "Used by `--spectrum-slider-control-to-field-label`.",
+ "control": "text",
+ "category": "Component"
+ },
+ "spectrum-slider-control-to-field-label-side-large": {
+ "value": "20px",
+ "description": "Used by `--spectrum-slider-control-to-side-field-label`.",
+ "control": "text",
+ "category": "Component"
+ },
+ "spectrum-slider-precision-handle-height-large": {
+ "description": "Used by `--spectrum-slider-precision-handle-height`.",
+ "control": "text",
+ "category": "Component"
+ },
+ "spectrum-slider-control-to-text-field-large": {
+ "value": "20px",
+ "description": "Used by `--spectrum-slider-control-to-text-field`.",
+ "control": "text",
+ "category": "Component"
+ },
+ "spectrum-slider-control-to-field-label-editable-large": {
+ "value": "-16px",
+ "description": "Used by `--spectrum-slider-editable-control-to-field-label`.",
+ "control": "text",
+ "category": "Component"
+ },
+ "spectrum-slider-editable-field-inline-size-large": {
+ "description": "Used by `--mod-textfield-width`.",
+ "control": "text",
+ "category": "Component"
+ },
+ "spectrum-slider-handle-extra-large": {
+ "value": "24px",
+ "description": "Used by `--spectrum-slider-handle-size`.",
+ "control": "text",
+ "category": "Component"
+ },
+ "spectrum-slider-control-to-field-label-extra-large": {
+ "value": "-20px",
+ "description": "Used by `--spectrum-slider-control-to-field-label`.",
+ "control": "text",
+ "category": "Component"
+ },
+ "spectrum-slider-control-to-field-label-side-extra-large": {
+ "value": "24px",
+ "description": "Used by `--spectrum-slider-control-to-side-field-label`.",
+ "control": "text",
+ "category": "Component"
+ },
+ "spectrum-slider-precision-handle-height-extra-large": {
+ "description": "Used by `--spectrum-slider-precision-handle-height`.",
+ "control": "text",
+ "category": "Component"
+ },
+ "spectrum-slider-control-to-text-field-extra-large": {
+ "value": "24px",
+ "description": "Used by `--spectrum-slider-control-to-text-field`.",
+ "control": "text",
+ "category": "Component"
+ },
+ "spectrum-slider-control-to-field-label-editable-extra-large": {
+ "value": "-20px",
+ "description": "Used by `--spectrum-slider-editable-control-to-field-label`.",
+ "control": "text",
+ "category": "Component"
+ },
+ "spectrum-slider-editable-field-inline-size-extra-large": {
+ "description": "Used by `--mod-textfield-width`.",
+ "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-track-height-large": {
+ "value": "16px",
+ "description": "Used by `--spectrum-slider-track-fill-thickness`, `.spectrum-Slider-tick.spectrum-Slider-tick--track-height-large:after`.",
+ "control": "text",
+ "category": "Component"
+ },
+ "spectrum-slider-precision-handle-width": {
+ "description": "Used by `.spectrum-Slider--precise .spectrum-Slider-handle`, `.spectrum-Slider.spectrum-Slider--precise:not(.is-disabled) .spectrum-Slider-handle.is-focused:before, .spectrum-Slider.spectrum-Slider--precise:not(.is-disabled) .spectrum-Slider-handle:focus-visible:before, .spectrum-Slider.spectrum-Slider--precise:not(.is-disabled) .spectrum-Slider-handle:focus:before`.",
+ "control": "text",
+ "category": "Component"
+ },
+ "spectrum-slider-handle-gap": {
+ "value": "4px",
+ "description": "Used by `.spectrum-Slider-fill--right`.
Defaults to `var(--spectrum-slider-handle-gap)`, if not set.",
+ "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"
+ }
+ },
+ "global": {
+ "spectrum-font-size-100": {
+ "value": "14px",
+ "description": "Used by `--spectrum-slider-font-size`.",
+ "control": "text",
+ "category": "Global"
+ },
+ "spectrum-component-height-100": {
+ "value": "32px",
+ "description": "Used by `--spectrum-slider-control-height`.",
+ "control": "text",
+ "category": "Global"
+ },
+ "spectrum-field-default-width-medium": {
+ "value": "208px",
+ "description": "Used by `--spectrum-slider-inline-size`.",
+ "control": "text",
+ "category": "Global"
+ },
+ "spectrum-regular-font-weight": {
+ "value": "400",
+ "description": "Used by `--spectrum-slider-label-font-weight`.",
+ "control": "text",
+ "category": "Global"
+ },
+ "spectrum-default-font-style": {
+ "value": "normal",
+ "description": "Used by `--spectrum-slider-label-font-style`.",
+ "control": "text",
+ "category": "Global"
+ },
+ "spectrum-sans-font-family-stack": {
+ "description": "Used by `--spectrum-slider-label-font-family`.",
+ "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-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-focus-indicator-gap": {
+ "value": "2px",
+ "description": "Used by `--spectrum-slider-focus-indicator-gap`.",
+ "control": "text",
+ "category": "Global"
+ },
+ "spectrum-component-size-minimum-perspective-down": {
+ "value": "24px",
+ "description": "Used by `--spectrum-slider-downstate-perspective`.",
+ "control": "text",
+ "category": "Global"
+ },
+ "spectrum-track-color": {
+ "value": "var(--spectrum-gray-300)",
+ "description": "Used by `--spectrum-slider-track-color`.",
+ "control": "color",
+ "category": "Global"
+ },
+ "spectrum-gray-700": {
+ "value": "light-dark(rgb(80, 80, 80), rgb(175, 175, 175))",
+ "description": "Used by `--spectrum-slider-track-fill-color`.",
+ "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`.",
+ "control": "color",
+ "category": "Global"
+ },
+ "spectrum-disabled-border-color": {
+ "value": "var(--spectrum-gray-300)",
+ "description": "Used by `--spectrum-slider-handle-border-color-disabled`.",
+ "control": "color",
+ "category": "Global"
+ },
+ "spectrum-neutral-subdued-content-color-default": {
+ "value": "var(--spectrum-gray-700)",
+ "description": "Used by `--spectrum-slider-label-text-color`.",
+ "control": "color",
+ "category": "Global"
+ },
+ "spectrum-neutral-content-color-default": {
+ "value": "var(--spectrum-gray-800)",
+ "description": "Used by `--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-gray-25": {
+ "value": "light-dark(rgb(255, 255, 255), rgb(17, 17, 17))",
+ "description": "Used by `--spectrum-slider-handle-background-color`.",
+ "control": "text",
+ "category": "Global"
+ },
+ "spectrum-gray-75": {
+ "value": "light-dark(rgb(243, 243, 243), rgb(34, 34, 34))",
+ "description": "Used by `--spectrum-slider-ticks-handle-background-color`.",
+ "control": "text",
+ "category": "Global"
+ },
+ "spectrum-gray-800": {
+ "value": "light-dark(rgb(41, 41, 41), rgb(219, 219, 219))",
+ "description": "Used by `--spectrum-slider-handle-border-color`, `--spectrum-slider-tick-mark-color-filled-track`.",
+ "control": "text",
+ "category": "Global"
+ },
+ "spectrum-gray-400": {
+ "value": "light-dark(rgb(198, 198, 198), rgb(68, 68, 68))",
+ "description": "Used by `--spectrum-slider-tick-mark-color`.",
+ "control": "text",
+ "category": "Global"
+ },
+ "spectrum-accent-color-1000": {
+ "value": "var(--spectrum-blue-1000)",
+ "description": "Used by `--spectrum-slider-emphasized-tick-mark-color`.",
+ "control": "color",
+ "category": "Global"
+ },
+ "spectrum-accent-content-color-default": {
+ "value": "var(--spectrum-accent-color-900)",
+ "description": "Used by `--spectrum-slider-emphasized-track-fill-color`.",
+ "control": "color",
+ "category": "Global"
+ },
+ "spectrum-gray-900": {
+ "value": "light-dark(rgb(19, 19, 19), rgb(242, 242, 242))",
+ "description": "Used by `--spectrum-slider-handle-border-color-hover`, `--spectrum-slider-handle-border-color-down`, `--spectrum-slider-handle-border-color-key-focus`.",
+ "control": "text",
+ "category": "Global"
+ },
+ "spectrum-focus-indicator-color": {
+ "value": "var(--spectrum-blue-800)",
+ "description": "Used by `--spectrum-slider-handle-focus-ring-color-key-focus`.",
+ "control": "color",
+ "category": "Global"
+ },
+ "spectrum-component-top-to-text-100": {
+ "value": "6px",
+ "description": "Used by `--mod-fieldlabel-top-to-text`.",
+ "control": "text",
+ "category": "Global"
+ },
+ "spectrum-component-bottom-to-text-100": {
+ "value": "9px",
+ "description": "Used by `--mod-fieldlabel-bottom-to-text`.",
+ "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-75": {
+ "value": "24px",
+ "description": "Used by `--spectrum-slider-control-height`.",
+ "control": "text",
+ "category": "Global"
+ },
+ "spectrum-corner-radius-500": {
+ "value": "8px",
+ "description": "Used by `--spectrum-slider-handle-border-radius`.",
+ "control": "text",
+ "category": "Global"
+ },
+ "spectrum-field-default-width-small": {
+ "value": "192px",
+ "description": "Used by `--spectrum-slider-inline-size`.",
+ "control": "text",
+ "category": "Global"
+ },
+ "spectrum-component-top-to-text-75": {
+ "value": "4px",
+ "description": "Used by `--mod-fieldlabel-top-to-text`.",
+ "control": "text",
+ "category": "Global"
+ },
+ "spectrum-component-bottom-to-text-75": {
+ "value": "5px",
+ "description": "Used by `--mod-fieldlabel-bottom-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-200": {
+ "value": "40px",
+ "description": "Used by `--spectrum-slider-control-height`.",
+ "control": "text",
+ "category": "Global"
+ },
+ "spectrum-field-default-width-large": {
+ "value": "224px",
+ "description": "Used by `--spectrum-slider-inline-size`.",
+ "control": "text",
+ "category": "Global"
+ },
+ "spectrum-component-top-to-text-200": {
+ "value": "9px",
+ "description": "Used by `--mod-fieldlabel-top-to-text`.",
+ "control": "text",
+ "category": "Global"
+ },
+ "spectrum-component-bottom-to-text-200": {
+ "value": "11px",
+ "description": "Used by `--mod-fieldlabel-bottom-to-text`.",
+ "control": "text",
+ "category": "Global"
+ },
+ "spectrum-font-size-300": {
+ "value": "18px",
+ "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-field-default-width-extra-large": {
+ "value": "240px",
+ "description": "Used by `--spectrum-slider-inline-size`.",
+ "control": "text",
+ "category": "Global"
+ },
+ "spectrum-component-top-to-text-300": {
+ "value": "12px",
+ "description": "Used by `--mod-fieldlabel-top-to-text`.",
+ "control": "text",
+ "category": "Global"
+ },
+ "spectrum-component-bottom-to-text-300": {
+ "value": "14px",
+ "description": "Used by `--mod-fieldlabel-bottom-to-text`.",
+ "control": "text",
+ "category": "Global"
+ },
+ "spectrum-logical-rotation": {
+ "value": "matrix(-1, 0, 0, 1, 0, 0)",
+ "description": "Defined in `.spectrum-Slider:dir(rtl)`.
Used by `.spectrum-Slider-ramp svg`.
Defaults to `matrix(-1, 0, 0, 1, 0, 0)`, if not set.",
+ "control": "text",
+ "category": "Global"
+ },
+ "spectrum-animation-duration-100": {
+ "description": "Used by `.spectrum-Slider-handle`, `.spectrum-Slider-handle:before`.",
+ "control": "text",
+ "category": "Global"
+ },
+ "spectrum-component-size-difference-down": {
+ "value": "-2px",
+ "description": "Used by `.spectrum-Slider-handle.is-dragged, .spectrum-Slider-handle:active`.",
+ "control": "text",
+ "category": "Global"
+ },
+ "spectrum-focus-indicator-thickness": {
+ "value": "2px",
+ "description": "Used by `.spectrum-Slider:not(.is-disabled) .spectrum-Slider-handle.is-focused:before, .spectrum-Slider:not(.is-disabled) .spectrum-Slider-handle:focus-visible:before, .spectrum-Slider:not(.is-disabled) .spectrum-Slider-handle:focus: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"
+ }
+ },
+ "passthroughs": {
+ "mod-textfield-width": {
+ "category": "Passthrough"
+ },
+ "mod-fieldlabel-top-to-text": {
+ "category": "Passthrough"
+ },
+ "mod-fieldlabel-bottom-to-text": {
+ "category": "Passthrough"
+ }
+ },
+ "high-contrast": {
+ "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`.
Defaults to `var(--mod-slider-handle-background-color, var(--spectrum-slider-handle-background-color))`, 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`.
Defaults to `var(--mod-slider-handle-border-color-down, var(--spectrum-slider-handle-border-color-down))`, 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:not(.is-disabled) .spectrum-Slider-handle.is-focused, .spectrum-Slider:not(.is-disabled) .spectrum-Slider-handle:focus, .spectrum-Slider:not(.is-disabled) .spectrum-Slider-handle:focus-visible`.
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:not(.is-disabled) .spectrum-Slider-handle.is-focused:before, .spectrum-Slider:not(.is-disabled) .spectrum-Slider-handle:focus-visible:before, .spectrum-Slider:not(.is-disabled) .spectrum-Slider-handle:focus: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-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-fill-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`, `.spectrum-Slider--range .spectrum-Slider-track:first-of-type:before`.
Defaults to `var(--mod-slider-track-fill-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--emphasized .spectrum-Slider-fill:before, .spectrum-Slider--emphasized .spectrum-Slider-track:first-child:before, .spectrum-Slider--emphasized.spectrum-Slider--range .spectrum-Slider-track:not(:first-of-type, :last-of-type):before`, `.spectrum-Slider-ramp .spectrum-Slider-ramp-track-fill`, `.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-track-color))",
+ "description": "Defined in `.spectrum-Slider`.
Used by `.spectrum-Slider-ramp .spectrum-Slider-ramp-track`.
Defaults to `var(--mod-slider-ramp-track-color, var(--spectrum-slider-track-color))`, if not set.",
+ "control": "color"
+ },
+ "highcontrast-slider-tick-mark-color-filled-track": {
+ "value": "var(--mod-slider-tick-mark-color-filled-track, var(--spectrum-slider-tick-mark-color-filled-track))",
+ "description": "Defined in `.spectrum-Slider`.
Used by `.spectrum-Slider--emphasized .spectrum-Slider-tick:nth-child(-n + 4):after`, `.spectrum-Slider--filled:not(.spectrum-Slider--range, .is-disabled, .spectrum-Slider--emphasized) .spectrum-Slider-tick:nth-child(-n + 4):after, .spectrum-Slider--offset:not(.spectrum-Slider--range, .is-disabled, .spectrum-Slider--emphasized) .spectrum-Slider-tick:nth-child(-n + 4):after, .spectrum-Slider--range .spectrum-Slider-tick:nth-child(3):after, .spectrum-Slider--range .spectrum-Slider-tick:nth-child(4):after, .spectrum-Slider--range .spectrum-Slider-tick:nth-child(5):after`.
Defaults to `var(--mod-slider-tick-mark-color-filled-track, var(--spectrum-slider-tick-mark-color-filled-track))`, 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`.
Used by `.spectrum-Slider-tick:after, .spectrum-Slider.is-disabled .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-disabled-border-color, var(--spectrum-slider-handle-border-color-disabled))",
+ "description": "Defined in `.spectrum-Slider`.
Used by `.spectrum-Slider.is-disabled .spectrum-Slider-handle`, `.spectrum-Slider.is-disabled .spectrum-Slider-handle:active`, `.spectrum-Slider.is-disabled .spectrum-Slider-handle:hover`.
Defaults to `var(--mod-slider-disabled-border-color, var(--spectrum-slider-handle-border-color-disabled))`, if not set.",
+ "control": "color"
+ },
+ "highcontrast-slider-handle-disabled-background-color": {
+ "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`, `.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, var(--spectrum-slider-tick-mark-color))",
+ "description": "Defined in `.spectrum-Slider`.
Used by `.spectrum-Slider.is-disabled .spectrum-Slider-tick:after`.
Defaults to `var(--mod-slider-tick-mark-color, var(--spectrum-slider-tick-mark-color))`, if not set.",
+ "control": "color"
+ }
+ }
}
diff --git a/components/slider/stories/slider.stories.js b/components/slider/stories/slider.stories.js
index 3b69d70d1f5..c833fec9cae 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 { isActive, isDisabled, isEmphasized, isFocused, isHovered, size } from "@spectrum-css/preview/types";
-import metadata from "../dist/metadata.json";
-import packageJson from "../package.json";
import { SliderGroup, VariantGroup } 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.
*
@@ -190,9 +192,7 @@ export default {
},
packageJson,
metadata,
- status: {
- type: "migrated",
- },
+ cssprops: metadata.modifiers,
},
tags: ["migrated"],
};
diff --git a/components/splitview/dist/metadata.json b/components/splitview/dist/metadata.json
index c6925723f7c..fb919b9312c 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,59 +27,265 @@
".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"
+ ".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": {
+ "description": "Used by `.spectrum-SplitView-pane`.
Defaults to `var(--spectrum-splitview-background-color)`, if not set.",
+ "control": "color",
+ "category": "Modifier"
+ },
+ "mod-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": {
+ "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": {
+ "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": {
+ "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": {
+ "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": {
+ "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": {
+ "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": {
+ "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": {
+ "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": {
+ "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": {
+ "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": {
+ "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": {
+ "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": {
+ "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": {
+ "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-background-color": {
+ "value": "light-dark(rgb(243, 243, 243), rgb(34, 34, 34))",
+ "description": "Defined in `.spectrum-SplitView`.
Used by `.spectrum-SplitView-pane`.
Defaults to `var(--spectrum-gray-75)`, if not set.",
+ "control": "color",
+ "category": "Component"
+ },
+ "spectrum-splitview-handle-background-color": {
+ "value": "light-dark(rgb(225, 225, 225), rgb(50, 50, 50))",
+ "description": "Defined in `.spectrum-SplitView`.
Used by `.spectrum-SplitView-gripper`, `.spectrum-SplitView-gripper:before`, `.spectrum-SplitView-splitter`.
Defaults to `var(--spectrum-gray-200)`, if not set.",
+ "control": "color",
+ "category": "Component"
+ },
+ "spectrum-splitview-gripper-border-radius": {
+ "value": "2px",
+ "description": "Defined in `.spectrum-SplitView`.
Used by `.spectrum-SplitView-gripper`.
Defaults to `2px`, if not set.",
+ "control": "text",
+ "category": "Component"
+ },
+ "spectrum-splitview-vertical-width": {
+ "value": "100%",
+ "description": "Defined in `.spectrum-SplitView`.
Used by `.spectrum-SplitView--vertical .spectrum-SplitView-pane`, `.spectrum-SplitView--vertical .spectrum-SplitView-splitter`.
Defaults to `100%`, if not set.",
+ "control": "text",
+ "category": "Component"
+ },
+ "spectrum-splitview-vertical-gripper-width": {
+ "value": "50%",
+ "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`.
Defaults to `50%`, if not set.",
+ "control": "text",
+ "category": "Component"
+ },
+ "spectrum-splitview-vertical-gripper-outer-width": {
+ "value": "100%",
+ "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`.
Defaults to `100%`, if not set.",
+ "control": "text",
+ "category": "Component"
+ },
+ "spectrum-splitview-vertical-gripper-reset": {
+ "value": "0",
+ "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`.
Defaults to `0`, if not set.",
+ "control": "text",
+ "category": "Component"
+ },
+ "spectrum-splitview-content-color": {
+ "value": "var(--spectrum-gray-800)",
+ "description": "Defined in `.spectrum-SplitView`.
Used by `.spectrum-SplitView-pane`.
Defaults to `var(--spectrum-body-color)`, if not set.",
+ "control": "color",
+ "category": "Component"
+ },
+ "spectrum-splitview-handle-background-color-hover": {
+ "value": "light-dark(rgb(198, 198, 198), rgb(68, 68, 68))",
+ "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(--spectrum-gray-400)`, if not set.",
+ "control": "color",
+ "category": "Component"
+ },
+ "spectrum-splitview-handle-background-color-down": {
+ "value": "light-dark(rgb(41, 41, 41), rgb(219, 219, 219))",
+ "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(--spectrum-gray-800)`, if not set.",
+ "control": "color",
+ "category": "Component"
+ },
+ "spectrum-splitview-handle-background-color-focus": {
+ "value": "var(--spectrum-blue-800)",
+ "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(--spectrum-focus-indicator-color)`, if not set.",
+ "control": "color",
+ "category": "Component"
+ },
+ "spectrum-splitview-handle-width": {
+ "value": "2px",
+ "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`.
Defaults to `var(--spectrum-border-width-200)`, if not set.",
+ "control": "text",
+ "category": "Component"
+ },
+ "spectrum-splitview-gripper-width": {
+ "value": "4px",
+ "description": "Defined in `.spectrum-SplitView`.
Used by `.spectrum-SplitView-gripper`, `.spectrum-SplitView--vertical .spectrum-SplitView-gripper`.
Defaults to `var(--spectrum-border-width-400)`, if not set.",
+ "control": "text",
+ "category": "Component"
+ },
+ "spectrum-splitview-gripper-height": {
+ "value": "16px",
+ "description": "Defined in `.spectrum-SplitView`.
Used by `.spectrum-SplitView-gripper`, `.spectrum-SplitView--vertical .spectrum-SplitView-gripper`.
Defaults to `16px`, if not set.",
+ "control": "text",
+ "category": "Component"
+ },
+ "spectrum-splitview-gripper-border-width-horizontal": {
+ "value": "3px",
+ "description": "Defined in `.spectrum-SplitView`.
Used by `.spectrum-SplitView-gripper`, `.spectrum-SplitView--vertical .spectrum-SplitView-gripper`.
Defaults to `3px`, if not set.",
+ "control": "text",
+ "category": "Component"
+ },
+ "spectrum-splitview-gripper-border-width-vertical": {
+ "value": "4px",
+ "description": "Defined in `.spectrum-SplitView`.
Used by `.spectrum-SplitView-gripper`, `.spectrum-SplitView--vertical .spectrum-SplitView-gripper`.
Defaults to `var(--spectrum-border-width-400)`, if not set.",
+ "control": "text",
+ "category": "Component"
+ }
+ },
+ "global": {
+ "spectrum-gray-75": {
+ "value": "light-dark(rgb(243, 243, 243), rgb(34, 34, 34))",
+ "description": "Used by `--spectrum-splitview-background-color`.",
+ "control": "text",
+ "category": "Global"
+ },
+ "spectrum-gray-200": {
+ "value": "light-dark(rgb(225, 225, 225), rgb(50, 50, 50))",
+ "description": "Used by `--spectrum-splitview-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"
+ }
+ },
+ "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..57cd23ebff0 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,10 @@ export default {
parameters: {
packageJson,
metadata,
+ cssprops: {
+ ...metadata.modifiers,
+ ...metadata.component,
+ },
},
};
diff --git a/components/statuslight/dist/metadata.json b/components/statuslight/dist/metadata.json
index 07f3510d851..92203f6bf11 100644
--- a/components/statuslight/dist/metadata.json
+++ b/components/statuslight/dist/metadata.json
@@ -35,158 +35,840 @@
".spectrum-StatusLight:lang(ko)",
".spectrum-StatusLight:lang(zh)"
],
- "modifiers": [
- "--mod-statuslight-border-width",
- "--mod-statuslight-content-color-default",
- "--mod-statuslight-corner-radius",
- "--mod-statuslight-dot-size",
- "--mod-statuslight-font-family",
- "--mod-statuslight-font-size",
- "--mod-statuslight-font-style",
- "--mod-statuslight-font-weight",
- "--mod-statuslight-height",
- "--mod-statuslight-line-height",
- "--mod-statuslight-line-height-cjk",
- "--mod-statuslight-nonsemantic-blue-color",
- "--mod-statuslight-nonsemantic-brown-color",
- "--mod-statuslight-nonsemantic-celery-color",
- "--mod-statuslight-nonsemantic-chartreuse-color",
- "--mod-statuslight-nonsemantic-cinnamon-color",
- "--mod-statuslight-nonsemantic-cyan-color",
- "--mod-statuslight-nonsemantic-fuchsia-color",
- "--mod-statuslight-nonsemantic-gray-color",
- "--mod-statuslight-nonsemantic-green-color",
- "--mod-statuslight-nonsemantic-indigo-color",
- "--mod-statuslight-nonsemantic-magenta-color",
- "--mod-statuslight-nonsemantic-orange-color",
- "--mod-statuslight-nonsemantic-pink-color",
- "--mod-statuslight-nonsemantic-purple-color",
- "--mod-statuslight-nonsemantic-red-color",
- "--mod-statuslight-nonsemantic-seafoam-color",
- "--mod-statuslight-nonsemantic-silver-color",
- "--mod-statuslight-nonsemantic-turquoise-color",
- "--mod-statuslight-nonsemantic-yellow-color",
- "--mod-statuslight-semantic-info-color",
- "--mod-statuslight-semantic-negative-color",
- "--mod-statuslight-semantic-neutral-color",
- "--mod-statuslight-semantic-notice-color",
- "--mod-statuslight-semantic-positive-color",
- "--mod-statuslight-spacing-bottom-to-label",
- "--mod-statuslight-spacing-dot-to-label",
- "--mod-statuslight-spacing-top-to-dot",
- "--mod-statuslight-spacing-top-to-label",
- "--mod-statuslight-subdued-content-color-default"
- ],
- "component": [
- "--spectrum-status-light-dot-size-extra-large",
- "--spectrum-status-light-dot-size-large",
- "--spectrum-status-light-dot-size-medium",
- "--spectrum-status-light-dot-size-small",
- "--spectrum-status-light-text-to-visual-100",
- "--spectrum-status-light-text-to-visual-200",
- "--spectrum-status-light-text-to-visual-300",
- "--spectrum-status-light-text-to-visual-75",
- "--spectrum-status-light-top-to-dot-extra-large",
- "--spectrum-status-light-top-to-dot-large",
- "--spectrum-status-light-top-to-dot-medium",
- "--spectrum-status-light-top-to-dot-small",
- "--spectrum-statuslight-border-width",
- "--spectrum-statuslight-content-color-default",
- "--spectrum-statuslight-corner-radius",
- "--spectrum-statuslight-dot-size",
- "--spectrum-statuslight-font-family",
- "--spectrum-statuslight-font-size",
- "--spectrum-statuslight-font-style",
- "--spectrum-statuslight-font-weight",
- "--spectrum-statuslight-height",
- "--spectrum-statuslight-line-height",
- "--spectrum-statuslight-line-height-cjk",
- "--spectrum-statuslight-nonsemantic-blue-color",
- "--spectrum-statuslight-nonsemantic-brown-color",
- "--spectrum-statuslight-nonsemantic-celery-color",
- "--spectrum-statuslight-nonsemantic-chartreuse-color",
- "--spectrum-statuslight-nonsemantic-cinnamon-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-pink-color",
- "--spectrum-statuslight-nonsemantic-purple-color",
- "--spectrum-statuslight-nonsemantic-red-color",
- "--spectrum-statuslight-nonsemantic-seafoam-color",
- "--spectrum-statuslight-nonsemantic-silver-color",
- "--spectrum-statuslight-nonsemantic-turquoise-color",
- "--spectrum-statuslight-nonsemantic-yellow-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-blue-visual-color",
- "--spectrum-border-width-100",
- "--spectrum-brown-visual-color",
- "--spectrum-celery-visual-color",
- "--spectrum-chartreuse-visual-color",
- "--spectrum-cinnamon-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-corner-radius-full",
- "--spectrum-cyan-visual-color",
- "--spectrum-default-font-style",
- "--spectrum-font-size-100",
- "--spectrum-font-size-200",
- "--spectrum-font-size-300",
- "--spectrum-font-size-75",
- "--spectrum-fuchsia-visual-color",
- "--spectrum-gray-600",
- "--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-pink-visual-color",
- "--spectrum-positive-visual-color",
- "--spectrum-purple-visual-color",
- "--spectrum-red-visual-color",
- "--spectrum-regular-font-weight",
- "--spectrum-sans-font-family-stack",
- "--spectrum-seafoam-visual-color",
- "--spectrum-silver-visual-color",
- "--spectrum-turquoise-visual-color",
- "--spectrum-yellow-visual-color"
- ],
- "passthroughs": [],
- "high-contrast": [
- "--highcontrast-statuslight-content-color-default",
- "--highcontrast-statuslight-subdued-content-color-default"
- ]
+ "modifiers": {
+ "mod-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": {
+ "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": {
+ "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": {
+ "description": "Used by `.spectrum-StatusLight`.
Defaults to `var(--spectrum-statuslight-font-size)`, if not set.",
+ "control": "text",
+ "category": "Modifier"
+ },
+ "mod-statuslight-font-weight": {
+ "description": "Used by `.spectrum-StatusLight`.
Defaults to `var(--spectrum-statuslight-font-weight)`, if not set.",
+ "control": "text",
+ "category": "Modifier"
+ },
+ "mod-statuslight-font-family": {
+ "description": "Used by `.spectrum-StatusLight`.
Defaults to `var(--spectrum-statuslight-font-family)`, if not set.",
+ "control": "text",
+ "category": "Modifier"
+ },
+ "mod-statuslight-font-style": {
+ "description": "Used by `.spectrum-StatusLight`.
Defaults to `var(--spectrum-statuslight-font-style)`, if not set.",
+ "control": "text",
+ "category": "Modifier"
+ },
+ "mod-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": {
+ "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": {
+ "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": {
+ "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": {
+ "description": "Used by `.spectrum-StatusLight:before`.
Defaults to `var(--spectrum-statuslight-dot-size)`, if not set.",
+ "control": "text",
+ "category": "Modifier"
+ },
+ "mod-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": {
+ "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": {
+ "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": {
+ "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-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": {
+ "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": {
+ "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": {
+ "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": {
+ "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": {
+ "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": {
+ "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": {
+ "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": {
+ "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": {
+ "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": {
+ "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": {
+ "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": {
+ "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": {
+ "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": {
+ "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": {
+ "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": {
+ "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": {
+ "description": "Used by `.spectrum-StatusLight--magenta:before`.
Defaults to `var(--spectrum-statuslight-nonsemantic-magenta-color)`, if not set.",
+ "control": "color",
+ "category": "Modifier"
+ },
+ "mod-statuslight-nonsemantic-pink-color": {
+ "description": "Used by `.spectrum-StatusLight--pink:before`.
Defaults to `var(--spectrum-statuslight-nonsemantic-pink-color)`, if not set.",
+ "control": "color",
+ "category": "Modifier"
+ },
+ "mod-statuslight-nonsemantic-turquoise-color": {
+ "description": "Used by `.spectrum-StatusLight--turquoise:before`.
Defaults to `var(--spectrum-statuslight-nonsemantic-turquoise-color)`, if not set.",
+ "control": "color",
+ "category": "Modifier"
+ },
+ "mod-statuslight-nonsemantic-cinnamon-color": {
+ "description": "Used by `.spectrum-StatusLight--cinnamon:before`.
Defaults to `var(--spectrum-statuslight-nonsemantic-cinnamon-color)`, if not set.",
+ "control": "color",
+ "category": "Modifier"
+ },
+ "mod-statuslight-nonsemantic-brown-color": {
+ "description": "Used by `.spectrum-StatusLight--brown:before`.
Defaults to `var(--spectrum-statuslight-nonsemantic-brown-color)`, if not set.",
+ "control": "color",
+ "category": "Modifier"
+ },
+ "mod-statuslight-nonsemantic-silver-color": {
+ "description": "Used by `.spectrum-StatusLight--silver:before`.
Defaults to `var(--spectrum-statuslight-nonsemantic-silver-color)`, if not set.",
+ "control": "color",
+ "category": "Modifier"
+ },
+ "mod-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-corner-radius": {
+ "value": "50%",
+ "description": "Defined in `.spectrum-StatusLight`.
Used by `.spectrum-StatusLight:before`.
Defaults to `50%`, if not set.",
+ "control": "text",
+ "category": "Component"
+ },
+ "spectrum-statuslight-height": {
+ "value": "48px",
+ "description": "Defined in `.spectrum-StatusLight`, `.spectrum-StatusLight--sizeS`, `.spectrum-StatusLight--sizeL`, `.spectrum-StatusLight--sizeXL`.
Used by `.spectrum-StatusLight`.
Defaults to `var(--spectrum-component-height-300)`, if not set.",
+ "control": "text",
+ "category": "Component"
+ },
+ "spectrum-statuslight-dot-size": {
+ "value": "14px",
+ "description": "Defined in `.spectrum-StatusLight`, `.spectrum-StatusLight--sizeS`, `.spectrum-StatusLight--sizeL`, `.spectrum-StatusLight--sizeXL`.
Used by `.spectrum-StatusLight:before`.
Defaults to `var(--spectrum-status-light-dot-size-extra-large)`, if not set.",
+ "control": "text",
+ "category": "Component"
+ },
+ "spectrum-status-light-dot-size-medium": {
+ "value": "10px",
+ "description": "Used by `--spectrum-statuslight-dot-size`.",
+ "control": "text",
+ "category": "Component"
+ },
+ "spectrum-statuslight-font-family": {
+ "value": "var(--spectrum-sans-font-family-stack)",
+ "description": "Defined in `.spectrum-StatusLight`.
Used by `.spectrum-StatusLight`.
Defaults to `var(--spectrum-sans-font-family-stack)`, if not set.",
+ "control": "text",
+ "category": "Component"
+ },
+ "spectrum-statuslight-font-weight": {
+ "value": "400",
+ "description": "Defined in `.spectrum-StatusLight`.
Used by `.spectrum-StatusLight`.
Defaults to `400`, if not set.",
+ "control": "text",
+ "category": "Component"
+ },
+ "spectrum-statuslight-font-style": {
+ "value": "normal",
+ "description": "Defined in `.spectrum-StatusLight`.
Used by `.spectrum-StatusLight`.
Defaults to `var(--spectrum-default-font-style)`, if not set.",
+ "control": "text",
+ "category": "Component"
+ },
+ "spectrum-statuslight-font-size": {
+ "value": "18px",
+ "description": "Defined in `.spectrum-StatusLight`, `.spectrum-StatusLight--sizeS`, `.spectrum-StatusLight--sizeL`, `.spectrum-StatusLight--sizeXL`.
Used by `.spectrum-StatusLight`.
Defaults to `var(--spectrum-font-size-300)`, if not set.",
+ "control": "text",
+ "category": "Component"
+ },
+ "spectrum-statuslight-spacing-dot-to-label": {
+ "value": "var(--spectrum-text-to-visual-300)",
+ "description": "Defined in `.spectrum-StatusLight`, `.spectrum-StatusLight--sizeS`, `.spectrum-StatusLight--sizeL`, `.spectrum-StatusLight--sizeXL`.
Used by `.spectrum-StatusLight:before`.
Defaults to `var(--spectrum-status-light-text-to-visual-300)`, if not set.",
+ "control": "text",
+ "category": "Component"
+ },
+ "spectrum-status-light-text-to-visual-100": {
+ "value": "var(--spectrum-text-to-visual-100)",
+ "description": "Used by `--spectrum-statuslight-spacing-dot-to-label`.",
+ "control": "text",
+ "category": "Component"
+ },
+ "spectrum-statuslight-spacing-top-to-dot": {
+ "value": "17px",
+ "description": "Defined in `.spectrum-StatusLight`, `.spectrum-StatusLight--sizeS`, `.spectrum-StatusLight--sizeL`, `.spectrum-StatusLight--sizeXL`.
Used by `--spectrum-statuslight-spacing-computed-top-to-dot`.
Defaults to `var(--spectrum-status-light-top-to-dot-extra-large)`, if not set.",
+ "control": "text",
+ "category": "Component"
+ },
+ "spectrum-status-light-top-to-dot-medium": {
+ "value": "11px",
+ "description": "Used by `--spectrum-statuslight-spacing-top-to-dot`.",
+ "control": "text",
+ "category": "Component"
+ },
+ "spectrum-statuslight-spacing-top-to-label": {
+ "value": "12px",
+ "description": "Defined in `.spectrum-StatusLight`, `.spectrum-StatusLight--sizeS`, `.spectrum-StatusLight--sizeL`, `.spectrum-StatusLight--sizeXL`.
Used by `.spectrum-StatusLight`, `--spectrum-statuslight-spacing-computed-top-to-dot`.
Defaults to `var(--spectrum-component-top-to-text-300)`, if not set.",
+ "control": "text",
+ "category": "Component"
+ },
+ "spectrum-statuslight-spacing-bottom-to-label": {
+ "value": "14px",
+ "description": "Defined in `.spectrum-StatusLight`, `.spectrum-StatusLight--sizeS`, `.spectrum-StatusLight--sizeL`, `.spectrum-StatusLight--sizeXL`.
Used by `.spectrum-StatusLight`.
Defaults to `var(--spectrum-component-bottom-to-text-300)`, if not set.",
+ "control": "text",
+ "category": "Component"
+ },
+ "spectrum-statuslight-subdued-content-color-default": {
+ "value": "var(--spectrum-gray-700)",
+ "description": "Defined in `.spectrum-StatusLight`.
Used by `.spectrum-StatusLight--neutral`.
Defaults to `var(--spectrum-neutral-subdued-content-color-default)`, if not set.",
+ "control": "color",
+ "category": "Component"
+ },
+ "spectrum-statuslight-nonsemantic-pink-color": {
+ "value": "var(--spectrum-pink-800)",
+ "description": "Defined in `.spectrum-StatusLight`.
Used by `.spectrum-StatusLight--pink:before`.
Defaults to `var(--spectrum-pink-visual-color)`, if not set.",
+ "control": "color",
+ "category": "Component"
+ },
+ "spectrum-statuslight-nonsemantic-turquoise-color": {
+ "value": "var(--spectrum-turquoise-800)",
+ "description": "Defined in `.spectrum-StatusLight`.
Used by `.spectrum-StatusLight--turquoise:before`.
Defaults to `var(--spectrum-turquoise-visual-color)`, if not set.",
+ "control": "color",
+ "category": "Component"
+ },
+ "spectrum-statuslight-nonsemantic-cinnamon-color": {
+ "value": "var(--spectrum-cinnamon-800)",
+ "description": "Defined in `.spectrum-StatusLight`.
Used by `.spectrum-StatusLight--cinnamon:before`.
Defaults to `var(--spectrum-cinnamon-visual-color)`, if not set.",
+ "control": "color",
+ "category": "Component"
+ },
+ "spectrum-statuslight-nonsemantic-brown-color": {
+ "value": "var(--spectrum-brown-800)",
+ "description": "Defined in `.spectrum-StatusLight`.
Used by `.spectrum-StatusLight--brown:before`.
Defaults to `var(--spectrum-brown-visual-color)`, if not set.",
+ "control": "color",
+ "category": "Component"
+ },
+ "spectrum-statuslight-nonsemantic-silver-color": {
+ "value": "var(--spectrum-silver-800)",
+ "description": "Defined in `.spectrum-StatusLight`.
Used by `.spectrum-StatusLight--silver:before`.
Defaults to `var(--spectrum-silver-visual-color)`, if not set.",
+ "control": "color",
+ "category": "Component"
+ },
+ "spectrum-status-light-dot-size-small": {
+ "value": "8px",
+ "description": "Used by `--spectrum-statuslight-dot-size`.",
+ "control": "text",
+ "category": "Component"
+ },
+ "spectrum-status-light-text-to-visual-75": {
+ "value": "var(--spectrum-text-to-visual-75)",
+ "description": "Used by `--spectrum-statuslight-spacing-dot-to-label`.",
+ "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": "12px",
+ "description": "Used by `--spectrum-statuslight-dot-size`.",
+ "control": "text",
+ "category": "Component"
+ },
+ "spectrum-status-light-text-to-visual-200": {
+ "value": "var(--spectrum-text-to-visual-200)",
+ "description": "Used by `--spectrum-statuslight-spacing-dot-to-label`.",
+ "control": "text",
+ "category": "Component"
+ },
+ "spectrum-status-light-top-to-dot-large": {
+ "value": "14px",
+ "description": "Used by `--spectrum-statuslight-spacing-top-to-dot`.",
+ "control": "text",
+ "category": "Component"
+ },
+ "spectrum-status-light-dot-size-extra-large": {
+ "value": "14px",
+ "description": "Used by `--spectrum-statuslight-dot-size`.",
+ "control": "text",
+ "category": "Component"
+ },
+ "spectrum-status-light-text-to-visual-300": {
+ "value": "var(--spectrum-text-to-visual-300)",
+ "description": "Used by `--spectrum-statuslight-spacing-dot-to-label`.",
+ "control": "text",
+ "category": "Component"
+ },
+ "spectrum-status-light-top-to-dot-extra-large": {
+ "value": "17px",
+ "description": "Used by `--spectrum-statuslight-spacing-top-to-dot`.",
+ "control": "text",
+ "category": "Component"
+ },
+ "spectrum-statuslight-border-width": {
+ "value": "1px",
+ "description": "Defined in `.spectrum-StatusLight`.
Used by `.spectrum-StatusLight:before`.
Defaults to `var(--spectrum-border-width-100)`, if not set.",
+ "control": "text",
+ "category": "Component"
+ },
+ "spectrum-statuslight-line-height": {
+ "value": "1.3",
+ "description": "Defined in `.spectrum-StatusLight`.
Used by `.spectrum-StatusLight`.
Defaults to `var(--spectrum-line-height-100)`, if not set.",
+ "control": "text",
+ "category": "Component"
+ },
+ "spectrum-statuslight-line-height-cjk": {
+ "value": "1.5",
+ "description": "Defined in `.spectrum-StatusLight`.
Used by `.spectrum-StatusLight:lang(ja), .spectrum-StatusLight:lang(ko), .spectrum-StatusLight:lang(zh)`.
Defaults to `var(--spectrum-cjk-line-height-100)`, if not set.",
+ "control": "text",
+ "category": "Component"
+ },
+ "spectrum-statuslight-content-color-default": {
+ "value": "var(--spectrum-gray-800)",
+ "description": "Defined in `.spectrum-StatusLight`.
Used by `.spectrum-StatusLight`.
Defaults to `var(--spectrum-neutral-content-color-default)`, if not set.",
+ "control": "color",
+ "category": "Component"
+ },
+ "spectrum-statuslight-semantic-neutral-color": {
+ "value": "var(--spectrum-gray-500)",
+ "description": "Defined in `.spectrum-StatusLight`.
Used by `.spectrum-StatusLight--neutral:before`.
Defaults to `var(--spectrum-neutral-visual-color)`, if not set.",
+ "control": "color",
+ "category": "Component"
+ },
+ "spectrum-statuslight-semantic-negative-color": {
+ "value": "var(--spectrum-negative-color-800)",
+ "description": "Defined in `.spectrum-StatusLight`.
Used by `.spectrum-StatusLight--negative:before`.
Defaults to `var(--spectrum-negative-visual-color)`, if not set.",
+ "control": "color",
+ "category": "Component"
+ },
+ "spectrum-statuslight-semantic-info-color": {
+ "value": "var(--spectrum-informative-color-800)",
+ "description": "Defined in `.spectrum-StatusLight`.
Used by `.spectrum-StatusLight--info:before`.
Defaults to `var(--spectrum-informative-visual-color)`, if not set.",
+ "control": "color",
+ "category": "Component"
+ },
+ "spectrum-statuslight-semantic-notice-color": {
+ "value": "var(--spectrum-notice-color-800)",
+ "description": "Defined in `.spectrum-StatusLight`.
Used by `.spectrum-StatusLight--notice:before`.
Defaults to `var(--spectrum-notice-visual-color)`, if not set.",
+ "control": "color",
+ "category": "Component"
+ },
+ "spectrum-statuslight-semantic-positive-color": {
+ "value": "var(--spectrum-positive-color-800)",
+ "description": "Defined in `.spectrum-StatusLight`.
Used by `.spectrum-StatusLight--positive:before`.
Defaults to `var(--spectrum-positive-visual-color)`, if not set.",
+ "control": "color",
+ "category": "Component"
+ },
+ "spectrum-statuslight-nonsemantic-gray-color": {
+ "value": "var(--spectrum-gray-500)",
+ "description": "Defined in `.spectrum-StatusLight`.
Used by `.spectrum-StatusLight--gray:before`.
Defaults to `var(--spectrum-gray-visual-color)`, if not set.",
+ "control": "color",
+ "category": "Component"
+ },
+ "spectrum-statuslight-nonsemantic-red-color": {
+ "value": "var(--spectrum-red-800)",
+ "description": "Defined in `.spectrum-StatusLight`.
Used by `.spectrum-StatusLight--red:before`.
Defaults to `var(--spectrum-red-visual-color)`, if not set.",
+ "control": "color",
+ "category": "Component"
+ },
+ "spectrum-statuslight-nonsemantic-orange-color": {
+ "value": "var(--spectrum-orange-700)",
+ "description": "Defined in `.spectrum-StatusLight`.
Used by `.spectrum-StatusLight--orange:before`.
Defaults to `var(--spectrum-orange-visual-color)`, if not set.",
+ "control": "color",
+ "category": "Component"
+ },
+ "spectrum-statuslight-nonsemantic-yellow-color": {
+ "value": "var(--spectrum-yellow-600)",
+ "description": "Defined in `.spectrum-StatusLight`.
Used by `.spectrum-StatusLight--yellow:before`.
Defaults to `var(--spectrum-yellow-visual-color)`, if not set.",
+ "control": "color",
+ "category": "Component"
+ },
+ "spectrum-statuslight-nonsemantic-chartreuse-color": {
+ "value": "var(--spectrum-chartreuse-600)",
+ "description": "Defined in `.spectrum-StatusLight`.
Used by `.spectrum-StatusLight--chartreuse:before`.
Defaults to `var(--spectrum-chartreuse-visual-color)`, if not set.",
+ "control": "color",
+ "category": "Component"
+ },
+ "spectrum-statuslight-nonsemantic-celery-color": {
+ "value": "var(--spectrum-celery-700)",
+ "description": "Defined in `.spectrum-StatusLight`.
Used by `.spectrum-StatusLight--celery:before`.
Defaults to `var(--spectrum-celery-visual-color)`, if not set.",
+ "control": "color",
+ "category": "Component"
+ },
+ "spectrum-statuslight-nonsemantic-green-color": {
+ "value": "var(--spectrum-green-700)",
+ "description": "Defined in `.spectrum-StatusLight`.
Used by `.spectrum-StatusLight--green:before`.
Defaults to `var(--spectrum-green-visual-color)`, if not set.",
+ "control": "color",
+ "category": "Component"
+ },
+ "spectrum-statuslight-nonsemantic-seafoam-color": {
+ "value": "var(--spectrum-seafoam-700)",
+ "description": "Defined in `.spectrum-StatusLight`.
Used by `.spectrum-StatusLight--seafoam:before`.
Defaults to `var(--spectrum-seafoam-visual-color)`, if not set.",
+ "control": "color",
+ "category": "Component"
+ },
+ "spectrum-statuslight-nonsemantic-cyan-color": {
+ "value": "var(--spectrum-cyan-600)",
+ "description": "Defined in `.spectrum-StatusLight`.
Used by `.spectrum-StatusLight--cyan:before`.
Defaults to `var(--spectrum-cyan-visual-color)`, if not set.",
+ "control": "color",
+ "category": "Component"
+ },
+ "spectrum-statuslight-nonsemantic-blue-color": {
+ "value": "var(--spectrum-blue-800)",
+ "description": "Defined in `.spectrum-StatusLight`.
Used by `.spectrum-StatusLight--blue:before`.
Defaults to `var(--spectrum-blue-visual-color)`, if not set.",
+ "control": "color",
+ "category": "Component"
+ },
+ "spectrum-statuslight-nonsemantic-indigo-color": {
+ "value": "var(--spectrum-indigo-800)",
+ "description": "Defined in `.spectrum-StatusLight`.
Used by `.spectrum-StatusLight--indigo:before`.
Defaults to `var(--spectrum-indigo-visual-color)`, if not set.",
+ "control": "color",
+ "category": "Component"
+ },
+ "spectrum-statuslight-nonsemantic-purple-color": {
+ "value": "var(--spectrum-purple-800)",
+ "description": "Defined in `.spectrum-StatusLight`.
Used by `.spectrum-StatusLight--purple:before`.
Defaults to `var(--spectrum-purple-visual-color)`, if not set.",
+ "control": "color",
+ "category": "Component"
+ },
+ "spectrum-statuslight-nonsemantic-fuchsia-color": {
+ "value": "var(--spectrum-fuchsia-800)",
+ "description": "Defined in `.spectrum-StatusLight`.
Used by `.spectrum-StatusLight--fuchsia:before`.
Defaults to `var(--spectrum-fuchsia-visual-color)`, if not set.",
+ "control": "color",
+ "category": "Component"
+ },
+ "spectrum-statuslight-nonsemantic-magenta-color": {
+ "value": "var(--spectrum-magenta-800)",
+ "description": "Defined in `.spectrum-StatusLight`.
Used by `.spectrum-StatusLight--magenta:before`.
Defaults to `var(--spectrum-magenta-visual-color)`, if not set.",
+ "control": "color",
+ "category": "Component"
+ },
+ "spectrum-statuslight-spacing-computed-top-to-dot": {
+ "value": "calc(var(--mod-statuslight-spacing-top-to-dot, var(--spectrum-statuslight-spacing-top-to-dot)) - var(--mod-statuslight-spacing-top-to-label, var(--spectrum-statuslight-spacing-top-to-label)))",
+ "description": "Defined in `.spectrum-StatusLight:before`.
Used by `.spectrum-StatusLight:before`.
Defaults to `calc(var(--mod-statuslight-spacing-top-to-dot, var(--spectrum-statuslight-spacing-top-to-dot)) - var(--mod-statuslight-spacing-top-to-label, var(--spectrum-statuslight-spacing-top-to-label)))`, if not set.",
+ "control": "text",
+ "category": "Component"
+ }
+ },
+ "global": {
+ "spectrum-corner-radius-full": {
+ "value": "9999px",
+ "description": "Used by `--spectrum-statuslight-corner-radius`.",
+ "control": "text",
+ "category": "Global"
+ },
+ "spectrum-component-height-100": {
+ "value": "32px",
+ "description": "Used by `--spectrum-statuslight-height`.",
+ "control": "text",
+ "category": "Global"
+ },
+ "spectrum-sans-font-family-stack": {
+ "description": "Used by `--spectrum-statuslight-font-family`.",
+ "control": "text",
+ "category": "Global"
+ },
+ "spectrum-regular-font-weight": {
+ "value": "400",
+ "description": "Used by `--spectrum-statuslight-font-weight`.",
+ "control": "text",
+ "category": "Global"
+ },
+ "spectrum-default-font-style": {
+ "value": "normal",
+ "description": "Used by `--spectrum-statuslight-font-style`.",
+ "control": "text",
+ "category": "Global"
+ },
+ "spectrum-font-size-100": {
+ "value": "14px",
+ "description": "Used by `--spectrum-statuslight-font-size`.",
+ "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-gray-600": {
+ "value": "light-dark(rgb(113, 113, 113), rgb(138, 138, 138))",
+ "description": "Used by `--spectrum-statuslight-subdued-content-color-default`.",
+ "control": "text",
+ "category": "Global"
+ },
+ "spectrum-pink-visual-color": {
+ "value": "var(--spectrum-pink-800)",
+ "description": "Used by `--spectrum-statuslight-nonsemantic-pink-color`.",
+ "control": "color",
+ "category": "Global"
+ },
+ "spectrum-turquoise-visual-color": {
+ "value": "var(--spectrum-turquoise-800)",
+ "description": "Used by `--spectrum-statuslight-nonsemantic-turquoise-color`.",
+ "control": "color",
+ "category": "Global"
+ },
+ "spectrum-cinnamon-visual-color": {
+ "value": "var(--spectrum-cinnamon-800)",
+ "description": "Used by `--spectrum-statuslight-nonsemantic-cinnamon-color`.",
+ "control": "color",
+ "category": "Global"
+ },
+ "spectrum-brown-visual-color": {
+ "value": "var(--spectrum-brown-800)",
+ "description": "Used by `--spectrum-statuslight-nonsemantic-brown-color`.",
+ "control": "color",
+ "category": "Global"
+ },
+ "spectrum-silver-visual-color": {
+ "value": "var(--spectrum-silver-800)",
+ "description": "Used by `--spectrum-statuslight-nonsemantic-silver-color`.",
+ "control": "color",
+ "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-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-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-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-500)",
+ "description": "Used by `--spectrum-statuslight-semantic-neutral-color`.",
+ "control": "color",
+ "category": "Global"
+ },
+ "spectrum-negative-visual-color": {
+ "value": "var(--spectrum-negative-color-800)",
+ "description": "Used by `--spectrum-statuslight-semantic-negative-color`.",
+ "control": "color",
+ "category": "Global"
+ },
+ "spectrum-informative-visual-color": {
+ "value": "var(--spectrum-informative-color-800)",
+ "description": "Used by `--spectrum-statuslight-semantic-info-color`.",
+ "control": "color",
+ "category": "Global"
+ },
+ "spectrum-notice-visual-color": {
+ "value": "var(--spectrum-notice-color-800)",
+ "description": "Used by `--spectrum-statuslight-semantic-notice-color`.",
+ "control": "color",
+ "category": "Global"
+ },
+ "spectrum-positive-visual-color": {
+ "value": "var(--spectrum-positive-color-800)",
+ "description": "Used by `--spectrum-statuslight-semantic-positive-color`.",
+ "control": "color",
+ "category": "Global"
+ },
+ "spectrum-gray-visual-color": {
+ "value": "var(--spectrum-gray-500)",
+ "description": "Used by `--spectrum-statuslight-nonsemantic-gray-color`.",
+ "control": "color",
+ "category": "Global"
+ },
+ "spectrum-red-visual-color": {
+ "value": "var(--spectrum-red-800)",
+ "description": "Used by `--spectrum-statuslight-nonsemantic-red-color`.",
+ "control": "color",
+ "category": "Global"
+ },
+ "spectrum-orange-visual-color": {
+ "value": "var(--spectrum-orange-700)",
+ "description": "Used by `--spectrum-statuslight-nonsemantic-orange-color`.",
+ "control": "color",
+ "category": "Global"
+ },
+ "spectrum-yellow-visual-color": {
+ "value": "var(--spectrum-yellow-600)",
+ "description": "Used by `--spectrum-statuslight-nonsemantic-yellow-color`.",
+ "control": "color",
+ "category": "Global"
+ },
+ "spectrum-chartreuse-visual-color": {
+ "value": "var(--spectrum-chartreuse-600)",
+ "description": "Used by `--spectrum-statuslight-nonsemantic-chartreuse-color`.",
+ "control": "color",
+ "category": "Global"
+ },
+ "spectrum-celery-visual-color": {
+ "value": "var(--spectrum-celery-700)",
+ "description": "Used by `--spectrum-statuslight-nonsemantic-celery-color`.",
+ "control": "color",
+ "category": "Global"
+ },
+ "spectrum-green-visual-color": {
+ "value": "var(--spectrum-green-700)",
+ "description": "Used by `--spectrum-statuslight-nonsemantic-green-color`.",
+ "control": "color",
+ "category": "Global"
+ },
+ "spectrum-seafoam-visual-color": {
+ "value": "var(--spectrum-seafoam-700)",
+ "description": "Used by `--spectrum-statuslight-nonsemantic-seafoam-color`.",
+ "control": "color",
+ "category": "Global"
+ },
+ "spectrum-cyan-visual-color": {
+ "value": "var(--spectrum-cyan-600)",
+ "description": "Used by `--spectrum-statuslight-nonsemantic-cyan-color`.",
+ "control": "color",
+ "category": "Global"
+ },
+ "spectrum-blue-visual-color": {
+ "value": "var(--spectrum-blue-800)",
+ "description": "Used by `--spectrum-statuslight-nonsemantic-blue-color`.",
+ "control": "color",
+ "category": "Global"
+ },
+ "spectrum-indigo-visual-color": {
+ "value": "var(--spectrum-indigo-800)",
+ "description": "Used by `--spectrum-statuslight-nonsemantic-indigo-color`.",
+ "control": "color",
+ "category": "Global"
+ },
+ "spectrum-purple-visual-color": {
+ "value": "var(--spectrum-purple-800)",
+ "description": "Used by `--spectrum-statuslight-nonsemantic-purple-color`.",
+ "control": "color",
+ "category": "Global"
+ },
+ "spectrum-fuchsia-visual-color": {
+ "value": "var(--spectrum-fuchsia-800)",
+ "description": "Used by `--spectrum-statuslight-nonsemantic-fuchsia-color`.",
+ "control": "color",
+ "category": "Global"
+ },
+ "spectrum-magenta-visual-color": {
+ "value": "var(--spectrum-magenta-800)",
+ "description": "Used by `--spectrum-statuslight-nonsemantic-magenta-color`.",
+ "control": "color",
+ "category": "Global"
+ }
+ },
+ "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 cec593c5216..a8dd5c72264 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.
*/
@@ -75,9 +77,7 @@ export default {
},
packageJson,
metadata,
- status: {
- type: "migrated",
- },
+ cssprops: metadata.modifiers,
},
tags: ["migrated"],
};
diff --git a/components/steplist/dist/metadata.json b/components/steplist/dist/metadata.json
index 27faf429c11..5abea316511 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,62 +27,264 @@
".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",
".spectrum-Steplist-markerContainer",
".spectrum-Steplist-segment"
],
- "modifiers": [
- "--mod-steplist-complete-label-text-color",
- "--mod-steplist-complete-marker-background-color",
- "--mod-steplist-complete-segment-border-block-end-color",
- "--mod-steplist-current-label-text-color",
- "--mod-steplist-current-marker-color",
- "--mod-steplist-current-marker-color-key-focus",
- "--mod-steplist-incomplete-label-color",
- "--mod-steplist-incomplete-marker-border-color",
- "--mod-steplist-incomplete-segment-border-block-end-color",
- "--mod-steplist-label-labelOffset",
- "--mod-steplist-label-text-size",
- "--mod-steplist-marker-diameter",
- "--mod-steplist-marker-hitArea",
- "--mod-steplist-segment-height",
- "--mod-steplist-sidePadding",
- "--mod-steplist-small-topPadding",
- "--mod-steplist-step-width",
- "--mod-steplist-topPadding"
- ],
- "component": [
- "--spectrum-steplist-complete-label-text-color",
- "--spectrum-steplist-complete-marker-background-color",
- "--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"
- ],
- "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": {
+ "description": "Used by `.spectrum-Steplist`.
Defaults to `var(--spectrum-steplist-topPadding)`, if not set.",
+ "control": "text",
+ "category": "Modifier"
+ },
+ "mod-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": {
+ "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": {
+ "description": "Used by `.spectrum-Steplist--small`.
Defaults to `var(--spectrum-steplist-small-topPadding)`, if not set.",
+ "control": "text",
+ "category": "Modifier"
+ },
+ "mod-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": {
+ "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": {
+ "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": {
+ "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": {
+ "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": {
+ "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": {
+ "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": {
+ "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": {
+ "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": {
+ "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": {
+ "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": {
+ "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": {
+ "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": {
+ "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-incomplete-marker-border-color": {
+ "value": "light-dark(rgb(225, 225, 225), rgb(50, 50, 50))",
+ "description": "Defined in `.spectrum-Steplist`.
Used by `.spectrum-Steplist-marker`.
Defaults to `var(--spectrum-gray-200)`, if not set.",
+ "control": "color",
+ "category": "Component"
+ },
+ "spectrum-steplist-incomplete-segment-border-block-end-color": {
+ "value": "light-dark(rgb(225, 225, 225), rgb(50, 50, 50))",
+ "description": "Defined in `.spectrum-Steplist`.
Used by `.spectrum-Steplist-segment`.
Defaults to `var(--spectrum-gray-200)`, if not set.",
+ "control": "color",
+ "category": "Component"
+ },
+ "spectrum-steplist-step-width": {
+ "value": "80px",
+ "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`.
Defaults to `80px`, if not set.",
+ "control": "text",
+ "category": "Component"
+ },
+ "spectrum-steplist-marker-diameter": {
+ "value": "8px",
+ "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`.
Defaults to `8px`, if not set.",
+ "control": "text",
+ "category": "Component"
+ },
+ "spectrum-steplist-marker-hitArea": {
+ "value": "20px",
+ "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`.
Defaults to `20px`, if not set.",
+ "control": "text",
+ "category": "Component"
+ },
+ "spectrum-steplist-segment-height": {
+ "value": "2px",
+ "description": "Defined in `.spectrum-Steplist`.
Used by `.spectrum-Steplist-item.is-complete + .spectrum-Steplist-item .spectrum-Steplist-segment`, `.spectrum-Steplist-segment`.
Defaults to `2px`, if not set.",
+ "control": "text",
+ "category": "Component"
+ },
+ "spectrum-steplist-topPadding": {
+ "value": "22px",
+ "description": "Defined in `.spectrum-Steplist`.
Used by `.spectrum-Steplist`.
Defaults to `22px`, if not set.",
+ "control": "text",
+ "category": "Component"
+ },
+ "spectrum-steplist-small-topPadding": {
+ "value": "11px",
+ "description": "Defined in `.spectrum-Steplist`.
Used by `.spectrum-Steplist--small`.
Defaults to `11px`, if not set.",
+ "control": "text",
+ "category": "Component"
+ },
+ "spectrum-steplist-sidePadding": {
+ "value": "60px",
+ "description": "Defined in `.spectrum-Steplist`.
Used by `.spectrum-Steplist`.
Defaults to `60px`, if not set.",
+ "control": "text",
+ "category": "Component"
+ },
+ "spectrum-steplist-label-labelOffset": {
+ "value": "10px",
+ "description": "Defined in `.spectrum-Steplist`.
Used by `.spectrum-Steplist-label`.
Defaults to `10px`, if not set.",
+ "control": "text",
+ "category": "Component"
+ },
+ "spectrum-steplist-label-text-size": {
+ "value": "12px",
+ "description": "Defined in `.spectrum-Steplist`.
Used by `.spectrum-Steplist-label`.
Defaults to `12px`, if not set.",
+ "control": "text",
+ "category": "Component"
+ },
+ "spectrum-steplist-current-label-text-color": {
+ "value": "light-dark(rgb(41, 41, 41), rgb(219, 219, 219))",
+ "description": "Defined in `.spectrum-Steplist`.
Used by `.spectrum-Steplist-item.is-selected .spectrum-Steplist-label`.
Defaults to `var(--spectrum-gray-800)`, if not set.",
+ "control": "color",
+ "category": "Component"
+ },
+ "spectrum-steplist-current-marker-color": {
+ "value": "light-dark(rgb(41, 41, 41), rgb(219, 219, 219))",
+ "description": "Defined in `.spectrum-Steplist`.
Used by `.spectrum-Steplist-item.is-selected .spectrum-Steplist-marker`.
Defaults to `var(--spectrum-gray-800)`, if not set.",
+ "control": "color",
+ "category": "Component"
+ },
+ "spectrum-steplist-complete-label-text-color": {
+ "value": "light-dark(rgb(80, 80, 80), rgb(175, 175, 175))",
+ "description": "Defined in `.spectrum-Steplist`.
Used by `.spectrum-Steplist-item.is-complete .spectrum-Steplist-label`.
Defaults to `var(--spectrum-gray-700)`, if not set.",
+ "control": "color",
+ "category": "Component"
+ },
+ "spectrum-steplist-complete-marker-background-color": {
+ "value": "light-dark(rgb(113, 113, 113), rgb(138, 138, 138))",
+ "description": "Defined in `.spectrum-Steplist`.
Used by `.spectrum-Steplist-item.is-complete .spectrum-Steplist-marker`.
Defaults to `var(--spectrum-gray-600)`, if not set.",
+ "control": "color",
+ "category": "Component"
+ },
+ "spectrum-steplist-complete-segment-border-block-end-color": {
+ "value": "light-dark(rgb(113, 113, 113), rgb(138, 138, 138))",
+ "description": "Defined in `.spectrum-Steplist`.
Used by `.spectrum-Steplist-item.is-complete .spectrum-Steplist-segment, .spectrum-Steplist-item.is-selected .spectrum-Steplist-segment`.
Defaults to `var(--spectrum-gray-600)`, if not set.",
+ "control": "color",
+ "category": "Component"
+ },
+ "spectrum-steplist-incomplete-label-color": {
+ "value": "light-dark(rgb(113, 113, 113), rgb(138, 138, 138))",
+ "description": "Defined in `.spectrum-Steplist`.
Used by `.spectrum-Steplist-label`.
Defaults to `var(--spectrum-gray-600)`, if not set.",
+ "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"
+ }
+ },
+ "global": {
+ "spectrum-gray-200": {
+ "value": "light-dark(rgb(225, 225, 225), rgb(50, 50, 50))",
+ "description": "Used by `--spectrum-steplist-incomplete-marker-border-color`, `--spectrum-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"
+ }
+ },
+ "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..c426ab7f168 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,10 @@ export default {
parameters: {
packageJson,
metadata,
+ cssprops: {
+ ...metadata.modifiers,
+ ...metadata.component,
+ },
},
};
diff --git a/components/stepper/dist/metadata.json b/components/stepper/dist/metadata.json
index a8b7ec49b01..d5cb9e9cc86 100644
--- a/components/stepper/dist/metadata.json
+++ b/components/stepper/dist/metadata.json
@@ -11,271 +11,1183 @@
".spectrum-NumberField-inputs .spectrum-Textfield.is-invalid .spectrum-NumberField-input",
".spectrum-NumberField-textfield",
".spectrum-NumberField-textfield.spectrum-Textfield.is-invalid .spectrum-Textfield-validationIcon",
+ ".spectrum-NumberField:before",
+ ".spectrum-NumberField:focus-visible .spectrum-NumberField-inputs",
+ ".spectrum-NumberField:lang(ja)",
+ ".spectrum-NumberField:lang(ko)",
+ ".spectrum-NumberField:lang(zh)",
+ ".spectrum-NumberField:not(.is-disabled, .is-readOnly):focus",
+ ".spectrum-NumberField:not(.is-disabled, .is-readOnly):focus-visible",
+ ".spectrum-NumberField:not(.is-disabled, .is-readOnly):focus-visible:hover",
+ ".spectrum-NumberField:not(.is-disabled, .is-readOnly):focus-within",
+ ".spectrum-NumberField:not(.is-disabled, .is-readOnly):focus-within:hover",
+ ".spectrum-NumberField:not(.is-disabled, .is-readOnly):focus:hover",
+ ".spectrum-NumberField:not(.is-disabled, .is-readOnly):hover",
+ ".spectrum-NumberField:not(.is-disabled):focus",
+ ".spectrum-NumberField:not(.is-disabled):focus-visible",
+ ".spectrum-NumberField:not(.is-disabled):focus-visible:hover",
+ ".spectrum-NumberField:not(.is-disabled):focus-within",
+ ".spectrum-NumberField:not(.is-disabled):focus-within:hover",
+ ".spectrum-NumberField:not(.is-disabled):focus:hover",
+ ".spectrum-NumberField:not(.is-disabled):hover",
".spectrum-NumberField.is-disabled",
- ".spectrum-NumberField.is-focused.is-hover:not(.is-disabled)",
- ".spectrum-NumberField.is-focused.is-hover:not(.is-disabled, .is-readOnly)",
- ".spectrum-NumberField.is-focused:not(.is-disabled)",
- ".spectrum-NumberField.is-focused:not(.is-disabled):hover",
".spectrum-NumberField.is-focused:not(.is-disabled, .is-readOnly)",
".spectrum-NumberField.is-focused:not(.is-disabled, .is-readOnly):hover",
- ".spectrum-NumberField.is-hover:not(.is-disabled)",
- ".spectrum-NumberField.is-hover:not(.is-disabled):focus",
- ".spectrum-NumberField.is-hover:not(.is-disabled):focus-visible",
- ".spectrum-NumberField.is-hover:not(.is-disabled):focus-within",
+ ".spectrum-NumberField.is-focused:not(.is-disabled)",
+ ".spectrum-NumberField.is-focused:not(.is-disabled):hover",
+ ".spectrum-NumberField.is-focused.is-hover:not(.is-disabled, .is-readOnly)",
+ ".spectrum-NumberField.is-focused.is-hover:not(.is-disabled)",
".spectrum-NumberField.is-hover:not(.is-disabled, .is-readOnly)",
".spectrum-NumberField.is-hover:not(.is-disabled, .is-readOnly):focus",
".spectrum-NumberField.is-hover:not(.is-disabled, .is-readOnly):focus-visible",
".spectrum-NumberField.is-hover:not(.is-disabled, .is-readOnly):focus-within",
+ ".spectrum-NumberField.is-hover:not(.is-disabled)",
+ ".spectrum-NumberField.is-hover:not(.is-disabled):focus",
+ ".spectrum-NumberField.is-hover:not(.is-disabled):focus-visible",
+ ".spectrum-NumberField.is-hover:not(.is-disabled):focus-within",
".spectrum-NumberField.is-invalid",
- ".spectrum-NumberField.is-keyboardFocused.is-hover:not(.is-disabled)",
- ".spectrum-NumberField.is-keyboardFocused.is-hover:not(.is-disabled, .is-readOnly)",
- ".spectrum-NumberField.is-keyboardFocused:not(.is-disabled)",
- ".spectrum-NumberField.is-keyboardFocused:not(.is-disabled):hover",
".spectrum-NumberField.is-keyboardFocused:not(.is-disabled, .is-readOnly)",
".spectrum-NumberField.is-keyboardFocused:not(.is-disabled, .is-readOnly) .spectrum-NumberField-inputs",
".spectrum-NumberField.is-keyboardFocused:not(.is-disabled, .is-readOnly):hover",
+ ".spectrum-NumberField.is-keyboardFocused:not(.is-disabled)",
+ ".spectrum-NumberField.is-keyboardFocused:not(.is-disabled):hover",
+ ".spectrum-NumberField.is-keyboardFocused.is-hover:not(.is-disabled, .is-readOnly)",
+ ".spectrum-NumberField.is-keyboardFocused.is-hover:not(.is-disabled)",
".spectrum-NumberField.is-readOnly",
".spectrum-NumberField.spectrum-NumberField--hiddenStepper",
".spectrum-NumberField.spectrum-NumberField--hiddenStepper .spectrum-NumberField-textfield",
".spectrum-NumberField.spectrum-NumberField--hiddenStepper .spectrum-NumberField-textfield .spectrum-NumberField-input",
- ".spectrum-NumberField.spectrum-NumberField--hiddenStepper .spectrum-NumberField-textfield.spectrum-Textfield.is-invalid .spectrum-Textfield-validationIcon",
".spectrum-NumberField.spectrum-NumberField--hiddenStepper .spectrum-NumberField-textfield:not(:has(.spectrum-Textfield-validationIcon)) .spectrum-NumberField-input",
+ ".spectrum-NumberField.spectrum-NumberField--hiddenStepper .spectrum-NumberField-textfield.spectrum-Textfield.is-invalid .spectrum-Textfield-validationIcon",
".spectrum-NumberField.spectrum-NumberField--sideLabel",
".spectrum-NumberField.spectrum-NumberField--sideLabel .spectrum-NumberField-fieldLabel",
".spectrum-NumberField.spectrum-NumberField--sideLabel .spectrum-NumberField-helpText",
".spectrum-NumberField.spectrum-NumberField--sideLabel .spectrum-NumberField-inputs",
".spectrum-NumberField.spectrum-NumberField--sizeL",
".spectrum-NumberField.spectrum-NumberField--sizeS",
- ".spectrum-NumberField.spectrum-NumberField--sizeXL",
- ".spectrum-NumberField:before",
- ".spectrum-NumberField:focus-visible .spectrum-NumberField-inputs",
- ".spectrum-NumberField:lang(ja)",
- ".spectrum-NumberField:lang(ko)",
- ".spectrum-NumberField:lang(zh)",
- ".spectrum-NumberField:not(.is-disabled):focus",
- ".spectrum-NumberField:not(.is-disabled):focus-visible",
- ".spectrum-NumberField:not(.is-disabled):focus-visible:hover",
- ".spectrum-NumberField:not(.is-disabled):focus-within",
- ".spectrum-NumberField:not(.is-disabled):focus-within:hover",
- ".spectrum-NumberField:not(.is-disabled):focus:hover",
- ".spectrum-NumberField:not(.is-disabled):hover",
- ".spectrum-NumberField:not(.is-disabled, .is-readOnly):focus",
- ".spectrum-NumberField:not(.is-disabled, .is-readOnly):focus-visible",
- ".spectrum-NumberField:not(.is-disabled, .is-readOnly):focus-visible:hover",
- ".spectrum-NumberField:not(.is-disabled, .is-readOnly):focus-within",
- ".spectrum-NumberField:not(.is-disabled, .is-readOnly):focus-within:hover",
- ".spectrum-NumberField:not(.is-disabled, .is-readOnly):focus:hover",
- ".spectrum-NumberField:not(.is-disabled, .is-readOnly):hover"
- ],
- "modifiers": [
- "--mod-numberfield-background-color",
- "--mod-numberfield-background-color-disabled",
- "--mod-numberfield-block-size",
- "--mod-numberfield-border-color",
- "--mod-numberfield-border-color-disabled",
- "--mod-numberfield-border-color-focus",
- "--mod-numberfield-border-color-focus-hover",
- "--mod-numberfield-border-color-focus-hover-invalid",
- "--mod-numberfield-border-color-focus-invalid",
- "--mod-numberfield-border-color-hover",
- "--mod-numberfield-border-color-hover-invalid",
- "--mod-numberfield-border-color-invalid",
- "--mod-numberfield-border-color-invalid-default",
- "--mod-numberfield-border-color-invalid-focus",
- "--mod-numberfield-border-color-invalid-focus-hover",
- "--mod-numberfield-border-color-invalid-hover",
- "--mod-numberfield-border-color-invalid-keyboard-focus",
- "--mod-numberfield-border-color-keyboard-focus",
- "--mod-numberfield-border-color-keyboard-focus-invalid",
- "--mod-numberfield-border-radius",
- "--mod-numberfield-border-width",
- "--mod-numberfield-button-inline-offset",
- "--mod-numberfield-focus-indicator-color",
- "--mod-numberfield-focus-indicator-gap",
- "--mod-numberfield-focus-indicator-width",
- "--mod-numberfield-font-family",
- "--mod-numberfield-font-size",
- "--mod-numberfield-font-style",
- "--mod-numberfield-font-weight",
- "--mod-numberfield-hidden-stepper-min-inline-size",
- "--mod-numberfield-inline-size",
- "--mod-numberfield-label-to-field",
- "--mod-numberfield-line-height",
- "--mod-numberfield-min-inline-size",
- "--mod-numberfield-spacing-block-end-edge-to-text",
- "--mod-numberfield-spacing-block-start-edge-to-text",
- "--mod-numberfield-spacing-field-to-helptext",
- "--mod-numberfield-text-color",
- "--mod-numberfield-text-color-disabled",
- "--mod-numberfield-text-color-focus",
- "--mod-numberfield-text-color-focus-hover",
- "--mod-numberfield-text-color-hover",
- "--mod-numberfield-text-color-keyboard-focus"
- ],
- "component": [],
- "global": [
- "--spectrum-border-width-200",
- "--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-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-medium-size-extra-large",
- "--spectrum-corner-radius-medium-size-large",
- "--spectrum-corner-radius-medium-size-medium",
- "--spectrum-corner-radius-medium-size-small",
- "--spectrum-default-font-style",
- "--spectrum-disabled-border-color",
- "--spectrum-disabled-content-color",
- "--spectrum-field-default-width-extra-large",
- "--spectrum-field-default-width-large",
- "--spectrum-field-default-width-medium",
- "--spectrum-field-default-width-small",
- "--spectrum-field-label-to-component",
- "--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-400",
- "--spectrum-gray-800",
- "--spectrum-gray-900",
- "--spectrum-help-text-to-component",
- "--spectrum-in-field-button-edge-to-fill-extra-large",
- "--spectrum-in-field-button-edge-to-fill-large",
- "--spectrum-in-field-button-edge-to-fill-medium",
- "--spectrum-in-field-button-side-edge-to-fill-extra-large",
- "--spectrum-in-field-button-side-edge-to-fill-large",
- "--spectrum-in-field-button-side-edge-to-fill-medium",
- "--spectrum-in-field-button-side-edge-to-fill-small",
- "--spectrum-in-field-stepper-to-end-extra-large",
- "--spectrum-in-field-stepper-to-end-large",
- "--spectrum-in-field-stepper-to-end-medium",
- "--spectrum-in-field-stepper-to-end-small",
- "--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-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-number-field-minimum-width-multiplier",
- "--spectrum-number-field-visual-to-in-field-stepper-extra-large",
- "--spectrum-number-field-visual-to-in-field-stepper-large",
- "--spectrum-number-field-visual-to-in-field-stepper-medium",
- "--spectrum-number-field-visual-to-in-field-stepper-small",
- "--spectrum-number-field-with-stepper-minimum-width-extra-large",
- "--spectrum-number-field-with-stepper-minimum-width-large",
- "--spectrum-number-field-with-stepper-minimum-width-medium",
- "--spectrum-number-field-with-stepper-minimum-width-small",
- "--spectrum-numberfield-alert-icon-size",
- "--spectrum-numberfield-background-color",
- "--spectrum-numberfield-background-color-disabled",
- "--spectrum-numberfield-block-size",
- "--spectrum-numberfield-border-color-default",
- "--spectrum-numberfield-border-color-disabled",
- "--spectrum-numberfield-border-color-focus",
- "--spectrum-numberfield-border-color-focus-hover",
- "--spectrum-numberfield-border-color-hover",
- "--spectrum-numberfield-border-color-invalid-default",
- "--spectrum-numberfield-border-color-invalid-focus",
- "--spectrum-numberfield-border-color-invalid-focus-hover",
- "--spectrum-numberfield-border-color-invalid-hover",
- "--spectrum-numberfield-border-color-invalid-keyboard-focus",
- "--spectrum-numberfield-border-color-keyboard-focus",
- "--spectrum-numberfield-border-radius",
- "--spectrum-numberfield-border-width",
- "--spectrum-numberfield-button-container-size",
- "--spectrum-numberfield-button-inline-offset",
- "--spectrum-numberfield-button-inline-padding",
- "--spectrum-numberfield-focus-indicator-color",
- "--spectrum-numberfield-focus-indicator-gap",
- "--spectrum-numberfield-focus-indicator-width",
- "--spectrum-numberfield-font-family",
- "--spectrum-numberfield-font-size",
- "--spectrum-numberfield-font-style",
- "--spectrum-numberfield-font-weight",
- "--spectrum-numberfield-hidden-stepper-min-inline-size",
- "--spectrum-numberfield-inline-size",
- "--spectrum-numberfield-line-height",
- "--spectrum-numberfield-min-inline-size",
- "--spectrum-numberfield-spacing-block-end-edge-to-alert-icon",
- "--spectrum-numberfield-spacing-block-end-edge-to-text",
- "--spectrum-numberfield-spacing-block-start-edge-to-alert-icon",
- "--spectrum-numberfield-spacing-block-start-edge-to-text",
- "--spectrum-numberfield-spacing-field-to-helptext",
- "--spectrum-numberfield-spacing-inline-edge-to-text",
- "--spectrum-numberfield-spacing-label-to-field",
- "--spectrum-numberfield-spacing-min-inline-end-text-to-stepper",
- "--spectrum-numberfield-spacing-min-inline-end-value-to-icon",
- "--spectrum-numberfield-spacing-side-label-to-field",
- "--spectrum-numberfield-spacing-validation-icon-to-stepper",
- "--spectrum-numberfield-text-color",
- "--spectrum-numberfield-text-color-disabled",
- "--spectrum-numberfield-text-color-focus",
- "--spectrum-numberfield-text-color-focus-hover",
- "--spectrum-numberfield-text-color-hover",
- "--spectrum-numberfield-text-color-keyboard-focus",
- "--spectrum-regular-font-weight",
- "--spectrum-sans-font-family-stack",
- "--spectrum-spacing-200",
- "--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"
- ],
- "passthroughs": [
- "--mod-textfield-background-color",
- "--mod-textfield-background-color-disabled",
- "--mod-textfield-font-family",
- "--mod-textfield-font-size",
- "--mod-textfield-font-style",
- "--mod-textfield-font-weight",
- "--mod-textfield-height",
- "--mod-textfield-icon-spacing-block-invalid",
- "--mod-textfield-spacing-block-end",
- "--mod-textfield-spacing-block-start",
- "--mod-textfield-text-color-default",
- "--mod-textfield-text-color-disabled",
- "--mod-textfield-text-color-focus",
- "--mod-textfield-width"
+ ".spectrum-NumberField.spectrum-NumberField--sizeXL"
],
- "high-contrast": [
- "--highcontrast-numberfield-background-color",
- "--highcontrast-numberfield-border-color",
- "--highcontrast-numberfield-border-color-focus",
- "--highcontrast-numberfield-border-color-focus-hover",
- "--highcontrast-numberfield-border-color-hover",
- "--highcontrast-numberfield-border-color-keyboard-focus",
- "--highcontrast-numberfield-focus-indicator-color",
- "--highcontrast-textfield-border-color"
- ]
+ "modifiers": {
+ "mod-numberfield-border-radius": {
+ "description": "Used by `--spectrum-numberfield-border-radius`.
Defaults to `var(--spectrum-corner-radius-medium-size-extra-large)`, if not set.",
+ "control": "text",
+ "category": "Modifier"
+ },
+ "mod-numberfield-border-width": {
+ "description": "Used by `--spectrum-numberfield-border-width`, `--mod-textfield-height`.
Defaults to `var(--spectrum-numberfield-border-width)`, if not set.",
+ "control": "text",
+ "category": "Modifier"
+ },
+ "mod-numberfield-border-color": {
+ "description": "Defined in `.spectrum-NumberField.is-hover:not(.is-disabled, .is-readOnly)`, `.spectrum-NumberField.is-invalid`, `.spectrum-NumberField.is-focused:not(.is-disabled, .is-readOnly), .spectrum-NumberField:not(.is-disabled, .is-readOnly):focus, .spectrum-NumberField:not(.is-disabled, .is-readOnly):focus-within`, `.spectrum-NumberField.is-focused.is-hover:not(.is-disabled, .is-readOnly), .spectrum-NumberField.is-hover:not(.is-disabled, .is-readOnly):focus, .spectrum-NumberField.is-hover:not(.is-disabled, .is-readOnly):focus-within`, `.spectrum-NumberField.is-keyboardFocused:not(.is-disabled, .is-readOnly), .spectrum-NumberField:not(.is-disabled, .is-readOnly):focus-visible, .spectrum-NumberField:not(.is-disabled, .is-readOnly):focus-within`, `.spectrum-NumberField.is-hover:not(.is-disabled, .is-readOnly):focus-visible, .spectrum-NumberField.is-hover:not(.is-disabled, .is-readOnly):focus-within, .spectrum-NumberField.is-keyboardFocused.is-hover:not(.is-disabled, .is-readOnly)`, `.spectrum-NumberField.is-disabled, .spectrum-NumberField.is-readOnly`, `.spectrum-NumberField:not(.is-disabled, .is-readOnly):hover`, `.spectrum-NumberField.is-focused:not(.is-disabled, .is-readOnly):hover, .spectrum-NumberField.is-keyboardFocused:not(.is-disabled, .is-readOnly):hover, .spectrum-NumberField:not(.is-disabled, .is-readOnly):focus-visible:hover, .spectrum-NumberField:not(.is-disabled, .is-readOnly):focus-within:hover, .spectrum-NumberField:not(.is-disabled, .is-readOnly):focus:hover`.
Used by `--spectrum-numberfield-border-color-default`.
Defaults to `var(--spectrum-gray-300)`, if not set.",
+ "control": "color",
+ "category": "Modifier"
+ },
+ "mod-numberfield-border-color-hover": {
+ "description": "Defined in `.spectrum-NumberField.is-invalid`.
Used by `--spectrum-numberfield-border-color-hover`, `--mod-numberfield-border-color`.
Defaults to `var(--spectrum-numberfield-border-color-hover)`, if not set.",
+ "control": "color",
+ "category": "Modifier"
+ },
+ "mod-numberfield-border-color-focus": {
+ "description": "Defined in `.spectrum-NumberField.is-invalid`.
Used by `--spectrum-numberfield-border-color-focus`, `--mod-numberfield-border-color`.
Defaults to `var(--spectrum-numberfield-border-color-focus)`, if not set.",
+ "control": "color",
+ "category": "Modifier"
+ },
+ "mod-numberfield-border-color-keyboard-focus": {
+ "description": "Defined in `.spectrum-NumberField.is-invalid`.
Used by `--spectrum-numberfield-border-color-keyboard-focus`, `--mod-numberfield-border-color`.
Defaults to `var(--spectrum-numberfield-border-color-keyboard-focus)`, if not set.",
+ "control": "color",
+ "category": "Modifier"
+ },
+ "mod-numberfield-border-color-focus-hover": {
+ "description": "Defined in `.spectrum-NumberField.is-invalid`.
Used by `--spectrum-numberfield-border-color-focus-hover`, `--mod-numberfield-border-color`.
Defaults to `var(--spectrum-numberfield-border-color-focus-hover)`, if not set.",
+ "control": "color",
+ "category": "Modifier"
+ },
+ "mod-numberfield-border-color-disabled": {
+ "description": "Used by `--spectrum-numberfield-border-color-disabled`.
Defaults to `var(--spectrum-disabled-border-color)`, if not set.",
+ "control": "color",
+ "category": "Modifier"
+ },
+ "mod-numberfield-border-color-invalid-default": {
+ "description": "Used by `--spectrum-numberfield-border-color-invalid-default`.
Defaults to `var(--spectrum-negative-border-color-default)`, if not set.",
+ "control": "color",
+ "category": "Modifier"
+ },
+ "mod-numberfield-border-color-invalid-hover": {
+ "description": "Used by `--spectrum-numberfield-border-color-invalid-hover`.
Defaults to `var(--spectrum-negative-border-color-hover)`, if not set.",
+ "control": "color",
+ "category": "Modifier"
+ },
+ "mod-numberfield-border-color-invalid-focus": {
+ "description": "Used by `--spectrum-numberfield-border-color-invalid-focus`.
Defaults to `var(--spectrum-negative-border-color-focus)`, if not set.",
+ "control": "color",
+ "category": "Modifier"
+ },
+ "mod-numberfield-border-color-invalid-focus-hover": {
+ "description": "Used by `--spectrum-numberfield-border-color-invalid-focus-hover`.
Defaults to `var(--spectrum-negative-border-color-focus-hover)`, if not set.",
+ "control": "color",
+ "category": "Modifier"
+ },
+ "mod-numberfield-border-color-invalid-keyboard-focus": {
+ "description": "Used by `--spectrum-numberfield-border-color-invalid-keyboard-focus`.
Defaults to `var(--spectrum-negative-border-color-key-focus)`, if not set.",
+ "control": "color",
+ "category": "Modifier"
+ },
+ "mod-numberfield-text-color": {
+ "description": "Used by `--spectrum-numberfield-text-color`, `--mod-textfield-text-color-default`.
Defaults to `var(--spectrum-numberfield-text-color)`, if not set.",
+ "control": "color",
+ "category": "Modifier"
+ },
+ "mod-numberfield-text-color-hover": {
+ "description": "Used by `--spectrum-numberfield-text-color-hover`, `--mod-textfield-text-color-default`.
Defaults to `var(--spectrum-numberfield-text-color-hover)`, if not set.",
+ "control": "color",
+ "category": "Modifier"
+ },
+ "mod-numberfield-text-color-focus": {
+ "description": "Used by `--spectrum-numberfield-text-color-focus`, `--mod-textfield-text-color-focus`.
Defaults to `var(--spectrum-numberfield-text-color-focus)`, if not set.",
+ "control": "color",
+ "category": "Modifier"
+ },
+ "mod-numberfield-text-color-focus-hover": {
+ "description": "Used by `--spectrum-numberfield-text-color-focus-hover`, `--mod-textfield-text-color-focus`.
Defaults to `var(--spectrum-numberfield-text-color-focus-hover)`, if not set.",
+ "control": "color",
+ "category": "Modifier"
+ },
+ "mod-numberfield-text-color-keyboard-focus": {
+ "description": "Used by `--spectrum-numberfield-text-color-keyboard-focus`, `--mod-textfield-text-color-default`.
Defaults to `var(--spectrum-numberfield-text-color-keyboard-focus)`, if not set.",
+ "control": "color",
+ "category": "Modifier"
+ },
+ "mod-numberfield-text-color-disabled": {
+ "description": "Used by `--spectrum-numberfield-text-color-disabled`, `--mod-textfield-text-color-disabled`.
Defaults to `var(--spectrum-numberfield-text-color-disabled)`, if not set.",
+ "control": "color",
+ "category": "Modifier"
+ },
+ "mod-numberfield-background-color": {
+ "description": "Defined in `.spectrum-NumberField.is-disabled`.
Used by `--spectrum-numberfield-background-color`, `--mod-textfield-background-color`.
Defaults to `var(--spectrum-numberfield-background-color, transparent)`, if not set.",
+ "control": "color",
+ "category": "Modifier"
+ },
+ "mod-numberfield-background-color-disabled": {
+ "description": "Used by `--spectrum-numberfield-background-color-disabled`, `--mod-textfield-background-color-disabled`.
Defaults to `var(--spectrum-numberfield-background-color-disabled)`, if not set.",
+ "control": "color",
+ "category": "Modifier"
+ },
+ "mod-numberfield-font-family": {
+ "description": "Used by `--spectrum-numberfield-font-family`, `--mod-textfield-font-family`.
Defaults to `var(--spectrum-numberfield-font-family)`, if not set.",
+ "control": "text",
+ "category": "Modifier"
+ },
+ "mod-numberfield-font-weight": {
+ "description": "Used by `--spectrum-numberfield-font-weight`, `--mod-textfield-font-weight`.
Defaults to `var(--spectrum-numberfield-font-weight)`, if not set.",
+ "control": "text",
+ "category": "Modifier"
+ },
+ "mod-numberfield-font-size": {
+ "description": "Used by `--spectrum-numberfield-font-size`, `--mod-textfield-font-size`.
Defaults to `var(--spectrum-font-size-300)`, if not set.",
+ "control": "text",
+ "category": "Modifier"
+ },
+ "mod-numberfield-font-style": {
+ "description": "Used by `--spectrum-numberfield-font-style`, `--mod-textfield-font-style`.
Defaults to `var(--spectrum-numberfield-font-style)`, if not set.",
+ "control": "text",
+ "category": "Modifier"
+ },
+ "mod-numberfield-line-height": {
+ "description": "Used by `--spectrum-numberfield-line-height`.
Defaults to `var(--spectrum-line-height-100)`, if not set.",
+ "control": "text",
+ "category": "Modifier"
+ },
+ "mod-numberfield-focus-indicator-width": {
+ "description": "Used by `--spectrum-numberfield-focus-indicator-width`.
Defaults to `var(--spectrum-focus-indicator-thickness)`, if not set.",
+ "control": "text",
+ "category": "Modifier"
+ },
+ "mod-numberfield-focus-indicator-gap": {
+ "description": "Used by `--spectrum-numberfield-focus-indicator-gap`.
Defaults to `var(--spectrum-focus-indicator-gap)`, if not set.",
+ "control": "text",
+ "category": "Modifier"
+ },
+ "mod-numberfield-focus-indicator-color": {
+ "description": "Used by `--spectrum-numberfield-focus-indicator-color`.
Defaults to `var(--spectrum-focus-indicator-color)`, if not set.",
+ "control": "color",
+ "category": "Modifier"
+ },
+ "mod-numberfield-block-size": {
+ "description": "Used by `--spectrum-numberfield-block-size`, `--mod-textfield-height`.
Defaults to `var(--spectrum-component-height-300)`, if not set.",
+ "control": "text",
+ "category": "Modifier"
+ },
+ "mod-numberfield-inline-size": {
+ "description": "Used by `--spectrum-numberfield-inline-size`.
Defaults to `var(--spectrum-field-default-width-extra-large)`, if not set.",
+ "control": "text",
+ "category": "Modifier"
+ },
+ "mod-numberfield-min-inline-size": {
+ "description": "Used by `--spectrum-numberfield-min-inline-size`.
Defaults to `var(--spectrum-number-field-with-stepper-minimum-width-extra-large)`, if not set.",
+ "control": "text",
+ "category": "Modifier"
+ },
+ "mod-numberfield-button-inline-offset": {
+ "description": "Used by `--spectrum-numberfield-button-inline-offset`, `.spectrum-NumberField-buttons`.
Defaults to `var(--spectrum-numberfield-button-inline-offset, 0px)`, if not set.",
+ "control": "text",
+ "category": "Modifier"
+ },
+ "mod-numberfield-spacing-block-start-edge-to-text": {
+ "description": "Used by `--mod-textfield-spacing-block-start`.
Defaults to `var(--spectrum-numberfield-spacing-block-start-edge-to-text)`, if not set.",
+ "control": "text",
+ "category": "Modifier"
+ },
+ "mod-numberfield-spacing-block-end-edge-to-text": {
+ "description": "Used by `--mod-textfield-spacing-block-end`.
Defaults to `var(--spectrum-numberfield-spacing-block-end-edge-to-text)`, if not set.",
+ "control": "text",
+ "category": "Modifier"
+ },
+ "mod-numberfield-border-color-invalid": {
+ "description": "Used by `--mod-numberfield-border-color`.
Defaults to `var(--spectrum-numberfield-border-color-invalid-default)`, if not set.",
+ "control": "color",
+ "category": "Modifier"
+ },
+ "mod-numberfield-border-color-hover-invalid": {
+ "description": "Used by `--mod-numberfield-border-color-hover`.
Defaults to `var(--spectrum-numberfield-border-color-invalid-hover)`, if not set.",
+ "control": "color",
+ "category": "Modifier"
+ },
+ "mod-numberfield-border-color-focus-invalid": {
+ "description": "Used by `--mod-numberfield-border-color-focus`.
Defaults to `var(--spectrum-numberfield-border-color-invalid-focus)`, if not set.",
+ "control": "color",
+ "category": "Modifier"
+ },
+ "mod-numberfield-border-color-focus-hover-invalid": {
+ "description": "Used by `--mod-numberfield-border-color-focus-hover`.
Defaults to `var(--spectrum-numberfield-border-color-invalid-focus-hover)`, if not set.",
+ "control": "color",
+ "category": "Modifier"
+ },
+ "mod-numberfield-border-color-keyboard-focus-invalid": {
+ "description": "Used by `--mod-numberfield-border-color-keyboard-focus`.
Defaults to `var(--spectrum-numberfield-border-color-invalid-keyboard-focus)`, if not set.",
+ "control": "color",
+ "category": "Modifier"
+ },
+ "mod-numberfield-hidden-stepper-min-inline-size": {
+ "description": "Used by `.spectrum-NumberField.spectrum-NumberField--hiddenStepper`.
Defaults to `var(--spectrum-numberfield-hidden-stepper-min-inline-size)`, if not set.",
+ "control": "text",
+ "category": "Modifier"
+ },
+ "mod-numberfield-label-to-field": {
+ "description": "Used by `.spectrum-NumberField-fieldLabel`.
Defaults to `var(--spectrum-numberfield-spacing-label-to-field)`, if not set.",
+ "control": "text",
+ "category": "Modifier"
+ },
+ "mod-numberfield-spacing-field-to-helptext": {
+ "description": "Used by `.spectrum-NumberField-helpText`.
Defaults to `var(--spectrum-numberfield-spacing-field-to-helptext)`, if not set.",
+ "control": "text",
+ "category": "Modifier"
+ }
+ },
+ "component": {},
+ "global": {
+ "spectrum-numberfield-border-radius": {
+ "value": "var(--mod-numberfield-border-radius, var(--spectrum-corner-radius-medium-size-extra-large))",
+ "description": "Defined in `.spectrum-NumberField`, `.spectrum-NumberField.spectrum-NumberField--sizeS`, `.spectrum-NumberField.spectrum-NumberField--sizeL`, `.spectrum-NumberField.spectrum-NumberField--sizeXL`.
Used by `.spectrum-NumberField-inputs`, `.spectrum-NumberField-textfield`.
Defaults to `var(--mod-numberfield-border-radius, var(--spectrum-corner-radius-medium-size-extra-large))`, if not set.",
+ "control": "text",
+ "category": "Global"
+ },
+ "spectrum-corner-radius-medium-size-medium": {
+ "value": "8px",
+ "description": "Used by `--spectrum-numberfield-border-radius`.",
+ "control": "text",
+ "category": "Global"
+ },
+ "spectrum-numberfield-border-width": {
+ "value": "var(--mod-numberfield-border-width, var(--spectrum-border-width-200))",
+ "description": "Defined in `.spectrum-NumberField`.
Used by `--spectrum-numberfield-spacing-inline-edge-to-text`, `--mod-textfield-icon-spacing-block-invalid`, `--mod-textfield-height`, `.spectrum-NumberField-textfield`.
Defaults to `var(--mod-numberfield-border-width, var(--spectrum-border-width-200))`, if not set.",
+ "control": "text",
+ "category": "Global"
+ },
+ "spectrum-border-width-200": {
+ "value": "2px",
+ "description": "Used by `--spectrum-numberfield-border-width`.",
+ "control": "text",
+ "category": "Global"
+ },
+ "spectrum-numberfield-border-color-default": {
+ "value": "var(--highcontrast-numberfield-border-color, var(--mod-numberfield-border-color, var(--spectrum-gray-300)))",
+ "description": "Defined in `.spectrum-NumberField`.
Used by `.spectrum-NumberField-textfield`.
Defaults to `var(--highcontrast-numberfield-border-color, var(--mod-numberfield-border-color, var(--spectrum-gray-300)))`, if not set.",
+ "control": "color",
+ "category": "Global"
+ },
+ "spectrum-gray-300": {
+ "value": "light-dark(rgb(218, 218, 218), rgb(57, 57, 57))",
+ "description": "Used by `--spectrum-numberfield-border-color-default`.",
+ "control": "text",
+ "category": "Global"
+ },
+ "spectrum-numberfield-border-color-hover": {
+ "value": "var(--highcontrast-numberfield-border-color-hover, var(--mod-numberfield-border-color-hover, var(--spectrum-gray-400)))",
+ "description": "Defined in `.spectrum-NumberField`.
Used by `--mod-numberfield-border-color`.
Defaults to `var(--highcontrast-numberfield-border-color-hover, var(--mod-numberfield-border-color-hover, var(--spectrum-gray-400)))`, if not set.",
+ "control": "color",
+ "category": "Global"
+ },
+ "spectrum-gray-400": {
+ "value": "light-dark(rgb(198, 198, 198), rgb(68, 68, 68))",
+ "description": "Used by `--spectrum-numberfield-border-color-hover`.",
+ "control": "text",
+ "category": "Global"
+ },
+ "spectrum-numberfield-border-color-focus": {
+ "value": "var(--highcontrast-numberfield-border-color-focus, var(--mod-numberfield-border-color-focus, var(--spectrum-gray-800)))",
+ "description": "Defined in `.spectrum-NumberField`.
Used by `--mod-numberfield-border-color`.
Defaults to `var(--highcontrast-numberfield-border-color-focus, var(--mod-numberfield-border-color-focus, var(--spectrum-gray-800)))`, if not set.",
+ "control": "color",
+ "category": "Global"
+ },
+ "spectrum-gray-800": {
+ "value": "light-dark(rgb(41, 41, 41), rgb(219, 219, 219))",
+ "description": "Used by `--spectrum-numberfield-border-color-focus`, `--spectrum-numberfield-border-color-keyboard-focus`.",
+ "control": "text",
+ "category": "Global"
+ },
+ "spectrum-numberfield-border-color-keyboard-focus": {
+ "value": "var(--highcontrast-numberfield-border-color-keyboard-focus, var(--mod-numberfield-border-color-keyboard-focus, var(--spectrum-gray-800)))",
+ "description": "Defined in `.spectrum-NumberField`.
Used by `--mod-numberfield-border-color`.
Defaults to `var(--highcontrast-numberfield-border-color-keyboard-focus, var(--mod-numberfield-border-color-keyboard-focus, var(--spectrum-gray-800)))`, if not set.",
+ "control": "color",
+ "category": "Global"
+ },
+ "spectrum-numberfield-border-color-focus-hover": {
+ "value": "var(--highcontrast-numberfield-border-color-focus-hover, var(--mod-numberfield-border-color-focus-hover, var(--spectrum-gray-900)))",
+ "description": "Defined in `.spectrum-NumberField`.
Used by `--mod-numberfield-border-color`.
Defaults to `var(--highcontrast-numberfield-border-color-focus-hover, var(--mod-numberfield-border-color-focus-hover, var(--spectrum-gray-900)))`, if not set.",
+ "control": "color",
+ "category": "Global"
+ },
+ "spectrum-gray-900": {
+ "value": "light-dark(rgb(19, 19, 19), rgb(242, 242, 242))",
+ "description": "Used by `--spectrum-numberfield-border-color-focus-hover`.",
+ "control": "text",
+ "category": "Global"
+ },
+ "spectrum-numberfield-border-color-disabled": {
+ "value": "var(--mod-numberfield-border-color-disabled, var(--spectrum-disabled-border-color))",
+ "description": "Defined in `.spectrum-NumberField`.
Used by `--mod-numberfield-border-color`.
Defaults to `var(--mod-numberfield-border-color-disabled, var(--spectrum-disabled-border-color))`, if not set.",
+ "control": "color",
+ "category": "Global"
+ },
+ "spectrum-disabled-border-color": {
+ "value": "var(--spectrum-gray-300)",
+ "description": "Used by `--spectrum-numberfield-border-color-disabled`.",
+ "control": "color",
+ "category": "Global"
+ },
+ "spectrum-numberfield-border-color-invalid-default": {
+ "value": "var(--mod-numberfield-border-color-invalid-default, var(--spectrum-negative-border-color-default))",
+ "description": "Defined in `.spectrum-NumberField`.
Used by `--mod-numberfield-border-color`.
Defaults to `var(--mod-numberfield-border-color-invalid-default, var(--spectrum-negative-border-color-default))`, if not set.",
+ "control": "color",
+ "category": "Global"
+ },
+ "spectrum-negative-border-color-default": {
+ "value": "var(--spectrum-negative-color-900)",
+ "description": "Used by `--spectrum-numberfield-border-color-invalid-default`.",
+ "control": "color",
+ "category": "Global"
+ },
+ "spectrum-numberfield-border-color-invalid-hover": {
+ "value": "var(--mod-numberfield-border-color-invalid-hover, var(--spectrum-negative-border-color-hover))",
+ "description": "Defined in `.spectrum-NumberField`.
Used by `--mod-numberfield-border-color-hover`.
Defaults to `var(--mod-numberfield-border-color-invalid-hover, var(--spectrum-negative-border-color-hover))`, if not set.",
+ "control": "color",
+ "category": "Global"
+ },
+ "spectrum-negative-border-color-hover": {
+ "value": "var(--spectrum-negative-color-1000)",
+ "description": "Used by `--spectrum-numberfield-border-color-invalid-hover`.",
+ "control": "color",
+ "category": "Global"
+ },
+ "spectrum-numberfield-border-color-invalid-focus": {
+ "value": "var(--mod-numberfield-border-color-invalid-focus, var(--spectrum-negative-border-color-focus))",
+ "description": "Defined in `.spectrum-NumberField`.
Used by `--mod-numberfield-border-color-focus`.
Defaults to `var(--mod-numberfield-border-color-invalid-focus, var(--spectrum-negative-border-color-focus))`, if not set.",
+ "control": "color",
+ "category": "Global"
+ },
+ "spectrum-negative-border-color-focus": {
+ "value": "var(--spectrum-negative-color-1000)",
+ "description": "Used by `--spectrum-numberfield-border-color-invalid-focus`.",
+ "control": "color",
+ "category": "Global"
+ },
+ "spectrum-numberfield-border-color-invalid-focus-hover": {
+ "value": "var(--mod-numberfield-border-color-invalid-focus-hover, var(--spectrum-negative-border-color-focus-hover))",
+ "description": "Defined in `.spectrum-NumberField`.
Used by `--mod-numberfield-border-color-focus-hover`.
Defaults to `var(--mod-numberfield-border-color-invalid-focus-hover, var(--spectrum-negative-border-color-focus-hover))`, if not set.",
+ "control": "color",
+ "category": "Global"
+ },
+ "spectrum-negative-border-color-focus-hover": {
+ "value": "var(--spectrum-negative-border-color-down)",
+ "description": "Used by `--spectrum-numberfield-border-color-invalid-focus-hover`.",
+ "control": "color",
+ "category": "Global"
+ },
+ "spectrum-numberfield-border-color-invalid-keyboard-focus": {
+ "value": "var(--mod-numberfield-border-color-invalid-keyboard-focus, var(--spectrum-negative-border-color-key-focus))",
+ "description": "Defined in `.spectrum-NumberField`.
Used by `--mod-numberfield-border-color-keyboard-focus`.
Defaults to `var(--mod-numberfield-border-color-invalid-keyboard-focus, var(--spectrum-negative-border-color-key-focus))`, if not set.",
+ "control": "color",
+ "category": "Global"
+ },
+ "spectrum-negative-border-color-key-focus": {
+ "value": "var(--spectrum-negative-color-1000)",
+ "description": "Used by `--spectrum-numberfield-border-color-invalid-keyboard-focus`.",
+ "control": "color",
+ "category": "Global"
+ },
+ "spectrum-numberfield-text-color": {
+ "value": "var(--mod-numberfield-text-color, var(--spectrum-neutral-content-color-default))",
+ "description": "Defined in `.spectrum-NumberField`.
Used by `--mod-textfield-text-color-default`.
Defaults to `var(--mod-numberfield-text-color, var(--spectrum-neutral-content-color-default))`, if not set.",
+ "control": "color",
+ "category": "Global"
+ },
+ "spectrum-neutral-content-color-default": {
+ "value": "var(--spectrum-gray-800)",
+ "description": "Used by `--spectrum-numberfield-text-color`.",
+ "control": "color",
+ "category": "Global"
+ },
+ "spectrum-numberfield-text-color-hover": {
+ "value": "var(--mod-numberfield-text-color-hover, var(--spectrum-neutral-content-color-hover))",
+ "description": "Defined in `.spectrum-NumberField`.
Used by `--mod-textfield-text-color-default`.
Defaults to `var(--mod-numberfield-text-color-hover, var(--spectrum-neutral-content-color-hover))`, if not set.",
+ "control": "color",
+ "category": "Global"
+ },
+ "spectrum-neutral-content-color-hover": {
+ "value": "var(--spectrum-gray-900)",
+ "description": "Used by `--spectrum-numberfield-text-color-hover`.",
+ "control": "color",
+ "category": "Global"
+ },
+ "spectrum-numberfield-text-color-focus": {
+ "value": "var(--mod-numberfield-text-color-focus, var(--spectrum-neutral-content-color-focus))",
+ "description": "Defined in `.spectrum-NumberField`.
Used by `--mod-textfield-text-color-focus`.
Defaults to `var(--mod-numberfield-text-color-focus, var(--spectrum-neutral-content-color-focus))`, if not set.",
+ "control": "color",
+ "category": "Global"
+ },
+ "spectrum-neutral-content-color-focus": {
+ "value": "var(--spectrum-neutral-content-color-down)",
+ "description": "Used by `--spectrum-numberfield-text-color-focus`.",
+ "control": "color",
+ "category": "Global"
+ },
+ "spectrum-numberfield-text-color-focus-hover": {
+ "value": "var(--mod-numberfield-text-color-focus-hover, var(--spectrum-neutral-content-color-focus-hover))",
+ "description": "Defined in `.spectrum-NumberField`.
Used by `--mod-textfield-text-color-focus`.
Defaults to `var(--mod-numberfield-text-color-focus-hover, var(--spectrum-neutral-content-color-focus-hover))`, if not set.",
+ "control": "color",
+ "category": "Global"
+ },
+ "spectrum-neutral-content-color-focus-hover": {
+ "value": "var(--spectrum-neutral-content-color-down)",
+ "description": "Used by `--spectrum-numberfield-text-color-focus-hover`.",
+ "control": "color",
+ "category": "Global"
+ },
+ "spectrum-numberfield-text-color-keyboard-focus": {
+ "value": "var(--mod-numberfield-text-color-keyboard-focus, var(--spectrum-neutral-content-color-key-focus))",
+ "description": "Defined in `.spectrum-NumberField`.
Used by `--mod-textfield-text-color-default`.
Defaults to `var(--mod-numberfield-text-color-keyboard-focus, var(--spectrum-neutral-content-color-key-focus))`, if not set.",
+ "control": "color",
+ "category": "Global"
+ },
+ "spectrum-neutral-content-color-key-focus": {
+ "value": "var(--spectrum-gray-900)",
+ "description": "Used by `--spectrum-numberfield-text-color-keyboard-focus`.",
+ "control": "color",
+ "category": "Global"
+ },
+ "spectrum-numberfield-text-color-disabled": {
+ "value": "var(--mod-numberfield-text-color-disabled, var(--spectrum-disabled-content-color))",
+ "description": "Defined in `.spectrum-NumberField`.
Used by `--mod-textfield-text-color-disabled`.
Defaults to `var(--mod-numberfield-text-color-disabled, var(--spectrum-disabled-content-color))`, if not set.",
+ "control": "color",
+ "category": "Global"
+ },
+ "spectrum-disabled-content-color": {
+ "value": "var(--spectrum-gray-400)",
+ "description": "Used by `--spectrum-numberfield-text-color-disabled`.",
+ "control": "color",
+ "category": "Global"
+ },
+ "spectrum-numberfield-background-color": {
+ "value": "var(--highcontrast-numberfield-background-color, var(--mod-numberfield-background-color, var(--spectrum-gray-25)))",
+ "description": "Defined in `.spectrum-NumberField`.
Used by `--mod-textfield-background-color`, `.spectrum-NumberField-textfield`.
Defaults to `var(--highcontrast-numberfield-background-color, var(--mod-numberfield-background-color, var(--spectrum-gray-25)))`, if not set.",
+ "control": "color",
+ "category": "Global"
+ },
+ "spectrum-gray-25": {
+ "value": "light-dark(rgb(255, 255, 255), rgb(17, 17, 17))",
+ "description": "Used by `--spectrum-numberfield-background-color`, `--spectrum-numberfield-background-color-disabled`.",
+ "control": "text",
+ "category": "Global"
+ },
+ "spectrum-numberfield-background-color-disabled": {
+ "value": "var(--mod-numberfield-background-color-disabled, var(--spectrum-gray-25))",
+ "description": "Defined in `.spectrum-NumberField`.
Used by `--mod-textfield-background-color-disabled`, `--mod-numberfield-background-color`.
Defaults to `var(--mod-numberfield-background-color-disabled, var(--spectrum-gray-25))`, if not set.",
+ "control": "color",
+ "category": "Global"
+ },
+ "spectrum-numberfield-font-family": {
+ "value": "var(--mod-numberfield-font-family, var(--spectrum-sans-font-family-stack))",
+ "description": "Defined in `.spectrum-NumberField`.
Used by `--mod-textfield-font-family`.
Defaults to `var(--mod-numberfield-font-family, var(--spectrum-sans-font-family-stack))`, if not set.",
+ "control": "text",
+ "category": "Global"
+ },
+ "spectrum-sans-font-family-stack": {
+ "description": "Used by `--spectrum-numberfield-font-family`.",
+ "control": "text",
+ "category": "Global"
+ },
+ "spectrum-numberfield-font-weight": {
+ "value": "var(--mod-numberfield-font-weight, var(--spectrum-regular-font-weight))",
+ "description": "Defined in `.spectrum-NumberField`.
Used by `--mod-textfield-font-weight`.
Defaults to `var(--mod-numberfield-font-weight, var(--spectrum-regular-font-weight))`, if not set.",
+ "control": "text",
+ "category": "Global"
+ },
+ "spectrum-regular-font-weight": {
+ "value": "400",
+ "description": "Used by `--spectrum-numberfield-font-weight`.",
+ "control": "text",
+ "category": "Global"
+ },
+ "spectrum-numberfield-font-size": {
+ "value": "var(--mod-numberfield-font-size, var(--spectrum-font-size-300))",
+ "description": "Defined in `.spectrum-NumberField`, `.spectrum-NumberField.spectrum-NumberField--sizeS`, `.spectrum-NumberField.spectrum-NumberField--sizeL`, `.spectrum-NumberField.spectrum-NumberField--sizeXL`.
Used by `--mod-textfield-font-size`.
Defaults to `var(--mod-numberfield-font-size, var(--spectrum-font-size-300))`, if not set.",
+ "control": "text",
+ "category": "Global"
+ },
+ "spectrum-font-size-100": {
+ "value": "14px",
+ "description": "Used by `--spectrum-numberfield-font-size`.",
+ "control": "text",
+ "category": "Global"
+ },
+ "spectrum-numberfield-font-style": {
+ "value": "var(--mod-numberfield-font-style, var(--spectrum-default-font-style))",
+ "description": "Defined in `.spectrum-NumberField`.
Used by `--mod-textfield-font-style`.
Defaults to `var(--mod-numberfield-font-style, var(--spectrum-default-font-style))`, if not set.",
+ "control": "text",
+ "category": "Global"
+ },
+ "spectrum-default-font-style": {
+ "value": "normal",
+ "description": "Used by `--spectrum-numberfield-font-style`.",
+ "control": "text",
+ "category": "Global"
+ },
+ "spectrum-numberfield-line-height": {
+ "value": "1.5",
+ "description": "Defined in `.spectrum-NumberField`, `.spectrum-NumberField:lang(ja), .spectrum-NumberField:lang(ko), .spectrum-NumberField:lang(zh)`.
Used by `.spectrum-NumberField-input`.
Defaults to `var(--spectrum-cjk-line-height-100)`, if not set.",
+ "control": "text",
+ "category": "Global"
+ },
+ "spectrum-line-height-100": {
+ "value": "1.3",
+ "description": "Used by `--spectrum-numberfield-line-height`.",
+ "control": "text",
+ "category": "Global"
+ },
+ "spectrum-numberfield-focus-indicator-width": {
+ "value": "var(--mod-numberfield-focus-indicator-width, var(--spectrum-focus-indicator-thickness))",
+ "description": "Defined in `.spectrum-NumberField`.
Used by `.spectrum-NumberField.is-keyboardFocused:not(.is-disabled, .is-readOnly) .spectrum-NumberField-inputs, .spectrum-NumberField:focus-visible .spectrum-NumberField-inputs`.
Defaults to `var(--mod-numberfield-focus-indicator-width, var(--spectrum-focus-indicator-thickness))`, if not set.",
+ "control": "text",
+ "category": "Global"
+ },
+ "spectrum-focus-indicator-thickness": {
+ "value": "2px",
+ "description": "Used by `--spectrum-numberfield-focus-indicator-width`.",
+ "control": "text",
+ "category": "Global"
+ },
+ "spectrum-numberfield-focus-indicator-gap": {
+ "value": "var(--mod-numberfield-focus-indicator-gap, var(--spectrum-focus-indicator-gap))",
+ "description": "Defined in `.spectrum-NumberField`.
Used by `.spectrum-NumberField.is-keyboardFocused:not(.is-disabled, .is-readOnly) .spectrum-NumberField-inputs, .spectrum-NumberField:focus-visible .spectrum-NumberField-inputs`.
Defaults to `var(--mod-numberfield-focus-indicator-gap, var(--spectrum-focus-indicator-gap))`, if not set.",
+ "control": "text",
+ "category": "Global"
+ },
+ "spectrum-focus-indicator-gap": {
+ "value": "2px",
+ "description": "Used by `--spectrum-numberfield-focus-indicator-gap`.",
+ "control": "text",
+ "category": "Global"
+ },
+ "spectrum-numberfield-focus-indicator-color": {
+ "value": "var(--highcontrast-numberfield-focus-indicator-color, var(--mod-numberfield-focus-indicator-color, var(--spectrum-focus-indicator-color)))",
+ "description": "Defined in `.spectrum-NumberField`.
Used by `.spectrum-NumberField.is-keyboardFocused:not(.is-disabled, .is-readOnly) .spectrum-NumberField-inputs, .spectrum-NumberField:focus-visible .spectrum-NumberField-inputs`.
Defaults to `var(--highcontrast-numberfield-focus-indicator-color, var(--mod-numberfield-focus-indicator-color, var(--spectrum-focus-indicator-color)))`, if not set.",
+ "control": "color",
+ "category": "Global"
+ },
+ "spectrum-focus-indicator-color": {
+ "value": "var(--spectrum-blue-800)",
+ "description": "Used by `--spectrum-numberfield-focus-indicator-color`.",
+ "control": "color",
+ "category": "Global"
+ },
+ "spectrum-numberfield-block-size": {
+ "value": "var(--mod-numberfield-block-size, var(--spectrum-component-height-300))",
+ "description": "Defined in `.spectrum-NumberField`, `.spectrum-NumberField.spectrum-NumberField--sizeS`, `.spectrum-NumberField.spectrum-NumberField--sizeL`, `.spectrum-NumberField.spectrum-NumberField--sizeXL`.
Used by `--spectrum-numberfield-hidden-stepper-min-inline-size`, `--mod-textfield-height`.
Defaults to `var(--mod-numberfield-block-size, var(--spectrum-component-height-300))`, if not set.",
+ "control": "text",
+ "category": "Global"
+ },
+ "spectrum-component-height-100": {
+ "value": "32px",
+ "description": "Used by `--spectrum-numberfield-block-size`, `--spectrum-numberfield-button-container-size`.",
+ "control": "text",
+ "category": "Global"
+ },
+ "spectrum-numberfield-inline-size": {
+ "value": "var(--mod-numberfield-inline-size, var(--spectrum-field-default-width-extra-large))",
+ "description": "Defined in `.spectrum-NumberField`, `.spectrum-NumberField.spectrum-NumberField--sizeS`, `.spectrum-NumberField.spectrum-NumberField--sizeL`, `.spectrum-NumberField.spectrum-NumberField--sizeXL`.
Used by `.spectrum-NumberField`.
Defaults to `var(--mod-numberfield-inline-size, var(--spectrum-field-default-width-extra-large))`, if not set.",
+ "control": "text",
+ "category": "Global"
+ },
+ "spectrum-field-default-width-medium": {
+ "value": "208px",
+ "description": "Used by `--spectrum-numberfield-inline-size`.",
+ "control": "text",
+ "category": "Global"
+ },
+ "spectrum-numberfield-min-inline-size": {
+ "value": "var(--mod-numberfield-min-inline-size, var(--spectrum-number-field-with-stepper-minimum-width-extra-large))",
+ "description": "Defined in `.spectrum-NumberField`, `.spectrum-NumberField.spectrum-NumberField--sizeS`, `.spectrum-NumberField.spectrum-NumberField--sizeL`, `.spectrum-NumberField.spectrum-NumberField--sizeXL`.
Used by `.spectrum-NumberField`.
Defaults to `var(--mod-numberfield-min-inline-size, var(--spectrum-number-field-with-stepper-minimum-width-extra-large))`, if not set.",
+ "control": "text",
+ "category": "Global"
+ },
+ "spectrum-number-field-with-stepper-minimum-width-medium": {
+ "value": "120px",
+ "description": "Used by `--spectrum-numberfield-min-inline-size`.",
+ "control": "text",
+ "category": "Global"
+ },
+ "spectrum-numberfield-hidden-stepper-min-inline-size": {
+ "value": "calc(var(--spectrum-number-field-minimum-width-multiplier) * var(--spectrum-numberfield-block-size))",
+ "description": "Defined in `.spectrum-NumberField`.
Used by `.spectrum-NumberField.spectrum-NumberField--hiddenStepper`.
Defaults to `calc(var(--spectrum-number-field-minimum-width-multiplier) * var(--spectrum-numberfield-block-size))`, if not set.",
+ "control": "text",
+ "category": "Global"
+ },
+ "spectrum-number-field-minimum-width-multiplier": {
+ "value": "1.25",
+ "description": "Used by `--spectrum-numberfield-hidden-stepper-min-inline-size`.",
+ "control": "text",
+ "category": "Global"
+ },
+ "spectrum-numberfield-alert-icon-size": {
+ "value": "26px",
+ "description": "Defined in `.spectrum-NumberField`, `.spectrum-NumberField.spectrum-NumberField--sizeS`, `.spectrum-NumberField.spectrum-NumberField--sizeL`, `.spectrum-NumberField.spectrum-NumberField--sizeXL`.
Used by `.spectrum-NumberField.spectrum-NumberField--hiddenStepper .spectrum-NumberField-textfield .spectrum-NumberField-input`, `.spectrum-NumberField-inputs .spectrum-Textfield.is-invalid .spectrum-NumberField-input`.
Defaults to `var(--spectrum-workflow-icon-size-300)`, if not set.",
+ "control": "text",
+ "category": "Global"
+ },
+ "spectrum-workflow-icon-size-100": {
+ "value": "20px",
+ "description": "Used by `--spectrum-numberfield-alert-icon-size`.",
+ "control": "text",
+ "category": "Global"
+ },
+ "spectrum-numberfield-spacing-inline-edge-to-text": {
+ "value": "calc(var(--spectrum-component-edge-to-text-300) - var(--spectrum-numberfield-border-width))",
+ "description": "Defined in `.spectrum-NumberField`, `.spectrum-NumberField.spectrum-NumberField--sizeS`, `.spectrum-NumberField.spectrum-NumberField--sizeL`, `.spectrum-NumberField.spectrum-NumberField--sizeXL`.
Used by `.spectrum-NumberField.spectrum-NumberField--hiddenStepper .spectrum-NumberField-textfield`, `.spectrum-NumberField.spectrum-NumberField--hiddenStepper .spectrum-NumberField-textfield.spectrum-Textfield.is-invalid .spectrum-Textfield-validationIcon`, `.spectrum-NumberField-textfield`.
Defaults to `calc(var(--spectrum-component-edge-to-text-300) - var(--spectrum-numberfield-border-width))`, if not set.",
+ "control": "text",
+ "category": "Global"
+ },
+ "spectrum-component-edge-to-text-100": {
+ "value": "12px",
+ "description": "Used by `--spectrum-numberfield-spacing-inline-edge-to-text`.",
+ "control": "text",
+ "category": "Global"
+ },
+ "spectrum-numberfield-spacing-block-start-edge-to-text": {
+ "value": "12px",
+ "description": "Defined in `.spectrum-NumberField`, `.spectrum-NumberField.spectrum-NumberField--sizeS`, `.spectrum-NumberField.spectrum-NumberField--sizeL`, `.spectrum-NumberField.spectrum-NumberField--sizeXL`.
Used by `--mod-textfield-spacing-block-start`.
Defaults to `var(--spectrum-component-top-to-text-300)`, if not set.",
+ "control": "text",
+ "category": "Global"
+ },
+ "spectrum-component-top-to-text-100": {
+ "value": "6px",
+ "description": "Used by `--spectrum-numberfield-spacing-block-start-edge-to-text`.",
+ "control": "text",
+ "category": "Global"
+ },
+ "spectrum-numberfield-spacing-block-end-edge-to-text": {
+ "value": "14px",
+ "description": "Defined in `.spectrum-NumberField`, `.spectrum-NumberField.spectrum-NumberField--sizeS`, `.spectrum-NumberField.spectrum-NumberField--sizeL`, `.spectrum-NumberField.spectrum-NumberField--sizeXL`.
Used by `--mod-textfield-spacing-block-end`.
Defaults to `var(--spectrum-component-bottom-to-text-300)`, if not set.",
+ "control": "text",
+ "category": "Global"
+ },
+ "spectrum-component-bottom-to-text-100": {
+ "value": "9px",
+ "description": "Used by `--spectrum-numberfield-spacing-block-end-edge-to-text`.",
+ "control": "text",
+ "category": "Global"
+ },
+ "spectrum-numberfield-button-inline-padding": {
+ "value": "var(--spectrum-in-field-button-side-edge-to-fill-extra-large)",
+ "description": "Defined in `.spectrum-NumberField`, `.spectrum-NumberField.spectrum-NumberField--sizeS`, `.spectrum-NumberField.spectrum-NumberField--sizeL`, `.spectrum-NumberField.spectrum-NumberField--sizeXL`.
Used by `--spectrum-numberfield-spacing-min-inline-end-text-to-stepper`, `--spectrum-numberfield-spacing-validation-icon-to-stepper`.
Defaults to `var(--spectrum-in-field-button-side-edge-to-fill-extra-large)`, if not set.",
+ "control": "text",
+ "category": "Global"
+ },
+ "spectrum-in-field-button-side-edge-to-fill-medium": {
+ "description": "Used by `--spectrum-numberfield-button-inline-padding`.",
+ "control": "text",
+ "category": "Global"
+ },
+ "spectrum-numberfield-button-container-size": {
+ "value": "calc((var(--spectrum-component-height-300) - var(--spectrum-in-field-button-edge-to-fill-extra-large)) * 2)",
+ "description": "Defined in `.spectrum-NumberField`, `.spectrum-NumberField.spectrum-NumberField--sizeS`, `.spectrum-NumberField.spectrum-NumberField--sizeL`, `.spectrum-NumberField.spectrum-NumberField--sizeXL`.
Used by `.spectrum-NumberField-textfield`, `.spectrum-NumberField-textfield.spectrum-Textfield.is-invalid .spectrum-Textfield-validationIcon`.
Defaults to `calc((var(--spectrum-component-height-300) - var(--spectrum-in-field-button-edge-to-fill-extra-large)) * 2)`, if not set.",
+ "control": "text",
+ "category": "Global"
+ },
+ "spectrum-in-field-button-edge-to-fill-medium": {
+ "value": "6px",
+ "description": "Used by `--spectrum-numberfield-button-container-size`.",
+ "control": "text",
+ "category": "Global"
+ },
+ "spectrum-numberfield-button-inline-offset": {
+ "value": "var(--mod-numberfield-button-inline-offset, var(--spectrum-in-field-stepper-to-end-extra-large))",
+ "description": "Defined in `.spectrum-NumberField`, `.spectrum-NumberField.spectrum-NumberField--sizeS`, `.spectrum-NumberField.spectrum-NumberField--sizeL`, `.spectrum-NumberField.spectrum-NumberField--sizeXL`.
Used by `.spectrum-NumberField-textfield`, `.spectrum-NumberField-buttons`.
Defaults to `var(--mod-numberfield-button-inline-offset, var(--spectrum-in-field-stepper-to-end-extra-large))`, if not set.",
+ "control": "text",
+ "category": "Global"
+ },
+ "spectrum-in-field-stepper-to-end-medium": {
+ "value": "3px",
+ "description": "Used by `--spectrum-numberfield-button-inline-offset`.",
+ "control": "text",
+ "category": "Global"
+ },
+ "spectrum-numberfield-spacing-min-inline-end-text-to-stepper": {
+ "value": "calc(var(--spectrum-text-to-visual-300) - var(--spectrum-numberfield-button-inline-padding))",
+ "description": "Defined in `.spectrum-NumberField`, `.spectrum-NumberField.spectrum-NumberField--sizeS`, `.spectrum-NumberField.spectrum-NumberField--sizeL`, `.spectrum-NumberField.spectrum-NumberField--sizeXL`.
Used by `.spectrum-NumberField-input`.
Defaults to `calc(var(--spectrum-text-to-visual-300) - var(--spectrum-numberfield-button-inline-padding))`, if not set.",
+ "control": "text",
+ "category": "Global"
+ },
+ "spectrum-text-to-visual-100": {
+ "value": "6px",
+ "description": "Used by `--spectrum-numberfield-spacing-min-inline-end-text-to-stepper`, `--spectrum-numberfield-spacing-min-inline-end-value-to-icon`.",
+ "control": "text",
+ "category": "Global"
+ },
+ "spectrum-numberfield-spacing-min-inline-end-value-to-icon": {
+ "value": "8px",
+ "description": "Defined in `.spectrum-NumberField`, `.spectrum-NumberField.spectrum-NumberField--sizeS`, `.spectrum-NumberField.spectrum-NumberField--sizeL`, `.spectrum-NumberField.spectrum-NumberField--sizeXL`.
Used by `.spectrum-NumberField.spectrum-NumberField--hiddenStepper .spectrum-NumberField-textfield .spectrum-NumberField-input`, `.spectrum-NumberField-inputs .spectrum-Textfield.is-invalid .spectrum-NumberField-input`.
Defaults to `var(--spectrum-text-to-visual-300)`, if not set.",
+ "control": "text",
+ "category": "Global"
+ },
+ "spectrum-numberfield-spacing-field-to-helptext": {
+ "value": "0px",
+ "description": "Defined in `.spectrum-NumberField`.
Used by `.spectrum-NumberField-helpText`.
Defaults to `var(--spectrum-help-text-to-component)`, if not set.",
+ "control": "text",
+ "category": "Global"
+ },
+ "spectrum-help-text-to-component": {
+ "value": "0px",
+ "description": "Used by `--spectrum-numberfield-spacing-field-to-helptext`.",
+ "control": "text",
+ "category": "Global"
+ },
+ "spectrum-numberfield-spacing-label-to-field": {
+ "value": "0px",
+ "description": "Defined in `.spectrum-NumberField`.
Used by `.spectrum-NumberField-fieldLabel`.
Defaults to `var(--spectrum-field-label-to-component)`, if not set.",
+ "control": "text",
+ "category": "Global"
+ },
+ "spectrum-field-label-to-component": {
+ "value": "0px",
+ "description": "Used by `--spectrum-numberfield-spacing-label-to-field`.",
+ "control": "text",
+ "category": "Global"
+ },
+ "spectrum-numberfield-spacing-validation-icon-to-stepper": {
+ "value": "calc(var(--spectrum-number-field-visual-to-in-field-stepper-extra-large) - var(--spectrum-numberfield-button-inline-padding))",
+ "description": "Defined in `.spectrum-NumberField`, `.spectrum-NumberField.spectrum-NumberField--sizeS`, `.spectrum-NumberField.spectrum-NumberField--sizeL`, `.spectrum-NumberField.spectrum-NumberField--sizeXL`.
Used by `.spectrum-NumberField-inputs .spectrum-Textfield.is-invalid .spectrum-NumberField-input`, `.spectrum-NumberField-textfield.spectrum-Textfield.is-invalid .spectrum-Textfield-validationIcon`.
Defaults to `calc(var(--spectrum-number-field-visual-to-in-field-stepper-extra-large) - var(--spectrum-numberfield-button-inline-padding))`, if not set.",
+ "control": "text",
+ "category": "Global"
+ },
+ "spectrum-number-field-visual-to-in-field-stepper-medium": {
+ "value": "6px",
+ "description": "Used by `--spectrum-numberfield-spacing-validation-icon-to-stepper`.",
+ "control": "text",
+ "category": "Global"
+ },
+ "spectrum-numberfield-spacing-side-label-to-field": {
+ "value": "var(--spectrum-numberfield-spacing-side-label-to-field)",
+ "description": "Defined in `.spectrum-NumberField`.
Used by `.spectrum-NumberField.spectrum-NumberField--sideLabel .spectrum-NumberField-fieldLabel`.
Defaults to `var(--spectrum-numberfield-spacing-side-label-to-field)`, if not set.",
+ "control": "text",
+ "category": "Global"
+ },
+ "spectrum-spacing-200": {
+ "value": "12px",
+ "description": "Used by `--spectrum-numberfield-spacing-side-label-to-field`.",
+ "control": "text",
+ "category": "Global"
+ },
+ "spectrum-numberfield-spacing-block-start-edge-to-alert-icon": {
+ "value": "11px",
+ "description": "Defined in `.spectrum-NumberField`, `.spectrum-NumberField.spectrum-NumberField--sizeS`, `.spectrum-NumberField.spectrum-NumberField--sizeL`, `.spectrum-NumberField.spectrum-NumberField--sizeXL`.
Used by `--mod-textfield-icon-spacing-block-invalid`.
Defaults to `var(--spectrum-component-top-to-workflow-icon-300)`, if not set.",
+ "control": "text",
+ "category": "Global"
+ },
+ "spectrum-component-top-to-workflow-icon-100": {
+ "value": "6px",
+ "description": "Used by `--spectrum-numberfield-spacing-block-start-edge-to-alert-icon`, `--spectrum-numberfield-spacing-block-end-edge-to-alert-icon`.",
+ "control": "text",
+ "category": "Global"
+ },
+ "spectrum-numberfield-spacing-block-end-edge-to-alert-icon": {
+ "value": "11px",
+ "description": "Defined in `.spectrum-NumberField`, `.spectrum-NumberField.spectrum-NumberField--sizeS`, `.spectrum-NumberField.spectrum-NumberField--sizeL`, `.spectrum-NumberField.spectrum-NumberField--sizeXL`.
Defaults to `var(--spectrum-component-top-to-workflow-icon-300)`, if not set.",
+ "control": "text",
+ "category": "Global"
+ },
+ "spectrum-corner-radius-medium-size-small": {
+ "value": "7px",
+ "description": "Used by `--spectrum-numberfield-border-radius`.",
+ "control": "text",
+ "category": "Global"
+ },
+ "spectrum-component-height-75": {
+ "value": "24px",
+ "description": "Used by `--spectrum-numberfield-block-size`, `--spectrum-numberfield-button-container-size`.",
+ "control": "text",
+ "category": "Global"
+ },
+ "spectrum-field-default-width-small": {
+ "value": "192px",
+ "description": "Used by `--spectrum-numberfield-inline-size`.",
+ "control": "text",
+ "category": "Global"
+ },
+ "spectrum-number-field-with-stepper-minimum-width-small": {
+ "value": "104px",
+ "description": "Used by `--spectrum-numberfield-min-inline-size`.",
+ "control": "text",
+ "category": "Global"
+ },
+ "spectrum-component-edge-to-text-75": {
+ "value": "9px",
+ "description": "Used by `--spectrum-numberfield-spacing-inline-edge-to-text`.",
+ "control": "text",
+ "category": "Global"
+ },
+ "spectrum-font-size-75": {
+ "value": "12px",
+ "description": "Used by `--spectrum-numberfield-font-size`.",
+ "control": "text",
+ "category": "Global"
+ },
+ "spectrum-component-top-to-text-75": {
+ "value": "4px",
+ "description": "Used by `--spectrum-numberfield-spacing-block-start-edge-to-text`.",
+ "control": "text",
+ "category": "Global"
+ },
+ "spectrum-component-bottom-to-text-75": {
+ "value": "5px",
+ "description": "Used by `--spectrum-numberfield-spacing-block-end-edge-to-text`.",
+ "control": "text",
+ "category": "Global"
+ },
+ "spectrum-text-to-visual-75": {
+ "value": "5px",
+ "description": "Used by `--spectrum-numberfield-spacing-min-inline-end-text-to-stepper`, `--spectrum-numberfield-spacing-min-inline-end-value-to-icon`.",
+ "control": "text",
+ "category": "Global"
+ },
+ "spectrum-number-field-visual-to-in-field-stepper-small": {
+ "value": "5px",
+ "description": "Used by `--spectrum-numberfield-spacing-validation-icon-to-stepper`.",
+ "control": "text",
+ "category": "Global"
+ },
+ "spectrum-in-field-button-side-edge-to-fill-small": {
+ "description": "Used by `--spectrum-numberfield-button-inline-padding`.",
+ "control": "text",
+ "category": "Global"
+ },
+ "spectrum-in-field-stepper-to-end-small": {
+ "value": "0px",
+ "description": "Used by `--spectrum-numberfield-button-inline-offset`.",
+ "control": "text",
+ "category": "Global"
+ },
+ "spectrum-component-top-to-workflow-icon-75": {
+ "value": "4px",
+ "description": "Used by `--spectrum-numberfield-spacing-block-start-edge-to-alert-icon`, `--spectrum-numberfield-spacing-block-end-edge-to-alert-icon`.",
+ "control": "text",
+ "category": "Global"
+ },
+ "spectrum-workflow-icon-size-75": {
+ "value": "16px",
+ "description": "Used by `--spectrum-numberfield-alert-icon-size`.",
+ "control": "text",
+ "category": "Global"
+ },
+ "spectrum-corner-radius-medium-size-large": {
+ "value": "9px",
+ "description": "Used by `--spectrum-numberfield-border-radius`.",
+ "control": "text",
+ "category": "Global"
+ },
+ "spectrum-component-height-200": {
+ "value": "40px",
+ "description": "Used by `--spectrum-numberfield-block-size`, `--spectrum-numberfield-button-container-size`.",
+ "control": "text",
+ "category": "Global"
+ },
+ "spectrum-field-default-width-large": {
+ "value": "224px",
+ "description": "Used by `--spectrum-numberfield-inline-size`.",
+ "control": "text",
+ "category": "Global"
+ },
+ "spectrum-number-field-with-stepper-minimum-width-large": {
+ "value": "144px",
+ "description": "Used by `--spectrum-numberfield-min-inline-size`.",
+ "control": "text",
+ "category": "Global"
+ },
+ "spectrum-component-edge-to-text-200": {
+ "value": "15px",
+ "description": "Used by `--spectrum-numberfield-spacing-inline-edge-to-text`.",
+ "control": "text",
+ "category": "Global"
+ },
+ "spectrum-font-size-200": {
+ "value": "16px",
+ "description": "Used by `--spectrum-numberfield-font-size`.",
+ "control": "text",
+ "category": "Global"
+ },
+ "spectrum-component-top-to-text-200": {
+ "value": "9px",
+ "description": "Used by `--spectrum-numberfield-spacing-block-start-edge-to-text`.",
+ "control": "text",
+ "category": "Global"
+ },
+ "spectrum-component-bottom-to-text-200": {
+ "value": "11px",
+ "description": "Used by `--spectrum-numberfield-spacing-block-end-edge-to-text`.",
+ "control": "text",
+ "category": "Global"
+ },
+ "spectrum-text-to-visual-200": {
+ "value": "7px",
+ "description": "Used by `--spectrum-numberfield-spacing-min-inline-end-text-to-stepper`, `--spectrum-numberfield-spacing-min-inline-end-value-to-icon`.",
+ "control": "text",
+ "category": "Global"
+ },
+ "spectrum-number-field-visual-to-in-field-stepper-large": {
+ "value": "7px",
+ "description": "Used by `--spectrum-numberfield-spacing-validation-icon-to-stepper`.",
+ "control": "text",
+ "category": "Global"
+ },
+ "spectrum-in-field-button-side-edge-to-fill-large": {
+ "description": "Used by `--spectrum-numberfield-button-inline-padding`.",
+ "control": "text",
+ "category": "Global"
+ },
+ "spectrum-in-field-button-edge-to-fill-large": {
+ "value": "8px",
+ "description": "Used by `--spectrum-numberfield-button-container-size`.",
+ "control": "text",
+ "category": "Global"
+ },
+ "spectrum-in-field-stepper-to-end-large": {
+ "value": "4px",
+ "description": "Used by `--spectrum-numberfield-button-inline-offset`.",
+ "control": "text",
+ "category": "Global"
+ },
+ "spectrum-component-top-to-workflow-icon-200": {
+ "value": "9px",
+ "description": "Used by `--spectrum-numberfield-spacing-block-start-edge-to-alert-icon`, `--spectrum-numberfield-spacing-block-end-edge-to-alert-icon`.",
+ "control": "text",
+ "category": "Global"
+ },
+ "spectrum-workflow-icon-size-200": {
+ "value": "22px",
+ "description": "Used by `--spectrum-numberfield-alert-icon-size`.",
+ "control": "text",
+ "category": "Global"
+ },
+ "spectrum-corner-radius-medium-size-extra-large": {
+ "value": "10px",
+ "description": "Used by `--spectrum-numberfield-border-radius`.",
+ "control": "text",
+ "category": "Global"
+ },
+ "spectrum-component-height-300": {
+ "value": "48px",
+ "description": "Used by `--spectrum-numberfield-block-size`, `--spectrum-numberfield-button-container-size`.",
+ "control": "text",
+ "category": "Global"
+ },
+ "spectrum-field-default-width-extra-large": {
+ "value": "240px",
+ "description": "Used by `--spectrum-numberfield-inline-size`.",
+ "control": "text",
+ "category": "Global"
+ },
+ "spectrum-number-field-with-stepper-minimum-width-extra-large": {
+ "value": "168px",
+ "description": "Used by `--spectrum-numberfield-min-inline-size`.",
+ "control": "text",
+ "category": "Global"
+ },
+ "spectrum-component-edge-to-text-300": {
+ "value": "18px",
+ "description": "Used by `--spectrum-numberfield-spacing-inline-edge-to-text`.",
+ "control": "text",
+ "category": "Global"
+ },
+ "spectrum-font-size-300": {
+ "value": "18px",
+ "description": "Used by `--spectrum-numberfield-font-size`.",
+ "control": "text",
+ "category": "Global"
+ },
+ "spectrum-component-top-to-text-300": {
+ "value": "12px",
+ "description": "Used by `--spectrum-numberfield-spacing-block-start-edge-to-text`.",
+ "control": "text",
+ "category": "Global"
+ },
+ "spectrum-component-bottom-to-text-300": {
+ "value": "14px",
+ "description": "Used by `--spectrum-numberfield-spacing-block-end-edge-to-text`.",
+ "control": "text",
+ "category": "Global"
+ },
+ "spectrum-text-to-visual-300": {
+ "value": "8px",
+ "description": "Used by `--spectrum-numberfield-spacing-min-inline-end-text-to-stepper`, `--spectrum-numberfield-spacing-min-inline-end-value-to-icon`.",
+ "control": "text",
+ "category": "Global"
+ },
+ "spectrum-number-field-visual-to-in-field-stepper-extra-large": {
+ "value": "8px",
+ "description": "Used by `--spectrum-numberfield-spacing-validation-icon-to-stepper`.",
+ "control": "text",
+ "category": "Global"
+ },
+ "spectrum-in-field-button-side-edge-to-fill-extra-large": {
+ "description": "Used by `--spectrum-numberfield-button-inline-padding`.",
+ "control": "text",
+ "category": "Global"
+ },
+ "spectrum-in-field-button-edge-to-fill-extra-large": {
+ "value": "8px",
+ "description": "Used by `--spectrum-numberfield-button-container-size`.",
+ "control": "text",
+ "category": "Global"
+ },
+ "spectrum-in-field-stepper-to-end-extra-large": {
+ "value": "4px",
+ "description": "Used by `--spectrum-numberfield-button-inline-offset`.",
+ "control": "text",
+ "category": "Global"
+ },
+ "spectrum-component-top-to-workflow-icon-300": {
+ "value": "11px",
+ "description": "Used by `--spectrum-numberfield-spacing-block-start-edge-to-alert-icon`, `--spectrum-numberfield-spacing-block-end-edge-to-alert-icon`.",
+ "control": "text",
+ "category": "Global"
+ },
+ "spectrum-workflow-icon-size-300": {
+ "value": "26px",
+ "description": "Used by `--spectrum-numberfield-alert-icon-size`.",
+ "control": "text",
+ "category": "Global"
+ },
+ "spectrum-cjk-line-height-100": {
+ "value": "1.5",
+ "description": "Used by `--spectrum-numberfield-line-height`.",
+ "control": "text",
+ "category": "Global"
+ }
+ },
+ "passthroughs": {
+ "mod-textfield-spacing-block-start": {
+ "category": "Passthrough"
+ },
+ "mod-textfield-spacing-block-end": {
+ "category": "Passthrough"
+ },
+ "mod-textfield-icon-spacing-block-invalid": {
+ "category": "Passthrough"
+ },
+ "mod-textfield-width": {
+ "category": "Passthrough"
+ },
+ "mod-textfield-height": {
+ "category": "Passthrough"
+ },
+ "mod-textfield-background-color": {
+ "category": "Passthrough"
+ },
+ "mod-textfield-text-color-default": {
+ "category": "Passthrough"
+ },
+ "mod-textfield-text-color-disabled": {
+ "category": "Passthrough"
+ },
+ "mod-textfield-background-color-disabled": {
+ "category": "Passthrough"
+ },
+ "mod-textfield-font-family": {
+ "category": "Passthrough"
+ },
+ "mod-textfield-font-weight": {
+ "category": "Passthrough"
+ },
+ "mod-textfield-font-style": {
+ "category": "Passthrough"
+ },
+ "mod-textfield-font-size": {
+ "category": "Passthrough"
+ },
+ "mod-textfield-text-color-focus": {
+ "category": "Passthrough"
+ }
+ },
+ "high-contrast": {
+ "highcontrast-numberfield-border-color": {
+ "value": "var(--mod-numberfield-border-color, var(--spectrum-gray-300))",
+ "description": "Defined in `.spectrum-NumberField`, `.spectrum-NumberField.is-invalid`, `.spectrum-NumberField.is-disabled`, `.spectrum-NumberField.is-hover:not(.is-disabled)`, `.spectrum-NumberField.is-focused:not(.is-disabled), .spectrum-NumberField:not(.is-disabled):focus, .spectrum-NumberField:not(.is-disabled):focus-within`, `.spectrum-NumberField.is-focused.is-hover:not(.is-disabled), .spectrum-NumberField.is-hover:not(.is-disabled):focus, .spectrum-NumberField.is-hover:not(.is-disabled):focus-within`, `.spectrum-NumberField.is-keyboardFocused:not(.is-disabled), .spectrum-NumberField:not(.is-disabled):focus-visible, .spectrum-NumberField:not(.is-disabled):focus-within`, `.spectrum-NumberField.is-hover:not(.is-disabled):focus-visible, .spectrum-NumberField.is-hover:not(.is-disabled):focus-within, .spectrum-NumberField.is-keyboardFocused.is-hover:not(.is-disabled)`, `.spectrum-NumberField:not(.is-disabled):hover`, `.spectrum-NumberField.is-focused:not(.is-disabled):hover, \t.spectrum-NumberField.is-keyboardFocused:not(.is-disabled):hover, \t.spectrum-NumberField:not(.is-disabled):focus-visible:hover, \t.spectrum-NumberField:not(.is-disabled):focus-within:hover, \t.spectrum-NumberField:not(.is-disabled):focus:hover`.
Used by `--spectrum-numberfield-border-color-default`, `--highcontrast-textfield-border-color`.
Defaults to `var(--mod-numberfield-border-color, var(--spectrum-gray-300))`, if not set.",
+ "control": "color"
+ },
+ "highcontrast-numberfield-border-color-hover": {
+ "value": "var(--mod-numberfield-border-color-hover, var(--spectrum-numberfield-border-color-hover))",
+ "description": "Defined in `.spectrum-NumberField`, `.spectrum-NumberField.is-invalid`.
Used by `--spectrum-numberfield-border-color-hover`, `--mod-numberfield-border-color`, `--highcontrast-numberfield-border-color`.
Defaults to `var(--mod-numberfield-border-color-hover, var(--spectrum-numberfield-border-color-hover))`, if not set.",
+ "control": "color"
+ },
+ "highcontrast-numberfield-border-color-focus": {
+ "value": "var(--mod-numberfield-border-color-keyboard-focus, var(--spectrum-numberfield-border-color-keyboard-focus))",
+ "description": "Defined in `.spectrum-NumberField`, `.spectrum-NumberField.is-invalid`.
Used by `--spectrum-numberfield-border-color-focus`, `--mod-numberfield-border-color`, `--highcontrast-numberfield-border-color`.
Defaults to `var(--mod-numberfield-border-color-keyboard-focus, var(--spectrum-numberfield-border-color-keyboard-focus))`, if not set.",
+ "control": "color"
+ },
+ "highcontrast-numberfield-border-color-keyboard-focus": {
+ "value": "var(--mod-numberfield-border-color-keyboard-focus, var(--spectrum-gray-800))",
+ "description": "Defined in `.spectrum-NumberField`, `.spectrum-NumberField.is-invalid`.
Used by `--spectrum-numberfield-border-color-keyboard-focus`, `--highcontrast-numberfield-border-color`.
Defaults to `var(--mod-numberfield-border-color-keyboard-focus, var(--spectrum-gray-800))`, if not set.",
+ "control": "color"
+ },
+ "highcontrast-numberfield-border-color-focus-hover": {
+ "value": "var(--mod-numberfield-border-color-focus-hover, var(--spectrum-numberfield-border-color-focus-hover))",
+ "description": "Defined in `.spectrum-NumberField`, `.spectrum-NumberField.is-invalid`.
Used by `--spectrum-numberfield-border-color-focus-hover`, `--mod-numberfield-border-color`, `--highcontrast-numberfield-border-color`.
Defaults to `var(--mod-numberfield-border-color-focus-hover, var(--spectrum-numberfield-border-color-focus-hover))`, if not set.",
+ "control": "color"
+ },
+ "highcontrast-numberfield-background-color": {
+ "value": "var(--mod-numberfield-background-color, var(--spectrum-gray-25))",
+ "description": "Defined in `.spectrum-NumberField`.
Used by `--spectrum-numberfield-background-color`.
Defaults to `var(--mod-numberfield-background-color, var(--spectrum-gray-25))`, if not set.",
+ "control": "color"
+ },
+ "highcontrast-numberfield-focus-indicator-color": {
+ "value": "var(--mod-numberfield-focus-indicator-color, var(--spectrum-focus-indicator-color))",
+ "description": "Defined in `.spectrum-NumberField`.
Used by `--spectrum-numberfield-focus-indicator-color`.
Defaults to `var(--mod-numberfield-focus-indicator-color, var(--spectrum-focus-indicator-color))`, if not set.",
+ "control": "color"
+ },
+ "highcontrast-textfield-border-color": {
+ "value": "var(--highcontrast-numberfield-border-color)",
+ "description": "Defined in `.spectrum-NumberField-textfield`.
Defaults to `var(--highcontrast-numberfield-border-color)`, if not set.",
+ "control": "color"
+ }
+ }
}
diff --git a/components/stepper/stories/stepper.stories.js b/components/stepper/stories/stepper.stories.js
index bd51dd147ca..367f4bda2de 100644
--- a/components/stepper/stories/stepper.stories.js
+++ b/components/stepper/stories/stepper.stories.js
@@ -2,11 +2,13 @@ import { Sizes, withDownStateDimensionCapture } from "@spectrum-css/preview/deco
import { disableDefaultModes } from "@spectrum-css/preview/modes";
import { isDisabled, isFocused, isHovered, isKeyboardFocused, isReadOnly, size } from "@spectrum-css/preview/types";
import { default as TextfieldStories } from "@spectrum-css/textfield/stories/textfield.stories.js";
-import metadata from "../dist/metadata.json";
-import packageJson from "../package.json";
import { NumberFieldGroup } 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 number field can be used to increment or decrement a value by a specified amount via add and subtract buttons. The input field displays the current value.
*
@@ -80,15 +82,7 @@ export default {
},
packageJson,
metadata,
- actions: {
- handles: ["click .spectrum-InfieldButton:not([disabled])"],
- },
- downState: {
- selectors: [".spectrum-InfieldButton:not(:disabled)"],
- },
- status: {
- type: "migrated",
- },
+ cssprops: metadata.modifiers,
},
tags: ["migrated"],
decorators: [
diff --git a/components/swatch/dist/metadata.json b/components/swatch/dist/metadata.json
index 5b40e74c96e..07a2c799adb 100644
--- a/components/swatch/dist/metadata.json
+++ b/components/swatch/dist/metadata.json
@@ -5,20 +5,20 @@
".spectrum-Swatch .spectrum-Swatch-disabledIcon",
".spectrum-Swatch .spectrum-Swatch-fill",
".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--sizeS",
".spectrum-Swatch--sizeXS",
@@ -29,13 +29,15 @@
".spectrum-Swatch-fill:before",
".spectrum-Swatch-icon",
".spectrum-Swatch-image",
+ ".spectrum-Swatch:before",
+ ".spectrum-Swatch:focus-visible",
".spectrum-Swatch.is-addSwatch",
".spectrum-Swatch.is-addSwatch .spectrum-Swatch-fill",
".spectrum-Swatch.is-addSwatch .spectrum-Swatch-icon",
- ".spectrum-Swatch.is-addSwatch.is-keyboardFocused",
".spectrum-Swatch.is-addSwatch:active",
".spectrum-Swatch.is-addSwatch:focus-visible",
".spectrum-Swatch.is-addSwatch:hover",
+ ".spectrum-Swatch.is-addSwatch.is-keyboardFocused",
".spectrum-Swatch.is-disabled",
".spectrum-Swatch.is-disabled .spectrum-Swatch-disabledIcon",
".spectrum-Swatch.is-image .spectrum-Swatch-fill:before",
@@ -43,110 +45,500 @@
".spectrum-Swatch.is-mixedValue",
".spectrum-Swatch.is-mixedValue .spectrum-Swatch-fill",
".spectrum-Swatch.is-mixedValue .spectrum-Swatch-icon",
- ".spectrum-Swatch.is-nothing.spectrum-Swatch--rectangle:not(.spectrum-Swatch.is-mixedValue, .spectrum-Swatch.is-addSwatch) .spectrum-Swatch-fill:after",
".spectrum-Swatch.is-nothing:not(.spectrum-Swatch.is-mixedValue, .spectrum-Swatch.is-addSwatch) .spectrum-Swatch-fill",
".spectrum-Swatch.is-nothing:not(.spectrum-Swatch.is-mixedValue, .spectrum-Swatch.is-addSwatch) .spectrum-Swatch-fill:after",
+ ".spectrum-Swatch.is-nothing.spectrum-Swatch--rectangle:not(.spectrum-Swatch.is-mixedValue, .spectrum-Swatch.is-addSwatch) .spectrum-Swatch-fill:after",
".spectrum-Swatch.is-selected",
".spectrum-Swatch.is-selected .spectrum-Swatch-fill",
".spectrum-Swatch.is-selected .spectrum-Swatch-fill:before",
".spectrum-Swatch.is-selected:before",
- ".spectrum-Swatch:before",
- ".spectrum-Swatch:focus-visible",
".spectrum-Swatch[disabled]",
".spectrum-Swatch[disabled] .spectrum-Swatch-disabledIcon"
],
- "modifiers": [
- "--mod-add-button-background",
- "--mod-add-button-background-down",
- "--mod-add-button-background-hover",
- "--mod-add-button-background-keyboard-focus",
- "--mod-animation-duration-100",
- "--mod-corner-radius-full",
- "--mod-mixed-button-background",
- "--mod-swatch-border",
- "--mod-swatch-border-color",
- "--mod-swatch-border-color-selected",
- "--mod-swatch-border-opacity",
- "--mod-swatch-border-radius",
- "--mod-swatch-border-thickness",
- "--mod-swatch-border-thickness-selected",
- "--mod-swatch-disabled-icon-color",
- "--mod-swatch-disabled-icon-size",
- "--mod-swatch-focus-indicator-color",
- "--mod-swatch-focus-indicator-gap",
- "--mod-swatch-focus-indicator-thickness",
- "--mod-swatch-icon-border-color",
- "--mod-swatch-icon-color",
- "--mod-swatch-inner-border-color-selected",
- "--mod-swatch-size",
- "--mod-swatch-slash-icon-color",
- "--mod-swatch-slash-thickness"
- ],
- "component": [
- "--spectrum-swatch-border",
- "--spectrum-swatch-border-color",
- "--spectrum-swatch-border-color-selected",
- "--spectrum-swatch-border-opacity",
- "--spectrum-swatch-border-radius",
- "--spectrum-swatch-border-thickness",
- "--spectrum-swatch-border-thickness-selected",
- "--spectrum-swatch-disabled-icon-border-opacity",
- "--spectrum-swatch-disabled-icon-color",
- "--spectrum-swatch-disabled-icon-size",
- "--spectrum-swatch-focus-indicator-color",
- "--spectrum-swatch-focus-indicator-gap",
- "--spectrum-swatch-focus-indicator-thickness",
- "--spectrum-swatch-icon-border-color",
- "--spectrum-swatch-icon-color",
- "--spectrum-swatch-inner-border-color-selected",
- "--spectrum-swatch-rectangle-width-multiplier",
- "--spectrum-swatch-size",
- "--spectrum-swatch-size-extra-small",
- "--spectrum-swatch-size-large",
- "--spectrum-swatch-size-medium",
- "--spectrum-swatch-size-small",
- "--spectrum-swatch-slash-icon-color",
- "--spectrum-swatch-slash-thickness",
- "--spectrum-swatch-slash-thickness-extra-small",
- "--spectrum-swatch-slash-thickness-large",
- "--spectrum-swatch-slash-thickness-medium",
- "--spectrum-swatch-slash-thickness-small"
- ],
- "global": [
- "--spectrum-add-button-background",
- "--spectrum-add-button-background-down",
- "--spectrum-add-button-background-hover",
- "--spectrum-add-button-background-keyboard-focus",
- "--spectrum-animation-duration-100",
- "--spectrum-border-width-100",
- "--spectrum-border-width-200",
- "--spectrum-corner-radius-100",
- "--spectrum-corner-radius-full",
- "--spectrum-corner-radius-none",
- "--spectrum-focus-indicator-color",
- "--spectrum-focus-indicator-gap",
- "--spectrum-focus-indicator-thickness",
- "--spectrum-gray-100",
- "--spectrum-gray-1000",
- "--spectrum-gray-200",
- "--spectrum-gray-25",
- "--spectrum-mixed-button-background",
- "--spectrum-negative-visual-color",
- "--spectrum-neutral-content-color-default",
- "--spectrum-picked-color",
- "--spectrum-white",
- "--spectrum-workflow-icon-size-200",
- "--spectrum-workflow-icon-size-50",
- "--spectrum-workflow-icon-size-75"
- ],
- "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",
- "--highcontrast-swatch-icon-color"
- ]
+ "modifiers": {
+ "mod-swatch-icon-border-color": {
+ "description": "Used by `--spectrum-swatch-icon-border-color`.
Defaults to `rgb(0 0 0 / var(--spectrum-swatch-disabled-icon-border-opacity))`, if not set.",
+ "control": "color",
+ "category": "Modifier"
+ },
+ "mod-swatch-size": {
+ "description": "Used by `--spectrum-swatch-size`.
Defaults to `var(--spectrum-swatch-size-large)`, if not set.",
+ "control": "text",
+ "category": "Modifier"
+ },
+ "mod-swatch-border-radius": {
+ "description": "Used by `--spectrum-swatch-border-radius`, `.spectrum-Swatch-fill, .spectrum-Swatch-fill:before`.
Defaults to `var(--spectrum-swatch-border-radius)`, if not set.",
+ "control": "text",
+ "category": "Modifier"
+ },
+ "mod-swatch-border-thickness": {
+ "description": "Used by `--spectrum-swatch-border-thickness`, `.spectrum-Swatch-fill:before`.
Defaults to `var(--spectrum-swatch-border-thickness)`, if not set.",
+ "control": "text",
+ "category": "Modifier"
+ },
+ "mod-swatch-border-thickness-selected": {
+ "description": "Used by `--spectrum-swatch-border-thickness-selected`.
Defaults to `var(--spectrum-border-width-200)`, if not set.",
+ "control": "text",
+ "category": "Modifier"
+ },
+ "mod-swatch-disabled-icon-size": {
+ "description": "Used by `--spectrum-swatch-disabled-icon-size`.
Defaults to `var(--spectrum-workflow-icon-size-200)`, if not set.",
+ "control": "text",
+ "category": "Modifier"
+ },
+ "mod-swatch-slash-thickness": {
+ "description": "Used by `--spectrum-swatch-slash-thickness`.
Defaults to `var(--spectrum-swatch-slash-thickness-large)`, if not set.",
+ "control": "text",
+ "category": "Modifier"
+ },
+ "mod-swatch-border-color-selected": {
+ "description": "Used by `--spectrum-swatch-border-color-selected`.
Defaults to `var(--spectrum-gray-1000)`, if not set.",
+ "control": "color",
+ "category": "Modifier"
+ },
+ "mod-swatch-inner-border-color-selected": {
+ "description": "Used by `--spectrum-swatch-inner-border-color-selected`.
Defaults to `var(--spectrum-gray-25)`, if not set.",
+ "control": "color",
+ "category": "Modifier"
+ },
+ "mod-swatch-disabled-icon-color": {
+ "description": "Used by `--spectrum-swatch-disabled-icon-color`.
Defaults to `var(--spectrum-white)`, if not set.",
+ "control": "color",
+ "category": "Modifier"
+ },
+ "mod-swatch-icon-color": {
+ "description": "Used by `--spectrum-swatch-icon-color`.
Defaults to `var(--spectrum-neutral-content-color-default)`, if not set.",
+ "control": "color",
+ "category": "Modifier"
+ },
+ "mod-swatch-slash-icon-color": {
+ "description": "Used by `--spectrum-swatch-slash-icon-color`.
Defaults to `var(--spectrum-negative-visual-color)`, if not set.",
+ "control": "color",
+ "category": "Modifier"
+ },
+ "mod-swatch-border-color": {
+ "description": "Used by `--spectrum-swatch-border`.
Defaults to `var(--spectrum-swatch-border-color)`, if not set.",
+ "control": "color",
+ "category": "Modifier"
+ },
+ "mod-swatch-border-opacity": {
+ "description": "Used by `--spectrum-swatch-border`.
Defaults to `var(--spectrum-swatch-border-opacity)`, if not set.",
+ "control": "text",
+ "category": "Modifier"
+ },
+ "mod-swatch-focus-indicator-color": {
+ "description": "Used by `--spectrum-swatch-focus-indicator-color`, `.spectrum-Swatch.is-keyboardFocused, .spectrum-Swatch:focus-visible`.
Defaults to `var(--spectrum-swatch-focus-indicator-color)`, if not set.",
+ "control": "color",
+ "category": "Modifier"
+ },
+ "mod-swatch-focus-indicator-thickness": {
+ "description": "Used by `--spectrum-swatch-focus-indicator-thickness`, `.spectrum-Swatch.is-keyboardFocused, .spectrum-Swatch:focus-visible`.
Defaults to `var(--spectrum-swatch-focus-indicator-thickness)`, if not set.",
+ "control": "text",
+ "category": "Modifier"
+ },
+ "mod-swatch-focus-indicator-gap": {
+ "description": "Used by `--spectrum-swatch-focus-indicator-gap`, `.spectrum-Swatch.is-keyboardFocused, .spectrum-Swatch:focus-visible`.
Defaults to `var(--spectrum-swatch-focus-indicator-gap)`, if not set.",
+ "control": "text",
+ "category": "Modifier"
+ },
+ "mod-mixed-button-background": {
+ "description": "Defined in `.spectrum-Swatch`.
Used by `--spectrum-picked-color`.
Defaults to `var(--spectrum-mixed-button-background)`, if not set.",
+ "control": "text",
+ "category": "Modifier"
+ },
+ "mod-add-button-background": {
+ "description": "Defined in `.spectrum-Swatch`.
Used by `--spectrum-picked-color`.
Defaults to `var(--spectrum-add-button-background)`, if not set.",
+ "control": "text",
+ "category": "Modifier"
+ },
+ "mod-add-button-background-down": {
+ "description": "Defined in `.spectrum-Swatch`.
Used by `--spectrum-picked-color`.
Defaults to `var(--spectrum-add-button-background-down)`, if not set.",
+ "control": "text",
+ "category": "Modifier"
+ },
+ "mod-add-button-background-hover": {
+ "description": "Defined in `.spectrum-Swatch`.
Used by `--spectrum-picked-color`.
Defaults to `var(--spectrum-add-button-background-hover)`, if not set.",
+ "control": "text",
+ "category": "Modifier"
+ },
+ "mod-add-button-background-keyboard-focus": {
+ "description": "Used by `--spectrum-picked-color`.
Defaults to `var(--spectrum-add-button-background-keyboard-focus)`, if not set.",
+ "control": "text",
+ "category": "Modifier"
+ },
+ "mod-animation-duration-100": {
+ "description": "Used by `.spectrum-Swatch.is-keyboardFocused, .spectrum-Swatch:focus-visible`, `.spectrum-Swatch-image`.
Defaults to `var(--spectrum-animation-duration-100)`, if not set.",
+ "control": "text",
+ "category": "Modifier"
+ },
+ "mod-swatch-border": {
+ "description": "Used by `.spectrum-Swatch-fill:before`.
Defaults to `var(--spectrum-swatch-border)`, if not set.",
+ "control": "text",
+ "category": "Modifier"
+ },
+ "mod-corner-radius-full": {
+ "description": "Used by `.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`.
Defaults to `var(--spectrum-corner-radius-full)`, if not set.",
+ "control": "text",
+ "category": "Modifier"
+ }
+ },
+ "component": {
+ "spectrum-swatch-icon-border-color": {
+ "value": "var(--mod-swatch-icon-border-color, rgb(0 0 0 / var(--spectrum-swatch-disabled-icon-border-opacity)))",
+ "description": "Defined in `.spectrum-Swatch`.
Used by `.spectrum-Swatch-disabledIcon path:last-child`.
Defaults to `var(--mod-swatch-icon-border-color, rgb(0 0 0 / var(--spectrum-swatch-disabled-icon-border-opacity)))`, if not set.",
+ "control": "color",
+ "category": "Component"
+ },
+ "spectrum-swatch-disabled-icon-border-opacity": {
+ "value": "0.42",
+ "description": "Used by `--spectrum-swatch-icon-border-color`.",
+ "control": "text",
+ "category": "Component"
+ },
+ "spectrum-swatch-size": {
+ "value": "var(--mod-swatch-size, var(--spectrum-swatch-size-large))",
+ "description": "Defined in `.spectrum-Swatch`, `.spectrum-Swatch--sizeXS`, `.spectrum-Swatch--sizeS`, `.spectrum-Swatch--sizeL`.
Used by `.spectrum-Swatch`, `.spectrum-Swatch--rectangle`.
Defaults to `var(--mod-swatch-size, var(--spectrum-swatch-size-large))`, if not set.",
+ "control": "text",
+ "category": "Component"
+ },
+ "spectrum-swatch-size-medium": {
+ "value": "32px",
+ "description": "Used by `--spectrum-swatch-size`.",
+ "control": "text",
+ "category": "Component"
+ },
+ "spectrum-swatch-border-radius": {
+ "value": "var(--mod-swatch-border-radius, var(--spectrum-corner-radius-100))",
+ "description": "Defined in `.spectrum-Swatch`.
Used by `.spectrum-Swatch, .spectrum-Swatch:before`, `.spectrum-Swatch-fill, .spectrum-Swatch-fill:before`.
Defaults to `var(--mod-swatch-border-radius, var(--spectrum-corner-radius-100))`, if not set.",
+ "control": "text",
+ "category": "Component"
+ },
+ "spectrum-swatch-border-thickness": {
+ "value": "var(--mod-swatch-border-thickness, var(--spectrum-border-width-100))",
+ "description": "Defined in `.spectrum-Swatch`.
Used by `.spectrum-Swatch-fill:before`.
Defaults to `var(--mod-swatch-border-thickness, var(--spectrum-border-width-100))`, if not set.",
+ "control": "text",
+ "category": "Component"
+ },
+ "spectrum-swatch-border-thickness-selected": {
+ "value": "var(--mod-swatch-border-thickness-selected, var(--spectrum-border-width-200))",
+ "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`.
Defaults to `var(--mod-swatch-border-thickness-selected, var(--spectrum-border-width-200))`, if not set.",
+ "control": "text",
+ "category": "Component"
+ },
+ "spectrum-swatch-disabled-icon-size": {
+ "value": "var(--mod-swatch-disabled-icon-size, var(--spectrum-workflow-icon-size-200))",
+ "description": "Defined in `.spectrum-Swatch`, `.spectrum-Swatch--sizeXS`, `.spectrum-Swatch--sizeS`, `.spectrum-Swatch--sizeL`.
Used by `.spectrum-Swatch .spectrum-Swatch-disabledIcon`.
Defaults to `var(--mod-swatch-disabled-icon-size, var(--spectrum-workflow-icon-size-200))`, if not set.",
+ "control": "text",
+ "category": "Component"
+ },
+ "spectrum-swatch-slash-thickness": {
+ "value": "var(--mod-swatch-slash-thickness, var(--spectrum-swatch-slash-thickness-large))",
+ "description": "Defined in `.spectrum-Swatch`, `.spectrum-Swatch--sizeXS`, `.spectrum-Swatch--sizeS`, `.spectrum-Swatch--sizeL`.
Used by `.spectrum-Swatch.is-nothing:not(.spectrum-Swatch.is-mixedValue, .spectrum-Swatch.is-addSwatch) .spectrum-Swatch-fill:after`.
Defaults to `var(--mod-swatch-slash-thickness, var(--spectrum-swatch-slash-thickness-large))`, if not set.",
+ "control": "text",
+ "category": "Component"
+ },
+ "spectrum-swatch-slash-thickness-medium": {
+ "value": "4px",
+ "description": "Used by `--spectrum-swatch-slash-thickness`.",
+ "control": "text",
+ "category": "Component"
+ },
+ "spectrum-swatch-border-color-selected": {
+ "value": "var(--highcontrast-swatch-border-color-selected, var(--mod-swatch-border-color-selected, var(--spectrum-gray-1000)))",
+ "description": "Defined in `.spectrum-Swatch`.
Used by `.spectrum-Swatch:before`.
Defaults to `var(--highcontrast-swatch-border-color-selected, var(--mod-swatch-border-color-selected, var(--spectrum-gray-1000)))`, if not set.",
+ "control": "color",
+ "category": "Component"
+ },
+ "spectrum-swatch-inner-border-color-selected": {
+ "value": "var(--highcontrast-swatch-background-color-selected, var(--mod-swatch-inner-border-color-selected, var(--spectrum-gray-25)))",
+ "description": "Defined in `.spectrum-Swatch`.
Used by `.spectrum-Swatch.is-selected`.
Defaults to `var(--highcontrast-swatch-background-color-selected, var(--mod-swatch-inner-border-color-selected, var(--spectrum-gray-25)))`, if not set.",
+ "control": "color",
+ "category": "Component"
+ },
+ "spectrum-swatch-disabled-icon-color": {
+ "value": "var(--highcontrast-swatch-disabled-icon-color, var(--mod-swatch-disabled-icon-color, var(--spectrum-white)))",
+ "description": "Defined in `.spectrum-Swatch`.
Used by `.spectrum-Swatch-disabledIcon`, `.spectrum-Swatch-disabledIcon path:first-child`.
Defaults to `var(--highcontrast-swatch-disabled-icon-color, var(--mod-swatch-disabled-icon-color, var(--spectrum-white)))`, if not set.",
+ "control": "color",
+ "category": "Component"
+ },
+ "spectrum-swatch-icon-color": {
+ "value": "var(--highcontrast-swatch-icon-color, var(--mod-swatch-icon-color, var(--spectrum-neutral-content-color-default)))",
+ "description": "Defined in `.spectrum-Swatch`.
Used by `.spectrum-Swatch.is-addSwatch .spectrum-Swatch-icon`, `.spectrum-Swatch.is-mixedValue .spectrum-Swatch-icon`.
Defaults to `var(--highcontrast-swatch-icon-color, var(--mod-swatch-icon-color, var(--spectrum-neutral-content-color-default)))`, if not set.",
+ "control": "color",
+ "category": "Component"
+ },
+ "spectrum-swatch-slash-icon-color": {
+ "value": "var(--highcontrast-swatch-fill-foreground-color, var(--mod-swatch-slash-icon-color, var(--spectrum-negative-visual-color)))",
+ "description": "Defined in `.spectrum-Swatch`.
Used by `.spectrum-Swatch.is-nothing:not(.spectrum-Swatch.is-mixedValue, .spectrum-Swatch.is-addSwatch) .spectrum-Swatch-fill:after`.
Defaults to `var(--highcontrast-swatch-fill-foreground-color, var(--mod-swatch-slash-icon-color, var(--spectrum-negative-visual-color)))`, if not set.",
+ "control": "color",
+ "category": "Component"
+ },
+ "spectrum-swatch-border": {
+ "value": "var(--spectrum-add-button-background-hover)",
+ "description": "Defined in `.spectrum-Swatch`, `.spectrum-Swatch.is-addSwatch`, `.spectrum-Swatch.is-addSwatch:active`, `.spectrum-Swatch.is-addSwatch:hover`.
Used by `.spectrum-Swatch-fill:before`.
Defaults to `var(--spectrum-add-button-background-hover)`, if not set.",
+ "control": "text",
+ "category": "Component"
+ },
+ "spectrum-swatch-border-color": {
+ "value": "var(--spectrum-gray-1000)",
+ "description": "Used by `--spectrum-swatch-border`.",
+ "control": "color",
+ "category": "Component"
+ },
+ "spectrum-swatch-border-opacity": {
+ "value": "0.42",
+ "description": "Used by `--spectrum-swatch-border`.",
+ "control": "text",
+ "category": "Component"
+ },
+ "spectrum-swatch-focus-indicator-color": {
+ "value": "var(--highcontrast-swatch-focus-indicator-color, var(--mod-swatch-focus-indicator-color, var(--spectrum-focus-indicator-color)))",
+ "description": "Defined in `.spectrum-Swatch`.
Used by `.spectrum-Swatch.is-keyboardFocused, .spectrum-Swatch:focus-visible`.
Defaults to `var(--highcontrast-swatch-focus-indicator-color, var(--mod-swatch-focus-indicator-color, var(--spectrum-focus-indicator-color)))`, if not set.",
+ "control": "color",
+ "category": "Component"
+ },
+ "spectrum-swatch-focus-indicator-thickness": {
+ "value": "var(--mod-swatch-focus-indicator-thickness, var(--spectrum-focus-indicator-thickness))",
+ "description": "Defined in `.spectrum-Swatch`.
Used by `.spectrum-Swatch.is-keyboardFocused, .spectrum-Swatch:focus-visible`.
Defaults to `var(--mod-swatch-focus-indicator-thickness, var(--spectrum-focus-indicator-thickness))`, if not set.",
+ "control": "text",
+ "category": "Component"
+ },
+ "spectrum-swatch-focus-indicator-gap": {
+ "value": "var(--mod-swatch-focus-indicator-gap, var(--spectrum-focus-indicator-gap))",
+ "description": "Defined in `.spectrum-Swatch`.
Used by `.spectrum-Swatch.is-keyboardFocused, .spectrum-Swatch:focus-visible`.
Defaults to `var(--mod-swatch-focus-indicator-gap, var(--spectrum-focus-indicator-gap))`, if not set.",
+ "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-small": {
+ "value": "24px",
+ "description": "Used by `--spectrum-swatch-size`.",
+ "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-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-rectangle-width-multiplier": {
+ "value": "2",
+ "description": "Used by `.spectrum-Swatch--rectangle`.",
+ "control": "text",
+ "category": "Component"
+ }
+ },
+ "global": {
+ "spectrum-corner-radius-100": {
+ "value": "4px",
+ "description": "Used by `--spectrum-swatch-border-radius`.",
+ "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-workflow-icon-size-75": {
+ "value": "16px",
+ "description": "Used by `--spectrum-swatch-disabled-icon-size`.",
+ "control": "text",
+ "category": "Global"
+ },
+ "spectrum-gray-1000": {
+ "value": "light-dark(rgb(0, 0, 0), rgb(255, 255, 255))",
+ "description": "Used by `--spectrum-swatch-border-color-selected`.",
+ "control": "text",
+ "category": "Global"
+ },
+ "spectrum-gray-25": {
+ "value": "light-dark(rgb(255, 255, 255), rgb(17, 17, 17))",
+ "description": "Used by `--spectrum-swatch-inner-border-color-selected`, `--spectrum-mixed-button-background`.",
+ "control": "text",
+ "category": "Global"
+ },
+ "spectrum-white": {
+ "value": "rgb(255, 255, 255)",
+ "description": "Used by `--spectrum-swatch-disabled-icon-color`.",
+ "control": "text",
+ "category": "Global"
+ },
+ "spectrum-neutral-content-color-default": {
+ "value": "var(--spectrum-gray-800)",
+ "description": "Used by `--spectrum-swatch-icon-color`.",
+ "control": "color",
+ "category": "Global"
+ },
+ "spectrum-negative-visual-color": {
+ "value": "var(--spectrum-negative-color-800)",
+ "description": "Used by `--spectrum-swatch-slash-icon-color`.",
+ "control": "color",
+ "category": "Global"
+ },
+ "spectrum-mixed-button-background": {
+ "value": "light-dark(rgb(255, 255, 255), rgb(17, 17, 17))",
+ "description": "Defined in `.spectrum-Swatch`.
Used by `--spectrum-picked-color`.
Defaults to `var(--spectrum-gray-25)`, if not set.",
+ "control": "text",
+ "category": "Global"
+ },
+ "spectrum-add-button-background": {
+ "value": "light-dark(rgb(233, 233, 233), rgb(44, 44, 44))",
+ "description": "Defined in `.spectrum-Swatch`.
Used by `--spectrum-swatch-border`, `--spectrum-picked-color`.
Defaults to `var(--spectrum-gray-100)`, if not set.",
+ "control": "text",
+ "category": "Global"
+ },
+ "spectrum-gray-100": {
+ "value": "light-dark(rgb(233, 233, 233), rgb(44, 44, 44))",
+ "description": "Used by `--spectrum-add-button-background`.",
+ "control": "text",
+ "category": "Global"
+ },
+ "spectrum-add-button-background-hover": {
+ "value": "light-dark(rgb(225, 225, 225), rgb(50, 50, 50))",
+ "description": "Defined in `.spectrum-Swatch`.
Used by `--spectrum-swatch-border`, `--spectrum-picked-color`.
Defaults to `var(--spectrum-gray-200)`, if not set.",
+ "control": "text",
+ "category": "Global"
+ },
+ "spectrum-gray-200": {
+ "value": "light-dark(rgb(225, 225, 225), rgb(50, 50, 50))",
+ "description": "Used by `--spectrum-add-button-background-hover`, `--spectrum-add-button-background-down`, `--spectrum-add-button-background-keyboard-focus`.",
+ "control": "text",
+ "category": "Global"
+ },
+ "spectrum-add-button-background-down": {
+ "value": "light-dark(rgb(225, 225, 225), rgb(50, 50, 50))",
+ "description": "Defined in `.spectrum-Swatch`.
Used by `--spectrum-swatch-border`, `--spectrum-picked-color`.
Defaults to `var(--spectrum-gray-200)`, if not set.",
+ "control": "text",
+ "category": "Global"
+ },
+ "spectrum-add-button-background-keyboard-focus": {
+ "value": "light-dark(rgb(225, 225, 225), rgb(50, 50, 50))",
+ "description": "Defined in `.spectrum-Swatch`.
Used by `--spectrum-picked-color`.
Defaults to `var(--spectrum-gray-200)`, if not set.",
+ "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-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-workflow-icon-size-50": {
+ "value": "14px",
+ "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-picked-color": {
+ "value": "var(--mod-add-button-background-keyboard-focus, var(--spectrum-add-button-background-keyboard-focus))",
+ "description": "Defined in `.spectrum-Swatch.is-mixedValue`, `.spectrum-Swatch.is-addSwatch`, `.spectrum-Swatch.is-addSwatch:active`, `.spectrum-Swatch.is-addSwatch:hover`, `.spectrum-Swatch.is-addSwatch.is-keyboardFocused, .spectrum-Swatch.is-addSwatch:focus-visible`.
Used by `.spectrum-Swatch.is-addSwatch .spectrum-Swatch-fill`, `.spectrum-Swatch.is-mixedValue .spectrum-Swatch-fill`, `.spectrum-Swatch.is-nothing:not(.spectrum-Swatch.is-mixedValue, .spectrum-Swatch.is-addSwatch) .spectrum-Swatch-fill`, `.spectrum-Swatch-fill:before`, `.spectrum-Swatch-icon`.
Defaults to `var(--mod-add-button-background-keyboard-focus, var(--spectrum-add-button-background-keyboard-focus))`, if not set.",
+ "control": "color",
+ "category": "Global"
+ },
+ "spectrum-animation-duration-100": {
+ "description": "Used by `.spectrum-Swatch.is-keyboardFocused, .spectrum-Swatch:focus-visible`, `.spectrum-Swatch-image`.",
+ "control": "text",
+ "category": "Global"
+ },
+ "spectrum-corner-radius-none": {
+ "value": "0px",
+ "description": "Used by `.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`.",
+ "control": "text",
+ "category": "Global"
+ },
+ "spectrum-corner-radius-full": {
+ "value": "9999px",
+ "description": "Used by `.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`.",
+ "control": "text",
+ "category": "Global"
+ }
+ },
+ "passthroughs": {},
+ "high-contrast": {
+ "highcontrast-swatch-border-color-selected": {
+ "value": "var(--mod-swatch-border-color-selected, var(--spectrum-gray-1000))",
+ "description": "Defined in `.spectrum-Swatch`.
Used by `--spectrum-swatch-border-color-selected`.
Defaults to `var(--mod-swatch-border-color-selected, var(--spectrum-gray-1000))`, if not set.",
+ "control": "color"
+ },
+ "highcontrast-swatch-background-color-selected": {
+ "value": "var(--mod-swatch-inner-border-color-selected, var(--spectrum-gray-25))",
+ "description": "Defined in `.spectrum-Swatch`.
Used by `--spectrum-swatch-inner-border-color-selected`.
Defaults to `var(--mod-swatch-inner-border-color-selected, var(--spectrum-gray-25))`, if not set.",
+ "control": "color"
+ },
+ "highcontrast-swatch-disabled-icon-color": {
+ "value": "var(--mod-swatch-disabled-icon-color, var(--spectrum-white))",
+ "description": "Defined in `.spectrum-Swatch`.
Used by `--spectrum-swatch-disabled-icon-color`.
Defaults to `var(--mod-swatch-disabled-icon-color, var(--spectrum-white))`, if not set.",
+ "control": "color"
+ },
+ "highcontrast-swatch-icon-color": {
+ "value": "var(--mod-swatch-icon-color, var(--spectrum-neutral-content-color-default))",
+ "description": "Defined in `.spectrum-Swatch.is-addSwatch:active, .spectrum-Swatch.is-mixedValue`, `.spectrum-Swatch.is-addSwatch:hover`, `.spectrum-Swatch.is-addSwatch.is-keyboardFocused, .spectrum-Swatch.is-addSwatch:focus-visible`.
Used by `--spectrum-swatch-icon-color`.
Defaults to `var(--mod-swatch-icon-color, var(--spectrum-neutral-content-color-default))`, if not set.",
+ "control": "color"
+ },
+ "highcontrast-swatch-fill-foreground-color": {
+ "value": "var(--mod-swatch-slash-icon-color, var(--spectrum-negative-visual-color))",
+ "description": "Defined in `.spectrum-Swatch`.
Used by `--spectrum-swatch-slash-icon-color`.
Defaults to `var(--mod-swatch-slash-icon-color, var(--spectrum-negative-visual-color))`, if not set.",
+ "control": "color"
+ },
+ "highcontrast-swatch-focus-indicator-color": {
+ "value": "var(--mod-swatch-focus-indicator-color, var(--spectrum-focus-indicator-color))",
+ "description": "Defined in `.spectrum-Swatch`.
Used by `--spectrum-swatch-focus-indicator-color`.
Defaults to `var(--mod-swatch-focus-indicator-color, var(--spectrum-focus-indicator-color))`, if not set.",
+ "control": "color"
+ },
+ "highcontrast-swatch-border-color": {
+ "value": "var(--mod-swatch-border, var(--spectrum-swatch-border))",
+ "description": "Defined in `.spectrum-Swatch`, `.spectrum-Swatch.is-disabled, .spectrum-Swatch[disabled]`.
Used by `.spectrum-Swatch-fill:before`.
Defaults to `var(--mod-swatch-border, var(--spectrum-swatch-border))`, if not set.",
+ "control": "color"
+ }
+ }
}
diff --git a/components/swatch/stories/swatch.stories.js b/components/swatch/stories/swatch.stories.js
index 50b2ec74522..e42a9af2090 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, isHovered, isActive, isKeyboardFocused, 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 { 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.
*
@@ -126,9 +128,7 @@ export default {
},
packageJson,
metadata,
- status: {
- type: "migrated",
- },
+ cssprops: metadata.modifiers,
},
tags: ["migrated"],
};
diff --git a/components/swatchgroup/dist/metadata.json b/components/swatchgroup/dist/metadata.json
index 73ac1e248a6..8280df809d6 100644
--- a/components/swatchgroup/dist/metadata.json
+++ b/components/swatchgroup/dist/metadata.json
@@ -6,16 +6,51 @@
".spectrum-SwatchGroup--spacious:has(.spectrum-Swatch--sizeM, .spectrum-Swatch--sizeL)",
".spectrum-SwatchGroup--spacious:has(.spectrum-Swatch--sizeXS, .spectrum-Swatch--sizeS)"
],
- "modifiers": ["--mod-swatchgroup-spacing"],
- "component": [
- "--spectrum-swatch-group-spacing-spacious",
- "--spectrum-swatchgroup-spacing"
- ],
- "global": [
- "--spectrum-spacing-100",
- "--spectrum-spacing-50",
- "--spectrum-spacing-75"
- ],
- "passthroughs": ["--mod-swatch-border-opacity"],
- "high-contrast": []
+ "modifiers": {
+ "mod-swatchgroup-spacing": {
+ "description": "Used by `.spectrum-SwatchGroup`.
Defaults to `var(--spectrum-swatchgroup-spacing)`, if not set.",
+ "control": "text",
+ "category": "Modifier"
+ }
+ },
+ "component": {
+ "spectrum-swatchgroup-spacing": {
+ "value": "8px",
+ "description": "Defined in `.spectrum-SwatchGroup`, `.spectrum-SwatchGroup--compact`, `.spectrum-SwatchGroup--spacious:has(.spectrum-Swatch--sizeXS, .spectrum-Swatch--sizeS)`, `.spectrum-SwatchGroup--spacious:has(.spectrum-Swatch--sizeM, .spectrum-Swatch--sizeL)`.
Used by `.spectrum-SwatchGroup`.
Defaults to `var(--spectrum-spacing-100)`, if not set.",
+ "control": "text",
+ "category": "Component"
+ },
+ "spectrum-swatch-group-spacing-spacious": {
+ "value": "6px",
+ "description": "Used by `--spectrum-swatchgroup-spacing`.",
+ "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"
+ }
+ },
+ "passthroughs": {
+ "mod-swatch-border-opacity": {
+ "category": "Passthrough"
+ }
+ },
+ "high-contrast": {}
}
diff --git a/components/swatchgroup/stories/swatchgroup.stories.js b/components/swatchgroup/stories/swatchgroup.stories.js
index 669280b0882..aad02ecc048 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).
*
@@ -103,9 +105,7 @@ export default {
},
packageJson,
metadata,
- status: {
- type: "migrated",
- },
+ cssprops: metadata.modifiers,
},
tags: ["migrated"],
};
diff --git a/components/swatchgroup/stories/template.js b/components/swatchgroup/stories/template.js
index f42b3fe0908..fd6181f0406 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",
@@ -16,7 +17,6 @@ export const Template = ({
containerWidth,
items = [],
customStyles = {},
- id = getRandomId("swatchgroup"),
} = {}, context = {}) => html`
Defaults to `var(--spectrum-switch-min-height)`, if not set.",
+ "control": "text",
+ "category": "Modifier"
+ },
+ "mod-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": {
+ "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": {
+ "description": "Used by `.spectrum-Switch-label`.
Defaults to `var(--spectrum-switch-spacing-top-to-label)`, if not set.",
+ "control": "text",
+ "category": "Modifier"
+ },
+ "mod-switch-spacing-bottom-to-label": {
+ "description": "Used by `.spectrum-Switch-label`.
Defaults to `var(--spectrum-switch-spacing-bottom-to-label)`, if not set.",
+ "control": "text",
+ "category": "Modifier"
+ },
+ "mod-switch-font-size": {
+ "description": "Used by `.spectrum-Switch-label`.
Defaults to `var(--spectrum-switch-font-size)`, if not set.",
+ "control": "text",
+ "category": "Modifier"
+ },
+ "mod-switch-line-height": {
+ "description": "Used by `.spectrum-Switch-label`.
Defaults to `var(--spectrum-switch-line-height)`, if not set.",
+ "control": "text",
+ "category": "Modifier"
+ },
+ "mod-switch-cjk-line-height": {
+ "description": "Used by `.spectrum-Switch-label:lang(ja), .spectrum-Switch-label:lang(ko), .spectrum-Switch-label:lang(zh)`.
Defaults to `var(--spectrum-switch-cjk-line-height)`, if not set.",
+ "control": "text",
+ "category": "Modifier"
+ },
+ "mod-switch-label-color-down": {
+ "description": "Used by `.spectrum-Switch:active ~ .spectrum-Switch-label`.
Defaults to `var(--spectrum-switch-label-color-down)`, if not set.",
+ "control": "color",
+ "category": "Modifier"
+ },
+ "mod-switch-label-color-focus": {
+ "description": "Used by `.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-control-width": {
+ "description": "Used by `.spectrum-Switch-switch`.
Defaults to `var(--spectrum-switch-control-width)`, if not set.",
+ "control": "text",
+ "category": "Modifier"
+ },
+ "mod-switch-control-height": {
+ "description": "Used by `.spectrum-Switch-switch`, `.spectrum-Switch-switch:before`, `.spectrum-Switch-input:checked + .spectrum-Switch-switch:before`.
Defaults to `var(--spectrum-switch-control-height)`, if not set.",
+ "control": "text",
+ "category": "Modifier"
+ },
+ "mod-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-switch-animation-duration-switch": {
+ "description": "Used by `.spectrum-Switch-switch`.
Defaults to `var(--spectrum-switch-animation-duration-switch)`, if not set.",
+ "control": "text",
+ "category": "Modifier"
+ },
+ "mod-switch-background-color": {
+ "description": "Used by `.spectrum-Switch-switch`.
Defaults to `var(--spectrum-switch-background-color)`, if not set.",
+ "control": "color",
+ "category": "Modifier"
+ },
+ "mod-switch-border-radius": {
+ "description": "Used by `.spectrum-Switch-switch`, `.spectrum-Switch-switch:before`, `.spectrum-Switch-switch:after`.
Defaults to `var(--spectrum-switch-border-radius)`, if not set.",
+ "control": "text",
+ "category": "Modifier"
+ },
+ "mod-switch-border-width": {
+ "description": "Used by `.spectrum-Switch-switch`, `.spectrum-Switch-input:checked + .spectrum-Switch-switch:before`, `.spectrum-Switch-input:checked + .spectrum-Switch-switch:before:dir(rtl)`, `.spectrum-Switch--active .spectrum-Switch-input:not(:disabled):checked + .spectrum-Switch-switch:before, .spectrum-Switch:active .spectrum-Switch-input:not(:disabled):checked + .spectrum-Switch-switch:before`, `.spectrum-Switch--active .spectrum-Switch-input:not(:disabled):checked + .spectrum-Switch-switch:before:dir(rtl), .spectrum-Switch:active .spectrum-Switch-input:not(:disabled):checked + .spectrum-Switch-switch:before:dir(rtl)`.
Defaults to `var(--spectrum-switch-border-width)`, if not set.",
+ "control": "text",
+ "category": "Modifier"
+ },
+ "mod-switch-border-color-default": {
+ "description": "Used by `.spectrum-Switch-switch`.
Defaults to `var(--spectrum-switch-border-color-default)`, if not set.",
+ "control": "color",
+ "category": "Modifier"
+ },
+ "mod-switch-border-color-down": {
+ "description": "Used by `.spectrum-Switch-switch .spectrum-Switch--active, .spectrum-Switch.spectrum-Switch:active .spectrum-Switch-switch`.
Defaults to `var(--spectrum-switch-border-color-down)`, if not set.",
+ "control": "color",
+ "category": "Modifier"
+ },
+ "mod-switch-border-color-focus": {
+ "description": "Used by `.spectrum-Switch-input:focus-visible + .spectrum-Switch-switch`.
Defaults to `var(--spectrum-switch-border-color-focus)`, if not set.",
+ "control": "color",
+ "category": "Modifier"
+ },
+ "mod-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-border-color-selected-default": {
+ "description": "Used by `.spectrum-Switch-input:checked + .spectrum-Switch-switch`.
Defaults to `var(--spectrum-switch-border-color-selected-default)`, if not set.",
+ "control": "color",
+ "category": "Modifier"
+ },
+ "mod-switch-background-color-selected-down": {
+ "description": "Used by `.spectrum-Switch--active .spectrum-Switch-input:checked + .spectrum-Switch-switch, .spectrum-Switch.spectrum-Switch:active .spectrum-Switch-input:checked + .spectrum-Switch-switch`.
Defaults to `var(--spectrum-switch-background-color-selected-down)`, if not set.",
+ "control": "color",
+ "category": "Modifier"
+ },
+ "mod-switch-border-color-selected-down": {
+ "description": "Used by `.spectrum-Switch--active .spectrum-Switch-input:checked + .spectrum-Switch-switch, .spectrum-Switch.spectrum-Switch:active .spectrum-Switch-input:checked + .spectrum-Switch-switch`.
Defaults to `var(--spectrum-switch-border-color-selected-down)`, if not set.",
+ "control": "color",
+ "category": "Modifier"
+ },
+ "mod-switch-background-color-selected-focus": {
+ "description": "Used by `.spectrum-Switch-input:checked:focus-visible + .spectrum-Switch-switch`.
Defaults to `var(--spectrum-switch-background-color-selected-focus)`, if not set.",
+ "control": "color",
+ "category": "Modifier"
+ },
+ "mod-switch-border-color-selected-focus": {
+ "description": "Used by `.spectrum-Switch-input:checked:focus-visible + .spectrum-Switch-switch`.
Defaults to `var(--spectrum-switch-border-color-selected-focus)`, if not set.",
+ "control": "color",
+ "category": "Modifier"
+ },
+ "mod-switch-handle-size": {
+ "description": "Used by `.spectrum-Switch-switch:before`.
Defaults to `var(--spectrum-switch-handle-size)`, if not set.",
+ "control": "text",
+ "category": "Modifier"
+ },
+ "mod-switch-handle-background-color-default": {
+ "description": "Used by `.spectrum-Switch-switch:before`.
Defaults to `var(--spectrum-switch-handle-background-color-default)`, if not set.",
+ "control": "color",
+ "category": "Modifier"
+ },
+ "mod-switch-handle-background-color-down": {
+ "description": "Used by `.spectrum-Switch.spectrum-Switch:active .spectrum-Switch-switch:before`.
Defaults to `var(--spectrum-switch-handle-background-color-down)`, if not set.",
+ "control": "color",
+ "category": "Modifier"
+ },
+ "mod-switch-handle-background-color-focus": {
+ "description": "Used by `.spectrum-Switch-input:focus-visible + .spectrum-Switch-switch:before`.
Defaults to `var(--spectrum-switch-handle-background-color-focus)`, if not set.",
+ "control": "color",
+ "category": "Modifier"
+ },
+ "mod-switch-handle-background-color-selected": {
+ "description": "Used by `.spectrum-Switch-input:checked + .spectrum-Switch-switch:before`, `.spectrum-Switch--active .spectrum-Switch-input:checked + .spectrum-Switch-switch:before, .spectrum-Switch.spectrum-Switch:active .spectrum-Switch-input:checked + .spectrum-Switch-switch:before`, `.spectrum-Switch:hover .spectrum-Switch-input:checked + .spectrum-Switch-switch:before`.
Defaults to `var(--spectrum-switch-handle-background-color-selected)`, if not set.",
+ "control": "color",
+ "category": "Modifier"
+ },
+ "mod-switch-handle-selected-size": {
+ "description": "Used by `.spectrum-Switch-input:checked + .spectrum-Switch-switch:before`.
Defaults to `var(--spectrum-switch-handle-selected-size)`, if not set.",
+ "control": "text",
+ "category": "Modifier"
+ },
+ "mod-switch-focus-indicator-thickness": {
+ "description": "Used by `.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": {
+ "description": "Used by `.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-focus-indicator-gap": {
+ "description": "Used by `.spectrum-Switch-input:focus-visible + .spectrum-Switch-switch:after`.
Defaults to `var(--spectrum-switch-focus-indicator-gap)`, if not set.",
+ "control": "text",
+ "category": "Modifier"
+ },
+ "mod-switch-background-color-disabled": {
+ "description": "Used by `.spectrum-Switch .spectrum-Switch-input:disabled + .spectrum-Switch-switch, .spectrum-Switch .spectrum-Switch-input[disabled] + .spectrum-Switch-switch`, `.spectrum-Switch:hover .spectrum-Switch-input:disabled + .spectrum-Switch-switch, .spectrum-Switch:hover .spectrum-Switch-input[disabled] + .spectrum-Switch-switch`.
Defaults to `var(--spectrum-switch-background-color-disabled)`, if not set.",
+ "control": "color",
+ "category": "Modifier"
+ },
+ "mod-switch-border-color-disabled": {
+ "description": "Used by `.spectrum-Switch .spectrum-Switch-input:disabled + .spectrum-Switch-switch, .spectrum-Switch .spectrum-Switch-input[disabled] + .spectrum-Switch-switch`, `.spectrum-Switch:hover .spectrum-Switch-input:disabled + .spectrum-Switch-switch, .spectrum-Switch:hover .spectrum-Switch-input[disabled] + .spectrum-Switch-switch`.
Defaults to `var(--spectrum-switch-border-color-disabled)`, if not set.",
+ "control": "color",
+ "category": "Modifier"
+ },
+ "mod-switch-handle-background-color-disabled": {
+ "description": "Used by `.spectrum-Switch .spectrum-Switch-input:disabled + .spectrum-Switch-switch:before, .spectrum-Switch .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] + .spectrum-Switch-switch:before`.
Defaults to `var(--spectrum-switch-handle-background-color-disabled)`, if not set.",
+ "control": "color",
+ "category": "Modifier"
+ },
+ "mod-switch-background-color-selected-disabled": {
+ "description": "Used by `.spectrum-Switch .spectrum-Switch-input:disabled:checked + .spectrum-Switch-switch, .spectrum-Switch .spectrum-Switch-input[disabled]:checked + .spectrum-Switch-switch`, `.spectrum-Switch:hover .spectrum-Switch-input:disabled:checked + .spectrum-Switch-switch, .spectrum-Switch:hover .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-handle-background-color-selected-disabled": {
+ "description": "Used by `.spectrum-Switch .spectrum-Switch-input:disabled:checked + .spectrum-Switch-switch:before, .spectrum-Switch .spectrum-Switch-input[disabled]:checked + .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`.
Defaults to `var(--spectrum-switch-handle-background-color-selected-disabled)`, if not set.",
+ "control": "color",
+ "category": "Modifier"
+ },
+ "mod-switch-label-color-disabled": {
+ "description": "Used by `.spectrum-Switch .spectrum-Switch-input:disabled ~ .spectrum-Switch-label, .spectrum-Switch .spectrum-Switch-input[disabled] ~ .spectrum-Switch-label`, `.spectrum-Switch:hover .spectrum-Switch-input:disabled ~ .spectrum-Switch-label, .spectrum-Switch:hover .spectrum-Switch-input[disabled] ~ .spectrum-Switch-label`.
Defaults to `var(--spectrum-switch-label-color-disabled)`, if not set.",
+ "control": "color",
+ "category": "Modifier"
+ },
+ "mod-switch-label-color-hover": {
+ "description": "Used by `.spectrum-Switch:hover ~ .spectrum-Switch-label`.
Defaults to `var(--spectrum-switch-label-color-hover)`, if not set.",
+ "control": "color",
+ "category": "Modifier"
+ },
+ "mod-switch-border-color-hover": {
+ "description": "Used by `.spectrum-Switch:hover .spectrum-Switch-switch`.
Defaults to `var(--spectrum-switch-border-color-hover)`, if not set.",
+ "control": "color",
+ "category": "Modifier"
+ },
+ "mod-switch-background-color-selected-hover": {
+ "description": "Used by `.spectrum-Switch:hover .spectrum-Switch-input:checked + .spectrum-Switch-switch`.
Defaults to `var(--spectrum-switch-background-color-selected-hover)`, if not set.",
+ "control": "color",
+ "category": "Modifier"
+ },
+ "mod-switch-border-color-selected-hover": {
+ "description": "Used by `.spectrum-Switch:hover .spectrum-Switch-input:checked + .spectrum-Switch-switch`.
Defaults to `var(--spectrum-switch-border-color-selected-hover)`, if not set.",
+ "control": "color",
+ "category": "Modifier"
+ },
+ "mod-switch-handle-background-color-hover": {
+ "description": "Used by `.spectrum-Switch:hover .spectrum-Switch-switch:before`.
Defaults to `var(--spectrum-switch-handle-background-color-hover)`, if not set.",
+ "control": "color",
+ "category": "Modifier"
+ }
+ },
+ "component": {
+ "spectrum-switch-label-color-default": {
+ "value": "var(--spectrum-gray-400)",
+ "description": "Defined in `.spectrum-Switch`, `.spectrum-Switch--disabled`.
Used by `.spectrum-Switch-label`.
Defaults to `var(--spectrum-disabled-content-color)`, if not set.",
+ "control": "color",
+ "category": "Component"
+ },
+ "spectrum-switch-label-color-hover": {
+ "value": "var(--spectrum-gray-900)",
+ "description": "Defined in `.spectrum-Switch`.
Used by `.spectrum-Switch:hover ~ .spectrum-Switch-label`.
Defaults to `var(--spectrum-neutral-content-color-hover)`, if not set.",
+ "control": "color",
+ "category": "Component"
+ },
+ "spectrum-switch-label-color-down": {
+ "value": "var(--spectrum-gray-900)",
+ "description": "Defined in `.spectrum-Switch`.
Used by `.spectrum-Switch:active ~ .spectrum-Switch-label`.
Defaults to `var(--spectrum-neutral-content-color-down)`, if not set.",
+ "control": "color",
+ "category": "Component"
+ },
+ "spectrum-switch-label-color-focus": {
+ "value": "var(--spectrum-gray-900)",
+ "description": "Defined in `.spectrum-Switch`.
Used by `.spectrum-Switch-input:focus-visible ~ .spectrum-Switch-label`.
Defaults to `var(--spectrum-neutral-content-color-key-focus)`, if not set.",
+ "control": "color",
+ "category": "Component"
+ },
+ "spectrum-switch-label-color-disabled": {
+ "value": "var(--spectrum-gray-400)",
+ "description": "Defined in `.spectrum-Switch`.
Used by `.spectrum-Switch .spectrum-Switch-input:disabled ~ .spectrum-Switch-label, .spectrum-Switch .spectrum-Switch-input[disabled] ~ .spectrum-Switch-label`, `.spectrum-Switch:hover .spectrum-Switch-input:disabled ~ .spectrum-Switch-label, .spectrum-Switch:hover .spectrum-Switch-input[disabled] ~ .spectrum-Switch-label`.
Defaults to `var(--spectrum-disabled-content-color)`, if not set.",
+ "control": "color",
+ "category": "Component"
+ },
+ "spectrum-switch-border-width": {
+ "value": "2px",
+ "description": "Defined in `.spectrum-Switch`.
Used by `.spectrum-Switch-switch`, `.spectrum-Switch-input:checked + .spectrum-Switch-switch:before`, `.spectrum-Switch-input:checked + .spectrum-Switch-switch:before:dir(rtl)`, `.spectrum-Switch--active .spectrum-Switch-input:not(:disabled):checked + .spectrum-Switch-switch:before, .spectrum-Switch:active .spectrum-Switch-input:not(:disabled):checked + .spectrum-Switch-switch:before`, `.spectrum-Switch--active .spectrum-Switch-input:not(:disabled):checked + .spectrum-Switch-switch:before:dir(rtl), .spectrum-Switch:active .spectrum-Switch-input:not(:disabled):checked + .spectrum-Switch-switch:before:dir(rtl)`.
Defaults to `var(--spectrum-border-width-200)`, if not set.",
+ "control": "text",
+ "category": "Component"
+ },
+ "spectrum-switch-border-color-default": {
+ "value": "var(--spectrum-gray-800)",
+ "description": "Defined in `.spectrum-Switch`.
Used by `.spectrum-Switch-switch`.
Defaults to `var(--spectrum-neutral-content-color-default)`, if not set.",
+ "control": "color",
+ "category": "Component"
+ },
+ "spectrum-switch-border-color-hover": {
+ "value": "var(--spectrum-gray-900)",
+ "description": "Defined in `.spectrum-Switch`.
Used by `.spectrum-Switch:hover .spectrum-Switch-switch`.
Defaults to `var(--spectrum-neutral-content-color-hover)`, if not set.",
+ "control": "color",
+ "category": "Component"
+ },
+ "spectrum-switch-border-color-down": {
+ "value": "var(--spectrum-gray-900)",
+ "description": "Defined in `.spectrum-Switch`.
Used by `.spectrum-Switch-switch .spectrum-Switch--active, .spectrum-Switch.spectrum-Switch:active .spectrum-Switch-switch`.
Defaults to `var(--spectrum-neutral-content-color-down)`, if not set.",
+ "control": "color",
+ "category": "Component"
+ },
+ "spectrum-switch-border-color-focus": {
+ "value": "var(--spectrum-gray-900)",
+ "description": "Defined in `.spectrum-Switch`.
Used by `.spectrum-Switch-input:focus-visible + .spectrum-Switch-switch`.
Defaults to `var(--spectrum-neutral-content-color-key-focus)`, if not set.",
+ "control": "color",
+ "category": "Component"
+ },
+ "spectrum-switch-border-color-disabled": {
+ "value": "var(--spectrum-gray-400)",
+ "description": "Defined in `.spectrum-Switch`.
Used by `.spectrum-Switch .spectrum-Switch-input:disabled + .spectrum-Switch-switch, .spectrum-Switch .spectrum-Switch-input[disabled] + .spectrum-Switch-switch`, `.spectrum-Switch:hover .spectrum-Switch-input:disabled + .spectrum-Switch-switch, .spectrum-Switch:hover .spectrum-Switch-input[disabled] + .spectrum-Switch-switch`.
Defaults to `var(--spectrum-disabled-content-color)`, if not set.",
+ "control": "color",
+ "category": "Component"
+ },
+ "spectrum-switch-border-color-selected-default": {
+ "value": "var(--spectrum-accent-color-900)",
+ "description": "Defined in `.spectrum-Switch`, `.spectrum-Switch.spectrum-Switch--emphasized`.
Used by `.spectrum-Switch-input:checked + .spectrum-Switch-switch`.
Defaults to `var(--spectrum-accent-background-color-default)`, if not set.",
+ "control": "color",
+ "category": "Component"
+ },
+ "spectrum-switch-border-color-selected-hover": {
+ "value": "var(--spectrum-accent-color-1000)",
+ "description": "Defined in `.spectrum-Switch`, `.spectrum-Switch.spectrum-Switch--emphasized`.
Used by `.spectrum-Switch:hover .spectrum-Switch-input:checked + .spectrum-Switch-switch`.
Defaults to `var(--spectrum-accent-background-color-hover)`, if not set.",
+ "control": "color",
+ "category": "Component"
+ },
+ "spectrum-switch-border-color-selected-down": {
+ "value": "var(--spectrum-accent-color-1000)",
+ "description": "Defined in `.spectrum-Switch`, `.spectrum-Switch.spectrum-Switch--emphasized`.
Used by `.spectrum-Switch--active .spectrum-Switch-input:checked + .spectrum-Switch-switch, .spectrum-Switch.spectrum-Switch:active .spectrum-Switch-input:checked + .spectrum-Switch-switch`.
Defaults to `var(--spectrum-accent-background-color-down)`, if not set.",
+ "control": "color",
+ "category": "Component"
+ },
+ "spectrum-switch-border-color-selected-focus": {
+ "value": "var(--spectrum-accent-color-1000)",
+ "description": "Defined in `.spectrum-Switch`, `.spectrum-Switch.spectrum-Switch--emphasized`.
Used by `.spectrum-Switch-input:checked:focus-visible + .spectrum-Switch-switch`.
Defaults to `var(--spectrum-accent-background-color-key-focus)`, if not set.",
+ "control": "color",
+ "category": "Component"
+ },
+ "spectrum-switch-background-color": {
+ "value": "light-dark(rgb(255, 255, 255), rgb(17, 17, 17))",
+ "description": "Defined in `.spectrum-Switch`.
Used by `.spectrum-Switch-switch`.
Defaults to `var(--spectrum-gray-25)`, if not set.",
+ "control": "color",
+ "category": "Component"
+ },
+ "spectrum-switch-background-color-disabled": {
+ "value": "light-dark(rgb(255, 255, 255), rgb(17, 17, 17))",
+ "description": "Defined in `.spectrum-Switch`.
Used by `.spectrum-Switch .spectrum-Switch-input:disabled + .spectrum-Switch-switch, .spectrum-Switch .spectrum-Switch-input[disabled] + .spectrum-Switch-switch`, `.spectrum-Switch:hover .spectrum-Switch-input:disabled + .spectrum-Switch-switch, .spectrum-Switch:hover .spectrum-Switch-input[disabled] + .spectrum-Switch-switch`.
Defaults to `var(--spectrum-gray-25)`, if not set.",
+ "control": "color",
+ "category": "Component"
+ },
+ "spectrum-switch-background-color-selected-default": {
+ "value": "var(--spectrum-accent-color-900)",
+ "description": "Defined in `.spectrum-Switch`, `.spectrum-Switch.spectrum-Switch--emphasized`.
Used by `.spectrum-Switch-input:checked + .spectrum-Switch-switch`.
Defaults to `var(--spectrum-accent-background-color-default)`, if not set.",
+ "control": "color",
+ "category": "Component"
+ },
+ "spectrum-switch-background-color-selected-hover": {
+ "value": "var(--spectrum-accent-color-1000)",
+ "description": "Defined in `.spectrum-Switch`, `.spectrum-Switch.spectrum-Switch--emphasized`.
Used by `.spectrum-Switch:hover .spectrum-Switch-input:checked + .spectrum-Switch-switch`.
Defaults to `var(--spectrum-accent-background-color-hover)`, if not set.",
+ "control": "color",
+ "category": "Component"
+ },
+ "spectrum-switch-background-color-selected-down": {
+ "value": "var(--spectrum-accent-color-1000)",
+ "description": "Defined in `.spectrum-Switch`, `.spectrum-Switch.spectrum-Switch--emphasized`.
Used by `.spectrum-Switch--active .spectrum-Switch-input:checked + .spectrum-Switch-switch, .spectrum-Switch.spectrum-Switch:active .spectrum-Switch-input:checked + .spectrum-Switch-switch`.
Defaults to `var(--spectrum-accent-background-color-down)`, if not set.",
+ "control": "color",
+ "category": "Component"
+ },
+ "spectrum-switch-background-color-selected-focus": {
+ "value": "var(--spectrum-accent-color-1000)",
+ "description": "Defined in `.spectrum-Switch`, `.spectrum-Switch.spectrum-Switch--emphasized`.
Used by `.spectrum-Switch-input:checked:focus-visible + .spectrum-Switch-switch`.
Defaults to `var(--spectrum-accent-background-color-key-focus)`, if not set.",
+ "control": "color",
+ "category": "Component"
+ },
+ "spectrum-switch-background-color-selected-disabled": {
+ "value": "var(--spectrum-gray-400)",
+ "description": "Defined in `.spectrum-Switch`.
Used by `.spectrum-Switch .spectrum-Switch-input:disabled:checked + .spectrum-Switch-switch, .spectrum-Switch .spectrum-Switch-input[disabled]:checked + .spectrum-Switch-switch`, `.spectrum-Switch:hover .spectrum-Switch-input:disabled:checked + .spectrum-Switch-switch, .spectrum-Switch:hover .spectrum-Switch-input[disabled]:checked + .spectrum-Switch-switch`.
Defaults to `var(--spectrum-disabled-content-color)`, if not set.",
+ "control": "color",
+ "category": "Component"
+ },
+ "spectrum-switch-focus-indicator-thickness": {
+ "value": "2px",
+ "description": "Defined in `.spectrum-Switch`.
Used by `.spectrum-Switch-input:focus-visible + .spectrum-Switch-switch:after`.
Defaults to `var(--spectrum-focus-indicator-thickness)`, if not set.",
+ "control": "text",
+ "category": "Component"
+ },
+ "spectrum-switch-focus-indicator-color": {
+ "value": "var(--spectrum-blue-800)",
+ "description": "Defined in `.spectrum-Switch`.
Used by `.spectrum-Switch-input:focus-visible + .spectrum-Switch-switch:after`.
Defaults to `var(--spectrum-focus-indicator-color)`, if not set.",
+ "control": "color",
+ "category": "Component"
+ },
+ "spectrum-switch-focus-indicator-gap": {
+ "value": "2px",
+ "description": "Defined in `.spectrum-Switch`.
Used by `.spectrum-Switch-input:focus-visible + .spectrum-Switch-switch:after`.
Defaults to `var(--spectrum-focus-indicator-gap)`, if not set.",
+ "control": "text",
+ "category": "Component"
+ },
+ "spectrum-switch-handle-background-color-default": {
+ "value": "var(--spectrum-gray-800)",
+ "description": "Defined in `.spectrum-Switch`.
Used by `.spectrum-Switch-switch:before`.
Defaults to `var(--spectrum-neutral-content-color-default)`, if not set.",
+ "control": "color",
+ "category": "Component"
+ },
+ "spectrum-switch-handle-background-color-hover": {
+ "value": "var(--spectrum-gray-900)",
+ "description": "Defined in `.spectrum-Switch`.
Used by `.spectrum-Switch:hover .spectrum-Switch-switch:before`.
Defaults to `var(--spectrum-neutral-content-color-hover)`, if not set.",
+ "control": "color",
+ "category": "Component"
+ },
+ "spectrum-switch-handle-background-color-down": {
+ "value": "var(--spectrum-gray-900)",
+ "description": "Defined in `.spectrum-Switch`.
Used by `.spectrum-Switch.spectrum-Switch:active .spectrum-Switch-switch:before`.
Defaults to `var(--spectrum-neutral-content-color-down)`, if not set.",
+ "control": "color",
+ "category": "Component"
+ },
+ "spectrum-switch-handle-background-color-focus": {
+ "value": "var(--spectrum-gray-900)",
+ "description": "Defined in `.spectrum-Switch`.
Used by `.spectrum-Switch-input:focus-visible + .spectrum-Switch-switch:before`.
Defaults to `var(--spectrum-neutral-content-color-key-focus)`, if not set.",
+ "control": "color",
+ "category": "Component"
+ },
+ "spectrum-switch-handle-background-color-disabled": {
+ "value": "var(--spectrum-gray-400)",
+ "description": "Defined in `.spectrum-Switch`.
Used by `.spectrum-Switch .spectrum-Switch-input:disabled + .spectrum-Switch-switch:before, .spectrum-Switch .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] + .spectrum-Switch-switch:before`.
Defaults to `var(--spectrum-disabled-content-color)`, if not set.",
+ "control": "color",
+ "category": "Component"
+ },
+ "spectrum-switch-handle-background-color-selected": {
+ "value": "var(--mod-switch-handle-background-color-selected, var(--spectrum-switch-handle-background-color-selected))",
+ "description": "Defined in `.spectrum-Switch`.
Used by `.spectrum-Switch-input:checked + .spectrum-Switch-switch:before`, `.spectrum-Switch--active .spectrum-Switch-input:checked + .spectrum-Switch-switch:before, .spectrum-Switch.spectrum-Switch:active .spectrum-Switch-input:checked + .spectrum-Switch-switch:before`, `.spectrum-Switch:hover .spectrum-Switch-input:checked + .spectrum-Switch-switch:before`.
Defaults to `var(--mod-switch-handle-background-color-selected, var(--spectrum-switch-handle-background-color-selected))`, if not set.",
+ "control": "color",
+ "category": "Component"
+ },
+ "spectrum-switch-handle-background-color-selected-disabled": {
+ "value": "light-dark(rgb(255, 255, 255), rgb(17, 17, 17))",
+ "description": "Defined in `.spectrum-Switch`.
Used by `.spectrum-Switch .spectrum-Switch-input:disabled:checked + .spectrum-Switch-switch:before, .spectrum-Switch .spectrum-Switch-input[disabled]:checked + .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`.
Defaults to `var(--spectrum-gray-25)`, if not set.",
+ "control": "color",
+ "category": "Component"
+ },
+ "spectrum-switch-handle-size": {
+ "value": "12px",
+ "description": "Defined in `.spectrum-Switch`, `.spectrum-Switch--sizeS`, `.spectrum-Switch--sizeL`, `.spectrum-Switch--sizeXL`.
Used by `.spectrum-Switch-switch:before`.
Defaults to `var(--spectrum-switch-handle-size-extra-large)`, if not set.",
+ "control": "text",
+ "category": "Component"
+ },
+ "spectrum-switch-handle-size-medium": {
+ "value": "8px",
+ "description": "Used by `--spectrum-switch-handle-size`.",
+ "control": "text",
+ "category": "Component"
+ },
+ "spectrum-switch-handle-selected-size": {
+ "value": "14px",
+ "description": "Defined in `.spectrum-Switch`, `.spectrum-Switch--sizeS`, `.spectrum-Switch--sizeL`, `.spectrum-Switch--sizeXL`.
Used by `.spectrum-Switch-input:checked + .spectrum-Switch-switch:before`.
Defaults to `var(--spectrum-switch-handle-selected-size-extra-large)`, if not set.",
+ "control": "text",
+ "category": "Component"
+ },
+ "spectrum-switch-handle-selected-size-medium": {
+ "value": "10px",
+ "description": "Used by `--spectrum-switch-handle-selected-size`.",
+ "control": "text",
+ "category": "Component"
+ },
+ "spectrum-switch-animation-duration-switch": {
+ "value": "var(--spectrum-animation-duration-100)",
+ "description": "Defined in `.spectrum-Switch`.
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": "Component"
+ },
+ "spectrum-switch-animation-duration-label": {
+ "value": "var(--spectrum-animation-duration-200)",
+ "description": "Defined in `.spectrum-Switch`.
Used by `.spectrum-Switch-label`.
Defaults to `var(--spectrum-animation-duration-200)`, if not set.",
+ "control": "text",
+ "category": "Component"
+ },
+ "spectrum-switch-min-height": {
+ "value": "48px",
+ "description": "Defined in `.spectrum-Switch`, `.spectrum-Switch--sizeS`, `.spectrum-Switch--sizeL`, `.spectrum-Switch--sizeXL`.
Used by `.spectrum-Switch`, `.spectrum-Switch-switch`.
Defaults to `var(--spectrum-component-height-300)`, if not set.",
+ "control": "text",
+ "category": "Component"
+ },
+ "spectrum-switch-control-width": {
+ "value": "34px",
+ "description": "Defined in `.spectrum-Switch`, `.spectrum-Switch--sizeS`, `.spectrum-Switch--sizeL`, `.spectrum-Switch--sizeXL`.
Used by `.spectrum-Switch-switch`.
Defaults to `var(--spectrum-switch-control-width-extra-large)`, if not set.",
+ "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": {
+ "value": "20px",
+ "description": "Defined in `.spectrum-Switch`, `.spectrum-Switch--sizeS`, `.spectrum-Switch--sizeL`, `.spectrum-Switch--sizeXL`.
Used by `.spectrum-Switch-switch`, `.spectrum-Switch-switch:before`, `.spectrum-Switch-input:checked + .spectrum-Switch-switch:before`.
Defaults to `var(--spectrum-switch-control-height-extra-large)`, if not set.",
+ "control": "text",
+ "category": "Component"
+ },
+ "spectrum-switch-control-height-medium": {
+ "value": "16px",
+ "description": "Used by `--spectrum-switch-control-height`.",
+ "control": "text",
+ "category": "Component"
+ },
+ "spectrum-switch-control-label-spacing": {
+ "value": "13px",
+ "description": "Defined in `.spectrum-Switch`, `.spectrum-Switch--sizeS`, `.spectrum-Switch--sizeL`, `.spectrum-Switch--sizeXL`.
Used by `.spectrum-Switch-label`.
Defaults to `var(--spectrum-text-to-control-300)`, if not set.",
+ "control": "text",
+ "category": "Component"
+ },
+ "spectrum-switch-spacing-top-to-control": {
+ "value": "15px",
+ "description": "Defined in `.spectrum-Switch`, `.spectrum-Switch--sizeS`, `.spectrum-Switch--sizeL`, `.spectrum-Switch--sizeXL`.
Used by `.spectrum-Switch-switch`.
Defaults to `var(--spectrum-switch-top-to-control-extra-large)`, if not set.",
+ "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": {
+ "value": "12px",
+ "description": "Defined in `.spectrum-Switch`, `.spectrum-Switch--sizeS`, `.spectrum-Switch--sizeL`, `.spectrum-Switch--sizeXL`.
Used by `.spectrum-Switch-label`.
Defaults to `var(--spectrum-component-top-to-text-300)`, if not set.",
+ "control": "text",
+ "category": "Component"
+ },
+ "spectrum-switch-spacing-bottom-to-label": {
+ "value": "14px",
+ "description": "Defined in `.spectrum-Switch`, `.spectrum-Switch--sizeS`, `.spectrum-Switch--sizeL`, `.spectrum-Switch--sizeXL`.
Used by `.spectrum-Switch-label`.
Defaults to `var(--spectrum-component-bottom-to-text-300)`, if not set.",
+ "control": "text",
+ "category": "Component"
+ },
+ "spectrum-switch-font-size": {
+ "value": "18px",
+ "description": "Defined in `.spectrum-Switch`, `.spectrum-Switch--sizeS`, `.spectrum-Switch--sizeL`, `.spectrum-Switch--sizeXL`.
Used by `.spectrum-Switch-label`.
Defaults to `var(--spectrum-font-size-300)`, if not set.",
+ "control": "text",
+ "category": "Component"
+ },
+ "spectrum-switch-line-height": {
+ "value": "1.3",
+ "description": "Defined in `.spectrum-Switch`.
Used by `.spectrum-Switch-label`.
Defaults to `var(--spectrum-line-height-100)`, if not set.",
+ "control": "text",
+ "category": "Component"
+ },
+ "spectrum-switch-cjk-line-height": {
+ "value": "1.5",
+ "description": "Defined in `.spectrum-Switch`.
Used by `.spectrum-Switch-label:lang(ja), .spectrum-Switch-label:lang(ko), .spectrum-Switch-label:lang(zh)`.
Defaults to `var(--spectrum-cjk-line-height-100)`, if not set.",
+ "control": "text",
+ "category": "Component"
+ },
+ "spectrum-switch-border-radius": {
+ "value": "9999px",
+ "description": "Defined in `.spectrum-Switch`.
Used by `.spectrum-Switch-switch`, `.spectrum-Switch-switch:before`, `.spectrum-Switch-switch:after`.
Defaults to `var(--spectrum-corner-radius-full)`, if not set.",
+ "control": "text",
+ "category": "Component"
+ },
+ "spectrum-switch-control-width-small": {
+ "value": "22px",
+ "description": "Used by `--spectrum-switch-control-width`.",
+ "control": "text",
+ "category": "Component"
+ },
+ "spectrum-switch-control-height-small": {
+ "value": "14px",
+ "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-handle-size-small": {
+ "value": "6px",
+ "description": "Used by `--spectrum-switch-handle-size`.",
+ "control": "text",
+ "category": "Component"
+ },
+ "spectrum-switch-handle-selected-size-small": {
+ "value": "8px",
+ "description": "Used by `--spectrum-switch-handle-selected-size`.",
+ "control": "text",
+ "category": "Component"
+ },
+ "spectrum-switch-control-width-large": {
+ "value": "30px",
+ "description": "Used by `--spectrum-switch-control-width`.",
+ "control": "text",
+ "category": "Component"
+ },
+ "spectrum-switch-control-height-large": {
+ "value": "18px",
+ "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-handle-size-large": {
+ "value": "10px",
+ "description": "Used by `--spectrum-switch-handle-size`.",
+ "control": "text",
+ "category": "Component"
+ },
+ "spectrum-switch-handle-selected-size-large": {
+ "value": "12px",
+ "description": "Used by `--spectrum-switch-handle-selected-size`.",
+ "control": "text",
+ "category": "Component"
+ },
+ "spectrum-switch-control-width-extra-large": {
+ "value": "34px",
+ "description": "Used by `--spectrum-switch-control-width`.",
+ "control": "text",
+ "category": "Component"
+ },
+ "spectrum-switch-control-height-extra-large": {
+ "value": "20px",
+ "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-handle-size-extra-large": {
+ "value": "12px",
+ "description": "Used by `--spectrum-switch-handle-size`.",
+ "control": "text",
+ "category": "Component"
+ },
+ "spectrum-switch-handle-selected-size-extra-large": {
+ "value": "14px",
+ "description": "Used by `--spectrum-switch-handle-selected-size`.",
+ "control": "text",
+ "category": "Component"
+ }
+ },
+ "global": {
+ "spectrum-neutral-content-color-default": {
+ "value": "var(--spectrum-gray-800)",
+ "description": "Used by `--spectrum-switch-label-color-default`, `--spectrum-switch-border-color-default`, `--spectrum-switch-border-color-selected-default`, `--spectrum-switch-handle-background-color-default`.",
+ "control": "color",
+ "category": "Global"
+ },
+ "spectrum-neutral-content-color-hover": {
+ "value": "var(--spectrum-gray-900)",
+ "description": "Used by `--spectrum-switch-label-color-hover`, `--spectrum-switch-border-color-hover`, `--spectrum-switch-border-color-selected-hover`, `--spectrum-switch-handle-background-color-hover`.",
+ "control": "color",
+ "category": "Global"
+ },
+ "spectrum-neutral-content-color-down": {
+ "value": "var(--spectrum-gray-900)",
+ "description": "Used by `--spectrum-switch-label-color-down`, `--spectrum-switch-border-color-down`, `--spectrum-switch-border-color-selected-down`, `--spectrum-switch-handle-background-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`, `--spectrum-switch-border-color-focus`, `--spectrum-switch-border-color-selected-focus`, `--spectrum-switch-handle-background-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-border-color-disabled`, `--spectrum-switch-background-color-selected-disabled`, `--spectrum-switch-handle-background-color-disabled`, `--spectrum-switch-label-color-default`.",
+ "control": "color",
+ "category": "Global"
+ },
+ "spectrum-border-width-200": {
+ "value": "2px",
+ "description": "Used by `--spectrum-switch-border-width`.",
+ "control": "text",
+ "category": "Global"
+ },
+ "spectrum-gray-25": {
+ "value": "light-dark(rgb(255, 255, 255), rgb(17, 17, 17))",
+ "description": "Used by `--spectrum-switch-background-color`, `--spectrum-switch-background-color-disabled`, `--spectrum-switch-handle-background-color-selected`, `--spectrum-switch-handle-background-color-selected-disabled`.",
+ "control": "text",
+ "category": "Global"
+ },
+ "spectrum-neutral-background-color-default": {
+ "value": "var(--spectrum-gray-800)",
+ "description": "Used by `--spectrum-switch-background-color-selected-default`.",
+ "control": "color",
+ "category": "Global"
+ },
+ "spectrum-neutral-background-color-hover": {
+ "value": "var(--spectrum-gray-900)",
+ "description": "Used by `--spectrum-switch-background-color-selected-hover`.",
+ "control": "color",
+ "category": "Global"
+ },
+ "spectrum-neutral-background-color-down": {
+ "value": "var(--spectrum-gray-900)",
+ "description": "Used by `--spectrum-switch-background-color-selected-down`.",
+ "control": "color",
+ "category": "Global"
+ },
+ "spectrum-neutral-background-color-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-focus-indicator-gap": {
+ "value": "2px",
+ "description": "Used by `--spectrum-switch-focus-indicator-gap`.",
+ "control": "text",
+ "category": "Global"
+ },
+ "spectrum-animation-duration-100": {
+ "description": "Used by `--spectrum-switch-animation-duration-switch`.",
+ "control": "text",
+ "category": "Global"
+ },
+ "spectrum-animation-duration-200": {
+ "description": "Used by `--spectrum-switch-animation-duration-label`.",
+ "control": "text",
+ "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-component-bottom-to-text-100": {
+ "value": "9px",
+ "description": "Used by `--spectrum-switch-spacing-bottom-to-label`.",
+ "control": "text",
+ "category": "Global"
+ },
+ "spectrum-font-size-100": {
+ "value": "14px",
+ "description": "Used by `--spectrum-switch-font-size`.",
+ "control": "text",
+ "category": "Global"
+ },
+ "spectrum-line-height-100": {
+ "value": "1.3",
+ "description": "Used by `--spectrum-switch-line-height`.",
+ "control": "text",
+ "category": "Global"
+ },
+ "spectrum-cjk-line-height-100": {
+ "value": "1.5",
+ "description": "Used by `--spectrum-switch-cjk-line-height`.",
+ "control": "text",
+ "category": "Global"
+ },
+ "spectrum-corner-radius-full": {
+ "value": "9999px",
+ "description": "Used by `--spectrum-switch-border-radius`.",
+ "control": "text",
+ "category": "Global"
+ },
+ "spectrum-accent-background-color-default": {
+ "value": "var(--spectrum-accent-color-900)",
+ "description": "Used by `--spectrum-switch-background-color-selected-default`, `--spectrum-switch-border-color-selected-default`.",
+ "control": "color",
+ "category": "Global"
+ },
+ "spectrum-accent-background-color-hover": {
+ "value": "var(--spectrum-accent-color-1000)",
+ "description": "Used by `--spectrum-switch-background-color-selected-hover`, `--spectrum-switch-border-color-selected-hover`.",
+ "control": "color",
+ "category": "Global"
+ },
+ "spectrum-accent-background-color-down": {
+ "value": "var(--spectrum-accent-color-1000)",
+ "description": "Used by `--spectrum-switch-background-color-selected-down`, `--spectrum-switch-border-color-selected-down`.",
+ "control": "color",
+ "category": "Global"
+ },
+ "spectrum-accent-background-color-key-focus": {
+ "value": "var(--spectrum-accent-color-1000)",
+ "description": "Used by `--spectrum-switch-background-color-selected-focus`, `--spectrum-switch-border-color-selected-focus`.",
+ "control": "color",
+ "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-component-bottom-to-text-75": {
+ "value": "5px",
+ "description": "Used by `--spectrum-switch-spacing-bottom-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-component-bottom-to-text-200": {
+ "value": "11px",
+ "description": "Used by `--spectrum-switch-spacing-bottom-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-component-bottom-to-text-300": {
+ "value": "14px",
+ "description": "Used by `--spectrum-switch-spacing-bottom-to-label`.",
+ "control": "text",
+ "category": "Global"
+ },
+ "spectrum-font-size-300": {
+ "value": "18px",
+ "description": "Used by `--spectrum-switch-font-size`.",
+ "control": "text",
+ "category": "Global"
+ },
+ "spectrum-component-size-minimum-perspective-down": {
+ "value": "24px",
+ "description": "Used by `.spectrum-Switch--active .spectrum-Switch-input:not(:disabled) + .spectrum-Switch-switch:before, .spectrum-Switch:active .spectrum-Switch-input:not(:disabled) + .spectrum-Switch-switch:before`, `.spectrum-Switch--active .spectrum-Switch-input:not(:disabled):checked + .spectrum-Switch-switch:before, .spectrum-Switch:active .spectrum-Switch-input:not(:disabled):checked + .spectrum-Switch-switch:before`, `.spectrum-Switch--active .spectrum-Switch-input:not(:disabled):checked + .spectrum-Switch-switch:before:dir(rtl), .spectrum-Switch:active .spectrum-Switch-input:not(:disabled):checked + .spectrum-Switch-switch:before:dir(rtl)`.",
+ "control": "text",
+ "category": "Global"
+ },
+ "spectrum-component-size-difference-down": {
+ "value": "-2px",
+ "description": "Used by `.spectrum-Switch--active .spectrum-Switch-input:not(:disabled) + .spectrum-Switch-switch:before, .spectrum-Switch:active .spectrum-Switch-input:not(:disabled) + .spectrum-Switch-switch:before`, `.spectrum-Switch--active .spectrum-Switch-input:not(:disabled):checked + .spectrum-Switch-switch:before, .spectrum-Switch:active .spectrum-Switch-input:not(:disabled):checked + .spectrum-Switch-switch:before`, `.spectrum-Switch--active .spectrum-Switch-input:not(:disabled):checked + .spectrum-Switch-switch:before:dir(rtl), .spectrum-Switch:active .spectrum-Switch-input:not(:disabled):checked + .spectrum-Switch-switch:before:dir(rtl)`.",
+ "control": "text",
+ "category": "Global"
+ }
+ },
+ "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-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-label`.
Defaults to `var(--mod-switch-label-color-down, var(--spectrum-switch-label-color-down))`, 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-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-background-color": {
+ "value": "var(--mod-switch-background-color, var(--spectrum-switch-background-color))",
+ "description": "Defined in `.spectrum-Switch`.
Used by `.spectrum-Switch-switch`.
Defaults to `var(--mod-switch-background-color, var(--spectrum-switch-background-color))`, if not set.",
+ "control": "color"
+ },
+ "highcontrast-switch-border-color-default": {
+ "value": "var(--mod-switch-border-color-default, var(--spectrum-switch-border-color-default))",
+ "description": "Defined in `.spectrum-Switch`.
Used by `.spectrum-Switch-switch`.
Defaults to `var(--mod-switch-border-color-default, var(--spectrum-switch-border-color-default))`, if not set.",
+ "control": "color"
+ },
+ "highcontrast-switch-border-color-down": {
+ "value": "var(--mod-switch-border-color-down, var(--spectrum-switch-border-color-down))",
+ "description": "Defined in `.spectrum-Switch`.
Used by `.spectrum-Switch-switch .spectrum-Switch--active, .spectrum-Switch.spectrum-Switch:active .spectrum-Switch-switch`.
Defaults to `var(--mod-switch-border-color-down, var(--spectrum-switch-border-color-down))`, if not set.",
+ "control": "color"
+ },
+ "highcontrast-switch-border-color-focus": {
+ "value": "var(--mod-switch-border-color-focus, var(--spectrum-switch-border-color-focus))",
+ "description": "Defined in `.spectrum-Switch`.
Used by `.spectrum-Switch-input:focus-visible + .spectrum-Switch-switch`.
Defaults to `var(--mod-switch-border-color-focus, var(--spectrum-switch-border-color-focus))`, 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-border-color-selected-default": {
+ "value": "var(--mod-switch-border-color-selected-default, var(--spectrum-switch-border-color-selected-default))",
+ "description": "Defined in `.spectrum-Switch`.
Used by `.spectrum-Switch-input:checked + .spectrum-Switch-switch`.
Defaults to `var(--mod-switch-border-color-selected-default, var(--spectrum-switch-border-color-selected-default))`, 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 + .spectrum-Switch-switch, .spectrum-Switch.spectrum-Switch:active .spectrum-Switch-input:checked + .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-border-color-selected-down": {
+ "value": "var(--mod-switch-border-color-selected-down, var(--spectrum-switch-border-color-selected-down))",
+ "description": "Defined in `.spectrum-Switch`.
Used by `.spectrum-Switch--active .spectrum-Switch-input:checked + .spectrum-Switch-switch, .spectrum-Switch.spectrum-Switch:active .spectrum-Switch-input:checked + .spectrum-Switch-switch`.
Defaults to `var(--mod-switch-border-color-selected-down, var(--spectrum-switch-border-color-selected-down))`, 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-input:checked:focus-visible + .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-border-color-selected-focus": {
+ "value": "var(--mod-switch-border-color-selected-focus, var(--spectrum-switch-border-color-selected-focus))",
+ "description": "Defined in `.spectrum-Switch`.
Used by `.spectrum-Switch-input:checked:focus-visible + .spectrum-Switch-switch`.
Defaults to `var(--mod-switch-border-color-selected-focus, var(--spectrum-switch-border-color-selected-focus))`, if not set.",
+ "control": "color"
+ },
+ "highcontrast-switch-handle-background-color-default": {
+ "value": "var(--mod-switch-handle-background-color-default, var(--spectrum-switch-handle-background-color-default))",
+ "description": "Defined in `.spectrum-Switch`.
Used by `.spectrum-Switch-switch:before`.
Defaults to `var(--mod-switch-handle-background-color-default, var(--spectrum-switch-handle-background-color-default))`, if not set.",
+ "control": "color"
+ },
+ "highcontrast-switch-handle-background-color-down": {
+ "value": "var(--mod-switch-handle-background-color-down, var(--spectrum-switch-handle-background-color-down))",
+ "description": "Defined in `.spectrum-Switch`.
Used by `.spectrum-Switch.spectrum-Switch:active .spectrum-Switch-switch:before`.
Defaults to `var(--mod-switch-handle-background-color-down, var(--spectrum-switch-handle-background-color-down))`, if not set.",
+ "control": "color"
+ },
+ "highcontrast-switch-handle-background-color-focus": {
+ "value": "var(--mod-switch-handle-background-color-focus, var(--spectrum-switch-handle-background-color-focus))",
+ "description": "Defined in `.spectrum-Switch`.
Used by `.spectrum-Switch-input:focus-visible + .spectrum-Switch-switch:before`.
Defaults to `var(--mod-switch-handle-background-color-focus, var(--spectrum-switch-handle-background-color-focus))`, if not set.",
+ "control": "color"
+ },
+ "highcontrast-switch-handle-background-color-selected": {
+ "value": "var(--mod-switch-handle-background-color-selected, var(--spectrum-switch-handle-background-color-selected))",
+ "description": "Defined in `.spectrum-Switch`.
Used by `.spectrum-Switch-input:checked + .spectrum-Switch-switch:before`, `.spectrum-Switch:hover .spectrum-Switch-input:checked + .spectrum-Switch-switch:before`.
Defaults to `var(--mod-switch-handle-background-color-selected, var(--spectrum-switch-handle-background-color-selected))`, 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-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-background-color-disabled": {
+ "value": "var(--mod-switch-background-color-disabled, var(--spectrum-switch-background-color-disabled))",
+ "description": "Defined in `.spectrum-Switch`.
Used by `.spectrum-Switch .spectrum-Switch-input:disabled + .spectrum-Switch-switch, .spectrum-Switch .spectrum-Switch-input[disabled] + .spectrum-Switch-switch`, `.spectrum-Switch:hover .spectrum-Switch-input:disabled + .spectrum-Switch-switch, .spectrum-Switch:hover .spectrum-Switch-input[disabled] + .spectrum-Switch-switch`.
Defaults to `var(--mod-switch-background-color-disabled, var(--spectrum-switch-background-color-disabled))`, if not set.",
+ "control": "color"
+ },
+ "highcontrast-switch-border-color-disabled": {
+ "value": "var(--mod-switch-border-color-disabled, var(--spectrum-switch-border-color-disabled))",
+ "description": "Defined in `.spectrum-Switch`.
Used by `.spectrum-Switch .spectrum-Switch-input:disabled + .spectrum-Switch-switch, .spectrum-Switch .spectrum-Switch-input[disabled] + .spectrum-Switch-switch`, `.spectrum-Switch:hover .spectrum-Switch-input:disabled + .spectrum-Switch-switch, .spectrum-Switch:hover .spectrum-Switch-input[disabled] + .spectrum-Switch-switch`.
Defaults to `var(--mod-switch-border-color-disabled, var(--spectrum-switch-border-color-disabled))`, if not set.",
+ "control": "color"
+ },
+ "highcontrast-switch-handle-background-color-disabled": {
+ "value": "var(--mod-switch-handle-background-color-disabled, var(--spectrum-switch-handle-background-color-disabled))",
+ "description": "Defined in `.spectrum-Switch`.
Used by `.spectrum-Switch .spectrum-Switch-input:disabled + .spectrum-Switch-switch:before, .spectrum-Switch .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] + .spectrum-Switch-switch:before`.
Defaults to `var(--mod-switch-handle-background-color-disabled, var(--spectrum-switch-handle-background-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 .spectrum-Switch-input:disabled:checked + .spectrum-Switch-switch, .spectrum-Switch .spectrum-Switch-input[disabled]:checked + .spectrum-Switch-switch`, `.spectrum-Switch:hover .spectrum-Switch-input:disabled:checked + .spectrum-Switch-switch, .spectrum-Switch:hover .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-handle-background-color-selected-disabled": {
+ "value": "var(--mod-switch-handle-background-color-selected-disabled, var(--spectrum-switch-handle-background-color-selected-disabled))",
+ "description": "Defined in `.spectrum-Switch`.
Used by `.spectrum-Switch .spectrum-Switch-input:disabled:checked + .spectrum-Switch-switch:before, .spectrum-Switch .spectrum-Switch-input[disabled]:checked + .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`.
Defaults to `var(--mod-switch-handle-background-color-selected-disabled, var(--spectrum-switch-handle-background-color-selected-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 .spectrum-Switch-input:disabled ~ .spectrum-Switch-label, .spectrum-Switch .spectrum-Switch-input[disabled] ~ .spectrum-Switch-label`, `.spectrum-Switch:hover .spectrum-Switch-input:disabled ~ .spectrum-Switch-label, .spectrum-Switch:hover .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-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-label`.
Defaults to `var(--mod-switch-label-color-hover, var(--spectrum-switch-label-color-hover))`, if not set.",
+ "control": "color"
+ },
+ "highcontrast-switch-border-color-hover": {
+ "value": "var(--mod-switch-border-color-hover, var(--spectrum-switch-border-color-hover))",
+ "description": "Defined in `.spectrum-Switch`.
Used by `.spectrum-Switch:hover .spectrum-Switch-switch`.
Defaults to `var(--mod-switch-border-color-hover, var(--spectrum-switch-border-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 + .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-border-color-selected-hover": {
+ "value": "var(--mod-switch-border-color-selected-hover, var(--spectrum-switch-border-color-selected-hover))",
+ "description": "Defined in `.spectrum-Switch`.
Used by `.spectrum-Switch:hover .spectrum-Switch-input:checked + .spectrum-Switch-switch`.
Defaults to `var(--mod-switch-border-color-selected-hover, var(--spectrum-switch-border-color-selected-hover))`, if not set.",
+ "control": "color"
+ },
+ "highcontrast-switch-handle-background-color-hover": {
+ "value": "var(--mod-switch-handle-background-color-hover, var(--spectrum-switch-handle-background-color-hover))",
+ "description": "Defined in `.spectrum-Switch`.
Used by `.spectrum-Switch:hover .spectrum-Switch-switch:before`.
Defaults to `var(--mod-switch-handle-background-color-hover, var(--spectrum-switch-handle-background-color-hover))`, if not set.",
+ "control": "color"
+ }
+ }
}
diff --git a/components/switch/stories/switch.stories.js b/components/switch/stories/switch.stories.js
index d3c38b01ad9..4eed1066672 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 { isActive, 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.
*/
@@ -47,9 +49,7 @@ export default {
},
packageJson,
metadata,
- status: {
- type: "migrated",
- },
+ cssprops: metadata.modifiers,
},
tags: ["migrated"],
};
diff --git a/components/table/dist/metadata.json b/components/table/dist/metadata.json
index cf66742117b..34dbcc2a2c8 100644
--- a/components/table/dist/metadata.json
+++ b/components/table/dist/metadata.json
@@ -33,13 +33,13 @@
".spectrum-Table-collapseInner",
".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\"]",
@@ -51,11 +51,15 @@
".spectrum-Table-headCell .spectrum-Table-menuButton:focus:hover",
".spectrum-Table-headCell .spectrum-Table-menuButton:hover",
".spectrum-Table-headCell .spectrum-Table-sortButton",
- ".spectrum-Table-headCell .spectrum-Table-sortButton.is-keyboardFocused",
".spectrum-Table-headCell .spectrum-Table-sortButton:active",
".spectrum-Table-headCell .spectrum-Table-sortButton:focus",
".spectrum-Table-headCell .spectrum-Table-sortButton:focus-visible",
".spectrum-Table-headCell .spectrum-Table-sortButton:hover",
+ ".spectrum-Table-headCell .spectrum-Table-sortButton.is-keyboardFocused",
+ ".spectrum-Table-headCell:focus",
+ ".spectrum-Table-headCell:focus-visible",
+ ".spectrum-Table-headCell:focus-visible:after",
+ ".spectrum-Table-headCell:focus:after",
".spectrum-Table-headCell.is-sortable",
".spectrum-Table-headCell.is-sortable .spectrum-Table-sortButton",
".spectrum-Table-headCell.is-sortable .spectrum-Table-sortButton .spectrum-Icon",
@@ -64,11 +68,11 @@
".spectrum-Table-headCell.is-sortable .spectrum-Table-sortButton:focus",
".spectrum-Table-headCell.is-sortable .spectrum-Table-sortButton:focus-visible",
".spectrum-Table-headCell.is-sortable .spectrum-Table-sortButton:hover",
- ".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:hover",
+ ".spectrum-Table-headCell.is-sortable.is-keyboardFocused",
".spectrum-Table-headCell.spectrum-Table-hasMenuButton",
".spectrum-Table-headCell.spectrum-Table-hasMenuButton .spectrum-Table-sortButton",
".spectrum-Table-headCell.spectrum-Table-hasMenuButton .spectrum-Table-sortButton .spectrum-Button-label",
@@ -76,15 +80,11 @@
".spectrum-Table-headCell.spectrum-Table-hasMenuButton .spectrum-Table-sortButton .spectrum-Icon",
".spectrum-Table-headCell.spectrum-Table-hasMenuButton .spectrum-Table-sortButton:focus-visible:after",
".spectrum-Table-headCell.spectrum-Table-hasMenuButton .spectrum-Table-sortButton:hover",
- ".spectrum-Table-headCell.spectrum-Table-hasMenuButton.is-keyboardFocused",
".spectrum-Table-headCell.spectrum-Table-hasMenuButton:active",
".spectrum-Table-headCell.spectrum-Table-hasMenuButton:focus",
".spectrum-Table-headCell.spectrum-Table-hasMenuButton:focus-visible",
".spectrum-Table-headCell.spectrum-Table-hasMenuButton:hover",
- ".spectrum-Table-headCell:focus",
- ".spectrum-Table-headCell:focus-visible",
- ".spectrum-Table-headCell:focus-visible:after",
- ".spectrum-Table-headCell:focus:after",
+ ".spectrum-Table-headCell.spectrum-Table-hasMenuButton.is-keyboardFocused",
".spectrum-Table-headRow .spectrum-ActionButton:after",
".spectrum-Table-headRow .spectrum-Table-checkboxCell",
".spectrum-Table-headRow .spectrum-Table-checkboxCell .spectrum-Table-checkbox",
@@ -115,16 +115,6 @@
".spectrum-Table-row--summary",
".spectrum-Table-row--summary .spectrum-Table-cell",
".spectrum-Table-row--summary:hover",
- ".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-selected",
- ".spectrum-Table-row.is-selected .spectrum-Table-cell",
- ".spectrum-Table-row.is-selected .spectrum-Table-checkbox .spectrum-Checkbox-box:before",
- ".spectrum-Table-row.is-selected:active",
- ".spectrum-Table-row.is-selected:focus-visible",
- ".spectrum-Table-row.is-selected:hover",
- ".spectrum-Table-row.is-selected:not(:has(+ .is-selected)) .spectrum-Table-cell",
".spectrum-Table-row:active",
".spectrum-Table-row:first-child",
".spectrum-Table-row:first-child .spectrum-Table-cell:last-child",
@@ -146,6 +136,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-selected",
+ ".spectrum-Table-row.is-selected .spectrum-Table-cell",
+ ".spectrum-Table-row.is-selected .spectrum-Table-checkbox .spectrum-Checkbox-box:before",
+ ".spectrum-Table-row.is-selected:active",
+ ".spectrum-Table-row.is-selected:focus-visible",
+ ".spectrum-Table-row.is-selected:hover",
+ ".spectrum-Table-row.is-selected:not(:has(+ .is-selected)) .spectrum-Table-cell",
".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",
@@ -163,293 +163,1501 @@
".spectrum-Table:lang(zh)",
".spectrum-Table:not(.spectrum-Table-scroller)"
],
- "modifiers": [
- "--mod-table-avatar-size",
- "--mod-table-avatar-size-compact",
- "--mod-table-avatar-size-spacious",
- "--mod-table-border-color",
- "--mod-table-border-radius",
- "--mod-table-border-radius-quiet",
- "--mod-table-border-width",
- "--mod-table-cell-inline-spacing",
- "--mod-table-checkbox-to-cell-content",
- "--mod-table-collapsible-disclosure-inline-spacing",
- "--mod-table-collapsible-icon-animation-duration",
- "--mod-table-current-header-height",
- "--mod-table-cursor-header-default",
- "--mod-table-cursor-header-sortable",
- "--mod-table-cursor-row-default",
- "--mod-table-cursor-section-header",
- "--mod-table-default-vertical-align",
- "--mod-table-disclosure-icon-size",
- "--mod-table-divider-color",
- "--mod-table-drop-zone-background-color",
- "--mod-table-drop-zone-outline-color",
- "--mod-table-focus-indicator-color",
- "--mod-table-focus-indicator-thickness",
- "--mod-table-header-background-color",
- "--mod-table-header-background-color-scrollable",
- "--mod-table-header-font-family",
- "--mod-table-header-font-size",
- "--mod-table-header-font-style",
- "--mod-table-header-font-weight",
- "--mod-table-header-icons-color-active",
- "--mod-table-header-icons-color-default",
- "--mod-table-header-icons-color-hover",
- "--mod-table-header-icons-color-key-focus",
- "--mod-table-header-line-height",
- "--mod-table-header-row-bottom-to-text",
- "--mod-table-header-row-checkbox-block-spacing",
- "--mod-table-header-row-top-to-text",
- "--mod-table-header-text-color",
- "--mod-table-header-text-transform",
- "--mod-table-header-vertical-align",
- "--mod-table-icon-color-active",
- "--mod-table-icon-color-default",
- "--mod-table-icon-color-focus",
- "--mod-table-icon-color-focus-hover",
- "--mod-table-icon-color-hover",
- "--mod-table-icon-color-key-focus",
- "--mod-table-min-header-height",
- "--mod-table-min-row-height",
- "--mod-table-min-row-height-compact",
- "--mod-table-min-row-height-spacious",
- "--mod-table-outer-border-inline-width",
- "--mod-table-outer-border-inline-width-quiet",
- "--mod-table-row-background-color",
- "--mod-table-row-background-color-active",
- "--mod-table-row-background-color-hover",
- "--mod-table-row-bottom-to-text",
- "--mod-table-row-checkbox-block-spacing",
- "--mod-table-row-checkbox-block-spacing-compact",
- "--mod-table-row-checkbox-block-spacing-spacious",
- "--mod-table-row-font-family",
- "--mod-table-row-font-size",
- "--mod-table-row-font-style",
- "--mod-table-row-font-weight",
- "--mod-table-row-line-height",
- "--mod-table-row-text-color",
- "--mod-table-row-text-color-active",
- "--mod-table-row-text-color-hover",
- "--mod-table-row-top-to-text",
- "--mod-table-section-header-background-color",
- "--mod-table-section-header-block-end-spacing",
- "--mod-table-section-header-block-start-spacing",
- "--mod-table-section-header-font-family",
- "--mod-table-section-header-font-size",
- "--mod-table-section-header-font-style",
- "--mod-table-section-header-font-weight",
- "--mod-table-section-header-inline-start-spacing",
- "--mod-table-section-header-line-height",
- "--mod-table-section-header-min-height",
- "--mod-table-section-header-text-color",
- "--mod-table-selected-row-background-color",
- "--mod-table-selected-row-background-color-focus",
- "--mod-table-selected-row-background-color-non-emphasized",
- "--mod-table-selected-row-background-color-non-emphasized-focus",
- "--mod-table-summary-row-background-color",
- "--mod-table-summary-row-bottom-to-text",
- "--mod-table-summary-row-font-family",
- "--mod-table-summary-row-font-size",
- "--mod-table-summary-row-font-style",
- "--mod-table-summary-row-font-weight",
- "--mod-table-summary-row-line-height",
- "--mod-table-summary-row-min-height",
- "--mod-table-summary-row-text-color",
- "--mod-table-summary-row-top-to-text",
- "--mod-table-thumbnail-size",
- "--mod-table-thumbnail-size-compact",
- "--mod-table-thumbnail-size-spacious",
- "--mod-table-transition-duration",
- "--mod-table-visual-to-text"
- ],
- "component": [
- "--spectrum-table-avatar-size",
- "--spectrum-table-border-color",
- "--spectrum-table-border-divider-width",
- "--spectrum-table-border-radius",
- "--spectrum-table-border-width",
- "--spectrum-table-cell-background-color",
- "--spectrum-table-cell-inline-spacing",
- "--spectrum-table-checkbox-to-cell-content",
- "--spectrum-table-checkbox-to-text",
- "--spectrum-table-collapsible-disclosure-inline-spacing",
- "--spectrum-table-collapsible-icon-animation-duration",
- "--spectrum-table-collapsible-tier-indent",
- "--spectrum-table-column-header-row-bottom-to-text-medium",
- "--spectrum-table-column-header-row-top-to-text-medium",
- "--spectrum-table-default-vertical-align",
- "--spectrum-table-disclosure-icon-size",
- "--spectrum-table-divider-color",
- "--spectrum-table-drop-zone-background-color",
- "--spectrum-table-drop-zone-outline-color",
- "--spectrum-table-edge-to-content",
- "--spectrum-table-focus-indicator-color",
- "--spectrum-table-focus-indicator-thickness",
- "--spectrum-table-focused-cell-border-radius",
- "--spectrum-table-header-background-color",
- "--spectrum-table-header-font-weight",
- "--spectrum-table-header-icons-color-active",
- "--spectrum-table-header-icons-color-default",
- "--spectrum-table-header-icons-color-hover",
- "--spectrum-table-header-icons-color-key-focus",
- "--spectrum-table-header-row-bottom-to-text",
- "--spectrum-table-header-row-checkbox-block-spacing",
- "--spectrum-table-header-row-checkbox-to-top-medium",
- "--spectrum-table-header-row-top-to-text",
- "--spectrum-table-header-text-color",
- "--spectrum-table-icon-color",
- "--spectrum-table-icon-color-active",
- "--spectrum-table-icon-color-default",
- "--spectrum-table-icon-color-hover",
- "--spectrum-table-icon-color-key-focus",
- "--spectrum-table-min-header-row-height",
- "--spectrum-table-min-row-height",
- "--spectrum-table-outer-border-inline-width",
- "--spectrum-table-row-background-color",
- "--spectrum-table-row-background-color-active",
- "--spectrum-table-row-background-color-hover",
- "--spectrum-table-row-bottom-to-text",
- "--spectrum-table-row-bottom-to-text-medium",
- "--spectrum-table-row-bottom-to-text-medium-compact",
- "--spectrum-table-row-bottom-to-text-medium-spacious",
- "--spectrum-table-row-checkbox-block-spacing",
- "--spectrum-table-row-checkbox-to-top-medium",
- "--spectrum-table-row-checkbox-to-top-medium-compact",
- "--spectrum-table-row-checkbox-to-top-medium-spacious",
- "--spectrum-table-row-down-opacity",
- "--spectrum-table-row-focus-indicator-width",
- "--spectrum-table-row-font-family",
- "--spectrum-table-row-font-size",
- "--spectrum-table-row-font-style",
- "--spectrum-table-row-font-weight",
- "--spectrum-table-row-height-medium",
- "--spectrum-table-row-height-medium-compact",
- "--spectrum-table-row-height-medium-spacious",
- "--spectrum-table-row-hover-opacity",
- "--spectrum-table-row-line-height",
- "--spectrum-table-row-text-color",
- "--spectrum-table-row-text-color-active",
- "--spectrum-table-row-text-color-hover",
- "--spectrum-table-row-text-color-key-focus",
- "--spectrum-table-row-tier",
- "--spectrum-table-row-top-to-text",
- "--spectrum-table-row-top-to-text-medium",
- "--spectrum-table-row-top-to-text-medium-compact",
- "--spectrum-table-row-top-to-text-medium-spacious",
- "--spectrum-table-section-header-background-color",
- "--spectrum-table-section-header-block-end-spacing",
- "--spectrum-table-section-header-block-start-spacing",
- "--spectrum-table-section-header-font-weight",
- "--spectrum-table-section-header-min-height",
- "--spectrum-table-section-header-row-height-medium",
- "--spectrum-table-selected-cell-background-color",
- "--spectrum-table-selected-cell-background-color-focus",
- "--spectrum-table-selected-row-background-color",
- "--spectrum-table-selected-row-background-color-active",
- "--spectrum-table-selected-row-background-color-hover",
- "--spectrum-table-selected-row-background-color-non-emphasized",
- "--spectrum-table-selected-row-background-color-non-emphasized-focus",
- "--spectrum-table-selected-row-background-color-rgb",
- "--spectrum-table-selected-row-background-opacity",
- "--spectrum-table-selected-row-background-opacity-hover",
- "--spectrum-table-selected-row-background-opacity-non-emphasized",
- "--spectrum-table-selected-row-background-opacity-non-emphasized-hover",
- "--spectrum-table-summary-row-background-color",
- "--spectrum-table-summary-row-font-weight",
- "--spectrum-table-thumbnail-size",
- "--spectrum-table-transition-duration",
- "--spectrum-table-visual-to-text"
- ],
- "global": [
- "--spectrum-accent-visual-color",
- "--spectrum-animation-duration-100",
- "--spectrum-avatar-size-100",
- "--spectrum-avatar-size-50",
- "--spectrum-avatar-size-75",
- "--spectrum-body-color",
- "--spectrum-bold-font-weight",
- "--spectrum-checkbox-control-size-small",
- "--spectrum-cjk-line-height-100",
- "--spectrum-component-bottom-to-text-100",
- "--spectrum-component-height-100",
- "--spectrum-component-top-to-text-100",
- "--spectrum-corner-radius-medium-size-extra-small",
- "--spectrum-corner-radius-small-default",
- "--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-gray-200",
- "--spectrum-gray-25",
- "--spectrum-gray-300",
- "--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-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-regular-font-weight",
- "--spectrum-sans-font-family-stack",
- "--spectrum-side-focus-indicator",
- "--spectrum-spacing-300",
- "--spectrum-text-to-visual-300",
- "--spectrum-thumbnail-size-100",
- "--spectrum-thumbnail-size-200",
- "--spectrum-thumbnail-size-75"
- ],
- "passthroughs": [
- "--mod-avatar-block-size",
- "--mod-avatar-inline-size",
- "--mod-button-background-color-default",
- "--mod-button-background-color-down",
- "--mod-button-background-color-focus",
- "--mod-button-background-color-hover",
- "--mod-button-border-radius",
- "--mod-button-content-color-default",
- "--mod-button-content-color-down",
- "--mod-button-content-color-focus",
- "--mod-button-content-color-hover",
- "--mod-button-edge-to-text",
- "--mod-button-focus-ring-border-radius",
- "--mod-button-font-family",
- "--mod-button-font-size",
- "--mod-button-font-weight",
- "--mod-button-line-height",
- "--mod-button-padding-label-to-icon",
- "--mod-checkbox-margin-block",
- "--mod-icon-color",
- "--mod-thumbnail-size"
- ],
- "high-contrast": [
- "--highcontrast-table-border-color",
- "--highcontrast-table-cell-focus-indicator-color",
- "--highcontrast-table-divider-color",
- "--highcontrast-table-focus-indicator-color",
- "--highcontrast-table-header-text-color",
- "--highcontrast-table-header-text-color-hover",
- "--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-focus",
- "--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": {
+ "description": "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": {
+ "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": {
+ "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-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-thumbnail-size": {
+ "description": "Defined in `.spectrum-Table--compact`, `.spectrum-Table--spacious`.
Used by `--mod-thumbnail-size`.
Defaults to `var(--spectrum-table-thumbnail-size)`, if not set.",
+ "control": "text",
+ "category": "Modifier"
+ },
+ "mod-table-avatar-size": {
+ "description": "Defined in `.spectrum-Table--compact`, `.spectrum-Table--spacious`.
Used by `--mod-avatar-block-size`, `--mod-avatar-inline-size`.
Defaults to `var(--spectrum-table-avatar-size)`, if not set.",
+ "control": "text",
+ "category": "Modifier"
+ },
+ "mod-table-header-font-weight": {
+ "description": "Used by `--mod-button-font-weight`, `.spectrum-Table-headRow .spectrum-Table-headCell`.
Defaults to `var(--spectrum-table-header-font-weight)`, if not set.",
+ "control": "text",
+ "category": "Modifier"
+ },
+ "mod-table-header-font-size": {
+ "description": "Used by `--mod-button-font-size`, `.spectrum-Table-headRow .spectrum-Table-headCell`, `.spectrum-Table-scroller`.
Defaults to `var(--spectrum-table-row-font-size)`, if not set.",
+ "control": "text",
+ "category": "Modifier"
+ },
+ "mod-table-header-font-family": {
+ "description": "Used by `--mod-button-font-family`, `.spectrum-Table-headRow .spectrum-Table-headCell`.
Defaults to `var(--spectrum-table-row-font-family)`, if not set.",
+ "control": "text",
+ "category": "Modifier"
+ },
+ "mod-table-header-line-height": {
+ "description": "Used by `--mod-button-line-height`, `.spectrum-Table-headRow .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-color": {
+ "description": "Used by `--mod-button-content-color-default`, `--mod-button-content-color-hover`, `--mod-button-content-color-focus`, `--mod-button-content-color-down`, `.spectrum-Table-headRow .spectrum-Table-headCell`, `.spectrum-Table-headCell.is-sortable .spectrum-Table-sortButton`, `.spectrum-Table-headCell.is-sortable .spectrum-Table-sortButton:active, .spectrum-Table-headCell.is-sortable .spectrum-Table-sortButton:focus, .spectrum-Table-headCell.is-sortable .spectrum-Table-sortButton:focus-visible`, `.spectrum-Table-headCell.spectrum-Table-hasMenuButton .spectrum-Table-sortButton`, `.spectrum-Table-headCell.is-sortable .spectrum-Table-sortButton:hover, .spectrum-Table-headCell.spectrum-Table-hasMenuButton .spectrum-Table-sortButton:hover`.
Defaults to `var(--spectrum-table-header-text-color)`, if not set.",
+ "control": "color",
+ "category": "Modifier"
+ },
+ "mod-table-cell-inline-spacing": {
+ "description": "Used by `--mod-button-edge-to-text`, `.spectrum-Table-headRow .spectrum-Table-headCell`, `.spectrum-Table-headRow .spectrum-Table-checkboxCell`, `.spectrum-Table-cell`, `.spectrum-Table-row:focus .spectrum-Table-cell:first-child, .spectrum-Table-row:focus-visible .spectrum-Table-cell:first-child`, `.spectrum-Table-checkboxCell`.
Defaults to `var(--spectrum-table-cell-inline-spacing)`, if not set.",
+ "control": "text",
+ "category": "Modifier"
+ },
+ "mod-table-visual-to-text": {
+ "description": "Used by `--mod-button-padding-label-to-icon`, `.spectrum-Table-headCell.spectrum-Table-hasMenuButton .spectrum-Table-sortButton .spectrum-Button-label:after`, `.spectrum-Table-visualInner .spectrum-Avatar, .spectrum-Table-visualInner .spectrum-Icon, .spectrum-Table-visualInner .spectrum-Thumbnail`.
Defaults to `var(--spectrum-table-visual-to-text)`, if not set.",
+ "control": "text",
+ "category": "Modifier"
+ },
+ "mod-table-border-radius": {
+ "description": "Used by `--mod-button-border-radius`, `--mod-button-focus-ring-border-radius`, `.spectrum-Table-headRow:first-child .spectrum-Table-headCell:first-child`, `.spectrum-Table-headRow:last-child .spectrum-Table-headCell:last-child`, `.spectrum-Table-body`, `.spectrum-Table-body.is-drop-target:after`, `.spectrum-Table-cell:focus-visible:after, .spectrum-Table-cell:focus:after, .spectrum-Table-headCell:focus-visible:after, .spectrum-Table-headCell:focus:after`, `.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-row:focus-visible:last-child .spectrum-Table-cell:first-child:before, .spectrum-Table-row:focus:last-child .spectrum-Table-cell:first-child:before`, `.spectrum-Table-scroller`.
Defaults to `var(--spectrum-table-border-radius)`, if not set.",
+ "control": "text",
+ "category": "Modifier"
+ },
+ "mod-table-border-width": {
+ "description": "Used by `--mod-button-border-radius`, `--mod-button-focus-ring-border-radius`, `.spectrum-Table-headRow .spectrum-Table-headCell`, `.spectrum-Table-headRow:first-child .spectrum-Table-headCell:first-child`, `.spectrum-Table-headRow:last-child .spectrum-Table-headCell:last-child`, `.spectrum-Table-headCell.is-sortable .spectrum-Table-sortButton:after`, `.spectrum-Table-headCell.spectrum-Table-hasMenuButton .spectrum-Table-sortButton:focus-visible:after`, `.spectrum-Table-body`, `.spectrum-Table-cell`, `.spectrum-Table-cell:focus-visible:after, .spectrum-Table-cell:focus:after, .spectrum-Table-headCell:focus-visible:after, .spectrum-Table-headCell:focus:after`, `.spectrum-Table-cell--divider`, `.spectrum-Table-body .spectrum-Table-row:first-child .spectrum-Table-cell`, `.spectrum-Table-body .spectrum-Table-row:last-child .spectrum-Table-cell`, `.spectrum-Table-row.is-selected:not(:has(+ .is-selected)) .spectrum-Table-cell`, `.spectrum-Table-row--summary .spectrum-Table-cell`, `.spectrum-Table-row--sectionHeader .spectrum-Table-cell`, `.spectrum-Table-checkboxCell`, `.spectrum-Table-scroller`, `.spectrum-Table-scroller .spectrum-Table-headRow:first-child .spectrum-Table-headCell`.
Defaults to `var(--spectrum-table-border-width)`, if not set.",
+ "control": "text",
+ "category": "Modifier"
+ },
+ "mod-table-min-row-height-compact": {
+ "description": "Used by `--spectrum-table-min-row-height`.
Defaults to `var(--spectrum-table-row-height-medium-compact)`, if not set.",
+ "control": "text",
+ "category": "Modifier"
+ },
+ "mod-table-row-checkbox-block-spacing-compact": {
+ "description": "Used by `--spectrum-table-row-checkbox-block-spacing`.
Defaults to `var(--spectrum-table-row-checkbox-to-top-medium-compact)`, if not set.",
+ "control": "text",
+ "category": "Modifier"
+ },
+ "mod-table-thumbnail-size-compact": {
+ "description": "Used by `--mod-table-thumbnail-size`.
Defaults to `var(--spectrum-thumbnail-size-75)`, if not set.",
+ "control": "text",
+ "category": "Modifier"
+ },
+ "mod-table-avatar-size-compact": {
+ "description": "Used by `--mod-table-avatar-size`.
Defaults to `var(--spectrum-avatar-size-50)`, if not set.",
+ "control": "text",
+ "category": "Modifier"
+ },
+ "mod-table-min-row-height-spacious": {
+ "description": "Used by `--spectrum-table-min-row-height`.
Defaults to `var(--spectrum-table-row-height-medium-spacious)`, if not set.",
+ "control": "text",
+ "category": "Modifier"
+ },
+ "mod-table-row-checkbox-block-spacing-spacious": {
+ "description": "Used by `--spectrum-table-row-checkbox-block-spacing`.
Defaults to `var(--spectrum-table-row-checkbox-to-top-medium-spacious)`, if not set.",
+ "control": "text",
+ "category": "Modifier"
+ },
+ "mod-table-thumbnail-size-spacious": {
+ "description": "Used by `--mod-table-thumbnail-size`.
Defaults to `var(--spectrum-thumbnail-size-200)`, if not set.",
+ "control": "text",
+ "category": "Modifier"
+ },
+ "mod-table-avatar-size-spacious": {
+ "description": "Used by `--mod-table-avatar-size`.
Defaults to `var(--spectrum-avatar-size-100)`, if not set.",
+ "control": "text",
+ "category": "Modifier"
+ },
+ "mod-table-selected-row-background-color": {
+ "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": {
+ "description": "Used by `--spectrum-table-selected-cell-background-color-focus`.
Defaults to `var(--spectrum-table-selected-row-background-color-hover)`, if not set.",
+ "control": "color",
+ "category": "Modifier"
+ },
+ "mod-table-border-radius-quiet": {
+ "description": "Used by `--spectrum-table-border-radius`.",
+ "control": "text",
+ "category": "Modifier"
+ },
+ "mod-table-outer-border-inline-width-quiet": {
+ "description": "Used by `--spectrum-table-outer-border-inline-width`.",
+ "control": "text",
+ "category": "Modifier"
+ },
+ "mod-table-header-background-color-scrollable": {
+ "description": "Used by `--spectrum-table-header-background-color`.
Defaults to `var(--spectrum-gray-75)`, if not set.",
+ "control": "color",
+ "category": "Modifier"
+ },
+ "mod-table-row-background-color-active": {
+ "description": "Used by `--spectrum-table-cell-background-color`.
Defaults to `var(--spectrum-table-row-background-color-active)`, if not set.",
+ "control": "color",
+ "category": "Modifier"
+ },
+ "mod-table-row-text-color-active": {
+ "description": "Used by `--spectrum-table-row-text-color`.
Defaults to `var(--spectrum-table-row-text-color-active)`, if not set.",
+ "control": "color",
+ "category": "Modifier"
+ },
+ "mod-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-header-icons-color-default": {
+ "description": "Used by `--spectrum-table-icon-color`.
Defaults to `var(--spectrum-table-header-icons-color-default)`, if not set.",
+ "control": "color",
+ "category": "Modifier"
+ },
+ "mod-table-header-icons-color-active": {
+ "description": "Used by `--spectrum-table-icon-color`.
Defaults to `var(--spectrum-table-header-icons-color-active)`, if not set.",
+ "control": "color",
+ "category": "Modifier"
+ },
+ "mod-table-header-icons-color-key-focus": {
+ "description": "Used by `--spectrum-table-icon-color`.
Defaults to `var(--spectrum-table-header-icons-color-key-focus)`, if not set.",
+ "control": "color",
+ "category": "Modifier"
+ },
+ "mod-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-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-header-vertical-align": {
+ "description": "Used by `.spectrum-Table-headRow .spectrum-Table-headCell`.
Defaults to `var(--spectrum-table-default-vertical-align)`, if not set.",
+ "control": "text",
+ "category": "Modifier"
+ },
+ "mod-table-header-font-style": {
+ "description": "Used by `.spectrum-Table-headRow .spectrum-Table-headCell`.
Defaults to `var(--spectrum-table-row-font-style)`, if not set.",
+ "control": "text",
+ "category": "Modifier"
+ },
+ "mod-table-header-text-transform": {
+ "description": "Used by `.spectrum-Table-headRow .spectrum-Table-headCell`.",
+ "control": "text",
+ "category": "Modifier"
+ },
+ "mod-table-min-header-height": {
+ "description": "Used by `.spectrum-Table-headRow .spectrum-Table-headCell`.
Defaults to `var(--spectrum-table-min-header-row-height)`, if not set.",
+ "control": "text",
+ "category": "Modifier"
+ },
+ "mod-table-header-row-top-to-text": {
+ "description": "Used by `.spectrum-Table-headRow .spectrum-Table-headCell`, `.spectrum-Table-scroller`.
Defaults to `var(--spectrum-table-header-row-top-to-text)`, if not set.",
+ "control": "text",
+ "category": "Modifier"
+ },
+ "mod-table-header-row-bottom-to-text": {
+ "description": "Used by `.spectrum-Table-headRow .spectrum-Table-headCell`, `.spectrum-Table-scroller`.
Defaults to `var(--spectrum-table-header-row-bottom-to-text)`, if not set.",
+ "control": "text",
+ "category": "Modifier"
+ },
+ "mod-table-header-background-color": {
+ "description": "Used by `.spectrum-Table-headRow .spectrum-Table-headCell`.
Defaults to `var(--spectrum-table-header-background-color)`, if not set.",
+ "control": "color",
+ "category": "Modifier"
+ },
+ "mod-table-border-color": {
+ "description": "Defined in `.spectrum-Table-body.is-drop-target`, `.spectrum-Table-row.is-drop-target`.
Used by `.spectrum-Table-headRow .spectrum-Table-headCell`, `.spectrum-Table-headRow:first-child .spectrum-Table-headCell:first-child`, `.spectrum-Table-headRow:last-child .spectrum-Table-headCell:last-child`, `.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-headRow:first-child .spectrum-Table-headCell`.
Defaults to `var(--spectrum-table-border-color)`, if not set.",
+ "control": "color",
+ "category": "Modifier"
+ },
+ "mod-table-cursor-header-default": {
+ "description": "Used by `.spectrum-Table-headRow .spectrum-Table-headCell`.",
+ "control": "text",
+ "category": "Modifier"
+ },
+ "mod-table-cursor-header-sortable": {
+ "description": "Used by `.spectrum-Table-headRow .spectrum-Table-headCell.is-sortable`.",
+ "control": "text",
+ "category": "Modifier"
+ },
+ "mod-table-outer-border-inline-width": {
+ "description": "Used by `.spectrum-Table-headRow .spectrum-Table-checkboxCell`, `.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-row--sectionHeader .spectrum-Table-cell`, `.spectrum-Table-scroller`.
Defaults to `var(--spectrum-table-outer-border-inline-width)`, if not set.",
+ "control": "text",
+ "category": "Modifier"
+ },
+ "mod-table-checkbox-to-cell-content": {
+ "description": "Used by `.spectrum-Table-headRow .spectrum-Table-checkboxCell`, `.spectrum-Table-checkboxCell`.
Defaults to `var(--spectrum-table-checkbox-to-cell-content)`, if not set.",
+ "control": "text",
+ "category": "Modifier"
+ },
+ "mod-table-header-row-checkbox-block-spacing": {
+ "description": "Used by `.spectrum-Table-headRow .spectrum-Table-checkboxCell`.
Defaults to `var(--spectrum-table-header-row-checkbox-block-spacing)`, if not set.",
+ "control": "text",
+ "category": "Modifier"
+ },
+ "mod-table-transition-duration": {
+ "description": "Used by `.spectrum-Table-headCell.is-sortable .spectrum-Table-sortButton .spectrum-Icon`, `.spectrum-Table-headCell.spectrum-Table-hasMenuButton .spectrum-Table-sortButton .spectrum-Icon`, `.spectrum-Table-row`.
Defaults to `var(--spectrum-table-transition-duration)`, if not set.",
+ "control": "text",
+ "category": "Modifier"
+ },
+ "mod-table-focus-indicator-thickness": {
+ "description": "Used by `.spectrum-Table-headCell.spectrum-Table-hasMenuButton .spectrum-Table-sortButton:focus-visible:after`, `.spectrum-Table-body.is-drop-target:after`, `.spectrum-Table-cell:focus-visible:after, .spectrum-Table-cell:focus:after, .spectrum-Table-headCell:focus-visible:after, .spectrum-Table-headCell:focus:after`, `.spectrum-Table-row.is-drop-target`, `.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-focus-indicator-color": {
+ "description": "Used by `.spectrum-Table-headCell.spectrum-Table-hasMenuButton .spectrum-Table-sortButton:focus-visible:after`, `.spectrum-Table-cell:focus-visible:after, .spectrum-Table-cell:focus:after, .spectrum-Table-headCell:focus-visible:after, .spectrum-Table-headCell:focus:after`, `.spectrum-Table-row.is-selected:not(:has(+ .is-selected)) .spectrum-Table-cell`, `.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-drop-zone-outline-color": {
+ "description": "Used by `.spectrum-Table-body.is-drop-target:after`, `.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-divider-color": {
+ "description": "Used by `.spectrum-Table-cell`, `.spectrum-Table-cell--divider`, `.spectrum-Table-body .spectrum-Table-row:first-child .spectrum-Table-cell`.
Defaults to `var(--spectrum-table-divider-color)`, if not set.",
+ "control": "color",
+ "category": "Modifier"
+ },
+ "mod-table-row-font-family": {
+ "description": "Used by `.spectrum-Table-cell`.
Defaults to `var(--spectrum-table-row-font-family)`, if not set.",
+ "control": "text",
+ "category": "Modifier"
+ },
+ "mod-table-row-font-style": {
+ "description": "Used by `.spectrum-Table-cell`.
Defaults to `var(--spectrum-table-row-font-style)`, if not set.",
+ "control": "text",
+ "category": "Modifier"
+ },
+ "mod-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": {
+ "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": {
+ "description": "Used by `.spectrum-Table-cell`, `.spectrum-Table-visualInner .spectrum-Avatar, .spectrum-Table-visualInner .spectrum-Icon, .spectrum-Table-visualInner .spectrum-Thumbnail`.
Defaults to `var(--spectrum-table-row-line-height)`, if not set.",
+ "control": "text",
+ "category": "Modifier"
+ },
+ "mod-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": {
+ "description": "Used by `.spectrum-Table-cell`.
Defaults to `var(--spectrum-table-row-text-color)`, if not set.",
+ "control": "color",
+ "category": "Modifier"
+ },
+ "mod-table-min-row-height": {
+ "description": "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-row-top-to-text": {
+ "description": "Used by `.spectrum-Table-cell`.
Defaults to `var(--spectrum-table-row-top-to-text)`, if not set.",
+ "control": "text",
+ "category": "Modifier"
+ },
+ "mod-table-row-bottom-to-text": {
+ "description": "Used by `.spectrum-Table-cell`.
Defaults to `var(--spectrum-table-row-bottom-to-text)`, if not set.",
+ "control": "text",
+ "category": "Modifier"
+ },
+ "mod-table-cursor-row-default": {
+ "description": "Used by `.spectrum-Table-row`.",
+ "control": "text",
+ "category": "Modifier"
+ },
+ "mod-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-min-height": {
+ "description": "Used by `.spectrum-Table-row--summary .spectrum-Table-cell`.
Defaults to `var(--spectrum-table-min-row-height)`, if not set.",
+ "control": "text",
+ "category": "Modifier"
+ },
+ "mod-table-summary-row-top-to-text": {
+ "description": "Used by `.spectrum-Table-row--summary .spectrum-Table-cell`.
Defaults to `var(--spectrum-table-row-top-to-text)`, if not set.",
+ "control": "text",
+ "category": "Modifier"
+ },
+ "mod-table-summary-row-bottom-to-text": {
+ "description": "Used by `.spectrum-Table-row--summary .spectrum-Table-cell`.
Defaults to `var(--spectrum-table-row-bottom-to-text)`, if not set.",
+ "control": "text",
+ "category": "Modifier"
+ },
+ "mod-table-summary-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": {
+ "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": {
+ "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": {
+ "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": {
+ "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-cursor-section-header": {
+ "description": "Used by `.spectrum-Table-row--sectionHeader`.",
+ "control": "text",
+ "category": "Modifier"
+ },
+ "mod-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": {
+ "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": {
+ "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": {
+ "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-inline-start-spacing": {
+ "description": "Used by `.spectrum-Table-row--sectionHeader .spectrum-Table-cell`.
Defaults to `var(--spectrum-table-cell-inline-spacing)`, if not set.",
+ "control": "text",
+ "category": "Modifier"
+ },
+ "mod-table-section-header-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": {
+ "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": {
+ "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": {
+ "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": {
+ "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-row-checkbox-block-spacing": {
+ "description": "Used by `.spectrum-Table-checkboxCell`.
Defaults to `var(--spectrum-table-row-checkbox-block-spacing)`, if not set.",
+ "control": "text",
+ "category": "Modifier"
+ },
+ "mod-table-current-header-height": {
+ "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-row-top-to-text, var(--spectrum-table-header-row-top-to-text)) + var(--mod-table-header-row-bottom-to-text, var(--spectrum-table-header-row-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": {
+ "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`.
Defaults to `var(--spectrum-table-disclosure-icon-size)`, if not set.",
+ "control": "text",
+ "category": "Modifier"
+ },
+ "mod-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": {
+ "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-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": {
+ "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-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-text-color-hover": {
+ "description": "Used by `--spectrum-table-row-text-color`.
Defaults to `var(--spectrum-table-row-text-color-hover)`, if not set.",
+ "control": "color",
+ "category": "Modifier"
+ },
+ "mod-table-header-icons-color-hover": {
+ "description": "Used by `--spectrum-table-icon-color`.
Defaults to `var(--spectrum-table-header-icons-color-hover)`, if not set.",
+ "control": "color",
+ "category": "Modifier"
+ },
+ "mod-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": {
+ "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-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"
+ }
+ },
+ "component": {
+ "spectrum-table-transition-duration": {
+ "value": "var(--spectrum-animation-duration-100)",
+ "description": "Defined in `.spectrum-Table`.
Used by `.spectrum-Table-headCell.is-sortable .spectrum-Table-sortButton .spectrum-Icon`, `.spectrum-Table-headCell.spectrum-Table-hasMenuButton .spectrum-Table-sortButton .spectrum-Icon`, `.spectrum-Table-row`.
Defaults to `var(--spectrum-animation-duration-100)`, if not set.",
+ "control": "text",
+ "category": "Component"
+ },
+ "spectrum-table-header-background-color": {
+ "value": "var(--mod-table-header-background-color-scrollable, var(--spectrum-gray-75))",
+ "description": "Defined in `.spectrum-Table`, `.spectrum-Table-scroller`.
Used by `.spectrum-Table-headRow .spectrum-Table-headCell`.
Defaults to `var(--mod-table-header-background-color-scrollable, var(--spectrum-gray-75))`, if not set.",
+ "control": "color",
+ "category": "Component"
+ },
+ "spectrum-table-row-background-color": {
+ "value": "light-dark(rgb(255, 255, 255), rgb(17, 17, 17))",
+ "description": "Defined in `.spectrum-Table`.
Used by `--spectrum-table-cell-background-color`.
Defaults to `var(--spectrum-gray-25)`, if not set.",
+ "control": "color",
+ "category": "Component"
+ },
+ "spectrum-table-summary-row-background-color": {
+ "value": "light-dark(rgb(225, 225, 225), rgb(50, 50, 50))",
+ "description": "Defined in `.spectrum-Table`.
Used by `--spectrum-table-cell-background-color`.
Defaults to `var(--spectrum-gray-200)`, if not set.",
+ "control": "color",
+ "category": "Component"
+ },
+ "spectrum-table-section-header-background-color": {
+ "value": "light-dark(rgb(225, 225, 225), rgb(50, 50, 50))",
+ "description": "Defined in `.spectrum-Table`.
Used by `--spectrum-table-cell-background-color`.
Defaults to `var(--spectrum-gray-200)`, if not set.",
+ "control": "color",
+ "category": "Component"
+ },
+ "spectrum-table-selected-row-background-color": {
+ "value": "var(--spectrum-informative-background-color-default)",
+ "description": "Defined in `.spectrum-Table`.
Used by `--spectrum-table-selected-cell-background-color`.
Defaults to `rgb(var(--spectrum-table-selected-row-background-color-rgb), var(--spectrum-table-selected-row-background-opacity))`, if not set.",
+ "control": "color",
+ "category": "Component"
+ },
+ "spectrum-table-selected-row-background-color-rgb": {
+ "description": "Used by `--spectrum-table-selected-row-background-color`, `--spectrum-table-selected-row-background-color-hover`, `--spectrum-table-selected-row-background-color-active`.",
+ "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`.
Defaults to `rgb(var(--spectrum-gray-700-rgb), var(--spectrum-table-selected-row-background-opacity-non-emphasized))`, if not set.",
+ "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-selected-row-background-color-hover": {
+ "value": "rgb(var(--spectrum-table-selected-row-background-color-rgb), var(--spectrum-table-selected-row-background-opacity-hover))",
+ "description": "Defined in `.spectrum-Table`.
Used by `--spectrum-table-selected-cell-background-color-focus`.
Defaults to `rgb(var(--spectrum-table-selected-row-background-color-rgb), var(--spectrum-table-selected-row-background-opacity-hover))`, if not set.",
+ "control": "color",
+ "category": "Component"
+ },
+ "spectrum-table-selected-row-background-opacity-hover": {
+ "value": "0.15",
+ "description": "Used by `--spectrum-table-selected-row-background-color-hover`, `--spectrum-table-selected-row-background-color-active`.",
+ "control": "text",
+ "category": "Component"
+ },
+ "spectrum-table-selected-row-background-color-active": {
+ "value": "rgb(var(--spectrum-table-selected-row-background-color-rgb), var(--spectrum-table-selected-row-background-opacity-hover))",
+ "description": "Defined in `.spectrum-Table`.
Used by `--spectrum-table-cell-background-color`.
Defaults to `rgb(var(--spectrum-table-selected-row-background-color-rgb), var(--spectrum-table-selected-row-background-opacity-hover))`, if not set.",
+ "control": "color",
+ "category": "Component"
+ },
+ "spectrum-table-selected-row-background-color-non-emphasized-focus": {
+ "value": "rgb(var(--spectrum-gray-700-rgb), var(--spectrum-table-selected-row-background-opacity-non-emphasized-hover))",
+ "description": "Defined in `.spectrum-Table`.
Used by `--spectrum-table-selected-cell-background-color-focus`.
Defaults to `rgb(var(--spectrum-gray-700-rgb), var(--spectrum-table-selected-row-background-opacity-non-emphasized-hover))`, if not set.",
+ "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-cell-background-color": {
+ "value": "var(--highcontrast-table-section-header-background-color, var(--mod-table-section-header-background-color, var(--spectrum-table-section-header-background-color)))",
+ "description": "Defined in `.spectrum-Table`, `.spectrum-Table-row:active`, `.spectrum-Table-row.is-selected`, `.spectrum-Table-row.is-selected:focus-visible`, `.spectrum-Table-row.is-selected:active`, `.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--summary:hover`, `.spectrum-Table-row--sectionHeader:hover`.
Used by `.spectrum-Table-cell`.
Defaults to `var(--highcontrast-table-section-header-background-color, var(--mod-table-section-header-background-color, var(--spectrum-table-section-header-background-color)))`, if not set.",
+ "control": "color",
+ "category": "Component"
+ },
+ "spectrum-table-selected-cell-background-color": {
+ "value": "var(--highcontrast-table-selected-row-background-color, var(--mod-table-selected-row-background-color, var(--spectrum-table-selected-row-background-color)))",
+ "description": "Defined in `.spectrum-Table`, `.spectrum-Table--emphasized, .spectrum-Table-row .is-emphasized`.
Used by `--spectrum-table-cell-background-color`.
Defaults to `var(--highcontrast-table-selected-row-background-color, var(--mod-table-selected-row-background-color, var(--spectrum-table-selected-row-background-color)))`, if not set.",
+ "control": "color",
+ "category": "Component"
+ },
+ "spectrum-table-drop-zone-background-color": {
+ "value": "rgb(var(--spectrum-drop-zone-background-color-rgb), var(--spectrum-drop-zone-background-color-opacity))",
+ "description": "Defined in `.spectrum-Table`.
Used by `--spectrum-table-cell-background-color`.
Defaults to `rgb(var(--spectrum-drop-zone-background-color-rgb), var(--spectrum-drop-zone-background-color-opacity))`, if not set.",
+ "control": "color",
+ "category": "Component"
+ },
+ "spectrum-table-drop-zone-outline-color": {
+ "value": "var(--spectrum-accent-color-800)",
+ "description": "Defined in `.spectrum-Table`.
Used by `.spectrum-Table-body.is-drop-target:after`, `.spectrum-Table-row.is-drop-target`, `.spectrum-Table-row.is-drop-target .spectrum-Table-cell`.
Defaults to `var(--spectrum-accent-visual-color)`, if not set.",
+ "control": "color",
+ "category": "Component"
+ },
+ "spectrum-table-row-background-color-hover": {
+ "value": "rgb(var(--spectrum-gray-900-rgb), var(--spectrum-table-row-hover-opacity))",
+ "description": "Defined in `.spectrum-Table`.
Used by `--spectrum-table-cell-background-color`.
Defaults to `rgb(var(--spectrum-gray-900-rgb), var(--spectrum-table-row-hover-opacity))`, if not set.",
+ "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-background-color-active": {
+ "value": "rgb(var(--spectrum-gray-900-rgb), var(--spectrum-table-row-down-opacity))",
+ "description": "Defined in `.spectrum-Table`.
Used by `--spectrum-table-cell-background-color`.
Defaults to `rgb(var(--spectrum-gray-900-rgb), var(--spectrum-table-row-down-opacity))`, if not set.",
+ "control": "color",
+ "category": "Component"
+ },
+ "spectrum-table-row-down-opacity": {
+ "value": "0.1",
+ "description": "Used by `--spectrum-table-row-background-color-active`.",
+ "control": "text",
+ "category": "Component"
+ },
+ "spectrum-table-border-color": {
+ "value": "var(--spectrum-table-focus-indicator-color)",
+ "description": "Defined in `.spectrum-Table`, `.spectrum-Table-row.is-selected`.
Used by `.spectrum-Table-headRow .spectrum-Table-headCell`, `.spectrum-Table-headRow:first-child .spectrum-Table-headCell:first-child`, `.spectrum-Table-headRow:last-child .spectrum-Table-headCell:last-child`, `.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-headRow:first-child .spectrum-Table-headCell`.
Defaults to `var(--spectrum-table-focus-indicator-color)`, if not set.",
+ "control": "color",
+ "category": "Component"
+ },
+ "spectrum-table-border-radius": {
+ "value": "var(--mod-table-border-radius-quiet, 0px)",
+ "description": "Defined in `.spectrum-Table`, `.spectrum-Table--quiet`.
Used by `.spectrum-Table-headRow:first-child .spectrum-Table-headCell:first-child`, `.spectrum-Table-headRow:last-child .spectrum-Table-headCell:last-child`, `.spectrum-Table-body`, `.spectrum-Table-body.is-drop-target:after`, `.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-row:focus-visible:last-child .spectrum-Table-cell:first-child:before, .spectrum-Table-row:focus:last-child .spectrum-Table-cell:first-child:before`, `.spectrum-Table-scroller`.
Defaults to `var(--mod-table-border-radius-quiet, 0px)`, if not set.",
+ "control": "text",
+ "category": "Component"
+ },
+ "spectrum-table-border-width": {
+ "value": "1px",
+ "description": "Defined in `.spectrum-Table`.
Used by `--mod-button-border-radius`, `--mod-button-focus-ring-border-radius`, `.spectrum-Table-headRow .spectrum-Table-headCell`, `.spectrum-Table-headRow:first-child .spectrum-Table-headCell:first-child`, `.spectrum-Table-headRow:last-child .spectrum-Table-headCell:last-child`, `.spectrum-Table-headCell.is-sortable .spectrum-Table-sortButton:after`, `.spectrum-Table-headCell.spectrum-Table-hasMenuButton .spectrum-Table-sortButton:focus-visible:after`, `.spectrum-Table-body`, `.spectrum-Table-cell`, `.spectrum-Table-cell:focus-visible:after, .spectrum-Table-cell:focus:after, .spectrum-Table-headCell:focus-visible:after, .spectrum-Table-headCell:focus:after`, `.spectrum-Table-cell--divider`, `.spectrum-Table-body .spectrum-Table-row:first-child .spectrum-Table-cell`, `.spectrum-Table-body .spectrum-Table-row:last-child .spectrum-Table-cell`, `.spectrum-Table-row.is-selected:not(:has(+ .is-selected)) .spectrum-Table-cell`, `.spectrum-Table-row--summary .spectrum-Table-cell`, `.spectrum-Table-row--sectionHeader .spectrum-Table-cell`, `.spectrum-Table-checkboxCell`, `.spectrum-Table-scroller`, `.spectrum-Table-scroller .spectrum-Table-headRow:first-child .spectrum-Table-headCell`.
Defaults to `var(--spectrum-table-border-divider-width)`, if not set.",
+ "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": {
+ "value": "var(--mod-table-outer-border-inline-width-quiet, 0px)",
+ "description": "Defined in `.spectrum-Table`, `.spectrum-Table--quiet`.
Used by `.spectrum-Table-headRow .spectrum-Table-checkboxCell`, `.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-row--sectionHeader .spectrum-Table-cell`, `.spectrum-Table-scroller`.
Defaults to `var(--mod-table-outer-border-inline-width-quiet, 0px)`, if not set.",
+ "control": "text",
+ "category": "Component"
+ },
+ "spectrum-table-divider-color": {
+ "value": "var(--spectrum-table-focus-indicator-color)",
+ "description": "Defined in `.spectrum-Table`, `.spectrum-Table-row.is-selected`.
Used by `.spectrum-Table-cell`, `.spectrum-Table-cell--divider`, `.spectrum-Table-body .spectrum-Table-row:first-child .spectrum-Table-cell`.
Defaults to `var(--spectrum-table-focus-indicator-color)`, if not set.",
+ "control": "color",
+ "category": "Component"
+ },
+ "spectrum-table-focus-indicator-thickness": {
+ "value": "2px",
+ "description": "Defined in `.spectrum-Table`.
Used by `.spectrum-Table-headCell.spectrum-Table-hasMenuButton .spectrum-Table-sortButton:focus-visible:after`, `.spectrum-Table-body.is-drop-target:after`, `.spectrum-Table-cell:focus-visible:after, .spectrum-Table-cell:focus:after, .spectrum-Table-headCell:focus-visible:after, .spectrum-Table-headCell:focus:after`, `.spectrum-Table-row.is-drop-target`, `.spectrum-Table-disclosureIcon.spectrum-Table-disclosureIcon.is-keyboardFocused, .spectrum-Table-disclosureIcon.spectrum-Table-disclosureIcon:focus-visible`.
Defaults to `var(--spectrum-focus-indicator-thickness)`, if not set.",
+ "control": "text",
+ "category": "Component"
+ },
+ "spectrum-table-focus-indicator-color": {
+ "value": "var(--spectrum-blue-800)",
+ "description": "Defined in `.spectrum-Table`.
Used by `--spectrum-table-divider-color`, `--spectrum-table-border-color`, `.spectrum-Table-headCell.spectrum-Table-hasMenuButton .spectrum-Table-sortButton:focus-visible:after`, `.spectrum-Table-cell:focus-visible:after, .spectrum-Table-cell:focus:after, .spectrum-Table-headCell:focus-visible:after, .spectrum-Table-headCell:focus:after`, `.spectrum-Table-row.is-selected:not(:has(+ .is-selected)) .spectrum-Table-cell`, `.spectrum-Table-row:focus .spectrum-Table-cell:first-child:before, .spectrum-Table-row:focus-visible .spectrum-Table-cell:first-child:before`, `.spectrum-Table-disclosureIcon.spectrum-Table-disclosureIcon.is-keyboardFocused, .spectrum-Table-disclosureIcon.spectrum-Table-disclosureIcon:focus-visible`.
Defaults to `var(--spectrum-focus-indicator-color)`, if not set.",
+ "control": "color",
+ "category": "Component"
+ },
+ "spectrum-table-row-focus-indicator-width": {
+ "value": "4px",
+ "description": "Defined in `.spectrum-Table`.
Used by `.spectrum-Table-row:focus .spectrum-Table-cell:first-child:before, .spectrum-Table-row:focus-visible .spectrum-Table-cell:first-child:before`.
Defaults to `var(--spectrum-side-focus-indicator)`, if not set.",
+ "control": "text",
+ "category": "Component"
+ },
+ "spectrum-table-focused-cell-border-radius": {
+ "value": "4px",
+ "description": "Defined in `.spectrum-Table`.
Used by `--mod-button-border-radius`, `--mod-button-focus-ring-border-radius`, `.spectrum-Table-cell:focus-visible:after, .spectrum-Table-cell:focus:after, .spectrum-Table-headCell:focus-visible:after, .spectrum-Table-headCell:focus:after`.
Defaults to `var(--spectrum-corner-radius-small-default)`, if not set.",
+ "control": "text",
+ "category": "Component"
+ },
+ "spectrum-table-selected-cell-background-color-focus": {
+ "value": "var(--highcontrast-table-selected-row-background-color-focus, var(--mod-table-selected-row-background-color-focus, var(--spectrum-table-selected-row-background-color-hover)))",
+ "description": "Defined in `.spectrum-Table`, `.spectrum-Table--emphasized, .spectrum-Table-row .is-emphasized`.
Used by `--spectrum-table-cell-background-color`.
Defaults to `var(--highcontrast-table-selected-row-background-color-focus, var(--mod-table-selected-row-background-color-focus, var(--spectrum-table-selected-row-background-color-hover)))`, if not set.",
+ "control": "color",
+ "category": "Component"
+ },
+ "spectrum-table-icon-color-default": {
+ "value": "var(--spectrum-gray-800)",
+ "description": "Defined in `.spectrum-Table`.
Used by `--spectrum-table-icon-color`.
Defaults to `var(--spectrum-neutral-content-color-default)`, if not set.",
+ "control": "color",
+ "category": "Component"
+ },
+ "spectrum-table-icon-color-hover": {
+ "value": "var(--spectrum-gray-900)",
+ "description": "Defined in `.spectrum-Table`.
Used by `--spectrum-table-icon-color`.
Defaults to `var(--spectrum-neutral-content-color-hover)`, if not set.",
+ "control": "color",
+ "category": "Component"
+ },
+ "spectrum-table-icon-color-active": {
+ "value": "var(--spectrum-gray-900)",
+ "description": "Defined in `.spectrum-Table`.
Used by `--spectrum-table-icon-color`.
Defaults to `var(--spectrum-neutral-content-color-down)`, if not set.",
+ "control": "color",
+ "category": "Component"
+ },
+ "spectrum-table-icon-color-key-focus": {
+ "value": "var(--spectrum-gray-900)",
+ "description": "Defined in `.spectrum-Table`.
Used by `--spectrum-table-icon-color`.
Defaults to `var(--spectrum-neutral-content-color-key-focus)`, if not set.",
+ "control": "color",
+ "category": "Component"
+ },
+ "spectrum-table-disclosure-icon-size": {
+ "value": "32px",
+ "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`, `.spectrum-Table-disclosureIcon.spectrum-Table-disclosureIcon`.
Defaults to `var(--spectrum-component-height-100)`, if not set.",
+ "control": "text",
+ "category": "Component"
+ },
+ "spectrum-table-icon-color": {
+ "value": "var(--highcontrast-table-icon-color-focus, var(--mod-table-icon-color-key-focus, var(--spectrum-table-icon-color-key-focus)))",
+ "description": "Defined in `.spectrum-Table`, `.spectrum-Table-headCell .spectrum-Table-sortButton, .spectrum-Table-headCell.is-sortable, .spectrum-Table-headCell.spectrum-Table-hasMenuButton`, `.spectrum-Table-headCell .spectrum-Table-sortButton:active, .spectrum-Table-headCell.is-sortable:active, .spectrum-Table-headCell.spectrum-Table-hasMenuButton:active`, `.spectrum-Table-headCell .spectrum-Table-sortButton.is-keyboardFocused, .spectrum-Table-headCell .spectrum-Table-sortButton:focus, .spectrum-Table-headCell .spectrum-Table-sortButton:focus-visible, .spectrum-Table-headCell.is-sortable.is-keyboardFocused, .spectrum-Table-headCell.is-sortable:focus, .spectrum-Table-headCell.is-sortable:focus-visible, .spectrum-Table-headCell.spectrum-Table-hasMenuButton.is-keyboardFocused, .spectrum-Table-headCell.spectrum-Table-hasMenuButton:focus, .spectrum-Table-headCell.spectrum-Table-hasMenuButton: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 .spectrum-Table-sortButton:hover, .spectrum-Table-headCell.is-sortable:hover, .spectrum-Table-headCell.spectrum-Table-hasMenuButton: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.is-sortable .spectrum-Table-sortButton .spectrum-Icon`, `.spectrum-Table-headCell.spectrum-Table-hasMenuButton .spectrum-Table-sortButton .spectrum-Button-label:after`, `.spectrum-Table-headCell.spectrum-Table-hasMenuButton .spectrum-Table-sortButton .spectrum-Icon`, `.spectrum-Table-disclosureIcon.spectrum-Table-disclosureIcon`.
Defaults to `var(--highcontrast-table-icon-color-focus, var(--mod-table-icon-color-key-focus, var(--spectrum-table-icon-color-key-focus)))`, if not set.",
+ "control": "color",
+ "category": "Component"
+ },
+ "spectrum-table-header-icons-color-default": {
+ "value": "var(--spectrum-gray-700)",
+ "description": "Defined in `.spectrum-Table`.
Used by `--spectrum-table-icon-color`, `--mod-icon-color`.
Defaults to `var(--spectrum-neutral-subdued-content-color-default)`, if not set.",
+ "control": "color",
+ "category": "Component"
+ },
+ "spectrum-table-header-icons-color-hover": {
+ "value": "var(--spectrum-gray-800)",
+ "description": "Defined in `.spectrum-Table`.
Used by `--spectrum-table-icon-color`, `--mod-icon-color`.
Defaults to `var(--spectrum-neutral-subdued-content-color-hover)`, if not set.",
+ "control": "color",
+ "category": "Component"
+ },
+ "spectrum-table-header-icons-color-active": {
+ "value": "var(--spectrum-gray-800)",
+ "description": "Defined in `.spectrum-Table`.
Used by `--spectrum-table-icon-color`, `--mod-icon-color`.
Defaults to `var(--spectrum-neutral-subdued-content-color-down)`, if not set.",
+ "control": "color",
+ "category": "Component"
+ },
+ "spectrum-table-header-icons-color-key-focus": {
+ "value": "var(--spectrum-gray-800)",
+ "description": "Defined in `.spectrum-Table`.
Used by `--spectrum-table-icon-color`, `--mod-icon-color`.
Defaults to `var(--spectrum-neutral-subdued-content-color-key-focus)`, if not set.",
+ "control": "color",
+ "category": "Component"
+ },
+ "spectrum-table-default-vertical-align": {
+ "value": "middle",
+ "description": "Defined in `.spectrum-Table`.
Used by `.spectrum-Table-headRow .spectrum-Table-headCell`, `.spectrum-Table-cell`.
Defaults to `middle`, if not set.",
+ "control": "text",
+ "category": "Component"
+ },
+ "spectrum-table-header-font-weight": {
+ "value": "700",
+ "description": "Defined in `.spectrum-Table`.
Used by `--mod-button-font-weight`, `.spectrum-Table-headRow .spectrum-Table-headCell`.
Defaults to `var(--spectrum-bold-font-weight)`, if not set.",
+ "control": "text",
+ "category": "Component"
+ },
+ "spectrum-table-header-text-color": {
+ "value": "var(--spectrum-gray-800)",
+ "description": "Defined in `.spectrum-Table`.
Used by `--mod-button-content-color-default`, `--mod-button-content-color-hover`, `--mod-button-content-color-focus`, `--mod-button-content-color-down`, `.spectrum-Table-headRow .spectrum-Table-headCell`, `.spectrum-Table-headCell.is-sortable .spectrum-Table-sortButton`, `.spectrum-Table-headCell.is-sortable .spectrum-Table-sortButton:active, .spectrum-Table-headCell.is-sortable .spectrum-Table-sortButton:focus, .spectrum-Table-headCell.is-sortable .spectrum-Table-sortButton:focus-visible`, `.spectrum-Table-headCell.spectrum-Table-hasMenuButton .spectrum-Table-sortButton`, `.spectrum-Table-headCell.is-sortable .spectrum-Table-sortButton:hover, .spectrum-Table-headCell.spectrum-Table-hasMenuButton .spectrum-Table-sortButton:hover`.
Defaults to `var(--spectrum-body-color)`, if not set.",
+ "control": "color",
+ "category": "Component"
+ },
+ "spectrum-table-row-font-family": {
+ "value": "var(--spectrum-sans-font-family-stack)",
+ "description": "Defined in `.spectrum-Table`.
Used by `--mod-button-font-family`, `.spectrum-Table-headRow .spectrum-Table-headCell`, `.spectrum-Table-cell`, `.spectrum-Table-row--summary .spectrum-Table-cell`, `.spectrum-Table-row--sectionHeader .spectrum-Table-cell`.
Defaults to `var(--spectrum-sans-font-family-stack)`, if not set.",
+ "control": "text",
+ "category": "Component"
+ },
+ "spectrum-table-row-font-weight": {
+ "value": "400",
+ "description": "Defined in `.spectrum-Table`.
Used by `.spectrum-Table-cell`.
Defaults to `var(--spectrum-regular-font-weight)`, if not set.",
+ "control": "text",
+ "category": "Component"
+ },
+ "spectrum-table-row-font-style": {
+ "value": "normal",
+ "description": "Defined in `.spectrum-Table`.
Used by `.spectrum-Table-headRow .spectrum-Table-headCell`, `.spectrum-Table-cell`, `.spectrum-Table-row--summary .spectrum-Table-cell`, `.spectrum-Table-row--sectionHeader .spectrum-Table-cell`.
Defaults to `var(--spectrum-default-font-style)`, if not set.",
+ "control": "text",
+ "category": "Component"
+ },
+ "spectrum-table-row-line-height": {
+ "value": "1.5",
+ "description": "Defined in `.spectrum-Table`, `.spectrum-Table:lang(ja), .spectrum-Table:lang(ko), .spectrum-Table:lang(zh)`.
Used by `--mod-button-line-height`, `.spectrum-Table-headRow .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-visualInner .spectrum-Avatar, .spectrum-Table-visualInner .spectrum-Icon, .spectrum-Table-visualInner .spectrum-Thumbnail`.
Defaults to `var(--spectrum-cjk-line-height-100)`, if not set.",
+ "control": "text",
+ "category": "Component"
+ },
+ "spectrum-table-row-text-color": {
+ "value": "var(--highcontrast-table-row-text-color-hover, var(--mod-table-row-text-color-hover, var(--spectrum-table-row-text-color-hover)))",
+ "description": "Defined in `.spectrum-Table`, `.spectrum-Table-row:focus, .spectrum-Table-row:focus-visible`, `.spectrum-Table-row:active`, `.spectrum-Table-row:focus-visible:hover, .spectrum-Table-row:focus:hover`, `.spectrum-Table-row:hover`.
Used by `.spectrum-Table-cell`, `.spectrum-Table-row--summary .spectrum-Table-cell`, `.spectrum-Table-row--sectionHeader .spectrum-Table-cell`.
Defaults to `var(--highcontrast-table-row-text-color-hover, var(--mod-table-row-text-color-hover, var(--spectrum-table-row-text-color-hover)))`, if not set.",
+ "control": "color",
+ "category": "Component"
+ },
+ "spectrum-table-row-text-color-hover": {
+ "value": "var(--spectrum-gray-900)",
+ "description": "Defined in `.spectrum-Table`.
Used by `--spectrum-table-row-text-color`.
Defaults to `var(--spectrum-neutral-content-color-hover)`, if not set.",
+ "control": "color",
+ "category": "Component"
+ },
+ "spectrum-table-row-text-color-active": {
+ "value": "var(--spectrum-gray-900)",
+ "description": "Defined in `.spectrum-Table`.
Used by `--spectrum-table-row-text-color`.
Defaults to `var(--spectrum-neutral-content-color-down)`, if not set.",
+ "control": "color",
+ "category": "Component"
+ },
+ "spectrum-table-row-text-color-key-focus": {
+ "value": "var(--spectrum-gray-900)",
+ "description": "Defined in `.spectrum-Table`.
Used by `--spectrum-table-row-text-color`.
Defaults to `var(--spectrum-neutral-content-color-key-focus)`, if not set.",
+ "control": "color",
+ "category": "Component"
+ },
+ "spectrum-table-row-font-size": {
+ "value": "14px",
+ "description": "Defined in `.spectrum-Table`.
Used by `--mod-button-font-size`, `.spectrum-Table-headRow .spectrum-Table-headCell`, `.spectrum-Table-cell`, `.spectrum-Table-row--summary .spectrum-Table-cell`, `.spectrum-Table-row--sectionHeader .spectrum-Table-cell`, `.spectrum-Table-scroller`.
Defaults to `var(--spectrum-font-size-100)`, if not set.",
+ "control": "text",
+ "category": "Component"
+ },
+ "spectrum-table-summary-row-font-weight": {
+ "value": "700",
+ "description": "Defined in `.spectrum-Table`.
Used by `.spectrum-Table-row--summary .spectrum-Table-cell`.
Defaults to `var(--spectrum-bold-font-weight)`, if not set.",
+ "control": "text",
+ "category": "Component"
+ },
+ "spectrum-table-section-header-font-weight": {
+ "value": "700",
+ "description": "Defined in `.spectrum-Table`.
Used by `.spectrum-Table-row--sectionHeader .spectrum-Table-cell`.
Defaults to `var(--spectrum-bold-font-weight)`, if not set.",
+ "control": "text",
+ "category": "Component"
+ },
+ "spectrum-table-min-header-row-height": {
+ "value": "32px",
+ "description": "Defined in `.spectrum-Table`.
Used by `.spectrum-Table-headRow .spectrum-Table-headCell`.
Defaults to `var(--spectrum-component-height-100)`, if not set.",
+ "control": "text",
+ "category": "Component"
+ },
+ "spectrum-table-header-row-top-to-text": {
+ "value": "0",
+ "description": "Defined in `.spectrum-Table`, `.spectrum-Table-headCell.spectrum-Table-hasMenuButton`.
Used by `.spectrum-Table-headRow .spectrum-Table-headCell`, `.spectrum-Table-scroller`.
Defaults to `0`, if not set.",
+ "control": "text",
+ "category": "Component"
+ },
+ "spectrum-table-column-header-row-top-to-text-medium": {
+ "value": "6px",
+ "description": "Used by `--spectrum-table-header-row-top-to-text`.",
+ "control": "text",
+ "category": "Component"
+ },
+ "spectrum-table-header-row-bottom-to-text": {
+ "value": "0",
+ "description": "Defined in `.spectrum-Table`, `.spectrum-Table-headCell.spectrum-Table-hasMenuButton`.
Used by `.spectrum-Table-headRow .spectrum-Table-headCell`, `.spectrum-Table-scroller`.
Defaults to `0`, if not set.",
+ "control": "text",
+ "category": "Component"
+ },
+ "spectrum-table-column-header-row-bottom-to-text-medium": {
+ "value": "8px",
+ "description": "Used by `--spectrum-table-header-row-bottom-to-text`.",
+ "control": "text",
+ "category": "Component"
+ },
+ "spectrum-table-min-row-height": {
+ "value": "var(--mod-table-min-row-height-spacious, var(--spectrum-table-row-height-medium-spacious))",
+ "description": "Defined in `.spectrum-Table`, `.spectrum-Table--compact`, `.spectrum-Table--spacious`.
Used by `.spectrum-Table-cell`, `.spectrum-Table-row--summary .spectrum-Table-cell`, `.spectrum-Table-row--collapsible .spectrum-Table-disclosureIcon`.
Defaults to `var(--mod-table-min-row-height-spacious, var(--spectrum-table-row-height-medium-spacious))`, if not set.",
+ "control": "text",
+ "category": "Component"
+ },
+ "spectrum-table-row-height-medium": {
+ "value": "40px",
+ "description": "Used by `--spectrum-table-min-row-height`.",
+ "control": "text",
+ "category": "Component"
+ },
+ "spectrum-table-row-top-to-text": {
+ "value": "15px",
+ "description": "Defined in `.spectrum-Table`, `.spectrum-Table--compact`, `.spectrum-Table--spacious`.
Used by `.spectrum-Table-cell`, `.spectrum-Table-row--summary .spectrum-Table-cell`.
Defaults to `var(--spectrum-table-row-top-to-text-medium-spacious)`, if not set.",
+ "control": "text",
+ "category": "Component"
+ },
+ "spectrum-table-row-top-to-text-medium": {
+ "value": "10px",
+ "description": "Used by `--spectrum-table-row-top-to-text`.",
+ "control": "text",
+ "category": "Component"
+ },
+ "spectrum-table-row-bottom-to-text": {
+ "value": "16px",
+ "description": "Defined in `.spectrum-Table`, `.spectrum-Table--compact`, `.spectrum-Table--spacious`.
Used by `.spectrum-Table-cell`, `.spectrum-Table-row--summary .spectrum-Table-cell`.
Defaults to `var(--spectrum-table-row-bottom-to-text-medium-spacious)`, if not set.",
+ "control": "text",
+ "category": "Component"
+ },
+ "spectrum-table-row-bottom-to-text-medium": {
+ "value": "13px",
+ "description": "Used by `--spectrum-table-row-bottom-to-text`.",
+ "control": "text",
+ "category": "Component"
+ },
+ "spectrum-table-header-row-checkbox-block-spacing": {
+ "value": "8px",
+ "description": "Defined in `.spectrum-Table`.
Used by `.spectrum-Table-headRow .spectrum-Table-checkboxCell`.
Defaults to `var(--spectrum-table-header-row-checkbox-to-top-medium)`, if not set.",
+ "control": "text",
+ "category": "Component"
+ },
+ "spectrum-table-header-row-checkbox-to-top-medium": {
+ "value": "8px",
+ "description": "Used by `--spectrum-table-header-row-checkbox-block-spacing`.",
+ "control": "text",
+ "category": "Component"
+ },
+ "spectrum-table-row-checkbox-block-spacing": {
+ "value": "var(--mod-table-row-checkbox-block-spacing-spacious, var(--spectrum-table-row-checkbox-to-top-medium-spacious))",
+ "description": "Defined in `.spectrum-Table`, `.spectrum-Table--compact`, `.spectrum-Table--spacious`.
Used by `.spectrum-Table-checkboxCell`.
Defaults to `var(--mod-table-row-checkbox-block-spacing-spacious, var(--spectrum-table-row-checkbox-to-top-medium-spacious))`, if not set.",
+ "control": "text",
+ "category": "Component"
+ },
+ "spectrum-table-row-checkbox-to-top-medium": {
+ "value": "12px",
+ "description": "Used by `--spectrum-table-row-checkbox-block-spacing`.",
+ "control": "text",
+ "category": "Component"
+ },
+ "spectrum-table-section-header-min-height": {
+ "value": "32px",
+ "description": "Defined in `.spectrum-Table`.
Used by `.spectrum-Table-row--sectionHeader .spectrum-Table-cell`.
Defaults to `var(--spectrum-table-section-header-row-height-medium)`, if not set.",
+ "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": {
+ "value": "6px",
+ "description": "Defined in `.spectrum-Table`.
Used by `.spectrum-Table-row--sectionHeader .spectrum-Table-cell`.
Defaults to `var(--spectrum-component-top-to-text-100)`, if not set.",
+ "control": "text",
+ "category": "Component"
+ },
+ "spectrum-table-section-header-block-end-spacing": {
+ "value": "9px",
+ "description": "Defined in `.spectrum-Table`.
Used by `.spectrum-Table-row--sectionHeader .spectrum-Table-cell`.
Defaults to `var(--spectrum-component-bottom-to-text-100)`, if not set.",
+ "control": "text",
+ "category": "Component"
+ },
+ "spectrum-table-visual-to-text": {
+ "value": "8px",
+ "description": "Defined in `.spectrum-Table`.
Used by `--mod-button-padding-label-to-icon`, `.spectrum-Table-headCell.spectrum-Table-hasMenuButton .spectrum-Table-sortButton .spectrum-Button-label:after`, `.spectrum-Table-visualInner`, `.spectrum-Table-visualInner .spectrum-Avatar, .spectrum-Table-visualInner .spectrum-Icon, .spectrum-Table-visualInner .spectrum-Thumbnail`.
Defaults to `var(--spectrum-text-to-visual-300)`, if not set.",
+ "control": "text",
+ "category": "Component"
+ },
+ "spectrum-table-thumbnail-size": {
+ "value": "24px",
+ "description": "Defined in `.spectrum-Table`.
Used by `--mod-thumbnail-size`.
Defaults to `var(--spectrum-thumbnail-size-100)`, if not set.",
+ "control": "text",
+ "category": "Component"
+ },
+ "spectrum-table-avatar-size": {
+ "value": "20px",
+ "description": "Defined in `.spectrum-Table`.
Used by `--mod-avatar-block-size`, `--mod-avatar-inline-size`.
Defaults to `var(--spectrum-avatar-size-75)`, if not set.",
+ "control": "text",
+ "category": "Component"
+ },
+ "spectrum-table-cell-inline-spacing": {
+ "value": "0",
+ "description": "Defined in `.spectrum-Table`, `.spectrum-Table-headCell.spectrum-Table-hasMenuButton`.
Used by `--mod-button-edge-to-text`, `.spectrum-Table-headRow .spectrum-Table-headCell`, `.spectrum-Table-headRow .spectrum-Table-checkboxCell`, `.spectrum-Table-cell`, `.spectrum-Table-row:focus .spectrum-Table-cell:first-child, .spectrum-Table-row:focus-visible .spectrum-Table-cell:first-child`, `.spectrum-Table-row--sectionHeader .spectrum-Table-cell`, `.spectrum-Table-checkboxCell`.
Defaults to `0`, if not set.",
+ "control": "text",
+ "category": "Component"
+ },
+ "spectrum-table-edge-to-content": {
+ "value": "16px",
+ "description": "Used by `--spectrum-table-cell-inline-spacing`.",
+ "control": "text",
+ "category": "Component"
+ },
+ "spectrum-table-checkbox-to-cell-content": {
+ "value": "24px",
+ "description": "Defined in `.spectrum-Table`.
Used by `.spectrum-Table-headRow .spectrum-Table-checkboxCell`, `.spectrum-Table-checkboxCell`.
Defaults to `var(--spectrum-table-checkbox-to-text)`, if not set.",
+ "control": "text",
+ "category": "Component"
+ },
+ "spectrum-table-checkbox-to-text": {
+ "value": "24px",
+ "description": "Used by `--spectrum-table-checkbox-to-cell-content`.",
+ "control": "text",
+ "category": "Component"
+ },
+ "spectrum-table-collapsible-tier-indent": {
+ "value": "16px",
+ "description": "Defined in `.spectrum-Table`.
Used by `.spectrum-Table-row--collapsible.is-last-tier .spectrum-Table-cell--collapsible`, `.spectrum-Table-cell--collapsible`.
Defaults to `var(--spectrum-spacing-300)`, if not set.",
+ "control": "text",
+ "category": "Component"
+ },
+ "spectrum-table-collapsible-disclosure-inline-spacing": {
+ "value": "0px",
+ "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`.
Defaults to `0px`, if not set.",
+ "control": "text",
+ "category": "Component"
+ },
+ "spectrum-table-collapsible-icon-animation-duration": {
+ "value": "var(--spectrum-animation-duration-100)",
+ "description": "Defined in `.spectrum-Table`.
Used by `.spectrum-Table-disclosureIcon.spectrum-Table-disclosureIcon`.
Defaults to `var(--spectrum-animation-duration-100)`, if not set.",
+ "control": "text",
+ "category": "Component"
+ },
+ "spectrum-table-row-height-medium-compact": {
+ "value": "var(--spectrum-component-height-100)",
+ "description": "Used by `--spectrum-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 `--spectrum-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 `--spectrum-table-row-bottom-to-text`.",
+ "control": "text",
+ "category": "Component"
+ },
+ "spectrum-table-row-checkbox-to-top-medium-compact": {
+ "value": "8px",
+ "description": "Used by `--spectrum-table-row-checkbox-block-spacing`.",
+ "control": "text",
+ "category": "Component"
+ },
+ "spectrum-table-row-height-medium-spacious": {
+ "value": "48px",
+ "description": "Used by `--spectrum-table-min-row-height`.",
+ "control": "text",
+ "category": "Component"
+ },
+ "spectrum-table-row-top-to-text-medium-spacious": {
+ "value": "15px",
+ "description": "Used by `--spectrum-table-row-top-to-text`.",
+ "control": "text",
+ "category": "Component"
+ },
+ "spectrum-table-row-bottom-to-text-medium-spacious": {
+ "value": "16px",
+ "description": "Used by `--spectrum-table-row-bottom-to-text`.",
+ "control": "text",
+ "category": "Component"
+ },
+ "spectrum-table-row-checkbox-to-top-medium-spacious": {
+ "value": "16px",
+ "description": "Used by `--spectrum-table-row-checkbox-block-spacing`.",
+ "control": "text",
+ "category": "Component"
+ },
+ "spectrum-table-row-tier": {
+ "value": "6",
+ "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`.
Defaults to `6`, if not set.",
+ "control": "text",
+ "category": "Component"
+ }
+ },
+ "global": {
+ "spectrum-animation-duration-100": {
+ "description": "Used by `--spectrum-table-transition-duration`, `--spectrum-table-collapsible-icon-animation-duration`.",
+ "control": "text",
+ "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"
+ },
+ "spectrum-gray-25": {
+ "value": "light-dark(rgb(255, 255, 255), rgb(17, 17, 17))",
+ "description": "Used by `--spectrum-table-row-background-color`.",
+ "control": "text",
+ "category": "Global"
+ },
+ "spectrum-gray-200": {
+ "value": "light-dark(rgb(225, 225, 225), rgb(50, 50, 50))",
+ "description": "Used by `--spectrum-table-summary-row-background-color`, `--spectrum-table-section-header-background-color`.",
+ "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-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-800)",
+ "description": "Used by `--spectrum-table-drop-zone-outline-color`.",
+ "control": "color",
+ "category": "Global"
+ },
+ "spectrum-gray-900-rgb": {
+ "description": "Used by `--spectrum-table-row-background-color-hover`, `--spectrum-table-row-background-color-active`.",
+ "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-corner-radius-medium-size-extra-small": {
+ "value": "6px",
+ "description": "Used by `--spectrum-table-border-radius`.",
+ "control": "text",
+ "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-side-focus-indicator": {
+ "value": "4px",
+ "description": "Used by `--spectrum-table-row-focus-indicator-width`.",
+ "control": "text",
+ "category": "Global"
+ },
+ "spectrum-corner-radius-small-default": {
+ "value": "4px",
+ "description": "Used by `--spectrum-table-focused-cell-border-radius`.",
+ "control": "text",
+ "category": "Global"
+ },
+ "spectrum-neutral-content-color-default": {
+ "value": "var(--spectrum-gray-800)",
+ "description": "Used by `--spectrum-table-icon-color-default`, `--spectrum-table-row-text-color`.",
+ "control": "color",
+ "category": "Global"
+ },
+ "spectrum-neutral-content-color-hover": {
+ "value": "var(--spectrum-gray-900)",
+ "description": "Used by `--spectrum-table-icon-color-hover`, `--spectrum-table-row-text-color-hover`.",
+ "control": "color",
+ "category": "Global"
+ },
+ "spectrum-neutral-content-color-down": {
+ "value": "var(--spectrum-gray-900)",
+ "description": "Used by `--spectrum-table-icon-color-active`, `--spectrum-table-row-text-color-active`.",
+ "control": "color",
+ "category": "Global"
+ },
+ "spectrum-neutral-content-color-key-focus": {
+ "value": "var(--spectrum-gray-900)",
+ "description": "Used by `--spectrum-table-icon-color-key-focus`, `--spectrum-table-row-text-color-key-focus`.",
+ "control": "color",
+ "category": "Global"
+ },
+ "spectrum-component-height-100": {
+ "value": "32px",
+ "description": "Used by `--spectrum-table-disclosure-icon-size`, `--spectrum-table-min-header-row-height`.",
+ "control": "text",
+ "category": "Global"
+ },
+ "spectrum-neutral-subdued-content-color-default": {
+ "value": "var(--spectrum-gray-700)",
+ "description": "Used by `--spectrum-table-header-icons-color-default`.",
+ "control": "color",
+ "category": "Global"
+ },
+ "spectrum-neutral-subdued-content-color-hover": {
+ "value": "var(--spectrum-gray-800)",
+ "description": "Used by `--spectrum-table-header-icons-color-hover`.",
+ "control": "color",
+ "category": "Global"
+ },
+ "spectrum-neutral-subdued-content-color-down": {
+ "value": "var(--spectrum-gray-800)",
+ "description": "Used by `--spectrum-table-header-icons-color-active`.",
+ "control": "color",
+ "category": "Global"
+ },
+ "spectrum-neutral-subdued-content-color-key-focus": {
+ "value": "var(--spectrum-gray-800)",
+ "description": "Used by `--spectrum-table-header-icons-color-key-focus`.",
+ "control": "color",
+ "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-body-color": {
+ "value": "var(--spectrum-gray-800)",
+ "description": "Used by `--spectrum-table-header-text-color`.",
+ "control": "color",
+ "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-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-text-to-visual-300": {
+ "value": "8px",
+ "description": "Used by `--spectrum-table-visual-to-text`.",
+ "control": "text",
+ "category": "Global"
+ },
+ "spectrum-thumbnail-size-100": {
+ "value": "24px",
+ "description": "Used by `--spectrum-table-thumbnail-size`.",
+ "control": "text",
+ "category": "Global"
+ },
+ "spectrum-avatar-size-75": {
+ "value": "20px",
+ "description": "Used by `--spectrum-table-avatar-size`.",
+ "control": "text",
+ "category": "Global"
+ },
+ "spectrum-spacing-300": {
+ "value": "16px",
+ "description": "Used by `--spectrum-table-collapsible-tier-indent`.",
+ "control": "text",
+ "category": "Global"
+ },
+ "spectrum-logical-rotation": {
+ "value": "matrix(-1, 0, 0, 1, 0, 0)",
+ "description": "Defined in `.spectrum-Table:dir(rtl)`.
Used by `.spectrum-Table-disclosureIcon.spectrum-Table-disclosureIcon`, `.spectrum-Table-disclosureIcon.spectrum-Table-disclosureIcon[aria-expanded=\"true\"]`.
Defaults to `matrix(-1, 0, 0, 1, 0, 0)`, if not set.",
+ "control": "text",
+ "category": "Global"
+ },
+ "spectrum-cjk-line-height-100": {
+ "value": "1.5",
+ "description": "Used by `--spectrum-table-row-line-height`.",
+ "control": "text",
+ "category": "Global"
+ },
+ "spectrum-thumbnail-size-75": {
+ "value": "20px",
+ "description": "Used by `--mod-table-thumbnail-size`.",
+ "control": "text",
+ "category": "Global"
+ },
+ "spectrum-avatar-size-50": {
+ "value": "16px",
+ "description": "Used by `--mod-table-avatar-size`.",
+ "control": "text",
+ "category": "Global"
+ },
+ "spectrum-thumbnail-size-200": {
+ "value": "28px",
+ "description": "Used by `--mod-table-thumbnail-size`.",
+ "control": "text",
+ "category": "Global"
+ },
+ "spectrum-avatar-size-100": {
+ "value": "24px",
+ "description": "Used by `--mod-table-avatar-size`.",
+ "control": "text",
+ "category": "Global"
+ },
+ "spectrum-checkbox-control-size-small": {
+ "value": "14px",
+ "description": "Used by `.spectrum-Table-checkboxCell`.",
+ "control": "text",
+ "category": "Global"
+ }
+ },
+ "passthroughs": {
+ "mod-thumbnail-size": {
+ "category": "Passthrough"
+ },
+ "mod-avatar-block-size": {
+ "category": "Passthrough"
+ },
+ "mod-avatar-inline-size": {
+ "category": "Passthrough"
+ },
+ "mod-button-font-weight": {
+ "category": "Passthrough"
+ },
+ "mod-button-font-size": {
+ "category": "Passthrough"
+ },
+ "mod-button-font-family": {
+ "category": "Passthrough"
+ },
+ "mod-button-line-height": {
+ "category": "Passthrough"
+ },
+ "mod-button-background-color-default": {
+ "category": "Passthrough"
+ },
+ "mod-button-background-color-hover": {
+ "category": "Passthrough"
+ },
+ "mod-button-background-color-focus": {
+ "category": "Passthrough"
+ },
+ "mod-button-background-color-down": {
+ "category": "Passthrough"
+ },
+ "mod-button-content-color-default": {
+ "category": "Passthrough"
+ },
+ "mod-button-content-color-hover": {
+ "category": "Passthrough"
+ },
+ "mod-button-content-color-focus": {
+ "category": "Passthrough"
+ },
+ "mod-button-content-color-down": {
+ "category": "Passthrough"
+ },
+ "mod-button-edge-to-text": {
+ "category": "Passthrough"
+ },
+ "mod-button-padding-label-to-icon": {
+ "category": "Passthrough"
+ },
+ "mod-button-border-radius": {
+ "category": "Passthrough"
+ },
+ "mod-button-focus-ring-border-radius": {
+ "category": "Passthrough"
+ },
+ "mod-icon-color": {
+ "category": "Passthrough"
+ },
+ "mod-checkbox-margin-block": {
+ "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-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-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-icon-color": {
+ "value": "var(--mod-table-icon-color-focus-hover, var(--spectrum-table-icon-color-key-focus))",
+ "description": "Defined in `.spectrum-Table-row:focus, .spectrum-Table-row:focus-visible`, `.spectrum-Table-row:active`, `.spectrum-Table-row.is-selected`, `.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`.
Used by `--spectrum-table-icon-color`.
Defaults to `var(--mod-table-icon-color-focus-hover, var(--spectrum-table-icon-color-key-focus))`, if not set.",
+ "control": "color"
+ },
+ "highcontrast-table-row-text-color-focus": {
+ "value": "HighlightText",
+ "description": "Defined in `.spectrum-Table`.
Used by `--highcontrast-table-icon-color`.
Defaults to `HighlightText`, 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-row:active`, `.spectrum-Table-row.is-selected`, `.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`, `.spectrum-Table`, `.spectrum-Table .spectrum-Table-row--summary`.
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-row-text-color-hover": {
+ "value": "var(--mod-table-row-text-color-hover, var(--spectrum-table-row-text-color-hover))",
+ "description": "Defined in `.spectrum-Table`.
Used by `--highcontrast-table-row-text-color`, `--highcontrast-table-icon-color`, `--spectrum-table-row-text-color`, `.spectrum-Table-row:focus .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`.
Defaults to `var(--mod-table-row-text-color-hover, var(--spectrum-table-row-text-color-hover))`, if not set.",
+ "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-selected-row-text-color": {
+ "value": "SelectedItemText",
+ "description": "Defined in `.spectrum-Table`.
Used by `--highcontrast-table-row-text-color`, `--highcontrast-table-icon-color`, `--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`.
Defaults to `SelectedItemText`, if not set.",
+ "control": "color"
+ },
+ "highcontrast-table-selected-row-text-color-focus": {
+ "value": "HighlightText",
+ "description": "Defined in `.spectrum-Table`.
Used by `--highcontrast-table-row-text-color`, `--highcontrast-table-icon-color`.
Defaults to `HighlightText`, if not set.",
+ "control": "color"
+ },
+ "highcontrast-table-icon-color-focus": {
+ "value": "var(--mod-table-icon-color-key-focus, var(--spectrum-table-icon-color-key-focus))",
+ "description": "Defined in `.spectrum-Table`.
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-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-border-color": {
+ "value": "var(--mod-table-border-color, var(--spectrum-table-border-color))",
+ "description": "Defined in `.spectrum-Table`.
Used by `.spectrum-Table-headRow .spectrum-Table-headCell`, `.spectrum-Table-headRow:first-child .spectrum-Table-headCell:first-child`, `.spectrum-Table-headRow:last-child .spectrum-Table-headCell:last-child`, `.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-headRow:first-child .spectrum-Table-headCell`.
Defaults to `var(--mod-table-border-color, var(--spectrum-table-border-color))`, if not set.",
+ "control": "color"
+ },
+ "highcontrast-table-header-text-color": {
+ "value": "var(--mod-table-header-text-color, var(--spectrum-table-header-text-color))",
+ "description": "Defined in `.spectrum-Table`.
Used by `.spectrum-Table-headCell.is-sortable .spectrum-Table-sortButton`, `.spectrum-Table-headCell.spectrum-Table-hasMenuButton .spectrum-Table-sortButton`.
Defaults to `var(--mod-table-header-text-color, var(--spectrum-table-header-text-color))`, if not set.",
+ "control": "color"
+ },
+ "highcontrast-table-header-text-color-hover": {
+ "value": "var(--mod-table-header-text-color, var(--spectrum-table-header-text-color))",
+ "description": "Defined in `.spectrum-Table`.
Used by `.spectrum-Table-headCell.is-sortable .spectrum-Table-sortButton:active, .spectrum-Table-headCell.is-sortable .spectrum-Table-sortButton:focus, .spectrum-Table-headCell.is-sortable .spectrum-Table-sortButton:focus-visible`, `.spectrum-Table-headCell.is-sortable .spectrum-Table-sortButton:hover, .spectrum-Table-headCell.spectrum-Table-hasMenuButton .spectrum-Table-sortButton:hover`.
Defaults to `var(--mod-table-header-text-color, var(--spectrum-table-header-text-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-headCell.is-sortable .spectrum-Table-sortButton .spectrum-Icon`, `.spectrum-Table-headCell.spectrum-Table-hasMenuButton .spectrum-Table-sortButton .spectrum-Icon`, `.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-headCell.spectrum-Table-hasMenuButton .spectrum-Table-sortButton:focus-visible:after`, `.spectrum-Table-cell:focus-visible:after, .spectrum-Table-cell:focus:after, .spectrum-Table-headCell:focus-visible:after, .spectrum-Table-headCell:focus:after`.
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-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-headCell.spectrum-Table-hasMenuButton .spectrum-Table-sortButton:focus-visible:after`, `.spectrum-Table-body.is-drop-target:after`, `.spectrum-Table-cell:focus-visible:after, .spectrum-Table-cell:focus:after, .spectrum-Table-headCell:focus-visible:after, .spectrum-Table-headCell:focus:after`, `.spectrum-Table-row.is-selected:not(:has(+ .is-selected)) .spectrum-Table-cell`, `--mod-table-border-color`, `.spectrum-Table-row.is-drop-target`, `.spectrum-Table-row.is-drop-target .spectrum-Table-cell`, `.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-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-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"
+ }
+ }
}
diff --git a/components/table/stories/table.stories.js b/components/table/stories/table.stories.js
index 3979b332cce..4cd2a56bcd1 100644
--- a/components/table/stories/table.stories.js
+++ b/components/table/stories/table.stories.js
@@ -1,10 +1,12 @@
import { disableDefaultModes } from "@spectrum-css/preview/modes";
import { isEmphasized, isLoading, isQuiet } 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.
*/
@@ -168,9 +170,7 @@ export default {
},
packageJson,
metadata,
- status: {
- type: "migrated"
- },
+ cssprops: metadata.modifiers,
},
tags: ["migrated"],
};
diff --git a/components/tabs/dist/metadata.json b/components/tabs/dist/metadata.json
index 879d8bd7440..f8e84598150 100644
--- a/components/tabs/dist/metadata.json
+++ b/components/tabs/dist/metadata.json
@@ -22,153 +22,719 @@
".spectrum-Tabs-item",
".spectrum-Tabs-item .spectrum-Icon",
".spectrum-Tabs-item .spectrum-Icon + .spectrum-Tabs-itemLabel",
+ ".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-disabled .spectrum-Tabs-selectionIndicator",
".spectrum-Tabs-item.is-selected",
- ".spectrum-Tabs-item.is-selected.is-disabled",
".spectrum-Tabs-item.is-selected:focus-visible",
".spectrum-Tabs-item.is-selected:hover",
- ".spectrum-Tabs-item:before",
- ".spectrum-Tabs-item:focus-visible",
- ".spectrum-Tabs-item:focus-visible:before",
- ".spectrum-Tabs-item:hover",
+ ".spectrum-Tabs-item.is-selected.is-disabled",
".spectrum-Tabs-itemLabel",
".spectrum-Tabs-itemLabel:empty",
".spectrum-Tabs-selectionIndicator",
".spectrum-Tabs.spectrum-Tabs--compact"
],
- "modifiers": [
- "--mod-tabs-animation-duration",
- "--mod-tabs-animation-ease",
- "--mod-tabs-bottom-to-text",
- "--mod-tabs-bottom-to-text-compact",
- "--mod-tabs-color",
- "--mod-tabs-color-disabled",
- "--mod-tabs-color-hover",
- "--mod-tabs-color-key-focus",
- "--mod-tabs-color-selected",
- "--mod-tabs-color-selected-hover",
- "--mod-tabs-color-selected-key-focus",
- "--mod-tabs-focus-indicator-border-radius",
- "--mod-tabs-focus-indicator-color",
- "--mod-tabs-focus-indicator-gap",
- "--mod-tabs-focus-indicator-width",
- "--mod-tabs-font-family",
- "--mod-tabs-font-size",
- "--mod-tabs-font-style",
- "--mod-tabs-font-weight",
- "--mod-tabs-icon-size",
- "--mod-tabs-icon-to-text",
- "--mod-tabs-item-border-radius",
- "--mod-tabs-item-height",
- "--mod-tabs-item-height-compact",
- "--mod-tabs-item-horizontal-spacing",
- "--mod-tabs-item-horizontal-spacing-compact",
- "--mod-tabs-label-to-selection-indicator",
- "--mod-tabs-label-to-selection-indicator-compact",
- "--mod-tabs-line-height",
- "--mod-tabs-selection-indicator-border-radius",
- "--mod-tabs-selection-indicator-color",
- "--mod-tabs-selection-indicator-color-disabled",
- "--mod-tabs-selection-indicator-thickness",
- "--mod-tabs-side-to-icon",
- "--mod-tabs-side-to-icon-compact",
- "--mod-tabs-start-to-edge",
- "--mod-tabs-top-to-icon",
- "--mod-tabs-top-to-icon-compact",
- "--mod-tabs-top-to-text",
- "--mod-tabs-top-to-text-compact"
- ],
- "component": [
- "--spectrum-tab-selection-indicator-thickness",
- "--spectrum-tabs-animation-duration",
- "--spectrum-tabs-animation-ease",
- "--spectrum-tabs-bottom-to-text",
- "--spectrum-tabs-color",
- "--spectrum-tabs-color-disabled",
- "--spectrum-tabs-color-hover",
- "--spectrum-tabs-color-key-focus",
- "--spectrum-tabs-color-selected",
- "--spectrum-tabs-color-selected-hover",
- "--spectrum-tabs-color-selected-key-focus",
- "--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-border-radius",
- "--spectrum-tabs-item-height",
- "--spectrum-tabs-item-horizontal-spacing",
- "--spectrum-tabs-label-to-selection-indicator",
- "--spectrum-tabs-line-height",
- "--spectrum-tabs-selection-indicator-border-radius",
- "--spectrum-tabs-selection-indicator-color",
- "--spectrum-tabs-selection-indicator-color-disabled",
- "--spectrum-tabs-selection-indicator-thickness",
- "--spectrum-tabs-side-to-icon",
- "--spectrum-tabs-start-to-edge",
- "--spectrum-tabs-top-to-icon",
- "--spectrum-tabs-top-to-text"
- ],
- "global": [
- "--spectrum-animation-duration-100",
- "--spectrum-animation-ease-in-out",
- "--spectrum-corner-radius-0",
- "--spectrum-corner-radius-100",
- "--spectrum-corner-radius-full",
- "--spectrum-default-font-style",
- "--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-line-height-100",
- "--spectrum-neutral-content-color-default",
- "--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-regular-font-weight",
- "--spectrum-sans-font-family-stack",
- "--spectrum-spacing-200",
- "--spectrum-spacing-75",
- "--spectrum-tab-item-bottom-to-text-compact-medium",
- "--spectrum-tab-item-bottom-to-text-medium",
- "--spectrum-tab-item-compact-height-medium",
- "--spectrum-tab-item-height-medium",
- "--spectrum-tab-item-side-to-workflow-icon-compact-medium",
- "--spectrum-tab-item-side-to-workflow-icon-medium",
- "--spectrum-tab-item-start-to-edge-medium",
- "--spectrum-tab-item-to-tab-item-compact-horizontal-medium",
- "--spectrum-tab-item-to-tab-item-horizontal-medium",
- "--spectrum-tab-item-top-to-text-compact-medium",
- "--spectrum-tab-item-top-to-text-medium",
- "--spectrum-tab-item-top-to-workflow-icon-compact-medium",
- "--spectrum-tab-item-top-to-workflow-icon-medium",
- "--spectrum-text-to-visual-100",
- "--spectrum-workflow-icon-size-100"
- ],
- "passthroughs": ["--mod-picker-block-size"],
- "high-contrast": [
- "--highcontrast-tabs-background-color-selected",
- "--highcontrast-tabs-color",
- "--highcontrast-tabs-color-disabled",
- "--highcontrast-tabs-color-hover",
- "--highcontrast-tabs-color-key-focus",
- "--highcontrast-tabs-color-selected",
- "--highcontrast-tabs-color-selected-hover",
- "--highcontrast-tabs-color-selected-key-focus",
- "--highcontrast-tabs-focus-indicator-color",
- "--highcontrast-tabs-selection-indicator-color",
- "--highcontrast-tabs-selection-indicator-color-disabled"
- ]
+ "modifiers": {
+ "mod-tabs-item-height": {
+ "description": "Used by `--spectrum-tabs-item-height`.
Defaults to `var(--spectrum-tab-item-height-medium)`, if not set.",
+ "control": "text",
+ "category": "Modifier"
+ },
+ "mod-tabs-start-to-edge": {
+ "description": "Used by `--spectrum-tabs-start-to-edge`.
Defaults to `var(--spectrum-tab-item-start-to-edge-medium)`, if not set.",
+ "control": "text",
+ "category": "Modifier"
+ },
+ "mod-tabs-top-to-text": {
+ "description": "Used by `--spectrum-tabs-top-to-text`.
Defaults to `var(--spectrum-tab-item-top-to-text-medium)`, if not set.",
+ "control": "text",
+ "category": "Modifier"
+ },
+ "mod-tabs-bottom-to-text": {
+ "description": "Used by `--spectrum-tabs-bottom-to-text`.
Defaults to `var(--spectrum-tab-item-bottom-to-text-medium)`, if not set.",
+ "control": "text",
+ "category": "Modifier"
+ },
+ "mod-tabs-label-to-selection-indicator": {
+ "description": "Used by `--spectrum-tabs-label-to-selection-indicator`.
Defaults to `var(--spectrum-spacing-200)`, if not set.",
+ "control": "text",
+ "category": "Modifier"
+ },
+ "mod-tabs-item-horizontal-spacing": {
+ "description": "Used by `--spectrum-tabs-item-horizontal-spacing`.
Defaults to `var(--spectrum-tab-item-to-tab-item-horizontal-medium)`, if not set.",
+ "control": "text",
+ "category": "Modifier"
+ },
+ "mod-tabs-icon-size": {
+ "description": "Used by `--spectrum-tabs-icon-size`.
Defaults to `var(--spectrum-workflow-icon-size-100)`, if not set.",
+ "control": "text",
+ "category": "Modifier"
+ },
+ "mod-tabs-icon-to-text": {
+ "description": "Used by `--spectrum-tabs-icon-to-text`.
Defaults to `var(--spectrum-text-to-visual-100)`, if not set.",
+ "control": "text",
+ "category": "Modifier"
+ },
+ "mod-tabs-top-to-icon": {
+ "description": "Used by `--spectrum-tabs-top-to-icon`.
Defaults to `var(--spectrum-tab-item-top-to-workflow-icon-medium)`, if not set.",
+ "control": "text",
+ "category": "Modifier"
+ },
+ "mod-tabs-side-to-icon": {
+ "description": "Used by `--spectrum-tabs-side-to-icon`.
Defaults to `var(--spectrum-tab-item-side-to-workflow-icon-medium)`, if not set.",
+ "control": "text",
+ "category": "Modifier"
+ },
+ "mod-tabs-item-border-radius": {
+ "description": "Used by `--spectrum-tabs-item-border-radius`.
Defaults to `var(--spectrum-corner-radius-0)`, if not set.",
+ "control": "text",
+ "category": "Modifier"
+ },
+ "mod-tabs-color": {
+ "description": "Used by `--spectrum-tabs-color`.
Defaults to `var(--spectrum-neutral-subdued-content-color-default)`, if not set.",
+ "control": "color",
+ "category": "Modifier"
+ },
+ "mod-tabs-color-hover": {
+ "description": "Used by `--spectrum-tabs-color-hover`.
Defaults to `var(--spectrum-neutral-subdued-content-color-hover)`, if not set.",
+ "control": "color",
+ "category": "Modifier"
+ },
+ "mod-tabs-color-key-focus": {
+ "description": "Used by `--spectrum-tabs-color-key-focus`.
Defaults to `var(--spectrum-neutral-subdued-content-color-key-focus)`, if not set.",
+ "control": "color",
+ "category": "Modifier"
+ },
+ "mod-tabs-color-selected": {
+ "description": "Used by `--spectrum-tabs-color-selected`.
Defaults to `var(--spectrum-neutral-content-color-default)`, if not set.",
+ "control": "color",
+ "category": "Modifier"
+ },
+ "mod-tabs-color-selected-hover": {
+ "description": "Used by `--spectrum-tabs-color-selected-hover`.
Defaults to `var(--spectrum-neutral-content-color-hover)`, if not set.",
+ "control": "color",
+ "category": "Modifier"
+ },
+ "mod-tabs-color-selected-key-focus": {
+ "description": "Used by `--spectrum-tabs-color-selected-key-focus`.
Defaults to `var(--spectrum-neutral-content-color-key-focus)`, if not set.",
+ "control": "color",
+ "category": "Modifier"
+ },
+ "mod-tabs-color-disabled": {
+ "description": "Used by `--spectrum-tabs-color-disabled`.
Defaults to `var(--spectrum-disabled-content-color)`, if not set.",
+ "control": "color",
+ "category": "Modifier"
+ },
+ "mod-tabs-selection-indicator-color-disabled": {
+ "description": "Used by `--spectrum-tabs-selection-indicator-color-disabled`.
Defaults to `var(--spectrum-disabled-border-color)`, if not set.",
+ "control": "color",
+ "category": "Modifier"
+ },
+ "mod-tabs-font-weight": {
+ "description": "Used by `--spectrum-tabs-font-weight`.
Defaults to `var(--spectrum-regular-font-weight)`, if not set.",
+ "control": "text",
+ "category": "Modifier"
+ },
+ "mod-tabs-font-family": {
+ "description": "Used by `--spectrum-tabs-font-family`.
Defaults to `var(--spectrum-sans-font-family-stack)`, if not set.",
+ "control": "text",
+ "category": "Modifier"
+ },
+ "mod-tabs-font-style": {
+ "description": "Used by `--spectrum-tabs-font-style`.
Defaults to `var(--spectrum-default-font-style)`, if not set.",
+ "control": "text",
+ "category": "Modifier"
+ },
+ "mod-tabs-font-size": {
+ "description": "Used by `--spectrum-tabs-font-size`.
Defaults to `var(--spectrum-font-size-100)`, if not set.",
+ "control": "text",
+ "category": "Modifier"
+ },
+ "mod-tabs-line-height": {
+ "description": "Used by `--spectrum-tabs-line-height`.
Defaults to `var(--spectrum-line-height-100)`, if not set.",
+ "control": "text",
+ "category": "Modifier"
+ },
+ "mod-tabs-focus-indicator-width": {
+ "description": "Used by `--spectrum-tabs-focus-indicator-width`.
Defaults to `var(--spectrum-focus-indicator-thickness)`, if not set.",
+ "control": "text",
+ "category": "Modifier"
+ },
+ "mod-tabs-focus-indicator-border-radius": {
+ "description": "Used by `--spectrum-tabs-focus-indicator-border-radius`.
Defaults to `var(--spectrum-corner-radius-100)`, if not set.",
+ "control": "text",
+ "category": "Modifier"
+ },
+ "mod-tabs-focus-indicator-gap": {
+ "description": "Used by `--spectrum-tabs-focus-indicator-gap`.
Defaults to `var(--spectrum-focus-indicator-gap)`, if not set.",
+ "control": "text",
+ "category": "Modifier"
+ },
+ "mod-tabs-focus-indicator-color": {
+ "description": "Used by `--spectrum-tabs-focus-indicator-color`.
Defaults to `var(--spectrum-focus-indicator-color)`, if not set.",
+ "control": "color",
+ "category": "Modifier"
+ },
+ "mod-tabs-selection-indicator-color": {
+ "description": "Used by `--spectrum-tabs-selection-indicator-color`.
Defaults to `var(--spectrum-neutral-subdued-content-color-down)`, if not set.",
+ "control": "color",
+ "category": "Modifier"
+ },
+ "mod-tabs-selection-indicator-thickness": {
+ "description": "Used by `--spectrum-tabs-selection-indicator-thickness`.
Defaults to `var(--spectrum-tab-selection-indicator-thickness)`, if not set.",
+ "control": "text",
+ "category": "Modifier"
+ },
+ "mod-tabs-selection-indicator-border-radius": {
+ "description": "Used by `--spectrum-tabs-selection-indicator-border-radius`.
Defaults to `var(--spectrum-corner-radius-full)`, if not set.",
+ "control": "text",
+ "category": "Modifier"
+ },
+ "mod-tabs-animation-duration": {
+ "description": "Used by `--spectrum-tabs-animation-duration`.
Defaults to `var(--spectrum-animation-duration-100)`, if not set.",
+ "control": "text",
+ "category": "Modifier"
+ },
+ "mod-tabs-animation-ease": {
+ "description": "Used by `--spectrum-tabs-animation-ease`.
Defaults to `var(--spectrum-animation-ease-in-out)`, if not set.",
+ "control": "text",
+ "category": "Modifier"
+ },
+ "mod-tabs-item-height-compact": {
+ "description": "Used by `--spectrum-tabs-item-height`.
Defaults to `var(--spectrum-tab-item-compact-height-medium)`, if not set.",
+ "control": "text",
+ "category": "Modifier"
+ },
+ "mod-tabs-top-to-text-compact": {
+ "description": "Used by `--spectrum-tabs-top-to-text`.
Defaults to `var(--spectrum-tab-item-top-to-text-compact-medium)`, if not set.",
+ "control": "text",
+ "category": "Modifier"
+ },
+ "mod-tabs-bottom-to-text-compact": {
+ "description": "Used by `--spectrum-tabs-bottom-to-text`.
Defaults to `var(--spectrum-tab-item-bottom-to-text-compact-medium)`, if not set.",
+ "control": "text",
+ "category": "Modifier"
+ },
+ "mod-tabs-label-to-selection-indicator-compact": {
+ "description": "Used by `--spectrum-tabs-label-to-selection-indicator`.
Defaults to `var(--spectrum-spacing-75)`, if not set.",
+ "control": "text",
+ "category": "Modifier"
+ },
+ "mod-tabs-item-horizontal-spacing-compact": {
+ "description": "Used by `--spectrum-tabs-item-horizontal-spacing`.
Defaults to `var(--spectrum-tab-item-to-tab-item-compact-horizontal-medium)`, if not set.",
+ "control": "text",
+ "category": "Modifier"
+ },
+ "mod-tabs-top-to-icon-compact": {
+ "description": "Used by `--spectrum-tabs-top-to-icon`.
Defaults to `var(--spectrum-tab-item-top-to-workflow-icon-compact-medium)`, if not set.",
+ "control": "text",
+ "category": "Modifier"
+ },
+ "mod-tabs-side-to-icon-compact": {
+ "description": "Used by `--spectrum-tabs-side-to-icon`.
Defaults to `var(--spectrum-tab-item-side-to-workflow-icon-compact-medium)`, if not set.",
+ "control": "text",
+ "category": "Modifier"
+ }
+ },
+ "component": {
+ "spectrum-tabs-item-height": {
+ "value": "var(--mod-tabs-item-height-compact, var(--spectrum-tab-item-compact-height-medium))",
+ "description": "Defined in `.spectrum-Tabs`, `.spectrum-Tabs.spectrum-Tabs--compact`.
Used by `--mod-picker-block-size`, `.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(--mod-tabs-item-height-compact, var(--spectrum-tab-item-compact-height-medium))`, if not set.",
+ "control": "text",
+ "category": "Component"
+ },
+ "spectrum-tabs-start-to-edge": {
+ "value": "var(--mod-tabs-start-to-edge, var(--spectrum-tab-item-start-to-edge-medium))",
+ "description": "Defined in `.spectrum-Tabs`.
Used by `.spectrum-Tabs--vertical .spectrum-Tabs-item, .spectrum-Tabs--vertical-right .spectrum-Tabs-item`, `.spectrum-Tabs--vertical .spectrum-Tabs-selectionIndicator, .spectrum-Tabs--vertical-right .spectrum-Tabs-selectionIndicator`, `.spectrum-Tabs--vertical-right .spectrum-Tabs-selectionIndicator`.
Defaults to `var(--mod-tabs-start-to-edge, var(--spectrum-tab-item-start-to-edge-medium))`, if not set.",
+ "control": "text",
+ "category": "Component"
+ },
+ "spectrum-tabs-top-to-text": {
+ "value": "var(--mod-tabs-top-to-text-compact, var(--spectrum-tab-item-top-to-text-compact-medium))",
+ "description": "Defined in `.spectrum-Tabs`, `.spectrum-Tabs.spectrum-Tabs--compact`.
Used by `.spectrum-Tabs-itemLabel`.
Defaults to `var(--mod-tabs-top-to-text-compact, var(--spectrum-tab-item-top-to-text-compact-medium))`, if not set.",
+ "control": "text",
+ "category": "Component"
+ },
+ "spectrum-tabs-bottom-to-text": {
+ "value": "var(--mod-tabs-bottom-to-text-compact, var(--spectrum-tab-item-bottom-to-text-compact-medium))",
+ "description": "Defined in `.spectrum-Tabs`, `.spectrum-Tabs.spectrum-Tabs--compact`.
Used by `.spectrum-Tabs-itemLabel`.
Defaults to `var(--mod-tabs-bottom-to-text-compact, var(--spectrum-tab-item-bottom-to-text-compact-medium))`, if not set.",
+ "control": "text",
+ "category": "Component"
+ },
+ "spectrum-tabs-label-to-selection-indicator": {
+ "value": "var(--mod-tabs-label-to-selection-indicator-compact, var(--spectrum-spacing-75))",
+ "description": "Defined in `.spectrum-Tabs`, `.spectrum-Tabs.spectrum-Tabs--compact`.
Used by `.spectrum-Tabs--horizontal .spectrum-Tabs-selectionIndicator`.
Defaults to `var(--mod-tabs-label-to-selection-indicator-compact, var(--spectrum-spacing-75))`, if not set.",
+ "control": "text",
+ "category": "Component"
+ },
+ "spectrum-tabs-item-horizontal-spacing": {
+ "value": "var(--mod-tabs-item-horizontal-spacing-compact, var(--spectrum-tab-item-to-tab-item-compact-horizontal-medium))",
+ "description": "Defined in `.spectrum-Tabs`, `.spectrum-Tabs.spectrum-Tabs--compact`.
Used by `.spectrum-Tabs`.
Defaults to `var(--mod-tabs-item-horizontal-spacing-compact, var(--spectrum-tab-item-to-tab-item-compact-horizontal-medium))`, if not set.",
+ "control": "text",
+ "category": "Component"
+ },
+ "spectrum-tabs-icon-size": {
+ "value": "var(--mod-tabs-icon-size, var(--spectrum-workflow-icon-size-100))",
+ "description": "Defined in `.spectrum-Tabs`.
Used by `.spectrum-Tabs-item .spectrum-Icon`.
Defaults to `var(--mod-tabs-icon-size, var(--spectrum-workflow-icon-size-100))`, if not set.",
+ "control": "text",
+ "category": "Component"
+ },
+ "spectrum-tabs-icon-to-text": {
+ "value": "var(--mod-tabs-icon-to-text, var(--spectrum-text-to-visual-100))",
+ "description": "Defined in `.spectrum-Tabs`.
Used by `.spectrum-Tabs-item .spectrum-Icon + .spectrum-Tabs-itemLabel`.
Defaults to `var(--mod-tabs-icon-to-text, var(--spectrum-text-to-visual-100))`, if not set.",
+ "control": "text",
+ "category": "Component"
+ },
+ "spectrum-tabs-top-to-icon": {
+ "value": "var(--mod-tabs-top-to-icon-compact, var(--spectrum-tab-item-top-to-workflow-icon-compact-medium))",
+ "description": "Defined in `.spectrum-Tabs`, `.spectrum-Tabs.spectrum-Tabs--compact`.
Used by `.spectrum-Tabs-item .spectrum-Icon`.
Defaults to `var(--mod-tabs-top-to-icon-compact, var(--spectrum-tab-item-top-to-workflow-icon-compact-medium))`, if not set.",
+ "control": "text",
+ "category": "Component"
+ },
+ "spectrum-tabs-side-to-icon": {
+ "value": "var(--mod-tabs-side-to-icon-compact, var(--spectrum-tab-item-side-to-workflow-icon-compact-medium))",
+ "description": "Defined in `.spectrum-Tabs`, `.spectrum-Tabs.spectrum-Tabs--compact`.
Used by `.spectrum-Tabs-item .spectrum-Icon`, `.spectrum-Tabs-item .spectrum-Icon + .spectrum-Tabs-itemLabel`.
Defaults to `var(--mod-tabs-side-to-icon-compact, var(--spectrum-tab-item-side-to-workflow-icon-compact-medium))`, if not set.",
+ "control": "text",
+ "category": "Component"
+ },
+ "spectrum-tabs-item-border-radius": {
+ "value": "var(--mod-tabs-item-border-radius, var(--spectrum-corner-radius-0))",
+ "description": "Defined in `.spectrum-Tabs`.
Used by `.spectrum-Tabs-item`.
Defaults to `var(--mod-tabs-item-border-radius, var(--spectrum-corner-radius-0))`, if not set.",
+ "control": "text",
+ "category": "Component"
+ },
+ "spectrum-tabs-color": {
+ "value": "var(--highcontrast-tabs-color, var(--mod-tabs-color, var(--spectrum-neutral-subdued-content-color-default)))",
+ "description": "Defined in `.spectrum-Tabs`.
Used by `.spectrum-Tabs-item`.
Defaults to `var(--highcontrast-tabs-color, var(--mod-tabs-color, var(--spectrum-neutral-subdued-content-color-default)))`, if not set.",
+ "control": "color",
+ "category": "Component"
+ },
+ "spectrum-tabs-color-hover": {
+ "value": "var(--highcontrast-tabs-color-hover, var(--mod-tabs-color-hover, var(--spectrum-neutral-subdued-content-color-hover)))",
+ "description": "Defined in `.spectrum-Tabs`.
Used by `.spectrum-Tabs-item:hover`.
Defaults to `var(--highcontrast-tabs-color-hover, var(--mod-tabs-color-hover, var(--spectrum-neutral-subdued-content-color-hover)))`, if not set.",
+ "control": "color",
+ "category": "Component"
+ },
+ "spectrum-tabs-color-key-focus": {
+ "value": "var(--highcontrast-tabs-color-key-focus, var(--mod-tabs-color-key-focus, var(--spectrum-neutral-subdued-content-color-key-focus)))",
+ "description": "Defined in `.spectrum-Tabs`.
Used by `.spectrum-Tabs-item:focus-visible`.
Defaults to `var(--highcontrast-tabs-color-key-focus, var(--mod-tabs-color-key-focus, var(--spectrum-neutral-subdued-content-color-key-focus)))`, if not set.",
+ "control": "color",
+ "category": "Component"
+ },
+ "spectrum-tabs-color-selected": {
+ "value": "var(--highcontrast-tabs-color-selected, var(--mod-tabs-color-selected, var(--spectrum-neutral-content-color-default)))",
+ "description": "Defined in `.spectrum-Tabs`.
Used by `.spectrum-Tabs-item.is-selected`.
Defaults to `var(--highcontrast-tabs-color-selected, var(--mod-tabs-color-selected, var(--spectrum-neutral-content-color-default)))`, if not set.",
+ "control": "color",
+ "category": "Component"
+ },
+ "spectrum-tabs-color-selected-hover": {
+ "value": "var(--highcontrast-tabs-color-selected-hover, var(--mod-tabs-color-selected-hover, var(--spectrum-neutral-content-color-hover)))",
+ "description": "Defined in `.spectrum-Tabs`.
Used by `.spectrum-Tabs-item.is-selected:hover`.
Defaults to `var(--highcontrast-tabs-color-selected-hover, var(--mod-tabs-color-selected-hover, var(--spectrum-neutral-content-color-hover)))`, if not set.",
+ "control": "color",
+ "category": "Component"
+ },
+ "spectrum-tabs-color-selected-key-focus": {
+ "value": "var(--highcontrast-tabs-color-selected-key-focus, var(--mod-tabs-color-selected-key-focus, var(--spectrum-neutral-content-color-key-focus)))",
+ "description": "Defined in `.spectrum-Tabs`.
Used by `.spectrum-Tabs-item.is-selected:focus-visible`.
Defaults to `var(--highcontrast-tabs-color-selected-key-focus, var(--mod-tabs-color-selected-key-focus, var(--spectrum-neutral-content-color-key-focus)))`, if not set.",
+ "control": "color",
+ "category": "Component"
+ },
+ "spectrum-tabs-color-disabled": {
+ "value": "var(--highcontrast-tabs-color-disabled, var(--mod-tabs-color-disabled, var(--spectrum-disabled-content-color)))",
+ "description": "Defined in `.spectrum-Tabs`.
Used by `.spectrum-Tabs-item.is-disabled, .spectrum-Tabs-item.is-selected.is-disabled`.
Defaults to `var(--highcontrast-tabs-color-disabled, var(--mod-tabs-color-disabled, var(--spectrum-disabled-content-color)))`, if not set.",
+ "control": "color",
+ "category": "Component"
+ },
+ "spectrum-tabs-selection-indicator-color-disabled": {
+ "value": "var(--highcontrast-tabs-selection-indicator-color-disabled, var(--mod-tabs-selection-indicator-color-disabled, var(--spectrum-disabled-border-color)))",
+ "description": "Defined in `.spectrum-Tabs`.
Used by `.spectrum-Tabs-item.is-disabled .spectrum-Tabs-selectionIndicator`.
Defaults to `var(--highcontrast-tabs-selection-indicator-color-disabled, var(--mod-tabs-selection-indicator-color-disabled, var(--spectrum-disabled-border-color)))`, if not set.",
+ "control": "color",
+ "category": "Component"
+ },
+ "spectrum-tabs-font-weight": {
+ "value": "var(--mod-tabs-font-weight, var(--spectrum-regular-font-weight))",
+ "description": "Defined in `.spectrum-Tabs`.
Used by `.spectrum-Tabs-itemLabel`.
Defaults to `var(--mod-tabs-font-weight, var(--spectrum-regular-font-weight))`, if not set.",
+ "control": "text",
+ "category": "Component"
+ },
+ "spectrum-tabs-font-family": {
+ "value": "var(--mod-tabs-font-family, var(--spectrum-sans-font-family-stack))",
+ "description": "Defined in `.spectrum-Tabs`.
Used by `.spectrum-Tabs-itemLabel`.
Defaults to `var(--mod-tabs-font-family, var(--spectrum-sans-font-family-stack))`, if not set.",
+ "control": "text",
+ "category": "Component"
+ },
+ "spectrum-tabs-font-style": {
+ "value": "var(--mod-tabs-font-style, var(--spectrum-default-font-style))",
+ "description": "Defined in `.spectrum-Tabs`.
Used by `.spectrum-Tabs-itemLabel`.
Defaults to `var(--mod-tabs-font-style, var(--spectrum-default-font-style))`, if not set.",
+ "control": "text",
+ "category": "Component"
+ },
+ "spectrum-tabs-font-size": {
+ "value": "var(--mod-tabs-font-size, var(--spectrum-font-size-100))",
+ "description": "Defined in `.spectrum-Tabs`.
Used by `.spectrum-Tabs-itemLabel`.
Defaults to `var(--mod-tabs-font-size, var(--spectrum-font-size-100))`, if not set.",
+ "control": "text",
+ "category": "Component"
+ },
+ "spectrum-tabs-line-height": {
+ "value": "var(--mod-tabs-line-height, var(--spectrum-line-height-100))",
+ "description": "Defined in `.spectrum-Tabs`.
Used by `.spectrum-Tabs-itemLabel`.
Defaults to `var(--mod-tabs-line-height, var(--spectrum-line-height-100))`, if not set.",
+ "control": "text",
+ "category": "Component"
+ },
+ "spectrum-tabs-focus-indicator-width": {
+ "value": "var(--mod-tabs-focus-indicator-width, var(--spectrum-focus-indicator-thickness))",
+ "description": "Defined in `.spectrum-Tabs`.
Used by `.spectrum-Tabs-item:before`.
Defaults to `var(--mod-tabs-focus-indicator-width, var(--spectrum-focus-indicator-thickness))`, if not set.",
+ "control": "text",
+ "category": "Component"
+ },
+ "spectrum-tabs-focus-indicator-border-radius": {
+ "value": "var(--mod-tabs-focus-indicator-border-radius, var(--spectrum-corner-radius-100))",
+ "description": "Defined in `.spectrum-Tabs`.
Used by `.spectrum-Tabs-item:before`.
Defaults to `var(--mod-tabs-focus-indicator-border-radius, var(--spectrum-corner-radius-100))`, if not set.",
+ "control": "text",
+ "category": "Component"
+ },
+ "spectrum-tabs-focus-indicator-gap": {
+ "value": "var(--mod-tabs-focus-indicator-gap, var(--spectrum-focus-indicator-gap))",
+ "description": "Defined in `.spectrum-Tabs`.
Used by `.spectrum-Tabs-item:before`.
Defaults to `var(--mod-tabs-focus-indicator-gap, var(--spectrum-focus-indicator-gap))`, if not set.",
+ "control": "text",
+ "category": "Component"
+ },
+ "spectrum-tabs-focus-indicator-color": {
+ "value": "var(--highcontrast-tabs-focus-indicator-color, var(--mod-tabs-focus-indicator-color, var(--spectrum-focus-indicator-color)))",
+ "description": "Defined in `.spectrum-Tabs`.
Used by `.spectrum-Tabs-item:focus-visible:before`.
Defaults to `var(--highcontrast-tabs-focus-indicator-color, var(--mod-tabs-focus-indicator-color, var(--spectrum-focus-indicator-color)))`, if not set.",
+ "control": "color",
+ "category": "Component"
+ },
+ "spectrum-tabs-selection-indicator-color": {
+ "value": "var(--highcontrast-tabs-selection-indicator-color, var(--mod-tabs-selection-indicator-color, var(--spectrum-neutral-subdued-content-color-down)))",
+ "description": "Defined in `.spectrum-Tabs`.
Used by `.spectrum-Tabs-selectionIndicator`.
Defaults to `var(--highcontrast-tabs-selection-indicator-color, var(--mod-tabs-selection-indicator-color, var(--spectrum-neutral-subdued-content-color-down)))`, if not set.",
+ "control": "color",
+ "category": "Component"
+ },
+ "spectrum-tabs-selection-indicator-thickness": {
+ "value": "var(--mod-tabs-selection-indicator-thickness, var(--spectrum-tab-selection-indicator-thickness))",
+ "description": "Defined in `.spectrum-Tabs`.
Used by `.spectrum-Tabs--horizontal .spectrum-Tabs-selectionIndicator`, `.spectrum-Tabs--vertical .spectrum-Tabs-selectionIndicator, .spectrum-Tabs--vertical-right .spectrum-Tabs-selectionIndicator`.
Defaults to `var(--mod-tabs-selection-indicator-thickness, var(--spectrum-tab-selection-indicator-thickness))`, if not set.",
+ "control": "text",
+ "category": "Component"
+ },
+ "spectrum-tab-selection-indicator-thickness": {
+ "description": "Used by `--spectrum-tabs-selection-indicator-thickness`.",
+ "control": "text",
+ "category": "Component"
+ },
+ "spectrum-tabs-selection-indicator-border-radius": {
+ "value": "var(--mod-tabs-selection-indicator-border-radius, var(--spectrum-corner-radius-full))",
+ "description": "Defined in `.spectrum-Tabs`.
Used by `.spectrum-Tabs-selectionIndicator`.
Defaults to `var(--mod-tabs-selection-indicator-border-radius, var(--spectrum-corner-radius-full))`, if not set.",
+ "control": "text",
+ "category": "Component"
+ },
+ "spectrum-tabs-animation-duration": {
+ "value": "var(--mod-tabs-animation-duration, var(--spectrum-animation-duration-100))",
+ "description": "Defined in `.spectrum-Tabs`.
Used by `.spectrum-Tabs-item`, `.spectrum-Tabs-selectionIndicator`.
Defaults to `var(--mod-tabs-animation-duration, var(--spectrum-animation-duration-100))`, if not set.",
+ "control": "text",
+ "category": "Component"
+ },
+ "spectrum-tabs-animation-ease": {
+ "value": "var(--mod-tabs-animation-ease, var(--spectrum-animation-ease-in-out))",
+ "description": "Defined in `.spectrum-Tabs`.
Used by `.spectrum-Tabs-selectionIndicator`.
Defaults to `var(--mod-tabs-animation-ease, var(--spectrum-animation-ease-in-out))`, if not set.",
+ "control": "text",
+ "category": "Component"
+ }
+ },
+ "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-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-spacing-200": {
+ "value": "12px",
+ "description": "Used by `--spectrum-tabs-label-to-selection-indicator`.",
+ "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-workflow-icon-size-100": {
+ "value": "20px",
+ "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-tab-item-side-to-workflow-icon-medium": {
+ "description": "Used by `--spectrum-tabs-side-to-icon`.",
+ "control": "text",
+ "category": "Global"
+ },
+ "spectrum-corner-radius-0": {
+ "value": "0px",
+ "description": "Used by `--spectrum-tabs-item-border-radius`.",
+ "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-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-neutral-content-color-default": {
+ "value": "var(--spectrum-gray-800)",
+ "description": "Used by `--spectrum-tabs-color-selected`.",
+ "control": "color",
+ "category": "Global"
+ },
+ "spectrum-neutral-content-color-hover": {
+ "value": "var(--spectrum-gray-900)",
+ "description": "Used by `--spectrum-tabs-color-selected-hover`.",
+ "control": "color",
+ "category": "Global"
+ },
+ "spectrum-neutral-content-color-key-focus": {
+ "value": "var(--spectrum-gray-900)",
+ "description": "Used by `--spectrum-tabs-color-selected-key-focus`.",
+ "control": "color",
+ "category": "Global"
+ },
+ "spectrum-disabled-content-color": {
+ "value": "var(--spectrum-gray-400)",
+ "description": "Used by `--spectrum-tabs-color-disabled`.",
+ "control": "color",
+ "category": "Global"
+ },
+ "spectrum-disabled-border-color": {
+ "value": "var(--spectrum-gray-300)",
+ "description": "Used by `--spectrum-tabs-selection-indicator-color-disabled`.",
+ "control": "color",
+ "category": "Global"
+ },
+ "spectrum-regular-font-weight": {
+ "value": "400",
+ "description": "Used by `--spectrum-tabs-font-weight`.",
+ "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": "4px",
+ "description": "Used by `--spectrum-tabs-focus-indicator-border-radius`.",
+ "control": "text",
+ "category": "Global"
+ },
+ "spectrum-focus-indicator-gap": {
+ "value": "2px",
+ "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-neutral-subdued-content-color-down": {
+ "value": "var(--spectrum-gray-800)",
+ "description": "Used by `--spectrum-tabs-selection-indicator-color`.",
+ "control": "color",
+ "category": "Global"
+ },
+ "spectrum-corner-radius-full": {
+ "value": "9999px",
+ "description": "Used by `--spectrum-tabs-selection-indicator-border-radius`.",
+ "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-compact-height-medium": {
+ "value": "var(--spectrum-component-height-100)",
+ "description": "Used by `--spectrum-tabs-item-height`.",
+ "control": "text",
+ "category": "Global"
+ },
+ "spectrum-tab-item-top-to-text-compact-medium": {
+ "value": "6px",
+ "description": "Used by `--spectrum-tabs-top-to-text`.",
+ "control": "text",
+ "category": "Global"
+ },
+ "spectrum-tab-item-bottom-to-text-compact-medium": {
+ "value": "8px",
+ "description": "Used by `--spectrum-tabs-bottom-to-text`.",
+ "control": "text",
+ "category": "Global"
+ },
+ "spectrum-spacing-75": {
+ "value": "4px",
+ "description": "Used by `--spectrum-tabs-label-to-selection-indicator`.",
+ "control": "text",
+ "category": "Global"
+ },
+ "spectrum-tab-item-to-tab-item-compact-horizontal-medium": {
+ "description": "Used by `--spectrum-tabs-item-horizontal-spacing`.",
+ "control": "text",
+ "category": "Global"
+ },
+ "spectrum-tab-item-top-to-workflow-icon-compact-medium": {
+ "value": "7px",
+ "description": "Used by `--spectrum-tabs-top-to-icon`.",
+ "control": "text",
+ "category": "Global"
+ },
+ "spectrum-tab-item-side-to-workflow-icon-compact-medium": {
+ "description": "Used by `--spectrum-tabs-side-to-icon`.",
+ "control": "text",
+ "category": "Global"
+ }
+ },
+ "passthroughs": {
+ "mod-picker-block-size": {
+ "category": "Passthrough"
+ }
+ },
+ "high-contrast": {
+ "highcontrast-tabs-color": {
+ "value": "var(--mod-tabs-color, var(--spectrum-neutral-subdued-content-color-default))",
+ "description": "Defined in `.spectrum-Tabs`.
Used by `--spectrum-tabs-color`.
Defaults to `var(--mod-tabs-color, var(--spectrum-neutral-subdued-content-color-default))`, if not set.",
+ "control": "color"
+ },
+ "highcontrast-tabs-color-hover": {
+ "value": "var(--mod-tabs-color-hover, var(--spectrum-neutral-subdued-content-color-hover))",
+ "description": "Defined in `.spectrum-Tabs`.
Used by `--spectrum-tabs-color-hover`.
Defaults to `var(--mod-tabs-color-hover, var(--spectrum-neutral-subdued-content-color-hover))`, if not set.",
+ "control": "color"
+ },
+ "highcontrast-tabs-color-key-focus": {
+ "value": "var(--mod-tabs-color-key-focus, var(--spectrum-neutral-subdued-content-color-key-focus))",
+ "description": "Defined in `.spectrum-Tabs`.
Used by `--spectrum-tabs-color-key-focus`.
Defaults to `var(--mod-tabs-color-key-focus, var(--spectrum-neutral-subdued-content-color-key-focus))`, if not set.",
+ "control": "color"
+ },
+ "highcontrast-tabs-color-selected": {
+ "value": "var(--mod-tabs-color-selected, var(--spectrum-neutral-content-color-default))",
+ "description": "Defined in `.spectrum-Tabs`.
Used by `--spectrum-tabs-color-selected`, `.spectrum-Tabs .spectrum-Tabs-item.is-selected .spectrum-Icon`.
Defaults to `var(--mod-tabs-color-selected, var(--spectrum-neutral-content-color-default))`, if not set.",
+ "control": "color"
+ },
+ "highcontrast-tabs-color-selected-hover": {
+ "value": "var(--mod-tabs-color-selected-hover, var(--spectrum-neutral-content-color-hover))",
+ "description": "Defined in `.spectrum-Tabs`.
Used by `--spectrum-tabs-color-selected-hover`.
Defaults to `var(--mod-tabs-color-selected-hover, var(--spectrum-neutral-content-color-hover))`, if not set.",
+ "control": "color"
+ },
+ "highcontrast-tabs-color-selected-key-focus": {
+ "value": "var(--mod-tabs-color-selected-key-focus, var(--spectrum-neutral-content-color-key-focus))",
+ "description": "Defined in `.spectrum-Tabs`.
Used by `--spectrum-tabs-color-selected-key-focus`.
Defaults to `var(--mod-tabs-color-selected-key-focus, var(--spectrum-neutral-content-color-key-focus))`, if not set.",
+ "control": "color"
+ },
+ "highcontrast-tabs-color-disabled": {
+ "value": "var(--mod-tabs-color-disabled, var(--spectrum-disabled-content-color))",
+ "description": "Defined in `.spectrum-Tabs`.
Used by `--spectrum-tabs-color-disabled`, `.spectrum-Tabs .spectrum-Tabs-item.is-selected.is-disabled .spectrum-Icon`.
Defaults to `var(--mod-tabs-color-disabled, var(--spectrum-disabled-content-color))`, if not set.",
+ "control": "color"
+ },
+ "highcontrast-tabs-selection-indicator-color-disabled": {
+ "value": "var(--mod-tabs-selection-indicator-color-disabled, var(--spectrum-disabled-border-color))",
+ "description": "Defined in `.spectrum-Tabs`.
Used by `--spectrum-tabs-selection-indicator-color-disabled`, `.spectrum-Tabs .spectrum-Tabs-item.is-selected.is-disabled .spectrum-Tabs-selectionIndicator`.
Defaults to `var(--mod-tabs-selection-indicator-color-disabled, var(--spectrum-disabled-border-color))`, if not set.",
+ "control": "color"
+ },
+ "highcontrast-tabs-focus-indicator-color": {
+ "value": "var(--mod-tabs-focus-indicator-color, var(--spectrum-focus-indicator-color))",
+ "description": "Defined in `.spectrum-Tabs`.
Used by `--spectrum-tabs-focus-indicator-color`.
Defaults to `var(--mod-tabs-focus-indicator-color, var(--spectrum-focus-indicator-color))`, if not set.",
+ "control": "color"
+ },
+ "highcontrast-tabs-selection-indicator-color": {
+ "value": "var(--mod-tabs-selection-indicator-color, var(--spectrum-neutral-subdued-content-color-down))",
+ "description": "Defined in `.spectrum-Tabs`.
Used by `--spectrum-tabs-selection-indicator-color`.
Defaults to `var(--mod-tabs-selection-indicator-color, var(--spectrum-neutral-subdued-content-color-down))`, if not set.",
+ "control": "color"
+ },
+ "highcontrast-tabs-background-color-selected": {
+ "value": "SelectedItem",
+ "description": "Defined in `.spectrum-Tabs`.
Used by `.spectrum-Tabs .spectrum-Tabs-item.is-selected`.
Defaults to `SelectedItem`, if not set.",
+ "control": "color"
+ }
+ }
}
diff --git a/components/tabs/stories/tabs.stories.js b/components/tabs/stories/tabs.stories.js
index 7e7b45d5dbd..a25cbfae326 100644
--- a/components/tabs/stories/tabs.stories.js
+++ b/components/tabs/stories/tabs.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 { TabsGroups } from "./tabs.test.js";
import { CompactGroup, OverflowGroup, 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, Template, VerticalGroup } from "./template
* ### Quiet tabs
* The quiet variant has been deprecated for Spectrum 2. By default, all tabs look similar to what was formerly the quiet variant, with no divider spanning across all tab items.
*/
-
export default {
title: "Tabs",
component: "Tabs",
@@ -121,9 +122,7 @@ export default {
},
packageJson,
metadata,
- status: {
- type: "migrated",
- },
+ cssprops: metadata.modifiers,
},
tags: ["migrated"],
};
diff --git a/components/tag/CHANGELOG.md b/components/tag/CHANGELOG.md
index fa41b7d1f81..f26a00bffaa 100644
--- a/components/tag/CHANGELOG.md
+++ b/components/tag/CHANGELOG.md
@@ -5,7 +5,6 @@
### Major Changes
- [#3682](https://github.com/adobe/spectrum-css/pull/3682) [`6d53893`](https://github.com/adobe/spectrum-css/commit/6d5389364504bc8373212276651055aa6c51bb76) Thanks [@rise-erpelding](https://github.com/rise-erpelding)! - Tag now uses Spectrum 2 tokens and specifications:
-
- The invalid variant has been removed, tag errors are now displayed with help text within the tag group only.
- Borders remain in high contrast but are otherwise transparent.
- Thumbnail has been added as a visual option.
@@ -17,7 +16,6 @@
- Emphasized tags have accent coloring only when they are selected.
Changed mods:
-
- "--mod-tag-avatar-spacing-inline-end" --> "--mod-tag-visual-spacing-inline-end",
- "--mod-tag-icon-spacing-inline-end" --> "--mod-tag-visual-spacing-inline-end",
- "--mod-tag-spacing-inline-start" --> "--mod-tag-label-spacing-inline",
@@ -26,7 +24,6 @@
- "--mod-tag-clear-button-spacing-inline-end" --> "--mod-tag-edge-to-clear-icon"
Added mods:
-
- "--mod-tag-avatar-size",
- "--mod-tag-clear-button-size",
- "--mod-tag-label-font-family",
@@ -38,7 +35,6 @@
- "--mod-tag-visual-spacing-inline-start"
Removed mods:
-
- "--mod-tag-background-color-invalid-selected",
- "--mod-tag-background-color-invalid-selected-active",
- "--mod-tag-background-color-invalid-selected-focus",
diff --git a/components/tag/dist/metadata.json b/components/tag/dist/metadata.json
index e4503014031..4187040fdd0 100644
--- a/components/tag/dist/metadata.json
+++ b/components/tag/dist/metadata.json
@@ -9,6 +9,13 @@
".spectrum-Tag .spectrum-Thumbnail",
".spectrum-Tag--sizeL",
".spectrum-Tag--sizeM",
+ ".spectrum-Tag:lang(ja)",
+ ".spectrum-Tag:lang(ko)",
+ ".spectrum-Tag:lang(zh)",
+ ".spectrum-Tag:not(.is-disabled, .is-readOnly):active",
+ ".spectrum-Tag:not(.is-disabled, .is-readOnly):focus-visible",
+ ".spectrum-Tag:not(.is-disabled, .is-readOnly):focus-visible:after",
+ ".spectrum-Tag:not(.is-disabled, .is-readOnly):hover",
".spectrum-Tag.is-disabled",
".spectrum-Tag.is-disabled .spectrum-Avatar",
".spectrum-Tag.is-disabled .spectrum-Thumbnail",
@@ -16,247 +23,1235 @@
".spectrum-Tag.is-selected:not(.is-disabled, .is-readOnly)",
".spectrum-Tag.spectrum-Tag--emphasized",
".spectrum-Tag.spectrum-Tag--emphasized.is-selected:not(.is-disabled, .is-readOnly)",
- ".spectrum-Tag.spectrum-Tag.is-disabled",
- ".spectrum-Tag:lang(ja)",
- ".spectrum-Tag:lang(ko)",
- ".spectrum-Tag:lang(zh)",
- ".spectrum-Tag:not(.is-disabled, .is-readOnly):active",
- ".spectrum-Tag:not(.is-disabled, .is-readOnly):focus-visible",
- ".spectrum-Tag:not(.is-disabled, .is-readOnly):focus-visible:after",
- ".spectrum-Tag:not(.is-disabled, .is-readOnly):hover"
- ],
- "modifiers": [
- "--mod-tag-animation-duration",
- "--mod-tag-avatar-size",
- "--mod-tag-avatar-spacing-block-end",
- "--mod-tag-avatar-spacing-block-start",
- "--mod-tag-background-color",
- "--mod-tag-background-color-active",
- "--mod-tag-background-color-disabled",
- "--mod-tag-background-color-emphasized",
- "--mod-tag-background-color-emphasized-active",
- "--mod-tag-background-color-emphasized-focus",
- "--mod-tag-background-color-emphasized-hover",
- "--mod-tag-background-color-focus",
- "--mod-tag-background-color-hover",
- "--mod-tag-background-color-selected",
- "--mod-tag-background-color-selected-active",
- "--mod-tag-background-color-selected-focus",
- "--mod-tag-background-color-selected-hover",
- "--mod-tag-border-color",
- "--mod-tag-border-color-active",
- "--mod-tag-border-color-disabled",
- "--mod-tag-border-color-emphasized",
- "--mod-tag-border-color-focus",
- "--mod-tag-border-color-hover",
- "--mod-tag-border-color-selected",
- "--mod-tag-border-width",
- "--mod-tag-clear-button-size",
- "--mod-tag-clear-button-spacing-block",
- "--mod-tag-content-color",
- "--mod-tag-content-color-active",
- "--mod-tag-content-color-disabled",
- "--mod-tag-content-color-emphasized",
- "--mod-tag-content-color-focus",
- "--mod-tag-content-color-hover",
- "--mod-tag-content-color-selected",
- "--mod-tag-corner-radius",
- "--mod-tag-edge-to-clear-icon",
- "--mod-tag-focus-ring-color",
- "--mod-tag-focus-ring-gap",
- "--mod-tag-focus-ring-thickness",
- "--mod-tag-font-size",
- "--mod-tag-height",
- "--mod-tag-icon-size",
- "--mod-tag-icon-spacing-block-end",
- "--mod-tag-icon-spacing-block-start",
- "--mod-tag-label-font-family",
- "--mod-tag-label-font-style",
- "--mod-tag-label-font-weight",
- "--mod-tag-label-line-height",
- "--mod-tag-label-line-height-cjk",
- "--mod-tag-label-spacing-block",
- "--mod-tag-label-spacing-inline",
- "--mod-tag-label-to-clear-icon",
- "--mod-tag-maximum-width-multiplier",
- "--mod-tag-min-inline-size",
- "--mod-tag-thumbnail-size",
- "--mod-tag-visual-spacing-inline-end",
- "--mod-tag-visual-spacing-inline-start"
- ],
- "component": [
- "--spectrum-tag-animation-duration",
- "--spectrum-tag-avatar-size",
- "--spectrum-tag-avatar-spacing-block-end",
- "--spectrum-tag-avatar-spacing-block-start",
- "--spectrum-tag-background-color",
- "--spectrum-tag-background-color-active",
- "--spectrum-tag-background-color-focus",
- "--spectrum-tag-background-color-hover",
- "--spectrum-tag-border-color",
- "--spectrum-tag-border-color-active",
- "--spectrum-tag-border-color-focus",
- "--spectrum-tag-border-color-hover",
- "--spectrum-tag-border-width",
- "--spectrum-tag-clear-button-size",
- "--spectrum-tag-clear-button-spacing-block",
- "--spectrum-tag-content-color",
- "--spectrum-tag-content-color-active",
- "--spectrum-tag-content-color-focus",
- "--spectrum-tag-content-color-hover",
- "--spectrum-tag-corner-radius",
- "--spectrum-tag-edge-to-clear-icon",
- "--spectrum-tag-edge-to-clear-icon-large",
- "--spectrum-tag-edge-to-clear-icon-medium",
- "--spectrum-tag-edge-to-clear-icon-small",
- "--spectrum-tag-focus-ring-color",
- "--spectrum-tag-focus-ring-gap",
- "--spectrum-tag-focus-ring-thickness",
- "--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-label-font-family",
- "--spectrum-tag-label-font-style",
- "--spectrum-tag-label-font-weight",
- "--spectrum-tag-label-line-height",
- "--spectrum-tag-label-line-height-cjk",
- "--spectrum-tag-label-spacing-block",
- "--spectrum-tag-label-spacing-inline",
- "--spectrum-tag-label-to-clear-icon",
- "--spectrum-tag-label-to-clear-icon-large",
- "--spectrum-tag-label-to-clear-icon-medium",
- "--spectrum-tag-label-to-clear-icon-small",
- "--spectrum-tag-maximum-width-multiplier",
- "--spectrum-tag-min-inline-size",
- "--spectrum-tag-minimum-width-large",
- "--spectrum-tag-minimum-width-medium",
- "--spectrum-tag-minimum-width-small",
- "--spectrum-tag-thumbnail-size",
- "--spectrum-tag-top-to-avatar-large",
- "--spectrum-tag-top-to-avatar-medium",
- "--spectrum-tag-top-to-avatar-small",
- "--spectrum-tag-top-to-cross-icon-large",
- "--spectrum-tag-top-to-cross-icon-medium",
- "--spectrum-tag-top-to-cross-icon-small",
- "--spectrum-tag-visual-spacing-inline-end",
- "--spectrum-tag-visual-spacing-inline-start"
- ],
- "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-avatar-size-100",
- "--spectrum-avatar-size-50",
- "--spectrum-avatar-size-75",
- "--spectrum-border-width-100",
- "--spectrum-cjk-line-height-100",
- "--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-size-difference-down",
- "--spectrum-component-size-width-ratio-down",
- "--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-medium-size-large",
- "--spectrum-corner-radius-medium-size-medium",
- "--spectrum-corner-radius-medium-size-small",
- "--spectrum-cross-icon-size-100",
- "--spectrum-cross-icon-size-200",
- "--spectrum-cross-icon-size-75",
- "--spectrum-default-font-style",
- "--spectrum-disabled-background-color",
- "--spectrum-disabled-content-color",
- "--spectrum-downstate-height",
- "--spectrum-downstate-width",
- "--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-25",
- "--spectrum-line-height-100",
- "--spectrum-medium-font-weight",
- "--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-sans-font-family-stack",
- "--spectrum-text-to-visual-100",
- "--spectrum-text-to-visual-200",
- "--spectrum-text-to-visual-75",
- "--spectrum-thumbnail-opacity-disabled",
- "--spectrum-thumbnail-size-100",
- "--spectrum-thumbnail-size-50",
- "--spectrum-thumbnail-size-75",
- "--spectrum-white",
- "--spectrum-workflow-icon-size-100",
- "--spectrum-workflow-icon-size-200",
- "--spectrum-workflow-icon-size-75"
- ],
- "passthroughs": [
- "--mod-avatar-block-size",
- "--mod-avatar-inline-size",
- "--mod-avatar-opacity-disabled",
- "--mod-clear-button-background-color",
- "--mod-clear-button-height",
- "--mod-clear-button-icon-color",
- "--mod-clear-button-icon-color-hover",
- "--mod-clear-button-icon-color-key-focus",
- "--mod-clear-button-width",
- "--mod-icon-size",
- "--mod-thumbnail-opacity-disabled",
- "--mod-thumbnail-size"
+ ".spectrum-Tag.spectrum-Tag.is-disabled"
],
- "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-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-focus",
- "--highcontrast-tag-border-color-hover",
- "--highcontrast-tag-border-color-selected",
- "--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-selected",
- "--highcontrast-tag-focus-ring-color"
- ]
+ "modifiers": {
+ "mod-tag-border-color": {
+ "description": "Used by `--spectrum-tag-border-color`.",
+ "control": "color",
+ "category": "Modifier"
+ },
+ "mod-tag-border-color-hover": {
+ "description": "Used by `--spectrum-tag-border-color-hover`.",
+ "control": "color",
+ "category": "Modifier"
+ },
+ "mod-tag-border-color-active": {
+ "description": "Used by `--spectrum-tag-border-color-active`.",
+ "control": "color",
+ "category": "Modifier"
+ },
+ "mod-tag-border-color-focus": {
+ "description": "Used by `--spectrum-tag-border-color-focus`.",
+ "control": "color",
+ "category": "Modifier"
+ },
+ "mod-tag-background-color": {
+ "description": "Used by `--spectrum-tag-background-color`.
Defaults to `var(--spectrum-gray-100)`, if not set.",
+ "control": "color",
+ "category": "Modifier"
+ },
+ "mod-tag-background-color-hover": {
+ "description": "Used by `--spectrum-tag-background-color-hover`.
Defaults to `var(--spectrum-gray-200)`, if not set.",
+ "control": "color",
+ "category": "Modifier"
+ },
+ "mod-tag-background-color-active": {
+ "description": "Used by `--spectrum-tag-background-color-active`.
Defaults to `var(--spectrum-gray-200)`, if not set.",
+ "control": "color",
+ "category": "Modifier"
+ },
+ "mod-tag-background-color-focus": {
+ "description": "Used by `--spectrum-tag-background-color-focus`.
Defaults to `var(--spectrum-gray-200)`, if not set.",
+ "control": "color",
+ "category": "Modifier"
+ },
+ "mod-tag-content-color": {
+ "description": "Used by `--spectrum-tag-content-color`.
Defaults to `var(--spectrum-neutral-content-color-default)`, if not set.",
+ "control": "color",
+ "category": "Modifier"
+ },
+ "mod-tag-content-color-hover": {
+ "description": "Used by `--spectrum-tag-content-color-hover`.
Defaults to `var(--spectrum-neutral-content-color-hover)`, if not set.",
+ "control": "color",
+ "category": "Modifier"
+ },
+ "mod-tag-content-color-active": {
+ "description": "Used by `--spectrum-tag-content-color-active`.
Defaults to `var(--spectrum-neutral-content-color-down)`, if not set.",
+ "control": "color",
+ "category": "Modifier"
+ },
+ "mod-tag-content-color-focus": {
+ "description": "Used by `--spectrum-tag-content-color-focus`.
Defaults to `var(--spectrum-neutral-content-color-key-focus)`, if not set.",
+ "control": "color",
+ "category": "Modifier"
+ },
+ "mod-tag-focus-ring-color": {
+ "description": "Used by `--spectrum-tag-focus-ring-color`.
Defaults to `var(--spectrum-focus-indicator-color)`, if not set.",
+ "control": "color",
+ "category": "Modifier"
+ },
+ "mod-tag-avatar-size": {
+ "description": "Used by `--mod-avatar-inline-size`, `--mod-avatar-block-size`.
Defaults to `var(--spectrum-tag-avatar-size)`, if not set.",
+ "control": "text",
+ "category": "Modifier"
+ },
+ "mod-tag-thumbnail-size": {
+ "description": "Used by `--mod-thumbnail-size`.
Defaults to `var(--spectrum-tag-thumbnail-size)`, if not set.",
+ "control": "text",
+ "category": "Modifier"
+ },
+ "mod-tag-clear-button-size": {
+ "description": "Used by `--mod-icon-size`, `--mod-clear-button-width`, `--mod-clear-button-height`.
Defaults to `var(--spectrum-tag-clear-button-size)`, if not set.",
+ "control": "text",
+ "category": "Modifier"
+ },
+ "mod-tag-label-to-clear-icon": {
+ "description": "Used by `--mod-clear-button-width`.
Defaults to `var(--spectrum-tag-label-to-clear-icon)`, if not set.",
+ "control": "text",
+ "category": "Modifier"
+ },
+ "mod-tag-edge-to-clear-icon": {
+ "description": "Used by `--mod-clear-button-width`.
Defaults to `var(--spectrum-tag-edge-to-clear-icon)`, if not set.",
+ "control": "text",
+ "category": "Modifier"
+ },
+ "mod-tag-clear-button-spacing-block": {
+ "description": "Used by `--mod-clear-button-height`.
Defaults to `var(--spectrum-tag-clear-button-spacing-block)`, if not set.",
+ "control": "text",
+ "category": "Modifier"
+ },
+ "mod-tag-label-line-height": {
+ "description": "Defined in `.spectrum-Tag:lang(ja), .spectrum-Tag:lang(ko), .spectrum-Tag:lang(zh)`.
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-line-height-cjk": {
+ "description": "Used by `--mod-tag-label-line-height`.
Defaults to `var(--spectrum-tag-label-line-height-cjk)`, if not set.",
+ "control": "text",
+ "category": "Modifier"
+ },
+ "mod-tag-border-color-selected": {
+ "description": "Used by `--spectrum-tag-border-color`, `--spectrum-tag-border-color-hover`, `--spectrum-tag-border-color-active`, `--spectrum-tag-border-color-focus`.",
+ "control": "color",
+ "category": "Modifier"
+ },
+ "mod-tag-background-color-selected": {
+ "description": "Used by `--spectrum-tag-background-color`.
Defaults to `var(--spectrum-neutral-background-color-default)`, if not set.",
+ "control": "color",
+ "category": "Modifier"
+ },
+ "mod-tag-content-color-selected": {
+ "description": "Used by `--spectrum-tag-content-color`, `--spectrum-tag-content-color-hover`, `--spectrum-tag-content-color-active`, `--spectrum-tag-content-color-focus`.
Defaults to `var(--spectrum-gray-25)`, if not set.",
+ "control": "color",
+ "category": "Modifier"
+ },
+ "mod-tag-background-color-selected-hover": {
+ "description": "Used by `--spectrum-tag-background-color-hover`.
Defaults to `var(--spectrum-neutral-background-color-hover)`, if not set.",
+ "control": "color",
+ "category": "Modifier"
+ },
+ "mod-tag-background-color-selected-active": {
+ "description": "Used by `--spectrum-tag-background-color-active`.
Defaults to `var(--spectrum-neutral-background-color-down)`, if not set.",
+ "control": "color",
+ "category": "Modifier"
+ },
+ "mod-tag-background-color-selected-focus": {
+ "description": "Used by `--spectrum-tag-background-color-focus`.
Defaults to `var(--spectrum-neutral-background-color-key-focus)`, if not set.",
+ "control": "color",
+ "category": "Modifier"
+ },
+ "mod-tag-border-color-emphasized": {
+ "description": "Used by `--spectrum-tag-border-color`, `--spectrum-tag-border-color-hover`, `--spectrum-tag-border-color-active`, `--spectrum-tag-border-color-focus`.",
+ "control": "color",
+ "category": "Modifier"
+ },
+ "mod-tag-background-color-emphasized": {
+ "description": "Used by `--spectrum-tag-background-color`.
Defaults to `var(--spectrum-accent-background-color-default)`, if not set.",
+ "control": "color",
+ "category": "Modifier"
+ },
+ "mod-tag-content-color-emphasized": {
+ "description": "Used by `--spectrum-tag-content-color`, `--spectrum-tag-content-color-hover`, `--spectrum-tag-content-color-active`, `--spectrum-tag-content-color-focus`.
Defaults to `var(--spectrum-white)`, if not set.",
+ "control": "color",
+ "category": "Modifier"
+ },
+ "mod-tag-background-color-emphasized-hover": {
+ "description": "Used by `--spectrum-tag-background-color-hover`.
Defaults to `var(--spectrum-accent-background-color-hover)`, if not set.",
+ "control": "color",
+ "category": "Modifier"
+ },
+ "mod-tag-background-color-emphasized-active": {
+ "description": "Used by `--spectrum-tag-background-color-active`.
Defaults to `var(--spectrum-accent-background-color-down)`, if not set.",
+ "control": "color",
+ "category": "Modifier"
+ },
+ "mod-tag-background-color-emphasized-focus": {
+ "description": "Used by `--spectrum-tag-background-color-focus`.
Defaults to `var(--spectrum-accent-background-color-key-focus)`, if not set.",
+ "control": "color",
+ "category": "Modifier"
+ },
+ "mod-tag-border-color-disabled": {
+ "description": "Used by `--spectrum-tag-border-color`.",
+ "control": "color",
+ "category": "Modifier"
+ },
+ "mod-tag-background-color-disabled": {
+ "description": "Used by `--spectrum-tag-background-color`.
Defaults to `var(--spectrum-disabled-background-color)`, if not set.",
+ "control": "color",
+ "category": "Modifier"
+ },
+ "mod-tag-content-color-disabled": {
+ "description": "Used by `--spectrum-tag-content-color`.
Defaults to `var(--spectrum-disabled-content-color)`, if not set.",
+ "control": "color",
+ "category": "Modifier"
+ },
+ "mod-tag-corner-radius": {
+ "description": "Used by `.spectrum-Tag`, `.spectrum-Tag:not(.is-disabled, .is-readOnly):focus-visible:after`.
Defaults to `var(--spectrum-tag-corner-radius)`, if not set.",
+ "control": "text",
+ "category": "Modifier"
+ },
+ "mod-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:not(.is-disabled, .is-readOnly):focus-visible:after`.
Defaults to `var(--spectrum-tag-border-width)`, if not set.",
+ "control": "text",
+ "category": "Modifier"
+ },
+ "mod-tag-label-spacing-inline": {
+ "description": "Used by `.spectrum-Tag`, `.spectrum-Tag .spectrum-Avatar, .spectrum-Tag .spectrum-Tag-itemIcon, .spectrum-Tag .spectrum-Thumbnail`, `.spectrum-Tag .spectrum-Tag-clearButton`, `.spectrum-Tag .spectrum-Tag-itemLabel`.
Defaults to `var(--spectrum-tag-label-spacing-inline)`, if not set.",
+ "control": "text",
+ "category": "Modifier"
+ },
+ "mod-tag-height": {
+ "description": "Used by `.spectrum-Tag`.
Defaults to `var(--spectrum-tag-height)`, if not set.",
+ "control": "text",
+ "category": "Modifier"
+ },
+ "mod-tag-min-inline-size": {
+ "description": "Used by `.spectrum-Tag`.
Defaults to `var(--spectrum-tag-min-inline-size)`, if not set.",
+ "control": "text",
+ "category": "Modifier"
+ },
+ "mod-tag-maximum-width-multiplier": {
+ "description": "Used by `.spectrum-Tag`.
Defaults to `var(--spectrum-tag-maximum-width-multiplier)`, if not set.",
+ "control": "text",
+ "category": "Modifier"
+ },
+ "mod-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": {
+ "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": {
+ "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": {
+ "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-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": {
+ "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-visual-spacing-inline-start": {
+ "description": "Used by `.spectrum-Tag .spectrum-Avatar, .spectrum-Tag .spectrum-Tag-itemIcon, .spectrum-Tag .spectrum-Thumbnail`.
Defaults to `var(--spectrum-tag-visual-spacing-inline-start)`, if not set.",
+ "control": "text",
+ "category": "Modifier"
+ },
+ "mod-tag-visual-spacing-inline-end": {
+ "description": "Used by `.spectrum-Tag .spectrum-Avatar, .spectrum-Tag .spectrum-Tag-itemIcon, .spectrum-Tag .spectrum-Thumbnail`.
Defaults to `var(--spectrum-tag-visual-spacing-inline-end)`, if not set.",
+ "control": "text",
+ "category": "Modifier"
+ },
+ "mod-tag-label-font-family": {
+ "description": "Used by `.spectrum-Tag .spectrum-Tag-itemLabel`.
Defaults to `var(--spectrum-tag-label-font-family)`, if not set.",
+ "control": "text",
+ "category": "Modifier"
+ },
+ "mod-tag-label-font-style": {
+ "description": "Used by `.spectrum-Tag .spectrum-Tag-itemLabel`.
Defaults to `var(--spectrum-tag-label-font-style)`, if not set.",
+ "control": "text",
+ "category": "Modifier"
+ },
+ "mod-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": {
+ "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": {
+ "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-focus-ring-gap": {
+ "description": "Used by `.spectrum-Tag:not(.is-disabled, .is-readOnly):focus-visible:after`.
Defaults to `var(--spectrum-tag-focus-ring-gap)`, if not set.",
+ "control": "text",
+ "category": "Modifier"
+ },
+ "mod-tag-focus-ring-thickness": {
+ "description": "Used by `.spectrum-Tag:not(.is-disabled, .is-readOnly):focus-visible:after`.
Defaults to `var(--spectrum-tag-focus-ring-thickness)`, if not set.",
+ "control": "text",
+ "category": "Modifier"
+ }
+ },
+ "component": {
+ "spectrum-tag-animation-duration": {
+ "value": "var(--spectrum-animation-duration-100)",
+ "description": "Defined in `.spectrum-Tag`.
Used by `.spectrum-Tag`.
Defaults to `var(--spectrum-animation-duration-100)`, if not set.",
+ "control": "text",
+ "category": "Component"
+ },
+ "spectrum-tag-border-width": {
+ "value": "1px",
+ "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:not(.is-disabled, .is-readOnly):focus-visible:after`.
Defaults to `var(--spectrum-border-width-100)`, if not set.",
+ "control": "text",
+ "category": "Component"
+ },
+ "spectrum-tag-border-color": {
+ "value": "var(--highcontrast-tag-border-color-disabled, var(--mod-tag-border-color-disabled, transparent))",
+ "description": "Defined in `.spectrum-Tag`, `.spectrum-Tag.is-selected:not(.is-disabled, .is-readOnly)`, `.spectrum-Tag.spectrum-Tag--emphasized.is-selected:not(.is-disabled, .is-readOnly)`, `.spectrum-Tag.spectrum-Tag.is-disabled`.
Used by `.spectrum-Tag`.
Defaults to `var(--highcontrast-tag-border-color-disabled, var(--mod-tag-border-color-disabled, transparent))`, if not set.",
+ "control": "color",
+ "category": "Component"
+ },
+ "spectrum-tag-border-color-hover": {
+ "value": "var(--highcontrast-tag-border-color-emphasized, var(--mod-tag-border-color-emphasized, transparent))",
+ "description": "Defined in `.spectrum-Tag`, `.spectrum-Tag.is-selected:not(.is-disabled, .is-readOnly)`, `.spectrum-Tag.spectrum-Tag--emphasized.is-selected:not(.is-disabled, .is-readOnly)`.
Used by `.spectrum-Tag:not(.is-disabled, .is-readOnly):hover`.
Defaults to `var(--highcontrast-tag-border-color-emphasized, var(--mod-tag-border-color-emphasized, transparent))`, if not set.",
+ "control": "color",
+ "category": "Component"
+ },
+ "spectrum-tag-border-color-active": {
+ "value": "var(--highcontrast-tag-border-color-emphasized, var(--mod-tag-border-color-emphasized, transparent))",
+ "description": "Defined in `.spectrum-Tag`, `.spectrum-Tag.is-selected:not(.is-disabled, .is-readOnly)`, `.spectrum-Tag.spectrum-Tag--emphasized.is-selected:not(.is-disabled, .is-readOnly)`.
Used by `.spectrum-Tag:not(.is-disabled, .is-readOnly):active`.
Defaults to `var(--highcontrast-tag-border-color-emphasized, var(--mod-tag-border-color-emphasized, transparent))`, if not set.",
+ "control": "color",
+ "category": "Component"
+ },
+ "spectrum-tag-border-color-focus": {
+ "value": "var(--highcontrast-tag-border-color-emphasized, var(--mod-tag-border-color-emphasized, transparent))",
+ "description": "Defined in `.spectrum-Tag`, `.spectrum-Tag.is-selected:not(.is-disabled, .is-readOnly)`, `.spectrum-Tag.spectrum-Tag--emphasized.is-selected:not(.is-disabled, .is-readOnly)`.
Used by `.spectrum-Tag:not(.is-disabled, .is-readOnly):focus-visible`.
Defaults to `var(--highcontrast-tag-border-color-emphasized, var(--mod-tag-border-color-emphasized, transparent))`, if not set.",
+ "control": "color",
+ "category": "Component"
+ },
+ "spectrum-tag-background-color": {
+ "value": "var(--highcontrast-tag-background-color-disabled, var(--mod-tag-background-color-disabled, var(--spectrum-disabled-background-color)))",
+ "description": "Defined in `.spectrum-Tag`, `.spectrum-Tag.is-selected:not(.is-disabled, .is-readOnly)`, `.spectrum-Tag.spectrum-Tag--emphasized.is-selected:not(.is-disabled, .is-readOnly)`, `.spectrum-Tag.spectrum-Tag.is-disabled`.
Used by `.spectrum-Tag`.
Defaults to `var(--highcontrast-tag-background-color-disabled, var(--mod-tag-background-color-disabled, var(--spectrum-disabled-background-color)))`, if not set.",
+ "control": "color",
+ "category": "Component"
+ },
+ "spectrum-tag-background-color-hover": {
+ "value": "var(--highcontrast-tag-background-color-emphasized-hover, var(--mod-tag-background-color-emphasized-hover, var(--spectrum-accent-background-color-hover)))",
+ "description": "Defined in `.spectrum-Tag`, `.spectrum-Tag.is-selected:not(.is-disabled, .is-readOnly)`, `.spectrum-Tag.spectrum-Tag--emphasized.is-selected:not(.is-disabled, .is-readOnly)`.
Used by `.spectrum-Tag:not(.is-disabled, .is-readOnly):hover`.
Defaults to `var(--highcontrast-tag-background-color-emphasized-hover, var(--mod-tag-background-color-emphasized-hover, var(--spectrum-accent-background-color-hover)))`, if not set.",
+ "control": "color",
+ "category": "Component"
+ },
+ "spectrum-tag-background-color-active": {
+ "value": "var(--highcontrast-tag-background-color-emphasized-active, var(--mod-tag-background-color-emphasized-active, var(--spectrum-accent-background-color-down)))",
+ "description": "Defined in `.spectrum-Tag`, `.spectrum-Tag.is-selected:not(.is-disabled, .is-readOnly)`, `.spectrum-Tag.spectrum-Tag--emphasized.is-selected:not(.is-disabled, .is-readOnly)`.
Used by `.spectrum-Tag:not(.is-disabled, .is-readOnly):active`.
Defaults to `var(--highcontrast-tag-background-color-emphasized-active, var(--mod-tag-background-color-emphasized-active, var(--spectrum-accent-background-color-down)))`, if not set.",
+ "control": "color",
+ "category": "Component"
+ },
+ "spectrum-tag-background-color-focus": {
+ "value": "var(--highcontrast-tag-background-color-emphasized-focus, var(--mod-tag-background-color-emphasized-focus, var(--spectrum-accent-background-color-key-focus)))",
+ "description": "Defined in `.spectrum-Tag`, `.spectrum-Tag.is-selected:not(.is-disabled, .is-readOnly)`, `.spectrum-Tag.spectrum-Tag--emphasized.is-selected:not(.is-disabled, .is-readOnly)`.
Used by `.spectrum-Tag:not(.is-disabled, .is-readOnly):focus-visible`.
Defaults to `var(--highcontrast-tag-background-color-emphasized-focus, var(--mod-tag-background-color-emphasized-focus, var(--spectrum-accent-background-color-key-focus)))`, if not set.",
+ "control": "color",
+ "category": "Component"
+ },
+ "spectrum-tag-content-color": {
+ "value": "var(--highcontrast-tag-content-color-disabled, var(--mod-tag-content-color-disabled, var(--spectrum-disabled-content-color)))",
+ "description": "Defined in `.spectrum-Tag`, `.spectrum-Tag.is-selected:not(.is-disabled, .is-readOnly)`, `.spectrum-Tag.spectrum-Tag--emphasized.is-selected:not(.is-disabled, .is-readOnly)`, `.spectrum-Tag.spectrum-Tag.is-disabled`.
Used by `.spectrum-Tag`.
Defaults to `var(--highcontrast-tag-content-color-disabled, var(--mod-tag-content-color-disabled, var(--spectrum-disabled-content-color)))`, if not set.",
+ "control": "color",
+ "category": "Component"
+ },
+ "spectrum-tag-content-color-hover": {
+ "value": "var(--highcontrast-tag-content-color-emphasized, var(--mod-tag-content-color-emphasized, var(--spectrum-white)))",
+ "description": "Defined in `.spectrum-Tag`, `.spectrum-Tag.is-selected:not(.is-disabled, .is-readOnly)`, `.spectrum-Tag.spectrum-Tag--emphasized.is-selected:not(.is-disabled, .is-readOnly)`.
Used by `.spectrum-Tag:not(.is-disabled, .is-readOnly):hover`.
Defaults to `var(--highcontrast-tag-content-color-emphasized, var(--mod-tag-content-color-emphasized, var(--spectrum-white)))`, if not set.",
+ "control": "color",
+ "category": "Component"
+ },
+ "spectrum-tag-content-color-active": {
+ "value": "var(--highcontrast-tag-content-color-emphasized, var(--mod-tag-content-color-emphasized, var(--spectrum-white)))",
+ "description": "Defined in `.spectrum-Tag`, `.spectrum-Tag.is-selected:not(.is-disabled, .is-readOnly)`, `.spectrum-Tag.spectrum-Tag--emphasized.is-selected:not(.is-disabled, .is-readOnly)`.
Used by `.spectrum-Tag:not(.is-disabled, .is-readOnly):active`.
Defaults to `var(--highcontrast-tag-content-color-emphasized, var(--mod-tag-content-color-emphasized, var(--spectrum-white)))`, if not set.",
+ "control": "color",
+ "category": "Component"
+ },
+ "spectrum-tag-content-color-focus": {
+ "value": "var(--highcontrast-tag-content-color-emphasized, var(--mod-tag-content-color-emphasized, var(--spectrum-white)))",
+ "description": "Defined in `.spectrum-Tag`, `.spectrum-Tag.is-selected:not(.is-disabled, .is-readOnly)`, `.spectrum-Tag.spectrum-Tag--emphasized.is-selected:not(.is-disabled, .is-readOnly)`.
Used by `.spectrum-Tag:not(.is-disabled, .is-readOnly):focus-visible`.
Defaults to `var(--highcontrast-tag-content-color-emphasized, var(--mod-tag-content-color-emphasized, var(--spectrum-white)))`, if not set.",
+ "control": "color",
+ "category": "Component"
+ },
+ "spectrum-tag-focus-ring-thickness": {
+ "value": "2px",
+ "description": "Defined in `.spectrum-Tag`.
Used by `.spectrum-Tag:not(.is-disabled, .is-readOnly):focus-visible:after`.
Defaults to `var(--spectrum-focus-indicator-thickness)`, if not set.",
+ "control": "text",
+ "category": "Component"
+ },
+ "spectrum-tag-focus-ring-gap": {
+ "value": "2px",
+ "description": "Defined in `.spectrum-Tag`.
Used by `.spectrum-Tag:not(.is-disabled, .is-readOnly):focus-visible:after`.
Defaults to `var(--spectrum-focus-indicator-gap)`, if not set.",
+ "control": "text",
+ "category": "Component"
+ },
+ "spectrum-tag-focus-ring-color": {
+ "value": "var(--highcontrast-tag-focus-ring-color, var(--mod-tag-focus-ring-color, var(--spectrum-focus-indicator-color)))",
+ "description": "Defined in `.spectrum-Tag`.
Used by `.spectrum-Tag:not(.is-disabled, .is-readOnly):focus-visible:after`.
Defaults to `var(--highcontrast-tag-focus-ring-color, var(--mod-tag-focus-ring-color, var(--spectrum-focus-indicator-color)))`, if not set.",
+ "control": "color",
+ "category": "Component"
+ },
+ "spectrum-tag-label-line-height": {
+ "value": "1.3",
+ "description": "Defined in `.spectrum-Tag`.
Used by `.spectrum-Tag .spectrum-Tag-itemLabel`.
Defaults to `var(--spectrum-line-height-100)`, if not set.",
+ "control": "text",
+ "category": "Component"
+ },
+ "spectrum-tag-label-line-height-cjk": {
+ "value": "1.5",
+ "description": "Defined in `.spectrum-Tag`.
Used by `--mod-tag-label-line-height`.
Defaults to `var(--spectrum-cjk-line-height-100)`, if not set.",
+ "control": "text",
+ "category": "Component"
+ },
+ "spectrum-tag-label-font-family": {
+ "value": "var(--spectrum-sans-font-family-stack)",
+ "description": "Defined in `.spectrum-Tag`.
Used by `.spectrum-Tag .spectrum-Tag-itemLabel`.
Defaults to `var(--spectrum-sans-font-family-stack)`, if not set.",
+ "control": "text",
+ "category": "Component"
+ },
+ "spectrum-tag-label-font-style": {
+ "value": "normal",
+ "description": "Defined in `.spectrum-Tag`.
Used by `.spectrum-Tag .spectrum-Tag-itemLabel`.
Defaults to `var(--spectrum-default-font-style)`, if not set.",
+ "control": "text",
+ "category": "Component"
+ },
+ "spectrum-tag-label-font-weight": {
+ "value": "500",
+ "description": "Defined in `.spectrum-Tag`.
Used by `.spectrum-Tag .spectrum-Tag-itemLabel`.
Defaults to `var(--spectrum-medium-font-weight)`, if not set.",
+ "control": "text",
+ "category": "Component"
+ },
+ "spectrum-tag-height": {
+ "value": "40px",
+ "description": "Defined in `.spectrum-Tag`, `.spectrum-Tag--sizeM`, `.spectrum-Tag--sizeL`.
Used by `.spectrum-Tag`.
Defaults to `var(--spectrum-component-height-200)`, if not set.",
+ "control": "text",
+ "category": "Component"
+ },
+ "spectrum-tag-min-inline-size": {
+ "value": "33px",
+ "description": "Defined in `.spectrum-Tag`, `.spectrum-Tag--sizeM`, `.spectrum-Tag--sizeL`.
Used by `.spectrum-Tag`.
Defaults to `var(--spectrum-tag-minimum-width-large)`, if not set.",
+ "control": "text",
+ "category": "Component"
+ },
+ "spectrum-tag-minimum-width-small": {
+ "value": "21px",
+ "description": "Used by `--spectrum-tag-min-inline-size`.",
+ "control": "text",
+ "category": "Component"
+ },
+ "spectrum-tag-font-size": {
+ "value": "16px",
+ "description": "Defined in `.spectrum-Tag`, `.spectrum-Tag--sizeM`, `.spectrum-Tag--sizeL`.
Used by `.spectrum-Tag .spectrum-Tag-itemLabel`.
Defaults to `var(--spectrum-font-size-200)`, if not set.",
+ "control": "text",
+ "category": "Component"
+ },
+ "spectrum-tag-icon-size": {
+ "value": "22px",
+ "description": "Defined in `.spectrum-Tag`, `.spectrum-Tag--sizeM`, `.spectrum-Tag--sizeL`.
Used by `.spectrum-Tag .spectrum-Tag-itemIcon`.
Defaults to `var(--spectrum-workflow-icon-size-200)`, if not set.",
+ "control": "text",
+ "category": "Component"
+ },
+ "spectrum-tag-corner-radius": {
+ "value": "9px",
+ "description": "Defined in `.spectrum-Tag`, `.spectrum-Tag--sizeM`, `.spectrum-Tag--sizeL`.
Used by `.spectrum-Tag`, `.spectrum-Tag:not(.is-disabled, .is-readOnly):focus-visible:after`.
Defaults to `var(--spectrum-corner-radius-medium-size-large)`, if not set.",
+ "control": "text",
+ "category": "Component"
+ },
+ "spectrum-tag-clear-button-size": {
+ "value": "10px",
+ "description": "Defined in `.spectrum-Tag`, `.spectrum-Tag--sizeM`, `.spectrum-Tag--sizeL`.
Used by `--mod-icon-size`, `--mod-clear-button-width`, `--mod-clear-button-height`.
Defaults to `var(--spectrum-cross-icon-size-200)`, if not set.",
+ "control": "text",
+ "category": "Component"
+ },
+ "spectrum-tag-clear-button-spacing-block": {
+ "value": "15px",
+ "description": "Defined in `.spectrum-Tag`, `.spectrum-Tag--sizeM`, `.spectrum-Tag--sizeL`.
Used by `--mod-clear-button-height`.
Defaults to `var(--spectrum-tag-top-to-cross-icon-large)`, if not set.",
+ "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-label-to-clear-icon": {
+ "value": "15px",
+ "description": "Defined in `.spectrum-Tag`, `.spectrum-Tag--sizeM`, `.spectrum-Tag--sizeL`.
Used by `--mod-clear-button-width`.
Defaults to `var(--spectrum-tag-label-to-clear-icon-large)`, if not set.",
+ "control": "text",
+ "category": "Component"
+ },
+ "spectrum-tag-label-to-clear-icon-small": {
+ "value": "8px",
+ "description": "Used by `--spectrum-tag-label-to-clear-icon`.",
+ "control": "text",
+ "category": "Component"
+ },
+ "spectrum-tag-edge-to-clear-icon": {
+ "value": "15px",
+ "description": "Defined in `.spectrum-Tag`, `.spectrum-Tag--sizeM`, `.spectrum-Tag--sizeL`.
Used by `--mod-clear-button-width`.
Defaults to `var(--spectrum-tag-edge-to-clear-icon-large)`, if not set.",
+ "control": "text",
+ "category": "Component"
+ },
+ "spectrum-tag-edge-to-clear-icon-small": {
+ "value": "8px",
+ "description": "Used by `--spectrum-tag-edge-to-clear-icon`.",
+ "control": "text",
+ "category": "Component"
+ },
+ "spectrum-tag-visual-spacing-inline-start": {
+ "value": "13px",
+ "description": "Defined in `.spectrum-Tag`, `.spectrum-Tag--sizeM`, `.spectrum-Tag--sizeL`.
Used by `.spectrum-Tag .spectrum-Avatar, .spectrum-Tag .spectrum-Tag-itemIcon, .spectrum-Tag .spectrum-Thumbnail`.
Defaults to `var(--spectrum-component-edge-to-visual-200)`, if not set.",
+ "control": "text",
+ "category": "Component"
+ },
+ "spectrum-tag-visual-spacing-inline-end": {
+ "value": "7px",
+ "description": "Defined in `.spectrum-Tag`, `.spectrum-Tag--sizeM`, `.spectrum-Tag--sizeL`.
Used by `.spectrum-Tag .spectrum-Avatar, .spectrum-Tag .spectrum-Tag-itemIcon, .spectrum-Tag .spectrum-Thumbnail`.
Defaults to `var(--spectrum-text-to-visual-200)`, if not set.",
+ "control": "text",
+ "category": "Component"
+ },
+ "spectrum-tag-icon-spacing-block-start": {
+ "value": "9px",
+ "description": "Defined in `.spectrum-Tag`, `.spectrum-Tag--sizeM`, `.spectrum-Tag--sizeL`.
Used by `.spectrum-Tag .spectrum-Tag-itemIcon`.
Defaults to `var(--spectrum-component-top-to-workflow-icon-200)`, if not set.",
+ "control": "text",
+ "category": "Component"
+ },
+ "spectrum-tag-icon-spacing-block-end": {
+ "value": "9px",
+ "description": "Defined in `.spectrum-Tag`, `.spectrum-Tag--sizeM`, `.spectrum-Tag--sizeL`.
Used by `.spectrum-Tag .spectrum-Tag-itemIcon`.
Defaults to `var(--spectrum-component-top-to-workflow-icon-200)`, if not set.",
+ "control": "text",
+ "category": "Component"
+ },
+ "spectrum-tag-avatar-size": {
+ "value": "24px",
+ "description": "Defined in `.spectrum-Tag`, `.spectrum-Tag--sizeM`, `.spectrum-Tag--sizeL`.
Used by `--mod-avatar-inline-size`, `--mod-avatar-block-size`.
Defaults to `var(--spectrum-avatar-size-100)`, if not set.",
+ "control": "text",
+ "category": "Component"
+ },
+ "spectrum-tag-avatar-spacing-block-start": {
+ "value": "9px",
+ "description": "Defined in `.spectrum-Tag`, `.spectrum-Tag--sizeM`, `.spectrum-Tag--sizeL`.
Used by `.spectrum-Tag .spectrum-Avatar`.
Defaults to `var(--spectrum-tag-top-to-avatar-large)`, if not set.",
+ "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-avatar-spacing-block-end": {
+ "value": "9px",
+ "description": "Defined in `.spectrum-Tag`, `.spectrum-Tag--sizeM`, `.spectrum-Tag--sizeL`.
Used by `.spectrum-Tag .spectrum-Avatar`.
Defaults to `var(--spectrum-tag-top-to-avatar-large)`, if not set.",
+ "control": "text",
+ "category": "Component"
+ },
+ "spectrum-tag-thumbnail-size": {
+ "value": "24px",
+ "description": "Defined in `.spectrum-Tag`, `.spectrum-Tag--sizeM`, `.spectrum-Tag--sizeL`.
Used by `--mod-thumbnail-size`.
Defaults to `var(--spectrum-thumbnail-size-100)`, if not set.",
+ "control": "text",
+ "category": "Component"
+ },
+ "spectrum-tag-label-spacing-block": {
+ "value": "9px",
+ "description": "Defined in `.spectrum-Tag`, `.spectrum-Tag--sizeM`, `.spectrum-Tag--sizeL`.
Used by `.spectrum-Tag .spectrum-Tag-itemLabel`.
Defaults to `var(--spectrum-component-top-to-text-200)`, if not set.",
+ "control": "text",
+ "category": "Component"
+ },
+ "spectrum-tag-label-spacing-inline": {
+ "value": "15px",
+ "description": "Defined in `.spectrum-Tag`, `.spectrum-Tag--sizeM`, `.spectrum-Tag--sizeL`.
Used by `.spectrum-Tag`, `.spectrum-Tag .spectrum-Avatar, .spectrum-Tag .spectrum-Tag-itemIcon, .spectrum-Tag .spectrum-Thumbnail`, `.spectrum-Tag .spectrum-Tag-clearButton`, `.spectrum-Tag .spectrum-Tag-itemLabel`.
Defaults to `var(--spectrum-component-edge-to-text-200)`, if not set.",
+ "control": "text",
+ "category": "Component"
+ },
+ "spectrum-tag-minimum-width-medium": {
+ "value": "27px",
+ "description": "Used by `--spectrum-tag-min-inline-size`.",
+ "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-label-to-clear-icon-medium": {
+ "value": "12px",
+ "description": "Used by `--spectrum-tag-label-to-clear-icon`.",
+ "control": "text",
+ "category": "Component"
+ },
+ "spectrum-tag-edge-to-clear-icon-medium": {
+ "value": "12px",
+ "description": "Used by `--spectrum-tag-edge-to-clear-icon`.",
+ "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-minimum-width-large": {
+ "value": "33px",
+ "description": "Used by `--spectrum-tag-min-inline-size`.",
+ "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-label-to-clear-icon-large": {
+ "value": "15px",
+ "description": "Used by `--spectrum-tag-label-to-clear-icon`.",
+ "control": "text",
+ "category": "Component"
+ },
+ "spectrum-tag-edge-to-clear-icon-large": {
+ "value": "15px",
+ "description": "Used by `--spectrum-tag-edge-to-clear-icon`.",
+ "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-maximum-width-multiplier": {
+ "value": "7",
+ "description": "Used by `.spectrum-Tag`.",
+ "control": "text",
+ "category": "Component"
+ }
+ },
+ "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-gray-100": {
+ "value": "light-dark(rgb(233, 233, 233), rgb(44, 44, 44))",
+ "description": "Used by `--spectrum-tag-background-color`.",
+ "control": "text",
+ "category": "Global"
+ },
+ "spectrum-gray-200": {
+ "value": "light-dark(rgb(225, 225, 225), rgb(50, 50, 50))",
+ "description": "Used by `--spectrum-tag-background-color-hover`, `--spectrum-tag-background-color-active`, `--spectrum-tag-background-color-focus`.",
+ "control": "text",
+ "category": "Global"
+ },
+ "spectrum-neutral-content-color-default": {
+ "value": "var(--spectrum-gray-800)",
+ "description": "Used by `--spectrum-tag-content-color`.",
+ "control": "color",
+ "category": "Global"
+ },
+ "spectrum-neutral-content-color-hover": {
+ "value": "var(--spectrum-gray-900)",
+ "description": "Used by `--spectrum-tag-content-color-hover`.",
+ "control": "color",
+ "category": "Global"
+ },
+ "spectrum-neutral-content-color-down": {
+ "value": "var(--spectrum-gray-900)",
+ "description": "Used by `--spectrum-tag-content-color-active`.",
+ "control": "color",
+ "category": "Global"
+ },
+ "spectrum-neutral-content-color-key-focus": {
+ "value": "var(--spectrum-gray-900)",
+ "description": "Used by `--spectrum-tag-content-color-focus`.",
+ "control": "color",
+ "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-cjk-line-height-100": {
+ "value": "1.5",
+ "description": "Used by `--spectrum-tag-label-line-height-cjk`.",
+ "control": "text",
+ "category": "Global"
+ },
+ "spectrum-sans-font-family-stack": {
+ "description": "Used by `--spectrum-tag-label-font-family`.",
+ "control": "text",
+ "category": "Global"
+ },
+ "spectrum-default-font-style": {
+ "value": "normal",
+ "description": "Used by `--spectrum-tag-label-font-style`.",
+ "control": "text",
+ "category": "Global"
+ },
+ "spectrum-medium-font-weight": {
+ "value": "500",
+ "description": "Used by `--spectrum-tag-label-font-weight`.",
+ "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-corner-radius-medium-size-small": {
+ "value": "7px",
+ "description": "Used by `--spectrum-tag-corner-radius`.",
+ "control": "text",
+ "category": "Global"
+ },
+ "spectrum-cross-icon-size-75": {
+ "value": "8px",
+ "description": "Used by `--spectrum-tag-clear-button-size`.",
+ "control": "text",
+ "category": "Global"
+ },
+ "spectrum-component-edge-to-visual-75": {
+ "value": "7px",
+ "description": "Used by `--spectrum-tag-visual-spacing-inline-start`.",
+ "control": "text",
+ "category": "Global"
+ },
+ "spectrum-text-to-visual-75": {
+ "value": "5px",
+ "description": "Used by `--spectrum-tag-visual-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-avatar-size-50": {
+ "value": "16px",
+ "description": "Used by `--spectrum-tag-avatar-size`.",
+ "control": "text",
+ "category": "Global"
+ },
+ "spectrum-thumbnail-size-50": {
+ "value": "16px",
+ "description": "Used by `--spectrum-tag-thumbnail-size`.",
+ "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-edge-to-text-75": {
+ "value": "9px",
+ "description": "Used by `--spectrum-tag-label-spacing-inline`.",
+ "control": "text",
+ "category": "Global"
+ },
+ "spectrum-neutral-background-color-default": {
+ "value": "var(--spectrum-gray-800)",
+ "description": "Used by `--spectrum-tag-background-color`.",
+ "control": "color",
+ "category": "Global"
+ },
+ "spectrum-gray-25": {
+ "value": "light-dark(rgb(255, 255, 255), rgb(17, 17, 17))",
+ "description": "Used by `--spectrum-tag-content-color`, `--spectrum-tag-content-color-hover`, `--spectrum-tag-content-color-active`, `--spectrum-tag-content-color-focus`.",
+ "control": "text",
+ "category": "Global"
+ },
+ "spectrum-neutral-background-color-hover": {
+ "value": "var(--spectrum-gray-900)",
+ "description": "Used by `--spectrum-tag-background-color-hover`.",
+ "control": "color",
+ "category": "Global"
+ },
+ "spectrum-neutral-background-color-down": {
+ "value": "var(--spectrum-gray-900)",
+ "description": "Used by `--spectrum-tag-background-color-active`.",
+ "control": "color",
+ "category": "Global"
+ },
+ "spectrum-neutral-background-color-key-focus": {
+ "value": "var(--spectrum-gray-900)",
+ "description": "Used by `--spectrum-tag-background-color-focus`.",
+ "control": "color",
+ "category": "Global"
+ },
+ "spectrum-accent-background-color-default": {
+ "value": "var(--spectrum-accent-color-900)",
+ "description": "Used by `--spectrum-tag-background-color`.",
+ "control": "color",
+ "category": "Global"
+ },
+ "spectrum-white": {
+ "value": "rgb(255, 255, 255)",
+ "description": "Used by `--spectrum-tag-content-color`, `--spectrum-tag-content-color-hover`, `--spectrum-tag-content-color-active`, `--spectrum-tag-content-color-focus`.",
+ "control": "text",
+ "category": "Global"
+ },
+ "spectrum-accent-background-color-hover": {
+ "value": "var(--spectrum-accent-color-1000)",
+ "description": "Used by `--spectrum-tag-background-color-hover`.",
+ "control": "color",
+ "category": "Global"
+ },
+ "spectrum-accent-background-color-down": {
+ "value": "var(--spectrum-accent-color-1000)",
+ "description": "Used by `--spectrum-tag-background-color-active`.",
+ "control": "color",
+ "category": "Global"
+ },
+ "spectrum-accent-background-color-key-focus": {
+ "value": "var(--spectrum-accent-color-1000)",
+ "description": "Used by `--spectrum-tag-background-color-focus`.",
+ "control": "color",
+ "category": "Global"
+ },
+ "spectrum-disabled-background-color": {
+ "value": "var(--spectrum-gray-100)",
+ "description": "Used by `--spectrum-tag-background-color`.",
+ "control": "color",
+ "category": "Global"
+ },
+ "spectrum-disabled-content-color": {
+ "value": "var(--spectrum-gray-400)",
+ "description": "Used by `--spectrum-tag-content-color`.",
+ "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-corner-radius-medium-size-medium": {
+ "value": "8px",
+ "description": "Used by `--spectrum-tag-corner-radius`.",
+ "control": "text",
+ "category": "Global"
+ },
+ "spectrum-cross-icon-size-100": {
+ "value": "8px",
+ "description": "Used by `--spectrum-tag-clear-button-size`.",
+ "control": "text",
+ "category": "Global"
+ },
+ "spectrum-component-edge-to-visual-100": {
+ "value": "10px",
+ "description": "Used by `--spectrum-tag-visual-spacing-inline-start`.",
+ "control": "text",
+ "category": "Global"
+ },
+ "spectrum-text-to-visual-100": {
+ "value": "6px",
+ "description": "Used by `--spectrum-tag-visual-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-avatar-size-75": {
+ "value": "20px",
+ "description": "Used by `--spectrum-tag-avatar-size`.",
+ "control": "text",
+ "category": "Global"
+ },
+ "spectrum-thumbnail-size-75": {
+ "value": "20px",
+ "description": "Used by `--spectrum-tag-thumbnail-size`.",
+ "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-edge-to-text-100": {
+ "value": "12px",
+ "description": "Used by `--spectrum-tag-label-spacing-inline`.",
+ "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-corner-radius-medium-size-large": {
+ "value": "9px",
+ "description": "Used by `--spectrum-tag-corner-radius`.",
+ "control": "text",
+ "category": "Global"
+ },
+ "spectrum-cross-icon-size-200": {
+ "value": "10px",
+ "description": "Used by `--spectrum-tag-clear-button-size`.",
+ "control": "text",
+ "category": "Global"
+ },
+ "spectrum-component-edge-to-visual-200": {
+ "value": "13px",
+ "description": "Used by `--spectrum-tag-visual-spacing-inline-start`.",
+ "control": "text",
+ "category": "Global"
+ },
+ "spectrum-text-to-visual-200": {
+ "value": "7px",
+ "description": "Used by `--spectrum-tag-visual-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-avatar-size-100": {
+ "value": "24px",
+ "description": "Used by `--spectrum-tag-avatar-size`.",
+ "control": "text",
+ "category": "Global"
+ },
+ "spectrum-thumbnail-size-100": {
+ "value": "24px",
+ "description": "Used by `--spectrum-tag-thumbnail-size`.",
+ "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-component-edge-to-text-200": {
+ "value": "15px",
+ "description": "Used by `--spectrum-tag-label-spacing-inline`.",
+ "control": "text",
+ "category": "Global"
+ },
+ "spectrum-downstate-height": {
+ "description": "Used by `.spectrum-Tag:not(.is-disabled, .is-readOnly):active`.",
+ "control": "text",
+ "category": "Global"
+ },
+ "spectrum-downstate-width": {
+ "description": "Used by `.spectrum-Tag:not(.is-disabled, .is-readOnly):active`.",
+ "control": "text",
+ "category": "Global"
+ },
+ "spectrum-component-size-width-ratio-down": {
+ "value": "0.3333",
+ "description": "Used by `.spectrum-Tag:not(.is-disabled, .is-readOnly):active`.",
+ "control": "text",
+ "category": "Global"
+ },
+ "spectrum-component-size-difference-down": {
+ "value": "-2px",
+ "description": "Used by `.spectrum-Tag:not(.is-disabled, .is-readOnly):active`.",
+ "control": "text",
+ "category": "Global"
+ },
+ "spectrum-avatar-opacity-disabled": {
+ "value": "0.3",
+ "description": "Used by `.spectrum-Tag.is-disabled .spectrum-Avatar`.",
+ "control": "text",
+ "category": "Global"
+ },
+ "spectrum-thumbnail-opacity-disabled": {
+ "value": "0.3",
+ "description": "Used by `.spectrum-Tag.is-disabled .spectrum-Thumbnail`.",
+ "control": "text",
+ "category": "Global"
+ }
+ },
+ "passthroughs": {
+ "mod-avatar-inline-size": {
+ "category": "Passthrough"
+ },
+ "mod-avatar-block-size": {
+ "category": "Passthrough"
+ },
+ "mod-thumbnail-size": {
+ "category": "Passthrough"
+ },
+ "mod-clear-button-background-color": {
+ "category": "Passthrough"
+ },
+ "mod-clear-button-icon-color": {
+ "category": "Passthrough"
+ },
+ "mod-clear-button-icon-color-hover": {
+ "category": "Passthrough"
+ },
+ "mod-clear-button-icon-color-key-focus": {
+ "category": "Passthrough"
+ },
+ "mod-icon-size": {
+ "category": "Passthrough"
+ },
+ "mod-clear-button-width": {
+ "category": "Passthrough"
+ },
+ "mod-clear-button-height": {
+ "category": "Passthrough"
+ },
+ "mod-avatar-opacity-disabled": {
+ "category": "Passthrough"
+ },
+ "mod-thumbnail-opacity-disabled": {
+ "category": "Passthrough"
+ }
+ },
+ "high-contrast": {
+ "highcontrast-tag-border-color": {
+ "value": "var(--mod-tag-border-color, transparent)",
+ "description": "Defined in `.spectrum-Tag`.
Used by `--spectrum-tag-border-color`.
Defaults to `var(--mod-tag-border-color, transparent)`, if not set.",
+ "control": "color"
+ },
+ "highcontrast-tag-border-color-hover": {
+ "value": "var(--mod-tag-border-color-hover, transparent)",
+ "description": "Defined in `.spectrum-Tag`.
Used by `--spectrum-tag-border-color-hover`.
Defaults to `var(--mod-tag-border-color-hover, transparent)`, if not set.",
+ "control": "color"
+ },
+ "highcontrast-tag-border-color-active": {
+ "value": "var(--mod-tag-border-color-active, transparent)",
+ "description": "Defined in `.spectrum-Tag`.
Used by `--spectrum-tag-border-color-active`.
Defaults to `var(--mod-tag-border-color-active, transparent)`, if not set.",
+ "control": "color"
+ },
+ "highcontrast-tag-border-color-focus": {
+ "value": "var(--mod-tag-border-color-focus, transparent)",
+ "description": "Defined in `.spectrum-Tag`.
Used by `--spectrum-tag-border-color-focus`.
Defaults to `var(--mod-tag-border-color-focus, transparent)`, if not set.",
+ "control": "color"
+ },
+ "highcontrast-tag-background-color": {
+ "value": "var(--mod-tag-background-color, var(--spectrum-gray-100))",
+ "description": "Defined in `.spectrum-Tag`.
Used by `--spectrum-tag-background-color`.
Defaults to `var(--mod-tag-background-color, var(--spectrum-gray-100))`, if not set.",
+ "control": "color"
+ },
+ "highcontrast-tag-background-color-hover": {
+ "value": "var(--mod-tag-background-color-hover, var(--spectrum-gray-200))",
+ "description": "Defined in `.spectrum-Tag`.
Used by `--spectrum-tag-background-color-hover`.
Defaults to `var(--mod-tag-background-color-hover, var(--spectrum-gray-200))`, if not set.",
+ "control": "color"
+ },
+ "highcontrast-tag-background-color-active": {
+ "value": "var(--mod-tag-background-color-active, var(--spectrum-gray-200))",
+ "description": "Defined in `.spectrum-Tag`.
Used by `--spectrum-tag-background-color-active`.
Defaults to `var(--mod-tag-background-color-active, var(--spectrum-gray-200))`, if not set.",
+ "control": "color"
+ },
+ "highcontrast-tag-background-color-focus": {
+ "value": "var(--mod-tag-background-color-focus, var(--spectrum-gray-200))",
+ "description": "Defined in `.spectrum-Tag`.
Used by `--spectrum-tag-background-color-focus`.
Defaults to `var(--mod-tag-background-color-focus, var(--spectrum-gray-200))`, if not set.",
+ "control": "color"
+ },
+ "highcontrast-tag-content-color": {
+ "value": "var(--mod-tag-content-color, var(--spectrum-neutral-content-color-default))",
+ "description": "Defined in `.spectrum-Tag`.
Used by `--spectrum-tag-content-color`.
Defaults to `var(--mod-tag-content-color, var(--spectrum-neutral-content-color-default))`, if not set.",
+ "control": "color"
+ },
+ "highcontrast-tag-content-color-hover": {
+ "value": "var(--mod-tag-content-color-hover, var(--spectrum-neutral-content-color-hover))",
+ "description": "Defined in `.spectrum-Tag`.
Used by `--spectrum-tag-content-color-hover`.
Defaults to `var(--mod-tag-content-color-hover, var(--spectrum-neutral-content-color-hover))`, if not set.",
+ "control": "color"
+ },
+ "highcontrast-tag-content-color-active": {
+ "value": "var(--mod-tag-content-color-active, var(--spectrum-neutral-content-color-down))",
+ "description": "Defined in `.spectrum-Tag`.
Used by `--spectrum-tag-content-color-active`.
Defaults to `var(--mod-tag-content-color-active, var(--spectrum-neutral-content-color-down))`, if not set.",
+ "control": "color"
+ },
+ "highcontrast-tag-content-color-focus": {
+ "value": "var(--mod-tag-content-color-focus, var(--spectrum-neutral-content-color-key-focus))",
+ "description": "Defined in `.spectrum-Tag`.
Used by `--spectrum-tag-content-color-focus`.
Defaults to `var(--mod-tag-content-color-focus, var(--spectrum-neutral-content-color-key-focus))`, if not set.",
+ "control": "color"
+ },
+ "highcontrast-tag-focus-ring-color": {
+ "value": "var(--mod-tag-focus-ring-color, var(--spectrum-focus-indicator-color))",
+ "description": "Defined in `.spectrum-Tag`.
Used by `--spectrum-tag-focus-ring-color`.
Defaults to `var(--mod-tag-focus-ring-color, var(--spectrum-focus-indicator-color))`, if not set.",
+ "control": "color"
+ },
+ "highcontrast-tag-border-color-selected": {
+ "value": "var(--mod-tag-border-color-selected, transparent)",
+ "description": "Defined in `.spectrum-Tag.is-selected`.
Used by `--spectrum-tag-border-color`, `--spectrum-tag-border-color-hover`, `--spectrum-tag-border-color-active`, `--spectrum-tag-border-color-focus`.
Defaults to `var(--mod-tag-border-color-selected, transparent)`, if not set.",
+ "control": "color"
+ },
+ "highcontrast-tag-background-color-selected": {
+ "value": "var(--mod-tag-background-color-selected, var(--spectrum-neutral-background-color-default))",
+ "description": "Defined in `.spectrum-Tag.is-selected`.
Used by `--spectrum-tag-background-color`.
Defaults to `var(--mod-tag-background-color-selected, var(--spectrum-neutral-background-color-default))`, if not set.",
+ "control": "color"
+ },
+ "highcontrast-tag-content-color-selected": {
+ "value": "var(--mod-tag-content-color-selected, var(--spectrum-gray-25))",
+ "description": "Defined in `.spectrum-Tag.is-selected`.
Used by `--spectrum-tag-content-color`, `--spectrum-tag-content-color-hover`, `--spectrum-tag-content-color-active`, `--spectrum-tag-content-color-focus`.
Defaults to `var(--mod-tag-content-color-selected, var(--spectrum-gray-25))`, if not set.",
+ "control": "color"
+ },
+ "highcontrast-tag-background-color-selected-hover": {
+ "value": "var(--mod-tag-background-color-selected-hover, var(--spectrum-neutral-background-color-hover))",
+ "description": "Defined in `.spectrum-Tag.is-selected`.
Used by `--spectrum-tag-background-color-hover`.
Defaults to `var(--mod-tag-background-color-selected-hover, var(--spectrum-neutral-background-color-hover))`, if not set.",
+ "control": "color"
+ },
+ "highcontrast-tag-background-color-selected-active": {
+ "value": "var(--mod-tag-background-color-selected-active, var(--spectrum-neutral-background-color-down))",
+ "description": "Defined in `.spectrum-Tag.is-selected`.
Used by `--spectrum-tag-background-color-active`.
Defaults to `var(--mod-tag-background-color-selected-active, var(--spectrum-neutral-background-color-down))`, if not set.",
+ "control": "color"
+ },
+ "highcontrast-tag-background-color-selected-focus": {
+ "value": "var(--mod-tag-background-color-selected-focus, var(--spectrum-neutral-background-color-key-focus))",
+ "description": "Defined in `.spectrum-Tag.is-selected`.
Used by `--spectrum-tag-background-color-focus`.
Defaults to `var(--mod-tag-background-color-selected-focus, var(--spectrum-neutral-background-color-key-focus))`, if not set.",
+ "control": "color"
+ },
+ "highcontrast-tag-border-color-emphasized": {
+ "value": "var(--mod-tag-border-color-emphasized, transparent)",
+ "description": "Defined in `.spectrum-Tag.spectrum-Tag--emphasized`.
Used by `--spectrum-tag-border-color`, `--spectrum-tag-border-color-hover`, `--spectrum-tag-border-color-active`, `--spectrum-tag-border-color-focus`.
Defaults to `var(--mod-tag-border-color-emphasized, transparent)`, if not set.",
+ "control": "color"
+ },
+ "highcontrast-tag-background-color-emphasized": {
+ "value": "var(--mod-tag-background-color-emphasized, var(--spectrum-accent-background-color-default))",
+ "description": "Defined in `.spectrum-Tag.spectrum-Tag--emphasized`.
Used by `--spectrum-tag-background-color`.
Defaults to `var(--mod-tag-background-color-emphasized, var(--spectrum-accent-background-color-default))`, if not set.",
+ "control": "color"
+ },
+ "highcontrast-tag-content-color-emphasized": {
+ "value": "var(--mod-tag-content-color-emphasized, var(--spectrum-white))",
+ "description": "Defined in `.spectrum-Tag.spectrum-Tag--emphasized`.
Used by `--spectrum-tag-content-color`, `--spectrum-tag-content-color-hover`, `--spectrum-tag-content-color-active`, `--spectrum-tag-content-color-focus`.
Defaults to `var(--mod-tag-content-color-emphasized, var(--spectrum-white))`, if not set.",
+ "control": "color"
+ },
+ "highcontrast-tag-background-color-emphasized-hover": {
+ "value": "var(--mod-tag-background-color-emphasized-hover, var(--spectrum-accent-background-color-hover))",
+ "description": "Defined in `.spectrum-Tag.spectrum-Tag--emphasized`.
Used by `--spectrum-tag-background-color-hover`.
Defaults to `var(--mod-tag-background-color-emphasized-hover, var(--spectrum-accent-background-color-hover))`, if not set.",
+ "control": "color"
+ },
+ "highcontrast-tag-background-color-emphasized-active": {
+ "value": "var(--mod-tag-background-color-emphasized-active, var(--spectrum-accent-background-color-down))",
+ "description": "Defined in `.spectrum-Tag.spectrum-Tag--emphasized`.
Used by `--spectrum-tag-background-color-active`.
Defaults to `var(--mod-tag-background-color-emphasized-active, var(--spectrum-accent-background-color-down))`, if not set.",
+ "control": "color"
+ },
+ "highcontrast-tag-background-color-emphasized-focus": {
+ "value": "var(--mod-tag-background-color-emphasized-focus, var(--spectrum-accent-background-color-key-focus))",
+ "description": "Defined in `.spectrum-Tag.spectrum-Tag--emphasized`.
Used by `--spectrum-tag-background-color-focus`.
Defaults to `var(--mod-tag-background-color-emphasized-focus, var(--spectrum-accent-background-color-key-focus))`, if not set.",
+ "control": "color"
+ },
+ "highcontrast-tag-border-color-disabled": {
+ "value": "var(--mod-tag-border-color-disabled, transparent)",
+ "description": "Defined in `.spectrum-Tag.is-disabled`.
Used by `--spectrum-tag-border-color`.
Defaults to `var(--mod-tag-border-color-disabled, transparent)`, if not set.",
+ "control": "color"
+ },
+ "highcontrast-tag-background-color-disabled": {
+ "value": "var(--mod-tag-background-color-disabled, var(--spectrum-disabled-background-color))",
+ "description": "Defined in `.spectrum-Tag.is-disabled`.
Used by `--spectrum-tag-background-color`.
Defaults to `var(--mod-tag-background-color-disabled, var(--spectrum-disabled-background-color))`, if not set.",
+ "control": "color"
+ },
+ "highcontrast-tag-content-color-disabled": {
+ "value": "var(--mod-tag-content-color-disabled, var(--spectrum-disabled-content-color))",
+ "description": "Defined in `.spectrum-Tag.is-disabled`.
Used by `--spectrum-tag-content-color`.
Defaults to `var(--mod-tag-content-color-disabled, var(--spectrum-disabled-content-color))`, if not set.",
+ "control": "color"
+ }
+ }
}
diff --git a/components/tag/stories/tag.stories.js b/components/tag/stories/tag.stories.js
index cbbc0a1b485..b4a921fd221 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, withDownStateDimensionCapture } from "@spectrum-css/preview/decorators";
import { disableDefaultModes } from "@spectrum-css/preview/modes";
import { isActive, isDisabled, isEmphasized, isHovered, isKeyboardFocused, isReadOnly, 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 { 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.
*/
@@ -103,12 +105,7 @@ export default {
},
packageJson,
metadata,
- downState: {
- selectors: [".spectrum-Tag:not(:disabled)"],
- },
- status: {
- type: "migrated",
- },
+ cssprops: metadata.modifiers,
},
decorators: [
withDownStateDimensionCapture,
diff --git a/components/taggroup/dist/metadata.json b/components/taggroup/dist/metadata.json
index 28ca5140d81..515e31d5deb 100644
--- a/components/taggroup/dist/metadata.json
+++ b/components/taggroup/dist/metadata.json
@@ -17,42 +17,182 @@
".spectrum-TagGroup:lang(ko)",
".spectrum-TagGroup:lang(zh)"
],
- "modifiers": [
- "--mod-body-cjk-line-height",
- "--mod-body-font-size",
- "--mod-body-line-height",
- "--mod-body-margin-end",
- "--mod-body-margin-start",
- "--mod-tag-group-block-spacing-label-to-tags",
- "--mod-tag-group-block-tag-spacing",
- "--mod-tag-group-inline-spacing-label-to-tags",
- "--mod-tag-group-inline-tag-spacing",
- "--mod-tag-group-spacing-help-text-to-tags"
- ],
- "component": [
- "--spectrum-tag-group-block-spacing-label-to-tags",
- "--spectrum-tag-group-block-tag-spacing",
- "--spectrum-tag-group-inline-spacing-label-to-tags",
- "--spectrum-tag-group-inline-tag-spacing",
- "--spectrum-tag-group-spacing-help-text-to-tags"
- ],
- "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-top-to-text-100",
- "--spectrum-component-top-to-text-200",
- "--spectrum-component-top-to-text-75",
- "--spectrum-field-label-to-component",
- "--spectrum-font-size-100",
- "--spectrum-font-size-200",
- "--spectrum-font-size-75",
- "--spectrum-help-text-to-component",
- "--spectrum-line-height-100",
- "--spectrum-spacing-100",
- "--spectrum-spacing-200"
- ],
- "passthroughs": [],
- "high-contrast": []
+ "modifiers": {
+ "mod-body-line-height": {
+ "description": "Defined in `.spectrum-TagGroup`.
Defaults to `var(--spectrum-line-height-100)`, if not set.",
+ "control": "text",
+ "category": "Modifier"
+ },
+ "mod-body-font-size": {
+ "description": "Defined in `.spectrum-TagGroup`, `.spectrum-TagGroup--sizeS`, `.spectrum-TagGroup--sizeL`.
Defaults to `var(--spectrum-font-size-200)`, if not set.",
+ "control": "text",
+ "category": "Modifier"
+ },
+ "mod-body-margin-start": {
+ "description": "Defined in `.spectrum-TagGroup`, `.spectrum-TagGroup--sizeS`, `.spectrum-TagGroup--sizeL`.
Defaults to `var(--spectrum-component-top-to-text-200)`, if not set.",
+ "control": "text",
+ "category": "Modifier"
+ },
+ "mod-body-margin-end": {
+ "description": "Defined in `.spectrum-TagGroup`, `.spectrum-TagGroup--sizeS`, `.spectrum-TagGroup--sizeL`.
Defaults to `var(--spectrum-component-bottom-to-text-200)`, if not set.",
+ "control": "text",
+ "category": "Modifier"
+ },
+ "mod-body-cjk-line-height": {
+ "description": "Defined in `.spectrum-TagGroup:lang(ja), .spectrum-TagGroup:lang(ko), .spectrum-TagGroup:lang(zh)`.
Defaults to `var(--spectrum-cjk-line-height-100)`, if not set.",
+ "control": "text",
+ "category": "Modifier"
+ },
+ "mod-tag-group-inline-tag-spacing": {
+ "description": "Used by `.spectrum-TagGroup-tags`.
Defaults to `var(--spectrum-tag-group-inline-tag-spacing)`, if not set.",
+ "control": "text",
+ "category": "Modifier"
+ },
+ "mod-tag-group-block-tag-spacing": {
+ "description": "Used by `.spectrum-TagGroup-tags`.
Defaults to `var(--spectrum-tag-group-block-tag-spacing)`, if not set.",
+ "control": "text",
+ "category": "Modifier"
+ },
+ "mod-tag-group-block-spacing-label-to-tags": {
+ "description": "Used by `.spectrum-TagGroup-label`.
Defaults to `var(--spectrum-tag-group-block-spacing-label-to-tags)`, if not set.",
+ "control": "text",
+ "category": "Modifier"
+ },
+ "mod-tag-group-spacing-help-text-to-tags": {
+ "description": "Used by `.spectrum-TagGroup-helpText`.
Defaults to `var(--spectrum-tag-group-spacing-help-text-to-tags)`, if not set.",
+ "control": "text",
+ "category": "Modifier"
+ },
+ "mod-tag-group-inline-spacing-label-to-tags": {
+ "description": "Used by `.spectrum-TagGroup--sideLabel .spectrum-TagGroup-label`.
Defaults to `var(--spectrum-tag-group-inline-spacing-label-to-tags)`, if not set.",
+ "control": "text",
+ "category": "Modifier"
+ }
+ },
+ "component": {
+ "spectrum-tag-group-inline-tag-spacing": {
+ "value": "12px",
+ "description": "Defined in `.spectrum-TagGroup`, `.spectrum-TagGroup--sizeS`, `.spectrum-TagGroup--sizeL`.
Used by `.spectrum-TagGroup-tags`.
Defaults to `var(--spectrum-spacing-200)`, if not set.",
+ "control": "text",
+ "category": "Component"
+ },
+ "spectrum-tag-group-block-tag-spacing": {
+ "value": "12px",
+ "description": "Defined in `.spectrum-TagGroup`, `.spectrum-TagGroup--sizeS`, `.spectrum-TagGroup--sizeL`.
Used by `.spectrum-TagGroup-tags`.
Defaults to `var(--spectrum-spacing-200)`, if not set.",
+ "control": "text",
+ "category": "Component"
+ },
+ "spectrum-tag-group-block-spacing-label-to-tags": {
+ "value": "0px",
+ "description": "Defined in `.spectrum-TagGroup`.
Used by `.spectrum-TagGroup-label`.
Defaults to `var(--spectrum-field-label-to-component)`, if not set.",
+ "control": "text",
+ "category": "Component"
+ },
+ "spectrum-tag-group-inline-spacing-label-to-tags": {
+ "value": "12px",
+ "description": "Defined in `.spectrum-TagGroup`.
Used by `.spectrum-TagGroup--sideLabel .spectrum-TagGroup-label`.
Defaults to `var(--spectrum-spacing-200)`, if not set.",
+ "control": "text",
+ "category": "Component"
+ },
+ "spectrum-tag-group-spacing-help-text-to-tags": {
+ "value": "0px",
+ "description": "Defined in `.spectrum-TagGroup`.
Used by `.spectrum-TagGroup-helpText`.
Defaults to `var(--spectrum-help-text-to-component)`, if not set.",
+ "control": "text",
+ "category": "Component"
+ }
+ },
+ "global": {
+ "spectrum-spacing-200": {
+ "value": "12px",
+ "description": "Used by `--spectrum-tag-group-inline-tag-spacing`, `--spectrum-tag-group-block-tag-spacing`, `--spectrum-tag-group-inline-spacing-label-to-tags`.",
+ "control": "text",
+ "category": "Global"
+ },
+ "spectrum-field-label-to-component": {
+ "value": "0px",
+ "description": "Used by `--spectrum-tag-group-block-spacing-label-to-tags`.",
+ "control": "text",
+ "category": "Global"
+ },
+ "spectrum-help-text-to-component": {
+ "value": "0px",
+ "description": "Used by `--spectrum-tag-group-spacing-help-text-to-tags`.",
+ "control": "text",
+ "category": "Global"
+ },
+ "spectrum-line-height-100": {
+ "value": "1.3",
+ "description": "Used by `--mod-body-line-height`.",
+ "control": "text",
+ "category": "Global"
+ },
+ "spectrum-font-size-100": {
+ "value": "14px",
+ "description": "Used by `--mod-body-font-size`.",
+ "control": "text",
+ "category": "Global"
+ },
+ "spectrum-component-top-to-text-100": {
+ "value": "6px",
+ "description": "Used by `--mod-body-margin-start`.",
+ "control": "text",
+ "category": "Global"
+ },
+ "spectrum-component-bottom-to-text-100": {
+ "value": "9px",
+ "description": "Used by `--mod-body-margin-end`.",
+ "control": "text",
+ "category": "Global"
+ },
+ "spectrum-cjk-line-height-100": {
+ "value": "1.5",
+ "description": "Used by `--mod-body-cjk-line-height`.",
+ "control": "text",
+ "category": "Global"
+ },
+ "spectrum-spacing-100": {
+ "value": "8px",
+ "description": "Used by `--spectrum-tag-group-inline-tag-spacing`, `--spectrum-tag-group-block-tag-spacing`.",
+ "control": "text",
+ "category": "Global"
+ },
+ "spectrum-font-size-75": {
+ "value": "12px",
+ "description": "Used by `--mod-body-font-size`.",
+ "control": "text",
+ "category": "Global"
+ },
+ "spectrum-component-top-to-text-75": {
+ "value": "4px",
+ "description": "Used by `--mod-body-margin-start`.",
+ "control": "text",
+ "category": "Global"
+ },
+ "spectrum-component-bottom-to-text-75": {
+ "value": "5px",
+ "description": "Used by `--mod-body-margin-end`.",
+ "control": "text",
+ "category": "Global"
+ },
+ "spectrum-font-size-200": {
+ "value": "16px",
+ "description": "Used by `--mod-body-font-size`.",
+ "control": "text",
+ "category": "Global"
+ },
+ "spectrum-component-top-to-text-200": {
+ "value": "9px",
+ "description": "Used by `--mod-body-margin-start`.",
+ "control": "text",
+ "category": "Global"
+ },
+ "spectrum-component-bottom-to-text-200": {
+ "value": "11px",
+ "description": "Used by `--mod-body-margin-end`.",
+ "control": "text",
+ "category": "Global"
+ }
+ },
+ "passthroughs": {},
+ "high-contrast": {}
}
diff --git a/components/taggroup/stories/taggroup.stories.js b/components/taggroup/stories/taggroup.stories.js
index 0a10a82c09e..de7ea007075 100644
--- a/components/taggroup/stories/taggroup.stories.js
+++ b/components/taggroup/stories/taggroup.stories.js
@@ -2,11 +2,13 @@ import { Sizes, withDownStateDimensionCapture } from "@spectrum-css/preview/deco
import { disableDefaultModes } from "@spectrum-css/preview/modes";
import { isInvalid } from "@spectrum-css/preview/types";
import { default as TagStories } from "@spectrum-css/tag/stories/tag.stories.js";
-import metadata from "../dist/metadata.json";
-import packageJson from "../package.json";
import { exampleTagItems, TagGroupDisabledItemAndActionButton, TagGroups, TagGroupSizingTemplate } 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"];
/**
@@ -124,6 +126,10 @@ export default {
downState: {
selectors: [".spectrum-Tag", ".spectrum-ActionButton"],
},
+ cssprops: {
+ ...metadata.modifiers,
+ ...metadata.component,
+ },
status: {
type: "migrated",
},
diff --git a/components/textfield/dist/metadata.json b/components/textfield/dist/metadata.json
index 073bc68dfb2..a0c8ae808da 100644
--- a/components/textfield/dist/metadata.json
+++ b/components/textfield/dist/metadata.json
@@ -40,6 +40,10 @@
".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:focus:hover .spectrum-Textfield-input",
+ ".spectrum-Textfield:focus:hover .spectrum-Textfield-input::placeholder",
+ ".spectrum-Textfield:hover .spectrum-Textfield-input",
+ ".spectrum-Textfield:hover .spectrum-Textfield-input::placeholder",
".spectrum-Textfield.is-disabled .spectrum-FieldLabel",
".spectrum-Textfield.is-disabled .spectrum-HelpText .spectrum-HelpText-text",
".spectrum-Textfield.is-disabled .spectrum-Textfield-characterCount",
@@ -64,16 +68,16 @@
".spectrum-Textfield.is-invalid .spectrum-Textfield-input:focus",
".spectrum-Textfield.is-invalid .spectrum-Textfield-input:focus:hover",
".spectrum-Textfield.is-invalid .spectrum-Textfield-validationIcon",
- ".spectrum-Textfield.is-invalid.is-focused .spectrum-Textfield-input",
- ".spectrum-Textfield.is-invalid.is-focused .spectrum-Textfield-input:hover",
- ".spectrum-Textfield.is-invalid.is-focused:hover .spectrum-Textfield-input",
- ".spectrum-Textfield.is-invalid.is-keyboardFocused .spectrum-Textfield-input",
- ".spectrum-Textfield.is-invalid.is-keyboardFocused:hover .spectrum-Textfield-input",
".spectrum-Textfield.is-invalid:focus .spectrum-Textfield-input",
".spectrum-Textfield.is-invalid:focus .spectrum-Textfield-input:hover",
".spectrum-Textfield.is-invalid:focus:hover .spectrum-Textfield-input",
".spectrum-Textfield.is-invalid:hover:not(.is-disabled, .is-readOnly) .spectrum-Textfield-input",
".spectrum-Textfield.is-invalid:not(.is-disabled, .is-readOnly) .spectrum-Textfield-input:hover",
+ ".spectrum-Textfield.is-invalid.is-focused .spectrum-Textfield-input",
+ ".spectrum-Textfield.is-invalid.is-focused .spectrum-Textfield-input:hover",
+ ".spectrum-Textfield.is-invalid.is-focused:hover .spectrum-Textfield-input",
+ ".spectrum-Textfield.is-invalid.is-keyboardFocused .spectrum-Textfield-input",
+ ".spectrum-Textfield.is-invalid.is-keyboardFocused:hover .spectrum-Textfield-input",
".spectrum-Textfield.is-keyboardFocused .spectrum-Textfield-input",
".spectrum-Textfield.is-keyboardFocused .spectrum-Textfield-input::placeholder",
".spectrum-Textfield.is-keyboardFocused:hover .spectrum-Textfield-input",
@@ -81,262 +85,1362 @@
".spectrum-Textfield.is-readOnly .spectrum-Textfield-input",
".spectrum-Textfield.is-readOnly .spectrum-Textfield-input::placeholder",
".spectrum-Textfield.is-readOnly .spectrum-Textfield-validationIcon",
- ".spectrum-Textfield.is-readOnly.is-disabled .spectrum-Textfield-input",
".spectrum-Textfield.is-readOnly:hover .spectrum-Textfield-input",
".spectrum-Textfield.is-readOnly:hover .spectrum-Textfield-input::placeholder",
+ ".spectrum-Textfield.is-readOnly.is-disabled .spectrum-Textfield-input",
".spectrum-Textfield.is-valid .spectrum-Textfield-input",
".spectrum-Textfield.is-valid .spectrum-Textfield-validationIcon",
- ".spectrum-Textfield.spectrum-Textfield--sideLabel .spectrum-Textfield-validationIcon",
- ".spectrum-Textfield:focus:hover .spectrum-Textfield-input",
- ".spectrum-Textfield:focus:hover .spectrum-Textfield-input::placeholder",
- ".spectrum-Textfield:hover .spectrum-Textfield-input",
- ".spectrum-Textfield:hover .spectrum-Textfield-input::placeholder"
- ],
- "modifiers": [
- "--mod-text-area-min-block-size",
- "--mod-text-area-min-inline-size",
- "--mod-textfield-animation-duration",
- "--mod-textfield-background-color",
- "--mod-textfield-background-color-disabled",
- "--mod-textfield-border-color",
- "--mod-textfield-border-color-disabled",
- "--mod-textfield-border-color-focus",
- "--mod-textfield-border-color-focus-hover",
- "--mod-textfield-border-color-hover",
- "--mod-textfield-border-color-invalid-default",
- "--mod-textfield-border-color-invalid-focus",
- "--mod-textfield-border-color-invalid-focus-hover",
- "--mod-textfield-border-color-invalid-hover",
- "--mod-textfield-border-color-invalid-keyboard-focus",
- "--mod-textfield-border-color-keyboard-focus",
- "--mod-textfield-border-width",
- "--mod-textfield-character-count-color",
- "--mod-textfield-character-count-spacing-block",
- "--mod-textfield-character-count-spacing-block-side",
- "--mod-textfield-character-count-spacing-inline",
- "--mod-textfield-character-count-spacing-inline-side",
- "--mod-textfield-corner-radius",
- "--mod-textfield-focus-indicator-color",
- "--mod-textfield-focus-indicator-gap",
- "--mod-textfield-focus-indicator-width",
- "--mod-textfield-font-family",
- "--mod-textfield-font-size",
- "--mod-textfield-font-style",
- "--mod-textfield-font-weight",
- "--mod-textfield-height",
- "--mod-textfield-helptext-spacing-block",
- "--mod-textfield-icon-color-invalid",
- "--mod-textfield-icon-color-valid",
- "--mod-textfield-icon-size-invalid",
- "--mod-textfield-icon-size-valid",
- "--mod-textfield-icon-spacing-block-invalid",
- "--mod-textfield-icon-spacing-block-valid",
- "--mod-textfield-icon-spacing-inline-end-invalid",
- "--mod-textfield-icon-spacing-inline-end-valid",
- "--mod-textfield-icon-spacing-inline-start-invalid",
- "--mod-textfield-icon-spacing-inline-start-valid",
- "--mod-textfield-label-spacing-block",
- "--mod-textfield-label-spacing-inline-side-label",
- "--mod-textfield-line-height",
- "--mod-textfield-line-height-cjk",
- "--mod-textfield-min-width",
- "--mod-textfield-spacing-block-end",
- "--mod-textfield-spacing-block-start",
- "--mod-textfield-spacing-inline",
- "--mod-textfield-text-color-default",
- "--mod-textfield-text-color-disabled",
- "--mod-textfield-text-color-focus",
- "--mod-textfield-text-color-focus-hover",
- "--mod-textfield-text-color-hover",
- "--mod-textfield-text-color-invalid",
- "--mod-textfield-text-color-keyboard-focus",
- "--mod-textfield-text-color-readonly",
- "--mod-textfield-text-color-valid",
- "--mod-textfield-width"
- ],
- "component": [
- "--spectrum-text-field-minimum-width-multiplier",
- "--spectrum-textfield-animation-duration",
- "--spectrum-textfield-background-color",
- "--spectrum-textfield-background-color-disabled",
- "--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-color",
- "--spectrum-textfield-character-count-spacing-block",
- "--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-size",
- "--spectrum-textfield-font-style",
- "--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-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-inline-side-label",
- "--spectrum-textfield-line-height",
- "--spectrum-textfield-line-height-cjk",
- "--spectrum-textfield-min-width",
- "--spectrum-textfield-spacing-block-end",
- "--spectrum-textfield-spacing-block-start",
- "--spectrum-textfield-spacing-inline",
- "--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-200",
- "--spectrum-checkmark-icon-size-100",
- "--spectrum-checkmark-icon-size-200",
- "--spectrum-checkmark-icon-size-300",
- "--spectrum-checkmark-icon-size-75",
- "--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-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-medium-size-extra-large",
- "--spectrum-corner-radius-medium-size-large",
- "--spectrum-corner-radius-medium-size-medium",
- "--spectrum-corner-radius-medium-size-small",
- "--spectrum-default-font-style",
- "--spectrum-disabled-border-color",
- "--spectrum-disabled-content-color",
- "--spectrum-field-default-width-extra-large",
- "--spectrum-field-default-width-large",
- "--spectrum-field-default-width-medium",
- "--spectrum-field-default-width-small",
- "--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-small",
- "--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-small",
- "--spectrum-field-label-to-component",
- "--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-400",
- "--spectrum-gray-800",
- "--spectrum-gray-900",
- "--spectrum-help-text-to-component",
- "--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-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-neutral-subdued-content-color-default",
- "--spectrum-positive-visual-color",
- "--spectrum-regular-font-weight",
- "--spectrum-sans-font-family-stack",
- "--spectrum-side-label-character-count-to-field",
- "--spectrum-spacing-200",
- "--spectrum-text-area-min-block-size",
- "--spectrum-text-area-min-inline-size",
- "--spectrum-text-area-minimum-height",
- "--spectrum-text-area-minimum-width",
- "--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"
+ ".spectrum-Textfield.spectrum-Textfield--sideLabel .spectrum-Textfield-validationIcon"
],
- "passthroughs": [],
- "high-contrast": [
- "--highcontrast-textfield-background-color",
- "--highcontrast-textfield-background-color-disabled",
- "--highcontrast-textfield-border-color",
- "--highcontrast-textfield-border-color-disabled",
- "--highcontrast-textfield-border-color-focus",
- "--highcontrast-textfield-border-color-focus-hover",
- "--highcontrast-textfield-border-color-hover",
- "--highcontrast-textfield-border-color-invalid-default",
- "--highcontrast-textfield-border-color-invalid-focus",
- "--highcontrast-textfield-border-color-invalid-focus-hover",
- "--highcontrast-textfield-border-color-invalid-hover",
- "--highcontrast-textfield-border-color-invalid-keyboard-focus",
- "--highcontrast-textfield-border-color-keyboard-focus",
- "--highcontrast-textfield-border-color-readonly",
- "--highcontrast-textfield-focus-indicator-color",
- "--highcontrast-textfield-text-color-default",
- "--highcontrast-textfield-text-color-disabled",
- "--highcontrast-textfield-text-color-focus",
- "--highcontrast-textfield-text-color-focus-hover",
- "--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-background-color": {
+ "description": "Used by `--spectrum-textfield-background-color`.
Defaults to `var(--spectrum-gray-25)`, if not set.",
+ "control": "color",
+ "category": "Modifier"
+ },
+ "mod-textfield-background-color-disabled": {
+ "description": "Used by `--spectrum-textfield-background-color-disabled`.
Defaults to `var(--spectrum-gray-25)`, if not set.",
+ "control": "color",
+ "category": "Modifier"
+ },
+ "mod-textfield-border-color-disabled": {
+ "description": "Used by `--spectrum-textfield-border-color-disabled`.
Defaults to `var(--spectrum-disabled-border-color)`, if not set.",
+ "control": "color",
+ "category": "Modifier"
+ },
+ "mod-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": {
+ "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": {
+ "description": "Used by `.spectrum-Textfield.is-valid .spectrum-Textfield-validationIcon`, `.spectrum-Textfield.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": {
+ "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": {
+ "description": "Used by `.spectrum-Textfield.is-invalid .spectrum-Textfield-validationIcon`, `.spectrum-Textfield.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": {
+ "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": {
+ "description": "Used by `.spectrum-Textfield.is-invalid .spectrum-Textfield-validationIcon`, `.spectrum-Textfield.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": {
+ "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-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-text-color-disabled": {
+ "description": "Used by `.spectrum-Textfield.is-disabled .spectrum-FieldLabel`, `.spectrum-Textfield.is-disabled .spectrum-HelpText .spectrum-HelpText-text`, `.spectrum-Textfield.is-disabled .spectrum-Textfield-characterCount`, `.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.is-disabled .spectrum-Textfield-input:read-only::placeholder, .spectrum-Textfield.is-disabled .spectrum-Textfield.is-readOnly .spectrum-Textfield-input::placeholder`, `.spectrum-Textfield.is-disabled:hover .spectrum-Textfield-input, .spectrum-Textfield.is-disabled:hover .spectrum-Textfield-input::placeholder`, `.spectrum-Textfield.is-disabled .spectrum-Textfield.is-readOnly:hover .spectrum-Textfield-input::placeholder, .spectrum-Textfield.is-disabled:hover .spectrum-Textfield-input:read-only::placeholder, .spectrum-Textfield.is-disabled:hover .spectrum-Textfield.is-readOnly .spectrum-Textfield-input::placeholder, .spectrum-Textfield.is-disabled:hover .spectrum-Textfield.is-readOnly:hover .spectrum-Textfield-input::placeholder`, `.spectrum-Textfield.is-readOnly.is-disabled .spectrum-Textfield-input`.
Defaults to `var(--spectrum-textfield-text-color-disabled)`, if not set.",
+ "control": "color",
+ "category": "Modifier"
+ },
+ "mod-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-color": {
+ "description": "Used by `.spectrum-Textfield-characterCount`.
Defaults to `var(--spectrum-textfield-character-count-color)`, if not set.",
+ "control": "color",
+ "category": "Modifier"
+ },
+ "mod-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": {
+ "description": "Used by `.spectrum-Textfield-characterCount`.
Defaults to `var(--spectrum-textfield-character-count-spacing-inline)`, if not set.",
+ "control": "text",
+ "category": "Modifier"
+ },
+ "mod-textfield-font-size": {
+ "description": "Used by `.spectrum-Textfield-characterCount`, `.spectrum-Textfield-input`, `.spectrum-Textfield-input::placeholder`.
Defaults to `var(--spectrum-textfield-font-size)`, if not set.",
+ "control": "text",
+ "category": "Modifier"
+ },
+ "mod-textfield-font-family": {
+ "description": "Used by `.spectrum-Textfield-characterCount`, `.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": {
+ "description": "Used by `.spectrum-Textfield-characterCount`, `.spectrum-Textfield-input`, `.spectrum-Textfield-input::placeholder`.
Defaults to `var(--spectrum-textfield-font-weight)`, if not set.",
+ "control": "text",
+ "category": "Modifier"
+ },
+ "mod-textfield-font-style": {
+ "description": "Used by `.spectrum-Textfield-characterCount`, `.spectrum-Textfield-input`, `.spectrum-Textfield-input::placeholder`.
Defaults to `var(--spectrum-textfield-font-style)`, if not set.",
+ "control": "text",
+ "category": "Modifier"
+ },
+ "mod-textfield-line-height": {
+ "description": "Used by `.spectrum-Textfield-characterCount`, `.spectrum-Textfield--multiline .spectrum-Textfield-input`.
Defaults to `var(--spectrum-textfield-line-height)`, if not set.",
+ "control": "text",
+ "category": "Modifier"
+ },
+ "mod-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-line-height-cjk": {
+ "description": "Used by `--spectrum-textfield-line-height`.
Defaults to `var(--spectrum-textfield-line-height-cjk)`, if not set.",
+ "control": "text",
+ "category": "Modifier"
+ },
+ "mod-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": {
+ "description": "Used by `.spectrum-Textfield-input`.
Defaults to `var(--spectrum-textfield-height)`, if not set.",
+ "control": "text",
+ "category": "Modifier"
+ },
+ "mod-textfield-spacing-block-start": {
+ "description": "Used by `.spectrum-Textfield-input`.
Defaults to `var(--spectrum-textfield-spacing-block-start)`, if not set.",
+ "control": "text",
+ "category": "Modifier"
+ },
+ "mod-textfield-border-width": {
+ "description": "Used by `.spectrum-Textfield-input`, `.spectrum-Textfield.is-valid .spectrum-Textfield-input`, `.spectrum-Textfield.is-invalid .spectrum-Textfield-input`.
Defaults to `var(--spectrum-textfield-border-width)`, if not set.",
+ "control": "text",
+ "category": "Modifier"
+ },
+ "mod-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": {
+ "description": "Used by `.spectrum-Textfield-input`.
Defaults to `var(--spectrum-textfield-spacing-inline)`, if not set.",
+ "control": "text",
+ "category": "Modifier"
+ },
+ "mod-textfield-border-color": {
+ "description": "Used by `.spectrum-Textfield-input`.
Defaults to `var(--spectrum-textfield-border-color)`, if not set.",
+ "control": "color",
+ "category": "Modifier"
+ },
+ "mod-textfield-animation-duration": {
+ "description": "Used by `.spectrum-Textfield-input`, `.spectrum-Textfield-input::placeholder`.
Defaults to `var(--spectrum-textfield-animation-duration)`, if not set.",
+ "control": "text",
+ "category": "Modifier"
+ },
+ "mod-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": {
+ "description": "Used by `.spectrum-Textfield-input:focus, .spectrum-Textfield.is-focused .spectrum-Textfield-input`.
Defaults to `var(--spectrum-textfield-border-color-focus)`, if not set.",
+ "control": "color",
+ "category": "Modifier"
+ },
+ "mod-textfield-text-color-focus": {
+ "description": "Used by `.spectrum-Textfield-input:focus, .spectrum-Textfield-input:focus::placeholder, .spectrum-Textfield.is-focused .spectrum-Textfield-input, .spectrum-Textfield.is-focused .spectrum-Textfield-input::placeholder`.
Defaults to `var(--spectrum-textfield-text-color-focus)`, if not set.",
+ "control": "color",
+ "category": "Modifier"
+ },
+ "mod-textfield-border-color-keyboard-focus": {
+ "description": "Used by `.spectrum-Textfield.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": {
+ "description": "Used by `.spectrum-Textfield.is-keyboardFocused .spectrum-Textfield-input`.
Defaults to `var(--spectrum-textfield-focus-indicator-width)`, if not set.",
+ "control": "text",
+ "category": "Modifier"
+ },
+ "mod-textfield-focus-indicator-color": {
+ "description": "Used by `.spectrum-Textfield.is-keyboardFocused .spectrum-Textfield-input`.
Defaults to `var(--spectrum-textfield-focus-indicator-color)`, if not set.",
+ "control": "color",
+ "category": "Modifier"
+ },
+ "mod-textfield-focus-indicator-gap": {
+ "description": "Used by `.spectrum-Textfield.is-keyboardFocused .spectrum-Textfield-input`.
Defaults to `var(--spectrum-textfield-focus-indicator-gap)`, if not set.",
+ "control": "text",
+ "category": "Modifier"
+ },
+ "mod-textfield-text-color-keyboard-focus": {
+ "description": "Used by `.spectrum-Textfield.is-keyboardFocused .spectrum-Textfield-input, .spectrum-Textfield.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": {
+ "description": "Used by `.spectrum-Textfield.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": {
+ "description": "Used by `.spectrum-Textfield.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": {
+ "description": "Used by `.spectrum-Textfield.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": {
+ "description": "Used by `.spectrum-Textfield.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": {
+ "description": "Used by `.spectrum-Textfield.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": {
+ "description": "Used by `.spectrum-Textfield.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": {
+ "description": "Used by `.spectrum-Textfield.is-invalid .spectrum-Textfield-input:focus, .spectrum-Textfield.is-invalid.is-focused .spectrum-Textfield-input, .spectrum-Textfield.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": {
+ "description": "Used by `.spectrum-Textfield.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-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": {
+ "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": {
+ "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": {
+ "description": "Used by `.spectrum-Textfield-input:focus:hover, .spectrum-Textfield.is-focused .spectrum-Textfield-input:hover`, `.spectrum-Textfield-input:focus:hover, .spectrum-Textfield.is-focused:hover .spectrum-Textfield-input, .spectrum-Textfield.is-keyboardFocused:hover .spectrum-Textfield-input, .spectrum-Textfield:focus:hover .spectrum-Textfield-input`.
Defaults to `var(--spectrum-textfield-border-color-focus-hover)`, if not set.",
+ "control": "color",
+ "category": "Modifier"
+ },
+ "mod-textfield-text-color-focus-hover": {
+ "description": "Used by `.spectrum-Textfield-input:focus:hover, .spectrum-Textfield-input:focus:hover::placeholder, .spectrum-Textfield.is-focused .spectrum-Textfield-input:hover, .spectrum-Textfield.is-focused .spectrum-Textfield-input:hover::placeholder`, `.spectrum-Textfield-input:focus:hover, .spectrum-Textfield.is-focused:hover .spectrum-Textfield-input, .spectrum-Textfield.is-keyboardFocused:hover .spectrum-Textfield-input, .spectrum-Textfield:focus:hover .spectrum-Textfield-input`, `.spectrum-Textfield-input:focus:hover::placeholder, .spectrum-Textfield.is-focused:hover .spectrum-Textfield-input::placeholder, .spectrum-Textfield.is-keyboardFocused:hover .spectrum-Textfield-input::placeholder, .spectrum-Textfield:focus:hover .spectrum-Textfield-input::placeholder`.
Defaults to `var(--spectrum-textfield-text-color-focus-hover)`, if not set.",
+ "control": "color",
+ "category": "Modifier"
+ },
+ "mod-textfield-border-color-invalid-hover": {
+ "description": "Used by `.spectrum-Textfield.is-invalid:hover:not(.is-disabled, .is-readOnly) .spectrum-Textfield-input, .spectrum-Textfield.is-invalid:not(.is-disabled, .is-readOnly) .spectrum-Textfield-input:hover`.
Defaults to `var(--spectrum-textfield-border-color-invalid-hover)`, if not set.",
+ "control": "color",
+ "category": "Modifier"
+ },
+ "mod-textfield-border-color-invalid-focus-hover": {
+ "description": "Used by `.spectrum-Textfield.is-invalid .spectrum-Textfield-input:focus:hover, .spectrum-Textfield.is-invalid.is-focused .spectrum-Textfield-input:hover, .spectrum-Textfield.is-invalid.is-focused:hover .spectrum-Textfield-input, .spectrum-Textfield.is-invalid.is-keyboardFocused:hover .spectrum-Textfield-input, .spectrum-Textfield.is-invalid:focus .spectrum-Textfield-input:hover, .spectrum-Textfield.is-invalid:focus:hover .spectrum-Textfield-input`.
Defaults to `var(--spectrum-textfield-border-color-invalid-focus-hover)`, if not set.",
+ "control": "color",
+ "category": "Modifier"
+ },
+ "mod-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": {
+ "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": {
+ "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": {
+ "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": {
+ "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"
+ }
+ },
+ "component": {
+ "spectrum-textfield-animation-duration": {
+ "value": "var(--spectrum-animation-duration-100)",
+ "description": "Defined in `.spectrum-Textfield`.
Used by `.spectrum-Textfield-input`, `.spectrum-Textfield-input::placeholder`.
Defaults to `var(--spectrum-animation-duration-100)`, if not set.",
+ "control": "text",
+ "category": "Component"
+ },
+ "spectrum-textfield-height": {
+ "value": "48px",
+ "description": "Defined in `.spectrum-Textfield`, `.spectrum-Textfield--sizeS`, `.spectrum-Textfield--sizeL`, `.spectrum-Textfield--sizeXL`.
Used by `--spectrum-textfield-min-width`, `--spectrum-textfield-input-line-height`, `.spectrum-Textfield-input`.
Defaults to `var(--spectrum-component-height-300)`, if not set.",
+ "control": "text",
+ "category": "Component"
+ },
+ "spectrum-textfield-width": {
+ "value": "240px",
+ "description": "Defined in `.spectrum-Textfield`, `.spectrum-Textfield--sizeS`, `.spectrum-Textfield--sizeL`, `.spectrum-Textfield--sizeXL`.
Used by `.spectrum-Textfield`.
Defaults to `var(--spectrum-field-default-width-extra-large)`, if not set.",
+ "control": "text",
+ "category": "Component"
+ },
+ "spectrum-textfield-min-width": {
+ "value": "calc(var(--spectrum-textfield-height) * var(--spectrum-text-field-minimum-width-multiplier))",
+ "description": "Defined in `.spectrum-Textfield`.
Used by `.spectrum-Textfield-input`.
Defaults to `calc(var(--spectrum-textfield-height) * var(--spectrum-text-field-minimum-width-multiplier))`, if not set.",
+ "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-border-width": {
+ "value": "2px",
+ "description": "Defined in `.spectrum-Textfield`.
Used by `.spectrum-Textfield-input`, `.spectrum-Textfield.is-valid .spectrum-Textfield-input`, `.spectrum-Textfield.is-invalid .spectrum-Textfield-input`.
Defaults to `var(--spectrum-border-width-200)`, if not set.",
+ "control": "text",
+ "category": "Component"
+ },
+ "spectrum-textfield-corner-radius": {
+ "value": "10px",
+ "description": "Defined in `.spectrum-Textfield`, `.spectrum-Textfield--sizeS`, `.spectrum-Textfield--sizeL`, `.spectrum-Textfield--sizeXL`.
Used by `.spectrum-Textfield-characterCount`, `.spectrum-Textfield-input`.
Defaults to `var(--spectrum-corner-radius-medium-size-extra-large)`, if not set.",
+ "control": "text",
+ "category": "Component"
+ },
+ "spectrum-textfield-spacing-inline": {
+ "value": "18px",
+ "description": "Defined in `.spectrum-Textfield`, `.spectrum-Textfield--sizeS`, `.spectrum-Textfield--sizeL`, `.spectrum-Textfield--sizeXL`.
Used by `.spectrum-Textfield-input`.
Defaults to `var(--spectrum-component-edge-to-text-300)`, if not set.",
+ "control": "text",
+ "category": "Component"
+ },
+ "spectrum-textfield-spacing-block-start": {
+ "value": "12px",
+ "description": "Defined in `.spectrum-Textfield`, `.spectrum-Textfield--sizeS`, `.spectrum-Textfield--sizeL`, `.spectrum-Textfield--sizeXL`.
Used by `.spectrum-Textfield-input`.
Defaults to `var(--spectrum-component-top-to-text-300)`, if not set.",
+ "control": "text",
+ "category": "Component"
+ },
+ "spectrum-textfield-spacing-block-end": {
+ "value": "14px",
+ "description": "Defined in `.spectrum-Textfield`, `.spectrum-Textfield--sizeS`, `.spectrum-Textfield--sizeL`, `.spectrum-Textfield--sizeXL`.
Used by `.spectrum-Textfield-input`.
Defaults to `var(--spectrum-component-bottom-to-text-300)`, if not set.",
+ "control": "text",
+ "category": "Component"
+ },
+ "spectrum-textfield-label-spacing-block": {
+ "value": "0px",
+ "description": "Defined in `.spectrum-Textfield`.
Used by `.spectrum-Textfield .spectrum-FieldLabel`.
Defaults to `var(--spectrum-field-label-to-component)`, if not set.",
+ "control": "text",
+ "category": "Component"
+ },
+ "spectrum-textfield-label-spacing-inline-side-label": {
+ "value": "12px",
+ "description": "Defined in `.spectrum-Textfield`.
Used by `.spectrum-Textfield--sideLabel .spectrum-FieldLabel`.
Defaults to `var(--spectrum-spacing-200)`, if not set.",
+ "control": "text",
+ "category": "Component"
+ },
+ "spectrum-textfield-helptext-spacing-block": {
+ "value": "0px",
+ "description": "Defined in `.spectrum-Textfield`.
Used by `.spectrum-Textfield .spectrum-HelpText`.
Defaults to `var(--spectrum-help-text-to-component)`, if not set.",
+ "control": "text",
+ "category": "Component"
+ },
+ "spectrum-textfield-icon-size-invalid": {
+ "value": "26px",
+ "description": "Defined in `.spectrum-Textfield`, `.spectrum-Textfield--sizeS`, `.spectrum-Textfield--sizeL`, `.spectrum-Textfield--sizeXL`.
Used by `.spectrum-Textfield.is-invalid .spectrum-Textfield-validationIcon`, `.spectrum-Textfield.is-invalid .spectrum-Textfield-input`.
Defaults to `var(--spectrum-workflow-icon-size-300)`, if not set.",
+ "control": "text",
+ "category": "Component"
+ },
+ "spectrum-textfield-icon-size-valid": {
+ "value": "14px",
+ "description": "Defined in `.spectrum-Textfield`, `.spectrum-Textfield--sizeS`, `.spectrum-Textfield--sizeL`, `.spectrum-Textfield--sizeXL`.
Used by `.spectrum-Textfield.is-valid .spectrum-Textfield-input`.
Defaults to `var(--spectrum-checkmark-icon-size-300)`, if not set.",
+ "control": "text",
+ "category": "Component"
+ },
+ "spectrum-textfield-icon-spacing-inline-start-invalid": {
+ "value": "8px",
+ "description": "Defined in `.spectrum-Textfield`, `.spectrum-Textfield--sizeS`, `.spectrum-Textfield--sizeL`, `.spectrum-Textfield--sizeXL`.
Used by `.spectrum-Textfield.is-invalid .spectrum-Textfield-input`.
Defaults to `var(--spectrum-text-to-visual-300)`, if not set.",
+ "control": "text",
+ "category": "Component"
+ },
+ "spectrum-textfield-icon-spacing-inline-end-invalid": {
+ "value": "18px",
+ "description": "Defined in `.spectrum-Textfield`, `.spectrum-Textfield--sizeS`, `.spectrum-Textfield--sizeL`, `.spectrum-Textfield--sizeXL`.
Used by `.spectrum-Textfield.is-invalid .spectrum-Textfield-validationIcon`, `.spectrum-Textfield.is-invalid .spectrum-Textfield-input`.
Defaults to `var(--spectrum-field-edge-to-alert-icon-extra-large)`, if not set.",
+ "control": "text",
+ "category": "Component"
+ },
+ "spectrum-textfield-icon-spacing-block-invalid": {
+ "value": "11px",
+ "description": "Defined in `.spectrum-Textfield`, `.spectrum-Textfield--sizeS`, `.spectrum-Textfield--sizeL`, `.spectrum-Textfield--sizeXL`.
Used by `.spectrum-Textfield.is-invalid .spectrum-Textfield-validationIcon`.
Defaults to `var(--spectrum-component-top-to-workflow-icon-300)`, if not set.",
+ "control": "text",
+ "category": "Component"
+ },
+ "spectrum-textfield-icon-spacing-inline-start-valid": {
+ "value": "8px",
+ "description": "Defined in `.spectrum-Textfield`, `.spectrum-Textfield--sizeS`, `.spectrum-Textfield--sizeL`, `.spectrum-Textfield--sizeXL`.
Used by `.spectrum-Textfield.is-valid .spectrum-Textfield-input`.
Defaults to `var(--spectrum-text-to-visual-300)`, if not set.",
+ "control": "text",
+ "category": "Component"
+ },
+ "spectrum-textfield-icon-spacing-inline-end-valid": {
+ "value": "18px",
+ "description": "Defined in `.spectrum-Textfield`, `.spectrum-Textfield--sizeS`, `.spectrum-Textfield--sizeL`, `.spectrum-Textfield--sizeXL`.
Used by `.spectrum-Textfield.is-valid .spectrum-Textfield-validationIcon`, `.spectrum-Textfield.is-valid .spectrum-Textfield-input`.
Defaults to `var(--spectrum-field-edge-to-validation-icon-extra-large)`, if not set.",
+ "control": "text",
+ "category": "Component"
+ },
+ "spectrum-textfield-icon-spacing-block-valid": {
+ "value": "17px",
+ "description": "Defined in `.spectrum-Textfield`, `.spectrum-Textfield--sizeS`, `.spectrum-Textfield--sizeL`, `.spectrum-Textfield--sizeXL`.
Used by `.spectrum-Textfield.is-valid .spectrum-Textfield-validationIcon`.
Defaults to `var(--spectrum-field-top-to-validation-icon-extra-large)`, if not set.",
+ "control": "text",
+ "category": "Component"
+ },
+ "spectrum-textfield-font-family": {
+ "value": "var(--spectrum-sans-font-family-stack)",
+ "description": "Defined in `.spectrum-Textfield`.
Used by `.spectrum-Textfield-characterCount`, `.spectrum-Textfield-input`, `.spectrum-Textfield-input::placeholder`.
Defaults to `var(--spectrum-sans-font-family-stack)`, if not set.",
+ "control": "text",
+ "category": "Component"
+ },
+ "spectrum-textfield-font-weight": {
+ "value": "400",
+ "description": "Defined in `.spectrum-Textfield`.
Used by `.spectrum-Textfield-characterCount`, `.spectrum-Textfield-input`, `.spectrum-Textfield-input::placeholder`.
Defaults to `var(--spectrum-regular-font-weight)`, if not set.",
+ "control": "text",
+ "category": "Component"
+ },
+ "spectrum-textfield-font-style": {
+ "value": "normal",
+ "description": "Defined in `.spectrum-Textfield`.
Used by `.spectrum-Textfield-characterCount`, `.spectrum-Textfield-input`, `.spectrum-Textfield-input::placeholder`.
Defaults to `var(--spectrum-default-font-style)`, if not set.",
+ "control": "text",
+ "category": "Component"
+ },
+ "spectrum-textfield-font-size": {
+ "value": "18px",
+ "description": "Defined in `.spectrum-Textfield`, `.spectrum-Textfield--sizeS`, `.spectrum-Textfield--sizeL`, `.spectrum-Textfield--sizeXL`.
Used by `.spectrum-Textfield-characterCount`, `.spectrum-Textfield-input`, `.spectrum-Textfield-input::placeholder`.
Defaults to `var(--spectrum-font-size-300)`, if not set.",
+ "control": "text",
+ "category": "Component"
+ },
+ "spectrum-textfield-line-height": {
+ "value": "var(--mod-textfield-line-height-cjk, var(--spectrum-textfield-line-height-cjk))",
+ "description": "Defined in `.spectrum-Textfield`, `.spectrum-Textfield-characterCount:lang(ja), .spectrum-Textfield-characterCount:lang(ko), .spectrum-Textfield-characterCount:lang(zh)`, `.spectrum-Textfield--multiline .spectrum-Textfield-input:lang(ja), .spectrum-Textfield--multiline .spectrum-Textfield-input:lang(ko), .spectrum-Textfield--multiline .spectrum-Textfield-input:lang(zh)`.
Used by `.spectrum-Textfield-characterCount`, `.spectrum-Textfield--multiline .spectrum-Textfield-input`.
Defaults to `var(--mod-textfield-line-height-cjk, var(--spectrum-textfield-line-height-cjk))`, if not set.",
+ "control": "text",
+ "category": "Component"
+ },
+ "spectrum-textfield-line-height-cjk": {
+ "value": "1.5",
+ "description": "Defined in `.spectrum-Textfield`.
Used by `--spectrum-textfield-line-height`.
Defaults to `var(--spectrum-cjk-line-height-100)`, if not set.",
+ "control": "text",
+ "category": "Component"
+ },
+ "spectrum-textfield-input-line-height": {
+ "value": "var(--spectrum-textfield-height)",
+ "description": "Defined in `.spectrum-Textfield`.
Used by `.spectrum-Textfield-input`.
Defaults to `var(--spectrum-textfield-height)`, if not set.",
+ "control": "text",
+ "category": "Component"
+ },
+ "spectrum-textfield-character-count-color": {
+ "value": "var(--spectrum-gray-700)",
+ "description": "Defined in `.spectrum-Textfield`.
Used by `.spectrum-Textfield-characterCount`.
Defaults to `var(--spectrum-neutral-subdued-content-color-default)`, if not set.",
+ "control": "color",
+ "category": "Component"
+ },
+ "spectrum-textfield-character-count-spacing-inline": {
+ "value": "12px",
+ "description": "Defined in `.spectrum-Textfield`.
Used by `.spectrum-Textfield-characterCount`.
Defaults to `var(--spectrum-spacing-200)`, if not set.",
+ "control": "text",
+ "category": "Component"
+ },
+ "spectrum-textfield-character-count-spacing-block": {
+ "value": "14px",
+ "description": "Defined in `.spectrum-Textfield`, `.spectrum-Textfield--sizeS`, `.spectrum-Textfield--sizeL`, `.spectrum-Textfield--sizeXL`.
Used by `.spectrum-Textfield-characterCount`.
Defaults to `var(--spectrum-component-bottom-to-text-300)`, if not set.",
+ "control": "text",
+ "category": "Component"
+ },
+ "spectrum-textfield-character-count-spacing-inline-side": {
+ "value": "12px",
+ "description": "Defined in `.spectrum-Textfield`.
Used by `.spectrum-Textfield--sideLabel .spectrum-Textfield-characterCount`.
Defaults to `var(--spectrum-side-label-character-count-to-field)`, if not set.",
+ "control": "text",
+ "category": "Component"
+ },
+ "spectrum-textfield-character-count-spacing-block-side": {
+ "value": "12px",
+ "description": "Defined in `.spectrum-Textfield`, `.spectrum-Textfield--sizeS`, `.spectrum-Textfield--sizeL`, `.spectrum-Textfield--sizeXL`.
Used by `.spectrum-Textfield--sideLabel .spectrum-Textfield-characterCount`.
Defaults to `var(--spectrum-component-top-to-text-300)`, if not set.",
+ "control": "text",
+ "category": "Component"
+ },
+ "spectrum-textfield-focus-indicator-width": {
+ "value": "2px",
+ "description": "Defined in `.spectrum-Textfield`.
Used by `.spectrum-Textfield.is-keyboardFocused .spectrum-Textfield-input`.
Defaults to `var(--spectrum-focus-indicator-thickness)`, if not set.",
+ "control": "text",
+ "category": "Component"
+ },
+ "spectrum-textfield-focus-indicator-gap": {
+ "value": "2px",
+ "description": "Defined in `.spectrum-Textfield`.
Used by `.spectrum-Textfield.is-keyboardFocused .spectrum-Textfield-input`.
Defaults to `var(--spectrum-focus-indicator-gap)`, if not set.",
+ "control": "text",
+ "category": "Component"
+ },
+ "spectrum-textfield-background-color": {
+ "value": "var(--mod-textfield-background-color, var(--spectrum-gray-25))",
+ "description": "Defined in `.spectrum-Textfield`.
Used by `.spectrum-Textfield-input`.
Defaults to `var(--mod-textfield-background-color, var(--spectrum-gray-25))`, if not set.",
+ "control": "color",
+ "category": "Component"
+ },
+ "spectrum-textfield-border-color": {
+ "value": "light-dark(rgb(218, 218, 218), rgb(57, 57, 57))",
+ "description": "Defined in `.spectrum-Textfield`.
Used by `.spectrum-Textfield-input`.
Defaults to `var(--spectrum-gray-300)`, if not set.",
+ "control": "color",
+ "category": "Component"
+ },
+ "spectrum-textfield-border-color-hover": {
+ "value": "light-dark(rgb(198, 198, 198), rgb(68, 68, 68))",
+ "description": "Defined in `.spectrum-Textfield`.
Used by `.spectrum-Textfield-input:hover, .spectrum-Textfield:hover .spectrum-Textfield-input`.
Defaults to `var(--spectrum-gray-400)`, if not set.",
+ "control": "color",
+ "category": "Component"
+ },
+ "spectrum-textfield-border-color-focus": {
+ "value": "light-dark(rgb(41, 41, 41), rgb(219, 219, 219))",
+ "description": "Defined in `.spectrum-Textfield`.
Used by `.spectrum-Textfield-input:focus, .spectrum-Textfield.is-focused .spectrum-Textfield-input`.
Defaults to `var(--spectrum-gray-800)`, if not set.",
+ "control": "color",
+ "category": "Component"
+ },
+ "spectrum-textfield-border-color-focus-hover": {
+ "value": "light-dark(rgb(19, 19, 19), rgb(242, 242, 242))",
+ "description": "Defined in `.spectrum-Textfield`.
Used by `.spectrum-Textfield-input:focus:hover, .spectrum-Textfield.is-focused .spectrum-Textfield-input:hover`, `.spectrum-Textfield-input:focus:hover, .spectrum-Textfield.is-focused:hover .spectrum-Textfield-input, .spectrum-Textfield.is-keyboardFocused:hover .spectrum-Textfield-input, .spectrum-Textfield:focus:hover .spectrum-Textfield-input`.
Defaults to `var(--spectrum-gray-900)`, if not set.",
+ "control": "color",
+ "category": "Component"
+ },
+ "spectrum-textfield-border-color-keyboard-focus": {
+ "value": "light-dark(rgb(41, 41, 41), rgb(219, 219, 219))",
+ "description": "Defined in `.spectrum-Textfield`.
Used by `.spectrum-Textfield.is-keyboardFocused .spectrum-Textfield-input`.
Defaults to `var(--spectrum-gray-800)`, if not set.",
+ "control": "color",
+ "category": "Component"
+ },
+ "spectrum-textfield-text-color-default": {
+ "value": "var(--spectrum-gray-800)",
+ "description": "Defined in `.spectrum-Textfield`.
Used by `.spectrum-Textfield-input`, `.spectrum-Textfield-input::placeholder`.
Defaults to `var(--spectrum-neutral-content-color-default)`, if not set.",
+ "control": "color",
+ "category": "Component"
+ },
+ "spectrum-textfield-text-color-hover": {
+ "value": "var(--spectrum-gray-900)",
+ "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`.
Defaults to `var(--spectrum-neutral-content-color-hover)`, if not set.",
+ "control": "color",
+ "category": "Component"
+ },
+ "spectrum-textfield-text-color-focus": {
+ "value": "var(--spectrum-neutral-content-color-down)",
+ "description": "Defined in `.spectrum-Textfield`.
Used by `.spectrum-Textfield-input:focus, .spectrum-Textfield-input:focus::placeholder, .spectrum-Textfield.is-focused .spectrum-Textfield-input, .spectrum-Textfield.is-focused .spectrum-Textfield-input::placeholder`.
Defaults to `var(--spectrum-neutral-content-color-focus)`, if not set.",
+ "control": "color",
+ "category": "Component"
+ },
+ "spectrum-textfield-text-color-focus-hover": {
+ "value": "var(--spectrum-neutral-content-color-down)",
+ "description": "Defined in `.spectrum-Textfield`.
Used by `.spectrum-Textfield-input:focus:hover, .spectrum-Textfield-input:focus:hover::placeholder, .spectrum-Textfield.is-focused .spectrum-Textfield-input:hover, .spectrum-Textfield.is-focused .spectrum-Textfield-input:hover::placeholder`, `.spectrum-Textfield-input:focus:hover, .spectrum-Textfield.is-focused:hover .spectrum-Textfield-input, .spectrum-Textfield.is-keyboardFocused:hover .spectrum-Textfield-input, .spectrum-Textfield:focus:hover .spectrum-Textfield-input`, `.spectrum-Textfield-input:focus:hover::placeholder, .spectrum-Textfield.is-focused:hover .spectrum-Textfield-input::placeholder, .spectrum-Textfield.is-keyboardFocused:hover .spectrum-Textfield-input::placeholder, .spectrum-Textfield:focus:hover .spectrum-Textfield-input::placeholder`.
Defaults to `var(--spectrum-neutral-content-color-focus-hover)`, if not set.",
+ "control": "color",
+ "category": "Component"
+ },
+ "spectrum-textfield-text-color-keyboard-focus": {
+ "value": "var(--spectrum-gray-900)",
+ "description": "Defined in `.spectrum-Textfield`.
Used by `.spectrum-Textfield.is-keyboardFocused .spectrum-Textfield-input, .spectrum-Textfield.is-keyboardFocused .spectrum-Textfield-input::placeholder`.
Defaults to `var(--spectrum-neutral-content-color-key-focus)`, if not set.",
+ "control": "color",
+ "category": "Component"
+ },
+ "spectrum-textfield-text-color-readonly": {
+ "value": "var(--spectrum-gray-800)",
+ "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`.
Defaults to `var(--spectrum-neutral-content-color-default)`, if not set.",
+ "control": "color",
+ "category": "Component"
+ },
+ "spectrum-textfield-background-color-disabled": {
+ "value": "var(--highcontrast-textfield-background-color-disabled, var(--mod-textfield-background-color-disabled, var(--spectrum-gray-25)))",
+ "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`.
Defaults to `var(--highcontrast-textfield-background-color-disabled, var(--mod-textfield-background-color-disabled, var(--spectrum-gray-25)))`, if not set.",
+ "control": "color",
+ "category": "Component"
+ },
+ "spectrum-textfield-border-color-disabled": {
+ "value": "var(--highcontrast-textfield-border-color-disabled, var(--mod-textfield-border-color-disabled, var(--spectrum-disabled-border-color)))",
+ "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`.
Defaults to `var(--highcontrast-textfield-border-color-disabled, var(--mod-textfield-border-color-disabled, var(--spectrum-disabled-border-color)))`, if not set.",
+ "control": "color",
+ "category": "Component"
+ },
+ "spectrum-textfield-text-color-disabled": {
+ "value": "var(--spectrum-gray-400)",
+ "description": "Defined in `.spectrum-Textfield`.
Used by `.spectrum-Textfield.is-disabled .spectrum-FieldLabel`, `.spectrum-Textfield.is-disabled .spectrum-HelpText .spectrum-HelpText-text`, `.spectrum-Textfield.is-disabled .spectrum-Textfield-characterCount`, `.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.is-disabled .spectrum-Textfield-input:read-only::placeholder, .spectrum-Textfield.is-disabled .spectrum-Textfield.is-readOnly .spectrum-Textfield-input::placeholder`, `.spectrum-Textfield.is-disabled:hover .spectrum-Textfield-input, .spectrum-Textfield.is-disabled:hover .spectrum-Textfield-input::placeholder`, `.spectrum-Textfield.is-disabled .spectrum-Textfield.is-readOnly:hover .spectrum-Textfield-input::placeholder, .spectrum-Textfield.is-disabled:hover .spectrum-Textfield-input:read-only::placeholder, .spectrum-Textfield.is-disabled:hover .spectrum-Textfield.is-readOnly .spectrum-Textfield-input::placeholder, .spectrum-Textfield.is-disabled:hover .spectrum-Textfield.is-readOnly:hover .spectrum-Textfield-input::placeholder`, `.spectrum-Textfield.is-readOnly.is-disabled .spectrum-Textfield-input`.
Defaults to `var(--spectrum-disabled-content-color)`, if not set.",
+ "control": "color",
+ "category": "Component"
+ },
+ "spectrum-textfield-border-color-invalid-default": {
+ "value": "var(--spectrum-negative-color-900)",
+ "description": "Defined in `.spectrum-Textfield`.
Used by `.spectrum-Textfield.is-invalid .spectrum-Textfield-input`.
Defaults to `var(--spectrum-negative-border-color-default)`, if not set.",
+ "control": "color",
+ "category": "Component"
+ },
+ "spectrum-textfield-border-color-invalid-hover": {
+ "value": "var(--spectrum-negative-color-1000)",
+ "description": "Defined in `.spectrum-Textfield`.
Used by `.spectrum-Textfield.is-invalid:hover:not(.is-disabled, .is-readOnly) .spectrum-Textfield-input, .spectrum-Textfield.is-invalid:not(.is-disabled, .is-readOnly) .spectrum-Textfield-input:hover`.
Defaults to `var(--spectrum-negative-border-color-hover)`, if not set.",
+ "control": "color",
+ "category": "Component"
+ },
+ "spectrum-textfield-border-color-invalid-focus": {
+ "value": "var(--spectrum-negative-color-1000)",
+ "description": "Defined in `.spectrum-Textfield`.
Used by `.spectrum-Textfield.is-invalid .spectrum-Textfield-input:focus, .spectrum-Textfield.is-invalid.is-focused .spectrum-Textfield-input, .spectrum-Textfield.is-invalid:focus .spectrum-Textfield-input`.
Defaults to `var(--spectrum-negative-border-color-focus)`, if not set.",
+ "control": "color",
+ "category": "Component"
+ },
+ "spectrum-textfield-border-color-invalid-focus-hover": {
+ "value": "var(--spectrum-negative-border-color-down)",
+ "description": "Defined in `.spectrum-Textfield`.
Used by `.spectrum-Textfield.is-invalid .spectrum-Textfield-input:focus:hover, .spectrum-Textfield.is-invalid.is-focused .spectrum-Textfield-input:hover, .spectrum-Textfield.is-invalid.is-focused:hover .spectrum-Textfield-input, .spectrum-Textfield.is-invalid.is-keyboardFocused:hover .spectrum-Textfield-input, .spectrum-Textfield.is-invalid:focus .spectrum-Textfield-input:hover, .spectrum-Textfield.is-invalid:focus:hover .spectrum-Textfield-input`.
Defaults to `var(--spectrum-negative-border-color-focus-hover)`, if not set.",
+ "control": "color",
+ "category": "Component"
+ },
+ "spectrum-textfield-border-color-invalid-keyboard-focus": {
+ "value": "var(--spectrum-negative-color-1000)",
+ "description": "Defined in `.spectrum-Textfield`.
Used by `.spectrum-Textfield.is-invalid.is-keyboardFocused .spectrum-Textfield-input`.
Defaults to `var(--spectrum-negative-border-color-key-focus)`, if not set.",
+ "control": "color",
+ "category": "Component"
+ },
+ "spectrum-textfield-icon-color-invalid": {
+ "value": "var(--spectrum-negative-color-800)",
+ "description": "Defined in `.spectrum-Textfield`.
Used by `.spectrum-Textfield.is-invalid .spectrum-Textfield-validationIcon`.
Defaults to `var(--spectrum-negative-visual-color)`, if not set.",
+ "control": "color",
+ "category": "Component"
+ },
+ "spectrum-textfield-text-color-invalid": {
+ "value": "var(--spectrum-gray-800)",
+ "description": "Defined in `.spectrum-Textfield`.
Used by `.spectrum-Textfield.is-invalid .spectrum-Textfield-input`.
Defaults to `var(--spectrum-neutral-content-color-default)`, if not set.",
+ "control": "color",
+ "category": "Component"
+ },
+ "spectrum-textfield-text-color-valid": {
+ "value": "var(--spectrum-gray-800)",
+ "description": "Defined in `.spectrum-Textfield`.
Used by `.spectrum-Textfield.is-valid .spectrum-Textfield-input`.
Defaults to `var(--spectrum-neutral-content-color-default)`, if not set.",
+ "control": "color",
+ "category": "Component"
+ },
+ "spectrum-textfield-icon-color-valid": {
+ "value": "var(--spectrum-positive-color-800)",
+ "description": "Defined in `.spectrum-Textfield`.
Used by `.spectrum-Textfield.is-valid .spectrum-Textfield-validationIcon`.
Defaults to `var(--spectrum-positive-visual-color)`, if not set.",
+ "control": "color",
+ "category": "Component"
+ },
+ "spectrum-textfield-focus-indicator-color": {
+ "value": "var(--spectrum-blue-800)",
+ "description": "Defined in `.spectrum-Textfield`.
Used by `.spectrum-Textfield.is-keyboardFocused .spectrum-Textfield-input`.
Defaults to `var(--spectrum-focus-indicator-color)`, if not set.",
+ "control": "color",
+ "category": "Component"
+ }
+ },
+ "global": {
+ "spectrum-animation-duration-100": {
+ "description": "Used by `--spectrum-textfield-animation-duration`.",
+ "control": "text",
+ "category": "Global"
+ },
+ "spectrum-component-height-100": {
+ "value": "32px",
+ "description": "Used by `--spectrum-textfield-height`.",
+ "control": "text",
+ "category": "Global"
+ },
+ "spectrum-field-default-width-medium": {
+ "value": "208px",
+ "description": "Used by `--spectrum-textfield-width`.",
+ "control": "text",
+ "category": "Global"
+ },
+ "spectrum-border-width-200": {
+ "value": "2px",
+ "description": "Used by `--spectrum-textfield-border-width`.",
+ "control": "text",
+ "category": "Global"
+ },
+ "spectrum-corner-radius-medium-size-medium": {
+ "value": "8px",
+ "description": "Used by `--spectrum-textfield-corner-radius`.",
+ "control": "text",
+ "category": "Global"
+ },
+ "spectrum-component-edge-to-text-100": {
+ "value": "12px",
+ "description": "Used by `--spectrum-textfield-spacing-inline`.",
+ "control": "text",
+ "category": "Global"
+ },
+ "spectrum-component-top-to-text-100": {
+ "value": "6px",
+ "description": "Used by `--spectrum-textfield-spacing-block-start`, `--spectrum-textfield-character-count-spacing-block-side`.",
+ "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-label-to-component": {
+ "value": "0px",
+ "description": "Used by `--spectrum-textfield-label-spacing-block`.",
+ "control": "text",
+ "category": "Global"
+ },
+ "spectrum-spacing-200": {
+ "value": "12px",
+ "description": "Used by `--spectrum-textfield-label-spacing-inline-side-label`, `--spectrum-textfield-character-count-spacing-inline`.",
+ "control": "text",
+ "category": "Global"
+ },
+ "spectrum-help-text-to-component": {
+ "value": "0px",
+ "description": "Used by `--spectrum-textfield-helptext-spacing-block`.",
+ "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-text-to-visual-100": {
+ "value": "6px",
+ "description": "Used by `--spectrum-textfield-icon-spacing-inline-start-invalid`, `--spectrum-textfield-icon-spacing-inline-start-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-component-top-to-workflow-icon-100": {
+ "value": "6px",
+ "description": "Used by `--spectrum-textfield-icon-spacing-block-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-sans-font-family-stack": {
+ "description": "Used by `--spectrum-textfield-font-family`.",
+ "control": "text",
+ "category": "Global"
+ },
+ "spectrum-regular-font-weight": {
+ "value": "400",
+ "description": "Used by `--spectrum-textfield-font-weight`.",
+ "control": "text",
+ "category": "Global"
+ },
+ "spectrum-default-font-style": {
+ "value": "normal",
+ "description": "Used by `--spectrum-textfield-font-style`.",
+ "control": "text",
+ "category": "Global"
+ },
+ "spectrum-font-size-100": {
+ "value": "14px",
+ "description": "Used by `--spectrum-textfield-font-size`.",
+ "control": "text",
+ "category": "Global"
+ },
+ "spectrum-line-height-100": {
+ "value": "1.3",
+ "description": "Used by `--spectrum-textfield-line-height`.",
+ "control": "text",
+ "category": "Global"
+ },
+ "spectrum-cjk-line-height-100": {
+ "value": "1.5",
+ "description": "Used by `--spectrum-textfield-line-height-cjk`.",
+ "control": "text",
+ "category": "Global"
+ },
+ "spectrum-neutral-subdued-content-color-default": {
+ "value": "var(--spectrum-gray-700)",
+ "description": "Used by `--spectrum-textfield-character-count-color`.",
+ "control": "color",
+ "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-gray-25": {
+ "value": "light-dark(rgb(255, 255, 255), rgb(17, 17, 17))",
+ "description": "Used by `--spectrum-textfield-background-color`, `--spectrum-textfield-background-color-disabled`.",
+ "control": "text",
+ "category": "Global"
+ },
+ "spectrum-gray-300": {
+ "value": "light-dark(rgb(218, 218, 218), rgb(57, 57, 57))",
+ "description": "Used by `--spectrum-textfield-border-color`.",
+ "control": "text",
+ "category": "Global"
+ },
+ "spectrum-gray-400": {
+ "value": "light-dark(rgb(198, 198, 198), rgb(68, 68, 68))",
+ "description": "Used by `--spectrum-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 `--spectrum-textfield-border-color-focus`, `--spectrum-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 `--spectrum-textfield-border-color-focus-hover`.",
+ "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-border-color": {
+ "value": "var(--spectrum-gray-300)",
+ "description": "Used by `--spectrum-textfield-border-color-disabled`.",
+ "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-800)",
+ "description": "Used by `--spectrum-textfield-icon-color-invalid`.",
+ "control": "color",
+ "category": "Global"
+ },
+ "spectrum-positive-visual-color": {
+ "value": "var(--spectrum-positive-color-800)",
+ "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": {
+ "value": "112px",
+ "description": "Defined in `.spectrum-Textfield`.
Used by `.spectrum-Textfield--multiline .spectrum-Textfield-input`.
Defaults to `var(--spectrum-text-area-minimum-width)`, if not set.",
+ "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": {
+ "value": "56px",
+ "description": "Defined in `.spectrum-Textfield`.
Used by `.spectrum-Textfield--multiline .spectrum-Textfield-input`.
Defaults to `var(--spectrum-text-area-minimum-height)`, if not set.",
+ "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-75": {
+ "value": "24px",
+ "description": "Used by `--spectrum-textfield-height`.",
+ "control": "text",
+ "category": "Global"
+ },
+ "spectrum-field-default-width-small": {
+ "value": "192px",
+ "description": "Used by `--spectrum-textfield-width`.",
+ "control": "text",
+ "category": "Global"
+ },
+ "spectrum-corner-radius-medium-size-small": {
+ "value": "7px",
+ "description": "Used by `--spectrum-textfield-corner-radius`.",
+ "control": "text",
+ "category": "Global"
+ },
+ "spectrum-component-edge-to-text-75": {
+ "value": "9px",
+ "description": "Used by `--spectrum-textfield-spacing-inline`.",
+ "control": "text",
+ "category": "Global"
+ },
+ "spectrum-component-top-to-text-75": {
+ "value": "4px",
+ "description": "Used by `--spectrum-textfield-spacing-block-start`, `--spectrum-textfield-character-count-spacing-block-side`.",
+ "control": "text",
+ "category": "Global"
+ },
+ "spectrum-component-bottom-to-text-75": {
+ "value": "5px",
+ "description": "Used by `--spectrum-textfield-spacing-block-end`, `--spectrum-textfield-character-count-spacing-block`.",
+ "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-text-to-visual-75": {
+ "value": "5px",
+ "description": "Used by `--spectrum-textfield-icon-spacing-inline-start-invalid`, `--spectrum-textfield-icon-spacing-inline-start-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-component-top-to-workflow-icon-75": {
+ "value": "4px",
+ "description": "Used by `--spectrum-textfield-icon-spacing-block-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-font-size-75": {
+ "value": "12px",
+ "description": "Used by `--spectrum-textfield-font-size`.",
+ "control": "text",
+ "category": "Global"
+ },
+ "spectrum-component-height-200": {
+ "value": "40px",
+ "description": "Used by `--spectrum-textfield-height`.",
+ "control": "text",
+ "category": "Global"
+ },
+ "spectrum-field-default-width-large": {
+ "value": "224px",
+ "description": "Used by `--spectrum-textfield-width`.",
+ "control": "text",
+ "category": "Global"
+ },
+ "spectrum-corner-radius-medium-size-large": {
+ "value": "9px",
+ "description": "Used by `--spectrum-textfield-corner-radius`.",
+ "control": "text",
+ "category": "Global"
+ },
+ "spectrum-component-edge-to-text-200": {
+ "value": "15px",
+ "description": "Used by `--spectrum-textfield-spacing-inline`.",
+ "control": "text",
+ "category": "Global"
+ },
+ "spectrum-component-top-to-text-200": {
+ "value": "9px",
+ "description": "Used by `--spectrum-textfield-spacing-block-start`, `--spectrum-textfield-character-count-spacing-block-side`.",
+ "control": "text",
+ "category": "Global"
+ },
+ "spectrum-component-bottom-to-text-200": {
+ "value": "11px",
+ "description": "Used by `--spectrum-textfield-spacing-block-end`, `--spectrum-textfield-character-count-spacing-block`.",
+ "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-text-to-visual-200": {
+ "value": "7px",
+ "description": "Used by `--spectrum-textfield-icon-spacing-inline-start-invalid`, `--spectrum-textfield-icon-spacing-inline-start-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-component-top-to-workflow-icon-200": {
+ "value": "9px",
+ "description": "Used by `--spectrum-textfield-icon-spacing-block-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-font-size-200": {
+ "value": "16px",
+ "description": "Used by `--spectrum-textfield-font-size`.",
+ "control": "text",
+ "category": "Global"
+ },
+ "spectrum-component-height-300": {
+ "value": "48px",
+ "description": "Used by `--spectrum-textfield-height`.",
+ "control": "text",
+ "category": "Global"
+ },
+ "spectrum-field-default-width-extra-large": {
+ "value": "240px",
+ "description": "Used by `--spectrum-textfield-width`.",
+ "control": "text",
+ "category": "Global"
+ },
+ "spectrum-corner-radius-medium-size-extra-large": {
+ "value": "10px",
+ "description": "Used by `--spectrum-textfield-corner-radius`.",
+ "control": "text",
+ "category": "Global"
+ },
+ "spectrum-component-edge-to-text-300": {
+ "value": "18px",
+ "description": "Used by `--spectrum-textfield-spacing-inline`.",
+ "control": "text",
+ "category": "Global"
+ },
+ "spectrum-component-top-to-text-300": {
+ "value": "12px",
+ "description": "Used by `--spectrum-textfield-spacing-block-start`, `--spectrum-textfield-character-count-spacing-block-side`.",
+ "control": "text",
+ "category": "Global"
+ },
+ "spectrum-component-bottom-to-text-300": {
+ "value": "14px",
+ "description": "Used by `--spectrum-textfield-spacing-block-end`, `--spectrum-textfield-character-count-spacing-block`.",
+ "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-text-to-visual-300": {
+ "value": "8px",
+ "description": "Used by `--spectrum-textfield-icon-spacing-inline-start-invalid`, `--spectrum-textfield-icon-spacing-inline-start-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-component-top-to-workflow-icon-300": {
+ "value": "11px",
+ "description": "Used by `--spectrum-textfield-icon-spacing-block-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-font-size-300": {
+ "value": "18px",
+ "description": "Used by `--spectrum-textfield-font-size`.",
+ "control": "text",
+ "category": "Global"
+ }
+ },
+ "passthroughs": {},
+ "high-contrast": {
+ "highcontrast-textfield-background-color-disabled": {
+ "value": "var(--mod-textfield-background-color-disabled, var(--spectrum-gray-25))",
+ "description": "Defined in `.spectrum-Textfield`.
Used by `--spectrum-textfield-background-color-disabled`.
Defaults to `var(--mod-textfield-background-color-disabled, var(--spectrum-gray-25))`, if not set.",
+ "control": "color"
+ },
+ "highcontrast-textfield-border-color-disabled": {
+ "value": "var(--mod-textfield-border-color-disabled, var(--spectrum-disabled-border-color))",
+ "description": "Defined in `.spectrum-Textfield`.
Used by `--spectrum-textfield-border-color-disabled`, `.spectrum-Textfield.is-readOnly.is-disabled .spectrum-Textfield-input`.
Defaults to `var(--mod-textfield-border-color-disabled, var(--spectrum-disabled-border-color))`, 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 .spectrum-Textfield-input::placeholder`.
Used by `.spectrum-Textfield.is-disabled .spectrum-FieldLabel`, `.spectrum-Textfield.is-disabled .spectrum-HelpText .spectrum-HelpText-text`, `.spectrum-Textfield.is-disabled .spectrum-Textfield-characterCount`, `.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.is-disabled .spectrum-Textfield-input:read-only::placeholder, .spectrum-Textfield.is-disabled .spectrum-Textfield.is-readOnly .spectrum-Textfield-input::placeholder`, `.spectrum-Textfield.is-disabled:hover .spectrum-Textfield-input, .spectrum-Textfield.is-disabled:hover .spectrum-Textfield-input::placeholder`, `.spectrum-Textfield.is-disabled .spectrum-Textfield.is-readOnly:hover .spectrum-Textfield-input::placeholder, .spectrum-Textfield.is-disabled:hover .spectrum-Textfield-input:read-only::placeholder, .spectrum-Textfield.is-disabled:hover .spectrum-Textfield.is-readOnly .spectrum-Textfield-input::placeholder, .spectrum-Textfield.is-disabled:hover .spectrum-Textfield.is-readOnly:hover .spectrum-Textfield-input::placeholder`, `.spectrum-Textfield.is-readOnly.is-disabled .spectrum-Textfield-input`.
Defaults to `var(--mod-textfield-text-color-disabled, var(--spectrum-textfield-text-color-disabled))`, if not set.",
+ "control": "color"
+ },
+ "highcontrast-textfield-background-color": {
+ "value": "var(--spectrum-textfield-background-color)",
+ "description": "Defined in `.spectrum-Textfield`.
Used by `.spectrum-Textfield-input`.
Defaults to `var(--spectrum-textfield-background-color)`, if not set.",
+ "control": "color"
+ },
+ "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 .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 `.spectrum-Textfield-input:focus, .spectrum-Textfield.is-focused .spectrum-Textfield-input`.
Defaults to `var(--mod-textfield-border-color-focus, var(--spectrum-textfield-border-color-focus))`, if not set.",
+ "control": "color"
+ },
+ "highcontrast-textfield-text-color-focus": {
+ "value": "var(--mod-textfield-text-color-focus, var(--spectrum-textfield-text-color-focus))",
+ "description": "Defined in `.spectrum-Textfield, .spectrum-Textfield .spectrum-Textfield-input::placeholder`.
Used by `.spectrum-Textfield-input:focus, .spectrum-Textfield-input:focus::placeholder, .spectrum-Textfield.is-focused .spectrum-Textfield-input, .spectrum-Textfield.is-focused .spectrum-Textfield-input::placeholder`.
Defaults to `var(--mod-textfield-text-color-focus, var(--spectrum-textfield-text-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 `.spectrum-Textfield.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 `.spectrum-Textfield.is-keyboardFocused .spectrum-Textfield-input`.
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 .spectrum-Textfield-input::placeholder`.
Used by `.spectrum-Textfield.is-keyboardFocused .spectrum-Textfield-input, .spectrum-Textfield.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, .spectrum-Textfield .spectrum-Textfield-input::placeholder`.
Used by `.spectrum-Textfield.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, .spectrum-Textfield .spectrum-Textfield-input::placeholder`.
Used by `.spectrum-Textfield.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 `.spectrum-Textfield.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 `.spectrum-Textfield.is-invalid .spectrum-Textfield-input:focus, .spectrum-Textfield.is-invalid.is-focused .spectrum-Textfield-input, .spectrum-Textfield.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 `.spectrum-Textfield.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-border-color-readonly": {
+ "value": "CanvasText",
+ "description": "Defined in `.spectrum-Textfield`.
Used by `.spectrum-Textfield-input:read-only, .spectrum-Textfield.is-readOnly .spectrum-Textfield-input`, `.spectrum-Textfield.is-readOnly:hover .spectrum-Textfield-input`.
Defaults to `CanvasText`, 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 .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 .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-focus-hover": {
+ "value": "var(--mod-textfield-border-color-focus-hover, var(--spectrum-textfield-border-color-focus-hover))",
+ "description": "Defined in `.spectrum-Textfield`.
Used by `.spectrum-Textfield-input:focus:hover, .spectrum-Textfield.is-focused .spectrum-Textfield-input:hover`, `.spectrum-Textfield-input:focus:hover, .spectrum-Textfield.is-focused:hover .spectrum-Textfield-input, .spectrum-Textfield.is-keyboardFocused:hover .spectrum-Textfield-input, .spectrum-Textfield:focus:hover .spectrum-Textfield-input`.
Defaults to `var(--mod-textfield-border-color-focus-hover, var(--spectrum-textfield-border-color-focus-hover))`, if not set.",
+ "control": "color"
+ },
+ "highcontrast-textfield-text-color-focus-hover": {
+ "value": "var(--mod-textfield-text-color-focus-hover, var(--spectrum-textfield-text-color-focus-hover))",
+ "description": "Defined in `.spectrum-Textfield, .spectrum-Textfield .spectrum-Textfield-input::placeholder`.
Used by `.spectrum-Textfield-input:focus:hover, .spectrum-Textfield-input:focus:hover::placeholder, .spectrum-Textfield.is-focused .spectrum-Textfield-input:hover, .spectrum-Textfield.is-focused .spectrum-Textfield-input:hover::placeholder`, `.spectrum-Textfield-input:focus:hover, .spectrum-Textfield.is-focused:hover .spectrum-Textfield-input, .spectrum-Textfield.is-keyboardFocused:hover .spectrum-Textfield-input, .spectrum-Textfield:focus:hover .spectrum-Textfield-input`, `.spectrum-Textfield-input:focus:hover::placeholder, .spectrum-Textfield.is-focused:hover .spectrum-Textfield-input::placeholder, .spectrum-Textfield.is-keyboardFocused:hover .spectrum-Textfield-input::placeholder, .spectrum-Textfield:focus:hover .spectrum-Textfield-input::placeholder`.
Defaults to `var(--mod-textfield-text-color-focus-hover, var(--spectrum-textfield-text-color-focus-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 `.spectrum-Textfield.is-invalid:hover:not(.is-disabled, .is-readOnly) .spectrum-Textfield-input, .spectrum-Textfield.is-invalid:not(.is-disabled, .is-readOnly) .spectrum-Textfield-input:hover`.
Defaults to `var(--mod-textfield-border-color-invalid-hover, var(--spectrum-textfield-border-color-invalid-hover))`, if not set.",
+ "control": "color"
+ },
+ "highcontrast-textfield-border-color-invalid-focus-hover": {
+ "value": "var(--mod-textfield-border-color-invalid-focus-hover, var(--spectrum-textfield-border-color-invalid-focus-hover))",
+ "description": "Defined in `.spectrum-Textfield`.
Used by `.spectrum-Textfield.is-invalid .spectrum-Textfield-input:focus:hover, .spectrum-Textfield.is-invalid.is-focused .spectrum-Textfield-input:hover, .spectrum-Textfield.is-invalid.is-focused:hover .spectrum-Textfield-input, .spectrum-Textfield.is-invalid.is-keyboardFocused:hover .spectrum-Textfield-input, .spectrum-Textfield.is-invalid:focus .spectrum-Textfield-input:hover, .spectrum-Textfield.is-invalid:focus:hover .spectrum-Textfield-input`.
Defaults to `var(--mod-textfield-border-color-invalid-focus-hover, var(--spectrum-textfield-border-color-invalid-focus-hover))`, if not set.",
+ "control": "color"
+ }
+ }
}
diff --git a/components/textfield/stories/template.js b/components/textfield/stories/template.js
index 22d119703e8..5feb0356cbd 100644
--- a/components/textfield/stories/template.js
+++ b/components/textfield/stories/template.js
@@ -53,6 +53,7 @@ import "../index.css";
*/
export const Template = ({
rootClass = "spectrum-Textfield",
+ id = getRandomId("text-field"),
size = "m",
customClasses = [],
customInputClasses = [],
@@ -81,7 +82,6 @@ export const Template = ({
name,
step,
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 2fda3aeded8..8f06ea1dd24 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, InvalidOptionsTextArea, RequiredOptionsTextArea, 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 `