diff --git a/.changeset/eleven-plants-grow.md b/.changeset/eleven-plants-grow.md new file mode 100644 index 00000000000..b08e57e1660 --- /dev/null +++ b/.changeset/eleven-plants-grow.md @@ -0,0 +1,5 @@ +--- +"@spectrum-css/generator": patch +--- + +Update story templates to include the cssprops imports diff --git a/.changeset/new-bulldogs-add.md b/.changeset/new-bulldogs-add.md new file mode 100644 index 00000000000..a5328a1d0ac --- /dev/null +++ b/.changeset/new-bulldogs-add.md @@ -0,0 +1,5 @@ +--- +"@spectrum-css/preview": minor +--- + +New feature: Custom properties panel added to the development preview showing a list of modifiable custom properties as loaded from the metadata/metadata.json resource in each component. diff --git a/.eslintrc b/.eslintrc index f422aa9e96a..d050c2f7d97 100644 --- a/.eslintrc +++ b/.eslintrc @@ -8,6 +8,11 @@ "parserOptions": { "sourceType": "module" }, + "settings": { + "react": { + "version": "detect" + } + }, "extends": "eslint:recommended", "rules": { "brace-style": ["warn", "stroustrup", { "allowSingleLine": true }], @@ -17,7 +22,8 @@ "no-console": ["warn", { "allow": ["warn", "error"] }], "quotes": ["warn", "double"], "semi": ["warn", "always"], - "space-before-blocks": ["warn", "always"] + "space-before-blocks": ["warn", "always"], + "react/jsx-filename-extension": [1, { "extensions": [".js", ".jsx"] }] }, "overrides": [ { @@ -174,6 +180,7 @@ ".storybook/*.js", ".storybook/**/*.js" ], + "extends": ["plugin:react/recommended", "plugin:react/jsx-runtime"], "parserOptions": { "ecmaVersion": "latest", "sourceType": "module", diff --git a/.github/workflows/lint.yml b/.github/workflows/lint.yml index fe2f10c6172..cda84d8a04a 100644 --- a/.github/workflows/lint.yml +++ b/.github/workflows/lint.yml @@ -115,7 +115,7 @@ jobs: reporter: github-pr-review filter_mode: diff_context # eslint_flags: "components/*/stories/*.js" - eslint_flags: "${{ inputs.eslint_added_files }} ${{ inputs.eslint_modified_files }}" + eslint_flags: "--config ${{ github.workspace }}/.eslintrc ${{ inputs.eslint_added_files }} ${{ inputs.eslint_modified_files }}" - name: Run markdownlint on documentation uses: reviewdog/action-markdownlint@v0.26.2 diff --git a/.storybook/assets/base.css b/.storybook/assets/base.css index 98841f09954..11496bf4fe9 100644 --- a/.storybook/assets/base.css +++ b/.storybook/assets/base.css @@ -1,5 +1,3 @@ -/* stylelint-disable selector-class-pattern -- Targeting pre-defined Storybook classes */ - /*! * Copyright 2024 Adobe. All rights reserved. * @@ -89,4 +87,14 @@ svg:has(symbol):not(:has(use)) { overflow: visible !important; } -/* stylelint-enable selector-class-pattern */ +#panel-tab-content tr th:nth-child(1), +#panel-tab-content tr th:nth-child(3), +#panel-tab-content tr td:nth-child(1), +#panel-tab-content tr td:nth-child(3) { + min-inline-size: 100px !important; +} + +#panel-tab-content tr th:nth-child(2), +#panel-tab-content tr td:nth-child(2) { + max-inline-size: 500px !important; +} diff --git a/.storybook/assets/index.css b/.storybook/assets/index.css index 95b4d83897d..e568d579654 100644 --- a/.storybook/assets/index.css +++ b/.storybook/assets/index.css @@ -1,5 +1,3 @@ -/* stylelint-disable selector-class-pattern -- Targeting pre-defined Storybook classes */ - /*! * Copyright 2024 Adobe. All rights reserved. * @@ -119,4 +117,3 @@ select:focus, border-color: rgb(2, 101, 220) !important; box-shadow: rgb(2, 101, 220) 0 0 0 1px inset !important; } -/* stylelint-enable selector-class-pattern */ diff --git a/.storybook/decorators/utilities.js b/.storybook/decorators/utilities.js index f6722ae79ea..bd22ac68401 100644 --- a/.storybook/decorators/utilities.js +++ b/.storybook/decorators/utilities.js @@ -556,12 +556,12 @@ export const renderContent = (content = [], { if (content.length === 0) return nothing; return html` - ${content.map((c) => { + ${content.map((c, idx) => { if (typeof c === "undefined") return nothing; /* If the content is an object (but not a lit object), we need to merge the object with the template */ if (typeof c !== "string" && (typeof c === "object" && !c._$litType$)) { - return callback({ ...args, ...c }, context); + return callback({ ...args, ...c, idx }, context); } if (typeof c === "function") { diff --git a/.storybook/main.js b/.storybook/main.js index ccd00e2f45e..1430806f206 100644 --- a/.storybook/main.js +++ b/.storybook/main.js @@ -63,6 +63,8 @@ export default { name: "@storybook/addon-actions", options: {}, }, + // https://github.com/ljcl/storybook-addon-cssprops + "@ljcl/storybook-addon-cssprops", // https://www.npmjs.com/package/@whitespace/storybook-addon-html "@whitespace/storybook-addon-html", // https://github.com/storybookjs/storybook/tree/next/code/addons/a11y diff --git a/.storybook/package.json b/.storybook/package.json index 2269da34152..9fcfb56a16a 100644 --- a/.storybook/package.json +++ b/.storybook/package.json @@ -49,6 +49,7 @@ "@babel/core": "^7.28.0", "@chromatic-com/storybook": "^3.2.7", "@etchteam/storybook-addon-status": "^5.0.0", + "@ljcl/storybook-addon-cssprops": "4.0.0", "@storybook/addon-a11y": "8.4.7", "@storybook/addon-actions": "8.4.7", "@storybook/addon-designs": "^8.2.1", diff --git a/.storybook/preview.js b/.storybook/preview.js index ff243044967..35eb258ab1e 100644 --- a/.storybook/preview.js +++ b/.storybook/preview.js @@ -15,6 +15,7 @@ import DocumentationTemplate from "./templates/DocumentationTemplate.mdx"; import { argTypes, globalTypes } from "./types"; // Import the custom base styles +import "@spectrum-css/bundle/dist/index.css"; import "./assets/base.css"; /** @type import('@storybook/types').StorybookParameters & import('@storybook/types').API_Layout */ diff --git a/components/accordion/dist/metadata.json b/components/accordion/dist/metadata.json index 3f3e89fbf15..88a0f6cda3c 100644 --- a/components/accordion/dist/metadata.json +++ b/components/accordion/dist/metadata.json @@ -14,6 +14,7 @@ ".spectrum-Accordion--spacious.spectrum-Accordion--sizeS", ".spectrum-Accordion--spacious.spectrum-Accordion--sizeXL", ".spectrum-Accordion-item", + ".spectrum-Accordion-item:first-child", ".spectrum-Accordion-item.is-disabled .spectrum-Accordion-itemContent", ".spectrum-Accordion-item.is-disabled .spectrum-Accordion-itemHeader", ".spectrum-Accordion-item.is-disabled .spectrum-Accordion-itemHeader + .spectrum-Accordion-itemIconContainer", @@ -23,7 +24,6 @@ ".spectrum-Accordion-item.is-open > .spectrum-Accordion-itemContent", ".spectrum-Accordion-item.is-open > .spectrum-Accordion-itemHeading > .spectrum-Accordion-itemIconContainer > .spectrum-Accordion-itemIndicator", ".spectrum-Accordion-item.is-open > .spectrum-Accordion-itemIconContainer > .spectrum-Accordion-itemIndicator", - ".spectrum-Accordion-item:first-child", ".spectrum-Accordion-itemContent", ".spectrum-Accordion-itemHeader", ".spectrum-Accordion-itemHeader:active", @@ -43,166 +43,880 @@ "[dir=\"rtl\"] .spectrum-Accordion", "[dir=\"rtl\"] .spectrum-Accordion-itemIconContainer" ], - "modifiers": [ - "--mod-accordion-background-color-default", - "--mod-accordion-background-color-down", - "--mod-accordion-background-color-hover", - "--mod-accordion-background-color-key-focus", - "--mod-accordion-component-edge-to-text", - "--mod-accordion-corner-radius", - "--mod-accordion-disclosure-indicator-height", - "--mod-accordion-disclosure-indicator-to-text-space", - "--mod-accordion-divider-color", - "--mod-accordion-divider-thickness", - "--mod-accordion-edge-to-disclosure-indicator-space", - "--mod-accordion-edge-to-text-space", - "--mod-accordion-focus-indicator-color", - "--mod-accordion-focus-indicator-gap", - "--mod-accordion-focus-indicator-thickness", - "--mod-accordion-item-content-area-bottom-to-content", - "--mod-accordion-item-content-area-top-to-content", - "--mod-accordion-item-content-color", - "--mod-accordion-item-content-disabled-color", - "--mod-accordion-item-content-font", - "--mod-accordion-item-content-font-size", - "--mod-accordion-item-content-font-style", - "--mod-accordion-item-content-font-weight", - "--mod-accordion-item-content-line-height", - "--mod-accordion-item-header-bottom-to-text-space", - "--mod-accordion-item-header-color-default", - "--mod-accordion-item-header-color-down", - "--mod-accordion-item-header-color-hover", - "--mod-accordion-item-header-color-key-focus", - "--mod-accordion-item-header-disabled-color", - "--mod-accordion-item-header-font", - "--mod-accordion-item-header-font-size", - "--mod-accordion-item-header-font-style", - "--mod-accordion-item-header-font-weight", - "--mod-accordion-item-header-line-height", - "--mod-accordion-item-header-top-to-text-space", - "--mod-accordion-item-height", - "--mod-accordion-item-width", - "--mod-accordion-min-block-size" - ], - "component": [ - "--spectrum-accordion-background-color-default", - "--spectrum-accordion-background-color-down", - "--spectrum-accordion-background-color-hover", - "--spectrum-accordion-background-color-key-focus", - "--spectrum-accordion-bottom-to-text-compact-extra-large", - "--spectrum-accordion-bottom-to-text-compact-large", - "--spectrum-accordion-bottom-to-text-compact-medium", - "--spectrum-accordion-bottom-to-text-compact-small", - "--spectrum-accordion-bottom-to-text-regular-extra-large", - "--spectrum-accordion-bottom-to-text-regular-large", - "--spectrum-accordion-bottom-to-text-regular-medium", - "--spectrum-accordion-bottom-to-text-regular-small", - "--spectrum-accordion-bottom-to-text-spacious-extra-large", - "--spectrum-accordion-bottom-to-text-spacious-large", - "--spectrum-accordion-bottom-to-text-spacious-medium", - "--spectrum-accordion-bottom-to-text-spacious-small", - "--spectrum-accordion-component-edge-to-text", - "--spectrum-accordion-content-area-bottom-to-content", - "--spectrum-accordion-content-area-top-to-content", - "--spectrum-accordion-corner-radius", - "--spectrum-accordion-disclosure-indicator-height", - "--spectrum-accordion-disclosure-indicator-to-text", - "--spectrum-accordion-disclosure-indicator-to-text-space", - "--spectrum-accordion-divider-color", - "--spectrum-accordion-edge-to-disclosure-indicator", - "--spectrum-accordion-edge-to-disclosure-indicator-space", - "--spectrum-accordion-edge-to-text", - "--spectrum-accordion-edge-to-text-space", - "--spectrum-accordion-focus-indicator-color", - "--spectrum-accordion-focus-indicator-gap", - "--spectrum-accordion-focus-indicator-thickness", - "--spectrum-accordion-item-content-area-bottom-to-content", - "--spectrum-accordion-item-content-area-top-to-content", - "--spectrum-accordion-item-content-color", - "--spectrum-accordion-item-content-disabled-color", - "--spectrum-accordion-item-content-font", - "--spectrum-accordion-item-content-font-size", - "--spectrum-accordion-item-content-font-style", - "--spectrum-accordion-item-content-font-weight", - "--spectrum-accordion-item-content-line-height", - "--spectrum-accordion-item-header-bottom-to-text-space", - "--spectrum-accordion-item-header-color-default", - "--spectrum-accordion-item-header-color-down", - "--spectrum-accordion-item-header-color-hover", - "--spectrum-accordion-item-header-color-key-focus", - "--spectrum-accordion-item-header-disabled-color", - "--spectrum-accordion-item-header-font", - "--spectrum-accordion-item-header-font-size", - "--spectrum-accordion-item-header-font-style", - "--spectrum-accordion-item-header-font-weight", - "--spectrum-accordion-item-header-line-height", - "--spectrum-accordion-item-header-top-to-text-space", - "--spectrum-accordion-item-height", - "--spectrum-accordion-item-width", - "--spectrum-accordion-min-block-size", - "--spectrum-accordion-minimum-width", - "--spectrum-accordion-small-top-to-text-spacious", - "--spectrum-accordion-top-to-text-compact-extra-large", - "--spectrum-accordion-top-to-text-compact-large", - "--spectrum-accordion-top-to-text-compact-medium", - "--spectrum-accordion-top-to-text-compact-small", - "--spectrum-accordion-top-to-text-regular-extra-large", - "--spectrum-accordion-top-to-text-regular-large", - "--spectrum-accordion-top-to-text-regular-medium", - "--spectrum-accordion-top-to-text-regular-small", - "--spectrum-accordion-top-to-text-spacious-extra-large", - "--spectrum-accordion-top-to-text-spacious-large", - "--spectrum-accordion-top-to-text-spacious-medium" - ], - "global": [ - "--spectrum-background-opacity-default", - "--spectrum-background-opacity-down", - "--spectrum-background-opacity-hover", - "--spectrum-background-opacity-key-focus", - "--spectrum-body-color", - "--spectrum-body-sans-serif-font-style", - "--spectrum-body-sans-serif-font-weight", - "--spectrum-body-size-l", - "--spectrum-body-size-m", - "--spectrum-body-size-s", - "--spectrum-body-size-xs", - "--spectrum-bold-font-weight", - "--spectrum-cjk-line-height-100", - "--spectrum-component-edge-to-text-100", - "--spectrum-component-edge-to-text-200", - "--spectrum-component-edge-to-text-50", - "--spectrum-component-edge-to-text-75", - "--spectrum-component-height-100", - "--spectrum-component-height-200", - "--spectrum-component-height-300", - "--spectrum-component-height-400", - "--spectrum-component-height-75", - "--spectrum-corner-radius-100", - "--spectrum-default-font-style", - "--spectrum-disabled-content-color", - "--spectrum-divider-thickness-small", - "--spectrum-focus-indicator-color", - "--spectrum-focus-indicator-gap", - "--spectrum-focus-indicator-thickness", - "--spectrum-font-size-200", - "--spectrum-font-size-300", - "--spectrum-font-size-500", - "--spectrum-font-size-700", - "--spectrum-gray-200", - "--spectrum-gray-900-rgb", - "--spectrum-line-height-100", - "--spectrum-logical-rotation", - "--spectrum-neutral-content-color-default", - "--spectrum-neutral-content-color-down", - "--spectrum-neutral-content-color-hover", - "--spectrum-neutral-content-color-key-focus", - "--spectrum-sans-font-family-stack" - ], - "system-theme": [ - "--system-accordion-divider-color", - "--system-accordion-item-content-color", - "--system-accordion-item-content-disabled-color" - ], - "passthroughs": [], - "high-contrast": [] + "modifiers": { + "mod-accordion-item-height": { + "value": "var(--spectrum-accordion-item-height)", + "description": "Used by `--spectrum-accordion-min-block-size`, `.spectrum-Accordion-item`.
Defaults to `var(--spectrum-accordion-item-height)`, if not set.", + "control": "text", + "category": "Modifier" + }, + "mod-accordion-item-header-top-to-text-space": { + "value": "var(--spectrum-accordion-item-header-top-to-text-space)", + "description": "Used by `--spectrum-accordion-min-block-size`, `.spectrum-Accordion-itemHeader`.
Defaults to `var(--spectrum-accordion-item-header-top-to-text-space)`, if not set.", + "control": "text", + "category": "Modifier" + }, + "mod-accordion-item-header-bottom-to-text-space": { + "value": "var(--spectrum-accordion-item-header-bottom-to-text-space)", + "description": "Used by `--spectrum-accordion-min-block-size`, `.spectrum-Accordion-itemHeader`.
Defaults to `var(--spectrum-accordion-item-header-bottom-to-text-space)`, if not set.", + "control": "text", + "category": "Modifier" + }, + "mod-accordion-item-header-font-size": { + "value": "var(--spectrum-accordion-item-header-font-size)", + "description": "Used by `--spectrum-accordion-min-block-size`, `.spectrum-Accordion-itemHeader`.
Defaults to `var(--spectrum-accordion-item-header-font-size)`, if not set.", + "control": "text", + "category": "Modifier" + }, + "mod-accordion-item-header-line-height": { + "value": "var(--spectrum-accordion-item-header-line-height)", + "description": "Used by `--spectrum-accordion-min-block-size`, `.spectrum-Accordion-itemHeader`.
Defaults to `var(--spectrum-accordion-item-header-line-height)`, if not set.", + "control": "text", + "category": "Modifier" + }, + "mod-accordion-item-width": { + "value": "var(--spectrum-accordion-item-width)", + "description": "Used by `.spectrum-Accordion-item`.
Defaults to `var(--spectrum-accordion-item-width)`, if not set.", + "control": "text", + "category": "Modifier" + }, + "mod-accordion-divider-color": { + "value": "var(--spectrum-accordion-divider-color)", + "description": "Used by `.spectrum-Accordion-item`, `.spectrum-Accordion-item:first-child`.
Defaults to `var(--spectrum-accordion-divider-color)`, if not set.", + "control": "color", + "category": "Modifier" + }, + "mod-accordion-divider-thickness": { + "value": "1px", + "description": "Used by `.spectrum-Accordion-item`, `.spectrum-Accordion-item:first-child`.
Defaults to `var(--spectrum-divider-thickness-small)`, if not set.", + "control": "text", + "category": "Modifier" + }, + "mod-accordion-edge-to-disclosure-indicator-space": { + "value": "var(--spectrum-accordion-edge-to-disclosure-indicator-space)", + "description": "Used by `.spectrum-Accordion-itemIconContainer`.
Defaults to `var(--spectrum-accordion-edge-to-disclosure-indicator-space)`, if not set.", + "control": "text", + "category": "Modifier" + }, + "mod-accordion-disclosure-indicator-height": { + "value": "var(--spectrum-accordion-disclosure-indicator-height)", + "description": "Used by `.spectrum-Accordion-itemIconContainer`, `.spectrum-Accordion-itemHeader`.
Defaults to `var(--spectrum-accordion-disclosure-indicator-height)`, if not set.", + "control": "text", + "category": "Modifier" + }, + "mod-accordion-item-header-color-default": { + "value": "var(--spectrum-accordion-item-header-color-default)", + "description": "Used by `.spectrum-Accordion-itemIconContainer`, `.spectrum-Accordion-itemHeader`.
Defaults to `var(--spectrum-accordion-item-header-color-default)`, if not set.", + "control": "color", + "category": "Modifier" + }, + "mod-accordion-min-block-size": { + "value": "var(--spectrum-accordion-min-block-size)", + "description": "Used by `.spectrum-Accordion-itemIconContainer`, `.spectrum-Accordion-itemHeader`.
Defaults to `var(--spectrum-accordion-min-block-size)`, if not set.", + "control": "text", + "category": "Modifier" + }, + "mod-accordion-item-content-area-top-to-content": { + "value": "var(--spectrum-accordion-item-content-area-top-to-content)", + "description": "Used by `.spectrum-Accordion-itemContent`.
Defaults to `var(--spectrum-accordion-item-content-area-top-to-content)`, if not set.", + "control": "text", + "category": "Modifier" + }, + "mod-accordion-item-content-area-bottom-to-content": { + "value": "var(--spectrum-accordion-item-content-area-bottom-to-content)", + "description": "Used by `.spectrum-Accordion-itemContent`.
Defaults to `var(--spectrum-accordion-item-content-area-bottom-to-content)`, if not set.", + "control": "text", + "category": "Modifier" + }, + "mod-accordion-component-edge-to-text": { + "value": "var(--spectrum-accordion-component-edge-to-text)", + "description": "Used by `.spectrum-Accordion-itemContent`.
Defaults to `var(--spectrum-accordion-component-edge-to-text)`, if not set.", + "control": "text", + "category": "Modifier" + }, + "mod-accordion-item-content-color": { + "value": "var(--spectrum-accordion-item-content-color)", + "description": "Used by `.spectrum-Accordion-itemContent`.
Defaults to `var(--spectrum-accordion-item-content-color)`, if not set.", + "control": "color", + "category": "Modifier" + }, + "mod-accordion-item-content-font-weight": { + "value": "var(--spectrum-accordion-item-content-font-weight)", + "description": "Used by `.spectrum-Accordion-itemContent`.
Defaults to `var(--spectrum-accordion-item-content-font-weight)`, if not set.", + "control": "text", + "category": "Modifier" + }, + "mod-accordion-item-content-font-style": { + "value": "var(--spectrum-accordion-item-content-font-style)", + "description": "Used by `.spectrum-Accordion-itemContent`.
Defaults to `var(--spectrum-accordion-item-content-font-style)`, if not set.", + "control": "text", + "category": "Modifier" + }, + "mod-accordion-item-content-font-size": { + "value": "var(--spectrum-accordion-item-content-font-size)", + "description": "Used by `.spectrum-Accordion-itemContent`.
Defaults to `var(--spectrum-accordion-item-content-font-size)`, if not set.", + "control": "text", + "category": "Modifier" + }, + "mod-accordion-item-content-font": { + "value": "var(--spectrum-accordion-item-content-font)", + "description": "Used by `.spectrum-Accordion-itemContent`.
Defaults to `var(--spectrum-accordion-item-content-font)`, if not set.", + "control": "text", + "category": "Modifier" + }, + "mod-accordion-item-content-line-height": { + "value": "var(--spectrum-accordion-item-content-line-height)", + "description": "Used by `.spectrum-Accordion-itemContent`.
Defaults to `var(--spectrum-accordion-item-content-line-height)`, if not set.", + "control": "text", + "category": "Modifier" + }, + "mod-accordion-disclosure-indicator-to-text-space": { + "value": "var(--spectrum-accordion-disclosure-indicator-to-text-space)", + "description": "Used by `.spectrum-Accordion-itemHeader`.
Defaults to `var(--spectrum-accordion-disclosure-indicator-to-text-space)`, if not set.", + "control": "text", + "category": "Modifier" + }, + "mod-accordion-edge-to-text-space": { + "value": "var(--spectrum-accordion-edge-to-text-space)", + "description": "Used by `.spectrum-Accordion-itemHeader`.
Defaults to `var(--spectrum-accordion-edge-to-text-space)`, if not set.", + "control": "text", + "category": "Modifier" + }, + "mod-accordion-item-header-font-weight": { + "value": "var(--spectrum-accordion-item-header-font-weight)", + "description": "Used by `.spectrum-Accordion-itemHeader`.
Defaults to `var(--spectrum-accordion-item-header-font-weight)`, if not set.", + "control": "text", + "category": "Modifier" + }, + "mod-accordion-item-header-font-style": { + "value": "var(--spectrum-accordion-item-header-font-style)", + "description": "Used by `.spectrum-Accordion-itemHeader`.
Defaults to `var(--spectrum-accordion-item-header-font-style)`, if not set.", + "control": "text", + "category": "Modifier" + }, + "mod-accordion-item-header-font": { + "value": "var(--spectrum-accordion-item-header-font)", + "description": "Used by `.spectrum-Accordion-itemHeader`.
Defaults to `var(--spectrum-accordion-item-header-font)`, if not set.", + "control": "text", + "category": "Modifier" + }, + "mod-accordion-background-color-default": { + "value": "var(--spectrum-accordion-background-color-default)", + "description": "Used by `.spectrum-Accordion-itemHeader`.
Defaults to `var(--spectrum-accordion-background-color-default)`, if not set.", + "control": "color", + "category": "Modifier" + }, + "mod-accordion-corner-radius": { + "value": "var(--spectrum-accordion-corner-radius)", + "description": "Used by `.spectrum-Accordion-itemHeader:focus-visible`.
Defaults to `var(--spectrum-accordion-corner-radius)`, if not set.", + "control": "text", + "category": "Modifier" + }, + "mod-accordion-focus-indicator-thickness": { + "value": "var(--spectrum-accordion-focus-indicator-thickness)", + "description": "Used by `.spectrum-Accordion-itemHeader:focus-visible`.
Defaults to `var(--spectrum-accordion-focus-indicator-thickness)`, if not set.", + "control": "text", + "category": "Modifier" + }, + "mod-accordion-focus-indicator-color": { + "value": "var(--spectrum-accordion-focus-indicator-color)", + "description": "Used by `.spectrum-Accordion-itemHeader:focus-visible`.
Defaults to `var(--spectrum-accordion-focus-indicator-color)`, if not set.", + "control": "color", + "category": "Modifier" + }, + "mod-accordion-background-color-key-focus": { + "value": "var(--spectrum-accordion-background-color-key-focus)", + "description": "Used by `.spectrum-Accordion-itemHeader:focus-visible`.
Defaults to `var(--spectrum-accordion-background-color-key-focus)`, if not set.", + "control": "color", + "category": "Modifier" + }, + "mod-accordion-item-header-color-key-focus": { + "value": "var(--spectrum-accordion-item-header-color-key-focus)", + "description": "Used by `.spectrum-Accordion-itemHeader:focus-visible`.
Defaults to `var(--spectrum-accordion-item-header-color-key-focus)`, if not set.", + "control": "color", + "category": "Modifier" + }, + "mod-accordion-focus-indicator-gap": { + "value": "0px", + "description": "Used by `.spectrum-Accordion-itemHeader:focus-visible`.
Defaults to `var(--spectrum-accordion-focus-indicator-gap)`, if not set.", + "control": "text", + "category": "Modifier" + }, + "mod-accordion-background-color-down": { + "value": "var(--spectrum-accordion-background-color-down)", + "description": "Used by `.spectrum-Accordion-itemHeader:active`.
Defaults to `var(--spectrum-accordion-background-color-down)`, if not set.", + "control": "color", + "category": "Modifier" + }, + "mod-accordion-item-header-color-down": { + "value": "var(--spectrum-accordion-item-header-color-down)", + "description": "Used by `.spectrum-Accordion-itemHeader:active`.
Defaults to `var(--spectrum-accordion-item-header-color-down)`, if not set.", + "control": "color", + "category": "Modifier" + }, + "mod-accordion-item-header-disabled-color": { + "value": "var(--spectrum-accordion-item-header-disabled-color)", + "description": "Used by `.spectrum-Accordion-item.is-disabled .spectrum-Accordion-itemHeader, .spectrum-Accordion-item.is-disabled .spectrum-Accordion-itemHeader:focus-visible`, `.spectrum-Accordion-item.is-disabled .spectrum-Accordion-itemHeader:hover`, `.spectrum-Accordion-item.is-disabled .spectrum-Accordion-itemHeader + .spectrum-Accordion-itemIconContainer`.
Defaults to `var(--spectrum-accordion-item-header-disabled-color)`, if not set.", + "control": "color", + "category": "Modifier" + }, + "mod-accordion-background-color-hover": { + "value": "var(--spectrum-accordion-background-color-hover)", + "description": "Used by `.spectrum-Accordion-itemHeader:hover`, `.spectrum-Accordion-item.is-open .spectrum-Accordion-itemHeader:hover`.
Defaults to `var(--spectrum-accordion-background-color-hover)`, if not set.", + "control": "color", + "category": "Modifier" + }, + "mod-accordion-item-header-color-hover": { + "value": "var(--spectrum-accordion-item-header-color-hover)", + "description": "Used by `.spectrum-Accordion-itemHeader:hover, .spectrum-Accordion-itemHeader:hover + .spectrum-Accordion-itemIconContainer`.
Defaults to `var(--spectrum-accordion-item-header-color-hover)`, if not set.", + "control": "color", + "category": "Modifier" + }, + "mod-accordion-item-content-disabled-color": { + "value": "var(--spectrum-accordion-item-content-disabled-color)", + "description": "Used by `.spectrum-Accordion-item.is-disabled .spectrum-Accordion-itemContent`.
Defaults to `var(--spectrum-accordion-item-content-disabled-color)`, if not set.", + "control": "color", + "category": "Modifier" + } + }, + "component": { + "spectrum-accordion-item-height": { + "description": "Defined in `.spectrum-Accordion`, `.spectrum-Accordion--compact`, `.spectrum-Accordion--compact.spectrum-Accordion--sizeS`, `.spectrum-Accordion--compact.spectrum-Accordion--sizeL`, `.spectrum-Accordion--compact.spectrum-Accordion--sizeXL`, `.spectrum-Accordion--sizeS`, `.spectrum-Accordion--sizeL`, `.spectrum-Accordion--sizeXL`.
Used by `--spectrum-accordion-min-block-size`, `.spectrum-Accordion-item`.", + "control": "text", + "category": "Component" + }, + "spectrum-accordion-item-width": { + "description": "Defined in `.spectrum-Accordion`.
Used by `.spectrum-Accordion-item`.", + "control": "text", + "category": "Component" + }, + "spectrum-accordion-minimum-width": { + "value": "200px", + "description": "Used by `--spectrum-accordion-item-width`.", + "control": "text", + "category": "Component" + }, + "spectrum-accordion-disclosure-indicator-height": { + "description": "Defined in `.spectrum-Accordion`, `.spectrum-Accordion--sizeS`, `.spectrum-Accordion--sizeL`, `.spectrum-Accordion--sizeXL`.
Used by `.spectrum-Accordion-itemIconContainer`, `.spectrum-Accordion-itemHeader`.", + "control": "text", + "category": "Component" + }, + "spectrum-accordion-disclosure-indicator-to-text-space": { + "description": "Defined in `.spectrum-Accordion`.
Used by `.spectrum-Accordion-itemHeader`.", + "control": "text", + "category": "Component" + }, + "spectrum-accordion-disclosure-indicator-to-text": { + "value": "0px", + "description": "Used by `--spectrum-accordion-disclosure-indicator-to-text-space`.", + "control": "text", + "category": "Component" + }, + "spectrum-accordion-edge-to-disclosure-indicator-space": { + "description": "Defined in `.spectrum-Accordion`.
Used by `.spectrum-Accordion-itemIconContainer`.", + "control": "text", + "category": "Component" + }, + "spectrum-accordion-edge-to-disclosure-indicator": { + "value": "0px", + "description": "Used by `--spectrum-accordion-edge-to-disclosure-indicator-space`.", + "control": "text", + "category": "Component" + }, + "spectrum-accordion-edge-to-text-space": { + "description": "Defined in `.spectrum-Accordion`.
Used by `.spectrum-Accordion-itemHeader`.", + "control": "text", + "category": "Component" + }, + "spectrum-accordion-edge-to-text": { + "value": "0px", + "description": "Used by `--spectrum-accordion-edge-to-text-space`.", + "control": "text", + "category": "Component" + }, + "spectrum-accordion-item-header-top-to-text-space": { + "description": "Defined in `.spectrum-Accordion`, `.spectrum-Accordion--compact`, `.spectrum-Accordion--compact.spectrum-Accordion--sizeS`, `.spectrum-Accordion--compact.spectrum-Accordion--sizeL`, `.spectrum-Accordion--compact.spectrum-Accordion--sizeXL`, `.spectrum-Accordion--spacious`, `.spectrum-Accordion--spacious.spectrum-Accordion--sizeS`, `.spectrum-Accordion--spacious.spectrum-Accordion--sizeL`, `.spectrum-Accordion--spacious.spectrum-Accordion--sizeXL`, `.spectrum-Accordion--sizeS`, `.spectrum-Accordion--sizeL`, `.spectrum-Accordion--sizeXL`.
Used by `--spectrum-accordion-min-block-size`, `.spectrum-Accordion-itemHeader`.", + "control": "text", + "category": "Component" + }, + "spectrum-accordion-top-to-text-regular-medium": { + "value": "8px", + "description": "Used by `--spectrum-accordion-item-header-top-to-text-space`.", + "control": "text", + "category": "Component" + }, + "spectrum-accordion-item-header-bottom-to-text-space": { + "description": "Defined in `.spectrum-Accordion`, `.spectrum-Accordion--compact`, `.spectrum-Accordion--compact.spectrum-Accordion--sizeS`, `.spectrum-Accordion--compact.spectrum-Accordion--sizeL`, `.spectrum-Accordion--compact.spectrum-Accordion--sizeXL`, `.spectrum-Accordion--spacious`, `.spectrum-Accordion--spacious.spectrum-Accordion--sizeS`, `.spectrum-Accordion--spacious.spectrum-Accordion--sizeL`, `.spectrum-Accordion--spacious.spectrum-Accordion--sizeXL`, `.spectrum-Accordion--sizeS`, `.spectrum-Accordion--sizeL`, `.spectrum-Accordion--sizeXL`.
Used by `--spectrum-accordion-min-block-size`, `.spectrum-Accordion-itemHeader`.", + "control": "text", + "category": "Component" + }, + "spectrum-accordion-bottom-to-text-regular-medium": { + "value": "9px", + "description": "Used by `--spectrum-accordion-item-header-bottom-to-text-space`.", + "control": "text", + "category": "Component" + }, + "spectrum-accordion-focus-indicator-gap": { + "value": "0px", + "description": "Defined in `.spectrum-Accordion`.
Used by `.spectrum-Accordion-itemHeader:focus-visible`.", + "control": "text", + "category": "Component" + }, + "spectrum-accordion-focus-indicator-thickness": { + "description": "Defined in `.spectrum-Accordion`.
Used by `.spectrum-Accordion-itemHeader:focus-visible`.", + "control": "text", + "category": "Component" + }, + "spectrum-accordion-corner-radius": { + "description": "Defined in `.spectrum-Accordion`.
Used by `.spectrum-Accordion-itemHeader:focus-visible`.", + "control": "text", + "category": "Component" + }, + "spectrum-accordion-item-content-area-top-to-content": { + "description": "Defined in `.spectrum-Accordion`.
Used by `.spectrum-Accordion-itemContent`.", + "control": "text", + "category": "Component" + }, + "spectrum-accordion-content-area-top-to-content": { + "value": "8px", + "description": "Used by `--spectrum-accordion-item-content-area-top-to-content`.", + "control": "text", + "category": "Component" + }, + "spectrum-accordion-item-content-area-bottom-to-content": { + "description": "Defined in `.spectrum-Accordion`.
Used by `.spectrum-Accordion-itemContent`.", + "control": "text", + "category": "Component" + }, + "spectrum-accordion-content-area-bottom-to-content": { + "value": "16px", + "description": "Used by `--spectrum-accordion-item-content-area-bottom-to-content`.", + "control": "text", + "category": "Component" + }, + "spectrum-accordion-component-edge-to-text": { + "description": "Defined in `.spectrum-Accordion`, `.spectrum-Accordion--sizeS`, `.spectrum-Accordion--sizeL`, `.spectrum-Accordion--sizeXL`.
Used by `.spectrum-Accordion-itemContent`.", + "control": "text", + "category": "Component" + }, + "spectrum-accordion-item-header-font": { + "description": "Defined in `.spectrum-Accordion`.
Used by `.spectrum-Accordion-itemHeader`.", + "control": "text", + "category": "Component" + }, + "spectrum-accordion-item-header-font-weight": { + "description": "Defined in `.spectrum-Accordion`.
Used by `.spectrum-Accordion-itemHeader`.", + "control": "text", + "category": "Component" + }, + "spectrum-accordion-item-header-font-style": { + "description": "Defined in `.spectrum-Accordion`.
Used by `.spectrum-Accordion-itemHeader`.", + "control": "text", + "category": "Component" + }, + "spectrum-accordion-item-header-font-size": { + "description": "Defined in `.spectrum-Accordion`, `.spectrum-Accordion--sizeS`, `.spectrum-Accordion--sizeL`, `.spectrum-Accordion--sizeXL`.
Used by `--spectrum-accordion-min-block-size`, `.spectrum-Accordion-itemHeader`.", + "control": "text", + "category": "Component" + }, + "spectrum-accordion-item-header-line-height": { + "description": "Defined in `.spectrum-Accordion`, `.spectrum-Accordion:lang(ja), .spectrum-Accordion:lang(ko), .spectrum-Accordion:lang(zh)`, `.spectrum-Accordion--spacious`, `.spectrum-Accordion--spacious.spectrum-Accordion--sizeS`, `.spectrum-Accordion--spacious.spectrum-Accordion--sizeL`, `.spectrum-Accordion--spacious.spectrum-Accordion--sizeXL`.
Used by `--spectrum-accordion-min-block-size`, `.spectrum-Accordion-itemHeader`.", + "control": "text", + "category": "Component" + }, + "spectrum-accordion-item-content-font": { + "description": "Defined in `.spectrum-Accordion`.
Used by `.spectrum-Accordion-itemContent`.", + "control": "text", + "category": "Component" + }, + "spectrum-accordion-item-content-font-weight": { + "description": "Defined in `.spectrum-Accordion`.
Used by `.spectrum-Accordion-itemContent`.", + "control": "text", + "category": "Component" + }, + "spectrum-accordion-item-content-font-style": { + "description": "Defined in `.spectrum-Accordion`.
Used by `.spectrum-Accordion-itemContent`.", + "control": "text", + "category": "Component" + }, + "spectrum-accordion-item-content-font-size": { + "description": "Defined in `.spectrum-Accordion`, `.spectrum-Accordion--sizeS`, `.spectrum-Accordion--sizeL`, `.spectrum-Accordion--sizeXL`.
Used by `.spectrum-Accordion-itemContent`.", + "control": "text", + "category": "Component" + }, + "spectrum-accordion-item-content-line-height": { + "description": "Defined in `.spectrum-Accordion`, `.spectrum-Accordion:lang(ja), .spectrum-Accordion:lang(ko), .spectrum-Accordion:lang(zh)`.
Used by `.spectrum-Accordion-itemContent`.", + "control": "text", + "category": "Component" + }, + "spectrum-accordion-background-color-default": { + "description": "Defined in `.spectrum-Accordion`.
Used by `.spectrum-Accordion-itemHeader`.", + "control": "color", + "category": "Component" + }, + "spectrum-accordion-background-color-hover": { + "description": "Defined in `.spectrum-Accordion`.
Used by `.spectrum-Accordion-itemHeader:hover`, `.spectrum-Accordion-item.is-open .spectrum-Accordion-itemHeader:hover`.", + "control": "color", + "category": "Component" + }, + "spectrum-accordion-background-color-down": { + "description": "Defined in `.spectrum-Accordion`.
Used by `.spectrum-Accordion-itemHeader:active`.", + "control": "color", + "category": "Component" + }, + "spectrum-accordion-background-color-key-focus": { + "description": "Defined in `.spectrum-Accordion`.
Used by `.spectrum-Accordion-itemHeader:focus-visible`.", + "control": "color", + "category": "Component" + }, + "spectrum-accordion-item-header-color-default": { + "description": "Defined in `.spectrum-Accordion`.
Used by `.spectrum-Accordion-itemIconContainer`, `.spectrum-Accordion-itemHeader`.", + "control": "color", + "category": "Component" + }, + "spectrum-accordion-item-header-color-hover": { + "description": "Defined in `.spectrum-Accordion`.
Used by `.spectrum-Accordion-itemHeader:hover, .spectrum-Accordion-itemHeader:hover + .spectrum-Accordion-itemIconContainer`.", + "control": "color", + "category": "Component" + }, + "spectrum-accordion-item-header-color-down": { + "description": "Defined in `.spectrum-Accordion`.
Used by `.spectrum-Accordion-itemHeader:active`.", + "control": "color", + "category": "Component" + }, + "spectrum-accordion-item-header-color-key-focus": { + "description": "Defined in `.spectrum-Accordion`.
Used by `.spectrum-Accordion-itemHeader:focus-visible`.", + "control": "color", + "category": "Component" + }, + "spectrum-accordion-item-header-disabled-color": { + "description": "Defined in `.spectrum-Accordion`.
Used by `.spectrum-Accordion-item.is-disabled .spectrum-Accordion-itemHeader, .spectrum-Accordion-item.is-disabled .spectrum-Accordion-itemHeader:focus-visible`, `.spectrum-Accordion-item.is-disabled .spectrum-Accordion-itemHeader:hover`, `.spectrum-Accordion-item.is-disabled .spectrum-Accordion-itemHeader + .spectrum-Accordion-itemIconContainer`.", + "control": "color", + "category": "Component" + }, + "spectrum-accordion-focus-indicator-color": { + "description": "Defined in `.spectrum-Accordion`.
Used by `.spectrum-Accordion-itemHeader:focus-visible`.", + "control": "color", + "category": "Component" + }, + "spectrum-accordion-min-block-size": { + "description": "Defined in `.spectrum-Accordion`.
Used by `.spectrum-Accordion-itemIconContainer`, `.spectrum-Accordion-itemHeader`.", + "control": "text", + "category": "Component" + }, + "spectrum-accordion-top-to-text-compact-medium": { + "value": "4px", + "description": "Used by `--spectrum-accordion-item-header-top-to-text-space`.", + "control": "text", + "category": "Component" + }, + "spectrum-accordion-bottom-to-text-compact-medium": { + "value": "5px", + "description": "Used by `--spectrum-accordion-item-header-bottom-to-text-space`.", + "control": "text", + "category": "Component" + }, + "spectrum-accordion-top-to-text-compact-small": { + "value": "2px", + "description": "Used by `--spectrum-accordion-item-header-top-to-text-space`.", + "control": "text", + "category": "Component" + }, + "spectrum-accordion-bottom-to-text-compact-small": { + "value": "2px", + "description": "Used by `--spectrum-accordion-item-header-bottom-to-text-space`.", + "control": "text", + "category": "Component" + }, + "spectrum-accordion-top-to-text-compact-large": { + "value": "4px", + "description": "Used by `--spectrum-accordion-item-header-top-to-text-space`.", + "control": "text", + "category": "Component" + }, + "spectrum-accordion-bottom-to-text-compact-large": { + "value": "8px", + "description": "Used by `--spectrum-accordion-item-header-bottom-to-text-space`.", + "control": "text", + "category": "Component" + }, + "spectrum-accordion-top-to-text-compact-extra-large": { + "value": "5px", + "description": "Used by `--spectrum-accordion-item-header-top-to-text-space`.", + "control": "text", + "category": "Component" + }, + "spectrum-accordion-bottom-to-text-compact-extra-large": { + "value": "8px", + "description": "Used by `--spectrum-accordion-item-header-bottom-to-text-space`.", + "control": "text", + "category": "Component" + }, + "spectrum-accordion-top-to-text-spacious-medium": { + "value": "12px", + "description": "Used by `--spectrum-accordion-item-header-top-to-text-space`.", + "control": "text", + "category": "Component" + }, + "spectrum-accordion-bottom-to-text-spacious-medium": { + "value": "13px", + "description": "Used by `--spectrum-accordion-item-header-bottom-to-text-space`.", + "control": "text", + "category": "Component" + }, + "spectrum-accordion-small-top-to-text-spacious": { + "value": "9px", + "description": "Used by `--spectrum-accordion-item-header-top-to-text-space`.", + "control": "text", + "category": "Component" + }, + "spectrum-accordion-bottom-to-text-spacious-small": { + "value": "11px", + "description": "Used by `--spectrum-accordion-item-header-bottom-to-text-space`.", + "control": "text", + "category": "Component" + }, + "spectrum-accordion-top-to-text-spacious-large": { + "value": "12px", + "description": "Used by `--spectrum-accordion-item-header-top-to-text-space`.", + "control": "text", + "category": "Component" + }, + "spectrum-accordion-bottom-to-text-spacious-large": { + "value": "16px", + "description": "Used by `--spectrum-accordion-item-header-bottom-to-text-space`.", + "control": "text", + "category": "Component" + }, + "spectrum-accordion-top-to-text-spacious-extra-large": { + "value": "13px", + "description": "Used by `--spectrum-accordion-item-header-top-to-text-space`.", + "control": "text", + "category": "Component" + }, + "spectrum-accordion-bottom-to-text-spacious-extra-large": { + "value": "16px", + "description": "Used by `--spectrum-accordion-item-header-bottom-to-text-space`.", + "control": "text", + "category": "Component" + }, + "spectrum-accordion-top-to-text-regular-small": { + "value": "5px", + "description": "Used by `--spectrum-accordion-item-header-top-to-text-space`.", + "control": "text", + "category": "Component" + }, + "spectrum-accordion-bottom-to-text-regular-small": { + "value": "7px", + "description": "Used by `--spectrum-accordion-item-header-bottom-to-text-space`.", + "control": "text", + "category": "Component" + }, + "spectrum-accordion-top-to-text-regular-large": { + "value": "9px", + "description": "Used by `--spectrum-accordion-item-header-top-to-text-space`.", + "control": "text", + "category": "Component" + }, + "spectrum-accordion-bottom-to-text-regular-large": { + "value": "11px", + "description": "Used by `--spectrum-accordion-item-header-bottom-to-text-space`.", + "control": "text", + "category": "Component" + }, + "spectrum-accordion-top-to-text-regular-extra-large": { + "value": "9px", + "description": "Used by `--spectrum-accordion-item-header-top-to-text-space`.", + "control": "text", + "category": "Component" + }, + "spectrum-accordion-bottom-to-text-regular-extra-large": { + "value": "12px", + "description": "Used by `--spectrum-accordion-item-header-bottom-to-text-space`.", + "control": "text", + "category": "Component" + }, + "spectrum-accordion-divider-color": { + "description": "Defined in `.spectrum-Accordion`.
Used by `.spectrum-Accordion-item`, `.spectrum-Accordion-item:first-child`.", + "control": "color", + "category": "Component" + }, + "spectrum-accordion-item-content-color": { + "description": "Defined in `.spectrum-Accordion`.
Used by `.spectrum-Accordion-itemContent`.", + "control": "color", + "category": "Component" + }, + "spectrum-accordion-item-content-disabled-color": { + "description": "Defined in `.spectrum-Accordion`.
Used by `.spectrum-Accordion-item.is-disabled .spectrum-Accordion-itemContent`.", + "control": "color", + "category": "Component" + } + }, + "global": { + "spectrum-gray-200": { + "value": "light-dark(rgb(225, 225, 225), rgb(50, 50, 50))", + "description": "Used by `--system-accordion-divider-color`.", + "control": "text", + "category": "Global" + }, + "spectrum-disabled-content-color": { + "value": "var(--spectrum-gray-400)", + "description": "Used by `--system-accordion-item-content-disabled-color`, `--spectrum-accordion-item-header-disabled-color`.", + "control": "color", + "category": "Global" + }, + "spectrum-body-color": { + "value": "var(--spectrum-gray-800)", + "description": "Used by `--system-accordion-item-content-color`.", + "control": "color", + "category": "Global" + }, + "spectrum-component-height-200": { + "value": "40px", + "description": "Used by `--spectrum-accordion-item-height`, `--spectrum-accordion-disclosure-indicator-height`.", + "control": "text", + "category": "Global" + }, + "spectrum-component-height-100": { + "value": "32px", + "description": "Used by `--spectrum-accordion-disclosure-indicator-height`, `--spectrum-accordion-item-height`.", + "control": "text", + "category": "Global" + }, + "spectrum-focus-indicator-gap": { + "value": "2px", + "description": "Used by `--spectrum-accordion-focus-indicator-gap`.", + "control": "text", + "category": "Global" + }, + "spectrum-focus-indicator-thickness": { + "value": "2px", + "description": "Used by `--spectrum-accordion-focus-indicator-thickness`.", + "control": "text", + "category": "Global" + }, + "spectrum-corner-radius-100": { + "value": "8px", + "description": "Used by `--spectrum-accordion-corner-radius`.", + "control": "text", + "category": "Global" + }, + "spectrum-component-edge-to-text-75": { + "value": "10px", + "description": "Used by `--spectrum-accordion-component-edge-to-text`.", + "control": "text", + "category": "Global" + }, + "spectrum-sans-font-family-stack": { + "description": "Used by `--spectrum-accordion-item-header-font`, `--spectrum-accordion-item-content-font`.", + "control": "text", + "category": "Global" + }, + "spectrum-bold-font-weight": { + "value": "700", + "description": "Used by `--spectrum-accordion-item-header-font-weight`.", + "control": "text", + "category": "Global" + }, + "spectrum-default-font-style": { + "value": "normal", + "description": "Used by `--spectrum-accordion-item-header-font-style`.", + "control": "text", + "category": "Global" + }, + "spectrum-font-size-300": { + "value": "18px", + "description": "Used by `--spectrum-accordion-item-header-font-size`.", + "control": "text", + "category": "Global" + }, + "spectrum-body-sans-serif-font-weight": { + "value": "400", + "description": "Used by `--spectrum-accordion-item-content-font-weight`.", + "control": "text", + "category": "Global" + }, + "spectrum-body-sans-serif-font-style": { + "value": "normal", + "description": "Used by `--spectrum-accordion-item-content-font-style`.", + "control": "text", + "category": "Global" + }, + "spectrum-body-size-s": { + "value": "var(--spectrum-font-size-100)", + "description": "Used by `--spectrum-accordion-item-content-font-size`.", + "control": "text", + "category": "Global" + }, + "spectrum-line-height-100": { + "value": "1.3", + "description": "Used by `--spectrum-accordion-item-content-line-height`.", + "control": "text", + "category": "Global" + }, + "spectrum-gray-900-rgb": { + "description": "Used by `--spectrum-accordion-background-color-default`, `--spectrum-accordion-background-color-hover`, `--spectrum-accordion-background-color-down`, `--spectrum-accordion-background-color-key-focus`.", + "control": "text", + "category": "Global" + }, + "spectrum-background-opacity-default": { + "value": "0", + "description": "Used by `--spectrum-accordion-background-color-default`.", + "control": "text", + "category": "Global" + }, + "spectrum-background-opacity-hover": { + "value": "0.1", + "description": "Used by `--spectrum-accordion-background-color-hover`.", + "control": "text", + "category": "Global" + }, + "spectrum-background-opacity-down": { + "value": "0.1", + "description": "Used by `--spectrum-accordion-background-color-down`.", + "control": "text", + "category": "Global" + }, + "spectrum-background-opacity-key-focus": { + "value": "0.1", + "description": "Used by `--spectrum-accordion-background-color-key-focus`.", + "control": "text", + "category": "Global" + }, + "spectrum-neutral-content-color-default": { + "value": "var(--spectrum-gray-800)", + "description": "Used by `--spectrum-accordion-item-header-color-default`.", + "control": "color", + "category": "Global" + }, + "spectrum-neutral-content-color-hover": { + "value": "var(--spectrum-gray-900)", + "description": "Used by `--spectrum-accordion-item-header-color-hover`.", + "control": "color", + "category": "Global" + }, + "spectrum-neutral-content-color-down": { + "value": "var(--spectrum-gray-900)", + "description": "Used by `--spectrum-accordion-item-header-color-down`.", + "control": "color", + "category": "Global" + }, + "spectrum-neutral-content-color-key-focus": { + "value": "var(--spectrum-gray-900)", + "description": "Used by `--spectrum-accordion-item-header-color-key-focus`.", + "control": "color", + "category": "Global" + }, + "spectrum-focus-indicator-color": { + "value": "var(--spectrum-blue-800)", + "description": "Used by `--spectrum-accordion-focus-indicator-color`.", + "control": "color", + "category": "Global" + }, + "spectrum-logical-rotation": { + "description": "Defined in `.spectrum-Accordion:dir(rtl), [dir=\"rtl\"] .spectrum-Accordion`.
Used by `.spectrum-Accordion-item.is-open > .spectrum-Accordion-itemHeading > .spectrum-Accordion-itemIconContainer > .spectrum-Accordion-itemIndicator, .spectrum-Accordion-item.is-open > .spectrum-Accordion-itemIconContainer > .spectrum-Accordion-itemIndicator`.", + "control": "text", + "category": "Global" + }, + "spectrum-cjk-line-height-100": { + "value": "1.5", + "description": "Used by `--spectrum-accordion-item-header-line-height`, `--spectrum-accordion-item-content-line-height`.", + "control": "text", + "category": "Global" + }, + "spectrum-component-height-75": { + "value": "24px", + "description": "Used by `--spectrum-accordion-item-height`, `--spectrum-accordion-disclosure-indicator-height`.", + "control": "text", + "category": "Global" + }, + "spectrum-component-height-300": { + "value": "48px", + "description": "Used by `--spectrum-accordion-item-height`, `--spectrum-accordion-disclosure-indicator-height`.", + "control": "text", + "category": "Global" + }, + "spectrum-component-edge-to-text-50": { + "value": "8px", + "description": "Used by `--spectrum-accordion-component-edge-to-text`.", + "control": "text", + "category": "Global" + }, + "spectrum-font-size-200": { + "value": "16px", + "description": "Used by `--spectrum-accordion-item-header-font-size`.", + "control": "text", + "category": "Global" + }, + "spectrum-body-size-xs": { + "value": "var(--spectrum-font-size-75)", + "description": "Used by `--spectrum-accordion-item-content-font-size`.", + "control": "text", + "category": "Global" + }, + "spectrum-component-edge-to-text-100": { + "value": "12px", + "description": "Used by `--spectrum-accordion-component-edge-to-text`.", + "control": "text", + "category": "Global" + }, + "spectrum-font-size-500": { + "value": "22px", + "description": "Used by `--spectrum-accordion-item-header-font-size`.", + "control": "text", + "category": "Global" + }, + "spectrum-body-size-m": { + "value": "var(--spectrum-font-size-200)", + "description": "Used by `--spectrum-accordion-item-content-font-size`.", + "control": "text", + "category": "Global" + }, + "spectrum-component-height-400": { + "value": "56px", + "description": "Used by `--spectrum-accordion-item-height`.", + "control": "text", + "category": "Global" + }, + "spectrum-component-edge-to-text-200": { + "value": "15px", + "description": "Used by `--spectrum-accordion-component-edge-to-text`.", + "control": "text", + "category": "Global" + }, + "spectrum-font-size-700": { + "value": "28px", + "description": "Used by `--spectrum-accordion-item-header-font-size`.", + "control": "text", + "category": "Global" + }, + "spectrum-body-size-l": { + "value": "var(--spectrum-font-size-300)", + "description": "Used by `--spectrum-accordion-item-content-font-size`.", + "control": "text", + "category": "Global" + }, + "spectrum-divider-thickness-small": { + "value": "1px", + "description": "Used by `.spectrum-Accordion-item`, `.spectrum-Accordion-item:first-child`.", + "control": "text", + "category": "Global" + } + }, + "system-theme": { + "system-accordion-divider-color": { + "description": "Defined in `.spectrum`.
Used by `--spectrum-accordion-divider-color`.", + "control": "color" + }, + "system-accordion-item-content-disabled-color": { + "description": "Defined in `.spectrum`.
Used by `--spectrum-accordion-item-content-disabled-color`.", + "control": "color" + }, + "system-accordion-item-content-color": { + "description": "Defined in `.spectrum`.
Used by `--spectrum-accordion-item-content-color`.", + "control": "color" + } + }, + "passthroughs": {}, + "high-contrast": {} } diff --git a/components/accordion/index.css b/components/accordion/index.css index 2e0a7616455..33581f5092e 100644 --- a/components/accordion/index.css +++ b/components/accordion/index.css @@ -44,10 +44,10 @@ --spectrum-accordion-item-content-line-height: var(--spectrum-line-height-100); /* Colors */ - --spectrum-accordion-background-color-default: rgba(var(--spectrum-gray-900-rgb), var(--spectrum-background-opacity-default)); - --spectrum-accordion-background-color-hover: rgba(var(--spectrum-gray-900-rgb), var(--spectrum-background-opacity-hover)); - --spectrum-accordion-background-color-down: rgba(var(--spectrum-gray-900-rgb), var(--spectrum-background-opacity-down)); - --spectrum-accordion-background-color-key-focus: rgba(var(--spectrum-gray-900-rgb), var(--spectrum-background-opacity-key-focus)); + --spectrum-accordion-background-color-default: rgb(var(--spectrum-gray-900-rgb), var(--spectrum-background-opacity-default)); + --spectrum-accordion-background-color-hover: rgb(var(--spectrum-gray-900-rgb), var(--spectrum-background-opacity-hover)); + --spectrum-accordion-background-color-down: rgb(var(--spectrum-gray-900-rgb), var(--spectrum-background-opacity-down)); + --spectrum-accordion-background-color-key-focus: rgb(var(--spectrum-gray-900-rgb), var(--spectrum-background-opacity-key-focus)); /* Label */ --spectrum-accordion-item-header-color-default: var(--spectrum-neutral-content-color-default); @@ -72,6 +72,7 @@ &:lang(ja), &:lang(zh), &:lang(ko) { + /* @description When the language is CJK, update line-height values to prevent cut off diacritics */ --spectrum-accordion-item-header-line-height: var(--spectrum-cjk-line-height-100); --spectrum-accordion-item-content-line-height: var(--spectrum-cjk-line-height-100); } diff --git a/components/accordion/stories/accordion.stories.js b/components/accordion/stories/accordion.stories.js index 3709e75871f..444d9f63847 100644 --- a/components/accordion/stories/accordion.stories.js +++ b/components/accordion/stories/accordion.stories.js @@ -3,11 +3,13 @@ import { Sizes } from "@spectrum-css/preview/decorators"; import { disableDefaultModes } from "@spectrum-css/preview/modes"; import { size } from "@spectrum-css/preview/types"; import { Template as Typography } from "@spectrum-css/typography/stories/template.js"; -import metadata from "../dist/metadata.json"; -import packageJson from "../package.json"; import { AccordionGroup } from "./accordion.test.js"; import { Template } from "./template.js"; +// Local assets to render the component styles and structure +import metadata from "../dist/metadata.json"; +import packageJson from "../package.json"; + /** * The accordion element contains a list of items that can be expanded or collapsed to reveal additional content or information associated with each item. There can be zero expanded items, exactly one expanded item, or more than one item expanded at a time, depending on the configuration. This list of items is defined by child accordion item elements. * @@ -68,6 +70,7 @@ export default { }, packageJson, metadata, + cssprops: metadata.modifiers, }, }; diff --git a/components/actionbar/dist/metadata.json b/components/actionbar/dist/metadata.json index 3632db90bf7..5ff726448fc 100644 --- a/components/actionbar/dist/metadata.json +++ b/components/actionbar/dist/metadata.json @@ -14,84 +14,389 @@ ".spectrum-ActionBar--fixed", ".spectrum-ActionBar--flexible .spectrum-ActionBar-popover", ".spectrum-ActionBar--sticky", - ".spectrum-ActionBar.is-open", ".spectrum-ActionBar:lang(ja)", ".spectrum-ActionBar:lang(ko)", - ".spectrum-ActionBar:lang(zh)" + ".spectrum-ActionBar:lang(zh)", + ".spectrum-ActionBar.is-open" ], - "modifiers": [ - "--mod-actionbar-corner-radius", - "--mod-actionbar-emphasized-background-color", - "--mod-actionbar-emphasized-item-counter-color", - "--mod-actionbar-height", - "--mod-actionbar-item-counter-color", - "--mod-actionbar-item-counter-font-size", - "--mod-actionbar-item-counter-line-height", - "--mod-actionbar-item-counter-line-height-cjk", - "--mod-actionbar-popover-background-color", - "--mod-actionbar-popover-border-color", - "--mod-actionbar-shadow-blur", - "--mod-actionbar-shadow-color", - "--mod-actionbar-shadow-horizontal", - "--mod-actionbar-shadow-vertical", - "--mod-actionbar-spacing-action-group-end", - "--mod-actionbar-spacing-action-group-top", - "--mod-actionbar-spacing-close-button-end", - "--mod-actionbar-spacing-close-button-start", - "--mod-actionbar-spacing-close-button-top", - "--mod-actionbar-spacing-item-counter-end", - "--mod-actionbar-spacing-item-counter-top", - "--mod-actionbar-spacing-outer-edge" - ], - "component": [ - "--spectrum-action-bar-height", - "--spectrum-action-bar-top-to-item-counter", - "--spectrum-actionbar-corner-radius", - "--spectrum-actionbar-emphasized-background-color", - "--spectrum-actionbar-emphasized-item-counter-color", - "--spectrum-actionbar-height", - "--spectrum-actionbar-item-counter-color", - "--spectrum-actionbar-item-counter-font-size", - "--spectrum-actionbar-item-counter-line-height", - "--spectrum-actionbar-item-counter-line-height-cjk", - "--spectrum-actionbar-popover-background-color", - "--spectrum-actionbar-popover-border-color", - "--spectrum-actionbar-shadow-blur", - "--spectrum-actionbar-shadow-color", - "--spectrum-actionbar-shadow-horizontal", - "--spectrum-actionbar-shadow-vertical", - "--spectrum-actionbar-spacing-action-group-end", - "--spectrum-actionbar-spacing-action-group-top", - "--spectrum-actionbar-spacing-close-button-end", - "--spectrum-actionbar-spacing-close-button-start", - "--spectrum-actionbar-spacing-close-button-top", - "--spectrum-actionbar-spacing-item-counter-end", - "--spectrum-actionbar-spacing-item-counter-top", - "--spectrum-actionbar-spacing-outer-edge" - ], - "global": [ - "--spectrum-cjk-line-height-100", - "--spectrum-corner-radius-100", - "--spectrum-drop-shadow-blur", - "--spectrum-drop-shadow-color", - "--spectrum-drop-shadow-x", - "--spectrum-drop-shadow-y", - "--spectrum-font-size-100", - "--spectrum-gray-25", - "--spectrum-gray-400", - "--spectrum-informative-background-color-default", - "--spectrum-line-height-100", - "--spectrum-neutral-content-color-default", - "--spectrum-spacing-100", - "--spectrum-spacing-300", - "--spectrum-spacing-400", - "--spectrum-spacing-75", - "--spectrum-white" - ], - "system-theme": [ - "--system-action-bar-popover-background-color", - "--system-action-bar-popover-border-color" - ], - "passthroughs": [], - "high-contrast": ["--highcontrast-actionbar-popover-border-color"] + "modifiers": { + "mod-actionbar-spacing-outer-edge": { + "value": "var(--spectrum-actionbar-spacing-outer-edge)", + "description": "Used by `.spectrum-ActionBar`, `.spectrum-ActionBar.is-open`.
Defaults to `var(--spectrum-actionbar-spacing-outer-edge)`, if not set.", + "control": "text", + "category": "Modifier" + }, + "mod-actionbar-height": { + "value": "var(--spectrum-actionbar-height)", + "description": "Used by `.spectrum-ActionBar.is-open`, `.spectrum-ActionBar .spectrum-ActionBar-popover`.
Defaults to `var(--spectrum-actionbar-height)`, if not set.", + "control": "text", + "category": "Modifier" + }, + "mod-actionbar-corner-radius": { + "value": "var(--spectrum-actionbar-corner-radius)", + "description": "Used by `.spectrum-ActionBar .spectrum-ActionBar-popover`.
Defaults to `var(--spectrum-actionbar-corner-radius)`, if not set.", + "control": "text", + "category": "Modifier" + }, + "mod-actionbar-popover-border-color": { + "value": "var(--spectrum-actionbar-popover-border-color)", + "description": "Used by `.spectrum-ActionBar .spectrum-ActionBar-popover`.
Defaults to `var(--spectrum-actionbar-popover-border-color)`, if not set.", + "control": "color", + "category": "Modifier" + }, + "mod-actionbar-popover-background-color": { + "value": "var(--spectrum-actionbar-popover-background-color)", + "description": "Used by `.spectrum-ActionBar .spectrum-ActionBar-popover`.
Defaults to `var(--spectrum-actionbar-popover-background-color)`, if not set.", + "control": "color", + "category": "Modifier" + }, + "mod-actionbar-shadow-horizontal": { + "value": "var(--spectrum-actionbar-shadow-horizontal)", + "description": "Used by `.spectrum-ActionBar .spectrum-ActionBar-popover`.
Defaults to `var(--spectrum-actionbar-shadow-horizontal)`, if not set.", + "control": "text", + "category": "Modifier" + }, + "mod-actionbar-shadow-vertical": { + "value": "var(--spectrum-actionbar-shadow-vertical)", + "description": "Used by `.spectrum-ActionBar .spectrum-ActionBar-popover`.
Defaults to `var(--spectrum-actionbar-shadow-vertical)`, if not set.", + "control": "text", + "category": "Modifier" + }, + "mod-actionbar-shadow-blur": { + "value": "var(--spectrum-actionbar-shadow-blur)", + "description": "Used by `.spectrum-ActionBar .spectrum-ActionBar-popover`.
Defaults to `var(--spectrum-actionbar-shadow-blur)`, if not set.", + "control": "text", + "category": "Modifier" + }, + "mod-actionbar-shadow-color": { + "value": "var(--spectrum-actionbar-shadow-color)", + "description": "Used by `.spectrum-ActionBar .spectrum-ActionBar-popover`.
Defaults to `var(--spectrum-actionbar-shadow-color)`, if not set.", + "control": "color", + "category": "Modifier" + }, + "mod-actionbar-spacing-close-button-start": { + "value": "var(--spectrum-actionbar-spacing-close-button-start)", + "description": "Used by `.spectrum-ActionBar .spectrum-CloseButton`.
Defaults to `var(--spectrum-actionbar-spacing-close-button-start)`, if not set.", + "control": "text", + "category": "Modifier" + }, + "mod-actionbar-spacing-close-button-end": { + "value": "var(--spectrum-actionbar-spacing-close-button-end)", + "description": "Used by `.spectrum-ActionBar .spectrum-CloseButton`.
Defaults to `var(--spectrum-actionbar-spacing-close-button-end)`, if not set.", + "control": "text", + "category": "Modifier" + }, + "mod-actionbar-spacing-close-button-top": { + "value": "var(--spectrum-actionbar-spacing-close-button-top)", + "description": "Used by `.spectrum-ActionBar .spectrum-CloseButton`.
Defaults to `var(--spectrum-actionbar-spacing-close-button-top)`, if not set.", + "control": "text", + "category": "Modifier" + }, + "mod-actionbar-spacing-item-counter-end": { + "value": "var(--spectrum-actionbar-spacing-item-counter-end)", + "description": "Used by `.spectrum-ActionBar .spectrum-FieldLabel`.
Defaults to `var(--spectrum-actionbar-spacing-item-counter-end)`, if not set.", + "control": "text", + "category": "Modifier" + }, + "mod-actionbar-spacing-item-counter-top": { + "value": "var(--spectrum-actionbar-spacing-item-counter-top)", + "description": "Used by `.spectrum-ActionBar .spectrum-FieldLabel`.
Defaults to `var(--spectrum-actionbar-spacing-item-counter-top)`, if not set.", + "control": "text", + "category": "Modifier" + }, + "mod-actionbar-item-counter-font-size": { + "value": "var(--spectrum-actionbar-item-counter-font-size)", + "description": "Used by `.spectrum-ActionBar .spectrum-FieldLabel`.
Defaults to `var(--spectrum-actionbar-item-counter-font-size)`, if not set.", + "control": "text", + "category": "Modifier" + }, + "mod-actionbar-item-counter-color": { + "value": "var(--spectrum-actionbar-item-counter-color)", + "description": "Used by `.spectrum-ActionBar .spectrum-FieldLabel`.
Defaults to `var(--spectrum-actionbar-item-counter-color)`, if not set.", + "control": "color", + "category": "Modifier" + }, + "mod-actionbar-item-counter-line-height": { + "value": "var(--spectrum-actionbar-item-counter-line-height)", + "description": "Used by `.spectrum-ActionBar .spectrum-FieldLabel`.
Defaults to `var(--spectrum-actionbar-item-counter-line-height)`, if not set.", + "control": "text", + "category": "Modifier" + }, + "mod-actionbar-item-counter-line-height-cjk": { + "value": "var(--spectrum-actionbar-item-counter-line-height-cjk)", + "description": "Used by `.spectrum-ActionBar .spectrum-FieldLabel:lang(ja), .spectrum-ActionBar .spectrum-FieldLabel:lang(ko), .spectrum-ActionBar .spectrum-FieldLabel:lang(zh)`.
Defaults to `var(--spectrum-actionbar-item-counter-line-height-cjk)`, if not set.", + "control": "text", + "category": "Modifier" + }, + "mod-actionbar-spacing-action-group-end": { + "value": "var(--spectrum-actionbar-spacing-action-group-end)", + "description": "Used by `.spectrum-ActionBar .spectrum-ActionGroup`.
Defaults to `var(--spectrum-actionbar-spacing-action-group-end)`, if not set.", + "control": "text", + "category": "Modifier" + }, + "mod-actionbar-spacing-action-group-top": { + "value": "var(--spectrum-actionbar-spacing-action-group-top)", + "description": "Used by `.spectrum-ActionBar .spectrum-ActionGroup`.
Defaults to `var(--spectrum-actionbar-spacing-action-group-top)`, if not set.", + "control": "text", + "category": "Modifier" + }, + "mod-actionbar-emphasized-background-color": { + "value": "var(--spectrum-actionbar-emphasized-background-color)", + "description": "Used by `.spectrum-ActionBar--emphasized .spectrum-ActionBar-popover`.
Defaults to `var(--spectrum-actionbar-emphasized-background-color)`, if not set.", + "control": "color", + "category": "Modifier" + }, + "mod-actionbar-emphasized-item-counter-color": { + "value": "var(--spectrum-actionbar-emphasized-item-counter-color)", + "description": "Used by `.spectrum-ActionBar--emphasized .spectrum-FieldLabel`.
Defaults to `var(--spectrum-actionbar-emphasized-item-counter-color)`, if not set.", + "control": "color", + "category": "Modifier" + } + }, + "component": { + "spectrum-actionbar-height": { + "description": "Defined in `.spectrum-ActionBar`.
Used by `.spectrum-ActionBar.is-open`, `.spectrum-ActionBar .spectrum-ActionBar-popover`.", + "control": "text", + "category": "Component" + }, + "spectrum-action-bar-height": { + "value": "48px", + "description": "Used by `--spectrum-actionbar-height`.", + "control": "text", + "category": "Component" + }, + "spectrum-actionbar-corner-radius": { + "description": "Defined in `.spectrum-ActionBar`.
Used by `.spectrum-ActionBar .spectrum-ActionBar-popover`.", + "control": "text", + "category": "Component" + }, + "spectrum-actionbar-item-counter-font-size": { + "description": "Defined in `.spectrum-ActionBar`.
Used by `.spectrum-ActionBar .spectrum-FieldLabel`.", + "control": "text", + "category": "Component" + }, + "spectrum-actionbar-item-counter-line-height": { + "description": "Defined in `.spectrum-ActionBar`.
Used by `.spectrum-ActionBar .spectrum-FieldLabel`.", + "control": "text", + "category": "Component" + }, + "spectrum-actionbar-item-counter-color": { + "description": "Defined in `.spectrum-ActionBar`.
Used by `.spectrum-ActionBar .spectrum-FieldLabel`.", + "control": "color", + "category": "Component" + }, + "spectrum-actionbar-emphasized-background-color": { + "description": "Defined in `.spectrum-ActionBar`.
Used by `.spectrum-ActionBar--emphasized .spectrum-ActionBar-popover`.", + "control": "color", + "category": "Component" + }, + "spectrum-actionbar-emphasized-item-counter-color": { + "description": "Defined in `.spectrum-ActionBar`.
Used by `.spectrum-ActionBar--emphasized .spectrum-FieldLabel`.", + "control": "color", + "category": "Component" + }, + "spectrum-actionbar-spacing-outer-edge": { + "description": "Defined in `.spectrum-ActionBar`.
Used by `.spectrum-ActionBar`, `.spectrum-ActionBar.is-open`.", + "control": "text", + "category": "Component" + }, + "spectrum-actionbar-spacing-close-button-top": { + "description": "Defined in `.spectrum-ActionBar`.
Used by `.spectrum-ActionBar .spectrum-CloseButton`.", + "control": "text", + "category": "Component" + }, + "spectrum-actionbar-spacing-close-button-start": { + "description": "Defined in `.spectrum-ActionBar`.
Used by `.spectrum-ActionBar .spectrum-CloseButton`.", + "control": "text", + "category": "Component" + }, + "spectrum-actionbar-spacing-close-button-end": { + "description": "Defined in `.spectrum-ActionBar`.
Used by `.spectrum-ActionBar .spectrum-CloseButton`.", + "control": "text", + "category": "Component" + }, + "spectrum-actionbar-spacing-item-counter-top": { + "description": "Defined in `.spectrum-ActionBar`.
Used by `.spectrum-ActionBar .spectrum-FieldLabel`.", + "control": "text", + "category": "Component" + }, + "spectrum-action-bar-top-to-item-counter": { + "value": "14px", + "description": "Used by `--spectrum-actionbar-spacing-item-counter-top`.", + "control": "text", + "category": "Component" + }, + "spectrum-actionbar-spacing-item-counter-end": { + "description": "Defined in `.spectrum-ActionBar`.
Used by `.spectrum-ActionBar .spectrum-FieldLabel`.", + "control": "text", + "category": "Component" + }, + "spectrum-actionbar-spacing-action-group-top": { + "description": "Defined in `.spectrum-ActionBar`.
Used by `.spectrum-ActionBar .spectrum-ActionGroup`.", + "control": "text", + "category": "Component" + }, + "spectrum-actionbar-spacing-action-group-end": { + "description": "Defined in `.spectrum-ActionBar`.
Used by `.spectrum-ActionBar .spectrum-ActionGroup`.", + "control": "text", + "category": "Component" + }, + "spectrum-actionbar-shadow-horizontal": { + "description": "Defined in `.spectrum-ActionBar`.
Used by `.spectrum-ActionBar .spectrum-ActionBar-popover`.", + "control": "text", + "category": "Component" + }, + "spectrum-actionbar-shadow-vertical": { + "description": "Defined in `.spectrum-ActionBar`.
Used by `.spectrum-ActionBar .spectrum-ActionBar-popover`.", + "control": "text", + "category": "Component" + }, + "spectrum-actionbar-shadow-blur": { + "description": "Defined in `.spectrum-ActionBar`.
Used by `.spectrum-ActionBar .spectrum-ActionBar-popover`.", + "control": "text", + "category": "Component" + }, + "spectrum-actionbar-shadow-color": { + "description": "Defined in `.spectrum-ActionBar`.
Used by `.spectrum-ActionBar .spectrum-ActionBar-popover`.", + "control": "color", + "category": "Component" + }, + "spectrum-actionbar-item-counter-line-height-cjk": { + "description": "Defined in `.spectrum-ActionBar:lang(ja), .spectrum-ActionBar:lang(ko), .spectrum-ActionBar:lang(zh)`.
Used by `.spectrum-ActionBar .spectrum-FieldLabel:lang(ja), .spectrum-ActionBar .spectrum-FieldLabel:lang(ko), .spectrum-ActionBar .spectrum-FieldLabel:lang(zh)`.", + "control": "text", + "category": "Component" + }, + "spectrum-actionbar-popover-border-color": { + "description": "Defined in `.spectrum-ActionBar`.
Used by `.spectrum-ActionBar .spectrum-ActionBar-popover`.", + "control": "color", + "category": "Component" + }, + "spectrum-actionbar-popover-background-color": { + "description": "Defined in `.spectrum-ActionBar`.
Used by `.spectrum-ActionBar .spectrum-ActionBar-popover`.", + "control": "color", + "category": "Component" + } + }, + "global": { + "spectrum-gray-25": { + "value": "light-dark(rgb(255, 255, 255), rgb(17, 17, 17))", + "description": "Used by `--system-action-bar-popover-background-color`.", + "control": "text", + "category": "Global" + }, + "spectrum-gray-400": { + "value": "light-dark(rgb(198, 198, 198), rgb(68, 68, 68))", + "description": "Used by `--system-action-bar-popover-border-color`.", + "control": "text", + "category": "Global" + }, + "spectrum-corner-radius-100": { + "value": "8px", + "description": "Used by `--spectrum-actionbar-corner-radius`.", + "control": "text", + "category": "Global" + }, + "spectrum-font-size-100": { + "value": "14px", + "description": "Used by `--spectrum-actionbar-item-counter-font-size`.", + "control": "text", + "category": "Global" + }, + "spectrum-line-height-100": { + "value": "1.3", + "description": "Used by `--spectrum-actionbar-item-counter-line-height`.", + "control": "text", + "category": "Global" + }, + "spectrum-neutral-content-color-default": { + "value": "var(--spectrum-gray-800)", + "description": "Used by `--spectrum-actionbar-item-counter-color`.", + "control": "color", + "category": "Global" + }, + "spectrum-informative-background-color-default": { + "value": "var(--spectrum-informative-color-800)", + "description": "Used by `--spectrum-actionbar-emphasized-background-color`.", + "control": "color", + "category": "Global" + }, + "spectrum-white": { + "value": "light-dark(rgb(255, 255, 255), rgb(255, 255, 255))", + "description": "Used by `--spectrum-actionbar-emphasized-item-counter-color`.", + "control": "text", + "category": "Global" + }, + "spectrum-spacing-300": { + "value": "16px", + "description": "Used by `--spectrum-actionbar-spacing-outer-edge`.", + "control": "text", + "category": "Global" + }, + "spectrum-spacing-100": { + "value": "8px", + "description": "Used by `--spectrum-actionbar-spacing-close-button-top`, `--spectrum-actionbar-spacing-close-button-start`, `--spectrum-actionbar-spacing-action-group-top`, `--spectrum-actionbar-spacing-action-group-end`.", + "control": "text", + "category": "Global" + }, + "spectrum-spacing-75": { + "value": "4px", + "description": "Used by `--spectrum-actionbar-spacing-close-button-end`.", + "control": "text", + "category": "Global" + }, + "spectrum-spacing-400": { + "value": "24px", + "description": "Used by `--spectrum-actionbar-spacing-item-counter-end`.", + "control": "text", + "category": "Global" + }, + "spectrum-drop-shadow-x": { + "value": "0px", + "description": "Used by `--spectrum-actionbar-shadow-horizontal`.", + "control": "text", + "category": "Global" + }, + "spectrum-drop-shadow-y": { + "value": "1px", + "description": "Used by `--spectrum-actionbar-shadow-vertical`.", + "control": "text", + "category": "Global" + }, + "spectrum-drop-shadow-blur": { + "value": "4px", + "description": "Used by `--spectrum-actionbar-shadow-blur`.", + "control": "text", + "category": "Global" + }, + "spectrum-drop-shadow-color": { + "value": "var(--spectrum-drop-shadow-color-100)", + "description": "Used by `--spectrum-actionbar-shadow-color`.", + "control": "color", + "category": "Global" + }, + "spectrum-cjk-line-height-100": { + "value": "1.5", + "description": "Used by `--spectrum-actionbar-item-counter-line-height-cjk`.", + "control": "text", + "category": "Global" + } + }, + "system-theme": { + "system-action-bar-popover-background-color": { + "description": "Defined in `.spectrum`.
Used by `--spectrum-actionbar-popover-background-color`.", + "control": "color" + }, + "system-action-bar-popover-border-color": { + "description": "Defined in `.spectrum`.
Used by `--spectrum-actionbar-popover-border-color`.", + "control": "color" + } + }, + "passthroughs": {}, + "high-contrast": { + "highcontrast-actionbar-popover-border-color": { + "value": "var(--mod-actionbar-popover-border-color, var(--spectrum-actionbar-popover-border-color))", + "description": "Defined in `.spectrum-ActionBar, .spectrum-ActionBar--emphasized .spectrum-ActionBar-popover`.
Used by `.spectrum-ActionBar .spectrum-ActionBar-popover`.
Defaults to `var(--mod-actionbar-popover-border-color, var(--spectrum-actionbar-popover-border-color))`, if not set.", + "control": "color" + } + } } diff --git a/components/actionbar/stories/actionbar.stories.js b/components/actionbar/stories/actionbar.stories.js index aa2e867ea09..d8cacaae49a 100644 --- a/components/actionbar/stories/actionbar.stories.js +++ b/components/actionbar/stories/actionbar.stories.js @@ -3,11 +3,13 @@ import { default as CloseButton } from "@spectrum-css/closebutton/stories/closeb import { default as Popover } from "@spectrum-css/popover/stories/popover.stories.js"; import { disableDefaultModes } from "@spectrum-css/preview/modes"; import { isEmphasized, isOpen } from "@spectrum-css/preview/types"; -import metadata from "../dist/metadata.json"; -import packageJson from "../package.json"; import { ActionBarGroup } from "./actionbar.test.js"; import { BehavioralTemplate } from "./template.js"; +// Local assets to render the component styles and structure +import metadata from "../dist/metadata.json"; +import packageJson from "../package.json"; + /** * The action bar component is a floating full width bar that appears upon selection. Action bars are used for single and bulk selection patterns, when a user needs to perform actions on either a single or multiple items at the same time. * @@ -72,6 +74,7 @@ export default { }, packageJson, metadata, + cssprops: metadata.modifiers, }, }; diff --git a/components/actionbar/stories/template.js b/components/actionbar/stories/template.js index 8b134157bd2..d1b9125cfcc 100644 --- a/components/actionbar/stories/template.js +++ b/components/actionbar/stories/template.js @@ -1,10 +1,11 @@ -import { Container } from "@spectrum-css/preview/decorators"; import { Template as ActionGroup } from "@spectrum-css/actiongroup/stories/template.js"; import { Template as CloseButton } from "@spectrum-css/closebutton/stories/template.js"; import { Template as FieldLabel } from "@spectrum-css/fieldlabel/stories/template.js"; import { Template as Popover } from "@spectrum-css/popover/stories/template.js"; +import { Container, getRandomId } from "@spectrum-css/preview/decorators"; import { html } from "lit"; import { classMap } from "lit/directives/class-map.js"; +import { ifDefined } from "lit/directives/if-defined.js"; import { styleMap } from "lit/directives/style-map.js"; import "../index.css"; @@ -14,6 +15,7 @@ import "../themes/express.css"; export const Template = ({ rootClass = "spectrum-ActionBar", + id = getRandomId("action-bar"), size = "m", isOpen = true, isEmphasized = false, @@ -36,6 +38,7 @@ export const Template = ({ "is-open": isOpen, ...customClasses.reduce((a, c) => ({ ...a, [c]: true }), {}), })} + id=${ifDefined(id)} style=${styleMap(customStyles)} > ${Popover({ diff --git a/components/actionbutton/dist/metadata.json b/components/actionbutton/dist/metadata.json index 08d99aab279..c31c3987d67 100644 --- a/components/actionbutton/dist/metadata.json +++ b/components/actionbutton/dist/metadata.json @@ -13,6 +13,15 @@ ".spectrum-ActionButton-icon:only-child", ".spectrum-ActionButton-label", ".spectrum-ActionButton-label:empty", + ".spectrum-ActionButton::-moz-focus-inner", + ".spectrum-ActionButton:active", + ".spectrum-ActionButton:after", + ".spectrum-ActionButton:dir(rtl)", + ".spectrum-ActionButton:disabled", + ".spectrum-ActionButton:focus", + ".spectrum-ActionButton:focus-visible", + ".spectrum-ActionButton:focus-visible:after", + ".spectrum-ActionButton:hover", ".spectrum-ActionButton.is-disabled", ".spectrum-ActionButton.is-selected", ".spectrum-ActionButton.is-selected .spectrum-ActionButton-hold", @@ -29,272 +38,1309 @@ ".spectrum-ActionButton.spectrum-ActionButton--staticBlack.spectrum-ActionButton--quiet", ".spectrum-ActionButton.spectrum-ActionButton--staticWhite", ".spectrum-ActionButton.spectrum-ActionButton--staticWhite.spectrum-ActionButton--quiet", - ".spectrum-ActionButton::-moz-focus-inner", - ".spectrum-ActionButton:active", - ".spectrum-ActionButton:after", - ".spectrum-ActionButton:dir(rtl)", - ".spectrum-ActionButton:disabled", - ".spectrum-ActionButton:focus", - ".spectrum-ActionButton:focus-visible", - ".spectrum-ActionButton:focus-visible:after", - ".spectrum-ActionButton:hover", "[dir=\"rtl\"] .spectrum-ActionButton", "a.spectrum-ActionButton" ], - "modifiers": [ - "--mod-actionbutton-animation-duration", - "--mod-actionbutton-background-color-default", - "--mod-actionbutton-background-color-default-selected", - "--mod-actionbutton-background-color-default-selected-emphasized", - "--mod-actionbutton-background-color-disabled", - "--mod-actionbutton-background-color-down", - "--mod-actionbutton-background-color-down-selected", - "--mod-actionbutton-background-color-down-selected-emphasized", - "--mod-actionbutton-background-color-focus", - "--mod-actionbutton-background-color-focus-selected", - "--mod-actionbutton-background-color-focus-selected-emphasized", - "--mod-actionbutton-background-color-hover", - "--mod-actionbutton-background-color-hover-selected", - "--mod-actionbutton-background-color-hover-selected-emphasized", - "--mod-actionbutton-border-color-default", - "--mod-actionbutton-border-color-disabled", - "--mod-actionbutton-border-color-down", - "--mod-actionbutton-border-color-focus", - "--mod-actionbutton-border-color-hover", - "--mod-actionbutton-border-radius", - "--mod-actionbutton-border-width", - "--mod-actionbutton-content-color-default", - "--mod-actionbutton-content-color-default-selected", - "--mod-actionbutton-content-color-default-selected-emphasized", - "--mod-actionbutton-content-color-disabled", - "--mod-actionbutton-content-color-down", - "--mod-actionbutton-content-color-down-selected", - "--mod-actionbutton-content-color-down-selected-emphasized", - "--mod-actionbutton-content-color-focus", - "--mod-actionbutton-content-color-focus-selected", - "--mod-actionbutton-content-color-focus-selected-emphasized", - "--mod-actionbutton-content-color-hover", - "--mod-actionbutton-content-color-hover-selected", - "--mod-actionbutton-content-color-hover-selected-emphasized", - "--mod-actionbutton-edge-to-hold-icon", - "--mod-actionbutton-edge-to-text", - "--mod-actionbutton-edge-to-visual", - "--mod-actionbutton-edge-to-visual-only", - "--mod-actionbutton-focus-indicator-border-radius", - "--mod-actionbutton-focus-indicator-color", - "--mod-actionbutton-focus-indicator-gap", - "--mod-actionbutton-focus-indicator-thickness", - "--mod-actionbutton-font-size", - "--mod-actionbutton-height", - "--mod-actionbutton-icon-size", - "--mod-actionbutton-label-color", - "--mod-actionbutton-min-width", - "--mod-actionbutton-static-content-color", - "--mod-actionbutton-text-to-visual", - "--mod-animation-duration-100", - "--mod-line-height-100", - "--mod-sans-font-family-stack" - ], - "component": [ - "--spectrum-action-button-edge-to-hold-icon-extra-large", - "--spectrum-action-button-edge-to-hold-icon-extra-small", - "--spectrum-action-button-edge-to-hold-icon-large", - "--spectrum-action-button-edge-to-hold-icon-medium", - "--spectrum-action-button-edge-to-hold-icon-small", - "--spectrum-actionbutton-background-color", - "--spectrum-actionbutton-background-color-default", - "--spectrum-actionbutton-background-color-disabled", - "--spectrum-actionbutton-background-color-down", - "--spectrum-actionbutton-background-color-focus", - "--spectrum-actionbutton-background-color-hover", - "--spectrum-actionbutton-background-color-selected", - "--spectrum-actionbutton-background-color-selected-disabled", - "--spectrum-actionbutton-background-color-selected-down", - "--spectrum-actionbutton-background-color-selected-focus", - "--spectrum-actionbutton-background-color-selected-hover", - "--spectrum-actionbutton-border-color", - "--spectrum-actionbutton-border-color-default", - "--spectrum-actionbutton-border-color-disabled", - "--spectrum-actionbutton-border-color-down", - "--spectrum-actionbutton-border-color-focus", - "--spectrum-actionbutton-border-color-hover", - "--spectrum-actionbutton-border-radius", - "--spectrum-actionbutton-border-radius-default", - "--spectrum-actionbutton-border-width", - "--spectrum-actionbutton-content-color", - "--spectrum-actionbutton-content-color-selected", - "--spectrum-actionbutton-edge-to-hold-icon", - "--spectrum-actionbutton-edge-to-text", - "--spectrum-actionbutton-edge-to-visual", - "--spectrum-actionbutton-edge-to-visual-only", - "--spectrum-actionbutton-focus-indicator-color", - "--spectrum-actionbutton-focus-indicator-gap", - "--spectrum-actionbutton-focus-indicator-thickness", - "--spectrum-actionbutton-font-size", - "--spectrum-actionbutton-height", - "--spectrum-actionbutton-icon-size", - "--spectrum-actionbutton-sized-edge-to-hold-icon", - "--spectrum-actionbutton-sized-edge-to-text", - "--spectrum-actionbutton-sized-edge-to-visual", - "--spectrum-actionbutton-sized-edge-to-visual-only", - "--spectrum-actionbutton-sized-font-size", - "--spectrum-actionbutton-sized-height", - "--spectrum-actionbutton-sized-icon-size", - "--spectrum-actionbutton-sized-text-to-visual", - "--spectrum-actionbutton-text-to-visual" - ], - "global": [ - "--spectrum-accent-background-color-default", - "--spectrum-accent-background-color-down", - "--spectrum-accent-background-color-hover", - "--spectrum-accent-background-color-key-focus", - "--spectrum-animation-duration-100", - "--spectrum-black", - "--spectrum-border-width-100", - "--spectrum-component-edge-to-text-100", - "--spectrum-component-edge-to-text-200", - "--spectrum-component-edge-to-text-300", - "--spectrum-component-edge-to-text-50", - "--spectrum-component-edge-to-text-75", - "--spectrum-component-edge-to-visual-100", - "--spectrum-component-edge-to-visual-200", - "--spectrum-component-edge-to-visual-300", - "--spectrum-component-edge-to-visual-50", - "--spectrum-component-edge-to-visual-75", - "--spectrum-component-edge-to-visual-only-100", - "--spectrum-component-edge-to-visual-only-200", - "--spectrum-component-edge-to-visual-only-300", - "--spectrum-component-edge-to-visual-only-50", - "--spectrum-component-edge-to-visual-only-75", - "--spectrum-component-height-100", - "--spectrum-component-height-200", - "--spectrum-component-height-300", - "--spectrum-component-height-50", - "--spectrum-component-height-75", - "--spectrum-corner-radius-medium-size-extra-large", - "--spectrum-corner-radius-medium-size-extra-small", - "--spectrum-corner-radius-medium-size-large", - "--spectrum-corner-radius-medium-size-medium", - "--spectrum-corner-radius-medium-size-small", - "--spectrum-disabled-background-color", - "--spectrum-disabled-content-color", - "--spectrum-disabled-static-black-background-color", - "--spectrum-disabled-static-black-content-color", - "--spectrum-disabled-static-white-background-color", - "--spectrum-disabled-static-white-content-color", - "--spectrum-focus-indicator-color", - "--spectrum-focus-indicator-gap", - "--spectrum-focus-indicator-thickness", - "--spectrum-font-size-100", - "--spectrum-font-size-200", - "--spectrum-font-size-300", - "--spectrum-font-size-50", - "--spectrum-font-size-75", - "--spectrum-gray-100", - "--spectrum-gray-200", - "--spectrum-gray-50", - "--spectrum-line-height-100", - "--spectrum-logical-rotation", - "--spectrum-neutral-background-color-selected-default", - "--spectrum-neutral-background-color-selected-down", - "--spectrum-neutral-background-color-selected-hover", - "--spectrum-neutral-background-color-selected-key-focus", - "--spectrum-neutral-content-color-default", - "--spectrum-neutral-content-color-down", - "--spectrum-neutral-content-color-hover", - "--spectrum-neutral-content-color-key-focus", - "--spectrum-sans-font-family-stack", - "--spectrum-static-black-focus-indicator-color", - "--spectrum-static-white-focus-indicator-color", - "--spectrum-text-to-visual-100", - "--spectrum-text-to-visual-200", - "--spectrum-text-to-visual-300", - "--spectrum-text-to-visual-50", - "--spectrum-text-to-visual-75", - "--spectrum-transparent-black-100", - "--spectrum-transparent-black-200", - "--spectrum-transparent-black-800", - "--spectrum-transparent-black-900", - "--spectrum-transparent-white-100", - "--spectrum-transparent-white-200", - "--spectrum-transparent-white-800", - "--spectrum-transparent-white-900", - "--spectrum-white", - "--spectrum-workflow-icon-size-100", - "--spectrum-workflow-icon-size-200", - "--spectrum-workflow-icon-size-300", - "--spectrum-workflow-icon-size-50", - "--spectrum-workflow-icon-size-75" - ], - "system-theme": [ - "--system-action-button-background-color-default", - "--system-action-button-background-color-disabled", - "--system-action-button-background-color-down", - "--system-action-button-background-color-focus", - "--system-action-button-background-color-hover", - "--system-action-button-background-color-selected", - "--system-action-button-background-color-selected-down", - "--system-action-button-background-color-selected-focus", - "--system-action-button-background-color-selected-hover", - "--system-action-button-border-color-default", - "--system-action-button-border-color-disabled", - "--system-action-button-border-color-down", - "--system-action-button-border-color-focus", - "--system-action-button-border-color-hover", - "--system-action-button-content-color-selected", - "--system-action-button-quiet-background-color-default", - "--system-action-button-quiet-background-color-disabled", - "--system-action-button-quiet-background-color-down", - "--system-action-button-quiet-background-color-focus", - "--system-action-button-quiet-background-color-hover", - "--system-action-button-quiet-background-color-selected-disabled", - "--system-action-button-size-l-border-radius-default", - "--system-action-button-size-m-border-radius-default", - "--system-action-button-size-s-border-radius-default", - "--system-action-button-size-xl-border-radius-default", - "--system-action-button-size-xs-border-radius-default", - "--system-action-button-static-black-background-color-default", - "--system-action-button-static-black-background-color-disabled", - "--system-action-button-static-black-background-color-down", - "--system-action-button-static-black-background-color-focus", - "--system-action-button-static-black-background-color-hover", - "--system-action-button-static-black-background-color-selected-disabled", - "--system-action-button-static-black-border-color-default", - "--system-action-button-static-black-border-color-disabled", - "--system-action-button-static-black-border-color-down", - "--system-action-button-static-black-border-color-focus", - "--system-action-button-static-black-border-color-hover", - "--system-action-button-static-black-quiet-background-color-default", - "--system-action-button-static-black-quiet-background-color-disabled", - "--system-action-button-static-black-quiet-background-color-down", - "--system-action-button-static-black-quiet-background-color-focus", - "--system-action-button-static-black-quiet-background-color-hover", - "--system-action-button-static-white-background-color-default", - "--system-action-button-static-white-background-color-disabled", - "--system-action-button-static-white-background-color-down", - "--system-action-button-static-white-background-color-focus", - "--system-action-button-static-white-background-color-hover", - "--system-action-button-static-white-background-color-selected-disabled", - "--system-action-button-static-white-border-color-default", - "--system-action-button-static-white-border-color-disabled", - "--system-action-button-static-white-border-color-down", - "--system-action-button-static-white-border-color-focus", - "--system-action-button-static-white-border-color-hover", - "--system-action-button-static-white-quiet-background-color-default", - "--system-action-button-static-white-quiet-background-color-disabled", - "--system-action-button-static-white-quiet-background-color-down", - "--system-action-button-static-white-quiet-background-color-focus", - "--system-action-button-static-white-quiet-background-color-hover" - ], - "passthroughs": [ - "--mod-button-animation-duration", - "--mod-button-font-family", - "--mod-button-line-height" - ], - "high-contrast": [ - "--highcontrast-actionbutton-background-color", - "--highcontrast-actionbutton-border-color", - "--highcontrast-actionbutton-content-color", - "--highcontrast-actionbutton-focus-indicator-color" - ] + "modifiers": { + "mod-sans-font-family-stack": { + "value": "var(--spectrum-sans-font-family-stack)", + "description": "Used by `.spectrum-ActionButton`.
Defaults to `var(--spectrum-sans-font-family-stack)`, if not set.", + "control": "text", + "category": "Modifier" + }, + "mod-line-height-100": { + "value": "1.3", + "description": "Used by `.spectrum-ActionButton`.
Defaults to `var(--spectrum-line-height-100)`, if not set.", + "control": "text", + "category": "Modifier" + }, + "mod-animation-duration-100": { + "value": "var(--spectrum-animation-duration-100)", + "description": "Used by `.spectrum-ActionButton`.
Defaults to `var(--spectrum-animation-duration-100)`, if not set.", + "control": "text", + "category": "Modifier" + }, + "mod-actionbutton-background-color-default": { + "value": "var(--spectrum-actionbutton-background-color-default)", + "description": "Defined in `.spectrum-ActionButton.is-selected`, `.spectrum-ActionButton:hover`, `.spectrum-ActionButton:focus-visible`, `.spectrum-ActionButton:active`, `.spectrum-ActionButton.is-disabled, .spectrum-ActionButton:disabled`.
Used by `--spectrum-actionbutton-background-color`.
Defaults to `var(--spectrum-actionbutton-background-color-default)`, if not set.", + "control": "color", + "category": "Modifier" + }, + "mod-actionbutton-border-color-default": { + "value": "var(--spectrum-actionbutton-border-color-default)", + "description": "Defined in `.spectrum-ActionButton.is-selected`, `.spectrum-ActionButton:hover`, `.spectrum-ActionButton:focus-visible`, `.spectrum-ActionButton:active`, `.spectrum-ActionButton.is-disabled, .spectrum-ActionButton:disabled`.
Used by `--spectrum-actionbutton-border-color`.
Defaults to `var(--spectrum-actionbutton-border-color-default)`, if not set.", + "control": "color", + "category": "Modifier" + }, + "mod-actionbutton-content-color-default": { + "value": "var(--spectrum-gray-800)", + "description": "Defined in `.spectrum-ActionButton.spectrum-ActionButton--staticBlack`, `.spectrum-ActionButton.spectrum-ActionButton--staticWhite`, `.spectrum-ActionButton.is-selected`, `.spectrum-ActionButton:hover`, `.spectrum-ActionButton:focus-visible`, `.spectrum-ActionButton:active`, `.spectrum-ActionButton.is-disabled, .spectrum-ActionButton:disabled`.
Used by `--spectrum-actionbutton-content-color`.
Defaults to `var(--spectrum-neutral-content-color-default)`, if not set.", + "control": "color", + "category": "Modifier" + }, + "mod-actionbutton-border-radius": { + "value": "var(--spectrum-actionbutton-border-radius-default)", + "description": "Used by `--spectrum-actionbutton-border-radius`.
Defaults to `var(--spectrum-actionbutton-border-radius-default)`, if not set.", + "control": "text", + "category": "Modifier" + }, + "mod-actionbutton-border-width": { + "value": "1px", + "description": "Used by `--spectrum-actionbutton-border-width`.
Defaults to `var(--spectrum-border-width-100)`, if not set.", + "control": "text", + "category": "Modifier" + }, + "mod-actionbutton-focus-indicator-gap": { + "value": "2px", + "description": "Used by `--spectrum-actionbutton-focus-indicator-gap`.
Defaults to `var(--spectrum-focus-indicator-gap)`, if not set.", + "control": "text", + "category": "Modifier" + }, + "mod-actionbutton-focus-indicator-thickness": { + "value": "2px", + "description": "Used by `--spectrum-actionbutton-focus-indicator-thickness`.
Defaults to `var(--spectrum-focus-indicator-thickness)`, if not set.", + "control": "text", + "category": "Modifier" + }, + "mod-actionbutton-focus-indicator-color": { + "value": "var(--spectrum-blue-800)", + "description": "Defined in `.spectrum-ActionButton.spectrum-ActionButton--staticBlack`, `.spectrum-ActionButton.spectrum-ActionButton--staticWhite`.
Used by `--spectrum-actionbutton-focus-indicator-color`.
Defaults to `var(--spectrum-focus-indicator-color)`, if not set.", + "control": "color", + "category": "Modifier" + }, + "mod-actionbutton-background-color-default-selected": { + "value": "var(--spectrum-actionbutton-background-color-selected)", + "description": "Defined in `.spectrum-ActionButton.spectrum-ActionButton--emphasized:not(.spectrum-ActionButton--staticBlack, .spectrum-ActionButton--staticWhite)`, `.spectrum-ActionButton.spectrum-ActionButton--staticBlack`, `.spectrum-ActionButton.spectrum-ActionButton--staticWhite`.
Used by `--mod-actionbutton-background-color-default`.
Defaults to `var(--spectrum-actionbutton-background-color-selected)`, if not set.", + "control": "color", + "category": "Modifier" + }, + "mod-actionbutton-background-color-default-selected-emphasized": { + "value": "var(--spectrum-accent-color-800)", + "description": "Used by `--mod-actionbutton-background-color-default-selected`.
Defaults to `var(--spectrum-accent-background-color-default)`, if not set.", + "control": "color", + "category": "Modifier" + }, + "mod-actionbutton-background-color-hover-selected": { + "value": "var(--spectrum-actionbutton-background-color-selected-hover)", + "description": "Defined in `.spectrum-ActionButton.spectrum-ActionButton--emphasized:not(.spectrum-ActionButton--staticBlack, .spectrum-ActionButton--staticWhite)`, `.spectrum-ActionButton.spectrum-ActionButton--staticBlack`, `.spectrum-ActionButton.spectrum-ActionButton--staticWhite`.
Used by `--mod-actionbutton-background-color-hover`.
Defaults to `var(--spectrum-actionbutton-background-color-selected-hover)`, if not set.", + "control": "color", + "category": "Modifier" + }, + "mod-actionbutton-background-color-hover-selected-emphasized": { + "value": "var(--spectrum-accent-color-700)", + "description": "Used by `--mod-actionbutton-background-color-hover-selected`.
Defaults to `var(--spectrum-accent-background-color-hover)`, if not set.", + "control": "color", + "category": "Modifier" + }, + "mod-actionbutton-background-color-down-selected": { + "value": "var(--spectrum-actionbutton-background-color-selected-down)", + "description": "Defined in `.spectrum-ActionButton.spectrum-ActionButton--emphasized:not(.spectrum-ActionButton--staticBlack, .spectrum-ActionButton--staticWhite)`, `.spectrum-ActionButton.spectrum-ActionButton--staticBlack`, `.spectrum-ActionButton.spectrum-ActionButton--staticWhite`.
Used by `--mod-actionbutton-background-color-down`.
Defaults to `var(--spectrum-actionbutton-background-color-selected-down)`, if not set.", + "control": "color", + "category": "Modifier" + }, + "mod-actionbutton-background-color-down-selected-emphasized": { + "value": "var(--spectrum-accent-color-700)", + "description": "Used by `--mod-actionbutton-background-color-down-selected`.
Defaults to `var(--spectrum-accent-background-color-down)`, if not set.", + "control": "color", + "category": "Modifier" + }, + "mod-actionbutton-background-color-focus-selected": { + "value": "var(--spectrum-actionbutton-background-color-selected-focus)", + "description": "Defined in `.spectrum-ActionButton.spectrum-ActionButton--emphasized:not(.spectrum-ActionButton--staticBlack, .spectrum-ActionButton--staticWhite)`, `.spectrum-ActionButton.spectrum-ActionButton--staticBlack`, `.spectrum-ActionButton.spectrum-ActionButton--staticWhite`.
Used by `--mod-actionbutton-background-color-focus`.
Defaults to `var(--spectrum-actionbutton-background-color-selected-focus)`, if not set.", + "control": "color", + "category": "Modifier" + }, + "mod-actionbutton-background-color-focus-selected-emphasized": { + "value": "var(--spectrum-accent-color-700)", + "description": "Used by `--mod-actionbutton-background-color-focus-selected`.
Defaults to `var(--spectrum-accent-background-color-key-focus)`, if not set.", + "control": "color", + "category": "Modifier" + }, + "mod-actionbutton-content-color-default-selected": { + "value": "var(--spectrum-actionbutton-content-color-selected)", + "description": "Defined in `.spectrum-ActionButton.spectrum-ActionButton--emphasized:not(.spectrum-ActionButton--staticBlack, .spectrum-ActionButton--staticWhite)`, `.spectrum-ActionButton.spectrum-ActionButton--staticBlack`, `.spectrum-ActionButton.spectrum-ActionButton--staticWhite`.
Used by `--mod-actionbutton-content-color-default`.
Defaults to `var(--spectrum-actionbutton-content-color-selected)`, if not set.", + "control": "color", + "category": "Modifier" + }, + "mod-actionbutton-content-color-default-selected-emphasized": { + "value": "light-dark(rgb(255, 255, 255), rgb(255, 255, 255))", + "description": "Used by `--mod-actionbutton-content-color-default-selected`.
Defaults to `var(--spectrum-white)`, if not set.", + "control": "color", + "category": "Modifier" + }, + "mod-actionbutton-content-color-hover-selected": { + "value": "var(--spectrum-actionbutton-content-color-selected)", + "description": "Defined in `.spectrum-ActionButton.spectrum-ActionButton--emphasized:not(.spectrum-ActionButton--staticBlack, .spectrum-ActionButton--staticWhite)`, `.spectrum-ActionButton.spectrum-ActionButton--staticBlack`, `.spectrum-ActionButton.spectrum-ActionButton--staticWhite`.
Used by `--mod-actionbutton-content-color-hover`.
Defaults to `var(--spectrum-actionbutton-content-color-selected)`, if not set.", + "control": "color", + "category": "Modifier" + }, + "mod-actionbutton-content-color-hover-selected-emphasized": { + "value": "light-dark(rgb(255, 255, 255), rgb(255, 255, 255))", + "description": "Used by `--mod-actionbutton-content-color-hover-selected`.
Defaults to `var(--spectrum-white)`, if not set.", + "control": "color", + "category": "Modifier" + }, + "mod-actionbutton-content-color-down-selected": { + "value": "var(--spectrum-actionbutton-content-color-selected)", + "description": "Defined in `.spectrum-ActionButton.spectrum-ActionButton--emphasized:not(.spectrum-ActionButton--staticBlack, .spectrum-ActionButton--staticWhite)`, `.spectrum-ActionButton.spectrum-ActionButton--staticBlack`, `.spectrum-ActionButton.spectrum-ActionButton--staticWhite`.
Used by `--mod-actionbutton-content-color-down`.
Defaults to `var(--spectrum-actionbutton-content-color-selected)`, if not set.", + "control": "color", + "category": "Modifier" + }, + "mod-actionbutton-content-color-down-selected-emphasized": { + "value": "light-dark(rgb(255, 255, 255), rgb(255, 255, 255))", + "description": "Used by `--mod-actionbutton-content-color-down-selected`.
Defaults to `var(--spectrum-white)`, if not set.", + "control": "color", + "category": "Modifier" + }, + "mod-actionbutton-content-color-focus-selected": { + "value": "var(--spectrum-actionbutton-content-color-selected)", + "description": "Defined in `.spectrum-ActionButton.spectrum-ActionButton--emphasized:not(.spectrum-ActionButton--staticBlack, .spectrum-ActionButton--staticWhite)`, `.spectrum-ActionButton.spectrum-ActionButton--staticBlack`, `.spectrum-ActionButton.spectrum-ActionButton--staticWhite`.
Used by `--mod-actionbutton-content-color-focus`.
Defaults to `var(--spectrum-actionbutton-content-color-selected)`, if not set.", + "control": "color", + "category": "Modifier" + }, + "mod-actionbutton-content-color-focus-selected-emphasized": { + "value": "light-dark(rgb(255, 255, 255), rgb(255, 255, 255))", + "description": "Used by `--mod-actionbutton-content-color-focus-selected`.
Defaults to `var(--spectrum-white)`, if not set.", + "control": "color", + "category": "Modifier" + }, + "mod-actionbutton-content-color-hover": { + "value": "var(--spectrum-gray-900)", + "description": "Defined in `.spectrum-ActionButton.spectrum-ActionButton--staticBlack`, `.spectrum-ActionButton.spectrum-ActionButton--staticWhite`, `.spectrum-ActionButton.is-selected`.
Used by `--mod-actionbutton-content-color-default`.
Defaults to `var(--spectrum-neutral-content-color-hover)`, if not set.", + "control": "color", + "category": "Modifier" + }, + "mod-actionbutton-content-color-down": { + "value": "var(--spectrum-gray-900)", + "description": "Defined in `.spectrum-ActionButton.spectrum-ActionButton--staticBlack`, `.spectrum-ActionButton.spectrum-ActionButton--staticWhite`, `.spectrum-ActionButton.is-selected`.
Used by `--mod-actionbutton-content-color-default`.
Defaults to `var(--spectrum-neutral-content-color-down)`, if not set.", + "control": "color", + "category": "Modifier" + }, + "mod-actionbutton-content-color-focus": { + "value": "var(--spectrum-gray-900)", + "description": "Defined in `.spectrum-ActionButton.spectrum-ActionButton--staticBlack`, `.spectrum-ActionButton.spectrum-ActionButton--staticWhite`, `.spectrum-ActionButton.is-selected`.
Used by `--mod-actionbutton-content-color-default`.
Defaults to `var(--spectrum-neutral-content-color-key-focus)`, if not set.", + "control": "color", + "category": "Modifier" + }, + "mod-actionbutton-content-color-disabled": { + "value": "var(--spectrum-gray-400)", + "description": "Defined in `.spectrum-ActionButton.spectrum-ActionButton--staticBlack`, `.spectrum-ActionButton.spectrum-ActionButton--staticWhite`.
Used by `--mod-actionbutton-content-color-default`.
Defaults to `var(--spectrum-disabled-content-color)`, if not set.", + "control": "color", + "category": "Modifier" + }, + "mod-actionbutton-static-content-color": { + "value": "rgb(0, 0, 0)", + "description": "Used by `--mod-actionbutton-content-color-default-selected`, `--mod-actionbutton-content-color-hover-selected`, `--mod-actionbutton-content-color-down-selected`, `--mod-actionbutton-content-color-focus-selected`.
Defaults to `var(--spectrum-black)`, if not set.", + "control": "color", + "category": "Modifier" + }, + "mod-actionbutton-background-color-hover": { + "value": "var(--spectrum-actionbutton-background-color-hover)", + "description": "Defined in `.spectrum-ActionButton.is-selected`.
Used by `--mod-actionbutton-background-color-default`.
Defaults to `var(--spectrum-actionbutton-background-color-hover)`, if not set.", + "control": "color", + "category": "Modifier" + }, + "mod-actionbutton-background-color-down": { + "value": "var(--spectrum-actionbutton-background-color-down)", + "description": "Defined in `.spectrum-ActionButton.is-selected`.
Used by `--mod-actionbutton-background-color-default`.
Defaults to `var(--spectrum-actionbutton-background-color-down)`, if not set.", + "control": "color", + "category": "Modifier" + }, + "mod-actionbutton-background-color-focus": { + "value": "var(--spectrum-actionbutton-background-color-focus)", + "description": "Defined in `.spectrum-ActionButton.is-selected`.
Used by `--mod-actionbutton-background-color-default`.
Defaults to `var(--spectrum-actionbutton-background-color-focus)`, if not set.", + "control": "color", + "category": "Modifier" + }, + "mod-actionbutton-background-color-disabled": { + "value": "var(--spectrum-actionbutton-background-color-disabled)", + "description": "Defined in `.spectrum-ActionButton.is-selected`.
Used by `--mod-actionbutton-background-color-default`.
Defaults to `var(--spectrum-actionbutton-background-color-disabled)`, if not set.", + "control": "color", + "category": "Modifier" + }, + "mod-actionbutton-border-color-hover": { + "value": "var(--spectrum-actionbutton-border-color-hover)", + "description": "Defined in `.spectrum-ActionButton.is-selected`.
Used by `--mod-actionbutton-border-color-default`.
Defaults to `var(--spectrum-actionbutton-border-color-hover)`, if not set.", + "control": "color", + "category": "Modifier" + }, + "mod-actionbutton-border-color-down": { + "value": "var(--spectrum-actionbutton-border-color-down)", + "description": "Defined in `.spectrum-ActionButton.is-selected`.
Used by `--mod-actionbutton-border-color-default`.
Defaults to `var(--spectrum-actionbutton-border-color-down)`, if not set.", + "control": "color", + "category": "Modifier" + }, + "mod-actionbutton-border-color-focus": { + "value": "var(--spectrum-actionbutton-border-color-focus)", + "description": "Defined in `.spectrum-ActionButton.is-selected`.
Used by `--mod-actionbutton-border-color-default`.
Defaults to `var(--spectrum-actionbutton-border-color-focus)`, if not set.", + "control": "color", + "category": "Modifier" + }, + "mod-actionbutton-border-color-disabled": { + "value": "var(--spectrum-actionbutton-border-color-disabled)", + "description": "Defined in `.spectrum-ActionButton.is-selected`.
Used by `--mod-actionbutton-border-color-default`.
Defaults to `var(--spectrum-actionbutton-border-color-disabled)`, if not set.", + "control": "color", + "category": "Modifier" + }, + "mod-actionbutton-height": { + "value": "var(--spectrum-actionbutton-sized-height)", + "description": "Used by `--spectrum-actionbutton-height`.
Defaults to `var(--spectrum-actionbutton-sized-height)`, if not set.", + "control": "text", + "category": "Modifier" + }, + "mod-actionbutton-icon-size": { + "value": "var(--spectrum-actionbutton-sized-icon-size)", + "description": "Used by `--spectrum-actionbutton-icon-size`.
Defaults to `var(--spectrum-actionbutton-sized-icon-size)`, if not set.", + "control": "text", + "category": "Modifier" + }, + "mod-actionbutton-font-size": { + "value": "var(--spectrum-actionbutton-sized-font-size)", + "description": "Used by `--spectrum-actionbutton-font-size`.
Defaults to `var(--spectrum-actionbutton-sized-font-size)`, if not set.", + "control": "text", + "category": "Modifier" + }, + "mod-actionbutton-text-to-visual": { + "value": "var(--spectrum-actionbutton-sized-text-to-visual)", + "description": "Used by `--spectrum-actionbutton-text-to-visual`.
Defaults to `var(--spectrum-actionbutton-sized-text-to-visual)`, if not set.", + "control": "text", + "category": "Modifier" + }, + "mod-actionbutton-edge-to-hold-icon": { + "value": "var(--spectrum-actionbutton-sized-edge-to-hold-icon)", + "description": "Used by `--spectrum-actionbutton-edge-to-hold-icon`.
Defaults to `var(--spectrum-actionbutton-sized-edge-to-hold-icon)`, if not set.", + "control": "text", + "category": "Modifier" + }, + "mod-actionbutton-edge-to-visual": { + "value": "calc(var(--spectrum-actionbutton-sized-edge-to-visual) - var(--spectrum-actionbutton-border-width))", + "description": "Used by `--spectrum-actionbutton-edge-to-visual`.
Defaults to `calc(var(--spectrum-actionbutton-sized-edge-to-visual) - var(--spectrum-actionbutton-border-width))`, if not set.", + "control": "text", + "category": "Modifier" + }, + "mod-actionbutton-edge-to-text": { + "value": "calc(var(--spectrum-actionbutton-sized-edge-to-text) - var(--spectrum-actionbutton-border-width))", + "description": "Used by `--spectrum-actionbutton-edge-to-text`.
Defaults to `calc(var(--spectrum-actionbutton-sized-edge-to-text) - var(--spectrum-actionbutton-border-width))`, if not set.", + "control": "text", + "category": "Modifier" + }, + "mod-actionbutton-edge-to-visual-only": { + "value": "var(--spectrum-actionbutton-sized-edge-to-visual-only)", + "description": "Used by `--spectrum-actionbutton-edge-to-visual-only`, `.spectrum-ActionButton`.
Defaults to `var(--spectrum-actionbutton-sized-edge-to-visual-only)`, if not set.", + "control": "text", + "category": "Modifier" + }, + "mod-actionbutton-min-width": { + "value": "calc(var(--mod-actionbutton-edge-to-visual-only, var(--spectrum-actionbutton-sized-edge-to-visual-only)) * 2 + var(--spectrum-actionbutton-icon-size))", + "description": "Used by `.spectrum-ActionButton`.
Defaults to `calc(var(--mod-actionbutton-edge-to-visual-only, var(--spectrum-actionbutton-sized-edge-to-visual-only)) * 2 + var(--spectrum-actionbutton-icon-size))`, if not set.", + "control": "text", + "category": "Modifier" + }, + "mod-actionbutton-animation-duration": { + "value": "var(--spectrum-animation-duration-100)", + "description": "Used by `.spectrum-ActionButton`, `.spectrum-ActionButton:after`.
Defaults to `var(--spectrum-animation-duration-100)`, if not set.", + "control": "text", + "category": "Modifier" + }, + "mod-actionbutton-focus-indicator-border-radius": { + "value": "calc(var(--spectrum-actionbutton-border-radius) + var(--spectrum-actionbutton-focus-indicator-gap))", + "description": "Used by `.spectrum-ActionButton:after`.
Defaults to `calc(var(--spectrum-actionbutton-border-radius) + var(--spectrum-actionbutton-focus-indicator-gap))`, if not set.", + "control": "text", + "category": "Modifier" + }, + "mod-actionbutton-label-color": { + "description": "Used by `.spectrum-ActionButton-label`.", + "control": "color", + "category": "Modifier" + } + }, + "component": { + "spectrum-actionbutton-background-color": { + "description": "Defined in `.spectrum-ActionButton`.
Used by `.spectrum-ActionButton`.", + "control": "color", + "category": "Component" + }, + "spectrum-actionbutton-background-color-default": { + "description": "Defined in `.spectrum-ActionButton`, `.spectrum-ActionButton.spectrum-ActionButton--quiet`, `.spectrum-ActionButton.spectrum-ActionButton--staticBlack`, `.spectrum-ActionButton.spectrum-ActionButton--staticBlack.spectrum-ActionButton--quiet`, `.spectrum-ActionButton.spectrum-ActionButton--staticWhite`, `.spectrum-ActionButton.spectrum-ActionButton--staticWhite.spectrum-ActionButton--quiet`.
Used by `--spectrum-actionbutton-background-color`.", + "control": "color", + "category": "Component" + }, + "spectrum-actionbutton-border-color": { + "description": "Defined in `.spectrum-ActionButton`, `.spectrum-ActionButton.spectrum-ActionButton--quiet`.
Used by `.spectrum-ActionButton`.", + "control": "color", + "category": "Component" + }, + "spectrum-actionbutton-border-color-default": { + "description": "Defined in `.spectrum-ActionButton`, `.spectrum-ActionButton.spectrum-ActionButton--staticBlack`, `.spectrum-ActionButton.spectrum-ActionButton--staticWhite`.
Used by `--spectrum-actionbutton-border-color`.", + "control": "color", + "category": "Component" + }, + "spectrum-actionbutton-content-color": { + "description": "Defined in `.spectrum-ActionButton`.
Used by `.spectrum-ActionButton`.", + "control": "color", + "category": "Component" + }, + "spectrum-actionbutton-border-radius": { + "description": "Defined in `.spectrum-ActionButton`.
Used by `.spectrum-ActionButton`, `.spectrum-ActionButton:after`.", + "control": "text", + "category": "Component" + }, + "spectrum-actionbutton-border-radius-default": { + "description": "Defined in `.spectrum-ActionButton.spectrum-ActionButton--sizeM`, `.spectrum-ActionButton.spectrum-ActionButton--sizeXS`, `.spectrum-ActionButton.spectrum-ActionButton--sizeS`, `.spectrum-ActionButton.spectrum-ActionButton--sizeL`, `.spectrum-ActionButton.spectrum-ActionButton--sizeXL`.
Used by `--spectrum-actionbutton-border-radius`.", + "control": "text", + "category": "Component" + }, + "spectrum-actionbutton-border-width": { + "description": "Defined in `.spectrum-ActionButton`.
Used by `--spectrum-actionbutton-edge-to-visual`, `--spectrum-actionbutton-edge-to-text`, `--spectrum-actionbutton-edge-to-visual-only`, `.spectrum-ActionButton`, `.spectrum-ActionButton:after`, `.spectrum-ActionButton-hold`.", + "control": "text", + "category": "Component" + }, + "spectrum-actionbutton-focus-indicator-gap": { + "description": "Defined in `.spectrum-ActionButton`.
Used by `.spectrum-ActionButton:after`.", + "control": "text", + "category": "Component" + }, + "spectrum-actionbutton-focus-indicator-thickness": { + "description": "Defined in `.spectrum-ActionButton`.
Used by `.spectrum-ActionButton:focus-visible:after`.", + "control": "text", + "category": "Component" + }, + "spectrum-actionbutton-focus-indicator-color": { + "description": "Defined in `.spectrum-ActionButton`.
Used by `.spectrum-ActionButton:focus-visible:after`.", + "control": "color", + "category": "Component" + }, + "spectrum-actionbutton-background-color-selected": { + "description": "Defined in `.spectrum-ActionButton`.
Used by `--mod-actionbutton-background-color-default`.", + "control": "color", + "category": "Component" + }, + "spectrum-actionbutton-background-color-selected-hover": { + "description": "Defined in `.spectrum-ActionButton`.
Used by `--mod-actionbutton-background-color-hover`.", + "control": "color", + "category": "Component" + }, + "spectrum-actionbutton-background-color-selected-down": { + "description": "Defined in `.spectrum-ActionButton`.
Used by `--mod-actionbutton-background-color-down`.", + "control": "color", + "category": "Component" + }, + "spectrum-actionbutton-background-color-selected-focus": { + "description": "Defined in `.spectrum-ActionButton`.
Used by `--mod-actionbutton-background-color-focus`.", + "control": "color", + "category": "Component" + }, + "spectrum-actionbutton-background-color-selected-disabled": { + "description": "Defined in `.spectrum-ActionButton.spectrum-ActionButton--quiet`, `.spectrum-ActionButton.spectrum-ActionButton--staticBlack`, `.spectrum-ActionButton.spectrum-ActionButton--staticWhite`.
Used by `--mod-actionbutton-background-color-disabled`.", + "control": "color", + "category": "Component" + }, + "spectrum-actionbutton-content-color-selected": { + "description": "Defined in `.spectrum-ActionButton`.
Used by `--mod-actionbutton-content-color-default`, `--mod-actionbutton-content-color-hover`, `--mod-actionbutton-content-color-down`, `--mod-actionbutton-content-color-focus`.", + "control": "color", + "category": "Component" + }, + "spectrum-actionbutton-background-color-hover": { + "description": "Defined in `.spectrum-ActionButton`, `.spectrum-ActionButton.spectrum-ActionButton--quiet`, `.spectrum-ActionButton.spectrum-ActionButton--staticBlack`, `.spectrum-ActionButton.spectrum-ActionButton--staticBlack.spectrum-ActionButton--quiet`, `.spectrum-ActionButton.spectrum-ActionButton--staticWhite`, `.spectrum-ActionButton.spectrum-ActionButton--staticWhite.spectrum-ActionButton--quiet`.
Used by `--mod-actionbutton-background-color-default`.", + "control": "color", + "category": "Component" + }, + "spectrum-actionbutton-border-color-hover": { + "description": "Defined in `.spectrum-ActionButton`, `.spectrum-ActionButton.spectrum-ActionButton--staticBlack`, `.spectrum-ActionButton.spectrum-ActionButton--staticWhite`.
Used by `--mod-actionbutton-border-color-default`.", + "control": "color", + "category": "Component" + }, + "spectrum-actionbutton-background-color-focus": { + "description": "Defined in `.spectrum-ActionButton`, `.spectrum-ActionButton.spectrum-ActionButton--quiet`, `.spectrum-ActionButton.spectrum-ActionButton--staticBlack`, `.spectrum-ActionButton.spectrum-ActionButton--staticBlack.spectrum-ActionButton--quiet`, `.spectrum-ActionButton.spectrum-ActionButton--staticWhite`, `.spectrum-ActionButton.spectrum-ActionButton--staticWhite.spectrum-ActionButton--quiet`.
Used by `--mod-actionbutton-background-color-default`.", + "control": "color", + "category": "Component" + }, + "spectrum-actionbutton-border-color-focus": { + "description": "Defined in `.spectrum-ActionButton`, `.spectrum-ActionButton.spectrum-ActionButton--staticBlack`, `.spectrum-ActionButton.spectrum-ActionButton--staticWhite`.
Used by `--mod-actionbutton-border-color-default`.", + "control": "color", + "category": "Component" + }, + "spectrum-actionbutton-background-color-down": { + "description": "Defined in `.spectrum-ActionButton`, `.spectrum-ActionButton.spectrum-ActionButton--quiet`, `.spectrum-ActionButton.spectrum-ActionButton--staticBlack`, `.spectrum-ActionButton.spectrum-ActionButton--staticBlack.spectrum-ActionButton--quiet`, `.spectrum-ActionButton.spectrum-ActionButton--staticWhite`, `.spectrum-ActionButton.spectrum-ActionButton--staticWhite.spectrum-ActionButton--quiet`.
Used by `--mod-actionbutton-background-color-default`.", + "control": "color", + "category": "Component" + }, + "spectrum-actionbutton-border-color-down": { + "description": "Defined in `.spectrum-ActionButton`, `.spectrum-ActionButton.spectrum-ActionButton--staticBlack`, `.spectrum-ActionButton.spectrum-ActionButton--staticWhite`.
Used by `--mod-actionbutton-border-color-default`.", + "control": "color", + "category": "Component" + }, + "spectrum-actionbutton-background-color-disabled": { + "description": "Defined in `.spectrum-ActionButton`, `.spectrum-ActionButton.spectrum-ActionButton--quiet`, `.spectrum-ActionButton.spectrum-ActionButton--staticBlack`, `.spectrum-ActionButton.spectrum-ActionButton--staticBlack.spectrum-ActionButton--quiet`, `.spectrum-ActionButton.spectrum-ActionButton--staticWhite`, `.spectrum-ActionButton.spectrum-ActionButton--staticWhite.spectrum-ActionButton--quiet`.
Used by `--mod-actionbutton-background-color-default`.", + "control": "color", + "category": "Component" + }, + "spectrum-actionbutton-border-color-disabled": { + "description": "Defined in `.spectrum-ActionButton`, `.spectrum-ActionButton.spectrum-ActionButton--staticBlack`, `.spectrum-ActionButton.spectrum-ActionButton--staticWhite`.
Used by `--mod-actionbutton-border-color-default`.", + "control": "color", + "category": "Component" + }, + "spectrum-actionbutton-sized-height": { + "description": "Defined in `.spectrum-ActionButton, .spectrum-ActionButton--sizeM`, `.spectrum-ActionButton--sizeXS`, `.spectrum-ActionButton--sizeS`, `.spectrum-ActionButton--sizeL`, `.spectrum-ActionButton--sizeXL`.
Used by `--spectrum-actionbutton-height`.", + "control": "text", + "category": "Component" + }, + "spectrum-actionbutton-sized-icon-size": { + "description": "Defined in `.spectrum-ActionButton, .spectrum-ActionButton--sizeM`, `.spectrum-ActionButton--sizeXS`, `.spectrum-ActionButton--sizeS`, `.spectrum-ActionButton--sizeL`, `.spectrum-ActionButton--sizeXL`.
Used by `--spectrum-actionbutton-icon-size`.", + "control": "text", + "category": "Component" + }, + "spectrum-actionbutton-sized-font-size": { + "description": "Defined in `.spectrum-ActionButton, .spectrum-ActionButton--sizeM`, `.spectrum-ActionButton--sizeXS`, `.spectrum-ActionButton--sizeS`, `.spectrum-ActionButton--sizeL`, `.spectrum-ActionButton--sizeXL`.
Used by `--spectrum-actionbutton-font-size`.", + "control": "text", + "category": "Component" + }, + "spectrum-actionbutton-sized-text-to-visual": { + "description": "Defined in `.spectrum-ActionButton, .spectrum-ActionButton--sizeM`, `.spectrum-ActionButton--sizeXS`, `.spectrum-ActionButton--sizeS`, `.spectrum-ActionButton--sizeL`, `.spectrum-ActionButton--sizeXL`.
Used by `--spectrum-actionbutton-text-to-visual`.", + "control": "text", + "category": "Component" + }, + "spectrum-actionbutton-sized-edge-to-hold-icon": { + "description": "Defined in `.spectrum-ActionButton, .spectrum-ActionButton--sizeM`, `.spectrum-ActionButton--sizeXS`, `.spectrum-ActionButton--sizeS`, `.spectrum-ActionButton--sizeL`, `.spectrum-ActionButton--sizeXL`.
Used by `--spectrum-actionbutton-edge-to-hold-icon`.", + "control": "text", + "category": "Component" + }, + "spectrum-action-button-edge-to-hold-icon-medium": { + "value": "4px", + "description": "Used by `--spectrum-actionbutton-sized-edge-to-hold-icon`.", + "control": "text", + "category": "Component" + }, + "spectrum-actionbutton-sized-edge-to-visual": { + "description": "Defined in `.spectrum-ActionButton, .spectrum-ActionButton--sizeM`, `.spectrum-ActionButton--sizeXS`, `.spectrum-ActionButton--sizeS`, `.spectrum-ActionButton--sizeL`, `.spectrum-ActionButton--sizeXL`.
Used by `--spectrum-actionbutton-edge-to-visual`.", + "control": "text", + "category": "Component" + }, + "spectrum-actionbutton-sized-edge-to-text": { + "description": "Defined in `.spectrum-ActionButton, .spectrum-ActionButton--sizeM`, `.spectrum-ActionButton--sizeXS`, `.spectrum-ActionButton--sizeS`, `.spectrum-ActionButton--sizeL`, `.spectrum-ActionButton--sizeXL`.
Used by `--spectrum-actionbutton-edge-to-text`.", + "control": "text", + "category": "Component" + }, + "spectrum-actionbutton-sized-edge-to-visual-only": { + "description": "Defined in `.spectrum-ActionButton, .spectrum-ActionButton--sizeM`, `.spectrum-ActionButton--sizeXS`, `.spectrum-ActionButton--sizeS`, `.spectrum-ActionButton--sizeL`, `.spectrum-ActionButton--sizeXL`.
Used by `--spectrum-actionbutton-edge-to-visual-only`, `.spectrum-ActionButton`.", + "control": "text", + "category": "Component" + }, + "spectrum-action-button-edge-to-hold-icon-extra-small": { + "value": "3px", + "description": "Used by `--spectrum-actionbutton-sized-edge-to-hold-icon`.", + "control": "text", + "category": "Component" + }, + "spectrum-action-button-edge-to-hold-icon-small": { + "value": "3px", + "description": "Used by `--spectrum-actionbutton-sized-edge-to-hold-icon`.", + "control": "text", + "category": "Component" + }, + "spectrum-action-button-edge-to-hold-icon-large": { + "value": "5px", + "description": "Used by `--spectrum-actionbutton-sized-edge-to-hold-icon`.", + "control": "text", + "category": "Component" + }, + "spectrum-action-button-edge-to-hold-icon-extra-large": { + "value": "6px", + "description": "Used by `--spectrum-actionbutton-sized-edge-to-hold-icon`.", + "control": "text", + "category": "Component" + }, + "spectrum-actionbutton-height": { + "description": "Defined in `.spectrum-ActionButton`.
Used by `.spectrum-ActionButton`, `.spectrum-ActionButton-label`.", + "control": "text", + "category": "Component" + }, + "spectrum-actionbutton-icon-size": { + "description": "Defined in `.spectrum-ActionButton`.
Used by `.spectrum-ActionButton`, `.spectrum-ActionButton-icon`.", + "control": "text", + "category": "Component" + }, + "spectrum-actionbutton-font-size": { + "description": "Defined in `.spectrum-ActionButton`.
Used by `.spectrum-ActionButton-label`.", + "control": "text", + "category": "Component" + }, + "spectrum-actionbutton-text-to-visual": { + "description": "Defined in `.spectrum-ActionButton`.
Used by `.spectrum-ActionButton`.", + "control": "text", + "category": "Component" + }, + "spectrum-actionbutton-edge-to-hold-icon": { + "description": "Defined in `.spectrum-ActionButton`.
Used by `.spectrum-ActionButton-hold`.", + "control": "text", + "category": "Component" + }, + "spectrum-actionbutton-edge-to-visual": { + "description": "Defined in `.spectrum-ActionButton`.
Used by `.spectrum-ActionButton-icon`.", + "control": "text", + "category": "Component" + }, + "spectrum-actionbutton-edge-to-text": { + "description": "Defined in `.spectrum-ActionButton`.
Used by `.spectrum-ActionButton`, `.spectrum-ActionButton-icon`, `.spectrum-ActionButton-hold + .spectrum-ActionButton-icon, .spectrum-ActionButton-icon:only-child`.", + "control": "text", + "category": "Component" + }, + "spectrum-actionbutton-edge-to-visual-only": { + "description": "Defined in `.spectrum-ActionButton`.
Used by `.spectrum-ActionButton`, `.spectrum-ActionButton-icon`, `.spectrum-ActionButton-hold + .spectrum-ActionButton-icon, .spectrum-ActionButton-icon:only-child`.", + "control": "text", + "category": "Component" + } + }, + "global": { + "spectrum-sans-font-family-stack": { + "description": "Used by `.spectrum-ActionButton`.", + "control": "text", + "category": "Global" + }, + "spectrum-line-height-100": { + "value": "1.3", + "description": "Used by `.spectrum-ActionButton`.", + "control": "text", + "category": "Global" + }, + "spectrum-animation-duration-100": { + "description": "Used by `.spectrum-ActionButton`, `.spectrum-ActionButton:after`.", + "control": "text", + "category": "Global" + }, + "spectrum-gray-100": { + "value": "light-dark(rgb(233, 233, 233), rgb(44, 44, 44))", + "description": "Used by `--system-action-button-background-color-default`.", + "control": "text", + "category": "Global" + }, + "spectrum-gray-200": { + "value": "light-dark(rgb(225, 225, 225), rgb(50, 50, 50))", + "description": "Used by `--system-action-button-background-color-hover`, `--system-action-button-background-color-down`, `--system-action-button-background-color-focus`, `--system-action-button-quiet-background-color-hover`, `--system-action-button-quiet-background-color-down`, `--system-action-button-quiet-background-color-focus`.", + "control": "text", + "category": "Global" + }, + "spectrum-disabled-background-color": { + "value": "var(--spectrum-gray-100)", + "description": "Used by `--system-action-button-background-color-disabled`, `--system-action-button-quiet-background-color-selected-disabled`.", + "control": "color", + "category": "Global" + }, + "spectrum-neutral-background-color-selected-default": { + "value": "var(--spectrum-gray-800)", + "description": "Used by `--system-action-button-background-color-selected`.", + "control": "color", + "category": "Global" + }, + "spectrum-neutral-background-color-selected-hover": { + "value": "var(--spectrum-gray-900)", + "description": "Used by `--system-action-button-background-color-selected-hover`.", + "control": "color", + "category": "Global" + }, + "spectrum-neutral-background-color-selected-down": { + "value": "var(--spectrum-gray-900)", + "description": "Used by `--system-action-button-background-color-selected-down`.", + "control": "color", + "category": "Global" + }, + "spectrum-neutral-background-color-selected-key-focus": { + "value": "var(--spectrum-gray-900)", + "description": "Used by `--system-action-button-background-color-selected-focus`.", + "control": "color", + "category": "Global" + }, + "spectrum-gray-50": { + "value": "light-dark(rgb(248, 248, 248), rgb(27, 27, 27))", + "description": "Used by `--system-action-button-content-color-selected`.", + "control": "text", + "category": "Global" + }, + "spectrum-corner-radius-medium-size-medium": { + "value": "8px", + "description": "Used by `--system-action-button-size-m-border-radius-default`.", + "control": "text", + "category": "Global" + }, + "spectrum-corner-radius-medium-size-extra-small": { + "value": "6px", + "description": "Used by `--system-action-button-size-xs-border-radius-default`.", + "control": "text", + "category": "Global" + }, + "spectrum-corner-radius-medium-size-small": { + "value": "7px", + "description": "Used by `--system-action-button-size-s-border-radius-default`.", + "control": "text", + "category": "Global" + }, + "spectrum-corner-radius-medium-size-large": { + "value": "9px", + "description": "Used by `--system-action-button-size-l-border-radius-default`.", + "control": "text", + "category": "Global" + }, + "spectrum-corner-radius-medium-size-extra-large": { + "value": "10px", + "description": "Used by `--system-action-button-size-xl-border-radius-default`.", + "control": "text", + "category": "Global" + }, + "spectrum-disabled-static-black-background-color": { + "value": "var(--spectrum-transparent-black-100)", + "description": "Used by `--system-action-button-static-black-background-color-disabled`, `--system-action-button-static-black-background-color-selected-disabled`.", + "control": "color", + "category": "Global" + }, + "spectrum-transparent-black-100": { + "value": "light-dark(rgba(0, 0, 0, 0.09), rgba(0, 0, 0, 0.09))", + "description": "Used by `--system-action-button-static-black-background-color-default`.", + "control": "text", + "category": "Global" + }, + "spectrum-transparent-black-200": { + "value": "light-dark(rgba(0, 0, 0, 0.12), rgba(0, 0, 0, 0.12))", + "description": "Used by `--system-action-button-static-black-background-color-hover`, `--system-action-button-static-black-background-color-down`, `--system-action-button-static-black-background-color-focus`, `--system-action-button-static-black-quiet-background-color-hover`, `--system-action-button-static-black-quiet-background-color-down`, `--system-action-button-static-black-quiet-background-color-focus`.", + "control": "text", + "category": "Global" + }, + "spectrum-disabled-static-white-background-color": { + "value": "var(--spectrum-transparent-white-100)", + "description": "Used by `--system-action-button-static-white-background-color-disabled`, `--system-action-button-static-white-background-color-selected-disabled`.", + "control": "color", + "category": "Global" + }, + "spectrum-transparent-white-100": { + "value": "light-dark(rgba(255, 255, 255, 0.11), rgba(255, 255, 255, 0.11))", + "description": "Used by `--system-action-button-static-white-background-color-default`.", + "control": "text", + "category": "Global" + }, + "spectrum-transparent-white-200": { + "value": "light-dark(rgba(255, 255, 255, 0.14), rgba(255, 255, 255, 0.14))", + "description": "Used by `--system-action-button-static-white-background-color-hover`, `--system-action-button-static-white-background-color-down`, `--system-action-button-static-white-background-color-focus`, `--system-action-button-static-white-quiet-background-color-hover`, `--system-action-button-static-white-quiet-background-color-down`, `--system-action-button-static-white-quiet-background-color-focus`.", + "control": "text", + "category": "Global" + }, + "spectrum-neutral-content-color-default": { + "value": "var(--spectrum-gray-800)", + "description": "Used by `--spectrum-actionbutton-content-color`.", + "control": "color", + "category": "Global" + }, + "spectrum-border-width-100": { + "value": "1px", + "description": "Used by `--spectrum-actionbutton-border-width`.", + "control": "text", + "category": "Global" + }, + "spectrum-focus-indicator-gap": { + "value": "2px", + "description": "Used by `--spectrum-actionbutton-focus-indicator-gap`.", + "control": "text", + "category": "Global" + }, + "spectrum-focus-indicator-thickness": { + "value": "2px", + "description": "Used by `--spectrum-actionbutton-focus-indicator-thickness`.", + "control": "text", + "category": "Global" + }, + "spectrum-focus-indicator-color": { + "value": "var(--spectrum-blue-800)", + "description": "Used by `--spectrum-actionbutton-focus-indicator-color`.", + "control": "color", + "category": "Global" + }, + "spectrum-logical-rotation": { + "description": "Defined in `.spectrum-ActionButton:dir(rtl), [dir=\"rtl\"] .spectrum-ActionButton`.
Used by `.spectrum-ActionButton-hold`.", + "control": "text", + "category": "Global" + }, + "spectrum-accent-background-color-default": { + "value": "var(--spectrum-accent-color-800)", + "description": "Used by `--mod-actionbutton-background-color-default-selected`.", + "control": "color", + "category": "Global" + }, + "spectrum-accent-background-color-hover": { + "value": "var(--spectrum-accent-color-700)", + "description": "Used by `--mod-actionbutton-background-color-hover-selected`.", + "control": "color", + "category": "Global" + }, + "spectrum-accent-background-color-down": { + "value": "var(--spectrum-accent-color-700)", + "description": "Used by `--mod-actionbutton-background-color-down-selected`.", + "control": "color", + "category": "Global" + }, + "spectrum-accent-background-color-key-focus": { + "value": "var(--spectrum-accent-color-700)", + "description": "Used by `--mod-actionbutton-background-color-focus-selected`.", + "control": "color", + "category": "Global" + }, + "spectrum-white": { + "value": "light-dark(rgb(255, 255, 255), rgb(255, 255, 255))", + "description": "Used by `--mod-actionbutton-content-color-default-selected`, `--mod-actionbutton-content-color-hover-selected`, `--mod-actionbutton-content-color-down-selected`, `--mod-actionbutton-content-color-focus-selected`, `--mod-actionbutton-content-color-default`, `--mod-actionbutton-content-color-hover`, `--mod-actionbutton-content-color-down`, `--mod-actionbutton-content-color-focus`.", + "control": "text", + "category": "Global" + }, + "spectrum-transparent-black-800": { + "value": "light-dark(rgba(0, 0, 0, 0.84), rgba(0, 0, 0, 0.84))", + "description": "Used by `--mod-actionbutton-background-color-default-selected`.", + "control": "text", + "category": "Global" + }, + "spectrum-transparent-black-900": { + "value": "light-dark(rgba(0, 0, 0, 0.93), rgba(0, 0, 0, 0.93))", + "description": "Used by `--mod-actionbutton-background-color-hover-selected`, `--mod-actionbutton-background-color-down-selected`, `--mod-actionbutton-background-color-focus-selected`.", + "control": "text", + "category": "Global" + }, + "spectrum-black": { + "value": "rgb(0, 0, 0)", + "description": "Used by `--mod-actionbutton-content-color-default`, `--mod-actionbutton-content-color-hover`, `--mod-actionbutton-content-color-down`, `--mod-actionbutton-content-color-focus`, `--mod-actionbutton-content-color-default-selected`, `--mod-actionbutton-content-color-hover-selected`, `--mod-actionbutton-content-color-down-selected`, `--mod-actionbutton-content-color-focus-selected`.", + "control": "text", + "category": "Global" + }, + "spectrum-disabled-static-black-content-color": { + "value": "var(--spectrum-transparent-black-400)", + "description": "Used by `--mod-actionbutton-content-color-disabled`.", + "control": "color", + "category": "Global" + }, + "spectrum-static-black-focus-indicator-color": { + "value": "rgb(0, 0, 0)", + "description": "Used by `--mod-actionbutton-focus-indicator-color`.", + "control": "color", + "category": "Global" + }, + "spectrum-transparent-white-800": { + "value": "light-dark(rgba(255, 255, 255, 0.85), rgba(255, 255, 255, 0.85))", + "description": "Used by `--mod-actionbutton-background-color-default-selected`.", + "control": "text", + "category": "Global" + }, + "spectrum-transparent-white-900": { + "value": "light-dark(rgba(255, 255, 255, 0.94), rgba(255, 255, 255, 0.94))", + "description": "Used by `--mod-actionbutton-background-color-hover-selected`, `--mod-actionbutton-background-color-down-selected`, `--mod-actionbutton-background-color-focus-selected`.", + "control": "text", + "category": "Global" + }, + "spectrum-disabled-static-white-content-color": { + "value": "var(--spectrum-transparent-white-400)", + "description": "Used by `--mod-actionbutton-content-color-disabled`.", + "control": "color", + "category": "Global" + }, + "spectrum-static-white-focus-indicator-color": { + "value": "var(--spectrum-white)", + "description": "Used by `--mod-actionbutton-focus-indicator-color`.", + "control": "color", + "category": "Global" + }, + "spectrum-neutral-content-color-hover": { + "value": "var(--spectrum-gray-900)", + "description": "Used by `--mod-actionbutton-content-color-default`.", + "control": "color", + "category": "Global" + }, + "spectrum-neutral-content-color-key-focus": { + "value": "var(--spectrum-gray-900)", + "description": "Used by `--mod-actionbutton-content-color-default`.", + "control": "color", + "category": "Global" + }, + "spectrum-neutral-content-color-down": { + "value": "var(--spectrum-gray-900)", + "description": "Used by `--mod-actionbutton-content-color-default`.", + "control": "color", + "category": "Global" + }, + "spectrum-disabled-content-color": { + "value": "var(--spectrum-gray-400)", + "description": "Used by `--mod-actionbutton-content-color-default`.", + "control": "color", + "category": "Global" + }, + "spectrum-component-height-100": { + "value": "32px", + "description": "Used by `--spectrum-actionbutton-sized-height`.", + "control": "text", + "category": "Global" + }, + "spectrum-workflow-icon-size-100": { + "value": "20px", + "description": "Used by `--spectrum-actionbutton-sized-icon-size`.", + "control": "text", + "category": "Global" + }, + "spectrum-font-size-100": { + "value": "14px", + "description": "Used by `--spectrum-actionbutton-sized-font-size`.", + "control": "text", + "category": "Global" + }, + "spectrum-text-to-visual-100": { + "value": "6px", + "description": "Used by `--spectrum-actionbutton-sized-text-to-visual`.", + "control": "text", + "category": "Global" + }, + "spectrum-component-edge-to-visual-100": { + "value": "10px", + "description": "Used by `--spectrum-actionbutton-sized-edge-to-visual`.", + "control": "text", + "category": "Global" + }, + "spectrum-component-edge-to-text-100": { + "value": "12px", + "description": "Used by `--spectrum-actionbutton-sized-edge-to-text`.", + "control": "text", + "category": "Global" + }, + "spectrum-component-edge-to-visual-only-100": { + "value": "6px", + "description": "Used by `--spectrum-actionbutton-sized-edge-to-visual-only`.", + "control": "text", + "category": "Global" + }, + "spectrum-component-height-50": { + "value": "20px", + "description": "Used by `--spectrum-actionbutton-sized-height`.", + "control": "text", + "category": "Global" + }, + "spectrum-workflow-icon-size-50": { + "value": "14px", + "description": "Used by `--spectrum-actionbutton-sized-icon-size`.", + "control": "text", + "category": "Global" + }, + "spectrum-font-size-50": { + "value": "11px", + "description": "Used by `--spectrum-actionbutton-sized-font-size`.", + "control": "text", + "category": "Global" + }, + "spectrum-text-to-visual-50": { + "value": "5px", + "description": "Used by `--spectrum-actionbutton-sized-text-to-visual`.", + "control": "text", + "category": "Global" + }, + "spectrum-component-edge-to-visual-50": { + "value": "7px", + "description": "Used by `--spectrum-actionbutton-sized-edge-to-visual`.", + "control": "text", + "category": "Global" + }, + "spectrum-component-edge-to-text-50": { + "value": "8px", + "description": "Used by `--spectrum-actionbutton-sized-edge-to-text`.", + "control": "text", + "category": "Global" + }, + "spectrum-component-edge-to-visual-only-50": { + "value": "3px", + "description": "Used by `--spectrum-actionbutton-sized-edge-to-visual-only`.", + "control": "text", + "category": "Global" + }, + "spectrum-component-height-75": { + "value": "24px", + "description": "Used by `--spectrum-actionbutton-sized-height`.", + "control": "text", + "category": "Global" + }, + "spectrum-workflow-icon-size-75": { + "value": "16px", + "description": "Used by `--spectrum-actionbutton-sized-icon-size`.", + "control": "text", + "category": "Global" + }, + "spectrum-font-size-75": { + "value": "12px", + "description": "Used by `--spectrum-actionbutton-sized-font-size`.", + "control": "text", + "category": "Global" + }, + "spectrum-text-to-visual-75": { + "value": "5px", + "description": "Used by `--spectrum-actionbutton-sized-text-to-visual`.", + "control": "text", + "category": "Global" + }, + "spectrum-component-edge-to-visual-75": { + "value": "8px", + "description": "Used by `--spectrum-actionbutton-sized-edge-to-visual`.", + "control": "text", + "category": "Global" + }, + "spectrum-component-edge-to-text-75": { + "value": "10px", + "description": "Used by `--spectrum-actionbutton-sized-edge-to-text`.", + "control": "text", + "category": "Global" + }, + "spectrum-component-edge-to-visual-only-75": { + "value": "4px", + "description": "Used by `--spectrum-actionbutton-sized-edge-to-visual-only`.", + "control": "text", + "category": "Global" + }, + "spectrum-component-height-200": { + "value": "40px", + "description": "Used by `--spectrum-actionbutton-sized-height`.", + "control": "text", + "category": "Global" + }, + "spectrum-workflow-icon-size-200": { + "value": "22px", + "description": "Used by `--spectrum-actionbutton-sized-icon-size`.", + "control": "text", + "category": "Global" + }, + "spectrum-font-size-200": { + "value": "16px", + "description": "Used by `--spectrum-actionbutton-sized-font-size`.", + "control": "text", + "category": "Global" + }, + "spectrum-text-to-visual-200": { + "value": "7px", + "description": "Used by `--spectrum-actionbutton-sized-text-to-visual`.", + "control": "text", + "category": "Global" + }, + "spectrum-component-edge-to-visual-200": { + "value": "13px", + "description": "Used by `--spectrum-actionbutton-sized-edge-to-visual`.", + "control": "text", + "category": "Global" + }, + "spectrum-component-edge-to-text-200": { + "value": "15px", + "description": "Used by `--spectrum-actionbutton-sized-edge-to-text`.", + "control": "text", + "category": "Global" + }, + "spectrum-component-edge-to-visual-only-200": { + "value": "9px", + "description": "Used by `--spectrum-actionbutton-sized-edge-to-visual-only`.", + "control": "text", + "category": "Global" + }, + "spectrum-component-height-300": { + "value": "48px", + "description": "Used by `--spectrum-actionbutton-sized-height`.", + "control": "text", + "category": "Global" + }, + "spectrum-workflow-icon-size-300": { + "value": "26px", + "description": "Used by `--spectrum-actionbutton-sized-icon-size`.", + "control": "text", + "category": "Global" + }, + "spectrum-font-size-300": { + "value": "18px", + "description": "Used by `--spectrum-actionbutton-sized-font-size`.", + "control": "text", + "category": "Global" + }, + "spectrum-text-to-visual-300": { + "value": "8px", + "description": "Used by `--spectrum-actionbutton-sized-text-to-visual`.", + "control": "text", + "category": "Global" + }, + "spectrum-component-edge-to-visual-300": { + "value": "14px", + "description": "Used by `--spectrum-actionbutton-sized-edge-to-visual`.", + "control": "text", + "category": "Global" + }, + "spectrum-component-edge-to-text-300": { + "value": "17px", + "description": "Used by `--spectrum-actionbutton-sized-edge-to-text`.", + "control": "text", + "category": "Global" + }, + "spectrum-component-edge-to-visual-only-300": { + "value": "11px", + "description": "Used by `--spectrum-actionbutton-sized-edge-to-visual-only`.", + "control": "text", + "category": "Global" + } + }, + "system-theme": { + "system-action-button-background-color-default": { + "description": "Defined in `.spectrum`.
Used by `--spectrum-actionbutton-background-color-default`.", + "control": "color" + }, + "system-action-button-background-color-hover": { + "description": "Defined in `.spectrum`.
Used by `--spectrum-actionbutton-background-color-hover`.", + "control": "color" + }, + "system-action-button-background-color-down": { + "description": "Defined in `.spectrum`.
Used by `--spectrum-actionbutton-background-color-down`.", + "control": "color" + }, + "system-action-button-background-color-focus": { + "description": "Defined in `.spectrum`.
Used by `--spectrum-actionbutton-background-color-focus`.", + "control": "color" + }, + "system-action-button-background-color-disabled": { + "description": "Defined in `.spectrum`.
Used by `--spectrum-actionbutton-background-color-disabled`.", + "control": "color" + }, + "system-action-button-background-color-selected": { + "description": "Defined in `.spectrum`.
Used by `--spectrum-actionbutton-background-color-selected`.", + "control": "color" + }, + "system-action-button-background-color-selected-hover": { + "description": "Defined in `.spectrum`.
Used by `--spectrum-actionbutton-background-color-selected-hover`.", + "control": "color" + }, + "system-action-button-background-color-selected-down": { + "description": "Defined in `.spectrum`.
Used by `--spectrum-actionbutton-background-color-selected-down`.", + "control": "color" + }, + "system-action-button-background-color-selected-focus": { + "description": "Defined in `.spectrum`.
Used by `--spectrum-actionbutton-background-color-selected-focus`.", + "control": "color" + }, + "system-action-button-border-color-default": { + "description": "Defined in `.spectrum`.
Used by `--spectrum-actionbutton-border-color-default`.", + "control": "color" + }, + "system-action-button-border-color-hover": { + "description": "Defined in `.spectrum`.
Used by `--spectrum-actionbutton-border-color-hover`.", + "control": "color" + }, + "system-action-button-border-color-down": { + "description": "Defined in `.spectrum`.
Used by `--spectrum-actionbutton-border-color-down`.", + "control": "color" + }, + "system-action-button-border-color-focus": { + "description": "Defined in `.spectrum`.
Used by `--spectrum-actionbutton-border-color-focus`.", + "control": "color" + }, + "system-action-button-border-color-disabled": { + "description": "Defined in `.spectrum`.
Used by `--spectrum-actionbutton-border-color-disabled`.", + "control": "color" + }, + "system-action-button-content-color-selected": { + "description": "Defined in `.spectrum`.
Used by `--spectrum-actionbutton-content-color-selected`.", + "control": "color" + }, + "system-action-button-size-m-border-radius-default": { + "description": "Defined in `.spectrum`.
Used by `--spectrum-actionbutton-border-radius-default`.", + "control": "text" + }, + "system-action-button-size-xs-border-radius-default": { + "description": "Defined in `.spectrum`.
Used by `--spectrum-actionbutton-border-radius-default`.", + "control": "text" + }, + "system-action-button-size-s-border-radius-default": { + "description": "Defined in `.spectrum`.
Used by `--spectrum-actionbutton-border-radius-default`.", + "control": "text" + }, + "system-action-button-size-l-border-radius-default": { + "description": "Defined in `.spectrum`.
Used by `--spectrum-actionbutton-border-radius-default`.", + "control": "text" + }, + "system-action-button-size-xl-border-radius-default": { + "description": "Defined in `.spectrum`.
Used by `--spectrum-actionbutton-border-radius-default`.", + "control": "text" + }, + "system-action-button-quiet-background-color-default": { + "description": "Defined in `.spectrum`.
Used by `--spectrum-actionbutton-background-color-default`.", + "control": "color" + }, + "system-action-button-quiet-background-color-hover": { + "description": "Defined in `.spectrum`.
Used by `--spectrum-actionbutton-background-color-hover`.", + "control": "color" + }, + "system-action-button-quiet-background-color-down": { + "description": "Defined in `.spectrum`.
Used by `--spectrum-actionbutton-background-color-down`.", + "control": "color" + }, + "system-action-button-quiet-background-color-focus": { + "description": "Defined in `.spectrum`.
Used by `--spectrum-actionbutton-background-color-focus`.", + "control": "color" + }, + "system-action-button-quiet-background-color-disabled": { + "description": "Defined in `.spectrum`.
Used by `--spectrum-actionbutton-background-color-disabled`.", + "control": "color" + }, + "system-action-button-quiet-background-color-selected-disabled": { + "description": "Defined in `.spectrum`.
Used by `--spectrum-actionbutton-background-color-selected-disabled`.", + "control": "color" + }, + "system-action-button-static-black-border-color-default": { + "description": "Defined in `.spectrum`.
Used by `--spectrum-actionbutton-border-color-default`.", + "control": "color" + }, + "system-action-button-static-black-border-color-hover": { + "description": "Defined in `.spectrum`.
Used by `--spectrum-actionbutton-border-color-hover`.", + "control": "color" + }, + "system-action-button-static-black-border-color-down": { + "description": "Defined in `.spectrum`.
Used by `--spectrum-actionbutton-border-color-down`.", + "control": "color" + }, + "system-action-button-static-black-border-color-focus": { + "description": "Defined in `.spectrum`.
Used by `--spectrum-actionbutton-border-color-focus`.", + "control": "color" + }, + "system-action-button-static-black-border-color-disabled": { + "description": "Defined in `.spectrum`.
Used by `--spectrum-actionbutton-border-color-disabled`.", + "control": "color" + }, + "system-action-button-static-black-background-color-disabled": { + "description": "Defined in `.spectrum`.
Used by `--spectrum-actionbutton-background-color-disabled`.", + "control": "color" + }, + "system-action-button-static-black-background-color-selected-disabled": { + "description": "Defined in `.spectrum`.
Used by `--spectrum-actionbutton-background-color-selected-disabled`.", + "control": "color" + }, + "system-action-button-static-black-background-color-default": { + "description": "Defined in `.spectrum`.
Used by `--spectrum-actionbutton-background-color-default`.", + "control": "color" + }, + "system-action-button-static-black-background-color-hover": { + "description": "Defined in `.spectrum`.
Used by `--spectrum-actionbutton-background-color-hover`.", + "control": "color" + }, + "system-action-button-static-black-background-color-down": { + "description": "Defined in `.spectrum`.
Used by `--spectrum-actionbutton-background-color-down`.", + "control": "color" + }, + "system-action-button-static-black-background-color-focus": { + "description": "Defined in `.spectrum`.
Used by `--spectrum-actionbutton-background-color-focus`.", + "control": "color" + }, + "system-action-button-static-black-quiet-background-color-default": { + "description": "Defined in `.spectrum`.
Used by `--spectrum-actionbutton-background-color-default`.", + "control": "color" + }, + "system-action-button-static-black-quiet-background-color-hover": { + "description": "Defined in `.spectrum`.
Used by `--spectrum-actionbutton-background-color-hover`.", + "control": "color" + }, + "system-action-button-static-black-quiet-background-color-down": { + "description": "Defined in `.spectrum`.
Used by `--spectrum-actionbutton-background-color-down`.", + "control": "color" + }, + "system-action-button-static-black-quiet-background-color-focus": { + "description": "Defined in `.spectrum`.
Used by `--spectrum-actionbutton-background-color-focus`.", + "control": "color" + }, + "system-action-button-static-black-quiet-background-color-disabled": { + "description": "Defined in `.spectrum`.
Used by `--spectrum-actionbutton-background-color-disabled`.", + "control": "color" + }, + "system-action-button-static-white-border-color-default": { + "description": "Defined in `.spectrum`.
Used by `--spectrum-actionbutton-border-color-default`.", + "control": "color" + }, + "system-action-button-static-white-border-color-hover": { + "description": "Defined in `.spectrum`.
Used by `--spectrum-actionbutton-border-color-hover`.", + "control": "color" + }, + "system-action-button-static-white-border-color-down": { + "description": "Defined in `.spectrum`.
Used by `--spectrum-actionbutton-border-color-down`.", + "control": "color" + }, + "system-action-button-static-white-border-color-focus": { + "description": "Defined in `.spectrum`.
Used by `--spectrum-actionbutton-border-color-focus`.", + "control": "color" + }, + "system-action-button-static-white-border-color-disabled": { + "description": "Defined in `.spectrum`.
Used by `--spectrum-actionbutton-border-color-disabled`.", + "control": "color" + }, + "system-action-button-static-white-background-color-disabled": { + "description": "Defined in `.spectrum`.
Used by `--spectrum-actionbutton-background-color-disabled`.", + "control": "color" + }, + "system-action-button-static-white-background-color-selected-disabled": { + "description": "Defined in `.spectrum`.
Used by `--spectrum-actionbutton-background-color-selected-disabled`.", + "control": "color" + }, + "system-action-button-static-white-background-color-default": { + "description": "Defined in `.spectrum`.
Used by `--spectrum-actionbutton-background-color-default`.", + "control": "color" + }, + "system-action-button-static-white-background-color-hover": { + "description": "Defined in `.spectrum`.
Used by `--spectrum-actionbutton-background-color-hover`.", + "control": "color" + }, + "system-action-button-static-white-background-color-down": { + "description": "Defined in `.spectrum`.
Used by `--spectrum-actionbutton-background-color-down`.", + "control": "color" + }, + "system-action-button-static-white-background-color-focus": { + "description": "Defined in `.spectrum`.
Used by `--spectrum-actionbutton-background-color-focus`.", + "control": "color" + }, + "system-action-button-static-white-quiet-background-color-default": { + "description": "Defined in `.spectrum`.
Used by `--spectrum-actionbutton-background-color-default`.", + "control": "color" + }, + "system-action-button-static-white-quiet-background-color-hover": { + "description": "Defined in `.spectrum`.
Used by `--spectrum-actionbutton-background-color-hover`.", + "control": "color" + }, + "system-action-button-static-white-quiet-background-color-down": { + "description": "Defined in `.spectrum`.
Used by `--spectrum-actionbutton-background-color-down`.", + "control": "color" + }, + "system-action-button-static-white-quiet-background-color-focus": { + "description": "Defined in `.spectrum`.
Used by `--spectrum-actionbutton-background-color-focus`.", + "control": "color" + }, + "system-action-button-static-white-quiet-background-color-disabled": { + "description": "Defined in `.spectrum`.
Used by `--spectrum-actionbutton-background-color-disabled`.", + "control": "color" + } + }, + "passthroughs": { + "mod-button-font-family": { + "category": "Passthrough" + }, + "mod-button-line-height": { + "category": "Passthrough" + }, + "mod-button-animation-duration": { + "category": "Passthrough" + } + }, + "high-contrast": { + "highcontrast-actionbutton-focus-indicator-color": { + "value": "var(--mod-actionbutton-focus-indicator-color, var(--spectrum-focus-indicator-color))", + "description": "Defined in `.spectrum-ActionButton`.
Used by `--spectrum-actionbutton-focus-indicator-color`.
Defaults to `var(--mod-actionbutton-focus-indicator-color, var(--spectrum-focus-indicator-color))`, if not set.", + "control": "color" + }, + "highcontrast-actionbutton-content-color": { + "value": "var(--mod-actionbutton-content-color-default, var(--spectrum-neutral-content-color-default))", + "description": "Defined in `.spectrum-ActionButton`, `.spectrum-ActionButton.is-selected`, `.spectrum-ActionButton.is-disabled, .spectrum-ActionButton:disabled`.
Used by `--spectrum-actionbutton-content-color`.
Defaults to `var(--mod-actionbutton-content-color-default, var(--spectrum-neutral-content-color-default))`, if not set.", + "control": "color" + }, + "highcontrast-actionbutton-background-color": { + "value": "var(--mod-actionbutton-background-color-default, var(--spectrum-actionbutton-background-color-default))", + "description": "Defined in `.spectrum-ActionButton.is-selected`, `.spectrum-ActionButton.is-disabled, .spectrum-ActionButton:disabled`.
Used by `--spectrum-actionbutton-background-color`.
Defaults to `var(--mod-actionbutton-background-color-default, var(--spectrum-actionbutton-background-color-default))`, if not set.", + "control": "color" + }, + "highcontrast-actionbutton-border-color": { + "value": "var(--mod-actionbutton-border-color-default, var(--spectrum-actionbutton-border-color-default))", + "description": "Defined in `.spectrum-ActionButton.is-selected`, `.spectrum-ActionButton.is-disabled, .spectrum-ActionButton:disabled`.
Used by `--spectrum-actionbutton-border-color`.
Defaults to `var(--mod-actionbutton-border-color-default, var(--spectrum-actionbutton-border-color-default))`, if not set.", + "control": "color" + } + } } diff --git a/components/actionbutton/stories/actionbutton.stories.js b/components/actionbutton/stories/actionbutton.stories.js index a08f0f7bbfc..af53bc23f06 100644 --- a/components/actionbutton/stories/actionbutton.stories.js +++ b/components/actionbutton/stories/actionbutton.stories.js @@ -2,11 +2,13 @@ import { default as IconStories } from "@spectrum-css/icon/stories/icon.stories. import { Sizes } from "@spectrum-css/preview/decorators"; import { disableDefaultModes } from "@spectrum-css/preview/modes"; import { isActive, isDisabled, isEmphasized, isFocused, isHovered, isQuiet, isSelected, size, staticColor } from "@spectrum-css/preview/types"; -import metadata from "../dist/metadata.json"; -import packageJson from "../package.json"; import { ActionButtonGroup } from "./actionbutton.test.js"; import { ActionButtonsWithIconOptions, IconOnlyOption, TreatmentTemplate } from "./template.js"; +// Local assets to render the component styles and structure +import metadata from "../dist/metadata.json"; +import packageJson from "../package.json"; + /** * The action button component represents an action a user can take. * @@ -90,6 +92,7 @@ export default { }, packageJson, metadata, + cssprops: metadata.modifiers, docs: { story: { height: "auto", diff --git a/components/actionbutton/stories/template.js b/components/actionbutton/stories/template.js index 425b7e4115c..8fe3fb96d59 100644 --- a/components/actionbutton/stories/template.js +++ b/components/actionbutton/stories/template.js @@ -46,6 +46,7 @@ import { Template as Icon } from "@spectrum-css/icon/stories/template.js"; */ export const Template = ({ rootClass = "spectrum-ActionButton", + id = getRandomId("action-button"), size = "m", iconName, iconSet = "workflow", @@ -65,7 +66,6 @@ export const Template = ({ customStyles = {}, customIconClasses = [], onclick, - id = getRandomId("actionbutton"), testId, role = "button", } = {}, context = {}) => { diff --git a/components/actiongroup/dist/metadata.json b/components/actiongroup/dist/metadata.json index c78e7d30965..28fc9c44c6a 100644 --- a/components/actiongroup/dist/metadata.json +++ b/components/actiongroup/dist/metadata.json @@ -5,20 +5,20 @@ ".spectrum-ActionGroup .spectrum-ActionGroup-item", ".spectrum-ActionGroup .spectrum-ActionGroup-item:focus-visible", ".spectrum-ActionGroup--compact", - ".spectrum-ActionGroup--compact.spectrum-ActionGroup--vertical:not(.spectrum-ActionGroup--quiet)", - ".spectrum-ActionGroup--compact.spectrum-ActionGroup--vertical:not(.spectrum-ActionGroup--quiet) .spectrum-ActionGroup-item", - ".spectrum-ActionGroup--compact.spectrum-ActionGroup--vertical:not(.spectrum-ActionGroup--quiet) .spectrum-ActionGroup-item + .spectrum-ActionGroup-item", - ".spectrum-ActionGroup--compact.spectrum-ActionGroup--vertical:not(.spectrum-ActionGroup--quiet) .spectrum-ActionGroup-item:first-child", - ".spectrum-ActionGroup--compact.spectrum-ActionGroup--vertical:not(.spectrum-ActionGroup--quiet) .spectrum-ActionGroup-item:last-child", ".spectrum-ActionGroup--compact:not(.spectrum-ActionGroup--quiet)", ".spectrum-ActionGroup--compact:not(.spectrum-ActionGroup--quiet) .spectrum-ActionGroup-item", - ".spectrum-ActionGroup--compact:not(.spectrum-ActionGroup--quiet) .spectrum-ActionGroup-item + .spectrum-ActionGroup-item", ".spectrum-ActionGroup--compact:not(.spectrum-ActionGroup--quiet) .spectrum-ActionGroup-item .spectrum-ActionButton-label", - ".spectrum-ActionGroup--compact:not(.spectrum-ActionGroup--quiet) .spectrum-ActionGroup-item.is-selected", + ".spectrum-ActionGroup--compact:not(.spectrum-ActionGroup--quiet) .spectrum-ActionGroup-item + .spectrum-ActionGroup-item", ".spectrum-ActionGroup--compact:not(.spectrum-ActionGroup--quiet) .spectrum-ActionGroup-item:first-child", ".spectrum-ActionGroup--compact:not(.spectrum-ActionGroup--quiet) .spectrum-ActionGroup-item:focus-visible", ".spectrum-ActionGroup--compact:not(.spectrum-ActionGroup--quiet) .spectrum-ActionGroup-item:hover", ".spectrum-ActionGroup--compact:not(.spectrum-ActionGroup--quiet) .spectrum-ActionGroup-item:last-child", + ".spectrum-ActionGroup--compact:not(.spectrum-ActionGroup--quiet) .spectrum-ActionGroup-item.is-selected", + ".spectrum-ActionGroup--compact.spectrum-ActionGroup--vertical:not(.spectrum-ActionGroup--quiet)", + ".spectrum-ActionGroup--compact.spectrum-ActionGroup--vertical:not(.spectrum-ActionGroup--quiet) .spectrum-ActionGroup-item", + ".spectrum-ActionGroup--compact.spectrum-ActionGroup--vertical:not(.spectrum-ActionGroup--quiet) .spectrum-ActionGroup-item + .spectrum-ActionGroup-item", + ".spectrum-ActionGroup--compact.spectrum-ActionGroup--vertical:not(.spectrum-ActionGroup--quiet) .spectrum-ActionGroup-item:first-child", + ".spectrum-ActionGroup--compact.spectrum-ActionGroup--vertical:not(.spectrum-ActionGroup--quiet) .spectrum-ActionGroup-item:last-child", ".spectrum-ActionGroup--justified .spectrum-ActionGroup-item", ".spectrum-ActionGroup--sizeL", ".spectrum-ActionGroup--sizeM", @@ -28,36 +28,136 @@ ".spectrum-ActionGroup--vertical", ".spectrum-ActionGroup:not(.spectrum-ActionGroup--vertical, .spectrum-ActionGroup--compact) .spectrum-ActionGroup-item" ], - "modifiers": [ - "--mod-actiongroup-border-radius", - "--mod-actiongroup-border-radius-reset", - "--mod-actiongroup-button-spacing-reset", - "--mod-actiongroup-gap-size-compact", - "--mod-actiongroup-horizontal-spacing-compact", - "--mod-actiongroup-horizontal-spacing-regular", - "--mod-actiongroup-vertical-spacing-compact", - "--mod-actiongroup-vertical-spacing-regular" - ], - "component": [ - "--spectrum-actiongroup-border-radius", - "--spectrum-actiongroup-border-radius-reset", - "--spectrum-actiongroup-button-spacing-reset", - "--spectrum-actiongroup-gap-size-compact", - "--spectrum-actiongroup-horizontal-spacing-compact", - "--spectrum-actiongroup-horizontal-spacing-regular", - "--spectrum-actiongroup-vertical-spacing-compact", - "--spectrum-actiongroup-vertical-spacing-regular" - ], - "global": [ - "--spectrum-corner-radius-100", - "--spectrum-spacing-100", - "--spectrum-spacing-75" - ], - "system-theme": [ - "--system-action-group-gap-size-compact", - "--system-action-group-horizontal-spacing-compact", - "--system-action-group-vertical-spacing-compact" - ], - "passthroughs": ["--mod-actionbutton-focus-indicator-border-radius"], - "high-contrast": [] + "modifiers": { + "mod-actiongroup-horizontal-spacing-regular": { + "value": "var(--spectrum-actiongroup-horizontal-spacing-regular)", + "description": "Used by `.spectrum-ActionGroup`.
Defaults to `var(--spectrum-actiongroup-horizontal-spacing-regular)`, if not set.", + "control": "text", + "category": "Modifier" + }, + "mod-actiongroup-vertical-spacing-regular": { + "value": "var(--spectrum-actiongroup-vertical-spacing-regular)", + "description": "Used by `.spectrum-ActionGroup--vertical`.
Defaults to `var(--spectrum-actiongroup-vertical-spacing-regular)`, if not set.", + "control": "text", + "category": "Modifier" + }, + "mod-actiongroup-gap-size-compact": { + "value": "var(--spectrum-actiongroup-gap-size-compact)", + "description": "Used by `.spectrum-ActionGroup--compact`, `.spectrum-ActionGroup--compact.spectrum-ActionGroup--vertical:not(.spectrum-ActionGroup--quiet)`.
Defaults to `var(--spectrum-actiongroup-gap-size-compact)`, if not set.", + "control": "text", + "category": "Modifier" + }, + "mod-actiongroup-border-radius-reset": { + "value": "var(--spectrum-actiongroup-border-radius-reset)", + "description": "Used by `.spectrum-ActionGroup--compact:not(.spectrum-ActionGroup--quiet) .spectrum-ActionGroup-item`, `.spectrum-ActionGroup--compact:not(.spectrum-ActionGroup--quiet) .spectrum-ActionGroup-item:last-child`, `.spectrum-ActionGroup--compact.spectrum-ActionGroup--vertical:not(.spectrum-ActionGroup--quiet) .spectrum-ActionGroup-item`.
Defaults to `var(--spectrum-actiongroup-border-radius-reset)`, if not set.", + "control": "text", + "category": "Modifier" + }, + "mod-actiongroup-border-radius": { + "value": "var(--spectrum-actiongroup-border-radius)", + "description": "Used by `--mod-actionbutton-focus-indicator-border-radius`, `.spectrum-ActionGroup--compact:not(.spectrum-ActionGroup--quiet) .spectrum-ActionGroup-item:first-child`, `.spectrum-ActionGroup--compact:not(.spectrum-ActionGroup--quiet) .spectrum-ActionGroup-item:last-child`, `.spectrum-ActionGroup--compact.spectrum-ActionGroup--vertical:not(.spectrum-ActionGroup--quiet) .spectrum-ActionGroup-item:first-child`, `.spectrum-ActionGroup--compact.spectrum-ActionGroup--vertical:not(.spectrum-ActionGroup--quiet) .spectrum-ActionGroup-item:last-child`.
Defaults to `var(--spectrum-actiongroup-border-radius)`, if not set.", + "control": "text", + "category": "Modifier" + }, + "mod-actiongroup-button-spacing-reset": { + "value": "var(--spectrum-actiongroup-button-spacing-reset)", + "description": "Used by `.spectrum-ActionGroup--compact:not(.spectrum-ActionGroup--quiet) .spectrum-ActionGroup-item:first-child`, `.spectrum-ActionGroup--compact.spectrum-ActionGroup--vertical:not(.spectrum-ActionGroup--quiet) .spectrum-ActionGroup-item:first-child`, `.spectrum-ActionGroup--compact.spectrum-ActionGroup--vertical:not(.spectrum-ActionGroup--quiet) .spectrum-ActionGroup-item + .spectrum-ActionGroup-item`, `.spectrum-ActionGroup--compact.spectrum-ActionGroup--vertical:not(.spectrum-ActionGroup--quiet) .spectrum-ActionGroup-item:last-child`.
Defaults to `var(--spectrum-actiongroup-button-spacing-reset)`, if not set.", + "control": "text", + "category": "Modifier" + }, + "mod-actiongroup-horizontal-spacing-compact": { + "value": "var(--spectrum-actiongroup-horizontal-spacing-compact)", + "description": "Used by `.spectrum-ActionGroup--compact:not(.spectrum-ActionGroup--quiet) .spectrum-ActionGroup-item + .spectrum-ActionGroup-item`, `.spectrum-ActionGroup--compact:not(.spectrum-ActionGroup--quiet) .spectrum-ActionGroup-item:last-child`.
Defaults to `var(--spectrum-actiongroup-horizontal-spacing-compact)`, if not set.", + "control": "text", + "category": "Modifier" + }, + "mod-actiongroup-vertical-spacing-compact": { + "value": "var(--spectrum-actiongroup-vertical-spacing-compact)", + "description": "Used by `.spectrum-ActionGroup--compact.spectrum-ActionGroup--vertical:not(.spectrum-ActionGroup--quiet) .spectrum-ActionGroup-item:first-child`, `.spectrum-ActionGroup--compact.spectrum-ActionGroup--vertical:not(.spectrum-ActionGroup--quiet) .spectrum-ActionGroup-item + .spectrum-ActionGroup-item`, `.spectrum-ActionGroup--compact.spectrum-ActionGroup--vertical:not(.spectrum-ActionGroup--quiet) .spectrum-ActionGroup-item:last-child`.
Defaults to `var(--spectrum-actiongroup-vertical-spacing-compact)`, if not set.", + "control": "text", + "category": "Modifier" + } + }, + "component": { + "spectrum-actiongroup-button-spacing-reset": { + "description": "Defined in `.spectrum-ActionGroup`.
Used by `.spectrum-ActionGroup--compact:not(.spectrum-ActionGroup--quiet) .spectrum-ActionGroup-item:first-child`, `.spectrum-ActionGroup--compact.spectrum-ActionGroup--vertical:not(.spectrum-ActionGroup--quiet) .spectrum-ActionGroup-item:first-child`, `.spectrum-ActionGroup--compact.spectrum-ActionGroup--vertical:not(.spectrum-ActionGroup--quiet) .spectrum-ActionGroup-item + .spectrum-ActionGroup-item`, `.spectrum-ActionGroup--compact.spectrum-ActionGroup--vertical:not(.spectrum-ActionGroup--quiet) .spectrum-ActionGroup-item:last-child`.", + "control": "text", + "category": "Component" + }, + "spectrum-actiongroup-border-radius-reset": { + "description": "Defined in `.spectrum-ActionGroup`.
Used by `.spectrum-ActionGroup--compact:not(.spectrum-ActionGroup--quiet) .spectrum-ActionGroup-item`, `.spectrum-ActionGroup--compact:not(.spectrum-ActionGroup--quiet) .spectrum-ActionGroup-item:last-child`, `.spectrum-ActionGroup--compact.spectrum-ActionGroup--vertical:not(.spectrum-ActionGroup--quiet) .spectrum-ActionGroup-item`.", + "control": "text", + "category": "Component" + }, + "spectrum-actiongroup-border-radius": { + "description": "Defined in `.spectrum-ActionGroup`.
Used by `--mod-actionbutton-focus-indicator-border-radius`, `.spectrum-ActionGroup--compact:not(.spectrum-ActionGroup--quiet) .spectrum-ActionGroup-item:first-child`, `.spectrum-ActionGroup--compact:not(.spectrum-ActionGroup--quiet) .spectrum-ActionGroup-item:last-child`, `.spectrum-ActionGroup--compact.spectrum-ActionGroup--vertical:not(.spectrum-ActionGroup--quiet) .spectrum-ActionGroup-item:first-child`, `.spectrum-ActionGroup--compact.spectrum-ActionGroup--vertical:not(.spectrum-ActionGroup--quiet) .spectrum-ActionGroup-item:last-child`.", + "control": "text", + "category": "Component" + }, + "spectrum-actiongroup-horizontal-spacing-regular": { + "description": "Defined in `.spectrum-ActionGroup--sizeS, .spectrum-ActionGroup--sizeXS`, `.spectrum-ActionGroup--sizeL, .spectrum-ActionGroup--sizeM, .spectrum-ActionGroup--sizeXL`.
Used by `.spectrum-ActionGroup`.", + "control": "text", + "category": "Component" + }, + "spectrum-actiongroup-vertical-spacing-regular": { + "description": "Defined in `.spectrum-ActionGroup--sizeS, .spectrum-ActionGroup--sizeXS`, `.spectrum-ActionGroup--sizeL, .spectrum-ActionGroup--sizeM, .spectrum-ActionGroup--sizeXL`.
Used by `.spectrum-ActionGroup--vertical`.", + "control": "text", + "category": "Component" + }, + "spectrum-actiongroup-gap-size-compact": { + "description": "Defined in `.spectrum-ActionGroup`.
Used by `.spectrum-ActionGroup--compact`, `.spectrum-ActionGroup--compact.spectrum-ActionGroup--vertical:not(.spectrum-ActionGroup--quiet)`.", + "control": "text", + "category": "Component" + }, + "spectrum-actiongroup-horizontal-spacing-compact": { + "description": "Defined in `.spectrum-ActionGroup`.
Used by `.spectrum-ActionGroup--compact:not(.spectrum-ActionGroup--quiet) .spectrum-ActionGroup-item + .spectrum-ActionGroup-item`, `.spectrum-ActionGroup--compact:not(.spectrum-ActionGroup--quiet) .spectrum-ActionGroup-item:last-child`.", + "control": "text", + "category": "Component" + }, + "spectrum-actiongroup-vertical-spacing-compact": { + "description": "Defined in `.spectrum-ActionGroup`.
Used by `.spectrum-ActionGroup--compact.spectrum-ActionGroup--vertical:not(.spectrum-ActionGroup--quiet) .spectrum-ActionGroup-item:first-child`, `.spectrum-ActionGroup--compact.spectrum-ActionGroup--vertical:not(.spectrum-ActionGroup--quiet) .spectrum-ActionGroup-item + .spectrum-ActionGroup-item`, `.spectrum-ActionGroup--compact.spectrum-ActionGroup--vertical:not(.spectrum-ActionGroup--quiet) .spectrum-ActionGroup-item:last-child`.", + "control": "text", + "category": "Component" + } + }, + "global": { + "spectrum-corner-radius-100": { + "value": "8px", + "description": "Used by `--spectrum-actiongroup-border-radius`.", + "control": "text", + "category": "Global" + }, + "spectrum-spacing-75": { + "value": "4px", + "description": "Used by `--spectrum-actiongroup-horizontal-spacing-regular`, `--spectrum-actiongroup-vertical-spacing-regular`.", + "control": "text", + "category": "Global" + }, + "spectrum-spacing-100": { + "value": "8px", + "description": "Used by `--spectrum-actiongroup-horizontal-spacing-regular`, `--spectrum-actiongroup-vertical-spacing-regular`.", + "control": "text", + "category": "Global" + } + }, + "system-theme": { + "system-action-group-gap-size-compact": { + "description": "Defined in `.spectrum`.
Used by `--spectrum-actiongroup-gap-size-compact`.", + "control": "text" + }, + "system-action-group-horizontal-spacing-compact": { + "description": "Defined in `.spectrum`.
Used by `--spectrum-actiongroup-horizontal-spacing-compact`.", + "control": "text" + }, + "system-action-group-vertical-spacing-compact": { + "description": "Defined in `.spectrum`.
Used by `--spectrum-actiongroup-vertical-spacing-compact`.", + "control": "text" + } + }, + "passthroughs": { + "mod-actionbutton-focus-indicator-border-radius": { + "category": "Passthrough" + } + }, + "high-contrast": {} } diff --git a/components/actiongroup/stories/actiongroup.stories.js b/components/actiongroup/stories/actiongroup.stories.js index a83857b9e54..92fef49b535 100644 --- a/components/actiongroup/stories/actiongroup.stories.js +++ b/components/actiongroup/stories/actiongroup.stories.js @@ -2,11 +2,13 @@ import { default as ActionButton } from "@spectrum-css/actionbutton/stories/acti import { Sizes } from "@spectrum-css/preview/decorators"; import { disableDefaultModes } from "@spectrum-css/preview/modes"; import { size } from "@spectrum-css/preview/types"; -import metadata from "../dist/metadata.json"; -import packageJson from "../package.json"; import { ActionGroups } from "./actiongroup.test.js"; import { OverflowOption, TreatmentTemplate } from "./template.js"; +// Local assets to render the component styles and structure +import metadata from "../dist/metadata.json"; +import packageJson from "../package.json"; + /** * An action group is a grouping of [action buttons](/docs/components-action-button--docs) that are related to each other. */ @@ -99,6 +101,7 @@ export default { }, packageJson, metadata, + cssprops: metadata.modifiers, }, }; diff --git a/components/actiongroup/stories/template.js b/components/actiongroup/stories/template.js index d13cdac64aa..29bf8f1af7c 100644 --- a/components/actiongroup/stories/template.js +++ b/components/actiongroup/stories/template.js @@ -1,7 +1,8 @@ import { Template as ActionButton } from "@spectrum-css/actionbutton/stories/template.js"; -import { Container, renderContent } from "@spectrum-css/preview/decorators"; +import { Container, getRandomId, renderContent } from "@spectrum-css/preview/decorators"; import { html } from "lit"; import { classMap } from "lit/directives/class-map.js"; +import { ifDefined } from "lit/directives/if-defined.js"; import { styleMap } from "lit/directives/style-map.js"; import { capitalize } from "lodash-es"; @@ -12,6 +13,7 @@ import "../themes/express.css"; export const Template = ({ rootClass = "spectrum-ActionGroup", + id = getRandomId("accordion-group"), size = "m", areQuiet = false, areEmphasized = false, @@ -41,6 +43,7 @@ export const Template = ({ ...customClasses.reduce((a, c) => ({ ...a, [c]: true }), {}), })} style=${styleMap(customStyles)} + id=${ifDefined(id)} > ${renderContent(content, { callback: ActionButton, diff --git a/components/actionmenu/stories/actionmenu.stories.js b/components/actionmenu/stories/actionmenu.stories.js index e9cdd3b8a14..44bc6cc0f6c 100644 --- a/components/actionmenu/stories/actionmenu.stories.js +++ b/components/actionmenu/stories/actionmenu.stories.js @@ -4,9 +4,11 @@ import { default as Menu } from "@spectrum-css/menu/stories/menu.stories.js"; import { default as Popover } from "@spectrum-css/popover/stories/popover.stories.js"; import { disableDefaultModes } from "@spectrum-css/preview/modes"; import { isOpen } from "@spectrum-css/preview/types"; -import packageJson from "../package.json"; import { ActionMenuGroup } from "./actionmenu.test.js"; +// Local assets to render the component styles and structure +import packageJson from "../package.json"; + /** * The action menu component is an action button with a popover. The `is-selected` class should be applied to the button when the menu is open. Note that the accessibility roles are different for an action menu compared to a normal menu. */ @@ -49,6 +51,7 @@ export default { ], }, packageJson, + cssprops: false, docs: { story: { height: "200px", diff --git a/components/actionmenu/stories/template.js b/components/actionmenu/stories/template.js index c4bc29768d9..19b6e722612 100644 --- a/components/actionmenu/stories/template.js +++ b/components/actionmenu/stories/template.js @@ -4,7 +4,7 @@ import { Template as Popover } from "@spectrum-css/popover/stories/template.js"; import { getRandomId } from "@spectrum-css/preview/decorators"; export const Template = ({ - id = getRandomId("actionmenu"), + id = getRandomId("action-menu"), testId, triggerId = getRandomId("actionmenu-trigger"), customClasses = [], diff --git a/components/alertbanner/dist/metadata.json b/components/alertbanner/dist/metadata.json index 15b6983e631..497a50be293 100644 --- a/components/alertbanner/dist/metadata.json +++ b/components/alertbanner/dist/metadata.json @@ -11,80 +11,359 @@ ".spectrum-AlertBanner-text", ".spectrum-AlertBanner.is-open" ], - "modifiers": [ - "--mod-alert-banner-bottom-text", - "--mod-alert-banner-close-button-spacing", - "--mod-alert-banner-edge-to-button", - "--mod-alert-banner-edge-to-divider", - "--mod-alert-banner-font-color", - "--mod-alert-banner-font-size", - "--mod-alert-banner-icon-size", - "--mod-alert-banner-icon-to-text", - "--mod-alert-banner-informative-background", - "--mod-alert-banner-max-inline-size", - "--mod-alert-banner-min-height", - "--mod-alert-banner-negative-background", - "--mod-alert-banner-neutral-background", - "--mod-alert-banner-size", - "--mod-alert-banner-start-edge", - "--mod-alert-banner-text-to-button-horizontal", - "--mod-alert-banner-text-to-button-vertical", - "--mod-alert-banner-text-to-divider", - "--mod-alert-banner-top-icon", - "--mod-alert-banner-top-text" - ], - "component": [ - "--spectrum-alert-banner-bottom-text", - "--spectrum-alert-banner-bottom-to-text", - "--spectrum-alert-banner-close-button-spacing", - "--spectrum-alert-banner-edge-to-button", - "--spectrum-alert-banner-edge-to-divider", - "--spectrum-alert-banner-font-color", - "--spectrum-alert-banner-font-size", - "--spectrum-alert-banner-icon-size", - "--spectrum-alert-banner-icon-to-text", - "--spectrum-alert-banner-informative-background", - "--spectrum-alert-banner-max-inline-size", - "--spectrum-alert-banner-min-height", - "--spectrum-alert-banner-minimum-height", - "--spectrum-alert-banner-negative-background", - "--spectrum-alert-banner-neutral-background", - "--spectrum-alert-banner-size", - "--spectrum-alert-banner-start-edge", - "--spectrum-alert-banner-text-to-button-horizontal", - "--spectrum-alert-banner-text-to-button-vertical", - "--spectrum-alert-banner-text-to-divider", - "--spectrum-alert-banner-top-icon", - "--spectrum-alert-banner-top-text", - "--spectrum-alert-banner-top-to-text", - "--spectrum-alert-banner-top-to-workflow-icon", - "--spectrum-alert-banner-width" - ], - "global": [ - "--spectrum-border-width-100", - "--spectrum-font-size-100", - "--spectrum-informative-background-color-default", - "--spectrum-negative-background-color-default", - "--spectrum-neutral-subdued-background-color-default", - "--spectrum-spacing-300", - "--spectrum-text-to-visual-300", - "--spectrum-white", - "--spectrum-workflow-icon-size-100" - ], - "system-theme": ["--system-alert-banner-neutral-background"], - "passthroughs": [ - "--mod-button-margin-block", - "--mod-button-margin-left", - "--mod-button-margin-right", - "--mod-closebutton-align-self", - "--mod-closebutton-margin-inline", - "--mod-closebutton-margin-top", - "--mod-divider-vertical-align", - "--mod-divider-vertical-height", - "--mod-divider-vertical-margin" - ], - "high-contrast": [ - "--highcontrast-alert-banner-border-color", - "--highcontrast-alert-banner-border-width" - ] + "modifiers": { + "mod-alert-banner-edge-to-divider": { + "value": "var(--spectrum-alert-banner-edge-to-divider)", + "description": "Used by `--mod-divider-vertical-margin`.
Defaults to `var(--spectrum-alert-banner-edge-to-divider)`, if not set.", + "control": "text", + "category": "Modifier" + }, + "mod-alert-banner-edge-to-button": { + "value": "var(--spectrum-alert-banner-edge-to-button)", + "description": "Used by `--mod-button-margin-block`, `.spectrum-AlertBanner-body`.
Defaults to `var(--spectrum-alert-banner-edge-to-button)`, if not set.", + "control": "text", + "category": "Modifier" + }, + "mod-alert-banner-text-to-divider": { + "value": "var(--spectrum-alert-banner-text-to-divider)", + "description": "Used by `--mod-button-margin-right`.
Defaults to `var(--spectrum-alert-banner-text-to-divider)`, if not set.", + "control": "text", + "category": "Modifier" + }, + "mod-alert-banner-close-button-spacing": { + "value": "var(--spectrum-alert-banner-close-button-spacing)", + "description": "Used by `--mod-closebutton-margin-inline`, `--mod-closebutton-margin-top`.
Defaults to `var(--spectrum-alert-banner-close-button-spacing)`, if not set.", + "control": "text", + "category": "Modifier" + }, + "mod-alert-banner-size": { + "value": "var(--spectrum-alert-banner-size)", + "description": "Used by `.spectrum-AlertBanner`.
Defaults to `var(--spectrum-alert-banner-size)`, if not set.", + "control": "text", + "category": "Modifier" + }, + "mod-alert-banner-max-inline-size": { + "value": "var(--spectrum-alert-banner-max-inline-size)", + "description": "Used by `.spectrum-AlertBanner`.
Defaults to `var(--spectrum-alert-banner-max-inline-size)`, if not set.", + "control": "text", + "category": "Modifier" + }, + "mod-alert-banner-min-height": { + "value": "var(--spectrum-alert-banner-min-height)", + "description": "Used by `.spectrum-AlertBanner`.
Defaults to `var(--spectrum-alert-banner-min-height)`, if not set.", + "control": "text", + "category": "Modifier" + }, + "mod-alert-banner-font-size": { + "value": "var(--spectrum-alert-banner-font-size)", + "description": "Used by `.spectrum-AlertBanner`.
Defaults to `var(--spectrum-alert-banner-font-size)`, if not set.", + "control": "text", + "category": "Modifier" + }, + "mod-alert-banner-font-color": { + "value": "var(--spectrum-alert-banner-font-color)", + "description": "Used by `.spectrum-AlertBanner`.
Defaults to `var(--spectrum-alert-banner-font-color)`, if not set.", + "control": "color", + "category": "Modifier" + }, + "mod-alert-banner-neutral-background": { + "value": "var(--spectrum-alert-banner-neutral-background)", + "description": "Used by `.spectrum-AlertBanner`.
Defaults to `var(--spectrum-alert-banner-neutral-background)`, if not set.", + "control": "text", + "category": "Modifier" + }, + "mod-alert-banner-informative-background": { + "value": "var(--spectrum-alert-banner-informative-background)", + "description": "Used by `.spectrum-AlertBanner--info`.
Defaults to `var(--spectrum-alert-banner-informative-background)`, if not set.", + "control": "text", + "category": "Modifier" + }, + "mod-alert-banner-negative-background": { + "value": "var(--spectrum-alert-banner-negative-background)", + "description": "Used by `.spectrum-AlertBanner--negative`.
Defaults to `var(--spectrum-alert-banner-negative-background)`, if not set.", + "control": "text", + "category": "Modifier" + }, + "mod-alert-banner-text-to-button-vertical": { + "value": "var(--spectrum-alert-banner-text-to-button-vertical)", + "description": "Used by `.spectrum-AlertBanner-body`.
Defaults to `var(--spectrum-alert-banner-text-to-button-vertical)`, if not set.", + "control": "text", + "category": "Modifier" + }, + "mod-alert-banner-start-edge": { + "value": "var(--spectrum-alert-banner-start-edge)", + "description": "Used by `.spectrum-AlertBanner-body`.
Defaults to `var(--spectrum-alert-banner-start-edge)`, if not set.", + "control": "text", + "category": "Modifier" + }, + "mod-alert-banner-icon-size": { + "value": "var(--spectrum-alert-banner-icon-size)", + "description": "Used by `.spectrum-AlertBanner-icon`.
Defaults to `var(--spectrum-alert-banner-icon-size)`, if not set.", + "control": "text", + "category": "Modifier" + }, + "mod-alert-banner-top-icon": { + "value": "var(--spectrum-alert-banner-top-icon)", + "description": "Used by `.spectrum-AlertBanner-icon`.
Defaults to `var(--spectrum-alert-banner-top-icon)`, if not set.", + "control": "text", + "category": "Modifier" + }, + "mod-alert-banner-icon-to-text": { + "value": "var(--spectrum-alert-banner-icon-to-text)", + "description": "Used by `.spectrum-AlertBanner-icon`.
Defaults to `var(--spectrum-alert-banner-icon-to-text)`, if not set.", + "control": "text", + "category": "Modifier" + }, + "mod-alert-banner-top-text": { + "value": "var(--spectrum-alert-banner-top-text)", + "description": "Used by `.spectrum-AlertBanner-text`.
Defaults to `var(--spectrum-alert-banner-top-text)`, if not set.", + "control": "text", + "category": "Modifier" + }, + "mod-alert-banner-bottom-text": { + "value": "var(--spectrum-alert-banner-bottom-text)", + "description": "Used by `.spectrum-AlertBanner-text`.
Defaults to `var(--spectrum-alert-banner-bottom-text)`, if not set.", + "control": "text", + "category": "Modifier" + }, + "mod-alert-banner-text-to-button-horizontal": { + "value": "var(--spectrum-alert-banner-text-to-button-horizontal)", + "description": "Used by `.spectrum-AlertBanner-text`.
Defaults to `var(--spectrum-alert-banner-text-to-button-horizontal)`, if not set.", + "control": "text", + "category": "Modifier" + } + }, + "component": { + "spectrum-alert-banner-min-height": { + "description": "Defined in `.spectrum-AlertBanner`.
Used by `.spectrum-AlertBanner`.", + "control": "text", + "category": "Component" + }, + "spectrum-alert-banner-minimum-height": { + "value": "48px", + "description": "Used by `--spectrum-alert-banner-min-height`.", + "control": "text", + "category": "Component" + }, + "spectrum-alert-banner-max-inline-size": { + "description": "Defined in `.spectrum-AlertBanner`.
Used by `.spectrum-AlertBanner`.", + "control": "text", + "category": "Component" + }, + "spectrum-alert-banner-width": { + "value": "832px", + "description": "Used by `--spectrum-alert-banner-max-inline-size`.", + "control": "text", + "category": "Component" + }, + "spectrum-alert-banner-size": { + "description": "Defined in `.spectrum-AlertBanner`.
Used by `.spectrum-AlertBanner`.", + "control": "text", + "category": "Component" + }, + "spectrum-alert-banner-font-size": { + "description": "Defined in `.spectrum-AlertBanner`.
Used by `.spectrum-AlertBanner`.", + "control": "text", + "category": "Component" + }, + "spectrum-alert-banner-icon-size": { + "description": "Defined in `.spectrum-AlertBanner`.
Used by `.spectrum-AlertBanner-icon`.", + "control": "text", + "category": "Component" + }, + "spectrum-alert-banner-icon-to-text": { + "description": "Defined in `.spectrum-AlertBanner`.
Used by `.spectrum-AlertBanner-icon`.", + "control": "text", + "category": "Component" + }, + "spectrum-alert-banner-start-edge": { + "description": "Defined in `.spectrum-AlertBanner`.
Used by `.spectrum-AlertBanner-body`.", + "control": "text", + "category": "Component" + }, + "spectrum-alert-banner-text-to-button-horizontal": { + "description": "Defined in `.spectrum-AlertBanner`.
Used by `.spectrum-AlertBanner-text`.", + "control": "text", + "category": "Component" + }, + "spectrum-alert-banner-text-to-divider": { + "description": "Defined in `.spectrum-AlertBanner`.
Used by `--mod-button-margin-right`.", + "control": "text", + "category": "Component" + }, + "spectrum-alert-banner-top-icon": { + "description": "Defined in `.spectrum-AlertBanner`.
Used by `.spectrum-AlertBanner-icon`.", + "control": "text", + "category": "Component" + }, + "spectrum-alert-banner-top-to-workflow-icon": { + "value": "15px", + "description": "Used by `--spectrum-alert-banner-top-icon`.", + "control": "text", + "category": "Component" + }, + "spectrum-alert-banner-top-text": { + "description": "Defined in `.spectrum-AlertBanner`.
Used by `.spectrum-AlertBanner-text`.", + "control": "text", + "category": "Component" + }, + "spectrum-alert-banner-top-to-text": { + "value": "14px", + "description": "Used by `--spectrum-alert-banner-top-text`.", + "control": "text", + "category": "Component" + }, + "spectrum-alert-banner-bottom-text": { + "description": "Defined in `.spectrum-AlertBanner`.
Used by `.spectrum-AlertBanner-text`.", + "control": "text", + "category": "Component" + }, + "spectrum-alert-banner-bottom-to-text": { + "value": "17px", + "description": "Used by `--spectrum-alert-banner-bottom-text`.", + "control": "text", + "category": "Component" + }, + "spectrum-alert-banner-informative-background": { + "description": "Defined in `.spectrum-AlertBanner`.
Used by `.spectrum-AlertBanner--info`.", + "control": "text", + "category": "Component" + }, + "spectrum-alert-banner-negative-background": { + "description": "Defined in `.spectrum-AlertBanner`.
Used by `.spectrum-AlertBanner--negative`.", + "control": "text", + "category": "Component" + }, + "spectrum-alert-banner-font-color": { + "description": "Defined in `.spectrum-AlertBanner`.
Used by `.spectrum-AlertBanner`.", + "control": "color", + "category": "Component" + }, + "spectrum-alert-banner-edge-to-divider": { + "description": "Used by `--mod-divider-vertical-margin`.", + "control": "text", + "category": "Component" + }, + "spectrum-alert-banner-edge-to-button": { + "description": "Used by `--mod-button-margin-block`, `.spectrum-AlertBanner-body`.", + "control": "text", + "category": "Component" + }, + "spectrum-alert-banner-close-button-spacing": { + "description": "Used by `--mod-closebutton-margin-inline`, `--mod-closebutton-margin-top`.", + "control": "text", + "category": "Component" + }, + "spectrum-alert-banner-neutral-background": { + "description": "Defined in `.spectrum-AlertBanner`.
Used by `.spectrum-AlertBanner`.", + "control": "text", + "category": "Component" + }, + "spectrum-alert-banner-text-to-button-vertical": { + "description": "Used by `.spectrum-AlertBanner-body`.", + "control": "text", + "category": "Component" + } + }, + "global": { + "spectrum-neutral-subdued-background-color-default": { + "value": "var(--spectrum-gray-500)", + "description": "Used by `--system-alert-banner-neutral-background`.", + "control": "color", + "category": "Global" + }, + "spectrum-font-size-100": { + "value": "14px", + "description": "Used by `--spectrum-alert-banner-font-size`.", + "control": "text", + "category": "Global" + }, + "spectrum-workflow-icon-size-100": { + "value": "20px", + "description": "Used by `--spectrum-alert-banner-icon-size`.", + "control": "text", + "category": "Global" + }, + "spectrum-text-to-visual-300": { + "value": "8px", + "description": "Used by `--spectrum-alert-banner-icon-to-text`.", + "control": "text", + "category": "Global" + }, + "spectrum-spacing-300": { + "value": "16px", + "description": "Used by `--spectrum-alert-banner-start-edge`, `--spectrum-alert-banner-text-to-button-horizontal`, `--spectrum-alert-banner-text-to-divider`.", + "control": "text", + "category": "Global" + }, + "spectrum-informative-background-color-default": { + "value": "var(--spectrum-informative-color-800)", + "description": "Used by `--spectrum-alert-banner-informative-background`.", + "control": "color", + "category": "Global" + }, + "spectrum-negative-background-color-default": { + "value": "var(--spectrum-negative-color-800)", + "description": "Used by `--spectrum-alert-banner-negative-background`.", + "control": "color", + "category": "Global" + }, + "spectrum-white": { + "value": "light-dark(rgb(255, 255, 255), rgb(255, 255, 255))", + "description": "Used by `--spectrum-alert-banner-font-color`.", + "control": "text", + "category": "Global" + }, + "spectrum-border-width-100": { + "value": "1px", + "description": "Used by `--highcontrast-alert-banner-border-width`.", + "control": "text", + "category": "Global" + } + }, + "system-theme": { + "system-alert-banner-neutral-background": { + "description": "Defined in `.spectrum`.
Used by `--spectrum-alert-banner-neutral-background`.", + "control": "text" + } + }, + "passthroughs": { + "mod-divider-vertical-margin": { + "category": "Passthrough" + }, + "mod-divider-vertical-height": { + "category": "Passthrough" + }, + "mod-divider-vertical-align": { + "category": "Passthrough" + }, + "mod-button-margin-block": { + "category": "Passthrough" + }, + "mod-button-margin-right": { + "category": "Passthrough" + }, + "mod-button-margin-left": { + "category": "Passthrough" + }, + "mod-closebutton-margin-inline": { + "category": "Passthrough" + }, + "mod-closebutton-margin-top": { + "category": "Passthrough" + }, + "mod-closebutton-align-self": { + "category": "Passthrough" + } + }, + "high-contrast": { + "highcontrast-alert-banner-border-width": { + "description": "Defined in `.spectrum-AlertBanner`.
Used by `.spectrum-AlertBanner`.", + "control": "text" + }, + "highcontrast-alert-banner-border-color": { + "description": "Defined in `.spectrum-AlertBanner`.
Used by `.spectrum-AlertBanner`.", + "control": "color" + } + } } diff --git a/components/alertbanner/stories/alertbanner.stories.js b/components/alertbanner/stories/alertbanner.stories.js index cd49c21a70e..7423e939ab9 100644 --- a/components/alertbanner/stories/alertbanner.stories.js +++ b/components/alertbanner/stories/alertbanner.stories.js @@ -5,6 +5,8 @@ import packageJson from "../package.json"; import { AlertBannerGroup } from "./alertbanner.test.js"; import { ActionableOptionsTemplate, Template, TextOverflowTemplate } from "./template.js"; +// Local assets to render the component styles and structure + /** * The alert banner shows pressing and high-signal messages, such as system alerts. It is meant to be noticed and prompt users to take action. * It should occupy all of the available horizontal space until it reaches its maximum allowed width. @@ -75,6 +77,7 @@ export default { }, packageJson, metadata, + cssprops: metadata.modifiers, }, }; diff --git a/components/alertbanner/stories/template.js b/components/alertbanner/stories/template.js index 3eb719c0612..11134f2a311 100644 --- a/components/alertbanner/stories/template.js +++ b/components/alertbanner/stories/template.js @@ -16,7 +16,7 @@ import "../themes/express.css"; export const Template = ({ rootClass = "spectrum-AlertBanner", - id = getRandomId("alertbanner"), + id = getRandomId("alert-banner"), testId, isOpen = true, text, @@ -35,7 +35,7 @@ export const Template = ({ ...customClasses.reduce((a, c) => ({ ...a, [c]: true }), {}), })} style=${styleMap(customStyles)} - id=${id} + id=${ifDefined(id)} data-testid=${ifDefined(testId)} >
Defaults to `var(--spectrum-alert-dialog-min-width)`, if not set.", + "control": "text", + "category": "Modifier" + }, + "mod-alert-dialog-max-width": { + "value": "var(--spectrum-alert-dialog-max-width)", + "description": "Used by `.spectrum-AlertDialog`.
Defaults to `var(--spectrum-alert-dialog-max-width)`, if not set.", + "control": "text", + "category": "Modifier" + }, + "mod-alert-dialog-padding": { + "value": "var(--spectrum-alert-dialog-padding)", + "description": "Used by `.spectrum-AlertDialog`.
Defaults to `var(--spectrum-alert-dialog-padding)`, if not set.", + "control": "text", + "category": "Modifier" + }, + "mod-alert-dialog-icon-size": { + "value": "var(--spectrum-alert-dialog-icon-size)", + "description": "Used by `.spectrum-AlertDialog .spectrum-Icon`.
Defaults to `var(--spectrum-alert-dialog-icon-size)`, if not set.", + "control": "text", + "category": "Modifier" + }, + "mod-alert-dialog-title-to-icon": { + "value": "var(--spectrum-alert-dialog-title-to-icon)", + "description": "Used by `.spectrum-AlertDialog .spectrum-Icon`.
Defaults to `var(--spectrum-alert-dialog-title-to-icon)`, if not set.", + "control": "text", + "category": "Modifier" + }, + "mod-alert-dialog-warning-icon-color": { + "value": "var(--spectrum-alert-dialog-warning-icon-color)", + "description": "Used by `--mod-icon-color`.
Defaults to `var(--spectrum-alert-dialog-warning-icon-color)`, if not set.", + "control": "color", + "category": "Modifier" + }, + "mod-alert-dialog-error-icon-color": { + "value": "var(--spectrum-alert-dialog-error-icon-color)", + "description": "Used by `--mod-icon-color`.
Defaults to `var(--spectrum-alert-dialog-error-icon-color)`, if not set.", + "control": "color", + "category": "Modifier" + }, + "mod-alert-dialog-title-font-family": { + "value": "var(--spectrum-alert-dialog-title-font-family)", + "description": "Used by `.spectrum-AlertDialog-heading`.
Defaults to `var(--spectrum-alert-dialog-title-font-family)`, if not set.", + "control": "text", + "category": "Modifier" + }, + "mod-alert-dialog-title-font-weight": { + "value": "var(--spectrum-alert-dialog-title-font-weight)", + "description": "Used by `.spectrum-AlertDialog-heading`.
Defaults to `var(--spectrum-alert-dialog-title-font-weight)`, if not set.", + "control": "text", + "category": "Modifier" + }, + "mod-alert-dialog-title-font-style": { + "value": "var(--spectrum-alert-dialog-title-font-style)", + "description": "Used by `.spectrum-AlertDialog-heading`.
Defaults to `var(--spectrum-alert-dialog-title-font-style)`, if not set.", + "control": "text", + "category": "Modifier" + }, + "mod-alert-dialog-title-font-size": { + "value": "var(--spectrum-alert-dialog-title-font-size)", + "description": "Used by `.spectrum-AlertDialog-heading`.
Defaults to `var(--spectrum-alert-dialog-title-font-size)`, if not set.", + "control": "text", + "category": "Modifier" + }, + "mod-alert-dialog-title-line-height": { + "value": "var(--spectrum-alert-dialog-title-line-height)", + "description": "Used by `.spectrum-AlertDialog-heading`.
Defaults to `var(--spectrum-alert-dialog-title-line-height)`, if not set.", + "control": "text", + "category": "Modifier" + }, + "mod-alert-dialog-title-color": { + "value": "var(--spectrum-alert-dialog-title-color)", + "description": "Used by `.spectrum-AlertDialog-heading`.
Defaults to `var(--spectrum-alert-dialog-title-color)`, if not set.", + "control": "color", + "category": "Modifier" + }, + "mod-alert-dialog-title-to-divider": { + "value": "var(--spectrum-alert-dialog-title-to-divider)", + "description": "Used by `.spectrum-AlertDialog-heading`.
Defaults to `var(--spectrum-alert-dialog-title-to-divider)`, if not set.", + "control": "text", + "category": "Modifier" + }, + "mod-alert-dialog-body-font-family": { + "value": "var(--spectrum-alert-dialog-body-font-family)", + "description": "Used by `.spectrum-AlertDialog-content`.
Defaults to `var(--spectrum-alert-dialog-body-font-family)`, if not set.", + "control": "text", + "category": "Modifier" + }, + "mod-alert-dialog-body-font-weight": { + "value": "var(--spectrum-alert-dialog-body-font-weight)", + "description": "Used by `.spectrum-AlertDialog-content`.
Defaults to `var(--spectrum-alert-dialog-body-font-weight)`, if not set.", + "control": "text", + "category": "Modifier" + }, + "mod-alert-dialog-body-font-style": { + "value": "var(--spectrum-alert-dialog-body-font-style)", + "description": "Used by `.spectrum-AlertDialog-content`.
Defaults to `var(--spectrum-alert-dialog-body-font-style)`, if not set.", + "control": "text", + "category": "Modifier" + }, + "mod-alert-dialog-body-font-size": { + "value": "var(--spectrum-alert-dialog-body-font-size)", + "description": "Used by `.spectrum-AlertDialog-content`.
Defaults to `var(--spectrum-alert-dialog-body-font-size)`, if not set.", + "control": "text", + "category": "Modifier" + }, + "mod-alert-dialog-body-line-height": { + "value": "var(--spectrum-alert-dialog-body-line-height)", + "description": "Used by `.spectrum-AlertDialog-content`.
Defaults to `var(--spectrum-alert-dialog-body-line-height)`, if not set.", + "control": "text", + "category": "Modifier" + }, + "mod-alert-dialog-body-color": { + "value": "var(--spectrum-alert-dialog-body-color)", + "description": "Used by `.spectrum-AlertDialog-content`.
Defaults to `var(--spectrum-alert-dialog-body-color)`, if not set.", + "control": "color", + "category": "Modifier" + }, + "mod-alert-dialog-divider-to-description": { + "value": "var(--spectrum-alert-dialog-divider-to-description)", + "description": "Used by `.spectrum-AlertDialog-content`.
Defaults to `var(--spectrum-alert-dialog-divider-to-description)`, if not set.", + "control": "text", + "category": "Modifier" + }, + "mod-alert-dialog-description-to-buttons": { + "value": "var(--spectrum-alert-dialog-description-to-buttons)", + "description": "Used by `.spectrum-AlertDialog-content`.
Defaults to `var(--spectrum-alert-dialog-description-to-buttons)`, if not set.", + "control": "text", + "category": "Modifier" + } + }, + "component": { + "spectrum-alert-dialog-min-width": { + "description": "Defined in `.spectrum-AlertDialog`.
Used by `.spectrum-AlertDialog`.", + "control": "text", + "category": "Component" + }, + "spectrum-alert-dialog-minimum-width": { + "value": "288px", + "description": "Used by `--spectrum-alert-dialog-min-width`.", + "control": "text", + "category": "Component" + }, + "spectrum-alert-dialog-max-width": { + "description": "Defined in `.spectrum-AlertDialog`.
Used by `.spectrum-AlertDialog`.", + "control": "text", + "category": "Component" + }, + "spectrum-alert-dialog-maximum-width": { + "value": "480px", + "description": "Used by `--spectrum-alert-dialog-max-width`.", + "control": "text", + "category": "Component" + }, + "spectrum-alert-dialog-icon-size": { + "description": "Defined in `.spectrum-AlertDialog`.
Used by `.spectrum-AlertDialog .spectrum-Icon`.", + "control": "text", + "category": "Component" + }, + "spectrum-alert-dialog-warning-icon-color": { + "description": "Defined in `.spectrum-AlertDialog`.
Used by `--mod-icon-color`.", + "control": "color", + "category": "Component" + }, + "spectrum-alert-dialog-error-icon-color": { + "description": "Defined in `.spectrum-AlertDialog`.
Used by `--mod-icon-color`.", + "control": "color", + "category": "Component" + }, + "spectrum-alert-dialog-title-font-family": { + "description": "Defined in `.spectrum-AlertDialog`.
Used by `.spectrum-AlertDialog-heading`.", + "control": "text", + "category": "Component" + }, + "spectrum-alert-dialog-title-font-weight": { + "description": "Defined in `.spectrum-AlertDialog`.
Used by `.spectrum-AlertDialog-heading`.", + "control": "text", + "category": "Component" + }, + "spectrum-alert-dialog-title-font-style": { + "description": "Defined in `.spectrum-AlertDialog`.
Used by `.spectrum-AlertDialog-heading`.", + "control": "text", + "category": "Component" + }, + "spectrum-alert-dialog-title-font-size": { + "description": "Defined in `.spectrum-AlertDialog`.
Used by `.spectrum-AlertDialog-heading`.", + "control": "text", + "category": "Component" + }, + "spectrum-alert-dialog-title-size": { + "value": "var(--spectrum-heading-size-xs)", + "description": "Used by `--spectrum-alert-dialog-title-font-size`.", + "control": "text", + "category": "Component" + }, + "spectrum-alert-dialog-title-line-height": { + "description": "Defined in `.spectrum-AlertDialog`.
Used by `.spectrum-AlertDialog-heading`.", + "control": "text", + "category": "Component" + }, + "spectrum-alert-dialog-title-color": { + "description": "Defined in `.spectrum-AlertDialog`.
Used by `.spectrum-AlertDialog-heading`.", + "control": "color", + "category": "Component" + }, + "spectrum-alert-dialog-body-font-family": { + "description": "Defined in `.spectrum-AlertDialog`.
Used by `.spectrum-AlertDialog-content`.", + "control": "text", + "category": "Component" + }, + "spectrum-alert-dialog-body-font-weight": { + "description": "Defined in `.spectrum-AlertDialog`.
Used by `.spectrum-AlertDialog-content`.", + "control": "text", + "category": "Component" + }, + "spectrum-alert-dialog-body-font-style": { + "description": "Defined in `.spectrum-AlertDialog`.
Used by `.spectrum-AlertDialog-content`.", + "control": "text", + "category": "Component" + }, + "spectrum-alert-dialog-body-font-size": { + "description": "Defined in `.spectrum-AlertDialog`.
Used by `.spectrum-AlertDialog-content`.", + "control": "text", + "category": "Component" + }, + "spectrum-alert-dialog-description-size": { + "value": "var(--spectrum-body-size-xs)", + "description": "Used by `--spectrum-alert-dialog-body-font-size`.", + "control": "text", + "category": "Component" + }, + "spectrum-alert-dialog-body-line-height": { + "description": "Defined in `.spectrum-AlertDialog`.
Used by `.spectrum-AlertDialog-content`.", + "control": "text", + "category": "Component" + }, + "spectrum-alert-dialog-body-color": { + "description": "Defined in `.spectrum-AlertDialog`.
Used by `.spectrum-AlertDialog-content`.", + "control": "color", + "category": "Component" + }, + "spectrum-alert-dialog-title-to-divider": { + "description": "Defined in `.spectrum-AlertDialog`.
Used by `.spectrum-AlertDialog-heading`.", + "control": "text", + "category": "Component" + }, + "spectrum-alert-dialog-divider-to-description": { + "description": "Defined in `.spectrum-AlertDialog`.
Used by `.spectrum-AlertDialog-content`.", + "control": "text", + "category": "Component" + }, + "spectrum-alert-dialog-title-to-icon": { + "description": "Defined in `.spectrum-AlertDialog`.
Used by `.spectrum-AlertDialog .spectrum-Icon`.", + "control": "text", + "category": "Component" + }, + "spectrum-alert-dialog-padding": { + "description": "Used by `.spectrum-AlertDialog`.", + "control": "text", + "category": "Component" + }, + "spectrum-alert-dialog-description-to-buttons": { + "description": "Used by `.spectrum-AlertDialog-content`.", + "control": "text", + "category": "Component" + } + }, + "global": { + "spectrum-workflow-icon-size-100": { + "value": "20px", + "description": "Used by `--spectrum-alert-dialog-icon-size`.", + "control": "text", + "category": "Global" + }, + "spectrum-notice-visual-color": { + "value": "var(--spectrum-notice-color-900)", + "description": "Used by `--spectrum-alert-dialog-warning-icon-color`.", + "control": "color", + "category": "Global" + }, + "spectrum-negative-visual-color": { + "value": "var(--spectrum-negative-color-900)", + "description": "Used by `--spectrum-alert-dialog-error-icon-color`.", + "control": "color", + "category": "Global" + }, + "spectrum-sans-font-family-stack": { + "description": "Used by `--spectrum-alert-dialog-title-font-family`, `--spectrum-alert-dialog-body-font-family`.", + "control": "text", + "category": "Global" + }, + "spectrum-heading-sans-serif-font-weight": { + "value": "700", + "description": "Used by `--spectrum-alert-dialog-title-font-weight`.", + "control": "text", + "category": "Global" + }, + "spectrum-heading-sans-serif-font-style": { + "value": "normal", + "description": "Used by `--spectrum-alert-dialog-title-font-style`.", + "control": "text", + "category": "Global" + }, + "spectrum-heading-line-height": { + "value": "1.3", + "description": "Used by `--spectrum-alert-dialog-title-line-height`.", + "control": "text", + "category": "Global" + }, + "spectrum-heading-color": { + "value": "var(--spectrum-gray-900)", + "description": "Used by `--spectrum-alert-dialog-title-color`.", + "control": "color", + "category": "Global" + }, + "spectrum-body-sans-serif-font-weight": { + "value": "400", + "description": "Used by `--spectrum-alert-dialog-body-font-weight`.", + "control": "text", + "category": "Global" + }, + "spectrum-body-sans-serif-font-style": { + "value": "normal", + "description": "Used by `--spectrum-alert-dialog-body-font-style`.", + "control": "text", + "category": "Global" + }, + "spectrum-line-height-100": { + "value": "1.3", + "description": "Used by `--spectrum-alert-dialog-body-line-height`.", + "control": "text", + "category": "Global" + }, + "spectrum-body-color": { + "value": "var(--spectrum-gray-800)", + "description": "Used by `--spectrum-alert-dialog-body-color`.", + "control": "color", + "category": "Global" + }, + "spectrum-spacing-200": { + "value": "12px", + "description": "Used by `--spectrum-alert-dialog-title-to-divider`.", + "control": "text", + "category": "Global" + }, + "spectrum-spacing-300": { + "value": "16px", + "description": "Used by `--spectrum-alert-dialog-divider-to-description`, `--spectrum-alert-dialog-title-to-icon`.", + "control": "text", + "category": "Global" + } + }, + "system-theme": {}, + "passthroughs": { + "mod-buttongroup-justify-content": { + "category": "Passthrough" + }, + "mod-icon-color": { + "category": "Passthrough" + } + }, + "high-contrast": {} } diff --git a/components/alertdialog/stories/alertdialog.stories.js b/components/alertdialog/stories/alertdialog.stories.js index 87c83d18ff9..c8194d17c5c 100644 --- a/components/alertdialog/stories/alertdialog.stories.js +++ b/components/alertdialog/stories/alertdialog.stories.js @@ -1,11 +1,13 @@ import { withUnderlayWrapper } from "@spectrum-css/preview/decorators"; import { disableDefaultModes } from "@spectrum-css/preview/modes"; import { isOpen } from "@spectrum-css/preview/types"; -import metadata from "../dist/metadata.json"; -import packageJson from "../package.json"; import { AlertDialogGroup } from "./alertdialog.test.js"; import { Template } from "./template.js"; +// Local assets to render the component styles and structure +import metadata from "../dist/metadata.json"; +import packageJson from "../package.json"; + /** * Alert dialogs display important information that users need to acknowledge. They appear over the interface and block further interactions until an action is selected. */ @@ -56,6 +58,7 @@ export default { }, packageJson, metadata, + cssprops: metadata.modifiers, }, decorators: [ withUnderlayWrapper, diff --git a/components/alertdialog/stories/template.js b/components/alertdialog/stories/template.js index 5de1e37972c..8d7fc093b2f 100644 --- a/components/alertdialog/stories/template.js +++ b/components/alertdialog/stories/template.js @@ -13,13 +13,13 @@ import "../index.css"; export const Dialog = ({ rootClass = "spectrum-AlertDialog", + id = getRandomId("alert-dialog"), heading, content, customClasses = [], buttons, variant, icon = false, - id = getRandomId("alertdialog"), customStyles = {}, } = {}, context = {}) => { return html` diff --git a/components/asset/dist/metadata.json b/components/asset/dist/metadata.json index 306c123b1b6..4d9fbda7b20 100644 --- a/components/asset/dist/metadata.json +++ b/components/asset/dist/metadata.json @@ -10,34 +10,123 @@ ".spectrum-Asset-folderOutline", ".spectrum-Asset-image" ], - "modifiers": [ - "--mod-asset-file-background-color", - "--mod-asset-folder-background-color", - "--mod-asset-icon-margin", - "--mod-asset-icon-max-width", - "--mod-asset-icon-min-width", - "--mod-asset-icon-outline-color" - ], - "component": [ - "--spectrum-asset-file-background", - "--spectrum-asset-file-background-color", - "--spectrum-asset-file-outline", - "--spectrum-asset-folder-background", - "--spectrum-asset-folder-background-color", - "--spectrum-asset-folder-outline", - "--spectrum-asset-icon-outline-color" - ], - "global": [ - "--spectrum-animation-duration-100", - "--spectrum-gray-200", - "--spectrum-gray-25", - "--spectrum-gray-500" - ], - "system-theme": [ - "--system-asset-file-background-color", - "--system-asset-folder-background-color", - "--system-asset-icon-outline-color" - ], - "passthroughs": [], - "high-contrast": ["--highcontrast-asset-icon-background-color"] + "modifiers": { + "mod-asset-folder-background-color": { + "value": "var(--spectrum-asset-folder-background-color)", + "description": "Used by `--spectrum-asset-folder-background`.
Defaults to `var(--spectrum-asset-folder-background-color)`, if not set.", + "control": "color", + "category": "Modifier" + }, + "mod-asset-file-background-color": { + "value": "var(--spectrum-asset-file-background-color)", + "description": "Used by `--spectrum-asset-file-background`.
Defaults to `var(--spectrum-asset-file-background-color)`, if not set.", + "control": "color", + "category": "Modifier" + }, + "mod-asset-icon-outline-color": { + "value": "var(--spectrum-asset-icon-outline-color)", + "description": "Used by `--spectrum-asset-folder-outline`, `--spectrum-asset-file-outline`.
Defaults to `var(--spectrum-asset-icon-outline-color)`, if not set.", + "control": "color", + "category": "Modifier" + }, + "mod-asset-icon-min-width": { + "description": "Used by `.spectrum-Asset-file, .spectrum-Asset-folder`.", + "control": "text", + "category": "Modifier" + }, + "mod-asset-icon-max-width": { + "description": "Used by `.spectrum-Asset-file, .spectrum-Asset-folder`.", + "control": "text", + "category": "Modifier" + }, + "mod-asset-icon-margin": { + "description": "Used by `.spectrum-Asset-file, .spectrum-Asset-folder`.", + "control": "text", + "category": "Modifier" + } + }, + "component": { + "spectrum-asset-folder-background": { + "description": "Defined in `.spectrum-Asset`.
Used by `.spectrum-Asset-folderBackground`.", + "control": "text", + "category": "Component" + }, + "spectrum-asset-folder-background-color": { + "description": "Defined in `.spectrum-Asset`.
Used by `--spectrum-asset-folder-background`.", + "control": "color", + "category": "Component" + }, + "spectrum-asset-file-background": { + "description": "Defined in `.spectrum-Asset`.
Used by `.spectrum-Asset-fileBackground`.", + "control": "text", + "category": "Component" + }, + "spectrum-asset-file-background-color": { + "description": "Defined in `.spectrum-Asset`.
Used by `--spectrum-asset-file-background`.", + "control": "color", + "category": "Component" + }, + "spectrum-asset-folder-outline": { + "description": "Defined in `.spectrum-Asset`.
Used by `.spectrum-Asset-folderOutline`.", + "control": "text", + "category": "Component" + }, + "spectrum-asset-icon-outline-color": { + "description": "Defined in `.spectrum-Asset`.
Used by `--spectrum-asset-folder-outline`, `--spectrum-asset-file-outline`.", + "control": "color", + "category": "Component" + }, + "spectrum-asset-file-outline": { + "description": "Defined in `.spectrum-Asset`.
Used by `.spectrum-Asset-fileOutline`.", + "control": "text", + "category": "Component" + } + }, + "global": { + "spectrum-gray-200": { + "value": "light-dark(rgb(225, 225, 225), rgb(50, 50, 50))", + "description": "Used by `--system-asset-folder-background-color`.", + "control": "text", + "category": "Global" + }, + "spectrum-gray-25": { + "value": "light-dark(rgb(255, 255, 255), rgb(17, 17, 17))", + "description": "Used by `--system-asset-file-background-color`.", + "control": "text", + "category": "Global" + }, + "spectrum-gray-500": { + "value": "light-dark(rgb(143, 143, 143), rgb(109, 109, 109))", + "description": "Used by `--system-asset-icon-outline-color`.", + "control": "text", + "category": "Global" + }, + "spectrum-animation-duration-100": { + "description": "Used by `.spectrum-Asset-image`.", + "control": "text", + "category": "Global" + } + }, + "system-theme": { + "system-asset-folder-background-color": { + "description": "Defined in `.spectrum`.
Used by `--spectrum-asset-folder-background-color`.", + "control": "color" + }, + "system-asset-file-background-color": { + "description": "Defined in `.spectrum`.
Used by `--spectrum-asset-file-background-color`.", + "control": "color" + }, + "system-asset-icon-outline-color": { + "description": "Defined in `.spectrum`.
Used by `--spectrum-asset-icon-outline-color`.", + "control": "color" + } + }, + "passthroughs": {}, + "high-contrast": { + "highcontrast-asset-icon-background-color": { + "value": "var(--mod-asset-file-background-color, var(--spectrum-asset-file-background-color))", + "description": "Defined in `.spectrum-Asset`.
Used by `--spectrum-asset-folder-background`, `--spectrum-asset-file-background`.
Defaults to `var(--mod-asset-file-background-color, var(--spectrum-asset-file-background-color))`, if not set.", + "control": "color" + } + } } diff --git a/components/asset/stories/asset.stories.js b/components/asset/stories/asset.stories.js index 927c1009aad..1931589d314 100644 --- a/components/asset/stories/asset.stories.js +++ b/components/asset/stories/asset.stories.js @@ -1,9 +1,11 @@ import { disableDefaultModes } from "@spectrum-css/preview/modes"; -import metadata from "../dist/metadata.json"; -import packageJson from "../package.json"; import { AssetGroup } from "./asset.test.js"; import { Template } from "./template.js"; +// Local assets to render the component styles and structure +import metadata from "../dist/metadata.json"; +import packageJson from "../package.json"; + /** * Use an asset element to visually represent a file, folder or image. File and folder representations will center themselves horizontally and vertically in the space provided to the element. Images will be contained to the element, growing to the element's full height while centering itself within the width provided. */ @@ -38,6 +40,7 @@ export default { parameters: { packageJson, metadata, + cssprops: metadata.modifiers, }, }; diff --git a/components/assetcard/dist/metadata.json b/components/assetcard/dist/metadata.json index 1c86dc47523..690ee866529 100644 --- a/components/assetcard/dist/metadata.json +++ b/components/assetcard/dist/metadata.json @@ -5,9 +5,9 @@ ".spectrum-AssetCard .spectrum-AssetCard-selectionOrder", ".spectrum-AssetCard--checkboxSelection .spectrum-AssetCard-selectionIndicator", ".spectrum-AssetCard--checkboxSelection .spectrum-AssetCard-selectionIndicator .spectrum-AssetCard-selectionOrder", - ".spectrum-AssetCard--checkboxSelection.is-selected .spectrum-AssetCard-selectionIndicator", ".spectrum-AssetCard--checkboxSelection:focus-visible .spectrum-AssetCard-selectionIndicator", ".spectrum-AssetCard--checkboxSelection:hover .spectrum-AssetCard-selectionIndicator", + ".spectrum-AssetCard--checkboxSelection.is-selected .spectrum-AssetCard-selectionIndicator", ".spectrum-AssetCard--highlightSelection.is-selected .spectrum-AssetCard-asset", ".spectrum-AssetCard--orderedSelection .spectrum-AssetCard-selectionIndicator", ".spectrum-AssetCard--orderedSelection .spectrum-AssetCard-selectionIndicator .spectrum-AssetCard-checkbox", @@ -23,15 +23,6 @@ ".spectrum-AssetCard-selectionOrder", ".spectrum-AssetCard-selectionOverlay", ".spectrum-AssetCard-title", - ".spectrum-AssetCard.is-drop-target .spectrum-AssetCard-assetContainer:after", - ".spectrum-AssetCard.is-drop-target .spectrum-AssetCard-selectionOverlay", - ".spectrum-AssetCard.is-drop-target:active .spectrum-AssetCard-assetContainer:after", - ".spectrum-AssetCard.is-drop-target:hover .spectrum-AssetCard-assetContainer:after", - ".spectrum-AssetCard.is-selected .spectrum-AssetCard-assetContainer:after", - ".spectrum-AssetCard.is-selected .spectrum-AssetCard-selectionOverlay", - ".spectrum-AssetCard.is-selected .spectrum-Checkbox-box:before", - ".spectrum-AssetCard.is-selected:active .spectrum-AssetCard-assetContainer:after", - ".spectrum-AssetCard.is-selected:hover .spectrum-AssetCard-assetContainer:after", ".spectrum-AssetCard:active .spectrum-AssetCard-assetContainer:after", ".spectrum-AssetCard:focus-visible .spectrum-AssetCard-assetContainer:after", ".spectrum-AssetCard:focus-visible .spectrum-AssetCard-assetContainer:before", @@ -40,155 +31,786 @@ ".spectrum-AssetCard:hover .spectrum-Checkbox-box:before", ".spectrum-AssetCard:lang(ja)", ".spectrum-AssetCard:lang(ko)", - ".spectrum-AssetCard:lang(zh)" - ], - "modifiers": [ - "--mod-assectcard-border-color-selected-down", - "--mod-assectcard-focus-indicator-color", - "--mod-assetcard-asset-animation-duration", - "--mod-assetcard-asset-container-border-size", - "--mod-assetcard-asset-size", - "--mod-assetcard-background-color", - "--mod-assetcard-border-color", - "--mod-assetcard-border-color-down", - "--mod-assetcard-border-color-hover", - "--mod-assetcard-border-color-selected", - "--mod-assetcard-border-color-selected-hover", - "--mod-assetcard-border-radius", - "--mod-assetcard-content-font-family", - "--mod-assetcard-content-font-size", - "--mod-assetcard-content-font-style", - "--mod-assetcard-content-font-weight", - "--mod-assetcard-content-letter-spacing", - "--mod-assetcard-content-line-height", - "--mod-assetcard-content-margin-block-start", - "--mod-assetcard-content-text-color", - "--mod-assetcard-focus-indicator-thickness", - "--mod-assetcard-focus-ring-border-radius", - "--mod-assetcard-focus-ring-gap", - "--mod-assetcard-header-content-font-family", - "--mod-assetcard-header-content-font-size", - "--mod-assetcard-header-content-font-stlye", - "--mod-assetcard-header-content-font-weight", - "--mod-assetcard-header-content-letter-spacing", - "--mod-assetcard-header-content-line-height", - "--mod-assetcard-header-content-text-color", - "--mod-assetcard-header-margin-block-start", - "--mod-assetcard-overlay-background-color", - "--mod-assetcard-selectionindicator-background-color-default", - "--mod-assetcard-selectionindicator-background-color-ordered", - "--mod-assetcard-selectionindicator-border-radius", - "--mod-assetcard-selectionindicator-color", - "--mod-assetcard-selectionindicator-font-size", - "--mod-assetcard-selectionindicator-font-weight", - "--mod-assetcard-selectionindicator-margin", - "--mod-assetcard-selectionindicator-size", - "--mod-assetcard-title-font-family", - "--mod-assetcard-title-font-size", - "--mod-assetcard-title-font-style", - "--mod-assetcard-title-font-weight", - "--mod-assetcard-title-letter-spacing", - "--mod-assetcard-title-line-height", - "--mod-assetcard-title-text-color" - ], - "component": [ - "--spectrum-assetcard-asset-animation-duration", - "--spectrum-assetcard-asset-container-border-size", - "--spectrum-assetcard-asset-size", - "--spectrum-assetcard-background-color", - "--spectrum-assetcard-border-color", - "--spectrum-assetcard-border-color-down", - "--spectrum-assetcard-border-color-hover", - "--spectrum-assetcard-border-color-selected", - "--spectrum-assetcard-border-color-selected-down", - "--spectrum-assetcard-border-color-selected-hover", - "--spectrum-assetcard-border-radius", - "--spectrum-assetcard-content-font-family", - "--spectrum-assetcard-content-font-size", - "--spectrum-assetcard-content-font-style", - "--spectrum-assetcard-content-font-weight", - "--spectrum-assetcard-content-letter-spacing", - "--spectrum-assetcard-content-line-height", - "--spectrum-assetcard-content-margin-block-start", - "--spectrum-assetcard-content-text-color", - "--spectrum-assetcard-focus-indicator-thickness", - "--spectrum-assetcard-focus-ring-border-radius", - "--spectrum-assetcard-focus-ring-gap", - "--spectrum-assetcard-header-content-font-family", - "--spectrum-assetcard-header-content-font-size", - "--spectrum-assetcard-header-content-font-style", - "--spectrum-assetcard-header-content-font-weight", - "--spectrum-assetcard-header-content-letter-spacing", - "--spectrum-assetcard-header-content-line-height", - "--spectrum-assetcard-header-content-text-color", - "--spectrum-assetcard-header-margin-block-start", - "--spectrum-assetcard-overlay-background-color", - "--spectrum-assetcard-selectionindicator-background-color-default", - "--spectrum-assetcard-selectionindicator-background-color-ordered", - "--spectrum-assetcard-selectionindicator-blur", - "--spectrum-assetcard-selectionindicator-border-radius", - "--spectrum-assetcard-selectionindicator-box-shadow-color", - "--spectrum-assetcard-selectionindicator-color", - "--spectrum-assetcard-selectionindicator-font-size", - "--spectrum-assetcard-selectionindicator-font-weight", - "--spectrum-assetcard-selectionindicator-margin", - "--spectrum-assetcard-selectionindicator-offset-y", - "--spectrum-assetcard-selectionindicator-size", - "--spectrum-assetcard-title-font-family", - "--spectrum-assetcard-title-font-size", - "--spectrum-assetcard-title-font-style", - "--spectrum-assetcard-title-font-weight", - "--spectrum-assetcard-title-letter-spacing", - "--spectrum-assetcard-title-line-height", - "--spectrum-assetcard-title-text-color" - ], - "global": [ - "--spectrum-animation-duration-100", - "--spectrum-assestcard-focus-indicator-color", - "--spectrum-body-cjk-font-style", - "--spectrum-body-cjk-font-weight", - "--spectrum-body-cjk-line-height", - "--spectrum-body-sans-serif-font-weight", - "--spectrum-bold-font-weight", - "--spectrum-card-selection-background-size", - "--spectrum-cjk-font-family-stack", - "--spectrum-cjk-letter-spacing", - "--spectrum-corner-radius-100", - "--spectrum-default-font-style", - "--spectrum-focus-indicator-thickness", - "--spectrum-font-size-400", - "--spectrum-gray-500", - "--spectrum-gray-600", - "--spectrum-gray-700", - "--spectrum-gray-75", - "--spectrum-gray-75-rgb", - "--spectrum-gray-900", - "--spectrum-heading-cjk-font-style", - "--spectrum-heading-cjk-font-weight", - "--spectrum-heading-cjk-line-height", - "--spectrum-heading-cjk-size-xs", - "--spectrum-heading-sans-serif-font-weight", - "--spectrum-line-height-100", - "--spectrum-line-height-200", - "--spectrum-sans-font-family-stack", - "--spectrum-spacing-300", - "--spectrum-spacing-75", - "--spectrum-transparent-black-300", - "--spectrum-white" - ], - "system-theme": [ - "--system-asset-card-background-color", - "--system-asset-card-overlay-background-color", - "--system-asset-card-selectionindicator-background-color-default", - "--system-asset-card-selectionindicator-box-shadow-color" + ".spectrum-AssetCard:lang(zh)", + ".spectrum-AssetCard.is-drop-target .spectrum-AssetCard-assetContainer:after", + ".spectrum-AssetCard.is-drop-target .spectrum-AssetCard-selectionOverlay", + ".spectrum-AssetCard.is-drop-target:active .spectrum-AssetCard-assetContainer:after", + ".spectrum-AssetCard.is-drop-target:hover .spectrum-AssetCard-assetContainer:after", + ".spectrum-AssetCard.is-selected .spectrum-AssetCard-assetContainer:after", + ".spectrum-AssetCard.is-selected .spectrum-AssetCard-selectionOverlay", + ".spectrum-AssetCard.is-selected .spectrum-Checkbox-box:before", + ".spectrum-AssetCard.is-selected:active .spectrum-AssetCard-assetContainer:after", + ".spectrum-AssetCard.is-selected:hover .spectrum-AssetCard-assetContainer:after" ], - "passthroughs": [], - "high-contrast": [ - "--highcontrast-assectcard-border-color-selected-down", - "--highcontrast-assetcard-border-color-hover", - "--highcontrast-assetcard-border-color-selected", - "--highcontrast-assetcard-border-color-selected-hover", - "--highcontrast-assetcard-selectionindicator-background-color-ordered", - "--highcontrast-assetcard-selectionindicator-color" - ] + "modifiers": { + "mod-assetcard-asset-size": { + "value": "var(--spectrum-assetcard-asset-size)", + "description": "Used by `.spectrum-AssetCard`, `.spectrum-AssetCard-assetContainer`.
Defaults to `var(--spectrum-assetcard-asset-size)`, if not set.", + "control": "text", + "category": "Modifier" + }, + "mod-assetcard-border-color-hover": { + "value": "var(--spectrum-assetcard-border-color-hover)", + "description": "Used by `.spectrum-AssetCard.is-selected .spectrum-AssetCard-assetContainer:after, .spectrum-AssetCard.is-selected .spectrum-Checkbox-box:before, .spectrum-AssetCard:focus-visible .spectrum-AssetCard-assetContainer:after, .spectrum-AssetCard:focus-visible .spectrum-Checkbox-box:before`, `.spectrum-AssetCard:hover .spectrum-AssetCard-assetContainer:after, .spectrum-AssetCard:hover .spectrum-Checkbox-box:before`.
Defaults to `var(--spectrum-assetcard-border-color-hover)`, if not set.", + "control": "color", + "category": "Modifier" + }, + "mod-assetcard-border-color-down": { + "value": "var(--spectrum-assetcard-border-color-down)", + "description": "Used by `.spectrum-AssetCard:active .spectrum-AssetCard-assetContainer:after`.
Defaults to `var(--spectrum-assetcard-border-color-down)`, if not set.", + "control": "color", + "category": "Modifier" + }, + "mod-assetcard-border-radius": { + "value": "var(--spectrum-assetcard-border-radius)", + "description": "Used by `.spectrum-AssetCard-assetContainer`, `.spectrum-AssetCard-asset, .spectrum-AssetCard-assetContainer:after`, `.spectrum-AssetCard-selectionOverlay`.
Defaults to `var(--spectrum-assetcard-border-radius)`, if not set.", + "control": "text", + "category": "Modifier" + }, + "mod-assetcard-background-color": { + "value": "var(--spectrum-assetcard-background-color)", + "description": "Used by `.spectrum-AssetCard-assetContainer`.
Defaults to `var(--spectrum-assetcard-background-color)`, if not set.", + "control": "color", + "category": "Modifier" + }, + "mod-assetcard-asset-animation-duration": { + "value": "var(--spectrum-assetcard-asset-animation-duration)", + "description": "Used by `.spectrum-AssetCard-assetContainer`, `.spectrum-AssetCard-assetContainer:before`, `.spectrum-AssetCard-asset`, `.spectrum-AssetCard-selectionOverlay`, `.spectrum-AssetCard-selectionIndicator`.
Defaults to `var(--spectrum-assetcard-asset-animation-duration)`, if not set.", + "control": "text", + "category": "Modifier" + }, + "mod-assetcard-focus-ring-gap": { + "value": "var(--spectrum-assetcard-focus-ring-gap)", + "description": "Used by `.spectrum-AssetCard-assetContainer:before`.
Defaults to `var(--spectrum-assetcard-focus-ring-gap)`, if not set.", + "control": "text", + "category": "Modifier" + }, + "mod-assetcard-focus-indicator-thickness": { + "value": "var(--spectrum-assetcard-focus-indicator-thickness)", + "description": "Used by `.spectrum-AssetCard-assetContainer:before`.
Defaults to `var(--spectrum-assetcard-focus-indicator-thickness)`, if not set.", + "control": "text", + "category": "Modifier" + }, + "mod-assectcard-focus-indicator-color": { + "value": "var(--spectrum-assestcard-focus-indicator-color)", + "description": "Used by `.spectrum-AssetCard-assetContainer:before`.
Defaults to `var(--spectrum-assestcard-focus-indicator-color)`, if not set.", + "control": "color", + "category": "Modifier" + }, + "mod-assetcard-focus-ring-border-radius": { + "value": "var(--spectrum-assetcard-focus-ring-border-radius)", + "description": "Used by `.spectrum-AssetCard-assetContainer:before`.
Defaults to `var(--spectrum-assetcard-focus-ring-border-radius)`, if not set.", + "control": "text", + "category": "Modifier" + }, + "mod-assetcard-asset-container-border-size": { + "value": "var(--spectrum-assetcard-asset-container-border-size)", + "description": "Used by `.spectrum-AssetCard-assetContainer:after`.
Defaults to `var(--spectrum-assetcard-asset-container-border-size)`, if not set.", + "control": "text", + "category": "Modifier" + }, + "mod-assetcard-border-color": { + "value": "var(--spectrum-assetcard-border-color)", + "description": "Used by `.spectrum-AssetCard-assetContainer:after`.
Defaults to `var(--spectrum-assetcard-border-color)`, if not set.", + "control": "color", + "category": "Modifier" + }, + "mod-assetcard-header-margin-block-start": { + "value": "var(--spectrum-assetcard-header-margin-block-start)", + "description": "Used by `.spectrum-AssetCard-header`.
Defaults to `var(--spectrum-assetcard-header-margin-block-start)`, if not set.", + "control": "text", + "category": "Modifier" + }, + "mod-assetcard-title-text-color": { + "value": "var(--spectrum-assetcard-title-text-color)", + "description": "Used by `.spectrum-AssetCard-title`.
Defaults to `var(--spectrum-assetcard-title-text-color)`, if not set.", + "control": "color", + "category": "Modifier" + }, + "mod-assetcard-title-font-family": { + "value": "var(--spectrum-assetcard-title-font-family)", + "description": "Used by `.spectrum-AssetCard-title`.
Defaults to `var(--spectrum-assetcard-title-font-family)`, if not set.", + "control": "text", + "category": "Modifier" + }, + "mod-assetcard-title-font-weight": { + "value": "var(--spectrum-assetcard-title-font-weight)", + "description": "Used by `.spectrum-AssetCard-title`.
Defaults to `var(--spectrum-assetcard-title-font-weight)`, if not set.", + "control": "text", + "category": "Modifier" + }, + "mod-assetcard-title-font-size": { + "value": "var(--spectrum-assetcard-title-font-size)", + "description": "Used by `.spectrum-AssetCard-title`.
Defaults to `var(--spectrum-assetcard-title-font-size)`, if not set.", + "control": "text", + "category": "Modifier" + }, + "mod-assetcard-title-line-height": { + "value": "var(--spectrum-assetcard-title-line-height)", + "description": "Used by `.spectrum-AssetCard-title`.
Defaults to `var(--spectrum-assetcard-title-line-height)`, if not set.", + "control": "text", + "category": "Modifier" + }, + "mod-assetcard-title-font-style": { + "value": "var(--spectrum-assetcard-title-font-style)", + "description": "Used by `.spectrum-AssetCard-title`.
Defaults to `var(--spectrum-assetcard-title-font-style)`, if not set.", + "control": "text", + "category": "Modifier" + }, + "mod-assetcard-title-letter-spacing": { + "value": "var(--spectrum-assetcard-title-letter-spacing)", + "description": "Used by `.spectrum-AssetCard-title`.
Defaults to `var(--spectrum-assetcard-title-letter-spacing)`, if not set.", + "control": "text", + "category": "Modifier" + }, + "mod-assetcard-header-content-text-color": { + "value": "var(--spectrum-assetcard-header-content-text-color)", + "description": "Used by `.spectrum-AssetCard-headerContent`.
Defaults to `var(--spectrum-assetcard-header-content-text-color)`, if not set.", + "control": "color", + "category": "Modifier" + }, + "mod-assetcard-header-content-font-family": { + "value": "var(--spectrum-assetcard-header-content-font-family)", + "description": "Used by `.spectrum-AssetCard-headerContent`.
Defaults to `var(--spectrum-assetcard-header-content-font-family)`, if not set.", + "control": "text", + "category": "Modifier" + }, + "mod-assetcard-header-content-font-size": { + "value": "var(--spectrum-assetcard-header-content-font-size)", + "description": "Used by `.spectrum-AssetCard-headerContent`.
Defaults to `var(--spectrum-assetcard-header-content-font-size)`, if not set.", + "control": "text", + "category": "Modifier" + }, + "mod-assetcard-header-content-font-weight": { + "value": "var(--spectrum-assetcard-header-content-font-weight)", + "description": "Used by `.spectrum-AssetCard-headerContent`.
Defaults to `var(--spectrum-assetcard-header-content-font-weight)`, if not set.", + "control": "text", + "category": "Modifier" + }, + "mod-assetcard-header-content-line-height": { + "value": "var(--spectrum-assetcard-header-content-line-height)", + "description": "Used by `.spectrum-AssetCard-headerContent`.
Defaults to `var(--spectrum-assetcard-header-content-line-height)`, if not set.", + "control": "text", + "category": "Modifier" + }, + "mod-assetcard-header-content-font-stlye": { + "value": "var(--spectrum-assetcard-header-content-font-style)", + "description": "Used by `.spectrum-AssetCard-headerContent`.
Defaults to `var(--spectrum-assetcard-header-content-font-style)`, if not set.", + "control": "text", + "category": "Modifier" + }, + "mod-assetcard-header-content-letter-spacing": { + "value": "var(--spectrum-assetcard-header-content-letter-spacing)", + "description": "Used by `.spectrum-AssetCard-headerContent`.
Defaults to `var(--spectrum-assetcard-header-content-letter-spacing)`, if not set.", + "control": "text", + "category": "Modifier" + }, + "mod-assetcard-content-margin-block-start": { + "value": "var(--spectrum-assetcard-content-margin-block-start)", + "description": "Used by `.spectrum-AssetCard-content`.
Defaults to `var(--spectrum-assetcard-content-margin-block-start)`, if not set.", + "control": "text", + "category": "Modifier" + }, + "mod-assetcard-content-text-color": { + "value": "var(--spectrum-assetcard-content-text-color)", + "description": "Used by `.spectrum-AssetCard-content`.
Defaults to `var(--spectrum-assetcard-content-text-color)`, if not set.", + "control": "color", + "category": "Modifier" + }, + "mod-assetcard-content-font-family": { + "value": "var(--spectrum-assetcard-content-font-family)", + "description": "Used by `.spectrum-AssetCard-content`.
Defaults to `var(--spectrum-assetcard-content-font-family)`, if not set.", + "control": "text", + "category": "Modifier" + }, + "mod-assetcard-content-font-size": { + "value": "var(--spectrum-assetcard-content-font-size)", + "description": "Used by `.spectrum-AssetCard-content`.
Defaults to `var(--spectrum-assetcard-content-font-size)`, if not set.", + "control": "text", + "category": "Modifier" + }, + "mod-assetcard-content-font-weight": { + "value": "var(--spectrum-assetcard-content-font-weight)", + "description": "Used by `.spectrum-AssetCard-content`.
Defaults to `var(--spectrum-assetcard-content-font-weight)`, if not set.", + "control": "text", + "category": "Modifier" + }, + "mod-assetcard-content-line-height": { + "value": "var(--spectrum-assetcard-content-line-height)", + "description": "Used by `.spectrum-AssetCard-content`.
Defaults to `var(--spectrum-assetcard-content-line-height)`, if not set.", + "control": "text", + "category": "Modifier" + }, + "mod-assetcard-content-font-style": { + "value": "var(--spectrum-assetcard-content-font-style)", + "description": "Used by `.spectrum-AssetCard-content`.
Defaults to `var(--spectrum-assetcard-content-font-style)`, if not set.", + "control": "text", + "category": "Modifier" + }, + "mod-assetcard-content-letter-spacing": { + "value": "var(--spectrum-assetcard-content-letter-spacing)", + "description": "Used by `.spectrum-AssetCard-content`.
Defaults to `var(--spectrum-assetcard-content-letter-spacing)`, if not set.", + "control": "text", + "category": "Modifier" + }, + "mod-assetcard-selectionindicator-margin": { + "value": "var(--spectrum-assetcard-selectionindicator-margin)", + "description": "Used by `.spectrum-AssetCard-selectionIndicator`.
Defaults to `var(--spectrum-assetcard-selectionindicator-margin)`, if not set.", + "control": "text", + "category": "Modifier" + }, + "mod-assetcard-selectionindicator-size": { + "value": "var(--spectrum-assetcard-selectionindicator-size)", + "description": "Used by `.spectrum-AssetCard-selectionIndicator`.
Defaults to `var(--spectrum-assetcard-selectionindicator-size)`, if not set.", + "control": "text", + "category": "Modifier" + }, + "mod-assetcard-selectionindicator-border-radius": { + "value": "var(--spectrum-assetcard-selectionindicator-border-radius)", + "description": "Used by `.spectrum-AssetCard-selectionIndicator`.
Defaults to `var(--spectrum-assetcard-selectionindicator-border-radius)`, if not set.", + "control": "text", + "category": "Modifier" + }, + "mod-assetcard-selectionindicator-color": { + "value": "var(--spectrum-assetcard-selectionindicator-color)", + "description": "Used by `.spectrum-AssetCard-selectionIndicator`.
Defaults to `var(--spectrum-assetcard-selectionindicator-color)`, if not set.", + "control": "color", + "category": "Modifier" + }, + "mod-assetcard-selectionindicator-font-weight": { + "value": "var(--spectrum-assetcard-selectionindicator-font-weight)", + "description": "Used by `.spectrum-AssetCard-selectionIndicator`.
Defaults to `var(--spectrum-assetcard-selectionindicator-font-weight)`, if not set.", + "control": "text", + "category": "Modifier" + }, + "mod-assetcard-selectionindicator-font-size": { + "value": "var(--spectrum-assetcard-selectionindicator-font-size)", + "description": "Used by `.spectrum-AssetCard-selectionIndicator`.
Defaults to `var(--spectrum-assetcard-selectionindicator-font-size)`, if not set.", + "control": "text", + "category": "Modifier" + }, + "mod-assetcard-border-color-selected": { + "value": "var(--spectrum-assetcard-border-color-selected)", + "description": "Used by `.spectrum-AssetCard.is-drop-target .spectrum-AssetCard-assetContainer:after, .spectrum-AssetCard.is-selected .spectrum-AssetCard-assetContainer:after`.
Defaults to `var(--spectrum-assetcard-border-color-selected)`, if not set.", + "control": "color", + "category": "Modifier" + }, + "mod-assetcard-overlay-background-color": { + "value": "var(--spectrum-assetcard-overlay-background-color)", + "description": "Used by `.spectrum-AssetCard.is-drop-target .spectrum-AssetCard-selectionOverlay, .spectrum-AssetCard.is-selected .spectrum-AssetCard-selectionOverlay`.
Defaults to `var(--spectrum-assetcard-overlay-background-color)`, if not set.", + "control": "color", + "category": "Modifier" + }, + "mod-assectcard-border-color-selected-down": { + "value": "var(--spectrum-assetcard-border-color-selected-down)", + "description": "Used by `.spectrum-AssetCard.is-drop-target:active .spectrum-AssetCard-assetContainer:after, .spectrum-AssetCard.is-selected:active .spectrum-AssetCard-assetContainer:after`.
Defaults to `var(--spectrum-assetcard-border-color-selected-down)`, if not set.", + "control": "color", + "category": "Modifier" + }, + "mod-assetcard-selectionindicator-background-color-default": { + "value": "var(--spectrum-assetcard-selectionindicator-background-color-default)", + "description": "Used by `.spectrum-AssetCard--checkboxSelection .spectrum-AssetCard-selectionIndicator`.
Defaults to `var(--spectrum-assetcard-selectionindicator-background-color-default)`, if not set.", + "control": "color", + "category": "Modifier" + }, + "mod-assetcard-border-color-selected-hover": { + "value": "var(--spectrum-assetcard-border-color-selected-hover)", + "description": "Used by `.spectrum-AssetCard.is-drop-target:hover .spectrum-AssetCard-assetContainer:after, .spectrum-AssetCard.is-selected:hover .spectrum-AssetCard-assetContainer:after`.
Defaults to `var(--spectrum-assetcard-border-color-selected-hover)`, if not set.", + "control": "color", + "category": "Modifier" + }, + "mod-assetcard-selectionindicator-background-color-ordered": { + "value": "var(--spectrum-assetcard-selectionindicator-background-color-ordered)", + "description": "Used by `.spectrum-AssetCard--orderedSelection .spectrum-AssetCard-selectionIndicator`.
Defaults to `var(--spectrum-assetcard-selectionindicator-background-color-ordered)`, if not set.", + "control": "color", + "category": "Modifier" + } + }, + "component": { + "spectrum-assetcard-asset-size": { + "description": "Defined in `.spectrum-AssetCard`.
Used by `.spectrum-AssetCard`, `.spectrum-AssetCard-assetContainer`.", + "control": "text", + "category": "Component" + }, + "spectrum-assetcard-asset-animation-duration": { + "description": "Defined in `.spectrum-AssetCard`.
Used by `.spectrum-AssetCard-assetContainer`, `.spectrum-AssetCard-assetContainer:before`, `.spectrum-AssetCard-asset`, `.spectrum-AssetCard-selectionOverlay`, `.spectrum-AssetCard-selectionIndicator`.", + "control": "text", + "category": "Component" + }, + "spectrum-assetcard-asset-container-border-size": { + "description": "Defined in `.spectrum-AssetCard`.
Used by `.spectrum-AssetCard-assetContainer:after`.", + "control": "text", + "category": "Component" + }, + "spectrum-assetcard-header-margin-block-start": { + "description": "Defined in `.spectrum-AssetCard`.
Used by `.spectrum-AssetCard-header`.", + "control": "text", + "category": "Component" + }, + "spectrum-assetcard-border-radius": { + "description": "Defined in `.spectrum-AssetCard`.
Used by `.spectrum-AssetCard-assetContainer`, `.spectrum-AssetCard-asset, .spectrum-AssetCard-assetContainer:after`, `.spectrum-AssetCard-selectionOverlay`.", + "control": "text", + "category": "Component" + }, + "spectrum-assetcard-border-color": { + "description": "Defined in `.spectrum-AssetCard`.
Used by `.spectrum-AssetCard-assetContainer:after`.", + "control": "color", + "category": "Component" + }, + "spectrum-assetcard-border-color-hover": { + "description": "Defined in `.spectrum-AssetCard`.
Used by `.spectrum-AssetCard.is-selected .spectrum-AssetCard-assetContainer:after, .spectrum-AssetCard.is-selected .spectrum-Checkbox-box:before, .spectrum-AssetCard:focus-visible .spectrum-AssetCard-assetContainer:after, .spectrum-AssetCard:focus-visible .spectrum-Checkbox-box:before`, `.spectrum-AssetCard:hover .spectrum-AssetCard-assetContainer:after, .spectrum-AssetCard:hover .spectrum-Checkbox-box:before`.", + "control": "color", + "category": "Component" + }, + "spectrum-assetcard-border-color-down": { + "description": "Defined in `.spectrum-AssetCard`.
Used by `.spectrum-AssetCard:active .spectrum-AssetCard-assetContainer:after`.", + "control": "color", + "category": "Component" + }, + "spectrum-assetcard-focus-ring-gap": { + "description": "Defined in `.spectrum-AssetCard`.
Used by `.spectrum-AssetCard-assetContainer:before`.", + "control": "text", + "category": "Component" + }, + "spectrum-assetcard-focus-indicator-thickness": { + "description": "Defined in `.spectrum-AssetCard`.
Used by `.spectrum-AssetCard-assetContainer:before`.", + "control": "text", + "category": "Component" + }, + "spectrum-assetcard-selectionindicator-size": { + "description": "Defined in `.spectrum-AssetCard`.
Used by `.spectrum-AssetCard-selectionIndicator`.", + "control": "text", + "category": "Component" + }, + "spectrum-assetcard-selectionindicator-border-radius": { + "description": "Defined in `.spectrum-AssetCard`.
Used by `.spectrum-AssetCard-selectionIndicator`.", + "control": "text", + "category": "Component" + }, + "spectrum-assetcard-selectionindicator-offset-y": { + "description": "Defined in `.spectrum-AssetCard`.
Used by `.spectrum-AssetCard-selectionIndicator`.", + "control": "text", + "category": "Component" + }, + "spectrum-assetcard-selectionindicator-blur": { + "description": "Defined in `.spectrum-AssetCard`.
Used by `.spectrum-AssetCard-selectionIndicator`.", + "control": "text", + "category": "Component" + }, + "spectrum-assetcard-selectionindicator-color": { + "description": "Defined in `.spectrum-AssetCard`.
Used by `.spectrum-AssetCard-selectionIndicator`.", + "control": "color", + "category": "Component" + }, + "spectrum-assetcard-selectionindicator-font-weight": { + "description": "Defined in `.spectrum-AssetCard`.
Used by `.spectrum-AssetCard-selectionIndicator`.", + "control": "text", + "category": "Component" + }, + "spectrum-assetcard-selectionindicator-font-size": { + "description": "Defined in `.spectrum-AssetCard`.
Used by `.spectrum-AssetCard-selectionIndicator`.", + "control": "text", + "category": "Component" + }, + "spectrum-assetcard-title-text-color": { + "description": "Defined in `.spectrum-AssetCard`.
Used by `.spectrum-AssetCard-title`.", + "control": "color", + "category": "Component" + }, + "spectrum-assetcard-title-font-family": { + "description": "Defined in `.spectrum-AssetCard`, `.spectrum-AssetCard:lang(ja), .spectrum-AssetCard:lang(ko), .spectrum-AssetCard:lang(zh)`.
Used by `.spectrum-AssetCard-title`.", + "control": "text", + "category": "Component" + }, + "spectrum-assetcard-title-font-weight": { + "description": "Defined in `.spectrum-AssetCard`, `.spectrum-AssetCard:lang(ja), .spectrum-AssetCard:lang(ko), .spectrum-AssetCard:lang(zh)`.
Used by `.spectrum-AssetCard-title`.", + "control": "text", + "category": "Component" + }, + "spectrum-assetcard-title-font-style": { + "description": "Defined in `.spectrum-AssetCard`, `.spectrum-AssetCard:lang(ja), .spectrum-AssetCard:lang(ko), .spectrum-AssetCard:lang(zh)`.
Used by `.spectrum-AssetCard-title`.", + "control": "text", + "category": "Component" + }, + "spectrum-assetcard-title-line-height": { + "description": "Defined in `.spectrum-AssetCard`, `.spectrum-AssetCard:lang(ja), .spectrum-AssetCard:lang(ko), .spectrum-AssetCard:lang(zh)`.
Used by `.spectrum-AssetCard-title`.", + "control": "text", + "category": "Component" + }, + "spectrum-assetcard-title-letter-spacing": { + "description": "Defined in `.spectrum-AssetCard`, `.spectrum-AssetCard:lang(ja), .spectrum-AssetCard:lang(ko), .spectrum-AssetCard:lang(zh)`.
Used by `.spectrum-AssetCard-title`.", + "control": "text", + "category": "Component" + }, + "spectrum-assetcard-header-content-text-color": { + "description": "Defined in `.spectrum-AssetCard`.
Used by `.spectrum-AssetCard-headerContent`.", + "control": "color", + "category": "Component" + }, + "spectrum-assetcard-header-content-font-family": { + "description": "Defined in `.spectrum-AssetCard`, `.spectrum-AssetCard:lang(ja), .spectrum-AssetCard:lang(ko), .spectrum-AssetCard:lang(zh)`.
Used by `.spectrum-AssetCard-headerContent`.", + "control": "text", + "category": "Component" + }, + "spectrum-assetcard-header-content-font-weight": { + "description": "Defined in `.spectrum-AssetCard`, `.spectrum-AssetCard:lang(ja), .spectrum-AssetCard:lang(ko), .spectrum-AssetCard:lang(zh)`.
Used by `.spectrum-AssetCard-headerContent`.", + "control": "text", + "category": "Component" + }, + "spectrum-assetcard-header-content-font-style": { + "description": "Defined in `.spectrum-AssetCard`, `.spectrum-AssetCard:lang(ja), .spectrum-AssetCard:lang(ko), .spectrum-AssetCard:lang(zh)`.
Used by `.spectrum-AssetCard-headerContent`.", + "control": "text", + "category": "Component" + }, + "spectrum-assetcard-header-content-line-height": { + "description": "Defined in `.spectrum-AssetCard`, `.spectrum-AssetCard:lang(ja), .spectrum-AssetCard:lang(ko), .spectrum-AssetCard:lang(zh)`.
Used by `.spectrum-AssetCard-headerContent`.", + "control": "text", + "category": "Component" + }, + "spectrum-assetcard-header-content-letter-spacing": { + "description": "Defined in `.spectrum-AssetCard`, `.spectrum-AssetCard:lang(ja), .spectrum-AssetCard:lang(ko), .spectrum-AssetCard:lang(zh)`.
Used by `.spectrum-AssetCard-headerContent`.", + "control": "text", + "category": "Component" + }, + "spectrum-assetcard-content-text-color": { + "description": "Defined in `.spectrum-AssetCard`.
Used by `.spectrum-AssetCard-content`.", + "control": "color", + "category": "Component" + }, + "spectrum-assetcard-content-font-family": { + "description": "Defined in `.spectrum-AssetCard`, `.spectrum-AssetCard:lang(ja), .spectrum-AssetCard:lang(ko), .spectrum-AssetCard:lang(zh)`.
Used by `.spectrum-AssetCard-content`.", + "control": "text", + "category": "Component" + }, + "spectrum-assetcard-content-font-weight": { + "description": "Defined in `.spectrum-AssetCard`, `.spectrum-AssetCard:lang(ja), .spectrum-AssetCard:lang(ko), .spectrum-AssetCard:lang(zh)`.
Used by `.spectrum-AssetCard-content`.", + "control": "text", + "category": "Component" + }, + "spectrum-assetcard-content-font-style": { + "description": "Defined in `.spectrum-AssetCard`, `.spectrum-AssetCard:lang(ja), .spectrum-AssetCard:lang(ko), .spectrum-AssetCard:lang(zh)`.
Used by `.spectrum-AssetCard-content`.", + "control": "text", + "category": "Component" + }, + "spectrum-assetcard-content-line-height": { + "description": "Defined in `.spectrum-AssetCard`, `.spectrum-AssetCard:lang(ja), .spectrum-AssetCard:lang(ko), .spectrum-AssetCard:lang(zh)`.
Used by `.spectrum-AssetCard-content`.", + "control": "text", + "category": "Component" + }, + "spectrum-assetcard-content-letter-spacing": { + "description": "Defined in `.spectrum-AssetCard`, `.spectrum-AssetCard:lang(ja), .spectrum-AssetCard:lang(ko), .spectrum-AssetCard:lang(zh)`.
Used by `.spectrum-AssetCard-content`.", + "control": "text", + "category": "Component" + }, + "spectrum-assetcard-content-margin-block-start": { + "description": "Defined in `.spectrum-AssetCard`.
Used by `.spectrum-AssetCard-content`.", + "control": "text", + "category": "Component" + }, + "spectrum-assetcard-title-font-size": { + "description": "Defined in `.spectrum-AssetCard:lang(ja), .spectrum-AssetCard:lang(ko), .spectrum-AssetCard:lang(zh)`.
Used by `.spectrum-AssetCard-title`.", + "control": "text", + "category": "Component" + }, + "spectrum-assetcard-background-color": { + "description": "Defined in `.spectrum-AssetCard`.
Used by `.spectrum-AssetCard-assetContainer`.", + "control": "color", + "category": "Component" + }, + "spectrum-assetcard-focus-ring-border-radius": { + "description": "Used by `.spectrum-AssetCard-assetContainer:before`.", + "control": "text", + "category": "Component" + }, + "spectrum-assetcard-header-content-font-size": { + "description": "Used by `.spectrum-AssetCard-headerContent`.", + "control": "text", + "category": "Component" + }, + "spectrum-assetcard-content-font-size": { + "description": "Used by `.spectrum-AssetCard-content`.", + "control": "text", + "category": "Component" + }, + "spectrum-assetcard-selectionindicator-margin": { + "description": "Used by `.spectrum-AssetCard-selectionIndicator`.", + "control": "text", + "category": "Component" + }, + "spectrum-assetcard-selectionindicator-box-shadow-color": { + "description": "Defined in `.spectrum-AssetCard`.
Used by `.spectrum-AssetCard-selectionIndicator`.", + "control": "color", + "category": "Component" + }, + "spectrum-assetcard-border-color-selected": { + "description": "Used by `.spectrum-AssetCard.is-drop-target .spectrum-AssetCard-assetContainer:after, .spectrum-AssetCard.is-selected .spectrum-AssetCard-assetContainer:after`.", + "control": "color", + "category": "Component" + }, + "spectrum-assetcard-overlay-background-color": { + "description": "Defined in `.spectrum-AssetCard`.
Used by `.spectrum-AssetCard.is-drop-target .spectrum-AssetCard-selectionOverlay, .spectrum-AssetCard.is-selected .spectrum-AssetCard-selectionOverlay`.", + "control": "color", + "category": "Component" + }, + "spectrum-assetcard-border-color-selected-down": { + "description": "Used by `.spectrum-AssetCard.is-drop-target:active .spectrum-AssetCard-assetContainer:after, .spectrum-AssetCard.is-selected:active .spectrum-AssetCard-assetContainer:after`.", + "control": "color", + "category": "Component" + }, + "spectrum-assetcard-selectionindicator-background-color-default": { + "description": "Defined in `.spectrum-AssetCard`.
Used by `.spectrum-AssetCard--checkboxSelection .spectrum-AssetCard-selectionIndicator`.", + "control": "color", + "category": "Component" + }, + "spectrum-assetcard-border-color-selected-hover": { + "description": "Used by `.spectrum-AssetCard.is-drop-target:hover .spectrum-AssetCard-assetContainer:after, .spectrum-AssetCard.is-selected:hover .spectrum-AssetCard-assetContainer:after`.", + "control": "color", + "category": "Component" + }, + "spectrum-assetcard-selectionindicator-background-color-ordered": { + "description": "Used by `.spectrum-AssetCard--orderedSelection .spectrum-AssetCard-selectionIndicator`.", + "control": "color", + "category": "Component" + } + }, + "global": { + "spectrum-gray-75": { + "value": "light-dark(rgb(243, 243, 243), rgb(34, 34, 34))", + "description": "Used by `--system-asset-card-background-color`.", + "control": "text", + "category": "Global" + }, + "spectrum-gray-75-rgb": { + "description": "Used by `--system-asset-card-selectionindicator-background-color-default`.", + "control": "text", + "category": "Global" + }, + "spectrum-transparent-black-300": { + "value": "light-dark(rgba(0, 0, 0, 0.15), rgba(0, 0, 0, 0.15))", + "description": "Used by `--system-asset-card-selectionindicator-box-shadow-color`.", + "control": "text", + "category": "Global" + }, + "spectrum-animation-duration-100": { + "description": "Used by `--spectrum-assetcard-asset-animation-duration`.", + "control": "text", + "category": "Global" + }, + "spectrum-spacing-300": { + "value": "16px", + "description": "Used by `--spectrum-assetcard-header-margin-block-start`.", + "control": "text", + "category": "Global" + }, + "spectrum-corner-radius-100": { + "value": "8px", + "description": "Used by `--spectrum-assetcard-border-radius`, `--spectrum-assetcard-selectionindicator-border-radius`.", + "control": "text", + "category": "Global" + }, + "spectrum-gray-500": { + "value": "light-dark(rgb(143, 143, 143), rgb(109, 109, 109))", + "description": "Used by `--spectrum-assetcard-border-color-hover`.", + "control": "text", + "category": "Global" + }, + "spectrum-gray-600": { + "value": "light-dark(rgb(113, 113, 113), rgb(138, 138, 138))", + "description": "Used by `--spectrum-assetcard-border-color-down`.", + "control": "text", + "category": "Global" + }, + "spectrum-focus-indicator-thickness": { + "value": "2px", + "description": "Used by `--spectrum-assetcard-focus-indicator-thickness`.", + "control": "text", + "category": "Global" + }, + "spectrum-card-selection-background-size": { + "value": "40px", + "description": "Used by `--spectrum-assetcard-selectionindicator-size`.", + "control": "text", + "category": "Global" + }, + "spectrum-white": { + "value": "light-dark(rgb(255, 255, 255), rgb(255, 255, 255))", + "description": "Used by `--spectrum-assetcard-selectionindicator-color`.", + "control": "text", + "category": "Global" + }, + "spectrum-bold-font-weight": { + "value": "700", + "description": "Used by `--spectrum-assetcard-selectionindicator-font-weight`.", + "control": "text", + "category": "Global" + }, + "spectrum-font-size-400": { + "value": "20px", + "description": "Used by `--spectrum-assetcard-selectionindicator-font-size`.", + "control": "text", + "category": "Global" + }, + "spectrum-gray-900": { + "value": "light-dark(rgb(19, 19, 19), rgb(242, 242, 242))", + "description": "Used by `--spectrum-assetcard-title-text-color`, `--spectrum-assetcard-header-content-text-color`.", + "control": "text", + "category": "Global" + }, + "spectrum-sans-font-family-stack": { + "description": "Used by `--spectrum-assetcard-title-font-family`, `--spectrum-assetcard-header-content-font-family`, `--spectrum-assetcard-content-font-family`.", + "control": "text", + "category": "Global" + }, + "spectrum-heading-sans-serif-font-weight": { + "value": "700", + "description": "Used by `--spectrum-assetcard-title-font-weight`.", + "control": "text", + "category": "Global" + }, + "spectrum-default-font-style": { + "value": "normal", + "description": "Used by `--spectrum-assetcard-title-font-style`, `--spectrum-assetcard-header-content-font-style`, `--spectrum-assetcard-content-font-style`.", + "control": "text", + "category": "Global" + }, + "spectrum-line-height-100": { + "value": "1.3", + "description": "Used by `--spectrum-assetcard-title-line-height`.", + "control": "text", + "category": "Global" + }, + "spectrum-body-sans-serif-font-weight": { + "value": "400", + "description": "Used by `--spectrum-assetcard-header-content-font-weight`, `--spectrum-assetcard-content-font-weight`.", + "control": "text", + "category": "Global" + }, + "spectrum-line-height-200": { + "value": "1.5", + "description": "Used by `--spectrum-assetcard-header-content-line-height`, `--spectrum-assetcard-content-line-height`.", + "control": "text", + "category": "Global" + }, + "spectrum-gray-700": { + "value": "light-dark(rgb(80, 80, 80), rgb(175, 175, 175))", + "description": "Used by `--spectrum-assetcard-content-text-color`.", + "control": "text", + "category": "Global" + }, + "spectrum-spacing-75": { + "value": "4px", + "description": "Used by `--spectrum-assetcard-content-margin-block-start`.", + "control": "text", + "category": "Global" + }, + "spectrum-cjk-font-family-stack": { + "description": "Used by `--spectrum-assetcard-title-font-family`, `--spectrum-assetcard-header-content-font-family`, `--spectrum-assetcard-content-font-family`.", + "control": "text", + "category": "Global" + }, + "spectrum-heading-cjk-font-style": { + "value": "normal", + "description": "Used by `--spectrum-assetcard-title-font-style`.", + "control": "text", + "category": "Global" + }, + "spectrum-heading-cjk-font-weight": { + "value": "800", + "description": "Used by `--spectrum-assetcard-title-font-weight`.", + "control": "text", + "category": "Global" + }, + "spectrum-heading-cjk-size-xs": { + "value": "var(--spectrum-font-size-200)", + "description": "Used by `--spectrum-assetcard-title-font-size`.", + "control": "text", + "category": "Global" + }, + "spectrum-heading-cjk-line-height": { + "value": "1.5", + "description": "Used by `--spectrum-assetcard-title-line-height`.", + "control": "text", + "category": "Global" + }, + "spectrum-cjk-letter-spacing": { + "value": "0.05em", + "description": "Used by `--spectrum-assetcard-title-letter-spacing`, `--spectrum-assetcard-header-content-letter-spacing`, `--spectrum-assetcard-content-letter-spacing`.", + "control": "text", + "category": "Global" + }, + "spectrum-body-cjk-font-weight": { + "value": "400", + "description": "Used by `--spectrum-assetcard-header-content-font-weight`, `--spectrum-assetcard-content-font-weight`.", + "control": "text", + "category": "Global" + }, + "spectrum-body-cjk-line-height": { + "value": "1.7", + "description": "Used by `--spectrum-assetcard-header-content-line-height`, `--spectrum-assetcard-content-line-height`.", + "control": "text", + "category": "Global" + }, + "spectrum-body-cjk-font-style": { + "value": "normal", + "description": "Used by `--spectrum-assetcard-header-content-font-style`, `--spectrum-assetcard-content-font-style`.", + "control": "text", + "category": "Global" + }, + "spectrum-assestcard-focus-indicator-color": { + "description": "Used by `.spectrum-AssetCard-assetContainer:before`.", + "control": "color", + "category": "Global" + } + }, + "system-theme": { + "system-asset-card-overlay-background-color": { + "description": "Defined in `.spectrum`.
Used by `--spectrum-assetcard-overlay-background-color`.", + "control": "color" + }, + "system-asset-card-background-color": { + "description": "Defined in `.spectrum`.
Used by `--spectrum-assetcard-background-color`.", + "control": "color" + }, + "system-asset-card-selectionindicator-background-color-default": { + "description": "Defined in `.spectrum`.
Used by `--spectrum-assetcard-selectionindicator-background-color-default`.", + "control": "color" + }, + "system-asset-card-selectionindicator-box-shadow-color": { + "description": "Defined in `.spectrum`.
Used by `--spectrum-assetcard-selectionindicator-box-shadow-color`.", + "control": "color" + } + }, + "passthroughs": {}, + "high-contrast": { + "highcontrast-assetcard-border-color-hover": { + "value": "var(--mod-assetcard-border-color-hover, var(--spectrum-assetcard-border-color-hover))", + "description": "Defined in `.spectrum-AssetCard`.
Used by `.spectrum-AssetCard.is-selected .spectrum-AssetCard-assetContainer:after, .spectrum-AssetCard.is-selected .spectrum-Checkbox-box:before, .spectrum-AssetCard:focus-visible .spectrum-AssetCard-assetContainer:after, .spectrum-AssetCard:focus-visible .spectrum-Checkbox-box:before`, `.spectrum-AssetCard:hover .spectrum-AssetCard-assetContainer:after, .spectrum-AssetCard:hover .spectrum-Checkbox-box:before`.
Defaults to `var(--mod-assetcard-border-color-hover, var(--spectrum-assetcard-border-color-hover))`, if not set.", + "control": "color" + }, + "highcontrast-assetcard-selectionindicator-color": { + "value": "var(--mod-assetcard-selectionindicator-color, var(--spectrum-assetcard-selectionindicator-color))", + "description": "Defined in `.spectrum-AssetCard`.
Used by `.spectrum-AssetCard-selectionIndicator`.
Defaults to `var(--mod-assetcard-selectionindicator-color, var(--spectrum-assetcard-selectionindicator-color))`, if not set.", + "control": "color" + }, + "highcontrast-assetcard-border-color-selected": { + "value": "var(--mod-assetcard-border-color-selected, var(--spectrum-assetcard-border-color-selected))", + "description": "Defined in `.spectrum-AssetCard`.
Used by `.spectrum-AssetCard.is-drop-target .spectrum-AssetCard-assetContainer:after, .spectrum-AssetCard.is-selected .spectrum-AssetCard-assetContainer:after`.
Defaults to `var(--mod-assetcard-border-color-selected, var(--spectrum-assetcard-border-color-selected))`, if not set.", + "control": "color" + }, + "highcontrast-assectcard-border-color-selected-down": { + "value": "var(--mod-assectcard-border-color-selected-down, var(--spectrum-assetcard-border-color-selected-down))", + "description": "Defined in `.spectrum-AssetCard`.
Used by `.spectrum-AssetCard.is-drop-target:active .spectrum-AssetCard-assetContainer:after, .spectrum-AssetCard.is-selected:active .spectrum-AssetCard-assetContainer:after`.
Defaults to `var(--mod-assectcard-border-color-selected-down, var(--spectrum-assetcard-border-color-selected-down))`, if not set.", + "control": "color" + }, + "highcontrast-assetcard-border-color-selected-hover": { + "value": "var(--mod-assetcard-border-color-selected-hover, var(--spectrum-assetcard-border-color-selected-hover))", + "description": "Defined in `.spectrum-AssetCard`.
Used by `.spectrum-AssetCard.is-drop-target:hover .spectrum-AssetCard-assetContainer:after, .spectrum-AssetCard.is-selected:hover .spectrum-AssetCard-assetContainer:after`.
Defaults to `var(--mod-assetcard-border-color-selected-hover, var(--spectrum-assetcard-border-color-selected-hover))`, if not set.", + "control": "color" + }, + "highcontrast-assetcard-selectionindicator-background-color-ordered": { + "value": "var(--mod-assetcard-selectionindicator-background-color-ordered, var(--spectrum-assetcard-selectionindicator-background-color-ordered))", + "description": "Defined in `.spectrum-AssetCard`.
Used by `.spectrum-AssetCard--orderedSelection .spectrum-AssetCard-selectionIndicator`.
Defaults to `var(--mod-assetcard-selectionindicator-background-color-ordered, var(--spectrum-assetcard-selectionindicator-background-color-ordered))`, if not set.", + "control": "color" + } + } } diff --git a/components/assetcard/stories/assetcard.stories.js b/components/assetcard/stories/assetcard.stories.js index 2e917fbc25c..17b674a4f60 100644 --- a/components/assetcard/stories/assetcard.stories.js +++ b/components/assetcard/stories/assetcard.stories.js @@ -1,11 +1,13 @@ import { default as Checkbox } from "@spectrum-css/checkbox/stories/checkbox.stories.js"; import { disableDefaultModes } from "@spectrum-css/preview/modes"; import { isFocused, isSelected } from "@spectrum-css/preview/types"; -import metadata from "../dist/metadata.json"; -import packageJson from "../package.json"; import { AssetCardGroup } from "./assetcard.test.js"; import { Template } from "./template.js"; +// Local assets to render the component styles and structure +import metadata from "../dist/metadata.json"; +import packageJson from "../package.json"; + /** * The asset card component allows users to select and manage assets and their metadata in a grid. * @@ -92,6 +94,7 @@ export default { }, packageJson, metadata, + cssprops: metadata.modifiers, }, }; diff --git a/components/assetcard/stories/template.js b/components/assetcard/stories/template.js index 864fcd951b7..6620830bba5 100644 --- a/components/assetcard/stories/template.js +++ b/components/assetcard/stories/template.js @@ -14,6 +14,7 @@ import "../themes/express.css"; export const Template = ({ rootClass = "spectrum-AssetCard", + id = getRandomId("asset-card"), image, exampleImage, title, @@ -25,7 +26,6 @@ export const Template = ({ isDropTarget = false, customClasses = [], customStyles = {}, - id = getRandomId("assetcard"), testId, } = {}, context = {}) => { const { updateArgs } = context; diff --git a/components/assetlist/dist/metadata.json b/components/assetlist/dist/metadata.json index 011c28ee314..0f7495eea63 100644 --- a/components/assetlist/dist/metadata.json +++ b/components/assetlist/dist/metadata.json @@ -4,6 +4,12 @@ ".spectrum-AssetList", ".spectrum-AssetList-item", ".spectrum-AssetList-item .spectrum-AssetList-itemThumbnail", + ".spectrum-AssetList-item:before", + ".spectrum-AssetList-item:focus .spectrum-Checkbox", + ".spectrum-AssetList-item:focus-within:focus-visible", + ".spectrum-AssetList-item:focus-within:focus-visible:before", + ".spectrum-AssetList-item:hover", + ".spectrum-AssetList-item:hover .spectrum-Checkbox", ".spectrum-AssetList-item.is-branch .spectrum-AssetList-itemChildIndicator", ".spectrum-AssetList-item.is-focused:focus-within", ".spectrum-AssetList-item.is-focused:focus-within:before", @@ -15,86 +21,344 @@ ".spectrum-AssetList-item.is-selected .spectrum-Checkbox", ".spectrum-AssetList-item.is-selected:focus", ".spectrum-AssetList-item.is-selected:hover", - ".spectrum-AssetList-item:before", - ".spectrum-AssetList-item:focus .spectrum-Checkbox", - ".spectrum-AssetList-item:focus-within:focus-visible", - ".spectrum-AssetList-item:focus-within:focus-visible:before", - ".spectrum-AssetList-item:hover", - ".spectrum-AssetList-item:hover .spectrum-Checkbox", ".spectrum-AssetList-itemChildIndicator", ".spectrum-AssetList-itemLabel", ".spectrum-AssetList-itemSelector", ".spectrum-AssetList:dir(rtl)", "[dir=\"rtl\"] .spectrum-AssetList" ], - "modifiers": [ - "--mod-assetlist-border-color-key-focus", - "--mod-assetlist-child-indicator-animation", - "--mod-assetlist-item-animation", - "--mod-assetlist-item-background-color-down", - "--mod-assetlist-item-background-color-hover", - "--mod-assetlist-item-background-color-selected", - "--mod-assetlist-item-background-color-selected-hover", - "--mod-assetlist-item-border-radius", - "--mod-assetlist-item-font-size", - "--mod-assetlist-item-font-weight", - "--mod-assetlist-item-height", - "--mod-assetlist-item-label-padding-inline-start", - "--mod-assetlist-item-margin-bottom", - "--mod-assetlist-item-padding-inline-end", - "--mod-assetlist-item-padding-inline-start", - "--mod-assetlist-label-color", - "--mod-assetlist-thumbnail-margin-left", - "--mod-assetlist-thumbnail-width", - "--mod-assetlist-thumnail-height", - "--mod-assetlist-width" - ], - "component": [ - "--spectrum-assetlist-border-color-key-focus", - "--spectrum-assetlist-child-indicator-animation", - "--spectrum-assetlist-item-animation", - "--spectrum-assetlist-item-background-color-down", - "--spectrum-assetlist-item-background-color-hover", - "--spectrum-assetlist-item-background-color-selected", - "--spectrum-assetlist-item-background-color-selected-hover", - "--spectrum-assetlist-item-border-radius", - "--spectrum-assetlist-item-font-size", - "--spectrum-assetlist-item-font-weight", - "--spectrum-assetlist-item-height", - "--spectrum-assetlist-item-label-padding-inline-start", - "--spectrum-assetlist-item-margin-block-end", - "--spectrum-assetlist-item-padding-inline-end", - "--spectrum-assetlist-item-padding-inline-start", - "--spectrum-assetlist-label-color", - "--spectrum-assetlist-thumbnail-height", - "--spectrum-assetlist-thumbnail-margin-inline-start", - "--spectrum-assetlist-thumbnail-width", - "--spectrum-assetlist-width" - ], - "global": [ - "--spectrum-animation-duration-100", - "--spectrum-font-size-100", - "--spectrum-gray-100", - "--spectrum-gray-200", - "--spectrum-logical-rotation", - "--spectrum-neutral-content-color-default", - "--spectrum-regular-font-weight", - "--spectrum-spacing-100", - "--spectrum-spacing-300", - "--spectrum-spacing-400", - "--spectrum-spacing-600", - "--spectrum-spacing-75" - ], - "system-theme": [ - "--system-asset-list-item-background-color-down", - "--system-asset-list-item-background-color-hover" - ], - "passthroughs": [], - "high-contrast": [ - "--highcontrast-assetlist-border-color-key-focus", - "--highcontrast-assetlist-item-background-color-hover", - "--highcontrast-assetlist-item-background-color-selected", - "--highcontrast-assetlist-item-background-color-selected-hover", - "--highcontrast-assetlist-label-color" - ] + "modifiers": { + "mod-assetlist-label-color": { + "value": "var(--spectrum-assetlist-label-color)", + "description": "Used by `.spectrum-AssetList-item`.
Defaults to `var(--spectrum-assetlist-label-color)`, if not set.", + "control": "color", + "category": "Modifier" + }, + "mod-assetlist-width": { + "value": "var(--spectrum-assetlist-width)", + "description": "Used by `.spectrum-AssetList-item`.
Defaults to `var(--spectrum-assetlist-width)`, if not set.", + "control": "text", + "category": "Modifier" + }, + "mod-assetlist-item-padding-inline-start": { + "value": "var(--spectrum-assetlist-item-padding-inline-start)", + "description": "Used by `.spectrum-AssetList-item`.
Defaults to `var(--spectrum-assetlist-item-padding-inline-start)`, if not set.", + "control": "text", + "category": "Modifier" + }, + "mod-assetlist-item-padding-inline-end": { + "value": "var(--spectrum-assetlist-item-padding-inline-end)", + "description": "Used by `.spectrum-AssetList-item`.
Defaults to `var(--spectrum-assetlist-item-padding-inline-end)`, if not set.", + "control": "text", + "category": "Modifier" + }, + "mod-assetlist-item-margin-bottom": { + "value": "var(--spectrum-assetlist-item-margin-block-end)", + "description": "Used by `.spectrum-AssetList-item`.
Defaults to `var(--spectrum-assetlist-item-margin-block-end)`, if not set.", + "control": "text", + "category": "Modifier" + }, + "mod-assetlist-item-animation": { + "value": "var(--spectrum-assetlist-item-animation)", + "description": "Used by `.spectrum-AssetList-item`.
Defaults to `var(--spectrum-assetlist-item-animation)`, if not set.", + "control": "text", + "category": "Modifier" + }, + "mod-assetlist-item-font-size": { + "value": "var(--spectrum-assetlist-item-font-size)", + "description": "Used by `.spectrum-AssetList-item`.
Defaults to `var(--spectrum-assetlist-item-font-size)`, if not set.", + "control": "text", + "category": "Modifier" + }, + "mod-assetlist-item-font-weight": { + "value": "var(--spectrum-assetlist-item-font-weight)", + "description": "Used by `.spectrum-AssetList-item`.
Defaults to `var(--spectrum-assetlist-item-font-weight)`, if not set.", + "control": "text", + "category": "Modifier" + }, + "mod-assetlist-item-height": { + "value": "var(--spectrum-assetlist-item-height)", + "description": "Used by `.spectrum-AssetList-item, .spectrum-AssetList-item:before`.
Defaults to `var(--spectrum-assetlist-item-height)`, if not set.", + "control": "text", + "category": "Modifier" + }, + "mod-assetlist-item-border-radius": { + "value": "var(--spectrum-assetlist-item-border-radius)", + "description": "Used by `.spectrum-AssetList-item, .spectrum-AssetList-item:before`.
Defaults to `var(--spectrum-assetlist-item-border-radius)`, if not set.", + "control": "text", + "category": "Modifier" + }, + "mod-assetlist-thumbnail-width": { + "value": "var(--spectrum-assetlist-thumbnail-width)", + "description": "Used by `.spectrum-AssetList-item .spectrum-AssetList-itemThumbnail`.
Defaults to `var(--spectrum-assetlist-thumbnail-width)`, if not set.", + "control": "text", + "category": "Modifier" + }, + "mod-assetlist-thumnail-height": { + "value": "var(--spectrum-assetlist-thumbnail-height)", + "description": "Used by `.spectrum-AssetList-item .spectrum-AssetList-itemThumbnail`.
Defaults to `var(--spectrum-assetlist-thumbnail-height)`, if not set.", + "control": "text", + "category": "Modifier" + }, + "mod-assetlist-thumbnail-margin-left": { + "value": "var(--spectrum-assetlist-thumbnail-margin-inline-start)", + "description": "Used by `.spectrum-AssetList-item .spectrum-AssetList-itemThumbnail`.
Defaults to `var(--spectrum-assetlist-thumbnail-margin-inline-start)`, if not set.", + "control": "text", + "category": "Modifier" + }, + "mod-assetlist-item-background-color-hover": { + "value": "var(--spectrum-assetlist-item-background-color-hover)", + "description": "Used by `.spectrum-AssetList-item.is-focused:focus-within, .spectrum-AssetList-item:focus-within:focus-visible`, `.spectrum-AssetList-item:hover`.
Defaults to `var(--spectrum-assetlist-item-background-color-hover)`, if not set.", + "control": "color", + "category": "Modifier" + }, + "mod-assetlist-border-color-key-focus": { + "value": "var(--spectrum-assetlist-border-color-key-focus)", + "description": "Used by `.spectrum-AssetList-item.is-focused:focus-within:before, .spectrum-AssetList-item:focus-within:focus-visible:before`.
Defaults to `var(--spectrum-assetlist-border-color-key-focus)`, if not set.", + "control": "color", + "category": "Modifier" + }, + "mod-assetlist-item-background-color-down": { + "value": "var(--spectrum-assetlist-item-background-color-down)", + "description": "Used by `.spectrum-AssetList-item.is-navigated, .spectrum-AssetList-item.is-navigated:focus`, `.spectrum-AssetList-item.is-navigated:hover`.
Defaults to `var(--spectrum-assetlist-item-background-color-down)`, if not set.", + "control": "color", + "category": "Modifier" + }, + "mod-assetlist-item-background-color-selected": { + "value": "var(--spectrum-assetlist-item-background-color-selected)", + "description": "Used by `.spectrum-AssetList-item.is-selected`.
Defaults to `var(--spectrum-assetlist-item-background-color-selected)`, if not set.", + "control": "color", + "category": "Modifier" + }, + "mod-assetlist-item-background-color-selected-hover": { + "value": "var(--spectrum-assetlist-item-background-color-selected-hover)", + "description": "Used by `.spectrum-AssetList-item.is-selected:focus`, `.spectrum-AssetList-item.is-selected:hover`.
Defaults to `var(--spectrum-assetlist-item-background-color-selected-hover)`, if not set.", + "control": "color", + "category": "Modifier" + }, + "mod-assetlist-child-indicator-animation": { + "value": "var(--spectrum-assetlist-child-indicator-animation)", + "description": "Used by `.spectrum-AssetList-itemChildIndicator`.
Defaults to `var(--spectrum-assetlist-child-indicator-animation)`, if not set.", + "control": "text", + "category": "Modifier" + }, + "mod-assetlist-item-label-padding-inline-start": { + "value": "var(--spectrum-assetlist-item-label-padding-inline-start)", + "description": "Used by `.spectrum-AssetList-itemLabel`.
Defaults to `var(--spectrum-assetlist-item-label-padding-inline-start)`, if not set.", + "control": "text", + "category": "Modifier" + } + }, + "component": { + "spectrum-assetlist-width": { + "description": "Defined in `.spectrum-AssetList`.
Used by `.spectrum-AssetList-item`.", + "control": "text", + "category": "Component" + }, + "spectrum-assetlist-child-indicator-animation": { + "description": "Defined in `.spectrum-AssetList`.
Used by `.spectrum-AssetList-itemChildIndicator`.", + "control": "text", + "category": "Component" + }, + "spectrum-assetlist-item-height": { + "description": "Defined in `.spectrum-AssetList`.
Used by `.spectrum-AssetList-item, .spectrum-AssetList-item:before`.", + "control": "text", + "category": "Component" + }, + "spectrum-assetlist-item-padding-inline-start": { + "description": "Defined in `.spectrum-AssetList`.
Used by `.spectrum-AssetList-item`.", + "control": "text", + "category": "Component" + }, + "spectrum-assetlist-item-padding-inline-end": { + "description": "Defined in `.spectrum-AssetList`.
Used by `.spectrum-AssetList-item`.", + "control": "text", + "category": "Component" + }, + "spectrum-assetlist-item-margin-block-end": { + "description": "Defined in `.spectrum-AssetList`.
Used by `.spectrum-AssetList-item`.", + "control": "text", + "category": "Component" + }, + "spectrum-assetlist-item-border-radius": { + "description": "Defined in `.spectrum-AssetList`.
Used by `.spectrum-AssetList-item, .spectrum-AssetList-item:before`.", + "control": "text", + "category": "Component" + }, + "spectrum-assetlist-item-animation": { + "description": "Defined in `.spectrum-AssetList`.
Used by `.spectrum-AssetList-item`.", + "control": "text", + "category": "Component" + }, + "spectrum-assetlist-item-font-size": { + "description": "Defined in `.spectrum-AssetList`.
Used by `.spectrum-AssetList-item`.", + "control": "text", + "category": "Component" + }, + "spectrum-assetlist-item-font-weight": { + "description": "Defined in `.spectrum-AssetList`.
Used by `.spectrum-AssetList-item`.", + "control": "text", + "category": "Component" + }, + "spectrum-assetlist-thumbnail-width": { + "description": "Defined in `.spectrum-AssetList`.
Used by `.spectrum-AssetList-item .spectrum-AssetList-itemThumbnail`.", + "control": "text", + "category": "Component" + }, + "spectrum-assetlist-thumbnail-height": { + "description": "Defined in `.spectrum-AssetList`.
Used by `.spectrum-AssetList-item .spectrum-AssetList-itemThumbnail`.", + "control": "text", + "category": "Component" + }, + "spectrum-assetlist-thumbnail-margin-inline-start": { + "description": "Defined in `.spectrum-AssetList`.
Used by `.spectrum-AssetList-item .spectrum-AssetList-itemThumbnail`.", + "control": "text", + "category": "Component" + }, + "spectrum-assetlist-item-label-padding-inline-start": { + "description": "Defined in `.spectrum-AssetList`.
Used by `.spectrum-AssetList-itemLabel`.", + "control": "text", + "category": "Component" + }, + "spectrum-assetlist-label-color": { + "description": "Defined in `.spectrum-AssetList`.
Used by `.spectrum-AssetList-item`.", + "control": "color", + "category": "Component" + }, + "spectrum-assetlist-item-background-color-hover": { + "description": "Defined in `.spectrum-AssetList`.
Used by `.spectrum-AssetList-item.is-focused:focus-within, .spectrum-AssetList-item:focus-within:focus-visible`, `.spectrum-AssetList-item:hover`.", + "control": "color", + "category": "Component" + }, + "spectrum-assetlist-border-color-key-focus": { + "description": "Used by `.spectrum-AssetList-item.is-focused:focus-within:before, .spectrum-AssetList-item:focus-within:focus-visible:before`.", + "control": "color", + "category": "Component" + }, + "spectrum-assetlist-item-background-color-down": { + "description": "Defined in `.spectrum-AssetList`.
Used by `.spectrum-AssetList-item.is-navigated, .spectrum-AssetList-item.is-navigated:focus`, `.spectrum-AssetList-item.is-navigated:hover`.", + "control": "color", + "category": "Component" + }, + "spectrum-assetlist-item-background-color-selected": { + "description": "Used by `.spectrum-AssetList-item.is-selected`.", + "control": "color", + "category": "Component" + }, + "spectrum-assetlist-item-background-color-selected-hover": { + "description": "Used by `.spectrum-AssetList-item.is-selected:focus`, `.spectrum-AssetList-item.is-selected:hover`.", + "control": "color", + "category": "Component" + } + }, + "global": { + "spectrum-gray-200": { + "value": "light-dark(rgb(225, 225, 225), rgb(50, 50, 50))", + "description": "Used by `--system-asset-list-item-background-color-down`.", + "control": "text", + "category": "Global" + }, + "spectrum-gray-100": { + "value": "light-dark(rgb(233, 233, 233), rgb(44, 44, 44))", + "description": "Used by `--system-asset-list-item-background-color-hover`.", + "control": "text", + "category": "Global" + }, + "spectrum-animation-duration-100": { + "description": "Used by `--spectrum-assetlist-child-indicator-animation`, `--spectrum-assetlist-item-animation`.", + "control": "text", + "category": "Global" + }, + "spectrum-spacing-600": { + "value": "40px", + "description": "Used by `--spectrum-assetlist-item-height`.", + "control": "text", + "category": "Global" + }, + "spectrum-spacing-300": { + "value": "16px", + "description": "Used by `--spectrum-assetlist-item-padding-inline-start`, `--spectrum-assetlist-item-padding-inline-end`.", + "control": "text", + "category": "Global" + }, + "spectrum-spacing-75": { + "value": "4px", + "description": "Used by `--spectrum-assetlist-item-margin-block-end`, `--spectrum-assetlist-item-border-radius`.", + "control": "text", + "category": "Global" + }, + "spectrum-font-size-100": { + "value": "14px", + "description": "Used by `--spectrum-assetlist-item-font-size`.", + "control": "text", + "category": "Global" + }, + "spectrum-regular-font-weight": { + "value": "400", + "description": "Used by `--spectrum-assetlist-item-font-weight`.", + "control": "text", + "category": "Global" + }, + "spectrum-spacing-400": { + "value": "24px", + "description": "Used by `--spectrum-assetlist-thumbnail-width`, `--spectrum-assetlist-thumbnail-height`.", + "control": "text", + "category": "Global" + }, + "spectrum-spacing-100": { + "value": "8px", + "description": "Used by `--spectrum-assetlist-thumbnail-margin-inline-start`, `--spectrum-assetlist-item-label-padding-inline-start`.", + "control": "text", + "category": "Global" + }, + "spectrum-neutral-content-color-default": { + "value": "var(--spectrum-gray-800)", + "description": "Used by `--spectrum-assetlist-label-color`.", + "control": "color", + "category": "Global" + }, + "spectrum-logical-rotation": { + "description": "Defined in `.spectrum-AssetList:dir(rtl), [dir=\"rtl\"] .spectrum-AssetList`.
Used by `.spectrum-AssetList-itemChildIndicator`.", + "control": "text", + "category": "Global" + } + }, + "system-theme": { + "system-asset-list-item-background-color-down": { + "description": "Defined in `.spectrum`.
Used by `--spectrum-assetlist-item-background-color-down`.", + "control": "color" + }, + "system-asset-list-item-background-color-hover": { + "description": "Defined in `.spectrum`.
Used by `--spectrum-assetlist-item-background-color-hover`.", + "control": "color" + } + }, + "passthroughs": {}, + "high-contrast": { + "highcontrast-assetlist-label-color": { + "value": "var(--mod-assetlist-label-color, var(--spectrum-assetlist-label-color))", + "description": "Defined in `.spectrum-AssetList-item`, `.spectrum-AssetList-item.is-navigated, .spectrum-AssetList-item.is-selected`, `.spectrum-AssetList-item:hover`.
Used by `.spectrum-AssetList-item`.
Defaults to `var(--mod-assetlist-label-color, var(--spectrum-assetlist-label-color))`, if not set.", + "control": "color" + }, + "highcontrast-assetlist-item-background-color-hover": { + "value": "var(--mod-assetlist-item-background-color-hover, var(--spectrum-assetlist-item-background-color-hover))", + "description": "Defined in `.spectrum-AssetList-item`.
Used by `.spectrum-AssetList-item.is-focused:focus-within, .spectrum-AssetList-item:focus-within:focus-visible`, `.spectrum-AssetList-item:hover`.
Defaults to `var(--mod-assetlist-item-background-color-hover, var(--spectrum-assetlist-item-background-color-hover))`, if not set.", + "control": "color" + }, + "highcontrast-assetlist-border-color-key-focus": { + "value": "var(--mod-assetlist-border-color-key-focus, var(--spectrum-assetlist-border-color-key-focus))", + "description": "Defined in `.spectrum-AssetList-item`.
Used by `.spectrum-AssetList-item.is-focused:focus-within:before, .spectrum-AssetList-item:focus-within:focus-visible:before`.
Defaults to `var(--mod-assetlist-border-color-key-focus, var(--spectrum-assetlist-border-color-key-focus))`, if not set.", + "control": "color" + }, + "highcontrast-assetlist-item-background-color-selected": { + "value": "var(--mod-assetlist-item-background-color-selected, var(--spectrum-assetlist-item-background-color-selected))", + "description": "Defined in `.spectrum-AssetList-item`.
Used by `.spectrum-AssetList-item.is-selected`.
Defaults to `var(--mod-assetlist-item-background-color-selected, var(--spectrum-assetlist-item-background-color-selected))`, if not set.", + "control": "color" + }, + "highcontrast-assetlist-item-background-color-selected-hover": { + "value": "var(--mod-assetlist-item-background-color-selected-hover, var(--spectrum-assetlist-item-background-color-selected-hover))", + "description": "Defined in `.spectrum-AssetList-item`.
Used by `.spectrum-AssetList-item.is-selected:focus`, `.spectrum-AssetList-item.is-selected:hover`.
Defaults to `var(--mod-assetlist-item-background-color-selected-hover, var(--spectrum-assetlist-item-background-color-selected-hover))`, if not set.", + "control": "color" + } + } } diff --git a/components/assetlist/stories/assetlist.stories.js b/components/assetlist/stories/assetlist.stories.js index d421267b95d..20b3a1f79f4 100644 --- a/components/assetlist/stories/assetlist.stories.js +++ b/components/assetlist/stories/assetlist.stories.js @@ -1,8 +1,10 @@ import { default as Checkbox } from "@spectrum-css/checkbox/stories/checkbox.stories.js"; import { disableDefaultModes } from "@spectrum-css/preview/modes"; +import { AssetListGroup } from "./assetlist.test.js"; + +// Local assets to render the component styles and structure import metadata from "../dist/metadata.json"; import packageJson from "../package.json"; -import { AssetListGroup } from "./assetlist.test.js"; /** * A selectable list of assets, often used inside of miller columns. @@ -22,6 +24,7 @@ export default { }, packageJson, metadata, + cssprops: metadata.modifiers, }, }; diff --git a/components/assetlist/stories/template.js b/components/assetlist/stories/template.js index 96d8f75a80c..3a582198f14 100644 --- a/components/assetlist/stories/template.js +++ b/components/assetlist/stories/template.js @@ -45,10 +45,10 @@ export const AssetListItem = ({ customClasses: [`${rootClass}Selector`], }, context) )} - ${when(image, () => + ${when(image, () => html`asset image thumbnail` )} - ${when(iconName, () => + ${when(iconName, () => Icon({ iconName, setName: iconSet, @@ -76,9 +76,9 @@ export const AssetListItem = ({ export const Template = ({ rootClass = "spectrum-AssetList", + id = getRandomId("asset-list"), items = [], customClasses = [], - id = getRandomId("assetlist"), } = {}, context = {}) => { return html` diff --git a/components/button/dist/metadata.json b/components/button/dist/metadata.json index be9fdd8fe84..8ed2600fbe2 100644 --- a/components/button/dist/metadata.json +++ b/components/button/dist/metadata.json @@ -12,6 +12,14 @@ ".spectrum-Button--sizeXL", ".spectrum-Button-label", ".spectrum-Button-label:empty", + ".spectrum-Button::-moz-focus-inner", + ".spectrum-Button:active", + ".spectrum-Button:after", + ".spectrum-Button:disabled", + ".spectrum-Button:focus", + ".spectrum-Button:focus-visible", + ".spectrum-Button:focus-visible:after", + ".spectrum-Button:hover", ".spectrum-Button.is-disabled", ".spectrum-Button.is-focused:after", ".spectrum-Button.is-pending", @@ -47,368 +55,1760 @@ ".spectrum-Button.spectrum-Button--staticWhite.spectrum-Button--quiet", ".spectrum-Button.spectrum-Button--staticWhite.spectrum-Button--secondary", ".spectrum-Button.spectrum-Button--staticWhite.spectrum-Button--secondary.spectrum-Button--outline", - ".spectrum-Button::-moz-focus-inner", - ".spectrum-Button:active", - ".spectrum-Button:after", - ".spectrum-Button:disabled", - ".spectrum-Button:focus", - ".spectrum-Button:focus-visible", - ".spectrum-Button:focus-visible:after", - ".spectrum-Button:hover", ".spectrum-Button[pending]", ".spectrum-Button[pending] .spectrum-Button-label", ".spectrum-Button[pending] .spectrum-Icon", ".spectrum-Button[pending] .spectrum-ProgressCircle", "a.spectrum-Button" ], - "modifiers": [ - "--mod-animation-duration-100", - "--mod-bold-font-weight", - "--mod-button-animation-duration", - "--mod-button-background-color-default", - "--mod-button-background-color-disabled", - "--mod-button-background-color-down", - "--mod-button-background-color-focus", - "--mod-button-background-color-hover", - "--mod-button-border-color-default", - "--mod-button-border-color-disabled", - "--mod-button-border-color-down", - "--mod-button-border-color-focus", - "--mod-button-border-color-hover", - "--mod-button-border-radius", - "--mod-button-border-width", - "--mod-button-bottom-to-text", - "--mod-button-content-color-default", - "--mod-button-content-color-disabled", - "--mod-button-content-color-down", - "--mod-button-content-color-focus", - "--mod-button-content-color-hover", - "--mod-button-edge-to-text", - "--mod-button-edge-to-visual", - "--mod-button-edge-to-visual-only", - "--mod-button-focus-indicator-gap", - "--mod-button-focus-ring-border-radius", - "--mod-button-focus-ring-color", - "--mod-button-focus-ring-gap", - "--mod-button-focus-ring-thickness", - "--mod-button-font-family", - "--mod-button-font-size", - "--mod-button-height", - "--mod-button-icon-margin-block-start", - "--mod-button-line-height", - "--mod-button-margin-block", - "--mod-button-margin-left", - "--mod-button-margin-right", - "--mod-button-max-inline-size", - "--mod-button-min-width", - "--mod-button-padding-label-to-icon", - "--mod-button-static-content-color", - "--mod-button-text-align", - "--mod-button-text-align-with-icon", - "--mod-button-top-to-icon", - "--mod-button-top-to-text", - "--mod-focus-indicator-gap", - "--mod-line-height-100", - "--mod-sans-font-family-stack", - "--mod-static-black-focus-indicator-color" - ], - "component": [ - "--spectrum-button-animation-duration", - "--spectrum-button-background-color-default", - "--spectrum-button-background-color-disabled", - "--spectrum-button-background-color-down", - "--spectrum-button-background-color-focus", - "--spectrum-button-background-color-hover", - "--spectrum-button-border-color-default", - "--spectrum-button-border-color-disabled", - "--spectrum-button-border-color-down", - "--spectrum-button-border-color-focus", - "--spectrum-button-border-color-hover", - "--spectrum-button-border-radius", - "--spectrum-button-border-width", - "--spectrum-button-bottom-to-text", - "--spectrum-button-bottom-to-text-extra-large", - "--spectrum-button-bottom-to-text-large", - "--spectrum-button-bottom-to-text-medium", - "--spectrum-button-bottom-to-text-small", - "--spectrum-button-content-color-default", - "--spectrum-button-content-color-disabled", - "--spectrum-button-content-color-down", - "--spectrum-button-content-color-focus", - "--spectrum-button-content-color-hover", - "--spectrum-button-edge-to-text", - "--spectrum-button-edge-to-visual", - "--spectrum-button-edge-to-visual-only", - "--spectrum-button-focus-indicator-color", - "--spectrum-button-focus-ring-gap", - "--spectrum-button-focus-ring-thickness", - "--spectrum-button-font-size", - "--spectrum-button-height", - "--spectrum-button-intended-icon-size", - "--spectrum-button-line-height", - "--spectrum-button-min-width", - "--spectrum-button-minimum-width-multiplier", - "--spectrum-button-padding-label-to-icon", - "--spectrum-button-sized-bottom-to-text", - "--spectrum-button-sized-edge-to-text", - "--spectrum-button-sized-edge-to-visual", - "--spectrum-button-sized-edge-to-visual-only", - "--spectrum-button-sized-font-size", - "--spectrum-button-sized-height", - "--spectrum-button-sized-padding-label-to-icon", - "--spectrum-button-sized-top-to-icon", - "--spectrum-button-sized-top-to-text", - "--spectrum-button-top-to-icon", - "--spectrum-button-top-to-text", - "--spectrum-button-top-to-text-extra-large", - "--spectrum-button-top-to-text-large", - "--spectrum-button-top-to-text-medium", - "--spectrum-button-top-to-text-small" - ], - "global": [ - "--spectrum-accent-background-color-default", - "--spectrum-accent-background-color-down", - "--spectrum-accent-background-color-hover", - "--spectrum-accent-background-color-key-focus", - "--spectrum-accent-color-1000", - "--spectrum-accent-color-1100", - "--spectrum-accent-color-200", - "--spectrum-accent-color-300", - "--spectrum-accent-color-900", - "--spectrum-accent-content-color-default", - "--spectrum-accent-content-color-down", - "--spectrum-accent-content-color-hover", - "--spectrum-accent-content-color-key-focus", - "--spectrum-animation-duration-100", - "--spectrum-black", - "--spectrum-bold-font-weight", - "--spectrum-border-width-200", - "--spectrum-component-height-100", - "--spectrum-component-height-200", - "--spectrum-component-height-300", - "--spectrum-component-height-75", - "--spectrum-component-pill-edge-to-text-100", - "--spectrum-component-pill-edge-to-text-200", - "--spectrum-component-pill-edge-to-text-300", - "--spectrum-component-pill-edge-to-text-75", - "--spectrum-component-pill-edge-to-visual-100", - "--spectrum-component-pill-edge-to-visual-200", - "--spectrum-component-pill-edge-to-visual-300", - "--spectrum-component-pill-edge-to-visual-75", - "--spectrum-component-pill-edge-to-visual-only-100", - "--spectrum-component-pill-edge-to-visual-only-200", - "--spectrum-component-pill-edge-to-visual-only-300", - "--spectrum-component-pill-edge-to-visual-only-75", - "--spectrum-component-top-to-workflow-icon-100", - "--spectrum-component-top-to-workflow-icon-200", - "--spectrum-component-top-to-workflow-icon-300", - "--spectrum-component-top-to-workflow-icon-75", - "--spectrum-disabled-background-color", - "--spectrum-disabled-border-color", - "--spectrum-disabled-content-color", - "--spectrum-disabled-static-black-background-color", - "--spectrum-disabled-static-black-border-color", - "--spectrum-disabled-static-black-content-color", - "--spectrum-disabled-static-white-background-color", - "--spectrum-disabled-static-white-border-color", - "--spectrum-disabled-static-white-content-color", - "--spectrum-focus-indicator-color", - "--spectrum-focus-indicator-gap", - "--spectrum-focus-indicator-thickness", - "--spectrum-font-size-100", - "--spectrum-font-size-200", - "--spectrum-font-size-300", - "--spectrum-font-size-75", - "--spectrum-gray-100", - "--spectrum-gray-200", - "--spectrum-gray-25", - "--spectrum-gray-300", - "--spectrum-gray-400", - "--spectrum-gray-50", - "--spectrum-gray-500", - "--spectrum-gray-600", - "--spectrum-gray-800", - "--spectrum-gray-900", - "--spectrum-icon-block-size", - "--spectrum-line-height-100", - "--spectrum-negative-background-color-default", - "--spectrum-negative-background-color-down", - "--spectrum-negative-background-color-hover", - "--spectrum-negative-background-color-key-focus", - "--spectrum-negative-color-1000", - "--spectrum-negative-color-1100", - "--spectrum-negative-color-200", - "--spectrum-negative-color-300", - "--spectrum-negative-color-900", - "--spectrum-negative-content-color-default", - "--spectrum-negative-content-color-down", - "--spectrum-negative-content-color-hover", - "--spectrum-negative-content-color-key-focus", - "--spectrum-neutral-background-color-default", - "--spectrum-neutral-background-color-down", - "--spectrum-neutral-background-color-hover", - "--spectrum-neutral-background-color-key-focus", - "--spectrum-neutral-content-color-default", - "--spectrum-neutral-content-color-down", - "--spectrum-neutral-content-color-hover", - "--spectrum-neutral-content-color-key-focus", - "--spectrum-neutral-subdued-background-color-default", - "--spectrum-neutral-subdued-background-color-down", - "--spectrum-neutral-subdued-background-color-hover", - "--spectrum-neutral-subdued-background-color-key-focus", - "--spectrum-progress-circle-thickness-medium", - "--spectrum-sans-font-family-stack", - "--spectrum-static-black-focus-indicator-color", - "--spectrum-static-white-focus-indicator-color", - "--spectrum-text-to-visual-100", - "--spectrum-text-to-visual-200", - "--spectrum-text-to-visual-300", - "--spectrum-text-to-visual-75", - "--spectrum-transparent-black-100", - "--spectrum-transparent-black-200", - "--spectrum-transparent-black-25", - "--spectrum-transparent-black-300", - "--spectrum-transparent-black-400", - "--spectrum-transparent-black-800", - "--spectrum-transparent-black-900", - "--spectrum-transparent-white-100", - "--spectrum-transparent-white-200", - "--spectrum-transparent-white-25", - "--spectrum-transparent-white-300", - "--spectrum-transparent-white-400", - "--spectrum-transparent-white-800", - "--spectrum-transparent-white-900", - "--spectrum-white", - "--spectrum-workflow-icon-size-100", - "--spectrum-workflow-icon-size-200", - "--spectrum-workflow-icon-size-300", - "--spectrum-workflow-icon-size-75" - ], - "system-theme": [ - "--system-button-background-color-default", - "--system-button-background-color-disabled", - "--system-button-background-color-down", - "--system-button-background-color-focus", - "--system-button-background-color-hover", - "--system-button-border-color-default", - "--system-button-border-color-disabled", - "--system-button-border-color-down", - "--system-button-border-color-focus", - "--system-button-border-color-hover", - "--system-button-primary-content-color-default", - "--system-button-primary-content-color-down", - "--system-button-primary-content-color-focus", - "--system-button-primary-content-color-hover", - "--system-button-primary-outline-background-color-down", - "--system-button-primary-outline-background-color-focus", - "--system-button-primary-outline-background-color-hover", - "--system-button-secondary-background-color-default", - "--system-button-secondary-background-color-down", - "--system-button-secondary-background-color-focus", - "--system-button-secondary-background-color-hover", - "--system-button-secondary-outline-background-color-down", - "--system-button-secondary-outline-background-color-focus", - "--system-button-secondary-outline-background-color-hover", - "--system-button-secondary-outline-border-color-default", - "--system-button-secondary-outline-border-color-down", - "--system-button-selected-background-color-default", - "--system-button-selected-background-color-down", - "--system-button-selected-background-color-focus", - "--system-button-selected-background-color-hover", - "--system-button-static-black-background-color-default", - "--system-button-static-black-background-color-down", - "--system-button-static-black-background-color-focus", - "--system-button-static-black-background-color-hover", - "--system-button-static-black-content-color-default", - "--system-button-static-black-content-color-down", - "--system-button-static-black-content-color-focus", - "--system-button-static-black-content-color-hover", - "--system-button-static-black-outline-background-color-default", - "--system-button-static-black-outline-background-color-down", - "--system-button-static-black-outline-background-color-focus", - "--system-button-static-black-outline-background-color-hover", - "--system-button-static-black-outline-border-color-default", - "--system-button-static-black-outline-border-color-down", - "--system-button-static-black-outline-border-color-focus", - "--system-button-static-black-outline-border-color-hover", - "--system-button-static-black-outline-content-color-default", - "--system-button-static-black-outline-content-color-down", - "--system-button-static-black-outline-content-color-focus", - "--system-button-static-black-outline-content-color-hover", - "--system-button-static-black-secondary-background-color-default", - "--system-button-static-black-secondary-background-color-down", - "--system-button-static-black-secondary-background-color-focus", - "--system-button-static-black-secondary-background-color-hover", - "--system-button-static-black-secondary-content-color-default", - "--system-button-static-black-secondary-content-color-down", - "--system-button-static-black-secondary-content-color-focus", - "--system-button-static-black-secondary-content-color-hover", - "--system-button-static-black-secondary-outline-background-color-default", - "--system-button-static-black-secondary-outline-background-color-down", - "--system-button-static-black-secondary-outline-background-color-focus", - "--system-button-static-black-secondary-outline-background-color-hover", - "--system-button-static-black-secondary-outline-border-color-default", - "--system-button-static-black-secondary-outline-border-color-down", - "--system-button-static-black-secondary-outline-border-color-focus", - "--system-button-static-black-secondary-outline-border-color-hover", - "--system-button-static-white-background-color-default", - "--system-button-static-white-background-color-down", - "--system-button-static-white-background-color-focus", - "--system-button-static-white-background-color-hover", - "--system-button-static-white-content-color-default", - "--system-button-static-white-content-color-down", - "--system-button-static-white-content-color-focus", - "--system-button-static-white-content-color-hover", - "--system-button-static-white-outline-background-color-default", - "--system-button-static-white-outline-background-color-down", - "--system-button-static-white-outline-background-color-focus", - "--system-button-static-white-outline-background-color-hover", - "--system-button-static-white-outline-border-color-default", - "--system-button-static-white-outline-border-color-down", - "--system-button-static-white-outline-border-color-focus", - "--system-button-static-white-outline-border-color-hover", - "--system-button-static-white-outline-content-color-default", - "--system-button-static-white-outline-content-color-down", - "--system-button-static-white-outline-content-color-focus", - "--system-button-static-white-outline-content-color-hover", - "--system-button-static-white-secondary-background-color-default", - "--system-button-static-white-secondary-background-color-down", - "--system-button-static-white-secondary-background-color-focus", - "--system-button-static-white-secondary-background-color-hover", - "--system-button-static-white-secondary-content-color-default", - "--system-button-static-white-secondary-content-color-down", - "--system-button-static-white-secondary-content-color-focus", - "--system-button-static-white-secondary-content-color-hover", - "--system-button-static-white-secondary-outline-background-color-default", - "--system-button-static-white-secondary-outline-background-color-down", - "--system-button-static-white-secondary-outline-background-color-focus", - "--system-button-static-white-secondary-outline-background-color-hover", - "--system-button-static-white-secondary-outline-border-color-default", - "--system-button-static-white-secondary-outline-border-color-down", - "--system-button-static-white-secondary-outline-border-color-focus", - "--system-button-static-white-secondary-outline-border-color-hover" - ], - "passthroughs": [ - "--mod-progress-circle-position", - "--mod-progress-circle-thickness", - "--mod-progress-circle-track-border-color", - "--mod-progress-circle-track-border-color-over-background" - ], - "high-contrast": [ - "--highcontrast-button-background-color-default", - "--highcontrast-button-background-color-disabled", - "--highcontrast-button-background-color-down", - "--highcontrast-button-background-color-focus", - "--highcontrast-button-background-color-hover", - "--highcontrast-button-border-color-default", - "--highcontrast-button-border-color-disabled", - "--highcontrast-button-border-color-down", - "--highcontrast-button-border-color-focus", - "--highcontrast-button-border-color-hover", - "--highcontrast-button-content-color-default", - "--highcontrast-button-content-color-disabled", - "--highcontrast-button-content-color-down", - "--highcontrast-button-content-color-focus", - "--highcontrast-button-content-color-hover" - ] + "modifiers": { + "mod-button-font-family": { + "value": "var(--mod-sans-font-family-stack, var(--spectrum-sans-font-family-stack))", + "description": "Used by `.spectrum-Button`.
Defaults to `var(--mod-sans-font-family-stack, var(--spectrum-sans-font-family-stack))`, if not set.", + "control": "text", + "category": "Modifier" + }, + "mod-sans-font-family-stack": { + "value": "var(--spectrum-sans-font-family-stack)", + "description": "Used by `.spectrum-Button`.
Defaults to `var(--spectrum-sans-font-family-stack)`, if not set.", + "control": "text", + "category": "Modifier" + }, + "mod-button-line-height": { + "value": "var(--mod-line-height-100, var(--spectrum-line-height-100))", + "description": "Used by `.spectrum-Button`, `--spectrum-button-line-height`.
Defaults to `var(--mod-line-height-100, var(--spectrum-line-height-100))`, if not set.", + "control": "text", + "category": "Modifier" + }, + "mod-line-height-100": { + "value": "1.3", + "description": "Used by `.spectrum-Button`.
Defaults to `var(--spectrum-line-height-100)`, if not set.", + "control": "text", + "category": "Modifier" + }, + "mod-button-animation-duration": { + "value": "var(--spectrum-animation-duration-100)", + "description": "Used by `.spectrum-Button`, `.spectrum-Button:after`, `--spectrum-button-animation-duration`.
Defaults to `var(--spectrum-animation-duration-100)`, if not set.", + "control": "text", + "category": "Modifier" + }, + "mod-animation-duration-100": { + "value": "var(--spectrum-animation-duration-100)", + "description": "Used by `.spectrum-Button`.
Defaults to `var(--spectrum-animation-duration-100)`, if not set.", + "control": "text", + "category": "Modifier" + }, + "mod-button-focus-indicator-gap": { + "value": "2px", + "description": "Used by `.spectrum-Button:after`.
Defaults to `var(--spectrum-focus-indicator-gap)`, if not set.", + "control": "text", + "category": "Modifier" + }, + "mod-focus-indicator-gap": { + "value": "var(--mod-button-focus-ring-gap, var(--spectrum-focus-indicator-gap))", + "description": "Used by `.spectrum-Button:focus-visible:after`, `--spectrum-button-focus-ring-gap`.
Defaults to `var(--mod-button-focus-ring-gap, var(--spectrum-focus-indicator-gap))`, if not set.", + "control": "text", + "category": "Modifier" + }, + "mod-button-content-color-default": { + "value": "var(--spectrum-button-content-color-default, inherit)", + "description": "Defined in `.spectrum-Button.spectrum-Button--staticBlack.is-selected, .spectrum-Button.spectrum-Button--staticWhite.is-selected`.
Used by `.spectrum-Button`.
Defaults to `var(--spectrum-button-content-color-default, inherit)`, if not set.", + "control": "color", + "category": "Modifier" + }, + "mod-button-static-content-color": { + "description": "Used by `--mod-button-content-color-default`, `--mod-button-content-color-hover`, `--mod-button-content-color-down`, `--mod-button-content-color-focus`.", + "control": "color", + "category": "Modifier" + }, + "mod-button-content-color-hover": { + "value": "var(--spectrum-button-content-color-hover)", + "description": "Defined in `.spectrum-Button.spectrum-Button--staticBlack.is-selected, .spectrum-Button.spectrum-Button--staticWhite.is-selected`.
Used by `.spectrum-Button:hover`.
Defaults to `var(--spectrum-button-content-color-hover)`, if not set.", + "control": "color", + "category": "Modifier" + }, + "mod-button-content-color-down": { + "value": "var(--spectrum-button-content-color-down)", + "description": "Defined in `.spectrum-Button.spectrum-Button--staticBlack.is-selected, .spectrum-Button.spectrum-Button--staticWhite.is-selected`.
Used by `.spectrum-Button:active`.
Defaults to `var(--spectrum-button-content-color-down)`, if not set.", + "control": "color", + "category": "Modifier" + }, + "mod-button-content-color-focus": { + "value": "var(--spectrum-button-content-color-focus)", + "description": "Defined in `.spectrum-Button.spectrum-Button--staticBlack.is-selected, .spectrum-Button.spectrum-Button--staticWhite.is-selected`.
Used by `.spectrum-Button:focus-visible`.
Defaults to `var(--spectrum-button-content-color-focus)`, if not set.", + "control": "color", + "category": "Modifier" + }, + "mod-static-black-focus-indicator-color": { + "value": "rgb(0, 0, 0)", + "description": "Used by `--spectrum-button-focus-indicator-color`.
Defaults to `var(--spectrum-static-black-focus-indicator-color)`, if not set.", + "control": "color", + "category": "Modifier" + }, + "mod-button-height": { + "value": "var(--spectrum-button-sized-height)", + "description": "Used by `--spectrum-button-height`.
Defaults to `var(--spectrum-button-sized-height)`, if not set.", + "control": "text", + "category": "Modifier" + }, + "mod-button-min-width": { + "value": "calc(var(--spectrum-button-height) * var(--spectrum-button-minimum-width-multiplier))", + "description": "Used by `--spectrum-button-min-width`.
Defaults to `calc(var(--spectrum-button-height) * var(--spectrum-button-minimum-width-multiplier))`, if not set.", + "control": "text", + "category": "Modifier" + }, + "mod-button-font-size": { + "value": "var(--spectrum-button-sized-font-size)", + "description": "Used by `--spectrum-button-font-size`.
Defaults to `var(--spectrum-button-sized-font-size)`, if not set.", + "control": "text", + "category": "Modifier" + }, + "mod-button-padding-label-to-icon": { + "value": "var(--spectrum-button-sized-padding-label-to-icon)", + "description": "Used by `--spectrum-button-padding-label-to-icon`.
Defaults to `var(--spectrum-button-sized-padding-label-to-icon)`, if not set.", + "control": "text", + "category": "Modifier" + }, + "mod-button-edge-to-visual": { + "value": "var(--spectrum-button-edge-to-visual)", + "description": "Used by `--spectrum-button-edge-to-visual`, `.spectrum-Button .spectrum-Icon`.
Defaults to `var(--spectrum-button-edge-to-visual)`, if not set.", + "control": "text", + "category": "Modifier" + }, + "mod-button-edge-to-visual-only": { + "value": "var(--spectrum-button-edge-to-visual-only)", + "description": "Used by `--spectrum-button-edge-to-visual-only`, `.spectrum-Button.spectrum-Button--iconOnly`.
Defaults to `var(--spectrum-button-edge-to-visual-only)`, if not set.", + "control": "text", + "category": "Modifier" + }, + "mod-button-edge-to-text": { + "value": "var(--spectrum-button-edge-to-text)", + "description": "Used by `--spectrum-button-edge-to-text`, `.spectrum-Button .spectrum-Icon`.
Defaults to `var(--spectrum-button-edge-to-text)`, if not set.", + "control": "text", + "category": "Modifier" + }, + "mod-button-top-to-text": { + "value": "var(--spectrum-button-sized-top-to-text)", + "description": "Used by `--spectrum-button-top-to-text`.
Defaults to `var(--spectrum-button-sized-top-to-text)`, if not set.", + "control": "text", + "category": "Modifier" + }, + "mod-button-bottom-to-text": { + "value": "var(--spectrum-button-sized-bottom-to-text)", + "description": "Used by `--spectrum-button-bottom-to-text`.
Defaults to `var(--spectrum-button-sized-bottom-to-text)`, if not set.", + "control": "text", + "category": "Modifier" + }, + "mod-button-top-to-icon": { + "value": "var(--spectrum-button-top-to-icon)", + "description": "Used by `--spectrum-button-top-to-icon`, `.spectrum-Button .spectrum-Icon`.
Defaults to `var(--spectrum-button-top-to-icon)`, if not set.", + "control": "text", + "category": "Modifier" + }, + "mod-button-focus-ring-thickness": { + "value": "2px", + "description": "Used by `--spectrum-button-focus-ring-thickness`.
Defaults to `var(--spectrum-focus-indicator-thickness)`, if not set.", + "control": "text", + "category": "Modifier" + }, + "mod-button-focus-ring-color": { + "value": "var(--spectrum-blue-800)", + "description": "Used by `--spectrum-button-focus-indicator-color`.
Defaults to `var(--spectrum-focus-indicator-color)`, if not set.", + "control": "color", + "category": "Modifier" + }, + "mod-button-border-width": { + "value": "var(--spectrum-button-border-width)", + "description": "Used by `--spectrum-button-border-width`, `.spectrum-Button .spectrum-Icon`, `.spectrum-Button.spectrum-Button--iconOnly`.
Defaults to `var(--spectrum-button-border-width)`, if not set.", + "control": "text", + "category": "Modifier" + }, + "mod-button-focus-ring-gap": { + "value": "2px", + "description": "Used by `--spectrum-button-focus-ring-gap`.
Defaults to `var(--spectrum-focus-indicator-gap)`, if not set.", + "control": "text", + "category": "Modifier" + }, + "mod-button-border-radius": { + "value": "calc(var(--spectrum-button-height) / 2)", + "description": "Used by `--spectrum-button-border-radius`.
Defaults to `calc(var(--spectrum-button-height) / 2)`, if not set.", + "control": "text", + "category": "Modifier" + }, + "mod-bold-font-weight": { + "value": "700", + "description": "Used by `.spectrum-Button`.
Defaults to `var(--spectrum-bold-font-weight)`, if not set.", + "control": "text", + "category": "Modifier" + }, + "mod-button-max-inline-size": { + "description": "Used by `.spectrum-Button`.", + "control": "text", + "category": "Modifier" + }, + "mod-button-margin-block": { + "description": "Used by `.spectrum-Button`.", + "control": "text", + "category": "Modifier" + }, + "mod-button-margin-right": { + "description": "Used by `.spectrum-Button`.", + "control": "text", + "category": "Modifier" + }, + "mod-button-margin-left": { + "description": "Used by `.spectrum-Button`.", + "control": "text", + "category": "Modifier" + }, + "mod-button-background-color-default": { + "value": "var(--spectrum-button-background-color-default)", + "description": "Used by `.spectrum-Button`.
Defaults to `var(--spectrum-button-background-color-default)`, if not set.", + "control": "color", + "category": "Modifier" + }, + "mod-button-border-color-default": { + "value": "var(--spectrum-button-border-color-default)", + "description": "Used by `.spectrum-Button`.
Defaults to `var(--spectrum-button-border-color-default)`, if not set.", + "control": "color", + "category": "Modifier" + }, + "mod-button-focus-ring-border-radius": { + "value": "calc((var(--spectrum-button-focus-ring-gap) + var(--spectrum-button-border-width)) * -1)", + "description": "Used by `.spectrum-Button:after`.
Defaults to `calc((var(--spectrum-button-focus-ring-gap) + var(--spectrum-button-border-width)) * -1)`, if not set.", + "control": "text", + "category": "Modifier" + }, + "mod-button-background-color-focus": { + "value": "var(--spectrum-button-background-color-focus)", + "description": "Used by `.spectrum-Button:focus-visible`.
Defaults to `var(--spectrum-button-background-color-focus)`, if not set.", + "control": "color", + "category": "Modifier" + }, + "mod-button-border-color-focus": { + "value": "var(--spectrum-button-border-color-focus)", + "description": "Used by `.spectrum-Button:focus-visible`.
Defaults to `var(--spectrum-button-border-color-focus)`, if not set.", + "control": "color", + "category": "Modifier" + }, + "mod-button-background-color-down": { + "value": "var(--spectrum-button-background-color-down)", + "description": "Used by `.spectrum-Button:active`.
Defaults to `var(--spectrum-button-background-color-down)`, if not set.", + "control": "color", + "category": "Modifier" + }, + "mod-button-border-color-down": { + "value": "var(--spectrum-button-border-color-down)", + "description": "Used by `.spectrum-Button:active`.
Defaults to `var(--spectrum-button-border-color-down)`, if not set.", + "control": "color", + "category": "Modifier" + }, + "mod-button-background-color-hover": { + "value": "var(--spectrum-button-background-color-hover)", + "description": "Used by `.spectrum-Button:hover`.
Defaults to `var(--spectrum-button-background-color-hover)`, if not set.", + "control": "color", + "category": "Modifier" + }, + "mod-button-border-color-hover": { + "value": "var(--spectrum-button-border-color-hover)", + "description": "Used by `.spectrum-Button:hover`.
Defaults to `var(--spectrum-button-border-color-hover)`, if not set.", + "control": "color", + "category": "Modifier" + }, + "mod-button-background-color-disabled": { + "value": "var(--spectrum-button-background-color-disabled)", + "description": "Used by `.spectrum-Button.is-disabled, .spectrum-Button.is-pending, .spectrum-Button:disabled, .spectrum-Button[pending]`.
Defaults to `var(--spectrum-button-background-color-disabled)`, if not set.", + "control": "color", + "category": "Modifier" + }, + "mod-button-border-color-disabled": { + "value": "var(--spectrum-button-border-color-disabled)", + "description": "Used by `.spectrum-Button.is-disabled, .spectrum-Button.is-pending, .spectrum-Button:disabled, .spectrum-Button[pending]`.
Defaults to `var(--spectrum-button-border-color-disabled)`, if not set.", + "control": "color", + "category": "Modifier" + }, + "mod-button-content-color-disabled": { + "value": "var(--spectrum-button-content-color-disabled)", + "description": "Used by `.spectrum-Button.is-disabled, .spectrum-Button.is-pending, .spectrum-Button:disabled, .spectrum-Button[pending]`.
Defaults to `var(--spectrum-button-content-color-disabled)`, if not set.", + "control": "color", + "category": "Modifier" + }, + "mod-button-icon-margin-block-start": { + "value": "max(0px, calc(var(--spectrum-button-top-to-icon) - var(--spectrum-button-border-width) + var(--_icon-size-difference, 0px) / 2))", + "description": "Used by `.spectrum-Button .spectrum-Icon`.
Defaults to `max(0px, calc(var(--spectrum-button-top-to-icon) - var(--spectrum-button-border-width) + var(--_icon-size-difference, 0px) / 2))`, if not set.", + "control": "text", + "category": "Modifier" + }, + "mod-button-text-align-with-icon": { + "description": "Used by `.spectrum-Button .spectrum-Icon + .spectrum-Button-label`.", + "control": "text", + "category": "Modifier" + }, + "mod-button-text-align": { + "description": "Used by `.spectrum-Button-label`.", + "control": "text", + "category": "Modifier" + } + }, + "component": { + "spectrum-button-sized-height": { + "description": "Defined in `.spectrum-Button`, `.spectrum-Button--sizeS`, `.spectrum-Button--sizeL`, `.spectrum-Button--sizeXL`.
Used by `--spectrum-button-height`.", + "control": "text", + "category": "Component" + }, + "spectrum-button-sized-font-size": { + "description": "Defined in `.spectrum-Button`, `.spectrum-Button--sizeS`, `.spectrum-Button--sizeL`, `.spectrum-Button--sizeXL`.
Used by `--spectrum-button-font-size`.", + "control": "text", + "category": "Component" + }, + "spectrum-button-sized-edge-to-visual": { + "description": "Defined in `.spectrum-Button`, `.spectrum-Button--sizeS`, `.spectrum-Button--sizeL`, `.spectrum-Button--sizeXL`.
Used by `--spectrum-button-edge-to-visual`.", + "control": "text", + "category": "Component" + }, + "spectrum-button-border-width": { + "description": "Defined in `.spectrum-Button`.
Used by `--spectrum-button-sized-edge-to-visual`, `--spectrum-button-sized-edge-to-text`, `.spectrum-Button`, `.spectrum-Button:after`, `.spectrum-Button .spectrum-Icon`, `.spectrum-Button.spectrum-Button--iconOnly`, `.spectrum-Button-label`.", + "control": "text", + "category": "Component" + }, + "spectrum-button-sized-edge-to-visual-only": { + "description": "Defined in `.spectrum-Button`, `.spectrum-Button--sizeS`, `.spectrum-Button--sizeL`, `.spectrum-Button--sizeXL`.
Used by `--spectrum-button-edge-to-visual-only`.", + "control": "text", + "category": "Component" + }, + "spectrum-button-sized-edge-to-text": { + "description": "Defined in `.spectrum-Button`, `.spectrum-Button--sizeS`, `.spectrum-Button--sizeL`, `.spectrum-Button--sizeXL`.
Used by `--spectrum-button-edge-to-text`.", + "control": "text", + "category": "Component" + }, + "spectrum-button-sized-padding-label-to-icon": { + "description": "Defined in `.spectrum-Button`, `.spectrum-Button--sizeS`, `.spectrum-Button--sizeL`, `.spectrum-Button--sizeXL`.
Used by `--spectrum-button-padding-label-to-icon`.", + "control": "text", + "category": "Component" + }, + "spectrum-button-sized-top-to-text": { + "description": "Defined in `.spectrum-Button`, `.spectrum-Button--sizeS`, `.spectrum-Button--sizeL`, `.spectrum-Button--sizeXL`.
Used by `--spectrum-button-top-to-text`.", + "control": "text", + "category": "Component" + }, + "spectrum-button-top-to-text-medium": { + "description": "Used by `--spectrum-button-sized-top-to-text`.", + "control": "text", + "category": "Component" + }, + "spectrum-button-sized-bottom-to-text": { + "description": "Defined in `.spectrum-Button`, `.spectrum-Button--sizeS`, `.spectrum-Button--sizeL`, `.spectrum-Button--sizeXL`.
Used by `--spectrum-button-bottom-to-text`.", + "control": "text", + "category": "Component" + }, + "spectrum-button-bottom-to-text-medium": { + "description": "Used by `--spectrum-button-sized-bottom-to-text`.", + "control": "text", + "category": "Component" + }, + "spectrum-button-sized-top-to-icon": { + "description": "Defined in `.spectrum-Button`, `.spectrum-Button--sizeS`, `.spectrum-Button--sizeL`, `.spectrum-Button--sizeXL`.
Used by `--spectrum-button-top-to-icon`.", + "control": "text", + "category": "Component" + }, + "spectrum-button-intended-icon-size": { + "description": "Defined in `.spectrum-Button`, `.spectrum-Button--sizeS`, `.spectrum-Button--sizeL`, `.spectrum-Button--sizeXL`.
Used by `--_icon-size-difference`.", + "control": "text", + "category": "Component" + }, + "spectrum-button-top-to-text-small": { + "description": "Used by `--spectrum-button-sized-top-to-text`.", + "control": "text", + "category": "Component" + }, + "spectrum-button-bottom-to-text-small": { + "description": "Used by `--spectrum-button-sized-bottom-to-text`.", + "control": "text", + "category": "Component" + }, + "spectrum-button-top-to-text-large": { + "description": "Used by `--spectrum-button-sized-top-to-text`.", + "control": "text", + "category": "Component" + }, + "spectrum-button-bottom-to-text-large": { + "description": "Used by `--spectrum-button-sized-bottom-to-text`.", + "control": "text", + "category": "Component" + }, + "spectrum-button-top-to-text-extra-large": { + "description": "Used by `--spectrum-button-sized-top-to-text`.", + "control": "text", + "category": "Component" + }, + "spectrum-button-bottom-to-text-extra-large": { + "description": "Used by `--spectrum-button-sized-bottom-to-text`.", + "control": "text", + "category": "Component" + }, + "spectrum-button-content-color-default": { + "description": "Defined in `.spectrum-Button`, `.spectrum-Button.is-selected`, `.spectrum-Button.spectrum-Button--accent`, `.spectrum-Button.spectrum-Button--accent.spectrum-Button--outline`, `.spectrum-Button.spectrum-Button--negative`, `.spectrum-Button.spectrum-Button--negative.spectrum-Button--outline`, `.spectrum-Button.spectrum-Button--primary.spectrum-Button--outline`, `.spectrum-Button.spectrum-Button--secondary`, `.spectrum-Button.spectrum-Button--secondary.spectrum-Button--outline`, `.spectrum-Button.spectrum-Button--primary`, `.spectrum-Button.spectrum-Button--staticWhite`, `.spectrum-Button.spectrum-Button--staticWhite.spectrum-Button--outline`, `.spectrum-Button.spectrum-Button--staticWhite.spectrum-Button--secondary`, `.spectrum-Button.spectrum-Button--staticBlack`, `.spectrum-Button.spectrum-Button--staticBlack.spectrum-Button--outline`, `.spectrum-Button.spectrum-Button--staticBlack.spectrum-Button--secondary`.
Used by `.spectrum-Button`.", + "control": "color", + "category": "Component" + }, + "spectrum-button-content-color-hover": { + "description": "Defined in `.spectrum-Button`, `.spectrum-Button.is-selected`, `.spectrum-Button.spectrum-Button--accent`, `.spectrum-Button.spectrum-Button--accent.spectrum-Button--outline`, `.spectrum-Button.spectrum-Button--negative`, `.spectrum-Button.spectrum-Button--negative.spectrum-Button--outline`, `.spectrum-Button.spectrum-Button--primary.spectrum-Button--outline`, `.spectrum-Button.spectrum-Button--secondary`, `.spectrum-Button.spectrum-Button--secondary.spectrum-Button--outline`, `.spectrum-Button.spectrum-Button--primary`, `.spectrum-Button.spectrum-Button--staticWhite`, `.spectrum-Button.spectrum-Button--staticWhite.spectrum-Button--outline`, `.spectrum-Button.spectrum-Button--staticWhite.spectrum-Button--secondary`, `.spectrum-Button.spectrum-Button--staticBlack`, `.spectrum-Button.spectrum-Button--staticBlack.spectrum-Button--outline`, `.spectrum-Button.spectrum-Button--staticBlack.spectrum-Button--secondary`.
Used by `.spectrum-Button:hover`.", + "control": "color", + "category": "Component" + }, + "spectrum-button-content-color-down": { + "description": "Defined in `.spectrum-Button`, `.spectrum-Button.is-selected`, `.spectrum-Button.spectrum-Button--accent`, `.spectrum-Button.spectrum-Button--accent.spectrum-Button--outline`, `.spectrum-Button.spectrum-Button--negative`, `.spectrum-Button.spectrum-Button--negative.spectrum-Button--outline`, `.spectrum-Button.spectrum-Button--primary.spectrum-Button--outline`, `.spectrum-Button.spectrum-Button--secondary`, `.spectrum-Button.spectrum-Button--secondary.spectrum-Button--outline`, `.spectrum-Button.spectrum-Button--primary`, `.spectrum-Button.spectrum-Button--staticWhite`, `.spectrum-Button.spectrum-Button--staticWhite.spectrum-Button--outline`, `.spectrum-Button.spectrum-Button--staticWhite.spectrum-Button--secondary`, `.spectrum-Button.spectrum-Button--staticBlack`, `.spectrum-Button.spectrum-Button--staticBlack.spectrum-Button--outline`, `.spectrum-Button.spectrum-Button--staticBlack.spectrum-Button--secondary`.
Used by `.spectrum-Button:active`.", + "control": "color", + "category": "Component" + }, + "spectrum-button-content-color-focus": { + "description": "Defined in `.spectrum-Button`, `.spectrum-Button.is-selected`, `.spectrum-Button.spectrum-Button--accent`, `.spectrum-Button.spectrum-Button--accent.spectrum-Button--outline`, `.spectrum-Button.spectrum-Button--negative`, `.spectrum-Button.spectrum-Button--negative.spectrum-Button--outline`, `.spectrum-Button.spectrum-Button--primary.spectrum-Button--outline`, `.spectrum-Button.spectrum-Button--secondary`, `.spectrum-Button.spectrum-Button--secondary.spectrum-Button--outline`, `.spectrum-Button.spectrum-Button--primary`, `.spectrum-Button.spectrum-Button--staticWhite`, `.spectrum-Button.spectrum-Button--staticWhite.spectrum-Button--outline`, `.spectrum-Button.spectrum-Button--staticWhite.spectrum-Button--secondary`, `.spectrum-Button.spectrum-Button--staticBlack`, `.spectrum-Button.spectrum-Button--staticBlack.spectrum-Button--outline`, `.spectrum-Button.spectrum-Button--staticBlack.spectrum-Button--secondary`.
Used by `.spectrum-Button:focus-visible`.", + "control": "color", + "category": "Component" + }, + "spectrum-button-content-color-disabled": { + "description": "Defined in `.spectrum-Button`, `.spectrum-Button.spectrum-Button--accent.spectrum-Button--outline`, `.spectrum-Button.spectrum-Button--negative`, `.spectrum-Button.spectrum-Button--negative.spectrum-Button--outline`, `.spectrum-Button.spectrum-Button--primary.spectrum-Button--outline`, `.spectrum-Button.spectrum-Button--secondary`, `.spectrum-Button.spectrum-Button--secondary.spectrum-Button--outline`, `.spectrum-Button.spectrum-Button--staticWhite`, `.spectrum-Button.spectrum-Button--staticWhite.spectrum-Button--outline`, `.spectrum-Button.spectrum-Button--staticBlack`, `.spectrum-Button.spectrum-Button--staticBlack.spectrum-Button--outline`.
Used by `.spectrum-Button.is-disabled, .spectrum-Button.is-pending, .spectrum-Button:disabled, .spectrum-Button[pending]`.", + "control": "color", + "category": "Component" + }, + "spectrum-button-border-color-default": { + "description": "Defined in `.spectrum-Button.is-selected`, `.spectrum-Button.spectrum-Button--accent`, `.spectrum-Button.spectrum-Button--accent.spectrum-Button--outline`, `.spectrum-Button.spectrum-Button--negative`, `.spectrum-Button.spectrum-Button--negative.spectrum-Button--outline`, `.spectrum-Button.spectrum-Button--primary`, `.spectrum-Button.spectrum-Button--primary.spectrum-Button--outline`, `.spectrum-Button.spectrum-Button--secondary`, `.spectrum-Button.spectrum-Button--secondary.spectrum-Button--outline`, `.spectrum-Button.spectrum-Button--quiet, .spectrum-Button.spectrum-Button--staticBlack, .spectrum-Button.spectrum-Button--staticWhite`, `.spectrum-Button.spectrum-Button--staticBlack.spectrum-Button--secondary, .spectrum-Button.spectrum-Button--staticWhite.spectrum-Button--secondary`, `.spectrum-Button.spectrum-Button--staticBlack.spectrum-Button--quiet, .spectrum-Button.spectrum-Button--staticWhite.spectrum-Button--quiet`, `.spectrum-Button`, `.spectrum-Button.spectrum-Button--staticWhite.spectrum-Button--outline`, `.spectrum-Button.spectrum-Button--staticWhite.spectrum-Button--secondary.spectrum-Button--outline`, `.spectrum-Button.spectrum-Button--staticBlack.spectrum-Button--outline`, `.spectrum-Button.spectrum-Button--staticBlack.spectrum-Button--secondary.spectrum-Button--outline`.
Used by `.spectrum-Button`.", + "control": "color", + "category": "Component" + }, + "spectrum-button-border-color-hover": { + "description": "Defined in `.spectrum-Button.is-selected`, `.spectrum-Button.spectrum-Button--accent`, `.spectrum-Button.spectrum-Button--accent.spectrum-Button--outline`, `.spectrum-Button.spectrum-Button--negative`, `.spectrum-Button.spectrum-Button--negative.spectrum-Button--outline`, `.spectrum-Button.spectrum-Button--primary`, `.spectrum-Button.spectrum-Button--primary.spectrum-Button--outline`, `.spectrum-Button.spectrum-Button--secondary`, `.spectrum-Button.spectrum-Button--secondary.spectrum-Button--outline`, `.spectrum-Button.spectrum-Button--quiet, .spectrum-Button.spectrum-Button--staticBlack, .spectrum-Button.spectrum-Button--staticWhite`, `.spectrum-Button.spectrum-Button--staticBlack.spectrum-Button--secondary, .spectrum-Button.spectrum-Button--staticWhite.spectrum-Button--secondary`, `.spectrum-Button.spectrum-Button--staticBlack.spectrum-Button--quiet, .spectrum-Button.spectrum-Button--staticWhite.spectrum-Button--quiet`, `.spectrum-Button`, `.spectrum-Button.spectrum-Button--staticWhite.spectrum-Button--outline`, `.spectrum-Button.spectrum-Button--staticWhite.spectrum-Button--secondary.spectrum-Button--outline`, `.spectrum-Button.spectrum-Button--staticBlack.spectrum-Button--outline`, `.spectrum-Button.spectrum-Button--staticBlack.spectrum-Button--secondary.spectrum-Button--outline`.
Used by `.spectrum-Button:hover`.", + "control": "color", + "category": "Component" + }, + "spectrum-button-border-color-down": { + "description": "Defined in `.spectrum-Button.is-selected`, `.spectrum-Button.spectrum-Button--accent`, `.spectrum-Button.spectrum-Button--accent.spectrum-Button--outline`, `.spectrum-Button.spectrum-Button--negative`, `.spectrum-Button.spectrum-Button--negative.spectrum-Button--outline`, `.spectrum-Button.spectrum-Button--primary`, `.spectrum-Button.spectrum-Button--primary.spectrum-Button--outline`, `.spectrum-Button.spectrum-Button--secondary`, `.spectrum-Button.spectrum-Button--quiet, .spectrum-Button.spectrum-Button--staticBlack, .spectrum-Button.spectrum-Button--staticWhite`, `.spectrum-Button.spectrum-Button--staticBlack.spectrum-Button--secondary, .spectrum-Button.spectrum-Button--staticWhite.spectrum-Button--secondary`, `.spectrum-Button.spectrum-Button--staticBlack.spectrum-Button--quiet, .spectrum-Button.spectrum-Button--staticWhite.spectrum-Button--quiet`, `.spectrum-Button`, `.spectrum-Button.spectrum-Button--secondary.spectrum-Button--outline`, `.spectrum-Button.spectrum-Button--staticWhite.spectrum-Button--outline`, `.spectrum-Button.spectrum-Button--staticWhite.spectrum-Button--secondary.spectrum-Button--outline`, `.spectrum-Button.spectrum-Button--staticBlack.spectrum-Button--outline`, `.spectrum-Button.spectrum-Button--staticBlack.spectrum-Button--secondary.spectrum-Button--outline`.
Used by `.spectrum-Button:active`.", + "control": "color", + "category": "Component" + }, + "spectrum-button-border-color-focus": { + "description": "Defined in `.spectrum-Button.is-selected`, `.spectrum-Button.spectrum-Button--accent`, `.spectrum-Button.spectrum-Button--accent.spectrum-Button--outline`, `.spectrum-Button.spectrum-Button--negative`, `.spectrum-Button.spectrum-Button--negative.spectrum-Button--outline`, `.spectrum-Button.spectrum-Button--primary`, `.spectrum-Button.spectrum-Button--primary.spectrum-Button--outline`, `.spectrum-Button.spectrum-Button--secondary`, `.spectrum-Button.spectrum-Button--secondary.spectrum-Button--outline`, `.spectrum-Button.spectrum-Button--quiet, .spectrum-Button.spectrum-Button--staticBlack, .spectrum-Button.spectrum-Button--staticWhite`, `.spectrum-Button.spectrum-Button--staticBlack.spectrum-Button--secondary, .spectrum-Button.spectrum-Button--staticWhite.spectrum-Button--secondary`, `.spectrum-Button.spectrum-Button--staticBlack.spectrum-Button--quiet, .spectrum-Button.spectrum-Button--staticWhite.spectrum-Button--quiet`, `.spectrum-Button`, `.spectrum-Button.spectrum-Button--staticWhite.spectrum-Button--outline`, `.spectrum-Button.spectrum-Button--staticWhite.spectrum-Button--secondary.spectrum-Button--outline`, `.spectrum-Button.spectrum-Button--staticBlack.spectrum-Button--outline`, `.spectrum-Button.spectrum-Button--staticBlack.spectrum-Button--secondary.spectrum-Button--outline`.
Used by `.spectrum-Button:focus-visible`.", + "control": "color", + "category": "Component" + }, + "spectrum-button-background-color-disabled": { + "description": "Defined in `.spectrum-Button.is-selected`, `.spectrum-Button.spectrum-Button--accent`, `.spectrum-Button.spectrum-Button--negative`, `.spectrum-Button.spectrum-Button--primary`, `.spectrum-Button.spectrum-Button--secondary`, `.spectrum-Button.spectrum-Button--staticBlack.spectrum-Button--secondary.spectrum-Button--outline, .spectrum-Button.spectrum-Button--staticWhite.spectrum-Button--secondary.spectrum-Button--outline`, `.spectrum-Button.spectrum-Button--staticWhite`, `.spectrum-Button.spectrum-Button--staticWhite.spectrum-Button--secondary`, `.spectrum-Button.spectrum-Button--staticBlack`, `.spectrum-Button.spectrum-Button--staticBlack.spectrum-Button--secondary`, `.spectrum-Button.spectrum-Button--outline, .spectrum-Button.spectrum-Button--quiet`, `.spectrum-Button`.
Used by `.spectrum-Button.is-disabled, .spectrum-Button.is-pending, .spectrum-Button:disabled, .spectrum-Button[pending]`.", + "control": "color", + "category": "Component" + }, + "spectrum-button-border-color-disabled": { + "description": "Defined in `.spectrum-Button.is-selected`, `.spectrum-Button.spectrum-Button--accent`, `.spectrum-Button.spectrum-Button--accent.spectrum-Button--outline`, `.spectrum-Button.spectrum-Button--negative`, `.spectrum-Button.spectrum-Button--negative.spectrum-Button--outline`, `.spectrum-Button.spectrum-Button--primary`, `.spectrum-Button.spectrum-Button--primary.spectrum-Button--outline`, `.spectrum-Button.spectrum-Button--secondary`, `.spectrum-Button.spectrum-Button--secondary.spectrum-Button--outline`, `.spectrum-Button.spectrum-Button--quiet, .spectrum-Button.spectrum-Button--staticBlack, .spectrum-Button.spectrum-Button--staticWhite`, `.spectrum-Button.spectrum-Button--staticBlack.is-selected, .spectrum-Button.spectrum-Button--staticWhite.is-selected`, `.spectrum-Button.spectrum-Button--staticBlack.spectrum-Button--secondary, .spectrum-Button.spectrum-Button--staticWhite.spectrum-Button--secondary`, `.spectrum-Button.spectrum-Button--staticBlack.spectrum-Button--quiet, .spectrum-Button.spectrum-Button--staticWhite.spectrum-Button--quiet`, `.spectrum-Button.spectrum-Button--staticWhite.spectrum-Button--outline`, `.spectrum-Button.spectrum-Button--staticBlack.spectrum-Button--outline`, `.spectrum-Button`.
Used by `.spectrum-Button.is-disabled, .spectrum-Button.is-pending, .spectrum-Button:disabled, .spectrum-Button[pending]`.", + "control": "color", + "category": "Component" + }, + "spectrum-button-background-color-default": { + "description": "Defined in `.spectrum-Button.is-selected.spectrum-Button--emphasized, .spectrum-Button.spectrum-Button--accent`, `.spectrum-Button.spectrum-Button--negative`, `.spectrum-Button.spectrum-Button--primary`, `.spectrum-Button.spectrum-Button--outline, .spectrum-Button.spectrum-Button--quiet`, `.spectrum-Button`, `.spectrum-Button.is-selected`, `.spectrum-Button.spectrum-Button--secondary`, `.spectrum-Button.spectrum-Button--staticWhite`, `.spectrum-Button.spectrum-Button--staticWhite.spectrum-Button--outline`, `.spectrum-Button.spectrum-Button--staticWhite.spectrum-Button--secondary`, `.spectrum-Button.spectrum-Button--staticWhite.spectrum-Button--secondary.spectrum-Button--outline`, `.spectrum-Button.spectrum-Button--staticBlack`, `.spectrum-Button.spectrum-Button--staticBlack.spectrum-Button--outline`, `.spectrum-Button.spectrum-Button--staticBlack.spectrum-Button--secondary`, `.spectrum-Button.spectrum-Button--staticBlack.spectrum-Button--secondary.spectrum-Button--outline`.
Used by `.spectrum-Button`.", + "control": "color", + "category": "Component" + }, + "spectrum-button-background-color-hover": { + "description": "Defined in `.spectrum-Button.is-selected.spectrum-Button--emphasized, .spectrum-Button.spectrum-Button--accent`, `.spectrum-Button.spectrum-Button--accent.spectrum-Button--outline`, `.spectrum-Button.spectrum-Button--negative`, `.spectrum-Button.spectrum-Button--negative.spectrum-Button--outline`, `.spectrum-Button.spectrum-Button--primary`, `.spectrum-Button.spectrum-Button--quiet`, `.spectrum-Button`, `.spectrum-Button.is-selected`, `.spectrum-Button.spectrum-Button--primary.spectrum-Button--outline`, `.spectrum-Button.spectrum-Button--secondary`, `.spectrum-Button.spectrum-Button--secondary.spectrum-Button--outline`, `.spectrum-Button.spectrum-Button--staticWhite`, `.spectrum-Button.spectrum-Button--staticWhite.spectrum-Button--outline`, `.spectrum-Button.spectrum-Button--staticWhite.spectrum-Button--secondary`, `.spectrum-Button.spectrum-Button--staticWhite.spectrum-Button--secondary.spectrum-Button--outline`, `.spectrum-Button.spectrum-Button--staticBlack`, `.spectrum-Button.spectrum-Button--staticBlack.spectrum-Button--outline`, `.spectrum-Button.spectrum-Button--staticBlack.spectrum-Button--secondary`, `.spectrum-Button.spectrum-Button--staticBlack.spectrum-Button--secondary.spectrum-Button--outline`.
Used by `.spectrum-Button:hover`.", + "control": "color", + "category": "Component" + }, + "spectrum-button-background-color-down": { + "description": "Defined in `.spectrum-Button.is-selected.spectrum-Button--emphasized, .spectrum-Button.spectrum-Button--accent`, `.spectrum-Button.spectrum-Button--accent.spectrum-Button--outline`, `.spectrum-Button.spectrum-Button--negative`, `.spectrum-Button.spectrum-Button--negative.spectrum-Button--outline`, `.spectrum-Button.spectrum-Button--primary`, `.spectrum-Button.spectrum-Button--secondary.spectrum-Button--outline`, `.spectrum-Button.spectrum-Button--quiet`, `.spectrum-Button`, `.spectrum-Button.is-selected`, `.spectrum-Button.spectrum-Button--primary.spectrum-Button--outline`, `.spectrum-Button.spectrum-Button--secondary`, `.spectrum-Button.spectrum-Button--staticWhite`, `.spectrum-Button.spectrum-Button--staticWhite.spectrum-Button--outline`, `.spectrum-Button.spectrum-Button--staticWhite.spectrum-Button--secondary`, `.spectrum-Button.spectrum-Button--staticWhite.spectrum-Button--secondary.spectrum-Button--outline`, `.spectrum-Button.spectrum-Button--staticBlack`, `.spectrum-Button.spectrum-Button--staticBlack.spectrum-Button--outline`, `.spectrum-Button.spectrum-Button--staticBlack.spectrum-Button--secondary`, `.spectrum-Button.spectrum-Button--staticBlack.spectrum-Button--secondary.spectrum-Button--outline`.
Used by `.spectrum-Button:active`.", + "control": "color", + "category": "Component" + }, + "spectrum-button-background-color-focus": { + "description": "Defined in `.spectrum-Button.is-selected.spectrum-Button--emphasized, .spectrum-Button.spectrum-Button--accent`, `.spectrum-Button.spectrum-Button--accent.spectrum-Button--outline`, `.spectrum-Button.spectrum-Button--negative`, `.spectrum-Button.spectrum-Button--negative.spectrum-Button--outline`, `.spectrum-Button.spectrum-Button--primary`, `.spectrum-Button.spectrum-Button--quiet`, `.spectrum-Button`, `.spectrum-Button.is-selected`, `.spectrum-Button.spectrum-Button--primary.spectrum-Button--outline`, `.spectrum-Button.spectrum-Button--secondary`, `.spectrum-Button.spectrum-Button--secondary.spectrum-Button--outline`, `.spectrum-Button.spectrum-Button--staticWhite`, `.spectrum-Button.spectrum-Button--staticWhite.spectrum-Button--outline`, `.spectrum-Button.spectrum-Button--staticWhite.spectrum-Button--secondary`, `.spectrum-Button.spectrum-Button--staticWhite.spectrum-Button--secondary.spectrum-Button--outline`, `.spectrum-Button.spectrum-Button--staticBlack`, `.spectrum-Button.spectrum-Button--staticBlack.spectrum-Button--outline`, `.spectrum-Button.spectrum-Button--staticBlack.spectrum-Button--secondary`, `.spectrum-Button.spectrum-Button--staticBlack.spectrum-Button--secondary.spectrum-Button--outline`.
Used by `.spectrum-Button:focus-visible`.", + "control": "color", + "category": "Component" + }, + "spectrum-button-focus-indicator-color": { + "description": "Defined in `.spectrum-Button.spectrum-Button--staticWhite`, `.spectrum-Button.spectrum-Button--staticBlack`, `.spectrum-Button`.
Used by `.spectrum-Button.is-focused:after, .spectrum-Button:focus-visible:after`.", + "control": "color", + "category": "Component" + }, + "spectrum-button-height": { + "description": "Defined in `.spectrum-Button`.
Used by `--spectrum-button-min-width`, `--spectrum-button-border-radius`, `.spectrum-Button`.", + "control": "text", + "category": "Component" + }, + "spectrum-button-min-width": { + "description": "Defined in `.spectrum-Button`.
Used by `.spectrum-Button`.", + "control": "text", + "category": "Component" + }, + "spectrum-button-minimum-width-multiplier": { + "value": "2.25", + "description": "Used by `--spectrum-button-min-width`.", + "control": "text", + "category": "Component" + }, + "spectrum-button-line-height": { + "description": "Defined in `.spectrum-Button`.
Used by `.spectrum-Button-label`.", + "control": "text", + "category": "Component" + }, + "spectrum-button-font-size": { + "description": "Defined in `.spectrum-Button`.
Used by `.spectrum-Button`.", + "control": "text", + "category": "Component" + }, + "spectrum-button-padding-label-to-icon": { + "description": "Defined in `.spectrum-Button`.
Used by `.spectrum-Button`.", + "control": "text", + "category": "Component" + }, + "spectrum-button-edge-to-visual": { + "description": "Defined in `.spectrum-Button`.
Used by `.spectrum-Button .spectrum-Icon`.", + "control": "text", + "category": "Component" + }, + "spectrum-button-edge-to-visual-only": { + "description": "Defined in `.spectrum-Button`.
Used by `.spectrum-Button.spectrum-Button--iconOnly`.", + "control": "text", + "category": "Component" + }, + "spectrum-button-edge-to-text": { + "description": "Defined in `.spectrum-Button`.
Used by `.spectrum-Button`, `.spectrum-Button .spectrum-Icon`.", + "control": "text", + "category": "Component" + }, + "spectrum-button-top-to-text": { + "description": "Defined in `.spectrum-Button`.
Used by `.spectrum-Button-label`.", + "control": "text", + "category": "Component" + }, + "spectrum-button-bottom-to-text": { + "description": "Defined in `.spectrum-Button`.
Used by `.spectrum-Button-label`.", + "control": "text", + "category": "Component" + }, + "spectrum-button-top-to-icon": { + "description": "Defined in `.spectrum-Button`.
Used by `.spectrum-Button .spectrum-Icon`.", + "control": "text", + "category": "Component" + }, + "spectrum-button-focus-ring-thickness": { + "description": "Defined in `.spectrum-Button`.
Used by `.spectrum-Button.is-focused:after, .spectrum-Button:focus-visible:after`, `.spectrum-Button:focus-visible:after`.", + "control": "text", + "category": "Component" + }, + "spectrum-button-animation-duration": { + "description": "Defined in `.spectrum-Button`.
Used by `.spectrum-Button`, `.spectrum-Button:after`, `.spectrum-Button .spectrum-Button-label, .spectrum-Button .spectrum-Icon`, `.spectrum-Button .spectrum-ProgressCircle`, `.spectrum-Button.is-pending .spectrum-Button-label, .spectrum-Button.is-pending .spectrum-Icon, .spectrum-Button[pending] .spectrum-Button-label, .spectrum-Button[pending] .spectrum-Icon`, `.spectrum-Button.is-pending .spectrum-ProgressCircle, .spectrum-Button[pending] .spectrum-ProgressCircle`.", + "control": "text", + "category": "Component" + }, + "spectrum-button-focus-ring-gap": { + "description": "Defined in `.spectrum-Button`.
Used by `.spectrum-Button:after`.", + "control": "text", + "category": "Component" + }, + "spectrum-button-border-radius": { + "description": "Defined in `.spectrum-Button`.
Used by `.spectrum-Button`, `.spectrum-Button:after`.", + "control": "text", + "category": "Component" + } + }, + "global": { + "spectrum-sans-font-family-stack": { + "description": "Used by `.spectrum-Button`.", + "control": "text", + "category": "Global" + }, + "spectrum-line-height-100": { + "value": "1.3", + "description": "Used by `.spectrum-Button`.", + "control": "text", + "category": "Global" + }, + "spectrum-animation-duration-100": { + "description": "Used by `.spectrum-Button`, `.spectrum-Button:after`, `--spectrum-button-animation-duration`.", + "control": "text", + "category": "Global" + }, + "spectrum-focus-indicator-gap": { + "value": "2px", + "description": "Used by `.spectrum-Button:after`, `.spectrum-Button:focus-visible:after`, `--spectrum-button-focus-ring-gap`.", + "control": "text", + "category": "Global" + }, + "spectrum-gray-50": { + "value": "light-dark(rgb(248, 248, 248), rgb(27, 27, 27))", + "description": "Used by `--system-button-background-color-default`.", + "control": "text", + "category": "Global" + }, + "spectrum-gray-100": { + "value": "light-dark(rgb(233, 233, 233), rgb(44, 44, 44))", + "description": "Used by `--system-button-background-color-hover`, `--system-button-background-color-focus`, `--system-button-primary-outline-background-color-hover`, `--system-button-primary-outline-background-color-down`, `--system-button-primary-outline-background-color-focus`, `--system-button-secondary-background-color-default`, `--system-button-secondary-outline-background-color-hover`, `--system-button-secondary-outline-background-color-down`, `--system-button-secondary-outline-background-color-focus`.", + "control": "text", + "category": "Global" + }, + "spectrum-gray-200": { + "value": "light-dark(rgb(225, 225, 225), rgb(50, 50, 50))", + "description": "Used by `--system-button-background-color-down`, `--system-button-secondary-background-color-hover`, `--system-button-secondary-background-color-down`, `--system-button-secondary-background-color-focus`, `--spectrum-button-background-color-hover`, `--spectrum-button-background-color-focus`.", + "control": "text", + "category": "Global" + }, + "spectrum-gray-400": { + "value": "light-dark(rgb(198, 198, 198), rgb(68, 68, 68))", + "description": "Used by `--system-button-border-color-default`, `--system-button-secondary-outline-border-color-down`, `--spectrum-button-background-color-down`, `--spectrum-button-border-color-hover`, `--spectrum-button-border-color-focus`.", + "control": "text", + "category": "Global" + }, + "spectrum-gray-500": { + "value": "light-dark(rgb(143, 143, 143), rgb(109, 109, 109))", + "description": "Used by `--system-button-border-color-hover`, `--system-button-border-color-focus`.", + "control": "text", + "category": "Global" + }, + "spectrum-gray-600": { + "value": "light-dark(rgb(113, 113, 113), rgb(138, 138, 138))", + "description": "Used by `--system-button-border-color-down`.", + "control": "text", + "category": "Global" + }, + "spectrum-disabled-border-color": { + "value": "var(--spectrum-gray-300)", + "description": "Used by `--system-button-border-color-disabled`, `--spectrum-button-border-color-disabled`.", + "control": "color", + "category": "Global" + }, + "spectrum-neutral-subdued-background-color-default": { + "value": "var(--spectrum-gray-500)", + "description": "Used by `--system-button-selected-background-color-default`.", + "control": "color", + "category": "Global" + }, + "spectrum-neutral-subdued-background-color-hover": { + "value": "var(--spectrum-gray-400)", + "description": "Used by `--system-button-selected-background-color-hover`.", + "control": "color", + "category": "Global" + }, + "spectrum-neutral-subdued-background-color-down": { + "value": "var(--spectrum-gray-400)", + "description": "Used by `--system-button-selected-background-color-down`.", + "control": "color", + "category": "Global" + }, + "spectrum-neutral-subdued-background-color-key-focus": { + "value": "var(--spectrum-gray-400)", + "description": "Used by `--system-button-selected-background-color-focus`.", + "control": "color", + "category": "Global" + }, + "spectrum-gray-25": { + "value": "light-dark(rgb(255, 255, 255), rgb(17, 17, 17))", + "description": "Used by `--system-button-primary-content-color-default`, `--system-button-primary-content-color-hover`, `--system-button-primary-content-color-down`, `--system-button-primary-content-color-focus`.", + "control": "text", + "category": "Global" + }, + "spectrum-gray-300": { + "value": "light-dark(rgb(218, 218, 218), rgb(57, 57, 57))", + "description": "Used by `--system-button-secondary-outline-border-color-default`, `--spectrum-button-border-color-default`, `--spectrum-button-background-color-down`.", + "control": "text", + "category": "Global" + }, + "spectrum-transparent-white-800": { + "value": "light-dark(rgba(255, 255, 255, 0.85), rgba(255, 255, 255, 0.85))", + "description": "Used by `--system-button-static-white-background-color-default`, `--system-button-static-white-outline-content-color-default`, `--system-button-static-white-outline-border-color-default`, `--system-button-static-white-secondary-content-color-default`.", + "control": "text", + "category": "Global" + }, + "spectrum-transparent-white-900": { + "value": "light-dark(rgba(255, 255, 255, 0.94), rgba(255, 255, 255, 0.94))", + "description": "Used by `--system-button-static-white-background-color-hover`, `--system-button-static-white-background-color-down`, `--system-button-static-white-background-color-focus`, `--system-button-static-white-outline-content-color-hover`, `--system-button-static-white-outline-content-color-down`, `--system-button-static-white-outline-content-color-focus`, `--system-button-static-white-outline-border-color-hover`, `--system-button-static-white-outline-border-color-down`, `--system-button-static-white-outline-border-color-focus`, `--system-button-static-white-secondary-content-color-hover`, `--system-button-static-white-secondary-content-color-down`, `--system-button-static-white-secondary-content-color-focus`.", + "control": "text", + "category": "Global" + }, + "spectrum-black": { + "value": "rgb(0, 0, 0)", + "description": "Used by `--system-button-static-white-content-color-default`, `--system-button-static-white-content-color-hover`, `--system-button-static-white-content-color-down`, `--system-button-static-white-content-color-focus`.", + "control": "text", + "category": "Global" + }, + "spectrum-transparent-white-25": { + "value": "light-dark(rgba(255, 255, 255, 0), rgba(255, 255, 255, 0))", + "description": "Used by `--system-button-static-white-outline-background-color-default`, `--system-button-static-white-secondary-outline-background-color-default`.", + "control": "text", + "category": "Global" + }, + "spectrum-transparent-white-100": { + "value": "light-dark(rgba(255, 255, 255, 0.11), rgba(255, 255, 255, 0.11))", + "description": "Used by `--system-button-static-white-outline-background-color-hover`, `--system-button-static-white-outline-background-color-down`, `--system-button-static-white-outline-background-color-focus`, `--system-button-static-white-secondary-background-color-default`, `--system-button-static-white-secondary-outline-background-color-hover`, `--system-button-static-white-secondary-outline-background-color-down`, `--system-button-static-white-secondary-outline-background-color-focus`.", + "control": "text", + "category": "Global" + }, + "spectrum-transparent-white-200": { + "value": "light-dark(rgba(255, 255, 255, 0.14), rgba(255, 255, 255, 0.14))", + "description": "Used by `--system-button-static-white-secondary-background-color-hover`, `--system-button-static-white-secondary-background-color-down`, `--system-button-static-white-secondary-background-color-focus`.", + "control": "text", + "category": "Global" + }, + "spectrum-transparent-white-300": { + "value": "light-dark(rgba(255, 255, 255, 0.17), rgba(255, 255, 255, 0.17))", + "description": "Used by `--system-button-static-white-secondary-outline-border-color-default`.", + "control": "text", + "category": "Global" + }, + "spectrum-transparent-white-400": { + "value": "light-dark(rgba(255, 255, 255, 0.21), rgba(255, 255, 255, 0.21))", + "description": "Used by `--system-button-static-white-secondary-outline-border-color-hover`, `--system-button-static-white-secondary-outline-border-color-down`, `--system-button-static-white-secondary-outline-border-color-focus`.", + "control": "text", + "category": "Global" + }, + "spectrum-transparent-black-800": { + "value": "light-dark(rgba(0, 0, 0, 0.84), rgba(0, 0, 0, 0.84))", + "description": "Used by `--system-button-static-black-background-color-default`, `--system-button-static-black-outline-content-color-default`, `--system-button-static-black-outline-border-color-default`, `--system-button-static-black-secondary-content-color-default`.", + "control": "text", + "category": "Global" + }, + "spectrum-transparent-black-900": { + "value": "light-dark(rgba(0, 0, 0, 0.93), rgba(0, 0, 0, 0.93))", + "description": "Used by `--system-button-static-black-background-color-hover`, `--system-button-static-black-background-color-down`, `--system-button-static-black-background-color-focus`, `--system-button-static-black-outline-content-color-hover`, `--system-button-static-black-outline-content-color-down`, `--system-button-static-black-outline-content-color-focus`, `--system-button-static-black-outline-border-color-hover`, `--system-button-static-black-outline-border-color-down`, `--system-button-static-black-outline-border-color-focus`, `--system-button-static-black-secondary-content-color-hover`, `--system-button-static-black-secondary-content-color-down`, `--system-button-static-black-secondary-content-color-focus`.", + "control": "text", + "category": "Global" + }, + "spectrum-white": { + "value": "light-dark(rgb(255, 255, 255), rgb(255, 255, 255))", + "description": "Used by `--system-button-static-black-content-color-default`, `--system-button-static-black-content-color-hover`, `--system-button-static-black-content-color-down`, `--system-button-static-black-content-color-focus`, `--spectrum-button-content-color-default`, `--spectrum-button-content-color-hover`, `--spectrum-button-content-color-down`, `--spectrum-button-content-color-focus`.", + "control": "text", + "category": "Global" + }, + "spectrum-transparent-black-25": { + "value": "light-dark(rgba(0, 0, 0, 0), rgba(0, 0, 0, 0))", + "description": "Used by `--system-button-static-black-outline-background-color-default`, `--system-button-static-black-secondary-outline-background-color-default`.", + "control": "text", + "category": "Global" + }, + "spectrum-transparent-black-100": { + "value": "light-dark(rgba(0, 0, 0, 0.09), rgba(0, 0, 0, 0.09))", + "description": "Used by `--system-button-static-black-outline-background-color-hover`, `--system-button-static-black-outline-background-color-down`, `--system-button-static-black-outline-background-color-focus`, `--system-button-static-black-secondary-background-color-default`, `--system-button-static-black-secondary-outline-background-color-hover`, `--system-button-static-black-secondary-outline-background-color-down`, `--system-button-static-black-secondary-outline-background-color-focus`.", + "control": "text", + "category": "Global" + }, + "spectrum-transparent-black-200": { + "value": "light-dark(rgba(0, 0, 0, 0.12), rgba(0, 0, 0, 0.12))", + "description": "Used by `--system-button-static-black-secondary-background-color-hover`, `--system-button-static-black-secondary-background-color-down`, `--system-button-static-black-secondary-background-color-focus`.", + "control": "text", + "category": "Global" + }, + "spectrum-transparent-black-300": { + "value": "light-dark(rgba(0, 0, 0, 0.15), rgba(0, 0, 0, 0.15))", + "description": "Used by `--system-button-static-black-secondary-outline-border-color-default`.", + "control": "text", + "category": "Global" + }, + "spectrum-transparent-black-400": { + "value": "light-dark(rgba(0, 0, 0, 0.22), rgba(0, 0, 0, 0.22))", + "description": "Used by `--system-button-static-black-secondary-outline-border-color-hover`, `--system-button-static-black-secondary-outline-border-color-down`, `--system-button-static-black-secondary-outline-border-color-focus`.", + "control": "text", + "category": "Global" + }, + "spectrum-component-height-100": { + "value": "32px", + "description": "Used by `--spectrum-button-sized-height`.", + "control": "text", + "category": "Global" + }, + "spectrum-font-size-100": { + "value": "14px", + "description": "Used by `--spectrum-button-sized-font-size`.", + "control": "text", + "category": "Global" + }, + "spectrum-component-pill-edge-to-visual-100": { + "value": "14px", + "description": "Used by `--spectrum-button-sized-edge-to-visual`.", + "control": "text", + "category": "Global" + }, + "spectrum-component-pill-edge-to-visual-only-100": { + "value": "6px", + "description": "Used by `--spectrum-button-sized-edge-to-visual-only`.", + "control": "text", + "category": "Global" + }, + "spectrum-component-pill-edge-to-text-100": { + "value": "16px", + "description": "Used by `--spectrum-button-sized-edge-to-text`.", + "control": "text", + "category": "Global" + }, + "spectrum-text-to-visual-100": { + "value": "6px", + "description": "Used by `--spectrum-button-sized-padding-label-to-icon`.", + "control": "text", + "category": "Global" + }, + "spectrum-component-top-to-workflow-icon-100": { + "value": "6px", + "description": "Used by `--spectrum-button-sized-top-to-icon`.", + "control": "text", + "category": "Global" + }, + "spectrum-workflow-icon-size-100": { + "value": "20px", + "description": "Used by `--spectrum-button-intended-icon-size`.", + "control": "text", + "category": "Global" + }, + "spectrum-component-height-75": { + "value": "24px", + "description": "Used by `--spectrum-button-sized-height`.", + "control": "text", + "category": "Global" + }, + "spectrum-font-size-75": { + "value": "12px", + "description": "Used by `--spectrum-button-sized-font-size`.", + "control": "text", + "category": "Global" + }, + "spectrum-component-pill-edge-to-visual-75": { + "value": "11px", + "description": "Used by `--spectrum-button-sized-edge-to-visual`.", + "control": "text", + "category": "Global" + }, + "spectrum-component-pill-edge-to-visual-only-75": { + "value": "4px", + "description": "Used by `--spectrum-button-sized-edge-to-visual-only`.", + "control": "text", + "category": "Global" + }, + "spectrum-component-pill-edge-to-text-75": { + "value": "13px", + "description": "Used by `--spectrum-button-sized-edge-to-text`.", + "control": "text", + "category": "Global" + }, + "spectrum-text-to-visual-75": { + "value": "5px", + "description": "Used by `--spectrum-button-sized-padding-label-to-icon`.", + "control": "text", + "category": "Global" + }, + "spectrum-component-top-to-workflow-icon-75": { + "value": "4px", + "description": "Used by `--spectrum-button-sized-top-to-icon`.", + "control": "text", + "category": "Global" + }, + "spectrum-workflow-icon-size-75": { + "value": "16px", + "description": "Used by `--spectrum-button-intended-icon-size`.", + "control": "text", + "category": "Global" + }, + "spectrum-component-height-200": { + "value": "40px", + "description": "Used by `--spectrum-button-sized-height`.", + "control": "text", + "category": "Global" + }, + "spectrum-font-size-200": { + "value": "16px", + "description": "Used by `--spectrum-button-sized-font-size`.", + "control": "text", + "category": "Global" + }, + "spectrum-component-pill-edge-to-visual-200": { + "value": "18px", + "description": "Used by `--spectrum-button-sized-edge-to-visual`.", + "control": "text", + "category": "Global" + }, + "spectrum-component-pill-edge-to-visual-only-200": { + "value": "9px", + "description": "Used by `--spectrum-button-sized-edge-to-visual-only`.", + "control": "text", + "category": "Global" + }, + "spectrum-component-pill-edge-to-text-200": { + "value": "20px", + "description": "Used by `--spectrum-button-sized-edge-to-text`.", + "control": "text", + "category": "Global" + }, + "spectrum-text-to-visual-200": { + "value": "7px", + "description": "Used by `--spectrum-button-sized-padding-label-to-icon`.", + "control": "text", + "category": "Global" + }, + "spectrum-component-top-to-workflow-icon-200": { + "value": "9px", + "description": "Used by `--spectrum-button-sized-top-to-icon`.", + "control": "text", + "category": "Global" + }, + "spectrum-workflow-icon-size-200": { + "value": "22px", + "description": "Used by `--spectrum-button-intended-icon-size`.", + "control": "text", + "category": "Global" + }, + "spectrum-component-height-300": { + "value": "48px", + "description": "Used by `--spectrum-button-sized-height`.", + "control": "text", + "category": "Global" + }, + "spectrum-font-size-300": { + "value": "18px", + "description": "Used by `--spectrum-button-sized-font-size`.", + "control": "text", + "category": "Global" + }, + "spectrum-component-pill-edge-to-visual-300": { + "value": "20px", + "description": "Used by `--spectrum-button-sized-edge-to-visual`.", + "control": "text", + "category": "Global" + }, + "spectrum-component-pill-edge-to-visual-only-300": { + "value": "11px", + "description": "Used by `--spectrum-button-sized-edge-to-visual-only`.", + "control": "text", + "category": "Global" + }, + "spectrum-component-pill-edge-to-text-300": { + "value": "23px", + "description": "Used by `--spectrum-button-sized-edge-to-text`.", + "control": "text", + "category": "Global" + }, + "spectrum-text-to-visual-300": { + "value": "8px", + "description": "Used by `--spectrum-button-sized-padding-label-to-icon`.", + "control": "text", + "category": "Global" + }, + "spectrum-component-top-to-workflow-icon-300": { + "value": "11px", + "description": "Used by `--spectrum-button-sized-top-to-icon`.", + "control": "text", + "category": "Global" + }, + "spectrum-workflow-icon-size-300": { + "value": "26px", + "description": "Used by `--spectrum-button-intended-icon-size`.", + "control": "text", + "category": "Global" + }, + "spectrum-neutral-content-color-default": { + "value": "var(--spectrum-gray-800)", + "description": "Used by `--spectrum-button-content-color-default`.", + "control": "color", + "category": "Global" + }, + "spectrum-neutral-content-color-hover": { + "value": "var(--spectrum-gray-900)", + "description": "Used by `--spectrum-button-content-color-hover`.", + "control": "color", + "category": "Global" + }, + "spectrum-neutral-content-color-down": { + "value": "var(--spectrum-gray-900)", + "description": "Used by `--spectrum-button-content-color-down`.", + "control": "color", + "category": "Global" + }, + "spectrum-neutral-content-color-key-focus": { + "value": "var(--spectrum-gray-900)", + "description": "Used by `--spectrum-button-content-color-focus`.", + "control": "color", + "category": "Global" + }, + "spectrum-disabled-content-color": { + "value": "var(--spectrum-gray-400)", + "description": "Used by `--spectrum-button-content-color-disabled`.", + "control": "color", + "category": "Global" + }, + "spectrum-disabled-background-color": { + "value": "var(--spectrum-gray-100)", + "description": "Used by `--spectrum-button-background-color-disabled`.", + "control": "color", + "category": "Global" + }, + "spectrum-accent-background-color-default": { + "value": "var(--spectrum-accent-color-800)", + "description": "Used by `--spectrum-button-background-color-default`.", + "control": "color", + "category": "Global" + }, + "spectrum-accent-background-color-hover": { + "value": "var(--spectrum-accent-color-700)", + "description": "Used by `--spectrum-button-background-color-hover`.", + "control": "color", + "category": "Global" + }, + "spectrum-accent-background-color-down": { + "value": "var(--spectrum-accent-color-700)", + "description": "Used by `--spectrum-button-background-color-down`.", + "control": "color", + "category": "Global" + }, + "spectrum-accent-background-color-key-focus": { + "value": "var(--spectrum-accent-color-700)", + "description": "Used by `--spectrum-button-background-color-focus`.", + "control": "color", + "category": "Global" + }, + "spectrum-accent-color-200": { + "value": "var(--spectrum-blue-200)", + "description": "Used by `--spectrum-button-background-color-hover`, `--spectrum-button-background-color-focus`.", + "control": "color", + "category": "Global" + }, + "spectrum-accent-color-300": { + "value": "var(--spectrum-blue-300)", + "description": "Used by `--spectrum-button-background-color-down`.", + "control": "color", + "category": "Global" + }, + "spectrum-accent-color-900": { + "value": "var(--spectrum-blue-900)", + "description": "Used by `--spectrum-button-border-color-default`.", + "control": "color", + "category": "Global" + }, + "spectrum-accent-color-1000": { + "value": "var(--spectrum-blue-1000)", + "description": "Used by `--spectrum-button-border-color-hover`, `--spectrum-button-border-color-focus`.", + "control": "color", + "category": "Global" + }, + "spectrum-accent-color-1100": { + "value": "var(--spectrum-blue-1100)", + "description": "Used by `--spectrum-button-border-color-down`.", + "control": "color", + "category": "Global" + }, + "spectrum-accent-content-color-default": { + "value": "var(--spectrum-accent-color-900)", + "description": "Used by `--spectrum-button-content-color-default`.", + "control": "color", + "category": "Global" + }, + "spectrum-accent-content-color-hover": { + "value": "var(--spectrum-accent-color-1000)", + "description": "Used by `--spectrum-button-content-color-hover`.", + "control": "color", + "category": "Global" + }, + "spectrum-accent-content-color-down": { + "value": "var(--spectrum-accent-color-1000)", + "description": "Used by `--spectrum-button-content-color-down`.", + "control": "color", + "category": "Global" + }, + "spectrum-accent-content-color-key-focus": { + "value": "var(--spectrum-accent-color-1000)", + "description": "Used by `--spectrum-button-content-color-focus`.", + "control": "color", + "category": "Global" + }, + "spectrum-negative-background-color-default": { + "value": "var(--spectrum-negative-color-800)", + "description": "Used by `--spectrum-button-background-color-default`.", + "control": "color", + "category": "Global" + }, + "spectrum-negative-background-color-hover": { + "value": "var(--spectrum-negative-color-700)", + "description": "Used by `--spectrum-button-background-color-hover`.", + "control": "color", + "category": "Global" + }, + "spectrum-negative-background-color-down": { + "value": "var(--spectrum-negative-color-700)", + "description": "Used by `--spectrum-button-background-color-down`.", + "control": "color", + "category": "Global" + }, + "spectrum-negative-background-color-key-focus": { + "value": "var(--spectrum-negative-color-700)", + "description": "Used by `--spectrum-button-background-color-focus`.", + "control": "color", + "category": "Global" + }, + "spectrum-negative-color-200": { + "value": "var(--spectrum-red-200)", + "description": "Used by `--spectrum-button-background-color-hover`, `--spectrum-button-background-color-focus`.", + "control": "color", + "category": "Global" + }, + "spectrum-negative-color-300": { + "value": "var(--spectrum-red-300)", + "description": "Used by `--spectrum-button-background-color-down`.", + "control": "color", + "category": "Global" + }, + "spectrum-negative-color-900": { + "value": "var(--spectrum-red-900)", + "description": "Used by `--spectrum-button-border-color-default`.", + "control": "color", + "category": "Global" + }, + "spectrum-negative-color-1000": { + "value": "var(--spectrum-red-1000)", + "description": "Used by `--spectrum-button-border-color-hover`, `--spectrum-button-border-color-focus`.", + "control": "color", + "category": "Global" + }, + "spectrum-negative-color-1100": { + "value": "var(--spectrum-red-1100)", + "description": "Used by `--spectrum-button-border-color-down`.", + "control": "color", + "category": "Global" + }, + "spectrum-negative-content-color-default": { + "value": "var(--spectrum-negative-color-900)", + "description": "Used by `--spectrum-button-content-color-default`.", + "control": "color", + "category": "Global" + }, + "spectrum-negative-content-color-hover": { + "value": "var(--spectrum-negative-color-1000)", + "description": "Used by `--spectrum-button-content-color-hover`.", + "control": "color", + "category": "Global" + }, + "spectrum-negative-content-color-down": { + "value": "var(--spectrum-negative-color-1000)", + "description": "Used by `--spectrum-button-content-color-down`.", + "control": "color", + "category": "Global" + }, + "spectrum-negative-content-color-key-focus": { + "value": "var(--spectrum-negative-color-1000)", + "description": "Used by `--spectrum-button-content-color-focus`.", + "control": "color", + "category": "Global" + }, + "spectrum-neutral-background-color-default": { + "value": "var(--spectrum-gray-800)", + "description": "Used by `--spectrum-button-background-color-default`.", + "control": "color", + "category": "Global" + }, + "spectrum-neutral-background-color-hover": { + "value": "var(--spectrum-gray-900)", + "description": "Used by `--spectrum-button-background-color-hover`.", + "control": "color", + "category": "Global" + }, + "spectrum-neutral-background-color-down": { + "value": "var(--spectrum-gray-900)", + "description": "Used by `--spectrum-button-background-color-down`.", + "control": "color", + "category": "Global" + }, + "spectrum-neutral-background-color-key-focus": { + "value": "var(--spectrum-gray-900)", + "description": "Used by `--spectrum-button-background-color-focus`.", + "control": "color", + "category": "Global" + }, + "spectrum-gray-800": { + "value": "light-dark(rgb(41, 41, 41), rgb(219, 219, 219))", + "description": "Used by `--spectrum-button-border-color-default`.", + "control": "text", + "category": "Global" + }, + "spectrum-gray-900": { + "value": "light-dark(rgb(19, 19, 19), rgb(242, 242, 242))", + "description": "Used by `--spectrum-button-border-color-hover`, `--spectrum-button-border-color-down`, `--spectrum-button-border-color-focus`.", + "control": "text", + "category": "Global" + }, + "spectrum-disabled-static-white-content-color": { + "value": "var(--spectrum-transparent-white-400)", + "description": "Used by `--spectrum-button-content-color-disabled`.", + "control": "color", + "category": "Global" + }, + "spectrum-disabled-static-white-background-color": { + "value": "var(--spectrum-transparent-white-100)", + "description": "Used by `--spectrum-button-background-color-disabled`.", + "control": "color", + "category": "Global" + }, + "spectrum-static-white-focus-indicator-color": { + "value": "var(--spectrum-white)", + "description": "Used by `--spectrum-button-focus-indicator-color`.", + "control": "color", + "category": "Global" + }, + "spectrum-disabled-static-white-border-color": { + "value": "var(--spectrum-transparent-white-300)", + "description": "Used by `--spectrum-button-border-color-disabled`.", + "control": "color", + "category": "Global" + }, + "spectrum-disabled-static-black-content-color": { + "value": "var(--spectrum-transparent-black-400)", + "description": "Used by `--spectrum-button-content-color-disabled`.", + "control": "color", + "category": "Global" + }, + "spectrum-disabled-static-black-background-color": { + "value": "var(--spectrum-transparent-black-100)", + "description": "Used by `--spectrum-button-background-color-disabled`.", + "control": "color", + "category": "Global" + }, + "spectrum-static-black-focus-indicator-color": { + "value": "rgb(0, 0, 0)", + "description": "Used by `--spectrum-button-focus-indicator-color`.", + "control": "color", + "category": "Global" + }, + "spectrum-disabled-static-black-border-color": { + "value": "var(--spectrum-transparent-black-300)", + "description": "Used by `--spectrum-button-border-color-disabled`.", + "control": "color", + "category": "Global" + }, + "spectrum-focus-indicator-thickness": { + "value": "2px", + "description": "Used by `--spectrum-button-focus-ring-thickness`.", + "control": "text", + "category": "Global" + }, + "spectrum-focus-indicator-color": { + "value": "var(--spectrum-blue-800)", + "description": "Used by `--spectrum-button-focus-indicator-color`.", + "control": "color", + "category": "Global" + }, + "spectrum-border-width-200": { + "value": "2px", + "description": "Used by `--spectrum-button-border-width`.", + "control": "text", + "category": "Global" + }, + "spectrum-bold-font-weight": { + "value": "700", + "description": "Used by `.spectrum-Button`.", + "control": "text", + "category": "Global" + }, + "spectrum-icon-block-size": { + "value": "var(--spectrum-button-intended-icon-size)", + "description": "Used by `--_icon-size-difference`.
Defaults to `var(--spectrum-button-intended-icon-size)`, if not set.", + "control": "text", + "category": "Global" + }, + "spectrum-progress-circle-thickness-medium": { + "value": "3px", + "description": "Used by `--mod-progress-circle-thickness`.", + "control": "text", + "category": "Global" + } + }, + "system-theme": { + "system-button-background-color-default": { + "description": "Defined in `.spectrum`.
Used by `--spectrum-button-background-color-default`.", + "control": "color" + }, + "system-button-background-color-hover": { + "description": "Defined in `.spectrum`.
Used by `--spectrum-button-background-color-hover`.", + "control": "color" + }, + "system-button-background-color-down": { + "description": "Defined in `.spectrum`.
Used by `--spectrum-button-background-color-down`.", + "control": "color" + }, + "system-button-background-color-focus": { + "description": "Defined in `.spectrum`.
Used by `--spectrum-button-background-color-focus`.", + "control": "color" + }, + "system-button-border-color-default": { + "description": "Defined in `.spectrum`.
Used by `--spectrum-button-border-color-default`.", + "control": "color" + }, + "system-button-border-color-hover": { + "description": "Defined in `.spectrum`.
Used by `--spectrum-button-border-color-hover`.", + "control": "color" + }, + "system-button-border-color-down": { + "description": "Defined in `.spectrum`.
Used by `--spectrum-button-border-color-down`.", + "control": "color" + }, + "system-button-border-color-focus": { + "description": "Defined in `.spectrum`.
Used by `--spectrum-button-border-color-focus`.", + "control": "color" + }, + "system-button-background-color-disabled": { + "description": "Defined in `.spectrum`.
Used by `--spectrum-button-background-color-disabled`.", + "control": "color" + }, + "system-button-border-color-disabled": { + "description": "Defined in `.spectrum`.
Used by `--spectrum-button-border-color-disabled`.", + "control": "color" + }, + "system-button-selected-background-color-default": { + "description": "Defined in `.spectrum`.
Used by `--spectrum-button-background-color-default`.", + "control": "color" + }, + "system-button-selected-background-color-hover": { + "description": "Defined in `.spectrum`.
Used by `--spectrum-button-background-color-hover`.", + "control": "color" + }, + "system-button-selected-background-color-down": { + "description": "Defined in `.spectrum`.
Used by `--spectrum-button-background-color-down`.", + "control": "color" + }, + "system-button-selected-background-color-focus": { + "description": "Defined in `.spectrum`.
Used by `--spectrum-button-background-color-focus`.", + "control": "color" + }, + "system-button-primary-content-color-default": { + "description": "Defined in `.spectrum`.
Used by `--spectrum-button-content-color-default`.", + "control": "color" + }, + "system-button-primary-content-color-hover": { + "description": "Defined in `.spectrum`.
Used by `--spectrum-button-content-color-hover`.", + "control": "color" + }, + "system-button-primary-content-color-down": { + "description": "Defined in `.spectrum`.
Used by `--spectrum-button-content-color-down`.", + "control": "color" + }, + "system-button-primary-content-color-focus": { + "description": "Defined in `.spectrum`.
Used by `--spectrum-button-content-color-focus`.", + "control": "color" + }, + "system-button-primary-outline-background-color-hover": { + "description": "Defined in `.spectrum`.
Used by `--spectrum-button-background-color-hover`.", + "control": "color" + }, + "system-button-primary-outline-background-color-down": { + "description": "Defined in `.spectrum`.
Used by `--spectrum-button-background-color-down`.", + "control": "color" + }, + "system-button-primary-outline-background-color-focus": { + "description": "Defined in `.spectrum`.
Used by `--spectrum-button-background-color-focus`.", + "control": "color" + }, + "system-button-secondary-background-color-default": { + "description": "Defined in `.spectrum`.
Used by `--spectrum-button-background-color-default`.", + "control": "color" + }, + "system-button-secondary-background-color-hover": { + "description": "Defined in `.spectrum`.
Used by `--spectrum-button-background-color-hover`.", + "control": "color" + }, + "system-button-secondary-background-color-down": { + "description": "Defined in `.spectrum`.
Used by `--spectrum-button-background-color-down`.", + "control": "color" + }, + "system-button-secondary-background-color-focus": { + "description": "Defined in `.spectrum`.
Used by `--spectrum-button-background-color-focus`.", + "control": "color" + }, + "system-button-secondary-outline-background-color-hover": { + "description": "Defined in `.spectrum`.
Used by `--spectrum-button-background-color-hover`.", + "control": "color" + }, + "system-button-secondary-outline-background-color-down": { + "description": "Defined in `.spectrum`.
Used by `--spectrum-button-background-color-down`.", + "control": "color" + }, + "system-button-secondary-outline-background-color-focus": { + "description": "Defined in `.spectrum`.
Used by `--spectrum-button-background-color-focus`.", + "control": "color" + }, + "system-button-secondary-outline-border-color-default": { + "description": "Defined in `.spectrum`.
Used by `--spectrum-button-border-color-default`.", + "control": "color" + }, + "system-button-secondary-outline-border-color-down": { + "description": "Defined in `.spectrum`.
Used by `--spectrum-button-border-color-down`.", + "control": "color" + }, + "system-button-static-white-background-color-default": { + "description": "Defined in `.spectrum`.
Used by `--spectrum-button-background-color-default`.", + "control": "color" + }, + "system-button-static-white-background-color-hover": { + "description": "Defined in `.spectrum`.
Used by `--spectrum-button-background-color-hover`.", + "control": "color" + }, + "system-button-static-white-background-color-down": { + "description": "Defined in `.spectrum`.
Used by `--spectrum-button-background-color-down`.", + "control": "color" + }, + "system-button-static-white-background-color-focus": { + "description": "Defined in `.spectrum`.
Used by `--spectrum-button-background-color-focus`.", + "control": "color" + }, + "system-button-static-white-content-color-default": { + "description": "Defined in `.spectrum`.
Used by `--spectrum-button-content-color-default`.", + "control": "color" + }, + "system-button-static-white-content-color-hover": { + "description": "Defined in `.spectrum`.
Used by `--spectrum-button-content-color-hover`.", + "control": "color" + }, + "system-button-static-white-content-color-down": { + "description": "Defined in `.spectrum`.
Used by `--spectrum-button-content-color-down`.", + "control": "color" + }, + "system-button-static-white-content-color-focus": { + "description": "Defined in `.spectrum`.
Used by `--spectrum-button-content-color-focus`.", + "control": "color" + }, + "system-button-static-white-outline-background-color-default": { + "description": "Defined in `.spectrum`.
Used by `--spectrum-button-background-color-default`.", + "control": "color" + }, + "system-button-static-white-outline-background-color-hover": { + "description": "Defined in `.spectrum`.
Used by `--spectrum-button-background-color-hover`.", + "control": "color" + }, + "system-button-static-white-outline-background-color-down": { + "description": "Defined in `.spectrum`.
Used by `--spectrum-button-background-color-down`.", + "control": "color" + }, + "system-button-static-white-outline-background-color-focus": { + "description": "Defined in `.spectrum`.
Used by `--spectrum-button-background-color-focus`.", + "control": "color" + }, + "system-button-static-white-outline-content-color-default": { + "description": "Defined in `.spectrum`.
Used by `--spectrum-button-content-color-default`.", + "control": "color" + }, + "system-button-static-white-outline-content-color-hover": { + "description": "Defined in `.spectrum`.
Used by `--spectrum-button-content-color-hover`.", + "control": "color" + }, + "system-button-static-white-outline-content-color-down": { + "description": "Defined in `.spectrum`.
Used by `--spectrum-button-content-color-down`.", + "control": "color" + }, + "system-button-static-white-outline-content-color-focus": { + "description": "Defined in `.spectrum`.
Used by `--spectrum-button-content-color-focus`.", + "control": "color" + }, + "system-button-static-white-outline-border-color-default": { + "description": "Defined in `.spectrum`.
Used by `--spectrum-button-border-color-default`.", + "control": "color" + }, + "system-button-static-white-outline-border-color-hover": { + "description": "Defined in `.spectrum`.
Used by `--spectrum-button-border-color-hover`.", + "control": "color" + }, + "system-button-static-white-outline-border-color-down": { + "description": "Defined in `.spectrum`.
Used by `--spectrum-button-border-color-down`.", + "control": "color" + }, + "system-button-static-white-outline-border-color-focus": { + "description": "Defined in `.spectrum`.
Used by `--spectrum-button-border-color-focus`.", + "control": "color" + }, + "system-button-static-white-secondary-background-color-default": { + "description": "Defined in `.spectrum`.
Used by `--spectrum-button-background-color-default`.", + "control": "color" + }, + "system-button-static-white-secondary-background-color-hover": { + "description": "Defined in `.spectrum`.
Used by `--spectrum-button-background-color-hover`.", + "control": "color" + }, + "system-button-static-white-secondary-background-color-down": { + "description": "Defined in `.spectrum`.
Used by `--spectrum-button-background-color-down`.", + "control": "color" + }, + "system-button-static-white-secondary-background-color-focus": { + "description": "Defined in `.spectrum`.
Used by `--spectrum-button-background-color-focus`.", + "control": "color" + }, + "system-button-static-white-secondary-content-color-default": { + "description": "Defined in `.spectrum`.
Used by `--spectrum-button-content-color-default`.", + "control": "color" + }, + "system-button-static-white-secondary-content-color-hover": { + "description": "Defined in `.spectrum`.
Used by `--spectrum-button-content-color-hover`.", + "control": "color" + }, + "system-button-static-white-secondary-content-color-down": { + "description": "Defined in `.spectrum`.
Used by `--spectrum-button-content-color-down`.", + "control": "color" + }, + "system-button-static-white-secondary-content-color-focus": { + "description": "Defined in `.spectrum`.
Used by `--spectrum-button-content-color-focus`.", + "control": "color" + }, + "system-button-static-white-secondary-outline-border-color-default": { + "description": "Defined in `.spectrum`.
Used by `--spectrum-button-border-color-default`.", + "control": "color" + }, + "system-button-static-white-secondary-outline-border-color-hover": { + "description": "Defined in `.spectrum`.
Used by `--spectrum-button-border-color-hover`.", + "control": "color" + }, + "system-button-static-white-secondary-outline-border-color-down": { + "description": "Defined in `.spectrum`.
Used by `--spectrum-button-border-color-down`.", + "control": "color" + }, + "system-button-static-white-secondary-outline-border-color-focus": { + "description": "Defined in `.spectrum`.
Used by `--spectrum-button-border-color-focus`.", + "control": "color" + }, + "system-button-static-white-secondary-outline-background-color-default": { + "description": "Defined in `.spectrum`.
Used by `--spectrum-button-background-color-default`.", + "control": "color" + }, + "system-button-static-white-secondary-outline-background-color-hover": { + "description": "Defined in `.spectrum`.
Used by `--spectrum-button-background-color-hover`.", + "control": "color" + }, + "system-button-static-white-secondary-outline-background-color-down": { + "description": "Defined in `.spectrum`.
Used by `--spectrum-button-background-color-down`.", + "control": "color" + }, + "system-button-static-white-secondary-outline-background-color-focus": { + "description": "Defined in `.spectrum`.
Used by `--spectrum-button-background-color-focus`.", + "control": "color" + }, + "system-button-static-black-background-color-default": { + "description": "Defined in `.spectrum`.
Used by `--spectrum-button-background-color-default`.", + "control": "color" + }, + "system-button-static-black-background-color-hover": { + "description": "Defined in `.spectrum`.
Used by `--spectrum-button-background-color-hover`.", + "control": "color" + }, + "system-button-static-black-background-color-down": { + "description": "Defined in `.spectrum`.
Used by `--spectrum-button-background-color-down`.", + "control": "color" + }, + "system-button-static-black-background-color-focus": { + "description": "Defined in `.spectrum`.
Used by `--spectrum-button-background-color-focus`.", + "control": "color" + }, + "system-button-static-black-content-color-default": { + "description": "Defined in `.spectrum`.
Used by `--spectrum-button-content-color-default`.", + "control": "color" + }, + "system-button-static-black-content-color-hover": { + "description": "Defined in `.spectrum`.
Used by `--spectrum-button-content-color-hover`.", + "control": "color" + }, + "system-button-static-black-content-color-down": { + "description": "Defined in `.spectrum`.
Used by `--spectrum-button-content-color-down`.", + "control": "color" + }, + "system-button-static-black-content-color-focus": { + "description": "Defined in `.spectrum`.
Used by `--spectrum-button-content-color-focus`.", + "control": "color" + }, + "system-button-static-black-outline-background-color-default": { + "description": "Defined in `.spectrum`.
Used by `--spectrum-button-background-color-default`.", + "control": "color" + }, + "system-button-static-black-outline-background-color-hover": { + "description": "Defined in `.spectrum`.
Used by `--spectrum-button-background-color-hover`.", + "control": "color" + }, + "system-button-static-black-outline-background-color-down": { + "description": "Defined in `.spectrum`.
Used by `--spectrum-button-background-color-down`.", + "control": "color" + }, + "system-button-static-black-outline-background-color-focus": { + "description": "Defined in `.spectrum`.
Used by `--spectrum-button-background-color-focus`.", + "control": "color" + }, + "system-button-static-black-outline-content-color-default": { + "description": "Defined in `.spectrum`.
Used by `--spectrum-button-content-color-default`.", + "control": "color" + }, + "system-button-static-black-outline-content-color-hover": { + "description": "Defined in `.spectrum`.
Used by `--spectrum-button-content-color-hover`.", + "control": "color" + }, + "system-button-static-black-outline-content-color-down": { + "description": "Defined in `.spectrum`.
Used by `--spectrum-button-content-color-down`.", + "control": "color" + }, + "system-button-static-black-outline-content-color-focus": { + "description": "Defined in `.spectrum`.
Used by `--spectrum-button-content-color-focus`.", + "control": "color" + }, + "system-button-static-black-outline-border-color-default": { + "description": "Defined in `.spectrum`.
Used by `--spectrum-button-border-color-default`.", + "control": "color" + }, + "system-button-static-black-outline-border-color-hover": { + "description": "Defined in `.spectrum`.
Used by `--spectrum-button-border-color-hover`.", + "control": "color" + }, + "system-button-static-black-outline-border-color-down": { + "description": "Defined in `.spectrum`.
Used by `--spectrum-button-border-color-down`.", + "control": "color" + }, + "system-button-static-black-outline-border-color-focus": { + "description": "Defined in `.spectrum`.
Used by `--spectrum-button-border-color-focus`.", + "control": "color" + }, + "system-button-static-black-secondary-background-color-default": { + "description": "Defined in `.spectrum`.
Used by `--spectrum-button-background-color-default`.", + "control": "color" + }, + "system-button-static-black-secondary-background-color-hover": { + "description": "Defined in `.spectrum`.
Used by `--spectrum-button-background-color-hover`.", + "control": "color" + }, + "system-button-static-black-secondary-background-color-down": { + "description": "Defined in `.spectrum`.
Used by `--spectrum-button-background-color-down`.", + "control": "color" + }, + "system-button-static-black-secondary-background-color-focus": { + "description": "Defined in `.spectrum`.
Used by `--spectrum-button-background-color-focus`.", + "control": "color" + }, + "system-button-static-black-secondary-content-color-default": { + "description": "Defined in `.spectrum`.
Used by `--spectrum-button-content-color-default`.", + "control": "color" + }, + "system-button-static-black-secondary-content-color-hover": { + "description": "Defined in `.spectrum`.
Used by `--spectrum-button-content-color-hover`.", + "control": "color" + }, + "system-button-static-black-secondary-content-color-down": { + "description": "Defined in `.spectrum`.
Used by `--spectrum-button-content-color-down`.", + "control": "color" + }, + "system-button-static-black-secondary-content-color-focus": { + "description": "Defined in `.spectrum`.
Used by `--spectrum-button-content-color-focus`.", + "control": "color" + }, + "system-button-static-black-secondary-outline-border-color-default": { + "description": "Defined in `.spectrum`.
Used by `--spectrum-button-border-color-default`.", + "control": "color" + }, + "system-button-static-black-secondary-outline-border-color-hover": { + "description": "Defined in `.spectrum`.
Used by `--spectrum-button-border-color-hover`.", + "control": "color" + }, + "system-button-static-black-secondary-outline-border-color-down": { + "description": "Defined in `.spectrum`.
Used by `--spectrum-button-border-color-down`.", + "control": "color" + }, + "system-button-static-black-secondary-outline-border-color-focus": { + "description": "Defined in `.spectrum`.
Used by `--spectrum-button-border-color-focus`.", + "control": "color" + }, + "system-button-static-black-secondary-outline-background-color-default": { + "description": "Defined in `.spectrum`.
Used by `--spectrum-button-background-color-default`.", + "control": "color" + }, + "system-button-static-black-secondary-outline-background-color-hover": { + "description": "Defined in `.spectrum`.
Used by `--spectrum-button-background-color-hover`.", + "control": "color" + }, + "system-button-static-black-secondary-outline-background-color-down": { + "description": "Defined in `.spectrum`.
Used by `--spectrum-button-background-color-down`.", + "control": "color" + }, + "system-button-static-black-secondary-outline-background-color-focus": { + "description": "Defined in `.spectrum`.
Used by `--spectrum-button-background-color-focus`.", + "control": "color" + } + }, + "passthroughs": { + "mod-progress-circle-position": { + "category": "Passthrough" + }, + "mod-progress-circle-track-border-color": { + "category": "Passthrough" + }, + "mod-progress-circle-track-border-color-over-background": { + "category": "Passthrough" + }, + "mod-progress-circle-thickness": { + "category": "Passthrough" + } + }, + "high-contrast": { + "highcontrast-button-background-color-default": { + "value": "var(--mod-button-background-color-default, var(--spectrum-button-background-color-default))", + "description": "Defined in `.spectrum-Button`, `.spectrum-Button.spectrum-Button--accent.spectrum-Button--fill`.
Used by `.spectrum-Button`.
Defaults to `var(--mod-button-background-color-default, var(--spectrum-button-background-color-default))`, if not set.", + "control": "color" + }, + "highcontrast-button-border-color-default": { + "value": "var(--mod-button-border-color-default, var(--spectrum-button-border-color-default))", + "description": "Defined in `.spectrum-Button`, `.spectrum-Button.spectrum-Button--accent.spectrum-Button--fill`.
Used by `.spectrum-Button`.
Defaults to `var(--mod-button-border-color-default, var(--spectrum-button-border-color-default))`, if not set.", + "control": "color" + }, + "highcontrast-button-content-color-default": { + "value": "var(--mod-button-content-color-default, var(--spectrum-button-content-color-default, inherit))", + "description": "Defined in `.spectrum-Button`, `.spectrum-Button.spectrum-Button--accent.spectrum-Button--fill`.
Used by `.spectrum-Button`.
Defaults to `var(--mod-button-content-color-default, var(--spectrum-button-content-color-default, inherit))`, if not set.", + "control": "color" + }, + "highcontrast-button-background-color-focus": { + "value": "var(--mod-button-background-color-focus, var(--spectrum-button-background-color-focus))", + "description": "Defined in `.spectrum-Button`, `.spectrum-Button.spectrum-Button--accent.spectrum-Button--fill`.
Used by `.spectrum-Button:focus-visible`.
Defaults to `var(--mod-button-background-color-focus, var(--spectrum-button-background-color-focus))`, if not set.", + "control": "color" + }, + "highcontrast-button-border-color-focus": { + "value": "var(--mod-button-border-color-focus, var(--spectrum-button-border-color-focus))", + "description": "Defined in `.spectrum-Button`, `.spectrum-Button.spectrum-Button--accent.spectrum-Button--fill`.
Used by `.spectrum-Button:focus-visible`.
Defaults to `var(--mod-button-border-color-focus, var(--spectrum-button-border-color-focus))`, if not set.", + "control": "color" + }, + "highcontrast-button-content-color-focus": { + "value": "var(--mod-button-content-color-focus, var(--spectrum-button-content-color-focus))", + "description": "Defined in `.spectrum-Button`, `.spectrum-Button.spectrum-Button--accent.spectrum-Button--fill`.
Used by `.spectrum-Button:focus-visible`.
Defaults to `var(--mod-button-content-color-focus, var(--spectrum-button-content-color-focus))`, if not set.", + "control": "color" + }, + "highcontrast-button-background-color-down": { + "value": "var(--mod-button-background-color-down, var(--spectrum-button-background-color-down))", + "description": "Defined in `.spectrum-Button`, `.spectrum-Button.spectrum-Button--accent.spectrum-Button--fill`.
Used by `.spectrum-Button:active`.
Defaults to `var(--mod-button-background-color-down, var(--spectrum-button-background-color-down))`, if not set.", + "control": "color" + }, + "highcontrast-button-border-color-down": { + "value": "var(--mod-button-border-color-down, var(--spectrum-button-border-color-down))", + "description": "Defined in `.spectrum-Button`, `.spectrum-Button.spectrum-Button--accent.spectrum-Button--fill`.
Used by `.spectrum-Button:active`.
Defaults to `var(--mod-button-border-color-down, var(--spectrum-button-border-color-down))`, if not set.", + "control": "color" + }, + "highcontrast-button-content-color-down": { + "value": "var(--mod-button-content-color-down, var(--spectrum-button-content-color-down))", + "description": "Defined in `.spectrum-Button`, `.spectrum-Button.spectrum-Button--accent.spectrum-Button--fill`.
Used by `.spectrum-Button:active`.
Defaults to `var(--mod-button-content-color-down, var(--spectrum-button-content-color-down))`, if not set.", + "control": "color" + }, + "highcontrast-button-background-color-hover": { + "value": "var(--mod-button-background-color-hover, var(--spectrum-button-background-color-hover))", + "description": "Defined in `.spectrum-Button`, `.spectrum-Button.spectrum-Button--accent.spectrum-Button--fill`.
Used by `.spectrum-Button:hover`.
Defaults to `var(--mod-button-background-color-hover, var(--spectrum-button-background-color-hover))`, if not set.", + "control": "color" + }, + "highcontrast-button-border-color-hover": { + "value": "var(--mod-button-border-color-hover, var(--spectrum-button-border-color-hover))", + "description": "Defined in `.spectrum-Button`, `.spectrum-Button.spectrum-Button--accent.spectrum-Button--fill`.
Used by `.spectrum-Button:hover`.
Defaults to `var(--mod-button-border-color-hover, var(--spectrum-button-border-color-hover))`, if not set.", + "control": "color" + }, + "highcontrast-button-content-color-hover": { + "value": "var(--mod-button-content-color-hover, var(--spectrum-button-content-color-hover))", + "description": "Defined in `.spectrum-Button`, `.spectrum-Button.spectrum-Button--accent.spectrum-Button--fill`.
Used by `.spectrum-Button:hover`.
Defaults to `var(--mod-button-content-color-hover, var(--spectrum-button-content-color-hover))`, if not set.", + "control": "color" + }, + "highcontrast-button-background-color-disabled": { + "value": "var(--mod-button-background-color-disabled, var(--spectrum-button-background-color-disabled))", + "description": "Defined in `.spectrum-Button`, `.spectrum-Button.spectrum-Button--accent.spectrum-Button--fill`.
Used by `.spectrum-Button.is-disabled, .spectrum-Button.is-pending, .spectrum-Button:disabled, .spectrum-Button[pending]`.
Defaults to `var(--mod-button-background-color-disabled, var(--spectrum-button-background-color-disabled))`, if not set.", + "control": "color" + }, + "highcontrast-button-border-color-disabled": { + "value": "var(--mod-button-border-color-disabled, var(--spectrum-button-border-color-disabled))", + "description": "Defined in `.spectrum-Button`.
Used by `.spectrum-Button.is-disabled, .spectrum-Button.is-pending, .spectrum-Button:disabled, .spectrum-Button[pending]`.
Defaults to `var(--mod-button-border-color-disabled, var(--spectrum-button-border-color-disabled))`, if not set.", + "control": "color" + }, + "highcontrast-button-content-color-disabled": { + "value": "var(--mod-button-content-color-disabled, var(--spectrum-button-content-color-disabled))", + "description": "Defined in `.spectrum-Button`, `.spectrum-Button.spectrum-Button--staticWhite.spectrum-Button--accent`.
Used by `.spectrum-Button.is-disabled, .spectrum-Button.is-pending, .spectrum-Button:disabled, .spectrum-Button[pending]`.
Defaults to `var(--mod-button-content-color-disabled, var(--spectrum-button-content-color-disabled))`, if not set.", + "control": "color" + } + } } diff --git a/components/button/stories/button.stories.js b/components/button/stories/button.stories.js index 2de4d54053b..bdf34b2302b 100644 --- a/components/button/stories/button.stories.js +++ b/components/button/stories/button.stories.js @@ -2,11 +2,13 @@ import { default as IconStories } from "@spectrum-css/icon/stories/icon.stories. import { Sizes } from "@spectrum-css/preview/decorators"; import { disableDefaultModes } from "@spectrum-css/preview/modes"; import { isActive, isDisabled, isFocused, isHovered, isPending, size, staticColor } from "@spectrum-css/preview/types"; -import metadata from "../dist/metadata.json"; -import packageJson from "../package.json"; import { ButtonGroups } from "./button.test.js"; import { ButtonsWithIconOptions, TextOverflowTemplate, TextWrapTemplate, TreatmentTemplate } from "./template.js"; +// Local assets to render the component styles and structure +import metadata from "../dist/metadata.json"; +import packageJson from "../package.json"; + /** * Buttons allow users to perform an action or to navigate to another page. They have multiple styles for various needs, and are ideal for calling attention to where a user needs to do something in order to move forward in a flow. * @@ -95,6 +97,7 @@ export default { }, packageJson, metadata, + cssprops: metadata.modifiers, }, }; diff --git a/components/buttongroup/dist/metadata.json b/components/buttongroup/dist/metadata.json index 38d29f26e39..c55e59e722e 100644 --- a/components/buttongroup/dist/metadata.json +++ b/components/buttongroup/dist/metadata.json @@ -6,20 +6,67 @@ ".spectrum-ButtonGroup.spectrum-ButtonGroup--sizeS", ".spectrum-ButtonGroup.spectrum-ButtonGroup--vertical" ], - "modifiers": [ - "--mod-buttongroup-justify-content", - "--mod-buttongroup-spacing", - "--mod-buttongroup-spacing-horizontal", - "--mod-buttongroup-spacing-vertical" - ], - "component": [ - "--spectrum-buttongroup-display", - "--spectrum-buttongroup-flex-direction", - "--spectrum-buttongroup-justify-content", - "--spectrum-buttongroup-spacing" - ], - "global": ["--spectrum-spacing-200", "--spectrum-spacing-300"], - "system-theme": [], - "passthroughs": [], - "high-contrast": [] + "modifiers": { + "mod-buttongroup-spacing": { + "value": "var(--mod-buttongroup-spacing-horizontal, var(--spectrum-spacing-200))", + "description": "Defined in `.spectrum-ButtonGroup.spectrum-ButtonGroup--vertical`.
Used by `--spectrum-buttongroup-spacing`.
Defaults to `var(--mod-buttongroup-spacing-horizontal, var(--spectrum-spacing-200))`, if not set.", + "control": "text", + "category": "Modifier" + }, + "mod-buttongroup-spacing-horizontal": { + "value": "12px", + "description": "Used by `--spectrum-buttongroup-spacing`.
Defaults to `var(--spectrum-spacing-200)`, if not set.", + "control": "text", + "category": "Modifier" + }, + "mod-buttongroup-justify-content": { + "description": "Used by `--spectrum-buttongroup-justify-content`.", + "control": "text", + "category": "Modifier" + }, + "mod-buttongroup-spacing-vertical": { + "description": "Used by `--mod-buttongroup-spacing`.", + "control": "text", + "category": "Modifier" + } + }, + "component": { + "spectrum-buttongroup-spacing": { + "description": "Defined in `.spectrum-ButtonGroup`, `.spectrum-ButtonGroup.spectrum-ButtonGroup--sizeS`.
Used by `.spectrum-ButtonGroup`.", + "control": "text", + "category": "Component" + }, + "spectrum-buttongroup-display": { + "description": "Defined in `.spectrum-ButtonGroup`, `.spectrum-ButtonGroup.spectrum-ButtonGroup--vertical`.
Used by `.spectrum-ButtonGroup`.", + "control": "text", + "category": "Component" + }, + "spectrum-buttongroup-flex-direction": { + "description": "Defined in `.spectrum-ButtonGroup`, `.spectrum-ButtonGroup.spectrum-ButtonGroup--vertical`.
Used by `.spectrum-ButtonGroup`.", + "control": "text", + "category": "Component" + }, + "spectrum-buttongroup-justify-content": { + "description": "Defined in `.spectrum-ButtonGroup`.
Used by `.spectrum-ButtonGroup`.", + "control": "text", + "category": "Component" + } + }, + "global": { + "spectrum-spacing-300": { + "value": "16px", + "description": "Used by `--spectrum-buttongroup-spacing`.", + "control": "text", + "category": "Global" + }, + "spectrum-spacing-200": { + "value": "12px", + "description": "Used by `--spectrum-buttongroup-spacing`.", + "control": "text", + "category": "Global" + } + }, + "system-theme": {}, + "passthroughs": {}, + "high-contrast": {} } diff --git a/components/buttongroup/stories/buttongroup.stories.js b/components/buttongroup/stories/buttongroup.stories.js index ba7e125de76..1fe9b2406cd 100644 --- a/components/buttongroup/stories/buttongroup.stories.js +++ b/components/buttongroup/stories/buttongroup.stories.js @@ -1,11 +1,13 @@ import { default as Icon } from "@spectrum-css/icon/stories/icon.stories.js"; import { disableDefaultModes } from "@spectrum-css/preview/modes"; import { size } from "@spectrum-css/preview/types"; -import metadata from "../dist/metadata.json"; -import packageJson from "../package.json"; import { ButtonGroup } from "./buttongroup.test.js"; import { Template } from "./template.js"; +// Local assets to render the component styles and structure +import metadata from "../dist/metadata.json"; +import packageJson from "../package.json"; + /** * A button group is a grouping of buttons whose actions are related to each other. */ @@ -64,6 +66,7 @@ export default { }, packageJson, metadata, + cssprops: metadata.modifiers, }, }; diff --git a/components/calendar/dist/metadata.json b/components/calendar/dist/metadata.json index 676c81a041f..5af658123bd 100644 --- a/components/calendar/dist/metadata.json +++ b/components/calendar/dist/metadata.json @@ -5,46 +5,46 @@ ".spectrum-Calendar--padded", ".spectrum-Calendar-body", ".spectrum-Calendar-date", + ".spectrum-Calendar-date:active", + ".spectrum-Calendar-date:after", + ".spectrum-Calendar-date:before", + ".spectrum-Calendar-date:hover", + ".spectrum-Calendar-date:hover:not(.is-selection-end, .is-selection-start)", + ".spectrum-Calendar-date:lang(ja)", + ".spectrum-Calendar-date:lang(ko)", + ".spectrum-Calendar-date:lang(zh)", ".spectrum-Calendar-date.is-disabled", ".spectrum-Calendar-date.is-disabled.is-selected", ".spectrum-Calendar-date.is-focused", + ".spectrum-Calendar-date.is-focused:not(.is-range-selection)", + ".spectrum-Calendar-date.is-focused:not(.is-range-selection):active", ".spectrum-Calendar-date.is-focused.is-range-selection", ".spectrum-Calendar-date.is-focused.is-selected", ".spectrum-Calendar-date.is-focused.is-selected:not(.is-range-selection)", - ".spectrum-Calendar-date.is-focused:not(.is-range-selection)", - ".spectrum-Calendar-date.is-focused:not(.is-range-selection):active", ".spectrum-Calendar-date.is-outsideMonth", ".spectrum-Calendar-date.is-range-selection", + ".spectrum-Calendar-date.is-range-selection:hover", ".spectrum-Calendar-date.is-range-selection.is-range-end", ".spectrum-Calendar-date.is-range-selection.is-range-end:after", ".spectrum-Calendar-date.is-range-selection.is-range-end:before", ".spectrum-Calendar-date.is-range-selection.is-range-start", - ".spectrum-Calendar-date.is-range-selection.is-range-start.is-range-end", ".spectrum-Calendar-date.is-range-selection.is-range-start:after", ".spectrum-Calendar-date.is-range-selection.is-range-start:before", + ".spectrum-Calendar-date.is-range-selection.is-range-start.is-range-end", ".spectrum-Calendar-date.is-range-selection.is-selection-end", - ".spectrum-Calendar-date.is-range-selection.is-selection-end.is-range-start", ".spectrum-Calendar-date.is-range-selection.is-selection-end:after", ".spectrum-Calendar-date.is-range-selection.is-selection-end:before", + ".spectrum-Calendar-date.is-range-selection.is-selection-end.is-range-start", ".spectrum-Calendar-date.is-range-selection.is-selection-start", - ".spectrum-Calendar-date.is-range-selection.is-selection-start.is-range-end", - ".spectrum-Calendar-date.is-range-selection.is-selection-start.is-selection-end", ".spectrum-Calendar-date.is-range-selection.is-selection-start:after", ".spectrum-Calendar-date.is-range-selection.is-selection-start:before", - ".spectrum-Calendar-date.is-range-selection:hover", + ".spectrum-Calendar-date.is-range-selection.is-selection-start.is-range-end", + ".spectrum-Calendar-date.is-range-selection.is-selection-start.is-selection-end", ".spectrum-Calendar-date.is-selected", ".spectrum-Calendar-date.is-selected:hover:not(.is-selection-end, .is-selection-start)", ".spectrum-Calendar-date.is-selected:not(.is-range-selection)", ".spectrum-Calendar-date.is-today", ".spectrum-Calendar-date.is-today.is-selected:not(.is-range-selection)", - ".spectrum-Calendar-date:active", - ".spectrum-Calendar-date:after", - ".spectrum-Calendar-date:before", - ".spectrum-Calendar-date:hover", - ".spectrum-Calendar-date:hover:not(.is-selection-end, .is-selection-start)", - ".spectrum-Calendar-date:lang(ja)", - ".spectrum-Calendar-date:lang(ko)", - ".spectrum-Calendar-date:lang(zh)", ".spectrum-Calendar-dayOfWeek", ".spectrum-Calendar-dayOfWeek[title]", ".spectrum-Calendar-header", @@ -57,146 +57,716 @@ ".spectrum-Calendar:dir(rtl)", "[dir=\"rtl\"] .spectrum-Calendar" ], - "modifiers": [ - "--mod-calendar-border-radius-reset", - "--mod-calendar-border-width-reset", - "--mod-calendar-button-icon-color", - "--mod-calendar-day-background-color", - "--mod-calendar-day-background-color-cap-selected", - "--mod-calendar-day-background-color-down", - "--mod-calendar-day-background-color-focus", - "--mod-calendar-day-background-color-hover", - "--mod-calendar-day-background-color-key-focus", - "--mod-calendar-day-background-color-selected", - "--mod-calendar-day-background-color-selected-hover", - "--mod-calendar-day-background-layer-color", - "--mod-calendar-day-border-color", - "--mod-calendar-day-border-color-key-focus", - "--mod-calendar-day-border-size", - "--mod-calendar-day-fill-content", - "--mod-calendar-day-fill-display", - "--mod-calendar-day-height", - "--mod-calendar-day-padding", - "--mod-calendar-day-text-color", - "--mod-calendar-day-text-color-cap-selected", - "--mod-calendar-day-text-color-disabled", - "--mod-calendar-day-text-color-hover", - "--mod-calendar-day-text-color-key-focus", - "--mod-calendar-day-text-color-selected", - "--mod-calendar-day-text-font-weight", - "--mod-calendar-day-text-font-weight-cap-selected", - "--mod-calendar-day-text-font-weight-selected", - "--mod-calendar-day-text-size", - "--mod-calendar-day-text-size-han", - "--mod-calendar-day-title-text-color", - "--mod-calendar-day-title-text-font-weight", - "--mod-calendar-day-title-text-size", - "--mod-calendar-day-today-background-color-selected-hover", - "--mod-calendar-day-today-border-color", - "--mod-calendar-day-today-border-color-disabled", - "--mod-calendar-day-today-text-color", - "--mod-calendar-day-today-text-font-weight", - "--mod-calendar-day-visibility", - "--mod-calendar-day-width", - "--mod-calendar-margin-x", - "--mod-calendar-margin-y", - "--mod-calendar-title-height", - "--mod-calendar-title-text-letter-spacing", - "--mod-calendar-title-text-size", - "--mod-calendar-width" - ], - "component": [ - "--spectrum-calendar-border-radius-reset", - "--spectrum-calendar-border-width-reset", - "--spectrum-calendar-button-icon-color", - "--spectrum-calendar-day-background", - "--spectrum-calendar-day-background-cap-selected", - "--spectrum-calendar-day-background-color-cap-selected", - "--spectrum-calendar-day-background-color-down", - "--spectrum-calendar-day-background-color-hover", - "--spectrum-calendar-day-background-color-key-focus", - "--spectrum-calendar-day-background-color-selected", - "--spectrum-calendar-day-background-color-selected-disabled", - "--spectrum-calendar-day-background-color-selected-hover", - "--spectrum-calendar-day-background-down", - "--spectrum-calendar-day-background-focus", - "--spectrum-calendar-day-background-hover", - "--spectrum-calendar-day-background-layer-color", - "--spectrum-calendar-day-background-selected", - "--spectrum-calendar-day-background-selected-hover", - "--spectrum-calendar-day-border-color", - "--spectrum-calendar-day-border-color-focus", - "--spectrum-calendar-day-border-color-key-focus", - "--spectrum-calendar-day-border-size", - "--spectrum-calendar-day-height", - "--spectrum-calendar-day-padding", - "--spectrum-calendar-day-text-color", - "--spectrum-calendar-day-text-color-cap-selected", - "--spectrum-calendar-day-text-color-disabled", - "--spectrum-calendar-day-text-color-hover", - "--spectrum-calendar-day-text-color-key-focus", - "--spectrum-calendar-day-text-color-selected", - "--spectrum-calendar-day-text-font-weight", - "--spectrum-calendar-day-text-font-weight-cap-selected", - "--spectrum-calendar-day-text-font-weight-selected", - "--spectrum-calendar-day-text-size", - "--spectrum-calendar-day-today-background-color-selected-hover", - "--spectrum-calendar-day-today-background-selected-hover", - "--spectrum-calendar-day-today-border-color", - "--spectrum-calendar-day-today-border-color-disabled", - "--spectrum-calendar-day-today-text-color", - "--spectrum-calendar-day-today-text-font-weight", - "--spectrum-calendar-day-width", - "--spectrum-calendar-heading-text-size", - "--spectrum-calendar-margin-x", - "--spectrum-calendar-margin-y", - "--spectrum-calendar-title-height", - "--spectrum-calendar-title-text-color", - "--spectrum-calendar-title-text-font-weight", - "--spectrum-calendar-title-text-letter-spacing", - "--spectrum-calendar-title-text-size", - "--spectrum-calendar-width" - ], - "global": [ - "--spectrum-bold-font-weight", - "--spectrum-border-width-200", - "--spectrum-component-height-100", - "--spectrum-disabled-border-color", - "--spectrum-disabled-content-color", - "--spectrum-font-size-100", - "--spectrum-font-size-300", - "--spectrum-font-size-50", - "--spectrum-gray-100-rgb", - "--spectrum-gray-800", - "--spectrum-logical-rotation", - "--spectrum-neutral-content-color-default", - "--spectrum-neutral-content-color-down", - "--spectrum-neutral-content-color-hover", - "--spectrum-neutral-content-color-key-focus", - "--spectrum-neutral-subdued-content-color-default", - "--spectrum-regular-font-weight" - ], - "system-theme": ["--system-calendar-day-background-color-selected-disabled"], - "passthroughs": [ - "--mod-actionbutton-content-color-default", - "--mod-actionbutton-edge-to-text", - "--mod-actionbutton-min-width" - ], - "high-contrast": [ - "--highcontrast-calendar-day-background-cap-selected", - "--highcontrast-calendar-day-background-down", - "--highcontrast-calendar-day-background-focus", - "--highcontrast-calendar-day-background-hover", - "--highcontrast-calendar-day-background-selected", - "--highcontrast-calendar-day-background-selected-hover", - "--highcontrast-calendar-day-border-color-focus", - "--highcontrast-calendar-day-text-color-cap-selected", - "--highcontrast-calendar-day-text-color-hover", - "--highcontrast-calendar-day-text-color-key-focus", - "--highcontrast-calendar-day-text-color-selected", - "--highcontrast-calendar-day-title-text-color", - "--highcontrast-calendar-day-today-background-selected-hover", - "--highcontrast-calendar-day-today-border-color", - "--highcontrast-calendar-day-today-text-color" - ] + "modifiers": { + "mod-calendar-day-width": { + "value": "32px", + "description": "Used by `--spectrum-calendar-day-width`.
Defaults to `var(--spectrum-component-height-100)`, if not set.", + "control": "text", + "category": "Modifier" + }, + "mod-calendar-day-height": { + "value": "32px", + "description": "Used by `--spectrum-calendar-day-height`.
Defaults to `var(--spectrum-component-height-100)`, if not set.", + "control": "text", + "category": "Modifier" + }, + "mod-calendar-day-border-size": { + "value": "2px", + "description": "Used by `--spectrum-calendar-day-border-size`.
Defaults to `var(--spectrum-border-width-200)`, if not set.", + "control": "text", + "category": "Modifier" + }, + "mod-calendar-day-padding": { + "description": "Used by `--spectrum-calendar-day-padding`.", + "control": "text", + "category": "Modifier" + }, + "mod-calendar-border-radius-reset": { + "description": "Used by `--spectrum-calendar-border-radius-reset`.", + "control": "text", + "category": "Modifier" + }, + "mod-calendar-border-width-reset": { + "description": "Used by `--spectrum-calendar-border-width-reset`.", + "control": "text", + "category": "Modifier" + }, + "mod-calendar-margin-y": { + "description": "Used by `--spectrum-calendar-margin-y`.", + "control": "text", + "category": "Modifier" + }, + "mod-calendar-margin-x": { + "description": "Used by `--spectrum-calendar-margin-x`.", + "control": "text", + "category": "Modifier" + }, + "mod-calendar-width": { + "value": "calc((var(--spectrum-calendar-day-width) + var(--spectrum-calendar-day-padding) * 2) * 7)", + "description": "Used by `--spectrum-calendar-width`.
Defaults to `calc((var(--spectrum-calendar-day-width) + var(--spectrum-calendar-day-padding) * 2) * 7)`, if not set.", + "control": "text", + "category": "Modifier" + }, + "mod-calendar-title-text-letter-spacing": { + "description": "Used by `--spectrum-calendar-title-text-letter-spacing`.", + "control": "text", + "category": "Modifier" + }, + "mod-calendar-title-height": { + "description": "Used by `--spectrum-calendar-title-height`.", + "control": "text", + "category": "Modifier" + }, + "mod-calendar-title-text-size": { + "value": "18px", + "description": "Used by `--spectrum-calendar-title-text-size`.
Defaults to `var(--spectrum-font-size-300)`, if not set.", + "control": "text", + "category": "Modifier" + }, + "mod-calendar-day-title-text-font-weight": { + "value": "700", + "description": "Used by `--spectrum-calendar-title-text-font-weight`.
Defaults to `var(--spectrum-bold-font-weight)`, if not set.", + "control": "text", + "category": "Modifier" + }, + "mod-calendar-day-title-text-color": { + "value": "var(--spectrum-gray-700)", + "description": "Used by `--spectrum-calendar-title-text-color`.
Defaults to `var(--spectrum-neutral-subdued-content-color-default)`, if not set.", + "control": "color", + "category": "Modifier" + }, + "mod-calendar-day-title-text-size": { + "value": "11px", + "description": "Used by `--spectrum-calendar-heading-text-size`.
Defaults to `var(--spectrum-font-size-50)`, if not set.", + "control": "text", + "category": "Modifier" + }, + "mod-calendar-button-icon-color": { + "value": "var(--spectrum-gray-700)", + "description": "Used by `--spectrum-calendar-button-icon-color`.
Defaults to `var(--spectrum-neutral-subdued-content-color-default)`, if not set.", + "control": "color", + "category": "Modifier" + }, + "mod-calendar-day-background-color": { + "description": "Defined in `.spectrum-Calendar-date:hover:not(.is-selection-end, .is-selection-start)`, `.spectrum-Calendar-date.is-range-selection:hover, .spectrum-Calendar-date.is-selected:hover:not(.is-selection-end, .is-selection-start)`, `.spectrum-Calendar-date.is-focused.is-range-selection, .spectrum-Calendar-date.is-focused.is-selected`, `.spectrum-Calendar-date.is-focused:not(.is-range-selection)`, `.spectrum-Calendar-date.is-selected:not(.is-range-selection)`, `.spectrum-Calendar-date.is-selected`.
Used by `--spectrum-calendar-day-background`.", + "control": "color", + "category": "Modifier" + }, + "mod-calendar-day-background-color-selected": { + "value": "var(--spectrum-calendar-day-background-color-selected)", + "description": "Defined in `.spectrum-Calendar-date.is-disabled`.
Used by `--spectrum-calendar-day-background-selected`.
Defaults to `var(--spectrum-calendar-day-background-color-selected)`, if not set.", + "control": "color", + "category": "Modifier" + }, + "mod-calendar-day-background-color-selected-hover": { + "value": "var(--spectrum-calendar-day-background-color-selected-hover)", + "description": "Defined in `.spectrum-Calendar-date.is-disabled`.
Used by `--spectrum-calendar-day-background-selected-hover`.
Defaults to `var(--spectrum-calendar-day-background-color-selected-hover)`, if not set.", + "control": "color", + "category": "Modifier" + }, + "mod-calendar-day-background-color-cap-selected": { + "value": "var(--spectrum-calendar-day-background-color-cap-selected)", + "description": "Defined in `.spectrum-Calendar-date.is-disabled`.
Used by `--spectrum-calendar-day-background-cap-selected`.
Defaults to `var(--spectrum-calendar-day-background-color-cap-selected)`, if not set.", + "control": "color", + "category": "Modifier" + }, + "mod-calendar-day-background-color-hover": { + "value": "var(--spectrum-calendar-day-background-color-hover)", + "description": "Defined in `.spectrum-Calendar-date.is-today.is-selected:not(.is-range-selection)`, `.spectrum-Calendar-date.is-disabled`.
Used by `--spectrum-calendar-day-background-hover`.
Defaults to `var(--spectrum-calendar-day-background-color-hover)`, if not set.", + "control": "color", + "category": "Modifier" + }, + "mod-calendar-day-background-color-key-focus": { + "value": "var(--spectrum-calendar-day-background-color-key-focus)", + "description": "Defined in `.spectrum-Calendar-date.is-focused.is-selected:not(.is-range-selection), .spectrum-Calendar-date.is-focused:not(.is-range-selection):active`.
Used by `--spectrum-calendar-day-background-focus`.
Defaults to `var(--spectrum-calendar-day-background-color-key-focus)`, if not set.", + "control": "color", + "category": "Modifier" + }, + "mod-calendar-day-background-color-down": { + "value": "var(--spectrum-calendar-day-background-color-down)", + "description": "Defined in `.spectrum-Calendar-date.is-disabled`.
Used by `--spectrum-calendar-day-background-down`.
Defaults to `var(--spectrum-calendar-day-background-color-down)`, if not set.", + "control": "color", + "category": "Modifier" + }, + "mod-calendar-day-background-layer-color": { + "description": "Defined in `.spectrum-Calendar-date:active`, `.spectrum-Calendar-date.is-selected:not(.is-range-selection)`, `.spectrum-Calendar-date.is-selected`, `.spectrum-Calendar-date.is-disabled.is-selected`.
Used by `--spectrum-calendar-day-background-layer-color`.", + "control": "color", + "category": "Modifier" + }, + "mod-calendar-day-border-color": { + "description": "Defined in `.spectrum-Calendar-date.is-focused`, `.spectrum-Calendar-date.is-focused:not(.is-range-selection)`, `.spectrum-Calendar-date.is-today`.
Used by `--spectrum-calendar-day-border-color`, `.spectrum-Calendar-date:before`.", + "control": "color", + "category": "Modifier" + }, + "mod-calendar-day-border-color-key-focus": { + "value": "var(--spectrum-calendar-day-border-color-key-focus)", + "description": "Defined in `.spectrum-Calendar-date.is-disabled`.
Used by `--spectrum-calendar-day-border-color-focus`.
Defaults to `var(--spectrum-calendar-day-border-color-key-focus)`, if not set.", + "control": "color", + "category": "Modifier" + }, + "mod-calendar-day-text-size": { + "value": "14px", + "description": "Used by `--spectrum-calendar-day-text-size`.
Defaults to `var(--spectrum-font-size-100)`, if not set.", + "control": "text", + "category": "Modifier" + }, + "mod-calendar-day-text-font-weight": { + "value": "400", + "description": "Defined in `.spectrum-Calendar-date.is-range-selection.is-selection-end, .spectrum-Calendar-date.is-range-selection.is-selection-start`, `.spectrum-Calendar-date.is-selected:not(.is-range-selection)`, `.spectrum-Calendar-date.is-today`, `.spectrum-Calendar-date.is-disabled`.
Used by `--spectrum-calendar-day-text-font-weight`.
Defaults to `var(--spectrum-regular-font-weight)`, if not set.", + "control": "text", + "category": "Modifier" + }, + "mod-calendar-day-text-font-weight-selected": { + "value": "700", + "description": "Defined in `.spectrum-Calendar-date.is-disabled`.
Used by `--spectrum-calendar-day-text-font-weight-selected`.
Defaults to `var(--spectrum-bold-font-weight)`, if not set.", + "control": "text", + "category": "Modifier" + }, + "mod-calendar-day-text-font-weight-cap-selected": { + "value": "700", + "description": "Defined in `.spectrum-Calendar-date.is-disabled`.
Used by `--spectrum-calendar-day-text-font-weight-cap-selected`.
Defaults to `var(--spectrum-bold-font-weight)`, if not set.", + "control": "text", + "category": "Modifier" + }, + "mod-calendar-day-today-background-color-selected-hover": { + "value": "var(--spectrum-calendar-day-today-background-color-selected-hover)", + "description": "Used by `--spectrum-calendar-day-today-background-selected-hover`.
Defaults to `var(--spectrum-calendar-day-today-background-color-selected-hover)`, if not set.", + "control": "color", + "category": "Modifier" + }, + "mod-calendar-day-today-text-font-weight": { + "value": "700", + "description": "Used by `--spectrum-calendar-day-today-text-font-weight`.
Defaults to `var(--spectrum-bold-font-weight)`, if not set.", + "control": "text", + "category": "Modifier" + }, + "mod-calendar-day-today-text-color": { + "value": "var(--spectrum-gray-800)", + "description": "Used by `--spectrum-calendar-day-today-text-color`.
Defaults to `var(--spectrum-neutral-content-color-default)`, if not set.", + "control": "color", + "category": "Modifier" + }, + "mod-calendar-day-today-border-color": { + "value": "light-dark(rgb(41, 41, 41), rgb(219, 219, 219))", + "description": "Defined in `.spectrum-Calendar-date.is-disabled`.
Used by `--spectrum-calendar-day-today-border-color`.
Defaults to `var(--spectrum-gray-800)`, if not set.", + "control": "color", + "category": "Modifier" + }, + "mod-calendar-day-text-color": { + "value": "var(--spectrum-gray-700)", + "description": "Defined in `.spectrum-Calendar-date:hover`, `.spectrum-Calendar-date.is-range-selection.is-selection-end, .spectrum-Calendar-date.is-range-selection.is-selection-start`, `.spectrum-Calendar-date.is-focused:not(.is-range-selection)`, `.spectrum-Calendar-date.is-selected:not(.is-range-selection)`, `.spectrum-Calendar-date.is-selected`, `.spectrum-Calendar-date.is-today`, `.spectrum-Calendar-date.is-disabled`.
Used by `--spectrum-calendar-day-text-color`.
Defaults to `var(--spectrum-neutral-subdued-content-color-default)`, if not set.", + "control": "color", + "category": "Modifier" + }, + "mod-calendar-day-text-color-selected": { + "value": "var(--spectrum-gray-900)", + "description": "Defined in `.spectrum-Calendar-date.is-disabled`.
Used by `--spectrum-calendar-day-text-color-selected`.
Defaults to `var(--spectrum-neutral-content-color-down)`, if not set.", + "control": "color", + "category": "Modifier" + }, + "mod-calendar-day-text-color-cap-selected": { + "value": "var(--spectrum-gray-900)", + "description": "Defined in `.spectrum-Calendar-date.is-disabled`.
Used by `--spectrum-calendar-day-text-color-cap-selected`.
Defaults to `var(--spectrum-neutral-content-color-down)`, if not set.", + "control": "color", + "category": "Modifier" + }, + "mod-calendar-day-text-color-hover": { + "value": "var(--spectrum-gray-900)", + "description": "Defined in `.spectrum-Calendar-date.is-disabled`.
Used by `--spectrum-calendar-day-text-color-hover`.
Defaults to `var(--spectrum-neutral-content-color-hover)`, if not set.", + "control": "color", + "category": "Modifier" + }, + "mod-calendar-day-text-color-key-focus": { + "value": "var(--spectrum-gray-900)", + "description": "Defined in `.spectrum-Calendar-date.is-focused.is-selected:not(.is-range-selection), .spectrum-Calendar-date.is-focused:not(.is-range-selection):active`, `.spectrum-Calendar-date.is-disabled`.
Used by `--spectrum-calendar-day-text-color-key-focus`.
Defaults to `var(--spectrum-neutral-content-color-key-focus)`, if not set.", + "control": "color", + "category": "Modifier" + }, + "mod-calendar-day-text-color-disabled": { + "value": "var(--spectrum-gray-400)", + "description": "Used by `--spectrum-calendar-day-text-color-disabled`.
Defaults to `var(--spectrum-disabled-content-color)`, if not set.", + "control": "color", + "category": "Modifier" + }, + "mod-calendar-day-today-border-color-disabled": { + "value": "var(--spectrum-gray-300)", + "description": "Used by `--spectrum-calendar-day-today-border-color-disabled`.
Defaults to `var(--spectrum-disabled-border-color)`, if not set.", + "control": "color", + "category": "Modifier" + }, + "mod-calendar-day-text-size-han": { + "value": "11px", + "description": "Used by `--spectrum-calendar-day-text-size`.
Defaults to `var(--spectrum-font-size-50)`, if not set.", + "control": "text", + "category": "Modifier" + }, + "mod-calendar-day-fill-content": { + "description": "Defined in `.spectrum-Calendar-date.is-range-selection.is-selection-end, .spectrum-Calendar-date.is-range-selection.is-selection-start`.
Used by `.spectrum-Calendar-date:after`.", + "control": "text", + "category": "Modifier" + }, + "mod-calendar-day-visibility": { + "description": "Defined in `.spectrum-Calendar-date.is-outsideMonth`.
Used by `.spectrum-Calendar-date`.", + "control": "text", + "category": "Modifier" + }, + "mod-calendar-day-fill-display": { + "description": "Defined in `.spectrum-Calendar-date.is-range-selection.is-selection-end, .spectrum-Calendar-date.is-range-selection.is-selection-start`.
Used by `.spectrum-Calendar-date:after`.", + "control": "text", + "category": "Modifier" + }, + "mod-calendar-day-background-color-focus": { + "description": "Defined in `.spectrum-Calendar-date.is-disabled`.", + "control": "color", + "category": "Modifier" + } + }, + "component": { + "spectrum-calendar-day-width": { + "description": "Defined in `.spectrum-Calendar`.
Used by `--spectrum-calendar-width`, `--mod-actionbutton-min-width`, `.spectrum-Calendar-dayOfWeek`, `.spectrum-Calendar-tableCell`, `.spectrum-Calendar-date`, `.spectrum-Calendar-date, .spectrum-Calendar-date:before`, `.spectrum-Calendar-date:before`, `.spectrum-Calendar-date:after`, `.spectrum-Calendar-date.is-range-selection`, `.spectrum-Calendar-date.is-range-selection.is-range-start, .spectrum-Calendar-date.is-range-selection.is-selection-end, .spectrum-Calendar-date.is-range-selection.is-selection-start`, `.spectrum-Calendar-date.is-range-selection.is-range-start, .spectrum-Calendar-date.is-range-selection.is-selection-start`, `.spectrum-Calendar-date.is-range-selection.is-range-end, .spectrum-Calendar-date.is-range-selection.is-selection-end`, `.spectrum-Calendar-date.is-range-selection.is-range-start.is-range-end, .spectrum-Calendar-date.is-range-selection.is-selection-end.is-range-start, .spectrum-Calendar-date.is-range-selection.is-selection-start.is-range-end, .spectrum-Calendar-date.is-range-selection.is-selection-start.is-selection-end`.", + "control": "text", + "category": "Component" + }, + "spectrum-calendar-day-height": { + "description": "Defined in `.spectrum-Calendar`.
Used by `.spectrum-Calendar-tableCell`, `.spectrum-Calendar-date, .spectrum-Calendar-date:before`, `.spectrum-Calendar-date:after`, `.spectrum-Calendar-date.is-range-selection`.", + "control": "text", + "category": "Component" + }, + "spectrum-calendar-day-border-size": { + "description": "Defined in `.spectrum-Calendar`.
Used by `.spectrum-Calendar-date`, `.spectrum-Calendar-date:before`.", + "control": "text", + "category": "Component" + }, + "spectrum-calendar-day-padding": { + "description": "Defined in `.spectrum-Calendar`.
Used by `--spectrum-calendar-width`, `--mod-actionbutton-edge-to-text`, `.spectrum-Calendar-tableCell`, `.spectrum-Calendar-date`, `.spectrum-Calendar-date.is-range-selection`, `.spectrum-Calendar-date.is-range-selection.is-range-start, .spectrum-Calendar-date.is-range-selection.is-selection-end, .spectrum-Calendar-date.is-range-selection.is-selection-start`, `.spectrum-Calendar-date.is-range-selection.is-range-start, .spectrum-Calendar-date.is-range-selection.is-selection-start`, `.spectrum-Calendar-date.is-range-selection.is-range-end, .spectrum-Calendar-date.is-range-selection.is-selection-end`.", + "control": "text", + "category": "Component" + }, + "spectrum-calendar-border-radius-reset": { + "description": "Defined in `.spectrum-Calendar`.
Used by `.spectrum-Calendar-date.is-range-selection`.", + "control": "text", + "category": "Component" + }, + "spectrum-calendar-border-width-reset": { + "description": "Defined in `.spectrum-Calendar`.
Used by `.spectrum-Calendar-date.is-range-selection`.", + "control": "text", + "category": "Component" + }, + "spectrum-calendar-margin-y": { + "description": "Defined in `.spectrum-Calendar`.
Used by `.spectrum-Calendar--padded`.", + "control": "text", + "category": "Component" + }, + "spectrum-calendar-margin-x": { + "description": "Defined in `.spectrum-Calendar`.
Used by `.spectrum-Calendar--padded`.", + "control": "text", + "category": "Component" + }, + "spectrum-calendar-width": { + "description": "Defined in `.spectrum-Calendar`.
Used by `.spectrum-Calendar`.", + "control": "text", + "category": "Component" + }, + "spectrum-calendar-title-text-letter-spacing": { + "description": "Defined in `.spectrum-Calendar`.
Used by `.spectrum-Calendar-dayOfWeek[title]`.", + "control": "text", + "category": "Component" + }, + "spectrum-calendar-title-height": { + "description": "Defined in `.spectrum-Calendar`.
Used by `.spectrum-Calendar-title`.", + "control": "text", + "category": "Component" + }, + "spectrum-calendar-title-text-size": { + "description": "Defined in `.spectrum-Calendar`.
Used by `.spectrum-Calendar-title`.", + "control": "text", + "category": "Component" + }, + "spectrum-calendar-title-text-font-weight": { + "description": "Defined in `.spectrum-Calendar`.
Used by `.spectrum-Calendar-title`, `.spectrum-Calendar-dayOfWeek`.", + "control": "text", + "category": "Component" + }, + "spectrum-calendar-title-text-color": { + "description": "Defined in `.spectrum-Calendar`.
Used by `.spectrum-Calendar-title`, `.spectrum-Calendar-dayOfWeek`.", + "control": "color", + "category": "Component" + }, + "spectrum-calendar-heading-text-size": { + "description": "Defined in `.spectrum-Calendar`.
Used by `.spectrum-Calendar-dayOfWeek`.", + "control": "text", + "category": "Component" + }, + "spectrum-calendar-button-icon-color": { + "description": "Defined in `.spectrum-Calendar`.
Used by `--mod-actionbutton-content-color-default`.", + "control": "color", + "category": "Component" + }, + "spectrum-calendar-day-background": { + "description": "Defined in `.spectrum-Calendar-date`.
Used by `.spectrum-Calendar-date:before`.", + "control": "text", + "category": "Component" + }, + "spectrum-calendar-day-background-selected": { + "description": "Defined in `.spectrum-Calendar-date`.
Used by `--mod-calendar-day-background-color`, `--mod-calendar-day-background-layer-color`.", + "control": "text", + "category": "Component" + }, + "spectrum-calendar-day-background-color-selected": { + "description": "Used by `--spectrum-calendar-day-background-selected`.", + "control": "color", + "category": "Component" + }, + "spectrum-calendar-day-background-selected-hover": { + "description": "Defined in `.spectrum-Calendar-date`.
Used by `--mod-calendar-day-background-color`.", + "control": "text", + "category": "Component" + }, + "spectrum-calendar-day-background-color-selected-hover": { + "description": "Used by `--spectrum-calendar-day-background-selected-hover`.", + "control": "color", + "category": "Component" + }, + "spectrum-calendar-day-background-cap-selected": { + "description": "Defined in `.spectrum-Calendar-date`.
Used by `--mod-calendar-day-background-color-key-focus`, `--mod-calendar-day-background-color`.", + "control": "text", + "category": "Component" + }, + "spectrum-calendar-day-background-color-cap-selected": { + "description": "Used by `--spectrum-calendar-day-background-cap-selected`.", + "control": "color", + "category": "Component" + }, + "spectrum-calendar-day-background-hover": { + "description": "Defined in `.spectrum-Calendar-date`.
Used by `--mod-calendar-day-background-color`.", + "control": "text", + "category": "Component" + }, + "spectrum-calendar-day-background-color-hover": { + "description": "Used by `--spectrum-calendar-day-background-hover`.", + "control": "color", + "category": "Component" + }, + "spectrum-calendar-day-background-focus": { + "description": "Defined in `.spectrum-Calendar-date`.
Used by `--mod-calendar-day-background-color`.", + "control": "text", + "category": "Component" + }, + "spectrum-calendar-day-background-color-key-focus": { + "description": "Used by `--spectrum-calendar-day-background-focus`.", + "control": "color", + "category": "Component" + }, + "spectrum-calendar-day-background-down": { + "description": "Defined in `.spectrum-Calendar-date`.
Used by `--mod-calendar-day-background-layer-color`.", + "control": "text", + "category": "Component" + }, + "spectrum-calendar-day-background-color-down": { + "description": "Used by `--spectrum-calendar-day-background-down`.", + "control": "color", + "category": "Component" + }, + "spectrum-calendar-day-background-layer-color": { + "description": "Defined in `.spectrum-Calendar-date`.
Used by `.spectrum-Calendar-date`.", + "control": "color", + "category": "Component" + }, + "spectrum-calendar-day-border-color": { + "description": "Defined in `.spectrum-Calendar-date`.
Used by `.spectrum-Calendar-date`.", + "control": "color", + "category": "Component" + }, + "spectrum-calendar-day-border-color-focus": { + "description": "Defined in `.spectrum-Calendar-date`.
Used by `--mod-calendar-day-border-color`.", + "control": "color", + "category": "Component" + }, + "spectrum-calendar-day-border-color-key-focus": { + "description": "Used by `--spectrum-calendar-day-border-color-focus`.", + "control": "color", + "category": "Component" + }, + "spectrum-calendar-day-text-size": { + "description": "Defined in `.spectrum-Calendar-date`, `.spectrum-Calendar-date:lang(ja), .spectrum-Calendar-date:lang(ko), .spectrum-Calendar-date:lang(zh)`.
Used by `.spectrum-Calendar-date`.", + "control": "text", + "category": "Component" + }, + "spectrum-calendar-day-text-font-weight": { + "description": "Defined in `.spectrum-Calendar-date`.
Used by `.spectrum-Calendar-date`.", + "control": "text", + "category": "Component" + }, + "spectrum-calendar-day-text-font-weight-selected": { + "description": "Defined in `.spectrum-Calendar-date`.
Used by `--mod-calendar-day-text-font-weight`.", + "control": "text", + "category": "Component" + }, + "spectrum-calendar-day-text-font-weight-cap-selected": { + "description": "Defined in `.spectrum-Calendar-date`.
Used by `--mod-calendar-day-text-font-weight`.", + "control": "text", + "category": "Component" + }, + "spectrum-calendar-day-today-background-selected-hover": { + "description": "Defined in `.spectrum-Calendar-date`.
Used by `--mod-calendar-day-background-color-hover`.", + "control": "text", + "category": "Component" + }, + "spectrum-calendar-day-today-background-color-selected-hover": { + "description": "Used by `--spectrum-calendar-day-today-background-selected-hover`.", + "control": "color", + "category": "Component" + }, + "spectrum-calendar-day-today-text-font-weight": { + "description": "Defined in `.spectrum-Calendar-date`.
Used by `--mod-calendar-day-text-font-weight`.", + "control": "text", + "category": "Component" + }, + "spectrum-calendar-day-today-text-color": { + "description": "Defined in `.spectrum-Calendar-date`.
Used by `--mod-calendar-day-text-color`.", + "control": "color", + "category": "Component" + }, + "spectrum-calendar-day-today-border-color": { + "description": "Defined in `.spectrum-Calendar-date`.
Used by `--mod-calendar-day-border-color`.", + "control": "color", + "category": "Component" + }, + "spectrum-calendar-day-text-color": { + "description": "Defined in `.spectrum-Calendar-date`.
Used by `.spectrum-Calendar-date`.", + "control": "color", + "category": "Component" + }, + "spectrum-calendar-day-text-color-selected": { + "description": "Defined in `.spectrum-Calendar-date`.
Used by `--mod-calendar-day-text-color`.", + "control": "color", + "category": "Component" + }, + "spectrum-calendar-day-text-color-cap-selected": { + "description": "Defined in `.spectrum-Calendar-date`.
Used by `--mod-calendar-day-text-color`, `--mod-calendar-day-text-color-key-focus`.", + "control": "color", + "category": "Component" + }, + "spectrum-calendar-day-text-color-hover": { + "description": "Defined in `.spectrum-Calendar-date`.
Used by `--mod-calendar-day-text-color`.", + "control": "color", + "category": "Component" + }, + "spectrum-calendar-day-text-color-key-focus": { + "description": "Defined in `.spectrum-Calendar-date`.
Used by `--mod-calendar-day-text-color`.", + "control": "color", + "category": "Component" + }, + "spectrum-calendar-day-text-color-disabled": { + "description": "Defined in `.spectrum-Calendar-date`.
Used by `--mod-calendar-day-text-color`, `--mod-calendar-day-text-color-selected`, `--mod-calendar-day-text-color-cap-selected`, `--mod-calendar-day-text-color-hover`, `--mod-calendar-day-text-color-key-focus`.", + "control": "color", + "category": "Component" + }, + "spectrum-calendar-day-today-border-color-disabled": { + "description": "Defined in `.spectrum-Calendar-date`.
Used by `--mod-calendar-day-today-border-color`.", + "control": "color", + "category": "Component" + }, + "spectrum-calendar-day-background-color-selected-disabled": { + "description": "Defined in `.spectrum-Calendar`.
Used by `--mod-calendar-day-background-color-selected`.", + "control": "color", + "category": "Component" + } + }, + "global": { + "spectrum-gray-100-rgb": { + "description": "Used by `--system-calendar-day-background-color-selected-disabled`.", + "control": "text", + "category": "Global" + }, + "spectrum-component-height-100": { + "value": "32px", + "description": "Used by `--spectrum-calendar-day-width`, `--spectrum-calendar-day-height`.", + "control": "text", + "category": "Global" + }, + "spectrum-border-width-200": { + "value": "2px", + "description": "Used by `--spectrum-calendar-day-border-size`.", + "control": "text", + "category": "Global" + }, + "spectrum-font-size-300": { + "value": "18px", + "description": "Used by `--spectrum-calendar-title-text-size`.", + "control": "text", + "category": "Global" + }, + "spectrum-bold-font-weight": { + "value": "700", + "description": "Used by `--spectrum-calendar-title-text-font-weight`, `--spectrum-calendar-day-text-font-weight-selected`, `--spectrum-calendar-day-text-font-weight-cap-selected`, `--spectrum-calendar-day-today-text-font-weight`.", + "control": "text", + "category": "Global" + }, + "spectrum-neutral-subdued-content-color-default": { + "value": "var(--spectrum-gray-700)", + "description": "Used by `--spectrum-calendar-title-text-color`, `--spectrum-calendar-button-icon-color`, `--spectrum-calendar-day-text-color`.", + "control": "color", + "category": "Global" + }, + "spectrum-font-size-50": { + "value": "11px", + "description": "Used by `--spectrum-calendar-heading-text-size`, `--spectrum-calendar-day-text-size`.", + "control": "text", + "category": "Global" + }, + "spectrum-logical-rotation": { + "description": "Defined in `.spectrum-Calendar:dir(rtl), [dir=\"rtl\"] .spectrum-Calendar`.
Used by `.spectrum-Calendar-nextMonth, .spectrum-Calendar-prevMonth`.", + "control": "text", + "category": "Global" + }, + "spectrum-font-size-100": { + "value": "14px", + "description": "Used by `--spectrum-calendar-day-text-size`.", + "control": "text", + "category": "Global" + }, + "spectrum-regular-font-weight": { + "value": "400", + "description": "Used by `--spectrum-calendar-day-text-font-weight`.", + "control": "text", + "category": "Global" + }, + "spectrum-neutral-content-color-default": { + "value": "var(--spectrum-gray-800)", + "description": "Used by `--spectrum-calendar-day-today-text-color`.", + "control": "color", + "category": "Global" + }, + "spectrum-gray-800": { + "value": "light-dark(rgb(41, 41, 41), rgb(219, 219, 219))", + "description": "Used by `--spectrum-calendar-day-today-border-color`.", + "control": "text", + "category": "Global" + }, + "spectrum-neutral-content-color-down": { + "value": "var(--spectrum-gray-900)", + "description": "Used by `--spectrum-calendar-day-text-color-selected`, `--spectrum-calendar-day-text-color-cap-selected`.", + "control": "color", + "category": "Global" + }, + "spectrum-neutral-content-color-hover": { + "value": "var(--spectrum-gray-900)", + "description": "Used by `--spectrum-calendar-day-text-color-hover`.", + "control": "color", + "category": "Global" + }, + "spectrum-neutral-content-color-key-focus": { + "value": "var(--spectrum-gray-900)", + "description": "Used by `--spectrum-calendar-day-text-color-key-focus`.", + "control": "color", + "category": "Global" + }, + "spectrum-disabled-content-color": { + "value": "var(--spectrum-gray-400)", + "description": "Used by `--spectrum-calendar-day-text-color-disabled`.", + "control": "color", + "category": "Global" + }, + "spectrum-disabled-border-color": { + "value": "var(--spectrum-gray-300)", + "description": "Used by `--spectrum-calendar-day-today-border-color-disabled`.", + "control": "color", + "category": "Global" + } + }, + "system-theme": { + "system-calendar-day-background-color-selected-disabled": { + "description": "Defined in `.spectrum`.
Used by `--spectrum-calendar-day-background-color-selected-disabled`.", + "control": "color" + } + }, + "passthroughs": { + "mod-actionbutton-edge-to-text": { + "category": "Passthrough" + }, + "mod-actionbutton-min-width": { + "category": "Passthrough" + }, + "mod-actionbutton-content-color-default": { + "category": "Passthrough" + } + }, + "high-contrast": { + "highcontrast-calendar-day-title-text-color": { + "value": "var(--mod-calendar-day-title-text-color, var(--spectrum-neutral-subdued-content-color-default))", + "description": "Defined in `.spectrum-Calendar-date`, `.spectrum-Calendar-date.is-disabled`.
Used by `--spectrum-calendar-title-text-color`.
Defaults to `var(--mod-calendar-day-title-text-color, var(--spectrum-neutral-subdued-content-color-default))`, if not set.", + "control": "color" + }, + "highcontrast-calendar-day-background-selected": { + "value": "var(--mod-calendar-day-background-color-selected, var(--spectrum-calendar-day-background-color-selected))", + "description": "Defined in `.spectrum-Calendar-date`.
Used by `--spectrum-calendar-day-background-selected`.
Defaults to `var(--mod-calendar-day-background-color-selected, var(--spectrum-calendar-day-background-color-selected))`, if not set.", + "control": "text" + }, + "highcontrast-calendar-day-background-selected-hover": { + "value": "var(--mod-calendar-day-background-color-selected-hover, var(--spectrum-calendar-day-background-color-selected-hover))", + "description": "Defined in `.spectrum-Calendar-date`.
Used by `--spectrum-calendar-day-background-selected-hover`.
Defaults to `var(--mod-calendar-day-background-color-selected-hover, var(--spectrum-calendar-day-background-color-selected-hover))`, if not set.", + "control": "text" + }, + "highcontrast-calendar-day-background-cap-selected": { + "value": "var(--mod-calendar-day-background-color-cap-selected, var(--spectrum-calendar-day-background-color-cap-selected))", + "description": "Defined in `.spectrum-Calendar-date`.
Used by `--spectrum-calendar-day-background-cap-selected`.
Defaults to `var(--mod-calendar-day-background-color-cap-selected, var(--spectrum-calendar-day-background-color-cap-selected))`, if not set.", + "control": "text" + }, + "highcontrast-calendar-day-background-hover": { + "value": "var(--mod-calendar-day-background-color-hover, var(--spectrum-calendar-day-background-color-hover))", + "description": "Defined in `.spectrum-Calendar-date`.
Used by `--spectrum-calendar-day-background-hover`.
Defaults to `var(--mod-calendar-day-background-color-hover, var(--spectrum-calendar-day-background-color-hover))`, if not set.", + "control": "text" + }, + "highcontrast-calendar-day-background-focus": { + "value": "var(--mod-calendar-day-background-color-key-focus, var(--spectrum-calendar-day-background-color-key-focus))", + "description": "Defined in `.spectrum-Calendar-date`.
Used by `--spectrum-calendar-day-background-focus`.
Defaults to `var(--mod-calendar-day-background-color-key-focus, var(--spectrum-calendar-day-background-color-key-focus))`, if not set.", + "control": "text" + }, + "highcontrast-calendar-day-background-down": { + "value": "var(--mod-calendar-day-background-color-down, var(--spectrum-calendar-day-background-color-down))", + "description": "Defined in `.spectrum-Calendar-date`.
Used by `--spectrum-calendar-day-background-down`.
Defaults to `var(--mod-calendar-day-background-color-down, var(--spectrum-calendar-day-background-color-down))`, if not set.", + "control": "text" + }, + "highcontrast-calendar-day-border-color-focus": { + "value": "var(--mod-calendar-day-border-color-key-focus, var(--spectrum-calendar-day-border-color-key-focus))", + "description": "Defined in `.spectrum-Calendar-date`.
Used by `--spectrum-calendar-day-border-color-focus`.
Defaults to `var(--mod-calendar-day-border-color-key-focus, var(--spectrum-calendar-day-border-color-key-focus))`, if not set.", + "control": "color" + }, + "highcontrast-calendar-day-today-background-selected-hover": { + "value": "var(--mod-calendar-day-today-background-color-selected-hover, var(--spectrum-calendar-day-today-background-color-selected-hover))", + "description": "Defined in `.spectrum-Calendar-date`.
Used by `--spectrum-calendar-day-today-background-selected-hover`.
Defaults to `var(--mod-calendar-day-today-background-color-selected-hover, var(--spectrum-calendar-day-today-background-color-selected-hover))`, if not set.", + "control": "text" + }, + "highcontrast-calendar-day-today-text-color": { + "value": "var(--mod-calendar-day-today-text-color, var(--spectrum-neutral-content-color-default))", + "description": "Defined in `.spectrum-Calendar-date`, `.spectrum-Calendar-date.is-disabled`.
Used by `--spectrum-calendar-day-today-text-color`.
Defaults to `var(--mod-calendar-day-today-text-color, var(--spectrum-neutral-content-color-default))`, if not set.", + "control": "color" + }, + "highcontrast-calendar-day-today-border-color": { + "value": "var(--mod-calendar-day-today-border-color, var(--spectrum-gray-800))", + "description": "Defined in `.spectrum-Calendar-date`, `.spectrum-Calendar-date.is-disabled`.
Used by `--spectrum-calendar-day-today-border-color`.
Defaults to `var(--mod-calendar-day-today-border-color, var(--spectrum-gray-800))`, if not set.", + "control": "color" + }, + "highcontrast-calendar-day-text-color-selected": { + "value": "var(--mod-calendar-day-text-color-selected, var(--spectrum-neutral-content-color-down))", + "description": "Defined in `.spectrum-Calendar-date`.
Used by `--spectrum-calendar-day-text-color-selected`.
Defaults to `var(--mod-calendar-day-text-color-selected, var(--spectrum-neutral-content-color-down))`, if not set.", + "control": "color" + }, + "highcontrast-calendar-day-text-color-cap-selected": { + "value": "var(--mod-calendar-day-text-color-cap-selected, var(--spectrum-neutral-content-color-down))", + "description": "Defined in `.spectrum-Calendar-date`.
Used by `--spectrum-calendar-day-text-color-cap-selected`.
Defaults to `var(--mod-calendar-day-text-color-cap-selected, var(--spectrum-neutral-content-color-down))`, if not set.", + "control": "color" + }, + "highcontrast-calendar-day-text-color-hover": { + "value": "var(--mod-calendar-day-text-color-hover, var(--spectrum-neutral-content-color-hover))", + "description": "Defined in `.spectrum-Calendar-date`, `.spectrum-Calendar-date.is-disabled`.
Used by `--spectrum-calendar-day-text-color-hover`.
Defaults to `var(--mod-calendar-day-text-color-hover, var(--spectrum-neutral-content-color-hover))`, if not set.", + "control": "color" + }, + "highcontrast-calendar-day-text-color-key-focus": { + "value": "var(--mod-calendar-day-text-color-key-focus, var(--spectrum-neutral-content-color-key-focus))", + "description": "Defined in `.spectrum-Calendar-date`, `.spectrum-Calendar-date.is-disabled`.
Used by `--spectrum-calendar-day-text-color-key-focus`.
Defaults to `var(--mod-calendar-day-text-color-key-focus, var(--spectrum-neutral-content-color-key-focus))`, if not set.", + "control": "color" + } + } } diff --git a/components/calendar/stories/calendar.stories.js b/components/calendar/stories/calendar.stories.js index 303121e9610..47e3b9c37b4 100644 --- a/components/calendar/stories/calendar.stories.js +++ b/components/calendar/stories/calendar.stories.js @@ -1,11 +1,13 @@ import ActionButtonStories from "@spectrum-css/actionbutton/stories/actionbutton.stories.js"; import { disableDefaultModes } from "@spectrum-css/preview/modes"; import { isDisabled, isFocused } from "@spectrum-css/preview/types"; -import metadata from "../dist/metadata.json"; -import packageJson from "../package.json"; import { CalendarGroup } from "./calendar.test.js"; import { Template } from "./template.js"; +// Local assets to render the component styles and structure +import metadata from "../dist/metadata.json"; +import packageJson from "../package.json"; + const months = [...Array(12).keys()].map((key) => new Date(0, key).toLocaleString("en", { month: "long" }) ); @@ -117,6 +119,7 @@ export default { }, packageJson, metadata, + cssprops: metadata.modifiers, }, }; diff --git a/components/card/dist/metadata.json b/components/card/dist/metadata.json index 54eb899211d..4641f9ddd02 100644 --- a/components/card/dist/metadata.json +++ b/components/card/dist/metadata.json @@ -9,12 +9,12 @@ ".spectrum-Card--gallery .spectrum-Card-preview", ".spectrum-Card--gallery .spectrum-Card-preview:after", ".spectrum-Card--gallery .spectrum-Card-preview:before", + ".spectrum-Card--gallery:before", + ".spectrum-Card--gallery:hover .spectrum-Card-preview", ".spectrum-Card--gallery.is-drop-target", ".spectrum-Card--gallery.is-drop-target .spectrum-Card-preview", ".spectrum-Card--gallery.is-drop-target .spectrum-Card-preview:before", ".spectrum-Card--gallery.is-selected .spectrum-Card-preview:before", - ".spectrum-Card--gallery:before", - ".spectrum-Card--gallery:hover .spectrum-Card-preview", ".spectrum-Card--horizontal", ".spectrum-Card--horizontal .spectrum-Card-body", ".spectrum-Card--horizontal .spectrum-Card-content", @@ -28,6 +28,10 @@ ".spectrum-Card--quiet .spectrum-Card-preview", ".spectrum-Card--quiet .spectrum-Card-preview:after", ".spectrum-Card--quiet .spectrum-Card-preview:before", + ".spectrum-Card--quiet:before", + ".spectrum-Card--quiet:focus .spectrum-Card-preview:after", + ".spectrum-Card--quiet:focus:after", + ".spectrum-Card--quiet:hover .spectrum-Card-preview", ".spectrum-Card--quiet.is-drop-target", ".spectrum-Card--quiet.is-drop-target .spectrum-Card-preview", ".spectrum-Card--quiet.is-drop-target .spectrum-Card-preview:before", @@ -35,10 +39,6 @@ ".spectrum-Card--quiet.is-focused:after", ".spectrum-Card--quiet.is-selected .spectrum-Card-preview", ".spectrum-Card--quiet.is-selected .spectrum-Card-preview:before", - ".spectrum-Card--quiet:before", - ".spectrum-Card--quiet:focus .spectrum-Card-preview:after", - ".spectrum-Card--quiet:focus:after", - ".spectrum-Card--quiet:hover .spectrum-Card-preview", ".spectrum-Card-actionButton", ".spectrum-Card-actions", ".spectrum-Card-body", @@ -52,15 +52,6 @@ ".spectrum-Card-subtitle", ".spectrum-Card-subtitle + .spectrum-Card-description:before", ".spectrum-Card-title", - ".spectrum-Card.is-drop-target", - ".spectrum-Card.is-focused .spectrum-Card-actions", - ".spectrum-Card.is-focused .spectrum-Card-quickActions", - ".spectrum-Card.is-selected", - ".spectrum-Card.is-selected .spectrum-Card-actions", - ".spectrum-Card.is-selected .spectrum-Card-quickActions", - ".spectrum-Card.is-selected:before", - ".spectrum-Card.spectrum-Card--gallery", - ".spectrum-Card.spectrum-Card--quiet", ".spectrum-Card:after", ".spectrum-Card:before", ".spectrum-Card:focus .spectrum-Card-actions", @@ -71,157 +62,814 @@ ".spectrum-Card:focus-visible:after", ".spectrum-Card:hover", ".spectrum-Card:hover .spectrum-Card-actions", - ".spectrum-Card:hover .spectrum-Card-quickActions" - ], - "modifiers": [ - "--mod-animation-duration-100", - "--mod-card-actions-background-color-opacity", - "--mod-card-actions-background-color-rgb", - "--mod-card-actions-border-radius", - "--mod-card-actions-drop-shadow-blur", - "--mod-card-actions-drop-shadow-color", - "--mod-card-actions-drop-shadow-x", - "--mod-card-actions-drop-shadow-y", - "--mod-card-actions-size", - "--mod-card-actions-spacing", - "--mod-card-animation-duration", - "--mod-card-background-color", - "--mod-card-background-color-hover", - "--mod-card-body-font-color", - "--mod-card-body-font-family", - "--mod-card-body-font-size", - "--mod-card-body-font-style", - "--mod-card-body-font-weight", - "--mod-card-body-line-height", - "--mod-card-body-padding-block-end", - "--mod-card-body-padding-block-start", - "--mod-card-body-padding-inline-end", - "--mod-card-body-padding-inline-start", - "--mod-card-body-spacing", - "--mod-card-border-color", - "--mod-card-border-color-hover", - "--mod-card-border-color-selected", - "--mod-card-border-width", - "--mod-card-content-margin-bottom", - "--mod-card-content-margin-top", - "--mod-card-content-margin-top-quiet", - "--mod-card-corner-radius", - "--mod-card-divider-color", - "--mod-card-focus-indicator-color", - "--mod-card-focus-indicator-width", - "--mod-card-footer-margin-block-start", - "--mod-card-footer-margin-inline-end", - "--mod-card-footer-margin-inline-start", - "--mod-card-footer-padding-block-end", - "--mod-card-footer-padding-block-start", - "--mod-card-horizontal-body-padding", - "--mod-card-horizontal-preview-padding", - "--mod-card-minimum-width", - "--mod-card-minimum-width-quiet", - "--mod-card-preview-background-color", - "--mod-card-preview-background-color-hover", - "--mod-card-preview-border-width-selected", - "--mod-card-preview-minimum-height", - "--mod-card-selected-background-color-rgb", - "--mod-card-selected-background-opacity", - "--mod-card-subtitle-padding-right", - "--mod-card-title-font-color", - "--mod-card-title-font-family", - "--mod-card-title-font-size", - "--mod-card-title-font-style", - "--mod-card-title-font-weight", - "--mod-card-title-line-height", - "--mod-card-title-padding-right", - "--mod-overlay-animation-duration" - ], - "component": [ - "--spectrum-card-actions-background-color-opacity", - "--spectrum-card-actions-background-color-rgb", - "--spectrum-card-actions-border-radius", - "--spectrum-card-actions-drop-shadow-blur", - "--spectrum-card-actions-drop-shadow-color", - "--spectrum-card-actions-drop-shadow-x", - "--spectrum-card-actions-drop-shadow-y", - "--spectrum-card-actions-size", - "--spectrum-card-actions-spacing", - "--spectrum-card-background-color", - "--spectrum-card-body-font-color", - "--spectrum-card-body-font-family", - "--spectrum-card-body-font-size", - "--spectrum-card-body-font-style", - "--spectrum-card-body-font-weight", - "--spectrum-card-body-line-height", - "--spectrum-card-body-padding-block-start", - "--spectrum-card-body-spacing", - "--spectrum-card-border-color", - "--spectrum-card-border-color-hover", - "--spectrum-card-border-width", - "--spectrum-card-content-margin-bottom", - "--spectrum-card-content-margin-top", - "--spectrum-card-corner-radius", - "--spectrum-card-divider-color", - "--spectrum-card-focus-indicator-color", - "--spectrum-card-focus-indicator-width", - "--spectrum-card-footer-padding-top", - "--spectrum-card-horizontal-body-padding", - "--spectrum-card-horizontal-preview-padding", - "--spectrum-card-minimum-width", - "--spectrum-card-preview-background-color", - "--spectrum-card-preview-background-color-hover", - "--spectrum-card-preview-border-width-selected", - "--spectrum-card-preview-minimum-height", - "--spectrum-card-selected-background-color-rgb", - "--spectrum-card-selected-background-opacity", - "--spectrum-card-selection-background-color-opacity", - "--spectrum-card-selection-background-size", - "--spectrum-card-subtitle-padding-right", - "--spectrum-card-title-font-color", - "--spectrum-card-title-font-family", - "--spectrum-card-title-font-size", - "--spectrum-card-title-font-style", - "--spectrum-card-title-font-weight", - "--spectrum-card-title-line-height", - "--spectrum-card-title-padding-right" - ], - "global": [ - "--spectrum-animation-duration-100", - "--spectrum-background-base-color", - "--spectrum-background-layer-2-color", - "--spectrum-blue-700", - "--spectrum-body-color", - "--spectrum-body-line-height", - "--spectrum-body-sans-serif-font-style", - "--spectrum-body-sans-serif-font-weight", - "--spectrum-body-size-s", - "--spectrum-border-width-100", - "--spectrum-corner-radius-100", - "--spectrum-drop-shadow-blur", - "--spectrum-drop-shadow-color", - "--spectrum-drop-shadow-x", - "--spectrum-drop-shadow-y", - "--spectrum-focus-indicator-color", - "--spectrum-focus-indicator-thickness", - "--spectrum-gray-100", - "--spectrum-gray-100-rgb", - "--spectrum-gray-200", - "--spectrum-heading-color", - "--spectrum-heading-line-height", - "--spectrum-heading-sans-serif-font-style", - "--spectrum-heading-sans-serif-font-weight", - "--spectrum-heading-size-xxs", - "--spectrum-sans-font-family-stack", - "--spectrum-spacing-100", - "--spectrum-spacing-200", - "--spectrum-spacing-300", - "--spectrum-spacing-400" - ], - "system-theme": [ - "--system-card-border-color", - "--system-card-border-color-hover", - "--system-card-divider-color", - "--system-card-preview-background-color", - "--system-card-preview-background-color-hover" + ".spectrum-Card:hover .spectrum-Card-quickActions", + ".spectrum-Card.is-drop-target", + ".spectrum-Card.is-focused .spectrum-Card-actions", + ".spectrum-Card.is-focused .spectrum-Card-quickActions", + ".spectrum-Card.is-selected", + ".spectrum-Card.is-selected .spectrum-Card-actions", + ".spectrum-Card.is-selected .spectrum-Card-quickActions", + ".spectrum-Card.is-selected:before", + ".spectrum-Card.spectrum-Card--gallery", + ".spectrum-Card.spectrum-Card--quiet" ], - "passthroughs": [], - "high-contrast": [] + "modifiers": { + "mod-card-background-color": { + "value": "var(--spectrum-card-preview-background-color)", + "description": "Defined in `.spectrum-Card.is-drop-target`.
Used by `--spectrum-card-background-color`, `.spectrum-Card--gallery .spectrum-Card-preview, .spectrum-Card--quiet .spectrum-Card-preview`, `.spectrum-Card--gallery.is-drop-target .spectrum-Card-preview, .spectrum-Card--quiet.is-drop-target .spectrum-Card-preview`.
Defaults to `var(--spectrum-card-preview-background-color)`, if not set.", + "control": "color", + "category": "Modifier" + }, + "mod-card-body-spacing": { + "value": "24px", + "description": "Used by `--spectrum-card-body-spacing`.
Defaults to `var(--spectrum-spacing-400)`, if not set.", + "control": "text", + "category": "Modifier" + }, + "mod-card-body-padding-block-start": { + "value": "16px", + "description": "Used by `--spectrum-card-body-padding-block-start`.
Defaults to `var(--spectrum-spacing-300)`, if not set.", + "control": "text", + "category": "Modifier" + }, + "mod-card-title-padding-right": { + "value": "24px", + "description": "Used by `--spectrum-card-title-padding-right`.
Defaults to `var(--spectrum-spacing-400)`, if not set.", + "control": "text", + "category": "Modifier" + }, + "mod-card-content-margin-top": { + "value": "8px", + "description": "Defined in `.spectrum-Card.spectrum-Card--quiet`.
Used by `--spectrum-card-content-margin-top`.
Defaults to `var(--spectrum-spacing-100)`, if not set.", + "control": "text", + "category": "Modifier" + }, + "mod-card-content-margin-bottom": { + "value": "16px", + "description": "Used by `--spectrum-card-content-margin-bottom`.
Defaults to `var(--spectrum-spacing-300)`, if not set.", + "control": "text", + "category": "Modifier" + }, + "mod-card-footer-padding-block-start": { + "value": "8px", + "description": "Used by `--spectrum-card-footer-padding-top`.
Defaults to `var(--spectrum-spacing-100)`, if not set.", + "control": "text", + "category": "Modifier" + }, + "mod-card-subtitle-padding-right": { + "value": "8px", + "description": "Used by `--spectrum-card-subtitle-padding-right`.
Defaults to `var(--spectrum-spacing-100)`, if not set.", + "control": "text", + "category": "Modifier" + }, + "mod-card-border-width": { + "value": "1px", + "description": "Used by `--spectrum-card-border-width`.
Defaults to `var(--spectrum-border-width-100)`, if not set.", + "control": "text", + "category": "Modifier" + }, + "mod-card-corner-radius": { + "value": "8px", + "description": "Used by `--spectrum-card-corner-radius`.
Defaults to `var(--spectrum-corner-radius-100)`, if not set.", + "control": "text", + "category": "Modifier" + }, + "mod-card-title-font-family": { + "value": "var(--spectrum-sans-font-family-stack)", + "description": "Used by `--spectrum-card-title-font-family`.
Defaults to `var(--spectrum-sans-font-family-stack)`, if not set.", + "control": "text", + "category": "Modifier" + }, + "mod-card-title-font-size": { + "value": "var(--spectrum-font-size-100)", + "description": "Used by `--spectrum-card-title-font-size`.
Defaults to `var(--spectrum-heading-size-xxs)`, if not set.", + "control": "text", + "category": "Modifier" + }, + "mod-card-title-font-weight": { + "value": "700", + "description": "Used by `--spectrum-card-title-font-weight`.
Defaults to `var(--spectrum-heading-sans-serif-font-weight)`, if not set.", + "control": "text", + "category": "Modifier" + }, + "mod-card-title-font-style": { + "value": "normal", + "description": "Used by `--spectrum-card-title-font-style`.
Defaults to `var(--spectrum-heading-sans-serif-font-style)`, if not set.", + "control": "text", + "category": "Modifier" + }, + "mod-card-title-line-height": { + "value": "1.3", + "description": "Used by `--spectrum-card-title-line-height`.
Defaults to `var(--spectrum-heading-line-height)`, if not set.", + "control": "text", + "category": "Modifier" + }, + "mod-card-title-font-color": { + "value": "var(--spectrum-gray-900)", + "description": "Used by `--spectrum-card-title-font-color`.
Defaults to `var(--spectrum-heading-color)`, if not set.", + "control": "color", + "category": "Modifier" + }, + "mod-card-body-font-family": { + "value": "var(--spectrum-sans-font-family-stack)", + "description": "Used by `--spectrum-card-body-font-family`.
Defaults to `var(--spectrum-sans-font-family-stack)`, if not set.", + "control": "text", + "category": "Modifier" + }, + "mod-card-body-font-size": { + "value": "var(--spectrum-font-size-100)", + "description": "Used by `--spectrum-card-body-font-size`.
Defaults to `var(--spectrum-body-size-s)`, if not set.", + "control": "text", + "category": "Modifier" + }, + "mod-card-body-font-weight": { + "value": "400", + "description": "Used by `--spectrum-card-body-font-weight`.
Defaults to `var(--spectrum-body-sans-serif-font-weight)`, if not set.", + "control": "text", + "category": "Modifier" + }, + "mod-card-body-font-style": { + "value": "normal", + "description": "Used by `--spectrum-card-body-font-style`.
Defaults to `var(--spectrum-body-sans-serif-font-style)`, if not set.", + "control": "text", + "category": "Modifier" + }, + "mod-card-body-line-height": { + "value": "1.5", + "description": "Used by `--spectrum-card-body-line-height`.
Defaults to `var(--spectrum-body-line-height)`, if not set.", + "control": "text", + "category": "Modifier" + }, + "mod-card-body-font-color": { + "value": "var(--spectrum-gray-800)", + "description": "Used by `--spectrum-card-body-font-color`.
Defaults to `var(--spectrum-body-color)`, if not set.", + "control": "color", + "category": "Modifier" + }, + "mod-card-actions-spacing": { + "value": "16px", + "description": "Used by `--spectrum-card-actions-spacing`.
Defaults to `var(--spectrum-spacing-300)`, if not set.", + "control": "text", + "category": "Modifier" + }, + "mod-card-actions-size": { + "value": "40px", + "description": "Used by `--spectrum-card-actions-size`.
Defaults to `var(--spectrum-card-selection-background-size)`, if not set.", + "control": "text", + "category": "Modifier" + }, + "mod-card-actions-border-radius": { + "value": "8px", + "description": "Used by `--spectrum-card-actions-border-radius`.
Defaults to `var(--spectrum-corner-radius-100)`, if not set.", + "control": "text", + "category": "Modifier" + }, + "mod-card-actions-background-color-rgb": { + "value": "var(--spectrum-gray-100-rgb)", + "description": "Used by `--spectrum-card-actions-background-color-rgb`.
Defaults to `var(--spectrum-gray-100-rgb)`, if not set.", + "control": "color", + "category": "Modifier" + }, + "mod-card-actions-background-color-opacity": { + "value": "0.95", + "description": "Used by `--spectrum-card-actions-background-color-opacity`.
Defaults to `var(--spectrum-card-selection-background-color-opacity)`, if not set.", + "control": "color", + "category": "Modifier" + }, + "mod-card-actions-drop-shadow-color": { + "value": "var(--spectrum-drop-shadow-color-100)", + "description": "Used by `--spectrum-card-actions-drop-shadow-color`.
Defaults to `var(--spectrum-drop-shadow-color)`, if not set.", + "control": "color", + "category": "Modifier" + }, + "mod-card-actions-drop-shadow-x": { + "value": "0px", + "description": "Used by `--spectrum-card-actions-drop-shadow-x`.
Defaults to `var(--spectrum-drop-shadow-x)`, if not set.", + "control": "text", + "category": "Modifier" + }, + "mod-card-actions-drop-shadow-y": { + "value": "1px", + "description": "Used by `--spectrum-card-actions-drop-shadow-y`.
Defaults to `var(--spectrum-drop-shadow-y)`, if not set.", + "control": "text", + "category": "Modifier" + }, + "mod-card-actions-drop-shadow-blur": { + "value": "4px", + "description": "Used by `--spectrum-card-actions-drop-shadow-blur`.
Defaults to `var(--spectrum-drop-shadow-blur)`, if not set.", + "control": "text", + "category": "Modifier" + }, + "mod-card-focus-indicator-color": { + "value": "var(--spectrum-blue-800)", + "description": "Used by `--spectrum-card-focus-indicator-color`.
Defaults to `var(--spectrum-focus-indicator-color)`, if not set.", + "control": "color", + "category": "Modifier" + }, + "mod-card-focus-indicator-width": { + "value": "2px", + "description": "Used by `--spectrum-card-focus-indicator-width`.
Defaults to `var(--spectrum-focus-indicator-thickness)`, if not set.", + "control": "text", + "category": "Modifier" + }, + "mod-card-selected-background-opacity": { + "value": "var(--spectrum-card-selected-background-opacity)", + "description": "Used by `--spectrum-card-selected-background-opacity`, `.spectrum-Card--gallery.is-selected .spectrum-Card-preview:before, .spectrum-Card--quiet.is-selected .spectrum-Card-preview:before`.
Defaults to `var(--spectrum-card-selected-background-opacity)`, if not set.", + "control": "text", + "category": "Modifier" + }, + "mod-card-preview-border-width-selected": { + "value": "1px", + "description": "Used by `--spectrum-card-preview-border-width-selected`.
Defaults to `var(--spectrum-border-width-100)`, if not set.", + "control": "text", + "category": "Modifier" + }, + "mod-card-horizontal-body-padding": { + "value": "16px", + "description": "Used by `--spectrum-card-horizontal-body-padding`.
Defaults to `var(--spectrum-spacing-300)`, if not set.", + "control": "text", + "category": "Modifier" + }, + "mod-card-horizontal-preview-padding": { + "value": "12px", + "description": "Used by `--spectrum-card-horizontal-preview-padding`.
Defaults to `var(--spectrum-spacing-200)`, if not set.", + "control": "text", + "category": "Modifier" + }, + "mod-card-minimum-width": { + "value": "100px", + "description": "Defined in `.spectrum-Card.spectrum-Card--quiet`.
Used by `.spectrum-Card`.
Defaults to `var(--spectrum-card-minimum-width)`, if not set.", + "control": "text", + "category": "Modifier" + }, + "mod-card-minimum-width-quiet": { + "description": "Used by `--mod-card-minimum-width`.", + "control": "text", + "category": "Modifier" + }, + "mod-card-content-margin-top-quiet": { + "value": "8px", + "description": "Used by `--mod-card-content-margin-top`.
Defaults to `var(--spectrum-spacing-100)`, if not set.", + "control": "text", + "category": "Modifier" + }, + "mod-card-border-color-selected": { + "value": "light-dark(rgb(93, 137, 255), rgb(52, 91, 248))", + "description": "Used by `--spectrum-card-border-color`.
Defaults to `var(--spectrum-blue-700)`, if not set.", + "control": "color", + "category": "Modifier" + }, + "mod-card-border-color": { + "value": "var(--spectrum-card-border-color)", + "description": "Defined in `.spectrum-Card:hover`.
Used by `.spectrum-Card`, `.spectrum-Card-coverPhoto`, `.spectrum-Card--horizontal .spectrum-Card-preview`.
Defaults to `var(--spectrum-card-border-color)`, if not set.", + "control": "color", + "category": "Modifier" + }, + "mod-card-selected-background-color-rgb": { + "value": "var(--spectrum-card-selected-background-color-rgb)", + "description": "Used by `.spectrum-Card.is-selected:before`, `.spectrum-Card--gallery.is-selected .spectrum-Card-preview:before, .spectrum-Card--quiet.is-selected .spectrum-Card-preview:before`.
Defaults to `var(--spectrum-card-selected-background-color-rgb)`, if not set.", + "control": "color", + "category": "Modifier" + }, + "mod-overlay-animation-duration": { + "value": "var(--spectrum-animation-duration-100, 0.13s)", + "description": "Used by `.spectrum-Card-quickActions`.
Defaults to `var(--spectrum-animation-duration-100, 0.13s)`, if not set.", + "control": "text", + "category": "Modifier" + }, + "mod-card-preview-minimum-height": { + "value": "130px", + "description": "Used by `.spectrum-Card-coverPhoto`, `.spectrum-Card--gallery .spectrum-Card-preview, .spectrum-Card--quiet .spectrum-Card-preview`.
Defaults to `var(--spectrum-card-preview-minimum-height)`, if not set.", + "control": "text", + "category": "Modifier" + }, + "mod-card-preview-background-color": { + "value": "var(--spectrum-card-preview-background-color)", + "description": "Used by `.spectrum-Card-coverPhoto`, `.spectrum-Card--gallery .spectrum-Card-preview, .spectrum-Card--quiet .spectrum-Card-preview`, `.spectrum-Card--gallery.is-drop-target .spectrum-Card-preview, .spectrum-Card--quiet.is-drop-target .spectrum-Card-preview`, `.spectrum-Card--horizontal .spectrum-Card-preview`.
Defaults to `var(--spectrum-card-preview-background-color)`, if not set.", + "control": "color", + "category": "Modifier" + }, + "mod-card-body-padding-inline-end": { + "value": "calc(var(--spectrum-card-body-spacing) - var(--spectrum-card-border-width))", + "description": "Used by `.spectrum-Card-body`.
Defaults to `calc(var(--spectrum-card-body-spacing) - var(--spectrum-card-border-width))`, if not set.", + "control": "text", + "category": "Modifier" + }, + "mod-card-body-padding-inline-start": { + "value": "calc(var(--spectrum-card-body-spacing) - var(--spectrum-card-border-width))", + "description": "Used by `.spectrum-Card-body`.
Defaults to `calc(var(--spectrum-card-body-spacing) - var(--spectrum-card-border-width))`, if not set.", + "control": "text", + "category": "Modifier" + }, + "mod-card-body-padding-block-end": { + "value": "calc(var(--spectrum-card-body-spacing) - var(--spectrum-card-border-width))", + "description": "Used by `.spectrum-Card-body`.
Defaults to `calc(var(--spectrum-card-body-spacing) - var(--spectrum-card-border-width))`, if not set.", + "control": "text", + "category": "Modifier" + }, + "mod-card-footer-margin-block-start": { + "value": "calc((var(--spectrum-card-body-spacing) - var(--spectrum-card-content-margin-bottom)) * -1)", + "description": "Used by `.spectrum-Card-footer`.
Defaults to `calc((var(--spectrum-card-body-spacing) - var(--spectrum-card-content-margin-bottom)) * -1)`, if not set.", + "control": "text", + "category": "Modifier" + }, + "mod-card-footer-margin-inline-start": { + "value": "var(--spectrum-card-body-spacing)", + "description": "Used by `.spectrum-Card-footer`.
Defaults to `var(--spectrum-card-body-spacing)`, if not set.", + "control": "text", + "category": "Modifier" + }, + "mod-card-footer-margin-inline-end": { + "value": "var(--spectrum-card-body-spacing)", + "description": "Used by `.spectrum-Card-footer`.
Defaults to `var(--spectrum-card-body-spacing)`, if not set.", + "control": "text", + "category": "Modifier" + }, + "mod-card-footer-padding-block-end": { + "value": "calc(var(--spectrum-card-body-spacing) - var(--spectrum-card-border-width))", + "description": "Used by `.spectrum-Card-footer`.
Defaults to `calc(var(--spectrum-card-body-spacing) - var(--spectrum-card-border-width))`, if not set.", + "control": "text", + "category": "Modifier" + }, + "mod-card-divider-color": { + "value": "var(--spectrum-card-divider-color)", + "description": "Used by `.spectrum-Card-footer`.
Defaults to `var(--spectrum-card-divider-color)`, if not set.", + "control": "color", + "category": "Modifier" + }, + "mod-card-border-color-hover": { + "value": "var(--spectrum-card-border-color-hover)", + "description": "Defined in `.spectrum-Card--gallery, .spectrum-Card--quiet`.
Used by `--mod-card-border-color`, `.spectrum-Card--horizontal:hover .spectrum-Card-preview`.
Defaults to `var(--spectrum-card-border-color-hover)`, if not set.", + "control": "color", + "category": "Modifier" + }, + "mod-card-animation-duration": { + "value": "var(--mod-animation-duration-100, var(--spectrum-animation-duration-100))", + "description": "Used by `.spectrum-Card--gallery .spectrum-Card-preview, .spectrum-Card--quiet .spectrum-Card-preview`.
Defaults to `var(--mod-animation-duration-100, var(--spectrum-animation-duration-100))`, if not set.", + "control": "text", + "category": "Modifier" + }, + "mod-animation-duration-100": { + "value": "var(--spectrum-animation-duration-100)", + "description": "Used by `.spectrum-Card--gallery .spectrum-Card-preview, .spectrum-Card--quiet .spectrum-Card-preview`.
Defaults to `var(--spectrum-animation-duration-100)`, if not set.", + "control": "text", + "category": "Modifier" + }, + "mod-card-preview-background-color-hover": { + "value": "var(--mod-card-background-color-hover, var(--spectrum-card-preview-background-color-hover))", + "description": "Used by `.spectrum-Card--gallery:hover .spectrum-Card-preview, .spectrum-Card--quiet:hover .spectrum-Card-preview`.
Defaults to `var(--mod-card-background-color-hover, var(--spectrum-card-preview-background-color-hover))`, if not set.", + "control": "color", + "category": "Modifier" + }, + "mod-card-background-color-hover": { + "value": "var(--spectrum-card-preview-background-color-hover)", + "description": "Used by `.spectrum-Card--gallery:hover .spectrum-Card-preview, .spectrum-Card--quiet:hover .spectrum-Card-preview`.
Defaults to `var(--spectrum-card-preview-background-color-hover)`, if not set.", + "control": "color", + "category": "Modifier" + } + }, + "component": { + "spectrum-card-background-color": { + "description": "Defined in `.spectrum-Card`.
Used by `.spectrum-Card`.", + "control": "color", + "category": "Component" + }, + "spectrum-card-body-spacing": { + "description": "Defined in `.spectrum-Card`.
Used by `.spectrum-Card-body`, `.spectrum-Card-footer`.", + "control": "text", + "category": "Component" + }, + "spectrum-card-body-padding-block-start": { + "description": "Defined in `.spectrum-Card`.
Used by `.spectrum-Card-body`.", + "control": "text", + "category": "Component" + }, + "spectrum-card-title-padding-right": { + "description": "Defined in `.spectrum-Card`.
Used by `.spectrum-Card-title`.", + "control": "text", + "category": "Component" + }, + "spectrum-card-content-margin-top": { + "description": "Defined in `.spectrum-Card`, `.spectrum-Card.spectrum-Card--gallery`.
Used by `.spectrum-Card-content`, `.spectrum-Card--gallery .spectrum-Card-body, .spectrum-Card--quiet .spectrum-Card-body`.", + "control": "text", + "category": "Component" + }, + "spectrum-card-content-margin-bottom": { + "description": "Defined in `.spectrum-Card`.
Used by `.spectrum-Card-footer`.", + "control": "text", + "category": "Component" + }, + "spectrum-card-footer-padding-top": { + "description": "Defined in `.spectrum-Card`.
Used by `.spectrum-Card-footer`.", + "control": "text", + "category": "Component" + }, + "spectrum-card-subtitle-padding-right": { + "description": "Defined in `.spectrum-Card`.
Used by `.spectrum-Card-subtitle`, `.spectrum-Card-subtitle + .spectrum-Card-description:before`.", + "control": "text", + "category": "Component" + }, + "spectrum-card-border-width": { + "description": "Defined in `.spectrum-Card`.
Used by `.spectrum-Card`, `.spectrum-Card-quickActions`, `.spectrum-Card-coverPhoto`, `.spectrum-Card-body`, `.spectrum-Card-footer`, `.spectrum-Card--horizontal .spectrum-Card-preview`.", + "control": "text", + "category": "Component" + }, + "spectrum-card-corner-radius": { + "description": "Defined in `.spectrum-Card`.
Used by `.spectrum-Card`, `.spectrum-Card:after`, `.spectrum-Card:focus-visible .spectrum-Card-coverPhoto, .spectrum-Card:focus-visible .spectrum-Card-preview`, `.spectrum-Card-coverPhoto`, `.spectrum-Card-preview`, `.spectrum-Card--gallery .spectrum-Card-preview, .spectrum-Card--quiet .spectrum-Card-preview`, `.spectrum-Card--gallery .spectrum-Card-preview:after, .spectrum-Card--quiet .spectrum-Card-preview:after`, `.spectrum-Card--horizontal .spectrum-Card-preview`.", + "control": "text", + "category": "Component" + }, + "spectrum-card-title-font-family": { + "description": "Defined in `.spectrum-Card`.
Used by `.spectrum-Card-title`.", + "control": "text", + "category": "Component" + }, + "spectrum-card-title-font-size": { + "description": "Defined in `.spectrum-Card`.
Used by `.spectrum-Card-title`.", + "control": "text", + "category": "Component" + }, + "spectrum-card-title-font-weight": { + "description": "Defined in `.spectrum-Card`.
Used by `.spectrum-Card-title`.", + "control": "text", + "category": "Component" + }, + "spectrum-card-title-font-style": { + "description": "Defined in `.spectrum-Card`.
Used by `.spectrum-Card-title`.", + "control": "text", + "category": "Component" + }, + "spectrum-card-title-line-height": { + "description": "Defined in `.spectrum-Card`.
Used by `.spectrum-Card-title`.", + "control": "text", + "category": "Component" + }, + "spectrum-card-title-font-color": { + "description": "Defined in `.spectrum-Card`.
Used by `.spectrum-Card-title`, `.spectrum-Card-subtitle`.", + "control": "color", + "category": "Component" + }, + "spectrum-card-body-font-family": { + "description": "Defined in `.spectrum-Card`.
Used by `.spectrum-Card-description`.", + "control": "text", + "category": "Component" + }, + "spectrum-card-body-font-size": { + "description": "Defined in `.spectrum-Card`.
Used by `.spectrum-Card-description`.", + "control": "text", + "category": "Component" + }, + "spectrum-card-body-font-weight": { + "description": "Defined in `.spectrum-Card`.
Used by `.spectrum-Card-description`.", + "control": "text", + "category": "Component" + }, + "spectrum-card-body-font-style": { + "description": "Defined in `.spectrum-Card`.
Used by `.spectrum-Card-description`.", + "control": "text", + "category": "Component" + }, + "spectrum-card-body-line-height": { + "description": "Defined in `.spectrum-Card`.
Used by `.spectrum-Card-description, .spectrum-Card-footer`.", + "control": "text", + "category": "Component" + }, + "spectrum-card-body-font-color": { + "description": "Defined in `.spectrum-Card`.
Used by `.spectrum-Card-preview`, `.spectrum-Card-description, .spectrum-Card-footer`.", + "control": "color", + "category": "Component" + }, + "spectrum-card-actions-spacing": { + "description": "Defined in `.spectrum-Card`.
Used by `.spectrum-Card-quickActions`, `.spectrum-Card-actions`.", + "control": "text", + "category": "Component" + }, + "spectrum-card-actions-size": { + "description": "Defined in `.spectrum-Card`.
Used by `.spectrum-Card-quickActions`.", + "control": "text", + "category": "Component" + }, + "spectrum-card-selection-background-size": { + "value": "40px", + "description": "Used by `--spectrum-card-actions-size`.", + "control": "text", + "category": "Component" + }, + "spectrum-card-actions-border-radius": { + "description": "Defined in `.spectrum-Card`.
Used by `.spectrum-Card-quickActions`.", + "control": "text", + "category": "Component" + }, + "spectrum-card-actions-background-color-rgb": { + "description": "Defined in `.spectrum-Card`.
Used by `.spectrum-Card-quickActions`.", + "control": "color", + "category": "Component" + }, + "spectrum-card-actions-background-color-opacity": { + "description": "Defined in `.spectrum-Card`.
Used by `.spectrum-Card-quickActions`.", + "control": "color", + "category": "Component" + }, + "spectrum-card-selection-background-color-opacity": { + "value": "0.95", + "description": "Used by `--spectrum-card-actions-background-color-opacity`.", + "control": "color", + "category": "Component" + }, + "spectrum-card-actions-drop-shadow-color": { + "description": "Defined in `.spectrum-Card`.
Used by `.spectrum-Card-quickActions`.", + "control": "color", + "category": "Component" + }, + "spectrum-card-actions-drop-shadow-x": { + "description": "Defined in `.spectrum-Card`.
Used by `.spectrum-Card-quickActions`.", + "control": "text", + "category": "Component" + }, + "spectrum-card-actions-drop-shadow-y": { + "description": "Defined in `.spectrum-Card`.
Used by `.spectrum-Card-quickActions`.", + "control": "text", + "category": "Component" + }, + "spectrum-card-actions-drop-shadow-blur": { + "description": "Defined in `.spectrum-Card`.
Used by `.spectrum-Card-quickActions`.", + "control": "text", + "category": "Component" + }, + "spectrum-card-focus-indicator-color": { + "description": "Defined in `.spectrum-Card`.
Used by `.spectrum-Card:focus-visible:after`, `.spectrum-Card--quiet.is-focused .spectrum-Card-preview:after, .spectrum-Card--quiet:focus .spectrum-Card-preview:after`, `.spectrum-Card--gallery.is-drop-target .spectrum-Card-preview:before, .spectrum-Card--quiet.is-drop-target .spectrum-Card-preview:before`.", + "control": "color", + "category": "Component" + }, + "spectrum-card-focus-indicator-width": { + "description": "Defined in `.spectrum-Card`.
Used by `.spectrum-Card:after`, `.spectrum-Card:focus-visible:after`, `.spectrum-Card:focus-visible .spectrum-Card-coverPhoto, .spectrum-Card:focus-visible .spectrum-Card-preview`, `.spectrum-Card--quiet .spectrum-Card-preview`, `.spectrum-Card--gallery .spectrum-Card-preview:after, .spectrum-Card--quiet .spectrum-Card-preview:after`.", + "control": "text", + "category": "Component" + }, + "spectrum-card-selected-background-opacity": { + "description": "Defined in `.spectrum-Card`.
Used by `.spectrum-Card.is-selected:before`, `.spectrum-Card--gallery.is-selected .spectrum-Card-preview:before, .spectrum-Card--quiet.is-selected .spectrum-Card-preview:before`.", + "control": "text", + "category": "Component" + }, + "spectrum-card-preview-border-width-selected": { + "description": "Defined in `.spectrum-Card`.
Used by `.spectrum-Card--quiet.is-selected .spectrum-Card-preview`.", + "control": "text", + "category": "Component" + }, + "spectrum-card-horizontal-body-padding": { + "description": "Defined in `.spectrum-Card`.
Used by `.spectrum-Card--horizontal .spectrum-Card-body`.", + "control": "text", + "category": "Component" + }, + "spectrum-card-horizontal-preview-padding": { + "description": "Defined in `.spectrum-Card`.
Used by `.spectrum-Card--horizontal .spectrum-Card-preview`.", + "control": "text", + "category": "Component" + }, + "spectrum-card-border-color": { + "description": "Defined in `.spectrum-Card.is-drop-target, .spectrum-Card.is-selected`, `.spectrum-Card`.
Used by `.spectrum-Card`, `.spectrum-Card.is-drop-target`, `.spectrum-Card-coverPhoto`, `.spectrum-Card--quiet.is-selected .spectrum-Card-preview`, `.spectrum-Card--horizontal .spectrum-Card-preview`.", + "control": "color", + "category": "Component" + }, + "spectrum-card-minimum-width": { + "value": "100px", + "description": "Used by `.spectrum-Card`.", + "control": "text", + "category": "Component" + }, + "spectrum-card-selected-background-color-rgb": { + "description": "Used by `.spectrum-Card.is-selected:before`, `.spectrum-Card--gallery.is-selected .spectrum-Card-preview:before, .spectrum-Card--quiet.is-selected .spectrum-Card-preview:before`.", + "control": "color", + "category": "Component" + }, + "spectrum-card-preview-minimum-height": { + "value": "130px", + "description": "Used by `.spectrum-Card-coverPhoto`, `.spectrum-Card--gallery .spectrum-Card-preview, .spectrum-Card--quiet .spectrum-Card-preview`.", + "control": "text", + "category": "Component" + }, + "spectrum-card-preview-background-color": { + "description": "Defined in `.spectrum-Card`.
Used by `.spectrum-Card-coverPhoto`, `.spectrum-Card--gallery .spectrum-Card-preview, .spectrum-Card--quiet .spectrum-Card-preview`, `.spectrum-Card--gallery.is-drop-target .spectrum-Card-preview, .spectrum-Card--quiet.is-drop-target .spectrum-Card-preview`, `.spectrum-Card--horizontal .spectrum-Card-preview`.", + "control": "color", + "category": "Component" + }, + "spectrum-card-divider-color": { + "description": "Defined in `.spectrum-Card`.
Used by `.spectrum-Card-footer`.", + "control": "color", + "category": "Component" + }, + "spectrum-card-border-color-hover": { + "description": "Defined in `.spectrum-Card`.
Used by `--mod-card-border-color`, `.spectrum-Card--horizontal:hover .spectrum-Card-preview`.", + "control": "color", + "category": "Component" + }, + "spectrum-card-preview-background-color-hover": { + "description": "Defined in `.spectrum-Card`.
Used by `.spectrum-Card--gallery:hover .spectrum-Card-preview, .spectrum-Card--quiet:hover .spectrum-Card-preview`.", + "control": "color", + "category": "Component" + } + }, + "global": { + "spectrum-gray-100": { + "value": "light-dark(rgb(233, 233, 233), rgb(44, 44, 44))", + "description": "Used by `--system-card-border-color`, `--system-card-preview-background-color`.", + "control": "text", + "category": "Global" + }, + "spectrum-gray-200": { + "value": "light-dark(rgb(225, 225, 225), rgb(50, 50, 50))", + "description": "Used by `--system-card-border-color-hover`, `--system-card-divider-color`, `--system-card-preview-background-color-hover`.", + "control": "text", + "category": "Global" + }, + "spectrum-background-layer-2-color": { + "value": "var(--spectrum-gray-75)", + "description": "Used by `--spectrum-card-background-color`.", + "control": "color", + "category": "Global" + }, + "spectrum-spacing-400": { + "value": "24px", + "description": "Used by `--spectrum-card-body-spacing`, `--spectrum-card-title-padding-right`.", + "control": "text", + "category": "Global" + }, + "spectrum-spacing-300": { + "value": "16px", + "description": "Used by `--spectrum-card-body-padding-block-start`, `--spectrum-card-content-margin-bottom`, `--spectrum-card-actions-spacing`, `--spectrum-card-horizontal-body-padding`.", + "control": "text", + "category": "Global" + }, + "spectrum-spacing-100": { + "value": "8px", + "description": "Used by `--spectrum-card-content-margin-top`, `--spectrum-card-footer-padding-top`, `--spectrum-card-subtitle-padding-right`, `--mod-card-content-margin-top`.", + "control": "text", + "category": "Global" + }, + "spectrum-border-width-100": { + "value": "1px", + "description": "Used by `--spectrum-card-border-width`, `--spectrum-card-preview-border-width-selected`.", + "control": "text", + "category": "Global" + }, + "spectrum-corner-radius-100": { + "value": "8px", + "description": "Used by `--spectrum-card-corner-radius`, `--spectrum-card-actions-border-radius`.", + "control": "text", + "category": "Global" + }, + "spectrum-sans-font-family-stack": { + "description": "Used by `--spectrum-card-title-font-family`, `--spectrum-card-body-font-family`.", + "control": "text", + "category": "Global" + }, + "spectrum-heading-size-xxs": { + "value": "var(--spectrum-font-size-100)", + "description": "Used by `--spectrum-card-title-font-size`.", + "control": "text", + "category": "Global" + }, + "spectrum-heading-sans-serif-font-weight": { + "value": "700", + "description": "Used by `--spectrum-card-title-font-weight`.", + "control": "text", + "category": "Global" + }, + "spectrum-heading-sans-serif-font-style": { + "value": "normal", + "description": "Used by `--spectrum-card-title-font-style`.", + "control": "text", + "category": "Global" + }, + "spectrum-heading-line-height": { + "value": "1.3", + "description": "Used by `--spectrum-card-title-line-height`.", + "control": "text", + "category": "Global" + }, + "spectrum-heading-color": { + "value": "var(--spectrum-gray-900)", + "description": "Used by `--spectrum-card-title-font-color`.", + "control": "color", + "category": "Global" + }, + "spectrum-body-size-s": { + "value": "var(--spectrum-font-size-100)", + "description": "Used by `--spectrum-card-body-font-size`.", + "control": "text", + "category": "Global" + }, + "spectrum-body-sans-serif-font-weight": { + "value": "400", + "description": "Used by `--spectrum-card-body-font-weight`.", + "control": "text", + "category": "Global" + }, + "spectrum-body-sans-serif-font-style": { + "value": "normal", + "description": "Used by `--spectrum-card-body-font-style`.", + "control": "text", + "category": "Global" + }, + "spectrum-body-line-height": { + "value": "1.5", + "description": "Used by `--spectrum-card-body-line-height`.", + "control": "text", + "category": "Global" + }, + "spectrum-body-color": { + "value": "var(--spectrum-gray-800)", + "description": "Used by `--spectrum-card-body-font-color`.", + "control": "color", + "category": "Global" + }, + "spectrum-gray-100-rgb": { + "description": "Used by `--spectrum-card-actions-background-color-rgb`.", + "control": "text", + "category": "Global" + }, + "spectrum-drop-shadow-color": { + "value": "var(--spectrum-drop-shadow-color-100)", + "description": "Used by `--spectrum-card-actions-drop-shadow-color`.", + "control": "color", + "category": "Global" + }, + "spectrum-drop-shadow-x": { + "value": "0px", + "description": "Used by `--spectrum-card-actions-drop-shadow-x`.", + "control": "text", + "category": "Global" + }, + "spectrum-drop-shadow-y": { + "value": "1px", + "description": "Used by `--spectrum-card-actions-drop-shadow-y`.", + "control": "text", + "category": "Global" + }, + "spectrum-drop-shadow-blur": { + "value": "4px", + "description": "Used by `--spectrum-card-actions-drop-shadow-blur`.", + "control": "text", + "category": "Global" + }, + "spectrum-focus-indicator-color": { + "value": "var(--spectrum-blue-800)", + "description": "Used by `--spectrum-card-focus-indicator-color`.", + "control": "color", + "category": "Global" + }, + "spectrum-focus-indicator-thickness": { + "value": "2px", + "description": "Used by `--spectrum-card-focus-indicator-width`.", + "control": "text", + "category": "Global" + }, + "spectrum-spacing-200": { + "value": "12px", + "description": "Used by `--spectrum-card-horizontal-preview-padding`.", + "control": "text", + "category": "Global" + }, + "spectrum-blue-700": { + "value": "light-dark(rgb(93, 137, 255), rgb(52, 91, 248))", + "description": "Used by `--spectrum-card-border-color`.", + "control": "text", + "category": "Global" + }, + "spectrum-background-base-color": { + "value": "var(--spectrum-gray-25)", + "description": "Used by `--mod-card-background-color`.", + "control": "color", + "category": "Global" + }, + "spectrum-animation-duration-100": { + "description": "Used by `.spectrum-Card-quickActions`, `.spectrum-Card--gallery .spectrum-Card-preview, .spectrum-Card--quiet .spectrum-Card-preview`.", + "control": "text", + "category": "Global" + } + }, + "system-theme": { + "system-card-border-color": { + "description": "Defined in `.spectrum`.
Used by `--spectrum-card-border-color`.", + "control": "color" + }, + "system-card-border-color-hover": { + "description": "Defined in `.spectrum`.
Used by `--spectrum-card-border-color-hover`.", + "control": "color" + }, + "system-card-divider-color": { + "description": "Defined in `.spectrum`.
Used by `--spectrum-card-divider-color`.", + "control": "color" + }, + "system-card-preview-background-color": { + "description": "Defined in `.spectrum`.
Used by `--spectrum-card-preview-background-color`.", + "control": "color" + }, + "system-card-preview-background-color-hover": { + "description": "Defined in `.spectrum`.
Used by `--spectrum-card-preview-background-color-hover`.", + "control": "color" + } + }, + "passthroughs": {}, + "high-contrast": {} } diff --git a/components/card/stories/card.stories.js b/components/card/stories/card.stories.js index 2d8147cda37..ac8eb59f831 100644 --- a/components/card/stories/card.stories.js +++ b/components/card/stories/card.stories.js @@ -2,11 +2,13 @@ import { default as ActionButton } from "@spectrum-css/actionbutton/stories/acti import { default as Checkbox } from "@spectrum-css/checkbox/stories/checkbox.stories.js"; import { disableDefaultModes } from "@spectrum-css/preview/modes"; import { isFocused, isQuiet, isSelected } from "@spectrum-css/preview/types"; -import metadata from "../dist/metadata.json"; -import packageJson from "../package.json"; import { CardGroup } from "./card.test.js"; import { Template } from "./template.js"; +// Local assets to render the component styles and structure +import metadata from "../dist/metadata.json"; +import packageJson from "../package.json"; + /** * A card represents a rectangular space to contain text or images. Cards are typically used to encapsulate units of a data set, such as a gallery of image/caption pairs. */ @@ -127,6 +129,7 @@ export default { }, packageJson, metadata, + cssprops: metadata.modifiers, }, }; diff --git a/components/checkbox/dist/metadata.json b/components/checkbox/dist/metadata.json index 695a4df09f6..bbcf84e491f 100644 --- a/components/checkbox/dist/metadata.json +++ b/components/checkbox/dist/metadata.json @@ -10,6 +10,10 @@ ".spectrum-Checkbox .spectrum-Checkbox-partialCheckmark", ".spectrum-Checkbox--emphasized .spectrum-Checkbox-input:checked + .spectrum-Checkbox-box:before", ".spectrum-Checkbox--emphasized .spectrum-Checkbox-input:focus-visible:checked + .spectrum-Checkbox-box:before", + ".spectrum-Checkbox--emphasized:active .spectrum-Checkbox-input:checked + .spectrum-Checkbox-box:before", + ".spectrum-Checkbox--emphasized:focus-visible .spectrum-Checkbox-box:before", + ".spectrum-Checkbox--emphasized:focus-visible .spectrum-Checkbox-input:checked + .spectrum-Checkbox-box:before", + ".spectrum-Checkbox--emphasized:hover .spectrum-Checkbox-input:checked + .spectrum-Checkbox-box:before", ".spectrum-Checkbox--emphasized.is-indeterminate .spectrum-Checkbox-box:before", ".spectrum-Checkbox--emphasized.is-indeterminate .spectrum-Checkbox-input:checked + .spectrum-Checkbox-box:before", ".spectrum-Checkbox--emphasized.is-indeterminate .spectrum-Checkbox-input:focus-visible + .spectrum-Checkbox-box:before", @@ -18,15 +22,11 @@ ".spectrum-Checkbox--emphasized.is-indeterminate:hover .spectrum-Checkbox-box:before", ".spectrum-Checkbox--emphasized.is-indeterminate:hover .spectrum-Checkbox-input:checked + .spectrum-Checkbox-box:before", ".spectrum-Checkbox--emphasized.is-invalid .spectrum-Checkbox-input:focus-visible:checked + .spectrum-Checkbox-box:before", - ".spectrum-Checkbox--emphasized.is-invalid.is-indeterminate:hover .spectrum-Checkbox-box:before", - ".spectrum-Checkbox--emphasized.is-invalid.is-indeterminate:hover .spectrum-Checkbox-input:checked + .spectrum-Checkbox-box:before", ".spectrum-Checkbox--emphasized.is-invalid:active .spectrum-Checkbox-box:before", ".spectrum-Checkbox--emphasized.is-invalid:active .spectrum-Checkbox-input:checked + .spectrum-Checkbox-box:before", ".spectrum-Checkbox--emphasized.is-invalid:hover .spectrum-Checkbox-input:checked + .spectrum-Checkbox-box:before", - ".spectrum-Checkbox--emphasized:active .spectrum-Checkbox-input:checked + .spectrum-Checkbox-box:before", - ".spectrum-Checkbox--emphasized:focus-visible .spectrum-Checkbox-box:before", - ".spectrum-Checkbox--emphasized:focus-visible .spectrum-Checkbox-input:checked + .spectrum-Checkbox-box:before", - ".spectrum-Checkbox--emphasized:hover .spectrum-Checkbox-input:checked + .spectrum-Checkbox-box:before", + ".spectrum-Checkbox--emphasized.is-invalid.is-indeterminate:hover .spectrum-Checkbox-box:before", + ".spectrum-Checkbox--emphasized.is-invalid.is-indeterminate:hover .spectrum-Checkbox-input:checked + .spectrum-Checkbox-box:before", ".spectrum-Checkbox--sizeL", ".spectrum-Checkbox--sizeM", ".spectrum-Checkbox--sizeS", @@ -47,6 +47,12 @@ ".spectrum-Checkbox-label:lang(ja)", ".spectrum-Checkbox-label:lang(ko)", ".spectrum-Checkbox-label:lang(zh)", + ".spectrum-Checkbox:active .spectrum-Checkbox-box:before", + ".spectrum-Checkbox:active .spectrum-Checkbox-input:checked + .spectrum-Checkbox-box:before", + ".spectrum-Checkbox:active .spectrum-Checkbox-label", + ".spectrum-Checkbox:hover .spectrum-Checkbox-box:before", + ".spectrum-Checkbox:hover .spectrum-Checkbox-input:checked + .spectrum-Checkbox-box:before", + ".spectrum-Checkbox:hover .spectrum-Checkbox-label", ".spectrum-Checkbox.is-indeterminate .spectrum-Checkbox-box .spectrum-Checkbox-checkmark", ".spectrum-Checkbox.is-indeterminate .spectrum-Checkbox-box .spectrum-Checkbox-partialCheckmark", ".spectrum-Checkbox.is-indeterminate .spectrum-Checkbox-box:before", @@ -59,177 +65,816 @@ ".spectrum-Checkbox.is-invalid .spectrum-Checkbox-box:before", ".spectrum-Checkbox.is-invalid .spectrum-Checkbox-input:checked + .spectrum-Checkbox-box:before", ".spectrum-Checkbox.is-invalid .spectrum-Checkbox-input:focus-visible + .spectrum-Checkbox-box:before", + ".spectrum-Checkbox.is-invalid:hover .spectrum-Checkbox-box:before", + ".spectrum-Checkbox.is-invalid:hover .spectrum-Checkbox-input:checked + .spectrum-Checkbox-box:before", ".spectrum-Checkbox.is-invalid.is-indeterminate .spectrum-Checkbox-box:before", ".spectrum-Checkbox.is-invalid.is-indeterminate .spectrum-Checkbox-input:checked + .spectrum-Checkbox-box:before", ".spectrum-Checkbox.is-invalid.is-indeterminate .spectrum-Checkbox-input:focus-visible + .spectrum-Checkbox-box:before", ".spectrum-Checkbox.is-invalid.is-indeterminate:hover .spectrum-Checkbox-box:before", ".spectrum-Checkbox.is-invalid.is-indeterminate:hover .spectrum-Checkbox-input:checked + .spectrum-Checkbox-box:before", ".spectrum-Checkbox.is-invalid.is-indeterminate:hover .spectrum-Checkbox-label", - ".spectrum-Checkbox.is-invalid:hover .spectrum-Checkbox-box:before", - ".spectrum-Checkbox.is-invalid:hover .spectrum-Checkbox-input:checked + .spectrum-Checkbox-box:before", ".spectrum-Checkbox.is-readOnly .spectrum-Checkbox-input", ".spectrum-Checkbox.is-readOnly .spectrum-Checkbox-input:checked:disabled + .spectrum-Checkbox-box:before", ".spectrum-Checkbox.is-readOnly .spectrum-Checkbox-input:checked:disabled ~ .spectrum-Checkbox-label", ".spectrum-Checkbox.is-readOnly .spectrum-Checkbox-input:disabled + .spectrum-Checkbox-box:before", - ".spectrum-Checkbox.is-readOnly .spectrum-Checkbox-input:disabled ~ .spectrum-Checkbox-label", - ".spectrum-Checkbox:active .spectrum-Checkbox-box:before", - ".spectrum-Checkbox:active .spectrum-Checkbox-input:checked + .spectrum-Checkbox-box:before", - ".spectrum-Checkbox:active .spectrum-Checkbox-label", - ".spectrum-Checkbox:hover .spectrum-Checkbox-box:before", - ".spectrum-Checkbox:hover .spectrum-Checkbox-input:checked + .spectrum-Checkbox-box:before", - ".spectrum-Checkbox:hover .spectrum-Checkbox-label" - ], - "modifiers": [ - "--mod-checkbox-animation-duration", - "--mod-checkbox-border-width", - "--mod-checkbox-checkmark-color", - "--mod-checkbox-content-color-default", - "--mod-checkbox-content-color-disabled", - "--mod-checkbox-content-color-down", - "--mod-checkbox-content-color-focus", - "--mod-checkbox-content-color-hover", - "--mod-checkbox-control-color-default", - "--mod-checkbox-control-color-disabled", - "--mod-checkbox-control-color-down", - "--mod-checkbox-control-color-focus", - "--mod-checkbox-control-color-hover", - "--mod-checkbox-control-corner-radius", - "--mod-checkbox-control-invalid-color-down", - "--mod-checkbox-control-selected-color-default", - "--mod-checkbox-control-selected-color-down", - "--mod-checkbox-control-selected-color-focus", - "--mod-checkbox-control-selected-color-hover", - "--mod-checkbox-control-size", - "--mod-checkbox-emphasized-color-default", - "--mod-checkbox-emphasized-color-down", - "--mod-checkbox-emphasized-color-focus", - "--mod-checkbox-emphasized-color-hover", - "--mod-checkbox-focus-indicator-color", - "--mod-checkbox-focus-indicator-gap", - "--mod-checkbox-focus-indicator-thinkness", - "--mod-checkbox-font-size", - "--mod-checkbox-height", - "--mod-checkbox-invalid-color-default", - "--mod-checkbox-invalid-color-focus", - "--mod-checkbox-invalid-color-hover", - "--mod-checkbox-line-height", - "--mod-checkbox-line-height-cjk", - "--mod-checkbox-selected-border-width", - "--mod-checkbox-spacing", - "--mod-checkbox-text-to-control", - "--mod-checkbox-top-to-text", - "--mod-focus-indicator-thickness" - ], - "component": [ - "--spectrum-checkbox-animation-duration", - "--spectrum-checkbox-border-width", - "--spectrum-checkbox-checkmark-color", - "--spectrum-checkbox-content-color-default", - "--spectrum-checkbox-content-color-disabled", - "--spectrum-checkbox-content-color-down", - "--spectrum-checkbox-content-color-focus", - "--spectrum-checkbox-content-color-hover", - "--spectrum-checkbox-control-color-default", - "--spectrum-checkbox-control-color-disabled", - "--spectrum-checkbox-control-color-down", - "--spectrum-checkbox-control-color-focus", - "--spectrum-checkbox-control-color-hover", - "--spectrum-checkbox-control-corner-radius", - "--spectrum-checkbox-control-selected-color-default", - "--spectrum-checkbox-control-selected-color-down", - "--spectrum-checkbox-control-selected-color-focus", - "--spectrum-checkbox-control-selected-color-hover", - "--spectrum-checkbox-control-size", - "--spectrum-checkbox-control-size-extra-large", - "--spectrum-checkbox-control-size-large", - "--spectrum-checkbox-control-size-medium", - "--spectrum-checkbox-control-size-small", - "--spectrum-checkbox-emphasized-color-default", - "--spectrum-checkbox-emphasized-color-down", - "--spectrum-checkbox-emphasized-color-focus", - "--spectrum-checkbox-emphasized-color-hover", - "--spectrum-checkbox-focus-indicator-color", - "--spectrum-checkbox-focus-indicator-gap", - "--spectrum-checkbox-focus-indicator-thickness", - "--spectrum-checkbox-font-size", - "--spectrum-checkbox-height", - "--spectrum-checkbox-invalid-color-default", - "--spectrum-checkbox-invalid-color-down", - "--spectrum-checkbox-invalid-color-focus", - "--spectrum-checkbox-invalid-color-hover", - "--spectrum-checkbox-line-height", - "--spectrum-checkbox-line-height-cjk", - "--spectrum-checkbox-selected-border-width", - "--spectrum-checkbox-spacing", - "--spectrum-checkbox-text-to-control", - "--spectrum-checkbox-top-to-text" - ], - "global": [ - "--spectrum-accent-color-1000", - "--spectrum-accent-color-1100", - "--spectrum-accent-color-900", - "--spectrum-animation-duration-100", - "--spectrum-border-width-200", - "--spectrum-cjk-line-height-100", - "--spectrum-component-height-100", - "--spectrum-component-height-200", - "--spectrum-component-height-300", - "--spectrum-component-height-75", - "--spectrum-component-top-to-text-100", - "--spectrum-component-top-to-text-200", - "--spectrum-component-top-to-text-300", - "--spectrum-component-top-to-text-75", - "--spectrum-disabled-content-color", - "--spectrum-focus-indicator-color", - "--spectrum-focus-indicator-gap", - "--spectrum-focus-indicator-thickness", - "--spectrum-font-size-100", - "--spectrum-font-size-200", - "--spectrum-font-size-300", - "--spectrum-font-size-75", - "--spectrum-gray-50", - "--spectrum-gray-700", - "--spectrum-gray-800", - "--spectrum-line-height-100", - "--spectrum-negative-color-1000", - "--spectrum-negative-color-1100", - "--spectrum-negative-color-900", - "--spectrum-neutral-background-color-selected-default", - "--spectrum-neutral-background-color-selected-down", - "--spectrum-neutral-background-color-selected-hover", - "--spectrum-neutral-background-color-selected-key-focus", - "--spectrum-neutral-content-color-default", - "--spectrum-neutral-content-color-down", - "--spectrum-neutral-content-color-hover", - "--spectrum-neutral-content-color-key-focus", - "--spectrum-text-to-control-100", - "--spectrum-text-to-control-200", - "--spectrum-text-to-control-300", - "--spectrum-text-to-control-75" - ], - "system-theme": [ - "--system-checkbox-checkmark-color", - "--system-checkbox-control-color-default", - "--system-checkbox-control-color-down", - "--system-checkbox-control-color-focus", - "--system-checkbox-control-color-hover", - "--system-checkbox-control-corner-radius" + ".spectrum-Checkbox.is-readOnly .spectrum-Checkbox-input:disabled ~ .spectrum-Checkbox-label" ], - "passthroughs": [], - "high-contrast": [ - "--highcontrast-checkbox-background-color-default", - "--highcontrast-checkbox-color-default", - "--highcontrast-checkbox-color-focus", - "--highcontrast-checkbox-color-hover", - "--highcontrast-checkbox-content-color-default", - "--highcontrast-checkbox-content-color-down", - "--highcontrast-checkbox-content-color-focus", - "--highcontrast-checkbox-content-color-hover", - "--highcontrast-checkbox-disabled-color-default", - "--highcontrast-checkbox-focus-indicator-color", - "--highcontrast-checkbox-highlight-color-default", - "--highcontrast-checkbox-highlight-color-down", - "--highcontrast-checkbox-highlight-color-focus", - "--highcontrast-checkbox-highlight-color-hover" - ] + "modifiers": { + "mod-checkbox-content-color-default": { + "value": "var(--spectrum-checkbox-content-color-default)", + "description": "Used by `.spectrum-Checkbox`, `.spectrum-Checkbox.is-readOnly .spectrum-Checkbox-input:checked:disabled ~ .spectrum-Checkbox-label, .spectrum-Checkbox.is-readOnly .spectrum-Checkbox-input:disabled ~ .spectrum-Checkbox-label`.
Defaults to `var(--spectrum-checkbox-content-color-default)`, if not set.", + "control": "color", + "category": "Modifier" + }, + "mod-checkbox-height": { + "value": "var(--spectrum-checkbox-height)", + "description": "Used by `.spectrum-Checkbox`, `--spectrum-checkbox-spacing`.
Defaults to `var(--spectrum-checkbox-height)`, if not set.", + "control": "text", + "category": "Modifier" + }, + "mod-checkbox-control-color-down": { + "value": "var(--spectrum-checkbox-control-color-down)", + "description": "Used by `.spectrum-Checkbox:active .spectrum-Checkbox-box:before`.
Defaults to `var(--spectrum-checkbox-control-color-down)`, if not set.", + "control": "color", + "category": "Modifier" + }, + "mod-checkbox-control-selected-color-down": { + "value": "var(--spectrum-checkbox-control-selected-color-down)", + "description": "Used by `.spectrum-Checkbox:active .spectrum-Checkbox-input:checked + .spectrum-Checkbox-box:before`.
Defaults to `var(--spectrum-checkbox-control-selected-color-down)`, if not set.", + "control": "color", + "category": "Modifier" + }, + "mod-checkbox-content-color-down": { + "value": "var(--spectrum-checkbox-content-color-down)", + "description": "Used by `.spectrum-Checkbox:active .spectrum-Checkbox-label`.
Defaults to `var(--spectrum-checkbox-content-color-down)`, if not set.", + "control": "color", + "category": "Modifier" + }, + "mod-checkbox-invalid-color-default": { + "value": "var(--spectrum-checkbox-invalid-color-default)", + "description": "Used by `.spectrum-Checkbox.is-invalid .spectrum-Checkbox-box:before, .spectrum-Checkbox.is-invalid .spectrum-Checkbox-input:checked + .spectrum-Checkbox-box:before`, `.spectrum-Checkbox.is-invalid.is-indeterminate .spectrum-Checkbox-box:before, .spectrum-Checkbox.is-invalid.is-indeterminate .spectrum-Checkbox-input:checked + .spectrum-Checkbox-box:before`.
Defaults to `var(--spectrum-checkbox-invalid-color-default)`, if not set.", + "control": "color", + "category": "Modifier" + }, + "mod-checkbox-invalid-color-hover": { + "value": "var(--spectrum-checkbox-invalid-color-hover)", + "description": "Used by `.spectrum-Checkbox.is-invalid .spectrum-Checkbox-input:focus-visible + .spectrum-Checkbox-box:before, .spectrum-Checkbox.is-invalid.is-indeterminate .spectrum-Checkbox-input:focus-visible + .spectrum-Checkbox-box:before`, `.spectrum-Checkbox.is-invalid:hover .spectrum-Checkbox-box:before, .spectrum-Checkbox.is-invalid:hover .spectrum-Checkbox-input:checked + .spectrum-Checkbox-box:before`, `.spectrum-Checkbox.is-invalid.is-indeterminate:hover .spectrum-Checkbox-box:before, .spectrum-Checkbox.is-invalid.is-indeterminate:hover .spectrum-Checkbox-input:checked + .spectrum-Checkbox-box:before`, `.spectrum-Checkbox--emphasized.is-invalid.is-indeterminate:hover .spectrum-Checkbox-box:before, .spectrum-Checkbox--emphasized.is-invalid.is-indeterminate:hover .spectrum-Checkbox-input:checked + .spectrum-Checkbox-box:before, .spectrum-Checkbox--emphasized.is-invalid:hover .spectrum-Checkbox-input:checked + .spectrum-Checkbox-box:before`.
Defaults to `var(--spectrum-checkbox-invalid-color-hover)`, if not set.", + "control": "color", + "category": "Modifier" + }, + "mod-checkbox-control-selected-color-default": { + "value": "var(--spectrum-checkbox-control-selected-color-default)", + "description": "Used by `.spectrum-Checkbox.is-readOnly .spectrum-Checkbox-input:checked:disabled + .spectrum-Checkbox-box:before, .spectrum-Checkbox.is-readOnly .spectrum-Checkbox-input:disabled + .spectrum-Checkbox-box:before`, `.spectrum-Checkbox.is-indeterminate .spectrum-Checkbox-box:before, .spectrum-Checkbox.is-indeterminate .spectrum-Checkbox-input:checked + .spectrum-Checkbox-box:before`, `.spectrum-Checkbox-input:checked + .spectrum-Checkbox-box:before`.
Defaults to `var(--spectrum-checkbox-control-selected-color-default)`, if not set.", + "control": "color", + "category": "Modifier" + }, + "mod-checkbox-checkmark-color": { + "value": "var(--spectrum-checkbox-checkmark-color)", + "description": "Used by `.spectrum-Checkbox.is-readOnly .spectrum-Checkbox-input:checked:disabled + .spectrum-Checkbox-box:before, .spectrum-Checkbox.is-readOnly .spectrum-Checkbox-input:disabled + .spectrum-Checkbox-box:before`, `.spectrum-Checkbox-input:checked + .spectrum-Checkbox-box:before`, `.spectrum-Checkbox .spectrum-Checkbox-checkmark, .spectrum-Checkbox .spectrum-Checkbox-partialCheckmark`, `.spectrum-Checkbox .spectrum-Checkbox-input:checked:disabled + .spectrum-Checkbox-box:before, .spectrum-Checkbox .spectrum-Checkbox-input:disabled + .spectrum-Checkbox-box:before`.
Defaults to `var(--spectrum-checkbox-checkmark-color)`, if not set.", + "control": "color", + "category": "Modifier" + }, + "mod-checkbox-selected-border-width": { + "value": "var(--spectrum-checkbox-selected-border-width)", + "description": "Used by `.spectrum-Checkbox.is-indeterminate .spectrum-Checkbox-box:before, .spectrum-Checkbox.is-indeterminate .spectrum-Checkbox-input:checked + .spectrum-Checkbox-box:before`, `.spectrum-Checkbox.is-invalid.is-indeterminate .spectrum-Checkbox-box:before, .spectrum-Checkbox.is-invalid.is-indeterminate .spectrum-Checkbox-input:checked + .spectrum-Checkbox-box:before`, `.spectrum-Checkbox-input:checked + .spectrum-Checkbox-box:before`.
Defaults to `var(--spectrum-checkbox-selected-border-width)`, if not set.", + "control": "text", + "category": "Modifier" + }, + "mod-checkbox-control-selected-color-focus": { + "value": "var(--spectrum-checkbox-control-selected-color-focus)", + "description": "Used by `.spectrum-Checkbox.is-indeterminate .spectrum-Checkbox-input:focus-visible + .spectrum-Checkbox-box:before`, `.spectrum-Checkbox-input:focus-visible:checked + .spectrum-Checkbox-box:before`.
Defaults to `var(--spectrum-checkbox-control-selected-color-focus)`, if not set.", + "control": "color", + "category": "Modifier" + }, + "mod-checkbox-emphasized-color-default": { + "value": "var(--spectrum-checkbox-emphasized-color-default)", + "description": "Used by `.spectrum-Checkbox--emphasized .spectrum-Checkbox-input:checked + .spectrum-Checkbox-box:before, .spectrum-Checkbox--emphasized.is-indeterminate .spectrum-Checkbox-box:before, .spectrum-Checkbox--emphasized.is-indeterminate .spectrum-Checkbox-input:checked + .spectrum-Checkbox-box:before`.
Defaults to `var(--spectrum-checkbox-emphasized-color-default)`, if not set.", + "control": "color", + "category": "Modifier" + }, + "mod-checkbox-emphasized-color-focus": { + "value": "var(--spectrum-checkbox-emphasized-color-focus)", + "description": "Used by `.spectrum-Checkbox--emphasized .spectrum-Checkbox-input:focus-visible:checked + .spectrum-Checkbox-box:before, .spectrum-Checkbox--emphasized.is-indeterminate .spectrum-Checkbox-input:focus-visible + .spectrum-Checkbox-box:before`.
Defaults to `var(--spectrum-checkbox-emphasized-color-focus)`, if not set.", + "control": "color", + "category": "Modifier" + }, + "mod-checkbox-invalid-color-focus": { + "value": "var(--spectrum-checkbox-invalid-color-focus)", + "description": "Used by `.spectrum-Checkbox--emphasized.is-invalid .spectrum-Checkbox-input:focus-visible:checked + .spectrum-Checkbox-box:before`.
Defaults to `var(--spectrum-checkbox-invalid-color-focus)`, if not set.", + "control": "color", + "category": "Modifier" + }, + "mod-checkbox-control-color-hover": { + "value": "var(--spectrum-checkbox-control-color-hover)", + "description": "Used by `.spectrum-Checkbox:hover .spectrum-Checkbox-box:before`.
Defaults to `var(--spectrum-checkbox-control-color-hover)`, if not set.", + "control": "color", + "category": "Modifier" + }, + "mod-checkbox-control-selected-color-hover": { + "value": "var(--spectrum-checkbox-control-selected-color-hover)", + "description": "Used by `.spectrum-Checkbox:hover .spectrum-Checkbox-input:checked + .spectrum-Checkbox-box:before`, `.spectrum-Checkbox.is-indeterminate:hover .spectrum-Checkbox-box:before, .spectrum-Checkbox.is-indeterminate:hover .spectrum-Checkbox-input:checked + .spectrum-Checkbox-box:before`.
Defaults to `var(--spectrum-checkbox-control-selected-color-hover)`, if not set.", + "control": "color", + "category": "Modifier" + }, + "mod-checkbox-content-color-hover": { + "value": "var(--spectrum-checkbox-content-color-hover)", + "description": "Used by `.spectrum-Checkbox:hover .spectrum-Checkbox-label`, `.spectrum-Checkbox.is-invalid.is-indeterminate:hover .spectrum-Checkbox-label`.
Defaults to `var(--spectrum-checkbox-content-color-hover)`, if not set.", + "control": "color", + "category": "Modifier" + }, + "mod-checkbox-emphasized-color-hover": { + "value": "var(--spectrum-checkbox-emphasized-color-hover)", + "description": "Used by `.spectrum-Checkbox--emphasized.is-indeterminate:hover .spectrum-Checkbox-box:before, .spectrum-Checkbox--emphasized.is-indeterminate:hover .spectrum-Checkbox-input:checked + .spectrum-Checkbox-box:before, .spectrum-Checkbox--emphasized:hover .spectrum-Checkbox-input:checked + .spectrum-Checkbox-box:before`.
Defaults to `var(--spectrum-checkbox-emphasized-color-hover)`, if not set.", + "control": "color", + "category": "Modifier" + }, + "mod-checkbox-emphasized-color-down": { + "value": "var(--spectrum-checkbox-emphasized-color-down)", + "description": "Used by `.spectrum-Checkbox--emphasized.is-indeterminate:active .spectrum-Checkbox-box:before, .spectrum-Checkbox--emphasized.is-indeterminate:active .spectrum-Checkbox-input:checked + .spectrum-Checkbox-box:before, .spectrum-Checkbox--emphasized:active .spectrum-Checkbox-input:checked + .spectrum-Checkbox-box:before`.
Defaults to `var(--spectrum-checkbox-emphasized-color-down)`, if not set.", + "control": "color", + "category": "Modifier" + }, + "mod-checkbox-control-invalid-color-down": { + "value": "var(--spectrum-checkbox-invalid-color-down)", + "description": "Used by `.spectrum-Checkbox--emphasized.is-invalid:active .spectrum-Checkbox-box:before, .spectrum-Checkbox--emphasized.is-invalid:active .spectrum-Checkbox-input:checked + .spectrum-Checkbox-box:before`.
Defaults to `var(--spectrum-checkbox-invalid-color-down)`, if not set.", + "control": "color", + "category": "Modifier" + }, + "mod-checkbox-control-color-focus": { + "value": "var(--spectrum-checkbox-control-color-focus)", + "description": "Used by `.spectrum-Checkbox--emphasized:focus-visible .spectrum-Checkbox-box:before, .spectrum-Checkbox--emphasized:focus-visible .spectrum-Checkbox-input:checked + .spectrum-Checkbox-box:before`, `.spectrum-Checkbox-input:focus-visible + .spectrum-Checkbox-box:before`.
Defaults to `var(--spectrum-checkbox-control-color-focus)`, if not set.", + "control": "color", + "category": "Modifier" + }, + "mod-checkbox-text-to-control": { + "value": "var(--spectrum-checkbox-text-to-control)", + "description": "Used by `.spectrum-Checkbox-label`.
Defaults to `var(--spectrum-checkbox-text-to-control)`, if not set.", + "control": "text", + "category": "Modifier" + }, + "mod-checkbox-top-to-text": { + "value": "var(--spectrum-checkbox-top-to-text)", + "description": "Used by `.spectrum-Checkbox-label`.
Defaults to `var(--spectrum-checkbox-top-to-text)`, if not set.", + "control": "text", + "category": "Modifier" + }, + "mod-checkbox-font-size": { + "value": "var(--spectrum-checkbox-font-size)", + "description": "Used by `.spectrum-Checkbox-label`.
Defaults to `var(--spectrum-checkbox-font-size)`, if not set.", + "control": "text", + "category": "Modifier" + }, + "mod-checkbox-animation-duration": { + "value": "var(--spectrum-checkbox-animation-duration)", + "description": "Used by `.spectrum-Checkbox-label`, `.spectrum-Checkbox-box:before`, `.spectrum-Checkbox-box:after`, `.spectrum-Checkbox .spectrum-Checkbox-checkmark, .spectrum-Checkbox .spectrum-Checkbox-partialCheckmark`.
Defaults to `var(--spectrum-checkbox-animation-duration)`, if not set.", + "control": "text", + "category": "Modifier" + }, + "mod-checkbox-line-height": { + "value": "var(--spectrum-checkbox-line-height)", + "description": "Used by `.spectrum-Checkbox-label`.
Defaults to `var(--spectrum-checkbox-line-height)`, if not set.", + "control": "text", + "category": "Modifier" + }, + "mod-checkbox-line-height-cjk": { + "value": "var(--spectrum-checkbox-line-height-cjk)", + "description": "Used by `.spectrum-Checkbox-label:lang(ja), .spectrum-Checkbox-label:lang(ko), .spectrum-Checkbox-label:lang(zh)`.
Defaults to `var(--spectrum-checkbox-line-height-cjk)`, if not set.", + "control": "text", + "category": "Modifier" + }, + "mod-checkbox-control-color-default": { + "value": "var(--spectrum-checkbox-control-color-default)", + "description": "Used by `.spectrum-Checkbox-input`, `.spectrum-Checkbox-box:before`.
Defaults to `var(--spectrum-checkbox-control-color-default)`, if not set.", + "control": "color", + "category": "Modifier" + }, + "mod-checkbox-focus-indicator-thinkness": { + "value": "var(--spectrum-checkbox-focus-indicator-thickness)", + "description": "Used by `.spectrum-Checkbox-input:focus-visible + .spectrum-Checkbox-box:after`.
Defaults to `var(--spectrum-checkbox-focus-indicator-thickness)`, if not set.", + "control": "text", + "category": "Modifier" + }, + "mod-checkbox-focus-indicator-color": { + "value": "var(--spectrum-checkbox-focus-indicator-color)", + "description": "Used by `.spectrum-Checkbox-input:focus-visible + .spectrum-Checkbox-box:after`, `.spectrum-Checkbox-input:focus-visible + .spectrum-Checkbox-box`.
Defaults to `var(--spectrum-checkbox-focus-indicator-color)`, if not set.", + "control": "color", + "category": "Modifier" + }, + "mod-checkbox-focus-indicator-gap": { + "value": "var(--spectrum-checkbox-focus-indicator-gap)", + "description": "Used by `.spectrum-Checkbox-input:focus-visible + .spectrum-Checkbox-box:after`, `.spectrum-Checkbox-box:after`, `.spectrum-Checkbox-input:focus-visible + .spectrum-Checkbox-box`.
Defaults to `var(--spectrum-checkbox-focus-indicator-gap)`, if not set.", + "control": "text", + "category": "Modifier" + }, + "mod-checkbox-content-color-focus": { + "value": "var(--spectrum-checkbox-content-color-focus)", + "description": "Used by `.spectrum-Checkbox-input:focus-visible + .spectrum-Checkbox-label`.
Defaults to `var(--spectrum-checkbox-content-color-focus)`, if not set.", + "control": "color", + "category": "Modifier" + }, + "mod-checkbox-control-size": { + "value": "var(--spectrum-checkbox-control-size)", + "description": "Used by `--spectrum-checkbox-spacing`, `.spectrum-Checkbox-box, .spectrum-Checkbox-box:before`.
Defaults to `var(--spectrum-checkbox-control-size)`, if not set.", + "control": "text", + "category": "Modifier" + }, + "mod-checkbox-spacing": { + "value": "var(--spectrum-checkbox-spacing)", + "description": "Used by `.spectrum-Checkbox-box`.
Defaults to `var(--spectrum-checkbox-spacing)`, if not set.", + "control": "text", + "category": "Modifier" + }, + "mod-checkbox-control-corner-radius": { + "value": "var(--spectrum-checkbox-control-corner-radius)", + "description": "Used by `.spectrum-Checkbox-box:before`, `.spectrum-Checkbox-box:after`.
Defaults to `var(--spectrum-checkbox-control-corner-radius)`, if not set.", + "control": "text", + "category": "Modifier" + }, + "mod-checkbox-border-width": { + "value": "var(--spectrum-checkbox-border-width)", + "description": "Used by `.spectrum-Checkbox-box:before`.
Defaults to `var(--spectrum-checkbox-border-width)`, if not set.", + "control": "text", + "category": "Modifier" + }, + "mod-checkbox-control-color-disabled": { + "value": "var(--spectrum-checkbox-control-color-disabled)", + "description": "Used by `.spectrum-Checkbox .spectrum-Checkbox-input:checked:disabled + .spectrum-Checkbox-box:before, .spectrum-Checkbox .spectrum-Checkbox-input:disabled + .spectrum-Checkbox-box:before`.
Defaults to `var(--spectrum-checkbox-control-color-disabled)`, if not set.", + "control": "color", + "category": "Modifier" + }, + "mod-checkbox-content-color-disabled": { + "value": "var(--spectrum-checkbox-content-color-disabled)", + "description": "Used by `.spectrum-Checkbox .spectrum-Checkbox-input:checked:disabled ~ .spectrum-Checkbox-label, .spectrum-Checkbox .spectrum-Checkbox-input:disabled ~ .spectrum-Checkbox-label`.
Defaults to `var(--spectrum-checkbox-content-color-disabled)`, if not set.", + "control": "color", + "category": "Modifier" + }, + "mod-focus-indicator-thickness": { + "value": "2px", + "description": "Used by `.spectrum-Checkbox-input:focus-visible + .spectrum-Checkbox-box`.
Defaults to `var(--spectrum-focus-indicator-thickness)`, if not set.", + "control": "text", + "category": "Modifier" + } + }, + "component": { + "spectrum-checkbox-content-color-default": { + "description": "Defined in `.spectrum-Checkbox`.
Used by `.spectrum-Checkbox`, `.spectrum-Checkbox.is-readOnly .spectrum-Checkbox-input:checked:disabled ~ .spectrum-Checkbox-label, .spectrum-Checkbox.is-readOnly .spectrum-Checkbox-input:disabled ~ .spectrum-Checkbox-label`.", + "control": "color", + "category": "Component" + }, + "spectrum-checkbox-content-color-hover": { + "description": "Defined in `.spectrum-Checkbox`.
Used by `.spectrum-Checkbox:hover .spectrum-Checkbox-label`, `.spectrum-Checkbox.is-invalid.is-indeterminate:hover .spectrum-Checkbox-label`.", + "control": "color", + "category": "Component" + }, + "spectrum-checkbox-content-color-down": { + "description": "Defined in `.spectrum-Checkbox`.
Used by `.spectrum-Checkbox:active .spectrum-Checkbox-label`.", + "control": "color", + "category": "Component" + }, + "spectrum-checkbox-content-color-focus": { + "description": "Defined in `.spectrum-Checkbox`.
Used by `.spectrum-Checkbox-input:focus-visible + .spectrum-Checkbox-label`.", + "control": "color", + "category": "Component" + }, + "spectrum-checkbox-focus-indicator-color": { + "description": "Defined in `.spectrum-Checkbox`.
Used by `.spectrum-Checkbox-input:focus-visible + .spectrum-Checkbox-box:after`, `.spectrum-Checkbox-input:focus-visible + .spectrum-Checkbox-box`.", + "control": "color", + "category": "Component" + }, + "spectrum-checkbox-content-color-disabled": { + "description": "Defined in `.spectrum-Checkbox`.
Used by `.spectrum-Checkbox .spectrum-Checkbox-input:checked:disabled ~ .spectrum-Checkbox-label, .spectrum-Checkbox .spectrum-Checkbox-input:disabled ~ .spectrum-Checkbox-label`.", + "control": "color", + "category": "Component" + }, + "spectrum-checkbox-control-color-disabled": { + "description": "Defined in `.spectrum-Checkbox`.
Used by `.spectrum-Checkbox .spectrum-Checkbox-input:checked:disabled + .spectrum-Checkbox-box:before, .spectrum-Checkbox .spectrum-Checkbox-input:disabled + .spectrum-Checkbox-box:before`.", + "control": "color", + "category": "Component" + }, + "spectrum-checkbox-invalid-color-default": { + "description": "Defined in `.spectrum-Checkbox`.
Used by `.spectrum-Checkbox.is-invalid .spectrum-Checkbox-box:before, .spectrum-Checkbox.is-invalid .spectrum-Checkbox-input:checked + .spectrum-Checkbox-box:before`, `.spectrum-Checkbox.is-invalid.is-indeterminate .spectrum-Checkbox-box:before, .spectrum-Checkbox.is-invalid.is-indeterminate .spectrum-Checkbox-input:checked + .spectrum-Checkbox-box:before`.", + "control": "color", + "category": "Component" + }, + "spectrum-checkbox-invalid-color-hover": { + "description": "Defined in `.spectrum-Checkbox`.
Used by `.spectrum-Checkbox.is-invalid .spectrum-Checkbox-input:focus-visible + .spectrum-Checkbox-box:before, .spectrum-Checkbox.is-invalid.is-indeterminate .spectrum-Checkbox-input:focus-visible + .spectrum-Checkbox-box:before`, `.spectrum-Checkbox.is-invalid:hover .spectrum-Checkbox-box:before, .spectrum-Checkbox.is-invalid:hover .spectrum-Checkbox-input:checked + .spectrum-Checkbox-box:before`, `.spectrum-Checkbox.is-invalid.is-indeterminate:hover .spectrum-Checkbox-box:before, .spectrum-Checkbox.is-invalid.is-indeterminate:hover .spectrum-Checkbox-input:checked + .spectrum-Checkbox-box:before`, `.spectrum-Checkbox--emphasized.is-invalid.is-indeterminate:hover .spectrum-Checkbox-box:before, .spectrum-Checkbox--emphasized.is-invalid.is-indeterminate:hover .spectrum-Checkbox-input:checked + .spectrum-Checkbox-box:before, .spectrum-Checkbox--emphasized.is-invalid:hover .spectrum-Checkbox-input:checked + .spectrum-Checkbox-box:before`.", + "control": "color", + "category": "Component" + }, + "spectrum-checkbox-invalid-color-down": { + "description": "Defined in `.spectrum-Checkbox`.
Used by `.spectrum-Checkbox--emphasized.is-invalid:active .spectrum-Checkbox-box:before, .spectrum-Checkbox--emphasized.is-invalid:active .spectrum-Checkbox-input:checked + .spectrum-Checkbox-box:before`.", + "control": "color", + "category": "Component" + }, + "spectrum-checkbox-invalid-color-focus": { + "description": "Defined in `.spectrum-Checkbox`.
Used by `.spectrum-Checkbox--emphasized.is-invalid .spectrum-Checkbox-input:focus-visible:checked + .spectrum-Checkbox-box:before`.", + "control": "color", + "category": "Component" + }, + "spectrum-checkbox-emphasized-color-default": { + "description": "Defined in `.spectrum-Checkbox`.
Used by `.spectrum-Checkbox--emphasized .spectrum-Checkbox-input:checked + .spectrum-Checkbox-box:before, .spectrum-Checkbox--emphasized.is-indeterminate .spectrum-Checkbox-box:before, .spectrum-Checkbox--emphasized.is-indeterminate .spectrum-Checkbox-input:checked + .spectrum-Checkbox-box:before`.", + "control": "color", + "category": "Component" + }, + "spectrum-checkbox-emphasized-color-hover": { + "description": "Defined in `.spectrum-Checkbox`.
Used by `.spectrum-Checkbox--emphasized.is-indeterminate:hover .spectrum-Checkbox-box:before, .spectrum-Checkbox--emphasized.is-indeterminate:hover .spectrum-Checkbox-input:checked + .spectrum-Checkbox-box:before, .spectrum-Checkbox--emphasized:hover .spectrum-Checkbox-input:checked + .spectrum-Checkbox-box:before`.", + "control": "color", + "category": "Component" + }, + "spectrum-checkbox-emphasized-color-down": { + "description": "Defined in `.spectrum-Checkbox`.
Used by `.spectrum-Checkbox--emphasized.is-indeterminate:active .spectrum-Checkbox-box:before, .spectrum-Checkbox--emphasized.is-indeterminate:active .spectrum-Checkbox-input:checked + .spectrum-Checkbox-box:before, .spectrum-Checkbox--emphasized:active .spectrum-Checkbox-input:checked + .spectrum-Checkbox-box:before`.", + "control": "color", + "category": "Component" + }, + "spectrum-checkbox-emphasized-color-focus": { + "description": "Defined in `.spectrum-Checkbox`.
Used by `.spectrum-Checkbox--emphasized .spectrum-Checkbox-input:focus-visible:checked + .spectrum-Checkbox-box:before, .spectrum-Checkbox--emphasized.is-indeterminate .spectrum-Checkbox-input:focus-visible + .spectrum-Checkbox-box:before`.", + "control": "color", + "category": "Component" + }, + "spectrum-checkbox-control-selected-color-default": { + "description": "Defined in `.spectrum-Checkbox`.
Used by `.spectrum-Checkbox.is-readOnly .spectrum-Checkbox-input:checked:disabled + .spectrum-Checkbox-box:before, .spectrum-Checkbox.is-readOnly .spectrum-Checkbox-input:disabled + .spectrum-Checkbox-box:before`, `.spectrum-Checkbox.is-indeterminate .spectrum-Checkbox-box:before, .spectrum-Checkbox.is-indeterminate .spectrum-Checkbox-input:checked + .spectrum-Checkbox-box:before`, `.spectrum-Checkbox-input:checked + .spectrum-Checkbox-box:before`.", + "control": "color", + "category": "Component" + }, + "spectrum-checkbox-control-selected-color-hover": { + "description": "Defined in `.spectrum-Checkbox`.
Used by `.spectrum-Checkbox:hover .spectrum-Checkbox-input:checked + .spectrum-Checkbox-box:before`, `.spectrum-Checkbox.is-indeterminate:hover .spectrum-Checkbox-box:before, .spectrum-Checkbox.is-indeterminate:hover .spectrum-Checkbox-input:checked + .spectrum-Checkbox-box:before`.", + "control": "color", + "category": "Component" + }, + "spectrum-checkbox-control-selected-color-down": { + "description": "Defined in `.spectrum-Checkbox`.
Used by `.spectrum-Checkbox:active .spectrum-Checkbox-input:checked + .spectrum-Checkbox-box:before`.", + "control": "color", + "category": "Component" + }, + "spectrum-checkbox-control-selected-color-focus": { + "description": "Defined in `.spectrum-Checkbox`.
Used by `.spectrum-Checkbox.is-indeterminate .spectrum-Checkbox-input:focus-visible + .spectrum-Checkbox-box:before`, `.spectrum-Checkbox-input:focus-visible:checked + .spectrum-Checkbox-box:before`.", + "control": "color", + "category": "Component" + }, + "spectrum-checkbox-line-height": { + "description": "Defined in `.spectrum-Checkbox`.
Used by `.spectrum-Checkbox-label`.", + "control": "text", + "category": "Component" + }, + "spectrum-checkbox-line-height-cjk": { + "description": "Defined in `.spectrum-Checkbox`.
Used by `.spectrum-Checkbox-label:lang(ja), .spectrum-Checkbox-label:lang(ko), .spectrum-Checkbox-label:lang(zh)`.", + "control": "text", + "category": "Component" + }, + "spectrum-checkbox-focus-indicator-gap": { + "description": "Defined in `.spectrum-Checkbox`.
Used by `.spectrum-Checkbox-input:focus-visible + .spectrum-Checkbox-box:after`, `.spectrum-Checkbox-box:after`, `.spectrum-Checkbox-input:focus-visible + .spectrum-Checkbox-box`.", + "control": "text", + "category": "Component" + }, + "spectrum-checkbox-focus-indicator-thickness": { + "description": "Defined in `.spectrum-Checkbox`.
Used by `.spectrum-Checkbox-input:focus-visible + .spectrum-Checkbox-box:after`.", + "control": "text", + "category": "Component" + }, + "spectrum-checkbox-border-width": { + "description": "Defined in `.spectrum-Checkbox`.
Used by `.spectrum-Checkbox-box:before`.", + "control": "text", + "category": "Component" + }, + "spectrum-checkbox-selected-border-width": { + "description": "Defined in `.spectrum-Checkbox`.
Used by `.spectrum-Checkbox.is-indeterminate .spectrum-Checkbox-box:before, .spectrum-Checkbox.is-indeterminate .spectrum-Checkbox-input:checked + .spectrum-Checkbox-box:before`, `.spectrum-Checkbox.is-invalid.is-indeterminate .spectrum-Checkbox-box:before, .spectrum-Checkbox.is-invalid.is-indeterminate .spectrum-Checkbox-input:checked + .spectrum-Checkbox-box:before`, `.spectrum-Checkbox-input:checked + .spectrum-Checkbox-box:before`.", + "control": "text", + "category": "Component" + }, + "spectrum-checkbox-control-size": { + "description": "Defined in `.spectrum-Checkbox, .spectrum-Checkbox--sizeM`, `.spectrum-Checkbox--sizeS`, `.spectrum-Checkbox--sizeL`, `.spectrum-Checkbox--sizeXL`.
Used by `--spectrum-checkbox-selected-border-width`, `--spectrum-checkbox-spacing`, `.spectrum-Checkbox-box, .spectrum-Checkbox-box:before`.", + "control": "text", + "category": "Component" + }, + "spectrum-checkbox-animation-duration": { + "description": "Defined in `.spectrum-Checkbox`.
Used by `.spectrum-Checkbox-label`, `.spectrum-Checkbox-box:before`, `.spectrum-Checkbox-box:after`, `.spectrum-Checkbox .spectrum-Checkbox-checkmark, .spectrum-Checkbox .spectrum-Checkbox-partialCheckmark`.", + "control": "text", + "category": "Component" + }, + "spectrum-checkbox-font-size": { + "description": "Defined in `.spectrum-Checkbox, .spectrum-Checkbox--sizeM`, `.spectrum-Checkbox--sizeS`, `.spectrum-Checkbox--sizeL`, `.spectrum-Checkbox--sizeXL`.
Used by `.spectrum-Checkbox-label`.", + "control": "text", + "category": "Component" + }, + "spectrum-checkbox-height": { + "description": "Defined in `.spectrum-Checkbox, .spectrum-Checkbox--sizeM`, `.spectrum-Checkbox--sizeS`, `.spectrum-Checkbox--sizeL`, `.spectrum-Checkbox--sizeXL`.
Used by `.spectrum-Checkbox`, `--spectrum-checkbox-spacing`.", + "control": "text", + "category": "Component" + }, + "spectrum-checkbox-control-size-medium": { + "value": "14px", + "description": "Used by `--spectrum-checkbox-control-size`.", + "control": "text", + "category": "Component" + }, + "spectrum-checkbox-top-to-text": { + "description": "Defined in `.spectrum-Checkbox, .spectrum-Checkbox--sizeM`, `.spectrum-Checkbox--sizeS`, `.spectrum-Checkbox--sizeL`, `.spectrum-Checkbox--sizeXL`.
Used by `.spectrum-Checkbox-label`.", + "control": "text", + "category": "Component" + }, + "spectrum-checkbox-text-to-control": { + "description": "Defined in `.spectrum-Checkbox, .spectrum-Checkbox--sizeM`, `.spectrum-Checkbox--sizeS`, `.spectrum-Checkbox--sizeL`, `.spectrum-Checkbox--sizeXL`.
Used by `.spectrum-Checkbox-label`.", + "control": "text", + "category": "Component" + }, + "spectrum-checkbox-control-size-small": { + "value": "12px", + "description": "Used by `--spectrum-checkbox-control-size`.", + "control": "text", + "category": "Component" + }, + "spectrum-checkbox-control-size-large": { + "value": "16px", + "description": "Used by `--spectrum-checkbox-control-size`.", + "control": "text", + "category": "Component" + }, + "spectrum-checkbox-control-size-extra-large": { + "value": "18px", + "description": "Used by `--spectrum-checkbox-control-size`.", + "control": "text", + "category": "Component" + }, + "spectrum-checkbox-control-color-down": { + "description": "Defined in `.spectrum-Checkbox`.
Used by `.spectrum-Checkbox:active .spectrum-Checkbox-box:before`.", + "control": "color", + "category": "Component" + }, + "spectrum-checkbox-checkmark-color": { + "description": "Defined in `.spectrum-Checkbox`.
Used by `.spectrum-Checkbox.is-readOnly .spectrum-Checkbox-input:checked:disabled + .spectrum-Checkbox-box:before, .spectrum-Checkbox.is-readOnly .spectrum-Checkbox-input:disabled + .spectrum-Checkbox-box:before`, `.spectrum-Checkbox-input:checked + .spectrum-Checkbox-box:before`, `.spectrum-Checkbox .spectrum-Checkbox-checkmark, .spectrum-Checkbox .spectrum-Checkbox-partialCheckmark`, `.spectrum-Checkbox .spectrum-Checkbox-input:checked:disabled + .spectrum-Checkbox-box:before, .spectrum-Checkbox .spectrum-Checkbox-input:disabled + .spectrum-Checkbox-box:before`.", + "control": "color", + "category": "Component" + }, + "spectrum-checkbox-control-color-hover": { + "description": "Defined in `.spectrum-Checkbox`.
Used by `.spectrum-Checkbox:hover .spectrum-Checkbox-box:before`.", + "control": "color", + "category": "Component" + }, + "spectrum-checkbox-control-color-focus": { + "description": "Defined in `.spectrum-Checkbox`.
Used by `.spectrum-Checkbox--emphasized:focus-visible .spectrum-Checkbox-box:before, .spectrum-Checkbox--emphasized:focus-visible .spectrum-Checkbox-input:checked + .spectrum-Checkbox-box:before`, `.spectrum-Checkbox-input:focus-visible + .spectrum-Checkbox-box:before`.", + "control": "color", + "category": "Component" + }, + "spectrum-checkbox-control-color-default": { + "description": "Defined in `.spectrum-Checkbox`.
Used by `.spectrum-Checkbox-input`, `.spectrum-Checkbox-box:before`.", + "control": "color", + "category": "Component" + }, + "spectrum-checkbox-spacing": { + "description": "Defined in `.spectrum-Checkbox-box`.
Used by `.spectrum-Checkbox-box`.", + "control": "text", + "category": "Component" + }, + "spectrum-checkbox-control-corner-radius": { + "description": "Defined in `.spectrum-Checkbox`.
Used by `.spectrum-Checkbox-box:before`, `.spectrum-Checkbox-box:after`.", + "control": "text", + "category": "Component" + } + }, + "global": { + "spectrum-neutral-content-color-default": { + "value": "var(--spectrum-gray-800)", + "description": "Used by `--system-checkbox-control-color-default`, `--spectrum-checkbox-content-color-default`.", + "control": "color", + "category": "Global" + }, + "spectrum-gray-700": { + "value": "light-dark(rgb(80, 80, 80), rgb(175, 175, 175))", + "description": "Used by `--system-checkbox-control-color-hover`, `--system-checkbox-control-color-focus`.", + "control": "text", + "category": "Global" + }, + "spectrum-gray-800": { + "value": "light-dark(rgb(41, 41, 41), rgb(219, 219, 219))", + "description": "Used by `--system-checkbox-control-color-down`.", + "control": "text", + "category": "Global" + }, + "spectrum-gray-50": { + "value": "light-dark(rgb(248, 248, 248), rgb(27, 27, 27))", + "description": "Used by `--system-checkbox-checkmark-color`.", + "control": "text", + "category": "Global" + }, + "spectrum-neutral-content-color-hover": { + "value": "var(--spectrum-gray-900)", + "description": "Used by `--spectrum-checkbox-content-color-hover`.", + "control": "color", + "category": "Global" + }, + "spectrum-neutral-content-color-down": { + "value": "var(--spectrum-gray-900)", + "description": "Used by `--spectrum-checkbox-content-color-down`.", + "control": "color", + "category": "Global" + }, + "spectrum-neutral-content-color-key-focus": { + "value": "var(--spectrum-gray-900)", + "description": "Used by `--spectrum-checkbox-content-color-focus`.", + "control": "color", + "category": "Global" + }, + "spectrum-focus-indicator-color": { + "value": "var(--spectrum-blue-800)", + "description": "Used by `--spectrum-checkbox-focus-indicator-color`.", + "control": "color", + "category": "Global" + }, + "spectrum-disabled-content-color": { + "value": "var(--spectrum-gray-400)", + "description": "Used by `--spectrum-checkbox-content-color-disabled`, `--spectrum-checkbox-control-color-disabled`.", + "control": "color", + "category": "Global" + }, + "spectrum-negative-color-900": { + "value": "var(--spectrum-red-900)", + "description": "Used by `--spectrum-checkbox-invalid-color-default`.", + "control": "color", + "category": "Global" + }, + "spectrum-negative-color-1000": { + "value": "var(--spectrum-red-1000)", + "description": "Used by `--spectrum-checkbox-invalid-color-hover`, `--spectrum-checkbox-invalid-color-focus`.", + "control": "color", + "category": "Global" + }, + "spectrum-negative-color-1100": { + "value": "var(--spectrum-red-1100)", + "description": "Used by `--spectrum-checkbox-invalid-color-down`.", + "control": "color", + "category": "Global" + }, + "spectrum-accent-color-900": { + "value": "var(--spectrum-blue-900)", + "description": "Used by `--spectrum-checkbox-emphasized-color-default`.", + "control": "color", + "category": "Global" + }, + "spectrum-accent-color-1000": { + "value": "var(--spectrum-blue-1000)", + "description": "Used by `--spectrum-checkbox-emphasized-color-hover`, `--spectrum-checkbox-emphasized-color-focus`.", + "control": "color", + "category": "Global" + }, + "spectrum-accent-color-1100": { + "value": "var(--spectrum-blue-1100)", + "description": "Used by `--spectrum-checkbox-emphasized-color-down`.", + "control": "color", + "category": "Global" + }, + "spectrum-neutral-background-color-selected-default": { + "value": "var(--spectrum-gray-800)", + "description": "Used by `--spectrum-checkbox-control-selected-color-default`.", + "control": "color", + "category": "Global" + }, + "spectrum-neutral-background-color-selected-hover": { + "value": "var(--spectrum-gray-900)", + "description": "Used by `--spectrum-checkbox-control-selected-color-hover`.", + "control": "color", + "category": "Global" + }, + "spectrum-neutral-background-color-selected-down": { + "value": "var(--spectrum-gray-900)", + "description": "Used by `--spectrum-checkbox-control-selected-color-down`.", + "control": "color", + "category": "Global" + }, + "spectrum-neutral-background-color-selected-key-focus": { + "value": "var(--spectrum-gray-900)", + "description": "Used by `--spectrum-checkbox-control-selected-color-focus`.", + "control": "color", + "category": "Global" + }, + "spectrum-line-height-100": { + "value": "1.3", + "description": "Used by `--spectrum-checkbox-line-height`.", + "control": "text", + "category": "Global" + }, + "spectrum-cjk-line-height-100": { + "value": "1.5", + "description": "Used by `--spectrum-checkbox-line-height-cjk`.", + "control": "text", + "category": "Global" + }, + "spectrum-focus-indicator-gap": { + "value": "2px", + "description": "Used by `--spectrum-checkbox-focus-indicator-gap`.", + "control": "text", + "category": "Global" + }, + "spectrum-focus-indicator-thickness": { + "value": "2px", + "description": "Used by `--spectrum-checkbox-focus-indicator-thickness`, `.spectrum-Checkbox-input:focus-visible + .spectrum-Checkbox-box`.", + "control": "text", + "category": "Global" + }, + "spectrum-border-width-200": { + "value": "2px", + "description": "Used by `--spectrum-checkbox-border-width`.", + "control": "text", + "category": "Global" + }, + "spectrum-animation-duration-100": { + "description": "Used by `--spectrum-checkbox-animation-duration`.", + "control": "text", + "category": "Global" + }, + "spectrum-font-size-100": { + "value": "14px", + "description": "Used by `--spectrum-checkbox-font-size`.", + "control": "text", + "category": "Global" + }, + "spectrum-component-height-100": { + "value": "32px", + "description": "Used by `--spectrum-checkbox-height`.", + "control": "text", + "category": "Global" + }, + "spectrum-component-top-to-text-100": { + "value": "6px", + "description": "Used by `--spectrum-checkbox-top-to-text`.", + "control": "text", + "category": "Global" + }, + "spectrum-text-to-control-100": { + "value": "10px", + "description": "Used by `--spectrum-checkbox-text-to-control`.", + "control": "text", + "category": "Global" + }, + "spectrum-font-size-75": { + "value": "12px", + "description": "Used by `--spectrum-checkbox-font-size`.", + "control": "text", + "category": "Global" + }, + "spectrum-component-height-75": { + "value": "24px", + "description": "Used by `--spectrum-checkbox-height`.", + "control": "text", + "category": "Global" + }, + "spectrum-component-top-to-text-75": { + "value": "4px", + "description": "Used by `--spectrum-checkbox-top-to-text`.", + "control": "text", + "category": "Global" + }, + "spectrum-text-to-control-75": { + "value": "9px", + "description": "Used by `--spectrum-checkbox-text-to-control`.", + "control": "text", + "category": "Global" + }, + "spectrum-font-size-200": { + "value": "16px", + "description": "Used by `--spectrum-checkbox-font-size`.", + "control": "text", + "category": "Global" + }, + "spectrum-component-height-200": { + "value": "40px", + "description": "Used by `--spectrum-checkbox-height`.", + "control": "text", + "category": "Global" + }, + "spectrum-component-top-to-text-200": { + "value": "9px", + "description": "Used by `--spectrum-checkbox-top-to-text`.", + "control": "text", + "category": "Global" + }, + "spectrum-text-to-control-200": { + "value": "11px", + "description": "Used by `--spectrum-checkbox-text-to-control`.", + "control": "text", + "category": "Global" + }, + "spectrum-font-size-300": { + "value": "18px", + "description": "Used by `--spectrum-checkbox-font-size`.", + "control": "text", + "category": "Global" + }, + "spectrum-component-height-300": { + "value": "48px", + "description": "Used by `--spectrum-checkbox-height`.", + "control": "text", + "category": "Global" + }, + "spectrum-component-top-to-text-300": { + "value": "12px", + "description": "Used by `--spectrum-checkbox-top-to-text`.", + "control": "text", + "category": "Global" + }, + "spectrum-text-to-control-300": { + "value": "13px", + "description": "Used by `--spectrum-checkbox-text-to-control`.", + "control": "text", + "category": "Global" + } + }, + "system-theme": { + "system-checkbox-control-color-default": { + "description": "Defined in `.spectrum`.
Used by `--spectrum-checkbox-control-color-default`.", + "control": "color" + }, + "system-checkbox-control-color-hover": { + "description": "Defined in `.spectrum`.
Used by `--spectrum-checkbox-control-color-hover`.", + "control": "color" + }, + "system-checkbox-control-color-down": { + "description": "Defined in `.spectrum`.
Used by `--spectrum-checkbox-control-color-down`.", + "control": "color" + }, + "system-checkbox-control-color-focus": { + "description": "Defined in `.spectrum`.
Used by `--spectrum-checkbox-control-color-focus`.", + "control": "color" + }, + "system-checkbox-checkmark-color": { + "description": "Defined in `.spectrum`.
Used by `--spectrum-checkbox-checkmark-color`.", + "control": "color" + }, + "system-checkbox-control-corner-radius": { + "description": "Defined in `.spectrum`.
Used by `--spectrum-checkbox-control-corner-radius`.", + "control": "text" + } + }, + "passthroughs": {}, + "high-contrast": { + "highcontrast-checkbox-content-color-default": { + "value": "var(--mod-checkbox-content-color-default, var(--spectrum-checkbox-content-color-default))", + "description": "Defined in `.spectrum-Checkbox`.
Used by `.spectrum-Checkbox`.
Defaults to `var(--mod-checkbox-content-color-default, var(--spectrum-checkbox-content-color-default))`, if not set.", + "control": "color" + }, + "highcontrast-checkbox-highlight-color-down": { + "value": "var(--mod-checkbox-control-selected-color-down, var(--spectrum-checkbox-control-selected-color-down))", + "description": "Defined in `.spectrum-Checkbox`.
Used by `.spectrum-Checkbox:active .spectrum-Checkbox-box:before`, `.spectrum-Checkbox:active .spectrum-Checkbox-input:checked + .spectrum-Checkbox-box:before`.
Defaults to `var(--mod-checkbox-control-selected-color-down, var(--spectrum-checkbox-control-selected-color-down))`, if not set.", + "control": "color" + }, + "highcontrast-checkbox-content-color-down": { + "value": "var(--mod-checkbox-content-color-down, var(--spectrum-checkbox-content-color-down))", + "description": "Defined in `.spectrum-Checkbox`.
Used by `.spectrum-Checkbox:active .spectrum-Checkbox-label`.
Defaults to `var(--mod-checkbox-content-color-down, var(--spectrum-checkbox-content-color-down))`, if not set.", + "control": "color" + }, + "highcontrast-checkbox-color-default": { + "value": "var(--mod-checkbox-control-color-default, var(--spectrum-checkbox-control-color-default))", + "description": "Defined in `.spectrum-Checkbox`.
Used by `.spectrum-Checkbox.is-invalid .spectrum-Checkbox-box:before, .spectrum-Checkbox.is-invalid .spectrum-Checkbox-input:checked + .spectrum-Checkbox-box:before`, `.spectrum-Checkbox.is-readOnly .spectrum-Checkbox-input:checked:disabled + .spectrum-Checkbox-box:before, .spectrum-Checkbox.is-readOnly .spectrum-Checkbox-input:disabled + .spectrum-Checkbox-box:before`, `.spectrum-Checkbox.is-readOnly .spectrum-Checkbox-input:checked:disabled ~ .spectrum-Checkbox-label, .spectrum-Checkbox.is-readOnly .spectrum-Checkbox-input:disabled ~ .spectrum-Checkbox-label`, `.spectrum-Checkbox.is-invalid.is-indeterminate .spectrum-Checkbox-box:before, .spectrum-Checkbox.is-invalid.is-indeterminate .spectrum-Checkbox-input:checked + .spectrum-Checkbox-box:before`, `.spectrum-Checkbox--emphasized.is-invalid .spectrum-Checkbox-input:focus-visible:checked + .spectrum-Checkbox-box:before`, `.spectrum-Checkbox.is-invalid.is-indeterminate:hover .spectrum-Checkbox-box:before, .spectrum-Checkbox.is-invalid.is-indeterminate:hover .spectrum-Checkbox-input:checked + .spectrum-Checkbox-box:before`, `.spectrum-Checkbox-box:before`.
Defaults to `var(--mod-checkbox-control-color-default, var(--spectrum-checkbox-control-color-default))`, if not set.", + "control": "color" + }, + "highcontrast-checkbox-color-hover": { + "value": "var(--mod-checkbox-invalid-color-hover, var(--spectrum-checkbox-invalid-color-hover))", + "description": "Defined in `.spectrum-Checkbox`.
Used by `.spectrum-Checkbox.is-invalid .spectrum-Checkbox-input:focus-visible + .spectrum-Checkbox-box:before, .spectrum-Checkbox.is-invalid.is-indeterminate .spectrum-Checkbox-input:focus-visible + .spectrum-Checkbox-box:before`, `.spectrum-Checkbox.is-invalid:hover .spectrum-Checkbox-box:before, .spectrum-Checkbox.is-invalid:hover .spectrum-Checkbox-input:checked + .spectrum-Checkbox-box:before`, `.spectrum-Checkbox--emphasized.is-indeterminate:hover .spectrum-Checkbox-box:before, .spectrum-Checkbox--emphasized.is-indeterminate:hover .spectrum-Checkbox-input:checked + .spectrum-Checkbox-box:before, .spectrum-Checkbox--emphasized:hover .spectrum-Checkbox-input:checked + .spectrum-Checkbox-box:before`, `.spectrum-Checkbox--emphasized.is-invalid.is-indeterminate:hover .spectrum-Checkbox-box:before, .spectrum-Checkbox--emphasized.is-invalid.is-indeterminate:hover .spectrum-Checkbox-input:checked + .spectrum-Checkbox-box:before, .spectrum-Checkbox--emphasized.is-invalid:hover .spectrum-Checkbox-input:checked + .spectrum-Checkbox-box:before`.
Defaults to `var(--mod-checkbox-invalid-color-hover, var(--spectrum-checkbox-invalid-color-hover))`, if not set.", + "control": "color" + }, + "highcontrast-checkbox-background-color-default": { + "value": "var(--mod-checkbox-checkmark-color, var(--spectrum-checkbox-checkmark-color))", + "description": "Defined in `.spectrum-Checkbox`.
Used by `.spectrum-Checkbox.is-readOnly .spectrum-Checkbox-input:checked:disabled + .spectrum-Checkbox-box:before, .spectrum-Checkbox.is-readOnly .spectrum-Checkbox-input:disabled + .spectrum-Checkbox-box:before`, `.spectrum-Checkbox .spectrum-Checkbox-checkmark, .spectrum-Checkbox .spectrum-Checkbox-partialCheckmark`, `.spectrum-Checkbox .spectrum-Checkbox-input:checked:disabled + .spectrum-Checkbox-box:before, .spectrum-Checkbox .spectrum-Checkbox-input:disabled + .spectrum-Checkbox-box:before`.
Defaults to `var(--mod-checkbox-checkmark-color, var(--spectrum-checkbox-checkmark-color))`, if not set.", + "control": "color" + }, + "highcontrast-checkbox-highlight-color-default": { + "value": "var(--mod-checkbox-control-selected-color-default, var(--spectrum-checkbox-control-selected-color-default))", + "description": "Defined in `.spectrum-Checkbox`.
Used by `.spectrum-Checkbox.is-indeterminate .spectrum-Checkbox-box:before, .spectrum-Checkbox.is-indeterminate .spectrum-Checkbox-input:checked + .spectrum-Checkbox-box:before`, `.spectrum-Checkbox--emphasized .spectrum-Checkbox-input:checked + .spectrum-Checkbox-box:before, .spectrum-Checkbox--emphasized.is-indeterminate .spectrum-Checkbox-box:before, .spectrum-Checkbox--emphasized.is-indeterminate .spectrum-Checkbox-input:checked + .spectrum-Checkbox-box:before`, `.spectrum-Checkbox--emphasized.is-indeterminate:active .spectrum-Checkbox-box:before, .spectrum-Checkbox--emphasized.is-indeterminate:active .spectrum-Checkbox-input:checked + .spectrum-Checkbox-box:before, .spectrum-Checkbox--emphasized:active .spectrum-Checkbox-input:checked + .spectrum-Checkbox-box:before`, `.spectrum-Checkbox--emphasized.is-invalid:active .spectrum-Checkbox-box:before, .spectrum-Checkbox--emphasized.is-invalid:active .spectrum-Checkbox-input:checked + .spectrum-Checkbox-box:before`, `.spectrum-Checkbox-input:checked + .spectrum-Checkbox-box:before`.
Defaults to `var(--mod-checkbox-control-selected-color-default, var(--spectrum-checkbox-control-selected-color-default))`, if not set.", + "control": "color" + }, + "highcontrast-checkbox-highlight-color-focus": { + "value": "var(--mod-checkbox-control-selected-color-focus, var(--spectrum-checkbox-control-selected-color-focus))", + "description": "Defined in `.spectrum-Checkbox`.
Used by `.spectrum-Checkbox.is-indeterminate .spectrum-Checkbox-input:focus-visible + .spectrum-Checkbox-box:before`, `.spectrum-Checkbox--emphasized .spectrum-Checkbox-input:focus-visible:checked + .spectrum-Checkbox-box:before, .spectrum-Checkbox--emphasized.is-indeterminate .spectrum-Checkbox-input:focus-visible + .spectrum-Checkbox-box:before`, `.spectrum-Checkbox-input:focus-visible:checked + .spectrum-Checkbox-box:before`.
Defaults to `var(--mod-checkbox-control-selected-color-focus, var(--spectrum-checkbox-control-selected-color-focus))`, if not set.", + "control": "color" + }, + "highcontrast-checkbox-highlight-color-hover": { + "value": "var(--mod-checkbox-emphasized-color-hover, var(--spectrum-checkbox-emphasized-color-hover))", + "description": "Defined in `.spectrum-Checkbox`.
Used by `.spectrum-Checkbox:hover .spectrum-Checkbox-box:before`, `.spectrum-Checkbox:hover .spectrum-Checkbox-input:checked + .spectrum-Checkbox-box:before`, `.spectrum-Checkbox.is-indeterminate:hover .spectrum-Checkbox-box:before, .spectrum-Checkbox.is-indeterminate:hover .spectrum-Checkbox-input:checked + .spectrum-Checkbox-box:before`, `.spectrum-Checkbox--emphasized.is-indeterminate:hover .spectrum-Checkbox-box:before, .spectrum-Checkbox--emphasized.is-indeterminate:hover .spectrum-Checkbox-input:checked + .spectrum-Checkbox-box:before, .spectrum-Checkbox--emphasized:hover .spectrum-Checkbox-input:checked + .spectrum-Checkbox-box:before`.
Defaults to `var(--mod-checkbox-emphasized-color-hover, var(--spectrum-checkbox-emphasized-color-hover))`, if not set.", + "control": "color" + }, + "highcontrast-checkbox-content-color-hover": { + "value": "var(--mod-checkbox-content-color-hover, var(--spectrum-checkbox-content-color-hover))", + "description": "Defined in `.spectrum-Checkbox`.
Used by `.spectrum-Checkbox:hover .spectrum-Checkbox-label`, `.spectrum-Checkbox.is-invalid.is-indeterminate:hover .spectrum-Checkbox-label`.
Defaults to `var(--mod-checkbox-content-color-hover, var(--spectrum-checkbox-content-color-hover))`, if not set.", + "control": "color" + }, + "highcontrast-checkbox-color-focus": { + "value": "var(--mod-checkbox-control-color-focus, var(--spectrum-checkbox-control-color-focus))", + "description": "Defined in `.spectrum-Checkbox`.
Used by `.spectrum-Checkbox--emphasized:focus-visible .spectrum-Checkbox-box:before, .spectrum-Checkbox--emphasized:focus-visible .spectrum-Checkbox-input:checked + .spectrum-Checkbox-box:before`, `.spectrum-Checkbox-input:focus-visible + .spectrum-Checkbox-box:before`.
Defaults to `var(--mod-checkbox-control-color-focus, var(--spectrum-checkbox-control-color-focus))`, if not set.", + "control": "color" + }, + "highcontrast-checkbox-focus-indicator-color": { + "value": "var(--mod-checkbox-focus-indicator-color, var(--spectrum-checkbox-focus-indicator-color))", + "description": "Defined in `.spectrum-Checkbox`.
Used by `.spectrum-Checkbox-input:focus-visible + .spectrum-Checkbox-box:after`, `.spectrum-Checkbox-input:focus-visible + .spectrum-Checkbox-box`.
Defaults to `var(--mod-checkbox-focus-indicator-color, var(--spectrum-checkbox-focus-indicator-color))`, if not set.", + "control": "color" + }, + "highcontrast-checkbox-content-color-focus": { + "value": "var(--mod-checkbox-content-color-focus, var(--spectrum-checkbox-content-color-focus))", + "description": "Defined in `.spectrum-Checkbox`.
Used by `.spectrum-Checkbox-input:focus-visible + .spectrum-Checkbox-label`.
Defaults to `var(--mod-checkbox-content-color-focus, var(--spectrum-checkbox-content-color-focus))`, if not set.", + "control": "color" + }, + "highcontrast-checkbox-disabled-color-default": { + "value": "var(--mod-checkbox-content-color-disabled, var(--spectrum-checkbox-content-color-disabled))", + "description": "Defined in `.spectrum-Checkbox`.
Used by `.spectrum-Checkbox .spectrum-Checkbox-input:checked:disabled + .spectrum-Checkbox-box:before, .spectrum-Checkbox .spectrum-Checkbox-input:disabled + .spectrum-Checkbox-box:before`, `.spectrum-Checkbox .spectrum-Checkbox-input:checked:disabled ~ .spectrum-Checkbox-label, .spectrum-Checkbox .spectrum-Checkbox-input:disabled ~ .spectrum-Checkbox-label`.
Defaults to `var(--mod-checkbox-content-color-disabled, var(--spectrum-checkbox-content-color-disabled))`, if not set.", + "control": "color" + } + } } diff --git a/components/checkbox/stories/checkbox.stories.js b/components/checkbox/stories/checkbox.stories.js index cbcad99494f..71646326dd3 100644 --- a/components/checkbox/stories/checkbox.stories.js +++ b/components/checkbox/stories/checkbox.stories.js @@ -1,11 +1,13 @@ import { Sizes } from "@spectrum-css/preview/decorators"; import { disableDefaultModes } from "@spectrum-css/preview/modes"; import { isChecked, isDisabled, isEmphasized, isHovered, isIndeterminate, isInvalid, isReadOnly, size } from "@spectrum-css/preview/types"; -import metadata from "../dist/metadata.json"; -import packageJson from "../package.json"; import { CheckboxGroup } from "./checkbox.test.js"; import { AllVariantsCheckboxGroup, DocsCheckboxGroup, Template } from "./template.js"; +// Local assets to render the component styles and structure +import metadata from "../dist/metadata.json"; +import packageJson from "../package.json"; + /** * Checkboxes allow users to select multiple items from a list of individual items, or mark one individual item as selected. * @@ -59,6 +61,7 @@ export default { }, packageJson, metadata, + cssprops: metadata.modifiers, }, }; diff --git a/components/clearbutton/dist/metadata.json b/components/clearbutton/dist/metadata.json index 7702979183f..e00d3a78648 100644 --- a/components/clearbutton/dist/metadata.json +++ b/components/clearbutton/dist/metadata.json @@ -7,12 +7,6 @@ ".spectrum-ClearButton--staticWhite:focus-visible", ".spectrum-ClearButton-fill", ".spectrum-ClearButton-icon", - ".spectrum-ClearButton.is-disabled", - ".spectrum-ClearButton.spectrum-ClearButton--quiet", - ".spectrum-ClearButton.spectrum-ClearButton--sizeL", - ".spectrum-ClearButton.spectrum-ClearButton--sizeS", - ".spectrum-ClearButton.spectrum-ClearButton--sizeXL", - ".spectrum-ClearButton.spectrum-ClearButton--staticWhite", ".spectrum-ClearButton:disabled", ".spectrum-ClearButton:not(:disabled)", ".spectrum-ClearButton:not(:disabled):active", @@ -22,61 +16,272 @@ ".spectrum-ClearButton:not(:disabled):focus-within", ".spectrum-ClearButton:not(:disabled):focus-within .spectrum-ClearButton-fill", ".spectrum-ClearButton:not(:disabled):hover", - ".spectrum-ClearButton:not(:disabled):hover .spectrum-ClearButton-fill" - ], - "modifiers": [ - "--mod-clear-button-background-color", - "--mod-clear-button-background-color-disabled", - "--mod-clear-button-background-color-down", - "--mod-clear-button-background-color-hover", - "--mod-clear-button-background-color-key-focus", - "--mod-clear-button-height", - "--mod-clear-button-icon-color", - "--mod-clear-button-icon-color-disabled", - "--mod-clear-button-icon-color-down", - "--mod-clear-button-icon-color-hover", - "--mod-clear-button-icon-color-key-focus", - "--mod-clear-button-padding", - "--mod-clear-button-width" - ], - "component": [ - "--spectrum-clear-button-background-color", - "--spectrum-clear-button-background-color-down", - "--spectrum-clear-button-background-color-hover", - "--spectrum-clear-button-background-color-key-focus", - "--spectrum-clear-button-height", - "--spectrum-clear-button-icon-color", - "--spectrum-clear-button-icon-color-down", - "--spectrum-clear-button-icon-color-hover", - "--spectrum-clear-button-icon-color-key-focus", - "--spectrum-clear-button-padding", - "--spectrum-clear-button-width" - ], - "global": [ - "--spectrum-component-height-100", - "--spectrum-component-height-200", - "--spectrum-component-height-300", - "--spectrum-component-height-75", - "--spectrum-disabled-content-color", - "--spectrum-disabled-static-white-content-color", - "--spectrum-in-field-button-edge-to-fill", - "--spectrum-neutral-content-color-default", - "--spectrum-neutral-content-color-down", - "--spectrum-neutral-content-color-hover", - "--spectrum-neutral-content-color-key-focus", - "--spectrum-transparent-white-400", - "--spectrum-transparent-white-500", - "--spectrum-white" - ], - "system-theme": [ - "--system-clear-button-background-color", - "--system-clear-button-background-color-down", - "--system-clear-button-background-color-hover", - "--system-clear-button-background-color-key-focus", - "--system-clear-button-static-white-background-color-down", - "--system-clear-button-static-white-background-color-hover", - "--system-clear-button-static-white-background-color-key-focus" + ".spectrum-ClearButton:not(:disabled):hover .spectrum-ClearButton-fill", + ".spectrum-ClearButton.is-disabled", + ".spectrum-ClearButton.spectrum-ClearButton--quiet", + ".spectrum-ClearButton.spectrum-ClearButton--sizeL", + ".spectrum-ClearButton.spectrum-ClearButton--sizeS", + ".spectrum-ClearButton.spectrum-ClearButton--sizeXL", + ".spectrum-ClearButton.spectrum-ClearButton--staticWhite" ], - "passthroughs": [], - "high-contrast": ["--highcontrast-clear-button-icon-color-hover"] + "modifiers": { + "mod-clear-button-height": { + "value": "var(--spectrum-clear-button-height)", + "description": "Used by `.spectrum-ClearButton`.
Defaults to `var(--spectrum-clear-button-height)`, if not set.", + "control": "text", + "category": "Modifier" + }, + "mod-clear-button-width": { + "value": "var(--spectrum-clear-button-width)", + "description": "Used by `.spectrum-ClearButton`.
Defaults to `var(--spectrum-clear-button-width)`, if not set.", + "control": "text", + "category": "Modifier" + }, + "mod-clear-button-background-color": { + "value": "var(--spectrum-clear-button-background-color)", + "description": "Defined in `.spectrum-ClearButton.spectrum-ClearButton--quiet`, `.spectrum-ClearButton.spectrum-ClearButton--staticWhite`, `.spectrum-ClearButton.is-disabled, .spectrum-ClearButton:disabled`.
Used by `.spectrum-ClearButton`, `.spectrum-ClearButton-fill`.
Defaults to `var(--spectrum-clear-button-background-color)`, if not set.", + "control": "color", + "category": "Modifier" + }, + "mod-clear-button-padding": { + "value": "var(--spectrum-clear-button-padding)", + "description": "Used by `.spectrum-ClearButton`.
Defaults to `var(--spectrum-clear-button-padding)`, if not set.", + "control": "text", + "category": "Modifier" + }, + "mod-clear-button-icon-color": { + "value": "var(--spectrum-clear-button-icon-color)", + "description": "Defined in `.spectrum-ClearButton.spectrum-ClearButton--staticWhite`, `.spectrum-ClearButton.is-disabled, .spectrum-ClearButton:disabled`.
Used by `.spectrum-ClearButton`.
Defaults to `var(--spectrum-clear-button-icon-color)`, if not set.", + "control": "color", + "category": "Modifier" + }, + "mod-clear-button-background-color-hover": { + "value": "var(--spectrum-clear-button-background-color-hover)", + "description": "Defined in `.spectrum-ClearButton.spectrum-ClearButton--quiet`.
Used by `.spectrum-ClearButton:not(:disabled):hover .spectrum-ClearButton-fill`.
Defaults to `var(--spectrum-clear-button-background-color-hover)`, if not set.", + "control": "color", + "category": "Modifier" + }, + "mod-clear-button-background-color-down": { + "value": "var(--spectrum-clear-button-background-color-down)", + "description": "Defined in `.spectrum-ClearButton.spectrum-ClearButton--quiet`.
Used by `.spectrum-ClearButton:not(:disabled):active .spectrum-ClearButton-fill`.
Defaults to `var(--spectrum-clear-button-background-color-down)`, if not set.", + "control": "color", + "category": "Modifier" + }, + "mod-clear-button-background-color-key-focus": { + "value": "var(--spectrum-clear-button-background-color-key-focus)", + "description": "Defined in `.spectrum-ClearButton.spectrum-ClearButton--quiet`.
Used by `.spectrum-ClearButton:not(:disabled):focus-visible .spectrum-ClearButton-fill, .spectrum-ClearButton:not(:disabled):focus-within .spectrum-ClearButton-fill`.
Defaults to `var(--spectrum-clear-button-background-color-key-focus)`, if not set.", + "control": "color", + "category": "Modifier" + }, + "mod-clear-button-icon-color-hover": { + "value": "var(--spectrum-clear-button-icon-color-hover)", + "description": "Defined in `.spectrum-ClearButton.spectrum-ClearButton--staticWhite`, `.spectrum-ClearButton.is-disabled, .spectrum-ClearButton:disabled`.
Used by `.spectrum-ClearButton:not(:disabled):hover`.
Defaults to `var(--spectrum-clear-button-icon-color-hover)`, if not set.", + "control": "color", + "category": "Modifier" + }, + "mod-clear-button-icon-color-down": { + "value": "var(--spectrum-clear-button-icon-color-down)", + "description": "Defined in `.spectrum-ClearButton.spectrum-ClearButton--staticWhite`, `.spectrum-ClearButton.is-disabled, .spectrum-ClearButton:disabled`.
Used by `.spectrum-ClearButton:not(:disabled):active`.
Defaults to `var(--spectrum-clear-button-icon-color-down)`, if not set.", + "control": "color", + "category": "Modifier" + }, + "mod-clear-button-icon-color-key-focus": { + "value": "var(--spectrum-clear-button-icon-color-key-focus)", + "description": "Defined in `.spectrum-ClearButton.spectrum-ClearButton--staticWhite`.
Used by `.spectrum-ClearButton:not(:disabled):focus-visible, .spectrum-ClearButton:not(:disabled):focus-within`.
Defaults to `var(--spectrum-clear-button-icon-color-key-focus)`, if not set.", + "control": "color", + "category": "Modifier" + }, + "mod-clear-button-icon-color-disabled": { + "value": "var(--spectrum-gray-400)", + "description": "Defined in `.spectrum-ClearButton.spectrum-ClearButton--staticWhite`.
Used by `--mod-clear-button-icon-color`.
Defaults to `var(--spectrum-disabled-content-color)`, if not set.", + "control": "color", + "category": "Modifier" + }, + "mod-clear-button-background-color-disabled": { + "description": "Used by `--mod-clear-button-background-color`.", + "control": "color", + "category": "Modifier" + } + }, + "component": { + "spectrum-clear-button-height": { + "description": "Defined in `.spectrum-ClearButton`, `.spectrum-ClearButton.spectrum-ClearButton--sizeS`, `.spectrum-ClearButton.spectrum-ClearButton--sizeL`, `.spectrum-ClearButton.spectrum-ClearButton--sizeXL`.
Used by `.spectrum-ClearButton`.", + "control": "text", + "category": "Component" + }, + "spectrum-clear-button-width": { + "description": "Defined in `.spectrum-ClearButton`, `.spectrum-ClearButton.spectrum-ClearButton--sizeS`, `.spectrum-ClearButton.spectrum-ClearButton--sizeL`, `.spectrum-ClearButton.spectrum-ClearButton--sizeXL`.
Used by `.spectrum-ClearButton`.", + "control": "text", + "category": "Component" + }, + "spectrum-clear-button-padding": { + "description": "Defined in `.spectrum-ClearButton`.
Used by `.spectrum-ClearButton`.", + "control": "text", + "category": "Component" + }, + "spectrum-clear-button-icon-color": { + "description": "Defined in `.spectrum-ClearButton`.
Used by `.spectrum-ClearButton`.", + "control": "color", + "category": "Component" + }, + "spectrum-clear-button-icon-color-hover": { + "description": "Defined in `.spectrum-ClearButton`.
Used by `.spectrum-ClearButton:not(:disabled):hover`.", + "control": "color", + "category": "Component" + }, + "spectrum-clear-button-icon-color-down": { + "description": "Defined in `.spectrum-ClearButton`.
Used by `.spectrum-ClearButton:not(:disabled):active`.", + "control": "color", + "category": "Component" + }, + "spectrum-clear-button-icon-color-key-focus": { + "description": "Defined in `.spectrum-ClearButton`.
Used by `.spectrum-ClearButton:not(:disabled):focus-visible, .spectrum-ClearButton:not(:disabled):focus-within`.", + "control": "color", + "category": "Component" + }, + "spectrum-clear-button-background-color-hover": { + "description": "Defined in `.spectrum-ClearButton`, `.spectrum-ClearButton.spectrum-ClearButton--staticWhite`.
Used by `.spectrum-ClearButton:not(:disabled):hover .spectrum-ClearButton-fill`.", + "control": "color", + "category": "Component" + }, + "spectrum-clear-button-background-color-down": { + "description": "Defined in `.spectrum-ClearButton`, `.spectrum-ClearButton.spectrum-ClearButton--staticWhite`.
Used by `.spectrum-ClearButton:not(:disabled):active .spectrum-ClearButton-fill`.", + "control": "color", + "category": "Component" + }, + "spectrum-clear-button-background-color-key-focus": { + "description": "Defined in `.spectrum-ClearButton`, `.spectrum-ClearButton.spectrum-ClearButton--staticWhite`.
Used by `.spectrum-ClearButton:not(:disabled):focus-visible .spectrum-ClearButton-fill, .spectrum-ClearButton:not(:disabled):focus-within .spectrum-ClearButton-fill`.", + "control": "color", + "category": "Component" + }, + "spectrum-clear-button-background-color": { + "description": "Defined in `.spectrum-ClearButton`.
Used by `.spectrum-ClearButton-fill`.", + "control": "color", + "category": "Component" + } + }, + "global": { + "spectrum-transparent-white-400": { + "value": "light-dark(rgba(255, 255, 255, 0.21), rgba(255, 255, 255, 0.21))", + "description": "Used by `--system-clear-button-static-white-background-color-hover`, `--system-clear-button-static-white-background-color-key-focus`.", + "control": "text", + "category": "Global" + }, + "spectrum-transparent-white-500": { + "value": "light-dark(rgba(255, 255, 255, 0.39), rgba(255, 255, 255, 0.39))", + "description": "Used by `--system-clear-button-static-white-background-color-down`.", + "control": "text", + "category": "Global" + }, + "spectrum-component-height-100": { + "value": "32px", + "description": "Used by `--spectrum-clear-button-height`, `--spectrum-clear-button-width`.", + "control": "text", + "category": "Global" + }, + "spectrum-in-field-button-edge-to-fill": { + "value": "0px", + "description": "Used by `--spectrum-clear-button-padding`.", + "control": "text", + "category": "Global" + }, + "spectrum-neutral-content-color-default": { + "value": "var(--spectrum-gray-800)", + "description": "Used by `--spectrum-clear-button-icon-color`.", + "control": "color", + "category": "Global" + }, + "spectrum-neutral-content-color-hover": { + "value": "var(--spectrum-gray-900)", + "description": "Used by `--spectrum-clear-button-icon-color-hover`.", + "control": "color", + "category": "Global" + }, + "spectrum-neutral-content-color-down": { + "value": "var(--spectrum-gray-900)", + "description": "Used by `--spectrum-clear-button-icon-color-down`.", + "control": "color", + "category": "Global" + }, + "spectrum-neutral-content-color-key-focus": { + "value": "var(--spectrum-gray-900)", + "description": "Used by `--spectrum-clear-button-icon-color-key-focus`.", + "control": "color", + "category": "Global" + }, + "spectrum-component-height-75": { + "value": "24px", + "description": "Used by `--spectrum-clear-button-height`, `--spectrum-clear-button-width`.", + "control": "text", + "category": "Global" + }, + "spectrum-component-height-200": { + "value": "40px", + "description": "Used by `--spectrum-clear-button-height`, `--spectrum-clear-button-width`.", + "control": "text", + "category": "Global" + }, + "spectrum-component-height-300": { + "value": "48px", + "description": "Used by `--spectrum-clear-button-height`, `--spectrum-clear-button-width`.", + "control": "text", + "category": "Global" + }, + "spectrum-white": { + "value": "light-dark(rgb(255, 255, 255), rgb(255, 255, 255))", + "description": "Used by `--mod-clear-button-icon-color`, `--mod-clear-button-icon-color-hover`, `--mod-clear-button-icon-color-down`, `--mod-clear-button-icon-color-key-focus`.", + "control": "text", + "category": "Global" + }, + "spectrum-disabled-static-white-content-color": { + "value": "var(--spectrum-transparent-white-400)", + "description": "Used by `--mod-clear-button-icon-color-disabled`.", + "control": "color", + "category": "Global" + }, + "spectrum-disabled-content-color": { + "value": "var(--spectrum-gray-400)", + "description": "Used by `--mod-clear-button-icon-color`, `--mod-clear-button-icon-color-hover`, `--mod-clear-button-icon-color-down`.", + "control": "color", + "category": "Global" + } + }, + "system-theme": { + "system-clear-button-background-color": { + "description": "Defined in `.spectrum`.
Used by `--spectrum-clear-button-background-color`.", + "control": "color" + }, + "system-clear-button-background-color-hover": { + "description": "Defined in `.spectrum`.
Used by `--spectrum-clear-button-background-color-hover`.", + "control": "color" + }, + "system-clear-button-background-color-down": { + "description": "Defined in `.spectrum`.
Used by `--spectrum-clear-button-background-color-down`.", + "control": "color" + }, + "system-clear-button-background-color-key-focus": { + "description": "Defined in `.spectrum`.
Used by `--spectrum-clear-button-background-color-key-focus`.", + "control": "color" + }, + "system-clear-button-static-white-background-color-hover": { + "description": "Defined in `.spectrum`.
Used by `--spectrum-clear-button-background-color-hover`.", + "control": "color" + }, + "system-clear-button-static-white-background-color-down": { + "description": "Defined in `.spectrum`.
Used by `--spectrum-clear-button-background-color-down`.", + "control": "color" + }, + "system-clear-button-static-white-background-color-key-focus": { + "description": "Defined in `.spectrum`.
Used by `--spectrum-clear-button-background-color-key-focus`.", + "control": "color" + } + }, + "passthroughs": {}, + "high-contrast": { + "highcontrast-clear-button-icon-color-hover": { + "value": "var(--mod-clear-button-icon-color-hover, var(--spectrum-clear-button-icon-color-hover))", + "description": "Defined in `.spectrum-ClearButton:not(:disabled)`.
Used by `.spectrum-ClearButton:not(:disabled):hover`.
Defaults to `var(--mod-clear-button-icon-color-hover, var(--spectrum-clear-button-icon-color-hover))`, if not set.", + "control": "color" + } + } } diff --git a/components/clearbutton/stories/clearbutton.stories.js b/components/clearbutton/stories/clearbutton.stories.js index a8dd5359278..ce38ff8dfdd 100644 --- a/components/clearbutton/stories/clearbutton.stories.js +++ b/components/clearbutton/stories/clearbutton.stories.js @@ -1,11 +1,13 @@ import { Sizes } from "@spectrum-css/preview/decorators"; import { disableDefaultModes } from "@spectrum-css/preview/modes"; import { isDisabled, isQuiet, size, staticColor } from "@spectrum-css/preview/types"; -import metadata from "../dist/metadata.json"; -import packageJson from "../package.json"; import { ClearButtonGroup } from "./clearbutton.test.js"; import { Template } from "./template.js"; +// Local assets to render the component styles and structure +import metadata from "../dist/metadata.json"; +import packageJson from "../package.json"; + /** * The clear button component is an in-field button used in search and tags. * @@ -61,6 +63,7 @@ export default { parameters: { packageJson, metadata, + cssprops: metadata.modifiers, }, }; diff --git a/components/closebutton/dist/metadata.json b/components/closebutton/dist/metadata.json index 756fc3d7e62..f048595d914 100644 --- a/components/closebutton/dist/metadata.json +++ b/components/closebutton/dist/metadata.json @@ -3,9 +3,6 @@ "selectors": [ ".spectrum-CloseButton", ".spectrum-CloseButton--staticBlack", - ".spectrum-CloseButton--staticBlack.is-focused:not(:disabled) .spectrum-CloseButton-UIIcon", - ".spectrum-CloseButton--staticBlack.is-keyboardFocused:not(:disabled)", - ".spectrum-CloseButton--staticBlack.is-keyboardFocused:not(:disabled) .spectrum-CloseButton-UIIcon", ".spectrum-CloseButton--staticBlack:disabled .spectrum-CloseButton-UIIcon", ".spectrum-CloseButton--staticBlack:not(:disabled)", ".spectrum-CloseButton--staticBlack:not(:disabled) .spectrum-CloseButton-UIIcon", @@ -16,10 +13,10 @@ ".spectrum-CloseButton--staticBlack:not(:disabled):focus-visible .spectrum-CloseButton-UIIcon", ".spectrum-CloseButton--staticBlack:not(:disabled):hover", ".spectrum-CloseButton--staticBlack:not(:disabled):hover .spectrum-CloseButton-UIIcon", + ".spectrum-CloseButton--staticBlack.is-focused:not(:disabled) .spectrum-CloseButton-UIIcon", + ".spectrum-CloseButton--staticBlack.is-keyboardFocused:not(:disabled)", + ".spectrum-CloseButton--staticBlack.is-keyboardFocused:not(:disabled) .spectrum-CloseButton-UIIcon", ".spectrum-CloseButton--staticWhite", - ".spectrum-CloseButton--staticWhite.is-focused:not(:disabled) .spectrum-CloseButton-UIIcon", - ".spectrum-CloseButton--staticWhite.is-keyboardFocused:not(:disabled)", - ".spectrum-CloseButton--staticWhite.is-keyboardFocused:not(:disabled) .spectrum-CloseButton-UIIcon", ".spectrum-CloseButton--staticWhite:disabled .spectrum-CloseButton-UIIcon", ".spectrum-CloseButton--staticWhite:not(:disabled)", ".spectrum-CloseButton--staticWhite:not(:disabled) .spectrum-CloseButton-UIIcon", @@ -30,17 +27,10 @@ ".spectrum-CloseButton--staticWhite:not(:disabled):focus-visible .spectrum-CloseButton-UIIcon", ".spectrum-CloseButton--staticWhite:not(:disabled):hover", ".spectrum-CloseButton--staticWhite:not(:disabled):hover .spectrum-CloseButton-UIIcon", + ".spectrum-CloseButton--staticWhite.is-focused:not(:disabled) .spectrum-CloseButton-UIIcon", + ".spectrum-CloseButton--staticWhite.is-keyboardFocused:not(:disabled)", + ".spectrum-CloseButton--staticWhite.is-keyboardFocused:not(:disabled) .spectrum-CloseButton-UIIcon", ".spectrum-CloseButton-UIIcon", - ".spectrum-CloseButton.is-disabled", - ".spectrum-CloseButton.is-focused:not(:disabled) .spectrum-CloseButton-UIIcon", - ".spectrum-CloseButton.is-keyboardFocused:not(:disabled)", - ".spectrum-CloseButton.is-keyboardFocused:not(:disabled) .spectrum-CloseButton-UIIcon", - ".spectrum-CloseButton.spectrum-CloseButton--sizeL", - ".spectrum-CloseButton.spectrum-CloseButton--sizeM", - ".spectrum-CloseButton.spectrum-CloseButton--sizeS", - ".spectrum-CloseButton.spectrum-CloseButton--sizeXL", - ".spectrum-CloseButton.spectrum-CloseButton--staticBlack", - ".spectrum-CloseButton.spectrum-CloseButton--staticWhite", ".spectrum-CloseButton::-moz-focus-inner", ".spectrum-CloseButton:after", ".spectrum-CloseButton:disabled", @@ -57,113 +47,537 @@ ".spectrum-CloseButton:not(:disabled):focus-visible .spectrum-CloseButton-UIIcon", ".spectrum-CloseButton:not(:disabled):hover", ".spectrum-CloseButton:not(:disabled):hover .spectrum-CloseButton-UIIcon", + ".spectrum-CloseButton.is-disabled", + ".spectrum-CloseButton.is-focused:not(:disabled) .spectrum-CloseButton-UIIcon", + ".spectrum-CloseButton.is-keyboardFocused:not(:disabled)", + ".spectrum-CloseButton.is-keyboardFocused:not(:disabled) .spectrum-CloseButton-UIIcon", + ".spectrum-CloseButton.spectrum-CloseButton--sizeL", + ".spectrum-CloseButton.spectrum-CloseButton--sizeM", + ".spectrum-CloseButton.spectrum-CloseButton--sizeS", + ".spectrum-CloseButton.spectrum-CloseButton--sizeXL", + ".spectrum-CloseButton.spectrum-CloseButton--staticBlack", + ".spectrum-CloseButton.spectrum-CloseButton--staticWhite", "a.spectrum-CloseButton" ], - "modifiers": [ - "--mod-animation-duration-100", - "--mod-closebutton-align-self", - "--mod-closebutton-animation-duraction", - "--mod-closebutton-animation-duration", - "--mod-closebutton-background-color-default", - "--mod-closebutton-background-color-down", - "--mod-closebutton-background-color-focus", - "--mod-closebutton-background-color-hover", - "--mod-closebutton-border-radius", - "--mod-closebutton-focus-indicator-color", - "--mod-closebutton-focus-indicator-gap", - "--mod-closebutton-focus-indicator-thickness", - "--mod-closebutton-height", - "--mod-closebutton-icon-color-default", - "--mod-closebutton-icon-color-disabled", - "--mod-closebutton-icon-color-down", - "--mod-closebutton-icon-color-focus", - "--mod-closebutton-icon-color-hover", - "--mod-closebutton-margin-inline", - "--mod-closebutton-margin-top", - "--mod-closebutton-size", - "--mod-closebutton-static-background-color-default", - "--mod-closebutton-static-background-color-down", - "--mod-closebutton-static-background-color-focus", - "--mod-closebutton-static-background-color-hover", - "--mod-closebutton-width", - "--mod-line-height-100", - "--mod-sans-font-family-stack" - ], - "component": [ - "--spectrum-closebutton-animation-duration", - "--spectrum-closebutton-background-color-default", - "--spectrum-closebutton-background-color-down", - "--spectrum-closebutton-background-color-focus", - "--spectrum-closebutton-background-color-hover", - "--spectrum-closebutton-border-radius", - "--spectrum-closebutton-focus-indicator-color", - "--spectrum-closebutton-focus-indicator-gap", - "--spectrum-closebutton-focus-indicator-thickness", - "--spectrum-closebutton-icon-color-default", - "--spectrum-closebutton-icon-color-disabled", - "--spectrum-closebutton-icon-color-down", - "--spectrum-closebutton-icon-color-focus", - "--spectrum-closebutton-icon-color-hover", - "--spectrum-closebutton-size", - "--spectrum-closebutton-static-background-color-default", - "--spectrum-closebutton-static-background-color-down", - "--spectrum-closebutton-static-background-color-focus", - "--spectrum-closebutton-static-background-color-hover" - ], - "global": [ - "--spectrum-animation-duration-100", - "--spectrum-black", - "--spectrum-component-height-100", - "--spectrum-component-height-200", - "--spectrum-component-height-300", - "--spectrum-component-height-75", - "--spectrum-disabled-content-color", - "--spectrum-disabled-static-black-content-color", - "--spectrum-disabled-static-white-content-color", - "--spectrum-focus-indicator-color", - "--spectrum-focus-indicator-gap", - "--spectrum-focus-indicator-thickness", - "--spectrum-gray-100", - "--spectrum-gray-200", - "--spectrum-line-height-100", - "--spectrum-neutral-content-color-default", - "--spectrum-neutral-content-color-down", - "--spectrum-neutral-content-color-hover", - "--spectrum-neutral-content-color-key-focus", - "--spectrum-sans-font-family-stack", - "--spectrum-static-black-focus-indicator-color", - "--spectrum-static-white-focus-indicator-color", - "--spectrum-transparent-black-400", - "--spectrum-transparent-black-500", - "--spectrum-transparent-white-400", - "--spectrum-transparent-white-500", - "--spectrum-white" - ], - "system-theme": [ - "--system-close-button-background-color-default", - "--system-close-button-background-color-down", - "--system-close-button-background-color-focus", - "--system-close-button-background-color-hover", - "--system-close-button-static-black-static-background-color-down", - "--system-close-button-static-black-static-background-color-focus", - "--system-close-button-static-black-static-background-color-hover", - "--system-close-button-static-white-static-background-color-down", - "--system-close-button-static-white-static-background-color-focus", - "--system-close-button-static-white-static-background-color-hover" - ], - "passthroughs": [ - "--mod-button-animation-duration", - "--mod-button-font-family", - "--mod-button-line-height" - ], - "high-contrast": [ - "--highcontrast-closebutton-background-color-default", - "--highcontrast-closebutton-focus-indicator-color", - "--highcontrast-closebutton-icon-color-default", - "--highcontrast-closebutton-icon-color-disabled", - "--highcontrast-closebutton-icon-color-down", - "--highcontrast-closebutton-icon-color-focus", - "--highcontrast-closebutton-icon-color-hover", - "--highcontrast-closebutton-static-background-color-default" - ] + "modifiers": { + "mod-sans-font-family-stack": { + "value": "var(--spectrum-sans-font-family-stack)", + "description": "Used by `.spectrum-CloseButton`.
Defaults to `var(--spectrum-sans-font-family-stack)`, if not set.", + "control": "text", + "category": "Modifier" + }, + "mod-line-height-100": { + "value": "1.3", + "description": "Used by `.spectrum-CloseButton`.
Defaults to `var(--spectrum-line-height-100)`, if not set.", + "control": "text", + "category": "Modifier" + }, + "mod-animation-duration-100": { + "value": "var(--spectrum-animation-duration-100)", + "description": "Used by `.spectrum-CloseButton`.
Defaults to `var(--spectrum-animation-duration-100)`, if not set.", + "control": "text", + "category": "Modifier" + }, + "mod-closebutton-focus-indicator-gap": { + "value": "var(--spectrum-closebutton-focus-indicator-gap)", + "description": "Used by `.spectrum-CloseButton:focus-visible:after`, `.spectrum-CloseButton:after`.
Defaults to `var(--spectrum-closebutton-focus-indicator-gap)`, if not set.", + "control": "text", + "category": "Modifier" + }, + "mod-closebutton-animation-duration": { + "value": "var(--spectrum-closebutton-animation-duration)", + "description": "Used by `.spectrum-CloseButton:focus-visible:after`, `.spectrum-CloseButton`, `.spectrum-CloseButton:after`.
Defaults to `var(--spectrum-closebutton-animation-duration)`, if not set.", + "control": "text", + "category": "Modifier" + }, + "mod-closebutton-animation-duraction": { + "value": "var(--spectrum-closebutton-animation-duration)", + "description": "Used by `.spectrum-CloseButton:focus-visible:after`.
Defaults to `var(--spectrum-closebutton-animation-duration)`, if not set.", + "control": "text", + "category": "Modifier" + }, + "mod-closebutton-height": { + "value": "var(--spectrum-closebutton-size)", + "description": "Used by `.spectrum-CloseButton`.
Defaults to `var(--spectrum-closebutton-size)`, if not set.", + "control": "text", + "category": "Modifier" + }, + "mod-closebutton-width": { + "value": "var(--mod-closebutton-height, var(--spectrum-closebutton-size))", + "description": "Used by `.spectrum-CloseButton`.
Defaults to `var(--mod-closebutton-height, var(--spectrum-closebutton-size))`, if not set.", + "control": "text", + "category": "Modifier" + }, + "mod-closebutton-border-radius": { + "value": "var(--spectrum-closebutton-border-radius)", + "description": "Used by `.spectrum-CloseButton`.
Defaults to `var(--spectrum-closebutton-border-radius)`, if not set.", + "control": "text", + "category": "Modifier" + }, + "mod-closebutton-margin-inline": { + "description": "Used by `.spectrum-CloseButton`.", + "control": "text", + "category": "Modifier" + }, + "mod-closebutton-margin-top": { + "description": "Used by `.spectrum-CloseButton`.", + "control": "text", + "category": "Modifier" + }, + "mod-closebutton-align-self": { + "description": "Used by `.spectrum-CloseButton`.", + "control": "text", + "category": "Modifier" + }, + "mod-closebutton-size": { + "value": "var(--spectrum-closebutton-size)", + "description": "Used by `.spectrum-CloseButton:after`.
Defaults to `var(--spectrum-closebutton-size)`, if not set.", + "control": "text", + "category": "Modifier" + }, + "mod-closebutton-focus-indicator-thickness": { + "value": "var(--spectrum-closebutton-focus-indicator-thickness)", + "description": "Used by `.spectrum-CloseButton:focus-visible:after`.
Defaults to `var(--spectrum-closebutton-focus-indicator-thickness)`, if not set.", + "control": "text", + "category": "Modifier" + }, + "mod-closebutton-focus-indicator-color": { + "value": "var(--spectrum-closebutton-focus-indicator-color)", + "description": "Used by `.spectrum-CloseButton:focus-visible:after`.
Defaults to `var(--spectrum-closebutton-focus-indicator-color)`, if not set.", + "control": "color", + "category": "Modifier" + }, + "mod-closebutton-background-color-default": { + "value": "var(--spectrum-closebutton-background-color-default)", + "description": "Used by `.spectrum-CloseButton:not(:disabled)`, `.spectrum-CloseButton:disabled`.
Defaults to `var(--spectrum-closebutton-background-color-default)`, if not set.", + "control": "color", + "category": "Modifier" + }, + "mod-closebutton-background-color-down": { + "value": "var(--spectrum-closebutton-background-color-down)", + "description": "Used by `.spectrum-CloseButton:not(:disabled):active`.
Defaults to `var(--spectrum-closebutton-background-color-down)`, if not set.", + "control": "color", + "category": "Modifier" + }, + "mod-closebutton-icon-color-down": { + "value": "var(--spectrum-closebutton-icon-color-down)", + "description": "Used by `.spectrum-CloseButton:not(:disabled):active .spectrum-CloseButton-UIIcon`.
Defaults to `var(--spectrum-closebutton-icon-color-down)`, if not set.", + "control": "color", + "category": "Modifier" + }, + "mod-closebutton-background-color-focus": { + "value": "var(--spectrum-closebutton-background-color-focus)", + "description": "Used by `.spectrum-CloseButton.is-keyboardFocused:not(:disabled), .spectrum-CloseButton:not(:disabled):focus-visible`.
Defaults to `var(--spectrum-closebutton-background-color-focus)`, if not set.", + "control": "color", + "category": "Modifier" + }, + "mod-closebutton-icon-color-focus": { + "value": "var(--spectrum-closebutton-icon-color-focus)", + "description": "Used by `.spectrum-CloseButton.is-keyboardFocused:not(:disabled) .spectrum-CloseButton-UIIcon, .spectrum-CloseButton:not(:disabled):focus-visible .spectrum-CloseButton-UIIcon`, `.spectrum-CloseButton.is-focused:not(:disabled) .spectrum-CloseButton-UIIcon, .spectrum-CloseButton:not(:disabled):focus .spectrum-CloseButton-UIIcon`.
Defaults to `var(--spectrum-closebutton-icon-color-focus)`, if not set.", + "control": "color", + "category": "Modifier" + }, + "mod-closebutton-icon-color-default": { + "value": "var(--spectrum-closebutton-icon-color-default)", + "description": "Used by `.spectrum-CloseButton:not(:disabled) .spectrum-CloseButton-UIIcon`, `.spectrum-CloseButton--staticBlack:not(:disabled):hover .spectrum-CloseButton-UIIcon, .spectrum-CloseButton--staticWhite:not(:disabled):hover .spectrum-CloseButton-UIIcon`, `.spectrum-CloseButton--staticBlack:not(:disabled):active .spectrum-CloseButton-UIIcon, .spectrum-CloseButton--staticWhite:not(:disabled):active .spectrum-CloseButton-UIIcon`, `.spectrum-CloseButton--staticBlack.is-focused:not(:disabled) .spectrum-CloseButton-UIIcon, .spectrum-CloseButton--staticBlack.is-keyboardFocused:not(:disabled) .spectrum-CloseButton-UIIcon, .spectrum-CloseButton--staticBlack:not(:disabled):focus .spectrum-CloseButton-UIIcon, .spectrum-CloseButton--staticBlack:not(:disabled):focus-visible .spectrum-CloseButton-UIIcon, .spectrum-CloseButton--staticWhite.is-focused:not(:disabled) .spectrum-CloseButton-UIIcon, .spectrum-CloseButton--staticWhite.is-keyboardFocused:not(:disabled) .spectrum-CloseButton-UIIcon, .spectrum-CloseButton--staticWhite:not(:disabled):focus .spectrum-CloseButton-UIIcon, .spectrum-CloseButton--staticWhite:not(:disabled):focus-visible .spectrum-CloseButton-UIIcon`, `.spectrum-CloseButton--staticBlack:not(:disabled) .spectrum-CloseButton-UIIcon, .spectrum-CloseButton--staticWhite:not(:disabled) .spectrum-CloseButton-UIIcon`.
Defaults to `var(--spectrum-closebutton-icon-color-default)`, if not set.", + "control": "color", + "category": "Modifier" + }, + "mod-closebutton-icon-color-disabled": { + "value": "var(--spectrum-closebutton-icon-color-disabled)", + "description": "Used by `.spectrum-CloseButton:disabled .spectrum-CloseButton-UIIcon`, `.spectrum-CloseButton--staticBlack:disabled .spectrum-CloseButton-UIIcon, .spectrum-CloseButton--staticWhite:disabled .spectrum-CloseButton-UIIcon`.
Defaults to `var(--spectrum-closebutton-icon-color-disabled)`, if not set.", + "control": "color", + "category": "Modifier" + }, + "mod-closebutton-static-background-color-default": { + "value": "var(--spectrum-closebutton-static-background-color-default)", + "description": "Used by `.spectrum-CloseButton--staticBlack:not(:disabled), .spectrum-CloseButton--staticWhite:not(:disabled)`.
Defaults to `var(--spectrum-closebutton-static-background-color-default)`, if not set.", + "control": "color", + "category": "Modifier" + }, + "mod-closebutton-background-color-hover": { + "value": "var(--spectrum-closebutton-background-color-hover)", + "description": "Used by `.spectrum-CloseButton:not(:disabled):hover`.
Defaults to `var(--spectrum-closebutton-background-color-hover)`, if not set.", + "control": "color", + "category": "Modifier" + }, + "mod-closebutton-icon-color-hover": { + "value": "var(--spectrum-closebutton-icon-color-hover)", + "description": "Used by `.spectrum-CloseButton:not(:disabled):hover .spectrum-CloseButton-UIIcon`.
Defaults to `var(--spectrum-closebutton-icon-color-hover)`, if not set.", + "control": "color", + "category": "Modifier" + }, + "mod-closebutton-static-background-color-hover": { + "value": "var(--spectrum-closebutton-static-background-color-hover)", + "description": "Used by `.spectrum-CloseButton--staticBlack:not(:disabled):hover, .spectrum-CloseButton--staticWhite:not(:disabled):hover`.
Defaults to `var(--spectrum-closebutton-static-background-color-hover)`, if not set.", + "control": "color", + "category": "Modifier" + }, + "mod-closebutton-static-background-color-down": { + "value": "var(--spectrum-closebutton-static-background-color-down)", + "description": "Used by `.spectrum-CloseButton--staticBlack:not(:disabled):active, .spectrum-CloseButton--staticWhite:not(:disabled):active`.
Defaults to `var(--spectrum-closebutton-static-background-color-down)`, if not set.", + "control": "color", + "category": "Modifier" + }, + "mod-closebutton-static-background-color-focus": { + "value": "var(--spectrum-closebutton-static-background-color-focus)", + "description": "Used by `.spectrum-CloseButton--staticBlack.is-keyboardFocused:not(:disabled), .spectrum-CloseButton--staticBlack:not(:disabled):focus-visible, .spectrum-CloseButton--staticWhite.is-keyboardFocused:not(:disabled), .spectrum-CloseButton--staticWhite:not(:disabled):focus-visible`.
Defaults to `var(--spectrum-closebutton-static-background-color-focus)`, if not set.", + "control": "color", + "category": "Modifier" + } + }, + "component": { + "spectrum-closebutton-focus-indicator-gap": { + "description": "Defined in `.spectrum-CloseButton`.
Used by `.spectrum-CloseButton:focus-visible:after`, `.spectrum-CloseButton:after`.", + "control": "text", + "category": "Component" + }, + "spectrum-closebutton-animation-duration": { + "description": "Defined in `.spectrum-CloseButton`.
Used by `.spectrum-CloseButton:focus-visible:after`, `.spectrum-CloseButton`, `.spectrum-CloseButton:after`.", + "control": "text", + "category": "Component" + }, + "spectrum-closebutton-icon-color-default": { + "description": "Defined in `.spectrum-CloseButton`, `.spectrum-CloseButton.spectrum-CloseButton--staticWhite`, `.spectrum-CloseButton.spectrum-CloseButton--staticBlack`.
Used by `.spectrum-CloseButton:not(:disabled) .spectrum-CloseButton-UIIcon`, `.spectrum-CloseButton--staticBlack:not(:disabled):hover .spectrum-CloseButton-UIIcon, .spectrum-CloseButton--staticWhite:not(:disabled):hover .spectrum-CloseButton-UIIcon`, `.spectrum-CloseButton--staticBlack:not(:disabled):active .spectrum-CloseButton-UIIcon, .spectrum-CloseButton--staticWhite:not(:disabled):active .spectrum-CloseButton-UIIcon`, `.spectrum-CloseButton--staticBlack.is-focused:not(:disabled) .spectrum-CloseButton-UIIcon, .spectrum-CloseButton--staticBlack.is-keyboardFocused:not(:disabled) .spectrum-CloseButton-UIIcon, .spectrum-CloseButton--staticBlack:not(:disabled):focus .spectrum-CloseButton-UIIcon, .spectrum-CloseButton--staticBlack:not(:disabled):focus-visible .spectrum-CloseButton-UIIcon, .spectrum-CloseButton--staticWhite.is-focused:not(:disabled) .spectrum-CloseButton-UIIcon, .spectrum-CloseButton--staticWhite.is-keyboardFocused:not(:disabled) .spectrum-CloseButton-UIIcon, .spectrum-CloseButton--staticWhite:not(:disabled):focus .spectrum-CloseButton-UIIcon, .spectrum-CloseButton--staticWhite:not(:disabled):focus-visible .spectrum-CloseButton-UIIcon`, `.spectrum-CloseButton--staticBlack:not(:disabled) .spectrum-CloseButton-UIIcon, .spectrum-CloseButton--staticWhite:not(:disabled) .spectrum-CloseButton-UIIcon`.", + "control": "color", + "category": "Component" + }, + "spectrum-closebutton-icon-color-hover": { + "description": "Defined in `.spectrum-CloseButton`.
Used by `.spectrum-CloseButton:not(:disabled):hover .spectrum-CloseButton-UIIcon`.", + "control": "color", + "category": "Component" + }, + "spectrum-closebutton-icon-color-down": { + "description": "Defined in `.spectrum-CloseButton`.
Used by `.spectrum-CloseButton:not(:disabled):active .spectrum-CloseButton-UIIcon`.", + "control": "color", + "category": "Component" + }, + "spectrum-closebutton-icon-color-focus": { + "description": "Defined in `.spectrum-CloseButton`.
Used by `.spectrum-CloseButton.is-keyboardFocused:not(:disabled) .spectrum-CloseButton-UIIcon, .spectrum-CloseButton:not(:disabled):focus-visible .spectrum-CloseButton-UIIcon`, `.spectrum-CloseButton.is-focused:not(:disabled) .spectrum-CloseButton-UIIcon, .spectrum-CloseButton:not(:disabled):focus .spectrum-CloseButton-UIIcon`.", + "control": "color", + "category": "Component" + }, + "spectrum-closebutton-icon-color-disabled": { + "description": "Defined in `.spectrum-CloseButton`, `.spectrum-CloseButton.spectrum-CloseButton--staticWhite`, `.spectrum-CloseButton.spectrum-CloseButton--staticBlack`.
Used by `.spectrum-CloseButton:disabled .spectrum-CloseButton-UIIcon`, `.spectrum-CloseButton--staticBlack:disabled .spectrum-CloseButton-UIIcon, .spectrum-CloseButton--staticWhite:disabled .spectrum-CloseButton-UIIcon`.", + "control": "color", + "category": "Component" + }, + "spectrum-closebutton-focus-indicator-thickness": { + "description": "Defined in `.spectrum-CloseButton`.
Used by `.spectrum-CloseButton:focus-visible:after`.", + "control": "text", + "category": "Component" + }, + "spectrum-closebutton-focus-indicator-color": { + "description": "Defined in `.spectrum-CloseButton`, `.spectrum-CloseButton.spectrum-CloseButton--staticWhite`, `.spectrum-CloseButton.spectrum-CloseButton--staticBlack`.
Used by `.spectrum-CloseButton:focus-visible:after`.", + "control": "color", + "category": "Component" + }, + "spectrum-closebutton-size": { + "description": "Defined in `.spectrum-CloseButton.spectrum-CloseButton--sizeS`, `.spectrum-CloseButton, .spectrum-CloseButton.spectrum-CloseButton--sizeM`, `.spectrum-CloseButton.spectrum-CloseButton--sizeL`, `.spectrum-CloseButton.spectrum-CloseButton--sizeXL`.
Used by `.spectrum-CloseButton`, `.spectrum-CloseButton:after`.", + "control": "text", + "category": "Component" + }, + "spectrum-closebutton-border-radius": { + "description": "Defined in `.spectrum-CloseButton.spectrum-CloseButton--sizeS`, `.spectrum-CloseButton, .spectrum-CloseButton.spectrum-CloseButton--sizeM`, `.spectrum-CloseButton.spectrum-CloseButton--sizeL`, `.spectrum-CloseButton.spectrum-CloseButton--sizeXL`.
Used by `.spectrum-CloseButton`.", + "control": "text", + "category": "Component" + }, + "spectrum-closebutton-static-background-color-default": { + "description": "Defined in `.spectrum-CloseButton.spectrum-CloseButton--staticWhite`, `.spectrum-CloseButton.spectrum-CloseButton--staticBlack`.
Used by `.spectrum-CloseButton--staticBlack:not(:disabled), .spectrum-CloseButton--staticWhite:not(:disabled)`.", + "control": "color", + "category": "Component" + }, + "spectrum-closebutton-background-color-default": { + "description": "Defined in `.spectrum-CloseButton`.
Used by `.spectrum-CloseButton:not(:disabled)`, `.spectrum-CloseButton:disabled`.", + "control": "color", + "category": "Component" + }, + "spectrum-closebutton-background-color-down": { + "description": "Defined in `.spectrum-CloseButton`.
Used by `.spectrum-CloseButton:not(:disabled):active`.", + "control": "color", + "category": "Component" + }, + "spectrum-closebutton-background-color-focus": { + "description": "Defined in `.spectrum-CloseButton`.
Used by `.spectrum-CloseButton.is-keyboardFocused:not(:disabled), .spectrum-CloseButton:not(:disabled):focus-visible`.", + "control": "color", + "category": "Component" + }, + "spectrum-closebutton-background-color-hover": { + "description": "Defined in `.spectrum-CloseButton`.
Used by `.spectrum-CloseButton:not(:disabled):hover`.", + "control": "color", + "category": "Component" + }, + "spectrum-closebutton-static-background-color-hover": { + "description": "Defined in `.spectrum-CloseButton.spectrum-CloseButton--staticWhite`, `.spectrum-CloseButton.spectrum-CloseButton--staticBlack`.
Used by `.spectrum-CloseButton--staticBlack:not(:disabled):hover, .spectrum-CloseButton--staticWhite:not(:disabled):hover`.", + "control": "color", + "category": "Component" + }, + "spectrum-closebutton-static-background-color-down": { + "description": "Defined in `.spectrum-CloseButton.spectrum-CloseButton--staticWhite`, `.spectrum-CloseButton.spectrum-CloseButton--staticBlack`.
Used by `.spectrum-CloseButton--staticBlack:not(:disabled):active, .spectrum-CloseButton--staticWhite:not(:disabled):active`.", + "control": "color", + "category": "Component" + }, + "spectrum-closebutton-static-background-color-focus": { + "description": "Defined in `.spectrum-CloseButton.spectrum-CloseButton--staticWhite`, `.spectrum-CloseButton.spectrum-CloseButton--staticBlack`.
Used by `.spectrum-CloseButton--staticBlack.is-keyboardFocused:not(:disabled), .spectrum-CloseButton--staticBlack:not(:disabled):focus-visible, .spectrum-CloseButton--staticWhite.is-keyboardFocused:not(:disabled), .spectrum-CloseButton--staticWhite:not(:disabled):focus-visible`.", + "control": "color", + "category": "Component" + } + }, + "global": { + "spectrum-gray-100": { + "value": "light-dark(rgb(233, 233, 233), rgb(44, 44, 44))", + "description": "Used by `--system-close-button-background-color-hover`, `--system-close-button-background-color-focus`.", + "control": "text", + "category": "Global" + }, + "spectrum-gray-200": { + "value": "light-dark(rgb(225, 225, 225), rgb(50, 50, 50))", + "description": "Used by `--system-close-button-background-color-down`.", + "control": "text", + "category": "Global" + }, + "spectrum-transparent-white-400": { + "value": "light-dark(rgba(255, 255, 255, 0.21), rgba(255, 255, 255, 0.21))", + "description": "Used by `--system-close-button-static-white-static-background-color-hover`, `--system-close-button-static-white-static-background-color-focus`.", + "control": "text", + "category": "Global" + }, + "spectrum-transparent-white-500": { + "value": "light-dark(rgba(255, 255, 255, 0.39), rgba(255, 255, 255, 0.39))", + "description": "Used by `--system-close-button-static-white-static-background-color-down`.", + "control": "text", + "category": "Global" + }, + "spectrum-transparent-black-400": { + "value": "light-dark(rgba(0, 0, 0, 0.22), rgba(0, 0, 0, 0.22))", + "description": "Used by `--system-close-button-static-black-static-background-color-hover`, `--system-close-button-static-black-static-background-color-focus`.", + "control": "text", + "category": "Global" + }, + "spectrum-transparent-black-500": { + "value": "light-dark(rgba(0, 0, 0, 0.44), rgba(0, 0, 0, 0.44))", + "description": "Used by `--system-close-button-static-black-static-background-color-down`.", + "control": "text", + "category": "Global" + }, + "spectrum-sans-font-family-stack": { + "description": "Used by `.spectrum-CloseButton`.", + "control": "text", + "category": "Global" + }, + "spectrum-line-height-100": { + "value": "1.3", + "description": "Used by `.spectrum-CloseButton`.", + "control": "text", + "category": "Global" + }, + "spectrum-animation-duration-100": { + "description": "Used by `.spectrum-CloseButton`, `--spectrum-closebutton-animation-duration`.", + "control": "text", + "category": "Global" + }, + "spectrum-neutral-content-color-default": { + "value": "var(--spectrum-gray-800)", + "description": "Used by `--spectrum-closebutton-icon-color-default`.", + "control": "color", + "category": "Global" + }, + "spectrum-neutral-content-color-hover": { + "value": "var(--spectrum-gray-900)", + "description": "Used by `--spectrum-closebutton-icon-color-hover`.", + "control": "color", + "category": "Global" + }, + "spectrum-neutral-content-color-down": { + "value": "var(--spectrum-gray-900)", + "description": "Used by `--spectrum-closebutton-icon-color-down`.", + "control": "color", + "category": "Global" + }, + "spectrum-neutral-content-color-key-focus": { + "value": "var(--spectrum-gray-900)", + "description": "Used by `--spectrum-closebutton-icon-color-focus`.", + "control": "color", + "category": "Global" + }, + "spectrum-disabled-content-color": { + "value": "var(--spectrum-gray-400)", + "description": "Used by `--spectrum-closebutton-icon-color-disabled`.", + "control": "color", + "category": "Global" + }, + "spectrum-focus-indicator-thickness": { + "value": "2px", + "description": "Used by `--spectrum-closebutton-focus-indicator-thickness`.", + "control": "text", + "category": "Global" + }, + "spectrum-focus-indicator-gap": { + "value": "2px", + "description": "Used by `--spectrum-closebutton-focus-indicator-gap`.", + "control": "text", + "category": "Global" + }, + "spectrum-focus-indicator-color": { + "value": "var(--spectrum-blue-800)", + "description": "Used by `--spectrum-closebutton-focus-indicator-color`.", + "control": "color", + "category": "Global" + }, + "spectrum-component-height-75": { + "value": "24px", + "description": "Used by `--spectrum-closebutton-size`, `--spectrum-closebutton-border-radius`.", + "control": "text", + "category": "Global" + }, + "spectrum-component-height-100": { + "value": "32px", + "description": "Used by `--spectrum-closebutton-size`, `--spectrum-closebutton-border-radius`.", + "control": "text", + "category": "Global" + }, + "spectrum-component-height-200": { + "value": "40px", + "description": "Used by `--spectrum-closebutton-size`, `--spectrum-closebutton-border-radius`.", + "control": "text", + "category": "Global" + }, + "spectrum-component-height-300": { + "value": "48px", + "description": "Used by `--spectrum-closebutton-size`, `--spectrum-closebutton-border-radius`.", + "control": "text", + "category": "Global" + }, + "spectrum-white": { + "value": "light-dark(rgb(255, 255, 255), rgb(255, 255, 255))", + "description": "Used by `--spectrum-closebutton-icon-color-default`.", + "control": "text", + "category": "Global" + }, + "spectrum-disabled-static-white-content-color": { + "value": "var(--spectrum-transparent-white-400)", + "description": "Used by `--spectrum-closebutton-icon-color-disabled`.", + "control": "color", + "category": "Global" + }, + "spectrum-static-white-focus-indicator-color": { + "value": "var(--spectrum-white)", + "description": "Used by `--spectrum-closebutton-focus-indicator-color`.", + "control": "color", + "category": "Global" + }, + "spectrum-black": { + "value": "rgb(0, 0, 0)", + "description": "Used by `--spectrum-closebutton-icon-color-default`.", + "control": "text", + "category": "Global" + }, + "spectrum-disabled-static-black-content-color": { + "value": "var(--spectrum-transparent-black-400)", + "description": "Used by `--spectrum-closebutton-icon-color-disabled`.", + "control": "color", + "category": "Global" + }, + "spectrum-static-black-focus-indicator-color": { + "value": "rgb(0, 0, 0)", + "description": "Used by `--spectrum-closebutton-focus-indicator-color`.", + "control": "color", + "category": "Global" + } + }, + "system-theme": { + "system-close-button-background-color-default": { + "description": "Defined in `.spectrum`.
Used by `--spectrum-closebutton-background-color-default`.", + "control": "color" + }, + "system-close-button-background-color-hover": { + "description": "Defined in `.spectrum`.
Used by `--spectrum-closebutton-background-color-hover`.", + "control": "color" + }, + "system-close-button-background-color-down": { + "description": "Defined in `.spectrum`.
Used by `--spectrum-closebutton-background-color-down`.", + "control": "color" + }, + "system-close-button-background-color-focus": { + "description": "Defined in `.spectrum`.
Used by `--spectrum-closebutton-background-color-focus`.", + "control": "color" + }, + "system-close-button-static-white-static-background-color-hover": { + "description": "Defined in `.spectrum`.
Used by `--spectrum-closebutton-static-background-color-hover`.", + "control": "color" + }, + "system-close-button-static-white-static-background-color-down": { + "description": "Defined in `.spectrum`.
Used by `--spectrum-closebutton-static-background-color-down`.", + "control": "color" + }, + "system-close-button-static-white-static-background-color-focus": { + "description": "Defined in `.spectrum`.
Used by `--spectrum-closebutton-static-background-color-focus`.", + "control": "color" + }, + "system-close-button-static-black-static-background-color-hover": { + "description": "Defined in `.spectrum`.
Used by `--spectrum-closebutton-static-background-color-hover`.", + "control": "color" + }, + "system-close-button-static-black-static-background-color-down": { + "description": "Defined in `.spectrum`.
Used by `--spectrum-closebutton-static-background-color-down`.", + "control": "color" + }, + "system-close-button-static-black-static-background-color-focus": { + "description": "Defined in `.spectrum`.
Used by `--spectrum-closebutton-static-background-color-focus`.", + "control": "color" + } + }, + "passthroughs": { + "mod-button-font-family": { + "category": "Passthrough" + }, + "mod-button-line-height": { + "category": "Passthrough" + }, + "mod-button-animation-duration": { + "category": "Passthrough" + } + }, + "high-contrast": { + "highcontrast-closebutton-icon-color-disabled": { + "value": "var(--mod-closebutton-icon-color-disabled, var(--spectrum-closebutton-icon-color-disabled))", + "description": "Defined in `.spectrum-CloseButton`, `.spectrum-CloseButton--staticBlack`, `.spectrum-CloseButton--staticWhite`.
Used by `.spectrum-CloseButton:disabled .spectrum-CloseButton-UIIcon`.
Defaults to `var(--mod-closebutton-icon-color-disabled, var(--spectrum-closebutton-icon-color-disabled))`, if not set.", + "control": "color" + }, + "highcontrast-closebutton-icon-color-down": { + "value": "var(--mod-closebutton-icon-color-down, var(--spectrum-closebutton-icon-color-down))", + "description": "Defined in `.spectrum-CloseButton`.
Used by `.spectrum-CloseButton:not(:disabled):active .spectrum-CloseButton-UIIcon`.
Defaults to `var(--mod-closebutton-icon-color-down, var(--spectrum-closebutton-icon-color-down))`, if not set.", + "control": "color" + }, + "highcontrast-closebutton-icon-color-hover": { + "value": "var(--mod-closebutton-icon-color-hover, var(--spectrum-closebutton-icon-color-hover))", + "description": "Defined in `.spectrum-CloseButton`.
Used by `.spectrum-CloseButton:not(:disabled):hover .spectrum-CloseButton-UIIcon`.
Defaults to `var(--mod-closebutton-icon-color-hover, var(--spectrum-closebutton-icon-color-hover))`, if not set.", + "control": "color" + }, + "highcontrast-closebutton-icon-color-focus": { + "value": "var(--mod-closebutton-icon-color-focus, var(--spectrum-closebutton-icon-color-focus))", + "description": "Defined in `.spectrum-CloseButton`.
Used by `.spectrum-CloseButton.is-keyboardFocused:not(:disabled) .spectrum-CloseButton-UIIcon, .spectrum-CloseButton:not(:disabled):focus-visible .spectrum-CloseButton-UIIcon`, `.spectrum-CloseButton.is-focused:not(:disabled) .spectrum-CloseButton-UIIcon, .spectrum-CloseButton:not(:disabled):focus .spectrum-CloseButton-UIIcon`.
Defaults to `var(--mod-closebutton-icon-color-focus, var(--spectrum-closebutton-icon-color-focus))`, if not set.", + "control": "color" + }, + "highcontrast-closebutton-background-color-default": { + "value": "var(--mod-closebutton-background-color-default, var(--spectrum-closebutton-background-color-default))", + "description": "Defined in `.spectrum-CloseButton`.
Used by `.spectrum-CloseButton:not(:disabled)`.
Defaults to `var(--mod-closebutton-background-color-default, var(--spectrum-closebutton-background-color-default))`, if not set.", + "control": "color" + }, + "highcontrast-closebutton-focus-indicator-color": { + "value": "var(--mod-closebutton-focus-indicator-color, var(--spectrum-closebutton-focus-indicator-color))", + "description": "Defined in `.spectrum-CloseButton`.
Used by `.spectrum-CloseButton:focus-visible:after`.
Defaults to `var(--mod-closebutton-focus-indicator-color, var(--spectrum-closebutton-focus-indicator-color))`, if not set.", + "control": "color" + }, + "highcontrast-closebutton-static-background-color-default": { + "value": "var(--mod-closebutton-static-background-color-default, var(--spectrum-closebutton-static-background-color-default))", + "description": "Defined in `.spectrum-CloseButton--staticBlack`, `.spectrum-CloseButton--staticWhite`.
Used by `.spectrum-CloseButton--staticBlack:not(:disabled), .spectrum-CloseButton--staticWhite:not(:disabled)`.
Defaults to `var(--mod-closebutton-static-background-color-default, var(--spectrum-closebutton-static-background-color-default))`, if not set.", + "control": "color" + }, + "highcontrast-closebutton-icon-color-default": { + "value": "var(--mod-closebutton-icon-color-default, var(--spectrum-closebutton-icon-color-default))", + "description": "Defined in `.spectrum-CloseButton--staticBlack`, `.spectrum-CloseButton--staticWhite`.
Used by `.spectrum-CloseButton--staticBlack:not(:disabled):hover .spectrum-CloseButton-UIIcon, .spectrum-CloseButton--staticWhite:not(:disabled):hover .spectrum-CloseButton-UIIcon`, `.spectrum-CloseButton--staticBlack:not(:disabled):active .spectrum-CloseButton-UIIcon, .spectrum-CloseButton--staticWhite:not(:disabled):active .spectrum-CloseButton-UIIcon`, `.spectrum-CloseButton--staticBlack.is-focused:not(:disabled) .spectrum-CloseButton-UIIcon, .spectrum-CloseButton--staticBlack.is-keyboardFocused:not(:disabled) .spectrum-CloseButton-UIIcon, .spectrum-CloseButton--staticBlack:not(:disabled):focus .spectrum-CloseButton-UIIcon, .spectrum-CloseButton--staticBlack:not(:disabled):focus-visible .spectrum-CloseButton-UIIcon, .spectrum-CloseButton--staticWhite.is-focused:not(:disabled) .spectrum-CloseButton-UIIcon, .spectrum-CloseButton--staticWhite.is-keyboardFocused:not(:disabled) .spectrum-CloseButton-UIIcon, .spectrum-CloseButton--staticWhite:not(:disabled):focus .spectrum-CloseButton-UIIcon, .spectrum-CloseButton--staticWhite:not(:disabled):focus-visible .spectrum-CloseButton-UIIcon`.
Defaults to `var(--mod-closebutton-icon-color-default, var(--spectrum-closebutton-icon-color-default))`, if not set.", + "control": "color" + } + } } diff --git a/components/closebutton/stories/closebutton.stories.js b/components/closebutton/stories/closebutton.stories.js index f048e3e23b0..9c0c7dfdf2c 100644 --- a/components/closebutton/stories/closebutton.stories.js +++ b/components/closebutton/stories/closebutton.stories.js @@ -1,11 +1,13 @@ import { Sizes } from "@spectrum-css/preview/decorators"; import { disableDefaultModes } from "@spectrum-css/preview/modes"; import { isDisabled, isFocused, isHovered, isKeyboardFocused, size, staticColor } from "@spectrum-css/preview/types"; -import metadata from "../dist/metadata.json"; -import packageJson from "../package.json"; import { CloseButtonGroup } from "./closebutton.test.js"; import { CloseButtonExample, Template } from "./template.js"; +// Local assets to render the component styles and structure +import metadata from "../dist/metadata.json"; +import packageJson from "../package.json"; + /** * Close button is used to close or dismiss its parent component. It is used inside of other components such * as [toast](?path=/docs/components-toast--docs) and [action bar](?path=/docs/components-action-bar--docs). @@ -52,6 +54,7 @@ export default { }, packageJson, metadata, + cssprops: metadata.modifiers, }, }; @@ -135,7 +138,6 @@ StaticBlack.parameters = { chromatic: { disableSnapshot: true }, }; - // ********* VRT ONLY ********* // export const WithForcedColors = CloseButtonGroup.bind({}); WithForcedColors.tags = ["!autodocs", "!dev"]; diff --git a/components/closebutton/stories/template.js b/components/closebutton/stories/template.js index 644ce705f62..d7d54e207e2 100644 --- a/components/closebutton/stories/template.js +++ b/components/closebutton/stories/template.js @@ -12,6 +12,7 @@ import "../themes/express.css"; export const Template = ({ rootClass = "spectrum-CloseButton", + id = getRandomId("close-button"), size = "m", iconSize = "regular", label = "Close", @@ -21,7 +22,6 @@ export const Template = ({ isFocused = false, isKeyboardFocused = false, customClasses = [], - id = getRandomId("closebutton"), onclick, } = {}, context = {}) => { return html` diff --git a/components/coachindicator/dist/metadata.json b/components/coachindicator/dist/metadata.json index 9714f9f1ed1..8f902d4cd26 100644 --- a/components/coachindicator/dist/metadata.json +++ b/components/coachindicator/dist/metadata.json @@ -15,52 +15,227 @@ "50%", "to" ], - "modifiers": [ - "--mod-coach-animation-indicator-ring-center-delay-multiple", - "--mod-coach-animation-indicator-ring-duration", - "--mod-coach-animation-indicator-ring-outer-delay-multiple", - "--mod-coach-indicator-animation-name", - "--mod-coach-indicator-block-size", - "--mod-coach-indicator-gap", - "--mod-coach-indicator-inline-size", - "--mod-coach-indicator-inner-animation-delay-multiple", - "--mod-coach-indicator-left", - "--mod-coach-indicator-min-block-size", - "--mod-coach-indicator-min-inline-size", - "--mod-coach-indicator-quiet-animation-ring-inner-delay-multiple", - "--mod-coach-indicator-quiet-ring-diameter", - "--mod-coach-indicator-ring-block-size", - "--mod-coach-indicator-ring-border-size", - "--mod-coach-indicator-ring-dark-color", - "--mod-coach-indicator-ring-default-color", - "--mod-coach-indicator-ring-diameter", - "--mod-coach-indicator-ring-inline-size", - "--mod-coach-indicator-ring-light-color", - "--mod-coach-indicator-top" - ], - "component": [ - "--spectrum-coach-indicator-animation-keyframe-scale-initial", - "--spectrum-coach-indicator-animation-ring-inner-delay-multiple", - "--spectrum-coach-indicator-block-size", - "--spectrum-coach-indicator-gap", - "--spectrum-coach-indicator-inline-size", - "--spectrum-coach-indicator-min-block-size", - "--spectrum-coach-indicator-min-inline-size", - "--spectrum-coach-indicator-quiet-ring-diameter", - "--spectrum-coach-indicator-ring-border-size", - "--spectrum-coach-indicator-ring-default-color", - "--spectrum-coach-indicator-ring-diameter", - "--spectrum-coach-indicator-ring-diameter-size", - "--spectrum-coach-indicator-sizing-multiple" - ], - "global": [ - "--spectrum-animation-duration-6000", - "--spectrum-black", - "--spectrum-border-width-200", - "--spectrum-coach-animation-indicator-ring-duration", - "--spectrum-white" - ], - "system-theme": [], - "passthroughs": [], - "high-contrast": [] + "modifiers": { + "mod-coach-indicator-ring-diameter": { + "value": "var(--spectrum-coach-indicator-ring-diameter)", + "description": "Used by `--spectrum-coach-indicator-ring-diameter-size`.
Defaults to `var(--spectrum-coach-indicator-ring-diameter)`, if not set.", + "control": "text", + "category": "Modifier" + }, + "mod-coach-indicator-inline-size": { + "value": "var(--spectrum-coach-indicator-min-inline-size)", + "description": "Used by `--spectrum-coach-indicator-inline-size`.
Defaults to `var(--spectrum-coach-indicator-min-inline-size)`, if not set.", + "control": "text", + "category": "Modifier" + }, + "mod-coach-indicator-block-size": { + "value": "var(--spectrum-coach-indicator-min-block-size)", + "description": "Used by `--spectrum-coach-indicator-block-size`.
Defaults to `var(--spectrum-coach-indicator-min-block-size)`, if not set.", + "control": "text", + "category": "Modifier" + }, + "mod-coach-indicator-inner-animation-delay-multiple": { + "description": "Used by `--spectrum-coach-indicator-animation-ring-inner-delay-multiple`.", + "control": "text", + "category": "Modifier" + }, + "mod-coach-indicator-gap": { + "value": "var(--spectrum-coach-indicator-gap)", + "description": "Used by `.spectrum-CoachIndicator`.
Defaults to `var(--spectrum-coach-indicator-gap)`, if not set.", + "control": "text", + "category": "Modifier" + }, + "mod-coach-indicator-min-inline-size": { + "value": "var(--spectrum-coach-indicator-min-inline-size)", + "description": "Used by `.spectrum-CoachIndicator`.
Defaults to `var(--spectrum-coach-indicator-min-inline-size)`, if not set.", + "control": "text", + "category": "Modifier" + }, + "mod-coach-indicator-min-block-size": { + "value": "var(--spectrum-coach-indicator-min-block-size)", + "description": "Used by `.spectrum-CoachIndicator`.
Defaults to `var(--spectrum-coach-indicator-min-block-size)`, if not set.", + "control": "text", + "category": "Modifier" + }, + "mod-coach-indicator-quiet-ring-diameter": { + "value": "var(--spectrum-coach-indicator-quiet-ring-diameter)", + "description": "Used by `--spectrum-coach-indicator-ring-diameter-size`.
Defaults to `var(--spectrum-coach-indicator-quiet-ring-diameter)`, if not set.", + "control": "text", + "category": "Modifier" + }, + "mod-coach-indicator-quiet-animation-ring-inner-delay-multiple": { + "description": "Used by `--spectrum-coach-indicator-animation-ring-inner-delay-multiple`.", + "control": "text", + "category": "Modifier" + }, + "mod-coach-indicator-ring-light-color": { + "value": "light-dark(rgb(255, 255, 255), rgb(255, 255, 255))", + "description": "Used by `--spectrum-coach-indicator-ring-default-color`.
Defaults to `var(--spectrum-white)`, if not set.", + "control": "color", + "category": "Modifier" + }, + "mod-coach-indicator-ring-dark-color": { + "value": "rgb(0, 0, 0)", + "description": "Used by `--spectrum-coach-indicator-ring-default-color`.
Defaults to `var(--spectrum-black)`, if not set.", + "control": "color", + "category": "Modifier" + }, + "mod-coach-indicator-ring-border-size": { + "value": "var(--spectrum-coach-indicator-ring-border-size)", + "description": "Used by `.spectrum-CoachIndicator-ring`.
Defaults to `var(--spectrum-coach-indicator-ring-border-size)`, if not set.", + "control": "text", + "category": "Modifier" + }, + "mod-coach-indicator-ring-default-color": { + "value": "var(--spectrum-coach-indicator-ring-default-color)", + "description": "Used by `.spectrum-CoachIndicator-ring`.
Defaults to `var(--spectrum-coach-indicator-ring-default-color)`, if not set.", + "control": "color", + "category": "Modifier" + }, + "mod-coach-indicator-top": { + "value": "calc(var(--spectrum-coach-indicator-block-size) / 3 - var(--spectrum-coach-indicator-ring-border-size))", + "description": "Used by `.spectrum-CoachIndicator-ring`.
Defaults to `calc(var(--spectrum-coach-indicator-block-size) / 3 - var(--spectrum-coach-indicator-ring-border-size))`, if not set.", + "control": "text", + "category": "Modifier" + }, + "mod-coach-indicator-left": { + "value": "calc(var(--spectrum-coach-indicator-inline-size) / 3 - var(--spectrum-coach-indicator-ring-border-size))", + "description": "Used by `.spectrum-CoachIndicator-ring`.
Defaults to `calc(var(--spectrum-coach-indicator-inline-size) / 3 - var(--spectrum-coach-indicator-ring-border-size))`, if not set.", + "control": "text", + "category": "Modifier" + }, + "mod-coach-indicator-ring-inline-size": { + "value": "var(--spectrum-coach-indicator-ring-diameter-size)", + "description": "Used by `.spectrum-CoachIndicator-ring`.
Defaults to `var(--spectrum-coach-indicator-ring-diameter-size)`, if not set.", + "control": "text", + "category": "Modifier" + }, + "mod-coach-indicator-ring-block-size": { + "value": "var(--spectrum-coach-indicator-ring-diameter-size)", + "description": "Used by `.spectrum-CoachIndicator-ring`.
Defaults to `var(--spectrum-coach-indicator-ring-diameter-size)`, if not set.", + "control": "text", + "category": "Modifier" + }, + "mod-coach-indicator-animation-name": { + "description": "Used by `.spectrum-CoachIndicator-ring`.", + "control": "text", + "category": "Modifier" + }, + "mod-coach-animation-indicator-ring-duration": { + "value": "var(--spectrum-coach-animation-indicator-ring-duration)", + "description": "Used by `.spectrum-CoachIndicator-ring`, `.spectrum-CoachIndicator-ring:first-child`, `.spectrum-CoachIndicator-ring:nth-child(2)`, `.spectrum-CoachIndicator-ring:nth-child(3)`.
Defaults to `var(--spectrum-coach-animation-indicator-ring-duration)`, if not set.", + "control": "text", + "category": "Modifier" + }, + "mod-coach-animation-indicator-ring-center-delay-multiple": { + "description": "Used by `.spectrum-CoachIndicator-ring:nth-child(2)`.", + "control": "text", + "category": "Modifier" + }, + "mod-coach-animation-indicator-ring-outer-delay-multiple": { + "description": "Used by `.spectrum-CoachIndicator-ring:nth-child(3)`.", + "control": "text", + "category": "Modifier" + } + }, + "component": { + "spectrum-coach-indicator-ring-border-size": { + "description": "Defined in `.spectrum-CoachIndicator`.
Used by `.spectrum-CoachIndicator-ring`.", + "control": "text", + "category": "Component" + }, + "spectrum-coach-indicator-sizing-multiple": { + "description": "Defined in `.spectrum-CoachIndicator`, `.spectrum-CoachIndicator.spectrum-CoachIndicator--quiet`.
Used by `--spectrum-coach-indicator-min-inline-size`, `--spectrum-coach-indicator-min-block-size`.", + "control": "text", + "category": "Component" + }, + "spectrum-coach-indicator-ring-diameter-size": { + "description": "Defined in `.spectrum-CoachIndicator`, `.spectrum-CoachIndicator.spectrum-CoachIndicator--quiet`.
Used by `--spectrum-coach-indicator-min-inline-size`, `--spectrum-coach-indicator-min-block-size`, `.spectrum-CoachIndicator-ring`.", + "control": "text", + "category": "Component" + }, + "spectrum-coach-indicator-ring-diameter": { + "description": "Used by `--spectrum-coach-indicator-ring-diameter-size`.", + "control": "text", + "category": "Component" + }, + "spectrum-coach-indicator-min-inline-size": { + "description": "Defined in `.spectrum-CoachIndicator`.
Used by `--spectrum-coach-indicator-inline-size`, `.spectrum-CoachIndicator`.", + "control": "text", + "category": "Component" + }, + "spectrum-coach-indicator-min-block-size": { + "description": "Defined in `.spectrum-CoachIndicator`.
Used by `--spectrum-coach-indicator-block-size`, `.spectrum-CoachIndicator`.", + "control": "text", + "category": "Component" + }, + "spectrum-coach-indicator-inline-size": { + "description": "Defined in `.spectrum-CoachIndicator`.
Used by `.spectrum-CoachIndicator`, `.spectrum-CoachIndicator-ring`.", + "control": "text", + "category": "Component" + }, + "spectrum-coach-indicator-block-size": { + "description": "Defined in `.spectrum-CoachIndicator`.
Used by `.spectrum-CoachIndicator`, `.spectrum-CoachIndicator-ring`.", + "control": "text", + "category": "Component" + }, + "spectrum-coach-indicator-animation-keyframe-scale-initial": { + "description": "Defined in `.spectrum-CoachIndicator`, `.spectrum-CoachIndicator.spectrum-CoachIndicator--quiet`.
Used by `0%`.", + "control": "text", + "category": "Component" + }, + "spectrum-coach-indicator-animation-ring-inner-delay-multiple": { + "description": "Defined in `.spectrum-CoachIndicator`, `.spectrum-CoachIndicator.spectrum-CoachIndicator--quiet`.
Used by `.spectrum-CoachIndicator-ring:first-child`.", + "control": "text", + "category": "Component" + }, + "spectrum-coach-indicator-gap": { + "description": "Used by `.spectrum-CoachIndicator`.", + "control": "text", + "category": "Component" + }, + "spectrum-coach-indicator-quiet-ring-diameter": { + "description": "Used by `--spectrum-coach-indicator-ring-diameter-size`.", + "control": "text", + "category": "Component" + }, + "spectrum-coach-indicator-ring-default-color": { + "description": "Defined in `.spectrum-CoachIndicator.spectrum-CoachIndicator--light`, `.spectrum-CoachIndicator.spectrum-CoachIndicator--dark`, `.spectrum-CoachIndicator.spectrum-CoachIndicator--staticWhite`, `.spectrum-CoachIndicator.spectrum-CoachIndicator--staticBlack`.
Used by `.spectrum-CoachIndicator-ring`.", + "control": "color", + "category": "Component" + } + }, + "global": { + "spectrum-border-width-200": { + "value": "2px", + "description": "Used by `--spectrum-coach-indicator-ring-border-size`.", + "control": "text", + "category": "Global" + }, + "spectrum-coach-animation-indicator-ring-duration": { + "description": "Defined in `.spectrum-CoachIndicator`.
Used by `.spectrum-CoachIndicator-ring`, `.spectrum-CoachIndicator-ring:first-child`, `.spectrum-CoachIndicator-ring:nth-child(2)`, `.spectrum-CoachIndicator-ring:nth-child(3)`.", + "control": "text", + "category": "Global" + }, + "spectrum-animation-duration-6000": { + "description": "Used by `--spectrum-coach-animation-indicator-ring-duration`.", + "control": "text", + "category": "Global" + }, + "spectrum-white": { + "value": "light-dark(rgb(255, 255, 255), rgb(255, 255, 255))", + "description": "Used by `--spectrum-coach-indicator-ring-default-color`.", + "control": "text", + "category": "Global" + }, + "spectrum-black": { + "value": "rgb(0, 0, 0)", + "description": "Used by `--spectrum-coach-indicator-ring-default-color`.", + "control": "text", + "category": "Global" + } + }, + "system-theme": {}, + "passthroughs": {}, + "high-contrast": {} } diff --git a/components/coachindicator/stories/coachindicator.stories.js b/components/coachindicator/stories/coachindicator.stories.js index f206b3bef9a..1498c7d5640 100644 --- a/components/coachindicator/stories/coachindicator.stories.js +++ b/components/coachindicator/stories/coachindicator.stories.js @@ -1,10 +1,12 @@ import { disableDefaultModes } from "@spectrum-css/preview/modes"; import { isQuiet, staticColor } from "@spectrum-css/preview/types"; -import metadata from "../dist/metadata.json"; -import packageJson from "../package.json"; import { CoachIndicatorGroup } from "./coachindicator.test.js"; import { Template } from "./template.js"; +// Local assets to render the component styles and structure +import metadata from "../dist/metadata.json"; +import packageJson from "../package.json"; + /** * The coach indicator component can be used to bring added attention to specific parts of a page. * @@ -30,6 +32,7 @@ export default { }, packageJson, metadata, + cssprops: metadata.modifiers, }, }; diff --git a/components/coachmark/dist/metadata.json b/components/coachmark/dist/metadata.json index 8bc036d5fca..8579241b166 100644 --- a/components/coachmark/dist/metadata.json +++ b/components/coachmark/dist/metadata.json @@ -15,80 +15,385 @@ ".spectrum-CoachMark-step", ".spectrum-CoachMark-title" ], - "modifiers": [ - "--mod-coachmark-body-to-footer", - "--mod-coachmark-border-radius", - "--mod-coachmark-border-size", - "--mod-coachmark-content-font-color", - "--mod-coachmark-content-font-family", - "--mod-coachmark-content-font-size", - "--mod-coachmark-content-font-style", - "--mod-coachmark-content-font-weight", - "--mod-coachmark-content-line-height", - "--mod-coachmark-header-to-body", - "--mod-coachmark-heading-to-action-button", - "--mod-coachmark-max-width", - "--mod-coachmark-media-height", - "--mod-coachmark-media-min-height", - "--mod-coachmark-min-width", - "--mod-coachmark-padding", - "--mod-coachmark-step-color", - "--mod-coachmark-step-font-size", - "--mod-coachmark-step-font-style", - "--mod-coachmark-step-text-font-weight", - "--mod-coachmark-step-text-line-height", - "--mod-coachmark-step-to-bottom", - "--mod-coachmark-title-color", - "--mod-coachmark-title-font-family", - "--mod-coachmark-title-font-size", - "--mod-coachmark-title-font-style", - "--mod-coachmark-title-text-font-weight", - "--mod-coachmark-title-text-line-height", - "--mod-coachmark-width" - ], - "component": [ - "--spectrum-coach-mark-body-size", - "--spectrum-coach-mark-edge-to-content", - "--spectrum-coach-mark-maximum-width", - "--spectrum-coach-mark-media-height", - "--spectrum-coach-mark-media-minimum-height", - "--spectrum-coach-mark-minimum-width", - "--spectrum-coach-mark-pagination-body-size", - "--spectrum-coach-mark-pagination-color", - "--spectrum-coach-mark-pagination-text-to-bottom-edge", - "--spectrum-coach-mark-title-size", - "--spectrum-coach-mark-width", - "--spectrum-coachmark-border-radius", - "--spectrum-coachmark-border-size", - "--spectrum-coachmark-buttongroup-display", - "--spectrum-coachmark-buttongroup-mobile-display", - "--spectrum-coachmark-menu-display", - "--spectrum-coachmark-menu-mobile-display" - ], - "global": [ - "--spectrum-body-color", - "--spectrum-body-line-height", - "--spectrum-body-sans-serif-font-style", - "--spectrum-body-sans-serif-font-weight", - "--spectrum-border-width-100", - "--spectrum-corner-radius-100", - "--spectrum-heading-color", - "--spectrum-heading-line-height", - "--spectrum-heading-sans-serif-font-weight", - "--spectrum-heading-serif-font-style", - "--spectrum-sans-serif-font", - "--spectrum-spacing-100", - "--spectrum-spacing-200", - "--spectrum-spacing-300" - ], - "system-theme": [], - "passthroughs": [ - "--mod-button-edge-to-visual-only", - "--mod-buttongroup-justify-content", - "--mod-buttongroup-spacing", - "--mod-popover-border-width", - "--mod-popover-content-area-spacing-vertical", - "--mod-popover-corner-radius" - ], - "high-contrast": [] + "modifiers": { + "mod-coachmark-border-size": { + "value": "var(--mod-popover-border-width)", + "description": "Used by `--spectrum-coachmark-border-size`.
Defaults to `var(--mod-popover-border-width)`, if not set.", + "control": "text", + "category": "Modifier" + }, + "mod-coachmark-border-radius": { + "value": "var(--mod-popover-corner-radius)", + "description": "Used by `--spectrum-coachmark-border-radius`.
Defaults to `var(--mod-popover-corner-radius)`, if not set.", + "control": "text", + "category": "Modifier" + }, + "mod-coachmark-min-width": { + "value": "296px", + "description": "Used by `.spectrum-CoachMark`.
Defaults to `var(--spectrum-coach-mark-minimum-width)`, if not set.", + "control": "text", + "category": "Modifier" + }, + "mod-coachmark-max-width": { + "value": "380px", + "description": "Used by `.spectrum-CoachMark`.
Defaults to `var(--spectrum-coach-mark-maximum-width)`, if not set.", + "control": "text", + "category": "Modifier" + }, + "mod-coachmark-width": { + "value": "296px", + "description": "Used by `.spectrum-CoachMark`, `.spectrum-CoachMark-image-wrapper`.
Defaults to `var(--spectrum-coach-mark-width)`, if not set.", + "control": "text", + "category": "Modifier" + }, + "mod-coachmark-media-height": { + "value": "222px", + "description": "Used by `.spectrum-CoachMark-image-wrapper`.
Defaults to `var(--spectrum-coach-mark-media-height)`, if not set.", + "control": "text", + "category": "Modifier" + }, + "mod-coachmark-media-min-height": { + "value": "166px", + "description": "Used by `.spectrum-CoachMark-image-wrapper`.
Defaults to `var(--spectrum-coach-mark-media-minimum-height)`, if not set.", + "control": "text", + "category": "Modifier" + }, + "mod-coachmark-padding": { + "value": "24px", + "description": "Used by `.spectrum-CoachMark-content, .spectrum-CoachMark-footer, .spectrum-CoachMark-header`, `.spectrum-CoachMark-header`, `.spectrum-CoachMark-footer`, `.spectrum-CoachMark-step`.
Defaults to `var(--spectrum-coach-mark-edge-to-content)`, if not set.", + "control": "text", + "category": "Modifier" + }, + "mod-coachmark-header-to-body": { + "value": "12px", + "description": "Used by `.spectrum-CoachMark-header`.
Defaults to `var(--spectrum-spacing-200)`, if not set.", + "control": "text", + "category": "Modifier" + }, + "mod-coachmark-title-color": { + "value": "var(--spectrum-gray-900)", + "description": "Used by `.spectrum-CoachMark-title`.
Defaults to `var(--spectrum-heading-color)`, if not set.", + "control": "color", + "category": "Modifier" + }, + "mod-coachmark-title-font-size": { + "value": "var(--spectrum-heading-size-xxs)", + "description": "Used by `.spectrum-CoachMark-title`.
Defaults to `var(--spectrum-coach-mark-title-size)`, if not set.", + "control": "text", + "category": "Modifier" + }, + "mod-coachmark-title-text-font-weight": { + "value": "700", + "description": "Used by `.spectrum-CoachMark-title`.
Defaults to `var(--spectrum-heading-sans-serif-font-weight)`, if not set.", + "control": "text", + "category": "Modifier" + }, + "mod-coachmark-title-font-family": { + "value": "var(--spectrum-sans-serif-font)", + "description": "Used by `.spectrum-CoachMark-title`.
Defaults to `var(--spectrum-sans-serif-font)`, if not set.", + "control": "text", + "category": "Modifier" + }, + "mod-coachmark-title-font-style": { + "value": "normal", + "description": "Used by `.spectrum-CoachMark-title`.
Defaults to `var(--spectrum-heading-serif-font-style)`, if not set.", + "control": "text", + "category": "Modifier" + }, + "mod-coachmark-title-text-line-height": { + "value": "1.3", + "description": "Used by `.spectrum-CoachMark-title`.
Defaults to `var(--spectrum-heading-line-height)`, if not set.", + "control": "text", + "category": "Modifier" + }, + "mod-coachmark-heading-to-action-button": { + "value": "16px", + "description": "Used by `.spectrum-CoachMark-action-menu`.
Defaults to `var(--spectrum-spacing-300)`, if not set.", + "control": "text", + "category": "Modifier" + }, + "mod-coachmark-body-to-footer": { + "value": "16px", + "description": "Used by `.spectrum-CoachMark-content`.
Defaults to `var(--spectrum-spacing-300)`, if not set.", + "control": "text", + "category": "Modifier" + }, + "mod-coachmark-content-font-color": { + "value": "var(--spectrum-gray-800)", + "description": "Used by `.spectrum-CoachMark-content`.
Defaults to `var(--spectrum-body-color)`, if not set.", + "control": "color", + "category": "Modifier" + }, + "mod-coachmark-content-font-size": { + "value": "var(--spectrum-body-size-xs)", + "description": "Used by `.spectrum-CoachMark-content`.
Defaults to `var(--spectrum-coach-mark-body-size)`, if not set.", + "control": "text", + "category": "Modifier" + }, + "mod-coachmark-content-font-weight": { + "value": "400", + "description": "Used by `.spectrum-CoachMark-content`.
Defaults to `var(--spectrum-body-sans-serif-font-weight)`, if not set.", + "control": "text", + "category": "Modifier" + }, + "mod-coachmark-content-font-family": { + "value": "var(--spectrum-sans-serif-font)", + "description": "Used by `.spectrum-CoachMark-content`.
Defaults to `var(--spectrum-sans-serif-font)`, if not set.", + "control": "text", + "category": "Modifier" + }, + "mod-coachmark-content-font-style": { + "value": "normal", + "description": "Used by `.spectrum-CoachMark-content`.
Defaults to `var(--spectrum-body-sans-serif-font-style)`, if not set.", + "control": "text", + "category": "Modifier" + }, + "mod-coachmark-content-line-height": { + "value": "1.5", + "description": "Used by `.spectrum-CoachMark-content`.
Defaults to `var(--spectrum-body-line-height)`, if not set.", + "control": "text", + "category": "Modifier" + }, + "mod-coachmark-step-to-bottom": { + "value": "33px", + "description": "Used by `.spectrum-CoachMark-step`.
Defaults to `var(--spectrum-coach-mark-pagination-text-to-bottom-edge)`, if not set.", + "control": "text", + "category": "Modifier" + }, + "mod-coachmark-step-color": { + "value": "var(--spectrum-gray-600)", + "description": "Used by `.spectrum-CoachMark-step`.
Defaults to `var(--spectrum-coach-mark-pagination-color)`, if not set.", + "control": "color", + "category": "Modifier" + }, + "mod-coachmark-step-font-size": { + "value": "var(--spectrum-body-size-xs)", + "description": "Used by `.spectrum-CoachMark-step`.
Defaults to `var(--spectrum-coach-mark-pagination-body-size)`, if not set.", + "control": "text", + "category": "Modifier" + }, + "mod-coachmark-step-text-font-weight": { + "value": "400", + "description": "Used by `.spectrum-CoachMark-step`.
Defaults to `var(--spectrum-body-sans-serif-font-weight)`, if not set.", + "control": "text", + "category": "Modifier" + }, + "mod-coachmark-step-font-style": { + "value": "normal", + "description": "Used by `.spectrum-CoachMark-step`.
Defaults to `var(--spectrum-body-sans-serif-font-style)`, if not set.", + "control": "text", + "category": "Modifier" + }, + "mod-coachmark-step-text-line-height": { + "value": "1.5", + "description": "Used by `.spectrum-CoachMark-step`.
Defaults to `var(--spectrum-body-line-height)`, if not set.", + "control": "text", + "category": "Modifier" + } + }, + "component": { + "spectrum-coachmark-border-size": { + "description": "Defined in `.spectrum-CoachMark`.
Used by `.spectrum-CoachMark-image-wrapper`, `.spectrum-CoachMark-image`.", + "control": "text", + "category": "Component" + }, + "spectrum-coachmark-border-radius": { + "description": "Defined in `.spectrum-CoachMark`.
Used by `.spectrum-CoachMark-image`.", + "control": "text", + "category": "Component" + }, + "spectrum-coach-mark-minimum-width": { + "value": "296px", + "description": "Used by `.spectrum-CoachMark`.", + "control": "text", + "category": "Component" + }, + "spectrum-coach-mark-maximum-width": { + "value": "380px", + "description": "Used by `.spectrum-CoachMark`.", + "control": "text", + "category": "Component" + }, + "spectrum-coach-mark-width": { + "value": "296px", + "description": "Used by `.spectrum-CoachMark`, `.spectrum-CoachMark-image-wrapper`.", + "control": "text", + "category": "Component" + }, + "spectrum-coach-mark-media-height": { + "value": "222px", + "description": "Used by `.spectrum-CoachMark-image-wrapper`.", + "control": "text", + "category": "Component" + }, + "spectrum-coach-mark-media-minimum-height": { + "value": "166px", + "description": "Used by `.spectrum-CoachMark-image-wrapper`.", + "control": "text", + "category": "Component" + }, + "spectrum-coach-mark-edge-to-content": { + "value": "24px", + "description": "Used by `.spectrum-CoachMark-content, .spectrum-CoachMark-footer, .spectrum-CoachMark-header`, `.spectrum-CoachMark-header`, `.spectrum-CoachMark-footer`, `.spectrum-CoachMark-step`.", + "control": "text", + "category": "Component" + }, + "spectrum-coach-mark-title-size": { + "value": "var(--spectrum-heading-size-xxs)", + "description": "Used by `.spectrum-CoachMark-title`.", + "control": "text", + "category": "Component" + }, + "spectrum-coachmark-menu-display": { + "description": "Defined in `.spectrum-CoachMark-menu--mobile`.
Used by `.spectrum-CoachMark-menu`.", + "control": "text", + "category": "Component" + }, + "spectrum-coachmark-menu-mobile-display": { + "description": "Used by `--spectrum-coachmark-menu-display`.", + "control": "text", + "category": "Component" + }, + "spectrum-coach-mark-body-size": { + "value": "var(--spectrum-body-size-xs)", + "description": "Used by `.spectrum-CoachMark-content`.", + "control": "text", + "category": "Component" + }, + "spectrum-coach-mark-pagination-text-to-bottom-edge": { + "value": "33px", + "description": "Used by `.spectrum-CoachMark-step`.", + "control": "text", + "category": "Component" + }, + "spectrum-coach-mark-pagination-color": { + "value": "var(--spectrum-gray-600)", + "description": "Used by `.spectrum-CoachMark-step`.", + "control": "color", + "category": "Component" + }, + "spectrum-coach-mark-pagination-body-size": { + "value": "var(--spectrum-body-size-xs)", + "description": "Used by `.spectrum-CoachMark-step`.", + "control": "text", + "category": "Component" + }, + "spectrum-coachmark-buttongroup-display": { + "description": "Defined in `.spectrum-CoachMark-buttongroup--mobile`.
Used by `.spectrum-CoachMark-buttongroup`.", + "control": "text", + "category": "Component" + }, + "spectrum-coachmark-buttongroup-mobile-display": { + "description": "Used by `--spectrum-coachmark-buttongroup-display`.", + "control": "text", + "category": "Component" + } + }, + "global": { + "spectrum-border-width-100": { + "value": "1px", + "description": "Used by `--mod-popover-border-width`.", + "control": "text", + "category": "Global" + }, + "spectrum-corner-radius-100": { + "value": "8px", + "description": "Used by `--mod-popover-corner-radius`.", + "control": "text", + "category": "Global" + }, + "spectrum-spacing-200": { + "value": "12px", + "description": "Used by `.spectrum-CoachMark-header`.", + "control": "text", + "category": "Global" + }, + "spectrum-heading-color": { + "value": "var(--spectrum-gray-900)", + "description": "Used by `.spectrum-CoachMark-title`.", + "control": "color", + "category": "Global" + }, + "spectrum-heading-sans-serif-font-weight": { + "value": "700", + "description": "Used by `.spectrum-CoachMark-title`.", + "control": "text", + "category": "Global" + }, + "spectrum-sans-serif-font": { + "description": "Used by `.spectrum-CoachMark-title`, `.spectrum-CoachMark-content`, `.spectrum-CoachMark-step`.", + "control": "text", + "category": "Global" + }, + "spectrum-heading-serif-font-style": { + "value": "normal", + "description": "Used by `.spectrum-CoachMark-title`.", + "control": "text", + "category": "Global" + }, + "spectrum-heading-line-height": { + "value": "1.3", + "description": "Used by `.spectrum-CoachMark-title`.", + "control": "text", + "category": "Global" + }, + "spectrum-spacing-300": { + "value": "16px", + "description": "Used by `.spectrum-CoachMark-action-menu`, `.spectrum-CoachMark-content`.", + "control": "text", + "category": "Global" + }, + "spectrum-body-color": { + "value": "var(--spectrum-gray-800)", + "description": "Used by `.spectrum-CoachMark-content`.", + "control": "color", + "category": "Global" + }, + "spectrum-body-sans-serif-font-weight": { + "value": "400", + "description": "Used by `.spectrum-CoachMark-content`, `.spectrum-CoachMark-step`.", + "control": "text", + "category": "Global" + }, + "spectrum-body-sans-serif-font-style": { + "value": "normal", + "description": "Used by `.spectrum-CoachMark-content`, `.spectrum-CoachMark-step`.", + "control": "text", + "category": "Global" + }, + "spectrum-body-line-height": { + "value": "1.5", + "description": "Used by `.spectrum-CoachMark-content`, `.spectrum-CoachMark-step`.", + "control": "text", + "category": "Global" + }, + "spectrum-spacing-100": { + "value": "8px", + "description": "Used by `--mod-buttongroup-spacing`.", + "control": "text", + "category": "Global" + } + }, + "system-theme": {}, + "passthroughs": { + "mod-popover-border-width": { + "category": "Passthrough" + }, + "mod-popover-corner-radius": { + "category": "Passthrough" + }, + "mod-buttongroup-justify-content": { + "category": "Passthrough" + }, + "mod-popover-content-area-spacing-vertical": { + "category": "Passthrough" + }, + "mod-button-edge-to-visual-only": { + "category": "Passthrough" + }, + "mod-buttongroup-spacing": { + "category": "Passthrough" + } + }, + "high-contrast": {} } diff --git a/components/coachmark/stories/coachmark.stories.js b/components/coachmark/stories/coachmark.stories.js index e13b70fce24..b061b8dac58 100644 --- a/components/coachmark/stories/coachmark.stories.js +++ b/components/coachmark/stories/coachmark.stories.js @@ -1,11 +1,13 @@ import { default as ActionButton } from "@spectrum-css/actionbutton/stories/actionbutton.stories.js"; import { default as Menu } from "@spectrum-css/menu/stories/menu.stories.js"; import { disableDefaultModes } from "@spectrum-css/preview/modes"; -import metadata from "../dist/metadata.json"; -import packageJson from "../package.json"; import { CoachMarkGroup } from "./coachmark.test.js"; import { CoachmarkMenuStatesTemplate, Template } from "./template.js"; +// Local assets to render the component styles and structure +import metadata from "../dist/metadata.json"; +import packageJson from "../package.json"; + /** * The coach mark component can be used to bring added attention to specific parts of a page, like during a tour. It is a separate component from [the coach indicator](/docs/components-coach-indicator--docs) and similar to [a popover](/docs/components-purpose--docs). */ @@ -60,6 +62,7 @@ export default { }, packageJson, metadata, + cssprops: metadata.modifiers, docs: { story: { height: "300px", @@ -69,6 +72,7 @@ export default { }; export const Default = CoachMarkGroup.bind({}); +Default.title = "Standard"; Default.tags = ["!autodocs"]; Default.args = {}; diff --git a/components/colorarea/dist/metadata.json b/components/colorarea/dist/metadata.json index ff86d1c0045..3ae0a3279c8 100644 --- a/components/colorarea/dist/metadata.json +++ b/components/colorarea/dist/metadata.json @@ -12,31 +12,123 @@ ".spectrum-ColorHandle-color", "[dir=\"rtl\"] .spectrum-ColorArea-handle" ], - "modifiers": [ - "--mod-colorarea-border-color", - "--mod-colorarea-border-radius", - "--mod-colorarea-border-width", - "--mod-colorarea-disabled-background-color", - "--mod-colorarea-height", - "--mod-colorarea-min-height", - "--mod-colorarea-min-width", - "--mod-colorarea-width" - ], - "component": [ - "--spectrum-color-area-border-rounding", - "--spectrum-color-area-border-width", - "--spectrum-color-area-height", - "--spectrum-color-area-minimum-height", - "--spectrum-color-area-minimum-width", - "--spectrum-color-area-width", - "--spectrum-colorarea-border-color" - ], - "global": ["--spectrum-disabled-background-color"], - "system-theme": [], - "passthroughs": [], - "high-contrast": [ - "--highcontrast-colorarea-border-color", - "--highcontrast-colorarea-border-color-disabled", - "--highcontrast-colorarea-fill-color-disabled" - ] + "modifiers": { + "mod-colorarea-min-width": { + "value": "64px", + "description": "Used by `.spectrum-ColorArea`.
Defaults to `var(--spectrum-color-area-minimum-width)`, if not set.", + "control": "color", + "category": "Modifier" + }, + "mod-colorarea-min-height": { + "value": "64px", + "description": "Used by `.spectrum-ColorArea`.
Defaults to `var(--spectrum-color-area-minimum-height)`, if not set.", + "control": "color", + "category": "Modifier" + }, + "mod-colorarea-width": { + "value": "192px", + "description": "Used by `.spectrum-ColorArea`, `.spectrum-ColorArea-handle`.
Defaults to `var(--spectrum-color-area-width)`, if not set.", + "control": "color", + "category": "Modifier" + }, + "mod-colorarea-height": { + "value": "192px", + "description": "Used by `.spectrum-ColorArea`.
Defaults to `var(--spectrum-color-area-height)`, if not set.", + "control": "color", + "category": "Modifier" + }, + "mod-colorarea-border-radius": { + "value": "7px", + "description": "Used by `.spectrum-ColorArea`, `.spectrum-ColorArea-gradient`.
Defaults to `var(--spectrum-color-area-border-rounding)`, if not set.", + "control": "color", + "category": "Modifier" + }, + "mod-colorarea-border-width": { + "value": "1px", + "description": "Used by `.spectrum-ColorArea`, `.spectrum-ColorArea.is-disabled`.
Defaults to `var(--spectrum-color-area-border-width)`, if not set.", + "control": "color", + "category": "Modifier" + }, + "mod-colorarea-border-color": { + "value": "var(--spectrum-colorarea-border-color)", + "description": "Used by `.spectrum-ColorArea`.
Defaults to `var(--spectrum-colorarea-border-color)`, if not set.", + "control": "color", + "category": "Modifier" + }, + "mod-colorarea-disabled-background-color": { + "value": "var(--spectrum-gray-100)", + "description": "Used by `.spectrum-ColorArea.is-disabled`.
Defaults to `var(--spectrum-disabled-background-color)`, if not set.", + "control": "color", + "category": "Modifier" + } + }, + "component": { + "spectrum-colorarea-border-color": { + "description": "Defined in `.spectrum-ColorArea`.
Used by `.spectrum-ColorArea`.", + "control": "color", + "category": "Component" + }, + "spectrum-color-area-minimum-width": { + "value": "64px", + "description": "Used by `.spectrum-ColorArea`.", + "control": "color", + "category": "Component" + }, + "spectrum-color-area-minimum-height": { + "value": "64px", + "description": "Used by `.spectrum-ColorArea`.", + "control": "color", + "category": "Component" + }, + "spectrum-color-area-width": { + "value": "192px", + "description": "Used by `.spectrum-ColorArea`, `.spectrum-ColorArea-handle`.", + "control": "color", + "category": "Component" + }, + "spectrum-color-area-height": { + "value": "192px", + "description": "Used by `.spectrum-ColorArea`.", + "control": "color", + "category": "Component" + }, + "spectrum-color-area-border-rounding": { + "value": "7px", + "description": "Used by `.spectrum-ColorArea`, `.spectrum-ColorArea-gradient`.", + "control": "color", + "category": "Component" + }, + "spectrum-color-area-border-width": { + "value": "1px", + "description": "Used by `.spectrum-ColorArea`, `.spectrum-ColorArea.is-disabled`, `.spectrum-ColorArea-handle`.", + "control": "color", + "category": "Component" + } + }, + "global": { + "spectrum-disabled-background-color": { + "value": "var(--spectrum-gray-100)", + "description": "Used by `.spectrum-ColorArea.is-disabled`.", + "control": "color", + "category": "Global" + } + }, + "system-theme": {}, + "passthroughs": {}, + "high-contrast": { + "highcontrast-colorarea-border-color-disabled": { + "description": "Defined in `.spectrum-ColorArea`.
Used by `.spectrum-ColorArea.is-disabled`.", + "control": "color" + }, + "highcontrast-colorarea-border-color": { + "value": "var(--mod-colorarea-border-color, var(--spectrum-colorarea-border-color))", + "description": "Defined in `.spectrum-ColorArea`.
Used by `.spectrum-ColorArea`.
Defaults to `var(--mod-colorarea-border-color, var(--spectrum-colorarea-border-color))`, if not set.", + "control": "color" + }, + "highcontrast-colorarea-fill-color-disabled": { + "value": "var(--mod-colorarea-disabled-background-color, var(--spectrum-disabled-background-color))", + "description": "Defined in `.spectrum-ColorArea`.
Used by `.spectrum-ColorArea.is-disabled`.
Defaults to `var(--mod-colorarea-disabled-background-color, var(--spectrum-disabled-background-color))`, if not set.", + "control": "color" + } + } } diff --git a/components/colorarea/stories/colorarea.stories.js b/components/colorarea/stories/colorarea.stories.js index ec418649f05..2128f1d1408 100644 --- a/components/colorarea/stories/colorarea.stories.js +++ b/components/colorarea/stories/colorarea.stories.js @@ -1,10 +1,12 @@ import { disableDefaultModes } from "@spectrum-css/preview/modes"; import { isDisabled, isFocused } from "@spectrum-css/preview/types"; -import metadata from "../dist/metadata.json"; -import packageJson from "../package.json"; import { ColorAreaGroup } from "./colorarea.test.js"; import { Template } from "./template.js"; +// Local assets to render the component styles and structure +import metadata from "../dist/metadata.json"; +import packageJson from "../package.json"; + /** * The color area component allows users to visually select two properties of a color simultaneously. It's commonly used together with a [color slider](/docs/components-color-slider--docs) or [color wheel](/docs/components-color-wheel--docs). * @@ -49,6 +51,7 @@ export default { }, packageJson, metadata, + cssprops: metadata.modifiers, }, }; diff --git a/components/colorhandle/dist/metadata.json b/components/colorhandle/dist/metadata.json index 4d8589ac1c1..890cbbb3bc1 100644 --- a/components/colorhandle/dist/metadata.json +++ b/components/colorhandle/dist/metadata.json @@ -3,53 +3,212 @@ "selectors": [ ".spectrum-ColorHandle", ".spectrum-ColorHandle-inner", + ".spectrum-ColorHandle:after", + ".spectrum-ColorHandle:focus-visible", ".spectrum-ColorHandle.is-disabled", ".spectrum-ColorHandle.is-disabled .spectrum-ColorHandle-inner", - ".spectrum-ColorHandle.is-focused", - ".spectrum-ColorHandle:after", - ".spectrum-ColorHandle:focus-visible" - ], - "modifiers": [ - "--mod-colorhandle-animation-duration", - "--mod-colorhandle-animation-easing", - "--mod-colorhandle-border-color", - "--mod-colorhandle-border-color-disabled", - "--mod-colorhandle-border-width", - "--mod-colorhandle-fill-color-disabled", - "--mod-colorhandle-focused-size", - "--mod-colorhandle-hitarea-border-radius", - "--mod-colorhandle-hitarea-size", - "--mod-colorhandle-inner-border-color", - "--mod-colorhandle-inner-border-width", - "--mod-colorhandle-outer-border-color", - "--mod-colorhandle-outer-border-width", - "--mod-colorhandle-size" - ], - "component": [ - "--spectrum-color-handle-border-width", - "--spectrum-color-handle-inner-border-opacity", - "--spectrum-color-handle-inner-border-width", - "--spectrum-color-handle-outer-border-opacity", - "--spectrum-color-handle-outer-border-width", - "--spectrum-color-handle-size", - "--spectrum-color-handle-size-key-focus", - "--spectrum-colorhandle-inner-border-color", - "--spectrum-colorhandle-outer-border-color", - "--spectrum-colorhandle-outer-border-width" - ], - "global": [ - "--spectrum-animation-duration-100", - "--spectrum-black-rgb", - "--spectrum-color-control-track-width", - "--spectrum-disabled-background-color", - "--spectrum-disabled-content-color", - "--spectrum-picked-color", - "--spectrum-white" + ".spectrum-ColorHandle.is-focused" ], - "system-theme": [], - "passthroughs": ["--mod-opacity-checkerboard-position"], - "high-contrast": [ - "--highcontrast-colorhandle-border-color-disabled", - "--highcontrast-colorhandle-fill-color-disabled" - ] + "modifiers": { + "mod-colorhandle-size": { + "value": "16px", + "description": "Used by `.spectrum-ColorHandle`, `.spectrum-ColorHandle.is-focused, .spectrum-ColorHandle:focus-visible`.
Defaults to `var(--spectrum-color-handle-size)`, if not set.", + "control": "color", + "category": "Modifier" + }, + "mod-colorhandle-border-width": { + "value": "2px", + "description": "Used by `.spectrum-ColorHandle`.
Defaults to `var(--spectrum-color-handle-border-width)`, if not set.", + "control": "color", + "category": "Modifier" + }, + "mod-colorhandle-border-color": { + "value": "light-dark(rgb(255, 255, 255), rgb(255, 255, 255))", + "description": "Used by `.spectrum-ColorHandle`.
Defaults to `var(--spectrum-white)`, if not set.", + "control": "color", + "category": "Modifier" + }, + "mod-colorhandle-outer-border-width": { + "value": "var(--spectrum-colorhandle-outer-border-width)", + "description": "Used by `.spectrum-ColorHandle`.
Defaults to `var(--spectrum-colorhandle-outer-border-width)`, if not set.", + "control": "color", + "category": "Modifier" + }, + "mod-colorhandle-outer-border-color": { + "value": "var(--spectrum-colorhandle-outer-border-color)", + "description": "Used by `.spectrum-ColorHandle`.
Defaults to `var(--spectrum-colorhandle-outer-border-color)`, if not set.", + "control": "color", + "category": "Modifier" + }, + "mod-colorhandle-animation-duration": { + "value": "var(--spectrum-animation-duration-100)", + "description": "Used by `.spectrum-ColorHandle`.
Defaults to `var(--spectrum-animation-duration-100)`, if not set.", + "control": "color", + "category": "Modifier" + }, + "mod-colorhandle-animation-easing": { + "description": "Used by `.spectrum-ColorHandle`.", + "control": "color", + "category": "Modifier" + }, + "mod-colorhandle-hitarea-size": { + "value": "24px", + "description": "Used by `.spectrum-ColorHandle:after`.
Defaults to `var(--spectrum-color-control-track-width)`, if not set.", + "control": "color", + "category": "Modifier" + }, + "mod-colorhandle-hitarea-border-radius": { + "description": "Used by `.spectrum-ColorHandle:after`.", + "control": "color", + "category": "Modifier" + }, + "mod-colorhandle-focused-size": { + "value": "32px", + "description": "Used by `.spectrum-ColorHandle.is-focused, .spectrum-ColorHandle:focus-visible`.
Defaults to `var(--spectrum-color-handle-size-key-focus)`, if not set.", + "control": "color", + "category": "Modifier" + }, + "mod-colorhandle-border-color-disabled": { + "value": "var(--spectrum-gray-400)", + "description": "Used by `.spectrum-ColorHandle.is-disabled`.
Defaults to `var(--spectrum-disabled-content-color)`, if not set.", + "control": "color", + "category": "Modifier" + }, + "mod-colorhandle-fill-color-disabled": { + "value": "var(--spectrum-gray-100)", + "description": "Used by `.spectrum-ColorHandle.is-disabled`.
Defaults to `var(--spectrum-disabled-background-color)`, if not set.", + "control": "color", + "category": "Modifier" + }, + "mod-colorhandle-inner-border-width": { + "value": "1px", + "description": "Used by `.spectrum-ColorHandle-inner`.
Defaults to `var(--spectrum-color-handle-inner-border-width)`, if not set.", + "control": "color", + "category": "Modifier" + }, + "mod-colorhandle-inner-border-color": { + "value": "var(--spectrum-colorhandle-inner-border-color)", + "description": "Used by `.spectrum-ColorHandle-inner`.
Defaults to `var(--spectrum-colorhandle-inner-border-color)`, if not set.", + "control": "color", + "category": "Modifier" + } + }, + "component": { + "spectrum-colorhandle-outer-border-color": { + "description": "Defined in `.spectrum-ColorHandle`.
Used by `.spectrum-ColorHandle`.", + "control": "color", + "category": "Component" + }, + "spectrum-color-handle-outer-border-opacity": { + "value": "0.42", + "description": "Used by `--spectrum-colorhandle-outer-border-color`.", + "control": "color", + "category": "Component" + }, + "spectrum-colorhandle-outer-border-width": { + "description": "Defined in `.spectrum-ColorHandle`.
Used by `.spectrum-ColorHandle`.", + "control": "color", + "category": "Component" + }, + "spectrum-color-handle-outer-border-width": { + "value": "1px", + "description": "Used by `--spectrum-colorhandle-outer-border-width`.", + "control": "color", + "category": "Component" + }, + "spectrum-colorhandle-inner-border-color": { + "description": "Defined in `.spectrum-ColorHandle`.
Used by `.spectrum-ColorHandle-inner`.", + "control": "color", + "category": "Component" + }, + "spectrum-color-handle-inner-border-opacity": { + "value": "0.42", + "description": "Used by `--spectrum-colorhandle-inner-border-color`.", + "control": "color", + "category": "Component" + }, + "spectrum-color-handle-size": { + "value": "16px", + "description": "Used by `.spectrum-ColorHandle`, `.spectrum-ColorHandle.is-focused, .spectrum-ColorHandle:focus-visible`.", + "control": "color", + "category": "Component" + }, + "spectrum-color-handle-border-width": { + "value": "2px", + "description": "Used by `.spectrum-ColorHandle`.", + "control": "color", + "category": "Component" + }, + "spectrum-color-handle-size-key-focus": { + "value": "32px", + "description": "Used by `.spectrum-ColorHandle.is-focused, .spectrum-ColorHandle:focus-visible`.", + "control": "color", + "category": "Component" + }, + "spectrum-color-handle-inner-border-width": { + "value": "1px", + "description": "Used by `.spectrum-ColorHandle-inner`.", + "control": "color", + "category": "Component" + } + }, + "global": { + "spectrum-black-rgb": { + "description": "Used by `--spectrum-colorhandle-outer-border-color`, `--spectrum-colorhandle-inner-border-color`.", + "control": "text", + "category": "Global" + }, + "spectrum-white": { + "value": "light-dark(rgb(255, 255, 255), rgb(255, 255, 255))", + "description": "Used by `.spectrum-ColorHandle`.", + "control": "text", + "category": "Global" + }, + "spectrum-animation-duration-100": { + "description": "Used by `.spectrum-ColorHandle`.", + "control": "text", + "category": "Global" + }, + "spectrum-color-control-track-width": { + "value": "24px", + "description": "Used by `.spectrum-ColorHandle:after`.", + "control": "color", + "category": "Global" + }, + "spectrum-disabled-content-color": { + "value": "var(--spectrum-gray-400)", + "description": "Used by `.spectrum-ColorHandle.is-disabled`.", + "control": "color", + "category": "Global" + }, + "spectrum-disabled-background-color": { + "value": "var(--spectrum-gray-100)", + "description": "Used by `.spectrum-ColorHandle.is-disabled`.", + "control": "color", + "category": "Global" + }, + "spectrum-picked-color": { + "description": "Used by `.spectrum-ColorHandle-inner`.", + "control": "color", + "category": "Global" + } + }, + "system-theme": {}, + "passthroughs": { + "mod-opacity-checkerboard-position": { + "category": "Passthrough" + } + }, + "high-contrast": { + "highcontrast-colorhandle-border-color-disabled": { + "value": "var(--mod-colorhandle-border-color-disabled, var(--spectrum-disabled-content-color))", + "description": "Defined in `.spectrum-ColorHandle.is-disabled`.
Used by `.spectrum-ColorHandle.is-disabled`.
Defaults to `var(--mod-colorhandle-border-color-disabled, var(--spectrum-disabled-content-color))`, if not set.", + "control": "color" + }, + "highcontrast-colorhandle-fill-color-disabled": { + "value": "var(--mod-colorhandle-fill-color-disabled, var(--spectrum-disabled-background-color))", + "description": "Defined in `.spectrum-ColorHandle.is-disabled`.
Used by `.spectrum-ColorHandle.is-disabled`.
Defaults to `var(--mod-colorhandle-fill-color-disabled, var(--spectrum-disabled-background-color))`, if not set.", + "control": "color" + } + } } diff --git a/components/colorhandle/stories/colorhandle.stories.js b/components/colorhandle/stories/colorhandle.stories.js index b3923e6d17e..4e3fa505994 100644 --- a/components/colorhandle/stories/colorhandle.stories.js +++ b/components/colorhandle/stories/colorhandle.stories.js @@ -1,10 +1,12 @@ import { disableDefaultModes } from "@spectrum-css/preview/modes"; import { isDisabled, isFocused } from "@spectrum-css/preview/types"; -import metadata from "../dist/metadata.json"; -import packageJson from "../package.json"; import { ColorHandleGroup } from "./colorhandle.test.js"; import { Template } from "./template.js"; +// Local assets to render the component styles and structure +import metadata from "../dist/metadata.json"; +import packageJson from "../package.json"; + /** * The color handle component is used with [color area](/docs/components-color-area--docs), [color slider](/docs/components-color-slider--docs) and [color wheel](/docs/components-color-wheel--docs) as the color selector. */ @@ -52,6 +54,7 @@ export default { }, packageJson, metadata, + cssprops: metadata.modifiers, }, }; diff --git a/components/colorloupe/dist/metadata.json b/components/colorloupe/dist/metadata.json index 245bb476b1f..09a7501afb2 100644 --- a/components/colorloupe/dist/metadata.json +++ b/components/colorloupe/dist/metadata.json @@ -7,45 +7,183 @@ ".spectrum-ColorLoupe-checkerboard-pattern", ".spectrum-ColorLoupe-inner-border", ".spectrum-ColorLoupe-outer-border", + ".spectrum-ColorLoupe:dir(rtl)", ".spectrum-ColorLoupe.is-disabled", ".spectrum-ColorLoupe.is-open", - ".spectrum-ColorLoupe:dir(rtl)", "[dir=\"rtl\"] .spectrum-ColorLoupe" ], - "modifiers": [ - "--mod-colorloupe-animation-distance", - "--mod-colorloupe-drop-shadow-blur", - "--mod-colorloupe-drop-shadow-color", - "--mod-colorloupe-drop-shadow-x", - "--mod-colorloupe-drop-shadow-y", - "--mod-colorloupe-inner-border-color", - "--mod-colorloupe-inner-border-width", - "--mod-colorloupe-offset", - "--mod-colorloupe-outer-border-color", - "--mod-colorloupe-outer-border-width" - ], - "component": [ - "--spectrum-color-loupe-bottom-to-color-handle", - "--spectrum-color-loupe-drop-shadow-blur", - "--spectrum-color-loupe-drop-shadow-color", - "--spectrum-color-loupe-drop-shadow-y", - "--spectrum-color-loupe-height", - "--spectrum-color-loupe-inner-border", - "--spectrum-color-loupe-inner-border-width", - "--spectrum-color-loupe-outer-border", - "--spectrum-color-loupe-outer-border-width", - "--spectrum-color-loupe-width", - "--spectrum-colorloupe-checkerboard-fill" - ], - "global": [ - "--spectrum-color-handle-outer-border-width", - "--spectrum-color-handle-size", - "--spectrum-drop-shadow-x", - "--spectrum-opacity-checkerboard-square-dark", - "--spectrum-opacity-checkerboard-square-light", - "--spectrum-picked-color" - ], - "system-theme": [], - "passthroughs": [], - "high-contrast": ["--highcontrast-colorloupe-outer-border-color"] + "modifiers": { + "mod-colorloupe-animation-distance": { + "description": "Used by `.spectrum-ColorLoupe`.", + "control": "color", + "category": "Modifier" + }, + "mod-colorloupe-offset": { + "value": "12px", + "description": "Used by `.spectrum-ColorLoupe`.
Defaults to `var(--spectrum-color-loupe-bottom-to-color-handle)`, if not set.", + "control": "color", + "category": "Modifier" + }, + "mod-colorloupe-drop-shadow-x": { + "value": "0px", + "description": "Used by `.spectrum-ColorLoupe`.
Defaults to `var(--spectrum-drop-shadow-x)`, if not set.", + "control": "color", + "category": "Modifier" + }, + "mod-colorloupe-drop-shadow-y": { + "value": "2px", + "description": "Used by `.spectrum-ColorLoupe`.
Defaults to `var(--spectrum-color-loupe-drop-shadow-y)`, if not set.", + "control": "color", + "category": "Modifier" + }, + "mod-colorloupe-drop-shadow-blur": { + "value": "8px", + "description": "Used by `.spectrum-ColorLoupe`.
Defaults to `var(--spectrum-color-loupe-drop-shadow-blur)`, if not set.", + "control": "color", + "category": "Modifier" + }, + "mod-colorloupe-drop-shadow-color": { + "value": "var(--spectrum-transparent-black-300)", + "description": "Used by `.spectrum-ColorLoupe`.
Defaults to `var(--spectrum-color-loupe-drop-shadow-color)`, if not set.", + "control": "color", + "category": "Modifier" + }, + "mod-colorloupe-inner-border-color": { + "value": "var(--spectrum-transparent-black-200)", + "description": "Used by `.spectrum-ColorLoupe-inner-border`.
Defaults to `var(--spectrum-color-loupe-inner-border)`, if not set.", + "control": "color", + "category": "Modifier" + }, + "mod-colorloupe-inner-border-width": { + "value": "1px", + "description": "Used by `.spectrum-ColorLoupe-inner-border`.
Defaults to `var(--spectrum-color-loupe-inner-border-width)`, if not set.", + "control": "color", + "category": "Modifier" + }, + "mod-colorloupe-outer-border-color": { + "value": "var(--spectrum-white)", + "description": "Used by `.spectrum-ColorLoupe-outer-border`.
Defaults to `var(--spectrum-color-loupe-outer-border)`, if not set.", + "control": "color", + "category": "Modifier" + }, + "mod-colorloupe-outer-border-width": { + "value": "2px", + "description": "Used by `.spectrum-ColorLoupe-outer-border`.
Defaults to `var(--spectrum-color-loupe-outer-border-width)`, if not set.", + "control": "color", + "category": "Modifier" + } + }, + "component": { + "spectrum-color-loupe-width": { + "value": "48px", + "description": "Used by `.spectrum-ColorLoupe`, `.spectrum-ColorLoupe:dir(rtl), [dir=\"rtl\"] .spectrum-ColorLoupe`.", + "control": "color", + "category": "Component" + }, + "spectrum-color-loupe-height": { + "value": "64px", + "description": "Used by `.spectrum-ColorLoupe`.", + "control": "color", + "category": "Component" + }, + "spectrum-color-loupe-bottom-to-color-handle": { + "value": "12px", + "description": "Used by `.spectrum-ColorLoupe`.", + "control": "color", + "category": "Component" + }, + "spectrum-color-loupe-drop-shadow-y": { + "value": "2px", + "description": "Used by `.spectrum-ColorLoupe`.", + "control": "color", + "category": "Component" + }, + "spectrum-color-loupe-drop-shadow-blur": { + "value": "8px", + "description": "Used by `.spectrum-ColorLoupe`.", + "control": "color", + "category": "Component" + }, + "spectrum-color-loupe-drop-shadow-color": { + "value": "var(--spectrum-transparent-black-300)", + "description": "Used by `.spectrum-ColorLoupe`.", + "control": "color", + "category": "Component" + }, + "spectrum-color-loupe-inner-border": { + "value": "var(--spectrum-transparent-black-200)", + "description": "Used by `.spectrum-ColorLoupe-inner-border`.", + "control": "color", + "category": "Component" + }, + "spectrum-color-loupe-inner-border-width": { + "value": "1px", + "description": "Used by `.spectrum-ColorLoupe-inner-border`.", + "control": "color", + "category": "Component" + }, + "spectrum-color-loupe-outer-border": { + "value": "var(--spectrum-white)", + "description": "Used by `.spectrum-ColorLoupe-outer-border`.", + "control": "color", + "category": "Component" + }, + "spectrum-color-loupe-outer-border-width": { + "value": "2px", + "description": "Used by `.spectrum-ColorLoupe-outer-border`.", + "control": "color", + "category": "Component" + }, + "spectrum-colorloupe-checkerboard-fill": { + "description": "Used by `.spectrum-ColorLoupe-checkerboard-fill`.", + "control": "color", + "category": "Component" + } + }, + "global": { + "spectrum-color-handle-size": { + "value": "16px", + "description": "Used by `.spectrum-ColorLoupe`.", + "control": "color", + "category": "Global" + }, + "spectrum-color-handle-outer-border-width": { + "value": "1px", + "description": "Used by `.spectrum-ColorLoupe`.", + "control": "color", + "category": "Global" + }, + "spectrum-drop-shadow-x": { + "value": "0px", + "description": "Used by `.spectrum-ColorLoupe`.", + "control": "text", + "category": "Global" + }, + "spectrum-picked-color": { + "description": "Used by `.spectrum-ColorLoupe-inner-border`.", + "control": "color", + "category": "Global" + }, + "spectrum-opacity-checkerboard-square-dark": { + "value": "var(--spectrum-gray-800)", + "description": "Used by `.spectrum-ColorLoupe-checkerboard-pattern`.", + "control": "text", + "category": "Global" + }, + "spectrum-opacity-checkerboard-square-light": { + "value": "var(--spectrum-white)", + "description": "Used by `.spectrum-ColorLoupe-checkerboard-background`.", + "control": "text", + "category": "Global" + } + }, + "system-theme": {}, + "passthroughs": {}, + "high-contrast": { + "highcontrast-colorloupe-outer-border-color": { + "value": "var(--mod-colorloupe-outer-border-color, var(--spectrum-color-loupe-outer-border))", + "description": "Defined in `.spectrum-ColorLoupe`.
Used by `.spectrum-ColorLoupe-outer-border`.
Defaults to `var(--mod-colorloupe-outer-border-color, var(--spectrum-color-loupe-outer-border))`, if not set.", + "control": "color" + } + } } diff --git a/components/colorloupe/stories/colorloupe.stories.js b/components/colorloupe/stories/colorloupe.stories.js index f07cdf83ee7..4863c303c8d 100644 --- a/components/colorloupe/stories/colorloupe.stories.js +++ b/components/colorloupe/stories/colorloupe.stories.js @@ -1,8 +1,10 @@ import { disableDefaultModes } from "@spectrum-css/preview/modes"; import { isDisabled, isOpen } from "@spectrum-css/preview/types"; +import { ColorLoupeGroup } from "./colorloupe.test.js"; + +// Local assets to render the component styles and structure import metadata from "../dist/metadata.json"; import packageJson from "../package.json"; -import { ColorLoupeGroup } from "./colorloupe.test.js"; /** * The color loupe component shows the output color that would otherwise be covered by a cursor, stylus, or finger during color selection. @@ -45,6 +47,7 @@ export default { }, packageJson, metadata, + cssprops: metadata.modifiers, }, }; diff --git a/components/colorslider/dist/metadata.json b/components/colorslider/dist/metadata.json index ea202a9f0a0..3871501b9d0 100644 --- a/components/colorslider/dist/metadata.json +++ b/components/colorslider/dist/metadata.json @@ -16,40 +16,167 @@ ".spectrum-ColorSlider.is-focused", "[dir=\"rtl\"] .spectrum-ColorSlider-gradient" ], - "modifiers": [ - "--mod-color-slider-background-color-disabled", - "--mod-color-slider-border-color", - "--mod-color-slider-border-color-disabled", - "--mod-color-slider-border-rounding", - "--mod-color-slider-border-width", - "--mod-color-slider-control-track-height", - "--mod-color-slider-control-track-width", - "--mod-color-slider-handle-hitarea-border-radius", - "--mod-color-slider-length", - "--mod-color-slider-minimum-length", - "--mod-color-slider-vertical-control-track-width", - "--mod-color-slider-vertical-height", - "--mod-color-slider-vertical-minimum-height" - ], - "component": [ - "--spectrum-color-slider-border-color-default", - "--spectrum-color-slider-border-color-local", - "--spectrum-color-slider-border-opacity", - "--spectrum-color-slider-border-rounding", - "--spectrum-color-slider-border-width", - "--spectrum-color-slider-length", - "--spectrum-color-slider-minimum-length" - ], - "global": [ - "--spectrum-color-control-track-width", - "--spectrum-disabled-background-color", - "--spectrum-gray-900-rgb" - ], - "system-theme": [], - "passthroughs": ["--mod-colorhandle-hitarea-border-radius"], - "high-contrast": [ - "--highcontrast-color-slider-background-color-disabled", - "--highcontrast-color-slider-border-color", - "--highcontrast-color-slider-border-color-disabled" - ] + "modifiers": { + "mod-color-slider-handle-hitarea-border-radius": { + "description": "Used by `--mod-colorhandle-hitarea-border-radius`.", + "control": "color", + "category": "Modifier" + }, + "mod-color-slider-minimum-length": { + "value": "80px", + "description": "Used by `.spectrum-ColorSlider`, `.spectrum-ColorSlider--vertical`.
Defaults to `var(--spectrum-color-slider-minimum-length)`, if not set.", + "control": "color", + "category": "Modifier" + }, + "mod-color-slider-length": { + "value": "192px", + "description": "Used by `.spectrum-ColorSlider`, `.spectrum-ColorSlider--vertical`.
Defaults to `var(--spectrum-color-slider-length)`, if not set.", + "control": "color", + "category": "Modifier" + }, + "mod-color-slider-control-track-width": { + "value": "24px", + "description": "Used by `.spectrum-ColorSlider`.
Defaults to `var(--spectrum-color-control-track-width)`, if not set.", + "control": "color", + "category": "Modifier" + }, + "mod-color-slider-vertical-minimum-height": { + "value": "var(--mod-color-slider-minimum-length, var(--spectrum-color-slider-minimum-length))", + "description": "Used by `.spectrum-ColorSlider--vertical`.
Defaults to `var(--mod-color-slider-minimum-length, var(--spectrum-color-slider-minimum-length))`, if not set.", + "control": "color", + "category": "Modifier" + }, + "mod-color-slider-vertical-height": { + "value": "var(--mod-color-slider-length, var(--spectrum-color-slider-length))", + "description": "Used by `.spectrum-ColorSlider--vertical`.
Defaults to `var(--mod-color-slider-length, var(--spectrum-color-slider-length))`, if not set.", + "control": "color", + "category": "Modifier" + }, + "mod-color-slider-vertical-control-track-width": { + "value": "var(--mod-color-slider-control-track-height, var(--spectrum-color-control-track-width))", + "description": "Used by `.spectrum-ColorSlider--vertical`.
Defaults to `var(--mod-color-slider-control-track-height, var(--spectrum-color-control-track-width))`, if not set.", + "control": "color", + "category": "Modifier" + }, + "mod-color-slider-control-track-height": { + "value": "24px", + "description": "Used by `.spectrum-ColorSlider--vertical`.
Defaults to `var(--spectrum-color-control-track-width)`, if not set.", + "control": "color", + "category": "Modifier" + }, + "mod-color-slider-border-color": { + "value": "var(--spectrum-color-slider-border-color-default)", + "description": "Used by `--spectrum-color-slider-border-color-local`.
Defaults to `var(--spectrum-color-slider-border-color-default)`, if not set.", + "control": "color", + "category": "Modifier" + }, + "mod-color-slider-border-width": { + "value": "1px", + "description": "Used by `.spectrum-ColorSlider-checkerboard:before`.
Defaults to `var(--spectrum-color-slider-border-width)`, if not set.", + "control": "color", + "category": "Modifier" + }, + "mod-color-slider-border-rounding": { + "value": "7px", + "description": "Used by `.spectrum-ColorSlider-checkerboard:before`, `.spectrum-ColorSlider-checkerboard, .spectrum-ColorSlider-gradient`.
Defaults to `var(--spectrum-color-slider-border-rounding)`, if not set.", + "control": "color", + "category": "Modifier" + }, + "mod-color-slider-border-color-disabled": { + "value": "var(--spectrum-gray-100)", + "description": "Used by `--spectrum-color-slider-border-color-local`.
Defaults to `var(--spectrum-disabled-background-color)`, if not set.", + "control": "color", + "category": "Modifier" + }, + "mod-color-slider-background-color-disabled": { + "value": "var(--spectrum-gray-100)", + "description": "Used by `.spectrum-ColorSlider.is-disabled .spectrum-ColorSlider-checkerboard`.
Defaults to `var(--spectrum-disabled-background-color)`, if not set.", + "control": "color", + "category": "Modifier" + } + }, + "component": { + "spectrum-color-slider-border-color-default": { + "description": "Defined in `.spectrum-ColorSlider`.
Used by `--spectrum-color-slider-border-color-local`.", + "control": "color", + "category": "Component" + }, + "spectrum-color-slider-border-opacity": { + "value": "0.1", + "description": "Used by `--spectrum-color-slider-border-color-default`.", + "control": "color", + "category": "Component" + }, + "spectrum-color-slider-minimum-length": { + "value": "80px", + "description": "Used by `.spectrum-ColorSlider`, `.spectrum-ColorSlider--vertical`.", + "control": "color", + "category": "Component" + }, + "spectrum-color-slider-length": { + "value": "192px", + "description": "Used by `.spectrum-ColorSlider`, `.spectrum-ColorSlider--vertical`.", + "control": "color", + "category": "Component" + }, + "spectrum-color-slider-border-color-local": { + "description": "Defined in `.spectrum-ColorSlider-checkerboard`, `.spectrum-ColorSlider.is-disabled .spectrum-ColorSlider-checkerboard`.
Used by `.spectrum-ColorSlider-checkerboard:before`.", + "control": "color", + "category": "Component" + }, + "spectrum-color-slider-border-width": { + "value": "1px", + "description": "Used by `.spectrum-ColorSlider-checkerboard:before`.", + "control": "color", + "category": "Component" + }, + "spectrum-color-slider-border-rounding": { + "value": "7px", + "description": "Used by `.spectrum-ColorSlider-checkerboard:before`, `.spectrum-ColorSlider-checkerboard, .spectrum-ColorSlider-gradient`.", + "control": "color", + "category": "Component" + } + }, + "global": { + "spectrum-gray-900-rgb": { + "description": "Used by `--spectrum-color-slider-border-color-default`.", + "control": "text", + "category": "Global" + }, + "spectrum-color-control-track-width": { + "value": "24px", + "description": "Used by `.spectrum-ColorSlider`, `.spectrum-ColorSlider--vertical`.", + "control": "color", + "category": "Global" + }, + "spectrum-disabled-background-color": { + "value": "var(--spectrum-gray-100)", + "description": "Used by `--spectrum-color-slider-border-color-local`, `.spectrum-ColorSlider.is-disabled .spectrum-ColorSlider-checkerboard`.", + "control": "color", + "category": "Global" + } + }, + "system-theme": {}, + "passthroughs": { + "mod-colorhandle-hitarea-border-radius": { + "category": "Passthrough" + } + }, + "high-contrast": { + "highcontrast-color-slider-border-color": { + "value": "var(--mod-color-slider-border-color, var(--spectrum-color-slider-border-color-default))", + "description": "Defined in `.spectrum-ColorSlider`.
Used by `--spectrum-color-slider-border-color-local`.
Defaults to `var(--mod-color-slider-border-color, var(--spectrum-color-slider-border-color-default))`, if not set.", + "control": "color" + }, + "highcontrast-color-slider-border-color-disabled": { + "value": "var(--mod-color-slider-border-color-disabled, var(--spectrum-disabled-background-color))", + "description": "Defined in `.spectrum-ColorSlider`.
Used by `--spectrum-color-slider-border-color-local`.
Defaults to `var(--mod-color-slider-border-color-disabled, var(--spectrum-disabled-background-color))`, if not set.", + "control": "color" + }, + "highcontrast-color-slider-background-color-disabled": { + "value": "var(--mod-color-slider-background-color-disabled, var(--spectrum-disabled-background-color))", + "description": "Defined in `.spectrum-ColorSlider`.
Used by `.spectrum-ColorSlider.is-disabled .spectrum-ColorSlider-checkerboard`.
Defaults to `var(--mod-color-slider-background-color-disabled, var(--spectrum-disabled-background-color))`, if not set.", + "control": "color" + } + } } diff --git a/components/colorslider/stories/colorslider.stories.js b/components/colorslider/stories/colorslider.stories.js index 633fa48b8be..03172685f49 100644 --- a/components/colorslider/stories/colorslider.stories.js +++ b/components/colorslider/stories/colorslider.stories.js @@ -1,10 +1,12 @@ import { disableDefaultModes } from "@spectrum-css/preview/modes"; import { isDisabled, isFocused } from "@spectrum-css/preview/types"; -import metadata from "../dist/metadata.json"; -import packageJson from "../package.json"; import { ColorSliderGroup } from "./colorslider.test.js"; import { Template } from "./template.js"; +// Local assets to render the component styles and structure +import metadata from "../dist/metadata.json"; +import packageJson from "../package.json"; + /** * The color slider component lets users visually change an individual channel of a color. * @@ -62,6 +64,7 @@ export default { }, packageJson, metadata, + cssprops: metadata.modifiers, }, }; diff --git a/components/colorwheel/dist/metadata.json b/components/colorwheel/dist/metadata.json index c321e1aca27..5f72a0ce7f2 100644 --- a/components/colorwheel/dist/metadata.json +++ b/components/colorwheel/dist/metadata.json @@ -2,11 +2,11 @@ "sourceFile": "index.css", "selectors": [ ".spectrum-ColorWheel", - ".spectrum-ColorWheel-ColorArea-handle", - ".spectrum-ColorWheel-ColorArea-handle:dir(rtl)", ".spectrum-ColorWheel-border", ".spectrum-ColorWheel-border.is-disabled", ".spectrum-ColorWheel-colorarea-container", + ".spectrum-ColorWheel-ColorArea-handle", + ".spectrum-ColorWheel-ColorArea-handle:dir(rtl)", ".spectrum-ColorWheel-handle", ".spectrum-ColorWheel-inner", ".spectrum-ColorWheel-slider", @@ -17,43 +17,182 @@ ".spectrum-ColorWheel.is-focused", "[dir=\"rtl\"] .spectrum-ColorWheel-ColorArea-handle" ], - "modifiers": [ - "--mod-colorwheel-border-color", - "--mod-colorwheel-border-width", - "--mod-colorwheel-colorarea-container-size", - "--mod-colorwheel-colorarea-margin", - "--mod-colorwheel-fill-color-disabled", - "--mod-colorwheel-height", - "--mod-colorwheel-min-width", - "--mod-colorwheel-path", - "--mod-colorwheel-path-borders", - "--mod-colorwheel-track-width", - "--mod-colorwheel-width" - ], - "component": [ - "--spectrum-color-wheel-color-area-margin", - "--spectrum-color-wheel-minimum-width", - "--spectrum-color-wheel-width", - "--spectrum-colorwheel-border-color", - "--spectrum-colorwheel-border-width", - "--spectrum-colorwheel-colorarea-container-size", - "--spectrum-colorwheel-fill-color-disabled", - "--spectrum-colorwheel-height", - "--spectrum-colorwheel-path", - "--spectrum-colorwheel-path-borders", - "--spectrum-colorwheel-track-width", - "--spectrum-colorwheel-width" - ], - "global": [ - "--spectrum-border-width-100", - "--spectrum-color-control-track-width", - "--spectrum-disabled-background-color", - "--spectrum-transparent-black-300" - ], - "system-theme": ["--system-color-wheel-border-color"], - "passthroughs": [], - "high-contrast": [ - "--highcontrast-colorwheel-border-color-disabled", - "--highcontrast-colorwheel-fill-color-disabled" - ] + "modifiers": { + "mod-colorwheel-width": { + "value": "192px", + "description": "Used by `--spectrum-colorwheel-width`.
Defaults to `var(--spectrum-color-wheel-width)`, if not set.", + "control": "color", + "category": "Modifier" + }, + "mod-colorwheel-height": { + "value": "192px", + "description": "Used by `--spectrum-colorwheel-height`.
Defaults to `var(--spectrum-color-wheel-width)`, if not set.", + "control": "color", + "category": "Modifier" + }, + "mod-colorwheel-fill-color-disabled": { + "value": "var(--spectrum-gray-100)", + "description": "Used by `--spectrum-colorwheel-fill-color-disabled`.
Defaults to `var(--spectrum-disabled-background-color)`, if not set.", + "control": "color", + "category": "Modifier" + }, + "mod-colorwheel-border-width": { + "value": "1px", + "description": "Used by `--spectrum-colorwheel-border-width`.
Defaults to `var(--spectrum-border-width-100)`, if not set.", + "control": "color", + "category": "Modifier" + }, + "mod-colorwheel-track-width": { + "value": "24px", + "description": "Used by `--spectrum-colorwheel-track-width`.
Defaults to `var(--spectrum-color-control-track-width)`, if not set.", + "control": "color", + "category": "Modifier" + }, + "mod-colorwheel-min-width": { + "value": "175px", + "description": "Used by `.spectrum-ColorWheel`.
Defaults to `var(--spectrum-color-wheel-minimum-width)`, if not set.", + "control": "color", + "category": "Modifier" + }, + "mod-colorwheel-colorarea-container-size": { + "value": "var(--spectrum-colorwheel-colorarea-container-size)", + "description": "Used by `.spectrum-ColorWheel-inner`.
Defaults to `var(--spectrum-colorwheel-colorarea-container-size)`, if not set.", + "control": "color", + "category": "Modifier" + }, + "mod-colorwheel-colorarea-margin": { + "value": "12px", + "description": "Used by `.spectrum-ColorWheel-colorarea-container`.
Defaults to `var(--spectrum-color-wheel-color-area-margin)`, if not set.", + "control": "color", + "category": "Modifier" + }, + "mod-colorwheel-border-color": { + "value": "var(--spectrum-colorwheel-border-color)", + "description": "Used by `.spectrum-ColorWheel-border`.
Defaults to `var(--spectrum-colorwheel-border-color)`, if not set.", + "control": "color", + "category": "Modifier" + }, + "mod-colorwheel-path-borders": { + "value": "var(--spectrum-colorwheel-path-borders)", + "description": "Used by `.spectrum-ColorWheel-border`.
Defaults to `var(--spectrum-colorwheel-path-borders)`, if not set.", + "control": "color", + "category": "Modifier" + }, + "mod-colorwheel-path": { + "value": "var(--spectrum-colorwheel-path)", + "description": "Used by `.spectrum-ColorWheel-wheel`.
Defaults to `var(--spectrum-colorwheel-path)`, if not set.", + "control": "color", + "category": "Modifier" + } + }, + "component": { + "spectrum-colorwheel-width": { + "description": "Defined in `.spectrum-ColorWheel`.
Used by `.spectrum-ColorWheel`, `.spectrum-ColorWheel-handle`, `.spectrum-ColorWheel-border`.", + "control": "color", + "category": "Component" + }, + "spectrum-color-wheel-width": { + "value": "192px", + "description": "Used by `--spectrum-colorwheel-width`, `--spectrum-colorwheel-height`.", + "control": "color", + "category": "Component" + }, + "spectrum-colorwheel-height": { + "description": "Defined in `.spectrum-ColorWheel`.
Used by `.spectrum-ColorWheel`, `.spectrum-ColorWheel-border`.", + "control": "color", + "category": "Component" + }, + "spectrum-colorwheel-fill-color-disabled": { + "description": "Defined in `.spectrum-ColorWheel`.
Used by `.spectrum-ColorWheel-border.is-disabled`, `.spectrum-ColorWheel-wheel.is-disabled`.", + "control": "color", + "category": "Component" + }, + "spectrum-colorwheel-border-width": { + "description": "Defined in `.spectrum-ColorWheel`.
Used by `--_border-width`, `.spectrum-ColorWheel-wheel`.", + "control": "color", + "category": "Component" + }, + "spectrum-colorwheel-track-width": { + "description": "Defined in `.spectrum-ColorWheel`.
Used by `--_track-width`, `.spectrum-ColorWheel-handle`.", + "control": "color", + "category": "Component" + }, + "spectrum-color-wheel-minimum-width": { + "value": "175px", + "description": "Used by `.spectrum-ColorWheel`.", + "control": "color", + "category": "Component" + }, + "spectrum-colorwheel-colorarea-container-size": { + "description": "Used by `.spectrum-ColorWheel-inner`.", + "control": "color", + "category": "Component" + }, + "spectrum-color-wheel-color-area-margin": { + "value": "12px", + "description": "Used by `.spectrum-ColorWheel-colorarea-container`.", + "control": "color", + "category": "Component" + }, + "spectrum-colorwheel-border-color": { + "description": "Defined in `.spectrum-ColorWheel`.
Used by `.spectrum-ColorWheel-border`.", + "control": "color", + "category": "Component" + }, + "spectrum-colorwheel-path-borders": { + "description": "Used by `.spectrum-ColorWheel-border`.", + "control": "color", + "category": "Component" + }, + "spectrum-colorwheel-path": { + "description": "Used by `.spectrum-ColorWheel-wheel`.", + "control": "color", + "category": "Component" + } + }, + "global": { + "spectrum-transparent-black-300": { + "value": "light-dark(rgba(0, 0, 0, 0.15), rgba(0, 0, 0, 0.15))", + "description": "Used by `--system-color-wheel-border-color`.", + "control": "text", + "category": "Global" + }, + "spectrum-disabled-background-color": { + "value": "var(--spectrum-gray-100)", + "description": "Used by `--spectrum-colorwheel-fill-color-disabled`.", + "control": "color", + "category": "Global" + }, + "spectrum-border-width-100": { + "value": "1px", + "description": "Used by `--spectrum-colorwheel-border-width`.", + "control": "text", + "category": "Global" + }, + "spectrum-color-control-track-width": { + "value": "24px", + "description": "Used by `--spectrum-colorwheel-track-width`.", + "control": "color", + "category": "Global" + } + }, + "system-theme": { + "system-color-wheel-border-color": { + "description": "Defined in `.spectrum`.
Used by `--spectrum-colorwheel-border-color`.", + "control": "color" + } + }, + "passthroughs": {}, + "high-contrast": { + "highcontrast-colorwheel-border-color-disabled": { + "value": "var(--spectrum-colorwheel-fill-color-disabled)", + "description": "Defined in `.spectrum-ColorWheel`.
Used by `.spectrum-ColorWheel-border.is-disabled`.
Defaults to `var(--spectrum-colorwheel-fill-color-disabled)`, if not set.", + "control": "color" + }, + "highcontrast-colorwheel-fill-color-disabled": { + "value": "var(--spectrum-colorwheel-fill-color-disabled)", + "description": "Defined in `.spectrum-ColorWheel`.
Used by `.spectrum-ColorWheel-wheel.is-disabled`.
Defaults to `var(--spectrum-colorwheel-fill-color-disabled)`, if not set.", + "control": "color" + } + } } diff --git a/components/colorwheel/stories/colorwheel.stories.js b/components/colorwheel/stories/colorwheel.stories.js index 15bba48a20a..2cf66fdd89c 100644 --- a/components/colorwheel/stories/colorwheel.stories.js +++ b/components/colorwheel/stories/colorwheel.stories.js @@ -1,10 +1,12 @@ import { disableDefaultModes } from "@spectrum-css/preview/modes"; import { isDisabled, isFocused } from "@spectrum-css/preview/types"; -import metadata from "../dist/metadata.json"; -import packageJson from "../package.json"; import { ColorWheelGroup } from "./colorwheel.test.js"; import { Template } from "./template.js"; +// Local assets to render the component styles and structure +import metadata from "../dist/metadata.json"; +import packageJson from "../package.json"; + /** * The color wheel component lets users visually change an individual channel of a color on a circular track. * @@ -53,6 +55,7 @@ export default { }, packageJson, metadata, + cssprops: metadata.modifiers, }, }; diff --git a/components/combobox/dist/metadata.json b/components/combobox/dist/metadata.json index bdf2685d75f..9212e8eaa46 100644 --- a/components/combobox/dist/metadata.json +++ b/components/combobox/dist/metadata.json @@ -22,24 +22,24 @@ ".spectrum-Combobox--sizeS", ".spectrum-Combobox--sizeXL", ".spectrum-Combobox-button", + ".spectrum-Combobox-button:not(:disabled, .is-invalid, .spectrum-PickerButton--quiet)", + ".spectrum-Combobox-button:not(:disabled, .is-invalid, .spectrum-PickerButton--quiet):active", + ".spectrum-Combobox-button:not(:disabled, .is-invalid, .spectrum-PickerButton--quiet):focus", + ".spectrum-Combobox-button:not(:disabled, .is-invalid, .spectrum-PickerButton--quiet):focus-visible", + ".spectrum-Combobox-button:not(:disabled, .is-invalid, .spectrum-PickerButton--quiet):focus:hover", + ".spectrum-Combobox-button:not(:disabled, .is-invalid, .spectrum-PickerButton--quiet):hover", ".spectrum-Combobox-button.is-focused:not(:disabled, .is-invalid, .spectrum-PickerButton--quiet)", ".spectrum-Combobox-button.is-focused:not(:disabled, .is-invalid, .spectrum-PickerButton--quiet):hover", - ".spectrum-Combobox-button.is-invalid.is-focused:not(:disabled, .spectrum-PickerButton--quiet)", - ".spectrum-Combobox-button.is-invalid.is-focused:not(:disabled, .spectrum-PickerButton--quiet):hover", - ".spectrum-Combobox-button.is-invalid.is-keyboardFocused:not(:disabled, .spectrum-PickerButton--quiet)", ".spectrum-Combobox-button.is-invalid:not(:disabled, .spectrum-PickerButton--quiet)", ".spectrum-Combobox-button.is-invalid:not(:disabled, .spectrum-PickerButton--quiet):active", ".spectrum-Combobox-button.is-invalid:not(:disabled, .spectrum-PickerButton--quiet):focus", ".spectrum-Combobox-button.is-invalid:not(:disabled, .spectrum-PickerButton--quiet):focus-visible", ".spectrum-Combobox-button.is-invalid:not(:disabled, .spectrum-PickerButton--quiet):focus:hover", ".spectrum-Combobox-button.is-invalid:not(:disabled, .spectrum-PickerButton--quiet):hover", + ".spectrum-Combobox-button.is-invalid.is-focused:not(:disabled, .spectrum-PickerButton--quiet)", + ".spectrum-Combobox-button.is-invalid.is-focused:not(:disabled, .spectrum-PickerButton--quiet):hover", + ".spectrum-Combobox-button.is-invalid.is-keyboardFocused:not(:disabled, .spectrum-PickerButton--quiet)", ".spectrum-Combobox-button.is-keyboardFocused:not(:disabled, .is-invalid, .spectrum-PickerButton--quiet)", - ".spectrum-Combobox-button:not(:disabled, .is-invalid, .spectrum-PickerButton--quiet)", - ".spectrum-Combobox-button:not(:disabled, .is-invalid, .spectrum-PickerButton--quiet):active", - ".spectrum-Combobox-button:not(:disabled, .is-invalid, .spectrum-PickerButton--quiet):focus", - ".spectrum-Combobox-button:not(:disabled, .is-invalid, .spectrum-PickerButton--quiet):focus-visible", - ".spectrum-Combobox-button:not(:disabled, .is-invalid, .spectrum-PickerButton--quiet):focus:hover", - ".spectrum-Combobox-button:not(:disabled, .is-invalid, .spectrum-PickerButton--quiet):hover", ".spectrum-Combobox-input", ".spectrum-Combobox-input::placeholder", ".spectrum-Combobox-input:active", @@ -49,258 +49,1130 @@ ".spectrum-Combobox-progress-circle", ".spectrum-Combobox-progress-circle:dir(rtl)", ".spectrum-Combobox-textfield", + ".spectrum-Combobox-textfield:hover .spectrum-Combobox-input", ".spectrum-Combobox-textfield.is-focused .spectrum-Combobox-input", ".spectrum-Combobox-textfield.is-focused .spectrum-Combobox-input:hover", ".spectrum-Combobox-textfield.is-invalid .spectrum-Combobox-input", ".spectrum-Combobox-textfield.is-invalid .spectrum-Textfield-validationIcon", ".spectrum-Combobox-textfield.is-keyboardFocused .spectrum-Combobox-input", ".spectrum-Combobox-textfield.is-loading .spectrum-Combobox-input", - ".spectrum-Combobox-textfield:hover .spectrum-Combobox-input", - ".spectrum-Combobox.is-focused .spectrum-Combobox-button.is-invalid:not(:disabled, .spectrum-PickerButton--quiet)", + ".spectrum-Combobox:has(:active) .spectrum-Combobox-button:not(:disabled, .is-invalid, .spectrum-PickerButton--quiet)", + ".spectrum-Combobox:has(:active) .spectrum-Combobox-button.is-invalid:not(:disabled, .spectrum-PickerButton--quiet)", + ".spectrum-Combobox:has(:focus) .spectrum-Combobox-button:not(:disabled, .is-invalid, .spectrum-PickerButton--quiet)", + ".spectrum-Combobox:has(:focus) .spectrum-Combobox-button.is-invalid:not(:disabled, .spectrum-PickerButton--quiet)", + ".spectrum-Combobox:hover .spectrum-Combobox-button:not(:disabled, .is-invalid, .spectrum-PickerButton--quiet)", + ".spectrum-Combobox:hover .spectrum-Combobox-button.is-invalid:not(:disabled, .spectrum-PickerButton--quiet)", + ".spectrum-Combobox:hover:has(:focus) .spectrum-Combobox-button:not(:disabled, .is-invalid, .spectrum-PickerButton--quiet)", + ".spectrum-Combobox:hover:has(:focus) .spectrum-Combobox-button.is-invalid:not(:disabled, .spectrum-PickerButton--quiet)", ".spectrum-Combobox.is-focused .spectrum-Combobox-button:not(:disabled, .is-invalid, .spectrum-PickerButton--quiet)", - ".spectrum-Combobox.is-focused:hover .spectrum-Combobox-button.is-invalid:not(:disabled, .spectrum-PickerButton--quiet)", + ".spectrum-Combobox.is-focused .spectrum-Combobox-button.is-invalid:not(:disabled, .spectrum-PickerButton--quiet)", ".spectrum-Combobox.is-focused:hover .spectrum-Combobox-button:not(:disabled, .is-invalid, .spectrum-PickerButton--quiet)", - ".spectrum-Combobox.is-keyboardFocused .spectrum-Combobox-button.is-invalid:not(:disabled, .spectrum-PickerButton--quiet)", + ".spectrum-Combobox.is-focused:hover .spectrum-Combobox-button.is-invalid:not(:disabled, .spectrum-PickerButton--quiet)", ".spectrum-Combobox.is-keyboardFocused .spectrum-Combobox-button:not(:disabled, .is-invalid, .spectrum-PickerButton--quiet)", - ".spectrum-Combobox.is-readOnly.is-disabled:not(.spectrum-Combobox--quiet) .spectrum-Combobox-input:read-only", - ".spectrum-Combobox.is-readOnly.is-disabled:not(.spectrum-Combobox--quiet) .spectrum-Combobox-input:read-only:hover", - ".spectrum-Combobox.is-readOnly.is-invalid:not(.spectrum-Combobox--quiet) .spectrum-Combobox-input:read-only", + ".spectrum-Combobox.is-keyboardFocused .spectrum-Combobox-button.is-invalid:not(:disabled, .spectrum-PickerButton--quiet)", ".spectrum-Combobox.is-readOnly:not(.spectrum-Combobox--quiet) .spectrum-Combobox-input:read-only", ".spectrum-Combobox.is-readOnly:not(.spectrum-Combobox--quiet) .spectrum-Combobox-input:read-only:hover", ".spectrum-Combobox.is-readOnly:not(.spectrum-Combobox--quiet) .spectrum-Combobox-textfield.is-keyboardFocused .spectrum-Combobox-input", - ".spectrum-Combobox:has(:active) .spectrum-Combobox-button.is-invalid:not(:disabled, .spectrum-PickerButton--quiet)", - ".spectrum-Combobox:has(:active) .spectrum-Combobox-button:not(:disabled, .is-invalid, .spectrum-PickerButton--quiet)", - ".spectrum-Combobox:has(:focus) .spectrum-Combobox-button.is-invalid:not(:disabled, .spectrum-PickerButton--quiet)", - ".spectrum-Combobox:has(:focus) .spectrum-Combobox-button:not(:disabled, .is-invalid, .spectrum-PickerButton--quiet)", - ".spectrum-Combobox:hover .spectrum-Combobox-button.is-invalid:not(:disabled, .spectrum-PickerButton--quiet)", - ".spectrum-Combobox:hover .spectrum-Combobox-button:not(:disabled, .is-invalid, .spectrum-PickerButton--quiet)", - ".spectrum-Combobox:hover:has(:focus) .spectrum-Combobox-button.is-invalid:not(:disabled, .spectrum-PickerButton--quiet)", - ".spectrum-Combobox:hover:has(:focus) .spectrum-Combobox-button:not(:disabled, .is-invalid, .spectrum-PickerButton--quiet)", + ".spectrum-Combobox.is-readOnly.is-disabled:not(.spectrum-Combobox--quiet) .spectrum-Combobox-input:read-only", + ".spectrum-Combobox.is-readOnly.is-disabled:not(.spectrum-Combobox--quiet) .spectrum-Combobox-input:read-only:hover", + ".spectrum-Combobox.is-readOnly.is-invalid:not(.spectrum-Combobox--quiet) .spectrum-Combobox-input:read-only", ".spectrum-Textfield.is-disabled .spectrum-Textfield-validationIcon", ".spectrum-Textfield.is-loading .spectrum-Textfield-validationIcon", ".spectrum-Textfield.is-readOnly .spectrum-Textfield-validationIcon", "[dir=\"rtl\"] .spectrum-Combobox-progress-circle" ], - "modifiers": [ - "--mod-combobox-alert-icon-color", - "--mod-combobox-background-color-default", - "--mod-combobox-background-color-disabled", - "--mod-combobox-background-color-focus", - "--mod-combobox-background-color-focus-hover", - "--mod-combobox-background-color-hover", - "--mod-combobox-background-color-key-focus", - "--mod-combobox-block-size", - "--mod-combobox-block-spacing-edge-to-alert", - "--mod-combobox-block-spacing-edge-to-progress-circle", - "--mod-combobox-border-color-default", - "--mod-combobox-border-color-disabled", - "--mod-combobox-border-color-focus", - "--mod-combobox-border-color-focus-hover", - "--mod-combobox-border-color-hover", - "--mod-combobox-border-color-invalid-default", - "--mod-combobox-border-color-invalid-focus", - "--mod-combobox-border-color-invalid-focus-hover", - "--mod-combobox-border-color-invalid-hover", - "--mod-combobox-border-color-invalid-key-focus", - "--mod-combobox-border-color-key-focus", - "--mod-combobox-border-radius", - "--mod-combobox-border-width", - "--mod-combobox-button-inline-offset", - "--mod-combobox-button-width", - "--mod-combobox-focus-indicator-color", - "--mod-combobox-focus-indicator-gap", - "--mod-combobox-focus-indicator-thickness", - "--mod-combobox-font-color-default", - "--mod-combobox-font-color-disabled", - "--mod-combobox-font-color-focus", - "--mod-combobox-font-color-focus-hover", - "--mod-combobox-font-color-hover", - "--mod-combobox-font-color-key-focus", - "--mod-combobox-font-color-placeholder", - "--mod-combobox-font-family", - "--mod-combobox-font-size", - "--mod-combobox-font-style", - "--mod-combobox-font-weight", - "--mod-combobox-icon-size", - "--mod-combobox-inline-size", - "--mod-combobox-line-height", - "--mod-combobox-min-inline-size", - "--mod-combobox-readonly-border-color-disabled", - "--mod-combobox-readonly-input-border-color", - "--mod-combobox-spacing-block-end-edge-to-text", - "--mod-combobox-spacing-block-start-edge-to-text", - "--mod-combobox-spacing-edge-to-menu", - "--mod-combobox-spacing-inline-end-edge-to-text", - "--mod-combobox-spacing-inline-icon-to-button", - "--mod-combobox-spacing-inline-start-edge-to-text", - "--mod-combobox-spacing-label-to-combobox" - ], - "component": [ - "--spectrum-combo-box-minimum-width-multiplier", - "--spectrum-combo-box-quiet-minimum-width-multiplier", - "--spectrum-combo-box-visual-to-field-button-extra-large", - "--spectrum-combo-box-visual-to-field-button-large", - "--spectrum-combo-box-visual-to-field-button-medium", - "--spectrum-combo-box-visual-to-field-button-quiet", - "--spectrum-combo-box-visual-to-field-button-small", - "--spectrum-combobox-background-color-disabled", - "--spectrum-combobox-block-size", - "--spectrum-combobox-block-spacing-edge-to-alert", - "--spectrum-combobox-block-spacing-edge-to-progress-circle", - "--spectrum-combobox-border-color-default", - "--spectrum-combobox-border-color-disabled", - "--spectrum-combobox-border-color-focus", - "--spectrum-combobox-border-color-focus-hover", - "--spectrum-combobox-border-color-hover", - "--spectrum-combobox-border-color-invalid-default", - "--spectrum-combobox-border-color-invalid-focus", - "--spectrum-combobox-border-color-invalid-focus-hover", - "--spectrum-combobox-border-color-invalid-hover", - "--spectrum-combobox-border-color-invalid-key-focus", - "--spectrum-combobox-border-color-key-focus", - "--spectrum-combobox-border-radius", - "--spectrum-combobox-border-width", - "--spectrum-combobox-button-inline-offset", - "--spectrum-combobox-button-width", - "--spectrum-combobox-focus-indicator-color", - "--spectrum-combobox-focus-indicator-gap", - "--spectrum-combobox-focus-indicator-thickness", - "--spectrum-combobox-font-size", - "--spectrum-combobox-font-style", - "--spectrum-combobox-icon-size", - "--spectrum-combobox-inline-size", - "--spectrum-combobox-line-height", - "--spectrum-combobox-min-inline-size", - "--spectrum-combobox-readonly-background-color-disabled", - "--spectrum-combobox-readonly-border-color-disabled", - "--spectrum-combobox-readonly-border-color-invalid-default", - "--spectrum-combobox-readonly-input-background-color", - "--spectrum-combobox-readonly-input-border-color", - "--spectrum-combobox-readonly-text-color-disabled", - "--spectrum-combobox-spacing-block-end-edge-to-text", - "--spectrum-combobox-spacing-block-start-edge-to-text", - "--spectrum-combobox-spacing-edge-to-menu", - "--spectrum-combobox-spacing-inline-end-edge-to-text", - "--spectrum-combobox-spacing-inline-icon-to-button", - "--spectrum-combobox-spacing-inline-start-edge-to-text", - "--spectrum-combobox-spacing-label-to-combobox" - ], - "global": [ - "--spectrum-border-width-100", - "--spectrum-component-bottom-to-text-100", - "--spectrum-component-bottom-to-text-200", - "--spectrum-component-bottom-to-text-300", - "--spectrum-component-bottom-to-text-75", - "--spectrum-component-edge-to-text-100", - "--spectrum-component-edge-to-text-200", - "--spectrum-component-edge-to-text-300", - "--spectrum-component-edge-to-text-75", - "--spectrum-component-height-100", - "--spectrum-component-height-200", - "--spectrum-component-height-300", - "--spectrum-component-height-75", - "--spectrum-component-to-menu-extra-large", - "--spectrum-component-to-menu-large", - "--spectrum-component-to-menu-medium", - "--spectrum-component-to-menu-small", - "--spectrum-component-top-to-text-100", - "--spectrum-component-top-to-text-200", - "--spectrum-component-top-to-text-300", - "--spectrum-component-top-to-text-75", - "--spectrum-corner-radius-100", - "--spectrum-default-font-style", - "--spectrum-disabled-background-color", - "--spectrum-disabled-border-color", - "--spectrum-disabled-content-color", - "--spectrum-field-edge-to-text-quiet", - "--spectrum-field-label-to-component", - "--spectrum-field-label-to-component-quiet-extra-large", - "--spectrum-field-label-to-component-quiet-large", - "--spectrum-field-label-to-component-quiet-medium", - "--spectrum-field-label-to-component-quiet-small", - "--spectrum-field-top-to-alert-icon-extra-large", - "--spectrum-field-top-to-alert-icon-large", - "--spectrum-field-top-to-alert-icon-medium", - "--spectrum-field-top-to-alert-icon-small", - "--spectrum-field-top-to-progress-circle-extra-large", - "--spectrum-field-top-to-progress-circle-large", - "--spectrum-field-top-to-progress-circle-medium", - "--spectrum-field-top-to-progress-circle-small", - "--spectrum-field-width", - "--spectrum-focus-indicator-color", - "--spectrum-focus-indicator-gap", - "--spectrum-focus-indicator-thickness", - "--spectrum-font-size-100", - "--spectrum-font-size-200", - "--spectrum-font-size-300", - "--spectrum-font-size-75", - "--spectrum-gray-25", - "--spectrum-gray-50", - "--spectrum-gray-500", - "--spectrum-gray-600", - "--spectrum-gray-800", - "--spectrum-gray-900", - "--spectrum-line-height-100", - "--spectrum-negative-border-color-default", - "--spectrum-negative-border-color-focus", - "--spectrum-negative-border-color-focus-hover", - "--spectrum-negative-border-color-hover", - "--spectrum-negative-border-color-key-focus", - "--spectrum-workflow-icon-size-100", - "--spectrum-workflow-icon-size-200", - "--spectrum-workflow-icon-size-300", - "--spectrum-workflow-icon-size-75" - ], - "system-theme": [ - "--system-combobox-background-color-disabled", - "--system-combobox-border-color-default", - "--system-combobox-border-color-disabled", - "--system-combobox-border-color-focus", - "--system-combobox-border-color-focus-hover", - "--system-combobox-border-color-hover", - "--system-combobox-border-color-key-focus", - "--system-combobox-readonly-input-border-color" - ], - "passthroughs": [ - "--mod-picker-button-background-color", - "--mod-picker-button-background-color-disabled", - "--mod-picker-button-background-color-quiet", - "--mod-picker-button-border-color", - "--mod-picker-button-border-color-disabled", - "--mod-picker-button-border-color-quiet", - "--mod-picker-button-border-width", - "--mod-picker-button-font-color-disabled", - "--mod-textfield-background-color", - "--mod-textfield-background-color-disabled", - "--mod-textfield-border-color", - "--mod-textfield-border-color-disabled", - "--mod-textfield-border-color-focus", - "--mod-textfield-border-color-focus-hover", - "--mod-textfield-border-color-hover", - "--mod-textfield-border-color-invalid-default", - "--mod-textfield-border-color-invalid-focus", - "--mod-textfield-border-color-invalid-focus-hover", - "--mod-textfield-border-color-invalid-hover", - "--mod-textfield-border-color-invalid-keyboard-focus", - "--mod-textfield-border-color-keyboard-focus", - "--mod-textfield-border-width", - "--mod-textfield-focus-indicator-color", - "--mod-textfield-focus-indicator-gap", - "--mod-textfield-focus-indicator-width", - "--mod-textfield-font-family", - "--mod-textfield-font-weight", - "--mod-textfield-icon-color-invalid", - "--mod-textfield-text-color-default", - "--mod-textfield-text-color-disabled", - "--mod-textfield-text-color-focus", - "--mod-textfield-text-color-focus-hover", - "--mod-textfield-text-color-hover", - "--mod-textfield-text-color-keyboard-focus" - ], - "high-contrast": [ - "--highcontrast-combobox-border-color-highlight", - "--highcontrast-combobox-border-color-invalid", - "--highcontrast-textfield-border-color-invalid-default", - "--highcontrast-textfield-text-color-disabled" - ] + "modifiers": { + "mod-combobox-focus-indicator-gap": { + "value": "var(--spectrum-combobox-focus-indicator-gap)", + "description": "Used by `--mod-textfield-focus-indicator-gap`.
Defaults to `var(--spectrum-combobox-focus-indicator-gap)`, if not set.", + "control": "text", + "category": "Modifier" + }, + "mod-combobox-focus-indicator-thickness": { + "value": "var(--spectrum-combobox-focus-indicator-thickness)", + "description": "Used by `--mod-textfield-focus-indicator-width`.
Defaults to `var(--spectrum-combobox-focus-indicator-thickness)`, if not set.", + "control": "text", + "category": "Modifier" + }, + "mod-combobox-focus-indicator-color": { + "value": "var(--spectrum-combobox-focus-indicator-color)", + "description": "Used by `--mod-textfield-focus-indicator-color`.
Defaults to `var(--spectrum-combobox-focus-indicator-color)`, if not set.", + "control": "color", + "category": "Modifier" + }, + "mod-combobox-background-color-default": { + "description": "Used by `--mod-textfield-background-color`, `--mod-picker-button-background-color`.", + "control": "color", + "category": "Modifier" + }, + "mod-combobox-background-color-disabled": { + "value": "var(--spectrum-combobox-background-color-disabled)", + "description": "Used by `--mod-textfield-background-color-disabled`, `--mod-picker-button-background-color-disabled`.
Defaults to `var(--spectrum-combobox-background-color-disabled)`, if not set.", + "control": "color", + "category": "Modifier" + }, + "mod-combobox-font-family": { + "description": "Used by `--mod-textfield-font-family`.", + "control": "text", + "category": "Modifier" + }, + "mod-combobox-font-weight": { + "description": "Used by `--mod-textfield-font-weight`.", + "control": "text", + "category": "Modifier" + }, + "mod-combobox-font-color-default": { + "description": "Used by `--mod-textfield-text-color-default`.", + "control": "color", + "category": "Modifier" + }, + "mod-combobox-font-color-hover": { + "description": "Used by `--mod-textfield-text-color-hover`.", + "control": "color", + "category": "Modifier" + }, + "mod-combobox-font-color-focus": { + "description": "Used by `--mod-textfield-text-color-focus`.", + "control": "color", + "category": "Modifier" + }, + "mod-combobox-font-color-focus-hover": { + "description": "Used by `--mod-textfield-text-color-focus-hover`.", + "control": "color", + "category": "Modifier" + }, + "mod-combobox-font-color-key-focus": { + "description": "Used by `--mod-textfield-text-color-keyboard-focus`.", + "control": "color", + "category": "Modifier" + }, + "mod-combobox-font-color-disabled": { + "description": "Used by `--mod-textfield-text-color-disabled`, `--mod-picker-button-font-color-disabled`.", + "control": "color", + "category": "Modifier" + }, + "mod-combobox-border-width": { + "value": "var(--spectrum-combobox-border-width)", + "description": "Used by `--mod-textfield-border-width`, `--mod-picker-button-border-width`, `.spectrum-Combobox-input`, `.spectrum-Combobox-textfield.is-invalid .spectrum-Combobox-input, .spectrum-Combobox-textfield.is-loading .spectrum-Combobox-input`, `.spectrum-Combobox--quiet .spectrum-Combobox-textfield.is-readOnly .spectrum-Combobox-input:read-only`, `.spectrum-Combobox--quiet .spectrum-Combobox-input`.
Defaults to `var(--spectrum-combobox-border-width)`, if not set.", + "control": "text", + "category": "Modifier" + }, + "mod-combobox-border-color-default": { + "value": "var(--spectrum-combobox-border-color-default)", + "description": "Defined in `.spectrum-Combobox-input:focus, .spectrum-Combobox-textfield.is-focused .spectrum-Combobox-input`, `.spectrum-Combobox-input:focus:hover, .spectrum-Combobox-textfield.is-focused .spectrum-Combobox-input:hover`, `.spectrum-Combobox-textfield.is-keyboardFocused .spectrum-Combobox-input`.
Used by `--mod-textfield-border-color`, `--mod-picker-button-border-color`.
Defaults to `var(--spectrum-combobox-border-color-default)`, if not set.", + "control": "color", + "category": "Modifier" + }, + "mod-combobox-border-color-disabled": { + "value": "var(--spectrum-combobox-border-color-disabled)", + "description": "Used by `--mod-textfield-border-color-disabled`, `--mod-picker-button-border-color-disabled`.
Defaults to `var(--spectrum-combobox-border-color-disabled)`, if not set.", + "control": "color", + "category": "Modifier" + }, + "mod-combobox-border-color-focus": { + "value": "var(--spectrum-combobox-border-color-focus)", + "description": "Used by `--mod-textfield-border-color-focus`, `--mod-picker-button-border-color`.
Defaults to `var(--spectrum-combobox-border-color-focus)`, if not set.", + "control": "color", + "category": "Modifier" + }, + "mod-combobox-border-color-focus-hover": { + "value": "var(--spectrum-combobox-border-color-focus-hover)", + "description": "Used by `--mod-textfield-border-color-focus-hover`, `--mod-picker-button-border-color`.
Defaults to `var(--spectrum-combobox-border-color-focus-hover)`, if not set.", + "control": "color", + "category": "Modifier" + }, + "mod-combobox-border-color-hover": { + "value": "var(--spectrum-combobox-border-color-hover)", + "description": "Used by `--mod-textfield-border-color-hover`, `--mod-picker-button-border-color`.
Defaults to `var(--spectrum-combobox-border-color-hover)`, if not set.", + "control": "color", + "category": "Modifier" + }, + "mod-combobox-border-color-key-focus": { + "value": "var(--spectrum-combobox-border-color-key-focus)", + "description": "Used by `--mod-textfield-border-color-keyboard-focus`, `--mod-picker-button-border-color`.
Defaults to `var(--spectrum-combobox-border-color-key-focus)`, if not set.", + "control": "color", + "category": "Modifier" + }, + "mod-combobox-border-color-invalid-default": { + "value": "var(--spectrum-combobox-border-color-invalid-default)", + "description": "Used by `--mod-textfield-border-color-invalid-default`, `--mod-picker-button-border-color`.
Defaults to `var(--spectrum-combobox-border-color-invalid-default)`, if not set.", + "control": "color", + "category": "Modifier" + }, + "mod-combobox-border-color-invalid-hover": { + "value": "var(--spectrum-combobox-border-color-invalid-hover)", + "description": "Used by `--mod-textfield-border-color-invalid-hover`, `--mod-picker-button-border-color`.
Defaults to `var(--spectrum-combobox-border-color-invalid-hover)`, if not set.", + "control": "color", + "category": "Modifier" + }, + "mod-combobox-border-color-invalid-focus": { + "value": "var(--spectrum-combobox-border-color-invalid-focus)", + "description": "Used by `--mod-textfield-border-color-invalid-focus`, `--mod-picker-button-border-color`.
Defaults to `var(--spectrum-combobox-border-color-invalid-focus)`, if not set.", + "control": "color", + "category": "Modifier" + }, + "mod-combobox-border-color-invalid-focus-hover": { + "value": "var(--spectrum-combobox-border-color-invalid-focus-hover)", + "description": "Used by `--mod-textfield-border-color-invalid-focus-hover`, `--mod-picker-button-border-color`.
Defaults to `var(--spectrum-combobox-border-color-invalid-focus-hover)`, if not set.", + "control": "color", + "category": "Modifier" + }, + "mod-combobox-border-color-invalid-key-focus": { + "value": "var(--spectrum-combobox-border-color-invalid-key-focus)", + "description": "Used by `--mod-textfield-border-color-invalid-keyboard-focus`, `--mod-picker-button-border-color`.
Defaults to `var(--spectrum-combobox-border-color-invalid-key-focus)`, if not set.", + "control": "color", + "category": "Modifier" + }, + "mod-combobox-alert-icon-color": { + "description": "Used by `--mod-textfield-icon-color-invalid`.", + "control": "color", + "category": "Modifier" + }, + "mod-combobox-block-size": { + "value": "var(--spectrum-combobox-block-size)", + "description": "Used by `--spectrum-combobox-button-inline-offset`, `.spectrum-Combobox`.
Defaults to `var(--spectrum-combobox-block-size)`, if not set.", + "control": "text", + "category": "Modifier" + }, + "mod-combobox-icon-size": { + "value": "var(--spectrum-combobox-icon-size)", + "description": "Used by `--spectrum-combobox-button-inline-offset`, `.spectrum-Combobox-textfield.is-invalid .spectrum-Combobox-input, .spectrum-Combobox-textfield.is-loading .spectrum-Combobox-input`, `.spectrum-Combobox-textfield.is-invalid .spectrum-Textfield-validationIcon`, `.spectrum-Combobox--quiet .spectrum-Combobox-textfield.is-invalid .spectrum-Combobox-input, .spectrum-Combobox--quiet .spectrum-Combobox-textfield.is-loading .spectrum-Combobox-input`.
Defaults to `var(--spectrum-combobox-icon-size)`, if not set.", + "control": "text", + "category": "Modifier" + }, + "mod-combobox-inline-size": { + "value": "var(--spectrum-combobox-inline-size)", + "description": "Used by `.spectrum-Combobox`.
Defaults to `var(--spectrum-combobox-inline-size)`, if not set.", + "control": "text", + "category": "Modifier" + }, + "mod-combobox-min-inline-size": { + "value": "var(--spectrum-combobox-min-inline-size)", + "description": "Used by `.spectrum-Combobox`.
Defaults to `var(--spectrum-combobox-min-inline-size)`, if not set.", + "control": "text", + "category": "Modifier" + }, + "mod-combobox-spacing-label-to-combobox": { + "value": "var(--spectrum-combobox-spacing-label-to-combobox)", + "description": "Used by `.spectrum-Combobox`.
Defaults to `var(--spectrum-combobox-spacing-label-to-combobox)`, if not set.", + "control": "text", + "category": "Modifier" + }, + "mod-combobox-border-radius": { + "value": "var(--spectrum-combobox-border-radius)", + "description": "Used by `.spectrum-Combobox`.
Defaults to `var(--spectrum-combobox-border-radius)`, if not set.", + "control": "text", + "category": "Modifier" + }, + "mod-combobox-spacing-edge-to-menu": { + "value": "var(--spectrum-combobox-spacing-edge-to-menu)", + "description": "Used by `.spectrum-Combobox .spectrum-Popover.is-open`.
Defaults to `var(--spectrum-combobox-spacing-edge-to-menu)`, if not set.", + "control": "text", + "category": "Modifier" + }, + "mod-combobox-readonly-border-color-disabled": { + "value": "var(--spectrum-combobox-readonly-border-color-disabled, transparent)", + "description": "Used by `.spectrum-Combobox.is-readOnly.is-disabled:not(.spectrum-Combobox--quiet) .spectrum-Combobox-input:read-only`.
Defaults to `var(--spectrum-combobox-readonly-border-color-disabled, transparent)`, if not set.", + "control": "color", + "category": "Modifier" + }, + "mod-combobox-spacing-inline-icon-to-button": { + "value": "var(--spectrum-combobox-spacing-inline-icon-to-button)", + "description": "Used by `.spectrum-Combobox-progress-circle`, `.spectrum-Combobox-progress-circle:dir(rtl), [dir=\"rtl\"] .spectrum-Combobox-progress-circle`, `.spectrum-Combobox-textfield.is-invalid .spectrum-Combobox-input, .spectrum-Combobox-textfield.is-loading .spectrum-Combobox-input`, `.spectrum-Combobox-textfield.is-invalid .spectrum-Textfield-validationIcon`, `.spectrum-Combobox--quiet .spectrum-Combobox-textfield.is-invalid .spectrum-Combobox-input, .spectrum-Combobox--quiet .spectrum-Combobox-textfield.is-loading .spectrum-Combobox-input`.
Defaults to `var(--spectrum-combobox-spacing-inline-icon-to-button)`, if not set.", + "control": "text", + "category": "Modifier" + }, + "mod-combobox-button-width": { + "value": "var(--spectrum-combobox-button-width)", + "description": "Used by `.spectrum-Combobox-progress-circle`, `.spectrum-Combobox-progress-circle:dir(rtl), [dir=\"rtl\"] .spectrum-Combobox-progress-circle`, `.spectrum-Combobox-input`, `.spectrum-Combobox-textfield.is-invalid .spectrum-Combobox-input, .spectrum-Combobox-textfield.is-loading .spectrum-Combobox-input`, `.spectrum-Combobox-textfield.is-invalid .spectrum-Textfield-validationIcon`, `.spectrum-Combobox--quiet .spectrum-Combobox-textfield.is-invalid .spectrum-Textfield-validationIcon`, `.spectrum-Combobox--quiet .spectrum-Combobox-input`, `.spectrum-Combobox--quiet .spectrum-Combobox-textfield.is-invalid .spectrum-Combobox-input, .spectrum-Combobox--quiet .spectrum-Combobox-textfield.is-loading .spectrum-Combobox-input`.
Defaults to `var(--spectrum-combobox-button-width)`, if not set.", + "control": "text", + "category": "Modifier" + }, + "mod-combobox-block-spacing-edge-to-progress-circle": { + "value": "var(--spectrum-combobox-block-spacing-edge-to-progress-circle)", + "description": "Used by `.spectrum-Combobox-progress-circle`.
Defaults to `var(--spectrum-combobox-block-spacing-edge-to-progress-circle)`, if not set.", + "control": "text", + "category": "Modifier" + }, + "mod-combobox-block-spacing-edge-to-alert": { + "value": "var(--spectrum-combobox-block-spacing-edge-to-alert)", + "description": "Used by `.spectrum-Combobox-progress-circle`, `.spectrum-Combobox-textfield.is-invalid .spectrum-Textfield-validationIcon`.
Defaults to `var(--spectrum-combobox-block-spacing-edge-to-alert)`, if not set.", + "control": "text", + "category": "Modifier" + }, + "mod-combobox-button-inline-offset": { + "value": "var(--spectrum-combobox-button-inline-offset, 0px)", + "description": "Used by `.spectrum-Combobox-button`, `.spectrum-Combobox-textfield.is-invalid .spectrum-Combobox-input, .spectrum-Combobox-textfield.is-loading .spectrum-Combobox-input`, `.spectrum-Combobox--quiet .spectrum-Combobox-input`, `.spectrum-Combobox--quiet .spectrum-Combobox-textfield.is-invalid .spectrum-Combobox-input, .spectrum-Combobox--quiet .spectrum-Combobox-textfield.is-loading .spectrum-Combobox-input`.
Defaults to `var(--spectrum-combobox-button-inline-offset, 0px)`, if not set.", + "control": "text", + "category": "Modifier" + }, + "mod-combobox-spacing-block-start-edge-to-text": { + "value": "var(--spectrum-combobox-spacing-block-start-edge-to-text)", + "description": "Used by `.spectrum-Combobox-input`, `.spectrum-Combobox--quiet .spectrum-Combobox-input`.
Defaults to `var(--spectrum-combobox-spacing-block-start-edge-to-text)`, if not set.", + "control": "text", + "category": "Modifier" + }, + "mod-combobox-spacing-block-end-edge-to-text": { + "value": "var(--spectrum-combobox-spacing-block-end-edge-to-text)", + "description": "Used by `.spectrum-Combobox-input`, `.spectrum-Combobox--quiet .spectrum-Combobox-input`.
Defaults to `var(--spectrum-combobox-spacing-block-end-edge-to-text)`, if not set.", + "control": "text", + "category": "Modifier" + }, + "mod-combobox-spacing-inline-start-edge-to-text": { + "value": "var(--spectrum-combobox-spacing-inline-start-edge-to-text)", + "description": "Used by `.spectrum-Combobox-input`, `.spectrum-Combobox--quiet .spectrum-Combobox-input`.
Defaults to `var(--spectrum-combobox-spacing-inline-start-edge-to-text)`, if not set.", + "control": "text", + "category": "Modifier" + }, + "mod-combobox-spacing-inline-end-edge-to-text": { + "value": "var(--spectrum-combobox-spacing-inline-end-edge-to-text)", + "description": "Used by `.spectrum-Combobox-input`, `.spectrum-Combobox-textfield.is-invalid .spectrum-Combobox-input, .spectrum-Combobox-textfield.is-loading .spectrum-Combobox-input`, `.spectrum-Combobox--quiet .spectrum-Combobox-input`, `.spectrum-Combobox--quiet .spectrum-Combobox-textfield.is-invalid .spectrum-Combobox-input, .spectrum-Combobox--quiet .spectrum-Combobox-textfield.is-loading .spectrum-Combobox-input`.
Defaults to `var(--spectrum-combobox-spacing-inline-end-edge-to-text)`, if not set.", + "control": "text", + "category": "Modifier" + }, + "mod-combobox-line-height": { + "value": "var(--spectrum-combobox-line-height)", + "description": "Used by `.spectrum-Combobox-input`.
Defaults to `var(--spectrum-combobox-line-height)`, if not set.", + "control": "text", + "category": "Modifier" + }, + "mod-combobox-font-size": { + "value": "var(--spectrum-combobox-font-size)", + "description": "Used by `.spectrum-Combobox-input`.
Defaults to `var(--spectrum-combobox-font-size)`, if not set.", + "control": "text", + "category": "Modifier" + }, + "mod-combobox-font-style": { + "value": "var(--spectrum-combobox-font-style)", + "description": "Used by `.spectrum-Combobox-input`.
Defaults to `var(--spectrum-combobox-font-style)`, if not set.", + "control": "text", + "category": "Modifier" + }, + "mod-combobox-font-color-placeholder": { + "description": "Used by `--mod-textfield-text-color-default`.", + "control": "color", + "category": "Modifier" + }, + "mod-combobox-background-color-hover": { + "description": "Used by `--mod-textfield-background-color`.", + "control": "color", + "category": "Modifier" + }, + "mod-combobox-background-color-focus": { + "description": "Used by `--mod-textfield-background-color`.", + "control": "color", + "category": "Modifier" + }, + "mod-combobox-background-color-focus-hover": { + "description": "Used by `--mod-textfield-background-color`.", + "control": "color", + "category": "Modifier" + }, + "mod-combobox-background-color-key-focus": { + "description": "Used by `--mod-textfield-background-color`.", + "control": "color", + "category": "Modifier" + }, + "mod-combobox-readonly-input-border-color": { + "value": "var(--spectrum-combobox-readonly-input-border-color)", + "description": "Used by `.spectrum-Combobox--quiet .spectrum-Combobox-textfield.is-readOnly .spectrum-Combobox-input:read-only`.
Defaults to `var(--spectrum-combobox-readonly-input-border-color)`, if not set.", + "control": "color", + "category": "Modifier" + } + }, + "component": { + "spectrum-combobox-inline-size": { + "description": "Defined in `.spectrum-Combobox`.
Used by `.spectrum-Combobox`.", + "control": "text", + "category": "Component" + }, + "spectrum-combobox-block-size": { + "description": "Defined in `.spectrum-Combobox`, `.spectrum-Combobox, .spectrum-Combobox--sizeM`, `.spectrum-Combobox--sizeS`, `.spectrum-Combobox--sizeL`, `.spectrum-Combobox--sizeXL`.
Used by `--spectrum-combobox-min-inline-size`, `--spectrum-combobox-button-width`, `--spectrum-combobox-button-inline-offset`, `.spectrum-Combobox`.", + "control": "text", + "category": "Component" + }, + "spectrum-combobox-min-inline-size": { + "description": "Defined in `.spectrum-Combobox`, `.spectrum-Combobox--quiet`.
Used by `.spectrum-Combobox`.", + "control": "text", + "category": "Component" + }, + "spectrum-combo-box-minimum-width-multiplier": { + "value": "2.5", + "description": "Used by `--spectrum-combobox-min-inline-size`.", + "control": "text", + "category": "Component" + }, + "spectrum-combobox-button-width": { + "description": "Defined in `.spectrum-Combobox`.
Used by `.spectrum-Combobox-progress-circle`, `.spectrum-Combobox-progress-circle:dir(rtl), [dir=\"rtl\"] .spectrum-Combobox-progress-circle`, `.spectrum-Combobox-input`, `.spectrum-Combobox-textfield.is-invalid .spectrum-Combobox-input, .spectrum-Combobox-textfield.is-loading .spectrum-Combobox-input`, `.spectrum-Combobox-textfield.is-invalid .spectrum-Textfield-validationIcon`, `.spectrum-Combobox--quiet .spectrum-Combobox-textfield.is-invalid .spectrum-Textfield-validationIcon`, `.spectrum-Combobox--quiet .spectrum-Combobox-input`, `.spectrum-Combobox--quiet .spectrum-Combobox-textfield.is-invalid .spectrum-Combobox-input, .spectrum-Combobox--quiet .spectrum-Combobox-textfield.is-loading .spectrum-Combobox-input`.", + "control": "text", + "category": "Component" + }, + "spectrum-combobox-icon-size": { + "description": "Defined in `.spectrum-Combobox`, `.spectrum-Combobox, .spectrum-Combobox--sizeM`, `.spectrum-Combobox--sizeS`, `.spectrum-Combobox--sizeL`, `.spectrum-Combobox--sizeXL`.
Used by `--spectrum-combobox-button-inline-offset`, `.spectrum-Combobox-textfield.is-invalid .spectrum-Combobox-input, .spectrum-Combobox-textfield.is-loading .spectrum-Combobox-input`, `.spectrum-Combobox-textfield.is-invalid .spectrum-Textfield-validationIcon`, `.spectrum-Combobox--quiet .spectrum-Combobox-textfield.is-invalid .spectrum-Combobox-input, .spectrum-Combobox--quiet .spectrum-Combobox-textfield.is-loading .spectrum-Combobox-input`.", + "control": "text", + "category": "Component" + }, + "spectrum-combobox-font-size": { + "description": "Defined in `.spectrum-Combobox`, `.spectrum-Combobox, .spectrum-Combobox--sizeM`, `.spectrum-Combobox--sizeS`, `.spectrum-Combobox--sizeL`, `.spectrum-Combobox--sizeXL`.
Used by `.spectrum-Combobox-input`.", + "control": "text", + "category": "Component" + }, + "spectrum-combobox-spacing-inline-icon-to-button": { + "description": "Defined in `.spectrum-Combobox`, `.spectrum-Combobox, .spectrum-Combobox--sizeM`, `.spectrum-Combobox--sizeS`, `.spectrum-Combobox--sizeL`, `.spectrum-Combobox--sizeXL`, `.spectrum-Combobox--quiet`.
Used by `.spectrum-Combobox-progress-circle`, `.spectrum-Combobox-progress-circle:dir(rtl), [dir=\"rtl\"] .spectrum-Combobox-progress-circle`, `.spectrum-Combobox-textfield.is-invalid .spectrum-Combobox-input, .spectrum-Combobox-textfield.is-loading .spectrum-Combobox-input`, `.spectrum-Combobox-textfield.is-invalid .spectrum-Textfield-validationIcon`, `.spectrum-Combobox--quiet .spectrum-Combobox-textfield.is-invalid .spectrum-Combobox-input, .spectrum-Combobox--quiet .spectrum-Combobox-textfield.is-loading .spectrum-Combobox-input`.", + "control": "text", + "category": "Component" + }, + "spectrum-combo-box-visual-to-field-button-medium": { + "value": "8px", + "description": "Used by `--spectrum-combobox-spacing-inline-icon-to-button`.", + "control": "text", + "category": "Component" + }, + "spectrum-combobox-block-spacing-edge-to-progress-circle": { + "description": "Defined in `.spectrum-Combobox`, `.spectrum-Combobox, .spectrum-Combobox--sizeM`, `.spectrum-Combobox--sizeS`, `.spectrum-Combobox--sizeL`, `.spectrum-Combobox--sizeXL`.
Used by `.spectrum-Combobox-progress-circle`.", + "control": "text", + "category": "Component" + }, + "spectrum-combobox-block-spacing-edge-to-alert": { + "description": "Defined in `.spectrum-Combobox`, `.spectrum-Combobox, .spectrum-Combobox--sizeM`, `.spectrum-Combobox--sizeS`, `.spectrum-Combobox--sizeL`, `.spectrum-Combobox--sizeXL`.
Used by `.spectrum-Combobox-progress-circle`, `.spectrum-Combobox-textfield.is-invalid .spectrum-Textfield-validationIcon`.", + "control": "text", + "category": "Component" + }, + "spectrum-combobox-spacing-edge-to-menu": { + "description": "Defined in `.spectrum-Combobox`, `.spectrum-Combobox, .spectrum-Combobox--sizeM`, `.spectrum-Combobox--sizeS`, `.spectrum-Combobox--sizeL`, `.spectrum-Combobox--sizeXL`.
Used by `.spectrum-Combobox .spectrum-Popover.is-open`.", + "control": "text", + "category": "Component" + }, + "spectrum-combobox-spacing-block-start-edge-to-text": { + "description": "Defined in `.spectrum-Combobox`, `.spectrum-Combobox, .spectrum-Combobox--sizeM`, `.spectrum-Combobox--sizeS`, `.spectrum-Combobox--sizeL`, `.spectrum-Combobox--sizeXL`.
Used by `.spectrum-Combobox-input`, `.spectrum-Combobox--quiet .spectrum-Combobox-input`.", + "control": "text", + "category": "Component" + }, + "spectrum-combobox-spacing-block-end-edge-to-text": { + "description": "Defined in `.spectrum-Combobox`, `.spectrum-Combobox, .spectrum-Combobox--sizeM`, `.spectrum-Combobox--sizeS`, `.spectrum-Combobox--sizeL`, `.spectrum-Combobox--sizeXL`.
Used by `.spectrum-Combobox-input`, `.spectrum-Combobox--quiet .spectrum-Combobox-input`.", + "control": "text", + "category": "Component" + }, + "spectrum-combobox-spacing-inline-start-edge-to-text": { + "description": "Defined in `.spectrum-Combobox`, `.spectrum-Combobox, .spectrum-Combobox--sizeM`, `.spectrum-Combobox--sizeS`, `.spectrum-Combobox--sizeL`, `.spectrum-Combobox--sizeXL`, `.spectrum-Combobox--quiet`.
Used by `.spectrum-Combobox-input`, `.spectrum-Combobox--quiet .spectrum-Combobox-input`.", + "control": "text", + "category": "Component" + }, + "spectrum-combobox-spacing-inline-end-edge-to-text": { + "description": "Defined in `.spectrum-Combobox`, `.spectrum-Combobox, .spectrum-Combobox--sizeM`, `.spectrum-Combobox--sizeS`, `.spectrum-Combobox--sizeL`, `.spectrum-Combobox--sizeXL`.
Used by `.spectrum-Combobox-input`, `.spectrum-Combobox-textfield.is-invalid .spectrum-Combobox-input, .spectrum-Combobox-textfield.is-loading .spectrum-Combobox-input`, `.spectrum-Combobox--quiet .spectrum-Combobox-input`, `.spectrum-Combobox--quiet .spectrum-Combobox-textfield.is-invalid .spectrum-Combobox-input, .spectrum-Combobox--quiet .spectrum-Combobox-textfield.is-loading .spectrum-Combobox-input`.", + "control": "text", + "category": "Component" + }, + "spectrum-combobox-focus-indicator-thickness": { + "description": "Defined in `.spectrum-Combobox`.
Used by `--mod-textfield-focus-indicator-width`.", + "control": "text", + "category": "Component" + }, + "spectrum-combobox-focus-indicator-gap": { + "description": "Defined in `.spectrum-Combobox`.
Used by `--mod-textfield-focus-indicator-gap`.", + "control": "text", + "category": "Component" + }, + "spectrum-combobox-focus-indicator-color": { + "description": "Defined in `.spectrum-Combobox`.
Used by `--mod-textfield-focus-indicator-color`.", + "control": "color", + "category": "Component" + }, + "spectrum-combobox-border-radius": { + "description": "Defined in `.spectrum-Combobox`.
Used by `.spectrum-Combobox`.", + "control": "text", + "category": "Component" + }, + "spectrum-combobox-border-width": { + "description": "Defined in `.spectrum-Combobox`.
Used by `--mod-textfield-border-width`, `--mod-picker-button-border-width`, `.spectrum-Combobox-input`, `.spectrum-Combobox-textfield.is-invalid .spectrum-Combobox-input, .spectrum-Combobox-textfield.is-loading .spectrum-Combobox-input`, `.spectrum-Combobox--quiet .spectrum-Combobox-textfield.is-readOnly .spectrum-Combobox-input:read-only`, `.spectrum-Combobox--quiet .spectrum-Combobox-input`.", + "control": "text", + "category": "Component" + }, + "spectrum-combobox-spacing-label-to-combobox": { + "description": "Defined in `.spectrum-Combobox`, `.spectrum-Combobox--quiet`, `.spectrum-Combobox--quiet.spectrum-Combobox--sizeS`, `.spectrum-Combobox--quiet.spectrum-Combobox--sizeM`, `.spectrum-Combobox--quiet.spectrum-Combobox--sizeL`, `.spectrum-Combobox--quiet.spectrum-Combobox--sizeXL`.
Used by `.spectrum-Combobox`.", + "control": "text", + "category": "Component" + }, + "spectrum-combobox-font-style": { + "description": "Defined in `.spectrum-Combobox`.
Used by `.spectrum-Combobox-input`.", + "control": "text", + "category": "Component" + }, + "spectrum-combobox-line-height": { + "description": "Defined in `.spectrum-Combobox`.
Used by `.spectrum-Combobox-input`.", + "control": "text", + "category": "Component" + }, + "spectrum-combobox-border-color-invalid-default": { + "description": "Defined in `.spectrum-Combobox`.
Used by `--mod-textfield-border-color-invalid-default`, `--mod-picker-button-border-color`.", + "control": "color", + "category": "Component" + }, + "spectrum-combobox-border-color-invalid-hover": { + "description": "Defined in `.spectrum-Combobox`.
Used by `--mod-textfield-border-color-invalid-hover`, `--mod-picker-button-border-color`.", + "control": "color", + "category": "Component" + }, + "spectrum-combobox-border-color-invalid-focus": { + "description": "Defined in `.spectrum-Combobox`.
Used by `--mod-textfield-border-color-invalid-focus`, `--mod-picker-button-border-color`.", + "control": "color", + "category": "Component" + }, + "spectrum-combobox-border-color-invalid-focus-hover": { + "description": "Defined in `.spectrum-Combobox`.
Used by `--mod-textfield-border-color-invalid-focus-hover`, `--mod-picker-button-border-color`.", + "control": "color", + "category": "Component" + }, + "spectrum-combobox-border-color-invalid-key-focus": { + "description": "Defined in `.spectrum-Combobox`.
Used by `--mod-textfield-border-color-invalid-keyboard-focus`, `--mod-picker-button-border-color`.", + "control": "color", + "category": "Component" + }, + "spectrum-combobox-background-color-disabled": { + "description": "Defined in `.spectrum-Combobox`.
Used by `--mod-textfield-background-color-disabled`.", + "control": "color", + "category": "Component" + }, + "spectrum-combobox-border-color-default": { + "description": "Defined in `.spectrum-Combobox`.
Used by `--mod-textfield-border-color`, `--mod-picker-button-border-color`.", + "control": "color", + "category": "Component" + }, + "spectrum-combobox-border-color-disabled": { + "description": "Defined in `.spectrum-Combobox`.
Used by `--mod-textfield-border-color-disabled`, `--mod-picker-button-border-color-disabled`.", + "control": "color", + "category": "Component" + }, + "spectrum-combobox-border-color-focus": { + "description": "Defined in `.spectrum-Combobox`.
Used by `--mod-textfield-border-color-focus`, `--mod-picker-button-border-color`, `--mod-combobox-border-color-default`.", + "control": "color", + "category": "Component" + }, + "spectrum-combobox-border-color-focus-hover": { + "description": "Defined in `.spectrum-Combobox`.
Used by `--mod-textfield-border-color-focus-hover`, `--mod-picker-button-border-color`, `--mod-combobox-border-color-default`.", + "control": "color", + "category": "Component" + }, + "spectrum-combobox-border-color-hover": { + "description": "Defined in `.spectrum-Combobox`.
Used by `--mod-textfield-border-color-hover`, `--mod-picker-button-border-color`.", + "control": "color", + "category": "Component" + }, + "spectrum-combobox-border-color-key-focus": { + "description": "Defined in `.spectrum-Combobox`.
Used by `--mod-textfield-border-color-keyboard-focus`, `--mod-picker-button-border-color`, `--mod-combobox-border-color-default`.", + "control": "color", + "category": "Component" + }, + "spectrum-combobox-readonly-input-background-color": { + "description": "Defined in `.spectrum-Combobox`.
Used by `.spectrum-Combobox.is-readOnly:not(.spectrum-Combobox--quiet) .spectrum-Combobox-input:read-only`.", + "control": "color", + "category": "Component" + }, + "spectrum-combobox-readonly-border-color-invalid-default": { + "description": "Defined in `.spectrum-Combobox`.
Used by `.spectrum-Combobox.is-readOnly.is-invalid:not(.spectrum-Combobox--quiet) .spectrum-Combobox-input:read-only`, `.spectrum-Combobox--quiet .spectrum-Combobox-textfield.is-readOnly.is-invalid > .spectrum-Combobox-input:read-only`.", + "control": "color", + "category": "Component" + }, + "spectrum-combobox-readonly-background-color-disabled": { + "description": "Defined in `.spectrum-Combobox`.
Used by `.spectrum-Combobox.is-readOnly.is-disabled:not(.spectrum-Combobox--quiet) .spectrum-Combobox-input:read-only`, `.spectrum-Combobox.is-readOnly.is-disabled:not(.spectrum-Combobox--quiet) .spectrum-Combobox-input:read-only:hover`.", + "control": "color", + "category": "Component" + }, + "spectrum-combobox-readonly-text-color-disabled": { + "description": "Defined in `.spectrum-Combobox`.
Used by `.spectrum-Combobox.is-readOnly.is-disabled:not(.spectrum-Combobox--quiet) .spectrum-Combobox-input:read-only`, `.spectrum-Combobox--quiet .spectrum-Combobox-textfield.is-readOnly.is-disabled .spectrum-Combobox-input:read-only`.", + "control": "color", + "category": "Component" + }, + "spectrum-combobox-readonly-border-color-disabled": { + "description": "Defined in `.spectrum-Combobox`.
Used by `.spectrum-Combobox.is-readOnly.is-disabled:not(.spectrum-Combobox--quiet) .spectrum-Combobox-input:read-only`, `.spectrum-Combobox--quiet .spectrum-Combobox-textfield.is-readOnly.is-disabled .spectrum-Combobox-input:read-only`.", + "control": "color", + "category": "Component" + }, + "spectrum-combo-box-visual-to-field-button-small": { + "value": "7px", + "description": "Used by `--spectrum-combobox-spacing-inline-icon-to-button`.", + "control": "text", + "category": "Component" + }, + "spectrum-combo-box-visual-to-field-button-large": { + "value": "9px", + "description": "Used by `--spectrum-combobox-spacing-inline-icon-to-button`.", + "control": "text", + "category": "Component" + }, + "spectrum-combo-box-visual-to-field-button-extra-large": { + "value": "10px", + "description": "Used by `--spectrum-combobox-spacing-inline-icon-to-button`.", + "control": "text", + "category": "Component" + }, + "spectrum-combo-box-quiet-minimum-width-multiplier": { + "value": "2", + "description": "Used by `--spectrum-combobox-min-inline-size`.", + "control": "text", + "category": "Component" + }, + "spectrum-combo-box-visual-to-field-button-quiet": { + "value": "0px", + "description": "Used by `--spectrum-combobox-spacing-inline-icon-to-button`.", + "control": "text", + "category": "Component" + }, + "spectrum-combobox-button-inline-offset": { + "description": "Defined in `.spectrum-Combobox--quiet`.
Used by `.spectrum-Combobox-button`, `.spectrum-Combobox-textfield.is-invalid .spectrum-Combobox-input, .spectrum-Combobox-textfield.is-loading .spectrum-Combobox-input`, `.spectrum-Combobox--quiet .spectrum-Combobox-input`, `.spectrum-Combobox--quiet .spectrum-Combobox-textfield.is-invalid .spectrum-Combobox-input, .spectrum-Combobox--quiet .spectrum-Combobox-textfield.is-loading .spectrum-Combobox-input`.", + "control": "text", + "category": "Component" + }, + "spectrum-combobox-readonly-input-border-color": { + "description": "Defined in `.spectrum-Combobox`.
Used by `.spectrum-Combobox.is-readOnly:not(.spectrum-Combobox--quiet) .spectrum-Combobox-input:read-only`, `.spectrum-Combobox--quiet .spectrum-Combobox-textfield.is-readOnly .spectrum-Combobox-input:read-only`.", + "control": "color", + "category": "Component" + } + }, + "global": { + "spectrum-gray-500": { + "value": "light-dark(rgb(143, 143, 143), rgb(109, 109, 109))", + "description": "Used by `--system-combobox-border-color-default`, `--system-combobox-readonly-input-border-color`.", + "control": "text", + "category": "Global" + }, + "spectrum-gray-600": { + "value": "light-dark(rgb(113, 113, 113), rgb(138, 138, 138))", + "description": "Used by `--system-combobox-border-color-hover`.", + "control": "text", + "category": "Global" + }, + "spectrum-gray-800": { + "value": "light-dark(rgb(41, 41, 41), rgb(219, 219, 219))", + "description": "Used by `--system-combobox-border-color-focus`, `--system-combobox-border-color-key-focus`.", + "control": "text", + "category": "Global" + }, + "spectrum-gray-900": { + "value": "light-dark(rgb(19, 19, 19), rgb(242, 242, 242))", + "description": "Used by `--system-combobox-border-color-focus-hover`.", + "control": "text", + "category": "Global" + }, + "spectrum-gray-25": { + "value": "light-dark(rgb(255, 255, 255), rgb(17, 17, 17))", + "description": "Used by `--system-combobox-background-color-disabled`.", + "control": "text", + "category": "Global" + }, + "spectrum-disabled-border-color": { + "value": "var(--spectrum-gray-300)", + "description": "Used by `--system-combobox-border-color-disabled`, `--spectrum-combobox-readonly-border-color-disabled`.", + "control": "color", + "category": "Global" + }, + "spectrum-field-width": { + "value": "192px", + "description": "Used by `--spectrum-combobox-inline-size`.", + "control": "text", + "category": "Global" + }, + "spectrum-component-height-100": { + "value": "32px", + "description": "Used by `--spectrum-combobox-block-size`.", + "control": "text", + "category": "Global" + }, + "spectrum-workflow-icon-size-100": { + "value": "20px", + "description": "Used by `--spectrum-combobox-icon-size`.", + "control": "text", + "category": "Global" + }, + "spectrum-font-size-100": { + "value": "14px", + "description": "Used by `--spectrum-combobox-font-size`.", + "control": "text", + "category": "Global" + }, + "spectrum-field-top-to-progress-circle-medium": { + "value": "8px", + "description": "Used by `--spectrum-combobox-block-spacing-edge-to-progress-circle`.", + "control": "text", + "category": "Global" + }, + "spectrum-field-top-to-alert-icon-medium": { + "value": "7px", + "description": "Used by `--spectrum-combobox-block-spacing-edge-to-alert`.", + "control": "text", + "category": "Global" + }, + "spectrum-component-to-menu-medium": { + "value": "6px", + "description": "Used by `--spectrum-combobox-spacing-edge-to-menu`.", + "control": "text", + "category": "Global" + }, + "spectrum-component-top-to-text-100": { + "value": "6px", + "description": "Used by `--spectrum-combobox-spacing-block-start-edge-to-text`.", + "control": "text", + "category": "Global" + }, + "spectrum-component-bottom-to-text-100": { + "value": "9px", + "description": "Used by `--spectrum-combobox-spacing-block-end-edge-to-text`.", + "control": "text", + "category": "Global" + }, + "spectrum-component-edge-to-text-100": { + "value": "12px", + "description": "Used by `--spectrum-combobox-spacing-inline-start-edge-to-text`, `--spectrum-combobox-spacing-inline-end-edge-to-text`.", + "control": "text", + "category": "Global" + }, + "spectrum-focus-indicator-thickness": { + "value": "2px", + "description": "Used by `--spectrum-combobox-focus-indicator-thickness`.", + "control": "text", + "category": "Global" + }, + "spectrum-focus-indicator-gap": { + "value": "2px", + "description": "Used by `--spectrum-combobox-focus-indicator-gap`.", + "control": "text", + "category": "Global" + }, + "spectrum-focus-indicator-color": { + "value": "var(--spectrum-blue-800)", + "description": "Used by `--spectrum-combobox-focus-indicator-color`.", + "control": "color", + "category": "Global" + }, + "spectrum-corner-radius-100": { + "value": "8px", + "description": "Used by `--spectrum-combobox-border-radius`.", + "control": "text", + "category": "Global" + }, + "spectrum-border-width-100": { + "value": "1px", + "description": "Used by `--spectrum-combobox-border-width`.", + "control": "text", + "category": "Global" + }, + "spectrum-field-label-to-component": { + "value": "0px", + "description": "Used by `--spectrum-combobox-spacing-label-to-combobox`.", + "control": "text", + "category": "Global" + }, + "spectrum-default-font-style": { + "value": "normal", + "description": "Used by `--spectrum-combobox-font-style`.", + "control": "text", + "category": "Global" + }, + "spectrum-line-height-100": { + "value": "1.3", + "description": "Used by `--spectrum-combobox-line-height`.", + "control": "text", + "category": "Global" + }, + "spectrum-negative-border-color-default": { + "value": "var(--spectrum-negative-color-900)", + "description": "Used by `--spectrum-combobox-border-color-invalid-default`, `--spectrum-combobox-readonly-border-color-invalid-default`.", + "control": "color", + "category": "Global" + }, + "spectrum-negative-border-color-hover": { + "value": "var(--spectrum-negative-color-1000)", + "description": "Used by `--spectrum-combobox-border-color-invalid-hover`.", + "control": "color", + "category": "Global" + }, + "spectrum-negative-border-color-focus": { + "value": "var(--spectrum-negative-color-1000)", + "description": "Used by `--spectrum-combobox-border-color-invalid-focus`.", + "control": "color", + "category": "Global" + }, + "spectrum-negative-border-color-focus-hover": { + "value": "var(--spectrum-negative-border-color-down)", + "description": "Used by `--spectrum-combobox-border-color-invalid-focus-hover`.", + "control": "color", + "category": "Global" + }, + "spectrum-negative-border-color-key-focus": { + "value": "var(--spectrum-negative-color-1000)", + "description": "Used by `--spectrum-combobox-border-color-invalid-key-focus`.", + "control": "color", + "category": "Global" + }, + "spectrum-gray-50": { + "value": "light-dark(rgb(248, 248, 248), rgb(27, 27, 27))", + "description": "Used by `--spectrum-combobox-readonly-input-background-color`.", + "control": "text", + "category": "Global" + }, + "spectrum-disabled-background-color": { + "value": "var(--spectrum-gray-100)", + "description": "Used by `--spectrum-combobox-readonly-background-color-disabled`.", + "control": "color", + "category": "Global" + }, + "spectrum-disabled-content-color": { + "value": "var(--spectrum-gray-400)", + "description": "Used by `--spectrum-combobox-readonly-text-color-disabled`.", + "control": "color", + "category": "Global" + }, + "spectrum-component-height-75": { + "value": "24px", + "description": "Used by `--spectrum-combobox-block-size`.", + "control": "text", + "category": "Global" + }, + "spectrum-workflow-icon-size-75": { + "value": "16px", + "description": "Used by `--spectrum-combobox-icon-size`.", + "control": "text", + "category": "Global" + }, + "spectrum-font-size-75": { + "value": "12px", + "description": "Used by `--spectrum-combobox-font-size`.", + "control": "text", + "category": "Global" + }, + "spectrum-field-top-to-progress-circle-small": { + "value": "4px", + "description": "Used by `--spectrum-combobox-block-spacing-edge-to-progress-circle`.", + "control": "text", + "category": "Global" + }, + "spectrum-field-top-to-alert-icon-small": { + "value": "4px", + "description": "Used by `--spectrum-combobox-block-spacing-edge-to-alert`.", + "control": "text", + "category": "Global" + }, + "spectrum-component-to-menu-small": { + "value": "6px", + "description": "Used by `--spectrum-combobox-spacing-edge-to-menu`.", + "control": "text", + "category": "Global" + }, + "spectrum-component-top-to-text-75": { + "value": "4px", + "description": "Used by `--spectrum-combobox-spacing-block-start-edge-to-text`.", + "control": "text", + "category": "Global" + }, + "spectrum-component-bottom-to-text-75": { + "value": "5px", + "description": "Used by `--spectrum-combobox-spacing-block-end-edge-to-text`.", + "control": "text", + "category": "Global" + }, + "spectrum-component-edge-to-text-75": { + "value": "10px", + "description": "Used by `--spectrum-combobox-spacing-inline-start-edge-to-text`, `--spectrum-combobox-spacing-inline-end-edge-to-text`.", + "control": "text", + "category": "Global" + }, + "spectrum-component-height-200": { + "value": "40px", + "description": "Used by `--spectrum-combobox-block-size`.", + "control": "text", + "category": "Global" + }, + "spectrum-workflow-icon-size-200": { + "value": "22px", + "description": "Used by `--spectrum-combobox-icon-size`.", + "control": "text", + "category": "Global" + }, + "spectrum-font-size-200": { + "value": "16px", + "description": "Used by `--spectrum-combobox-font-size`.", + "control": "text", + "category": "Global" + }, + "spectrum-field-top-to-progress-circle-large": { + "value": "12px", + "description": "Used by `--spectrum-combobox-block-spacing-edge-to-progress-circle`.", + "control": "text", + "category": "Global" + }, + "spectrum-field-top-to-alert-icon-large": { + "value": "10px", + "description": "Used by `--spectrum-combobox-block-spacing-edge-to-alert`.", + "control": "text", + "category": "Global" + }, + "spectrum-component-to-menu-large": { + "value": "7px", + "description": "Used by `--spectrum-combobox-spacing-edge-to-menu`.", + "control": "text", + "category": "Global" + }, + "spectrum-component-top-to-text-200": { + "value": "9px", + "description": "Used by `--spectrum-combobox-spacing-block-start-edge-to-text`.", + "control": "text", + "category": "Global" + }, + "spectrum-component-bottom-to-text-200": { + "value": "11px", + "description": "Used by `--spectrum-combobox-spacing-block-end-edge-to-text`.", + "control": "text", + "category": "Global" + }, + "spectrum-component-edge-to-text-200": { + "value": "15px", + "description": "Used by `--spectrum-combobox-spacing-inline-start-edge-to-text`, `--spectrum-combobox-spacing-inline-end-edge-to-text`.", + "control": "text", + "category": "Global" + }, + "spectrum-component-height-300": { + "value": "48px", + "description": "Used by `--spectrum-combobox-block-size`.", + "control": "text", + "category": "Global" + }, + "spectrum-workflow-icon-size-300": { + "value": "26px", + "description": "Used by `--spectrum-combobox-icon-size`.", + "control": "text", + "category": "Global" + }, + "spectrum-font-size-300": { + "value": "18px", + "description": "Used by `--spectrum-combobox-font-size`.", + "control": "text", + "category": "Global" + }, + "spectrum-field-top-to-progress-circle-extra-large": { + "value": "16px", + "description": "Used by `--spectrum-combobox-block-spacing-edge-to-progress-circle`.", + "control": "text", + "category": "Global" + }, + "spectrum-field-top-to-alert-icon-extra-large": { + "value": "13px", + "description": "Used by `--spectrum-combobox-block-spacing-edge-to-alert`.", + "control": "text", + "category": "Global" + }, + "spectrum-component-to-menu-extra-large": { + "value": "8px", + "description": "Used by `--spectrum-combobox-spacing-edge-to-menu`.", + "control": "text", + "category": "Global" + }, + "spectrum-component-top-to-text-300": { + "value": "12px", + "description": "Used by `--spectrum-combobox-spacing-block-start-edge-to-text`.", + "control": "text", + "category": "Global" + }, + "spectrum-component-bottom-to-text-300": { + "value": "14px", + "description": "Used by `--spectrum-combobox-spacing-block-end-edge-to-text`.", + "control": "text", + "category": "Global" + }, + "spectrum-component-edge-to-text-300": { + "value": "17px", + "description": "Used by `--spectrum-combobox-spacing-inline-start-edge-to-text`, `--spectrum-combobox-spacing-inline-end-edge-to-text`.", + "control": "text", + "category": "Global" + }, + "spectrum-field-edge-to-text-quiet": { + "value": "0px", + "description": "Used by `--spectrum-combobox-spacing-inline-start-edge-to-text`.", + "control": "text", + "category": "Global" + }, + "spectrum-field-label-to-component-quiet-medium": { + "value": "-8px", + "description": "Used by `--spectrum-combobox-spacing-label-to-combobox`.", + "control": "text", + "category": "Global" + }, + "spectrum-field-label-to-component-quiet-small": { + "value": "-8px", + "description": "Used by `--spectrum-combobox-spacing-label-to-combobox`.", + "control": "text", + "category": "Global" + }, + "spectrum-field-label-to-component-quiet-large": { + "value": "-12px", + "description": "Used by `--spectrum-combobox-spacing-label-to-combobox`.", + "control": "text", + "category": "Global" + }, + "spectrum-field-label-to-component-quiet-extra-large": { + "value": "-15px", + "description": "Used by `--spectrum-combobox-spacing-label-to-combobox`.", + "control": "text", + "category": "Global" + } + }, + "system-theme": { + "system-combobox-border-color-default": { + "description": "Defined in `.spectrum`.
Used by `--spectrum-combobox-border-color-default`.", + "control": "color" + }, + "system-combobox-border-color-hover": { + "description": "Defined in `.spectrum`.
Used by `--spectrum-combobox-border-color-hover`.", + "control": "color" + }, + "system-combobox-border-color-focus": { + "description": "Defined in `.spectrum`.
Used by `--spectrum-combobox-border-color-focus`.", + "control": "color" + }, + "system-combobox-border-color-focus-hover": { + "description": "Defined in `.spectrum`.
Used by `--spectrum-combobox-border-color-focus-hover`.", + "control": "color" + }, + "system-combobox-border-color-key-focus": { + "description": "Defined in `.spectrum`.
Used by `--spectrum-combobox-border-color-key-focus`.", + "control": "color" + }, + "system-combobox-readonly-input-border-color": { + "description": "Defined in `.spectrum`.
Used by `--spectrum-combobox-readonly-input-border-color`.", + "control": "color" + }, + "system-combobox-background-color-disabled": { + "description": "Defined in `.spectrum`.
Used by `--spectrum-combobox-background-color-disabled`.", + "control": "color" + }, + "system-combobox-border-color-disabled": { + "description": "Defined in `.spectrum`.
Used by `--spectrum-combobox-border-color-disabled`.", + "control": "color" + } + }, + "passthroughs": { + "mod-textfield-focus-indicator-gap": { + "category": "Passthrough" + }, + "mod-textfield-focus-indicator-width": { + "category": "Passthrough" + }, + "mod-textfield-focus-indicator-color": { + "category": "Passthrough" + }, + "mod-textfield-background-color": { + "category": "Passthrough" + }, + "mod-textfield-background-color-disabled": { + "category": "Passthrough" + }, + "mod-textfield-font-family": { + "category": "Passthrough" + }, + "mod-textfield-font-weight": { + "category": "Passthrough" + }, + "mod-textfield-text-color-default": { + "category": "Passthrough" + }, + "mod-textfield-text-color-hover": { + "category": "Passthrough" + }, + "mod-textfield-text-color-focus": { + "category": "Passthrough" + }, + "mod-textfield-text-color-focus-hover": { + "category": "Passthrough" + }, + "mod-textfield-text-color-keyboard-focus": { + "category": "Passthrough" + }, + "mod-textfield-text-color-disabled": { + "category": "Passthrough" + }, + "mod-textfield-border-width": { + "category": "Passthrough" + }, + "mod-textfield-border-color": { + "category": "Passthrough" + }, + "mod-textfield-border-color-disabled": { + "category": "Passthrough" + }, + "mod-textfield-border-color-focus": { + "category": "Passthrough" + }, + "mod-textfield-border-color-focus-hover": { + "category": "Passthrough" + }, + "mod-textfield-border-color-hover": { + "category": "Passthrough" + }, + "mod-textfield-border-color-keyboard-focus": { + "category": "Passthrough" + }, + "mod-textfield-border-color-invalid-default": { + "category": "Passthrough" + }, + "mod-textfield-border-color-invalid-hover": { + "category": "Passthrough" + }, + "mod-textfield-border-color-invalid-focus": { + "category": "Passthrough" + }, + "mod-textfield-border-color-invalid-focus-hover": { + "category": "Passthrough" + }, + "mod-textfield-border-color-invalid-keyboard-focus": { + "category": "Passthrough" + }, + "mod-textfield-icon-color-invalid": { + "category": "Passthrough" + }, + "mod-picker-button-border-width": { + "category": "Passthrough" + }, + "mod-picker-button-border-color": { + "category": "Passthrough" + }, + "mod-picker-button-background-color": { + "category": "Passthrough" + }, + "mod-picker-button-background-color-disabled": { + "category": "Passthrough" + }, + "mod-picker-button-font-color-disabled": { + "category": "Passthrough" + }, + "mod-picker-button-border-color-disabled": { + "category": "Passthrough" + }, + "mod-picker-button-background-color-quiet": { + "category": "Passthrough" + }, + "mod-picker-button-border-color-quiet": { + "category": "Passthrough" + } + }, + "high-contrast": { + "highcontrast-combobox-border-color-highlight": { + "value": "var(--mod-combobox-border-color-focus-hover, var(--spectrum-combobox-border-color-focus-hover))", + "description": "Defined in `.spectrum-Combobox`.
Used by `--mod-picker-button-border-color`.
Defaults to `var(--mod-combobox-border-color-focus-hover, var(--spectrum-combobox-border-color-focus-hover))`, if not set.", + "control": "color" + }, + "highcontrast-combobox-border-color-invalid": { + "value": "var(--mod-combobox-border-color-invalid-focus-hover, var(--spectrum-combobox-border-color-invalid-focus-hover))", + "description": "Defined in `.spectrum-Combobox`.
Used by `--mod-picker-button-border-color`.
Defaults to `var(--mod-combobox-border-color-invalid-focus-hover, var(--spectrum-combobox-border-color-invalid-focus-hover))`, if not set.", + "control": "color" + }, + "highcontrast-textfield-border-color-invalid-default": { + "value": "var(--mod-textfield-border-color-invalid-default, var(--spectrum-combobox-readonly-border-color-invalid-default))", + "description": "Used by `.spectrum-Combobox.is-readOnly.is-invalid:not(.spectrum-Combobox--quiet) .spectrum-Combobox-input:read-only`, `.spectrum-Combobox--quiet .spectrum-Combobox-textfield.is-readOnly.is-invalid > .spectrum-Combobox-input:read-only`.
Defaults to `var(--mod-textfield-border-color-invalid-default, var(--spectrum-combobox-readonly-border-color-invalid-default))`, if not set.", + "control": "color" + }, + "highcontrast-textfield-text-color-disabled": { + "value": "var(--mod-textfield-text-color-disabled, var(--spectrum-combobox-readonly-text-color-disabled))", + "description": "Used by `.spectrum-Combobox.is-readOnly.is-disabled:not(.spectrum-Combobox--quiet) .spectrum-Combobox-input:read-only`, `.spectrum-Combobox--quiet .spectrum-Combobox-textfield.is-readOnly.is-disabled .spectrum-Combobox-input:read-only`.
Defaults to `var(--mod-textfield-text-color-disabled, var(--spectrum-combobox-readonly-text-color-disabled))`, if not set.", + "control": "color" + } + } } diff --git a/components/combobox/stories/combobox.stories.js b/components/combobox/stories/combobox.stories.js index baea4599d01..77bd46c14b4 100644 --- a/components/combobox/stories/combobox.stories.js +++ b/components/combobox/stories/combobox.stories.js @@ -2,11 +2,13 @@ import { Template as Menu } from "@spectrum-css/menu/stories/template.js"; import { disableDefaultModes } from "@spectrum-css/preview/modes"; import { isDisabled, isFocused, isInvalid, isKeyboardFocused, isLoading, isOpen, isQuiet, isReadOnly, size } from "@spectrum-css/preview/types"; import { within } from "@storybook/test"; -import metadata from "../dist/metadata.json"; -import packageJson from "../package.json"; import { ComboBoxGroup } from "./combobox.test.js"; import { Template, VariantGroup } from "./template.js"; +// Local assets to render the component styles and structure +import metadata from "../dist/metadata.json"; +import packageJson from "../package.json"; + /** * Comboboxes combine a text entry with a picker menu, allowing users to filter longer lists to only the selections matching a query. * @@ -144,6 +146,7 @@ export default { }, packageJson, metadata, + cssprops: metadata.modifiers, }, play: async ({ canvasElement }) => { const canvas = within(canvasElement); diff --git a/components/commons/package.json b/components/commons/package.json index ce1e2046508..21155db101b 100644 --- a/components/commons/package.json +++ b/components/commons/package.json @@ -18,8 +18,7 @@ "./*.css": "./*.css", "./CHANGELOG.md": "./CHANGELOG.md", "./README.md": "./README.md", - "./package.json": "./package.json", - "./stories/*": "./stories/*" + "./package.json": "./package.json" }, "main": "index.css", "files": [ diff --git a/components/contextualhelp/dist/metadata.json b/components/contextualhelp/dist/metadata.json index 4f7dbd58c5b..daa6bc96a3a 100644 --- a/components/contextualhelp/dist/metadata.json +++ b/components/contextualhelp/dist/metadata.json @@ -8,33 +8,124 @@ ".spectrum-ContextualHelp-popover .spectrum-ContextualHelp-body", ".spectrum-ContextualHelp-popover .spectrum-ContextualHelp-heading" ], - "modifiers": [ - "--mod-contextual-help-body-color", - "--mod-contextual-help-heading-color", - "--mod-spectrum-contextual-help-body-size", - "--mod-spectrum-contextual-help-content-spacing", - "--mod-spectrum-contextual-help-heading-size", - "--mod-spectrum-contextual-help-link-spacing", - "--mod-spectrum-contextual-help-minimum-width", - "--mod-spectrum-contextual-help-padding", - "--mod-spectrum-contextual-help-popover-maximum-width" - ], - "component": [ - "--spectrum-contextual-help-body-size", - "--spectrum-contextual-help-content-spacing", - "--spectrum-contextual-help-minimum-width", - "--spectrum-contextual-help-title-size" - ], - "global": [ - "--spectrum-body-color", - "--spectrum-heading-color", - "--spectrum-spacing-300", - "--spectrum-spacing-400" - ], - "system-theme": [], - "passthroughs": [], - "high-contrast": [ - "--highcontrast-contextual-help-body-color", - "--highcontrast-contextual-help-heading-color" - ] + "modifiers": { + "mod-spectrum-contextual-help-minimum-width": { + "value": "268px", + "description": "Used by `.spectrum-ContextualHelp`.
Defaults to `var(--spectrum-contextual-help-minimum-width)`, if not set.", + "control": "text", + "category": "Modifier" + }, + "mod-spectrum-contextual-help-padding": { + "value": "24px", + "description": "Used by `.spectrum-ContextualHelp-popover`.
Defaults to `var(--spectrum-spacing-400)`, if not set.", + "control": "text", + "category": "Modifier" + }, + "mod-spectrum-contextual-help-body-size": { + "value": "var(--spectrum-body-size-xs)", + "description": "Used by `.spectrum-ContextualHelp-popover`.
Defaults to `var(--spectrum-contextual-help-body-size)`, if not set.", + "control": "text", + "category": "Modifier" + }, + "mod-contextual-help-body-color": { + "value": "var(--spectrum-gray-800)", + "description": "Used by `.spectrum-ContextualHelp-popover`.
Defaults to `var(--spectrum-body-color)`, if not set.", + "control": "color", + "category": "Modifier" + }, + "mod-spectrum-contextual-help-popover-maximum-width": { + "description": "Used by `.spectrum-ContextualHelp-popover`.", + "control": "text", + "category": "Modifier" + }, + "mod-spectrum-contextual-help-content-spacing": { + "value": "var(--spectrum-contextual-help-content-spacing)", + "description": "Used by `.spectrum-ContextualHelp-popover .spectrum-ContextualHelp-heading`.
Defaults to `var(--spectrum-contextual-help-content-spacing)`, if not set.", + "control": "text", + "category": "Modifier" + }, + "mod-spectrum-contextual-help-heading-size": { + "value": "var(--spectrum-heading-size-xxs)", + "description": "Used by `.spectrum-ContextualHelp-popover .spectrum-ContextualHelp-heading`.
Defaults to `var(--spectrum-contextual-help-title-size)`, if not set.", + "control": "text", + "category": "Modifier" + }, + "mod-contextual-help-heading-color": { + "value": "var(--spectrum-gray-900)", + "description": "Used by `.spectrum-ContextualHelp-popover .spectrum-ContextualHelp-heading`.
Defaults to `var(--spectrum-heading-color)`, if not set.", + "control": "color", + "category": "Modifier" + }, + "mod-spectrum-contextual-help-link-spacing": { + "value": "16px", + "description": "Used by `.spectrum-ContextualHelp-link`.
Defaults to `var(--spectrum-spacing-300)`, if not set.", + "control": "text", + "category": "Modifier" + } + }, + "component": { + "spectrum-contextual-help-minimum-width": { + "value": "268px", + "description": "Used by `.spectrum-ContextualHelp`.", + "control": "text", + "category": "Component" + }, + "spectrum-contextual-help-body-size": { + "value": "var(--spectrum-body-size-xs)", + "description": "Used by `.spectrum-ContextualHelp-popover`.", + "control": "text", + "category": "Component" + }, + "spectrum-contextual-help-content-spacing": { + "description": "Used by `.spectrum-ContextualHelp-popover .spectrum-ContextualHelp-heading`.", + "control": "text", + "category": "Component" + }, + "spectrum-contextual-help-title-size": { + "value": "var(--spectrum-heading-size-xxs)", + "description": "Used by `.spectrum-ContextualHelp-popover .spectrum-ContextualHelp-heading`.", + "control": "text", + "category": "Component" + } + }, + "global": { + "spectrum-spacing-400": { + "value": "24px", + "description": "Used by `.spectrum-ContextualHelp-popover`.", + "control": "text", + "category": "Global" + }, + "spectrum-body-color": { + "value": "var(--spectrum-gray-800)", + "description": "Used by `.spectrum-ContextualHelp-popover`.", + "control": "color", + "category": "Global" + }, + "spectrum-heading-color": { + "value": "var(--spectrum-gray-900)", + "description": "Used by `.spectrum-ContextualHelp-popover .spectrum-ContextualHelp-heading`.", + "control": "color", + "category": "Global" + }, + "spectrum-spacing-300": { + "value": "16px", + "description": "Used by `.spectrum-ContextualHelp-link`.", + "control": "text", + "category": "Global" + } + }, + "system-theme": {}, + "passthroughs": {}, + "high-contrast": { + "highcontrast-contextual-help-body-color": { + "value": "var(--mod-contextual-help-body-color, var(--spectrum-body-color))", + "description": "Defined in `.spectrum-ContextualHelp`.
Used by `.spectrum-ContextualHelp-popover`.
Defaults to `var(--mod-contextual-help-body-color, var(--spectrum-body-color))`, if not set.", + "control": "color" + }, + "highcontrast-contextual-help-heading-color": { + "value": "var(--mod-contextual-help-heading-color, var(--spectrum-heading-color))", + "description": "Defined in `.spectrum-ContextualHelp`.
Used by `.spectrum-ContextualHelp-popover .spectrum-ContextualHelp-heading`.
Defaults to `var(--mod-contextual-help-heading-color, var(--spectrum-heading-color))`, if not set.", + "control": "color" + } + } } diff --git a/components/contextualhelp/stories/contextualhelp.stories.js b/components/contextualhelp/stories/contextualhelp.stories.js index 4b7abd0296a..94736fd153d 100644 --- a/components/contextualhelp/stories/contextualhelp.stories.js +++ b/components/contextualhelp/stories/contextualhelp.stories.js @@ -1,10 +1,12 @@ import { default as ActionButtonStories } from "@spectrum-css/actionbutton/stories/actionbutton.stories.js"; import { disableDefaultModes } from "@spectrum-css/preview/modes"; -import metadata from "../dist/metadata.json"; -import packageJson from "../package.json"; import { ContextualHelpGroup } from "./contextualhelp.test.js"; import { Template } from "./template.js"; +// Local assets to render the component styles and structure +import metadata from "../dist/metadata.json"; +import packageJson from "../package.json"; + /** * Contextual help shows a user extra information in relation to another component or view. */ @@ -97,6 +99,7 @@ export default { }, packageJson, metadata, + cssprops: metadata.modifiers, docs: { story: { height: "200px", diff --git a/components/contextualhelp/stories/template.js b/components/contextualhelp/stories/template.js index aaeac140d32..136b4b339db 100644 --- a/components/contextualhelp/stories/template.js +++ b/components/contextualhelp/stories/template.js @@ -11,7 +11,7 @@ import "../index.css"; export const Template = ({ rootClass = "spectrum-ContextualHelp", - id = getRandomId("contextualhelp"), + id = getRandomId("contextual-help"), iconName, iconSet = "workflow", title, diff --git a/components/datepicker/dist/metadata.json b/components/datepicker/dist/metadata.json index f52f1b93cd6..a2e39c9ba84 100644 --- a/components/datepicker/dist/metadata.json +++ b/components/datepicker/dist/metadata.json @@ -4,15 +4,16 @@ ".spectrum-DatePicker", ".spectrum-DatePicker--quiet", ".spectrum-DatePicker--quiet .spectrum-DatePicker-button", - ".spectrum-DatePicker--quiet .spectrum-DatePicker-button:not(.is-open)", ".spectrum-DatePicker--quiet .spectrum-DatePicker-button:not(:disabled, .is-open)", + ".spectrum-DatePicker--quiet .spectrum-DatePicker-button:not(.is-open)", + ".spectrum-DatePicker--quiet:hover:not(.is-focused, .is-keyboardFocused, .is-disabled, .is-invalid)", ".spectrum-DatePicker--quiet.is-disabled", ".spectrum-DatePicker--quiet.is-invalid", ".spectrum-DatePicker--quiet.is-invalid .spectrum-DatePicker-input:not(.spectrum-DatePicker-startField)", - ".spectrum-DatePicker--quiet:hover:not(.is-focused, .is-keyboardFocused, .is-disabled, .is-invalid)", ".spectrum-DatePicker--range", ".spectrum-DatePicker--range .spectrum-DatePicker-textfield", ".spectrum-DatePicker--range .spectrum-DatePicker-textfield:first-of-type", + ".spectrum-DatePicker--range:after", ".spectrum-DatePicker--range.is-keyboardFocused:not(.spectrum-DatePicker--quiet) .spectrum-DatePicker-textfield:after", ".spectrum-DatePicker--range.is-keyboardFocused:not(.spectrum-DatePicker--quiet):after", ".spectrum-DatePicker--range.spectrum-DatePicker--datetimeRange .spectrum-DatePicker-textfield", @@ -23,136 +24,607 @@ ".spectrum-DatePicker--range.spectrum-DatePicker--quiet .spectrum-DatePicker-textfield", ".spectrum-DatePicker--range.spectrum-DatePicker--quiet .spectrum-DatePicker-textfield:first-of-type", ".spectrum-DatePicker--range.spectrum-DatePicker--quiet.is-keyboardFocused:after", - ".spectrum-DatePicker--range:after", ".spectrum-DatePicker-button", ".spectrum-DatePicker-input", ".spectrum-DatePicker-input.spectrum-DatePicker-endField", ".spectrum-DatePicker-input.spectrum-DatePicker-startField", ".spectrum-DatePicker-rangeDash", ".spectrum-DatePicker-rangeDash:before", + ".spectrum-DatePicker:not(.spectrum-DatePicker--quiet, .is-disabled)", ".spectrum-DatePicker.is-disabled", ".spectrum-DatePicker.is-invalid", ".spectrum-DatePicker.is-invalid:not(.spectrum-DatePicker--quiet, .is-disabled)", - ".spectrum-DatePicker.spectrum-DatePicker--quiet.is-invalid", - ".spectrum-DatePicker:not(.spectrum-DatePicker--quiet, .is-disabled)" - ], - "modifiers": [ - "--mod-datepicker-border-color-disabled", - "--mod-datepicker-border-radius", - "--mod-datepicker-border-radius-quiet", - "--mod-datepicker-dash-color", - "--mod-datepicker-dash-color-disabled", - "--mod-datepicker-dash-font-size", - "--mod-datepicker-dash-line-height", - "--mod-datepicker-datetime-input-width", - "--mod-datepicker-datetime-input-width-first", - "--mod-datepicker-datetime-quiet-input-width", - "--mod-datepicker-datetime-quiet-input-width-first", - "--mod-datepicker-focus-animation", - "--mod-datepicker-focus-line-gap", - "--mod-datepicker-focus-ring-color", - "--mod-datepicker-focus-ring-gap", - "--mod-datepicker-focus-ring-width", - "--mod-datepicker-focus-thickness", - "--mod-datepicker-generic-padding", - "--mod-datepicker-input-width", - "--mod-datepicker-input-width-quiet", - "--mod-datepicker-invalid-quiet-color", - "--mod-datepicker-min-width", - "--mod-datepicker-padding-inline", - "--mod-datepicker-padding-inline-end-invalid-quiet", - "--mod-datepicker-padding-inline-quiet", - "--mod-datepicker-pickerbutton-border-color", - "--mod-datepicker-pickerbutton-border-color-invalid", - "--mod-datepicker-quiet-border-color-hover", - "--mod-datepicker-quiet-button-offset", - "--mod-datepicker-range-dash-margin-left", - "--mod-datepicker-range-dash-padding-top", - "--mod-datepicker-range-input-width-first", - "--mod-datepicker-range-input-width-quiet-first" - ], - "component": [ - "--spectrum-datepicker-border-color-disabled", - "--spectrum-datepicker-border-radius", - "--spectrum-datepicker-border-radius-quiet", - "--spectrum-datepicker-border-width", - "--spectrum-datepicker-dash-color", - "--spectrum-datepicker-dash-font-size", - "--spectrum-datepicker-dash-line-height", - "--spectrum-datepicker-datetime-input-width", - "--spectrum-datepicker-datetime-input-width-first", - "--spectrum-datepicker-datetime-quiet-input-width", - "--spectrum-datepicker-datetime-quiet-input-width-first", - "--spectrum-datepicker-datetime-width-first", - "--spectrum-datepicker-focus-animation", - "--spectrum-datepicker-focus-line-gap", - "--spectrum-datepicker-focus-ring-color", - "--spectrum-datepicker-focus-ring-gap", - "--spectrum-datepicker-focus-ring-width", - "--spectrum-datepicker-focus-thickness", - "--spectrum-datepicker-generic-padding", - "--spectrum-datepicker-icon-size", - "--spectrum-datepicker-icon-to-text", - "--spectrum-datepicker-initial-height", - "--spectrum-datepicker-initial-width", - "--spectrum-datepicker-input-datetime-width", - "--spectrum-datepicker-input-width", - "--spectrum-datepicker-input-width-base", - "--spectrum-datepicker-input-width-quiet", - "--spectrum-datepicker-invalid-icon-to-button", - "--spectrum-datepicker-invalid-icon-to-button-quiet", - "--spectrum-datepicker-invalid-quiet-color", - "--spectrum-datepicker-min-width", - "--spectrum-datepicker-padding-inline-end", - "--spectrum-datepicker-padding-inline-end-invalid-quiet", - "--spectrum-datepicker-padding-inline-end-quiet", - "--spectrum-datepicker-pickerbutton-border-color", - "--spectrum-datepicker-pickerbutton-border-color-invalid", - "--spectrum-datepicker-pickerbutton-width", - "--spectrum-datepicker-pickerbutton-width-quiet", - "--spectrum-datepicker-quiet-border-color-hover", - "--spectrum-datepicker-quiet-button-offset", - "--spectrum-datepicker-range-dash-marin-inline-start", - "--spectrum-datepicker-range-dash-padding-top", - "--spectrum-datepicker-range-input-width-first", - "--spectrum-datepicker-range-input-width-quiet-first", - "--spectrum-datepicker-width-quiet-first", - "--spectrum-datepicker-width-quiet-second" - ], - "global": [ - "--spectrum-animation-duration-100", - "--spectrum-border-width-100", - "--spectrum-component-edge-to-text-100", - "--spectrum-component-height-100", - "--spectrum-corner-radius-100", - "--spectrum-disabled-border-color", - "--spectrum-disabled-content-color", - "--spectrum-field-edge-to-disclosure-icon-100", - "--spectrum-field-width", - "--spectrum-focus-indicator-color", - "--spectrum-focus-indicator-gap", - "--spectrum-focus-indicator-thickness", - "--spectrum-font-size-100", - "--spectrum-gray-500", - "--spectrum-negative-border-color-default", - "--spectrum-neutral-content-color-default", - "--spectrum-spacing-75", - "--spectrum-text-to-visual-100", - "--spectrum-workflow-icon-size-100" - ], - "system-theme": ["--system-date-picker-initial-height"], - "passthroughs": [ - "--mod-picker-button-background-color", - "--mod-picker-button-background-color-hover-disabled", - "--mod-picker-button-border-color", - "--mod-picker-button-border-color-disabled", - "--mod-textfield-border-color-disabled", - "--mod-textfield-icon-spacing-inline-end-invalid", - "--mod-textfield-icon-spacing-inline-end-quiet-invalid" + ".spectrum-DatePicker.spectrum-DatePicker--quiet.is-invalid" ], - "high-contrast": [ - "--highcontrast-datepicker-dash-color", - "--highcontrast-datepicker-focus-ring-color", - "--highcontrast-datepicker-pickerbutton-border-color" - ] + "modifiers": { + "mod-datepicker-border-radius": { + "value": "8px", + "description": "Defined in `.spectrum-DatePicker--quiet`, `.spectrum-DatePicker--range`, `.spectrum-DatePicker--range.spectrum-DatePicker--quiet`.
Used by `--spectrum-datepicker-border-radius`.
Defaults to `var(--spectrum-corner-radius-100)`, if not set.", + "control": "text", + "category": "Modifier" + }, + "mod-datepicker-border-radius-quiet": { + "description": "Used by `--spectrum-datepicker-border-radius-quiet`.", + "control": "text", + "category": "Modifier" + }, + "mod-datepicker-min-width": { + "value": "192px", + "description": "Used by `--spectrum-datepicker-min-width`.
Defaults to `var(--spectrum-field-width)`, if not set.", + "control": "text", + "category": "Modifier" + }, + "mod-datepicker-pickerbutton-border-color": { + "value": "light-dark(rgb(143, 143, 143), rgb(109, 109, 109))", + "description": "Used by `--spectrum-datepicker-pickerbutton-border-color`.
Defaults to `var(--spectrum-gray-500)`, if not set.", + "control": "color", + "category": "Modifier" + }, + "mod-datepicker-pickerbutton-border-color-invalid": { + "value": "var(--spectrum-negative-color-900)", + "description": "Used by `--spectrum-datepicker-pickerbutton-border-color-invalid`.
Defaults to `var(--spectrum-negative-border-color-default)`, if not set.", + "control": "color", + "category": "Modifier" + }, + "mod-datepicker-quiet-button-offset": { + "value": "6px", + "description": "Used by `--spectrum-datepicker-quiet-button-offset`.
Defaults to `var(--spectrum-text-to-visual-100)`, if not set.", + "control": "text", + "category": "Modifier" + }, + "mod-datepicker-focus-ring-gap": { + "value": "2px", + "description": "Used by `--spectrum-datepicker-focus-ring-gap`.
Defaults to `var(--spectrum-focus-indicator-gap)`, if not set.", + "control": "text", + "category": "Modifier" + }, + "mod-datepicker-focus-thickness": { + "value": "2px", + "description": "Used by `--spectrum-datepicker-focus-thickness`.
Defaults to `var(--spectrum-focus-indicator-thickness)`, if not set.", + "control": "text", + "category": "Modifier" + }, + "mod-datepicker-focus-animation": { + "value": "var(--spectrum-animation-duration-100)", + "description": "Used by `--spectrum-datepicker-focus-animation`.
Defaults to `var(--spectrum-animation-duration-100)`, if not set.", + "control": "text", + "category": "Modifier" + }, + "mod-datepicker-focus-ring-width": { + "value": "1px", + "description": "Used by `--spectrum-datepicker-focus-ring-width`.
Defaults to `var(--spectrum-border-width-100)`, if not set.", + "control": "text", + "category": "Modifier" + }, + "mod-datepicker-focus-ring-color": { + "value": "var(--spectrum-blue-800)", + "description": "Used by `--spectrum-datepicker-focus-ring-color`.
Defaults to `var(--spectrum-focus-indicator-color)`, if not set.", + "control": "color", + "category": "Modifier" + }, + "mod-datepicker-focus-line-gap": { + "value": "4px", + "description": "Used by `--spectrum-datepicker-focus-line-gap`.
Defaults to `var(--spectrum-spacing-75)`, if not set.", + "control": "text", + "category": "Modifier" + }, + "mod-datepicker-invalid-quiet-color": { + "value": "var(--spectrum-negative-color-900)", + "description": "Used by `--spectrum-datepicker-invalid-quiet-color`.
Defaults to `var(--spectrum-negative-border-color-default)`, if not set.", + "control": "color", + "category": "Modifier" + }, + "mod-datepicker-quiet-border-color-hover": { + "value": "light-dark(rgb(143, 143, 143), rgb(109, 109, 109))", + "description": "Used by `--spectrum-datepicker-quiet-border-color-hover`.
Defaults to `var(--spectrum-gray-500)`, if not set.", + "control": "color", + "category": "Modifier" + }, + "mod-datepicker-border-color-disabled": { + "value": "var(--spectrum-gray-300)", + "description": "Used by `--spectrum-datepicker-border-color-disabled`.
Defaults to `var(--spectrum-disabled-border-color)`, if not set.", + "control": "color", + "category": "Modifier" + }, + "mod-datepicker-dash-font-size": { + "value": "14px", + "description": "Used by `--spectrum-datepicker-dash-font-size`.
Defaults to `var(--spectrum-font-size-100)`, if not set.", + "control": "text", + "category": "Modifier" + }, + "mod-datepicker-dash-color": { + "value": "var(--spectrum-gray-800)", + "description": "Defined in `.spectrum-DatePicker.is-disabled`.
Used by `--spectrum-datepicker-dash-color`.
Defaults to `var(--spectrum-neutral-content-color-default)`, if not set.", + "control": "color", + "category": "Modifier" + }, + "mod-datepicker-range-dash-padding-top": { + "description": "Used by `--spectrum-datepicker-range-dash-padding-top`.", + "control": "text", + "category": "Modifier" + }, + "mod-datepicker-range-dash-margin-left": { + "value": "calc(var(--spectrum-datepicker-dash-font-size) * -0.5)", + "description": "Used by `--spectrum-datepicker-range-dash-marin-inline-start`.
Defaults to `calc(var(--spectrum-datepicker-dash-font-size) * -0.5)`, if not set.", + "control": "text", + "category": "Modifier" + }, + "mod-datepicker-range-input-width-first": { + "value": "calc(var(--spectrum-datepicker-initial-width) - var(--spectrum-datepicker-generic-padding) * 2)", + "description": "Used by `--spectrum-datepicker-range-input-width-first`.
Defaults to `calc(var(--spectrum-datepicker-initial-width) - var(--spectrum-datepicker-generic-padding) * 2)`, if not set.", + "control": "text", + "category": "Modifier" + }, + "mod-datepicker-input-width": { + "value": "calc(var(--spectrum-datepicker-input-width-base) + var(--spectrum-datepicker-initial-height))", + "description": "Used by `--spectrum-datepicker-input-width`.
Defaults to `calc(var(--spectrum-datepicker-input-width-base) + var(--spectrum-datepicker-initial-height))`, if not set.", + "control": "text", + "category": "Modifier" + }, + "mod-datepicker-range-input-width-quiet-first": { + "value": "calc(var(--spectrum-datepicker-width-quiet-first) + var(--spectrum-datepicker-width-quiet-second))", + "description": "Used by `--spectrum-datepicker-range-input-width-quiet-first`.
Defaults to `calc(var(--spectrum-datepicker-width-quiet-first) + var(--spectrum-datepicker-width-quiet-second))`, if not set.", + "control": "text", + "category": "Modifier" + }, + "mod-datepicker-input-width-quiet": { + "value": "calc(var(--spectrum-datepicker-range-input-width-quiet-first) + var(--spectrum-datepicker-icon-size) + var(--spectrum-datepicker-initial-height))", + "description": "Used by `--spectrum-datepicker-input-width-quiet`.
Defaults to `calc(var(--spectrum-datepicker-range-input-width-quiet-first) + var(--spectrum-datepicker-icon-size) + var(--spectrum-datepicker-initial-height))`, if not set.", + "control": "text", + "category": "Modifier" + }, + "mod-datepicker-datetime-input-width-first": { + "value": "calc(var(--spectrum-datepicker-input-width-base) + var(--spectrum-datepicker-datetime-width-first))", + "description": "Used by `--spectrum-datepicker-datetime-input-width-first`.
Defaults to `calc(var(--spectrum-datepicker-input-width-base) + var(--spectrum-datepicker-datetime-width-first))`, if not set.", + "control": "text", + "category": "Modifier" + }, + "mod-datepicker-datetime-input-width": { + "value": "calc(var(--spectrum-datepicker-datetime-input-width-first) + var(--spectrum-datepicker-icon-size) + var(--spectrum-datepicker-initial-height))", + "description": "Used by `--spectrum-datepicker-datetime-input-width`.
Defaults to `calc(var(--spectrum-datepicker-datetime-input-width-first) + var(--spectrum-datepicker-icon-size) + var(--spectrum-datepicker-initial-height))`, if not set.", + "control": "text", + "category": "Modifier" + }, + "mod-datepicker-datetime-quiet-input-width-first": { + "value": "calc(var(--spectrum-datepicker-input-width-base) + var(--spectrum-datepicker-input-datetime-width))", + "description": "Used by `--spectrum-datepicker-datetime-quiet-input-width-first`.
Defaults to `calc(var(--spectrum-datepicker-input-width-base) + var(--spectrum-datepicker-input-datetime-width))`, if not set.", + "control": "text", + "category": "Modifier" + }, + "mod-datepicker-datetime-quiet-input-width": { + "value": "calc(var(--spectrum-datepicker-datetime-quiet-input-width-first) + var(--spectrum-datepicker-icon-size) + var(--spectrum-datepicker-initial-height))", + "description": "Used by `--spectrum-datepicker-datetime-quiet-input-width`.
Defaults to `calc(var(--spectrum-datepicker-datetime-quiet-input-width-first) + var(--spectrum-datepicker-icon-size) + var(--spectrum-datepicker-initial-height))`, if not set.", + "control": "text", + "category": "Modifier" + }, + "mod-datepicker-padding-inline": { + "value": "calc(var(--spectrum-datepicker-pickerbutton-width) + var(--spectrum-component-edge-to-text-100) - var(--spectrum-datepicker-border-width) * 2)", + "description": "Defined in `.spectrum-DatePicker--quiet`.
Used by `--spectrum-datepicker-padding-inline-end`.
Defaults to `calc(var(--spectrum-datepicker-pickerbutton-width) + var(--spectrum-component-edge-to-text-100) - var(--spectrum-datepicker-border-width) * 2)`, if not set.", + "control": "text", + "category": "Modifier" + }, + "mod-datepicker-padding-inline-quiet": { + "value": "calc(var(--spectrum-datepicker-pickerbutton-width) + var(--spectrum-component-edge-to-text-100) - var(--spectrum-datepicker-quiet-button-offset))", + "description": "Used by `--spectrum-datepicker-padding-inline-end-quiet`.
Defaults to `calc(var(--spectrum-datepicker-pickerbutton-width) + var(--spectrum-component-edge-to-text-100) - var(--spectrum-datepicker-quiet-button-offset))`, if not set.", + "control": "text", + "category": "Modifier" + }, + "mod-datepicker-padding-inline-end-invalid-quiet": { + "value": "calc(var(--spectrum-datepicker-pickerbutton-width-quiet) + var(--spectrum-datepicker-icon-size) + var(--spectrum-datepicker-icon-to-text))", + "description": "Used by `--spectrum-datepicker-padding-inline-end-invalid-quiet`.
Defaults to `calc(var(--spectrum-datepicker-pickerbutton-width-quiet) + var(--spectrum-datepicker-icon-size) + var(--spectrum-datepicker-icon-to-text))`, if not set.", + "control": "text", + "category": "Modifier" + }, + "mod-datepicker-dash-color-disabled": { + "value": "var(--spectrum-gray-400)", + "description": "Used by `--mod-datepicker-dash-color`.
Defaults to `var(--spectrum-disabled-content-color)`, if not set.", + "control": "color", + "category": "Modifier" + }, + "mod-datepicker-generic-padding": { + "value": "var(--spectrum-datepicker-generic-padding)", + "description": "Used by `.spectrum-DatePicker-input.spectrum-DatePicker-startField`, `.spectrum-DatePicker-input.spectrum-DatePicker-endField`.
Defaults to `var(--spectrum-datepicker-generic-padding)`, if not set.", + "control": "text", + "category": "Modifier" + }, + "mod-datepicker-dash-line-height": { + "value": "var(--spectrum-datepicker-dash-line-height)", + "description": "Used by `.spectrum-DatePicker-rangeDash`.
Defaults to `var(--spectrum-datepicker-dash-line-height)`, if not set.", + "control": "text", + "category": "Modifier" + } + }, + "component": { + "spectrum-datepicker-border-radius": { + "description": "Defined in `.spectrum-DatePicker`.
Used by `.spectrum-DatePicker`, `--mod-datepicker-border-radius`, `.spectrum-DatePicker--range:after`.", + "control": "text", + "category": "Component" + }, + "spectrum-datepicker-border-radius-quiet": { + "description": "Defined in `.spectrum-DatePicker`.
Used by `--mod-datepicker-border-radius`.", + "control": "text", + "category": "Component" + }, + "spectrum-datepicker-border-width": { + "description": "Defined in `.spectrum-DatePicker`.
Used by `--spectrum-datepicker-padding-inline-end`.", + "control": "text", + "category": "Component" + }, + "spectrum-datepicker-min-width": { + "description": "Defined in `.spectrum-DatePicker`.
Used by `.spectrum-DatePicker`.", + "control": "text", + "category": "Component" + }, + "spectrum-datepicker-icon-size": { + "description": "Defined in `.spectrum-DatePicker`.
Used by `--spectrum-datepicker-input-width-base`, `--spectrum-datepicker-input-width-quiet`, `--spectrum-datepicker-datetime-input-width`, `--spectrum-datepicker-datetime-quiet-input-width`, `--spectrum-datepicker-padding-inline-end-invalid-quiet`.", + "control": "text", + "category": "Component" + }, + "spectrum-datepicker-pickerbutton-border-color": { + "description": "Defined in `.spectrum-DatePicker`.
Used by `--mod-picker-button-border-color`.", + "control": "color", + "category": "Component" + }, + "spectrum-datepicker-pickerbutton-border-color-invalid": { + "description": "Defined in `.spectrum-DatePicker`.
Used by `--mod-picker-button-border-color`.", + "control": "color", + "category": "Component" + }, + "spectrum-datepicker-pickerbutton-width": { + "description": "Defined in `.spectrum-DatePicker`.
Used by `--spectrum-datepicker-pickerbutton-width-quiet`, `--spectrum-datepicker-padding-inline-end`, `--spectrum-datepicker-padding-inline-end-quiet`, `--mod-textfield-icon-spacing-inline-end-invalid`.", + "control": "text", + "category": "Component" + }, + "spectrum-datepicker-quiet-button-offset": { + "description": "Defined in `.spectrum-DatePicker`.
Used by `--spectrum-datepicker-pickerbutton-width-quiet`, `--spectrum-datepicker-padding-inline-end-quiet`, `.spectrum-DatePicker--quiet .spectrum-DatePicker-button`.", + "control": "text", + "category": "Component" + }, + "spectrum-datepicker-icon-to-text": { + "description": "Defined in `.spectrum-DatePicker`.
Used by `--spectrum-datepicker-padding-inline-end-invalid-quiet`.", + "control": "text", + "category": "Component" + }, + "spectrum-datepicker-pickerbutton-width-quiet": { + "description": "Defined in `.spectrum-DatePicker`.
Used by `--spectrum-datepicker-padding-inline-end-invalid-quiet`, `--mod-textfield-icon-spacing-inline-end-quiet-invalid`.", + "control": "text", + "category": "Component" + }, + "spectrum-datepicker-focus-ring-gap": { + "description": "Defined in `.spectrum-DatePicker`.
Used by `.spectrum-DatePicker--range:after`.", + "control": "text", + "category": "Component" + }, + "spectrum-datepicker-focus-thickness": { + "description": "Defined in `.spectrum-DatePicker`.
Used by `.spectrum-DatePicker--range.spectrum-DatePicker--quiet.is-keyboardFocused:after`.", + "control": "text", + "category": "Component" + }, + "spectrum-datepicker-focus-animation": { + "description": "Defined in `.spectrum-DatePicker`.
Used by `.spectrum-DatePicker--range:after`.", + "control": "text", + "category": "Component" + }, + "spectrum-datepicker-focus-ring-width": { + "description": "Defined in `.spectrum-DatePicker`.
Used by `.spectrum-DatePicker--range.is-keyboardFocused:not(.spectrum-DatePicker--quiet):after`.", + "control": "text", + "category": "Component" + }, + "spectrum-datepicker-focus-ring-color": { + "description": "Defined in `.spectrum-DatePicker`.
Used by `.spectrum-DatePicker--range.is-keyboardFocused:not(.spectrum-DatePicker--quiet):after`, `.spectrum-DatePicker--range.spectrum-DatePicker--quiet.is-keyboardFocused:after`.", + "control": "color", + "category": "Component" + }, + "spectrum-datepicker-focus-line-gap": { + "description": "Defined in `.spectrum-DatePicker`.
Used by `.spectrum-DatePicker--range.spectrum-DatePicker--quiet.is-keyboardFocused:after`.", + "control": "text", + "category": "Component" + }, + "spectrum-datepicker-invalid-quiet-color": { + "description": "Defined in `.spectrum-DatePicker`.
Used by `--mod-picker-button-border-color`.", + "control": "color", + "category": "Component" + }, + "spectrum-datepicker-quiet-border-color-hover": { + "description": "Defined in `.spectrum-DatePicker`.
Used by `--mod-picker-button-border-color`.", + "control": "color", + "category": "Component" + }, + "spectrum-datepicker-border-color-disabled": { + "description": "Defined in `.spectrum-DatePicker`.
Used by `--mod-picker-button-border-color-disabled`, `--mod-picker-button-background-color-hover-disabled`, `--mod-textfield-border-color-disabled`.", + "control": "color", + "category": "Component" + }, + "spectrum-datepicker-dash-font-size": { + "description": "Defined in `.spectrum-DatePicker`.
Used by `--spectrum-datepicker-range-dash-marin-inline-start`, `.spectrum-DatePicker-rangeDash:before`.", + "control": "text", + "category": "Component" + }, + "spectrum-datepicker-dash-color": { + "description": "Defined in `.spectrum-DatePicker`.
Used by `.spectrum-DatePicker-rangeDash`.", + "control": "color", + "category": "Component" + }, + "spectrum-datepicker-range-dash-padding-top": { + "description": "Defined in `.spectrum-DatePicker`.
Used by `.spectrum-DatePicker-rangeDash`.", + "control": "text", + "category": "Component" + }, + "spectrum-datepicker-range-dash-marin-inline-start": { + "description": "Defined in `.spectrum-DatePicker`.
Used by `.spectrum-DatePicker-rangeDash:before`.", + "control": "text", + "category": "Component" + }, + "spectrum-datepicker-range-input-width-first": { + "description": "Defined in `.spectrum-DatePicker`.
Used by `--spectrum-datepicker-input-width-base`, `.spectrum-DatePicker--range .spectrum-DatePicker-textfield:first-of-type`.", + "control": "text", + "category": "Component" + }, + "spectrum-datepicker-initial-width": { + "description": "Used by `--spectrum-datepicker-range-input-width-first`.", + "control": "text", + "category": "Component" + }, + "spectrum-datepicker-generic-padding": { + "description": "Used by `--spectrum-datepicker-range-input-width-first`, `.spectrum-DatePicker-input.spectrum-DatePicker-startField`, `.spectrum-DatePicker-input.spectrum-DatePicker-endField`.", + "control": "text", + "category": "Component" + }, + "spectrum-datepicker-input-width-base": { + "description": "Defined in `.spectrum-DatePicker`.
Used by `--spectrum-datepicker-input-width`, `--spectrum-datepicker-datetime-input-width-first`, `--spectrum-datepicker-datetime-quiet-input-width-first`.", + "control": "text", + "category": "Component" + }, + "spectrum-datepicker-input-width": { + "description": "Defined in `.spectrum-DatePicker`.
Used by `.spectrum-DatePicker--range .spectrum-DatePicker-textfield`.", + "control": "text", + "category": "Component" + }, + "spectrum-datepicker-initial-height": { + "description": "Defined in `.spectrum-DatePicker`.
Used by `--spectrum-datepicker-input-width`, `--spectrum-datepicker-input-width-quiet`, `--spectrum-datepicker-datetime-input-width`, `--spectrum-datepicker-datetime-quiet-input-width`.", + "control": "text", + "category": "Component" + }, + "spectrum-datepicker-range-input-width-quiet-first": { + "description": "Defined in `.spectrum-DatePicker`.
Used by `--spectrum-datepicker-input-width-quiet`, `.spectrum-DatePicker--range.spectrum-DatePicker--quiet .spectrum-DatePicker-textfield:first-of-type`.", + "control": "text", + "category": "Component" + }, + "spectrum-datepicker-width-quiet-first": { + "description": "Used by `--spectrum-datepicker-range-input-width-quiet-first`.", + "control": "text", + "category": "Component" + }, + "spectrum-datepicker-width-quiet-second": { + "description": "Used by `--spectrum-datepicker-range-input-width-quiet-first`.", + "control": "text", + "category": "Component" + }, + "spectrum-datepicker-input-width-quiet": { + "description": "Defined in `.spectrum-DatePicker`.
Used by `.spectrum-DatePicker--range.spectrum-DatePicker--quiet .spectrum-DatePicker-textfield`.", + "control": "text", + "category": "Component" + }, + "spectrum-datepicker-datetime-input-width-first": { + "description": "Defined in `.spectrum-DatePicker`.
Used by `--spectrum-datepicker-datetime-input-width`, `.spectrum-DatePicker--range.spectrum-DatePicker--datetimeRange .spectrum-DatePicker-textfield:first-of-type`.", + "control": "text", + "category": "Component" + }, + "spectrum-datepicker-datetime-width-first": { + "description": "Used by `--spectrum-datepicker-datetime-input-width-first`.", + "control": "text", + "category": "Component" + }, + "spectrum-datepicker-datetime-input-width": { + "description": "Defined in `.spectrum-DatePicker`.
Used by `.spectrum-DatePicker--range.spectrum-DatePicker--datetimeRange .spectrum-DatePicker-textfield`.", + "control": "text", + "category": "Component" + }, + "spectrum-datepicker-datetime-quiet-input-width-first": { + "description": "Defined in `.spectrum-DatePicker`.
Used by `--spectrum-datepicker-datetime-quiet-input-width`, `.spectrum-DatePicker--range.spectrum-DatePicker--datetimeRange.spectrum-DatePicker--quiet .spectrum-DatePicker-textfield:first-of-type`.", + "control": "text", + "category": "Component" + }, + "spectrum-datepicker-input-datetime-width": { + "description": "Used by `--spectrum-datepicker-datetime-quiet-input-width-first`.", + "control": "text", + "category": "Component" + }, + "spectrum-datepicker-datetime-quiet-input-width": { + "description": "Defined in `.spectrum-DatePicker`.
Used by `.spectrum-DatePicker--range.spectrum-DatePicker--datetimeRange.spectrum-DatePicker--quiet .spectrum-DatePicker-textfield`.", + "control": "text", + "category": "Component" + }, + "spectrum-datepicker-padding-inline-end": { + "description": "Defined in `.spectrum-DatePicker`.
Used by `.spectrum-DatePicker-input`.", + "control": "text", + "category": "Component" + }, + "spectrum-datepicker-padding-inline-end-quiet": { + "description": "Defined in `.spectrum-DatePicker`.
Used by `--mod-datepicker-padding-inline`.", + "control": "text", + "category": "Component" + }, + "spectrum-datepicker-padding-inline-end-invalid-quiet": { + "description": "Defined in `.spectrum-DatePicker`.
Used by `.spectrum-DatePicker--quiet.is-invalid .spectrum-DatePicker-input:not(.spectrum-DatePicker-startField)`.", + "control": "text", + "category": "Component" + }, + "spectrum-datepicker-invalid-icon-to-button": { + "description": "Used by `--mod-textfield-icon-spacing-inline-end-invalid`.", + "control": "text", + "category": "Component" + }, + "spectrum-datepicker-invalid-icon-to-button-quiet": { + "description": "Used by `--mod-textfield-icon-spacing-inline-end-quiet-invalid`.", + "control": "text", + "category": "Component" + }, + "spectrum-datepicker-dash-line-height": { + "description": "Used by `.spectrum-DatePicker-rangeDash`.", + "control": "text", + "category": "Component" + } + }, + "global": { + "spectrum-component-height-100": { + "value": "32px", + "description": "Used by `--system-date-picker-initial-height`.", + "control": "text", + "category": "Global" + }, + "spectrum-corner-radius-100": { + "value": "8px", + "description": "Used by `--spectrum-datepicker-border-radius`.", + "control": "text", + "category": "Global" + }, + "spectrum-border-width-100": { + "value": "1px", + "description": "Used by `--spectrum-datepicker-border-width`, `--spectrum-datepicker-focus-ring-width`.", + "control": "text", + "category": "Global" + }, + "spectrum-field-width": { + "value": "192px", + "description": "Used by `--spectrum-datepicker-min-width`.", + "control": "text", + "category": "Global" + }, + "spectrum-workflow-icon-size-100": { + "value": "20px", + "description": "Used by `--spectrum-datepicker-icon-size`, `--spectrum-datepicker-pickerbutton-width`.", + "control": "text", + "category": "Global" + }, + "spectrum-gray-500": { + "value": "light-dark(rgb(143, 143, 143), rgb(109, 109, 109))", + "description": "Used by `--spectrum-datepicker-pickerbutton-border-color`, `--spectrum-datepicker-quiet-border-color-hover`.", + "control": "text", + "category": "Global" + }, + "spectrum-negative-border-color-default": { + "value": "var(--spectrum-negative-color-900)", + "description": "Used by `--spectrum-datepicker-pickerbutton-border-color-invalid`, `--spectrum-datepicker-invalid-quiet-color`.", + "control": "color", + "category": "Global" + }, + "spectrum-field-edge-to-disclosure-icon-100": { + "value": "11px", + "description": "Used by `--spectrum-datepicker-pickerbutton-width`.", + "control": "text", + "category": "Global" + }, + "spectrum-text-to-visual-100": { + "value": "6px", + "description": "Used by `--spectrum-datepicker-quiet-button-offset`.", + "control": "text", + "category": "Global" + }, + "spectrum-component-edge-to-text-100": { + "value": "12px", + "description": "Used by `--spectrum-datepicker-icon-to-text`, `--spectrum-datepicker-padding-inline-end`, `--spectrum-datepicker-padding-inline-end-quiet`.", + "control": "text", + "category": "Global" + }, + "spectrum-focus-indicator-gap": { + "value": "2px", + "description": "Used by `--spectrum-datepicker-focus-ring-gap`.", + "control": "text", + "category": "Global" + }, + "spectrum-focus-indicator-thickness": { + "value": "2px", + "description": "Used by `--spectrum-datepicker-focus-thickness`.", + "control": "text", + "category": "Global" + }, + "spectrum-animation-duration-100": { + "description": "Used by `--spectrum-datepicker-focus-animation`.", + "control": "text", + "category": "Global" + }, + "spectrum-focus-indicator-color": { + "value": "var(--spectrum-blue-800)", + "description": "Used by `--spectrum-datepicker-focus-ring-color`.", + "control": "color", + "category": "Global" + }, + "spectrum-spacing-75": { + "value": "4px", + "description": "Used by `--spectrum-datepicker-focus-line-gap`.", + "control": "text", + "category": "Global" + }, + "spectrum-disabled-border-color": { + "value": "var(--spectrum-gray-300)", + "description": "Used by `--spectrum-datepicker-border-color-disabled`.", + "control": "color", + "category": "Global" + }, + "spectrum-font-size-100": { + "value": "14px", + "description": "Used by `--spectrum-datepicker-dash-font-size`.", + "control": "text", + "category": "Global" + }, + "spectrum-neutral-content-color-default": { + "value": "var(--spectrum-gray-800)", + "description": "Used by `--spectrum-datepicker-dash-color`.", + "control": "color", + "category": "Global" + }, + "spectrum-disabled-content-color": { + "value": "var(--spectrum-gray-400)", + "description": "Used by `--mod-datepicker-dash-color`.", + "control": "color", + "category": "Global" + } + }, + "system-theme": { + "system-date-picker-initial-height": { + "description": "Defined in `.spectrum`.
Used by `--spectrum-datepicker-initial-height`.", + "control": "text" + } + }, + "passthroughs": { + "mod-textfield-border-color-disabled": { + "category": "Passthrough" + }, + "mod-textfield-icon-spacing-inline-end-invalid": { + "category": "Passthrough" + }, + "mod-textfield-icon-spacing-inline-end-quiet-invalid": { + "category": "Passthrough" + }, + "mod-picker-button-border-color": { + "category": "Passthrough" + }, + "mod-picker-button-border-color-disabled": { + "category": "Passthrough" + }, + "mod-picker-button-background-color-hover-disabled": { + "category": "Passthrough" + }, + "mod-picker-button-background-color": { + "category": "Passthrough" + } + }, + "high-contrast": { + "highcontrast-datepicker-pickerbutton-border-color": { + "value": "var(--mod-datepicker-pickerbutton-border-color-invalid, var(--spectrum-negative-border-color-default))", + "description": "Defined in `.spectrum-DatePicker`, `.spectrum-DatePicker.spectrum-DatePicker--quiet.is-invalid`.
Used by `--spectrum-datepicker-pickerbutton-border-color`, `--spectrum-datepicker-pickerbutton-border-color-invalid`.
Defaults to `var(--mod-datepicker-pickerbutton-border-color-invalid, var(--spectrum-negative-border-color-default))`, if not set.", + "control": "color" + }, + "highcontrast-datepicker-focus-ring-color": { + "value": "var(--mod-datepicker-focus-ring-color, var(--spectrum-focus-indicator-color))", + "description": "Defined in `.spectrum-DatePicker`.
Used by `--spectrum-datepicker-focus-ring-color`.
Defaults to `var(--mod-datepicker-focus-ring-color, var(--spectrum-focus-indicator-color))`, if not set.", + "control": "color" + }, + "highcontrast-datepicker-dash-color": { + "value": "var(--mod-datepicker-dash-color, var(--spectrum-neutral-content-color-default))", + "description": "Defined in `.spectrum-DatePicker`, `.spectrum-DatePicker.is-disabled`.
Used by `--spectrum-datepicker-dash-color`.
Defaults to `var(--mod-datepicker-dash-color, var(--spectrum-neutral-content-color-default))`, if not set.", + "control": "color" + } + } } diff --git a/components/datepicker/stories/datepicker.stories.js b/components/datepicker/stories/datepicker.stories.js index 0d40c563888..e2054a0bfb6 100644 --- a/components/datepicker/stories/datepicker.stories.js +++ b/components/datepicker/stories/datepicker.stories.js @@ -2,11 +2,13 @@ import { default as CalendarStories } from "@spectrum-css/calendar/stories/calen import { disableDefaultModes } from "@spectrum-css/preview/modes"; import { isDisabled, isInvalid, isOpen, isQuiet, isReadOnly, isRequired, isValid } from "@spectrum-css/preview/types"; import { within } from "@storybook/test"; -import metadata from "../dist/metadata.json"; -import packageJson from "../package.json"; import { DatePickerGroup } from "./datepicker.test.js"; import { OpenClosedTemplate, Template } from "./template.js"; +// Local assets to render the component styles and structure +import metadata from "../dist/metadata.json"; +import packageJson from "../package.json"; + /** * A date picker displays a text field input with a button next to it, and can display two text fields next to each other for choosing a date range. * @@ -77,6 +79,7 @@ export default { }, packageJson, metadata, + cssprops: metadata.modifiers, }, play: async ({ canvasElement }) => { const canvas = within(canvasElement); diff --git a/components/datepicker/stories/template.js b/components/datepicker/stories/template.js index 2d56102d24e..d79f7ee42aa 100644 --- a/components/datepicker/stories/template.js +++ b/components/datepicker/stories/template.js @@ -15,7 +15,7 @@ import "../themes/express.css"; export const DatePicker = ({ rootClass = "spectrum-DatePicker", - id = getRandomId("datepicker"), + id = getRandomId("date-picker"), customClasses = [], isOpen = true, isInvalid = false, diff --git a/components/dial/dist/metadata.json b/components/dial/dist/metadata.json index cf8d026a3b2..f8e189dad57 100644 --- a/components/dial/dist/metadata.json +++ b/components/dial/dist/metadata.json @@ -6,8 +6,6 @@ ".spectrum-Dial-controls:after", ".spectrum-Dial-controls:before", ".spectrum-Dial-handle", - ".spectrum-Dial-handle.is-dragged", - ".spectrum-Dial-handle.is-dragged:after", ".spectrum-Dial-handle:active", ".spectrum-Dial-handle:active:after", ".spectrum-Dial-handle:after", @@ -18,6 +16,8 @@ ".spectrum-Dial-handle:focus-within:after", ".spectrum-Dial-handle:hover", ".spectrum-Dial-handle:hover:after", + ".spectrum-Dial-handle.is-dragged", + ".spectrum-Dial-handle.is-dragged:after", ".spectrum-Dial-input", ".spectrum-Dial-input:focus", ".spectrum-Dial-label", @@ -35,96 +35,458 @@ ".u-isGrabbing .spectrum-Dial .spectrum-Dial-label", ".u-isGrabbing .spectrum-Dial .spectrum-Dial-value" ], - "modifiers": [ - "--mod-dial-background-color-default", - "--mod-dial-border-color", - "--mod-dial-border-color-hover", - "--mod-dial-border-radius", - "--mod-dial-container-width", - "--mod-dial-controls-margin", - "--mod-dial-controls-min-height", - "--mod-dial-handle-block-margin", - "--mod-dial-handle-border-color-disabled", - "--mod-dial-handle-border-size", - "--mod-dial-handle-inline-margin", - "--mod-dial-handle-marker-border-radius", - "--mod-dial-handle-marker-color", - "--mod-dial-handle-marker-color-hover", - "--mod-dial-handle-marker-color-key-focus", - "--mod-dial-handle-marker-color-mouse-focus", - "--mod-dial-handle-marker-height", - "--mod-dial-handle-marker-width", - "--mod-dial-handle-position", - "--mod-dial-handle-size", - "--mod-dial-height", - "--mod-dial-label-container-top-to-text", - "--mod-dial-label-gap-y", - "--mod-dial-label-line-height", - "--mod-dial-label-text-color", - "--mod-dial-label-text-color-disabled", - "--mod-dial-label-text-size", - "--mod-dial-min-height", - "--mod-dial-min-max-tick-angles", - "--mod-dial-min-max-tick-color", - "--mod-dial-width" - ], - "component": [ - "--spectrum-dial-background-color-default", - "--spectrum-dial-border-color", - "--spectrum-dial-border-color-hover", - "--spectrum-dial-border-radius", - "--spectrum-dial-container-width", - "--spectrum-dial-controls-margin", - "--spectrum-dial-controls-min-height", - "--spectrum-dial-handle-block-margin", - "--spectrum-dial-handle-border-color-disabled", - "--spectrum-dial-handle-border-size", - "--spectrum-dial-handle-inline-margin", - "--spectrum-dial-handle-marker-border-radius", - "--spectrum-dial-handle-marker-color", - "--spectrum-dial-handle-marker-color-hover", - "--spectrum-dial-handle-marker-color-key-focus", - "--spectrum-dial-handle-marker-color-mouse-focus", - "--spectrum-dial-handle-marker-height", - "--spectrum-dial-handle-marker-width", - "--spectrum-dial-handle-position", - "--spectrum-dial-handle-size", - "--spectrum-dial-height", - "--spectrum-dial-label-container-top-to-text", - "--spectrum-dial-label-gap-y", - "--spectrum-dial-label-line-height", - "--spectrum-dial-label-text-color", - "--spectrum-dial-label-text-color-disabled", - "--spectrum-dial-label-text-size", - "--spectrum-dial-min-height", - "--spectrum-dial-min-max-tick-angles", - "--spectrum-dial-min-max-tick-color", - "--spectrum-dial-width" - ], - "global": [ - "--spectrum-border-width-200", - "--spectrum-font-size-75", - "--spectrum-gray-25", - "--spectrum-gray-400", - "--spectrum-gray-600", - "--spectrum-gray-700", - "--spectrum-gray-75", - "--spectrum-gray-800", - "--spectrum-line-height-200" - ], - "system-theme": [ - "--system-dial-background-color-default", - "--system-dial-handle-marker-color-key-focus" - ], - "passthroughs": [], - "high-contrast": [ - "--highcontrast-dial-border-color", - "--highcontrast-dial-border-color-hover", - "--highcontrast-dial-handle-border-color-disabled", - "--highcontrast-dial-handle-marker-color", - "--highcontrast-dial-handle-marker-color-hover", - "--highcontrast-dial-handle-marker-color-key-focus", - "--highcontrast-dial-label-text-color-disabled", - "--highcontrast-dial-min-max-tick-color" - ] + "modifiers": { + "mod-dial-min-height": { + "value": "var(--spectrum-dial-min-height)", + "description": "Used by `.spectrum-Dial`.
Defaults to `var(--spectrum-dial-min-height)`, if not set.", + "control": "text", + "category": "Modifier" + }, + "mod-dial-container-width": { + "value": "var(--spectrum-dial-container-width)", + "description": "Used by `.spectrum-Dial`.
Defaults to `var(--spectrum-dial-container-width)`, if not set.", + "control": "text", + "category": "Modifier" + }, + "mod-dial-label-text-color-disabled": { + "value": "var(--spectrum-dial-label-text-color-disabled)", + "description": "Used by `.spectrum-Dial.is-disabled .spectrum-Dial-labelContainer`.
Defaults to `var(--spectrum-dial-label-text-color-disabled)`, if not set.", + "control": "color", + "category": "Modifier" + }, + "mod-dial-handle-border-color-disabled": { + "value": "var(--spectrum-dial-handle-border-color-disabled)", + "description": "Used by `.spectrum-Dial.is-disabled .spectrum-Dial-controls:after, .spectrum-Dial.is-disabled .spectrum-Dial-controls:before`, `.spectrum-Dial.is-disabled .spectrum-Dial-handle`, `.spectrum-Dial.is-disabled .spectrum-Dial-handle:after, .spectrum-Dial.is-disabled .spectrum-Dial-handle:before`.
Defaults to `var(--spectrum-dial-handle-border-color-disabled)`, if not set.", + "control": "color", + "category": "Modifier" + }, + "mod-dial-background-color-default": { + "value": "var(--spectrum-dial-background-color-default)", + "description": "Used by `.spectrum-Dial.is-disabled .spectrum-Dial-handle`.
Defaults to `var(--spectrum-dial-background-color-default)`, if not set.", + "control": "color", + "category": "Modifier" + }, + "mod-dial-label-text-color": { + "value": "var(--spectrum-dial-label-text-color)", + "description": "Used by `.spectrum-Dial-labelContainer`.
Defaults to `var(--spectrum-dial-label-text-color)`, if not set.", + "control": "color", + "category": "Modifier" + }, + "mod-dial-label-container-top-to-text": { + "value": "var(--spectrum-dial-label-container-top-to-text)", + "description": "Used by `.spectrum-Dial-labelContainer`.
Defaults to `var(--spectrum-dial-label-container-top-to-text)`, if not set.", + "control": "text", + "category": "Modifier" + }, + "mod-dial-label-text-size": { + "value": "var(--spectrum-dial-label-text-size)", + "description": "Used by `.spectrum-Dial-labelContainer`.
Defaults to `var(--spectrum-dial-label-text-size)`, if not set.", + "control": "text", + "category": "Modifier" + }, + "mod-dial-label-line-height": { + "value": "var(--spectrum-dial-label-line-height)", + "description": "Used by `.spectrum-Dial-labelContainer`.
Defaults to `var(--spectrum-dial-label-line-height)`, if not set.", + "control": "text", + "category": "Modifier" + }, + "mod-dial-label-gap-y": { + "value": "var(--spectrum-dial-label-gap-y)", + "description": "Used by `.spectrum-Dial-labelContainer`.
Defaults to `var(--spectrum-dial-label-gap-y)`, if not set.", + "control": "text", + "category": "Modifier" + }, + "mod-dial-width": { + "value": "var(--spectrum-dial-width)", + "description": "Used by `.spectrum-Dial-controls`.
Defaults to `var(--spectrum-dial-width)`, if not set.", + "control": "text", + "category": "Modifier" + }, + "mod-dial-height": { + "value": "var(--spectrum-dial-height)", + "description": "Used by `.spectrum-Dial-controls`.
Defaults to `var(--spectrum-dial-height)`, if not set.", + "control": "text", + "category": "Modifier" + }, + "mod-dial-controls-min-height": { + "value": "var(--spectrum-dial-controls-min-height)", + "description": "Used by `.spectrum-Dial-controls`.
Defaults to `var(--spectrum-dial-controls-min-height)`, if not set.", + "control": "text", + "category": "Modifier" + }, + "mod-dial-controls-margin": { + "value": "var(--spectrum-dial-controls-margin)", + "description": "Used by `.spectrum-Dial-controls`.
Defaults to `var(--spectrum-dial-controls-margin)`, if not set.", + "control": "text", + "category": "Modifier" + }, + "mod-dial-border-radius": { + "value": "var(--spectrum-dial-border-radius)", + "description": "Used by `.spectrum-Dial-controls`, `.spectrum-Dial-handle`.
Defaults to `var(--spectrum-dial-border-radius)`, if not set.", + "control": "text", + "category": "Modifier" + }, + "mod-dial-min-max-tick-color": { + "value": "var(--spectrum-dial-min-max-tick-color)", + "description": "Used by `.spectrum-Dial-controls:after, .spectrum-Dial-controls:before`.
Defaults to `var(--spectrum-dial-min-max-tick-color)`, if not set.", + "control": "color", + "category": "Modifier" + }, + "mod-dial-handle-marker-height": { + "value": "var(--spectrum-dial-handle-marker-height)", + "description": "Used by `.spectrum-Dial-controls:after, .spectrum-Dial-controls:before`, `.spectrum-Dial-controls:before`, `.spectrum-Dial-controls:after`, `.spectrum-Dial-handle:after`.
Defaults to `var(--spectrum-dial-handle-marker-height)`, if not set.", + "control": "text", + "category": "Modifier" + }, + "mod-dial-handle-marker-border-radius": { + "value": "var(--spectrum-dial-handle-marker-border-radius)", + "description": "Used by `.spectrum-Dial-controls:after, .spectrum-Dial-controls:before`, `.spectrum-Dial-handle:after`.
Defaults to `var(--spectrum-dial-handle-marker-border-radius)`, if not set.", + "control": "text", + "category": "Modifier" + }, + "mod-dial-min-max-tick-angles": { + "value": "var(--spectrum-dial-min-max-tick-angles)", + "description": "Used by `.spectrum-Dial-controls:before`, `.spectrum-Dial-controls:after, .spectrum-Dial-handle`.
Defaults to `var(--spectrum-dial-min-max-tick-angles)`, if not set.", + "control": "text", + "category": "Modifier" + }, + "mod-dial-border-color": { + "value": "var(--spectrum-dial-border-color)", + "description": "Used by `.spectrum-Dial-handle`.
Defaults to `var(--spectrum-dial-border-color)`, if not set.", + "control": "color", + "category": "Modifier" + }, + "mod-dial-handle-block-margin": { + "value": "var(--spectrum-dial-handle-block-margin)", + "description": "Used by `.spectrum-Dial-handle`.
Defaults to `var(--spectrum-dial-handle-block-margin)`, if not set.", + "control": "text", + "category": "Modifier" + }, + "mod-dial-handle-inline-margin": { + "value": "var(--spectrum-dial-handle-inline-margin)", + "description": "Used by `.spectrum-Dial-handle`.
Defaults to `var(--spectrum-dial-handle-inline-margin)`, if not set.", + "control": "text", + "category": "Modifier" + }, + "mod-dial-handle-size": { + "value": "var(--spectrum-dial-handle-size)", + "description": "Used by `.spectrum-Dial-handle`.
Defaults to `var(--spectrum-dial-handle-size)`, if not set.", + "control": "text", + "category": "Modifier" + }, + "mod-dial-handle-border-size": { + "value": "var(--spectrum-dial-handle-border-size)", + "description": "Used by `.spectrum-Dial-handle`, `.spectrum-Dial-handle.is-dragged, .spectrum-Dial-handle:active, .spectrum-Dial-handle:focus-visible, .spectrum-Dial-handle:focus-within`.
Defaults to `var(--spectrum-dial-handle-border-size)`, if not set.", + "control": "text", + "category": "Modifier" + }, + "mod-dial-handle-position": { + "value": "var(--spectrum-dial-handle-position)", + "description": "Used by `.spectrum-Dial-handle`.
Defaults to `var(--spectrum-dial-handle-position)`, if not set.", + "control": "text", + "category": "Modifier" + }, + "mod-dial-handle-marker-width": { + "value": "var(--spectrum-dial-handle-marker-width)", + "description": "Used by `.spectrum-Dial-handle:after`.
Defaults to `var(--spectrum-dial-handle-marker-width)`, if not set.", + "control": "text", + "category": "Modifier" + }, + "mod-dial-handle-marker-color": { + "value": "var(--spectrum-dial-handle-marker-color)", + "description": "Used by `.spectrum-Dial-handle:after`.
Defaults to `var(--spectrum-dial-handle-marker-color)`, if not set.", + "control": "color", + "category": "Modifier" + }, + "mod-dial-border-color-hover": { + "value": "var(--spectrum-dial-border-color-hover)", + "description": "Used by `.spectrum-Dial-handle:hover`, `.spectrum-Dial-handle.is-dragged, .spectrum-Dial-handle:active`.
Defaults to `var(--spectrum-dial-border-color-hover)`, if not set.", + "control": "color", + "category": "Modifier" + }, + "mod-dial-handle-marker-color-hover": { + "value": "var(--spectrum-dial-handle-marker-color-hover)", + "description": "Used by `.spectrum-Dial-handle:hover:after`.
Defaults to `var(--spectrum-dial-handle-marker-color-hover)`, if not set.", + "control": "color", + "category": "Modifier" + }, + "mod-dial-handle-marker-color-mouse-focus": { + "value": "var(--spectrum-dial-handle-marker-color-mouse-focus)", + "description": "Used by `.spectrum-Dial-handle:focus-visible, .spectrum-Dial-handle:focus-within`.
Defaults to `var(--spectrum-dial-handle-marker-color-mouse-focus)`, if not set.", + "control": "color", + "category": "Modifier" + }, + "mod-dial-handle-marker-color-key-focus": { + "value": "var(--spectrum-dial-handle-marker-color-key-focus)", + "description": "Used by `.spectrum-Dial-handle:focus-visible:after, .spectrum-Dial-handle:focus-within:after`, `.spectrum-Dial-handle.is-dragged:after, .spectrum-Dial-handle:active:after`.
Defaults to `var(--spectrum-dial-handle-marker-color-key-focus)`, if not set.", + "control": "color", + "category": "Modifier" + } + }, + "component": { + "spectrum-dial-handle-marker-color": { + "description": "Defined in `.spectrum-Dial`.
Used by `.spectrum-Dial-handle:after`.", + "control": "color", + "category": "Component" + }, + "spectrum-dial-border-color": { + "description": "Defined in `.spectrum-Dial`.
Used by `.spectrum-Dial-handle`.", + "control": "color", + "category": "Component" + }, + "spectrum-dial-handle-marker-color-hover": { + "description": "Defined in `.spectrum-Dial`.
Used by `.spectrum-Dial-handle:hover:after`.", + "control": "color", + "category": "Component" + }, + "spectrum-dial-border-color-hover": { + "description": "Defined in `.spectrum-Dial`.
Used by `.spectrum-Dial-handle:hover`, `.spectrum-Dial-handle.is-dragged, .spectrum-Dial-handle:active`.", + "control": "color", + "category": "Component" + }, + "spectrum-dial-handle-marker-color-mouse-focus": { + "description": "Defined in `.spectrum-Dial`.
Used by `.spectrum-Dial-handle:focus-visible, .spectrum-Dial-handle:focus-within`.", + "control": "color", + "category": "Component" + }, + "spectrum-dial-min-max-tick-color": { + "description": "Defined in `.spectrum-Dial`.
Used by `.spectrum-Dial-controls:after, .spectrum-Dial-controls:before`.", + "control": "color", + "category": "Component" + }, + "spectrum-dial-label-text-color": { + "description": "Defined in `.spectrum-Dial`.
Used by `.spectrum-Dial-labelContainer`.", + "control": "color", + "category": "Component" + }, + "spectrum-dial-label-text-color-disabled": { + "description": "Defined in `.spectrum-Dial`.
Used by `.spectrum-Dial.is-disabled .spectrum-Dial-labelContainer`.", + "control": "color", + "category": "Component" + }, + "spectrum-dial-handle-border-color-disabled": { + "description": "Defined in `.spectrum-Dial`.
Used by `.spectrum-Dial.is-disabled .spectrum-Dial-controls:after, .spectrum-Dial.is-disabled .spectrum-Dial-controls:before`, `.spectrum-Dial.is-disabled .spectrum-Dial-handle`, `.spectrum-Dial.is-disabled .spectrum-Dial-handle:after, .spectrum-Dial.is-disabled .spectrum-Dial-handle:before`.", + "control": "color", + "category": "Component" + }, + "spectrum-dial-container-width": { + "description": "Defined in `.spectrum-Dial`.
Used by `.spectrum-Dial`.", + "control": "text", + "category": "Component" + }, + "spectrum-dial-handle-marker-width": { + "description": "Defined in `.spectrum-Dial`.
Used by `.spectrum-Dial-handle:after`.", + "control": "text", + "category": "Component" + }, + "spectrum-dial-handle-marker-height": { + "description": "Defined in `.spectrum-Dial`.
Used by `.spectrum-Dial-controls:after, .spectrum-Dial-controls:before`, `.spectrum-Dial-controls:before`, `.spectrum-Dial-controls:after`, `.spectrum-Dial-handle:after`.", + "control": "text", + "category": "Component" + }, + "spectrum-dial-handle-marker-border-radius": { + "description": "Defined in `.spectrum-Dial`.
Used by `.spectrum-Dial-controls:after, .spectrum-Dial-controls:before`, `.spectrum-Dial-handle:after`.", + "control": "text", + "category": "Component" + }, + "spectrum-dial-handle-size": { + "description": "Defined in `.spectrum-Dial`.
Used by `.spectrum-Dial-handle`, `.spectrum-Dial-input`.", + "control": "text", + "category": "Component" + }, + "spectrum-dial-min-height": { + "description": "Defined in `.spectrum-Dial`.
Used by `.spectrum-Dial`.", + "control": "text", + "category": "Component" + }, + "spectrum-dial-controls-min-height": { + "description": "Defined in `.spectrum-Dial`.
Used by `.spectrum-Dial-controls`.", + "control": "text", + "category": "Component" + }, + "spectrum-dial-min-max-tick-angles": { + "description": "Defined in `.spectrum-Dial`.
Used by `.spectrum-Dial-controls:before`, `.spectrum-Dial-controls:after, .spectrum-Dial-handle`.", + "control": "text", + "category": "Component" + }, + "spectrum-dial-width": { + "description": "Defined in `.spectrum-Dial`, `.spectrum-Dial.spectrum-Dial--small`.
Used by `.spectrum-Dial-controls`.", + "control": "text", + "category": "Component" + }, + "spectrum-dial-height": { + "description": "Defined in `.spectrum-Dial`, `.spectrum-Dial.spectrum-Dial--small`.
Used by `.spectrum-Dial-controls`.", + "control": "text", + "category": "Component" + }, + "spectrum-dial-handle-border-size": { + "description": "Defined in `.spectrum-Dial`.
Used by `.spectrum-Dial-handle`, `.spectrum-Dial-handle.is-dragged, .spectrum-Dial-handle:active, .spectrum-Dial-handle:focus-visible, .spectrum-Dial-handle:focus-within`.", + "control": "text", + "category": "Component" + }, + "spectrum-dial-label-text-size": { + "description": "Defined in `.spectrum-Dial`.
Used by `.spectrum-Dial-labelContainer`.", + "control": "text", + "category": "Component" + }, + "spectrum-dial-label-line-height": { + "description": "Defined in `.spectrum-Dial`.
Used by `.spectrum-Dial-labelContainer`.", + "control": "text", + "category": "Component" + }, + "spectrum-dial-background-color-default": { + "description": "Defined in `.spectrum-Dial`.
Used by `.spectrum-Dial.is-disabled .spectrum-Dial-handle`.", + "control": "color", + "category": "Component" + }, + "spectrum-dial-label-container-top-to-text": { + "description": "Used by `.spectrum-Dial-labelContainer`.", + "control": "text", + "category": "Component" + }, + "spectrum-dial-label-gap-y": { + "description": "Used by `.spectrum-Dial-labelContainer`.", + "control": "text", + "category": "Component" + }, + "spectrum-dial-controls-margin": { + "description": "Used by `.spectrum-Dial-controls`.", + "control": "text", + "category": "Component" + }, + "spectrum-dial-border-radius": { + "description": "Used by `.spectrum-Dial-controls`, `.spectrum-Dial-handle`.", + "control": "text", + "category": "Component" + }, + "spectrum-dial-handle-block-margin": { + "description": "Used by `.spectrum-Dial-handle`.", + "control": "text", + "category": "Component" + }, + "spectrum-dial-handle-inline-margin": { + "description": "Used by `.spectrum-Dial-handle`.", + "control": "text", + "category": "Component" + }, + "spectrum-dial-handle-position": { + "description": "Used by `.spectrum-Dial-handle`.", + "control": "text", + "category": "Component" + }, + "spectrum-dial-handle-marker-color-key-focus": { + "description": "Defined in `.spectrum-Dial`.
Used by `.spectrum-Dial-handle:focus-visible:after, .spectrum-Dial-handle:focus-within:after`, `.spectrum-Dial-handle.is-dragged:after, .spectrum-Dial-handle:active:after`.", + "control": "color", + "category": "Component" + } + }, + "global": { + "spectrum-gray-75": { + "value": "light-dark(rgb(243, 243, 243), rgb(34, 34, 34))", + "description": "Used by `--system-dial-background-color-default`.", + "control": "text", + "category": "Global" + }, + "spectrum-gray-25": { + "value": "light-dark(rgb(255, 255, 255), rgb(17, 17, 17))", + "description": "Used by `--system-dial-handle-marker-color-key-focus`.", + "control": "text", + "category": "Global" + }, + "spectrum-gray-700": { + "value": "light-dark(rgb(80, 80, 80), rgb(175, 175, 175))", + "description": "Used by `--spectrum-dial-handle-marker-color`, `--spectrum-dial-border-color`, `--spectrum-dial-handle-marker-color-mouse-focus`, `--spectrum-dial-label-text-color`, `--spectrum-dial-label-text-color-disabled`.", + "control": "text", + "category": "Global" + }, + "spectrum-gray-800": { + "value": "light-dark(rgb(41, 41, 41), rgb(219, 219, 219))", + "description": "Used by `--spectrum-dial-handle-marker-color-hover`, `--spectrum-dial-border-color-hover`.", + "control": "text", + "category": "Global" + }, + "spectrum-gray-600": { + "value": "light-dark(rgb(113, 113, 113), rgb(138, 138, 138))", + "description": "Used by `--spectrum-dial-min-max-tick-color`.", + "control": "text", + "category": "Global" + }, + "spectrum-gray-400": { + "value": "light-dark(rgb(198, 198, 198), rgb(68, 68, 68))", + "description": "Used by `--spectrum-dial-handle-border-color-disabled`.", + "control": "text", + "category": "Global" + }, + "spectrum-border-width-200": { + "value": "2px", + "description": "Used by `--spectrum-dial-handle-border-size`.", + "control": "text", + "category": "Global" + }, + "spectrum-font-size-75": { + "value": "12px", + "description": "Used by `--spectrum-dial-label-text-size`.", + "control": "text", + "category": "Global" + }, + "spectrum-line-height-200": { + "value": "1.5", + "description": "Used by `--spectrum-dial-label-line-height`.", + "control": "text", + "category": "Global" + } + }, + "system-theme": { + "system-dial-background-color-default": { + "description": "Defined in `.spectrum`.
Used by `--spectrum-dial-background-color-default`.", + "control": "color" + }, + "system-dial-handle-marker-color-key-focus": { + "description": "Defined in `.spectrum`.
Used by `--spectrum-dial-handle-marker-color-key-focus`.", + "control": "color" + } + }, + "passthroughs": {}, + "high-contrast": { + "highcontrast-dial-label-text-color-disabled": { + "value": "var(--mod-dial-label-text-color-disabled, var(--spectrum-dial-label-text-color-disabled))", + "description": "Defined in `.spectrum-Dial`.
Used by `.spectrum-Dial.is-disabled .spectrum-Dial-labelContainer`.
Defaults to `var(--mod-dial-label-text-color-disabled, var(--spectrum-dial-label-text-color-disabled))`, if not set.", + "control": "color" + }, + "highcontrast-dial-handle-border-color-disabled": { + "value": "var(--mod-dial-handle-border-color-disabled, var(--spectrum-dial-handle-border-color-disabled))", + "description": "Defined in `.spectrum-Dial`.
Used by `.spectrum-Dial.is-disabled .spectrum-Dial-controls:after, .spectrum-Dial.is-disabled .spectrum-Dial-controls:before`, `.spectrum-Dial.is-disabled .spectrum-Dial-handle`, `.spectrum-Dial.is-disabled .spectrum-Dial-handle:after, .spectrum-Dial.is-disabled .spectrum-Dial-handle:before`.
Defaults to `var(--mod-dial-handle-border-color-disabled, var(--spectrum-dial-handle-border-color-disabled))`, if not set.", + "control": "color" + }, + "highcontrast-dial-min-max-tick-color": { + "value": "var(--mod-dial-min-max-tick-color, var(--spectrum-dial-min-max-tick-color))", + "description": "Defined in `.spectrum-Dial`.
Used by `.spectrum-Dial-controls:after, .spectrum-Dial-controls:before`.
Defaults to `var(--mod-dial-min-max-tick-color, var(--spectrum-dial-min-max-tick-color))`, if not set.", + "control": "color" + }, + "highcontrast-dial-border-color": { + "value": "var(--mod-dial-border-color, var(--spectrum-dial-border-color))", + "description": "Defined in `.spectrum-Dial`.
Used by `.spectrum-Dial-handle`.
Defaults to `var(--mod-dial-border-color, var(--spectrum-dial-border-color))`, if not set.", + "control": "color" + }, + "highcontrast-dial-handle-marker-color": { + "value": "var(--mod-dial-handle-marker-color, var(--spectrum-dial-handle-marker-color))", + "description": "Defined in `.spectrum-Dial`.
Used by `.spectrum-Dial-handle:after`.
Defaults to `var(--mod-dial-handle-marker-color, var(--spectrum-dial-handle-marker-color))`, if not set.", + "control": "color" + }, + "highcontrast-dial-border-color-hover": { + "value": "var(--mod-dial-border-color-hover, var(--spectrum-dial-border-color-hover))", + "description": "Defined in `.spectrum-Dial`.
Used by `.spectrum-Dial-handle:hover`, `.spectrum-Dial-handle.is-dragged, .spectrum-Dial-handle:active`.
Defaults to `var(--mod-dial-border-color-hover, var(--spectrum-dial-border-color-hover))`, if not set.", + "control": "color" + }, + "highcontrast-dial-handle-marker-color-hover": { + "value": "var(--mod-dial-handle-marker-color-hover, var(--spectrum-dial-handle-marker-color-hover))", + "description": "Defined in `.spectrum-Dial`.
Used by `.spectrum-Dial-handle:hover:after`.
Defaults to `var(--mod-dial-handle-marker-color-hover, var(--spectrum-dial-handle-marker-color-hover))`, if not set.", + "control": "color" + }, + "highcontrast-dial-handle-marker-color-key-focus": { + "value": "var(--mod-dial-handle-marker-color-key-focus, var(--spectrum-dial-handle-marker-color-key-focus))", + "description": "Defined in `.spectrum-Dial`.
Used by `.spectrum-Dial-handle:focus-visible:after, .spectrum-Dial-handle:focus-within:after`, `.spectrum-Dial-handle.is-dragged:after, .spectrum-Dial-handle:active:after`.
Defaults to `var(--mod-dial-handle-marker-color-key-focus, var(--spectrum-dial-handle-marker-color-key-focus))`, if not set.", + "control": "color" + } + } } diff --git a/components/dial/stories/dial.stories.js b/components/dial/stories/dial.stories.js index 9e9970e234b..15a63effa16 100644 --- a/components/dial/stories/dial.stories.js +++ b/components/dial/stories/dial.stories.js @@ -1,10 +1,12 @@ import { disableDefaultModes } from "@spectrum-css/preview/modes"; import { isDisabled, isDragged, isFocused, size } from "@spectrum-css/preview/types"; -import metadata from "../dist/metadata.json"; -import packageJson from "../package.json"; import { DialGroup } from "./dial.test.js"; import { Template } from "./template.js"; +// Local assets to render the component styles and structure +import metadata from "../dist/metadata.json"; +import packageJson from "../package.json"; + /** * A dial is an input control used for selecting a value within a range, similar to a slider. It's often used in audio and video mixing and editing applications, where horizontal space is limited. */ @@ -35,6 +37,7 @@ export default { parameters: { packageJson, metadata, + cssprops: metadata.modifiers, }, }; diff --git a/components/dialog/dist/metadata.json b/components/dialog/dist/metadata.json index 812542da227..2eae5739687 100644 --- a/components/dialog/dist/metadata.json +++ b/components/dialog/dist/metadata.json @@ -27,8 +27,8 @@ ".spectrum-Dialog-closeButton", ".spectrum-Dialog-content", ".spectrum-Dialog-footer", - ".spectrum-Dialog-footer > *", ".spectrum-Dialog-footer > .spectrum-Button + .spectrum-Button", + ".spectrum-Dialog-footer > *", ".spectrum-Dialog-header", ".spectrum-Dialog-heading", ".spectrum-Dialog-heading.spectrum-Dialog-heading--noHeader", @@ -37,65 +37,307 @@ ".spectrum-Dialog.spectrum-Dialog--dismissable .spectrum-Dialog-grid .spectrum-Dialog-buttonGroup", ".spectrum-Dialog.spectrum-Dialog--dismissable .spectrum-Dialog-grid .spectrum-Dialog-footer" ], - "modifiers": [ - "--mod-dialog-confirm-border-radius", - "--mod-dialog-confirm-buttongroup-padding-top", - "--mod-dialog-confirm-close-button-padding", - "--mod-dialog-confirm-close-button-size", - "--mod-dialog-confirm-description-font-weight", - "--mod-dialog-confirm-description-margin", - "--mod-dialog-confirm-description-padding", - "--mod-dialog-confirm-description-text-color", - "--mod-dialog-confirm-description-text-line-height", - "--mod-dialog-confirm-description-text-size", - "--mod-dialog-confirm-divider-block-spacing-end", - "--mod-dialog-confirm-divider-block-spacing-start", - "--mod-dialog-confirm-divider-height", - "--mod-dialog-confirm-footer-padding-top", - "--mod-dialog-confirm-gap-size", - "--mod-dialog-confirm-hero-height", - "--mod-dialog-confirm-large-width", - "--mod-dialog-confirm-medium-width", - "--mod-dialog-confirm-padding-grid", - "--mod-dialog-confirm-small-width", - "--mod-dialog-confirm-title-text-color", - "--mod-dialog-confirm-title-text-line-height", - "--mod-dialog-confirm-title-text-size", - "--mod-dialog-fullscreen-header-text-size", - "--mod-dialog-heading-font-weight", - "--mod-dialog-min-inline-size", - "--mod-dialog-width" - ], - "component": [ - "--spectrum-dialog-confirm-border-radius", - "--spectrum-dialog-confirm-buttongroup-padding-top", - "--spectrum-dialog-confirm-close-button-padding", - "--spectrum-dialog-confirm-close-button-size", - "--spectrum-dialog-confirm-description-padding", - "--spectrum-dialog-confirm-description-text-color", - "--spectrum-dialog-confirm-description-text-size", - "--spectrum-dialog-confirm-divider-block-spacing-end", - "--spectrum-dialog-confirm-divider-block-spacing-start", - "--spectrum-dialog-confirm-gap-size", - "--spectrum-dialog-confirm-hero-height", - "--spectrum-dialog-confirm-padding-grid", - "--spectrum-dialog-confirm-title-text-size" - ], - "global": [ - "--spectrum-component-bottom-to-text-300", - "--spectrum-component-height-100", - "--spectrum-component-pill-edge-to-text-100", - "--spectrum-gray-800", - "--spectrum-gray-900", - "--spectrum-heading-sans-serif-font-weight", - "--spectrum-line-height-100", - "--spectrum-regular-font-weight", - "--spectrum-spacing-200", - "--spectrum-spacing-300", - "--spectrum-spacing-50", - "--spectrum-spacing-600" - ], - "system-theme": [], - "passthroughs": [], - "high-contrast": [] + "modifiers": { + "mod-dialog-width": { + "value": "var(--mod-dialog-confirm-medium-width, 480px)", + "description": "Defined in `.spectrum-Dialog--sizeS`, `.spectrum-Dialog--sizeL`.
Used by `.spectrum-Dialog`.
Defaults to `var(--mod-dialog-confirm-medium-width, 480px)`, if not set.", + "control": "text", + "category": "Modifier" + }, + "mod-dialog-confirm-medium-width": { + "description": "Used by `.spectrum-Dialog`.", + "control": "text", + "category": "Modifier" + }, + "mod-dialog-min-inline-size": { + "description": "Used by `.spectrum-Dialog`.", + "control": "text", + "category": "Modifier" + }, + "mod-dialog-confirm-small-width": { + "description": "Used by `--mod-dialog-width`.", + "control": "text", + "category": "Modifier" + }, + "mod-dialog-confirm-large-width": { + "description": "Used by `--mod-dialog-width`.", + "control": "text", + "category": "Modifier" + }, + "mod-dialog-confirm-hero-height": { + "value": "var(--spectrum-dialog-confirm-hero-height)", + "description": "Used by `.spectrum-Dialog-hero`.
Defaults to `var(--spectrum-dialog-confirm-hero-height)`, if not set.", + "control": "text", + "category": "Modifier" + }, + "mod-dialog-confirm-border-radius": { + "value": "var(--spectrum-dialog-confirm-border-radius)", + "description": "Used by `.spectrum-Dialog-hero`.
Defaults to `var(--spectrum-dialog-confirm-border-radius)`, if not set.", + "control": "text", + "category": "Modifier" + }, + "mod-dialog-confirm-padding-grid": { + "value": "var(--spectrum-dialog-confirm-padding-grid)", + "description": "Used by `.spectrum-Dialog .spectrum-Dialog-grid`, `.spectrum-Dialog.spectrum-Dialog--dismissable .spectrum-Dialog-grid`, `.spectrum-Dialog--fullscreen.spectrum-Dialog .spectrum-Dialog-grid, .spectrum-Dialog--fullscreenTakeover.spectrum-Dialog .spectrum-Dialog-grid`, `.spectrum-Dialog .spectrum-Dialog-grid, .spectrum-Dialog.spectrum-Dialog--dismissable .spectrum-Dialog-grid`, `.spectrum-Dialog--fullscreen.spectrum-Dialog .spectrum-Dialog-grid, .spectrum-Dialog--fullscreenTakeover.spectrum-Dialog .spectrum-Dialog-grid`.
Defaults to `var(--spectrum-dialog-confirm-padding-grid)`, if not set.", + "control": "text", + "category": "Modifier" + }, + "mod-dialog-confirm-title-text-size": { + "value": "var(--spectrum-dialog-confirm-title-text-size)", + "description": "Used by `.spectrum-Dialog-heading`, `.spectrum-Dialog--fullscreen .spectrum-Dialog-heading, .spectrum-Dialog--fullscreenTakeover .spectrum-Dialog-heading`.
Defaults to `var(--spectrum-dialog-confirm-title-text-size)`, if not set.", + "control": "text", + "category": "Modifier" + }, + "mod-dialog-heading-font-weight": { + "value": "700", + "description": "Used by `.spectrum-Dialog-heading`.
Defaults to `var(--spectrum-heading-sans-serif-font-weight)`, if not set.", + "control": "text", + "category": "Modifier" + }, + "mod-dialog-confirm-title-text-line-height": { + "value": "1.3", + "description": "Used by `.spectrum-Dialog-heading`.
Defaults to `var(--spectrum-line-height-100)`, if not set.", + "control": "text", + "category": "Modifier" + }, + "mod-dialog-confirm-title-text-color": { + "value": "light-dark(rgb(19, 19, 19), rgb(242, 242, 242))", + "description": "Used by `.spectrum-Dialog-heading`.
Defaults to `var(--spectrum-gray-900)`, if not set.", + "control": "color", + "category": "Modifier" + }, + "mod-dialog-confirm-gap-size": { + "value": "var(--spectrum-dialog-confirm-gap-size)", + "description": "Used by `.spectrum-Dialog-heading`, `.spectrum-Dialog-buttonGroup`.
Defaults to `var(--spectrum-dialog-confirm-gap-size)`, if not set.", + "control": "text", + "category": "Modifier" + }, + "mod-dialog-confirm-divider-block-spacing-end": { + "value": "var(--spectrum-dialog-confirm-divider-block-spacing-end)", + "description": "Used by `.spectrum-Dialog .spectrum-Dialog-divider`, `.spectrum-Dialog--noDivider .spectrum-Dialog-heading`.
Defaults to `var(--spectrum-dialog-confirm-divider-block-spacing-end)`, if not set.", + "control": "text", + "category": "Modifier" + }, + "mod-dialog-confirm-divider-block-spacing-start": { + "value": "var(--spectrum-dialog-confirm-divider-block-spacing-start)", + "description": "Used by `.spectrum-Dialog .spectrum-Dialog-divider`, `.spectrum-Dialog--fullscreen .spectrum-Dialog-heading + .spectrum-Dialog-divider`, `.spectrum-Dialog--noDivider .spectrum-Dialog-heading`.
Defaults to `var(--spectrum-dialog-confirm-divider-block-spacing-start)`, if not set.", + "control": "text", + "category": "Modifier" + }, + "mod-dialog-confirm-description-padding": { + "value": "var(--spectrum-dialog-confirm-description-padding)", + "description": "Used by `.spectrum-Dialog--fullscreen .spectrum-Dialog-heading + .spectrum-Dialog-divider`, `.spectrum-Dialog-content`.
Defaults to `var(--spectrum-dialog-confirm-description-padding)`, if not set.", + "control": "text", + "category": "Modifier" + }, + "mod-dialog-confirm-divider-height": { + "value": "2px", + "description": "Used by `.spectrum-Dialog--noDivider .spectrum-Dialog-heading`.
Defaults to `var(--spectrum-spacing-50)`, if not set.", + "control": "text", + "category": "Modifier" + }, + "mod-dialog-confirm-description-text-size": { + "value": "var(--spectrum-dialog-confirm-description-text-size)", + "description": "Used by `.spectrum-Dialog-content`.
Defaults to `var(--spectrum-dialog-confirm-description-text-size)`, if not set.", + "control": "text", + "category": "Modifier" + }, + "mod-dialog-confirm-description-font-weight": { + "value": "400", + "description": "Used by `.spectrum-Dialog-content`.
Defaults to `var(--spectrum-regular-font-weight)`, if not set.", + "control": "text", + "category": "Modifier" + }, + "mod-dialog-confirm-description-text-line-height": { + "value": "1.3", + "description": "Used by `.spectrum-Dialog-content`.
Defaults to `var(--spectrum-line-height-100)`, if not set.", + "control": "text", + "category": "Modifier" + }, + "mod-dialog-confirm-description-text-color": { + "value": "var(--spectrum-dialog-confirm-description-text-color)", + "description": "Used by `.spectrum-Dialog-content`, `.spectrum-Dialog.spectrum-Dialog--dismissable .spectrum-Dialog-grid .spectrum-Dialog-footer`.
Defaults to `var(--spectrum-dialog-confirm-description-text-color)`, if not set.", + "control": "color", + "category": "Modifier" + }, + "mod-dialog-confirm-description-margin": { + "value": "calc(var(--spectrum-spacing-50) * -1)", + "description": "Used by `.spectrum-Dialog-content`.
Defaults to `calc(var(--spectrum-spacing-50) * -1)`, if not set.", + "control": "text", + "category": "Modifier" + }, + "mod-dialog-confirm-footer-padding-top": { + "value": "40px", + "description": "Used by `.spectrum-Dialog-footer`.
Defaults to `var(--spectrum-spacing-600)`, if not set.", + "control": "text", + "category": "Modifier" + }, + "mod-dialog-confirm-buttongroup-padding-top": { + "value": "var(--spectrum-dialog-confirm-buttongroup-padding-top)", + "description": "Used by `.spectrum-Dialog-buttonGroup`, `.spectrum-Dialog--fullscreen .spectrum-Dialog-buttonGroup, .spectrum-Dialog--fullscreenTakeover .spectrum-Dialog-buttonGroup`.
Defaults to `var(--spectrum-dialog-confirm-buttongroup-padding-top)`, if not set.", + "control": "text", + "category": "Modifier" + }, + "mod-dialog-confirm-close-button-size": { + "value": "var(--spectrum-dialog-confirm-close-button-size)", + "description": "Used by `.spectrum-Dialog.spectrum-Dialog--dismissable .spectrum-Dialog-grid`.
Defaults to `var(--spectrum-dialog-confirm-close-button-size)`, if not set.", + "control": "text", + "category": "Modifier" + }, + "mod-dialog-confirm-close-button-padding": { + "value": "var(--spectrum-dialog-confirm-close-button-padding)", + "description": "Used by `.spectrum-Dialog-closeButton`.
Defaults to `var(--spectrum-dialog-confirm-close-button-padding)`, if not set.", + "control": "text", + "category": "Modifier" + }, + "mod-dialog-fullscreen-header-text-size": { + "description": "Used by `.spectrum-Dialog--fullscreen .spectrum-Dialog-heading, .spectrum-Dialog--fullscreenTakeover .spectrum-Dialog-heading`.", + "control": "text", + "category": "Modifier" + } + }, + "component": { + "spectrum-dialog-confirm-divider-block-spacing-start": { + "description": "Defined in `.spectrum-Dialog`.
Used by `.spectrum-Dialog .spectrum-Dialog-divider`, `.spectrum-Dialog--fullscreen .spectrum-Dialog-heading + .spectrum-Dialog-divider`, `.spectrum-Dialog--noDivider .spectrum-Dialog-heading`.", + "control": "text", + "category": "Component" + }, + "spectrum-dialog-confirm-divider-block-spacing-end": { + "description": "Defined in `.spectrum-Dialog`.
Used by `.spectrum-Dialog .spectrum-Dialog-divider`, `.spectrum-Dialog--noDivider .spectrum-Dialog-heading`.", + "control": "text", + "category": "Component" + }, + "spectrum-dialog-confirm-description-text-color": { + "description": "Defined in `.spectrum-Dialog`.
Used by `.spectrum-Dialog-content`, `.spectrum-Dialog.spectrum-Dialog--dismissable .spectrum-Dialog-grid .spectrum-Dialog-footer`.", + "control": "color", + "category": "Component" + }, + "spectrum-dialog-confirm-description-padding": { + "description": "Defined in `.spectrum-Dialog`.
Used by `.spectrum-Dialog--fullscreen .spectrum-Dialog-heading + .spectrum-Dialog-divider`, `.spectrum-Dialog-content`.", + "control": "text", + "category": "Component" + }, + "spectrum-dialog-confirm-gap-size": { + "description": "Defined in `.spectrum-Dialog`.
Used by `.spectrum-Dialog-heading`, `.spectrum-Dialog-buttonGroup`.", + "control": "text", + "category": "Component" + }, + "spectrum-dialog-confirm-buttongroup-padding-top": { + "description": "Defined in `.spectrum-Dialog`.
Used by `.spectrum-Dialog-buttonGroup`, `.spectrum-Dialog--fullscreen .spectrum-Dialog-buttonGroup, .spectrum-Dialog--fullscreenTakeover .spectrum-Dialog-buttonGroup`.", + "control": "text", + "category": "Component" + }, + "spectrum-dialog-confirm-close-button-size": { + "description": "Defined in `.spectrum-Dialog`.
Used by `.spectrum-Dialog.spectrum-Dialog--dismissable .spectrum-Dialog-grid`.", + "control": "text", + "category": "Component" + }, + "spectrum-dialog-confirm-close-button-padding": { + "description": "Defined in `.spectrum-Dialog`.
Used by `.spectrum-Dialog-closeButton`.", + "control": "text", + "category": "Component" + }, + "spectrum-dialog-confirm-hero-height": { + "description": "Used by `.spectrum-Dialog-hero`.", + "control": "text", + "category": "Component" + }, + "spectrum-dialog-confirm-border-radius": { + "description": "Used by `.spectrum-Dialog-hero`.", + "control": "text", + "category": "Component" + }, + "spectrum-dialog-confirm-padding-grid": { + "description": "Used by `.spectrum-Dialog .spectrum-Dialog-grid`, `.spectrum-Dialog.spectrum-Dialog--dismissable .spectrum-Dialog-grid`, `.spectrum-Dialog--fullscreen.spectrum-Dialog .spectrum-Dialog-grid, .spectrum-Dialog--fullscreenTakeover.spectrum-Dialog .spectrum-Dialog-grid`, `.spectrum-Dialog .spectrum-Dialog-grid, .spectrum-Dialog.spectrum-Dialog--dismissable .spectrum-Dialog-grid`, `.spectrum-Dialog--fullscreen.spectrum-Dialog .spectrum-Dialog-grid, .spectrum-Dialog--fullscreenTakeover.spectrum-Dialog .spectrum-Dialog-grid`.", + "control": "text", + "category": "Component" + }, + "spectrum-dialog-confirm-title-text-size": { + "description": "Used by `.spectrum-Dialog-heading`, `.spectrum-Dialog--fullscreen .spectrum-Dialog-heading, .spectrum-Dialog--fullscreenTakeover .spectrum-Dialog-heading`.", + "control": "text", + "category": "Component" + }, + "spectrum-dialog-confirm-description-text-size": { + "description": "Used by `.spectrum-Dialog-content`.", + "control": "text", + "category": "Component" + } + }, + "global": { + "spectrum-spacing-300": { + "value": "16px", + "description": "Used by `--spectrum-dialog-confirm-divider-block-spacing-start`.", + "control": "text", + "category": "Global" + }, + "spectrum-spacing-200": { + "value": "12px", + "description": "Used by `--spectrum-dialog-confirm-divider-block-spacing-end`.", + "control": "text", + "category": "Global" + }, + "spectrum-gray-800": { + "value": "light-dark(rgb(41, 41, 41), rgb(219, 219, 219))", + "description": "Used by `--spectrum-dialog-confirm-description-text-color`.", + "control": "text", + "category": "Global" + }, + "spectrum-spacing-50": { + "value": "2px", + "description": "Used by `--spectrum-dialog-confirm-description-padding`, `.spectrum-Dialog--noDivider .spectrum-Dialog-heading`, `.spectrum-Dialog-content`.", + "control": "text", + "category": "Global" + }, + "spectrum-component-pill-edge-to-text-100": { + "value": "16px", + "description": "Used by `--spectrum-dialog-confirm-gap-size`.", + "control": "text", + "category": "Global" + }, + "spectrum-spacing-600": { + "value": "40px", + "description": "Used by `--spectrum-dialog-confirm-buttongroup-padding-top`, `.spectrum-Dialog-footer`.", + "control": "text", + "category": "Global" + }, + "spectrum-component-height-100": { + "value": "32px", + "description": "Used by `--spectrum-dialog-confirm-close-button-size`.", + "control": "text", + "category": "Global" + }, + "spectrum-component-bottom-to-text-300": { + "value": "14px", + "description": "Used by `--spectrum-dialog-confirm-close-button-padding`.", + "control": "text", + "category": "Global" + }, + "spectrum-heading-sans-serif-font-weight": { + "value": "700", + "description": "Used by `.spectrum-Dialog-heading`.", + "control": "text", + "category": "Global" + }, + "spectrum-line-height-100": { + "value": "1.3", + "description": "Used by `.spectrum-Dialog-heading`, `.spectrum-Dialog-content`.", + "control": "text", + "category": "Global" + }, + "spectrum-gray-900": { + "value": "light-dark(rgb(19, 19, 19), rgb(242, 242, 242))", + "description": "Used by `.spectrum-Dialog-heading`.", + "control": "text", + "category": "Global" + }, + "spectrum-regular-font-weight": { + "value": "400", + "description": "Used by `.spectrum-Dialog-content`.", + "control": "text", + "category": "Global" + } + }, + "system-theme": {}, + "passthroughs": {}, + "high-contrast": {} } diff --git a/components/dialog/stories/dialog.stories.js b/components/dialog/stories/dialog.stories.js index 45bec9bc1d1..b9970f5c41c 100644 --- a/components/dialog/stories/dialog.stories.js +++ b/components/dialog/stories/dialog.stories.js @@ -2,11 +2,13 @@ import { withUnderlayWrapper } from "@spectrum-css/preview/decorators"; import { disableDefaultModes } from "@spectrum-css/preview/modes"; import { isOpen, size } from "@spectrum-css/preview/types"; import { Template as Typography } from "@spectrum-css/typography/stories/template.js"; -import metadata from "../dist/metadata.json"; -import packageJson from "../package.json"; import { DialogFullscreen, DialogFullscreenTakeover, DialogGroup } from "./dialog.test.js"; import { Template } from "./template.js"; +// Local assets to render the component styles and structure +import metadata from "../dist/metadata.json"; +import packageJson from "../package.json"; + /** * A dialog displays important information that users need to acknowledge. They appear over the interface and block further interactions. * @@ -117,6 +119,7 @@ export default { }, packageJson, metadata, + cssprops: metadata.modifiers, }, decorators: [ withUnderlayWrapper, diff --git a/components/divider/dist/metadata.json b/components/divider/dist/metadata.json index a485bf25e3b..a053dd3f399 100644 --- a/components/divider/dist/metadata.json +++ b/components/divider/dist/metadata.json @@ -12,41 +12,169 @@ ".spectrum-Divider--staticWhite.spectrum-Divider--sizeS", ".spectrum-Divider--vertical" ], - "modifiers": [ - "--mod-divider-background-color", - "--mod-divider-background-color-large-static-black", - "--mod-divider-background-color-large-static-white", - "--mod-divider-background-color-medium-static-black", - "--mod-divider-background-color-medium-static-white", - "--mod-divider-background-color-small-static-black", - "--mod-divider-background-color-small-static-white", - "--mod-divider-thickness", - "--mod-divider-vertical-align", - "--mod-divider-vertical-height", - "--mod-divider-vertical-margin" - ], - "component": [ - "--spectrum-divider-background-color", - "--spectrum-divider-background-color-static-black", - "--spectrum-divider-background-color-static-white", - "--spectrum-divider-thickness", - "--spectrum-divider-thickness-large", - "--spectrum-divider-thickness-medium", - "--spectrum-divider-thickness-small" - ], - "global": [ - "--spectrum-gray-200", - "--spectrum-gray-800", - "--spectrum-transparent-black-200", - "--spectrum-transparent-black-800", - "--spectrum-transparent-white-200", - "--spectrum-transparent-white-800" - ], - "system-theme": [ - "--system-divider-background-color", - "--system-divider-background-color-static-black", - "--system-divider-background-color-static-white" - ], - "passthroughs": [], - "high-contrast": ["--highcontrast-divider-background-color"] + "modifiers": { + "mod-divider-background-color": { + "value": "var(--spectrum-divider-background-color)", + "description": "Defined in `.spectrum-Divider--staticWhite`, `.spectrum-Divider--staticWhite.spectrum-Divider--sizeS`, `.spectrum-Divider--staticWhite.spectrum-Divider--sizeL`, `.spectrum-Divider--staticBlack`, `.spectrum-Divider--staticBlack.spectrum-Divider--sizeS`, `.spectrum-Divider--staticBlack.spectrum-Divider--sizeL`.
Used by `.spectrum-Divider`.
Defaults to `var(--spectrum-divider-background-color)`, if not set.", + "control": "color", + "category": "Modifier" + }, + "mod-divider-background-color-medium-static-white": { + "value": "var(--spectrum-divider-background-color-static-white)", + "description": "Used by `--mod-divider-background-color`.
Defaults to `var(--spectrum-divider-background-color-static-white)`, if not set.", + "control": "color", + "category": "Modifier" + }, + "mod-divider-background-color-small-static-white": { + "value": "var(--spectrum-divider-background-color-static-white)", + "description": "Used by `--mod-divider-background-color`.
Defaults to `var(--spectrum-divider-background-color-static-white)`, if not set.", + "control": "color", + "category": "Modifier" + }, + "mod-divider-background-color-large-static-white": { + "value": "light-dark(rgba(255, 255, 255, 0.85), rgba(255, 255, 255, 0.85))", + "description": "Used by `--mod-divider-background-color`.
Defaults to `var(--spectrum-transparent-white-800)`, if not set.", + "control": "color", + "category": "Modifier" + }, + "mod-divider-background-color-medium-static-black": { + "value": "var(--spectrum-divider-background-color-static-black)", + "description": "Used by `--mod-divider-background-color`.
Defaults to `var(--spectrum-divider-background-color-static-black)`, if not set.", + "control": "color", + "category": "Modifier" + }, + "mod-divider-background-color-small-static-black": { + "value": "var(--spectrum-divider-background-color-static-black)", + "description": "Used by `--mod-divider-background-color`.
Defaults to `var(--spectrum-divider-background-color-static-black)`, if not set.", + "control": "color", + "category": "Modifier" + }, + "mod-divider-background-color-large-static-black": { + "value": "light-dark(rgba(0, 0, 0, 0.84), rgba(0, 0, 0, 0.84))", + "description": "Used by `--mod-divider-background-color`.
Defaults to `var(--spectrum-transparent-black-800)`, if not set.", + "control": "color", + "category": "Modifier" + }, + "mod-divider-thickness": { + "value": "var(--spectrum-divider-thickness)", + "description": "Used by `.spectrum-Divider`, `.spectrum-Divider--vertical`.
Defaults to `var(--spectrum-divider-thickness)`, if not set.", + "control": "text", + "category": "Modifier" + }, + "mod-divider-vertical-height": { + "description": "Used by `.spectrum-Divider--vertical`.", + "control": "text", + "category": "Modifier" + }, + "mod-divider-vertical-margin": { + "description": "Used by `.spectrum-Divider--vertical`.", + "control": "text", + "category": "Modifier" + }, + "mod-divider-vertical-align": { + "description": "Used by `.spectrum-Divider--vertical`.", + "control": "text", + "category": "Modifier" + } + }, + "component": { + "spectrum-divider-thickness": { + "description": "Defined in `.spectrum-Divider`, `.spectrum-Divider--sizeS`, `.spectrum-Divider--sizeL`.
Used by `.spectrum-Divider`, `.spectrum-Divider--vertical`.", + "control": "text", + "category": "Component" + }, + "spectrum-divider-thickness-medium": { + "value": "2px", + "description": "Used by `--spectrum-divider-thickness`.", + "control": "text", + "category": "Component" + }, + "spectrum-divider-thickness-small": { + "value": "1px", + "description": "Used by `--spectrum-divider-thickness`.", + "control": "text", + "category": "Component" + }, + "spectrum-divider-thickness-large": { + "value": "4px", + "description": "Used by `--spectrum-divider-thickness`.", + "control": "text", + "category": "Component" + }, + "spectrum-divider-background-color": { + "description": "Defined in `.spectrum-Divider--sizeL`, `.spectrum-Divider`.
Used by `.spectrum-Divider`.", + "control": "color", + "category": "Component" + }, + "spectrum-divider-background-color-static-white": { + "description": "Defined in `.spectrum-Divider`.
Used by `--mod-divider-background-color`.", + "control": "color", + "category": "Component" + }, + "spectrum-divider-background-color-static-black": { + "description": "Defined in `.spectrum-Divider`.
Used by `--mod-divider-background-color`.", + "control": "color", + "category": "Component" + } + }, + "global": { + "spectrum-gray-200": { + "value": "light-dark(rgb(225, 225, 225), rgb(50, 50, 50))", + "description": "Used by `--system-divider-background-color`.", + "control": "text", + "category": "Global" + }, + "spectrum-transparent-white-200": { + "value": "light-dark(rgba(255, 255, 255, 0.14), rgba(255, 255, 255, 0.14))", + "description": "Used by `--system-divider-background-color-static-white`.", + "control": "text", + "category": "Global" + }, + "spectrum-transparent-black-200": { + "value": "light-dark(rgba(0, 0, 0, 0.12), rgba(0, 0, 0, 0.12))", + "description": "Used by `--system-divider-background-color-static-black`.", + "control": "text", + "category": "Global" + }, + "spectrum-gray-800": { + "value": "light-dark(rgb(41, 41, 41), rgb(219, 219, 219))", + "description": "Used by `--spectrum-divider-background-color`.", + "control": "text", + "category": "Global" + }, + "spectrum-transparent-white-800": { + "value": "light-dark(rgba(255, 255, 255, 0.85), rgba(255, 255, 255, 0.85))", + "description": "Used by `--mod-divider-background-color`.", + "control": "text", + "category": "Global" + }, + "spectrum-transparent-black-800": { + "value": "light-dark(rgba(0, 0, 0, 0.84), rgba(0, 0, 0, 0.84))", + "description": "Used by `--mod-divider-background-color`.", + "control": "text", + "category": "Global" + } + }, + "system-theme": { + "system-divider-background-color": { + "description": "Defined in `.spectrum`.
Used by `--spectrum-divider-background-color`.", + "control": "color" + }, + "system-divider-background-color-static-white": { + "description": "Defined in `.spectrum`.
Used by `--spectrum-divider-background-color-static-white`.", + "control": "color" + }, + "system-divider-background-color-static-black": { + "description": "Defined in `.spectrum`.
Used by `--spectrum-divider-background-color-static-black`.", + "control": "color" + } + }, + "passthroughs": {}, + "high-contrast": { + "highcontrast-divider-background-color": { + "value": "var(--mod-divider-background-color, var(--spectrum-divider-background-color))", + "description": "Defined in `.spectrum-Divider`.
Used by `.spectrum-Divider`.
Defaults to `var(--mod-divider-background-color, var(--spectrum-divider-background-color))`, if not set.", + "control": "color" + } + } } diff --git a/components/divider/stories/divider.stories.js b/components/divider/stories/divider.stories.js index 306e5c0c453..ac273f3e142 100644 --- a/components/divider/stories/divider.stories.js +++ b/components/divider/stories/divider.stories.js @@ -1,11 +1,13 @@ import { Sizes } from "@spectrum-css/preview/decorators"; import { disableDefaultModes } from "@spectrum-css/preview/modes"; import { size, staticColor } from "@spectrum-css/preview/types"; -import metadata from "../dist/metadata.json"; -import packageJson from "../package.json"; import { DividerGroup } from "./divider.test.js"; import { Template } from "./template.js"; +// Local assets to render the component styles and structure +import metadata from "../dist/metadata.json"; +import packageJson from "../package.json"; + /** * Dividers bring clarity to a layout by grouping and dividing content that exists in close proximity. It can also be used to establish rhythm and hierarchy. */ @@ -40,6 +42,7 @@ export default { }, packageJson, metadata, + cssprops: metadata.modifiers, }, }; diff --git a/components/dropindicator/dist/metadata.json b/components/dropindicator/dist/metadata.json index dd3a7a50810..95bc763de81 100644 --- a/components/dropindicator/dist/metadata.json +++ b/components/dropindicator/dist/metadata.json @@ -11,19 +11,64 @@ ".spectrum-DropIndicator:after", ".spectrum-DropIndicator:before" ], - "modifiers": [ - "--mod-dropindicator-border-color", - "--mod-dropindicator-border-size", - "--mod-dropindicator-circle-color", - "--mod-dropindicator-circle-size" - ], - "component": [ - "--spectrum-dropindicator-border-size", - "--spectrum-dropindicator-circle-size", - "--spectrum-dropindicator-color" - ], - "global": ["--spectrum-border-width-200"], - "system-theme": [], - "passthroughs": [], - "high-contrast": ["--highcontrast-dropindicator-color"] + "modifiers": { + "mod-dropindicator-border-color": { + "value": "var(--spectrum-dropindicator-color)", + "description": "Used by `.spectrum-DropIndicator`.
Defaults to `var(--spectrum-dropindicator-color)`, if not set.", + "control": "color", + "category": "Modifier" + }, + "mod-dropindicator-circle-size": { + "value": "var(--spectrum-dropindicator-circle-size)", + "description": "Used by `.spectrum-DropIndicator:after, .spectrum-DropIndicator:before`, `.spectrum-DropIndicator--horizontal`, `.spectrum-DropIndicator--horizontal:after, .spectrum-DropIndicator--horizontal:before`, `.spectrum-DropIndicator--horizontal:before`, `.spectrum-DropIndicator--horizontal:after`, `.spectrum-DropIndicator--vertical`, `.spectrum-DropIndicator--vertical:after, .spectrum-DropIndicator--vertical:before`, `.spectrum-DropIndicator--vertical:before`, `.spectrum-DropIndicator--vertical:after`.
Defaults to `var(--spectrum-dropindicator-circle-size)`, if not set.", + "control": "text", + "category": "Modifier" + }, + "mod-dropindicator-border-size": { + "value": "var(--spectrum-dropindicator-border-size)", + "description": "Used by `.spectrum-DropIndicator:after, .spectrum-DropIndicator:before`, `.spectrum-DropIndicator--horizontal`, `.spectrum-DropIndicator--horizontal:after, .spectrum-DropIndicator--horizontal:before`, `.spectrum-DropIndicator--vertical`, `.spectrum-DropIndicator--vertical:after, .spectrum-DropIndicator--vertical:before`.
Defaults to `var(--spectrum-dropindicator-border-size)`, if not set.", + "control": "text", + "category": "Modifier" + }, + "mod-dropindicator-circle-color": { + "value": "var(--spectrum-dropindicator-color)", + "description": "Used by `.spectrum-DropIndicator:after, .spectrum-DropIndicator:before`.
Defaults to `var(--spectrum-dropindicator-color)`, if not set.", + "control": "color", + "category": "Modifier" + } + }, + "component": { + "spectrum-dropindicator-border-size": { + "description": "Defined in `.spectrum-DropIndicator`.
Used by `.spectrum-DropIndicator:after, .spectrum-DropIndicator:before`, `.spectrum-DropIndicator--horizontal`, `.spectrum-DropIndicator--horizontal:after, .spectrum-DropIndicator--horizontal:before`, `.spectrum-DropIndicator--vertical`, `.spectrum-DropIndicator--vertical:after, .spectrum-DropIndicator--vertical:before`.", + "control": "text", + "category": "Component" + }, + "spectrum-dropindicator-circle-size": { + "description": "Defined in `.spectrum-DropIndicator`.
Used by `.spectrum-DropIndicator:after, .spectrum-DropIndicator:before`, `.spectrum-DropIndicator--horizontal`, `.spectrum-DropIndicator--horizontal:after, .spectrum-DropIndicator--horizontal:before`, `.spectrum-DropIndicator--horizontal:before`, `.spectrum-DropIndicator--horizontal:after`, `.spectrum-DropIndicator--vertical`, `.spectrum-DropIndicator--vertical:after, .spectrum-DropIndicator--vertical:before`, `.spectrum-DropIndicator--vertical:before`, `.spectrum-DropIndicator--vertical:after`.", + "control": "text", + "category": "Component" + }, + "spectrum-dropindicator-color": { + "description": "Used by `.spectrum-DropIndicator`, `.spectrum-DropIndicator:after, .spectrum-DropIndicator:before`.", + "control": "color", + "category": "Component" + } + }, + "global": { + "spectrum-border-width-200": { + "value": "2px", + "description": "Used by `--spectrum-dropindicator-border-size`.", + "control": "text", + "category": "Global" + } + }, + "system-theme": {}, + "passthroughs": {}, + "high-contrast": { + "highcontrast-dropindicator-color": { + "value": "var(--mod-dropindicator-circle-color, var(--spectrum-dropindicator-color))", + "description": "Defined in `.spectrum-DropIndicator`.
Used by `.spectrum-DropIndicator`, `.spectrum-DropIndicator:after, .spectrum-DropIndicator:before`.
Defaults to `var(--mod-dropindicator-circle-color, var(--spectrum-dropindicator-color))`, if not set.", + "control": "color" + } + } } diff --git a/components/dropindicator/stories/dropindicator.stories.js b/components/dropindicator/stories/dropindicator.stories.js index ea28cb3b5f1..160f7a8d897 100644 --- a/components/dropindicator/stories/dropindicator.stories.js +++ b/components/dropindicator/stories/dropindicator.stories.js @@ -1,9 +1,11 @@ import { disableDefaultModes } from "@spectrum-css/preview/modes"; -import metadata from "../dist/metadata.json"; -import packageJson from "../package.json"; import { DropIndicatorGroup } from "./dropindicator.test.js"; import { DocsDropIndicatorGroup } from "./template.js"; +// Local assets to render the component styles and structure +import metadata from "../dist/metadata.json"; +import packageJson from "../package.json"; + /** * The drop indicator component is used to show the insertion position into a list or table. */ @@ -41,6 +43,7 @@ export default { parameters: { packageJson, metadata, + cssprops: metadata.modifiers, }, }; diff --git a/components/dropzone/dist/metadata.json b/components/dropzone/dist/metadata.json index 3044ecfc906..5949c543825 100644 --- a/components/dropzone/dist/metadata.json +++ b/components/dropzone/dist/metadata.json @@ -6,129 +6,580 @@ ".spectrum-DropZone-button:focus", ".spectrum-DropZone-button:hover", ".spectrum-DropZone-content", - ".spectrum-DropZone.is-dragged", - ".spectrum-DropZone.is-filled", - ".spectrum-DropZone.is-filled.is-dragged", ".spectrum-DropZone:focus-visible", ".spectrum-DropZone:lang(ja)", ".spectrum-DropZone:lang(ko)", - ".spectrum-DropZone:lang(zh)" - ], - "modifiers": [ - "--mod-drop-zone-background-color", - "--mod-drop-zone-background-color-opacity", - "--mod-drop-zone-background-color-opacity-filled", - "--mod-drop-zone-body-color", - "--mod-drop-zone-body-font-family", - "--mod-drop-zone-body-font-size", - "--mod-drop-zone-body-font-style", - "--mod-drop-zone-body-font-weight", - "--mod-drop-zone-body-line-height", - "--mod-drop-zone-border-color", - "--mod-drop-zone-border-color-hover", - "--mod-drop-zone-border-style", - "--mod-drop-zone-border-style-dragged", - "--mod-drop-zone-border-width", - "--mod-drop-zone-content-background-color", - "--mod-drop-zone-content-bottom-to-text", - "--mod-drop-zone-content-color", - "--mod-drop-zone-content-display", - "--mod-drop-zone-content-edge-to-text", - "--mod-drop-zone-content-font-family", - "--mod-drop-zone-content-font-size", - "--mod-drop-zone-content-font-style", - "--mod-drop-zone-content-font-weight", - "--mod-drop-zone-content-height", - "--mod-drop-zone-content-line-height", - "--mod-drop-zone-content-max-width", - "--mod-drop-zone-content-maximum-width", - "--mod-drop-zone-content-top-to-text", - "--mod-drop-zone-corner-radius", - "--mod-drop-zone-heading-color", - "--mod-drop-zone-heading-font-family", - "--mod-drop-zone-heading-font-size", - "--mod-drop-zone-heading-font-style", - "--mod-drop-zone-heading-font-weight", - "--mod-drop-zone-heading-line-height", - "--mod-drop-zone-heading-to-body", - "--mod-drop-zone-illustration-color", - "--mod-drop-zone-illustration-color-hover", - "--mod-drop-zone-illustration-to-heading", - "--mod-drop-zone-padding", - "--mod-drop-zone-width" - ], - "component": [ - "--spectrum-drop-zone-background-color", - "--spectrum-drop-zone-background-color-opacity", - "--spectrum-drop-zone-background-color-opacity-filled", - "--spectrum-drop-zone-background-color-rgb", - "--spectrum-drop-zone-body-size", - "--spectrum-drop-zone-border-color", - "--spectrum-drop-zone-border-color-hover", - "--spectrum-drop-zone-border-width", - "--spectrum-drop-zone-cjk-title-size", - "--spectrum-drop-zone-content-background-color", - "--spectrum-drop-zone-content-maximum-width", - "--spectrum-drop-zone-illustration-color", - "--spectrum-drop-zone-title-size", - "--spectrum-drop-zone-width" - ], - "global": [ - "--spectrum-accent-visual-color", - "--spectrum-body-color", - "--spectrum-body-line-height", - "--spectrum-body-sans-serif-font-style", - "--spectrum-body-sans-serif-font-weight", - "--spectrum-bold-font-weight", - "--spectrum-border-width-200", - "--spectrum-component-bottom-to-text-300", - "--spectrum-component-edge-to-text-300", - "--spectrum-component-height-300", - "--spectrum-component-top-to-text-300", - "--spectrum-corner-radius-100", - "--spectrum-default-font-style", - "--spectrum-font-size-300", - "--spectrum-gray-200", - "--spectrum-heading-color", - "--spectrum-heading-line-height", - "--spectrum-heading-sans-serif-font-style", - "--spectrum-heading-sans-serif-font-weight", - "--spectrum-line-height-100", - "--spectrum-neutral-visual-color", - "--spectrum-sans-font-family-stack", - "--spectrum-spacing-400", - "--spectrum-spacing-75", - "--spectrum-white" - ], - "system-theme": ["--system-drop-zone-border-color"], - "passthroughs": [ - "--mod-actionbutton-edge-to-text", - "--mod-actionbutton-font-size", - "--mod-actionbutton-label-color", - "--mod-illustrated-message-content-maximum-width", - "--mod-illustrated-message-description-color", - "--mod-illustrated-message-description-font-family", - "--mod-illustrated-message-description-font-size", - "--mod-illustrated-message-description-font-style", - "--mod-illustrated-message-description-font-weight", - "--mod-illustrated-message-description-line-height", - "--mod-illustrated-message-description-position", - "--mod-illustrated-message-description-z-index", - "--mod-illustrated-message-display", - "--mod-illustrated-message-heading-to-body", - "--mod-illustrated-message-heading-to-description", - "--mod-illustrated-message-illustration-color", - "--mod-illustrated-message-title-color", - "--mod-illustrated-message-title-font-family", - "--mod-illustrated-message-title-font-size", - "--mod-illustrated-message-title-font-style", - "--mod-illustrated-message-title-font-weight", - "--mod-illustrated-message-title-line-height", - "--mod-illustrated-message-title-to-heading" + ".spectrum-DropZone:lang(zh)", + ".spectrum-DropZone.is-dragged", + ".spectrum-DropZone.is-filled", + ".spectrum-DropZone.is-filled.is-dragged" ], - "high-contrast": [ - "--highcontrast-drop-zone-border-color-hover", - "--highcontrast-drop-zone-illustration-color", - "--highcontrast-illustrated-message-illustration-color" - ] + "modifiers": { + "mod-drop-zone-content-maximum-width": { + "value": "380px", + "description": "Used by `--mod-illustrated-message-content-maximum-width`.
Defaults to `var(--spectrum-drop-zone-content-maximum-width)`, if not set.", + "control": "text", + "category": "Modifier" + }, + "mod-drop-zone-illustration-color": { + "value": "var(--spectrum-drop-zone-illustration-color)", + "description": "Used by `--mod-illustrated-message-illustration-color`.
Defaults to `var(--spectrum-drop-zone-illustration-color)`, if not set.", + "control": "color", + "category": "Modifier" + }, + "mod-drop-zone-illustration-to-heading": { + "value": "24px", + "description": "Used by `--mod-illustrated-message-title-to-heading`.
Defaults to `var(--spectrum-spacing-400)`, if not set.", + "control": "text", + "category": "Modifier" + }, + "mod-drop-zone-heading-to-body": { + "value": "4px", + "description": "Used by `--mod-illustrated-message-heading-to-body`.
Defaults to `var(--spectrum-spacing-75)`, if not set.", + "control": "text", + "category": "Modifier" + }, + "mod-drop-zone-heading-font-family": { + "value": "var(--spectrum-sans-font-family-stack)", + "description": "Used by `--mod-illustrated-message-title-font-family`.
Defaults to `var(--spectrum-sans-font-family-stack)`, if not set.", + "control": "text", + "category": "Modifier" + }, + "mod-drop-zone-heading-font-weight": { + "value": "700", + "description": "Used by `--mod-illustrated-message-title-font-weight`.
Defaults to `var(--spectrum-heading-sans-serif-font-weight)`, if not set.", + "control": "text", + "category": "Modifier" + }, + "mod-drop-zone-heading-font-style": { + "value": "normal", + "description": "Used by `--mod-illustrated-message-title-font-style`.
Defaults to `var(--spectrum-heading-sans-serif-font-style)`, if not set.", + "control": "text", + "category": "Modifier" + }, + "mod-drop-zone-heading-font-size": { + "value": "var(--spectrum-heading-size-s)", + "description": "Used by `--mod-illustrated-message-title-font-size`.
Defaults to `var(--spectrum-drop-zone-title-size)`, if not set.", + "control": "text", + "category": "Modifier" + }, + "mod-drop-zone-heading-line-height": { + "value": "1.3", + "description": "Used by `--mod-illustrated-message-title-line-height`.
Defaults to `var(--spectrum-heading-line-height)`, if not set.", + "control": "text", + "category": "Modifier" + }, + "mod-drop-zone-heading-color": { + "value": "var(--spectrum-gray-900)", + "description": "Used by `--mod-illustrated-message-title-color`.
Defaults to `var(--spectrum-heading-color)`, if not set.", + "control": "color", + "category": "Modifier" + }, + "mod-drop-zone-body-font-family": { + "value": "var(--spectrum-sans-font-family-stack)", + "description": "Used by `--mod-illustrated-message-description-font-family`.
Defaults to `var(--spectrum-sans-font-family-stack)`, if not set.", + "control": "text", + "category": "Modifier" + }, + "mod-drop-zone-body-font-weight": { + "value": "400", + "description": "Used by `--mod-illustrated-message-description-font-weight`.
Defaults to `var(--spectrum-body-sans-serif-font-weight)`, if not set.", + "control": "text", + "category": "Modifier" + }, + "mod-drop-zone-body-font-style": { + "value": "normal", + "description": "Used by `--mod-illustrated-message-description-font-style`.
Defaults to `var(--spectrum-body-sans-serif-font-style)`, if not set.", + "control": "text", + "category": "Modifier" + }, + "mod-drop-zone-body-font-size": { + "value": "var(--spectrum-body-size-xs)", + "description": "Used by `--mod-illustrated-message-description-font-size`.
Defaults to `var(--spectrum-drop-zone-body-size)`, if not set.", + "control": "text", + "category": "Modifier" + }, + "mod-drop-zone-body-line-height": { + "value": "1.5", + "description": "Used by `--mod-illustrated-message-description-line-height`.
Defaults to `var(--spectrum-body-line-height)`, if not set.", + "control": "text", + "category": "Modifier" + }, + "mod-drop-zone-body-color": { + "value": "var(--spectrum-gray-800)", + "description": "Used by `--mod-illustrated-message-description-color`.
Defaults to `var(--spectrum-body-color)`, if not set.", + "control": "color", + "category": "Modifier" + }, + "mod-drop-zone-content-font-size": { + "value": "18px", + "description": "Used by `--mod-actionbutton-font-size`.
Defaults to `var(--spectrum-font-size-300)`, if not set.", + "control": "text", + "category": "Modifier" + }, + "mod-drop-zone-content-color": { + "value": "light-dark(rgb(255, 255, 255), rgb(255, 255, 255))", + "description": "Used by `--mod-actionbutton-label-color`.
Defaults to `var(--spectrum-white)`, if not set.", + "control": "color", + "category": "Modifier" + }, + "mod-drop-zone-content-edge-to-text": { + "value": "17px", + "description": "Used by `--mod-actionbutton-edge-to-text`.
Defaults to `var(--spectrum-component-edge-to-text-300)`, if not set.", + "control": "text", + "category": "Modifier" + }, + "mod-drop-zone-width": { + "value": "428px", + "description": "Used by `.spectrum-DropZone`.
Defaults to `var(--spectrum-drop-zone-width)`, if not set.", + "control": "text", + "category": "Modifier" + }, + "mod-drop-zone-padding": { + "value": "24px", + "description": "Used by `.spectrum-DropZone`.
Defaults to `var(--spectrum-spacing-400)`, if not set.", + "control": "text", + "category": "Modifier" + }, + "mod-drop-zone-border-width": { + "value": "var(--spectrum-drop-zone-border-width)", + "description": "Used by `.spectrum-DropZone`.
Defaults to `var(--spectrum-drop-zone-border-width)`, if not set.", + "control": "text", + "category": "Modifier" + }, + "mod-drop-zone-border-color": { + "value": "var(--spectrum-drop-zone-border-color)", + "description": "Defined in `.spectrum-DropZone.is-dragged`, `.spectrum-DropZone:focus-visible`.
Used by `.spectrum-DropZone`.
Defaults to `var(--spectrum-drop-zone-border-color)`, if not set.", + "control": "color", + "category": "Modifier" + }, + "mod-drop-zone-corner-radius": { + "value": "8px", + "description": "Used by `.spectrum-DropZone`.
Defaults to `var(--spectrum-corner-radius-100)`, if not set.", + "control": "text", + "category": "Modifier" + }, + "mod-drop-zone-border-style": { + "description": "Defined in `.spectrum-DropZone.is-dragged`, `.spectrum-DropZone:focus-visible`.
Used by `.spectrum-DropZone`.", + "control": "text", + "category": "Modifier" + }, + "mod-drop-zone-background-color": { + "value": "var(--spectrum-accent-color-900)", + "description": "Defined in `.spectrum-DropZone.is-dragged`, `.spectrum-DropZone.is-filled`.
Used by `.spectrum-DropZone`.
Defaults to `var(--spectrum-drop-zone-background-color)`, if not set.", + "control": "color", + "category": "Modifier" + }, + "mod-drop-zone-border-style-dragged": { + "description": "Used by `--mod-drop-zone-border-style`.", + "control": "text", + "category": "Modifier" + }, + "mod-drop-zone-background-color-opacity": { + "value": "0.1", + "description": "Used by `--mod-drop-zone-background-color`.
Defaults to `var(--spectrum-drop-zone-background-color-opacity)`, if not set.", + "control": "color", + "category": "Modifier" + }, + "mod-drop-zone-border-color-hover": { + "value": "var(--spectrum-drop-zone-border-color-hover)", + "description": "Used by `--mod-drop-zone-border-color`.
Defaults to `var(--spectrum-drop-zone-border-color-hover)`, if not set.", + "control": "color", + "category": "Modifier" + }, + "mod-drop-zone-illustration-color-hover": { + "value": "var(--spectrum-accent-color-900)", + "description": "Used by `--mod-illustrated-message-illustration-color`.
Defaults to `var(--spectrum-accent-visual-color)`, if not set.", + "control": "color", + "category": "Modifier" + }, + "mod-drop-zone-background-color-opacity-filled": { + "value": "0.3", + "description": "Used by `--mod-drop-zone-background-color`.
Defaults to `var(--spectrum-drop-zone-background-color-opacity-filled)`, if not set.", + "control": "color", + "category": "Modifier" + }, + "mod-drop-zone-content-display": { + "description": "Defined in `.spectrum-DropZone.is-filled.is-dragged`.
Used by `.spectrum-DropZone-content`.", + "control": "text", + "category": "Modifier" + }, + "mod-drop-zone-content-height": { + "value": "48px", + "description": "Used by `.spectrum-DropZone-button`.
Defaults to `var(--spectrum-component-height-300)`, if not set.", + "control": "text", + "category": "Modifier" + }, + "mod-drop-zone-content-max-width": { + "value": "380px", + "description": "Used by `.spectrum-DropZone-button`.
Defaults to `var(--spectrum-drop-zone-content-maximum-width)`, if not set.", + "control": "text", + "category": "Modifier" + }, + "mod-drop-zone-content-top-to-text": { + "value": "12px", + "description": "Used by `.spectrum-DropZone-button`.
Defaults to `var(--spectrum-component-top-to-text-300)`, if not set.", + "control": "text", + "category": "Modifier" + }, + "mod-drop-zone-content-bottom-to-text": { + "value": "14px", + "description": "Used by `.spectrum-DropZone-button`.
Defaults to `var(--spectrum-component-bottom-to-text-300)`, if not set.", + "control": "text", + "category": "Modifier" + }, + "mod-drop-zone-content-font-family": { + "value": "var(--spectrum-sans-font-family-stack)", + "description": "Used by `.spectrum-DropZone-button`.
Defaults to `var(--spectrum-sans-font-family-stack)`, if not set.", + "control": "text", + "category": "Modifier" + }, + "mod-drop-zone-content-font-weight": { + "value": "700", + "description": "Used by `.spectrum-DropZone-button`.
Defaults to `var(--spectrum-bold-font-weight)`, if not set.", + "control": "text", + "category": "Modifier" + }, + "mod-drop-zone-content-font-style": { + "value": "normal", + "description": "Used by `.spectrum-DropZone-button`.
Defaults to `var(--spectrum-default-font-style)`, if not set.", + "control": "text", + "category": "Modifier" + }, + "mod-drop-zone-content-line-height": { + "value": "1.3", + "description": "Used by `.spectrum-DropZone-button`.
Defaults to `var(--spectrum-line-height-100)`, if not set.", + "control": "text", + "category": "Modifier" + }, + "mod-drop-zone-content-background-color": { + "value": "var(--spectrum-drop-zone-content-background-color)", + "description": "Used by `.spectrum-DropZone-button, .spectrum-DropZone-button:focus`, `.spectrum-DropZone-button:hover`.
Defaults to `var(--spectrum-drop-zone-content-background-color)`, if not set.", + "control": "color", + "category": "Modifier" + } + }, + "component": { + "spectrum-drop-zone-border-width": { + "description": "Defined in `.spectrum-DropZone`.
Used by `.spectrum-DropZone`.", + "control": "text", + "category": "Component" + }, + "spectrum-drop-zone-background-color": { + "value": "var(--spectrum-accent-color-900)", + "description": "Defined in `.spectrum-DropZone`.
Used by `.spectrum-DropZone`, `--mod-drop-zone-background-color`.", + "control": "color", + "category": "Component" + }, + "spectrum-drop-zone-background-color-rgb": { + "description": "Used by `--spectrum-drop-zone-background-color`.", + "control": "color", + "category": "Component" + }, + "spectrum-drop-zone-border-color-hover": { + "description": "Defined in `.spectrum-DropZone`.
Used by `--mod-drop-zone-border-color`.", + "control": "color", + "category": "Component" + }, + "spectrum-drop-zone-illustration-color": { + "description": "Defined in `.spectrum-DropZone`.
Used by `--mod-illustrated-message-illustration-color`.", + "control": "color", + "category": "Component" + }, + "spectrum-drop-zone-content-background-color": { + "description": "Defined in `.spectrum-DropZone`.
Used by `.spectrum-DropZone-button, .spectrum-DropZone-button:focus`, `.spectrum-DropZone-button:hover`.", + "control": "color", + "category": "Component" + }, + "spectrum-drop-zone-content-maximum-width": { + "value": "380px", + "description": "Used by `--mod-illustrated-message-content-maximum-width`, `.spectrum-DropZone-button`.", + "control": "text", + "category": "Component" + }, + "spectrum-drop-zone-title-size": { + "value": "var(--spectrum-heading-size-s)", + "description": "Used by `--mod-illustrated-message-title-font-size`.", + "control": "text", + "category": "Component" + }, + "spectrum-drop-zone-body-size": { + "value": "var(--spectrum-body-size-xs)", + "description": "Used by `--mod-illustrated-message-description-font-size`.", + "control": "text", + "category": "Component" + }, + "spectrum-drop-zone-width": { + "value": "428px", + "description": "Used by `.spectrum-DropZone`.", + "control": "text", + "category": "Component" + }, + "spectrum-drop-zone-border-color": { + "description": "Defined in `.spectrum-DropZone`.
Used by `.spectrum-DropZone`.", + "control": "color", + "category": "Component" + }, + "spectrum-drop-zone-cjk-title-size": { + "value": "var(--spectrum-heading-cjk-size-s)", + "description": "Used by `--mod-illustrated-message-title-font-size`.", + "control": "text", + "category": "Component" + }, + "spectrum-drop-zone-background-color-opacity": { + "value": "0.1", + "description": "Used by `--mod-drop-zone-background-color`.", + "control": "color", + "category": "Component" + }, + "spectrum-drop-zone-background-color-opacity-filled": { + "value": "0.3", + "description": "Used by `--mod-drop-zone-background-color`.", + "control": "color", + "category": "Component" + } + }, + "global": { + "spectrum-gray-200": { + "value": "light-dark(rgb(225, 225, 225), rgb(50, 50, 50))", + "description": "Used by `--system-drop-zone-border-color`.", + "control": "text", + "category": "Global" + }, + "spectrum-border-width-200": { + "value": "2px", + "description": "Used by `--spectrum-drop-zone-border-width`.", + "control": "text", + "category": "Global" + }, + "spectrum-accent-visual-color": { + "value": "var(--spectrum-accent-color-900)", + "description": "Used by `--spectrum-drop-zone-border-color-hover`, `--spectrum-drop-zone-content-background-color`, `--mod-illustrated-message-illustration-color`.", + "control": "color", + "category": "Global" + }, + "spectrum-neutral-visual-color": { + "value": "var(--spectrum-gray-600)", + "description": "Used by `--spectrum-drop-zone-illustration-color`.", + "control": "color", + "category": "Global" + }, + "spectrum-spacing-400": { + "value": "24px", + "description": "Used by `--mod-illustrated-message-title-to-heading`, `.spectrum-DropZone`.", + "control": "text", + "category": "Global" + }, + "spectrum-spacing-75": { + "value": "4px", + "description": "Used by `--mod-illustrated-message-heading-to-body`.", + "control": "text", + "category": "Global" + }, + "spectrum-sans-font-family-stack": { + "description": "Used by `--mod-illustrated-message-title-font-family`, `--mod-illustrated-message-description-font-family`, `.spectrum-DropZone-button`.", + "control": "text", + "category": "Global" + }, + "spectrum-heading-sans-serif-font-weight": { + "value": "700", + "description": "Used by `--mod-illustrated-message-title-font-weight`.", + "control": "text", + "category": "Global" + }, + "spectrum-heading-sans-serif-font-style": { + "value": "normal", + "description": "Used by `--mod-illustrated-message-title-font-style`.", + "control": "text", + "category": "Global" + }, + "spectrum-heading-line-height": { + "value": "1.3", + "description": "Used by `--mod-illustrated-message-title-line-height`.", + "control": "text", + "category": "Global" + }, + "spectrum-heading-color": { + "value": "var(--spectrum-gray-900)", + "description": "Used by `--mod-illustrated-message-title-color`.", + "control": "color", + "category": "Global" + }, + "spectrum-body-sans-serif-font-weight": { + "value": "400", + "description": "Used by `--mod-illustrated-message-description-font-weight`.", + "control": "text", + "category": "Global" + }, + "spectrum-body-sans-serif-font-style": { + "value": "normal", + "description": "Used by `--mod-illustrated-message-description-font-style`.", + "control": "text", + "category": "Global" + }, + "spectrum-body-line-height": { + "value": "1.5", + "description": "Used by `--mod-illustrated-message-description-line-height`.", + "control": "text", + "category": "Global" + }, + "spectrum-body-color": { + "value": "var(--spectrum-gray-800)", + "description": "Used by `--mod-illustrated-message-description-color`.", + "control": "color", + "category": "Global" + }, + "spectrum-font-size-300": { + "value": "18px", + "description": "Used by `--mod-actionbutton-font-size`.", + "control": "text", + "category": "Global" + }, + "spectrum-white": { + "value": "light-dark(rgb(255, 255, 255), rgb(255, 255, 255))", + "description": "Used by `--mod-actionbutton-label-color`.", + "control": "text", + "category": "Global" + }, + "spectrum-component-edge-to-text-300": { + "value": "17px", + "description": "Used by `--mod-actionbutton-edge-to-text`.", + "control": "text", + "category": "Global" + }, + "spectrum-corner-radius-100": { + "value": "8px", + "description": "Used by `.spectrum-DropZone`.", + "control": "text", + "category": "Global" + }, + "spectrum-component-height-300": { + "value": "48px", + "description": "Used by `.spectrum-DropZone-button`.", + "control": "text", + "category": "Global" + }, + "spectrum-component-top-to-text-300": { + "value": "12px", + "description": "Used by `.spectrum-DropZone-button`.", + "control": "text", + "category": "Global" + }, + "spectrum-component-bottom-to-text-300": { + "value": "14px", + "description": "Used by `.spectrum-DropZone-button`.", + "control": "text", + "category": "Global" + }, + "spectrum-bold-font-weight": { + "value": "700", + "description": "Used by `.spectrum-DropZone-button`.", + "control": "text", + "category": "Global" + }, + "spectrum-default-font-style": { + "value": "normal", + "description": "Used by `.spectrum-DropZone-button`.", + "control": "text", + "category": "Global" + }, + "spectrum-line-height-100": { + "value": "1.3", + "description": "Used by `.spectrum-DropZone-button`.", + "control": "text", + "category": "Global" + } + }, + "system-theme": { + "system-drop-zone-border-color": { + "description": "Defined in `.spectrum`.
Used by `--spectrum-drop-zone-border-color`.", + "control": "color" + } + }, + "passthroughs": { + "mod-illustrated-message-content-maximum-width": { + "category": "Passthrough" + }, + "mod-illustrated-message-illustration-color": { + "category": "Passthrough" + }, + "mod-illustrated-message-title-to-heading": { + "category": "Passthrough" + }, + "mod-illustrated-message-heading-to-body": { + "category": "Passthrough" + }, + "mod-illustrated-message-title-font-family": { + "category": "Passthrough" + }, + "mod-illustrated-message-title-font-weight": { + "category": "Passthrough" + }, + "mod-illustrated-message-title-font-style": { + "category": "Passthrough" + }, + "mod-illustrated-message-title-font-size": { + "category": "Passthrough" + }, + "mod-illustrated-message-title-line-height": { + "category": "Passthrough" + }, + "mod-illustrated-message-title-color": { + "category": "Passthrough" + }, + "mod-illustrated-message-description-position": { + "category": "Passthrough" + }, + "mod-illustrated-message-description-z-index": { + "category": "Passthrough" + }, + "mod-illustrated-message-heading-to-description": { + "category": "Passthrough" + }, + "mod-illustrated-message-description-font-family": { + "category": "Passthrough" + }, + "mod-illustrated-message-description-font-weight": { + "category": "Passthrough" + }, + "mod-illustrated-message-description-font-style": { + "category": "Passthrough" + }, + "mod-illustrated-message-description-font-size": { + "category": "Passthrough" + }, + "mod-illustrated-message-description-line-height": { + "category": "Passthrough" + }, + "mod-illustrated-message-description-color": { + "category": "Passthrough" + }, + "mod-actionbutton-font-size": { + "category": "Passthrough" + }, + "mod-actionbutton-label-color": { + "category": "Passthrough" + }, + "mod-actionbutton-edge-to-text": { + "category": "Passthrough" + }, + "mod-illustrated-message-display": { + "category": "Passthrough" + } + }, + "high-contrast": { + "highcontrast-drop-zone-border-color-hover": { + "value": "var(--mod-drop-zone-border-color-hover, var(--spectrum-drop-zone-border-color-hover))", + "description": "Defined in `.spectrum-DropZone`.
Used by `--mod-drop-zone-border-color`.
Defaults to `var(--mod-drop-zone-border-color-hover, var(--spectrum-drop-zone-border-color-hover))`, if not set.", + "control": "color" + }, + "highcontrast-drop-zone-illustration-color": { + "description": "Defined in `.spectrum-DropZone`.
Used by `--highcontrast-illustrated-message-illustration-color`.", + "control": "color" + }, + "highcontrast-illustrated-message-illustration-color": { + "description": "Defined in `.spectrum-DropZone`.", + "control": "color" + } + } } diff --git a/components/dropzone/stories/dropzone.stories.js b/components/dropzone/stories/dropzone.stories.js index 9d0d7e4c3d2..cd3635aceb8 100644 --- a/components/dropzone/stories/dropzone.stories.js +++ b/components/dropzone/stories/dropzone.stories.js @@ -4,9 +4,11 @@ import { Template as Link } from "@spectrum-css/link/stories/template.js"; import { disableDefaultModes } from "@spectrum-css/preview/modes"; import { isDragged } from "@spectrum-css/preview/types"; import { html } from "lit"; +import { DropzoneGroup } from "./dropzone.test.js"; + +// Local assets to render the component styles and structure import metadata from "../dist/metadata.json"; import packageJson from "../package.json"; -import { DropzoneGroup } from "./dropzone.test.js"; /** * A drop zone is an area on the screen into a which an object can be dragged and dropped to accomplish a task. It's a common interaction in uploading and file management workflows. For example, a drop zone might be used in an upload workflow to enable the user to simply drop a file from their operating system into the drop zone, which is a more efficient and intuitive action, rather than utilizing the standard "Choose file" dialog. @@ -41,6 +43,7 @@ export default { }, packageJson, metadata, + cssprops: metadata.modifiers, }, }; diff --git a/components/dropzone/stories/template.js b/components/dropzone/stories/template.js index 9eb2dfface7..227ab0fa17d 100644 --- a/components/dropzone/stories/template.js +++ b/components/dropzone/stories/template.js @@ -20,7 +20,7 @@ export const Template = ({ heading, description, label, - id = getRandomId("dropzone"), + id = getRandomId("drop-zone"), } = {}, context = {}) => { return html`
Defaults to `var(--spectrum-field-label-min-height)`, if not set.", + "control": "text", + "category": "Modifier" + }, + "mod-fieldlabel-padding-block": { + "value": "var(--mod-field-label-bottom-to-text, var(--spectrum-field-label-bottom-to-text))", + "description": "Used by `.spectrum-FieldLabel`.
Defaults to `var(--mod-field-label-bottom-to-text, var(--spectrum-field-label-bottom-to-text))`, if not set.", + "control": "text", + "category": "Modifier" + }, + "mod-field-label-top-to-text": { + "value": "var(--spectrum-field-label-top-to-text)", + "description": "Used by `.spectrum-FieldLabel`.
Defaults to `var(--spectrum-field-label-top-to-text)`, if not set.", + "control": "text", + "category": "Modifier" + }, + "mod-field-label-bottom-to-text": { + "value": "var(--spectrum-field-label-bottom-to-text)", + "description": "Used by `.spectrum-FieldLabel`.
Defaults to `var(--spectrum-field-label-bottom-to-text)`, if not set.", + "control": "text", + "category": "Modifier" + }, + "mod-fieldlabel-padding-inline": { + "description": "Used by `.spectrum-FieldLabel`.", + "control": "text", + "category": "Modifier" + }, + "mod-fieldlabel-margin-block": { + "value": "var(--mod-fieldlabel-margin-block-end, 0)", + "description": "Used by `.spectrum-FieldLabel`.
Defaults to `var(--mod-fieldlabel-margin-block-end, 0)`, if not set.", + "control": "text", + "category": "Modifier" + }, + "mod-fieldlabel-margin-block-start": { + "description": "Used by `.spectrum-FieldLabel`.", + "control": "text", + "category": "Modifier" + }, + "mod-fieldlabel-margin-block-end": { + "description": "Used by `.spectrum-FieldLabel`.", + "control": "text", + "category": "Modifier" + }, + "mod-fieldlabel-margin-inline": { + "value": "var(--mod-fieldlabel-margin-inline-end, 0)", + "description": "Used by `.spectrum-FieldLabel`.
Defaults to `var(--mod-fieldlabel-margin-inline-end, 0)`, if not set.", + "control": "text", + "category": "Modifier" + }, + "mod-fieldlabel-margin-inline-start": { + "description": "Used by `.spectrum-FieldLabel`.", + "control": "text", + "category": "Modifier" + }, + "mod-fieldlabel-margin-inline-end": { + "description": "Used by `.spectrum-FieldLabel`.", + "control": "text", + "category": "Modifier" + }, + "mod-fieldlabel-font-size": { + "value": "var(--spectrum-field-label-font-size)", + "description": "Used by `.spectrum-FieldLabel`.
Defaults to `var(--spectrum-field-label-font-size)`, if not set.", + "control": "text", + "category": "Modifier" + }, + "mod-fieldlabel-font-weight": { + "value": "400", + "description": "Used by `.spectrum-FieldLabel`.
Defaults to `var(--spectrum-regular-font-weight)`, if not set.", + "control": "text", + "category": "Modifier" + }, + "mod-fieldlabel-line-height": { + "value": "1.3", + "description": "Defined in `.spectrum-FieldLabel:lang(ja), .spectrum-FieldLabel:lang(ko), .spectrum-FieldLabel:lang(zh)`.
Used by `.spectrum-FieldLabel`.
Defaults to `var(--spectrum-line-height-100)`, if not set.", + "control": "text", + "category": "Modifier" + }, + "mod-fieldlabel-color": { + "value": "var(--spectrum-gray-700)", + "description": "Defined in `.spectrum-FieldLabel.is-disabled`.
Used by `.spectrum-FieldLabel`.
Defaults to `var(--spectrum-neutral-subdued-content-color-default)`, if not set.", + "control": "color", + "category": "Modifier" + }, + "mod-fieldlabel-line-height-cjk": { + "value": "1.5", + "description": "Used by `--mod-fieldlabel-line-height`.
Defaults to `var(--spectrum-cjk-line-height-100)`, if not set.", + "control": "text", + "category": "Modifier" + }, + "mod-disabled-content-color": { + "value": "var(--spectrum-gray-400)", + "description": "Used by `--mod-fieldlabel-color`.
Defaults to `var(--spectrum-disabled-content-color)`, if not set.", + "control": "color", + "category": "Modifier" + }, + "mod-field-label-text-to-asterisk": { + "value": "var(--spectrum-field-label-text-to-asterisk)", + "description": "Used by `.spectrum-FieldLabel-requiredIcon`.
Defaults to `var(--spectrum-field-label-text-to-asterisk)`, if not set.", + "control": "text", + "category": "Modifier" + }, + "mod-field-label-asterisk-vertical-align": { + "description": "Used by `.spectrum-FieldLabel-requiredIcon`.", + "control": "text", + "category": "Modifier" + }, + "mod-fieldlabel-side-margin-block-start": { + "value": "var(--spectrum-field-label-side-margin-block-start)", + "description": "Used by `.spectrum-FieldLabel--left, .spectrum-FieldLabel--right`.
Defaults to `var(--spectrum-field-label-side-margin-block-start)`, if not set.", + "control": "text", + "category": "Modifier" + }, + "mod-fieldlabel-side-padding-right": { + "value": "var(--spectrum-field-label-side-padding-right)", + "description": "Used by `.spectrum-FieldLabel--left, .spectrum-FieldLabel--right`.
Defaults to `var(--spectrum-field-label-side-padding-right)`, if not set.", + "control": "text", + "category": "Modifier" + } + }, + "component": { + "spectrum-field-label-min-height": { + "description": "Defined in `.spectrum-FieldLabel, .spectrum-FieldLabel--sizeM`, `.spectrum-FieldLabel--sizeS`, `.spectrum-FieldLabel--sizeL`, `.spectrum-FieldLabel--sizeXL`.
Used by `.spectrum-FieldLabel`.", + "control": "text", + "category": "Component" + }, + "spectrum-field-label-top-to-text": { + "description": "Defined in `.spectrum-FieldLabel, .spectrum-FieldLabel--sizeM`, `.spectrum-FieldLabel--sizeS`, `.spectrum-FieldLabel--sizeL`, `.spectrum-FieldLabel--sizeXL`.
Used by `.spectrum-FieldLabel`.", + "control": "text", + "category": "Component" + }, + "spectrum-field-label-bottom-to-text": { + "description": "Defined in `.spectrum-FieldLabel, .spectrum-FieldLabel--sizeM`, `.spectrum-FieldLabel--sizeS`, `.spectrum-FieldLabel--sizeL`, `.spectrum-FieldLabel--sizeXL`.
Used by `.spectrum-FieldLabel`.", + "control": "text", + "category": "Component" + }, + "spectrum-field-label-font-size": { + "description": "Defined in `.spectrum-FieldLabel, .spectrum-FieldLabel--sizeM`, `.spectrum-FieldLabel--sizeS`, `.spectrum-FieldLabel--sizeL`, `.spectrum-FieldLabel--sizeXL`.
Used by `.spectrum-FieldLabel`.", + "control": "text", + "category": "Component" + }, + "spectrum-field-label-side-margin-block-start": { + "description": "Defined in `.spectrum-FieldLabel, .spectrum-FieldLabel--sizeM`, `.spectrum-FieldLabel--sizeS`, `.spectrum-FieldLabel--sizeL`, `.spectrum-FieldLabel--sizeXL`.
Used by `.spectrum-FieldLabel--left, .spectrum-FieldLabel--right`.", + "control": "text", + "category": "Component" + }, + "spectrum-field-label-top-margin-medium": { + "value": "4px", + "description": "Used by `--spectrum-field-label-side-margin-block-start`.", + "control": "text", + "category": "Component" + }, + "spectrum-field-label-side-padding-right": { + "description": "Defined in `.spectrum-FieldLabel, .spectrum-FieldLabel--sizeM`, `.spectrum-FieldLabel--sizeS`, `.spectrum-FieldLabel--sizeL`, `.spectrum-FieldLabel--sizeXL`.
Used by `.spectrum-FieldLabel--left, .spectrum-FieldLabel--right`.", + "control": "text", + "category": "Component" + }, + "spectrum-field-label-text-to-asterisk": { + "description": "Defined in `.spectrum-FieldLabel, .spectrum-FieldLabel--sizeM`, `.spectrum-FieldLabel--sizeS`, `.spectrum-FieldLabel--sizeL`, `.spectrum-FieldLabel--sizeXL`.
Used by `.spectrum-FieldLabel-requiredIcon`.", + "control": "text", + "category": "Component" + }, + "spectrum-field-label-text-to-asterisk-medium": { + "value": "4px", + "description": "Used by `--spectrum-field-label-text-to-asterisk`.", + "control": "text", + "category": "Component" + }, + "spectrum-field-label-top-margin-small": { + "value": "0px", + "description": "Used by `--spectrum-field-label-side-margin-block-start`.", + "control": "text", + "category": "Component" + }, + "spectrum-field-label-text-to-asterisk-small": { + "value": "4px", + "description": "Used by `--spectrum-field-label-text-to-asterisk`.", + "control": "text", + "category": "Component" + }, + "spectrum-field-label-top-margin-large": { + "value": "5px", + "description": "Used by `--spectrum-field-label-side-margin-block-start`.", + "control": "text", + "category": "Component" + }, + "spectrum-field-label-text-to-asterisk-large": { + "value": "5px", + "description": "Used by `--spectrum-field-label-text-to-asterisk`.", + "control": "text", + "category": "Component" + }, + "spectrum-field-label-top-margin-extra-large": { + "value": "5px", + "description": "Used by `--spectrum-field-label-side-margin-block-start`.", + "control": "text", + "category": "Component" + }, + "spectrum-field-label-text-to-asterisk-extra-large": { + "value": "5px", + "description": "Used by `--spectrum-field-label-text-to-asterisk`.", + "control": "text", + "category": "Component" + } + }, + "global": { + "spectrum-component-height-75": { + "value": "24px", + "description": "Used by `--spectrum-field-label-min-height`.", + "control": "text", + "category": "Global" + }, + "spectrum-component-top-to-text-75": { + "value": "4px", + "description": "Used by `--spectrum-field-label-top-to-text`.", + "control": "text", + "category": "Global" + }, + "spectrum-component-bottom-to-text-75": { + "value": "5px", + "description": "Used by `--spectrum-field-label-bottom-to-text`.", + "control": "text", + "category": "Global" + }, + "spectrum-font-size-75": { + "value": "12px", + "description": "Used by `--spectrum-field-label-font-size`.", + "control": "text", + "category": "Global" + }, + "spectrum-spacing-200": { + "value": "12px", + "description": "Used by `--spectrum-field-label-side-padding-right`.", + "control": "text", + "category": "Global" + }, + "spectrum-spacing-100": { + "value": "8px", + "description": "Used by `--spectrum-field-label-side-padding-right`.", + "control": "text", + "category": "Global" + }, + "spectrum-component-height-100": { + "value": "32px", + "description": "Used by `--spectrum-field-label-min-height`.", + "control": "text", + "category": "Global" + }, + "spectrum-component-top-to-text-100": { + "value": "6px", + "description": "Used by `--spectrum-field-label-top-to-text`.", + "control": "text", + "category": "Global" + }, + "spectrum-component-bottom-to-text-100": { + "value": "9px", + "description": "Used by `--spectrum-field-label-bottom-to-text`.", + "control": "text", + "category": "Global" + }, + "spectrum-font-size-100": { + "value": "14px", + "description": "Used by `--spectrum-field-label-font-size`.", + "control": "text", + "category": "Global" + }, + "spectrum-component-height-200": { + "value": "40px", + "description": "Used by `--spectrum-field-label-min-height`.", + "control": "text", + "category": "Global" + }, + "spectrum-component-top-to-text-200": { + "value": "9px", + "description": "Used by `--spectrum-field-label-top-to-text`.", + "control": "text", + "category": "Global" + }, + "spectrum-component-bottom-to-text-200": { + "value": "11px", + "description": "Used by `--spectrum-field-label-bottom-to-text`.", + "control": "text", + "category": "Global" + }, + "spectrum-font-size-200": { + "value": "16px", + "description": "Used by `--spectrum-field-label-font-size`.", + "control": "text", + "category": "Global" + }, + "spectrum-regular-font-weight": { + "value": "400", + "description": "Used by `.spectrum-FieldLabel`.", + "control": "text", + "category": "Global" + }, + "spectrum-line-height-100": { + "value": "1.3", + "description": "Used by `.spectrum-FieldLabel`.", + "control": "text", + "category": "Global" + }, + "spectrum-neutral-subdued-content-color-default": { + "value": "var(--spectrum-gray-700)", + "description": "Used by `.spectrum-FieldLabel`.", + "control": "color", + "category": "Global" + }, + "spectrum-cjk-line-height-100": { + "value": "1.5", + "description": "Used by `--mod-fieldlabel-line-height`.", + "control": "text", + "category": "Global" + }, + "spectrum-disabled-content-color": { + "value": "var(--spectrum-gray-400)", + "description": "Used by `--mod-fieldlabel-color`.", + "control": "color", + "category": "Global" + } + }, + "system-theme": {}, + "passthroughs": {}, + "high-contrast": { + "highcontrast-field-label-content-color": { + "value": "var(--mod-fieldlabel-color, var(--spectrum-neutral-subdued-content-color-default))", + "description": "Defined in `.spectrum-FieldLabel.is-disabled`.
Used by `.spectrum-FieldLabel`.
Defaults to `var(--mod-fieldlabel-color, var(--spectrum-neutral-subdued-content-color-default))`, if not set.", + "control": "color" + } + } } diff --git a/components/fieldlabel/stories/fieldlabel.stories.js b/components/fieldlabel/stories/fieldlabel.stories.js index 1a268284d7f..099b5de3515 100644 --- a/components/fieldlabel/stories/fieldlabel.stories.js +++ b/components/fieldlabel/stories/fieldlabel.stories.js @@ -1,11 +1,13 @@ import { Sizes } from "@spectrum-css/preview/decorators"; import { disableDefaultModes } from "@spectrum-css/preview/modes"; import { isDisabled, isRequired, size } from "@spectrum-css/preview/types"; -import metadata from "../dist/metadata.json"; -import packageJson from "../package.json"; import { FieldLabelGroup } from "./fieldlabel.test.js"; import { Template } from "./template.js"; +// Local assets to render the component styles and structure +import metadata from "../dist/metadata.json"; +import packageJson from "../package.json"; + /** * The field label component is used along with inputs to display a label for that input. */ @@ -51,6 +53,7 @@ export default { }, packageJson, metadata, + cssprops: metadata.modifiers, }, }; diff --git a/components/fieldlabel/stories/template.js b/components/fieldlabel/stories/template.js index 7f5477e4d5f..e7f808da67e 100644 --- a/components/fieldlabel/stories/template.js +++ b/components/fieldlabel/stories/template.js @@ -14,7 +14,7 @@ export const Template = ({ customStyles = {}, size = "m", label, - id = getRandomId("fieldlabel"), + id = getRandomId("field-label"), testId, forInput, alignment, diff --git a/components/floatingactionbutton/dist/metadata.json b/components/floatingactionbutton/dist/metadata.json index 7daf062a329..35d7e0dbc9e 100644 --- a/components/floatingactionbutton/dist/metadata.json +++ b/components/floatingactionbutton/dist/metadata.json @@ -13,75 +13,359 @@ ".spectrum-FloatingActionButton:hover .spectrum-FloatingActionButton-icon", ".spectrum-Icon.spectrum-FloatingActionButton-icon" ], - "modifiers": [ - "--mod-afloating-action-button-focus-ring-color", - "--mod-floating-action-button-background-color", - "--mod-floating-action-button-background-color-down", - "--mod-floating-action-button-background-color-hover", - "--mod-floating-action-button-background-color-key-focus", - "--mod-floating-action-button-border-radius", - "--mod-floating-action-button-drop-shadow-blur", - "--mod-floating-action-button-drop-shadow-color", - "--mod-floating-action-button-drop-shadow-x", - "--mod-floating-action-button-drop-shadow-y", - "--mod-floating-action-button-focus-ring-gap", - "--mod-floating-action-button-focus-ring-width", - "--mod-floating-action-button-icon-color", - "--mod-floating-action-button-icon-color-down", - "--mod-floating-action-button-icon-color-hover", - "--mod-floating-action-button-icon-color-key-focus", - "--mod-floating-action-button-icon-size", - "--mod-floating-action-button-margin", - "--mod-floating-action-button-padding", - "--mod-floating-action-button-size" - ], - "component": [ - "--spectrum-floating-action-button-background-color", - "--spectrum-floating-action-button-background-color-down", - "--spectrum-floating-action-button-background-color-hover", - "--spectrum-floating-action-button-background-color-key-focus", - "--spectrum-floating-action-button-drop-shadow-blur", - "--spectrum-floating-action-button-drop-shadow-color", - "--spectrum-floating-action-button-drop-shadow-y", - "--spectrum-floating-action-button-icon-color", - "--spectrum-floating-action-button-icon-color-down", - "--spectrum-floating-action-button-icon-color-hover", - "--spectrum-floating-action-button-icon-color-key-focus", - "--spectrum-floating-action-button-icon-size", - "--spectrum-floating-action-button-margin", - "--spectrum-floating-action-button-padding", - "--spectrum-floating-action-button-size" - ], - "global": [ - "--spectrum-accent-background-color-default", - "--spectrum-accent-background-color-down", - "--spectrum-accent-background-color-hover", - "--spectrum-accent-background-color-key-focus", - "--spectrum-background-layer-2-color", - "--spectrum-component-height-200", - "--spectrum-component-pill-edge-to-visual-only-200", - "--spectrum-drop-shadow-x", - "--spectrum-focus-indicator-color", - "--spectrum-focus-indicator-gap", - "--spectrum-focus-indicator-thickness", - "--spectrum-neutral-subdued-content-color-default", - "--spectrum-neutral-subdued-content-color-down", - "--spectrum-neutral-subdued-content-color-hover", - "--spectrum-neutral-subdued-content-color-key-focus", - "--spectrum-spacing-200", - "--spectrum-white", - "--spectrum-workflow-icon-size-200" - ], - "system-theme": [], - "passthroughs": [], - "high-contrast": [ - "--highcontrast-floating-action-button-background-color", - "--highcontrast-floating-action-button-background-color-down", - "--highcontrast-floating-action-button-background-color-hover", - "--highcontrast-floating-action-button-background-color-key-focus", - "--highcontrast-floating-action-button-icon-color", - "--highcontrast-floating-action-button-icon-color-down", - "--highcontrast-floating-action-button-icon-color-hover", - "--highcontrast-floating-action-button-icon-color-key-focus" - ] + "modifiers": { + "mod-floating-action-button-size": { + "value": "var(--spectrum-floating-action-button-size)", + "description": "Used by `.spectrum-FloatingActionButton`.
Defaults to `var(--spectrum-floating-action-button-size)`, if not set.", + "control": "text", + "category": "Modifier" + }, + "mod-floating-action-button-border-radius": { + "description": "Used by `.spectrum-FloatingActionButton`, `.spectrum-FloatingActionButton:focus-visible:after`.", + "control": "text", + "category": "Modifier" + }, + "mod-floating-action-button-padding": { + "value": "var(--spectrum-floating-action-button-padding)", + "description": "Used by `.spectrum-FloatingActionButton`.
Defaults to `var(--spectrum-floating-action-button-padding)`, if not set.", + "control": "text", + "category": "Modifier" + }, + "mod-floating-action-button-margin": { + "value": "var(--spectrum-floating-action-button-margin)", + "description": "Used by `.spectrum-FloatingActionButton`.
Defaults to `var(--spectrum-floating-action-button-margin)`, if not set.", + "control": "text", + "category": "Modifier" + }, + "mod-floating-action-button-drop-shadow-x": { + "value": "0px", + "description": "Used by `.spectrum-FloatingActionButton`.
Defaults to `var(--spectrum-drop-shadow-x)`, if not set.", + "control": "text", + "category": "Modifier" + }, + "mod-floating-action-button-drop-shadow-y": { + "value": "4px", + "description": "Used by `.spectrum-FloatingActionButton`.
Defaults to `var(--spectrum-floating-action-button-drop-shadow-y)`, if not set.", + "control": "text", + "category": "Modifier" + }, + "mod-floating-action-button-drop-shadow-blur": { + "value": "12px", + "description": "Used by `.spectrum-FloatingActionButton`.
Defaults to `var(--spectrum-floating-action-button-drop-shadow-blur)`, if not set.", + "control": "text", + "category": "Modifier" + }, + "mod-floating-action-button-drop-shadow-color": { + "value": "var(--spectrum-transparent-black-300)", + "description": "Used by `.spectrum-FloatingActionButton`.
Defaults to `var(--spectrum-floating-action-button-drop-shadow-color)`, if not set.", + "control": "color", + "category": "Modifier" + }, + "mod-floating-action-button-background-color": { + "value": "var(--spectrum-floating-action-button-background-color)", + "description": "Used by `.spectrum-FloatingActionButton`.
Defaults to `var(--spectrum-floating-action-button-background-color)`, if not set.", + "control": "color", + "category": "Modifier" + }, + "mod-floating-action-button-background-color-hover": { + "value": "var(--spectrum-floating-action-button-background-color-hover)", + "description": "Used by `.spectrum-FloatingActionButton:hover`.
Defaults to `var(--spectrum-floating-action-button-background-color-hover)`, if not set.", + "control": "color", + "category": "Modifier" + }, + "mod-floating-action-button-icon-color-hover": { + "value": "var(--spectrum-floating-action-button-icon-color-hover)", + "description": "Used by `.spectrum-FloatingActionButton:hover .spectrum-FloatingActionButton-icon`.
Defaults to `var(--spectrum-floating-action-button-icon-color-hover)`, if not set.", + "control": "color", + "category": "Modifier" + }, + "mod-floating-action-button-background-color-down": { + "value": "var(--spectrum-floating-action-button-background-color-down)", + "description": "Used by `.spectrum-FloatingActionButton:active`.
Defaults to `var(--spectrum-floating-action-button-background-color-down)`, if not set.", + "control": "color", + "category": "Modifier" + }, + "mod-floating-action-button-icon-color-down": { + "value": "var(--spectrum-floating-action-button-icon-color-down)", + "description": "Used by `.spectrum-FloatingActionButton:active .spectrum-FloatingActionButton-icon`.
Defaults to `var(--spectrum-floating-action-button-icon-color-down)`, if not set.", + "control": "color", + "category": "Modifier" + }, + "mod-floating-action-button-background-color-key-focus": { + "value": "var(--spectrum-floating-action-button-background-color-key-focus)", + "description": "Used by `.spectrum-FloatingActionButton:focus-visible`.
Defaults to `var(--spectrum-floating-action-button-background-color-key-focus)`, if not set.", + "control": "color", + "category": "Modifier" + }, + "mod-floating-action-button-icon-color-key-focus": { + "value": "var(--spectrum-floating-action-button-icon-color-key-focus)", + "description": "Used by `.spectrum-FloatingActionButton:focus-visible .spectrum-FloatingActionButton-icon`.
Defaults to `var(--spectrum-floating-action-button-icon-color-key-focus)`, if not set.", + "control": "color", + "category": "Modifier" + }, + "mod-floating-action-button-focus-ring-gap": { + "value": "2px", + "description": "Used by `.spectrum-FloatingActionButton:focus-visible:after`.
Defaults to `var(--spectrum-focus-indicator-gap)`, if not set.", + "control": "text", + "category": "Modifier" + }, + "mod-floating-action-button-focus-ring-width": { + "value": "2px", + "description": "Used by `.spectrum-FloatingActionButton:focus-visible:after`.
Defaults to `var(--spectrum-focus-indicator-thickness)`, if not set.", + "control": "text", + "category": "Modifier" + }, + "mod-afloating-action-button-focus-ring-color": { + "value": "var(--spectrum-blue-800)", + "description": "Used by `.spectrum-FloatingActionButton:focus-visible:after`.
Defaults to `var(--spectrum-focus-indicator-color)`, if not set.", + "control": "color", + "category": "Modifier" + }, + "mod-floating-action-button-icon-size": { + "value": "var(--spectrum-floating-action-button-icon-size)", + "description": "Used by `.spectrum-Icon.spectrum-FloatingActionButton-icon`.
Defaults to `var(--spectrum-floating-action-button-icon-size)`, if not set.", + "control": "text", + "category": "Modifier" + }, + "mod-floating-action-button-icon-color": { + "value": "var(--spectrum-floating-action-button-icon-color)", + "description": "Used by `.spectrum-Icon.spectrum-FloatingActionButton-icon`.
Defaults to `var(--spectrum-floating-action-button-icon-color)`, if not set.", + "control": "color", + "category": "Modifier" + } + }, + "component": { + "spectrum-floating-action-button-size": { + "description": "Defined in `.spectrum-FloatingActionButton`.
Used by `.spectrum-FloatingActionButton`.", + "control": "text", + "category": "Component" + }, + "spectrum-floating-action-button-icon-size": { + "description": "Defined in `.spectrum-FloatingActionButton`.
Used by `.spectrum-Icon.spectrum-FloatingActionButton-icon`.", + "control": "text", + "category": "Component" + }, + "spectrum-floating-action-button-padding": { + "description": "Defined in `.spectrum-FloatingActionButton`.
Used by `.spectrum-FloatingActionButton`.", + "control": "text", + "category": "Component" + }, + "spectrum-floating-action-button-margin": { + "description": "Defined in `.spectrum-FloatingActionButton`.
Used by `.spectrum-FloatingActionButton`.", + "control": "text", + "category": "Component" + }, + "spectrum-floating-action-button-background-color": { + "description": "Defined in `.spectrum-FloatingActionButton`, `.spectrum-FloatingActionButton--secondary`.
Used by `.spectrum-FloatingActionButton`.", + "control": "color", + "category": "Component" + }, + "spectrum-floating-action-button-background-color-hover": { + "description": "Defined in `.spectrum-FloatingActionButton`, `.spectrum-FloatingActionButton--secondary`.
Used by `.spectrum-FloatingActionButton:hover`.", + "control": "color", + "category": "Component" + }, + "spectrum-floating-action-button-background-color-down": { + "description": "Defined in `.spectrum-FloatingActionButton`, `.spectrum-FloatingActionButton--secondary`.
Used by `.spectrum-FloatingActionButton:active`.", + "control": "color", + "category": "Component" + }, + "spectrum-floating-action-button-background-color-key-focus": { + "description": "Defined in `.spectrum-FloatingActionButton`, `.spectrum-FloatingActionButton--secondary`.
Used by `.spectrum-FloatingActionButton:focus-visible`.", + "control": "color", + "category": "Component" + }, + "spectrum-floating-action-button-icon-color": { + "description": "Defined in `.spectrum-FloatingActionButton`, `.spectrum-FloatingActionButton--secondary`.
Used by `.spectrum-Icon.spectrum-FloatingActionButton-icon`.", + "control": "color", + "category": "Component" + }, + "spectrum-floating-action-button-icon-color-hover": { + "description": "Defined in `.spectrum-FloatingActionButton`, `.spectrum-FloatingActionButton--secondary`.
Used by `.spectrum-FloatingActionButton:hover .spectrum-FloatingActionButton-icon`.", + "control": "color", + "category": "Component" + }, + "spectrum-floating-action-button-icon-color-down": { + "description": "Defined in `.spectrum-FloatingActionButton`, `.spectrum-FloatingActionButton--secondary`.
Used by `.spectrum-FloatingActionButton:active .spectrum-FloatingActionButton-icon`.", + "control": "color", + "category": "Component" + }, + "spectrum-floating-action-button-icon-color-key-focus": { + "description": "Defined in `.spectrum-FloatingActionButton`, `.spectrum-FloatingActionButton--secondary`.
Used by `.spectrum-FloatingActionButton:focus-visible .spectrum-FloatingActionButton-icon`.", + "control": "color", + "category": "Component" + }, + "spectrum-floating-action-button-drop-shadow-y": { + "value": "4px", + "description": "Used by `.spectrum-FloatingActionButton`.", + "control": "text", + "category": "Component" + }, + "spectrum-floating-action-button-drop-shadow-blur": { + "value": "12px", + "description": "Used by `.spectrum-FloatingActionButton`.", + "control": "text", + "category": "Component" + }, + "spectrum-floating-action-button-drop-shadow-color": { + "value": "var(--spectrum-transparent-black-300)", + "description": "Used by `.spectrum-FloatingActionButton`.", + "control": "color", + "category": "Component" + } + }, + "global": { + "spectrum-component-height-200": { + "value": "40px", + "description": "Used by `--spectrum-floating-action-button-size`.", + "control": "text", + "category": "Global" + }, + "spectrum-workflow-icon-size-200": { + "value": "22px", + "description": "Used by `--spectrum-floating-action-button-icon-size`.", + "control": "text", + "category": "Global" + }, + "spectrum-component-pill-edge-to-visual-only-200": { + "value": "9px", + "description": "Used by `--spectrum-floating-action-button-padding`.", + "control": "text", + "category": "Global" + }, + "spectrum-spacing-200": { + "value": "12px", + "description": "Used by `--spectrum-floating-action-button-margin`.", + "control": "text", + "category": "Global" + }, + "spectrum-accent-background-color-default": { + "value": "var(--spectrum-accent-color-800)", + "description": "Used by `--spectrum-floating-action-button-background-color`.", + "control": "color", + "category": "Global" + }, + "spectrum-accent-background-color-hover": { + "value": "var(--spectrum-accent-color-700)", + "description": "Used by `--spectrum-floating-action-button-background-color-hover`.", + "control": "color", + "category": "Global" + }, + "spectrum-accent-background-color-down": { + "value": "var(--spectrum-accent-color-700)", + "description": "Used by `--spectrum-floating-action-button-background-color-down`.", + "control": "color", + "category": "Global" + }, + "spectrum-accent-background-color-key-focus": { + "value": "var(--spectrum-accent-color-700)", + "description": "Used by `--spectrum-floating-action-button-background-color-key-focus`.", + "control": "color", + "category": "Global" + }, + "spectrum-white": { + "value": "light-dark(rgb(255, 255, 255), rgb(255, 255, 255))", + "description": "Used by `--spectrum-floating-action-button-icon-color`, `--spectrum-floating-action-button-icon-color-hover`, `--spectrum-floating-action-button-icon-color-down`, `--spectrum-floating-action-button-icon-color-key-focus`.", + "control": "text", + "category": "Global" + }, + "spectrum-background-layer-2-color": { + "value": "var(--spectrum-gray-75)", + "description": "Used by `--spectrum-floating-action-button-background-color`, `--spectrum-floating-action-button-background-color-hover`, `--spectrum-floating-action-button-background-color-down`, `--spectrum-floating-action-button-background-color-key-focus`.", + "control": "color", + "category": "Global" + }, + "spectrum-neutral-subdued-content-color-default": { + "value": "var(--spectrum-gray-700)", + "description": "Used by `--spectrum-floating-action-button-icon-color`.", + "control": "color", + "category": "Global" + }, + "spectrum-neutral-subdued-content-color-hover": { + "value": "var(--spectrum-gray-800)", + "description": "Used by `--spectrum-floating-action-button-icon-color-hover`.", + "control": "color", + "category": "Global" + }, + "spectrum-neutral-subdued-content-color-down": { + "value": "var(--spectrum-gray-800)", + "description": "Used by `--spectrum-floating-action-button-icon-color-down`.", + "control": "color", + "category": "Global" + }, + "spectrum-neutral-subdued-content-color-key-focus": { + "value": "var(--spectrum-gray-800)", + "description": "Used by `--spectrum-floating-action-button-icon-color-key-focus`.", + "control": "color", + "category": "Global" + }, + "spectrum-drop-shadow-x": { + "value": "0px", + "description": "Used by `.spectrum-FloatingActionButton`.", + "control": "text", + "category": "Global" + }, + "spectrum-focus-indicator-gap": { + "value": "2px", + "description": "Used by `.spectrum-FloatingActionButton:focus-visible:after`.", + "control": "text", + "category": "Global" + }, + "spectrum-focus-indicator-thickness": { + "value": "2px", + "description": "Used by `.spectrum-FloatingActionButton:focus-visible:after`.", + "control": "text", + "category": "Global" + }, + "spectrum-focus-indicator-color": { + "value": "var(--spectrum-blue-800)", + "description": "Used by `.spectrum-FloatingActionButton:focus-visible:after`.", + "control": "color", + "category": "Global" + } + }, + "system-theme": {}, + "passthroughs": {}, + "high-contrast": { + "highcontrast-floating-action-button-background-color": { + "value": "var(--mod-floating-action-button-background-color, var(--spectrum-floating-action-button-background-color))", + "description": "Defined in `.spectrum-FloatingActionButton`.
Used by `.spectrum-FloatingActionButton`.
Defaults to `var(--mod-floating-action-button-background-color, var(--spectrum-floating-action-button-background-color))`, if not set.", + "control": "color" + }, + "highcontrast-floating-action-button-background-color-hover": { + "value": "var(--mod-floating-action-button-background-color-hover, var(--spectrum-floating-action-button-background-color-hover))", + "description": "Defined in `.spectrum-FloatingActionButton`.
Used by `.spectrum-FloatingActionButton:hover`.
Defaults to `var(--mod-floating-action-button-background-color-hover, var(--spectrum-floating-action-button-background-color-hover))`, if not set.", + "control": "color" + }, + "highcontrast-floating-action-button-background-color-down": { + "value": "var(--mod-floating-action-button-background-color-down, var(--spectrum-floating-action-button-background-color-down))", + "description": "Defined in `.spectrum-FloatingActionButton`.
Used by `.spectrum-FloatingActionButton:active`.
Defaults to `var(--mod-floating-action-button-background-color-down, var(--spectrum-floating-action-button-background-color-down))`, if not set.", + "control": "color" + }, + "highcontrast-floating-action-button-background-color-key-focus": { + "value": "var(--mod-floating-action-button-background-color-key-focus, var(--spectrum-floating-action-button-background-color-key-focus))", + "description": "Defined in `.spectrum-FloatingActionButton`.
Used by `.spectrum-FloatingActionButton:focus-visible`.
Defaults to `var(--mod-floating-action-button-background-color-key-focus, var(--spectrum-floating-action-button-background-color-key-focus))`, if not set.", + "control": "color" + }, + "highcontrast-floating-action-button-icon-color": { + "value": "var(--mod-floating-action-button-icon-color, var(--spectrum-floating-action-button-icon-color))", + "description": "Defined in `.spectrum-FloatingActionButton`.
Used by `.spectrum-Icon.spectrum-FloatingActionButton-icon`.
Defaults to `var(--mod-floating-action-button-icon-color, var(--spectrum-floating-action-button-icon-color))`, if not set.", + "control": "color" + }, + "highcontrast-floating-action-button-icon-color-hover": { + "value": "var(--mod-floating-action-button-icon-color-hover, var(--spectrum-floating-action-button-icon-color-hover))", + "description": "Defined in `.spectrum-FloatingActionButton`.
Used by `.spectrum-FloatingActionButton:hover .spectrum-FloatingActionButton-icon`.
Defaults to `var(--mod-floating-action-button-icon-color-hover, var(--spectrum-floating-action-button-icon-color-hover))`, if not set.", + "control": "color" + }, + "highcontrast-floating-action-button-icon-color-down": { + "value": "var(--mod-floating-action-button-icon-color-down, var(--spectrum-floating-action-button-icon-color-down))", + "description": "Defined in `.spectrum-FloatingActionButton`.
Used by `.spectrum-FloatingActionButton:active .spectrum-FloatingActionButton-icon`.
Defaults to `var(--mod-floating-action-button-icon-color-down, var(--spectrum-floating-action-button-icon-color-down))`, if not set.", + "control": "color" + }, + "highcontrast-floating-action-button-icon-color-key-focus": { + "value": "var(--mod-floating-action-button-icon-color-key-focus, var(--spectrum-floating-action-button-icon-color-key-focus))", + "description": "Defined in `.spectrum-FloatingActionButton`.
Used by `.spectrum-FloatingActionButton:focus-visible .spectrum-FloatingActionButton-icon`.
Defaults to `var(--mod-floating-action-button-icon-color-key-focus, var(--spectrum-floating-action-button-icon-color-key-focus))`, if not set.", + "control": "color" + } + } } diff --git a/components/floatingactionbutton/stories/floatingactionbutton.stories.js b/components/floatingactionbutton/stories/floatingactionbutton.stories.js index 3d96790255d..24154d52592 100644 --- a/components/floatingactionbutton/stories/floatingactionbutton.stories.js +++ b/components/floatingactionbutton/stories/floatingactionbutton.stories.js @@ -1,11 +1,13 @@ import { default as IconStories } from "@spectrum-css/icon/stories/icon.stories.js"; import { disableDefaultModes } from "@spectrum-css/preview/modes"; import { isActive, isFocused, isHovered } from "@spectrum-css/preview/types"; -import metadata from "../dist/metadata.json"; -import packageJson from "../package.json"; import { FloatingActionButtonGroup } from "./floatingactionbutton.test.js"; import { Template } from "./template.js"; +// Local assets to render the component styles and structure +import metadata from "../dist/metadata.json"; +import packageJson from "../package.json"; + /** * The floating action button component is used to give users a more prominent button for high frequency actions. * @@ -49,6 +51,7 @@ export default { parameters: { packageJson, metadata, + cssprops: metadata.modifiers, }, }; diff --git a/components/form/dist/metadata.json b/components/form/dist/metadata.json index 88655f8edd3..1e35f2ec725 100644 --- a/components/form/dist/metadata.json +++ b/components/form/dist/metadata.json @@ -11,27 +11,97 @@ ".spectrum-Form-itemLabel.is-disabled", ".spectrum-Form-itemLabel.is-disabled .spectrum-FieldLabel-requiredIcon" ], - "modifiers": [ - "--mod-disabled-content-color", - "--mod-form-grid-template-columns", - "--mod-form-grid-template-columns-labels-above", - "--mod-form-inline-size", - "--mod-form-item-block-spacing", - "--mod-form-item-block-spacing-labels-above" - ], - "component": [ - "--spectrum-form-grid-template-columns", - "--spectrum-form-grid-template-columns-labels-above", - "--spectrum-form-item-block-spacing", - "--spectrum-form-item-block-spacing-labels-above", - "--spectrum-form-item-disabled-content-color" - ], - "global": [ - "--spectrum-disabled-content-color", - "--spectrum-spacing-200", - "--spectrum-spacing-300" - ], - "system-theme": [], - "passthroughs": [], - "high-contrast": ["--highcontrast-form-item-disabled-content-color"] + "modifiers": { + "mod-form-grid-template-columns": { + "value": "var(--spectrum-form-grid-template-columns)", + "description": "Defined in `.spectrum-Form--labelsAbove`.
Used by `.spectrum-Form`.
Defaults to `var(--spectrum-form-grid-template-columns)`, if not set.", + "control": "text", + "category": "Modifier" + }, + "mod-form-inline-size": { + "description": "Used by `.spectrum-Form`.", + "control": "text", + "category": "Modifier" + }, + "mod-form-item-block-spacing": { + "value": "var(--spectrum-form-item-block-spacing)", + "description": "Defined in `.spectrum-Form--labelsAbove`.
Used by `.spectrum-Form`.
Defaults to `var(--spectrum-form-item-block-spacing)`, if not set.", + "control": "text", + "category": "Modifier" + }, + "mod-form-item-block-spacing-labels-above": { + "value": "var(--spectrum-form-item-block-spacing-labels-above)", + "description": "Used by `--mod-form-item-block-spacing`.
Defaults to `var(--spectrum-form-item-block-spacing-labels-above)`, if not set.", + "control": "text", + "category": "Modifier" + }, + "mod-form-grid-template-columns-labels-above": { + "value": "var(--spectrum-form-grid-template-columns-labels-above)", + "description": "Used by `--mod-form-grid-template-columns`.
Defaults to `var(--spectrum-form-grid-template-columns-labels-above)`, if not set.", + "control": "text", + "category": "Modifier" + }, + "mod-disabled-content-color": { + "value": "var(--spectrum-form-item-disabled-content-color)", + "description": "Used by `.spectrum-Form-itemLabel.is-disabled, .spectrum-Form-itemLabel.is-disabled .spectrum-FieldLabel-requiredIcon`.
Defaults to `var(--spectrum-form-item-disabled-content-color)`, if not set.", + "control": "color", + "category": "Modifier" + } + }, + "component": { + "spectrum-form-item-block-spacing": { + "description": "Defined in `.spectrum-Form`.
Used by `.spectrum-Form`.", + "control": "text", + "category": "Component" + }, + "spectrum-form-item-block-spacing-labels-above": { + "description": "Defined in `.spectrum-Form`.
Used by `--mod-form-item-block-spacing`.", + "control": "text", + "category": "Component" + }, + "spectrum-form-grid-template-columns": { + "description": "Defined in `.spectrum-Form`.
Used by `.spectrum-Form`.", + "control": "text", + "category": "Component" + }, + "spectrum-form-grid-template-columns-labels-above": { + "description": "Defined in `.spectrum-Form`.
Used by `--mod-form-grid-template-columns`.", + "control": "text", + "category": "Component" + }, + "spectrum-form-item-disabled-content-color": { + "description": "Defined in `.spectrum-Form`.
Used by `.spectrum-Form-itemLabel.is-disabled, .spectrum-Form-itemLabel.is-disabled .spectrum-FieldLabel-requiredIcon`.", + "control": "color", + "category": "Component" + } + }, + "global": { + "spectrum-spacing-300": { + "value": "16px", + "description": "Used by `--spectrum-form-item-block-spacing`.", + "control": "text", + "category": "Global" + }, + "spectrum-spacing-200": { + "value": "12px", + "description": "Used by `--spectrum-form-item-block-spacing-labels-above`.", + "control": "text", + "category": "Global" + }, + "spectrum-disabled-content-color": { + "value": "var(--spectrum-gray-400)", + "description": "Used by `--spectrum-form-item-disabled-content-color`.", + "control": "color", + "category": "Global" + } + }, + "system-theme": {}, + "passthroughs": {}, + "high-contrast": { + "highcontrast-form-item-disabled-content-color": { + "value": "var(--mod-disabled-content-color, var(--spectrum-form-item-disabled-content-color))", + "description": "Defined in `.spectrum-Form`.
Used by `.spectrum-Form-itemLabel.is-disabled, .spectrum-Form-itemLabel.is-disabled .spectrum-FieldLabel-requiredIcon`.
Defaults to `var(--mod-disabled-content-color, var(--spectrum-form-item-disabled-content-color))`, if not set.", + "control": "color" + } + } } diff --git a/components/form/stories/form.stories.js b/components/form/stories/form.stories.js index 233f18adb21..2bc1df8261a 100644 --- a/components/form/stories/form.stories.js +++ b/components/form/stories/form.stories.js @@ -3,11 +3,13 @@ import { Template as Picker } from "@spectrum-css/picker/stories/template.js"; import { disableDefaultModes } from "@spectrum-css/preview/modes"; import { Template as Stepper } from "@spectrum-css/stepper/stories/template.js"; import { Template as TextField } from "@spectrum-css/textfield/stories/template.js"; -import metadata from "../dist/metadata.json"; -import packageJson from "../package.json"; import { FormGroup } from "./form.test.js"; import { Template } from "./template.js"; +// Local assets to render the component styles and structure +import metadata from "../dist/metadata.json"; +import packageJson from "../package.json"; + /** * The form component is used for aligning multiple inputs and field groups within a form. It provides structure and spacing for your form fields. */ @@ -107,6 +109,7 @@ export default { parameters: { packageJson, metadata, + cssprops: metadata.modifiers, }, }; diff --git a/components/helptext/dist/metadata.json b/components/helptext/dist/metadata.json index f730c33a671..fc988f11bf8 100644 --- a/components/helptext/dist/metadata.json +++ b/components/helptext/dist/metadata.json @@ -4,6 +4,9 @@ ".spectrum-HelpText", ".spectrum-HelpText .spectrum-HelpText-text", ".spectrum-HelpText .spectrum-HelpText-validationIcon", + ".spectrum-HelpText:lang(ja)", + ".spectrum-HelpText:lang(ko)", + ".spectrum-HelpText:lang(zh)", ".spectrum-HelpText.is-disabled", ".spectrum-HelpText.is-disabled .spectrum-HelpText-text", ".spectrum-HelpText.is-disabled .spectrum-HelpText-validationIcon", @@ -16,71 +19,316 @@ ".spectrum-HelpText.spectrum-HelpText--sizeL", ".spectrum-HelpText.spectrum-HelpText--sizeM", ".spectrum-HelpText.spectrum-HelpText--sizeS", - ".spectrum-HelpText.spectrum-HelpText--sizeXL", - ".spectrum-HelpText:lang(ja)", - ".spectrum-HelpText:lang(ko)", - ".spectrum-HelpText:lang(zh)" - ], - "modifiers": [ - "--mod-helptext-bottom-to-text", - "--mod-helptext-bottom-to-workflow-icon", - "--mod-helptext-content-color-default", - "--mod-helptext-font-size", - "--mod-helptext-icon-color-default", - "--mod-helptext-icon-size", - "--mod-helptext-line-height", - "--mod-helptext-line-height-cjk", - "--mod-helptext-min-height", - "--mod-helptext-text-to-visual", - "--mod-helptext-top-to-text", - "--mod-helptext-top-to-workflow-icon" - ], - "component": [ - "--spectrum-help-text-top-to-workflow-icon-extra-large", - "--spectrum-help-text-top-to-workflow-icon-large", - "--spectrum-help-text-top-to-workflow-icon-medium", - "--spectrum-help-text-top-to-workflow-icon-small", - "--spectrum-helptext-bottom-to-text", - "--spectrum-helptext-bottom-to-workflow-icon", - "--spectrum-helptext-content-color-default", - "--spectrum-helptext-font-size", - "--spectrum-helptext-icon-color-default", - "--spectrum-helptext-icon-size", - "--spectrum-helptext-min-height", - "--spectrum-helptext-text-to-visual", - "--spectrum-helptext-top-to-text", - "--spectrum-helptext-top-to-workflow-icon" - ], - "global": [ - "--spectrum-cjk-line-height-100", - "--spectrum-component-bottom-to-text-100", - "--spectrum-component-bottom-to-text-200", - "--spectrum-component-bottom-to-text-75", - "--spectrum-component-height-100", - "--spectrum-component-height-200", - "--spectrum-component-height-75", - "--spectrum-component-top-to-text-100", - "--spectrum-component-top-to-text-200", - "--spectrum-component-top-to-text-75", - "--spectrum-disabled-content-color", - "--spectrum-font-size-100", - "--spectrum-font-size-200", - "--spectrum-font-size-75", - "--spectrum-line-height-100", - "--spectrum-negative-color-900", - "--spectrum-neutral-subdued-content-color-default", - "--spectrum-text-to-visual-100", - "--spectrum-text-to-visual-200", - "--spectrum-text-to-visual-75", - "--spectrum-workflow-icon-size-100", - "--spectrum-workflow-icon-size-200", - "--spectrum-workflow-icon-size-300", - "--spectrum-workflow-icon-size-75" + ".spectrum-HelpText.spectrum-HelpText--sizeXL" ], - "system-theme": [], - "passthroughs": [], - "high-contrast": [ - "--highcontrast-helptext-content-color-default", - "--highcontrast-helptext-icon-color-default" - ] + "modifiers": { + "mod-helptext-content-color-default": { + "value": "var(--spectrum-helptext-content-color-default)", + "description": "Used by `.spectrum-HelpText`, `.spectrum-HelpText.spectrum-HelpText--neutral .spectrum-HelpText-text`, `.spectrum-HelpText.spectrum-HelpText--negative .spectrum-HelpText-text`, `.spectrum-HelpText.is-disabled .spectrum-HelpText-text`.
Defaults to `var(--spectrum-helptext-content-color-default)`, if not set.", + "control": "color", + "category": "Modifier" + }, + "mod-helptext-font-size": { + "value": "var(--spectrum-helptext-font-size)", + "description": "Used by `.spectrum-HelpText`.
Defaults to `var(--spectrum-helptext-font-size)`, if not set.", + "control": "text", + "category": "Modifier" + }, + "mod-helptext-min-height": { + "value": "var(--spectrum-helptext-min-height)", + "description": "Used by `.spectrum-HelpText`.
Defaults to `var(--spectrum-helptext-min-height)`, if not set.", + "control": "text", + "category": "Modifier" + }, + "mod-helptext-line-height": { + "value": "1.3", + "description": "Defined in `.spectrum-HelpText:lang(ja), .spectrum-HelpText:lang(ko), .spectrum-HelpText:lang(zh)`.
Used by `.spectrum-HelpText .spectrum-HelpText-text`.
Defaults to `var(--spectrum-line-height-100)`, if not set.", + "control": "text", + "category": "Modifier" + }, + "mod-helptext-line-height-cjk": { + "value": "1.5", + "description": "Used by `--mod-helptext-line-height`.
Defaults to `var(--spectrum-cjk-line-height-100)`, if not set.", + "control": "text", + "category": "Modifier" + }, + "mod-helptext-text-to-visual": { + "value": "var(--spectrum-helptext-text-to-visual)", + "description": "Used by `.spectrum-HelpText .spectrum-HelpText-validationIcon`.
Defaults to `var(--spectrum-helptext-text-to-visual)`, if not set.", + "control": "text", + "category": "Modifier" + }, + "mod-helptext-top-to-workflow-icon": { + "value": "var(--spectrum-helptext-top-to-workflow-icon)", + "description": "Used by `.spectrum-HelpText .spectrum-HelpText-validationIcon`.
Defaults to `var(--spectrum-helptext-top-to-workflow-icon)`, if not set.", + "control": "text", + "category": "Modifier" + }, + "mod-helptext-bottom-to-workflow-icon": { + "value": "var(--spectrum-helptext-bottom-to-workflow-icon)", + "description": "Used by `.spectrum-HelpText .spectrum-HelpText-validationIcon`.
Defaults to `var(--spectrum-helptext-bottom-to-workflow-icon)`, if not set.", + "control": "text", + "category": "Modifier" + }, + "mod-helptext-icon-size": { + "value": "var(--spectrum-helptext-icon-size)", + "description": "Used by `.spectrum-HelpText .spectrum-HelpText-validationIcon`.
Defaults to `var(--spectrum-helptext-icon-size)`, if not set.", + "control": "text", + "category": "Modifier" + }, + "mod-helptext-top-to-text": { + "value": "var(--spectrum-helptext-top-to-text)", + "description": "Used by `.spectrum-HelpText .spectrum-HelpText-text`.
Defaults to `var(--spectrum-helptext-top-to-text)`, if not set.", + "control": "text", + "category": "Modifier" + }, + "mod-helptext-bottom-to-text": { + "value": "var(--spectrum-helptext-bottom-to-text)", + "description": "Used by `.spectrum-HelpText .spectrum-HelpText-text`.
Defaults to `var(--spectrum-helptext-bottom-to-text)`, if not set.", + "control": "text", + "category": "Modifier" + }, + "mod-helptext-icon-color-default": { + "value": "var(--spectrum-helptext-icon-color-default)", + "description": "Used by `.spectrum-HelpText.spectrum-HelpText--neutral .spectrum-HelpText-validationIcon`, `.spectrum-HelpText.spectrum-HelpText--negative .spectrum-HelpText-validationIcon`, `.spectrum-HelpText.is-disabled .spectrum-HelpText-validationIcon`.
Defaults to `var(--spectrum-helptext-icon-color-default)`, if not set.", + "control": "color", + "category": "Modifier" + } + }, + "component": { + "spectrum-helptext-content-color-default": { + "description": "Defined in `.spectrum-HelpText`, `.spectrum-HelpText.spectrum-HelpText--neutral`, `.spectrum-HelpText.spectrum-HelpText--negative`, `.spectrum-HelpText.is-disabled`.
Used by `.spectrum-HelpText`, `.spectrum-HelpText.spectrum-HelpText--neutral .spectrum-HelpText-text`, `.spectrum-HelpText.spectrum-HelpText--negative .spectrum-HelpText-text`, `.spectrum-HelpText.is-disabled .spectrum-HelpText-text`.", + "control": "color", + "category": "Component" + }, + "spectrum-helptext-icon-color-default": { + "description": "Defined in `.spectrum-HelpText`, `.spectrum-HelpText.spectrum-HelpText--neutral`, `.spectrum-HelpText.spectrum-HelpText--negative`, `.spectrum-HelpText.is-disabled`.
Used by `.spectrum-HelpText.spectrum-HelpText--neutral .spectrum-HelpText-validationIcon`, `.spectrum-HelpText.spectrum-HelpText--negative .spectrum-HelpText-validationIcon`, `.spectrum-HelpText.is-disabled .spectrum-HelpText-validationIcon`.", + "control": "color", + "category": "Component" + }, + "spectrum-helptext-font-size": { + "description": "Defined in `.spectrum-HelpText.spectrum-HelpText--sizeS`, `.spectrum-HelpText, .spectrum-HelpText.spectrum-HelpText--sizeM`, `.spectrum-HelpText.spectrum-HelpText--sizeL`, `.spectrum-HelpText.spectrum-HelpText--sizeXL`.
Used by `.spectrum-HelpText`.", + "control": "text", + "category": "Component" + }, + "spectrum-helptext-min-height": { + "description": "Defined in `.spectrum-HelpText.spectrum-HelpText--sizeS`, `.spectrum-HelpText, .spectrum-HelpText.spectrum-HelpText--sizeM`, `.spectrum-HelpText.spectrum-HelpText--sizeL`, `.spectrum-HelpText.spectrum-HelpText--sizeXL`.
Used by `.spectrum-HelpText`.", + "control": "text", + "category": "Component" + }, + "spectrum-helptext-icon-size": { + "description": "Defined in `.spectrum-HelpText.spectrum-HelpText--sizeS`, `.spectrum-HelpText, .spectrum-HelpText.spectrum-HelpText--sizeM`, `.spectrum-HelpText.spectrum-HelpText--sizeL`, `.spectrum-HelpText.spectrum-HelpText--sizeXL`.
Used by `.spectrum-HelpText .spectrum-HelpText-validationIcon`.", + "control": "text", + "category": "Component" + }, + "spectrum-helptext-text-to-visual": { + "description": "Defined in `.spectrum-HelpText.spectrum-HelpText--sizeS`, `.spectrum-HelpText, .spectrum-HelpText.spectrum-HelpText--sizeM`, `.spectrum-HelpText.spectrum-HelpText--sizeL`, `.spectrum-HelpText.spectrum-HelpText--sizeXL`.
Used by `.spectrum-HelpText .spectrum-HelpText-validationIcon`.", + "control": "text", + "category": "Component" + }, + "spectrum-helptext-top-to-workflow-icon": { + "description": "Defined in `.spectrum-HelpText.spectrum-HelpText--sizeS`, `.spectrum-HelpText, .spectrum-HelpText.spectrum-HelpText--sizeM`, `.spectrum-HelpText.spectrum-HelpText--sizeL`, `.spectrum-HelpText.spectrum-HelpText--sizeXL`.
Used by `--spectrum-helptext-bottom-to-workflow-icon`, `.spectrum-HelpText .spectrum-HelpText-validationIcon`.", + "control": "text", + "category": "Component" + }, + "spectrum-help-text-top-to-workflow-icon-small": { + "value": "4px", + "description": "Used by `--spectrum-helptext-top-to-workflow-icon`.", + "control": "text", + "category": "Component" + }, + "spectrum-helptext-bottom-to-workflow-icon": { + "description": "Defined in `.spectrum-HelpText.spectrum-HelpText--sizeS`, `.spectrum-HelpText, .spectrum-HelpText.spectrum-HelpText--sizeM`, `.spectrum-HelpText.spectrum-HelpText--sizeL`, `.spectrum-HelpText.spectrum-HelpText--sizeXL`.
Used by `.spectrum-HelpText .spectrum-HelpText-validationIcon`.", + "control": "text", + "category": "Component" + }, + "spectrum-helptext-top-to-text": { + "description": "Defined in `.spectrum-HelpText.spectrum-HelpText--sizeS`, `.spectrum-HelpText, .spectrum-HelpText.spectrum-HelpText--sizeM`, `.spectrum-HelpText.spectrum-HelpText--sizeL`, `.spectrum-HelpText.spectrum-HelpText--sizeXL`.
Used by `.spectrum-HelpText .spectrum-HelpText-text`.", + "control": "text", + "category": "Component" + }, + "spectrum-helptext-bottom-to-text": { + "description": "Defined in `.spectrum-HelpText.spectrum-HelpText--sizeS`, `.spectrum-HelpText, .spectrum-HelpText.spectrum-HelpText--sizeM`, `.spectrum-HelpText.spectrum-HelpText--sizeL`, `.spectrum-HelpText.spectrum-HelpText--sizeXL`.
Used by `.spectrum-HelpText .spectrum-HelpText-text`.", + "control": "text", + "category": "Component" + }, + "spectrum-help-text-top-to-workflow-icon-medium": { + "value": "3px", + "description": "Used by `--spectrum-helptext-top-to-workflow-icon`.", + "control": "text", + "category": "Component" + }, + "spectrum-help-text-top-to-workflow-icon-large": { + "value": "6px", + "description": "Used by `--spectrum-helptext-top-to-workflow-icon`.", + "control": "text", + "category": "Component" + }, + "spectrum-help-text-top-to-workflow-icon-extra-large": { + "value": "9px", + "description": "Used by `--spectrum-helptext-top-to-workflow-icon`.", + "control": "text", + "category": "Component" + } + }, + "global": { + "spectrum-neutral-subdued-content-color-default": { + "value": "var(--spectrum-gray-700)", + "description": "Used by `--spectrum-helptext-content-color-default`, `--spectrum-helptext-icon-color-default`.", + "control": "color", + "category": "Global" + }, + "spectrum-component-height-75": { + "value": "24px", + "description": "Used by `--spectrum-helptext-min-height`.", + "control": "text", + "category": "Global" + }, + "spectrum-workflow-icon-size-75": { + "value": "16px", + "description": "Used by `--spectrum-helptext-icon-size`.", + "control": "text", + "category": "Global" + }, + "spectrum-font-size-75": { + "value": "12px", + "description": "Used by `--spectrum-helptext-font-size`.", + "control": "text", + "category": "Global" + }, + "spectrum-text-to-visual-75": { + "value": "5px", + "description": "Used by `--spectrum-helptext-text-to-visual`.", + "control": "text", + "category": "Global" + }, + "spectrum-component-top-to-text-75": { + "value": "4px", + "description": "Used by `--spectrum-helptext-top-to-text`.", + "control": "text", + "category": "Global" + }, + "spectrum-component-bottom-to-text-75": { + "value": "5px", + "description": "Used by `--spectrum-helptext-bottom-to-text`.", + "control": "text", + "category": "Global" + }, + "spectrum-workflow-icon-size-100": { + "value": "20px", + "description": "Used by `--spectrum-helptext-icon-size`.", + "control": "text", + "category": "Global" + }, + "spectrum-component-height-100": { + "value": "32px", + "description": "Used by `--spectrum-helptext-min-height`.", + "control": "text", + "category": "Global" + }, + "spectrum-workflow-icon-size-200": { + "value": "22px", + "description": "Used by `--spectrum-helptext-icon-size`.", + "control": "text", + "category": "Global" + }, + "spectrum-font-size-100": { + "value": "14px", + "description": "Used by `--spectrum-helptext-font-size`.", + "control": "text", + "category": "Global" + }, + "spectrum-text-to-visual-100": { + "value": "6px", + "description": "Used by `--spectrum-helptext-text-to-visual`.", + "control": "text", + "category": "Global" + }, + "spectrum-component-top-to-text-100": { + "value": "6px", + "description": "Used by `--spectrum-helptext-top-to-text`.", + "control": "text", + "category": "Global" + }, + "spectrum-component-bottom-to-text-100": { + "value": "9px", + "description": "Used by `--spectrum-helptext-bottom-to-text`.", + "control": "text", + "category": "Global" + }, + "spectrum-component-height-200": { + "value": "40px", + "description": "Used by `--spectrum-helptext-min-height`.", + "control": "text", + "category": "Global" + }, + "spectrum-workflow-icon-size-300": { + "value": "26px", + "description": "Used by `--spectrum-helptext-icon-size`.", + "control": "text", + "category": "Global" + }, + "spectrum-font-size-200": { + "value": "16px", + "description": "Used by `--spectrum-helptext-font-size`.", + "control": "text", + "category": "Global" + }, + "spectrum-text-to-visual-200": { + "value": "7px", + "description": "Used by `--spectrum-helptext-text-to-visual`.", + "control": "text", + "category": "Global" + }, + "spectrum-component-top-to-text-200": { + "value": "9px", + "description": "Used by `--spectrum-helptext-top-to-text`.", + "control": "text", + "category": "Global" + }, + "spectrum-component-bottom-to-text-200": { + "value": "11px", + "description": "Used by `--spectrum-helptext-bottom-to-text`.", + "control": "text", + "category": "Global" + }, + "spectrum-negative-color-900": { + "value": "var(--spectrum-red-900)", + "description": "Used by `--spectrum-helptext-content-color-default`, `--spectrum-helptext-icon-color-default`.", + "control": "color", + "category": "Global" + }, + "spectrum-disabled-content-color": { + "value": "var(--spectrum-gray-400)", + "description": "Used by `--spectrum-helptext-content-color-default`, `--spectrum-helptext-icon-color-default`.", + "control": "color", + "category": "Global" + }, + "spectrum-cjk-line-height-100": { + "value": "1.5", + "description": "Used by `--mod-helptext-line-height`.", + "control": "text", + "category": "Global" + }, + "spectrum-line-height-100": { + "value": "1.3", + "description": "Used by `.spectrum-HelpText .spectrum-HelpText-text`.", + "control": "text", + "category": "Global" + } + }, + "system-theme": {}, + "passthroughs": {}, + "high-contrast": { + "highcontrast-helptext-content-color-default": { + "value": "var(--mod-helptext-content-color-default, var(--spectrum-helptext-content-color-default))", + "description": "Defined in `.spectrum-HelpText`.
Used by `.spectrum-HelpText`, `.spectrum-HelpText.spectrum-HelpText--neutral .spectrum-HelpText-text`, `.spectrum-HelpText.spectrum-HelpText--negative .spectrum-HelpText-text`, `.spectrum-HelpText.is-disabled .spectrum-HelpText-text`.
Defaults to `var(--mod-helptext-content-color-default, var(--spectrum-helptext-content-color-default))`, if not set.", + "control": "color" + }, + "highcontrast-helptext-icon-color-default": { + "value": "var(--mod-helptext-icon-color-default, var(--spectrum-helptext-icon-color-default))", + "description": "Defined in `.spectrum-HelpText`.
Used by `.spectrum-HelpText.spectrum-HelpText--neutral .spectrum-HelpText-validationIcon`, `.spectrum-HelpText.spectrum-HelpText--negative .spectrum-HelpText-validationIcon`, `.spectrum-HelpText.is-disabled .spectrum-HelpText-validationIcon`.
Defaults to `var(--mod-helptext-icon-color-default, var(--spectrum-helptext-icon-color-default))`, if not set.", + "control": "color" + } + } } diff --git a/components/helptext/stories/helptext.stories.js b/components/helptext/stories/helptext.stories.js index 5274cec9f78..90f89cb81e6 100644 --- a/components/helptext/stories/helptext.stories.js +++ b/components/helptext/stories/helptext.stories.js @@ -1,11 +1,13 @@ import { Sizes } from "@spectrum-css/preview/decorators"; import { disableDefaultModes } from "@spectrum-css/preview/modes"; import { isDisabled, size } from "@spectrum-css/preview/types"; -import metadata from "../dist/metadata.json"; -import packageJson from "../package.json"; import { HelpTextGroup } from "./helptext.test.js"; import { NegativeTemplate, Template, VariantsTemplate } from "./template.js"; +// Local assets to render the component styles and structure +import metadata from "../dist/metadata.json"; +import packageJson from "../package.json"; + /** * Help text provides either an informative description or an error message that gives more context about what a user needs to input. It's commonly used in forms. */ @@ -63,6 +65,7 @@ export default { }, packageJson, metadata, + cssprops: metadata.modifiers, }, }; diff --git a/components/helptext/stories/template.js b/components/helptext/stories/template.js index 74fa628ae2a..8b08ceabaab 100644 --- a/components/helptext/stories/template.js +++ b/components/helptext/stories/template.js @@ -15,7 +15,7 @@ export const Template = ({ hideIcon = false, text, variant, - id = getRandomId("helptext"), + id = getRandomId("help-text"), customClasses = [], customStyles = {}, } = {}, context = {}) => { diff --git a/components/icon/dist/metadata.json b/components/icon/dist/metadata.json index 7f5d27e3789..c5539bdbfde 100644 --- a/components/icon/dist/metadata.json +++ b/components/icon/dist/metadata.json @@ -101,76 +101,383 @@ ".spectrum-UIIcon-Dash600", ".spectrum-UIIcon-Dash75" ], - "modifiers": [ - "--mod-icon-block-size", - "--mod-icon-color", - "--mod-icon-inline-size", - "--mod-icon-size", - "--mod-ui-icon-large-display", - "--mod-ui-icon-medium-display" - ], - "component": [ - "--spectrum-icon-block-size", - "--spectrum-icon-inline-size", - "--spectrum-icon-size" - ], - "global": [ - "--spectrum-arrow-icon-size-100", - "--spectrum-arrow-icon-size-200", - "--spectrum-arrow-icon-size-300", - "--spectrum-arrow-icon-size-400", - "--spectrum-arrow-icon-size-500", - "--spectrum-arrow-icon-size-600", - "--spectrum-arrow-icon-size-75", - "--spectrum-asterisk-icon-size-100", - "--spectrum-asterisk-icon-size-200", - "--spectrum-asterisk-icon-size-300", - "--spectrum-asterisk-icon-size-75", - "--spectrum-checkmark-icon-size-100", - "--spectrum-checkmark-icon-size-200", - "--spectrum-checkmark-icon-size-300", - "--spectrum-checkmark-icon-size-400", - "--spectrum-checkmark-icon-size-50", - "--spectrum-checkmark-icon-size-500", - "--spectrum-checkmark-icon-size-600", - "--spectrum-checkmark-icon-size-75", - "--spectrum-chevron-icon-size-100", - "--spectrum-chevron-icon-size-200", - "--spectrum-chevron-icon-size-300", - "--spectrum-chevron-icon-size-400", - "--spectrum-chevron-icon-size-50", - "--spectrum-chevron-icon-size-500", - "--spectrum-chevron-icon-size-75", - "--spectrum-corner-triangle-icon-size-100", - "--spectrum-corner-triangle-icon-size-200", - "--spectrum-corner-triangle-icon-size-300", - "--spectrum-corner-triangle-icon-size-75", - "--spectrum-cross-icon-size-100", - "--spectrum-cross-icon-size-200", - "--spectrum-cross-icon-size-300", - "--spectrum-cross-icon-size-400", - "--spectrum-cross-icon-size-500", - "--spectrum-cross-icon-size-600", - "--spectrum-cross-icon-size-75", - "--spectrum-dash-icon-size-100", - "--spectrum-dash-icon-size-200", - "--spectrum-dash-icon-size-300", - "--spectrum-dash-icon-size-400", - "--spectrum-dash-icon-size-50", - "--spectrum-dash-icon-size-500", - "--spectrum-dash-icon-size-600", - "--spectrum-dash-icon-size-75", - "--spectrum-ui-icon-large-display", - "--spectrum-ui-icon-medium-display", - "--spectrum-workflow-icon-size-100", - "--spectrum-workflow-icon-size-200", - "--spectrum-workflow-icon-size-300", - "--spectrum-workflow-icon-size-50", - "--spectrum-workflow-icon-size-75", - "--spectrum-workflow-icon-size-xxl", - "--spectrum-workflow-icon-size-xxs" - ], - "system-theme": [], - "passthroughs": [], - "high-contrast": [] + "modifiers": { + "mod-icon-inline-size": { + "value": "var(--mod-icon-size, var(--spectrum-icon-size))", + "description": "Used by `--spectrum-icon-inline-size`.
Defaults to `var(--mod-icon-size, var(--spectrum-icon-size))`, if not set.", + "control": "text", + "category": "Modifier" + }, + "mod-icon-size": { + "value": "var(--spectrum-icon-size)", + "description": "Used by `--spectrum-icon-inline-size`, `--spectrum-icon-block-size`.
Defaults to `var(--spectrum-icon-size)`, if not set.", + "control": "text", + "category": "Modifier" + }, + "mod-icon-block-size": { + "value": "var(--mod-icon-size, var(--spectrum-icon-size))", + "description": "Used by `--spectrum-icon-block-size`.
Defaults to `var(--mod-icon-size, var(--spectrum-icon-size))`, if not set.", + "control": "text", + "category": "Modifier" + }, + "mod-icon-color": { + "description": "Used by `.spectrum-Icon, .spectrum-UIIcon`.", + "control": "color", + "category": "Modifier" + }, + "mod-ui-icon-medium-display": { + "value": "var(--spectrum-ui-icon-medium-display, block)", + "description": "Used by `.spectrum-UIIcon--medium`.
Defaults to `var(--spectrum-ui-icon-medium-display, block)`, if not set.", + "control": "text", + "category": "Modifier" + }, + "mod-ui-icon-large-display": { + "value": "var(--spectrum-ui-icon-large-display, none)", + "description": "Used by `.spectrum-UIIcon--large`.
Defaults to `var(--spectrum-ui-icon-large-display, none)`, if not set.", + "control": "text", + "category": "Modifier" + } + }, + "component": { + "spectrum-icon-inline-size": { + "description": "Defined in `.spectrum-Icon, .spectrum-UIIcon`.
Used by `.spectrum-Icon, .spectrum-UIIcon`, `.spectrum-Icon img, .spectrum-Icon svg`.", + "control": "text", + "category": "Component" + }, + "spectrum-icon-size": { + "description": "Defined in `.spectrum-Icon`, `.spectrum-Icon--sizeXXS`, `.spectrum-Icon--sizeXS`, `.spectrum-Icon--sizeS`, `.spectrum-Icon--sizeL`, `.spectrum-Icon--sizeXL`, `.spectrum-Icon--sizeXXL`, `.spectrum-UIIcon-ChevronRight50`, `.spectrum-UIIcon-ChevronRight75`, `.spectrum-UIIcon-ChevronRight100`, `.spectrum-UIIcon-ChevronRight200`, `.spectrum-UIIcon-ChevronRight300`, `.spectrum-UIIcon-ChevronRight400`, `.spectrum-UIIcon-ChevronRight500`, `.spectrum-UIIcon-ChevronDown50`, `.spectrum-UIIcon-ChevronDown75`, `.spectrum-UIIcon-ChevronDown100`, `.spectrum-UIIcon-ChevronDown200`, `.spectrum-UIIcon-ChevronDown300`, `.spectrum-UIIcon-ChevronDown400`, `.spectrum-UIIcon-ChevronDown500`, `.spectrum-UIIcon-ChevronLeft50`, `.spectrum-UIIcon-ChevronLeft75`, `.spectrum-UIIcon-ChevronLeft100`, `.spectrum-UIIcon-ChevronLeft200`, `.spectrum-UIIcon-ChevronLeft300`, `.spectrum-UIIcon-ChevronLeft400`, `.spectrum-UIIcon-ChevronLeft500`, `.spectrum-UIIcon-ChevronUp50`, `.spectrum-UIIcon-ChevronUp75`, `.spectrum-UIIcon-ChevronUp100`, `.spectrum-UIIcon-ChevronUp200`, `.spectrum-UIIcon-ChevronUp300`, `.spectrum-UIIcon-ChevronUp400`, `.spectrum-UIIcon-ChevronUp500`, `.spectrum-UIIcon-ArrowRight75`, `.spectrum-UIIcon-ArrowRight100`, `.spectrum-UIIcon-ArrowRight200`, `.spectrum-UIIcon-ArrowRight300`, `.spectrum-UIIcon-ArrowRight400`, `.spectrum-UIIcon-ArrowRight500`, `.spectrum-UIIcon-ArrowRight600`, `.spectrum-UIIcon-ArrowDown75`, `.spectrum-UIIcon-ArrowDown100`, `.spectrum-UIIcon-ArrowDown200`, `.spectrum-UIIcon-ArrowDown300`, `.spectrum-UIIcon-ArrowDown400`, `.spectrum-UIIcon-ArrowDown500`, `.spectrum-UIIcon-ArrowDown600`, `.spectrum-UIIcon-ArrowLeft75`, `.spectrum-UIIcon-ArrowLeft100`, `.spectrum-UIIcon-ArrowLeft200`, `.spectrum-UIIcon-ArrowLeft300`, `.spectrum-UIIcon-ArrowLeft400`, `.spectrum-UIIcon-ArrowLeft500`, `.spectrum-UIIcon-ArrowLeft600`, `.spectrum-UIIcon-ArrowUp75`, `.spectrum-UIIcon-ArrowUp100`, `.spectrum-UIIcon-ArrowUp200`, `.spectrum-UIIcon-ArrowUp300`, `.spectrum-UIIcon-ArrowUp400`, `.spectrum-UIIcon-ArrowUp500`, `.spectrum-UIIcon-ArrowUp600`, `.spectrum-UIIcon-Checkmark50`, `.spectrum-UIIcon-Checkmark75`, `.spectrum-UIIcon-Checkmark100`, `.spectrum-UIIcon-Checkmark200`, `.spectrum-UIIcon-Checkmark300`, `.spectrum-UIIcon-Checkmark400`, `.spectrum-UIIcon-Checkmark500`, `.spectrum-UIIcon-Checkmark600`, `.spectrum-UIIcon-Dash50`, `.spectrum-UIIcon-Dash75`, `.spectrum-UIIcon-Dash100`, `.spectrum-UIIcon-Dash200`, `.spectrum-UIIcon-Dash300`, `.spectrum-UIIcon-Dash400`, `.spectrum-UIIcon-Dash500`, `.spectrum-UIIcon-Dash600`, `.spectrum-UIIcon-Cross75`, `.spectrum-UIIcon-Cross100`, `.spectrum-UIIcon-Cross200`, `.spectrum-UIIcon-Cross300`, `.spectrum-UIIcon-Cross400`, `.spectrum-UIIcon-Cross500`, `.spectrum-UIIcon-Cross600`, `.spectrum-UIIcon-CornerTriangle75`, `.spectrum-UIIcon-CornerTriangle100`, `.spectrum-UIIcon-CornerTriangle200`, `.spectrum-UIIcon-CornerTriangle300`, `.spectrum-UIIcon-Asterisk75`, `.spectrum-UIIcon-Asterisk100`, `.spectrum-UIIcon-Asterisk200`, `.spectrum-UIIcon-Asterisk300`.
Used by `--spectrum-icon-inline-size`, `--spectrum-icon-block-size`.", + "control": "text", + "category": "Component" + }, + "spectrum-icon-block-size": { + "description": "Defined in `.spectrum-Icon, .spectrum-UIIcon`.
Used by `.spectrum-Icon, .spectrum-UIIcon`, `.spectrum-Icon img, .spectrum-Icon svg`.", + "control": "text", + "category": "Component" + } + }, + "global": { + "spectrum-workflow-icon-size-100": { + "value": "20px", + "description": "Used by `--spectrum-icon-size`.", + "control": "text", + "category": "Global" + }, + "spectrum-workflow-icon-size-xxs": { + "description": "Used by `--spectrum-icon-size`.", + "control": "text", + "category": "Global" + }, + "spectrum-workflow-icon-size-50": { + "value": "14px", + "description": "Used by `--spectrum-icon-size`.", + "control": "text", + "category": "Global" + }, + "spectrum-workflow-icon-size-75": { + "value": "16px", + "description": "Used by `--spectrum-icon-size`.", + "control": "text", + "category": "Global" + }, + "spectrum-workflow-icon-size-200": { + "value": "22px", + "description": "Used by `--spectrum-icon-size`.", + "control": "text", + "category": "Global" + }, + "spectrum-workflow-icon-size-300": { + "value": "26px", + "description": "Used by `--spectrum-icon-size`.", + "control": "text", + "category": "Global" + }, + "spectrum-workflow-icon-size-xxl": { + "description": "Used by `--spectrum-icon-size`.", + "control": "text", + "category": "Global" + }, + "spectrum-ui-icon-medium-display": { + "description": "Used by `.spectrum-UIIcon--medium`.", + "control": "text", + "category": "Global" + }, + "spectrum-ui-icon-large-display": { + "description": "Used by `.spectrum-UIIcon--large`.", + "control": "text", + "category": "Global" + }, + "spectrum-chevron-icon-size-50": { + "value": "6px", + "description": "Used by `--spectrum-icon-size`.", + "control": "text", + "category": "Global" + }, + "spectrum-chevron-icon-size-75": { + "value": "10px", + "description": "Used by `--spectrum-icon-size`.", + "control": "text", + "category": "Global" + }, + "spectrum-chevron-icon-size-100": { + "value": "10px", + "description": "Used by `--spectrum-icon-size`.", + "control": "text", + "category": "Global" + }, + "spectrum-chevron-icon-size-200": { + "value": "12px", + "description": "Used by `--spectrum-icon-size`.", + "control": "text", + "category": "Global" + }, + "spectrum-chevron-icon-size-300": { + "value": "14px", + "description": "Used by `--spectrum-icon-size`.", + "control": "text", + "category": "Global" + }, + "spectrum-chevron-icon-size-400": { + "value": "16px", + "description": "Used by `--spectrum-icon-size`.", + "control": "text", + "category": "Global" + }, + "spectrum-chevron-icon-size-500": { + "value": "16px", + "description": "Used by `--spectrum-icon-size`.", + "control": "text", + "category": "Global" + }, + "spectrum-arrow-icon-size-75": { + "value": "10px", + "description": "Used by `--spectrum-icon-size`.", + "control": "text", + "category": "Global" + }, + "spectrum-arrow-icon-size-100": { + "value": "10px", + "description": "Used by `--spectrum-icon-size`.", + "control": "text", + "category": "Global" + }, + "spectrum-arrow-icon-size-200": { + "value": "12px", + "description": "Used by `--spectrum-icon-size`.", + "control": "text", + "category": "Global" + }, + "spectrum-arrow-icon-size-300": { + "value": "14px", + "description": "Used by `--spectrum-icon-size`.", + "control": "text", + "category": "Global" + }, + "spectrum-arrow-icon-size-400": { + "value": "16px", + "description": "Used by `--spectrum-icon-size`.", + "control": "text", + "category": "Global" + }, + "spectrum-arrow-icon-size-500": { + "value": "18px", + "description": "Used by `--spectrum-icon-size`.", + "control": "text", + "category": "Global" + }, + "spectrum-arrow-icon-size-600": { + "value": "20px", + "description": "Used by `--spectrum-icon-size`.", + "control": "text", + "category": "Global" + }, + "spectrum-checkmark-icon-size-50": { + "value": "10px", + "description": "Used by `--spectrum-icon-size`.", + "control": "text", + "category": "Global" + }, + "spectrum-checkmark-icon-size-75": { + "value": "10px", + "description": "Used by `--spectrum-icon-size`.", + "control": "text", + "category": "Global" + }, + "spectrum-checkmark-icon-size-100": { + "value": "10px", + "description": "Used by `--spectrum-icon-size`.", + "control": "text", + "category": "Global" + }, + "spectrum-checkmark-icon-size-200": { + "value": "12px", + "description": "Used by `--spectrum-icon-size`.", + "control": "text", + "category": "Global" + }, + "spectrum-checkmark-icon-size-300": { + "value": "14px", + "description": "Used by `--spectrum-icon-size`.", + "control": "text", + "category": "Global" + }, + "spectrum-checkmark-icon-size-400": { + "value": "16px", + "description": "Used by `--spectrum-icon-size`.", + "control": "text", + "category": "Global" + }, + "spectrum-checkmark-icon-size-500": { + "value": "16px", + "description": "Used by `--spectrum-icon-size`.", + "control": "text", + "category": "Global" + }, + "spectrum-checkmark-icon-size-600": { + "value": "18px", + "description": "Used by `--spectrum-icon-size`.", + "control": "text", + "category": "Global" + }, + "spectrum-dash-icon-size-50": { + "value": "8px", + "description": "Used by `--spectrum-icon-size`.", + "control": "text", + "category": "Global" + }, + "spectrum-dash-icon-size-75": { + "value": "8px", + "description": "Used by `--spectrum-icon-size`.", + "control": "text", + "category": "Global" + }, + "spectrum-dash-icon-size-100": { + "value": "10px", + "description": "Used by `--spectrum-icon-size`.", + "control": "text", + "category": "Global" + }, + "spectrum-dash-icon-size-200": { + "value": "12px", + "description": "Used by `--spectrum-icon-size`.", + "control": "text", + "category": "Global" + }, + "spectrum-dash-icon-size-300": { + "value": "12px", + "description": "Used by `--spectrum-icon-size`.", + "control": "text", + "category": "Global" + }, + "spectrum-dash-icon-size-400": { + "value": "14px", + "description": "Used by `--spectrum-icon-size`.", + "control": "text", + "category": "Global" + }, + "spectrum-dash-icon-size-500": { + "value": "16px", + "description": "Used by `--spectrum-icon-size`.", + "control": "text", + "category": "Global" + }, + "spectrum-dash-icon-size-600": { + "value": "18px", + "description": "Used by `--spectrum-icon-size`.", + "control": "text", + "category": "Global" + }, + "spectrum-cross-icon-size-75": { + "value": "8px", + "description": "Used by `--spectrum-icon-size`.", + "control": "text", + "category": "Global" + }, + "spectrum-cross-icon-size-100": { + "value": "8px", + "description": "Used by `--spectrum-icon-size`.", + "control": "text", + "category": "Global" + }, + "spectrum-cross-icon-size-200": { + "value": "10px", + "description": "Used by `--spectrum-icon-size`.", + "control": "text", + "category": "Global" + }, + "spectrum-cross-icon-size-300": { + "value": "12px", + "description": "Used by `--spectrum-icon-size`.", + "control": "text", + "category": "Global" + }, + "spectrum-cross-icon-size-400": { + "value": "12px", + "description": "Used by `--spectrum-icon-size`.", + "control": "text", + "category": "Global" + }, + "spectrum-cross-icon-size-500": { + "value": "14px", + "description": "Used by `--spectrum-icon-size`.", + "control": "text", + "category": "Global" + }, + "spectrum-cross-icon-size-600": { + "value": "16px", + "description": "Used by `--spectrum-icon-size`.", + "control": "text", + "category": "Global" + }, + "spectrum-corner-triangle-icon-size-75": { + "value": "5px", + "description": "Used by `--spectrum-icon-size`.", + "control": "text", + "category": "Global" + }, + "spectrum-corner-triangle-icon-size-100": { + "value": "5px", + "description": "Used by `--spectrum-icon-size`.", + "control": "text", + "category": "Global" + }, + "spectrum-corner-triangle-icon-size-200": { + "value": "6px", + "description": "Used by `--spectrum-icon-size`.", + "control": "text", + "category": "Global" + }, + "spectrum-corner-triangle-icon-size-300": { + "value": "7px", + "description": "Used by `--spectrum-icon-size`.", + "control": "text", + "category": "Global" + }, + "spectrum-asterisk-icon-size-75": { + "value": "8px", + "description": "Used by `--spectrum-icon-size`.", + "control": "text", + "category": "Global" + }, + "spectrum-asterisk-icon-size-100": { + "value": "8px", + "description": "Used by `--spectrum-icon-size`.", + "control": "text", + "category": "Global" + }, + "spectrum-asterisk-icon-size-200": { + "value": "10px", + "description": "Used by `--spectrum-icon-size`.", + "control": "text", + "category": "Global" + }, + "spectrum-asterisk-icon-size-300": { + "value": "10px", + "description": "Used by `--spectrum-icon-size`.", + "control": "text", + "category": "Global" + } + }, + "system-theme": {}, + "passthroughs": {}, + "high-contrast": {} } diff --git a/components/icon/stories/icon.stories.js b/components/icon/stories/icon.stories.js index da5fc2cda00..3979a37e667 100644 --- a/components/icon/stories/icon.stories.js +++ b/components/icon/stories/icon.stories.js @@ -1,12 +1,14 @@ +import { Sizes } from "@spectrum-css/preview/decorators"; import { disableDefaultModes } from "@spectrum-css/preview/modes"; import { size } from "@spectrum-css/preview/types"; -import { Sizes } from "@spectrum-css/preview/decorators"; -import metadata from "../dist/metadata.json"; -import packageJson from "../package.json"; import { IconGroup } from "./icon.test.js"; import { IconListTemplate, Template, UIDefaultTemplate } from "./template.js"; import { uiIconSizes, uiIconsWithDirections, workflowIcons } from "./utilities.js"; +// Local assets to render the component styles and structure +import metadata from "../dist/metadata.json"; +import packageJson from "../package.json"; + /** * Create a list of all UI Icons with their sizing numbers. * @@ -102,6 +104,7 @@ export default { parameters: { packageJson, metadata, + cssprops: metadata.modifiers, }, }; diff --git a/components/illustratedmessage/dist/metadata.json b/components/illustratedmessage/dist/metadata.json index 24de798ac33..1eae59915e0 100644 --- a/components/illustratedmessage/dist/metadata.json +++ b/components/illustratedmessage/dist/metadata.json @@ -10,76 +10,358 @@ ".spectrum-IllustratedMessage:lang(ko)", ".spectrum-IllustratedMessage:lang(zh)" ], - "modifiers": [ - "--mod-illustrated-message-content-maximum-width", - "--mod-illustrated-message-description-color", - "--mod-illustrated-message-description-font-family", - "--mod-illustrated-message-description-font-size", - "--mod-illustrated-message-description-font-style", - "--mod-illustrated-message-description-font-weight", - "--mod-illustrated-message-description-line-height", - "--mod-illustrated-message-description-max-inline-size", - "--mod-illustrated-message-description-pointer-events", - "--mod-illustrated-message-description-position", - "--mod-illustrated-message-description-z-index", - "--mod-illustrated-message-display", - "--mod-illustrated-message-heading-max-inline-size", - "--mod-illustrated-message-heading-to-body", - "--mod-illustrated-message-heading-to-description", - "--mod-illustrated-message-illustration-accent-color", - "--mod-illustrated-message-illustration-color", - "--mod-illustrated-message-pointer-events", - "--mod-illustrated-message-title-color", - "--mod-illustrated-message-title-font-family", - "--mod-illustrated-message-title-font-size", - "--mod-illustrated-message-title-font-style", - "--mod-illustrated-message-title-font-weight", - "--mod-illustrated-message-title-line-height", - "--mod-illustrated-message-title-to-heading" - ], - "component": [ - "--spectrum-illustrated-message-body-size", - "--spectrum-illustrated-message-cjk-title-size", - "--spectrum-illustrated-message-description-color", - "--spectrum-illustrated-message-description-font-family", - "--spectrum-illustrated-message-description-font-size", - "--spectrum-illustrated-message-description-font-style", - "--spectrum-illustrated-message-description-font-weight", - "--spectrum-illustrated-message-description-line-height", - "--spectrum-illustrated-message-description-max-inline-size", - "--spectrum-illustrated-message-heading-max-inline-size", - "--spectrum-illustrated-message-heading-to-description", - "--spectrum-illustrated-message-illustration-accent-color", - "--spectrum-illustrated-message-illustration-color", - "--spectrum-illustrated-message-maximum-width", - "--spectrum-illustrated-message-title-color", - "--spectrum-illustrated-message-title-font-family", - "--spectrum-illustrated-message-title-font-size", - "--spectrum-illustrated-message-title-font-style", - "--spectrum-illustrated-message-title-font-weight", - "--spectrum-illustrated-message-title-line-height", - "--spectrum-illustrated-message-title-size", - "--spectrum-illustrated-message-title-to-heading" - ], - "global": [ - "--spectrum-accent-visual-color", - "--spectrum-body-color", - "--spectrum-body-line-height", - "--spectrum-body-sans-serif-font-style", - "--spectrum-body-sans-serif-font-weight", - "--spectrum-heading-color", - "--spectrum-heading-line-height", - "--spectrum-heading-sans-serif-font-style", - "--spectrum-heading-sans-serif-font-weight", - "--spectrum-neutral-visual-color", - "--spectrum-sans-font-family-stack", - "--spectrum-spacing-400", - "--spectrum-spacing-75" - ], - "system-theme": [], - "passthroughs": [], - "high-contrast": [ - "--highcontrast-illustrated-message-illustration-accent-color", - "--highcontrast-illustrated-message-illustration-color" - ] + "modifiers": { + "mod-illustrated-message-display": { + "description": "Used by `.spectrum-IllustratedMessage`.", + "control": "text", + "category": "Modifier" + }, + "mod-illustrated-message-pointer-events": { + "description": "Used by `.spectrum-IllustratedMessage`.", + "control": "text", + "category": "Modifier" + }, + "mod-illustrated-message-content-maximum-width": { + "description": "Used by `.spectrum-IllustratedMessage`.", + "control": "text", + "category": "Modifier" + }, + "mod-illustrated-message-title-to-heading": { + "value": "var(--spectrum-illustrated-message-title-to-heading)", + "description": "Used by `.spectrum-IllustratedMessage-illustration`.
Defaults to `var(--spectrum-illustrated-message-title-to-heading)`, if not set.", + "control": "text", + "category": "Modifier" + }, + "mod-illustrated-message-illustration-color": { + "value": "var(--spectrum-illustrated-message-illustration-color)", + "description": "Used by `.spectrum-IllustratedMessage-illustration`.
Defaults to `var(--spectrum-illustrated-message-illustration-color)`, if not set.", + "control": "color", + "category": "Modifier" + }, + "mod-illustrated-message-illustration-accent-color": { + "value": "var(--spectrum-illustrated-message-illustration-accent-color)", + "description": "Used by `.spectrum-IllustratedMessage-accent`.
Defaults to `var(--spectrum-illustrated-message-illustration-accent-color)`, if not set.", + "control": "color", + "category": "Modifier" + }, + "mod-illustrated-message-title-font-family": { + "value": "var(--spectrum-illustrated-message-title-font-family)", + "description": "Used by `.spectrum-IllustratedMessage-heading`.
Defaults to `var(--spectrum-illustrated-message-title-font-family)`, if not set.", + "control": "text", + "category": "Modifier" + }, + "mod-illustrated-message-title-font-weight": { + "value": "var(--spectrum-illustrated-message-title-font-weight)", + "description": "Used by `.spectrum-IllustratedMessage-heading`.
Defaults to `var(--spectrum-illustrated-message-title-font-weight)`, if not set.", + "control": "text", + "category": "Modifier" + }, + "mod-illustrated-message-title-font-style": { + "value": "var(--spectrum-illustrated-message-title-font-style)", + "description": "Used by `.spectrum-IllustratedMessage-heading`.
Defaults to `var(--spectrum-illustrated-message-title-font-style)`, if not set.", + "control": "text", + "category": "Modifier" + }, + "mod-illustrated-message-title-font-size": { + "value": "var(--spectrum-illustrated-message-title-font-size)", + "description": "Used by `.spectrum-IllustratedMessage-heading`.
Defaults to `var(--spectrum-illustrated-message-title-font-size)`, if not set.", + "control": "text", + "category": "Modifier" + }, + "mod-illustrated-message-title-line-height": { + "value": "var(--spectrum-illustrated-message-title-line-height)", + "description": "Used by `.spectrum-IllustratedMessage-heading`.
Defaults to `var(--spectrum-illustrated-message-title-line-height)`, if not set.", + "control": "text", + "category": "Modifier" + }, + "mod-illustrated-message-title-color": { + "value": "var(--spectrum-illustrated-message-title-color)", + "description": "Used by `.spectrum-IllustratedMessage-heading`.
Defaults to `var(--spectrum-illustrated-message-title-color)`, if not set.", + "control": "color", + "category": "Modifier" + }, + "mod-illustrated-message-heading-max-inline-size": { + "value": "var(--spectrum-illustrated-message-heading-max-inline-size)", + "description": "Used by `.spectrum-IllustratedMessage-heading`.
Defaults to `var(--spectrum-illustrated-message-heading-max-inline-size)`, if not set.", + "control": "text", + "category": "Modifier" + }, + "mod-illustrated-message-heading-to-body": { + "description": "Used by `.spectrum-IllustratedMessage-heading`.", + "control": "text", + "category": "Modifier" + }, + "mod-illustrated-message-description-position": { + "description": "Used by `.spectrum-IllustratedMessage-description`.", + "control": "text", + "category": "Modifier" + }, + "mod-illustrated-message-description-z-index": { + "description": "Used by `.spectrum-IllustratedMessage-description`.", + "control": "text", + "category": "Modifier" + }, + "mod-illustrated-message-description-pointer-events": { + "description": "Used by `.spectrum-IllustratedMessage-description`.", + "control": "text", + "category": "Modifier" + }, + "mod-illustrated-message-description-font-family": { + "value": "var(--spectrum-illustrated-message-description-font-family)", + "description": "Used by `.spectrum-IllustratedMessage-description`.
Defaults to `var(--spectrum-illustrated-message-description-font-family)`, if not set.", + "control": "text", + "category": "Modifier" + }, + "mod-illustrated-message-description-font-weight": { + "value": "var(--spectrum-illustrated-message-description-font-weight)", + "description": "Used by `.spectrum-IllustratedMessage-description`.
Defaults to `var(--spectrum-illustrated-message-description-font-weight)`, if not set.", + "control": "text", + "category": "Modifier" + }, + "mod-illustrated-message-description-font-style": { + "value": "var(--spectrum-illustrated-message-description-font-style)", + "description": "Used by `.spectrum-IllustratedMessage-description`.
Defaults to `var(--spectrum-illustrated-message-description-font-style)`, if not set.", + "control": "text", + "category": "Modifier" + }, + "mod-illustrated-message-description-font-size": { + "value": "var(--spectrum-illustrated-message-description-font-size)", + "description": "Used by `.spectrum-IllustratedMessage-description`.
Defaults to `var(--spectrum-illustrated-message-description-font-size)`, if not set.", + "control": "text", + "category": "Modifier" + }, + "mod-illustrated-message-description-line-height": { + "value": "var(--spectrum-illustrated-message-description-line-height)", + "description": "Used by `.spectrum-IllustratedMessage-description`.
Defaults to `var(--spectrum-illustrated-message-description-line-height)`, if not set.", + "control": "text", + "category": "Modifier" + }, + "mod-illustrated-message-description-color": { + "value": "var(--spectrum-illustrated-message-description-color)", + "description": "Used by `.spectrum-IllustratedMessage-description`.
Defaults to `var(--spectrum-illustrated-message-description-color)`, if not set.", + "control": "color", + "category": "Modifier" + }, + "mod-illustrated-message-description-max-inline-size": { + "value": "var(--spectrum-illustrated-message-description-max-inline-size)", + "description": "Used by `.spectrum-IllustratedMessage-description`.
Defaults to `var(--spectrum-illustrated-message-description-max-inline-size)`, if not set.", + "control": "text", + "category": "Modifier" + }, + "mod-illustrated-message-heading-to-description": { + "value": "var(--spectrum-illustrated-message-heading-to-description)", + "description": "Used by `.spectrum-IllustratedMessage-description`.
Defaults to `var(--spectrum-illustrated-message-heading-to-description)`, if not set.", + "control": "text", + "category": "Modifier" + } + }, + "component": { + "spectrum-illustrated-message-description-max-inline-size": { + "description": "Defined in `.spectrum-IllustratedMessage`.
Used by `.spectrum-IllustratedMessage-description`.", + "control": "text", + "category": "Component" + }, + "spectrum-illustrated-message-maximum-width": { + "value": "380px", + "description": "Used by `--spectrum-illustrated-message-description-max-inline-size`, `--spectrum-illustrated-message-heading-max-inline-size`.", + "control": "text", + "category": "Component" + }, + "spectrum-illustrated-message-heading-max-inline-size": { + "description": "Defined in `.spectrum-IllustratedMessage`.
Used by `.spectrum-IllustratedMessage-heading`.", + "control": "text", + "category": "Component" + }, + "spectrum-illustrated-message-title-to-heading": { + "description": "Defined in `.spectrum-IllustratedMessage`.
Used by `.spectrum-IllustratedMessage-illustration`.", + "control": "text", + "category": "Component" + }, + "spectrum-illustrated-message-heading-to-description": { + "description": "Defined in `.spectrum-IllustratedMessage`.
Used by `.spectrum-IllustratedMessage-description`.", + "control": "text", + "category": "Component" + }, + "spectrum-illustrated-message-illustration-color": { + "description": "Defined in `.spectrum-IllustratedMessage`.
Used by `.spectrum-IllustratedMessage-illustration`.", + "control": "color", + "category": "Component" + }, + "spectrum-illustrated-message-illustration-accent-color": { + "description": "Defined in `.spectrum-IllustratedMessage`.
Used by `.spectrum-IllustratedMessage-accent`.", + "control": "color", + "category": "Component" + }, + "spectrum-illustrated-message-title-font-family": { + "description": "Defined in `.spectrum-IllustratedMessage`.
Used by `.spectrum-IllustratedMessage-heading`.", + "control": "text", + "category": "Component" + }, + "spectrum-illustrated-message-title-font-weight": { + "description": "Defined in `.spectrum-IllustratedMessage`.
Used by `.spectrum-IllustratedMessage-heading`.", + "control": "text", + "category": "Component" + }, + "spectrum-illustrated-message-title-font-style": { + "description": "Defined in `.spectrum-IllustratedMessage`.
Used by `.spectrum-IllustratedMessage-heading`.", + "control": "text", + "category": "Component" + }, + "spectrum-illustrated-message-title-font-size": { + "description": "Defined in `.spectrum-IllustratedMessage`, `.spectrum-IllustratedMessage:lang(ja), .spectrum-IllustratedMessage:lang(ko), .spectrum-IllustratedMessage:lang(zh)`.
Used by `.spectrum-IllustratedMessage-heading`.", + "control": "text", + "category": "Component" + }, + "spectrum-illustrated-message-title-size": { + "value": "var(--spectrum-heading-size-s)", + "description": "Used by `--spectrum-illustrated-message-title-font-size`.", + "control": "text", + "category": "Component" + }, + "spectrum-illustrated-message-title-line-height": { + "description": "Defined in `.spectrum-IllustratedMessage`.
Used by `.spectrum-IllustratedMessage-heading`.", + "control": "text", + "category": "Component" + }, + "spectrum-illustrated-message-title-color": { + "description": "Defined in `.spectrum-IllustratedMessage`.
Used by `.spectrum-IllustratedMessage-heading`.", + "control": "color", + "category": "Component" + }, + "spectrum-illustrated-message-description-font-family": { + "description": "Defined in `.spectrum-IllustratedMessage`.
Used by `.spectrum-IllustratedMessage-description`.", + "control": "text", + "category": "Component" + }, + "spectrum-illustrated-message-description-font-weight": { + "description": "Defined in `.spectrum-IllustratedMessage`.
Used by `.spectrum-IllustratedMessage-description`.", + "control": "text", + "category": "Component" + }, + "spectrum-illustrated-message-description-font-style": { + "description": "Defined in `.spectrum-IllustratedMessage`.
Used by `.spectrum-IllustratedMessage-description`.", + "control": "text", + "category": "Component" + }, + "spectrum-illustrated-message-description-font-size": { + "description": "Defined in `.spectrum-IllustratedMessage`.
Used by `.spectrum-IllustratedMessage-description`.", + "control": "text", + "category": "Component" + }, + "spectrum-illustrated-message-body-size": { + "value": "var(--spectrum-body-size-xs)", + "description": "Used by `--spectrum-illustrated-message-description-font-size`.", + "control": "text", + "category": "Component" + }, + "spectrum-illustrated-message-description-line-height": { + "description": "Defined in `.spectrum-IllustratedMessage`.
Used by `.spectrum-IllustratedMessage-description`.", + "control": "text", + "category": "Component" + }, + "spectrum-illustrated-message-description-color": { + "description": "Defined in `.spectrum-IllustratedMessage`.
Used by `.spectrum-IllustratedMessage-description`.", + "control": "color", + "category": "Component" + }, + "spectrum-illustrated-message-cjk-title-size": { + "value": "var(--spectrum-heading-cjk-size-s)", + "description": "Used by `--spectrum-illustrated-message-title-font-size`.", + "control": "text", + "category": "Component" + } + }, + "global": { + "spectrum-spacing-400": { + "value": "24px", + "description": "Used by `--spectrum-illustrated-message-title-to-heading`.", + "control": "text", + "category": "Global" + }, + "spectrum-spacing-75": { + "value": "4px", + "description": "Used by `--spectrum-illustrated-message-heading-to-description`.", + "control": "text", + "category": "Global" + }, + "spectrum-neutral-visual-color": { + "value": "var(--spectrum-gray-600)", + "description": "Used by `--spectrum-illustrated-message-illustration-color`.", + "control": "color", + "category": "Global" + }, + "spectrum-accent-visual-color": { + "value": "var(--spectrum-accent-color-900)", + "description": "Used by `--spectrum-illustrated-message-illustration-accent-color`.", + "control": "color", + "category": "Global" + }, + "spectrum-sans-font-family-stack": { + "description": "Used by `--spectrum-illustrated-message-title-font-family`, `--spectrum-illustrated-message-description-font-family`.", + "control": "text", + "category": "Global" + }, + "spectrum-heading-sans-serif-font-weight": { + "value": "700", + "description": "Used by `--spectrum-illustrated-message-title-font-weight`.", + "control": "text", + "category": "Global" + }, + "spectrum-heading-sans-serif-font-style": { + "value": "normal", + "description": "Used by `--spectrum-illustrated-message-title-font-style`.", + "control": "text", + "category": "Global" + }, + "spectrum-heading-line-height": { + "value": "1.3", + "description": "Used by `--spectrum-illustrated-message-title-line-height`.", + "control": "text", + "category": "Global" + }, + "spectrum-heading-color": { + "value": "var(--spectrum-gray-900)", + "description": "Used by `--spectrum-illustrated-message-title-color`.", + "control": "color", + "category": "Global" + }, + "spectrum-body-sans-serif-font-weight": { + "value": "400", + "description": "Used by `--spectrum-illustrated-message-description-font-weight`.", + "control": "text", + "category": "Global" + }, + "spectrum-body-sans-serif-font-style": { + "value": "normal", + "description": "Used by `--spectrum-illustrated-message-description-font-style`.", + "control": "text", + "category": "Global" + }, + "spectrum-body-line-height": { + "value": "1.5", + "description": "Used by `--spectrum-illustrated-message-description-line-height`.", + "control": "text", + "category": "Global" + }, + "spectrum-body-color": { + "value": "var(--spectrum-gray-800)", + "description": "Used by `--spectrum-illustrated-message-description-color`.", + "control": "color", + "category": "Global" + } + }, + "system-theme": {}, + "passthroughs": {}, + "high-contrast": { + "highcontrast-illustrated-message-illustration-color": { + "value": "var(--mod-illustrated-message-illustration-color, var(--spectrum-illustrated-message-illustration-color))", + "description": "Defined in `.spectrum-IllustratedMessage`.
Used by `.spectrum-IllustratedMessage-illustration`.
Defaults to `var(--mod-illustrated-message-illustration-color, var(--spectrum-illustrated-message-illustration-color))`, if not set.", + "control": "color" + }, + "highcontrast-illustrated-message-illustration-accent-color": { + "value": "var(--mod-illustrated-message-illustration-accent-color, var(--spectrum-illustrated-message-illustration-accent-color))", + "description": "Defined in `.spectrum-IllustratedMessage`.
Used by `.spectrum-IllustratedMessage-accent`.
Defaults to `var(--mod-illustrated-message-illustration-accent-color, var(--spectrum-illustrated-message-illustration-accent-color))`, if not set.", + "control": "color" + } + } } diff --git a/components/illustratedmessage/stories/illustratedmessage.stories.js b/components/illustratedmessage/stories/illustratedmessage.stories.js index 2b00b063d31..eab2a41a78b 100644 --- a/components/illustratedmessage/stories/illustratedmessage.stories.js +++ b/components/illustratedmessage/stories/illustratedmessage.stories.js @@ -1,11 +1,13 @@ import { Template as Link } from "@spectrum-css/link/stories/template.js"; import { disableDefaultModes } from "@spectrum-css/preview/modes"; import { html } from "lit"; -import metadata from "../dist/metadata.json"; -import packageJson from "../package.json"; import { IllustratedMessageGroup } from "./illustratedmessage.test.js"; import { Template } from "./template.js"; +// Local assets to render the component styles and structure +import metadata from "../dist/metadata.json"; +import packageJson from "../package.json"; + /** * The Illustrated Message displays an illustration along with a heading and description. Optionally, part of the illustration can use an accent color. It can be used for status and errors, or as a call to action. For example, the Drop Zone component makes use of Illustrated Message as an area to drag and drop files. */ @@ -50,6 +52,7 @@ export default { }, packageJson, metadata, + cssprops: metadata.modifiers, }, }; diff --git a/components/infieldbutton/dist/metadata.json b/components/infieldbutton/dist/metadata.json index 563089a4065..485a2087540 100644 --- a/components/infieldbutton/dist/metadata.json +++ b/components/infieldbutton/dist/metadata.json @@ -8,6 +8,13 @@ ".spectrum-InfieldButton--top .spectrum-InfieldButton-fill", ".spectrum-InfieldButton-fill", ".spectrum-InfieldButton-icon", + ".spectrum-InfieldButton:active", + ".spectrum-InfieldButton:disabled", + ".spectrum-InfieldButton:focus-visible", + ".spectrum-InfieldButton:hover", + ".spectrum-InfieldButton:not(:disabled):active", + ".spectrum-InfieldButton:not(:disabled):focus-visible", + ".spectrum-InfieldButton:not(:disabled):hover", ".spectrum-InfieldButton.spectrum-InfieldButton--bottom", ".spectrum-InfieldButton.spectrum-InfieldButton--bottom.spectrum-InfieldButton--sizeL", ".spectrum-InfieldButton.spectrum-InfieldButton--bottom.spectrum-InfieldButton--sizeS", @@ -20,140 +27,654 @@ ".spectrum-InfieldButton.spectrum-InfieldButton--top", ".spectrum-InfieldButton.spectrum-InfieldButton--top.spectrum-InfieldButton--sizeL", ".spectrum-InfieldButton.spectrum-InfieldButton--top.spectrum-InfieldButton--sizeS", - ".spectrum-InfieldButton.spectrum-InfieldButton--top.spectrum-InfieldButton--sizeXL", - ".spectrum-InfieldButton:active", - ".spectrum-InfieldButton:disabled", - ".spectrum-InfieldButton:focus-visible", - ".spectrum-InfieldButton:hover", - ".spectrum-InfieldButton:not(:disabled):active", - ".spectrum-InfieldButton:not(:disabled):focus-visible", - ".spectrum-InfieldButton:not(:disabled):hover" - ], - "modifiers": [ - "--mod-infield-border-color", - "--mod-infield-border-color-quiet", - "--mod-infield-button-background-color", - "--mod-infield-button-background-color-disabled", - "--mod-infield-button-background-color-down", - "--mod-infield-button-background-color-down-disabled", - "--mod-infield-button-background-color-down-quiet", - "--mod-infield-button-background-color-hover", - "--mod-infield-button-background-color-hover-disabled", - "--mod-infield-button-background-color-hover-quiet", - "--mod-infield-button-background-color-key-focus", - "--mod-infield-button-background-color-key-focus-quiet", - "--mod-infield-button-background-color-quiet", - "--mod-infield-button-background-color-quiet-disabled", - "--mod-infield-button-border-color", - "--mod-infield-button-border-color-disabled", - "--mod-infield-button-border-color-quiet-disabled", - "--mod-infield-button-border-radius", - "--mod-infield-button-border-radius-reset", - "--mod-infield-button-border-width", - "--mod-infield-button-border-width-quiet", - "--mod-infield-button-edge-to-fill", - "--mod-infield-button-fill-justify-content", - "--mod-infield-button-fill-padding", - "--mod-infield-button-height", - "--mod-infield-button-icon-color", - "--mod-infield-button-icon-color-disabled", - "--mod-infield-button-icon-color-down", - "--mod-infield-button-icon-color-down-disabled", - "--mod-infield-button-icon-color-hover", - "--mod-infield-button-icon-color-hover-disabled", - "--mod-infield-button-icon-color-key-focus", - "--mod-infield-button-icon-color-key-focus-disabled", - "--mod-infield-button-inner-edge-to-fill", - "--mod-infield-button-stacked-border-radius-reset", - "--mod-infield-button-stacked-bottom-border-block-end-width", - "--mod-infield-button-stacked-bottom-border-radius-end-end", - "--mod-infield-button-stacked-bottom-border-radius-end-start", - "--mod-infield-button-stacked-fill-padding-inline", - "--mod-infield-button-stacked-fill-padding-inner", - "--mod-infield-button-stacked-fill-padding-outer", - "--mod-infield-button-stacked-top-border-radius-start-start", - "--mod-infield-button-width", - "--mod-infield-button-width-stacked" - ], - "component": [ - "--spectrum-in-field-button-edge-to-disclosure-icon-stacked-extra-large", - "--spectrum-in-field-button-edge-to-disclosure-icon-stacked-large", - "--spectrum-in-field-button-edge-to-disclosure-icon-stacked-medium", - "--spectrum-in-field-button-edge-to-disclosure-icon-stacked-small", - "--spectrum-in-field-button-edge-to-fill", - "--spectrum-in-field-button-fill-stacked-inner-border-rounding", - "--spectrum-in-field-button-inner-edge-to-disclosure-icon-stacked-extra-large", - "--spectrum-in-field-button-inner-edge-to-disclosure-icon-stacked-large", - "--spectrum-in-field-button-inner-edge-to-disclosure-icon-stacked-medium", - "--spectrum-in-field-button-inner-edge-to-disclosure-icon-stacked-small", - "--spectrum-in-field-button-outer-edge-to-disclosure-icon-stacked-extra-large", - "--spectrum-in-field-button-outer-edge-to-disclosure-icon-stacked-large", - "--spectrum-in-field-button-outer-edge-to-disclosure-icon-stacked-medium", - "--spectrum-in-field-button-outer-edge-to-disclosure-icon-stacked-small", - "--spectrum-in-field-button-stacked-inner-edge-to-fill", - "--spectrum-in-field-button-width-stacked-extra-large", - "--spectrum-in-field-button-width-stacked-large", - "--spectrum-in-field-button-width-stacked-medium", - "--spectrum-in-field-button-width-stacked-small", - "--spectrum-infield-button-background-color", - "--spectrum-infield-button-background-color-down", - "--spectrum-infield-button-background-color-hover", - "--spectrum-infield-button-background-color-key-focus", - "--spectrum-infield-button-border-color", - "--spectrum-infield-button-border-radius", - "--spectrum-infield-button-border-radius-reset", - "--spectrum-infield-button-border-width", - "--spectrum-infield-button-edge-to-fill", - "--spectrum-infield-button-fill-justify-content", - "--spectrum-infield-button-fill-padding", - "--spectrum-infield-button-height", - "--spectrum-infield-button-icon-color", - "--spectrum-infield-button-icon-color-down", - "--spectrum-infield-button-icon-color-hover", - "--spectrum-infield-button-icon-color-key-focus", - "--spectrum-infield-button-inner-edge-to-fill", - "--spectrum-infield-button-stacked-border-radius-reset", - "--spectrum-infield-button-stacked-bottom-border-radius-end-start", - "--spectrum-infield-button-stacked-fill-padding-inline", - "--spectrum-infield-button-stacked-fill-padding-inner", - "--spectrum-infield-button-stacked-fill-padding-outer", - "--spectrum-infield-button-stacked-top-border-radius-start-start", - "--spectrum-infield-button-width" - ], - "global": [ - "--spectrum-animation-duration-100", - "--spectrum-border-width-100", - "--spectrum-component-height-100", - "--spectrum-component-height-200", - "--spectrum-component-height-300", - "--spectrum-component-height-75", - "--spectrum-corner-radius-100", - "--spectrum-disabled-background-color", - "--spectrum-disabled-content-color", - "--spectrum-gray-100", - "--spectrum-gray-200", - "--spectrum-gray-300", - "--spectrum-neutral-content-color-default", - "--spectrum-neutral-content-color-down", - "--spectrum-neutral-content-color-hover", - "--spectrum-neutral-content-color-key-focus" - ], - "system-theme": [ - "--system-infield-button-background-color", - "--system-infield-button-background-color-down", - "--system-infield-button-background-color-hover", - "--system-infield-button-background-color-key-focus", - "--system-infield-button-border-color", - "--system-infield-button-border-radius", - "--system-infield-button-border-radius-reset", - "--system-infield-button-border-width", - "--system-infield-button-disabled-border-color", - "--system-infield-button-stacked-bottom-border-radius-end-start", - "--system-infield-button-stacked-top-border-radius-start-start" + ".spectrum-InfieldButton.spectrum-InfieldButton--top.spectrum-InfieldButton--sizeXL" ], - "passthroughs": [], - "high-contrast": [ - "--highcontrast-infield-button-border-color", - "--highcontrast-infield-button-border-color-active" - ] + "modifiers": { + "mod-infield-button-background-color": { + "value": "var(--spectrum-infield-button-background-color)", + "description": "Defined in `.spectrum-InfieldButton:disabled`, `.spectrum-InfieldButton.spectrum-InfieldButton--quiet`, `.spectrum-InfieldButton.spectrum-InfieldButton--quiet:disabled`, `.spectrum-InfieldButton:hover`, `.spectrum-InfieldButton:active`, `.spectrum-InfieldButton:focus-visible`.
Used by `.spectrum-InfieldButton-fill`.
Defaults to `var(--spectrum-infield-button-background-color)`, if not set.", + "control": "color", + "category": "Modifier" + }, + "mod-infield-button-background-color-disabled": { + "value": "var(--spectrum-gray-100)", + "description": "Used by `--mod-infield-button-background-color`.
Defaults to `var(--spectrum-disabled-background-color)`, if not set.", + "control": "color", + "category": "Modifier" + }, + "mod-infield-button-background-color-hover": { + "value": "var(--spectrum-infield-button-background-color-hover)", + "description": "Defined in `.spectrum-InfieldButton:disabled`, `.spectrum-InfieldButton.spectrum-InfieldButton--quiet`.
Used by `--mod-infield-button-background-color`.
Defaults to `var(--spectrum-infield-button-background-color-hover)`, if not set.", + "control": "color", + "category": "Modifier" + }, + "mod-infield-button-background-color-hover-disabled": { + "value": "var(--spectrum-gray-100)", + "description": "Used by `--mod-infield-button-background-color-hover`.
Defaults to `var(--spectrum-disabled-background-color)`, if not set.", + "control": "color", + "category": "Modifier" + }, + "mod-infield-button-background-color-down": { + "value": "var(--spectrum-infield-button-background-color-down)", + "description": "Defined in `.spectrum-InfieldButton:disabled`, `.spectrum-InfieldButton.spectrum-InfieldButton--quiet`.
Used by `--mod-infield-button-background-color`.
Defaults to `var(--spectrum-infield-button-background-color-down)`, if not set.", + "control": "color", + "category": "Modifier" + }, + "mod-infield-button-background-color-down-disabled": { + "value": "var(--spectrum-gray-100)", + "description": "Used by `--mod-infield-button-background-color-down`.
Defaults to `var(--spectrum-disabled-background-color)`, if not set.", + "control": "color", + "category": "Modifier" + }, + "mod-infield-button-border-color": { + "value": "var(--spectrum-infield-button-border-color)", + "description": "Defined in `.spectrum-InfieldButton:disabled`, `.spectrum-InfieldButton.spectrum-InfieldButton--quiet:disabled`.
Used by `.spectrum-InfieldButton-fill`.
Defaults to `var(--spectrum-infield-button-border-color)`, if not set.", + "control": "color", + "category": "Modifier" + }, + "mod-infield-button-border-color-disabled": { + "value": "var(--spectrum-infield-button-border-color)", + "description": "Used by `--mod-infield-button-border-color`.
Defaults to `var(--spectrum-infield-button-border-color)`, if not set.", + "control": "color", + "category": "Modifier" + }, + "mod-infield-button-icon-color": { + "value": "var(--spectrum-infield-button-icon-color)", + "description": "Defined in `.spectrum-InfieldButton:disabled`, `.spectrum-InfieldButton:hover`, `.spectrum-InfieldButton:active`, `.spectrum-InfieldButton:focus-visible`.
Used by `.spectrum-InfieldButton-icon`.
Defaults to `var(--spectrum-infield-button-icon-color)`, if not set.", + "control": "color", + "category": "Modifier" + }, + "mod-infield-button-icon-color-disabled": { + "value": "var(--spectrum-gray-400)", + "description": "Used by `--mod-infield-button-icon-color`.
Defaults to `var(--spectrum-disabled-content-color)`, if not set.", + "control": "color", + "category": "Modifier" + }, + "mod-infield-button-icon-color-hover": { + "value": "var(--spectrum-infield-button-icon-color-hover)", + "description": "Defined in `.spectrum-InfieldButton:disabled`.
Used by `--mod-infield-button-icon-color`.
Defaults to `var(--spectrum-infield-button-icon-color-hover)`, if not set.", + "control": "color", + "category": "Modifier" + }, + "mod-infield-button-icon-color-hover-disabled": { + "value": "var(--spectrum-gray-400)", + "description": "Used by `--mod-infield-button-icon-color-hover`.
Defaults to `var(--spectrum-disabled-content-color)`, if not set.", + "control": "color", + "category": "Modifier" + }, + "mod-infield-button-icon-color-down": { + "value": "var(--spectrum-infield-button-icon-color-down)", + "description": "Defined in `.spectrum-InfieldButton:disabled`.
Used by `--mod-infield-button-icon-color`.
Defaults to `var(--spectrum-infield-button-icon-color-down)`, if not set.", + "control": "color", + "category": "Modifier" + }, + "mod-infield-button-icon-color-down-disabled": { + "value": "var(--spectrum-gray-400)", + "description": "Used by `--mod-infield-button-icon-color-down`.
Defaults to `var(--spectrum-disabled-content-color)`, if not set.", + "control": "color", + "category": "Modifier" + }, + "mod-infield-button-icon-color-key-focus": { + "value": "var(--spectrum-infield-button-icon-color-key-focus)", + "description": "Defined in `.spectrum-InfieldButton:disabled`.
Used by `--mod-infield-button-icon-color`.
Defaults to `var(--spectrum-infield-button-icon-color-key-focus)`, if not set.", + "control": "color", + "category": "Modifier" + }, + "mod-infield-button-icon-color-key-focus-disabled": { + "value": "var(--spectrum-gray-400)", + "description": "Used by `--mod-infield-button-icon-color-key-focus`.
Defaults to `var(--spectrum-disabled-content-color)`, if not set.", + "control": "color", + "category": "Modifier" + }, + "mod-infield-button-width": { + "value": "var(--spectrum-infield-button-width)", + "description": "Defined in `.spectrum-InfieldButton.spectrum-InfieldButton--bottom, .spectrum-InfieldButton.spectrum-InfieldButton--top`, `.spectrum-InfieldButton.spectrum-InfieldButton--bottom.spectrum-InfieldButton--sizeS, .spectrum-InfieldButton.spectrum-InfieldButton--top.spectrum-InfieldButton--sizeS`, `.spectrum-InfieldButton.spectrum-InfieldButton--bottom.spectrum-InfieldButton--sizeL, .spectrum-InfieldButton.spectrum-InfieldButton--top.spectrum-InfieldButton--sizeL`, `.spectrum-InfieldButton.spectrum-InfieldButton--bottom.spectrum-InfieldButton--sizeXL, .spectrum-InfieldButton.spectrum-InfieldButton--top.spectrum-InfieldButton--sizeXL`.
Used by `.spectrum-InfieldButton`.
Defaults to `var(--spectrum-infield-button-width)`, if not set.", + "control": "text", + "category": "Modifier" + }, + "mod-infield-button-width-stacked": { + "value": "44px", + "description": "Used by `--mod-infield-button-width`.
Defaults to `var(--spectrum-in-field-button-width-stacked-extra-large)`, if not set.", + "control": "text", + "category": "Modifier" + }, + "mod-infield-button-background-color-quiet": { + "description": "Used by `--mod-infield-button-background-color`.", + "control": "color", + "category": "Modifier" + }, + "mod-infield-button-background-color-hover-quiet": { + "description": "Used by `--mod-infield-button-background-color-hover`.", + "control": "color", + "category": "Modifier" + }, + "mod-infield-button-background-color-down-quiet": { + "description": "Used by `--mod-infield-button-background-color-down`.", + "control": "color", + "category": "Modifier" + }, + "mod-infield-button-background-color-key-focus": { + "value": "var(--spectrum-infield-button-background-color-key-focus)", + "description": "Defined in `.spectrum-InfieldButton.spectrum-InfieldButton--quiet`.
Used by `--mod-infield-button-background-color`.
Defaults to `var(--spectrum-infield-button-background-color-key-focus)`, if not set.", + "control": "color", + "category": "Modifier" + }, + "mod-infield-button-background-color-key-focus-quiet": { + "description": "Used by `--mod-infield-button-background-color-key-focus`.", + "control": "color", + "category": "Modifier" + }, + "mod-infield-border-color": { + "description": "Defined in `.spectrum-InfieldButton.spectrum-InfieldButton--quiet`.", + "control": "color", + "category": "Modifier" + }, + "mod-infield-border-color-quiet": { + "description": "Used by `--mod-infield-border-color`.", + "control": "color", + "category": "Modifier" + }, + "mod-infield-button-border-width": { + "value": "var(--spectrum-infield-button-border-width)", + "description": "Defined in `.spectrum-InfieldButton.spectrum-InfieldButton--quiet`.
Used by `.spectrum-InfieldButton-fill`, `.spectrum-InfieldButton--bottom .spectrum-InfieldButton-fill, .spectrum-InfieldButton--top .spectrum-InfieldButton-fill`, `.spectrum-InfieldButton--top .spectrum-InfieldButton-fill`, `.spectrum-InfieldButton--bottom .spectrum-InfieldButton-fill`.
Defaults to `var(--spectrum-infield-button-border-width)`, if not set.", + "control": "text", + "category": "Modifier" + }, + "mod-infield-button-border-width-quiet": { + "description": "Used by `--mod-infield-button-border-width`.", + "control": "text", + "category": "Modifier" + }, + "mod-infield-button-background-color-quiet-disabled": { + "description": "Used by `--mod-infield-button-background-color`.", + "control": "color", + "category": "Modifier" + }, + "mod-infield-button-border-color-quiet-disabled": { + "description": "Used by `--mod-infield-button-border-color`.", + "control": "color", + "category": "Modifier" + }, + "mod-infield-button-height": { + "value": "var(--spectrum-infield-button-height)", + "description": "Used by `.spectrum-InfieldButton`, `.spectrum-InfieldButton.spectrum-InfieldButton--bottom, .spectrum-InfieldButton.spectrum-InfieldButton--top`.
Defaults to `var(--spectrum-infield-button-height)`, if not set.", + "control": "text", + "category": "Modifier" + }, + "mod-infield-button-edge-to-fill": { + "value": "var(--spectrum-infield-button-edge-to-fill)", + "description": "Used by `.spectrum-InfieldButton`, `.spectrum-InfieldButton--bottom .spectrum-InfieldButton-fill, .spectrum-InfieldButton--top .spectrum-InfieldButton-fill`, `.spectrum-InfieldButton--top .spectrum-InfieldButton-fill`, `.spectrum-InfieldButton--bottom .spectrum-InfieldButton-fill`.
Defaults to `var(--spectrum-infield-button-edge-to-fill)`, if not set.", + "control": "text", + "category": "Modifier" + }, + "mod-infield-button-inner-edge-to-fill": { + "value": "var(--spectrum-infield-button-inner-edge-to-fill)", + "description": "Used by `.spectrum-InfieldButton.spectrum-InfieldButton--top`, `.spectrum-InfieldButton.spectrum-InfieldButton--bottom`, `.spectrum-InfieldButton--top .spectrum-InfieldButton-fill`, `.spectrum-InfieldButton--bottom .spectrum-InfieldButton-fill`.
Defaults to `var(--spectrum-infield-button-inner-edge-to-fill)`, if not set.", + "control": "text", + "category": "Modifier" + }, + "mod-infield-button-border-radius": { + "value": "var(--spectrum-infield-button-border-radius)", + "description": "Used by `.spectrum-InfieldButton-fill`, `.spectrum-InfieldButton--bottom .spectrum-InfieldButton-fill`.
Defaults to `var(--spectrum-infield-button-border-radius)`, if not set.", + "control": "text", + "category": "Modifier" + }, + "mod-infield-button-fill-padding": { + "value": "var(--spectrum-infield-button-fill-padding)", + "description": "Used by `.spectrum-InfieldButton-fill`.
Defaults to `var(--spectrum-infield-button-fill-padding)`, if not set.", + "control": "text", + "category": "Modifier" + }, + "mod-infield-button-fill-justify-content": { + "value": "var(--spectrum-infield-button-fill-justify-content)", + "description": "Used by `.spectrum-InfieldButton-fill`.
Defaults to `var(--spectrum-infield-button-fill-justify-content)`, if not set.", + "control": "text", + "category": "Modifier" + }, + "mod-infield-button-border-radius-reset": { + "value": "var(--spectrum-infield-button-border-radius-reset)", + "description": "Used by `.spectrum-InfieldButton--right .spectrum-InfieldButton-fill`, `.spectrum-InfieldButton--left .spectrum-InfieldButton-fill`.
Defaults to `var(--spectrum-infield-button-border-radius-reset)`, if not set.", + "control": "text", + "category": "Modifier" + }, + "mod-infield-button-stacked-fill-padding-inline": { + "value": "var(--spectrum-infield-button-stacked-fill-padding-inline)", + "description": "Used by `.spectrum-InfieldButton--bottom .spectrum-InfieldButton-fill, .spectrum-InfieldButton--top .spectrum-InfieldButton-fill`.
Defaults to `var(--spectrum-infield-button-stacked-fill-padding-inline)`, if not set.", + "control": "text", + "category": "Modifier" + }, + "mod-infield-button-stacked-fill-padding-outer": { + "value": "var(--spectrum-infield-button-stacked-fill-padding-outer)", + "description": "Used by `.spectrum-InfieldButton--top .spectrum-InfieldButton-fill`, `.spectrum-InfieldButton--bottom .spectrum-InfieldButton-fill`.
Defaults to `var(--spectrum-infield-button-stacked-fill-padding-outer)`, if not set.", + "control": "text", + "category": "Modifier" + }, + "mod-infield-button-stacked-fill-padding-inner": { + "value": "var(--spectrum-infield-button-stacked-fill-padding-inner)", + "description": "Used by `.spectrum-InfieldButton--top .spectrum-InfieldButton-fill`, `.spectrum-InfieldButton--bottom .spectrum-InfieldButton-fill`.
Defaults to `var(--spectrum-infield-button-stacked-fill-padding-inner)`, if not set.", + "control": "text", + "category": "Modifier" + }, + "mod-infield-button-stacked-top-border-radius-start-start": { + "value": "var(--spectrum-infield-button-stacked-top-border-radius-start-start)", + "description": "Used by `.spectrum-InfieldButton--top .spectrum-InfieldButton-fill`.
Defaults to `var(--spectrum-infield-button-stacked-top-border-radius-start-start)`, if not set.", + "control": "text", + "category": "Modifier" + }, + "mod-infield-button-stacked-border-radius-reset": { + "value": "var(--spectrum-infield-button-stacked-border-radius-reset)", + "description": "Used by `.spectrum-InfieldButton--top .spectrum-InfieldButton-fill`, `.spectrum-InfieldButton--bottom .spectrum-InfieldButton-fill`.
Defaults to `var(--spectrum-infield-button-stacked-border-radius-reset)`, if not set.", + "control": "text", + "category": "Modifier" + }, + "mod-infield-button-stacked-bottom-border-radius-end-start": { + "value": "var(--spectrum-infield-button-stacked-bottom-border-radius-end-start)", + "description": "Used by `.spectrum-InfieldButton--bottom .spectrum-InfieldButton-fill`.
Defaults to `var(--spectrum-infield-button-stacked-bottom-border-radius-end-start)`, if not set.", + "control": "text", + "category": "Modifier" + }, + "mod-infield-button-stacked-bottom-border-radius-end-end": { + "value": "var(--mod-infield-button-border-radius, var(--spectrum-infield-button-border-radius))", + "description": "Used by `.spectrum-InfieldButton--bottom .spectrum-InfieldButton-fill`.
Defaults to `var(--mod-infield-button-border-radius, var(--spectrum-infield-button-border-radius))`, if not set.", + "control": "text", + "category": "Modifier" + }, + "mod-infield-button-stacked-bottom-border-block-end-width": { + "value": "var(--mod-infield-button-border-width, var(--spectrum-infield-button-border-width))", + "description": "Used by `.spectrum-InfieldButton--bottom .spectrum-InfieldButton-fill`.
Defaults to `var(--mod-infield-button-border-width, var(--spectrum-infield-button-border-width))`, if not set.", + "control": "text", + "category": "Modifier" + } + }, + "component": { + "spectrum-infield-button-height": { + "description": "Defined in `.spectrum-InfieldButton`, `.spectrum-InfieldButton.spectrum-InfieldButton--sizeS`, `.spectrum-InfieldButton.spectrum-InfieldButton--sizeL`, `.spectrum-InfieldButton.spectrum-InfieldButton--sizeXL`.
Used by `.spectrum-InfieldButton`, `.spectrum-InfieldButton.spectrum-InfieldButton--bottom, .spectrum-InfieldButton.spectrum-InfieldButton--top`.", + "control": "text", + "category": "Component" + }, + "spectrum-infield-button-width": { + "description": "Defined in `.spectrum-InfieldButton`, `.spectrum-InfieldButton.spectrum-InfieldButton--sizeS`, `.spectrum-InfieldButton.spectrum-InfieldButton--sizeL`, `.spectrum-InfieldButton.spectrum-InfieldButton--sizeXL`.
Used by `.spectrum-InfieldButton`.", + "control": "text", + "category": "Component" + }, + "spectrum-infield-button-stacked-border-radius-reset": { + "description": "Defined in `.spectrum-InfieldButton`.
Used by `.spectrum-InfieldButton--top .spectrum-InfieldButton-fill`, `.spectrum-InfieldButton--bottom .spectrum-InfieldButton-fill`.", + "control": "text", + "category": "Component" + }, + "spectrum-in-field-button-fill-stacked-inner-border-rounding": { + "value": "0px", + "description": "Used by `--spectrum-infield-button-stacked-border-radius-reset`.", + "control": "text", + "category": "Component" + }, + "spectrum-infield-button-edge-to-fill": { + "description": "Defined in `.spectrum-InfieldButton`.
Used by `.spectrum-InfieldButton`, `.spectrum-InfieldButton--bottom .spectrum-InfieldButton-fill, .spectrum-InfieldButton--top .spectrum-InfieldButton-fill`, `.spectrum-InfieldButton--top .spectrum-InfieldButton-fill`, `.spectrum-InfieldButton--bottom .spectrum-InfieldButton-fill`.", + "control": "text", + "category": "Component" + }, + "spectrum-in-field-button-edge-to-fill": { + "value": "0px", + "description": "Used by `--spectrum-infield-button-edge-to-fill`.", + "control": "text", + "category": "Component" + }, + "spectrum-infield-button-inner-edge-to-fill": { + "description": "Defined in `.spectrum-InfieldButton`.
Used by `.spectrum-InfieldButton.spectrum-InfieldButton--top`, `.spectrum-InfieldButton.spectrum-InfieldButton--bottom`, `.spectrum-InfieldButton--top .spectrum-InfieldButton-fill`, `.spectrum-InfieldButton--bottom .spectrum-InfieldButton-fill`.", + "control": "text", + "category": "Component" + }, + "spectrum-in-field-button-stacked-inner-edge-to-fill": { + "value": "0px", + "description": "Used by `--spectrum-infield-button-inner-edge-to-fill`.", + "control": "text", + "category": "Component" + }, + "spectrum-infield-button-fill-padding": { + "description": "Defined in `.spectrum-InfieldButton`.
Used by `.spectrum-InfieldButton-fill`.", + "control": "text", + "category": "Component" + }, + "spectrum-infield-button-stacked-fill-padding-inline": { + "description": "Defined in `.spectrum-InfieldButton`, `.spectrum-InfieldButton.spectrum-InfieldButton--sizeS`, `.spectrum-InfieldButton.spectrum-InfieldButton--sizeL`, `.spectrum-InfieldButton.spectrum-InfieldButton--sizeXL`.
Used by `.spectrum-InfieldButton--bottom .spectrum-InfieldButton-fill, .spectrum-InfieldButton--top .spectrum-InfieldButton-fill`.", + "control": "text", + "category": "Component" + }, + "spectrum-in-field-button-edge-to-disclosure-icon-stacked-medium": { + "value": "9px", + "description": "Used by `--spectrum-infield-button-stacked-fill-padding-inline`.", + "control": "text", + "category": "Component" + }, + "spectrum-infield-button-stacked-fill-padding-outer": { + "description": "Defined in `.spectrum-InfieldButton`, `.spectrum-InfieldButton.spectrum-InfieldButton--sizeS`, `.spectrum-InfieldButton.spectrum-InfieldButton--sizeL`, `.spectrum-InfieldButton.spectrum-InfieldButton--sizeXL`.
Used by `.spectrum-InfieldButton--top .spectrum-InfieldButton-fill`, `.spectrum-InfieldButton--bottom .spectrum-InfieldButton-fill`.", + "control": "text", + "category": "Component" + }, + "spectrum-in-field-button-outer-edge-to-disclosure-icon-stacked-medium": { + "value": "3px", + "description": "Used by `--spectrum-infield-button-stacked-fill-padding-outer`.", + "control": "text", + "category": "Component" + }, + "spectrum-infield-button-stacked-fill-padding-inner": { + "description": "Defined in `.spectrum-InfieldButton`, `.spectrum-InfieldButton.spectrum-InfieldButton--sizeS`, `.spectrum-InfieldButton.spectrum-InfieldButton--sizeL`, `.spectrum-InfieldButton.spectrum-InfieldButton--sizeXL`.
Used by `.spectrum-InfieldButton--top .spectrum-InfieldButton-fill`, `.spectrum-InfieldButton--bottom .spectrum-InfieldButton-fill`.", + "control": "text", + "category": "Component" + }, + "spectrum-in-field-button-inner-edge-to-disclosure-icon-stacked-medium": { + "value": "3px", + "description": "Used by `--spectrum-infield-button-stacked-fill-padding-inner`.", + "control": "text", + "category": "Component" + }, + "spectrum-infield-button-icon-color": { + "description": "Defined in `.spectrum-InfieldButton`.
Used by `.spectrum-InfieldButton-icon`.", + "control": "color", + "category": "Component" + }, + "spectrum-infield-button-icon-color-hover": { + "description": "Defined in `.spectrum-InfieldButton`.
Used by `--mod-infield-button-icon-color`.", + "control": "color", + "category": "Component" + }, + "spectrum-infield-button-icon-color-down": { + "description": "Defined in `.spectrum-InfieldButton`.
Used by `--mod-infield-button-icon-color`.", + "control": "color", + "category": "Component" + }, + "spectrum-infield-button-icon-color-key-focus": { + "description": "Defined in `.spectrum-InfieldButton`.
Used by `--mod-infield-button-icon-color`.", + "control": "color", + "category": "Component" + }, + "spectrum-infield-button-fill-justify-content": { + "description": "Defined in `.spectrum-InfieldButton`.
Used by `.spectrum-InfieldButton-fill`.", + "control": "text", + "category": "Component" + }, + "spectrum-infield-button-border-color": { + "description": "Defined in `.spectrum-InfieldButton`, `.spectrum-InfieldButton:disabled`.
Used by `--mod-infield-button-border-color`, `.spectrum-InfieldButton-fill`.", + "control": "color", + "category": "Component" + }, + "spectrum-in-field-button-edge-to-disclosure-icon-stacked-small": { + "value": "7px", + "description": "Used by `--spectrum-infield-button-stacked-fill-padding-inline`.", + "control": "text", + "category": "Component" + }, + "spectrum-in-field-button-outer-edge-to-disclosure-icon-stacked-small": { + "value": "3px", + "description": "Used by `--spectrum-infield-button-stacked-fill-padding-outer`.", + "control": "text", + "category": "Component" + }, + "spectrum-in-field-button-inner-edge-to-disclosure-icon-stacked-small": { + "value": "3px", + "description": "Used by `--spectrum-infield-button-stacked-fill-padding-inner`.", + "control": "text", + "category": "Component" + }, + "spectrum-in-field-button-edge-to-disclosure-icon-stacked-large": { + "value": "13px", + "description": "Used by `--spectrum-infield-button-stacked-fill-padding-inline`.", + "control": "text", + "category": "Component" + }, + "spectrum-in-field-button-outer-edge-to-disclosure-icon-stacked-large": { + "value": "4px", + "description": "Used by `--spectrum-infield-button-stacked-fill-padding-outer`.", + "control": "text", + "category": "Component" + }, + "spectrum-in-field-button-inner-edge-to-disclosure-icon-stacked-large": { + "value": "4px", + "description": "Used by `--spectrum-infield-button-stacked-fill-padding-inner`.", + "control": "text", + "category": "Component" + }, + "spectrum-in-field-button-edge-to-disclosure-icon-stacked-extra-large": { + "value": "16px", + "description": "Used by `--spectrum-infield-button-stacked-fill-padding-inline`.", + "control": "text", + "category": "Component" + }, + "spectrum-in-field-button-outer-edge-to-disclosure-icon-stacked-extra-large": { + "value": "5px", + "description": "Used by `--spectrum-infield-button-stacked-fill-padding-outer`.", + "control": "text", + "category": "Component" + }, + "spectrum-in-field-button-inner-edge-to-disclosure-icon-stacked-extra-large": { + "value": "5px", + "description": "Used by `--spectrum-infield-button-stacked-fill-padding-inner`.", + "control": "text", + "category": "Component" + }, + "spectrum-in-field-button-width-stacked-medium": { + "value": "28px", + "description": "Used by `--mod-infield-button-width`.", + "control": "text", + "category": "Component" + }, + "spectrum-in-field-button-width-stacked-small": { + "value": "20px", + "description": "Used by `--mod-infield-button-width`.", + "control": "text", + "category": "Component" + }, + "spectrum-in-field-button-width-stacked-large": { + "value": "36px", + "description": "Used by `--mod-infield-button-width`.", + "control": "text", + "category": "Component" + }, + "spectrum-in-field-button-width-stacked-extra-large": { + "value": "44px", + "description": "Used by `--mod-infield-button-width`.", + "control": "text", + "category": "Component" + }, + "spectrum-infield-button-background-color-hover": { + "description": "Defined in `.spectrum-InfieldButton`.
Used by `--mod-infield-button-background-color`.", + "control": "color", + "category": "Component" + }, + "spectrum-infield-button-background-color-down": { + "description": "Defined in `.spectrum-InfieldButton`.
Used by `--mod-infield-button-background-color`.", + "control": "color", + "category": "Component" + }, + "spectrum-infield-button-background-color-key-focus": { + "description": "Defined in `.spectrum-InfieldButton`.
Used by `--mod-infield-button-background-color`.", + "control": "color", + "category": "Component" + }, + "spectrum-infield-button-background-color": { + "description": "Defined in `.spectrum-InfieldButton`.
Used by `.spectrum-InfieldButton-fill`.", + "control": "color", + "category": "Component" + }, + "spectrum-infield-button-border-width": { + "description": "Defined in `.spectrum-InfieldButton`.
Used by `.spectrum-InfieldButton-fill`, `.spectrum-InfieldButton--bottom .spectrum-InfieldButton-fill, .spectrum-InfieldButton--top .spectrum-InfieldButton-fill`, `.spectrum-InfieldButton--top .spectrum-InfieldButton-fill`, `.spectrum-InfieldButton--bottom .spectrum-InfieldButton-fill`.", + "control": "text", + "category": "Component" + }, + "spectrum-infield-button-border-radius": { + "description": "Defined in `.spectrum-InfieldButton`.
Used by `.spectrum-InfieldButton-fill`, `.spectrum-InfieldButton--bottom .spectrum-InfieldButton-fill`.", + "control": "text", + "category": "Component" + }, + "spectrum-infield-button-border-radius-reset": { + "description": "Defined in `.spectrum-InfieldButton`.
Used by `.spectrum-InfieldButton--right .spectrum-InfieldButton-fill`, `.spectrum-InfieldButton--left .spectrum-InfieldButton-fill`.", + "control": "text", + "category": "Component" + }, + "spectrum-infield-button-stacked-top-border-radius-start-start": { + "description": "Defined in `.spectrum-InfieldButton`.
Used by `.spectrum-InfieldButton--top .spectrum-InfieldButton-fill`.", + "control": "text", + "category": "Component" + }, + "spectrum-infield-button-stacked-bottom-border-radius-end-start": { + "description": "Defined in `.spectrum-InfieldButton`.
Used by `.spectrum-InfieldButton--bottom .spectrum-InfieldButton-fill`.", + "control": "text", + "category": "Component" + } + }, + "global": { + "spectrum-border-width-100": { + "value": "1px", + "description": "Used by `--system-infield-button-border-width`.", + "control": "text", + "category": "Global" + }, + "spectrum-corner-radius-100": { + "value": "8px", + "description": "Used by `--system-infield-button-border-radius`.", + "control": "text", + "category": "Global" + }, + "spectrum-gray-100": { + "value": "light-dark(rgb(233, 233, 233), rgb(44, 44, 44))", + "description": "Used by `--system-infield-button-background-color`.", + "control": "text", + "category": "Global" + }, + "spectrum-gray-200": { + "value": "light-dark(rgb(225, 225, 225), rgb(50, 50, 50))", + "description": "Used by `--system-infield-button-background-color-hover`, `--system-infield-button-background-color-down`, `--system-infield-button-background-color-key-focus`.", + "control": "text", + "category": "Global" + }, + "spectrum-gray-300": { + "value": "light-dark(rgb(218, 218, 218), rgb(57, 57, 57))", + "description": "Used by `--system-infield-button-disabled-border-color`.", + "control": "text", + "category": "Global" + }, + "spectrum-component-height-100": { + "value": "32px", + "description": "Used by `--spectrum-infield-button-height`, `--spectrum-infield-button-width`.", + "control": "text", + "category": "Global" + }, + "spectrum-neutral-content-color-default": { + "value": "var(--spectrum-gray-800)", + "description": "Used by `--spectrum-infield-button-icon-color`.", + "control": "color", + "category": "Global" + }, + "spectrum-neutral-content-color-hover": { + "value": "var(--spectrum-gray-900)", + "description": "Used by `--spectrum-infield-button-icon-color-hover`.", + "control": "color", + "category": "Global" + }, + "spectrum-neutral-content-color-down": { + "value": "var(--spectrum-gray-900)", + "description": "Used by `--spectrum-infield-button-icon-color-down`.", + "control": "color", + "category": "Global" + }, + "spectrum-neutral-content-color-key-focus": { + "value": "var(--spectrum-gray-900)", + "description": "Used by `--spectrum-infield-button-icon-color-key-focus`.", + "control": "color", + "category": "Global" + }, + "spectrum-disabled-background-color": { + "value": "var(--spectrum-gray-100)", + "description": "Used by `--mod-infield-button-background-color`, `--mod-infield-button-background-color-hover`, `--mod-infield-button-background-color-down`.", + "control": "color", + "category": "Global" + }, + "spectrum-disabled-content-color": { + "value": "var(--spectrum-gray-400)", + "description": "Used by `--mod-infield-button-icon-color`, `--mod-infield-button-icon-color-hover`, `--mod-infield-button-icon-color-down`, `--mod-infield-button-icon-color-key-focus`.", + "control": "color", + "category": "Global" + }, + "spectrum-component-height-75": { + "value": "24px", + "description": "Used by `--spectrum-infield-button-height`, `--spectrum-infield-button-width`.", + "control": "text", + "category": "Global" + }, + "spectrum-component-height-200": { + "value": "40px", + "description": "Used by `--spectrum-infield-button-height`, `--spectrum-infield-button-width`.", + "control": "text", + "category": "Global" + }, + "spectrum-component-height-300": { + "value": "48px", + "description": "Used by `--spectrum-infield-button-height`, `--spectrum-infield-button-width`.", + "control": "text", + "category": "Global" + }, + "spectrum-animation-duration-100": { + "description": "Used by `.spectrum-InfieldButton-fill`.", + "control": "text", + "category": "Global" + } + }, + "system-theme": { + "system-infield-button-border-width": { + "description": "Defined in `.spectrum`.
Used by `--spectrum-infield-button-border-width`.", + "control": "text" + }, + "system-infield-button-border-color": { + "description": "Defined in `.spectrum`.
Used by `--spectrum-infield-button-border-color`.", + "control": "color" + }, + "system-infield-button-border-radius": { + "description": "Defined in `.spectrum`.
Used by `--spectrum-infield-button-border-radius`.", + "control": "text" + }, + "system-infield-button-border-radius-reset": { + "description": "Defined in `.spectrum`.
Used by `--system-infield-button-stacked-top-border-radius-start-start`, `--system-infield-button-stacked-bottom-border-radius-end-start`, `--spectrum-infield-button-border-radius-reset`.", + "control": "text" + }, + "system-infield-button-stacked-top-border-radius-start-start": { + "description": "Defined in `.spectrum`.
Used by `--spectrum-infield-button-stacked-top-border-radius-start-start`.", + "control": "text" + }, + "system-infield-button-stacked-bottom-border-radius-end-start": { + "description": "Defined in `.spectrum`.
Used by `--spectrum-infield-button-stacked-bottom-border-radius-end-start`.", + "control": "text" + }, + "system-infield-button-background-color": { + "description": "Defined in `.spectrum`.
Used by `--spectrum-infield-button-background-color`.", + "control": "color" + }, + "system-infield-button-background-color-hover": { + "description": "Defined in `.spectrum`.
Used by `--spectrum-infield-button-background-color-hover`.", + "control": "color" + }, + "system-infield-button-background-color-down": { + "description": "Defined in `.spectrum`.
Used by `--spectrum-infield-button-background-color-down`.", + "control": "color" + }, + "system-infield-button-background-color-key-focus": { + "description": "Defined in `.spectrum`.
Used by `--spectrum-infield-button-background-color-key-focus`.", + "control": "color" + }, + "system-infield-button-disabled-border-color": { + "description": "Defined in `.spectrum`.
Used by `--spectrum-infield-button-border-color`.", + "control": "color" + } + }, + "passthroughs": {}, + "high-contrast": { + "highcontrast-infield-button-border-color": { + "value": "var(--mod-infield-button-border-color, var(--spectrum-infield-button-border-color))", + "description": "Defined in `.spectrum-InfieldButton`, `.spectrum-InfieldButton:disabled`, `.spectrum-InfieldButton:not(:disabled):active, .spectrum-InfieldButton:not(:disabled):focus-visible`, `.spectrum-InfieldButton:not(:disabled):hover`.
Used by `.spectrum-InfieldButton-fill`.
Defaults to `var(--mod-infield-button-border-color, var(--spectrum-infield-button-border-color))`, if not set.", + "control": "color" + }, + "highcontrast-infield-button-border-color-active": { + "description": "Defined in `.spectrum-InfieldButton`.
Used by `--highcontrast-infield-button-border-color`.", + "control": "color" + } + } } diff --git a/components/infieldbutton/stories/infieldbutton.stories.js b/components/infieldbutton/stories/infieldbutton.stories.js index 0f435313795..8734c63f3e9 100644 --- a/components/infieldbutton/stories/infieldbutton.stories.js +++ b/components/infieldbutton/stories/infieldbutton.stories.js @@ -1,11 +1,13 @@ import { default as IconStories } from "@spectrum-css/icon/stories/icon.stories.js"; import { disableDefaultModes } from "@spectrum-css/preview/modes"; import { isActive, isDisabled, isFocused, isHovered, isQuiet, size } from "@spectrum-css/preview/types"; -import metadata from "../dist/metadata.json"; -import packageJson from "../package.json"; import { InfieldButtonGroup } from "./infieldbutton.test.js"; import { Template } from "./template.js"; +// Local assets to render the component styles and structure +import metadata from "../dist/metadata.json"; +import packageJson from "../package.json"; + /** * The in-field button component is a button used inside a text field. */ @@ -50,6 +52,7 @@ export default { parameters: { packageJson, metadata, + cssprops: metadata.modifiers, }, }; diff --git a/components/inlinealert/dist/metadata.json b/components/inlinealert/dist/metadata.json index 935c89f08a3..c723bd6910f 100644 --- a/components/inlinealert/dist/metadata.json +++ b/components/inlinealert/dist/metadata.json @@ -16,94 +16,463 @@ ".spectrum-InLineAlert-header", ".spectrum-InLineAlert-icon" ], - "modifiers": [ - "--mod-inlinealert-background-color", - "--mod-inlinealert-border-and-icon-color", - "--mod-inlinealert-border-and-icon-color-info", - "--mod-inlinealert-border-and-icon-color-negative", - "--mod-inlinealert-border-and-icon-color-notice", - "--mod-inlinealert-border-and-icon-color-positive", - "--mod-inlinealert-border-radius", - "--mod-inlinealert-border-width", - "--mod-inlinealert-content-color", - "--mod-inlinealert-content-font-family", - "--mod-inlinealert-content-font-size", - "--mod-inlinealert-content-font-style", - "--mod-inlinealert-content-font-weight", - "--mod-inlinealert-content-line-height", - "--mod-inlinealert-header-color", - "--mod-inlinealert-header-min-block-size", - "--mod-inlinealert-heading-font-family", - "--mod-inlinealert-heading-font-size", - "--mod-inlinealert-heading-font-style", - "--mod-inlinealert-heading-font-weight", - "--mod-inlinealert-heading-line-height", - "--mod-inlinealert-icon-size", - "--mod-inlinealert-min-inline-size", - "--mod-inlinealert-spacing-edge-to-text", - "--mod-inlinealert-spacing-header-content-button", - "--mod-inlinealert-spacing-header-to-icon" - ], - "component": [ - "--spectrum-in-line-alert-minimum-width", - "--spectrum-inlinealert-background-color", - "--spectrum-inlinealert-border-and-icon-color", - "--spectrum-inlinealert-border-and-icon-color-info", - "--spectrum-inlinealert-border-and-icon-color-negative", - "--spectrum-inlinealert-border-and-icon-color-notice", - "--spectrum-inlinealert-border-and-icon-color-positive", - "--spectrum-inlinealert-border-radius", - "--spectrum-inlinealert-border-width", - "--spectrum-inlinealert-content-color", - "--spectrum-inlinealert-content-font-family", - "--spectrum-inlinealert-content-font-size", - "--spectrum-inlinealert-content-font-style", - "--spectrum-inlinealert-content-font-weight", - "--spectrum-inlinealert-content-line-height", - "--spectrum-inlinealert-header-color", - "--spectrum-inlinealert-header-min-block-size", - "--spectrum-inlinealert-heading-font-family", - "--spectrum-inlinealert-heading-font-size", - "--spectrum-inlinealert-heading-font-style", - "--spectrum-inlinealert-heading-font-weight", - "--spectrum-inlinealert-heading-line-height", - "--spectrum-inlinealert-icon-size", - "--spectrum-inlinealert-min-inline-size", - "--spectrum-inlinealert-spacing-edge-to-text", - "--spectrum-inlinealert-spacing-header-content-button", - "--spectrum-inlinealert-spacing-header-to-icon" - ], - "global": [ - "--spectrum-background-layer-2-color", - "--spectrum-body-color", - "--spectrum-body-line-height", - "--spectrum-body-sans-serif-font-style", - "--spectrum-body-sans-serif-font-weight", - "--spectrum-body-size-s", - "--spectrum-border-width-200", - "--spectrum-component-height-50", - "--spectrum-corner-radius-100", - "--spectrum-heading-color", - "--spectrum-heading-line-height", - "--spectrum-heading-sans-serif-font-style", - "--spectrum-heading-sans-serif-font-weight", - "--spectrum-heading-size-xxs", - "--spectrum-informative-visual-color", - "--spectrum-negative-visual-color", - "--spectrum-neutral-visual-color", - "--spectrum-notice-visual-color", - "--spectrum-positive-visual-color", - "--spectrum-sans-font-family-stack", - "--spectrum-spacing-300", - "--spectrum-spacing-400", - "--spectrum-workflow-icon-size-100" - ], - "system-theme": [], - "passthroughs": [], - "high-contrast": [ - "--highcontrast-inlinealert-background-color", - "--highcontrast-inlinealert-border-and-icon-color", - "--highcontrast-inlinealert-content-color", - "--highcontrast-inlinealert-header-color" - ] + "modifiers": { + "mod-inlinealert-min-inline-size": { + "value": "var(--spectrum-inlinealert-min-inline-size)", + "description": "Used by `.spectrum-InLineAlert`.
Defaults to `var(--spectrum-inlinealert-min-inline-size)`, if not set.", + "control": "text", + "category": "Modifier" + }, + "mod-inlinealert-spacing-edge-to-text": { + "value": "var(--spectrum-inlinealert-spacing-edge-to-text)", + "description": "Used by `.spectrum-InLineAlert`.
Defaults to `var(--spectrum-inlinealert-spacing-edge-to-text)`, if not set.", + "control": "text", + "category": "Modifier" + }, + "mod-inlinealert-border-width": { + "value": "var(--spectrum-inlinealert-border-width)", + "description": "Used by `.spectrum-InLineAlert`.
Defaults to `var(--spectrum-inlinealert-border-width)`, if not set.", + "control": "text", + "category": "Modifier" + }, + "mod-inlinealert-border-radius": { + "value": "var(--spectrum-inlinealert-border-radius)", + "description": "Used by `.spectrum-InLineAlert`.
Defaults to `var(--spectrum-inlinealert-border-radius)`, if not set.", + "control": "text", + "category": "Modifier" + }, + "mod-inlinealert-background-color": { + "value": "var(--spectrum-inlinealert-background-color)", + "description": "Used by `.spectrum-InLineAlert`.
Defaults to `var(--spectrum-inlinealert-background-color)`, if not set.", + "control": "color", + "category": "Modifier" + }, + "mod-inlinealert-border-and-icon-color": { + "value": "var(--spectrum-inlinealert-border-and-icon-color)", + "description": "Used by `.spectrum-InLineAlert`.
Defaults to `var(--spectrum-inlinealert-border-and-icon-color)`, if not set.", + "control": "color", + "category": "Modifier" + }, + "mod-inlinealert-icon-size": { + "value": "var(--spectrum-inlinealert-icon-size)", + "description": "Used by `.spectrum-InLineAlert-icon`.
Defaults to `var(--spectrum-inlinealert-icon-size)`, if not set.", + "control": "text", + "category": "Modifier" + }, + "mod-inlinealert-spacing-header-to-icon": { + "value": "var(--spectrum-inlinealert-spacing-header-to-icon)", + "description": "Used by `.spectrum-InLineAlert-header`.
Defaults to `var(--spectrum-inlinealert-spacing-header-to-icon)`, if not set.", + "control": "text", + "category": "Modifier" + }, + "mod-inlinealert-heading-font-weight": { + "value": "var(--spectrum-inlinealert-heading-font-weight)", + "description": "Used by `.spectrum-InLineAlert-header`.
Defaults to `var(--spectrum-inlinealert-heading-font-weight)`, if not set.", + "control": "text", + "category": "Modifier" + }, + "mod-inlinealert-heading-font-family": { + "value": "var(--spectrum-inlinealert-heading-font-family)", + "description": "Used by `.spectrum-InLineAlert-header`.
Defaults to `var(--spectrum-inlinealert-heading-font-family)`, if not set.", + "control": "text", + "category": "Modifier" + }, + "mod-inlinealert-heading-font-style": { + "value": "var(--spectrum-inlinealert-heading-font-style)", + "description": "Used by `.spectrum-InLineAlert-header`.
Defaults to `var(--spectrum-inlinealert-heading-font-style)`, if not set.", + "control": "text", + "category": "Modifier" + }, + "mod-inlinealert-heading-font-size": { + "value": "var(--spectrum-inlinealert-heading-font-size)", + "description": "Used by `.spectrum-InLineAlert-header`.
Defaults to `var(--spectrum-inlinealert-heading-font-size)`, if not set.", + "control": "text", + "category": "Modifier" + }, + "mod-inlinealert-heading-line-height": { + "value": "var(--spectrum-inlinealert-heading-line-height)", + "description": "Used by `.spectrum-InLineAlert-header`.
Defaults to `var(--spectrum-inlinealert-heading-line-height)`, if not set.", + "control": "text", + "category": "Modifier" + }, + "mod-inlinealert-header-min-block-size": { + "value": "var(--spectrum-inlinealert-header-min-block-size)", + "description": "Used by `.spectrum-InLineAlert-header`.
Defaults to `var(--spectrum-inlinealert-header-min-block-size)`, if not set.", + "control": "text", + "category": "Modifier" + }, + "mod-inlinealert-header-color": { + "value": "var(--spectrum-inlinealert-header-color)", + "description": "Used by `.spectrum-InLineAlert-header`.
Defaults to `var(--spectrum-inlinealert-header-color)`, if not set.", + "control": "color", + "category": "Modifier" + }, + "mod-inlinealert-content-font-weight": { + "value": "var(--spectrum-inlinealert-content-font-weight)", + "description": "Used by `.spectrum-InLineAlert-content`.
Defaults to `var(--spectrum-inlinealert-content-font-weight)`, if not set.", + "control": "text", + "category": "Modifier" + }, + "mod-inlinealert-content-font-family": { + "value": "var(--spectrum-inlinealert-content-font-family)", + "description": "Used by `.spectrum-InLineAlert-content`.
Defaults to `var(--spectrum-inlinealert-content-font-family)`, if not set.", + "control": "text", + "category": "Modifier" + }, + "mod-inlinealert-content-font-style": { + "value": "var(--spectrum-inlinealert-content-font-style)", + "description": "Used by `.spectrum-InLineAlert-content`.
Defaults to `var(--spectrum-inlinealert-content-font-style)`, if not set.", + "control": "text", + "category": "Modifier" + }, + "mod-inlinealert-content-font-size": { + "value": "var(--spectrum-inlinealert-content-font-size)", + "description": "Used by `.spectrum-InLineAlert-content`.
Defaults to `var(--spectrum-inlinealert-content-font-size)`, if not set.", + "control": "text", + "category": "Modifier" + }, + "mod-inlinealert-content-line-height": { + "value": "var(--spectrum-inlinealert-content-line-height)", + "description": "Used by `.spectrum-InLineAlert-content`.
Defaults to `var(--spectrum-inlinealert-content-line-height)`, if not set.", + "control": "text", + "category": "Modifier" + }, + "mod-inlinealert-content-color": { + "value": "var(--spectrum-inlinealert-content-color)", + "description": "Used by `.spectrum-InLineAlert-content`.
Defaults to `var(--spectrum-inlinealert-content-color)`, if not set.", + "control": "color", + "category": "Modifier" + }, + "mod-inlinealert-spacing-header-content-button": { + "value": "var(--spectrum-inlinealert-spacing-header-content-button)", + "description": "Used by `.spectrum-InLineAlert-content, .spectrum-InLineAlert-footer`.
Defaults to `var(--spectrum-inlinealert-spacing-header-content-button)`, if not set.", + "control": "text", + "category": "Modifier" + }, + "mod-inlinealert-border-and-icon-color-info": { + "value": "var(--spectrum-inlinealert-border-and-icon-color-info)", + "description": "Used by `.spectrum-InLineAlert--info`, `.spectrum-InLineAlert--info .spectrum-InLineAlert-icon`.
Defaults to `var(--spectrum-inlinealert-border-and-icon-color-info)`, if not set.", + "control": "color", + "category": "Modifier" + }, + "mod-inlinealert-border-and-icon-color-notice": { + "value": "var(--spectrum-inlinealert-border-and-icon-color-notice)", + "description": "Used by `.spectrum-InLineAlert--notice`, `.spectrum-InLineAlert--notice .spectrum-InLineAlert-icon`.
Defaults to `var(--spectrum-inlinealert-border-and-icon-color-notice)`, if not set.", + "control": "color", + "category": "Modifier" + }, + "mod-inlinealert-border-and-icon-color-positive": { + "value": "var(--spectrum-inlinealert-border-and-icon-color-positive)", + "description": "Used by `.spectrum-InLineAlert--positive`, `.spectrum-InLineAlert--positive .spectrum-InLineAlert-icon`.
Defaults to `var(--spectrum-inlinealert-border-and-icon-color-positive)`, if not set.", + "control": "color", + "category": "Modifier" + }, + "mod-inlinealert-border-and-icon-color-negative": { + "value": "var(--spectrum-inlinealert-border-and-icon-color-negative)", + "description": "Used by `.spectrum-InLineAlert--negative`, `.spectrum-InLineAlert--negative .spectrum-InLineAlert-icon`.
Defaults to `var(--spectrum-inlinealert-border-and-icon-color-negative)`, if not set.", + "control": "color", + "category": "Modifier" + } + }, + "component": { + "spectrum-inlinealert-heading-font-family": { + "description": "Defined in `.spectrum-InLineAlert`.
Used by `.spectrum-InLineAlert-header`.", + "control": "text", + "category": "Component" + }, + "spectrum-inlinealert-heading-font-weight": { + "description": "Defined in `.spectrum-InLineAlert`.
Used by `.spectrum-InLineAlert-header`.", + "control": "text", + "category": "Component" + }, + "spectrum-inlinealert-heading-font-style": { + "description": "Defined in `.spectrum-InLineAlert`.
Used by `.spectrum-InLineAlert-header`.", + "control": "text", + "category": "Component" + }, + "spectrum-inlinealert-heading-font-size": { + "description": "Defined in `.spectrum-InLineAlert`.
Used by `.spectrum-InLineAlert-header`.", + "control": "text", + "category": "Component" + }, + "spectrum-inlinealert-heading-line-height": { + "description": "Defined in `.spectrum-InLineAlert`.
Used by `.spectrum-InLineAlert-header`.", + "control": "text", + "category": "Component" + }, + "spectrum-inlinealert-content-font-family": { + "description": "Defined in `.spectrum-InLineAlert`.
Used by `.spectrum-InLineAlert-content`.", + "control": "text", + "category": "Component" + }, + "spectrum-inlinealert-content-font-weight": { + "description": "Defined in `.spectrum-InLineAlert`.
Used by `.spectrum-InLineAlert-content`.", + "control": "text", + "category": "Component" + }, + "spectrum-inlinealert-content-font-style": { + "description": "Defined in `.spectrum-InLineAlert`.
Used by `.spectrum-InLineAlert-content`.", + "control": "text", + "category": "Component" + }, + "spectrum-inlinealert-content-font-size": { + "description": "Defined in `.spectrum-InLineAlert`.
Used by `.spectrum-InLineAlert-content`.", + "control": "text", + "category": "Component" + }, + "spectrum-inlinealert-content-line-height": { + "description": "Defined in `.spectrum-InLineAlert`.
Used by `.spectrum-InLineAlert-content`.", + "control": "text", + "category": "Component" + }, + "spectrum-inlinealert-border-width": { + "description": "Defined in `.spectrum-InLineAlert`.
Used by `.spectrum-InLineAlert`.", + "control": "text", + "category": "Component" + }, + "spectrum-inlinealert-border-radius": { + "description": "Defined in `.spectrum-InLineAlert`.
Used by `.spectrum-InLineAlert`.", + "control": "text", + "category": "Component" + }, + "spectrum-inlinealert-icon-size": { + "description": "Defined in `.spectrum-InLineAlert`.
Used by `.spectrum-InLineAlert-icon`.", + "control": "text", + "category": "Component" + }, + "spectrum-inlinealert-min-inline-size": { + "description": "Defined in `.spectrum-InLineAlert`.
Used by `.spectrum-InLineAlert`.", + "control": "text", + "category": "Component" + }, + "spectrum-in-line-alert-minimum-width": { + "value": "240px", + "description": "Used by `--spectrum-inlinealert-min-inline-size`.", + "control": "text", + "category": "Component" + }, + "spectrum-inlinealert-header-min-block-size": { + "description": "Defined in `.spectrum-InLineAlert`.
Used by `.spectrum-InLineAlert-header`.", + "control": "text", + "category": "Component" + }, + "spectrum-inlinealert-spacing-edge-to-text": { + "description": "Defined in `.spectrum-InLineAlert`.
Used by `.spectrum-InLineAlert`.", + "control": "text", + "category": "Component" + }, + "spectrum-inlinealert-spacing-header-to-icon": { + "description": "Defined in `.spectrum-InLineAlert`.
Used by `.spectrum-InLineAlert-header`.", + "control": "text", + "category": "Component" + }, + "spectrum-inlinealert-spacing-header-content-button": { + "description": "Defined in `.spectrum-InLineAlert`.
Used by `.spectrum-InLineAlert-content, .spectrum-InLineAlert-footer`.", + "control": "text", + "category": "Component" + }, + "spectrum-inlinealert-background-color": { + "description": "Defined in `.spectrum-InLineAlert`.
Used by `.spectrum-InLineAlert`.", + "control": "color", + "category": "Component" + }, + "spectrum-inlinealert-border-and-icon-color": { + "description": "Defined in `.spectrum-InLineAlert`.
Used by `.spectrum-InLineAlert`.", + "control": "color", + "category": "Component" + }, + "spectrum-inlinealert-header-color": { + "description": "Defined in `.spectrum-InLineAlert`.
Used by `.spectrum-InLineAlert-header`.", + "control": "color", + "category": "Component" + }, + "spectrum-inlinealert-content-color": { + "description": "Defined in `.spectrum-InLineAlert`.
Used by `.spectrum-InLineAlert-content`.", + "control": "color", + "category": "Component" + }, + "spectrum-inlinealert-border-and-icon-color-info": { + "description": "Defined in `.spectrum-InLineAlert`.
Used by `.spectrum-InLineAlert--info`, `.spectrum-InLineAlert--info .spectrum-InLineAlert-icon`.", + "control": "color", + "category": "Component" + }, + "spectrum-inlinealert-border-and-icon-color-positive": { + "description": "Defined in `.spectrum-InLineAlert`.
Used by `.spectrum-InLineAlert--positive`, `.spectrum-InLineAlert--positive .spectrum-InLineAlert-icon`.", + "control": "color", + "category": "Component" + }, + "spectrum-inlinealert-border-and-icon-color-notice": { + "description": "Defined in `.spectrum-InLineAlert`.
Used by `.spectrum-InLineAlert--notice`, `.spectrum-InLineAlert--notice .spectrum-InLineAlert-icon`.", + "control": "color", + "category": "Component" + }, + "spectrum-inlinealert-border-and-icon-color-negative": { + "description": "Defined in `.spectrum-InLineAlert`.
Used by `.spectrum-InLineAlert--negative`, `.spectrum-InLineAlert--negative .spectrum-InLineAlert-icon`.", + "control": "color", + "category": "Component" + } + }, + "global": { + "spectrum-sans-font-family-stack": { + "description": "Used by `--spectrum-inlinealert-heading-font-family`, `--spectrum-inlinealert-content-font-family`.", + "control": "text", + "category": "Global" + }, + "spectrum-heading-sans-serif-font-weight": { + "value": "700", + "description": "Used by `--spectrum-inlinealert-heading-font-weight`.", + "control": "text", + "category": "Global" + }, + "spectrum-heading-sans-serif-font-style": { + "value": "normal", + "description": "Used by `--spectrum-inlinealert-heading-font-style`.", + "control": "text", + "category": "Global" + }, + "spectrum-heading-size-xxs": { + "value": "var(--spectrum-font-size-100)", + "description": "Used by `--spectrum-inlinealert-heading-font-size`.", + "control": "text", + "category": "Global" + }, + "spectrum-heading-line-height": { + "value": "1.3", + "description": "Used by `--spectrum-inlinealert-heading-line-height`.", + "control": "text", + "category": "Global" + }, + "spectrum-body-sans-serif-font-weight": { + "value": "400", + "description": "Used by `--spectrum-inlinealert-content-font-weight`.", + "control": "text", + "category": "Global" + }, + "spectrum-body-sans-serif-font-style": { + "value": "normal", + "description": "Used by `--spectrum-inlinealert-content-font-style`.", + "control": "text", + "category": "Global" + }, + "spectrum-body-size-s": { + "value": "var(--spectrum-font-size-100)", + "description": "Used by `--spectrum-inlinealert-content-font-size`.", + "control": "text", + "category": "Global" + }, + "spectrum-body-line-height": { + "value": "1.5", + "description": "Used by `--spectrum-inlinealert-content-line-height`.", + "control": "text", + "category": "Global" + }, + "spectrum-border-width-200": { + "value": "2px", + "description": "Used by `--spectrum-inlinealert-border-width`.", + "control": "text", + "category": "Global" + }, + "spectrum-corner-radius-100": { + "value": "8px", + "description": "Used by `--spectrum-inlinealert-border-radius`.", + "control": "text", + "category": "Global" + }, + "spectrum-workflow-icon-size-100": { + "value": "20px", + "description": "Used by `--spectrum-inlinealert-icon-size`.", + "control": "text", + "category": "Global" + }, + "spectrum-component-height-50": { + "value": "20px", + "description": "Used by `--spectrum-inlinealert-header-min-block-size`.", + "control": "text", + "category": "Global" + }, + "spectrum-spacing-400": { + "value": "24px", + "description": "Used by `--spectrum-inlinealert-spacing-edge-to-text`, `--spectrum-inlinealert-spacing-header-to-icon`.", + "control": "text", + "category": "Global" + }, + "spectrum-spacing-300": { + "value": "16px", + "description": "Used by `--spectrum-inlinealert-spacing-header-content-button`.", + "control": "text", + "category": "Global" + }, + "spectrum-background-layer-2-color": { + "value": "var(--spectrum-gray-75)", + "description": "Used by `--spectrum-inlinealert-background-color`.", + "control": "color", + "category": "Global" + }, + "spectrum-neutral-visual-color": { + "value": "var(--spectrum-gray-600)", + "description": "Used by `--spectrum-inlinealert-border-and-icon-color`.", + "control": "color", + "category": "Global" + }, + "spectrum-heading-color": { + "value": "var(--spectrum-gray-900)", + "description": "Used by `--spectrum-inlinealert-header-color`.", + "control": "color", + "category": "Global" + }, + "spectrum-body-color": { + "value": "var(--spectrum-gray-800)", + "description": "Used by `--spectrum-inlinealert-content-color`.", + "control": "color", + "category": "Global" + }, + "spectrum-informative-visual-color": { + "value": "var(--spectrum-informative-color-900)", + "description": "Used by `--spectrum-inlinealert-border-and-icon-color-info`.", + "control": "color", + "category": "Global" + }, + "spectrum-positive-visual-color": { + "value": "var(--spectrum-positive-color-900)", + "description": "Used by `--spectrum-inlinealert-border-and-icon-color-positive`.", + "control": "color", + "category": "Global" + }, + "spectrum-notice-visual-color": { + "value": "var(--spectrum-notice-color-900)", + "description": "Used by `--spectrum-inlinealert-border-and-icon-color-notice`.", + "control": "color", + "category": "Global" + }, + "spectrum-negative-visual-color": { + "value": "var(--spectrum-negative-color-900)", + "description": "Used by `--spectrum-inlinealert-border-and-icon-color-negative`.", + "control": "color", + "category": "Global" + } + }, + "system-theme": {}, + "passthroughs": {}, + "high-contrast": { + "highcontrast-inlinealert-background-color": { + "value": "var(--mod-inlinealert-background-color, var(--spectrum-inlinealert-background-color))", + "description": "Defined in `.spectrum-InLineAlert`.
Used by `.spectrum-InLineAlert`.
Defaults to `var(--mod-inlinealert-background-color, var(--spectrum-inlinealert-background-color))`, if not set.", + "control": "color" + }, + "highcontrast-inlinealert-border-and-icon-color": { + "value": "var(--mod-inlinealert-border-and-icon-color-negative, var(--spectrum-inlinealert-border-and-icon-color-negative))", + "description": "Defined in `.spectrum-InLineAlert`.
Used by `.spectrum-InLineAlert`, `.spectrum-InLineAlert--info`, `.spectrum-InLineAlert--info .spectrum-InLineAlert-icon`, `.spectrum-InLineAlert--notice`, `.spectrum-InLineAlert--notice .spectrum-InLineAlert-icon`, `.spectrum-InLineAlert--positive`, `.spectrum-InLineAlert--positive .spectrum-InLineAlert-icon`, `.spectrum-InLineAlert--negative`, `.spectrum-InLineAlert--negative .spectrum-InLineAlert-icon`.
Defaults to `var(--mod-inlinealert-border-and-icon-color-negative, var(--spectrum-inlinealert-border-and-icon-color-negative))`, if not set.", + "control": "color" + }, + "highcontrast-inlinealert-header-color": { + "value": "var(--mod-inlinealert-header-color, var(--spectrum-inlinealert-header-color))", + "description": "Defined in `.spectrum-InLineAlert`.
Used by `.spectrum-InLineAlert-header`.
Defaults to `var(--mod-inlinealert-header-color, var(--spectrum-inlinealert-header-color))`, if not set.", + "control": "color" + }, + "highcontrast-inlinealert-content-color": { + "value": "var(--mod-inlinealert-content-color, var(--spectrum-inlinealert-content-color))", + "description": "Defined in `.spectrum-InLineAlert`.
Used by `.spectrum-InLineAlert-content`.
Defaults to `var(--mod-inlinealert-content-color, var(--spectrum-inlinealert-content-color))`, if not set.", + "control": "color" + } + } } diff --git a/components/inlinealert/stories/inlinealert.stories.js b/components/inlinealert/stories/inlinealert.stories.js index 6ed4d7c5f18..afea05e9645 100644 --- a/components/inlinealert/stories/inlinealert.stories.js +++ b/components/inlinealert/stories/inlinealert.stories.js @@ -1,9 +1,11 @@ import { disableDefaultModes } from "@spectrum-css/preview/modes"; -import metadata from "../dist/metadata.json"; -import packageJson from "../package.json"; import { InlineAlertGroup } from "./inlinealert.test.js"; import { Template } from "./template.js"; +// Local assets to render the component styles and structure +import metadata from "../dist/metadata.json"; +import packageJson from "../package.json"; + /** * In-line alerts display a non-modal message associated with objects in a view. These are often used in form validation, providing a place to aggregate feedback related to multiple fields. */ @@ -65,6 +67,7 @@ export default { }, packageJson, metadata, + cssprops: metadata.modifiers, }, }; diff --git a/components/link/dist/metadata.json b/components/link/dist/metadata.json index 9befaceefc4..32004c81271 100644 --- a/components/link/dist/metadata.json +++ b/components/link/dist/metadata.json @@ -11,38 +11,173 @@ ".spectrum-Link:focus-visible", ".spectrum-Link:hover" ], - "modifiers": [ - "--mod-link-animation-duration", - "--mod-link-text-color", - "--mod-link-text-color-active", - "--mod-link-text-color-black", - "--mod-link-text-color-focus", - "--mod-link-text-color-hover", - "--mod-link-text-color-primary-active", - "--mod-link-text-color-primary-default", - "--mod-link-text-color-primary-focus", - "--mod-link-text-color-primary-hover", - "--mod-link-text-color-secondary-active", - "--mod-link-text-color-secondary-default", - "--mod-link-text-color-secondary-focus", - "--mod-link-text-color-secondary-hover", - "--mod-link-text-color-white" - ], - "component": [], - "global": [ - "--spectrum-accent-content-color-default", - "--spectrum-accent-content-color-down", - "--spectrum-accent-content-color-hover", - "--spectrum-accent-content-color-key-focus", - "--spectrum-animation-duration-100", - "--spectrum-black", - "--spectrum-neutral-content-color-default", - "--spectrum-neutral-content-color-down", - "--spectrum-neutral-content-color-hover", - "--spectrum-neutral-content-color-key-focus", - "--spectrum-white" - ], - "system-theme": [], - "passthroughs": [], - "high-contrast": ["--highcontrast-link-text-color"] + "modifiers": { + "mod-link-text-color": { + "value": "var(--mod-link-text-color-primary-default, var(--spectrum-accent-content-color-default))", + "description": "Defined in `.spectrum-Link--secondary`, `.spectrum-Link:active`, `.spectrum-Link:focus-visible`, `.spectrum-Link:hover`, `.spectrum-Link--staticWhite`, `.spectrum-Link--staticBlack`.
Used by `.spectrum-Link`.
Defaults to `var(--mod-link-text-color-primary-default, var(--spectrum-accent-content-color-default))`, if not set.", + "control": "color", + "category": "Modifier" + }, + "mod-link-text-color-secondary-default": { + "value": "var(--spectrum-gray-800)", + "description": "Used by `--mod-link-text-color`.
Defaults to `var(--spectrum-neutral-content-color-default)`, if not set.", + "control": "color", + "category": "Modifier" + }, + "mod-link-text-color-hover": { + "value": "var(--mod-link-text-color-primary-hover, var(--spectrum-accent-content-color-hover))", + "description": "Defined in `.spectrum-Link--secondary`, `.spectrum-Link--staticWhite`, `.spectrum-Link--staticBlack`.
Used by `--mod-link-text-color`.
Defaults to `var(--mod-link-text-color-primary-hover, var(--spectrum-accent-content-color-hover))`, if not set.", + "control": "color", + "category": "Modifier" + }, + "mod-link-text-color-secondary-hover": { + "value": "var(--spectrum-gray-900)", + "description": "Used by `--mod-link-text-color-hover`.
Defaults to `var(--spectrum-neutral-content-color-hover)`, if not set.", + "control": "color", + "category": "Modifier" + }, + "mod-link-text-color-active": { + "value": "var(--mod-link-text-color-primary-active, var(--spectrum-accent-content-color-down))", + "description": "Defined in `.spectrum-Link--secondary`, `.spectrum-Link--staticWhite`, `.spectrum-Link--staticBlack`.
Used by `--mod-link-text-color`.
Defaults to `var(--mod-link-text-color-primary-active, var(--spectrum-accent-content-color-down))`, if not set.", + "control": "color", + "category": "Modifier" + }, + "mod-link-text-color-secondary-active": { + "value": "var(--spectrum-gray-900)", + "description": "Used by `--mod-link-text-color-active`.
Defaults to `var(--spectrum-neutral-content-color-down)`, if not set.", + "control": "color", + "category": "Modifier" + }, + "mod-link-text-color-focus": { + "value": "var(--mod-link-text-color-primary-focus, var(--spectrum-accent-content-color-key-focus))", + "description": "Defined in `.spectrum-Link--secondary`, `.spectrum-Link--staticWhite`, `.spectrum-Link--staticBlack`.
Used by `--mod-link-text-color`.
Defaults to `var(--mod-link-text-color-primary-focus, var(--spectrum-accent-content-color-key-focus))`, if not set.", + "control": "color", + "category": "Modifier" + }, + "mod-link-text-color-secondary-focus": { + "value": "var(--spectrum-gray-900)", + "description": "Used by `--mod-link-text-color-focus`.
Defaults to `var(--spectrum-neutral-content-color-key-focus)`, if not set.", + "control": "color", + "category": "Modifier" + }, + "mod-link-animation-duration": { + "value": "var(--spectrum-animation-duration-100)", + "description": "Used by `.spectrum-Link`.
Defaults to `var(--spectrum-animation-duration-100)`, if not set.", + "control": "text", + "category": "Modifier" + }, + "mod-link-text-color-primary-default": { + "value": "var(--spectrum-accent-color-900)", + "description": "Used by `.spectrum-Link`.
Defaults to `var(--spectrum-accent-content-color-default)`, if not set.", + "control": "color", + "category": "Modifier" + }, + "mod-link-text-color-primary-active": { + "value": "var(--spectrum-accent-color-1000)", + "description": "Used by `--mod-link-text-color`.
Defaults to `var(--spectrum-accent-content-color-down)`, if not set.", + "control": "color", + "category": "Modifier" + }, + "mod-link-text-color-primary-focus": { + "value": "var(--spectrum-accent-color-1000)", + "description": "Used by `--mod-link-text-color`.
Defaults to `var(--spectrum-accent-content-color-key-focus)`, if not set.", + "control": "color", + "category": "Modifier" + }, + "mod-link-text-color-primary-hover": { + "value": "var(--spectrum-accent-color-1000)", + "description": "Used by `--mod-link-text-color`.
Defaults to `var(--spectrum-accent-content-color-hover)`, if not set.", + "control": "color", + "category": "Modifier" + }, + "mod-link-text-color-white": { + "value": "light-dark(rgb(255, 255, 255), rgb(255, 255, 255))", + "description": "Used by `--mod-link-text-color`, `--mod-link-text-color-hover`, `--mod-link-text-color-active`, `--mod-link-text-color-focus`.
Defaults to `var(--spectrum-white)`, if not set.", + "control": "color", + "category": "Modifier" + }, + "mod-link-text-color-black": { + "value": "rgb(0, 0, 0)", + "description": "Used by `--mod-link-text-color`, `--mod-link-text-color-hover`, `--mod-link-text-color-active`, `--mod-link-text-color-focus`.
Defaults to `var(--spectrum-black)`, if not set.", + "control": "color", + "category": "Modifier" + } + }, + "component": {}, + "global": { + "spectrum-neutral-content-color-default": { + "value": "var(--spectrum-gray-800)", + "description": "Used by `--mod-link-text-color`.", + "control": "color", + "category": "Global" + }, + "spectrum-neutral-content-color-hover": { + "value": "var(--spectrum-gray-900)", + "description": "Used by `--mod-link-text-color-hover`.", + "control": "color", + "category": "Global" + }, + "spectrum-neutral-content-color-down": { + "value": "var(--spectrum-gray-900)", + "description": "Used by `--mod-link-text-color-active`.", + "control": "color", + "category": "Global" + }, + "spectrum-neutral-content-color-key-focus": { + "value": "var(--spectrum-gray-900)", + "description": "Used by `--mod-link-text-color-focus`.", + "control": "color", + "category": "Global" + }, + "spectrum-animation-duration-100": { + "description": "Used by `.spectrum-Link`.", + "control": "text", + "category": "Global" + }, + "spectrum-accent-content-color-default": { + "value": "var(--spectrum-accent-color-900)", + "description": "Used by `.spectrum-Link`.", + "control": "color", + "category": "Global" + }, + "spectrum-accent-content-color-down": { + "value": "var(--spectrum-accent-color-1000)", + "description": "Used by `--mod-link-text-color`.", + "control": "color", + "category": "Global" + }, + "spectrum-accent-content-color-key-focus": { + "value": "var(--spectrum-accent-color-1000)", + "description": "Used by `--mod-link-text-color`.", + "control": "color", + "category": "Global" + }, + "spectrum-accent-content-color-hover": { + "value": "var(--spectrum-accent-color-1000)", + "description": "Used by `--mod-link-text-color`.", + "control": "color", + "category": "Global" + }, + "spectrum-white": { + "value": "light-dark(rgb(255, 255, 255), rgb(255, 255, 255))", + "description": "Used by `--mod-link-text-color`, `--mod-link-text-color-hover`, `--mod-link-text-color-active`, `--mod-link-text-color-focus`.", + "control": "text", + "category": "Global" + }, + "spectrum-black": { + "value": "rgb(0, 0, 0)", + "description": "Used by `--mod-link-text-color`, `--mod-link-text-color-hover`, `--mod-link-text-color-active`, `--mod-link-text-color-focus`.", + "control": "text", + "category": "Global" + } + }, + "system-theme": {}, + "passthroughs": {}, + "high-contrast": { + "highcontrast-link-text-color": { + "value": "var(--mod-link-text-color, var(--mod-link-text-color-primary-default, var(--spectrum-accent-content-color-default)))", + "description": "Defined in `.spectrum-Link`.
Used by `.spectrum-Link`.
Defaults to `var(--mod-link-text-color, var(--mod-link-text-color-primary-default, var(--spectrum-accent-content-color-default)))`, if not set.", + "control": "color" + } + } } diff --git a/components/link/stories/link.stories.js b/components/link/stories/link.stories.js index 53c71bfacb2..442d22dfdac 100644 --- a/components/link/stories/link.stories.js +++ b/components/link/stories/link.stories.js @@ -1,10 +1,12 @@ import { disableDefaultModes } from "@spectrum-css/preview/modes"; import { isActive, isFocused, isHovered, isQuiet, staticColor } from "@spectrum-css/preview/types"; -import metadata from "../dist/metadata.json"; -import packageJson from "../package.json"; import { LinkGroup } from "./link.test.js"; import { TemplateWithFillerText } from "./template.js"; +// Local assets to render the component styles and structure +import metadata from "../dist/metadata.json"; +import packageJson from "../package.json"; + /** * A link allows users to navigate to a different location. They can be presented in-line inside a paragraph or as standalone text. */ @@ -76,6 +78,7 @@ export default { }, packageJson, metadata, + cssprops: metadata.modifiers, }, }; diff --git a/components/logicbutton/dist/metadata.json b/components/logicbutton/dist/metadata.json index 6adfbf58b24..2004fc7b6c1 100644 --- a/components/logicbutton/dist/metadata.json +++ b/components/logicbutton/dist/metadata.json @@ -6,115 +6,508 @@ ".spectrum-LogicButton--and:hover:not([disabled])", ".spectrum-LogicButton--or", ".spectrum-LogicButton--or:hover:not([disabled])", - ".spectrum-LogicButton.is-disabled", ".spectrum-LogicButton::-moz-focus-inner", ".spectrum-LogicButton:after", ".spectrum-LogicButton:disabled", ".spectrum-LogicButton:focus", ".spectrum-LogicButton:focus-visible", - ".spectrum-LogicButton:focus-visible:after" + ".spectrum-LogicButton:focus-visible:after", + ".spectrum-LogicButton.is-disabled" ], - "modifiers": [ - "--mod-animation-duration-100", - "--mod-focus-indicator-gap", - "--mod-line-height-100", - "--mod-logic-button-and-background-color", - "--mod-logic-button-and-background-color-disabled", - "--mod-logic-button-and-background-color-hover", - "--mod-logic-button-and-background-color-hover-disabled", - "--mod-logic-button-and-border-color", - "--mod-logic-button-and-border-color-disabled", - "--mod-logic-button-and-border-color-hover", - "--mod-logic-button-and-border-color-hover-disabled", - "--mod-logic-button-and-text-color", - "--mod-logic-button-and-text-color-disabled", - "--mod-logic-button-border-radius", - "--mod-logic-button-border-width", - "--mod-logic-button-focus-indicator-color", - "--mod-logic-button-focus-indicator-gap", - "--mod-logic-button-focus-indicator-width", - "--mod-logic-button-font-size", - "--mod-logic-button-font-weight", - "--mod-logic-button-height", - "--mod-logic-button-or-background-color", - "--mod-logic-button-or-background-color-disabled", - "--mod-logic-button-or-background-color-hover", - "--mod-logic-button-or-background-color-hover-disabled", - "--mod-logic-button-or-border-color", - "--mod-logic-button-or-border-color-disabled", - "--mod-logic-button-or-border-color-hover", - "--mod-logic-button-or-border-color-hover-disabled", - "--mod-logic-button-or-text-color", - "--mod-logic-button-or-text-color-disabled", - "--mod-logic-button-padding", - "--mod-sans-font-family-stack" - ], - "component": [ - "--spectrum-logic-button-and-background-color", - "--spectrum-logic-button-and-background-color-disabled", - "--spectrum-logic-button-and-background-color-hover", - "--spectrum-logic-button-and-background-color-hover-disabled", - "--spectrum-logic-button-and-border-color", - "--spectrum-logic-button-and-border-color-disabled", - "--spectrum-logic-button-and-border-color-hover", - "--spectrum-logic-button-and-border-color-hover-disabled", - "--spectrum-logic-button-and-text-color", - "--spectrum-logic-button-border-radius", - "--spectrum-logic-button-or-background-color", - "--spectrum-logic-button-or-background-color-disabled", - "--spectrum-logic-button-or-background-color-hover", - "--spectrum-logic-button-or-background-color-hover-disabled", - "--spectrum-logic-button-or-border-color", - "--spectrum-logic-button-or-border-color-disabled", - "--spectrum-logic-button-or-border-color-hover", - "--spectrum-logic-button-or-border-color-hover-disabled", - "--spectrum-logic-button-or-text-color", - "--spectrum-logic-button-text-color-disabled" - ], - "global": [ - "--spectrum-animation-duration-100", - "--spectrum-blue-1100", - "--spectrum-bold-font-weight", - "--spectrum-border-width-200", - "--spectrum-component-edge-to-text-50", - "--spectrum-corner-radius-100", - "--spectrum-focus-indicator-color", - "--spectrum-focus-indicator-gap", - "--spectrum-focus-indicator-thickness", - "--spectrum-font-size-100", - "--spectrum-gray-100", - "--spectrum-gray-500", - "--spectrum-line-height-100", - "--spectrum-sans-font-family-stack", - "--spectrum-white" - ], - "system-theme": [ - "--system-logic-button-and-background-color-disabled", - "--system-logic-button-and-background-color-hover-disabled", - "--system-logic-button-and-border-color-disabled", - "--system-logic-button-and-border-color-hover-disabled", - "--system-logic-button-or-background-color-disabled", - "--system-logic-button-or-background-color-hover-disabled", - "--system-logic-button-or-border-color-disabled", - "--system-logic-button-or-border-color-hover-disabled" - ], - "passthroughs": [ - "--mod-button-animation-duration", - "--mod-button-focus-indicator-gap", - "--mod-button-font-family", - "--mod-button-line-height" - ], - "high-contrast": [ - "--highcontrast-logic-button-and-background-color", - "--highcontrast-logic-button-and-background-color-hover", - "--highcontrast-logic-button-and-border-color", - "--highcontrast-logic-button-and-border-color-hover", - "--highcontrast-logic-button-and-text-color", - "--highcontrast-logic-button-focus-indicator-color", - "--highcontrast-logic-button-or-background-color", - "--highcontrast-logic-button-or-background-color-hover", - "--highcontrast-logic-button-or-border-color", - "--highcontrast-logic-button-or-border-color-hover", - "--highcontrast-logic-button-or-text-color" - ] + "modifiers": { + "mod-sans-font-family-stack": { + "value": "var(--spectrum-sans-font-family-stack)", + "description": "Used by `.spectrum-LogicButton`.
Defaults to `var(--spectrum-sans-font-family-stack)`, if not set.", + "control": "text", + "category": "Modifier" + }, + "mod-line-height-100": { + "value": "1.3", + "description": "Used by `.spectrum-LogicButton`.
Defaults to `var(--spectrum-line-height-100)`, if not set.", + "control": "text", + "category": "Modifier" + }, + "mod-animation-duration-100": { + "value": "var(--spectrum-animation-duration-100)", + "description": "Used by `.spectrum-LogicButton`.
Defaults to `var(--spectrum-animation-duration-100)`, if not set.", + "control": "text", + "category": "Modifier" + }, + "mod-focus-indicator-gap": { + "value": "2px", + "description": "Used by `.spectrum-LogicButton:focus-visible:after`.
Defaults to `var(--spectrum-focus-indicator-gap)`, if not set.", + "control": "text", + "category": "Modifier" + }, + "mod-logic-button-height": { + "description": "Used by `.spectrum-LogicButton`.", + "control": "text", + "category": "Modifier" + }, + "mod-logic-button-padding": { + "value": "8px", + "description": "Used by `.spectrum-LogicButton`.
Defaults to `var(--spectrum-component-edge-to-text-50)`, if not set.", + "control": "text", + "category": "Modifier" + }, + "mod-logic-button-border-width": { + "value": "2px", + "description": "Used by `.spectrum-LogicButton`.
Defaults to `var(--spectrum-border-width-200)`, if not set.", + "control": "text", + "category": "Modifier" + }, + "mod-logic-button-border-radius": { + "value": "var(--spectrum-logic-button-border-radius)", + "description": "Used by `.spectrum-LogicButton`, `.spectrum-LogicButton:after`.
Defaults to `var(--spectrum-logic-button-border-radius)`, if not set.", + "control": "text", + "category": "Modifier" + }, + "mod-logic-button-font-size": { + "value": "14px", + "description": "Used by `.spectrum-LogicButton`.
Defaults to `var(--spectrum-font-size-100)`, if not set.", + "control": "text", + "category": "Modifier" + }, + "mod-logic-button-font-weight": { + "value": "700", + "description": "Used by `.spectrum-LogicButton`.
Defaults to `var(--spectrum-bold-font-weight)`, if not set.", + "control": "text", + "category": "Modifier" + }, + "mod-logic-button-focus-indicator-gap": { + "value": "2px", + "description": "Used by `.spectrum-LogicButton:after`.
Defaults to `var(--spectrum-focus-indicator-gap)`, if not set.", + "control": "text", + "category": "Modifier" + }, + "mod-logic-button-focus-indicator-width": { + "value": "2px", + "description": "Used by `.spectrum-LogicButton:focus-visible:after`.
Defaults to `var(--spectrum-focus-indicator-thickness)`, if not set.", + "control": "text", + "category": "Modifier" + }, + "mod-logic-button-focus-indicator-color": { + "value": "var(--spectrum-blue-800)", + "description": "Used by `.spectrum-LogicButton:focus-visible:after`.
Defaults to `var(--spectrum-focus-indicator-color)`, if not set.", + "control": "color", + "category": "Modifier" + }, + "mod-logic-button-and-background-color": { + "value": "var(--spectrum-logic-button-and-background-color)", + "description": "Defined in `.spectrum-LogicButton.is-disabled, .spectrum-LogicButton:disabled`.
Used by `.spectrum-LogicButton--and`.
Defaults to `var(--spectrum-logic-button-and-background-color)`, if not set.", + "control": "color", + "category": "Modifier" + }, + "mod-logic-button-and-background-color-disabled": { + "value": "var(--spectrum-logic-button-and-background-color-disabled)", + "description": "Used by `--mod-logic-button-and-background-color`.
Defaults to `var(--spectrum-logic-button-and-background-color-disabled)`, if not set.", + "control": "color", + "category": "Modifier" + }, + "mod-logic-button-and-border-color": { + "value": "var(--spectrum-logic-button-and-border-color)", + "description": "Defined in `.spectrum-LogicButton.is-disabled, .spectrum-LogicButton:disabled`.
Used by `.spectrum-LogicButton--and`.
Defaults to `var(--spectrum-logic-button-and-border-color)`, if not set.", + "control": "color", + "category": "Modifier" + }, + "mod-logic-button-and-border-color-disabled": { + "value": "var(--spectrum-logic-button-and-border-color-disabled)", + "description": "Used by `--mod-logic-button-and-border-color`.
Defaults to `var(--spectrum-logic-button-and-border-color-disabled)`, if not set.", + "control": "color", + "category": "Modifier" + }, + "mod-logic-button-and-text-color": { + "value": "var(--spectrum-logic-button-and-text-color)", + "description": "Defined in `.spectrum-LogicButton.is-disabled, .spectrum-LogicButton:disabled`.
Used by `.spectrum-LogicButton--and`.
Defaults to `var(--spectrum-logic-button-and-text-color)`, if not set.", + "control": "color", + "category": "Modifier" + }, + "mod-logic-button-and-text-color-disabled": { + "value": "var(--spectrum-logic-button-text-color-disabled)", + "description": "Used by `--mod-logic-button-and-text-color`.
Defaults to `var(--spectrum-logic-button-text-color-disabled)`, if not set.", + "control": "color", + "category": "Modifier" + }, + "mod-logic-button-and-background-color-hover": { + "value": "var(--spectrum-logic-button-and-background-color-hover)", + "description": "Defined in `.spectrum-LogicButton.is-disabled, .spectrum-LogicButton:disabled`.
Used by `.spectrum-LogicButton--and:hover:not([disabled])`.
Defaults to `var(--spectrum-logic-button-and-background-color-hover)`, if not set.", + "control": "color", + "category": "Modifier" + }, + "mod-logic-button-and-background-color-hover-disabled": { + "value": "var(--spectrum-logic-button-and-background-color-hover-disabled)", + "description": "Used by `--mod-logic-button-and-background-color-hover`.
Defaults to `var(--spectrum-logic-button-and-background-color-hover-disabled)`, if not set.", + "control": "color", + "category": "Modifier" + }, + "mod-logic-button-and-border-color-hover": { + "value": "var(--spectrum-logic-button-and-border-color-hover)", + "description": "Defined in `.spectrum-LogicButton.is-disabled, .spectrum-LogicButton:disabled`.
Used by `.spectrum-LogicButton--and:hover:not([disabled])`.
Defaults to `var(--spectrum-logic-button-and-border-color-hover)`, if not set.", + "control": "color", + "category": "Modifier" + }, + "mod-logic-button-and-border-color-hover-disabled": { + "value": "var(--spectrum-logic-button-and-border-color-hover-disabled)", + "description": "Used by `--mod-logic-button-and-border-color-hover`.
Defaults to `var(--spectrum-logic-button-and-border-color-hover-disabled)`, if not set.", + "control": "color", + "category": "Modifier" + }, + "mod-logic-button-or-background-color": { + "value": "var(--spectrum-logic-button-or-background-color)", + "description": "Defined in `.spectrum-LogicButton.is-disabled, .spectrum-LogicButton:disabled`.
Used by `.spectrum-LogicButton--or`.
Defaults to `var(--spectrum-logic-button-or-background-color)`, if not set.", + "control": "color", + "category": "Modifier" + }, + "mod-logic-button-or-background-color-disabled": { + "value": "var(--spectrum-logic-button-or-background-color-disabled)", + "description": "Used by `--mod-logic-button-or-background-color`.
Defaults to `var(--spectrum-logic-button-or-background-color-disabled)`, if not set.", + "control": "color", + "category": "Modifier" + }, + "mod-logic-button-or-border-color": { + "value": "var(--spectrum-logic-button-or-border-color)", + "description": "Defined in `.spectrum-LogicButton.is-disabled, .spectrum-LogicButton:disabled`.
Used by `.spectrum-LogicButton--or`.
Defaults to `var(--spectrum-logic-button-or-border-color)`, if not set.", + "control": "color", + "category": "Modifier" + }, + "mod-logic-button-or-border-color-disabled": { + "value": "var(--spectrum-logic-button-or-border-color-disabled)", + "description": "Used by `--mod-logic-button-or-border-color`.
Defaults to `var(--spectrum-logic-button-or-border-color-disabled)`, if not set.", + "control": "color", + "category": "Modifier" + }, + "mod-logic-button-or-text-color": { + "value": "var(--spectrum-logic-button-or-text-color)", + "description": "Defined in `.spectrum-LogicButton.is-disabled, .spectrum-LogicButton:disabled`.
Used by `.spectrum-LogicButton--or`.
Defaults to `var(--spectrum-logic-button-or-text-color)`, if not set.", + "control": "color", + "category": "Modifier" + }, + "mod-logic-button-or-text-color-disabled": { + "value": "var(--spectrum-logic-button-text-color-disabled)", + "description": "Used by `--mod-logic-button-or-text-color`.
Defaults to `var(--spectrum-logic-button-text-color-disabled)`, if not set.", + "control": "color", + "category": "Modifier" + }, + "mod-logic-button-or-background-color-hover": { + "value": "var(--spectrum-logic-button-or-background-color-hover)", + "description": "Defined in `.spectrum-LogicButton.is-disabled, .spectrum-LogicButton:disabled`.
Used by `.spectrum-LogicButton--or:hover:not([disabled])`.
Defaults to `var(--spectrum-logic-button-or-background-color-hover)`, if not set.", + "control": "color", + "category": "Modifier" + }, + "mod-logic-button-or-background-color-hover-disabled": { + "value": "var(--spectrum-logic-button-or-background-color-hover-disabled)", + "description": "Used by `--mod-logic-button-or-background-color-hover`.
Defaults to `var(--spectrum-logic-button-or-background-color-hover-disabled)`, if not set.", + "control": "color", + "category": "Modifier" + }, + "mod-logic-button-or-border-color-hover": { + "value": "var(--spectrum-logic-button-or-border-color-hover)", + "description": "Defined in `.spectrum-LogicButton.is-disabled, .spectrum-LogicButton:disabled`.
Used by `.spectrum-LogicButton--or:hover:not([disabled])`.
Defaults to `var(--spectrum-logic-button-or-border-color-hover)`, if not set.", + "control": "color", + "category": "Modifier" + }, + "mod-logic-button-or-border-color-hover-disabled": { + "value": "var(--spectrum-logic-button-or-border-color-hover-disabled)", + "description": "Used by `--mod-logic-button-or-border-color-hover`.
Defaults to `var(--spectrum-logic-button-or-border-color-hover-disabled)`, if not set.", + "control": "color", + "category": "Modifier" + } + }, + "component": { + "spectrum-logic-button-border-radius": { + "description": "Defined in `.spectrum-LogicButton`.
Used by `.spectrum-LogicButton`, `.spectrum-LogicButton:after`.", + "control": "text", + "category": "Component" + }, + "spectrum-logic-button-and-text-color": { + "description": "Defined in `.spectrum-LogicButton`.
Used by `.spectrum-LogicButton--and`.", + "control": "color", + "category": "Component" + }, + "spectrum-logic-button-and-background-color-hover": { + "description": "Defined in `.spectrum-LogicButton`.
Used by `.spectrum-LogicButton--and:hover:not([disabled])`.", + "control": "color", + "category": "Component" + }, + "spectrum-logic-button-and-border-color-hover": { + "description": "Defined in `.spectrum-LogicButton`.
Used by `.spectrum-LogicButton--and:hover:not([disabled])`.", + "control": "color", + "category": "Component" + }, + "spectrum-logic-button-or-text-color": { + "description": "Defined in `.spectrum-LogicButton`.
Used by `.spectrum-LogicButton--or`.", + "control": "color", + "category": "Component" + }, + "spectrum-logic-button-text-color-disabled": { + "description": "Defined in `.spectrum-LogicButton`.
Used by `--mod-logic-button-and-text-color`, `--mod-logic-button-or-text-color`.", + "control": "color", + "category": "Component" + }, + "spectrum-logic-button-and-background-color-disabled": { + "description": "Defined in `.spectrum-LogicButton`.
Used by `--mod-logic-button-and-background-color`.", + "control": "color", + "category": "Component" + }, + "spectrum-logic-button-and-border-color-disabled": { + "description": "Defined in `.spectrum-LogicButton`.
Used by `--mod-logic-button-and-border-color`.", + "control": "color", + "category": "Component" + }, + "spectrum-logic-button-and-background-color-hover-disabled": { + "description": "Defined in `.spectrum-LogicButton`.
Used by `--mod-logic-button-and-background-color-hover`.", + "control": "color", + "category": "Component" + }, + "spectrum-logic-button-and-border-color-hover-disabled": { + "description": "Defined in `.spectrum-LogicButton`.
Used by `--mod-logic-button-and-border-color-hover`.", + "control": "color", + "category": "Component" + }, + "spectrum-logic-button-or-background-color-disabled": { + "description": "Defined in `.spectrum-LogicButton`.
Used by `--mod-logic-button-or-background-color`.", + "control": "color", + "category": "Component" + }, + "spectrum-logic-button-or-border-color-disabled": { + "description": "Defined in `.spectrum-LogicButton`.
Used by `--mod-logic-button-or-border-color`.", + "control": "color", + "category": "Component" + }, + "spectrum-logic-button-or-background-color-hover-disabled": { + "description": "Defined in `.spectrum-LogicButton`.
Used by `--mod-logic-button-or-background-color-hover`.", + "control": "color", + "category": "Component" + }, + "spectrum-logic-button-or-border-color-hover-disabled": { + "description": "Defined in `.spectrum-LogicButton`.
Used by `--mod-logic-button-or-border-color-hover`.", + "control": "color", + "category": "Component" + }, + "spectrum-logic-button-and-background-color": { + "description": "Used by `.spectrum-LogicButton--and`.", + "control": "color", + "category": "Component" + }, + "spectrum-logic-button-and-border-color": { + "description": "Used by `.spectrum-LogicButton--and`.", + "control": "color", + "category": "Component" + }, + "spectrum-logic-button-or-background-color": { + "description": "Used by `.spectrum-LogicButton--or`.", + "control": "color", + "category": "Component" + }, + "spectrum-logic-button-or-border-color": { + "description": "Used by `.spectrum-LogicButton--or`.", + "control": "color", + "category": "Component" + }, + "spectrum-logic-button-or-background-color-hover": { + "description": "Used by `.spectrum-LogicButton--or:hover:not([disabled])`.", + "control": "color", + "category": "Component" + }, + "spectrum-logic-button-or-border-color-hover": { + "description": "Used by `.spectrum-LogicButton--or:hover:not([disabled])`.", + "control": "color", + "category": "Component" + } + }, + "global": { + "spectrum-sans-font-family-stack": { + "description": "Used by `.spectrum-LogicButton`.", + "control": "text", + "category": "Global" + }, + "spectrum-line-height-100": { + "value": "1.3", + "description": "Used by `.spectrum-LogicButton`.", + "control": "text", + "category": "Global" + }, + "spectrum-animation-duration-100": { + "description": "Used by `.spectrum-LogicButton`, `.spectrum-LogicButton:after`.", + "control": "text", + "category": "Global" + }, + "spectrum-focus-indicator-gap": { + "value": "2px", + "description": "Used by `.spectrum-LogicButton:after`, `.spectrum-LogicButton:focus-visible:after`.", + "control": "text", + "category": "Global" + }, + "spectrum-gray-100": { + "value": "light-dark(rgb(233, 233, 233), rgb(44, 44, 44))", + "description": "Used by `--system-logic-button-and-background-color-disabled`, `--system-logic-button-and-border-color-disabled`, `--system-logic-button-and-background-color-hover-disabled`, `--system-logic-button-and-border-color-hover-disabled`, `--system-logic-button-or-background-color-disabled`, `--system-logic-button-or-border-color-disabled`, `--system-logic-button-or-background-color-hover-disabled`, `--system-logic-button-or-border-color-hover-disabled`.", + "control": "text", + "category": "Global" + }, + "spectrum-corner-radius-100": { + "value": "8px", + "description": "Used by `--spectrum-logic-button-border-radius`.", + "control": "text", + "category": "Global" + }, + "spectrum-white": { + "value": "light-dark(rgb(255, 255, 255), rgb(255, 255, 255))", + "description": "Used by `--spectrum-logic-button-and-text-color`, `--spectrum-logic-button-or-text-color`.", + "control": "text", + "category": "Global" + }, + "spectrum-blue-1100": { + "value": "light-dark(rgb(29, 62, 207), rgb(124, 169, 252))", + "description": "Used by `--spectrum-logic-button-and-background-color-hover`, `--spectrum-logic-button-and-border-color-hover`.", + "control": "text", + "category": "Global" + }, + "spectrum-gray-500": { + "value": "light-dark(rgb(143, 143, 143), rgb(109, 109, 109))", + "description": "Used by `--spectrum-logic-button-text-color-disabled`.", + "control": "text", + "category": "Global" + }, + "spectrum-component-edge-to-text-50": { + "value": "8px", + "description": "Used by `.spectrum-LogicButton`.", + "control": "text", + "category": "Global" + }, + "spectrum-border-width-200": { + "value": "2px", + "description": "Used by `.spectrum-LogicButton`.", + "control": "text", + "category": "Global" + }, + "spectrum-font-size-100": { + "value": "14px", + "description": "Used by `.spectrum-LogicButton`.", + "control": "text", + "category": "Global" + }, + "spectrum-bold-font-weight": { + "value": "700", + "description": "Used by `.spectrum-LogicButton`.", + "control": "text", + "category": "Global" + }, + "spectrum-focus-indicator-thickness": { + "value": "2px", + "description": "Used by `.spectrum-LogicButton:focus-visible:after`.", + "control": "text", + "category": "Global" + }, + "spectrum-focus-indicator-color": { + "value": "var(--spectrum-blue-800)", + "description": "Used by `.spectrum-LogicButton:focus-visible:after`.", + "control": "color", + "category": "Global" + } + }, + "system-theme": { + "system-logic-button-and-background-color-disabled": { + "description": "Defined in `.spectrum`.
Used by `--spectrum-logic-button-and-background-color-disabled`.", + "control": "color" + }, + "system-logic-button-and-border-color-disabled": { + "description": "Defined in `.spectrum`.
Used by `--spectrum-logic-button-and-border-color-disabled`.", + "control": "color" + }, + "system-logic-button-and-background-color-hover-disabled": { + "description": "Defined in `.spectrum`.
Used by `--spectrum-logic-button-and-background-color-hover-disabled`.", + "control": "color" + }, + "system-logic-button-and-border-color-hover-disabled": { + "description": "Defined in `.spectrum`.
Used by `--spectrum-logic-button-and-border-color-hover-disabled`.", + "control": "color" + }, + "system-logic-button-or-background-color-disabled": { + "description": "Defined in `.spectrum`.
Used by `--spectrum-logic-button-or-background-color-disabled`.", + "control": "color" + }, + "system-logic-button-or-border-color-disabled": { + "description": "Defined in `.spectrum`.
Used by `--spectrum-logic-button-or-border-color-disabled`.", + "control": "color" + }, + "system-logic-button-or-background-color-hover-disabled": { + "description": "Defined in `.spectrum`.
Used by `--spectrum-logic-button-or-background-color-hover-disabled`.", + "control": "color" + }, + "system-logic-button-or-border-color-hover-disabled": { + "description": "Defined in `.spectrum`.
Used by `--spectrum-logic-button-or-border-color-hover-disabled`.", + "control": "color" + } + }, + "passthroughs": { + "mod-button-font-family": { + "category": "Passthrough" + }, + "mod-button-line-height": { + "category": "Passthrough" + }, + "mod-button-animation-duration": { + "category": "Passthrough" + }, + "mod-button-focus-indicator-gap": { + "category": "Passthrough" + } + }, + "high-contrast": { + "highcontrast-logic-button-focus-indicator-color": { + "value": "var(--mod-logic-button-focus-indicator-color, var(--spectrum-focus-indicator-color))", + "description": "Defined in `.spectrum-LogicButton:after`.
Used by `.spectrum-LogicButton:focus-visible:after`.
Defaults to `var(--mod-logic-button-focus-indicator-color, var(--spectrum-focus-indicator-color))`, if not set.", + "control": "color" + }, + "highcontrast-logic-button-and-background-color": { + "value": "var(--mod-logic-button-and-background-color, var(--spectrum-logic-button-and-background-color))", + "description": "Defined in `.spectrum-LogicButton`, `.spectrum-LogicButton.is-disabled, .spectrum-LogicButton:disabled`.
Used by `.spectrum-LogicButton--and`.
Defaults to `var(--mod-logic-button-and-background-color, var(--spectrum-logic-button-and-background-color))`, if not set.", + "control": "color" + }, + "highcontrast-logic-button-and-border-color": { + "value": "var(--mod-logic-button-and-border-color, var(--spectrum-logic-button-and-border-color))", + "description": "Defined in `.spectrum-LogicButton`, `.spectrum-LogicButton.is-disabled, .spectrum-LogicButton:disabled`.
Used by `.spectrum-LogicButton--and`.
Defaults to `var(--mod-logic-button-and-border-color, var(--spectrum-logic-button-and-border-color))`, if not set.", + "control": "color" + }, + "highcontrast-logic-button-and-text-color": { + "value": "var(--mod-logic-button-and-text-color, var(--spectrum-logic-button-and-text-color))", + "description": "Defined in `.spectrum-LogicButton`, `.spectrum-LogicButton.is-disabled, .spectrum-LogicButton:disabled`.
Used by `.spectrum-LogicButton--and`.
Defaults to `var(--mod-logic-button-and-text-color, var(--spectrum-logic-button-and-text-color))`, if not set.", + "control": "color" + }, + "highcontrast-logic-button-or-background-color": { + "value": "var(--mod-logic-button-or-background-color, var(--spectrum-logic-button-or-background-color))", + "description": "Defined in `.spectrum-LogicButton`, `.spectrum-LogicButton.is-disabled, .spectrum-LogicButton:disabled`.
Used by `.spectrum-LogicButton--or`.
Defaults to `var(--mod-logic-button-or-background-color, var(--spectrum-logic-button-or-background-color))`, if not set.", + "control": "color" + }, + "highcontrast-logic-button-or-border-color": { + "value": "var(--mod-logic-button-or-border-color, var(--spectrum-logic-button-or-border-color))", + "description": "Defined in `.spectrum-LogicButton`, `.spectrum-LogicButton.is-disabled, .spectrum-LogicButton:disabled`.
Used by `.spectrum-LogicButton--or`.
Defaults to `var(--mod-logic-button-or-border-color, var(--spectrum-logic-button-or-border-color))`, if not set.", + "control": "color" + }, + "highcontrast-logic-button-or-text-color": { + "value": "var(--mod-logic-button-or-text-color, var(--spectrum-logic-button-or-text-color))", + "description": "Defined in `.spectrum-LogicButton`, `.spectrum-LogicButton.is-disabled, .spectrum-LogicButton:disabled`.
Used by `.spectrum-LogicButton--or`.
Defaults to `var(--mod-logic-button-or-text-color, var(--spectrum-logic-button-or-text-color))`, if not set.", + "control": "color" + }, + "highcontrast-logic-button-and-background-color-hover": { + "value": "var(--mod-logic-button-and-background-color-hover, var(--spectrum-logic-button-and-background-color-hover))", + "description": "Defined in `.spectrum-LogicButton`.
Used by `.spectrum-LogicButton--and:hover:not([disabled])`.
Defaults to `var(--mod-logic-button-and-background-color-hover, var(--spectrum-logic-button-and-background-color-hover))`, if not set.", + "control": "color" + }, + "highcontrast-logic-button-and-border-color-hover": { + "value": "var(--mod-logic-button-and-border-color-hover, var(--spectrum-logic-button-and-border-color-hover))", + "description": "Defined in `.spectrum-LogicButton`.
Used by `.spectrum-LogicButton--and:hover:not([disabled])`.
Defaults to `var(--mod-logic-button-and-border-color-hover, var(--spectrum-logic-button-and-border-color-hover))`, if not set.", + "control": "color" + }, + "highcontrast-logic-button-or-background-color-hover": { + "value": "var(--mod-logic-button-or-background-color-hover, var(--spectrum-logic-button-or-background-color-hover))", + "description": "Defined in `.spectrum-LogicButton`.
Used by `.spectrum-LogicButton--or:hover:not([disabled])`.
Defaults to `var(--mod-logic-button-or-background-color-hover, var(--spectrum-logic-button-or-background-color-hover))`, if not set.", + "control": "color" + }, + "highcontrast-logic-button-or-border-color-hover": { + "value": "var(--mod-logic-button-or-border-color-hover, var(--spectrum-logic-button-or-border-color-hover))", + "description": "Defined in `.spectrum-LogicButton`.
Used by `.spectrum-LogicButton--or:hover:not([disabled])`.
Defaults to `var(--mod-logic-button-or-border-color-hover, var(--spectrum-logic-button-or-border-color-hover))`, if not set.", + "control": "color" + } + } } diff --git a/components/logicbutton/stories/logicbutton.stories.js b/components/logicbutton/stories/logicbutton.stories.js index 6b38a131275..02814d657dd 100644 --- a/components/logicbutton/stories/logicbutton.stories.js +++ b/components/logicbutton/stories/logicbutton.stories.js @@ -1,10 +1,12 @@ import { disableDefaultModes } from "@spectrum-css/preview/modes"; import { isDisabled } from "@spectrum-css/preview/types"; -import metadata from "../dist/metadata.json"; -import packageJson from "../package.json"; import { LogicButtonGroup } from "./logicbutton.test.js"; import { Template, VariantGroup } from "./template.js"; +// Local assets to render the component styles and structure +import metadata from "../dist/metadata.json"; +import packageJson from "../package.json"; + /** * A logic button displays an operator within a boolean logic sequence. */ @@ -32,6 +34,7 @@ export default { parameters: { packageJson, metadata, + cssprops: metadata.modifiers, }, }; diff --git a/components/menu/dist/metadata.json b/components/menu/dist/metadata.json index 5142e09aa66..ee955ee0e64 100644 --- a/components/menu/dist/metadata.json +++ b/components/menu/dist/metadata.json @@ -9,11 +9,11 @@ ".spectrum-Menu .spectrum-Menu-divider", ".spectrum-Menu .spectrum-Menu-divider.spectrum-Divider--sizeS", ".spectrum-Menu .spectrum-Menu-item", - ".spectrum-Menu .spectrum-Menu-item--collapsible.is-open.is-focused", ".spectrum-Menu .spectrum-Menu-item--collapsible.is-open:active", ".spectrum-Menu .spectrum-Menu-item--collapsible.is-open:focus", ".spectrum-Menu .spectrum-Menu-item--collapsible.is-open:focus-within", ".spectrum-Menu .spectrum-Menu-item--collapsible.is-open:hover", + ".spectrum-Menu .spectrum-Menu-item--collapsible.is-open.is-focused", ".spectrum-Menu .spectrum-Menu-item--drillIn.is-open", ".spectrum-Menu .spectrum-Menu-item:focus .spectrum-Menu-itemCheckbox", ".spectrum-Menu .spectrum-Menu-item:focus .spectrum-Menu-itemSwitch", @@ -47,39 +47,19 @@ ".spectrum-Menu-item--collapsible > .spectrum-Menu-itemIcon", ".spectrum-Menu-item--collapsible.is-open", ".spectrum-Menu-item--collapsible.is-open .spectrum-Menu-chevron", - ".spectrum-Menu-item--collapsible.is-open.is-focused", ".spectrum-Menu-item--collapsible.is-open:active", ".spectrum-Menu-item--collapsible.is-open:focus", ".spectrum-Menu-item--collapsible.is-open:hover", + ".spectrum-Menu-item--collapsible.is-open.is-focused", ".spectrum-Menu-item--drillIn .spectrum-Menu-chevron", + ".spectrum-Menu-item--drillIn:active .spectrum-Menu-chevron", + ".spectrum-Menu-item--drillIn:focus .spectrum-Menu-chevron", + ".spectrum-Menu-item--drillIn:hover .spectrum-Menu-chevron", ".spectrum-Menu-item--drillIn.is-focused .spectrum-Menu-chevron", ".spectrum-Menu-item--drillIn.is-open", ".spectrum-Menu-item--drillIn.is-open .spectrum-Menu-checkmark", ".spectrum-Menu-item--drillIn.is-open .spectrum-Menu-chevron", ".spectrum-Menu-item--drillIn.is-open .spectrum-Menu-itemIcon:not(.spectrum-Menu-chevron, .spectrum-Menu-checkmark)", - ".spectrum-Menu-item--drillIn:active .spectrum-Menu-chevron", - ".spectrum-Menu-item--drillIn:focus .spectrum-Menu-chevron", - ".spectrum-Menu-item--drillIn:hover .spectrum-Menu-chevron", - ".spectrum-Menu-item.is-disabled", - ".spectrum-Menu-item.is-disabled .spectrum-Menu-itemDescription", - ".spectrum-Menu-item.is-disabled .spectrum-Menu-itemIcon", - ".spectrum-Menu-item.is-disabled .spectrum-Menu-itemLabel", - ".spectrum-Menu-item.is-disabled .spectrum-Menu-itemValue", - ".spectrum-Menu-item.is-disabled .spectrum-Menu-sectionHeading", - ".spectrum-Menu-item.is-disabled:hover", - ".spectrum-Menu-item.is-disabled:hover .spectrum-Menu-itemDescription", - ".spectrum-Menu-item.is-disabled:hover .spectrum-Menu-itemIcon", - ".spectrum-Menu-item.is-disabled:hover .spectrum-Menu-itemLabel", - ".spectrum-Menu-item.is-disabled:hover .spectrum-Menu-itemValue", - ".spectrum-Menu-item.is-disabled:hover .spectrum-Menu-sectionHeading", - ".spectrum-Menu-item.is-focused", - ".spectrum-Menu-item.is-focused > .spectrum-Menu-checkmark", - ".spectrum-Menu-item.is-focused > .spectrum-Menu-chevron", - ".spectrum-Menu-item.is-focused > .spectrum-Menu-itemDescription", - ".spectrum-Menu-item.is-focused > .spectrum-Menu-itemIcon:not(.spectrum-Menu-chevron, .spectrum-Menu-checkmark)", - ".spectrum-Menu-item.is-focused > .spectrum-Menu-itemLabel", - ".spectrum-Menu-item.is-focused > .spectrum-Menu-itemValue", - ".spectrum-Menu-item.is-focused > .spectrum-Menu-sectionHeading", ".spectrum-Menu-item:active", ".spectrum-Menu-item:active > .spectrum-Menu-checkmark", ".spectrum-Menu-item:active > .spectrum-Menu-chevron", @@ -105,12 +85,26 @@ ".spectrum-Menu-item:hover > .spectrum-Menu-itemLabel", ".spectrum-Menu-item:hover > .spectrum-Menu-itemValue", ".spectrum-Menu-item:hover > .spectrum-Menu-sectionHeading", - ".spectrum-Menu-itemActions", - ".spectrum-Menu-itemDescription", - ".spectrum-Menu-itemLabel", - ".spectrum-Menu-itemLabel--truncate", - ".spectrum-Menu-itemSelection", - ".spectrum-Menu-itemValue", + ".spectrum-Menu-item.is-disabled", + ".spectrum-Menu-item.is-disabled .spectrum-Menu-itemDescription", + ".spectrum-Menu-item.is-disabled .spectrum-Menu-itemIcon", + ".spectrum-Menu-item.is-disabled .spectrum-Menu-itemLabel", + ".spectrum-Menu-item.is-disabled .spectrum-Menu-itemValue", + ".spectrum-Menu-item.is-disabled .spectrum-Menu-sectionHeading", + ".spectrum-Menu-item.is-disabled:hover", + ".spectrum-Menu-item.is-disabled:hover .spectrum-Menu-itemDescription", + ".spectrum-Menu-item.is-disabled:hover .spectrum-Menu-itemIcon", + ".spectrum-Menu-item.is-disabled:hover .spectrum-Menu-itemLabel", + ".spectrum-Menu-item.is-disabled:hover .spectrum-Menu-itemValue", + ".spectrum-Menu-item.is-disabled:hover .spectrum-Menu-sectionHeading", + ".spectrum-Menu-item.is-focused", + ".spectrum-Menu-item.is-focused > .spectrum-Menu-checkmark", + ".spectrum-Menu-item.is-focused > .spectrum-Menu-chevron", + ".spectrum-Menu-item.is-focused > .spectrum-Menu-itemDescription", + ".spectrum-Menu-item.is-focused > .spectrum-Menu-itemIcon:not(.spectrum-Menu-chevron, .spectrum-Menu-checkmark)", + ".spectrum-Menu-item.is-focused > .spectrum-Menu-itemLabel", + ".spectrum-Menu-item.is-focused > .spectrum-Menu-itemValue", + ".spectrum-Menu-item.is-focused > .spectrum-Menu-sectionHeading", ".spectrum-Menu-item[aria-disabled=\"true\"]", ".spectrum-Menu-item[aria-disabled=\"true\"] .spectrum-Menu-itemDescription", ".spectrum-Menu-item[aria-disabled=\"true\"] .spectrum-Menu-itemIcon", @@ -123,7 +117,17 @@ ".spectrum-Menu-item[aria-disabled=\"true\"]:hover .spectrum-Menu-itemLabel", ".spectrum-Menu-item[aria-disabled=\"true\"]:hover .spectrum-Menu-itemValue", ".spectrum-Menu-item[aria-disabled=\"true\"]:hover .spectrum-Menu-sectionHeading", + ".spectrum-Menu-itemActions", + ".spectrum-Menu-itemDescription", + ".spectrum-Menu-itemLabel", + ".spectrum-Menu-itemLabel--truncate", + ".spectrum-Menu-itemSelection", + ".spectrum-Menu-itemValue", ".spectrum-Menu-sectionHeading", + ".spectrum-Menu:dir(rtl)", + ".spectrum-Menu:lang(ja)", + ".spectrum-Menu:lang(ko)", + ".spectrum-Menu:lang(zh)", ".spectrum-Menu.is-selectable .spectrum-Menu-item", ".spectrum-Menu.is-selectable .spectrum-Menu-item.is-selected", ".spectrum-Menu.is-selectableMultiple .spectrum-Menu-item", @@ -131,285 +135,1445 @@ ".spectrum-Menu.spectrum-Menu--sizeL", ".spectrum-Menu.spectrum-Menu--sizeS", ".spectrum-Menu.spectrum-Menu--sizeXL", - ".spectrum-Menu:dir(rtl)", - ".spectrum-Menu:lang(ja)", - ".spectrum-Menu:lang(ko)", - ".spectrum-Menu:lang(zh)", "[dir=\"rtl\"] .spectrum-Menu", "[dir=\"rtl\"] .spectrum-Menu .spectrum-Menu-chevron" ], - "modifiers": [ - "--mod-menu-back-heading-color", - "--mod-menu-back-icon-color-default", - "--mod-menu-back-icon-margin-block", - "--mod-menu-back-icon-margin-inline", - "--mod-menu-back-padding-block-end", - "--mod-menu-back-padding-block-start", - "--mod-menu-back-padding-inline-end", - "--mod-menu-back-padding-inline-start", - "--mod-menu-checkmark-display", - "--mod-menu-checkmark-icon-color-default", - "--mod-menu-checkmark-icon-color-down", - "--mod-menu-checkmark-icon-color-focus", - "--mod-menu-checkmark-icon-color-hover", - "--mod-menu-collapsible-icon-color", - "--mod-menu-drillin-icon-color-default", - "--mod-menu-drillin-icon-color-down", - "--mod-menu-drillin-icon-color-focus", - "--mod-menu-drillin-icon-color-hover", - "--mod-menu-inline-size", - "--mod-menu-item-background-color-default", - "--mod-menu-item-background-color-down", - "--mod-menu-item-background-color-hover", - "--mod-menu-item-background-color-key-focus", - "--mod-menu-item-bottom-edge-to-text", - "--mod-menu-item-checkmark-height", - "--mod-menu-item-checkmark-width", - "--mod-menu-item-collapsible-no-icon-submenu-item-padding-x-start", - "--mod-menu-item-description-color-default", - "--mod-menu-item-description-color-disabled", - "--mod-menu-item-description-color-down", - "--mod-menu-item-description-color-focus", - "--mod-menu-item-description-color-hover", - "--mod-menu-item-description-font-size", - "--mod-menu-item-description-line-height", - "--mod-menu-item-description-line-height-cjk", - "--mod-menu-item-focus-indicator-color", - "--mod-menu-item-focus-indicator-width", - "--mod-menu-item-icon-height", - "--mod-menu-item-icon-width", - "--mod-menu-item-label-content-color-default", - "--mod-menu-item-label-content-color-disabled", - "--mod-menu-item-label-content-color-down", - "--mod-menu-item-label-content-color-focus", - "--mod-menu-item-label-content-color-hover", - "--mod-menu-item-label-font-size", - "--mod-menu-item-label-icon-color-default", - "--mod-menu-item-label-icon-color-disabled", - "--mod-menu-item-label-icon-color-down", - "--mod-menu-item-label-icon-color-focus", - "--mod-menu-item-label-icon-color-hover", - "--mod-menu-item-label-inline-edge-to-content", - "--mod-menu-item-label-line-height", - "--mod-menu-item-label-line-height-cjk", - "--mod-menu-item-label-text-to-visual", - "--mod-menu-item-label-to-description-spacing", - "--mod-menu-item-label-to-value-area-min-spacing", - "--mod-menu-item-min-height", - "--mod-menu-item-selectable-edge-to-text-not-selected", - "--mod-menu-item-text-to-control", - "--mod-menu-item-top-edge-to-text", - "--mod-menu-item-top-to-action", - "--mod-menu-item-top-to-checkbox", - "--mod-menu-item-top-to-checkmark", - "--mod-menu-item-value-color-default", - "--mod-menu-item-value-color-down", - "--mod-menu-item-value-color-focus", - "--mod-menu-item-value-color-hover", - "--mod-menu-section-divider-margin-block", - "--mod-menu-section-header-bottom-edge-to-text", - "--mod-menu-section-header-color", - "--mod-menu-section-header-font-size", - "--mod-menu-section-header-font-weight", - "--mod-menu-section-header-line-height", - "--mod-menu-section-header-line-height-cjk", - "--mod-menu-section-header-min-width", - "--mod-menu-section-header-top-edge-to-text" - ], - "component": [ - "--spectrum-menu-back-icon-margin", - "--spectrum-menu-checkmark-display", - "--spectrum-menu-checkmark-display-hidden", - "--spectrum-menu-checkmark-display-shown", - "--spectrum-menu-checkmark-icon-color-default", - "--spectrum-menu-checkmark-icon-color-down", - "--spectrum-menu-checkmark-icon-color-focus", - "--spectrum-menu-checkmark-icon-color-hover", - "--spectrum-menu-collapsible-icon-color", - "--spectrum-menu-divider-thickness", - "--spectrum-menu-drillin-icon-color-default", - "--spectrum-menu-drillin-icon-color-down", - "--spectrum-menu-drillin-icon-color-focus", - "--spectrum-menu-drillin-icon-color-hover", - "--spectrum-menu-item-background-color-default", - "--spectrum-menu-item-background-color-down", - "--spectrum-menu-item-background-color-hover", - "--spectrum-menu-item-background-color-key-focus", - "--spectrum-menu-item-bottom-edge-to-text", - "--spectrum-menu-item-checkmark-height", - "--spectrum-menu-item-checkmark-height-extra-large", - "--spectrum-menu-item-checkmark-height-large", - "--spectrum-menu-item-checkmark-height-medium", - "--spectrum-menu-item-checkmark-height-small", - "--spectrum-menu-item-checkmark-width", - "--spectrum-menu-item-checkmark-width-extra-large", - "--spectrum-menu-item-checkmark-width-large", - "--spectrum-menu-item-checkmark-width-medium", - "--spectrum-menu-item-checkmark-width-small", - "--spectrum-menu-item-collapsible-no-icon-submenu-item-padding-x-start", - "--spectrum-menu-item-corner-radius", - "--spectrum-menu-item-description-color-default", - "--spectrum-menu-item-description-color-disabled", - "--spectrum-menu-item-description-color-down", - "--spectrum-menu-item-description-color-focus", - "--spectrum-menu-item-description-color-hover", - "--spectrum-menu-item-description-font-size", - "--spectrum-menu-item-description-line-height", - "--spectrum-menu-item-description-line-height-cjk", - "--spectrum-menu-item-focus-indicator-border-width", - "--spectrum-menu-item-focus-indicator-color", - "--spectrum-menu-item-focus-indicator-color-default", - "--spectrum-menu-item-focus-indicator-direction-scalar", - "--spectrum-menu-item-focus-indicator-offset", - "--spectrum-menu-item-focus-indicator-outline-style", - "--spectrum-menu-item-focus-indicator-shadow", - "--spectrum-menu-item-focus-indicator-width", - "--spectrum-menu-item-icon-height", - "--spectrum-menu-item-icon-width", - "--spectrum-menu-item-label-content-color-default", - "--spectrum-menu-item-label-content-color-disabled", - "--spectrum-menu-item-label-content-color-down", - "--spectrum-menu-item-label-content-color-focus", - "--spectrum-menu-item-label-content-color-hover", - "--spectrum-menu-item-label-font-size", - "--spectrum-menu-item-label-icon-color-default", - "--spectrum-menu-item-label-icon-color-disabled", - "--spectrum-menu-item-label-icon-color-down", - "--spectrum-menu-item-label-icon-color-focus", - "--spectrum-menu-item-label-icon-color-hover", - "--spectrum-menu-item-label-inline-edge-to-content", - "--spectrum-menu-item-label-line-height", - "--spectrum-menu-item-label-line-height-cjk", - "--spectrum-menu-item-label-text-to-visual", - "--spectrum-menu-item-label-to-description", - "--spectrum-menu-item-label-to-description-spacing", - "--spectrum-menu-item-label-to-value-area-min-spacing", - "--spectrum-menu-item-min-height", - "--spectrum-menu-item-section-divider-height", - "--spectrum-menu-item-selectable-edge-to-text-not-selected", - "--spectrum-menu-item-selectable-edge-to-text-not-selected-extra-large", - "--spectrum-menu-item-selectable-edge-to-text-not-selected-large", - "--spectrum-menu-item-selectable-edge-to-text-not-selected-medium", - "--spectrum-menu-item-selectable-edge-to-text-not-selected-small", - "--spectrum-menu-item-spacing-multiplier", - "--spectrum-menu-item-text-to-control", - "--spectrum-menu-item-top-edge-to-text", - "--spectrum-menu-item-top-to-action", - "--spectrum-menu-item-top-to-checkbox", - "--spectrum-menu-item-top-to-checkmark", - "--spectrum-menu-item-top-to-selected-icon-extra-large", - "--spectrum-menu-item-top-to-selected-icon-large", - "--spectrum-menu-item-top-to-selected-icon-medium", - "--spectrum-menu-item-top-to-selected-icon-small", - "--spectrum-menu-item-value-color-default", - "--spectrum-menu-item-value-color-down", - "--spectrum-menu-item-value-color-focus", - "--spectrum-menu-item-value-color-hover", - "--spectrum-menu-section-header-color", - "--spectrum-menu-section-header-font-size", - "--spectrum-menu-section-header-font-weight", - "--spectrum-menu-section-header-line-height", - "--spectrum-menu-section-header-line-height-cjk", - "--spectrum-menu-section-header-min-width" - ], - "global": [ - "--spectrum-accent-color-1000", - "--spectrum-accent-color-1100", - "--spectrum-accent-color-900", - "--spectrum-blue-800", - "--spectrum-bold-font-weight", - "--spectrum-border-width-200", - "--spectrum-cjk-line-height-100", - "--spectrum-component-bottom-to-text-100", - "--spectrum-component-bottom-to-text-200", - "--spectrum-component-bottom-to-text-300", - "--spectrum-component-bottom-to-text-75", - "--spectrum-component-edge-to-text-100", - "--spectrum-component-edge-to-text-200", - "--spectrum-component-edge-to-text-300", - "--spectrum-component-edge-to-text-75", - "--spectrum-component-height-100", - "--spectrum-component-height-200", - "--spectrum-component-height-300", - "--spectrum-component-height-75", - "--spectrum-component-top-to-text-100", - "--spectrum-component-top-to-text-200", - "--spectrum-component-top-to-text-300", - "--spectrum-component-top-to-text-75", - "--spectrum-corner-radius-100", - "--spectrum-disabled-content-color", - "--spectrum-divider-thickness-medium", - "--spectrum-divider-thickness-small", - "--spectrum-focus-indicator-color", - "--spectrum-focus-indicator-thickness", - "--spectrum-font-size-100", - "--spectrum-font-size-200", - "--spectrum-font-size-300", - "--spectrum-font-size-50", - "--spectrum-font-size-75", - "--spectrum-gray-1000-rgb", - "--spectrum-gray-900", - "--spectrum-line-height-100", - "--spectrum-navigational-indicator-top-to-back-icon-extra-large", - "--spectrum-navigational-indicator-top-to-back-icon-large", - "--spectrum-navigational-indicator-top-to-back-icon-medium", - "--spectrum-navigational-indicator-top-to-back-icon-small", - "--spectrum-neutral-content-color-default", - "--spectrum-neutral-content-color-down", - "--spectrum-neutral-content-color-hover", - "--spectrum-neutral-content-color-key-focus", - "--spectrum-neutral-subdued-content-color-default", - "--spectrum-neutral-subdued-content-color-down", - "--spectrum-neutral-subdued-content-color-hover", - "--spectrum-neutral-subdued-content-color-key-focus", - "--spectrum-spacing-100", - "--spectrum-spacing-50", - "--spectrum-text-to-control-100", - "--spectrum-text-to-control-200", - "--spectrum-text-to-control-300", - "--spectrum-text-to-control-75", - "--spectrum-text-to-visual-100", - "--spectrum-text-to-visual-200", - "--spectrum-text-to-visual-300", - "--spectrum-text-to-visual-75", - "--spectrum-transparent-black-200-opacity", - "--spectrum-workflow-icon-size-100", - "--spectrum-workflow-icon-size-200", - "--spectrum-workflow-icon-size-300", - "--spectrum-workflow-icon-size-75" - ], - "system-theme": [ - "--system-menu-item-background-color-down", - "--system-menu-item-background-color-hover", - "--system-menu-item-background-color-key-focus", - "--system-menu-item-corner-radius", - "--system-menu-item-focus-indicator-offset", - "--system-menu-item-focus-indicator-outline-style", - "--system-menu-item-focus-indicator-shadow", - "--system-menu-item-spacing-multiplier" - ], - "passthroughs": [ - "--mod-checkbox-text-to-control", - "--mod-checkbox-top-to-text", - "--mod-switch-control-label-spacing", - "--mod-switch-spacing-top-to-label" - ], - "high-contrast": [ - "--highcontrast-checkbox-highlight-color-default", - "--highcontrast-checkbox-highlight-color-hover", - "--highcontrast-menu-checkmark-icon-color-default", - "--highcontrast-menu-item-background-color-default", - "--highcontrast-menu-item-background-color-focus", - "--highcontrast-menu-item-color-default", - "--highcontrast-menu-item-color-disabled", - "--highcontrast-menu-item-color-focus", - "--highcontrast-menu-item-focus-indicator-color", - "--highcontrast-menu-item-selected-background-color", - "--highcontrast-menu-item-selected-color", - "--highcontrast-switch-background-color-selected-default", - "--highcontrast-switch-background-color-selected-hover", - "--highcontrast-switch-handle-border-color-hover", - "--highcontrast-switch-handle-border-color-selected-default", - "--highcontrast-switch-handle-border-color-selected-hover" - ] + "modifiers": { + "mod-menu-item-focus-indicator-width": { + "value": "2px", + "description": "Used by `--spectrum-menu-item-focus-indicator-width`.
Defaults to `var(--spectrum-border-width-200)`, if not set.", + "control": "text", + "category": "Modifier" + }, + "mod-menu-item-focus-indicator-color": { + "value": "var(--spectrum-menu-item-focus-indicator-color)", + "description": "Used by `--spectrum-menu-item-focus-indicator-color-default`.
Defaults to `var(--spectrum-menu-item-focus-indicator-color)`, if not set.", + "control": "color", + "category": "Modifier" + }, + "mod-menu-inline-size": { + "description": "Used by `.spectrum-Menu`.", + "control": "text", + "category": "Modifier" + }, + "mod-menu-item-label-line-height-cjk": { + "value": "var(--spectrum-menu-item-label-line-height-cjk)", + "description": "Used by `--spectrum-menu-item-label-line-height`.
Defaults to `var(--spectrum-menu-item-label-line-height-cjk)`, if not set.", + "control": "text", + "category": "Modifier" + }, + "mod-menu-item-description-line-height-cjk": { + "value": "var(--spectrum-menu-item-description-line-height-cjk)", + "description": "Used by `--spectrum-menu-item-description-line-height`.
Defaults to `var(--spectrum-menu-item-description-line-height-cjk)`, if not set.", + "control": "text", + "category": "Modifier" + }, + "mod-menu-section-header-line-height-cjk": { + "value": "var(--spectrum-menu-section-header-line-height-cjk)", + "description": "Used by `--spectrum-menu-section-header-line-height`.
Defaults to `var(--spectrum-menu-section-header-line-height-cjk)`, if not set.", + "control": "text", + "category": "Modifier" + }, + "mod-menu-item-selectable-edge-to-text-not-selected": { + "value": "var(--spectrum-menu-item-selectable-edge-to-text-not-selected)", + "description": "Used by `.spectrum-Menu.is-selectable .spectrum-Menu-item`.
Defaults to `var(--spectrum-menu-item-selectable-edge-to-text-not-selected)`, if not set.", + "control": "text", + "category": "Modifier" + }, + "mod-menu-item-label-inline-edge-to-content": { + "value": "var(--spectrum-menu-item-label-inline-edge-to-content)", + "description": "Used by `.spectrum-Menu.is-selectable .spectrum-Menu-item.is-selected`, `.spectrum-Menu .spectrum-Menu-divider`, `.spectrum-Menu-item`, `.spectrum-Menu-sectionHeading`, `.spectrum-Menu-item--collapsible .spectrum-Menu`.
Defaults to `var(--spectrum-menu-item-label-inline-edge-to-content)`, if not set.", + "control": "text", + "category": "Modifier" + }, + "mod-menu-section-divider-margin-block": { + "value": "max(0px, (var(--spectrum-menu-item-section-divider-height) - var(--spectrum-menu-divider-thickness))/2)", + "description": "Used by `.spectrum-Menu .spectrum-Menu-divider`.
Defaults to `max(0px, (var(--spectrum-menu-item-section-divider-height) - var(--spectrum-menu-divider-thickness))/2)`, if not set.", + "control": "text", + "category": "Modifier" + }, + "mod-menu-item-label-icon-color-default": { + "value": "var(--spectrum-menu-item-label-icon-color-default)", + "description": "Used by `.spectrum-Menu .spectrum-Menu-itemIcon`.
Defaults to `var(--spectrum-menu-item-label-icon-color-default)`, if not set.", + "control": "color", + "category": "Modifier" + }, + "mod-menu-checkmark-display": { + "value": "var(--spectrum-menu-checkmark-display)", + "description": "Used by `.spectrum-Menu .spectrum-Menu-checkmark`.
Defaults to `var(--spectrum-menu-checkmark-display)`, if not set.", + "control": "text", + "category": "Modifier" + }, + "mod-menu-item-checkmark-height": { + "value": "var(--spectrum-menu-item-checkmark-height)", + "description": "Used by `.spectrum-Menu .spectrum-Menu-checkmark`.
Defaults to `var(--spectrum-menu-item-checkmark-height)`, if not set.", + "control": "text", + "category": "Modifier" + }, + "mod-menu-item-checkmark-width": { + "value": "var(--spectrum-menu-item-checkmark-width)", + "description": "Used by `.spectrum-Menu .spectrum-Menu-checkmark`.
Defaults to `var(--spectrum-menu-item-checkmark-width)`, if not set.", + "control": "text", + "category": "Modifier" + }, + "mod-menu-checkmark-icon-color-default": { + "value": "var(--spectrum-menu-checkmark-icon-color-default)", + "description": "Used by `.spectrum-Menu .spectrum-Menu-checkmark`.
Defaults to `var(--spectrum-menu-checkmark-icon-color-default)`, if not set.", + "control": "color", + "category": "Modifier" + }, + "mod-menu-item-top-to-checkmark": { + "value": "var(--spectrum-menu-item-top-to-checkmark)", + "description": "Used by `.spectrum-Menu .spectrum-Menu-checkmark`.
Defaults to `var(--spectrum-menu-item-top-to-checkmark)`, if not set.", + "control": "text", + "category": "Modifier" + }, + "mod-menu-item-top-edge-to-text": { + "value": "var(--spectrum-menu-item-top-edge-to-text)", + "description": "Used by `.spectrum-Menu .spectrum-Menu-checkmark`, `.spectrum-Menu-item`, `.spectrum-Menu-sectionHeading`, `.spectrum-Menu-item--collapsible > .spectrum-Menu-itemIcon`.
Defaults to `var(--spectrum-menu-item-top-edge-to-text)`, if not set.", + "control": "text", + "category": "Modifier" + }, + "mod-menu-item-text-to-control": { + "value": "var(--spectrum-menu-item-text-to-control)", + "description": "Used by `.spectrum-Menu .spectrum-Menu-checkmark, .spectrum-Menu .spectrum-Menu-chevron`, `.spectrum-Menu-item .spectrum-Menu-itemCheckbox .spectrum-Checkbox-box`.
Defaults to `var(--spectrum-menu-item-text-to-control)`, if not set.", + "control": "text", + "category": "Modifier" + }, + "mod-menu-back-icon-margin-block": { + "value": "var(--spectrum-menu-back-icon-margin)", + "description": "Used by `.spectrum-Menu .spectrum-Menu-backIcon`.
Defaults to `var(--spectrum-menu-back-icon-margin)`, if not set.", + "control": "text", + "category": "Modifier" + }, + "mod-menu-back-icon-margin-inline": { + "value": "var(--spectrum-menu-back-icon-margin)", + "description": "Used by `.spectrum-Menu .spectrum-Menu-backIcon`.
Defaults to `var(--spectrum-menu-back-icon-margin)`, if not set.", + "control": "text", + "category": "Modifier" + }, + "mod-menu-back-icon-color-default": { + "value": "var(--spectrum-menu-section-header-color)", + "description": "Used by `.spectrum-Menu .spectrum-Menu-backIcon`.
Defaults to `var(--spectrum-menu-section-header-color)`, if not set.", + "control": "color", + "category": "Modifier" + }, + "mod-menu-item-label-text-to-visual": { + "value": "var(--spectrum-menu-item-label-text-to-visual)", + "description": "Used by `.spectrum-Menu .spectrum-Menu-itemIcon--workflowIcon`.
Defaults to `var(--spectrum-menu-item-label-text-to-visual)`, if not set.", + "control": "text", + "category": "Modifier" + }, + "mod-menu-item-icon-height": { + "value": "var(--spectrum-menu-item-icon-height)", + "description": "Used by `.spectrum-Menu .spectrum-Menu-itemIcon:not(.spectrum-Menu-chevron, .spectrum-Menu-checkmark)`.
Defaults to `var(--spectrum-menu-item-icon-height)`, if not set.", + "control": "text", + "category": "Modifier" + }, + "mod-menu-item-icon-width": { + "value": "var(--spectrum-menu-item-icon-width)", + "description": "Used by `.spectrum-Menu .spectrum-Menu-itemIcon:not(.spectrum-Menu-chevron, .spectrum-Menu-checkmark)`.
Defaults to `var(--spectrum-menu-item-icon-width)`, if not set.", + "control": "text", + "category": "Modifier" + }, + "mod-menu-item-background-color-default": { + "value": "var(--spectrum-menu-item-background-color-default)", + "description": "Used by `.spectrum-Menu-item`, `.spectrum-Menu-item--collapsible.is-open.is-focused, .spectrum-Menu-item--collapsible.is-open:active, .spectrum-Menu-item--collapsible.is-open:focus`, `.spectrum-Menu-item--collapsible.is-open:hover`.
Defaults to `var(--spectrum-menu-item-background-color-default)`, if not set.", + "control": "color", + "category": "Modifier" + }, + "mod-menu-item-label-line-height": { + "value": "var(--spectrum-menu-item-label-line-height)", + "description": "Used by `.spectrum-Menu-item`.
Defaults to `var(--spectrum-menu-item-label-line-height)`, if not set.", + "control": "text", + "category": "Modifier" + }, + "mod-menu-item-min-height": { + "value": "var(--spectrum-menu-item-min-height)", + "description": "Used by `.spectrum-Menu-item`.
Defaults to `var(--spectrum-menu-item-min-height)`, if not set.", + "control": "text", + "category": "Modifier" + }, + "mod-menu-item-bottom-edge-to-text": { + "value": "var(--spectrum-menu-item-bottom-edge-to-text)", + "description": "Used by `.spectrum-Menu-item`, `.spectrum-Menu-sectionHeading`, `.spectrum-Menu-item--collapsible > .spectrum-Menu-itemIcon`.
Defaults to `var(--spectrum-menu-item-bottom-edge-to-text)`, if not set.", + "control": "text", + "category": "Modifier" + }, + "mod-menu-item-top-to-checkbox": { + "value": "var(--spectrum-menu-item-top-to-checkbox)", + "description": "Used by `.spectrum-Menu-item .spectrum-Menu-itemCheckbox .spectrum-Checkbox-box`.
Defaults to `var(--spectrum-menu-item-top-to-checkbox)`, if not set.", + "control": "text", + "category": "Modifier" + }, + "mod-menu-item-top-to-action": { + "value": "var(--spectrum-menu-item-top-to-action)", + "description": "Used by `.spectrum-Menu-item .spectrum-Menu-itemSwitch .spectrum-Switch-switch`.
Defaults to `var(--spectrum-menu-item-top-to-action)`, if not set.", + "control": "text", + "category": "Modifier" + }, + "mod-menu-item-background-color-key-focus": { + "value": "var(--spectrum-menu-item-background-color-key-focus)", + "description": "Used by `.spectrum-Menu-item.is-focused, .spectrum-Menu-item:focus`.
Defaults to `var(--spectrum-menu-item-background-color-key-focus)`, if not set.", + "control": "color", + "category": "Modifier" + }, + "mod-menu-item-label-content-color-focus": { + "value": "var(--spectrum-menu-item-label-content-color-focus)", + "description": "Used by `.spectrum-Menu-item.is-focused > .spectrum-Menu-itemLabel, .spectrum-Menu-item:focus > .spectrum-Menu-itemLabel`.
Defaults to `var(--spectrum-menu-item-label-content-color-focus)`, if not set.", + "control": "color", + "category": "Modifier" + }, + "mod-menu-section-header-color": { + "value": "var(--spectrum-menu-section-header-color)", + "description": "Used by `.spectrum-Menu-item.is-focused > .spectrum-Menu-sectionHeading, .spectrum-Menu-item:focus > .spectrum-Menu-sectionHeading`, `.spectrum-Menu-item:active > .spectrum-Menu-sectionHeading`, `.spectrum-Menu-sectionHeading`, `.spectrum-Menu-item:hover > .spectrum-Menu-sectionHeading`.
Defaults to `var(--spectrum-menu-section-header-color)`, if not set.", + "control": "color", + "category": "Modifier" + }, + "mod-menu-item-description-color-focus": { + "value": "var(--spectrum-menu-item-description-color-focus)", + "description": "Used by `.spectrum-Menu-item.is-focused > .spectrum-Menu-itemDescription, .spectrum-Menu-item:focus > .spectrum-Menu-itemDescription`.
Defaults to `var(--spectrum-menu-item-description-color-focus)`, if not set.", + "control": "color", + "category": "Modifier" + }, + "mod-menu-item-value-color-focus": { + "value": "var(--spectrum-menu-item-value-color-focus)", + "description": "Used by `.spectrum-Menu-item.is-focused > .spectrum-Menu-itemValue, .spectrum-Menu-item:focus > .spectrum-Menu-itemValue`.
Defaults to `var(--spectrum-menu-item-value-color-focus)`, if not set.", + "control": "color", + "category": "Modifier" + }, + "mod-menu-item-label-icon-color-focus": { + "value": "var(--spectrum-menu-item-label-icon-color-focus)", + "description": "Used by `.spectrum-Menu-item.is-focused > .spectrum-Menu-itemIcon:not(.spectrum-Menu-chevron, .spectrum-Menu-checkmark), .spectrum-Menu-item:focus > .spectrum-Menu-itemIcon:not(.spectrum-Menu-chevron, .spectrum-Menu-checkmark)`.
Defaults to `var(--spectrum-menu-item-label-icon-color-focus)`, if not set.", + "control": "color", + "category": "Modifier" + }, + "mod-menu-collapsible-icon-color": { + "value": "var(--spectrum-menu-collapsible-icon-color)", + "description": "Used by `.spectrum-Menu-item.is-focused > .spectrum-Menu-chevron, .spectrum-Menu-item:focus > .spectrum-Menu-chevron`, `.spectrum-Menu-item:active > .spectrum-Menu-chevron`, `.spectrum-Menu-item:hover > .spectrum-Menu-chevron`.
Defaults to `var(--spectrum-menu-collapsible-icon-color)`, if not set.", + "control": "color", + "category": "Modifier" + }, + "mod-menu-checkmark-icon-color-focus": { + "value": "var(--spectrum-menu-checkmark-icon-color-focus)", + "description": "Used by `.spectrum-Menu-item.is-focused > .spectrum-Menu-checkmark, .spectrum-Menu-item:focus > .spectrum-Menu-checkmark`.
Defaults to `var(--spectrum-menu-checkmark-icon-color-focus)`, if not set.", + "control": "color", + "category": "Modifier" + }, + "mod-menu-item-background-color-down": { + "value": "var(--spectrum-menu-item-background-color-down)", + "description": "Used by `.spectrum-Menu-item:active`.
Defaults to `var(--spectrum-menu-item-background-color-down)`, if not set.", + "control": "color", + "category": "Modifier" + }, + "mod-menu-item-label-content-color-down": { + "value": "var(--spectrum-menu-item-label-content-color-down)", + "description": "Used by `.spectrum-Menu-item:active > .spectrum-Menu-itemLabel`.
Defaults to `var(--spectrum-menu-item-label-content-color-down)`, if not set.", + "control": "color", + "category": "Modifier" + }, + "mod-menu-item-description-color-down": { + "value": "var(--spectrum-menu-item-description-color-down)", + "description": "Used by `.spectrum-Menu-item:active > .spectrum-Menu-itemDescription`.
Defaults to `var(--spectrum-menu-item-description-color-down)`, if not set.", + "control": "color", + "category": "Modifier" + }, + "mod-menu-item-value-color-down": { + "value": "var(--spectrum-menu-item-value-color-down)", + "description": "Used by `.spectrum-Menu-item:active > .spectrum-Menu-itemValue`.
Defaults to `var(--spectrum-menu-item-value-color-down)`, if not set.", + "control": "color", + "category": "Modifier" + }, + "mod-menu-item-label-icon-color-down": { + "value": "var(--spectrum-menu-item-label-icon-color-down)", + "description": "Used by `.spectrum-Menu-item:active > .spectrum-Menu-itemIcon:not(.spectrum-Menu-chevron, .spectrum-Menu-checkmark)`.
Defaults to `var(--spectrum-menu-item-label-icon-color-down)`, if not set.", + "control": "color", + "category": "Modifier" + }, + "mod-menu-checkmark-icon-color-down": { + "value": "var(--spectrum-menu-checkmark-icon-color-down)", + "description": "Used by `.spectrum-Menu-item:active > .spectrum-Menu-checkmark`.
Defaults to `var(--spectrum-menu-checkmark-icon-color-down)`, if not set.", + "control": "color", + "category": "Modifier" + }, + "mod-menu-item-label-content-color-disabled": { + "value": "var(--spectrum-menu-item-label-content-color-disabled)", + "description": "Used by `.spectrum-Menu-item.is-disabled .spectrum-Menu-itemLabel, .spectrum-Menu-item.is-disabled .spectrum-Menu-itemValue, .spectrum-Menu-item.is-disabled .spectrum-Menu-sectionHeading, .spectrum-Menu-item[aria-disabled=\"true\"] .spectrum-Menu-itemLabel, .spectrum-Menu-item[aria-disabled=\"true\"] .spectrum-Menu-itemValue, .spectrum-Menu-item[aria-disabled=\"true\"] .spectrum-Menu-sectionHeading`, `.spectrum-Menu-item.is-disabled:hover .spectrum-Menu-itemLabel, .spectrum-Menu-item.is-disabled:hover .spectrum-Menu-itemValue, .spectrum-Menu-item.is-disabled:hover .spectrum-Menu-sectionHeading, .spectrum-Menu-item[aria-disabled=\"true\"]:hover .spectrum-Menu-itemLabel, .spectrum-Menu-item[aria-disabled=\"true\"]:hover .spectrum-Menu-itemValue, .spectrum-Menu-item[aria-disabled=\"true\"]:hover .spectrum-Menu-sectionHeading`.
Defaults to `var(--spectrum-menu-item-label-content-color-disabled)`, if not set.", + "control": "color", + "category": "Modifier" + }, + "mod-menu-item-description-color-disabled": { + "value": "var(--spectrum-menu-item-description-color-disabled)", + "description": "Used by `.spectrum-Menu-item.is-disabled .spectrum-Menu-itemDescription, .spectrum-Menu-item[aria-disabled=\"true\"] .spectrum-Menu-itemDescription`, `.spectrum-Menu-item.is-disabled:hover .spectrum-Menu-itemDescription, .spectrum-Menu-item[aria-disabled=\"true\"]:hover .spectrum-Menu-itemDescription`.
Defaults to `var(--spectrum-menu-item-description-color-disabled)`, if not set.", + "control": "color", + "category": "Modifier" + }, + "mod-menu-item-label-icon-color-disabled": { + "value": "var(--spectrum-menu-item-label-icon-color-disabled)", + "description": "Used by `.spectrum-Menu-item.is-disabled .spectrum-Menu-itemIcon, .spectrum-Menu-item[aria-disabled=\"true\"] .spectrum-Menu-itemIcon`, `.spectrum-Menu-item.is-disabled:hover .spectrum-Menu-itemIcon, .spectrum-Menu-item[aria-disabled=\"true\"]:hover .spectrum-Menu-itemIcon`.
Defaults to `var(--spectrum-menu-item-label-icon-color-disabled)`, if not set.", + "control": "color", + "category": "Modifier" + }, + "mod-menu-item-label-font-size": { + "value": "var(--spectrum-menu-item-label-font-size)", + "description": "Used by `.spectrum-Menu-itemLabel`, `.spectrum-Menu-itemValue`.
Defaults to `var(--spectrum-menu-item-label-font-size)`, if not set.", + "control": "text", + "category": "Modifier" + }, + "mod-menu-item-label-content-color-default": { + "value": "var(--spectrum-menu-item-label-content-color-default)", + "description": "Used by `.spectrum-Menu-itemLabel`.
Defaults to `var(--spectrum-menu-item-label-content-color-default)`, if not set.", + "control": "color", + "category": "Modifier" + }, + "mod-menu-item-value-color-default": { + "value": "var(--spectrum-menu-item-value-color-default)", + "description": "Used by `.spectrum-Menu-itemValue`.
Defaults to `var(--spectrum-menu-item-value-color-default)`, if not set.", + "control": "color", + "category": "Modifier" + }, + "mod-menu-item-label-to-value-area-min-spacing": { + "value": "var(--spectrum-menu-item-label-to-value-area-min-spacing)", + "description": "Used by `.spectrum-Menu-itemActions, .spectrum-Menu-itemValue`, `.spectrum-Menu-item--drillIn .spectrum-Menu-chevron`.
Defaults to `var(--spectrum-menu-item-label-to-value-area-min-spacing)`, if not set.", + "control": "text", + "category": "Modifier" + }, + "mod-menu-section-header-font-size": { + "value": "var(--spectrum-menu-section-header-font-size)", + "description": "Used by `.spectrum-Menu-sectionHeading`, `.spectrum-Menu-backHeading`.
Defaults to `var(--spectrum-menu-section-header-font-size)`, if not set.", + "control": "text", + "category": "Modifier" + }, + "mod-menu-section-header-font-weight": { + "value": "var(--spectrum-menu-section-header-font-weight)", + "description": "Used by `.spectrum-Menu-sectionHeading`, `.spectrum-Menu-backHeading`.
Defaults to `var(--spectrum-menu-section-header-font-weight)`, if not set.", + "control": "text", + "category": "Modifier" + }, + "mod-menu-section-header-line-height": { + "value": "var(--spectrum-menu-section-header-line-height)", + "description": "Used by `.spectrum-Menu-sectionHeading`, `.spectrum-Menu-backHeading`.
Defaults to `var(--spectrum-menu-section-header-line-height)`, if not set.", + "control": "text", + "category": "Modifier" + }, + "mod-menu-section-header-min-width": { + "value": "var(--spectrum-menu-section-header-min-width)", + "description": "Used by `.spectrum-Menu-sectionHeading`.
Defaults to `var(--spectrum-menu-section-header-min-width)`, if not set.", + "control": "text", + "category": "Modifier" + }, + "mod-menu-section-header-top-edge-to-text": { + "value": "var(--mod-menu-item-top-edge-to-text, var(--spectrum-menu-item-top-edge-to-text))", + "description": "Used by `.spectrum-Menu-sectionHeading`, `.spectrum-Menu-item--collapsible > .spectrum-Menu-itemIcon`.
Defaults to `var(--mod-menu-item-top-edge-to-text, var(--spectrum-menu-item-top-edge-to-text))`, if not set.", + "control": "text", + "category": "Modifier" + }, + "mod-menu-section-header-bottom-edge-to-text": { + "value": "var(--mod-menu-item-bottom-edge-to-text, var(--spectrum-menu-item-bottom-edge-to-text))", + "description": "Used by `.spectrum-Menu-sectionHeading`, `.spectrum-Menu-item--collapsible > .spectrum-Menu-itemIcon`.
Defaults to `var(--mod-menu-item-bottom-edge-to-text, var(--spectrum-menu-item-bottom-edge-to-text))`, if not set.", + "control": "text", + "category": "Modifier" + }, + "mod-menu-item-description-color-default": { + "value": "var(--spectrum-menu-item-description-color-default)", + "description": "Used by `.spectrum-Menu-itemDescription`.
Defaults to `var(--spectrum-menu-item-description-color-default)`, if not set.", + "control": "color", + "category": "Modifier" + }, + "mod-menu-item-description-font-size": { + "value": "var(--spectrum-menu-item-description-font-size)", + "description": "Used by `.spectrum-Menu-itemDescription`.
Defaults to `var(--spectrum-menu-item-description-font-size)`, if not set.", + "control": "text", + "category": "Modifier" + }, + "mod-menu-item-label-to-description-spacing": { + "value": "var(--spectrum-menu-item-label-to-description-spacing)", + "description": "Used by `.spectrum-Menu-itemDescription`.
Defaults to `var(--spectrum-menu-item-label-to-description-spacing)`, if not set.", + "control": "text", + "category": "Modifier" + }, + "mod-menu-item-description-line-height": { + "value": "var(--spectrum-menu-item-description-line-height)", + "description": "Used by `.spectrum-Menu-itemDescription`.
Defaults to `var(--spectrum-menu-item-description-line-height)`, if not set.", + "control": "text", + "category": "Modifier" + }, + "mod-menu-item-collapsible-no-icon-submenu-item-padding-x-start": { + "value": "var(--spectrum-menu-item-collapsible-no-icon-submenu-item-padding-x-start)", + "description": "Used by `.spectrum-Menu-item--collapsible .spectrum-Menu .spectrum-Menu-item`.
Defaults to `var(--spectrum-menu-item-collapsible-no-icon-submenu-item-padding-x-start)`, if not set.", + "control": "text", + "category": "Modifier" + }, + "mod-menu-drillin-icon-color-default": { + "value": "var(--spectrum-menu-drillin-icon-color-default)", + "description": "Used by `.spectrum-Menu-item--drillIn .spectrum-Menu-chevron`.
Defaults to `var(--spectrum-menu-drillin-icon-color-default)`, if not set.", + "control": "color", + "category": "Modifier" + }, + "mod-menu-item-background-color-hover": { + "value": "var(--spectrum-menu-item-background-color-hover)", + "description": "Used by `--spectrum-menu-item-background-color-default`, `.spectrum-Menu-item:hover`.
Defaults to `var(--spectrum-menu-item-background-color-hover)`, if not set.", + "control": "color", + "category": "Modifier" + }, + "mod-menu-item-label-icon-color-hover": { + "value": "var(--spectrum-menu-item-label-icon-color-hover)", + "description": "Used by `.spectrum-Menu-item--drillIn.is-open .spectrum-Menu-itemIcon:not(.spectrum-Menu-chevron, .spectrum-Menu-checkmark)`, `.spectrum-Menu-item:hover > .spectrum-Menu-itemIcon:not(.spectrum-Menu-chevron, .spectrum-Menu-checkmark)`.
Defaults to `var(--spectrum-menu-item-label-icon-color-hover)`, if not set.", + "control": "color", + "category": "Modifier" + }, + "mod-menu-drillin-icon-color-hover": { + "value": "var(--spectrum-menu-drillin-icon-color-hover)", + "description": "Used by `.spectrum-Menu-item--drillIn.is-open .spectrum-Menu-chevron`, `.spectrum-Menu-item--drillIn:hover .spectrum-Menu-chevron`.
Defaults to `var(--spectrum-menu-drillin-icon-color-hover)`, if not set.", + "control": "color", + "category": "Modifier" + }, + "mod-menu-checkmark-icon-color-hover": { + "value": "var(--spectrum-menu-checkmark-icon-color-hover)", + "description": "Used by `.spectrum-Menu-item--drillIn.is-open .spectrum-Menu-checkmark`, `.spectrum-Menu-item:hover > .spectrum-Menu-checkmark`.
Defaults to `var(--spectrum-menu-checkmark-icon-color-hover)`, if not set.", + "control": "color", + "category": "Modifier" + }, + "mod-menu-item-label-content-color-hover": { + "value": "var(--spectrum-menu-item-label-content-color-hover)", + "description": "Used by `.spectrum-Menu-item:hover > .spectrum-Menu-itemLabel`.
Defaults to `var(--spectrum-menu-item-label-content-color-hover)`, if not set.", + "control": "color", + "category": "Modifier" + }, + "mod-menu-item-description-color-hover": { + "value": "var(--spectrum-menu-item-description-color-hover)", + "description": "Used by `.spectrum-Menu-item:hover > .spectrum-Menu-itemDescription`.
Defaults to `var(--spectrum-menu-item-description-color-hover)`, if not set.", + "control": "color", + "category": "Modifier" + }, + "mod-menu-item-value-color-hover": { + "value": "var(--spectrum-menu-item-value-color-hover)", + "description": "Used by `.spectrum-Menu-item:hover > .spectrum-Menu-itemValue`.
Defaults to `var(--spectrum-menu-item-value-color-hover)`, if not set.", + "control": "color", + "category": "Modifier" + }, + "mod-menu-drillin-icon-color-focus": { + "value": "var(--spectrum-menu-drillin-icon-color-focus)", + "description": "Used by `.spectrum-Menu-item--drillIn.is-focused .spectrum-Menu-chevron, .spectrum-Menu-item--drillIn:focus .spectrum-Menu-chevron`.
Defaults to `var(--spectrum-menu-drillin-icon-color-focus)`, if not set.", + "control": "color", + "category": "Modifier" + }, + "mod-menu-drillin-icon-color-down": { + "value": "var(--spectrum-menu-drillin-icon-color-down)", + "description": "Used by `.spectrum-Menu-item--drillIn:active .spectrum-Menu-chevron`.
Defaults to `var(--spectrum-menu-drillin-icon-color-down)`, if not set.", + "control": "color", + "category": "Modifier" + }, + "mod-menu-back-padding-inline-start": { + "description": "Used by `.spectrum-Menu-back`.", + "control": "text", + "category": "Modifier" + }, + "mod-menu-back-padding-inline-end": { + "value": "var(--spectrum-menu-item-label-inline-edge-to-content)", + "description": "Used by `.spectrum-Menu-back`.
Defaults to `var(--spectrum-menu-item-label-inline-edge-to-content)`, if not set.", + "control": "text", + "category": "Modifier" + }, + "mod-menu-back-padding-block-start": { + "description": "Used by `.spectrum-Menu-back`.", + "control": "text", + "category": "Modifier" + }, + "mod-menu-back-padding-block-end": { + "description": "Used by `.spectrum-Menu-back`.", + "control": "text", + "category": "Modifier" + }, + "mod-menu-back-heading-color": { + "value": "var(--spectrum-menu-section-header-color)", + "description": "Used by `.spectrum-Menu-backHeading`.
Defaults to `var(--spectrum-menu-section-header-color)`, if not set.", + "control": "color", + "category": "Modifier" + } + }, + "component": { + "spectrum-menu-item-focus-indicator-shadow": { + "description": "Defined in `.spectrum-Menu`.
Used by `.spectrum-Menu .spectrum-Menu-item--collapsible.is-open:focus-within`, `.spectrum-Menu .spectrum-Menu-item--collapsible.is-open:hover`, `.spectrum-Menu-back:focus-visible, .spectrum-Menu-item:focus-visible`.", + "control": "text", + "category": "Component" + }, + "spectrum-menu-item-focus-indicator-border-width": { + "description": "Defined in `.spectrum-Menu`.
Used by `.spectrum-Menu .spectrum-Menu-item--collapsible.is-open:focus-within`, `.spectrum-Menu .spectrum-Menu-item--collapsible.is-open:hover`, `.spectrum-Menu-back:focus-visible, .spectrum-Menu-item:focus-visible`.", + "control": "text", + "category": "Component" + }, + "spectrum-menu-item-focus-indicator-color-default": { + "description": "Defined in `.spectrum-Menu`.
Used by `.spectrum-Menu .spectrum-Menu-item--collapsible.is-open:focus-within`, `.spectrum-Menu .spectrum-Menu-item--collapsible.is-open:hover`, `.spectrum-Menu-back:focus-visible, .spectrum-Menu-item:focus-visible`.", + "control": "color", + "category": "Component" + }, + "spectrum-menu-item-top-to-action": { + "description": "Defined in `.spectrum-Menu`.
Used by `.spectrum-Menu-item .spectrum-Menu-itemSwitch .spectrum-Switch-switch`.", + "control": "text", + "category": "Component" + }, + "spectrum-menu-item-top-to-checkbox": { + "description": "Defined in `.spectrum-Menu`.
Used by `.spectrum-Menu-item .spectrum-Menu-itemCheckbox .spectrum-Checkbox-box`.", + "control": "text", + "category": "Component" + }, + "spectrum-menu-item-label-line-height": { + "description": "Defined in `.spectrum-Menu`, `.spectrum-Menu:lang(ja), .spectrum-Menu:lang(ko), .spectrum-Menu:lang(zh)`.
Used by `.spectrum-Menu-item`.", + "control": "text", + "category": "Component" + }, + "spectrum-menu-item-label-line-height-cjk": { + "description": "Defined in `.spectrum-Menu`.
Used by `--spectrum-menu-item-label-line-height`.", + "control": "text", + "category": "Component" + }, + "spectrum-menu-item-label-to-description-spacing": { + "description": "Defined in `.spectrum-Menu`.
Used by `.spectrum-Menu-itemDescription`.", + "control": "text", + "category": "Component" + }, + "spectrum-menu-item-label-to-description": { + "value": "1px", + "description": "Used by `--spectrum-menu-item-label-to-description-spacing`.", + "control": "text", + "category": "Component" + }, + "spectrum-menu-item-focus-indicator-width": { + "description": "Defined in `.spectrum-Menu`.
Used by `--spectrum-menu-item-collapsible-no-icon-submenu-item-padding-x-start`, `--spectrum-menu-item-focus-indicator-border-width`, `.spectrum-Menu-item`, `.spectrum-Menu-back:focus-visible, .spectrum-Menu-item:focus-visible`.", + "control": "text", + "category": "Component" + }, + "spectrum-menu-item-focus-indicator-color": { + "description": "Defined in `.spectrum-Menu`.
Used by `--spectrum-menu-item-focus-indicator-color-default`.", + "control": "color", + "category": "Component" + }, + "spectrum-menu-item-label-to-value-area-min-spacing": { + "description": "Defined in `.spectrum-Menu`.
Used by `.spectrum-Menu-itemActions, .spectrum-Menu-itemValue`, `.spectrum-Menu-item--drillIn .spectrum-Menu-chevron`.", + "control": "text", + "category": "Component" + }, + "spectrum-menu-item-label-content-color-default": { + "description": "Defined in `.spectrum-Menu`.
Used by `.spectrum-Menu-itemLabel`.", + "control": "color", + "category": "Component" + }, + "spectrum-menu-item-label-content-color-hover": { + "description": "Defined in `.spectrum-Menu`.
Used by `.spectrum-Menu-item:hover > .spectrum-Menu-itemLabel`.", + "control": "color", + "category": "Component" + }, + "spectrum-menu-item-label-content-color-down": { + "description": "Defined in `.spectrum-Menu`.
Used by `.spectrum-Menu-item:active > .spectrum-Menu-itemLabel`.", + "control": "color", + "category": "Component" + }, + "spectrum-menu-item-label-content-color-focus": { + "description": "Defined in `.spectrum-Menu`.
Used by `.spectrum-Menu-item.is-focused > .spectrum-Menu-itemLabel, .spectrum-Menu-item:focus > .spectrum-Menu-itemLabel`.", + "control": "color", + "category": "Component" + }, + "spectrum-menu-item-label-icon-color-default": { + "description": "Defined in `.spectrum-Menu`.
Used by `.spectrum-Menu .spectrum-Menu-itemIcon`.", + "control": "color", + "category": "Component" + }, + "spectrum-menu-item-label-icon-color-hover": { + "description": "Defined in `.spectrum-Menu`.
Used by `.spectrum-Menu-item--drillIn.is-open .spectrum-Menu-itemIcon:not(.spectrum-Menu-chevron, .spectrum-Menu-checkmark)`, `.spectrum-Menu-item:hover > .spectrum-Menu-itemIcon:not(.spectrum-Menu-chevron, .spectrum-Menu-checkmark)`.", + "control": "color", + "category": "Component" + }, + "spectrum-menu-item-label-icon-color-down": { + "description": "Defined in `.spectrum-Menu`.
Used by `.spectrum-Menu-item:active > .spectrum-Menu-itemIcon:not(.spectrum-Menu-chevron, .spectrum-Menu-checkmark)`.", + "control": "color", + "category": "Component" + }, + "spectrum-menu-item-label-icon-color-focus": { + "description": "Defined in `.spectrum-Menu`.
Used by `.spectrum-Menu-item.is-focused > .spectrum-Menu-itemIcon:not(.spectrum-Menu-chevron, .spectrum-Menu-checkmark), .spectrum-Menu-item:focus > .spectrum-Menu-itemIcon:not(.spectrum-Menu-chevron, .spectrum-Menu-checkmark)`.", + "control": "color", + "category": "Component" + }, + "spectrum-menu-item-label-content-color-disabled": { + "description": "Defined in `.spectrum-Menu`.
Used by `.spectrum-Menu-item.is-disabled .spectrum-Menu-itemLabel, .spectrum-Menu-item.is-disabled .spectrum-Menu-itemValue, .spectrum-Menu-item.is-disabled .spectrum-Menu-sectionHeading, .spectrum-Menu-item[aria-disabled=\"true\"] .spectrum-Menu-itemLabel, .spectrum-Menu-item[aria-disabled=\"true\"] .spectrum-Menu-itemValue, .spectrum-Menu-item[aria-disabled=\"true\"] .spectrum-Menu-sectionHeading`, `.spectrum-Menu-item.is-disabled:hover .spectrum-Menu-itemLabel, .spectrum-Menu-item.is-disabled:hover .spectrum-Menu-itemValue, .spectrum-Menu-item.is-disabled:hover .spectrum-Menu-sectionHeading, .spectrum-Menu-item[aria-disabled=\"true\"]:hover .spectrum-Menu-itemLabel, .spectrum-Menu-item[aria-disabled=\"true\"]:hover .spectrum-Menu-itemValue, .spectrum-Menu-item[aria-disabled=\"true\"]:hover .spectrum-Menu-sectionHeading`.", + "control": "color", + "category": "Component" + }, + "spectrum-menu-item-label-icon-color-disabled": { + "description": "Defined in `.spectrum-Menu`.
Used by `.spectrum-Menu-item.is-disabled .spectrum-Menu-itemIcon, .spectrum-Menu-item[aria-disabled=\"true\"] .spectrum-Menu-itemIcon`, `.spectrum-Menu-item.is-disabled:hover .spectrum-Menu-itemIcon, .spectrum-Menu-item[aria-disabled=\"true\"]:hover .spectrum-Menu-itemIcon`.", + "control": "color", + "category": "Component" + }, + "spectrum-menu-item-description-line-height": { + "description": "Defined in `.spectrum-Menu`, `.spectrum-Menu:lang(ja), .spectrum-Menu:lang(ko), .spectrum-Menu:lang(zh)`.
Used by `.spectrum-Menu-itemDescription`.", + "control": "text", + "category": "Component" + }, + "spectrum-menu-item-description-line-height-cjk": { + "description": "Defined in `.spectrum-Menu`.
Used by `--spectrum-menu-item-description-line-height`.", + "control": "text", + "category": "Component" + }, + "spectrum-menu-item-description-color-default": { + "description": "Defined in `.spectrum-Menu`.
Used by `.spectrum-Menu-itemDescription`.", + "control": "color", + "category": "Component" + }, + "spectrum-menu-item-description-color-hover": { + "description": "Defined in `.spectrum-Menu`.
Used by `.spectrum-Menu-item:hover > .spectrum-Menu-itemDescription`.", + "control": "color", + "category": "Component" + }, + "spectrum-menu-item-description-color-down": { + "description": "Defined in `.spectrum-Menu`.
Used by `.spectrum-Menu-item:active > .spectrum-Menu-itemDescription`.", + "control": "color", + "category": "Component" + }, + "spectrum-menu-item-description-color-focus": { + "description": "Defined in `.spectrum-Menu`.
Used by `.spectrum-Menu-item.is-focused > .spectrum-Menu-itemDescription, .spectrum-Menu-item:focus > .spectrum-Menu-itemDescription`.", + "control": "color", + "category": "Component" + }, + "spectrum-menu-item-description-color-disabled": { + "description": "Defined in `.spectrum-Menu`.
Used by `.spectrum-Menu-item.is-disabled .spectrum-Menu-itemDescription, .spectrum-Menu-item[aria-disabled=\"true\"] .spectrum-Menu-itemDescription`, `.spectrum-Menu-item.is-disabled:hover .spectrum-Menu-itemDescription, .spectrum-Menu-item[aria-disabled=\"true\"]:hover .spectrum-Menu-itemDescription`.", + "control": "color", + "category": "Component" + }, + "spectrum-menu-section-header-line-height": { + "description": "Defined in `.spectrum-Menu`, `.spectrum-Menu:lang(ja), .spectrum-Menu:lang(ko), .spectrum-Menu:lang(zh)`.
Used by `.spectrum-Menu-sectionHeading`, `.spectrum-Menu-backHeading`.", + "control": "text", + "category": "Component" + }, + "spectrum-menu-section-header-line-height-cjk": { + "description": "Defined in `.spectrum-Menu`.
Used by `--spectrum-menu-section-header-line-height`.", + "control": "text", + "category": "Component" + }, + "spectrum-menu-section-header-font-weight": { + "description": "Defined in `.spectrum-Menu`.
Used by `.spectrum-Menu-sectionHeading`, `.spectrum-Menu-backHeading`.", + "control": "text", + "category": "Component" + }, + "spectrum-menu-section-header-color": { + "description": "Defined in `.spectrum-Menu`.
Used by `.spectrum-Menu .spectrum-Menu-backIcon`, `.spectrum-Menu-item.is-focused > .spectrum-Menu-sectionHeading, .spectrum-Menu-item:focus > .spectrum-Menu-sectionHeading`, `.spectrum-Menu-item:active > .spectrum-Menu-sectionHeading`, `.spectrum-Menu-sectionHeading`, `.spectrum-Menu-item:hover > .spectrum-Menu-sectionHeading`, `.spectrum-Menu-backHeading`.", + "control": "color", + "category": "Component" + }, + "spectrum-menu-collapsible-icon-color": { + "description": "Defined in `.spectrum-Menu`.
Used by `.spectrum-Menu-item.is-focused > .spectrum-Menu-chevron, .spectrum-Menu-item:focus > .spectrum-Menu-chevron`, `.spectrum-Menu-item:active > .spectrum-Menu-chevron`, `.spectrum-Menu-item:hover > .spectrum-Menu-chevron`.", + "control": "color", + "category": "Component" + }, + "spectrum-menu-checkmark-icon-color-default": { + "description": "Defined in `.spectrum-Menu`.
Used by `.spectrum-Menu .spectrum-Menu-checkmark`.", + "control": "color", + "category": "Component" + }, + "spectrum-menu-checkmark-icon-color-hover": { + "description": "Defined in `.spectrum-Menu`.
Used by `.spectrum-Menu-item--drillIn.is-open .spectrum-Menu-checkmark`, `.spectrum-Menu-item:hover > .spectrum-Menu-checkmark`.", + "control": "color", + "category": "Component" + }, + "spectrum-menu-checkmark-icon-color-down": { + "description": "Defined in `.spectrum-Menu`.
Used by `.spectrum-Menu-item:active > .spectrum-Menu-checkmark`.", + "control": "color", + "category": "Component" + }, + "spectrum-menu-checkmark-icon-color-focus": { + "description": "Defined in `.spectrum-Menu`.
Used by `.spectrum-Menu-item.is-focused > .spectrum-Menu-checkmark, .spectrum-Menu-item:focus > .spectrum-Menu-checkmark`.", + "control": "color", + "category": "Component" + }, + "spectrum-menu-drillin-icon-color-default": { + "description": "Defined in `.spectrum-Menu`.
Used by `.spectrum-Menu-item--drillIn .spectrum-Menu-chevron`.", + "control": "color", + "category": "Component" + }, + "spectrum-menu-drillin-icon-color-hover": { + "description": "Defined in `.spectrum-Menu`.
Used by `.spectrum-Menu-item--drillIn.is-open .spectrum-Menu-chevron`, `.spectrum-Menu-item--drillIn:hover .spectrum-Menu-chevron`.", + "control": "color", + "category": "Component" + }, + "spectrum-menu-drillin-icon-color-down": { + "description": "Defined in `.spectrum-Menu`.
Used by `.spectrum-Menu-item--drillIn:active .spectrum-Menu-chevron`.", + "control": "color", + "category": "Component" + }, + "spectrum-menu-drillin-icon-color-focus": { + "description": "Defined in `.spectrum-Menu`.
Used by `.spectrum-Menu-item--drillIn.is-focused .spectrum-Menu-chevron, .spectrum-Menu-item--drillIn:focus .spectrum-Menu-chevron`.", + "control": "color", + "category": "Component" + }, + "spectrum-menu-item-value-color-default": { + "description": "Defined in `.spectrum-Menu`.
Used by `.spectrum-Menu-itemValue`.", + "control": "color", + "category": "Component" + }, + "spectrum-menu-item-value-color-hover": { + "description": "Defined in `.spectrum-Menu`.
Used by `.spectrum-Menu-item:hover > .spectrum-Menu-itemValue`.", + "control": "color", + "category": "Component" + }, + "spectrum-menu-item-value-color-down": { + "description": "Defined in `.spectrum-Menu`.
Used by `.spectrum-Menu-item:active > .spectrum-Menu-itemValue`.", + "control": "color", + "category": "Component" + }, + "spectrum-menu-item-value-color-focus": { + "description": "Defined in `.spectrum-Menu`.
Used by `.spectrum-Menu-item.is-focused > .spectrum-Menu-itemValue, .spectrum-Menu-item:focus > .spectrum-Menu-itemValue`.", + "control": "color", + "category": "Component" + }, + "spectrum-menu-checkmark-display-hidden": { + "description": "Defined in `.spectrum-Menu`.
Used by `--spectrum-menu-checkmark-display`.", + "control": "text", + "category": "Component" + }, + "spectrum-menu-checkmark-display-shown": { + "description": "Defined in `.spectrum-Menu`.
Used by `--spectrum-menu-checkmark-display`.", + "control": "text", + "category": "Component" + }, + "spectrum-menu-checkmark-display": { + "description": "Defined in `.spectrum-Menu`, `.spectrum-Menu.is-selectable .spectrum-Menu-item`, `.spectrum-Menu.is-selectable .spectrum-Menu-item.is-selected`.
Used by `.spectrum-Menu .spectrum-Menu-checkmark`.", + "control": "text", + "category": "Component" + }, + "spectrum-menu-item-min-height": { + "description": "Defined in `.spectrum-Menu`, `.spectrum-Menu.spectrum-Menu--sizeS`, `.spectrum-Menu.spectrum-Menu--sizeL`, `.spectrum-Menu.spectrum-Menu--sizeXL`.
Used by `.spectrum-Menu-item`.", + "control": "text", + "category": "Component" + }, + "spectrum-menu-item-icon-height": { + "description": "Defined in `.spectrum-Menu`, `.spectrum-Menu.spectrum-Menu--sizeS`, `.spectrum-Menu.spectrum-Menu--sizeL`, `.spectrum-Menu.spectrum-Menu--sizeXL`.
Used by `.spectrum-Menu .spectrum-Menu-itemIcon:not(.spectrum-Menu-chevron, .spectrum-Menu-checkmark)`.", + "control": "text", + "category": "Component" + }, + "spectrum-menu-item-icon-width": { + "description": "Defined in `.spectrum-Menu`, `.spectrum-Menu.spectrum-Menu--sizeS`, `.spectrum-Menu.spectrum-Menu--sizeL`, `.spectrum-Menu.spectrum-Menu--sizeXL`.
Used by `.spectrum-Menu .spectrum-Menu-itemIcon:not(.spectrum-Menu-chevron, .spectrum-Menu-checkmark)`.", + "control": "text", + "category": "Component" + }, + "spectrum-menu-item-label-font-size": { + "description": "Defined in `.spectrum-Menu`, `.spectrum-Menu.spectrum-Menu--sizeS`, `.spectrum-Menu.spectrum-Menu--sizeL`, `.spectrum-Menu.spectrum-Menu--sizeXL`.
Used by `.spectrum-Menu-itemLabel`, `.spectrum-Menu-itemValue`.", + "control": "text", + "category": "Component" + }, + "spectrum-menu-item-label-text-to-visual": { + "description": "Defined in `.spectrum-Menu`, `.spectrum-Menu.spectrum-Menu--sizeS`, `.spectrum-Menu.spectrum-Menu--sizeL`, `.spectrum-Menu.spectrum-Menu--sizeXL`.
Used by `--spectrum-menu-item-collapsible-no-icon-submenu-item-padding-x-start`, `.spectrum-Menu .spectrum-Menu-itemIcon--workflowIcon`.", + "control": "text", + "category": "Component" + }, + "spectrum-menu-item-label-inline-edge-to-content": { + "description": "Defined in `.spectrum-Menu`, `.spectrum-Menu.spectrum-Menu--sizeS`, `.spectrum-Menu.spectrum-Menu--sizeL`, `.spectrum-Menu.spectrum-Menu--sizeXL`.
Used by `--spectrum-menu-item-collapsible-no-icon-submenu-item-padding-x-start`, `.spectrum-Menu.is-selectable .spectrum-Menu-item.is-selected`, `.spectrum-Menu .spectrum-Menu-divider`, `.spectrum-Menu-item`, `.spectrum-Menu-sectionHeading`, `.spectrum-Menu-item--collapsible .spectrum-Menu`, `.spectrum-Menu-back`.", + "control": "text", + "category": "Component" + }, + "spectrum-menu-item-top-edge-to-text": { + "description": "Defined in `.spectrum-Menu`, `.spectrum-Menu.spectrum-Menu--sizeS`, `.spectrum-Menu.spectrum-Menu--sizeL`, `.spectrum-Menu.spectrum-Menu--sizeXL`.
Used by `.spectrum-Menu .spectrum-Menu-checkmark`, `.spectrum-Menu-item`, `.spectrum-Menu-sectionHeading`, `.spectrum-Menu-item--collapsible > .spectrum-Menu-itemIcon`.", + "control": "text", + "category": "Component" + }, + "spectrum-menu-item-bottom-edge-to-text": { + "description": "Defined in `.spectrum-Menu`, `.spectrum-Menu.spectrum-Menu--sizeS`, `.spectrum-Menu.spectrum-Menu--sizeL`, `.spectrum-Menu.spectrum-Menu--sizeXL`.
Used by `.spectrum-Menu-item`, `.spectrum-Menu-sectionHeading`, `.spectrum-Menu-item--collapsible > .spectrum-Menu-itemIcon`.", + "control": "text", + "category": "Component" + }, + "spectrum-menu-item-text-to-control": { + "description": "Defined in `.spectrum-Menu`, `.spectrum-Menu.spectrum-Menu--sizeS`, `.spectrum-Menu.spectrum-Menu--sizeL`, `.spectrum-Menu.spectrum-Menu--sizeXL`.
Used by `.spectrum-Menu .spectrum-Menu-checkmark, .spectrum-Menu .spectrum-Menu-chevron`, `.spectrum-Menu-item .spectrum-Menu-itemCheckbox .spectrum-Checkbox-box`.", + "control": "text", + "category": "Component" + }, + "spectrum-menu-item-description-font-size": { + "description": "Defined in `.spectrum-Menu`, `.spectrum-Menu.spectrum-Menu--sizeS`, `.spectrum-Menu.spectrum-Menu--sizeL`, `.spectrum-Menu.spectrum-Menu--sizeXL`.
Used by `.spectrum-Menu-itemDescription`.", + "control": "text", + "category": "Component" + }, + "spectrum-menu-section-header-font-size": { + "description": "Defined in `.spectrum-Menu`, `.spectrum-Menu.spectrum-Menu--sizeS`, `.spectrum-Menu.spectrum-Menu--sizeL`, `.spectrum-Menu.spectrum-Menu--sizeXL`.
Used by `.spectrum-Menu-sectionHeading`, `.spectrum-Menu-backHeading`.", + "control": "text", + "category": "Component" + }, + "spectrum-menu-section-header-min-width": { + "description": "Defined in `.spectrum-Menu`, `.spectrum-Menu.spectrum-Menu--sizeS`, `.spectrum-Menu.spectrum-Menu--sizeL`, `.spectrum-Menu.spectrum-Menu--sizeXL`.
Used by `.spectrum-Menu-sectionHeading`.", + "control": "text", + "category": "Component" + }, + "spectrum-menu-item-selectable-edge-to-text-not-selected": { + "description": "Defined in `.spectrum-Menu`, `.spectrum-Menu.spectrum-Menu--sizeS`, `.spectrum-Menu.spectrum-Menu--sizeL`, `.spectrum-Menu.spectrum-Menu--sizeXL`.
Used by `.spectrum-Menu.is-selectable .spectrum-Menu-item`.", + "control": "text", + "category": "Component" + }, + "spectrum-menu-item-selectable-edge-to-text-not-selected-medium": { + "description": "Used by `--spectrum-menu-item-selectable-edge-to-text-not-selected`.", + "control": "text", + "category": "Component" + }, + "spectrum-menu-item-checkmark-height": { + "description": "Defined in `.spectrum-Menu`, `.spectrum-Menu.spectrum-Menu--sizeS`, `.spectrum-Menu.spectrum-Menu--sizeL`, `.spectrum-Menu.spectrum-Menu--sizeXL`.
Used by `.spectrum-Menu .spectrum-Menu-checkmark`, `.spectrum-Menu .spectrum-Menu-chevron`.", + "control": "text", + "category": "Component" + }, + "spectrum-menu-item-checkmark-height-medium": { + "description": "Used by `--spectrum-menu-item-checkmark-height`.", + "control": "text", + "category": "Component" + }, + "spectrum-menu-item-checkmark-width": { + "description": "Defined in `.spectrum-Menu`, `.spectrum-Menu.spectrum-Menu--sizeS`, `.spectrum-Menu.spectrum-Menu--sizeL`, `.spectrum-Menu.spectrum-Menu--sizeXL`.
Used by `--spectrum-menu-item-collapsible-no-icon-submenu-item-padding-x-start`, `.spectrum-Menu .spectrum-Menu-checkmark`, `.spectrum-Menu .spectrum-Menu-chevron`.", + "control": "text", + "category": "Component" + }, + "spectrum-menu-item-checkmark-width-medium": { + "description": "Used by `--spectrum-menu-item-checkmark-width`.", + "control": "text", + "category": "Component" + }, + "spectrum-menu-item-top-to-checkmark": { + "description": "Defined in `.spectrum-Menu`, `.spectrum-Menu.spectrum-Menu--sizeS`, `.spectrum-Menu.spectrum-Menu--sizeL`, `.spectrum-Menu.spectrum-Menu--sizeXL`.
Used by `.spectrum-Menu .spectrum-Menu-checkmark`.", + "control": "text", + "category": "Component" + }, + "spectrum-menu-item-top-to-selected-icon-medium": { + "value": "11px", + "description": "Used by `--spectrum-menu-item-top-to-checkmark`.", + "control": "text", + "category": "Component" + }, + "spectrum-menu-back-icon-margin": { + "description": "Defined in `.spectrum-Menu`, `.spectrum-Menu.spectrum-Menu--sizeS`, `.spectrum-Menu.spectrum-Menu--sizeL`, `.spectrum-Menu.spectrum-Menu--sizeXL`.
Used by `.spectrum-Menu .spectrum-Menu-backIcon`.", + "control": "text", + "category": "Component" + }, + "spectrum-menu-item-collapsible-no-icon-submenu-item-padding-x-start": { + "description": "Defined in `.spectrum-Menu`.
Used by `.spectrum-Menu-item--collapsible .spectrum-Menu .spectrum-Menu-item`.", + "control": "text", + "category": "Component" + }, + "spectrum-menu-item-focus-indicator-direction-scalar": { + "description": "Defined in `.spectrum-Menu:dir(rtl), [dir=\"rtl\"] .spectrum-Menu`.
Used by `--spectrum-menu-item-focus-indicator-border-width`.", + "control": "text", + "category": "Component" + }, + "spectrum-menu-item-selectable-edge-to-text-not-selected-small": { + "description": "Used by `--spectrum-menu-item-selectable-edge-to-text-not-selected`.", + "control": "text", + "category": "Component" + }, + "spectrum-menu-item-checkmark-height-small": { + "description": "Used by `--spectrum-menu-item-checkmark-height`.", + "control": "text", + "category": "Component" + }, + "spectrum-menu-item-checkmark-width-small": { + "description": "Used by `--spectrum-menu-item-checkmark-width`.", + "control": "text", + "category": "Component" + }, + "spectrum-menu-item-top-to-selected-icon-small": { + "value": "7px", + "description": "Used by `--spectrum-menu-item-top-to-checkmark`.", + "control": "text", + "category": "Component" + }, + "spectrum-menu-item-selectable-edge-to-text-not-selected-large": { + "description": "Used by `--spectrum-menu-item-selectable-edge-to-text-not-selected`.", + "control": "text", + "category": "Component" + }, + "spectrum-menu-item-checkmark-height-large": { + "description": "Used by `--spectrum-menu-item-checkmark-height`.", + "control": "text", + "category": "Component" + }, + "spectrum-menu-item-checkmark-width-large": { + "description": "Used by `--spectrum-menu-item-checkmark-width`.", + "control": "text", + "category": "Component" + }, + "spectrum-menu-item-top-to-selected-icon-large": { + "value": "14px", + "description": "Used by `--spectrum-menu-item-top-to-checkmark`.", + "control": "text", + "category": "Component" + }, + "spectrum-menu-item-selectable-edge-to-text-not-selected-extra-large": { + "description": "Used by `--spectrum-menu-item-selectable-edge-to-text-not-selected`.", + "control": "text", + "category": "Component" + }, + "spectrum-menu-item-checkmark-height-extra-large": { + "description": "Used by `--spectrum-menu-item-checkmark-height`.", + "control": "text", + "category": "Component" + }, + "spectrum-menu-item-checkmark-width-extra-large": { + "description": "Used by `--spectrum-menu-item-checkmark-width`.", + "control": "text", + "category": "Component" + }, + "spectrum-menu-item-top-to-selected-icon-extra-large": { + "value": "17px", + "description": "Used by `--spectrum-menu-item-top-to-checkmark`.", + "control": "text", + "category": "Component" + }, + "spectrum-menu-divider-thickness": { + "description": "Defined in `.spectrum-Menu .spectrum-Menu-divider`, `.spectrum-Menu .spectrum-Menu-divider.spectrum-Divider--sizeS`.
Used by `.spectrum-Menu .spectrum-Menu-divider`.", + "control": "text", + "category": "Component" + }, + "spectrum-menu-item-section-divider-height": { + "value": "8px", + "description": "Used by `.spectrum-Menu .spectrum-Menu-divider`.", + "control": "text", + "category": "Component" + }, + "spectrum-menu-item-corner-radius": { + "description": "Defined in `.spectrum-Menu`.
Used by `.spectrum-Menu-item`, `.spectrum-Menu-back:focus-visible, .spectrum-Menu-item:focus-visible`.", + "control": "text", + "category": "Component" + }, + "spectrum-menu-item-background-color-default": { + "description": "Defined in `.spectrum-Menu-item--drillIn.is-open`.
Used by `.spectrum-Menu-item`, `.spectrum-Menu-item--collapsible.is-open.is-focused, .spectrum-Menu-item--collapsible.is-open:active, .spectrum-Menu-item--collapsible.is-open:focus`, `.spectrum-Menu-item--collapsible.is-open:hover`.", + "control": "color", + "category": "Component" + }, + "spectrum-menu-item-focus-indicator-offset": { + "description": "Defined in `.spectrum-Menu`.
Used by `.spectrum-Menu-item`, `.spectrum-Menu-back:focus-visible, .spectrum-Menu-item:focus-visible`.", + "control": "text", + "category": "Component" + }, + "spectrum-menu-item-spacing-multiplier": { + "description": "Defined in `.spectrum-Menu`.
Used by `.spectrum-Menu-item`.", + "control": "text", + "category": "Component" + }, + "spectrum-menu-item-background-color-key-focus": { + "description": "Defined in `.spectrum-Menu`.
Used by `.spectrum-Menu-item.is-focused, .spectrum-Menu-item:focus`.", + "control": "color", + "category": "Component" + }, + "spectrum-menu-item-background-color-down": { + "description": "Defined in `.spectrum-Menu`.
Used by `.spectrum-Menu-item:active`.", + "control": "color", + "category": "Component" + }, + "spectrum-menu-item-focus-indicator-outline-style": { + "description": "Defined in `.spectrum-Menu`.
Used by `.spectrum-Menu-back:focus-visible, .spectrum-Menu-item:focus-visible`.", + "control": "text", + "category": "Component" + }, + "spectrum-menu-item-background-color-hover": { + "description": "Defined in `.spectrum-Menu`.
Used by `--spectrum-menu-item-background-color-default`, `.spectrum-Menu-item:hover`.", + "control": "color", + "category": "Component" + } + }, + "global": { + "spectrum-gray-1000-rgb": { + "description": "Used by `--system-menu-item-background-color-hover`, `--system-menu-item-background-color-down`, `--system-menu-item-background-color-key-focus`.", + "control": "text", + "category": "Global" + }, + "spectrum-transparent-black-200-opacity": { + "description": "Used by `--system-menu-item-background-color-hover`, `--system-menu-item-background-color-down`, `--system-menu-item-background-color-key-focus`.", + "control": "text", + "category": "Global" + }, + "spectrum-corner-radius-100": { + "value": "8px", + "description": "Used by `--system-menu-item-corner-radius`.", + "control": "text", + "category": "Global" + }, + "spectrum-spacing-50": { + "value": "2px", + "description": "Used by `--system-menu-item-focus-indicator-offset`, `--spectrum-menu-item-top-to-action`, `--spectrum-menu-item-top-to-checkbox`.", + "control": "text", + "category": "Global" + }, + "spectrum-line-height-100": { + "value": "1.3", + "description": "Used by `--spectrum-menu-item-label-line-height`, `--spectrum-menu-item-description-line-height`, `--spectrum-menu-section-header-line-height`.", + "control": "text", + "category": "Global" + }, + "spectrum-cjk-line-height-100": { + "value": "1.5", + "description": "Used by `--spectrum-menu-item-label-line-height-cjk`, `--spectrum-menu-item-description-line-height-cjk`, `--spectrum-menu-section-header-line-height-cjk`.", + "control": "text", + "category": "Global" + }, + "spectrum-border-width-200": { + "value": "2px", + "description": "Used by `--spectrum-menu-item-focus-indicator-width`.", + "control": "text", + "category": "Global" + }, + "spectrum-blue-800": { + "value": "light-dark(rgb(75, 117, 255), rgb(64, 105, 253))", + "description": "Used by `--spectrum-menu-item-focus-indicator-color`.", + "control": "text", + "category": "Global" + }, + "spectrum-spacing-100": { + "value": "8px", + "description": "Used by `--spectrum-menu-item-label-to-value-area-min-spacing`.", + "control": "text", + "category": "Global" + }, + "spectrum-neutral-content-color-default": { + "value": "var(--spectrum-gray-800)", + "description": "Used by `--spectrum-menu-item-label-content-color-default`, `--spectrum-menu-item-label-icon-color-default`.", + "control": "color", + "category": "Global" + }, + "spectrum-neutral-content-color-hover": { + "value": "var(--spectrum-gray-900)", + "description": "Used by `--spectrum-menu-item-label-content-color-hover`, `--spectrum-menu-item-label-icon-color-hover`.", + "control": "color", + "category": "Global" + }, + "spectrum-neutral-content-color-down": { + "value": "var(--spectrum-gray-900)", + "description": "Used by `--spectrum-menu-item-label-content-color-down`, `--spectrum-menu-item-label-icon-color-down`.", + "control": "color", + "category": "Global" + }, + "spectrum-neutral-content-color-key-focus": { + "value": "var(--spectrum-gray-900)", + "description": "Used by `--spectrum-menu-item-label-content-color-focus`, `--spectrum-menu-item-label-icon-color-focus`.", + "control": "color", + "category": "Global" + }, + "spectrum-disabled-content-color": { + "value": "var(--spectrum-gray-400)", + "description": "Used by `--spectrum-menu-item-label-content-color-disabled`, `--spectrum-menu-item-label-icon-color-disabled`, `--spectrum-menu-item-description-color-disabled`.", + "control": "color", + "category": "Global" + }, + "spectrum-neutral-subdued-content-color-default": { + "value": "var(--spectrum-gray-700)", + "description": "Used by `--spectrum-menu-item-description-color-default`, `--spectrum-menu-drillin-icon-color-default`, `--spectrum-menu-item-value-color-default`.", + "control": "color", + "category": "Global" + }, + "spectrum-neutral-subdued-content-color-hover": { + "value": "var(--spectrum-gray-800)", + "description": "Used by `--spectrum-menu-item-description-color-hover`, `--spectrum-menu-drillin-icon-color-hover`, `--spectrum-menu-item-value-color-hover`.", + "control": "color", + "category": "Global" + }, + "spectrum-neutral-subdued-content-color-down": { + "value": "var(--spectrum-gray-800)", + "description": "Used by `--spectrum-menu-item-description-color-down`, `--spectrum-menu-drillin-icon-color-down`, `--spectrum-menu-item-value-color-down`.", + "control": "color", + "category": "Global" + }, + "spectrum-neutral-subdued-content-color-key-focus": { + "value": "var(--spectrum-gray-800)", + "description": "Used by `--spectrum-menu-item-description-color-focus`, `--spectrum-menu-drillin-icon-color-focus`, `--spectrum-menu-item-value-color-focus`.", + "control": "color", + "category": "Global" + }, + "spectrum-bold-font-weight": { + "value": "700", + "description": "Used by `--spectrum-menu-section-header-font-weight`.", + "control": "text", + "category": "Global" + }, + "spectrum-gray-900": { + "value": "light-dark(rgb(19, 19, 19), rgb(242, 242, 242))", + "description": "Used by `--spectrum-menu-section-header-color`, `--spectrum-menu-collapsible-icon-color`.", + "control": "text", + "category": "Global" + }, + "spectrum-accent-color-900": { + "value": "var(--spectrum-blue-900)", + "description": "Used by `--spectrum-menu-checkmark-icon-color-default`.", + "control": "color", + "category": "Global" + }, + "spectrum-accent-color-1000": { + "value": "var(--spectrum-blue-1000)", + "description": "Used by `--spectrum-menu-checkmark-icon-color-hover`, `--spectrum-menu-checkmark-icon-color-focus`.", + "control": "color", + "category": "Global" + }, + "spectrum-accent-color-1100": { + "value": "var(--spectrum-blue-1100)", + "description": "Used by `--spectrum-menu-checkmark-icon-color-down`.", + "control": "color", + "category": "Global" + }, + "spectrum-component-height-100": { + "value": "32px", + "description": "Used by `--spectrum-menu-item-min-height`, `--spectrum-menu-section-header-min-width`.", + "control": "text", + "category": "Global" + }, + "spectrum-workflow-icon-size-100": { + "value": "20px", + "description": "Used by `--spectrum-menu-item-icon-height`, `--spectrum-menu-item-icon-width`.", + "control": "text", + "category": "Global" + }, + "spectrum-font-size-100": { + "value": "14px", + "description": "Used by `--spectrum-menu-item-label-font-size`, `--spectrum-menu-section-header-font-size`, `--spectrum-menu-item-description-font-size`.", + "control": "text", + "category": "Global" + }, + "spectrum-text-to-visual-100": { + "value": "6px", + "description": "Used by `--spectrum-menu-item-label-text-to-visual`.", + "control": "text", + "category": "Global" + }, + "spectrum-component-edge-to-text-100": { + "value": "12px", + "description": "Used by `--spectrum-menu-item-label-inline-edge-to-content`.", + "control": "text", + "category": "Global" + }, + "spectrum-component-top-to-text-100": { + "value": "6px", + "description": "Used by `--spectrum-menu-item-top-edge-to-text`.", + "control": "text", + "category": "Global" + }, + "spectrum-component-bottom-to-text-100": { + "value": "9px", + "description": "Used by `--spectrum-menu-item-bottom-edge-to-text`.", + "control": "text", + "category": "Global" + }, + "spectrum-text-to-control-100": { + "value": "10px", + "description": "Used by `--spectrum-menu-item-text-to-control`.", + "control": "text", + "category": "Global" + }, + "spectrum-font-size-75": { + "value": "12px", + "description": "Used by `--spectrum-menu-item-description-font-size`, `--spectrum-menu-item-label-font-size`, `--spectrum-menu-section-header-font-size`.", + "control": "text", + "category": "Global" + }, + "spectrum-navigational-indicator-top-to-back-icon-medium": { + "value": "9px", + "description": "Used by `--spectrum-menu-back-icon-margin`.", + "control": "text", + "category": "Global" + }, + "spectrum-component-height-75": { + "value": "24px", + "description": "Used by `--spectrum-menu-item-min-height`, `--spectrum-menu-section-header-min-width`.", + "control": "text", + "category": "Global" + }, + "spectrum-workflow-icon-size-75": { + "value": "16px", + "description": "Used by `--spectrum-menu-item-icon-height`, `--spectrum-menu-item-icon-width`.", + "control": "text", + "category": "Global" + }, + "spectrum-text-to-visual-75": { + "value": "5px", + "description": "Used by `--spectrum-menu-item-label-text-to-visual`.", + "control": "text", + "category": "Global" + }, + "spectrum-component-edge-to-text-75": { + "value": "10px", + "description": "Used by `--spectrum-menu-item-label-inline-edge-to-content`.", + "control": "text", + "category": "Global" + }, + "spectrum-component-top-to-text-75": { + "value": "4px", + "description": "Used by `--spectrum-menu-item-top-edge-to-text`.", + "control": "text", + "category": "Global" + }, + "spectrum-component-bottom-to-text-75": { + "value": "5px", + "description": "Used by `--spectrum-menu-item-bottom-edge-to-text`.", + "control": "text", + "category": "Global" + }, + "spectrum-text-to-control-75": { + "value": "9px", + "description": "Used by `--spectrum-menu-item-text-to-control`.", + "control": "text", + "category": "Global" + }, + "spectrum-font-size-50": { + "value": "11px", + "description": "Used by `--spectrum-menu-item-description-font-size`.", + "control": "text", + "category": "Global" + }, + "spectrum-navigational-indicator-top-to-back-icon-small": { + "value": "6px", + "description": "Used by `--spectrum-menu-back-icon-margin`.", + "control": "text", + "category": "Global" + }, + "spectrum-component-height-200": { + "value": "40px", + "description": "Used by `--spectrum-menu-item-min-height`, `--spectrum-menu-section-header-min-width`.", + "control": "text", + "category": "Global" + }, + "spectrum-workflow-icon-size-200": { + "value": "22px", + "description": "Used by `--spectrum-menu-item-icon-height`, `--spectrum-menu-item-icon-width`.", + "control": "text", + "category": "Global" + }, + "spectrum-font-size-200": { + "value": "16px", + "description": "Used by `--spectrum-menu-item-label-font-size`, `--spectrum-menu-section-header-font-size`, `--spectrum-menu-item-description-font-size`.", + "control": "text", + "category": "Global" + }, + "spectrum-text-to-visual-200": { + "value": "7px", + "description": "Used by `--spectrum-menu-item-label-text-to-visual`.", + "control": "text", + "category": "Global" + }, + "spectrum-component-edge-to-text-200": { + "value": "15px", + "description": "Used by `--spectrum-menu-item-label-inline-edge-to-content`.", + "control": "text", + "category": "Global" + }, + "spectrum-component-top-to-text-200": { + "value": "9px", + "description": "Used by `--spectrum-menu-item-top-edge-to-text`.", + "control": "text", + "category": "Global" + }, + "spectrum-component-bottom-to-text-200": { + "value": "11px", + "description": "Used by `--spectrum-menu-item-bottom-edge-to-text`.", + "control": "text", + "category": "Global" + }, + "spectrum-text-to-control-200": { + "value": "11px", + "description": "Used by `--spectrum-menu-item-text-to-control`.", + "control": "text", + "category": "Global" + }, + "spectrum-navigational-indicator-top-to-back-icon-large": { + "value": "12px", + "description": "Used by `--spectrum-menu-back-icon-margin`.", + "control": "text", + "category": "Global" + }, + "spectrum-component-height-300": { + "value": "48px", + "description": "Used by `--spectrum-menu-item-min-height`, `--spectrum-menu-section-header-min-width`.", + "control": "text", + "category": "Global" + }, + "spectrum-workflow-icon-size-300": { + "value": "26px", + "description": "Used by `--spectrum-menu-item-icon-height`, `--spectrum-menu-item-icon-width`.", + "control": "text", + "category": "Global" + }, + "spectrum-font-size-300": { + "value": "18px", + "description": "Used by `--spectrum-menu-item-label-font-size`, `--spectrum-menu-section-header-font-size`.", + "control": "text", + "category": "Global" + }, + "spectrum-text-to-visual-300": { + "value": "8px", + "description": "Used by `--spectrum-menu-item-label-text-to-visual`.", + "control": "text", + "category": "Global" + }, + "spectrum-component-edge-to-text-300": { + "value": "17px", + "description": "Used by `--spectrum-menu-item-label-inline-edge-to-content`.", + "control": "text", + "category": "Global" + }, + "spectrum-component-top-to-text-300": { + "value": "12px", + "description": "Used by `--spectrum-menu-item-top-edge-to-text`.", + "control": "text", + "category": "Global" + }, + "spectrum-component-bottom-to-text-300": { + "value": "14px", + "description": "Used by `--spectrum-menu-item-bottom-edge-to-text`.", + "control": "text", + "category": "Global" + }, + "spectrum-text-to-control-300": { + "value": "13px", + "description": "Used by `--spectrum-menu-item-text-to-control`.", + "control": "text", + "category": "Global" + }, + "spectrum-navigational-indicator-top-to-back-icon-extra-large": { + "value": "15px", + "description": "Used by `--spectrum-menu-back-icon-margin`.", + "control": "text", + "category": "Global" + }, + "spectrum-divider-thickness-medium": { + "value": "2px", + "description": "Used by `--spectrum-menu-divider-thickness`.", + "control": "text", + "category": "Global" + }, + "spectrum-divider-thickness-small": { + "value": "1px", + "description": "Used by `--spectrum-menu-divider-thickness`.", + "control": "text", + "category": "Global" + }, + "spectrum-focus-indicator-thickness": { + "value": "2px", + "description": "Used by `.spectrum-Menu-backButton:focus-visible`.", + "control": "text", + "category": "Global" + }, + "spectrum-focus-indicator-color": { + "value": "var(--spectrum-blue-800)", + "description": "Used by `.spectrum-Menu-backButton:focus-visible`.", + "control": "color", + "category": "Global" + } + }, + "system-theme": { + "system-menu-item-background-color-hover": { + "description": "Defined in `.spectrum`.
Used by `--spectrum-menu-item-background-color-hover`.", + "control": "color" + }, + "system-menu-item-background-color-down": { + "description": "Defined in `.spectrum`.
Used by `--spectrum-menu-item-background-color-down`.", + "control": "color" + }, + "system-menu-item-background-color-key-focus": { + "description": "Defined in `.spectrum`.
Used by `--spectrum-menu-item-background-color-key-focus`.", + "control": "color" + }, + "system-menu-item-corner-radius": { + "description": "Defined in `.spectrum`.
Used by `--spectrum-menu-item-corner-radius`.", + "control": "text" + }, + "system-menu-item-focus-indicator-shadow": { + "description": "Defined in `.spectrum`.
Used by `--spectrum-menu-item-focus-indicator-shadow`.", + "control": "text" + }, + "system-menu-item-focus-indicator-offset": { + "description": "Defined in `.spectrum`.
Used by `--spectrum-menu-item-focus-indicator-offset`.", + "control": "text" + }, + "system-menu-item-spacing-multiplier": { + "description": "Defined in `.spectrum`.
Used by `--spectrum-menu-item-spacing-multiplier`.", + "control": "text" + }, + "system-menu-item-focus-indicator-outline-style": { + "description": "Defined in `.spectrum`.
Used by `--spectrum-menu-item-focus-indicator-outline-style`.", + "control": "text" + } + }, + "passthroughs": { + "mod-checkbox-top-to-text": { + "category": "Passthrough" + }, + "mod-checkbox-text-to-control": { + "category": "Passthrough" + }, + "mod-switch-control-label-spacing": { + "category": "Passthrough" + }, + "mod-switch-spacing-top-to-label": { + "category": "Passthrough" + } + }, + "high-contrast": { + "highcontrast-menu-item-background-color-default": { + "value": "var(--mod-menu-item-background-color-default, var(--spectrum-menu-item-background-color-default))", + "description": "Defined in `.spectrum-Menu`, `.spectrum-Menu .spectrum-Menu-item--drillIn.is-open`.
Used by `.spectrum-Menu-item`, `.spectrum-Menu-item--collapsible.is-open.is-focused, .spectrum-Menu-item--collapsible.is-open:active, .spectrum-Menu-item--collapsible.is-open:focus`, `.spectrum-Menu-item--collapsible.is-open:hover`.
Defaults to `var(--mod-menu-item-background-color-default, var(--spectrum-menu-item-background-color-default))`, if not set.", + "control": "color" + }, + "highcontrast-menu-item-color-default": { + "value": "var(--mod-menu-back-heading-color, var(--spectrum-menu-section-header-color))", + "description": "Defined in `.spectrum-Menu`, `.spectrum-Menu .spectrum-Menu-item--drillIn.is-open`.
Used by `--highcontrast-menu-item-color-focus`, `.spectrum-Menu .spectrum-Menu-itemIcon`, `.spectrum-Menu .spectrum-Menu-backIcon`, `.spectrum-Menu-itemLabel`, `.spectrum-Menu-itemValue`, `.spectrum-Menu-sectionHeading`, `.spectrum-Menu-itemDescription`, `.spectrum-Menu-item--drillIn .spectrum-Menu-chevron`, `.spectrum-Menu-backHeading`.
Defaults to `var(--mod-menu-back-heading-color, var(--spectrum-menu-section-header-color))`, if not set.", + "control": "color" + }, + "highcontrast-menu-item-background-color-focus": { + "value": "var(--mod-menu-item-background-color-hover, var(--spectrum-menu-item-background-color-hover))", + "description": "Defined in `.spectrum-Menu`.
Used by `.spectrum-Menu-item.is-focused, .spectrum-Menu-item:focus`, `.spectrum-Menu-item:active`, `.spectrum-Menu-item:hover`.
Defaults to `var(--mod-menu-item-background-color-hover, var(--spectrum-menu-item-background-color-hover))`, if not set.", + "control": "color" + }, + "highcontrast-menu-item-color-focus": { + "value": "var(--mod-menu-drillin-icon-color-down, var(--spectrum-menu-drillin-icon-color-down))", + "description": "Defined in `.spectrum-Menu`, `.spectrum-Menu .spectrum-Menu-item--collapsible.is-open.is-focused, .spectrum-Menu .spectrum-Menu-item--collapsible.is-open:active, .spectrum-Menu .spectrum-Menu-item--collapsible.is-open:focus`, `.spectrum-Menu .spectrum-Menu-item--collapsible.is-open:hover`.
Used by `.spectrum-Menu-item.is-focused > .spectrum-Menu-itemLabel, .spectrum-Menu-item:focus > .spectrum-Menu-itemLabel`, `.spectrum-Menu-item.is-focused > .spectrum-Menu-sectionHeading, .spectrum-Menu-item:focus > .spectrum-Menu-sectionHeading`, `.spectrum-Menu-item.is-focused > .spectrum-Menu-itemDescription, .spectrum-Menu-item:focus > .spectrum-Menu-itemDescription`, `.spectrum-Menu-item.is-focused > .spectrum-Menu-itemValue, .spectrum-Menu-item:focus > .spectrum-Menu-itemValue`, `.spectrum-Menu-item.is-focused > .spectrum-Menu-itemIcon:not(.spectrum-Menu-chevron, .spectrum-Menu-checkmark), .spectrum-Menu-item:focus > .spectrum-Menu-itemIcon:not(.spectrum-Menu-chevron, .spectrum-Menu-checkmark)`, `.spectrum-Menu-item.is-focused > .spectrum-Menu-chevron, .spectrum-Menu-item:focus > .spectrum-Menu-chevron`, `.spectrum-Menu-item.is-focused > .spectrum-Menu-checkmark, .spectrum-Menu-item:focus > .spectrum-Menu-checkmark`, `.spectrum-Menu-item:active > .spectrum-Menu-itemLabel`, `.spectrum-Menu-item:active > .spectrum-Menu-sectionHeading`, `.spectrum-Menu-item:active > .spectrum-Menu-itemDescription`, `.spectrum-Menu-item:active > .spectrum-Menu-itemValue`, `.spectrum-Menu-item:active > .spectrum-Menu-itemIcon:not(.spectrum-Menu-chevron, .spectrum-Menu-checkmark)`, `.spectrum-Menu-item:active > .spectrum-Menu-chevron`, `.spectrum-Menu-item:active > .spectrum-Menu-checkmark`, `.spectrum-Menu-item--drillIn.is-open .spectrum-Menu-itemIcon:not(.spectrum-Menu-chevron, .spectrum-Menu-checkmark)`, `.spectrum-Menu-item--drillIn.is-open .spectrum-Menu-chevron`, `.spectrum-Menu-item:hover > .spectrum-Menu-itemLabel`, `.spectrum-Menu-item:hover > .spectrum-Menu-sectionHeading`, `.spectrum-Menu-item:hover > .spectrum-Menu-itemDescription`, `.spectrum-Menu-item:hover > .spectrum-Menu-itemValue`, `.spectrum-Menu-item:hover > .spectrum-Menu-itemIcon:not(.spectrum-Menu-chevron, .spectrum-Menu-checkmark)`, `.spectrum-Menu-item:hover > .spectrum-Menu-chevron`, `.spectrum-Menu-item:hover > .spectrum-Menu-checkmark`, `.spectrum-Menu-item--drillIn:hover .spectrum-Menu-chevron`, `.spectrum-Menu-item--drillIn.is-focused .spectrum-Menu-chevron, .spectrum-Menu-item--drillIn:focus .spectrum-Menu-chevron`, `.spectrum-Menu-item--drillIn:active .spectrum-Menu-chevron`.
Defaults to `var(--mod-menu-drillin-icon-color-down, var(--spectrum-menu-drillin-icon-color-down))`, if not set.", + "control": "color" + }, + "highcontrast-menu-checkmark-icon-color-default": { + "value": "var(--mod-menu-checkmark-icon-color-hover, var(--spectrum-menu-checkmark-icon-color-hover))", + "description": "Defined in `.spectrum-Menu`.
Used by `.spectrum-Menu .spectrum-Menu-checkmark`, `.spectrum-Menu-item--drillIn.is-open .spectrum-Menu-checkmark`.
Defaults to `var(--mod-menu-checkmark-icon-color-hover, var(--spectrum-menu-checkmark-icon-color-hover))`, if not set.", + "control": "color" + }, + "highcontrast-menu-item-color-disabled": { + "value": "var(--mod-menu-item-label-icon-color-disabled, var(--spectrum-menu-item-label-icon-color-disabled))", + "description": "Defined in `.spectrum-Menu`.
Used by `.spectrum-Menu-item.is-disabled .spectrum-Menu-itemLabel, .spectrum-Menu-item.is-disabled .spectrum-Menu-itemValue, .spectrum-Menu-item.is-disabled .spectrum-Menu-sectionHeading, .spectrum-Menu-item[aria-disabled=\"true\"] .spectrum-Menu-itemLabel, .spectrum-Menu-item[aria-disabled=\"true\"] .spectrum-Menu-itemValue, .spectrum-Menu-item[aria-disabled=\"true\"] .spectrum-Menu-sectionHeading`, `.spectrum-Menu-item.is-disabled .spectrum-Menu-itemDescription, .spectrum-Menu-item[aria-disabled=\"true\"] .spectrum-Menu-itemDescription`, `.spectrum-Menu-item.is-disabled .spectrum-Menu-itemIcon, .spectrum-Menu-item[aria-disabled=\"true\"] .spectrum-Menu-itemIcon`, `.spectrum-Menu-item.is-disabled:hover .spectrum-Menu-itemLabel, .spectrum-Menu-item.is-disabled:hover .spectrum-Menu-itemValue, .spectrum-Menu-item.is-disabled:hover .spectrum-Menu-sectionHeading, .spectrum-Menu-item[aria-disabled=\"true\"]:hover .spectrum-Menu-itemLabel, .spectrum-Menu-item[aria-disabled=\"true\"]:hover .spectrum-Menu-itemValue, .spectrum-Menu-item[aria-disabled=\"true\"]:hover .spectrum-Menu-sectionHeading`, `.spectrum-Menu-item.is-disabled:hover .spectrum-Menu-itemDescription, .spectrum-Menu-item[aria-disabled=\"true\"]:hover .spectrum-Menu-itemDescription`, `.spectrum-Menu-item.is-disabled:hover .spectrum-Menu-itemIcon, .spectrum-Menu-item[aria-disabled=\"true\"]:hover .spectrum-Menu-itemIcon`.
Defaults to `var(--mod-menu-item-label-icon-color-disabled, var(--spectrum-menu-item-label-icon-color-disabled))`, if not set.", + "control": "color" + }, + "highcontrast-menu-item-focus-indicator-color": { + "value": "var(--mod-menu-item-focus-indicator-color, var(--spectrum-menu-item-focus-indicator-color))", + "description": "Defined in `.spectrum-Menu`.
Used by `--spectrum-menu-item-focus-indicator-color-default`.
Defaults to `var(--mod-menu-item-focus-indicator-color, var(--spectrum-menu-item-focus-indicator-color))`, if not set.", + "control": "color" + }, + "highcontrast-menu-item-selected-background-color": { + "value": "var(--mod-menu-item-background-color-hover, var(--spectrum-menu-item-background-color-hover))", + "description": "Defined in `.spectrum-Menu`.
Used by `--highcontrast-menu-item-background-color-default`, `--spectrum-menu-item-background-color-default`.
Defaults to `var(--mod-menu-item-background-color-hover, var(--spectrum-menu-item-background-color-hover))`, if not set.", + "control": "color" + }, + "highcontrast-menu-item-selected-color": { + "description": "Defined in `.spectrum-Menu`.
Used by `--highcontrast-menu-item-color-default`.", + "control": "color" + }, + "highcontrast-checkbox-highlight-color-hover": { + "description": "Defined in `.spectrum-Menu .spectrum-Menu-item:focus .spectrum-Menu-itemCheckbox`, `.spectrum-Menu .spectrum-Menu-item:hover .spectrum-Menu-itemCheckbox`.", + "control": "color" + }, + "highcontrast-checkbox-highlight-color-default": { + "description": "Defined in `.spectrum-Menu .spectrum-Menu-item:focus .spectrum-Menu-itemCheckbox`, `.spectrum-Menu .spectrum-Menu-item:hover .spectrum-Menu-itemCheckbox`.", + "control": "color" + }, + "highcontrast-switch-handle-border-color-hover": { + "description": "Defined in `.spectrum-Menu .spectrum-Menu-item:focus .spectrum-Menu-itemSwitch`, `.spectrum-Menu .spectrum-Menu-item:hover .spectrum-Menu-itemSwitch`.", + "control": "color" + }, + "highcontrast-switch-handle-border-color-selected-default": { + "description": "Defined in `.spectrum-Menu .spectrum-Menu-item:focus .spectrum-Menu-itemSwitch`, `.spectrum-Menu .spectrum-Menu-item:hover .spectrum-Menu-itemSwitch`.", + "control": "color" + }, + "highcontrast-switch-handle-border-color-selected-hover": { + "description": "Defined in `.spectrum-Menu .spectrum-Menu-item:focus .spectrum-Menu-itemSwitch`, `.spectrum-Menu .spectrum-Menu-item:hover .spectrum-Menu-itemSwitch`.", + "control": "color" + }, + "highcontrast-switch-background-color-selected-default": { + "description": "Defined in `.spectrum-Menu .spectrum-Menu-item:focus .spectrum-Menu-itemSwitch`, `.spectrum-Menu .spectrum-Menu-item:hover .spectrum-Menu-itemSwitch`.", + "control": "color" + }, + "highcontrast-switch-background-color-selected-hover": { + "description": "Defined in `.spectrum-Menu .spectrum-Menu-item:focus .spectrum-Menu-itemSwitch`, `.spectrum-Menu .spectrum-Menu-item:hover .spectrum-Menu-itemSwitch`.", + "control": "color" + } + } } diff --git a/components/menu/stories/menu.stories.js b/components/menu/stories/menu.stories.js index 23f82bfd300..6a4828193c7 100644 --- a/components/menu/stories/menu.stories.js +++ b/components/menu/stories/menu.stories.js @@ -2,11 +2,13 @@ import { default as IconStories } from "@spectrum-css/icon/stories/icon.stories. import { Sizes } from "@spectrum-css/preview/decorators"; import { disableDefaultModes } from "@spectrum-css/preview/modes"; import { isActive, isDisabled, isFocused, isHovered, isSelected, size } from "@spectrum-css/preview/types"; -import metadata from "../dist/metadata.json"; -import packageJson from "../package.json"; import { MenuItemGroup, MenuTraySubmenu, MenuWithVariants } from "./menu.test.js"; import { DisabledItemGroup, OverflowGroup, SelectionGroup, SubmenuInPopover, Template } from "./template.js"; +// Local assets to render the component styles and structure +import metadata from "../dist/metadata.json"; +import packageJson from "../package.json"; + /** * A menu is used for creating a menu list. The various elements inside a menu can be: a menu group, a menu item, or a * menu divider. Often a menu will appear in a popover so that it displays as a toggling menu. @@ -88,6 +90,7 @@ export default { }, packageJson, metadata, + cssprops: metadata.modifiers, }, }; diff --git a/components/menu/stories/template.js b/components/menu/stories/template.js index c50482cb696..feae8f6270c 100644 --- a/components/menu/stories/template.js +++ b/components/menu/stories/template.js @@ -41,7 +41,7 @@ export const MenuItem = ( iconName, iconSet = "workflow", hasActions = false, - id = getRandomId("menuitem"), + id = getRandomId("menu-item"), idx = 0, isActive = false, isCollapsible = false, @@ -226,7 +226,7 @@ export const MenuGroup = ( { hasActions = false, heading, - id = getRandomId("menugroup"), + id = getRandomId("menu-group"), idx = 0, items = [], isDisabled = false, diff --git a/components/meter/dist/metadata.json b/components/meter/dist/metadata.json index 9bfe3424ce7..2e2df6ca298 100644 --- a/components/meter/dist/metadata.json +++ b/components/meter/dist/metadata.json @@ -8,36 +8,125 @@ ".spectrum-Meter.spectrum-Meter--sizeL", ".spectrum-Meter.spectrum-Meter--sizeS" ], - "modifiers": [ - "--mod-meter-inline-size", - "--mod-meter-max-width", - "--mod-meter-min-width" - ], - "component": [ - "--spectrum-meter-default-width", - "--spectrum-meter-maximum-width", - "--spectrum-meter-minimum-width", - "--spectrum-meter-thickness-large", - "--spectrum-meter-thickness-small" - ], - "global": [ - "--spectrum-component-top-to-text-200", - "--spectrum-component-top-to-text-75", - "--spectrum-font-size-100", - "--spectrum-font-size-75", - "--spectrum-negative-visual-color", - "--spectrum-notice-visual-color", - "--spectrum-positive-visual-color" - ], - "system-theme": [], - "passthroughs": [ - "--mod-progressbar-fill-color", - "--mod-progressbar-font-size", - "--mod-progressbar-max-size", - "--mod-progressbar-min-size", - "--mod-progressbar-size-default", - "--mod-progressbar-spacing-top-to-text", - "--mod-progressbar-thickness" - ], - "high-contrast": [] + "modifiers": { + "mod-meter-inline-size": { + "value": "var(--spectrum-meter-width)", + "description": "Used by `--mod-progressbar-size-default`.
Defaults to `var(--spectrum-meter-default-width)`, if not set.", + "control": "text", + "category": "Modifier" + }, + "mod-meter-max-width": { + "value": "768px", + "description": "Used by `--mod-progressbar-max-size`.
Defaults to `var(--spectrum-meter-maximum-width)`, if not set.", + "control": "text", + "category": "Modifier" + }, + "mod-meter-min-width": { + "value": "48px", + "description": "Used by `--mod-progressbar-min-size`.
Defaults to `var(--spectrum-meter-minimum-width)`, if not set.", + "control": "text", + "category": "Modifier" + } + }, + "component": { + "spectrum-meter-default-width": { + "value": "var(--spectrum-meter-width)", + "description": "Used by `--mod-progressbar-size-default`.", + "control": "text", + "category": "Component" + }, + "spectrum-meter-maximum-width": { + "value": "768px", + "description": "Used by `--mod-progressbar-max-size`.", + "control": "text", + "category": "Component" + }, + "spectrum-meter-minimum-width": { + "value": "48px", + "description": "Used by `--mod-progressbar-min-size`.", + "control": "text", + "category": "Component" + }, + "spectrum-meter-thickness-small": { + "value": "4px", + "description": "Used by `--mod-progressbar-thickness`.", + "control": "text", + "category": "Component" + }, + "spectrum-meter-thickness-large": { + "value": "6px", + "description": "Used by `--mod-progressbar-thickness`.", + "control": "text", + "category": "Component" + } + }, + "global": { + "spectrum-font-size-75": { + "value": "12px", + "description": "Used by `--mod-progressbar-font-size`.", + "control": "text", + "category": "Global" + }, + "spectrum-component-top-to-text-75": { + "value": "4px", + "description": "Used by `--mod-progressbar-spacing-top-to-text`.", + "control": "text", + "category": "Global" + }, + "spectrum-font-size-100": { + "value": "14px", + "description": "Used by `--mod-progressbar-font-size`.", + "control": "text", + "category": "Global" + }, + "spectrum-component-top-to-text-200": { + "value": "9px", + "description": "Used by `--mod-progressbar-spacing-top-to-text`.", + "control": "text", + "category": "Global" + }, + "spectrum-positive-visual-color": { + "value": "var(--spectrum-positive-color-900)", + "description": "Used by `--mod-progressbar-fill-color`.", + "control": "color", + "category": "Global" + }, + "spectrum-notice-visual-color": { + "value": "var(--spectrum-notice-color-900)", + "description": "Used by `--mod-progressbar-fill-color`.", + "control": "color", + "category": "Global" + }, + "spectrum-negative-visual-color": { + "value": "var(--spectrum-negative-color-900)", + "description": "Used by `--mod-progressbar-fill-color`.", + "control": "color", + "category": "Global" + } + }, + "system-theme": {}, + "passthroughs": { + "mod-progressbar-size-default": { + "category": "Passthrough" + }, + "mod-progressbar-max-size": { + "category": "Passthrough" + }, + "mod-progressbar-min-size": { + "category": "Passthrough" + }, + "mod-progressbar-thickness": { + "category": "Passthrough" + }, + "mod-progressbar-font-size": { + "category": "Passthrough" + }, + "mod-progressbar-spacing-top-to-text": { + "category": "Passthrough" + }, + "mod-progressbar-fill-color": { + "category": "Passthrough" + } + }, + "high-contrast": {} } diff --git a/components/meter/stories/meter.stories.js b/components/meter/stories/meter.stories.js index 15603bc9d7c..bec71ff90a8 100644 --- a/components/meter/stories/meter.stories.js +++ b/components/meter/stories/meter.stories.js @@ -2,11 +2,13 @@ import { Sizes } from "@spectrum-css/preview/decorators"; import { disableDefaultModes } from "@spectrum-css/preview/modes"; import { size } from "@spectrum-css/preview/types"; import { default as ProgressBar } from "@spectrum-css/progressbar/stories/progressbar.stories.js"; -import metadata from "../dist/metadata.json"; -import packageJson from "../package.json"; import { MeterGroup } from "./meter.test.js"; import { FillGroup, Template } from "./template.js"; +// Local assets to render the component styles and structure +import metadata from "../dist/metadata.json"; +import packageJson from "../package.json"; + /** * The meter component is a visual representations of a quantity or an achievement. The progress is determined by user actions, rather than system actions. * @@ -47,6 +49,7 @@ export default { }, packageJson, metadata, + cssprops: metadata.modifiers, }, }; diff --git a/components/miller/dist/metadata.json b/components/miller/dist/metadata.json index adb2109144c..fdae33a51d1 100644 --- a/components/miller/dist/metadata.json +++ b/components/miller/dist/metadata.json @@ -5,15 +5,41 @@ ".spectrum-MillerColumns-item", ".spectrum-MillerColumns-item:first-child" ], - "modifiers": [ - "--mod-millercolumns-inline-size", - "--mod-millercolumns-margin-inline-end", - "--mod-millercolumns-margin-inline-start", - "--mod-millercolumns-padding" - ], - "component": [], - "global": ["--spectrum-spacing-100"], - "system-theme": [], - "passthroughs": [], - "high-contrast": [] + "modifiers": { + "mod-millercolumns-padding": { + "value": "8px", + "description": "Used by `.spectrum-MillerColumns`.
Defaults to `var(--spectrum-spacing-100)`, if not set.", + "control": "text", + "category": "Modifier" + }, + "mod-millercolumns-inline-size": { + "description": "Used by `.spectrum-MillerColumns-item`.", + "control": "text", + "category": "Modifier" + }, + "mod-millercolumns-margin-inline-end": { + "value": "8px", + "description": "Used by `.spectrum-MillerColumns-item`.
Defaults to `var(--spectrum-spacing-100)`, if not set.", + "control": "text", + "category": "Modifier" + }, + "mod-millercolumns-margin-inline-start": { + "value": "8px", + "description": "Used by `.spectrum-MillerColumns-item:first-child`.
Defaults to `var(--spectrum-spacing-100)`, if not set.", + "control": "text", + "category": "Modifier" + } + }, + "component": {}, + "global": { + "spectrum-spacing-100": { + "value": "8px", + "description": "Used by `.spectrum-MillerColumns`, `.spectrum-MillerColumns-item`, `.spectrum-MillerColumns-item:first-child`.", + "control": "text", + "category": "Global" + } + }, + "system-theme": {}, + "passthroughs": {}, + "high-contrast": {} } diff --git a/components/miller/stories/miller.stories.js b/components/miller/stories/miller.stories.js index a255362e891..16ef2ac2869 100644 --- a/components/miller/stories/miller.stories.js +++ b/components/miller/stories/miller.stories.js @@ -1,9 +1,11 @@ import { disableDefaultModes } from "@spectrum-css/preview/modes"; -import metadata from "../dist/metadata.json"; -import packageJson from "../package.json"; import { MillerGroup } from "./miller.test.js"; import { Template } from "./template.js"; +// Local assets to render the component styles and structure +import metadata from "../dist/metadata.json"; +import packageJson from "../package.json"; + /** * Miller columns are a browsing/visualization technique that can be applied to tree structures. The columns allow for multiple levels of the hierarchy to be open at once and provide a visual representation of the current location. */ @@ -79,6 +81,7 @@ export default { parameters: { packageJson, metadata, + cssprops: metadata.modifiers, }, }; diff --git a/components/modal/dist/metadata.json b/components/modal/dist/metadata.json index 950d9fca3c6..93e928e2c92 100644 --- a/components/modal/dist/metadata.json +++ b/components/modal/dist/metadata.json @@ -11,42 +11,175 @@ ".spectrum-Modal-wrapper.is-open", ".spectrum-Modal.is-open" ], - "modifiers": [ - "--mod-modal-background-color", - "--mod-modal-confirm-border-radius", - "--mod-modal-confirm-entry-animation-delay", - "--mod-modal-confirm-entry-animation-distance", - "--mod-modal-confirm-entry-animation-duration", - "--mod-modal-confirm-exit-animation-delay", - "--mod-modal-confirm-exit-animation-duration", - "--mod-modal-fullscreen-margin", - "--mod-modal-max-height", - "--mod-modal-max-width", - "--mod-modal-transition-animation-duration", - "--mod-overlay-animation-duration", - "--mod-overlay-animation-duration-opened" - ], - "component": [ - "--spectrum-modal-background-color", - "--spectrum-modal-confirm-entry-animation-delay", - "--spectrum-modal-confirm-entry-animation-duration", - "--spectrum-modal-confirm-exit-animation-delay", - "--spectrum-modal-confirm-exit-animation-duration", - "--spectrum-modal-fullscreen-margin" - ], - "global": [ - "--spectrum-animation-duration-0", - "--spectrum-animation-duration-100", - "--spectrum-animation-duration-200", - "--spectrum-animation-duration-500", - "--spectrum-animation-ease-in", - "--spectrum-animation-ease-out", - "--spectrum-animation-linear", - "--spectrum-background-layer-2-color", - "--spectrum-corner-radius-100", - "--spectrum-dialog-confirm-entry-animation-distance" - ], - "system-theme": ["--system-modal-background-color"], - "passthroughs": [], - "high-contrast": [] + "modifiers": { + "mod-modal-confirm-entry-animation-duration": { + "value": "var(--spectrum-animation-duration-500)", + "description": "Used by `--spectrum-modal-confirm-entry-animation-duration`.
Defaults to `var(--spectrum-animation-duration-500)`, if not set.", + "control": "text", + "category": "Modifier" + }, + "mod-overlay-animation-duration-opened": { + "value": "var(--mod-modal-confirm-entry-animation-delay, var(--spectrum-animation-duration-200))", + "description": "Used by `--spectrum-modal-confirm-entry-animation-delay`.
Defaults to `var(--mod-modal-confirm-entry-animation-delay, var(--spectrum-animation-duration-200))`, if not set.", + "control": "text", + "category": "Modifier" + }, + "mod-modal-confirm-entry-animation-delay": { + "value": "var(--spectrum-animation-duration-200)", + "description": "Used by `--spectrum-modal-confirm-entry-animation-delay`.
Defaults to `var(--spectrum-animation-duration-200)`, if not set.", + "control": "text", + "category": "Modifier" + }, + "mod-overlay-animation-duration": { + "value": "var(--mod-modal-confirm-exit-animation-duration, var(--spectrum-animation-duration-100))", + "description": "Used by `--spectrum-modal-confirm-exit-animation-duration`.
Defaults to `var(--mod-modal-confirm-exit-animation-duration, var(--spectrum-animation-duration-100))`, if not set.", + "control": "text", + "category": "Modifier" + }, + "mod-modal-confirm-exit-animation-duration": { + "value": "var(--spectrum-animation-duration-100)", + "description": "Used by `--spectrum-modal-confirm-exit-animation-duration`.
Defaults to `var(--spectrum-animation-duration-100)`, if not set.", + "control": "text", + "category": "Modifier" + }, + "mod-modal-confirm-exit-animation-delay": { + "value": "var(--spectrum-animation-duration-0)", + "description": "Used by `--spectrum-modal-confirm-exit-animation-delay`.
Defaults to `var(--spectrum-animation-duration-0)`, if not set.", + "control": "text", + "category": "Modifier" + }, + "mod-modal-fullscreen-margin": { + "description": "Used by `--spectrum-modal-fullscreen-margin`.", + "control": "text", + "category": "Modifier" + }, + "mod-modal-transition-animation-duration": { + "value": "var(--spectrum-animation-duration-100)", + "description": "Used by `.spectrum-Modal-wrapper`.
Defaults to `var(--spectrum-animation-duration-100)`, if not set.", + "control": "text", + "category": "Modifier" + }, + "mod-modal-confirm-entry-animation-distance": { + "value": "var(--spectrum-dialog-confirm-entry-animation-distance)", + "description": "Used by `.spectrum-Modal`.
Defaults to `var(--spectrum-dialog-confirm-entry-animation-distance)`, if not set.", + "control": "text", + "category": "Modifier" + }, + "mod-modal-max-height": { + "description": "Used by `.spectrum-Modal`.", + "control": "text", + "category": "Modifier" + }, + "mod-modal-max-width": { + "description": "Used by `.spectrum-Modal`.", + "control": "text", + "category": "Modifier" + }, + "mod-modal-background-color": { + "value": "var(--spectrum-modal-background-color)", + "description": "Used by `.spectrum-Modal`.
Defaults to `var(--spectrum-modal-background-color)`, if not set.", + "control": "color", + "category": "Modifier" + }, + "mod-modal-confirm-border-radius": { + "value": "8px", + "description": "Used by `.spectrum-Modal`.
Defaults to `var(--spectrum-corner-radius-100)`, if not set.", + "control": "text", + "category": "Modifier" + } + }, + "component": { + "spectrum-modal-confirm-entry-animation-duration": { + "description": "Defined in `.spectrum-Modal`.
Used by `.spectrum-Modal.is-open`.", + "control": "text", + "category": "Component" + }, + "spectrum-modal-confirm-entry-animation-delay": { + "description": "Defined in `.spectrum-Modal`.
Used by `.spectrum-Modal.is-open`.", + "control": "text", + "category": "Component" + }, + "spectrum-modal-confirm-exit-animation-duration": { + "description": "Defined in `.spectrum-Modal`.
Used by `.spectrum-Modal`.", + "control": "text", + "category": "Component" + }, + "spectrum-modal-confirm-exit-animation-delay": { + "description": "Defined in `.spectrum-Modal`.
Used by `.spectrum-Modal`.", + "control": "text", + "category": "Component" + }, + "spectrum-modal-fullscreen-margin": { + "description": "Defined in `.spectrum-Modal`.
Used by `.spectrum-Modal--fullscreen`.", + "control": "text", + "category": "Component" + }, + "spectrum-modal-background-color": { + "description": "Defined in `.spectrum-Modal`.
Used by `.spectrum-Modal`.", + "control": "color", + "category": "Component" + } + }, + "global": { + "spectrum-background-layer-2-color": { + "value": "var(--spectrum-gray-75)", + "description": "Used by `--system-modal-background-color`.", + "control": "color", + "category": "Global" + }, + "spectrum-animation-duration-500": { + "description": "Used by `--spectrum-modal-confirm-entry-animation-duration`.", + "control": "text", + "category": "Global" + }, + "spectrum-animation-duration-200": { + "description": "Used by `--spectrum-modal-confirm-entry-animation-delay`.", + "control": "text", + "category": "Global" + }, + "spectrum-animation-duration-100": { + "description": "Used by `--spectrum-modal-confirm-exit-animation-duration`, `.spectrum-Modal-wrapper`.", + "control": "text", + "category": "Global" + }, + "spectrum-animation-duration-0": { + "description": "Used by `--spectrum-modal-confirm-exit-animation-delay`, `.spectrum-Modal`.", + "control": "text", + "category": "Global" + }, + "spectrum-dialog-confirm-entry-animation-distance": { + "description": "Used by `.spectrum-Modal`.", + "control": "text", + "category": "Global" + }, + "spectrum-corner-radius-100": { + "value": "8px", + "description": "Used by `.spectrum-Modal`.", + "control": "text", + "category": "Global" + }, + "spectrum-animation-ease-in": { + "description": "Used by `.spectrum-Modal`.", + "control": "text", + "category": "Global" + }, + "spectrum-animation-linear": { + "description": "Used by `.spectrum-Modal`.", + "control": "text", + "category": "Global" + }, + "spectrum-animation-ease-out": { + "description": "Used by `.spectrum-Modal.is-open`.", + "control": "text", + "category": "Global" + } + }, + "system-theme": { + "system-modal-background-color": { + "description": "Defined in `.spectrum`.
Used by `--spectrum-modal-background-color`.", + "control": "color" + } + }, + "passthroughs": {}, + "high-contrast": {} } diff --git a/components/modal/stories/modal.stories.js b/components/modal/stories/modal.stories.js index a4ce483de5f..511dd56bdcb 100644 --- a/components/modal/stories/modal.stories.js +++ b/components/modal/stories/modal.stories.js @@ -2,9 +2,11 @@ import { withUnderlayWrapper } from "@spectrum-css/preview/decorators"; import { disableDefaultModes } from "@spectrum-css/preview/modes"; import { isOpen } from "@spectrum-css/preview/types"; import { Template as Typography } from "@spectrum-css/typography/stories/template.js"; +import { ModalGroup } from "./modal.test.js"; + +// Local assets to render the component styles and structure import metadata from "../dist/metadata.json"; import packageJson from "../package.json"; -import { ModalGroup } from "./modal.test.js"; /** * A modal component is a dialog box/popup window that is displayed on top of the current page using `position: fixed`. @@ -51,6 +53,7 @@ export default { }, packageJson, metadata, + cssprops: metadata.modifiers, }, decorators: [ withUnderlayWrapper, diff --git a/components/opacitycheckerboard/dist/metadata.json b/components/opacitycheckerboard/dist/metadata.json index 51c1a155873..733b68b1178 100644 --- a/components/opacitycheckerboard/dist/metadata.json +++ b/components/opacitycheckerboard/dist/metadata.json @@ -1,19 +1,53 @@ { "sourceFile": "index.css", "selectors": [".spectrum-OpacityCheckerboard"], - "modifiers": [ - "--mod-opacity-checkerboard-dark", - "--mod-opacity-checkerboard-light", - "--mod-opacity-checkerboard-position", - "--mod-opacity-checkerboard-size" - ], - "component": [ - "--spectrum-opacity-checkerboard-square-dark", - "--spectrum-opacity-checkerboard-square-light", - "--spectrum-opacity-checkerboard-square-size" - ], - "global": [], - "system-theme": [], - "passthroughs": [], - "high-contrast": [] + "modifiers": { + "mod-opacity-checkerboard-light": { + "value": "var(--spectrum-white)", + "description": "Used by `.spectrum-OpacityCheckerboard`.
Defaults to `var(--spectrum-opacity-checkerboard-square-light)`, if not set.", + "control": "text", + "category": "Modifier" + }, + "mod-opacity-checkerboard-dark": { + "value": "var(--spectrum-gray-800)", + "description": "Used by `.spectrum-OpacityCheckerboard`.
Defaults to `var(--spectrum-opacity-checkerboard-square-dark)`, if not set.", + "control": "text", + "category": "Modifier" + }, + "mod-opacity-checkerboard-position": { + "description": "Used by `.spectrum-OpacityCheckerboard`.", + "control": "text", + "category": "Modifier" + }, + "mod-opacity-checkerboard-size": { + "value": "8px", + "description": "Used by `.spectrum-OpacityCheckerboard`.
Defaults to `var(--spectrum-opacity-checkerboard-square-size)`, if not set.", + "control": "text", + "category": "Modifier" + } + }, + "component": { + "spectrum-opacity-checkerboard-square-light": { + "value": "var(--spectrum-white)", + "description": "Used by `.spectrum-OpacityCheckerboard`.", + "control": "text", + "category": "Component" + }, + "spectrum-opacity-checkerboard-square-dark": { + "value": "var(--spectrum-gray-800)", + "description": "Used by `.spectrum-OpacityCheckerboard`.", + "control": "text", + "category": "Component" + }, + "spectrum-opacity-checkerboard-square-size": { + "value": "8px", + "description": "Used by `.spectrum-OpacityCheckerboard`.", + "control": "text", + "category": "Component" + } + }, + "global": {}, + "system-theme": {}, + "passthroughs": {}, + "high-contrast": {} } diff --git a/components/opacitycheckerboard/stories/opacitycheckerboard.stories.js b/components/opacitycheckerboard/stories/opacitycheckerboard.stories.js index e908a5cd05b..577a4e946a3 100644 --- a/components/opacitycheckerboard/stories/opacitycheckerboard.stories.js +++ b/components/opacitycheckerboard/stories/opacitycheckerboard.stories.js @@ -1,9 +1,11 @@ import { disableDefaultModes } from "@spectrum-css/preview/modes"; -import metadata from "../dist/metadata.json"; -import packageJson from "../package.json"; import { OpacityCheckboardGroup } from "./opacitycheckerboard.test.js"; import { Template } from "./template.js"; +// Local assets to render the component styles and structure +import metadata from "../dist/metadata.json"; +import packageJson from "../package.json"; + /** * Opacity checkerboard is used with other components to highlight opacity. */ @@ -32,6 +34,7 @@ export default { parameters: { packageJson, metadata, + cssprops: metadata.modifiers, }, }; diff --git a/components/page/dist/metadata.json b/components/page/dist/metadata.json index cb8c8163de8..23358041739 100644 --- a/components/page/dist/metadata.json +++ b/components/page/dist/metadata.json @@ -1,16 +1,56 @@ { "sourceFile": "index.css", "selectors": [":root"], - "modifiers": ["--mod-page-background", "--mod-page-content-tap-highlight"], - "component": [ - "--spectrum-page-background-color", - "--spectrum-page-content-tap-highlight" - ], - "global": ["--spectrum-gray-75", "--spectrum-transparent-black-25"], - "system-theme": [ - "--system-root-page-background-color", - "--system-root-page-content-tap-highlight" - ], - "passthroughs": [], - "high-contrast": [] + "modifiers": { + "mod-page-background": { + "value": "var(--spectrum-page-background-color)", + "description": "Used by `:root`.
Defaults to `var(--spectrum-page-background-color)`, if not set.", + "control": "text", + "category": "Modifier" + }, + "mod-page-content-tap-highlight": { + "value": "var(--spectrum-page-content-tap-highlight)", + "description": "Used by `:root`.
Defaults to `var(--spectrum-page-content-tap-highlight)`, if not set.", + "control": "text", + "category": "Modifier" + } + }, + "component": { + "spectrum-page-background-color": { + "description": "Defined in `:root`.
Used by `:root`.", + "control": "color", + "category": "Component" + }, + "spectrum-page-content-tap-highlight": { + "description": "Defined in `:root`.
Used by `:root`.", + "control": "text", + "category": "Component" + } + }, + "global": { + "spectrum-gray-75": { + "value": "light-dark(rgb(243, 243, 243), rgb(34, 34, 34))", + "description": "Used by `--system-root-page-background-color`.", + "control": "text", + "category": "Global" + }, + "spectrum-transparent-black-25": { + "value": "light-dark(rgba(0, 0, 0, 0), rgba(0, 0, 0, 0))", + "description": "Used by `--system-root-page-content-tap-highlight`.", + "control": "text", + "category": "Global" + } + }, + "system-theme": { + "system-root-page-background-color": { + "description": "Defined in `.spectrum`.
Used by `--spectrum-page-background-color`.", + "control": "color" + }, + "system-root-page-content-tap-highlight": { + "description": "Defined in `.spectrum`.
Used by `--spectrum-page-content-tap-highlight`.", + "control": "text" + } + }, + "passthroughs": {}, + "high-contrast": {} } diff --git a/components/pagination/dist/metadata.json b/components/pagination/dist/metadata.json index 7a0b21fe8dd..abb0fa98f9b 100644 --- a/components/pagination/dist/metadata.json +++ b/components/pagination/dist/metadata.json @@ -13,28 +13,103 @@ ".spectrum-Pagination:dir(rtl)", "[dir=\"rtl\"] .spectrum-Pagination" ], - "modifiers": [ - "--mod-pagination-counter-color", - "--mod-pagination-counter-font-size", - "--mod-pagination-counter-line-height", - "--mod-pagination-page-button-inline-spacing", - "--mod-pagination-textfield-width" - ], - "component": [ - "--spectrum-pagination-counter-color", - "--spectrum-pagination-counter-font-size", - "--spectrum-pagination-counter-inline-spacing", - "--spectrum-pagination-counter-line-height", - "--spectrum-pagination-item-inline-spacing", - "--spectrum-pagination-textfield-width" - ], - "global": [ - "--spectrum-font-size-100", - "--spectrum-line-height-100", - "--spectrum-logical-rotation", - "--spectrum-neutral-subdued-content-color-default" - ], - "system-theme": [], - "passthroughs": ["--mod-textfield-min-width", "--mod-textfield-width"], - "high-contrast": [] + "modifiers": { + "mod-pagination-counter-color": { + "value": "var(--spectrum-gray-700)", + "description": "Used by `--spectrum-pagination-counter-color`.
Defaults to `var(--spectrum-neutral-subdued-content-color-default)`, if not set.", + "control": "color", + "category": "Modifier" + }, + "mod-pagination-counter-font-size": { + "value": "14px", + "description": "Used by `--spectrum-pagination-counter-font-size`.
Defaults to `var(--spectrum-font-size-100)`, if not set.", + "control": "text", + "category": "Modifier" + }, + "mod-pagination-counter-line-height": { + "value": "1.3", + "description": "Used by `--spectrum-pagination-counter-line-height`.
Defaults to `var(--spectrum-line-height-100)`, if not set.", + "control": "text", + "category": "Modifier" + }, + "mod-pagination-page-button-inline-spacing": { + "value": "var(--spectrum-pagination-item-inline-spacing)", + "description": "Used by `--spectrum-pagination-counter-inline-spacing`.
Defaults to `var(--spectrum-pagination-item-inline-spacing)`, if not set.", + "control": "text", + "category": "Modifier" + }, + "mod-pagination-textfield-width": { + "value": "var(--spectrum-pagination-textfield-width)", + "description": "Used by `--mod-textfield-width`, `--mod-textfield-min-width`.
Defaults to `var(--spectrum-pagination-textfield-width)`, if not set.", + "control": "text", + "category": "Modifier" + } + }, + "component": { + "spectrum-pagination-counter-color": { + "description": "Defined in `.spectrum-Pagination`.
Used by `.spectrum-Pagination-counter`.", + "control": "color", + "category": "Component" + }, + "spectrum-pagination-counter-font-size": { + "description": "Defined in `.spectrum-Pagination`.
Used by `.spectrum-Pagination-counter`.", + "control": "text", + "category": "Component" + }, + "spectrum-pagination-counter-line-height": { + "description": "Defined in `.spectrum-Pagination`.
Used by `.spectrum-Pagination-counter`.", + "control": "text", + "category": "Component" + }, + "spectrum-pagination-counter-inline-spacing": { + "description": "Defined in `.spectrum-Pagination`.
Used by `.spectrum-Pagination-counter, .spectrum-Pagination-nextButton`, `.spectrum-Pagination-prevButton`.", + "control": "text", + "category": "Component" + }, + "spectrum-pagination-item-inline-spacing": { + "description": "Used by `--spectrum-pagination-counter-inline-spacing`.", + "control": "text", + "category": "Component" + }, + "spectrum-pagination-textfield-width": { + "description": "Used by `--mod-textfield-width`, `--mod-textfield-min-width`.", + "control": "text", + "category": "Component" + } + }, + "global": { + "spectrum-neutral-subdued-content-color-default": { + "value": "var(--spectrum-gray-700)", + "description": "Used by `--spectrum-pagination-counter-color`.", + "control": "color", + "category": "Global" + }, + "spectrum-font-size-100": { + "value": "14px", + "description": "Used by `--spectrum-pagination-counter-font-size`.", + "control": "text", + "category": "Global" + }, + "spectrum-line-height-100": { + "value": "1.3", + "description": "Used by `--spectrum-pagination-counter-line-height`.", + "control": "text", + "category": "Global" + }, + "spectrum-logical-rotation": { + "description": "Defined in `.spectrum-Pagination:dir(rtl), [dir=\"rtl\"] .spectrum-Pagination`.
Used by `.spectrum-Pagination-nextButton .spectrum-Icon`, `.spectrum-Pagination-prevButton .spectrum-Icon`.", + "control": "text", + "category": "Global" + } + }, + "system-theme": {}, + "passthroughs": { + "mod-textfield-width": { + "category": "Passthrough" + }, + "mod-textfield-min-width": { + "category": "Passthrough" + } + }, + "high-contrast": {} } diff --git a/components/pagination/stories/pagination.stories.js b/components/pagination/stories/pagination.stories.js index 7fa6fa909e1..6b41f929d03 100644 --- a/components/pagination/stories/pagination.stories.js +++ b/components/pagination/stories/pagination.stories.js @@ -1,11 +1,13 @@ import { default as ActionButton } from "@spectrum-css/actionbutton/stories/actionbutton.stories"; import { disableDefaultModes } from "@spectrum-css/preview/modes"; import { size } from "@spectrum-css/preview/types"; -import metadata from "../dist/metadata.json"; -import packageJson from "../package.json"; import { PaginationGroup } from "./pagination.test.js"; import { Template } from "./template.js"; +// Local assets to render the component styles and structure +import metadata from "../dist/metadata.json"; +import packageJson from "../package.json"; + /** * The pagination component displays numbered buttons or an input field to allow for navigation. */ @@ -70,6 +72,7 @@ export default { }, packageJson, metadata, + cssprops: metadata.modifiers, }, }; diff --git a/components/picker/dist/metadata.json b/components/picker/dist/metadata.json index e2c3b4e5c0a..df11d23c4bf 100644 --- a/components/picker/dist/metadata.json +++ b/components/picker/dist/metadata.json @@ -2,23 +2,23 @@ "sourceFile": "index.css", "selectors": [ ".spectrum-Picker", - ".spectrum-Picker + .spectrum-Popover--bottom.is-open", ".spectrum-Picker .spectrum-Picker-icon", ".spectrum-Picker .spectrum-Picker-label", ".spectrum-Picker .spectrum-ProgressCircle", + ".spectrum-Picker + .spectrum-Popover--bottom.is-open", ".spectrum-Picker--quiet", ".spectrum-Picker--quiet .spectrum-Picker-menuIcon", - ".spectrum-Picker--quiet.is-keyboardFocused", - ".spectrum-Picker--quiet.is-keyboardFocused:after", - ".spectrum-Picker--quiet.is-open", - ".spectrum-Picker--quiet.spectrum-Picker--sideLabel", - ".spectrum-Picker--quiet.spectrum-Picker.is-disabled", - ".spectrum-Picker--quiet.spectrum-Picker:disabled", ".spectrum-Picker--quiet:active", ".spectrum-Picker--quiet:after", ".spectrum-Picker--quiet:focus-visible", ".spectrum-Picker--quiet:focus-visible:after", ".spectrum-Picker--quiet:hover", + ".spectrum-Picker--quiet.is-keyboardFocused", + ".spectrum-Picker--quiet.is-keyboardFocused:after", + ".spectrum-Picker--quiet.is-open", + ".spectrum-Picker--quiet.spectrum-Picker--sideLabel", + ".spectrum-Picker--quiet.spectrum-Picker:disabled", + ".spectrum-Picker--quiet.spectrum-Picker.is-disabled", ".spectrum-Picker--sideLabel", ".spectrum-Picker--sizeL", ".spectrum-Picker--sizeL + .spectrum-Popover--bottom.is-open", @@ -34,20 +34,36 @@ ".spectrum-Picker-menuIcon", ".spectrum-Picker-menuIcon:active", ".spectrum-Picker-validationIcon", + ".spectrum-Picker::-moz-focus-inner", + ".spectrum-Picker:active", + ".spectrum-Picker:active:after", + ".spectrum-Picker:after", + ".spectrum-Picker:disabled", + ".spectrum-Picker:disabled .spectrum-Picker-icon", + ".spectrum-Picker:disabled .spectrum-Picker-label.is-placeholder", + ".spectrum-Picker:disabled .spectrum-Picker-menuIcon", + ".spectrum-Picker:disabled .spectrum-Picker-validationIcon", + ".spectrum-Picker:focus", + ".spectrum-Picker:focus-visible", + ".spectrum-Picker:focus-visible .spectrum-Picker-label.is-placeholder", + ".spectrum-Picker:focus-visible .spectrum-Picker-menuIcon", + ".spectrum-Picker:focus-visible:after", + ".spectrum-Picker:hover", + ".spectrum-Picker:hover .spectrum-Picker-menuIcon", ".spectrum-Picker.is-disabled", ".spectrum-Picker.is-disabled .spectrum-Picker-icon", ".spectrum-Picker.is-disabled .spectrum-Picker-label.is-placeholder", ".spectrum-Picker.is-disabled .spectrum-Picker-menuIcon", ".spectrum-Picker.is-disabled .spectrum-Picker-validationIcon", ".spectrum-Picker.is-invalid .spectrum-Picker-label", - ".spectrum-Picker.is-invalid.is-keyboardFocused:not(:disabled, .is-disabled)", - ".spectrum-Picker.is-invalid.is-open:not(:disabled, .is-disabled)", - ".spectrum-Picker.is-invalid.is-open:not(:disabled, .is-disabled):hover", ".spectrum-Picker.is-invalid:not(:disabled, .is-disabled)", ".spectrum-Picker.is-invalid:not(:disabled, .is-disabled) .spectrum-Picker-validationIcon", ".spectrum-Picker.is-invalid:not(:disabled, .is-disabled):active", ".spectrum-Picker.is-invalid:not(:disabled, .is-disabled):focus-visible", ".spectrum-Picker.is-invalid:not(:disabled, .is-disabled):hover", + ".spectrum-Picker.is-invalid.is-keyboardFocused:not(:disabled, .is-disabled)", + ".spectrum-Picker.is-invalid.is-open:not(:disabled, .is-disabled)", + ".spectrum-Picker.is-invalid.is-open:not(:disabled, .is-disabled):hover", ".spectrum-Picker.is-keyboardFocused", ".spectrum-Picker.is-keyboardFocused .spectrum-Picker-label.is-placeholder", ".spectrum-Picker.is-keyboardFocused .spectrum-Picker-menuIcon", @@ -58,280 +74,1387 @@ ".spectrum-Picker.is-open:not(.spectrum-Picker--quiet, :disabled, .is-disabled) .spectrum-Picker-menuIcon", ".spectrum-Picker.is-open:not(.spectrum-Picker--quiet, :disabled, .is-disabled):hover", ".spectrum-Picker.is-open:not(.spectrum-Picker--quiet, :disabled, .is-disabled):hover .spectrum-Picker-menuIcon", - ".spectrum-Picker.is-placeholder:active .spectrum-Picker-label", - ".spectrum-Picker::-moz-focus-inner", - ".spectrum-Picker:active", - ".spectrum-Picker:active:after", - ".spectrum-Picker:after", - ".spectrum-Picker:disabled", - ".spectrum-Picker:disabled .spectrum-Picker-icon", - ".spectrum-Picker:disabled .spectrum-Picker-label.is-placeholder", - ".spectrum-Picker:disabled .spectrum-Picker-menuIcon", - ".spectrum-Picker:disabled .spectrum-Picker-validationIcon", - ".spectrum-Picker:focus", - ".spectrum-Picker:focus-visible", - ".spectrum-Picker:focus-visible .spectrum-Picker-label.is-placeholder", - ".spectrum-Picker:focus-visible .spectrum-Picker-menuIcon", - ".spectrum-Picker:focus-visible:after", - ".spectrum-Picker:hover", - ".spectrum-Picker:hover .spectrum-Picker-menuIcon" - ], - "modifiers": [ - "--mod-animation-duration-100", - "--mod-line-height-100", - "--mod-picker-animation-duration", - "--mod-picker-background-color-active", - "--mod-picker-background-color-default", - "--mod-picker-background-color-default-open", - "--mod-picker-background-color-disabled", - "--mod-picker-background-color-hover", - "--mod-picker-background-color-hover-open", - "--mod-picker-background-color-key-focus", - "--mod-picker-block-size", - "--mod-picker-border-active", - "--mod-picker-border-color-default", - "--mod-picker-border-color-error-active", - "--mod-picker-border-color-error-default", - "--mod-picker-border-color-error-default-open", - "--mod-picker-border-color-error-hover", - "--mod-picker-border-color-error-hover-open", - "--mod-picker-border-color-error-key-focus", - "--mod-picker-border-color-hover", - "--mod-picker-border-color-hover-open", - "--mod-picker-border-color-key-focus", - "--mod-picker-border-default-open", - "--mod-picker-border-radius", - "--mod-picker-border-width", - "--mod-picker-focus-indicator-color", - "--mod-picker-focus-indicator-gap", - "--mod-picker-focus-indicator-thickness", - "--mod-picker-font-color-active", - "--mod-picker-font-color-default", - "--mod-picker-font-color-default-open", - "--mod-picker-font-color-disabled", - "--mod-picker-font-color-hover", - "--mod-picker-font-color-hover-open", - "--mod-picker-font-color-key-focus", - "--mod-picker-font-size", - "--mod-picker-font-weight", - "--mod-picker-icon-color-active", - "--mod-picker-icon-color-default", - "--mod-picker-icon-color-default-open", - "--mod-picker-icon-color-disabled", - "--mod-picker-icon-color-error", - "--mod-picker-icon-color-hover", - "--mod-picker-icon-color-hover-open", - "--mod-picker-icon-color-key-focus", - "--mod-picker-inline-size", - "--mod-picker-line-height", - "--mod-picker-placeholder-font-style", - "--mod-picker-placeholder-font-weight", - "--mod-picker-spacing-bottom-to-text", - "--mod-picker-spacing-edge-to-disclosure-icon", - "--mod-picker-spacing-edge-to-disclosure-icon-quiet", - "--mod-picker-spacing-edge-to-text", - "--mod-picker-spacing-edge-to-text-quiet", - "--mod-picker-spacing-icon-to-disclosure-icon", - "--mod-picker-spacing-label-to-picker", - "--mod-picker-spacing-label-to-picker-quiet", - "--mod-picker-spacing-picker-to-popover", - "--mod-picker-spacing-text-to-alert-icon-inline-start", - "--mod-picker-spacing-text-to-icon", - "--mod-picker-spacing-text-to-icon-inline-end", - "--mod-picker-spacing-top-to-alert-icon", - "--mod-picker-spacing-top-to-disclosure-icon", - "--mod-picker-spacing-top-to-progress-circle", - "--mod-picker-spacing-top-to-text", - "--mod-sans-font-family-stack" - ], - "component": [ - "--spectrum-picker-animation-duration", - "--spectrum-picker-background-color-active", - "--spectrum-picker-background-color-default", - "--spectrum-picker-background-color-default-open", - "--spectrum-picker-background-color-disabled", - "--spectrum-picker-background-color-hover", - "--spectrum-picker-background-color-hover-open", - "--spectrum-picker-background-color-key-focus", - "--spectrum-picker-block-size", - "--spectrum-picker-border-color-active", - "--spectrum-picker-border-color-default", - "--spectrum-picker-border-color-default-open", - "--spectrum-picker-border-color-disabled", - "--spectrum-picker-border-color-error-active", - "--spectrum-picker-border-color-error-default", - "--spectrum-picker-border-color-error-default-open", - "--spectrum-picker-border-color-error-hover", - "--spectrum-picker-border-color-error-hover-open", - "--spectrum-picker-border-color-error-key-focus", - "--spectrum-picker-border-color-hover", - "--spectrum-picker-border-color-hover-open", - "--spectrum-picker-border-color-key-focus", - "--spectrum-picker-border-radius", - "--spectrum-picker-border-width", - "--spectrum-picker-end-edge-to-disclousure-icon-quiet", - "--spectrum-picker-focus-indicator-color", - "--spectrum-picker-focus-indicator-gap", - "--spectrum-picker-focus-indicator-thickness", - "--spectrum-picker-font-color-active", - "--spectrum-picker-font-color-default", - "--spectrum-picker-font-color-default-open", - "--spectrum-picker-font-color-disabled", - "--spectrum-picker-font-color-hover", - "--spectrum-picker-font-color-hover-open", - "--spectrum-picker-font-color-key-focus", - "--spectrum-picker-font-size", - "--spectrum-picker-font-weight", - "--spectrum-picker-icon-color-active", - "--spectrum-picker-icon-color-default", - "--spectrum-picker-icon-color-default-open", - "--spectrum-picker-icon-color-disabled", - "--spectrum-picker-icon-color-error", - "--spectrum-picker-icon-color-hover", - "--spectrum-picker-icon-color-hover-open", - "--spectrum-picker-icon-color-key-focus", - "--spectrum-picker-inline-size", - "--spectrum-picker-line-height", - "--spectrum-picker-minimum-width-multiplier", - "--spectrum-picker-placeholder-font-style", - "--spectrum-picker-spacing-bottom-to-text", - "--spectrum-picker-spacing-edge-to-disclosure-icon", - "--spectrum-picker-spacing-edge-to-disclosure-icon-quiet", - "--spectrum-picker-spacing-edge-to-text", - "--spectrum-picker-spacing-edge-to-text-quiet", - "--spectrum-picker-spacing-icon-to-disclosure-icon", - "--spectrum-picker-spacing-label-to-picker", - "--spectrum-picker-spacing-label-to-picker-quiet", - "--spectrum-picker-spacing-picker-to-popover", - "--spectrum-picker-spacing-text-to-icon", - "--spectrum-picker-spacing-text-to-icon-inline-end", - "--spectrum-picker-spacing-top-to-alert-icon", - "--spectrum-picker-spacing-top-to-disclosure-icon", - "--spectrum-picker-spacing-top-to-progress-circle", - "--spectrum-picker-spacing-top-to-text", - "--spectrum-picker-visual-to-disclosure-icon-extra-large", - "--spectrum-picker-visual-to-disclosure-icon-large", - "--spectrum-picker-visual-to-disclosure-icon-medium", - "--spectrum-picker-visual-to-disclosure-icon-small" - ], - "global": [ - "--spectrum-animation-duration-100", - "--spectrum-border-width-100", - "--spectrum-component-bottom-to-text-100", - "--spectrum-component-bottom-to-text-200", - "--spectrum-component-bottom-to-text-300", - "--spectrum-component-bottom-to-text-75", - "--spectrum-component-edge-to-text-100", - "--spectrum-component-edge-to-text-200", - "--spectrum-component-edge-to-text-300", - "--spectrum-component-edge-to-text-75", - "--spectrum-component-height-100", - "--spectrum-component-height-200", - "--spectrum-component-height-300", - "--spectrum-component-height-75", - "--spectrum-component-to-menu-extra-large", - "--spectrum-component-to-menu-large", - "--spectrum-component-to-menu-medium", - "--spectrum-component-to-menu-small", - "--spectrum-component-top-to-text-100", - "--spectrum-component-top-to-text-200", - "--spectrum-component-top-to-text-300", - "--spectrum-component-top-to-text-75", - "--spectrum-corner-radius-100", - "--spectrum-default-font-style", - "--spectrum-disabled-background-color", - "--spectrum-disabled-content-color", - "--spectrum-field-edge-to-text-quiet", - "--spectrum-field-end-edge-to-disclosure-icon-100", - "--spectrum-field-end-edge-to-disclosure-icon-200", - "--spectrum-field-end-edge-to-disclosure-icon-300", - "--spectrum-field-end-edge-to-disclosure-icon-75", - "--spectrum-field-label-to-component", - "--spectrum-field-label-to-component-quiet-extra-large", - "--spectrum-field-label-to-component-quiet-large", - "--spectrum-field-label-to-component-quiet-medium", - "--spectrum-field-label-to-component-quiet-small", - "--spectrum-field-text-to-alert-icon-extra-large", - "--spectrum-field-text-to-alert-icon-large", - "--spectrum-field-text-to-alert-icon-medium", - "--spectrum-field-text-to-alert-icon-small", - "--spectrum-field-top-to-alert-icon-extra-large", - "--spectrum-field-top-to-alert-icon-large", - "--spectrum-field-top-to-alert-icon-medium", - "--spectrum-field-top-to-alert-icon-small", - "--spectrum-field-top-to-disclosure-icon-100", - "--spectrum-field-top-to-disclosure-icon-200", - "--spectrum-field-top-to-disclosure-icon-300", - "--spectrum-field-top-to-disclosure-icon-75", - "--spectrum-field-top-to-progress-circle-extra-large", - "--spectrum-field-top-to-progress-circle-large", - "--spectrum-field-top-to-progress-circle-medium", - "--spectrum-field-top-to-progress-circle-small", - "--spectrum-field-width", - "--spectrum-focus-indicator-color", - "--spectrum-focus-indicator-gap", - "--spectrum-focus-indicator-thickness", - "--spectrum-font-size-100", - "--spectrum-font-size-200", - "--spectrum-font-size-300", - "--spectrum-font-size-75", - "--spectrum-gray-100", - "--spectrum-gray-200", - "--spectrum-gray-300", - "--spectrum-gray-500", - "--spectrum-gray-600", - "--spectrum-gray-700", - "--spectrum-gray-800", - "--spectrum-gray-900", - "--spectrum-line-height-100", - "--spectrum-negative-border-color-default", - "--spectrum-negative-border-color-down", - "--spectrum-negative-border-color-focus", - "--spectrum-negative-border-color-focus-hover", - "--spectrum-negative-border-color-hover", - "--spectrum-negative-border-color-key-focus", - "--spectrum-negative-visual-color", - "--spectrum-neutral-content-color-default", - "--spectrum-neutral-content-color-down", - "--spectrum-neutral-content-color-focus", - "--spectrum-neutral-content-color-focus-hover", - "--spectrum-neutral-content-color-hover", - "--spectrum-neutral-content-color-key-focus", - "--spectrum-regular-font-weight", - "--spectrum-sans-font-family-stack", - "--spectrum-text-to-visual-100", - "--spectrum-text-to-visual-200", - "--spectrum-text-to-visual-300", - "--spectrum-text-to-visual-75" - ], - "system-theme": [ - "--system-picker-background-color-active", - "--system-picker-background-color-default", - "--system-picker-background-color-default-open", - "--system-picker-background-color-hover", - "--system-picker-background-color-hover-open", - "--system-picker-background-color-key-focus", - "--system-picker-border-color-active", - "--system-picker-border-color-default", - "--system-picker-border-color-default-open", - "--system-picker-border-color-disabled", - "--system-picker-border-color-hover", - "--system-picker-border-color-hover-open", - "--system-picker-border-color-key-focus", - "--system-picker-border-width" - ], - "passthroughs": [ - "--mod-button-animation-duration", - "--mod-button-font-family", - "--mod-button-line-height" + ".spectrum-Picker.is-placeholder:active .spectrum-Picker-label" ], - "high-contrast": [ - "--highcontrast-picker-background-color", - "--highcontrast-picker-border-color-default", - "--highcontrast-picker-border-color-disabled", - "--highcontrast-picker-border-color-hover", - "--highcontrast-picker-content-color-default", - "--highcontrast-picker-content-color-disabled", - "--highcontrast-picker-focus-indicator-color" - ] + "modifiers": { + "mod-sans-font-family-stack": { + "value": "var(--spectrum-sans-font-family-stack)", + "description": "Used by `.spectrum-Picker`.
Defaults to `var(--spectrum-sans-font-family-stack)`, if not set.", + "control": "text", + "category": "Modifier" + }, + "mod-line-height-100": { + "value": "1.3", + "description": "Used by `.spectrum-Picker`.
Defaults to `var(--spectrum-line-height-100)`, if not set.", + "control": "text", + "category": "Modifier" + }, + "mod-animation-duration-100": { + "value": "var(--spectrum-animation-duration-100)", + "description": "Used by `.spectrum-Picker`.
Defaults to `var(--spectrum-animation-duration-100)`, if not set.", + "control": "text", + "category": "Modifier" + }, + "mod-picker-block-size": { + "value": "var(--spectrum-picker-block-size)", + "description": "Used by `.spectrum-Picker`.
Defaults to `var(--spectrum-picker-block-size)`, if not set.", + "control": "text", + "category": "Modifier" + }, + "mod-picker-inline-size": { + "value": "var(--spectrum-picker-inline-size)", + "description": "Used by `.spectrum-Picker`.
Defaults to `var(--spectrum-picker-inline-size)`, if not set.", + "control": "text", + "category": "Modifier" + }, + "mod-picker-spacing-label-to-picker": { + "value": "var(--spectrum-picker-spacing-label-to-picker)", + "description": "Used by `.spectrum-Picker`.
Defaults to `var(--spectrum-picker-spacing-label-to-picker)`, if not set.", + "control": "text", + "category": "Modifier" + }, + "mod-picker-spacing-edge-to-text": { + "value": "var(--spectrum-picker-spacing-edge-to-text)", + "description": "Used by `.spectrum-Picker`.
Defaults to `var(--spectrum-picker-spacing-edge-to-text)`, if not set.", + "control": "text", + "category": "Modifier" + }, + "mod-picker-spacing-edge-to-disclosure-icon": { + "value": "var(--spectrum-picker-spacing-edge-to-disclosure-icon)", + "description": "Used by `.spectrum-Picker`.
Defaults to `var(--spectrum-picker-spacing-edge-to-disclosure-icon)`, if not set.", + "control": "text", + "category": "Modifier" + }, + "mod-picker-border-width": { + "value": "1px", + "description": "Used by `.spectrum-Picker`, `.spectrum-Picker:after`, `.spectrum-Picker-label`, `.spectrum-Picker-validationIcon`, `.spectrum-Picker .spectrum-ProgressCircle`, `.spectrum-Picker--quiet.is-keyboardFocused:after, .spectrum-Picker--quiet:focus-visible:after`.
Defaults to `var(--spectrum-picker-border-width)`, if not set.", + "control": "text", + "category": "Modifier" + }, + "mod-picker-border-radius": { + "value": "var(--spectrum-picker-border-radius)", + "description": "Used by `.spectrum-Picker`, `.spectrum-Picker:after`.
Defaults to `var(--spectrum-picker-border-radius)`, if not set.", + "control": "text", + "category": "Modifier" + }, + "mod-picker-animation-duration": { + "value": "var(--spectrum-picker-animation-duration)", + "description": "Used by `.spectrum-Picker`, `.spectrum-Picker-label.is-placeholder`, `.spectrum-Picker-menuIcon`.
Defaults to `var(--spectrum-picker-animation-duration)`, if not set.", + "control": "text", + "category": "Modifier" + }, + "mod-picker-font-color-default": { + "value": "var(--spectrum-picker-font-color-default)", + "description": "Used by `.spectrum-Picker`, `.spectrum-Picker-label.is-placeholder`, `.spectrum-Picker--quiet`.
Defaults to `var(--spectrum-picker-font-color-default)`, if not set.", + "control": "color", + "category": "Modifier" + }, + "mod-picker-background-color-default": { + "value": "var(--spectrum-picker-background-color-default)", + "description": "Used by `.spectrum-Picker`.
Defaults to `var(--spectrum-picker-background-color-default)`, if not set.", + "control": "color", + "category": "Modifier" + }, + "mod-picker-border-color-default": { + "value": "var(--spectrum-picker-border-color-default)", + "description": "Used by `.spectrum-Picker`.
Defaults to `var(--spectrum-picker-border-color-default)`, if not set.", + "control": "color", + "category": "Modifier" + }, + "mod-picker-focus-indicator-gap": { + "value": "var(--spectrum-picker-focus-indicator-gap)", + "description": "Used by `.spectrum-Picker:after`, `.spectrum-Picker--quiet.is-keyboardFocused:after, .spectrum-Picker--quiet:focus-visible:after`.
Defaults to `var(--spectrum-picker-focus-indicator-gap)`, if not set.", + "control": "text", + "category": "Modifier" + }, + "mod-picker-focus-indicator-thickness": { + "value": "var(--spectrum-picker-focus-indicator-thickness)", + "description": "Used by `.spectrum-Picker:after`, `.spectrum-Picker--quiet.is-keyboardFocused:after, .spectrum-Picker--quiet:focus-visible:after`.
Defaults to `var(--spectrum-picker-focus-indicator-thickness)`, if not set.", + "control": "text", + "category": "Modifier" + }, + "mod-picker-background-color-active": { + "value": "var(--spectrum-picker-background-color-active)", + "description": "Used by `.spectrum-Picker:active`.
Defaults to `var(--spectrum-picker-background-color-active)`, if not set.", + "control": "color", + "category": "Modifier" + }, + "mod-picker-border-active": { + "value": "var(--spectrum-picker-border-color-active)", + "description": "Used by `.spectrum-Picker:active`.
Defaults to `var(--spectrum-picker-border-color-active)`, if not set.", + "control": "text", + "category": "Modifier" + }, + "mod-picker-font-color-active": { + "value": "var(--spectrum-picker-font-color-active)", + "description": "Used by `.spectrum-Picker.is-placeholder:active .spectrum-Picker-label`, `.spectrum-Picker-label.is-placeholder:active`.
Defaults to `var(--spectrum-picker-font-color-active)`, if not set.", + "control": "color", + "category": "Modifier" + }, + "mod-picker-background-color-key-focus": { + "value": "var(--spectrum-picker-background-color-key-focus)", + "description": "Used by `.spectrum-Picker.is-keyboardFocused, .spectrum-Picker:focus-visible`.
Defaults to `var(--spectrum-picker-background-color-key-focus)`, if not set.", + "control": "color", + "category": "Modifier" + }, + "mod-picker-border-color-key-focus": { + "value": "var(--spectrum-picker-border-color-key-focus)", + "description": "Used by `.spectrum-Picker.is-keyboardFocused, .spectrum-Picker:focus-visible`.
Defaults to `var(--spectrum-picker-border-color-key-focus)`, if not set.", + "control": "color", + "category": "Modifier" + }, + "mod-picker-font-color-key-focus": { + "value": "var(--spectrum-picker-font-color-key-focus)", + "description": "Used by `.spectrum-Picker.is-keyboardFocused, .spectrum-Picker:focus-visible`, `.spectrum-Picker.is-keyboardFocused .spectrum-Picker-label.is-placeholder, .spectrum-Picker:focus-visible .spectrum-Picker-label.is-placeholder`.
Defaults to `var(--spectrum-picker-font-color-key-focus)`, if not set.", + "control": "color", + "category": "Modifier" + }, + "mod-picker-focus-indicator-color": { + "value": "var(--spectrum-picker-focus-indicator-color)", + "description": "Used by `.spectrum-Picker.is-keyboardFocused:after, .spectrum-Picker:focus-visible:after`, `.spectrum-Picker--quiet.is-keyboardFocused:after, .spectrum-Picker--quiet:focus-visible:after`.
Defaults to `var(--spectrum-picker-focus-indicator-color)`, if not set.", + "control": "color", + "category": "Modifier" + }, + "mod-picker-icon-color-key-focus": { + "value": "var(--spectrum-picker-icon-color-key-focus)", + "description": "Used by `.spectrum-Picker.is-keyboardFocused .spectrum-Picker-menuIcon, .spectrum-Picker:focus-visible .spectrum-Picker-menuIcon`.
Defaults to `var(--spectrum-picker-icon-color-key-focus)`, if not set.", + "control": "color", + "category": "Modifier" + }, + "mod-picker-font-color-default-open": { + "value": "var(--spectrum-picker-font-color-default-open)", + "description": "Used by `.spectrum-Picker.is-open:not(.spectrum-Picker--quiet, :disabled, .is-disabled)`.
Defaults to `var(--spectrum-picker-font-color-default-open)`, if not set.", + "control": "color", + "category": "Modifier" + }, + "mod-picker-background-color-default-open": { + "value": "var(--spectrum-picker-background-color-default-open)", + "description": "Used by `.spectrum-Picker.is-open:not(.spectrum-Picker--quiet, :disabled, .is-disabled)`.
Defaults to `var(--spectrum-picker-background-color-default-open)`, if not set.", + "control": "color", + "category": "Modifier" + }, + "mod-picker-border-default-open": { + "value": "var(--spectrum-picker-border-color-default-open)", + "description": "Used by `.spectrum-Picker.is-open:not(.spectrum-Picker--quiet, :disabled, .is-disabled)`.
Defaults to `var(--spectrum-picker-border-color-default-open)`, if not set.", + "control": "text", + "category": "Modifier" + }, + "mod-picker-icon-color-default-open": { + "value": "var(--spectrum-picker-icon-color-default-open)", + "description": "Used by `.spectrum-Picker.is-open:not(.spectrum-Picker--quiet, :disabled, .is-disabled) .spectrum-Picker-menuIcon`.
Defaults to `var(--spectrum-picker-icon-color-default-open)`, if not set.", + "control": "color", + "category": "Modifier" + }, + "mod-picker-border-color-error-default": { + "value": "var(--spectrum-picker-border-color-error-default)", + "description": "Used by `.spectrum-Picker.is-invalid:not(:disabled, .is-disabled)`.
Defaults to `var(--spectrum-picker-border-color-error-default)`, if not set.", + "control": "color", + "category": "Modifier" + }, + "mod-picker-icon-color-error": { + "value": "var(--spectrum-picker-icon-color-error)", + "description": "Used by `.spectrum-Picker.is-invalid:not(:disabled, .is-disabled) .spectrum-Picker-validationIcon`.
Defaults to `var(--spectrum-picker-icon-color-error)`, if not set.", + "control": "color", + "category": "Modifier" + }, + "mod-picker-border-color-error-active": { + "value": "var(--spectrum-picker-border-color-error-active)", + "description": "Used by `.spectrum-Picker.is-invalid:not(:disabled, .is-disabled):active`.
Defaults to `var(--spectrum-picker-border-color-error-active)`, if not set.", + "control": "color", + "category": "Modifier" + }, + "mod-picker-border-color-error-default-open": { + "value": "var(--spectrum-picker-border-color-error-default-open)", + "description": "Used by `.spectrum-Picker.is-invalid.is-open:not(:disabled, .is-disabled)`.
Defaults to `var(--spectrum-picker-border-color-error-default-open)`, if not set.", + "control": "color", + "category": "Modifier" + }, + "mod-picker-border-color-error-key-focus": { + "value": "var(--spectrum-picker-border-color-error-key-focus)", + "description": "Used by `.spectrum-Picker.is-invalid.is-keyboardFocused:not(:disabled, .is-disabled), .spectrum-Picker.is-invalid:not(:disabled, .is-disabled):focus-visible`.
Defaults to `var(--spectrum-picker-border-color-error-key-focus)`, if not set.", + "control": "color", + "category": "Modifier" + }, + "mod-picker-icon-color-disabled": { + "value": "var(--spectrum-picker-icon-color-disabled)", + "description": "Used by `.spectrum-Picker.is-loading .spectrum-Picker-menuIcon`, `.spectrum-Picker.is-disabled .spectrum-Picker-icon, .spectrum-Picker.is-disabled .spectrum-Picker-menuIcon, .spectrum-Picker.is-disabled .spectrum-Picker-validationIcon, .spectrum-Picker:disabled .spectrum-Picker-icon, .spectrum-Picker:disabled .spectrum-Picker-menuIcon, .spectrum-Picker:disabled .spectrum-Picker-validationIcon`.
Defaults to `var(--spectrum-picker-icon-color-disabled)`, if not set.", + "control": "color", + "category": "Modifier" + }, + "mod-picker-spacing-text-to-icon-inline-end": { + "value": "var(--mod-picker-spacing-text-to-alert-icon-inline-start, var(--spectrum-picker-spacing-text-to-icon-inline-end))", + "description": "Used by `.spectrum-Picker.is-invalid .spectrum-Picker-label, .spectrum-Picker.is-loading .spectrum-Picker-label`.
Defaults to `var(--mod-picker-spacing-text-to-alert-icon-inline-start, var(--spectrum-picker-spacing-text-to-icon-inline-end))`, if not set.", + "control": "text", + "category": "Modifier" + }, + "mod-picker-spacing-text-to-alert-icon-inline-start": { + "value": "var(--spectrum-picker-spacing-text-to-icon-inline-end)", + "description": "Used by `.spectrum-Picker.is-invalid .spectrum-Picker-label, .spectrum-Picker.is-loading .spectrum-Picker-label`.
Defaults to `var(--spectrum-picker-spacing-text-to-icon-inline-end)`, if not set.", + "control": "text", + "category": "Modifier" + }, + "mod-picker-spacing-text-to-icon": { + "value": "var(--spectrum-picker-spacing-text-to-icon)", + "description": "Used by `.spectrum-Picker .spectrum-Picker-icon`, `.spectrum-Picker-label ~ .spectrum-Picker-menuIcon`.
Defaults to `var(--spectrum-picker-spacing-text-to-icon)`, if not set.", + "control": "text", + "category": "Modifier" + }, + "mod-picker-font-size": { + "value": "var(--spectrum-picker-font-size)", + "description": "Used by `.spectrum-Picker-label`.
Defaults to `var(--spectrum-picker-font-size)`, if not set.", + "control": "text", + "category": "Modifier" + }, + "mod-picker-line-height": { + "value": "var(--spectrum-picker-line-height)", + "description": "Used by `.spectrum-Picker-label`.
Defaults to `var(--spectrum-picker-line-height)`, if not set.", + "control": "text", + "category": "Modifier" + }, + "mod-picker-font-weight": { + "value": "var(--spectrum-picker-font-weight)", + "description": "Used by `.spectrum-Picker-label`.
Defaults to `var(--spectrum-picker-font-weight)`, if not set.", + "control": "text", + "category": "Modifier" + }, + "mod-picker-spacing-top-to-text": { + "value": "var(--spectrum-picker-spacing-top-to-text)", + "description": "Used by `.spectrum-Picker-label`.
Defaults to `var(--spectrum-picker-spacing-top-to-text)`, if not set.", + "control": "text", + "category": "Modifier" + }, + "mod-picker-spacing-bottom-to-text": { + "value": "var(--spectrum-picker-spacing-bottom-to-text)", + "description": "Used by `.spectrum-Picker-label`.
Defaults to `var(--spectrum-picker-spacing-bottom-to-text)`, if not set.", + "control": "text", + "category": "Modifier" + }, + "mod-picker-placeholder-font-weight": { + "value": "var(--spectrum-picker-font-weight)", + "description": "Used by `.spectrum-Picker-label.is-placeholder`.
Defaults to `var(--spectrum-picker-font-weight)`, if not set.", + "control": "text", + "category": "Modifier" + }, + "mod-picker-placeholder-font-style": { + "value": "var(--spectrum-picker-placeholder-font-style)", + "description": "Used by `.spectrum-Picker-label.is-placeholder`.
Defaults to `var(--spectrum-picker-placeholder-font-style)`, if not set.", + "control": "text", + "category": "Modifier" + }, + "mod-picker-spacing-icon-to-disclosure-icon": { + "value": "var(--spectrum-picker-spacing-icon-to-disclosure-icon)", + "description": "Used by `.spectrum-Picker-menuIcon`.
Defaults to `var(--spectrum-picker-spacing-icon-to-disclosure-icon)`, if not set.", + "control": "text", + "category": "Modifier" + }, + "mod-picker-spacing-top-to-disclosure-icon": { + "value": "var(--spectrum-picker-spacing-top-to-disclosure-icon)", + "description": "Used by `.spectrum-Picker-menuIcon`.
Defaults to `var(--spectrum-picker-spacing-top-to-disclosure-icon)`, if not set.", + "control": "text", + "category": "Modifier" + }, + "mod-picker-icon-color-default": { + "value": "var(--spectrum-picker-icon-color-default)", + "description": "Used by `.spectrum-Picker-menuIcon`.
Defaults to `var(--spectrum-picker-icon-color-default)`, if not set.", + "control": "color", + "category": "Modifier" + }, + "mod-picker-icon-color-active": { + "value": "var(--spectrum-picker-icon-color-active)", + "description": "Used by `.spectrum-Picker-menuIcon:active`.
Defaults to `var(--spectrum-picker-icon-color-active)`, if not set.", + "control": "color", + "category": "Modifier" + }, + "mod-picker-spacing-top-to-alert-icon": { + "value": "var(--spectrum-picker-spacing-top-to-alert-icon)", + "description": "Used by `.spectrum-Picker-validationIcon`.
Defaults to `var(--spectrum-picker-spacing-top-to-alert-icon)`, if not set.", + "control": "text", + "category": "Modifier" + }, + "mod-picker-spacing-top-to-progress-circle": { + "value": "var(--spectrum-picker-spacing-top-to-progress-circle)", + "description": "Used by `.spectrum-Picker .spectrum-ProgressCircle`.
Defaults to `var(--spectrum-picker-spacing-top-to-progress-circle)`, if not set.", + "control": "text", + "category": "Modifier" + }, + "mod-picker-spacing-picker-to-popover": { + "value": "var(--spectrum-picker-spacing-picker-to-popover)", + "description": "Used by `.spectrum-Picker + .spectrum-Popover--bottom.is-open`.
Defaults to `var(--spectrum-picker-spacing-picker-to-popover)`, if not set.", + "control": "text", + "category": "Modifier" + }, + "mod-picker-spacing-edge-to-text-quiet": { + "value": "var(--spectrum-picker-spacing-edge-to-text-quiet)", + "description": "Used by `.spectrum-Picker--quiet`.
Defaults to `var(--spectrum-picker-spacing-edge-to-text-quiet)`, if not set.", + "control": "text", + "category": "Modifier" + }, + "mod-picker-spacing-label-to-picker-quiet": { + "value": "var(--spectrum-picker-spacing-label-to-picker-quiet)", + "description": "Used by `.spectrum-Picker--quiet`.
Defaults to `var(--spectrum-picker-spacing-label-to-picker-quiet)`, if not set.", + "control": "text", + "category": "Modifier" + }, + "mod-picker-spacing-edge-to-disclosure-icon-quiet": { + "value": "var(--spectrum-picker-spacing-edge-to-disclosure-icon-quiet)", + "description": "Used by `.spectrum-Picker--quiet .spectrum-Picker-menuIcon`.
Defaults to `var(--spectrum-picker-spacing-edge-to-disclosure-icon-quiet)`, if not set.", + "control": "text", + "category": "Modifier" + }, + "mod-picker-font-color-hover": { + "value": "var(--spectrum-picker-font-color-hover)", + "description": "Used by `.spectrum-Picker:hover`, `.spectrum-Picker-label.is-placeholder:hover`.
Defaults to `var(--spectrum-picker-font-color-hover)`, if not set.", + "control": "color", + "category": "Modifier" + }, + "mod-picker-background-color-hover": { + "value": "var(--spectrum-picker-background-color-hover)", + "description": "Used by `.spectrum-Picker:hover`.
Defaults to `var(--spectrum-picker-background-color-hover)`, if not set.", + "control": "color", + "category": "Modifier" + }, + "mod-picker-border-color-hover": { + "value": "var(--spectrum-picker-border-color-hover)", + "description": "Used by `.spectrum-Picker:hover`.
Defaults to `var(--spectrum-picker-border-color-hover)`, if not set.", + "control": "color", + "category": "Modifier" + }, + "mod-picker-icon-color-hover": { + "value": "var(--spectrum-picker-icon-color-hover)", + "description": "Used by `.spectrum-Picker:hover .spectrum-Picker-menuIcon`.
Defaults to `var(--spectrum-picker-icon-color-hover)`, if not set.", + "control": "color", + "category": "Modifier" + }, + "mod-picker-font-color-hover-open": { + "value": "var(--spectrum-picker-font-color-hover-open)", + "description": "Used by `.spectrum-Picker.is-open:not(.spectrum-Picker--quiet, :disabled, .is-disabled):hover`.
Defaults to `var(--spectrum-picker-font-color-hover-open)`, if not set.", + "control": "color", + "category": "Modifier" + }, + "mod-picker-background-color-hover-open": { + "value": "var(--spectrum-picker-background-color-hover-open)", + "description": "Used by `.spectrum-Picker.is-open:not(.spectrum-Picker--quiet, :disabled, .is-disabled):hover`.
Defaults to `var(--spectrum-picker-background-color-hover-open)`, if not set.", + "control": "color", + "category": "Modifier" + }, + "mod-picker-border-color-hover-open": { + "value": "var(--spectrum-picker-border-color-hover-open)", + "description": "Used by `.spectrum-Picker.is-open:not(.spectrum-Picker--quiet, :disabled, .is-disabled):hover`.
Defaults to `var(--spectrum-picker-border-color-hover-open)`, if not set.", + "control": "color", + "category": "Modifier" + }, + "mod-picker-icon-color-hover-open": { + "value": "var(--spectrum-picker-icon-color-hover-open)", + "description": "Used by `.spectrum-Picker.is-open:not(.spectrum-Picker--quiet, :disabled, .is-disabled):hover .spectrum-Picker-menuIcon`.
Defaults to `var(--spectrum-picker-icon-color-hover-open)`, if not set.", + "control": "color", + "category": "Modifier" + }, + "mod-picker-border-color-error-hover": { + "value": "var(--spectrum-picker-border-color-error-hover)", + "description": "Used by `.spectrum-Picker.is-invalid:not(:disabled, .is-disabled):hover`.
Defaults to `var(--spectrum-picker-border-color-error-hover)`, if not set.", + "control": "color", + "category": "Modifier" + }, + "mod-picker-border-color-error-hover-open": { + "value": "var(--spectrum-picker-border-color-error-hover-open)", + "description": "Used by `.spectrum-Picker.is-invalid.is-open:not(:disabled, .is-disabled):hover`.
Defaults to `var(--spectrum-picker-border-color-error-hover-open)`, if not set.", + "control": "color", + "category": "Modifier" + }, + "mod-picker-background-color-disabled": { + "value": "var(--spectrum-picker-background-color-disabled)", + "description": "Used by `.spectrum-Picker.is-disabled, .spectrum-Picker:disabled`.
Defaults to `var(--spectrum-picker-background-color-disabled)`, if not set.", + "control": "color", + "category": "Modifier" + }, + "mod-picker-font-color-disabled": { + "value": "var(--spectrum-picker-font-color-disabled)", + "description": "Used by `.spectrum-Picker.is-disabled, .spectrum-Picker:disabled`, `.spectrum-Picker.is-disabled .spectrum-Picker-label.is-placeholder, .spectrum-Picker:disabled .spectrum-Picker-label.is-placeholder`.
Defaults to `var(--spectrum-picker-font-color-disabled)`, if not set.", + "control": "color", + "category": "Modifier" + } + }, + "component": { + "spectrum-picker-font-size": { + "description": "Defined in `.spectrum-Picker`, `.spectrum-Picker--sizeS`, `.spectrum-Picker--sizeL`, `.spectrum-Picker--sizeXL`.
Used by `.spectrum-Picker-label`.", + "control": "text", + "category": "Component" + }, + "spectrum-picker-font-weight": { + "description": "Defined in `.spectrum-Picker`.
Used by `.spectrum-Picker-label`, `.spectrum-Picker-label.is-placeholder`.", + "control": "text", + "category": "Component" + }, + "spectrum-picker-placeholder-font-style": { + "description": "Defined in `.spectrum-Picker`.
Used by `.spectrum-Picker-label.is-placeholder`.", + "control": "text", + "category": "Component" + }, + "spectrum-picker-line-height": { + "description": "Defined in `.spectrum-Picker`.
Used by `.spectrum-Picker-label`.", + "control": "text", + "category": "Component" + }, + "spectrum-picker-block-size": { + "description": "Defined in `.spectrum-Picker`, `.spectrum-Picker--sizeS`, `.spectrum-Picker--sizeL`, `.spectrum-Picker--sizeXL`.
Used by `.spectrum-Picker`.", + "control": "text", + "category": "Component" + }, + "spectrum-picker-inline-size": { + "description": "Defined in `.spectrum-Picker`.
Used by `.spectrum-Picker`.", + "control": "text", + "category": "Component" + }, + "spectrum-picker-border-radius": { + "description": "Defined in `.spectrum-Picker`.
Used by `.spectrum-Picker`, `.spectrum-Picker:after`.", + "control": "text", + "category": "Component" + }, + "spectrum-picker-spacing-top-to-text": { + "description": "Defined in `.spectrum-Picker`, `.spectrum-Picker--sizeS`, `.spectrum-Picker--sizeL`, `.spectrum-Picker--sizeXL`.
Used by `.spectrum-Picker-label`.", + "control": "text", + "category": "Component" + }, + "spectrum-picker-spacing-bottom-to-text": { + "description": "Defined in `.spectrum-Picker`, `.spectrum-Picker--sizeS`, `.spectrum-Picker--sizeL`, `.spectrum-Picker--sizeXL`.
Used by `.spectrum-Picker-label`.", + "control": "text", + "category": "Component" + }, + "spectrum-picker-spacing-edge-to-text": { + "description": "Defined in `.spectrum-Picker`, `.spectrum-Picker--sizeS`, `.spectrum-Picker--sizeL`, `.spectrum-Picker--sizeXL`.
Used by `.spectrum-Picker`.", + "control": "text", + "category": "Component" + }, + "spectrum-picker-spacing-edge-to-text-quiet": { + "description": "Defined in `.spectrum-Picker`.
Used by `.spectrum-Picker--quiet`.", + "control": "text", + "category": "Component" + }, + "spectrum-picker-spacing-label-to-picker": { + "description": "Defined in `.spectrum-Picker`.
Used by `.spectrum-Picker`.", + "control": "text", + "category": "Component" + }, + "spectrum-picker-spacing-text-to-icon": { + "description": "Defined in `.spectrum-Picker`, `.spectrum-Picker--sizeS`, `.spectrum-Picker--sizeL`, `.spectrum-Picker--sizeXL`.
Used by `.spectrum-Picker .spectrum-Picker-icon`, `.spectrum-Picker-label ~ .spectrum-Picker-menuIcon`.", + "control": "text", + "category": "Component" + }, + "spectrum-picker-spacing-text-to-icon-inline-end": { + "description": "Defined in `.spectrum-Picker`, `.spectrum-Picker--sizeS`, `.spectrum-Picker--sizeL`, `.spectrum-Picker--sizeXL`.
Used by `.spectrum-Picker.is-invalid .spectrum-Picker-label, .spectrum-Picker.is-loading .spectrum-Picker-label`.", + "control": "text", + "category": "Component" + }, + "spectrum-picker-spacing-icon-to-disclosure-icon": { + "description": "Defined in `.spectrum-Picker`, `.spectrum-Picker--sizeS`, `.spectrum-Picker--sizeL`, `.spectrum-Picker--sizeXL`.
Used by `.spectrum-Picker-menuIcon`.", + "control": "text", + "category": "Component" + }, + "spectrum-picker-visual-to-disclosure-icon-medium": { + "value": "8px", + "description": "Used by `--spectrum-picker-spacing-icon-to-disclosure-icon`.", + "control": "text", + "category": "Component" + }, + "spectrum-picker-spacing-label-to-picker-quiet": { + "description": "Defined in `.spectrum-Picker`, `.spectrum-Picker--sizeS`, `.spectrum-Picker--sizeL`, `.spectrum-Picker--sizeXL`.
Used by `.spectrum-Picker--quiet`.", + "control": "text", + "category": "Component" + }, + "spectrum-picker-spacing-top-to-alert-icon": { + "description": "Defined in `.spectrum-Picker`, `.spectrum-Picker--sizeS`, `.spectrum-Picker--sizeL`, `.spectrum-Picker--sizeXL`.
Used by `.spectrum-Picker-validationIcon`.", + "control": "text", + "category": "Component" + }, + "spectrum-picker-spacing-top-to-progress-circle": { + "description": "Defined in `.spectrum-Picker`, `.spectrum-Picker--sizeS`, `.spectrum-Picker--sizeL`, `.spectrum-Picker--sizeXL`.
Used by `.spectrum-Picker .spectrum-ProgressCircle`.", + "control": "text", + "category": "Component" + }, + "spectrum-picker-spacing-top-to-disclosure-icon": { + "description": "Defined in `.spectrum-Picker`, `.spectrum-Picker--sizeS`, `.spectrum-Picker--sizeL`, `.spectrum-Picker--sizeXL`.
Used by `.spectrum-Picker-menuIcon`.", + "control": "text", + "category": "Component" + }, + "spectrum-picker-spacing-edge-to-disclosure-icon": { + "description": "Defined in `.spectrum-Picker`, `.spectrum-Picker--sizeS`, `.spectrum-Picker--sizeL`, `.spectrum-Picker--sizeXL`.
Used by `.spectrum-Picker`.", + "control": "text", + "category": "Component" + }, + "spectrum-picker-spacing-edge-to-disclosure-icon-quiet": { + "description": "Defined in `.spectrum-Picker`.
Used by `.spectrum-Picker--quiet .spectrum-Picker-menuIcon`.", + "control": "text", + "category": "Component" + }, + "spectrum-picker-end-edge-to-disclousure-icon-quiet": { + "value": "0px", + "description": "Used by `--spectrum-picker-spacing-edge-to-disclosure-icon-quiet`.", + "control": "text", + "category": "Component" + }, + "spectrum-picker-animation-duration": { + "description": "Defined in `.spectrum-Picker`.
Used by `.spectrum-Picker`, `.spectrum-Picker-label.is-placeholder`, `.spectrum-Picker-menuIcon`.", + "control": "text", + "category": "Component" + }, + "spectrum-picker-font-color-default": { + "description": "Defined in `.spectrum-Picker`.
Used by `.spectrum-Picker`, `.spectrum-Picker-label.is-placeholder`, `.spectrum-Picker--quiet`.", + "control": "color", + "category": "Component" + }, + "spectrum-picker-font-color-default-open": { + "description": "Defined in `.spectrum-Picker`.
Used by `.spectrum-Picker.is-open:not(.spectrum-Picker--quiet, :disabled, .is-disabled)`.", + "control": "color", + "category": "Component" + }, + "spectrum-picker-font-color-hover": { + "description": "Defined in `.spectrum-Picker`.
Used by `.spectrum-Picker:hover`, `.spectrum-Picker-label.is-placeholder:hover`.", + "control": "color", + "category": "Component" + }, + "spectrum-picker-font-color-hover-open": { + "description": "Defined in `.spectrum-Picker`.
Used by `.spectrum-Picker.is-open:not(.spectrum-Picker--quiet, :disabled, .is-disabled):hover`.", + "control": "color", + "category": "Component" + }, + "spectrum-picker-font-color-active": { + "description": "Defined in `.spectrum-Picker`.
Used by `.spectrum-Picker.is-placeholder:active .spectrum-Picker-label`, `.spectrum-Picker-label.is-placeholder:active`.", + "control": "color", + "category": "Component" + }, + "spectrum-picker-font-color-key-focus": { + "description": "Defined in `.spectrum-Picker`.
Used by `.spectrum-Picker.is-keyboardFocused, .spectrum-Picker:focus-visible`, `.spectrum-Picker.is-keyboardFocused .spectrum-Picker-label.is-placeholder, .spectrum-Picker:focus-visible .spectrum-Picker-label.is-placeholder`.", + "control": "color", + "category": "Component" + }, + "spectrum-picker-icon-color-default": { + "description": "Defined in `.spectrum-Picker`.
Used by `.spectrum-Picker-menuIcon`.", + "control": "color", + "category": "Component" + }, + "spectrum-picker-icon-color-default-open": { + "description": "Defined in `.spectrum-Picker`.
Used by `.spectrum-Picker.is-open:not(.spectrum-Picker--quiet, :disabled, .is-disabled) .spectrum-Picker-menuIcon`.", + "control": "color", + "category": "Component" + }, + "spectrum-picker-icon-color-hover": { + "description": "Defined in `.spectrum-Picker`.
Used by `.spectrum-Picker:hover .spectrum-Picker-menuIcon`.", + "control": "color", + "category": "Component" + }, + "spectrum-picker-icon-color-hover-open": { + "description": "Defined in `.spectrum-Picker`.
Used by `.spectrum-Picker.is-open:not(.spectrum-Picker--quiet, :disabled, .is-disabled):hover .spectrum-Picker-menuIcon`.", + "control": "color", + "category": "Component" + }, + "spectrum-picker-icon-color-active": { + "description": "Defined in `.spectrum-Picker`.
Used by `.spectrum-Picker-menuIcon:active`.", + "control": "color", + "category": "Component" + }, + "spectrum-picker-icon-color-key-focus": { + "description": "Defined in `.spectrum-Picker`.
Used by `.spectrum-Picker.is-keyboardFocused .spectrum-Picker-menuIcon, .spectrum-Picker:focus-visible .spectrum-Picker-menuIcon`.", + "control": "color", + "category": "Component" + }, + "spectrum-picker-border-color-error-default": { + "description": "Defined in `.spectrum-Picker`.
Used by `.spectrum-Picker.is-invalid:not(:disabled, .is-disabled)`.", + "control": "color", + "category": "Component" + }, + "spectrum-picker-border-color-error-default-open": { + "description": "Defined in `.spectrum-Picker`.
Used by `.spectrum-Picker.is-invalid.is-open:not(:disabled, .is-disabled)`.", + "control": "color", + "category": "Component" + }, + "spectrum-picker-border-color-error-hover": { + "description": "Defined in `.spectrum-Picker`.
Used by `.spectrum-Picker.is-invalid:not(:disabled, .is-disabled):hover`.", + "control": "color", + "category": "Component" + }, + "spectrum-picker-border-color-error-hover-open": { + "description": "Defined in `.spectrum-Picker`.
Used by `.spectrum-Picker.is-invalid.is-open:not(:disabled, .is-disabled):hover`.", + "control": "color", + "category": "Component" + }, + "spectrum-picker-border-color-error-active": { + "description": "Defined in `.spectrum-Picker`.
Used by `.spectrum-Picker.is-invalid:not(:disabled, .is-disabled):active`.", + "control": "color", + "category": "Component" + }, + "spectrum-picker-border-color-error-key-focus": { + "description": "Defined in `.spectrum-Picker`.
Used by `.spectrum-Picker.is-invalid.is-keyboardFocused:not(:disabled, .is-disabled), .spectrum-Picker.is-invalid:not(:disabled, .is-disabled):focus-visible`.", + "control": "color", + "category": "Component" + }, + "spectrum-picker-icon-color-error": { + "description": "Defined in `.spectrum-Picker`.
Used by `.spectrum-Picker.is-invalid:not(:disabled, .is-disabled) .spectrum-Picker-validationIcon`.", + "control": "color", + "category": "Component" + }, + "spectrum-picker-background-color-disabled": { + "description": "Defined in `.spectrum-Picker`.
Used by `.spectrum-Picker.is-disabled, .spectrum-Picker:disabled`.", + "control": "color", + "category": "Component" + }, + "spectrum-picker-font-color-disabled": { + "description": "Defined in `.spectrum-Picker`.
Used by `.spectrum-Picker.is-disabled, .spectrum-Picker:disabled`, `.spectrum-Picker.is-disabled .spectrum-Picker-label.is-placeholder, .spectrum-Picker:disabled .spectrum-Picker-label.is-placeholder`.", + "control": "color", + "category": "Component" + }, + "spectrum-picker-icon-color-disabled": { + "description": "Defined in `.spectrum-Picker`.
Used by `.spectrum-Picker.is-loading .spectrum-Picker-menuIcon`, `.spectrum-Picker.is-disabled .spectrum-Picker-icon, .spectrum-Picker.is-disabled .spectrum-Picker-menuIcon, .spectrum-Picker.is-disabled .spectrum-Picker-validationIcon, .spectrum-Picker:disabled .spectrum-Picker-icon, .spectrum-Picker:disabled .spectrum-Picker-menuIcon, .spectrum-Picker:disabled .spectrum-Picker-validationIcon`.", + "control": "color", + "category": "Component" + }, + "spectrum-picker-focus-indicator-gap": { + "description": "Defined in `.spectrum-Picker`.
Used by `.spectrum-Picker:after`, `.spectrum-Picker--quiet.is-keyboardFocused:after, .spectrum-Picker--quiet:focus-visible:after`.", + "control": "text", + "category": "Component" + }, + "spectrum-picker-focus-indicator-thickness": { + "description": "Defined in `.spectrum-Picker`.
Used by `.spectrum-Picker:after`, `.spectrum-Picker--quiet.is-keyboardFocused:after, .spectrum-Picker--quiet:focus-visible:after`.", + "control": "text", + "category": "Component" + }, + "spectrum-picker-focus-indicator-color": { + "description": "Defined in `.spectrum-Picker`.
Used by `.spectrum-Picker.is-keyboardFocused:after, .spectrum-Picker:focus-visible:after`, `.spectrum-Picker--quiet.is-keyboardFocused:after, .spectrum-Picker--quiet:focus-visible:after`.", + "control": "color", + "category": "Component" + }, + "spectrum-picker-spacing-picker-to-popover": { + "description": "Defined in `.spectrum-Picker + .spectrum-Popover--bottom.is-open`, `.spectrum-Picker--sizeS + .spectrum-Popover--bottom.is-open`, `.spectrum-Picker--sizeL + .spectrum-Popover--bottom.is-open`, `.spectrum-Picker--sizeXL + .spectrum-Popover--bottom.is-open`.
Used by `.spectrum-Picker + .spectrum-Popover--bottom.is-open`.", + "control": "text", + "category": "Component" + }, + "spectrum-picker-visual-to-disclosure-icon-small": { + "value": "7px", + "description": "Used by `--spectrum-picker-spacing-icon-to-disclosure-icon`.", + "control": "text", + "category": "Component" + }, + "spectrum-picker-visual-to-disclosure-icon-large": { + "value": "9px", + "description": "Used by `--spectrum-picker-spacing-icon-to-disclosure-icon`.", + "control": "text", + "category": "Component" + }, + "spectrum-picker-visual-to-disclosure-icon-extra-large": { + "value": "10px", + "description": "Used by `--spectrum-picker-spacing-icon-to-disclosure-icon`.", + "control": "text", + "category": "Component" + }, + "spectrum-picker-minimum-width-multiplier": { + "value": "2", + "description": "Used by `.spectrum-Picker`.", + "control": "text", + "category": "Component" + }, + "spectrum-picker-border-width": { + "value": "1px", + "description": "Defined in `.spectrum-Picker`.
Used by `.spectrum-Picker`, `.spectrum-Picker:after`, `.spectrum-Picker-label`, `.spectrum-Picker-validationIcon`, `.spectrum-Picker .spectrum-ProgressCircle`, `.spectrum-Picker--quiet.is-keyboardFocused:after, .spectrum-Picker--quiet:focus-visible:after`.", + "control": "text", + "category": "Component" + }, + "spectrum-picker-background-color-default": { + "description": "Defined in `.spectrum-Picker`.
Used by `.spectrum-Picker`.", + "control": "color", + "category": "Component" + }, + "spectrum-picker-border-color-default": { + "description": "Defined in `.spectrum-Picker`.
Used by `.spectrum-Picker`.", + "control": "color", + "category": "Component" + }, + "spectrum-picker-background-color-active": { + "description": "Defined in `.spectrum-Picker`.
Used by `.spectrum-Picker:active`.", + "control": "color", + "category": "Component" + }, + "spectrum-picker-border-color-active": { + "description": "Defined in `.spectrum-Picker`.
Used by `.spectrum-Picker:active`.", + "control": "color", + "category": "Component" + }, + "spectrum-picker-background-color-key-focus": { + "description": "Defined in `.spectrum-Picker`.
Used by `.spectrum-Picker.is-keyboardFocused, .spectrum-Picker:focus-visible`.", + "control": "color", + "category": "Component" + }, + "spectrum-picker-border-color-key-focus": { + "description": "Defined in `.spectrum-Picker`.
Used by `.spectrum-Picker.is-keyboardFocused, .spectrum-Picker:focus-visible`.", + "control": "color", + "category": "Component" + }, + "spectrum-picker-background-color-default-open": { + "description": "Defined in `.spectrum-Picker`.
Used by `.spectrum-Picker.is-open:not(.spectrum-Picker--quiet, :disabled, .is-disabled)`.", + "control": "color", + "category": "Component" + }, + "spectrum-picker-border-color-default-open": { + "description": "Defined in `.spectrum-Picker`.
Used by `.spectrum-Picker.is-open:not(.spectrum-Picker--quiet, :disabled, .is-disabled)`.", + "control": "color", + "category": "Component" + }, + "spectrum-picker-background-color-hover": { + "description": "Defined in `.spectrum-Picker`.
Used by `.spectrum-Picker:hover`.", + "control": "color", + "category": "Component" + }, + "spectrum-picker-border-color-hover": { + "description": "Defined in `.spectrum-Picker`.
Used by `.spectrum-Picker:hover`.", + "control": "color", + "category": "Component" + }, + "spectrum-picker-background-color-hover-open": { + "description": "Defined in `.spectrum-Picker`.
Used by `.spectrum-Picker.is-open:not(.spectrum-Picker--quiet, :disabled, .is-disabled):hover`.", + "control": "color", + "category": "Component" + }, + "spectrum-picker-border-color-hover-open": { + "description": "Defined in `.spectrum-Picker`.
Used by `.spectrum-Picker.is-open:not(.spectrum-Picker--quiet, :disabled, .is-disabled):hover`.", + "control": "color", + "category": "Component" + }, + "spectrum-picker-border-color-disabled": { + "description": "Defined in `.spectrum-Picker`.
Used by `.spectrum-Picker.is-disabled, .spectrum-Picker:disabled`.", + "control": "color", + "category": "Component" + } + }, + "global": { + "spectrum-gray-100": { + "value": "light-dark(rgb(233, 233, 233), rgb(44, 44, 44))", + "description": "Used by `--system-picker-background-color-default`.", + "control": "text", + "category": "Global" + }, + "spectrum-gray-200": { + "value": "light-dark(rgb(225, 225, 225), rgb(50, 50, 50))", + "description": "Used by `--system-picker-background-color-default-open`, `--system-picker-background-color-hover`, `--system-picker-background-color-hover-open`, `--system-picker-background-color-active`, `--system-picker-background-color-key-focus`.", + "control": "text", + "category": "Global" + }, + "spectrum-gray-500": { + "value": "light-dark(rgb(143, 143, 143), rgb(109, 109, 109))", + "description": "Used by `--system-picker-border-color-default`.", + "control": "text", + "category": "Global" + }, + "spectrum-gray-800": { + "value": "light-dark(rgb(41, 41, 41), rgb(219, 219, 219))", + "description": "Used by `--system-picker-border-color-default-open`.", + "control": "text", + "category": "Global" + }, + "spectrum-gray-600": { + "value": "light-dark(rgb(113, 113, 113), rgb(138, 138, 138))", + "description": "Used by `--system-picker-border-color-hover`.", + "control": "text", + "category": "Global" + }, + "spectrum-gray-900": { + "value": "light-dark(rgb(19, 19, 19), rgb(242, 242, 242))", + "description": "Used by `--system-picker-border-color-hover-open`, `--system-picker-border-color-key-focus`.", + "control": "text", + "category": "Global" + }, + "spectrum-gray-700": { + "value": "light-dark(rgb(80, 80, 80), rgb(175, 175, 175))", + "description": "Used by `--system-picker-border-color-active`.", + "control": "text", + "category": "Global" + }, + "spectrum-gray-300": { + "value": "light-dark(rgb(218, 218, 218), rgb(57, 57, 57))", + "description": "Used by `--system-picker-border-color-disabled`.", + "control": "text", + "category": "Global" + }, + "spectrum-border-width-100": { + "value": "1px", + "description": "Used by `--system-picker-border-width`.", + "control": "text", + "category": "Global" + }, + "spectrum-sans-font-family-stack": { + "description": "Used by `.spectrum-Picker`.", + "control": "text", + "category": "Global" + }, + "spectrum-line-height-100": { + "value": "1.3", + "description": "Used by `.spectrum-Picker`, `--spectrum-picker-line-height`.", + "control": "text", + "category": "Global" + }, + "spectrum-animation-duration-100": { + "description": "Used by `.spectrum-Picker`, `--spectrum-picker-animation-duration`.", + "control": "text", + "category": "Global" + }, + "spectrum-font-size-100": { + "value": "14px", + "description": "Used by `--spectrum-picker-font-size`.", + "control": "text", + "category": "Global" + }, + "spectrum-regular-font-weight": { + "value": "400", + "description": "Used by `--spectrum-picker-font-weight`.", + "control": "text", + "category": "Global" + }, + "spectrum-default-font-style": { + "value": "normal", + "description": "Used by `--spectrum-picker-placeholder-font-style`.", + "control": "text", + "category": "Global" + }, + "spectrum-component-height-100": { + "value": "32px", + "description": "Used by `--spectrum-picker-block-size`.", + "control": "text", + "category": "Global" + }, + "spectrum-field-width": { + "value": "192px", + "description": "Used by `--spectrum-picker-inline-size`.", + "control": "text", + "category": "Global" + }, + "spectrum-corner-radius-100": { + "value": "8px", + "description": "Used by `--spectrum-picker-border-radius`.", + "control": "text", + "category": "Global" + }, + "spectrum-component-top-to-text-100": { + "value": "6px", + "description": "Used by `--spectrum-picker-spacing-top-to-text`.", + "control": "text", + "category": "Global" + }, + "spectrum-component-bottom-to-text-100": { + "value": "9px", + "description": "Used by `--spectrum-picker-spacing-bottom-to-text`.", + "control": "text", + "category": "Global" + }, + "spectrum-component-edge-to-text-100": { + "value": "12px", + "description": "Used by `--spectrum-picker-spacing-edge-to-text`.", + "control": "text", + "category": "Global" + }, + "spectrum-field-edge-to-text-quiet": { + "value": "0px", + "description": "Used by `--spectrum-picker-spacing-edge-to-text-quiet`.", + "control": "text", + "category": "Global" + }, + "spectrum-field-label-to-component": { + "value": "0px", + "description": "Used by `--spectrum-picker-spacing-label-to-picker`.", + "control": "text", + "category": "Global" + }, + "spectrum-text-to-visual-100": { + "value": "6px", + "description": "Used by `--spectrum-picker-spacing-text-to-icon`.", + "control": "text", + "category": "Global" + }, + "spectrum-field-text-to-alert-icon-medium": { + "value": "12px", + "description": "Used by `--spectrum-picker-spacing-text-to-icon-inline-end`.", + "control": "text", + "category": "Global" + }, + "spectrum-field-label-to-component-quiet-medium": { + "value": "-8px", + "description": "Used by `--spectrum-picker-spacing-label-to-picker-quiet`.", + "control": "text", + "category": "Global" + }, + "spectrum-field-top-to-alert-icon-medium": { + "value": "7px", + "description": "Used by `--spectrum-picker-spacing-top-to-alert-icon`.", + "control": "text", + "category": "Global" + }, + "spectrum-field-top-to-progress-circle-medium": { + "value": "8px", + "description": "Used by `--spectrum-picker-spacing-top-to-progress-circle`.", + "control": "text", + "category": "Global" + }, + "spectrum-field-top-to-disclosure-icon-100": { + "value": "11px", + "description": "Used by `--spectrum-picker-spacing-top-to-disclosure-icon`.", + "control": "text", + "category": "Global" + }, + "spectrum-field-end-edge-to-disclosure-icon-100": { + "value": "11px", + "description": "Used by `--spectrum-picker-spacing-edge-to-disclosure-icon`.", + "control": "text", + "category": "Global" + }, + "spectrum-neutral-content-color-default": { + "value": "var(--spectrum-gray-800)", + "description": "Used by `--spectrum-picker-font-color-default`, `--spectrum-picker-icon-color-default`.", + "control": "color", + "category": "Global" + }, + "spectrum-neutral-content-color-focus": { + "value": "var(--spectrum-neutral-content-color-down)", + "description": "Used by `--spectrum-picker-font-color-default-open`, `--spectrum-picker-icon-color-default-open`.", + "control": "color", + "category": "Global" + }, + "spectrum-neutral-content-color-hover": { + "value": "var(--spectrum-gray-900)", + "description": "Used by `--spectrum-picker-font-color-hover`, `--spectrum-picker-icon-color-hover`.", + "control": "color", + "category": "Global" + }, + "spectrum-neutral-content-color-focus-hover": { + "value": "var(--spectrum-neutral-content-color-down)", + "description": "Used by `--spectrum-picker-font-color-hover-open`, `--spectrum-picker-icon-color-hover-open`.", + "control": "color", + "category": "Global" + }, + "spectrum-neutral-content-color-down": { + "value": "var(--spectrum-gray-900)", + "description": "Used by `--spectrum-picker-font-color-active`, `--spectrum-picker-icon-color-active`.", + "control": "color", + "category": "Global" + }, + "spectrum-neutral-content-color-key-focus": { + "value": "var(--spectrum-gray-900)", + "description": "Used by `--spectrum-picker-font-color-key-focus`, `--spectrum-picker-icon-color-key-focus`.", + "control": "color", + "category": "Global" + }, + "spectrum-negative-border-color-default": { + "value": "var(--spectrum-negative-color-900)", + "description": "Used by `--spectrum-picker-border-color-error-default`.", + "control": "color", + "category": "Global" + }, + "spectrum-negative-border-color-focus": { + "value": "var(--spectrum-negative-color-1000)", + "description": "Used by `--spectrum-picker-border-color-error-default-open`.", + "control": "color", + "category": "Global" + }, + "spectrum-negative-border-color-hover": { + "value": "var(--spectrum-negative-color-1000)", + "description": "Used by `--spectrum-picker-border-color-error-hover`.", + "control": "color", + "category": "Global" + }, + "spectrum-negative-border-color-focus-hover": { + "value": "var(--spectrum-negative-border-color-down)", + "description": "Used by `--spectrum-picker-border-color-error-hover-open`.", + "control": "color", + "category": "Global" + }, + "spectrum-negative-border-color-down": { + "value": "var(--spectrum-negative-color-1100)", + "description": "Used by `--spectrum-picker-border-color-error-active`.", + "control": "color", + "category": "Global" + }, + "spectrum-negative-border-color-key-focus": { + "value": "var(--spectrum-negative-color-1000)", + "description": "Used by `--spectrum-picker-border-color-error-key-focus`.", + "control": "color", + "category": "Global" + }, + "spectrum-negative-visual-color": { + "value": "var(--spectrum-negative-color-900)", + "description": "Used by `--spectrum-picker-icon-color-error`.", + "control": "color", + "category": "Global" + }, + "spectrum-disabled-background-color": { + "value": "var(--spectrum-gray-100)", + "description": "Used by `--spectrum-picker-background-color-disabled`.", + "control": "color", + "category": "Global" + }, + "spectrum-disabled-content-color": { + "value": "var(--spectrum-gray-400)", + "description": "Used by `--spectrum-picker-font-color-disabled`, `--spectrum-picker-icon-color-disabled`.", + "control": "color", + "category": "Global" + }, + "spectrum-focus-indicator-gap": { + "value": "2px", + "description": "Used by `--spectrum-picker-focus-indicator-gap`.", + "control": "text", + "category": "Global" + }, + "spectrum-focus-indicator-thickness": { + "value": "2px", + "description": "Used by `--spectrum-picker-focus-indicator-thickness`.", + "control": "text", + "category": "Global" + }, + "spectrum-focus-indicator-color": { + "value": "var(--spectrum-blue-800)", + "description": "Used by `--spectrum-picker-focus-indicator-color`.", + "control": "color", + "category": "Global" + }, + "spectrum-component-to-menu-medium": { + "value": "6px", + "description": "Used by `--spectrum-picker-spacing-picker-to-popover`.", + "control": "text", + "category": "Global" + }, + "spectrum-font-size-75": { + "value": "12px", + "description": "Used by `--spectrum-picker-font-size`.", + "control": "text", + "category": "Global" + }, + "spectrum-component-height-75": { + "value": "24px", + "description": "Used by `--spectrum-picker-block-size`.", + "control": "text", + "category": "Global" + }, + "spectrum-component-top-to-text-75": { + "value": "4px", + "description": "Used by `--spectrum-picker-spacing-top-to-text`.", + "control": "text", + "category": "Global" + }, + "spectrum-component-bottom-to-text-75": { + "value": "5px", + "description": "Used by `--spectrum-picker-spacing-bottom-to-text`.", + "control": "text", + "category": "Global" + }, + "spectrum-component-edge-to-text-75": { + "value": "10px", + "description": "Used by `--spectrum-picker-spacing-edge-to-text`.", + "control": "text", + "category": "Global" + }, + "spectrum-text-to-visual-75": { + "value": "5px", + "description": "Used by `--spectrum-picker-spacing-text-to-icon`.", + "control": "text", + "category": "Global" + }, + "spectrum-field-text-to-alert-icon-small": { + "value": "8px", + "description": "Used by `--spectrum-picker-spacing-text-to-icon-inline-end`.", + "control": "text", + "category": "Global" + }, + "spectrum-field-label-to-component-quiet-small": { + "value": "-8px", + "description": "Used by `--spectrum-picker-spacing-label-to-picker-quiet`.", + "control": "text", + "category": "Global" + }, + "spectrum-field-top-to-alert-icon-small": { + "value": "4px", + "description": "Used by `--spectrum-picker-spacing-top-to-alert-icon`.", + "control": "text", + "category": "Global" + }, + "spectrum-field-top-to-progress-circle-small": { + "value": "4px", + "description": "Used by `--spectrum-picker-spacing-top-to-progress-circle`.", + "control": "text", + "category": "Global" + }, + "spectrum-field-top-to-disclosure-icon-75": { + "value": "7px", + "description": "Used by `--spectrum-picker-spacing-top-to-disclosure-icon`.", + "control": "text", + "category": "Global" + }, + "spectrum-field-end-edge-to-disclosure-icon-75": { + "value": "7px", + "description": "Used by `--spectrum-picker-spacing-edge-to-disclosure-icon`.", + "control": "text", + "category": "Global" + }, + "spectrum-component-to-menu-small": { + "value": "6px", + "description": "Used by `--spectrum-picker-spacing-picker-to-popover`.", + "control": "text", + "category": "Global" + }, + "spectrum-font-size-200": { + "value": "16px", + "description": "Used by `--spectrum-picker-font-size`.", + "control": "text", + "category": "Global" + }, + "spectrum-component-height-200": { + "value": "40px", + "description": "Used by `--spectrum-picker-block-size`.", + "control": "text", + "category": "Global" + }, + "spectrum-component-top-to-text-200": { + "value": "9px", + "description": "Used by `--spectrum-picker-spacing-top-to-text`.", + "control": "text", + "category": "Global" + }, + "spectrum-component-bottom-to-text-200": { + "value": "11px", + "description": "Used by `--spectrum-picker-spacing-bottom-to-text`.", + "control": "text", + "category": "Global" + }, + "spectrum-component-edge-to-text-200": { + "value": "15px", + "description": "Used by `--spectrum-picker-spacing-edge-to-text`.", + "control": "text", + "category": "Global" + }, + "spectrum-text-to-visual-200": { + "value": "7px", + "description": "Used by `--spectrum-picker-spacing-text-to-icon`.", + "control": "text", + "category": "Global" + }, + "spectrum-field-text-to-alert-icon-large": { + "value": "15px", + "description": "Used by `--spectrum-picker-spacing-text-to-icon-inline-end`.", + "control": "text", + "category": "Global" + }, + "spectrum-field-label-to-component-quiet-large": { + "value": "-12px", + "description": "Used by `--spectrum-picker-spacing-label-to-picker-quiet`.", + "control": "text", + "category": "Global" + }, + "spectrum-field-top-to-alert-icon-large": { + "value": "10px", + "description": "Used by `--spectrum-picker-spacing-top-to-alert-icon`.", + "control": "text", + "category": "Global" + }, + "spectrum-field-top-to-progress-circle-large": { + "value": "12px", + "description": "Used by `--spectrum-picker-spacing-top-to-progress-circle`.", + "control": "text", + "category": "Global" + }, + "spectrum-field-top-to-disclosure-icon-200": { + "value": "14px", + "description": "Used by `--spectrum-picker-spacing-top-to-disclosure-icon`.", + "control": "text", + "category": "Global" + }, + "spectrum-field-end-edge-to-disclosure-icon-200": { + "value": "14px", + "description": "Used by `--spectrum-picker-spacing-edge-to-disclosure-icon`.", + "control": "text", + "category": "Global" + }, + "spectrum-component-to-menu-large": { + "value": "7px", + "description": "Used by `--spectrum-picker-spacing-picker-to-popover`.", + "control": "text", + "category": "Global" + }, + "spectrum-font-size-300": { + "value": "18px", + "description": "Used by `--spectrum-picker-font-size`.", + "control": "text", + "category": "Global" + }, + "spectrum-component-height-300": { + "value": "48px", + "description": "Used by `--spectrum-picker-block-size`.", + "control": "text", + "category": "Global" + }, + "spectrum-component-top-to-text-300": { + "value": "12px", + "description": "Used by `--spectrum-picker-spacing-top-to-text`.", + "control": "text", + "category": "Global" + }, + "spectrum-component-bottom-to-text-300": { + "value": "14px", + "description": "Used by `--spectrum-picker-spacing-bottom-to-text`.", + "control": "text", + "category": "Global" + }, + "spectrum-component-edge-to-text-300": { + "value": "17px", + "description": "Used by `--spectrum-picker-spacing-edge-to-text`.", + "control": "text", + "category": "Global" + }, + "spectrum-text-to-visual-300": { + "value": "8px", + "description": "Used by `--spectrum-picker-spacing-text-to-icon`.", + "control": "text", + "category": "Global" + }, + "spectrum-field-text-to-alert-icon-extra-large": { + "value": "18px", + "description": "Used by `--spectrum-picker-spacing-text-to-icon-inline-end`.", + "control": "text", + "category": "Global" + }, + "spectrum-field-label-to-component-quiet-extra-large": { + "value": "-15px", + "description": "Used by `--spectrum-picker-spacing-label-to-picker-quiet`.", + "control": "text", + "category": "Global" + }, + "spectrum-field-top-to-alert-icon-extra-large": { + "value": "13px", + "description": "Used by `--spectrum-picker-spacing-top-to-alert-icon`.", + "control": "text", + "category": "Global" + }, + "spectrum-field-top-to-progress-circle-extra-large": { + "value": "16px", + "description": "Used by `--spectrum-picker-spacing-top-to-progress-circle`.", + "control": "text", + "category": "Global" + }, + "spectrum-field-top-to-disclosure-icon-300": { + "value": "17px", + "description": "Used by `--spectrum-picker-spacing-top-to-disclosure-icon`.", + "control": "text", + "category": "Global" + }, + "spectrum-field-end-edge-to-disclosure-icon-300": { + "value": "17px", + "description": "Used by `--spectrum-picker-spacing-edge-to-disclosure-icon`.", + "control": "text", + "category": "Global" + }, + "spectrum-component-to-menu-extra-large": { + "value": "8px", + "description": "Used by `--spectrum-picker-spacing-picker-to-popover`.", + "control": "text", + "category": "Global" + } + }, + "system-theme": { + "system-picker-background-color-default": { + "description": "Defined in `.spectrum`.
Used by `--spectrum-picker-background-color-default`.", + "control": "color" + }, + "system-picker-background-color-default-open": { + "description": "Defined in `.spectrum`.
Used by `--spectrum-picker-background-color-default-open`.", + "control": "color" + }, + "system-picker-background-color-hover": { + "description": "Defined in `.spectrum`.
Used by `--spectrum-picker-background-color-hover`.", + "control": "color" + }, + "system-picker-background-color-hover-open": { + "description": "Defined in `.spectrum`.
Used by `--spectrum-picker-background-color-hover-open`.", + "control": "color" + }, + "system-picker-background-color-active": { + "description": "Defined in `.spectrum`.
Used by `--spectrum-picker-background-color-active`.", + "control": "color" + }, + "system-picker-background-color-key-focus": { + "description": "Defined in `.spectrum`.
Used by `--spectrum-picker-background-color-key-focus`.", + "control": "color" + }, + "system-picker-border-color-default": { + "description": "Defined in `.spectrum`.
Used by `--spectrum-picker-border-color-default`.", + "control": "color" + }, + "system-picker-border-color-default-open": { + "description": "Defined in `.spectrum`.
Used by `--spectrum-picker-border-color-default-open`.", + "control": "color" + }, + "system-picker-border-color-hover": { + "description": "Defined in `.spectrum`.
Used by `--spectrum-picker-border-color-hover`.", + "control": "color" + }, + "system-picker-border-color-hover-open": { + "description": "Defined in `.spectrum`.
Used by `--spectrum-picker-border-color-hover-open`.", + "control": "color" + }, + "system-picker-border-color-active": { + "description": "Defined in `.spectrum`.
Used by `--spectrum-picker-border-color-active`.", + "control": "color" + }, + "system-picker-border-color-key-focus": { + "description": "Defined in `.spectrum`.
Used by `--spectrum-picker-border-color-key-focus`.", + "control": "color" + }, + "system-picker-border-color-disabled": { + "description": "Defined in `.spectrum`.
Used by `--spectrum-picker-border-color-disabled`.", + "control": "color" + }, + "system-picker-border-width": { + "description": "Defined in `.spectrum`.
Used by `--spectrum-picker-border-width`.", + "control": "text" + } + }, + "passthroughs": { + "mod-button-font-family": { + "category": "Passthrough" + }, + "mod-button-line-height": { + "category": "Passthrough" + }, + "mod-button-animation-duration": { + "category": "Passthrough" + } + }, + "high-contrast": { + "highcontrast-picker-focus-indicator-color": { + "value": "var(--mod-picker-focus-indicator-color, var(--spectrum-picker-focus-indicator-color))", + "description": "Defined in `.spectrum-Picker`.
Used by `.spectrum-Picker.is-keyboardFocused:after, .spectrum-Picker:focus-visible:after`, `.spectrum-Picker--quiet.is-keyboardFocused:after, .spectrum-Picker--quiet:focus-visible:after`.
Defaults to `var(--mod-picker-focus-indicator-color, var(--spectrum-picker-focus-indicator-color))`, if not set.", + "control": "color" + }, + "highcontrast-picker-border-color-default": { + "value": "var(--mod-picker-border-color-error-key-focus, var(--spectrum-picker-border-color-error-key-focus))", + "description": "Defined in `.spectrum-Picker`.
Used by `.spectrum-Picker`, `.spectrum-Picker:active`, `.spectrum-Picker.is-keyboardFocused, .spectrum-Picker:focus-visible`, `.spectrum-Picker.is-open:not(.spectrum-Picker--quiet, :disabled, .is-disabled)`, `.spectrum-Picker.is-invalid:not(:disabled, .is-disabled)`, `.spectrum-Picker.is-invalid:not(:disabled, .is-disabled):active`, `.spectrum-Picker.is-invalid.is-open:not(:disabled, .is-disabled)`, `.spectrum-Picker.is-invalid.is-keyboardFocused:not(:disabled, .is-disabled), .spectrum-Picker.is-invalid:not(:disabled, .is-disabled):focus-visible`.
Defaults to `var(--mod-picker-border-color-error-key-focus, var(--spectrum-picker-border-color-error-key-focus))`, if not set.", + "control": "color" + }, + "highcontrast-picker-border-color-hover": { + "value": "var(--mod-picker-border-color-error-hover-open, var(--spectrum-picker-border-color-error-hover-open))", + "description": "Defined in `.spectrum-Picker`, `.spectrum-Picker.is-keyboardFocused, .spectrum-Picker:focus-visible`.
Used by `.spectrum-Picker:hover`, `.spectrum-Picker.is-open:not(.spectrum-Picker--quiet, :disabled, .is-disabled):hover`, `.spectrum-Picker.is-invalid:not(:disabled, .is-disabled):hover`, `.spectrum-Picker.is-invalid.is-open:not(:disabled, .is-disabled):hover`.
Defaults to `var(--mod-picker-border-color-error-hover-open, var(--spectrum-picker-border-color-error-hover-open))`, if not set.", + "control": "color" + }, + "highcontrast-picker-border-color-disabled": { + "value": "var(--spectrum-picker-border-color-disabled)", + "description": "Defined in `.spectrum-Picker`.
Used by `.spectrum-Picker.is-disabled, .spectrum-Picker:disabled`.
Defaults to `var(--spectrum-picker-border-color-disabled)`, if not set.", + "control": "color" + }, + "highcontrast-picker-content-color-default": { + "value": "var(--mod-picker-font-color-hover, var(--spectrum-picker-font-color-hover))", + "description": "Defined in `.spectrum-Picker`.
Used by `.spectrum-Picker`, `.spectrum-Picker.is-placeholder:active .spectrum-Picker-label`, `.spectrum-Picker.is-keyboardFocused, .spectrum-Picker:focus-visible`, `.spectrum-Picker.is-keyboardFocused .spectrum-Picker-label.is-placeholder, .spectrum-Picker:focus-visible .spectrum-Picker-label.is-placeholder`, `.spectrum-Picker.is-keyboardFocused .spectrum-Picker-menuIcon, .spectrum-Picker:focus-visible .spectrum-Picker-menuIcon`, `.spectrum-Picker.is-open:not(.spectrum-Picker--quiet, :disabled, .is-disabled)`, `.spectrum-Picker.is-open:not(.spectrum-Picker--quiet, :disabled, .is-disabled) .spectrum-Picker-menuIcon`, `.spectrum-Picker.is-invalid:not(:disabled, .is-disabled) .spectrum-Picker-validationIcon`, `.spectrum-Picker-label.is-placeholder`, `.spectrum-Picker-label.is-placeholder:active`, `.spectrum-Picker-menuIcon`, `.spectrum-Picker-menuIcon:active`, `.spectrum-Picker--quiet`, `.spectrum-Picker:hover`, `.spectrum-Picker:hover .spectrum-Picker-menuIcon`, `.spectrum-Picker.is-open:not(.spectrum-Picker--quiet, :disabled, .is-disabled):hover`, `.spectrum-Picker.is-open:not(.spectrum-Picker--quiet, :disabled, .is-disabled):hover .spectrum-Picker-menuIcon`, `.spectrum-Picker-label.is-placeholder:hover`.
Defaults to `var(--mod-picker-font-color-hover, var(--spectrum-picker-font-color-hover))`, if not set.", + "control": "color" + }, + "highcontrast-picker-content-color-disabled": { + "value": "var(--mod-picker-font-color-disabled, var(--spectrum-picker-font-color-disabled))", + "description": "Defined in `.spectrum-Picker`.
Used by `.spectrum-Picker.is-loading .spectrum-Picker-menuIcon`, `.spectrum-Picker.is-disabled, .spectrum-Picker:disabled`, `.spectrum-Picker.is-disabled .spectrum-Picker-icon, .spectrum-Picker.is-disabled .spectrum-Picker-menuIcon, .spectrum-Picker.is-disabled .spectrum-Picker-validationIcon, .spectrum-Picker:disabled .spectrum-Picker-icon, .spectrum-Picker:disabled .spectrum-Picker-menuIcon, .spectrum-Picker:disabled .spectrum-Picker-validationIcon`, `.spectrum-Picker.is-disabled .spectrum-Picker-label.is-placeholder, .spectrum-Picker:disabled .spectrum-Picker-label.is-placeholder`.
Defaults to `var(--mod-picker-font-color-disabled, var(--spectrum-picker-font-color-disabled))`, if not set.", + "control": "color" + }, + "highcontrast-picker-background-color": { + "value": "var(--mod-picker-background-color-disabled, var(--spectrum-picker-background-color-disabled))", + "description": "Defined in `.spectrum-Picker`.
Used by `.spectrum-Picker`, `.spectrum-Picker:active`, `.spectrum-Picker.is-keyboardFocused, .spectrum-Picker:focus-visible`, `.spectrum-Picker.is-open:not(.spectrum-Picker--quiet, :disabled, .is-disabled)`, `.spectrum-Picker--quiet`, `.spectrum-Picker:hover`, `.spectrum-Picker.is-open:not(.spectrum-Picker--quiet, :disabled, .is-disabled):hover`, `.spectrum-Picker--quiet:hover`, `.spectrum-Picker--quiet.is-keyboardFocused, .spectrum-Picker--quiet:focus-visible`, `.spectrum-Picker--quiet.is-open, .spectrum-Picker--quiet.spectrum-Picker.is-disabled, .spectrum-Picker--quiet.spectrum-Picker:disabled, .spectrum-Picker--quiet:active`, `.spectrum-Picker.is-disabled, .spectrum-Picker:disabled`.
Defaults to `var(--mod-picker-background-color-disabled, var(--spectrum-picker-background-color-disabled))`, if not set.", + "control": "color" + } + } } diff --git a/components/picker/stories/picker.stories.js b/components/picker/stories/picker.stories.js index c2fa56e619d..5dde6ce94ec 100644 --- a/components/picker/stories/picker.stories.js +++ b/components/picker/stories/picker.stories.js @@ -2,11 +2,13 @@ import { WithDividers as MenuStories } from "@spectrum-css/menu/stories/menu.sto import { Sizes } from "@spectrum-css/preview/decorators"; import { disableDefaultModes } from "@spectrum-css/preview/modes"; import { isActive, isDisabled, isHovered, isInvalid, isKeyboardFocused, isLoading, isOpen, isQuiet, size } from "@spectrum-css/preview/types"; -import metadata from "../dist/metadata.json"; -import packageJson from "../package.json"; import { PickerGroup } from "./picker.test.js"; import { ClosedAndOpenTemplate, DisabledTemplate, Template } from "./template.js"; +// Local assets to render the component styles and structure +import metadata from "../dist/metadata.json"; +import packageJson from "../package.json"; + /** * The picker component (sometimes known as a "dropdown" or "select") allows users to choose from a list of options in a limited space. The list of options can change based on the context. */ @@ -139,6 +141,7 @@ export default { }, packageJson, metadata, + cssprops: metadata.modifiers, }, }; diff --git a/components/pickerbutton/dist/metadata.json b/components/pickerbutton/dist/metadata.json index 7eb82d7c8c4..d223d7360f4 100644 --- a/components/pickerbutton/dist/metadata.json +++ b/components/pickerbutton/dist/metadata.json @@ -13,6 +13,11 @@ ".spectrum-PickerButton-fill", ".spectrum-PickerButton-icon", ".spectrum-PickerButton-label", + ".spectrum-PickerButton:active", + ".spectrum-PickerButton:disabled", + ".spectrum-PickerButton:focus", + ".spectrum-PickerButton:focus-visible", + ".spectrum-PickerButton:hover", ".spectrum-PickerButton.is-focused", ".spectrum-PickerButton.is-keyboardFocused", ".spectrum-PickerButton.is-open", @@ -20,134 +25,638 @@ ".spectrum-PickerButton.spectrum-PickerButton--sizeL", ".spectrum-PickerButton.spectrum-PickerButton--sizeS", ".spectrum-PickerButton.spectrum-PickerButton--sizeXL", - ".spectrum-PickerButton.spectrum-PickerButton--uiicononly", - ".spectrum-PickerButton:active", - ".spectrum-PickerButton:disabled", - ".spectrum-PickerButton:focus", - ".spectrum-PickerButton:focus-visible", - ".spectrum-PickerButton:hover" - ], - "modifiers": [ - "--mod-picker-button-background-animation-duration", - "--mod-picker-button-background-color", - "--mod-picker-button-background-color-disabled", - "--mod-picker-button-background-color-down", - "--mod-picker-button-background-color-down-disabled", - "--mod-picker-button-background-color-down-quiet", - "--mod-picker-button-background-color-hover", - "--mod-picker-button-background-color-hover-disabled", - "--mod-picker-button-background-color-hover-quiet", - "--mod-picker-button-background-color-key-focus", - "--mod-picker-button-background-color-key-focus-quiet", - "--mod-picker-button-background-color-quiet", - "--mod-picker-button-border-color", - "--mod-picker-button-border-color-disabled", - "--mod-picker-button-border-color-quiet", - "--mod-picker-button-border-radius", - "--mod-picker-button-border-radius-rounded", - "--mod-picker-button-border-radius-rounded-sided", - "--mod-picker-button-border-radius-sided", - "--mod-picker-button-border-width", - "--mod-picker-button-fill-padding", - "--mod-picker-button-font-color", - "--mod-picker-button-font-color-disabled", - "--mod-picker-button-font-color-down", - "--mod-picker-button-font-color-down-disabled", - "--mod-picker-button-font-color-hover", - "--mod-picker-button-font-color-hover-disabled", - "--mod-picker-button-font-color-key-focus", - "--mod-picker-button-font-family", - "--mod-picker-button-font-size", - "--mod-picker-button-font-style", - "--mod-picker-button-font-weight", - "--mod-picker-button-gap", - "--mod-picker-button-height", - "--mod-picker-button-icon-color", - "--mod-picker-button-icon-color-disabled", - "--mod-picker-button-icon-color-down", - "--mod-picker-button-icon-color-down-disabled", - "--mod-picker-button-icon-color-hover", - "--mod-picker-button-icon-color-hover-disabled", - "--mod-picker-button-icon-color-key-focus", - "--mod-picker-button-label-padding", - "--mod-picker-button-padding", - "--mod-picker-button-width" - ], - "component": [ - "--spectrum-picker-button-background-animation-duration", - "--spectrum-picker-button-background-color", - "--spectrum-picker-button-background-color-down", - "--spectrum-picker-button-background-color-hover", - "--spectrum-picker-button-background-color-key-focus", - "--spectrum-picker-button-border-color", - "--spectrum-picker-button-border-radius", - "--spectrum-picker-button-border-radius-rounded", - "--spectrum-picker-button-border-radius-rounded-sided", - "--spectrum-picker-button-border-radius-sided", - "--spectrum-picker-button-border-width", - "--spectrum-picker-button-fill-padding", - "--spectrum-picker-button-font-color", - "--spectrum-picker-button-font-color-down", - "--spectrum-picker-button-font-color-hover", - "--spectrum-picker-button-font-color-key-focus", - "--spectrum-picker-button-font-family", - "--spectrum-picker-button-font-size", - "--spectrum-picker-button-font-style", - "--spectrum-picker-button-font-weight", - "--spectrum-picker-button-gap", - "--spectrum-picker-button-height", - "--spectrum-picker-button-icon-color", - "--spectrum-picker-button-icon-color-down", - "--spectrum-picker-button-icon-color-hover", - "--spectrum-picker-button-icon-color-key-focus", - "--spectrum-picker-button-label-padding", - "--spectrum-picker-button-padding", - "--spectrum-picker-button-width" - ], - "global": [ - "--spectrum-animation-duration-100", - "--spectrum-body-sans-serif-font-weight", - "--spectrum-component-height-100", - "--spectrum-component-height-200", - "--spectrum-component-height-300", - "--spectrum-component-height-75", - "--spectrum-corner-radius-200", - "--spectrum-corner-radius-75", - "--spectrum-default-font-style", - "--spectrum-disabled-background-color", - "--spectrum-disabled-content-color", - "--spectrum-field-edge-to-disclosure-icon-100", - "--spectrum-field-edge-to-disclosure-icon-200", - "--spectrum-field-edge-to-disclosure-icon-300", - "--spectrum-field-edge-to-disclosure-icon-75", - "--spectrum-font-size-100", - "--spectrum-font-size-200", - "--spectrum-font-size-300", - "--spectrum-font-size-75", - "--spectrum-gray-100", - "--spectrum-gray-200", - "--spectrum-neutral-content-color-default", - "--spectrum-neutral-content-color-down", - "--spectrum-neutral-content-color-hover", - "--spectrum-neutral-content-color-key-focus", - "--spectrum-sans-font-family-stack", - "--spectrum-spacing-75", - "--spectrum-text-to-visual-200", - "--spectrum-text-to-visual-300", - "--spectrum-text-to-visual-50" - ], - "system-theme": [ - "--system-picker-button-background-color", - "--system-picker-button-background-color-down", - "--system-picker-button-background-color-hover", - "--system-picker-button-background-color-key-focus", - "--system-picker-button-border-color", - "--system-picker-button-border-radius", - "--system-picker-button-border-radius-rounded-sided", - "--system-picker-button-border-radius-sided", - "--system-picker-button-border-width", - "--system-picker-button-padding" + ".spectrum-PickerButton.spectrum-PickerButton--uiicononly" ], - "passthroughs": [], - "high-contrast": [] + "modifiers": { + "mod-picker-button-background-color": { + "value": "var(--spectrum-picker-button-background-color)", + "description": "Defined in `.spectrum-PickerButton:hover`, `.spectrum-PickerButton.is-open, .spectrum-PickerButton:active`, `.spectrum-PickerButton.is-focused, .spectrum-PickerButton.is-keyboardFocused, .spectrum-PickerButton:focus, .spectrum-PickerButton:focus-visible`, `.spectrum-PickerButton:disabled`, `.spectrum-PickerButton.spectrum-PickerButton--quiet`.
Used by `.spectrum-PickerButton-fill`.
Defaults to `var(--spectrum-picker-button-background-color)`, if not set.", + "control": "color", + "category": "Modifier" + }, + "mod-picker-button-background-color-hover": { + "value": "var(--spectrum-picker-button-background-color-hover)", + "description": "Defined in `.spectrum-PickerButton:disabled`, `.spectrum-PickerButton.spectrum-PickerButton--quiet`.
Used by `--mod-picker-button-background-color`.
Defaults to `var(--spectrum-picker-button-background-color-hover)`, if not set.", + "control": "color", + "category": "Modifier" + }, + "mod-picker-button-font-color": { + "value": "var(--spectrum-picker-button-font-color)", + "description": "Defined in `.spectrum-PickerButton:hover`, `.spectrum-PickerButton.is-open, .spectrum-PickerButton:active`, `.spectrum-PickerButton.is-focused, .spectrum-PickerButton.is-keyboardFocused, .spectrum-PickerButton:focus, .spectrum-PickerButton:focus-visible`, `.spectrum-PickerButton:disabled`.
Used by `.spectrum-PickerButton-label`.
Defaults to `var(--spectrum-picker-button-font-color)`, if not set.", + "control": "color", + "category": "Modifier" + }, + "mod-picker-button-font-color-hover": { + "value": "var(--spectrum-picker-button-font-color-hover)", + "description": "Defined in `.spectrum-PickerButton:disabled`.
Used by `--mod-picker-button-font-color`.
Defaults to `var(--spectrum-picker-button-font-color-hover)`, if not set.", + "control": "color", + "category": "Modifier" + }, + "mod-picker-button-icon-color": { + "value": "var(--spectrum-picker-button-icon-color)", + "description": "Defined in `.spectrum-PickerButton:hover`, `.spectrum-PickerButton.is-open, .spectrum-PickerButton:active`, `.spectrum-PickerButton.is-focused, .spectrum-PickerButton.is-keyboardFocused, .spectrum-PickerButton:focus, .spectrum-PickerButton:focus-visible`, `.spectrum-PickerButton:disabled`.
Used by `.spectrum-PickerButton-icon`.
Defaults to `var(--spectrum-picker-button-icon-color)`, if not set.", + "control": "color", + "category": "Modifier" + }, + "mod-picker-button-icon-color-hover": { + "value": "var(--spectrum-picker-button-icon-color-hover)", + "description": "Defined in `.spectrum-PickerButton:disabled`.
Used by `--mod-picker-button-icon-color`.
Defaults to `var(--spectrum-picker-button-icon-color-hover)`, if not set.", + "control": "color", + "category": "Modifier" + }, + "mod-picker-button-background-color-down": { + "value": "var(--spectrum-picker-button-background-color-down)", + "description": "Defined in `.spectrum-PickerButton:disabled`, `.spectrum-PickerButton.spectrum-PickerButton--quiet`.
Used by `--mod-picker-button-background-color`.
Defaults to `var(--spectrum-picker-button-background-color-down)`, if not set.", + "control": "color", + "category": "Modifier" + }, + "mod-picker-button-font-color-down": { + "value": "var(--spectrum-picker-button-font-color-down)", + "description": "Defined in `.spectrum-PickerButton:disabled`.
Used by `--mod-picker-button-font-color`.
Defaults to `var(--spectrum-picker-button-font-color-down)`, if not set.", + "control": "color", + "category": "Modifier" + }, + "mod-picker-button-icon-color-down": { + "value": "var(--spectrum-picker-button-icon-color-down)", + "description": "Defined in `.spectrum-PickerButton:disabled`.
Used by `--mod-picker-button-icon-color`.
Defaults to `var(--spectrum-picker-button-icon-color-down)`, if not set.", + "control": "color", + "category": "Modifier" + }, + "mod-picker-button-background-color-key-focus": { + "value": "var(--spectrum-picker-button-background-color-key-focus)", + "description": "Defined in `.spectrum-PickerButton.spectrum-PickerButton--quiet`.
Used by `--mod-picker-button-background-color`.
Defaults to `var(--spectrum-picker-button-background-color-key-focus)`, if not set.", + "control": "color", + "category": "Modifier" + }, + "mod-picker-button-font-color-key-focus": { + "value": "var(--spectrum-picker-button-font-color-key-focus)", + "description": "Used by `--mod-picker-button-font-color`.
Defaults to `var(--spectrum-picker-button-font-color-key-focus)`, if not set.", + "control": "color", + "category": "Modifier" + }, + "mod-picker-button-icon-color-key-focus": { + "value": "var(--spectrum-picker-button-icon-color-key-focus)", + "description": "Used by `--mod-picker-button-icon-color`.
Defaults to `var(--spectrum-picker-button-icon-color-key-focus)`, if not set.", + "control": "color", + "category": "Modifier" + }, + "mod-picker-button-background-color-disabled": { + "value": "var(--spectrum-gray-100)", + "description": "Used by `--mod-picker-button-background-color`.
Defaults to `var(--spectrum-disabled-background-color)`, if not set.", + "control": "color", + "category": "Modifier" + }, + "mod-picker-button-background-color-hover-disabled": { + "value": "var(--spectrum-gray-100)", + "description": "Used by `--mod-picker-button-background-color-hover`.
Defaults to `var(--spectrum-disabled-background-color)`, if not set.", + "control": "color", + "category": "Modifier" + }, + "mod-picker-button-background-color-down-disabled": { + "value": "var(--spectrum-gray-100)", + "description": "Used by `--mod-picker-button-background-color-down`.
Defaults to `var(--spectrum-disabled-background-color)`, if not set.", + "control": "color", + "category": "Modifier" + }, + "mod-picker-button-border-color": { + "value": "var(--spectrum-picker-button-border-color)", + "description": "Defined in `.spectrum-PickerButton:disabled`, `.spectrum-PickerButton.spectrum-PickerButton--quiet`.
Used by `.spectrum-PickerButton-fill`.
Defaults to `var(--spectrum-picker-button-border-color)`, if not set.", + "control": "color", + "category": "Modifier" + }, + "mod-picker-button-border-color-disabled": { + "value": "var(--spectrum-gray-100)", + "description": "Used by `--mod-picker-button-border-color`.
Defaults to `var(--spectrum-disabled-background-color)`, if not set.", + "control": "color", + "category": "Modifier" + }, + "mod-picker-button-font-color-disabled": { + "value": "var(--spectrum-gray-400)", + "description": "Used by `--mod-picker-button-font-color`.
Defaults to `var(--spectrum-disabled-content-color)`, if not set.", + "control": "color", + "category": "Modifier" + }, + "mod-picker-button-font-color-hover-disabled": { + "value": "var(--spectrum-gray-400)", + "description": "Used by `--mod-picker-button-font-color-hover`.
Defaults to `var(--spectrum-disabled-content-color)`, if not set.", + "control": "color", + "category": "Modifier" + }, + "mod-picker-button-font-color-down-disabled": { + "value": "var(--spectrum-gray-400)", + "description": "Used by `--mod-picker-button-font-color-down`.
Defaults to `var(--spectrum-disabled-content-color)`, if not set.", + "control": "color", + "category": "Modifier" + }, + "mod-picker-button-icon-color-disabled": { + "value": "var(--spectrum-gray-400)", + "description": "Used by `--mod-picker-button-icon-color`.
Defaults to `var(--spectrum-disabled-content-color)`, if not set.", + "control": "color", + "category": "Modifier" + }, + "mod-picker-button-icon-color-hover-disabled": { + "value": "var(--spectrum-gray-400)", + "description": "Used by `--mod-picker-button-icon-color-hover`.
Defaults to `var(--spectrum-disabled-content-color)`, if not set.", + "control": "color", + "category": "Modifier" + }, + "mod-picker-button-icon-color-down-disabled": { + "value": "var(--spectrum-gray-400)", + "description": "Used by `--mod-picker-button-icon-color-down`.
Defaults to `var(--spectrum-disabled-content-color)`, if not set.", + "control": "color", + "category": "Modifier" + }, + "mod-picker-button-background-color-quiet": { + "description": "Used by `--mod-picker-button-background-color`.", + "control": "color", + "category": "Modifier" + }, + "mod-picker-button-background-color-hover-quiet": { + "description": "Used by `--mod-picker-button-background-color-hover`.", + "control": "color", + "category": "Modifier" + }, + "mod-picker-button-background-color-down-quiet": { + "description": "Used by `--mod-picker-button-background-color-down`.", + "control": "color", + "category": "Modifier" + }, + "mod-picker-button-background-color-key-focus-quiet": { + "description": "Used by `--mod-picker-button-background-color-key-focus`.", + "control": "color", + "category": "Modifier" + }, + "mod-picker-button-border-color-quiet": { + "description": "Used by `--mod-picker-button-border-color`.", + "control": "color", + "category": "Modifier" + }, + "mod-picker-button-width": { + "value": "var(--spectrum-picker-button-width)", + "description": "Used by `.spectrum-PickerButton`.
Defaults to `var(--spectrum-picker-button-width)`, if not set.", + "control": "text", + "category": "Modifier" + }, + "mod-picker-button-padding": { + "value": "var(--spectrum-picker-button-padding)", + "description": "Used by `.spectrum-PickerButton`, `.spectrum-PickerButton-fill`.
Defaults to `var(--spectrum-picker-button-padding)`, if not set.", + "control": "text", + "category": "Modifier" + }, + "mod-picker-button-height": { + "value": "var(--spectrum-picker-button-height)", + "description": "Used by `.spectrum-PickerButton.spectrum-PickerButton--uiicononly`.
Defaults to `var(--spectrum-picker-button-height)`, if not set.", + "control": "text", + "category": "Modifier" + }, + "mod-picker-button-label-padding": { + "value": "var(--spectrum-picker-button-label-padding)", + "description": "Used by `.spectrum-PickerButton-label`.
Defaults to `var(--spectrum-picker-button-label-padding)`, if not set.", + "control": "text", + "category": "Modifier" + }, + "mod-picker-button-font-family": { + "value": "var(--spectrum-picker-button-font-family)", + "description": "Used by `.spectrum-PickerButton-label`.
Defaults to `var(--spectrum-picker-button-font-family)`, if not set.", + "control": "text", + "category": "Modifier" + }, + "mod-picker-button-font-style": { + "value": "var(--spectrum-picker-button-font-style)", + "description": "Used by `.spectrum-PickerButton-label`.
Defaults to `var(--spectrum-picker-button-font-style)`, if not set.", + "control": "text", + "category": "Modifier" + }, + "mod-picker-button-font-weight": { + "value": "var(--spectrum-picker-button-font-weight)", + "description": "Used by `.spectrum-PickerButton-label`.
Defaults to `var(--spectrum-picker-button-font-weight)`, if not set.", + "control": "text", + "category": "Modifier" + }, + "mod-picker-button-font-size": { + "value": "var(--spectrum-picker-button-font-size)", + "description": "Used by `.spectrum-PickerButton-label`.
Defaults to `var(--spectrum-picker-button-font-size)`, if not set.", + "control": "text", + "category": "Modifier" + }, + "mod-picker-button-gap": { + "value": "var(--spectrum-picker-button-gap)", + "description": "Used by `.spectrum-PickerButton-fill`.
Defaults to `var(--spectrum-picker-button-gap)`, if not set.", + "control": "text", + "category": "Modifier" + }, + "mod-picker-button-border-width": { + "value": "var(--spectrum-picker-button-border-width)", + "description": "Used by `.spectrum-PickerButton-fill`.
Defaults to `var(--spectrum-picker-button-border-width)`, if not set.", + "control": "text", + "category": "Modifier" + }, + "mod-picker-button-fill-padding": { + "value": "var(--spectrum-picker-button-fill-padding)", + "description": "Used by `.spectrum-PickerButton-fill`.
Defaults to `var(--spectrum-picker-button-fill-padding)`, if not set.", + "control": "text", + "category": "Modifier" + }, + "mod-picker-button-border-radius": { + "value": "var(--spectrum-picker-button-border-radius)", + "description": "Used by `.spectrum-PickerButton-fill`.
Defaults to `var(--spectrum-picker-button-border-radius)`, if not set.", + "control": "text", + "category": "Modifier" + }, + "mod-picker-button-background-animation-duration": { + "value": "var(--spectrum-picker-button-background-animation-duration)", + "description": "Used by `.spectrum-PickerButton-fill`.
Defaults to `var(--spectrum-picker-button-background-animation-duration)`, if not set.", + "control": "text", + "category": "Modifier" + }, + "mod-picker-button-border-radius-sided": { + "value": "var(--spectrum-picker-button-border-radius-sided)", + "description": "Used by `.spectrum-PickerButton--right .spectrum-PickerButton-fill`, `.spectrum-PickerButton--left .spectrum-PickerButton-fill`.
Defaults to `var(--spectrum-picker-button-border-radius-sided)`, if not set.", + "control": "text", + "category": "Modifier" + }, + "mod-picker-button-border-radius-rounded-sided": { + "value": "var(--spectrum-picker-button-border-radius-rounded-sided)", + "description": "Used by `.spectrum-PickerButton--right.spectrum-PickerButton--rounded .spectrum-PickerButton-fill`, `.spectrum-PickerButton--left.spectrum-PickerButton--rounded .spectrum-PickerButton-fill`.
Defaults to `var(--spectrum-picker-button-border-radius-rounded-sided)`, if not set.", + "control": "text", + "category": "Modifier" + }, + "mod-picker-button-border-radius-rounded": { + "value": "var(--spectrum-picker-button-border-radius-rounded)", + "description": "Used by `.spectrum-PickerButton--rounded .spectrum-PickerButton-fill`.
Defaults to `var(--spectrum-picker-button-border-radius-rounded)`, if not set.", + "control": "text", + "category": "Modifier" + } + }, + "component": { + "spectrum-picker-button-height": { + "description": "Defined in `.spectrum-PickerButton`, `.spectrum-PickerButton.spectrum-PickerButton--sizeS`, `.spectrum-PickerButton.spectrum-PickerButton--sizeL`, `.spectrum-PickerButton.spectrum-PickerButton--sizeXL`.
Used by `.spectrum-PickerButton.spectrum-PickerButton--uiicononly`.", + "control": "text", + "category": "Component" + }, + "spectrum-picker-button-width": { + "description": "Defined in `.spectrum-PickerButton`, `.spectrum-PickerButton.spectrum-PickerButton--sizeS`, `.spectrum-PickerButton.spectrum-PickerButton--sizeL`, `.spectrum-PickerButton.spectrum-PickerButton--sizeXL`.
Used by `.spectrum-PickerButton`.", + "control": "text", + "category": "Component" + }, + "spectrum-picker-button-gap": { + "description": "Defined in `.spectrum-PickerButton`.
Used by `.spectrum-PickerButton-fill`.", + "control": "text", + "category": "Component" + }, + "spectrum-picker-button-label-padding": { + "description": "Defined in `.spectrum-PickerButton`, `.spectrum-PickerButton.spectrum-PickerButton--sizeS`, `.spectrum-PickerButton.spectrum-PickerButton--sizeL`, `.spectrum-PickerButton.spectrum-PickerButton--sizeXL`.
Used by `.spectrum-PickerButton-label`.", + "control": "text", + "category": "Component" + }, + "spectrum-picker-button-fill-padding": { + "description": "Defined in `.spectrum-PickerButton`, `.spectrum-PickerButton.spectrum-PickerButton--sizeS`, `.spectrum-PickerButton.spectrum-PickerButton--sizeL`, `.spectrum-PickerButton.spectrum-PickerButton--sizeXL`.
Used by `.spectrum-PickerButton-fill`.", + "control": "text", + "category": "Component" + }, + "spectrum-picker-button-icon-color": { + "description": "Defined in `.spectrum-PickerButton`.
Used by `.spectrum-PickerButton-icon`.", + "control": "color", + "category": "Component" + }, + "spectrum-picker-button-icon-color-hover": { + "description": "Defined in `.spectrum-PickerButton`.
Used by `--mod-picker-button-icon-color`.", + "control": "color", + "category": "Component" + }, + "spectrum-picker-button-icon-color-down": { + "description": "Defined in `.spectrum-PickerButton`.
Used by `--mod-picker-button-icon-color`.", + "control": "color", + "category": "Component" + }, + "spectrum-picker-button-icon-color-key-focus": { + "description": "Defined in `.spectrum-PickerButton`.
Used by `--mod-picker-button-icon-color`.", + "control": "color", + "category": "Component" + }, + "spectrum-picker-button-font-color": { + "description": "Defined in `.spectrum-PickerButton`.
Used by `.spectrum-PickerButton-label`.", + "control": "color", + "category": "Component" + }, + "spectrum-picker-button-font-color-hover": { + "description": "Defined in `.spectrum-PickerButton`.
Used by `--mod-picker-button-font-color`.", + "control": "color", + "category": "Component" + }, + "spectrum-picker-button-font-color-down": { + "description": "Defined in `.spectrum-PickerButton`.
Used by `--mod-picker-button-font-color`.", + "control": "color", + "category": "Component" + }, + "spectrum-picker-button-font-color-key-focus": { + "description": "Defined in `.spectrum-PickerButton`.
Used by `--mod-picker-button-font-color`.", + "control": "color", + "category": "Component" + }, + "spectrum-picker-button-font-family": { + "description": "Defined in `.spectrum-PickerButton`.
Used by `.spectrum-PickerButton-label`.", + "control": "text", + "category": "Component" + }, + "spectrum-picker-button-font-style": { + "description": "Defined in `.spectrum-PickerButton`.
Used by `.spectrum-PickerButton-label`.", + "control": "text", + "category": "Component" + }, + "spectrum-picker-button-font-weight": { + "description": "Defined in `.spectrum-PickerButton`.
Used by `.spectrum-PickerButton-label`.", + "control": "text", + "category": "Component" + }, + "spectrum-picker-button-font-size": { + "description": "Defined in `.spectrum-PickerButton`, `.spectrum-PickerButton.spectrum-PickerButton--sizeS`, `.spectrum-PickerButton.spectrum-PickerButton--sizeL`, `.spectrum-PickerButton.spectrum-PickerButton--sizeXL`.
Used by `.spectrum-PickerButton-label`.", + "control": "text", + "category": "Component" + }, + "spectrum-picker-button-border-radius-rounded": { + "description": "Defined in `.spectrum-PickerButton`.
Used by `.spectrum-PickerButton--rounded .spectrum-PickerButton-fill`.", + "control": "text", + "category": "Component" + }, + "spectrum-picker-button-background-animation-duration": { + "description": "Defined in `.spectrum-PickerButton`.
Used by `.spectrum-PickerButton-fill`.", + "control": "text", + "category": "Component" + }, + "spectrum-picker-button-background-color-hover": { + "description": "Defined in `.spectrum-PickerButton`.
Used by `--mod-picker-button-background-color`.", + "control": "color", + "category": "Component" + }, + "spectrum-picker-button-background-color-down": { + "description": "Defined in `.spectrum-PickerButton`.
Used by `--mod-picker-button-background-color`.", + "control": "color", + "category": "Component" + }, + "spectrum-picker-button-background-color-key-focus": { + "description": "Defined in `.spectrum-PickerButton`.
Used by `--mod-picker-button-background-color`.", + "control": "color", + "category": "Component" + }, + "spectrum-picker-button-padding": { + "description": "Defined in `.spectrum-PickerButton`.
Used by `.spectrum-PickerButton`, `.spectrum-PickerButton-fill`.", + "control": "text", + "category": "Component" + }, + "spectrum-picker-button-background-color": { + "description": "Defined in `.spectrum-PickerButton`.
Used by `.spectrum-PickerButton-fill`.", + "control": "color", + "category": "Component" + }, + "spectrum-picker-button-border-color": { + "description": "Defined in `.spectrum-PickerButton`.
Used by `.spectrum-PickerButton-fill`.", + "control": "color", + "category": "Component" + }, + "spectrum-picker-button-border-width": { + "description": "Defined in `.spectrum-PickerButton`.
Used by `.spectrum-PickerButton-fill`.", + "control": "text", + "category": "Component" + }, + "spectrum-picker-button-border-radius": { + "description": "Defined in `.spectrum-PickerButton`.
Used by `.spectrum-PickerButton-fill`.", + "control": "text", + "category": "Component" + }, + "spectrum-picker-button-border-radius-sided": { + "description": "Defined in `.spectrum-PickerButton`.
Used by `.spectrum-PickerButton--right .spectrum-PickerButton-fill`, `.spectrum-PickerButton--left .spectrum-PickerButton-fill`.", + "control": "text", + "category": "Component" + }, + "spectrum-picker-button-border-radius-rounded-sided": { + "description": "Defined in `.spectrum-PickerButton`.
Used by `.spectrum-PickerButton--right.spectrum-PickerButton--rounded .spectrum-PickerButton-fill`, `.spectrum-PickerButton--left.spectrum-PickerButton--rounded .spectrum-PickerButton-fill`.", + "control": "text", + "category": "Component" + } + }, + "global": { + "spectrum-gray-100": { + "value": "light-dark(rgb(233, 233, 233), rgb(44, 44, 44))", + "description": "Used by `--system-picker-button-background-color`.", + "control": "text", + "category": "Global" + }, + "spectrum-gray-200": { + "value": "light-dark(rgb(225, 225, 225), rgb(50, 50, 50))", + "description": "Used by `--system-picker-button-background-color-hover`, `--system-picker-button-background-color-down`, `--system-picker-button-background-color-key-focus`.", + "control": "text", + "category": "Global" + }, + "spectrum-corner-radius-75": { + "value": "4px", + "description": "Used by `--system-picker-button-border-radius`, `--system-picker-button-border-radius-sided`.", + "control": "text", + "category": "Global" + }, + "spectrum-corner-radius-200": { + "value": "10px", + "description": "Used by `--system-picker-button-border-radius-rounded-sided`, `--spectrum-picker-button-border-radius-rounded`.", + "control": "text", + "category": "Global" + }, + "spectrum-component-height-100": { + "value": "32px", + "description": "Used by `--spectrum-picker-button-height`, `--spectrum-picker-button-width`.", + "control": "text", + "category": "Global" + }, + "spectrum-text-to-visual-50": { + "value": "5px", + "description": "Used by `--spectrum-picker-button-gap`, `--spectrum-picker-button-label-padding`.", + "control": "text", + "category": "Global" + }, + "spectrum-field-edge-to-disclosure-icon-100": { + "value": "11px", + "description": "Used by `--spectrum-picker-button-fill-padding`.", + "control": "text", + "category": "Global" + }, + "spectrum-neutral-content-color-default": { + "value": "var(--spectrum-gray-800)", + "description": "Used by `--spectrum-picker-button-icon-color`, `--spectrum-picker-button-font-color`.", + "control": "color", + "category": "Global" + }, + "spectrum-neutral-content-color-hover": { + "value": "var(--spectrum-gray-900)", + "description": "Used by `--spectrum-picker-button-icon-color-hover`, `--spectrum-picker-button-font-color-hover`.", + "control": "color", + "category": "Global" + }, + "spectrum-neutral-content-color-down": { + "value": "var(--spectrum-gray-900)", + "description": "Used by `--spectrum-picker-button-icon-color-down`, `--spectrum-picker-button-font-color-down`.", + "control": "color", + "category": "Global" + }, + "spectrum-neutral-content-color-key-focus": { + "value": "var(--spectrum-gray-900)", + "description": "Used by `--spectrum-picker-button-icon-color-key-focus`, `--spectrum-picker-button-font-color-key-focus`.", + "control": "color", + "category": "Global" + }, + "spectrum-sans-font-family-stack": { + "description": "Used by `--spectrum-picker-button-font-family`.", + "control": "text", + "category": "Global" + }, + "spectrum-default-font-style": { + "value": "normal", + "description": "Used by `--spectrum-picker-button-font-style`.", + "control": "text", + "category": "Global" + }, + "spectrum-body-sans-serif-font-weight": { + "value": "400", + "description": "Used by `--spectrum-picker-button-font-weight`.", + "control": "text", + "category": "Global" + }, + "spectrum-font-size-100": { + "value": "14px", + "description": "Used by `--spectrum-picker-button-font-size`.", + "control": "text", + "category": "Global" + }, + "spectrum-animation-duration-100": { + "description": "Used by `--spectrum-picker-button-background-animation-duration`.", + "control": "text", + "category": "Global" + }, + "spectrum-disabled-background-color": { + "value": "var(--spectrum-gray-100)", + "description": "Used by `--mod-picker-button-background-color`, `--mod-picker-button-background-color-hover`, `--mod-picker-button-background-color-down`, `--mod-picker-button-border-color`.", + "control": "color", + "category": "Global" + }, + "spectrum-disabled-content-color": { + "value": "var(--spectrum-gray-400)", + "description": "Used by `--mod-picker-button-font-color`, `--mod-picker-button-font-color-hover`, `--mod-picker-button-font-color-down`, `--mod-picker-button-icon-color`, `--mod-picker-button-icon-color-hover`, `--mod-picker-button-icon-color-down`.", + "control": "color", + "category": "Global" + }, + "spectrum-component-height-75": { + "value": "24px", + "description": "Used by `--spectrum-picker-button-height`, `--spectrum-picker-button-width`.", + "control": "text", + "category": "Global" + }, + "spectrum-spacing-75": { + "value": "4px", + "description": "Used by `--spectrum-picker-button-label-padding`.", + "control": "text", + "category": "Global" + }, + "spectrum-font-size-75": { + "value": "12px", + "description": "Used by `--spectrum-picker-button-font-size`.", + "control": "text", + "category": "Global" + }, + "spectrum-field-edge-to-disclosure-icon-75": { + "value": "7px", + "description": "Used by `--spectrum-picker-button-fill-padding`.", + "control": "text", + "category": "Global" + }, + "spectrum-component-height-200": { + "value": "40px", + "description": "Used by `--spectrum-picker-button-height`, `--spectrum-picker-button-width`.", + "control": "text", + "category": "Global" + }, + "spectrum-text-to-visual-200": { + "value": "7px", + "description": "Used by `--spectrum-picker-button-label-padding`.", + "control": "text", + "category": "Global" + }, + "spectrum-font-size-200": { + "value": "16px", + "description": "Used by `--spectrum-picker-button-font-size`.", + "control": "text", + "category": "Global" + }, + "spectrum-field-edge-to-disclosure-icon-200": { + "value": "14px", + "description": "Used by `--spectrum-picker-button-fill-padding`.", + "control": "text", + "category": "Global" + }, + "spectrum-component-height-300": { + "value": "48px", + "description": "Used by `--spectrum-picker-button-height`, `--spectrum-picker-button-width`.", + "control": "text", + "category": "Global" + }, + "spectrum-text-to-visual-300": { + "value": "8px", + "description": "Used by `--spectrum-picker-button-label-padding`.", + "control": "text", + "category": "Global" + }, + "spectrum-font-size-300": { + "value": "18px", + "description": "Used by `--spectrum-picker-button-font-size`.", + "control": "text", + "category": "Global" + }, + "spectrum-field-edge-to-disclosure-icon-300": { + "value": "17px", + "description": "Used by `--spectrum-picker-button-fill-padding`.", + "control": "text", + "category": "Global" + } + }, + "system-theme": { + "system-picker-button-background-color": { + "description": "Defined in `.spectrum`.
Used by `--spectrum-picker-button-background-color`.", + "control": "color" + }, + "system-picker-button-background-color-hover": { + "description": "Defined in `.spectrum`.
Used by `--spectrum-picker-button-background-color-hover`.", + "control": "color" + }, + "system-picker-button-background-color-down": { + "description": "Defined in `.spectrum`.
Used by `--spectrum-picker-button-background-color-down`.", + "control": "color" + }, + "system-picker-button-background-color-key-focus": { + "description": "Defined in `.spectrum`.
Used by `--spectrum-picker-button-background-color-key-focus`.", + "control": "color" + }, + "system-picker-button-border-color": { + "description": "Defined in `.spectrum`.
Used by `--spectrum-picker-button-border-color`.", + "control": "color" + }, + "system-picker-button-border-radius": { + "description": "Defined in `.spectrum`.
Used by `--spectrum-picker-button-border-radius`.", + "control": "text" + }, + "system-picker-button-border-radius-rounded-sided": { + "description": "Defined in `.spectrum`.
Used by `--spectrum-picker-button-border-radius-rounded-sided`.", + "control": "text" + }, + "system-picker-button-border-radius-sided": { + "description": "Defined in `.spectrum`.
Used by `--spectrum-picker-button-border-radius-sided`.", + "control": "text" + }, + "system-picker-button-border-width": { + "description": "Defined in `.spectrum`.
Used by `--spectrum-picker-button-border-width`.", + "control": "text" + }, + "system-picker-button-padding": { + "description": "Defined in `.spectrum`.
Used by `--spectrum-picker-button-padding`.", + "control": "text" + } + }, + "passthroughs": {}, + "high-contrast": {} } diff --git a/components/pickerbutton/stories/pickerbutton.stories.js b/components/pickerbutton/stories/pickerbutton.stories.js index c01a0f00eec..46703466e65 100644 --- a/components/pickerbutton/stories/pickerbutton.stories.js +++ b/components/pickerbutton/stories/pickerbutton.stories.js @@ -2,11 +2,13 @@ import { default as Icon } from "@spectrum-css/icon/stories/icon.stories.js"; import { Sizes } from "@spectrum-css/preview/decorators"; import { disableDefaultModes } from "@spectrum-css/preview/modes"; import { isDisabled, isFocused, isOpen, isQuiet, size } from "@spectrum-css/preview/types"; -import metadata from "../dist/metadata.json"; -import packageJson from "../package.json"; import { PickerGroup } from "./pickerbutton.test.js"; import { CustomIconTemplate, Template } from "./template.js"; +// Local assets to render the component styles and structure +import metadata from "../dist/metadata.json"; +import packageJson from "../package.json"; + /** * The picker button component is used as a dropdown trigger within other components such as [combobox](?path=/docs/components-combobox--docs). */ @@ -87,6 +89,7 @@ export default { parameters: { packageJson, metadata, + cssprops: metadata.modifiers, }, }; diff --git a/components/pickerbutton/stories/template.js b/components/pickerbutton/stories/template.js index 3df4f85b636..47472844720 100644 --- a/components/pickerbutton/stories/template.js +++ b/components/pickerbutton/stories/template.js @@ -14,7 +14,7 @@ import "../themes/express.css"; export const Template = ({ rootClass = "spectrum-PickerButton", - id = getRandomId("pickerbutton"), + id = getRandomId("picker-button"), size = "m", label, position, diff --git a/components/popover/dist/metadata.json b/components/popover/dist/metadata.json index 234562ed9ae..0dd81fbe583 100644 --- a/components/popover/dist/metadata.json +++ b/components/popover/dist/metadata.json @@ -98,58 +98,277 @@ "[dir=\"rtl\"] .spectrum-Popover--withTip.spectrum-Popover--start-bottom .spectrum-Popover-tip", "[dir=\"rtl\"] .spectrum-Popover--withTip.spectrum-Popover--start-top .spectrum-Popover-tip" ], - "modifiers": [ - "--mod-overlay-animation-duration", - "--mod-overlay-animation-duration-opened", - "--mod-popover-animation-distance", - "--mod-popover-background-color", - "--mod-popover-border-color", - "--mod-popover-border-width", - "--mod-popover-content-area-spacing-vertical", - "--mod-popover-corner-radius", - "--mod-popover-filter", - "--mod-popover-pointer-edge-spacing", - "--mod-popover-pointer-height", - "--mod-popover-pointer-width", - "--mod-popover-shadow-blur", - "--mod-popover-shadow-color", - "--mod-popover-shadow-horizontal", - "--mod-popover-shadow-vertical" - ], - "component": [ - "--spectrum-popover-animation-distance", - "--spectrum-popover-background-color", - "--spectrum-popover-border-color", - "--spectrum-popover-border-width", - "--spectrum-popover-content-area-spacing-vertical", - "--spectrum-popover-corner-radius", - "--spectrum-popover-filter", - "--spectrum-popover-pointer-edge-offset", - "--spectrum-popover-pointer-edge-spacing", - "--spectrum-popover-pointer-height", - "--spectrum-popover-pointer-width", - "--spectrum-popover-shadow-blur", - "--spectrum-popover-shadow-color", - "--spectrum-popover-shadow-horizontal", - "--spectrum-popover-shadow-vertical", - "--spectrum-popover-tip-height", - "--spectrum-popover-tip-width", - "--spectrum-popover-top-to-content-area" - ], - "global": [ - "--spectrum-animation-duration-0", - "--spectrum-animation-duration-100", - "--spectrum-background-layer-2-color", - "--spectrum-border-width-100", - "--spectrum-corner-radius-100", - "--spectrum-drop-shadow-blur", - "--spectrum-drop-shadow-color", - "--spectrum-drop-shadow-x", - "--spectrum-drop-shadow-y", - "--spectrum-gray-400", - "--spectrum-spacing-100" - ], - "system-theme": ["--system-popover-border-width"], - "passthroughs": [], - "high-contrast": ["--highcontrast-popover-border-color"] + "modifiers": { + "mod-overlay-animation-duration": { + "value": "var(--spectrum-animation-duration-100, 0.13s)", + "description": "Used by `.spectrum-Popover`.
Defaults to `var(--spectrum-animation-duration-100, 0.13s)`, if not set.", + "control": "text", + "category": "Modifier" + }, + "mod-overlay-animation-duration-opened": { + "value": "var(--spectrum-animation-duration-0, 0s)", + "description": "Used by `.spectrum-Popover.is-open`.
Defaults to `var(--spectrum-animation-duration-0, 0s)`, if not set.", + "control": "text", + "category": "Modifier" + }, + "mod-popover-shadow-horizontal": { + "value": "var(--spectrum-popover-shadow-horizontal)", + "description": "Used by `--spectrum-popover-filter`.
Defaults to `var(--spectrum-popover-shadow-horizontal)`, if not set.", + "control": "text", + "category": "Modifier" + }, + "mod-popover-shadow-vertical": { + "value": "var(--spectrum-popover-shadow-vertical)", + "description": "Used by `--spectrum-popover-filter`.
Defaults to `var(--spectrum-popover-shadow-vertical)`, if not set.", + "control": "text", + "category": "Modifier" + }, + "mod-popover-shadow-blur": { + "value": "var(--spectrum-popover-shadow-blur)", + "description": "Used by `--spectrum-popover-filter`.
Defaults to `var(--spectrum-popover-shadow-blur)`, if not set.", + "control": "text", + "category": "Modifier" + }, + "mod-popover-shadow-color": { + "value": "var(--spectrum-popover-shadow-color)", + "description": "Used by `--spectrum-popover-filter`.
Defaults to `var(--spectrum-popover-shadow-color)`, if not set.", + "control": "color", + "category": "Modifier" + }, + "mod-popover-content-area-spacing-vertical": { + "value": "var(--spectrum-popover-content-area-spacing-vertical)", + "description": "Used by `.spectrum-Popover`.
Defaults to `var(--spectrum-popover-content-area-spacing-vertical)`, if not set.", + "control": "text", + "category": "Modifier" + }, + "mod-popover-corner-radius": { + "value": "var(--spectrum-popover-corner-radius)", + "description": "Used by `.spectrum-Popover`.
Defaults to `var(--spectrum-popover-corner-radius)`, if not set.", + "control": "text", + "category": "Modifier" + }, + "mod-popover-border-color": { + "value": "var(--spectrum-popover-border-color)", + "description": "Used by `.spectrum-Popover`, `.spectrum-Popover.spectrum-Popover--withTip .spectrum-Popover-tip .spectrum-Popover-tip-triangle`.
Defaults to `var(--spectrum-popover-border-color)`, if not set.", + "control": "color", + "category": "Modifier" + }, + "mod-popover-border-width": { + "value": "var(--spectrum-popover-border-width)", + "description": "Used by `.spectrum-Popover`, `.spectrum-Popover.spectrum-Popover--withTip .spectrum-Popover-tip .spectrum-Popover-tip-triangle`, `.spectrum-Popover--top-end.spectrum-Popover--withTip, .spectrum-Popover--top-left.spectrum-Popover--withTip, .spectrum-Popover--top-right.spectrum-Popover--withTip, .spectrum-Popover--top-start.spectrum-Popover--withTip, .spectrum-Popover--top.spectrum-Popover--withTip`, `.spectrum-Popover--bottom-end.spectrum-Popover--withTip, .spectrum-Popover--bottom-left.spectrum-Popover--withTip, .spectrum-Popover--bottom-right.spectrum-Popover--withTip, .spectrum-Popover--bottom-start.spectrum-Popover--withTip, .spectrum-Popover--bottom.spectrum-Popover--withTip`, `.spectrum-Popover--right-bottom.spectrum-Popover--withTip, .spectrum-Popover--right-top.spectrum-Popover--withTip, .spectrum-Popover--right.spectrum-Popover--withTip`, `.spectrum-Popover--left-bottom.spectrum-Popover--withTip, .spectrum-Popover--left-top.spectrum-Popover--withTip, .spectrum-Popover--left.spectrum-Popover--withTip`, `.spectrum-Popover--start-bottom.spectrum-Popover--withTip, .spectrum-Popover--start-top.spectrum-Popover--withTip, .spectrum-Popover--start.spectrum-Popover--withTip`, `.spectrum-Popover--end-bottom.spectrum-Popover--withTip, .spectrum-Popover--end-top.spectrum-Popover--withTip, .spectrum-Popover--end.spectrum-Popover--withTip`.
Defaults to `var(--spectrum-popover-border-width)`, if not set.", + "control": "text", + "category": "Modifier" + }, + "mod-popover-background-color": { + "value": "var(--spectrum-popover-background-color)", + "description": "Used by `.spectrum-Popover`, `.spectrum-Popover.spectrum-Popover--withTip .spectrum-Popover-tip .spectrum-Popover-tip-triangle`.
Defaults to `var(--spectrum-popover-background-color)`, if not set.", + "control": "color", + "category": "Modifier" + }, + "mod-popover-filter": { + "value": "var(--spectrum-popover-filter)", + "description": "Defined in `.spectrum-Popover *`.
Used by `.spectrum-Popover`.
Defaults to `var(--spectrum-popover-filter)`, if not set.", + "control": "text", + "category": "Modifier" + }, + "mod-popover-pointer-height": { + "value": "var(--spectrum-popover-pointer-height)", + "description": "Used by `.spectrum-Popover--top-end.spectrum-Popover--withTip, .spectrum-Popover--top-left.spectrum-Popover--withTip, .spectrum-Popover--top-right.spectrum-Popover--withTip, .spectrum-Popover--top-start.spectrum-Popover--withTip, .spectrum-Popover--top.spectrum-Popover--withTip`, `.spectrum-Popover--bottom-end.spectrum-Popover--withTip, .spectrum-Popover--bottom-left.spectrum-Popover--withTip, .spectrum-Popover--bottom-right.spectrum-Popover--withTip, .spectrum-Popover--bottom-start.spectrum-Popover--withTip, .spectrum-Popover--bottom.spectrum-Popover--withTip`, `.spectrum-Popover--withTip.spectrum-Popover .spectrum-Popover-tip, .spectrum-Popover--withTip.spectrum-Popover--bottom .spectrum-Popover-tip, .spectrum-Popover--withTip.spectrum-Popover--bottom-end .spectrum-Popover-tip, .spectrum-Popover--withTip.spectrum-Popover--bottom-left .spectrum-Popover-tip, .spectrum-Popover--withTip.spectrum-Popover--bottom-right .spectrum-Popover-tip, .spectrum-Popover--withTip.spectrum-Popover--bottom-start .spectrum-Popover-tip, .spectrum-Popover--withTip.spectrum-Popover--top .spectrum-Popover-tip, .spectrum-Popover--withTip.spectrum-Popover--top-end .spectrum-Popover-tip, .spectrum-Popover--withTip.spectrum-Popover--top-left .spectrum-Popover-tip, .spectrum-Popover--withTip.spectrum-Popover--top-right .spectrum-Popover-tip, .spectrum-Popover--withTip.spectrum-Popover--top-start .spectrum-Popover-tip`, `.spectrum-Popover--withTip.spectrum-Popover--end .spectrum-Popover-tip, .spectrum-Popover--withTip.spectrum-Popover--end-bottom .spectrum-Popover-tip, .spectrum-Popover--withTip.spectrum-Popover--end-top .spectrum-Popover-tip, .spectrum-Popover--withTip.spectrum-Popover--left .spectrum-Popover-tip, .spectrum-Popover--withTip.spectrum-Popover--left-bottom .spectrum-Popover-tip, .spectrum-Popover--withTip.spectrum-Popover--left-top .spectrum-Popover-tip, .spectrum-Popover--withTip.spectrum-Popover--right .spectrum-Popover-tip, .spectrum-Popover--withTip.spectrum-Popover--right-bottom .spectrum-Popover-tip, .spectrum-Popover--withTip.spectrum-Popover--right-top .spectrum-Popover-tip, .spectrum-Popover--withTip.spectrum-Popover--start .spectrum-Popover-tip, .spectrum-Popover--withTip.spectrum-Popover--start-bottom .spectrum-Popover-tip, .spectrum-Popover--withTip.spectrum-Popover--start-top .spectrum-Popover-tip`.
Defaults to `var(--spectrum-popover-pointer-height)`, if not set.", + "control": "text", + "category": "Modifier" + }, + "mod-popover-animation-distance": { + "value": "var(--spectrum-popover-animation-distance)", + "description": "Used by `.spectrum-Popover--top-end.is-open, .spectrum-Popover--top-left.is-open, .spectrum-Popover--top-right.is-open, .spectrum-Popover--top-start.is-open, .spectrum-Popover--top.is-open`, `.spectrum-Popover--bottom-end.is-open, .spectrum-Popover--bottom-left.is-open, .spectrum-Popover--bottom-right.is-open, .spectrum-Popover--bottom-start.is-open, .spectrum-Popover--bottom.is-open`, `.spectrum-Popover--right-bottom.is-open, .spectrum-Popover--right-top.is-open, .spectrum-Popover--right.is-open`, `.spectrum-Popover--left-bottom.is-open, .spectrum-Popover--left-top.is-open, .spectrum-Popover--left.is-open`, `.spectrum-Popover--start-bottom.is-open, .spectrum-Popover--start-top.is-open, .spectrum-Popover--start.is-open`, `.spectrum-Popover--start-bottom.is-open:dir(rtl), .spectrum-Popover--start-top.is-open:dir(rtl), .spectrum-Popover--start.is-open:dir(rtl), [dir=\"rtl\"] .spectrum-Popover--start-bottom.is-open, [dir=\"rtl\"] .spectrum-Popover--start-top.is-open, [dir=\"rtl\"] .spectrum-Popover--start.is-open`, `.spectrum-Popover--end-bottom.is-open, .spectrum-Popover--end-top.is-open, .spectrum-Popover--end.is-open`, `.spectrum-Popover--end-bottom.is-open:dir(rtl), .spectrum-Popover--end-top.is-open:dir(rtl), .spectrum-Popover--end.is-open:dir(rtl), [dir=\"rtl\"] .spectrum-Popover--end-bottom.is-open, [dir=\"rtl\"] .spectrum-Popover--end-top.is-open, [dir=\"rtl\"] .spectrum-Popover--end.is-open`.
Defaults to `var(--spectrum-popover-animation-distance)`, if not set.", + "control": "text", + "category": "Modifier" + }, + "mod-popover-pointer-width": { + "value": "var(--spectrum-popover-pointer-width)", + "description": "Used by `.spectrum-Popover--right-bottom.spectrum-Popover--withTip, .spectrum-Popover--right-top.spectrum-Popover--withTip, .spectrum-Popover--right.spectrum-Popover--withTip`, `.spectrum-Popover--left-bottom.spectrum-Popover--withTip, .spectrum-Popover--left-top.spectrum-Popover--withTip, .spectrum-Popover--left.spectrum-Popover--withTip`, `.spectrum-Popover--start-bottom.spectrum-Popover--withTip, .spectrum-Popover--start-top.spectrum-Popover--withTip, .spectrum-Popover--start.spectrum-Popover--withTip`, `.spectrum-Popover--end-bottom.spectrum-Popover--withTip, .spectrum-Popover--end-top.spectrum-Popover--withTip, .spectrum-Popover--end.spectrum-Popover--withTip`, `.spectrum-Popover--withTip.spectrum-Popover .spectrum-Popover-tip, .spectrum-Popover--withTip.spectrum-Popover--bottom .spectrum-Popover-tip, .spectrum-Popover--withTip.spectrum-Popover--bottom-end .spectrum-Popover-tip, .spectrum-Popover--withTip.spectrum-Popover--bottom-left .spectrum-Popover-tip, .spectrum-Popover--withTip.spectrum-Popover--bottom-right .spectrum-Popover-tip, .spectrum-Popover--withTip.spectrum-Popover--bottom-start .spectrum-Popover-tip, .spectrum-Popover--withTip.spectrum-Popover--top .spectrum-Popover-tip, .spectrum-Popover--withTip.spectrum-Popover--top-end .spectrum-Popover-tip, .spectrum-Popover--withTip.spectrum-Popover--top-left .spectrum-Popover-tip, .spectrum-Popover--withTip.spectrum-Popover--top-right .spectrum-Popover-tip, .spectrum-Popover--withTip.spectrum-Popover--top-start .spectrum-Popover-tip`, `.spectrum-Popover--withTip.spectrum-Popover--end .spectrum-Popover-tip, .spectrum-Popover--withTip.spectrum-Popover--end-bottom .spectrum-Popover-tip, .spectrum-Popover--withTip.spectrum-Popover--end-top .spectrum-Popover-tip, .spectrum-Popover--withTip.spectrum-Popover--left .spectrum-Popover-tip, .spectrum-Popover--withTip.spectrum-Popover--left-bottom .spectrum-Popover-tip, .spectrum-Popover--withTip.spectrum-Popover--left-top .spectrum-Popover-tip, .spectrum-Popover--withTip.spectrum-Popover--right .spectrum-Popover-tip, .spectrum-Popover--withTip.spectrum-Popover--right-bottom .spectrum-Popover-tip, .spectrum-Popover--withTip.spectrum-Popover--right-top .spectrum-Popover-tip, .spectrum-Popover--withTip.spectrum-Popover--start .spectrum-Popover-tip, .spectrum-Popover--withTip.spectrum-Popover--start-bottom .spectrum-Popover-tip, .spectrum-Popover--withTip.spectrum-Popover--start-top .spectrum-Popover-tip`.
Defaults to `var(--spectrum-popover-pointer-width)`, if not set.", + "control": "text", + "category": "Modifier" + }, + "mod-popover-pointer-edge-spacing": { + "value": "var(--spectrum-popover-pointer-edge-spacing)", + "description": "Used by `.spectrum-Popover--withTip.spectrum-Popover--top-left .spectrum-Popover-tip`, `.spectrum-Popover--withTip.spectrum-Popover--top-right .spectrum-Popover-tip`, `.spectrum-Popover--withTip.spectrum-Popover--top-start .spectrum-Popover-tip`, `.spectrum-Popover--withTip.spectrum-Popover--top-end .spectrum-Popover-tip`, `.spectrum-Popover--withTip.spectrum-Popover--bottom-left .spectrum-Popover-tip`, `.spectrum-Popover--withTip.spectrum-Popover--bottom-right .spectrum-Popover-tip`, `.spectrum-Popover--withTip.spectrum-Popover--bottom-start .spectrum-Popover-tip`, `.spectrum-Popover--withTip.spectrum-Popover--bottom-end .spectrum-Popover-tip`, `.spectrum-Popover--withTip.spectrum-Popover--end-top .spectrum-Popover-tip, .spectrum-Popover--withTip.spectrum-Popover--left-top .spectrum-Popover-tip, .spectrum-Popover--withTip.spectrum-Popover--right-top .spectrum-Popover-tip, .spectrum-Popover--withTip.spectrum-Popover--start-top .spectrum-Popover-tip`, `.spectrum-Popover--withTip.spectrum-Popover--end-bottom .spectrum-Popover-tip, .spectrum-Popover--withTip.spectrum-Popover--left-bottom .spectrum-Popover-tip, .spectrum-Popover--withTip.spectrum-Popover--right-bottom .spectrum-Popover-tip, .spectrum-Popover--withTip.spectrum-Popover--start-bottom .spectrum-Popover-tip`.
Defaults to `var(--spectrum-popover-pointer-edge-spacing)`, if not set.", + "control": "text", + "category": "Modifier" + } + }, + "component": { + "spectrum-popover-animation-distance": { + "description": "Defined in `.spectrum-Popover`.
Used by `.spectrum-Popover--top-end.is-open, .spectrum-Popover--top-left.is-open, .spectrum-Popover--top-right.is-open, .spectrum-Popover--top-start.is-open, .spectrum-Popover--top.is-open`, `.spectrum-Popover--bottom-end.is-open, .spectrum-Popover--bottom-left.is-open, .spectrum-Popover--bottom-right.is-open, .spectrum-Popover--bottom-start.is-open, .spectrum-Popover--bottom.is-open`, `.spectrum-Popover--right-bottom.is-open, .spectrum-Popover--right-top.is-open, .spectrum-Popover--right.is-open`, `.spectrum-Popover--left-bottom.is-open, .spectrum-Popover--left-top.is-open, .spectrum-Popover--left.is-open`, `.spectrum-Popover--start-bottom.is-open, .spectrum-Popover--start-top.is-open, .spectrum-Popover--start.is-open`, `.spectrum-Popover--start-bottom.is-open:dir(rtl), .spectrum-Popover--start-top.is-open:dir(rtl), .spectrum-Popover--start.is-open:dir(rtl), [dir=\"rtl\"] .spectrum-Popover--start-bottom.is-open, [dir=\"rtl\"] .spectrum-Popover--start-top.is-open, [dir=\"rtl\"] .spectrum-Popover--start.is-open`, `.spectrum-Popover--end-bottom.is-open, .spectrum-Popover--end-top.is-open, .spectrum-Popover--end.is-open`, `.spectrum-Popover--end-bottom.is-open:dir(rtl), .spectrum-Popover--end-top.is-open:dir(rtl), .spectrum-Popover--end.is-open:dir(rtl), [dir=\"rtl\"] .spectrum-Popover--end-bottom.is-open, [dir=\"rtl\"] .spectrum-Popover--end-top.is-open, [dir=\"rtl\"] .spectrum-Popover--end.is-open`.", + "control": "text", + "category": "Component" + }, + "spectrum-popover-background-color": { + "description": "Defined in `.spectrum-Popover`.
Used by `.spectrum-Popover`, `.spectrum-Popover.spectrum-Popover--withTip .spectrum-Popover-tip .spectrum-Popover-tip-triangle`.", + "control": "color", + "category": "Component" + }, + "spectrum-popover-border-color": { + "description": "Defined in `.spectrum-Popover`.
Used by `.spectrum-Popover`, `.spectrum-Popover.spectrum-Popover--withTip .spectrum-Popover-tip .spectrum-Popover-tip-triangle`.", + "control": "color", + "category": "Component" + }, + "spectrum-popover-content-area-spacing-vertical": { + "description": "Defined in `.spectrum-Popover`.
Used by `.spectrum-Popover`.", + "control": "text", + "category": "Component" + }, + "spectrum-popover-top-to-content-area": { + "value": "4px", + "description": "Used by `--spectrum-popover-content-area-spacing-vertical`.", + "control": "text", + "category": "Component" + }, + "spectrum-popover-shadow-horizontal": { + "description": "Defined in `.spectrum-Popover`.
Used by `--spectrum-popover-filter`.", + "control": "text", + "category": "Component" + }, + "spectrum-popover-shadow-vertical": { + "description": "Defined in `.spectrum-Popover`.
Used by `--spectrum-popover-filter`.", + "control": "text", + "category": "Component" + }, + "spectrum-popover-shadow-blur": { + "description": "Defined in `.spectrum-Popover`.
Used by `--spectrum-popover-filter`.", + "control": "text", + "category": "Component" + }, + "spectrum-popover-shadow-color": { + "description": "Defined in `.spectrum-Popover`.
Used by `--spectrum-popover-filter`.", + "control": "color", + "category": "Component" + }, + "spectrum-popover-corner-radius": { + "description": "Defined in `.spectrum-Popover`.
Used by `.spectrum-Popover`.", + "control": "text", + "category": "Component" + }, + "spectrum-popover-pointer-width": { + "description": "Defined in `.spectrum-Popover`.
Used by `.spectrum-Popover--right-bottom.spectrum-Popover--withTip, .spectrum-Popover--right-top.spectrum-Popover--withTip, .spectrum-Popover--right.spectrum-Popover--withTip`, `.spectrum-Popover--left-bottom.spectrum-Popover--withTip, .spectrum-Popover--left-top.spectrum-Popover--withTip, .spectrum-Popover--left.spectrum-Popover--withTip`, `.spectrum-Popover--start-bottom.spectrum-Popover--withTip, .spectrum-Popover--start-top.spectrum-Popover--withTip, .spectrum-Popover--start.spectrum-Popover--withTip`, `.spectrum-Popover--end-bottom.spectrum-Popover--withTip, .spectrum-Popover--end-top.spectrum-Popover--withTip, .spectrum-Popover--end.spectrum-Popover--withTip`, `.spectrum-Popover--withTip.spectrum-Popover .spectrum-Popover-tip, .spectrum-Popover--withTip.spectrum-Popover--bottom .spectrum-Popover-tip, .spectrum-Popover--withTip.spectrum-Popover--bottom-end .spectrum-Popover-tip, .spectrum-Popover--withTip.spectrum-Popover--bottom-left .spectrum-Popover-tip, .spectrum-Popover--withTip.spectrum-Popover--bottom-right .spectrum-Popover-tip, .spectrum-Popover--withTip.spectrum-Popover--bottom-start .spectrum-Popover-tip, .spectrum-Popover--withTip.spectrum-Popover--top .spectrum-Popover-tip, .spectrum-Popover--withTip.spectrum-Popover--top-end .spectrum-Popover-tip, .spectrum-Popover--withTip.spectrum-Popover--top-left .spectrum-Popover-tip, .spectrum-Popover--withTip.spectrum-Popover--top-right .spectrum-Popover-tip, .spectrum-Popover--withTip.spectrum-Popover--top-start .spectrum-Popover-tip`, `.spectrum-Popover--withTip.spectrum-Popover--end .spectrum-Popover-tip, .spectrum-Popover--withTip.spectrum-Popover--end-bottom .spectrum-Popover-tip, .spectrum-Popover--withTip.spectrum-Popover--end-top .spectrum-Popover-tip, .spectrum-Popover--withTip.spectrum-Popover--left .spectrum-Popover-tip, .spectrum-Popover--withTip.spectrum-Popover--left-bottom .spectrum-Popover-tip, .spectrum-Popover--withTip.spectrum-Popover--left-top .spectrum-Popover-tip, .spectrum-Popover--withTip.spectrum-Popover--right .spectrum-Popover-tip, .spectrum-Popover--withTip.spectrum-Popover--right-bottom .spectrum-Popover-tip, .spectrum-Popover--withTip.spectrum-Popover--right-top .spectrum-Popover-tip, .spectrum-Popover--withTip.spectrum-Popover--start .spectrum-Popover-tip, .spectrum-Popover--withTip.spectrum-Popover--start-bottom .spectrum-Popover-tip, .spectrum-Popover--withTip.spectrum-Popover--start-top .spectrum-Popover-tip`.", + "control": "text", + "category": "Component" + }, + "spectrum-popover-tip-width": { + "value": "16px", + "description": "Used by `--spectrum-popover-pointer-width`, `--spectrum-popover-pointer-edge-offset`, `--spectrum-popover-pointer-edge-spacing`.", + "control": "text", + "category": "Component" + }, + "spectrum-popover-pointer-height": { + "description": "Defined in `.spectrum-Popover`.
Used by `.spectrum-Popover--top-end.spectrum-Popover--withTip, .spectrum-Popover--top-left.spectrum-Popover--withTip, .spectrum-Popover--top-right.spectrum-Popover--withTip, .spectrum-Popover--top-start.spectrum-Popover--withTip, .spectrum-Popover--top.spectrum-Popover--withTip`, `.spectrum-Popover--bottom-end.spectrum-Popover--withTip, .spectrum-Popover--bottom-left.spectrum-Popover--withTip, .spectrum-Popover--bottom-right.spectrum-Popover--withTip, .spectrum-Popover--bottom-start.spectrum-Popover--withTip, .spectrum-Popover--bottom.spectrum-Popover--withTip`, `.spectrum-Popover--withTip.spectrum-Popover .spectrum-Popover-tip, .spectrum-Popover--withTip.spectrum-Popover--bottom .spectrum-Popover-tip, .spectrum-Popover--withTip.spectrum-Popover--bottom-end .spectrum-Popover-tip, .spectrum-Popover--withTip.spectrum-Popover--bottom-left .spectrum-Popover-tip, .spectrum-Popover--withTip.spectrum-Popover--bottom-right .spectrum-Popover-tip, .spectrum-Popover--withTip.spectrum-Popover--bottom-start .spectrum-Popover-tip, .spectrum-Popover--withTip.spectrum-Popover--top .spectrum-Popover-tip, .spectrum-Popover--withTip.spectrum-Popover--top-end .spectrum-Popover-tip, .spectrum-Popover--withTip.spectrum-Popover--top-left .spectrum-Popover-tip, .spectrum-Popover--withTip.spectrum-Popover--top-right .spectrum-Popover-tip, .spectrum-Popover--withTip.spectrum-Popover--top-start .spectrum-Popover-tip`, `.spectrum-Popover--withTip.spectrum-Popover--end .spectrum-Popover-tip, .spectrum-Popover--withTip.spectrum-Popover--end-bottom .spectrum-Popover-tip, .spectrum-Popover--withTip.spectrum-Popover--end-top .spectrum-Popover-tip, .spectrum-Popover--withTip.spectrum-Popover--left .spectrum-Popover-tip, .spectrum-Popover--withTip.spectrum-Popover--left-bottom .spectrum-Popover-tip, .spectrum-Popover--withTip.spectrum-Popover--left-top .spectrum-Popover-tip, .spectrum-Popover--withTip.spectrum-Popover--right .spectrum-Popover-tip, .spectrum-Popover--withTip.spectrum-Popover--right-bottom .spectrum-Popover-tip, .spectrum-Popover--withTip.spectrum-Popover--right-top .spectrum-Popover-tip, .spectrum-Popover--withTip.spectrum-Popover--start .spectrum-Popover-tip, .spectrum-Popover--withTip.spectrum-Popover--start-bottom .spectrum-Popover-tip, .spectrum-Popover--withTip.spectrum-Popover--start-top .spectrum-Popover-tip`.", + "control": "text", + "category": "Component" + }, + "spectrum-popover-tip-height": { + "value": "8px", + "description": "Used by `--spectrum-popover-pointer-height`.", + "control": "text", + "category": "Component" + }, + "spectrum-popover-pointer-edge-offset": { + "description": "Defined in `.spectrum-Popover`.
Used by `--spectrum-popover-pointer-edge-spacing`.", + "control": "text", + "category": "Component" + }, + "spectrum-popover-pointer-edge-spacing": { + "description": "Defined in `.spectrum-Popover`.
Used by `.spectrum-Popover--withTip.spectrum-Popover--top-left .spectrum-Popover-tip`, `.spectrum-Popover--withTip.spectrum-Popover--top-right .spectrum-Popover-tip`, `.spectrum-Popover--withTip.spectrum-Popover--top-start .spectrum-Popover-tip`, `.spectrum-Popover--withTip.spectrum-Popover--top-end .spectrum-Popover-tip`, `.spectrum-Popover--withTip.spectrum-Popover--bottom-left .spectrum-Popover-tip`, `.spectrum-Popover--withTip.spectrum-Popover--bottom-right .spectrum-Popover-tip`, `.spectrum-Popover--withTip.spectrum-Popover--bottom-start .spectrum-Popover-tip`, `.spectrum-Popover--withTip.spectrum-Popover--bottom-end .spectrum-Popover-tip`, `.spectrum-Popover--withTip.spectrum-Popover--end-top .spectrum-Popover-tip, .spectrum-Popover--withTip.spectrum-Popover--left-top .spectrum-Popover-tip, .spectrum-Popover--withTip.spectrum-Popover--right-top .spectrum-Popover-tip, .spectrum-Popover--withTip.spectrum-Popover--start-top .spectrum-Popover-tip`, `.spectrum-Popover--withTip.spectrum-Popover--end-bottom .spectrum-Popover-tip, .spectrum-Popover--withTip.spectrum-Popover--left-bottom .spectrum-Popover-tip, .spectrum-Popover--withTip.spectrum-Popover--right-bottom .spectrum-Popover-tip, .spectrum-Popover--withTip.spectrum-Popover--start-bottom .spectrum-Popover-tip`.", + "control": "text", + "category": "Component" + }, + "spectrum-popover-filter": { + "description": "Defined in `.spectrum-Popover`.
Used by `.spectrum-Popover`.", + "control": "text", + "category": "Component" + }, + "spectrum-popover-border-width": { + "description": "Defined in `.spectrum-Popover`.
Used by `.spectrum-Popover`, `.spectrum-Popover.spectrum-Popover--withTip .spectrum-Popover-tip .spectrum-Popover-tip-triangle`, `.spectrum-Popover--top-end.spectrum-Popover--withTip, .spectrum-Popover--top-left.spectrum-Popover--withTip, .spectrum-Popover--top-right.spectrum-Popover--withTip, .spectrum-Popover--top-start.spectrum-Popover--withTip, .spectrum-Popover--top.spectrum-Popover--withTip`, `.spectrum-Popover--bottom-end.spectrum-Popover--withTip, .spectrum-Popover--bottom-left.spectrum-Popover--withTip, .spectrum-Popover--bottom-right.spectrum-Popover--withTip, .spectrum-Popover--bottom-start.spectrum-Popover--withTip, .spectrum-Popover--bottom.spectrum-Popover--withTip`, `.spectrum-Popover--right-bottom.spectrum-Popover--withTip, .spectrum-Popover--right-top.spectrum-Popover--withTip, .spectrum-Popover--right.spectrum-Popover--withTip`, `.spectrum-Popover--left-bottom.spectrum-Popover--withTip, .spectrum-Popover--left-top.spectrum-Popover--withTip, .spectrum-Popover--left.spectrum-Popover--withTip`, `.spectrum-Popover--start-bottom.spectrum-Popover--withTip, .spectrum-Popover--start-top.spectrum-Popover--withTip, .spectrum-Popover--start.spectrum-Popover--withTip`, `.spectrum-Popover--end-bottom.spectrum-Popover--withTip, .spectrum-Popover--end-top.spectrum-Popover--withTip, .spectrum-Popover--end.spectrum-Popover--withTip`.", + "control": "text", + "category": "Component" + } + }, + "global": { + "spectrum-border-width-100": { + "value": "1px", + "description": "Used by `--system-popover-border-width`.", + "control": "text", + "category": "Global" + }, + "spectrum-animation-duration-100": { + "description": "Used by `.spectrum-Popover`.", + "control": "text", + "category": "Global" + }, + "spectrum-animation-duration-0": { + "description": "Used by `.spectrum-Popover.is-open`.", + "control": "text", + "category": "Global" + }, + "spectrum-spacing-100": { + "value": "8px", + "description": "Used by `--spectrum-popover-animation-distance`.", + "control": "text", + "category": "Global" + }, + "spectrum-background-layer-2-color": { + "value": "var(--spectrum-gray-75)", + "description": "Used by `--spectrum-popover-background-color`.", + "control": "color", + "category": "Global" + }, + "spectrum-gray-400": { + "value": "light-dark(rgb(198, 198, 198), rgb(68, 68, 68))", + "description": "Used by `--spectrum-popover-border-color`.", + "control": "text", + "category": "Global" + }, + "spectrum-drop-shadow-x": { + "value": "0px", + "description": "Used by `--spectrum-popover-shadow-horizontal`.", + "control": "text", + "category": "Global" + }, + "spectrum-drop-shadow-y": { + "value": "1px", + "description": "Used by `--spectrum-popover-shadow-vertical`.", + "control": "text", + "category": "Global" + }, + "spectrum-drop-shadow-blur": { + "value": "4px", + "description": "Used by `--spectrum-popover-shadow-blur`.", + "control": "text", + "category": "Global" + }, + "spectrum-drop-shadow-color": { + "value": "var(--spectrum-drop-shadow-color-100)", + "description": "Used by `--spectrum-popover-shadow-color`.", + "control": "color", + "category": "Global" + }, + "spectrum-corner-radius-100": { + "value": "8px", + "description": "Used by `--spectrum-popover-corner-radius`, `--spectrum-popover-pointer-edge-offset`.", + "control": "text", + "category": "Global" + } + }, + "system-theme": { + "system-popover-border-width": { + "description": "Defined in `.spectrum`.
Used by `--spectrum-popover-border-width`.", + "control": "text" + } + }, + "passthroughs": {}, + "high-contrast": { + "highcontrast-popover-border-color": { + "value": "var(--mod-popover-border-color, var(--spectrum-popover-border-color))", + "description": "Defined in `.spectrum-Popover`.
Used by `.spectrum-Popover`, `.spectrum-Popover.spectrum-Popover--withTip .spectrum-Popover-tip .spectrum-Popover-tip-triangle`.
Defaults to `var(--mod-popover-border-color, var(--spectrum-popover-border-color))`, if not set.", + "control": "color" + } + } } diff --git a/components/popover/stories/popover.stories.js b/components/popover/stories/popover.stories.js index e5e7f986607..75532d54ba8 100644 --- a/components/popover/stories/popover.stories.js +++ b/components/popover/stories/popover.stories.js @@ -5,11 +5,13 @@ import { disableDefaultModes } from "@spectrum-css/preview/modes"; import { isOpen } from "@spectrum-css/preview/types"; import { Template as Typography } from "@spectrum-css/typography/stories/template.js"; import { html } from "lit"; -import metadata from "../dist/metadata.json"; -import packageJson from "../package.json"; import { PopoverGroup } from "./popover.test.js"; import { FixedWidthSourceTemplate, Template, TipPlacementVariants } from "./template.js"; +// Local assets to render the component styles and structure +import metadata from "../dist/metadata.json"; +import packageJson from "../package.json"; + /** * A popover is used to display transient content (menus, options, additional actions, etc.) and appears when clicking/tapping on a source (tools, buttons, etc.). * It stands out via its visual style (stroke and drop shadow) and floats on top of the rest of the interface. @@ -97,6 +99,7 @@ export default { }, packageJson, metadata, + cssprops: metadata.modifiers, }, }; diff --git a/components/progressbar/dist/metadata.json b/components/progressbar/dist/metadata.json index 3294d6c477a..222c2848fc6 100644 --- a/components/progressbar/dist/metadata.json +++ b/components/progressbar/dist/metadata.json @@ -14,101 +14,446 @@ ".spectrum-ProgressBar-label", ".spectrum-ProgressBar-percentage", ".spectrum-ProgressBar-track", - ".spectrum-ProgressBar.spectrum-ProgressBar--sideLabel", - ".spectrum-ProgressBar.spectrum-ProgressBar--staticWhite", ".spectrum-ProgressBar:dir(rtl)", ".spectrum-ProgressBar:lang(ja)", ".spectrum-ProgressBar:lang(ko)", ".spectrum-ProgressBar:lang(zh)", - "0%", + ".spectrum-ProgressBar.spectrum-ProgressBar--sideLabel", + ".spectrum-ProgressBar.spectrum-ProgressBar--staticWhite", "[dir=\"rtl\"] .spectrum-ProgressBar", + "0%", "to" ], - "modifiers": [ - "--mod-progressbar-animation-duration-indeterminate", - "--mod-progressbar-animation-ease-in-out-indeterminate", - "--mod-progressbar-fill-color", - "--mod-progressbar-fill-color-white", - "--mod-progressbar-fill-size-indeterminate", - "--mod-progressbar-font-size", - "--mod-progressbar-label-and-value-white", - "--mod-progressbar-line-height", - "--mod-progressbar-line-height-cjk", - "--mod-progressbar-max-size", - "--mod-progressbar-min-size", - "--mod-progressbar-size-default", - "--mod-progressbar-spacing-label-to-progressbar", - "--mod-progressbar-spacing-label-to-text", - "--mod-progressbar-spacing-top-to-text", - "--mod-progressbar-text-color", - "--mod-progressbar-thickness", - "--mod-progressbar-track-color" - ], - "component": [ - "--spectrum-progress-bar-maximum-width", - "--spectrum-progress-bar-minimum-width", - "--spectrum-progress-bar-thickness-extra-large", - "--spectrum-progress-bar-thickness-large", - "--spectrum-progress-bar-thickness-small", - "--spectrum-progressbar-animation-duration-indeterminate", - "--spectrum-progressbar-animation-ease-in-out-indeterminate", - "--spectrum-progressbar-corner-radius", - "--spectrum-progressbar-dir-indeterminate-multiplier", - "--spectrum-progressbar-fill-color", - "--spectrum-progressbar-fill-color-white", - "--spectrum-progressbar-fill-size-indeterminate", - "--spectrum-progressbar-font-size", - "--spectrum-progressbar-label-and-value-white", - "--spectrum-progressbar-line-height", - "--spectrum-progressbar-line-height-cjk", - "--spectrum-progressbar-max-size", - "--spectrum-progressbar-min-size", - "--spectrum-progressbar-size-2400", - "--spectrum-progressbar-size-2500", - "--spectrum-progressbar-size-2800", - "--spectrum-progressbar-size-default", - "--spectrum-progressbar-sized-font-size", - "--spectrum-progressbar-sized-size-default", - "--spectrum-progressbar-sized-spacing-top-to-text", - "--spectrum-progressbar-sized-thickness", - "--spectrum-progressbar-spacing-label-to-progressbar", - "--spectrum-progressbar-spacing-label-to-text", - "--spectrum-progressbar-spacing-top-to-text", - "--spectrum-progressbar-static-white-track-color", - "--spectrum-progressbar-text-color", - "--spectrum-progressbar-thickness", - "--spectrum-progressbar-track-color", - "--spectrum-progressbar-track-color-default", - "--spectrum-progressbar-track-color-white" - ], - "global": [ - "--spectrum-accent-color-900", - "--spectrum-animation-duration-2000", - "--spectrum-animation-ease-in-out", - "--spectrum-cjk-line-height-100", - "--spectrum-component-top-to-text-100", - "--spectrum-component-top-to-text-200", - "--spectrum-component-top-to-text-300", - "--spectrum-component-top-to-text-75", - "--spectrum-corner-radius-100", - "--spectrum-font-size-100", - "--spectrum-font-size-200", - "--spectrum-font-size-75", - "--spectrum-gray-200", - "--spectrum-line-height-100", - "--spectrum-neutral-content-color-default", - "--spectrum-spacing-200", - "--spectrum-spacing-75", - "--spectrum-transparent-white-400", - "--spectrum-white" - ], - "system-theme": [ - "--system-progress-bar-track-color", - "--system-progress-bar-track-color-white" - ], - "passthroughs": ["--mod-fieldlabel-font-size"], - "high-contrast": [ - "--highcontrast-progressbar-fill-color", - "--highcontrast-progressbar-track-color" - ] + "modifiers": { + "mod-progressbar-size-default": { + "value": "var(--spectrum-progressbar-sized-size-default)", + "description": "Used by `--spectrum-progressbar-size-default`.
Defaults to `var(--spectrum-progressbar-sized-size-default)`, if not set.", + "control": "text", + "category": "Modifier" + }, + "mod-progressbar-font-size": { + "value": "var(--spectrum-progressbar-sized-font-size)", + "description": "Used by `--spectrum-progressbar-font-size`.
Defaults to `var(--spectrum-progressbar-sized-font-size)`, if not set.", + "control": "text", + "category": "Modifier" + }, + "mod-progressbar-thickness": { + "value": "var(--spectrum-progressbar-sized-thickness)", + "description": "Used by `--spectrum-progressbar-thickness`.
Defaults to `var(--spectrum-progressbar-sized-thickness)`, if not set.", + "control": "text", + "category": "Modifier" + }, + "mod-progressbar-spacing-top-to-text": { + "value": "var(--spectrum-progressbar-sized-spacing-top-to-text)", + "description": "Used by `--spectrum-progressbar-spacing-top-to-text`.
Defaults to `var(--spectrum-progressbar-sized-spacing-top-to-text)`, if not set.", + "control": "text", + "category": "Modifier" + }, + "mod-progressbar-animation-ease-in-out-indeterminate": { + "value": "var(--spectrum-animation-ease-in-out)", + "description": "Used by `--spectrum-progressbar-animation-ease-in-out-indeterminate`.
Defaults to `var(--spectrum-animation-ease-in-out)`, if not set.", + "control": "text", + "category": "Modifier" + }, + "mod-progressbar-animation-duration-indeterminate": { + "value": "var(--spectrum-animation-duration-2000)", + "description": "Used by `--spectrum-progressbar-animation-duration-indeterminate`.
Defaults to `var(--spectrum-animation-duration-2000)`, if not set.", + "control": "text", + "category": "Modifier" + }, + "mod-progressbar-fill-size-indeterminate": { + "description": "Used by `--spectrum-progressbar-fill-size-indeterminate`.", + "control": "text", + "category": "Modifier" + }, + "mod-progressbar-line-height-cjk": { + "value": "1.5", + "description": "Used by `--spectrum-progressbar-line-height-cjk`.
Defaults to `var(--spectrum-cjk-line-height-100)`, if not set.", + "control": "text", + "category": "Modifier" + }, + "mod-progressbar-min-size": { + "value": "48px", + "description": "Used by `--spectrum-progressbar-min-size`.
Defaults to `var(--spectrum-progress-bar-minimum-width)`, if not set.", + "control": "text", + "category": "Modifier" + }, + "mod-progressbar-max-size": { + "value": "768px", + "description": "Used by `--spectrum-progressbar-max-size`.
Defaults to `var(--spectrum-progress-bar-maximum-width)`, if not set.", + "control": "text", + "category": "Modifier" + }, + "mod-progressbar-line-height": { + "value": "1.3", + "description": "Defined in `.spectrum-ProgressBar:lang(ja), .spectrum-ProgressBar:lang(ko), .spectrum-ProgressBar:lang(zh)`.
Used by `--spectrum-progressbar-line-height`.
Defaults to `var(--spectrum-line-height-100)`, if not set.", + "control": "text", + "category": "Modifier" + }, + "mod-progressbar-spacing-label-to-progressbar": { + "value": "4px", + "description": "Used by `--spectrum-progressbar-spacing-label-to-progressbar`.
Defaults to `var(--spectrum-spacing-75)`, if not set.", + "control": "text", + "category": "Modifier" + }, + "mod-progressbar-spacing-label-to-text": { + "value": "12px", + "description": "Used by `--spectrum-progressbar-spacing-label-to-text`.
Defaults to `var(--spectrum-spacing-200)`, if not set.", + "control": "text", + "category": "Modifier" + }, + "mod-progressbar-fill-color": { + "value": "var(--spectrum-blue-900)", + "description": "Defined in `.spectrum-ProgressBar.spectrum-ProgressBar--staticWhite`.
Used by `--spectrum-progressbar-fill-color`.
Defaults to `var(--spectrum-accent-color-900)`, if not set.", + "control": "color", + "category": "Modifier" + }, + "mod-progressbar-track-color": { + "value": "var(--spectrum-progressbar-track-color)", + "description": "Defined in `.spectrum-ProgressBar.spectrum-ProgressBar--staticWhite`.
Used by `--spectrum-progressbar-track-color-default`.
Defaults to `var(--spectrum-progressbar-track-color)`, if not set.", + "control": "color", + "category": "Modifier" + }, + "mod-progressbar-text-color": { + "value": "var(--spectrum-gray-800)", + "description": "Defined in `.spectrum-ProgressBar.spectrum-ProgressBar--staticWhite`.
Used by `--spectrum-progressbar-text-color`.
Defaults to `var(--spectrum-neutral-content-color-default)`, if not set.", + "control": "color", + "category": "Modifier" + }, + "mod-progressbar-label-and-value-white": { + "value": "light-dark(rgb(255, 255, 255), rgb(255, 255, 255))", + "description": "Used by `--spectrum-progressbar-label-and-value-white`.
Defaults to `var(--spectrum-white)`, if not set.", + "control": "text", + "category": "Modifier" + }, + "mod-progressbar-fill-color-white": { + "value": "light-dark(rgb(255, 255, 255), rgb(255, 255, 255))", + "description": "Used by `--spectrum-progressbar-fill-color-white`.
Defaults to `var(--spectrum-white)`, if not set.", + "control": "color", + "category": "Modifier" + } + }, + "component": { + "spectrum-progressbar-sized-size-default": { + "description": "Defined in `.spectrum-ProgressBar, .spectrum-ProgressBar--sizeM`, `.spectrum-ProgressBar--sizeS`, `.spectrum-ProgressBar--sizeL`, `.spectrum-ProgressBar--sizeXL`.
Used by `--spectrum-progressbar-size-default`.", + "control": "text", + "category": "Component" + }, + "spectrum-progressbar-size-2400": { + "description": "Defined in `.spectrum-ProgressBar`.
Used by `--spectrum-progressbar-sized-size-default`.", + "control": "text", + "category": "Component" + }, + "spectrum-progressbar-sized-font-size": { + "description": "Defined in `.spectrum-ProgressBar, .spectrum-ProgressBar--sizeM`, `.spectrum-ProgressBar--sizeS`, `.spectrum-ProgressBar--sizeL`, `.spectrum-ProgressBar--sizeXL`.
Used by `--spectrum-progressbar-font-size`.", + "control": "text", + "category": "Component" + }, + "spectrum-progressbar-sized-thickness": { + "description": "Defined in `.spectrum-ProgressBar, .spectrum-ProgressBar--sizeM`, `.spectrum-ProgressBar--sizeS`, `.spectrum-ProgressBar--sizeL`, `.spectrum-ProgressBar--sizeXL`.
Used by `--spectrum-progressbar-thickness`.", + "control": "text", + "category": "Component" + }, + "spectrum-progress-bar-thickness-large": { + "value": "8px", + "description": "Used by `--spectrum-progressbar-sized-thickness`.", + "control": "text", + "category": "Component" + }, + "spectrum-progressbar-sized-spacing-top-to-text": { + "description": "Defined in `.spectrum-ProgressBar, .spectrum-ProgressBar--sizeM`, `.spectrum-ProgressBar--sizeS`, `.spectrum-ProgressBar--sizeL`, `.spectrum-ProgressBar--sizeXL`.
Used by `--spectrum-progressbar-spacing-top-to-text`.", + "control": "text", + "category": "Component" + }, + "spectrum-progress-bar-thickness-small": { + "value": "4px", + "description": "Used by `--spectrum-progressbar-sized-thickness`.", + "control": "text", + "category": "Component" + }, + "spectrum-progressbar-size-2500": { + "description": "Defined in `.spectrum-ProgressBar`.
Used by `--spectrum-progressbar-sized-size-default`.", + "control": "text", + "category": "Component" + }, + "spectrum-progressbar-size-2800": { + "description": "Defined in `.spectrum-ProgressBar`.
Used by `--spectrum-progressbar-sized-size-default`.", + "control": "text", + "category": "Component" + }, + "spectrum-progress-bar-thickness-extra-large": { + "value": "10px", + "description": "Used by `--spectrum-progressbar-sized-thickness`.", + "control": "text", + "category": "Component" + }, + "spectrum-progressbar-size-default": { + "description": "Defined in `.spectrum-ProgressBar`.
Used by `.spectrum-ProgressBar`, `.spectrum-ProgressBar--sideLabel .spectrum-ProgressBar-track`, `to`.", + "control": "text", + "category": "Component" + }, + "spectrum-progressbar-font-size": { + "description": "Defined in `.spectrum-ProgressBar`.
Used by `--mod-fieldlabel-font-size`.", + "control": "text", + "category": "Component" + }, + "spectrum-progressbar-thickness": { + "description": "Defined in `.spectrum-ProgressBar`.
Used by `.spectrum-ProgressBar-track`, `.spectrum-ProgressBar-fill`.", + "control": "text", + "category": "Component" + }, + "spectrum-progressbar-spacing-top-to-text": { + "description": "Defined in `.spectrum-ProgressBar`.
Used by `.spectrum-ProgressBar-label, .spectrum-ProgressBar-percentage`.", + "control": "text", + "category": "Component" + }, + "spectrum-progressbar-animation-ease-in-out-indeterminate": { + "description": "Defined in `.spectrum-ProgressBar`.
Used by `.spectrum-ProgressBar--indeterminate .spectrum-ProgressBar-fill`.", + "control": "text", + "category": "Component" + }, + "spectrum-progressbar-animation-duration-indeterminate": { + "description": "Defined in `.spectrum-ProgressBar`.
Used by `.spectrum-ProgressBar--indeterminate .spectrum-ProgressBar-fill`.", + "control": "text", + "category": "Component" + }, + "spectrum-progressbar-corner-radius": { + "description": "Defined in `.spectrum-ProgressBar`.
Used by `.spectrum-ProgressBar-track`.", + "control": "text", + "category": "Component" + }, + "spectrum-progressbar-fill-size-indeterminate": { + "description": "Defined in `.spectrum-ProgressBar`.
Used by `.spectrum-ProgressBar--indeterminate .spectrum-ProgressBar-fill`, `0%`.", + "control": "text", + "category": "Component" + }, + "spectrum-progressbar-dir-indeterminate-multiplier": { + "description": "Defined in `.spectrum-ProgressBar`, `.spectrum-ProgressBar:dir(rtl), [dir=\"rtl\"] .spectrum-ProgressBar`.
Used by `0%`, `to`.", + "control": "text", + "category": "Component" + }, + "spectrum-progressbar-line-height-cjk": { + "description": "Defined in `.spectrum-ProgressBar`.
Used by `--mod-progressbar-line-height`.", + "control": "text", + "category": "Component" + }, + "spectrum-progressbar-min-size": { + "description": "Defined in `.spectrum-ProgressBar`.
Used by `.spectrum-ProgressBar`.", + "control": "text", + "category": "Component" + }, + "spectrum-progress-bar-minimum-width": { + "value": "48px", + "description": "Used by `--spectrum-progressbar-min-size`.", + "control": "text", + "category": "Component" + }, + "spectrum-progressbar-max-size": { + "description": "Defined in `.spectrum-ProgressBar`.
Used by `.spectrum-ProgressBar`.", + "control": "text", + "category": "Component" + }, + "spectrum-progress-bar-maximum-width": { + "value": "768px", + "description": "Used by `--spectrum-progressbar-max-size`.", + "control": "text", + "category": "Component" + }, + "spectrum-progressbar-line-height": { + "description": "Defined in `.spectrum-ProgressBar`.
Used by `.spectrum-ProgressBar-label, .spectrum-ProgressBar-percentage`.", + "control": "text", + "category": "Component" + }, + "spectrum-progressbar-spacing-label-to-progressbar": { + "description": "Defined in `.spectrum-ProgressBar`.
Used by `.spectrum-ProgressBar-label, .spectrum-ProgressBar-percentage`.", + "control": "text", + "category": "Component" + }, + "spectrum-progressbar-spacing-label-to-text": { + "description": "Defined in `.spectrum-ProgressBar`.
Used by `.spectrum-ProgressBar--sideLabel .spectrum-ProgressBar-label`, `.spectrum-ProgressBar-percentage`.", + "control": "text", + "category": "Component" + }, + "spectrum-progressbar-fill-color": { + "description": "Defined in `.spectrum-ProgressBar`.
Used by `.spectrum-ProgressBar-fill`.", + "control": "color", + "category": "Component" + }, + "spectrum-progressbar-track-color-default": { + "description": "Defined in `.spectrum-ProgressBar`.
Used by `.spectrum-ProgressBar-track`.", + "control": "color", + "category": "Component" + }, + "spectrum-progressbar-track-color": { + "description": "Defined in `.spectrum-ProgressBar`.
Used by `--spectrum-progressbar-track-color-default`.", + "control": "color", + "category": "Component" + }, + "spectrum-progressbar-text-color": { + "description": "Defined in `.spectrum-ProgressBar`.
Used by `.spectrum-ProgressBar-label, .spectrum-ProgressBar-percentage`.", + "control": "color", + "category": "Component" + }, + "spectrum-progressbar-label-and-value-white": { + "description": "Defined in `.spectrum-ProgressBar`.
Used by `--mod-progressbar-text-color`.", + "control": "text", + "category": "Component" + }, + "spectrum-progressbar-fill-color-white": { + "description": "Defined in `.spectrum-ProgressBar`.
Used by `--mod-progressbar-fill-color`.", + "control": "color", + "category": "Component" + }, + "spectrum-progressbar-static-white-track-color": { + "description": "Defined in `.spectrum-ProgressBar`.
Used by `--mod-progressbar-track-color`.", + "control": "color", + "category": "Component" + }, + "spectrum-progressbar-track-color-white": { + "description": "Defined in `.spectrum-ProgressBar`.
Used by `--spectrum-progressbar-static-white-track-color`.", + "control": "color", + "category": "Component" + } + }, + "global": { + "spectrum-gray-200": { + "value": "light-dark(rgb(225, 225, 225), rgb(50, 50, 50))", + "description": "Used by `--system-progress-bar-track-color`.", + "control": "text", + "category": "Global" + }, + "spectrum-transparent-white-400": { + "value": "light-dark(rgba(255, 255, 255, 0.21), rgba(255, 255, 255, 0.21))", + "description": "Used by `--system-progress-bar-track-color-white`.", + "control": "text", + "category": "Global" + }, + "spectrum-font-size-75": { + "value": "12px", + "description": "Used by `--spectrum-progressbar-sized-font-size`.", + "control": "text", + "category": "Global" + }, + "spectrum-component-top-to-text-100": { + "value": "6px", + "description": "Used by `--spectrum-progressbar-sized-spacing-top-to-text`.", + "control": "text", + "category": "Global" + }, + "spectrum-component-top-to-text-75": { + "value": "4px", + "description": "Used by `--spectrum-progressbar-sized-spacing-top-to-text`.", + "control": "text", + "category": "Global" + }, + "spectrum-font-size-100": { + "value": "14px", + "description": "Used by `--spectrum-progressbar-sized-font-size`.", + "control": "text", + "category": "Global" + }, + "spectrum-component-top-to-text-200": { + "value": "9px", + "description": "Used by `--spectrum-progressbar-sized-spacing-top-to-text`.", + "control": "text", + "category": "Global" + }, + "spectrum-font-size-200": { + "value": "16px", + "description": "Used by `--spectrum-progressbar-sized-font-size`.", + "control": "text", + "category": "Global" + }, + "spectrum-component-top-to-text-300": { + "value": "12px", + "description": "Used by `--spectrum-progressbar-sized-spacing-top-to-text`.", + "control": "text", + "category": "Global" + }, + "spectrum-animation-ease-in-out": { + "description": "Used by `--spectrum-progressbar-animation-ease-in-out-indeterminate`.", + "control": "text", + "category": "Global" + }, + "spectrum-animation-duration-2000": { + "description": "Used by `--spectrum-progressbar-animation-duration-indeterminate`.", + "control": "text", + "category": "Global" + }, + "spectrum-corner-radius-100": { + "value": "8px", + "description": "Used by `--spectrum-progressbar-corner-radius`.", + "control": "text", + "category": "Global" + }, + "spectrum-cjk-line-height-100": { + "value": "1.5", + "description": "Used by `--spectrum-progressbar-line-height-cjk`.", + "control": "text", + "category": "Global" + }, + "spectrum-line-height-100": { + "value": "1.3", + "description": "Used by `--spectrum-progressbar-line-height`.", + "control": "text", + "category": "Global" + }, + "spectrum-spacing-75": { + "value": "4px", + "description": "Used by `--spectrum-progressbar-spacing-label-to-progressbar`.", + "control": "text", + "category": "Global" + }, + "spectrum-spacing-200": { + "value": "12px", + "description": "Used by `--spectrum-progressbar-spacing-label-to-text`.", + "control": "text", + "category": "Global" + }, + "spectrum-accent-color-900": { + "value": "var(--spectrum-blue-900)", + "description": "Used by `--spectrum-progressbar-fill-color`.", + "control": "color", + "category": "Global" + }, + "spectrum-neutral-content-color-default": { + "value": "var(--spectrum-gray-800)", + "description": "Used by `--spectrum-progressbar-text-color`.", + "control": "color", + "category": "Global" + }, + "spectrum-white": { + "value": "light-dark(rgb(255, 255, 255), rgb(255, 255, 255))", + "description": "Used by `--spectrum-progressbar-label-and-value-white`, `--spectrum-progressbar-fill-color-white`.", + "control": "text", + "category": "Global" + } + }, + "system-theme": { + "system-progress-bar-track-color": { + "description": "Defined in `.spectrum`.
Used by `--spectrum-progressbar-track-color`.", + "control": "color" + }, + "system-progress-bar-track-color-white": { + "description": "Defined in `.spectrum`.
Used by `--spectrum-progressbar-track-color-white`.", + "control": "color" + } + }, + "passthroughs": { + "mod-fieldlabel-font-size": { + "category": "Passthrough" + } + }, + "high-contrast": { + "highcontrast-progressbar-fill-color": { + "value": "var(--mod-progressbar-fill-color, var(--spectrum-accent-color-900))", + "description": "Defined in `.spectrum-ProgressBar`.
Used by `--spectrum-progressbar-fill-color`.
Defaults to `var(--mod-progressbar-fill-color, var(--spectrum-accent-color-900))`, if not set.", + "control": "color" + }, + "highcontrast-progressbar-track-color": { + "value": "var(--mod-progressbar-track-color, var(--spectrum-progressbar-track-color))", + "description": "Defined in `.spectrum-ProgressBar`.
Used by `--spectrum-progressbar-track-color-default`.
Defaults to `var(--mod-progressbar-track-color, var(--spectrum-progressbar-track-color))`, if not set.", + "control": "color" + } + } } diff --git a/components/progressbar/stories/progressbar.stories.js b/components/progressbar/stories/progressbar.stories.js index 4468a701277..8407f4d1a55 100644 --- a/components/progressbar/stories/progressbar.stories.js +++ b/components/progressbar/stories/progressbar.stories.js @@ -1,11 +1,13 @@ import { Sizes } from "@spectrum-css/preview/decorators"; import { disableDefaultModes } from "@spectrum-css/preview/modes"; import { isIndeterminate, size, staticColor } from "@spectrum-css/preview/types"; -import metadata from "../dist/metadata.json"; -import packageJson from "../package.json"; import { ProgressBarGroup } from "./progressbar.test.js"; import { IndeterminateGroup, Template } from "./template.js"; +// Local assets to render the component styles and structure +import metadata from "../dist/metadata.json"; +import packageJson from "../package.json"; + /** * The progress bar component shows the progression of a system operation such as downloading, uploading, processing, etc. in a visual way. * @@ -98,6 +100,7 @@ export default { }, packageJson, metadata, + cssprops: metadata.modifiers, }, }; diff --git a/components/progresscircle/dist/metadata.json b/components/progresscircle/dist/metadata.json index 82493f14621..b3ac38098b2 100644 --- a/components/progresscircle/dist/metadata.json +++ b/components/progresscircle/dist/metadata.json @@ -2,16 +2,16 @@ "sourceFile": "index.css", "selectors": [ ".spectrum-ProgressCircle", + ".spectrum-ProgressCircle--indeterminate .spectrum-ProgressCircle-fills", ".spectrum-ProgressCircle--indeterminate .spectrum-ProgressCircle-fillSubMask1", ".spectrum-ProgressCircle--indeterminate .spectrum-ProgressCircle-fillSubMask2", - ".spectrum-ProgressCircle--indeterminate .spectrum-ProgressCircle-fills", ".spectrum-ProgressCircle--indeterminate-fill-submask-2", ".spectrum-ProgressCircle-fill", ".spectrum-ProgressCircle-fillMask1", ".spectrum-ProgressCircle-fillMask2", + ".spectrum-ProgressCircle-fills", ".spectrum-ProgressCircle-fillSubMask1", ".spectrum-ProgressCircle-fillSubMask2", - ".spectrum-ProgressCircle-fills", ".spectrum-ProgressCircle-track", ".spectrum-ProgressCircle.spectrum-ProgressCircle--large", ".spectrum-ProgressCircle.spectrum-ProgressCircle--medium", @@ -79,48 +79,197 @@ "98.31%", "to" ], - "modifiers": [ - "--mod-progress-circle-fill-border-color", - "--mod-progress-circle-fill-border-color-over-background", - "--mod-progress-circle-position", - "--mod-progress-circle-size", - "--mod-progress-circle-thickness", - "--mod-progress-circle-track-border-color", - "--mod-progress-circle-track-border-color-over-background", - "--mod-progress-circle-track-border-style" - ], - "component": [ - "--spectrum-progress-circle-fill-border-color", - "--spectrum-progress-circle-fill-border-color-over-background", - "--spectrum-progress-circle-size", - "--spectrum-progress-circle-size-large", - "--spectrum-progress-circle-size-medium", - "--spectrum-progress-circle-size-small", - "--spectrum-progress-circle-thickness", - "--spectrum-progress-circle-thickness-large", - "--spectrum-progress-circle-thickness-medium", - "--spectrum-progress-circle-thickness-small", - "--spectrum-progress-circle-track-border-color", - "--spectrum-progress-circle-track-border-color-over-background", - "--spectrum-progress-circle-track-border-style" - ], - "global": [ - "--spectrum-accent-content-color-default", - "--spectrum-gray-200", - "--spectrum-gray-300", - "--spectrum-transparent-white-1000", - "--spectrum-transparent-white-300", - "--spectrum-transparent-white-400", - "--spectrum-transparent-white-900" - ], - "system-theme": [ - "--system-progress-circle-fill-border-color-over-background", - "--system-progress-circle-track-border-color", - "--system-progress-circle-track-border-color-over-background" - ], - "passthroughs": [], - "high-contrast": [ - "--highcontrast-progress-circle-fill-border-color", - "--highcontrast-progress-circle-fill-border-color-over-background" - ] + "modifiers": { + "mod-progress-circle-size": { + "value": "var(--spectrum-progress-circle-size)", + "description": "Used by `.spectrum-ProgressCircle`, `.spectrum-ProgressCircle-track`, `.spectrum-ProgressCircle-fill`.
Defaults to `var(--spectrum-progress-circle-size)`, if not set.", + "control": "text", + "category": "Modifier" + }, + "mod-progress-circle-position": { + "description": "Used by `.spectrum-ProgressCircle`.", + "control": "text", + "category": "Modifier" + }, + "mod-progress-circle-track-border-style": { + "value": "var(--spectrum-progress-circle-track-border-style)", + "description": "Used by `.spectrum-ProgressCircle-track`.
Defaults to `var(--spectrum-progress-circle-track-border-style)`, if not set.", + "control": "text", + "category": "Modifier" + }, + "mod-progress-circle-thickness": { + "value": "var(--spectrum-progress-circle-thickness)", + "description": "Used by `.spectrum-ProgressCircle-track`, `.spectrum-ProgressCircle-fill`.
Defaults to `var(--spectrum-progress-circle-thickness)`, if not set.", + "control": "text", + "category": "Modifier" + }, + "mod-progress-circle-track-border-color": { + "value": "var(--spectrum-progress-circle-track-border-color)", + "description": "Used by `.spectrum-ProgressCircle-track`.
Defaults to `var(--spectrum-progress-circle-track-border-color)`, if not set.", + "control": "color", + "category": "Modifier" + }, + "mod-progress-circle-fill-border-color": { + "value": "var(--spectrum-progress-circle-fill-border-color)", + "description": "Used by `.spectrum-ProgressCircle-fill`.
Defaults to `var(--spectrum-progress-circle-fill-border-color)`, if not set.", + "control": "color", + "category": "Modifier" + }, + "mod-progress-circle-track-border-color-over-background": { + "value": "var(--spectrum-progress-circle-track-border-color-over-background)", + "description": "Used by `.spectrum-ProgressCircle.spectrum-ProgressCircle--staticWhite .spectrum-ProgressCircle-track`.
Defaults to `var(--spectrum-progress-circle-track-border-color-over-background)`, if not set.", + "control": "color", + "category": "Modifier" + }, + "mod-progress-circle-fill-border-color-over-background": { + "value": "var(--spectrum-progress-circle-fill-border-color-over-background)", + "description": "Used by `.spectrum-ProgressCircle.spectrum-ProgressCircle--staticWhite .spectrum-ProgressCircle-fill`.
Defaults to `var(--spectrum-progress-circle-fill-border-color-over-background)`, if not set.", + "control": "color", + "category": "Modifier" + } + }, + "component": { + "spectrum-progress-circle-track-border-style": { + "description": "Defined in `.spectrum-ProgressCircle-track`, `.spectrum-ProgressCircle`.
Used by `.spectrum-ProgressCircle-track`.", + "control": "text", + "category": "Component" + }, + "spectrum-progress-circle-track-border-color": { + "description": "Defined in `.spectrum-ProgressCircle`.
Used by `.spectrum-ProgressCircle-track`.", + "control": "color", + "category": "Component" + }, + "spectrum-progress-circle-fill-border-color": { + "description": "Defined in `.spectrum-ProgressCircle`.
Used by `.spectrum-ProgressCircle-fill`.", + "control": "color", + "category": "Component" + }, + "spectrum-progress-circle-track-border-color-over-background": { + "description": "Defined in `.spectrum-ProgressCircle`.
Used by `.spectrum-ProgressCircle.spectrum-ProgressCircle--staticWhite .spectrum-ProgressCircle-track`.", + "control": "color", + "category": "Component" + }, + "spectrum-progress-circle-fill-border-color-over-background": { + "description": "Defined in `.spectrum-ProgressCircle`.
Used by `.spectrum-ProgressCircle.spectrum-ProgressCircle--staticWhite .spectrum-ProgressCircle-fill`.", + "control": "color", + "category": "Component" + }, + "spectrum-progress-circle-size": { + "description": "Defined in `.spectrum-ProgressCircle.spectrum-ProgressCircle--small`, `.spectrum-ProgressCircle, .spectrum-ProgressCircle.spectrum-ProgressCircle--medium`, `.spectrum-ProgressCircle.spectrum-ProgressCircle--large`.
Used by `.spectrum-ProgressCircle`, `.spectrum-ProgressCircle-track`, `.spectrum-ProgressCircle-fill`.", + "control": "text", + "category": "Component" + }, + "spectrum-progress-circle-size-small": { + "value": "16px", + "description": "Used by `--spectrum-progress-circle-size`.", + "control": "text", + "category": "Component" + }, + "spectrum-progress-circle-thickness": { + "description": "Defined in `.spectrum-ProgressCircle.spectrum-ProgressCircle--small`, `.spectrum-ProgressCircle, .spectrum-ProgressCircle.spectrum-ProgressCircle--medium`, `.spectrum-ProgressCircle.spectrum-ProgressCircle--large`.
Used by `.spectrum-ProgressCircle-track`, `.spectrum-ProgressCircle-fill`.", + "control": "text", + "category": "Component" + }, + "spectrum-progress-circle-thickness-small": { + "value": "2px", + "description": "Used by `--spectrum-progress-circle-thickness`.", + "control": "text", + "category": "Component" + }, + "spectrum-progress-circle-size-medium": { + "value": "32px", + "description": "Used by `--spectrum-progress-circle-size`.", + "control": "text", + "category": "Component" + }, + "spectrum-progress-circle-thickness-medium": { + "value": "3px", + "description": "Used by `--spectrum-progress-circle-thickness`.", + "control": "text", + "category": "Component" + }, + "spectrum-progress-circle-size-large": { + "value": "64px", + "description": "Used by `--spectrum-progress-circle-size`.", + "control": "text", + "category": "Component" + }, + "spectrum-progress-circle-thickness-large": { + "value": "4px", + "description": "Used by `--spectrum-progress-circle-thickness`.", + "control": "text", + "category": "Component" + } + }, + "global": { + "spectrum-gray-200": { + "value": "light-dark(rgb(225, 225, 225), rgb(50, 50, 50))", + "description": "Used by `--system-progress-circle-track-border-color`.", + "control": "text", + "category": "Global" + }, + "spectrum-transparent-white-400": { + "value": "light-dark(rgba(255, 255, 255, 0.21), rgba(255, 255, 255, 0.21))", + "description": "Used by `--system-progress-circle-track-border-color-over-background`.", + "control": "text", + "category": "Global" + }, + "spectrum-transparent-white-1000": { + "value": "light-dark(rgb(255, 255, 255), rgb(255, 255, 255))", + "description": "Used by `--system-progress-circle-fill-border-color-over-background`.", + "control": "text", + "category": "Global" + }, + "spectrum-gray-300": { + "value": "light-dark(rgb(218, 218, 218), rgb(57, 57, 57))", + "description": "Used by `--spectrum-progress-circle-track-border-color`.", + "control": "text", + "category": "Global" + }, + "spectrum-accent-content-color-default": { + "value": "var(--spectrum-accent-color-900)", + "description": "Used by `--spectrum-progress-circle-fill-border-color`.", + "control": "color", + "category": "Global" + }, + "spectrum-transparent-white-300": { + "value": "light-dark(rgba(255, 255, 255, 0.17), rgba(255, 255, 255, 0.17))", + "description": "Used by `--spectrum-progress-circle-track-border-color-over-background`.", + "control": "text", + "category": "Global" + }, + "spectrum-transparent-white-900": { + "value": "light-dark(rgba(255, 255, 255, 0.94), rgba(255, 255, 255, 0.94))", + "description": "Used by `--spectrum-progress-circle-fill-border-color-over-background`.", + "control": "text", + "category": "Global" + } + }, + "system-theme": { + "system-progress-circle-track-border-color": { + "description": "Defined in `.spectrum`.
Used by `--spectrum-progress-circle-track-border-color`.", + "control": "color" + }, + "system-progress-circle-track-border-color-over-background": { + "description": "Defined in `.spectrum`.
Used by `--spectrum-progress-circle-track-border-color-over-background`.", + "control": "color" + }, + "system-progress-circle-fill-border-color-over-background": { + "description": "Defined in `.spectrum`.
Used by `--spectrum-progress-circle-fill-border-color-over-background`.", + "control": "color" + } + }, + "passthroughs": {}, + "high-contrast": { + "highcontrast-progress-circle-fill-border-color": { + "value": "var(--mod-progress-circle-fill-border-color, var(--spectrum-progress-circle-fill-border-color))", + "description": "Defined in `.spectrum-ProgressCircle`.
Used by `.spectrum-ProgressCircle-fill`.
Defaults to `var(--mod-progress-circle-fill-border-color, var(--spectrum-progress-circle-fill-border-color))`, if not set.", + "control": "color" + }, + "highcontrast-progress-circle-fill-border-color-over-background": { + "value": "var(--mod-progress-circle-fill-border-color-over-background, var(--spectrum-progress-circle-fill-border-color-over-background))", + "description": "Defined in `.spectrum-ProgressCircle`.
Used by `.spectrum-ProgressCircle.spectrum-ProgressCircle--staticWhite .spectrum-ProgressCircle-fill`.
Defaults to `var(--mod-progress-circle-fill-border-color-over-background, var(--spectrum-progress-circle-fill-border-color-over-background))`, if not set.", + "control": "color" + } + } } diff --git a/components/progresscircle/stories/progresscircle.stories.js b/components/progresscircle/stories/progresscircle.stories.js index f64c2f2780a..5b27f6ecb64 100644 --- a/components/progresscircle/stories/progresscircle.stories.js +++ b/components/progresscircle/stories/progresscircle.stories.js @@ -1,11 +1,13 @@ import { Sizes } from "@spectrum-css/preview/decorators"; import { disableDefaultModes } from "@spectrum-css/preview/modes"; import { isIndeterminate, size, staticColor } from "@spectrum-css/preview/types"; -import metadata from "../dist/metadata.json"; -import packageJson from "../package.json"; import { ProgressCircleGroup } from "./progresscircle.test.js"; import { Template } from "./template.js"; +// Local assets to render the component styles and structure +import metadata from "../dist/metadata.json"; +import packageJson from "../package.json"; + /** * Progress circles show the progression of a system operation such as downloading, uploading, processing, etc. in a visual way. They can represent determinate or indeterminate progress. */ @@ -33,6 +35,7 @@ export default { }, packageJson, metadata, + cssprops: metadata.modifiers, }, }; diff --git a/components/radio/dist/metadata.json b/components/radio/dist/metadata.json index b94c6dfcf90..04f1794cdfb 100644 --- a/components/radio/dist/metadata.json +++ b/components/radio/dist/metadata.json @@ -26,10 +26,6 @@ ".spectrum-Radio-label:lang(ja)", ".spectrum-Radio-label:lang(ko)", ".spectrum-Radio-label:lang(zh)", - ".spectrum-Radio.is-readOnly .spectrum-Radio-input", - ".spectrum-Radio.is-readOnly .spectrum-Radio-input:checked:disabled ~ .spectrum-Radio-label", - ".spectrum-Radio.is-readOnly .spectrum-Radio-input:disabled ~ .spectrum-Radio-label", - ".spectrum-Radio.is-readOnly .spectrum-Radio-label", ".spectrum-Radio:active .spectrum-Radio-button:before", ".spectrum-Radio:active .spectrum-Radio-input:checked + .spectrum-Radio-button:before", ".spectrum-Radio:active .spectrum-Radio-label", @@ -44,157 +40,796 @@ ".spectrum-Radio:lang(ja)", ".spectrum-Radio:lang(ko)", ".spectrum-Radio:lang(zh)", + ".spectrum-Radio.is-readOnly .spectrum-Radio-input", + ".spectrum-Radio.is-readOnly .spectrum-Radio-input:checked:disabled ~ .spectrum-Radio-label", + ".spectrum-Radio.is-readOnly .spectrum-Radio-input:disabled ~ .spectrum-Radio-label", + ".spectrum-Radio.is-readOnly .spectrum-Radio-label", "[dir=\"rtl\"] .spectrum-Radio .spectrum-Radio-button:after" ], - "modifiers": [ - "--mod-radio-animation-duration", - "--mod-radio-border-width", - "--mod-radio-button-background-color", - "--mod-radio-button-border-color-default", - "--mod-radio-button-border-color-down", - "--mod-radio-button-border-color-focus", - "--mod-radio-button-border-color-hover", - "--mod-radio-button-checked-border-color-default", - "--mod-radio-button-checked-border-color-down", - "--mod-radio-button-checked-border-color-focus", - "--mod-radio-button-checked-border-color-hover", - "--mod-radio-button-control-size", - "--mod-radio-button-top-to-control", - "--mod-radio-disabled-border-color", - "--mod-radio-disabled-content-color", - "--mod-radio-emphasized-accent-color", - "--mod-radio-emphasized-accent-color-down", - "--mod-radio-emphasized-accent-color-focus", - "--mod-radio-emphasized-accent-color-hover", - "--mod-radio-focus-indicator-color", - "--mod-radio-focus-indicator-thickness", - "--mod-radio-font-size", - "--mod-radio-height", - "--mod-radio-line-height", - "--mod-radio-line-height-cjk", - "--mod-radio-neutral-content-color", - "--mod-radio-neutral-content-color-down", - "--mod-radio-neutral-content-color-focus", - "--mod-radio-neutral-content-color-hover", - "--mod-radio-text-to-control" - ], - "component": [ - "--spectrum-radio-animation-duration", - "--spectrum-radio-border-width", - "--spectrum-radio-button-background-color", - "--spectrum-radio-button-border-color-default", - "--spectrum-radio-button-border-color-down", - "--spectrum-radio-button-border-color-focus", - "--spectrum-radio-button-border-color-hover", - "--spectrum-radio-button-checked-border-color-default", - "--spectrum-radio-button-checked-border-color-down", - "--spectrum-radio-button-checked-border-color-focus", - "--spectrum-radio-button-checked-border-color-hover", - "--spectrum-radio-button-control-size", - "--spectrum-radio-button-control-size-extra-large", - "--spectrum-radio-button-control-size-large", - "--spectrum-radio-button-control-size-medium", - "--spectrum-radio-button-control-size-small", - "--spectrum-radio-button-selection-indicator", - "--spectrum-radio-button-top-to-control", - "--spectrum-radio-button-top-to-control-extra-large", - "--spectrum-radio-button-top-to-control-large", - "--spectrum-radio-button-top-to-control-medium", - "--spectrum-radio-button-top-to-control-small", - "--spectrum-radio-disabled-border-color", - "--spectrum-radio-disabled-content-color", - "--spectrum-radio-emphasized-accent-color", - "--spectrum-radio-emphasized-accent-color-down", - "--spectrum-radio-emphasized-accent-color-focus", - "--spectrum-radio-emphasized-accent-color-hover", - "--spectrum-radio-focus-indicator-color", - "--spectrum-radio-focus-indicator-gap", - "--spectrum-radio-focus-indicator-thickness", - "--spectrum-radio-font-size", - "--spectrum-radio-height", - "--spectrum-radio-label-bottom-to-text", - "--spectrum-radio-label-top-to-text", - "--spectrum-radio-line-height", - "--spectrum-radio-line-height-cjk", - "--spectrum-radio-neutral-content-color", - "--spectrum-radio-neutral-content-color-down", - "--spectrum-radio-neutral-content-color-focus", - "--spectrum-radio-neutral-content-color-hover", - "--spectrum-radio-text-to-control" - ], - "global": [ - "--spectrum-accent-color-1000", - "--spectrum-accent-color-1100", - "--spectrum-accent-color-900", - "--spectrum-animation-duration-100", - "--spectrum-border-width-200", - "--spectrum-cjk-line-height-100", - "--spectrum-component-bottom-to-text-100", - "--spectrum-component-bottom-to-text-200", - "--spectrum-component-bottom-to-text-300", - "--spectrum-component-bottom-to-text-75", - "--spectrum-component-height-100", - "--spectrum-component-height-200", - "--spectrum-component-height-300", - "--spectrum-component-height-75", - "--spectrum-component-top-to-text-100", - "--spectrum-component-top-to-text-200", - "--spectrum-component-top-to-text-300", - "--spectrum-component-top-to-text-75", - "--spectrum-disabled-content-color", - "--spectrum-focus-indicator-color", - "--spectrum-focus-indicator-gap", - "--spectrum-focus-indicator-thickness", - "--spectrum-font-size-100", - "--spectrum-font-size-200", - "--spectrum-font-size-300", - "--spectrum-font-size-75", - "--spectrum-gray-50", - "--spectrum-gray-600", - "--spectrum-gray-700", - "--spectrum-gray-800", - "--spectrum-line-height-100", - "--spectrum-neutral-background-color-selected-default", - "--spectrum-neutral-background-color-selected-down", - "--spectrum-neutral-background-color-selected-hover", - "--spectrum-neutral-background-color-selected-key-focus", - "--spectrum-neutral-content-color-default", - "--spectrum-neutral-content-color-down", - "--spectrum-neutral-content-color-hover", - "--spectrum-neutral-content-color-key-focus", - "--spectrum-text-to-control-100", - "--spectrum-text-to-control-200", - "--spectrum-text-to-control-300", - "--spectrum-text-to-control-75" - ], - "system-theme": [ - "--system-radio-button-background-color", - "--system-radio-button-border-color-default", - "--system-radio-button-border-color-down", - "--system-radio-button-border-color-focus", - "--system-radio-button-border-color-hover" - ], - "passthroughs": [], - "high-contrast": [ - "--highcontrast-radio-button-background-color", - "--highcontrast-radio-button-border-color-default", - "--highcontrast-radio-button-border-color-down", - "--highcontrast-radio-button-border-color-focus", - "--highcontrast-radio-button-border-color-hover", - "--highcontrast-radio-button-checked-border-color-default", - "--highcontrast-radio-button-checked-border-color-down", - "--highcontrast-radio-button-checked-border-color-focus", - "--highcontrast-radio-button-checked-border-color-hover", - "--highcontrast-radio-disabled-border-color", - "--highcontrast-radio-disabled-content-color", - "--highcontrast-radio-emphasized-accent-color", - "--highcontrast-radio-emphasized-accent-color-down", - "--highcontrast-radio-emphasized-accent-color-focus", - "--highcontrast-radio-emphasized-accent-color-hover", - "--highcontrast-radio-focus-indicator-color", - "--highcontrast-radio-neutral-content-color", - "--highcontrast-radio-neutral-content-color-down", - "--highcontrast-radio-neutral-content-color-focus", - "--highcontrast-radio-neutral-content-color-hover" - ] + "modifiers": { + "mod-radio-height": { + "value": "var(--spectrum-radio-height)", + "description": "Used by `.spectrum-Radio`.
Defaults to `var(--spectrum-radio-height)`, if not set.", + "control": "text", + "category": "Modifier" + }, + "mod-radio-button-border-color-down": { + "value": "var(--spectrum-radio-button-border-color-down)", + "description": "Used by `.spectrum-Radio:active .spectrum-Radio-button:before`.
Defaults to `var(--spectrum-radio-button-border-color-down)`, if not set.", + "control": "color", + "category": "Modifier" + }, + "mod-radio-button-checked-border-color-down": { + "value": "var(--spectrum-radio-button-checked-border-color-down)", + "description": "Used by `.spectrum-Radio:active .spectrum-Radio-input:checked + .spectrum-Radio-button:before`.
Defaults to `var(--spectrum-radio-button-checked-border-color-down)`, if not set.", + "control": "color", + "category": "Modifier" + }, + "mod-radio-neutral-content-color-down": { + "value": "var(--spectrum-radio-neutral-content-color-down)", + "description": "Used by `.spectrum-Radio:active .spectrum-Radio-label`.
Defaults to `var(--spectrum-radio-neutral-content-color-down)`, if not set.", + "control": "color", + "category": "Modifier" + }, + "mod-radio-button-border-color-focus": { + "value": "var(--spectrum-radio-button-border-color-focus)", + "description": "Used by `.spectrum-Radio:focus .spectrum-Radio-button:before`.
Defaults to `var(--spectrum-radio-button-border-color-focus)`, if not set.", + "control": "color", + "category": "Modifier" + }, + "mod-radio-focus-indicator-color": { + "value": "var(--spectrum-radio-focus-indicator-color)", + "description": "Used by `.spectrum-Radio:focus .spectrum-Radio-button:after`, `.spectrum-Radio-input:focus-visible + .spectrum-Radio-button:after`.
Defaults to `var(--spectrum-radio-focus-indicator-color)`, if not set.", + "control": "color", + "category": "Modifier" + }, + "mod-radio-focus-indicator-thickness": { + "value": "var(--spectrum-radio-focus-indicator-thickness)", + "description": "Used by `.spectrum-Radio:focus .spectrum-Radio-button:after`, `.spectrum-Radio-input:focus-visible + .spectrum-Radio-button:after`.
Defaults to `var(--spectrum-radio-focus-indicator-thickness)`, if not set.", + "control": "text", + "category": "Modifier" + }, + "mod-radio-button-checked-border-color-focus": { + "value": "var(--spectrum-radio-button-checked-border-color-focus)", + "description": "Used by `.spectrum-Radio:focus .spectrum-Radio-input:checked + .spectrum-Radio-button:before`.
Defaults to `var(--spectrum-radio-button-checked-border-color-focus)`, if not set.", + "control": "color", + "category": "Modifier" + }, + "mod-radio-neutral-content-color-focus": { + "value": "var(--spectrum-radio-neutral-content-color-focus)", + "description": "Used by `.spectrum-Radio:focus .spectrum-Radio-label`.
Defaults to `var(--spectrum-radio-neutral-content-color-focus)`, if not set.", + "control": "color", + "category": "Modifier" + }, + "mod-radio-neutral-content-color": { + "value": "var(--spectrum-radio-neutral-content-color)", + "description": "Used by `.spectrum-Radio.is-readOnly .spectrum-Radio-input:checked:disabled ~ .spectrum-Radio-label, .spectrum-Radio.is-readOnly .spectrum-Radio-input:disabled ~ .spectrum-Radio-label, .spectrum-Radio.is-readOnly .spectrum-Radio-label`, `.spectrum-Radio-label`.
Defaults to `var(--spectrum-radio-neutral-content-color)`, if not set.", + "control": "color", + "category": "Modifier" + }, + "mod-radio-emphasized-accent-color": { + "value": "var(--spectrum-radio-emphasized-accent-color)", + "description": "Used by `.spectrum-Radio--emphasized .spectrum-Radio-input:checked + .spectrum-Radio-button:before`.
Defaults to `var(--spectrum-radio-emphasized-accent-color)`, if not set.", + "control": "color", + "category": "Modifier" + }, + "mod-radio-button-border-color-hover": { + "value": "var(--spectrum-radio-button-border-color-hover)", + "description": "Used by `.spectrum-Radio:hover .spectrum-Radio-button:before`.
Defaults to `var(--spectrum-radio-button-border-color-hover)`, if not set.", + "control": "color", + "category": "Modifier" + }, + "mod-radio-button-checked-border-color-hover": { + "value": "var(--spectrum-radio-button-checked-border-color-hover)", + "description": "Used by `.spectrum-Radio:hover .spectrum-Radio-input:checked + .spectrum-Radio-button:before`.
Defaults to `var(--spectrum-radio-button-checked-border-color-hover)`, if not set.", + "control": "color", + "category": "Modifier" + }, + "mod-radio-neutral-content-color-hover": { + "value": "var(--spectrum-radio-neutral-content-color-hover)", + "description": "Used by `.spectrum-Radio:hover .spectrum-Radio-label`.
Defaults to `var(--spectrum-radio-neutral-content-color-hover)`, if not set.", + "control": "color", + "category": "Modifier" + }, + "mod-radio-emphasized-accent-color-hover": { + "value": "var(--spectrum-radio-emphasized-accent-color-hover)", + "description": "Used by `.spectrum-Radio--emphasized:hover .spectrum-Radio-input:checked + .spectrum-Radio-button:before`.
Defaults to `var(--spectrum-radio-emphasized-accent-color-hover)`, if not set.", + "control": "color", + "category": "Modifier" + }, + "mod-radio-emphasized-accent-color-down": { + "value": "var(--spectrum-radio-emphasized-accent-color-down)", + "description": "Used by `.spectrum-Radio--emphasized:active .spectrum-Radio-input:checked + .spectrum-Radio-button:before`.
Defaults to `var(--spectrum-radio-emphasized-accent-color-down)`, if not set.", + "control": "color", + "category": "Modifier" + }, + "mod-radio-emphasized-accent-color-focus": { + "value": "var(--spectrum-radio-emphasized-accent-color-focus)", + "description": "Used by `.spectrum-Radio--emphasized:focus .spectrum-Radio-input:checked + .spectrum-Radio-button:before`.
Defaults to `var(--spectrum-radio-emphasized-accent-color-focus)`, if not set.", + "control": "color", + "category": "Modifier" + }, + "mod-radio-disabled-border-color": { + "value": "var(--spectrum-radio-disabled-border-color)", + "description": "Used by `.spectrum-Radio .spectrum-Radio-input:checked:disabled + .spectrum-Radio-button:before, .spectrum-Radio .spectrum-Radio-input:disabled + .spectrum-Radio-button:before`.
Defaults to `var(--spectrum-radio-disabled-border-color)`, if not set.", + "control": "color", + "category": "Modifier" + }, + "mod-radio-disabled-content-color": { + "value": "var(--spectrum-radio-disabled-content-color)", + "description": "Used by `.spectrum-Radio .spectrum-Radio-input:checked:disabled ~ .spectrum-Radio-label, .spectrum-Radio .spectrum-Radio-input:disabled ~ .spectrum-Radio-label`.
Defaults to `var(--spectrum-radio-disabled-content-color)`, if not set.", + "control": "color", + "category": "Modifier" + }, + "mod-radio-line-height": { + "value": "var(--spectrum-radio-line-height)", + "description": "Used by `.spectrum-Radio-input`, `.spectrum-Radio-label`.
Defaults to `var(--spectrum-radio-line-height)`, if not set.", + "control": "text", + "category": "Modifier" + }, + "mod-radio-button-checked-border-color-default": { + "value": "var(--spectrum-radio-button-checked-border-color-default)", + "description": "Used by `.spectrum-Radio-input:checked + .spectrum-Radio-button:before`.
Defaults to `var(--spectrum-radio-button-checked-border-color-default)`, if not set.", + "control": "color", + "category": "Modifier" + }, + "mod-radio-text-to-control": { + "value": "var(--spectrum-radio-text-to-control)", + "description": "Used by `.spectrum-Radio-label`.
Defaults to `var(--spectrum-radio-text-to-control)`, if not set.", + "control": "text", + "category": "Modifier" + }, + "mod-radio-font-size": { + "value": "var(--spectrum-radio-font-size)", + "description": "Used by `.spectrum-Radio-label`.
Defaults to `var(--spectrum-radio-font-size)`, if not set.", + "control": "text", + "category": "Modifier" + }, + "mod-radio-animation-duration": { + "value": "var(--spectrum-radio-animation-duration)", + "description": "Used by `.spectrum-Radio-label`, `.spectrum-Radio-button:before`, `.spectrum-Radio-button:after`.
Defaults to `var(--spectrum-radio-animation-duration)`, if not set.", + "control": "text", + "category": "Modifier" + }, + "mod-radio-line-height-cjk": { + "value": "var(--spectrum-radio-line-height-cjk)", + "description": "Used by `.spectrum-Radio-label:lang(ja), .spectrum-Radio-label:lang(ko), .spectrum-Radio-label:lang(zh)`.
Defaults to `var(--spectrum-radio-line-height-cjk)`, if not set.", + "control": "text", + "category": "Modifier" + }, + "mod-radio-button-control-size": { + "value": "var(--spectrum-radio-button-control-size)", + "description": "Used by `.spectrum-Radio-button`, `.spectrum-Radio-button:before`.
Defaults to `var(--spectrum-radio-button-control-size)`, if not set.", + "control": "text", + "category": "Modifier" + }, + "mod-radio-button-top-to-control": { + "value": "var(--spectrum-radio-button-top-to-control)", + "description": "Used by `.spectrum-Radio-button`.
Defaults to `var(--spectrum-radio-button-top-to-control)`, if not set.", + "control": "text", + "category": "Modifier" + }, + "mod-radio-button-background-color": { + "value": "var(--spectrum-radio-button-background-color)", + "description": "Used by `.spectrum-Radio-button:before`.
Defaults to `var(--spectrum-radio-button-background-color)`, if not set.", + "control": "color", + "category": "Modifier" + }, + "mod-radio-border-width": { + "value": "var(--spectrum-radio-border-width)", + "description": "Used by `.spectrum-Radio-button:before`.
Defaults to `var(--spectrum-radio-border-width)`, if not set.", + "control": "text", + "category": "Modifier" + }, + "mod-radio-button-border-color-default": { + "value": "var(--spectrum-radio-button-border-color-default)", + "description": "Used by `.spectrum-Radio-button:before`.
Defaults to `var(--spectrum-radio-button-border-color-default)`, if not set.", + "control": "color", + "category": "Modifier" + } + }, + "component": { + "spectrum-radio-neutral-content-color": { + "description": "Defined in `.spectrum-Radio`.
Used by `.spectrum-Radio.is-readOnly .spectrum-Radio-input:checked:disabled ~ .spectrum-Radio-label, .spectrum-Radio.is-readOnly .spectrum-Radio-input:disabled ~ .spectrum-Radio-label, .spectrum-Radio.is-readOnly .spectrum-Radio-label`, `.spectrum-Radio-label`.", + "control": "color", + "category": "Component" + }, + "spectrum-radio-neutral-content-color-hover": { + "description": "Defined in `.spectrum-Radio`.
Used by `.spectrum-Radio:hover .spectrum-Radio-label`.", + "control": "color", + "category": "Component" + }, + "spectrum-radio-neutral-content-color-down": { + "description": "Defined in `.spectrum-Radio`.
Used by `.spectrum-Radio:active .spectrum-Radio-label`.", + "control": "color", + "category": "Component" + }, + "spectrum-radio-neutral-content-color-focus": { + "description": "Defined in `.spectrum-Radio`.
Used by `.spectrum-Radio:focus .spectrum-Radio-label`.", + "control": "color", + "category": "Component" + }, + "spectrum-radio-focus-indicator-thickness": { + "description": "Defined in `.spectrum-Radio`.
Used by `.spectrum-Radio:focus .spectrum-Radio-button:after`, `.spectrum-Radio-input:focus-visible + .spectrum-Radio-button:after`.", + "control": "text", + "category": "Component" + }, + "spectrum-radio-focus-indicator-gap": { + "description": "Defined in `.spectrum-Radio`.
Used by `.spectrum-Radio:focus .spectrum-Radio-button:after`, `.spectrum-Radio-input:focus-visible + .spectrum-Radio-button:after`.", + "control": "text", + "category": "Component" + }, + "spectrum-radio-focus-indicator-color": { + "description": "Defined in `.spectrum-Radio`.
Used by `.spectrum-Radio:focus .spectrum-Radio-button:after`, `.spectrum-Radio-input:focus-visible + .spectrum-Radio-button:after`.", + "control": "color", + "category": "Component" + }, + "spectrum-radio-disabled-content-color": { + "description": "Defined in `.spectrum-Radio`.
Used by `.spectrum-Radio .spectrum-Radio-input:checked:disabled ~ .spectrum-Radio-label, .spectrum-Radio .spectrum-Radio-input:disabled ~ .spectrum-Radio-label`.", + "control": "color", + "category": "Component" + }, + "spectrum-radio-disabled-border-color": { + "description": "Defined in `.spectrum-Radio`.
Used by `.spectrum-Radio .spectrum-Radio-input:checked:disabled + .spectrum-Radio-button:before, .spectrum-Radio .spectrum-Radio-input:disabled + .spectrum-Radio-button:before`.", + "control": "color", + "category": "Component" + }, + "spectrum-radio-emphasized-accent-color": { + "description": "Defined in `.spectrum-Radio`.
Used by `.spectrum-Radio--emphasized .spectrum-Radio-input:checked + .spectrum-Radio-button:before`.", + "control": "color", + "category": "Component" + }, + "spectrum-radio-emphasized-accent-color-hover": { + "description": "Defined in `.spectrum-Radio`.
Used by `.spectrum-Radio--emphasized:hover .spectrum-Radio-input:checked + .spectrum-Radio-button:before`.", + "control": "color", + "category": "Component" + }, + "spectrum-radio-emphasized-accent-color-down": { + "description": "Defined in `.spectrum-Radio`.
Used by `.spectrum-Radio--emphasized:active .spectrum-Radio-input:checked + .spectrum-Radio-button:before`.", + "control": "color", + "category": "Component" + }, + "spectrum-radio-emphasized-accent-color-focus": { + "description": "Defined in `.spectrum-Radio`.
Used by `.spectrum-Radio--emphasized:focus .spectrum-Radio-input:checked + .spectrum-Radio-button:before`.", + "control": "color", + "category": "Component" + }, + "spectrum-radio-border-width": { + "description": "Defined in `.spectrum-Radio`.
Used by `.spectrum-Radio-button:before`.", + "control": "text", + "category": "Component" + }, + "spectrum-radio-button-checked-border-color-default": { + "description": "Defined in `.spectrum-Radio`.
Used by `.spectrum-Radio-input:checked + .spectrum-Radio-button:before`.", + "control": "color", + "category": "Component" + }, + "spectrum-radio-button-checked-border-color-hover": { + "description": "Defined in `.spectrum-Radio`.
Used by `.spectrum-Radio:hover .spectrum-Radio-input:checked + .spectrum-Radio-button:before`.", + "control": "color", + "category": "Component" + }, + "spectrum-radio-button-checked-border-color-down": { + "description": "Defined in `.spectrum-Radio`.
Used by `.spectrum-Radio:active .spectrum-Radio-input:checked + .spectrum-Radio-button:before`.", + "control": "color", + "category": "Component" + }, + "spectrum-radio-button-checked-border-color-focus": { + "description": "Defined in `.spectrum-Radio`.
Used by `.spectrum-Radio:focus .spectrum-Radio-input:checked + .spectrum-Radio-button:before`.", + "control": "color", + "category": "Component" + }, + "spectrum-radio-line-height": { + "description": "Defined in `.spectrum-Radio`.
Used by `.spectrum-Radio-input`, `.spectrum-Radio-label`.", + "control": "text", + "category": "Component" + }, + "spectrum-radio-animation-duration": { + "description": "Defined in `.spectrum-Radio`.
Used by `.spectrum-Radio-label`, `.spectrum-Radio-button:before`, `.spectrum-Radio-button:after`.", + "control": "text", + "category": "Component" + }, + "spectrum-radio-line-height-cjk": { + "description": "Defined in `.spectrum-Radio:lang(ja), .spectrum-Radio:lang(ko), .spectrum-Radio:lang(zh)`.
Used by `.spectrum-Radio-label:lang(ja), .spectrum-Radio-label:lang(ko), .spectrum-Radio-label:lang(zh)`.", + "control": "text", + "category": "Component" + }, + "spectrum-radio-height": { + "description": "Defined in `.spectrum-Radio, .spectrum-Radio--sizeM`, `.spectrum-Radio--sizeS`, `.spectrum-Radio--sizeL`, `.spectrum-Radio--sizeXL`.
Used by `.spectrum-Radio`.", + "control": "text", + "category": "Component" + }, + "spectrum-radio-button-control-size": { + "description": "Defined in `.spectrum-Radio, .spectrum-Radio--sizeM`, `.spectrum-Radio--sizeS`, `.spectrum-Radio--sizeL`, `.spectrum-Radio--sizeXL`.
Used by `.spectrum-Radio:focus .spectrum-Radio-button:after`, `.spectrum-Radio-input:checked + .spectrum-Radio-button:before`, `.spectrum-Radio-input:focus-visible + .spectrum-Radio-button:after`, `.spectrum-Radio-button`, `.spectrum-Radio-button:before`.", + "control": "text", + "category": "Component" + }, + "spectrum-radio-button-control-size-medium": { + "value": "14px", + "description": "Used by `--spectrum-radio-button-control-size`.", + "control": "text", + "category": "Component" + }, + "spectrum-radio-text-to-control": { + "description": "Defined in `.spectrum-Radio, .spectrum-Radio--sizeM`, `.spectrum-Radio--sizeS`, `.spectrum-Radio--sizeL`, `.spectrum-Radio--sizeXL`.
Used by `.spectrum-Radio-label`.", + "control": "text", + "category": "Component" + }, + "spectrum-radio-label-top-to-text": { + "description": "Defined in `.spectrum-Radio, .spectrum-Radio--sizeM`, `.spectrum-Radio--sizeS`, `.spectrum-Radio--sizeL`, `.spectrum-Radio--sizeXL`.
Used by `.spectrum-Radio-label`.", + "control": "text", + "category": "Component" + }, + "spectrum-radio-label-bottom-to-text": { + "description": "Defined in `.spectrum-Radio, .spectrum-Radio--sizeM`, `.spectrum-Radio--sizeS`, `.spectrum-Radio--sizeL`, `.spectrum-Radio--sizeXL`.
Used by `.spectrum-Radio-label`.", + "control": "text", + "category": "Component" + }, + "spectrum-radio-button-top-to-control": { + "description": "Defined in `.spectrum-Radio, .spectrum-Radio--sizeM`, `.spectrum-Radio--sizeS`, `.spectrum-Radio--sizeL`, `.spectrum-Radio--sizeXL`.
Used by `.spectrum-Radio-button`.", + "control": "text", + "category": "Component" + }, + "spectrum-radio-button-top-to-control-medium": { + "value": "9px", + "description": "Used by `--spectrum-radio-button-top-to-control`.", + "control": "text", + "category": "Component" + }, + "spectrum-radio-font-size": { + "description": "Defined in `.spectrum-Radio, .spectrum-Radio--sizeM`, `.spectrum-Radio--sizeS`, `.spectrum-Radio--sizeL`, `.spectrum-Radio--sizeXL`.
Used by `.spectrum-Radio-label`.", + "control": "text", + "category": "Component" + }, + "spectrum-radio-button-control-size-small": { + "value": "12px", + "description": "Used by `--spectrum-radio-button-control-size`.", + "control": "text", + "category": "Component" + }, + "spectrum-radio-button-top-to-control-small": { + "value": "6px", + "description": "Used by `--spectrum-radio-button-top-to-control`.", + "control": "text", + "category": "Component" + }, + "spectrum-radio-button-control-size-large": { + "value": "16px", + "description": "Used by `--spectrum-radio-button-control-size`.", + "control": "text", + "category": "Component" + }, + "spectrum-radio-button-top-to-control-large": { + "value": "12px", + "description": "Used by `--spectrum-radio-button-top-to-control`.", + "control": "text", + "category": "Component" + }, + "spectrum-radio-button-control-size-extra-large": { + "value": "18px", + "description": "Used by `--spectrum-radio-button-control-size`.", + "control": "text", + "category": "Component" + }, + "spectrum-radio-button-top-to-control-extra-large": { + "value": "15px", + "description": "Used by `--spectrum-radio-button-top-to-control`.", + "control": "text", + "category": "Component" + }, + "spectrum-radio-button-border-color-down": { + "description": "Defined in `.spectrum-Radio`.
Used by `.spectrum-Radio:active .spectrum-Radio-button:before`.", + "control": "color", + "category": "Component" + }, + "spectrum-radio-button-border-color-focus": { + "description": "Defined in `.spectrum-Radio`.
Used by `.spectrum-Radio:focus .spectrum-Radio-button:before`.", + "control": "color", + "category": "Component" + }, + "spectrum-radio-button-border-color-hover": { + "description": "Defined in `.spectrum-Radio`.
Used by `.spectrum-Radio:hover .spectrum-Radio-button:before`.", + "control": "color", + "category": "Component" + }, + "spectrum-radio-button-selection-indicator": { + "value": "4px", + "description": "Used by `.spectrum-Radio-input:checked + .spectrum-Radio-button:before`.", + "control": "text", + "category": "Component" + }, + "spectrum-radio-button-background-color": { + "description": "Defined in `.spectrum-Radio`.
Used by `.spectrum-Radio-button:before`.", + "control": "color", + "category": "Component" + }, + "spectrum-radio-button-border-color-default": { + "description": "Defined in `.spectrum-Radio`.
Used by `.spectrum-Radio-button:before`.", + "control": "color", + "category": "Component" + } + }, + "global": { + "spectrum-gray-600": { + "value": "light-dark(rgb(113, 113, 113), rgb(138, 138, 138))", + "description": "Used by `--system-radio-button-border-color-default`.", + "control": "text", + "category": "Global" + }, + "spectrum-gray-700": { + "value": "light-dark(rgb(80, 80, 80), rgb(175, 175, 175))", + "description": "Used by `--system-radio-button-border-color-hover`, `--system-radio-button-border-color-focus`.", + "control": "text", + "category": "Global" + }, + "spectrum-gray-800": { + "value": "light-dark(rgb(41, 41, 41), rgb(219, 219, 219))", + "description": "Used by `--system-radio-button-border-color-down`.", + "control": "text", + "category": "Global" + }, + "spectrum-gray-50": { + "value": "light-dark(rgb(248, 248, 248), rgb(27, 27, 27))", + "description": "Used by `--system-radio-button-background-color`.", + "control": "text", + "category": "Global" + }, + "spectrum-neutral-content-color-default": { + "value": "var(--spectrum-gray-800)", + "description": "Used by `--spectrum-radio-neutral-content-color`.", + "control": "color", + "category": "Global" + }, + "spectrum-neutral-content-color-hover": { + "value": "var(--spectrum-gray-900)", + "description": "Used by `--spectrum-radio-neutral-content-color-hover`.", + "control": "color", + "category": "Global" + }, + "spectrum-neutral-content-color-down": { + "value": "var(--spectrum-gray-900)", + "description": "Used by `--spectrum-radio-neutral-content-color-down`.", + "control": "color", + "category": "Global" + }, + "spectrum-neutral-content-color-key-focus": { + "value": "var(--spectrum-gray-900)", + "description": "Used by `--spectrum-radio-neutral-content-color-focus`.", + "control": "color", + "category": "Global" + }, + "spectrum-focus-indicator-thickness": { + "value": "2px", + "description": "Used by `--spectrum-radio-focus-indicator-thickness`.", + "control": "text", + "category": "Global" + }, + "spectrum-focus-indicator-gap": { + "value": "2px", + "description": "Used by `--spectrum-radio-focus-indicator-gap`.", + "control": "text", + "category": "Global" + }, + "spectrum-focus-indicator-color": { + "value": "var(--spectrum-blue-800)", + "description": "Used by `--spectrum-radio-focus-indicator-color`.", + "control": "color", + "category": "Global" + }, + "spectrum-disabled-content-color": { + "value": "var(--spectrum-gray-400)", + "description": "Used by `--spectrum-radio-disabled-content-color`, `--spectrum-radio-disabled-border-color`.", + "control": "color", + "category": "Global" + }, + "spectrum-accent-color-900": { + "value": "var(--spectrum-blue-900)", + "description": "Used by `--spectrum-radio-emphasized-accent-color`.", + "control": "color", + "category": "Global" + }, + "spectrum-accent-color-1000": { + "value": "var(--spectrum-blue-1000)", + "description": "Used by `--spectrum-radio-emphasized-accent-color-hover`, `--spectrum-radio-emphasized-accent-color-focus`.", + "control": "color", + "category": "Global" + }, + "spectrum-accent-color-1100": { + "value": "var(--spectrum-blue-1100)", + "description": "Used by `--spectrum-radio-emphasized-accent-color-down`.", + "control": "color", + "category": "Global" + }, + "spectrum-border-width-200": { + "value": "2px", + "description": "Used by `--spectrum-radio-border-width`.", + "control": "text", + "category": "Global" + }, + "spectrum-neutral-background-color-selected-default": { + "value": "var(--spectrum-gray-800)", + "description": "Used by `--spectrum-radio-button-checked-border-color-default`.", + "control": "color", + "category": "Global" + }, + "spectrum-neutral-background-color-selected-hover": { + "value": "var(--spectrum-gray-900)", + "description": "Used by `--spectrum-radio-button-checked-border-color-hover`.", + "control": "color", + "category": "Global" + }, + "spectrum-neutral-background-color-selected-down": { + "value": "var(--spectrum-gray-900)", + "description": "Used by `--spectrum-radio-button-checked-border-color-down`.", + "control": "color", + "category": "Global" + }, + "spectrum-neutral-background-color-selected-key-focus": { + "value": "var(--spectrum-gray-900)", + "description": "Used by `--spectrum-radio-button-checked-border-color-focus`.", + "control": "color", + "category": "Global" + }, + "spectrum-line-height-100": { + "value": "1.3", + "description": "Used by `--spectrum-radio-line-height`.", + "control": "text", + "category": "Global" + }, + "spectrum-animation-duration-100": { + "description": "Used by `--spectrum-radio-animation-duration`.", + "control": "text", + "category": "Global" + }, + "spectrum-cjk-line-height-100": { + "value": "1.5", + "description": "Used by `--spectrum-radio-line-height-cjk`.", + "control": "text", + "category": "Global" + }, + "spectrum-component-height-100": { + "value": "32px", + "description": "Used by `--spectrum-radio-height`.", + "control": "text", + "category": "Global" + }, + "spectrum-text-to-control-100": { + "value": "10px", + "description": "Used by `--spectrum-radio-text-to-control`.", + "control": "text", + "category": "Global" + }, + "spectrum-component-top-to-text-100": { + "value": "6px", + "description": "Used by `--spectrum-radio-label-top-to-text`.", + "control": "text", + "category": "Global" + }, + "spectrum-component-bottom-to-text-100": { + "value": "9px", + "description": "Used by `--spectrum-radio-label-bottom-to-text`.", + "control": "text", + "category": "Global" + }, + "spectrum-font-size-100": { + "value": "14px", + "description": "Used by `--spectrum-radio-font-size`.", + "control": "text", + "category": "Global" + }, + "spectrum-component-height-75": { + "value": "24px", + "description": "Used by `--spectrum-radio-height`.", + "control": "text", + "category": "Global" + }, + "spectrum-text-to-control-75": { + "value": "9px", + "description": "Used by `--spectrum-radio-text-to-control`.", + "control": "text", + "category": "Global" + }, + "spectrum-component-top-to-text-75": { + "value": "4px", + "description": "Used by `--spectrum-radio-label-top-to-text`.", + "control": "text", + "category": "Global" + }, + "spectrum-component-bottom-to-text-75": { + "value": "5px", + "description": "Used by `--spectrum-radio-label-bottom-to-text`.", + "control": "text", + "category": "Global" + }, + "spectrum-font-size-75": { + "value": "12px", + "description": "Used by `--spectrum-radio-font-size`.", + "control": "text", + "category": "Global" + }, + "spectrum-component-height-200": { + "value": "40px", + "description": "Used by `--spectrum-radio-height`.", + "control": "text", + "category": "Global" + }, + "spectrum-text-to-control-200": { + "value": "11px", + "description": "Used by `--spectrum-radio-text-to-control`.", + "control": "text", + "category": "Global" + }, + "spectrum-component-top-to-text-200": { + "value": "9px", + "description": "Used by `--spectrum-radio-label-top-to-text`.", + "control": "text", + "category": "Global" + }, + "spectrum-component-bottom-to-text-200": { + "value": "11px", + "description": "Used by `--spectrum-radio-label-bottom-to-text`.", + "control": "text", + "category": "Global" + }, + "spectrum-font-size-200": { + "value": "16px", + "description": "Used by `--spectrum-radio-font-size`.", + "control": "text", + "category": "Global" + }, + "spectrum-component-height-300": { + "value": "48px", + "description": "Used by `--spectrum-radio-height`.", + "control": "text", + "category": "Global" + }, + "spectrum-text-to-control-300": { + "value": "13px", + "description": "Used by `--spectrum-radio-text-to-control`.", + "control": "text", + "category": "Global" + }, + "spectrum-component-top-to-text-300": { + "value": "12px", + "description": "Used by `--spectrum-radio-label-top-to-text`.", + "control": "text", + "category": "Global" + }, + "spectrum-component-bottom-to-text-300": { + "value": "14px", + "description": "Used by `--spectrum-radio-label-bottom-to-text`.", + "control": "text", + "category": "Global" + }, + "spectrum-font-size-300": { + "value": "18px", + "description": "Used by `--spectrum-radio-font-size`.", + "control": "text", + "category": "Global" + } + }, + "system-theme": { + "system-radio-button-border-color-default": { + "description": "Defined in `.spectrum`.
Used by `--spectrum-radio-button-border-color-default`.", + "control": "color" + }, + "system-radio-button-border-color-hover": { + "description": "Defined in `.spectrum`.
Used by `--spectrum-radio-button-border-color-hover`.", + "control": "color" + }, + "system-radio-button-border-color-down": { + "description": "Defined in `.spectrum`.
Used by `--spectrum-radio-button-border-color-down`.", + "control": "color" + }, + "system-radio-button-border-color-focus": { + "description": "Defined in `.spectrum`.
Used by `--spectrum-radio-button-border-color-focus`.", + "control": "color" + }, + "system-radio-button-background-color": { + "description": "Defined in `.spectrum`.
Used by `--spectrum-radio-button-background-color`.", + "control": "color" + } + }, + "passthroughs": {}, + "high-contrast": { + "highcontrast-radio-button-background-color": { + "description": "Defined in `.spectrum-Radio`.", + "control": "color" + }, + "highcontrast-radio-neutral-content-color": { + "value": "var(--mod-radio-neutral-content-color, var(--spectrum-radio-neutral-content-color))", + "description": "Defined in `.spectrum-Radio`.
Used by `.spectrum-Radio.is-readOnly .spectrum-Radio-input:checked:disabled ~ .spectrum-Radio-label, .spectrum-Radio.is-readOnly .spectrum-Radio-input:disabled ~ .spectrum-Radio-label, .spectrum-Radio.is-readOnly .spectrum-Radio-label`, `.spectrum-Radio-label`.
Defaults to `var(--mod-radio-neutral-content-color, var(--spectrum-radio-neutral-content-color))`, if not set.", + "control": "color" + }, + "highcontrast-radio-neutral-content-color-hover": { + "value": "var(--mod-radio-neutral-content-color-hover, var(--spectrum-radio-neutral-content-color-hover))", + "description": "Defined in `.spectrum-Radio`.
Used by `.spectrum-Radio:hover .spectrum-Radio-label`.
Defaults to `var(--mod-radio-neutral-content-color-hover, var(--spectrum-radio-neutral-content-color-hover))`, if not set.", + "control": "color" + }, + "highcontrast-radio-neutral-content-color-down": { + "value": "var(--mod-radio-neutral-content-color-down, var(--spectrum-radio-neutral-content-color-down))", + "description": "Defined in `.spectrum-Radio`.
Used by `.spectrum-Radio:active .spectrum-Radio-label`.
Defaults to `var(--mod-radio-neutral-content-color-down, var(--spectrum-radio-neutral-content-color-down))`, if not set.", + "control": "color" + }, + "highcontrast-radio-neutral-content-color-focus": { + "value": "var(--mod-radio-neutral-content-color-focus, var(--spectrum-radio-neutral-content-color-focus))", + "description": "Defined in `.spectrum-Radio`.
Used by `.spectrum-Radio:focus .spectrum-Radio-label`.
Defaults to `var(--mod-radio-neutral-content-color-focus, var(--spectrum-radio-neutral-content-color-focus))`, if not set.", + "control": "color" + }, + "highcontrast-radio-button-border-color-default": { + "value": "var(--mod-radio-button-border-color-default, var(--spectrum-radio-button-border-color-default))", + "description": "Defined in `.spectrum-Radio`.
Used by `.spectrum-Radio-button:before`.
Defaults to `var(--mod-radio-button-border-color-default, var(--spectrum-radio-button-border-color-default))`, if not set.", + "control": "color" + }, + "highcontrast-radio-button-border-color-hover": { + "value": "var(--mod-radio-button-border-color-hover, var(--spectrum-radio-button-border-color-hover))", + "description": "Defined in `.spectrum-Radio`.
Used by `.spectrum-Radio:hover .spectrum-Radio-button:before`.
Defaults to `var(--mod-radio-button-border-color-hover, var(--spectrum-radio-button-border-color-hover))`, if not set.", + "control": "color" + }, + "highcontrast-radio-button-border-color-down": { + "value": "var(--mod-radio-button-border-color-down, var(--spectrum-radio-button-border-color-down))", + "description": "Defined in `.spectrum-Radio`.
Used by `.spectrum-Radio:active .spectrum-Radio-button:before`.
Defaults to `var(--mod-radio-button-border-color-down, var(--spectrum-radio-button-border-color-down))`, if not set.", + "control": "color" + }, + "highcontrast-radio-button-border-color-focus": { + "value": "var(--mod-radio-button-border-color-focus, var(--spectrum-radio-button-border-color-focus))", + "description": "Defined in `.spectrum-Radio`.
Used by `.spectrum-Radio:focus .spectrum-Radio-button:before`.
Defaults to `var(--mod-radio-button-border-color-focus, var(--spectrum-radio-button-border-color-focus))`, if not set.", + "control": "color" + }, + "highcontrast-radio-emphasized-accent-color": { + "value": "var(--mod-radio-emphasized-accent-color, var(--spectrum-radio-emphasized-accent-color))", + "description": "Defined in `.spectrum-Radio`.
Used by `.spectrum-Radio--emphasized .spectrum-Radio-input:checked + .spectrum-Radio-button:before`.
Defaults to `var(--mod-radio-emphasized-accent-color, var(--spectrum-radio-emphasized-accent-color))`, if not set.", + "control": "color" + }, + "highcontrast-radio-emphasized-accent-color-hover": { + "value": "var(--mod-radio-emphasized-accent-color-hover, var(--spectrum-radio-emphasized-accent-color-hover))", + "description": "Defined in `.spectrum-Radio`.
Used by `.spectrum-Radio--emphasized:hover .spectrum-Radio-input:checked + .spectrum-Radio-button:before`.
Defaults to `var(--mod-radio-emphasized-accent-color-hover, var(--spectrum-radio-emphasized-accent-color-hover))`, if not set.", + "control": "color" + }, + "highcontrast-radio-emphasized-accent-color-down": { + "value": "var(--mod-radio-emphasized-accent-color-down, var(--spectrum-radio-emphasized-accent-color-down))", + "description": "Defined in `.spectrum-Radio`.
Used by `.spectrum-Radio--emphasized:active .spectrum-Radio-input:checked + .spectrum-Radio-button:before`.
Defaults to `var(--mod-radio-emphasized-accent-color-down, var(--spectrum-radio-emphasized-accent-color-down))`, if not set.", + "control": "color" + }, + "highcontrast-radio-emphasized-accent-color-focus": { + "value": "var(--mod-radio-emphasized-accent-color-focus, var(--spectrum-radio-emphasized-accent-color-focus))", + "description": "Defined in `.spectrum-Radio`.
Used by `.spectrum-Radio--emphasized:focus .spectrum-Radio-input:checked + .spectrum-Radio-button:before`.
Defaults to `var(--mod-radio-emphasized-accent-color-focus, var(--spectrum-radio-emphasized-accent-color-focus))`, if not set.", + "control": "color" + }, + "highcontrast-radio-button-checked-border-color-default": { + "value": "var(--mod-radio-button-checked-border-color-default, var(--spectrum-radio-button-checked-border-color-default))", + "description": "Defined in `.spectrum-Radio`.
Used by `.spectrum-Radio-input:checked + .spectrum-Radio-button:before`.
Defaults to `var(--mod-radio-button-checked-border-color-default, var(--spectrum-radio-button-checked-border-color-default))`, if not set.", + "control": "color" + }, + "highcontrast-radio-button-checked-border-color-hover": { + "value": "var(--mod-radio-button-checked-border-color-hover, var(--spectrum-radio-button-checked-border-color-hover))", + "description": "Defined in `.spectrum-Radio`.
Used by `.spectrum-Radio:hover .spectrum-Radio-input:checked + .spectrum-Radio-button:before`.
Defaults to `var(--mod-radio-button-checked-border-color-hover, var(--spectrum-radio-button-checked-border-color-hover))`, if not set.", + "control": "color" + }, + "highcontrast-radio-button-checked-border-color-down": { + "value": "var(--mod-radio-button-checked-border-color-down, var(--spectrum-radio-button-checked-border-color-down))", + "description": "Defined in `.spectrum-Radio`.
Used by `.spectrum-Radio:active .spectrum-Radio-input:checked + .spectrum-Radio-button:before`.
Defaults to `var(--mod-radio-button-checked-border-color-down, var(--spectrum-radio-button-checked-border-color-down))`, if not set.", + "control": "color" + }, + "highcontrast-radio-button-checked-border-color-focus": { + "value": "var(--mod-radio-button-checked-border-color-focus, var(--spectrum-radio-button-checked-border-color-focus))", + "description": "Defined in `.spectrum-Radio`.
Used by `.spectrum-Radio:focus .spectrum-Radio-input:checked + .spectrum-Radio-button:before`.
Defaults to `var(--mod-radio-button-checked-border-color-focus, var(--spectrum-radio-button-checked-border-color-focus))`, if not set.", + "control": "color" + }, + "highcontrast-radio-disabled-content-color": { + "value": "var(--mod-radio-disabled-content-color, var(--spectrum-radio-disabled-content-color))", + "description": "Defined in `.spectrum-Radio`.
Used by `.spectrum-Radio .spectrum-Radio-input:checked:disabled ~ .spectrum-Radio-label, .spectrum-Radio .spectrum-Radio-input:disabled ~ .spectrum-Radio-label`.
Defaults to `var(--mod-radio-disabled-content-color, var(--spectrum-radio-disabled-content-color))`, if not set.", + "control": "color" + }, + "highcontrast-radio-disabled-border-color": { + "value": "var(--mod-radio-disabled-border-color, var(--spectrum-radio-disabled-border-color))", + "description": "Defined in `.spectrum-Radio`.
Used by `.spectrum-Radio .spectrum-Radio-input:checked:disabled + .spectrum-Radio-button:before, .spectrum-Radio .spectrum-Radio-input:disabled + .spectrum-Radio-button:before`.
Defaults to `var(--mod-radio-disabled-border-color, var(--spectrum-radio-disabled-border-color))`, if not set.", + "control": "color" + }, + "highcontrast-radio-focus-indicator-color": { + "value": "var(--mod-radio-focus-indicator-color, var(--spectrum-radio-focus-indicator-color))", + "description": "Defined in `.spectrum-Radio`.
Used by `.spectrum-Radio:focus .spectrum-Radio-button:after`, `.spectrum-Radio-input:focus-visible + .spectrum-Radio-button:after`.
Defaults to `var(--mod-radio-focus-indicator-color, var(--spectrum-radio-focus-indicator-color))`, if not set.", + "control": "color" + } + } } diff --git a/components/radio/stories/radio.stories.js b/components/radio/stories/radio.stories.js index 1d6ff3d9b16..3a78c6beea6 100644 --- a/components/radio/stories/radio.stories.js +++ b/components/radio/stories/radio.stories.js @@ -1,11 +1,13 @@ import { Sizes } from "@spectrum-css/preview/decorators"; import { disableDefaultModes } from "@spectrum-css/preview/modes"; import { isChecked, isDisabled, isEmphasized, isReadOnly, size } from "@spectrum-css/preview/types"; -import metadata from "../dist/metadata.json"; -import packageJson from "../package.json"; import { RadioGroup } from "./radio.test.js"; import { BasicGroupTemplate } from "./template.js"; +// Local assets to render the component styles and structure +import metadata from "../dist/metadata.json"; +import packageJson from "../package.json"; + /** * Radio buttons allow users to select a single option from a list of mutually exclusive options. All possible options are exposed up front for users to compare. * @@ -60,6 +62,7 @@ export default { }, packageJson, metadata, + cssprops: metadata.modifiers, }, }; diff --git a/components/rating/dist/metadata.json b/components/rating/dist/metadata.json index 75ee43e0895..b7d2fb78653 100644 --- a/components/rating/dist/metadata.json +++ b/components/rating/dist/metadata.json @@ -3,118 +3,421 @@ "selectors": [ ".spectrum-Rating", ".spectrum-Rating--emphasized .spectrum-Rating-icon", - ".spectrum-Rating--emphasized .spectrum-Rating-icon.is-selected", ".spectrum-Rating--emphasized .spectrum-Rating-icon:hover ~ .spectrum-Rating-icon", - ".spectrum-Rating--emphasized.is-focused .spectrum-Rating-icon.is-selected", + ".spectrum-Rating--emphasized .spectrum-Rating-icon.is-selected", ".spectrum-Rating--emphasized:hover .spectrum-Rating-icon", - ".spectrum-Rating--emphasized:hover .spectrum-Rating-icon.is-currentValue:after", ".spectrum-Rating--emphasized:hover .spectrum-Rating-icon:active", ".spectrum-Rating--emphasized:hover .spectrum-Rating-icon:hover", ".spectrum-Rating--emphasized:hover .spectrum-Rating-icon:hover ~ .spectrum-Rating-icon", + ".spectrum-Rating--emphasized:hover .spectrum-Rating-icon.is-currentValue:after", + ".spectrum-Rating--emphasized.is-focused .spectrum-Rating-icon.is-selected", ".spectrum-Rating-icon", ".spectrum-Rating-icon .spectrum-Rating-starActive", ".spectrum-Rating-icon .spectrum-Rating-starInactive", + ".spectrum-Rating-icon:hover ~ .spectrum-Rating-icon", + ".spectrum-Rating-icon:hover ~ .spectrum-Rating-icon .spectrum-Rating-starActive", + ".spectrum-Rating-icon:hover ~ .spectrum-Rating-icon .spectrum-Rating-starInactive", ".spectrum-Rating-icon.is-currentValue:after", ".spectrum-Rating-icon.is-selected", ".spectrum-Rating-icon.is-selected .spectrum-Rating-starActive", ".spectrum-Rating-icon.is-selected .spectrum-Rating-starInactive", - ".spectrum-Rating-icon:hover ~ .spectrum-Rating-icon", - ".spectrum-Rating-icon:hover ~ .spectrum-Rating-icon .spectrum-Rating-starActive", - ".spectrum-Rating-icon:hover ~ .spectrum-Rating-icon .spectrum-Rating-starInactive", ".spectrum-Rating-input", ".spectrum-Rating-starActive", ".spectrum-Rating-starInactive", + ".spectrum-Rating:hover .spectrum-Rating-icon", + ".spectrum-Rating:hover .spectrum-Rating-icon:active", + ".spectrum-Rating:hover .spectrum-Rating-icon:hover", + ".spectrum-Rating:hover .spectrum-Rating-icon.is-currentValue:after", + ".spectrum-Rating:hover .spectrum-Rating-starActive", + ".spectrum-Rating:hover .spectrum-Rating-starInactive", ".spectrum-Rating.is-disabled", ".spectrum-Rating.is-disabled .spectrum-Rating-icon", ".spectrum-Rating.is-disabled .spectrum-Rating-icon.is-selected", ".spectrum-Rating.is-focused", ".spectrum-Rating.is-focused .spectrum-Rating-icon", ".spectrum-Rating.is-focused .spectrum-Rating-icon.is-selected", - ".spectrum-Rating.is-readOnly", - ".spectrum-Rating:hover .spectrum-Rating-icon", - ".spectrum-Rating:hover .spectrum-Rating-icon.is-currentValue:after", - ".spectrum-Rating:hover .spectrum-Rating-icon:active", - ".spectrum-Rating:hover .spectrum-Rating-icon:hover", - ".spectrum-Rating:hover .spectrum-Rating-starActive", - ".spectrum-Rating:hover .spectrum-Rating-starInactive" - ], - "modifiers": [ - "--mod-rating-border-radius", - "--mod-rating-emphasized-icon-color-default", - "--mod-rating-emphasized-icon-color-down", - "--mod-rating-emphasized-icon-color-hover", - "--mod-rating-emphasized-icon-color-key-focus", - "--mod-rating-focus-indicator-color", - "--mod-rating-focus-indicator-gap", - "--mod-rating-focus-indicator-thickness", - "--mod-rating-icon-color-default", - "--mod-rating-icon-color-disabled", - "--mod-rating-icon-color-down", - "--mod-rating-icon-color-hover", - "--mod-rating-icon-color-key-focus", - "--mod-rating-icon-count", - "--mod-rating-icon-height", - "--mod-rating-icon-spacing", - "--mod-rating-icon-spacing-vertical-top", - "--mod-rating-icon-width", - "--mod-rating-indicator-border-radius", - "--mod-rating-indicator-height" - ], - "component": [ - "--spectrum-rating-border-radius", - "--spectrum-rating-emphasized-icon-color-default", - "--spectrum-rating-emphasized-icon-color-down", - "--spectrum-rating-emphasized-icon-color-hover", - "--spectrum-rating-emphasized-icon-color-key-focus", - "--spectrum-rating-focus-indicator-color", - "--spectrum-rating-focus-indicator-gap", - "--spectrum-rating-focus-indicator-thickness", - "--spectrum-rating-icon-color-default", - "--spectrum-rating-icon-color-disabled", - "--spectrum-rating-icon-color-down", - "--spectrum-rating-icon-color-hover", - "--spectrum-rating-icon-color-key-focus", - "--spectrum-rating-icon-count", - "--spectrum-rating-icon-height", - "--spectrum-rating-icon-spacing", - "--spectrum-rating-icon-spacing-vertical-top", - "--spectrum-rating-icon-width", - "--spectrum-rating-indicator-border-radius", - "--spectrum-rating-indicator-height", - "--spectrum-rating-indicator-width" - ], - "global": [ - "--spectrum-accent-content-color-default", - "--spectrum-accent-content-color-down", - "--spectrum-accent-content-color-hover", - "--spectrum-accent-content-color-key-focus", - "--spectrum-border-width-200", - "--spectrum-component-top-to-workflow-icon-100", - "--spectrum-corner-radius-100", - "--spectrum-disabled-content-color", - "--spectrum-focus-indicator-color", - "--spectrum-focus-indicator-gap", - "--spectrum-focus-indicator-thickness", - "--spectrum-neutral-subdued-content-color-default", - "--spectrum-neutral-subdued-content-color-down", - "--spectrum-neutral-subdued-content-color-hover", - "--spectrum-neutral-subdued-content-color-key-focus", - "--spectrum-workflow-icon-size-100" - ], - "system-theme": [ - "--system-rating-icon-color-default", - "--system-rating-icon-color-down", - "--system-rating-icon-color-hover", - "--system-rating-icon-color-key-focus", - "--system-rating-indicator-border-radius" + ".spectrum-Rating.is-readOnly" ], - "passthroughs": [], - "high-contrast": [ - "--highcontrast-rating-emphasized-icon-color-default", - "--highcontrast-rating-emphasized-icon-color-down", - "--highcontrast-rating-emphasized-icon-color-hover", - "--highcontrast-rating-focus-color-outline", - "--highcontrast-rating-icon-color-disabled", - "--highcontrast-rating-icon-color-key-focus" - ] + "modifiers": { + "mod-rating-icon-spacing": { + "value": "var(--spectrum-rating-icon-spacing)", + "description": "Used by `.spectrum-Rating`.
Defaults to `var(--spectrum-rating-icon-spacing)`, if not set.", + "control": "text", + "category": "Modifier" + }, + "mod-rating-icon-width": { + "value": "var(--spectrum-rating-icon-width)", + "description": "Used by `.spectrum-Rating`, `.spectrum-Rating-icon`.
Defaults to `var(--spectrum-rating-icon-width)`, if not set.", + "control": "text", + "category": "Modifier" + }, + "mod-rating-icon-count": { + "value": "var(--spectrum-rating-icon-count)", + "description": "Used by `.spectrum-Rating`.
Defaults to `var(--spectrum-rating-icon-count)`, if not set.", + "control": "text", + "category": "Modifier" + }, + "mod-rating-border-radius": { + "value": "var(--spectrum-rating-border-radius)", + "description": "Used by `.spectrum-Rating`.
Defaults to `var(--spectrum-rating-border-radius)`, if not set.", + "control": "text", + "category": "Modifier" + }, + "mod-rating-focus-indicator-gap": { + "value": "var(--spectrum-rating-focus-indicator-gap)", + "description": "Used by `.spectrum-Rating`, `.spectrum-Rating-icon`, `.spectrum-Rating-icon.is-currentValue:after`.
Defaults to `var(--spectrum-rating-focus-indicator-gap)`, if not set.", + "control": "text", + "category": "Modifier" + }, + "mod-rating-focus-indicator-thickness": { + "value": "var(--spectrum-rating-focus-indicator-thickness)", + "description": "Used by `.spectrum-Rating.is-focused`.
Defaults to `var(--spectrum-rating-focus-indicator-thickness)`, if not set.", + "control": "text", + "category": "Modifier" + }, + "mod-rating-focus-indicator-color": { + "value": "var(--spectrum-rating-focus-indicator-color)", + "description": "Used by `.spectrum-Rating.is-focused`.
Defaults to `var(--spectrum-rating-focus-indicator-color)`, if not set.", + "control": "color", + "category": "Modifier" + }, + "mod-rating-icon-color-key-focus": { + "value": "var(--spectrum-rating-icon-color-key-focus)", + "description": "Used by `.spectrum-Rating.is-focused .spectrum-Rating-icon, .spectrum-Rating.is-focused .spectrum-Rating-icon.is-selected`.
Defaults to `var(--spectrum-rating-icon-color-key-focus)`, if not set.", + "control": "color", + "category": "Modifier" + }, + "mod-rating-icon-height": { + "value": "var(--spectrum-rating-icon-height)", + "description": "Used by `.spectrum-Rating-icon`.
Defaults to `var(--spectrum-rating-icon-height)`, if not set.", + "control": "text", + "category": "Modifier" + }, + "mod-rating-icon-spacing-vertical-top": { + "value": "var(--spectrum-rating-icon-spacing-vertical-top)", + "description": "Used by `.spectrum-Rating-icon`.
Defaults to `var(--spectrum-rating-icon-spacing-vertical-top)`, if not set.", + "control": "text", + "category": "Modifier" + }, + "mod-rating-indicator-border-radius": { + "value": "var(--spectrum-rating-indicator-border-radius)", + "description": "Used by `.spectrum-Rating-icon.is-currentValue:after`.
Defaults to `var(--spectrum-rating-indicator-border-radius)`, if not set.", + "control": "text", + "category": "Modifier" + }, + "mod-rating-indicator-height": { + "value": "var(--spectrum-rating-indicator-height)", + "description": "Used by `.spectrum-Rating-icon.is-currentValue:after`.
Defaults to `var(--spectrum-rating-indicator-height)`, if not set.", + "control": "text", + "category": "Modifier" + }, + "mod-rating-icon-color-default": { + "value": "var(--spectrum-rating-icon-color-default)", + "description": "Used by `.spectrum-Rating-icon, .spectrum-Rating-icon.is-selected`, `.spectrum-Rating--emphasized .spectrum-Rating-icon`, `.spectrum-Rating:hover .spectrum-Rating-icon`, `.spectrum-Rating--emphasized .spectrum-Rating-icon:hover ~ .spectrum-Rating-icon, .spectrum-Rating-icon:hover ~ .spectrum-Rating-icon`, `.spectrum-Rating--emphasized:hover .spectrum-Rating-icon:hover ~ .spectrum-Rating-icon`.
Defaults to `var(--spectrum-rating-icon-color-default)`, if not set.", + "control": "color", + "category": "Modifier" + }, + "mod-rating-emphasized-icon-color-key-focus": { + "value": "var(--spectrum-rating-emphasized-icon-color-key-focus)", + "description": "Used by `.spectrum-Rating--emphasized.is-focused .spectrum-Rating-icon.is-selected`.
Defaults to `var(--spectrum-rating-emphasized-icon-color-key-focus)`, if not set.", + "control": "color", + "category": "Modifier" + }, + "mod-rating-emphasized-icon-color-default": { + "value": "var(--spectrum-rating-emphasized-icon-color-default)", + "description": "Used by `.spectrum-Rating--emphasized .spectrum-Rating-icon.is-selected`, `.spectrum-Rating--emphasized:hover .spectrum-Rating-icon`.
Defaults to `var(--spectrum-rating-emphasized-icon-color-default)`, if not set.", + "control": "color", + "category": "Modifier" + }, + "mod-rating-icon-color-hover": { + "value": "var(--spectrum-rating-icon-color-hover)", + "description": "Used by `.spectrum-Rating:hover .spectrum-Rating-icon:hover`.
Defaults to `var(--spectrum-rating-icon-color-hover)`, if not set.", + "control": "color", + "category": "Modifier" + }, + "mod-rating-icon-color-down": { + "value": "var(--spectrum-rating-icon-color-down)", + "description": "Used by `.spectrum-Rating:hover .spectrum-Rating-icon:active`.
Defaults to `var(--spectrum-rating-icon-color-down)`, if not set.", + "control": "color", + "category": "Modifier" + }, + "mod-rating-emphasized-icon-color-hover": { + "value": "var(--spectrum-rating-emphasized-icon-color-hover)", + "description": "Used by `.spectrum-Rating--emphasized:hover .spectrum-Rating-icon:hover`.
Defaults to `var(--spectrum-rating-emphasized-icon-color-hover)`, if not set.", + "control": "color", + "category": "Modifier" + }, + "mod-rating-emphasized-icon-color-down": { + "value": "var(--spectrum-rating-emphasized-icon-color-down)", + "description": "Used by `.spectrum-Rating--emphasized:hover .spectrum-Rating-icon:active`.
Defaults to `var(--spectrum-rating-emphasized-icon-color-down)`, if not set.", + "control": "color", + "category": "Modifier" + }, + "mod-rating-icon-color-disabled": { + "value": "var(--spectrum-rating-icon-color-disabled)", + "description": "Used by `.spectrum-Rating.is-disabled .spectrum-Rating-icon, .spectrum-Rating.is-disabled .spectrum-Rating-icon.is-selected`.
Defaults to `var(--spectrum-rating-icon-color-disabled)`, if not set.", + "control": "color", + "category": "Modifier" + } + }, + "component": { + "spectrum-rating-icon-height": { + "description": "Defined in `.spectrum-Rating`.
Used by `.spectrum-Rating-icon`.", + "control": "text", + "category": "Component" + }, + "spectrum-rating-icon-width": { + "description": "Defined in `.spectrum-Rating`.
Used by `.spectrum-Rating`, `.spectrum-Rating-icon`.", + "control": "text", + "category": "Component" + }, + "spectrum-rating-border-radius": { + "description": "Defined in `.spectrum-Rating`.
Used by `.spectrum-Rating`.", + "control": "text", + "category": "Component" + }, + "spectrum-rating-focus-indicator-thickness": { + "description": "Defined in `.spectrum-Rating`.
Used by `.spectrum-Rating.is-focused`.", + "control": "text", + "category": "Component" + }, + "spectrum-rating-focus-indicator-color": { + "description": "Defined in `.spectrum-Rating`.
Used by `.spectrum-Rating.is-focused`.", + "control": "color", + "category": "Component" + }, + "spectrum-rating-focus-indicator-gap": { + "description": "Defined in `.spectrum-Rating`.
Used by `.spectrum-Rating`, `.spectrum-Rating-icon`, `.spectrum-Rating-icon.is-currentValue:after`.", + "control": "text", + "category": "Component" + }, + "spectrum-rating-icon-spacing-vertical-top": { + "description": "Defined in `.spectrum-Rating`.
Used by `.spectrum-Rating-icon`.", + "control": "text", + "category": "Component" + }, + "spectrum-rating-indicator-height": { + "description": "Defined in `.spectrum-Rating`.
Used by `.spectrum-Rating-icon.is-currentValue:after`.", + "control": "text", + "category": "Component" + }, + "spectrum-rating-emphasized-icon-color-default": { + "description": "Defined in `.spectrum-Rating`.
Used by `.spectrum-Rating--emphasized .spectrum-Rating-icon.is-selected`, `.spectrum-Rating--emphasized:hover .spectrum-Rating-icon`.", + "control": "color", + "category": "Component" + }, + "spectrum-rating-emphasized-icon-color-hover": { + "description": "Defined in `.spectrum-Rating`.
Used by `.spectrum-Rating--emphasized:hover .spectrum-Rating-icon:hover`.", + "control": "color", + "category": "Component" + }, + "spectrum-rating-emphasized-icon-color-down": { + "description": "Defined in `.spectrum-Rating`.
Used by `.spectrum-Rating--emphasized:hover .spectrum-Rating-icon:active`.", + "control": "color", + "category": "Component" + }, + "spectrum-rating-emphasized-icon-color-key-focus": { + "description": "Defined in `.spectrum-Rating`.
Used by `.spectrum-Rating--emphasized.is-focused .spectrum-Rating-icon.is-selected`.", + "control": "color", + "category": "Component" + }, + "spectrum-rating-icon-color-disabled": { + "description": "Defined in `.spectrum-Rating`.
Used by `.spectrum-Rating.is-disabled .spectrum-Rating-icon, .spectrum-Rating.is-disabled .spectrum-Rating-icon.is-selected`.", + "control": "color", + "category": "Component" + }, + "spectrum-rating-icon-count": { + "description": "Defined in `.spectrum-Rating`.
Used by `--spectrum-rating-icon-count`, `.spectrum-Rating`.", + "control": "text", + "category": "Component" + }, + "spectrum-rating-icon-spacing": { + "description": "Used by `.spectrum-Rating`.", + "control": "text", + "category": "Component" + }, + "spectrum-rating-icon-color-key-focus": { + "description": "Defined in `.spectrum-Rating`.
Used by `.spectrum-Rating.is-focused .spectrum-Rating-icon, .spectrum-Rating.is-focused .spectrum-Rating-icon.is-selected`.", + "control": "color", + "category": "Component" + }, + "spectrum-rating-indicator-border-radius": { + "description": "Defined in `.spectrum-Rating`.
Used by `.spectrum-Rating-icon.is-currentValue:after`.", + "control": "text", + "category": "Component" + }, + "spectrum-rating-indicator-width": { + "value": "18px", + "description": "Used by `.spectrum-Rating-icon.is-currentValue:after`.", + "control": "text", + "category": "Component" + }, + "spectrum-rating-icon-color-default": { + "description": "Defined in `.spectrum-Rating`.
Used by `.spectrum-Rating-icon, .spectrum-Rating-icon.is-selected`, `.spectrum-Rating--emphasized .spectrum-Rating-icon`, `.spectrum-Rating:hover .spectrum-Rating-icon`, `.spectrum-Rating--emphasized .spectrum-Rating-icon:hover ~ .spectrum-Rating-icon, .spectrum-Rating-icon:hover ~ .spectrum-Rating-icon`, `.spectrum-Rating--emphasized:hover .spectrum-Rating-icon:hover ~ .spectrum-Rating-icon`.", + "control": "color", + "category": "Component" + }, + "spectrum-rating-icon-color-hover": { + "description": "Defined in `.spectrum-Rating`.
Used by `.spectrum-Rating:hover .spectrum-Rating-icon:hover`.", + "control": "color", + "category": "Component" + }, + "spectrum-rating-icon-color-down": { + "description": "Defined in `.spectrum-Rating`.
Used by `.spectrum-Rating:hover .spectrum-Rating-icon:active`.", + "control": "color", + "category": "Component" + } + }, + "global": { + "spectrum-neutral-subdued-content-color-default": { + "value": "var(--spectrum-gray-700)", + "description": "Used by `--system-rating-icon-color-default`.", + "control": "color", + "category": "Global" + }, + "spectrum-neutral-subdued-content-color-hover": { + "value": "var(--spectrum-gray-800)", + "description": "Used by `--system-rating-icon-color-hover`.", + "control": "color", + "category": "Global" + }, + "spectrum-neutral-subdued-content-color-down": { + "value": "var(--spectrum-gray-800)", + "description": "Used by `--system-rating-icon-color-down`.", + "control": "color", + "category": "Global" + }, + "spectrum-neutral-subdued-content-color-key-focus": { + "value": "var(--spectrum-gray-800)", + "description": "Used by `--system-rating-icon-color-key-focus`.", + "control": "color", + "category": "Global" + }, + "spectrum-workflow-icon-size-100": { + "value": "20px", + "description": "Used by `--spectrum-rating-icon-height`, `--spectrum-rating-icon-width`.", + "control": "text", + "category": "Global" + }, + "spectrum-corner-radius-100": { + "value": "8px", + "description": "Used by `--spectrum-rating-border-radius`.", + "control": "text", + "category": "Global" + }, + "spectrum-focus-indicator-thickness": { + "value": "2px", + "description": "Used by `--spectrum-rating-focus-indicator-thickness`.", + "control": "text", + "category": "Global" + }, + "spectrum-focus-indicator-color": { + "value": "var(--spectrum-blue-800)", + "description": "Used by `--spectrum-rating-focus-indicator-color`.", + "control": "color", + "category": "Global" + }, + "spectrum-focus-indicator-gap": { + "value": "2px", + "description": "Used by `--spectrum-rating-focus-indicator-gap`.", + "control": "text", + "category": "Global" + }, + "spectrum-component-top-to-workflow-icon-100": { + "value": "6px", + "description": "Used by `--spectrum-rating-icon-spacing-vertical-top`.", + "control": "text", + "category": "Global" + }, + "spectrum-border-width-200": { + "value": "2px", + "description": "Used by `--spectrum-rating-indicator-height`.", + "control": "text", + "category": "Global" + }, + "spectrum-accent-content-color-default": { + "value": "var(--spectrum-accent-color-900)", + "description": "Used by `--spectrum-rating-emphasized-icon-color-default`.", + "control": "color", + "category": "Global" + }, + "spectrum-accent-content-color-hover": { + "value": "var(--spectrum-accent-color-1000)", + "description": "Used by `--spectrum-rating-emphasized-icon-color-hover`.", + "control": "color", + "category": "Global" + }, + "spectrum-accent-content-color-down": { + "value": "var(--spectrum-accent-color-1000)", + "description": "Used by `--spectrum-rating-emphasized-icon-color-down`.", + "control": "color", + "category": "Global" + }, + "spectrum-accent-content-color-key-focus": { + "value": "var(--spectrum-accent-color-1000)", + "description": "Used by `--spectrum-rating-emphasized-icon-color-key-focus`.", + "control": "color", + "category": "Global" + }, + "spectrum-disabled-content-color": { + "value": "var(--spectrum-gray-400)", + "description": "Used by `--spectrum-rating-icon-color-disabled`.", + "control": "color", + "category": "Global" + } + }, + "system-theme": { + "system-rating-icon-color-default": { + "description": "Defined in `.spectrum`.
Used by `--spectrum-rating-icon-color-default`.", + "control": "color" + }, + "system-rating-icon-color-hover": { + "description": "Defined in `.spectrum`.
Used by `--spectrum-rating-icon-color-hover`.", + "control": "color" + }, + "system-rating-icon-color-down": { + "description": "Defined in `.spectrum`.
Used by `--spectrum-rating-icon-color-down`.", + "control": "color" + }, + "system-rating-icon-color-key-focus": { + "description": "Defined in `.spectrum`.
Used by `--spectrum-rating-icon-color-key-focus`.", + "control": "color" + }, + "system-rating-indicator-border-radius": { + "description": "Defined in `.spectrum`.
Used by `--spectrum-rating-indicator-border-radius`.", + "control": "text" + } + }, + "passthroughs": {}, + "high-contrast": { + "highcontrast-rating-icon-color-key-focus": { + "value": "var(--mod-rating-icon-color-key-focus, var(--spectrum-rating-icon-color-key-focus))", + "description": "Defined in `.spectrum-Rating`.
Used by `.spectrum-Rating.is-focused .spectrum-Rating-icon, .spectrum-Rating.is-focused .spectrum-Rating-icon.is-selected`, `.spectrum-Rating:hover .spectrum-Rating-icon.is-currentValue:after`.
Defaults to `var(--mod-rating-icon-color-key-focus, var(--spectrum-rating-icon-color-key-focus))`, if not set.", + "control": "color" + }, + "highcontrast-rating-emphasized-icon-color-default": { + "value": "var(--mod-rating-emphasized-icon-color-default, var(--spectrum-rating-emphasized-icon-color-default))", + "description": "Defined in `.spectrum-Rating`.
Used by `.spectrum-Rating--emphasized .spectrum-Rating-icon.is-selected`, `.spectrum-Rating--emphasized:hover .spectrum-Rating-icon`, `.spectrum-Rating--emphasized:hover .spectrum-Rating-icon.is-currentValue:after`.
Defaults to `var(--mod-rating-emphasized-icon-color-default, var(--spectrum-rating-emphasized-icon-color-default))`, if not set.", + "control": "color" + }, + "highcontrast-rating-emphasized-icon-color-hover": { + "value": "var(--mod-rating-emphasized-icon-color-hover, var(--spectrum-rating-emphasized-icon-color-hover))", + "description": "Defined in `.spectrum-Rating`.
Used by `.spectrum-Rating--emphasized:hover .spectrum-Rating-icon:hover`.
Defaults to `var(--mod-rating-emphasized-icon-color-hover, var(--spectrum-rating-emphasized-icon-color-hover))`, if not set.", + "control": "color" + }, + "highcontrast-rating-emphasized-icon-color-down": { + "value": "var(--mod-rating-emphasized-icon-color-down, var(--spectrum-rating-emphasized-icon-color-down))", + "description": "Defined in `.spectrum-Rating`.
Used by `.spectrum-Rating--emphasized:hover .spectrum-Rating-icon:active`.
Defaults to `var(--mod-rating-emphasized-icon-color-down, var(--spectrum-rating-emphasized-icon-color-down))`, if not set.", + "control": "color" + }, + "highcontrast-rating-icon-color-disabled": { + "value": "var(--mod-rating-icon-color-disabled, var(--spectrum-rating-icon-color-disabled))", + "description": "Defined in `.spectrum-Rating`.
Used by `.spectrum-Rating.is-disabled .spectrum-Rating-icon, .spectrum-Rating.is-disabled .spectrum-Rating-icon.is-selected`.
Defaults to `var(--mod-rating-icon-color-disabled, var(--spectrum-rating-icon-color-disabled))`, if not set.", + "control": "color" + }, + "highcontrast-rating-focus-color-outline": { + "description": "Defined in `.spectrum-Rating`.
Used by `.spectrum-Rating.is-focused`.", + "control": "color" + } + } } diff --git a/components/rating/stories/rating.stories.js b/components/rating/stories/rating.stories.js index e9315f918c2..d969617e61b 100644 --- a/components/rating/stories/rating.stories.js +++ b/components/rating/stories/rating.stories.js @@ -1,10 +1,12 @@ import { disableDefaultModes } from "@spectrum-css/preview/modes"; import { isDisabled, isEmphasized, isFocused, isReadOnly } from "@spectrum-css/preview/types"; -import metadata from "../dist/metadata.json"; -import packageJson from "../package.json"; import { RatingGroup } from "./rating.test.js"; import { Template } from "./template.js"; +// Local assets to render the component styles and structure +import metadata from "../dist/metadata.json"; +import packageJson from "../package.json"; + /** * The rating component is used to display or collect a user's rating of an item as represented by a number of stars. * @@ -59,6 +61,7 @@ export default { }, packageJson, metadata, + cssprops: metadata.modifiers, }, }; diff --git a/components/search/dist/metadata.json b/components/search/dist/metadata.json index b701431ddf2..01aa74e1077 100644 --- a/components/search/dist/metadata.json +++ b/components/search/dist/metadata.json @@ -18,186 +18,824 @@ ".spectrum-Search-input::-webkit-search-cancel-button", ".spectrum-Search-input::-webkit-search-decoration", ".spectrum-Search-textfield", + ".spectrum-Search-textfield:hover .spectrum-Search-icon", ".spectrum-Search-textfield.is-disabled .spectrum-Search-icon", ".spectrum-Search-textfield.is-disabled:hover .spectrum-Search-icon", ".spectrum-Search-textfield.is-focused .spectrum-Search-icon", ".spectrum-Search-textfield.is-focused:hover .spectrum-Search-icon", ".spectrum-Search-textfield.is-keyboardFocused .spectrum-Search-icon", - ".spectrum-Search-textfield:hover .spectrum-Search-icon", + ".spectrum-Search:not(.spectrum-Search--quiet) .spectrum-Search-icon", + ".spectrum-Search:not(.spectrum-Search--quiet) .spectrum-Search-input", ".spectrum-Search.is-disabled .spectrum-Search-clearButton", ".spectrum-Search.spectrum-Search--sizeL", ".spectrum-Search.spectrum-Search--sizeM", ".spectrum-Search.spectrum-Search--sizeS", - ".spectrum-Search.spectrum-Search--sizeXL", - ".spectrum-Search:not(.spectrum-Search--quiet) .spectrum-Search-icon", - ".spectrum-Search:not(.spectrum-Search--quiet) .spectrum-Search-input" - ], - "modifiers": [ - "--mod-search-background-color", - "--mod-search-background-color-disabled", - "--mod-search-block-size", - "--mod-search-border-color-default", - "--mod-search-border-color-disabled", - "--mod-search-border-color-focus", - "--mod-search-border-color-focus-hover", - "--mod-search-border-color-hover", - "--mod-search-border-color-key-focus", - "--mod-search-border-radius", - "--mod-search-border-width", - "--mod-search-bottom-to-text", - "--mod-search-button-inline-size", - "--mod-search-color-default", - "--mod-search-color-disabled", - "--mod-search-color-focus", - "--mod-search-color-focus-hover", - "--mod-search-color-hover", - "--mod-search-color-key-focus", - "--mod-search-edge-to-visual", - "--mod-search-focus-indicator-color", - "--mod-search-focus-indicator-gap", - "--mod-search-focus-indicator-thickness", - "--mod-search-font-family", - "--mod-search-font-style", - "--mod-search-font-weight", - "--mod-search-icon-size", - "--mod-search-inline-size", - "--mod-search-line-height", - "--mod-search-min-inline-size", - "--mod-search-text-to-icon", - "--mod-search-to-help-text", - "--mod-search-top-to-text" - ], - "component": [ - "--spectrum-search-background-color", - "--spectrum-search-background-color-disabled", - "--spectrum-search-block-size", - "--spectrum-search-border-color-default", - "--spectrum-search-border-color-disabled", - "--spectrum-search-border-color-focus", - "--spectrum-search-border-color-focus-hover", - "--spectrum-search-border-color-hover", - "--spectrum-search-border-color-key-focus", - "--spectrum-search-border-radius", - "--spectrum-search-border-width", - "--spectrum-search-bottom-to-text", - "--spectrum-search-button-inline-size", - "--spectrum-search-color", - "--spectrum-search-color-default", - "--spectrum-search-color-disabled", - "--spectrum-search-color-focus", - "--spectrum-search-color-focus-hover", - "--spectrum-search-color-hover", - "--spectrum-search-color-key-focus", - "--spectrum-search-edge-to-visual", - "--spectrum-search-field-minimum-width-multiplier", - "--spectrum-search-focus-indicator-color", - "--spectrum-search-focus-indicator-gap", - "--spectrum-search-focus-indicator-thickness", - "--spectrum-search-font-family", - "--spectrum-search-font-style", - "--spectrum-search-font-weight", - "--spectrum-search-icon-size", - "--spectrum-search-inline-size", - "--spectrum-search-line-height", - "--spectrum-search-min-inline-size", - "--spectrum-search-text-to-icon", - "--spectrum-search-to-help-text", - "--spectrum-search-top-to-text" - ], - "global": [ - "--spectrum-border-width-100", - "--spectrum-component-bottom-to-text-100", - "--spectrum-component-edge-to-visual-100", - "--spectrum-component-edge-to-visual-200", - "--spectrum-component-edge-to-visual-300", - "--spectrum-component-edge-to-visual-75", - "--spectrum-component-height-100", - "--spectrum-component-height-200", - "--spectrum-component-height-300", - "--spectrum-component-height-75", - "--spectrum-component-top-to-text-100", - "--spectrum-corner-radius-100", - "--spectrum-default-font-style", - "--spectrum-disabled-border-color", - "--spectrum-disabled-content-color", - "--spectrum-field-edge-to-visual-quiet", - "--spectrum-field-width", - "--spectrum-focus-indicator-color", - "--spectrum-focus-indicator-gap", - "--spectrum-focus-indicator-thickness", - "--spectrum-gray-25", - "--spectrum-gray-300", - "--spectrum-gray-500", - "--spectrum-gray-600", - "--spectrum-gray-800", - "--spectrum-gray-900", - "--spectrum-help-text-to-component", - "--spectrum-line-height-100", - "--spectrum-neutral-content-color-default", - "--spectrum-neutral-content-color-focus", - "--spectrum-neutral-content-color-focus-hover", - "--spectrum-neutral-content-color-hover", - "--spectrum-neutral-content-color-key-focus", - "--spectrum-regular-font-weight", - "--spectrum-sans-font-family-stack", - "--spectrum-text-to-visual-100", - "--spectrum-text-to-visual-200", - "--spectrum-text-to-visual-300", - "--spectrum-text-to-visual-75", - "--spectrum-workflow-icon-size-100", - "--spectrum-workflow-icon-size-200", - "--spectrum-workflow-icon-size-300", - "--spectrum-workflow-icon-size-75" - ], - "system-theme": [ - "--system-search-background-color", - "--system-search-background-color-disabled", - "--system-search-border-color-default", - "--system-search-border-color-disabled", - "--system-search-border-color-focus", - "--system-search-border-color-focus-hover", - "--system-search-border-color-hover", - "--system-search-border-color-key-focus", - "--system-search-border-radius", - "--system-search-edge-to-visual", - "--system-search-quiet-background-color-disabled", - "--system-search-quiet-border-color-disabled", - "--system-search-size-l-border-radius", - "--system-search-size-l-edge-to-visual", - "--system-search-size-m-border-radius", - "--system-search-size-m-edge-to-visual", - "--system-search-size-s-border-radius", - "--system-search-size-s-edge-to-visual", - "--system-search-size-xl-border-radius", - "--system-search-size-xl-edge-to-visual" - ], - "passthroughs": [ - "--mod-textfield-background-color", - "--mod-textfield-background-color-disabled", - "--mod-textfield-border-color", - "--mod-textfield-border-color-disabled", - "--mod-textfield-border-color-focus", - "--mod-textfield-border-color-focus-hover", - "--mod-textfield-border-color-hover", - "--mod-textfield-border-color-keyboard-focus", - "--mod-textfield-border-width", - "--mod-textfield-corner-radius", - "--mod-textfield-focus-indicator-color", - "--mod-textfield-focus-indicator-gap", - "--mod-textfield-focus-indicator-width", - "--mod-textfield-font-family", - "--mod-textfield-font-weight", - "--mod-textfield-text-color-default", - "--mod-textfield-text-color-disabled", - "--mod-textfield-text-color-focus", - "--mod-textfield-text-color-focus-hover", - "--mod-textfield-text-color-hover", - "--mod-textfield-text-color-keyboard-focus" + ".spectrum-Search.spectrum-Search--sizeXL" ], - "high-contrast": [ - "--highcontrast-search-color-default", - "--highcontrast-search-color-disabled", - "--highcontrast-search-color-focus", - "--highcontrast-search-color-hover" - ] + "modifiers": { + "mod-search-font-family": { + "value": "var(--spectrum-search-font-family)", + "description": "Used by `--mod-textfield-font-family`.
Defaults to `var(--spectrum-search-font-family)`, if not set.", + "control": "text", + "category": "Modifier" + }, + "mod-search-font-weight": { + "value": "var(--spectrum-search-font-weight)", + "description": "Used by `--mod-textfield-font-weight`.
Defaults to `var(--spectrum-search-font-weight)`, if not set.", + "control": "text", + "category": "Modifier" + }, + "mod-search-border-radius": { + "value": "var(--spectrum-search-border-radius)", + "description": "Defined in `.spectrum-Search--quiet`.
Used by `--mod-textfield-corner-radius`, `.spectrum-Search-clearButton, .spectrum-Search-clearButton .spectrum-ClearButton-fill`, `.spectrum-Search--quiet .spectrum-Search-input`.
Defaults to `var(--spectrum-search-border-radius)`, if not set.", + "control": "text", + "category": "Modifier" + }, + "mod-search-border-width": { + "value": "var(--spectrum-search-border-width)", + "description": "Used by `--mod-textfield-border-width`, `.spectrum-Search-input`, `.spectrum-Search:not(.spectrum-Search--quiet) .spectrum-Search-input`.
Defaults to `var(--spectrum-search-border-width)`, if not set.", + "control": "text", + "category": "Modifier" + }, + "mod-search-focus-indicator-gap": { + "value": "var(--spectrum-search-focus-indicator-gap)", + "description": "Used by `--mod-textfield-focus-indicator-gap`.
Defaults to `var(--spectrum-search-focus-indicator-gap)`, if not set.", + "control": "text", + "category": "Modifier" + }, + "mod-search-focus-indicator-thickness": { + "value": "var(--spectrum-search-focus-indicator-thickness)", + "description": "Used by `--mod-textfield-focus-indicator-width`.
Defaults to `var(--spectrum-search-focus-indicator-thickness)`, if not set.", + "control": "text", + "category": "Modifier" + }, + "mod-search-focus-indicator-color": { + "value": "var(--spectrum-search-focus-indicator-color)", + "description": "Used by `--mod-textfield-focus-indicator-color`.
Defaults to `var(--spectrum-search-focus-indicator-color)`, if not set.", + "control": "color", + "category": "Modifier" + }, + "mod-search-color-default": { + "value": "var(--spectrum-search-color-default)", + "description": "Used by `--mod-textfield-text-color-default`, `--spectrum-search-color`.
Defaults to `var(--spectrum-search-color-default)`, if not set.", + "control": "color", + "category": "Modifier" + }, + "mod-search-color-hover": { + "value": "var(--spectrum-search-color-hover)", + "description": "Used by `--mod-textfield-text-color-hover`, `--spectrum-search-color`.
Defaults to `var(--spectrum-search-color-hover)`, if not set.", + "control": "color", + "category": "Modifier" + }, + "mod-search-color-focus": { + "value": "var(--spectrum-search-color-focus)", + "description": "Used by `--mod-textfield-text-color-focus`, `--spectrum-search-color`.
Defaults to `var(--spectrum-search-color-focus)`, if not set.", + "control": "color", + "category": "Modifier" + }, + "mod-search-color-focus-hover": { + "value": "var(--spectrum-search-color-focus-hover)", + "description": "Used by `--mod-textfield-text-color-focus-hover`, `--spectrum-search-color`.
Defaults to `var(--spectrum-search-color-focus-hover)`, if not set.", + "control": "color", + "category": "Modifier" + }, + "mod-search-color-key-focus": { + "value": "var(--spectrum-search-color-key-focus)", + "description": "Used by `--mod-textfield-text-color-keyboard-focus`, `--spectrum-search-color`.
Defaults to `var(--spectrum-search-color-key-focus)`, if not set.", + "control": "color", + "category": "Modifier" + }, + "mod-search-color-disabled": { + "value": "var(--spectrum-search-color-disabled)", + "description": "Used by `--mod-textfield-text-color-disabled`, `--spectrum-search-color`.
Defaults to `var(--spectrum-search-color-disabled)`, if not set.", + "control": "color", + "category": "Modifier" + }, + "mod-search-border-color-default": { + "value": "var(--spectrum-search-border-color-default)", + "description": "Used by `--mod-textfield-border-color`.
Defaults to `var(--spectrum-search-border-color-default)`, if not set.", + "control": "color", + "category": "Modifier" + }, + "mod-search-border-color-hover": { + "value": "var(--spectrum-search-border-color-hover)", + "description": "Used by `--mod-textfield-border-color-hover`.
Defaults to `var(--spectrum-search-border-color-hover)`, if not set.", + "control": "color", + "category": "Modifier" + }, + "mod-search-border-color-focus": { + "value": "var(--spectrum-search-border-color-focus)", + "description": "Used by `--mod-textfield-border-color-focus`.
Defaults to `var(--spectrum-search-border-color-focus)`, if not set.", + "control": "color", + "category": "Modifier" + }, + "mod-search-border-color-focus-hover": { + "value": "var(--spectrum-search-border-color-focus-hover)", + "description": "Used by `--mod-textfield-border-color-focus-hover`.
Defaults to `var(--spectrum-search-border-color-focus-hover)`, if not set.", + "control": "color", + "category": "Modifier" + }, + "mod-search-border-color-key-focus": { + "value": "var(--spectrum-search-border-color-key-focus)", + "description": "Used by `--mod-textfield-border-color-keyboard-focus`.
Defaults to `var(--spectrum-search-border-color-key-focus)`, if not set.", + "control": "color", + "category": "Modifier" + }, + "mod-search-border-color-disabled": { + "value": "var(--spectrum-search-border-color-disabled)", + "description": "Used by `--mod-textfield-border-color-disabled`.
Defaults to `var(--spectrum-search-border-color-disabled)`, if not set.", + "control": "color", + "category": "Modifier" + }, + "mod-search-background-color": { + "value": "var(--spectrum-search-background-color)", + "description": "Used by `--mod-textfield-background-color`.
Defaults to `var(--spectrum-search-background-color)`, if not set.", + "control": "color", + "category": "Modifier" + }, + "mod-search-background-color-disabled": { + "value": "var(--spectrum-search-background-color-disabled)", + "description": "Used by `--mod-textfield-background-color-disabled`.
Defaults to `var(--spectrum-search-background-color-disabled)`, if not set.", + "control": "color", + "category": "Modifier" + }, + "mod-search-inline-size": { + "value": "var(--spectrum-search-inline-size)", + "description": "Used by `.spectrum-Search`.
Defaults to `var(--spectrum-search-inline-size)`, if not set.", + "control": "text", + "category": "Modifier" + }, + "mod-search-min-inline-size": { + "value": "var(--spectrum-search-min-inline-size)", + "description": "Used by `.spectrum-Search`.
Defaults to `var(--spectrum-search-min-inline-size)`, if not set.", + "control": "text", + "category": "Modifier" + }, + "mod-search-to-help-text": { + "value": "var(--spectrum-search-to-help-text)", + "description": "Used by `.spectrum-Search .spectrum-HelpText`.
Defaults to `var(--spectrum-search-to-help-text)`, if not set.", + "control": "text", + "category": "Modifier" + }, + "mod-search-block-size": { + "value": "var(--spectrum-search-block-size)", + "description": "Used by `.spectrum-Search-input`.
Defaults to `var(--spectrum-search-block-size)`, if not set.", + "control": "text", + "category": "Modifier" + }, + "mod-search-top-to-text": { + "value": "var(--spectrum-search-top-to-text)", + "description": "Used by `.spectrum-Search-input`, `.spectrum-Search--quiet .spectrum-Search-input`.
Defaults to `var(--spectrum-search-top-to-text)`, if not set.", + "control": "text", + "category": "Modifier" + }, + "mod-search-bottom-to-text": { + "value": "var(--spectrum-search-bottom-to-text)", + "description": "Used by `.spectrum-Search-input`.
Defaults to `var(--spectrum-search-bottom-to-text)`, if not set.", + "control": "text", + "category": "Modifier" + }, + "mod-search-font-style": { + "value": "var(--spectrum-search-font-style)", + "description": "Used by `.spectrum-Search-input`.
Defaults to `var(--spectrum-search-font-style)`, if not set.", + "control": "text", + "category": "Modifier" + }, + "mod-search-line-height": { + "value": "var(--spectrum-search-line-height)", + "description": "Used by `.spectrum-Search-input`.
Defaults to `var(--spectrum-search-line-height)`, if not set.", + "control": "text", + "category": "Modifier" + }, + "mod-search-edge-to-visual": { + "value": "var(--spectrum-search-edge-to-visual)", + "description": "Defined in `.spectrum-Search--quiet`.
Used by `.spectrum-Search:not(.spectrum-Search--quiet) .spectrum-Search-icon`, `.spectrum-Search:not(.spectrum-Search--quiet) .spectrum-Search-input`, `.spectrum-Search--quiet .spectrum-Search-input`.
Defaults to `var(--spectrum-search-edge-to-visual)`, if not set.", + "control": "text", + "category": "Modifier" + }, + "mod-search-icon-size": { + "value": "var(--spectrum-search-icon-size)", + "description": "Used by `.spectrum-Search:not(.spectrum-Search--quiet) .spectrum-Search-input`, `.spectrum-Search--quiet .spectrum-Search-input`.
Defaults to `var(--spectrum-search-icon-size)`, if not set.", + "control": "text", + "category": "Modifier" + }, + "mod-search-text-to-icon": { + "value": "var(--spectrum-search-text-to-icon)", + "description": "Used by `.spectrum-Search:not(.spectrum-Search--quiet) .spectrum-Search-input`, `.spectrum-Search--quiet .spectrum-Search-input`.
Defaults to `var(--spectrum-search-text-to-icon)`, if not set.", + "control": "text", + "category": "Modifier" + }, + "mod-search-button-inline-size": { + "value": "var(--spectrum-search-button-inline-size)", + "description": "Used by `.spectrum-Search:not(.spectrum-Search--quiet) .spectrum-Search-input`, `.spectrum-Search--quiet .spectrum-Search-input`.
Defaults to `var(--spectrum-search-button-inline-size)`, if not set.", + "control": "text", + "category": "Modifier" + } + }, + "component": { + "spectrum-search-inline-size": { + "description": "Defined in `.spectrum-Search`.
Used by `.spectrum-Search`.", + "control": "text", + "category": "Component" + }, + "spectrum-search-block-size": { + "description": "Defined in `.spectrum-Search`, `.spectrum-Search--sizeS`, `.spectrum-Search--sizeL`, `.spectrum-Search--sizeXL`.
Used by `--spectrum-search-button-inline-size`, `--spectrum-search-min-inline-size`, `.spectrum-Search-input`.", + "control": "text", + "category": "Component" + }, + "spectrum-search-button-inline-size": { + "description": "Defined in `.spectrum-Search`.
Used by `.spectrum-Search:not(.spectrum-Search--quiet) .spectrum-Search-input`, `.spectrum-Search--quiet .spectrum-Search-input`.", + "control": "text", + "category": "Component" + }, + "spectrum-search-min-inline-size": { + "description": "Defined in `.spectrum-Search`.
Used by `.spectrum-Search`.", + "control": "text", + "category": "Component" + }, + "spectrum-search-field-minimum-width-multiplier": { + "value": "3", + "description": "Used by `--spectrum-search-min-inline-size`.", + "control": "text", + "category": "Component" + }, + "spectrum-search-icon-size": { + "description": "Defined in `.spectrum-Search`, `.spectrum-Search--sizeS`, `.spectrum-Search--sizeL`, `.spectrum-Search--sizeXL`.
Used by `.spectrum-Search:not(.spectrum-Search--quiet) .spectrum-Search-input`, `.spectrum-Search--quiet .spectrum-Search-input`.", + "control": "text", + "category": "Component" + }, + "spectrum-search-text-to-icon": { + "description": "Defined in `.spectrum-Search`, `.spectrum-Search--sizeS`, `.spectrum-Search--sizeL`, `.spectrum-Search--sizeXL`.
Used by `.spectrum-Search:not(.spectrum-Search--quiet) .spectrum-Search-input`, `.spectrum-Search--quiet .spectrum-Search-input`.", + "control": "text", + "category": "Component" + }, + "spectrum-search-to-help-text": { + "description": "Defined in `.spectrum-Search`.
Used by `.spectrum-Search .spectrum-HelpText`.", + "control": "text", + "category": "Component" + }, + "spectrum-search-top-to-text": { + "description": "Defined in `.spectrum-Search`.
Used by `.spectrum-Search-input`, `.spectrum-Search--quiet .spectrum-Search-input`.", + "control": "text", + "category": "Component" + }, + "spectrum-search-bottom-to-text": { + "description": "Defined in `.spectrum-Search`.
Used by `.spectrum-Search-input`.", + "control": "text", + "category": "Component" + }, + "spectrum-search-focus-indicator-thickness": { + "description": "Defined in `.spectrum-Search`.
Used by `--mod-textfield-focus-indicator-width`.", + "control": "text", + "category": "Component" + }, + "spectrum-search-focus-indicator-gap": { + "description": "Defined in `.spectrum-Search`.
Used by `--mod-textfield-focus-indicator-gap`.", + "control": "text", + "category": "Component" + }, + "spectrum-search-focus-indicator-color": { + "description": "Defined in `.spectrum-Search`.
Used by `--mod-textfield-focus-indicator-color`.", + "control": "color", + "category": "Component" + }, + "spectrum-search-font-family": { + "description": "Defined in `.spectrum-Search`.
Used by `--mod-textfield-font-family`.", + "control": "text", + "category": "Component" + }, + "spectrum-search-font-weight": { + "description": "Defined in `.spectrum-Search`.
Used by `--mod-textfield-font-weight`.", + "control": "text", + "category": "Component" + }, + "spectrum-search-font-style": { + "description": "Defined in `.spectrum-Search`.
Used by `.spectrum-Search-input`.", + "control": "text", + "category": "Component" + }, + "spectrum-search-line-height": { + "description": "Defined in `.spectrum-Search`.
Used by `.spectrum-Search-input`.", + "control": "text", + "category": "Component" + }, + "spectrum-search-color-default": { + "description": "Defined in `.spectrum-Search`.
Used by `--mod-textfield-text-color-default`, `--spectrum-search-color`.", + "control": "color", + "category": "Component" + }, + "spectrum-search-color-hover": { + "description": "Defined in `.spectrum-Search`.
Used by `--mod-textfield-text-color-hover`, `--spectrum-search-color`.", + "control": "color", + "category": "Component" + }, + "spectrum-search-color-focus": { + "description": "Defined in `.spectrum-Search`.
Used by `--mod-textfield-text-color-focus`, `--spectrum-search-color`.", + "control": "color", + "category": "Component" + }, + "spectrum-search-color-focus-hover": { + "description": "Defined in `.spectrum-Search`.
Used by `--mod-textfield-text-color-focus-hover`, `--spectrum-search-color`.", + "control": "color", + "category": "Component" + }, + "spectrum-search-color-key-focus": { + "description": "Defined in `.spectrum-Search`.
Used by `--mod-textfield-text-color-keyboard-focus`, `--spectrum-search-color`.", + "control": "color", + "category": "Component" + }, + "spectrum-search-border-width": { + "description": "Defined in `.spectrum-Search`.
Used by `--mod-textfield-border-width`, `.spectrum-Search-input`, `.spectrum-Search:not(.spectrum-Search--quiet) .spectrum-Search-input`.", + "control": "text", + "category": "Component" + }, + "spectrum-search-color-disabled": { + "description": "Defined in `.spectrum-Search`.
Used by `--mod-textfield-text-color-disabled`, `--spectrum-search-color`.", + "control": "color", + "category": "Component" + }, + "spectrum-search-border-radius": { + "description": "Defined in `.spectrum-Search`, `.spectrum-Search.spectrum-Search--sizeM`, `.spectrum-Search.spectrum-Search--sizeS`, `.spectrum-Search.spectrum-Search--sizeL`, `.spectrum-Search.spectrum-Search--sizeXL`.
Used by `--mod-textfield-corner-radius`, `.spectrum-Search-clearButton, .spectrum-Search-clearButton .spectrum-ClearButton-fill`, `.spectrum-Search--quiet .spectrum-Search-input`.", + "control": "text", + "category": "Component" + }, + "spectrum-search-border-color-default": { + "description": "Defined in `.spectrum-Search`.
Used by `--mod-textfield-border-color`.", + "control": "color", + "category": "Component" + }, + "spectrum-search-border-color-hover": { + "description": "Defined in `.spectrum-Search`.
Used by `--mod-textfield-border-color-hover`.", + "control": "color", + "category": "Component" + }, + "spectrum-search-border-color-focus": { + "description": "Defined in `.spectrum-Search`.
Used by `--mod-textfield-border-color-focus`.", + "control": "color", + "category": "Component" + }, + "spectrum-search-border-color-focus-hover": { + "description": "Defined in `.spectrum-Search`.
Used by `--mod-textfield-border-color-focus-hover`.", + "control": "color", + "category": "Component" + }, + "spectrum-search-border-color-key-focus": { + "description": "Defined in `.spectrum-Search`.
Used by `--mod-textfield-border-color-keyboard-focus`.", + "control": "color", + "category": "Component" + }, + "spectrum-search-border-color-disabled": { + "description": "Defined in `.spectrum-Search--quiet`, `.spectrum-Search`.
Used by `--mod-textfield-border-color-disabled`.", + "control": "color", + "category": "Component" + }, + "spectrum-search-background-color": { + "description": "Defined in `.spectrum-Search--quiet`, `.spectrum-Search`.
Used by `--mod-textfield-background-color`.", + "control": "color", + "category": "Component" + }, + "spectrum-search-background-color-disabled": { + "description": "Defined in `.spectrum-Search--quiet`, `.spectrum-Search`.
Used by `--mod-textfield-background-color-disabled`.", + "control": "color", + "category": "Component" + }, + "spectrum-search-color": { + "description": "Defined in `.spectrum-Search-icon`, `.spectrum-Search-textfield.is-focused .spectrum-Search-icon`, `.spectrum-Search-textfield.is-keyboardFocused .spectrum-Search-icon`, `.spectrum-Search-textfield.is-disabled .spectrum-Search-icon`, `.spectrum-Search-textfield:hover .spectrum-Search-icon`, `.spectrum-Search-textfield.is-focused:hover .spectrum-Search-icon`, `.spectrum-Search-textfield.is-disabled:hover .spectrum-Search-icon`.
Used by `.spectrum-Search-icon`.", + "control": "color", + "category": "Component" + }, + "spectrum-search-edge-to-visual": { + "description": "Defined in `.spectrum-Search`, `.spectrum-Search.spectrum-Search--sizeM`, `.spectrum-Search.spectrum-Search--sizeS`, `.spectrum-Search.spectrum-Search--sizeL`, `.spectrum-Search.spectrum-Search--sizeXL`.
Used by `.spectrum-Search:not(.spectrum-Search--quiet) .spectrum-Search-icon`, `.spectrum-Search:not(.spectrum-Search--quiet) .spectrum-Search-input`, `.spectrum-Search--quiet .spectrum-Search-input`.", + "control": "text", + "category": "Component" + } + }, + "global": { + "spectrum-gray-500": { + "value": "light-dark(rgb(143, 143, 143), rgb(109, 109, 109))", + "description": "Used by `--system-search-border-color-default`.", + "control": "text", + "category": "Global" + }, + "spectrum-gray-600": { + "value": "light-dark(rgb(113, 113, 113), rgb(138, 138, 138))", + "description": "Used by `--system-search-border-color-hover`.", + "control": "text", + "category": "Global" + }, + "spectrum-gray-800": { + "value": "light-dark(rgb(41, 41, 41), rgb(219, 219, 219))", + "description": "Used by `--system-search-border-color-focus`, `--system-search-border-color-key-focus`.", + "control": "text", + "category": "Global" + }, + "spectrum-gray-900": { + "value": "light-dark(rgb(19, 19, 19), rgb(242, 242, 242))", + "description": "Used by `--system-search-border-color-focus-hover`.", + "control": "text", + "category": "Global" + }, + "spectrum-gray-25": { + "value": "light-dark(rgb(255, 255, 255), rgb(17, 17, 17))", + "description": "Used by `--system-search-background-color`, `--system-search-background-color-disabled`.", + "control": "text", + "category": "Global" + }, + "spectrum-gray-300": { + "value": "light-dark(rgb(218, 218, 218), rgb(57, 57, 57))", + "description": "Used by `--system-search-border-color-disabled`.", + "control": "text", + "category": "Global" + }, + "spectrum-corner-radius-100": { + "value": "8px", + "description": "Used by `--system-search-border-radius`, `--system-search-size-m-border-radius`, `--system-search-size-s-border-radius`, `--system-search-size-l-border-radius`, `--system-search-size-xl-border-radius`.", + "control": "text", + "category": "Global" + }, + "spectrum-component-edge-to-visual-100": { + "value": "10px", + "description": "Used by `--system-search-edge-to-visual`, `--system-search-size-m-edge-to-visual`.", + "control": "text", + "category": "Global" + }, + "spectrum-component-edge-to-visual-75": { + "value": "8px", + "description": "Used by `--system-search-size-s-edge-to-visual`.", + "control": "text", + "category": "Global" + }, + "spectrum-component-edge-to-visual-200": { + "value": "13px", + "description": "Used by `--system-search-size-l-edge-to-visual`.", + "control": "text", + "category": "Global" + }, + "spectrum-component-edge-to-visual-300": { + "value": "14px", + "description": "Used by `--system-search-size-xl-edge-to-visual`.", + "control": "text", + "category": "Global" + }, + "spectrum-disabled-border-color": { + "value": "var(--spectrum-gray-300)", + "description": "Used by `--system-search-quiet-border-color-disabled`, `--spectrum-search-border-color-disabled`.", + "control": "color", + "category": "Global" + }, + "spectrum-field-width": { + "value": "192px", + "description": "Used by `--spectrum-search-inline-size`.", + "control": "text", + "category": "Global" + }, + "spectrum-component-height-100": { + "value": "32px", + "description": "Used by `--spectrum-search-block-size`.", + "control": "text", + "category": "Global" + }, + "spectrum-workflow-icon-size-100": { + "value": "20px", + "description": "Used by `--spectrum-search-icon-size`.", + "control": "text", + "category": "Global" + }, + "spectrum-text-to-visual-100": { + "value": "6px", + "description": "Used by `--spectrum-search-text-to-icon`.", + "control": "text", + "category": "Global" + }, + "spectrum-help-text-to-component": { + "value": "0px", + "description": "Used by `--spectrum-search-to-help-text`.", + "control": "text", + "category": "Global" + }, + "spectrum-component-top-to-text-100": { + "value": "6px", + "description": "Used by `--spectrum-search-top-to-text`.", + "control": "text", + "category": "Global" + }, + "spectrum-component-bottom-to-text-100": { + "value": "9px", + "description": "Used by `--spectrum-search-bottom-to-text`.", + "control": "text", + "category": "Global" + }, + "spectrum-focus-indicator-thickness": { + "value": "2px", + "description": "Used by `--spectrum-search-focus-indicator-thickness`.", + "control": "text", + "category": "Global" + }, + "spectrum-focus-indicator-gap": { + "value": "2px", + "description": "Used by `--spectrum-search-focus-indicator-gap`.", + "control": "text", + "category": "Global" + }, + "spectrum-focus-indicator-color": { + "value": "var(--spectrum-blue-800)", + "description": "Used by `--spectrum-search-focus-indicator-color`.", + "control": "color", + "category": "Global" + }, + "spectrum-sans-font-family-stack": { + "description": "Used by `--spectrum-search-font-family`.", + "control": "text", + "category": "Global" + }, + "spectrum-regular-font-weight": { + "value": "400", + "description": "Used by `--spectrum-search-font-weight`.", + "control": "text", + "category": "Global" + }, + "spectrum-default-font-style": { + "value": "normal", + "description": "Used by `--spectrum-search-font-style`.", + "control": "text", + "category": "Global" + }, + "spectrum-line-height-100": { + "value": "1.3", + "description": "Used by `--spectrum-search-line-height`.", + "control": "text", + "category": "Global" + }, + "spectrum-neutral-content-color-default": { + "value": "var(--spectrum-gray-800)", + "description": "Used by `--spectrum-search-color-default`.", + "control": "color", + "category": "Global" + }, + "spectrum-neutral-content-color-hover": { + "value": "var(--spectrum-gray-900)", + "description": "Used by `--spectrum-search-color-hover`.", + "control": "color", + "category": "Global" + }, + "spectrum-neutral-content-color-focus": { + "value": "var(--spectrum-neutral-content-color-down)", + "description": "Used by `--spectrum-search-color-focus`.", + "control": "color", + "category": "Global" + }, + "spectrum-neutral-content-color-focus-hover": { + "value": "var(--spectrum-neutral-content-color-down)", + "description": "Used by `--spectrum-search-color-focus-hover`.", + "control": "color", + "category": "Global" + }, + "spectrum-neutral-content-color-key-focus": { + "value": "var(--spectrum-gray-900)", + "description": "Used by `--spectrum-search-color-key-focus`.", + "control": "color", + "category": "Global" + }, + "spectrum-border-width-100": { + "value": "1px", + "description": "Used by `--spectrum-search-border-width`.", + "control": "text", + "category": "Global" + }, + "spectrum-disabled-content-color": { + "value": "var(--spectrum-gray-400)", + "description": "Used by `--spectrum-search-color-disabled`.", + "control": "color", + "category": "Global" + }, + "spectrum-component-height-75": { + "value": "24px", + "description": "Used by `--spectrum-search-block-size`.", + "control": "text", + "category": "Global" + }, + "spectrum-workflow-icon-size-75": { + "value": "16px", + "description": "Used by `--spectrum-search-icon-size`.", + "control": "text", + "category": "Global" + }, + "spectrum-text-to-visual-75": { + "value": "5px", + "description": "Used by `--spectrum-search-text-to-icon`.", + "control": "text", + "category": "Global" + }, + "spectrum-component-height-200": { + "value": "40px", + "description": "Used by `--spectrum-search-block-size`.", + "control": "text", + "category": "Global" + }, + "spectrum-workflow-icon-size-200": { + "value": "22px", + "description": "Used by `--spectrum-search-icon-size`.", + "control": "text", + "category": "Global" + }, + "spectrum-text-to-visual-200": { + "value": "7px", + "description": "Used by `--spectrum-search-text-to-icon`.", + "control": "text", + "category": "Global" + }, + "spectrum-component-height-300": { + "value": "48px", + "description": "Used by `--spectrum-search-block-size`.", + "control": "text", + "category": "Global" + }, + "spectrum-workflow-icon-size-300": { + "value": "26px", + "description": "Used by `--spectrum-search-icon-size`.", + "control": "text", + "category": "Global" + }, + "spectrum-text-to-visual-300": { + "value": "8px", + "description": "Used by `--spectrum-search-text-to-icon`.", + "control": "text", + "category": "Global" + }, + "spectrum-field-edge-to-visual-quiet": { + "value": "0px", + "description": "Used by `--mod-search-edge-to-visual`.", + "control": "text", + "category": "Global" + } + }, + "system-theme": { + "system-search-border-color-default": { + "description": "Defined in `.spectrum`.
Used by `--spectrum-search-border-color-default`.", + "control": "color" + }, + "system-search-border-color-hover": { + "description": "Defined in `.spectrum`.
Used by `--spectrum-search-border-color-hover`.", + "control": "color" + }, + "system-search-border-color-focus": { + "description": "Defined in `.spectrum`.
Used by `--spectrum-search-border-color-focus`.", + "control": "color" + }, + "system-search-border-color-focus-hover": { + "description": "Defined in `.spectrum`.
Used by `--spectrum-search-border-color-focus-hover`.", + "control": "color" + }, + "system-search-border-color-key-focus": { + "description": "Defined in `.spectrum`.
Used by `--spectrum-search-border-color-key-focus`.", + "control": "color" + }, + "system-search-background-color": { + "description": "Defined in `.spectrum`.
Used by `--spectrum-search-background-color`.", + "control": "color" + }, + "system-search-background-color-disabled": { + "description": "Defined in `.spectrum`.
Used by `--spectrum-search-background-color-disabled`.", + "control": "color" + }, + "system-search-border-color-disabled": { + "description": "Defined in `.spectrum`.
Used by `--spectrum-search-border-color-disabled`.", + "control": "color" + }, + "system-search-border-radius": { + "description": "Defined in `.spectrum`.
Used by `--spectrum-search-border-radius`.", + "control": "text" + }, + "system-search-size-m-border-radius": { + "description": "Defined in `.spectrum`.
Used by `--spectrum-search-border-radius`.", + "control": "text" + }, + "system-search-edge-to-visual": { + "description": "Defined in `.spectrum`.
Used by `--spectrum-search-edge-to-visual`.", + "control": "text" + }, + "system-search-size-m-edge-to-visual": { + "description": "Defined in `.spectrum`.
Used by `--spectrum-search-edge-to-visual`.", + "control": "text" + }, + "system-search-size-s-border-radius": { + "description": "Defined in `.spectrum`.
Used by `--spectrum-search-border-radius`.", + "control": "text" + }, + "system-search-size-s-edge-to-visual": { + "description": "Defined in `.spectrum`.
Used by `--spectrum-search-edge-to-visual`.", + "control": "text" + }, + "system-search-size-l-border-radius": { + "description": "Defined in `.spectrum`.
Used by `--spectrum-search-border-radius`.", + "control": "text" + }, + "system-search-size-l-edge-to-visual": { + "description": "Defined in `.spectrum`.
Used by `--spectrum-search-edge-to-visual`.", + "control": "text" + }, + "system-search-size-xl-border-radius": { + "description": "Defined in `.spectrum`.
Used by `--spectrum-search-border-radius`.", + "control": "text" + }, + "system-search-size-xl-edge-to-visual": { + "description": "Defined in `.spectrum`.
Used by `--spectrum-search-edge-to-visual`.", + "control": "text" + }, + "system-search-quiet-background-color-disabled": { + "description": "Defined in `.spectrum`.
Used by `--spectrum-search-background-color-disabled`.", + "control": "color" + }, + "system-search-quiet-border-color-disabled": { + "description": "Defined in `.spectrum`.
Used by `--spectrum-search-border-color-disabled`.", + "control": "color" + } + }, + "passthroughs": { + "mod-textfield-font-family": { + "category": "Passthrough" + }, + "mod-textfield-font-weight": { + "category": "Passthrough" + }, + "mod-textfield-corner-radius": { + "category": "Passthrough" + }, + "mod-textfield-border-width": { + "category": "Passthrough" + }, + "mod-textfield-focus-indicator-gap": { + "category": "Passthrough" + }, + "mod-textfield-focus-indicator-width": { + "category": "Passthrough" + }, + "mod-textfield-focus-indicator-color": { + "category": "Passthrough" + }, + "mod-textfield-text-color-default": { + "category": "Passthrough" + }, + "mod-textfield-text-color-hover": { + "category": "Passthrough" + }, + "mod-textfield-text-color-focus": { + "category": "Passthrough" + }, + "mod-textfield-text-color-focus-hover": { + "category": "Passthrough" + }, + "mod-textfield-text-color-keyboard-focus": { + "category": "Passthrough" + }, + "mod-textfield-text-color-disabled": { + "category": "Passthrough" + }, + "mod-textfield-border-color": { + "category": "Passthrough" + }, + "mod-textfield-border-color-hover": { + "category": "Passthrough" + }, + "mod-textfield-border-color-focus": { + "category": "Passthrough" + }, + "mod-textfield-border-color-focus-hover": { + "category": "Passthrough" + }, + "mod-textfield-border-color-keyboard-focus": { + "category": "Passthrough" + }, + "mod-textfield-border-color-disabled": { + "category": "Passthrough" + }, + "mod-textfield-background-color": { + "category": "Passthrough" + }, + "mod-textfield-background-color-disabled": { + "category": "Passthrough" + } + }, + "high-contrast": { + "highcontrast-search-color-default": { + "value": "var(--mod-search-color-default, var(--spectrum-search-color-default))", + "description": "Defined in `.spectrum-Search .spectrum-Search-textfield, .spectrum-Search .spectrum-Search-textfield .spectrum-Search-input`.
Used by `--spectrum-search-color`.
Defaults to `var(--mod-search-color-default, var(--spectrum-search-color-default))`, if not set.", + "control": "color" + }, + "highcontrast-search-color-hover": { + "value": "var(--mod-search-color-hover, var(--spectrum-search-color-hover))", + "description": "Defined in `.spectrum-Search .spectrum-Search-textfield, .spectrum-Search .spectrum-Search-textfield .spectrum-Search-input`.
Used by `--spectrum-search-color`.
Defaults to `var(--mod-search-color-hover, var(--spectrum-search-color-hover))`, if not set.", + "control": "color" + }, + "highcontrast-search-color-focus": { + "value": "var(--mod-search-color-focus-hover, var(--spectrum-search-color-focus-hover))", + "description": "Defined in `.spectrum-Search .spectrum-Search-textfield, .spectrum-Search .spectrum-Search-textfield .spectrum-Search-input`.
Used by `--spectrum-search-color`.
Defaults to `var(--mod-search-color-focus-hover, var(--spectrum-search-color-focus-hover))`, if not set.", + "control": "color" + }, + "highcontrast-search-color-disabled": { + "value": "var(--mod-search-color-disabled, var(--spectrum-search-color-disabled))", + "description": "Defined in `.spectrum-Search .spectrum-Search-textfield, .spectrum-Search .spectrum-Search-textfield .spectrum-Search-input`.
Used by `--spectrum-search-color`.
Defaults to `var(--mod-search-color-disabled, var(--spectrum-search-color-disabled))`, if not set.", + "control": "color" + } + } } diff --git a/components/search/stories/search.stories.js b/components/search/stories/search.stories.js index fd3e3807c8e..30e8dafd47a 100644 --- a/components/search/stories/search.stories.js +++ b/components/search/stories/search.stories.js @@ -1,11 +1,13 @@ import { Sizes } from "@spectrum-css/preview/decorators"; import { disableDefaultModes } from "@spectrum-css/preview/modes"; import { isDisabled, isQuiet, size } from "@spectrum-css/preview/types"; -import metadata from "../dist/metadata.json"; -import packageJson from "../package.json"; import { SearchGroup } from "./search.test.js"; import { SearchOptions, Template } from "./template.js"; +// Local assets to render the component styles and structure +import metadata from "../dist/metadata.json"; +import packageJson from "../package.json"; + /** * A search field is used for searching and filtering items. * @@ -62,6 +64,7 @@ export default { }, packageJson, metadata, + cssprops: metadata.modifiers, }, }; diff --git a/components/sidenav/dist/metadata.json b/components/sidenav/dist/metadata.json index a0be758aa57..39bd9c4c263 100644 --- a/components/sidenav/dist/metadata.json +++ b/components/sidenav/dist/metadata.json @@ -12,198 +12,952 @@ ".spectrum-SideNav-item", ".spectrum-SideNav-item.is-disabled .spectrum-SideNav-itemLink", ".spectrum-SideNav-item.is-selected .spectrum-SideNav-itemLink", - ".spectrum-SideNav-item.is-selected .spectrum-SideNav-itemLink.is-keyboardFocused", ".spectrum-SideNav-item.is-selected .spectrum-SideNav-itemLink:active", ".spectrum-SideNav-item.is-selected .spectrum-SideNav-itemLink:focus-visible", ".spectrum-SideNav-item.is-selected .spectrum-SideNav-itemLink:hover", + ".spectrum-SideNav-item.is-selected .spectrum-SideNav-itemLink.is-keyboardFocused", ".spectrum-SideNav-itemLink", ".spectrum-SideNav-itemLink .spectrum-Icon", ".spectrum-SideNav-itemLink .spectrum-SideNav-link-text", - ".spectrum-SideNav-itemLink.is-keyboardFocused", ".spectrum-SideNav-itemLink:active", ".spectrum-SideNav-itemLink:focus-visible", ".spectrum-SideNav-itemLink:hover", + ".spectrum-SideNav-itemLink.is-keyboardFocused", ".spectrum-SideNav:lang(ja)", ".spectrum-SideNav:lang(ko)", ".spectrum-SideNav:lang(zh)" ], - "modifiers": [ - "--mod-sidenav-background-default", - "--mod-sidenav-background-disabled", - "--mod-sidenav-background-hover", - "--mod-sidenav-background-hover-selected", - "--mod-sidenav-background-key-focus", - "--mod-sidenav-background-key-focus-selected", - "--mod-sidenav-border-radius", - "--mod-sidenav-bottom-to-label", - "--mod-sidenav-content-color-default", - "--mod-sidenav-content-color-default-selected", - "--mod-sidenav-content-color-down", - "--mod-sidenav-content-color-down-selected", - "--mod-sidenav-content-color-hover", - "--mod-sidenav-content-color-hover-selected", - "--mod-sidenav-content-color-key-focus", - "--mod-sidenav-content-color-key-focus-selected", - "--mod-sidenav-content-disabled-color", - "--mod-sidenav-focus-ring-color", - "--mod-sidenav-focus-ring-gap", - "--mod-sidenav-focus-ring-size", - "--mod-sidenav-gap", - "--mod-sidenav-header-color", - "--mod-sidenav-header-font-size", - "--mod-sidenav-header-font-style", - "--mod-sidenav-header-font-weight", - "--mod-sidenav-header-line-height", - "--mod-sidenav-heading-bottom-margin", - "--mod-sidenav-heading-top-margin", - "--mod-sidenav-icon-size", - "--mod-sidenav-icon-spacing", - "--mod-sidenav-inline-padding", - "--mod-sidenav-item-background-default-selected", - "--mod-sidenav-item-background-down", - "--mod-sidenav-item-background-down-selected", - "--mod-sidenav-max-width", - "--mod-sidenav-min-height", - "--mod-sidenav-min-width", - "--mod-sidenav-start-to-content-second-level", - "--mod-sidenav-start-to-content-third-level", - "--mod-sidenav-start-to-content-with-icon-second-level", - "--mod-sidenav-start-to-content-with-icon-third-level", - "--mod-sidenav-text-font-family", - "--mod-sidenav-text-font-size", - "--mod-sidenav-text-font-style", - "--mod-sidenav-text-font-weight", - "--mod-sidenav-text-line-height", - "--mod-sidenav-top-level-font-family", - "--mod-sidenav-top-level-font-size", - "--mod-sidenav-top-level-font-style", - "--mod-sidenav-top-level-font-weight", - "--mod-sidenav-top-level-line-height", - "--mod-sidenav-top-to-icon", - "--mod-sidenav-top-to-label", - "--mod-sidenav-width" - ], - "component": [ - "--spectrum-side-navigation-bottom-to-text", - "--spectrum-side-navigation-header-to-item", - "--spectrum-side-navigation-item-to-header", - "--spectrum-side-navigation-item-to-item", - "--spectrum-side-navigation-maximum-width", - "--spectrum-side-navigation-minimum-width", - "--spectrum-side-navigation-second-level-edge-to-text", - "--spectrum-side-navigation-third-level-edge-to-text", - "--spectrum-side-navigation-with-icon-second-level-edge-to-text", - "--spectrum-side-navigation-with-icon-third-level-edge-to-text", - "--spectrum-sidenav-background-default", - "--spectrum-sidenav-background-disabled", - "--spectrum-sidenav-background-hover", - "--spectrum-sidenav-background-hover-selected", - "--spectrum-sidenav-background-key-focus", - "--spectrum-sidenav-background-key-focus-selected", - "--spectrum-sidenav-border-radius", - "--spectrum-sidenav-bottom-to-label", - "--spectrum-sidenav-content-color-default", - "--spectrum-sidenav-content-color-default-selected", - "--spectrum-sidenav-content-color-down", - "--spectrum-sidenav-content-color-down-selected", - "--spectrum-sidenav-content-color-hover", - "--spectrum-sidenav-content-color-hover-selected", - "--spectrum-sidenav-content-color-key-focus", - "--spectrum-sidenav-content-color-key-focus-selected", - "--spectrum-sidenav-content-disabled-color", - "--spectrum-sidenav-focus-ring-color", - "--spectrum-sidenav-focus-ring-gap", - "--spectrum-sidenav-focus-ring-size", - "--spectrum-sidenav-gap", - "--spectrum-sidenav-header-color", - "--spectrum-sidenav-header-font-family", - "--spectrum-sidenav-header-font-size", - "--spectrum-sidenav-header-font-style", - "--spectrum-sidenav-header-font-weight", - "--spectrum-sidenav-header-line-height", - "--spectrum-sidenav-heading-bottom-margin", - "--spectrum-sidenav-heading-top-margin", - "--spectrum-sidenav-icon-size", - "--spectrum-sidenav-icon-spacing", - "--spectrum-sidenav-inline-padding", - "--spectrum-sidenav-item-background-default-selected", - "--spectrum-sidenav-item-background-down", - "--spectrum-sidenav-item-background-down-selected", - "--spectrum-sidenav-max-width", - "--spectrum-sidenav-min-height", - "--spectrum-sidenav-min-width", - "--spectrum-sidenav-start-to-content-second-level", - "--spectrum-sidenav-start-to-content-third-level", - "--spectrum-sidenav-start-to-content-with-icon-second-level", - "--spectrum-sidenav-start-to-content-with-icon-third-level", - "--spectrum-sidenav-text-font-family", - "--spectrum-sidenav-text-font-size", - "--spectrum-sidenav-text-font-style", - "--spectrum-sidenav-text-font-weight", - "--spectrum-sidenav-text-line-height", - "--spectrum-sidenav-top-level-font-family", - "--spectrum-sidenav-top-level-font-size", - "--spectrum-sidenav-top-level-font-style", - "--spectrum-sidenav-top-level-font-weight", - "--spectrum-sidenav-top-level-line-height", - "--spectrum-sidenav-top-to-icon", - "--spectrum-sidenav-top-to-label", - "--spectrum-sidenav-width" - ], - "global": [ - "--spectrum-animation-duration-100", - "--spectrum-bold-font-weight", - "--spectrum-cjk-line-height-100", - "--spectrum-component-edge-to-text-100", - "--spectrum-component-height-100", - "--spectrum-component-top-to-text-100", - "--spectrum-component-top-to-workflow-icon-100", - "--spectrum-corner-radius-100", - "--spectrum-default-font-style", - "--spectrum-disabled-content-color", - "--spectrum-focus-indicator-color", - "--spectrum-focus-indicator-gap", - "--spectrum-focus-indicator-thickness", - "--spectrum-font-size-100", - "--spectrum-font-size-75", - "--spectrum-gray-100", - "--spectrum-gray-200", - "--spectrum-gray-600", - "--spectrum-line-height-100", - "--spectrum-medium-font-weight", - "--spectrum-neutral-content-color-default", - "--spectrum-neutral-content-color-down", - "--spectrum-neutral-content-color-hover", - "--spectrum-neutral-content-color-key-focus", - "--spectrum-regular-font-weight", - "--spectrum-sans-font-family-stack", - "--spectrum-text-to-visual-100", - "--spectrum-workflow-icon-size-100" - ], - "system-theme": [ - "--system-side-nav-background-hover", - "--system-side-nav-background-hover-selected", - "--system-side-nav-background-key-focus", - "--system-side-nav-background-key-focus-selected", - "--system-side-nav-item-background-default-selected", - "--system-side-nav-item-background-down", - "--system-side-nav-item-background-down-selected" - ], - "passthroughs": [], - "high-contrast": [ - "--highcontrast-sidenav-background-hover", - "--highcontrast-sidenav-background-hover-selected", - "--highcontrast-sidenav-background-key-focus", - "--highcontrast-sidenav-background-key-focus-selected", - "--highcontrast-sidenav-content-color-default", - "--highcontrast-sidenav-content-color-default-selected", - "--highcontrast-sidenav-content-color-down", - "--highcontrast-sidenav-content-color-hover", - "--highcontrast-sidenav-content-disabled-color", - "--highcontrast-sidenav-focus-ring-color", - "--highcontrast-sidenav-item-background-default-selected", - "--highcontrast-sidenav-item-background-down", - "--highcontrast-sidenav-item-background-down-selected", - "--highcontrast-sidenav-top-level-font-color" - ] + "modifiers": { + "mod-sidenav-background-disabled": { + "value": "var(--spectrum-sidenav-background-disabled)", + "description": "Used by `.spectrum-SideNav-item.is-disabled .spectrum-SideNav-itemLink`.
Defaults to `var(--spectrum-sidenav-background-disabled)`, if not set.", + "control": "text", + "category": "Modifier" + }, + "mod-sidenav-content-disabled-color": { + "value": "var(--spectrum-sidenav-content-disabled-color)", + "description": "Used by `.spectrum-SideNav-item.is-disabled .spectrum-SideNav-itemLink`.
Defaults to `var(--spectrum-sidenav-content-disabled-color)`, if not set.", + "control": "color", + "category": "Modifier" + }, + "mod-sidenav-item-background-default-selected": { + "value": "var(--spectrum-sidenav-item-background-default-selected)", + "description": "Used by `.spectrum-SideNav-item.is-selected .spectrum-SideNav-itemLink`.
Defaults to `var(--spectrum-sidenav-item-background-default-selected)`, if not set.", + "control": "text", + "category": "Modifier" + }, + "mod-sidenav-content-color-default-selected": { + "value": "var(--spectrum-sidenav-content-color-default-selected)", + "description": "Used by `.spectrum-SideNav-item.is-selected .spectrum-SideNav-itemLink`.
Defaults to `var(--spectrum-sidenav-content-color-default-selected)`, if not set.", + "control": "color", + "category": "Modifier" + }, + "mod-sidenav-item-background-down-selected": { + "value": "var(--spectrum-sidenav-item-background-down-selected)", + "description": "Used by `.spectrum-SideNav-item.is-selected .spectrum-SideNav-itemLink:active`.
Defaults to `var(--spectrum-sidenav-item-background-down-selected)`, if not set.", + "control": "text", + "category": "Modifier" + }, + "mod-sidenav-content-color-down-selected": { + "value": "var(--spectrum-sidenav-content-color-down-selected)", + "description": "Used by `.spectrum-SideNav-item.is-selected .spectrum-SideNav-itemLink:active`.
Defaults to `var(--spectrum-sidenav-content-color-down-selected)`, if not set.", + "control": "color", + "category": "Modifier" + }, + "mod-sidenav-background-key-focus-selected": { + "value": "var(--spectrum-sidenav-background-key-focus-selected)", + "description": "Used by `.spectrum-SideNav-item.is-selected .spectrum-SideNav-itemLink.is-keyboardFocused, .spectrum-SideNav-item.is-selected .spectrum-SideNav-itemLink:focus-visible`.
Defaults to `var(--spectrum-sidenav-background-key-focus-selected)`, if not set.", + "control": "text", + "category": "Modifier" + }, + "mod-sidenav-content-color-key-focus-selected": { + "value": "var(--spectrum-sidenav-content-color-key-focus-selected)", + "description": "Used by `.spectrum-SideNav-item.is-selected .spectrum-SideNav-itemLink.is-keyboardFocused, .spectrum-SideNav-item.is-selected .spectrum-SideNav-itemLink:focus-visible`.
Defaults to `var(--spectrum-sidenav-content-color-key-focus-selected)`, if not set.", + "control": "color", + "category": "Modifier" + }, + "mod-sidenav-inline-padding": { + "value": "var(--spectrum-sidenav-inline-padding)", + "description": "Used by `.spectrum-SideNav-itemLink`, `.spectrum-SideNav-heading`.
Defaults to `var(--spectrum-sidenav-inline-padding)`, if not set.", + "control": "text", + "category": "Modifier" + }, + "mod-sidenav-gap": { + "value": "var(--spectrum-sidenav-gap)", + "description": "Used by `.spectrum-SideNav-itemLink`, `.spectrum-SideNav-heading`.
Defaults to `var(--spectrum-sidenav-gap)`, if not set.", + "control": "text", + "category": "Modifier" + }, + "mod-sidenav-border-radius": { + "value": "var(--spectrum-sidenav-border-radius)", + "description": "Used by `.spectrum-SideNav-itemLink`.
Defaults to `var(--spectrum-sidenav-border-radius)`, if not set.", + "control": "text", + "category": "Modifier" + }, + "mod-sidenav-background-default": { + "value": "var(--spectrum-sidenav-background-default)", + "description": "Used by `.spectrum-SideNav-itemLink`.
Defaults to `var(--spectrum-sidenav-background-default)`, if not set.", + "control": "text", + "category": "Modifier" + }, + "mod-sidenav-content-color-default": { + "value": "var(--spectrum-sidenav-content-color-default)", + "description": "Used by `.spectrum-SideNav-itemLink`.
Defaults to `var(--spectrum-sidenav-content-color-default)`, if not set.", + "control": "color", + "category": "Modifier" + }, + "mod-sidenav-width": { + "value": "var(--spectrum-sidenav-width)", + "description": "Used by `.spectrum-SideNav-itemLink`.
Defaults to `var(--spectrum-sidenav-width)`, if not set.", + "control": "text", + "category": "Modifier" + }, + "mod-sidenav-min-width": { + "value": "var(--spectrum-sidenav-min-width)", + "description": "Used by `.spectrum-SideNav-itemLink`.
Defaults to `var(--spectrum-sidenav-min-width)`, if not set.", + "control": "text", + "category": "Modifier" + }, + "mod-sidenav-max-width": { + "value": "var(--spectrum-sidenav-max-width)", + "description": "Used by `.spectrum-SideNav-itemLink`.
Defaults to `var(--spectrum-sidenav-max-width)`, if not set.", + "control": "text", + "category": "Modifier" + }, + "mod-sidenav-min-height": { + "value": "var(--spectrum-sidenav-min-height)", + "description": "Used by `.spectrum-SideNav-itemLink`.
Defaults to `var(--spectrum-sidenav-min-height)`, if not set.", + "control": "text", + "category": "Modifier" + }, + "mod-sidenav-text-font-family": { + "value": "var(--spectrum-sidenav-text-font-family)", + "description": "Used by `.spectrum-SideNav-itemLink`.
Defaults to `var(--spectrum-sidenav-text-font-family)`, if not set.", + "control": "text", + "category": "Modifier" + }, + "mod-sidenav-text-font-size": { + "value": "var(--spectrum-sidenav-text-font-size)", + "description": "Used by `.spectrum-SideNav-itemLink`.
Defaults to `var(--spectrum-sidenav-text-font-size)`, if not set.", + "control": "text", + "category": "Modifier" + }, + "mod-sidenav-text-font-weight": { + "value": "var(--spectrum-sidenav-text-font-weight)", + "description": "Used by `.spectrum-SideNav-itemLink`, `.spectrum-SideNav--multiLevel .spectrum-SideNav .spectrum-SideNav-itemLink`.
Defaults to `var(--spectrum-sidenav-text-font-weight)`, if not set.", + "control": "text", + "category": "Modifier" + }, + "mod-sidenav-text-font-style": { + "value": "var(--spectrum-sidenav-text-font-style)", + "description": "Used by `.spectrum-SideNav-itemLink`.
Defaults to `var(--spectrum-sidenav-text-font-style)`, if not set.", + "control": "text", + "category": "Modifier" + }, + "mod-sidenav-text-line-height": { + "value": "var(--spectrum-sidenav-text-line-height)", + "description": "Used by `.spectrum-SideNav-itemLink`.
Defaults to `var(--spectrum-sidenav-text-line-height)`, if not set.", + "control": "text", + "category": "Modifier" + }, + "mod-sidenav-top-to-label": { + "value": "var(--spectrum-sidenav-top-to-label)", + "description": "Used by `.spectrum-SideNav-itemLink .spectrum-SideNav-link-text`.
Defaults to `var(--spectrum-sidenav-top-to-label)`, if not set.", + "control": "text", + "category": "Modifier" + }, + "mod-sidenav-bottom-to-label": { + "value": "var(--spectrum-sidenav-bottom-to-label)", + "description": "Used by `.spectrum-SideNav-itemLink .spectrum-SideNav-link-text`.
Defaults to `var(--spectrum-sidenav-bottom-to-label)`, if not set.", + "control": "text", + "category": "Modifier" + }, + "mod-sidenav-icon-size": { + "value": "var(--spectrum-sidenav-icon-size)", + "description": "Used by `.spectrum-SideNav-itemLink .spectrum-Icon`.
Defaults to `var(--spectrum-sidenav-icon-size)`, if not set.", + "control": "text", + "category": "Modifier" + }, + "mod-sidenav-icon-spacing": { + "value": "var(--spectrum-sidenav-icon-spacing)", + "description": "Used by `.spectrum-SideNav-itemLink .spectrum-Icon`.
Defaults to `var(--spectrum-sidenav-icon-spacing)`, if not set.", + "control": "text", + "category": "Modifier" + }, + "mod-sidenav-top-to-icon": { + "value": "var(--spectrum-sidenav-top-to-icon)", + "description": "Used by `.spectrum-SideNav-itemLink .spectrum-Icon`.
Defaults to `var(--spectrum-sidenav-top-to-icon)`, if not set.", + "control": "text", + "category": "Modifier" + }, + "mod-sidenav-background-hover-selected": { + "value": "var(--spectrum-sidenav-background-hover-selected)", + "description": "Used by `.spectrum-SideNav-item.is-selected .spectrum-SideNav-itemLink:hover`.
Defaults to `var(--spectrum-sidenav-background-hover-selected)`, if not set.", + "control": "text", + "category": "Modifier" + }, + "mod-sidenav-content-color-hover-selected": { + "value": "var(--spectrum-sidenav-content-color-hover-selected)", + "description": "Used by `.spectrum-SideNav-item.is-selected .spectrum-SideNav-itemLink:hover`.
Defaults to `var(--spectrum-sidenav-content-color-hover-selected)`, if not set.", + "control": "color", + "category": "Modifier" + }, + "mod-sidenav-background-hover": { + "value": "var(--spectrum-sidenav-background-hover)", + "description": "Used by `.spectrum-SideNav-itemLink:hover`.
Defaults to `var(--spectrum-sidenav-background-hover)`, if not set.", + "control": "text", + "category": "Modifier" + }, + "mod-sidenav-content-color-hover": { + "value": "var(--spectrum-sidenav-content-color-hover)", + "description": "Used by `.spectrum-SideNav-itemLink:hover`.
Defaults to `var(--spectrum-sidenav-content-color-hover)`, if not set.", + "control": "color", + "category": "Modifier" + }, + "mod-sidenav-item-background-down": { + "value": "var(--spectrum-sidenav-item-background-down)", + "description": "Used by `.spectrum-SideNav-itemLink:active`.
Defaults to `var(--spectrum-sidenav-item-background-down)`, if not set.", + "control": "text", + "category": "Modifier" + }, + "mod-sidenav-content-color-down": { + "value": "var(--spectrum-sidenav-content-color-down)", + "description": "Used by `.spectrum-SideNav-itemLink:active`.
Defaults to `var(--spectrum-sidenav-content-color-down)`, if not set.", + "control": "color", + "category": "Modifier" + }, + "mod-sidenav-focus-ring-color": { + "value": "var(--spectrum-sidenav-focus-ring-color)", + "description": "Used by `.spectrum-SideNav-itemLink.is-keyboardFocused, .spectrum-SideNav-itemLink:focus-visible`.
Defaults to `var(--spectrum-sidenav-focus-ring-color)`, if not set.", + "control": "color", + "category": "Modifier" + }, + "mod-sidenav-focus-ring-size": { + "value": "var(--spectrum-sidenav-focus-ring-size)", + "description": "Used by `.spectrum-SideNav-itemLink.is-keyboardFocused, .spectrum-SideNav-itemLink:focus-visible`.
Defaults to `var(--spectrum-sidenav-focus-ring-size)`, if not set.", + "control": "text", + "category": "Modifier" + }, + "mod-sidenav-focus-ring-gap": { + "value": "var(--spectrum-sidenav-focus-ring-gap)", + "description": "Used by `.spectrum-SideNav-itemLink.is-keyboardFocused, .spectrum-SideNav-itemLink:focus-visible`.
Defaults to `var(--spectrum-sidenav-focus-ring-gap)`, if not set.", + "control": "text", + "category": "Modifier" + }, + "mod-sidenav-background-key-focus": { + "value": "var(--spectrum-sidenav-background-key-focus)", + "description": "Used by `.spectrum-SideNav-itemLink.is-keyboardFocused, .spectrum-SideNav-itemLink:focus-visible`.
Defaults to `var(--spectrum-sidenav-background-key-focus)`, if not set.", + "control": "text", + "category": "Modifier" + }, + "mod-sidenav-content-color-key-focus": { + "value": "var(--spectrum-sidenav-content-color-key-focus)", + "description": "Used by `.spectrum-SideNav-itemLink.is-keyboardFocused, .spectrum-SideNav-itemLink:focus-visible`.
Defaults to `var(--spectrum-sidenav-content-color-key-focus)`, if not set.", + "control": "color", + "category": "Modifier" + }, + "mod-sidenav-heading-top-margin": { + "value": "var(--spectrum-sidenav-heading-top-margin)", + "description": "Used by `.spectrum-SideNav-heading`.
Defaults to `var(--spectrum-sidenav-heading-top-margin)`, if not set.", + "control": "text", + "category": "Modifier" + }, + "mod-sidenav-heading-bottom-margin": { + "value": "var(--spectrum-sidenav-heading-bottom-margin)", + "description": "Used by `.spectrum-SideNav-heading`.
Defaults to `var(--spectrum-sidenav-heading-bottom-margin)`, if not set.", + "control": "text", + "category": "Modifier" + }, + "mod-sidenav-header-color": { + "value": "var(--spectrum-sidenav-header-color)", + "description": "Used by `.spectrum-SideNav-heading`.
Defaults to `var(--spectrum-sidenav-header-color)`, if not set.", + "control": "color", + "category": "Modifier" + }, + "mod-sidenav-header-font-size": { + "value": "var(--spectrum-sidenav-header-font-size)", + "description": "Used by `.spectrum-SideNav-heading`.
Defaults to `var(--spectrum-sidenav-header-font-size)`, if not set.", + "control": "text", + "category": "Modifier" + }, + "mod-sidenav-header-font-weight": { + "value": "var(--spectrum-sidenav-header-font-weight)", + "description": "Used by `.spectrum-SideNav-heading`.
Defaults to `var(--spectrum-sidenav-header-font-weight)`, if not set.", + "control": "text", + "category": "Modifier" + }, + "mod-sidenav-header-font-style": { + "value": "var(--spectrum-sidenav-header-font-style)", + "description": "Used by `.spectrum-SideNav-heading`.
Defaults to `var(--spectrum-sidenav-header-font-style)`, if not set.", + "control": "text", + "category": "Modifier" + }, + "mod-sidenav-header-line-height": { + "value": "var(--spectrum-sidenav-header-line-height)", + "description": "Used by `.spectrum-SideNav-heading`.
Defaults to `var(--spectrum-sidenav-header-line-height)`, if not set.", + "control": "text", + "category": "Modifier" + }, + "mod-sidenav-top-level-font-family": { + "value": "var(--spectrum-sidenav-top-level-font-family)", + "description": "Used by `.spectrum-SideNav--multiLevel .spectrum-SideNav-itemLink`.
Defaults to `var(--spectrum-sidenav-top-level-font-family)`, if not set.", + "control": "text", + "category": "Modifier" + }, + "mod-sidenav-top-level-font-weight": { + "value": "var(--spectrum-sidenav-top-level-font-weight)", + "description": "Used by `.spectrum-SideNav--multiLevel .spectrum-SideNav-itemLink`.
Defaults to `var(--spectrum-sidenav-top-level-font-weight)`, if not set.", + "control": "text", + "category": "Modifier" + }, + "mod-sidenav-top-level-font-style": { + "value": "var(--spectrum-sidenav-top-level-font-style)", + "description": "Used by `.spectrum-SideNav--multiLevel .spectrum-SideNav-itemLink`.
Defaults to `var(--spectrum-sidenav-top-level-font-style)`, if not set.", + "control": "text", + "category": "Modifier" + }, + "mod-sidenav-top-level-font-size": { + "value": "var(--spectrum-sidenav-top-level-font-size)", + "description": "Used by `.spectrum-SideNav--multiLevel .spectrum-SideNav-itemLink`.
Defaults to `var(--spectrum-sidenav-top-level-font-size)`, if not set.", + "control": "text", + "category": "Modifier" + }, + "mod-sidenav-top-level-line-height": { + "value": "var(--spectrum-sidenav-top-level-line-height)", + "description": "Used by `.spectrum-SideNav--multiLevel .spectrum-SideNav-itemLink`.
Defaults to `var(--spectrum-sidenav-top-level-line-height)`, if not set.", + "control": "text", + "category": "Modifier" + }, + "mod-sidenav-start-to-content-second-level": { + "value": "var(--spectrum-sidenav-start-to-content-second-level)", + "description": "Used by `.spectrum-SideNav--multiLevel .spectrum-SideNav .spectrum-SideNav-itemLink`.
Defaults to `var(--spectrum-sidenav-start-to-content-second-level)`, if not set.", + "control": "text", + "category": "Modifier" + }, + "mod-sidenav-start-to-content-third-level": { + "value": "var(--spectrum-sidenav-start-to-content-third-level)", + "description": "Used by `.spectrum-SideNav--multiLevel .spectrum-SideNav .spectrum-SideNav .spectrum-SideNav-itemLink`.
Defaults to `var(--spectrum-sidenav-start-to-content-third-level)`, if not set.", + "control": "text", + "category": "Modifier" + }, + "mod-sidenav-start-to-content-with-icon-second-level": { + "value": "var(--spectrum-sidenav-start-to-content-with-icon-second-level)", + "description": "Used by `.spectrum-SideNav--hasIcon.spectrum-SideNav--multiLevel .spectrum-SideNav .spectrum-SideNav-itemLink`.
Defaults to `var(--spectrum-sidenav-start-to-content-with-icon-second-level)`, if not set.", + "control": "text", + "category": "Modifier" + }, + "mod-sidenav-start-to-content-with-icon-third-level": { + "value": "var(--spectrum-sidenav-start-to-content-with-icon-third-level)", + "description": "Used by `.spectrum-SideNav--hasIcon.spectrum-SideNav--multiLevel .spectrum-SideNav .spectrum-SideNav .spectrum-SideNav-itemLink`.
Defaults to `var(--spectrum-sidenav-start-to-content-with-icon-third-level)`, if not set.", + "control": "text", + "category": "Modifier" + } + }, + "component": { + "spectrum-sidenav-focus-ring-size": { + "description": "Defined in `.spectrum-SideNav`.
Used by `.spectrum-SideNav-itemLink.is-keyboardFocused, .spectrum-SideNav-itemLink:focus-visible`.", + "control": "text", + "category": "Component" + }, + "spectrum-sidenav-focus-ring-gap": { + "description": "Defined in `.spectrum-SideNav`.
Used by `.spectrum-SideNav-itemLink.is-keyboardFocused, .spectrum-SideNav-itemLink:focus-visible`.", + "control": "text", + "category": "Component" + }, + "spectrum-sidenav-focus-ring-color": { + "description": "Defined in `.spectrum-SideNav`.
Used by `.spectrum-SideNav-itemLink.is-keyboardFocused, .spectrum-SideNav-itemLink:focus-visible`.", + "control": "color", + "category": "Component" + }, + "spectrum-sidenav-min-height": { + "description": "Defined in `.spectrum-SideNav`.
Used by `.spectrum-SideNav-itemLink`.", + "control": "text", + "category": "Component" + }, + "spectrum-sidenav-width": { + "description": "Defined in `.spectrum-SideNav`.
Used by `.spectrum-SideNav-itemLink`.", + "control": "text", + "category": "Component" + }, + "spectrum-sidenav-min-width": { + "description": "Defined in `.spectrum-SideNav`.
Used by `.spectrum-SideNav-itemLink`.", + "control": "text", + "category": "Component" + }, + "spectrum-side-navigation-minimum-width": { + "value": "160px", + "description": "Used by `--spectrum-sidenav-min-width`.", + "control": "text", + "category": "Component" + }, + "spectrum-sidenav-max-width": { + "description": "Defined in `.spectrum-SideNav`.
Used by `.spectrum-SideNav-itemLink`.", + "control": "text", + "category": "Component" + }, + "spectrum-side-navigation-maximum-width": { + "value": "240px", + "description": "Used by `--spectrum-sidenav-max-width`.", + "control": "text", + "category": "Component" + }, + "spectrum-sidenav-border-radius": { + "description": "Defined in `.spectrum-SideNav`.
Used by `.spectrum-SideNav-itemLink`.", + "control": "text", + "category": "Component" + }, + "spectrum-sidenav-icon-size": { + "description": "Defined in `.spectrum-SideNav`.
Used by `.spectrum-SideNav-itemLink .spectrum-Icon`.", + "control": "text", + "category": "Component" + }, + "spectrum-sidenav-icon-spacing": { + "description": "Defined in `.spectrum-SideNav`.
Used by `.spectrum-SideNav-itemLink .spectrum-Icon`.", + "control": "text", + "category": "Component" + }, + "spectrum-sidenav-inline-padding": { + "description": "Defined in `.spectrum-SideNav`.
Used by `.spectrum-SideNav-itemLink`, `.spectrum-SideNav-heading`.", + "control": "text", + "category": "Component" + }, + "spectrum-sidenav-gap": { + "description": "Defined in `.spectrum-SideNav`.
Used by `.spectrum-SideNav-itemLink`, `.spectrum-SideNav-heading`.", + "control": "text", + "category": "Component" + }, + "spectrum-side-navigation-item-to-item": { + "value": "4px", + "description": "Used by `--spectrum-sidenav-gap`.", + "control": "text", + "category": "Component" + }, + "spectrum-sidenav-top-to-icon": { + "description": "Defined in `.spectrum-SideNav`.
Used by `.spectrum-SideNav-itemLink .spectrum-Icon`.", + "control": "text", + "category": "Component" + }, + "spectrum-sidenav-top-to-label": { + "description": "Defined in `.spectrum-SideNav`.
Used by `.spectrum-SideNav-itemLink .spectrum-SideNav-link-text`.", + "control": "text", + "category": "Component" + }, + "spectrum-sidenav-bottom-to-label": { + "description": "Defined in `.spectrum-SideNav`.
Used by `.spectrum-SideNav-itemLink .spectrum-SideNav-link-text`.", + "control": "text", + "category": "Component" + }, + "spectrum-side-navigation-bottom-to-text": { + "value": "8px", + "description": "Used by `--spectrum-sidenav-bottom-to-label`.", + "control": "text", + "category": "Component" + }, + "spectrum-sidenav-start-to-content-second-level": { + "description": "Defined in `.spectrum-SideNav`.
Used by `.spectrum-SideNav--multiLevel .spectrum-SideNav .spectrum-SideNav-itemLink`.", + "control": "text", + "category": "Component" + }, + "spectrum-side-navigation-second-level-edge-to-text": { + "value": "24px", + "description": "Used by `--spectrum-sidenav-start-to-content-second-level`.", + "control": "text", + "category": "Component" + }, + "spectrum-sidenav-start-to-content-third-level": { + "description": "Defined in `.spectrum-SideNav`.
Used by `.spectrum-SideNav--multiLevel .spectrum-SideNav .spectrum-SideNav .spectrum-SideNav-itemLink`.", + "control": "text", + "category": "Component" + }, + "spectrum-side-navigation-third-level-edge-to-text": { + "value": "36px", + "description": "Used by `--spectrum-sidenav-start-to-content-third-level`.", + "control": "text", + "category": "Component" + }, + "spectrum-sidenav-start-to-content-with-icon-second-level": { + "description": "Defined in `.spectrum-SideNav`.
Used by `.spectrum-SideNav--hasIcon.spectrum-SideNav--multiLevel .spectrum-SideNav .spectrum-SideNav-itemLink`.", + "control": "text", + "category": "Component" + }, + "spectrum-side-navigation-with-icon-second-level-edge-to-text": { + "value": "50px", + "description": "Used by `--spectrum-sidenav-start-to-content-with-icon-second-level`.", + "control": "text", + "category": "Component" + }, + "spectrum-sidenav-start-to-content-with-icon-third-level": { + "description": "Defined in `.spectrum-SideNav`.
Used by `.spectrum-SideNav--hasIcon.spectrum-SideNav--multiLevel .spectrum-SideNav .spectrum-SideNav .spectrum-SideNav-itemLink`.", + "control": "text", + "category": "Component" + }, + "spectrum-side-navigation-with-icon-third-level-edge-to-text": { + "value": "62px", + "description": "Used by `--spectrum-sidenav-start-to-content-with-icon-third-level`.", + "control": "text", + "category": "Component" + }, + "spectrum-sidenav-heading-top-margin": { + "description": "Defined in `.spectrum-SideNav`.
Used by `.spectrum-SideNav-heading`.", + "control": "text", + "category": "Component" + }, + "spectrum-side-navigation-item-to-header": { + "value": "24px", + "description": "Used by `--spectrum-sidenav-heading-top-margin`.", + "control": "text", + "category": "Component" + }, + "spectrum-sidenav-heading-bottom-margin": { + "description": "Defined in `.spectrum-SideNav`.
Used by `.spectrum-SideNav-heading`.", + "control": "text", + "category": "Component" + }, + "spectrum-side-navigation-header-to-item": { + "value": "8px", + "description": "Used by `--spectrum-sidenav-heading-bottom-margin`.", + "control": "text", + "category": "Component" + }, + "spectrum-sidenav-background-disabled": { + "description": "Defined in `.spectrum-SideNav`.
Used by `.spectrum-SideNav-item.is-disabled .spectrum-SideNav-itemLink`.", + "control": "text", + "category": "Component" + }, + "spectrum-sidenav-background-default": { + "description": "Defined in `.spectrum-SideNav`.
Used by `.spectrum-SideNav-itemLink`.", + "control": "text", + "category": "Component" + }, + "spectrum-sidenav-header-color": { + "description": "Defined in `.spectrum-SideNav`.
Used by `.spectrum-SideNav-heading`.", + "control": "color", + "category": "Component" + }, + "spectrum-sidenav-content-disabled-color": { + "description": "Defined in `.spectrum-SideNav`.
Used by `.spectrum-SideNav-item.is-disabled .spectrum-SideNav-itemLink`.", + "control": "color", + "category": "Component" + }, + "spectrum-sidenav-content-color-default": { + "description": "Defined in `.spectrum-SideNav`.
Used by `.spectrum-SideNav-itemLink`.", + "control": "color", + "category": "Component" + }, + "spectrum-sidenav-content-color-hover": { + "description": "Defined in `.spectrum-SideNav`.
Used by `.spectrum-SideNav-itemLink:hover`.", + "control": "color", + "category": "Component" + }, + "spectrum-sidenav-content-color-down": { + "description": "Defined in `.spectrum-SideNav`.
Used by `.spectrum-SideNav-itemLink:active`.", + "control": "color", + "category": "Component" + }, + "spectrum-sidenav-content-color-key-focus": { + "description": "Defined in `.spectrum-SideNav`.
Used by `.spectrum-SideNav-itemLink.is-keyboardFocused, .spectrum-SideNav-itemLink:focus-visible`.", + "control": "color", + "category": "Component" + }, + "spectrum-sidenav-content-color-default-selected": { + "description": "Defined in `.spectrum-SideNav`.
Used by `.spectrum-SideNav-item.is-selected .spectrum-SideNav-itemLink`.", + "control": "color", + "category": "Component" + }, + "spectrum-sidenav-content-color-hover-selected": { + "description": "Defined in `.spectrum-SideNav`.
Used by `.spectrum-SideNav-item.is-selected .spectrum-SideNav-itemLink:hover`.", + "control": "color", + "category": "Component" + }, + "spectrum-sidenav-content-color-down-selected": { + "description": "Defined in `.spectrum-SideNav`.
Used by `.spectrum-SideNav-item.is-selected .spectrum-SideNav-itemLink:active`.", + "control": "color", + "category": "Component" + }, + "spectrum-sidenav-content-color-key-focus-selected": { + "description": "Defined in `.spectrum-SideNav`.
Used by `.spectrum-SideNav-item.is-selected .spectrum-SideNav-itemLink.is-keyboardFocused, .spectrum-SideNav-item.is-selected .spectrum-SideNav-itemLink:focus-visible`.", + "control": "color", + "category": "Component" + }, + "spectrum-sidenav-text-font-family": { + "description": "Defined in `.spectrum-SideNav`.
Used by `.spectrum-SideNav-itemLink`.", + "control": "text", + "category": "Component" + }, + "spectrum-sidenav-text-font-weight": { + "description": "Defined in `.spectrum-SideNav`.
Used by `.spectrum-SideNav-itemLink`, `.spectrum-SideNav--multiLevel .spectrum-SideNav .spectrum-SideNav-itemLink`.", + "control": "text", + "category": "Component" + }, + "spectrum-sidenav-text-font-style": { + "description": "Defined in `.spectrum-SideNav`.
Used by `.spectrum-SideNav-itemLink`.", + "control": "text", + "category": "Component" + }, + "spectrum-sidenav-text-font-size": { + "description": "Defined in `.spectrum-SideNav`.
Used by `.spectrum-SideNav-itemLink`.", + "control": "text", + "category": "Component" + }, + "spectrum-sidenav-text-line-height": { + "description": "Defined in `.spectrum-SideNav`, `.spectrum-SideNav:lang(ja), .spectrum-SideNav:lang(ko), .spectrum-SideNav:lang(zh)`.
Used by `.spectrum-SideNav-itemLink`.", + "control": "text", + "category": "Component" + }, + "spectrum-sidenav-top-level-font-family": { + "description": "Defined in `.spectrum-SideNav`.
Used by `.spectrum-SideNav--multiLevel .spectrum-SideNav-itemLink`.", + "control": "text", + "category": "Component" + }, + "spectrum-sidenav-top-level-font-weight": { + "description": "Defined in `.spectrum-SideNav`.
Used by `.spectrum-SideNav--multiLevel .spectrum-SideNav-itemLink`.", + "control": "text", + "category": "Component" + }, + "spectrum-sidenav-top-level-font-style": { + "description": "Defined in `.spectrum-SideNav`.
Used by `.spectrum-SideNav--multiLevel .spectrum-SideNav-itemLink`.", + "control": "text", + "category": "Component" + }, + "spectrum-sidenav-top-level-font-size": { + "description": "Defined in `.spectrum-SideNav`.
Used by `.spectrum-SideNav--multiLevel .spectrum-SideNav-itemLink`.", + "control": "text", + "category": "Component" + }, + "spectrum-sidenav-top-level-line-height": { + "description": "Defined in `.spectrum-SideNav`, `.spectrum-SideNav:lang(ja), .spectrum-SideNav:lang(ko), .spectrum-SideNav:lang(zh)`.
Used by `.spectrum-SideNav--multiLevel .spectrum-SideNav-itemLink`.", + "control": "text", + "category": "Component" + }, + "spectrum-sidenav-header-font-family": { + "description": "Defined in `.spectrum-SideNav`.
Used by `.spectrum-SideNav-heading`.", + "control": "text", + "category": "Component" + }, + "spectrum-sidenav-header-font-weight": { + "description": "Defined in `.spectrum-SideNav`.
Used by `.spectrum-SideNav-heading`.", + "control": "text", + "category": "Component" + }, + "spectrum-sidenav-header-font-style": { + "description": "Defined in `.spectrum-SideNav`.
Used by `.spectrum-SideNav-heading`.", + "control": "text", + "category": "Component" + }, + "spectrum-sidenav-header-font-size": { + "description": "Defined in `.spectrum-SideNav`.
Used by `.spectrum-SideNav-heading`.", + "control": "text", + "category": "Component" + }, + "spectrum-sidenav-header-line-height": { + "description": "Defined in `.spectrum-SideNav`, `.spectrum-SideNav:lang(ja), .spectrum-SideNav:lang(ko), .spectrum-SideNav:lang(zh)`.
Used by `.spectrum-SideNav-heading`.", + "control": "text", + "category": "Component" + }, + "spectrum-sidenav-item-background-default-selected": { + "description": "Defined in `.spectrum-SideNav`.
Used by `.spectrum-SideNav-item.is-selected .spectrum-SideNav-itemLink`.", + "control": "text", + "category": "Component" + }, + "spectrum-sidenav-item-background-down-selected": { + "description": "Defined in `.spectrum-SideNav`.
Used by `.spectrum-SideNav-item.is-selected .spectrum-SideNav-itemLink:active`.", + "control": "text", + "category": "Component" + }, + "spectrum-sidenav-background-key-focus-selected": { + "description": "Defined in `.spectrum-SideNav`.
Used by `.spectrum-SideNav-item.is-selected .spectrum-SideNav-itemLink.is-keyboardFocused, .spectrum-SideNav-item.is-selected .spectrum-SideNav-itemLink:focus-visible`.", + "control": "text", + "category": "Component" + }, + "spectrum-sidenav-background-hover-selected": { + "description": "Defined in `.spectrum-SideNav`.
Used by `.spectrum-SideNav-item.is-selected .spectrum-SideNav-itemLink:hover`.", + "control": "text", + "category": "Component" + }, + "spectrum-sidenav-background-hover": { + "description": "Defined in `.spectrum-SideNav`.
Used by `.spectrum-SideNav-itemLink:hover`.", + "control": "text", + "category": "Component" + }, + "spectrum-sidenav-item-background-down": { + "description": "Defined in `.spectrum-SideNav`.
Used by `.spectrum-SideNav-itemLink:active`.", + "control": "text", + "category": "Component" + }, + "spectrum-sidenav-background-key-focus": { + "description": "Defined in `.spectrum-SideNav`.
Used by `.spectrum-SideNav-itemLink.is-keyboardFocused, .spectrum-SideNav-itemLink:focus-visible`.", + "control": "text", + "category": "Component" + } + }, + "global": { + "spectrum-gray-100": { + "value": "light-dark(rgb(233, 233, 233), rgb(44, 44, 44))", + "description": "Used by `--system-side-nav-background-hover`, `--system-side-nav-background-key-focus`, `--system-side-nav-item-background-default-selected`, `--system-side-nav-background-key-focus-selected`.", + "control": "text", + "category": "Global" + }, + "spectrum-gray-200": { + "value": "light-dark(rgb(225, 225, 225), rgb(50, 50, 50))", + "description": "Used by `--system-side-nav-item-background-down`, `--system-side-nav-background-hover-selected`, `--system-side-nav-item-background-down-selected`.", + "control": "text", + "category": "Global" + }, + "spectrum-focus-indicator-thickness": { + "value": "2px", + "description": "Used by `--spectrum-sidenav-focus-ring-size`.", + "control": "text", + "category": "Global" + }, + "spectrum-focus-indicator-gap": { + "value": "2px", + "description": "Used by `--spectrum-sidenav-focus-ring-gap`.", + "control": "text", + "category": "Global" + }, + "spectrum-focus-indicator-color": { + "value": "var(--spectrum-blue-800)", + "description": "Used by `--spectrum-sidenav-focus-ring-color`.", + "control": "color", + "category": "Global" + }, + "spectrum-component-height-100": { + "value": "32px", + "description": "Used by `--spectrum-sidenav-min-height`.", + "control": "text", + "category": "Global" + }, + "spectrum-corner-radius-100": { + "value": "8px", + "description": "Used by `--spectrum-sidenav-border-radius`.", + "control": "text", + "category": "Global" + }, + "spectrum-workflow-icon-size-100": { + "value": "20px", + "description": "Used by `--spectrum-sidenav-icon-size`.", + "control": "text", + "category": "Global" + }, + "spectrum-text-to-visual-100": { + "value": "6px", + "description": "Used by `--spectrum-sidenav-icon-spacing`.", + "control": "text", + "category": "Global" + }, + "spectrum-component-edge-to-text-100": { + "value": "12px", + "description": "Used by `--spectrum-sidenav-inline-padding`.", + "control": "text", + "category": "Global" + }, + "spectrum-component-top-to-workflow-icon-100": { + "value": "6px", + "description": "Used by `--spectrum-sidenav-top-to-icon`.", + "control": "text", + "category": "Global" + }, + "spectrum-component-top-to-text-100": { + "value": "6px", + "description": "Used by `--spectrum-sidenav-top-to-label`.", + "control": "text", + "category": "Global" + }, + "spectrum-gray-600": { + "value": "light-dark(rgb(113, 113, 113), rgb(138, 138, 138))", + "description": "Used by `--spectrum-sidenav-header-color`.", + "control": "text", + "category": "Global" + }, + "spectrum-disabled-content-color": { + "value": "var(--spectrum-gray-400)", + "description": "Used by `--spectrum-sidenav-content-disabled-color`.", + "control": "color", + "category": "Global" + }, + "spectrum-neutral-content-color-default": { + "value": "var(--spectrum-gray-800)", + "description": "Used by `--spectrum-sidenav-content-color-default`, `--spectrum-sidenav-content-color-default-selected`.", + "control": "color", + "category": "Global" + }, + "spectrum-neutral-content-color-hover": { + "value": "var(--spectrum-gray-900)", + "description": "Used by `--spectrum-sidenav-content-color-hover`, `--spectrum-sidenav-content-color-hover-selected`.", + "control": "color", + "category": "Global" + }, + "spectrum-neutral-content-color-down": { + "value": "var(--spectrum-gray-900)", + "description": "Used by `--spectrum-sidenav-content-color-down`, `--spectrum-sidenav-content-color-down-selected`.", + "control": "color", + "category": "Global" + }, + "spectrum-neutral-content-color-key-focus": { + "value": "var(--spectrum-gray-900)", + "description": "Used by `--spectrum-sidenav-content-color-key-focus`, `--spectrum-sidenav-content-color-key-focus-selected`.", + "control": "color", + "category": "Global" + }, + "spectrum-sans-font-family-stack": { + "description": "Used by `--spectrum-sidenav-text-font-family`, `--spectrum-sidenav-top-level-font-family`, `--spectrum-sidenav-header-font-family`.", + "control": "text", + "category": "Global" + }, + "spectrum-regular-font-weight": { + "value": "400", + "description": "Used by `--spectrum-sidenav-text-font-weight`.", + "control": "text", + "category": "Global" + }, + "spectrum-default-font-style": { + "value": "normal", + "description": "Used by `--spectrum-sidenav-text-font-style`, `--spectrum-sidenav-top-level-font-style`, `--spectrum-sidenav-header-font-style`.", + "control": "text", + "category": "Global" + }, + "spectrum-font-size-100": { + "value": "14px", + "description": "Used by `--spectrum-sidenav-text-font-size`, `--spectrum-sidenav-top-level-font-size`.", + "control": "text", + "category": "Global" + }, + "spectrum-line-height-100": { + "value": "1.3", + "description": "Used by `--spectrum-sidenav-text-line-height`, `--spectrum-sidenav-top-level-line-height`, `--spectrum-sidenav-header-line-height`.", + "control": "text", + "category": "Global" + }, + "spectrum-bold-font-weight": { + "value": "700", + "description": "Used by `--spectrum-sidenav-top-level-font-weight`.", + "control": "text", + "category": "Global" + }, + "spectrum-medium-font-weight": { + "value": "500", + "description": "Used by `--spectrum-sidenav-header-font-weight`.", + "control": "text", + "category": "Global" + }, + "spectrum-font-size-75": { + "value": "12px", + "description": "Used by `--spectrum-sidenav-header-font-size`.", + "control": "text", + "category": "Global" + }, + "spectrum-cjk-line-height-100": { + "value": "1.5", + "description": "Used by `--spectrum-sidenav-text-line-height`, `--spectrum-sidenav-top-level-line-height`, `--spectrum-sidenav-header-line-height`.", + "control": "text", + "category": "Global" + }, + "spectrum-animation-duration-100": { + "description": "Used by `.spectrum-SideNav-itemLink`.", + "control": "text", + "category": "Global" + } + }, + "system-theme": { + "system-side-nav-background-hover": { + "description": "Defined in `.spectrum`.
Used by `--spectrum-sidenav-background-hover`.", + "control": "text" + }, + "system-side-nav-item-background-down": { + "description": "Defined in `.spectrum`.
Used by `--spectrum-sidenav-item-background-down`.", + "control": "text" + }, + "system-side-nav-background-key-focus": { + "description": "Defined in `.spectrum`.
Used by `--spectrum-sidenav-background-key-focus`.", + "control": "text" + }, + "system-side-nav-item-background-default-selected": { + "description": "Defined in `.spectrum`.
Used by `--spectrum-sidenav-item-background-default-selected`.", + "control": "text" + }, + "system-side-nav-background-hover-selected": { + "description": "Defined in `.spectrum`.
Used by `--spectrum-sidenav-background-hover-selected`.", + "control": "text" + }, + "system-side-nav-item-background-down-selected": { + "description": "Defined in `.spectrum`.
Used by `--spectrum-sidenav-item-background-down-selected`.", + "control": "text" + }, + "system-side-nav-background-key-focus-selected": { + "description": "Defined in `.spectrum`.
Used by `--spectrum-sidenav-background-key-focus-selected`.", + "control": "text" + } + }, + "passthroughs": {}, + "high-contrast": { + "highcontrast-sidenav-content-disabled-color": { + "value": "var(--mod-sidenav-content-disabled-color, var(--spectrum-sidenav-content-disabled-color))", + "description": "Defined in `.spectrum-SideNav-item`.
Used by `.spectrum-SideNav-item.is-disabled .spectrum-SideNav-itemLink`.
Defaults to `var(--mod-sidenav-content-disabled-color, var(--spectrum-sidenav-content-disabled-color))`, if not set.", + "control": "color" + }, + "highcontrast-sidenav-focus-ring-color": { + "value": "var(--mod-sidenav-focus-ring-color, var(--spectrum-sidenav-focus-ring-color))", + "description": "Defined in `.spectrum-SideNav-item`.
Used by `.spectrum-SideNav-itemLink.is-keyboardFocused, .spectrum-SideNav-itemLink:focus-visible`.
Defaults to `var(--mod-sidenav-focus-ring-color, var(--spectrum-sidenav-focus-ring-color))`, if not set.", + "control": "color" + }, + "highcontrast-sidenav-content-color-default-selected": { + "value": "var(--mod-sidenav-content-color-default-selected, var(--spectrum-sidenav-content-color-default-selected))", + "description": "Defined in `.spectrum-SideNav-item`.
Used by `.spectrum-SideNav-item.is-selected .spectrum-SideNav-itemLink`.
Defaults to `var(--mod-sidenav-content-color-default-selected, var(--spectrum-sidenav-content-color-default-selected))`, if not set.", + "control": "color" + }, + "highcontrast-sidenav-item-background-default-selected": { + "value": "var(--mod-sidenav-item-background-default-selected, var(--spectrum-sidenav-item-background-default-selected))", + "description": "Defined in `.spectrum-SideNav-item`.
Used by `.spectrum-SideNav-item.is-selected .spectrum-SideNav-itemLink`.
Defaults to `var(--mod-sidenav-item-background-default-selected, var(--spectrum-sidenav-item-background-default-selected))`, if not set.", + "control": "text" + }, + "highcontrast-sidenav-background-key-focus-selected": { + "value": "var(--mod-sidenav-background-key-focus-selected, var(--spectrum-sidenav-background-key-focus-selected))", + "description": "Defined in `.spectrum-SideNav-item`.
Used by `.spectrum-SideNav-item.is-selected .spectrum-SideNav-itemLink.is-keyboardFocused, .spectrum-SideNav-item.is-selected .spectrum-SideNav-itemLink:focus-visible`.
Defaults to `var(--mod-sidenav-background-key-focus-selected, var(--spectrum-sidenav-background-key-focus-selected))`, if not set.", + "control": "text" + }, + "highcontrast-sidenav-background-hover-selected": { + "value": "var(--mod-sidenav-background-hover-selected, var(--spectrum-sidenav-background-hover-selected))", + "description": "Defined in `.spectrum-SideNav-item`.
Used by `.spectrum-SideNav-item.is-selected .spectrum-SideNav-itemLink:hover`.
Defaults to `var(--mod-sidenav-background-hover-selected, var(--spectrum-sidenav-background-hover-selected))`, if not set.", + "control": "text" + }, + "highcontrast-sidenav-item-background-down-selected": { + "value": "var(--mod-sidenav-item-background-down-selected, var(--spectrum-sidenav-item-background-down-selected))", + "description": "Defined in `.spectrum-SideNav-item`.
Used by `.spectrum-SideNav-item.is-selected .spectrum-SideNav-itemLink:active`.
Defaults to `var(--mod-sidenav-item-background-down-selected, var(--spectrum-sidenav-item-background-down-selected))`, if not set.", + "control": "text" + }, + "highcontrast-sidenav-item-background-down": { + "value": "var(--mod-sidenav-item-background-down, var(--spectrum-sidenav-item-background-down))", + "description": "Defined in `.spectrum-SideNav-item`.
Used by `.spectrum-SideNav-itemLink:active`.
Defaults to `var(--mod-sidenav-item-background-down, var(--spectrum-sidenav-item-background-down))`, if not set.", + "control": "text" + }, + "highcontrast-sidenav-background-hover": { + "value": "var(--mod-sidenav-background-hover, var(--spectrum-sidenav-background-hover))", + "description": "Defined in `.spectrum-SideNav-item`.
Used by `.spectrum-SideNav-itemLink:hover`.
Defaults to `var(--mod-sidenav-background-hover, var(--spectrum-sidenav-background-hover))`, if not set.", + "control": "text" + }, + "highcontrast-sidenav-content-color-hover": { + "value": "var(--mod-sidenav-content-color-hover, var(--spectrum-sidenav-content-color-hover))", + "description": "Defined in `.spectrum-SideNav-item`.
Used by `.spectrum-SideNav-itemLink:hover`.
Defaults to `var(--mod-sidenav-content-color-hover, var(--spectrum-sidenav-content-color-hover))`, if not set.", + "control": "color" + }, + "highcontrast-sidenav-background-key-focus": { + "value": "var(--mod-sidenav-background-key-focus, var(--spectrum-sidenav-background-key-focus))", + "description": "Defined in `.spectrum-SideNav-item`.
Used by `.spectrum-SideNav-itemLink.is-keyboardFocused, .spectrum-SideNav-itemLink:focus-visible`.
Defaults to `var(--mod-sidenav-background-key-focus, var(--spectrum-sidenav-background-key-focus))`, if not set.", + "control": "text" + }, + "highcontrast-sidenav-top-level-font-color": { + "description": "Defined in `.spectrum-SideNav-item`.
Used by `.spectrum-SideNav--multiLevel .spectrum-SideNav-itemLink`.", + "control": "color" + }, + "highcontrast-sidenav-content-color-default": { + "value": "var(--mod-sidenav-content-color-default, var(--spectrum-sidenav-content-color-default))", + "description": "Defined in `.spectrum-SideNav-item`.
Used by `.spectrum-SideNav-itemLink`.
Defaults to `var(--mod-sidenav-content-color-default, var(--spectrum-sidenav-content-color-default))`, if not set.", + "control": "color" + }, + "highcontrast-sidenav-content-color-down": { + "value": "var(--mod-sidenav-content-color-down, var(--spectrum-sidenav-content-color-down))", + "description": "Defined in `.spectrum-SideNav-item`.
Used by `.spectrum-SideNav-itemLink:active`.
Defaults to `var(--mod-sidenav-content-color-down, var(--spectrum-sidenav-content-color-down))`, if not set.", + "control": "color" + } + } } diff --git a/components/sidenav/stories/sidenav.stories.js b/components/sidenav/stories/sidenav.stories.js index b5381efd78d..4bfdc87e567 100644 --- a/components/sidenav/stories/sidenav.stories.js +++ b/components/sidenav/stories/sidenav.stories.js @@ -1,9 +1,11 @@ import { disableDefaultModes } from "@spectrum-css/preview/modes"; -import metadata from "../dist/metadata.json"; -import packageJson from "../package.json"; import { SideNavGroup } from "./sidenav.test.js"; import { Template } from "./template.js"; +// Local assets to render the component styles and structure +import metadata from "../dist/metadata.json"; +import packageJson from "../package.json"; + /** * Side nav lets users navigate the entire content of a product or a section. These can be used for a single level or a multi-level navigation. * @@ -69,6 +71,7 @@ export default { }, packageJson, metadata, + cssprops: metadata.modifiers, }, }; diff --git a/components/slider/dist/metadata.json b/components/slider/dist/metadata.json index 015c2145100..704463ca7e9 100644 --- a/components/slider/dist/metadata.json +++ b/components/slider/dist/metadata.json @@ -15,8 +15,8 @@ ".spectrum-Slider--sideLabel", ".spectrum-Slider--sideLabel .spectrum-Slider-controls", ".spectrum-Slider--sideLabel .spectrum-Slider-labelContainer", - ".spectrum-Slider--sideLabel .spectrum-Slider-labelContainer + .spectrum-Slider-controls", ".spectrum-Slider--sideLabel .spectrum-Slider-labelContainer .spectrum-Slider-label", + ".spectrum-Slider--sideLabel .spectrum-Slider-labelContainer + .spectrum-Slider-controls", ".spectrum-Slider--sideLabel .spectrum-Slider-value", ".spectrum-Slider--sizeL", ".spectrum-Slider--sizeS", @@ -31,13 +31,13 @@ ".spectrum-Slider-fill--right", ".spectrum-Slider-fill:before", ".spectrum-Slider-handle", + ".spectrum-Slider-handle:active", + ".spectrum-Slider-handle:before", + ".spectrum-Slider-handle:hover", ".spectrum-Slider-handle.is-dragged", ".spectrum-Slider-handle.is-focused", ".spectrum-Slider-handle.is-focused:before", ".spectrum-Slider-handle.is-tophandle", - ".spectrum-Slider-handle:active", - ".spectrum-Slider-handle:before", - ".spectrum-Slider-handle:hover", ".spectrum-Slider-handleContainer", ".spectrum-Slider-input", ".spectrum-Slider-input:focus", @@ -68,6 +68,13 @@ ".spectrum-Slider-track:not(:has(~ .spectrum-Slider-fill)):before", ".spectrum-Slider-trackContainer", ".spectrum-Slider-value", + ".spectrum-Slider:dir(rtl)", + ".spectrum-Slider:dir(rtl) .spectrum-Slider-handle:before", + ".spectrum-Slider:not(.is-disabled, .spectrum-Slider--filled, .spectrum-Slider--range) .spectrum-Slider-controls:active", + ".spectrum-Slider:not(.is-disabled, .spectrum-Slider--filled, .spectrum-Slider--range) .spectrum-Slider-controls:focus-within", + ".spectrum-Slider:not(.is-disabled, .spectrum-Slider--filled, .spectrum-Slider--range) .spectrum-Slider-controls:hover", + ".spectrum-Slider:not(.is-disabled, .spectrum-Slider--filled, .spectrum-Slider--range) .spectrum-Slider-controls.is-focused", + ".spectrum-Slider:not(.spectrum-Slider--sideLabel) .spectrum-Slider-labelContainer + .spectrum-Slider-controls:has(.spectrum-Slider-ramp)", ".spectrum-Slider.is-disabled", ".spectrum-Slider.is-disabled .spectrum-Slider-controls", ".spectrum-Slider.is-disabled .spectrum-Slider-fill:before", @@ -87,223 +94,1090 @@ ".spectrum-Slider.spectrum-Slider--sizeM", ".spectrum-Slider.spectrum-Slider--sizeS", ".spectrum-Slider.spectrum-Slider--sizeXL", - ".spectrum-Slider:dir(rtl)", - ".spectrum-Slider:dir(rtl) .spectrum-Slider-handle:before", - ".spectrum-Slider:not(.is-disabled, .spectrum-Slider--filled, .spectrum-Slider--range) .spectrum-Slider-controls.is-focused", - ".spectrum-Slider:not(.is-disabled, .spectrum-Slider--filled, .spectrum-Slider--range) .spectrum-Slider-controls:active", - ".spectrum-Slider:not(.is-disabled, .spectrum-Slider--filled, .spectrum-Slider--range) .spectrum-Slider-controls:focus-within", - ".spectrum-Slider:not(.is-disabled, .spectrum-Slider--filled, .spectrum-Slider--range) .spectrum-Slider-controls:hover", - ".spectrum-Slider:not(.spectrum-Slider--sideLabel) .spectrum-Slider-labelContainer + .spectrum-Slider-controls:has(.spectrum-Slider-ramp)", "[dir=\"rtl\"] .spectrum-Slider", "[dir=\"rtl\"] .spectrum-Slider .spectrum-Slider-handle:before" ], - "modifiers": [ - "--mod-animation-duration-100", - "--mod-disabled-border-color", - "--mod-focus-indicator-gap", - "--mod-font-size-75", - "--mod-line-height-100", - "--mod-sectrum-slider-ramp-handle-border-color-active", - "--mod-slider-cjk-line-height", - "--mod-slider-control-height", - "--mod-slider-controls-margin", - "--mod-slider-font-size", - "--mod-slider-handle-background-color", - "--mod-slider-handle-background-color-disabled", - "--mod-slider-handle-border-color", - "--mod-slider-handle-border-color-disabled", - "--mod-slider-handle-border-color-down", - "--mod-slider-handle-border-color-hover", - "--mod-slider-handle-border-color-key-focus", - "--mod-slider-handle-border-radius", - "--mod-slider-handle-border-width", - "--mod-slider-handle-border-width-down", - "--mod-slider-handle-disabled-background-color", - "--mod-slider-handle-focus-ring-color-key-focus", - "--mod-slider-handle-gap", - "--mod-slider-handle-size", - "--mod-slider-input-left", - "--mod-slider-input-top-size", - "--mod-slider-label-margin-start", - "--mod-slider-label-text-color", - "--mod-slider-label-text-color-disabled", - "--mod-slider-label-top-to-text", - "--mod-slider-min-size", - "--mod-slider-ramp-handle-background-color", - "--mod-slider-ramp-track-color", - "--mod-slider-ramp-track-color-disabled", - "--mod-slider-ramp-track-height", - "--mod-slider-range-track-reset", - "--mod-slider-tick-handle-background-color", - "--mod-slider-tick-label-color", - "--mod-slider-tick-mark-border-radius", - "--mod-slider-tick-mark-color", - "--mod-slider-tick-mark-color-disabled", - "--mod-slider-tick-mark-height", - "--mod-slider-tick-mark-width", - "--mod-slider-ticks-handle-background-color", - "--mod-slider-track-color", - "--mod-slider-track-color-disabled", - "--mod-slider-track-corner-radius", - "--mod-slider-track-fill-color", - "--mod-slider-track-fill-color-disabled", - "--mod-slider-track-fill-thickness", - "--mod-slider-track-handleoffset", - "--mod-slider-track-margin-offset", - "--mod-slider-track-middle-handleoffset", - "--mod-slider-track-thickness", - "--mod-slider-value-inline-size", - "--mod-slider-value-side-padding-inline" - ], - "component": [ - "--spectrum-slider-cjk-line-height", - "--spectrum-slider-control-height", - "--spectrum-slider-control-to-field-label", - "--spectrum-slider-control-to-field-label-extra-large", - "--spectrum-slider-control-to-field-label-large", - "--spectrum-slider-control-to-field-label-medium", - "--spectrum-slider-control-to-field-label-small", - "--spectrum-slider-controls-margin", - "--spectrum-slider-font-size", - "--spectrum-slider-handle-background-color", - "--spectrum-slider-handle-background-color-disabled", - "--spectrum-slider-handle-border-color", - "--spectrum-slider-handle-border-color-disabled", - "--spectrum-slider-handle-border-color-down", - "--spectrum-slider-handle-border-color-hover", - "--spectrum-slider-handle-border-color-key-focus", - "--spectrum-slider-handle-border-radius", - "--spectrum-slider-handle-border-width", - "--spectrum-slider-handle-border-width-down", - "--spectrum-slider-handle-border-width-down-extra-large", - "--spectrum-slider-handle-border-width-down-large", - "--spectrum-slider-handle-border-width-down-medium", - "--spectrum-slider-handle-border-width-down-small", - "--spectrum-slider-handle-disabled-background-color", - "--spectrum-slider-handle-focus-ring-color-key-focus", - "--spectrum-slider-handle-gap", - "--spectrum-slider-handle-margin-left", - "--spectrum-slider-handle-size", - "--spectrum-slider-handle-size-extra-large", - "--spectrum-slider-handle-size-large", - "--spectrum-slider-handle-size-medium", - "--spectrum-slider-handle-size-small", - "--spectrum-slider-input-left", - "--spectrum-slider-input-top-size", - "--spectrum-slider-label-margin-start", - "--spectrum-slider-label-text-color", - "--spectrum-slider-label-text-color-disabled", - "--spectrum-slider-label-top-to-text", - "--spectrum-slider-min-size", - "--spectrum-slider-ramp-handle-background-color", - "--spectrum-slider-ramp-handle-border-color-active", - "--spectrum-slider-ramp-track-color", - "--spectrum-slider-ramp-track-color-disabled", - "--spectrum-slider-ramp-track-height", - "--spectrum-slider-range-track-reset", - "--spectrum-slider-tick-handle-background-color", - "--spectrum-slider-tick-label-color", - "--spectrum-slider-tick-mark-border-radius", - "--spectrum-slider-tick-mark-color", - "--spectrum-slider-tick-mark-color-disabled", - "--spectrum-slider-tick-mark-height", - "--spectrum-slider-tick-mark-width", - "--spectrum-slider-ticks-handle-background-color", - "--spectrum-slider-track-color", - "--spectrum-slider-track-color-disabled", - "--spectrum-slider-track-corner-radius", - "--spectrum-slider-track-fill-color", - "--spectrum-slider-track-fill-color-disabled", - "--spectrum-slider-track-fill-thickness", - "--spectrum-slider-track-handleoffset", - "--spectrum-slider-track-margin-offset", - "--spectrum-slider-track-middle-handleoffset", - "--spectrum-slider-track-thickness", - "--spectrum-slider-value-inline-size", - "--spectrum-slider-value-side-padding-inline" - ], - "global": [ - "--spectrum-animation-duration-100", - "--spectrum-border-width-200", - "--spectrum-cjk-line-height-100", - "--spectrum-component-height-100", - "--spectrum-component-height-200", - "--spectrum-component-height-300", - "--spectrum-component-height-75", - "--spectrum-component-top-to-text-100", - "--spectrum-component-top-to-text-200", - "--spectrum-component-top-to-text-75", - "--spectrum-corner-radius-500", - "--spectrum-disabled-background-color", - "--spectrum-disabled-border-color", - "--spectrum-disabled-content-color", - "--spectrum-focus-indicator-color", - "--spectrum-focus-indicator-gap", - "--spectrum-focus-indicator-thickness", - "--spectrum-font-size-100", - "--spectrum-font-size-200", - "--spectrum-font-size-75", - "--spectrum-gray-100", - "--spectrum-gray-200", - "--spectrum-gray-400", - "--spectrum-gray-700", - "--spectrum-gray-75", - "--spectrum-gray-800", - "--spectrum-line-height-100", - "--spectrum-logical-rotation", - "--spectrum-neutral-content-color-default", - "--spectrum-spacing-100", - "--spectrum-spacing-200", - "--spectrum-spacing-300", - "--spectrum-spacing-900", - "--spectrum-text-to-visual-75" - ], - "system-theme": [ - "--system-slider-handle-background-color", - "--system-slider-handle-background-color-disabled", - "--system-slider-handle-border-color", - "--system-slider-handle-border-color-down", - "--system-slider-handle-border-color-hover", - "--system-slider-handle-border-color-key-focus", - "--system-slider-handle-border-radius", - "--system-slider-handle-disabled-background-color", - "--system-slider-handle-focus-ring-color-key-focus", - "--system-slider-ramp-handle-background-color", - "--system-slider-ramp-track-color", - "--system-slider-ramp-track-color-disabled", - "--system-slider-size-l-handle-border-radius", - "--system-slider-size-m-handle-border-radius", - "--system-slider-size-s-handle-border-radius", - "--system-slider-size-xl-handle-border-radius", - "--system-slider-tick-mark-color", - "--system-slider-ticks-handle-background-color", - "--system-slider-track-color", - "--system-slider-track-corner-radius", - "--system-slider-track-fill-color" - ], - "passthroughs": [], - "high-contrast": [ - "--highcontrast-slider-filled-track-fill-color", - "--highcontrast-slider-handle-background-color", - "--highcontrast-slider-handle-background-color-disabled", - "--highcontrast-slider-handle-border-color", - "--highcontrast-slider-handle-border-color-disabled", - "--highcontrast-slider-handle-border-color-down", - "--highcontrast-slider-handle-border-color-hover", - "--highcontrast-slider-handle-border-color-key-focus", - "--highcontrast-slider-handle-disabled-background-color", - "--highcontrast-slider-handle-focus-ring-color-key-focus", - "--highcontrast-slider-label-text-color", - "--highcontrast-slider-label-text-color-disabled", - "--highcontrast-slider-ramp-handle-background-color", - "--highcontrast-slider-ramp-handle-border-color-active", - "--highcontrast-slider-ramp-track-color", - "--highcontrast-slider-ramp-track-color-disabled", - "--highcontrast-slider-tick-mark-color", - "--highcontrast-slider-tick-mark-color-disabled", - "--highcontrast-slider-track-color", - "--highcontrast-slider-track-color-disabled", - "--highcontrast-slider-track-color-static", - "--highcontrast-slider-track-fill-color-disabled" - ] + "modifiers": { + "mod-slider-min-size": { + "value": "var(--spectrum-slider-min-size)", + "description": "Used by `.spectrum-Slider`.
Defaults to `var(--spectrum-slider-min-size)`, if not set.", + "control": "text", + "category": "Modifier" + }, + "mod-slider-ramp-track-height": { + "value": "var(--spectrum-slider-ramp-track-height)", + "description": "Used by `.spectrum-Slider:not(.spectrum-Slider--sideLabel) .spectrum-Slider-labelContainer + .spectrum-Slider-controls:has(.spectrum-Slider-ramp)`, `.spectrum-Slider-ramp`.
Defaults to `var(--spectrum-slider-ramp-track-height)`, if not set.", + "control": "text", + "category": "Modifier" + }, + "mod-slider-value-side-padding-inline": { + "value": "var(--spectrum-slider-value-side-padding-inline)", + "description": "Used by `.spectrum-Slider--sideLabel .spectrum-Slider-labelContainer .spectrum-Slider-label`, `.spectrum-Slider--sideLabel .spectrum-Slider-value`.
Defaults to `var(--spectrum-slider-value-side-padding-inline)`, if not set.", + "control": "text", + "category": "Modifier" + }, + "mod-slider-controls-margin": { + "value": "var(--spectrum-slider-controls-margin)", + "description": "Used by `.spectrum-Slider--sideLabel .spectrum-Slider-controls`, `.spectrum-Slider-controls`, `.spectrum-Slider-fill`, `.spectrum-Slider-fill--right`.
Defaults to `var(--spectrum-slider-controls-margin)`, if not set.", + "control": "text", + "category": "Modifier" + }, + "mod-slider-value-inline-size": { + "value": "var(--spectrum-slider-value-inline-size)", + "description": "Used by `.spectrum-Slider--sideLabel .spectrum-Slider-value`.
Defaults to `var(--spectrum-slider-value-inline-size)`, if not set.", + "control": "text", + "category": "Modifier" + }, + "mod-slider-control-height": { + "value": "var(--spectrum-slider-control-height)", + "description": "Used by `.spectrum-Slider-controls`, `.spectrum-Slider--tick`, `.spectrum-Slider-fill, .spectrum-Slider-track`, `.spectrum-Slider-handle`, `.spectrum-Slider-trackContainer`.
Defaults to `var(--spectrum-slider-control-height)`, if not set.", + "control": "text", + "category": "Modifier" + }, + "mod-slider-track-fill-thickness": { + "value": "var(--spectrum-slider-track-fill-thickness)", + "description": "Used by `.spectrum-Slider-fill, .spectrum-Slider-track`.
Defaults to `var(--spectrum-slider-track-fill-thickness)`, if not set.", + "control": "text", + "category": "Modifier" + }, + "mod-slider-handle-gap": { + "value": "4px", + "description": "Used by `.spectrum-Slider-fill, .spectrum-Slider-track`.
Defaults to `var(--spectrum-slider-handle-gap)`, if not set.", + "control": "text", + "category": "Modifier" + }, + "mod-slider-track-margin-offset": { + "value": "var(--spectrum-slider-track-margin-offset)", + "description": "Used by `.spectrum-Slider-fill, .spectrum-Slider-track`, `.spectrum-Slider-track ~ .spectrum-Slider-track`, `.spectrum-Slider--range .spectrum-Slider-track:first-of-type`, `.spectrum-Slider--range .spectrum-Slider-track:last-of-type`, `.spectrum-Slider-ticks`.
Defaults to `var(--spectrum-slider-track-margin-offset)`, if not set.", + "control": "text", + "category": "Modifier" + }, + "mod-slider-track-corner-radius": { + "value": "var(--spectrum-slider-track-corner-radius)", + "description": "Used by `.spectrum-Slider-track:first-of-type:before`, `.spectrum-Slider-track:last-of-type:before`, `.spectrum-Slider--range .spectrum-Slider-track:first-of-type:before`, `.spectrum-Slider--range .spectrum-Slider-track:last-of-type:before`, `.spectrum-Slider-track ~ .spectrum-Slider-track:before`.
Defaults to `var(--spectrum-slider-track-corner-radius)`, if not set.", + "control": "text", + "category": "Modifier" + }, + "mod-slider-range-track-reset": { + "value": "var(--spectrum-slider-range-track-reset)", + "description": "Used by `.spectrum-Slider-track ~ .spectrum-Slider-track`, `.spectrum-Slider--range .spectrum-Slider-track ~ .spectrum-Slider-track`, `.spectrum-Slider--range .spectrum-Slider-track:first-of-type`, `.spectrum-Slider--range .spectrum-Slider-track:last-of-type`.
Defaults to `var(--spectrum-slider-range-track-reset)`, if not set.", + "control": "text", + "category": "Modifier" + }, + "mod-slider-track-handleoffset": { + "value": "var(--spectrum-slider-track-handleoffset)", + "description": "Used by `.spectrum-Slider-track ~ .spectrum-Slider-track`, `.spectrum-Slider--range .spectrum-Slider-track:first-of-type`.
Defaults to `var(--spectrum-slider-track-handleoffset)`, if not set.", + "control": "text", + "category": "Modifier" + }, + "mod-slider-track-middle-handleoffset": { + "value": "var(--spectrum-slider-track-middle-handleoffset)", + "description": "Used by `.spectrum-Slider--range .spectrum-Slider-track ~ .spectrum-Slider-track`.
Defaults to `var(--spectrum-slider-track-middle-handleoffset)`, if not set.", + "control": "text", + "category": "Modifier" + }, + "mod-slider-handle-size": { + "value": "var(--spectrum-slider-handle-size)", + "description": "Used by `.spectrum-Slider-handle`, `.spectrum-Slider-handle:before`, `.spectrum-Slider-handle.is-focused:before`, `.spectrum-Slider-input`.
Defaults to `var(--spectrum-slider-handle-size)`, if not set.", + "control": "text", + "category": "Modifier" + }, + "mod-slider-handle-border-width": { + "value": "var(--spectrum-slider-handle-border-width)", + "description": "Used by `.spectrum-Slider-handle`.
Defaults to `var(--spectrum-slider-handle-border-width)`, if not set.", + "control": "text", + "category": "Modifier" + }, + "mod-slider-handle-border-radius": { + "value": "var(--spectrum-slider-handle-border-radius)", + "description": "Used by `.spectrum-Slider-handle`.
Defaults to `var(--spectrum-slider-handle-border-radius)`, if not set.", + "control": "text", + "category": "Modifier" + }, + "mod-animation-duration-100": { + "value": "var(--spectrum-animation-duration-100)", + "description": "Used by `.spectrum-Slider-handle`, `.spectrum-Slider-handle:before`.
Defaults to `var(--spectrum-animation-duration-100)`, if not set.", + "control": "text", + "category": "Modifier" + }, + "mod-slider-handle-border-width-down": { + "value": "var(--spectrum-slider-handle-border-width-down)", + "description": "Used by `.spectrum-Slider-handle.is-dragged, .spectrum-Slider-handle:active`.
Defaults to `var(--spectrum-slider-handle-border-width-down)`, if not set.", + "control": "text", + "category": "Modifier" + }, + "mod-focus-indicator-gap": { + "value": "2px", + "description": "Used by `.spectrum-Slider-handle.is-focused:before`.
Defaults to `var(--spectrum-focus-indicator-gap)`, if not set.", + "control": "text", + "category": "Modifier" + }, + "mod-slider-input-top-size": { + "value": "var(--spectrum-slider-input-top-size)", + "description": "Used by `.spectrum-Slider-input`.
Defaults to `var(--spectrum-slider-input-top-size)`, if not set.", + "control": "text", + "category": "Modifier" + }, + "mod-slider-input-left": { + "value": "var(--spectrum-slider-input-left)", + "description": "Used by `.spectrum-Slider-input`.
Defaults to `var(--spectrum-slider-input-left)`, if not set.", + "control": "text", + "category": "Modifier" + }, + "mod-slider-font-size": { + "value": "var(--spectrum-slider-font-size)", + "description": "Used by `.spectrum-Slider-labelContainer`, `.spectrum-Slider-label`.
Defaults to `var(--spectrum-slider-font-size)`, if not set.", + "control": "text", + "category": "Modifier" + }, + "mod-line-height-100": { + "value": "1.3", + "description": "Used by `.spectrum-Slider-labelContainer`, `.spectrum-Slider-tick .spectrum-Slider-tickLabel`.
Defaults to `var(--spectrum-line-height-100)`, if not set.", + "control": "text", + "category": "Modifier" + }, + "mod-slider-label-top-to-text": { + "value": "var(--spectrum-slider-label-top-to-text)", + "description": "Used by `.spectrum-Slider-labelContainer`.
Defaults to `var(--spectrum-slider-label-top-to-text)`, if not set.", + "control": "text", + "category": "Modifier" + }, + "mod-slider-cjk-line-height": { + "value": "var(--spectrum-slider-cjk-line-height)", + "description": "Used by `.spectrum-Slider-labelContainer:lang(ja), .spectrum-Slider-labelContainer:lang(ko), .spectrum-Slider-labelContainer:lang(zh)`.
Defaults to `var(--spectrum-slider-cjk-line-height)`, if not set.", + "control": "text", + "category": "Modifier" + }, + "mod-slider-label-margin-start": { + "value": "var(--spectrum-slider-label-margin-start)", + "description": "Used by `.spectrum-Slider-value`.
Defaults to `var(--spectrum-slider-label-margin-start)`, if not set.", + "control": "text", + "category": "Modifier" + }, + "mod-slider-tick-handle-background-color": { + "value": "var(--spectrum-slider-tick-handle-background-color)", + "description": "Used by `.spectrum-Slider--tick .spectrum-Slider-handle`.
Defaults to `var(--spectrum-slider-tick-handle-background-color)`, if not set.", + "control": "color", + "category": "Modifier" + }, + "mod-slider-tick-mark-height": { + "value": "var(--spectrum-slider-tick-mark-height)", + "description": "Used by `.spectrum-Slider--tick .spectrum-Slider-controls`, `.spectrum-Slider--tick .spectrum-Slider-tickLabel`, `.spectrum-Slider-tick`, `.spectrum-Slider-tick:after`.
Defaults to `var(--spectrum-slider-tick-mark-height)`, if not set.", + "control": "text", + "category": "Modifier" + }, + "mod-slider-track-thickness": { + "value": "var(--spectrum-slider-control-height)", + "description": "Used by `.spectrum-Slider--tick .spectrum-Slider-controls`, `.spectrum-Slider-tick`.
Defaults to `var(--spectrum-slider-control-height)`, if not set.", + "control": "text", + "category": "Modifier" + }, + "mod-slider-ticks-handle-background-color": { + "value": "var(--spectrum-slider-ticks-handle-background-color)", + "description": "Used by `.spectrum-Slider-ticks ~ .spectrum-Slider-handleContainer .spectrum-Slider-handle`.
Defaults to `var(--spectrum-slider-ticks-handle-background-color)`, if not set.", + "control": "color", + "category": "Modifier" + }, + "mod-slider-tick-mark-width": { + "value": "var(--spectrum-slider-tick-mark-width)", + "description": "Used by `.spectrum-Slider-tick, .spectrum-Slider-tick:after`, `.spectrum-Slider-tick:after`, `.spectrum-Slider-tick:first-of-type`, `.spectrum-Slider-tick:last-of-type`.
Defaults to `var(--spectrum-slider-tick-mark-width)`, if not set.", + "control": "text", + "category": "Modifier" + }, + "mod-slider-tick-mark-border-radius": { + "value": "var(--spectrum-slider-tick-mark-border-radius)", + "description": "Used by `.spectrum-Slider-tick:after`.
Defaults to `var(--spectrum-slider-tick-mark-border-radius)`, if not set.", + "control": "text", + "category": "Modifier" + }, + "mod-font-size-75": { + "value": "12px", + "description": "Used by `.spectrum-Slider-tick .spectrum-Slider-tickLabel`.
Defaults to `var(--spectrum-font-size-75)`, if not set.", + "control": "text", + "category": "Modifier" + }, + "mod-slider-tick-label-color": { + "value": "var(--spectrum-slider-tick-label-color)", + "description": "Used by `.spectrum-Slider-tick .spectrum-Slider-tickLabel`.
Defaults to `var(--spectrum-slider-tick-label-color)`, if not set.", + "control": "color", + "category": "Modifier" + }, + "mod-slider-track-color": { + "value": "var(--spectrum-slider-track-color)", + "description": "Used by `.spectrum-Slider-track:before`, `.spectrum-Slider-track:not(:has(~ .spectrum-Slider-fill)):before`.
Defaults to `var(--spectrum-slider-track-color)`, if not set.", + "control": "color", + "category": "Modifier" + }, + "mod-slider-label-text-color": { + "value": "var(--spectrum-slider-label-text-color)", + "description": "Used by `.spectrum-Slider-labelContainer`.
Defaults to `var(--spectrum-slider-label-text-color)`, if not set.", + "control": "color", + "category": "Modifier" + }, + "mod-slider-track-fill-color": { + "value": "var(--spectrum-slider-track-fill-color)", + "description": "Used by `.spectrum-Slider--filled .spectrum-Slider-track:first-child:before, .spectrum-Slider-fill:before`, `.spectrum-Slider--range .spectrum-Slider-track:not(:first-of-type, :last-of-type):before`.
Defaults to `var(--spectrum-slider-track-fill-color)`, if not set.", + "control": "color", + "category": "Modifier" + }, + "mod-slider-ramp-track-color": { + "value": "var(--spectrum-slider-ramp-track-color)", + "description": "Used by `.spectrum-Slider-ramp path`.
Defaults to `var(--spectrum-slider-ramp-track-color)`, if not set.", + "control": "color", + "category": "Modifier" + }, + "mod-slider-handle-border-color": { + "value": "var(--spectrum-slider-handle-border-color)", + "description": "Used by `.spectrum-Slider-handle`.
Defaults to `var(--spectrum-slider-handle-border-color)`, if not set.", + "control": "color", + "category": "Modifier" + }, + "mod-slider-handle-background-color": { + "value": "var(--spectrum-slider-handle-background-color)", + "description": "Used by `.spectrum-Slider-handle`, `.spectrum-Slider-handle.is-dragged`.
Defaults to `var(--spectrum-slider-handle-background-color)`, if not set.", + "control": "color", + "category": "Modifier" + }, + "mod-slider-handle-border-color-key-focus": { + "value": "var(--spectrum-slider-handle-border-color-key-focus)", + "description": "Used by `.spectrum-Slider-handle.is-focused`.
Defaults to `var(--spectrum-slider-handle-border-color-key-focus)`, if not set.", + "control": "color", + "category": "Modifier" + }, + "mod-slider-handle-focus-ring-color-key-focus": { + "value": "var(--spectrum-slider-handle-focus-ring-color-key-focus)", + "description": "Used by `.spectrum-Slider-handle.is-focused:before`.
Defaults to `var(--spectrum-slider-handle-focus-ring-color-key-focus)`, if not set.", + "control": "color", + "category": "Modifier" + }, + "mod-slider-handle-border-color-down": { + "value": "var(--spectrum-slider-handle-border-color-down)", + "description": "Used by `.spectrum-Slider-handle.is-dragged, .spectrum-Slider-handle:active`, `.spectrum-Slider-handle.is-dragged`.
Defaults to `var(--spectrum-slider-handle-border-color-down)`, if not set.", + "control": "color", + "category": "Modifier" + }, + "mod-sectrum-slider-ramp-handle-border-color-active": { + "value": "var(--spectrum-slider-ramp-handle-border-color-active)", + "description": "Used by `.spectrum-Slider--ramp .spectrum-Slider-handle`.
Defaults to `var(--spectrum-slider-ramp-handle-border-color-active)`, if not set.", + "control": "color", + "category": "Modifier" + }, + "mod-slider-ramp-handle-background-color": { + "value": "var(--highcontrast-slider-ramp-handle-background-color, var(--spectrum-slider-ramp-handle-background-color))", + "description": "Used by `.spectrum-Slider--ramp .spectrum-Slider-handle`.
Defaults to `var(--highcontrast-slider-ramp-handle-background-color, var(--spectrum-slider-ramp-handle-background-color))`, if not set.", + "control": "color", + "category": "Modifier" + }, + "mod-slider-tick-mark-color": { + "value": "var(--spectrum-slider-tick-mark-color)", + "description": "Used by `.spectrum-Slider-tick:after`.
Defaults to `var(--spectrum-slider-tick-mark-color)`, if not set.", + "control": "color", + "category": "Modifier" + }, + "mod-slider-label-text-color-disabled": { + "value": "var(--spectrum-slider-label-text-color-disabled)", + "description": "Used by `.spectrum-Slider.is-disabled .spectrum-Slider-labelContainer, .spectrum-Slider.is-disabled .spectrum-Slider-tickLabel`.
Defaults to `var(--spectrum-slider-label-text-color-disabled)`, if not set.", + "control": "color", + "category": "Modifier" + }, + "mod-slider-handle-border-color-disabled": { + "value": "var(--spectrum-slider-handle-border-color-disabled)", + "description": "Used by `.spectrum-Slider.is-disabled .spectrum-Slider-handle`.
Defaults to `var(--spectrum-slider-handle-border-color-disabled)`, if not set.", + "control": "color", + "category": "Modifier" + }, + "mod-slider-handle-disabled-background-color": { + "value": "var(--spectrum-slider-handle-disabled-background-color)", + "description": "Used by `.spectrum-Slider.is-disabled .spectrum-Slider-handle`.
Defaults to `var(--spectrum-slider-handle-disabled-background-color)`, if not set.", + "control": "color", + "category": "Modifier" + }, + "mod-disabled-border-color": { + "value": "var(--spectrum-gray-300)", + "description": "Used by `.spectrum-Slider.is-disabled .spectrum-Slider-handle:active`, `.spectrum-Slider.is-disabled .spectrum-Slider-handle:hover`.
Defaults to `var(--spectrum-disabled-border-color)`, if not set.", + "control": "color", + "category": "Modifier" + }, + "mod-slider-handle-background-color-disabled": { + "value": "var(--spectrum-slider-handle-background-color-disabled)", + "description": "Used by `.spectrum-Slider.is-disabled .spectrum-Slider-handle:active`, `.spectrum-Slider.is-disabled .spectrum-Slider-handle:hover`.
Defaults to `var(--spectrum-slider-handle-background-color-disabled)`, if not set.", + "control": "color", + "category": "Modifier" + }, + "mod-slider-handle-border-color-hover": { + "value": "var(--spectrum-slider-handle-border-color-hover)", + "description": "Used by `.spectrum-Slider-handle:hover`.
Defaults to `var(--spectrum-slider-handle-border-color-hover)`, if not set.", + "control": "color", + "category": "Modifier" + }, + "mod-slider-track-color-disabled": { + "value": "var(--spectrum-slider-track-color-disabled)", + "description": "Used by `.spectrum-Slider.is-disabled .spectrum-Slider-track:before`, `.spectrum-Slider.is-disabled.spectrum-Slider--range .spectrum-Slider-track:not(:first-of-type, :last-of-type):before`.
Defaults to `var(--spectrum-slider-track-color-disabled)`, if not set.", + "control": "color", + "category": "Modifier" + }, + "mod-slider-track-fill-color-disabled": { + "value": "var(--spectrum-slider-track-fill-color-disabled)", + "description": "Used by `.spectrum-Slider.is-disabled .spectrum-Slider-fill:before, .spectrum-Slider.is-disabled.spectrum-Slider--filled .spectrum-Slider-track:first-child:before`.
Defaults to `var(--spectrum-slider-track-fill-color-disabled)`, if not set.", + "control": "color", + "category": "Modifier" + }, + "mod-slider-ramp-track-color-disabled": { + "value": "var(--spectrum-slider-ramp-track-color-disabled)", + "description": "Used by `.spectrum-Slider.is-disabled .spectrum-Slider-ramp path`.
Defaults to `var(--spectrum-slider-ramp-track-color-disabled)`, if not set.", + "control": "color", + "category": "Modifier" + }, + "mod-slider-tick-mark-color-disabled": { + "value": "var(--spectrum-slider-tick-mark-color-disabled)", + "description": "Used by `.spectrum-Slider.is-disabled .spectrum-Slider-tick:after`.
Defaults to `var(--spectrum-slider-tick-mark-color-disabled)`, if not set.", + "control": "color", + "category": "Modifier" + } + }, + "component": { + "spectrum-slider-font-size": { + "description": "Defined in `.spectrum-Slider`, `.spectrum-Slider--sizeS`, `.spectrum-Slider--sizeL`, `.spectrum-Slider--sizeXL`.
Used by `.spectrum-Slider-labelContainer`, `.spectrum-Slider-label`.", + "control": "text", + "category": "Component" + }, + "spectrum-slider-handle-size": { + "description": "Defined in `.spectrum-Slider`, `.spectrum-Slider--sizeS`, `.spectrum-Slider--sizeL`, `.spectrum-Slider--sizeXL`.
Used by `--spectrum-slider-handle-margin-left`, `--spectrum-slider-controls-margin`, `--spectrum-slider-track-middle-handleoffset`, `--spectrum-slider-input-top-size`, `.spectrum-Slider-handle`, `.spectrum-Slider-handle:before`, `.spectrum-Slider-handle.is-focused:before`, `.spectrum-Slider-input`, `.spectrum-Slider-handleContainer, .spectrum-Slider-trackContainer`.", + "control": "text", + "category": "Component" + }, + "spectrum-slider-handle-size-medium": { + "value": "16px", + "description": "Used by `--spectrum-slider-handle-size`.", + "control": "text", + "category": "Component" + }, + "spectrum-slider-control-height": { + "description": "Defined in `.spectrum-Slider`, `.spectrum-Slider--sizeS`, `.spectrum-Slider--sizeL`, `.spectrum-Slider--sizeXL`.
Used by `.spectrum-Slider-controls`, `.spectrum-Slider--tick`, `.spectrum-Slider-fill, .spectrum-Slider-track`, `.spectrum-Slider-handle`, `.spectrum-Slider-tick`, `.spectrum-Slider-trackContainer`.", + "control": "text", + "category": "Component" + }, + "spectrum-slider-handle-border-width-down": { + "description": "Defined in `.spectrum-Slider`, `.spectrum-Slider--sizeS`, `.spectrum-Slider--sizeL`, `.spectrum-Slider--sizeXL`.
Used by `.spectrum-Slider-handle.is-dragged, .spectrum-Slider-handle:active`.", + "control": "text", + "category": "Component" + }, + "spectrum-slider-handle-border-width-down-medium": { + "value": "6px", + "description": "Used by `--spectrum-slider-handle-border-width-down`.", + "control": "text", + "category": "Component" + }, + "spectrum-slider-label-top-to-text": { + "description": "Defined in `.spectrum-Slider`, `.spectrum-Slider--sizeS`, `.spectrum-Slider--sizeL`, `.spectrum-Slider--sizeXL`.
Used by `.spectrum-Slider-labelContainer`.", + "control": "text", + "category": "Component" + }, + "spectrum-slider-control-to-field-label": { + "description": "Defined in `.spectrum-Slider`, `.spectrum-Slider--sizeS`, `.spectrum-Slider--sizeL`, `.spectrum-Slider--sizeXL`.
Used by `.spectrum-Slider-labelContainer + .spectrum-Slider-controls`.", + "control": "text", + "category": "Component" + }, + "spectrum-slider-control-to-field-label-medium": { + "value": "8px", + "description": "Used by `--spectrum-slider-control-to-field-label`.", + "control": "text", + "category": "Component" + }, + "spectrum-slider-value-side-padding-inline": { + "description": "Defined in `.spectrum-Slider`, `.spectrum-Slider--sizeS`, `.spectrum-Slider--sizeL`, `.spectrum-Slider--sizeXL`.
Used by `.spectrum-Slider--sideLabel .spectrum-Slider-labelContainer .spectrum-Slider-label`, `.spectrum-Slider--sideLabel .spectrum-Slider-value`.", + "control": "text", + "category": "Component" + }, + "spectrum-slider-value-inline-size": { + "description": "Defined in `.spectrum-Slider`, `.spectrum-Slider--sizeL`, `.spectrum-Slider--sizeXL`.
Used by `.spectrum-Slider--sideLabel .spectrum-Slider-value`.", + "control": "text", + "category": "Component" + }, + "spectrum-slider-cjk-line-height": { + "description": "Defined in `.spectrum-Slider`.
Used by `.spectrum-Slider-labelContainer:lang(ja), .spectrum-Slider-labelContainer:lang(ko), .spectrum-Slider-labelContainer:lang(zh)`.", + "control": "text", + "category": "Component" + }, + "spectrum-slider-min-size": { + "description": "Defined in `.spectrum-Slider`.
Used by `.spectrum-Slider`.", + "control": "text", + "category": "Component" + }, + "spectrum-slider-label-margin-start": { + "description": "Defined in `.spectrum-Slider`.
Used by `.spectrum-Slider-value`.", + "control": "text", + "category": "Component" + }, + "spectrum-slider-handle-border-width": { + "description": "Defined in `.spectrum-Slider`.
Used by `.spectrum-Slider-handle`.", + "control": "text", + "category": "Component" + }, + "spectrum-slider-handle-margin-left": { + "description": "Defined in `.spectrum-Slider`.
Used by `--spectrum-slider-input-left`.", + "control": "text", + "category": "Component" + }, + "spectrum-slider-controls-margin": { + "description": "Defined in `.spectrum-Slider`.
Used by `--spectrum-slider-track-margin-offset`, `.spectrum-Slider--sideLabel .spectrum-Slider-controls`, `.spectrum-Slider-controls`, `.spectrum-Slider-fill`, `.spectrum-Slider-fill--right`.", + "control": "text", + "category": "Component" + }, + "spectrum-slider-track-margin-offset": { + "value": "var(--spectrum-slider-track-margin-offset)", + "description": "Defined in `.spectrum-Slider`.
Used by `.spectrum-Slider-fill, .spectrum-Slider-track`, `.spectrum-Slider-track ~ .spectrum-Slider-track`, `.spectrum-Slider--range .spectrum-Slider-track:first-of-type`, `.spectrum-Slider--range .spectrum-Slider-track:last-of-type`, `.spectrum-Slider-ramp`, `.spectrum-Slider-ticks`.
Defaults to `var(--spectrum-slider-track-margin-offset)`, if not set.", + "control": "text", + "category": "Component" + }, + "spectrum-slider-track-middle-handleoffset": { + "description": "Defined in `.spectrum-Slider`.
Used by `.spectrum-Slider--range .spectrum-Slider-track ~ .spectrum-Slider-track`.", + "control": "text", + "category": "Component" + }, + "spectrum-slider-handle-gap": { + "value": "4px", + "description": "Used by `--spectrum-slider-track-middle-handleoffset`, `--spectrum-slider-track-handleoffset`, `.spectrum-Slider-fill, .spectrum-Slider-track`, `.spectrum-Slider-fill`, `.spectrum-Slider-fill--right`, `.spectrum-Slider--ramp .spectrum-Slider-handle`.
Defaults to `var(--spectrum-slider-handle-gap)`, if not set.", + "control": "text", + "category": "Component" + }, + "spectrum-slider-input-top-size": { + "description": "Defined in `.spectrum-Slider`.
Used by `.spectrum-Slider-input`.", + "control": "text", + "category": "Component" + }, + "spectrum-slider-track-fill-thickness": { + "description": "Defined in `.spectrum-Slider`.
Used by `.spectrum-Slider-fill, .spectrum-Slider-track`.", + "control": "text", + "category": "Component" + }, + "spectrum-slider-track-thickness": { + "value": "2px", + "description": "Used by `--spectrum-slider-track-fill-thickness`, `.spectrum-Slider--tick .spectrum-Slider-controls`.", + "control": "text", + "category": "Component" + }, + "spectrum-slider-tick-mark-width": { + "description": "Defined in `.spectrum-Slider`.
Used by `.spectrum-Slider-tick, .spectrum-Slider-tick:after`, `.spectrum-Slider-tick:after`, `.spectrum-Slider-tick:first-of-type`, `.spectrum-Slider-tick:last-of-type`.", + "control": "text", + "category": "Component" + }, + "spectrum-slider-tick-mark-border-radius": { + "description": "Defined in `.spectrum-Slider`.
Used by `.spectrum-Slider-tick:after`.", + "control": "text", + "category": "Component" + }, + "spectrum-slider-tick-handle-background-color": { + "description": "Defined in `.spectrum-Slider`.
Used by `.spectrum-Slider--tick .spectrum-Slider-handle`.", + "control": "color", + "category": "Component" + }, + "spectrum-slider-track-color-disabled": { + "description": "Defined in `.spectrum-Slider`.
Used by `.spectrum-Slider.is-disabled .spectrum-Slider-track:before`, `.spectrum-Slider.is-disabled.spectrum-Slider--range .spectrum-Slider-track:not(:first-of-type, :last-of-type):before`.", + "control": "color", + "category": "Component" + }, + "spectrum-slider-track-fill-color-disabled": { + "description": "Defined in `.spectrum-Slider`.
Used by `.spectrum-Slider.is-disabled .spectrum-Slider-fill:before, .spectrum-Slider.is-disabled.spectrum-Slider--filled .spectrum-Slider-track:first-child:before`.", + "control": "color", + "category": "Component" + }, + "spectrum-slider-handle-border-color-disabled": { + "description": "Defined in `.spectrum-Slider`.
Used by `.spectrum-Slider.is-disabled .spectrum-Slider-handle`.", + "control": "color", + "category": "Component" + }, + "spectrum-slider-label-text-color": { + "description": "Defined in `.spectrum-Slider`.
Used by `.spectrum-Slider-labelContainer`.", + "control": "color", + "category": "Component" + }, + "spectrum-slider-tick-label-color": { + "description": "Defined in `.spectrum-Slider`.
Used by `.spectrum-Slider-tick .spectrum-Slider-tickLabel`.", + "control": "color", + "category": "Component" + }, + "spectrum-slider-label-text-color-disabled": { + "description": "Defined in `.spectrum-Slider`.
Used by `.spectrum-Slider.is-disabled .spectrum-Slider-labelContainer, .spectrum-Slider.is-disabled .spectrum-Slider-tickLabel`.", + "control": "color", + "category": "Component" + }, + "spectrum-slider-tick-mark-color-disabled": { + "description": "Defined in `.spectrum-Slider`.
Used by `.spectrum-Slider.is-disabled .spectrum-Slider-tick:after`.", + "control": "color", + "category": "Component" + }, + "spectrum-slider-ramp-handle-border-color-active": { + "description": "Defined in `.spectrum-Slider`.
Used by `.spectrum-Slider--ramp .spectrum-Slider-handle`.", + "control": "color", + "category": "Component" + }, + "spectrum-slider-input-left": { + "description": "Defined in `.spectrum-Slider`.
Used by `.spectrum-Slider-input`.", + "control": "text", + "category": "Component" + }, + "spectrum-slider-track-handleoffset": { + "description": "Defined in `.spectrum-Slider`.
Used by `.spectrum-Slider-track ~ .spectrum-Slider-track`, `.spectrum-Slider--range .spectrum-Slider-track:first-of-type`, `.spectrum-Slider--range .spectrum-Slider-track:last-of-type`.", + "control": "text", + "category": "Component" + }, + "spectrum-slider-range-track-reset": { + "description": "Defined in `.spectrum-Slider`.
Used by `.spectrum-Slider-track ~ .spectrum-Slider-track`, `.spectrum-Slider--range .spectrum-Slider-track ~ .spectrum-Slider-track`, `.spectrum-Slider--range .spectrum-Slider-track:first-of-type`, `.spectrum-Slider--range .spectrum-Slider-track:last-of-type`.", + "control": "text", + "category": "Component" + }, + "spectrum-slider-ramp-track-height": { + "description": "Used by `.spectrum-Slider:not(.spectrum-Slider--sideLabel) .spectrum-Slider-labelContainer + .spectrum-Slider-controls:has(.spectrum-Slider-ramp)`, `.spectrum-Slider-ramp`.", + "control": "text", + "category": "Component" + }, + "spectrum-slider-handle-size-small": { + "value": "14px", + "description": "Used by `--spectrum-slider-handle-size`.", + "control": "text", + "category": "Component" + }, + "spectrum-slider-handle-border-width-down-small": { + "value": "5px", + "description": "Used by `--spectrum-slider-handle-border-width-down`.", + "control": "text", + "category": "Component" + }, + "spectrum-slider-control-to-field-label-small": { + "value": "5px", + "description": "Used by `--spectrum-slider-control-to-field-label`.", + "control": "text", + "category": "Component" + }, + "spectrum-slider-handle-size-large": { + "value": "18px", + "description": "Used by `--spectrum-slider-handle-size`.", + "control": "text", + "category": "Component" + }, + "spectrum-slider-handle-border-width-down-large": { + "value": "7px", + "description": "Used by `--spectrum-slider-handle-border-width-down`.", + "control": "text", + "category": "Component" + }, + "spectrum-slider-control-to-field-label-large": { + "value": "11px", + "description": "Used by `--spectrum-slider-control-to-field-label`.", + "control": "text", + "category": "Component" + }, + "spectrum-slider-handle-size-extra-large": { + "value": "20px", + "description": "Used by `--spectrum-slider-handle-size`.", + "control": "text", + "category": "Component" + }, + "spectrum-slider-handle-border-width-down-extra-large": { + "value": "8px", + "description": "Used by `--spectrum-slider-handle-border-width-down`.", + "control": "text", + "category": "Component" + }, + "spectrum-slider-control-to-field-label-extra-large": { + "value": "14px", + "description": "Used by `--spectrum-slider-control-to-field-label`.", + "control": "text", + "category": "Component" + }, + "spectrum-slider-track-corner-radius": { + "description": "Defined in `.spectrum-Slider`.
Used by `.spectrum-Slider-track:first-of-type:before`, `.spectrum-Slider-track:last-of-type:before`, `.spectrum-Slider--range .spectrum-Slider-track:first-of-type:before`, `.spectrum-Slider--range .spectrum-Slider-track:last-of-type:before`, `.spectrum-Slider-track ~ .spectrum-Slider-track:before`.", + "control": "text", + "category": "Component" + }, + "spectrum-slider-handle-border-radius": { + "description": "Defined in `.spectrum-Slider`, `.spectrum-Slider.spectrum-Slider--sizeM`, `.spectrum-Slider.spectrum-Slider--sizeS`, `.spectrum-Slider.spectrum-Slider--sizeL`, `.spectrum-Slider.spectrum-Slider--sizeXL`.
Used by `.spectrum-Slider-handle`.", + "control": "text", + "category": "Component" + }, + "spectrum-slider-tick-mark-height": { + "description": "Used by `.spectrum-Slider--tick .spectrum-Slider-controls`, `.spectrum-Slider--tick .spectrum-Slider-tickLabel`, `.spectrum-Slider-tick`, `.spectrum-Slider-tick:after`.", + "control": "text", + "category": "Component" + }, + "spectrum-slider-ticks-handle-background-color": { + "description": "Defined in `.spectrum-Slider`.
Used by `.spectrum-Slider-ticks ~ .spectrum-Slider-handleContainer .spectrum-Slider-handle`.", + "control": "color", + "category": "Component" + }, + "spectrum-slider-track-color": { + "description": "Defined in `.spectrum-Slider`.
Used by `.spectrum-Slider-track:before`, `.spectrum-Slider-track:not(:has(~ .spectrum-Slider-fill)):before`.", + "control": "color", + "category": "Component" + }, + "spectrum-slider-track-fill-color": { + "description": "Defined in `.spectrum-Slider`.
Used by `.spectrum-Slider--filled .spectrum-Slider-track:first-child:before, .spectrum-Slider-fill:before`, `.spectrum-Slider--range .spectrum-Slider-track:not(:first-of-type, :last-of-type):before`.", + "control": "color", + "category": "Component" + }, + "spectrum-slider-ramp-track-color": { + "description": "Defined in `.spectrum-Slider`.
Used by `.spectrum-Slider-ramp path`.", + "control": "color", + "category": "Component" + }, + "spectrum-slider-handle-border-color": { + "description": "Defined in `.spectrum-Slider`.
Used by `.spectrum-Slider-handle`.", + "control": "color", + "category": "Component" + }, + "spectrum-slider-handle-background-color": { + "description": "Defined in `.spectrum-Slider`.
Used by `.spectrum-Slider-handle`, `.spectrum-Slider-handle.is-dragged`.", + "control": "color", + "category": "Component" + }, + "spectrum-slider-handle-border-color-key-focus": { + "description": "Defined in `.spectrum-Slider`.
Used by `.spectrum-Slider-handle.is-focused`.", + "control": "color", + "category": "Component" + }, + "spectrum-slider-handle-focus-ring-color-key-focus": { + "description": "Defined in `.spectrum-Slider`.
Used by `.spectrum-Slider-handle.is-focused:before`.", + "control": "color", + "category": "Component" + }, + "spectrum-slider-handle-border-color-down": { + "description": "Defined in `.spectrum-Slider`.
Used by `.spectrum-Slider-handle.is-dragged, .spectrum-Slider-handle:active`, `.spectrum-Slider-handle.is-dragged`.", + "control": "color", + "category": "Component" + }, + "spectrum-slider-ramp-handle-background-color": { + "description": "Defined in `.spectrum-Slider`.
Used by `.spectrum-Slider--ramp .spectrum-Slider-handle`.", + "control": "color", + "category": "Component" + }, + "spectrum-slider-tick-mark-color": { + "description": "Defined in `.spectrum-Slider`.
Used by `.spectrum-Slider-tick:after`.", + "control": "color", + "category": "Component" + }, + "spectrum-slider-handle-disabled-background-color": { + "description": "Defined in `.spectrum-Slider`.
Used by `.spectrum-Slider.is-disabled .spectrum-Slider-handle`.", + "control": "color", + "category": "Component" + }, + "spectrum-slider-handle-background-color-disabled": { + "description": "Defined in `.spectrum-Slider`.
Used by `.spectrum-Slider.is-disabled .spectrum-Slider-handle:active`, `.spectrum-Slider.is-disabled .spectrum-Slider-handle:hover`.", + "control": "color", + "category": "Component" + }, + "spectrum-slider-handle-border-color-hover": { + "description": "Defined in `.spectrum-Slider`.
Used by `.spectrum-Slider-handle:hover`.", + "control": "color", + "category": "Component" + }, + "spectrum-slider-ramp-track-color-disabled": { + "description": "Defined in `.spectrum-Slider`.
Used by `.spectrum-Slider.is-disabled .spectrum-Slider-ramp path`.", + "control": "color", + "category": "Component" + } + }, + "global": { + "spectrum-gray-200": { + "value": "light-dark(rgb(225, 225, 225), rgb(50, 50, 50))", + "description": "Used by `--system-slider-track-color`, `--system-slider-tick-mark-color`.", + "control": "text", + "category": "Global" + }, + "spectrum-gray-700": { + "value": "light-dark(rgb(80, 80, 80), rgb(175, 175, 175))", + "description": "Used by `--system-slider-track-fill-color`, `--system-slider-handle-border-color`.", + "control": "text", + "category": "Global" + }, + "spectrum-gray-400": { + "value": "light-dark(rgb(198, 198, 198), rgb(68, 68, 68))", + "description": "Used by `--system-slider-ramp-track-color`.", + "control": "text", + "category": "Global" + }, + "spectrum-gray-100": { + "value": "light-dark(rgb(233, 233, 233), rgb(44, 44, 44))", + "description": "Used by `--system-slider-ramp-track-color-disabled`, `--spectrum-slider-tick-handle-background-color`, `--spectrum-slider-ramp-handle-border-color-active`.", + "control": "text", + "category": "Global" + }, + "spectrum-gray-75": { + "value": "light-dark(rgb(243, 243, 243), rgb(34, 34, 34))", + "description": "Used by `--system-slider-ramp-handle-background-color`, `--system-slider-ticks-handle-background-color`, `--system-slider-handle-disabled-background-color`.", + "control": "text", + "category": "Global" + }, + "spectrum-gray-800": { + "value": "light-dark(rgb(41, 41, 41), rgb(219, 219, 219))", + "description": "Used by `--system-slider-handle-border-color-hover`, `--system-slider-handle-border-color-down`, `--system-slider-handle-border-color-key-focus`.", + "control": "text", + "category": "Global" + }, + "spectrum-focus-indicator-color": { + "value": "var(--spectrum-blue-800)", + "description": "Used by `--system-slider-handle-focus-ring-color-key-focus`.", + "control": "color", + "category": "Global" + }, + "spectrum-corner-radius-500": { + "value": "8px", + "description": "Used by `--system-slider-handle-border-radius`, `--system-slider-size-m-handle-border-radius`, `--system-slider-size-s-handle-border-radius`, `--system-slider-size-l-handle-border-radius`, `--system-slider-size-xl-handle-border-radius`.", + "control": "text", + "category": "Global" + }, + "spectrum-font-size-75": { + "value": "12px", + "description": "Used by `--spectrum-slider-font-size`, `.spectrum-Slider-tick .spectrum-Slider-tickLabel`.", + "control": "text", + "category": "Global" + }, + "spectrum-component-height-100": { + "value": "32px", + "description": "Used by `--spectrum-slider-control-height`.", + "control": "text", + "category": "Global" + }, + "spectrum-component-top-to-text-75": { + "value": "4px", + "description": "Used by `--spectrum-slider-label-top-to-text`.", + "control": "text", + "category": "Global" + }, + "spectrum-spacing-200": { + "value": "12px", + "description": "Used by `--spectrum-slider-value-side-padding-inline`.", + "control": "text", + "category": "Global" + }, + "spectrum-cjk-line-height-100": { + "value": "1.5", + "description": "Used by `--spectrum-slider-cjk-line-height`.", + "control": "text", + "category": "Global" + }, + "spectrum-spacing-900": { + "value": "80px", + "description": "Used by `--spectrum-slider-min-size`.", + "control": "text", + "category": "Global" + }, + "spectrum-spacing-300": { + "value": "16px", + "description": "Used by `--spectrum-slider-label-margin-start`.", + "control": "text", + "category": "Global" + }, + "spectrum-border-width-200": { + "value": "2px", + "description": "Used by `--spectrum-slider-handle-border-width`, `--spectrum-slider-tick-mark-width`.", + "control": "text", + "category": "Global" + }, + "spectrum-disabled-background-color": { + "value": "var(--spectrum-gray-100)", + "description": "Used by `--spectrum-slider-track-color-disabled`, `--spectrum-slider-track-fill-color-disabled`, `--spectrum-slider-tick-mark-color-disabled`.", + "control": "color", + "category": "Global" + }, + "spectrum-disabled-border-color": { + "value": "var(--spectrum-gray-300)", + "description": "Used by `--spectrum-slider-handle-border-color-disabled`, `.spectrum-Slider.is-disabled .spectrum-Slider-handle:active`, `.spectrum-Slider.is-disabled .spectrum-Slider-handle:hover`.", + "control": "color", + "category": "Global" + }, + "spectrum-neutral-content-color-default": { + "value": "var(--spectrum-gray-800)", + "description": "Used by `--spectrum-slider-label-text-color`, `--spectrum-slider-tick-label-color`.", + "control": "color", + "category": "Global" + }, + "spectrum-disabled-content-color": { + "value": "var(--spectrum-gray-400)", + "description": "Used by `--spectrum-slider-label-text-color-disabled`.", + "control": "color", + "category": "Global" + }, + "spectrum-logical-rotation": { + "description": "Defined in `.spectrum-Slider:dir(rtl), [dir=\"rtl\"] .spectrum-Slider`.
Used by `.spectrum-Slider-ramp svg`.", + "control": "text", + "category": "Global" + }, + "spectrum-component-height-75": { + "value": "24px", + "description": "Used by `--spectrum-slider-control-height`.", + "control": "text", + "category": "Global" + }, + "spectrum-spacing-100": { + "value": "8px", + "description": "Used by `--spectrum-slider-value-side-padding-inline`.", + "control": "text", + "category": "Global" + }, + "spectrum-font-size-100": { + "value": "14px", + "description": "Used by `--spectrum-slider-font-size`.", + "control": "text", + "category": "Global" + }, + "spectrum-component-height-200": { + "value": "40px", + "description": "Used by `--spectrum-slider-control-height`.", + "control": "text", + "category": "Global" + }, + "spectrum-component-top-to-text-100": { + "value": "6px", + "description": "Used by `--spectrum-slider-label-top-to-text`.", + "control": "text", + "category": "Global" + }, + "spectrum-font-size-200": { + "value": "16px", + "description": "Used by `--spectrum-slider-font-size`.", + "control": "text", + "category": "Global" + }, + "spectrum-component-height-300": { + "value": "48px", + "description": "Used by `--spectrum-slider-control-height`.", + "control": "text", + "category": "Global" + }, + "spectrum-component-top-to-text-200": { + "value": "9px", + "description": "Used by `--spectrum-slider-label-top-to-text`.", + "control": "text", + "category": "Global" + }, + "spectrum-animation-duration-100": { + "description": "Used by `.spectrum-Slider-handle`, `.spectrum-Slider-handle:before`.", + "control": "text", + "category": "Global" + }, + "spectrum-focus-indicator-gap": { + "value": "2px", + "description": "Used by `.spectrum-Slider-handle.is-focused:before`.", + "control": "text", + "category": "Global" + }, + "spectrum-line-height-100": { + "value": "1.3", + "description": "Used by `.spectrum-Slider-labelContainer`, `.spectrum-Slider-tick .spectrum-Slider-tickLabel`.", + "control": "text", + "category": "Global" + }, + "spectrum-text-to-visual-75": { + "value": "5px", + "description": "Used by `.spectrum-Slider--tick .spectrum-Slider-controls`, `.spectrum-Slider--tick .spectrum-Slider-tickLabel`.", + "control": "text", + "category": "Global" + }, + "spectrum-focus-indicator-thickness": { + "value": "2px", + "description": "Used by `.spectrum-Slider-handle.is-focused:before`.", + "control": "text", + "category": "Global" + } + }, + "system-theme": { + "system-slider-track-color": { + "description": "Defined in `.spectrum`.
Used by `--spectrum-slider-track-color`.", + "control": "color" + }, + "system-slider-track-fill-color": { + "description": "Defined in `.spectrum`.
Used by `--spectrum-slider-track-fill-color`.", + "control": "color" + }, + "system-slider-ramp-track-color": { + "description": "Defined in `.spectrum`.
Used by `--spectrum-slider-ramp-track-color`.", + "control": "color" + }, + "system-slider-ramp-track-color-disabled": { + "description": "Defined in `.spectrum`.
Used by `--spectrum-slider-ramp-track-color-disabled`.", + "control": "color" + }, + "system-slider-handle-background-color": { + "description": "Defined in `.spectrum`.
Used by `--spectrum-slider-handle-background-color`.", + "control": "color" + }, + "system-slider-handle-background-color-disabled": { + "description": "Defined in `.spectrum`.
Used by `--spectrum-slider-handle-background-color-disabled`.", + "control": "color" + }, + "system-slider-ramp-handle-background-color": { + "description": "Defined in `.spectrum`.
Used by `--spectrum-slider-ramp-handle-background-color`.", + "control": "color" + }, + "system-slider-ticks-handle-background-color": { + "description": "Defined in `.spectrum`.
Used by `--spectrum-slider-ticks-handle-background-color`.", + "control": "color" + }, + "system-slider-handle-border-color": { + "description": "Defined in `.spectrum`.
Used by `--spectrum-slider-handle-border-color`.", + "control": "color" + }, + "system-slider-handle-disabled-background-color": { + "description": "Defined in `.spectrum`.
Used by `--spectrum-slider-handle-disabled-background-color`.", + "control": "color" + }, + "system-slider-tick-mark-color": { + "description": "Defined in `.spectrum`.
Used by `--spectrum-slider-tick-mark-color`.", + "control": "color" + }, + "system-slider-handle-border-color-hover": { + "description": "Defined in `.spectrum`.
Used by `--spectrum-slider-handle-border-color-hover`.", + "control": "color" + }, + "system-slider-handle-border-color-down": { + "description": "Defined in `.spectrum`.
Used by `--spectrum-slider-handle-border-color-down`.", + "control": "color" + }, + "system-slider-handle-border-color-key-focus": { + "description": "Defined in `.spectrum`.
Used by `--spectrum-slider-handle-border-color-key-focus`.", + "control": "color" + }, + "system-slider-handle-focus-ring-color-key-focus": { + "description": "Defined in `.spectrum`.
Used by `--spectrum-slider-handle-focus-ring-color-key-focus`.", + "control": "color" + }, + "system-slider-track-corner-radius": { + "description": "Defined in `.spectrum`.
Used by `--spectrum-slider-track-corner-radius`.", + "control": "text" + }, + "system-slider-handle-border-radius": { + "description": "Defined in `.spectrum`.
Used by `--spectrum-slider-handle-border-radius`.", + "control": "text" + }, + "system-slider-size-m-handle-border-radius": { + "description": "Defined in `.spectrum`.
Used by `--spectrum-slider-handle-border-radius`.", + "control": "text" + }, + "system-slider-size-s-handle-border-radius": { + "description": "Defined in `.spectrum`.
Used by `--spectrum-slider-handle-border-radius`.", + "control": "text" + }, + "system-slider-size-l-handle-border-radius": { + "description": "Defined in `.spectrum`.
Used by `--spectrum-slider-handle-border-radius`.", + "control": "text" + }, + "system-slider-size-xl-handle-border-radius": { + "description": "Defined in `.spectrum`.
Used by `--spectrum-slider-handle-border-radius`.", + "control": "text" + } + }, + "passthroughs": {}, + "high-contrast": { + "highcontrast-slider-label-text-color": { + "value": "var(--mod-slider-label-text-color, var(--spectrum-slider-label-text-color))", + "description": "Defined in `.spectrum-Slider`.
Used by `.spectrum-Slider-tick .spectrum-Slider-tickLabel`, `.spectrum-Slider-labelContainer`.
Defaults to `var(--mod-slider-label-text-color, var(--spectrum-slider-label-text-color))`, if not set.", + "control": "color" + }, + "highcontrast-slider-track-color-static": { + "value": "var(--mod-slider-track-color, var(--spectrum-slider-track-color))", + "description": "Defined in `.spectrum-Slider`.
Used by `.spectrum-Slider-track:before`.
Defaults to `var(--mod-slider-track-color, var(--spectrum-slider-track-color))`, if not set.", + "control": "color" + }, + "highcontrast-slider-track-color": { + "value": "var(--mod-slider-track-color, var(--spectrum-slider-track-color))", + "description": "Defined in `.spectrum-Slider`, `.spectrum-Slider:not(.is-disabled, .spectrum-Slider--filled, .spectrum-Slider--range) .spectrum-Slider-controls.is-focused, .spectrum-Slider:not(.is-disabled, .spectrum-Slider--filled, .spectrum-Slider--range) .spectrum-Slider-controls:active, .spectrum-Slider:not(.is-disabled, .spectrum-Slider--filled, .spectrum-Slider--range) .spectrum-Slider-controls:focus-within`, `.spectrum-Slider:not(.is-disabled, .spectrum-Slider--filled, .spectrum-Slider--range) .spectrum-Slider-controls:hover`.
Used by `.spectrum-Slider-track:not(:has(~ .spectrum-Slider-fill)):before`.
Defaults to `var(--mod-slider-track-color, var(--spectrum-slider-track-color))`, if not set.", + "control": "color" + }, + "highcontrast-slider-filled-track-fill-color": { + "value": "var(--mod-slider-track-fill-color, var(--spectrum-slider-track-fill-color))", + "description": "Defined in `.spectrum-Slider`.
Used by `.spectrum-Slider--filled .spectrum-Slider-track:first-child:before, .spectrum-Slider-fill:before`, `.spectrum-Slider--range .spectrum-Slider-track:not(:first-of-type, :last-of-type):before`.
Defaults to `var(--mod-slider-track-fill-color, var(--spectrum-slider-track-fill-color))`, if not set.", + "control": "color" + }, + "highcontrast-slider-ramp-track-color": { + "value": "var(--mod-slider-ramp-track-color, var(--spectrum-slider-ramp-track-color))", + "description": "Defined in `.spectrum-Slider`, `.spectrum-Slider:not(.is-disabled, .spectrum-Slider--filled, .spectrum-Slider--range) .spectrum-Slider-controls.is-focused, .spectrum-Slider:not(.is-disabled, .spectrum-Slider--filled, .spectrum-Slider--range) .spectrum-Slider-controls:active, .spectrum-Slider:not(.is-disabled, .spectrum-Slider--filled, .spectrum-Slider--range) .spectrum-Slider-controls:focus-within`, `.spectrum-Slider:not(.is-disabled, .spectrum-Slider--filled, .spectrum-Slider--range) .spectrum-Slider-controls:hover`.
Used by `.spectrum-Slider-ramp path`.
Defaults to `var(--mod-slider-ramp-track-color, var(--spectrum-slider-ramp-track-color))`, if not set.", + "control": "color" + }, + "highcontrast-slider-handle-border-color": { + "value": "var(--mod-slider-handle-border-color, var(--spectrum-slider-handle-border-color))", + "description": "Defined in `.spectrum-Slider`, `.spectrum-Slider:not(.is-disabled, .spectrum-Slider--filled, .spectrum-Slider--range) .spectrum-Slider-controls.is-focused, .spectrum-Slider:not(.is-disabled, .spectrum-Slider--filled, .spectrum-Slider--range) .spectrum-Slider-controls:active, .spectrum-Slider:not(.is-disabled, .spectrum-Slider--filled, .spectrum-Slider--range) .spectrum-Slider-controls:focus-within`, `.spectrum-Slider:not(.is-disabled, .spectrum-Slider--filled, .spectrum-Slider--range) .spectrum-Slider-controls:hover`.
Used by `.spectrum-Slider-handle`.
Defaults to `var(--mod-slider-handle-border-color, var(--spectrum-slider-handle-border-color))`, if not set.", + "control": "color" + }, + "highcontrast-slider-handle-background-color": { + "value": "var(--mod-slider-handle-background-color, var(--spectrum-slider-handle-background-color))", + "description": "Defined in `.spectrum-Slider`.
Used by `.spectrum-Slider-handle`, `.spectrum-Slider-handle.is-dragged`.
Defaults to `var(--mod-slider-handle-background-color, var(--spectrum-slider-handle-background-color))`, if not set.", + "control": "color" + }, + "highcontrast-slider-handle-border-color-key-focus": { + "value": "var(--mod-slider-handle-border-color-key-focus, var(--spectrum-slider-handle-border-color-key-focus))", + "description": "Defined in `.spectrum-Slider`.
Used by `.spectrum-Slider-handle.is-focused`.
Defaults to `var(--mod-slider-handle-border-color-key-focus, var(--spectrum-slider-handle-border-color-key-focus))`, if not set.", + "control": "color" + }, + "highcontrast-slider-handle-focus-ring-color-key-focus": { + "value": "var(--mod-slider-handle-focus-ring-color-key-focus, var(--spectrum-slider-handle-focus-ring-color-key-focus))", + "description": "Defined in `.spectrum-Slider`.
Used by `.spectrum-Slider-handle.is-focused:before`.
Defaults to `var(--mod-slider-handle-focus-ring-color-key-focus, var(--spectrum-slider-handle-focus-ring-color-key-focus))`, if not set.", + "control": "color" + }, + "highcontrast-slider-handle-border-color-down": { + "value": "var(--mod-slider-handle-border-color-down, var(--spectrum-slider-handle-border-color-down))", + "description": "Defined in `.spectrum-Slider`.
Used by `.spectrum-Slider-handle.is-dragged, .spectrum-Slider-handle:active`, `.spectrum-Slider-handle.is-dragged`.
Defaults to `var(--mod-slider-handle-border-color-down, var(--spectrum-slider-handle-border-color-down))`, if not set.", + "control": "color" + }, + "highcontrast-slider-ramp-handle-border-color-active": { + "value": "var(--mod-sectrum-slider-ramp-handle-border-color-active, var(--spectrum-slider-ramp-handle-border-color-active))", + "description": "Defined in `.spectrum-Slider`.
Used by `.spectrum-Slider--ramp .spectrum-Slider-handle`.
Defaults to `var(--mod-sectrum-slider-ramp-handle-border-color-active, var(--spectrum-slider-ramp-handle-border-color-active))`, if not set.", + "control": "color" + }, + "highcontrast-slider-ramp-handle-background-color": { + "value": "var(--spectrum-slider-ramp-handle-background-color)", + "description": "Defined in `.spectrum-Slider`.
Used by `.spectrum-Slider--ramp .spectrum-Slider-handle`.
Defaults to `var(--spectrum-slider-ramp-handle-background-color)`, if not set.", + "control": "color" + }, + "highcontrast-slider-tick-mark-color": { + "value": "var(--mod-slider-tick-mark-color, var(--spectrum-slider-tick-mark-color))", + "description": "Defined in `.spectrum-Slider`, `.spectrum-Slider:not(.is-disabled, .spectrum-Slider--filled, .spectrum-Slider--range) .spectrum-Slider-controls.is-focused, .spectrum-Slider:not(.is-disabled, .spectrum-Slider--filled, .spectrum-Slider--range) .spectrum-Slider-controls:active, .spectrum-Slider:not(.is-disabled, .spectrum-Slider--filled, .spectrum-Slider--range) .spectrum-Slider-controls:focus-within`, `.spectrum-Slider:not(.is-disabled, .spectrum-Slider--filled, .spectrum-Slider--range) .spectrum-Slider-controls:hover`.
Used by `.spectrum-Slider-tick:after`.
Defaults to `var(--mod-slider-tick-mark-color, var(--spectrum-slider-tick-mark-color))`, if not set.", + "control": "color" + }, + "highcontrast-slider-label-text-color-disabled": { + "value": "var(--mod-slider-label-text-color-disabled, var(--spectrum-slider-label-text-color-disabled))", + "description": "Defined in `.spectrum-Slider`.
Used by `.spectrum-Slider.is-disabled .spectrum-Slider-labelContainer, .spectrum-Slider.is-disabled .spectrum-Slider-tickLabel`.
Defaults to `var(--mod-slider-label-text-color-disabled, var(--spectrum-slider-label-text-color-disabled))`, if not set.", + "control": "color" + }, + "highcontrast-slider-handle-border-color-disabled": { + "value": "var(--mod-slider-handle-border-color-disabled, var(--spectrum-slider-handle-border-color-disabled))", + "description": "Defined in `.spectrum-Slider`.
Used by `.spectrum-Slider.is-disabled .spectrum-Slider-handle`.
Defaults to `var(--mod-slider-handle-border-color-disabled, var(--spectrum-slider-handle-border-color-disabled))`, if not set.", + "control": "color" + }, + "highcontrast-slider-handle-disabled-background-color": { + "value": "var(--mod-slider-handle-disabled-background-color, var(--spectrum-slider-handle-disabled-background-color))", + "description": "Defined in `.spectrum-Slider`.
Used by `.spectrum-Slider.is-disabled .spectrum-Slider-handle`.
Defaults to `var(--mod-slider-handle-disabled-background-color, var(--spectrum-slider-handle-disabled-background-color))`, if not set.", + "control": "color" + }, + "highcontrast-slider-handle-background-color-disabled": { + "value": "var(--mod-slider-handle-background-color-disabled, var(--spectrum-slider-handle-background-color-disabled))", + "description": "Defined in `.spectrum-Slider`.
Used by `.spectrum-Slider.is-disabled .spectrum-Slider-handle:active`, `.spectrum-Slider.is-disabled .spectrum-Slider-handle:hover`.
Defaults to `var(--mod-slider-handle-background-color-disabled, var(--spectrum-slider-handle-background-color-disabled))`, if not set.", + "control": "color" + }, + "highcontrast-slider-handle-border-color-hover": { + "value": "var(--mod-slider-handle-border-color-hover, var(--spectrum-slider-handle-border-color-hover))", + "description": "Defined in `.spectrum-Slider`.
Used by `.spectrum-Slider-handle:hover`.
Defaults to `var(--mod-slider-handle-border-color-hover, var(--spectrum-slider-handle-border-color-hover))`, if not set.", + "control": "color" + }, + "highcontrast-slider-track-color-disabled": { + "value": "var(--mod-slider-track-color-disabled, var(--spectrum-slider-track-color-disabled))", + "description": "Defined in `.spectrum-Slider`.
Used by `.spectrum-Slider.is-disabled .spectrum-Slider-track:before`, `.spectrum-Slider.is-disabled.spectrum-Slider--range .spectrum-Slider-track:not(:first-of-type, :last-of-type):before`.
Defaults to `var(--mod-slider-track-color-disabled, var(--spectrum-slider-track-color-disabled))`, if not set.", + "control": "color" + }, + "highcontrast-slider-track-fill-color-disabled": { + "value": "var(--mod-slider-track-fill-color-disabled, var(--spectrum-slider-track-fill-color-disabled))", + "description": "Defined in `.spectrum-Slider`.
Used by `.spectrum-Slider.is-disabled .spectrum-Slider-fill:before, .spectrum-Slider.is-disabled.spectrum-Slider--filled .spectrum-Slider-track:first-child:before`.
Defaults to `var(--mod-slider-track-fill-color-disabled, var(--spectrum-slider-track-fill-color-disabled))`, if not set.", + "control": "color" + }, + "highcontrast-slider-ramp-track-color-disabled": { + "value": "var(--mod-slider-ramp-track-color-disabled, var(--spectrum-slider-ramp-track-color-disabled))", + "description": "Defined in `.spectrum-Slider`.
Used by `.spectrum-Slider.is-disabled .spectrum-Slider-ramp path`.
Defaults to `var(--mod-slider-ramp-track-color-disabled, var(--spectrum-slider-ramp-track-color-disabled))`, if not set.", + "control": "color" + }, + "highcontrast-slider-tick-mark-color-disabled": { + "value": "var(--mod-slider-tick-mark-color-disabled, var(--spectrum-slider-tick-mark-color-disabled))", + "description": "Defined in `.spectrum-Slider`.
Used by `.spectrum-Slider.is-disabled .spectrum-Slider-tick:after`.
Defaults to `var(--mod-slider-tick-mark-color-disabled, var(--spectrum-slider-tick-mark-color-disabled))`, if not set.", + "control": "color" + } + } } diff --git a/components/slider/stories/slider.stories.js b/components/slider/stories/slider.stories.js index 1d6f5b9d479..e588d77139e 100644 --- a/components/slider/stories/slider.stories.js +++ b/components/slider/stories/slider.stories.js @@ -1,11 +1,13 @@ import { Sizes } from "@spectrum-css/preview/decorators"; import { disableDefaultModes } from "@spectrum-css/preview/modes"; import { isDisabled, isFocused, size } from "@spectrum-css/preview/types"; -import metadata from "../dist/metadata.json"; -import packageJson from "../package.json"; import { SliderGroup } from "./slider.test.js"; import { Template } from "./template.js"; +// Local assets to render the component styles and structure +import metadata from "../dist/metadata.json"; +import packageJson from "../package.json"; + /** * A slider allows users to quickly select a value within a range. They should be used when the upper and lower bounds to the range are invariable. * @@ -146,6 +148,7 @@ export default { }, packageJson, metadata, + cssprops: metadata.modifiers, }, }; diff --git a/components/splitview/dist/metadata.json b/components/splitview/dist/metadata.json index 4902e8e2368..0f2b9c60c67 100644 --- a/components/splitview/dist/metadata.json +++ b/components/splitview/dist/metadata.json @@ -18,12 +18,6 @@ ".spectrum-SplitView-splitter.is-collapsed-end .spectrum-SplitView-gripper:before", ".spectrum-SplitView-splitter.is-collapsed-start .spectrum-SplitView-gripper", ".spectrum-SplitView-splitter.is-collapsed-start .spectrum-SplitView-gripper:before", - ".spectrum-SplitView-splitter.is-draggable.is-active", - ".spectrum-SplitView-splitter.is-draggable.is-active .spectrum-SplitView-gripper", - ".spectrum-SplitView-splitter.is-draggable.is-active .spectrum-SplitView-gripper:before", - ".spectrum-SplitView-splitter.is-draggable.is-hovered", - ".spectrum-SplitView-splitter.is-draggable.is-hovered .spectrum-SplitView-gripper", - ".spectrum-SplitView-splitter.is-draggable.is-hovered .spectrum-SplitView-gripper:before", ".spectrum-SplitView-splitter.is-draggable:active", ".spectrum-SplitView-splitter.is-draggable:active .spectrum-SplitView-gripper", ".spectrum-SplitView-splitter.is-draggable:active .spectrum-SplitView-gripper:before", @@ -33,64 +27,279 @@ ".spectrum-SplitView-splitter.is-draggable:focus-visible .spectrum-SplitView-gripper:before", ".spectrum-SplitView-splitter.is-draggable:hover", ".spectrum-SplitView-splitter.is-draggable:hover .spectrum-SplitView-gripper", - ".spectrum-SplitView-splitter.is-draggable:hover .spectrum-SplitView-gripper:before" - ], - "modifiers": [ - "--mod-splitview-background-color", - "--mod-splitview-content-color", - "--mod-splitview-gripper-border-radius", - "--mod-splitview-gripper-border-width-horizontal", - "--mod-splitview-gripper-border-width-vertical", - "--mod-splitview-gripper-height", - "--mod-splitview-gripper-width", - "--mod-splitview-handle-background-color", - "--mod-splitview-handle-background-color-down", - "--mod-splitview-handle-background-color-focus", - "--mod-splitview-handle-background-color-hover", - "--mod-splitview-handle-width", - "--mod-splitview-vertical-gripper-outer-width", - "--mod-splitview-vertical-gripper-reset", - "--mod-splitview-vertical-gripper-width", - "--mod-splitview-vertical-width" - ], - "component": [ - "--spectrum-splitview-background-color", - "--spectrum-splitview-content-color", - "--spectrum-splitview-gripper-border-radius", - "--spectrum-splitview-gripper-border-width-horizontal", - "--spectrum-splitview-gripper-border-width-vertical", - "--spectrum-splitview-gripper-height", - "--spectrum-splitview-gripper-width", - "--spectrum-splitview-handle-background-color", - "--spectrum-splitview-handle-background-color-down", - "--spectrum-splitview-handle-background-color-focus", - "--spectrum-splitview-handle-background-color-hover", - "--spectrum-splitview-handle-width", - "--spectrum-splitview-vertical-gripper-outer-width", - "--spectrum-splitview-vertical-gripper-reset", - "--spectrum-splitview-vertical-gripper-width", - "--spectrum-splitview-vertical-width" - ], - "global": [ - "--spectrum-body-color", - "--spectrum-border-width-200", - "--spectrum-border-width-400", - "--spectrum-focus-indicator-color", - "--spectrum-gray-200", - "--spectrum-gray-400", - "--spectrum-gray-75", - "--spectrum-gray-800" - ], - "system-theme": [ - "--system-split-view-background-color", - "--system-split-view-gripper-border-radius", - "--system-split-view-handle-background-color" + ".spectrum-SplitView-splitter.is-draggable:hover .spectrum-SplitView-gripper:before", + ".spectrum-SplitView-splitter.is-draggable.is-active", + ".spectrum-SplitView-splitter.is-draggable.is-active .spectrum-SplitView-gripper", + ".spectrum-SplitView-splitter.is-draggable.is-active .spectrum-SplitView-gripper:before", + ".spectrum-SplitView-splitter.is-draggable.is-hovered", + ".spectrum-SplitView-splitter.is-draggable.is-hovered .spectrum-SplitView-gripper", + ".spectrum-SplitView-splitter.is-draggable.is-hovered .spectrum-SplitView-gripper:before" ], - "passthroughs": [], - "high-contrast": [ - "--highcontrast-splitview-handle-background-color", - "--highcontrast-splitview-handle-background-color-down", - "--highcontrast-splitview-handle-background-color-focus", - "--highcontrast-splitview-handle-background-color-hover" - ] + "modifiers": { + "mod-splitview-background-color": { + "value": "var(--spectrum-splitview-background-color)", + "description": "Used by `.spectrum-SplitView-pane`.
Defaults to `var(--spectrum-splitview-background-color)`, if not set.", + "control": "color", + "category": "Modifier" + }, + "mod-splitview-content-color": { + "value": "var(--spectrum-splitview-content-color)", + "description": "Used by `.spectrum-SplitView-pane`.
Defaults to `var(--spectrum-splitview-content-color)`, if not set.", + "control": "color", + "category": "Modifier" + }, + "mod-splitview-gripper-border-radius": { + "value": "var(--spectrum-splitview-gripper-border-radius)", + "description": "Used by `.spectrum-SplitView-gripper`.
Defaults to `var(--spectrum-splitview-gripper-border-radius)`, if not set.", + "control": "text", + "category": "Modifier" + }, + "mod-splitview-handle-background-color": { + "value": "var(--spectrum-splitview-handle-background-color)", + "description": "Used by `.spectrum-SplitView-gripper`, `.spectrum-SplitView-gripper:before`, `.spectrum-SplitView-splitter`.
Defaults to `var(--spectrum-splitview-handle-background-color)`, if not set.", + "control": "color", + "category": "Modifier" + }, + "mod-splitview-gripper-width": { + "value": "var(--spectrum-splitview-gripper-width)", + "description": "Used by `.spectrum-SplitView-gripper`, `.spectrum-SplitView--vertical .spectrum-SplitView-gripper`.
Defaults to `var(--spectrum-splitview-gripper-width)`, if not set.", + "control": "text", + "category": "Modifier" + }, + "mod-splitview-gripper-border-width-vertical": { + "value": "var(--spectrum-splitview-gripper-border-width-vertical)", + "description": "Used by `.spectrum-SplitView-gripper`, `.spectrum-SplitView--vertical .spectrum-SplitView-gripper`.
Defaults to `var(--spectrum-splitview-gripper-border-width-vertical)`, if not set.", + "control": "text", + "category": "Modifier" + }, + "mod-splitview-gripper-height": { + "value": "var(--spectrum-splitview-gripper-height)", + "description": "Used by `.spectrum-SplitView-gripper`, `.spectrum-SplitView--vertical .spectrum-SplitView-gripper`.
Defaults to `var(--spectrum-splitview-gripper-height)`, if not set.", + "control": "text", + "category": "Modifier" + }, + "mod-splitview-gripper-border-width-horizontal": { + "value": "var(--spectrum-splitview-gripper-border-width-horizontal)", + "description": "Used by `.spectrum-SplitView-gripper`, `.spectrum-SplitView--vertical .spectrum-SplitView-gripper`.
Defaults to `var(--spectrum-splitview-gripper-border-width-horizontal)`, if not set.", + "control": "text", + "category": "Modifier" + }, + "mod-splitview-handle-width": { + "value": "var(--spectrum-splitview-handle-width)", + "description": "Used by `.spectrum-SplitView-splitter`, `.spectrum-SplitView-splitter.is-collapsed-end .spectrum-SplitView-gripper:before, .spectrum-SplitView-splitter.is-collapsed-start .spectrum-SplitView-gripper:before`, `.spectrum-SplitView--vertical .spectrum-SplitView-splitter`, `.spectrum-SplitView--vertical .spectrum-SplitView-splitter.is-collapsed-end .spectrum-SplitView-gripper:before, .spectrum-SplitView--vertical .spectrum-SplitView-splitter.is-collapsed-start .spectrum-SplitView-gripper:before`.
Defaults to `var(--spectrum-splitview-handle-width)`, if not set.", + "control": "text", + "category": "Modifier" + }, + "mod-splitview-handle-background-color-hover": { + "value": "var(--spectrum-splitview-handle-background-color-hover)", + "description": "Used by `.spectrum-SplitView-splitter.is-draggable.is-hovered`, `.spectrum-SplitView-splitter.is-draggable.is-hovered .spectrum-SplitView-gripper`, `.spectrum-SplitView-splitter.is-draggable.is-hovered .spectrum-SplitView-gripper:before`, `.spectrum-SplitView-splitter.is-draggable:hover`, `.spectrum-SplitView-splitter.is-draggable:hover .spectrum-SplitView-gripper`, `.spectrum-SplitView-splitter.is-draggable:hover .spectrum-SplitView-gripper:before`.
Defaults to `var(--spectrum-splitview-handle-background-color-hover)`, if not set.", + "control": "color", + "category": "Modifier" + }, + "mod-splitview-handle-background-color-down": { + "value": "var(--spectrum-splitview-handle-background-color-down)", + "description": "Used by `.spectrum-SplitView-splitter.is-draggable.is-active, .spectrum-SplitView-splitter.is-draggable:active`, `.spectrum-SplitView-splitter.is-draggable.is-active .spectrum-SplitView-gripper, .spectrum-SplitView-splitter.is-draggable:active .spectrum-SplitView-gripper`, `.spectrum-SplitView-splitter.is-draggable.is-active .spectrum-SplitView-gripper:before, .spectrum-SplitView-splitter.is-draggable:active .spectrum-SplitView-gripper:before`.
Defaults to `var(--spectrum-splitview-handle-background-color-down)`, if not set.", + "control": "color", + "category": "Modifier" + }, + "mod-splitview-handle-background-color-focus": { + "value": "var(--spectrum-splitview-handle-background-color-focus)", + "description": "Used by `.spectrum-SplitView-splitter.is-draggable:focus-visible`, `.spectrum-SplitView-splitter.is-draggable:focus-visible .spectrum-SplitView-gripper`, `.spectrum-SplitView-splitter.is-draggable:focus-visible .spectrum-SplitView-gripper:before`.
Defaults to `var(--spectrum-splitview-handle-background-color-focus)`, if not set.", + "control": "color", + "category": "Modifier" + }, + "mod-splitview-vertical-width": { + "value": "var(--spectrum-splitview-vertical-width)", + "description": "Used by `.spectrum-SplitView--vertical .spectrum-SplitView-pane`, `.spectrum-SplitView--vertical .spectrum-SplitView-splitter`.
Defaults to `var(--spectrum-splitview-vertical-width)`, if not set.", + "control": "text", + "category": "Modifier" + }, + "mod-splitview-vertical-gripper-width": { + "value": "var(--spectrum-splitview-vertical-gripper-width)", + "description": "Used by `.spectrum-SplitView--vertical .spectrum-SplitView-gripper`, `.spectrum-SplitView--vertical .spectrum-SplitView-splitter.is-collapsed-end .spectrum-SplitView-gripper, .spectrum-SplitView--vertical .spectrum-SplitView-splitter.is-collapsed-start .spectrum-SplitView-gripper`, `.spectrum-SplitView--vertical .spectrum-SplitView-splitter.is-collapsed-end .spectrum-SplitView-gripper:before, .spectrum-SplitView--vertical .spectrum-SplitView-splitter.is-collapsed-start .spectrum-SplitView-gripper:before`.
Defaults to `var(--spectrum-splitview-vertical-gripper-width)`, if not set.", + "control": "text", + "category": "Modifier" + }, + "mod-splitview-vertical-gripper-reset": { + "value": "var(--spectrum-splitview-vertical-gripper-reset)", + "description": "Used by `.spectrum-SplitView--vertical .spectrum-SplitView-splitter.is-collapsed-end .spectrum-SplitView-gripper:before, .spectrum-SplitView--vertical .spectrum-SplitView-splitter.is-collapsed-start .spectrum-SplitView-gripper:before`, `.spectrum-SplitView--vertical .spectrum-SplitView-splitter.is-collapsed-start .spectrum-SplitView-gripper`, `.spectrum-SplitView--vertical .spectrum-SplitView-splitter.is-collapsed-end .spectrum-SplitView-gripper`.
Defaults to `var(--spectrum-splitview-vertical-gripper-reset)`, if not set.", + "control": "text", + "category": "Modifier" + }, + "mod-splitview-vertical-gripper-outer-width": { + "value": "var(--spectrum-splitview-vertical-gripper-outer-width)", + "description": "Used by `.spectrum-SplitView--vertical .spectrum-SplitView-splitter.is-collapsed-end .spectrum-SplitView-gripper:before, .spectrum-SplitView--vertical .spectrum-SplitView-splitter.is-collapsed-start .spectrum-SplitView-gripper:before`.
Defaults to `var(--spectrum-splitview-vertical-gripper-outer-width)`, if not set.", + "control": "text", + "category": "Modifier" + } + }, + "component": { + "spectrum-splitview-vertical-width": { + "description": "Defined in `.spectrum-SplitView`.
Used by `.spectrum-SplitView--vertical .spectrum-SplitView-pane`, `.spectrum-SplitView--vertical .spectrum-SplitView-splitter`.", + "control": "text", + "category": "Component" + }, + "spectrum-splitview-vertical-gripper-width": { + "description": "Defined in `.spectrum-SplitView`.
Used by `.spectrum-SplitView--vertical .spectrum-SplitView-gripper`, `.spectrum-SplitView--vertical .spectrum-SplitView-splitter.is-collapsed-end .spectrum-SplitView-gripper, .spectrum-SplitView--vertical .spectrum-SplitView-splitter.is-collapsed-start .spectrum-SplitView-gripper`, `.spectrum-SplitView--vertical .spectrum-SplitView-splitter.is-collapsed-end .spectrum-SplitView-gripper:before, .spectrum-SplitView--vertical .spectrum-SplitView-splitter.is-collapsed-start .spectrum-SplitView-gripper:before`.", + "control": "text", + "category": "Component" + }, + "spectrum-splitview-vertical-gripper-outer-width": { + "description": "Defined in `.spectrum-SplitView`.
Used by `.spectrum-SplitView--vertical .spectrum-SplitView-splitter.is-collapsed-end .spectrum-SplitView-gripper:before, .spectrum-SplitView--vertical .spectrum-SplitView-splitter.is-collapsed-start .spectrum-SplitView-gripper:before`.", + "control": "text", + "category": "Component" + }, + "spectrum-splitview-vertical-gripper-reset": { + "description": "Defined in `.spectrum-SplitView`.
Used by `.spectrum-SplitView--vertical .spectrum-SplitView-splitter.is-collapsed-end .spectrum-SplitView-gripper:before, .spectrum-SplitView--vertical .spectrum-SplitView-splitter.is-collapsed-start .spectrum-SplitView-gripper:before`, `.spectrum-SplitView--vertical .spectrum-SplitView-splitter.is-collapsed-start .spectrum-SplitView-gripper`, `.spectrum-SplitView--vertical .spectrum-SplitView-splitter.is-collapsed-end .spectrum-SplitView-gripper`.", + "control": "text", + "category": "Component" + }, + "spectrum-splitview-content-color": { + "description": "Defined in `.spectrum-SplitView`.
Used by `.spectrum-SplitView-pane`.", + "control": "color", + "category": "Component" + }, + "spectrum-splitview-handle-background-color-hover": { + "description": "Defined in `.spectrum-SplitView`.
Used by `.spectrum-SplitView-splitter.is-draggable.is-hovered`, `.spectrum-SplitView-splitter.is-draggable.is-hovered .spectrum-SplitView-gripper`, `.spectrum-SplitView-splitter.is-draggable.is-hovered .spectrum-SplitView-gripper:before`, `.spectrum-SplitView-splitter.is-draggable:hover`, `.spectrum-SplitView-splitter.is-draggable:hover .spectrum-SplitView-gripper`, `.spectrum-SplitView-splitter.is-draggable:hover .spectrum-SplitView-gripper:before`.", + "control": "color", + "category": "Component" + }, + "spectrum-splitview-handle-background-color-down": { + "description": "Defined in `.spectrum-SplitView`.
Used by `.spectrum-SplitView-splitter.is-draggable.is-active, .spectrum-SplitView-splitter.is-draggable:active`, `.spectrum-SplitView-splitter.is-draggable.is-active .spectrum-SplitView-gripper, .spectrum-SplitView-splitter.is-draggable:active .spectrum-SplitView-gripper`, `.spectrum-SplitView-splitter.is-draggable.is-active .spectrum-SplitView-gripper:before, .spectrum-SplitView-splitter.is-draggable:active .spectrum-SplitView-gripper:before`.", + "control": "color", + "category": "Component" + }, + "spectrum-splitview-handle-background-color-focus": { + "description": "Defined in `.spectrum-SplitView`.
Used by `.spectrum-SplitView-splitter.is-draggable:focus-visible`, `.spectrum-SplitView-splitter.is-draggable:focus-visible .spectrum-SplitView-gripper`, `.spectrum-SplitView-splitter.is-draggable:focus-visible .spectrum-SplitView-gripper:before`.", + "control": "color", + "category": "Component" + }, + "spectrum-splitview-handle-width": { + "description": "Defined in `.spectrum-SplitView`.
Used by `.spectrum-SplitView-splitter`, `.spectrum-SplitView-splitter.is-collapsed-end .spectrum-SplitView-gripper:before, .spectrum-SplitView-splitter.is-collapsed-start .spectrum-SplitView-gripper:before`, `.spectrum-SplitView--vertical .spectrum-SplitView-splitter`, `.spectrum-SplitView--vertical .spectrum-SplitView-splitter.is-collapsed-end .spectrum-SplitView-gripper:before, .spectrum-SplitView--vertical .spectrum-SplitView-splitter.is-collapsed-start .spectrum-SplitView-gripper:before`.", + "control": "text", + "category": "Component" + }, + "spectrum-splitview-gripper-width": { + "description": "Defined in `.spectrum-SplitView`.
Used by `.spectrum-SplitView-gripper`, `.spectrum-SplitView--vertical .spectrum-SplitView-gripper`.", + "control": "text", + "category": "Component" + }, + "spectrum-splitview-gripper-height": { + "description": "Defined in `.spectrum-SplitView`.
Used by `.spectrum-SplitView-gripper`, `.spectrum-SplitView--vertical .spectrum-SplitView-gripper`.", + "control": "text", + "category": "Component" + }, + "spectrum-splitview-gripper-border-width-horizontal": { + "description": "Defined in `.spectrum-SplitView`.
Used by `.spectrum-SplitView-gripper`, `.spectrum-SplitView--vertical .spectrum-SplitView-gripper`.", + "control": "text", + "category": "Component" + }, + "spectrum-splitview-gripper-border-width-vertical": { + "description": "Defined in `.spectrum-SplitView`.
Used by `.spectrum-SplitView-gripper`, `.spectrum-SplitView--vertical .spectrum-SplitView-gripper`.", + "control": "text", + "category": "Component" + }, + "spectrum-splitview-background-color": { + "description": "Defined in `.spectrum-SplitView`.
Used by `.spectrum-SplitView-pane`.", + "control": "color", + "category": "Component" + }, + "spectrum-splitview-gripper-border-radius": { + "description": "Defined in `.spectrum-SplitView`.
Used by `.spectrum-SplitView-gripper`.", + "control": "text", + "category": "Component" + }, + "spectrum-splitview-handle-background-color": { + "description": "Defined in `.spectrum-SplitView`.
Used by `.spectrum-SplitView-gripper`, `.spectrum-SplitView-gripper:before`, `.spectrum-SplitView-splitter`.", + "control": "color", + "category": "Component" + } + }, + "global": { + "spectrum-gray-75": { + "value": "light-dark(rgb(243, 243, 243), rgb(34, 34, 34))", + "description": "Used by `--system-split-view-background-color`.", + "control": "text", + "category": "Global" + }, + "spectrum-gray-200": { + "value": "light-dark(rgb(225, 225, 225), rgb(50, 50, 50))", + "description": "Used by `--system-split-view-handle-background-color`.", + "control": "text", + "category": "Global" + }, + "spectrum-body-color": { + "value": "var(--spectrum-gray-800)", + "description": "Used by `--spectrum-splitview-content-color`.", + "control": "color", + "category": "Global" + }, + "spectrum-gray-400": { + "value": "light-dark(rgb(198, 198, 198), rgb(68, 68, 68))", + "description": "Used by `--spectrum-splitview-handle-background-color-hover`.", + "control": "text", + "category": "Global" + }, + "spectrum-gray-800": { + "value": "light-dark(rgb(41, 41, 41), rgb(219, 219, 219))", + "description": "Used by `--spectrum-splitview-handle-background-color-down`.", + "control": "text", + "category": "Global" + }, + "spectrum-focus-indicator-color": { + "value": "var(--spectrum-blue-800)", + "description": "Used by `--spectrum-splitview-handle-background-color-focus`.", + "control": "color", + "category": "Global" + }, + "spectrum-border-width-200": { + "value": "2px", + "description": "Used by `--spectrum-splitview-handle-width`.", + "control": "text", + "category": "Global" + }, + "spectrum-border-width-400": { + "value": "4px", + "description": "Used by `--spectrum-splitview-gripper-width`, `--spectrum-splitview-gripper-border-width-vertical`.", + "control": "text", + "category": "Global" + } + }, + "system-theme": { + "system-split-view-background-color": { + "description": "Defined in `.spectrum`.
Used by `--spectrum-splitview-background-color`.", + "control": "color" + }, + "system-split-view-handle-background-color": { + "description": "Defined in `.spectrum`.
Used by `--spectrum-splitview-handle-background-color`.", + "control": "color" + }, + "system-split-view-gripper-border-radius": { + "description": "Defined in `.spectrum`.
Used by `--spectrum-splitview-gripper-border-radius`.", + "control": "text" + } + }, + "passthroughs": {}, + "high-contrast": { + "highcontrast-splitview-handle-background-color": { + "value": "var(--mod-splitview-handle-background-color, var(--spectrum-splitview-handle-background-color))", + "description": "Defined in `.spectrum-SplitView`.
Used by `.spectrum-SplitView-gripper`, `.spectrum-SplitView-gripper:before`, `.spectrum-SplitView-splitter`.
Defaults to `var(--mod-splitview-handle-background-color, var(--spectrum-splitview-handle-background-color))`, if not set.", + "control": "color" + }, + "highcontrast-splitview-handle-background-color-hover": { + "value": "var(--mod-splitview-handle-background-color-hover, var(--spectrum-splitview-handle-background-color-hover))", + "description": "Defined in `.spectrum-SplitView`.
Used by `.spectrum-SplitView-splitter.is-draggable.is-hovered`, `.spectrum-SplitView-splitter.is-draggable.is-hovered .spectrum-SplitView-gripper`, `.spectrum-SplitView-splitter.is-draggable.is-hovered .spectrum-SplitView-gripper:before`, `.spectrum-SplitView-splitter.is-draggable:hover`, `.spectrum-SplitView-splitter.is-draggable:hover .spectrum-SplitView-gripper`, `.spectrum-SplitView-splitter.is-draggable:hover .spectrum-SplitView-gripper:before`.
Defaults to `var(--mod-splitview-handle-background-color-hover, var(--spectrum-splitview-handle-background-color-hover))`, if not set.", + "control": "color" + }, + "highcontrast-splitview-handle-background-color-down": { + "value": "var(--mod-splitview-handle-background-color-down, var(--spectrum-splitview-handle-background-color-down))", + "description": "Defined in `.spectrum-SplitView`.
Used by `.spectrum-SplitView-splitter.is-draggable.is-active, .spectrum-SplitView-splitter.is-draggable:active`, `.spectrum-SplitView-splitter.is-draggable.is-active .spectrum-SplitView-gripper, .spectrum-SplitView-splitter.is-draggable:active .spectrum-SplitView-gripper`, `.spectrum-SplitView-splitter.is-draggable.is-active .spectrum-SplitView-gripper:before, .spectrum-SplitView-splitter.is-draggable:active .spectrum-SplitView-gripper:before`.
Defaults to `var(--mod-splitview-handle-background-color-down, var(--spectrum-splitview-handle-background-color-down))`, if not set.", + "control": "color" + }, + "highcontrast-splitview-handle-background-color-focus": { + "value": "var(--mod-splitview-handle-background-color-focus, var(--spectrum-splitview-handle-background-color-focus))", + "description": "Defined in `.spectrum-SplitView`.
Used by `.spectrum-SplitView-splitter.is-draggable:focus-visible`, `.spectrum-SplitView-splitter.is-draggable:focus-visible .spectrum-SplitView-gripper`, `.spectrum-SplitView-splitter.is-draggable:focus-visible .spectrum-SplitView-gripper:before`.
Defaults to `var(--mod-splitview-handle-background-color-focus, var(--spectrum-splitview-handle-background-color-focus))`, if not set.", + "control": "color" + } + } } diff --git a/components/splitview/stories/splitview.stories.js b/components/splitview/stories/splitview.stories.js index 1c615f12b97..a3c2e1da1f7 100644 --- a/components/splitview/stories/splitview.stories.js +++ b/components/splitview/stories/splitview.stories.js @@ -1,10 +1,12 @@ import { disableDefaultModes } from "@spectrum-css/preview/modes"; import { isFocused } from "@spectrum-css/preview/types"; -import metadata from "../dist/metadata.json"; -import packageJson from "../package.json"; import { SplitViewGroup } from "./splitview.test.js"; import { Template } from "./template.js"; +// Local assets to render the component styles and structure +import metadata from "../dist/metadata.json"; +import packageJson from "../package.json"; + export default { title: "Split view", component: "SplitView", @@ -81,6 +83,7 @@ export default { parameters: { packageJson, metadata, + cssprops: metadata.modifiers, }, }; diff --git a/components/statuslight/dist/metadata.json b/components/statuslight/dist/metadata.json index 7c7c6a7587f..fa04234d6c0 100644 --- a/components/statuslight/dist/metadata.json +++ b/components/statuslight/dist/metadata.json @@ -32,138 +32,721 @@ ".spectrum-StatusLight:lang(ko)", ".spectrum-StatusLight:lang(zh)" ], - "modifiers": [ - "--mod-statuslight-border-width", - "--mod-statuslight-content-color-default", - "--mod-statuslight-corner-radius", - "--mod-statuslight-dot-size", - "--mod-statuslight-font-size", - "--mod-statuslight-font-weight", - "--mod-statuslight-height", - "--mod-statuslight-line-height", - "--mod-statuslight-line-height-cjk", - "--mod-statuslight-nonsemantic-blue-color", - "--mod-statuslight-nonsemantic-celery-color", - "--mod-statuslight-nonsemantic-chartreuse-color", - "--mod-statuslight-nonsemantic-cyan-color", - "--mod-statuslight-nonsemantic-fuchsia-color", - "--mod-statuslight-nonsemantic-gray-color", - "--mod-statuslight-nonsemantic-green-color", - "--mod-statuslight-nonsemantic-indigo-color", - "--mod-statuslight-nonsemantic-magenta-color", - "--mod-statuslight-nonsemantic-orange-color", - "--mod-statuslight-nonsemantic-purple-color", - "--mod-statuslight-nonsemantic-red-color", - "--mod-statuslight-nonsemantic-seafoam-color", - "--mod-statuslight-nonsemantic-yellow-color", - "--mod-statuslight-semantic-accent-color", - "--mod-statuslight-semantic-info-color", - "--mod-statuslight-semantic-negative-color", - "--mod-statuslight-semantic-neutral-color", - "--mod-statuslight-semantic-notice-color", - "--mod-statuslight-semantic-positive-color", - "--mod-statuslight-spacing-bottom-to-label", - "--mod-statuslight-spacing-dot-to-label", - "--mod-statuslight-spacing-top-to-dot", - "--mod-statuslight-spacing-top-to-label", - "--mod-statuslight-subdued-content-color-default" - ], - "component": [ - "--spectrum-status-light-dot-size-extra-large", - "--spectrum-status-light-dot-size-large", - "--spectrum-status-light-dot-size-medium", - "--spectrum-status-light-dot-size-small", - "--spectrum-status-light-top-to-dot-extra-large", - "--spectrum-status-light-top-to-dot-large", - "--spectrum-status-light-top-to-dot-medium", - "--spectrum-status-light-top-to-dot-small", - "--spectrum-statuslight-border-width", - "--spectrum-statuslight-content-color-default", - "--spectrum-statuslight-corner-radius", - "--spectrum-statuslight-dot-size", - "--spectrum-statuslight-font-size", - "--spectrum-statuslight-font-weight", - "--spectrum-statuslight-height", - "--spectrum-statuslight-line-height", - "--spectrum-statuslight-line-height-cjk", - "--spectrum-statuslight-nonsemantic-blue-color", - "--spectrum-statuslight-nonsemantic-celery-color", - "--spectrum-statuslight-nonsemantic-chartreuse-color", - "--spectrum-statuslight-nonsemantic-cyan-color", - "--spectrum-statuslight-nonsemantic-fuchsia-color", - "--spectrum-statuslight-nonsemantic-gray-color", - "--spectrum-statuslight-nonsemantic-green-color", - "--spectrum-statuslight-nonsemantic-indigo-color", - "--spectrum-statuslight-nonsemantic-magenta-color", - "--spectrum-statuslight-nonsemantic-orange-color", - "--spectrum-statuslight-nonsemantic-purple-color", - "--spectrum-statuslight-nonsemantic-red-color", - "--spectrum-statuslight-nonsemantic-seafoam-color", - "--spectrum-statuslight-nonsemantic-yellow-color", - "--spectrum-statuslight-semantic-accent-color", - "--spectrum-statuslight-semantic-info-color", - "--spectrum-statuslight-semantic-negative-color", - "--spectrum-statuslight-semantic-neutral-color", - "--spectrum-statuslight-semantic-notice-color", - "--spectrum-statuslight-semantic-positive-color", - "--spectrum-statuslight-spacing-bottom-to-label", - "--spectrum-statuslight-spacing-computed-top-to-dot", - "--spectrum-statuslight-spacing-dot-to-label", - "--spectrum-statuslight-spacing-top-to-dot", - "--spectrum-statuslight-spacing-top-to-label", - "--spectrum-statuslight-subdued-content-color-default" - ], - "global": [ - "--spectrum-accent-visual-color", - "--spectrum-blue-visual-color", - "--spectrum-border-width-100", - "--spectrum-celery-visual-color", - "--spectrum-chartreuse-visual-color", - "--spectrum-cjk-line-height-100", - "--spectrum-component-bottom-to-text-100", - "--spectrum-component-bottom-to-text-200", - "--spectrum-component-bottom-to-text-300", - "--spectrum-component-bottom-to-text-75", - "--spectrum-component-height-100", - "--spectrum-component-height-200", - "--spectrum-component-height-300", - "--spectrum-component-height-75", - "--spectrum-component-top-to-text-100", - "--spectrum-component-top-to-text-200", - "--spectrum-component-top-to-text-300", - "--spectrum-component-top-to-text-75", - "--spectrum-cyan-visual-color", - "--spectrum-font-size-100", - "--spectrum-font-size-200", - "--spectrum-font-size-300", - "--spectrum-font-size-75", - "--spectrum-fuchsia-visual-color", - "--spectrum-gray-visual-color", - "--spectrum-green-visual-color", - "--spectrum-indigo-visual-color", - "--spectrum-informative-visual-color", - "--spectrum-line-height-100", - "--spectrum-magenta-visual-color", - "--spectrum-negative-visual-color", - "--spectrum-neutral-content-color-default", - "--spectrum-neutral-subdued-content-color-default", - "--spectrum-neutral-visual-color", - "--spectrum-notice-visual-color", - "--spectrum-orange-visual-color", - "--spectrum-positive-visual-color", - "--spectrum-purple-visual-color", - "--spectrum-red-visual-color", - "--spectrum-seafoam-visual-color", - "--spectrum-text-to-visual-100", - "--spectrum-text-to-visual-200", - "--spectrum-text-to-visual-300", - "--spectrum-text-to-visual-75", - "--spectrum-yellow-visual-color" - ], - "system-theme": [], - "passthroughs": [], - "high-contrast": [ - "--highcontrast-statuslight-content-color-default", - "--highcontrast-statuslight-subdued-content-color-default" - ] + "modifiers": { + "mod-statuslight-height": { + "value": "var(--spectrum-statuslight-height)", + "description": "Used by `.spectrum-StatusLight`.
Defaults to `var(--spectrum-statuslight-height)`, if not set.", + "control": "text", + "category": "Modifier" + }, + "mod-statuslight-spacing-top-to-label": { + "value": "var(--spectrum-statuslight-spacing-top-to-label)", + "description": "Used by `.spectrum-StatusLight`, `--spectrum-statuslight-spacing-computed-top-to-dot`.
Defaults to `var(--spectrum-statuslight-spacing-top-to-label)`, if not set.", + "control": "text", + "category": "Modifier" + }, + "mod-statuslight-spacing-bottom-to-label": { + "value": "var(--spectrum-statuslight-spacing-bottom-to-label)", + "description": "Used by `.spectrum-StatusLight`.
Defaults to `var(--spectrum-statuslight-spacing-bottom-to-label)`, if not set.", + "control": "text", + "category": "Modifier" + }, + "mod-statuslight-font-size": { + "value": "var(--spectrum-statuslight-font-size)", + "description": "Used by `.spectrum-StatusLight`.
Defaults to `var(--spectrum-statuslight-font-size)`, if not set.", + "control": "text", + "category": "Modifier" + }, + "mod-statuslight-font-weight": { + "value": "var(--spectrum-statuslight-font-weight)", + "description": "Used by `.spectrum-StatusLight`.
Defaults to `var(--spectrum-statuslight-font-weight)`, if not set.", + "control": "text", + "category": "Modifier" + }, + "mod-statuslight-line-height": { + "value": "var(--spectrum-statuslight-line-height)", + "description": "Used by `.spectrum-StatusLight`.
Defaults to `var(--spectrum-statuslight-line-height)`, if not set.", + "control": "text", + "category": "Modifier" + }, + "mod-statuslight-content-color-default": { + "value": "var(--spectrum-statuslight-content-color-default)", + "description": "Used by `.spectrum-StatusLight`.
Defaults to `var(--spectrum-statuslight-content-color-default)`, if not set.", + "control": "color", + "category": "Modifier" + }, + "mod-statuslight-line-height-cjk": { + "value": "var(--spectrum-statuslight-line-height-cjk)", + "description": "Used by `.spectrum-StatusLight:lang(ja), .spectrum-StatusLight:lang(ko), .spectrum-StatusLight:lang(zh)`.
Defaults to `var(--spectrum-statuslight-line-height-cjk)`, if not set.", + "control": "text", + "category": "Modifier" + }, + "mod-statuslight-spacing-top-to-dot": { + "value": "var(--spectrum-statuslight-spacing-top-to-dot)", + "description": "Used by `--spectrum-statuslight-spacing-computed-top-to-dot`.
Defaults to `var(--spectrum-statuslight-spacing-top-to-dot)`, if not set.", + "control": "text", + "category": "Modifier" + }, + "mod-statuslight-dot-size": { + "value": "var(--spectrum-statuslight-dot-size)", + "description": "Used by `.spectrum-StatusLight:before`.
Defaults to `var(--spectrum-statuslight-dot-size)`, if not set.", + "control": "text", + "category": "Modifier" + }, + "mod-statuslight-corner-radius": { + "value": "var(--spectrum-statuslight-corner-radius)", + "description": "Used by `.spectrum-StatusLight:before`.
Defaults to `var(--spectrum-statuslight-corner-radius)`, if not set.", + "control": "text", + "category": "Modifier" + }, + "mod-statuslight-spacing-dot-to-label": { + "value": "var(--spectrum-statuslight-spacing-dot-to-label)", + "description": "Used by `.spectrum-StatusLight:before`.
Defaults to `var(--spectrum-statuslight-spacing-dot-to-label)`, if not set.", + "control": "text", + "category": "Modifier" + }, + "mod-statuslight-subdued-content-color-default": { + "value": "var(--spectrum-statuslight-subdued-content-color-default)", + "description": "Used by `.spectrum-StatusLight--neutral`.
Defaults to `var(--spectrum-statuslight-subdued-content-color-default)`, if not set.", + "control": "color", + "category": "Modifier" + }, + "mod-statuslight-semantic-neutral-color": { + "value": "var(--spectrum-statuslight-semantic-neutral-color)", + "description": "Used by `.spectrum-StatusLight--neutral:before`.
Defaults to `var(--spectrum-statuslight-semantic-neutral-color)`, if not set.", + "control": "color", + "category": "Modifier" + }, + "mod-statuslight-semantic-accent-color": { + "value": "var(--spectrum-statuslight-semantic-accent-color)", + "description": "Used by `.spectrum-StatusLight--accent:before`.
Defaults to `var(--spectrum-statuslight-semantic-accent-color)`, if not set.", + "control": "color", + "category": "Modifier" + }, + "mod-statuslight-semantic-info-color": { + "value": "var(--spectrum-statuslight-semantic-info-color)", + "description": "Used by `.spectrum-StatusLight--info:before`.
Defaults to `var(--spectrum-statuslight-semantic-info-color)`, if not set.", + "control": "color", + "category": "Modifier" + }, + "mod-statuslight-semantic-negative-color": { + "value": "var(--spectrum-statuslight-semantic-negative-color)", + "description": "Used by `.spectrum-StatusLight--negative:before`.
Defaults to `var(--spectrum-statuslight-semantic-negative-color)`, if not set.", + "control": "color", + "category": "Modifier" + }, + "mod-statuslight-semantic-notice-color": { + "value": "var(--spectrum-statuslight-semantic-notice-color)", + "description": "Used by `.spectrum-StatusLight--notice:before`.
Defaults to `var(--spectrum-statuslight-semantic-notice-color)`, if not set.", + "control": "color", + "category": "Modifier" + }, + "mod-statuslight-semantic-positive-color": { + "value": "var(--spectrum-statuslight-semantic-positive-color)", + "description": "Used by `.spectrum-StatusLight--positive:before`.
Defaults to `var(--spectrum-statuslight-semantic-positive-color)`, if not set.", + "control": "color", + "category": "Modifier" + }, + "mod-statuslight-nonsemantic-gray-color": { + "value": "var(--spectrum-statuslight-nonsemantic-gray-color)", + "description": "Used by `.spectrum-StatusLight--gray:before`.
Defaults to `var(--spectrum-statuslight-nonsemantic-gray-color)`, if not set.", + "control": "color", + "category": "Modifier" + }, + "mod-statuslight-nonsemantic-red-color": { + "value": "var(--spectrum-statuslight-nonsemantic-red-color)", + "description": "Used by `.spectrum-StatusLight--red:before`.
Defaults to `var(--spectrum-statuslight-nonsemantic-red-color)`, if not set.", + "control": "color", + "category": "Modifier" + }, + "mod-statuslight-nonsemantic-orange-color": { + "value": "var(--spectrum-statuslight-nonsemantic-orange-color)", + "description": "Used by `.spectrum-StatusLight--orange:before`.
Defaults to `var(--spectrum-statuslight-nonsemantic-orange-color)`, if not set.", + "control": "color", + "category": "Modifier" + }, + "mod-statuslight-nonsemantic-yellow-color": { + "value": "var(--spectrum-statuslight-nonsemantic-yellow-color)", + "description": "Used by `.spectrum-StatusLight--yellow:before`.
Defaults to `var(--spectrum-statuslight-nonsemantic-yellow-color)`, if not set.", + "control": "color", + "category": "Modifier" + }, + "mod-statuslight-nonsemantic-chartreuse-color": { + "value": "var(--spectrum-statuslight-nonsemantic-chartreuse-color)", + "description": "Used by `.spectrum-StatusLight--chartreuse:before`.
Defaults to `var(--spectrum-statuslight-nonsemantic-chartreuse-color)`, if not set.", + "control": "color", + "category": "Modifier" + }, + "mod-statuslight-nonsemantic-celery-color": { + "value": "var(--spectrum-statuslight-nonsemantic-celery-color)", + "description": "Used by `.spectrum-StatusLight--celery:before`.
Defaults to `var(--spectrum-statuslight-nonsemantic-celery-color)`, if not set.", + "control": "color", + "category": "Modifier" + }, + "mod-statuslight-nonsemantic-green-color": { + "value": "var(--spectrum-statuslight-nonsemantic-green-color)", + "description": "Used by `.spectrum-StatusLight--green:before`.
Defaults to `var(--spectrum-statuslight-nonsemantic-green-color)`, if not set.", + "control": "color", + "category": "Modifier" + }, + "mod-statuslight-nonsemantic-seafoam-color": { + "value": "var(--spectrum-statuslight-nonsemantic-seafoam-color)", + "description": "Used by `.spectrum-StatusLight--seafoam:before`.
Defaults to `var(--spectrum-statuslight-nonsemantic-seafoam-color)`, if not set.", + "control": "color", + "category": "Modifier" + }, + "mod-statuslight-nonsemantic-cyan-color": { + "value": "var(--spectrum-statuslight-nonsemantic-cyan-color)", + "description": "Used by `.spectrum-StatusLight--cyan:before`.
Defaults to `var(--spectrum-statuslight-nonsemantic-cyan-color)`, if not set.", + "control": "color", + "category": "Modifier" + }, + "mod-statuslight-nonsemantic-blue-color": { + "value": "var(--spectrum-statuslight-nonsemantic-blue-color)", + "description": "Used by `.spectrum-StatusLight--blue:before`.
Defaults to `var(--spectrum-statuslight-nonsemantic-blue-color)`, if not set.", + "control": "color", + "category": "Modifier" + }, + "mod-statuslight-nonsemantic-indigo-color": { + "value": "var(--spectrum-statuslight-nonsemantic-indigo-color)", + "description": "Used by `.spectrum-StatusLight--indigo:before`.
Defaults to `var(--spectrum-statuslight-nonsemantic-indigo-color)`, if not set.", + "control": "color", + "category": "Modifier" + }, + "mod-statuslight-nonsemantic-purple-color": { + "value": "var(--spectrum-statuslight-nonsemantic-purple-color)", + "description": "Used by `.spectrum-StatusLight--purple:before`.
Defaults to `var(--spectrum-statuslight-nonsemantic-purple-color)`, if not set.", + "control": "color", + "category": "Modifier" + }, + "mod-statuslight-nonsemantic-fuchsia-color": { + "value": "var(--spectrum-statuslight-nonsemantic-fuchsia-color)", + "description": "Used by `.spectrum-StatusLight--fuchsia:before`.
Defaults to `var(--spectrum-statuslight-nonsemantic-fuchsia-color)`, if not set.", + "control": "color", + "category": "Modifier" + }, + "mod-statuslight-nonsemantic-magenta-color": { + "value": "var(--spectrum-statuslight-nonsemantic-magenta-color)", + "description": "Used by `.spectrum-StatusLight--magenta:before`.
Defaults to `var(--spectrum-statuslight-nonsemantic-magenta-color)`, if not set.", + "control": "color", + "category": "Modifier" + }, + "mod-statuslight-border-width": { + "value": "var(--spectrum-statuslight-border-width)", + "description": "Used by `.spectrum-StatusLight:before`.
Defaults to `var(--spectrum-statuslight-border-width)`, if not set.", + "control": "text", + "category": "Modifier" + } + }, + "component": { + "spectrum-statuslight-height": { + "description": "Defined in `.spectrum-StatusLight, .spectrum-StatusLight--sizeM`, `.spectrum-StatusLight--sizeS`, `.spectrum-StatusLight--sizeL`, `.spectrum-StatusLight--sizeXL`.
Used by `.spectrum-StatusLight`.", + "control": "text", + "category": "Component" + }, + "spectrum-statuslight-dot-size": { + "description": "Defined in `.spectrum-StatusLight, .spectrum-StatusLight--sizeM`, `.spectrum-StatusLight--sizeS`, `.spectrum-StatusLight--sizeL`, `.spectrum-StatusLight--sizeXL`.
Used by `.spectrum-StatusLight:before`.", + "control": "text", + "category": "Component" + }, + "spectrum-status-light-dot-size-medium": { + "value": "8px", + "description": "Used by `--spectrum-statuslight-dot-size`.", + "control": "text", + "category": "Component" + }, + "spectrum-statuslight-font-size": { + "description": "Defined in `.spectrum-StatusLight, .spectrum-StatusLight--sizeM`, `.spectrum-StatusLight--sizeS`, `.spectrum-StatusLight--sizeL`, `.spectrum-StatusLight--sizeXL`.
Used by `.spectrum-StatusLight`.", + "control": "text", + "category": "Component" + }, + "spectrum-statuslight-spacing-dot-to-label": { + "description": "Defined in `.spectrum-StatusLight, .spectrum-StatusLight--sizeM`, `.spectrum-StatusLight--sizeS`, `.spectrum-StatusLight--sizeL`, `.spectrum-StatusLight--sizeXL`.
Used by `.spectrum-StatusLight:before`.", + "control": "text", + "category": "Component" + }, + "spectrum-statuslight-spacing-top-to-dot": { + "description": "Defined in `.spectrum-StatusLight, .spectrum-StatusLight--sizeM`, `.spectrum-StatusLight--sizeS`, `.spectrum-StatusLight--sizeL`, `.spectrum-StatusLight--sizeXL`.
Used by `--spectrum-statuslight-spacing-computed-top-to-dot`.", + "control": "text", + "category": "Component" + }, + "spectrum-status-light-top-to-dot-medium": { + "value": "12px", + "description": "Used by `--spectrum-statuslight-spacing-top-to-dot`.", + "control": "text", + "category": "Component" + }, + "spectrum-statuslight-spacing-top-to-label": { + "description": "Defined in `.spectrum-StatusLight, .spectrum-StatusLight--sizeM`, `.spectrum-StatusLight--sizeS`, `.spectrum-StatusLight--sizeL`, `.spectrum-StatusLight--sizeXL`.
Used by `.spectrum-StatusLight`, `--spectrum-statuslight-spacing-computed-top-to-dot`.", + "control": "text", + "category": "Component" + }, + "spectrum-statuslight-spacing-bottom-to-label": { + "description": "Defined in `.spectrum-StatusLight, .spectrum-StatusLight--sizeM`, `.spectrum-StatusLight--sizeS`, `.spectrum-StatusLight--sizeL`, `.spectrum-StatusLight--sizeXL`.
Used by `.spectrum-StatusLight`.", + "control": "text", + "category": "Component" + }, + "spectrum-status-light-dot-size-small": { + "value": "8px", + "description": "Used by `--spectrum-statuslight-dot-size`.", + "control": "text", + "category": "Component" + }, + "spectrum-status-light-top-to-dot-small": { + "value": "8px", + "description": "Used by `--spectrum-statuslight-spacing-top-to-dot`.", + "control": "text", + "category": "Component" + }, + "spectrum-status-light-dot-size-large": { + "value": "10px", + "description": "Used by `--spectrum-statuslight-dot-size`.", + "control": "text", + "category": "Component" + }, + "spectrum-status-light-top-to-dot-large": { + "value": "15px", + "description": "Used by `--spectrum-statuslight-spacing-top-to-dot`.", + "control": "text", + "category": "Component" + }, + "spectrum-status-light-dot-size-extra-large": { + "value": "10px", + "description": "Used by `--spectrum-statuslight-dot-size`.", + "control": "text", + "category": "Component" + }, + "spectrum-status-light-top-to-dot-extra-large": { + "value": "19px", + "description": "Used by `--spectrum-statuslight-spacing-top-to-dot`.", + "control": "text", + "category": "Component" + }, + "spectrum-statuslight-corner-radius": { + "description": "Defined in `.spectrum-StatusLight`.
Used by `.spectrum-StatusLight:before`.", + "control": "text", + "category": "Component" + }, + "spectrum-statuslight-font-weight": { + "description": "Defined in `.spectrum-StatusLight`.
Used by `.spectrum-StatusLight`.", + "control": "text", + "category": "Component" + }, + "spectrum-statuslight-border-width": { + "description": "Defined in `.spectrum-StatusLight`.
Used by `.spectrum-StatusLight:before`.", + "control": "text", + "category": "Component" + }, + "spectrum-statuslight-line-height": { + "description": "Defined in `.spectrum-StatusLight`.
Used by `.spectrum-StatusLight`.", + "control": "text", + "category": "Component" + }, + "spectrum-statuslight-line-height-cjk": { + "description": "Defined in `.spectrum-StatusLight`.
Used by `.spectrum-StatusLight:lang(ja), .spectrum-StatusLight:lang(ko), .spectrum-StatusLight:lang(zh)`.", + "control": "text", + "category": "Component" + }, + "spectrum-statuslight-content-color-default": { + "description": "Defined in `.spectrum-StatusLight`.
Used by `.spectrum-StatusLight`.", + "control": "color", + "category": "Component" + }, + "spectrum-statuslight-subdued-content-color-default": { + "description": "Defined in `.spectrum-StatusLight`.
Used by `.spectrum-StatusLight--neutral`.", + "control": "color", + "category": "Component" + }, + "spectrum-statuslight-semantic-neutral-color": { + "description": "Defined in `.spectrum-StatusLight`.
Used by `.spectrum-StatusLight--neutral:before`.", + "control": "color", + "category": "Component" + }, + "spectrum-statuslight-semantic-accent-color": { + "description": "Defined in `.spectrum-StatusLight`.
Used by `.spectrum-StatusLight--accent:before`.", + "control": "color", + "category": "Component" + }, + "spectrum-statuslight-semantic-negative-color": { + "description": "Defined in `.spectrum-StatusLight`.
Used by `.spectrum-StatusLight--negative:before`.", + "control": "color", + "category": "Component" + }, + "spectrum-statuslight-semantic-info-color": { + "description": "Defined in `.spectrum-StatusLight`.
Used by `.spectrum-StatusLight--info:before`.", + "control": "color", + "category": "Component" + }, + "spectrum-statuslight-semantic-notice-color": { + "description": "Defined in `.spectrum-StatusLight`.
Used by `.spectrum-StatusLight--notice:before`.", + "control": "color", + "category": "Component" + }, + "spectrum-statuslight-semantic-positive-color": { + "description": "Defined in `.spectrum-StatusLight`.
Used by `.spectrum-StatusLight--positive:before`.", + "control": "color", + "category": "Component" + }, + "spectrum-statuslight-nonsemantic-gray-color": { + "description": "Defined in `.spectrum-StatusLight`.
Used by `.spectrum-StatusLight--gray:before`.", + "control": "color", + "category": "Component" + }, + "spectrum-statuslight-nonsemantic-red-color": { + "description": "Defined in `.spectrum-StatusLight`.
Used by `.spectrum-StatusLight--red:before`.", + "control": "color", + "category": "Component" + }, + "spectrum-statuslight-nonsemantic-orange-color": { + "description": "Defined in `.spectrum-StatusLight`.
Used by `.spectrum-StatusLight--orange:before`.", + "control": "color", + "category": "Component" + }, + "spectrum-statuslight-nonsemantic-yellow-color": { + "description": "Defined in `.spectrum-StatusLight`.
Used by `.spectrum-StatusLight--yellow:before`.", + "control": "color", + "category": "Component" + }, + "spectrum-statuslight-nonsemantic-chartreuse-color": { + "description": "Defined in `.spectrum-StatusLight`.
Used by `.spectrum-StatusLight--chartreuse:before`.", + "control": "color", + "category": "Component" + }, + "spectrum-statuslight-nonsemantic-celery-color": { + "description": "Defined in `.spectrum-StatusLight`.
Used by `.spectrum-StatusLight--celery:before`.", + "control": "color", + "category": "Component" + }, + "spectrum-statuslight-nonsemantic-green-color": { + "description": "Defined in `.spectrum-StatusLight`.
Used by `.spectrum-StatusLight--green:before`.", + "control": "color", + "category": "Component" + }, + "spectrum-statuslight-nonsemantic-seafoam-color": { + "description": "Defined in `.spectrum-StatusLight`.
Used by `.spectrum-StatusLight--seafoam:before`.", + "control": "color", + "category": "Component" + }, + "spectrum-statuslight-nonsemantic-cyan-color": { + "description": "Defined in `.spectrum-StatusLight`.
Used by `.spectrum-StatusLight--cyan:before`.", + "control": "color", + "category": "Component" + }, + "spectrum-statuslight-nonsemantic-blue-color": { + "description": "Defined in `.spectrum-StatusLight`.
Used by `.spectrum-StatusLight--blue:before`.", + "control": "color", + "category": "Component" + }, + "spectrum-statuslight-nonsemantic-indigo-color": { + "description": "Defined in `.spectrum-StatusLight`.
Used by `.spectrum-StatusLight--indigo:before`.", + "control": "color", + "category": "Component" + }, + "spectrum-statuslight-nonsemantic-purple-color": { + "description": "Defined in `.spectrum-StatusLight`.
Used by `.spectrum-StatusLight--purple:before`.", + "control": "color", + "category": "Component" + }, + "spectrum-statuslight-nonsemantic-fuchsia-color": { + "description": "Defined in `.spectrum-StatusLight`.
Used by `.spectrum-StatusLight--fuchsia:before`.", + "control": "color", + "category": "Component" + }, + "spectrum-statuslight-nonsemantic-magenta-color": { + "description": "Defined in `.spectrum-StatusLight`.
Used by `.spectrum-StatusLight--magenta:before`.", + "control": "color", + "category": "Component" + }, + "spectrum-statuslight-spacing-computed-top-to-dot": { + "description": "Defined in `.spectrum-StatusLight:before`.
Used by `.spectrum-StatusLight:before`.", + "control": "text", + "category": "Component" + } + }, + "global": { + "spectrum-component-height-100": { + "value": "32px", + "description": "Used by `--spectrum-statuslight-height`.", + "control": "text", + "category": "Global" + }, + "spectrum-font-size-100": { + "value": "14px", + "description": "Used by `--spectrum-statuslight-font-size`.", + "control": "text", + "category": "Global" + }, + "spectrum-text-to-visual-100": { + "value": "6px", + "description": "Used by `--spectrum-statuslight-spacing-dot-to-label`.", + "control": "text", + "category": "Global" + }, + "spectrum-component-top-to-text-100": { + "value": "6px", + "description": "Used by `--spectrum-statuslight-spacing-top-to-label`.", + "control": "text", + "category": "Global" + }, + "spectrum-component-bottom-to-text-100": { + "value": "9px", + "description": "Used by `--spectrum-statuslight-spacing-bottom-to-label`.", + "control": "text", + "category": "Global" + }, + "spectrum-component-height-75": { + "value": "24px", + "description": "Used by `--spectrum-statuslight-height`.", + "control": "text", + "category": "Global" + }, + "spectrum-font-size-75": { + "value": "12px", + "description": "Used by `--spectrum-statuslight-font-size`.", + "control": "text", + "category": "Global" + }, + "spectrum-text-to-visual-75": { + "value": "5px", + "description": "Used by `--spectrum-statuslight-spacing-dot-to-label`.", + "control": "text", + "category": "Global" + }, + "spectrum-component-top-to-text-75": { + "value": "4px", + "description": "Used by `--spectrum-statuslight-spacing-top-to-label`.", + "control": "text", + "category": "Global" + }, + "spectrum-component-bottom-to-text-75": { + "value": "5px", + "description": "Used by `--spectrum-statuslight-spacing-bottom-to-label`.", + "control": "text", + "category": "Global" + }, + "spectrum-component-height-200": { + "value": "40px", + "description": "Used by `--spectrum-statuslight-height`.", + "control": "text", + "category": "Global" + }, + "spectrum-font-size-200": { + "value": "16px", + "description": "Used by `--spectrum-statuslight-font-size`.", + "control": "text", + "category": "Global" + }, + "spectrum-text-to-visual-200": { + "value": "7px", + "description": "Used by `--spectrum-statuslight-spacing-dot-to-label`.", + "control": "text", + "category": "Global" + }, + "spectrum-component-top-to-text-200": { + "value": "9px", + "description": "Used by `--spectrum-statuslight-spacing-top-to-label`.", + "control": "text", + "category": "Global" + }, + "spectrum-component-bottom-to-text-200": { + "value": "11px", + "description": "Used by `--spectrum-statuslight-spacing-bottom-to-label`.", + "control": "text", + "category": "Global" + }, + "spectrum-component-height-300": { + "value": "48px", + "description": "Used by `--spectrum-statuslight-height`.", + "control": "text", + "category": "Global" + }, + "spectrum-font-size-300": { + "value": "18px", + "description": "Used by `--spectrum-statuslight-font-size`.", + "control": "text", + "category": "Global" + }, + "spectrum-text-to-visual-300": { + "value": "8px", + "description": "Used by `--spectrum-statuslight-spacing-dot-to-label`.", + "control": "text", + "category": "Global" + }, + "spectrum-component-top-to-text-300": { + "value": "12px", + "description": "Used by `--spectrum-statuslight-spacing-top-to-label`.", + "control": "text", + "category": "Global" + }, + "spectrum-component-bottom-to-text-300": { + "value": "14px", + "description": "Used by `--spectrum-statuslight-spacing-bottom-to-label`.", + "control": "text", + "category": "Global" + }, + "spectrum-border-width-100": { + "value": "1px", + "description": "Used by `--spectrum-statuslight-border-width`.", + "control": "text", + "category": "Global" + }, + "spectrum-line-height-100": { + "value": "1.3", + "description": "Used by `--spectrum-statuslight-line-height`.", + "control": "text", + "category": "Global" + }, + "spectrum-cjk-line-height-100": { + "value": "1.5", + "description": "Used by `--spectrum-statuslight-line-height-cjk`.", + "control": "text", + "category": "Global" + }, + "spectrum-neutral-content-color-default": { + "value": "var(--spectrum-gray-800)", + "description": "Used by `--spectrum-statuslight-content-color-default`.", + "control": "color", + "category": "Global" + }, + "spectrum-neutral-subdued-content-color-default": { + "value": "var(--spectrum-gray-700)", + "description": "Used by `--spectrum-statuslight-subdued-content-color-default`.", + "control": "color", + "category": "Global" + }, + "spectrum-neutral-visual-color": { + "value": "var(--spectrum-gray-600)", + "description": "Used by `--spectrum-statuslight-semantic-neutral-color`.", + "control": "color", + "category": "Global" + }, + "spectrum-accent-visual-color": { + "value": "var(--spectrum-accent-color-900)", + "description": "Used by `--spectrum-statuslight-semantic-accent-color`.", + "control": "color", + "category": "Global" + }, + "spectrum-negative-visual-color": { + "value": "var(--spectrum-negative-color-900)", + "description": "Used by `--spectrum-statuslight-semantic-negative-color`.", + "control": "color", + "category": "Global" + }, + "spectrum-informative-visual-color": { + "value": "var(--spectrum-informative-color-900)", + "description": "Used by `--spectrum-statuslight-semantic-info-color`.", + "control": "color", + "category": "Global" + }, + "spectrum-notice-visual-color": { + "value": "var(--spectrum-notice-color-900)", + "description": "Used by `--spectrum-statuslight-semantic-notice-color`.", + "control": "color", + "category": "Global" + }, + "spectrum-positive-visual-color": { + "value": "var(--spectrum-positive-color-900)", + "description": "Used by `--spectrum-statuslight-semantic-positive-color`.", + "control": "color", + "category": "Global" + }, + "spectrum-gray-visual-color": { + "value": "var(--spectrum-gray-600)", + "description": "Used by `--spectrum-statuslight-nonsemantic-gray-color`.", + "control": "color", + "category": "Global" + }, + "spectrum-red-visual-color": { + "value": "var(--spectrum-red-700)", + "description": "Used by `--spectrum-statuslight-nonsemantic-red-color`.", + "control": "color", + "category": "Global" + }, + "spectrum-orange-visual-color": { + "value": "var(--spectrum-orange-900)", + "description": "Used by `--spectrum-statuslight-nonsemantic-orange-color`.", + "control": "color", + "category": "Global" + }, + "spectrum-yellow-visual-color": { + "value": "var(--spectrum-yellow-1100)", + "description": "Used by `--spectrum-statuslight-nonsemantic-yellow-color`.", + "control": "color", + "category": "Global" + }, + "spectrum-chartreuse-visual-color": { + "value": "var(--spectrum-chartreuse-900)", + "description": "Used by `--spectrum-statuslight-nonsemantic-chartreuse-color`.", + "control": "color", + "category": "Global" + }, + "spectrum-celery-visual-color": { + "value": "var(--spectrum-celery-800)", + "description": "Used by `--spectrum-statuslight-nonsemantic-celery-color`.", + "control": "color", + "category": "Global" + }, + "spectrum-green-visual-color": { + "value": "var(--spectrum-green-800)", + "description": "Used by `--spectrum-statuslight-nonsemantic-green-color`.", + "control": "color", + "category": "Global" + }, + "spectrum-seafoam-visual-color": { + "value": "var(--spectrum-seafoam-800)", + "description": "Used by `--spectrum-statuslight-nonsemantic-seafoam-color`.", + "control": "color", + "category": "Global" + }, + "spectrum-cyan-visual-color": { + "value": "var(--spectrum-cyan-900)", + "description": "Used by `--spectrum-statuslight-nonsemantic-cyan-color`.", + "control": "color", + "category": "Global" + }, + "spectrum-blue-visual-color": { + "value": "var(--spectrum-blue-900)", + "description": "Used by `--spectrum-statuslight-nonsemantic-blue-color`.", + "control": "color", + "category": "Global" + }, + "spectrum-indigo-visual-color": { + "value": "var(--spectrum-indigo-900)", + "description": "Used by `--spectrum-statuslight-nonsemantic-indigo-color`.", + "control": "color", + "category": "Global" + }, + "spectrum-purple-visual-color": { + "value": "var(--spectrum-purple-900)", + "description": "Used by `--spectrum-statuslight-nonsemantic-purple-color`.", + "control": "color", + "category": "Global" + }, + "spectrum-fuchsia-visual-color": { + "value": "var(--spectrum-fuchsia-900)", + "description": "Used by `--spectrum-statuslight-nonsemantic-fuchsia-color`.", + "control": "color", + "category": "Global" + }, + "spectrum-magenta-visual-color": { + "value": "var(--spectrum-magenta-900)", + "description": "Used by `--spectrum-statuslight-nonsemantic-magenta-color`.", + "control": "color", + "category": "Global" + } + }, + "system-theme": {}, + "passthroughs": {}, + "high-contrast": { + "highcontrast-statuslight-content-color-default": { + "value": "var(--mod-statuslight-content-color-default, var(--spectrum-statuslight-content-color-default))", + "description": "Defined in `.spectrum-StatusLight`.
Used by `.spectrum-StatusLight`.
Defaults to `var(--mod-statuslight-content-color-default, var(--spectrum-statuslight-content-color-default))`, if not set.", + "control": "color" + }, + "highcontrast-statuslight-subdued-content-color-default": { + "value": "var(--mod-statuslight-subdued-content-color-default, var(--spectrum-statuslight-subdued-content-color-default))", + "description": "Defined in `.spectrum-StatusLight`.
Used by `.spectrum-StatusLight--neutral`.
Defaults to `var(--mod-statuslight-subdued-content-color-default, var(--spectrum-statuslight-subdued-content-color-default))`, if not set.", + "control": "color" + } + } } diff --git a/components/statuslight/stories/statuslight.stories.js b/components/statuslight/stories/statuslight.stories.js index b385bcc9da3..7a29bc03b32 100644 --- a/components/statuslight/stories/statuslight.stories.js +++ b/components/statuslight/stories/statuslight.stories.js @@ -1,11 +1,13 @@ import { Sizes } from "@spectrum-css/preview/decorators"; import { disableDefaultModes } from "@spectrum-css/preview/modes"; import { isDisabled, size } from "@spectrum-css/preview/types"; -import metadata from "../dist/metadata.json"; -import packageJson from "../package.json"; import { StatusLightGroup } from "./statuslight.test.js"; import { NonsemanticGroup, SemanticGroup, Template } from "./template.js"; +// Local assets to render the component styles and structure +import metadata from "../dist/metadata.json"; +import packageJson from "../package.json"; + /** * Status lights describe the condition of an entity. They can be used to convey semantic meaning, such as statuses and categories. */ @@ -71,6 +73,7 @@ export default { }, packageJson, metadata, + cssprops: metadata.modifiers, }, }; diff --git a/components/steplist/dist/metadata.json b/components/steplist/dist/metadata.json index 3e4e5dc0bed..f29e2b34b45 100644 --- a/components/steplist/dist/metadata.json +++ b/components/steplist/dist/metadata.json @@ -3,8 +3,8 @@ "selectors": [ ".spectrum-Steplist", ".spectrum-Steplist--interactive .spectrum-Steplist-item :focus .spectrum-Steplist-marker", - ".spectrum-Steplist--interactive .spectrum-Steplist-item.is-focused .spectrum-Steplist-marker", ".spectrum-Steplist--interactive .spectrum-Steplist-item:focus .spectrum-Steplist-marker", + ".spectrum-Steplist--interactive .spectrum-Steplist-item.is-focused .spectrum-Steplist-marker", ".spectrum-Steplist--interactive .spectrum-Steplist-label", ".spectrum-Steplist--interactive .spectrum-Steplist-markerContainer", ".spectrum-Steplist--small", @@ -15,15 +15,6 @@ ".spectrum-Steplist--small .spectrum-Steplist-item:last-child", ".spectrum-Steplist--small .spectrum-Steplist-item:last-child .spectrum-Steplist-markerContainer", ".spectrum-Steplist-item", - ".spectrum-Steplist-item.is-complete + .spectrum-Steplist-item .spectrum-Steplist-segment", - ".spectrum-Steplist-item.is-complete .spectrum-Steplist-label", - ".spectrum-Steplist-item.is-complete .spectrum-Steplist-marker", - ".spectrum-Steplist-item.is-complete .spectrum-Steplist-segment", - ".spectrum-Steplist-item.is-selected .spectrum-Steplist-label", - ".spectrum-Steplist-item.is-selected .spectrum-Steplist-marker", - ".spectrum-Steplist-item.is-selected .spectrum-Steplist-segment", - ".spectrum-Steplist-item.is-selected :focus", - ".spectrum-Steplist-item.is-selected:focus", ".spectrum-Steplist-item:first-child", ".spectrum-Steplist-item:first-child .spectrum-Steplist-label", ".spectrum-Steplist-item:first-child .spectrum-Steplist-markerContainer", @@ -36,6 +27,15 @@ ".spectrum-Steplist-item:only-child .spectrum-Steplist-label", ".spectrum-Steplist-item:only-child .spectrum-Steplist-label:dir(rtl)", ".spectrum-Steplist-item:only-child .spectrum-Steplist-markerContainer", + ".spectrum-Steplist-item.is-complete .spectrum-Steplist-label", + ".spectrum-Steplist-item.is-complete .spectrum-Steplist-marker", + ".spectrum-Steplist-item.is-complete .spectrum-Steplist-segment", + ".spectrum-Steplist-item.is-complete + .spectrum-Steplist-item .spectrum-Steplist-segment", + ".spectrum-Steplist-item.is-selected :focus", + ".spectrum-Steplist-item.is-selected .spectrum-Steplist-label", + ".spectrum-Steplist-item.is-selected .spectrum-Steplist-marker", + ".spectrum-Steplist-item.is-selected .spectrum-Steplist-segment", + ".spectrum-Steplist-item.is-selected:focus", ".spectrum-Steplist-label", ".spectrum-Steplist-label:dir(rtl)", ".spectrum-Steplist-marker", @@ -45,60 +45,260 @@ "[dir=\"rtl\"] .spectrum-Steplist-item:only-child .spectrum-Steplist-label", "[dir=\"rtl\"] .spectrum-Steplist-label" ], - "modifiers": [ - "--mod-steplist-complete-label-text-color", - "--mod-steplist-complete-marker-background-color", - "--mod-steplist-complete-segment-border-block-end-color", - "--mod-steplist-current-label-text-color", - "--mod-steplist-current-marker-color", - "--mod-steplist-current-marker-color-key-focus", - "--mod-steplist-incomplete-label-color", - "--mod-steplist-incomplete-marker-border-color", - "--mod-steplist-incomplete-segment-border-block-end-color", - "--mod-steplist-label-labelOffset", - "--mod-steplist-label-text-size", - "--mod-steplist-marker-diameter", - "--mod-steplist-marker-hitArea", - "--mod-steplist-segment-height", - "--mod-steplist-sidePadding", - "--mod-steplist-small-topPadding", - "--mod-steplist-step-width", - "--mod-steplist-topPadding" - ], - "component": [ - "--spectrum-steplist-complete-label-text-color", - "--spectrum-steplist-complete-marker-background-color", - "--spectrum-steplist-complete-segment-border-block-end-color", - "--spectrum-steplist-current-label-text-color", - "--spectrum-steplist-current-marker-color", - "--spectrum-steplist-current-marker-color-key-focus", - "--spectrum-steplist-incomplete-label-color", - "--spectrum-steplist-incomplete-marker-border-color", - "--spectrum-steplist-incomplete-segment-border-block-end-color", - "--spectrum-steplist-label-labelOffset", - "--spectrum-steplist-label-text-size", - "--spectrum-steplist-marker-diameter", - "--spectrum-steplist-marker-hitArea", - "--spectrum-steplist-segment-height", - "--spectrum-steplist-sidePadding", - "--spectrum-steplist-small-topPadding", - "--spectrum-steplist-step-width", - "--spectrum-steplist-topPadding" - ], - "global": [ - "--spectrum-gray-200", - "--spectrum-gray-600", - "--spectrum-gray-700", - "--spectrum-gray-800" - ], - "system-theme": [ - "--system-steplist-incomplete-marker-border-color", - "--system-steplist-incomplete-segment-border-block-end-color" - ], - "passthroughs": [], - "high-contrast": [ - "--highcontrast-steplist-complete-marker-background-color", - "--highcontrast-steplist-current-marker-color", - "--highcontrast-steplist-current-marker-color-key-focus" - ] + "modifiers": { + "mod-steplist-topPadding": { + "value": "var(--spectrum-steplist-topPadding)", + "description": "Used by `.spectrum-Steplist`.
Defaults to `var(--spectrum-steplist-topPadding)`, if not set.", + "control": "text", + "category": "Modifier" + }, + "mod-steplist-sidePadding": { + "value": "var(--spectrum-steplist-sidePadding)", + "description": "Used by `.spectrum-Steplist`.
Defaults to `var(--spectrum-steplist-sidePadding)`, if not set.", + "control": "text", + "category": "Modifier" + }, + "mod-steplist-current-marker-color-key-focus": { + "value": "var(--spectrum-steplist-current-marker-color-key-focus)", + "description": "Used by `.spectrum-Steplist--interactive .spectrum-Steplist-item :focus .spectrum-Steplist-marker, .spectrum-Steplist--interactive .spectrum-Steplist-item.is-focused .spectrum-Steplist-marker, .spectrum-Steplist--interactive .spectrum-Steplist-item:focus .spectrum-Steplist-marker`.
Defaults to `var(--spectrum-steplist-current-marker-color-key-focus)`, if not set.", + "control": "color", + "category": "Modifier" + }, + "mod-steplist-small-topPadding": { + "value": "var(--spectrum-steplist-small-topPadding)", + "description": "Used by `.spectrum-Steplist--small`.
Defaults to `var(--spectrum-steplist-small-topPadding)`, if not set.", + "control": "text", + "category": "Modifier" + }, + "mod-steplist-step-width": { + "value": "var(--spectrum-steplist-step-width)", + "description": "Used by `.spectrum-Steplist-item`, `.spectrum-Steplist-label`, `.spectrum-Steplist-segment`, `.spectrum-Steplist-item:first-child, .spectrum-Steplist-item:last-child`.
Defaults to `var(--spectrum-steplist-step-width)`, if not set.", + "control": "text", + "category": "Modifier" + }, + "mod-steplist-complete-label-text-color": { + "value": "var(--spectrum-steplist-complete-label-text-color)", + "description": "Used by `.spectrum-Steplist-item.is-complete .spectrum-Steplist-label`.
Defaults to `var(--spectrum-steplist-complete-label-text-color)`, if not set.", + "control": "color", + "category": "Modifier" + }, + "mod-steplist-complete-marker-background-color": { + "value": "var(--spectrum-steplist-complete-marker-background-color)", + "description": "Used by `.spectrum-Steplist-item.is-complete .spectrum-Steplist-marker`.
Defaults to `var(--spectrum-steplist-complete-marker-background-color)`, if not set.", + "control": "color", + "category": "Modifier" + }, + "mod-steplist-segment-height": { + "value": "var(--spectrum-steplist-segment-height)", + "description": "Used by `.spectrum-Steplist-item.is-complete + .spectrum-Steplist-item .spectrum-Steplist-segment`, `.spectrum-Steplist-segment`.
Defaults to `var(--spectrum-steplist-segment-height)`, if not set.", + "control": "text", + "category": "Modifier" + }, + "mod-steplist-current-label-text-color": { + "value": "var(--spectrum-steplist-current-label-text-color)", + "description": "Used by `.spectrum-Steplist-item.is-selected .spectrum-Steplist-label`.
Defaults to `var(--spectrum-steplist-current-label-text-color)`, if not set.", + "control": "color", + "category": "Modifier" + }, + "mod-steplist-current-marker-color": { + "value": "var(--spectrum-steplist-current-marker-color)", + "description": "Used by `.spectrum-Steplist-item.is-selected .spectrum-Steplist-marker`.
Defaults to `var(--spectrum-steplist-current-marker-color)`, if not set.", + "control": "color", + "category": "Modifier" + }, + "mod-steplist-complete-segment-border-block-end-color": { + "value": "var(--spectrum-steplist-complete-segment-border-block-end-color)", + "description": "Used by `.spectrum-Steplist-item.is-complete .spectrum-Steplist-segment, .spectrum-Steplist-item.is-selected .spectrum-Steplist-segment`.
Defaults to `var(--spectrum-steplist-complete-segment-border-block-end-color)`, if not set.", + "control": "color", + "category": "Modifier" + }, + "mod-steplist-label-labelOffset": { + "value": "var(--spectrum-steplist-label-labelOffset)", + "description": "Used by `.spectrum-Steplist-label`.
Defaults to `var(--spectrum-steplist-label-labelOffset)`, if not set.", + "control": "text", + "category": "Modifier" + }, + "mod-steplist-label-text-size": { + "value": "var(--spectrum-steplist-label-text-size)", + "description": "Used by `.spectrum-Steplist-label`.
Defaults to `var(--spectrum-steplist-label-text-size)`, if not set.", + "control": "text", + "category": "Modifier" + }, + "mod-steplist-incomplete-label-color": { + "value": "var(--spectrum-steplist-incomplete-label-color)", + "description": "Used by `.spectrum-Steplist-label`.
Defaults to `var(--spectrum-steplist-incomplete-label-color)`, if not set.", + "control": "color", + "category": "Modifier" + }, + "mod-steplist-marker-hitArea": { + "value": "var(--spectrum-steplist-marker-hitArea)", + "description": "Used by `.spectrum-Steplist-markerContainer`, `.spectrum-Steplist-item:last-child .spectrum-Steplist-markerContainer`, `.spectrum-Steplist-item:only-child .spectrum-Steplist-markerContainer`.
Defaults to `var(--spectrum-steplist-marker-hitArea)`, if not set.", + "control": "text", + "category": "Modifier" + }, + "mod-steplist-marker-diameter": { + "value": "var(--spectrum-steplist-marker-diameter)", + "description": "Used by `.spectrum-Steplist-marker`, `.spectrum-Steplist-segment`, `.spectrum-Steplist-item:last-child .spectrum-Steplist-segment`, `.spectrum-Steplist-item:first-child, .spectrum-Steplist-item:last-child`.
Defaults to `var(--spectrum-steplist-marker-diameter)`, if not set.", + "control": "text", + "category": "Modifier" + }, + "mod-steplist-incomplete-marker-border-color": { + "value": "var(--spectrum-steplist-incomplete-marker-border-color)", + "description": "Used by `.spectrum-Steplist-marker`.
Defaults to `var(--spectrum-steplist-incomplete-marker-border-color)`, if not set.", + "control": "color", + "category": "Modifier" + }, + "mod-steplist-incomplete-segment-border-block-end-color": { + "value": "var(--spectrum-steplist-incomplete-segment-border-block-end-color)", + "description": "Used by `.spectrum-Steplist-segment`.
Defaults to `var(--spectrum-steplist-incomplete-segment-border-block-end-color)`, if not set.", + "control": "color", + "category": "Modifier" + } + }, + "component": { + "spectrum-steplist-step-width": { + "description": "Defined in `.spectrum-Steplist`.
Used by `.spectrum-Steplist-item`, `.spectrum-Steplist-label`, `.spectrum-Steplist-segment`, `.spectrum-Steplist-item:first-child, .spectrum-Steplist-item:last-child`.", + "control": "text", + "category": "Component" + }, + "spectrum-steplist-marker-diameter": { + "description": "Defined in `.spectrum-Steplist`.
Used by `.spectrum-Steplist-marker`, `.spectrum-Steplist-segment`, `.spectrum-Steplist-item:last-child .spectrum-Steplist-segment`, `.spectrum-Steplist-item:first-child, .spectrum-Steplist-item:last-child`.", + "control": "text", + "category": "Component" + }, + "spectrum-steplist-marker-hitArea": { + "description": "Defined in `.spectrum-Steplist`.
Used by `.spectrum-Steplist-markerContainer`, `.spectrum-Steplist-item:last-child .spectrum-Steplist-markerContainer`, `.spectrum-Steplist-item:only-child .spectrum-Steplist-markerContainer`.", + "control": "text", + "category": "Component" + }, + "spectrum-steplist-segment-height": { + "description": "Defined in `.spectrum-Steplist`.
Used by `.spectrum-Steplist-item.is-complete + .spectrum-Steplist-item .spectrum-Steplist-segment`, `.spectrum-Steplist-segment`.", + "control": "text", + "category": "Component" + }, + "spectrum-steplist-topPadding": { + "description": "Defined in `.spectrum-Steplist`.
Used by `.spectrum-Steplist`.", + "control": "text", + "category": "Component" + }, + "spectrum-steplist-small-topPadding": { + "description": "Defined in `.spectrum-Steplist`.
Used by `.spectrum-Steplist--small`.", + "control": "text", + "category": "Component" + }, + "spectrum-steplist-sidePadding": { + "description": "Defined in `.spectrum-Steplist`.
Used by `.spectrum-Steplist`.", + "control": "text", + "category": "Component" + }, + "spectrum-steplist-label-labelOffset": { + "description": "Defined in `.spectrum-Steplist`.
Used by `.spectrum-Steplist-label`.", + "control": "text", + "category": "Component" + }, + "spectrum-steplist-label-text-size": { + "description": "Defined in `.spectrum-Steplist`.
Used by `.spectrum-Steplist-label`.", + "control": "text", + "category": "Component" + }, + "spectrum-steplist-current-label-text-color": { + "description": "Defined in `.spectrum-Steplist`.
Used by `.spectrum-Steplist-item.is-selected .spectrum-Steplist-label`.", + "control": "color", + "category": "Component" + }, + "spectrum-steplist-current-marker-color": { + "description": "Defined in `.spectrum-Steplist`.
Used by `.spectrum-Steplist-item.is-selected .spectrum-Steplist-marker`.", + "control": "color", + "category": "Component" + }, + "spectrum-steplist-complete-label-text-color": { + "description": "Defined in `.spectrum-Steplist`.
Used by `.spectrum-Steplist-item.is-complete .spectrum-Steplist-label`.", + "control": "color", + "category": "Component" + }, + "spectrum-steplist-complete-marker-background-color": { + "description": "Defined in `.spectrum-Steplist`.
Used by `.spectrum-Steplist-item.is-complete .spectrum-Steplist-marker`.", + "control": "color", + "category": "Component" + }, + "spectrum-steplist-complete-segment-border-block-end-color": { + "description": "Defined in `.spectrum-Steplist`.
Used by `.spectrum-Steplist-item.is-complete .spectrum-Steplist-segment, .spectrum-Steplist-item.is-selected .spectrum-Steplist-segment`.", + "control": "color", + "category": "Component" + }, + "spectrum-steplist-incomplete-label-color": { + "description": "Defined in `.spectrum-Steplist`.
Used by `.spectrum-Steplist-label`.", + "control": "color", + "category": "Component" + }, + "spectrum-steplist-current-marker-color-key-focus": { + "description": "Used by `.spectrum-Steplist--interactive .spectrum-Steplist-item :focus .spectrum-Steplist-marker, .spectrum-Steplist--interactive .spectrum-Steplist-item.is-focused .spectrum-Steplist-marker, .spectrum-Steplist--interactive .spectrum-Steplist-item:focus .spectrum-Steplist-marker`.", + "control": "color", + "category": "Component" + }, + "spectrum-steplist-incomplete-marker-border-color": { + "description": "Defined in `.spectrum-Steplist`.
Used by `.spectrum-Steplist-marker`.", + "control": "color", + "category": "Component" + }, + "spectrum-steplist-incomplete-segment-border-block-end-color": { + "description": "Defined in `.spectrum-Steplist`.
Used by `.spectrum-Steplist-segment`.", + "control": "color", + "category": "Component" + } + }, + "global": { + "spectrum-gray-200": { + "value": "light-dark(rgb(225, 225, 225), rgb(50, 50, 50))", + "description": "Used by `--system-steplist-incomplete-marker-border-color`, `--system-steplist-incomplete-segment-border-block-end-color`.", + "control": "text", + "category": "Global" + }, + "spectrum-gray-800": { + "value": "light-dark(rgb(41, 41, 41), rgb(219, 219, 219))", + "description": "Used by `--spectrum-steplist-current-label-text-color`, `--spectrum-steplist-current-marker-color`.", + "control": "text", + "category": "Global" + }, + "spectrum-gray-700": { + "value": "light-dark(rgb(80, 80, 80), rgb(175, 175, 175))", + "description": "Used by `--spectrum-steplist-complete-label-text-color`.", + "control": "text", + "category": "Global" + }, + "spectrum-gray-600": { + "value": "light-dark(rgb(113, 113, 113), rgb(138, 138, 138))", + "description": "Used by `--spectrum-steplist-complete-marker-background-color`, `--spectrum-steplist-complete-segment-border-block-end-color`, `--spectrum-steplist-incomplete-label-color`.", + "control": "text", + "category": "Global" + } + }, + "system-theme": { + "system-steplist-incomplete-marker-border-color": { + "description": "Defined in `.spectrum`.
Used by `--spectrum-steplist-incomplete-marker-border-color`.", + "control": "color" + }, + "system-steplist-incomplete-segment-border-block-end-color": { + "description": "Defined in `.spectrum`.
Used by `--spectrum-steplist-incomplete-segment-border-block-end-color`.", + "control": "color" + } + }, + "passthroughs": {}, + "high-contrast": { + "highcontrast-steplist-current-marker-color-key-focus": { + "value": "var(--mod-steplist-current-marker-color-key-focus, var(--spectrum-steplist-current-marker-color-key-focus))", + "description": "Defined in `.spectrum-Steplist`.
Used by `.spectrum-Steplist--interactive .spectrum-Steplist-item :focus .spectrum-Steplist-marker, .spectrum-Steplist--interactive .spectrum-Steplist-item.is-focused .spectrum-Steplist-marker, .spectrum-Steplist--interactive .spectrum-Steplist-item:focus .spectrum-Steplist-marker`.
Defaults to `var(--mod-steplist-current-marker-color-key-focus, var(--spectrum-steplist-current-marker-color-key-focus))`, if not set.", + "control": "color" + }, + "highcontrast-steplist-complete-marker-background-color": { + "value": "var(--mod-steplist-complete-marker-background-color, var(--spectrum-steplist-complete-marker-background-color))", + "description": "Defined in `.spectrum-Steplist`.
Used by `.spectrum-Steplist-item.is-complete .spectrum-Steplist-marker`.
Defaults to `var(--mod-steplist-complete-marker-background-color, var(--spectrum-steplist-complete-marker-background-color))`, if not set.", + "control": "color" + }, + "highcontrast-steplist-current-marker-color": { + "value": "var(--mod-steplist-current-marker-color, var(--spectrum-steplist-current-marker-color))", + "description": "Defined in `.spectrum-Steplist`.
Used by `.spectrum-Steplist-item.is-selected .spectrum-Steplist-marker`.
Defaults to `var(--mod-steplist-current-marker-color, var(--spectrum-steplist-current-marker-color))`, if not set.", + "control": "color" + } + } } diff --git a/components/steplist/stories/steplist.stories.js b/components/steplist/stories/steplist.stories.js index 9266631e646..23e42afd979 100644 --- a/components/steplist/stories/steplist.stories.js +++ b/components/steplist/stories/steplist.stories.js @@ -1,9 +1,11 @@ import { disableDefaultModes } from "@spectrum-css/preview/modes"; -import metadata from "../dist/metadata.json"; -import packageJson from "../package.json"; import { SteplistGroup } from "./steplist.test.js"; import { DocsSteplistGroup } from "./template.js"; +// Local assets to render the component styles and structure +import metadata from "../dist/metadata.json"; +import packageJson from "../package.json"; + /** * A steplist can communicate the progress of a task or workflow. It can help users understand where they are in a process and what they need to do next. * @@ -76,6 +78,7 @@ export default { parameters: { packageJson, metadata, + cssprops: metadata.modifiers, }, }; diff --git a/components/stepper/dist/metadata.json b/components/stepper/dist/metadata.json index cfea6e878d6..c9c1f84528f 100644 --- a/components/stepper/dist/metadata.json +++ b/components/stepper/dist/metadata.json @@ -3,203 +3,775 @@ "selectors": [ ".spectrum-Stepper", ".spectrum-Stepper--quiet", + ".spectrum-Stepper--quiet:after", ".spectrum-Stepper--quiet.hide-stepper .spectrum-Stepper-input", ".spectrum-Stepper--quiet.is-keyboardFocused:not(.is-disabled)", - ".spectrum-Stepper--quiet:after", ".spectrum-Stepper-button", ".spectrum-Stepper-buttons", ".spectrum-Stepper-input", + ".spectrum-Stepper:before", + ".spectrum-Stepper:hover:not(.is-invalid, .is-disabled, .is-focused)", + ".spectrum-Stepper:not(.is-disabled) .is-focused", + ".spectrum-Stepper:not(.is-disabled) .is-focused:hover", + ".spectrum-Stepper:not(.is-disabled):focus", + ".spectrum-Stepper:not(.is-disabled):focus-visible", + ".spectrum-Stepper:not(.is-disabled):focus:hover", + ".spectrum-Stepper:not(.is-disabled):hover", + ".spectrum-Stepper:not(.spectrum-Stepper--quiet)", ".spectrum-Stepper.hide-stepper .spectrum-Stepper-input", ".spectrum-Stepper.is-disabled", ".spectrum-Stepper.is-focused:not(.is-disabled)", ".spectrum-Stepper.is-focused:not(.is-disabled):hover", ".spectrum-Stepper.is-invalid", - ".spectrum-Stepper.is-invalid.is-focused", - ".spectrum-Stepper.is-invalid.is-focused:hover", - ".spectrum-Stepper.is-invalid.is-keyboardFocused", ".spectrum-Stepper.is-invalid:focus", ".spectrum-Stepper.is-invalid:focus-visible", ".spectrum-Stepper.is-invalid:focus:hover", ".spectrum-Stepper.is-invalid:hover", + ".spectrum-Stepper.is-invalid.is-focused", + ".spectrum-Stepper.is-invalid.is-focused:hover", + ".spectrum-Stepper.is-invalid.is-keyboardFocused", ".spectrum-Stepper.is-keyboardFocused:not(.is-disabled)", ".spectrum-Stepper.spectrum-Stepper--quiet", + ".spectrum-Stepper.spectrum-Stepper--quiet:not(.is-disabled):focus", + ".spectrum-Stepper.spectrum-Stepper--quiet:not(.is-disabled):focus:hover", + ".spectrum-Stepper.spectrum-Stepper--quiet:not(.is-disabled):hover", ".spectrum-Stepper.spectrum-Stepper--quiet.is-focused:not(.is-disabled)", ".spectrum-Stepper.spectrum-Stepper--quiet.is-focused:not(.is-disabled):hover", ".spectrum-Stepper.spectrum-Stepper--quiet.is-invalid", ".spectrum-Stepper.spectrum-Stepper--quiet.is-keyboardFocused:not(.is-disabled)", ".spectrum-Stepper.spectrum-Stepper--quiet.is-keyboardFocused:not(.is-disabled):hover", - ".spectrum-Stepper.spectrum-Stepper--quiet:not(.is-disabled):focus", - ".spectrum-Stepper.spectrum-Stepper--quiet:not(.is-disabled):focus:hover", - ".spectrum-Stepper.spectrum-Stepper--quiet:not(.is-disabled):hover", ".spectrum-Stepper.spectrum-Stepper--sizeL", ".spectrum-Stepper.spectrum-Stepper--sizeM", ".spectrum-Stepper.spectrum-Stepper--sizeS", - ".spectrum-Stepper.spectrum-Stepper--sizeXL", - ".spectrum-Stepper:before", - ".spectrum-Stepper:hover:not(.is-invalid, .is-disabled, .is-focused)", - ".spectrum-Stepper:not(.is-disabled) .is-focused", - ".spectrum-Stepper:not(.is-disabled) .is-focused:hover", - ".spectrum-Stepper:not(.is-disabled):focus", - ".spectrum-Stepper:not(.is-disabled):focus-visible", - ".spectrum-Stepper:not(.is-disabled):focus:hover", - ".spectrum-Stepper:not(.is-disabled):hover", - ".spectrum-Stepper:not(.spectrum-Stepper--quiet)" - ], - "modifiers": [ - "--mod-stepper-animation-duration", - "--mod-stepper-border-color", - "--mod-stepper-border-color-focus", - "--mod-stepper-border-color-focus-hover", - "--mod-stepper-border-color-focus-hover-invalid", - "--mod-stepper-border-color-focus-invalid", - "--mod-stepper-border-color-hover", - "--mod-stepper-border-color-hover-invalid", - "--mod-stepper-border-color-invalid", - "--mod-stepper-border-color-keyboard-focus", - "--mod-stepper-border-color-keyboard-focus-invalid", - "--mod-stepper-border-radius", - "--mod-stepper-border-width", - "--mod-stepper-button-border-width", - "--mod-stepper-button-width", - "--mod-stepper-button-width-quiet", - "--mod-stepper-buttons-background-color", - "--mod-stepper-buttons-border-color", - "--mod-stepper-buttons-border-color-focus", - "--mod-stepper-buttons-border-color-focus-hover", - "--mod-stepper-buttons-border-color-hover", - "--mod-stepper-buttons-border-color-keyboard-focus", - "--mod-stepper-buttons-border-style", - "--mod-stepper-buttons-border-width", - "--mod-stepper-focus-indicator-color", - "--mod-stepper-focus-indicator-gap", - "--mod-stepper-focus-indicator-visibility", - "--mod-stepper-focus-indicator-width", - "--mod-stepper-height", - "--mod-stepper-min-width-multiplier", - "--mod-stepper-width" - ], - "component": [ - "--spectrum-stepper-animation-duration", - "--spectrum-stepper-border-color", - "--spectrum-stepper-border-color-default", - "--spectrum-stepper-border-color-disabled", - "--spectrum-stepper-border-color-focus", - "--spectrum-stepper-border-color-focus-hover", - "--spectrum-stepper-border-color-focus-hover-invalid", - "--spectrum-stepper-border-color-focus-invalid", - "--spectrum-stepper-border-color-hover", - "--spectrum-stepper-border-color-invalid", - "--spectrum-stepper-border-color-keyboard-focus", - "--spectrum-stepper-border-color-keyboard-focus-invalid", - "--spectrum-stepper-border-radius", - "--spectrum-stepper-border-width", - "--spectrum-stepper-button-border-width", - "--spectrum-stepper-button-border-width-disabled", - "--spectrum-stepper-button-edge-to-fill", - "--spectrum-stepper-button-width", - "--spectrum-stepper-buttons-background-color", - "--spectrum-stepper-buttons-background-color-disabled", - "--spectrum-stepper-buttons-border-color", - "--spectrum-stepper-buttons-border-color-focus", - "--spectrum-stepper-buttons-border-color-focus-hover", - "--spectrum-stepper-buttons-border-color-hover", - "--spectrum-stepper-buttons-border-color-keyboard-focus", - "--spectrum-stepper-buttons-border-style", - "--spectrum-stepper-buttons-border-width", - "--spectrum-stepper-focus-indicator-color", - "--spectrum-stepper-focus-indicator-gap", - "--spectrum-stepper-focus-indicator-width", - "--spectrum-stepper-height", - "--spectrum-stepper-width" - ], - "global": [ - "--spectrum-animation-duration-100", - "--spectrum-border-width-100", - "--spectrum-border-width-200", - "--spectrum-component-height-100", - "--spectrum-component-height-200", - "--spectrum-component-height-300", - "--spectrum-component-height-75", - "--spectrum-corner-radius-100", - "--spectrum-disabled-border-color", - "--spectrum-focus-indicator-color", - "--spectrum-focus-indicator-gap", - "--spectrum-focus-indicator-thickness", - "--spectrum-gray-100", - "--spectrum-gray-300", - "--spectrum-gray-50", - "--spectrum-gray-500", - "--spectrum-gray-600", - "--spectrum-gray-800", - "--spectrum-gray-900", - "--spectrum-in-field-button-width-stacked-extra-large", - "--spectrum-in-field-button-width-stacked-large", - "--spectrum-in-field-button-width-stacked-medium", - "--spectrum-in-field-button-width-stacked-small", - "--spectrum-negative-border-color-default", - "--spectrum-negative-border-color-focus", - "--spectrum-negative-border-color-focus-hover", - "--spectrum-negative-border-color-hover", - "--spectrum-negative-border-color-key-focus", - "--spectrum-text-field-minimum-width-multiplier" - ], - "system-theme": [ - "--system-stepper-border-color-default", - "--system-stepper-border-color-disabled", - "--system-stepper-border-color-focus", - "--system-stepper-border-color-focus-hover", - "--system-stepper-border-color-focus-hover-invalid", - "--system-stepper-border-color-focus-invalid", - "--system-stepper-border-color-hover", - "--system-stepper-border-color-invalid", - "--system-stepper-border-color-keyboard-focus", - "--system-stepper-border-color-keyboard-focus-invalid", - "--system-stepper-border-width", - "--system-stepper-button-border-width", - "--system-stepper-button-border-width-disabled", - "--system-stepper-buttons-background-color", - "--system-stepper-buttons-background-color-disabled", - "--system-stepper-buttons-border-color", - "--system-stepper-buttons-border-color-focus", - "--system-stepper-buttons-border-color-hover", - "--system-stepper-buttons-border-color-keyboard-focus", - "--system-stepper-buttons-border-style", - "--system-stepper-buttons-border-width", - "--system-stepper-quiet-button-edge-to-fill", - "--system-stepper-quiet-buttons-border-style" - ], - "passthroughs": [ - "--mod-infield-button-border-block-end-width", - "--mod-infield-button-border-color", - "--mod-infield-button-border-color-quiet", - "--mod-infield-button-border-color-quiet-disabled", - "--mod-infield-button-border-width", - "--mod-infield-button-edge-to-fill", - "--mod-infield-button-fill-justify-content", - "--mod-infield-button-inner-edge-to-fill", - "--mod-infield-button-stacked-bottom-border-block-end-width", - "--mod-infield-button-stacked-bottom-border-radius-end-end", - "--mod-infield-button-stacked-bottom-border-radius-end-start", - "--mod-infield-button-width-stacked", - "--mod-textfield-background-color", - "--mod-textfield-border-color", - "--mod-textfield-border-color-disabled", - "--mod-textfield-border-color-hover", - "--mod-textfield-border-width", - "--mod-textfield-focus-indicator-color", - "--mod-textfield-focus-indicator-width", - "--mod-textfield-icon-spacing-inline-start-invalid" + ".spectrum-Stepper.spectrum-Stepper--sizeXL" ], - "high-contrast": [ - "--highcontrast-infield-button-border-color", - "--highcontrast-infield-button-border-color-active", - "--highcontrast-stepper-border-color", - "--highcontrast-stepper-border-color-focus", - "--highcontrast-stepper-border-color-focus-hover", - "--highcontrast-stepper-border-color-hover", - "--highcontrast-stepper-border-color-keyboard-focus", - "--highcontrast-stepper-buttons-border-width", - "--highcontrast-stepper-focus-indicator-color", - "--highcontrast-textfield-border-color" - ] + "modifiers": { + "mod-stepper-border-width": { + "value": "var(--spectrum-stepper-border-width)", + "description": "Used by `--highcontrast-stepper-buttons-border-width`, `--mod-textfield-border-width`, `--mod-infield-button-border-block-end-width`, `--mod-infield-button-stacked-bottom-border-block-end-width`, `--spectrum-stepper-width`, `.spectrum-Stepper.hide-stepper .spectrum-Stepper-input`.
Defaults to `var(--spectrum-stepper-border-width)`, if not set.", + "control": "text", + "category": "Modifier" + }, + "mod-stepper-border-color": { + "value": "var(--spectrum-stepper-border-color-default)", + "description": "Defined in `.spectrum-Stepper.is-invalid`, `.spectrum-Stepper.is-focused:not(.is-disabled), .spectrum-Stepper:not(.is-disabled):focus`, `.spectrum-Stepper.is-keyboardFocused:not(.is-disabled)`, `.spectrum-Stepper.spectrum-Stepper--quiet.is-invalid`, `.spectrum-Stepper:not(.is-disabled):hover`, `.spectrum-Stepper.is-focused:not(.is-disabled):hover, .spectrum-Stepper:not(.is-disabled):focus:hover`.
Used by `--spectrum-stepper-border-color`.
Defaults to `var(--spectrum-stepper-border-color-default)`, if not set.", + "control": "color", + "category": "Modifier" + }, + "mod-stepper-border-radius": { + "value": "8px", + "description": "Used by `--spectrum-stepper-border-radius`.
Defaults to `var(--spectrum-corner-radius-100)`, if not set.", + "control": "text", + "category": "Modifier" + }, + "mod-stepper-focus-indicator-width": { + "value": "2px", + "description": "Used by `--spectrum-stepper-focus-indicator-width`.
Defaults to `var(--spectrum-focus-indicator-thickness)`, if not set.", + "control": "text", + "category": "Modifier" + }, + "mod-stepper-focus-indicator-gap": { + "value": "2px", + "description": "Used by `--spectrum-stepper-focus-indicator-gap`.
Defaults to `var(--spectrum-focus-indicator-gap)`, if not set.", + "control": "text", + "category": "Modifier" + }, + "mod-stepper-focus-indicator-color": { + "value": "var(--spectrum-blue-800)", + "description": "Used by `--spectrum-stepper-focus-indicator-color`.
Defaults to `var(--spectrum-focus-indicator-color)`, if not set.", + "control": "color", + "category": "Modifier" + }, + "mod-stepper-animation-duration": { + "value": "var(--spectrum-animation-duration-100)", + "description": "Used by `--spectrum-stepper-animation-duration`.
Defaults to `var(--spectrum-animation-duration-100)`, if not set.", + "control": "text", + "category": "Modifier" + }, + "mod-stepper-button-width": { + "value": "44px", + "description": "Used by `--spectrum-stepper-button-width`.
Defaults to `var(--spectrum-in-field-button-width-stacked-extra-large)`, if not set.", + "control": "text", + "category": "Modifier" + }, + "mod-stepper-height": { + "value": "48px", + "description": "Used by `--spectrum-stepper-height`.
Defaults to `var(--spectrum-component-height-300)`, if not set.", + "control": "text", + "category": "Modifier" + }, + "mod-stepper-border-color-invalid": { + "value": "var(--spectrum-stepper-border-color-invalid)", + "description": "Used by `--mod-stepper-border-color`, `--mod-infield-button-border-color`.
Defaults to `var(--spectrum-stepper-border-color-invalid)`, if not set.", + "control": "color", + "category": "Modifier" + }, + "mod-stepper-border-color-hover": { + "value": "var(--spectrum-stepper-border-color-hover)", + "description": "Defined in `.spectrum-Stepper.is-invalid`.
Used by `--mod-textfield-border-color-hover`, `--mod-stepper-border-color`, `--mod-infield-button-border-color`.
Defaults to `var(--spectrum-stepper-border-color-hover)`, if not set.", + "control": "color", + "category": "Modifier" + }, + "mod-stepper-border-color-hover-invalid": { + "value": "var(--spectrum-negative-color-1000)", + "description": "Used by `--mod-stepper-border-color-hover`, `--mod-infield-button-border-color`.
Defaults to `var(--spectrum-negative-border-color-hover)`, if not set.", + "control": "color", + "category": "Modifier" + }, + "mod-stepper-border-color-focus": { + "value": "var(--spectrum-stepper-border-color-focus)", + "description": "Defined in `.spectrum-Stepper.is-invalid`.
Used by `--mod-stepper-border-color`, `--mod-stepper-buttons-border-color`, `--mod-infield-button-border-color`.
Defaults to `var(--spectrum-stepper-border-color-focus)`, if not set.", + "control": "color", + "category": "Modifier" + }, + "mod-stepper-border-color-focus-invalid": { + "value": "var(--spectrum-stepper-border-color-focus-invalid)", + "description": "Used by `--mod-stepper-border-color-focus`, `--mod-infield-button-border-color`.
Defaults to `var(--spectrum-stepper-border-color-focus-invalid)`, if not set.", + "control": "color", + "category": "Modifier" + }, + "mod-stepper-border-color-focus-hover": { + "value": "var(--spectrum-stepper-border-color-focus-hover)", + "description": "Defined in `.spectrum-Stepper.is-invalid`.
Used by `--mod-stepper-border-color`, `--mod-stepper-buttons-border-color`, `--mod-textfield-border-color`, `--mod-infield-button-border-color`.
Defaults to `var(--spectrum-stepper-border-color-focus-hover)`, if not set.", + "control": "color", + "category": "Modifier" + }, + "mod-stepper-border-color-focus-hover-invalid": { + "value": "var(--spectrum-stepper-border-color-focus-hover-invalid)", + "description": "Used by `--mod-stepper-border-color-focus-hover`, `--mod-infield-button-border-color`.
Defaults to `var(--spectrum-stepper-border-color-focus-hover-invalid)`, if not set.", + "control": "color", + "category": "Modifier" + }, + "mod-stepper-border-color-keyboard-focus": { + "value": "var(--spectrum-stepper-border-color-keyboard-focus)", + "description": "Defined in `.spectrum-Stepper.is-invalid`.
Used by `--mod-textfield-border-color`, `--mod-infield-button-border-color`.
Defaults to `var(--spectrum-stepper-border-color-keyboard-focus)`, if not set.", + "control": "color", + "category": "Modifier" + }, + "mod-stepper-border-color-keyboard-focus-invalid": { + "value": "var(--spectrum-stepper-border-color-keyboard-focus-invalid)", + "description": "Used by `--mod-stepper-border-color-keyboard-focus`, `--mod-infield-button-border-color`.
Defaults to `var(--spectrum-stepper-border-color-keyboard-focus-invalid)`, if not set.", + "control": "color", + "category": "Modifier" + }, + "mod-stepper-buttons-border-color": { + "value": "var(--spectrum-stepper-buttons-border-color)", + "description": "Defined in `.spectrum-Stepper.is-focused:not(.is-disabled), .spectrum-Stepper:not(.is-disabled):focus`, `.spectrum-Stepper.is-focused:not(.is-disabled):hover, .spectrum-Stepper:not(.is-disabled):focus:hover`.
Used by `--mod-infield-button-border-color`.
Defaults to `var(--spectrum-stepper-buttons-border-color)`, if not set.", + "control": "color", + "category": "Modifier" + }, + "mod-stepper-buttons-background-color": { + "value": "var(--spectrum-stepper-buttons-background-color)", + "description": "Defined in `.spectrum-Stepper.spectrum-Stepper--quiet`, `.spectrum-Stepper.spectrum-Stepper--quiet:not(.is-disabled):hover`.
Used by `.spectrum-Stepper-buttons`.
Defaults to `var(--spectrum-stepper-buttons-background-color)`, if not set.", + "control": "color", + "category": "Modifier" + }, + "mod-stepper-focus-indicator-visibility": { + "description": "Defined in `.spectrum-Stepper.spectrum-Stepper--quiet.is-keyboardFocused:not(.is-disabled)`.
Used by `.spectrum-Stepper--quiet:after`.", + "control": "text", + "category": "Modifier" + }, + "mod-stepper-button-border-width": { + "value": "var(--spectrum-stepper-button-border-width)", + "description": "Used by `--mod-infield-button-border-width`.
Defaults to `var(--spectrum-stepper-button-border-width)`, if not set.", + "control": "text", + "category": "Modifier" + }, + "mod-stepper-buttons-border-color-focus": { + "value": "var(--spectrum-stepper-buttons-border-color-focus)", + "description": "Used by `--mod-infield-button-border-color`.
Defaults to `var(--spectrum-stepper-buttons-border-color-focus)`, if not set.", + "control": "color", + "category": "Modifier" + }, + "mod-stepper-buttons-border-color-keyboard-focus": { + "value": "var(--spectrum-stepper-buttons-border-color-keyboard-focus)", + "description": "Used by `--mod-infield-button-border-color`.
Defaults to `var(--spectrum-stepper-buttons-border-color-keyboard-focus)`, if not set.", + "control": "color", + "category": "Modifier" + }, + "mod-stepper-button-width-quiet": { + "value": "var(--spectrum-stepper-button-width)", + "description": "Used by `--mod-infield-button-width-stacked`.
Defaults to `var(--spectrum-stepper-button-width)`, if not set.", + "control": "text", + "category": "Modifier" + }, + "mod-stepper-buttons-border-color-hover": { + "value": "var(--spectrum-stepper-buttons-border-color-hover)", + "description": "Used by `--mod-infield-button-border-color`.
Defaults to `var(--spectrum-stepper-buttons-border-color-hover)`, if not set.", + "control": "color", + "category": "Modifier" + }, + "mod-stepper-buttons-border-color-focus-hover": { + "value": "var(--spectrum-stepper-buttons-border-color-focus-hover)", + "description": "Used by `--mod-infield-button-border-color`.
Defaults to `var(--spectrum-stepper-buttons-border-color-focus-hover)`, if not set.", + "control": "color", + "category": "Modifier" + }, + "mod-stepper-width": { + "value": "calc(var(--spectrum-stepper-height) * var(--mod-stepper-min-width-multiplier, var(--spectrum-text-field-minimum-width-multiplier)) + var(--spectrum-stepper-button-width) + var(--mod-stepper-border-width, var(--spectrum-stepper-border-width)) * 2)", + "description": "Used by `--spectrum-stepper-width`.
Defaults to `calc(var(--spectrum-stepper-height) * var(--mod-stepper-min-width-multiplier, var(--spectrum-text-field-minimum-width-multiplier)) + var(--spectrum-stepper-button-width) + var(--mod-stepper-border-width, var(--spectrum-stepper-border-width)) * 2)`, if not set.", + "control": "text", + "category": "Modifier" + }, + "mod-stepper-min-width-multiplier": { + "value": "1.5", + "description": "Used by `--spectrum-stepper-width`.
Defaults to `var(--spectrum-text-field-minimum-width-multiplier)`, if not set.", + "control": "text", + "category": "Modifier" + }, + "mod-stepper-buttons-border-style": { + "value": "var(--spectrum-stepper-buttons-border-style)", + "description": "Used by `.spectrum-Stepper-buttons`.
Defaults to `var(--spectrum-stepper-buttons-border-style)`, if not set.", + "control": "text", + "category": "Modifier" + }, + "mod-stepper-buttons-border-width": { + "value": "var(--spectrum-stepper-buttons-border-width)", + "description": "Used by `.spectrum-Stepper-buttons`.
Defaults to `var(--spectrum-stepper-buttons-border-width)`, if not set.", + "control": "text", + "category": "Modifier" + } + }, + "component": { + "spectrum-stepper-border-width": { + "description": "Defined in `.spectrum-Stepper`.
Used by `--highcontrast-stepper-buttons-border-width`, `--mod-textfield-border-width`, `--mod-infield-button-border-block-end-width`, `--mod-infield-button-stacked-bottom-border-block-end-width`, `--spectrum-stepper-width`, `.spectrum-Stepper.hide-stepper .spectrum-Stepper-input`.", + "control": "text", + "category": "Component" + }, + "spectrum-stepper-border-color": { + "description": "Defined in `.spectrum-Stepper`.
Used by `--mod-textfield-border-color`, `--mod-infield-button-border-color`, `--mod-infield-button-border-color-quiet`, `.spectrum-Stepper-buttons`.", + "control": "color", + "category": "Component" + }, + "spectrum-stepper-border-color-default": { + "description": "Defined in `.spectrum-Stepper`.
Used by `--spectrum-stepper-border-color`.", + "control": "color", + "category": "Component" + }, + "spectrum-stepper-border-radius": { + "description": "Defined in `.spectrum-Stepper`.
Used by `.spectrum-Stepper`, `.spectrum-Stepper-buttons, .spectrum-Stepper.hide-stepper .spectrum-Stepper-input`.", + "control": "text", + "category": "Component" + }, + "spectrum-stepper-focus-indicator-width": { + "description": "Defined in `.spectrum-Stepper`.
Used by `.spectrum-Stepper.is-keyboardFocused:not(.is-disabled), .spectrum-Stepper:not(.is-disabled):focus-visible`, `.spectrum-Stepper--quiet:after`.", + "control": "text", + "category": "Component" + }, + "spectrum-stepper-focus-indicator-gap": { + "description": "Defined in `.spectrum-Stepper`.
Used by `.spectrum-Stepper.is-keyboardFocused:not(.is-disabled), .spectrum-Stepper:not(.is-disabled):focus-visible`, `.spectrum-Stepper--quiet:after`.", + "control": "text", + "category": "Component" + }, + "spectrum-stepper-focus-indicator-color": { + "description": "Defined in `.spectrum-Stepper`.
Used by `.spectrum-Stepper.is-keyboardFocused:not(.is-disabled), .spectrum-Stepper:not(.is-disabled):focus-visible`, `.spectrum-Stepper--quiet:after`.", + "control": "color", + "category": "Component" + }, + "spectrum-stepper-animation-duration": { + "description": "Defined in `.spectrum-Stepper`.
Used by `.spectrum-Stepper-buttons`.", + "control": "text", + "category": "Component" + }, + "spectrum-stepper-button-width": { + "description": "Defined in `.spectrum-Stepper, .spectrum-Stepper.spectrum-Stepper--sizeM`, `.spectrum-Stepper.spectrum-Stepper--sizeS`, `.spectrum-Stepper.spectrum-Stepper--sizeL`, `.spectrum-Stepper.spectrum-Stepper--sizeXL`.
Used by `--mod-infield-button-width-stacked`, `--spectrum-stepper-width`, `.spectrum-Stepper-buttons`.", + "control": "text", + "category": "Component" + }, + "spectrum-stepper-height": { + "description": "Defined in `.spectrum-Stepper, .spectrum-Stepper.spectrum-Stepper--sizeM`, `.spectrum-Stepper.spectrum-Stepper--sizeS`, `.spectrum-Stepper.spectrum-Stepper--sizeL`, `.spectrum-Stepper.spectrum-Stepper--sizeXL`.
Used by `--spectrum-stepper-width`, `.spectrum-Stepper`, `.spectrum-Stepper-buttons`.", + "control": "text", + "category": "Component" + }, + "spectrum-stepper-buttons-border-width": { + "description": "Defined in `.spectrum-Stepper.is-disabled`, `.spectrum-Stepper`.
Used by `.spectrum-Stepper-buttons`.", + "control": "text", + "category": "Component" + }, + "spectrum-stepper-button-border-width-disabled": { + "description": "Defined in `.spectrum-Stepper`.
Used by `--spectrum-stepper-buttons-border-width`.", + "control": "text", + "category": "Component" + }, + "spectrum-stepper-buttons-background-color": { + "description": "Defined in `.spectrum-Stepper.is-disabled`, `.spectrum-Stepper`.
Used by `.spectrum-Stepper-buttons`.", + "control": "color", + "category": "Component" + }, + "spectrum-stepper-buttons-background-color-disabled": { + "description": "Defined in `.spectrum-Stepper`.
Used by `--spectrum-stepper-buttons-background-color`.", + "control": "color", + "category": "Component" + }, + "spectrum-stepper-border-color-focus": { + "description": "Defined in `.spectrum-Stepper`.
Used by `--mod-stepper-border-color`, `--mod-stepper-buttons-border-color`, `--mod-infield-button-border-color`.", + "control": "color", + "category": "Component" + }, + "spectrum-stepper-border-color-keyboard-focus": { + "description": "Defined in `.spectrum-Stepper`.
Used by `--mod-stepper-border-color`, `--mod-textfield-border-color`, `--mod-infield-button-border-color`.", + "control": "color", + "category": "Component" + }, + "spectrum-stepper-buttons-border-color": { + "description": "Defined in `.spectrum-Stepper`.
Used by `--mod-infield-button-border-color`.", + "control": "color", + "category": "Component" + }, + "spectrum-stepper-button-border-width": { + "description": "Defined in `.spectrum-Stepper`.
Used by `--mod-infield-button-border-width`.", + "control": "text", + "category": "Component" + }, + "spectrum-stepper-border-color-disabled": { + "description": "Defined in `.spectrum-Stepper`.
Used by `--mod-textfield-border-color-disabled`.", + "control": "color", + "category": "Component" + }, + "spectrum-stepper-buttons-border-color-focus": { + "description": "Defined in `.spectrum-Stepper`.
Used by `--mod-infield-button-border-color`.", + "control": "color", + "category": "Component" + }, + "spectrum-stepper-buttons-border-color-keyboard-focus": { + "description": "Defined in `.spectrum-Stepper`.
Used by `--mod-infield-button-border-color`.", + "control": "color", + "category": "Component" + }, + "spectrum-stepper-border-color-invalid": { + "description": "Defined in `.spectrum-Stepper`.
Used by `--mod-infield-button-border-color`.", + "control": "color", + "category": "Component" + }, + "spectrum-stepper-border-color-focus-invalid": { + "description": "Defined in `.spectrum-Stepper`.
Used by `--mod-infield-button-border-color`.", + "control": "color", + "category": "Component" + }, + "spectrum-stepper-border-color-keyboard-focus-invalid": { + "description": "Defined in `.spectrum-Stepper`.
Used by `--mod-infield-button-border-color`.", + "control": "color", + "category": "Component" + }, + "spectrum-stepper-button-edge-to-fill": { + "description": "Defined in `.spectrum-Stepper--quiet`.
Used by `--mod-infield-button-inner-edge-to-fill`, `--mod-infield-button-edge-to-fill`.", + "control": "text", + "category": "Component" + }, + "spectrum-stepper-border-color-hover": { + "description": "Defined in `.spectrum-Stepper`.
Used by `--mod-textfield-border-color-hover`, `--mod-stepper-border-color`, `--mod-infield-button-border-color`.", + "control": "color", + "category": "Component" + }, + "spectrum-stepper-border-color-focus-hover": { + "description": "Defined in `.spectrum-Stepper`.
Used by `--mod-stepper-border-color`, `--mod-stepper-buttons-border-color`, `--mod-textfield-border-color`, `--mod-infield-button-border-color`.", + "control": "color", + "category": "Component" + }, + "spectrum-stepper-buttons-border-color-hover": { + "description": "Defined in `.spectrum-Stepper`.
Used by `--mod-infield-button-border-color`.", + "control": "color", + "category": "Component" + }, + "spectrum-stepper-buttons-border-color-focus-hover": { + "description": "Used by `--mod-infield-button-border-color`.", + "control": "color", + "category": "Component" + }, + "spectrum-stepper-border-color-focus-hover-invalid": { + "description": "Defined in `.spectrum-Stepper`.
Used by `--mod-infield-button-border-color`.", + "control": "color", + "category": "Component" + }, + "spectrum-stepper-width": { + "description": "Defined in `.spectrum-Stepper`.
Used by `.spectrum-Stepper`.", + "control": "text", + "category": "Component" + }, + "spectrum-stepper-buttons-border-style": { + "description": "Defined in `.spectrum-Stepper`, `.spectrum-Stepper--quiet`.
Used by `.spectrum-Stepper-buttons`.", + "control": "text", + "category": "Component" + } + }, + "global": { + "spectrum-border-width-100": { + "value": "1px", + "description": "Used by `--system-stepper-border-width`, `--system-stepper-button-border-width`.", + "control": "text", + "category": "Global" + }, + "spectrum-gray-500": { + "value": "light-dark(rgb(143, 143, 143), rgb(109, 109, 109))", + "description": "Used by `--system-stepper-border-color-default`, `--system-stepper-buttons-border-color`.", + "control": "text", + "category": "Global" + }, + "spectrum-gray-600": { + "value": "light-dark(rgb(113, 113, 113), rgb(138, 138, 138))", + "description": "Used by `--system-stepper-border-color-hover`, `--system-stepper-buttons-border-color-hover`.", + "control": "text", + "category": "Global" + }, + "spectrum-gray-800": { + "value": "light-dark(rgb(41, 41, 41), rgb(219, 219, 219))", + "description": "Used by `--system-stepper-border-color-focus`, `--system-stepper-border-color-keyboard-focus`, `--system-stepper-buttons-border-color-focus`, `--system-stepper-buttons-border-color-keyboard-focus`.", + "control": "text", + "category": "Global" + }, + "spectrum-gray-900": { + "value": "light-dark(rgb(19, 19, 19), rgb(242, 242, 242))", + "description": "Used by `--system-stepper-border-color-focus-hover`.", + "control": "text", + "category": "Global" + }, + "spectrum-gray-100": { + "value": "light-dark(rgb(233, 233, 233), rgb(44, 44, 44))", + "description": "Used by `--system-stepper-buttons-background-color`.", + "control": "text", + "category": "Global" + }, + "spectrum-negative-border-color-default": { + "value": "var(--spectrum-negative-color-900)", + "description": "Used by `--system-stepper-border-color-invalid`, `--mod-stepper-border-color`.", + "control": "color", + "category": "Global" + }, + "spectrum-negative-border-color-focus": { + "value": "var(--spectrum-negative-color-1000)", + "description": "Used by `--system-stepper-border-color-focus-invalid`, `--mod-stepper-border-color-focus`.", + "control": "color", + "category": "Global" + }, + "spectrum-negative-border-color-focus-hover": { + "value": "var(--spectrum-negative-border-color-down)", + "description": "Used by `--system-stepper-border-color-focus-hover-invalid`, `--mod-stepper-border-color-focus-hover`.", + "control": "color", + "category": "Global" + }, + "spectrum-negative-border-color-key-focus": { + "value": "var(--spectrum-negative-color-1000)", + "description": "Used by `--system-stepper-border-color-keyboard-focus-invalid`, `--mod-stepper-border-color-keyboard-focus`.", + "control": "color", + "category": "Global" + }, + "spectrum-gray-300": { + "value": "light-dark(rgb(218, 218, 218), rgb(57, 57, 57))", + "description": "Used by `--system-stepper-border-color-disabled`.", + "control": "text", + "category": "Global" + }, + "spectrum-border-width-200": { + "value": "2px", + "description": "Used by `--system-stepper-button-border-width-disabled`.", + "control": "text", + "category": "Global" + }, + "spectrum-gray-50": { + "value": "light-dark(rgb(248, 248, 248), rgb(27, 27, 27))", + "description": "Used by `--system-stepper-buttons-background-color-disabled`.", + "control": "text", + "category": "Global" + }, + "spectrum-corner-radius-100": { + "value": "8px", + "description": "Used by `--spectrum-stepper-border-radius`.", + "control": "text", + "category": "Global" + }, + "spectrum-focus-indicator-thickness": { + "value": "2px", + "description": "Used by `--spectrum-stepper-focus-indicator-width`.", + "control": "text", + "category": "Global" + }, + "spectrum-focus-indicator-gap": { + "value": "2px", + "description": "Used by `--spectrum-stepper-focus-indicator-gap`.", + "control": "text", + "category": "Global" + }, + "spectrum-focus-indicator-color": { + "value": "var(--spectrum-blue-800)", + "description": "Used by `--spectrum-stepper-focus-indicator-color`.", + "control": "color", + "category": "Global" + }, + "spectrum-animation-duration-100": { + "description": "Used by `--spectrum-stepper-animation-duration`.", + "control": "text", + "category": "Global" + }, + "spectrum-in-field-button-width-stacked-medium": { + "value": "28px", + "description": "Used by `--spectrum-stepper-button-width`.", + "control": "text", + "category": "Global" + }, + "spectrum-component-height-100": { + "value": "32px", + "description": "Used by `--spectrum-stepper-height`.", + "control": "text", + "category": "Global" + }, + "spectrum-in-field-button-width-stacked-small": { + "value": "20px", + "description": "Used by `--spectrum-stepper-button-width`.", + "control": "text", + "category": "Global" + }, + "spectrum-component-height-75": { + "value": "24px", + "description": "Used by `--spectrum-stepper-height`.", + "control": "text", + "category": "Global" + }, + "spectrum-in-field-button-width-stacked-large": { + "value": "36px", + "description": "Used by `--spectrum-stepper-button-width`.", + "control": "text", + "category": "Global" + }, + "spectrum-component-height-200": { + "value": "40px", + "description": "Used by `--spectrum-stepper-height`.", + "control": "text", + "category": "Global" + }, + "spectrum-in-field-button-width-stacked-extra-large": { + "value": "44px", + "description": "Used by `--spectrum-stepper-button-width`.", + "control": "text", + "category": "Global" + }, + "spectrum-component-height-300": { + "value": "48px", + "description": "Used by `--spectrum-stepper-height`.", + "control": "text", + "category": "Global" + }, + "spectrum-negative-border-color-hover": { + "value": "var(--spectrum-negative-color-1000)", + "description": "Used by `--mod-stepper-border-color-hover`, `--mod-infield-button-border-color`.", + "control": "color", + "category": "Global" + }, + "spectrum-disabled-border-color": { + "value": "var(--spectrum-gray-300)", + "description": "Used by `--mod-infield-button-border-color-quiet-disabled`.", + "control": "color", + "category": "Global" + }, + "spectrum-text-field-minimum-width-multiplier": { + "value": "1.5", + "description": "Used by `--spectrum-stepper-width`.", + "control": "text", + "category": "Global" + } + }, + "system-theme": { + "system-stepper-border-width": { + "description": "Defined in `.spectrum`.
Used by `--spectrum-stepper-border-width`.", + "control": "text" + }, + "system-stepper-border-color-default": { + "description": "Defined in `.spectrum`.
Used by `--spectrum-stepper-border-color-default`.", + "control": "color" + }, + "system-stepper-border-color-hover": { + "description": "Defined in `.spectrum`.
Used by `--spectrum-stepper-border-color-hover`.", + "control": "color" + }, + "system-stepper-border-color-focus": { + "description": "Defined in `.spectrum`.
Used by `--spectrum-stepper-border-color-focus`.", + "control": "color" + }, + "system-stepper-border-color-focus-hover": { + "description": "Defined in `.spectrum`.
Used by `--spectrum-stepper-border-color-focus-hover`.", + "control": "color" + }, + "system-stepper-border-color-keyboard-focus": { + "description": "Defined in `.spectrum`.
Used by `--spectrum-stepper-border-color-keyboard-focus`.", + "control": "color" + }, + "system-stepper-buttons-border-style": { + "description": "Defined in `.spectrum`.
Used by `--spectrum-stepper-buttons-border-style`.", + "control": "text" + }, + "system-stepper-buttons-border-width": { + "description": "Defined in `.spectrum`.
Used by `--spectrum-stepper-buttons-border-width`.", + "control": "text" + }, + "system-stepper-buttons-border-color": { + "description": "Defined in `.spectrum`.
Used by `--spectrum-stepper-buttons-border-color`.", + "control": "color" + }, + "system-stepper-buttons-background-color": { + "description": "Defined in `.spectrum`.
Used by `--spectrum-stepper-buttons-background-color`.", + "control": "color" + }, + "system-stepper-buttons-border-color-hover": { + "description": "Defined in `.spectrum`.
Used by `--spectrum-stepper-buttons-border-color-hover`.", + "control": "color" + }, + "system-stepper-buttons-border-color-focus": { + "description": "Defined in `.spectrum`.
Used by `--spectrum-stepper-buttons-border-color-focus`.", + "control": "color" + }, + "system-stepper-buttons-border-color-keyboard-focus": { + "description": "Defined in `.spectrum`.
Used by `--spectrum-stepper-buttons-border-color-keyboard-focus`.", + "control": "color" + }, + "system-stepper-button-border-width": { + "description": "Defined in `.spectrum`.
Used by `--spectrum-stepper-button-border-width`.", + "control": "text" + }, + "system-stepper-border-color-invalid": { + "description": "Defined in `.spectrum`.
Used by `--spectrum-stepper-border-color-invalid`.", + "control": "color" + }, + "system-stepper-border-color-focus-invalid": { + "description": "Defined in `.spectrum`.
Used by `--spectrum-stepper-border-color-focus-invalid`.", + "control": "color" + }, + "system-stepper-border-color-focus-hover-invalid": { + "description": "Defined in `.spectrum`.
Used by `--spectrum-stepper-border-color-focus-hover-invalid`.", + "control": "color" + }, + "system-stepper-border-color-keyboard-focus-invalid": { + "description": "Defined in `.spectrum`.
Used by `--spectrum-stepper-border-color-keyboard-focus-invalid`.", + "control": "color" + }, + "system-stepper-border-color-disabled": { + "description": "Defined in `.spectrum`.
Used by `--spectrum-stepper-border-color-disabled`.", + "control": "color" + }, + "system-stepper-button-border-width-disabled": { + "description": "Defined in `.spectrum`.
Used by `--spectrum-stepper-button-border-width-disabled`.", + "control": "text" + }, + "system-stepper-buttons-background-color-disabled": { + "description": "Defined in `.spectrum`.
Used by `--spectrum-stepper-buttons-background-color-disabled`.", + "control": "color" + }, + "system-stepper-quiet-buttons-border-style": { + "description": "Defined in `.spectrum`.
Used by `--spectrum-stepper-buttons-border-style`.", + "control": "text" + }, + "system-stepper-quiet-button-edge-to-fill": { + "description": "Defined in `.spectrum`.
Used by `--spectrum-stepper-button-edge-to-fill`.", + "control": "text" + } + }, + "passthroughs": { + "mod-infield-button-border-color": { + "category": "Passthrough" + }, + "mod-infield-button-border-color-quiet-disabled": { + "category": "Passthrough" + }, + "mod-infield-button-border-width": { + "category": "Passthrough" + }, + "mod-textfield-border-width": { + "category": "Passthrough" + }, + "mod-textfield-border-color": { + "category": "Passthrough" + }, + "mod-textfield-border-color-disabled": { + "category": "Passthrough" + }, + "mod-textfield-focus-indicator-width": { + "category": "Passthrough" + }, + "mod-textfield-icon-spacing-inline-start-invalid": { + "category": "Passthrough" + }, + "mod-infield-button-width-stacked": { + "category": "Passthrough" + }, + "mod-infield-button-border-color-quiet": { + "category": "Passthrough" + }, + "mod-infield-button-border-block-end-width": { + "category": "Passthrough" + }, + "mod-infield-button-stacked-bottom-border-block-end-width": { + "category": "Passthrough" + }, + "mod-infield-button-stacked-bottom-border-radius-end-end": { + "category": "Passthrough" + }, + "mod-infield-button-stacked-bottom-border-radius-end-start": { + "category": "Passthrough" + }, + "mod-infield-button-fill-justify-content": { + "category": "Passthrough" + }, + "mod-infield-button-inner-edge-to-fill": { + "category": "Passthrough" + }, + "mod-infield-button-edge-to-fill": { + "category": "Passthrough" + }, + "mod-textfield-focus-indicator-color": { + "category": "Passthrough" + }, + "mod-textfield-background-color": { + "category": "Passthrough" + }, + "mod-textfield-border-color-hover": { + "category": "Passthrough" + } + }, + "high-contrast": { + "highcontrast-stepper-border-color": { + "value": "var(--mod-stepper-border-color-hover, var(--spectrum-stepper-border-color-hover))", + "description": "Defined in `.spectrum-Stepper`, `.spectrum-Stepper.is-invalid`, `.spectrum-Stepper.is-disabled`, `.spectrum-Stepper.is-focused:not(.is-disabled), .spectrum-Stepper:not(.is-disabled):focus`, `.spectrum-Stepper:not(.is-disabled):hover`, `.spectrum-Stepper.is-focused:not(.is-disabled):hover, \t.spectrum-Stepper:not(.is-disabled):focus:hover`, `.spectrum-Stepper.is-keyboardFocused:not(.is-disabled), .spectrum-Stepper:not(.is-disabled):focus-visible`.
Used by `--highcontrast-textfield-border-color`, `--highcontrast-infield-button-border-color`, `--highcontrast-infield-button-border-color-active`, `--spectrum-stepper-border-color`, `--mod-infield-button-border-color`, `--mod-textfield-border-color-hover`.
Defaults to `var(--mod-stepper-border-color-hover, var(--spectrum-stepper-border-color-hover))`, if not set.", + "control": "color" + }, + "highcontrast-stepper-border-color-hover": { + "value": "var(--mod-stepper-border-color-hover, var(--spectrum-stepper-border-color-hover))", + "description": "Defined in `.spectrum-Stepper`, `.spectrum-Stepper.is-invalid`.
Used by `--highcontrast-stepper-border-color`, `--mod-stepper-border-color`.
Defaults to `var(--mod-stepper-border-color-hover, var(--spectrum-stepper-border-color-hover))`, if not set.", + "control": "color" + }, + "highcontrast-stepper-border-color-focus": { + "value": "var(--mod-stepper-buttons-border-color-focus, var(--spectrum-stepper-buttons-border-color-focus))", + "description": "Defined in `.spectrum-Stepper`, `.spectrum-Stepper.is-invalid`.
Used by `--highcontrast-stepper-border-color`, `--mod-stepper-border-color`, `--mod-stepper-buttons-border-color`, `--mod-infield-button-border-color`.
Defaults to `var(--mod-stepper-buttons-border-color-focus, var(--spectrum-stepper-buttons-border-color-focus))`, if not set.", + "control": "color" + }, + "highcontrast-stepper-border-color-focus-hover": { + "value": "var(--mod-stepper-border-color-focus-hover, var(--spectrum-stepper-border-color-focus-hover))", + "description": "Defined in `.spectrum-Stepper`, `.spectrum-Stepper.is-invalid`.
Used by `--highcontrast-stepper-border-color`, `--mod-stepper-border-color`, `--mod-stepper-buttons-border-color`, `--mod-textfield-border-color`.
Defaults to `var(--mod-stepper-border-color-focus-hover, var(--spectrum-stepper-border-color-focus-hover))`, if not set.", + "control": "color" + }, + "highcontrast-stepper-border-color-keyboard-focus": { + "value": "var(--mod-stepper-border-color-keyboard-focus, var(--spectrum-stepper-border-color-keyboard-focus))", + "description": "Defined in `.spectrum-Stepper`, `.spectrum-Stepper.is-invalid`.
Used by `--highcontrast-stepper-border-color`, `--mod-infield-button-border-color`, `--mod-textfield-border-color`.
Defaults to `var(--mod-stepper-border-color-keyboard-focus, var(--spectrum-stepper-border-color-keyboard-focus))`, if not set.", + "control": "color" + }, + "highcontrast-stepper-focus-indicator-color": { + "value": "var(--mod-stepper-focus-indicator-color, var(--spectrum-focus-indicator-color))", + "description": "Defined in `.spectrum-Stepper`.
Used by `--spectrum-stepper-focus-indicator-color`.
Defaults to `var(--mod-stepper-focus-indicator-color, var(--spectrum-focus-indicator-color))`, if not set.", + "control": "color" + }, + "highcontrast-stepper-buttons-border-width": { + "value": "var(--mod-stepper-buttons-border-width, var(--spectrum-stepper-buttons-border-width))", + "description": "Defined in `.spectrum-Stepper.is-disabled`.
Used by `.spectrum-Stepper-buttons`.
Defaults to `var(--mod-stepper-buttons-border-width, var(--spectrum-stepper-buttons-border-width))`, if not set.", + "control": "text" + }, + "highcontrast-textfield-border-color": { + "description": "Defined in `.spectrum-Stepper-input`.", + "control": "color" + }, + "highcontrast-infield-button-border-color": { + "description": "Defined in `.spectrum-Stepper-button`.", + "control": "color" + }, + "highcontrast-infield-button-border-color-active": { + "description": "Defined in `.spectrum-Stepper-button`.", + "control": "color" + } + } } diff --git a/components/stepper/stories/stepper.stories.js b/components/stepper/stories/stepper.stories.js index 8775574a342..342abe3437d 100644 --- a/components/stepper/stories/stepper.stories.js +++ b/components/stepper/stories/stepper.stories.js @@ -1,11 +1,13 @@ import { Sizes } from "@spectrum-css/preview/decorators"; import { disableDefaultModes } from "@spectrum-css/preview/modes"; import { isDisabled, isFocused, isHovered, isInvalid, isKeyboardFocused, isQuiet, size } from "@spectrum-css/preview/types"; -import metadata from "../dist/metadata.json"; -import packageJson from "../package.json"; import { StepperGroup } from "./stepper.test.js"; import { AllDefaultVariantsGroup, DisabledVariantsGroup, Template } from "./template.js"; +// Local assets to render the component styles and structure +import metadata from "../dist/metadata.json"; +import packageJson from "../package.json"; + /** * A stepper can be used to increment or decrement a value by a specified amount via an up/down button. An input field displays the current value. */ @@ -48,6 +50,7 @@ export default { }, packageJson, metadata, + cssprops: metadata.modifiers, }, }; diff --git a/components/swatch/dist/metadata.json b/components/swatch/dist/metadata.json index 896cc7acc7c..394529b3357 100644 --- a/components/swatch/dist/metadata.json +++ b/components/swatch/dist/metadata.json @@ -7,20 +7,20 @@ ".spectrum-Swatch--lightBorder .spectrum-Swatch-fill:before", ".spectrum-Swatch--noBorder .spectrum-Swatch-fill:before", ".spectrum-Swatch--rectangle", - ".spectrum-Swatch--roundingFull.is-selected:not(.spectrum-Swatch--rectangle) .spectrum-Swatch-fill", - ".spectrum-Swatch--roundingFull.is-selected:not(.spectrum-Swatch--rectangle) .spectrum-Swatch-fill:before", ".spectrum-Swatch--roundingFull:not(.spectrum-Swatch--rectangle)", ".spectrum-Swatch--roundingFull:not(.spectrum-Swatch--rectangle) .spectrum-Swatch-fill", ".spectrum-Swatch--roundingFull:not(.spectrum-Swatch--rectangle) .spectrum-Swatch-fill:before", ".spectrum-Swatch--roundingFull:not(.spectrum-Swatch--rectangle):after", ".spectrum-Swatch--roundingFull:not(.spectrum-Swatch--rectangle):before", + ".spectrum-Swatch--roundingFull.is-selected:not(.spectrum-Swatch--rectangle) .spectrum-Swatch-fill", + ".spectrum-Swatch--roundingFull.is-selected:not(.spectrum-Swatch--rectangle) .spectrum-Swatch-fill:before", ".spectrum-Swatch--roundingNone", ".spectrum-Swatch--roundingNone .spectrum-Swatch-fill", ".spectrum-Swatch--roundingNone .spectrum-Swatch-fill:before", - ".spectrum-Swatch--roundingNone.is-selected .spectrum-Swatch-fill", - ".spectrum-Swatch--roundingNone.is-selected .spectrum-Swatch-fill:before", ".spectrum-Swatch--roundingNone:after", ".spectrum-Swatch--roundingNone:before", + ".spectrum-Swatch--roundingNone.is-selected .spectrum-Swatch-fill", + ".spectrum-Swatch--roundingNone.is-selected .spectrum-Swatch-fill:before", ".spectrum-Swatch--sizeL", ".spectrum-Swatch--sizeM", ".spectrum-Swatch--sizeS", @@ -32,6 +32,9 @@ ".spectrum-Swatch-fill:before", ".spectrum-Swatch-image", ".spectrum-Swatch-mixedValueIcon", + ".spectrum-Swatch:after", + ".spectrum-Swatch:before", + ".spectrum-Swatch:focus-visible:after", ".spectrum-Swatch.is-disabled", ".spectrum-Swatch.is-disabled .spectrum-Swatch-disabledIcon", ".spectrum-Swatch.is-image .spectrum-Swatch-fill:before", @@ -44,95 +47,428 @@ ".spectrum-Swatch.is-selected .spectrum-Swatch-fill", ".spectrum-Swatch.is-selected .spectrum-Swatch-fill:before", ".spectrum-Swatch.is-selected:before", - ".spectrum-Swatch:after", - ".spectrum-Swatch:before", - ".spectrum-Swatch:focus-visible:after", ".spectrum-Swatch[disabled]", ".spectrum-Swatch[disabled] .spectrum-Swatch-disabledIcon" ], - "modifiers": [ - "--mod-animation-duration-100", - "--mod-swatch-border-color", - "--mod-swatch-border-color-light", - "--mod-swatch-border-color-selected", - "--mod-swatch-border-radius", - "--mod-swatch-border-thickness", - "--mod-swatch-border-thickness-selected", - "--mod-swatch-disabled-icon-color", - "--mod-swatch-disabled-icon-size", - "--mod-swatch-focus-indicator-border-radius", - "--mod-swatch-focus-indicator-color", - "--mod-swatch-focus-indicator-gap", - "--mod-swatch-focus-indicator-thickness", - "--mod-swatch-icon-border-color", - "--mod-swatch-inner-border-color-selected", - "--mod-swatch-size", - "--mod-swatch-slash-icon-color", - "--mod-swatch-slash-thickness" - ], - "component": [ - "--spectrum-swatch-border-color", - "--spectrum-swatch-border-color-light", - "--spectrum-swatch-border-color-opacity", - "--spectrum-swatch-border-color-selected", - "--spectrum-swatch-border-radius", - "--spectrum-swatch-border-thickness", - "--spectrum-swatch-border-thickness-selected", - "--spectrum-swatch-dash-icon-color", - "--spectrum-swatch-disabled-icon-border-opacity", - "--spectrum-swatch-disabled-icon-color", - "--spectrum-swatch-disabled-icon-size", - "--spectrum-swatch-focus-indicator-border-radius", - "--spectrum-swatch-focus-indicator-color", - "--spectrum-swatch-focus-indicator-gap", - "--spectrum-swatch-focus-indicator-thickness", - "--spectrum-swatch-icon-border-color", - "--spectrum-swatch-inner-border-color-selected", - "--spectrum-swatch-size", - "--spectrum-swatch-size-extra-small", - "--spectrum-swatch-size-large", - "--spectrum-swatch-size-medium", - "--spectrum-swatch-size-small", - "--spectrum-swatch-slash-icon-color", - "--spectrum-swatch-slash-thickness", - "--spectrum-swatch-slash-thickness-extra-small", - "--spectrum-swatch-slash-thickness-large", - "--spectrum-swatch-slash-thickness-medium", - "--spectrum-swatch-slash-thickness-small" - ], - "global": [ - "--spectrum-animation-duration-100", - "--spectrum-black-rgb", - "--spectrum-border-width-100", - "--spectrum-border-width-200", - "--spectrum-corner-radius-75", - "--spectrum-focus-indicator-color", - "--spectrum-focus-indicator-gap", - "--spectrum-focus-indicator-thickness", - "--spectrum-gray-1000-rgb", - "--spectrum-gray-25", - "--spectrum-gray-800", - "--spectrum-gray-900", - "--spectrum-picked-color", - "--spectrum-red-900", - "--spectrum-white", - "--spectrum-workflow-icon-size-100", - "--spectrum-workflow-icon-size-200", - "--spectrum-workflow-icon-size-50", - "--spectrum-workflow-icon-size-75" - ], - "system-theme": [ - "--system-swatch-border-color", - "--system-swatch-border-radius", - "--system-swatch-inner-border-color-selected" - ], - "passthroughs": [], - "high-contrast": [ - "--highcontrast-swatch-background-color-selected", - "--highcontrast-swatch-border-color", - "--highcontrast-swatch-border-color-selected", - "--highcontrast-swatch-disabled-icon-color", - "--highcontrast-swatch-fill-foreground-color", - "--highcontrast-swatch-focus-indicator-color" - ] + "modifiers": { + "mod-swatch-size": { + "value": "var(--spectrum-swatch-size)", + "description": "Used by `.spectrum-Swatch`, `.spectrum-Swatch--rectangle`.
Defaults to `var(--spectrum-swatch-size)`, if not set.", + "control": "text", + "category": "Modifier" + }, + "mod-swatch-disabled-icon-size": { + "value": "var(--spectrum-swatch-disabled-icon-size)", + "description": "Used by `.spectrum-Swatch .spectrum-Swatch-disabledIcon`.
Defaults to `var(--spectrum-swatch-disabled-icon-size)`, if not set.", + "control": "text", + "category": "Modifier" + }, + "mod-swatch-border-radius": { + "value": "var(--spectrum-swatch-border-radius)", + "description": "Used by `.spectrum-Swatch, .spectrum-Swatch:before`, `.spectrum-Swatch-fill, .spectrum-Swatch-fill:before`.
Defaults to `var(--spectrum-swatch-border-radius)`, if not set.", + "control": "text", + "category": "Modifier" + }, + "mod-swatch-inner-border-color-selected": { + "value": "var(--spectrum-swatch-inner-border-color-selected)", + "description": "Used by `.spectrum-Swatch.is-selected`.
Defaults to `var(--spectrum-swatch-inner-border-color-selected)`, if not set.", + "control": "color", + "category": "Modifier" + }, + "mod-swatch-border-thickness-selected": { + "value": "var(--spectrum-swatch-border-thickness-selected)", + "description": "Used by `.spectrum-Swatch.is-selected .spectrum-Swatch-fill`, `.spectrum-Swatch:before`, `.spectrum-Swatch--roundingFull.is-selected:not(.spectrum-Swatch--rectangle) .spectrum-Swatch-fill`.
Defaults to `var(--spectrum-swatch-border-thickness-selected)`, if not set.", + "control": "text", + "category": "Modifier" + }, + "mod-swatch-slash-thickness": { + "value": "var(--spectrum-swatch-slash-thickness)", + "description": "Used by `.spectrum-Swatch.is-nothing .spectrum-Swatch-fill:after`.
Defaults to `var(--spectrum-swatch-slash-thickness)`, if not set.", + "control": "text", + "category": "Modifier" + }, + "mod-swatch-slash-icon-color": { + "value": "var(--spectrum-swatch-slash-icon-color)", + "description": "Used by `.spectrum-Swatch.is-nothing .spectrum-Swatch-fill:after`.
Defaults to `var(--spectrum-swatch-slash-icon-color)`, if not set.", + "control": "color", + "category": "Modifier" + }, + "mod-swatch-border-color-selected": { + "value": "var(--spectrum-swatch-border-color-selected)", + "description": "Used by `.spectrum-Swatch:before`.
Defaults to `var(--spectrum-swatch-border-color-selected)`, if not set.", + "control": "color", + "category": "Modifier" + }, + "mod-swatch-focus-indicator-gap": { + "value": "var(--spectrum-swatch-focus-indicator-gap)", + "description": "Used by `.spectrum-Swatch:after`.
Defaults to `var(--spectrum-swatch-focus-indicator-gap)`, if not set.", + "control": "text", + "category": "Modifier" + }, + "mod-swatch-focus-indicator-thickness": { + "value": "var(--spectrum-swatch-focus-indicator-thickness)", + "description": "Used by `.spectrum-Swatch:after`.
Defaults to `var(--spectrum-swatch-focus-indicator-thickness)`, if not set.", + "control": "text", + "category": "Modifier" + }, + "mod-swatch-focus-indicator-color": { + "value": "var(--spectrum-swatch-focus-indicator-color)", + "description": "Used by `.spectrum-Swatch:after`.
Defaults to `var(--spectrum-swatch-focus-indicator-color)`, if not set.", + "control": "color", + "category": "Modifier" + }, + "mod-swatch-focus-indicator-border-radius": { + "value": "var(--spectrum-swatch-focus-indicator-border-radius)", + "description": "Used by `.spectrum-Swatch:after`.
Defaults to `var(--spectrum-swatch-focus-indicator-border-radius)`, if not set.", + "control": "text", + "category": "Modifier" + }, + "mod-animation-duration-100": { + "value": "var(--spectrum-animation-duration-100)", + "description": "Used by `.spectrum-Swatch:after`, `.spectrum-Swatch-image`.
Defaults to `var(--spectrum-animation-duration-100)`, if not set.", + "control": "text", + "category": "Modifier" + }, + "mod-swatch-border-thickness": { + "value": "var(--spectrum-swatch-border-thickness)", + "description": "Used by `.spectrum-Swatch-fill:before`, `.spectrum-Swatch--lightBorder .spectrum-Swatch-fill:before`.
Defaults to `var(--spectrum-swatch-border-thickness)`, if not set.", + "control": "text", + "category": "Modifier" + }, + "mod-swatch-border-color": { + "value": "var(--spectrum-gray-900)", + "description": "Used by `.spectrum-Swatch-fill:before`.
Defaults to `var(--spectrum-swatch-border-color)`, if not set.", + "control": "color", + "category": "Modifier" + }, + "mod-swatch-border-color-light": { + "value": "var(--spectrum-swatch-border-color-light)", + "description": "Used by `.spectrum-Swatch--lightBorder .spectrum-Swatch-fill:before`.
Defaults to `var(--spectrum-swatch-border-color-light)`, if not set.", + "control": "color", + "category": "Modifier" + }, + "mod-swatch-disabled-icon-color": { + "value": "var(--spectrum-swatch-disabled-icon-color)", + "description": "Used by `.spectrum-Swatch-disabledIcon`, `.spectrum-Swatch-disabledIcon path:first-child`.
Defaults to `var(--spectrum-swatch-disabled-icon-color)`, if not set.", + "control": "color", + "category": "Modifier" + }, + "mod-swatch-icon-border-color": { + "value": "var(--spectrum-swatch-icon-border-color)", + "description": "Used by `.spectrum-Swatch-disabledIcon path:last-child`.
Defaults to `var(--spectrum-swatch-icon-border-color)`, if not set.", + "control": "color", + "category": "Modifier" + } + }, + "component": { + "spectrum-swatch-border-color-opacity": { + "description": "Used by `--system-swatch-border-color`.", + "control": "color", + "category": "Component" + }, + "spectrum-swatch-size": { + "description": "Defined in `.spectrum-Swatch, .spectrum-Swatch--sizeS`, `.spectrum-Swatch--sizeXS`, `.spectrum-Swatch--sizeM`, `.spectrum-Swatch--sizeL`.
Used by `.spectrum-Swatch`, `.spectrum-Swatch--rectangle`.", + "control": "text", + "category": "Component" + }, + "spectrum-swatch-size-small": { + "value": "24px", + "description": "Used by `--spectrum-swatch-size`.", + "control": "text", + "category": "Component" + }, + "spectrum-swatch-disabled-icon-size": { + "description": "Defined in `.spectrum-Swatch, .spectrum-Swatch--sizeS`, `.spectrum-Swatch--sizeXS`, `.spectrum-Swatch--sizeM`, `.spectrum-Swatch--sizeL`.
Used by `.spectrum-Swatch .spectrum-Swatch-disabledIcon`.", + "control": "text", + "category": "Component" + }, + "spectrum-swatch-slash-thickness": { + "description": "Defined in `.spectrum-Swatch, .spectrum-Swatch--sizeS`, `.spectrum-Swatch--sizeXS`, `.spectrum-Swatch--sizeM`, `.spectrum-Swatch--sizeL`.
Used by `.spectrum-Swatch.is-nothing .spectrum-Swatch-fill:after`.", + "control": "text", + "category": "Component" + }, + "spectrum-swatch-slash-thickness-small": { + "value": "3px", + "description": "Used by `--spectrum-swatch-slash-thickness`.", + "control": "text", + "category": "Component" + }, + "spectrum-swatch-size-extra-small": { + "value": "16px", + "description": "Used by `--spectrum-swatch-size`.", + "control": "text", + "category": "Component" + }, + "spectrum-swatch-slash-thickness-extra-small": { + "value": "2px", + "description": "Used by `--spectrum-swatch-slash-thickness`.", + "control": "text", + "category": "Component" + }, + "spectrum-swatch-size-medium": { + "value": "32px", + "description": "Used by `--spectrum-swatch-size`.", + "control": "text", + "category": "Component" + }, + "spectrum-swatch-slash-thickness-medium": { + "value": "4px", + "description": "Used by `--spectrum-swatch-slash-thickness`.", + "control": "text", + "category": "Component" + }, + "spectrum-swatch-size-large": { + "value": "40px", + "description": "Used by `--spectrum-swatch-size`.", + "control": "text", + "category": "Component" + }, + "spectrum-swatch-slash-thickness-large": { + "value": "5px", + "description": "Used by `--spectrum-swatch-slash-thickness`.", + "control": "text", + "category": "Component" + }, + "spectrum-swatch-focus-indicator-border-radius": { + "description": "Defined in `.spectrum-Swatch`.
Used by `.spectrum-Swatch:after`.", + "control": "text", + "category": "Component" + }, + "spectrum-swatch-icon-border-color": { + "description": "Defined in `.spectrum-Swatch`.
Used by `.spectrum-Swatch-disabledIcon path:last-child`.", + "control": "color", + "category": "Component" + }, + "spectrum-swatch-disabled-icon-border-opacity": { + "value": "0.51", + "description": "Used by `--spectrum-swatch-icon-border-color`.", + "control": "text", + "category": "Component" + }, + "spectrum-swatch-disabled-icon-color": { + "description": "Defined in `.spectrum-Swatch`.
Used by `.spectrum-Swatch-disabledIcon`, `.spectrum-Swatch-disabledIcon path:first-child`.", + "control": "color", + "category": "Component" + }, + "spectrum-swatch-border-thickness": { + "description": "Defined in `.spectrum-Swatch`.
Used by `.spectrum-Swatch-fill:before`, `.spectrum-Swatch--lightBorder .spectrum-Swatch-fill:before`.", + "control": "text", + "category": "Component" + }, + "spectrum-swatch-border-thickness-selected": { + "description": "Defined in `.spectrum-Swatch`.
Used by `.spectrum-Swatch.is-selected .spectrum-Swatch-fill`, `.spectrum-Swatch:before`, `.spectrum-Swatch--roundingFull.is-selected:not(.spectrum-Swatch--rectangle) .spectrum-Swatch-fill`.", + "control": "text", + "category": "Component" + }, + "spectrum-swatch-focus-indicator-thickness": { + "description": "Defined in `.spectrum-Swatch`.
Used by `.spectrum-Swatch:after`.", + "control": "text", + "category": "Component" + }, + "spectrum-swatch-focus-indicator-gap": { + "description": "Defined in `.spectrum-Swatch`.
Used by `.spectrum-Swatch:after`.", + "control": "text", + "category": "Component" + }, + "spectrum-swatch-border-color-selected": { + "description": "Defined in `.spectrum-Swatch`.
Used by `.spectrum-Swatch:before`.", + "control": "color", + "category": "Component" + }, + "spectrum-swatch-dash-icon-color": { + "description": "Defined in `.spectrum-Swatch`.
Used by `.spectrum-Swatch.is-mixedValue .spectrum-Swatch-mixedValueIcon`.", + "control": "color", + "category": "Component" + }, + "spectrum-swatch-slash-icon-color": { + "description": "Defined in `.spectrum-Swatch`.
Used by `.spectrum-Swatch.is-nothing .spectrum-Swatch-fill:after`.", + "control": "color", + "category": "Component" + }, + "spectrum-swatch-focus-indicator-color": { + "description": "Defined in `.spectrum-Swatch`.
Used by `.spectrum-Swatch:after`.", + "control": "color", + "category": "Component" + }, + "spectrum-swatch-border-radius": { + "description": "Defined in `.spectrum-Swatch`.
Used by `.spectrum-Swatch, .spectrum-Swatch:before`, `.spectrum-Swatch-fill, .spectrum-Swatch-fill:before`.", + "control": "text", + "category": "Component" + }, + "spectrum-swatch-inner-border-color-selected": { + "description": "Defined in `.spectrum-Swatch`.
Used by `.spectrum-Swatch.is-selected`.", + "control": "color", + "category": "Component" + }, + "spectrum-swatch-border-color": { + "value": "var(--spectrum-gray-900)", + "description": "Defined in `.spectrum-Swatch`.
Used by `.spectrum-Swatch-fill:before`.", + "control": "color", + "category": "Component" + }, + "spectrum-swatch-border-color-light": { + "description": "Used by `.spectrum-Swatch--lightBorder .spectrum-Swatch-fill:before`.", + "control": "color", + "category": "Component" + } + }, + "global": { + "spectrum-gray-1000-rgb": { + "description": "Used by `--system-swatch-border-color`.", + "control": "text", + "category": "Global" + }, + "spectrum-gray-25": { + "value": "light-dark(rgb(255, 255, 255), rgb(17, 17, 17))", + "description": "Used by `--system-swatch-inner-border-color-selected`.", + "control": "text", + "category": "Global" + }, + "spectrum-corner-radius-75": { + "value": "4px", + "description": "Used by `--system-swatch-border-radius`.", + "control": "text", + "category": "Global" + }, + "spectrum-workflow-icon-size-75": { + "value": "16px", + "description": "Used by `--spectrum-swatch-disabled-icon-size`.", + "control": "text", + "category": "Global" + }, + "spectrum-workflow-icon-size-50": { + "value": "14px", + "description": "Used by `--spectrum-swatch-disabled-icon-size`.", + "control": "text", + "category": "Global" + }, + "spectrum-workflow-icon-size-100": { + "value": "20px", + "description": "Used by `--spectrum-swatch-disabled-icon-size`.", + "control": "text", + "category": "Global" + }, + "spectrum-workflow-icon-size-200": { + "value": "22px", + "description": "Used by `--spectrum-swatch-disabled-icon-size`.", + "control": "text", + "category": "Global" + }, + "spectrum-black-rgb": { + "description": "Used by `--spectrum-swatch-icon-border-color`.", + "control": "text", + "category": "Global" + }, + "spectrum-white": { + "value": "light-dark(rgb(255, 255, 255), rgb(255, 255, 255))", + "description": "Used by `--spectrum-swatch-disabled-icon-color`.", + "control": "text", + "category": "Global" + }, + "spectrum-border-width-100": { + "value": "1px", + "description": "Used by `--spectrum-swatch-border-thickness`.", + "control": "text", + "category": "Global" + }, + "spectrum-border-width-200": { + "value": "2px", + "description": "Used by `--spectrum-swatch-border-thickness-selected`.", + "control": "text", + "category": "Global" + }, + "spectrum-focus-indicator-thickness": { + "value": "2px", + "description": "Used by `--spectrum-swatch-focus-indicator-thickness`.", + "control": "text", + "category": "Global" + }, + "spectrum-focus-indicator-gap": { + "value": "2px", + "description": "Used by `--spectrum-swatch-focus-indicator-gap`.", + "control": "text", + "category": "Global" + }, + "spectrum-gray-900": { + "value": "light-dark(rgb(19, 19, 19), rgb(242, 242, 242))", + "description": "Used by `--spectrum-swatch-border-color-selected`.", + "control": "text", + "category": "Global" + }, + "spectrum-gray-800": { + "value": "light-dark(rgb(41, 41, 41), rgb(219, 219, 219))", + "description": "Used by `--spectrum-swatch-dash-icon-color`.", + "control": "text", + "category": "Global" + }, + "spectrum-red-900": { + "value": "light-dark(rgb(215, 50, 32), rgb(252, 67, 46))", + "description": "Used by `--spectrum-swatch-slash-icon-color`.", + "control": "text", + "category": "Global" + }, + "spectrum-focus-indicator-color": { + "value": "var(--spectrum-blue-800)", + "description": "Used by `--spectrum-swatch-focus-indicator-color`.", + "control": "color", + "category": "Global" + }, + "spectrum-picked-color": { + "description": "Used by `.spectrum-Swatch.is-mixedValue .spectrum-Swatch-fill`, `.spectrum-Swatch.is-nothing .spectrum-Swatch-fill`, `.spectrum-Swatch-fill:before`, `.spectrum-Swatch--noBorder .spectrum-Swatch-fill:before`, `.spectrum-Swatch-mixedValueIcon`.", + "control": "color", + "category": "Global" + }, + "spectrum-animation-duration-100": { + "description": "Used by `.spectrum-Swatch:after`, `.spectrum-Swatch-image`.", + "control": "text", + "category": "Global" + } + }, + "system-theme": { + "system-swatch-border-color": { + "description": "Defined in `.spectrum`.
Used by `--spectrum-swatch-border-color`.", + "control": "color" + }, + "system-swatch-inner-border-color-selected": { + "description": "Defined in `.spectrum`.
Used by `--spectrum-swatch-inner-border-color-selected`.", + "control": "color" + }, + "system-swatch-border-radius": { + "description": "Defined in `.spectrum`.
Used by `--spectrum-swatch-border-radius`.", + "control": "text" + } + }, + "passthroughs": {}, + "high-contrast": { + "highcontrast-swatch-disabled-icon-color": { + "value": "var(--mod-swatch-disabled-icon-color, var(--spectrum-swatch-disabled-icon-color))", + "description": "Defined in `.spectrum-Swatch`.
Used by `.spectrum-Swatch-disabledIcon`, `.spectrum-Swatch-disabledIcon path:first-child`.
Defaults to `var(--mod-swatch-disabled-icon-color, var(--spectrum-swatch-disabled-icon-color))`, if not set.", + "control": "color" + }, + "highcontrast-swatch-focus-indicator-color": { + "value": "var(--mod-swatch-focus-indicator-color, var(--spectrum-swatch-focus-indicator-color))", + "description": "Defined in `.spectrum-Swatch`.
Used by `.spectrum-Swatch:after`.
Defaults to `var(--mod-swatch-focus-indicator-color, var(--spectrum-swatch-focus-indicator-color))`, if not set.", + "control": "color" + }, + "highcontrast-swatch-background-color-selected": { + "value": "var(--mod-swatch-inner-border-color-selected, var(--spectrum-swatch-inner-border-color-selected))", + "description": "Defined in `.spectrum-Swatch`.
Used by `.spectrum-Swatch.is-selected`.
Defaults to `var(--mod-swatch-inner-border-color-selected, var(--spectrum-swatch-inner-border-color-selected))`, if not set.", + "control": "color" + }, + "highcontrast-swatch-border-color-selected": { + "value": "var(--mod-swatch-border-color-selected, var(--spectrum-swatch-border-color-selected))", + "description": "Defined in `.spectrum-Swatch`.
Used by `.spectrum-Swatch:before`.
Defaults to `var(--mod-swatch-border-color-selected, var(--spectrum-swatch-border-color-selected))`, if not set.", + "control": "color" + }, + "highcontrast-swatch-border-color": { + "value": "var(--mod-swatch-border-color, var(--spectrum-swatch-border-color))", + "description": "Defined in `.spectrum-Swatch`, `.spectrum-Swatch.is-disabled, .spectrum-Swatch[disabled]`.
Used by `.spectrum-Swatch-fill:before`.
Defaults to `var(--mod-swatch-border-color, var(--spectrum-swatch-border-color))`, if not set.", + "control": "color" + }, + "highcontrast-swatch-fill-foreground-color": { + "value": "var(--mod-swatch-slash-icon-color, var(--spectrum-swatch-slash-icon-color))", + "description": "Defined in `.spectrum-Swatch`.
Used by `.spectrum-Swatch.is-nothing .spectrum-Swatch-fill:after`.
Defaults to `var(--mod-swatch-slash-icon-color, var(--spectrum-swatch-slash-icon-color))`, if not set.", + "control": "color" + } + } } diff --git a/components/swatch/stories/swatch.stories.js b/components/swatch/stories/swatch.stories.js index d3d1b44b1c2..1d19dd65f58 100644 --- a/components/swatch/stories/swatch.stories.js +++ b/components/swatch/stories/swatch.stories.js @@ -1,11 +1,13 @@ import { Sizes } from "@spectrum-css/preview/decorators"; import { disableDefaultModes } from "@spectrum-css/preview/modes"; import { isDisabled, isSelected, size } from "@spectrum-css/preview/types"; -import metadata from "../dist/metadata.json"; -import packageJson from "../package.json"; import { SwatchGroup } from "./swatch.test.js"; import { BorderGroup, DisabledGroup, EmptyGroup, RoundingGroup, SizingGroup, Template } from "./template.js"; +// Local assets to render the component styles and structure +import metadata from "../dist/metadata.json"; +import packageJson from "../package.json"; + /** * A swatch shows a small sample of a fill--such as a color, gradient, texture, or material--that is intended to be applied to an object. * @@ -105,6 +107,7 @@ export default { }, packageJson, metadata, + cssprops: metadata.modifiers, }, }; diff --git a/components/swatchgroup/dist/metadata.json b/components/swatchgroup/dist/metadata.json index 74adf019d54..1780299a054 100644 --- a/components/swatchgroup/dist/metadata.json +++ b/components/swatchgroup/dist/metadata.json @@ -5,18 +5,52 @@ ".spectrum-SwatchGroup--compact", ".spectrum-SwatchGroup--spacious" ], - "modifiers": [ - "--mod-swatchgroup-spacing-compact", - "--mod-swatchgroup-spacing-regular", - "--mod-swatchgroup-spacing-spacious" - ], - "component": ["--spectrum-swatchgroup-spacing"], - "global": [ - "--spectrum-spacing-100", - "--spectrum-spacing-50", - "--spectrum-spacing-75" - ], - "system-theme": [], - "passthroughs": [], - "high-contrast": [] + "modifiers": { + "mod-swatchgroup-spacing-regular": { + "value": "var(--spectrum-swatchgroup-spacing)", + "description": "Defined in `.spectrum-SwatchGroup--compact`, `.spectrum-SwatchGroup--spacious`.
Used by `.spectrum-SwatchGroup`.
Defaults to `var(--spectrum-swatchgroup-spacing)`, if not set.", + "control": "text", + "category": "Modifier" + }, + "mod-swatchgroup-spacing-compact": { + "description": "Used by `--mod-swatchgroup-spacing-regular`.", + "control": "text", + "category": "Modifier" + }, + "mod-swatchgroup-spacing-spacious": { + "description": "Used by `--mod-swatchgroup-spacing-regular`.", + "control": "text", + "category": "Modifier" + } + }, + "component": { + "spectrum-swatchgroup-spacing": { + "description": "Defined in `.spectrum-SwatchGroup`, `.spectrum-SwatchGroup--compact`, `.spectrum-SwatchGroup--spacious`.
Used by `.spectrum-SwatchGroup`.", + "control": "text", + "category": "Component" + } + }, + "global": { + "spectrum-spacing-75": { + "value": "4px", + "description": "Used by `--spectrum-swatchgroup-spacing`.", + "control": "text", + "category": "Global" + }, + "spectrum-spacing-50": { + "value": "2px", + "description": "Used by `--spectrum-swatchgroup-spacing`.", + "control": "text", + "category": "Global" + }, + "spectrum-spacing-100": { + "value": "8px", + "description": "Used by `--spectrum-swatchgroup-spacing`.", + "control": "text", + "category": "Global" + } + }, + "system-theme": {}, + "passthroughs": {}, + "high-contrast": {} } diff --git a/components/swatchgroup/stories/swatchgroup.stories.js b/components/swatchgroup/stories/swatchgroup.stories.js index 2a842f06695..eaf646045ee 100644 --- a/components/swatchgroup/stories/swatchgroup.stories.js +++ b/components/swatchgroup/stories/swatchgroup.stories.js @@ -1,11 +1,13 @@ import { Sizes } from "@spectrum-css/preview/decorators"; import { disableDefaultModes } from "@spectrum-css/preview/modes"; import { default as Swatch } from "@spectrum-css/swatch/stories/swatch.stories.js"; -import metadata from "../dist/metadata.json"; -import packageJson from "../package.json"; import { SwatchgroupGroup } from "./swatchgroup.test.js"; import { RoundingTemplate, Template } from "./template.js"; +// Local assets to render the component styles and structure +import metadata from "../dist/metadata.json"; +import packageJson from "../package.json"; + /** * The swatch group component is a collection of [swatches](?path=/docs/components-swatch--docs). * @@ -118,6 +120,7 @@ export default { }, packageJson, metadata, + cssprops: metadata.modifiers, }, }; diff --git a/components/swatchgroup/stories/template.js b/components/swatchgroup/stories/template.js index 01c059998bd..caa7978e606 100644 --- a/components/swatchgroup/stories/template.js +++ b/components/swatchgroup/stories/template.js @@ -9,6 +9,7 @@ import "../index.css"; export const Template = ({ rootClass = "spectrum-SwatchGroup", + id = getRandomId("swatch-group"), customClasses = [], size = "m", density = "regular", @@ -19,7 +20,6 @@ export const Template = ({ customStyles = {}, isDisabled =false, isSelected = false, - id = getRandomId("swatchgroup"), } = {}, context = {}) => html`
Defaults to `var(--spectrum-focus-indicator-thickness)`, if not set.", + "control": "text", + "category": "Modifier" + }, + "mod-switch-height": { + "value": "var(--spectrum-switch-min-height)", + "description": "Used by `.spectrum-Switch`, `.spectrum-Switch-switch`.
Defaults to `var(--spectrum-switch-min-height)`, if not set.", + "control": "text", + "category": "Modifier" + }, + "mod-switch-control-width": { + "value": "var(--spectrum-switch-control-width)", + "description": "Used by `.spectrum-Switch-input:checked + .spectrum-Switch-switch:before`, `.spectrum-Switch-input:checked + .spectrum-Switch-switch:dir(rtl):before, [dir=\"rtl\"] .spectrum-Switch-input:checked + .spectrum-Switch-switch:before`, `.spectrum-Switch-switch`.
Defaults to `var(--spectrum-switch-control-width)`, if not set.", + "control": "text", + "category": "Modifier" + }, + "mod-focus-indicator-gap": { + "value": "2px", + "description": "Used by `.spectrum-Switch-input:focus-visible + .spectrum-Switch-switch:after`, `.spectrum-Switch-switch:after`.
Defaults to `var(--spectrum-focus-indicator-gap)`, if not set.", + "control": "text", + "category": "Modifier" + }, + "mod-switch-label-color-default": { + "value": "var(--spectrum-switch-label-color-default)", + "description": "Used by `.spectrum-Switch-label`.
Defaults to `var(--spectrum-switch-label-color-default)`, if not set.", + "control": "color", + "category": "Modifier" + }, + "mod-switch-control-label-spacing": { + "value": "var(--spectrum-switch-control-label-spacing)", + "description": "Used by `.spectrum-Switch-label`.
Defaults to `var(--spectrum-switch-control-label-spacing)`, if not set.", + "control": "text", + "category": "Modifier" + }, + "mod-switch-spacing-top-to-label": { + "value": "var(--spectrum-switch-spacing-top-to-label)", + "description": "Used by `.spectrum-Switch-label`.
Defaults to `var(--spectrum-switch-spacing-top-to-label)`, if not set.", + "control": "text", + "category": "Modifier" + }, + "mod-switch-font-size": { + "value": "var(--spectrum-switch-font-size)", + "description": "Used by `.spectrum-Switch-label`.
Defaults to `var(--spectrum-switch-font-size)`, if not set.", + "control": "text", + "category": "Modifier" + }, + "mod-line-height-100": { + "value": "1.3", + "description": "Used by `.spectrum-Switch-label`.
Defaults to `var(--spectrum-line-height-100)`, if not set.", + "control": "text", + "category": "Modifier" + }, + "mod-animation-duration-200": { + "value": "var(--spectrum-animation-duration-200)", + "description": "Used by `.spectrum-Switch-label`.
Defaults to `var(--spectrum-animation-duration-200)`, if not set.", + "control": "text", + "category": "Modifier" + }, + "mod-switch-control-height": { + "value": "var(--spectrum-switch-control-height)", + "description": "Used by `.spectrum-Switch-switch`, `.spectrum-Switch-switch:before`, `.spectrum-Switch-switch:after`.
Defaults to `var(--spectrum-switch-control-height)`, if not set.", + "control": "text", + "category": "Modifier" + }, + "mod-switch-spacing-top-to-control": { + "value": "var(--spectrum-switch-spacing-top-to-control)", + "description": "Used by `.spectrum-Switch-switch`.
Defaults to `var(--spectrum-switch-spacing-top-to-control)`, if not set.", + "control": "text", + "category": "Modifier" + }, + "mod-animation-duration-100": { + "value": "var(--spectrum-animation-duration-100)", + "description": "Used by `.spectrum-Switch-switch`, `.spectrum-Switch-switch:before`, `.spectrum-Switch-switch:after`.
Defaults to `var(--spectrum-animation-duration-100)`, if not set.", + "control": "text", + "category": "Modifier" + }, + "mod-border-width-200": { + "value": "2px", + "description": "Used by `.spectrum-Switch-switch:before`.
Defaults to `var(--spectrum-border-width-200)`, if not set.", + "control": "text", + "category": "Modifier" + }, + "mod-switch-background-color": { + "value": "var(--spectrum-switch-background-color)", + "description": "Used by `.spectrum-Switch .spectrum-Switch-switch`.
Defaults to `var(--spectrum-switch-background-color)`, if not set.", + "control": "color", + "category": "Modifier" + }, + "mod-switch-handle-background-color": { + "value": "var(--spectrum-switch-handle-background-color)", + "description": "Used by `.spectrum-Switch .spectrum-Switch-switch:before`.
Defaults to `var(--spectrum-switch-handle-background-color)`, if not set.", + "control": "color", + "category": "Modifier" + }, + "mod-switch-handle-border-color-default": { + "value": "var(--spectrum-switch-handle-border-color-default)", + "description": "Used by `.spectrum-Switch .spectrum-Switch-switch:before`.
Defaults to `var(--spectrum-switch-handle-border-color-default)`, if not set.", + "control": "color", + "category": "Modifier" + }, + "mod-switch-handle-border-color-down": { + "value": "var(--spectrum-switch-handle-border-color-down)", + "description": "Used by `.spectrum-Switch:active .spectrum-Switch-input + .spectrum-Switch-switch:before`.
Defaults to `var(--spectrum-switch-handle-border-color-down)`, if not set.", + "control": "color", + "category": "Modifier" + }, + "mod-switch-label-color-down": { + "value": "var(--spectrum-switch-label-color-down)", + "description": "Used by `.spectrum-Switch:active .spectrum-Switch-input ~ .spectrum-Switch-label`.
Defaults to `var(--spectrum-switch-label-color-down)`, if not set.", + "control": "color", + "category": "Modifier" + }, + "mod-switch-background-color-selected-down": { + "value": "var(--spectrum-switch-background-color-selected-down)", + "description": "Used by `.spectrum-Switch:active .spectrum-Switch-input:checked:enabled + .spectrum-Switch-switch`.
Defaults to `var(--spectrum-switch-background-color-selected-down)`, if not set.", + "control": "color", + "category": "Modifier" + }, + "mod-switch-handle-border-color-selected-down": { + "value": "var(--spectrum-switch-handle-border-color-selected-down)", + "description": "Used by `.spectrum-Switch:active .spectrum-Switch-input:checked:enabled + .spectrum-Switch-switch:before`.
Defaults to `var(--spectrum-switch-handle-border-color-selected-down)`, if not set.", + "control": "color", + "category": "Modifier" + }, + "mod-switch-focus-indicator-thickness": { + "value": "var(--spectrum-switch-focus-indicator-thickness)", + "description": "Used by `.spectrum-Switch .spectrum-Switch-input:focus-visible + .spectrum-Switch-switch:after`, `.spectrum-Switch:hover .spectrum-Switch-input:focus-visible + .spectrum-Switch-switch:after`.
Defaults to `var(--spectrum-switch-focus-indicator-thickness)`, if not set.", + "control": "text", + "category": "Modifier" + }, + "mod-switch-focus-indicator-color": { + "value": "var(--spectrum-switch-focus-indicator-color)", + "description": "Used by `.spectrum-Switch .spectrum-Switch-input:focus-visible + .spectrum-Switch-switch:after`, `.spectrum-Switch:hover .spectrum-Switch-input:focus-visible + .spectrum-Switch-switch:after`.
Defaults to `var(--spectrum-switch-focus-indicator-color)`, if not set.", + "control": "color", + "category": "Modifier" + }, + "mod-switch-handle-border-color-focus": { + "value": "var(--spectrum-switch-handle-border-color-focus)", + "description": "Used by `.spectrum-Switch .spectrum-Switch-input:focus-visible + .spectrum-Switch-switch:before`, `.spectrum-Switch:hover .spectrum-Switch-input:focus-visible + .spectrum-Switch-switch:before`.
Defaults to `var(--spectrum-switch-handle-border-color-focus)`, if not set.", + "control": "color", + "category": "Modifier" + }, + "mod-switch-background-color-selected-focus": { + "value": "var(--spectrum-switch-background-color-selected-focus)", + "description": "Used by `.spectrum-Switch .spectrum-Switch-input:focus-visible:checked + .spectrum-Switch-switch`, `.spectrum-Switch:hover .spectrum-Switch-input:focus-visible:checked + .spectrum-Switch-switch`.
Defaults to `var(--spectrum-switch-background-color-selected-focus)`, if not set.", + "control": "color", + "category": "Modifier" + }, + "mod-switch-handle-border-color-selected-focus": { + "value": "var(--spectrum-switch-handle-border-color-selected-focus)", + "description": "Used by `.spectrum-Switch .spectrum-Switch-input:focus-visible:checked + .spectrum-Switch-switch:before`, `.spectrum-Switch:hover .spectrum-Switch-input:focus-visible:checked + .spectrum-Switch-switch:before`.
Defaults to `var(--spectrum-switch-handle-border-color-selected-focus)`, if not set.", + "control": "color", + "category": "Modifier" + }, + "mod-switch-label-color-focus": { + "value": "var(--spectrum-switch-label-color-focus)", + "description": "Used by `.spectrum-Switch .spectrum-Switch-input:focus-visible ~ .spectrum-Switch-label`, `.spectrum-Switch:hover .spectrum-Switch-input:focus-visible ~ .spectrum-Switch-label`.
Defaults to `var(--spectrum-switch-label-color-focus)`, if not set.", + "control": "color", + "category": "Modifier" + }, + "mod-switch-handle-border-color-hover": { + "value": "var(--spectrum-switch-handle-border-color-hover)", + "description": "Used by `.spectrum-Switch:hover .spectrum-Switch-input + .spectrum-Switch-switch:before`.
Defaults to `var(--spectrum-switch-handle-border-color-hover)`, if not set.", + "control": "color", + "category": "Modifier" + }, + "mod-switch-label-color-hover": { + "value": "var(--spectrum-switch-label-color-hover)", + "description": "Used by `.spectrum-Switch:hover .spectrum-Switch-input ~ .spectrum-Switch-label`.
Defaults to `var(--spectrum-switch-label-color-hover)`, if not set.", + "control": "color", + "category": "Modifier" + }, + "mod-switch-background-color-selected-hover": { + "value": "var(--spectrum-switch-background-color-selected-hover)", + "description": "Used by `.spectrum-Switch:hover .spectrum-Switch-input:checked:enabled + .spectrum-Switch-switch`.
Defaults to `var(--spectrum-switch-background-color-selected-hover)`, if not set.", + "control": "color", + "category": "Modifier" + }, + "mod-switch-handle-border-color-selected-hover": { + "value": "var(--spectrum-switch-handle-border-color-selected-hover)", + "description": "Used by `.spectrum-Switch:hover .spectrum-Switch-input:checked:enabled + .spectrum-Switch-switch:before`.
Defaults to `var(--spectrum-switch-handle-border-color-selected-hover)`, if not set.", + "control": "color", + "category": "Modifier" + }, + "mod-switch-background-color-disabled": { + "value": "var(--spectrum-switch-background-color-disabled)", + "description": "Used by `.spectrum-Switch:hover .spectrum-Switch-input:disabled + .spectrum-Switch-switch, .spectrum-Switch:hover .spectrum-Switch-input[disabled] + .spectrum-Switch-switch`, `.spectrum-Switch-input:disabled + .spectrum-Switch-switch, .spectrum-Switch-input[disabled] + .spectrum-Switch-switch`.
Defaults to `var(--spectrum-switch-background-color-disabled)`, if not set.", + "control": "color", + "category": "Modifier" + }, + "mod-switch-handle-border-color-disabled": { + "value": "var(--spectrum-switch-handle-border-color-disabled)", + "description": "Used by `.spectrum-Switch:hover .spectrum-Switch-input:disabled + .spectrum-Switch-switch:before, .spectrum-Switch:hover .spectrum-Switch-input[disabled] + .spectrum-Switch-switch:before`, `.spectrum-Switch:hover .spectrum-Switch-input:disabled:checked + .spectrum-Switch-switch:before, .spectrum-Switch:hover .spectrum-Switch-input[disabled]:checked + .spectrum-Switch-switch:before`, `.spectrum-Switch-input:disabled + .spectrum-Switch-switch:before, .spectrum-Switch-input[disabled] + .spectrum-Switch-switch:before`, `.spectrum-Switch-input:disabled:checked + .spectrum-Switch-switch:before, .spectrum-Switch-input[disabled]:checked + .spectrum-Switch-switch:before`.
Defaults to `var(--spectrum-switch-handle-border-color-disabled)`, if not set.", + "control": "color", + "category": "Modifier" + }, + "mod-switch-label-color-disabled": { + "value": "var(--spectrum-switch-label-color-disabled)", + "description": "Used by `.spectrum-Switch:hover .spectrum-Switch-input:disabled ~ .spectrum-Switch-label, .spectrum-Switch:hover .spectrum-Switch-input[disabled] ~ .spectrum-Switch-label`, `.spectrum-Switch:hover .spectrum-Switch-input:disabled:checked ~ .spectrum-Switch-label, .spectrum-Switch:hover .spectrum-Switch-input[disabled]:checked ~ .spectrum-Switch-label`, `.spectrum-Switch-input:disabled ~ .spectrum-Switch-label, .spectrum-Switch-input[disabled] ~ .spectrum-Switch-label`.
Defaults to `var(--spectrum-switch-label-color-disabled)`, if not set.", + "control": "color", + "category": "Modifier" + }, + "mod-switch-background-color-selected-disabled": { + "value": "var(--spectrum-switch-background-color-selected-disabled)", + "description": "Used by `.spectrum-Switch:hover .spectrum-Switch-input:disabled:checked + .spectrum-Switch-switch, .spectrum-Switch:hover .spectrum-Switch-input[disabled]:checked + .spectrum-Switch-switch`, `.spectrum-Switch-input:disabled:checked + .spectrum-Switch-switch, .spectrum-Switch-input[disabled]:checked + .spectrum-Switch-switch`.
Defaults to `var(--spectrum-switch-background-color-selected-disabled)`, if not set.", + "control": "color", + "category": "Modifier" + }, + "mod-switch-background-color-selected-default": { + "value": "var(--spectrum-switch-background-color-selected-default)", + "description": "Used by `.spectrum-Switch-input:checked + .spectrum-Switch-switch`.
Defaults to `var(--spectrum-switch-background-color-selected-default)`, if not set.", + "control": "color", + "category": "Modifier" + }, + "mod-switch-handle-border-color-selected-default": { + "value": "var(--spectrum-switch-handle-border-color-selected-default)", + "description": "Used by `.spectrum-Switch-input:checked + .spectrum-Switch-switch:before`.
Defaults to `var(--spectrum-switch-handle-border-color-selected-default)`, if not set.", + "control": "color", + "category": "Modifier" + } + }, + "component": { + "spectrum-switch-label-color-default": { + "description": "Defined in `.spectrum-Switch`, `.spectrum-Switch--disabled`.
Used by `.spectrum-Switch-label`.", + "control": "color", + "category": "Component" + }, + "spectrum-switch-label-color-hover": { + "description": "Defined in `.spectrum-Switch`.
Used by `.spectrum-Switch:hover .spectrum-Switch-input ~ .spectrum-Switch-label`.", + "control": "color", + "category": "Component" + }, + "spectrum-switch-label-color-down": { + "description": "Defined in `.spectrum-Switch`.
Used by `.spectrum-Switch:active .spectrum-Switch-input ~ .spectrum-Switch-label`.", + "control": "color", + "category": "Component" + }, + "spectrum-switch-label-color-focus": { + "description": "Defined in `.spectrum-Switch`.
Used by `.spectrum-Switch .spectrum-Switch-input:focus-visible ~ .spectrum-Switch-label`, `.spectrum-Switch:hover .spectrum-Switch-input:focus-visible ~ .spectrum-Switch-label`.", + "control": "color", + "category": "Component" + }, + "spectrum-switch-label-color-disabled": { + "description": "Defined in `.spectrum-Switch`.
Used by `.spectrum-Switch:hover .spectrum-Switch-input:disabled ~ .spectrum-Switch-label, .spectrum-Switch:hover .spectrum-Switch-input[disabled] ~ .spectrum-Switch-label`, `.spectrum-Switch:hover .spectrum-Switch-input:disabled:checked ~ .spectrum-Switch-label, .spectrum-Switch:hover .spectrum-Switch-input[disabled]:checked ~ .spectrum-Switch-label`, `.spectrum-Switch-input:disabled ~ .spectrum-Switch-label, .spectrum-Switch-input[disabled] ~ .spectrum-Switch-label`.", + "control": "color", + "category": "Component" + }, + "spectrum-switch-background-color-selected-default": { + "description": "Defined in `.spectrum-Switch`, `.spectrum-Switch.spectrum-Switch--emphasized`.
Used by `.spectrum-Switch-input:checked + .spectrum-Switch-switch`.", + "control": "color", + "category": "Component" + }, + "spectrum-switch-background-color-selected-hover": { + "description": "Defined in `.spectrum-Switch`, `.spectrum-Switch.spectrum-Switch--emphasized`.
Used by `.spectrum-Switch:hover .spectrum-Switch-input:checked:enabled + .spectrum-Switch-switch`.", + "control": "color", + "category": "Component" + }, + "spectrum-switch-background-color-selected-down": { + "description": "Defined in `.spectrum-Switch`, `.spectrum-Switch.spectrum-Switch--emphasized`.
Used by `.spectrum-Switch:active .spectrum-Switch-input:checked:enabled + .spectrum-Switch-switch`.", + "control": "color", + "category": "Component" + }, + "spectrum-switch-background-color-selected-focus": { + "description": "Defined in `.spectrum-Switch`, `.spectrum-Switch.spectrum-Switch--emphasized`.
Used by `.spectrum-Switch .spectrum-Switch-input:focus-visible:checked + .spectrum-Switch-switch`, `.spectrum-Switch:hover .spectrum-Switch-input:focus-visible:checked + .spectrum-Switch-switch`.", + "control": "color", + "category": "Component" + }, + "spectrum-switch-background-color-selected-disabled": { + "description": "Defined in `.spectrum-Switch`.
Used by `.spectrum-Switch:hover .spectrum-Switch-input:disabled:checked + .spectrum-Switch-switch, .spectrum-Switch:hover .spectrum-Switch-input[disabled]:checked + .spectrum-Switch-switch`, `.spectrum-Switch-input:disabled:checked + .spectrum-Switch-switch, .spectrum-Switch-input[disabled]:checked + .spectrum-Switch-switch`.", + "control": "color", + "category": "Component" + }, + "spectrum-switch-focus-indicator-thickness": { + "description": "Defined in `.spectrum-Switch`.
Used by `.spectrum-Switch .spectrum-Switch-input:focus-visible + .spectrum-Switch-switch:after`, `.spectrum-Switch:hover .spectrum-Switch-input:focus-visible + .spectrum-Switch-switch:after`.", + "control": "text", + "category": "Component" + }, + "spectrum-switch-focus-indicator-color": { + "description": "Defined in `.spectrum-Switch`.
Used by `.spectrum-Switch .spectrum-Switch-input:focus-visible + .spectrum-Switch-switch:after`, `.spectrum-Switch:hover .spectrum-Switch-input:focus-visible + .spectrum-Switch-switch:after`.", + "control": "color", + "category": "Component" + }, + "spectrum-switch-handle-border-color-disabled": { + "description": "Defined in `.spectrum-Switch`.
Used by `.spectrum-Switch:hover .spectrum-Switch-input:disabled + .spectrum-Switch-switch:before, .spectrum-Switch:hover .spectrum-Switch-input[disabled] + .spectrum-Switch-switch:before`, `.spectrum-Switch:hover .spectrum-Switch-input:disabled:checked + .spectrum-Switch-switch:before, .spectrum-Switch:hover .spectrum-Switch-input[disabled]:checked + .spectrum-Switch-switch:before`, `.spectrum-Switch-input:disabled + .spectrum-Switch-switch:before, .spectrum-Switch-input[disabled] + .spectrum-Switch-switch:before`, `.spectrum-Switch-input:disabled:checked + .spectrum-Switch-switch:before, .spectrum-Switch-input[disabled]:checked + .spectrum-Switch-switch:before`.", + "control": "color", + "category": "Component" + }, + "spectrum-switch-handle-border-color-selected-default": { + "description": "Defined in `.spectrum-Switch.spectrum-Switch--emphasized`, `.spectrum-Switch`.
Used by `.spectrum-Switch-input:checked + .spectrum-Switch-switch:before`.", + "control": "color", + "category": "Component" + }, + "spectrum-switch-handle-border-color-selected-hover": { + "description": "Defined in `.spectrum-Switch.spectrum-Switch--emphasized`, `.spectrum-Switch`.
Used by `.spectrum-Switch:hover .spectrum-Switch-input:checked:enabled + .spectrum-Switch-switch:before`.", + "control": "color", + "category": "Component" + }, + "spectrum-switch-handle-border-color-selected-down": { + "description": "Defined in `.spectrum-Switch.spectrum-Switch--emphasized`, `.spectrum-Switch`.
Used by `.spectrum-Switch:active .spectrum-Switch-input:checked:enabled + .spectrum-Switch-switch:before`.", + "control": "color", + "category": "Component" + }, + "spectrum-switch-handle-border-color-selected-focus": { + "description": "Defined in `.spectrum-Switch.spectrum-Switch--emphasized`, `.spectrum-Switch`.
Used by `.spectrum-Switch .spectrum-Switch-input:focus-visible:checked + .spectrum-Switch-switch:before`, `.spectrum-Switch:hover .spectrum-Switch-input:focus-visible:checked + .spectrum-Switch-switch:before`.", + "control": "color", + "category": "Component" + }, + "spectrum-switch-min-height": { + "description": "Defined in `.spectrum-Switch, .spectrum-Switch--sizeM`, `.spectrum-Switch--sizeS`, `.spectrum-Switch--sizeL`, `.spectrum-Switch--sizeXL`.
Used by `.spectrum-Switch`, `.spectrum-Switch-switch`.", + "control": "text", + "category": "Component" + }, + "spectrum-switch-control-width": { + "description": "Defined in `.spectrum-Switch, .spectrum-Switch--sizeM`, `.spectrum-Switch--sizeS`, `.spectrum-Switch--sizeL`, `.spectrum-Switch--sizeXL`.
Used by `.spectrum-Switch-input:checked + .spectrum-Switch-switch:before`, `.spectrum-Switch-input:checked + .spectrum-Switch-switch:dir(rtl):before, [dir=\"rtl\"] .spectrum-Switch-input:checked + .spectrum-Switch-switch:before`, `.spectrum-Switch-switch`.", + "control": "text", + "category": "Component" + }, + "spectrum-switch-control-width-medium": { + "value": "26px", + "description": "Used by `--spectrum-switch-control-width`.", + "control": "text", + "category": "Component" + }, + "spectrum-switch-control-height": { + "description": "Defined in `.spectrum-Switch, .spectrum-Switch--sizeM`, `.spectrum-Switch--sizeS`, `.spectrum-Switch--sizeL`, `.spectrum-Switch--sizeXL`.
Used by `.spectrum-Switch-switch`, `.spectrum-Switch-switch:before`, `.spectrum-Switch-switch:after`.", + "control": "text", + "category": "Component" + }, + "spectrum-switch-control-height-medium": { + "value": "14px", + "description": "Used by `--spectrum-switch-control-height`.", + "control": "text", + "category": "Component" + }, + "spectrum-switch-control-label-spacing": { + "description": "Defined in `.spectrum-Switch, .spectrum-Switch--sizeM`, `.spectrum-Switch--sizeS`, `.spectrum-Switch--sizeL`, `.spectrum-Switch--sizeXL`.
Used by `.spectrum-Switch-label`.", + "control": "text", + "category": "Component" + }, + "spectrum-switch-spacing-top-to-control": { + "description": "Defined in `.spectrum-Switch, .spectrum-Switch--sizeM`, `.spectrum-Switch--sizeS`, `.spectrum-Switch--sizeL`, `.spectrum-Switch--sizeXL`.
Used by `.spectrum-Switch-switch`.", + "control": "text", + "category": "Component" + }, + "spectrum-switch-top-to-control-medium": { + "value": "9px", + "description": "Used by `--spectrum-switch-spacing-top-to-control`.", + "control": "text", + "category": "Component" + }, + "spectrum-switch-spacing-top-to-label": { + "description": "Defined in `.spectrum-Switch, .spectrum-Switch--sizeM`, `.spectrum-Switch--sizeS`, `.spectrum-Switch--sizeL`, `.spectrum-Switch--sizeXL`.
Used by `.spectrum-Switch-label`.", + "control": "text", + "category": "Component" + }, + "spectrum-switch-font-size": { + "description": "Defined in `.spectrum-Switch, .spectrum-Switch--sizeM`, `.spectrum-Switch--sizeS`, `.spectrum-Switch--sizeL`, `.spectrum-Switch--sizeXL`.
Used by `.spectrum-Switch-label`.", + "control": "text", + "category": "Component" + }, + "spectrum-switch-control-width-small": { + "value": "23px", + "description": "Used by `--spectrum-switch-control-width`.", + "control": "text", + "category": "Component" + }, + "spectrum-switch-control-height-small": { + "value": "12px", + "description": "Used by `--spectrum-switch-control-height`.", + "control": "text", + "category": "Component" + }, + "spectrum-switch-top-to-control-small": { + "value": "6px", + "description": "Used by `--spectrum-switch-spacing-top-to-control`.", + "control": "text", + "category": "Component" + }, + "spectrum-switch-control-width-large": { + "value": "29px", + "description": "Used by `--spectrum-switch-control-width`.", + "control": "text", + "category": "Component" + }, + "spectrum-switch-control-height-large": { + "value": "16px", + "description": "Used by `--spectrum-switch-control-height`.", + "control": "text", + "category": "Component" + }, + "spectrum-switch-top-to-control-large": { + "value": "12px", + "description": "Used by `--spectrum-switch-spacing-top-to-control`.", + "control": "text", + "category": "Component" + }, + "spectrum-switch-control-width-extra-large": { + "value": "33px", + "description": "Used by `--spectrum-switch-control-width`.", + "control": "text", + "category": "Component" + }, + "spectrum-switch-control-height-extra-large": { + "value": "18px", + "description": "Used by `--spectrum-switch-control-height`.", + "control": "text", + "category": "Component" + }, + "spectrum-switch-top-to-control-extra-large": { + "value": "15px", + "description": "Used by `--spectrum-switch-spacing-top-to-control`.", + "control": "text", + "category": "Component" + }, + "spectrum-switch-background-color": { + "description": "Defined in `.spectrum-Switch`.
Used by `.spectrum-Switch .spectrum-Switch-switch`.", + "control": "color", + "category": "Component" + }, + "spectrum-switch-handle-background-color": { + "description": "Defined in `.spectrum-Switch`.
Used by `.spectrum-Switch .spectrum-Switch-switch:before`.", + "control": "color", + "category": "Component" + }, + "spectrum-switch-handle-border-color-default": { + "description": "Defined in `.spectrum-Switch`.
Used by `.spectrum-Switch .spectrum-Switch-switch:before`.", + "control": "color", + "category": "Component" + }, + "spectrum-switch-handle-border-color-down": { + "description": "Defined in `.spectrum-Switch`.
Used by `.spectrum-Switch:active .spectrum-Switch-input + .spectrum-Switch-switch:before`.", + "control": "color", + "category": "Component" + }, + "spectrum-switch-handle-border-color-focus": { + "description": "Defined in `.spectrum-Switch`.
Used by `.spectrum-Switch .spectrum-Switch-input:focus-visible + .spectrum-Switch-switch:before`, `.spectrum-Switch:hover .spectrum-Switch-input:focus-visible + .spectrum-Switch-switch:before`.", + "control": "color", + "category": "Component" + }, + "spectrum-switch-handle-border-color-hover": { + "description": "Defined in `.spectrum-Switch`.
Used by `.spectrum-Switch:hover .spectrum-Switch-input + .spectrum-Switch-switch:before`.", + "control": "color", + "category": "Component" + }, + "spectrum-switch-background-color-disabled": { + "description": "Defined in `.spectrum-Switch`.
Used by `.spectrum-Switch:hover .spectrum-Switch-input:disabled + .spectrum-Switch-switch, .spectrum-Switch:hover .spectrum-Switch-input[disabled] + .spectrum-Switch-switch`, `.spectrum-Switch-input:disabled + .spectrum-Switch-switch, .spectrum-Switch-input[disabled] + .spectrum-Switch-switch`.", + "control": "color", + "category": "Component" + } + }, + "global": { + "spectrum-gray-600": { + "value": "light-dark(rgb(113, 113, 113), rgb(138, 138, 138))", + "description": "Used by `--system-switch-handle-border-color-default`.", + "control": "text", + "category": "Global" + }, + "spectrum-gray-700": { + "value": "light-dark(rgb(80, 80, 80), rgb(175, 175, 175))", + "description": "Used by `--system-switch-handle-border-color-hover`, `--system-switch-handle-border-color-focus`, `--system-switch-handle-border-color-selected-default`.", + "control": "text", + "category": "Global" + }, + "spectrum-gray-800": { + "value": "light-dark(rgb(41, 41, 41), rgb(219, 219, 219))", + "description": "Used by `--system-switch-handle-border-color-down`, `--system-switch-handle-border-color-selected-hover`, `--system-switch-handle-border-color-selected-focus`.", + "control": "text", + "category": "Global" + }, + "spectrum-gray-900": { + "value": "light-dark(rgb(19, 19, 19), rgb(242, 242, 242))", + "description": "Used by `--system-switch-handle-border-color-selected-down`.", + "control": "text", + "category": "Global" + }, + "spectrum-gray-200": { + "value": "light-dark(rgb(225, 225, 225), rgb(50, 50, 50))", + "description": "Used by `--system-switch-background-color`, `--system-switch-background-color-disabled`.", + "control": "text", + "category": "Global" + }, + "spectrum-gray-50": { + "value": "light-dark(rgb(248, 248, 248), rgb(27, 27, 27))", + "description": "Used by `--system-switch-handle-background-color`.", + "control": "text", + "category": "Global" + }, + "spectrum-neutral-content-color-default": { + "value": "var(--spectrum-gray-800)", + "description": "Used by `--spectrum-switch-label-color-default`.", + "control": "color", + "category": "Global" + }, + "spectrum-neutral-content-color-hover": { + "value": "var(--spectrum-gray-900)", + "description": "Used by `--spectrum-switch-label-color-hover`.", + "control": "color", + "category": "Global" + }, + "spectrum-neutral-content-color-down": { + "value": "var(--spectrum-gray-900)", + "description": "Used by `--spectrum-switch-label-color-down`.", + "control": "color", + "category": "Global" + }, + "spectrum-neutral-content-color-key-focus": { + "value": "var(--spectrum-gray-900)", + "description": "Used by `--spectrum-switch-label-color-focus`.", + "control": "color", + "category": "Global" + }, + "spectrum-disabled-content-color": { + "value": "var(--spectrum-gray-400)", + "description": "Used by `--spectrum-switch-label-color-disabled`, `--spectrum-switch-background-color-selected-disabled`, `--spectrum-switch-handle-border-color-disabled`, `--spectrum-switch-label-color-default`.", + "control": "color", + "category": "Global" + }, + "spectrum-neutral-background-color-selected-default": { + "value": "var(--spectrum-gray-800)", + "description": "Used by `--spectrum-switch-background-color-selected-default`.", + "control": "color", + "category": "Global" + }, + "spectrum-neutral-background-color-selected-hover": { + "value": "var(--spectrum-gray-900)", + "description": "Used by `--spectrum-switch-background-color-selected-hover`.", + "control": "color", + "category": "Global" + }, + "spectrum-neutral-background-color-selected-down": { + "value": "var(--spectrum-gray-900)", + "description": "Used by `--spectrum-switch-background-color-selected-down`.", + "control": "color", + "category": "Global" + }, + "spectrum-neutral-background-color-selected-key-focus": { + "value": "var(--spectrum-gray-900)", + "description": "Used by `--spectrum-switch-background-color-selected-focus`.", + "control": "color", + "category": "Global" + }, + "spectrum-focus-indicator-thickness": { + "value": "2px", + "description": "Used by `--spectrum-switch-focus-indicator-thickness`.", + "control": "text", + "category": "Global" + }, + "spectrum-focus-indicator-color": { + "value": "var(--spectrum-blue-800)", + "description": "Used by `--spectrum-switch-focus-indicator-color`.", + "control": "color", + "category": "Global" + }, + "spectrum-accent-color-900": { + "value": "var(--spectrum-blue-900)", + "description": "Used by `--spectrum-switch-background-color-selected-default`, `--spectrum-switch-handle-border-color-selected-default`.", + "control": "color", + "category": "Global" + }, + "spectrum-accent-color-1000": { + "value": "var(--spectrum-blue-1000)", + "description": "Used by `--spectrum-switch-background-color-selected-hover`, `--spectrum-switch-background-color-selected-focus`, `--spectrum-switch-handle-border-color-selected-hover`, `--spectrum-switch-handle-border-color-selected-focus`.", + "control": "color", + "category": "Global" + }, + "spectrum-accent-color-1100": { + "value": "var(--spectrum-blue-1100)", + "description": "Used by `--spectrum-switch-background-color-selected-down`, `--spectrum-switch-handle-border-color-selected-down`.", + "control": "color", + "category": "Global" + }, + "spectrum-component-height-100": { + "value": "32px", + "description": "Used by `--spectrum-switch-min-height`.", + "control": "text", + "category": "Global" + }, + "spectrum-text-to-control-100": { + "value": "10px", + "description": "Used by `--spectrum-switch-control-label-spacing`.", + "control": "text", + "category": "Global" + }, + "spectrum-component-top-to-text-100": { + "value": "6px", + "description": "Used by `--spectrum-switch-spacing-top-to-label`.", + "control": "text", + "category": "Global" + }, + "spectrum-font-size-100": { + "value": "14px", + "description": "Used by `--spectrum-switch-font-size`.", + "control": "text", + "category": "Global" + }, + "spectrum-component-height-75": { + "value": "24px", + "description": "Used by `--spectrum-switch-min-height`.", + "control": "text", + "category": "Global" + }, + "spectrum-text-to-control-75": { + "value": "9px", + "description": "Used by `--spectrum-switch-control-label-spacing`.", + "control": "text", + "category": "Global" + }, + "spectrum-component-top-to-text-75": { + "value": "4px", + "description": "Used by `--spectrum-switch-spacing-top-to-label`.", + "control": "text", + "category": "Global" + }, + "spectrum-font-size-75": { + "value": "12px", + "description": "Used by `--spectrum-switch-font-size`.", + "control": "text", + "category": "Global" + }, + "spectrum-component-height-200": { + "value": "40px", + "description": "Used by `--spectrum-switch-min-height`.", + "control": "text", + "category": "Global" + }, + "spectrum-text-to-control-200": { + "value": "11px", + "description": "Used by `--spectrum-switch-control-label-spacing`.", + "control": "text", + "category": "Global" + }, + "spectrum-component-top-to-text-200": { + "value": "9px", + "description": "Used by `--spectrum-switch-spacing-top-to-label`.", + "control": "text", + "category": "Global" + }, + "spectrum-font-size-200": { + "value": "16px", + "description": "Used by `--spectrum-switch-font-size`.", + "control": "text", + "category": "Global" + }, + "spectrum-component-height-300": { + "value": "48px", + "description": "Used by `--spectrum-switch-min-height`.", + "control": "text", + "category": "Global" + }, + "spectrum-text-to-control-300": { + "value": "13px", + "description": "Used by `--spectrum-switch-control-label-spacing`.", + "control": "text", + "category": "Global" + }, + "spectrum-component-top-to-text-300": { + "value": "12px", + "description": "Used by `--spectrum-switch-spacing-top-to-label`.", + "control": "text", + "category": "Global" + }, + "spectrum-font-size-300": { + "value": "18px", + "description": "Used by `--spectrum-switch-font-size`.", + "control": "text", + "category": "Global" + }, + "spectrum-focus-indicator-gap": { + "value": "2px", + "description": "Used by `.spectrum-Switch-input:focus-visible + .spectrum-Switch-switch:after`, `.spectrum-Switch-switch:after`.", + "control": "text", + "category": "Global" + }, + "spectrum-line-height-100": { + "value": "1.3", + "description": "Used by `.spectrum-Switch-label`.", + "control": "text", + "category": "Global" + }, + "spectrum-animation-duration-200": { + "description": "Used by `.spectrum-Switch-label`.", + "control": "text", + "category": "Global" + }, + "spectrum-animation-duration-100": { + "value": "var(--spectrum-animation-duration-100)", + "description": "Used by `.spectrum-Switch-switch`, `.spectrum-Switch-switch:before`, `.spectrum-Switch-switch:after`.
Defaults to `var(--spectrum-animation-duration-100)`, if not set.", + "control": "text", + "category": "Global" + }, + "spectrum-border-width-200": { + "value": "2px", + "description": "Used by `.spectrum-Switch-switch:before`.", + "control": "text", + "category": "Global" + } + }, + "system-theme": { + "system-switch-handle-border-color-default": { + "description": "Defined in `.spectrum`.
Used by `--spectrum-switch-handle-border-color-default`.", + "control": "color" + }, + "system-switch-handle-border-color-hover": { + "description": "Defined in `.spectrum`.
Used by `--spectrum-switch-handle-border-color-hover`.", + "control": "color" + }, + "system-switch-handle-border-color-down": { + "description": "Defined in `.spectrum`.
Used by `--spectrum-switch-handle-border-color-down`.", + "control": "color" + }, + "system-switch-handle-border-color-focus": { + "description": "Defined in `.spectrum`.
Used by `--spectrum-switch-handle-border-color-focus`.", + "control": "color" + }, + "system-switch-handle-border-color-selected-default": { + "description": "Defined in `.spectrum`.
Used by `--spectrum-switch-handle-border-color-selected-default`.", + "control": "color" + }, + "system-switch-handle-border-color-selected-hover": { + "description": "Defined in `.spectrum`.
Used by `--spectrum-switch-handle-border-color-selected-hover`.", + "control": "color" + }, + "system-switch-handle-border-color-selected-down": { + "description": "Defined in `.spectrum`.
Used by `--spectrum-switch-handle-border-color-selected-down`.", + "control": "color" + }, + "system-switch-handle-border-color-selected-focus": { + "description": "Defined in `.spectrum`.
Used by `--spectrum-switch-handle-border-color-selected-focus`.", + "control": "color" + }, + "system-switch-background-color": { + "description": "Defined in `.spectrum`.
Used by `--spectrum-switch-background-color`.", + "control": "color" + }, + "system-switch-background-color-disabled": { + "description": "Defined in `.spectrum`.
Used by `--spectrum-switch-background-color-disabled`.", + "control": "color" + }, + "system-switch-handle-background-color": { + "description": "Defined in `.spectrum`.
Used by `--spectrum-switch-handle-background-color`.", + "control": "color" + } + }, + "passthroughs": {}, + "high-contrast": { + "highcontrast-switch-label-color-default": { + "value": "var(--mod-switch-label-color-default, var(--spectrum-switch-label-color-default))", + "description": "Defined in `.spectrum-Switch`.
Used by `.spectrum-Switch-label`.
Defaults to `var(--mod-switch-label-color-default, var(--spectrum-switch-label-color-default))`, if not set.", + "control": "color" + }, + "highcontrast-switch-background-color": { + "value": "var(--mod-switch-background-color, var(--spectrum-switch-background-color))", + "description": "Defined in `.spectrum-Switch`.
Used by `.spectrum-Switch .spectrum-Switch-switch`.
Defaults to `var(--mod-switch-background-color, var(--spectrum-switch-background-color))`, if not set.", + "control": "color" + }, + "highcontrast-switch-handle-background-color": { + "value": "var(--mod-switch-handle-background-color, var(--spectrum-switch-handle-background-color))", + "description": "Defined in `.spectrum-Switch`.
Used by `.spectrum-Switch .spectrum-Switch-switch:before`.
Defaults to `var(--mod-switch-handle-background-color, var(--spectrum-switch-handle-background-color))`, if not set.", + "control": "color" + }, + "highcontrast-switch-handle-border-color-default": { + "value": "var(--mod-switch-handle-border-color-default, var(--spectrum-switch-handle-border-color-default))", + "description": "Defined in `.spectrum-Switch`.
Used by `.spectrum-Switch .spectrum-Switch-switch:before`.
Defaults to `var(--mod-switch-handle-border-color-default, var(--spectrum-switch-handle-border-color-default))`, if not set.", + "control": "color" + }, + "highcontrast-switch-handle-border-color-down": { + "value": "var(--mod-switch-handle-border-color-down, var(--spectrum-switch-handle-border-color-down))", + "description": "Defined in `.spectrum-Switch`.
Used by `.spectrum-Switch:active .spectrum-Switch-input + .spectrum-Switch-switch:before`.
Defaults to `var(--mod-switch-handle-border-color-down, var(--spectrum-switch-handle-border-color-down))`, if not set.", + "control": "color" + }, + "highcontrast-switch-label-color-down": { + "value": "var(--mod-switch-label-color-down, var(--spectrum-switch-label-color-down))", + "description": "Defined in `.spectrum-Switch`.
Used by `.spectrum-Switch:active .spectrum-Switch-input ~ .spectrum-Switch-label`.
Defaults to `var(--mod-switch-label-color-down, var(--spectrum-switch-label-color-down))`, if not set.", + "control": "color" + }, + "highcontrast-switch-background-color-selected-down": { + "value": "var(--mod-switch-background-color-selected-down, var(--spectrum-switch-background-color-selected-down))", + "description": "Defined in `.spectrum-Switch`.
Used by `.spectrum-Switch:active .spectrum-Switch-input:checked:enabled + .spectrum-Switch-switch`.
Defaults to `var(--mod-switch-background-color-selected-down, var(--spectrum-switch-background-color-selected-down))`, if not set.", + "control": "color" + }, + "highcontrast-switch-handle-border-color-selected-down": { + "value": "var(--mod-switch-handle-border-color-selected-down, var(--spectrum-switch-handle-border-color-selected-down))", + "description": "Defined in `.spectrum-Switch`.
Used by `.spectrum-Switch:active .spectrum-Switch-input:checked:enabled + .spectrum-Switch-switch:before`.
Defaults to `var(--mod-switch-handle-border-color-selected-down, var(--spectrum-switch-handle-border-color-selected-down))`, if not set.", + "control": "color" + }, + "highcontrast-switch-focus-indicator-color": { + "value": "var(--mod-switch-focus-indicator-color, var(--spectrum-switch-focus-indicator-color))", + "description": "Defined in `.spectrum-Switch`.
Used by `.spectrum-Switch .spectrum-Switch-input:focus-visible + .spectrum-Switch-switch:after`, `.spectrum-Switch:hover .spectrum-Switch-input:focus-visible + .spectrum-Switch-switch:after`.
Defaults to `var(--mod-switch-focus-indicator-color, var(--spectrum-switch-focus-indicator-color))`, if not set.", + "control": "color" + }, + "highcontrast-switch-handle-border-color-focus": { + "value": "var(--mod-switch-handle-border-color-focus, var(--spectrum-switch-handle-border-color-focus))", + "description": "Defined in `.spectrum-Switch`.
Used by `.spectrum-Switch .spectrum-Switch-input:focus-visible + .spectrum-Switch-switch:before`, `.spectrum-Switch:hover .spectrum-Switch-input:focus-visible + .spectrum-Switch-switch:before`.
Defaults to `var(--mod-switch-handle-border-color-focus, var(--spectrum-switch-handle-border-color-focus))`, if not set.", + "control": "color" + }, + "highcontrast-switch-background-color-selected-focus": { + "value": "var(--mod-switch-background-color-selected-focus, var(--spectrum-switch-background-color-selected-focus))", + "description": "Defined in `.spectrum-Switch`.
Used by `.spectrum-Switch .spectrum-Switch-input:focus-visible:checked + .spectrum-Switch-switch`, `.spectrum-Switch:hover .spectrum-Switch-input:focus-visible:checked + .spectrum-Switch-switch`.
Defaults to `var(--mod-switch-background-color-selected-focus, var(--spectrum-switch-background-color-selected-focus))`, if not set.", + "control": "color" + }, + "highcontrast-switch-handle-border-color-selected-focus": { + "value": "var(--mod-switch-handle-border-color-selected-focus, var(--spectrum-switch-handle-border-color-selected-focus))", + "description": "Defined in `.spectrum-Switch`.
Used by `.spectrum-Switch .spectrum-Switch-input:focus-visible:checked + .spectrum-Switch-switch:before`, `.spectrum-Switch:hover .spectrum-Switch-input:focus-visible:checked + .spectrum-Switch-switch:before`.
Defaults to `var(--mod-switch-handle-border-color-selected-focus, var(--spectrum-switch-handle-border-color-selected-focus))`, if not set.", + "control": "color" + }, + "highcontrast-switch-label-color-focus": { + "value": "var(--mod-switch-label-color-focus, var(--spectrum-switch-label-color-focus))", + "description": "Defined in `.spectrum-Switch`.
Used by `.spectrum-Switch .spectrum-Switch-input:focus-visible ~ .spectrum-Switch-label`, `.spectrum-Switch:hover .spectrum-Switch-input:focus-visible ~ .spectrum-Switch-label`.
Defaults to `var(--mod-switch-label-color-focus, var(--spectrum-switch-label-color-focus))`, if not set.", + "control": "color" + }, + "highcontrast-switch-handle-border-color-hover": { + "value": "var(--mod-switch-handle-border-color-hover, var(--spectrum-switch-handle-border-color-hover))", + "description": "Defined in `.spectrum-Switch`.
Used by `.spectrum-Switch:hover .spectrum-Switch-input + .spectrum-Switch-switch:before`.
Defaults to `var(--mod-switch-handle-border-color-hover, var(--spectrum-switch-handle-border-color-hover))`, if not set.", + "control": "color" + }, + "highcontrast-switch-label-color-hover": { + "value": "var(--mod-switch-label-color-hover, var(--spectrum-switch-label-color-hover))", + "description": "Defined in `.spectrum-Switch`.
Used by `.spectrum-Switch:hover .spectrum-Switch-input ~ .spectrum-Switch-label`.
Defaults to `var(--mod-switch-label-color-hover, var(--spectrum-switch-label-color-hover))`, if not set.", + "control": "color" + }, + "highcontrast-switch-background-color-selected-hover": { + "value": "var(--mod-switch-background-color-selected-hover, var(--spectrum-switch-background-color-selected-hover))", + "description": "Defined in `.spectrum-Switch`.
Used by `.spectrum-Switch:hover .spectrum-Switch-input:checked:enabled + .spectrum-Switch-switch`.
Defaults to `var(--mod-switch-background-color-selected-hover, var(--spectrum-switch-background-color-selected-hover))`, if not set.", + "control": "color" + }, + "highcontrast-switch-handle-border-color-selected-hover": { + "value": "var(--mod-switch-handle-border-color-selected-hover, var(--spectrum-switch-handle-border-color-selected-hover))", + "description": "Defined in `.spectrum-Switch`.
Used by `.spectrum-Switch:hover .spectrum-Switch-input:checked:enabled + .spectrum-Switch-switch:before`.
Defaults to `var(--mod-switch-handle-border-color-selected-hover, var(--spectrum-switch-handle-border-color-selected-hover))`, if not set.", + "control": "color" + }, + "highcontrast-switch-handle-border-color-disabled": { + "value": "var(--mod-switch-handle-border-color-disabled, var(--spectrum-switch-handle-border-color-disabled))", + "description": "Defined in `.spectrum-Switch`.
Used by `.spectrum-Switch:hover .spectrum-Switch-input:disabled + .spectrum-Switch-switch:before, .spectrum-Switch:hover .spectrum-Switch-input[disabled] + .spectrum-Switch-switch:before`, `.spectrum-Switch:hover .spectrum-Switch-input:disabled:checked + .spectrum-Switch-switch:before, .spectrum-Switch:hover .spectrum-Switch-input[disabled]:checked + .spectrum-Switch-switch:before`, `.spectrum-Switch-input:disabled + .spectrum-Switch-switch:before, .spectrum-Switch-input[disabled] + .spectrum-Switch-switch:before`, `.spectrum-Switch-input:disabled:checked + .spectrum-Switch-switch:before, .spectrum-Switch-input[disabled]:checked + .spectrum-Switch-switch:before`.
Defaults to `var(--mod-switch-handle-border-color-disabled, var(--spectrum-switch-handle-border-color-disabled))`, if not set.", + "control": "color" + }, + "highcontrast-switch-label-color-disabled": { + "value": "var(--mod-switch-label-color-disabled, var(--spectrum-switch-label-color-disabled))", + "description": "Defined in `.spectrum-Switch`.
Used by `.spectrum-Switch:hover .spectrum-Switch-input:disabled ~ .spectrum-Switch-label, .spectrum-Switch:hover .spectrum-Switch-input[disabled] ~ .spectrum-Switch-label`, `.spectrum-Switch:hover .spectrum-Switch-input:disabled:checked ~ .spectrum-Switch-label, .spectrum-Switch:hover .spectrum-Switch-input[disabled]:checked ~ .spectrum-Switch-label`, `.spectrum-Switch-input:disabled ~ .spectrum-Switch-label, .spectrum-Switch-input[disabled] ~ .spectrum-Switch-label`.
Defaults to `var(--mod-switch-label-color-disabled, var(--spectrum-switch-label-color-disabled))`, if not set.", + "control": "color" + }, + "highcontrast-switch-background-color-selected-disabled": { + "value": "var(--mod-switch-background-color-selected-disabled, var(--spectrum-switch-background-color-selected-disabled))", + "description": "Defined in `.spectrum-Switch`.
Used by `.spectrum-Switch:hover .spectrum-Switch-input:disabled:checked + .spectrum-Switch-switch, .spectrum-Switch:hover .spectrum-Switch-input[disabled]:checked + .spectrum-Switch-switch`, `.spectrum-Switch-input:disabled:checked + .spectrum-Switch-switch, .spectrum-Switch-input[disabled]:checked + .spectrum-Switch-switch`.
Defaults to `var(--mod-switch-background-color-selected-disabled, var(--spectrum-switch-background-color-selected-disabled))`, if not set.", + "control": "color" + }, + "highcontrast-switch-background-color-selected-default": { + "value": "var(--mod-switch-background-color-selected-default, var(--spectrum-switch-background-color-selected-default))", + "description": "Defined in `.spectrum-Switch`.
Used by `.spectrum-Switch-input:checked + .spectrum-Switch-switch`.
Defaults to `var(--mod-switch-background-color-selected-default, var(--spectrum-switch-background-color-selected-default))`, if not set.", + "control": "color" + }, + "highcontrast-switch-handle-border-color-selected-default": { + "value": "var(--mod-switch-handle-border-color-selected-default, var(--spectrum-switch-handle-border-color-selected-default))", + "description": "Defined in `.spectrum-Switch`.
Used by `.spectrum-Switch-input:checked + .spectrum-Switch-switch:before`.
Defaults to `var(--mod-switch-handle-border-color-selected-default, var(--spectrum-switch-handle-border-color-selected-default))`, if not set.", + "control": "color" + } + } } diff --git a/components/switch/stories/switch.stories.js b/components/switch/stories/switch.stories.js index 5286b307882..7b853c606ce 100644 --- a/components/switch/stories/switch.stories.js +++ b/components/switch/stories/switch.stories.js @@ -1,11 +1,13 @@ import { Sizes } from "@spectrum-css/preview/decorators"; import { disableDefaultModes } from "@spectrum-css/preview/modes"; import { isChecked, isDisabled, isEmphasized, size } from "@spectrum-css/preview/types"; -import metadata from "../dist/metadata.json"; -import packageJson from "../package.json"; import { SwitchGroup } from "./switch.test.js"; import { DocsSwitchGroup, Template } from "./template.js"; +// Local assets to render the component styles and structure +import metadata from "../dist/metadata.json"; +import packageJson from "../package.json"; + /** * A switch is used to turn an option on or off. Switches allow users to select the state of a single option at a time and are best used for communicating activation. */ @@ -45,6 +47,7 @@ export default { }, packageJson, metadata, + cssprops: metadata.modifiers, }, }; diff --git a/components/table/dist/metadata.json b/components/table/dist/metadata.json index e319678fb13..a91fb6395e9 100644 --- a/components/table/dist/metadata.json +++ b/components/table/dist/metadata.json @@ -29,8 +29,8 @@ ".spectrum-Table-cell--alignRight", ".spectrum-Table-cell--collapsible", ".spectrum-Table-cell--divider", - ".spectrum-Table-cell.is-focused", ".spectrum-Table-cell:focus-visible", + ".spectrum-Table-cell.is-focused", ".spectrum-Table-checkboxCell", ".spectrum-Table-checkboxCell .spectrum-Table-checkbox", ".spectrum-Table-checkboxCell.spectrum-Table-cell .spectrum-Table-checkbox", @@ -39,30 +39,30 @@ ".spectrum-Table-collapseInner .spectrum-Table-collapseContent", ".spectrum-Table-columnTitle", ".spectrum-Table-disclosureIcon.spectrum-Table-disclosureIcon", - ".spectrum-Table-disclosureIcon.spectrum-Table-disclosureIcon.is-keyboardFocused", ".spectrum-Table-disclosureIcon.spectrum-Table-disclosureIcon:active", ".spectrum-Table-disclosureIcon.spectrum-Table-disclosureIcon:after", ".spectrum-Table-disclosureIcon.spectrum-Table-disclosureIcon:focus", ".spectrum-Table-disclosureIcon.spectrum-Table-disclosureIcon:focus-visible", ".spectrum-Table-disclosureIcon.spectrum-Table-disclosureIcon:focus:hover", ".spectrum-Table-disclosureIcon.spectrum-Table-disclosureIcon:hover", + ".spectrum-Table-disclosureIcon.spectrum-Table-disclosureIcon.is-keyboardFocused", ".spectrum-Table-disclosureIcon.spectrum-Table-disclosureIcon[aria-expanded=\"true\"]", ".spectrum-Table-head", ".spectrum-Table-head [role=\"row\"]", ".spectrum-Table-headCell", ".spectrum-Table-headCell .spectrum-Table-menuIcon", ".spectrum-Table-headCell .spectrum-Table-sortedIcon", + ".spectrum-Table-headCell:focus-visible", ".spectrum-Table-headCell.is-focused", ".spectrum-Table-headCell.is-sortable", - ".spectrum-Table-headCell.is-sortable.is-keyboardFocused", ".spectrum-Table-headCell.is-sortable:active", ".spectrum-Table-headCell.is-sortable:focus", ".spectrum-Table-headCell.is-sortable:focus-visible", ".spectrum-Table-headCell.is-sortable:focus:hover", ".spectrum-Table-headCell.is-sortable:hover", + ".spectrum-Table-headCell.is-sortable.is-keyboardFocused", ".spectrum-Table-headCell.is-sorted-asc .spectrum-Table-sortedIcon", ".spectrum-Table-headCell.is-sorted-desc .spectrum-Table-sortedIcon", - ".spectrum-Table-headCell:focus-visible", ".spectrum-Table-main", ".spectrum-Table-menuIcon", ".spectrum-Table-row", @@ -87,16 +87,6 @@ ".spectrum-Table-row--thumbnail .spectrum-Table-cell", ".spectrum-Table-row--thumbnail .spectrum-Table-cell--thumbnail", ".spectrum-Table-row--thumbnail.spectrum-Table-row--collapsible", - ".spectrum-Table-row.is-drop-target", - ".spectrum-Table-row.is-drop-target .spectrum-Table-cell", - ".spectrum-Table-row.is-drop-target .spectrum-Table-checkbox .spectrum-Checkbox-box:before", - ".spectrum-Table-row.is-focused", - ".spectrum-Table-row.is-focused .spectrum-Table-checkbox .spectrum-Checkbox-box:before", - ".spectrum-Table-row.is-selected", - ".spectrum-Table-row.is-selected .spectrum-Table-checkbox .spectrum-Checkbox-box:before", - ".spectrum-Table-row.is-selected.is-focused", - ".spectrum-Table-row.is-selected:focus-visible", - ".spectrum-Table-row.is-selected:hover", ".spectrum-Table-row:active", ".spectrum-Table-row:first-child", ".spectrum-Table-row:first-child .spectrum-Table-cell:first-child", @@ -109,6 +99,16 @@ ".spectrum-Table-row:last-child", ".spectrum-Table-row:last-child .spectrum-Table-cell:first-child", ".spectrum-Table-row:last-child .spectrum-Table-cell:last-child", + ".spectrum-Table-row.is-drop-target", + ".spectrum-Table-row.is-drop-target .spectrum-Table-cell", + ".spectrum-Table-row.is-drop-target .spectrum-Table-checkbox .spectrum-Checkbox-box:before", + ".spectrum-Table-row.is-focused", + ".spectrum-Table-row.is-focused .spectrum-Table-checkbox .spectrum-Checkbox-box:before", + ".spectrum-Table-row.is-selected", + ".spectrum-Table-row.is-selected .spectrum-Table-checkbox .spectrum-Checkbox-box:before", + ".spectrum-Table-row.is-selected:focus-visible", + ".spectrum-Table-row.is-selected:hover", + ".spectrum-Table-row.is-selected.is-focused", ".spectrum-Table-scroller", ".spectrum-Table-scroller .spectrum-Table-body .spectrum-Table-row .spectrum-Table-cell:first-child", ".spectrum-Table-scroller .spectrum-Table-body .spectrum-Table-row .spectrum-Table-cell:last-child", @@ -125,347 +125,1893 @@ ".spectrum-Table:not(.spectrum-Table-scroller)", "[dir=\"rtl\"] .spectrum-Table" ], - "modifiers": [ - "--mod-table-border-color", - "--mod-table-border-radius", - "--mod-table-border-radius--quiet", - "--mod-table-border-width", - "--mod-table-cell-inline-space", - "--mod-table-checkbox-to-text", - "--mod-table-collapsible-disclosure-inline-spacing", - "--mod-table-collapsible-icon-animation-duration", - "--mod-table-current-header-height", - "--mod-table-cursor-header-default", - "--mod-table-cursor-header-sortable", - "--mod-table-cursor-row-default", - "--mod-table-cursor-section-header", - "--mod-table-default-vertical-align", - "--mod-table-disclosure-icon-size", - "--mod-table-divider-color", - "--mod-table-drop-zone-background-color", - "--mod-table-drop-zone-outline-color", - "--mod-table-edge-to-content", - "--mod-table-focus-indicator-color", - "--mod-table-focus-indicator-thickness", - "--mod-table-header-background-color", - "--mod-table-header-background-color--quiet", - "--mod-table-header-background-color-scrollable", - "--mod-table-header-bottom-to-text", - "--mod-table-header-checkbox-block-spacing", - "--mod-table-header-font-family", - "--mod-table-header-font-size", - "--mod-table-header-font-weight", - "--mod-table-header-line-height", - "--mod-table-header-text-color", - "--mod-table-header-text-transform", - "--mod-table-header-top-to-text", - "--mod-table-header-vertical-align", - "--mod-table-icon-color-active", - "--mod-table-icon-color-default", - "--mod-table-icon-color-focus", - "--mod-table-icon-color-focus-hover", - "--mod-table-icon-color-hover", - "--mod-table-icon-color-key-focus", - "--mod-table-icon-to-text", - "--mod-table-min-header-height", - "--mod-table-min-row-height", - "--mod-table-min-row-height--compact", - "--mod-table-min-row-height--spacious", - "--mod-table-outer-border-inline-width", - "--mod-table-outer-border-inline-width--quiet", - "--mod-table-row-active-color", - "--mod-table-row-background-color", - "--mod-table-row-background-color--quiet", - "--mod-table-row-background-color-hover", - "--mod-table-row-bottom-to-text", - "--mod-table-row-bottom-to-text--compact", - "--mod-table-row-bottom-to-text--spacious", - "--mod-table-row-checkbox-block-spacing", - "--mod-table-row-checkbox-block-spacing--compact", - "--mod-table-row-checkbox-block-spacing--spacious", - "--mod-table-row-font-size", - "--mod-table-row-font-weight", - "--mod-table-row-line-height", - "--mod-table-row-text-color", - "--mod-table-row-top-to-text", - "--mod-table-row-top-to-text--compact", - "--mod-table-row-top-to-text--spacious", - "--mod-table-section-header-background-color", - "--mod-table-section-header-block-end-spacing", - "--mod-table-section-header-block-start-spacing", - "--mod-table-section-header-font-family", - "--mod-table-section-header-font-size", - "--mod-table-section-header-font-style", - "--mod-table-section-header-font-weight", - "--mod-table-section-header-line-height", - "--mod-table-section-header-min-height", - "--mod-table-section-header-text-color", - "--mod-table-selected-row-background-color", - "--mod-table-selected-row-background-color-focus", - "--mod-table-selected-row-background-color-non-emphasized", - "--mod-table-selected-row-background-color-non-emphasized-focus", - "--mod-table-sort-icon-inline-end-spacing", - "--mod-table-sort-icon-inline-start-spacing", - "--mod-table-summary-row-background-color", - "--mod-table-summary-row-font-family", - "--mod-table-summary-row-font-size", - "--mod-table-summary-row-font-style", - "--mod-table-summary-row-font-weight", - "--mod-table-summary-row-line-height", - "--mod-table-summary-row-text-color", - "--mod-table-thumbnail-block-spacing", - "--mod-table-thumbnail-block-spacing-compact", - "--mod-table-thumbnail-block-spacing-spacious", - "--mod-table-thumbnail-size", - "--mod-table-thumbnail-size-compact", - "--mod-table-thumbnail-size-spacious", - "--mod-table-thumbnail-to-text", - "--mod-table-transition-duration" - ], - "component": [ - "--spectrum-table-border-color", - "--spectrum-table-border-divider-width", - "--spectrum-table-border-radius", - "--spectrum-table-border-width", - "--spectrum-table-cell-background-color", - "--spectrum-table-cell-inline-space", - "--spectrum-table-checkbox-to-text", - "--spectrum-table-collapsible-disclosure-inline-spacing", - "--spectrum-table-collapsible-icon-animation-duration", - "--spectrum-table-collapsible-tier-indent", - "--spectrum-table-column-header-row-bottom-to-text-extra-large", - "--spectrum-table-column-header-row-bottom-to-text-large", - "--spectrum-table-column-header-row-bottom-to-text-medium", - "--spectrum-table-column-header-row-bottom-to-text-small", - "--spectrum-table-column-header-row-top-to-text-extra-large", - "--spectrum-table-column-header-row-top-to-text-large", - "--spectrum-table-column-header-row-top-to-text-medium", - "--spectrum-table-column-header-row-top-to-text-small", - "--spectrum-table-default-vertical-align", - "--spectrum-table-disclosure-icon-size", - "--spectrum-table-divider-color", - "--spectrum-table-drop-zone-background-color", - "--spectrum-table-drop-zone-outline-color", - "--spectrum-table-edge-to-content", - "--spectrum-table-focus-indicator-color", - "--spectrum-table-focus-indicator-thickness", - "--spectrum-table-header-background-color", - "--spectrum-table-header-bottom-to-text", - "--spectrum-table-header-checkbox-block-spacing", - "--spectrum-table-header-font-weight", - "--spectrum-table-header-row-checkbox-to-top-extra-large", - "--spectrum-table-header-row-checkbox-to-top-large", - "--spectrum-table-header-row-checkbox-to-top-medium", - "--spectrum-table-header-row-checkbox-to-top-small", - "--spectrum-table-header-text-color", - "--spectrum-table-header-top-to-text", - "--spectrum-table-header-vertical-align", - "--spectrum-table-icon-color", - "--spectrum-table-icon-color-active", - "--spectrum-table-icon-color-default", - "--spectrum-table-icon-color-focus", - "--spectrum-table-icon-color-focus-hover", - "--spectrum-table-icon-color-hover", - "--spectrum-table-icon-color-key-focus", - "--spectrum-table-icon-to-text", - "--spectrum-table-min-header-height", - "--spectrum-table-min-row-height", - "--spectrum-table-outer-border-inline-width", - "--spectrum-table-row-active-color", - "--spectrum-table-row-background-color", - "--spectrum-table-row-background-color-hover", - "--spectrum-table-row-bottom-to-text", - "--spectrum-table-row-bottom-to-text-extra-large-compact", - "--spectrum-table-row-bottom-to-text-extra-large-regular", - "--spectrum-table-row-bottom-to-text-extra-large-spacious", - "--spectrum-table-row-bottom-to-text-large-compact", - "--spectrum-table-row-bottom-to-text-large-regular", - "--spectrum-table-row-bottom-to-text-large-spacious", - "--spectrum-table-row-bottom-to-text-medium-compact", - "--spectrum-table-row-bottom-to-text-medium-regular", - "--spectrum-table-row-bottom-to-text-medium-spacious", - "--spectrum-table-row-bottom-to-text-small-compact", - "--spectrum-table-row-bottom-to-text-small-regular", - "--spectrum-table-row-bottom-to-text-small-spacious", - "--spectrum-table-row-checkbox-block-spacing", - "--spectrum-table-row-checkbox-to-top-extra-large-compact", - "--spectrum-table-row-checkbox-to-top-extra-large-regular", - "--spectrum-table-row-checkbox-to-top-extra-large-spacious", - "--spectrum-table-row-checkbox-to-top-large-compact", - "--spectrum-table-row-checkbox-to-top-large-regular", - "--spectrum-table-row-checkbox-to-top-large-spacious", - "--spectrum-table-row-checkbox-to-top-medium-compact", - "--spectrum-table-row-checkbox-to-top-medium-regular", - "--spectrum-table-row-checkbox-to-top-medium-spacious", - "--spectrum-table-row-checkbox-to-top-small-compact", - "--spectrum-table-row-checkbox-to-top-small-regular", - "--spectrum-table-row-checkbox-to-top-small-spacious", - "--spectrum-table-row-down-opacity", - "--spectrum-table-row-font-family", - "--spectrum-table-row-font-size", - "--spectrum-table-row-font-style", - "--spectrum-table-row-font-weight", - "--spectrum-table-row-height-extra-large-compact", - "--spectrum-table-row-height-extra-large-regular", - "--spectrum-table-row-height-extra-large-spacious", - "--spectrum-table-row-height-large-compact", - "--spectrum-table-row-height-large-regular", - "--spectrum-table-row-height-large-spacious", - "--spectrum-table-row-height-medium-compact", - "--spectrum-table-row-height-medium-regular", - "--spectrum-table-row-height-medium-spacious", - "--spectrum-table-row-height-small-compact", - "--spectrum-table-row-height-small-regular", - "--spectrum-table-row-height-small-spacious", - "--spectrum-table-row-hover-opacity", - "--spectrum-table-row-line-height", - "--spectrum-table-row-text-color", - "--spectrum-table-row-tier", - "--spectrum-table-row-top-to-text", - "--spectrum-table-row-top-to-text-extra-large-compact", - "--spectrum-table-row-top-to-text-extra-large-regular", - "--spectrum-table-row-top-to-text-extra-large-spacious", - "--spectrum-table-row-top-to-text-large-compact", - "--spectrum-table-row-top-to-text-large-regular", - "--spectrum-table-row-top-to-text-large-spacious", - "--spectrum-table-row-top-to-text-medium-compact", - "--spectrum-table-row-top-to-text-medium-regular", - "--spectrum-table-row-top-to-text-medium-spacious", - "--spectrum-table-row-top-to-text-small-compact", - "--spectrum-table-row-top-to-text-small-regular", - "--spectrum-table-row-top-to-text-small-spacious", - "--spectrum-table-section-header-background-color", - "--spectrum-table-section-header-block-end-spacing", - "--spectrum-table-section-header-block-start-spacing", - "--spectrum-table-section-header-font-weight", - "--spectrum-table-section-header-min-height", - "--spectrum-table-section-header-row-height-extra-large", - "--spectrum-table-section-header-row-height-large", - "--spectrum-table-section-header-row-height-medium", - "--spectrum-table-section-header-row-height-small", - "--spectrum-table-selected-cell-background-color", - "--spectrum-table-selected-cell-background-color-focus", - "--spectrum-table-selected-row-background-color", - "--spectrum-table-selected-row-background-color-focus", - "--spectrum-table-selected-row-background-color-non-emphasized", - "--spectrum-table-selected-row-background-color-non-emphasized-focus", - "--spectrum-table-selected-row-background-opacity", - "--spectrum-table-selected-row-background-opacity-hover", - "--spectrum-table-selected-row-background-opacity-non-emphasized", - "--spectrum-table-selected-row-background-opacity-non-emphasized-hover", - "--spectrum-table-summary-row-background-color", - "--spectrum-table-summary-row-font-weight", - "--spectrum-table-thumbnail-block-spacing", - "--spectrum-table-thumbnail-cell-block-spacing", - "--spectrum-table-thumbnail-inner-content-block-spacing", - "--spectrum-table-thumbnail-inner-minimum-block-spacing", - "--spectrum-table-thumbnail-size", - "--spectrum-table-thumbnail-to-text", - "--spectrum-table-thumbnail-to-top-minimum-extra-large-compact", - "--spectrum-table-thumbnail-to-top-minimum-extra-large-regular", - "--spectrum-table-thumbnail-to-top-minimum-extra-large-spacious", - "--spectrum-table-thumbnail-to-top-minimum-large-compact", - "--spectrum-table-thumbnail-to-top-minimum-large-regular", - "--spectrum-table-thumbnail-to-top-minimum-large-spacious", - "--spectrum-table-thumbnail-to-top-minimum-medium-compact", - "--spectrum-table-thumbnail-to-top-minimum-medium-regular", - "--spectrum-table-thumbnail-to-top-minimum-medium-spacious", - "--spectrum-table-thumbnail-to-top-minimum-small-compact", - "--spectrum-table-thumbnail-to-top-minimum-small-regular", - "--spectrum-table-thumbnail-to-top-minimum-small-spacious", - "--spectrum-table-transition-duration" - ], - "global": [ - "--spectrum-accent-visual-color", - "--spectrum-animation-duration-100", - "--spectrum-background-layer-1-color", - "--spectrum-blue-900-rgb", - "--spectrum-body-color", - "--spectrum-bold-font-weight", - "--spectrum-checkbox-control-size-small", - "--spectrum-component-bottom-to-text-100", - "--spectrum-component-bottom-to-text-200", - "--spectrum-component-bottom-to-text-300", - "--spectrum-component-bottom-to-text-75", - "--spectrum-component-height-100", - "--spectrum-component-height-200", - "--spectrum-component-height-300", - "--spectrum-component-height-75", - "--spectrum-component-top-to-text-100", - "--spectrum-component-top-to-text-200", - "--spectrum-component-top-to-text-300", - "--spectrum-component-top-to-text-75", - "--spectrum-corner-radius-100", - "--spectrum-default-font-style", - "--spectrum-drop-zone-background-color-opacity", - "--spectrum-drop-zone-background-color-rgb", - "--spectrum-focus-indicator-color", - "--spectrum-focus-indicator-thickness", - "--spectrum-font-size-100", - "--spectrum-font-size-200", - "--spectrum-font-size-300", - "--spectrum-font-size-75", - "--spectrum-gray-100", - "--spectrum-gray-200", - "--spectrum-gray-25", - "--spectrum-gray-300", - "--spectrum-gray-50", - "--spectrum-gray-700-rgb", - "--spectrum-gray-75", - "--spectrum-gray-900-rgb", - "--spectrum-line-height-100", - "--spectrum-logical-rotation", - "--spectrum-neutral-content-color-default", - "--spectrum-neutral-subdued-content-color-default", - "--spectrum-neutral-subdued-content-color-down", - "--spectrum-neutral-subdued-content-color-hover", - "--spectrum-neutral-subdued-content-color-key-focus", - "--spectrum-regular-font-weight", - "--spectrum-sans-font-family-stack", - "--spectrum-spacing-300", - "--spectrum-text-to-visual-100", - "--spectrum-text-to-visual-200", - "--spectrum-text-to-visual-300", - "--spectrum-thumbnail-size-200", - "--spectrum-thumbnail-size-300", - "--spectrum-thumbnail-size-50", - "--spectrum-thumbnail-size-500", - "--spectrum-thumbnail-size-700", - "--spectrum-thumbnail-size-800", - "--spectrum-transparent-white-100", - "--spectrum-transparent-white-25" - ], - "system-theme": [ - "--system-table-border-color", - "--system-table-divider-color", - "--system-table-header-background-color", - "--system-table-icon-color-focus", - "--system-table-icon-color-focus-hover", - "--system-table-quiet-header-background-color", - "--system-table-quiet-row-background-color", - "--system-table-row-background-color", - "--system-table-section-header-background-color", - "--system-table-summary-row-background-color" - ], - "passthroughs": ["--mod-checkbox-spacing", "--mod-thumbnail-size"], - "high-contrast": [ - "--highcontrast-table-border-color", - "--highcontrast-table-cell-focus-extra-offset", - "--highcontrast-table-cell-focus-indicator-color", - "--highcontrast-table-divider-color", - "--highcontrast-table-focus-indicator-color", - "--highcontrast-table-icon-color", - "--highcontrast-table-icon-color-focus", - "--highcontrast-table-row-background-color", - "--highcontrast-table-row-background-color-hover", - "--highcontrast-table-row-text-color", - "--highcontrast-table-row-text-color-hover", - "--highcontrast-table-section-header-background-color", - "--highcontrast-table-section-header-text-color", - "--highcontrast-table-selected-row-background-color", - "--highcontrast-table-selected-row-background-color-focus", - "--highcontrast-table-selected-row-text-color", - "--highcontrast-table-selected-row-text-color-focus", - "--highcontrast-table-transition-duration" - ] + "modifiers": { + "mod-table-row-background-color": { + "value": "var(--spectrum-table-row-background-color)", + "description": "Defined in `.spectrum-Table--quiet`.
Used by `--spectrum-table-cell-background-color`.
Defaults to `var(--spectrum-table-row-background-color)`, if not set.", + "control": "color", + "category": "Modifier" + }, + "mod-table-selected-row-background-color-non-emphasized": { + "value": "var(--spectrum-neutral-background-color-selected-default)", + "description": "Used by `--spectrum-table-selected-cell-background-color`.
Defaults to `var(--spectrum-table-selected-row-background-color-non-emphasized)`, if not set.", + "control": "color", + "category": "Modifier" + }, + "mod-table-selected-row-background-color-non-emphasized-focus": { + "value": "var(--spectrum-table-selected-row-background-color-non-emphasized-focus)", + "description": "Used by `--spectrum-table-selected-cell-background-color-focus`.
Defaults to `var(--spectrum-table-selected-row-background-color-non-emphasized-focus)`, if not set.", + "control": "color", + "category": "Modifier" + }, + "mod-table-thumbnail-size": { + "value": "var(--spectrum-table-thumbnail-size)", + "description": "Defined in `.spectrum-Table--compact`, `.spectrum-Table--compact.spectrum-Table--sizeS`, `.spectrum-Table--compact.spectrum-Table--sizeL`, `.spectrum-Table--compact.spectrum-Table--sizeXL`, `.spectrum-Table--spacious`, `.spectrum-Table--spacious.spectrum-Table--sizeS`, `.spectrum-Table--spacious.spectrum-Table--sizeL`, `.spectrum-Table--spacious.spectrum-Table--sizeXL`.
Used by `--mod-thumbnail-size`, `--spectrum-table-thumbnail-inner-content-block-spacing`, `--spectrum-table-thumbnail-inner-minimum-block-spacing`.
Defaults to `var(--spectrum-table-thumbnail-size)`, if not set.", + "control": "text", + "category": "Modifier" + }, + "mod-table-min-row-height": { + "value": "var(--spectrum-table-min-row-height)", + "description": "Defined in `.spectrum-Table--compact`, `.spectrum-Table--compact.spectrum-Table--sizeS`, `.spectrum-Table--compact.spectrum-Table--sizeL`, `.spectrum-Table--compact.spectrum-Table--sizeXL`, `.spectrum-Table--spacious`, `.spectrum-Table--spacious.spectrum-Table--sizeS`, `.spectrum-Table--spacious.spectrum-Table--sizeL`, `.spectrum-Table--spacious.spectrum-Table--sizeXL`.
Used by `.spectrum-Table-cell`, `.spectrum-Table-row--collapsible .spectrum-Table-disclosureIcon`.
Defaults to `var(--spectrum-table-min-row-height)`, if not set.", + "control": "text", + "category": "Modifier" + }, + "mod-table-min-row-height--compact": { + "value": "var(--spectrum-component-height-300)", + "description": "Used by `--mod-table-min-row-height`.
Defaults to `var(--spectrum-table-row-height-extra-large-compact)`, if not set.", + "control": "text", + "category": "Modifier" + }, + "mod-table-row-top-to-text": { + "value": "var(--spectrum-table-row-top-to-text)", + "description": "Defined in `.spectrum-Table--compact`, `.spectrum-Table--compact.spectrum-Table--sizeS`, `.spectrum-Table--compact.spectrum-Table--sizeL`, `.spectrum-Table--compact.spectrum-Table--sizeXL`, `.spectrum-Table--spacious`, `.spectrum-Table--spacious.spectrum-Table--sizeS`, `.spectrum-Table--spacious.spectrum-Table--sizeL`, `.spectrum-Table--spacious.spectrum-Table--sizeXL`.
Used by `.spectrum-Table-cell`, `.spectrum-Table-collapseInner .spectrum-Table-collapseContent`.
Defaults to `var(--spectrum-table-row-top-to-text)`, if not set.", + "control": "text", + "category": "Modifier" + }, + "mod-table-row-top-to-text--compact": { + "value": "var(--spectrum-component-top-to-text-300)", + "description": "Used by `--mod-table-row-top-to-text`.
Defaults to `var(--spectrum-table-row-top-to-text-extra-large-compact)`, if not set.", + "control": "text", + "category": "Modifier" + }, + "mod-table-row-bottom-to-text": { + "value": "var(--spectrum-table-row-bottom-to-text)", + "description": "Defined in `.spectrum-Table--compact`, `.spectrum-Table--compact.spectrum-Table--sizeS`, `.spectrum-Table--compact.spectrum-Table--sizeL`, `.spectrum-Table--compact.spectrum-Table--sizeXL`, `.spectrum-Table--spacious`, `.spectrum-Table--spacious.spectrum-Table--sizeS`, `.spectrum-Table--spacious.spectrum-Table--sizeL`, `.spectrum-Table--spacious.spectrum-Table--sizeXL`.
Used by `.spectrum-Table-cell`, `.spectrum-Table-collapseInner .spectrum-Table-collapseContent`.
Defaults to `var(--spectrum-table-row-bottom-to-text)`, if not set.", + "control": "text", + "category": "Modifier" + }, + "mod-table-row-bottom-to-text--compact": { + "value": "var(--spectrum-component-bottom-to-text-300)", + "description": "Used by `--mod-table-row-bottom-to-text`.
Defaults to `var(--spectrum-table-row-bottom-to-text-extra-large-compact)`, if not set.", + "control": "text", + "category": "Modifier" + }, + "mod-table-row-checkbox-block-spacing": { + "value": "var(--spectrum-table-row-checkbox-block-spacing)", + "description": "Defined in `.spectrum-Table--compact`, `.spectrum-Table--compact.spectrum-Table--sizeS`, `.spectrum-Table--compact.spectrum-Table--sizeL`, `.spectrum-Table--compact.spectrum-Table--sizeXL`, `.spectrum-Table--spacious`, `.spectrum-Table--spacious.spectrum-Table--sizeS`, `.spectrum-Table--spacious.spectrum-Table--sizeL`, `.spectrum-Table--spacious.spectrum-Table--sizeXL`.
Used by `.spectrum-Table-checkboxCell.spectrum-Table-cell .spectrum-Table-checkbox`.
Defaults to `var(--spectrum-table-row-checkbox-block-spacing)`, if not set.", + "control": "text", + "category": "Modifier" + }, + "mod-table-row-checkbox-block-spacing--compact": { + "value": "15px", + "description": "Used by `--mod-table-row-checkbox-block-spacing`.
Defaults to `var(--spectrum-table-row-checkbox-to-top-extra-large-compact)`, if not set.", + "control": "text", + "category": "Modifier" + }, + "mod-table-thumbnail-block-spacing": { + "value": "var(--spectrum-table-thumbnail-block-spacing)", + "description": "Defined in `.spectrum-Table--compact`, `.spectrum-Table--compact.spectrum-Table--sizeS`, `.spectrum-Table--compact.spectrum-Table--sizeL`, `.spectrum-Table--compact.spectrum-Table--sizeXL`, `.spectrum-Table--spacious`, `.spectrum-Table--spacious.spectrum-Table--sizeS`, `.spectrum-Table--spacious.spectrum-Table--sizeL`, `.spectrum-Table--spacious.spectrum-Table--sizeXL`.
Used by `--spectrum-table-thumbnail-cell-block-spacing`.
Defaults to `var(--spectrum-table-thumbnail-block-spacing)`, if not set.", + "control": "text", + "category": "Modifier" + }, + "mod-table-thumbnail-block-spacing-compact": { + "value": "8px", + "description": "Used by `--mod-table-thumbnail-block-spacing`.
Defaults to `var(--spectrum-table-thumbnail-to-top-minimum-extra-large-compact)`, if not set.", + "control": "text", + "category": "Modifier" + }, + "mod-table-thumbnail-size-compact": { + "value": "32px", + "description": "Used by `--mod-table-thumbnail-size`.
Defaults to `var(--spectrum-thumbnail-size-500)`, if not set.", + "control": "text", + "category": "Modifier" + }, + "mod-table-min-row-height--spacious": { + "value": "64px", + "description": "Used by `--mod-table-min-row-height`.
Defaults to `var(--spectrum-table-row-height-extra-large-spacious)`, if not set.", + "control": "text", + "category": "Modifier" + }, + "mod-table-row-top-to-text--spacious": { + "value": "21px", + "description": "Used by `--mod-table-row-top-to-text`.
Defaults to `var(--spectrum-table-row-top-to-text-extra-large-spacious)`, if not set.", + "control": "text", + "category": "Modifier" + }, + "mod-table-row-bottom-to-text--spacious": { + "value": "21px", + "description": "Used by `--mod-table-row-bottom-to-text`.
Defaults to `var(--spectrum-table-row-bottom-to-text-extra-large-spacious)`, if not set.", + "control": "text", + "category": "Modifier" + }, + "mod-table-row-checkbox-block-spacing--spacious": { + "value": "23px", + "description": "Used by `--mod-table-row-checkbox-block-spacing`.
Defaults to `var(--spectrum-table-row-checkbox-to-top-extra-large-spacious)`, if not set.", + "control": "text", + "category": "Modifier" + }, + "mod-table-thumbnail-block-spacing-spacious": { + "value": "10px", + "description": "Used by `--mod-table-thumbnail-block-spacing`.
Defaults to `var(--spectrum-table-thumbnail-to-top-minimum-extra-large-spacious)`, if not set.", + "control": "text", + "category": "Modifier" + }, + "mod-table-thumbnail-size-spacious": { + "value": "44px", + "description": "Used by `--mod-table-thumbnail-size`.
Defaults to `var(--spectrum-thumbnail-size-800)`, if not set.", + "control": "text", + "category": "Modifier" + }, + "mod-table-selected-row-background-color": { + "value": "var(--spectrum-informative-color-800)", + "description": "Used by `--spectrum-table-selected-cell-background-color`.
Defaults to `var(--spectrum-table-selected-row-background-color)`, if not set.", + "control": "color", + "category": "Modifier" + }, + "mod-table-selected-row-background-color-focus": { + "value": "var(--spectrum-table-selected-row-background-color-focus)", + "description": "Used by `--spectrum-table-selected-cell-background-color-focus`.
Defaults to `var(--spectrum-table-selected-row-background-color-focus)`, if not set.", + "control": "color", + "category": "Modifier" + }, + "mod-table-border-radius": { + "value": "var(--spectrum-table-border-radius)", + "description": "Defined in `.spectrum-Table--quiet`.
Used by `.spectrum-Table-body`, `.spectrum-Table-row:first-child .spectrum-Table-cell:first-child`, `.spectrum-Table-row:first-child .spectrum-Table-cell:last-child`, `.spectrum-Table-row:last-child .spectrum-Table-cell:first-child`, `.spectrum-Table-row:last-child .spectrum-Table-cell:last-child`, `.spectrum-Table-row:first-child`, `.spectrum-Table-row:last-child`, `.spectrum-Table-scroller`.
Defaults to `var(--spectrum-table-border-radius)`, if not set.", + "control": "text", + "category": "Modifier" + }, + "mod-table-border-radius--quiet": { + "description": "Used by `--mod-table-border-radius`.", + "control": "text", + "category": "Modifier" + }, + "mod-table-outer-border-inline-width": { + "value": "var(--spectrum-table-outer-border-inline-width)", + "description": "Defined in `.spectrum-Table--quiet`.
Used by `.spectrum-Table-cell`, `.spectrum-Table-body .spectrum-Table-row .spectrum-Table-cell:first-child`, `.spectrum-Table-body .spectrum-Table-row .spectrum-Table-cell:last-child`, `.spectrum-Table-scroller`.
Defaults to `var(--spectrum-table-outer-border-inline-width)`, if not set.", + "control": "text", + "category": "Modifier" + }, + "mod-table-outer-border-inline-width--quiet": { + "description": "Used by `--mod-table-outer-border-inline-width`.", + "control": "text", + "category": "Modifier" + }, + "mod-table-header-background-color": { + "value": "var(--spectrum-table-header-background-color)", + "description": "Defined in `.spectrum-Table--quiet`.
Used by `.spectrum-Table-headCell`.
Defaults to `var(--spectrum-table-header-background-color)`, if not set.", + "control": "color", + "category": "Modifier" + }, + "mod-table-header-background-color--quiet": { + "value": "light-dark(rgba(255, 255, 255, 0.11), rgba(255, 255, 255, 0.11))", + "description": "Used by `--mod-table-header-background-color`.
Defaults to `var(--spectrum-transparent-white-100)`, if not set.", + "control": "color", + "category": "Modifier" + }, + "mod-table-row-background-color--quiet": { + "value": "light-dark(rgba(255, 255, 255, 0.11), rgba(255, 255, 255, 0.11))", + "description": "Used by `--mod-table-row-background-color`.
Defaults to `var(--spectrum-transparent-white-100)`, if not set.", + "control": "color", + "category": "Modifier" + }, + "mod-table-sort-icon-inline-start-spacing": { + "description": "Used by `.spectrum-Table-sortedIcon`.", + "control": "text", + "category": "Modifier" + }, + "mod-table-sort-icon-inline-end-spacing": { + "value": "var(--mod-table-icon-to-text, var(--spectrum-table-icon-to-text))", + "description": "Used by `.spectrum-Table-sortedIcon`.
Defaults to `var(--mod-table-icon-to-text, var(--spectrum-table-icon-to-text))`, if not set.", + "control": "text", + "category": "Modifier" + }, + "mod-table-icon-to-text": { + "value": "var(--spectrum-table-icon-to-text)", + "description": "Used by `.spectrum-Table-sortedIcon`, `.spectrum-Table-menuIcon`.
Defaults to `var(--spectrum-table-icon-to-text)`, if not set.", + "control": "text", + "category": "Modifier" + }, + "mod-table-transition-duration": { + "value": "var(--spectrum-table-transition-duration)", + "description": "Used by `.spectrum-Table-sortedIcon`, `.spectrum-Table-headCell`, `.spectrum-Table-row`.
Defaults to `var(--spectrum-table-transition-duration)`, if not set.", + "control": "text", + "category": "Modifier" + }, + "mod-table-icon-color-default": { + "value": "var(--spectrum-table-icon-color-default)", + "description": "Used by `--spectrum-table-icon-color`.
Defaults to `var(--spectrum-table-icon-color-default)`, if not set.", + "control": "color", + "category": "Modifier" + }, + "mod-table-header-vertical-align": { + "value": "var(--spectrum-table-header-vertical-align)", + "description": "Used by `.spectrum-Table-headCell`.
Defaults to `var(--spectrum-table-header-vertical-align)`, if not set.", + "control": "text", + "category": "Modifier" + }, + "mod-table-header-font-family": { + "value": "var(--spectrum-table-row-font-family)", + "description": "Used by `.spectrum-Table-headCell`.
Defaults to `var(--spectrum-table-row-font-family)`, if not set.", + "control": "text", + "category": "Modifier" + }, + "mod-table-header-font-size": { + "value": "var(--spectrum-table-row-font-size)", + "description": "Used by `.spectrum-Table-headCell`, `.spectrum-Table-scroller`, `--spectrum-table-thumbnail-inner-content-block-spacing`.
Defaults to `var(--spectrum-table-row-font-size)`, if not set.", + "control": "text", + "category": "Modifier" + }, + "mod-table-header-font-weight": { + "value": "var(--spectrum-table-header-font-weight)", + "description": "Used by `.spectrum-Table-headCell`.
Defaults to `var(--spectrum-table-header-font-weight)`, if not set.", + "control": "text", + "category": "Modifier" + }, + "mod-table-header-line-height": { + "value": "var(--spectrum-table-row-line-height)", + "description": "Used by `.spectrum-Table-headCell`, `.spectrum-Table-scroller`.
Defaults to `var(--spectrum-table-row-line-height)`, if not set.", + "control": "text", + "category": "Modifier" + }, + "mod-table-header-text-transform": { + "description": "Used by `.spectrum-Table-headCell`.", + "control": "text", + "category": "Modifier" + }, + "mod-table-min-header-height": { + "value": "var(--spectrum-table-min-header-height)", + "description": "Used by `.spectrum-Table-headCell`.
Defaults to `var(--spectrum-table-min-header-height)`, if not set.", + "control": "text", + "category": "Modifier" + }, + "mod-table-header-top-to-text": { + "value": "var(--spectrum-table-header-top-to-text)", + "description": "Used by `.spectrum-Table-headCell`, `.spectrum-Table-scroller`.
Defaults to `var(--spectrum-table-header-top-to-text)`, if not set.", + "control": "text", + "category": "Modifier" + }, + "mod-table-header-bottom-to-text": { + "value": "var(--spectrum-table-header-bottom-to-text)", + "description": "Used by `.spectrum-Table-headCell`, `.spectrum-Table-scroller`.
Defaults to `var(--spectrum-table-header-bottom-to-text)`, if not set.", + "control": "text", + "category": "Modifier" + }, + "mod-table-cell-inline-space": { + "value": "var(--spectrum-table-cell-inline-space)", + "description": "Used by `.spectrum-Table-headCell`.
Defaults to `var(--spectrum-table-cell-inline-space)`, if not set.", + "control": "text", + "category": "Modifier" + }, + "mod-table-header-text-color": { + "value": "var(--spectrum-table-header-text-color)", + "description": "Used by `.spectrum-Table-headCell`.
Defaults to `var(--spectrum-table-header-text-color)`, if not set.", + "control": "color", + "category": "Modifier" + }, + "mod-table-cursor-header-default": { + "description": "Used by `.spectrum-Table-headCell`.", + "control": "text", + "category": "Modifier" + }, + "mod-table-cursor-header-sortable": { + "description": "Used by `.spectrum-Table-headCell.is-sortable`.", + "control": "text", + "category": "Modifier" + }, + "mod-table-icon-color-active": { + "value": "var(--spectrum-table-icon-color-active)", + "description": "Used by `--spectrum-table-icon-color`.
Defaults to `var(--spectrum-table-icon-color-active)`, if not set.", + "control": "color", + "category": "Modifier" + }, + "mod-table-icon-color-focus": { + "value": "var(--spectrum-table-icon-color-focus)", + "description": "Used by `--spectrum-table-icon-color`.
Defaults to `var(--spectrum-table-icon-color-focus)`, if not set.", + "control": "color", + "category": "Modifier" + }, + "mod-table-icon-color-key-focus": { + "value": "var(--spectrum-table-icon-color-key-focus)", + "description": "Used by `--spectrum-table-icon-color`.
Defaults to `var(--spectrum-table-icon-color-key-focus)`, if not set.", + "control": "color", + "category": "Modifier" + }, + "mod-table-border-color": { + "value": "var(--spectrum-table-border-color)", + "description": "Defined in `.spectrum-Table-body.is-drop-target`, `.spectrum-Table-row.is-drop-target`.
Used by `.spectrum-Table-body .spectrum-Table-row:first-child .spectrum-Table-cell`, `.spectrum-Table-body .spectrum-Table-row:last-child .spectrum-Table-cell`, `.spectrum-Table-body .spectrum-Table-row .spectrum-Table-cell:first-child`, `.spectrum-Table-body .spectrum-Table-row .spectrum-Table-cell:last-child`, `.spectrum-Table-scroller`, `.spectrum-Table-scroller .spectrum-Table-headCell`.
Defaults to `var(--spectrum-table-border-color)`, if not set.", + "control": "color", + "category": "Modifier" + }, + "mod-table-focus-indicator-thickness": { + "value": "var(--spectrum-table-focus-indicator-thickness)", + "description": "Used by `.spectrum-Table-body.is-drop-target`, `.spectrum-Table-row.is-drop-target`, `.spectrum-Table-cell.is-focused, .spectrum-Table-cell:focus-visible, .spectrum-Table-headCell.is-focused, .spectrum-Table-headCell:focus-visible`, `.spectrum-Table-disclosureIcon.spectrum-Table-disclosureIcon.is-keyboardFocused, .spectrum-Table-disclosureIcon.spectrum-Table-disclosureIcon:focus-visible`.
Defaults to `var(--spectrum-table-focus-indicator-thickness)`, if not set.", + "control": "text", + "category": "Modifier" + }, + "mod-table-drop-zone-outline-color": { + "value": "var(--spectrum-table-drop-zone-outline-color)", + "description": "Used by `.spectrum-Table-body.is-drop-target`, `.spectrum-Table-row.is-drop-target`, `.spectrum-Table-row.is-drop-target .spectrum-Table-cell`.
Defaults to `var(--spectrum-table-drop-zone-outline-color)`, if not set.", + "control": "color", + "category": "Modifier" + }, + "mod-table-border-width": { + "value": "var(--spectrum-table-border-width)", + "description": "Used by `.spectrum-Table-cell`, `.spectrum-Table-body .spectrum-Table-row:first-child .spectrum-Table-cell`, `.spectrum-Table-body .spectrum-Table-row:last-child .spectrum-Table-cell`, `.spectrum-Table-cell--divider`, `.spectrum-Table-row--sectionHeader .spectrum-Table-cell`, `.spectrum-Table-checkboxCell.spectrum-Table-cell .spectrum-Table-checkbox`, `.spectrum-Table-checkboxCell.spectrum-Table-headCell .spectrum-Table-checkbox`, `.spectrum-Table-scroller`, `.spectrum-Table-scroller .spectrum-Table-headCell`, `.spectrum-Table-collapseInner .spectrum-Table-collapseContent`.
Defaults to `var(--spectrum-table-border-width)`, if not set.", + "control": "text", + "category": "Modifier" + }, + "mod-table-divider-color": { + "value": "var(--spectrum-table-divider-color)", + "description": "Used by `.spectrum-Table-cell`, `.spectrum-Table-cell--divider`.
Defaults to `var(--spectrum-table-divider-color)`, if not set.", + "control": "color", + "category": "Modifier" + }, + "mod-table-row-font-size": { + "value": "var(--spectrum-table-row-font-size)", + "description": "Used by `.spectrum-Table-cell`.
Defaults to `var(--spectrum-table-row-font-size)`, if not set.", + "control": "text", + "category": "Modifier" + }, + "mod-table-row-font-weight": { + "value": "var(--spectrum-table-row-font-weight)", + "description": "Used by `.spectrum-Table-cell`.
Defaults to `var(--spectrum-table-row-font-weight)`, if not set.", + "control": "text", + "category": "Modifier" + }, + "mod-table-row-line-height": { + "value": "var(--spectrum-table-row-line-height)", + "description": "Used by `.spectrum-Table-cell`, `--spectrum-table-thumbnail-inner-content-block-spacing`, `.spectrum-Table-thumbnailInner .spectrum-Thumbnail`.
Defaults to `var(--spectrum-table-row-line-height)`, if not set.", + "control": "text", + "category": "Modifier" + }, + "mod-table-default-vertical-align": { + "value": "var(--spectrum-table-default-vertical-align)", + "description": "Used by `.spectrum-Table-cell`.
Defaults to `var(--spectrum-table-default-vertical-align)`, if not set.", + "control": "text", + "category": "Modifier" + }, + "mod-table-row-text-color": { + "value": "var(--spectrum-table-row-text-color)", + "description": "Used by `.spectrum-Table-cell`.
Defaults to `var(--spectrum-table-row-text-color)`, if not set.", + "control": "color", + "category": "Modifier" + }, + "mod-table-edge-to-content": { + "value": "16px", + "description": "Used by `.spectrum-Table-cell`, `.spectrum-Table-checkboxCell`.
Defaults to `var(--spectrum-table-edge-to-content)`, if not set.", + "control": "text", + "category": "Modifier" + }, + "mod-table-cursor-row-default": { + "description": "Used by `.spectrum-Table-row`.", + "control": "text", + "category": "Modifier" + }, + "mod-table-row-background-color-hover": { + "value": "var(--spectrum-table-row-background-color-hover)", + "description": "Used by `--spectrum-table-cell-background-color`.
Defaults to `var(--spectrum-table-row-background-color-hover)`, if not set.", + "control": "color", + "category": "Modifier" + }, + "mod-table-row-active-color": { + "value": "var(--spectrum-table-row-active-color)", + "description": "Used by `--spectrum-table-cell-background-color`.
Defaults to `var(--spectrum-table-row-active-color)`, if not set.", + "control": "color", + "category": "Modifier" + }, + "mod-table-drop-zone-background-color": { + "value": "var(--spectrum-table-drop-zone-background-color)", + "description": "Used by `--spectrum-table-cell-background-color`.
Defaults to `var(--spectrum-table-drop-zone-background-color)`, if not set.", + "control": "color", + "category": "Modifier" + }, + "mod-table-focus-indicator-color": { + "value": "var(--spectrum-table-focus-indicator-color)", + "description": "Used by `.spectrum-Table-cell.is-focused, .spectrum-Table-cell:focus-visible, .spectrum-Table-headCell.is-focused, .spectrum-Table-headCell:focus-visible`, `.spectrum-Table-disclosureIcon.spectrum-Table-disclosureIcon.is-keyboardFocused, .spectrum-Table-disclosureIcon.spectrum-Table-disclosureIcon:focus-visible`.
Defaults to `var(--spectrum-table-focus-indicator-color)`, if not set.", + "control": "color", + "category": "Modifier" + }, + "mod-table-summary-row-background-color": { + "value": "var(--spectrum-table-summary-row-background-color)", + "description": "Used by `--spectrum-table-cell-background-color`.
Defaults to `var(--spectrum-table-summary-row-background-color)`, if not set.", + "control": "color", + "category": "Modifier" + }, + "mod-table-summary-row-font-weight": { + "value": "var(--spectrum-table-summary-row-font-weight)", + "description": "Used by `.spectrum-Table-row--summary .spectrum-Table-cell`.
Defaults to `var(--spectrum-table-summary-row-font-weight)`, if not set.", + "control": "text", + "category": "Modifier" + }, + "mod-table-summary-row-font-size": { + "value": "var(--spectrum-table-row-font-size)", + "description": "Used by `.spectrum-Table-row--summary .spectrum-Table-cell`.
Defaults to `var(--spectrum-table-row-font-size)`, if not set.", + "control": "text", + "category": "Modifier" + }, + "mod-table-summary-row-font-family": { + "value": "var(--spectrum-table-row-font-family)", + "description": "Used by `.spectrum-Table-row--summary .spectrum-Table-cell`.
Defaults to `var(--spectrum-table-row-font-family)`, if not set.", + "control": "text", + "category": "Modifier" + }, + "mod-table-summary-row-font-style": { + "value": "var(--spectrum-table-row-font-style)", + "description": "Used by `.spectrum-Table-row--summary .spectrum-Table-cell`.
Defaults to `var(--spectrum-table-row-font-style)`, if not set.", + "control": "text", + "category": "Modifier" + }, + "mod-table-summary-row-line-height": { + "value": "var(--spectrum-table-row-line-height)", + "description": "Used by `.spectrum-Table-row--summary .spectrum-Table-cell`.
Defaults to `var(--spectrum-table-row-line-height)`, if not set.", + "control": "text", + "category": "Modifier" + }, + "mod-table-summary-row-text-color": { + "value": "var(--spectrum-table-row-text-color)", + "description": "Used by `.spectrum-Table-row--summary .spectrum-Table-cell`.
Defaults to `var(--spectrum-table-row-text-color)`, if not set.", + "control": "color", + "category": "Modifier" + }, + "mod-table-section-header-background-color": { + "value": "var(--spectrum-table-section-header-background-color)", + "description": "Used by `--spectrum-table-cell-background-color`.
Defaults to `var(--spectrum-table-section-header-background-color)`, if not set.", + "control": "color", + "category": "Modifier" + }, + "mod-table-cursor-section-header": { + "description": "Used by `.spectrum-Table-row--sectionHeader`.", + "control": "text", + "category": "Modifier" + }, + "mod-table-section-header-font-weight": { + "value": "var(--spectrum-table-section-header-font-weight)", + "description": "Used by `.spectrum-Table-row--sectionHeader .spectrum-Table-cell`.
Defaults to `var(--spectrum-table-section-header-font-weight)`, if not set.", + "control": "text", + "category": "Modifier" + }, + "mod-table-section-header-min-height": { + "value": "var(--spectrum-table-section-header-min-height)", + "description": "Used by `.spectrum-Table-row--sectionHeader .spectrum-Table-cell`.
Defaults to `var(--spectrum-table-section-header-min-height)`, if not set.", + "control": "text", + "category": "Modifier" + }, + "mod-table-section-header-block-start-spacing": { + "value": "var(--spectrum-table-section-header-block-start-spacing)", + "description": "Used by `.spectrum-Table-row--sectionHeader .spectrum-Table-cell`.
Defaults to `var(--spectrum-table-section-header-block-start-spacing)`, if not set.", + "control": "text", + "category": "Modifier" + }, + "mod-table-section-header-block-end-spacing": { + "value": "var(--spectrum-table-section-header-block-end-spacing)", + "description": "Used by `.spectrum-Table-row--sectionHeader .spectrum-Table-cell`.
Defaults to `var(--spectrum-table-section-header-block-end-spacing)`, if not set.", + "control": "text", + "category": "Modifier" + }, + "mod-table-section-header-font-size": { + "value": "var(--spectrum-table-row-font-size)", + "description": "Used by `.spectrum-Table-row--sectionHeader .spectrum-Table-cell`.
Defaults to `var(--spectrum-table-row-font-size)`, if not set.", + "control": "text", + "category": "Modifier" + }, + "mod-table-section-header-font-family": { + "value": "var(--spectrum-table-row-font-family)", + "description": "Used by `.spectrum-Table-row--sectionHeader .spectrum-Table-cell`.
Defaults to `var(--spectrum-table-row-font-family)`, if not set.", + "control": "text", + "category": "Modifier" + }, + "mod-table-section-header-font-style": { + "value": "var(--spectrum-table-row-font-style)", + "description": "Used by `.spectrum-Table-row--sectionHeader .spectrum-Table-cell`.
Defaults to `var(--spectrum-table-row-font-style)`, if not set.", + "control": "text", + "category": "Modifier" + }, + "mod-table-section-header-line-height": { + "value": "var(--spectrum-table-row-line-height)", + "description": "Used by `.spectrum-Table-row--sectionHeader .spectrum-Table-cell`.
Defaults to `var(--spectrum-table-row-line-height)`, if not set.", + "control": "text", + "category": "Modifier" + }, + "mod-table-section-header-text-color": { + "value": "var(--spectrum-table-row-text-color)", + "description": "Used by `.spectrum-Table-row--sectionHeader .spectrum-Table-cell`.
Defaults to `var(--spectrum-table-row-text-color)`, if not set.", + "control": "color", + "category": "Modifier" + }, + "mod-table-checkbox-to-text": { + "value": "24px", + "description": "Used by `.spectrum-Table-checkboxCell`.
Defaults to `var(--spectrum-table-checkbox-to-text)`, if not set.", + "control": "text", + "category": "Modifier" + }, + "mod-table-header-checkbox-block-spacing": { + "value": "var(--spectrum-table-header-checkbox-block-spacing)", + "description": "Used by `.spectrum-Table-checkboxCell.spectrum-Table-headCell .spectrum-Table-checkbox`.
Defaults to `var(--spectrum-table-header-checkbox-block-spacing)`, if not set.", + "control": "text", + "category": "Modifier" + }, + "mod-table-header-background-color-scrollable": { + "value": "var(--spectrum-background-layer-1-color, var(--spectrum-gray-75))", + "description": "Used by `--spectrum-table-header-background-color`.
Defaults to `var(--spectrum-background-layer-1-color, var(--spectrum-gray-75))`, if not set.", + "control": "color", + "category": "Modifier" + }, + "mod-table-current-header-height": { + "value": "calc(var(--mod-table-header-line-height, var(--spectrum-table-row-line-height)) * var(--mod-table-header-font-size, var(--spectrum-table-row-font-size)) + var(--mod-table-header-top-to-text, var(--spectrum-table-header-top-to-text)) + var(--mod-table-header-bottom-to-text, var(--spectrum-table-header-bottom-to-text)) + var(--mod-table-border-width, var(--spectrum-table-border-width)))", + "description": "Used by `.spectrum-Table-scroller`.
Defaults to `calc(var(--mod-table-header-line-height, var(--spectrum-table-row-line-height)) * var(--mod-table-header-font-size, var(--spectrum-table-row-font-size)) + var(--mod-table-header-top-to-text, var(--spectrum-table-header-top-to-text)) + var(--mod-table-header-bottom-to-text, var(--spectrum-table-header-bottom-to-text)) + var(--mod-table-border-width, var(--spectrum-table-border-width)))`, if not set.", + "control": "text", + "category": "Modifier" + }, + "mod-table-disclosure-icon-size": { + "value": "var(--spectrum-table-disclosure-icon-size)", + "description": "Used by `.spectrum-Table-row--collapsible.is-last-tier .spectrum-Table-cell--collapsible`, `.spectrum-Table-row--collapsible .spectrum-Table-disclosureIcon`, `.spectrum-Table-disclosureIcon.spectrum-Table-disclosureIcon`, `--spectrum-table-thumbnail-inner-minimum-block-spacing`.
Defaults to `var(--spectrum-table-disclosure-icon-size)`, if not set.", + "control": "text", + "category": "Modifier" + }, + "mod-table-collapsible-disclosure-inline-spacing": { + "value": "var(--spectrum-table-collapsible-disclosure-inline-spacing)", + "description": "Used by `.spectrum-Table-row--collapsible.is-last-tier .spectrum-Table-cell--collapsible`, `.spectrum-Table-row--collapsible .spectrum-Table-disclosureIcon`.
Defaults to `var(--spectrum-table-collapsible-disclosure-inline-spacing)`, if not set.", + "control": "text", + "category": "Modifier" + }, + "mod-table-collapsible-icon-animation-duration": { + "value": "var(--spectrum-table-collapsible-icon-animation-duration)", + "description": "Used by `.spectrum-Table-disclosureIcon.spectrum-Table-disclosureIcon`.
Defaults to `var(--spectrum-table-collapsible-icon-animation-duration)`, if not set.", + "control": "text", + "category": "Modifier" + }, + "mod-table-icon-color-hover": { + "value": "var(--spectrum-table-icon-color-hover)", + "description": "Used by `--spectrum-table-icon-color`.
Defaults to `var(--spectrum-table-icon-color-hover)`, if not set.", + "control": "color", + "category": "Modifier" + }, + "mod-table-icon-color-focus-hover": { + "value": "var(--spectrum-table-icon-color-focus-hover)", + "description": "Used by `--spectrum-table-icon-color`.
Defaults to `var(--spectrum-table-icon-color-focus-hover)`, if not set.", + "control": "color", + "category": "Modifier" + }, + "mod-table-thumbnail-to-text": { + "value": "var(--spectrum-table-thumbnail-to-text)", + "description": "Used by `.spectrum-Table-thumbnailInner .spectrum-Thumbnail`.
Defaults to `var(--spectrum-table-thumbnail-to-text)`, if not set.", + "control": "text", + "category": "Modifier" + } + }, + "component": { + "spectrum-table-cell-inline-space": { + "description": "Defined in `.spectrum-Table`.
Used by `.spectrum-Table-headCell`.", + "control": "text", + "category": "Component" + }, + "spectrum-table-edge-to-content": { + "value": "16px", + "description": "Used by `--spectrum-table-cell-inline-space`, `.spectrum-Table-cell`, `.spectrum-Table-checkboxCell`.", + "control": "text", + "category": "Component" + }, + "spectrum-table-border-radius": { + "description": "Defined in `.spectrum-Table`.
Used by `.spectrum-Table-body`, `.spectrum-Table-row:first-child .spectrum-Table-cell:first-child`, `.spectrum-Table-row:first-child .spectrum-Table-cell:last-child`, `.spectrum-Table-row:last-child .spectrum-Table-cell:first-child`, `.spectrum-Table-row:last-child .spectrum-Table-cell:last-child`, `.spectrum-Table-row:first-child`, `.spectrum-Table-row:last-child`, `.spectrum-Table-scroller`.", + "control": "text", + "category": "Component" + }, + "spectrum-table-border-width": { + "description": "Defined in `.spectrum-Table`.
Used by `.spectrum-Table-cell`, `.spectrum-Table-body .spectrum-Table-row:first-child .spectrum-Table-cell`, `.spectrum-Table-body .spectrum-Table-row:last-child .spectrum-Table-cell`, `.spectrum-Table-cell--divider`, `.spectrum-Table-row--sectionHeader .spectrum-Table-cell`, `.spectrum-Table-checkboxCell.spectrum-Table-cell .spectrum-Table-checkbox`, `.spectrum-Table-checkboxCell.spectrum-Table-headCell .spectrum-Table-checkbox`, `.spectrum-Table-scroller`, `.spectrum-Table-scroller .spectrum-Table-headCell`, `.spectrum-Table-collapseInner .spectrum-Table-collapseContent`.", + "control": "text", + "category": "Component" + }, + "spectrum-table-border-divider-width": { + "value": "1px", + "description": "Used by `--spectrum-table-border-width`, `--spectrum-table-outer-border-inline-width`.", + "control": "text", + "category": "Component" + }, + "spectrum-table-outer-border-inline-width": { + "description": "Defined in `.spectrum-Table`.
Used by `.spectrum-Table-cell`, `.spectrum-Table-body .spectrum-Table-row .spectrum-Table-cell:first-child`, `.spectrum-Table-body .spectrum-Table-row .spectrum-Table-cell:last-child`, `.spectrum-Table-scroller`.", + "control": "text", + "category": "Component" + }, + "spectrum-table-default-vertical-align": { + "description": "Defined in `.spectrum-Table`.
Used by `.spectrum-Table-cell`.", + "control": "text", + "category": "Component" + }, + "spectrum-table-header-vertical-align": { + "description": "Defined in `.spectrum-Table`.
Used by `.spectrum-Table-headCell`.", + "control": "text", + "category": "Component" + }, + "spectrum-table-header-font-weight": { + "description": "Defined in `.spectrum-Table`.
Used by `.spectrum-Table-headCell`.", + "control": "text", + "category": "Component" + }, + "spectrum-table-row-font-family": { + "description": "Defined in `.spectrum-Table`.
Used by `.spectrum-Table-headCell`, `.spectrum-Table-row--summary .spectrum-Table-cell`, `.spectrum-Table-row--sectionHeader .spectrum-Table-cell`.", + "control": "text", + "category": "Component" + }, + "spectrum-table-row-font-weight": { + "description": "Defined in `.spectrum-Table`.
Used by `.spectrum-Table-cell`.", + "control": "text", + "category": "Component" + }, + "spectrum-table-row-font-style": { + "description": "Defined in `.spectrum-Table`.
Used by `.spectrum-Table-row--summary .spectrum-Table-cell`, `.spectrum-Table-row--sectionHeader .spectrum-Table-cell`.", + "control": "text", + "category": "Component" + }, + "spectrum-table-row-line-height": { + "description": "Defined in `.spectrum-Table`.
Used by `.spectrum-Table-headCell`, `.spectrum-Table-cell`, `.spectrum-Table-row--summary .spectrum-Table-cell`, `.spectrum-Table-row--sectionHeader .spectrum-Table-cell`, `.spectrum-Table-scroller`, `--spectrum-table-thumbnail-inner-content-block-spacing`, `.spectrum-Table-thumbnailInner .spectrum-Thumbnail`.", + "control": "text", + "category": "Component" + }, + "spectrum-table-border-color": { + "description": "Defined in `.spectrum-Table`.
Used by `.spectrum-Table-body .spectrum-Table-row:first-child .spectrum-Table-cell`, `.spectrum-Table-body .spectrum-Table-row:last-child .spectrum-Table-cell`, `.spectrum-Table-body .spectrum-Table-row .spectrum-Table-cell:first-child`, `.spectrum-Table-body .spectrum-Table-row .spectrum-Table-cell:last-child`, `.spectrum-Table-scroller`, `.spectrum-Table-scroller .spectrum-Table-headCell`.", + "control": "color", + "category": "Component" + }, + "spectrum-table-divider-color": { + "description": "Defined in `.spectrum-Table`.
Used by `.spectrum-Table-cell`, `.spectrum-Table-cell--divider`.", + "control": "color", + "category": "Component" + }, + "spectrum-table-header-background-color": { + "description": "Defined in `.spectrum-Table`, `.spectrum-Table-scroller`, `.spectrum-Table--quiet`.
Used by `.spectrum-Table-headCell`.", + "control": "color", + "category": "Component" + }, + "spectrum-table-header-text-color": { + "description": "Defined in `.spectrum-Table`.
Used by `.spectrum-Table-headCell`.", + "control": "color", + "category": "Component" + }, + "spectrum-table-row-background-color": { + "description": "Defined in `.spectrum-Table`, `.spectrum-Table--quiet`.
Used by `--spectrum-table-cell-background-color`.", + "control": "color", + "category": "Component" + }, + "spectrum-table-row-text-color": { + "description": "Defined in `.spectrum-Table`.
Used by `.spectrum-Table-cell`, `.spectrum-Table-row--summary .spectrum-Table-cell`, `.spectrum-Table-row--sectionHeader .spectrum-Table-cell`.", + "control": "color", + "category": "Component" + }, + "spectrum-table-selected-row-background-color": { + "value": "var(--spectrum-informative-color-800)", + "description": "Defined in `.spectrum-Table`.
Used by `--spectrum-table-selected-cell-background-color`.", + "control": "color", + "category": "Component" + }, + "spectrum-table-selected-row-background-opacity": { + "value": "0.1", + "description": "Used by `--spectrum-table-selected-row-background-color`.", + "control": "text", + "category": "Component" + }, + "spectrum-table-selected-row-background-color-non-emphasized": { + "value": "var(--spectrum-neutral-background-color-selected-default)", + "description": "Defined in `.spectrum-Table`.
Used by `--spectrum-table-selected-cell-background-color`.", + "control": "color", + "category": "Component" + }, + "spectrum-table-selected-row-background-opacity-non-emphasized": { + "value": "0.1", + "description": "Used by `--spectrum-table-selected-row-background-color-non-emphasized`.", + "control": "text", + "category": "Component" + }, + "spectrum-table-row-background-color-hover": { + "description": "Defined in `.spectrum-Table`.
Used by `--spectrum-table-cell-background-color`.", + "control": "color", + "category": "Component" + }, + "spectrum-table-row-hover-opacity": { + "value": "0.07", + "description": "Used by `--spectrum-table-row-background-color-hover`.", + "control": "text", + "category": "Component" + }, + "spectrum-table-row-active-color": { + "description": "Defined in `.spectrum-Table`.
Used by `--spectrum-table-cell-background-color`.", + "control": "color", + "category": "Component" + }, + "spectrum-table-row-down-opacity": { + "value": "0.1", + "description": "Used by `--spectrum-table-row-active-color`.", + "control": "text", + "category": "Component" + }, + "spectrum-table-selected-row-background-color-focus": { + "description": "Defined in `.spectrum-Table`.
Used by `--spectrum-table-selected-cell-background-color-focus`.", + "control": "color", + "category": "Component" + }, + "spectrum-table-selected-row-background-opacity-hover": { + "value": "0.15", + "description": "Used by `--spectrum-table-selected-row-background-color-focus`.", + "control": "text", + "category": "Component" + }, + "spectrum-table-selected-row-background-color-non-emphasized-focus": { + "description": "Defined in `.spectrum-Table`.
Used by `--spectrum-table-selected-cell-background-color-focus`.", + "control": "color", + "category": "Component" + }, + "spectrum-table-selected-row-background-opacity-non-emphasized-hover": { + "value": "0.15", + "description": "Used by `--spectrum-table-selected-row-background-color-non-emphasized-focus`.", + "control": "text", + "category": "Component" + }, + "spectrum-table-icon-color-default": { + "description": "Defined in `.spectrum-Table`.
Used by `--spectrum-table-icon-color`.", + "control": "color", + "category": "Component" + }, + "spectrum-table-icon-color-hover": { + "description": "Defined in `.spectrum-Table`.
Used by `--spectrum-table-icon-color`.", + "control": "color", + "category": "Component" + }, + "spectrum-table-icon-color-active": { + "description": "Defined in `.spectrum-Table`.
Used by `--spectrum-table-icon-color`.", + "control": "color", + "category": "Component" + }, + "spectrum-table-icon-color-focus": { + "description": "Defined in `.spectrum-Table`.
Used by `--spectrum-table-icon-color`.", + "control": "color", + "category": "Component" + }, + "spectrum-table-icon-color-focus-hover": { + "description": "Defined in `.spectrum-Table`.
Used by `--spectrum-table-icon-color`.", + "control": "color", + "category": "Component" + }, + "spectrum-table-icon-color-key-focus": { + "description": "Defined in `.spectrum-Table`.
Used by `--spectrum-table-icon-color`.", + "control": "color", + "category": "Component" + }, + "spectrum-table-focus-indicator-thickness": { + "description": "Defined in `.spectrum-Table`.
Used by `.spectrum-Table-body.is-drop-target`, `.spectrum-Table-row.is-drop-target`, `.spectrum-Table-cell.is-focused, .spectrum-Table-cell:focus-visible, .spectrum-Table-headCell.is-focused, .spectrum-Table-headCell:focus-visible`, `.spectrum-Table-disclosureIcon.spectrum-Table-disclosureIcon.is-keyboardFocused, .spectrum-Table-disclosureIcon.spectrum-Table-disclosureIcon:focus-visible`.", + "control": "text", + "category": "Component" + }, + "spectrum-table-focus-indicator-color": { + "description": "Defined in `.spectrum-Table`.
Used by `.spectrum-Table-cell.is-focused, .spectrum-Table-cell:focus-visible, .spectrum-Table-headCell.is-focused, .spectrum-Table-headCell:focus-visible`, `.spectrum-Table-disclosureIcon.spectrum-Table-disclosureIcon.is-keyboardFocused, .spectrum-Table-disclosureIcon.spectrum-Table-disclosureIcon:focus-visible`.", + "control": "color", + "category": "Component" + }, + "spectrum-table-drop-zone-background-color": { + "description": "Defined in `.spectrum-Table`.
Used by `--spectrum-table-cell-background-color`.", + "control": "color", + "category": "Component" + }, + "spectrum-table-drop-zone-outline-color": { + "description": "Defined in `.spectrum-Table`.
Used by `.spectrum-Table-body.is-drop-target`, `.spectrum-Table-row.is-drop-target`, `.spectrum-Table-row.is-drop-target .spectrum-Table-cell`.", + "control": "color", + "category": "Component" + }, + "spectrum-table-transition-duration": { + "description": "Defined in `.spectrum-Table`.
Used by `.spectrum-Table-sortedIcon`, `.spectrum-Table-headCell`, `.spectrum-Table-row`.", + "control": "text", + "category": "Component" + }, + "spectrum-table-summary-row-font-weight": { + "description": "Defined in `.spectrum-Table`.
Used by `.spectrum-Table-row--summary .spectrum-Table-cell`.", + "control": "text", + "category": "Component" + }, + "spectrum-table-summary-row-background-color": { + "description": "Defined in `.spectrum-Table`.
Used by `--spectrum-table-cell-background-color`.", + "control": "color", + "category": "Component" + }, + "spectrum-table-section-header-font-weight": { + "description": "Defined in `.spectrum-Table`.
Used by `.spectrum-Table-row--sectionHeader .spectrum-Table-cell`.", + "control": "text", + "category": "Component" + }, + "spectrum-table-section-header-background-color": { + "description": "Defined in `.spectrum-Table`.
Used by `--spectrum-table-cell-background-color`.", + "control": "color", + "category": "Component" + }, + "spectrum-table-collapsible-tier-indent": { + "description": "Defined in `.spectrum-Table`.
Used by `.spectrum-Table-row--collapsible.is-last-tier .spectrum-Table-cell--collapsible`, `.spectrum-Table-cell--collapsible`.", + "control": "text", + "category": "Component" + }, + "spectrum-table-collapsible-disclosure-inline-spacing": { + "description": "Defined in `.spectrum-Table`.
Used by `.spectrum-Table-row--collapsible.is-last-tier .spectrum-Table-cell--collapsible`, `.spectrum-Table-row--collapsible .spectrum-Table-disclosureIcon`.", + "control": "text", + "category": "Component" + }, + "spectrum-table-collapsible-icon-animation-duration": { + "description": "Defined in `.spectrum-Table`.
Used by `.spectrum-Table-disclosureIcon.spectrum-Table-disclosureIcon`.", + "control": "text", + "category": "Component" + }, + "spectrum-table-cell-background-color": { + "description": "Defined in `.spectrum-Table`, `.spectrum-Table-row.is-focused, .spectrum-Table-row:focus-visible`, `.spectrum-Table-row:active`, `.spectrum-Table-row.is-selected`, `.spectrum-Table-row.is-selected.is-focused, .spectrum-Table-row.is-selected:focus-visible`, `.spectrum-Table-body.is-drop-target .spectrum-Table-row, .spectrum-Table-row.is-drop-target`, `.spectrum-Table-row--summary`, `.spectrum-Table-row--sectionHeader`, `.spectrum-Table-row:hover`, `.spectrum-Table-row.is-selected:hover`, `.spectrum-Table-row--sectionHeader:hover`.
Used by `.spectrum-Table-cell`.", + "control": "color", + "category": "Component" + }, + "spectrum-table-selected-cell-background-color": { + "description": "Defined in `.spectrum-Table`, `.spectrum-Table--emphasized`.
Used by `--spectrum-table-cell-background-color`.", + "control": "color", + "category": "Component" + }, + "spectrum-table-selected-cell-background-color-focus": { + "description": "Defined in `.spectrum-Table`, `.spectrum-Table--emphasized`.
Used by `--spectrum-table-cell-background-color`.", + "control": "color", + "category": "Component" + }, + "spectrum-table-thumbnail-size": { + "description": "Defined in `.spectrum-Table, .spectrum-Table--sizeM`, `.spectrum-Table--sizeS`, `.spectrum-Table--sizeL`, `.spectrum-Table--sizeXL`.
Used by `--mod-thumbnail-size`, `--spectrum-table-thumbnail-inner-content-block-spacing`, `--spectrum-table-thumbnail-inner-minimum-block-spacing`.", + "control": "text", + "category": "Component" + }, + "spectrum-table-min-header-height": { + "description": "Defined in `.spectrum-Table, .spectrum-Table--sizeM`, `.spectrum-Table--sizeS`, `.spectrum-Table--sizeL`, `.spectrum-Table--sizeXL`.
Used by `.spectrum-Table-headCell`.", + "control": "text", + "category": "Component" + }, + "spectrum-table-header-top-to-text": { + "description": "Defined in `.spectrum-Table, .spectrum-Table--sizeM`, `.spectrum-Table--sizeS`, `.spectrum-Table--sizeL`, `.spectrum-Table--sizeXL`.
Used by `.spectrum-Table-headCell`, `.spectrum-Table-scroller`.", + "control": "text", + "category": "Component" + }, + "spectrum-table-column-header-row-top-to-text-medium": { + "value": "7px", + "description": "Used by `--spectrum-table-header-top-to-text`.", + "control": "text", + "category": "Component" + }, + "spectrum-table-header-bottom-to-text": { + "description": "Defined in `.spectrum-Table, .spectrum-Table--sizeM`, `.spectrum-Table--sizeS`, `.spectrum-Table--sizeL`, `.spectrum-Table--sizeXL`.
Used by `.spectrum-Table-headCell`, `.spectrum-Table-scroller`.", + "control": "text", + "category": "Component" + }, + "spectrum-table-column-header-row-bottom-to-text-medium": { + "value": "8px", + "description": "Used by `--spectrum-table-header-bottom-to-text`.", + "control": "text", + "category": "Component" + }, + "spectrum-table-min-row-height": { + "description": "Defined in `.spectrum-Table, .spectrum-Table--sizeM`, `.spectrum-Table--sizeS`, `.spectrum-Table--sizeL`, `.spectrum-Table--sizeXL`.
Used by `.spectrum-Table-cell`, `.spectrum-Table-row--collapsible .spectrum-Table-disclosureIcon`.", + "control": "text", + "category": "Component" + }, + "spectrum-table-row-height-medium-regular": { + "value": "40px", + "description": "Used by `--spectrum-table-min-row-height`.", + "control": "text", + "category": "Component" + }, + "spectrum-table-row-top-to-text": { + "description": "Defined in `.spectrum-Table, .spectrum-Table--sizeM`, `.spectrum-Table--sizeS`, `.spectrum-Table--sizeL`, `.spectrum-Table--sizeXL`.
Used by `.spectrum-Table-cell`, `.spectrum-Table-collapseInner .spectrum-Table-collapseContent`.", + "control": "text", + "category": "Component" + }, + "spectrum-table-row-top-to-text-medium-regular": { + "value": "11px", + "description": "Used by `--spectrum-table-row-top-to-text`.", + "control": "text", + "category": "Component" + }, + "spectrum-table-row-bottom-to-text": { + "description": "Defined in `.spectrum-Table, .spectrum-Table--sizeM`, `.spectrum-Table--sizeS`, `.spectrum-Table--sizeL`, `.spectrum-Table--sizeXL`.
Used by `.spectrum-Table-cell`, `.spectrum-Table-collapseInner .spectrum-Table-collapseContent`.", + "control": "text", + "category": "Component" + }, + "spectrum-table-row-bottom-to-text-medium-regular": { + "value": "12px", + "description": "Used by `--spectrum-table-row-bottom-to-text`.", + "control": "text", + "category": "Component" + }, + "spectrum-table-icon-to-text": { + "description": "Defined in `.spectrum-Table, .spectrum-Table--sizeM`, `.spectrum-Table--sizeS`, `.spectrum-Table--sizeL`, `.spectrum-Table--sizeXL`.
Used by `.spectrum-Table-sortedIcon`, `.spectrum-Table-menuIcon`.", + "control": "text", + "category": "Component" + }, + "spectrum-table-row-font-size": { + "description": "Defined in `.spectrum-Table, .spectrum-Table--sizeM`, `.spectrum-Table--sizeS`, `.spectrum-Table--sizeL`, `.spectrum-Table--sizeXL`.
Used by `.spectrum-Table-headCell`, `.spectrum-Table-cell`, `.spectrum-Table-row--summary .spectrum-Table-cell`, `.spectrum-Table-row--sectionHeader .spectrum-Table-cell`, `.spectrum-Table-scroller`, `--spectrum-table-thumbnail-inner-content-block-spacing`.", + "control": "text", + "category": "Component" + }, + "spectrum-table-header-checkbox-block-spacing": { + "description": "Defined in `.spectrum-Table, .spectrum-Table--sizeM`, `.spectrum-Table--sizeS`, `.spectrum-Table--sizeL`, `.spectrum-Table--sizeXL`.
Used by `.spectrum-Table-checkboxCell.spectrum-Table-headCell .spectrum-Table-checkbox`.", + "control": "text", + "category": "Component" + }, + "spectrum-table-header-row-checkbox-to-top-medium": { + "value": "9px", + "description": "Used by `--spectrum-table-header-checkbox-block-spacing`.", + "control": "text", + "category": "Component" + }, + "spectrum-table-row-checkbox-block-spacing": { + "description": "Defined in `.spectrum-Table, .spectrum-Table--sizeM`, `.spectrum-Table--sizeS`, `.spectrum-Table--sizeL`, `.spectrum-Table--sizeXL`.
Used by `.spectrum-Table-checkboxCell.spectrum-Table-cell .spectrum-Table-checkbox`.", + "control": "text", + "category": "Component" + }, + "spectrum-table-row-checkbox-to-top-medium-regular": { + "value": "13px", + "description": "Used by `--spectrum-table-row-checkbox-block-spacing`.", + "control": "text", + "category": "Component" + }, + "spectrum-table-section-header-min-height": { + "description": "Defined in `.spectrum-Table, .spectrum-Table--sizeM`, `.spectrum-Table--sizeS`, `.spectrum-Table--sizeL`, `.spectrum-Table--sizeXL`.
Used by `.spectrum-Table-row--sectionHeader .spectrum-Table-cell`.", + "control": "text", + "category": "Component" + }, + "spectrum-table-section-header-row-height-medium": { + "value": "32px", + "description": "Used by `--spectrum-table-section-header-min-height`.", + "control": "text", + "category": "Component" + }, + "spectrum-table-section-header-block-start-spacing": { + "description": "Defined in `.spectrum-Table, .spectrum-Table--sizeM`, `.spectrum-Table--sizeS`, `.spectrum-Table--sizeL`, `.spectrum-Table--sizeXL`.
Used by `.spectrum-Table-row--sectionHeader .spectrum-Table-cell`.", + "control": "text", + "category": "Component" + }, + "spectrum-table-section-header-block-end-spacing": { + "description": "Defined in `.spectrum-Table, .spectrum-Table--sizeM`, `.spectrum-Table--sizeS`, `.spectrum-Table--sizeL`, `.spectrum-Table--sizeXL`.
Used by `.spectrum-Table-row--sectionHeader .spectrum-Table-cell`.", + "control": "text", + "category": "Component" + }, + "spectrum-table-disclosure-icon-size": { + "description": "Defined in `.spectrum-Table, .spectrum-Table--sizeM`, `.spectrum-Table--sizeS`, `.spectrum-Table--sizeL`, `.spectrum-Table--sizeXL`.
Used by `.spectrum-Table-row--collapsible.is-last-tier .spectrum-Table-cell--collapsible`, `.spectrum-Table-row--collapsible .spectrum-Table-disclosureIcon`, `.spectrum-Table-disclosureIcon.spectrum-Table-disclosureIcon`, `--spectrum-table-thumbnail-inner-minimum-block-spacing`.", + "control": "text", + "category": "Component" + }, + "spectrum-table-thumbnail-block-spacing": { + "description": "Defined in `.spectrum-Table, .spectrum-Table--sizeM`, `.spectrum-Table--sizeS`, `.spectrum-Table--sizeL`, `.spectrum-Table--sizeXL`.
Used by `--spectrum-table-thumbnail-cell-block-spacing`.", + "control": "text", + "category": "Component" + }, + "spectrum-table-thumbnail-to-top-minimum-medium-regular": { + "value": "7px", + "description": "Used by `--spectrum-table-thumbnail-block-spacing`.", + "control": "text", + "category": "Component" + }, + "spectrum-table-thumbnail-to-text": { + "description": "Defined in `.spectrum-Table, .spectrum-Table--sizeM`, `.spectrum-Table--sizeS`, `.spectrum-Table--sizeL`, `.spectrum-Table--sizeXL`.
Used by `.spectrum-Table-thumbnailInner .spectrum-Thumbnail`.", + "control": "text", + "category": "Component" + }, + "spectrum-table-column-header-row-top-to-text-small": { + "value": "8px", + "description": "Used by `--spectrum-table-header-top-to-text`.", + "control": "text", + "category": "Component" + }, + "spectrum-table-column-header-row-bottom-to-text-small": { + "value": "9px", + "description": "Used by `--spectrum-table-header-bottom-to-text`.", + "control": "text", + "category": "Component" + }, + "spectrum-table-row-height-small-regular": { + "value": "32px", + "description": "Used by `--spectrum-table-min-row-height`.", + "control": "text", + "category": "Component" + }, + "spectrum-table-row-top-to-text-small-regular": { + "value": "8px", + "description": "Used by `--spectrum-table-row-top-to-text`.", + "control": "text", + "category": "Component" + }, + "spectrum-table-row-bottom-to-text-small-regular": { + "value": "9px", + "description": "Used by `--spectrum-table-row-bottom-to-text`.", + "control": "text", + "category": "Component" + }, + "spectrum-table-header-row-checkbox-to-top-small": { + "value": "10px", + "description": "Used by `--spectrum-table-header-checkbox-block-spacing`.", + "control": "text", + "category": "Component" + }, + "spectrum-table-row-checkbox-to-top-small-regular": { + "value": "10px", + "description": "Used by `--spectrum-table-row-checkbox-block-spacing`.", + "control": "text", + "category": "Component" + }, + "spectrum-table-section-header-row-height-small": { + "value": "24px", + "description": "Used by `--spectrum-table-section-header-min-height`.", + "control": "text", + "category": "Component" + }, + "spectrum-table-thumbnail-to-top-minimum-small-regular": { + "value": "5px", + "description": "Used by `--spectrum-table-thumbnail-block-spacing`.", + "control": "text", + "category": "Component" + }, + "spectrum-table-column-header-row-top-to-text-large": { + "value": "10px", + "description": "Used by `--spectrum-table-header-top-to-text`.", + "control": "text", + "category": "Component" + }, + "spectrum-table-column-header-row-bottom-to-text-large": { + "value": "10px", + "description": "Used by `--spectrum-table-header-bottom-to-text`.", + "control": "text", + "category": "Component" + }, + "spectrum-table-row-height-large-regular": { + "value": "48px", + "description": "Used by `--spectrum-table-min-row-height`.", + "control": "text", + "category": "Component" + }, + "spectrum-table-row-top-to-text-large-regular": { + "value": "14px", + "description": "Used by `--spectrum-table-row-top-to-text`.", + "control": "text", + "category": "Component" + }, + "spectrum-table-row-bottom-to-text-large-regular": { + "value": "14px", + "description": "Used by `--spectrum-table-row-bottom-to-text`.", + "control": "text", + "category": "Component" + }, + "spectrum-table-header-row-checkbox-to-top-large": { + "value": "12px", + "description": "Used by `--spectrum-table-header-checkbox-block-spacing`.", + "control": "text", + "category": "Component" + }, + "spectrum-table-row-checkbox-to-top-large-regular": { + "value": "16px", + "description": "Used by `--spectrum-table-row-checkbox-block-spacing`.", + "control": "text", + "category": "Component" + }, + "spectrum-table-section-header-row-height-large": { + "value": "40px", + "description": "Used by `--spectrum-table-section-header-min-height`.", + "control": "text", + "category": "Component" + }, + "spectrum-table-thumbnail-to-top-minimum-large-regular": { + "value": "8px", + "description": "Used by `--spectrum-table-thumbnail-block-spacing`.", + "control": "text", + "category": "Component" + }, + "spectrum-table-column-header-row-top-to-text-extra-large": { + "value": "13px", + "description": "Used by `--spectrum-table-header-top-to-text`.", + "control": "text", + "category": "Component" + }, + "spectrum-table-column-header-row-bottom-to-text-extra-large": { + "value": "13px", + "description": "Used by `--spectrum-table-header-bottom-to-text`.", + "control": "text", + "category": "Component" + }, + "spectrum-table-row-height-extra-large-regular": { + "value": "56px", + "description": "Used by `--spectrum-table-min-row-height`.", + "control": "text", + "category": "Component" + }, + "spectrum-table-row-top-to-text-extra-large-regular": { + "value": "17px", + "description": "Used by `--spectrum-table-row-top-to-text`.", + "control": "text", + "category": "Component" + }, + "spectrum-table-row-bottom-to-text-extra-large-regular": { + "value": "17px", + "description": "Used by `--spectrum-table-row-bottom-to-text`.", + "control": "text", + "category": "Component" + }, + "spectrum-table-header-row-checkbox-to-top-extra-large": { + "value": "15px", + "description": "Used by `--spectrum-table-header-checkbox-block-spacing`.", + "control": "text", + "category": "Component" + }, + "spectrum-table-row-checkbox-to-top-extra-large-regular": { + "value": "19px", + "description": "Used by `--spectrum-table-row-checkbox-block-spacing`.", + "control": "text", + "category": "Component" + }, + "spectrum-table-section-header-row-height-extra-large": { + "value": "48px", + "description": "Used by `--spectrum-table-section-header-min-height`.", + "control": "text", + "category": "Component" + }, + "spectrum-table-thumbnail-to-top-minimum-extra-large-regular": { + "value": "8px", + "description": "Used by `--spectrum-table-thumbnail-block-spacing`.", + "control": "text", + "category": "Component" + }, + "spectrum-table-row-height-medium-compact": { + "value": "var(--spectrum-component-height-100)", + "description": "Used by `--mod-table-min-row-height`.", + "control": "text", + "category": "Component" + }, + "spectrum-table-row-top-to-text-medium-compact": { + "value": "var(--spectrum-component-top-to-text-100)", + "description": "Used by `--mod-table-row-top-to-text`.", + "control": "text", + "category": "Component" + }, + "spectrum-table-row-bottom-to-text-medium-compact": { + "value": "var(--spectrum-component-bottom-to-text-100)", + "description": "Used by `--mod-table-row-bottom-to-text`.", + "control": "text", + "category": "Component" + }, + "spectrum-table-row-checkbox-to-top-medium-compact": { + "value": "9px", + "description": "Used by `--mod-table-row-checkbox-block-spacing`.", + "control": "text", + "category": "Component" + }, + "spectrum-table-thumbnail-to-top-minimum-medium-compact": { + "value": "5px", + "description": "Used by `--mod-table-thumbnail-block-spacing`.", + "control": "text", + "category": "Component" + }, + "spectrum-table-row-height-small-compact": { + "value": "var(--spectrum-component-height-75)", + "description": "Used by `--mod-table-min-row-height`.", + "control": "text", + "category": "Component" + }, + "spectrum-table-row-top-to-text-small-compact": { + "value": "var(--spectrum-component-top-to-text-75)", + "description": "Used by `--mod-table-row-top-to-text`.", + "control": "text", + "category": "Component" + }, + "spectrum-table-row-bottom-to-text-small-compact": { + "value": "var(--spectrum-component-bottom-to-text-75)", + "description": "Used by `--mod-table-row-bottom-to-text`.", + "control": "text", + "category": "Component" + }, + "spectrum-table-row-checkbox-to-top-small-compact": { + "value": "6px", + "description": "Used by `--mod-table-row-checkbox-block-spacing`.", + "control": "text", + "category": "Component" + }, + "spectrum-table-thumbnail-to-top-minimum-small-compact": { + "value": "4px", + "description": "Used by `--mod-table-thumbnail-block-spacing`.", + "control": "text", + "category": "Component" + }, + "spectrum-table-row-height-large-compact": { + "value": "var(--spectrum-component-height-200)", + "description": "Used by `--mod-table-min-row-height`.", + "control": "text", + "category": "Component" + }, + "spectrum-table-row-top-to-text-large-compact": { + "value": "var(--spectrum-component-top-to-text-200)", + "description": "Used by `--mod-table-row-top-to-text`.", + "control": "text", + "category": "Component" + }, + "spectrum-table-row-bottom-to-text-large-compact": { + "value": "var(--spectrum-component-bottom-to-text-200)", + "description": "Used by `--mod-table-row-bottom-to-text`.", + "control": "text", + "category": "Component" + }, + "spectrum-table-row-checkbox-to-top-large-compact": { + "value": "12px", + "description": "Used by `--mod-table-row-checkbox-block-spacing`.", + "control": "text", + "category": "Component" + }, + "spectrum-table-thumbnail-to-top-minimum-large-compact": { + "value": "7px", + "description": "Used by `--mod-table-thumbnail-block-spacing`.", + "control": "text", + "category": "Component" + }, + "spectrum-table-row-height-extra-large-compact": { + "value": "var(--spectrum-component-height-300)", + "description": "Used by `--mod-table-min-row-height`.", + "control": "text", + "category": "Component" + }, + "spectrum-table-row-top-to-text-extra-large-compact": { + "value": "var(--spectrum-component-top-to-text-300)", + "description": "Used by `--mod-table-row-top-to-text`.", + "control": "text", + "category": "Component" + }, + "spectrum-table-row-bottom-to-text-extra-large-compact": { + "value": "var(--spectrum-component-bottom-to-text-300)", + "description": "Used by `--mod-table-row-bottom-to-text`.", + "control": "text", + "category": "Component" + }, + "spectrum-table-row-checkbox-to-top-extra-large-compact": { + "value": "15px", + "description": "Used by `--mod-table-row-checkbox-block-spacing`.", + "control": "text", + "category": "Component" + }, + "spectrum-table-thumbnail-to-top-minimum-extra-large-compact": { + "value": "8px", + "description": "Used by `--mod-table-thumbnail-block-spacing`.", + "control": "text", + "category": "Component" + }, + "spectrum-table-row-height-medium-spacious": { + "value": "48px", + "description": "Used by `--mod-table-min-row-height`.", + "control": "text", + "category": "Component" + }, + "spectrum-table-row-top-to-text-medium-spacious": { + "value": "15px", + "description": "Used by `--mod-table-row-top-to-text`.", + "control": "text", + "category": "Component" + }, + "spectrum-table-row-bottom-to-text-medium-spacious": { + "value": "16px", + "description": "Used by `--mod-table-row-bottom-to-text`.", + "control": "text", + "category": "Component" + }, + "spectrum-table-row-checkbox-to-top-medium-spacious": { + "value": "17px", + "description": "Used by `--mod-table-row-checkbox-block-spacing`.", + "control": "text", + "category": "Component" + }, + "spectrum-table-thumbnail-to-top-minimum-medium-spacious": { + "value": "8px", + "description": "Used by `--mod-table-thumbnail-block-spacing`.", + "control": "text", + "category": "Component" + }, + "spectrum-table-row-height-small-spacious": { + "value": "40px", + "description": "Used by `--mod-table-min-row-height`.", + "control": "text", + "category": "Component" + }, + "spectrum-table-row-top-to-text-small-spacious": { + "value": "12px", + "description": "Used by `--mod-table-row-top-to-text`.", + "control": "text", + "category": "Component" + }, + "spectrum-table-row-bottom-to-text-small-spacious": { + "value": "13px", + "description": "Used by `--mod-table-row-bottom-to-text`.", + "control": "text", + "category": "Component" + }, + "spectrum-table-row-checkbox-to-top-small-spacious": { + "value": "14px", + "description": "Used by `--mod-table-row-checkbox-block-spacing`.", + "control": "text", + "category": "Component" + }, + "spectrum-table-thumbnail-to-top-minimum-small-spacious": { + "value": "7px", + "description": "Used by `--mod-table-thumbnail-block-spacing`.", + "control": "text", + "category": "Component" + }, + "spectrum-table-row-height-large-spacious": { + "value": "56px", + "description": "Used by `--mod-table-min-row-height`.", + "control": "text", + "category": "Component" + }, + "spectrum-table-row-top-to-text-large-spacious": { + "value": "18px", + "description": "Used by `--mod-table-row-top-to-text`.", + "control": "text", + "category": "Component" + }, + "spectrum-table-row-bottom-to-text-large-spacious": { + "value": "18px", + "description": "Used by `--mod-table-row-bottom-to-text`.", + "control": "text", + "category": "Component" + }, + "spectrum-table-row-checkbox-to-top-large-spacious": { + "value": "20px", + "description": "Used by `--mod-table-row-checkbox-block-spacing`.", + "control": "text", + "category": "Component" + }, + "spectrum-table-thumbnail-to-top-minimum-large-spacious": { + "value": "8px", + "description": "Used by `--mod-table-thumbnail-block-spacing`.", + "control": "text", + "category": "Component" + }, + "spectrum-table-row-height-extra-large-spacious": { + "value": "64px", + "description": "Used by `--mod-table-min-row-height`.", + "control": "text", + "category": "Component" + }, + "spectrum-table-row-top-to-text-extra-large-spacious": { + "value": "21px", + "description": "Used by `--mod-table-row-top-to-text`.", + "control": "text", + "category": "Component" + }, + "spectrum-table-row-bottom-to-text-extra-large-spacious": { + "value": "21px", + "description": "Used by `--mod-table-row-bottom-to-text`.", + "control": "text", + "category": "Component" + }, + "spectrum-table-row-checkbox-to-top-extra-large-spacious": { + "value": "23px", + "description": "Used by `--mod-table-row-checkbox-block-spacing`.", + "control": "text", + "category": "Component" + }, + "spectrum-table-thumbnail-to-top-minimum-extra-large-spacious": { + "value": "10px", + "description": "Used by `--mod-table-thumbnail-block-spacing`.", + "control": "text", + "category": "Component" + }, + "spectrum-table-icon-color": { + "description": "Defined in `.spectrum-Table-headCell`, `.spectrum-Table-headCell.is-sortable:active`, `.spectrum-Table-headCell.is-sortable:focus`, `.spectrum-Table-headCell.is-sortable.is-keyboardFocused, .spectrum-Table-headCell.is-sortable:focus-visible`, `.spectrum-Table-disclosureIcon.spectrum-Table-disclosureIcon`, `.spectrum-Table-disclosureIcon.spectrum-Table-disclosureIcon:active`, `.spectrum-Table-disclosureIcon.spectrum-Table-disclosureIcon:focus`, `.spectrum-Table-headCell.is-sortable:hover`, `.spectrum-Table-headCell.is-sortable:focus:hover`, `.spectrum-Table-disclosureIcon.spectrum-Table-disclosureIcon:hover`, `.spectrum-Table-disclosureIcon.spectrum-Table-disclosureIcon:focus:hover`, `.spectrum-Table-disclosureIcon.spectrum-Table-disclosureIcon.is-keyboardFocused, .spectrum-Table-disclosureIcon.spectrum-Table-disclosureIcon:focus-visible`.
Used by `.spectrum-Table-headCell .spectrum-Table-menuIcon, .spectrum-Table-headCell .spectrum-Table-sortedIcon`, `.spectrum-Table-disclosureIcon.spectrum-Table-disclosureIcon`.", + "control": "color", + "category": "Component" + }, + "spectrum-table-checkbox-to-text": { + "value": "24px", + "description": "Used by `.spectrum-Table-checkboxCell`.", + "control": "text", + "category": "Component" + }, + "spectrum-table-row-tier": { + "description": "Defined in `.spectrum-Table-row--collapsible`, `.spectrum-Table-row--collapsible[data-tier=\"1\"]`, `.spectrum-Table-row--collapsible[data-tier=\"2\"]`, `.spectrum-Table-row--collapsible[data-tier=\"3\"]`, `.spectrum-Table-row--collapsible[data-tier=\"4\"]`, `.spectrum-Table-row--collapsible[data-tier=\"5\"]`, `.spectrum-Table-row--collapsible[data-tier=\"6\"]`.
Used by `.spectrum-Table-row--collapsible.is-last-tier .spectrum-Table-cell--collapsible`, `.spectrum-Table-cell--collapsible`.", + "control": "text", + "category": "Component" + }, + "spectrum-table-thumbnail-cell-block-spacing": { + "description": "Defined in `.spectrum-Table-row--thumbnail`, `.spectrum-Table-row--thumbnail.spectrum-Table-row--collapsible`.
Used by `.spectrum-Table-row--thumbnail .spectrum-Table-cell`, `.spectrum-Table-thumbnailInner`.", + "control": "text", + "category": "Component" + }, + "spectrum-table-thumbnail-inner-content-block-spacing": { + "description": "Defined in `.spectrum-Table-row--thumbnail`.
Used by `.spectrum-Table-row--thumbnail .spectrum-Table-cell`, `.spectrum-Table-thumbnailInner .spectrum-Table-thumbnailContent`.", + "control": "text", + "category": "Component" + }, + "spectrum-table-thumbnail-inner-minimum-block-spacing": { + "description": "Defined in `.spectrum-Table-row--thumbnail.spectrum-Table-row--collapsible`.
Used by `--spectrum-table-thumbnail-cell-block-spacing`.", + "control": "text", + "category": "Component" + } + }, + "global": { + "spectrum-transparent-white-25": { + "value": "light-dark(rgba(255, 255, 255, 0), rgba(255, 255, 255, 0))", + "description": "Used by `--system-table-header-background-color`, `--system-table-quiet-header-background-color`, `--system-table-quiet-row-background-color`.", + "control": "text", + "category": "Global" + }, + "spectrum-gray-200": { + "value": "light-dark(rgb(225, 225, 225), rgb(50, 50, 50))", + "description": "Used by `--system-table-border-color`, `--system-table-divider-color`, `--spectrum-table-summary-row-background-color`, `--spectrum-table-section-header-background-color`.", + "control": "text", + "category": "Global" + }, + "spectrum-gray-25": { + "value": "light-dark(rgb(255, 255, 255), rgb(17, 17, 17))", + "description": "Used by `--system-table-row-background-color`.", + "control": "text", + "category": "Global" + }, + "spectrum-gray-100": { + "value": "light-dark(rgb(233, 233, 233), rgb(44, 44, 44))", + "description": "Used by `--system-table-summary-row-background-color`, `--system-table-section-header-background-color`.", + "control": "text", + "category": "Global" + }, + "spectrum-neutral-subdued-content-color-key-focus": { + "value": "var(--spectrum-gray-800)", + "description": "Used by `--system-table-icon-color-focus`, `--spectrum-table-icon-color-focus`, `--spectrum-table-icon-color-focus-hover`, `--spectrum-table-icon-color-key-focus`.", + "control": "color", + "category": "Global" + }, + "spectrum-neutral-subdued-content-color-hover": { + "value": "var(--spectrum-gray-800)", + "description": "Used by `--system-table-icon-color-focus-hover`, `--spectrum-table-icon-color-hover`.", + "control": "color", + "category": "Global" + }, + "spectrum-corner-radius-100": { + "value": "8px", + "description": "Used by `--spectrum-table-border-radius`.", + "control": "text", + "category": "Global" + }, + "spectrum-bold-font-weight": { + "value": "700", + "description": "Used by `--spectrum-table-header-font-weight`, `--spectrum-table-summary-row-font-weight`, `--spectrum-table-section-header-font-weight`.", + "control": "text", + "category": "Global" + }, + "spectrum-sans-font-family-stack": { + "description": "Used by `--spectrum-table-row-font-family`.", + "control": "text", + "category": "Global" + }, + "spectrum-regular-font-weight": { + "value": "400", + "description": "Used by `--spectrum-table-row-font-weight`.", + "control": "text", + "category": "Global" + }, + "spectrum-default-font-style": { + "value": "normal", + "description": "Used by `--spectrum-table-row-font-style`.", + "control": "text", + "category": "Global" + }, + "spectrum-line-height-100": { + "value": "1.3", + "description": "Used by `--spectrum-table-row-line-height`.", + "control": "text", + "category": "Global" + }, + "spectrum-gray-300": { + "value": "light-dark(rgb(218, 218, 218), rgb(57, 57, 57))", + "description": "Used by `--spectrum-table-border-color`, `--spectrum-table-divider-color`.", + "control": "text", + "category": "Global" + }, + "spectrum-transparent-white-100": { + "value": "light-dark(rgba(255, 255, 255, 0.11), rgba(255, 255, 255, 0.11))", + "description": "Used by `--spectrum-table-header-background-color`, `--mod-table-header-background-color`, `--mod-table-row-background-color`.", + "control": "text", + "category": "Global" + }, + "spectrum-body-color": { + "value": "var(--spectrum-gray-800)", + "description": "Used by `--spectrum-table-header-text-color`.", + "control": "color", + "category": "Global" + }, + "spectrum-gray-50": { + "value": "light-dark(rgb(248, 248, 248), rgb(27, 27, 27))", + "description": "Used by `--spectrum-table-row-background-color`.", + "control": "text", + "category": "Global" + }, + "spectrum-neutral-content-color-default": { + "value": "var(--spectrum-gray-800)", + "description": "Used by `--spectrum-table-row-text-color`.", + "control": "color", + "category": "Global" + }, + "spectrum-blue-900-rgb": { + "description": "Used by `--spectrum-table-selected-row-background-color`, `--spectrum-table-selected-row-background-color-focus`.", + "control": "text", + "category": "Global" + }, + "spectrum-gray-700-rgb": { + "description": "Used by `--spectrum-table-selected-row-background-color-non-emphasized`, `--spectrum-table-selected-row-background-color-non-emphasized-focus`.", + "control": "text", + "category": "Global" + }, + "spectrum-gray-900-rgb": { + "description": "Used by `--spectrum-table-row-background-color-hover`, `--spectrum-table-row-active-color`.", + "control": "text", + "category": "Global" + }, + "spectrum-neutral-subdued-content-color-default": { + "value": "var(--spectrum-gray-700)", + "description": "Used by `--spectrum-table-icon-color-default`.", + "control": "color", + "category": "Global" + }, + "spectrum-neutral-subdued-content-color-down": { + "value": "var(--spectrum-gray-800)", + "description": "Used by `--spectrum-table-icon-color-active`.", + "control": "color", + "category": "Global" + }, + "spectrum-focus-indicator-thickness": { + "value": "2px", + "description": "Used by `--spectrum-table-focus-indicator-thickness`.", + "control": "text", + "category": "Global" + }, + "spectrum-focus-indicator-color": { + "value": "var(--spectrum-blue-800)", + "description": "Used by `--spectrum-table-focus-indicator-color`.", + "control": "color", + "category": "Global" + }, + "spectrum-drop-zone-background-color-rgb": { + "description": "Used by `--spectrum-table-drop-zone-background-color`.", + "control": "color", + "category": "Global" + }, + "spectrum-drop-zone-background-color-opacity": { + "value": "0.1", + "description": "Used by `--spectrum-table-drop-zone-background-color`.", + "control": "color", + "category": "Global" + }, + "spectrum-accent-visual-color": { + "value": "var(--spectrum-accent-color-900)", + "description": "Used by `--spectrum-table-drop-zone-outline-color`.", + "control": "color", + "category": "Global" + }, + "spectrum-animation-duration-100": { + "description": "Used by `--spectrum-table-transition-duration`, `--spectrum-table-collapsible-icon-animation-duration`.", + "control": "text", + "category": "Global" + }, + "spectrum-spacing-300": { + "value": "16px", + "description": "Used by `--spectrum-table-collapsible-tier-indent`.", + "control": "text", + "category": "Global" + }, + "spectrum-logical-rotation": { + "description": "Defined in `.spectrum-Table:dir(rtl), [dir=\"rtl\"] .spectrum-Table`.
Used by `.spectrum-Table-disclosureIcon.spectrum-Table-disclosureIcon`, `.spectrum-Table-disclosureIcon.spectrum-Table-disclosureIcon[aria-expanded=\"true\"]`.", + "control": "text", + "category": "Global" + }, + "spectrum-component-height-100": { + "value": "32px", + "description": "Used by `--spectrum-table-min-header-height`, `--spectrum-table-disclosure-icon-size`.", + "control": "text", + "category": "Global" + }, + "spectrum-text-to-visual-100": { + "value": "6px", + "description": "Used by `--spectrum-table-icon-to-text`, `--spectrum-table-thumbnail-to-text`.", + "control": "text", + "category": "Global" + }, + "spectrum-font-size-100": { + "value": "14px", + "description": "Used by `--spectrum-table-row-font-size`.", + "control": "text", + "category": "Global" + }, + "spectrum-component-top-to-text-100": { + "value": "6px", + "description": "Used by `--spectrum-table-section-header-block-start-spacing`.", + "control": "text", + "category": "Global" + }, + "spectrum-component-bottom-to-text-100": { + "value": "9px", + "description": "Used by `--spectrum-table-section-header-block-end-spacing`.", + "control": "text", + "category": "Global" + }, + "spectrum-thumbnail-size-300": { + "value": "26px", + "description": "Used by `--spectrum-table-thumbnail-size`, `--mod-table-thumbnail-size`.", + "control": "text", + "category": "Global" + }, + "spectrum-font-size-75": { + "value": "12px", + "description": "Used by `--spectrum-table-row-font-size`.", + "control": "text", + "category": "Global" + }, + "spectrum-component-top-to-text-75": { + "value": "4px", + "description": "Used by `--spectrum-table-section-header-block-start-spacing`.", + "control": "text", + "category": "Global" + }, + "spectrum-component-bottom-to-text-75": { + "value": "5px", + "description": "Used by `--spectrum-table-section-header-block-end-spacing`.", + "control": "text", + "category": "Global" + }, + "spectrum-component-height-75": { + "value": "24px", + "description": "Used by `--spectrum-table-disclosure-icon-size`.", + "control": "text", + "category": "Global" + }, + "spectrum-thumbnail-size-200": { + "value": "22px", + "description": "Used by `--spectrum-table-thumbnail-size`, `--mod-table-thumbnail-size`.", + "control": "text", + "category": "Global" + }, + "spectrum-component-height-200": { + "value": "40px", + "description": "Used by `--spectrum-table-min-header-height`, `--spectrum-table-disclosure-icon-size`.", + "control": "text", + "category": "Global" + }, + "spectrum-text-to-visual-200": { + "value": "7px", + "description": "Used by `--spectrum-table-icon-to-text`, `--spectrum-table-thumbnail-to-text`.", + "control": "text", + "category": "Global" + }, + "spectrum-font-size-200": { + "value": "16px", + "description": "Used by `--spectrum-table-row-font-size`.", + "control": "text", + "category": "Global" + }, + "spectrum-component-top-to-text-200": { + "value": "9px", + "description": "Used by `--spectrum-table-section-header-block-start-spacing`.", + "control": "text", + "category": "Global" + }, + "spectrum-component-bottom-to-text-200": { + "value": "11px", + "description": "Used by `--spectrum-table-section-header-block-end-spacing`.", + "control": "text", + "category": "Global" + }, + "spectrum-thumbnail-size-500": { + "value": "32px", + "description": "Used by `--spectrum-table-thumbnail-size`, `--mod-table-thumbnail-size`.", + "control": "text", + "category": "Global" + }, + "spectrum-component-height-300": { + "value": "48px", + "description": "Used by `--spectrum-table-min-header-height`, `--spectrum-table-disclosure-icon-size`.", + "control": "text", + "category": "Global" + }, + "spectrum-text-to-visual-300": { + "value": "8px", + "description": "Used by `--spectrum-table-icon-to-text`, `--spectrum-table-thumbnail-to-text`.", + "control": "text", + "category": "Global" + }, + "spectrum-font-size-300": { + "value": "18px", + "description": "Used by `--spectrum-table-row-font-size`.", + "control": "text", + "category": "Global" + }, + "spectrum-component-top-to-text-300": { + "value": "12px", + "description": "Used by `--spectrum-table-section-header-block-start-spacing`.", + "control": "text", + "category": "Global" + }, + "spectrum-component-bottom-to-text-300": { + "value": "14px", + "description": "Used by `--spectrum-table-section-header-block-end-spacing`.", + "control": "text", + "category": "Global" + }, + "spectrum-thumbnail-size-700": { + "value": "40px", + "description": "Used by `--spectrum-table-thumbnail-size`, `--mod-table-thumbnail-size`.", + "control": "text", + "category": "Global" + }, + "spectrum-thumbnail-size-50": { + "value": "16px", + "description": "Used by `--mod-table-thumbnail-size`.", + "control": "text", + "category": "Global" + }, + "spectrum-thumbnail-size-800": { + "value": "44px", + "description": "Used by `--mod-table-thumbnail-size`.", + "control": "text", + "category": "Global" + }, + "spectrum-checkbox-control-size-small": { + "value": "12px", + "description": "Used by `.spectrum-Table-checkboxCell`.", + "control": "text", + "category": "Global" + }, + "spectrum-background-layer-1-color": { + "value": "light-dark(rgb(243, 243, 243), rgb(34, 34, 34))", + "description": "Used by `--spectrum-table-header-background-color`.
Defaults to `var(--spectrum-gray-75)`, if not set.", + "control": "color", + "category": "Global" + }, + "spectrum-gray-75": { + "value": "light-dark(rgb(243, 243, 243), rgb(34, 34, 34))", + "description": "Used by `--spectrum-table-header-background-color`.", + "control": "text", + "category": "Global" + } + }, + "system-theme": { + "system-table-header-background-color": { + "description": "Defined in `.spectrum`.
Used by `--spectrum-table-header-background-color`.", + "control": "color" + }, + "system-table-border-color": { + "description": "Defined in `.spectrum`.
Used by `--spectrum-table-border-color`.", + "control": "color" + }, + "system-table-divider-color": { + "description": "Defined in `.spectrum`.
Used by `--spectrum-table-divider-color`.", + "control": "color" + }, + "system-table-row-background-color": { + "description": "Defined in `.spectrum`.
Used by `--spectrum-table-row-background-color`.", + "control": "color" + }, + "system-table-summary-row-background-color": { + "description": "Defined in `.spectrum`.
Used by `--spectrum-table-summary-row-background-color`.", + "control": "color" + }, + "system-table-section-header-background-color": { + "description": "Defined in `.spectrum`.
Used by `--spectrum-table-section-header-background-color`.", + "control": "color" + }, + "system-table-icon-color-focus": { + "description": "Defined in `.spectrum`.
Used by `--spectrum-table-icon-color-focus`.", + "control": "color" + }, + "system-table-icon-color-focus-hover": { + "description": "Defined in `.spectrum`.
Used by `--spectrum-table-icon-color-focus-hover`.", + "control": "color" + }, + "system-table-quiet-header-background-color": { + "description": "Defined in `.spectrum`.
Used by `--spectrum-table-header-background-color`.", + "control": "color" + }, + "system-table-quiet-row-background-color": { + "description": "Defined in `.spectrum`.
Used by `--spectrum-table-row-background-color`.", + "control": "color" + } + }, + "passthroughs": { + "mod-thumbnail-size": { + "category": "Passthrough" + }, + "mod-checkbox-spacing": { + "category": "Passthrough" + } + }, + "high-contrast": { + "highcontrast-table-row-background-color": { + "value": "var(--mod-table-summary-row-background-color, var(--spectrum-table-summary-row-background-color))", + "description": "Defined in `.spectrum-Table`.
Used by `--spectrum-table-cell-background-color`.
Defaults to `var(--mod-table-summary-row-background-color, var(--spectrum-table-summary-row-background-color))`, if not set.", + "control": "color" + }, + "highcontrast-table-row-text-color": { + "value": "var(--mod-table-summary-row-text-color, var(--spectrum-table-row-text-color))", + "description": "Defined in `.spectrum-Table`, `.spectrum-Table-row.is-focused, .spectrum-Table-row:focus-visible`, `.spectrum-Table-row:active`, `.spectrum-Table-row.is-selected`, `.spectrum-Table-row.is-selected.is-focused, .spectrum-Table-row.is-selected:focus-visible`, `.spectrum-Table-body.is-drop-target .spectrum-Table-row, .spectrum-Table-row.is-drop-target`, `.spectrum-Table-row:hover`, `.spectrum-Table-row.is-selected:hover`, `.spectrum-Table-row--sectionHeader:hover`.
Used by `.spectrum-Table-cell`, `.spectrum-Table-row--summary .spectrum-Table-cell`.
Defaults to `var(--mod-table-summary-row-text-color, var(--spectrum-table-row-text-color))`, if not set.", + "control": "color" + }, + "highcontrast-table-divider-color": { + "value": "var(--mod-table-divider-color, var(--spectrum-table-divider-color))", + "description": "Defined in `.spectrum-Table`.
Used by `.spectrum-Table-cell`, `.spectrum-Table-cell--divider`.
Defaults to `var(--mod-table-divider-color, var(--spectrum-table-divider-color))`, if not set.", + "control": "color" + }, + "highcontrast-table-border-color": { + "value": "var(--mod-table-border-color, var(--spectrum-table-border-color))", + "description": "Defined in `.spectrum-Table`.
Used by `.spectrum-Table-body .spectrum-Table-row:first-child .spectrum-Table-cell`, `.spectrum-Table-body .spectrum-Table-row:last-child .spectrum-Table-cell`, `.spectrum-Table-body .spectrum-Table-row .spectrum-Table-cell:first-child`, `.spectrum-Table-body .spectrum-Table-row .spectrum-Table-cell:last-child`, `.spectrum-Table-scroller`, `.spectrum-Table-scroller .spectrum-Table-headCell`.
Defaults to `var(--mod-table-border-color, var(--spectrum-table-border-color))`, if not set.", + "control": "color" + }, + "highcontrast-table-icon-color": { + "value": "var(--mod-table-icon-color-key-focus, var(--spectrum-table-icon-color-key-focus))", + "description": "Defined in `.spectrum-Table`, `.spectrum-Table-row.is-focused, .spectrum-Table-row:focus-visible`, `.spectrum-Table-row:active`, `.spectrum-Table-row.is-selected`, `.spectrum-Table-row.is-selected.is-focused, .spectrum-Table-row.is-selected:focus-visible`, `.spectrum-Table-body.is-drop-target .spectrum-Table-row, .spectrum-Table-row.is-drop-target`, `.spectrum-Table-row:hover`, `.spectrum-Table-row.is-selected:hover`.
Used by `--spectrum-table-icon-color`.
Defaults to `var(--mod-table-icon-color-key-focus, var(--spectrum-table-icon-color-key-focus))`, if not set.", + "control": "color" + }, + "highcontrast-table-icon-color-focus": { + "value": "var(--mod-table-icon-color-focus-hover, var(--spectrum-table-icon-color-focus-hover))", + "description": "Defined in `.spectrum-Table`.
Used by `--spectrum-table-icon-color`.
Defaults to `var(--mod-table-icon-color-focus-hover, var(--spectrum-table-icon-color-focus-hover))`, if not set.", + "control": "color" + }, + "highcontrast-table-selected-row-background-color": { + "value": "var(--mod-table-drop-zone-background-color, var(--spectrum-table-drop-zone-background-color))", + "description": "Defined in `.spectrum-Table`.
Used by `--spectrum-table-selected-cell-background-color`, `--spectrum-table-cell-background-color`.
Defaults to `var(--mod-table-drop-zone-background-color, var(--spectrum-table-drop-zone-background-color))`, if not set.", + "control": "color" + }, + "highcontrast-table-selected-row-text-color": { + "description": "Defined in `.spectrum-Table`.
Used by `--highcontrast-table-cell-focus-indicator-color`, `.spectrum-Table-body.is-drop-target .spectrum-Table-row .spectrum-Table-checkbox .spectrum-Checkbox-box:before, .spectrum-Table-row.is-drop-target .spectrum-Table-checkbox .spectrum-Checkbox-box:before, .spectrum-Table-row.is-selected .spectrum-Table-checkbox .spectrum-Checkbox-box:before`, `--highcontrast-table-row-text-color`, `--highcontrast-table-icon-color`.", + "control": "color" + }, + "highcontrast-table-selected-row-background-color-focus": { + "value": "var(--spectrum-table-selected-cell-background-color-focus)", + "description": "Defined in `.spectrum-Table`.
Used by `--spectrum-table-selected-cell-background-color-focus`, `--spectrum-table-cell-background-color`.
Defaults to `var(--spectrum-table-selected-cell-background-color-focus)`, if not set.", + "control": "color" + }, + "highcontrast-table-selected-row-text-color-focus": { + "description": "Defined in `.spectrum-Table`.
Used by `--highcontrast-table-row-text-color`, `--highcontrast-table-icon-color`.", + "control": "color" + }, + "highcontrast-table-row-background-color-hover": { + "value": "var(--mod-table-row-background-color-hover, var(--spectrum-table-row-background-color-hover))", + "description": "Defined in `.spectrum-Table`.
Used by `--spectrum-table-cell-background-color`.
Defaults to `var(--mod-table-row-background-color-hover, var(--spectrum-table-row-background-color-hover))`, if not set.", + "control": "color" + }, + "highcontrast-table-row-text-color-hover": { + "description": "Defined in `.spectrum-Table`.
Used by `.spectrum-Table-row.is-focused .spectrum-Table-checkbox .spectrum-Checkbox-box:before, .spectrum-Table-row:focus-visible .spectrum-Table-checkbox .spectrum-Checkbox-box:before`, `.spectrum-Table-row:hover .spectrum-Table-checkbox .spectrum-Checkbox-box:before`, `--highcontrast-table-row-text-color`, `--highcontrast-table-icon-color`.", + "control": "color" + }, + "highcontrast-table-section-header-text-color": { + "value": "var(--mod-table-section-header-text-color, var(--spectrum-table-row-text-color))", + "description": "Defined in `.spectrum-Table`.
Used by `.spectrum-Table-row--sectionHeader .spectrum-Table-cell`, `--highcontrast-table-row-text-color`.
Defaults to `var(--mod-table-section-header-text-color, var(--spectrum-table-row-text-color))`, if not set.", + "control": "color" + }, + "highcontrast-table-section-header-background-color": { + "value": "var(--mod-table-section-header-background-color, var(--spectrum-table-section-header-background-color))", + "description": "Defined in `.spectrum-Table`.
Used by `--spectrum-table-cell-background-color`.
Defaults to `var(--mod-table-section-header-background-color, var(--spectrum-table-section-header-background-color))`, if not set.", + "control": "color" + }, + "highcontrast-table-focus-indicator-color": { + "value": "var(--mod-table-focus-indicator-color, var(--spectrum-table-focus-indicator-color))", + "description": "Defined in `.spectrum-Table`.
Used by `.spectrum-Table-body.is-drop-target`, `--mod-table-border-color`, `.spectrum-Table-row.is-drop-target`, `.spectrum-Table-row.is-drop-target .spectrum-Table-cell`, `.spectrum-Table-cell.is-focused, .spectrum-Table-cell:focus-visible, .spectrum-Table-headCell.is-focused, .spectrum-Table-headCell:focus-visible`, `.spectrum-Table-disclosureIcon.spectrum-Table-disclosureIcon.is-keyboardFocused, .spectrum-Table-disclosureIcon.spectrum-Table-disclosureIcon:focus-visible`.
Defaults to `var(--mod-table-focus-indicator-color, var(--spectrum-table-focus-indicator-color))`, if not set.", + "control": "color" + }, + "highcontrast-table-transition-duration": { + "value": "var(--mod-table-transition-duration, var(--spectrum-table-transition-duration))", + "description": "Defined in `.spectrum-Table`.
Used by `.spectrum-Table-sortedIcon`, `.spectrum-Table-headCell`, `.spectrum-Table-row`.
Defaults to `var(--mod-table-transition-duration, var(--spectrum-table-transition-duration))`, if not set.", + "control": "text" + }, + "highcontrast-table-cell-focus-indicator-color": { + "value": "var(--highcontrast-table-focus-indicator-color, var(--mod-table-focus-indicator-color, var(--spectrum-table-focus-indicator-color)))", + "description": "Defined in `.spectrum-Table-body.is-drop-target .spectrum-Table-row, .spectrum-Table-row.is-drop-target, .spectrum-Table-row.is-selected`.
Used by `.spectrum-Table-cell.is-focused, .spectrum-Table-cell:focus-visible, .spectrum-Table-headCell.is-focused, .spectrum-Table-headCell:focus-visible`.
Defaults to `var(--highcontrast-table-focus-indicator-color, var(--mod-table-focus-indicator-color, var(--spectrum-table-focus-indicator-color)))`, if not set.", + "control": "color" + }, + "highcontrast-table-cell-focus-extra-offset": { + "description": "Defined in `.spectrum-Table-body.is-drop-target .spectrum-Table-row, .spectrum-Table-row.is-drop-target, .spectrum-Table-row.is-selected`.
Used by `.spectrum-Table-cell.is-focused, .spectrum-Table-cell:focus-visible, .spectrum-Table-headCell.is-focused, .spectrum-Table-headCell:focus-visible`.", + "control": "text" + } + } } diff --git a/components/table/stories/table.stories.js b/components/table/stories/table.stories.js index 834a90f4630..841498a3da4 100644 --- a/components/table/stories/table.stories.js +++ b/components/table/stories/table.stories.js @@ -1,11 +1,13 @@ import { Sizes } from "@spectrum-css/preview/decorators"; import { disableDefaultModes } from "@spectrum-css/preview/modes"; import { isEmphasized, isQuiet, size } from "@spectrum-css/preview/types"; -import metadata from "../dist/metadata.json"; -import packageJson from "../package.json"; import { TableGroup } from "./table.test.js"; import { Template } from "./template.js"; +// Local assets to render the component styles and structure +import metadata from "../dist/metadata.json"; +import packageJson from "../package.json"; + /** * A table is used to create a container for displaying information. It allows users to sort, compare, and take action on large amounts of data. */ @@ -117,6 +119,7 @@ export default { }, packageJson, metadata, + cssprops: metadata.modifiers, }, }; diff --git a/components/tabs/dist/metadata.json b/components/tabs/dist/metadata.json index 544295ef045..39fa0b1dfdf 100644 --- a/components/tabs/dist/metadata.json +++ b/components/tabs/dist/metadata.json @@ -24,20 +24,20 @@ ".spectrum-Tabs--vertical-right .spectrum-Tabs-item", ".spectrum-Tabs--vertical-right .spectrum-Tabs-item:before", ".spectrum-Tabs--vertical-right .spectrum-Tabs-selectionIndicator", - ".spectrum-Tabs--vertical-right.spectrum-Tabs--quiet", ".spectrum-Tabs--vertical-right:dir(rtl)", - ".spectrum-Tabs--vertical.spectrum-Tabs--quiet", + ".spectrum-Tabs--vertical-right.spectrum-Tabs--quiet", ".spectrum-Tabs--vertical:dir(rtl)", + ".spectrum-Tabs--vertical.spectrum-Tabs--quiet", ".spectrum-Tabs-item", ".spectrum-Tabs-item .spectrum-Icon", ".spectrum-Tabs-item .spectrum-Icon + .spectrum-Tabs-itemLabel", - ".spectrum-Tabs-item.is-disabled", - ".spectrum-Tabs-item.is-disabled .spectrum-Tabs-itemLabel", - ".spectrum-Tabs-item.is-selected", ".spectrum-Tabs-item:before", ".spectrum-Tabs-item:focus-visible", ".spectrum-Tabs-item:focus-visible:before", ".spectrum-Tabs-item:hover", + ".spectrum-Tabs-item.is-disabled", + ".spectrum-Tabs-item.is-disabled .spectrum-Tabs-itemLabel", + ".spectrum-Tabs-item.is-selected", ".spectrum-Tabs-itemLabel", ".spectrum-Tabs-itemLabel:empty", ".spectrum-Tabs-selectionIndicator", @@ -54,172 +54,907 @@ "[dir=\"rtl\"] .spectrum-Tabs--vertical", "[dir=\"rtl\"] .spectrum-Tabs--vertical-right" ], - "modifiers": [ - "--mod-tabs-animation-duration", - "--mod-tabs-animation-ease", - "--mod-tabs-bottom-to-text", - "--mod-tabs-bottom-to-text-compact", - "--mod-tabs-color", - "--mod-tabs-color-disabled", - "--mod-tabs-color-hover", - "--mod-tabs-color-hover-emphasized", - "--mod-tabs-color-key-focus", - "--mod-tabs-color-key-focus-emphasized", - "--mod-tabs-color-selected", - "--mod-tabs-color-selected-emphasized", - "--mod-tabs-divider-background-color", - "--mod-tabs-divider-border-radius", - "--mod-tabs-divider-size", - "--mod-tabs-focus-indicator-border-radius", - "--mod-tabs-focus-indicator-color", - "--mod-tabs-focus-indicator-gap", - "--mod-tabs-focus-indicator-width", - "--mod-tabs-font-family", - "--mod-tabs-font-size", - "--mod-tabs-font-style", - "--mod-tabs-font-weight", - "--mod-tabs-icon-size", - "--mod-tabs-icon-to-text", - "--mod-tabs-item-height", - "--mod-tabs-item-height-compact", - "--mod-tabs-item-horizontal-spacing", - "--mod-tabs-item-vertical-spacing", - "--mod-tabs-line-height", - "--mod-tabs-list-background-direction", - "--mod-tabs-list-background-direction-vertical", - "--mod-tabs-list-background-direction-vertical-right", - "--mod-tabs-selection-indicator-color", - "--mod-tabs-selection-indicator-color-emphasized", - "--mod-tabs-start-to-edge", - "--mod-tabs-start-to-item-quiet", - "--mod-tabs-top-to-icon", - "--mod-tabs-top-to-icon-compact", - "--mod-tabs-top-to-text", - "--mod-tabs-top-to-text-compact" - ], - "component": [ - "--spectrum-tabs-animation-duration", - "--spectrum-tabs-animation-ease", - "--spectrum-tabs-bottom-to-text", - "--spectrum-tabs-color", - "--spectrum-tabs-color-disabled", - "--spectrum-tabs-color-hover", - "--spectrum-tabs-color-key-focus", - "--spectrum-tabs-color-selected", - "--spectrum-tabs-divider-background-color", - "--spectrum-tabs-divider-border-radius", - "--spectrum-tabs-divider-size", - "--spectrum-tabs-focus-indicator-border-radius", - "--spectrum-tabs-focus-indicator-color", - "--spectrum-tabs-focus-indicator-gap", - "--spectrum-tabs-focus-indicator-width", - "--spectrum-tabs-font-family", - "--spectrum-tabs-font-size", - "--spectrum-tabs-font-style", - "--spectrum-tabs-font-weight", - "--spectrum-tabs-icon-size", - "--spectrum-tabs-icon-to-text", - "--spectrum-tabs-item-height", - "--spectrum-tabs-item-horizontal-spacing", - "--spectrum-tabs-item-vertical-spacing", - "--spectrum-tabs-line-height", - "--spectrum-tabs-list-background-direction", - "--spectrum-tabs-selection-indicator-color", - "--spectrum-tabs-start-to-edge", - "--spectrum-tabs-top-to-icon", - "--spectrum-tabs-top-to-text" - ], - "global": [ - "--spectrum-accent-content-color-default", - "--spectrum-accent-content-color-hover", - "--spectrum-accent-content-color-key-focus", - "--spectrum-animation-duration-100", - "--spectrum-animation-ease-in-out", - "--spectrum-border-width-200", - "--spectrum-corner-radius-100", - "--spectrum-default-font-style", - "--spectrum-focus-indicator-color", - "--spectrum-focus-indicator-thickness", - "--spectrum-font-size-100", - "--spectrum-font-size-200", - "--spectrum-font-size-300", - "--spectrum-font-size-75", - "--spectrum-gray-200", - "--spectrum-gray-500", - "--spectrum-line-height-100", - "--spectrum-neutral-subdued-content-color-default", - "--spectrum-neutral-subdued-content-color-down", - "--spectrum-neutral-subdued-content-color-hover", - "--spectrum-neutral-subdued-content-color-key-focus", - "--spectrum-regular-font-weight", - "--spectrum-sans-font-family-stack", - "--spectrum-tab-item-bottom-to-text-extra-large", - "--spectrum-tab-item-bottom-to-text-large", - "--spectrum-tab-item-bottom-to-text-medium", - "--spectrum-tab-item-bottom-to-text-small", - "--spectrum-tab-item-compact-height-extra-large", - "--spectrum-tab-item-compact-height-large", - "--spectrum-tab-item-compact-height-medium", - "--spectrum-tab-item-compact-height-small", - "--spectrum-tab-item-focus-indicator-gap-extra-large", - "--spectrum-tab-item-focus-indicator-gap-large", - "--spectrum-tab-item-focus-indicator-gap-medium", - "--spectrum-tab-item-focus-indicator-gap-small", - "--spectrum-tab-item-height-extra-large", - "--spectrum-tab-item-height-large", - "--spectrum-tab-item-height-medium", - "--spectrum-tab-item-height-small", - "--spectrum-tab-item-start-to-edge-extra-large", - "--spectrum-tab-item-start-to-edge-large", - "--spectrum-tab-item-start-to-edge-medium", - "--spectrum-tab-item-start-to-edge-small", - "--spectrum-tab-item-to-tab-item-horizontal-extra-large", - "--spectrum-tab-item-to-tab-item-horizontal-large", - "--spectrum-tab-item-to-tab-item-horizontal-medium", - "--spectrum-tab-item-to-tab-item-horizontal-small", - "--spectrum-tab-item-to-tab-item-vertical-extra-large", - "--spectrum-tab-item-to-tab-item-vertical-large", - "--spectrum-tab-item-to-tab-item-vertical-medium", - "--spectrum-tab-item-to-tab-item-vertical-small", - "--spectrum-tab-item-top-to-text-compact-extra-large", - "--spectrum-tab-item-top-to-text-compact-large", - "--spectrum-tab-item-top-to-text-compact-medium", - "--spectrum-tab-item-top-to-text-compact-small", - "--spectrum-tab-item-top-to-text-extra-large", - "--spectrum-tab-item-top-to-text-large", - "--spectrum-tab-item-top-to-text-medium", - "--spectrum-tab-item-top-to-text-small", - "--spectrum-tab-item-top-to-workflow-icon-compact-extra-large", - "--spectrum-tab-item-top-to-workflow-icon-compact-large", - "--spectrum-tab-item-top-to-workflow-icon-compact-medium", - "--spectrum-tab-item-top-to-workflow-icon-compact-small", - "--spectrum-tab-item-top-to-workflow-icon-extra-large", - "--spectrum-tab-item-top-to-workflow-icon-large", - "--spectrum-tab-item-top-to-workflow-icon-medium", - "--spectrum-tab-item-top-to-workflow-icon-small", - "--spectrum-text-to-visual-100", - "--spectrum-text-to-visual-200", - "--spectrum-text-to-visual-300", - "--spectrum-text-to-visual-75", - "--spectrum-workflow-icon-size-100", - "--spectrum-workflow-icon-size-200", - "--spectrum-workflow-icon-size-50", - "--spectrum-workflow-icon-size-75" - ], - "system-theme": [ - "--system-tabs-divider-background-color", - "--system-tabs-font-weight" - ], - "passthroughs": [], - "high-contrast": [ - "--highcontrast-tabs-color", - "--highcontrast-tabs-color-disabled", - "--highcontrast-tabs-color-hover", - "--highcontrast-tabs-color-key-focus", - "--highcontrast-tabs-color-selected", - "--highcontrast-tabs-divider-background-color", - "--highcontrast-tabs-focus-indicator-background-color", - "--highcontrast-tabs-focus-indicator-color", - "--highcontrast-tabs-selection-indicator-color" - ] + "modifiers": { + "mod-tabs-color-selected": { + "value": "var(--spectrum-tabs-color-selected)", + "description": "Defined in `.spectrum-Tabs.spectrum-Tabs--emphasized`.
Used by `.spectrum-Tabs-item.is-selected`.
Defaults to `var(--spectrum-tabs-color-selected)`, if not set.", + "control": "color", + "category": "Modifier" + }, + "mod-tabs-color-selected-emphasized": { + "value": "var(--spectrum-accent-color-900)", + "description": "Used by `--mod-tabs-color-selected`.
Defaults to `var(--spectrum-accent-content-color-default)`, if not set.", + "control": "color", + "category": "Modifier" + }, + "mod-tabs-color-hover": { + "value": "var(--spectrum-tabs-color-hover)", + "description": "Defined in `.spectrum-Tabs.spectrum-Tabs--emphasized`.
Used by `.spectrum-Tabs-item:hover`.
Defaults to `var(--spectrum-tabs-color-hover)`, if not set.", + "control": "color", + "category": "Modifier" + }, + "mod-tabs-color-hover-emphasized": { + "value": "var(--spectrum-accent-color-1000)", + "description": "Used by `--mod-tabs-color-hover`.
Defaults to `var(--spectrum-accent-content-color-hover)`, if not set.", + "control": "color", + "category": "Modifier" + }, + "mod-tabs-color-key-focus": { + "value": "var(--spectrum-tabs-color-key-focus)", + "description": "Defined in `.spectrum-Tabs.spectrum-Tabs--emphasized`.
Used by `.spectrum-Tabs-item:focus-visible`.
Defaults to `var(--spectrum-tabs-color-key-focus)`, if not set.", + "control": "color", + "category": "Modifier" + }, + "mod-tabs-color-key-focus-emphasized": { + "value": "var(--spectrum-accent-color-1000)", + "description": "Used by `--mod-tabs-color-key-focus`.
Defaults to `var(--spectrum-accent-content-color-key-focus)`, if not set.", + "control": "color", + "category": "Modifier" + }, + "mod-tabs-selection-indicator-color": { + "value": "var(--spectrum-tabs-selection-indicator-color)", + "description": "Defined in `.spectrum-Tabs.spectrum-Tabs--emphasized`.
Used by `.spectrum-Tabs-selectionIndicator`.
Defaults to `var(--spectrum-tabs-selection-indicator-color)`, if not set.", + "control": "color", + "category": "Modifier" + }, + "mod-tabs-selection-indicator-color-emphasized": { + "value": "var(--spectrum-accent-color-900)", + "description": "Used by `--mod-tabs-selection-indicator-color`.
Defaults to `var(--spectrum-accent-content-color-default)`, if not set.", + "control": "color", + "category": "Modifier" + }, + "mod-tabs-list-background-direction": { + "value": "var(--spectrum-tabs-list-background-direction)", + "description": "Defined in `.spectrum-Tabs--vertical`, `.spectrum-Tabs--vertical-right`, `.spectrum-Tabs--vertical:dir(rtl), [dir=\"rtl\"] .spectrum-Tabs--vertical`, `.spectrum-Tabs--vertical-right:dir(rtl), [dir=\"rtl\"] .spectrum-Tabs--vertical-right`.
Used by `.spectrum-Tabs`, `.spectrum-Tabs.spectrum-Tabs--quiet`.
Defaults to `var(--spectrum-tabs-list-background-direction)`, if not set.", + "control": "text", + "category": "Modifier" + }, + "mod-tabs-list-background-direction-vertical": { + "description": "Used by `--mod-tabs-list-background-direction`.", + "control": "text", + "category": "Modifier" + }, + "mod-tabs-list-background-direction-vertical-right": { + "description": "Used by `--mod-tabs-list-background-direction`.", + "control": "text", + "category": "Modifier" + }, + "mod-tabs-item-height": { + "value": "var(--spectrum-tabs-item-height)", + "description": "Defined in `.spectrum-Tabs.spectrum-Tabs--compact`, `.spectrum-Tabs.spectrum-Tabs--compact.spectrum-Tabs--sizeS`, `.spectrum-Tabs.spectrum-Tabs--compact.spectrum-Tabs--sizeL`, `.spectrum-Tabs.spectrum-Tabs--compact.spectrum-Tabs--sizeXL`.
Used by `.spectrum-Tabs-item`, `.spectrum-Tabs--vertical .spectrum-Tabs-item, .spectrum-Tabs--vertical-right .spectrum-Tabs-item`, `.spectrum-Tabs--vertical .spectrum-Icon, .spectrum-Tabs--vertical-right .spectrum-Icon`.
Defaults to `var(--spectrum-tabs-item-height)`, if not set.", + "control": "text", + "category": "Modifier" + }, + "mod-tabs-item-height-compact": { + "value": "var(--spectrum-component-height-300)", + "description": "Used by `--mod-tabs-item-height`.
Defaults to `var(--spectrum-tab-item-compact-height-extra-large)`, if not set.", + "control": "text", + "category": "Modifier" + }, + "mod-tabs-top-to-text": { + "value": "var(--spectrum-tabs-top-to-text)", + "description": "Defined in `.spectrum-Tabs.spectrum-Tabs--compact`, `.spectrum-Tabs.spectrum-Tabs--compact.spectrum-Tabs--sizeS`, `.spectrum-Tabs.spectrum-Tabs--compact.spectrum-Tabs--sizeL`, `.spectrum-Tabs.spectrum-Tabs--compact.spectrum-Tabs--sizeXL`.
Used by `.spectrum-Tabs-item:before`, `.spectrum-Tabs-itemLabel`.
Defaults to `var(--spectrum-tabs-top-to-text)`, if not set.", + "control": "text", + "category": "Modifier" + }, + "mod-tabs-top-to-text-compact": { + "value": "12px", + "description": "Used by `--mod-tabs-top-to-text`.
Defaults to `var(--spectrum-tab-item-top-to-text-compact-extra-large)`, if not set.", + "control": "text", + "category": "Modifier" + }, + "mod-tabs-bottom-to-text": { + "value": "var(--spectrum-tabs-bottom-to-text)", + "description": "Defined in `.spectrum-Tabs.spectrum-Tabs--compact`, `.spectrum-Tabs.spectrum-Tabs--compact.spectrum-Tabs--sizeS`, `.spectrum-Tabs.spectrum-Tabs--compact.spectrum-Tabs--sizeL`, `.spectrum-Tabs.spectrum-Tabs--compact.spectrum-Tabs--sizeXL`.
Used by `.spectrum-Tabs-itemLabel`.
Defaults to `var(--spectrum-tabs-bottom-to-text)`, if not set.", + "control": "text", + "category": "Modifier" + }, + "mod-tabs-bottom-to-text-compact": { + "value": "12px", + "description": "Used by `--mod-tabs-bottom-to-text`.
Defaults to `var(--spectrum-tab-item-top-to-text-compact-extra-large)`, if not set.", + "control": "text", + "category": "Modifier" + }, + "mod-tabs-top-to-icon": { + "value": "var(--spectrum-tabs-top-to-icon)", + "description": "Defined in `.spectrum-Tabs.spectrum-Tabs--compact`, `.spectrum-Tabs.spectrum-Tabs--compact.spectrum-Tabs--sizeS`, `.spectrum-Tabs.spectrum-Tabs--compact.spectrum-Tabs--sizeL`, `.spectrum-Tabs.spectrum-Tabs--compact.spectrum-Tabs--sizeXL`.
Used by `.spectrum-Tabs-item .spectrum-Icon`.
Defaults to `var(--spectrum-tabs-top-to-icon)`, if not set.", + "control": "text", + "category": "Modifier" + }, + "mod-tabs-top-to-icon-compact": { + "value": "11px", + "description": "Used by `--mod-tabs-top-to-icon`.
Defaults to `var(--spectrum-tab-item-top-to-workflow-icon-compact-extra-large)`, if not set.", + "control": "text", + "category": "Modifier" + }, + "mod-tabs-divider-background-color": { + "value": "var(--spectrum-tabs-divider-background-color)", + "description": "Used by `.spectrum-Tabs`, `.spectrum-Tabs.spectrum-Tabs--quiet`.
Defaults to `var(--spectrum-tabs-divider-background-color)`, if not set.", + "control": "color", + "category": "Modifier" + }, + "mod-tabs-divider-size": { + "value": "var(--spectrum-tabs-divider-size)", + "description": "Used by `.spectrum-Tabs`, `.spectrum-Tabs-item`, `.spectrum-Tabs--horizontal .spectrum-Tabs-selectionIndicator`, `.spectrum-Tabs--vertical .spectrum-Tabs-selectionIndicator, .spectrum-Tabs--vertical-right .spectrum-Tabs-selectionIndicator`, `.spectrum-Tabs.spectrum-Tabs--quiet`.
Defaults to `var(--spectrum-tabs-divider-size)`, if not set.", + "control": "text", + "category": "Modifier" + }, + "mod-tabs-color": { + "value": "var(--spectrum-tabs-color)", + "description": "Used by `.spectrum-Tabs-item`.
Defaults to `var(--spectrum-tabs-color)`, if not set.", + "control": "color", + "category": "Modifier" + }, + "mod-tabs-animation-duration": { + "value": "var(--spectrum-tabs-animation-duration)", + "description": "Used by `.spectrum-Tabs-item`, `.spectrum-Tabs-selectionIndicator`.
Defaults to `var(--spectrum-tabs-animation-duration)`, if not set.", + "control": "text", + "category": "Modifier" + }, + "mod-tabs-icon-size": { + "value": "var(--spectrum-tabs-icon-size)", + "description": "Used by `.spectrum-Tabs-item .spectrum-Icon`.
Defaults to `var(--spectrum-tabs-icon-size)`, if not set.", + "control": "text", + "category": "Modifier" + }, + "mod-tabs-icon-to-text": { + "value": "var(--spectrum-tabs-icon-to-text)", + "description": "Used by `.spectrum-Tabs-item .spectrum-Icon + .spectrum-Tabs-itemLabel`.
Defaults to `var(--spectrum-tabs-icon-to-text)`, if not set.", + "control": "text", + "category": "Modifier" + }, + "mod-tabs-focus-indicator-gap": { + "value": "var(--spectrum-tabs-focus-indicator-gap)", + "description": "Used by `.spectrum-Tabs-item:before`, `.spectrum-Tabs--vertical .spectrum-Tabs-item:before, .spectrum-Tabs--vertical-right .spectrum-Tabs-item:before`.
Defaults to `var(--spectrum-tabs-focus-indicator-gap)`, if not set.", + "control": "text", + "category": "Modifier" + }, + "mod-tabs-focus-indicator-width": { + "value": "var(--spectrum-tabs-focus-indicator-width)", + "description": "Used by `.spectrum-Tabs-item:before`.
Defaults to `var(--spectrum-tabs-focus-indicator-width)`, if not set.", + "control": "text", + "category": "Modifier" + }, + "mod-tabs-focus-indicator-border-radius": { + "value": "var(--spectrum-tabs-focus-indicator-border-radius)", + "description": "Used by `.spectrum-Tabs-item:before`.
Defaults to `var(--spectrum-tabs-focus-indicator-border-radius)`, if not set.", + "control": "text", + "category": "Modifier" + }, + "mod-tabs-color-disabled": { + "value": "var(--spectrum-tabs-color-disabled)", + "description": "Used by `.spectrum-Tabs-item.is-disabled`.
Defaults to `var(--spectrum-tabs-color-disabled)`, if not set.", + "control": "color", + "category": "Modifier" + }, + "mod-tabs-focus-indicator-color": { + "value": "var(--spectrum-tabs-focus-indicator-color)", + "description": "Used by `.spectrum-Tabs-item:focus-visible:before`.
Defaults to `var(--spectrum-tabs-focus-indicator-color)`, if not set.", + "control": "color", + "category": "Modifier" + }, + "mod-tabs-font-family": { + "value": "var(--spectrum-tabs-font-family)", + "description": "Used by `.spectrum-Tabs-itemLabel`.
Defaults to `var(--spectrum-tabs-font-family)`, if not set.", + "control": "text", + "category": "Modifier" + }, + "mod-tabs-font-style": { + "value": "var(--spectrum-tabs-font-style)", + "description": "Used by `.spectrum-Tabs-itemLabel`.
Defaults to `var(--spectrum-tabs-font-style)`, if not set.", + "control": "text", + "category": "Modifier" + }, + "mod-tabs-font-size": { + "value": "var(--spectrum-tabs-font-size)", + "description": "Used by `.spectrum-Tabs-itemLabel`.
Defaults to `var(--spectrum-tabs-font-size)`, if not set.", + "control": "text", + "category": "Modifier" + }, + "mod-tabs-font-weight": { + "value": "var(--spectrum-tabs-font-weight)", + "description": "Used by `.spectrum-Tabs-itemLabel`.
Defaults to `var(--spectrum-tabs-font-weight)`, if not set.", + "control": "text", + "category": "Modifier" + }, + "mod-tabs-line-height": { + "value": "var(--spectrum-tabs-line-height)", + "description": "Used by `.spectrum-Tabs-itemLabel`.
Defaults to `var(--spectrum-tabs-line-height)`, if not set.", + "control": "text", + "category": "Modifier" + }, + "mod-tabs-animation-ease": { + "value": "var(--spectrum-tabs-animation-ease)", + "description": "Used by `.spectrum-Tabs-selectionIndicator`.
Defaults to `var(--spectrum-tabs-animation-ease)`, if not set.", + "control": "text", + "category": "Modifier" + }, + "mod-tabs-divider-border-radius": { + "value": "var(--spectrum-tabs-divider-border-radius)", + "description": "Used by `.spectrum-Tabs-selectionIndicator`.
Defaults to `var(--spectrum-tabs-divider-border-radius)`, if not set.", + "control": "text", + "category": "Modifier" + }, + "mod-tabs-item-horizontal-spacing": { + "value": "var(--spectrum-tabs-item-horizontal-spacing)", + "description": "Used by `.spectrum-Tabs--horizontal .spectrum-Tabs-item + :not(.spectrum-Tabs-selectionIndicator)`.
Defaults to `var(--spectrum-tabs-item-horizontal-spacing)`, if not set.", + "control": "text", + "category": "Modifier" + }, + "mod-tabs-start-to-item-quiet": { + "description": "Used by `.spectrum-Tabs--quiet .spectrum-Tabs-selectionIndicator`.", + "control": "text", + "category": "Modifier" + }, + "mod-tabs-item-vertical-spacing": { + "value": "var(--spectrum-tabs-item-vertical-spacing)", + "description": "Used by `.spectrum-Tabs--vertical .spectrum-Tabs-item, .spectrum-Tabs--vertical-right .spectrum-Tabs-item`.
Defaults to `var(--spectrum-tabs-item-vertical-spacing)`, if not set.", + "control": "text", + "category": "Modifier" + }, + "mod-tabs-start-to-edge": { + "value": "var(--spectrum-tabs-start-to-edge)", + "description": "Used by `.spectrum-Tabs--vertical .spectrum-Tabs-item, .spectrum-Tabs--vertical-right .spectrum-Tabs-item`.
Defaults to `var(--spectrum-tabs-start-to-edge)`, if not set.", + "control": "text", + "category": "Modifier" + } + }, + "component": { + "spectrum-tabs-item-height": { + "description": "Defined in `.spectrum-Tabs`, `.spectrum-Tabs.spectrum-Tabs--sizeS`, `.spectrum-Tabs.spectrum-Tabs--sizeL`, `.spectrum-Tabs.spectrum-Tabs--sizeXL`.
Used by `.spectrum-Tabs-item`, `.spectrum-Tabs--vertical .spectrum-Tabs-item, .spectrum-Tabs--vertical-right .spectrum-Tabs-item`, `.spectrum-Tabs--vertical .spectrum-Icon, .spectrum-Tabs--vertical-right .spectrum-Icon`.", + "control": "text", + "category": "Component" + }, + "spectrum-tabs-item-horizontal-spacing": { + "description": "Defined in `.spectrum-Tabs`, `.spectrum-Tabs.spectrum-Tabs--sizeS`, `.spectrum-Tabs.spectrum-Tabs--sizeL`, `.spectrum-Tabs.spectrum-Tabs--sizeXL`.
Used by `.spectrum-Tabs--horizontal .spectrum-Tabs-item + :not(.spectrum-Tabs-selectionIndicator)`.", + "control": "text", + "category": "Component" + }, + "spectrum-tabs-item-vertical-spacing": { + "description": "Defined in `.spectrum-Tabs`, `.spectrum-Tabs.spectrum-Tabs--sizeS`, `.spectrum-Tabs.spectrum-Tabs--sizeL`, `.spectrum-Tabs.spectrum-Tabs--sizeXL`.
Used by `.spectrum-Tabs--vertical .spectrum-Tabs-item, .spectrum-Tabs--vertical-right .spectrum-Tabs-item`.", + "control": "text", + "category": "Component" + }, + "spectrum-tabs-start-to-edge": { + "description": "Defined in `.spectrum-Tabs`, `.spectrum-Tabs.spectrum-Tabs--sizeS`, `.spectrum-Tabs.spectrum-Tabs--sizeL`, `.spectrum-Tabs.spectrum-Tabs--sizeXL`.
Used by `.spectrum-Tabs--vertical .spectrum-Tabs-item, .spectrum-Tabs--vertical-right .spectrum-Tabs-item`.", + "control": "text", + "category": "Component" + }, + "spectrum-tabs-top-to-text": { + "description": "Defined in `.spectrum-Tabs`, `.spectrum-Tabs.spectrum-Tabs--sizeS`, `.spectrum-Tabs.spectrum-Tabs--sizeL`, `.spectrum-Tabs.spectrum-Tabs--sizeXL`.
Used by `.spectrum-Tabs-item:before`, `.spectrum-Tabs-itemLabel`.", + "control": "text", + "category": "Component" + }, + "spectrum-tabs-bottom-to-text": { + "description": "Defined in `.spectrum-Tabs`, `.spectrum-Tabs.spectrum-Tabs--sizeS`, `.spectrum-Tabs.spectrum-Tabs--sizeL`, `.spectrum-Tabs.spectrum-Tabs--sizeXL`.
Used by `.spectrum-Tabs-itemLabel`.", + "control": "text", + "category": "Component" + }, + "spectrum-tabs-icon-size": { + "description": "Defined in `.spectrum-Tabs`, `.spectrum-Tabs.spectrum-Tabs--sizeS`, `.spectrum-Tabs.spectrum-Tabs--sizeL`, `.spectrum-Tabs.spectrum-Tabs--sizeXL`.
Used by `.spectrum-Tabs-item .spectrum-Icon`.", + "control": "text", + "category": "Component" + }, + "spectrum-tabs-icon-to-text": { + "description": "Defined in `.spectrum-Tabs`, `.spectrum-Tabs.spectrum-Tabs--sizeS`, `.spectrum-Tabs.spectrum-Tabs--sizeL`, `.spectrum-Tabs.spectrum-Tabs--sizeXL`.
Used by `.spectrum-Tabs-item .spectrum-Icon + .spectrum-Tabs-itemLabel`.", + "control": "text", + "category": "Component" + }, + "spectrum-tabs-top-to-icon": { + "description": "Defined in `.spectrum-Tabs`, `.spectrum-Tabs.spectrum-Tabs--sizeS`, `.spectrum-Tabs.spectrum-Tabs--sizeL`, `.spectrum-Tabs.spectrum-Tabs--sizeXL`.
Used by `.spectrum-Tabs-item .spectrum-Icon`.", + "control": "text", + "category": "Component" + }, + "spectrum-tabs-color": { + "description": "Defined in `.spectrum-Tabs`.
Used by `.spectrum-Tabs-item`.", + "control": "color", + "category": "Component" + }, + "spectrum-tabs-color-selected": { + "description": "Defined in `.spectrum-Tabs`.
Used by `.spectrum-Tabs-item.is-selected`.", + "control": "color", + "category": "Component" + }, + "spectrum-tabs-color-hover": { + "description": "Defined in `.spectrum-Tabs`.
Used by `.spectrum-Tabs-item:hover`.", + "control": "color", + "category": "Component" + }, + "spectrum-tabs-color-key-focus": { + "description": "Defined in `.spectrum-Tabs`.
Used by `.spectrum-Tabs-item:focus-visible`.", + "control": "color", + "category": "Component" + }, + "spectrum-tabs-color-disabled": { + "description": "Defined in `.spectrum-Tabs`.
Used by `.spectrum-Tabs-item.is-disabled`.", + "control": "color", + "category": "Component" + }, + "spectrum-tabs-font-family": { + "description": "Defined in `.spectrum-Tabs`.
Used by `.spectrum-Tabs-itemLabel`.", + "control": "text", + "category": "Component" + }, + "spectrum-tabs-font-style": { + "description": "Defined in `.spectrum-Tabs`.
Used by `.spectrum-Tabs-itemLabel`.", + "control": "text", + "category": "Component" + }, + "spectrum-tabs-font-size": { + "description": "Defined in `.spectrum-Tabs`, `.spectrum-Tabs.spectrum-Tabs--sizeS`, `.spectrum-Tabs.spectrum-Tabs--sizeL`, `.spectrum-Tabs.spectrum-Tabs--sizeXL`.
Used by `.spectrum-Tabs-itemLabel`.", + "control": "text", + "category": "Component" + }, + "spectrum-tabs-line-height": { + "description": "Defined in `.spectrum-Tabs`.
Used by `.spectrum-Tabs-itemLabel`.", + "control": "text", + "category": "Component" + }, + "spectrum-tabs-focus-indicator-width": { + "description": "Defined in `.spectrum-Tabs`.
Used by `.spectrum-Tabs-item:before`.", + "control": "text", + "category": "Component" + }, + "spectrum-tabs-focus-indicator-border-radius": { + "description": "Defined in `.spectrum-Tabs`.
Used by `.spectrum-Tabs-item:before`.", + "control": "text", + "category": "Component" + }, + "spectrum-tabs-focus-indicator-gap": { + "description": "Defined in `.spectrum-Tabs`, `.spectrum-Tabs.spectrum-Tabs--sizeS`, `.spectrum-Tabs.spectrum-Tabs--sizeL`, `.spectrum-Tabs.spectrum-Tabs--sizeXL`.
Used by `.spectrum-Tabs-item:before`, `.spectrum-Tabs--vertical .spectrum-Tabs-item:before, .spectrum-Tabs--vertical-right .spectrum-Tabs-item:before`.", + "control": "text", + "category": "Component" + }, + "spectrum-tabs-focus-indicator-color": { + "description": "Defined in `.spectrum-Tabs`.
Used by `.spectrum-Tabs-item:focus-visible:before`.", + "control": "color", + "category": "Component" + }, + "spectrum-tabs-selection-indicator-color": { + "description": "Defined in `.spectrum-Tabs`.
Used by `.spectrum-Tabs-selectionIndicator`.", + "control": "color", + "category": "Component" + }, + "spectrum-tabs-list-background-direction": { + "description": "Defined in `.spectrum-Tabs`.
Used by `.spectrum-Tabs`, `.spectrum-Tabs.spectrum-Tabs--quiet`.", + "control": "text", + "category": "Component" + }, + "spectrum-tabs-divider-size": { + "description": "Defined in `.spectrum-Tabs`.
Used by `.spectrum-Tabs`, `.spectrum-Tabs-item`, `.spectrum-Tabs--horizontal .spectrum-Tabs-selectionIndicator`, `.spectrum-Tabs--vertical .spectrum-Tabs-selectionIndicator, .spectrum-Tabs--vertical-right .spectrum-Tabs-selectionIndicator`, `.spectrum-Tabs.spectrum-Tabs--quiet`.", + "control": "text", + "category": "Component" + }, + "spectrum-tabs-divider-border-radius": { + "description": "Defined in `.spectrum-Tabs`.
Used by `.spectrum-Tabs-selectionIndicator`.", + "control": "text", + "category": "Component" + }, + "spectrum-tabs-animation-duration": { + "description": "Defined in `.spectrum-Tabs`.
Used by `.spectrum-Tabs-item`, `.spectrum-Tabs-selectionIndicator`.", + "control": "text", + "category": "Component" + }, + "spectrum-tabs-animation-ease": { + "description": "Defined in `.spectrum-Tabs`.
Used by `.spectrum-Tabs-selectionIndicator`.", + "control": "text", + "category": "Component" + }, + "spectrum-tabs-divider-background-color": { + "description": "Defined in `.spectrum-Tabs`.
Used by `.spectrum-Tabs`, `.spectrum-Tabs.spectrum-Tabs--quiet`.", + "control": "color", + "category": "Component" + }, + "spectrum-tabs-font-weight": { + "description": "Defined in `.spectrum-Tabs`.
Used by `.spectrum-Tabs-itemLabel`.", + "control": "text", + "category": "Component" + } + }, + "global": { + "spectrum-regular-font-weight": { + "value": "400", + "description": "Used by `--system-tabs-font-weight`.", + "control": "text", + "category": "Global" + }, + "spectrum-gray-200": { + "value": "light-dark(rgb(225, 225, 225), rgb(50, 50, 50))", + "description": "Used by `--system-tabs-divider-background-color`.", + "control": "text", + "category": "Global" + }, + "spectrum-tab-item-height-medium": { + "value": "var(--spectrum-component-height-300)", + "description": "Used by `--spectrum-tabs-item-height`.", + "control": "text", + "category": "Global" + }, + "spectrum-tab-item-to-tab-item-horizontal-medium": { + "value": "24px", + "description": "Used by `--spectrum-tabs-item-horizontal-spacing`.", + "control": "text", + "category": "Global" + }, + "spectrum-tab-item-to-tab-item-vertical-medium": { + "value": "4px", + "description": "Used by `--spectrum-tabs-item-vertical-spacing`.", + "control": "text", + "category": "Global" + }, + "spectrum-tab-item-start-to-edge-medium": { + "value": "12px", + "description": "Used by `--spectrum-tabs-start-to-edge`.", + "control": "text", + "category": "Global" + }, + "spectrum-tab-item-top-to-text-medium": { + "value": "14px", + "description": "Used by `--spectrum-tabs-top-to-text`.", + "control": "text", + "category": "Global" + }, + "spectrum-tab-item-bottom-to-text-medium": { + "value": "14px", + "description": "Used by `--spectrum-tabs-bottom-to-text`.", + "control": "text", + "category": "Global" + }, + "spectrum-workflow-icon-size-75": { + "value": "16px", + "description": "Used by `--spectrum-tabs-icon-size`.", + "control": "text", + "category": "Global" + }, + "spectrum-text-to-visual-100": { + "value": "6px", + "description": "Used by `--spectrum-tabs-icon-to-text`.", + "control": "text", + "category": "Global" + }, + "spectrum-tab-item-top-to-workflow-icon-medium": { + "value": "15px", + "description": "Used by `--spectrum-tabs-top-to-icon`.", + "control": "text", + "category": "Global" + }, + "spectrum-neutral-subdued-content-color-default": { + "value": "var(--spectrum-gray-700)", + "description": "Used by `--spectrum-tabs-color`.", + "control": "color", + "category": "Global" + }, + "spectrum-neutral-subdued-content-color-down": { + "value": "var(--spectrum-gray-800)", + "description": "Used by `--spectrum-tabs-color-selected`, `--spectrum-tabs-selection-indicator-color`.", + "control": "color", + "category": "Global" + }, + "spectrum-neutral-subdued-content-color-hover": { + "value": "var(--spectrum-gray-800)", + "description": "Used by `--spectrum-tabs-color-hover`.", + "control": "color", + "category": "Global" + }, + "spectrum-neutral-subdued-content-color-key-focus": { + "value": "var(--spectrum-gray-800)", + "description": "Used by `--spectrum-tabs-color-key-focus`.", + "control": "color", + "category": "Global" + }, + "spectrum-gray-500": { + "value": "light-dark(rgb(143, 143, 143), rgb(109, 109, 109))", + "description": "Used by `--spectrum-tabs-color-disabled`, `--highcontrast-tabs-divider-background-color`.", + "control": "text", + "category": "Global" + }, + "spectrum-sans-font-family-stack": { + "description": "Used by `--spectrum-tabs-font-family`.", + "control": "text", + "category": "Global" + }, + "spectrum-default-font-style": { + "value": "normal", + "description": "Used by `--spectrum-tabs-font-style`.", + "control": "text", + "category": "Global" + }, + "spectrum-font-size-100": { + "value": "14px", + "description": "Used by `--spectrum-tabs-font-size`.", + "control": "text", + "category": "Global" + }, + "spectrum-line-height-100": { + "value": "1.3", + "description": "Used by `--spectrum-tabs-line-height`.", + "control": "text", + "category": "Global" + }, + "spectrum-focus-indicator-thickness": { + "value": "2px", + "description": "Used by `--spectrum-tabs-focus-indicator-width`.", + "control": "text", + "category": "Global" + }, + "spectrum-corner-radius-100": { + "value": "8px", + "description": "Used by `--spectrum-tabs-focus-indicator-border-radius`.", + "control": "text", + "category": "Global" + }, + "spectrum-tab-item-focus-indicator-gap-medium": { + "value": "8px", + "description": "Used by `--spectrum-tabs-focus-indicator-gap`.", + "control": "text", + "category": "Global" + }, + "spectrum-focus-indicator-color": { + "value": "var(--spectrum-blue-800)", + "description": "Used by `--spectrum-tabs-focus-indicator-color`.", + "control": "color", + "category": "Global" + }, + "spectrum-border-width-200": { + "value": "2px", + "description": "Used by `--spectrum-tabs-divider-size`.", + "control": "text", + "category": "Global" + }, + "spectrum-animation-duration-100": { + "description": "Used by `--spectrum-tabs-animation-duration`.", + "control": "text", + "category": "Global" + }, + "spectrum-animation-ease-in-out": { + "description": "Used by `--spectrum-tabs-animation-ease`.", + "control": "text", + "category": "Global" + }, + "spectrum-tab-item-height-small": { + "value": "var(--spectrum-component-height-200)", + "description": "Used by `--spectrum-tabs-item-height`.", + "control": "text", + "category": "Global" + }, + "spectrum-tab-item-to-tab-item-horizontal-small": { + "value": "21px", + "description": "Used by `--spectrum-tabs-item-horizontal-spacing`.", + "control": "text", + "category": "Global" + }, + "spectrum-tab-item-to-tab-item-vertical-small": { + "value": "4px", + "description": "Used by `--spectrum-tabs-item-vertical-spacing`.", + "control": "text", + "category": "Global" + }, + "spectrum-tab-item-start-to-edge-small": { + "value": "12px", + "description": "Used by `--spectrum-tabs-start-to-edge`.", + "control": "text", + "category": "Global" + }, + "spectrum-tab-item-top-to-text-small": { + "value": "11px", + "description": "Used by `--spectrum-tabs-top-to-text`.", + "control": "text", + "category": "Global" + }, + "spectrum-tab-item-bottom-to-text-small": { + "value": "12px", + "description": "Used by `--spectrum-tabs-bottom-to-text`.", + "control": "text", + "category": "Global" + }, + "spectrum-workflow-icon-size-50": { + "value": "14px", + "description": "Used by `--spectrum-tabs-icon-size`.", + "control": "text", + "category": "Global" + }, + "spectrum-text-to-visual-75": { + "value": "5px", + "description": "Used by `--spectrum-tabs-icon-to-text`.", + "control": "text", + "category": "Global" + }, + "spectrum-tab-item-top-to-workflow-icon-small": { + "value": "13px", + "description": "Used by `--spectrum-tabs-top-to-icon`.", + "control": "text", + "category": "Global" + }, + "spectrum-tab-item-focus-indicator-gap-small": { + "value": "7px", + "description": "Used by `--spectrum-tabs-focus-indicator-gap`.", + "control": "text", + "category": "Global" + }, + "spectrum-font-size-75": { + "value": "12px", + "description": "Used by `--spectrum-tabs-font-size`.", + "control": "text", + "category": "Global" + }, + "spectrum-tab-item-height-large": { + "value": "var(--spectrum-component-height-400)", + "description": "Used by `--spectrum-tabs-item-height`.", + "control": "text", + "category": "Global" + }, + "spectrum-tab-item-to-tab-item-horizontal-large": { + "value": "27px", + "description": "Used by `--spectrum-tabs-item-horizontal-spacing`.", + "control": "text", + "category": "Global" + }, + "spectrum-tab-item-to-tab-item-vertical-large": { + "value": "5px", + "description": "Used by `--spectrum-tabs-item-vertical-spacing`.", + "control": "text", + "category": "Global" + }, + "spectrum-tab-item-start-to-edge-large": { + "value": "13px", + "description": "Used by `--spectrum-tabs-start-to-edge`.", + "control": "text", + "category": "Global" + }, + "spectrum-tab-item-top-to-text-large": { + "value": "16px", + "description": "Used by `--spectrum-tabs-top-to-text`.", + "control": "text", + "category": "Global" + }, + "spectrum-tab-item-bottom-to-text-large": { + "value": "18px", + "description": "Used by `--spectrum-tabs-bottom-to-text`.", + "control": "text", + "category": "Global" + }, + "spectrum-workflow-icon-size-100": { + "value": "20px", + "description": "Used by `--spectrum-tabs-icon-size`.", + "control": "text", + "category": "Global" + }, + "spectrum-text-to-visual-200": { + "value": "7px", + "description": "Used by `--spectrum-tabs-icon-to-text`.", + "control": "text", + "category": "Global" + }, + "spectrum-tab-item-top-to-workflow-icon-large": { + "value": "17px", + "description": "Used by `--spectrum-tabs-top-to-icon`.", + "control": "text", + "category": "Global" + }, + "spectrum-tab-item-focus-indicator-gap-large": { + "value": "9px", + "description": "Used by `--spectrum-tabs-focus-indicator-gap`.", + "control": "text", + "category": "Global" + }, + "spectrum-font-size-200": { + "value": "16px", + "description": "Used by `--spectrum-tabs-font-size`.", + "control": "text", + "category": "Global" + }, + "spectrum-tab-item-height-extra-large": { + "value": "var(--spectrum-component-height-500)", + "description": "Used by `--spectrum-tabs-item-height`.", + "control": "text", + "category": "Global" + }, + "spectrum-tab-item-to-tab-item-horizontal-extra-large": { + "value": "30px", + "description": "Used by `--spectrum-tabs-item-horizontal-spacing`.", + "control": "text", + "category": "Global" + }, + "spectrum-tab-item-to-tab-item-vertical-extra-large": { + "value": "5px", + "description": "Used by `--spectrum-tabs-item-vertical-spacing`.", + "control": "text", + "category": "Global" + }, + "spectrum-tab-item-start-to-edge-extra-large": { + "value": "13px", + "description": "Used by `--spectrum-tabs-start-to-edge`.", + "control": "text", + "category": "Global" + }, + "spectrum-tab-item-top-to-text-extra-large": { + "value": "19px", + "description": "Used by `--spectrum-tabs-top-to-text`.", + "control": "text", + "category": "Global" + }, + "spectrum-tab-item-bottom-to-text-extra-large": { + "value": "20px", + "description": "Used by `--spectrum-tabs-bottom-to-text`.", + "control": "text", + "category": "Global" + }, + "spectrum-workflow-icon-size-200": { + "value": "22px", + "description": "Used by `--spectrum-tabs-icon-size`.", + "control": "text", + "category": "Global" + }, + "spectrum-text-to-visual-300": { + "value": "8px", + "description": "Used by `--spectrum-tabs-icon-to-text`.", + "control": "text", + "category": "Global" + }, + "spectrum-tab-item-top-to-workflow-icon-extra-large": { + "value": "19px", + "description": "Used by `--spectrum-tabs-top-to-icon`.", + "control": "text", + "category": "Global" + }, + "spectrum-tab-item-focus-indicator-gap-extra-large": { + "value": "10px", + "description": "Used by `--spectrum-tabs-focus-indicator-gap`.", + "control": "text", + "category": "Global" + }, + "spectrum-font-size-300": { + "value": "18px", + "description": "Used by `--spectrum-tabs-font-size`.", + "control": "text", + "category": "Global" + }, + "spectrum-accent-content-color-default": { + "value": "var(--spectrum-accent-color-900)", + "description": "Used by `--mod-tabs-color-selected`, `--mod-tabs-selection-indicator-color`.", + "control": "color", + "category": "Global" + }, + "spectrum-accent-content-color-hover": { + "value": "var(--spectrum-accent-color-1000)", + "description": "Used by `--mod-tabs-color-hover`.", + "control": "color", + "category": "Global" + }, + "spectrum-accent-content-color-key-focus": { + "value": "var(--spectrum-accent-color-1000)", + "description": "Used by `--mod-tabs-color-key-focus`.", + "control": "color", + "category": "Global" + }, + "spectrum-tab-item-compact-height-medium": { + "value": "var(--spectrum-component-height-100)", + "description": "Used by `--mod-tabs-item-height`.", + "control": "text", + "category": "Global" + }, + "spectrum-tab-item-top-to-text-compact-medium": { + "value": "6px", + "description": "Used by `--mod-tabs-top-to-text`, `--mod-tabs-bottom-to-text`.", + "control": "text", + "category": "Global" + }, + "spectrum-tab-item-top-to-workflow-icon-compact-medium": { + "value": "7px", + "description": "Used by `--mod-tabs-top-to-icon`.", + "control": "text", + "category": "Global" + }, + "spectrum-tab-item-compact-height-small": { + "value": "var(--spectrum-component-height-75)", + "description": "Used by `--mod-tabs-item-height`.", + "control": "text", + "category": "Global" + }, + "spectrum-tab-item-top-to-text-compact-small": { + "value": "4px", + "description": "Used by `--mod-tabs-top-to-text`, `--mod-tabs-bottom-to-text`.", + "control": "text", + "category": "Global" + }, + "spectrum-tab-item-top-to-workflow-icon-compact-small": { + "value": "3px", + "description": "Used by `--mod-tabs-top-to-icon`.", + "control": "text", + "category": "Global" + }, + "spectrum-tab-item-compact-height-large": { + "value": "var(--spectrum-component-height-200)", + "description": "Used by `--mod-tabs-item-height`.", + "control": "text", + "category": "Global" + }, + "spectrum-tab-item-top-to-text-compact-large": { + "value": "10px", + "description": "Used by `--mod-tabs-top-to-text`, `--mod-tabs-bottom-to-text`.", + "control": "text", + "category": "Global" + }, + "spectrum-tab-item-top-to-workflow-icon-compact-large": { + "value": "9px", + "description": "Used by `--mod-tabs-top-to-icon`.", + "control": "text", + "category": "Global" + }, + "spectrum-tab-item-compact-height-extra-large": { + "value": "var(--spectrum-component-height-300)", + "description": "Used by `--mod-tabs-item-height`.", + "control": "text", + "category": "Global" + }, + "spectrum-tab-item-top-to-text-compact-extra-large": { + "value": "12px", + "description": "Used by `--mod-tabs-top-to-text`, `--mod-tabs-bottom-to-text`.", + "control": "text", + "category": "Global" + }, + "spectrum-tab-item-top-to-workflow-icon-compact-extra-large": { + "value": "11px", + "description": "Used by `--mod-tabs-top-to-icon`.", + "control": "text", + "category": "Global" + } + }, + "system-theme": { + "system-tabs-font-weight": { + "description": "Defined in `.spectrum`.
Used by `--spectrum-tabs-font-weight`.", + "control": "text" + }, + "system-tabs-divider-background-color": { + "description": "Defined in `.spectrum`.
Used by `--spectrum-tabs-divider-background-color`.", + "control": "color" + } + }, + "passthroughs": {}, + "high-contrast": { + "highcontrast-tabs-divider-background-color": { + "value": "var(--mod-tabs-divider-background-color, var(--spectrum-tabs-divider-background-color))", + "description": "Defined in `.spectrum-Tabs`.
Used by `.spectrum-Tabs`, `.spectrum-Tabs.spectrum-Tabs--quiet`.
Defaults to `var(--mod-tabs-divider-background-color, var(--spectrum-tabs-divider-background-color))`, if not set.", + "control": "color" + }, + "highcontrast-tabs-color": { + "value": "var(--mod-tabs-color, var(--spectrum-tabs-color))", + "description": "Defined in `.spectrum-Tabs`.
Used by `.spectrum-Tabs-item`.
Defaults to `var(--mod-tabs-color, var(--spectrum-tabs-color))`, if not set.", + "control": "color" + }, + "highcontrast-tabs-color-hover": { + "value": "var(--mod-tabs-color-hover, var(--spectrum-tabs-color-hover))", + "description": "Defined in `.spectrum-Tabs`.
Used by `.spectrum-Tabs-item:hover`.
Defaults to `var(--mod-tabs-color-hover, var(--spectrum-tabs-color-hover))`, if not set.", + "control": "color" + }, + "highcontrast-tabs-color-selected": { + "value": "var(--mod-tabs-color-selected, var(--spectrum-tabs-color-selected))", + "description": "Defined in `.spectrum-Tabs`.
Used by `.spectrum-Tabs-item.is-selected`, `.spectrum-Tabs .is-selected:focus, .spectrum-Tabs .is-selected:focus-visible`.
Defaults to `var(--mod-tabs-color-selected, var(--spectrum-tabs-color-selected))`, if not set.", + "control": "color" + }, + "highcontrast-tabs-color-disabled": { + "value": "var(--mod-tabs-color-disabled, var(--spectrum-tabs-color-disabled))", + "description": "Defined in `.spectrum-Tabs`.
Used by `.spectrum-Tabs-item.is-disabled`.
Defaults to `var(--mod-tabs-color-disabled, var(--spectrum-tabs-color-disabled))`, if not set.", + "control": "color" + }, + "highcontrast-tabs-color-key-focus": { + "value": "var(--mod-tabs-color-key-focus, var(--spectrum-tabs-color-key-focus))", + "description": "Defined in `.spectrum-Tabs`.
Used by `.spectrum-Tabs-item:focus-visible`.
Defaults to `var(--mod-tabs-color-key-focus, var(--spectrum-tabs-color-key-focus))`, if not set.", + "control": "color" + }, + "highcontrast-tabs-focus-indicator-color": { + "value": "var(--mod-tabs-focus-indicator-color, var(--spectrum-tabs-focus-indicator-color))", + "description": "Defined in `.spectrum-Tabs`.
Used by `.spectrum-Tabs-item:focus-visible:before`.
Defaults to `var(--mod-tabs-focus-indicator-color, var(--spectrum-tabs-focus-indicator-color))`, if not set.", + "control": "color" + }, + "highcontrast-tabs-selection-indicator-color": { + "value": "var(--mod-tabs-selection-indicator-color, var(--spectrum-tabs-selection-indicator-color))", + "description": "Defined in `.spectrum-Tabs`.
Used by `.spectrum-Tabs-selectionIndicator`.
Defaults to `var(--mod-tabs-selection-indicator-color, var(--spectrum-tabs-selection-indicator-color))`, if not set.", + "control": "color" + }, + "highcontrast-tabs-focus-indicator-background-color": { + "description": "Defined in `.spectrum-Tabs`.
Used by `.spectrum-Tabs .is-selected:before`.", + "control": "color" + } + } } diff --git a/components/tabs/stories/tabs.stories.js b/components/tabs/stories/tabs.stories.js index 1b26856e13f..c57a8f23a3e 100644 --- a/components/tabs/stories/tabs.stories.js +++ b/components/tabs/stories/tabs.stories.js @@ -1,11 +1,13 @@ import { Sizes } from "@spectrum-css/preview/decorators"; import { disableDefaultModes } from "@spectrum-css/preview/modes"; import { isEmphasized, isQuiet, size } from "@spectrum-css/preview/types"; -import metadata from "../dist/metadata.json"; -import packageJson from "../package.json"; import { TabsGroups } from "./tabs.test.js"; import { CompactGroup, OverflowGroup, QuietGroup, Template, VerticalGroup } from "./template.js"; +// Local assets to render the component styles and structure +import metadata from "../dist/metadata.json"; +import packageJson from "../package.json"; + /** * Tabs organize content into multiple sections and allow users to navigate between them. The content under the set of tabs should be related and form a coherent unit. Tabs can be either horizontal or vertical. * @@ -18,7 +20,6 @@ import { CompactGroup, OverflowGroup, QuietGroup, Template, VerticalGroup } from * Only one tab item can be selected at any given time. The selected tab item is designated by the `is-selected` class. A selection indicator line is shown under or next to the selected tab item. * */ - export default { title: "Tabs", component: "Tabs", @@ -119,6 +120,7 @@ export default { }, packageJson, metadata, + cssprops: metadata.modifiers, }, }; diff --git a/components/tag/dist/metadata.json b/components/tag/dist/metadata.json index 10a87e4aa2c..a7f31152861 100644 --- a/components/tag/dist/metadata.json +++ b/components/tag/dist/metadata.json @@ -10,366 +10,1758 @@ ".spectrum-Tag--sizeL", ".spectrum-Tag--sizeM", ".spectrum-Tag--sizeS", + ".spectrum-Tag:active", + ".spectrum-Tag:focus-visible", + ".spectrum-Tag:focus-visible:after", + ".spectrum-Tag:hover", ".spectrum-Tag.is-disabled", ".spectrum-Tag.is-disabled .spectrum-Avatar", ".spectrum-Tag.is-emphasized", - ".spectrum-Tag.is-emphasized.is-focused", ".spectrum-Tag.is-emphasized:active", ".spectrum-Tag.is-emphasized:focus-visible", ".spectrum-Tag.is-emphasized:hover", + ".spectrum-Tag.is-emphasized.is-focused", ".spectrum-Tag.is-focused", ".spectrum-Tag.is-focused:after", ".spectrum-Tag.is-invalid", + ".spectrum-Tag.is-invalid:active", + ".spectrum-Tag.is-invalid:focus-visible", + ".spectrum-Tag.is-invalid:hover", ".spectrum-Tag.is-invalid.is-focused", ".spectrum-Tag.is-invalid.is-selected", - ".spectrum-Tag.is-invalid.is-selected.is-focused", ".spectrum-Tag.is-invalid.is-selected:active", ".spectrum-Tag.is-invalid.is-selected:focus-visible", ".spectrum-Tag.is-invalid.is-selected:hover", - ".spectrum-Tag.is-invalid:active", - ".spectrum-Tag.is-invalid:focus-visible", - ".spectrum-Tag.is-invalid:hover", + ".spectrum-Tag.is-invalid.is-selected.is-focused", ".spectrum-Tag.is-selected", - ".spectrum-Tag.is-selected.is-focused", ".spectrum-Tag.is-selected:active", ".spectrum-Tag.is-selected:focus-visible", ".spectrum-Tag.is-selected:hover", - ".spectrum-Tag:active", - ".spectrum-Tag:focus-visible", - ".spectrum-Tag:focus-visible:after", - ".spectrum-Tag:hover" - ], - "modifiers": [ - "--mod-tag-animation-duration", - "--mod-tag-avatar-spacing-block-end", - "--mod-tag-avatar-spacing-block-start", - "--mod-tag-avatar-spacing-inline-end", - "--mod-tag-background-color", - "--mod-tag-background-color-active", - "--mod-tag-background-color-disabled", - "--mod-tag-background-color-emphasized", - "--mod-tag-background-color-emphasized-active", - "--mod-tag-background-color-emphasized-focus", - "--mod-tag-background-color-emphasized-hover", - "--mod-tag-background-color-focus", - "--mod-tag-background-color-hover", - "--mod-tag-background-color-invalid-selected", - "--mod-tag-background-color-invalid-selected-active", - "--mod-tag-background-color-invalid-selected-focus", - "--mod-tag-background-color-invalid-selected-hover", - "--mod-tag-background-color-selected", - "--mod-tag-background-color-selected-active", - "--mod-tag-background-color-selected-focus", - "--mod-tag-background-color-selected-hover", - "--mod-tag-border-color", - "--mod-tag-border-color-active", - "--mod-tag-border-color-disabled", - "--mod-tag-border-color-emphasized", - "--mod-tag-border-color-emphasized-active", - "--mod-tag-border-color-emphasized-focus", - "--mod-tag-border-color-emphasized-hover", - "--mod-tag-border-color-focus", - "--mod-tag-border-color-hover", - "--mod-tag-border-color-invalid", - "--mod-tag-border-color-invalid-active", - "--mod-tag-border-color-invalid-focus", - "--mod-tag-border-color-invalid-hover", - "--mod-tag-border-color-invalid-selected", - "--mod-tag-border-color-invalid-selected-active", - "--mod-tag-border-color-invalid-selected-focus", - "--mod-tag-border-color-invalid-selected-hover", - "--mod-tag-border-color-selected", - "--mod-tag-border-color-selected-active", - "--mod-tag-border-color-selected-focus", - "--mod-tag-border-color-selected-hover", - "--mod-tag-border-width", - "--mod-tag-clear-button-spacing-block", - "--mod-tag-clear-button-spacing-inline-end", - "--mod-tag-clear-button-spacing-inline-start", - "--mod-tag-content-color", - "--mod-tag-content-color-active", - "--mod-tag-content-color-disabled", - "--mod-tag-content-color-emphasized", - "--mod-tag-content-color-focus", - "--mod-tag-content-color-hover", - "--mod-tag-content-color-invalid", - "--mod-tag-content-color-invalid-active", - "--mod-tag-content-color-invalid-focus", - "--mod-tag-content-color-invalid-hover", - "--mod-tag-content-color-invalid-selected", - "--mod-tag-content-color-selected", - "--mod-tag-corner-radius", - "--mod-tag-focus-ring-color", - "--mod-tag-focus-ring-gap", - "--mod-tag-focus-ring-thickness", - "--mod-tag-font-size", - "--mod-tag-height", - "--mod-tag-icon-size", - "--mod-tag-icon-spacing-block-end", - "--mod-tag-icon-spacing-block-start", - "--mod-tag-icon-spacing-inline-end", - "--mod-tag-label-font-weight", - "--mod-tag-label-line-height", - "--mod-tag-label-spacing-block", - "--mod-tag-label-spacing-inline-end", - "--mod-tag-spacing-inline-start" - ], - "component": [ - "--spectrum-tag-animation-duration", - "--spectrum-tag-avatar-spacing-block-end", - "--spectrum-tag-avatar-spacing-block-start", - "--spectrum-tag-avatar-spacing-inline-end", - "--spectrum-tag-background-color", - "--spectrum-tag-background-color-active", - "--spectrum-tag-background-color-disabled", - "--spectrum-tag-background-color-emphasized", - "--spectrum-tag-background-color-emphasized-active", - "--spectrum-tag-background-color-emphasized-focus", - "--spectrum-tag-background-color-emphasized-hover", - "--spectrum-tag-background-color-focus", - "--spectrum-tag-background-color-hover", - "--spectrum-tag-background-color-invalid-selected", - "--spectrum-tag-background-color-invalid-selected-active", - "--spectrum-tag-background-color-invalid-selected-focus", - "--spectrum-tag-background-color-invalid-selected-hover", - "--spectrum-tag-background-color-selected", - "--spectrum-tag-background-color-selected-active", - "--spectrum-tag-background-color-selected-focus", - "--spectrum-tag-background-color-selected-hover", - "--spectrum-tag-border-color", - "--spectrum-tag-border-color-active", - "--spectrum-tag-border-color-disabled", - "--spectrum-tag-border-color-emphasized", - "--spectrum-tag-border-color-emphasized-active", - "--spectrum-tag-border-color-emphasized-focus", - "--spectrum-tag-border-color-emphasized-hover", - "--spectrum-tag-border-color-focus", - "--spectrum-tag-border-color-hover", - "--spectrum-tag-border-color-invalid", - "--spectrum-tag-border-color-invalid-active", - "--spectrum-tag-border-color-invalid-focus", - "--spectrum-tag-border-color-invalid-hover", - "--spectrum-tag-border-color-invalid-selected", - "--spectrum-tag-border-color-invalid-selected-active", - "--spectrum-tag-border-color-invalid-selected-focus", - "--spectrum-tag-border-color-invalid-selected-hover", - "--spectrum-tag-border-color-selected", - "--spectrum-tag-border-color-selected-active", - "--spectrum-tag-border-color-selected-focus", - "--spectrum-tag-border-color-selected-hover", - "--spectrum-tag-border-width", - "--spectrum-tag-clear-button-spacing-block", - "--spectrum-tag-clear-button-spacing-inline-end", - "--spectrum-tag-clear-button-spacing-inline-start", - "--spectrum-tag-content-color", - "--spectrum-tag-content-color-active", - "--spectrum-tag-content-color-disabled", - "--spectrum-tag-content-color-emphasized", - "--spectrum-tag-content-color-focus", - "--spectrum-tag-content-color-hover", - "--spectrum-tag-content-color-invalid", - "--spectrum-tag-content-color-invalid-active", - "--spectrum-tag-content-color-invalid-focus", - "--spectrum-tag-content-color-invalid-hover", - "--spectrum-tag-content-color-invalid-selected", - "--spectrum-tag-content-color-selected", - "--spectrum-tag-corner-radius", - "--spectrum-tag-focus-ring-color", - "--spectrum-tag-focus-ring-gap", - "--spectrum-tag-focus-ring-thickness", - "--spectrum-tag-font-size", - "--spectrum-tag-height", - "--spectrum-tag-icon-size", - "--spectrum-tag-icon-spacing-block-end", - "--spectrum-tag-icon-spacing-block-start", - "--spectrum-tag-icon-spacing-inline-end", - "--spectrum-tag-label-font-weight", - "--spectrum-tag-label-line-height", - "--spectrum-tag-label-spacing-block", - "--spectrum-tag-label-spacing-inline-end", - "--spectrum-tag-size-large-clear-button-spacing-inline-end", - "--spectrum-tag-size-large-corner-radius", - "--spectrum-tag-size-large-label-spacing-inline-end", - "--spectrum-tag-size-large-spacing-inline-start", - "--spectrum-tag-size-medium-clear-button-spacing-inline-end", - "--spectrum-tag-size-medium-corner-radius", - "--spectrum-tag-size-medium-label-spacing-inline-end", - "--spectrum-tag-size-medium-spacing-inline-start", - "--spectrum-tag-size-small-clear-button-spacing-inline-end", - "--spectrum-tag-size-small-corner-radius", - "--spectrum-tag-size-small-label-spacing-inline-end", - "--spectrum-tag-size-small-spacing-inline-start", - "--spectrum-tag-spacing-inline-start", - "--spectrum-tag-top-to-avatar-large", - "--spectrum-tag-top-to-avatar-medium", - "--spectrum-tag-top-to-avatar-small", - "--spectrum-tag-top-to-cross-icon-large", - "--spectrum-tag-top-to-cross-icon-medium", - "--spectrum-tag-top-to-cross-icon-small" - ], - "global": [ - "--spectrum-accent-background-color-default", - "--spectrum-accent-background-color-down", - "--spectrum-accent-background-color-hover", - "--spectrum-accent-background-color-key-focus", - "--spectrum-animation-duration-100", - "--spectrum-avatar-opacity-disabled", - "--spectrum-border-width-100", - "--spectrum-clearbutton-fill-background-color", - "--spectrum-clearbutton-fill-size", - "--spectrum-component-edge-to-text-100", - "--spectrum-component-edge-to-text-200", - "--spectrum-component-edge-to-text-75", - "--spectrum-component-edge-to-visual-100", - "--spectrum-component-edge-to-visual-200", - "--spectrum-component-edge-to-visual-75", - "--spectrum-component-height-100", - "--spectrum-component-height-200", - "--spectrum-component-height-75", - "--spectrum-component-top-to-text-100", - "--spectrum-component-top-to-text-200", - "--spectrum-component-top-to-text-75", - "--spectrum-component-top-to-workflow-icon-100", - "--spectrum-component-top-to-workflow-icon-200", - "--spectrum-component-top-to-workflow-icon-75", - "--spectrum-corner-radius-100", - "--spectrum-disabled-background-color", - "--spectrum-disabled-content-color", - "--spectrum-focus-indicator-color", - "--spectrum-focus-indicator-gap", - "--spectrum-focus-indicator-thickness", - "--spectrum-font-size-100", - "--spectrum-font-size-200", - "--spectrum-font-size-75", - "--spectrum-gray-100", - "--spectrum-gray-25", - "--spectrum-gray-50", - "--spectrum-gray-700", - "--spectrum-gray-800", - "--spectrum-gray-900", - "--spectrum-line-height-100", - "--spectrum-negative-background-color-default", - "--spectrum-negative-background-color-down", - "--spectrum-negative-background-color-hover", - "--spectrum-negative-background-color-key-focus", - "--spectrum-negative-color-1000", - "--spectrum-negative-color-1100", - "--spectrum-negative-color-900", - "--spectrum-negative-content-color-default", - "--spectrum-negative-content-color-down", - "--spectrum-negative-content-color-hover", - "--spectrum-negative-content-color-key-focus", - "--spectrum-neutral-background-color-selected-default", - "--spectrum-neutral-background-color-selected-down", - "--spectrum-neutral-background-color-selected-hover", - "--spectrum-neutral-background-color-selected-key-focus", - "--spectrum-neutral-subdued-background-color-default", - "--spectrum-neutral-subdued-background-color-down", - "--spectrum-neutral-subdued-background-color-hover", - "--spectrum-neutral-subdued-background-color-key-focus", - "--spectrum-neutral-subdued-content-color-default", - "--spectrum-neutral-subdued-content-color-down", - "--spectrum-neutral-subdued-content-color-hover", - "--spectrum-neutral-subdued-content-color-key-focus", - "--spectrum-regular-font-weight", - "--spectrum-text-to-visual-100", - "--spectrum-text-to-visual-200", - "--spectrum-text-to-visual-75", - "--spectrum-white", - "--spectrum-workflow-icon-size-100", - "--spectrum-workflow-icon-size-200", - "--spectrum-workflow-icon-size-75" - ], - "system-theme": [ - "--system-tag-background-color", - "--system-tag-background-color-active", - "--system-tag-background-color-disabled", - "--system-tag-background-color-focus", - "--system-tag-background-color-hover", - "--system-tag-border-color", - "--system-tag-border-color-active", - "--system-tag-border-color-disabled", - "--system-tag-border-color-focus", - "--system-tag-border-color-hover", - "--system-tag-border-color-selected", - "--system-tag-border-color-selected-active", - "--system-tag-border-color-selected-focus", - "--system-tag-border-color-selected-hover", - "--system-tag-content-color", - "--system-tag-content-color-active", - "--system-tag-content-color-focus", - "--system-tag-content-color-hover", - "--system-tag-content-color-selected", - "--system-tag-size-large-clear-button-spacing-inline-end", - "--system-tag-size-large-corner-radius", - "--system-tag-size-large-label-spacing-inline-end", - "--system-tag-size-large-spacing-inline-start", - "--system-tag-size-medium-clear-button-spacing-inline-end", - "--system-tag-size-medium-corner-radius", - "--system-tag-size-medium-label-spacing-inline-end", - "--system-tag-size-medium-spacing-inline-start", - "--system-tag-size-small-clear-button-spacing-inline-end", - "--system-tag-size-small-corner-radius", - "--system-tag-size-small-label-spacing-inline-end", - "--system-tag-size-small-spacing-inline-start" - ], - "passthroughs": [ - "--mod-avatar-opacity-disabled", - "--mod-clear-button-width", - "--mod-clearbutton-fill-background-color", - "--mod-clearbutton-fill-size" + ".spectrum-Tag.is-selected.is-focused" ], - "high-contrast": [ - "--highcontrast-tag-background-color", - "--highcontrast-tag-background-color-active", - "--highcontrast-tag-background-color-disabled", - "--highcontrast-tag-background-color-emphasized", - "--highcontrast-tag-background-color-emphasized-active", - "--highcontrast-tag-background-color-emphasized-focus", - "--highcontrast-tag-background-color-emphasized-hover", - "--highcontrast-tag-background-color-focus", - "--highcontrast-tag-background-color-hover", - "--highcontrast-tag-background-color-invalid-selected", - "--highcontrast-tag-background-color-invalid-selected-active", - "--highcontrast-tag-background-color-invalid-selected-focus", - "--highcontrast-tag-background-color-invalid-selected-hover", - "--highcontrast-tag-background-color-selected", - "--highcontrast-tag-background-color-selected-active", - "--highcontrast-tag-background-color-selected-focus", - "--highcontrast-tag-background-color-selected-hover", - "--highcontrast-tag-border-color", - "--highcontrast-tag-border-color-active", - "--highcontrast-tag-border-color-disabled", - "--highcontrast-tag-border-color-emphasized", - "--highcontrast-tag-border-color-emphasized-active", - "--highcontrast-tag-border-color-emphasized-focus", - "--highcontrast-tag-border-color-emphasized-hover", - "--highcontrast-tag-border-color-focus", - "--highcontrast-tag-border-color-hover", - "--highcontrast-tag-border-color-invalid", - "--highcontrast-tag-border-color-invalid-active", - "--highcontrast-tag-border-color-invalid-focus", - "--highcontrast-tag-border-color-invalid-hover", - "--highcontrast-tag-border-color-invalid-selected", - "--highcontrast-tag-border-color-invalid-selected-active", - "--highcontrast-tag-border-color-invalid-selected-focus", - "--highcontrast-tag-border-color-invalid-selected-hover", - "--highcontrast-tag-border-color-selected", - "--highcontrast-tag-border-color-selected-active", - "--highcontrast-tag-border-color-selected-focus", - "--highcontrast-tag-border-color-selected-hover", - "--highcontrast-tag-content-color", - "--highcontrast-tag-content-color-active", - "--highcontrast-tag-content-color-disabled", - "--highcontrast-tag-content-color-emphasized", - "--highcontrast-tag-content-color-focus", - "--highcontrast-tag-content-color-hover", - "--highcontrast-tag-content-color-invalid", - "--highcontrast-tag-content-color-invalid-active", - "--highcontrast-tag-content-color-invalid-focus", - "--highcontrast-tag-content-color-invalid-hover", - "--highcontrast-tag-content-color-invalid-selected", - "--highcontrast-tag-content-color-selected", - "--highcontrast-tag-focus-ring-color" - ] + "modifiers": { + "mod-tag-border-color": { + "value": "var(--spectrum-tag-border-color)", + "description": "Used by `.spectrum-Tag`.
Defaults to `var(--spectrum-tag-border-color)`, if not set.", + "control": "color", + "category": "Modifier" + }, + "mod-tag-background-color": { + "value": "var(--spectrum-tag-background-color)", + "description": "Used by `.spectrum-Tag`.
Defaults to `var(--spectrum-tag-background-color)`, if not set.", + "control": "color", + "category": "Modifier" + }, + "mod-tag-content-color": { + "value": "var(--spectrum-tag-content-color)", + "description": "Used by `.spectrum-Tag`.
Defaults to `var(--spectrum-tag-content-color)`, if not set.", + "control": "color", + "category": "Modifier" + }, + "mod-tag-corner-radius": { + "value": "var(--spectrum-tag-corner-radius)", + "description": "Used by `.spectrum-Tag`, `.spectrum-Tag.is-focused:after, .spectrum-Tag:focus-visible:after`.
Defaults to `var(--spectrum-tag-corner-radius)`, if not set.", + "control": "text", + "category": "Modifier" + }, + "mod-tag-border-width": { + "value": "var(--spectrum-tag-border-width)", + "description": "Used by `.spectrum-Tag`, `.spectrum-Tag .spectrum-Tag-itemIcon`, `.spectrum-Tag .spectrum-Avatar`, `.spectrum-Tag .spectrum-Tag-clearButton`, `.spectrum-Tag .spectrum-Tag-itemLabel`, `.spectrum-Tag.is-focused:after, .spectrum-Tag:focus-visible:after`.
Defaults to `var(--spectrum-tag-border-width)`, if not set.", + "control": "text", + "category": "Modifier" + }, + "mod-tag-spacing-inline-start": { + "value": "var(--spectrum-tag-spacing-inline-start)", + "description": "Used by `.spectrum-Tag`.
Defaults to `var(--spectrum-tag-spacing-inline-start)`, if not set.", + "control": "text", + "category": "Modifier" + }, + "mod-tag-height": { + "value": "var(--spectrum-tag-height)", + "description": "Used by `.spectrum-Tag`.
Defaults to `var(--spectrum-tag-height)`, if not set.", + "control": "text", + "category": "Modifier" + }, + "mod-tag-animation-duration": { + "value": "var(--spectrum-tag-animation-duration)", + "description": "Used by `.spectrum-Tag`.
Defaults to `var(--spectrum-tag-animation-duration)`, if not set.", + "control": "text", + "category": "Modifier" + }, + "mod-tag-icon-size": { + "value": "var(--spectrum-tag-icon-size)", + "description": "Used by `.spectrum-Tag .spectrum-Tag-itemIcon`.
Defaults to `var(--spectrum-tag-icon-size)`, if not set.", + "control": "text", + "category": "Modifier" + }, + "mod-tag-icon-spacing-block-start": { + "value": "var(--spectrum-tag-icon-spacing-block-start)", + "description": "Used by `.spectrum-Tag .spectrum-Tag-itemIcon`.
Defaults to `var(--spectrum-tag-icon-spacing-block-start)`, if not set.", + "control": "text", + "category": "Modifier" + }, + "mod-tag-icon-spacing-block-end": { + "value": "var(--spectrum-tag-icon-spacing-block-end)", + "description": "Used by `.spectrum-Tag .spectrum-Tag-itemIcon`.
Defaults to `var(--spectrum-tag-icon-spacing-block-end)`, if not set.", + "control": "text", + "category": "Modifier" + }, + "mod-tag-icon-spacing-inline-end": { + "value": "var(--spectrum-tag-icon-spacing-inline-end)", + "description": "Used by `.spectrum-Tag .spectrum-Tag-itemIcon`.
Defaults to `var(--spectrum-tag-icon-spacing-inline-end)`, if not set.", + "control": "text", + "category": "Modifier" + }, + "mod-tag-avatar-spacing-block-start": { + "value": "var(--spectrum-tag-avatar-spacing-block-start)", + "description": "Used by `.spectrum-Tag .spectrum-Avatar`.
Defaults to `var(--spectrum-tag-avatar-spacing-block-start)`, if not set.", + "control": "text", + "category": "Modifier" + }, + "mod-tag-avatar-spacing-block-end": { + "value": "var(--spectrum-tag-avatar-spacing-block-end)", + "description": "Used by `.spectrum-Tag .spectrum-Avatar`.
Defaults to `var(--spectrum-tag-avatar-spacing-block-end)`, if not set.", + "control": "text", + "category": "Modifier" + }, + "mod-tag-avatar-spacing-inline-end": { + "value": "var(--spectrum-tag-avatar-spacing-inline-end)", + "description": "Used by `.spectrum-Tag .spectrum-Avatar`.
Defaults to `var(--spectrum-tag-avatar-spacing-inline-end)`, if not set.", + "control": "text", + "category": "Modifier" + }, + "mod-tag-clear-button-spacing-block": { + "value": "var(--spectrum-tag-clear-button-spacing-block)", + "description": "Used by `.spectrum-Tag .spectrum-Tag-clearButton`.
Defaults to `var(--spectrum-tag-clear-button-spacing-block)`, if not set.", + "control": "text", + "category": "Modifier" + }, + "mod-tag-clear-button-spacing-inline-start": { + "value": "var(--spectrum-tag-clear-button-spacing-inline-start)", + "description": "Used by `.spectrum-Tag .spectrum-Tag-clearButton`.
Defaults to `var(--spectrum-tag-clear-button-spacing-inline-start)`, if not set.", + "control": "text", + "category": "Modifier" + }, + "mod-tag-label-spacing-inline-end": { + "value": "var(--spectrum-tag-label-spacing-inline-end)", + "description": "Used by `.spectrum-Tag .spectrum-Tag-clearButton`, `.spectrum-Tag .spectrum-Tag-itemLabel`.
Defaults to `var(--spectrum-tag-label-spacing-inline-end)`, if not set.", + "control": "text", + "category": "Modifier" + }, + "mod-tag-clear-button-spacing-inline-end": { + "value": "var(--spectrum-tag-clear-button-spacing-inline-end)", + "description": "Used by `.spectrum-Tag .spectrum-Tag-clearButton`.
Defaults to `var(--spectrum-tag-clear-button-spacing-inline-end)`, if not set.", + "control": "text", + "category": "Modifier" + }, + "mod-tag-label-line-height": { + "value": "var(--spectrum-tag-label-line-height)", + "description": "Used by `.spectrum-Tag .spectrum-Tag-itemLabel`.
Defaults to `var(--spectrum-tag-label-line-height)`, if not set.", + "control": "text", + "category": "Modifier" + }, + "mod-tag-label-font-weight": { + "value": "var(--spectrum-tag-label-font-weight)", + "description": "Used by `.spectrum-Tag .spectrum-Tag-itemLabel`.
Defaults to `var(--spectrum-tag-label-font-weight)`, if not set.", + "control": "text", + "category": "Modifier" + }, + "mod-tag-font-size": { + "value": "var(--spectrum-tag-font-size)", + "description": "Used by `.spectrum-Tag .spectrum-Tag-itemLabel`.
Defaults to `var(--spectrum-tag-font-size)`, if not set.", + "control": "text", + "category": "Modifier" + }, + "mod-tag-label-spacing-block": { + "value": "var(--spectrum-tag-label-spacing-block)", + "description": "Used by `.spectrum-Tag .spectrum-Tag-itemLabel`.
Defaults to `var(--spectrum-tag-label-spacing-block)`, if not set.", + "control": "text", + "category": "Modifier" + }, + "mod-tag-border-color-active": { + "value": "var(--spectrum-tag-border-color-active)", + "description": "Used by `.spectrum-Tag:active`.
Defaults to `var(--spectrum-tag-border-color-active)`, if not set.", + "control": "color", + "category": "Modifier" + }, + "mod-tag-background-color-active": { + "value": "var(--spectrum-tag-background-color-active)", + "description": "Used by `.spectrum-Tag:active`.
Defaults to `var(--spectrum-tag-background-color-active)`, if not set.", + "control": "color", + "category": "Modifier" + }, + "mod-tag-content-color-active": { + "value": "var(--spectrum-tag-content-color-active)", + "description": "Used by `.spectrum-Tag:active`.
Defaults to `var(--spectrum-tag-content-color-active)`, if not set.", + "control": "color", + "category": "Modifier" + }, + "mod-tag-border-color-focus": { + "value": "var(--spectrum-tag-border-color-focus)", + "description": "Used by `.spectrum-Tag.is-focused, .spectrum-Tag:focus-visible`.
Defaults to `var(--spectrum-tag-border-color-focus)`, if not set.", + "control": "color", + "category": "Modifier" + }, + "mod-tag-background-color-focus": { + "value": "var(--spectrum-tag-background-color-focus)", + "description": "Used by `.spectrum-Tag.is-focused, .spectrum-Tag:focus-visible`.
Defaults to `var(--spectrum-tag-background-color-focus)`, if not set.", + "control": "color", + "category": "Modifier" + }, + "mod-tag-content-color-focus": { + "value": "var(--spectrum-tag-content-color-focus)", + "description": "Used by `.spectrum-Tag.is-focused, .spectrum-Tag:focus-visible`.
Defaults to `var(--spectrum-tag-content-color-focus)`, if not set.", + "control": "color", + "category": "Modifier" + }, + "mod-tag-focus-ring-gap": { + "value": "var(--spectrum-tag-focus-ring-gap)", + "description": "Used by `.spectrum-Tag.is-focused:after, .spectrum-Tag:focus-visible:after`.
Defaults to `var(--spectrum-tag-focus-ring-gap)`, if not set.", + "control": "text", + "category": "Modifier" + }, + "mod-tag-focus-ring-thickness": { + "value": "var(--spectrum-tag-focus-ring-thickness)", + "description": "Used by `.spectrum-Tag.is-focused:after, .spectrum-Tag:focus-visible:after`.
Defaults to `var(--spectrum-tag-focus-ring-thickness)`, if not set.", + "control": "text", + "category": "Modifier" + }, + "mod-tag-focus-ring-color": { + "value": "var(--spectrum-tag-focus-ring-color)", + "description": "Used by `.spectrum-Tag.is-focused:after, .spectrum-Tag:focus-visible:after`.
Defaults to `var(--spectrum-tag-focus-ring-color)`, if not set.", + "control": "color", + "category": "Modifier" + }, + "mod-tag-border-color-selected": { + "value": "var(--spectrum-tag-border-color-selected)", + "description": "Used by `.spectrum-Tag.is-selected`.
Defaults to `var(--spectrum-tag-border-color-selected)`, if not set.", + "control": "color", + "category": "Modifier" + }, + "mod-tag-background-color-selected": { + "value": "var(--spectrum-tag-background-color-selected)", + "description": "Used by `.spectrum-Tag.is-selected`.
Defaults to `var(--spectrum-tag-background-color-selected)`, if not set.", + "control": "color", + "category": "Modifier" + }, + "mod-tag-content-color-selected": { + "value": "var(--spectrum-tag-content-color-selected)", + "description": "Used by `.spectrum-Tag.is-selected`, `.spectrum-Tag.is-selected:hover`.
Defaults to `var(--spectrum-tag-content-color-selected)`, if not set.", + "control": "color", + "category": "Modifier" + }, + "mod-tag-border-color-selected-active": { + "value": "var(--spectrum-tag-border-color-selected-active)", + "description": "Used by `.spectrum-Tag.is-selected:active`.
Defaults to `var(--spectrum-tag-border-color-selected-active)`, if not set.", + "control": "color", + "category": "Modifier" + }, + "mod-tag-background-color-selected-active": { + "value": "var(--spectrum-tag-background-color-selected-active)", + "description": "Used by `.spectrum-Tag.is-selected:active`.
Defaults to `var(--spectrum-tag-background-color-selected-active)`, if not set.", + "control": "color", + "category": "Modifier" + }, + "mod-tag-border-color-selected-focus": { + "value": "var(--spectrum-tag-border-color-selected-focus)", + "description": "Used by `.spectrum-Tag.is-selected.is-focused, .spectrum-Tag.is-selected:focus-visible`.
Defaults to `var(--spectrum-tag-border-color-selected-focus)`, if not set.", + "control": "color", + "category": "Modifier" + }, + "mod-tag-background-color-selected-focus": { + "value": "var(--spectrum-tag-background-color-selected-focus)", + "description": "Used by `.spectrum-Tag.is-selected.is-focused, .spectrum-Tag.is-selected:focus-visible`.
Defaults to `var(--spectrum-tag-background-color-selected-focus)`, if not set.", + "control": "color", + "category": "Modifier" + }, + "mod-tag-border-color-invalid": { + "value": "var(--spectrum-tag-border-color-invalid)", + "description": "Used by `.spectrum-Tag.is-invalid`.
Defaults to `var(--spectrum-tag-border-color-invalid)`, if not set.", + "control": "color", + "category": "Modifier" + }, + "mod-tag-content-color-invalid": { + "value": "var(--spectrum-tag-content-color-invalid)", + "description": "Used by `.spectrum-Tag.is-invalid`.
Defaults to `var(--spectrum-tag-content-color-invalid)`, if not set.", + "control": "color", + "category": "Modifier" + }, + "mod-tag-border-color-invalid-active": { + "value": "var(--spectrum-tag-border-color-invalid-active)", + "description": "Used by `.spectrum-Tag.is-invalid:active`.
Defaults to `var(--spectrum-tag-border-color-invalid-active)`, if not set.", + "control": "color", + "category": "Modifier" + }, + "mod-tag-content-color-invalid-active": { + "value": "var(--spectrum-tag-content-color-invalid-active)", + "description": "Used by `.spectrum-Tag.is-invalid:active`.
Defaults to `var(--spectrum-tag-content-color-invalid-active)`, if not set.", + "control": "color", + "category": "Modifier" + }, + "mod-tag-border-color-invalid-focus": { + "value": "var(--spectrum-tag-border-color-invalid-focus)", + "description": "Used by `.spectrum-Tag.is-invalid.is-focused, .spectrum-Tag.is-invalid:focus-visible`.
Defaults to `var(--spectrum-tag-border-color-invalid-focus)`, if not set.", + "control": "color", + "category": "Modifier" + }, + "mod-tag-content-color-invalid-focus": { + "value": "var(--spectrum-tag-content-color-invalid-focus)", + "description": "Used by `.spectrum-Tag.is-invalid.is-focused, .spectrum-Tag.is-invalid:focus-visible`.
Defaults to `var(--spectrum-tag-content-color-invalid-focus)`, if not set.", + "control": "color", + "category": "Modifier" + }, + "mod-tag-border-color-invalid-selected": { + "value": "var(--spectrum-tag-border-color-invalid-selected)", + "description": "Used by `.spectrum-Tag.is-invalid.is-selected`.
Defaults to `var(--spectrum-tag-border-color-invalid-selected)`, if not set.", + "control": "color", + "category": "Modifier" + }, + "mod-tag-background-color-invalid-selected": { + "value": "var(--spectrum-tag-background-color-invalid-selected)", + "description": "Used by `.spectrum-Tag.is-invalid.is-selected`.
Defaults to `var(--spectrum-tag-background-color-invalid-selected)`, if not set.", + "control": "color", + "category": "Modifier" + }, + "mod-tag-content-color-invalid-selected": { + "value": "var(--spectrum-tag-content-color-invalid-selected)", + "description": "Used by `.spectrum-Tag.is-invalid.is-selected`, `.spectrum-Tag.is-invalid.is-selected:hover`.
Defaults to `var(--spectrum-tag-content-color-invalid-selected)`, if not set.", + "control": "color", + "category": "Modifier" + }, + "mod-tag-border-color-invalid-selected-active": { + "value": "var(--spectrum-tag-border-color-invalid-selected-active)", + "description": "Used by `.spectrum-Tag.is-invalid.is-selected:active`.
Defaults to `var(--spectrum-tag-border-color-invalid-selected-active)`, if not set.", + "control": "color", + "category": "Modifier" + }, + "mod-tag-background-color-invalid-selected-active": { + "value": "var(--spectrum-tag-background-color-invalid-selected-active)", + "description": "Used by `.spectrum-Tag.is-invalid.is-selected:active`.
Defaults to `var(--spectrum-tag-background-color-invalid-selected-active)`, if not set.", + "control": "color", + "category": "Modifier" + }, + "mod-tag-border-color-invalid-selected-focus": { + "value": "var(--spectrum-tag-border-color-invalid-selected-focus)", + "description": "Used by `.spectrum-Tag.is-invalid.is-selected.is-focused, .spectrum-Tag.is-invalid.is-selected:focus-visible`.
Defaults to `var(--spectrum-tag-border-color-invalid-selected-focus)`, if not set.", + "control": "color", + "category": "Modifier" + }, + "mod-tag-background-color-invalid-selected-focus": { + "value": "var(--spectrum-tag-background-color-invalid-selected-focus)", + "description": "Used by `.spectrum-Tag.is-invalid.is-selected.is-focused, .spectrum-Tag.is-invalid.is-selected:focus-visible`.
Defaults to `var(--spectrum-tag-background-color-invalid-selected-focus)`, if not set.", + "control": "color", + "category": "Modifier" + }, + "mod-tag-border-color-emphasized": { + "value": "var(--spectrum-tag-border-color-emphasized)", + "description": "Used by `.spectrum-Tag.is-emphasized`.
Defaults to `var(--spectrum-tag-border-color-emphasized)`, if not set.", + "control": "color", + "category": "Modifier" + }, + "mod-tag-background-color-emphasized": { + "value": "var(--spectrum-tag-background-color-emphasized)", + "description": "Used by `.spectrum-Tag.is-emphasized`.
Defaults to `var(--spectrum-tag-background-color-emphasized)`, if not set.", + "control": "color", + "category": "Modifier" + }, + "mod-tag-content-color-emphasized": { + "value": "var(--spectrum-tag-content-color-emphasized)", + "description": "Used by `.spectrum-Tag.is-emphasized`, `.spectrum-Tag.is-emphasized:hover`.
Defaults to `var(--spectrum-tag-content-color-emphasized)`, if not set.", + "control": "color", + "category": "Modifier" + }, + "mod-tag-border-color-hover": { + "value": "var(--spectrum-tag-border-color-hover)", + "description": "Used by `.spectrum-Tag:hover`.
Defaults to `var(--spectrum-tag-border-color-hover)`, if not set.", + "control": "color", + "category": "Modifier" + }, + "mod-tag-background-color-hover": { + "value": "var(--spectrum-tag-background-color-hover)", + "description": "Used by `.spectrum-Tag:hover`.
Defaults to `var(--spectrum-tag-background-color-hover)`, if not set.", + "control": "color", + "category": "Modifier" + }, + "mod-tag-content-color-hover": { + "value": "var(--spectrum-tag-content-color-hover)", + "description": "Used by `.spectrum-Tag:hover`.
Defaults to `var(--spectrum-tag-content-color-hover)`, if not set.", + "control": "color", + "category": "Modifier" + }, + "mod-tag-border-color-selected-hover": { + "value": "var(--spectrum-tag-border-color-selected-hover)", + "description": "Used by `.spectrum-Tag.is-selected:hover`.
Defaults to `var(--spectrum-tag-border-color-selected-hover)`, if not set.", + "control": "color", + "category": "Modifier" + }, + "mod-tag-background-color-selected-hover": { + "value": "var(--spectrum-tag-background-color-selected-hover)", + "description": "Used by `.spectrum-Tag.is-selected:hover`.
Defaults to `var(--spectrum-tag-background-color-selected-hover)`, if not set.", + "control": "color", + "category": "Modifier" + }, + "mod-tag-border-color-invalid-hover": { + "value": "var(--spectrum-tag-border-color-invalid-hover)", + "description": "Used by `.spectrum-Tag.is-invalid:hover`.
Defaults to `var(--spectrum-tag-border-color-invalid-hover)`, if not set.", + "control": "color", + "category": "Modifier" + }, + "mod-tag-content-color-invalid-hover": { + "value": "var(--spectrum-tag-content-color-invalid-hover)", + "description": "Used by `.spectrum-Tag.is-invalid:hover`.
Defaults to `var(--spectrum-tag-content-color-invalid-hover)`, if not set.", + "control": "color", + "category": "Modifier" + }, + "mod-tag-border-color-invalid-selected-hover": { + "value": "var(--spectrum-tag-border-color-invalid-selected-hover)", + "description": "Used by `.spectrum-Tag.is-invalid.is-selected:hover`.
Defaults to `var(--spectrum-tag-border-color-invalid-selected-hover)`, if not set.", + "control": "color", + "category": "Modifier" + }, + "mod-tag-background-color-invalid-selected-hover": { + "value": "var(--spectrum-tag-background-color-invalid-selected-hover)", + "description": "Used by `.spectrum-Tag.is-invalid.is-selected:hover`.
Defaults to `var(--spectrum-tag-background-color-invalid-selected-hover)`, if not set.", + "control": "color", + "category": "Modifier" + }, + "mod-tag-border-color-emphasized-hover": { + "value": "var(--spectrum-tag-border-color-emphasized-hover)", + "description": "Used by `.spectrum-Tag.is-emphasized:hover`.
Defaults to `var(--spectrum-tag-border-color-emphasized-hover)`, if not set.", + "control": "color", + "category": "Modifier" + }, + "mod-tag-background-color-emphasized-hover": { + "value": "var(--spectrum-tag-background-color-emphasized-hover)", + "description": "Used by `.spectrum-Tag.is-emphasized:hover`.
Defaults to `var(--spectrum-tag-background-color-emphasized-hover)`, if not set.", + "control": "color", + "category": "Modifier" + }, + "mod-tag-border-color-emphasized-active": { + "value": "var(--spectrum-tag-border-color-emphasized-active)", + "description": "Used by `.spectrum-Tag.is-emphasized:active`.
Defaults to `var(--spectrum-tag-border-color-emphasized-active)`, if not set.", + "control": "color", + "category": "Modifier" + }, + "mod-tag-background-color-emphasized-active": { + "value": "var(--spectrum-tag-background-color-emphasized-active)", + "description": "Used by `.spectrum-Tag.is-emphasized:active`.
Defaults to `var(--spectrum-tag-background-color-emphasized-active)`, if not set.", + "control": "color", + "category": "Modifier" + }, + "mod-tag-border-color-emphasized-focus": { + "value": "var(--spectrum-tag-border-color-emphasized-focus)", + "description": "Used by `.spectrum-Tag.is-emphasized.is-focused, .spectrum-Tag.is-emphasized:focus-visible`.
Defaults to `var(--spectrum-tag-border-color-emphasized-focus)`, if not set.", + "control": "color", + "category": "Modifier" + }, + "mod-tag-background-color-emphasized-focus": { + "value": "var(--spectrum-tag-background-color-emphasized-focus)", + "description": "Used by `.spectrum-Tag.is-emphasized.is-focused, .spectrum-Tag.is-emphasized:focus-visible`.
Defaults to `var(--spectrum-tag-background-color-emphasized-focus)`, if not set.", + "control": "color", + "category": "Modifier" + }, + "mod-tag-border-color-disabled": { + "value": "var(--spectrum-tag-border-color-disabled)", + "description": "Used by `.spectrum-Tag.is-disabled`.
Defaults to `var(--spectrum-tag-border-color-disabled)`, if not set.", + "control": "color", + "category": "Modifier" + }, + "mod-tag-background-color-disabled": { + "value": "var(--spectrum-tag-background-color-disabled)", + "description": "Used by `.spectrum-Tag.is-disabled`.
Defaults to `var(--spectrum-tag-background-color-disabled)`, if not set.", + "control": "color", + "category": "Modifier" + }, + "mod-tag-content-color-disabled": { + "value": "var(--spectrum-tag-content-color-disabled)", + "description": "Used by `.spectrum-Tag.is-disabled`.
Defaults to `var(--spectrum-tag-content-color-disabled)`, if not set.", + "control": "color", + "category": "Modifier" + } + }, + "component": { + "spectrum-tag-animation-duration": { + "description": "Defined in `.spectrum-Tag`.
Used by `.spectrum-Tag`.", + "control": "text", + "category": "Component" + }, + "spectrum-tag-border-width": { + "description": "Defined in `.spectrum-Tag`.
Used by `.spectrum-Tag`, `.spectrum-Tag .spectrum-Tag-itemIcon`, `.spectrum-Tag .spectrum-Avatar`, `.spectrum-Tag .spectrum-Tag-clearButton`, `.spectrum-Tag .spectrum-Tag-itemLabel`, `.spectrum-Tag.is-focused:after, .spectrum-Tag:focus-visible:after`.", + "control": "text", + "category": "Component" + }, + "spectrum-tag-focus-ring-thickness": { + "description": "Defined in `.spectrum-Tag`.
Used by `.spectrum-Tag.is-focused:after, .spectrum-Tag:focus-visible:after`.", + "control": "text", + "category": "Component" + }, + "spectrum-tag-focus-ring-gap": { + "description": "Defined in `.spectrum-Tag`.
Used by `.spectrum-Tag.is-focused:after, .spectrum-Tag:focus-visible:after`.", + "control": "text", + "category": "Component" + }, + "spectrum-tag-focus-ring-color": { + "description": "Defined in `.spectrum-Tag`.
Used by `.spectrum-Tag.is-focused:after, .spectrum-Tag:focus-visible:after`.", + "control": "color", + "category": "Component" + }, + "spectrum-tag-label-line-height": { + "description": "Defined in `.spectrum-Tag`.
Used by `.spectrum-Tag .spectrum-Tag-itemLabel`.", + "control": "text", + "category": "Component" + }, + "spectrum-tag-label-font-weight": { + "description": "Defined in `.spectrum-Tag`.
Used by `.spectrum-Tag .spectrum-Tag-itemLabel`.", + "control": "text", + "category": "Component" + }, + "spectrum-tag-background-color-selected": { + "description": "Defined in `.spectrum-Tag`.
Used by `.spectrum-Tag.is-selected`.", + "control": "color", + "category": "Component" + }, + "spectrum-tag-background-color-selected-hover": { + "description": "Defined in `.spectrum-Tag`.
Used by `.spectrum-Tag.is-selected:hover`.", + "control": "color", + "category": "Component" + }, + "spectrum-tag-background-color-selected-active": { + "description": "Defined in `.spectrum-Tag`.
Used by `.spectrum-Tag.is-selected:active`.", + "control": "color", + "category": "Component" + }, + "spectrum-tag-background-color-selected-focus": { + "description": "Defined in `.spectrum-Tag`.
Used by `.spectrum-Tag.is-selected.is-focused, .spectrum-Tag.is-selected:focus-visible`.", + "control": "color", + "category": "Component" + }, + "spectrum-tag-border-color-invalid": { + "description": "Defined in `.spectrum-Tag`.
Used by `.spectrum-Tag.is-invalid`.", + "control": "color", + "category": "Component" + }, + "spectrum-tag-border-color-invalid-hover": { + "description": "Defined in `.spectrum-Tag`.
Used by `.spectrum-Tag.is-invalid:hover`.", + "control": "color", + "category": "Component" + }, + "spectrum-tag-border-color-invalid-active": { + "description": "Defined in `.spectrum-Tag`.
Used by `.spectrum-Tag.is-invalid:active`.", + "control": "color", + "category": "Component" + }, + "spectrum-tag-border-color-invalid-focus": { + "description": "Defined in `.spectrum-Tag`.
Used by `.spectrum-Tag.is-invalid.is-focused, .spectrum-Tag.is-invalid:focus-visible`.", + "control": "color", + "category": "Component" + }, + "spectrum-tag-content-color-invalid": { + "description": "Defined in `.spectrum-Tag`.
Used by `.spectrum-Tag.is-invalid`.", + "control": "color", + "category": "Component" + }, + "spectrum-tag-content-color-invalid-hover": { + "description": "Defined in `.spectrum-Tag`.
Used by `.spectrum-Tag.is-invalid:hover`.", + "control": "color", + "category": "Component" + }, + "spectrum-tag-content-color-invalid-active": { + "description": "Defined in `.spectrum-Tag`.
Used by `.spectrum-Tag.is-invalid:active`.", + "control": "color", + "category": "Component" + }, + "spectrum-tag-content-color-invalid-focus": { + "description": "Defined in `.spectrum-Tag`.
Used by `.spectrum-Tag.is-invalid.is-focused, .spectrum-Tag.is-invalid:focus-visible`.", + "control": "color", + "category": "Component" + }, + "spectrum-tag-border-color-invalid-selected": { + "description": "Defined in `.spectrum-Tag`.
Used by `.spectrum-Tag.is-invalid.is-selected`.", + "control": "color", + "category": "Component" + }, + "spectrum-tag-border-color-invalid-selected-hover": { + "description": "Defined in `.spectrum-Tag`.
Used by `.spectrum-Tag.is-invalid.is-selected:hover`.", + "control": "color", + "category": "Component" + }, + "spectrum-tag-border-color-invalid-selected-focus": { + "description": "Defined in `.spectrum-Tag`.
Used by `.spectrum-Tag.is-invalid.is-selected.is-focused, .spectrum-Tag.is-invalid.is-selected:focus-visible`.", + "control": "color", + "category": "Component" + }, + "spectrum-tag-border-color-invalid-selected-active": { + "description": "Defined in `.spectrum-Tag`.
Used by `.spectrum-Tag.is-invalid.is-selected:active`.", + "control": "color", + "category": "Component" + }, + "spectrum-tag-background-color-invalid-selected": { + "description": "Defined in `.spectrum-Tag`.
Used by `.spectrum-Tag.is-invalid.is-selected`.", + "control": "color", + "category": "Component" + }, + "spectrum-tag-background-color-invalid-selected-hover": { + "description": "Defined in `.spectrum-Tag`.
Used by `.spectrum-Tag.is-invalid.is-selected:hover`.", + "control": "color", + "category": "Component" + }, + "spectrum-tag-background-color-invalid-selected-active": { + "description": "Defined in `.spectrum-Tag`.
Used by `.spectrum-Tag.is-invalid.is-selected:active`.", + "control": "color", + "category": "Component" + }, + "spectrum-tag-background-color-invalid-selected-focus": { + "description": "Defined in `.spectrum-Tag`.
Used by `.spectrum-Tag.is-invalid.is-selected.is-focused, .spectrum-Tag.is-invalid.is-selected:focus-visible`.", + "control": "color", + "category": "Component" + }, + "spectrum-tag-content-color-invalid-selected": { + "description": "Defined in `.spectrum-Tag`.
Used by `.spectrum-Tag.is-invalid.is-selected`, `.spectrum-Tag.is-invalid.is-selected:hover`.", + "control": "color", + "category": "Component" + }, + "spectrum-tag-border-color-emphasized": { + "description": "Defined in `.spectrum-Tag`.
Used by `.spectrum-Tag.is-emphasized`.", + "control": "color", + "category": "Component" + }, + "spectrum-tag-border-color-emphasized-hover": { + "description": "Defined in `.spectrum-Tag`.
Used by `.spectrum-Tag.is-emphasized:hover`.", + "control": "color", + "category": "Component" + }, + "spectrum-tag-border-color-emphasized-active": { + "description": "Defined in `.spectrum-Tag`.
Used by `.spectrum-Tag.is-emphasized:active`.", + "control": "color", + "category": "Component" + }, + "spectrum-tag-border-color-emphasized-focus": { + "description": "Defined in `.spectrum-Tag`.
Used by `.spectrum-Tag.is-emphasized.is-focused, .spectrum-Tag.is-emphasized:focus-visible`.", + "control": "color", + "category": "Component" + }, + "spectrum-tag-background-color-emphasized": { + "description": "Defined in `.spectrum-Tag`.
Used by `.spectrum-Tag.is-emphasized`.", + "control": "color", + "category": "Component" + }, + "spectrum-tag-background-color-emphasized-hover": { + "description": "Defined in `.spectrum-Tag`.
Used by `.spectrum-Tag.is-emphasized:hover`.", + "control": "color", + "category": "Component" + }, + "spectrum-tag-background-color-emphasized-active": { + "description": "Defined in `.spectrum-Tag`.
Used by `.spectrum-Tag.is-emphasized:active`.", + "control": "color", + "category": "Component" + }, + "spectrum-tag-background-color-emphasized-focus": { + "description": "Defined in `.spectrum-Tag`.
Used by `.spectrum-Tag.is-emphasized.is-focused, .spectrum-Tag.is-emphasized:focus-visible`.", + "control": "color", + "category": "Component" + }, + "spectrum-tag-content-color-emphasized": { + "description": "Defined in `.spectrum-Tag`.
Used by `.spectrum-Tag.is-emphasized`, `.spectrum-Tag.is-emphasized:hover`.", + "control": "color", + "category": "Component" + }, + "spectrum-tag-content-color-disabled": { + "description": "Defined in `.spectrum-Tag`.
Used by `.spectrum-Tag.is-disabled`.", + "control": "color", + "category": "Component" + }, + "spectrum-tag-height": { + "description": "Defined in `.spectrum-Tag, .spectrum-Tag--sizeM`, `.spectrum-Tag--sizeS`, `.spectrum-Tag--sizeL`.
Used by `.spectrum-Tag`.", + "control": "text", + "category": "Component" + }, + "spectrum-tag-font-size": { + "description": "Defined in `.spectrum-Tag, .spectrum-Tag--sizeM`, `.spectrum-Tag--sizeS`, `.spectrum-Tag--sizeL`.
Used by `.spectrum-Tag .spectrum-Tag-itemLabel`.", + "control": "text", + "category": "Component" + }, + "spectrum-tag-icon-size": { + "description": "Defined in `.spectrum-Tag, .spectrum-Tag--sizeM`, `.spectrum-Tag--sizeS`, `.spectrum-Tag--sizeL`.
Used by `.spectrum-Tag .spectrum-Tag-itemIcon`.", + "control": "text", + "category": "Component" + }, + "spectrum-tag-clear-button-spacing-inline-start": { + "description": "Defined in `.spectrum-Tag, .spectrum-Tag--sizeM`, `.spectrum-Tag--sizeS`, `.spectrum-Tag--sizeL`.
Used by `.spectrum-Tag .spectrum-Tag-clearButton`.", + "control": "text", + "category": "Component" + }, + "spectrum-tag-clear-button-spacing-block": { + "description": "Defined in `.spectrum-Tag, .spectrum-Tag--sizeM`, `.spectrum-Tag--sizeS`, `.spectrum-Tag--sizeL`.
Used by `.spectrum-Tag .spectrum-Tag-clearButton`.", + "control": "text", + "category": "Component" + }, + "spectrum-tag-top-to-cross-icon-medium": { + "value": "12px", + "description": "Used by `--spectrum-tag-clear-button-spacing-block`.", + "control": "text", + "category": "Component" + }, + "spectrum-tag-icon-spacing-block-start": { + "description": "Defined in `.spectrum-Tag, .spectrum-Tag--sizeM`, `.spectrum-Tag--sizeS`, `.spectrum-Tag--sizeL`.
Used by `.spectrum-Tag .spectrum-Tag-itemIcon`.", + "control": "text", + "category": "Component" + }, + "spectrum-tag-icon-spacing-block-end": { + "description": "Defined in `.spectrum-Tag, .spectrum-Tag--sizeM`, `.spectrum-Tag--sizeS`, `.spectrum-Tag--sizeL`.
Used by `.spectrum-Tag .spectrum-Tag-itemIcon`.", + "control": "text", + "category": "Component" + }, + "spectrum-tag-icon-spacing-inline-end": { + "description": "Defined in `.spectrum-Tag, .spectrum-Tag--sizeM`, `.spectrum-Tag--sizeS`, `.spectrum-Tag--sizeL`.
Used by `.spectrum-Tag .spectrum-Tag-itemIcon`.", + "control": "text", + "category": "Component" + }, + "spectrum-tag-avatar-spacing-block-start": { + "description": "Defined in `.spectrum-Tag, .spectrum-Tag--sizeM`, `.spectrum-Tag--sizeS`, `.spectrum-Tag--sizeL`.
Used by `.spectrum-Tag .spectrum-Avatar`.", + "control": "text", + "category": "Component" + }, + "spectrum-tag-top-to-avatar-medium": { + "value": "6px", + "description": "Used by `--spectrum-tag-avatar-spacing-block-start`, `--spectrum-tag-avatar-spacing-block-end`.", + "control": "text", + "category": "Component" + }, + "spectrum-tag-avatar-spacing-block-end": { + "description": "Defined in `.spectrum-Tag, .spectrum-Tag--sizeM`, `.spectrum-Tag--sizeS`, `.spectrum-Tag--sizeL`.
Used by `.spectrum-Tag .spectrum-Avatar`.", + "control": "text", + "category": "Component" + }, + "spectrum-tag-avatar-spacing-inline-end": { + "description": "Defined in `.spectrum-Tag, .spectrum-Tag--sizeM`, `.spectrum-Tag--sizeS`, `.spectrum-Tag--sizeL`.
Used by `.spectrum-Tag .spectrum-Avatar`.", + "control": "text", + "category": "Component" + }, + "spectrum-tag-label-spacing-block": { + "description": "Defined in `.spectrum-Tag, .spectrum-Tag--sizeM`, `.spectrum-Tag--sizeS`, `.spectrum-Tag--sizeL`.
Used by `.spectrum-Tag .spectrum-Tag-itemLabel`.", + "control": "text", + "category": "Component" + }, + "spectrum-tag-corner-radius": { + "description": "Defined in `.spectrum-Tag, .spectrum-Tag--sizeM`, `.spectrum-Tag--sizeS`, `.spectrum-Tag--sizeL`.
Used by `.spectrum-Tag`, `.spectrum-Tag.is-focused:after, .spectrum-Tag:focus-visible:after`.", + "control": "text", + "category": "Component" + }, + "spectrum-tag-size-medium-corner-radius": { + "description": "Defined in `.spectrum-Tag`.
Used by `--spectrum-tag-corner-radius`.", + "control": "text", + "category": "Component" + }, + "spectrum-tag-spacing-inline-start": { + "description": "Defined in `.spectrum-Tag, .spectrum-Tag--sizeM`, `.spectrum-Tag--sizeS`, `.spectrum-Tag--sizeL`.
Used by `.spectrum-Tag`.", + "control": "text", + "category": "Component" + }, + "spectrum-tag-size-medium-spacing-inline-start": { + "description": "Defined in `.spectrum-Tag`.
Used by `--spectrum-tag-spacing-inline-start`.", + "control": "text", + "category": "Component" + }, + "spectrum-tag-label-spacing-inline-end": { + "description": "Defined in `.spectrum-Tag, .spectrum-Tag--sizeM`, `.spectrum-Tag--sizeS`, `.spectrum-Tag--sizeL`.
Used by `.spectrum-Tag .spectrum-Tag-clearButton`, `.spectrum-Tag .spectrum-Tag-itemLabel`.", + "control": "text", + "category": "Component" + }, + "spectrum-tag-size-medium-label-spacing-inline-end": { + "description": "Defined in `.spectrum-Tag`.
Used by `--spectrum-tag-label-spacing-inline-end`.", + "control": "text", + "category": "Component" + }, + "spectrum-tag-clear-button-spacing-inline-end": { + "description": "Defined in `.spectrum-Tag, .spectrum-Tag--sizeM`, `.spectrum-Tag--sizeS`, `.spectrum-Tag--sizeL`.
Used by `.spectrum-Tag .spectrum-Tag-clearButton`.", + "control": "text", + "category": "Component" + }, + "spectrum-tag-size-medium-clear-button-spacing-inline-end": { + "description": "Defined in `.spectrum-Tag`.
Used by `--spectrum-tag-clear-button-spacing-inline-end`.", + "control": "text", + "category": "Component" + }, + "spectrum-tag-top-to-cross-icon-small": { + "value": "8px", + "description": "Used by `--spectrum-tag-clear-button-spacing-block`.", + "control": "text", + "category": "Component" + }, + "spectrum-tag-top-to-avatar-small": { + "value": "4px", + "description": "Used by `--spectrum-tag-avatar-spacing-block-start`, `--spectrum-tag-avatar-spacing-block-end`.", + "control": "text", + "category": "Component" + }, + "spectrum-tag-size-small-corner-radius": { + "description": "Defined in `.spectrum-Tag`.
Used by `--spectrum-tag-corner-radius`.", + "control": "text", + "category": "Component" + }, + "spectrum-tag-size-small-spacing-inline-start": { + "description": "Defined in `.spectrum-Tag`.
Used by `--spectrum-tag-spacing-inline-start`.", + "control": "text", + "category": "Component" + }, + "spectrum-tag-size-small-label-spacing-inline-end": { + "description": "Defined in `.spectrum-Tag`.
Used by `--spectrum-tag-label-spacing-inline-end`.", + "control": "text", + "category": "Component" + }, + "spectrum-tag-size-small-clear-button-spacing-inline-end": { + "description": "Defined in `.spectrum-Tag`.
Used by `--spectrum-tag-clear-button-spacing-inline-end`.", + "control": "text", + "category": "Component" + }, + "spectrum-tag-top-to-cross-icon-large": { + "value": "15px", + "description": "Used by `--spectrum-tag-clear-button-spacing-block`.", + "control": "text", + "category": "Component" + }, + "spectrum-tag-top-to-avatar-large": { + "value": "9px", + "description": "Used by `--spectrum-tag-avatar-spacing-block-start`, `--spectrum-tag-avatar-spacing-block-end`.", + "control": "text", + "category": "Component" + }, + "spectrum-tag-size-large-corner-radius": { + "description": "Defined in `.spectrum-Tag`.
Used by `--spectrum-tag-corner-radius`.", + "control": "text", + "category": "Component" + }, + "spectrum-tag-size-large-spacing-inline-start": { + "description": "Defined in `.spectrum-Tag`.
Used by `--spectrum-tag-spacing-inline-start`.", + "control": "text", + "category": "Component" + }, + "spectrum-tag-size-large-label-spacing-inline-end": { + "description": "Defined in `.spectrum-Tag`.
Used by `--spectrum-tag-label-spacing-inline-end`.", + "control": "text", + "category": "Component" + }, + "spectrum-tag-size-large-clear-button-spacing-inline-end": { + "description": "Defined in `.spectrum-Tag`.
Used by `--spectrum-tag-clear-button-spacing-inline-end`.", + "control": "text", + "category": "Component" + }, + "spectrum-tag-border-color": { + "description": "Defined in `.spectrum-Tag`.
Used by `.spectrum-Tag`.", + "control": "color", + "category": "Component" + }, + "spectrum-tag-background-color": { + "description": "Defined in `.spectrum-Tag`.
Used by `.spectrum-Tag`.", + "control": "color", + "category": "Component" + }, + "spectrum-tag-content-color": { + "description": "Defined in `.spectrum-Tag`.
Used by `.spectrum-Tag`.", + "control": "color", + "category": "Component" + }, + "spectrum-tag-border-color-active": { + "description": "Defined in `.spectrum-Tag`.
Used by `.spectrum-Tag:active`.", + "control": "color", + "category": "Component" + }, + "spectrum-tag-background-color-active": { + "description": "Defined in `.spectrum-Tag`.
Used by `.spectrum-Tag:active`.", + "control": "color", + "category": "Component" + }, + "spectrum-tag-content-color-active": { + "description": "Defined in `.spectrum-Tag`.
Used by `.spectrum-Tag:active`.", + "control": "color", + "category": "Component" + }, + "spectrum-tag-border-color-focus": { + "description": "Defined in `.spectrum-Tag`.
Used by `.spectrum-Tag.is-focused, .spectrum-Tag:focus-visible`.", + "control": "color", + "category": "Component" + }, + "spectrum-tag-background-color-focus": { + "description": "Defined in `.spectrum-Tag`.
Used by `.spectrum-Tag.is-focused, .spectrum-Tag:focus-visible`.", + "control": "color", + "category": "Component" + }, + "spectrum-tag-content-color-focus": { + "description": "Defined in `.spectrum-Tag`.
Used by `.spectrum-Tag.is-focused, .spectrum-Tag:focus-visible`.", + "control": "color", + "category": "Component" + }, + "spectrum-tag-border-color-selected": { + "description": "Defined in `.spectrum-Tag`.
Used by `.spectrum-Tag.is-selected`.", + "control": "color", + "category": "Component" + }, + "spectrum-tag-content-color-selected": { + "description": "Defined in `.spectrum-Tag`.
Used by `.spectrum-Tag.is-selected`, `.spectrum-Tag.is-selected:hover`.", + "control": "color", + "category": "Component" + }, + "spectrum-tag-border-color-selected-active": { + "description": "Defined in `.spectrum-Tag`.
Used by `.spectrum-Tag.is-selected:active`.", + "control": "color", + "category": "Component" + }, + "spectrum-tag-border-color-selected-focus": { + "description": "Defined in `.spectrum-Tag`.
Used by `.spectrum-Tag.is-selected.is-focused, .spectrum-Tag.is-selected:focus-visible`.", + "control": "color", + "category": "Component" + }, + "spectrum-tag-border-color-hover": { + "description": "Defined in `.spectrum-Tag`.
Used by `.spectrum-Tag:hover`.", + "control": "color", + "category": "Component" + }, + "spectrum-tag-background-color-hover": { + "description": "Defined in `.spectrum-Tag`.
Used by `.spectrum-Tag:hover`.", + "control": "color", + "category": "Component" + }, + "spectrum-tag-content-color-hover": { + "description": "Defined in `.spectrum-Tag`.
Used by `.spectrum-Tag:hover`.", + "control": "color", + "category": "Component" + }, + "spectrum-tag-border-color-selected-hover": { + "description": "Defined in `.spectrum-Tag`.
Used by `.spectrum-Tag.is-selected:hover`.", + "control": "color", + "category": "Component" + }, + "spectrum-tag-border-color-disabled": { + "description": "Defined in `.spectrum-Tag`.
Used by `.spectrum-Tag.is-disabled`.", + "control": "color", + "category": "Component" + }, + "spectrum-tag-background-color-disabled": { + "description": "Defined in `.spectrum-Tag`.
Used by `.spectrum-Tag.is-disabled`.", + "control": "color", + "category": "Component" + } + }, + "global": { + "spectrum-gray-50": { + "value": "light-dark(rgb(248, 248, 248), rgb(27, 27, 27))", + "description": "Used by `--system-tag-background-color`, `--system-tag-background-color-hover`, `--system-tag-background-color-focus`.", + "control": "text", + "category": "Global" + }, + "spectrum-gray-100": { + "value": "light-dark(rgb(233, 233, 233), rgb(44, 44, 44))", + "description": "Used by `--system-tag-background-color-active`.", + "control": "text", + "category": "Global" + }, + "spectrum-corner-radius-100": { + "value": "8px", + "description": "Used by `--system-tag-size-small-corner-radius`, `--system-tag-size-medium-corner-radius`, `--system-tag-size-large-corner-radius`.", + "control": "text", + "category": "Global" + }, + "spectrum-gray-700": { + "value": "light-dark(rgb(80, 80, 80), rgb(175, 175, 175))", + "description": "Used by `--system-tag-border-color`.", + "control": "text", + "category": "Global" + }, + "spectrum-gray-800": { + "value": "light-dark(rgb(41, 41, 41), rgb(219, 219, 219))", + "description": "Used by `--system-tag-border-color-hover`, `--system-tag-border-color-focus`.", + "control": "text", + "category": "Global" + }, + "spectrum-gray-900": { + "value": "light-dark(rgb(19, 19, 19), rgb(242, 242, 242))", + "description": "Used by `--system-tag-border-color-active`.", + "control": "text", + "category": "Global" + }, + "spectrum-neutral-subdued-content-color-default": { + "value": "var(--spectrum-gray-700)", + "description": "Used by `--system-tag-content-color`.", + "control": "color", + "category": "Global" + }, + "spectrum-neutral-subdued-content-color-hover": { + "value": "var(--spectrum-gray-800)", + "description": "Used by `--system-tag-content-color-hover`.", + "control": "color", + "category": "Global" + }, + "spectrum-neutral-subdued-content-color-down": { + "value": "var(--spectrum-gray-800)", + "description": "Used by `--system-tag-content-color-active`.", + "control": "color", + "category": "Global" + }, + "spectrum-neutral-subdued-content-color-key-focus": { + "value": "var(--spectrum-gray-800)", + "description": "Used by `--system-tag-content-color-focus`.", + "control": "color", + "category": "Global" + }, + "spectrum-gray-25": { + "value": "light-dark(rgb(255, 255, 255), rgb(17, 17, 17))", + "description": "Used by `--system-tag-content-color-selected`.", + "control": "text", + "category": "Global" + }, + "spectrum-neutral-subdued-background-color-default": { + "value": "var(--spectrum-gray-500)", + "description": "Used by `--system-tag-border-color-selected`.", + "control": "color", + "category": "Global" + }, + "spectrum-neutral-subdued-background-color-hover": { + "value": "var(--spectrum-gray-400)", + "description": "Used by `--system-tag-border-color-selected-hover`.", + "control": "color", + "category": "Global" + }, + "spectrum-neutral-subdued-background-color-down": { + "value": "var(--spectrum-gray-400)", + "description": "Used by `--system-tag-border-color-selected-active`.", + "control": "color", + "category": "Global" + }, + "spectrum-neutral-subdued-background-color-key-focus": { + "value": "var(--spectrum-gray-400)", + "description": "Used by `--system-tag-border-color-selected-focus`.", + "control": "color", + "category": "Global" + }, + "spectrum-disabled-background-color": { + "value": "var(--spectrum-gray-100)", + "description": "Used by `--system-tag-background-color-disabled`.", + "control": "color", + "category": "Global" + }, + "spectrum-component-edge-to-visual-75": { + "value": "8px", + "description": "Used by `--system-tag-size-small-spacing-inline-start`, `--system-tag-size-small-clear-button-spacing-inline-end`.", + "control": "text", + "category": "Global" + }, + "spectrum-component-edge-to-text-75": { + "value": "10px", + "description": "Used by `--system-tag-size-small-label-spacing-inline-end`.", + "control": "text", + "category": "Global" + }, + "spectrum-component-edge-to-visual-100": { + "value": "10px", + "description": "Used by `--system-tag-size-medium-spacing-inline-start`, `--system-tag-size-medium-clear-button-spacing-inline-end`.", + "control": "text", + "category": "Global" + }, + "spectrum-component-edge-to-text-100": { + "value": "12px", + "description": "Used by `--system-tag-size-medium-label-spacing-inline-end`.", + "control": "text", + "category": "Global" + }, + "spectrum-component-edge-to-visual-200": { + "value": "13px", + "description": "Used by `--system-tag-size-large-spacing-inline-start`, `--system-tag-size-large-clear-button-spacing-inline-end`.", + "control": "text", + "category": "Global" + }, + "spectrum-component-edge-to-text-200": { + "value": "15px", + "description": "Used by `--system-tag-size-large-label-spacing-inline-end`.", + "control": "text", + "category": "Global" + }, + "spectrum-avatar-opacity-disabled": { + "value": "0.3", + "description": "Defined in `.spectrum-Tag`.
Used by `.spectrum-Tag.is-disabled .spectrum-Avatar`.", + "control": "text", + "category": "Global" + }, + "spectrum-animation-duration-100": { + "description": "Used by `--spectrum-tag-animation-duration`.", + "control": "text", + "category": "Global" + }, + "spectrum-border-width-100": { + "value": "1px", + "description": "Used by `--spectrum-tag-border-width`.", + "control": "text", + "category": "Global" + }, + "spectrum-focus-indicator-thickness": { + "value": "2px", + "description": "Used by `--spectrum-tag-focus-ring-thickness`.", + "control": "text", + "category": "Global" + }, + "spectrum-focus-indicator-gap": { + "value": "2px", + "description": "Used by `--spectrum-tag-focus-ring-gap`.", + "control": "text", + "category": "Global" + }, + "spectrum-focus-indicator-color": { + "value": "var(--spectrum-blue-800)", + "description": "Used by `--spectrum-tag-focus-ring-color`.", + "control": "color", + "category": "Global" + }, + "spectrum-line-height-100": { + "value": "1.3", + "description": "Used by `--spectrum-tag-label-line-height`.", + "control": "text", + "category": "Global" + }, + "spectrum-regular-font-weight": { + "value": "400", + "description": "Used by `--spectrum-tag-label-font-weight`.", + "control": "text", + "category": "Global" + }, + "spectrum-neutral-background-color-selected-default": { + "value": "var(--spectrum-gray-800)", + "description": "Used by `--spectrum-tag-background-color-selected`.", + "control": "color", + "category": "Global" + }, + "spectrum-neutral-background-color-selected-hover": { + "value": "var(--spectrum-gray-900)", + "description": "Used by `--spectrum-tag-background-color-selected-hover`.", + "control": "color", + "category": "Global" + }, + "spectrum-neutral-background-color-selected-down": { + "value": "var(--spectrum-gray-900)", + "description": "Used by `--spectrum-tag-background-color-selected-active`.", + "control": "color", + "category": "Global" + }, + "spectrum-neutral-background-color-selected-key-focus": { + "value": "var(--spectrum-gray-900)", + "description": "Used by `--spectrum-tag-background-color-selected-focus`.", + "control": "color", + "category": "Global" + }, + "spectrum-negative-color-900": { + "value": "var(--spectrum-red-900)", + "description": "Used by `--spectrum-tag-border-color-invalid`.", + "control": "color", + "category": "Global" + }, + "spectrum-negative-color-1000": { + "value": "var(--spectrum-red-1000)", + "description": "Used by `--spectrum-tag-border-color-invalid-hover`, `--spectrum-tag-border-color-invalid-focus`.", + "control": "color", + "category": "Global" + }, + "spectrum-negative-color-1100": { + "value": "var(--spectrum-red-1100)", + "description": "Used by `--spectrum-tag-border-color-invalid-active`.", + "control": "color", + "category": "Global" + }, + "spectrum-negative-content-color-default": { + "value": "var(--spectrum-negative-color-900)", + "description": "Used by `--spectrum-tag-content-color-invalid`.", + "control": "color", + "category": "Global" + }, + "spectrum-negative-content-color-hover": { + "value": "var(--spectrum-negative-color-1000)", + "description": "Used by `--spectrum-tag-content-color-invalid-hover`.", + "control": "color", + "category": "Global" + }, + "spectrum-negative-content-color-down": { + "value": "var(--spectrum-negative-color-1000)", + "description": "Used by `--spectrum-tag-content-color-invalid-active`.", + "control": "color", + "category": "Global" + }, + "spectrum-negative-content-color-key-focus": { + "value": "var(--spectrum-negative-color-1000)", + "description": "Used by `--spectrum-tag-content-color-invalid-focus`.", + "control": "color", + "category": "Global" + }, + "spectrum-negative-background-color-default": { + "value": "var(--spectrum-negative-color-800)", + "description": "Used by `--spectrum-tag-border-color-invalid-selected`, `--spectrum-tag-background-color-invalid-selected`.", + "control": "color", + "category": "Global" + }, + "spectrum-negative-background-color-hover": { + "value": "var(--spectrum-negative-color-700)", + "description": "Used by `--spectrum-tag-border-color-invalid-selected-hover`, `--spectrum-tag-background-color-invalid-selected-hover`.", + "control": "color", + "category": "Global" + }, + "spectrum-negative-background-color-down": { + "value": "var(--spectrum-negative-color-700)", + "description": "Used by `--spectrum-tag-border-color-invalid-selected-focus`, `--spectrum-tag-background-color-invalid-selected-active`.", + "control": "color", + "category": "Global" + }, + "spectrum-negative-background-color-key-focus": { + "value": "var(--spectrum-negative-color-700)", + "description": "Used by `--spectrum-tag-border-color-invalid-selected-active`, `--spectrum-tag-background-color-invalid-selected-focus`.", + "control": "color", + "category": "Global" + }, + "spectrum-white": { + "value": "light-dark(rgb(255, 255, 255), rgb(255, 255, 255))", + "description": "Used by `--spectrum-tag-content-color-invalid-selected`, `--spectrum-tag-content-color-emphasized`.", + "control": "text", + "category": "Global" + }, + "spectrum-accent-background-color-default": { + "value": "var(--spectrum-accent-color-800)", + "description": "Used by `--spectrum-tag-border-color-emphasized`, `--spectrum-tag-background-color-emphasized`.", + "control": "color", + "category": "Global" + }, + "spectrum-accent-background-color-hover": { + "value": "var(--spectrum-accent-color-700)", + "description": "Used by `--spectrum-tag-border-color-emphasized-hover`, `--spectrum-tag-background-color-emphasized-hover`.", + "control": "color", + "category": "Global" + }, + "spectrum-accent-background-color-down": { + "value": "var(--spectrum-accent-color-700)", + "description": "Used by `--spectrum-tag-border-color-emphasized-active`, `--spectrum-tag-background-color-emphasized-active`.", + "control": "color", + "category": "Global" + }, + "spectrum-accent-background-color-key-focus": { + "value": "var(--spectrum-accent-color-700)", + "description": "Used by `--spectrum-tag-border-color-emphasized-focus`, `--spectrum-tag-background-color-emphasized-focus`.", + "control": "color", + "category": "Global" + }, + "spectrum-disabled-content-color": { + "value": "var(--spectrum-gray-400)", + "description": "Used by `--spectrum-tag-content-color-disabled`.", + "control": "color", + "category": "Global" + }, + "spectrum-component-height-100": { + "value": "32px", + "description": "Used by `--spectrum-tag-height`.", + "control": "text", + "category": "Global" + }, + "spectrum-font-size-100": { + "value": "14px", + "description": "Used by `--spectrum-tag-font-size`.", + "control": "text", + "category": "Global" + }, + "spectrum-workflow-icon-size-100": { + "value": "20px", + "description": "Used by `--spectrum-tag-icon-size`.", + "control": "text", + "category": "Global" + }, + "spectrum-text-to-visual-100": { + "value": "6px", + "description": "Used by `--spectrum-tag-clear-button-spacing-inline-start`, `--spectrum-tag-icon-spacing-inline-end`, `--spectrum-tag-avatar-spacing-inline-end`.", + "control": "text", + "category": "Global" + }, + "spectrum-component-top-to-workflow-icon-100": { + "value": "6px", + "description": "Used by `--spectrum-tag-icon-spacing-block-start`, `--spectrum-tag-icon-spacing-block-end`.", + "control": "text", + "category": "Global" + }, + "spectrum-component-top-to-text-100": { + "value": "6px", + "description": "Used by `--spectrum-tag-label-spacing-block`.", + "control": "text", + "category": "Global" + }, + "spectrum-component-height-75": { + "value": "24px", + "description": "Used by `--spectrum-tag-height`.", + "control": "text", + "category": "Global" + }, + "spectrum-font-size-75": { + "value": "12px", + "description": "Used by `--spectrum-tag-font-size`.", + "control": "text", + "category": "Global" + }, + "spectrum-workflow-icon-size-75": { + "value": "16px", + "description": "Used by `--spectrum-tag-icon-size`.", + "control": "text", + "category": "Global" + }, + "spectrum-text-to-visual-75": { + "value": "5px", + "description": "Used by `--spectrum-tag-clear-button-spacing-inline-start`, `--spectrum-tag-icon-spacing-inline-end`, `--spectrum-tag-avatar-spacing-inline-end`.", + "control": "text", + "category": "Global" + }, + "spectrum-component-top-to-workflow-icon-75": { + "value": "4px", + "description": "Used by `--spectrum-tag-icon-spacing-block-start`, `--spectrum-tag-icon-spacing-block-end`.", + "control": "text", + "category": "Global" + }, + "spectrum-component-top-to-text-75": { + "value": "4px", + "description": "Used by `--spectrum-tag-label-spacing-block`.", + "control": "text", + "category": "Global" + }, + "spectrum-component-height-200": { + "value": "40px", + "description": "Used by `--spectrum-tag-height`.", + "control": "text", + "category": "Global" + }, + "spectrum-font-size-200": { + "value": "16px", + "description": "Used by `--spectrum-tag-font-size`.", + "control": "text", + "category": "Global" + }, + "spectrum-workflow-icon-size-200": { + "value": "22px", + "description": "Used by `--spectrum-tag-icon-size`.", + "control": "text", + "category": "Global" + }, + "spectrum-text-to-visual-200": { + "value": "7px", + "description": "Used by `--spectrum-tag-clear-button-spacing-inline-start`, `--spectrum-tag-icon-spacing-inline-end`, `--spectrum-tag-avatar-spacing-inline-end`.", + "control": "text", + "category": "Global" + }, + "spectrum-component-top-to-workflow-icon-200": { + "value": "9px", + "description": "Used by `--spectrum-tag-icon-spacing-block-start`, `--spectrum-tag-icon-spacing-block-end`.", + "control": "text", + "category": "Global" + }, + "spectrum-component-top-to-text-200": { + "value": "9px", + "description": "Used by `--spectrum-tag-label-spacing-block`.", + "control": "text", + "category": "Global" + }, + "spectrum-clearbutton-fill-size": { + "description": "Defined in `.spectrum-Tag .spectrum-Tag-clearButton`.
Used by `.spectrum-Tag .spectrum-Tag-clearButton .spectrum-ClearButton-fill`.", + "control": "text", + "category": "Global" + }, + "spectrum-clearbutton-fill-background-color": { + "description": "Defined in `.spectrum-Tag .spectrum-Tag-clearButton`.
Used by `.spectrum-Tag .spectrum-Tag-clearButton .spectrum-ClearButton-fill`.", + "control": "color", + "category": "Global" + } + }, + "system-theme": { + "system-tag-background-color": { + "description": "Defined in `.spectrum`.
Used by `--spectrum-tag-background-color`.", + "control": "color" + }, + "system-tag-background-color-hover": { + "description": "Defined in `.spectrum`.
Used by `--spectrum-tag-background-color-hover`.", + "control": "color" + }, + "system-tag-background-color-active": { + "description": "Defined in `.spectrum`.
Used by `--spectrum-tag-background-color-active`.", + "control": "color" + }, + "system-tag-background-color-focus": { + "description": "Defined in `.spectrum`.
Used by `--spectrum-tag-background-color-focus`.", + "control": "color" + }, + "system-tag-size-small-corner-radius": { + "description": "Defined in `.spectrum`.
Used by `--spectrum-tag-size-small-corner-radius`.", + "control": "text" + }, + "system-tag-size-medium-corner-radius": { + "description": "Defined in `.spectrum`.
Used by `--spectrum-tag-size-medium-corner-radius`.", + "control": "text" + }, + "system-tag-size-large-corner-radius": { + "description": "Defined in `.spectrum`.
Used by `--spectrum-tag-size-large-corner-radius`.", + "control": "text" + }, + "system-tag-border-color": { + "description": "Defined in `.spectrum`.
Used by `--spectrum-tag-border-color`.", + "control": "color" + }, + "system-tag-border-color-hover": { + "description": "Defined in `.spectrum`.
Used by `--spectrum-tag-border-color-hover`.", + "control": "color" + }, + "system-tag-border-color-active": { + "description": "Defined in `.spectrum`.
Used by `--spectrum-tag-border-color-active`.", + "control": "color" + }, + "system-tag-border-color-focus": { + "description": "Defined in `.spectrum`.
Used by `--spectrum-tag-border-color-focus`.", + "control": "color" + }, + "system-tag-content-color": { + "description": "Defined in `.spectrum`.
Used by `--spectrum-tag-content-color`.", + "control": "color" + }, + "system-tag-content-color-hover": { + "description": "Defined in `.spectrum`.
Used by `--spectrum-tag-content-color-hover`.", + "control": "color" + }, + "system-tag-content-color-active": { + "description": "Defined in `.spectrum`.
Used by `--spectrum-tag-content-color-active`.", + "control": "color" + }, + "system-tag-content-color-focus": { + "description": "Defined in `.spectrum`.
Used by `--spectrum-tag-content-color-focus`.", + "control": "color" + }, + "system-tag-content-color-selected": { + "description": "Defined in `.spectrum`.
Used by `--spectrum-tag-content-color-selected`.", + "control": "color" + }, + "system-tag-border-color-selected": { + "description": "Defined in `.spectrum`.
Used by `--spectrum-tag-border-color-selected`.", + "control": "color" + }, + "system-tag-border-color-selected-hover": { + "description": "Defined in `.spectrum`.
Used by `--spectrum-tag-border-color-selected-hover`.", + "control": "color" + }, + "system-tag-border-color-selected-active": { + "description": "Defined in `.spectrum`.
Used by `--spectrum-tag-border-color-selected-active`.", + "control": "color" + }, + "system-tag-border-color-selected-focus": { + "description": "Defined in `.spectrum`.
Used by `--spectrum-tag-border-color-selected-focus`.", + "control": "color" + }, + "system-tag-border-color-disabled": { + "description": "Defined in `.spectrum`.
Used by `--spectrum-tag-border-color-disabled`.", + "control": "color" + }, + "system-tag-background-color-disabled": { + "description": "Defined in `.spectrum`.
Used by `--spectrum-tag-background-color-disabled`.", + "control": "color" + }, + "system-tag-size-small-spacing-inline-start": { + "description": "Defined in `.spectrum`.
Used by `--spectrum-tag-size-small-spacing-inline-start`.", + "control": "text" + }, + "system-tag-size-small-label-spacing-inline-end": { + "description": "Defined in `.spectrum`.
Used by `--spectrum-tag-size-small-label-spacing-inline-end`.", + "control": "text" + }, + "system-tag-size-small-clear-button-spacing-inline-end": { + "description": "Defined in `.spectrum`.
Used by `--spectrum-tag-size-small-clear-button-spacing-inline-end`.", + "control": "text" + }, + "system-tag-size-medium-spacing-inline-start": { + "description": "Defined in `.spectrum`.
Used by `--spectrum-tag-size-medium-spacing-inline-start`.", + "control": "text" + }, + "system-tag-size-medium-label-spacing-inline-end": { + "description": "Defined in `.spectrum`.
Used by `--spectrum-tag-size-medium-label-spacing-inline-end`.", + "control": "text" + }, + "system-tag-size-medium-clear-button-spacing-inline-end": { + "description": "Defined in `.spectrum`.
Used by `--spectrum-tag-size-medium-clear-button-spacing-inline-end`.", + "control": "text" + }, + "system-tag-size-large-spacing-inline-start": { + "description": "Defined in `.spectrum`.
Used by `--spectrum-tag-size-large-spacing-inline-start`.", + "control": "text" + }, + "system-tag-size-large-label-spacing-inline-end": { + "description": "Defined in `.spectrum`.
Used by `--spectrum-tag-size-large-label-spacing-inline-end`.", + "control": "text" + }, + "system-tag-size-large-clear-button-spacing-inline-end": { + "description": "Defined in `.spectrum`.
Used by `--spectrum-tag-size-large-clear-button-spacing-inline-end`.", + "control": "text" + } + }, + "passthroughs": { + "mod-clear-button-width": { + "category": "Passthrough" + }, + "mod-clearbutton-fill-background-color": { + "category": "Passthrough" + }, + "mod-clearbutton-fill-size": { + "category": "Passthrough" + }, + "mod-avatar-opacity-disabled": { + "category": "Passthrough" + } + }, + "high-contrast": { + "highcontrast-tag-border-color": { + "value": "var(--mod-tag-border-color, var(--spectrum-tag-border-color))", + "description": "Defined in `.spectrum-Tag`.
Used by `.spectrum-Tag`.
Defaults to `var(--mod-tag-border-color, var(--spectrum-tag-border-color))`, if not set.", + "control": "color" + }, + "highcontrast-tag-background-color": { + "value": "var(--mod-tag-background-color, var(--spectrum-tag-background-color))", + "description": "Defined in `.spectrum-Tag`.
Used by `.spectrum-Tag`.
Defaults to `var(--mod-tag-background-color, var(--spectrum-tag-background-color))`, if not set.", + "control": "color" + }, + "highcontrast-tag-content-color": { + "value": "var(--mod-tag-content-color, var(--spectrum-tag-content-color))", + "description": "Defined in `.spectrum-Tag`.
Used by `.spectrum-Tag`.
Defaults to `var(--mod-tag-content-color, var(--spectrum-tag-content-color))`, if not set.", + "control": "color" + }, + "highcontrast-tag-border-color-active": { + "value": "var(--mod-tag-border-color-active, var(--spectrum-tag-border-color-active))", + "description": "Defined in `.spectrum-Tag`.
Used by `.spectrum-Tag:active`.
Defaults to `var(--mod-tag-border-color-active, var(--spectrum-tag-border-color-active))`, if not set.", + "control": "color" + }, + "highcontrast-tag-background-color-active": { + "value": "var(--mod-tag-background-color-active, var(--spectrum-tag-background-color-active))", + "description": "Defined in `.spectrum-Tag`.
Used by `.spectrum-Tag:active`.
Defaults to `var(--mod-tag-background-color-active, var(--spectrum-tag-background-color-active))`, if not set.", + "control": "color" + }, + "highcontrast-tag-content-color-active": { + "value": "var(--mod-tag-content-color-active, var(--spectrum-tag-content-color-active))", + "description": "Defined in `.spectrum-Tag`.
Used by `.spectrum-Tag:active`.
Defaults to `var(--mod-tag-content-color-active, var(--spectrum-tag-content-color-active))`, if not set.", + "control": "color" + }, + "highcontrast-tag-border-color-focus": { + "value": "var(--mod-tag-border-color-focus, var(--spectrum-tag-border-color-focus))", + "description": "Defined in `.spectrum-Tag`.
Used by `.spectrum-Tag.is-focused, .spectrum-Tag:focus-visible`.
Defaults to `var(--mod-tag-border-color-focus, var(--spectrum-tag-border-color-focus))`, if not set.", + "control": "color" + }, + "highcontrast-tag-background-color-focus": { + "value": "var(--mod-tag-background-color-focus, var(--spectrum-tag-background-color-focus))", + "description": "Defined in `.spectrum-Tag`.
Used by `.spectrum-Tag.is-focused, .spectrum-Tag:focus-visible`.
Defaults to `var(--mod-tag-background-color-focus, var(--spectrum-tag-background-color-focus))`, if not set.", + "control": "color" + }, + "highcontrast-tag-content-color-focus": { + "value": "var(--mod-tag-content-color-focus, var(--spectrum-tag-content-color-focus))", + "description": "Defined in `.spectrum-Tag`.
Used by `.spectrum-Tag.is-focused, .spectrum-Tag:focus-visible`.
Defaults to `var(--mod-tag-content-color-focus, var(--spectrum-tag-content-color-focus))`, if not set.", + "control": "color" + }, + "highcontrast-tag-focus-ring-color": { + "value": "var(--mod-tag-focus-ring-color, var(--spectrum-tag-focus-ring-color))", + "description": "Defined in `.spectrum-Tag`.
Used by `.spectrum-Tag.is-focused:after, .spectrum-Tag:focus-visible:after`.
Defaults to `var(--mod-tag-focus-ring-color, var(--spectrum-tag-focus-ring-color))`, if not set.", + "control": "color" + }, + "highcontrast-tag-border-color-selected": { + "value": "var(--mod-tag-border-color-selected, var(--spectrum-tag-border-color-selected))", + "description": "Defined in `.spectrum-Tag.is-selected`.
Used by `.spectrum-Tag.is-selected`.
Defaults to `var(--mod-tag-border-color-selected, var(--spectrum-tag-border-color-selected))`, if not set.", + "control": "color" + }, + "highcontrast-tag-background-color-selected": { + "value": "var(--mod-tag-background-color-selected, var(--spectrum-tag-background-color-selected))", + "description": "Defined in `.spectrum-Tag.is-selected`.
Used by `.spectrum-Tag.is-selected`.
Defaults to `var(--mod-tag-background-color-selected, var(--spectrum-tag-background-color-selected))`, if not set.", + "control": "color" + }, + "highcontrast-tag-content-color-selected": { + "value": "var(--mod-tag-content-color-selected, var(--spectrum-tag-content-color-selected))", + "description": "Defined in `.spectrum-Tag.is-selected`.
Used by `.spectrum-Tag.is-selected`, `.spectrum-Tag.is-selected:hover`.
Defaults to `var(--mod-tag-content-color-selected, var(--spectrum-tag-content-color-selected))`, if not set.", + "control": "color" + }, + "highcontrast-tag-border-color-selected-active": { + "value": "var(--mod-tag-border-color-selected-active, var(--spectrum-tag-border-color-selected-active))", + "description": "Defined in `.spectrum-Tag.is-selected`.
Used by `.spectrum-Tag.is-selected:active`.
Defaults to `var(--mod-tag-border-color-selected-active, var(--spectrum-tag-border-color-selected-active))`, if not set.", + "control": "color" + }, + "highcontrast-tag-background-color-selected-active": { + "value": "var(--mod-tag-background-color-selected-active, var(--spectrum-tag-background-color-selected-active))", + "description": "Defined in `.spectrum-Tag.is-selected`.
Used by `.spectrum-Tag.is-selected:active`.
Defaults to `var(--mod-tag-background-color-selected-active, var(--spectrum-tag-background-color-selected-active))`, if not set.", + "control": "color" + }, + "highcontrast-tag-border-color-selected-focus": { + "value": "var(--mod-tag-border-color-selected-focus, var(--spectrum-tag-border-color-selected-focus))", + "description": "Defined in `.spectrum-Tag.is-selected`.
Used by `.spectrum-Tag.is-selected.is-focused, .spectrum-Tag.is-selected:focus-visible`.
Defaults to `var(--mod-tag-border-color-selected-focus, var(--spectrum-tag-border-color-selected-focus))`, if not set.", + "control": "color" + }, + "highcontrast-tag-background-color-selected-focus": { + "value": "var(--mod-tag-background-color-selected-focus, var(--spectrum-tag-background-color-selected-focus))", + "description": "Defined in `.spectrum-Tag.is-selected`.
Used by `.spectrum-Tag.is-selected.is-focused, .spectrum-Tag.is-selected:focus-visible`.
Defaults to `var(--mod-tag-background-color-selected-focus, var(--spectrum-tag-background-color-selected-focus))`, if not set.", + "control": "color" + }, + "highcontrast-tag-border-color-invalid": { + "value": "var(--mod-tag-border-color-invalid, var(--spectrum-tag-border-color-invalid))", + "description": "Defined in `.spectrum-Tag.is-invalid`.
Used by `.spectrum-Tag.is-invalid`.
Defaults to `var(--mod-tag-border-color-invalid, var(--spectrum-tag-border-color-invalid))`, if not set.", + "control": "color" + }, + "highcontrast-tag-content-color-invalid": { + "value": "var(--mod-tag-content-color-invalid, var(--spectrum-tag-content-color-invalid))", + "description": "Defined in `.spectrum-Tag.is-invalid`.
Used by `.spectrum-Tag.is-invalid`.
Defaults to `var(--mod-tag-content-color-invalid, var(--spectrum-tag-content-color-invalid))`, if not set.", + "control": "color" + }, + "highcontrast-tag-border-color-invalid-active": { + "value": "var(--mod-tag-border-color-invalid-active, var(--spectrum-tag-border-color-invalid-active))", + "description": "Defined in `.spectrum-Tag.is-invalid`.
Used by `.spectrum-Tag.is-invalid:active`.
Defaults to `var(--mod-tag-border-color-invalid-active, var(--spectrum-tag-border-color-invalid-active))`, if not set.", + "control": "color" + }, + "highcontrast-tag-content-color-invalid-active": { + "value": "var(--mod-tag-content-color-invalid-active, var(--spectrum-tag-content-color-invalid-active))", + "description": "Defined in `.spectrum-Tag.is-invalid`.
Used by `.spectrum-Tag.is-invalid:active`.
Defaults to `var(--mod-tag-content-color-invalid-active, var(--spectrum-tag-content-color-invalid-active))`, if not set.", + "control": "color" + }, + "highcontrast-tag-border-color-invalid-focus": { + "value": "var(--mod-tag-border-color-invalid-focus, var(--spectrum-tag-border-color-invalid-focus))", + "description": "Defined in `.spectrum-Tag.is-invalid`.
Used by `.spectrum-Tag.is-invalid.is-focused, .spectrum-Tag.is-invalid:focus-visible`.
Defaults to `var(--mod-tag-border-color-invalid-focus, var(--spectrum-tag-border-color-invalid-focus))`, if not set.", + "control": "color" + }, + "highcontrast-tag-content-color-invalid-focus": { + "value": "var(--mod-tag-content-color-invalid-focus, var(--spectrum-tag-content-color-invalid-focus))", + "description": "Defined in `.spectrum-Tag.is-invalid`.
Used by `.spectrum-Tag.is-invalid.is-focused, .spectrum-Tag.is-invalid:focus-visible`.
Defaults to `var(--mod-tag-content-color-invalid-focus, var(--spectrum-tag-content-color-invalid-focus))`, if not set.", + "control": "color" + }, + "highcontrast-tag-border-color-invalid-selected": { + "value": "var(--mod-tag-border-color-invalid-selected, var(--spectrum-tag-border-color-invalid-selected))", + "description": "Defined in `.spectrum-Tag.is-invalid.is-selected`.
Used by `.spectrum-Tag.is-invalid.is-selected`.
Defaults to `var(--mod-tag-border-color-invalid-selected, var(--spectrum-tag-border-color-invalid-selected))`, if not set.", + "control": "color" + }, + "highcontrast-tag-background-color-invalid-selected": { + "value": "var(--mod-tag-background-color-invalid-selected, var(--spectrum-tag-background-color-invalid-selected))", + "description": "Defined in `.spectrum-Tag.is-invalid.is-selected`.
Used by `.spectrum-Tag.is-invalid.is-selected`.
Defaults to `var(--mod-tag-background-color-invalid-selected, var(--spectrum-tag-background-color-invalid-selected))`, if not set.", + "control": "color" + }, + "highcontrast-tag-content-color-invalid-selected": { + "value": "var(--mod-tag-content-color-invalid-selected, var(--spectrum-tag-content-color-invalid-selected))", + "description": "Defined in `.spectrum-Tag.is-invalid.is-selected`.
Used by `.spectrum-Tag.is-invalid.is-selected`, `.spectrum-Tag.is-invalid.is-selected:hover`.
Defaults to `var(--mod-tag-content-color-invalid-selected, var(--spectrum-tag-content-color-invalid-selected))`, if not set.", + "control": "color" + }, + "highcontrast-tag-border-color-invalid-selected-active": { + "value": "var(--mod-tag-border-color-invalid-selected-active, var(--spectrum-tag-border-color-invalid-selected-active))", + "description": "Defined in `.spectrum-Tag.is-invalid.is-selected`.
Used by `.spectrum-Tag.is-invalid.is-selected:active`.
Defaults to `var(--mod-tag-border-color-invalid-selected-active, var(--spectrum-tag-border-color-invalid-selected-active))`, if not set.", + "control": "color" + }, + "highcontrast-tag-background-color-invalid-selected-active": { + "value": "var(--mod-tag-background-color-invalid-selected-active, var(--spectrum-tag-background-color-invalid-selected-active))", + "description": "Defined in `.spectrum-Tag.is-invalid.is-selected`.
Used by `.spectrum-Tag.is-invalid.is-selected:active`.
Defaults to `var(--mod-tag-background-color-invalid-selected-active, var(--spectrum-tag-background-color-invalid-selected-active))`, if not set.", + "control": "color" + }, + "highcontrast-tag-border-color-invalid-selected-focus": { + "value": "var(--mod-tag-border-color-invalid-selected-focus, var(--spectrum-tag-border-color-invalid-selected-focus))", + "description": "Defined in `.spectrum-Tag.is-invalid.is-selected`.
Used by `.spectrum-Tag.is-invalid.is-selected.is-focused, .spectrum-Tag.is-invalid.is-selected:focus-visible`.
Defaults to `var(--mod-tag-border-color-invalid-selected-focus, var(--spectrum-tag-border-color-invalid-selected-focus))`, if not set.", + "control": "color" + }, + "highcontrast-tag-background-color-invalid-selected-focus": { + "value": "var(--mod-tag-background-color-invalid-selected-focus, var(--spectrum-tag-background-color-invalid-selected-focus))", + "description": "Defined in `.spectrum-Tag.is-invalid.is-selected`.
Used by `.spectrum-Tag.is-invalid.is-selected.is-focused, .spectrum-Tag.is-invalid.is-selected:focus-visible`.
Defaults to `var(--mod-tag-background-color-invalid-selected-focus, var(--spectrum-tag-background-color-invalid-selected-focus))`, if not set.", + "control": "color" + }, + "highcontrast-tag-border-color-emphasized": { + "value": "var(--mod-tag-border-color-emphasized, var(--spectrum-tag-border-color-emphasized))", + "description": "Defined in `.spectrum-Tag.is-emphasized`.
Used by `.spectrum-Tag.is-emphasized`.
Defaults to `var(--mod-tag-border-color-emphasized, var(--spectrum-tag-border-color-emphasized))`, if not set.", + "control": "color" + }, + "highcontrast-tag-background-color-emphasized": { + "value": "var(--mod-tag-background-color-emphasized, var(--spectrum-tag-background-color-emphasized))", + "description": "Defined in `.spectrum-Tag.is-emphasized`.
Used by `.spectrum-Tag.is-emphasized`.
Defaults to `var(--mod-tag-background-color-emphasized, var(--spectrum-tag-background-color-emphasized))`, if not set.", + "control": "color" + }, + "highcontrast-tag-content-color-emphasized": { + "value": "var(--mod-tag-content-color-emphasized, var(--spectrum-tag-content-color-emphasized))", + "description": "Defined in `.spectrum-Tag.is-emphasized`.
Used by `.spectrum-Tag.is-emphasized`, `.spectrum-Tag.is-emphasized:hover`.
Defaults to `var(--mod-tag-content-color-emphasized, var(--spectrum-tag-content-color-emphasized))`, if not set.", + "control": "color" + }, + "highcontrast-tag-border-color-hover": { + "value": "var(--mod-tag-border-color-hover, var(--spectrum-tag-border-color-hover))", + "description": "Defined in `.spectrum-Tag`.
Used by `.spectrum-Tag:hover`.
Defaults to `var(--mod-tag-border-color-hover, var(--spectrum-tag-border-color-hover))`, if not set.", + "control": "color" + }, + "highcontrast-tag-background-color-hover": { + "value": "var(--mod-tag-background-color-hover, var(--spectrum-tag-background-color-hover))", + "description": "Defined in `.spectrum-Tag`.
Used by `.spectrum-Tag:hover`.
Defaults to `var(--mod-tag-background-color-hover, var(--spectrum-tag-background-color-hover))`, if not set.", + "control": "color" + }, + "highcontrast-tag-content-color-hover": { + "value": "var(--mod-tag-content-color-hover, var(--spectrum-tag-content-color-hover))", + "description": "Defined in `.spectrum-Tag`.
Used by `.spectrum-Tag:hover`.
Defaults to `var(--mod-tag-content-color-hover, var(--spectrum-tag-content-color-hover))`, if not set.", + "control": "color" + }, + "highcontrast-tag-border-color-selected-hover": { + "value": "var(--mod-tag-border-color-selected-hover, var(--spectrum-tag-border-color-selected-hover))", + "description": "Defined in `.spectrum-Tag.is-selected`.
Used by `.spectrum-Tag.is-selected:hover`.
Defaults to `var(--mod-tag-border-color-selected-hover, var(--spectrum-tag-border-color-selected-hover))`, if not set.", + "control": "color" + }, + "highcontrast-tag-background-color-selected-hover": { + "value": "var(--mod-tag-background-color-selected-hover, var(--spectrum-tag-background-color-selected-hover))", + "description": "Defined in `.spectrum-Tag.is-selected`.
Used by `.spectrum-Tag.is-selected:hover`.
Defaults to `var(--mod-tag-background-color-selected-hover, var(--spectrum-tag-background-color-selected-hover))`, if not set.", + "control": "color" + }, + "highcontrast-tag-border-color-invalid-hover": { + "value": "var(--mod-tag-border-color-invalid-hover, var(--spectrum-tag-border-color-invalid-hover))", + "description": "Defined in `.spectrum-Tag.is-invalid`.
Used by `.spectrum-Tag.is-invalid:hover`.
Defaults to `var(--mod-tag-border-color-invalid-hover, var(--spectrum-tag-border-color-invalid-hover))`, if not set.", + "control": "color" + }, + "highcontrast-tag-content-color-invalid-hover": { + "value": "var(--mod-tag-content-color-invalid-hover, var(--spectrum-tag-content-color-invalid-hover))", + "description": "Defined in `.spectrum-Tag.is-invalid`.
Used by `.spectrum-Tag.is-invalid:hover`.
Defaults to `var(--mod-tag-content-color-invalid-hover, var(--spectrum-tag-content-color-invalid-hover))`, if not set.", + "control": "color" + }, + "highcontrast-tag-border-color-invalid-selected-hover": { + "value": "var(--mod-tag-border-color-invalid-selected-hover, var(--spectrum-tag-border-color-invalid-selected-hover))", + "description": "Defined in `.spectrum-Tag.is-invalid.is-selected`.
Used by `.spectrum-Tag.is-invalid.is-selected:hover`.
Defaults to `var(--mod-tag-border-color-invalid-selected-hover, var(--spectrum-tag-border-color-invalid-selected-hover))`, if not set.", + "control": "color" + }, + "highcontrast-tag-background-color-invalid-selected-hover": { + "value": "var(--mod-tag-background-color-invalid-selected-hover, var(--spectrum-tag-background-color-invalid-selected-hover))", + "description": "Defined in `.spectrum-Tag.is-invalid.is-selected`.
Used by `.spectrum-Tag.is-invalid.is-selected:hover`.
Defaults to `var(--mod-tag-background-color-invalid-selected-hover, var(--spectrum-tag-background-color-invalid-selected-hover))`, if not set.", + "control": "color" + }, + "highcontrast-tag-border-color-emphasized-hover": { + "value": "var(--mod-tag-border-color-emphasized-hover, var(--spectrum-tag-border-color-emphasized-hover))", + "description": "Defined in `.spectrum-Tag.is-emphasized`.
Used by `.spectrum-Tag.is-emphasized:hover`.
Defaults to `var(--mod-tag-border-color-emphasized-hover, var(--spectrum-tag-border-color-emphasized-hover))`, if not set.", + "control": "color" + }, + "highcontrast-tag-background-color-emphasized-hover": { + "value": "var(--mod-tag-background-color-emphasized-hover, var(--spectrum-tag-background-color-emphasized-hover))", + "description": "Defined in `.spectrum-Tag.is-emphasized`.
Used by `.spectrum-Tag.is-emphasized:hover`.
Defaults to `var(--mod-tag-background-color-emphasized-hover, var(--spectrum-tag-background-color-emphasized-hover))`, if not set.", + "control": "color" + }, + "highcontrast-tag-border-color-emphasized-active": { + "value": "var(--mod-tag-border-color-emphasized-active, var(--spectrum-tag-border-color-emphasized-active))", + "description": "Defined in `.spectrum-Tag.is-emphasized`.
Used by `.spectrum-Tag.is-emphasized:active`.
Defaults to `var(--mod-tag-border-color-emphasized-active, var(--spectrum-tag-border-color-emphasized-active))`, if not set.", + "control": "color" + }, + "highcontrast-tag-background-color-emphasized-active": { + "value": "var(--mod-tag-background-color-emphasized-active, var(--spectrum-tag-background-color-emphasized-active))", + "description": "Defined in `.spectrum-Tag.is-emphasized`.
Used by `.spectrum-Tag.is-emphasized:active`.
Defaults to `var(--mod-tag-background-color-emphasized-active, var(--spectrum-tag-background-color-emphasized-active))`, if not set.", + "control": "color" + }, + "highcontrast-tag-border-color-emphasized-focus": { + "value": "var(--mod-tag-border-color-emphasized-focus, var(--spectrum-tag-border-color-emphasized-focus))", + "description": "Defined in `.spectrum-Tag.is-emphasized`.
Used by `.spectrum-Tag.is-emphasized.is-focused, .spectrum-Tag.is-emphasized:focus-visible`.
Defaults to `var(--mod-tag-border-color-emphasized-focus, var(--spectrum-tag-border-color-emphasized-focus))`, if not set.", + "control": "color" + }, + "highcontrast-tag-background-color-emphasized-focus": { + "value": "var(--mod-tag-background-color-emphasized-focus, var(--spectrum-tag-background-color-emphasized-focus))", + "description": "Defined in `.spectrum-Tag.is-emphasized`.
Used by `.spectrum-Tag.is-emphasized.is-focused, .spectrum-Tag.is-emphasized:focus-visible`.
Defaults to `var(--mod-tag-background-color-emphasized-focus, var(--spectrum-tag-background-color-emphasized-focus))`, if not set.", + "control": "color" + }, + "highcontrast-tag-border-color-disabled": { + "value": "var(--mod-tag-border-color-disabled, var(--spectrum-tag-border-color-disabled))", + "description": "Defined in `.spectrum-Tag.is-disabled`.
Used by `.spectrum-Tag.is-disabled`.
Defaults to `var(--mod-tag-border-color-disabled, var(--spectrum-tag-border-color-disabled))`, if not set.", + "control": "color" + }, + "highcontrast-tag-background-color-disabled": { + "value": "var(--mod-tag-background-color-disabled, var(--spectrum-tag-background-color-disabled))", + "description": "Defined in `.spectrum-Tag.is-disabled`.
Used by `.spectrum-Tag.is-disabled`.
Defaults to `var(--mod-tag-background-color-disabled, var(--spectrum-tag-background-color-disabled))`, if not set.", + "control": "color" + }, + "highcontrast-tag-content-color-disabled": { + "value": "var(--mod-tag-content-color-disabled, var(--spectrum-tag-content-color-disabled))", + "description": "Defined in `.spectrum-Tag.is-disabled`.
Used by `.spectrum-Tag.is-disabled`.
Defaults to `var(--mod-tag-content-color-disabled, var(--spectrum-tag-content-color-disabled))`, if not set.", + "control": "color" + } + } } diff --git a/components/tag/stories/tag.stories.js b/components/tag/stories/tag.stories.js index 6061c450e7d..bc2f8b4f44e 100644 --- a/components/tag/stories/tag.stories.js +++ b/components/tag/stories/tag.stories.js @@ -2,11 +2,13 @@ import { default as IconStories } from "@spectrum-css/icon/stories/icon.stories. import { Sizes } from "@spectrum-css/preview/decorators"; import { disableDefaultModes } from "@spectrum-css/preview/modes"; import { isDisabled, isEmphasized, isInvalid, isSelected, size } from "@spectrum-css/preview/types"; -import metadata from "../dist/metadata.json"; -import packageJson from "../package.json"; import { TagGroups } from "./tag.test.js"; import { SelectedTemplate, TagsDefaultOptions } from "./template.js"; +// Local assets to render the component styles and structure +import metadata from "../dist/metadata.json"; +import packageJson from "../package.json"; + /** * A tag categorizes content. It can represent keywords or people, and are [grouped](?path=/docs/components-tag-group--docs) to describe an item or a search request. */ @@ -100,6 +102,7 @@ export default { }, packageJson, metadata, + cssprops: metadata.modifiers, }, }; diff --git a/components/taggroup/dist/metadata.json b/components/taggroup/dist/metadata.json index 10ed81256ff..80b67475b79 100644 --- a/components/taggroup/dist/metadata.json +++ b/components/taggroup/dist/metadata.json @@ -1,16 +1,41 @@ { "sourceFile": "index.css", "selectors": [".spectrum-TagGroup", ".spectrum-TagGroup-item"], - "modifiers": [ - "--mod-tag-group-item-margin-block", - "--mod-tag-group-item-margin-inline" - ], - "component": [ - "--spectrum-tag-group-item-margin-block", - "--spectrum-tag-group-item-margin-inline" - ], - "global": ["--spectrum-spacing-75"], - "system-theme": [], - "passthroughs": [], - "high-contrast": [] + "modifiers": { + "mod-tag-group-item-margin-block": { + "value": "var(--spectrum-tag-group-item-margin-block)", + "description": "Used by `.spectrum-TagGroup-item`.
Defaults to `var(--spectrum-tag-group-item-margin-block)`, if not set.", + "control": "text", + "category": "Modifier" + }, + "mod-tag-group-item-margin-inline": { + "value": "var(--spectrum-tag-group-item-margin-inline)", + "description": "Used by `.spectrum-TagGroup-item`.
Defaults to `var(--spectrum-tag-group-item-margin-inline)`, if not set.", + "control": "text", + "category": "Modifier" + } + }, + "component": { + "spectrum-tag-group-item-margin-block": { + "description": "Defined in `.spectrum-TagGroup`.
Used by `.spectrum-TagGroup-item`.", + "control": "text", + "category": "Component" + }, + "spectrum-tag-group-item-margin-inline": { + "description": "Defined in `.spectrum-TagGroup`.
Used by `.spectrum-TagGroup-item`.", + "control": "text", + "category": "Component" + } + }, + "global": { + "spectrum-spacing-75": { + "value": "4px", + "description": "Used by `--spectrum-tag-group-item-margin-block`, `--spectrum-tag-group-item-margin-inline`.", + "control": "text", + "category": "Global" + } + }, + "system-theme": {}, + "passthroughs": {}, + "high-contrast": {} } diff --git a/components/taggroup/stories/taggroup.stories.js b/components/taggroup/stories/taggroup.stories.js index 66ef23e885d..c12f4bd5d69 100644 --- a/components/taggroup/stories/taggroup.stories.js +++ b/components/taggroup/stories/taggroup.stories.js @@ -1,10 +1,12 @@ import { disableDefaultModes } from "@spectrum-css/preview/modes"; import { default as TagStories } from "@spectrum-css/tag/stories/tag.stories.js"; -import metadata from "../dist/metadata.json"; -import packageJson from "../package.json"; import { TagGroups } from "./taggroup.test.js"; import { Template } from "./template.js"; +// Local assets to render the component styles and structure +import metadata from "../dist/metadata.json"; +import packageJson from "../package.json"; + const ignoreProps = ["rootClass", "hasClearButton", "label"]; /** @@ -61,6 +63,7 @@ export default { }, packageJson, metadata, + cssprops: metadata.modifiers, }, }; diff --git a/components/textfield/dist/metadata.json b/components/textfield/dist/metadata.json index 7e36cb740e0..189343ab273 100644 --- a/components/textfield/dist/metadata.json +++ b/components/textfield/dist/metadata.json @@ -10,12 +10,12 @@ ".is-invalid .spectrum-Textfield-input:focus-visible", ".is-invalid .spectrum-Textfield-input:focus:hover", ".is-invalid .spectrum-Textfield-input:hover:not(.is-disabled)", - ".is-invalid.is-focused .spectrum-Textfield-input", - ".is-invalid.is-focused .spectrum-Textfield-input:hover", - ".is-invalid.is-keyboardFocused .spectrum-Textfield-input", ".is-invalid:focus .spectrum-Textfield-input", ".is-invalid:focus .spectrum-Textfield-input:hover", ".is-invalid:hover:not(.is-disabled) .spectrum-Textfield-input", + ".is-invalid.is-focused .spectrum-Textfield-input", + ".is-invalid.is-focused .spectrum-Textfield-input:hover", + ".is-invalid.is-keyboardFocused .spectrum-Textfield-input", ".is-keyboardFocused .spectrum-Textfield-input", ".is-keyboardFocused .spectrum-Textfield-input::placeholder", ".is-valid .spectrum-Textfield-input", @@ -33,6 +33,7 @@ ".spectrum-Textfield--quiet .spectrum-Textfield-characterCount", ".spectrum-Textfield--quiet .spectrum-Textfield-input", ".spectrum-Textfield--quiet .spectrum-Textfield-validationIcon", + ".spectrum-Textfield--quiet:after", ".spectrum-Textfield--quiet.is-disabled .spectrum-Textfield-input", ".spectrum-Textfield--quiet.is-disabled .spectrum-Textfield-input::placeholder", ".spectrum-Textfield--quiet.is-disabled:hover .spectrum-Textfield-input", @@ -42,7 +43,6 @@ ".spectrum-Textfield--quiet.is-keyboardFocused:after", ".spectrum-Textfield--quiet.is-valid .spectrum-Textfield-input", ".spectrum-Textfield--quiet.is-valid .spectrum-Textfield-validationIcon", - ".spectrum-Textfield--quiet:after", ".spectrum-Textfield--sideLabel", ".spectrum-Textfield--sideLabel .spectrum-FieldLabel", ".spectrum-Textfield--sideLabel .spectrum-HelpText", @@ -73,6 +73,8 @@ ".spectrum-Textfield-input[type=\"number\"]", ".spectrum-Textfield-input[type=\"number\"]::-webkit-inner-spin-button", ".spectrum-Textfield-input[type=\"number\"]::-webkit-outer-spin-button", + ".spectrum-Textfield:hover .spectrum-Textfield-input", + ".spectrum-Textfield:hover .spectrum-Textfield-input::placeholder", ".spectrum-Textfield.is-disabled .spectrum-FieldLabel", ".spectrum-Textfield.is-disabled .spectrum-Textfield-input", ".spectrum-Textfield.is-disabled .spectrum-Textfield-input::placeholder", @@ -90,280 +92,1470 @@ ".spectrum-Textfield.spectrum-Textfield--sideLabel .spectrum-Textfield-validationIcon", ".spectrum-Textfield.spectrum-Textfield--sizeL", ".spectrum-Textfield.spectrum-Textfield--sizeS", - ".spectrum-Textfield.spectrum-Textfield--sizeXL", - ".spectrum-Textfield:hover .spectrum-Textfield-input", - ".spectrum-Textfield:hover .spectrum-Textfield-input::placeholder" - ], - "modifiers": [ - "--mod-texfield-animation-duration", - "--mod-text-area-min-block-size", - "--mod-text-area-min-block-size-quiet", - "--mod-text-area-min-inline-size", - "--mod-textfield-background-color", - "--mod-textfield-background-color-disabled", - "--mod-textfield-border-color", - "--mod-textfield-border-color-disabled", - "--mod-textfield-border-color-focus", - "--mod-textfield-border-color-focus-hover", - "--mod-textfield-border-color-hover", - "--mod-textfield-border-color-invalid-default", - "--mod-textfield-border-color-invalid-focus", - "--mod-textfield-border-color-invalid-focus-hover", - "--mod-textfield-border-color-invalid-hover", - "--mod-textfield-border-color-invalid-keyboard-focus", - "--mod-textfield-border-color-keyboard-focus", - "--mod-textfield-border-width", - "--mod-textfield-character-count-font-family", - "--mod-textfield-character-count-font-size", - "--mod-textfield-character-count-font-weight", - "--mod-textfield-character-count-spacing-block", - "--mod-textfield-character-count-spacing-block-quiet", - "--mod-textfield-character-count-spacing-block-side", - "--mod-textfield-character-count-spacing-inline", - "--mod-textfield-character-count-spacing-inline-side", - "--mod-textfield-corner-radius", - "--mod-textfield-focus-indicator-color", - "--mod-textfield-focus-indicator-gap", - "--mod-textfield-focus-indicator-width", - "--mod-textfield-font-family", - "--mod-textfield-font-weight", - "--mod-textfield-height", - "--mod-textfield-helptext-spacing-block", - "--mod-textfield-icon-color-invalid", - "--mod-textfield-icon-color-valid", - "--mod-textfield-icon-size-invalid", - "--mod-textfield-icon-size-valid", - "--mod-textfield-icon-spacing-block-invalid", - "--mod-textfield-icon-spacing-block-valid", - "--mod-textfield-icon-spacing-inline-end-invalid", - "--mod-textfield-icon-spacing-inline-end-quiet-invalid", - "--mod-textfield-icon-spacing-inline-end-quiet-valid", - "--mod-textfield-icon-spacing-inline-end-valid", - "--mod-textfield-icon-spacing-inline-start-invalid", - "--mod-textfield-icon-spacing-inline-start-valid", - "--mod-textfield-label-spacing-block", - "--mod-textfield-label-spacing-block-quiet", - "--mod-textfield-label-spacing-inline-side-label", - "--mod-textfield-min-width", - "--mod-textfield-placeholder-font-size", - "--mod-textfield-spacing-block-end", - "--mod-textfield-spacing-block-quiet", - "--mod-textfield-spacing-block-start", - "--mod-textfield-spacing-inline", - "--mod-textfield-spacing-inline-quiet", - "--mod-textfield-text-color-default", - "--mod-textfield-text-color-disabled", - "--mod-textfield-text-color-focus", - "--mod-textfield-text-color-focus-hover", - "--mod-textfield-text-color-hover", - "--mod-textfield-text-color-invalid", - "--mod-textfield-text-color-keyboard-focus", - "--mod-textfield-text-color-readonly", - "--mod-textfield-text-color-valid", - "--mod-textfield-width" - ], - "component": [ - "--spectrum-text-field-minimum-width-multiplier", - "--spectrum-textfield-background-color", - "--spectrum-textfield-background-color-disabled", - "--spectrum-textfield-border-color", - "--spectrum-textfield-border-color-disabled", - "--spectrum-textfield-border-color-focus", - "--spectrum-textfield-border-color-focus-hover", - "--spectrum-textfield-border-color-hover", - "--spectrum-textfield-border-color-invalid-default", - "--spectrum-textfield-border-color-invalid-focus", - "--spectrum-textfield-border-color-invalid-focus-hover", - "--spectrum-textfield-border-color-invalid-hover", - "--spectrum-textfield-border-color-invalid-keyboard-focus", - "--spectrum-textfield-border-color-keyboard-focus", - "--spectrum-textfield-border-width", - "--spectrum-textfield-character-count-font-family", - "--spectrum-textfield-character-count-font-size", - "--spectrum-textfield-character-count-font-weight", - "--spectrum-textfield-character-count-spacing-block", - "--spectrum-textfield-character-count-spacing-block-quiet", - "--spectrum-textfield-character-count-spacing-block-side", - "--spectrum-textfield-character-count-spacing-inline", - "--spectrum-textfield-character-count-spacing-inline-side", - "--spectrum-textfield-corner-radius", - "--spectrum-textfield-focus-indicator-color", - "--spectrum-textfield-focus-indicator-gap", - "--spectrum-textfield-focus-indicator-width", - "--spectrum-textfield-font-family", - "--spectrum-textfield-font-weight", - "--spectrum-textfield-height", - "--spectrum-textfield-helptext-spacing-block", - "--spectrum-textfield-icon-color-invalid", - "--spectrum-textfield-icon-color-valid", - "--spectrum-textfield-icon-size-invalid", - "--spectrum-textfield-icon-size-valid", - "--spectrum-textfield-icon-spacing-block-invalid", - "--spectrum-textfield-icon-spacing-block-valid", - "--spectrum-textfield-icon-spacing-inline-end-invalid", - "--spectrum-textfield-icon-spacing-inline-end-quiet-invalid", - "--spectrum-textfield-icon-spacing-inline-end-quiet-valid", - "--spectrum-textfield-icon-spacing-inline-end-valid", - "--spectrum-textfield-icon-spacing-inline-start-invalid", - "--spectrum-textfield-icon-spacing-inline-start-valid", - "--spectrum-textfield-input-line-height", - "--spectrum-textfield-label-spacing-block", - "--spectrum-textfield-label-spacing-block-quiet", - "--spectrum-textfield-label-spacing-inline-side-label", - "--spectrum-textfield-min-width", - "--spectrum-textfield-placeholder-font-size", - "--spectrum-textfield-spacing-block-end", - "--spectrum-textfield-spacing-block-quiet", - "--spectrum-textfield-spacing-block-start", - "--spectrum-textfield-spacing-inline", - "--spectrum-textfield-spacing-inline-quiet", - "--spectrum-textfield-text-color-default", - "--spectrum-textfield-text-color-disabled", - "--spectrum-textfield-text-color-focus", - "--spectrum-textfield-text-color-focus-hover", - "--spectrum-textfield-text-color-hover", - "--spectrum-textfield-text-color-invalid", - "--spectrum-textfield-text-color-keyboard-focus", - "--spectrum-textfield-text-color-readonly", - "--spectrum-textfield-text-color-valid", - "--spectrum-textfield-width" - ], - "global": [ - "--spectrum-animation-duration-100", - "--spectrum-border-width-100", - "--spectrum-character-count-to-field-quiet-extra-large", - "--spectrum-character-count-to-field-quiet-large", - "--spectrum-character-count-to-field-quiet-medium", - "--spectrum-character-count-to-field-quiet-small", - "--spectrum-checkmark-icon-size-100", - "--spectrum-checkmark-icon-size-200", - "--spectrum-checkmark-icon-size-300", - "--spectrum-checkmark-icon-size-75", - "--spectrum-component-bottom-to-text-100", - "--spectrum-component-bottom-to-text-200", - "--spectrum-component-bottom-to-text-75", - "--spectrum-component-edge-to-text-100", - "--spectrum-component-edge-to-text-200", - "--spectrum-component-edge-to-text-75", - "--spectrum-component-height-100", - "--spectrum-component-height-200", - "--spectrum-component-height-300", - "--spectrum-component-height-75", - "--spectrum-component-top-to-text-100", - "--spectrum-component-top-to-workflow-icon-100", - "--spectrum-component-top-to-workflow-icon-200", - "--spectrum-component-top-to-workflow-icon-300", - "--spectrum-component-top-to-workflow-icon-75", - "--spectrum-corner-radius-100", - "--spectrum-disabled-content-color", - "--spectrum-field-edge-to-alert-icon-extra-large", - "--spectrum-field-edge-to-alert-icon-large", - "--spectrum-field-edge-to-alert-icon-medium", - "--spectrum-field-edge-to-alert-icon-quiet", - "--spectrum-field-edge-to-alert-icon-small", - "--spectrum-field-edge-to-border-quiet", - "--spectrum-field-edge-to-text-quiet", - "--spectrum-field-edge-to-validation-icon-extra-large", - "--spectrum-field-edge-to-validation-icon-large", - "--spectrum-field-edge-to-validation-icon-medium", - "--spectrum-field-edge-to-validation-icon-quiet", - "--spectrum-field-edge-to-validation-icon-small", - "--spectrum-field-label-to-component", - "--spectrum-field-label-to-component-quiet-extra-large", - "--spectrum-field-label-to-component-quiet-large", - "--spectrum-field-label-to-component-quiet-medium", - "--spectrum-field-label-to-component-quiet-small", - "--spectrum-field-text-to-alert-icon-extra-large", - "--spectrum-field-text-to-alert-icon-large", - "--spectrum-field-text-to-alert-icon-medium", - "--spectrum-field-text-to-alert-icon-small", - "--spectrum-field-text-to-validation-icon-extra-large", - "--spectrum-field-text-to-validation-icon-large", - "--spectrum-field-text-to-validation-icon-medium", - "--spectrum-field-text-to-validation-icon-small", - "--spectrum-field-top-to-validation-icon-extra-large", - "--spectrum-field-top-to-validation-icon-large", - "--spectrum-field-top-to-validation-icon-medium", - "--spectrum-field-top-to-validation-icon-small", - "--spectrum-focus-indicator-color", - "--spectrum-focus-indicator-gap", - "--spectrum-focus-indicator-thickness", - "--spectrum-font-size-100", - "--spectrum-font-size-200", - "--spectrum-font-size-300", - "--spectrum-font-size-75", - "--spectrum-gray-25", - "--spectrum-gray-300", - "--spectrum-gray-500", - "--spectrum-gray-600", - "--spectrum-gray-800", - "--spectrum-gray-900", - "--spectrum-help-text-to-component", - "--spectrum-negative-border-color-default", - "--spectrum-negative-border-color-focus", - "--spectrum-negative-border-color-focus-hover", - "--spectrum-negative-border-color-hover", - "--spectrum-negative-border-color-key-focus", - "--spectrum-negative-visual-color", - "--spectrum-neutral-content-color-default", - "--spectrum-neutral-content-color-focus", - "--spectrum-neutral-content-color-focus-hover", - "--spectrum-neutral-content-color-hover", - "--spectrum-neutral-content-color-key-focus", - "--spectrum-positive-visual-color", - "--spectrum-regular-font-weight", - "--spectrum-sans-font-family-stack", - "--spectrum-side-label-character-count-to-field", - "--spectrum-side-label-character-count-top-margin-extra-large", - "--spectrum-side-label-character-count-top-margin-large", - "--spectrum-side-label-character-count-top-margin-medium", - "--spectrum-side-label-character-count-top-margin-small", - "--spectrum-spacing-100", - "--spectrum-spacing-200", - "--spectrum-texfield-animation-duration", - "--spectrum-text-area-min-block-size", - "--spectrum-text-area-min-block-size-quiet", - "--spectrum-text-area-min-inline-size", - "--spectrum-text-area-minimum-height", - "--spectrum-text-area-minimum-width", - "--spectrum-workflow-icon-size-100", - "--spectrum-workflow-icon-size-200", - "--spectrum-workflow-icon-size-300", - "--spectrum-workflow-icon-size-75" - ], - "system-theme": [ - "--system-textfield-background-color", - "--system-textfield-background-color-disabled", - "--system-textfield-border-color", - "--system-textfield-border-color-disabled", - "--system-textfield-border-color-focus", - "--system-textfield-border-color-focus-hover", - "--system-textfield-border-color-hover", - "--system-textfield-border-color-keyboard-focus", - "--system-textfield-border-width", - "--system-textfield-icon-spacing-block-invalid", - "--system-textfield-quiet-border-color-disabled", - "--system-textfield-size-l-icon-spacing-block-invalid", - "--system-textfield-size-s-icon-spacing-block-invalid", - "--system-textfield-size-xl-icon-spacing-block-invalid" + ".spectrum-Textfield.spectrum-Textfield--sizeXL" ], - "passthroughs": [], - "high-contrast": [ - "--highcontrast-textfield-border-color", - "--highcontrast-textfield-border-color-focus", - "--highcontrast-textfield-border-color-hover", - "--highcontrast-textfield-border-color-invalid-default", - "--highcontrast-textfield-border-color-invalid-focus", - "--highcontrast-textfield-border-color-invalid-hover", - "--highcontrast-textfield-border-color-invalid-keyboard-focus", - "--highcontrast-textfield-border-color-keyboard-focus", - "--highcontrast-textfield-focus-indicator-color", - "--highcontrast-textfield-text-color-default", - "--highcontrast-textfield-text-color-disabled", - "--highcontrast-textfield-text-color-hover", - "--highcontrast-textfield-text-color-invalid", - "--highcontrast-textfield-text-color-keyboard-focus", - "--highcontrast-textfield-text-color-readonly", - "--highcontrast-textfield-text-color-valid" - ] + "modifiers": { + "mod-textfield-width": { + "value": "var(--spectrum-textfield-width)", + "description": "Used by `.spectrum-Textfield`.
Defaults to `var(--spectrum-textfield-width)`, if not set.", + "control": "text", + "category": "Modifier" + }, + "mod-textfield-icon-spacing-block-valid": { + "value": "var(--spectrum-textfield-icon-spacing-block-valid)", + "description": "Used by `.spectrum-Textfield.is-valid .spectrum-Textfield-validationIcon`.
Defaults to `var(--spectrum-textfield-icon-spacing-block-valid)`, if not set.", + "control": "text", + "category": "Modifier" + }, + "mod-textfield-icon-spacing-inline-end-valid": { + "value": "var(--spectrum-textfield-icon-spacing-inline-end-valid)", + "description": "Used by `.spectrum-Textfield.is-valid .spectrum-Textfield-validationIcon`, `.is-valid .spectrum-Textfield-input`.
Defaults to `var(--spectrum-textfield-icon-spacing-inline-end-valid)`, if not set.", + "control": "text", + "category": "Modifier" + }, + "mod-textfield-icon-color-valid": { + "value": "var(--spectrum-textfield-icon-color-valid)", + "description": "Used by `.spectrum-Textfield.is-valid .spectrum-Textfield-validationIcon`.
Defaults to `var(--spectrum-textfield-icon-color-valid)`, if not set.", + "control": "color", + "category": "Modifier" + }, + "mod-textfield-icon-size-invalid": { + "value": "var(--spectrum-textfield-icon-size-invalid)", + "description": "Used by `.spectrum-Textfield.is-invalid .spectrum-Textfield-validationIcon`, `.is-invalid .spectrum-Textfield-input`, `.spectrum-Textfield--quiet.is-invalid .spectrum-Textfield-input`.
Defaults to `var(--spectrum-textfield-icon-size-invalid)`, if not set.", + "control": "text", + "category": "Modifier" + }, + "mod-textfield-icon-spacing-block-invalid": { + "value": "var(--spectrum-textfield-icon-spacing-block-invalid)", + "description": "Used by `.spectrum-Textfield.is-invalid .spectrum-Textfield-validationIcon`.
Defaults to `var(--spectrum-textfield-icon-spacing-block-invalid)`, if not set.", + "control": "text", + "category": "Modifier" + }, + "mod-textfield-icon-spacing-inline-end-invalid": { + "value": "var(--spectrum-textfield-icon-spacing-inline-end-invalid)", + "description": "Used by `.spectrum-Textfield.is-invalid .spectrum-Textfield-validationIcon`, `.is-invalid .spectrum-Textfield-input`.
Defaults to `var(--spectrum-textfield-icon-spacing-inline-end-invalid)`, if not set.", + "control": "text", + "category": "Modifier" + }, + "mod-textfield-icon-color-invalid": { + "value": "var(--spectrum-textfield-icon-color-invalid)", + "description": "Used by `.spectrum-Textfield.is-invalid .spectrum-Textfield-validationIcon`.
Defaults to `var(--spectrum-textfield-icon-color-invalid)`, if not set.", + "control": "color", + "category": "Modifier" + }, + "mod-textfield-icon-spacing-inline-end-quiet-valid": { + "value": "var(--spectrum-textfield-icon-spacing-inline-end-quiet-valid)", + "description": "Used by `.spectrum-Textfield--quiet.is-valid .spectrum-Textfield-validationIcon`.
Defaults to `var(--spectrum-textfield-icon-spacing-inline-end-quiet-valid)`, if not set.", + "control": "text", + "category": "Modifier" + }, + "mod-textfield-icon-spacing-inline-end-quiet-invalid": { + "value": "var(--spectrum-textfield-icon-spacing-inline-end-quiet-invalid)", + "description": "Used by `.spectrum-Textfield--quiet.is-invalid .spectrum-Textfield-validationIcon`.
Defaults to `var(--spectrum-textfield-icon-spacing-inline-end-quiet-invalid)`, if not set.", + "control": "text", + "category": "Modifier" + }, + "mod-textfield-label-spacing-block": { + "value": "var(--spectrum-textfield-label-spacing-block)", + "description": "Used by `.spectrum-Textfield .spectrum-FieldLabel`.
Defaults to `var(--spectrum-textfield-label-spacing-block)`, if not set.", + "control": "text", + "category": "Modifier" + }, + "mod-textfield-label-spacing-block-quiet": { + "value": "var(--spectrum-textfield-label-spacing-block-quiet)", + "description": "Used by `.spectrum-Textfield--quiet .spectrum-FieldLabel`.
Defaults to `var(--spectrum-textfield-label-spacing-block-quiet)`, if not set.", + "control": "text", + "category": "Modifier" + }, + "mod-textfield-helptext-spacing-block": { + "value": "var(--spectrum-textfield-helptext-spacing-block)", + "description": "Used by `.spectrum-Textfield .spectrum-HelpText`.
Defaults to `var(--spectrum-textfield-helptext-spacing-block)`, if not set.", + "control": "text", + "category": "Modifier" + }, + "mod-textfield-character-count-spacing-block": { + "value": "var(--spectrum-textfield-character-count-spacing-block)", + "description": "Used by `.spectrum-Textfield-characterCount`.
Defaults to `var(--spectrum-textfield-character-count-spacing-block)`, if not set.", + "control": "text", + "category": "Modifier" + }, + "mod-textfield-character-count-spacing-inline": { + "value": "var(--spectrum-textfield-character-count-spacing-inline)", + "description": "Used by `.spectrum-Textfield-characterCount`.
Defaults to `var(--spectrum-textfield-character-count-spacing-inline)`, if not set.", + "control": "text", + "category": "Modifier" + }, + "mod-textfield-character-count-font-size": { + "value": "var(--spectrum-textfield-character-count-font-size)", + "description": "Used by `.spectrum-Textfield-characterCount`.
Defaults to `var(--spectrum-textfield-character-count-font-size)`, if not set.", + "control": "text", + "category": "Modifier" + }, + "mod-textfield-character-count-font-family": { + "value": "var(--spectrum-textfield-character-count-font-family)", + "description": "Used by `.spectrum-Textfield-characterCount`.
Defaults to `var(--spectrum-textfield-character-count-font-family)`, if not set.", + "control": "text", + "category": "Modifier" + }, + "mod-textfield-character-count-font-weight": { + "value": "var(--spectrum-textfield-character-count-font-weight)", + "description": "Used by `.spectrum-Textfield-characterCount`.
Defaults to `var(--spectrum-textfield-character-count-font-weight)`, if not set.", + "control": "text", + "category": "Modifier" + }, + "mod-textfield-corner-radius": { + "value": "var(--spectrum-textfield-corner-radius)", + "description": "Used by `.spectrum-Textfield-characterCount`, `.spectrum-Textfield-input`.
Defaults to `var(--spectrum-textfield-corner-radius)`, if not set.", + "control": "text", + "category": "Modifier" + }, + "mod-textfield-character-count-spacing-block-quiet": { + "value": "var(--spectrum-textfield-character-count-spacing-block-quiet)", + "description": "Used by `.spectrum-Textfield--quiet .spectrum-Textfield-characterCount`.
Defaults to `var(--spectrum-textfield-character-count-spacing-block-quiet)`, if not set.", + "control": "text", + "category": "Modifier" + }, + "mod-textfield-min-width": { + "value": "var(--spectrum-textfield-min-width)", + "description": "Used by `.spectrum-Textfield-input`.
Defaults to `var(--spectrum-textfield-min-width)`, if not set.", + "control": "text", + "category": "Modifier" + }, + "mod-textfield-height": { + "value": "var(--spectrum-textfield-height)", + "description": "Used by `.spectrum-Textfield-input`.
Defaults to `var(--spectrum-textfield-height)`, if not set.", + "control": "text", + "category": "Modifier" + }, + "mod-textfield-spacing-block-start": { + "value": "var(--spectrum-textfield-spacing-block-start)", + "description": "Used by `.spectrum-Textfield-input`, `.spectrum-Textfield--quiet .spectrum-Textfield-input`.
Defaults to `var(--spectrum-textfield-spacing-block-start)`, if not set.", + "control": "text", + "category": "Modifier" + }, + "mod-textfield-border-width": { + "value": "var(--spectrum-textfield-border-width)", + "description": "Used by `.spectrum-Textfield-input`, `.is-valid .spectrum-Textfield-input`, `.is-invalid .spectrum-Textfield-input`.
Defaults to `var(--spectrum-textfield-border-width)`, if not set.", + "control": "text", + "category": "Modifier" + }, + "mod-textfield-spacing-block-end": { + "value": "var(--spectrum-textfield-spacing-block-end)", + "description": "Used by `.spectrum-Textfield-input`.
Defaults to `var(--spectrum-textfield-spacing-block-end)`, if not set.", + "control": "text", + "category": "Modifier" + }, + "mod-textfield-spacing-inline": { + "value": "var(--spectrum-textfield-spacing-inline)", + "description": "Used by `.spectrum-Textfield-input`.
Defaults to `var(--spectrum-textfield-spacing-inline)`, if not set.", + "control": "text", + "category": "Modifier" + }, + "mod-textfield-background-color": { + "value": "var(--spectrum-textfield-background-color)", + "description": "Used by `.spectrum-Textfield-input`.
Defaults to `var(--spectrum-textfield-background-color)`, if not set.", + "control": "color", + "category": "Modifier" + }, + "mod-textfield-border-color": { + "value": "var(--spectrum-textfield-border-color)", + "description": "Used by `.spectrum-Textfield-input`.
Defaults to `var(--spectrum-textfield-border-color)`, if not set.", + "control": "color", + "category": "Modifier" + }, + "mod-texfield-animation-duration": { + "value": "var(--spectrum-texfield-animation-duration)", + "description": "Used by `.spectrum-Textfield-input`, `.spectrum-Textfield-input::placeholder`.
Defaults to `var(--spectrum-texfield-animation-duration)`, if not set.", + "control": "text", + "category": "Modifier" + }, + "mod-textfield-placeholder-font-size": { + "value": "var(--spectrum-textfield-placeholder-font-size)", + "description": "Used by `.spectrum-Textfield-input`, `.spectrum-Textfield-input::placeholder`.
Defaults to `var(--spectrum-textfield-placeholder-font-size)`, if not set.", + "control": "text", + "category": "Modifier" + }, + "mod-textfield-font-family": { + "value": "var(--spectrum-textfield-font-family)", + "description": "Used by `.spectrum-Textfield-input`, `.spectrum-Textfield-input::placeholder`.
Defaults to `var(--spectrum-textfield-font-family)`, if not set.", + "control": "text", + "category": "Modifier" + }, + "mod-textfield-font-weight": { + "value": "var(--spectrum-textfield-font-weight)", + "description": "Used by `.spectrum-Textfield-input`, `.spectrum-Textfield-input::placeholder`.
Defaults to `var(--spectrum-textfield-font-weight)`, if not set.", + "control": "text", + "category": "Modifier" + }, + "mod-textfield-text-color-default": { + "value": "var(--spectrum-textfield-text-color-default)", + "description": "Used by `.spectrum-Textfield-input`, `.spectrum-Textfield-input::placeholder`.
Defaults to `var(--spectrum-textfield-text-color-default)`, if not set.", + "control": "color", + "category": "Modifier" + }, + "mod-textfield-border-color-focus": { + "value": "var(--spectrum-textfield-border-color-focus)", + "description": "Used by `.is-focused .spectrum-Textfield-input, .spectrum-Textfield-input:focus`.
Defaults to `var(--spectrum-textfield-border-color-focus)`, if not set.", + "control": "color", + "category": "Modifier" + }, + "mod-textfield-text-color-focus": { + "value": "var(--spectrum-textfield-text-color-focus)", + "description": "Used by `.is-focused .spectrum-Textfield-input, .is-focused .spectrum-Textfield-input::placeholder, .spectrum-Textfield-input:focus, .spectrum-Textfield-input:focus::placeholder`.
Defaults to `var(--spectrum-textfield-text-color-focus)`, if not set.", + "control": "color", + "category": "Modifier" + }, + "mod-textfield-border-color-keyboard-focus": { + "value": "var(--spectrum-textfield-border-color-keyboard-focus)", + "description": "Used by `.is-keyboardFocused .spectrum-Textfield-input`.
Defaults to `var(--spectrum-textfield-border-color-keyboard-focus)`, if not set.", + "control": "color", + "category": "Modifier" + }, + "mod-textfield-focus-indicator-width": { + "value": "var(--spectrum-textfield-focus-indicator-width)", + "description": "Used by `.is-keyboardFocused .spectrum-Textfield-input`, `.spectrum-Textfield--quiet:after`.
Defaults to `var(--spectrum-textfield-focus-indicator-width)`, if not set.", + "control": "text", + "category": "Modifier" + }, + "mod-textfield-focus-indicator-color": { + "value": "var(--spectrum-textfield-focus-indicator-color)", + "description": "Used by `.is-keyboardFocused .spectrum-Textfield-input`, `.spectrum-Textfield--quiet.is-keyboardFocused:after`.
Defaults to `var(--spectrum-textfield-focus-indicator-color)`, if not set.", + "control": "color", + "category": "Modifier" + }, + "mod-textfield-focus-indicator-gap": { + "value": "var(--spectrum-textfield-focus-indicator-gap)", + "description": "Used by `.is-keyboardFocused .spectrum-Textfield-input`, `.spectrum-Textfield--quiet:after`.
Defaults to `var(--spectrum-textfield-focus-indicator-gap)`, if not set.", + "control": "text", + "category": "Modifier" + }, + "mod-textfield-text-color-keyboard-focus": { + "value": "var(--spectrum-textfield-text-color-keyboard-focus)", + "description": "Used by `.is-keyboardFocused .spectrum-Textfield-input, .is-keyboardFocused .spectrum-Textfield-input::placeholder`.
Defaults to `var(--spectrum-textfield-text-color-keyboard-focus)`, if not set.", + "control": "color", + "category": "Modifier" + }, + "mod-textfield-icon-spacing-inline-start-valid": { + "value": "var(--spectrum-textfield-icon-spacing-inline-start-valid)", + "description": "Used by `.is-valid .spectrum-Textfield-input`, `.spectrum-Textfield--quiet.is-valid .spectrum-Textfield-input`.
Defaults to `var(--spectrum-textfield-icon-spacing-inline-start-valid)`, if not set.", + "control": "text", + "category": "Modifier" + }, + "mod-textfield-icon-size-valid": { + "value": "var(--spectrum-textfield-icon-size-valid)", + "description": "Used by `.is-valid .spectrum-Textfield-input`, `.spectrum-Textfield--quiet.is-valid .spectrum-Textfield-input`.
Defaults to `var(--spectrum-textfield-icon-size-valid)`, if not set.", + "control": "text", + "category": "Modifier" + }, + "mod-textfield-text-color-valid": { + "value": "var(--spectrum-textfield-text-color-valid)", + "description": "Used by `.is-valid .spectrum-Textfield-input`.
Defaults to `var(--spectrum-textfield-text-color-valid)`, if not set.", + "control": "color", + "category": "Modifier" + }, + "mod-textfield-icon-spacing-inline-start-invalid": { + "value": "var(--spectrum-textfield-icon-spacing-inline-start-invalid)", + "description": "Used by `.is-invalid .spectrum-Textfield-input`, `.spectrum-Textfield--quiet.is-invalid .spectrum-Textfield-input`.
Defaults to `var(--spectrum-textfield-icon-spacing-inline-start-invalid)`, if not set.", + "control": "text", + "category": "Modifier" + }, + "mod-textfield-text-color-invalid": { + "value": "var(--spectrum-textfield-text-color-invalid)", + "description": "Used by `.is-invalid .spectrum-Textfield-input`.
Defaults to `var(--spectrum-textfield-text-color-invalid)`, if not set.", + "control": "color", + "category": "Modifier" + }, + "mod-textfield-border-color-invalid-default": { + "value": "var(--spectrum-textfield-border-color-invalid-default)", + "description": "Used by `.is-invalid .spectrum-Textfield-input`.
Defaults to `var(--spectrum-textfield-border-color-invalid-default)`, if not set.", + "control": "color", + "category": "Modifier" + }, + "mod-textfield-border-color-invalid-focus": { + "value": "var(--spectrum-textfield-border-color-invalid-focus)", + "description": "Used by `.is-invalid .spectrum-Textfield-input:focus, .is-invalid.is-focused .spectrum-Textfield-input, .is-invalid:focus .spectrum-Textfield-input`.
Defaults to `var(--spectrum-textfield-border-color-invalid-focus)`, if not set.", + "control": "color", + "category": "Modifier" + }, + "mod-textfield-border-color-invalid-keyboard-focus": { + "value": "var(--spectrum-textfield-border-color-invalid-keyboard-focus)", + "description": "Used by `.is-invalid .spectrum-Textfield-input:focus-visible, .is-invalid.is-keyboardFocused .spectrum-Textfield-input`.
Defaults to `var(--spectrum-textfield-border-color-invalid-keyboard-focus)`, if not set.", + "control": "color", + "category": "Modifier" + }, + "mod-textfield-background-color-disabled": { + "value": "var(--spectrum-textfield-background-color-disabled)", + "description": "Used by `.spectrum-Textfield-input:disabled, .spectrum-Textfield.is-disabled .spectrum-Textfield-input`, `.spectrum-Textfield.is-disabled:hover .spectrum-Textfield-input`.
Defaults to `var(--spectrum-textfield-background-color-disabled)`, if not set.", + "control": "color", + "category": "Modifier" + }, + "mod-textfield-border-color-disabled": { + "value": "var(--spectrum-textfield-border-color-disabled)", + "description": "Used by `.spectrum-Textfield-input:disabled, .spectrum-Textfield.is-disabled .spectrum-Textfield-input`, `.spectrum-Textfield--quiet.is-disabled .spectrum-Textfield-input, .spectrum-Textfield-input:disabled`, `.spectrum-Textfield.is-disabled:hover .spectrum-Textfield-input`, `.spectrum-Textfield--quiet.is-disabled:hover .spectrum-Textfield-input`.
Defaults to `var(--spectrum-textfield-border-color-disabled)`, if not set.", + "control": "color", + "category": "Modifier" + }, + "mod-textfield-text-color-disabled": { + "value": "var(--spectrum-textfield-text-color-disabled)", + "description": "Used by `.spectrum-Textfield-input:disabled, .spectrum-Textfield-input:disabled::placeholder, .spectrum-Textfield.is-disabled .spectrum-Textfield-input, .spectrum-Textfield.is-disabled .spectrum-Textfield-input::placeholder`, `.spectrum-Textfield--quiet.is-disabled .spectrum-Textfield-input, .spectrum-Textfield--quiet.is-disabled .spectrum-Textfield-input::placeholder, .spectrum-Textfield-input:disabled, .spectrum-Textfield-input:disabled::placeholder`, `.spectrum-Textfield--quiet.is-disabled:hover .spectrum-Textfield-input, .spectrum-Textfield.is-disabled:hover .spectrum-Textfield-input, .spectrum-Textfield.is-disabled:hover .spectrum-Textfield-input::placeholder`, `.spectrum-Textfield--quiet.is-disabled:hover .spectrum-Textfield-input::placeholder`.
Defaults to `var(--spectrum-textfield-text-color-disabled)`, if not set.", + "control": "color", + "category": "Modifier" + }, + "mod-textfield-spacing-block-quiet": { + "value": "var(--spectrum-textfield-spacing-block-quiet)", + "description": "Used by `.spectrum-Textfield--quiet .spectrum-Textfield-input`.
Defaults to `var(--spectrum-textfield-spacing-block-quiet)`, if not set.", + "control": "text", + "category": "Modifier" + }, + "mod-textfield-spacing-inline-quiet": { + "value": "var(--spectrum-textfield-spacing-inline-quiet)", + "description": "Used by `.spectrum-Textfield--quiet .spectrum-Textfield-input`.
Defaults to `var(--spectrum-textfield-spacing-inline-quiet)`, if not set.", + "control": "text", + "category": "Modifier" + }, + "mod-textfield-text-color-readonly": { + "value": "var(--spectrum-textfield-text-color-readonly)", + "description": "Used by `.spectrum-Textfield-input:read-only, .spectrum-Textfield.is-readOnly .spectrum-Textfield-input`, `.spectrum-Textfield-input:read-only::placeholder, .spectrum-Textfield.is-readOnly .spectrum-Textfield-input::placeholder`, `.spectrum-Textfield.is-readOnly:hover .spectrum-Textfield-input, .spectrum-Textfield.is-readOnly:hover .spectrum-Textfield-input::placeholder`.
Defaults to `var(--spectrum-textfield-text-color-readonly)`, if not set.", + "control": "color", + "category": "Modifier" + }, + "mod-textfield-border-color-hover": { + "value": "var(--spectrum-textfield-border-color-hover)", + "description": "Used by `.spectrum-Textfield-input:hover, .spectrum-Textfield:hover .spectrum-Textfield-input`.
Defaults to `var(--spectrum-textfield-border-color-hover)`, if not set.", + "control": "color", + "category": "Modifier" + }, + "mod-textfield-text-color-hover": { + "value": "var(--spectrum-textfield-text-color-hover)", + "description": "Used by `.spectrum-Textfield-input:hover, .spectrum-Textfield-input:hover::placeholder, .spectrum-Textfield:hover .spectrum-Textfield-input, .spectrum-Textfield:hover .spectrum-Textfield-input::placeholder`.
Defaults to `var(--spectrum-textfield-text-color-hover)`, if not set.", + "control": "color", + "category": "Modifier" + }, + "mod-textfield-border-color-focus-hover": { + "value": "var(--spectrum-textfield-border-color-focus-hover)", + "description": "Used by `.is-focused .spectrum-Textfield-input:hover, .spectrum-Textfield-input:focus:hover`.
Defaults to `var(--spectrum-textfield-border-color-focus-hover)`, if not set.", + "control": "color", + "category": "Modifier" + }, + "mod-textfield-text-color-focus-hover": { + "value": "var(--spectrum-textfield-text-color-focus-hover)", + "description": "Used by `.is-focused .spectrum-Textfield-input:hover, .is-focused .spectrum-Textfield-input:hover::placeholder, .spectrum-Textfield-input:focus:hover, .spectrum-Textfield-input:focus:hover::placeholder`.
Defaults to `var(--spectrum-textfield-text-color-focus-hover)`, if not set.", + "control": "color", + "category": "Modifier" + }, + "mod-textfield-border-color-invalid-hover": { + "value": "var(--spectrum-textfield-border-color-invalid-hover)", + "description": "Used by `.is-invalid .spectrum-Textfield-input:hover:not(.is-disabled), .is-invalid:hover:not(.is-disabled) .spectrum-Textfield-input`.
Defaults to `var(--spectrum-textfield-border-color-invalid-hover)`, if not set.", + "control": "color", + "category": "Modifier" + }, + "mod-textfield-border-color-invalid-focus-hover": { + "value": "var(--spectrum-textfield-border-color-invalid-focus-hover)", + "description": "Used by `.is-invalid .spectrum-Textfield-input:focus:hover, .is-invalid.is-focused .spectrum-Textfield-input:hover, .is-invalid:focus .spectrum-Textfield-input:hover`.
Defaults to `var(--spectrum-textfield-border-color-invalid-focus-hover)`, if not set.", + "control": "color", + "category": "Modifier" + }, + "mod-textfield-label-spacing-inline-side-label": { + "value": "var(--spectrum-textfield-label-spacing-inline-side-label)", + "description": "Used by `.spectrum-Textfield--sideLabel .spectrum-FieldLabel`.
Defaults to `var(--spectrum-textfield-label-spacing-inline-side-label)`, if not set.", + "control": "text", + "category": "Modifier" + }, + "mod-textfield-character-count-spacing-block-side": { + "value": "var(--spectrum-textfield-character-count-spacing-block-side)", + "description": "Used by `.spectrum-Textfield--sideLabel .spectrum-Textfield-characterCount`.
Defaults to `var(--spectrum-textfield-character-count-spacing-block-side)`, if not set.", + "control": "text", + "category": "Modifier" + }, + "mod-textfield-character-count-spacing-inline-side": { + "value": "var(--spectrum-textfield-character-count-spacing-inline-side)", + "description": "Used by `.spectrum-Textfield--sideLabel .spectrum-Textfield-characterCount`.
Defaults to `var(--spectrum-textfield-character-count-spacing-inline-side)`, if not set.", + "control": "text", + "category": "Modifier" + }, + "mod-text-area-min-inline-size": { + "value": "var(--spectrum-text-area-min-inline-size)", + "description": "Used by `.spectrum-Textfield--multiline .spectrum-Textfield-input`.
Defaults to `var(--spectrum-text-area-min-inline-size)`, if not set.", + "control": "text", + "category": "Modifier" + }, + "mod-text-area-min-block-size": { + "value": "var(--spectrum-text-area-min-block-size)", + "description": "Used by `.spectrum-Textfield--multiline .spectrum-Textfield-input`.
Defaults to `var(--spectrum-text-area-min-block-size)`, if not set.", + "control": "text", + "category": "Modifier" + }, + "mod-text-area-min-block-size-quiet": { + "value": "var(--spectrum-text-area-min-block-size-quiet)", + "description": "Used by `.spectrum-Textfield--multiline.spectrum-Textfield--quiet .spectrum-Textfield-input`.
Defaults to `var(--spectrum-text-area-min-block-size-quiet)`, if not set.", + "control": "text", + "category": "Modifier" + } + }, + "component": { + "spectrum-textfield-input-line-height": { + "description": "Defined in `.spectrum-Textfield`, `.spectrum-Textfield--multiline`.
Used by `.spectrum-Textfield-input`.", + "control": "text", + "category": "Component" + }, + "spectrum-textfield-height": { + "description": "Defined in `.spectrum-Textfield`, `.spectrum-Textfield--sizeS`, `.spectrum-Textfield--sizeL`, `.spectrum-Textfield--sizeXL`.
Used by `--spectrum-textfield-input-line-height`, `.spectrum-Textfield-input`.", + "control": "text", + "category": "Component" + }, + "spectrum-textfield-width": { + "description": "Defined in `.spectrum-Textfield`.
Used by `.spectrum-Textfield`.", + "control": "text", + "category": "Component" + }, + "spectrum-textfield-min-width": { + "description": "Defined in `.spectrum-Textfield`.
Used by `.spectrum-Textfield-input`.", + "control": "text", + "category": "Component" + }, + "spectrum-text-field-minimum-width-multiplier": { + "value": "1.5", + "description": "Used by `--spectrum-textfield-min-width`.", + "control": "text", + "category": "Component" + }, + "spectrum-textfield-corner-radius": { + "description": "Defined in `.spectrum-Textfield`.
Used by `.spectrum-Textfield-characterCount`, `.spectrum-Textfield-input`.", + "control": "text", + "category": "Component" + }, + "spectrum-textfield-spacing-inline-quiet": { + "description": "Defined in `.spectrum-Textfield`.
Used by `.spectrum-Textfield--quiet .spectrum-Textfield-input`.", + "control": "text", + "category": "Component" + }, + "spectrum-textfield-spacing-block-start": { + "description": "Defined in `.spectrum-Textfield`.
Used by `.spectrum-Textfield-input`, `.spectrum-Textfield--quiet .spectrum-Textfield-input`.", + "control": "text", + "category": "Component" + }, + "spectrum-textfield-spacing-block-end": { + "description": "Defined in `.spectrum-Textfield`.
Used by `.spectrum-Textfield-input`.", + "control": "text", + "category": "Component" + }, + "spectrum-textfield-spacing-block-quiet": { + "description": "Defined in `.spectrum-Textfield`.
Used by `.spectrum-Textfield--quiet .spectrum-Textfield-input`.", + "control": "text", + "category": "Component" + }, + "spectrum-textfield-label-spacing-block": { + "description": "Defined in `.spectrum-Textfield`.
Used by `.spectrum-Textfield .spectrum-FieldLabel`.", + "control": "text", + "category": "Component" + }, + "spectrum-textfield-helptext-spacing-block": { + "description": "Defined in `.spectrum-Textfield`.
Used by `.spectrum-Textfield .spectrum-HelpText`.", + "control": "text", + "category": "Component" + }, + "spectrum-textfield-icon-spacing-inline-end-quiet-invalid": { + "description": "Defined in `.spectrum-Textfield`.
Used by `.spectrum-Textfield--quiet.is-invalid .spectrum-Textfield-validationIcon`.", + "control": "text", + "category": "Component" + }, + "spectrum-textfield-icon-spacing-inline-end-quiet-valid": { + "description": "Defined in `.spectrum-Textfield`.
Used by `.spectrum-Textfield--quiet.is-valid .spectrum-Textfield-validationIcon`.", + "control": "text", + "category": "Component" + }, + "spectrum-textfield-font-family": { + "description": "Defined in `.spectrum-Textfield`.
Used by `.spectrum-Textfield-input`, `.spectrum-Textfield-input::placeholder`.", + "control": "text", + "category": "Component" + }, + "spectrum-textfield-font-weight": { + "description": "Defined in `.spectrum-Textfield`.
Used by `.spectrum-Textfield-input`, `.spectrum-Textfield-input::placeholder`.", + "control": "text", + "category": "Component" + }, + "spectrum-textfield-character-count-font-family": { + "description": "Defined in `.spectrum-Textfield`.
Used by `.spectrum-Textfield-characterCount`.", + "control": "text", + "category": "Component" + }, + "spectrum-textfield-character-count-font-weight": { + "description": "Defined in `.spectrum-Textfield`.
Used by `.spectrum-Textfield-characterCount`.", + "control": "text", + "category": "Component" + }, + "spectrum-textfield-character-count-spacing-inline": { + "description": "Defined in `.spectrum-Textfield`.
Used by `.spectrum-Textfield-characterCount`.", + "control": "text", + "category": "Component" + }, + "spectrum-textfield-character-count-spacing-inline-side": { + "description": "Defined in `.spectrum-Textfield`.
Used by `.spectrum-Textfield--sideLabel .spectrum-Textfield-characterCount`.", + "control": "text", + "category": "Component" + }, + "spectrum-textfield-focus-indicator-width": { + "description": "Defined in `.spectrum-Textfield`.
Used by `.is-keyboardFocused .spectrum-Textfield-input`, `.spectrum-Textfield--quiet:after`.", + "control": "text", + "category": "Component" + }, + "spectrum-textfield-focus-indicator-gap": { + "description": "Defined in `.spectrum-Textfield`.
Used by `.is-keyboardFocused .spectrum-Textfield-input`, `.spectrum-Textfield--quiet:after`.", + "control": "text", + "category": "Component" + }, + "spectrum-textfield-text-color-default": { + "description": "Defined in `.spectrum-Textfield`.
Used by `.spectrum-Textfield-input`, `.spectrum-Textfield-input::placeholder`.", + "control": "color", + "category": "Component" + }, + "spectrum-textfield-text-color-hover": { + "description": "Defined in `.spectrum-Textfield`.
Used by `.spectrum-Textfield-input:hover, .spectrum-Textfield-input:hover::placeholder, .spectrum-Textfield:hover .spectrum-Textfield-input, .spectrum-Textfield:hover .spectrum-Textfield-input::placeholder`.", + "control": "color", + "category": "Component" + }, + "spectrum-textfield-text-color-focus": { + "description": "Defined in `.spectrum-Textfield`.
Used by `.is-focused .spectrum-Textfield-input, .is-focused .spectrum-Textfield-input::placeholder, .spectrum-Textfield-input:focus, .spectrum-Textfield-input:focus::placeholder`.", + "control": "color", + "category": "Component" + }, + "spectrum-textfield-text-color-focus-hover": { + "description": "Defined in `.spectrum-Textfield`.
Used by `.is-focused .spectrum-Textfield-input:hover, .is-focused .spectrum-Textfield-input:hover::placeholder, .spectrum-Textfield-input:focus:hover, .spectrum-Textfield-input:focus:hover::placeholder`.", + "control": "color", + "category": "Component" + }, + "spectrum-textfield-text-color-keyboard-focus": { + "description": "Defined in `.spectrum-Textfield`.
Used by `.is-keyboardFocused .spectrum-Textfield-input, .is-keyboardFocused .spectrum-Textfield-input::placeholder`.", + "control": "color", + "category": "Component" + }, + "spectrum-textfield-text-color-readonly": { + "description": "Defined in `.spectrum-Textfield`.
Used by `.spectrum-Textfield-input:read-only, .spectrum-Textfield.is-readOnly .spectrum-Textfield-input`, `.spectrum-Textfield-input:read-only::placeholder, .spectrum-Textfield.is-readOnly .spectrum-Textfield-input::placeholder`, `.spectrum-Textfield.is-readOnly:hover .spectrum-Textfield-input, .spectrum-Textfield.is-readOnly:hover .spectrum-Textfield-input::placeholder`.", + "control": "color", + "category": "Component" + }, + "spectrum-textfield-text-color-disabled": { + "description": "Defined in `.spectrum-Textfield`.
Used by `.spectrum-Textfield.is-disabled .spectrum-FieldLabel`, `.spectrum-Textfield-input:disabled, .spectrum-Textfield-input:disabled::placeholder, .spectrum-Textfield.is-disabled .spectrum-Textfield-input, .spectrum-Textfield.is-disabled .spectrum-Textfield-input::placeholder`, `.spectrum-Textfield--quiet.is-disabled .spectrum-Textfield-input, .spectrum-Textfield--quiet.is-disabled .spectrum-Textfield-input::placeholder, .spectrum-Textfield-input:disabled, .spectrum-Textfield-input:disabled::placeholder`, `.spectrum-Textfield--quiet.is-disabled:hover .spectrum-Textfield-input, .spectrum-Textfield.is-disabled:hover .spectrum-Textfield-input, .spectrum-Textfield.is-disabled:hover .spectrum-Textfield-input::placeholder`, `.spectrum-Textfield--quiet.is-disabled:hover .spectrum-Textfield-input::placeholder`.", + "control": "color", + "category": "Component" + }, + "spectrum-textfield-border-color-invalid-default": { + "description": "Defined in `.spectrum-Textfield`.
Used by `.is-invalid .spectrum-Textfield-input`.", + "control": "color", + "category": "Component" + }, + "spectrum-textfield-border-color-invalid-hover": { + "description": "Defined in `.spectrum-Textfield`.
Used by `.is-invalid .spectrum-Textfield-input:hover:not(.is-disabled), .is-invalid:hover:not(.is-disabled) .spectrum-Textfield-input`.", + "control": "color", + "category": "Component" + }, + "spectrum-textfield-border-color-invalid-focus": { + "description": "Defined in `.spectrum-Textfield`.
Used by `.is-invalid .spectrum-Textfield-input:focus, .is-invalid.is-focused .spectrum-Textfield-input, .is-invalid:focus .spectrum-Textfield-input`.", + "control": "color", + "category": "Component" + }, + "spectrum-textfield-border-color-invalid-focus-hover": { + "description": "Defined in `.spectrum-Textfield`.
Used by `.is-invalid .spectrum-Textfield-input:focus:hover, .is-invalid.is-focused .spectrum-Textfield-input:hover, .is-invalid:focus .spectrum-Textfield-input:hover`.", + "control": "color", + "category": "Component" + }, + "spectrum-textfield-border-color-invalid-keyboard-focus": { + "description": "Defined in `.spectrum-Textfield`.
Used by `.is-invalid .spectrum-Textfield-input:focus-visible, .is-invalid.is-keyboardFocused .spectrum-Textfield-input`.", + "control": "color", + "category": "Component" + }, + "spectrum-textfield-icon-color-invalid": { + "description": "Defined in `.spectrum-Textfield`.
Used by `.spectrum-Textfield.is-invalid .spectrum-Textfield-validationIcon`.", + "control": "color", + "category": "Component" + }, + "spectrum-textfield-text-color-invalid": { + "description": "Defined in `.spectrum-Textfield`.
Used by `.is-invalid .spectrum-Textfield-input`.", + "control": "color", + "category": "Component" + }, + "spectrum-textfield-text-color-valid": { + "description": "Defined in `.spectrum-Textfield`.
Used by `.is-valid .spectrum-Textfield-input`.", + "control": "color", + "category": "Component" + }, + "spectrum-textfield-icon-color-valid": { + "description": "Defined in `.spectrum-Textfield`.
Used by `.spectrum-Textfield.is-valid .spectrum-Textfield-validationIcon`.", + "control": "color", + "category": "Component" + }, + "spectrum-textfield-focus-indicator-color": { + "description": "Defined in `.spectrum-Textfield`.
Used by `.is-keyboardFocused .spectrum-Textfield-input`, `.spectrum-Textfield--quiet.is-keyboardFocused:after`.", + "control": "color", + "category": "Component" + }, + "spectrum-textfield-label-spacing-block-quiet": { + "description": "Defined in `.spectrum-Textfield`, `.spectrum-Textfield--sizeS`, `.spectrum-Textfield--sizeL`, `.spectrum-Textfield--sizeXL`.
Used by `.spectrum-Textfield--quiet .spectrum-FieldLabel`.", + "control": "text", + "category": "Component" + }, + "spectrum-textfield-label-spacing-inline-side-label": { + "description": "Defined in `.spectrum-Textfield`, `.spectrum-Textfield--sizeS`, `.spectrum-Textfield--sizeL`, `.spectrum-Textfield--sizeXL`.
Used by `.spectrum-Textfield--sideLabel .spectrum-FieldLabel`.", + "control": "text", + "category": "Component" + }, + "spectrum-textfield-placeholder-font-size": { + "description": "Defined in `.spectrum-Textfield`, `.spectrum-Textfield--sizeS`, `.spectrum-Textfield--sizeL`, `.spectrum-Textfield--sizeXL`.
Used by `.spectrum-Textfield-input`, `.spectrum-Textfield-input::placeholder`.", + "control": "text", + "category": "Component" + }, + "spectrum-textfield-spacing-inline": { + "description": "Defined in `.spectrum-Textfield`, `.spectrum-Textfield--sizeS`, `.spectrum-Textfield--sizeL`, `.spectrum-Textfield--sizeXL`.
Used by `.spectrum-Textfield-input`.", + "control": "text", + "category": "Component" + }, + "spectrum-textfield-icon-size-invalid": { + "description": "Defined in `.spectrum-Textfield`, `.spectrum-Textfield--sizeS`, `.spectrum-Textfield--sizeL`, `.spectrum-Textfield--sizeXL`.
Used by `.spectrum-Textfield.is-invalid .spectrum-Textfield-validationIcon`, `.is-invalid .spectrum-Textfield-input`, `.spectrum-Textfield--quiet.is-invalid .spectrum-Textfield-input`.", + "control": "text", + "category": "Component" + }, + "spectrum-textfield-icon-size-valid": { + "description": "Defined in `.spectrum-Textfield`, `.spectrum-Textfield--sizeS`, `.spectrum-Textfield--sizeL`, `.spectrum-Textfield--sizeXL`.
Used by `.is-valid .spectrum-Textfield-input`, `.spectrum-Textfield--quiet.is-valid .spectrum-Textfield-input`.", + "control": "text", + "category": "Component" + }, + "spectrum-textfield-icon-spacing-inline-end-invalid": { + "description": "Defined in `.spectrum-Textfield`, `.spectrum-Textfield--sizeS`, `.spectrum-Textfield--sizeL`, `.spectrum-Textfield--sizeXL`.
Used by `.spectrum-Textfield.is-invalid .spectrum-Textfield-validationIcon`, `.is-invalid .spectrum-Textfield-input`.", + "control": "text", + "category": "Component" + }, + "spectrum-textfield-icon-spacing-inline-end-valid": { + "description": "Defined in `.spectrum-Textfield`, `.spectrum-Textfield--sizeS`, `.spectrum-Textfield--sizeL`, `.spectrum-Textfield--sizeXL`.
Used by `.spectrum-Textfield.is-valid .spectrum-Textfield-validationIcon`, `.is-valid .spectrum-Textfield-input`.", + "control": "text", + "category": "Component" + }, + "spectrum-textfield-icon-spacing-block-valid": { + "description": "Defined in `.spectrum-Textfield`, `.spectrum-Textfield--sizeS`, `.spectrum-Textfield--sizeL`, `.spectrum-Textfield--sizeXL`.
Used by `.spectrum-Textfield.is-valid .spectrum-Textfield-validationIcon`.", + "control": "text", + "category": "Component" + }, + "spectrum-textfield-icon-spacing-inline-start-invalid": { + "description": "Defined in `.spectrum-Textfield`, `.spectrum-Textfield--sizeS`, `.spectrum-Textfield--sizeL`, `.spectrum-Textfield--sizeXL`.
Used by `.is-invalid .spectrum-Textfield-input`, `.spectrum-Textfield--quiet.is-invalid .spectrum-Textfield-input`.", + "control": "text", + "category": "Component" + }, + "spectrum-textfield-icon-spacing-inline-start-valid": { + "description": "Defined in `.spectrum-Textfield`, `.spectrum-Textfield--sizeS`, `.spectrum-Textfield--sizeL`, `.spectrum-Textfield--sizeXL`.
Used by `.is-valid .spectrum-Textfield-input`, `.spectrum-Textfield--quiet.is-valid .spectrum-Textfield-input`.", + "control": "text", + "category": "Component" + }, + "spectrum-textfield-character-count-font-size": { + "description": "Defined in `.spectrum-Textfield`, `.spectrum-Textfield--sizeS`, `.spectrum-Textfield--sizeL`, `.spectrum-Textfield--sizeXL`.
Used by `.spectrum-Textfield-characterCount`.", + "control": "text", + "category": "Component" + }, + "spectrum-textfield-character-count-spacing-block": { + "description": "Defined in `.spectrum-Textfield`, `.spectrum-Textfield--sizeS`, `.spectrum-Textfield--sizeL`, `.spectrum-Textfield--sizeXL`.
Used by `.spectrum-Textfield-characterCount`.", + "control": "text", + "category": "Component" + }, + "spectrum-textfield-character-count-spacing-block-quiet": { + "description": "Defined in `.spectrum-Textfield`, `.spectrum-Textfield--sizeS`, `.spectrum-Textfield--sizeL`, `.spectrum-Textfield--sizeXL`.
Used by `.spectrum-Textfield--quiet .spectrum-Textfield-characterCount`.", + "control": "text", + "category": "Component" + }, + "spectrum-textfield-character-count-spacing-block-side": { + "description": "Defined in `.spectrum-Textfield`, `.spectrum-Textfield--sizeS`, `.spectrum-Textfield--sizeL`, `.spectrum-Textfield--sizeXL`.
Used by `.spectrum-Textfield--sideLabel .spectrum-Textfield-characterCount`.", + "control": "text", + "category": "Component" + }, + "spectrum-textfield-icon-spacing-block-invalid": { + "description": "Defined in `.spectrum-Textfield`, `.spectrum-Textfield.spectrum-Textfield--sizeS`, `.spectrum-Textfield.spectrum-Textfield--sizeL`, `.spectrum-Textfield.spectrum-Textfield--sizeXL`.
Used by `.spectrum-Textfield.is-invalid .spectrum-Textfield-validationIcon`.", + "control": "text", + "category": "Component" + }, + "spectrum-textfield-border-width": { + "description": "Defined in `.spectrum-Textfield`.
Used by `.spectrum-Textfield-input`, `.is-valid .spectrum-Textfield-input`, `.is-invalid .spectrum-Textfield-input`.", + "control": "text", + "category": "Component" + }, + "spectrum-textfield-background-color": { + "description": "Defined in `.spectrum-Textfield`.
Used by `.spectrum-Textfield-input`.", + "control": "color", + "category": "Component" + }, + "spectrum-textfield-border-color": { + "description": "Defined in `.spectrum-Textfield`.
Used by `.spectrum-Textfield-input`.", + "control": "color", + "category": "Component" + }, + "spectrum-textfield-border-color-focus": { + "description": "Defined in `.spectrum-Textfield`.
Used by `.is-focused .spectrum-Textfield-input, .spectrum-Textfield-input:focus`.", + "control": "color", + "category": "Component" + }, + "spectrum-textfield-border-color-keyboard-focus": { + "description": "Defined in `.spectrum-Textfield`.
Used by `.is-keyboardFocused .spectrum-Textfield-input`.", + "control": "color", + "category": "Component" + }, + "spectrum-textfield-background-color-disabled": { + "description": "Defined in `.spectrum-Textfield`.
Used by `.spectrum-Textfield-input:disabled, .spectrum-Textfield.is-disabled .spectrum-Textfield-input`, `.spectrum-Textfield.is-disabled:hover .spectrum-Textfield-input`.", + "control": "color", + "category": "Component" + }, + "spectrum-textfield-border-color-disabled": { + "description": "Defined in `.spectrum-Textfield`, `.spectrum-Textfield.spectrum-Textfield--quiet`.
Used by `.spectrum-Textfield-input:disabled, .spectrum-Textfield.is-disabled .spectrum-Textfield-input`, `.spectrum-Textfield--quiet.is-disabled .spectrum-Textfield-input, .spectrum-Textfield-input:disabled`, `.spectrum-Textfield.is-disabled:hover .spectrum-Textfield-input`, `.spectrum-Textfield--quiet.is-disabled:hover .spectrum-Textfield-input`.", + "control": "color", + "category": "Component" + }, + "spectrum-textfield-border-color-hover": { + "description": "Defined in `.spectrum-Textfield`.
Used by `.spectrum-Textfield-input:hover, .spectrum-Textfield:hover .spectrum-Textfield-input`.", + "control": "color", + "category": "Component" + }, + "spectrum-textfield-border-color-focus-hover": { + "description": "Defined in `.spectrum-Textfield`.
Used by `.is-focused .spectrum-Textfield-input:hover, .spectrum-Textfield-input:focus:hover`.", + "control": "color", + "category": "Component" + } + }, + "global": { + "spectrum-gray-25": { + "value": "light-dark(rgb(255, 255, 255), rgb(17, 17, 17))", + "description": "Used by `--system-textfield-background-color`, `--system-textfield-background-color-disabled`.", + "control": "text", + "category": "Global" + }, + "spectrum-gray-500": { + "value": "light-dark(rgb(143, 143, 143), rgb(109, 109, 109))", + "description": "Used by `--system-textfield-border-color`.", + "control": "text", + "category": "Global" + }, + "spectrum-gray-600": { + "value": "light-dark(rgb(113, 113, 113), rgb(138, 138, 138))", + "description": "Used by `--system-textfield-border-color-hover`.", + "control": "text", + "category": "Global" + }, + "spectrum-gray-800": { + "value": "light-dark(rgb(41, 41, 41), rgb(219, 219, 219))", + "description": "Used by `--system-textfield-border-color-focus`, `--system-textfield-border-color-keyboard-focus`.", + "control": "text", + "category": "Global" + }, + "spectrum-gray-900": { + "value": "light-dark(rgb(19, 19, 19), rgb(242, 242, 242))", + "description": "Used by `--system-textfield-border-color-focus-hover`.", + "control": "text", + "category": "Global" + }, + "spectrum-gray-300": { + "value": "light-dark(rgb(218, 218, 218), rgb(57, 57, 57))", + "description": "Used by `--system-textfield-border-color-disabled`, `--system-textfield-quiet-border-color-disabled`.", + "control": "text", + "category": "Global" + }, + "spectrum-border-width-100": { + "value": "1px", + "description": "Used by `--system-textfield-border-width`.", + "control": "text", + "category": "Global" + }, + "spectrum-component-top-to-workflow-icon-100": { + "value": "6px", + "description": "Used by `--system-textfield-icon-spacing-block-invalid`.", + "control": "text", + "category": "Global" + }, + "spectrum-component-top-to-workflow-icon-75": { + "value": "4px", + "description": "Used by `--system-textfield-size-s-icon-spacing-block-invalid`.", + "control": "text", + "category": "Global" + }, + "spectrum-component-top-to-workflow-icon-200": { + "value": "9px", + "description": "Used by `--system-textfield-size-l-icon-spacing-block-invalid`.", + "control": "text", + "category": "Global" + }, + "spectrum-component-top-to-workflow-icon-300": { + "value": "11px", + "description": "Used by `--system-textfield-size-xl-icon-spacing-block-invalid`.", + "control": "text", + "category": "Global" + }, + "spectrum-texfield-animation-duration": { + "description": "Defined in `.spectrum-Textfield`.
Used by `.spectrum-Textfield-input`, `.spectrum-Textfield-input::placeholder`.", + "control": "text", + "category": "Global" + }, + "spectrum-animation-duration-100": { + "description": "Used by `--spectrum-texfield-animation-duration`.", + "control": "text", + "category": "Global" + }, + "spectrum-corner-radius-100": { + "value": "8px", + "description": "Used by `--spectrum-textfield-corner-radius`.", + "control": "text", + "category": "Global" + }, + "spectrum-field-edge-to-text-quiet": { + "value": "0px", + "description": "Used by `--spectrum-textfield-spacing-inline-quiet`.", + "control": "text", + "category": "Global" + }, + "spectrum-component-top-to-text-100": { + "value": "6px", + "description": "Used by `--spectrum-textfield-spacing-block-start`.", + "control": "text", + "category": "Global" + }, + "spectrum-component-bottom-to-text-100": { + "value": "9px", + "description": "Used by `--spectrum-textfield-spacing-block-end`, `--spectrum-textfield-character-count-spacing-block`.", + "control": "text", + "category": "Global" + }, + "spectrum-field-edge-to-border-quiet": { + "value": "0px", + "description": "Used by `--spectrum-textfield-spacing-block-quiet`.", + "control": "text", + "category": "Global" + }, + "spectrum-field-label-to-component": { + "value": "0px", + "description": "Used by `--spectrum-textfield-label-spacing-block`.", + "control": "text", + "category": "Global" + }, + "spectrum-help-text-to-component": { + "value": "0px", + "description": "Used by `--spectrum-textfield-helptext-spacing-block`.", + "control": "text", + "category": "Global" + }, + "spectrum-field-edge-to-alert-icon-quiet": { + "value": "0px", + "description": "Used by `--spectrum-textfield-icon-spacing-inline-end-quiet-invalid`.", + "control": "text", + "category": "Global" + }, + "spectrum-field-edge-to-validation-icon-quiet": { + "value": "0px", + "description": "Used by `--spectrum-textfield-icon-spacing-inline-end-quiet-valid`.", + "control": "text", + "category": "Global" + }, + "spectrum-sans-font-family-stack": { + "description": "Used by `--spectrum-textfield-font-family`, `--spectrum-textfield-character-count-font-family`.", + "control": "text", + "category": "Global" + }, + "spectrum-regular-font-weight": { + "value": "400", + "description": "Used by `--spectrum-textfield-font-weight`, `--spectrum-textfield-character-count-font-weight`.", + "control": "text", + "category": "Global" + }, + "spectrum-spacing-200": { + "value": "12px", + "description": "Used by `--spectrum-textfield-character-count-spacing-inline`, `--spectrum-textfield-label-spacing-inline-side-label`.", + "control": "text", + "category": "Global" + }, + "spectrum-side-label-character-count-to-field": { + "value": "12px", + "description": "Used by `--spectrum-textfield-character-count-spacing-inline-side`.", + "control": "text", + "category": "Global" + }, + "spectrum-focus-indicator-thickness": { + "value": "2px", + "description": "Used by `--spectrum-textfield-focus-indicator-width`.", + "control": "text", + "category": "Global" + }, + "spectrum-focus-indicator-gap": { + "value": "2px", + "description": "Used by `--spectrum-textfield-focus-indicator-gap`.", + "control": "text", + "category": "Global" + }, + "spectrum-neutral-content-color-default": { + "value": "var(--spectrum-gray-800)", + "description": "Used by `--spectrum-textfield-text-color-default`, `--spectrum-textfield-text-color-readonly`, `--spectrum-textfield-text-color-invalid`, `--spectrum-textfield-text-color-valid`.", + "control": "color", + "category": "Global" + }, + "spectrum-neutral-content-color-hover": { + "value": "var(--spectrum-gray-900)", + "description": "Used by `--spectrum-textfield-text-color-hover`.", + "control": "color", + "category": "Global" + }, + "spectrum-neutral-content-color-focus": { + "value": "var(--spectrum-neutral-content-color-down)", + "description": "Used by `--spectrum-textfield-text-color-focus`.", + "control": "color", + "category": "Global" + }, + "spectrum-neutral-content-color-focus-hover": { + "value": "var(--spectrum-neutral-content-color-down)", + "description": "Used by `--spectrum-textfield-text-color-focus-hover`.", + "control": "color", + "category": "Global" + }, + "spectrum-neutral-content-color-key-focus": { + "value": "var(--spectrum-gray-900)", + "description": "Used by `--spectrum-textfield-text-color-keyboard-focus`.", + "control": "color", + "category": "Global" + }, + "spectrum-disabled-content-color": { + "value": "var(--spectrum-gray-400)", + "description": "Used by `--spectrum-textfield-text-color-disabled`.", + "control": "color", + "category": "Global" + }, + "spectrum-negative-border-color-default": { + "value": "var(--spectrum-negative-color-900)", + "description": "Used by `--spectrum-textfield-border-color-invalid-default`.", + "control": "color", + "category": "Global" + }, + "spectrum-negative-border-color-hover": { + "value": "var(--spectrum-negative-color-1000)", + "description": "Used by `--spectrum-textfield-border-color-invalid-hover`.", + "control": "color", + "category": "Global" + }, + "spectrum-negative-border-color-focus": { + "value": "var(--spectrum-negative-color-1000)", + "description": "Used by `--spectrum-textfield-border-color-invalid-focus`.", + "control": "color", + "category": "Global" + }, + "spectrum-negative-border-color-focus-hover": { + "value": "var(--spectrum-negative-border-color-down)", + "description": "Used by `--spectrum-textfield-border-color-invalid-focus-hover`.", + "control": "color", + "category": "Global" + }, + "spectrum-negative-border-color-key-focus": { + "value": "var(--spectrum-negative-color-1000)", + "description": "Used by `--spectrum-textfield-border-color-invalid-keyboard-focus`.", + "control": "color", + "category": "Global" + }, + "spectrum-negative-visual-color": { + "value": "var(--spectrum-negative-color-900)", + "description": "Used by `--spectrum-textfield-icon-color-invalid`.", + "control": "color", + "category": "Global" + }, + "spectrum-positive-visual-color": { + "value": "var(--spectrum-positive-color-900)", + "description": "Used by `--spectrum-textfield-icon-color-valid`.", + "control": "color", + "category": "Global" + }, + "spectrum-focus-indicator-color": { + "value": "var(--spectrum-blue-800)", + "description": "Used by `--spectrum-textfield-focus-indicator-color`.", + "control": "color", + "category": "Global" + }, + "spectrum-text-area-min-inline-size": { + "description": "Defined in `.spectrum-Textfield`.
Used by `.spectrum-Textfield--multiline .spectrum-Textfield-input`.", + "control": "text", + "category": "Global" + }, + "spectrum-text-area-minimum-width": { + "value": "112px", + "description": "Used by `--spectrum-text-area-min-inline-size`.", + "control": "text", + "category": "Global" + }, + "spectrum-text-area-min-block-size": { + "description": "Defined in `.spectrum-Textfield`.
Used by `.spectrum-Textfield--multiline .spectrum-Textfield-input`.", + "control": "text", + "category": "Global" + }, + "spectrum-text-area-minimum-height": { + "value": "56px", + "description": "Used by `--spectrum-text-area-min-block-size`.", + "control": "text", + "category": "Global" + }, + "spectrum-component-height-100": { + "value": "32px", + "description": "Used by `--spectrum-textfield-height`, `--spectrum-text-area-min-block-size-quiet`.", + "control": "text", + "category": "Global" + }, + "spectrum-field-label-to-component-quiet-medium": { + "value": "-8px", + "description": "Used by `--spectrum-textfield-label-spacing-block-quiet`.", + "control": "text", + "category": "Global" + }, + "spectrum-font-size-100": { + "value": "14px", + "description": "Used by `--spectrum-textfield-placeholder-font-size`, `--spectrum-textfield-character-count-font-size`.", + "control": "text", + "category": "Global" + }, + "spectrum-component-edge-to-text-100": { + "value": "12px", + "description": "Used by `--spectrum-textfield-spacing-inline`.", + "control": "text", + "category": "Global" + }, + "spectrum-workflow-icon-size-100": { + "value": "20px", + "description": "Used by `--spectrum-textfield-icon-size-invalid`.", + "control": "text", + "category": "Global" + }, + "spectrum-checkmark-icon-size-100": { + "value": "10px", + "description": "Used by `--spectrum-textfield-icon-size-valid`.", + "control": "text", + "category": "Global" + }, + "spectrum-field-edge-to-alert-icon-medium": { + "value": "12px", + "description": "Used by `--spectrum-textfield-icon-spacing-inline-end-invalid`.", + "control": "text", + "category": "Global" + }, + "spectrum-field-edge-to-validation-icon-medium": { + "value": "12px", + "description": "Used by `--spectrum-textfield-icon-spacing-inline-end-valid`.", + "control": "text", + "category": "Global" + }, + "spectrum-field-top-to-validation-icon-medium": { + "value": "11px", + "description": "Used by `--spectrum-textfield-icon-spacing-block-valid`.", + "control": "text", + "category": "Global" + }, + "spectrum-field-text-to-alert-icon-medium": { + "value": "12px", + "description": "Used by `--spectrum-textfield-icon-spacing-inline-start-invalid`.", + "control": "text", + "category": "Global" + }, + "spectrum-field-text-to-validation-icon-medium": { + "value": "12px", + "description": "Used by `--spectrum-textfield-icon-spacing-inline-start-valid`.", + "control": "text", + "category": "Global" + }, + "spectrum-font-size-75": { + "value": "12px", + "description": "Used by `--spectrum-textfield-character-count-font-size`, `--spectrum-textfield-placeholder-font-size`.", + "control": "text", + "category": "Global" + }, + "spectrum-component-bottom-to-text-75": { + "value": "5px", + "description": "Used by `--spectrum-textfield-character-count-spacing-block`.", + "control": "text", + "category": "Global" + }, + "spectrum-character-count-to-field-quiet-medium": { + "value": "-3px", + "description": "Used by `--spectrum-textfield-character-count-spacing-block-quiet`.", + "control": "text", + "category": "Global" + }, + "spectrum-side-label-character-count-top-margin-medium": { + "value": "8px", + "description": "Used by `--spectrum-textfield-character-count-spacing-block-side`.", + "control": "text", + "category": "Global" + }, + "spectrum-text-area-min-block-size-quiet": { + "description": "Defined in `.spectrum-Textfield`, `.spectrum-Textfield--sizeS`, `.spectrum-Textfield--sizeL`, `.spectrum-Textfield--sizeXL`.
Used by `.spectrum-Textfield--multiline.spectrum-Textfield--quiet .spectrum-Textfield-input`.", + "control": "text", + "category": "Global" + }, + "spectrum-component-height-75": { + "value": "24px", + "description": "Used by `--spectrum-textfield-height`, `--spectrum-text-area-min-block-size-quiet`.", + "control": "text", + "category": "Global" + }, + "spectrum-field-label-to-component-quiet-small": { + "value": "-8px", + "description": "Used by `--spectrum-textfield-label-spacing-block-quiet`.", + "control": "text", + "category": "Global" + }, + "spectrum-spacing-100": { + "value": "8px", + "description": "Used by `--spectrum-textfield-label-spacing-inline-side-label`.", + "control": "text", + "category": "Global" + }, + "spectrum-component-edge-to-text-75": { + "value": "10px", + "description": "Used by `--spectrum-textfield-spacing-inline`.", + "control": "text", + "category": "Global" + }, + "spectrum-workflow-icon-size-75": { + "value": "16px", + "description": "Used by `--spectrum-textfield-icon-size-invalid`.", + "control": "text", + "category": "Global" + }, + "spectrum-checkmark-icon-size-75": { + "value": "10px", + "description": "Used by `--spectrum-textfield-icon-size-valid`.", + "control": "text", + "category": "Global" + }, + "spectrum-field-edge-to-alert-icon-small": { + "value": "9px", + "description": "Used by `--spectrum-textfield-icon-spacing-inline-end-invalid`.", + "control": "text", + "category": "Global" + }, + "spectrum-field-edge-to-validation-icon-small": { + "value": "9px", + "description": "Used by `--spectrum-textfield-icon-spacing-inline-end-valid`.", + "control": "text", + "category": "Global" + }, + "spectrum-field-top-to-validation-icon-small": { + "value": "7px", + "description": "Used by `--spectrum-textfield-icon-spacing-block-valid`.", + "control": "text", + "category": "Global" + }, + "spectrum-field-text-to-alert-icon-small": { + "value": "8px", + "description": "Used by `--spectrum-textfield-icon-spacing-inline-start-invalid`.", + "control": "text", + "category": "Global" + }, + "spectrum-field-text-to-validation-icon-small": { + "value": "8px", + "description": "Used by `--spectrum-textfield-icon-spacing-inline-start-valid`.", + "control": "text", + "category": "Global" + }, + "spectrum-character-count-to-field-quiet-small": { + "value": "-3px", + "description": "Used by `--spectrum-textfield-character-count-spacing-block-quiet`.", + "control": "text", + "category": "Global" + }, + "spectrum-side-label-character-count-top-margin-small": { + "value": "4px", + "description": "Used by `--spectrum-textfield-character-count-spacing-block-side`.", + "control": "text", + "category": "Global" + }, + "spectrum-component-height-200": { + "value": "40px", + "description": "Used by `--spectrum-textfield-height`, `--spectrum-text-area-min-block-size-quiet`.", + "control": "text", + "category": "Global" + }, + "spectrum-field-label-to-component-quiet-large": { + "value": "-12px", + "description": "Used by `--spectrum-textfield-label-spacing-block-quiet`.", + "control": "text", + "category": "Global" + }, + "spectrum-font-size-200": { + "value": "16px", + "description": "Used by `--spectrum-textfield-placeholder-font-size`, `--spectrum-textfield-character-count-font-size`.", + "control": "text", + "category": "Global" + }, + "spectrum-component-edge-to-text-200": { + "value": "15px", + "description": "Used by `--spectrum-textfield-spacing-inline`.", + "control": "text", + "category": "Global" + }, + "spectrum-workflow-icon-size-200": { + "value": "22px", + "description": "Used by `--spectrum-textfield-icon-size-invalid`.", + "control": "text", + "category": "Global" + }, + "spectrum-checkmark-icon-size-200": { + "value": "12px", + "description": "Used by `--spectrum-textfield-icon-size-valid`.", + "control": "text", + "category": "Global" + }, + "spectrum-field-edge-to-alert-icon-large": { + "value": "15px", + "description": "Used by `--spectrum-textfield-icon-spacing-inline-end-invalid`.", + "control": "text", + "category": "Global" + }, + "spectrum-field-edge-to-validation-icon-large": { + "value": "15px", + "description": "Used by `--spectrum-textfield-icon-spacing-inline-end-valid`.", + "control": "text", + "category": "Global" + }, + "spectrum-field-top-to-validation-icon-large": { + "value": "14px", + "description": "Used by `--spectrum-textfield-icon-spacing-block-valid`.", + "control": "text", + "category": "Global" + }, + "spectrum-field-text-to-alert-icon-large": { + "value": "15px", + "description": "Used by `--spectrum-textfield-icon-spacing-inline-start-invalid`.", + "control": "text", + "category": "Global" + }, + "spectrum-field-text-to-validation-icon-large": { + "value": "15px", + "description": "Used by `--spectrum-textfield-icon-spacing-inline-start-valid`.", + "control": "text", + "category": "Global" + }, + "spectrum-character-count-to-field-quiet-large": { + "value": "-3px", + "description": "Used by `--spectrum-textfield-character-count-spacing-block-quiet`.", + "control": "text", + "category": "Global" + }, + "spectrum-side-label-character-count-top-margin-large": { + "value": "11px", + "description": "Used by `--spectrum-textfield-character-count-spacing-block-side`.", + "control": "text", + "category": "Global" + }, + "spectrum-component-height-300": { + "value": "48px", + "description": "Used by `--spectrum-textfield-height`, `--spectrum-text-area-min-block-size-quiet`.", + "control": "text", + "category": "Global" + }, + "spectrum-field-label-to-component-quiet-extra-large": { + "value": "-15px", + "description": "Used by `--spectrum-textfield-label-spacing-block-quiet`.", + "control": "text", + "category": "Global" + }, + "spectrum-font-size-300": { + "value": "18px", + "description": "Used by `--spectrum-textfield-placeholder-font-size`.", + "control": "text", + "category": "Global" + }, + "spectrum-workflow-icon-size-300": { + "value": "26px", + "description": "Used by `--spectrum-textfield-icon-size-invalid`.", + "control": "text", + "category": "Global" + }, + "spectrum-checkmark-icon-size-300": { + "value": "14px", + "description": "Used by `--spectrum-textfield-icon-size-valid`.", + "control": "text", + "category": "Global" + }, + "spectrum-field-edge-to-alert-icon-extra-large": { + "value": "18px", + "description": "Used by `--spectrum-textfield-icon-spacing-inline-end-invalid`.", + "control": "text", + "category": "Global" + }, + "spectrum-field-edge-to-validation-icon-extra-large": { + "value": "18px", + "description": "Used by `--spectrum-textfield-icon-spacing-inline-end-valid`.", + "control": "text", + "category": "Global" + }, + "spectrum-field-top-to-validation-icon-extra-large": { + "value": "17px", + "description": "Used by `--spectrum-textfield-icon-spacing-block-valid`.", + "control": "text", + "category": "Global" + }, + "spectrum-field-text-to-alert-icon-extra-large": { + "value": "18px", + "description": "Used by `--spectrum-textfield-icon-spacing-inline-start-invalid`.", + "control": "text", + "category": "Global" + }, + "spectrum-field-text-to-validation-icon-extra-large": { + "value": "18px", + "description": "Used by `--spectrum-textfield-icon-spacing-inline-start-valid`.", + "control": "text", + "category": "Global" + }, + "spectrum-component-bottom-to-text-200": { + "value": "11px", + "description": "Used by `--spectrum-textfield-character-count-spacing-block`.", + "control": "text", + "category": "Global" + }, + "spectrum-character-count-to-field-quiet-extra-large": { + "value": "-4px", + "description": "Used by `--spectrum-textfield-character-count-spacing-block-quiet`.", + "control": "text", + "category": "Global" + }, + "spectrum-side-label-character-count-top-margin-extra-large": { + "value": "14px", + "description": "Used by `--spectrum-textfield-character-count-spacing-block-side`.", + "control": "text", + "category": "Global" + } + }, + "system-theme": { + "system-textfield-background-color": { + "description": "Defined in `.spectrum`.
Used by `--spectrum-textfield-background-color`.", + "control": "color" + }, + "system-textfield-background-color-disabled": { + "description": "Defined in `.spectrum`.
Used by `--spectrum-textfield-background-color-disabled`.", + "control": "color" + }, + "system-textfield-border-color": { + "description": "Defined in `.spectrum`.
Used by `--spectrum-textfield-border-color`.", + "control": "color" + }, + "system-textfield-border-color-hover": { + "description": "Defined in `.spectrum`.
Used by `--spectrum-textfield-border-color-hover`.", + "control": "color" + }, + "system-textfield-border-color-focus": { + "description": "Defined in `.spectrum`.
Used by `--spectrum-textfield-border-color-focus`.", + "control": "color" + }, + "system-textfield-border-color-focus-hover": { + "description": "Defined in `.spectrum`.
Used by `--spectrum-textfield-border-color-focus-hover`.", + "control": "color" + }, + "system-textfield-border-color-keyboard-focus": { + "description": "Defined in `.spectrum`.
Used by `--spectrum-textfield-border-color-keyboard-focus`.", + "control": "color" + }, + "system-textfield-border-color-disabled": { + "description": "Defined in `.spectrum`.
Used by `--spectrum-textfield-border-color-disabled`.", + "control": "color" + }, + "system-textfield-border-width": { + "description": "Defined in `.spectrum`.
Used by `--spectrum-textfield-border-width`.", + "control": "text" + }, + "system-textfield-icon-spacing-block-invalid": { + "description": "Defined in `.spectrum`.
Used by `--spectrum-textfield-icon-spacing-block-invalid`.", + "control": "text" + }, + "system-textfield-size-s-icon-spacing-block-invalid": { + "description": "Defined in `.spectrum`.
Used by `--spectrum-textfield-icon-spacing-block-invalid`.", + "control": "text" + }, + "system-textfield-size-l-icon-spacing-block-invalid": { + "description": "Defined in `.spectrum`.
Used by `--spectrum-textfield-icon-spacing-block-invalid`.", + "control": "text" + }, + "system-textfield-size-xl-icon-spacing-block-invalid": { + "description": "Defined in `.spectrum`.
Used by `--spectrum-textfield-icon-spacing-block-invalid`.", + "control": "text" + }, + "system-textfield-quiet-border-color-disabled": { + "description": "Defined in `.spectrum`.
Used by `--spectrum-textfield-border-color-disabled`.", + "control": "color" + } + }, + "passthroughs": {}, + "high-contrast": { + "highcontrast-textfield-border-color": { + "value": "var(--mod-textfield-border-color, var(--spectrum-textfield-border-color))", + "description": "Defined in `.spectrum-Textfield`.
Used by `.spectrum-Textfield-input`.
Defaults to `var(--mod-textfield-border-color, var(--spectrum-textfield-border-color))`, if not set.", + "control": "color" + }, + "highcontrast-textfield-text-color-default": { + "value": "var(--mod-textfield-text-color-default, var(--spectrum-textfield-text-color-default))", + "description": "Defined in `.spectrum-Textfield .spectrum-Textfield-input`, `.spectrum-Textfield .spectrum-Textfield-input::placeholder`.
Used by `.spectrum-Textfield-input`, `.spectrum-Textfield-input::placeholder`.
Defaults to `var(--mod-textfield-text-color-default, var(--spectrum-textfield-text-color-default))`, if not set.", + "control": "color" + }, + "highcontrast-textfield-border-color-focus": { + "value": "var(--mod-textfield-border-color-focus, var(--spectrum-textfield-border-color-focus))", + "description": "Defined in `.spectrum-Textfield`.
Used by `.is-focused .spectrum-Textfield-input, .spectrum-Textfield-input:focus`.
Defaults to `var(--mod-textfield-border-color-focus, var(--spectrum-textfield-border-color-focus))`, if not set.", + "control": "color" + }, + "highcontrast-textfield-border-color-keyboard-focus": { + "value": "var(--mod-textfield-border-color-keyboard-focus, var(--spectrum-textfield-border-color-keyboard-focus))", + "description": "Defined in `.spectrum-Textfield`.
Used by `.is-keyboardFocused .spectrum-Textfield-input`.
Defaults to `var(--mod-textfield-border-color-keyboard-focus, var(--spectrum-textfield-border-color-keyboard-focus))`, if not set.", + "control": "color" + }, + "highcontrast-textfield-focus-indicator-color": { + "value": "var(--mod-textfield-focus-indicator-color, var(--spectrum-textfield-focus-indicator-color))", + "description": "Defined in `.spectrum-Textfield`.
Used by `.is-keyboardFocused .spectrum-Textfield-input`, `.spectrum-Textfield--quiet.is-keyboardFocused:after`.
Defaults to `var(--mod-textfield-focus-indicator-color, var(--spectrum-textfield-focus-indicator-color))`, if not set.", + "control": "color" + }, + "highcontrast-textfield-text-color-keyboard-focus": { + "value": "var(--mod-textfield-text-color-keyboard-focus, var(--spectrum-textfield-text-color-keyboard-focus))", + "description": "Defined in `.spectrum-Textfield .spectrum-Textfield-input`, `.spectrum-Textfield .spectrum-Textfield-input::placeholder`.
Used by `.is-keyboardFocused .spectrum-Textfield-input, .is-keyboardFocused .spectrum-Textfield-input::placeholder`.
Defaults to `var(--mod-textfield-text-color-keyboard-focus, var(--spectrum-textfield-text-color-keyboard-focus))`, if not set.", + "control": "color" + }, + "highcontrast-textfield-text-color-valid": { + "value": "var(--mod-textfield-text-color-valid, var(--spectrum-textfield-text-color-valid))", + "description": "Defined in `.spectrum-Textfield`.
Used by `.is-valid .spectrum-Textfield-input`.
Defaults to `var(--mod-textfield-text-color-valid, var(--spectrum-textfield-text-color-valid))`, if not set.", + "control": "color" + }, + "highcontrast-textfield-text-color-invalid": { + "value": "var(--mod-textfield-text-color-invalid, var(--spectrum-textfield-text-color-invalid))", + "description": "Defined in `.spectrum-Textfield`.
Used by `.is-invalid .spectrum-Textfield-input`.
Defaults to `var(--mod-textfield-text-color-invalid, var(--spectrum-textfield-text-color-invalid))`, if not set.", + "control": "color" + }, + "highcontrast-textfield-border-color-invalid-default": { + "value": "var(--mod-textfield-border-color-invalid-default, var(--spectrum-textfield-border-color-invalid-default))", + "description": "Defined in `.spectrum-Textfield`.
Used by `.is-invalid .spectrum-Textfield-input`.
Defaults to `var(--mod-textfield-border-color-invalid-default, var(--spectrum-textfield-border-color-invalid-default))`, if not set.", + "control": "color" + }, + "highcontrast-textfield-border-color-invalid-focus": { + "value": "var(--mod-textfield-border-color-invalid-focus, var(--spectrum-textfield-border-color-invalid-focus))", + "description": "Defined in `.spectrum-Textfield`.
Used by `.is-invalid .spectrum-Textfield-input:focus, .is-invalid.is-focused .spectrum-Textfield-input, .is-invalid:focus .spectrum-Textfield-input`.
Defaults to `var(--mod-textfield-border-color-invalid-focus, var(--spectrum-textfield-border-color-invalid-focus))`, if not set.", + "control": "color" + }, + "highcontrast-textfield-border-color-invalid-keyboard-focus": { + "value": "var(--mod-textfield-border-color-invalid-keyboard-focus, var(--spectrum-textfield-border-color-invalid-keyboard-focus))", + "description": "Defined in `.spectrum-Textfield`.
Used by `.is-invalid .spectrum-Textfield-input:focus-visible, .is-invalid.is-keyboardFocused .spectrum-Textfield-input`.
Defaults to `var(--mod-textfield-border-color-invalid-keyboard-focus, var(--spectrum-textfield-border-color-invalid-keyboard-focus))`, if not set.", + "control": "color" + }, + "highcontrast-textfield-text-color-disabled": { + "value": "var(--mod-textfield-text-color-disabled, var(--spectrum-textfield-text-color-disabled))", + "description": "Defined in `.spectrum-Textfield .spectrum-Textfield-input`, `.spectrum-Textfield .spectrum-Textfield-input::placeholder`.
Used by `.spectrum-Textfield-input:disabled, .spectrum-Textfield-input:disabled::placeholder, .spectrum-Textfield.is-disabled .spectrum-Textfield-input, .spectrum-Textfield.is-disabled .spectrum-Textfield-input::placeholder`, `.spectrum-Textfield--quiet.is-disabled .spectrum-Textfield-input, .spectrum-Textfield--quiet.is-disabled .spectrum-Textfield-input::placeholder, .spectrum-Textfield-input:disabled, .spectrum-Textfield-input:disabled::placeholder`, `.spectrum-Textfield--quiet.is-disabled:hover .spectrum-Textfield-input, .spectrum-Textfield.is-disabled:hover .spectrum-Textfield-input, .spectrum-Textfield.is-disabled:hover .spectrum-Textfield-input::placeholder`, `.spectrum-Textfield--quiet.is-disabled:hover .spectrum-Textfield-input::placeholder`.
Defaults to `var(--mod-textfield-text-color-disabled, var(--spectrum-textfield-text-color-disabled))`, if not set.", + "control": "color" + }, + "highcontrast-textfield-text-color-readonly": { + "value": "var(--mod-textfield-text-color-readonly, var(--spectrum-textfield-text-color-readonly))", + "description": "Defined in `.spectrum-Textfield .spectrum-Textfield-input`, `.spectrum-Textfield .spectrum-Textfield-input::placeholder`.
Used by `.spectrum-Textfield-input:read-only, .spectrum-Textfield.is-readOnly .spectrum-Textfield-input`, `.spectrum-Textfield-input:read-only::placeholder, .spectrum-Textfield.is-readOnly .spectrum-Textfield-input::placeholder`, `.spectrum-Textfield.is-readOnly:hover .spectrum-Textfield-input, .spectrum-Textfield.is-readOnly:hover .spectrum-Textfield-input::placeholder`.
Defaults to `var(--mod-textfield-text-color-readonly, var(--spectrum-textfield-text-color-readonly))`, if not set.", + "control": "color" + }, + "highcontrast-textfield-border-color-hover": { + "value": "var(--mod-textfield-border-color-hover, var(--spectrum-textfield-border-color-hover))", + "description": "Defined in `.spectrum-Textfield`.
Used by `.spectrum-Textfield-input:hover, .spectrum-Textfield:hover .spectrum-Textfield-input`.
Defaults to `var(--mod-textfield-border-color-hover, var(--spectrum-textfield-border-color-hover))`, if not set.", + "control": "color" + }, + "highcontrast-textfield-text-color-hover": { + "value": "var(--mod-textfield-text-color-hover, var(--spectrum-textfield-text-color-hover))", + "description": "Defined in `.spectrum-Textfield .spectrum-Textfield-input`, `.spectrum-Textfield .spectrum-Textfield-input::placeholder`.
Used by `.spectrum-Textfield-input:hover, .spectrum-Textfield-input:hover::placeholder, .spectrum-Textfield:hover .spectrum-Textfield-input, .spectrum-Textfield:hover .spectrum-Textfield-input::placeholder`.
Defaults to `var(--mod-textfield-text-color-hover, var(--spectrum-textfield-text-color-hover))`, if not set.", + "control": "color" + }, + "highcontrast-textfield-border-color-invalid-hover": { + "value": "var(--mod-textfield-border-color-invalid-hover, var(--spectrum-textfield-border-color-invalid-hover))", + "description": "Defined in `.spectrum-Textfield`.
Used by `.is-invalid .spectrum-Textfield-input:hover:not(.is-disabled), .is-invalid:hover:not(.is-disabled) .spectrum-Textfield-input`.
Defaults to `var(--mod-textfield-border-color-invalid-hover, var(--spectrum-textfield-border-color-invalid-hover))`, if not set.", + "control": "color" + } + } } diff --git a/components/textfield/stories/template.js b/components/textfield/stories/template.js index 5f20b0abb86..7798391b612 100644 --- a/components/textfield/stories/template.js +++ b/components/textfield/stories/template.js @@ -57,6 +57,7 @@ import "../themes/express.css"; */ export const Template = ({ rootClass = "spectrum-Textfield", + id = getRandomId("text-field"), size = "m", customClasses = [], customInputClasses = [], @@ -83,7 +84,6 @@ export const Template = ({ placeholder, name, helpText = "", - id = getRandomId("textfield"), value = "", type = "text", autocomplete = true, diff --git a/components/textfield/stories/textarea.stories.js b/components/textfield/stories/textarea.stories.js index 340820af2db..8168bb6f1fc 100644 --- a/components/textfield/stories/textarea.stories.js +++ b/components/textfield/stories/textarea.stories.js @@ -1,11 +1,13 @@ import { Sizes } from "@spectrum-css/preview/decorators"; import { disableDefaultModes } from "@spectrum-css/preview/modes"; -import metadata from "../dist/metadata.json"; -import packageJson from "../package.json"; import { HelpTextOptionsTextArea, KeyboardFocusTemplate, Template, TextAreaOptions } from "./textarea.template.js"; import { TextAreaGroup } from "./textarea.test.js"; import { default as Textfield } from "./textfield.stories.js"; +// Local assets to render the component styles and structure +import metadata from "../dist/metadata.json"; +import packageJson from "../package.json"; + /** * A text area is multi-line text field using the `