diff --git a/.changeset/pre.json b/.changeset/pre.json index e7510b9ae31..84ed715d578 100644 --- a/.changeset/pre.json +++ b/.changeset/pre.json @@ -88,7 +88,6 @@ "@spectrum-css/typography": "8.0.1", "@spectrum-css/underlay": "6.0.1", "@spectrum-css/well": "7.0.1", - "@spectrum-tools/postcss-rgb-mapping": "1.0.0", "@spectrum-tools/stylelint-no-missing-var": "2.0.1", "@spectrum-tools/stylelint-no-unknown-custom-properties": "2.0.2", "@spectrum-tools/stylelint-no-unused-custom-properties": "2.0.3", diff --git a/.eslintrc b/.eslintrc index f422aa9e96a..f637c2c6d15 100644 --- a/.eslintrc +++ b/.eslintrc @@ -19,6 +19,7 @@ "semi": ["warn", "always"], "space-before-blocks": ["warn", "always"] }, + "ignorePatterns": ["!.storybook"], "overrides": [ { "files": ["*.json"], diff --git a/.github/QUICK-START.md b/.github/QUICK-START.md index 4b97fcab7e8..d6935dfad4f 100644 --- a/.github/QUICK-START.md +++ b/.github/QUICK-START.md @@ -10,12 +10,39 @@ Install the components you want along with their dependencies. Here's an example yarn add -DW @spectrum-css/tokens @spectrum-css/typography @spectrum-css/page @spectrum-css/icon @spectrum-css/button ``` -Spectrum CSS components utilize custom properties in order to change themes and scales. For these to apply, a couple of classes need to be added to the document’s `` tag based on the [visual language](https://github.com/adobe/spectrum-css?tab=readme-ov-file#visual-language), [scale](https://github.com/adobe/spectrum-css?tab=readme-ov-file#scales), and [theme](https://github.com/adobe/spectrum-css?tab=readme-ov-file#themes-colorstops) you wish to use. For example, the following code snippet will display styling for the default Spectrum visual language using medium scale and light color theme: +Spectrum CSS components utilize custom properties in order to express our design language through a set of core tokens. We leverage the `@adobe/spectrum-tokens` data as a source of this design data and convert it into a set of CSS custom properties. This allows us to use the tokens in our components and to create a consistent design language across all of our components. + +Some of these tokens have different values depending on the visual language or scale being used. The default values for all tokens are set to the default values for the light theme and medium scale. + +To force the dark theme, you can add `color-scheme: dark` to your container element. Doing this will force the dark value to be used for all tokens that have one. This can be done at any level of the DOM and by leveraging the cascade, the color schemes can be nested or changed at any level. For example, if you want to force the dark theme for a specific component, you can add `color-scheme: dark` to that component's container element. ```html - + +
+

A dark themed container

+
+

A light themed container

+
+
``` +The design language also includes a set of token values that represent different device sizes. At the moment, these values are only defined as "medium" and "large", with "medium" as the default which maps generally to a desktop or laptop screen. The "large" value is intended for smaller devices, such as phones and tablets. The default value for all tokens is set to the default value for the medium scale. To force the large scale, you can update the cascading layers inheritance: + +```css +@layers defaults, medium; + +@media screen and (min-width: 768px) { + @layers defaults, large; +} +``` + +What's happening here is that the `defaults` layer is being overridden by the `large` layer when the screen size is greater than 768px. This means that all tokens that have a value for the `large` scale will be used instead of the default value. The most useful feature of this approach is that each application can make their own decision about which scale to leverage and at what screen size. This allows for a lot of flexibility in how the design language is applied to different applications. + Use the `index.css` files in your project to include component and global styles ([background theme/colorstop](https://github.com/adobe/spectrum-css?tab=readme-ov-file#themes-colorstops), [platform scaling](https://github.com/adobe/spectrum-css?tab=readme-ov-file#scales), etc.) for the component. If you don't need all of the global styles, peek at the docs for [including assets](https://github.com/adobe/spectrum-css?tab=readme-ov-file#including-assets)). Use this file by including the stylesheet (plus stylesheets for dependencies) in the `` tag: ```html diff --git a/.storybook/assets/base.css b/.storybook/assets/base.css index e5886de13ec..ac3fb893ffb 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. * @@ -13,33 +11,42 @@ * governing permissions and limitations under the License. */ -body { +:root { --spectrum-font-family: var(--spectrum-sans-font-family-stack); --spectrum-font-style: var(--spectrum-default-font-style); --spectrum-font-size: var(--spectrum-font-size-100); + /* Gradient that changes with the color theme. */ + --spectrum-examples-gradient: linear-gradient(45deg, var(--spectrum-magenta-1500), var(--spectrum-blue-1500)); + + /* Gradients that do not change with the color theme, for use in static color backgrounds. */ + --spectrum-examples-gradient-static-black: linear-gradient(45deg, rgb(255 241 246), rgb(238 245 255)); + --spectrum-examples-gradient-static-white: linear-gradient(45deg, rgb(64 0 22), rgb(14 24 67)); + + color-scheme: light dark; +} + +body { margin: 0; font-family: var(--spectrum-font-family); font-size: var(--spectrum-font-size); font-style: var(--spectrum-font-style); - - color: var(--spectrum-neutral-content-color-default, rgb(34, 34, 34)); - background-color: var(--spectrum-background-base-color, rgb(230, 230, 230)); } -.spectrum { - color: var(--spectrum-neutral-content-color-default); - background-color: var(--spectrum-background-base-color); - -webkit-tap-highlight-color: rgba(0, 0, 0, 0%); +body, +.docs-story { + color: var(--spectrum-neutral-content-color-default, rgb(34, 34, 34)); + background: var(--spectrum-background-base-color, rgb(230, 230, 230)); + -webkit-tap-highlight-color: rgb(0, 0, 0, 0%); } -.spectrum .spectrum-examples-static-black { - background: var(--spectrum-examples-gradient-static-black); +.spectrum-examples-static-black { + background: var(--spectrum-examples-gradient-static-black) !important; } -.spectrum .spectrum-examples-static-white { - background: var(--spectrum-examples-gradient-static-white); +.spectrum-examples-static-white { + background: var(--spectrum-examples-gradient-static-white) !important; } /* Hide the SVG elements that only include references */ @@ -61,7 +68,7 @@ svg:has(symbol):not(:has(use)) { line-height: normal; letter-spacing: normal; text-transform: none; - border-block-end: 1px solid hsla(203deg, 50%, 30%, 15%); + border-block-end: 1px solid hsl(203deg, 50%, 30%, 15%); } /* Force the modal wrapper to be contained by the frame not the viewport */ @@ -76,5 +83,3 @@ svg:has(symbol):not(:has(use)) { story view), due to Storybook's inline style that sets overflow: auto */ overflow: visible !important; } - -/* stylelint-enable selector-class-pattern */ diff --git a/.storybook/decorators/context.js b/.storybook/decorators/context.js index cc147ee10cd..026838f9083 100644 --- a/.storybook/decorators/context.js +++ b/.storybook/decorators/context.js @@ -47,9 +47,6 @@ export const withContextWrapper = makeDecorator({ // Start by attaching the appropriate tokens to the container toggleStyles(document.body, "tokens", tokens, true); - // add the default classes to the body to ensure labels, headings, and borders are styled correctly - document.body.classList.add("spectrum", "spectrum--light", "spectrum--medium"); - for (const container of fetchContainers(id, isDocs, isTesting)) { // Check if the container is a testing wrapper to prevent applying colors around the testing grid const isTestingWrapper = isTesting ? container.matches("body:has([data-testing-preview]),[data-testing-preview]") : false; @@ -71,9 +68,6 @@ export const withContextWrapper = makeDecorator({ // If we can't determine the static key, we can't use the static color if (!staticKey) hasStaticElement = false; - // Every container gets the spectrum class - container.classList.toggle("spectrum", true); - // Let the static color override the color if it's set if (!isTestingWrapper && hasStaticElement && staticColorSettings[staticKey]?.color) { color = staticColorSettings[staticKey].color; @@ -85,13 +79,8 @@ export const withContextWrapper = makeDecorator({ color = "light"; } - for (let c of ["light", "dark"]) { - container.classList.toggle(`spectrum--${c}`, c === color); - } - - for (const s of ["medium", "large"]) { - container.classList.toggle(`spectrum--${s}`, s === scale); - } + container.style.setProperty("color-scheme", color); + container.classList.toggle("spectrum--large", scale === "large"); if (!isTestingWrapper) { if (hasStaticElement && staticKey && staticColorSettings[staticKey]) { diff --git a/.storybook/decorators/icon-sprites.js b/.storybook/decorators/icon-sprites.js index b576632bcab..6a42df1692b 100644 --- a/.storybook/decorators/icon-sprites.js +++ b/.storybook/decorators/icon-sprites.js @@ -10,10 +10,6 @@ export const withIconSpriteSheet = makeDecorator({ name: "withIconSpriteSheet", parameterName: "spritesheet", wrapper: (StoryFn, context) => { - const { - loaded = {}, - } = context; - useEffect(() => { // Inject the sprite sheets into the document let sprite = document.getElementById("spritesheets"); diff --git a/.storybook/decorators/utilities.js b/.storybook/decorators/utilities.js index f6722ae79ea..b5fd6fe0219 100644 --- a/.storybook/decorators/utilities.js +++ b/.storybook/decorators/utilities.js @@ -116,7 +116,7 @@ export const Container = ({ if (withBorder) { borderStyles["padding-inline"] = "24px"; borderStyles["padding-block"] = "24px"; - borderStyles["border"] = "1px solid rgba(var(--spectrum-gray-600-rgb), 20%)"; + borderStyles["border"] = "1px solid color-mix(in srgb, var(--spectrum-gray-600) 20%, transparent)"; borderStyles["border-radius"] = "4px"; gap = 80; } @@ -158,6 +158,7 @@ export const Container = ({ "row-gap": "24px", "align-items": heading && level > 1 ? "flex-start" : undefined, "justify-content": direction === "column" ? "center" : "flex-start", + "background": level === 1 && !isDocs ? "var(--spectrum-background-base-color)" : undefined, ...borderStyles, ...wrapperStyles, })} diff --git a/.storybook/foundations/corner-rounding/action-button-corner-rounding.stories.js b/.storybook/foundations/corner-rounding/action-button-corner-rounding.stories.js index c944ca467ab..d02eda61554 100644 --- a/.storybook/foundations/corner-rounding/action-button-corner-rounding.stories.js +++ b/.storybook/foundations/corner-rounding/action-button-corner-rounding.stories.js @@ -14,7 +14,7 @@ export default { handles: ["click .spectrum-ActionButton:not([disabled])"], }, }, - tags: ['!dev'], + tags: ["!dev"], }; const ActionButton = (args, context) => html` diff --git a/.storybook/foundations/corner-rounding/checkbox-corner-rounding.stories.js b/.storybook/foundations/corner-rounding/checkbox-corner-rounding.stories.js index 96aa3ce69c4..aba75ab0a43 100644 --- a/.storybook/foundations/corner-rounding/checkbox-corner-rounding.stories.js +++ b/.storybook/foundations/corner-rounding/checkbox-corner-rounding.stories.js @@ -12,10 +12,10 @@ export default { }, parameters: { actions: { - handles: ['click input[type="checkbox"]'], + handles: ["click input[type=\"checkbox\"]"], }, }, - tags: ['!dev'], + tags: ["!dev"], }; const Checkbox = (args = {}, context = {}) => html` @@ -82,7 +82,7 @@ const CheckboxTable = (args, context) => { `; -} +}; export const CheckboxExamples = CheckboxTable.bind({}); CheckboxExamples.args = {}; diff --git a/.storybook/foundations/drop-shadow/drop-shadow.stories.js b/.storybook/foundations/drop-shadow/drop-shadow.stories.js index 6d936af9411..55d4b048708 100644 --- a/.storybook/foundations/drop-shadow/drop-shadow.stories.js +++ b/.storybook/foundations/drop-shadow/drop-shadow.stories.js @@ -1,5 +1,7 @@ import { html } from "lit"; import { classMap } from "lit/directives/class-map.js"; +import { styleMap } from "lit/directives/style-map.js"; + import "./index.css"; export default { @@ -28,17 +30,15 @@ const DropShadowSwatch = ({ const DropShadowBackground = ( { - rootClass = "spectrum-Foundations-Example-swatch-container", color, ...args }, context, ) => html`
${DropShadowSwatch(args, context)} diff --git a/.storybook/foundations/drop-shadow/index.css b/.storybook/foundations/drop-shadow/index.css index bf54a5ddce9..efe1807152b 100644 --- a/.storybook/foundations/drop-shadow/index.css +++ b/.storybook/foundations/drop-shadow/index.css @@ -13,103 +13,50 @@ governing permissions and limitations under the License. /* stylelint-disable spectrum-tools/no-unknown-custom-properties */ .spectrum-Foundations-Example-DropShadow-swatch { - block-size: 150px; - inline-size: 150px; - background-color: var(--spectrum-gray-25); - border-radius: var(--spectrum-corner-radius-large-default); - border: transparent; -} + block-size: 150px; + inline-size: 150px; -.spectrum--dark .spectrum-Foundations-Example-DropShadow-swatch { - background-color: var(--spectrum-gray-75); /* matches dark mode design spec rgb(34, 34, 34) */ + /* matches dark mode design spec rgb(34, 34, 34) */ + background-color: light-dark(var(--spectrum-gray-25), var(--spectrum-gray-75)); + border-radius: var(--spectrum-corner-radius-large-default); + border: transparent; } .spectrum-Foundations-Example-DropShadow-swatch--emphasized-default-box-shadow { - box-shadow: - var(--spectrum-drop-shadow-emphasized-default-x) - var(--spectrum-drop-shadow-emphasized-default-y) - var(--spectrum-drop-shadow-emphasized-default-blur) - var(--mod-drop-shadow-emphasized-default-color, var(--spectrum-drop-shadow-emphasized-default-color)); + box-shadow: var(--spectrum-drop-shadow-emphasized-default-x) var(--spectrum-drop-shadow-emphasized-default-y) var(--spectrum-drop-shadow-emphasized-default-blur) var(--mod-drop-shadow-emphasized-default-color, var(--spectrum-drop-shadow-emphasized-default-color)); } .spectrum-Foundations-Example-DropShadow-swatch--emphasized-default-drop-shadow { - filter: drop-shadow( - var(--spectrum-drop-shadow-emphasized-default-x) - var(--spectrum-drop-shadow-emphasized-default-y) - calc(var(--spectrum-drop-shadow-emphasized-default-blur) / 2) /* adjust blur by half of box-shadow */ - var(--mod-drop-shadow-emphasized-default-color, var(--spectrum-drop-shadow-emphasized-default-color)) - ); -} - -.spectrum--light .spectrum-Foundations-Example-DropShadow-swatch--emphasized-default-box-shadow, -.spectrum--dark .spectrum-Foundations-Example-DropShadow-swatch--emphasized-default-box-shadow, -.spectrum--light .spectrum-Foundations-Example-DropShadow-swatch--emphasized-default-drop-shadow, -.spectrum--dark .spectrum-Foundations-Example-DropShadow-swatch--emphasized-default-drop-shadow { -/* adjustment because color tokens do not work properly on foundations pages */ - --mod-drop-shadow-emphasized-default-color: var(--spectrum-drop-shadow-color-100); + filter: drop-shadow(var(--spectrum-drop-shadow-emphasized-default-x) var(--spectrum-drop-shadow-emphasized-default-y) calc(var(--spectrum-drop-shadow-emphasized-default-blur) / 2) /* adjust blur by half of box-shadow */ var(--mod-drop-shadow-emphasized-default-color, var(--spectrum-drop-shadow-emphasized-default-color))); } .spectrum-Foundations-Example-DropShadow-swatch--emphasized-hover-box-shadow { - box-shadow: - var(--spectrum-drop-shadow-emphasized-hover-x) - var(--spectrum-drop-shadow-emphasized-hover-y) - var(--spectrum-drop-shadow-emphasized-hover-blur) - var(--mod-drop-shadow-emphasized-hover-color, var(--spectrum-drop-shadow-emphasized-hover-color)); + box-shadow: var(--spectrum-drop-shadow-emphasized-hover-x) var(--spectrum-drop-shadow-emphasized-hover-y) var(--spectrum-drop-shadow-emphasized-hover-blur) var(--mod-drop-shadow-emphasized-hover-color, var(--spectrum-drop-shadow-emphasized-hover-color)); } .spectrum-Foundations-Example-DropShadow-swatch--emphasized-hover-drop-shadow { - filter: drop-shadow( - var(--spectrum-drop-shadow-emphasized-hover-x) - var(--spectrum-drop-shadow-emphasized-hover-y) - calc(var(--spectrum-drop-shadow-emphasized-hover-blur) / 2) /* adjust blur by half of box-shadow */ - var(--mod-drop-shadow-emphasized-hover-color, var(--spectrum-drop-shadow-emphasized-hover-color)) - ); -} - -.spectrum--light .spectrum-Foundations-Example-DropShadow-swatch--emphasized-hover-drop-shadow, -.spectrum--dark .spectrum-Foundations-Example-DropShadow-swatch--emphasized-hover-drop-shadow, -.spectrum--light .spectrum-Foundations-Example-DropShadow-swatch--emphasized-hover-box-shadow, -.spectrum--dark .spectrum-Foundations-Example-DropShadow-swatch--emphasized-hover-box-shadow { -/* adjustment because color tokens do not work properly on foundations pages */ - --mod-drop-shadow-emphasized-hover-color: var(--spectrum-drop-shadow-color-200); + filter: drop-shadow(var(--spectrum-drop-shadow-emphasized-hover-x) var(--spectrum-drop-shadow-emphasized-hover-y) calc(var(--spectrum-drop-shadow-emphasized-hover-blur) / 2) /* adjust blur by half of box-shadow */ var(--mod-drop-shadow-emphasized-hover-color, var(--spectrum-drop-shadow-emphasized-hover-color))); } .spectrum-Foundations-Example-DropShadow-swatch--elevated-box-shadow { - box-shadow: - var(--spectrum-drop-shadow-elevated-x) - var(--spectrum-drop-shadow-elevated-y) - var(--spectrum-drop-shadow-elevated-blur) - var(--mod-drop-shadow-elevated-color, var(--spectrum-drop-shadow-elevated-color)); + box-shadow: var(--spectrum-drop-shadow-elevated-x) var(--spectrum-drop-shadow-elevated-y) var(--spectrum-drop-shadow-elevated-blur) var(--mod-drop-shadow-elevated-color, var(--spectrum-drop-shadow-elevated-color)); } .spectrum-Foundations-Example-DropShadow-swatch--elevated-drop-shadow { - filter: drop-shadow( - var(--spectrum-drop-shadow-elevated-x) - var(--spectrum-drop-shadow-elevated-y) - calc(var(--spectrum-drop-shadow-elevated-blur) / 2) /* adjust blur by half of box-shadow */ - var(--mod-drop-shadow-elevated-color, var(--spectrum-drop-shadow-elevated-color)) - ); -} - -.spectrum--light .spectrum-Foundations-Example-DropShadow-swatch--elevated-drop-shadow, -.spectrum--dark .spectrum-Foundations-Example-DropShadow-swatch--elevated-drop-shadow, -.spectrum--light .spectrum-Foundations-Example-DropShadow-swatch--elevated-box-shadow, -.spectrum--dark .spectrum-Foundations-Example-DropShadow-swatch--elevated-box-shadow { -/* adjustment because color tokens do not work properly on foundations pages */ - --mod-drop-shadow-elevated-color: var(--spectrum-drop-shadow-color-200); + filter: drop-shadow(var(--spectrum-drop-shadow-elevated-x) var(--spectrum-drop-shadow-elevated-y) calc(var(--spectrum-drop-shadow-elevated-blur) / 2) /* adjust blur by half of box-shadow */ var(--mod-drop-shadow-elevated-color, var(--spectrum-drop-shadow-elevated-color))); } .spectrum-Foundations-Example-swatch-container { - background-color: var(--spectrum-gray-25); - block-size: 200px; - inline-size: 300px; - display: flex; - align-items: center; - justify-content: center; + background-color: var(--spectrum-gray-25); + block-size: 200px; + inline-size: 300px; + display: flex; + align-items: center; + justify-content: center; } .spectrum-Foundations-Example-variant-container { - background-color: var(--spectrum-gray-25); - display: flex; - flex-direction: row; + background-color: var(--spectrum-gray-25); + display: flex; + flex-direction: row; } diff --git a/.storybook/guides/converting-css-properties-to-tokens.mdx b/.storybook/guides/converting-css-properties-to-tokens.mdx new file mode 100644 index 00000000000..6963a56d53a --- /dev/null +++ b/.storybook/guides/converting-css-properties-to-tokens.mdx @@ -0,0 +1,189 @@ +# Converting CSS custom properties to Spectrum tokens + +This document explains how to convert CSS custom properties (CSS variables) that start with `--spectrum-` into entries in the `tokens.json` file for Spectrum CSS components. + +## Overview + +Spectrum CSS components use custom properties for theming and styling. These properties are defined in the component's CSS file and should be converted to structured tokens in the `tokens.json` file for better maintainability and consistency. + +## Process + +### Identify custom properties + +Look for all custom properties in the component's CSS file that start with `--spectrum-{component-name}-`. For example, in `components/alertdialog/index.css`: + +```css +.spectrum-AlertDialog { + --spectrum-alert-dialog-min-width: var(--spectrum-alert-dialog-minimum-width); + --spectrum-alert-dialog-max-width: var(--spectrum-alert-dialog-maximum-width); + --spectrum-alert-dialog-icon-size: var(--spectrum-workflow-icon-size-100); + /* ... more properties */ +} +``` + +### Convert property names + +Remove the `--spectrum-` prefix and convert the property name to kebab-case: + +| CSS Property | Token Key | +| ----------------------------------- | ------------------------ | +| `--spectrum-alert-dialog-min-width` | `alert-dialog-min-width` | +| `--spectrum-alert-dialog-max-width` | `alert-dialog-max-width` | +| `--spectrum-alert-dialog-icon-size` | `alert-dialog-icon-size` | + +### Determine token schema + +Choose the appropriate schema based on the token type: + +- **alias.json**: For simple value references to another token. + ```json + { + "$schema": "https://opensource.adobe.com/spectrum-tokens/schemas/token-types/alias.json", + "value": "{spacing-300}" + } + ``` +- **scale-set.json**: For responsive values (e.g., desktop/mobile variants). + ```json + { + "$schema": "https://opensource.adobe.com/spectrum-tokens/schemas/token-types/scale-set.json", + "sets": { + "desktop": { + "$schema": "https://opensource.adobe.com/spectrum-tokens/schemas/token-types/alias.json", + "value": "{spacing-700}" + }, + "mobile": { + "$schema": "https://opensource.adobe.com/spectrum-tokens/schemas/token-types/alias.json", + "value": "{spacing-600}" + } + } + } + ``` +- **color-set.json**: For color sets, often used for theming or stateful colors. + ```json + { + "$schema": "https://opensource.adobe.com/spectrum-tokens/schemas/token-types/color-set.json", + "value": { + "light": "#FFFFFF", + "dark": "#000000" + } + } + ``` +- **color.json**: For direct color values (RGB/RGBA format). + ```json + { + "$schema": "https://opensource.adobe.com/spectrum-tokens/schemas/token-types/color.json", + "value": "rgb(255, 255, 255)" + } + ``` +- **dimension.json**: For explicit dimension values (e.g., px, em, rem) that are not references to other tokens. + ```json + { + "$schema": "https://opensource.adobe.com/spectrum-tokens/schemas/token-types/dimension.json", + "value": "16px" + } + ``` + +### Map values + +Convert CSS custom property values to token references: + +| CSS value | Token value | +| ------------------------------------------ | ---------------------------- | +| `var(--spectrum-spacing-300)` | `{spacing-300}` | +| `var(--spectrum-heading-color)` | `{heading-color}` | +| `var(--spectrum-background-layer-2-color)` | `{background-layer-2-color}` | + +## Token structure + +### Basic alias token + +```json +{ + "alert-dialog-min-width": { + "component": "alert-dialog", + "$schema": "https://opensource.adobe.com/spectrum-tokens/schemas/token-types/alias.json", + "value": "{alert-dialog-minimum-width}" + } +} +``` + +### Scale set token (responsive) + +```json +{ + "alert-dialog-description-to-buttons": { + "component": "alert-dialog", + "$schema": "https://opensource.adobe.com/spectrum-tokens/schemas/token-types/scale-set.json", + "sets": { + "desktop": { + "$schema": "https://opensource.adobe.com/spectrum-tokens/schemas/token-types/alias.json", + "value": "{spacing-700}" + }, + "mobile": { + "$schema": "https://opensource.adobe.com/spectrum-tokens/schemas/token-types/alias.json", + "value": "{spacing-600}" + } + } + } +} +``` + +## Example: Alert Dialog + +### Token data + +```json +{ + "alert-dialog-min-width": { + "component": "alert-dialog", + "$schema": "https://opensource.adobe.com/spectrum-tokens/schemas/token-types/alias.json", + "value": "{alert-dialog-minimum-width}" + }, + "alert-dialog-max-width": { + "component": "alert-dialog", + "$schema": "https://opensource.adobe.com/spectrum-tokens/schemas/token-types/alias.json", + "value": "{alert-dialog-maximum-width}" + } +} +``` + +### Converted to custom properties + +```css +.spectrum-AlertDialog { + --spectrum-alert-dialog-min-width: var(--spectrum-alert-dialog-minimum-width); + --spectrum-alert-dialog-max-width: var(--spectrum-alert-dialog-maximum-width); + /* ... more properties */ +} +``` + +## Best practices + +1. **Consistent naming**: Always use kebab-case for token keys +2. **Component assignment**: Assign all tokens to the appropriate component +3. **Schema selection**: Use `alias.json` for simple references, `scale-set.json` for responsive values +4. **Value mapping**: Convert CSS custom property references to token references +5. **Preserve existing tokens**: Don't overwrite existing tokens that already have the correct structure +6. **Documentation**: Update component documentation to reflect the new token structure + +## Common value mappings + +| CSS reference | Token reference | +| ----------------------------------- | -------------------------- | +| `--spectrum-spacing-{n}` | `{spacing-{n}}` | +| `--spectrum-color-{name}` | `{color-{name}}` | +| `--spectrum-font-{property}` | `{font-{property}}` | +| `--spectrum-corner-radius-{size}` | `{corner-radius-{size}}` | +| `--spectrum-{component}-{property}` | `{{component}-{property}}` | + +## Validation + +After converting, ensure: + +1. All custom properties from the CSS file are represented in the tokens.json +2. Token keys follow the naming convention +3. Schema references are correct +4. Component assignments are accurate +5. Value references point to valid tokens + +This conversion process ensures better maintainability, consistency, and enables the Spectrum design system to properly manage component theming and styling. diff --git a/.storybook/main.js b/.storybook/main.js index 5914dd5b083..33a79aeedbe 100644 --- a/.storybook/main.js +++ b/.storybook/main.js @@ -1,6 +1,6 @@ import fs from "node:fs"; import path from "node:path"; -import remarkGfm from 'remark-gfm'; +import remarkGfm from "remark-gfm"; // Get a list of all the folders in the components directory const componentDir = path.resolve(__dirname, "../components"); @@ -113,12 +113,12 @@ export default { alias: [ ...components.map(component => ({ find: `@spectrum-css/${component}`, replacement: path.resolve(__dirname, `../components/${component}`) })), { - find: `@spectrum-css/tokens`, - replacement: path.resolve(__dirname, `../tokens`), + find: "@spectrum-css/tokens", + replacement: path.resolve(__dirname, "../tokens"), }, { - find: `@spectrum-css/ui-icons`, - replacement: path.resolve(__dirname, `../ui-icons`), + find: "@spectrum-css/ui-icons", + replacement: path.resolve(__dirname, "../ui-icons"), }, ], } diff --git a/.storybook/manager.js b/.storybook/manager.js index 1e1fe3ef8d1..040e27dc561 100644 --- a/.storybook/manager.js +++ b/.storybook/manager.js @@ -1,15 +1,12 @@ import { addons } from "@storybook/manager-api"; import { create } from "@storybook/theming"; -import { startCase } from "lodash"; +import { startCase } from "lodash-es"; import "./assets/index.css"; import logo from "./assets/logo.svg"; import pkg from "./package.json"; -const root = document.body ?? document.documentElement; -if (root) root.classList.add("spectrum", "spectrum--light", "spectrum--medium"); - addons.setConfig({ theme: create({ base: "light", @@ -65,6 +62,6 @@ addons.setConfig({ }), sidebar: { showRoots: false, - renderLabel: ({ name, type }) => (type === 'story' ? name : startCase(name)) + " 📚", + renderLabel: ({ name, type }) => (type === "story" ? name : startCase(name)) + " 📚", }, }); diff --git a/components/accordion/dist/metadata.json b/components/accordion/dist/metadata.json index 774e6f9a3db..3270c3969a3 100644 --- a/components/accordion/dist/metadata.json +++ b/components/accordion/dist/metadata.json @@ -30,207 +30,43 @@ ".spectrum-Accordion-itemIndicator", ".spectrum-Accordion-itemTitle", ".spectrum-Accordion.spectrum-Accordion--noInlinePadding", - ".spectrum-Accordion:dir(rtl)", - ".spectrum-Accordion:lang(ja)", - ".spectrum-Accordion:lang(ko)", - ".spectrum-Accordion:lang(zh)", - "[dir=\"rtl\"] .spectrum-Accordion" - ], - "modifiers": [ - "--mod-accordion-animation-duration", - "--mod-accordion-background-color-default", - "--mod-accordion-background-color-down", - "--mod-accordion-background-color-hover", - "--mod-accordion-background-color-key-focus", - "--mod-accordion-content-padding-inline", - "--mod-accordion-corner-radius", - "--mod-accordion-disclosure-indicator-height", - "--mod-accordion-disclosure-indicator-to-text-space", - "--mod-accordion-divider-color", - "--mod-accordion-divider-thickness", - "--mod-accordion-edge-to-content-area", - "--mod-accordion-edge-to-disclosure-indicator-space", - "--mod-accordion-edge-to-text-space", - "--mod-accordion-item-content-area-bottom-to-content", - "--mod-accordion-item-content-area-top-to-content", - "--mod-accordion-item-content-color", - "--mod-accordion-item-content-disabled-color", - "--mod-accordion-item-content-font", - "--mod-accordion-item-content-font-size", - "--mod-accordion-item-content-font-style", - "--mod-accordion-item-content-font-weight", - "--mod-accordion-item-content-line-height", - "--mod-accordion-item-focus-indicator-color", - "--mod-accordion-item-focus-indicator-gap", - "--mod-accordion-item-focus-indicator-thickness", - "--mod-accordion-item-header-bottom-to-text-space", - "--mod-accordion-item-header-color-default", - "--mod-accordion-item-header-color-down", - "--mod-accordion-item-header-color-hover", - "--mod-accordion-item-header-color-key-focus", - "--mod-accordion-item-header-disabled-color", - "--mod-accordion-item-header-font", - "--mod-accordion-item-header-font-size", - "--mod-accordion-item-header-font-style", - "--mod-accordion-item-header-font-weight", - "--mod-accordion-item-header-line-height", - "--mod-accordion-item-header-top-to-text-space", - "--mod-accordion-item-min-block-size", - "--mod-accordion-item-minimum-height", - "--mod-accordion-item-minimum-width", - "--mod-accordion-item-width", - "--mod-accordion-top-to-disclosure-indicator" + ":scope:dir(rtl)", + ":scope:lang(ja)", + ":scope:lang(ko)", + ":scope:lang(zh)", + "[dir=\"rtl\"] :scope" ], + "modifiers": [], "component": [ - "--spectrum-accordion-animation-duration", "--spectrum-accordion-background-color-default", "--spectrum-accordion-background-color-down", "--spectrum-accordion-background-color-hover", "--spectrum-accordion-background-color-key-focus", - "--spectrum-accordion-bottom-to-text-compact-extra-large", - "--spectrum-accordion-bottom-to-text-compact-large", - "--spectrum-accordion-bottom-to-text-compact-medium", - "--spectrum-accordion-bottom-to-text-compact-small", - "--spectrum-accordion-bottom-to-text-extra-large", - "--spectrum-accordion-bottom-to-text-large", - "--spectrum-accordion-bottom-to-text-medium", - "--spectrum-accordion-bottom-to-text-small", - "--spectrum-accordion-bottom-to-text-spacious-extra-large", - "--spectrum-accordion-bottom-to-text-spacious-large", - "--spectrum-accordion-bottom-to-text-spacious-medium", - "--spectrum-accordion-bottom-to-text-spacious-small", - "--spectrum-accordion-content-area-bottom-to-content", - "--spectrum-accordion-content-area-edge-to-content-extra-large", - "--spectrum-accordion-content-area-edge-to-content-large", - "--spectrum-accordion-content-area-edge-to-content-medium", - "--spectrum-accordion-content-area-edge-to-content-small", - "--spectrum-accordion-content-area-top-to-content", "--spectrum-accordion-content-padding-inline", "--spectrum-accordion-corner-radius", "--spectrum-accordion-disclosure-indicator-height", - "--spectrum-accordion-disclosure-indicator-to-text-extra-large", - "--spectrum-accordion-disclosure-indicator-to-text-large", - "--spectrum-accordion-disclosure-indicator-to-text-medium", - "--spectrum-accordion-disclosure-indicator-to-text-small", "--spectrum-accordion-disclosure-indicator-to-text-space", - "--spectrum-accordion-divider-color", "--spectrum-accordion-divider-thickness", "--spectrum-accordion-edge-to-content-area", - "--spectrum-accordion-edge-to-content-area-extra-large", - "--spectrum-accordion-edge-to-content-area-large", - "--spectrum-accordion-edge-to-content-area-medium", - "--spectrum-accordion-edge-to-content-area-small", "--spectrum-accordion-edge-to-disclosure-indicator-space", - "--spectrum-accordion-edge-to-text", - "--spectrum-accordion-edge-to-text-space", - "--spectrum-accordion-item-content-area-bottom-to-content", - "--spectrum-accordion-item-content-area-top-to-content", "--spectrum-accordion-item-content-color", - "--spectrum-accordion-item-content-font", "--spectrum-accordion-item-content-font-size", - "--spectrum-accordion-item-content-font-style", - "--spectrum-accordion-item-content-font-weight", "--spectrum-accordion-item-content-line-height", "--spectrum-accordion-item-focus-indicator-color", - "--spectrum-accordion-item-focus-indicator-gap", - "--spectrum-accordion-item-focus-indicator-thickness", "--spectrum-accordion-item-header-bottom-to-text-space", "--spectrum-accordion-item-header-color-default", "--spectrum-accordion-item-header-color-down", "--spectrum-accordion-item-header-color-hover", "--spectrum-accordion-item-header-color-key-focus", "--spectrum-accordion-item-header-cursor", - "--spectrum-accordion-item-header-font", "--spectrum-accordion-item-header-font-size", - "--spectrum-accordion-item-header-font-style", - "--spectrum-accordion-item-header-font-weight", "--spectrum-accordion-item-header-line-height", "--spectrum-accordion-item-header-top-to-text-space", - "--spectrum-accordion-item-min-block-size", "--spectrum-accordion-item-minimum-height", - "--spectrum-accordion-item-minimum-width", "--spectrum-accordion-item-width", - "--spectrum-accordion-minimum-width", - "--spectrum-accordion-top-to-disclosure-indicator", - "--spectrum-accordion-top-to-text-compact-extra-large", - "--spectrum-accordion-top-to-text-compact-large", - "--spectrum-accordion-top-to-text-compact-medium", - "--spectrum-accordion-top-to-text-compact-small", - "--spectrum-accordion-top-to-text-extra-large", - "--spectrum-accordion-top-to-text-large", - "--spectrum-accordion-top-to-text-medium", - "--spectrum-accordion-top-to-text-small", - "--spectrum-accordion-top-to-text-spacious-extra-large", - "--spectrum-accordion-top-to-text-spacious-large", - "--spectrum-accordion-top-to-text-spacious-medium", - "--spectrum-accordion-top-to-text-spacious-small" - ], - "global": [ - "--spectrum-animation-duration-100", - "--spectrum-body-color", - "--spectrum-body-sans-serif-font-style", - "--spectrum-body-sans-serif-font-weight", - "--spectrum-body-size-l", - "--spectrum-body-size-m", - "--spectrum-body-size-s", - "--spectrum-body-size-xs", - "--spectrum-bold-font-weight", - "--spectrum-chevron-icon-size-100", - "--spectrum-chevron-icon-size-200", - "--spectrum-chevron-icon-size-300", - "--spectrum-chevron-icon-size-75", - "--spectrum-cjk-line-height-100", - "--spectrum-component-height-100", - "--spectrum-component-height-200", - "--spectrum-component-height-300", - "--spectrum-component-height-400", - "--spectrum-component-height-50", - "--spectrum-component-height-75", - "--spectrum-corner-radius-medium-size-extra-large", - "--spectrum-corner-radius-medium-size-large", - "--spectrum-corner-radius-medium-size-medium", - "--spectrum-corner-radius-medium-size-small", - "--spectrum-default-font-style", - "--spectrum-disabled-content-color", - "--spectrum-divider-thickness-small", - "--spectrum-field-default-width-extra-large", - "--spectrum-field-default-width-large", - "--spectrum-field-default-width-medium", - "--spectrum-field-edge-to-disclosure-icon-100", - "--spectrum-field-edge-to-disclosure-icon-200", - "--spectrum-field-edge-to-disclosure-icon-300", - "--spectrum-field-edge-to-disclosure-icon-75", - "--spectrum-field-top-to-disclosure-icon-compact-extra-large", - "--spectrum-field-top-to-disclosure-icon-compact-large", - "--spectrum-field-top-to-disclosure-icon-compact-medium", - "--spectrum-field-top-to-disclosure-icon-compact-small", - "--spectrum-field-top-to-disclosure-icon-extra-large", - "--spectrum-field-top-to-disclosure-icon-large", - "--spectrum-field-top-to-disclosure-icon-medium", - "--spectrum-field-top-to-disclosure-icon-small", - "--spectrum-field-top-to-disclosure-icon-spacious-extra-large", - "--spectrum-field-top-to-disclosure-icon-spacious-large", - "--spectrum-field-top-to-disclosure-icon-spacious-medium", - "--spectrum-field-top-to-disclosure-icon-spacious-small", - "--spectrum-focus-indicator-color", - "--spectrum-focus-indicator-gap", - "--spectrum-focus-indicator-thickness", - "--spectrum-font-size-100", - "--spectrum-font-size-200", - "--spectrum-font-size-300", - "--spectrum-font-size-400", - "--spectrum-gray-200", - "--spectrum-line-height-100", - "--spectrum-logical-rotation", - "--spectrum-neutral-content-color-default", - "--spectrum-neutral-content-color-down", - "--spectrum-neutral-content-color-hover", - "--spectrum-neutral-content-color-key-focus", - "--spectrum-sans-font-family-stack", - "--spectrum-transparent-black-100", - "--spectrum-transparent-black-25", - "--spectrum-transparent-black-300" + "--spectrum-accordion-top-to-disclosure-indicator" ], + "global": ["--spectrum-logical-rotation"], "passthroughs": [], "high-contrast": [] } diff --git a/components/accordion/index.css b/components/accordion/index.css index 93bda34c085..f8920b5f45b 100644 --- a/components/accordion/index.css +++ b/components/accordion/index.css @@ -11,182 +11,127 @@ * governing permissions and limitations under the License. */ -.spectrum-Accordion { - /* Layout and spacing */ - --spectrum-accordion-item-minimum-height: var(--spectrum-component-height-100); - --spectrum-accordion-item-minimum-width: var(--spectrum-accordion-minimum-width); - --spectrum-accordion-item-width: var(--spectrum-field-default-width-medium); - --spectrum-accordion-disclosure-indicator-height: var(--spectrum-chevron-icon-size-100); - --spectrum-accordion-disclosure-indicator-to-text-space: var(--spectrum-accordion-disclosure-indicator-to-text-medium); - --spectrum-accordion-edge-to-disclosure-indicator-space: var(--spectrum-field-edge-to-disclosure-icon-100); - --spectrum-accordion-content-padding-inline: var(--spectrum-accordion-content-area-edge-to-content-medium); - --spectrum-accordion-edge-to-content-area: var(--spectrum-accordion-edge-to-content-area-medium); - --spectrum-accordion-edge-to-text-space: var(--spectrum-accordion-edge-to-text); - --spectrum-accordion-item-header-top-to-text-space: var(--spectrum-accordion-top-to-text-medium); - --spectrum-accordion-item-header-bottom-to-text-space: var(--spectrum-accordion-bottom-to-text-medium); - --spectrum-accordion-top-to-disclosure-indicator: var(--spectrum-field-top-to-disclosure-icon-medium); - --spectrum-accordion-item-focus-indicator-thickness: var(--spectrum-focus-indicator-thickness); - --spectrum-accordion-item-focus-indicator-gap: var(--spectrum-focus-indicator-gap); - --spectrum-accordion-corner-radius: var(--spectrum-corner-radius-medium-size-medium); - --spectrum-accordion-item-content-area-top-to-content: var(--spectrum-accordion-content-area-top-to-content); - --spectrum-accordion-item-content-area-bottom-to-content: var(--spectrum-accordion-content-area-bottom-to-content); - --spectrum-accordion-divider-thickness: var(--spectrum-divider-thickness-small); - - /* Text header */ - --spectrum-accordion-item-header-font: var(--spectrum-sans-font-family-stack); - --spectrum-accordion-item-header-font-weight: var(--spectrum-bold-font-weight); - --spectrum-accordion-item-header-font-style: var(--spectrum-default-font-style); - --spectrum-accordion-item-header-font-size: var(--spectrum-font-size-200); - --spectrum-accordion-item-header-line-height: var(--spectrum-line-height-100); - - --spectrum-accordion-item-header-cursor: pointer; - --spectrum-accordion-animation-duration: var(--spectrum-animation-duration-100); - - /* Text body */ - --spectrum-accordion-item-content-font: var(--spectrum-sans-font-family-stack); - --spectrum-accordion-item-content-font-weight: var(--spectrum-body-sans-serif-font-weight); - --spectrum-accordion-item-content-font-style: var(--spectrum-body-sans-serif-font-style); - --spectrum-accordion-item-content-font-size: var(--spectrum-body-size-s); - --spectrum-accordion-item-content-line-height: var(--spectrum-line-height-100); - - /* Colors */ - /* @TODO: use opacity tokens when available */ - --spectrum-accordion-background-color-default: var(--mod-accordion-background-color-default, var(--spectrum-transparent-black-25)); - --spectrum-accordion-background-color-hover: var(--mod-accordion-background-color-hover, var(--spectrum-transparent-black-100)); - --spectrum-accordion-background-color-down: var(--mod-accordion-background-color-down, var(--spectrum-transparent-black-300)); - --spectrum-accordion-background-color-key-focus: var(--mod-accordion-background-color-key-focus, var(--spectrum-transparent-black-100)); - - --spectrum-accordion-item-content-color: var(--mod-accordion-item-content-color, var(--spectrum-body-color)); - --spectrum-accordion-divider-color: var(--mod-accordion-divider-color, var(--spectrum-gray-200)); - --spectrum-accordion-item-focus-indicator-color: var(--mod-accordion-item-focus-indicator-color, var(--spectrum-focus-indicator-color)); - - --spectrum-accordion-item-header-color-default: var(--mod-accordion-item-header-color-default, var(--spectrum-neutral-content-color-default)); - --spectrum-accordion-item-header-color-hover: var(--mod-accordion-item-header-color-hover, var(--spectrum-neutral-content-color-hover)); - --spectrum-accordion-item-header-color-down: var(--mod-accordion-item-header-color-down, var(--spectrum-neutral-content-color-down)); - --spectrum-accordion-item-header-color-key-focus: var(--mod-accordion-item-header-color-key-focus, var(--spectrum-neutral-content-color-key-focus)); - - /* Calculated minimum block-size that accounts for density spacing changes and/or increases in font size and line-height. - This gives us the block-size of the header with a single line of text. */ - --spectrum-accordion-item-min-block-size: max( - var(--mod-accordion-item-minimum-height, var(--spectrum-accordion-item-minimum-height)), - var(--mod-accordion-item-header-top-to-text-space, var(--spectrum-accordion-item-header-top-to-text-space)) + var(--mod-accordion-item-header-bottom-to-text-space, var(--spectrum-accordion-item-header-bottom-to-text-space)) + (var(--mod-accordion-item-header-font-size, var(--spectrum-accordion-item-header-font-size)) * var(--mod-accordion-item-header-line-height, var(--spectrum-accordion-item-header-line-height))) - ); - - /* Right-to-left adjustments for transforms */ - &:dir(rtl) { - --spectrum-logical-rotation: matrix(-1, 0, 0, 1, 0, 0); - } - - /* CJK (Chinese, Japanese, and Korean) language support */ - &:lang(ja), - &:lang(zh), - &:lang(ko) { - --spectrum-accordion-item-header-line-height: var(--spectrum-cjk-line-height-100); - --spectrum-accordion-item-content-line-height: var(--spectrum-cjk-line-height-100); +@design-tokens url("../../tokens/dist/json/tokens.json") format("style-dictionary3"); +@design-tokens url("./tokens.json") format("style-dictionary3"); + +@scope (.spectrum-Accordion) { + :scope { + /* Right-to-left adjustments for transforms */ + &:dir(rtl) { + --spectrum-logical-rotation: matrix(-1, 0, 0, 1, 0, 0); + } + + /* CJK (Chinese, Japanese, and Korean) language support */ + &:lang(ja), + &:lang(zh), + &:lang(ko) { + --spectrum-accordion-item-header-line-height: design-token("cjk-line-height-100"); + --spectrum-accordion-item-content-line-height: design-token("cjk-line-height-100"); + } } } .spectrum-Accordion--sizeS { - --spectrum-accordion-item-minimum-height: var(--spectrum-component-height-75); - --spectrum-accordion-item-width: var(--spectrum-accordion-minimum-width); /* small size default width uses this min-width token */ - --spectrum-accordion-disclosure-indicator-height: var(--spectrum-chevron-icon-size-75); - --spectrum-accordion-disclosure-indicator-to-text-space: var(--spectrum-accordion-disclosure-indicator-to-text-small); - --spectrum-accordion-edge-to-disclosure-indicator-space: var(--spectrum-field-edge-to-disclosure-icon-75); - --spectrum-accordion-content-padding-inline: var(--spectrum-accordion-content-area-edge-to-content-small); - --spectrum-accordion-edge-to-content-area: var(--spectrum-accordion-edge-to-content-area-small); - --spectrum-accordion-corner-radius: var(--spectrum-corner-radius-medium-size-small); - --spectrum-accordion-item-header-font-size: var(--spectrum-font-size-100); - --spectrum-accordion-item-content-font-size: var(--spectrum-body-size-xs); - --spectrum-accordion-item-header-top-to-text-space: var(--spectrum-accordion-top-to-text-small); - --spectrum-accordion-item-header-bottom-to-text-space: var(--spectrum-accordion-bottom-to-text-small); - --spectrum-accordion-top-to-disclosure-indicator: var(--spectrum-field-top-to-disclosure-icon-small); + --spectrum-accordion-item-minimum-height: design-token("component-height-75"); + --spectrum-accordion-item-width: design-token("accordion-minimum-width"); /* small size default width uses this min-width token */ + --spectrum-accordion-disclosure-indicator-height: design-token("chevron-icon-size-75"); + --spectrum-accordion-disclosure-indicator-to-text-space: design-token("accordion-disclosure-indicator-to-text-small"); + --spectrum-accordion-edge-to-disclosure-indicator-space: design-token("field-edge-to-disclosure-icon-75"); + --spectrum-accordion-content-padding-inline: design-token("accordion-content-area-edge-to-content-small"); + --spectrum-accordion-edge-to-content-area: design-token("accordion-edge-to-content-area-small"); + --spectrum-accordion-corner-radius: design-token("corner-radius-medium-size-small"); + --spectrum-accordion-item-header-font-size: design-token("font-size-100"); + --spectrum-accordion-item-content-font-size: design-token("body-size-xs"); + --spectrum-accordion-item-header-top-to-text-space: design-token("accordion-top-to-text-small"); + --spectrum-accordion-item-header-bottom-to-text-space: design-token("accordion-bottom-to-text-small"); + --spectrum-accordion-top-to-disclosure-indicator: design-token("field-top-to-disclosure-icon-small"); } .spectrum-Accordion--sizeL { - --spectrum-accordion-item-minimum-height: var(--spectrum-component-height-200); - --spectrum-accordion-item-width: var(--spectrum-field-default-width-large); - --spectrum-accordion-disclosure-indicator-height: var(--spectrum-chevron-icon-size-200); - --spectrum-accordion-disclosure-indicator-to-text-space: var(--spectrum-accordion-disclosure-indicator-to-text-large); - --spectrum-accordion-edge-to-disclosure-indicator-space: var(--spectrum-field-edge-to-disclosure-icon-200); - --spectrum-accordion-content-padding-inline: var(--spectrum-accordion-content-area-edge-to-content-large); - --spectrum-accordion-edge-to-content-area: var(--spectrum-accordion-edge-to-content-area-large); - --spectrum-accordion-corner-radius: var(--spectrum-corner-radius-medium-size-large); - --spectrum-accordion-item-header-font-size: var(--spectrum-font-size-300); - --spectrum-accordion-item-content-font-size: var(--spectrum-body-size-m); - --spectrum-accordion-item-header-top-to-text-space: var(--spectrum-accordion-top-to-text-large); - --spectrum-accordion-item-header-bottom-to-text-space: var(--spectrum-accordion-bottom-to-text-large); - --spectrum-accordion-top-to-disclosure-indicator: var(--spectrum-field-top-to-disclosure-icon-large); + --spectrum-accordion-item-minimum-height: design-token("component-height-200"); + --spectrum-accordion-item-width: design-token("field-default-width-large"); + --spectrum-accordion-disclosure-indicator-height: design-token("chevron-icon-size-200"); + --spectrum-accordion-disclosure-indicator-to-text-space: design-token("accordion-disclosure-indicator-to-text-large"); + --spectrum-accordion-edge-to-disclosure-indicator-space: design-token("field-edge-to-disclosure-icon-200"); + --spectrum-accordion-content-padding-inline: design-token("accordion-content-area-edge-to-content-large"); + --spectrum-accordion-edge-to-content-area: design-token("accordion-edge-to-content-area-large"); + --spectrum-accordion-corner-radius: design-token("corner-radius-medium-size-large"); + --spectrum-accordion-item-header-font-size: design-token("font-size-300"); + --spectrum-accordion-item-content-font-size: design-token("body-size-m"); + --spectrum-accordion-item-header-top-to-text-space: design-token("accordion-top-to-text-large"); + --spectrum-accordion-item-header-bottom-to-text-space: design-token("accordion-bottom-to-text-large"); + --spectrum-accordion-top-to-disclosure-indicator: design-token("field-top-to-disclosure-icon-large"); } .spectrum-Accordion--sizeXL { - --spectrum-accordion-item-minimum-height: var(--spectrum-component-height-300); - --spectrum-accordion-item-width: var(--spectrum-field-default-width-extra-large); - --spectrum-accordion-disclosure-indicator-height: var(--spectrum-chevron-icon-size-300); - --spectrum-accordion-disclosure-indicator-to-text-space: var(--spectrum-accordion-disclosure-indicator-to-text-extra-large); - --spectrum-accordion-edge-to-disclosure-indicator-space: var(--spectrum-field-edge-to-disclosure-icon-300); - --spectrum-accordion-content-padding-inline: var(--spectrum-accordion-content-area-edge-to-content-extra-large); - --spectrum-accordion-edge-to-content-area: var(--spectrum-accordion-edge-to-content-area-extra-large); - --spectrum-accordion-corner-radius: var(--spectrum-corner-radius-medium-size-extra-large); - --spectrum-accordion-item-header-font-size: var(--spectrum-font-size-400); - --spectrum-accordion-item-content-font-size: var(--spectrum-body-size-l); - --spectrum-accordion-item-header-top-to-text-space: var(--spectrum-accordion-top-to-text-extra-large); - --spectrum-accordion-item-header-bottom-to-text-space: var(--spectrum-accordion-bottom-to-text-extra-large); - --spectrum-accordion-top-to-disclosure-indicator: var(--spectrum-field-top-to-disclosure-icon-extra-large); + --spectrum-accordion-item-minimum-height: design-token("component-height-300"); + --spectrum-accordion-item-width: design-token("field-default-width-extra-large"); + --spectrum-accordion-disclosure-indicator-height: design-token("chevron-icon-size-300"); + --spectrum-accordion-disclosure-indicator-to-text-space: design-token("accordion-disclosure-indicator-to-text-extra-large"); + --spectrum-accordion-edge-to-disclosure-indicator-space: design-token("field-edge-to-disclosure-icon-300"); + --spectrum-accordion-content-padding-inline: design-token("accordion-content-area-edge-to-content-extra-large"); + --spectrum-accordion-edge-to-content-area: design-token("accordion-edge-to-content-area-extra-large"); + --spectrum-accordion-corner-radius: design-token("corner-radius-medium-size-extra-large"); + --spectrum-accordion-item-header-font-size: design-token("font-size-400"); + --spectrum-accordion-item-content-font-size: design-token("body-size-l"); + --spectrum-accordion-item-header-top-to-text-space: design-token("accordion-top-to-text-extra-large"); + --spectrum-accordion-item-header-bottom-to-text-space: design-token("accordion-bottom-to-text-extra-large"); + --spectrum-accordion-top-to-disclosure-indicator: design-token("field-top-to-disclosure-icon-extra-large"); } .spectrum-Accordion--compact { - --spectrum-accordion-item-minimum-height: var(--spectrum-component-height-75); - --spectrum-accordion-item-header-top-to-text-space: var(--spectrum-accordion-top-to-text-compact-medium); - --spectrum-accordion-item-header-bottom-to-text-space: var(--spectrum-accordion-bottom-to-text-compact-medium); - --spectrum-accordion-top-to-disclosure-indicator: var(--spectrum-field-top-to-disclosure-icon-compact-medium); + --spectrum-accordion-item-minimum-height: design-token("component-height-75"); + --spectrum-accordion-item-header-top-to-text-space: design-token("accordion-top-to-text-compact-medium"); + --spectrum-accordion-item-header-bottom-to-text-space: design-token("accordion-bottom-to-text-compact-medium"); + --spectrum-accordion-top-to-disclosure-indicator: design-token("field-top-to-disclosure-icon-compact-medium"); &.spectrum-Accordion--sizeS { - --spectrum-accordion-item-minimum-height: var(--spectrum-component-height-50); - --spectrum-accordion-item-header-top-to-text-space: var(--spectrum-accordion-top-to-text-compact-small); - --spectrum-accordion-item-header-bottom-to-text-space: var(--spectrum-accordion-bottom-to-text-compact-small); - --spectrum-accordion-top-to-disclosure-indicator: var(--spectrum-field-top-to-disclosure-icon-compact-small); + --spectrum-accordion-item-minimum-height: design-token("component-height-50"); + --spectrum-accordion-item-header-top-to-text-space: design-token("accordion-top-to-text-compact-small"); + --spectrum-accordion-item-header-bottom-to-text-space: design-token("accordion-bottom-to-text-compact-small"); + --spectrum-accordion-top-to-disclosure-indicator: design-token("field-top-to-disclosure-icon-compact-small"); } &.spectrum-Accordion--sizeL { - --spectrum-accordion-item-minimum-height: var(--spectrum-component-height-100); - --spectrum-accordion-item-header-top-to-text-space: var(--spectrum-accordion-top-to-text-compact-large); - --spectrum-accordion-item-header-bottom-to-text-space: var(--spectrum-accordion-bottom-to-text-compact-large); - --spectrum-accordion-top-to-disclosure-indicator: var(--spectrum-field-top-to-disclosure-icon-compact-large); + --spectrum-accordion-item-minimum-height: design-token("component-height-100"); + --spectrum-accordion-item-header-top-to-text-space: design-token("accordion-top-to-text-compact-large"); + --spectrum-accordion-item-header-bottom-to-text-space: design-token("accordion-bottom-to-text-compact-large"); + --spectrum-accordion-top-to-disclosure-indicator: design-token("field-top-to-disclosure-icon-compact-large"); } &.spectrum-Accordion--sizeXL { - --spectrum-accordion-item-minimum-height: var(--spectrum-component-height-200); - --spectrum-accordion-item-header-top-to-text-space: var(--spectrum-accordion-top-to-text-compact-extra-large); - --spectrum-accordion-item-header-bottom-to-text-space: var(--spectrum-accordion-bottom-to-text-compact-extra-large); - --spectrum-accordion-top-to-disclosure-indicator: var(--spectrum-field-top-to-disclosure-icon-compact-extra-large); + --spectrum-accordion-item-minimum-height: design-token("component-height-200"); + --spectrum-accordion-item-header-top-to-text-space: design-token("accordion-top-to-text-compact-extra-large"); + --spectrum-accordion-item-header-bottom-to-text-space: design-token("accordion-bottom-to-text-compact-extra-large"); + --spectrum-accordion-top-to-disclosure-indicator: design-token("field-top-to-disclosure-icon-compact-extra-large"); } } .spectrum-Accordion--spacious { - --spectrum-accordion-item-minimum-height: var(--spectrum-component-height-200); - --spectrum-accordion-item-header-top-to-text-space: var(--spectrum-accordion-top-to-text-spacious-medium); - --spectrum-accordion-item-header-bottom-to-text-space: var(--spectrum-accordion-bottom-to-text-spacious-medium); - --spectrum-accordion-top-to-disclosure-indicator: var(--spectrum-field-top-to-disclosure-icon-spacious-medium); + --spectrum-accordion-item-minimum-height: design-token("component-height-200"); + --spectrum-accordion-item-header-top-to-text-space: design-token("accordion-top-to-text-spacious-medium"); + --spectrum-accordion-item-header-bottom-to-text-space: design-token("accordion-bottom-to-text-spacious-medium"); + --spectrum-accordion-top-to-disclosure-indicator: design-token("field-top-to-disclosure-icon-spacious-medium"); &.spectrum-Accordion--sizeS { - --spectrum-accordion-item-minimum-height: var(--spectrum-component-height-100); - --spectrum-accordion-item-header-top-to-text-space: var(--spectrum-accordion-top-to-text-spacious-small); - --spectrum-accordion-item-header-bottom-to-text-space: var(--spectrum-accordion-bottom-to-text-spacious-small); - --spectrum-accordion-top-to-disclosure-indicator: var(--spectrum-field-top-to-disclosure-icon-spacious-small); + --spectrum-accordion-item-minimum-height: design-token("component-height-100"); + --spectrum-accordion-item-header-top-to-text-space: design-token("accordion-top-to-text-spacious-small"); + --spectrum-accordion-item-header-bottom-to-text-space: design-token("accordion-bottom-to-text-spacious-small"); + --spectrum-accordion-top-to-disclosure-indicator: design-token("field-top-to-disclosure-icon-spacious-small"); } &.spectrum-Accordion--sizeL { - --spectrum-accordion-item-minimum-height: var(--spectrum-component-height-300); - --spectrum-accordion-item-header-top-to-text-space: var(--spectrum-accordion-top-to-text-spacious-large); - --spectrum-accordion-item-header-bottom-to-text-space: var(--spectrum-accordion-bottom-to-text-spacious-large); - --spectrum-accordion-top-to-disclosure-indicator: var(--spectrum-field-top-to-disclosure-icon-spacious-large); + --spectrum-accordion-item-minimum-height: design-token("component-height-300"); + --spectrum-accordion-item-header-top-to-text-space: design-token("accordion-top-to-text-spacious-large"); + --spectrum-accordion-item-header-bottom-to-text-space: design-token("accordion-bottom-to-text-spacious-large"); + --spectrum-accordion-top-to-disclosure-indicator: design-token("field-top-to-disclosure-icon-spacious-large"); } &.spectrum-Accordion--sizeXL { - --spectrum-accordion-item-minimum-height: var(--spectrum-component-height-400); - --spectrum-accordion-item-header-top-to-text-space: var(--spectrum-accordion-top-to-text-spacious-extra-large); - --spectrum-accordion-item-header-bottom-to-text-space: var(--spectrum-accordion-bottom-to-text-spacious-extra-large); - --spectrum-accordion-top-to-disclosure-indicator: var(--spectrum-field-top-to-disclosure-icon-spacious-extra-large); + --spectrum-accordion-item-minimum-height: design-token("component-height-400"); + --spectrum-accordion-item-header-top-to-text-space: design-token("accordion-top-to-text-spacious-extra-large"); + --spectrum-accordion-item-header-bottom-to-text-space: design-token("accordion-bottom-to-text-spacious-extra-large"); + --spectrum-accordion-top-to-disclosure-indicator: design-token("field-top-to-disclosure-icon-spacious-extra-large"); } } @@ -200,11 +145,11 @@ --spectrum-accordion-background-color-hover: transparent; --spectrum-accordion-background-color-down: transparent; --spectrum-accordion-background-color-key-focus: transparent; - --spectrum-accordion-item-content-color: var(--mod-accordion-item-content-disabled-color, var(--spectrum-disabled-content-color)); - --spectrum-accordion-item-header-color-default: var(--mod-accordion-item-header-disabled-color, var(--spectrum-disabled-content-color)); - --spectrum-accordion-item-header-color-hover: var(--mod-accordion-item-header-disabled-color, var(--spectrum-disabled-content-color)); - --spectrum-accordion-item-header-color-down: var(--mod-accordion-item-header-disabled-color, var(--spectrum-disabled-content-color)); - --spectrum-accordion-item-header-color-key-focus: var(--mod-accordion-item-header-disabled-color, var(--spectrum-disabled-content-color)); + --spectrum-accordion-item-content-color: design-token("disabled-content-color"); + --spectrum-accordion-item-header-color-default: design-token("disabled-content-color"); + --spectrum-accordion-item-header-color-hover: design-token("disabled-content-color"); + --spectrum-accordion-item-header-color-down: design-token("disabled-content-color"); + --spectrum-accordion-item-header-color-key-focus: design-token("disabled-content-color"); } .spectrum-Accordion.spectrum-Accordion--noInlinePadding { @@ -223,13 +168,13 @@ z-index: inherit; position: relative; margin: 0; - min-block-size: var(--mod-accordion-item-min-block-size, var(--spectrum-accordion-item-min-block-size)); - min-inline-size: var(--mod-accordion-item-minimum-width, var(--spectrum-accordion-item-minimum-width)); - inline-size: var(--mod-accordion-item-width, var(--spectrum-accordion-item-width)); - border-block-end: var(--mod-accordion-divider-thickness, var(--spectrum-accordion-divider-thickness)) solid var(--spectrum-accordion-divider-color); + min-block-size: design-token("accordion-item-min-block-size"); + min-inline-size: design-token("accordion-item-minimum-width"); + inline-size: design-token("accordion-item-width"); + border-block-end: design-token("accordion-divider-thickness") solid design-token("accordion-divider-color"); &:first-child { - border-block-start: var(--mod-accordion-divider-thickness, var(--spectrum-accordion-divider-thickness)) solid var(--spectrum-accordion-divider-color); + border-block-start: design-token("accordion-divider-thickness") solid design-token("accordion-divider-color"); } } @@ -240,30 +185,30 @@ } .spectrum-Accordion-itemIndicator { - inline-size: var(--mod-accordion-disclosure-indicator-height, var(--spectrum-accordion-disclosure-indicator-height)); - block-size: var(--mod-accordion-disclosure-indicator-height, var(--spectrum-accordion-disclosure-indicator-height)); - transform: var(--spectrum-logical-rotation); - transition: transform ease var(--mod-accordion-animation-duration, var(--spectrum-accordion-animation-duration)); + inline-size: design-token("accordion-disclosure-indicator-height"); + block-size: design-token("accordion-disclosure-indicator-height"); + transform: design-token("logical-rotation"); + transition: transform ease design-token("accordion-animation-duration"); flex-shrink: 0; - margin-block-start: var(--mod-accordion-top-to-disclosure-indicator, var(--spectrum-accordion-top-to-disclosure-indicator)); - margin-inline: var(--mod-accordion-edge-to-disclosure-indicator-space, var(--spectrum-accordion-edge-to-disclosure-indicator-space)) var(--mod-accordion-disclosure-indicator-to-text-space, var(--spectrum-accordion-disclosure-indicator-to-text-space)); + margin-block-start: design-token("accordion-top-to-disclosure-indicator"); + margin-inline: design-token("accordion-edge-to-disclosure-indicator-space") design-token("accordion-disclosure-indicator-to-text-space"); } .spectrum-Accordion-itemContent { display: none; - padding-block: var(--mod-accordion-item-content-area-top-to-content, var(--spectrum-accordion-item-content-area-top-to-content)) var(--mod-accordion-item-content-area-bottom-to-content, var(--spectrum-accordion-item-content-area-bottom-to-content)); - padding-inline: var(--mod-accordion-content-padding-inline, var(--spectrum-accordion-content-padding-inline)); - color: var(--spectrum-accordion-item-content-color); - font-weight: var(--mod-accordion-item-content-font-weight, var(--spectrum-accordion-item-content-font-weight)); - font-style: var(--mod-accordion-item-content-font-style, var(--spectrum-accordion-item-content-font-style)); - font-size: var(--mod-accordion-item-content-font-size, var(--spectrum-accordion-item-content-font-size)); - font-family: var(--mod-accordion-item-content-font, var(--spectrum-accordion-item-content-font)); - line-height: var(--mod-accordion-item-content-line-height, var(--spectrum-accordion-item-content-line-height)); + padding-block: design-token("accordion-item-content-area-top-to-content") design-token("accordion-item-content-area-bottom-to-content"); + padding-inline: design-token("accordion-content-padding-inline"); + color: design-token("accordion-item-content-color"); + font-weight: design-token("accordion-item-content-font-weight"); + font-style: design-token("accordion-item-content-font-style"); + font-size: design-token("accordion-item-content-font-size"); + font-family: design-token("accordion-item-content-font"); + line-height: design-token("accordion-item-content-line-height"); } .spectrum-Accordion-itemTitle { - padding-block: var(--mod-accordion-item-header-top-to-text-space, var(--spectrum-accordion-item-header-top-to-text-space)) var(--mod-accordion-item-header-bottom-to-text-space, var(--spectrum-accordion-item-header-bottom-to-text-space)); - padding-inline-end: var(--mod-accordion-edge-to-text-space, var(--spectrum-accordion-edge-to-text-space)); + padding-block: design-token("accordion-item-header-top-to-text-space") design-token("accordion-item-header-bottom-to-text-space"); + padding-inline-end: design-token("accordion-edge-to-text-space"); } /* Focusable button that expands/collapses the accordion item. */ @@ -276,15 +221,15 @@ justify-content: flex-start; /* start spacing controlled by edge to disclosure icon spacing */ - padding-inline: 0 var(--mod-accordion-edge-to-content-area, var(--spectrum-accordion-edge-to-content-area)); - line-height: var(--mod-accordion-item-header-line-height, var(--spectrum-accordion-item-header-line-height)); + padding-inline: 0 design-token("accordion-edge-to-content-area"); + line-height: design-token("accordion-item-header-line-height"); text-overflow: ellipsis; - cursor: var(--spectrum-accordion-item-header-cursor); - font-size: var(--mod-accordion-item-header-font-size, var(--spectrum-accordion-item-header-font-size)); - font-weight: var(--mod-accordion-item-header-font-weight, var(--spectrum-accordion-item-header-font-weight)); - font-style: var(--mod-accordion-item-header-font-style, var(--spectrum-accordion-item-header-font-style)); - font-family: var(--mod-accordion-item-header-font, var(--spectrum-accordion-item-header-font)); + cursor: design-token("accordion-item-header-cursor"); + font-size: design-token("accordion-item-header-font-size"); + font-weight: design-token("accordion-item-header-font-weight"); + font-style: design-token("accordion-item-header-font-style"); + font-family: design-token("accordion-item-header-font"); /* Reset styling of button element */ appearance: none; @@ -292,26 +237,26 @@ text-align: start; inline-size: 100%; - color: var(--spectrum-accordion-item-header-color-default); - background-color: var(--spectrum-accordion-background-color-default); + color: design-token("accordion-item-header-color-default"); + background-color: design-token("accordion-background-color-default"); &:hover { - color: var(--spectrum-accordion-item-header-color-hover); - background-color: var(--spectrum-accordion-background-color-hover); + color: design-token("accordion-item-header-color-hover"); + background-color: design-token("accordion-background-color-hover"); } &:focus-visible { - border-radius: var(--mod-accordion-corner-radius, var(--spectrum-accordion-corner-radius)); - background-color: var(--spectrum-accordion-background-color-key-focus); - color: var(--spectrum-accordion-item-header-color-key-focus); - outline: var(--mod-accordion-item-focus-indicator-thickness, var(--spectrum-accordion-item-focus-indicator-thickness)) solid var(--spectrum-accordion-item-focus-indicator-color); - outline-offset: var(--mod-accordion-item-focus-indicator-gap, var(--spectrum-accordion-item-focus-indicator-gap)); + border-radius: design-token("accordion-corner-radius"); + background-color: design-token("accordion-background-color-key-focus"); + color: design-token("accordion-item-header-color-key-focus"); + outline: design-token("accordion-item-focus-indicator-thickness") solid design-token("accordion-item-focus-indicator-color"); + outline-offset: design-token("accordion-item-focus-indicator-gap"); } /* higher specificity to maintain active styles over @media hover styles */ &.spectrum-Accordion-itemHeader:active { - background-color: var(--spectrum-accordion-background-color-down); - color: var(--spectrum-accordion-item-header-color-down); + background-color: design-token("accordion-background-color-down"); + color: design-token("accordion-item-header-color-down"); } } @@ -328,12 +273,12 @@ .spectrum-Accordion--quiet .spectrum-Accordion-itemHeader { &:hover, &:active { - border-radius: var(--mod-accordion-corner-radius, var(--spectrum-accordion-corner-radius)); + border-radius: design-token("accordion-corner-radius"); } } @media (forced-colors: active) { .spectrum-Accordion { - --spectrum-accordion-item-focus-indicator-color: Highlight; + --spectrum-accordion-item-focus-indicator-color: design-token("accordion-item-focus-indicator-color.sets.whcm"); } } diff --git a/components/accordion/stories/template.js b/components/accordion/stories/template.js index 11930316425..817e2a70f41 100644 --- a/components/accordion/stories/template.js +++ b/components/accordion/stories/template.js @@ -6,7 +6,7 @@ import { ifDefined } from "lit/directives/if-defined.js"; import { repeat } from "lit/directives/repeat.js"; import { styleMap } from "lit/directives/style-map.js"; -import "../index.css"; +import "@spectrum-css/accordion/index.css"; export const AccordionItem = ({ heading, diff --git a/components/accordion/tokens.json b/components/accordion/tokens.json new file mode 100644 index 00000000000..678bc1ee1c5 --- /dev/null +++ b/components/accordion/tokens.json @@ -0,0 +1,388 @@ +{ + "accordion-divider-color": { + "component": "accordion", + "$schema": "https://opensource.adobe.com/spectrum-tokens/schemas/token-types/alias.json", + "value": "{gray-200}", + "modifier": true + }, + "accordion-item-content-disabled-color": { + "component": "accordion", + "$schema": "https://opensource.adobe.com/spectrum-tokens/schemas/token-types/alias.json", + "value": "{disabled-content-color}", + "modifier": true + }, + "accordion-item-content-color": { + "component": "accordion", + "$schema": "https://opensource.adobe.com/spectrum-tokens/schemas/token-types/alias.json", + "value": "{body-color}", + "modifier": true + }, + "accordion-item-height": { + "component": "accordion", + "$schema": "https://opensource.adobe.com/spectrum-tokens/schemas/token-types/alias.json", + "value": "{component-height-200}", + "modifier": true, + "sets": { + "size-s": { + "$schema": "https://opensource.adobe.com/spectrum-tokens/schemas/token-types/alias.json", + "value": "{component-height-100}" + }, + "size-l": { + "$schema": "https://opensource.adobe.com/spectrum-tokens/schemas/token-types/alias.json", + "value": "{component-height-300}" + }, + "size-xl": { + "$schema": "https://opensource.adobe.com/spectrum-tokens/schemas/token-types/alias.json", + "value": "{component-height-400}" + }, + "compact": { + "$schema": "https://opensource.adobe.com/spectrum-tokens/schemas/token-types/alias.json", + "value": "{component-height-100}", + "sets": { + "size-s": { + "$schema": "https://opensource.adobe.com/spectrum-tokens/schemas/token-types/alias.json", + "value": "{component-height-75}" + }, + "size-l": { + "$schema": "https://opensource.adobe.com/spectrum-tokens/schemas/token-types/alias.json", + "value": "{component-height-200}" + }, + "size-xl": { + "$schema": "https://opensource.adobe.com/spectrum-tokens/schemas/token-types/alias.json", + "value": "{component-height-300}" + } + } + } + } + }, + "accordion-disclosure-indicator-height": { + "component": "accordion", + "$schema": "https://opensource.adobe.com/spectrum-tokens/schemas/token-types/alias.json", + "value": "{component-height-100}", + "modifier": false, + "sets": { + "size-s": { + "$schema": "https://opensource.adobe.com/spectrum-tokens/schemas/token-types/alias.json", + "value": "{component-height-75}" + }, + "size-l": { + "$schema": "https://opensource.adobe.com/spectrum-tokens/schemas/token-types/alias.json", + "value": "{component-height-200}" + }, + "size-xl": { + "$schema": "https://opensource.adobe.com/spectrum-tokens/schemas/token-types/alias.json", + "value": "{component-height-300}" + } + } + }, + "accordion-item-header-top-to-text": { + "component": "accordion", + "$schema": "https://opensource.adobe.com/spectrum-tokens/schemas/token-types/alias.json", + "value": "{accordion-top-to-text-regular-medium}", + "modifier": true, + "sets": { + "size-s": { + "$schema": "https://opensource.adobe.com/spectrum-tokens/schemas/token-types/alias.json", + "value": "{accordion-top-to-text-regular-small}" + }, + "size-l": { + "$schema": "https://opensource.adobe.com/spectrum-tokens/schemas/token-types/alias.json", + "value": "{accordion-top-to-text-regular-large}" + }, + "size-xl": { + "$schema": "https://opensource.adobe.com/spectrum-tokens/schemas/token-types/alias.json", + "value": "{accordion-top-to-text-regular-extra-large}" + }, + "compact": { + "$schema": "https://opensource.adobe.com/spectrum-tokens/schemas/token-types/alias.json", + "value": "{accordion-top-to-text-compact-medium}", + "sets": { + "size-s": { + "$schema": "https://opensource.adobe.com/spectrum-tokens/schemas/token-types/alias.json", + "value": "{accordion-top-to-text-compact-small}" + }, + "size-l": { + "$schema": "https://opensource.adobe.com/spectrum-tokens/schemas/token-types/alias.json", + "value": "{accordion-top-to-text-compact-large}" + }, + "size-xl": { + "$schema": "https://opensource.adobe.com/spectrum-tokens/schemas/token-types/alias.json", + "value": "{accordion-top-to-text-compact-extra-large}" + } + } + }, + "spacious": { + "$schema": "https://opensource.adobe.com/spectrum-tokens/schemas/token-types/alias.json", + "value": "{accordion-top-to-text-spacious-medium}", + "sets": { + "size-s": { + "$schema": "https://opensource.adobe.com/spectrum-tokens/schemas/token-types/alias.json", + "value": "{accordion-top-to-text-spacious-small}" + }, + "size-l": { + "$schema": "https://opensource.adobe.com/spectrum-tokens/schemas/token-types/alias.json", + "value": "{accordion-top-to-text-spacious-large}" + }, + "size-xl": { + "$schema": "https://opensource.adobe.com/spectrum-tokens/schemas/token-types/alias.json", + "value": "{accordion-top-to-text-spacious-extra-large}" + } + } + } + } + }, + "accordion-item-header-bottom-to-text": { + "component": "accordion", + "$schema": "https://opensource.adobe.com/spectrum-tokens/schemas/token-types/alias.json", + "value": "{accordion-bottom-to-text-regular-medium}", + "modifier": false, + "sets": { + "size-s": { + "$schema": "https://opensource.adobe.com/spectrum-tokens/schemas/token-types/alias.json", + "value": "{accordion-bottom-to-text-regular-small}" + }, + "size-l": { + "$schema": "https://opensource.adobe.com/spectrum-tokens/schemas/token-types/alias.json", + "value": "{accordion-bottom-to-text-regular-large}" + }, + "size-xl": { + "$schema": "https://opensource.adobe.com/spectrum-tokens/schemas/token-types/alias.json", + "value": "{accordion-bottom-to-text-regular-extra-large}" + }, + "compact": { + "$schema": "https://opensource.adobe.com/spectrum-tokens/schemas/token-types/alias.json", + "value": "{accordion-bottom-to-text-compact-medium}", + "sets": { + "size-s": { + "$schema": "https://opensource.adobe.com/spectrum-tokens/schemas/token-types/alias.json", + "value": "{accordion-bottom-to-text-compact-small}" + }, + "size-l": { + "$schema": "https://opensource.adobe.com/spectrum-tokens/schemas/token-types/alias.json", + "value": "{accordion-bottom-to-text-compact-large}" + }, + "size-xl": { + "$schema": "https://opensource.adobe.com/spectrum-tokens/schemas/token-types/alias.json", + "value": "{accordion-bottom-to-text-compact-extra-large}" + } + } + }, + "spacious": { + "$schema": "https://opensource.adobe.com/spectrum-tokens/schemas/token-types/alias.json", + "value": "{accordion-bottom-to-text-spacious-medium}", + "sets": { + "size-s": { + "$schema": "https://opensource.adobe.com/spectrum-tokens/schemas/token-types/alias.json", + "value": "{accordion-bottom-to-text-spacious-small}" + }, + "size-l": { + "$schema": "https://opensource.adobe.com/spectrum-tokens/schemas/token-types/alias.json", + "value": "{accordion-bottom-to-text-spacious-large}" + }, + "size-xl": { + "$schema": "https://opensource.adobe.com/spectrum-tokens/schemas/token-types/alias.json", + "value": "{accordion-bottom-to-text-spacious-extra-large}" + } + } + } + } + }, + "accordion-focus-indicator-gap": { + "component": "accordion", + "$schema": "https://opensource.adobe.com/spectrum-tokens/schemas/token-types/alias.json", + "value": "{focus-indicator-gap}" + }, + "accordion-focus-indicator-thickness": { + "component": "accordion", + "$schema": "https://opensource.adobe.com/spectrum-tokens/schemas/token-types/alias.json", + "value": "{focus-indicator-thickness}" + }, + "accordion-corner-radius": { + "component": "accordion", + "$schema": "https://opensource.adobe.com/spectrum-tokens/schemas/token-types/alias.json", + "value": "{corner-radius-100}" + }, + "accordion-item-content-area-top-to-content": { + "component": "accordion", + "$schema": "https://opensource.adobe.com/spectrum-tokens/schemas/token-types/alias.json", + "value": "{accordion-content-area-top-to-content}" + }, + "accordion-item-content-area-bottom-to-content": { + "component": "accordion", + "$schema": "https://opensource.adobe.com/spectrum-tokens/schemas/token-types/alias.json", + "value": "{accordion-content-area-bottom-to-content}" + }, + "accordion-component-edge-to-text": { + "component": "accordion", + "$schema": "https://opensource.adobe.com/spectrum-tokens/schemas/token-types/alias.json", + "value": "{component-edge-to-text-75}" + }, + "accordion-item-header-font": { + "component": "accordion", + "$schema": "https://opensource.adobe.com/spectrum-tokens/schemas/token-types/alias.json", + "value": "{sans-font-family-stack}" + }, + "accordion-item-header-font-weight": { + "component": "accordion", + "$schema": "https://opensource.adobe.com/spectrum-tokens/schemas/token-types/alias.json", + "value": "{bold-font-weight}" + }, + "accordion-item-header-font-style": { + "component": "accordion", + "$schema": "https://opensource.adobe.com/spectrum-tokens/schemas/token-types/alias.json", + "value": "{default-font-style}" + }, + "accordion-item-header-font-size": { + "component": "accordion", + "$schema": "https://opensource.adobe.com/spectrum-tokens/schemas/token-types/alias.json", + "value": "{font-size-300}", + "modifier": true, + "sets": { + "size-s": { + "$schema": "https://opensource.adobe.com/spectrum-tokens/schemas/token-types/alias.json", + "value": "{font-size-200}" + }, + "size-l": { + "$schema": "https://opensource.adobe.com/spectrum-tokens/schemas/token-types/alias.json", + "value": "{font-size-500}" + }, + "size-xl": { + "$schema": "https://opensource.adobe.com/spectrum-tokens/schemas/token-types/alias.json", + "value": "{font-size-700}" + } + } + }, + "accordion-item-header-line-height": { + "component": "accordion", + "$schema": "https://opensource.adobe.com/spectrum-tokens/schemas/token-types/dimension.json", + "value": "1.25", + "modifier": false, + "sets": { + "lang-ja": { + "$schema": "https://opensource.adobe.com/spectrum-tokens/schemas/token-types/alias.json", + "value": "{cjk-line-height-100}" + }, + "lang-zh": { + "$schema": "https://opensource.adobe.com/spectrum-tokens/schemas/token-types/alias.json", + "value": "{cjk-line-height-100}" + }, + "lang-ko": { + "$schema": "https://opensource.adobe.com/spectrum-tokens/schemas/token-types/alias.json", + "value": "{cjk-line-height-100}" + }, + "spacious": { + "$schema": "https://opensource.adobe.com/spectrum-tokens/schemas/token-types/dimension.json", + "value": "1.278", + "sets": { + "size-s": { + "$schema": "https://opensource.adobe.com/spectrum-tokens/schemas/token-types/dimension.json", + "value": "1.25" + }, + "size-l": { + "$schema": "https://opensource.adobe.com/spectrum-tokens/schemas/token-types/dimension.json", + "value": "1.273" + }, + "size-xl": { + "$schema": "https://opensource.adobe.com/spectrum-tokens/schemas/token-types/dimension.json", + "value": "1.25" + } + } + } + } + }, + "accordion-item-content-font": { + "component": "accordion", + "$schema": "https://opensource.adobe.com/spectrum-tokens/schemas/token-types/alias.json", + "value": "{sans-font-family-stack}" + }, + "accordion-item-content-font-weight": { + "component": "accordion", + "$schema": "https://opensource.adobe.com/spectrum-tokens/schemas/token-types/alias.json", + "value": "{body-sans-serif-font-weight}" + }, + "accordion-item-content-font-style": { + "component": "accordion", + "$schema": "https://opensource.adobe.com/spectrum-tokens/schemas/token-types/alias.json", + "value": "{body-sans-serif-font-style}" + }, + "accordion-item-content-font-size": { + "component": "accordion", + "$schema": "https://opensource.adobe.com/spectrum-tokens/schemas/token-types/alias.json", + "value": "{body-size-s}", + "modifier": true, + "sets": { + "size-s": { + "$schema": "https://opensource.adobe.com/spectrum-tokens/schemas/token-types/alias.json", + "value": "{body-size-xs}" + }, + "size-l": { + "$schema": "https://opensource.adobe.com/spectrum-tokens/schemas/token-types/alias.json", + "value": "{body-size-m}" + }, + "size-xl": { + "$schema": "https://opensource.adobe.com/spectrum-tokens/schemas/token-types/alias.json", + "value": "{body-size-l}" + } + } + }, + "accordion-item-content-line-height": { + "component": "accordion", + "$schema": "https://opensource.adobe.com/spectrum-tokens/schemas/token-types/alias.json", + "value": "{line-height-100}" + }, + "accordion-background-color-default": { + "component": "accordion", + "$schema": "https://opensource.adobe.com/spectrum-tokens/schemas/token-types/alias.json", + "value": "color-mix(in sRGB, {gray-900} {background-opacity-default}, transparent)" + }, + "accordion-background-color-hover": { + "component": "accordion", + "$schema": "https://opensource.adobe.com/spectrum-tokens/schemas/token-types/alias.json", + "value": "color-mix(in sRGB, {gray-900} {background-opacity-hover}, transparent)" + }, + "accordion-background-color-down": { + "component": "accordion", + "$schema": "https://opensource.adobe.com/spectrum-tokens/schemas/token-types/alias.json", + "value": "color-mix(in sRGB, {gray-900} {background-opacity-down}, transparent)" + }, + "accordion-background-color-key-focus": { + "component": "accordion", + "$schema": "https://opensource.adobe.com/spectrum-tokens/schemas/token-types/alias.json", + "value": "color-mix(in sRGB, {gray-900} {background-opacity-key-focus}, transparent)" + }, + "accordion-item-header-color-default": { + "component": "accordion", + "$schema": "https://opensource.adobe.com/spectrum-tokens/schemas/token-types/alias.json", + "value": "{neutral-content-color-default}" + }, + "accordion-item-header-color-hover": { + "component": "accordion", + "$schema": "https://opensource.adobe.com/spectrum-tokens/schemas/token-types/alias.json", + "value": "{neutral-content-color-hover}" + }, + "accordion-item-header-color-down": { + "component": "accordion", + "$schema": "https://opensource.adobe.com/spectrum-tokens/schemas/token-types/alias.json", + "value": "{neutral-content-color-down}" + }, + "accordion-item-header-color-key-focus": { + "component": "accordion", + "$schema": "https://opensource.adobe.com/spectrum-tokens/schemas/token-types/alias.json", + "value": "{neutral-content-color-key-focus}" + }, + "accordion-item-header-disabled-color": { + "component": "accordion", + "$schema": "https://opensource.adobe.com/spectrum-tokens/schemas/token-types/alias.json", + "value": "{disabled-content-color}" + }, + "accordion-focus-indicator-color": { + "component": "accordion", + "$schema": "https://opensource.adobe.com/spectrum-tokens/schemas/token-types/alias.json", + "value": "{focus-indicator-color}" + }, + "accordion-min-block-size": { + "component": "accordion", + "$schema": "https://opensource.adobe.com/spectrum-tokens/schemas/token-types/alias.json", + "value": "max({accordion-item-height}, calc({accordion-item-header-top-to-text} + {accordion-item-header-bottom-to-text} + ({accordion-item-header-font-size} * {accordion-item-header-line-height})))" + } +} diff --git a/components/actionbar/tokens.json b/components/actionbar/tokens.json new file mode 100644 index 00000000000..34352924e18 --- /dev/null +++ b/components/actionbar/tokens.json @@ -0,0 +1,98 @@ +{ + "actionbar-height": { + "component": "actionbar", + "$schema": "https://opensource.adobe.com/spectrum-tokens/schemas/token-types/alias.json", + "value": "{action-bar-height}" + }, + "actionbar-minimum-width": { + "component": "actionbar", + "$schema": "https://opensource.adobe.com/spectrum-tokens/schemas/token-types/alias.json", + "value": "{action-bar-minimum-width}" + }, + "actionbar-corner-radius": { + "component": "actionbar", + "$schema": "https://opensource.adobe.com/spectrum-tokens/schemas/token-types/alias.json", + "value": "{corner-radius-medium-size-extra-large}" + }, + "actionbar-spacing-label-to-action-group": { + "component": "actionbar", + "$schema": "https://opensource.adobe.com/spectrum-tokens/schemas/token-types/alias.json", + "value": "{action-bar-label-to-action-group-area}" + }, + "actionbar-spacing-padding-inline": { + "component": "actionbar", + "$schema": "https://opensource.adobe.com/spectrum-tokens/schemas/token-types/alias.json", + "value": "{action-bar-edge-to-content-area}" + }, + "actionbar-spacing-top-area": { + "component": "actionbar", + "$schema": "https://opensource.adobe.com/spectrum-tokens/schemas/token-types/alias.json", + "value": "{action-bar-top-to-content-area}" + }, + "actionbar-spacing-bottom-area": { + "component": "actionbar", + "$schema": "https://opensource.adobe.com/spectrum-tokens/schemas/token-types/alias.json", + "value": "{action-bar-bottom-to-content-area}" + }, + "actionbar-close-button-to-counter": { + "component": "actionbar", + "$schema": "https://opensource.adobe.com/spectrum-tokens/schemas/token-types/alias.json", + "value": "{action-bar-close-button-to-counter}" + }, + "actionbar-item-counter-line-height": { + "component": "actionbar", + "$schema": "https://opensource.adobe.com/spectrum-tokens/schemas/token-types/alias.json", + "value": "{line-height-100}" + }, + "actionbar-item-counter-color": { + "component": "actionbar", + "$schema": "https://opensource.adobe.com/spectrum-tokens/schemas/token-types/alias.json", + "value": "{neutral-content-color-default}" + }, + "actionbar-popover-background-color": { + "component": "actionbar", + "$schema": "https://opensource.adobe.com/spectrum-tokens/schemas/token-types/alias.json", + "value": "{background-elevated-color}" + }, + "actionbar-popover-border-color": { + "component": "actionbar", + "$schema": "https://opensource.adobe.com/spectrum-tokens/schemas/token-types/alias.json", + "value": "{action-bar-border-color}", + "sets": { + "whcm": { + "$schema": "https://opensource.adobe.com/spectrum-tokens/schemas/token-types/color.json", + "value": "CanvasText" + } + } + }, + "actionbar-spacing-outer-edge": { + "component": "actionbar", + "$schema": "https://opensource.adobe.com/spectrum-tokens/schemas/token-types/alias.json", + "value": "{spacing-300}" + }, + "actionbar-shadow-horizontal": { + "component": "actionbar", + "$schema": "https://opensource.adobe.com/spectrum-tokens/schemas/token-types/alias.json", + "value": "{drop-shadow-elevated-x}" + }, + "actionbar-shadow-vertical": { + "component": "actionbar", + "$schema": "https://opensource.adobe.com/spectrum-tokens/schemas/token-types/alias.json", + "value": "{drop-shadow-elevated-y}" + }, + "actionbar-shadow-blur": { + "component": "actionbar", + "$schema": "https://opensource.adobe.com/spectrum-tokens/schemas/token-types/alias.json", + "value": "{drop-shadow-elevated-blur}" + }, + "actionbar-shadow-color": { + "component": "actionbar", + "$schema": "https://opensource.adobe.com/spectrum-tokens/schemas/token-types/alias.json", + "value": "{drop-shadow-elevated-color}" + }, + "actionbar-item-counter-line-height-cjk": { + "component": "actionbar", + "$schema": "https://opensource.adobe.com/spectrum-tokens/schemas/token-types/alias.json", + "value": "{cjk-line-height-100}" + } +} diff --git a/components/actionbutton/tokens.json b/components/actionbutton/tokens.json new file mode 100644 index 00000000000..7cdd667e329 --- /dev/null +++ b/components/actionbutton/tokens.json @@ -0,0 +1,79 @@ +{ + "actionbutton-border-color": { + "component": "action-button", + "$schema": "https://opensource.adobe.com/spectrum-tokens/schemas/token-types/alias.json", + "value": "transparent", + "sets": { + "whcm": { + "$schema": "https://opensource.adobe.com/spectrum-tokens/schemas/token-types/color.json", + "value": "ButtonBorder" + } + } + }, + "actionbutton-background-color-default": { + "component": "action-button", + "$schema": "https://opensource.adobe.com/spectrum-tokens/schemas/token-types/alias.json", + "value": "transparent", + "sets": { + "whcm": { + "$schema": "https://opensource.adobe.com/spectrum-tokens/schemas/token-types/color.json", + "value": "ButtonFace" + } + } + }, + "actionbutton-content-color-default": { + "component": "action-button", + "$schema": "https://opensource.adobe.com/spectrum-tokens/schemas/token-types/alias.json", + "value": "{neutral-content-color-default}", + "sets": { + "whcm": { + "$schema": "https://opensource.adobe.com/spectrum-tokens/schemas/token-types/color.json", + "value": "ButtonText" + } + } + }, + "actionbutton-background-color-disabled": { + "component": "action-button", + "$schema": "https://opensource.adobe.com/spectrum-tokens/schemas/token-types/alias.json", + "value": "transparent", + "sets": { + "whcm": { + "$schema": "https://opensource.adobe.com/spectrum-tokens/schemas/token-types/color.json", + "value": "ButtonFace" + } + } + }, + "actionbutton-content-color-disabled": { + "component": "action-button", + "$schema": "https://opensource.adobe.com/spectrum-tokens/schemas/token-types/alias.json", + "value": "{disabled-content-color}", + "sets": { + "whcm": { + "$schema": "https://opensource.adobe.com/spectrum-tokens/schemas/token-types/color.json", + "value": "GrayText" + } + } + }, + "actionbutton-focus-indicator-color": { + "component": "action-button", + "$schema": "https://opensource.adobe.com/spectrum-tokens/schemas/token-types/alias.json", + "value": "{focus-indicator-color}", + "sets": { + "whcm": { + "$schema": "https://opensource.adobe.com/spectrum-tokens/schemas/token-types/color.json", + "value": "CanvasText" + } + } + }, + "actionbutton-animation-duration": { + "component": "action-button", + "$schema": "https://opensource.adobe.com/spectrum-tokens/schemas/token-types/alias.json", + "value": "{animation-duration-100}", + "sets": { + "whcm": { + "$schema": "https://opensource.adobe.com/spectrum-tokens/schemas/token-types/dimension.json", + "value": "0ms" + } + } + } +} diff --git a/components/actiongroup/tokens.json b/components/actiongroup/tokens.json new file mode 100644 index 00000000000..10e21c27c18 --- /dev/null +++ b/components/actiongroup/tokens.json @@ -0,0 +1,60 @@ +{ + "actiongroup-gap-size-compact": { + "component": "actiongroup", + "$schema": "https://opensource.adobe.com/spectrum-tokens/schemas/token-types/dimension.json", + "value": "0" + }, + "actiongroup-horizontal-spacing-compact": { + "component": "actiongroup", + "$schema": "https://opensource.adobe.com/spectrum-tokens/schemas/token-types/dimension.json", + "value": "-1px" + }, + "actiongroup-vertical-spacing-compact": { + "component": "actiongroup", + "$schema": "https://opensource.adobe.com/spectrum-tokens/schemas/token-types/dimension.json", + "value": "-1px" + }, + "actiongroup-button-spacing-reset": { + "component": "actiongroup", + "$schema": "https://opensource.adobe.com/spectrum-tokens/schemas/token-types/dimension.json", + "value": "0" + }, + "actiongroup-border-radius-reset": { + "component": "actiongroup", + "$schema": "https://opensource.adobe.com/spectrum-tokens/schemas/token-types/dimension.json", + "value": "0" + }, + "actiongroup-border-radius": { + "component": "actiongroup", + "$schema": "https://opensource.adobe.com/spectrum-tokens/schemas/token-types/alias.json", + "value": "{corner-radius-100}" + }, + "actiongroup-horizontal-spacing-regular": { + "component": "actiongroup", + "$schema": "https://opensource.adobe.com/spectrum-tokens/schemas/token-types/scale-set.json", + "sets": { + "small": { + "$schema": "https://opensource.adobe.com/spectrum-tokens/schemas/token-types/alias.json", + "value": "{spacing-75}" + }, + "medium": { + "$schema": "https://opensource.adobe.com/spectrum-tokens/schemas/token-types/alias.json", + "value": "{spacing-100}" + } + } + }, + "actiongroup-vertical-spacing-regular": { + "component": "actiongroup", + "$schema": "https://opensource.adobe.com/spectrum-tokens/schemas/token-types/scale-set.json", + "sets": { + "small": { + "$schema": "https://opensource.adobe.com/spectrum-tokens/schemas/token-types/alias.json", + "value": "{spacing-75}" + }, + "medium": { + "$schema": "https://opensource.adobe.com/spectrum-tokens/schemas/token-types/alias.json", + "value": "{spacing-100}" + } + } + } +} diff --git a/components/actionmenu/tokens.json b/components/actionmenu/tokens.json new file mode 100644 index 00000000000..0967ef424bc --- /dev/null +++ b/components/actionmenu/tokens.json @@ -0,0 +1 @@ +{} diff --git a/components/alertbanner/tokens.json b/components/alertbanner/tokens.json new file mode 100644 index 00000000000..10092ac368e --- /dev/null +++ b/components/alertbanner/tokens.json @@ -0,0 +1,181 @@ +{ + "alert-banner-close-button-spacing": { + "component": "alert-banner", + "$schema": "https://opensource.adobe.com/spectrum-tokens/schemas/token-types/scale-set.json", + "sets": { + "desktop": { + "$schema": "https://opensource.adobe.com/spectrum-tokens/schemas/token-types/alias.json", + "value": "{spacing-100}" + }, + "mobile": { + "$schema": "https://opensource.adobe.com/spectrum-tokens/schemas/token-types/alias.json", + "value": "{spacing-200}" + } + } + }, + "alert-banner-edge-to-button": { + "component": "alert-banner", + "$schema": "https://opensource.adobe.com/spectrum-tokens/schemas/token-types/scale-set.json", + "sets": { + "desktop": { + "$schema": "https://opensource.adobe.com/spectrum-tokens/schemas/token-types/alias.json", + "value": "{spacing-100}" + }, + "mobile": { + "$schema": "https://opensource.adobe.com/spectrum-tokens/schemas/token-types/alias.json", + "value": "{spacing-200}" + } + } + }, + "alert-banner-edge-to-divider": { + "component": "alert-banner", + "$schema": "https://opensource.adobe.com/spectrum-tokens/schemas/token-types/scale-set.json", + "sets": { + "desktop": { + "$schema": "https://opensource.adobe.com/spectrum-tokens/schemas/token-types/alias.json", + "value": "{spacing-100}" + }, + "mobile": { + "$schema": "https://opensource.adobe.com/spectrum-tokens/schemas/token-types/alias.json", + "value": "{spacing-200}" + } + } + }, + "alert-banner-text-to-button-vertical": { + "component": "alert-banner", + "$schema": "https://opensource.adobe.com/spectrum-tokens/schemas/token-types/scale-set.json", + "sets": { + "desktop": { + "$schema": "https://opensource.adobe.com/spectrum-tokens/schemas/token-types/alias.json", + "value": "{spacing-100}" + }, + "mobile": { + "$schema": "https://opensource.adobe.com/spectrum-tokens/schemas/token-types/alias.json", + "value": "{spacing-200}" + } + } + }, + "alert-banner-neutral-background": { + "component": "alertbanner", + "$schema": "https://opensource.adobe.com/spectrum-tokens/schemas/token-types/alias.json", + "value": "{neutral-subdued-background-color-default}" + }, + "alert-banner-min-height": { + "component": "alertbanner", + "$schema": "https://opensource.adobe.com/spectrum-tokens/schemas/token-types/alias.json", + "value": "{alert-banner-minimum-height}" + }, + "alert-banner-max-inline-size": { + "component": "alertbanner", + "$schema": "https://opensource.adobe.com/spectrum-tokens/schemas/token-types/alias.json", + "value": "{alert-banner-width}" + }, + "alert-banner-inline-size": { + "component": "alertbanner", + "$schema": "https://opensource.adobe.com/spectrum-tokens/schemas/token-types/alias.json", + "value": "auto" + }, + "alert-banner-font-size": { + "component": "alertbanner", + "$schema": "https://opensource.adobe.com/spectrum-tokens/schemas/token-types/alias.json", + "value": "{font-size-100}" + }, + "alert-banner-line-height": { + "component": "alertbanner", + "$schema": "https://opensource.adobe.com/spectrum-tokens/schemas/token-types/alias.json", + "value": "{line-height-100}", + "sets": { + "cjk": { + "$schema": "https://opensource.adobe.com/spectrum-tokens/schemas/token-types/alias.json", + "value": "{cjk-line-height-100}" + } + } + }, + "alert-banner-font-family": { + "component": "alertbanner", + "$schema": "https://opensource.adobe.com/spectrum-tokens/schemas/token-types/alias.json", + "value": "{sans-font-family-stack}" + }, + "alert-banner-icon-size": { + "component": "alertbanner", + "$schema": "https://opensource.adobe.com/spectrum-tokens/schemas/token-types/alias.json", + "value": "{workflow-icon-size-100}" + }, + "alert-banner-icon-to-text": { + "component": "alertbanner", + "$schema": "https://opensource.adobe.com/spectrum-tokens/schemas/token-types/alias.json", + "value": "{text-to-visual-300}" + }, + "alert-banner-inline-start-to-content": { + "component": "alertbanner", + "$schema": "https://opensource.adobe.com/spectrum-tokens/schemas/token-types/alias.json", + "value": "{spacing-300}" + }, + "alert-banner-inline-end-to-content": { + "component": "alertbanner", + "$schema": "https://opensource.adobe.com/spectrum-tokens/schemas/token-types/alias.json", + "value": "{spacing-300}" + }, + "alert-banner-text-to-button-horizontal": { + "component": "alertbanner", + "$schema": "https://opensource.adobe.com/spectrum-tokens/schemas/token-types/alias.json", + "value": "{spacing-300}" + }, + "alert-banner-block-edge-to-button": { + "component": "alertbanner", + "$schema": "https://opensource.adobe.com/spectrum-tokens/schemas/token-types/alias.json", + "value": "{spacing-200}" + }, + "alert-banner-close-button-to-content": { + "component": "alertbanner", + "$schema": "https://opensource.adobe.com/spectrum-tokens/schemas/token-types/alias.json", + "value": "{spacing-300}" + }, + "alert-banner-close-button-to-inline-end": { + "component": "alertbanner", + "$schema": "https://opensource.adobe.com/spectrum-tokens/schemas/token-types/alias.json", + "value": "{alert-banner-close-button-spacing}" + }, + "alert-banner-text-margin-block-start": { + "component": "alertbanner", + "$schema": "https://opensource.adobe.com/spectrum-tokens/schemas/token-types/alias.json", + "value": "max(0px, {alert-banner-top-to-text} - {alert-banner-block-edge-to-button})" + }, + "alert-banner-text-margin-block-end": { + "component": "alertbanner", + "$schema": "https://opensource.adobe.com/spectrum-tokens/schemas/token-types/alias.json", + "value": "max(0px, {alert-banner-bottom-to-text} - {alert-banner-block-edge-to-button})" + }, + "alert-banner-background": { + "component": "alertbanner", + "$schema": "https://opensource.adobe.com/spectrum-tokens/schemas/token-types/alias.json", + "value": "{neutral-subdued-background-color-default}" + }, + "alert-banner-font-color": { + "component": "alertbanner", + "$schema": "https://opensource.adobe.com/spectrum-tokens/schemas/token-types/alias.json", + "value": "{white}" + }, + "alert-banner-border-color": { + "component": "alertbanner", + "$schema": "https://opensource.adobe.com/spectrum-tokens/schemas/token-types/alias.json", + "value": "transparent", + "sets": { + "whcm": { + "$schema": "https://opensource.adobe.com/spectrum-tokens/schemas/token-types/color.json", + "value": "CanvasText" + } + } + }, + "alert-banner-border-width": { + "component": "alertbanner", + "$schema": "https://opensource.adobe.com/spectrum-tokens/schemas/token-types/alias.json", + "value": "0", + "sets": { + "whcm": { + "$schema": "https://opensource.adobe.com/spectrum-tokens/schemas/token-types/dimension.json", + "value": "{border-width-100}" + } + } + } +} diff --git a/components/alertdialog/tokens.json b/components/alertdialog/tokens.json new file mode 100644 index 00000000000..52208bc3a16 --- /dev/null +++ b/components/alertdialog/tokens.json @@ -0,0 +1,135 @@ +{ + "alert-dialog-min-width": { + "component": "alert-dialog", + "$schema": "https://opensource.adobe.com/spectrum-tokens/schemas/token-types/alias.json", + "value": "{alert-dialog-minimum-width}" + }, + "alert-dialog-max-width": { + "component": "alert-dialog", + "$schema": "https://opensource.adobe.com/spectrum-tokens/schemas/token-types/alias.json", + "value": "{alert-dialog-maximum-width}" + }, + "alert-dialog-icon-size": { + "component": "alert-dialog", + "$schema": "https://opensource.adobe.com/spectrum-tokens/schemas/token-types/alias.json", + "value": "{workflow-icon-size-100}" + }, + "alert-dialog-corner-radius": { + "component": "alert-dialog", + "$schema": "https://opensource.adobe.com/spectrum-tokens/schemas/token-types/alias.json", + "value": "{corner-radius-extra-large-default}" + }, + "alert-dialog-warning-icon-color": { + "component": "alert-dialog", + "$schema": "https://opensource.adobe.com/spectrum-tokens/schemas/token-types/alias.json", + "value": "{notice-visual-color}" + }, + "alert-dialog-error-icon-color": { + "component": "alert-dialog", + "$schema": "https://opensource.adobe.com/spectrum-tokens/schemas/token-types/alias.json", + "value": "{negative-visual-color}" + }, + "alert-dialog-background-color": { + "component": "alert-dialog", + "$schema": "https://opensource.adobe.com/spectrum-tokens/schemas/token-types/alias.json", + "value": "{background-layer-2-color}" + }, + "alert-dialog-title-font-family": { + "component": "alert-dialog", + "$schema": "https://opensource.adobe.com/spectrum-tokens/schemas/token-types/alias.json", + "value": "{sans-font-family-stack}" + }, + "alert-dialog-title-font-weight": { + "component": "alert-dialog", + "$schema": "https://opensource.adobe.com/spectrum-tokens/schemas/token-types/alias.json", + "value": "{heading-sans-serif-font-weight}" + }, + "alert-dialog-title-font-style": { + "component": "alert-dialog", + "$schema": "https://opensource.adobe.com/spectrum-tokens/schemas/token-types/alias.json", + "value": "{heading-sans-serif-font-style}" + }, + "alert-dialog-title-line-height": { + "component": "alert-dialog", + "$schema": "https://opensource.adobe.com/spectrum-tokens/schemas/token-types/alias.json", + "value": "{heading-line-height}" + }, + "alert-dialog-title-color": { + "component": "alert-dialog", + "$schema": "https://opensource.adobe.com/spectrum-tokens/schemas/token-types/alias.json", + "value": "{heading-color}" + }, + "alert-dialog-heading-size": { + "component": "alert-dialog", + "$schema": "https://opensource.adobe.com/spectrum-tokens/schemas/token-types/alias.json", + "value": "{alert-dialog-title-font-size}" + }, + "alert-dialog-description-content-size": { + "component": "alert-dialog", + "$schema": "https://opensource.adobe.com/spectrum-tokens/schemas/token-types/alias.json", + "value": "{alert-dialog-description-font-size}" + }, + "alert-dialog-body-font-family": { + "component": "alert-dialog", + "$schema": "https://opensource.adobe.com/spectrum-tokens/schemas/token-types/alias.json", + "value": "{sans-font-family-stack}" + }, + "alert-dialog-body-font-weight": { + "component": "alert-dialog", + "$schema": "https://opensource.adobe.com/spectrum-tokens/schemas/token-types/alias.json", + "value": "{body-sans-serif-font-weight}" + }, + "alert-dialog-body-font-style": { + "component": "alert-dialog", + "$schema": "https://opensource.adobe.com/spectrum-tokens/schemas/token-types/alias.json", + "value": "{body-sans-serif-font-style}" + }, + "alert-dialog-body-line-height": { + "component": "alert-dialog", + "$schema": "https://opensource.adobe.com/spectrum-tokens/schemas/token-types/alias.json", + "value": "{line-height-200}" + }, + "alert-dialog-body-color": { + "component": "alert-dialog", + "$schema": "https://opensource.adobe.com/spectrum-tokens/schemas/token-types/alias.json", + "value": "{body-color}" + }, + "alert-dialog-title-to-description": { + "component": "alert-dialog", + "$schema": "https://opensource.adobe.com/spectrum-tokens/schemas/token-types/alias.json", + "value": "{spacing-300}" + }, + "alert-dialog-minimum-title-to-icon": { + "component": "alert-dialog", + "$schema": "https://opensource.adobe.com/spectrum-tokens/schemas/token-types/alias.json", + "value": "{spacing-100}" + }, + "alert-dialog-description-to-buttons": { + "component": "alert-dialog", + "$schema": "https://opensource.adobe.com/spectrum-tokens/schemas/token-types/scale-set.json", + "sets": { + "desktop": { + "$schema": "https://opensource.adobe.com/spectrum-tokens/schemas/token-types/alias.json", + "value": "{spacing-700}" + }, + "mobile": { + "$schema": "https://opensource.adobe.com/spectrum-tokens/schemas/token-types/alias.json", + "value": "{spacing-600}" + } + } + }, + "alert-dialog-padding": { + "component": "alert-dialog", + "$schema": "https://opensource.adobe.com/spectrum-tokens/schemas/token-types/scale-set.json", + "sets": { + "desktop": { + "$schema": "https://opensource.adobe.com/spectrum-tokens/schemas/token-types/alias.json", + "value": "{spacing-500}" + }, + "mobile": { + "$schema": "https://opensource.adobe.com/spectrum-tokens/schemas/token-types/alias.json", + "value": "{spacing-400}" + } + } + } +} diff --git a/components/asset/tokens.json b/components/asset/tokens.json new file mode 100644 index 00000000000..10fc58487e9 --- /dev/null +++ b/components/asset/tokens.json @@ -0,0 +1,22 @@ +{ + "asset-folder-background": { + "component": "asset", + "$schema": "https://opensource.adobe.com/spectrum-tokens/schemas/token-types/alias.json", + "value": "{gray-200}" + }, + "asset-file-background": { + "component": "asset", + "$schema": "https://opensource.adobe.com/spectrum-tokens/schemas/token-types/alias.json", + "value": "{gray-25}" + }, + "asset-folder-outline": { + "component": "asset", + "$schema": "https://opensource.adobe.com/spectrum-tokens/schemas/token-types/alias.json", + "value": "{gray-500}" + }, + "asset-file-outline": { + "component": "asset", + "$schema": "https://opensource.adobe.com/spectrum-tokens/schemas/token-types/alias.json", + "value": "{gray-500}" + } +} diff --git a/components/assetcard/dist/metadata.json b/components/assetcard/dist/metadata.json index 94bf07de0af..27b8245979f 100644 --- a/components/assetcard/dist/metadata.json +++ b/components/assetcard/dist/metadata.json @@ -161,7 +161,6 @@ "--spectrum-gray-600", "--spectrum-gray-700", "--spectrum-gray-75", - "--spectrum-gray-75-rgb", "--spectrum-gray-900", "--spectrum-heading-cjk-font-style", "--spectrum-heading-cjk-font-weight", diff --git a/components/assetcard/index.css b/components/assetcard/index.css index 7b9ee81e647..74724eb5ff7 100644 --- a/components/assetcard/index.css +++ b/components/assetcard/index.css @@ -13,15 +13,13 @@ /* outer container, unstyled */ .spectrum-AssetCard { - --spectrum-assetcard-overlay-background-color: rgba(27 127 245 / 10%); + --spectrum-assetcard-overlay-background-color: rgb(27 127 245 / 10%); --spectrum-assetcard-background-color: var(--spectrum-gray-75); - --spectrum-assetcard-selectionindicator-background-color-default: rgba(var(--spectrum-gray-75-rgb), 0.9); + --spectrum-assetcard-selectionindicator-background-color-default: color-mix(in sRGB, var(--spectrum-gray-75) 90%, transparent); --spectrum-assetcard-selectionindicator-box-shadow-color: var(--spectrum-transparent-black-300); /* todo: this isn't quite the size from the XD file as 232px is not a size token, so we use 224px */ --spectrum-assetcard-asset-size: 224px; - --spectrum-assetcard-background-color: var(--spectrum-gray-75); - --spectrum-assetcard-overlay-background-color: rgba(27 127 245 / 10%); --spectrum-assetcard-asset-animation-duration: var(--spectrum-animation-duration-100); --spectrum-assetcard-asset-container-border-size: 1px; --spectrum-assetcard-header-margin-block-start: var(--spectrum-spacing-300); @@ -42,8 +40,6 @@ --spectrum-assetcard-selectionindicator-color: var(--spectrum-white); --spectrum-assetcard-selectionindicator-font-weight: var(--spectrum-bold-font-weight); --spectrum-assetcard-selectionindicator-font-size: var(--spectrum-font-size-400); - --spectrum-assetcard-selectionindicator-background-color-default: rgba(var(--spectrum-gray-75-rgb), 0.9); - --spectrum-assetcard-selectionindicator-box-shadow-color: var(--spectrum-transparent-black-300); /* title */ --spectrum-assetcard-title-text-color: var(--spectrum-gray-900); diff --git a/components/assetcard/tokens.json b/components/assetcard/tokens.json new file mode 100644 index 00000000000..a841fd2189a --- /dev/null +++ b/components/assetcard/tokens.json @@ -0,0 +1,142 @@ +{ + "assestcard-focus-indicator-color": { + "component": "asset-card", + "$schema": "https://opensource.adobe.com/spectrum-tokens/schemas/token-types/color-set.json", + "sets": { + "dark": { + "$schema": "https://opensource.adobe.com/spectrum-tokens/schemas/token-types/alias.json", + "value": "{blue-700}" + }, + "light": { + "$schema": "https://opensource.adobe.com/spectrum-tokens/schemas/token-types/alias.json", + "value": "{blue-800}" + } + } + }, + "assetcard-border-color-selected": { + "component": "asset-card", + "$schema": "https://opensource.adobe.com/spectrum-tokens/schemas/token-types/color-set.json", + "sets": { + "dark": { + "$schema": "https://opensource.adobe.com/spectrum-tokens/schemas/token-types/alias.json", + "value": "{blue-800}" + }, + "light": { + "$schema": "https://opensource.adobe.com/spectrum-tokens/schemas/token-types/alias.json", + "value": "{blue-900}" + } + } + }, + "assetcard-border-color-selected-down": { + "component": "asset-card", + "$schema": "https://opensource.adobe.com/spectrum-tokens/schemas/token-types/color-set.json", + "sets": { + "dark": { + "$schema": "https://opensource.adobe.com/spectrum-tokens/schemas/token-types/alias.json", + "value": "{blue-900}" + }, + "light": { + "$schema": "https://opensource.adobe.com/spectrum-tokens/schemas/token-types/alias.json", + "value": "{blue-1000}" + } + } + }, + "assetcard-border-color-selected-hover": { + "component": "asset-card", + "$schema": "https://opensource.adobe.com/spectrum-tokens/schemas/token-types/color-set.json", + "sets": { + "dark": { + "$schema": "https://opensource.adobe.com/spectrum-tokens/schemas/token-types/alias.json", + "value": "{blue-800}" + }, + "light": { + "$schema": "https://opensource.adobe.com/spectrum-tokens/schemas/token-types/alias.json", + "value": "{blue-900}" + } + } + }, + "assetcard-content-font-size": { + "component": "asset-card", + "$schema": "https://opensource.adobe.com/spectrum-tokens/schemas/token-types/scale-set.json", + "sets": { + "desktop": { + "$schema": "https://opensource.adobe.com/spectrum-tokens/schemas/token-types/alias.json", + "value": "{body-size-s}" + }, + "mobile": { + "$schema": "https://opensource.adobe.com/spectrum-tokens/schemas/token-types/alias.json", + "value": "{body-size-xs}" + } + } + }, + "assetcard-focus-ring-border-radius": { + "component": "asset-card", + "$schema": "https://opensource.adobe.com/spectrum-tokens/schemas/token-types/scale-set.json", + "sets": { + "desktop": { + "$schema": "https://opensource.adobe.com/spectrum-tokens/schemas/token-types/dimension.json", + "value": "8px" + }, + "mobile": { + "$schema": "https://opensource.adobe.com/spectrum-tokens/schemas/token-types/dimension.json", + "value": "9px" + } + } + }, + "assetcard-header-content-font-size": { + "component": "asset-card", + "$schema": "https://opensource.adobe.com/spectrum-tokens/schemas/token-types/scale-set.json", + "sets": { + "desktop": { + "$schema": "https://opensource.adobe.com/spectrum-tokens/schemas/token-types/alias.json", + "value": "{heading-size-xs}" + }, + "mobile": { + "$schema": "https://opensource.adobe.com/spectrum-tokens/schemas/token-types/alias.json", + "value": "{heading-size-xxs}" + } + } + }, + "assetcard-selectionindicator-background-color-ordered": { + "component": "asset-card", + "$schema": "https://opensource.adobe.com/spectrum-tokens/schemas/token-types/color-set.json", + "sets": { + "dark": { + "$schema": "https://opensource.adobe.com/spectrum-tokens/schemas/token-types/alias.json", + "value": "{blue-800}" + }, + "light": { + "$schema": "https://opensource.adobe.com/spectrum-tokens/schemas/token-types/alias.json", + "value": "{blue-900}" + } + } + }, + "assetcard-selectionindicator-margin": { + "component": "asset-card", + "$schema": "https://opensource.adobe.com/spectrum-tokens/schemas/token-types/scale-set.json", + "sets": { + "desktop": { + "$schema": "https://opensource.adobe.com/spectrum-tokens/schemas/token-types/dimension.json", + "value": "12px" + }, + "mobile": { + "$schema": "https://opensource.adobe.com/spectrum-tokens/schemas/token-types/dimension.json", + "value": "15px" + } + } + }, + "assetcard-title-font-size": { + "component": "asset-card", + "$schema": "https://opensource.adobe.com/spectrum-tokens/schemas/token-types/scale-set.json", + "sets": { + "desktop": { + "$schema": "https://opensource.adobe.com/spectrum-tokens/schemas/token-types/alias.json", + "value": "{heading-size-xs}" + }, + "mobile": { + "$schema": "https://opensource.adobe.com/spectrum-tokens/schemas/token-types/alias.json", + "value": "{heading-size-xxs}" + } + } + } +} diff --git a/components/assetlist/tokens.json b/components/assetlist/tokens.json new file mode 100644 index 00000000000..a0aca47906d --- /dev/null +++ b/components/assetlist/tokens.json @@ -0,0 +1,129 @@ +{ + "assetlist-item-background-color-down": { + "component": "asset-list", + "$schema": "https://opensource.adobe.com/spectrum-tokens/schemas/token-types/alias.json", + "value": "{gray-200}" + }, + "assetlist-item-background-color-hover": { + "component": "asset-list", + "$schema": "https://opensource.adobe.com/spectrum-tokens/schemas/token-types/alias.json", + "value": "{gray-100}" + }, + "assetlist-width": { + "component": "asset-list", + "$schema": "https://opensource.adobe.com/spectrum-tokens/schemas/token-types/dimension.json", + "value": "272px" + }, + "assetlist-child-indicator-animation": { + "component": "asset-list", + "$schema": "https://opensource.adobe.com/spectrum-tokens/schemas/token-types/alias.json", + "value": "{animation-duration-100}" + }, + "assetlist-item-height": { + "component": "asset-list", + "$schema": "https://opensource.adobe.com/spectrum-tokens/schemas/token-types/alias.json", + "value": "{spacing-600}" + }, + "assetlist-item-padding-inline-start": { + "component": "asset-list", + "$schema": "https://opensource.adobe.com/spectrum-tokens/schemas/token-types/alias.json", + "value": "{spacing-300}" + }, + "assetlist-item-padding-inline-end": { + "component": "asset-list", + "$schema": "https://opensource.adobe.com/spectrum-tokens/schemas/token-types/alias.json", + "value": "{spacing-300}" + }, + "assetlist-item-margin-block-end": { + "component": "asset-list", + "$schema": "https://opensource.adobe.com/spectrum-tokens/schemas/token-types/alias.json", + "value": "{spacing-75}" + }, + "assetlist-item-border-radius": { + "component": "asset-list", + "$schema": "https://opensource.adobe.com/spectrum-tokens/schemas/token-types/alias.json", + "value": "{spacing-75}" + }, + "assetlist-item-animation": { + "component": "asset-list", + "$schema": "https://opensource.adobe.com/spectrum-tokens/schemas/token-types/alias.json", + "value": "{animation-duration-100}" + }, + "assetlist-item-font-size": { + "component": "asset-list", + "$schema": "https://opensource.adobe.com/spectrum-tokens/schemas/token-types/alias.json", + "value": "{font-size-100}" + }, + "assetlist-item-font-weight": { + "component": "asset-list", + "$schema": "https://opensource.adobe.com/spectrum-tokens/schemas/token-types/alias.json", + "value": "{regular-font-weight}" + }, + "assetlist-thumbnail-width": { + "component": "asset-list", + "$schema": "https://opensource.adobe.com/spectrum-tokens/schemas/token-types/alias.json", + "value": "{spacing-400}" + }, + "assetlist-thumbnail-height": { + "component": "asset-list", + "$schema": "https://opensource.adobe.com/spectrum-tokens/schemas/token-types/alias.json", + "value": "{spacing-400}" + }, + "assetlist-thumbnail-margin-inline-start": { + "component": "asset-list", + "$schema": "https://opensource.adobe.com/spectrum-tokens/schemas/token-types/alias.json", + "value": "{spacing-100}" + }, + "assetlist-item-label-padding-inline-start": { + "component": "asset-list", + "$schema": "https://opensource.adobe.com/spectrum-tokens/schemas/token-types/alias.json", + "value": "{spacing-100}" + }, + "assetlist-label-color": { + "component": "asset-list", + "$schema": "https://opensource.adobe.com/spectrum-tokens/schemas/token-types/alias.json", + "value": "{neutral-content-color-default}" + }, + "assetlist-border-color-key-focus": { + "component": "asset-list", + "$schema": "https://opensource.adobe.com/spectrum-tokens/schemas/token-types/color-set.json", + "sets": { + "dark": { + "$schema": "https://opensource.adobe.com/spectrum-tokens/schemas/token-types/alias.json", + "value": "{blue-700}" + }, + "light": { + "$schema": "https://opensource.adobe.com/spectrum-tokens/schemas/token-types/alias.json", + "value": "{blue-800}" + } + } + }, + "assetlist-item-background-color-selected": { + "component": "asset-list", + "$schema": "https://opensource.adobe.com/spectrum-tokens/schemas/token-types/color-set.json", + "sets": { + "dark": { + "$schema": "https://opensource.adobe.com/spectrum-tokens/schemas/token-types/color.json", + "value": "color-mix(in sRGB, {blue-800} 15%, transparent)" + }, + "light": { + "$schema": "https://opensource.adobe.com/spectrum-tokens/schemas/token-types/color.json", + "value": "color-mix(in sRGB, {blue-900} 10%, transparent)" + } + } + }, + "assetlist-item-background-color-selected-hover": { + "component": "asset-list", + "$schema": "https://opensource.adobe.com/spectrum-tokens/schemas/token-types/color-set.json", + "sets": { + "dark": { + "$schema": "https://opensource.adobe.com/spectrum-tokens/schemas/token-types/color.json", + "value": "color-mix(in sRGB, {blue-800} 25%, transparent)" + }, + "light": { + "$schema": "https://opensource.adobe.com/spectrum-tokens/schemas/token-types/color.json", + "value": "color-mix(in sRGB, {blue-900} 20%, transparent)" + } + } + } +} diff --git a/components/avatar/tokens.json b/components/avatar/tokens.json new file mode 100644 index 00000000000..e387b988b9f --- /dev/null +++ b/components/avatar/tokens.json @@ -0,0 +1,52 @@ +{ + "avatar-color-opacity": { + "component": "avatar", + "$schema": "https://opensource.adobe.com/spectrum-tokens/schemas/token-types/dimension.json", + "value": "1" + }, + "avatar-inline-size": { + "component": "avatar", + "$schema": "https://opensource.adobe.com/spectrum-tokens/schemas/token-types/alias.json", + "value": "{avatar-size-100}" + }, + "avatar-block-size": { + "component": "avatar", + "$schema": "https://opensource.adobe.com/spectrum-tokens/schemas/token-types/alias.json", + "value": "{avatar-size-100}" + }, + "avatar-border-radius": { + "component": "avatar", + "$schema": "https://opensource.adobe.com/spectrum-tokens/schemas/token-types/alias.json", + "value": "{avatar-block-size}" + }, + "avatar-border-thickness": { + "component": "avatar", + "$schema": "https://opensource.adobe.com/spectrum-tokens/schemas/token-types/alias.json", + "value": "{avatar-border-width}" + }, + "avatar-border-color-default": { + "component": "avatar", + "$schema": "https://opensource.adobe.com/spectrum-tokens/schemas/token-types/alias.json", + "value": "{avatar-border-color}" + }, + "avatar-focus-indicator-thickness": { + "component": "avatar", + "$schema": "https://opensource.adobe.com/spectrum-tokens/schemas/token-types/alias.json", + "value": "{focus-indicator-thickness}" + }, + "avatar-focus-indicator-gap": { + "component": "avatar", + "$schema": "https://opensource.adobe.com/spectrum-tokens/schemas/token-types/alias.json", + "value": "{focus-indicator-gap}" + }, + "avatar-focus-indicator-color": { + "component": "avatar", + "$schema": "https://opensource.adobe.com/spectrum-tokens/schemas/token-types/alias.json", + "value": "{focus-indicator-color}" + }, + "avatar-color-opacity-disabled": { + "component": "avatar", + "$schema": "https://opensource.adobe.com/spectrum-tokens/schemas/token-types/alias.json", + "value": "{avatar-opacity-disabled}" + } +} diff --git a/components/badge/tokens.json b/components/badge/tokens.json new file mode 100644 index 00000000000..b4abcfc8d2f --- /dev/null +++ b/components/badge/tokens.json @@ -0,0 +1,402 @@ +{ + "badge-label-icon-color-primary": { + "component": "badge", + "$schema": "https://opensource.adobe.com/spectrum-tokens/schemas/token-types/color-set.json", + "sets": { + "dark": { + "$schema": "https://opensource.adobe.com/spectrum-tokens/schemas/token-types/alias.json", + "value": "{black}" + }, + "light": { + "$schema": "https://opensource.adobe.com/spectrum-tokens/schemas/token-types/alias.json", + "value": "{white}" + } + } + }, + "badge-border-color": { + "component": "badge", + "$schema": "https://opensource.adobe.com/spectrum-tokens/schemas/token-types/alias.json", + "value": "transparent", + "sets": { + "whcm": { + "$schema": "https://opensource.adobe.com/spectrum-tokens/schemas/token-types/color.json", + "value": "CanvasText" + } + } + }, + "badge-border-width": { + "component": "badge", + "$schema": "https://opensource.adobe.com/spectrum-tokens/schemas/token-types/alias.json", + "value": "{border-width-200}" + }, + "badge-corner-radius": { + "component": "badge", + "$schema": "https://opensource.adobe.com/spectrum-tokens/schemas/token-types/alias.json", + "value": "{corner-radius-medium-size-medium}" + }, + "badge-height": { + "component": "badge", + "$schema": "https://opensource.adobe.com/spectrum-tokens/schemas/token-types/alias.json", + "value": "{component-height-100}" + }, + "badge-font-size": { + "component": "badge", + "$schema": "https://opensource.adobe.com/spectrum-tokens/schemas/token-types/alias.json", + "value": "{font-size-100}" + }, + "badge-font-weight": { + "component": "badge", + "$schema": "https://opensource.adobe.com/spectrum-tokens/schemas/token-types/alias.json", + "value": "{medium-font-weight}" + }, + "badge-line-height": { + "component": "badge", + "$schema": "https://opensource.adobe.com/spectrum-tokens/schemas/token-types/alias.json", + "value": "{line-height-100}" + }, + "badge-line-height-cjk": { + "component": "badge", + "$schema": "https://opensource.adobe.com/spectrum-tokens/schemas/token-types/alias.json", + "value": "{cjk-line-height-100}" + }, + "badge-label-spacing-vertical-top": { + "component": "badge", + "$schema": "https://opensource.adobe.com/spectrum-tokens/schemas/token-types/alias.json", + "value": "{component-top-to-text-100}" + }, + "badge-label-spacing-vertical-bottom": { + "component": "badge", + "$schema": "https://opensource.adobe.com/spectrum-tokens/schemas/token-types/alias.json", + "value": "{component-bottom-to-text-100}" + }, + "badge-label-spacing-horizontal": { + "component": "badge", + "$schema": "https://opensource.adobe.com/spectrum-tokens/schemas/token-types/alias.json", + "value": "{component-edge-to-text-100}" + }, + "badge-workflow-icon-size": { + "component": "badge", + "$schema": "https://opensource.adobe.com/spectrum-tokens/schemas/token-types/alias.json", + "value": "{workflow-icon-size-100}" + }, + "badge-icon-text-spacing": { + "component": "badge", + "$schema": "https://opensource.adobe.com/spectrum-tokens/schemas/token-types/alias.json", + "value": "{text-to-visual-100}" + }, + "badge-icon-spacing-horizontal": { + "component": "badge", + "$schema": "https://opensource.adobe.com/spectrum-tokens/schemas/token-types/alias.json", + "value": "{component-edge-to-visual-100}" + }, + "badge-icon-spacing-vertical-top": { + "component": "badge", + "$schema": "https://opensource.adobe.com/spectrum-tokens/schemas/token-types/alias.json", + "value": "{component-top-to-workflow-icon-100}" + }, + "badge-icon-only-spacing-horizontal": { + "component": "badge", + "$schema": "https://opensource.adobe.com/spectrum-tokens/schemas/token-types/alias.json", + "value": "{component-edge-to-visual-only-100}" + }, + "badge-label-icon-color": { + "component": "badge", + "$schema": "https://opensource.adobe.com/spectrum-tokens/schemas/token-types/alias.json", + "value": "{white}" + }, + "badge-background-color-default": { + "component": "badge", + "$schema": "https://opensource.adobe.com/spectrum-tokens/schemas/token-types/alias.json", + "value": "{neutral-subdued-background-color-default}" + }, + "badge-background-color-accent": { + "component": "badge", + "$schema": "https://opensource.adobe.com/spectrum-tokens/schemas/token-types/alias.json", + "value": "{accent-background-color-default}" + }, + "badge-background-color-informative": { + "component": "badge", + "$schema": "https://opensource.adobe.com/spectrum-tokens/schemas/token-types/alias.json", + "value": "{informative-background-color-default}" + }, + "badge-background-color-negative": { + "component": "badge", + "$schema": "https://opensource.adobe.com/spectrum-tokens/schemas/token-types/alias.json", + "value": "{negative-background-color-default}" + }, + "badge-background-color-positive": { + "component": "badge", + "$schema": "https://opensource.adobe.com/spectrum-tokens/schemas/token-types/alias.json", + "value": "{positive-background-color-default}" + }, + "badge-background-color-notice": { + "component": "badge", + "$schema": "https://opensource.adobe.com/spectrum-tokens/schemas/token-types/alias.json", + "value": "{notice-background-color-default}" + }, + "badge-background-color-gray": { + "component": "badge", + "$schema": "https://opensource.adobe.com/spectrum-tokens/schemas/token-types/alias.json", + "value": "{gray-background-color-default}" + }, + "badge-background-color-red": { + "component": "badge", + "$schema": "https://opensource.adobe.com/spectrum-tokens/schemas/token-types/alias.json", + "value": "{red-background-color-default}" + }, + "badge-background-color-orange": { + "component": "badge", + "$schema": "https://opensource.adobe.com/spectrum-tokens/schemas/token-types/alias.json", + "value": "{orange-background-color-default}" + }, + "badge-background-color-yellow": { + "component": "badge", + "$schema": "https://opensource.adobe.com/spectrum-tokens/schemas/token-types/alias.json", + "value": "{yellow-background-color-default}" + }, + "badge-background-color-chartreuse": { + "component": "badge", + "$schema": "https://opensource.adobe.com/spectrum-tokens/schemas/token-types/alias.json", + "value": "{chartreuse-background-color-default}" + }, + "badge-background-color-celery": { + "component": "badge", + "$schema": "https://opensource.adobe.com/spectrum-tokens/schemas/token-types/alias.json", + "value": "{celery-background-color-default}" + }, + "badge-background-color-green": { + "component": "badge", + "$schema": "https://opensource.adobe.com/spectrum-tokens/schemas/token-types/alias.json", + "value": "{green-background-color-default}" + }, + "badge-background-color-seafoam": { + "component": "badge", + "$schema": "https://opensource.adobe.com/spectrum-tokens/schemas/token-types/alias.json", + "value": "{seafoam-background-color-default}" + }, + "badge-background-color-cyan": { + "component": "badge", + "$schema": "https://opensource.adobe.com/spectrum-tokens/schemas/token-types/alias.json", + "value": "{cyan-background-color-default}" + }, + "badge-background-color-blue": { + "component": "badge", + "$schema": "https://opensource.adobe.com/spectrum-tokens/schemas/token-types/alias.json", + "value": "{blue-background-color-default}" + }, + "badge-background-color-indigo": { + "component": "badge", + "$schema": "https://opensource.adobe.com/spectrum-tokens/schemas/token-types/alias.json", + "value": "{indigo-background-color-default}" + }, + "badge-background-color-purple": { + "component": "badge", + "$schema": "https://opensource.adobe.com/spectrum-tokens/schemas/token-types/alias.json", + "value": "{purple-background-color-default}" + }, + "badge-background-color-fuchsia": { + "component": "badge", + "$schema": "https://opensource.adobe.com/spectrum-tokens/schemas/token-types/alias.json", + "value": "{fuchsia-background-color-default}" + }, + "badge-background-color-magenta": { + "component": "badge", + "$schema": "https://opensource.adobe.com/spectrum-tokens/schemas/token-types/alias.json", + "value": "{magenta-background-color-default}" + }, + "badge-background-color-pink": { + "component": "badge", + "$schema": "https://opensource.adobe.com/spectrum-tokens/schemas/token-types/alias.json", + "value": "{pink-background-color-default}" + }, + "badge-background-color-turquoise": { + "component": "badge", + "$schema": "https://opensource.adobe.com/spectrum-tokens/schemas/token-types/alias.json", + "value": "{turquoise-background-color-default}" + }, + "badge-background-color-brown": { + "component": "badge", + "$schema": "https://opensource.adobe.com/spectrum-tokens/schemas/token-types/alias.json", + "value": "{brown-background-color-default}" + }, + "badge-background-color-cinnamon": { + "component": "badge", + "$schema": "https://opensource.adobe.com/spectrum-tokens/schemas/token-types/alias.json", + "value": "{cinnamon-background-color-default}" + }, + "badge-background-color-silver": { + "component": "badge", + "$schema": "https://opensource.adobe.com/spectrum-tokens/schemas/token-types/alias.json", + "value": "{silver-background-color-default}" + }, + "badge-subtle-label-icon-color": { + "component": "badge", + "$schema": "https://opensource.adobe.com/spectrum-tokens/schemas/token-types/alias.json", + "value": "{gray-1000}" + }, + "badge-subtle-background-color-default": { + "component": "badge", + "$schema": "https://opensource.adobe.com/spectrum-tokens/schemas/token-types/alias.json", + "value": "{neutral-subtle-background-color-default}" + }, + "badge-subtle-background-color-accent": { + "component": "badge", + "$schema": "https://opensource.adobe.com/spectrum-tokens/schemas/token-types/alias.json", + "value": "{accent-subtle-background-color-default}" + }, + "badge-subtle-background-color-informative": { + "component": "badge", + "$schema": "https://opensource.adobe.com/spectrum-tokens/schemas/token-types/alias.json", + "value": "{informative-subtle-background-color-default}" + }, + "badge-subtle-background-color-negative": { + "component": "badge", + "$schema": "https://opensource.adobe.com/spectrum-tokens/schemas/token-types/alias.json", + "value": "{negative-subtle-background-color-default}" + }, + "badge-subtle-background-color-positive": { + "component": "badge", + "$schema": "https://opensource.adobe.com/spectrum-tokens/schemas/token-types/alias.json", + "value": "{positive-subtle-background-color-default}" + }, + "badge-subtle-background-color-notice": { + "component": "badge", + "$schema": "https://opensource.adobe.com/spectrum-tokens/schemas/token-types/alias.json", + "value": "{notice-subtle-background-color-default}" + }, + "badge-subtle-background-color-gray": { + "component": "badge", + "$schema": "https://opensource.adobe.com/spectrum-tokens/schemas/token-types/alias.json", + "value": "{gray-subtle-background-color-default}" + }, + "badge-subtle-background-color-red": { + "component": "badge", + "$schema": "https://opensource.adobe.com/spectrum-tokens/schemas/token-types/alias.json", + "value": "{red-subtle-background-color-default}" + }, + "badge-subtle-background-color-orange": { + "component": "badge", + "$schema": "https://opensource.adobe.com/spectrum-tokens/schemas/token-types/alias.json", + "value": "{orange-subtle-background-color-default}" + }, + "badge-subtle-background-color-yellow": { + "component": "badge", + "$schema": "https://opensource.adobe.com/spectrum-tokens/schemas/token-types/alias.json", + "value": "{yellow-subtle-background-color-default}" + }, + "badge-subtle-background-color-chartreuse": { + "component": "badge", + "$schema": "https://opensource.adobe.com/spectrum-tokens/schemas/token-types/alias.json", + "value": "{chartreuse-subtle-background-color-default}" + }, + "badge-subtle-background-color-celery": { + "component": "badge", + "$schema": "https://opensource.adobe.com/spectrum-tokens/schemas/token-types/alias.json", + "value": "{celery-subtle-background-color-default}" + }, + "badge-subtle-background-color-green": { + "component": "badge", + "$schema": "https://opensource.adobe.com/spectrum-tokens/schemas/token-types/alias.json", + "value": "{green-subtle-background-color-default}" + }, + "badge-subtle-background-color-seafoam": { + "component": "badge", + "$schema": "https://opensource.adobe.com/spectrum-tokens/schemas/token-types/alias.json", + "value": "{seafoam-subtle-background-color-default}" + }, + "badge-subtle-background-color-cyan": { + "component": "badge", + "$schema": "https://opensource.adobe.com/spectrum-tokens/schemas/token-types/alias.json", + "value": "{cyan-subtle-background-color-default}" + }, + "badge-subtle-background-color-blue": { + "component": "badge", + "$schema": "https://opensource.adobe.com/spectrum-tokens/schemas/token-types/alias.json", + "value": "{blue-subtle-background-color-default}" + }, + "badge-subtle-background-color-indigo": { + "component": "badge", + "$schema": "https://opensource.adobe.com/spectrum-tokens/schemas/token-types/alias.json", + "value": "{indigo-subtle-background-color-default}" + }, + "badge-subtle-background-color-purple": { + "component": "badge", + "$schema": "https://opensource.adobe.com/spectrum-tokens/schemas/token-types/alias.json", + "value": "{purple-subtle-background-color-default}" + }, + "badge-subtle-background-color-fuchsia": { + "component": "badge", + "$schema": "https://opensource.adobe.com/spectrum-tokens/schemas/token-types/alias.json", + "value": "{fuchsia-subtle-background-color-default}" + }, + "badge-subtle-background-color-magenta": { + "component": "badge", + "$schema": "https://opensource.adobe.com/spectrum-tokens/schemas/token-types/alias.json", + "value": "{magenta-subtle-background-color-default}" + }, + "badge-subtle-background-color-pink": { + "component": "badge", + "$schema": "https://opensource.adobe.com/spectrum-tokens/schemas/token-types/alias.json", + "value": "{pink-subtle-background-color-default}" + }, + "badge-subtle-background-color-turquoise": { + "component": "badge", + "$schema": "https://opensource.adobe.com/spectrum-tokens/schemas/token-types/alias.json", + "value": "{turquoise-subtle-background-color-default}" + }, + "badge-subtle-background-color-brown": { + "component": "badge", + "$schema": "https://opensource.adobe.com/spectrum-tokens/schemas/token-types/alias.json", + "value": "{brown-subtle-background-color-default}" + }, + "badge-subtle-background-color-cinnamon": { + "component": "badge", + "$schema": "https://opensource.adobe.com/spectrum-tokens/schemas/token-types/alias.json", + "value": "{cinnamon-subtle-background-color-default}" + }, + "badge-subtle-background-color-silver": { + "component": "badge", + "$schema": "https://opensource.adobe.com/spectrum-tokens/schemas/token-types/alias.json", + "value": "{silver-subtle-background-color-default}" + }, + "badge-outline-label-icon-color": { + "component": "badge", + "$schema": "https://opensource.adobe.com/spectrum-tokens/schemas/token-types/alias.json", + "value": "{gray-1000}" + }, + "badge-outline-background-color": { + "component": "badge", + "$schema": "https://opensource.adobe.com/spectrum-tokens/schemas/token-types/alias.json", + "value": "{background-layer-2-color}" + }, + "badge-outline-border-color-neutral": { + "component": "badge", + "$schema": "https://opensource.adobe.com/spectrum-tokens/schemas/token-types/alias.json", + "value": "{neutral-visual-color}" + }, + "badge-outline-border-color-accent": { + "component": "badge", + "$schema": "https://opensource.adobe.com/spectrum-tokens/schemas/token-types/alias.json", + "value": "{accent-visual-color}" + }, + "badge-outline-border-color-informative": { + "component": "badge", + "$schema": "https://opensource.adobe.com/spectrum-tokens/schemas/token-types/alias.json", + "value": "{informative-visual-color}" + }, + "badge-outline-border-color-negative": { + "component": "badge", + "$schema": "https://opensource.adobe.com/spectrum-tokens/schemas/token-types/alias.json", + "value": "{negative-visual-color}" + }, + "badge-outline-border-color-notice": { + "component": "badge", + "$schema": "https://opensource.adobe.com/spectrum-tokens/schemas/token-types/alias.json", + "value": "{notice-visual-color}" + }, + "badge-outline-border-color-positive": { + "component": "badge", + "$schema": "https://opensource.adobe.com/spectrum-tokens/schemas/token-types/alias.json", + "value": "{positive-visual-color}" + } +} diff --git a/components/breadcrumb/dist/metadata.json b/components/breadcrumb/dist/metadata.json index 35fb0b03993..2062805635c 100644 --- a/components/breadcrumb/dist/metadata.json +++ b/components/breadcrumb/dist/metadata.json @@ -134,8 +134,8 @@ "--spectrum-corner-radius-small-default", "--spectrum-default-font-style", "--spectrum-disabled-content-color", + "--spectrum-drop-zone-background-color", "--spectrum-drop-zone-background-color-opacity", - "--spectrum-drop-zone-background-color-rgb", "--spectrum-extra-bold-font-weight", "--spectrum-focus-indicator-color", "--spectrum-focus-indicator-gap", diff --git a/components/breadcrumb/index.css b/components/breadcrumb/index.css index d8d46e277dc..076a6b026cc 100644 --- a/components/breadcrumb/index.css +++ b/components/breadcrumb/index.css @@ -61,7 +61,7 @@ --spectrum-breadcrumbs-action-button-color: var(--spectrum-neutral-subdued-content-color-default); --spectrum-breadcrumbs-action-button-color-disabled: var(--spectrum-disabled-content-color); --spectrum-breadcrumbs-focus-indicator-color: var(--spectrum-focus-indicator-color); - --spectrum-breadcrumbs-item-dragged-background: rgba(var(--spectrum-drop-zone-background-color-rgb), var(--spectrum-drop-zone-background-color-opacity)); + --spectrum-breadcrumbs-item-dragged-background: color-mix(in sRGB, var(--spectrum-drop-zone-background-color) var(--spectrum-drop-zone-background-color-opacity), transparent); /* Sub-component: heading */ --mod-heading-margin-end: 0px; diff --git a/components/breadcrumb/tokens.json b/components/breadcrumb/tokens.json new file mode 100644 index 00000000000..f291c8f6f6e --- /dev/null +++ b/components/breadcrumb/tokens.json @@ -0,0 +1,209 @@ +{ + "breadcrumbs-block-size": { + "component": "breadcrumb", + "$schema": "https://opensource.adobe.com/spectrum-tokens/schemas/token-types/alias.json", + "value": "{component-height-100}" + }, + "breadcrumbs-line-height": { + "component": "breadcrumb", + "$schema": "https://opensource.adobe.com/spectrum-tokens/schemas/token-types/alias.json", + "value": "{line-height-100}" + }, + "breadcrumbs-font-size": { + "component": "breadcrumb", + "$schema": "https://opensource.adobe.com/spectrum-tokens/schemas/token-types/alias.json", + "value": "{font-size-100}" + }, + "breadcrumbs-font-family": { + "component": "breadcrumb", + "$schema": "https://opensource.adobe.com/spectrum-tokens/schemas/token-types/alias.json", + "value": "{sans-font-family-stack}" + }, + "breadcrumbs-font-weight": { + "component": "breadcrumb", + "$schema": "https://opensource.adobe.com/spectrum-tokens/schemas/token-types/alias.json", + "value": "{regular-font-weight}" + }, + "breadcrumbs-font-style": { + "component": "breadcrumb", + "$schema": "https://opensource.adobe.com/spectrum-tokens/schemas/token-types/alias.json", + "value": "{default-font-style}" + }, + "breadcrumbs-font-size-current": { + "component": "breadcrumb", + "$schema": "https://opensource.adobe.com/spectrum-tokens/schemas/token-types/alias.json", + "value": "{font-size-100}" + }, + "breadcrumbs-font-family-current": { + "component": "breadcrumb", + "$schema": "https://opensource.adobe.com/spectrum-tokens/schemas/token-types/alias.json", + "value": "{sans-font-family-stack}" + }, + "breadcrumbs-font-weight-current": { + "component": "breadcrumb", + "$schema": "https://opensource.adobe.com/spectrum-tokens/schemas/token-types/alias.json", + "value": "{bold-font-weight}" + }, + "breadcrumbs-text-decoration-thickness": { + "component": "breadcrumb", + "$schema": "https://opensource.adobe.com/spectrum-tokens/schemas/token-types/alias.json", + "value": "{text-underline-thickness}" + }, + "breadcrumbs-text-decoration-gap": { + "component": "breadcrumb", + "$schema": "https://opensource.adobe.com/spectrum-tokens/schemas/token-types/alias.json", + "value": "{text-underline-gap}" + }, + "breadcrumbs-separator-spacing-inline": { + "component": "breadcrumb", + "$schema": "https://opensource.adobe.com/spectrum-tokens/schemas/token-types/alias.json", + "value": "{breadcrumbs-text-to-separator-medium}" + }, + "breadcrumbs-text-spacing-block-start": { + "component": "breadcrumb", + "$schema": "https://opensource.adobe.com/spectrum-tokens/schemas/token-types/alias.json", + "value": "{component-top-to-text-100}" + }, + "breadcrumbs-text-spacing-block-end": { + "component": "breadcrumb", + "$schema": "https://opensource.adobe.com/spectrum-tokens/schemas/token-types/alias.json", + "value": "{component-bottom-to-text-100}" + }, + "breadcrumbs-icon-spacing-block": { + "component": "breadcrumb", + "$schema": "https://opensource.adobe.com/spectrum-tokens/schemas/token-types/alias.json", + "value": "{breadcrumbs-top-to-separator-medium}" + }, + "breadcrumbs-title-spacing-block-start": { + "component": "breadcrumb", + "$schema": "https://opensource.adobe.com/spectrum-tokens/schemas/token-types/alias.json", + "value": "{breadcrumbs-text-spacing-block-start}" + }, + "breadcrumbs-title-spacing-block-end": { + "component": "breadcrumb", + "$schema": "https://opensource.adobe.com/spectrum-tokens/schemas/token-types/alias.json", + "value": "{breadcrumbs-text-spacing-block-end}" + }, + "breadcrumbs-inline-start": { + "component": "breadcrumb", + "$schema": "https://opensource.adobe.com/spectrum-tokens/schemas/token-types/alias.json", + "value": "{breadcrumbs-start-edge-to-text-medium}" + }, + "breadcrumbs-inline-end": { + "component": "breadcrumb", + "$schema": "https://opensource.adobe.com/spectrum-tokens/schemas/token-types/alias.json", + "value": "{breadcrumbs-end-edge-to-text}" + }, + "breadcrumbs-inline-start-to-truncated-menu": { + "component": "breadcrumb", + "$schema": "https://opensource.adobe.com/spectrum-tokens/schemas/token-types/alias.json", + "value": "{breadcrumbs-start-edge-to-truncated-menu}" + }, + "breadcrumbs-action-button-spacing-inline": { + "component": "breadcrumb", + "$schema": "https://opensource.adobe.com/spectrum-tokens/schemas/token-types/alias.json", + "value": "{breadcrumbs-truncated-menu-to-separator}" + }, + "breadcrumbs-action-button-spacing-block": { + "component": "breadcrumb", + "$schema": "https://opensource.adobe.com/spectrum-tokens/schemas/token-types/alias.json", + "value": "{breadcrumbs-top-to-truncated-menu}" + }, + "breadcrumbs-focus-indicator-thickness": { + "component": "breadcrumb", + "$schema": "https://opensource.adobe.com/spectrum-tokens/schemas/token-types/alias.json", + "value": "{focus-indicator-thickness}" + }, + "breadcrumbs-focus-indicator-gap": { + "component": "breadcrumb", + "$schema": "https://opensource.adobe.com/spectrum-tokens/schemas/token-types/alias.json", + "value": "{focus-indicator-gap}" + }, + "breadcrumbs-item-link-border-radius": { + "component": "breadcrumb", + "$schema": "https://opensource.adobe.com/spectrum-tokens/schemas/token-types/alias.json", + "value": "{corner-radius-small-default}" + }, + "breadcrumbs-text-color": { + "component": "breadcrumb", + "$schema": "https://opensource.adobe.com/spectrum-tokens/schemas/token-types/alias.json", + "value": "{neutral-subdued-content-color-default}", + "sets": { + "whcm": { + "$schema": "https://opensource.adobe.com/spectrum-tokens/schemas/token-types/color.json", + "value": "LinkText" + } + } + }, + "breadcrumbs-text-color-current": { + "component": "breadcrumb", + "$schema": "https://opensource.adobe.com/spectrum-tokens/schemas/token-types/alias.json", + "value": "{neutral-content-color-default}", + "sets": { + "whcm": { + "$schema": "https://opensource.adobe.com/spectrum-tokens/schemas/token-types/color.json", + "value": "CanvasText" + } + } + }, + "breadcrumbs-text-color-disabled": { + "component": "breadcrumb", + "$schema": "https://opensource.adobe.com/spectrum-tokens/schemas/token-types/alias.json", + "value": "{disabled-content-color}", + "sets": { + "whcm": { + "$schema": "https://opensource.adobe.com/spectrum-tokens/schemas/token-types/color.json", + "value": "GrayText" + } + } + }, + "breadcrumbs-separator-color": { + "component": "breadcrumb", + "$schema": "https://opensource.adobe.com/spectrum-tokens/schemas/token-types/alias.json", + "value": "{neutral-content-color-default}", + "sets": { + "whcm": { + "$schema": "https://opensource.adobe.com/spectrum-tokens/schemas/token-types/color.json", + "value": "CanvasText" + } + } + }, + "breadcrumbs-action-button-color": { + "component": "breadcrumb", + "$schema": "https://opensource.adobe.com/spectrum-tokens/schemas/token-types/alias.json", + "value": "{neutral-subdued-content-color-default}", + "sets": { + "whcm": { + "$schema": "https://opensource.adobe.com/spectrum-tokens/schemas/token-types/color.json", + "value": "LinkText" + } + } + }, + "breadcrumbs-action-button-color-disabled": { + "component": "breadcrumb", + "$schema": "https://opensource.adobe.com/spectrum-tokens/schemas/token-types/alias.json", + "value": "{disabled-content-color}", + "sets": { + "whcm": { + "$schema": "https://opensource.adobe.com/spectrum-tokens/schemas/token-types/color.json", + "value": "GrayText" + } + } + }, + "breadcrumbs-focus-indicator-color": { + "component": "breadcrumb", + "$schema": "https://opensource.adobe.com/spectrum-tokens/schemas/token-types/alias.json", + "value": "{focus-indicator-color}", + "sets": { + "whcm": { + "$schema": "https://opensource.adobe.com/spectrum-tokens/schemas/token-types/color.json", + "value": "CanvasText" + } + } + }, + "breadcrumbs-item-dragged-background": { + "component": "breadcrumb", + "$schema": "https://opensource.adobe.com/spectrum-tokens/schemas/token-types/alias.json", + "value": "color-mix(in sRGB, {drop-zone-background-color} {drop-zone-background-color-opacity}, transparent)" + } +} diff --git a/components/button/tokens.json b/components/button/tokens.json new file mode 100644 index 00000000000..c80b535afb2 --- /dev/null +++ b/components/button/tokens.json @@ -0,0 +1,347 @@ +{ + "button-bottom-to-text-extra-large": { + "component": "button", + "$schema": "https://opensource.adobe.com/spectrum-tokens/schemas/token-types/scale-set.json", + "sets": { + "desktop": { + "$schema": "https://opensource.adobe.com/spectrum-tokens/schemas/token-types/dimension.json", + "value": "13px" + }, + "mobile": { + "$schema": "https://opensource.adobe.com/spectrum-tokens/schemas/token-types/dimension.json", + "value": "17px" + } + } + }, + "button-bottom-to-text-large": { + "component": "button", + "$schema": "https://opensource.adobe.com/spectrum-tokens/schemas/token-types/scale-set.json", + "sets": { + "desktop": { + "$schema": "https://opensource.adobe.com/spectrum-tokens/schemas/token-types/dimension.json", + "value": "10px" + }, + "mobile": { + "$schema": "https://opensource.adobe.com/spectrum-tokens/schemas/token-types/dimension.json", + "value": "13px" + } + } + }, + "button-bottom-to-text-medium": { + "component": "button", + "$schema": "https://opensource.adobe.com/spectrum-tokens/schemas/token-types/scale-set.json", + "sets": { + "desktop": { + "$schema": "https://opensource.adobe.com/spectrum-tokens/schemas/token-types/dimension.json", + "value": "8px" + }, + "mobile": { + "$schema": "https://opensource.adobe.com/spectrum-tokens/schemas/token-types/dimension.json", + "value": "10px" + } + } + }, + "button-bottom-to-text-small": { + "component": "button", + "$schema": "https://opensource.adobe.com/spectrum-tokens/schemas/token-types/scale-set.json", + "sets": { + "desktop": { + "$schema": "https://opensource.adobe.com/spectrum-tokens/schemas/token-types/dimension.json", + "value": "4px" + }, + "mobile": { + "$schema": "https://opensource.adobe.com/spectrum-tokens/schemas/token-types/dimension.json", + "value": "5px" + } + } + }, + "button-top-to-text-extra-large": { + "component": "button", + "$schema": "https://opensource.adobe.com/spectrum-tokens/schemas/token-types/scale-set.json", + "sets": { + "desktop": { + "$schema": "https://opensource.adobe.com/spectrum-tokens/schemas/token-types/dimension.json", + "value": "13px" + }, + "mobile": { + "$schema": "https://opensource.adobe.com/spectrum-tokens/schemas/token-types/dimension.json", + "value": "16px" + } + } + }, + "button-top-to-text-large": { + "component": "button", + "$schema": "https://opensource.adobe.com/spectrum-tokens/schemas/token-types/scale-set.json", + "sets": { + "desktop": { + "$schema": "https://opensource.adobe.com/spectrum-tokens/schemas/token-types/dimension.json", + "value": "10px" + }, + "mobile": { + "$schema": "https://opensource.adobe.com/spectrum-tokens/schemas/token-types/dimension.json", + "value": "12px" + } + } + }, + "button-top-to-text-medium": { + "component": "button", + "$schema": "https://opensource.adobe.com/spectrum-tokens/schemas/token-types/scale-set.json", + "sets": { + "desktop": { + "$schema": "https://opensource.adobe.com/spectrum-tokens/schemas/token-types/dimension.json", + "value": "7px" + }, + "mobile": { + "$schema": "https://opensource.adobe.com/spectrum-tokens/schemas/token-types/dimension.json", + "value": "9px" + } + } + }, + "button-top-to-text-small": { + "component": "button", + "$schema": "https://opensource.adobe.com/spectrum-tokens/schemas/token-types/scale-set.json", + "sets": { + "desktop": { + "$schema": "https://opensource.adobe.com/spectrum-tokens/schemas/token-types/dimension.json", + "value": "5px" + }, + "mobile": { + "$schema": "https://opensource.adobe.com/spectrum-tokens/schemas/token-types/dimension.json", + "value": "6px" + } + } + }, + "button-animation-duration": { + "component": "button", + "$schema": "https://opensource.adobe.com/spectrum-tokens/schemas/token-types/alias.json", + "value": "{animation-duration-100}" + }, + "button-focus-ring-gap": { + "component": "button", + "$schema": "https://opensource.adobe.com/spectrum-tokens/schemas/token-types/alias.json", + "value": "{focus-indicator-gap}" + }, + "button-focus-ring-thickness": { + "component": "button", + "$schema": "https://opensource.adobe.com/spectrum-tokens/schemas/token-types/alias.json", + "value": "{focus-indicator-thickness}" + }, + "button-focus-indicator-color": { + "component": "button", + "$schema": "https://opensource.adobe.com/spectrum-tokens/schemas/token-types/alias.json", + "value": "{focus-indicator-color}" + }, + "button-min-width": { + "component": "button", + "$schema": "https://opensource.adobe.com/spectrum-tokens/schemas/token-types/alias.json", + "value": "calc({component-height-100} * {button-minimum-width-multiplier})" + }, + "button-height": { + "component": "button", + "$schema": "https://opensource.adobe.com/spectrum-tokens/schemas/token-types/alias.json", + "value": "{component-height-100}" + }, + "button-border-radius": { + "component": "button", + "$schema": "https://opensource.adobe.com/spectrum-tokens/schemas/token-types/alias.json", + "value": "calc({button-height} / 2)" + }, + "button-border-width": { + "component": "button", + "$schema": "https://opensource.adobe.com/spectrum-tokens/schemas/token-types/alias.json", + "value": "{border-width-200}" + }, + "button-line-height": { + "component": "button", + "$schema": "https://opensource.adobe.com/spectrum-tokens/schemas/token-types/dimension.json", + "value": "1.2" + }, + "button-font-weight": { + "component": "button", + "$schema": "https://opensource.adobe.com/spectrum-tokens/schemas/token-types/alias.json", + "value": "{bold-font-weight}" + }, + "button-font-size": { + "component": "button", + "$schema": "https://opensource.adobe.com/spectrum-tokens/schemas/token-types/alias.json", + "value": "{font-size-100}" + }, + "button-edge-to-visual": { + "component": "button", + "$schema": "https://opensource.adobe.com/spectrum-tokens/schemas/token-types/alias.json", + "value": "calc({component-pill-edge-to-visual-100} - {button-border-width})" + }, + "button-edge-to-visual-only": { + "component": "button", + "$schema": "https://opensource.adobe.com/spectrum-tokens/schemas/token-types/alias.json", + "value": "calc({component-pill-edge-to-visual-only-100} - {button-border-width})" + }, + "button-edge-to-text": { + "component": "button", + "$schema": "https://opensource.adobe.com/spectrum-tokens/schemas/token-types/alias.json", + "value": "calc({component-pill-edge-to-text-100} - {button-border-width})" + }, + "button-padding-label-to-icon": { + "component": "button", + "$schema": "https://opensource.adobe.com/spectrum-tokens/schemas/token-types/alias.json", + "value": "{text-to-visual-100}" + }, + "button-top-to-text": { + "component": "button", + "$schema": "https://opensource.adobe.com/spectrum-tokens/schemas/token-types/alias.json", + "value": "{button-top-to-text-medium}" + }, + "button-bottom-to-text": { + "component": "button", + "$schema": "https://opensource.adobe.com/spectrum-tokens/schemas/token-types/alias.json", + "value": "{button-bottom-to-text-medium}" + }, + "button-top-to-icon": { + "component": "button", + "$schema": "https://opensource.adobe.com/spectrum-tokens/schemas/token-types/alias.json", + "value": "{component-top-to-workflow-icon-100}" + }, + "button-intended-icon-size": { + "component": "button", + "$schema": "https://opensource.adobe.com/spectrum-tokens/schemas/token-types/alias.json", + "value": "{workflow-icon-size-100}" + }, + "downstate-perspective": { + "component": "button", + "$schema": "https://opensource.adobe.com/spectrum-tokens/schemas/token-types/alias.json", + "value": "max({downstate-height}, {downstate-width} * {component-size-width-ratio-down})" + }, + "button-border-radius-icon-only": { + "component": "button", + "$schema": "https://opensource.adobe.com/spectrum-tokens/schemas/token-types/alias.json", + "value": "{corner-radius-full}" + }, + "button-border-color-default": { + "component": "button", + "$schema": "https://opensource.adobe.com/spectrum-tokens/schemas/token-types/alias.json", + "value": "transparent", + "sets": { + "whcm": { + "$schema": "https://opensource.adobe.com/spectrum-tokens/schemas/token-types/color.json", + "value": "ButtonBorder" + } + } + }, + "button-border-color-hover": { + "component": "button", + "$schema": "https://opensource.adobe.com/spectrum-tokens/schemas/token-types/alias.json", + "value": "transparent", + "sets": { + "whcm": { + "$schema": "https://opensource.adobe.com/spectrum-tokens/schemas/token-types/color.json", + "value": "ButtonBorder" + } + } + }, + "button-border-color-down": { + "component": "button", + "$schema": "https://opensource.adobe.com/spectrum-tokens/schemas/token-types/alias.json", + "value": "transparent", + "sets": { + "whcm": { + "$schema": "https://opensource.adobe.com/spectrum-tokens/schemas/token-types/color.json", + "value": "ButtonBorder" + } + } + }, + "button-border-color-focus": { + "component": "button", + "$schema": "https://opensource.adobe.com/spectrum-tokens/schemas/token-types/alias.json", + "value": "transparent", + "sets": { + "whcm": { + "$schema": "https://opensource.adobe.com/spectrum-tokens/schemas/token-types/color.json", + "value": "ButtonBorder" + } + } + }, + "button-content-color-default": { + "component": "button", + "$schema": "https://opensource.adobe.com/spectrum-tokens/schemas/token-types/alias.json", + "value": "{white}" + }, + "button-content-color-hover": { + "component": "button", + "$schema": "https://opensource.adobe.com/spectrum-tokens/schemas/token-types/alias.json", + "value": "{white}" + }, + "button-content-color-down": { + "component": "button", + "$schema": "https://opensource.adobe.com/spectrum-tokens/schemas/token-types/alias.json", + "value": "{white}" + }, + "button-content-color-focus": { + "component": "button", + "$schema": "https://opensource.adobe.com/spectrum-tokens/schemas/token-types/alias.json", + "value": "{white}" + }, + "button-background-color-disabled": { + "component": "button", + "$schema": "https://opensource.adobe.com/spectrum-tokens/schemas/token-types/alias.json", + "value": "{disabled-background-color}", + "sets": { + "whcm": { + "$schema": "https://opensource.adobe.com/spectrum-tokens/schemas/token-types/color.json", + "value": "ButtonFace" + } + } + }, + "button-border-color-disabled": { + "component": "button", + "$schema": "https://opensource.adobe.com/spectrum-tokens/schemas/token-types/alias.json", + "value": "transparent", + "sets": { + "whcm": { + "$schema": "https://opensource.adobe.com/spectrum-tokens/schemas/token-types/color.json", + "value": "GrayText" + } + } + }, + "button-content-color-disabled": { + "component": "button", + "$schema": "https://opensource.adobe.com/spectrum-tokens/schemas/token-types/alias.json", + "value": "{disabled-content-color}", + "sets": { + "whcm": { + "$schema": "https://opensource.adobe.com/spectrum-tokens/schemas/token-types/color.json", + "value": "GrayText" + } + } + }, + "button-background-color-default": { + "component": "button", + "$schema": "https://opensource.adobe.com/spectrum-tokens/schemas/token-types/alias.json", + "value": "{accent-background-color-default}" + }, + "button-background-color-hover": { + "component": "button", + "$schema": "https://opensource.adobe.com/spectrum-tokens/schemas/token-types/alias.json", + "value": "{accent-background-color-hover}" + }, + "button-background-color-down": { + "component": "button", + "$schema": "https://opensource.adobe.com/spectrum-tokens/schemas/token-types/alias.json", + "value": "{accent-background-color-down}" + }, + "button-background-color-focus": { + "component": "button", + "$schema": "https://opensource.adobe.com/spectrum-tokens/schemas/token-types/alias.json", + "value": "{accent-background-color-key-focus}" + }, + "button-focus-ring-color": { + "component": "button", + "$schema": "https://opensource.adobe.com/spectrum-tokens/schemas/token-types/alias.json", + "value": "{focus-indicator-color}", + "sets": { + "whcm": { + "$schema": "https://opensource.adobe.com/spectrum-tokens/schemas/token-types/color.json", + "value": "ButtonText" + } + } + } +} diff --git a/components/buttongroup/tokens.json b/components/buttongroup/tokens.json new file mode 100644 index 00000000000..f4e31a6cac8 --- /dev/null +++ b/components/buttongroup/tokens.json @@ -0,0 +1,37 @@ +{ + "buttongroup-spacing": { + "component": "button-group", + "$schema": "https://opensource.adobe.com/spectrum-tokens/schemas/token-types/alias.json", + "value": "{spacing-300}" + }, + "buttongroup-display": { + "component": "button-group", + "$schema": "https://opensource.adobe.com/spectrum-tokens/schemas/token-types/alias.json", + "value": "flex" + }, + "buttongroup-flex-direction": { + "component": "button-group", + "$schema": "https://opensource.adobe.com/spectrum-tokens/schemas/token-types/alias.json", + "value": "row" + }, + "buttongroup-justify-content": { + "component": "button-group", + "$schema": "https://opensource.adobe.com/spectrum-tokens/schemas/token-types/alias.json", + "value": "normal" + }, + "buttongroup-spacing-small": { + "component": "button-group", + "$schema": "https://opensource.adobe.com/spectrum-tokens/schemas/token-types/alias.json", + "value": "{spacing-200}" + }, + "buttongroup-display-vertical": { + "component": "button-group", + "$schema": "https://opensource.adobe.com/spectrum-tokens/schemas/token-types/alias.json", + "value": "inline-flex" + }, + "buttongroup-flex-direction-vertical": { + "component": "button-group", + "$schema": "https://opensource.adobe.com/spectrum-tokens/schemas/token-types/alias.json", + "value": "column" + } +} diff --git a/components/calendar/dist/metadata.json b/components/calendar/dist/metadata.json index c4901c2be46..999e1f91e5a 100644 --- a/components/calendar/dist/metadata.json +++ b/components/calendar/dist/metadata.json @@ -166,7 +166,7 @@ "--spectrum-font-size-100", "--spectrum-font-size-300", "--spectrum-font-size-50", - "--spectrum-gray-100-rgb", + "--spectrum-gray-100", "--spectrum-gray-800", "--spectrum-logical-rotation", "--spectrum-neutral-content-color-default", diff --git a/components/calendar/index.css b/components/calendar/index.css index 68b3c73e049..6d621068021 100644 --- a/components/calendar/index.css +++ b/components/calendar/index.css @@ -12,7 +12,7 @@ */ .spectrum-Calendar { - --spectrum-calendar-day-background-color-selected-disabled: rgba(var(--spectrum-gray-100-rgb), 0.4); + --spectrum-calendar-day-background-color-selected-disabled: color-mix(in sRGB, var(--spectrum-gray-100) 40%, transparent); --spectrum-calendar-day-width: var(--mod-calendar-day-width, var(--spectrum-component-height-100)); --spectrum-calendar-day-height: var(--mod-calendar-day-height, var(--spectrum-component-height-100)); @@ -48,7 +48,7 @@ --spectrum-calendar-day-background: var(--mod-calendar-day-background-color, transparent); --spectrum-calendar-day-background-selected: var(--highcontrast-calendar-day-background-selected, var(--mod-calendar-day-background-color-selected, var(--spectrum-calendar-day-background-color-selected))); --spectrum-calendar-day-background-selected-hover: var(--highcontrast-calendar-day-background-selected-hover, var(--mod-calendar-day-background-color-selected-hover, var(--spectrum-calendar-day-background-color-selected-hover))); - --spectrum-calendar-day-background-color-selected-disabled: rgba(var(--spectrum-gray-100-rgb), 0.4); + --spectrum-calendar-day-background-color-selected-disabled: color-mix(in sRGB, var(--spectrum-gray-100) 40%, transparent); --spectrum-calendar-day-background-cap-selected: var(--highcontrast-calendar-day-background-cap-selected, var(--mod-calendar-day-background-color-cap-selected, var(--spectrum-calendar-day-background-color-cap-selected))); --spectrum-calendar-day-background-hover: var(--highcontrast-calendar-day-background-hover, var(--mod-calendar-day-background-color-hover, var(--spectrum-calendar-day-background-color-hover))); --spectrum-calendar-day-background-focus: var(--highcontrast-calendar-day-background-focus, var(--mod-calendar-day-background-color-key-focus, var(--spectrum-calendar-day-background-color-key-focus))); diff --git a/components/calendar/tokens.json b/components/calendar/tokens.json new file mode 100644 index 00000000000..363c99b8035 --- /dev/null +++ b/components/calendar/tokens.json @@ -0,0 +1,408 @@ +{ + "calendar-day-background-color-cap-selected": { + "component": "calendar", + "$schema": "https://opensource.adobe.com/spectrum-tokens/schemas/token-types/color-set.json", + "sets": { + "dark": { + "$schema": "https://opensource.adobe.com/spectrum-tokens/schemas/token-types/color.json", + "value": "color-mix(in sRGB, {blue-800} 25%, transparent)" + }, + "light": { + "$schema": "https://opensource.adobe.com/spectrum-tokens/schemas/token-types/color.json", + "value": "color-mix(in sRGB, {blue-900} 20%, transparent)" + }, + "whcm": { + "$schema": "https://opensource.adobe.com/spectrum-tokens/schemas/token-types/color.json", + "value": "Highlight" + } + } + }, + "calendar-day-background-color-down": { + "component": "calendar", + "$schema": "https://opensource.adobe.com/spectrum-tokens/schemas/token-types/color-set.json", + "sets": { + "dark": { + "$schema": "https://opensource.adobe.com/spectrum-tokens/schemas/token-types/alias.json", + "value": "{transparent-white-200}" + }, + "light": { + "$schema": "https://opensource.adobe.com/spectrum-tokens/schemas/token-types/alias.json", + "value": "{transparent-black-200}" + }, + "whcm": { + "$schema": "https://opensource.adobe.com/spectrum-tokens/schemas/token-types/color.json", + "value": "ButtonFace" + } + } + }, + "calendar-day-background-color-hover": { + "component": "calendar", + "$schema": "https://opensource.adobe.com/spectrum-tokens/schemas/token-types/color-set.json", + "sets": { + "dark": { + "$schema": "https://opensource.adobe.com/spectrum-tokens/schemas/token-types/color.json", + "value": "color-mix(in sRGB, {white} 7%, transparent)" + }, + "light": { + "$schema": "https://opensource.adobe.com/spectrum-tokens/schemas/token-types/color.json", + "value": "color-mix(in sRGB, {black} 6%, transparent)" + }, + "whcm": { + "$schema": "https://opensource.adobe.com/spectrum-tokens/schemas/token-types/color.json", + "value": "Highlight" + } + } + }, + "calendar-day-background-color-key-focus": { + "component": "calendar", + "$schema": "https://opensource.adobe.com/spectrum-tokens/schemas/token-types/color-set.json", + "sets": { + "dark": { + "$schema": "https://opensource.adobe.com/spectrum-tokens/schemas/token-types/color.json", + "value": "color-mix(in sRGB, {white} 7%, transparent)" + }, + "light": { + "$schema": "https://opensource.adobe.com/spectrum-tokens/schemas/token-types/color.json", + "value": "color-mix(in sRGB, {black} 6%, transparent)" + }, + "whcm": { + "$schema": "https://opensource.adobe.com/spectrum-tokens/schemas/token-types/color.json", + "value": "ButtonFace" + } + } + }, + "calendar-day-background-color-selected": { + "component": "calendar", + "$schema": "https://opensource.adobe.com/spectrum-tokens/schemas/token-types/color-set.json", + "sets": { + "dark": { + "$schema": "https://opensource.adobe.com/spectrum-tokens/schemas/token-types/color.json", + "value": "color-mix(in sRGB, {blue-800} 15%, transparent)" + }, + "light": { + "$schema": "https://opensource.adobe.com/spectrum-tokens/schemas/token-types/color.json", + "value": "color-mix(in sRGB, {blue-900} 10%, transparent)" + }, + "whcm": { + "$schema": "https://opensource.adobe.com/spectrum-tokens/schemas/token-types/color.json", + "value": "Highlight" + } + } + }, + "calendar-day-background-color-selected-hover": { + "component": "calendar", + "$schema": "https://opensource.adobe.com/spectrum-tokens/schemas/token-types/color-set.json", + "sets": { + "dark": { + "$schema": "https://opensource.adobe.com/spectrum-tokens/schemas/token-types/color.json", + "value": "color-mix(in sRGB, {blue-800} 25%, transparent)" + }, + "light": { + "$schema": "https://opensource.adobe.com/spectrum-tokens/schemas/token-types/color.json", + "value": "color-mix(in sRGB, {blue-900} 20%, transparent)" + }, + "whcm": { + "$schema": "https://opensource.adobe.com/spectrum-tokens/schemas/token-types/color.json", + "value": "Highlight" + } + } + }, + "calendar-day-border-color-key-focus": { + "component": "calendar", + "$schema": "https://opensource.adobe.com/spectrum-tokens/schemas/token-types/color-set.json", + "sets": { + "dark": { + "$schema": "https://opensource.adobe.com/spectrum-tokens/schemas/token-types/alias.json", + "value": "{blue-700}" + }, + "light": { + "$schema": "https://opensource.adobe.com/spectrum-tokens/schemas/token-types/alias.json", + "value": "{blue-800}" + }, + "whcm": { + "$schema": "https://opensource.adobe.com/spectrum-tokens/schemas/token-types/color.json", + "value": "ButtonText" + } + } + }, + "calendar-day-today-background-color-selected-hover": { + "component": "calendar", + "$schema": "https://opensource.adobe.com/spectrum-tokens/schemas/token-types/color-set.json", + "sets": { + "dark": { + "$schema": "https://opensource.adobe.com/spectrum-tokens/schemas/token-types/color.json", + "value": "color-mix(in sRGB, {blue-800} 25%, transparent)" + }, + "light": { + "$schema": "https://opensource.adobe.com/spectrum-tokens/schemas/token-types/color.json", + "value": "color-mix(in sRGB, {blue-900} 20%, transparent)" + }, + "whcm": { + "$schema": "https://opensource.adobe.com/spectrum-tokens/schemas/token-types/color.json", + "value": "Highlight" + } + } + }, + "calendar-day-background-color-selected-disabled": { + "component": "calendar", + "$schema": "https://opensource.adobe.com/spectrum-tokens/schemas/token-types/alias.json", + "value": "color-mix(in sRGB, {gray-100} 40%, transparent)" + }, + "calendar-day-width": { + "component": "calendar", + "$schema": "https://opensource.adobe.com/spectrum-tokens/schemas/token-types/alias.json", + "value": "{component-height-100}" + }, + "calendar-day-height": { + "component": "calendar", + "$schema": "https://opensource.adobe.com/spectrum-tokens/schemas/token-types/alias.json", + "value": "{component-height-100}" + }, + "calendar-day-border-size": { + "component": "calendar", + "$schema": "https://opensource.adobe.com/spectrum-tokens/schemas/token-types/alias.json", + "value": "{border-width-200}" + }, + "calendar-day-padding": { + "component": "calendar", + "$schema": "https://opensource.adobe.com/spectrum-tokens/schemas/token-types/dimension.json", + "value": "4px" + }, + "calendar-border-radius-reset": { + "component": "calendar", + "$schema": "https://opensource.adobe.com/spectrum-tokens/schemas/token-types/dimension.json", + "value": "0" + }, + "calendar-border-width-reset": { + "component": "calendar", + "$schema": "https://opensource.adobe.com/spectrum-tokens/schemas/token-types/dimension.json", + "value": "0" + }, + "calendar-margin-y": { + "component": "calendar", + "$schema": "https://opensource.adobe.com/spectrum-tokens/schemas/token-types/dimension.json", + "value": "24px" + }, + "calendar-margin-x": { + "component": "calendar", + "$schema": "https://opensource.adobe.com/spectrum-tokens/schemas/token-types/dimension.json", + "value": "32px" + }, + "calendar-width": { + "component": "calendar", + "$schema": "https://opensource.adobe.com/spectrum-tokens/schemas/token-types/alias.json", + "value": "calc(({calendar-day-width} + {calendar-day-padding} * 2) * 7)" + }, + "calendar-title-text-letter-spacing": { + "component": "calendar", + "$schema": "https://opensource.adobe.com/spectrum-tokens/schemas/token-types/dimension.json", + "value": "0.06em" + }, + "calendar-title-height": { + "component": "calendar", + "$schema": "https://opensource.adobe.com/spectrum-tokens/schemas/token-types/dimension.json", + "value": "32px" + }, + "calendar-title-text-size": { + "component": "calendar", + "$schema": "https://opensource.adobe.com/spectrum-tokens/schemas/token-types/alias.json", + "value": "{font-size-300}" + }, + "calendar-title-text-font-weight": { + "component": "calendar", + "$schema": "https://opensource.adobe.com/spectrum-tokens/schemas/token-types/alias.json", + "value": "{bold-font-weight}" + }, + "calendar-title-text-color": { + "component": "calendar", + "$schema": "https://opensource.adobe.com/spectrum-tokens/schemas/token-types/alias.json", + "value": "{neutral-subdued-content-color-default}", + "sets": { + "whcm": { + "$schema": "https://opensource.adobe.com/spectrum-tokens/schemas/token-types/color.json", + "value": "CanvasText" + } + } + }, + "calendar-heading-text-size": { + "component": "calendar", + "$schema": "https://opensource.adobe.com/spectrum-tokens/schemas/token-types/alias.json", + "value": "{font-size-50}" + }, + "calendar-button-icon-color": { + "component": "calendar", + "$schema": "https://opensource.adobe.com/spectrum-tokens/schemas/token-types/alias.json", + "value": "{neutral-subdued-content-color-default}" + }, + "logical-rotation": { + "component": "calendar", + "$schema": "https://opensource.adobe.com/spectrum-tokens/schemas/token-types/alias.json", + "value": "matrix(-1, 0, 0, 1, 0, 0)" + }, + "calendar-day-background": { + "component": "calendar", + "$schema": "https://opensource.adobe.com/spectrum-tokens/schemas/token-types/alias.json", + "value": "transparent" + }, + "calendar-day-background-selected": { + "component": "calendar", + "$schema": "https://opensource.adobe.com/spectrum-tokens/schemas/token-types/alias.json", + "value": "{calendar-day-background-color-selected}" + }, + "calendar-day-background-selected-hover": { + "component": "calendar", + "$schema": "https://opensource.adobe.com/spectrum-tokens/schemas/token-types/alias.json", + "value": "{calendar-day-background-color-selected-hover}" + }, + "calendar-day-background-cap-selected": { + "component": "calendar", + "$schema": "https://opensource.adobe.com/spectrum-tokens/schemas/token-types/alias.json", + "value": "{calendar-day-background-color-cap-selected}" + }, + "calendar-day-background-hover": { + "component": "calendar", + "$schema": "https://opensource.adobe.com/spectrum-tokens/schemas/token-types/alias.json", + "value": "{calendar-day-background-color-hover}" + }, + "calendar-day-background-focus": { + "component": "calendar", + "$schema": "https://opensource.adobe.com/spectrum-tokens/schemas/token-types/alias.json", + "value": "{calendar-day-background-color-key-focus}" + }, + "calendar-day-background-down": { + "component": "calendar", + "$schema": "https://opensource.adobe.com/spectrum-tokens/schemas/token-types/alias.json", + "value": "{calendar-day-background-color-down}" + }, + "calendar-day-background-layer-color": { + "component": "calendar", + "$schema": "https://opensource.adobe.com/spectrum-tokens/schemas/token-types/alias.json", + "value": "transparent" + }, + "calendar-day-border-color": { + "component": "calendar", + "$schema": "https://opensource.adobe.com/spectrum-tokens/schemas/token-types/alias.json", + "value": "transparent" + }, + "calendar-day-border-color-focus": { + "component": "calendar", + "$schema": "https://opensource.adobe.com/spectrum-tokens/schemas/token-types/alias.json", + "value": "{calendar-day-border-color-key-focus}" + }, + "calendar-day-text-size": { + "component": "calendar", + "$schema": "https://opensource.adobe.com/spectrum-tokens/schemas/token-types/alias.json", + "value": "{font-size-100}" + }, + "calendar-day-text-font-weight": { + "component": "calendar", + "$schema": "https://opensource.adobe.com/spectrum-tokens/schemas/token-types/alias.json", + "value": "{regular-font-weight}" + }, + "calendar-day-text-font-weight-selected": { + "component": "calendar", + "$schema": "https://opensource.adobe.com/spectrum-tokens/schemas/token-types/alias.json", + "value": "{bold-font-weight}" + }, + "calendar-day-text-font-weight-cap-selected": { + "component": "calendar", + "$schema": "https://opensource.adobe.com/spectrum-tokens/schemas/token-types/alias.json", + "value": "{bold-font-weight}" + }, + "calendar-day-today-background-selected-hover": { + "component": "calendar", + "$schema": "https://opensource.adobe.com/spectrum-tokens/schemas/token-types/alias.json", + "value": "{calendar-day-today-background-color-selected-hover}" + }, + "calendar-day-today-text-font-weight": { + "component": "calendar", + "$schema": "https://opensource.adobe.com/spectrum-tokens/schemas/token-types/alias.json", + "value": "{bold-font-weight}" + }, + "calendar-day-today-text-color": { + "component": "calendar", + "$schema": "https://opensource.adobe.com/spectrum-tokens/schemas/token-types/alias.json", + "value": "{neutral-content-color-default}", + "sets": { + "whcm": { + "$schema": "https://opensource.adobe.com/spectrum-tokens/schemas/token-types/color.json", + "value": "ButtonText" + } + } + }, + "calendar-day-today-border-color": { + "component": "calendar", + "$schema": "https://opensource.adobe.com/spectrum-tokens/schemas/token-types/alias.json", + "value": "{gray-800}", + "sets": { + "whcm": { + "$schema": "https://opensource.adobe.com/spectrum-tokens/schemas/token-types/color.json", + "value": "ButtonText" + } + } + }, + "calendar-day-text-color": { + "component": "calendar", + "$schema": "https://opensource.adobe.com/spectrum-tokens/schemas/token-types/alias.json", + "value": "{neutral-subdued-content-color-default}" + }, + "calendar-day-text-color-selected": { + "component": "calendar", + "$schema": "https://opensource.adobe.com/spectrum-tokens/schemas/token-types/alias.json", + "value": "{neutral-content-color-down}", + "sets": { + "whcm": { + "$schema": "https://opensource.adobe.com/spectrum-tokens/schemas/token-types/color.json", + "value": "HighlightText" + } + } + }, + "calendar-day-text-color-cap-selected": { + "component": "calendar", + "$schema": "https://opensource.adobe.com/spectrum-tokens/schemas/token-types/alias.json", + "value": "{neutral-content-color-down}", + "sets": { + "whcm": { + "$schema": "https://opensource.adobe.com/spectrum-tokens/schemas/token-types/color.json", + "value": "HighlightText" + } + } + }, + "calendar-day-text-color-hover": { + "component": "calendar", + "$schema": "https://opensource.adobe.com/spectrum-tokens/schemas/token-types/alias.json", + "value": "{neutral-content-color-hover}", + "sets": { + "whcm": { + "$schema": "https://opensource.adobe.com/spectrum-tokens/schemas/token-types/color.json", + "value": "HighlightText" + } + } + }, + "calendar-day-text-color-key-focus": { + "component": "calendar", + "$schema": "https://opensource.adobe.com/spectrum-tokens/schemas/token-types/alias.json", + "value": "{neutral-content-color-key-focus}", + "sets": { + "whcm": { + "$schema": "https://opensource.adobe.com/spectrum-tokens/schemas/token-types/color.json", + "value": "ButtonText" + } + } + }, + "calendar-day-text-color-disabled": { + "component": "calendar", + "$schema": "https://opensource.adobe.com/spectrum-tokens/schemas/token-types/alias.json", + "value": "{disabled-content-color}" + }, + "calendar-day-today-border-color-disabled": { + "component": "calendar", + "$schema": "https://opensource.adobe.com/spectrum-tokens/schemas/token-types/alias.json", + "value": "{disabled-border-color}" + }, + "calendar-day-text-size-han": { + "component": "calendar", + "$schema": "https://opensource.adobe.com/spectrum-tokens/schemas/token-types/alias.json", + "value": "{font-size-50}" + } +} diff --git a/components/card/dist/metadata.json b/components/card/dist/metadata.json index 8fc5a6b28df..910bd984200 100644 --- a/components/card/dist/metadata.json +++ b/components/card/dist/metadata.json @@ -101,7 +101,7 @@ "--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-color", "--mod-card-selected-background-opacity", "--mod-card-subtitle-padding-right", "--mod-card-title-font-color", @@ -148,7 +148,7 @@ "--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-color", "--spectrum-card-selected-background-opacity", "--spectrum-card-selection-background-color", "--spectrum-card-selection-background-size", diff --git a/components/card/index.css b/components/card/index.css index 8eeedd3c1b8..32b61ff8143 100644 --- a/components/card/index.css +++ b/components/card/index.css @@ -143,7 +143,6 @@ --mod-card-border-color: var(--spectrum-card-border-color-selected); &::before { - /* @deprecated --mod-card-selected-background-color-rgb. Use --mod-card-background-color-selected instead. */ background-color: var(--mod-card-background-color-selected, var(--spectrum-card-selection-background-color)); } } @@ -378,7 +377,7 @@ } &.is-selected .spectrum-Card-preview::before { - background-color: rgba(var(--mod-card-selected-background-color-rgb, var(--spectrum-card-selected-background-color-rgb)), var(--mod-card-selected-background-opacity, var(--spectrum-card-selected-background-opacity))); + background-color: var(--mod-card-selected-background-color, color-mix(in sRGB, var(--spectrum-card-selected-background-color) var(--spectrum-card-selected-background-opacity), transparent)); } .spectrum-Card-body { diff --git a/components/card/tokens.json b/components/card/tokens.json new file mode 100644 index 00000000000..312ada09815 --- /dev/null +++ b/components/card/tokens.json @@ -0,0 +1,221 @@ +{ + "card-selected-background-color": { + "component": "card", + "$schema": "https://opensource.adobe.com/spectrum-tokens/schemas/token-types/color-set.json", + "sets": { + "dark": { + "$schema": "https://opensource.adobe.com/spectrum-tokens/schemas/token-types/alias.json", + "value": "{blue-500}" + }, + "light": { + "$schema": "https://opensource.adobe.com/spectrum-tokens/schemas/token-types/alias.json", + "value": "{blue-900}" + } + } + }, + "card-border-color": { + "component": "card", + "$schema": "https://opensource.adobe.com/spectrum-tokens/schemas/token-types/alias.json", + "value": "{gray-100}" + }, + "card-border-color-hover": { + "component": "card", + "$schema": "https://opensource.adobe.com/spectrum-tokens/schemas/token-types/alias.json", + "value": "{gray-200}" + }, + "card-border-color-selected": { + "component": "card", + "$schema": "https://opensource.adobe.com/spectrum-tokens/schemas/token-types/alias.json", + "value": "{blue-700}" + }, + "card-divider-color": { + "component": "card", + "$schema": "https://opensource.adobe.com/spectrum-tokens/schemas/token-types/alias.json", + "value": "{gray-200}" + }, + "card-preview-background-color": { + "component": "card", + "$schema": "https://opensource.adobe.com/spectrum-tokens/schemas/token-types/alias.json", + "value": "{gray-100}" + }, + "card-preview-background-color-hover": { + "component": "card", + "$schema": "https://opensource.adobe.com/spectrum-tokens/schemas/token-types/alias.json", + "value": "{gray-200}" + }, + "card-background-color": { + "component": "card", + "$schema": "https://opensource.adobe.com/spectrum-tokens/schemas/token-types/alias.json", + "value": "{background-layer-2-color}" + }, + "card-body-spacing": { + "component": "card", + "$schema": "https://opensource.adobe.com/spectrum-tokens/schemas/token-types/alias.json", + "value": "{spacing-400}" + }, + "card-body-padding-block-start": { + "component": "card", + "$schema": "https://opensource.adobe.com/spectrum-tokens/schemas/token-types/alias.json", + "value": "{spacing-300}" + }, + "card-title-padding-right": { + "component": "card", + "$schema": "https://opensource.adobe.com/spectrum-tokens/schemas/token-types/alias.json", + "value": "{spacing-400}" + }, + "card-content-margin-top": { + "component": "card", + "$schema": "https://opensource.adobe.com/spectrum-tokens/schemas/token-types/alias.json", + "value": "{spacing-100}" + }, + "card-content-margin-bottom": { + "component": "card", + "$schema": "https://opensource.adobe.com/spectrum-tokens/schemas/token-types/alias.json", + "value": "{spacing-300}" + }, + "card-footer-padding-top": { + "component": "card", + "$schema": "https://opensource.adobe.com/spectrum-tokens/schemas/token-types/alias.json", + "value": "{spacing-100}" + }, + "card-subtitle-padding-right": { + "component": "card", + "$schema": "https://opensource.adobe.com/spectrum-tokens/schemas/token-types/alias.json", + "value": "{spacing-100}" + }, + "card-border-width": { + "component": "card", + "$schema": "https://opensource.adobe.com/spectrum-tokens/schemas/token-types/alias.json", + "value": "{border-width-100}" + }, + "card-corner-radius": { + "component": "card", + "$schema": "https://opensource.adobe.com/spectrum-tokens/schemas/token-types/alias.json", + "value": "{corner-radius-100}" + }, + "card-title-font-family": { + "component": "card", + "$schema": "https://opensource.adobe.com/spectrum-tokens/schemas/token-types/alias.json", + "value": "{sans-font-family-stack}" + }, + "card-title-font-size": { + "component": "card", + "$schema": "https://opensource.adobe.com/spectrum-tokens/schemas/token-types/alias.json", + "value": "{heading-size-xxs}" + }, + "card-title-font-weight": { + "component": "card", + "$schema": "https://opensource.adobe.com/spectrum-tokens/schemas/token-types/alias.json", + "value": "{heading-sans-serif-font-weight}" + }, + "card-title-font-style": { + "component": "card", + "$schema": "https://opensource.adobe.com/spectrum-tokens/schemas/token-types/alias.json", + "value": "{heading-sans-serif-font-style}" + }, + "card-title-line-height": { + "component": "card", + "$schema": "https://opensource.adobe.com/spectrum-tokens/schemas/token-types/alias.json", + "value": "{heading-line-height}" + }, + "card-title-font-color": { + "component": "card", + "$schema": "https://opensource.adobe.com/spectrum-tokens/schemas/token-types/alias.json", + "value": "{heading-color}" + }, + "card-body-font-family": { + "component": "card", + "$schema": "https://opensource.adobe.com/spectrum-tokens/schemas/token-types/alias.json", + "value": "{sans-font-family-stack}" + }, + "card-body-font-size": { + "component": "card", + "$schema": "https://opensource.adobe.com/spectrum-tokens/schemas/token-types/alias.json", + "value": "{body-size-s}" + }, + "card-body-font-weight": { + "component": "card", + "$schema": "https://opensource.adobe.com/spectrum-tokens/schemas/token-types/alias.json", + "value": "{body-sans-serif-font-weight}" + }, + "card-body-font-style": { + "component": "card", + "$schema": "https://opensource.adobe.com/spectrum-tokens/schemas/token-types/alias.json", + "value": "{body-sans-serif-font-style}" + }, + "card-body-line-height": { + "component": "card", + "$schema": "https://opensource.adobe.com/spectrum-tokens/schemas/token-types/alias.json", + "value": "{body-line-height}" + }, + "card-body-font-color": { + "component": "card", + "$schema": "https://opensource.adobe.com/spectrum-tokens/schemas/token-types/alias.json", + "value": "{body-color}" + }, + "card-actions-spacing": { + "component": "card", + "$schema": "https://opensource.adobe.com/spectrum-tokens/schemas/token-types/alias.json", + "value": "{spacing-300}" + }, + "card-actions-size": { + "component": "card", + "$schema": "https://opensource.adobe.com/spectrum-tokens/schemas/token-types/alias.json", + "value": "{card-selection-background-size}" + }, + "card-actions-border-radius": { + "component": "card", + "$schema": "https://opensource.adobe.com/spectrum-tokens/schemas/token-types/alias.json", + "value": "{corner-radius-100}" + }, + "card-actions-drop-shadow-color": { + "component": "card", + "$schema": "https://opensource.adobe.com/spectrum-tokens/schemas/token-types/alias.json", + "value": "{drop-shadow-color}" + }, + "card-actions-drop-shadow-x": { + "component": "card", + "$schema": "https://opensource.adobe.com/spectrum-tokens/schemas/token-types/alias.json", + "value": "{drop-shadow-x}" + }, + "card-actions-drop-shadow-y": { + "component": "card", + "$schema": "https://opensource.adobe.com/spectrum-tokens/schemas/token-types/alias.json", + "value": "{drop-shadow-y}" + }, + "card-actions-drop-shadow-blur": { + "component": "card", + "$schema": "https://opensource.adobe.com/spectrum-tokens/schemas/token-types/alias.json", + "value": "{drop-shadow-blur}" + }, + "card-focus-indicator-color": { + "component": "card", + "$schema": "https://opensource.adobe.com/spectrum-tokens/schemas/token-types/alias.json", + "value": "{focus-indicator-color}" + }, + "card-focus-indicator-width": { + "component": "card", + "$schema": "https://opensource.adobe.com/spectrum-tokens/schemas/token-types/alias.json", + "value": "{focus-indicator-thickness}" + }, + "card-selected-background-opacity": { + "component": "card", + "$schema": "https://opensource.adobe.com/spectrum-tokens/schemas/token-types/dimension.json", + "value": "0.1" + }, + "card-preview-border-width-selected": { + "component": "card", + "$schema": "https://opensource.adobe.com/spectrum-tokens/schemas/token-types/alias.json", + "value": "{border-width-100}" + }, + "card-horizontal-body-padding": { + "component": "card", + "$schema": "https://opensource.adobe.com/spectrum-tokens/schemas/token-types/alias.json", + "value": "{spacing-300}" + }, + "card-horizontal-preview-padding": { + "component": "card", + "$schema": "https://opensource.adobe.com/spectrum-tokens/schemas/token-types/alias.json", + "value": "{spacing-200}" + } +} diff --git a/components/checkbox/tokens.json b/components/checkbox/tokens.json new file mode 100644 index 00000000000..d7683876e71 --- /dev/null +++ b/components/checkbox/tokens.json @@ -0,0 +1,280 @@ +{ + "checkbox-checkmark-color": { + "component": "checkbox", + "$schema": "https://opensource.adobe.com/spectrum-tokens/schemas/token-types/alias.json", + "value": "{gray-25}" + }, + "checkbox-background-color": { + "component": "checkbox", + "$schema": "https://opensource.adobe.com/spectrum-tokens/schemas/token-types/alias.json", + "value": "{gray-25}", + "sets": { + "whcm": { + "$schema": "https://opensource.adobe.com/spectrum-tokens/schemas/token-types/color.json", + "value": "Canvas" + } + } + }, + "checkbox-content-color-default": { + "component": "checkbox", + "$schema": "https://opensource.adobe.com/spectrum-tokens/schemas/token-types/alias.json", + "value": "{neutral-content-color-default}", + "sets": { + "whcm": { + "$schema": "https://opensource.adobe.com/spectrum-tokens/schemas/token-types/color.json", + "value": "CanvasText" + } + } + }, + "checkbox-content-color-hover": { + "component": "checkbox", + "$schema": "https://opensource.adobe.com/spectrum-tokens/schemas/token-types/alias.json", + "value": "{neutral-content-color-hover}", + "sets": { + "whcm": { + "$schema": "https://opensource.adobe.com/spectrum-tokens/schemas/token-types/color.json", + "value": "CanvasText" + } + } + }, + "checkbox-content-color-down": { + "component": "checkbox", + "$schema": "https://opensource.adobe.com/spectrum-tokens/schemas/token-types/alias.json", + "value": "{neutral-content-color-down}", + "sets": { + "whcm": { + "$schema": "https://opensource.adobe.com/spectrum-tokens/schemas/token-types/color.json", + "value": "CanvasText" + } + } + }, + "checkbox-content-color-focus": { + "component": "checkbox", + "$schema": "https://opensource.adobe.com/spectrum-tokens/schemas/token-types/alias.json", + "value": "{neutral-content-color-key-focus}", + "sets": { + "whcm": { + "$schema": "https://opensource.adobe.com/spectrum-tokens/schemas/token-types/color.json", + "value": "CanvasText" + } + } + }, + "checkbox-control-color-default": { + "component": "checkbox", + "$schema": "https://opensource.adobe.com/spectrum-tokens/schemas/token-types/alias.json", + "value": "{neutral-content-color-default}", + "sets": { + "whcm": { + "$schema": "https://opensource.adobe.com/spectrum-tokens/schemas/token-types/color.json", + "value": "ButtonText" + } + } + }, + "checkbox-control-color-hover": { + "component": "checkbox", + "$schema": "https://opensource.adobe.com/spectrum-tokens/schemas/token-types/alias.json", + "value": "{neutral-content-color-hover}" + }, + "checkbox-control-color-down": { + "component": "checkbox", + "$schema": "https://opensource.adobe.com/spectrum-tokens/schemas/token-types/alias.json", + "value": "{neutral-content-color-down}" + }, + "checkbox-control-color-focus": { + "component": "checkbox", + "$schema": "https://opensource.adobe.com/spectrum-tokens/schemas/token-types/alias.json", + "value": "{neutral-content-color-key-focus}", + "sets": { + "whcm": { + "$schema": "https://opensource.adobe.com/spectrum-tokens/schemas/token-types/color.json", + "value": "Highlight" + } + } + }, + "checkbox-focus-indicator-color": { + "component": "checkbox", + "$schema": "https://opensource.adobe.com/spectrum-tokens/schemas/token-types/alias.json", + "value": "{focus-indicator-color}", + "sets": { + "whcm": { + "$schema": "https://opensource.adobe.com/spectrum-tokens/schemas/token-types/color.json", + "value": "CanvasText" + } + } + }, + "checkbox-control-color-disabled": { + "component": "checkbox", + "$schema": "https://opensource.adobe.com/spectrum-tokens/schemas/token-types/alias.json", + "value": "{disabled-content-color}", + "sets": { + "whcm": { + "$schema": "https://opensource.adobe.com/spectrum-tokens/schemas/token-types/color.json", + "value": "GrayText" + } + } + }, + "checkbox-invalid-color-default": { + "component": "checkbox", + "$schema": "https://opensource.adobe.com/spectrum-tokens/schemas/token-types/alias.json", + "value": "{negative-color-900}" + }, + "checkbox-invalid-color-hover": { + "component": "checkbox", + "$schema": "https://opensource.adobe.com/spectrum-tokens/schemas/token-types/alias.json", + "value": "{negative-color-1000}" + }, + "checkbox-invalid-color-down": { + "component": "checkbox", + "$schema": "https://opensource.adobe.com/spectrum-tokens/schemas/token-types/alias.json", + "value": "{negative-color-1000}" + }, + "checkbox-invalid-color-focus": { + "component": "checkbox", + "$schema": "https://opensource.adobe.com/spectrum-tokens/schemas/token-types/alias.json", + "value": "{negative-color-1000}" + }, + "checkbox-emphasized-color-default": { + "component": "checkbox", + "$schema": "https://opensource.adobe.com/spectrum-tokens/schemas/token-types/alias.json", + "value": "{accent-content-color-default}" + }, + "checkbox-emphasized-color-hover": { + "component": "checkbox", + "$schema": "https://opensource.adobe.com/spectrum-tokens/schemas/token-types/alias.json", + "value": "{accent-content-color-hover}" + }, + "checkbox-emphasized-color-down": { + "component": "checkbox", + "$schema": "https://opensource.adobe.com/spectrum-tokens/schemas/token-types/alias.json", + "value": "{accent-content-color-down}" + }, + "checkbox-emphasized-color-focus": { + "component": "checkbox", + "$schema": "https://opensource.adobe.com/spectrum-tokens/schemas/token-types/alias.json", + "value": "{accent-content-color-key-focus}", + "sets": { + "whcm": { + "$schema": "https://opensource.adobe.com/spectrum-tokens/schemas/token-types/color.json", + "value": "Highlight" + } + } + }, + "checkbox-control-selected-color-default": { + "component": "checkbox", + "$schema": "https://opensource.adobe.com/spectrum-tokens/schemas/token-types/alias.json", + "value": "{neutral-content-color-default}", + "sets": { + "whcm": { + "$schema": "https://opensource.adobe.com/spectrum-tokens/schemas/token-types/color.json", + "value": "Highlight" + } + } + }, + "checkbox-control-selected-color-hover": { + "component": "checkbox", + "$schema": "https://opensource.adobe.com/spectrum-tokens/schemas/token-types/alias.json", + "value": "{neutral-content-color-hover}", + "sets": { + "whcm": { + "$schema": "https://opensource.adobe.com/spectrum-tokens/schemas/token-types/color.json", + "value": "Highlight" + } + } + }, + "checkbox-control-selected-color-down": { + "component": "checkbox", + "$schema": "https://opensource.adobe.com/spectrum-tokens/schemas/token-types/alias.json", + "value": "{neutral-content-color-down}", + "sets": { + "whcm": { + "$schema": "https://opensource.adobe.com/spectrum-tokens/schemas/token-types/color.json", + "value": "Highlight" + } + } + }, + "checkbox-font-size": { + "component": "checkbox", + "$schema": "https://opensource.adobe.com/spectrum-tokens/schemas/token-types/alias.json", + "value": "{font-size-100}" + }, + "checkbox-line-height": { + "component": "checkbox", + "$schema": "https://opensource.adobe.com/spectrum-tokens/schemas/token-types/alias.json", + "value": "{line-height-100}" + }, + "checkbox-line-height-cjk": { + "component": "checkbox", + "$schema": "https://opensource.adobe.com/spectrum-tokens/schemas/token-types/alias.json", + "value": "{cjk-line-height-100}" + }, + "checkbox-text-font-weight": { + "component": "checkbox", + "$schema": "https://opensource.adobe.com/spectrum-tokens/schemas/token-types/alias.json", + "value": "{regular-font-weight}" + }, + "checkbox-text-font-style": { + "component": "checkbox", + "$schema": "https://opensource.adobe.com/spectrum-tokens/schemas/token-types/alias.json", + "value": "{default-font-style}" + }, + "checkbox-height": { + "component": "checkbox", + "$schema": "https://opensource.adobe.com/spectrum-tokens/schemas/token-types/alias.json", + "value": "{component-height-100}" + }, + "checkbox-control-size": { + "component": "checkbox", + "$schema": "https://opensource.adobe.com/spectrum-tokens/schemas/token-types/alias.json", + "value": "{checkbox-control-size-medium}" + }, + "checkbox-control-corner-radius": { + "component": "checkbox", + "$schema": "https://opensource.adobe.com/spectrum-tokens/schemas/token-types/alias.json", + "value": "{corner-radius-small-size-medium}" + }, + "checkbox-focus-indicator-gap": { + "component": "checkbox", + "$schema": "https://opensource.adobe.com/spectrum-tokens/schemas/token-types/alias.json", + "value": "{focus-indicator-gap}" + }, + "checkbox-focus-indicator-thickness": { + "component": "checkbox", + "$schema": "https://opensource.adobe.com/spectrum-tokens/schemas/token-types/alias.json", + "value": "{focus-indicator-thickness}" + }, + "checkbox-border-width": { + "component": "checkbox", + "$schema": "https://opensource.adobe.com/spectrum-tokens/schemas/token-types/alias.json", + "value": "{border-width-200}" + }, + "checkbox-animation-duration": { + "component": "checkbox", + "$schema": "https://opensource.adobe.com/spectrum-tokens/schemas/token-types/alias.json", + "value": "{animation-duration-100}" + }, + "checkbox-top-to-text": { + "component": "checkbox", + "$schema": "https://opensource.adobe.com/spectrum-tokens/schemas/token-types/alias.json", + "value": "{component-top-to-text-100}" + }, + "checkbox-bottom-to-text": { + "component": "checkbox", + "$schema": "https://opensource.adobe.com/spectrum-tokens/schemas/token-types/alias.json", + "value": "{component-bottom-to-text-100}" + }, + "checkbox-text-to-control": { + "component": "checkbox", + "$schema": "https://opensource.adobe.com/spectrum-tokens/schemas/token-types/alias.json", + "value": "{text-to-control-100}" + }, + "checkbox-top-to-control": { + "component": "checkbox", + "$schema": "https://opensource.adobe.com/spectrum-tokens/schemas/token-types/alias.json", + "value": "{checkbox-top-to-control-medium}" + }, + "checkbox-selected-border-width": { + "component": "checkbox", + "$schema": "https://opensource.adobe.com/spectrum-tokens/schemas/token-types/alias.json", + "value": "calc({checkbox-control-size} / 2)" + } +} diff --git a/components/clearbutton/tokens.json b/components/clearbutton/tokens.json new file mode 100644 index 00000000000..e8605a75298 --- /dev/null +++ b/components/clearbutton/tokens.json @@ -0,0 +1,108 @@ +{ + "clear-button-height": { + "component": "clear-button", + "$schema": "https://opensource.adobe.com/spectrum-tokens/schemas/token-types/alias.json", + "value": "{component-height-100}" + }, + "clear-button-width": { + "component": "clear-button", + "$schema": "https://opensource.adobe.com/spectrum-tokens/schemas/token-types/alias.json", + "value": "{component-height-100}" + }, + "clear-button-padding": { + "component": "clear-button", + "$schema": "https://opensource.adobe.com/spectrum-tokens/schemas/token-types/alias.json", + "value": "{in-field-button-edge-to-fill}" + }, + "clear-button-icon-color": { + "component": "clear-button", + "$schema": "https://opensource.adobe.com/spectrum-tokens/schemas/token-types/alias.json", + "value": "{neutral-content-color-default}" + }, + "clear-button-icon-color-hover": { + "component": "clear-button", + "$schema": "https://opensource.adobe.com/spectrum-tokens/schemas/token-types/alias.json", + "value": "{neutral-content-color-hover}", + "sets": { + "whcm": { + "$schema": "https://opensource.adobe.com/spectrum-tokens/schemas/token-types/color.json", + "value": "Highlight" + } + } + }, + "clear-button-icon-color-down": { + "component": "clear-button", + "$schema": "https://opensource.adobe.com/spectrum-tokens/schemas/token-types/alias.json", + "value": "{neutral-content-color-down}" + }, + "clear-button-icon-color-key-focus": { + "component": "clear-button", + "$schema": "https://opensource.adobe.com/spectrum-tokens/schemas/token-types/alias.json", + "value": "{neutral-content-color-key-focus}" + }, + "clear-button-background-color": { + "component": "clear-button", + "$schema": "https://opensource.adobe.com/spectrum-tokens/schemas/token-types/alias.json", + "value": "transparent" + }, + "clear-button-background-color-hover": { + "component": "clear-button", + "$schema": "https://opensource.adobe.com/spectrum-tokens/schemas/token-types/alias.json", + "value": "transparent" + }, + "clear-button-background-color-down": { + "component": "clear-button", + "$schema": "https://opensource.adobe.com/spectrum-tokens/schemas/token-types/alias.json", + "value": "transparent" + }, + "clear-button-background-color-key-focus": { + "component": "clear-button", + "$schema": "https://opensource.adobe.com/spectrum-tokens/schemas/token-types/alias.json", + "value": "transparent" + }, + "clear-button-background-color-hover-static-white": { + "component": "clear-button", + "$schema": "https://opensource.adobe.com/spectrum-tokens/schemas/token-types/alias.json", + "value": "{transparent-white-400}" + }, + "clear-button-background-color-down-static-white": { + "component": "clear-button", + "$schema": "https://opensource.adobe.com/spectrum-tokens/schemas/token-types/alias.json", + "value": "{transparent-white-500}" + }, + "clear-button-background-color-key-focus-static-white": { + "component": "clear-button", + "$schema": "https://opensource.adobe.com/spectrum-tokens/schemas/token-types/alias.json", + "value": "{transparent-white-400}" + }, + "clear-button-icon-color-static-white": { + "component": "clear-button", + "$schema": "https://opensource.adobe.com/spectrum-tokens/schemas/token-types/alias.json", + "value": "{white}" + }, + "clear-button-icon-color-hover-static-white": { + "component": "clear-button", + "$schema": "https://opensource.adobe.com/spectrum-tokens/schemas/token-types/alias.json", + "value": "{white}" + }, + "clear-button-icon-color-down-static-white": { + "component": "clear-button", + "$schema": "https://opensource.adobe.com/spectrum-tokens/schemas/token-types/alias.json", + "value": "{white}" + }, + "clear-button-icon-color-key-focus-static-white": { + "component": "clear-button", + "$schema": "https://opensource.adobe.com/spectrum-tokens/schemas/token-types/alias.json", + "value": "{white}" + }, + "clear-button-icon-color-disabled-static-white": { + "component": "clear-button", + "$schema": "https://opensource.adobe.com/spectrum-tokens/schemas/token-types/alias.json", + "value": "{disabled-static-white-content-color}" + }, + "clear-button-icon-color-disabled": { + "component": "clear-button", + "$schema": "https://opensource.adobe.com/spectrum-tokens/schemas/token-types/alias.json", + "value": "{disabled-content-color}" + } +} diff --git a/components/closebutton/tokens.json b/components/closebutton/tokens.json new file mode 100644 index 00000000000..ee597007b22 --- /dev/null +++ b/components/closebutton/tokens.json @@ -0,0 +1,209 @@ +{ + "closebutton-border-radius": { + "component": "close-button", + "$schema": "https://opensource.adobe.com/spectrum-tokens/schemas/token-types/alias.json", + "value": "{corner-radius-full}" + }, + "closebutton-icon-color-default": { + "component": "close-button", + "$schema": "https://opensource.adobe.com/spectrum-tokens/schemas/token-types/alias.json", + "value": "{neutral-content-color-default}" + }, + "closebutton-icon-color-hover": { + "component": "close-button", + "$schema": "https://opensource.adobe.com/spectrum-tokens/schemas/token-types/alias.json", + "value": "{neutral-content-color-hover}", + "sets": { + "whcm": { + "$schema": "https://opensource.adobe.com/spectrum-tokens/schemas/token-types/color.json", + "value": "Highlight" + } + } + }, + "closebutton-icon-color-down": { + "component": "close-button", + "$schema": "https://opensource.adobe.com/spectrum-tokens/schemas/token-types/alias.json", + "value": "{neutral-content-color-down}", + "sets": { + "whcm": { + "$schema": "https://opensource.adobe.com/spectrum-tokens/schemas/token-types/color.json", + "value": "Highlight" + } + } + }, + "closebutton-icon-color-focus": { + "component": "close-button", + "$schema": "https://opensource.adobe.com/spectrum-tokens/schemas/token-types/alias.json", + "value": "{neutral-content-color-key-focus}", + "sets": { + "whcm": { + "$schema": "https://opensource.adobe.com/spectrum-tokens/schemas/token-types/color.json", + "value": "Highlight" + } + } + }, + "closebutton-icon-color-disabled": { + "component": "close-button", + "$schema": "https://opensource.adobe.com/spectrum-tokens/schemas/token-types/alias.json", + "value": "{disabled-content-color}", + "sets": { + "whcm": { + "$schema": "https://opensource.adobe.com/spectrum-tokens/schemas/token-types/color.json", + "value": "GrayText" + } + } + }, + "closebutton-focus-indicator-thickness": { + "component": "close-button", + "$schema": "https://opensource.adobe.com/spectrum-tokens/schemas/token-types/alias.json", + "value": "{focus-indicator-thickness}" + }, + "closebutton-focus-indicator-gap": { + "component": "close-button", + "$schema": "https://opensource.adobe.com/spectrum-tokens/schemas/token-types/alias.json", + "value": "{focus-indicator-gap}" + }, + "closebutton-focus-indicator-color": { + "component": "close-button", + "$schema": "https://opensource.adobe.com/spectrum-tokens/schemas/token-types/alias.json", + "value": "{focus-indicator-color}", + "sets": { + "whcm": { + "$schema": "https://opensource.adobe.com/spectrum-tokens/schemas/token-types/color.json", + "value": "ButtonText" + } + } + }, + "closebutton-size": { + "component": "close-button", + "$schema": "https://opensource.adobe.com/spectrum-tokens/schemas/token-types/alias.json", + "value": "{component-height-100}" + }, + "closebutton-animation-duration": { + "component": "close-button", + "$schema": "https://opensource.adobe.com/spectrum-tokens/schemas/token-types/alias.json", + "value": "{animation-duration-100}" + }, + "closebutton-background-color-default": { + "component": "close-button", + "$schema": "https://opensource.adobe.com/spectrum-tokens/schemas/token-types/alias.json", + "value": "transparent", + "sets": { + "whcm": { + "$schema": "https://opensource.adobe.com/spectrum-tokens/schemas/token-types/color.json", + "value": "ButtonFace" + } + } + }, + "closebutton-background-color-hover": { + "component": "close-button", + "$schema": "https://opensource.adobe.com/spectrum-tokens/schemas/token-types/alias.json", + "value": "{gray-100}" + }, + "closebutton-background-color-down": { + "component": "close-button", + "$schema": "https://opensource.adobe.com/spectrum-tokens/schemas/token-types/alias.json", + "value": "{gray-100}" + }, + "closebutton-background-color-focus": { + "component": "close-button", + "$schema": "https://opensource.adobe.com/spectrum-tokens/schemas/token-types/alias.json", + "value": "{gray-100}" + }, + "closebutton-icon-color-default-static-white": { + "component": "close-button", + "$schema": "https://opensource.adobe.com/spectrum-tokens/schemas/token-types/alias.json", + "value": "{transparent-white-800}" + }, + "closebutton-icon-color-hover-static-white": { + "component": "close-button", + "$schema": "https://opensource.adobe.com/spectrum-tokens/schemas/token-types/alias.json", + "value": "{transparent-white-900}" + }, + "closebutton-icon-color-down-static-white": { + "component": "close-button", + "$schema": "https://opensource.adobe.com/spectrum-tokens/schemas/token-types/alias.json", + "value": "{transparent-white-900}" + }, + "closebutton-icon-color-focus-static-white": { + "component": "close-button", + "$schema": "https://opensource.adobe.com/spectrum-tokens/schemas/token-types/alias.json", + "value": "{transparent-white-900}" + }, + "closebutton-icon-color-disabled-static-white": { + "component": "close-button", + "$schema": "https://opensource.adobe.com/spectrum-tokens/schemas/token-types/alias.json", + "value": "{disabled-static-white-background-color}", + "sets": { + "whcm": { + "$schema": "https://opensource.adobe.com/spectrum-tokens/schemas/token-types/color.json", + "value": "Highlight" + } + } + }, + "closebutton-background-color-hover-static-white": { + "component": "close-button", + "$schema": "https://opensource.adobe.com/spectrum-tokens/schemas/token-types/alias.json", + "value": "{transparent-white-100}" + }, + "closebutton-background-color-down-static-white": { + "component": "close-button", + "$schema": "https://opensource.adobe.com/spectrum-tokens/schemas/token-types/alias.json", + "value": "{transparent-white-100}" + }, + "closebutton-background-color-focus-static-white": { + "component": "close-button", + "$schema": "https://opensource.adobe.com/spectrum-tokens/schemas/token-types/alias.json", + "value": "{transparent-white-100}" + }, + "closebutton-focus-indicator-color-static-white": { + "component": "close-button", + "$schema": "https://opensource.adobe.com/spectrum-tokens/schemas/token-types/alias.json", + "value": "{static-white-focus-indicator-color}" + }, + "closebutton-icon-color-default-static-black": { + "component": "close-button", + "$schema": "https://opensource.adobe.com/spectrum-tokens/schemas/token-types/alias.json", + "value": "{transparent-black-800}" + }, + "closebutton-icon-color-hover-static-black": { + "component": "close-button", + "$schema": "https://opensource.adobe.com/spectrum-tokens/schemas/token-types/alias.json", + "value": "{transparent-black-900}" + }, + "closebutton-icon-color-down-static-black": { + "component": "close-button", + "$schema": "https://opensource.adobe.com/spectrum-tokens/schemas/token-types/alias.json", + "value": "{transparent-black-900}" + }, + "closebutton-icon-color-focus-static-black": { + "component": "close-button", + "$schema": "https://opensource.adobe.com/spectrum-tokens/schemas/token-types/alias.json", + "value": "{transparent-black-900}" + }, + "closebutton-icon-color-disabled-static-black": { + "component": "close-button", + "$schema": "https://opensource.adobe.com/spectrum-tokens/schemas/token-types/alias.json", + "value": "{disabled-static-black-background-color}" + }, + "closebutton-background-color-hover-static-black": { + "component": "close-button", + "$schema": "https://opensource.adobe.com/spectrum-tokens/schemas/token-types/alias.json", + "value": "{transparent-black-100}" + }, + "closebutton-background-color-down-static-black": { + "component": "close-button", + "$schema": "https://opensource.adobe.com/spectrum-tokens/schemas/token-types/alias.json", + "value": "{transparent-black-100}" + }, + "closebutton-background-color-focus-static-black": { + "component": "close-button", + "$schema": "https://opensource.adobe.com/spectrum-tokens/schemas/token-types/alias.json", + "value": "{transparent-black-100}" + }, + "closebutton-focus-indicator-color-static-black": { + "component": "close-button", + "$schema": "https://opensource.adobe.com/spectrum-tokens/schemas/token-types/alias.json", + "value": "{static-black-focus-indicator-color}" + } +} diff --git a/components/coachindicator/tokens.json b/components/coachindicator/tokens.json new file mode 100644 index 00000000000..8c3c8ceee75 --- /dev/null +++ b/components/coachindicator/tokens.json @@ -0,0 +1,143 @@ +{ + "coach-indicator-gap": { + "component": "coach-indicator", + "$schema": "https://opensource.adobe.com/spectrum-tokens/schemas/token-types/scale-set.json", + "sets": { + "desktop": { + "$schema": "https://opensource.adobe.com/spectrum-tokens/schemas/token-types/dimension.json", + "value": "6px" + }, + "mobile": { + "$schema": "https://opensource.adobe.com/spectrum-tokens/schemas/token-types/dimension.json", + "value": "8px" + } + } + }, + "coach-indicator-quiet-ring-diameter": { + "component": "coach-indicator", + "$schema": "https://opensource.adobe.com/spectrum-tokens/schemas/token-types/scale-set.json", + "sets": { + "desktop": { + "$schema": "https://opensource.adobe.com/spectrum-tokens/schemas/token-types/alias.json", + "value": "{spacing-100}" + }, + "mobile": { + "$schema": "https://opensource.adobe.com/spectrum-tokens/schemas/token-types/dimension.json", + "value": "10px" + } + } + }, + "coach-indicator-ring-default-color": { + "component": "coach-indicator", + "$schema": "https://opensource.adobe.com/spectrum-tokens/schemas/token-types/color-set.json", + "sets": { + "dark": { + "$schema": "https://opensource.adobe.com/spectrum-tokens/schemas/token-types/alias.json", + "value": "{blue-700}" + }, + "light": { + "$schema": "https://opensource.adobe.com/spectrum-tokens/schemas/token-types/alias.json", + "value": "{blue-800}" + } + } + }, + "coach-indicator-ring-diameter": { + "component": "coach-indicator", + "$schema": "https://opensource.adobe.com/spectrum-tokens/schemas/token-types/scale-set.json", + "sets": { + "desktop": { + "$schema": "https://opensource.adobe.com/spectrum-tokens/schemas/token-types/alias.json", + "value": "{spacing-300}" + }, + "mobile": { + "$schema": "https://opensource.adobe.com/spectrum-tokens/schemas/token-types/dimension.json", + "value": "20px" + } + } + }, + "coach-indicator-ring-static-white-color": { + "component": "coach-indicator", + "$schema": "https://opensource.adobe.com/spectrum-tokens/schemas/token-types/alias.json", + "value": "{white}" + }, + "coach-indicator-ring-border-size": { + "component": "coach-indicator", + "$schema": "https://opensource.adobe.com/spectrum-tokens/schemas/token-types/alias.json", + "value": "{border-width-200}" + }, + "coach-indicator-sizing-multiple": { + "component": "coach-indicator", + "$schema": "https://opensource.adobe.com/spectrum-tokens/schemas/token-types/dimension.json", + "value": "3" + }, + "coach-indicator-ring-diameter-size": { + "component": "coach-indicator", + "$schema": "https://opensource.adobe.com/spectrum-tokens/schemas/token-types/alias.json", + "value": "{coach-indicator-ring-diameter}" + }, + "coach-indicator-min-inline-size": { + "component": "coach-indicator", + "$schema": "https://opensource.adobe.com/spectrum-tokens/schemas/token-types/alias.json", + "value": "calc({coach-indicator-ring-diameter-size} * {coach-indicator-sizing-multiple})" + }, + "coach-indicator-min-block-size": { + "component": "coach-indicator", + "$schema": "https://opensource.adobe.com/spectrum-tokens/schemas/token-types/alias.json", + "value": "calc({coach-indicator-ring-diameter-size} * {coach-indicator-sizing-multiple})" + }, + "coach-indicator-inline-size": { + "component": "coach-indicator", + "$schema": "https://opensource.adobe.com/spectrum-tokens/schemas/token-types/alias.json", + "value": "{coach-indicator-min-inline-size}" + }, + "coach-indicator-block-size": { + "component": "coach-indicator", + "$schema": "https://opensource.adobe.com/spectrum-tokens/schemas/token-types/alias.json", + "value": "{coach-indicator-min-block-size}" + }, + "coach-animation-indicator-ring-duration": { + "component": "coach-indicator", + "$schema": "https://opensource.adobe.com/spectrum-tokens/schemas/token-types/alias.json", + "value": "{animation-duration-6000}" + }, + "coach-indicator-animation-keyframe-scale-initial": { + "component": "coach-indicator", + "$schema": "https://opensource.adobe.com/spectrum-tokens/schemas/token-types/dimension.json", + "value": "1" + }, + "coach-indicator-animation-ring-inner-delay-multiple": { + "component": "coach-indicator", + "$schema": "https://opensource.adobe.com/spectrum-tokens/schemas/token-types/dimension.json", + "value": "-0.5" + }, + "coach-indicator-animation-keyframe-scale-initial-quiet": { + "component": "coach-indicator", + "$schema": "https://opensource.adobe.com/spectrum-tokens/schemas/token-types/dimension.json", + "value": "0.8" + }, + "coach-indicator-sizing-multiple-quiet": { + "component": "coach-indicator", + "$schema": "https://opensource.adobe.com/spectrum-tokens/schemas/token-types/dimension.json", + "value": "2.75" + }, + "coach-indicator-ring-diameter-size-quiet": { + "component": "coach-indicator", + "$schema": "https://opensource.adobe.com/spectrum-tokens/schemas/token-types/alias.json", + "value": "{coach-indicator-quiet-ring-diameter}" + }, + "coach-indicator-animation-ring-inner-delay-multiple-quiet": { + "component": "coach-indicator", + "$schema": "https://opensource.adobe.com/spectrum-tokens/schemas/token-types/dimension.json", + "value": "-0.33" + }, + "coach-indicator-ring-default-color-static-white": { + "component": "coach-indicator", + "$schema": "https://opensource.adobe.com/spectrum-tokens/schemas/token-types/alias.json", + "value": "{white}" + }, + "coach-indicator-ring-default-color-static-black": { + "component": "coach-indicator", + "$schema": "https://opensource.adobe.com/spectrum-tokens/schemas/token-types/alias.json", + "value": "{black}" + } +} diff --git a/components/coachmark/tokens.json b/components/coachmark/tokens.json new file mode 100644 index 00000000000..ab23c56e432 --- /dev/null +++ b/components/coachmark/tokens.json @@ -0,0 +1,197 @@ +{ + "coachmark-width": { + "component": "coachmark", + "$schema": "https://opensource.adobe.com/spectrum-tokens/schemas/token-types/alias.json", + "value": "{coach-mark-width}" + }, + "coachmark-min-width": { + "component": "coachmark", + "$schema": "https://opensource.adobe.com/spectrum-tokens/schemas/token-types/alias.json", + "value": "{coach-mark-minimum-width}" + }, + "coachmark-max-width": { + "component": "coachmark", + "$schema": "https://opensource.adobe.com/spectrum-tokens/schemas/token-types/alias.json", + "value": "{coach-mark-maximum-width}" + }, + "coachmark-media-min-height": { + "component": "coachmark", + "$schema": "https://opensource.adobe.com/spectrum-tokens/schemas/token-types/alias.json", + "value": "{coach-mark-media-minimum-height}" + }, + "coachmark-border-size": { + "component": "coachmark", + "$schema": "https://opensource.adobe.com/spectrum-tokens/schemas/token-types/alias.json", + "value": "{border-width-100}" + }, + "coachmark-border-radius": { + "component": "coachmark", + "$schema": "https://opensource.adobe.com/spectrum-tokens/schemas/token-types/alias.json", + "value": "{corner-radius-large-default}" + }, + "coachmark-media-fixed-height": { + "component": "coachmark", + "$schema": "https://opensource.adobe.com/spectrum-tokens/schemas/token-types/alias.json", + "value": "{coach-mark-media-height}" + }, + "coachmark-padding": { + "component": "coachmark", + "$schema": "https://opensource.adobe.com/spectrum-tokens/schemas/token-types/alias.json", + "value": "{coach-mark-edge-to-content}" + }, + "coachmark-image-to-heading": { + "component": "coachmark", + "$schema": "https://opensource.adobe.com/spectrum-tokens/schemas/token-types/alias.json", + "value": "{coach-mark-edge-to-content}" + }, + "coachmark-header-to-body": { + "component": "coachmark", + "$schema": "https://opensource.adobe.com/spectrum-tokens/schemas/token-types/alias.json", + "value": "{spacing-200}" + }, + "coachmark-body-to-footer": { + "component": "coachmark", + "$schema": "https://opensource.adobe.com/spectrum-tokens/schemas/token-types/alias.json", + "value": "{spacing-300}" + }, + "coachmark-title-color": { + "component": "coachmark", + "$schema": "https://opensource.adobe.com/spectrum-tokens/schemas/token-types/alias.json", + "value": "{heading-color}" + }, + "coachmark-title-font-family": { + "component": "coachmark", + "$schema": "https://opensource.adobe.com/spectrum-tokens/schemas/token-types/alias.json", + "value": "{sans-serif-font}" + }, + "coachmark-title-font-size": { + "component": "coachmark", + "$schema": "https://opensource.adobe.com/spectrum-tokens/schemas/token-types/alias.json", + "value": "{coach-mark-title-font-size}" + }, + "coachmark-title-font-style": { + "component": "coachmark", + "$schema": "https://opensource.adobe.com/spectrum-tokens/schemas/token-types/alias.json", + "value": "{title-serif-font-style}" + }, + "coachmark-title-text-font-weight": { + "component": "coachmark", + "$schema": "https://opensource.adobe.com/spectrum-tokens/schemas/token-types/alias.json", + "value": "{title-sans-serif-font-weight}" + }, + "coachmark-title-text-line-height": { + "component": "coachmark", + "$schema": "https://opensource.adobe.com/spectrum-tokens/schemas/token-types/alias.json", + "value": "{title-line-height}" + }, + "coachmark-content-font-size": { + "component": "coachmark", + "$schema": "https://opensource.adobe.com/spectrum-tokens/schemas/token-types/alias.json", + "value": "{coach-mark-body-font-size}" + }, + "coachmark-content-font-weight": { + "component": "coachmark", + "$schema": "https://opensource.adobe.com/spectrum-tokens/schemas/token-types/alias.json", + "value": "{body-sans-serif-font-weight}" + }, + "coachmark-step-color": { + "component": "coachmark", + "$schema": "https://opensource.adobe.com/spectrum-tokens/schemas/token-types/alias.json", + "value": "{coach-mark-pagination-color}" + }, + "coachmark-step-font-style": { + "component": "coachmark", + "$schema": "https://opensource.adobe.com/spectrum-tokens/schemas/token-types/alias.json", + "value": "{body-serif-font-style}" + }, + "coachmark-step-font-size": { + "component": "coachmark", + "$schema": "https://opensource.adobe.com/spectrum-tokens/schemas/token-types/alias.json", + "value": "{coach-mark-pagination-body-font-size}" + }, + "coachmark-step-text-font-weight": { + "component": "coachmark", + "$schema": "https://opensource.adobe.com/spectrum-tokens/schemas/token-types/alias.json", + "value": "{medium-font-weight}" + }, + "coachmark-step-text-line-height": { + "component": "coachmark", + "$schema": "https://opensource.adobe.com/spectrum-tokens/schemas/token-types/alias.json", + "value": "{line-height-200}" + }, + "coachmark-step-to-bottom": { + "component": "coachmark", + "$schema": "https://opensource.adobe.com/spectrum-tokens/schemas/token-types/alias.json", + "value": "{coach-mark-pagination-text-to-bottom-edge}" + }, + "coachmark-action-menu-vertical-offset": { + "component": "coachmark", + "$schema": "https://opensource.adobe.com/spectrum-tokens/schemas/token-types/scale-set.json", + "sets": { + "desktop": { + "$schema": "https://opensource.adobe.com/spectrum-tokens/schemas/token-types/alias.json", + "value": "-4px" + }, + "mobile": { + "$schema": "https://opensource.adobe.com/spectrum-tokens/schemas/token-types/alias.json", + "value": "-6px" + } + } + }, + "coachmark-buttongroup-display": { + "component": "coachmark", + "$schema": "https://opensource.adobe.com/spectrum-tokens/schemas/token-types/scale-set.json", + "sets": { + "desktop": { + "$schema": "https://opensource.adobe.com/spectrum-tokens/schemas/token-types/alias.json", + "value": "flex" + }, + "mobile": { + "$schema": "https://opensource.adobe.com/spectrum-tokens/schemas/token-types/alias.json", + "value": "none" + } + } + }, + "coachmark-buttongroup-mobile-display": { + "component": "coachmark", + "$schema": "https://opensource.adobe.com/spectrum-tokens/schemas/token-types/scale-set.json", + "sets": { + "desktop": { + "$schema": "https://opensource.adobe.com/spectrum-tokens/schemas/token-types/alias.json", + "value": "none" + }, + "mobile": { + "$schema": "https://opensource.adobe.com/spectrum-tokens/schemas/token-types/alias.json", + "value": "flex" + } + } + }, + "coachmark-menu-display": { + "component": "coachmark", + "$schema": "https://opensource.adobe.com/spectrum-tokens/schemas/token-types/scale-set.json", + "sets": { + "desktop": { + "$schema": "https://opensource.adobe.com/spectrum-tokens/schemas/token-types/alias.json", + "value": "inline-flex" + }, + "mobile": { + "$schema": "https://opensource.adobe.com/spectrum-tokens/schemas/token-types/alias.json", + "value": "none" + } + } + }, + "coachmark-menu-mobile-display": { + "component": "coachmark", + "$schema": "https://opensource.adobe.com/spectrum-tokens/schemas/token-types/scale-set.json", + "sets": { + "desktop": { + "$schema": "https://opensource.adobe.com/spectrum-tokens/schemas/token-types/alias.json", + "value": "none" + }, + "mobile": { + "$schema": "https://opensource.adobe.com/spectrum-tokens/schemas/token-types/alias.json", + "value": "inline-flex" + } + } + } +} diff --git a/components/colorarea/dist/metadata.json b/components/colorarea/dist/metadata.json index 9039b7c1028..5616ba27c70 100644 --- a/components/colorarea/dist/metadata.json +++ b/components/colorarea/dist/metadata.json @@ -31,7 +31,6 @@ "--spectrum-color-area-minimum-width", "--spectrum-color-area-width", "--spectrum-colorarea-border-color", - "--spectrum-colorarea-border-color-rgb", "--spectrum-colorarea-border-radius", "--spectrum-colorarea-border-width", "--spectrum-colorarea-disabled-background-color", @@ -40,10 +39,7 @@ "--spectrum-colorarea-min-width", "--spectrum-colorarea-width" ], - "global": [ - "--spectrum-disabled-background-color", - "--spectrum-gray-1000-rgb" - ], + "global": ["--spectrum-disabled-background-color", "--spectrum-gray-1000"], "passthroughs": [], "high-contrast": [ "--highcontrast-colorarea-border-color", diff --git a/components/colorarea/index.css b/components/colorarea/index.css index e9f1b1091f5..e48cca18fbb 100644 --- a/components/colorarea/index.css +++ b/components/colorarea/index.css @@ -12,28 +12,25 @@ */ .spectrum-ColorArea { - --spectrum-colorarea-border-radius: var(--spectrum-color-area-border-rounding); - - /* @TODO: leveraging the rgb token in this case to achieve the desired border color implementation as rgb + opacity are required by the `rgba` function. */ - --spectrum-colorarea-border-color-rgb: var(--spectrum-gray-1000-rgb); - --spectrum-colorarea-border-color: rgb(var(--spectrum-colorarea-border-color-rgb), var(--spectrum-color-area-border-opacity)); - --spectrum-colorarea-border-width: var(--spectrum-color-area-border-width); - --spectrum-colorarea-disabled-background-color: var(--spectrum-disabled-background-color); - --spectrum-colorarea-height: var(--spectrum-color-area-height); - --spectrum-colorarea-width: var(--spectrum-color-area-width); - --spectrum-colorarea-min-width: var(--spectrum-color-area-minimum-width); - --spectrum-colorarea-min-height: var(--spectrum-color-area-minimum-height); + --spectrum-colorarea-border-radius: var(--mod-colorarea-border-radius, var(--spectrum-color-area-border-rounding)); + --spectrum-colorarea-border-color: var(--highcontrast-colorarea-border-color, var(--mod-colorarea-border-color, color-mix(in sRGB, var(--spectrum-gray-1000) var(--spectrum-color-area-border-opacity), transparent))); + --spectrum-colorarea-border-width: var(--mod-colorarea-border-width, var(--spectrum-color-area-border-width)); + --spectrum-colorarea-disabled-background-color: var(--highcontrast-colorarea-fill-color-disabled, var(--mod-colorarea-disabled-background-color, var(--spectrum-disabled-background-color))); + --spectrum-colorarea-height: var(--mod-colorarea-height, var(--spectrum-color-area-height)); + --spectrum-colorarea-width: var(--mod-colorarea-width, var(--spectrum-color-area-width)); + --spectrum-colorarea-min-width: var(--mod-colorarea-min-width, var(--spectrum-color-area-minimum-width)); + --spectrum-colorarea-min-height: var(--mod-colorarea-min-height, var(--spectrum-color-area-minimum-height)); position: relative; display: inline-block; cursor: default; - min-inline-size: var(--mod-colorarea-min-width, var(--spectrum-colorarea-min-width)); - min-block-size: var(--mod-colorarea-min-height, var(--spectrum-colorarea-min-height)); - inline-size: var(--mod-colorarea-width, var(--spectrum-colorarea-width)); - block-size: var(--mod-colorarea-height, var(--spectrum-colorarea-height)); + min-inline-size: var(--spectrum-colorarea-min-width); + min-block-size: var(--spectrum-colorarea-min-height); + inline-size: var(--spectrum-colorarea-width); + block-size: var(--spectrum-colorarea-height); box-sizing: border-box; - border-radius: var(--mod-colorarea-border-radius, var(--spectrum-colorarea-border-radius)); - border: var(--mod-colorarea-border-width, var(--spectrum-colorarea-border-width)) solid var(--highcontrast-colorarea-border-color, var(--mod-colorarea-border-color, var(--spectrum-colorarea-border-color))); + border-radius: var(--spectrum-colorarea-border-radius); + border: var(--spectrum-colorarea-border-width) solid var(--spectrum-colorarea-border-color); touch-action: none; /* Disable touch scrolling on touch devices to allow for color picking */ user-select: none; @@ -44,8 +41,8 @@ &.is-disabled { pointer-events: none; - background: var(--highcontrast-colorarea-fill-color-disabled, var(--mod-colorarea-disabled-background-color, var(--spectrum-colorarea-disabled-background-color))); - border: var(--mod-colorarea-border-width, var(--spectrum-colorarea-border-width)) solid var(--highcontrast-colorarea-border-color-disabled); + background: var(--spectrum-colorarea-disabled-background-color); + border: var(--spectrum-colorarea-border-width) solid var(--highcontrast-colorarea-border-color-disabled); .spectrum-ColorArea-gradient { display: none; @@ -54,7 +51,7 @@ } .spectrum-ColorArea-handle { - transform: translate(calc(var(--mod-colorarea-width, var(--spectrum-colorarea-width)) - var(--spectrum-colorarea-border-width)), 0); + transform: translate(calc(var(--spectrum-colorarea-width) - var(--spectrum-colorarea-border-width)), 0); inset-block-start: 0; &:dir(rtl) { @@ -67,7 +64,7 @@ block-size: 100%; /* calc used here to properly calculate the `border-radius` for the gradient such that it aligns with the `border-radius` of the enclosing border */ - border-radius: calc(var(--mod-colorarea-border-radius, var(--spectrum-colorarea-border-radius)) - var(--mod-colorarea-border-width, var(--spectrum-colorarea-border-width))); + border-radius: calc(var(--spectrum-colorarea-border-radius) - var(--spectrum-colorarea-border-width)); } .spectrum-ColorArea-slider { diff --git a/components/colorarea/tokens.json b/components/colorarea/tokens.json new file mode 100644 index 00000000000..4d865832219 --- /dev/null +++ b/components/colorarea/tokens.json @@ -0,0 +1,65 @@ +{ + "colorarea-border-radius": { + "component": "colorarea", + "$schema": "https://opensource.adobe.com/spectrum-tokens/schemas/token-types/alias.json", + "value": "{color-area-border-rounding}" + }, + "colorarea-border-color": { + "component": "colorarea", + "$schema": "https://opensource.adobe.com/spectrum-tokens/schemas/token-types/alias.json", + "value": "color-mix(in sRGB, {gray-1000} {color-area-border-opacity}, transparent)", + "sets": { + "whcm": { + "$schema": "https://opensource.adobe.com/spectrum-tokens/schemas/token-types/color.json", + "value": "Canvas" + } + } + }, + "colorarea-border-color-disabled": { + "component": "colorarea", + "$schema": "https://opensource.adobe.com/spectrum-tokens/schemas/token-types/alias.json", + "value": "{disabled-background-color}", + "sets": { + "whcm": { + "$schema": "https://opensource.adobe.com/spectrum-tokens/schemas/token-types/color.json", + "value": "GrayText" + } + } + }, + "colorarea-border-width": { + "component": "colorarea", + "$schema": "https://opensource.adobe.com/spectrum-tokens/schemas/token-types/alias.json", + "value": "{color-area-border-width}" + }, + "colorarea-disabled-background-color": { + "component": "colorarea", + "$schema": "https://opensource.adobe.com/spectrum-tokens/schemas/token-types/alias.json", + "value": "{disabled-background-color}", + "sets": { + "whcm": { + "$schema": "https://opensource.adobe.com/spectrum-tokens/schemas/token-types/color.json", + "value": "Canvas" + } + } + }, + "colorarea-height": { + "component": "colorarea", + "$schema": "https://opensource.adobe.com/spectrum-tokens/schemas/token-types/alias.json", + "value": "{color-area-height}" + }, + "colorarea-width": { + "component": "colorarea", + "$schema": "https://opensource.adobe.com/spectrum-tokens/schemas/token-types/alias.json", + "value": "{color-area-width}" + }, + "colorarea-min-width": { + "component": "colorarea", + "$schema": "https://opensource.adobe.com/spectrum-tokens/schemas/token-types/alias.json", + "value": "{color-area-minimum-width}" + }, + "colorarea-min-height": { + "component": "colorarea", + "$schema": "https://opensource.adobe.com/spectrum-tokens/schemas/token-types/alias.json", + "value": "{color-area-minimum-height}" + } +} diff --git a/components/colorhandle/dist/metadata.json b/components/colorhandle/dist/metadata.json index cbd2b5d599f..a0c048bbb11 100644 --- a/components/colorhandle/dist/metadata.json +++ b/components/colorhandle/dist/metadata.json @@ -27,8 +27,10 @@ ], "component": [ "--spectrum-color-handle-border-width", + "--spectrum-color-handle-inner-border-color", "--spectrum-color-handle-inner-border-opacity", "--spectrum-color-handle-inner-border-width", + "--spectrum-color-handle-outer-border-color", "--spectrum-color-handle-outer-border-opacity", "--spectrum-color-handle-outer-border-width", "--spectrum-color-handle-size", @@ -39,7 +41,6 @@ ], "global": [ "--spectrum-animation-duration-100", - "--spectrum-black-rgb", "--spectrum-color-control-track-width", "--spectrum-disabled-background-color", "--spectrum-disabled-content-color", diff --git a/components/colorhandle/index.css b/components/colorhandle/index.css index 983ec65767e..bc977fd1dd3 100644 --- a/components/colorhandle/index.css +++ b/components/colorhandle/index.css @@ -24,13 +24,11 @@ .spectrum-ColorHandle { /* outer border as box shadow on the colorhandle */ - /* TODO replace --spectrum-black-rgb with color-handle-outer-border-color when supported by RGBA */ - --spectrum-colorhandle-outer-border-color: rgba(var(--spectrum-black-rgb), var(--spectrum-color-handle-outer-border-opacity)); + --spectrum-colorhandle-outer-border-color: color-mix(in sRGB, var(--spectrum-color-handle-outer-border-color) var(--spectrum-color-handle-outer-border-opacity), transparent); --spectrum-colorhandle-outer-border-width: var(--spectrum-color-handle-outer-border-width); /* inner border as inset boxshadow on the colorhandle-inner */ - /* TODO replace --spectrum-black-rgb with color-handle-inner-border-color when supported by RGBA */ - --spectrum-colorhandle-inner-border-color: rgba(var(--spectrum-black-rgb), var(--spectrum-color-handle-inner-border-opacity)); + --spectrum-colorhandle-inner-border-color: color-mix(in sRGB, var(--spectrum-color-handle-inner-border-color) var(--spectrum-color-handle-inner-border-opacity), transparent); /* @passthrough -- opacity checkerboard customization */ --mod-opacity-checkerboard-position: 50%; diff --git a/components/colorhandle/tokens.json b/components/colorhandle/tokens.json new file mode 100644 index 00000000000..64727a557d7 --- /dev/null +++ b/components/colorhandle/tokens.json @@ -0,0 +1,72 @@ +{ + "colorhandle-outer-border-color": { + "component": "colorhandle", + "$schema": "https://opensource.adobe.com/spectrum-tokens/schemas/token-types/alias.json", + "value": "color-mix(in sRGB, {color-handle-outer-border-color} {color-handle-outer-border-opacity}, transparent)" + }, + "colorhandle-outer-border-width": { + "component": "colorhandle", + "$schema": "https://opensource.adobe.com/spectrum-tokens/schemas/token-types/alias.json", + "value": "{color-handle-outer-border-width}" + }, + "colorhandle-inner-border-color": { + "component": "colorhandle", + "$schema": "https://opensource.adobe.com/spectrum-tokens/schemas/token-types/alias.json", + "value": "color-mix(in sRGB, {color-handle-inner-border-color} {color-handle-inner-border-opacity}, transparent)" + }, + "colorhandle-size": { + "component": "colorhandle", + "$schema": "https://opensource.adobe.com/spectrum-tokens/schemas/token-types/alias.json", + "value": "{color-handle-size}" + }, + "colorhandle-border-width": { + "component": "colorhandle", + "$schema": "https://opensource.adobe.com/spectrum-tokens/schemas/token-types/alias.json", + "value": "{color-handle-border-width}" + }, + "colorhandle-border-color": { + "component": "colorhandle", + "$schema": "https://opensource.adobe.com/spectrum-tokens/schemas/token-types/alias.json", + "value": "{white}" + }, + "colorhandle-animation-duration": { + "component": "colorhandle", + "$schema": "https://opensource.adobe.com/spectrum-tokens/schemas/token-types/alias.json", + "value": "{animation-duration-100}" + }, + "colorhandle-hitarea-size": { + "component": "colorhandle", + "$schema": "https://opensource.adobe.com/spectrum-tokens/schemas/token-types/alias.json", + "value": "{color-control-track-width}" + }, + "colorhandle-hitarea-border-radius": { + "component": "colorhandle", + "$schema": "https://opensource.adobe.com/spectrum-tokens/schemas/token-types/alias.json", + "value": "100%" + }, + "colorhandle-focused-size": { + "component": "colorhandle", + "$schema": "https://opensource.adobe.com/spectrum-tokens/schemas/token-types/alias.json", + "value": "{color-handle-size-key-focus}" + }, + "colorhandle-border-color-disabled": { + "component": "colorhandle", + "$schema": "https://opensource.adobe.com/spectrum-tokens/schemas/token-types/alias.json", + "value": "{disabled-content-color}" + }, + "colorhandle-fill-color-disabled": { + "component": "colorhandle", + "$schema": "https://opensource.adobe.com/spectrum-tokens/schemas/token-types/alias.json", + "value": "{disabled-background-color}" + }, + "colorhandle-inner-border-width": { + "component": "colorhandle", + "$schema": "https://opensource.adobe.com/spectrum-tokens/schemas/token-types/alias.json", + "value": "{color-handle-inner-border-width}" + }, + "picked-color": { + "component": "colorhandle", + "$schema": "https://opensource.adobe.com/spectrum-tokens/schemas/token-types/alias.json", + "value": "{picked-color}" + } +} diff --git a/components/colorloupe/tokens.json b/components/colorloupe/tokens.json new file mode 100644 index 00000000000..84fa2c3ef93 --- /dev/null +++ b/components/colorloupe/tokens.json @@ -0,0 +1,86 @@ +{ + "colorloupe-checkerboard-fill": { + "component": "color-loupe", + "$schema": "https://opensource.adobe.com/spectrum-tokens/schemas/token-types/scale-set.json", + "sets": { + "desktop": { + "$schema": "https://opensource.adobe.com/spectrum-tokens/schemas/token-types/alias.json", + "value": "url('#checkerboard-primary')" + }, + "mobile": { + "$schema": "https://opensource.adobe.com/spectrum-tokens/schemas/token-types/alias.json", + "value": "url('#checkerboard-secondary')" + } + } + }, + "colorloupe-width": { + "component": "color-loupe", + "$schema": "https://opensource.adobe.com/spectrum-tokens/schemas/token-types/alias.json", + "value": "{color-loupe-width}" + }, + "colorloupe-height": { + "component": "color-loupe", + "$schema": "https://opensource.adobe.com/spectrum-tokens/schemas/token-types/alias.json", + "value": "{color-loupe-height}" + }, + "colorloupe-offset": { + "component": "color-loupe", + "$schema": "https://opensource.adobe.com/spectrum-tokens/schemas/token-types/alias.json", + "value": "{color-loupe-bottom-to-color-handle}" + }, + "colorloupe-animation-distance": { + "component": "color-loupe", + "$schema": "https://opensource.adobe.com/spectrum-tokens/schemas/token-types/dimension.json", + "value": "8px" + }, + "colorloupe-drop-shadow-x": { + "component": "color-loupe", + "$schema": "https://opensource.adobe.com/spectrum-tokens/schemas/token-types/alias.json", + "value": "{drop-shadow-elevated-x}" + }, + "colorloupe-drop-shadow-y": { + "component": "color-loupe", + "$schema": "https://opensource.adobe.com/spectrum-tokens/schemas/token-types/alias.json", + "value": "{drop-shadow-elevated-y}" + }, + "colorloupe-drop-shadow-blur": { + "component": "color-loupe", + "$schema": "https://opensource.adobe.com/spectrum-tokens/schemas/token-types/alias.json", + "value": "{drop-shadow-elevated-blur}" + }, + "colorloupe-drop-shadow-color": { + "component": "color-loupe", + "$schema": "https://opensource.adobe.com/spectrum-tokens/schemas/token-types/alias.json", + "value": "{drop-shadow-elevated-color}" + }, + "colorloupe-outer-border-width": { + "component": "color-loupe", + "$schema": "https://opensource.adobe.com/spectrum-tokens/schemas/token-types/alias.json", + "value": "{color-loupe-outer-border-width}" + }, + "colorloupe-inner-border-width": { + "component": "color-loupe", + "$schema": "https://opensource.adobe.com/spectrum-tokens/schemas/token-types/alias.json", + "value": "{color-loupe-inner-border-width}" + }, + "colorloupe-outer-border-color": { + "component": "color-loupe", + "$schema": "https://opensource.adobe.com/spectrum-tokens/schemas/token-types/alias.json", + "value": "{color-loupe-outer-border}" + }, + "colorloupe-inner-border-color": { + "component": "color-loupe", + "$schema": "https://opensource.adobe.com/spectrum-tokens/schemas/token-types/alias.json", + "value": "{color-loupe-inner-border}" + }, + "colorloupe-checkerboard-dark-color": { + "component": "color-loupe", + "$schema": "https://opensource.adobe.com/spectrum-tokens/schemas/token-types/alias.json", + "value": "{opacity-checkerboard-square-dark}" + }, + "colorloupe-checkerboard-light-color": { + "component": "color-loupe", + "$schema": "https://opensource.adobe.com/spectrum-tokens/schemas/token-types/alias.json", + "value": "{opacity-checkerboard-square-light}" + } +} diff --git a/components/colorslider/dist/metadata.json b/components/colorslider/dist/metadata.json index 497550155a7..9903f72dea8 100644 --- a/components/colorslider/dist/metadata.json +++ b/components/colorslider/dist/metadata.json @@ -32,6 +32,7 @@ "--mod-color-slider-vertical-minimum-height" ], "component": [ + "--spectrum-color-slider-border-color", "--spectrum-color-slider-border-color-default", "--spectrum-color-slider-border-color-local", "--spectrum-color-slider-border-opacity", @@ -44,8 +45,7 @@ ], "global": [ "--spectrum-color-control-track-width", - "--spectrum-disabled-background-color", - "--spectrum-gray-1000-rgb" + "--spectrum-disabled-background-color" ], "passthroughs": ["--mod-colorhandle-hitarea-border-radius"], "high-contrast": [ diff --git a/components/colorslider/index.css b/components/colorslider/index.css index a1be2551592..ff61f5f37bd 100644 --- a/components/colorslider/index.css +++ b/components/colorslider/index.css @@ -14,9 +14,7 @@ .spectrum-ColorSlider { /* Size and Spacing */ --spectrum-color-slider-control-track-width: var(--spectrum-color-control-track-width); - - /* @todo Refactor with --spectrum-color-slider-border-color once gray rgb token is no longer necessary to workaround nested rgb color token value using rgba(). */ - --spectrum-color-slider-border-color-default: rgba(var(--spectrum-gray-1000-rgb), var(--spectrum-color-slider-border-opacity)); + --spectrum-color-slider-border-color-default: color-mix(in sRGB, var(--spectrum-color-slider-border-color) var(--spectrum-color-slider-border-opacity), transparent); /* @passthrough -- settings for nested color handle */ --mod-colorhandle-hitarea-border-radius: var(--mod-color-slider-handle-hitarea-border-radius, 0px); diff --git a/components/colorslider/tokens.json b/components/colorslider/tokens.json new file mode 100644 index 00000000000..7021a179106 --- /dev/null +++ b/components/colorslider/tokens.json @@ -0,0 +1,45 @@ +{ + "color-slider-control-track-width": { + "component": "color-slider", + "$schema": "https://opensource.adobe.com/spectrum-tokens/schemas/token-types/alias.json", + "value": "{color-control-track-width}" + }, + "color-slider-border-color": { + "component": "color-slider", + "$schema": "https://opensource.adobe.com/spectrum-tokens/schemas/token-types/alias.json", + "value": "color-mix(in sRGB, {gray-400} {color-slider-border-opacity}, transparent)", + "sets": { + "whcm": { + "$schema": "https://opensource.adobe.com/spectrum-tokens/schemas/token-types/color.json", + "value": "CanvasText" + } + } + }, + "color-slider-border-color-disabled": { + "component": "color-slider", + "$schema": "https://opensource.adobe.com/spectrum-tokens/schemas/token-types/alias.json", + "value": "{disabled-background-color}", + "sets": { + "whcm": { + "$schema": "https://opensource.adobe.com/spectrum-tokens/schemas/token-types/color.json", + "value": "GrayText" + } + } + }, + "color-slider-background-color-disabled": { + "component": "color-slider", + "$schema": "https://opensource.adobe.com/spectrum-tokens/schemas/token-types/alias.json", + "value": "{disabled-background-color}", + "sets": { + "whcm": { + "$schema": "https://opensource.adobe.com/spectrum-tokens/schemas/token-types/color.json", + "value": "Canvas" + } + } + }, + "color-slider-fill-color-disabled": { + "component": "color-slider", + "$schema": "https://opensource.adobe.com/spectrum-tokens/schemas/token-types/alias.json", + "value": "{disabled-background-color}" + } +} diff --git a/components/colorwheel/dist/metadata.json b/components/colorwheel/dist/metadata.json index 3876b601d64..292b48032ed 100644 --- a/components/colorwheel/dist/metadata.json +++ b/components/colorwheel/dist/metadata.json @@ -36,7 +36,6 @@ "--spectrum-color-wheel-width", "--spectrum-colorwheel-block-size", "--spectrum-colorwheel-border-color", - "--spectrum-colorwheel-border-color-rgb", "--spectrum-colorwheel-border-opacity", "--spectrum-colorwheel-border-width", "--spectrum-colorwheel-colorarea-container-size", @@ -50,7 +49,7 @@ "--spectrum-border-width-100", "--spectrum-color-control-track-width", "--spectrum-disabled-background-color", - "--spectrum-gray-1000-rgb" + "--spectrum-gray-1000" ], "passthroughs": [], "high-contrast": [ diff --git a/components/colorwheel/index.css b/components/colorwheel/index.css index 1a730529ad9..c5d2547d054 100644 --- a/components/colorwheel/index.css +++ b/components/colorwheel/index.css @@ -16,11 +16,8 @@ --spectrum-colorwheel-block-size: var(--spectrum-color-wheel-width); --spectrum-colorwheel-min-inline-size: var(--spectrum-color-wheel-minimum-width); - /* @TODO: leveraging the rgb token in this case to achieve the desired border color implementation as rgb + opacity are required by the `rgba` function. */ - --spectrum-colorwheel-border-color-rgb: var(--spectrum-gray-1000-rgb); - --spectrum-colorwheel-border-opacity: var(--spectrum-color-wheel-border-opacity); - --spectrum-colorwheel-border-color: rgba(var(--spectrum-colorwheel-border-color-rgb), var(--spectrum-colorwheel-border-opacity)); + --spectrum-colorwheel-border-color: color-mix(in sRGB, var(--spectrum-gray-1000) var(--spectrum-colorwheel-border-opacity), transparent); --spectrum-colorwheel-border-width: var(--spectrum-border-width-100); --spectrum-colorwheel-track-width: var(--spectrum-color-control-track-width); diff --git a/components/colorwheel/tokens.json b/components/colorwheel/tokens.json new file mode 100644 index 00000000000..b7858d104a2 --- /dev/null +++ b/components/colorwheel/tokens.json @@ -0,0 +1,40 @@ +{ + "colorwheel-colorarea-container-size": { + "component": "color-wheel", + "$schema": "https://opensource.adobe.com/spectrum-tokens/schemas/token-types/scale-set.json", + "sets": { + "desktop": { + "$schema": "https://opensource.adobe.com/spectrum-tokens/schemas/token-types/dimension.json", + "value": "144px" + }, + "mobile": { + "$schema": "https://opensource.adobe.com/spectrum-tokens/schemas/token-types/dimension.json", + "value": "182px" + } + } + }, + "colorwheel-path": { + "component": "color-wheel", + "$schema": "https://opensource.adobe.com/spectrum-tokens/schemas/token-types/scale-set.json", + "sets": { + "desktop": { + "value": "M 95 95 m -95 0 a 95 95 0 1 0 190 0 a 95 95 0 1 0 -190 0.2 M 95 95 m -73 0 a 73 73 0 1 0 146 0 a 73 73 0 1 0 -146 0" + }, + "mobile": { + "value": "M 119 119 m -119 0 a 119 119 0 1 0 238 0 a 119 119 0 1 0 -238 0.2 M 119 119 m -91 0 a 91 91 0 1 0 182 0 a 91 91 0 1 0 -182 0" + } + } + }, + "colorwheel-path-borders": { + "component": "color-wheel", + "$schema": "https://opensource.adobe.com/spectrum-tokens/schemas/token-types/scale-set.json", + "sets": { + "desktop": { + "value": "M 96 96 m -96 0 a 96 96 0 1 0 192 0 a 96 96 0 1 0 -192 0.2 M 96 96 m -72 0 a 72 72 0 1 0 144 0 a 72 72 0 1 0 -144 0" + }, + "mobile": { + "value": "M 120 120 m -120 0 a 120 120 0 1 0 240 0 a 120 120 0 1 0 -240 0.2 M 120 120 m -90 0 a 90 90 0 1 0 180 0 a 90 90 0 1 0 -180 0" + } + } + } +} diff --git a/components/combobox/dist/metadata.json b/components/combobox/dist/metadata.json index 801fca17b38..493c8f0cb8d 100644 --- a/components/combobox/dist/metadata.json +++ b/components/combobox/dist/metadata.json @@ -196,7 +196,7 @@ "--spectrum-combobox-spacing-to-help-text" ], "global": [ - "--spectrum-blue-900-rgb", + "--spectrum-blue-900", "--spectrum-border-width-200", "--spectrum-cjk-line-height-100", "--spectrum-component-bottom-to-text-100", diff --git a/components/combobox/index.css b/components/combobox/index.css index be469b573fa..8e93066b8bc 100644 --- a/components/combobox/index.css +++ b/components/combobox/index.css @@ -61,7 +61,7 @@ --spectrum-combobox-border-color-invalid-focus-hover: var(--spectrum-negative-border-color-focus-hover); --spectrum-combobox-border-color-invalid-key-focus: var(--spectrum-negative-border-color-key-focus); - --spectrum-combobox-background-color-autofill: rgb(var(--spectrum-blue-900-rgb), 0.3); + --spectrum-combobox-background-color-autofill: color-mix(in sRGB, var(--spectrum-blue-900) 70%, transparent); --mod-combobox-popover-animation-distance: var(--spectrum-component-to-menu-medium); diff --git a/components/combobox/tokens.json b/components/combobox/tokens.json new file mode 100644 index 00000000000..c0fa89e1993 --- /dev/null +++ b/components/combobox/tokens.json @@ -0,0 +1,305 @@ +{ + "combobox-block-size": { + "component": "combobox", + "$schema": "https://opensource.adobe.com/spectrum-tokens/schemas/token-types/alias.json", + "value": "{component-height-100}" + }, + "combobox-icon-size": { + "component": "combobox", + "$schema": "https://opensource.adobe.com/spectrum-tokens/schemas/token-types/alias.json", + "value": "{workflow-icon-size-100}" + }, + "combobox-font-size": { + "component": "combobox", + "$schema": "https://opensource.adobe.com/spectrum-tokens/schemas/token-types/alias.json", + "value": "{font-size-100}" + }, + "combobox-line-height": { + "component": "combobox", + "$schema": "https://opensource.adobe.com/spectrum-tokens/schemas/token-types/alias.json", + "value": "{line-height-100}" + }, + "combobox-spacing-inline-icon-to-button": { + "component": "combobox", + "$schema": "https://opensource.adobe.com/spectrum-tokens/schemas/token-types/alias.json", + "value": "{combo-box-visual-to-field-button}" + }, + "combobox-block-spacing-edge-to-progress-circle": { + "component": "combobox", + "$schema": "https://opensource.adobe.com/spectrum-tokens/schemas/token-types/alias.json", + "value": "{field-top-to-progress-circle-medium}" + }, + "combobox-block-spacing-edge-to-icon": { + "component": "combobox", + "$schema": "https://opensource.adobe.com/spectrum-tokens/schemas/token-types/alias.json", + "value": "{component-top-to-workflow-icon-100}" + }, + "combobox-spacing-block-start-edge-to-text": { + "component": "combobox", + "$schema": "https://opensource.adobe.com/spectrum-tokens/schemas/token-types/alias.json", + "value": "{component-top-to-text-100}" + }, + "combobox-spacing-block-end-edge-to-text": { + "component": "combobox", + "$schema": "https://opensource.adobe.com/spectrum-tokens/schemas/token-types/alias.json", + "value": "{component-bottom-to-text-100}" + }, + "combobox-spacing-inline-start-edge-to-text": { + "component": "combobox", + "$schema": "https://opensource.adobe.com/spectrum-tokens/schemas/token-types/alias.json", + "value": "{component-edge-to-text-100}" + }, + "combobox-spacing-inline-icon-to-text": { + "component": "combobox", + "$schema": "https://opensource.adobe.com/spectrum-tokens/schemas/token-types/alias.json", + "value": "{text-to-visual-100}" + }, + "combobox-spacing-to-help-text": { + "component": "combobox", + "$schema": "https://opensource.adobe.com/spectrum-tokens/schemas/token-types/alias.json", + "value": "{help-text-to-component}" + }, + "combobox-inline-size": { + "component": "combobox", + "$schema": "https://opensource.adobe.com/spectrum-tokens/schemas/token-types/alias.json", + "value": "{field-width-medium}" + }, + "combobox-min-inline-size": { + "component": "combobox", + "$schema": "https://opensource.adobe.com/spectrum-tokens/schemas/token-types/alias.json", + "value": "calc({combo-box-minimum-width-multiplier} * {combobox-block-size})" + }, + "combobox-button-width": { + "component": "combobox", + "$schema": "https://opensource.adobe.com/spectrum-tokens/schemas/token-types/alias.json", + "value": "{combobox-block-size}" + }, + "combobox-focus-indicator-thickness": { + "component": "combobox", + "$schema": "https://opensource.adobe.com/spectrum-tokens/schemas/token-types/alias.json", + "value": "{focus-indicator-thickness}" + }, + "combobox-focus-indicator-gap": { + "component": "combobox", + "$schema": "https://opensource.adobe.com/spectrum-tokens/schemas/token-types/alias.json", + "value": "{focus-indicator-gap}" + }, + "combobox-focus-indicator-color": { + "component": "combobox", + "$schema": "https://opensource.adobe.com/spectrum-tokens/schemas/token-types/alias.json", + "value": "{focus-indicator-color}" + }, + "combobox-border-radius": { + "component": "combobox", + "$schema": "https://opensource.adobe.com/spectrum-tokens/schemas/token-types/alias.json", + "value": "{corner-radius-medium-size-medium}" + }, + "combobox-border-width": { + "component": "combobox", + "$schema": "https://opensource.adobe.com/spectrum-tokens/schemas/token-types/alias.json", + "value": "{border-width-200}" + }, + "combobox-spacing-label-to-combobox": { + "component": "combobox", + "$schema": "https://opensource.adobe.com/spectrum-tokens/schemas/token-types/alias.json", + "value": "{field-label-to-component}" + }, + "combobox-spacing-side-label-to-field": { + "component": "combobox", + "$schema": "https://opensource.adobe.com/spectrum-tokens/schemas/token-types/alias.json", + "value": "{spacing-200}" + }, + "combobox-font-style": { + "component": "combobox", + "$schema": "https://opensource.adobe.com/spectrum-tokens/schemas/token-types/alias.json", + "value": "{default-font-style}" + }, + "combobox-font-weight": { + "component": "combobox", + "$schema": "https://opensource.adobe.com/spectrum-tokens/schemas/token-types/alias.json", + "value": "{regular-font-weight}" + }, + "combobox-line-height-cjk": { + "component": "combobox", + "$schema": "https://opensource.adobe.com/spectrum-tokens/schemas/token-types/alias.json", + "value": "{cjk-line-height-100}" + }, + "combobox-background-color-disabled": { + "component": "combobox", + "$schema": "https://opensource.adobe.com/spectrum-tokens/schemas/token-types/alias.json", + "value": "{gray-25}" + }, + "combobox-background-color-default": { + "component": "combobox", + "$schema": "https://opensource.adobe.com/spectrum-tokens/schemas/token-types/alias.json", + "value": "{gray-25}", + "sets": { + "whcm": { + "$schema": "https://opensource.adobe.com/spectrum-tokens/schemas/token-types/color.json", + "value": "Canvas" + } + } + }, + "combobox-border-color-default": { + "component": "combobox", + "$schema": "https://opensource.adobe.com/spectrum-tokens/schemas/token-types/alias.json", + "value": "{gray-300}" + }, + "combobox-border-color-hover": { + "component": "combobox", + "$schema": "https://opensource.adobe.com/spectrum-tokens/schemas/token-types/alias.json", + "value": "{gray-400}", + "sets": { + "whcm": { + "$schema": "https://opensource.adobe.com/spectrum-tokens/schemas/token-types/color.json", + "value": "Highlight" + } + } + }, + "combobox-border-color-focus": { + "component": "combobox", + "$schema": "https://opensource.adobe.com/spectrum-tokens/schemas/token-types/alias.json", + "value": "{gray-800}", + "sets": { + "whcm": { + "$schema": "https://opensource.adobe.com/spectrum-tokens/schemas/token-types/color.json", + "value": "Highlight" + } + } + }, + "combobox-border-color-focus-hover": { + "component": "combobox", + "$schema": "https://opensource.adobe.com/spectrum-tokens/schemas/token-types/alias.json", + "value": "{gray-900}", + "sets": { + "whcm": { + "$schema": "https://opensource.adobe.com/spectrum-tokens/schemas/token-types/color.json", + "value": "Highlight" + } + } + }, + "combobox-border-color-key-focus": { + "component": "combobox", + "$schema": "https://opensource.adobe.com/spectrum-tokens/schemas/token-types/alias.json", + "value": "{gray-800}", + "sets": { + "whcm": { + "$schema": "https://opensource.adobe.com/spectrum-tokens/schemas/token-types/color.json", + "value": "Highlight" + } + } + }, + "combobox-border-color-disabled": { + "component": "combobox", + "$schema": "https://opensource.adobe.com/spectrum-tokens/schemas/token-types/alias.json", + "value": "{disabled-border-color}", + "sets": { + "whcm": { + "$schema": "https://opensource.adobe.com/spectrum-tokens/schemas/token-types/color.json", + "value": "GrayText" + } + } + }, + "combobox-border-color-invalid-default": { + "component": "combobox", + "$schema": "https://opensource.adobe.com/spectrum-tokens/schemas/token-types/alias.json", + "value": "{negative-border-color-default}", + "sets": { + "whcm": { + "$schema": "https://opensource.adobe.com/spectrum-tokens/schemas/token-types/color.json", + "value": "Highlight" + } + } + }, + "combobox-border-color-invalid-hover": { + "component": "combobox", + "$schema": "https://opensource.adobe.com/spectrum-tokens/schemas/token-types/alias.json", + "value": "{negative-border-color-hover}", + "sets": { + "whcm": { + "$schema": "https://opensource.adobe.com/spectrum-tokens/schemas/token-types/color.json", + "value": "Highlight" + } + } + }, + "combobox-border-color-invalid-focus": { + "component": "combobox", + "$schema": "https://opensource.adobe.com/spectrum-tokens/schemas/token-types/alias.json", + "value": "{negative-border-color-focus}", + "sets": { + "whcm": { + "$schema": "https://opensource.adobe.com/spectrum-tokens/schemas/token-types/color.json", + "value": "Highlight" + } + } + }, + "combobox-border-color-invalid-focus-hover": { + "component": "combobox", + "$schema": "https://opensource.adobe.com/spectrum-tokens/schemas/token-types/alias.json", + "value": "{negative-border-color-focus-hover}", + "sets": { + "whcm": { + "$schema": "https://opensource.adobe.com/spectrum-tokens/schemas/token-types/color.json", + "value": "Highlight" + } + } + }, + "combobox-border-color-invalid-key-focus": { + "component": "combobox", + "$schema": "https://opensource.adobe.com/spectrum-tokens/schemas/token-types/alias.json", + "value": "{negative-border-color-key-focus}", + "sets": { + "whcm": { + "$schema": "https://opensource.adobe.com/spectrum-tokens/schemas/token-types/color.json", + "value": "Highlight" + } + } + }, + "combobox-background-color-autofill": { + "component": "combobox", + "$schema": "https://opensource.adobe.com/spectrum-tokens/schemas/token-types/color.json", + "value": "rgb({blue-900-rgb}, 0.3)" + }, + "combobox-readonly-input-background-color": { + "component": "combobox", + "$schema": "https://opensource.adobe.com/spectrum-tokens/schemas/token-types/alias.json", + "value": "{combobox-background-color-default}" + }, + "combobox-readonly-border-color-invalid-default": { + "component": "combobox", + "$schema": "https://opensource.adobe.com/spectrum-tokens/schemas/token-types/alias.json", + "value": "{negative-border-color-default}" + }, + "combobox-readonly-background-color-disabled": { + "component": "combobox", + "$schema": "https://opensource.adobe.com/spectrum-tokens/schemas/token-types/alias.json", + "value": "{disabled-background-color}" + }, + "combobox-readonly-text-color-disabled": { + "component": "combobox", + "$schema": "https://opensource.adobe.com/spectrum-tokens/schemas/token-types/alias.json", + "value": "{disabled-content-color}", + "sets": { + "whcm": { + "$schema": "https://opensource.adobe.com/spectrum-tokens/schemas/token-types/color.json", + "value": "GrayText" + } + } + }, + "combobox-readonly-border-color-disabled": { + "component": "combobox", + "$schema": "https://opensource.adobe.com/spectrum-tokens/schemas/token-types/alias.json", + "value": "{disabled-border-color}" + }, + "combobox-readonly-input-border-color": { + "component": "combobox", + "$schema": "https://opensource.adobe.com/spectrum-tokens/schemas/token-types/alias.json", + "value": "{combobox-border-color-default}", + "sets": { + "whcm": { + "$schema": "https://opensource.adobe.com/spectrum-tokens/schemas/token-types/color.json", + "value": "CanvasText" + } + } + } +} diff --git a/components/contextualhelp/tokens.json b/components/contextualhelp/tokens.json new file mode 100644 index 00000000000..9feac5efd63 --- /dev/null +++ b/components/contextualhelp/tokens.json @@ -0,0 +1,53 @@ +{ + "contextual-help-minimum-width": { + "component": "contextual-help", + "$schema": "https://opensource.adobe.com/spectrum-tokens/schemas/token-types/alias.json", + "value": "{contextual-help-minimum-width}" + }, + "contextual-help-body-size": { + "component": "contextual-help", + "$schema": "https://opensource.adobe.com/spectrum-tokens/schemas/token-types/alias.json", + "value": "{contextual-help-body-size}" + }, + "contextual-help-title-size": { + "component": "contextual-help", + "$schema": "https://opensource.adobe.com/spectrum-tokens/schemas/token-types/alias.json", + "value": "{contextual-help-title-size}" + }, + "contextual-help-content-spacing": { + "component": "contextual-help", + "$schema": "https://opensource.adobe.com/spectrum-tokens/schemas/token-types/scale-set.json", + "sets": { + "desktop": { + "$schema": "https://opensource.adobe.com/spectrum-tokens/schemas/token-types/alias.json", + "value": "{spacing-100}" + }, + "mobile": { + "$schema": "https://opensource.adobe.com/spectrum-tokens/schemas/token-types/alias.json", + "value": "{spacing-200}" + } + } + }, + "contextual-help-heading-color": { + "component": "contextual-help", + "$schema": "https://opensource.adobe.com/spectrum-tokens/schemas/token-types/alias.json", + "value": "{heading-color}", + "sets": { + "whcm": { + "$schema": "https://opensource.adobe.com/spectrum-tokens/schemas/token-types/color.json", + "value": "CanvasText" + } + } + }, + "contextual-help-body-color": { + "component": "contextual-help", + "$schema": "https://opensource.adobe.com/spectrum-tokens/schemas/token-types/alias.json", + "value": "{body-color}", + "sets": { + "whcm": { + "$schema": "https://opensource.adobe.com/spectrum-tokens/schemas/token-types/color.json", + "value": "CanvasText" + } + } + } +} diff --git a/components/datepicker/tokens.json b/components/datepicker/tokens.json new file mode 100644 index 00000000000..3e6c8925d8c --- /dev/null +++ b/components/datepicker/tokens.json @@ -0,0 +1,313 @@ +{ + "datepicker-dash-line-height": { + "component": "date-picker", + "$schema": "https://opensource.adobe.com/spectrum-tokens/schemas/token-types/scale-set.json", + "sets": { + "desktop": { + "$schema": "https://opensource.adobe.com/spectrum-tokens/schemas/token-types/dimension.json", + "value": "24px" + }, + "mobile": { + "$schema": "https://opensource.adobe.com/spectrum-tokens/schemas/token-types/dimension.json", + "value": "30px" + } + } + }, + "datepicker-datetime-width-first": { + "component": "date-picker", + "$schema": "https://opensource.adobe.com/spectrum-tokens/schemas/token-types/scale-set.json", + "sets": { + "desktop": { + "$schema": "https://opensource.adobe.com/spectrum-tokens/schemas/token-types/dimension.json", + "value": "36px" + }, + "mobile": { + "$schema": "https://opensource.adobe.com/spectrum-tokens/schemas/token-types/dimension.json", + "value": "45px" + } + } + }, + "datepicker-generic-padding": { + "component": "date-picker", + "$schema": "https://opensource.adobe.com/spectrum-tokens/schemas/token-types/scale-set.json", + "sets": { + "desktop": { + "$schema": "https://opensource.adobe.com/spectrum-tokens/schemas/token-types/alias.json", + "value": "{spacing-200}" + }, + "mobile": { + "$schema": "https://opensource.adobe.com/spectrum-tokens/schemas/token-types/dimension.json", + "value": "15px" + } + } + }, + "datepicker-initial-width": { + "component": "date-picker", + "$schema": "https://opensource.adobe.com/spectrum-tokens/schemas/token-types/scale-set.json", + "sets": { + "desktop": { + "$schema": "https://opensource.adobe.com/spectrum-tokens/schemas/token-types/dimension.json", + "value": "128px" + }, + "mobile": { + "$schema": "https://opensource.adobe.com/spectrum-tokens/schemas/token-types/dimension.json", + "value": "160px" + } + } + }, + "datepicker-input-datetime-width": { + "component": "date-picker", + "$schema": "https://opensource.adobe.com/spectrum-tokens/schemas/token-types/scale-set.json", + "sets": { + "desktop": { + "$schema": "https://opensource.adobe.com/spectrum-tokens/schemas/token-types/alias.json", + "value": "{spacing-400}" + }, + "mobile": { + "$schema": "https://opensource.adobe.com/spectrum-tokens/schemas/token-types/dimension.json", + "value": "30px" + } + } + }, + "datepicker-invalid-icon-to-button": { + "component": "date-picker", + "$schema": "https://opensource.adobe.com/spectrum-tokens/schemas/token-types/scale-set.json", + "sets": { + "desktop": { + "$schema": "https://opensource.adobe.com/spectrum-tokens/schemas/token-types/dimension.json", + "value": "8px" + }, + "mobile": { + "$schema": "https://opensource.adobe.com/spectrum-tokens/schemas/token-types/dimension.json", + "value": "10px" + } + } + }, + "datepicker-invalid-icon-to-button-quiet": { + "component": "date-picker", + "$schema": "https://opensource.adobe.com/spectrum-tokens/schemas/token-types/scale-set.json", + "sets": { + "desktop": { + "$schema": "https://opensource.adobe.com/spectrum-tokens/schemas/token-types/dimension.json", + "value": "7px" + }, + "mobile": { + "$schema": "https://opensource.adobe.com/spectrum-tokens/schemas/token-types/dimension.json", + "value": "9px" + } + } + }, + "datepicker-width-quiet-first": { + "component": "date-picker", + "$schema": "https://opensource.adobe.com/spectrum-tokens/schemas/token-types/scale-set.json", + "sets": { + "desktop": { + "$schema": "https://opensource.adobe.com/spectrum-tokens/schemas/token-types/dimension.json", + "value": "72px" + }, + "mobile": { + "$schema": "https://opensource.adobe.com/spectrum-tokens/schemas/token-types/dimension.json", + "value": "90px" + } + } + }, + "datepicker-width-quiet-second": { + "component": "date-picker", + "$schema": "https://opensource.adobe.com/spectrum-tokens/schemas/token-types/scale-set.json", + "sets": { + "desktop": { + "$schema": "https://opensource.adobe.com/spectrum-tokens/schemas/token-types/dimension.json", + "value": "16px" + }, + "mobile": { + "$schema": "https://opensource.adobe.com/spectrum-tokens/schemas/token-types/dimension.json", + "value": "20px" + } + } + }, + "datepicker-initial-height": { + "component": "date-picker", + "$schema": "https://opensource.adobe.com/spectrum-tokens/schemas/token-types/alias.json", + "value": "{component-height-100}" + }, + "datepicker-border-radius": { + "component": "date-picker", + "$schema": "https://opensource.adobe.com/spectrum-tokens/schemas/token-types/alias.json", + "value": "{corner-radius-100}" + }, + "datepicker-border-radius-quiet": { + "component": "date-picker", + "$schema": "https://opensource.adobe.com/spectrum-tokens/schemas/token-types/dimension.json", + "value": "0" + }, + "datepicker-border-width": { + "component": "date-picker", + "$schema": "https://opensource.adobe.com/spectrum-tokens/schemas/token-types/alias.json", + "value": "{border-width-100}" + }, + "datepicker-min-width": { + "component": "date-picker", + "$schema": "https://opensource.adobe.com/spectrum-tokens/schemas/token-types/alias.json", + "value": "{field-width}" + }, + "datepicker-icon-size": { + "component": "date-picker", + "$schema": "https://opensource.adobe.com/spectrum-tokens/schemas/token-types/alias.json", + "value": "{workflow-icon-size-100}" + }, + "datepicker-pickerbutton-border-color": { + "component": "date-picker", + "$schema": "https://opensource.adobe.com/spectrum-tokens/schemas/token-types/alias.json", + "value": "{gray-500}" + }, + "datepicker-pickerbutton-border-color-invalid": { + "component": "date-picker", + "$schema": "https://opensource.adobe.com/spectrum-tokens/schemas/token-types/alias.json", + "value": "{negative-border-color-default}" + }, + "datepicker-pickerbutton-width": { + "component": "date-picker", + "$schema": "https://opensource.adobe.com/spectrum-tokens/schemas/token-types/alias.json", + "value": "calc({field-edge-to-disclosure-icon-100} * 2 + {workflow-icon-size-100})" + }, + "datepicker-quiet-button-offset": { + "component": "date-picker", + "$schema": "https://opensource.adobe.com/spectrum-tokens/schemas/token-types/alias.json", + "value": "{text-to-visual-100}" + }, + "datepicker-icon-to-text": { + "component": "date-picker", + "$schema": "https://opensource.adobe.com/spectrum-tokens/schemas/token-types/alias.json", + "value": "{component-edge-to-text-100}" + }, + "datepicker-pickerbutton-width-quiet": { + "component": "date-picker", + "$schema": "https://opensource.adobe.com/spectrum-tokens/schemas/token-types/alias.json", + "value": "calc({datepicker-pickerbutton-width} - {datepicker-quiet-button-offset})" + }, + "datepicker-focus-ring-gap": { + "component": "date-picker", + "$schema": "https://opensource.adobe.com/spectrum-tokens/schemas/token-types/alias.json", + "value": "{focus-indicator-gap}" + }, + "datepicker-focus-thickness": { + "component": "date-picker", + "$schema": "https://opensource.adobe.com/spectrum-tokens/schemas/token-types/alias.json", + "value": "{focus-indicator-thickness}" + }, + "datepicker-focus-animation": { + "component": "date-picker", + "$schema": "https://opensource.adobe.com/spectrum-tokens/schemas/token-types/alias.json", + "value": "{animation-duration-100}" + }, + "datepicker-focus-ring-width": { + "component": "date-picker", + "$schema": "https://opensource.adobe.com/spectrum-tokens/schemas/token-types/alias.json", + "value": "{border-width-100}" + }, + "datepicker-focus-ring-color": { + "component": "date-picker", + "$schema": "https://opensource.adobe.com/spectrum-tokens/schemas/token-types/alias.json", + "value": "{focus-indicator-color}" + }, + "datepicker-focus-line-gap": { + "component": "date-picker", + "$schema": "https://opensource.adobe.com/spectrum-tokens/schemas/token-types/alias.json", + "value": "{spacing-75}" + }, + "datepicker-invalid-quiet-color": { + "component": "date-picker", + "$schema": "https://opensource.adobe.com/spectrum-tokens/schemas/token-types/alias.json", + "value": "{negative-border-color-default}" + }, + "datepicker-quiet-border-color-hover": { + "component": "date-picker", + "$schema": "https://opensource.adobe.com/spectrum-tokens/schemas/token-types/alias.json", + "value": "{gray-500}" + }, + "datepicker-border-color-disabled": { + "component": "date-picker", + "$schema": "https://opensource.adobe.com/spectrum-tokens/schemas/token-types/alias.json", + "value": "{disabled-border-color}" + }, + "datepicker-dash-font-size": { + "component": "date-picker", + "$schema": "https://opensource.adobe.com/spectrum-tokens/schemas/token-types/alias.json", + "value": "{font-size-100}" + }, + "datepicker-dash-color": { + "component": "date-picker", + "$schema": "https://opensource.adobe.com/spectrum-tokens/schemas/token-types/alias.json", + "value": "{neutral-content-color-default}" + }, + "datepicker-range-dash-padding-top": { + "component": "date-picker", + "$schema": "https://opensource.adobe.com/spectrum-tokens/schemas/token-types/dimension.json", + "value": "0" + }, + "datepicker-range-dash-marin-inline-start": { + "component": "date-picker", + "$schema": "https://opensource.adobe.com/spectrum-tokens/schemas/token-types/alias.json", + "value": "calc(-0.5 * {datepicker-dash-font-size})" + }, + "datepicker-range-input-width-first": { + "component": "date-picker", + "$schema": "https://opensource.adobe.com/spectrum-tokens/schemas/token-types/alias.json", + "value": "calc({datepicker-initial-width} - 2 * {datepicker-generic-padding})" + }, + "datepicker-input-width-base": { + "component": "date-picker", + "$schema": "https://opensource.adobe.com/spectrum-tokens/schemas/token-types/alias.json", + "value": "calc({datepicker-range-input-width-first} + {datepicker-icon-size})" + }, + "datepicker-input-width": { + "component": "date-picker", + "$schema": "https://opensource.adobe.com/spectrum-tokens/schemas/token-types/alias.json", + "value": "calc({datepicker-input-width-base} + {datepicker-initial-height})" + }, + "datepicker-range-input-width-quiet-first": { + "component": "date-picker", + "$schema": "https://opensource.adobe.com/spectrum-tokens/schemas/token-types/alias.json", + "value": "calc({datepicker-width-quiet-first} + {datepicker-width-quiet-second})" + }, + "datepicker-input-width-quiet": { + "component": "date-picker", + "$schema": "https://opensource.adobe.com/spectrum-tokens/schemas/token-types/alias.json", + "value": "calc({datepicker-range-input-width-quiet-first} + {datepicker-icon-size} + {datepicker-initial-height})" + }, + "datepicker-datetime-input-width-first": { + "component": "date-picker", + "$schema": "https://opensource.adobe.com/spectrum-tokens/schemas/token-types/alias.json", + "value": "calc({datepicker-input-width-base} + {datepicker-datetime-width-first})" + }, + "datepicker-datetime-input-width": { + "component": "date-picker", + "$schema": "https://opensource.adobe.com/spectrum-tokens/schemas/token-types/alias.json", + "value": "calc({datepicker-datetime-input-width-first} + {datepicker-icon-size} + {datepicker-initial-height})" + }, + "datepicker-datetime-quiet-input-width-first": { + "component": "date-picker", + "$schema": "https://opensource.adobe.com/spectrum-tokens/schemas/token-types/alias.json", + "value": "calc({datepicker-input-width-base} + {datepicker-input-datetime-width})" + }, + "datepicker-datetime-quiet-input-width": { + "component": "date-picker", + "$schema": "https://opensource.adobe.com/spectrum-tokens/schemas/token-types/alias.json", + "value": "calc({datepicker-datetime-quiet-input-width-first} + {datepicker-icon-size} + {datepicker-initial-height})" + }, + "datepicker-padding-inline-end": { + "component": "date-picker", + "$schema": "https://opensource.adobe.com/spectrum-tokens/schemas/token-types/alias.json", + "value": "calc({datepicker-pickerbutton-width} + {component-edge-to-text-100} - {datepicker-border-width} * 2)" + }, + "datepicker-padding-inline-end-quiet": { + "component": "date-picker", + "$schema": "https://opensource.adobe.com/spectrum-tokens/schemas/token-types/alias.json", + "value": "calc(({datepicker-pickerbutton-width} + {component-edge-to-text-100}) - {datepicker-quiet-button-offset})" + }, + "datepicker-padding-inline-end-invalid-quiet": { + "component": "date-picker", + "$schema": "https://opensource.adobe.com/spectrum-tokens/schemas/token-types/alias.json", + "value": "calc({datepicker-pickerbutton-width-quiet} + {datepicker-icon-size} + {datepicker-icon-to-text})" + } +} diff --git a/components/dial/tokens.json b/components/dial/tokens.json new file mode 100644 index 00000000000..0fce94a29d5 --- /dev/null +++ b/components/dial/tokens.json @@ -0,0 +1,220 @@ +{ + "dial-background-color-default": { + "component": "dial", + "$schema": "https://opensource.adobe.com/spectrum-tokens/schemas/token-types/alias.json", + "value": "{gray-75}" + }, + "dial-handle-marker-color-key-focus": { + "component": "dial", + "$schema": "https://opensource.adobe.com/spectrum-tokens/schemas/token-types/alias.json", + "value": "{gray-25}" + }, + "dial-handle-marker-color": { + "component": "dial", + "$schema": "https://opensource.adobe.com/spectrum-tokens/schemas/token-types/alias.json", + "value": "{gray-700}" + }, + "dial-border-color": { + "component": "dial", + "$schema": "https://opensource.adobe.com/spectrum-tokens/schemas/token-types/alias.json", + "value": "{gray-700}" + }, + "dial-handle-marker-color-hover": { + "component": "dial", + "$schema": "https://opensource.adobe.com/spectrum-tokens/schemas/token-types/alias.json", + "value": "{gray-800}" + }, + "dial-border-color-hover": { + "component": "dial", + "$schema": "https://opensource.adobe.com/spectrum-tokens/schemas/token-types/alias.json", + "value": "{gray-800}" + }, + "dial-handle-marker-color-mouse-focus": { + "component": "dial", + "$schema": "https://opensource.adobe.com/spectrum-tokens/schemas/token-types/alias.json", + "value": "{gray-700}" + }, + "dial-min-max-tick-color": { + "component": "dial", + "$schema": "https://opensource.adobe.com/spectrum-tokens/schemas/token-types/alias.json", + "value": "{gray-600}" + }, + "dial-label-text-color": { + "component": "dial", + "$schema": "https://opensource.adobe.com/spectrum-tokens/schemas/token-types/alias.json", + "value": "{gray-700}" + }, + "dial-label-text-color-disabled": { + "component": "dial", + "$schema": "https://opensource.adobe.com/spectrum-tokens/schemas/token-types/alias.json", + "value": "{gray-700}" + }, + "dial-handle-border-color-disabled": { + "component": "dial", + "$schema": "https://opensource.adobe.com/spectrum-tokens/schemas/token-types/alias.json", + "value": "{gray-400}" + }, + "dial-container-width": { + "component": "dial", + "$schema": "https://opensource.adobe.com/spectrum-tokens/schemas/token-types/dimension.json", + "value": "48px" + }, + "dial-handle-marker-width": { + "component": "dial", + "$schema": "https://opensource.adobe.com/spectrum-tokens/schemas/token-types/dimension.json", + "value": "12px" + }, + "dial-handle-marker-height": { + "component": "dial", + "$schema": "https://opensource.adobe.com/spectrum-tokens/schemas/token-types/dimension.json", + "value": "2px" + }, + "dial-handle-marker-border-radius": { + "component": "dial", + "$schema": "https://opensource.adobe.com/spectrum-tokens/schemas/token-types/dimension.json", + "value": "1px" + }, + "dial-handle-size": { + "component": "dial", + "$schema": "https://opensource.adobe.com/spectrum-tokens/schemas/token-types/dimension.json", + "value": "100%" + }, + "dial-min-height": { + "component": "dial", + "$schema": "https://opensource.adobe.com/spectrum-tokens/schemas/token-types/dimension.json", + "value": "0" + }, + "dial-controls-min-height": { + "component": "dial", + "$schema": "https://opensource.adobe.com/spectrum-tokens/schemas/token-types/dimension.json", + "value": "0" + }, + "dial-min-max-tick-angles": { + "component": "dial", + "$schema": "https://opensource.adobe.com/spectrum-tokens/schemas/token-types/dimension.json", + "value": "45deg" + }, + "dial-width": { + "component": "dial", + "$schema": "https://opensource.adobe.com/spectrum-tokens/schemas/token-types/dimension.json", + "value": "32px" + }, + "dial-height": { + "component": "dial", + "$schema": "https://opensource.adobe.com/spectrum-tokens/schemas/token-types/dimension.json", + "value": "32px" + }, + "dial-handle-border-size": { + "component": "dial", + "$schema": "https://opensource.adobe.com/spectrum-tokens/schemas/token-types/alias.json", + "value": "{border-width-200}" + }, + "dial-label-text-size": { + "component": "dial", + "$schema": "https://opensource.adobe.com/spectrum-tokens/schemas/token-types/alias.json", + "value": "{font-size-75}" + }, + "dial-label-line-height": { + "component": "dial", + "$schema": "https://opensource.adobe.com/spectrum-tokens/schemas/token-types/alias.json", + "value": "{line-height-200}" + }, + "dial-border-radius": { + "component": "dial", + "$schema": "https://opensource.adobe.com/spectrum-tokens/schemas/token-types/scale-set.json", + "sets": { + "desktop": { + "$schema": "https://opensource.adobe.com/spectrum-tokens/schemas/token-types/dimension.json", + "value": "16px" + }, + "mobile": { + "$schema": "https://opensource.adobe.com/spectrum-tokens/schemas/token-types/dimension.json", + "value": "20px" + } + } + }, + "dial-controls-margin": { + "component": "dial", + "$schema": "https://opensource.adobe.com/spectrum-tokens/schemas/token-types/scale-set.json", + "sets": { + "desktop": { + "$schema": "https://opensource.adobe.com/spectrum-tokens/schemas/token-types/dimension.json", + "value": "8px" + }, + "mobile": { + "$schema": "https://opensource.adobe.com/spectrum-tokens/schemas/token-types/dimension.json", + "value": "10px" + } + } + }, + "dial-handle-block-margin": { + "component": "dial", + "$schema": "https://opensource.adobe.com/spectrum-tokens/schemas/token-types/scale-set.json", + "sets": { + "desktop": { + "$schema": "https://opensource.adobe.com/spectrum-tokens/schemas/token-types/dimension.json", + "value": "16px" + }, + "mobile": { + "$schema": "https://opensource.adobe.com/spectrum-tokens/schemas/token-types/dimension.json", + "value": "20px" + } + } + }, + "dial-handle-inline-margin": { + "component": "dial", + "$schema": "https://opensource.adobe.com/spectrum-tokens/schemas/token-types/scale-set.json", + "sets": { + "desktop": { + "$schema": "https://opensource.adobe.com/spectrum-tokens/schemas/token-types/dimension.json", + "value": "20px" + }, + "mobile": { + "$schema": "https://opensource.adobe.com/spectrum-tokens/schemas/token-types/dimension.json", + "value": "16px" + } + } + }, + "dial-handle-position": { + "component": "dial", + "$schema": "https://opensource.adobe.com/spectrum-tokens/schemas/token-types/scale-set.json", + "sets": { + "desktop": { + "$schema": "https://opensource.adobe.com/spectrum-tokens/schemas/token-types/dimension.json", + "value": "8px" + }, + "mobile": { + "$schema": "https://opensource.adobe.com/spectrum-tokens/schemas/token-types/dimension.json", + "value": "10px" + } + } + }, + "dial-label-container-top-to-text": { + "component": "dial", + "$schema": "https://opensource.adobe.com/spectrum-tokens/schemas/token-types/scale-set.json", + "sets": { + "desktop": { + "$schema": "https://opensource.adobe.com/spectrum-tokens/schemas/token-types/dimension.json", + "value": "4px" + }, + "mobile": { + "$schema": "https://opensource.adobe.com/spectrum-tokens/schemas/token-types/dimension.json", + "value": "5px" + } + } + }, + "dial-label-gap-y": { + "component": "dial", + "$schema": "https://opensource.adobe.com/spectrum-tokens/schemas/token-types/scale-set.json", + "sets": { + "desktop": { + "$schema": "https://opensource.adobe.com/spectrum-tokens/schemas/token-types/dimension.json", + "value": "5px" + }, + "mobile": { + "$schema": "https://opensource.adobe.com/spectrum-tokens/schemas/token-types/dimension.json", + "value": "6px" + } + } + } +} diff --git a/components/dialog/dist/metadata.json b/components/dialog/dist/metadata.json index 738156392db..358086a3e1a 100644 --- a/components/dialog/dist/metadata.json +++ b/components/dialog/dist/metadata.json @@ -71,7 +71,7 @@ "component": [], "global": [ "--spectrum-background-layer-2-color", - "--spectrum-black-rgb", + "--spectrum-black", "--spectrum-body-color", "--spectrum-body-sans-serif-font-style", "--spectrum-body-sans-serif-font-weight", diff --git a/components/dialog/index.css b/components/dialog/index.css index 357dbd6c68f..df30fae1e16 100644 --- a/components/dialog/index.css +++ b/components/dialog/index.css @@ -50,9 +50,10 @@ /* Hero */ --spectrum-standard-dialog-hero-block-size: 140px; - /* Passthrough for nested component(s) */ + /* @passthrough start */ --mod-buttongroup-justify-content: flex-end; --mod-buttongroup-flex-wrap: nowrap; + /* @passthrough end */ /* Fullscreen/fullscreenTakeover */ --spectrum-takeover-dialog-title-font-size: var(--spectrum-title-size-xxl); @@ -444,6 +445,6 @@ @media (forced-colors: active) { .spectrum-Dialog { - border: 1px solid rgb(var(--spectrum-black-rgb), var(--spectrum-overlay-opacity)); + border: 1px solid color-mix(in sRGB, var(--spectrum-black) var(--spectrum-overlay-opacity), transparent); } } diff --git a/components/dialog/tokens.json b/components/dialog/tokens.json new file mode 100644 index 00000000000..615c30d2bce --- /dev/null +++ b/components/dialog/tokens.json @@ -0,0 +1,302 @@ +{ + "standard-dialog-max-width": { + "component": "dialog", + "$schema": "https://opensource.adobe.com/spectrum-tokens/schemas/token-types/alias.json", + "value": "{standard-dialog-maximum-width-medium}" + }, + "standard-dialog-min-inline-size": { + "component": "dialog", + "$schema": "https://opensource.adobe.com/spectrum-tokens/schemas/token-types/alias.json", + "value": "{standard-dialog-minimum-width}" + }, + "standard-dialog-border-radius": { + "component": "dialog", + "$schema": "https://opensource.adobe.com/spectrum-tokens/schemas/token-types/alias.json", + "value": "{corner-radius-extra-large-default}" + }, + "standard-dialog-heading-font-weight": { + "component": "dialog", + "$schema": "https://opensource.adobe.com/spectrum-tokens/schemas/token-types/alias.json", + "value": "{title-sans-serif-font-weight}" + }, + "standard-dialog-heading-font-size": { + "component": "dialog", + "$schema": "https://opensource.adobe.com/spectrum-tokens/schemas/token-types/alias.json", + "value": "{standard-dialog-title-font-size}" + }, + "standard-dialog-heading-font-style": { + "component": "dialog", + "$schema": "https://opensource.adobe.com/spectrum-tokens/schemas/token-types/alias.json", + "value": "{title-sans-serif-font-style}" + }, + "standard-dialog-heading-font-family": { + "component": "dialog", + "$schema": "https://opensource.adobe.com/spectrum-tokens/schemas/token-types/alias.json", + "value": "{sans-font-family-stack}" + }, + "standard-dialog-description-font-weight": { + "component": "dialog", + "$schema": "https://opensource.adobe.com/spectrum-tokens/schemas/token-types/alias.json", + "value": "{body-sans-serif-font-weight}" + }, + "standard-dialog-description-font-size": { + "component": "dialog", + "$schema": "https://opensource.adobe.com/spectrum-tokens/schemas/token-types/alias.json", + "value": "{standard-dialog-body-font-size}" + }, + "standard-dialog-description-font-style": { + "component": "dialog", + "$schema": "https://opensource.adobe.com/spectrum-tokens/schemas/token-types/alias.json", + "value": "{body-sans-serif-font-style}" + }, + "standard-dialog-description-font-family": { + "component": "dialog", + "$schema": "https://opensource.adobe.com/spectrum-tokens/schemas/token-types/alias.json", + "value": "{sans-font-family-stack}" + }, + "standard-dialog-header-content-font-size": { + "component": "dialog", + "$schema": "https://opensource.adobe.com/spectrum-tokens/schemas/token-types/alias.json", + "value": "{standard-dialog-body-font-size}" + }, + "standard-dialog-heading-line-height": { + "component": "dialog", + "$schema": "https://opensource.adobe.com/spectrum-tokens/schemas/token-types/alias.json", + "value": "{title-line-height}" + }, + "standard-dialog-description-line-height": { + "component": "dialog", + "$schema": "https://opensource.adobe.com/spectrum-tokens/schemas/token-types/alias.json", + "value": "{line-height-200}" + }, + "standard-dialog-heading-text-color": { + "component": "dialog", + "$schema": "https://opensource.adobe.com/spectrum-tokens/schemas/token-types/alias.json", + "value": "{heading-color}" + }, + "standard-dialog-description-text-color": { + "component": "dialog", + "$schema": "https://opensource.adobe.com/spectrum-tokens/schemas/token-types/alias.json", + "value": "{body-color}" + }, + "standard-dialog-background-color": { + "component": "dialog", + "$schema": "https://opensource.adobe.com/spectrum-tokens/schemas/token-types/alias.json", + "value": "{background-layer-2-color}" + }, + "standard-dialog-padding": { + "component": "dialog", + "$schema": "https://opensource.adobe.com/spectrum-tokens/schemas/token-types/alias.json", + "value": "{standard-dialog-spacing-edge-to-content}" + }, + "standard-dialog-spacing-title-to-description": { + "component": "dialog", + "$schema": "https://opensource.adobe.com/spectrum-tokens/schemas/token-types/alias.json", + "value": "{spacing-300}" + }, + "standard-dialog-spacing-description-to-footer": { + "component": "dialog", + "$schema": "https://opensource.adobe.com/spectrum-tokens/schemas/token-types/alias.json", + "value": "{spacing-500}" + }, + "standard-dialog-spacing-title-to-header-content": { + "component": "dialog", + "$schema": "https://opensource.adobe.com/spectrum-tokens/schemas/token-types/alias.json", + "value": "{spacing-400}" + }, + "standard-dialog-spacing-edge-to-header-content-inline-end": { + "component": "dialog", + "$schema": "https://opensource.adobe.com/spectrum-tokens/schemas/token-types/alias.json", + "value": "{spacing-400}" + }, + "standard-dialog-spacing-footer-to-button-group": { + "component": "dialog", + "$schema": "https://opensource.adobe.com/spectrum-tokens/schemas/token-types/alias.json", + "value": "{spacing-400}" + }, + "standard-dialog-spacing-grid-padding": { + "component": "dialog", + "$schema": "https://opensource.adobe.com/spectrum-tokens/schemas/token-types/alias.json", + "value": "{standard-dialog-padding}" + }, + "standard-dialog-spacing-edge-to-close-button": { + "component": "dialog", + "$schema": "https://opensource.adobe.com/spectrum-tokens/schemas/token-types/alias.json", + "value": "{spacing-200}" + }, + "standard-dialog-hero-block-size": { + "component": "dialog", + "$schema": "https://opensource.adobe.com/spectrum-tokens/schemas/token-types/dimension.json", + "value": "140px" + }, + "takeover-dialog-title-font-size": { + "component": "dialog", + "$schema": "https://opensource.adobe.com/spectrum-tokens/schemas/token-types/alias.json", + "value": "{title-size-xxl}" + }, + "takeover-dialog-grid-spacing": { + "component": "dialog", + "$schema": "https://opensource.adobe.com/spectrum-tokens/schemas/token-types/alias.json", + "value": "{takeover-dialog-spacing-grid-padding}" + }, + "takeover-dialog-spacing-header-content-gap": { + "component": "dialog", + "$schema": "https://opensource.adobe.com/spectrum-tokens/schemas/token-types/alias.json", + "value": "{takeover-dialog-spacing-header-gap}" + }, + "takeover-dialog-spacing-title-to-content": { + "component": "dialog", + "$schema": "https://opensource.adobe.com/spectrum-tokens/schemas/token-types/alias.json", + "value": "{takeover-dialog-spacing-title-to-body}" + }, + "takeover-dialog-inline-size": { + "component": "dialog", + "$schema": "https://opensource.adobe.com/spectrum-tokens/schemas/token-types/alias.json", + "value": "{takeover-dialog-width}" + }, + "takeover-dialog-block-size": { + "component": "dialog", + "$schema": "https://opensource.adobe.com/spectrum-tokens/schemas/token-types/alias.json", + "value": "{takeover-dialog-height}" + }, + "dialog-confirm-border-radius": { + "component": "dialog", + "$schema": "https://opensource.adobe.com/spectrum-tokens/schemas/token-types/scale-set.json", + "sets": { + "desktop": { + "$schema": "https://opensource.adobe.com/spectrum-tokens/schemas/token-types/dimension.json", + "value": "4px" + }, + "mobile": { + "$schema": "https://opensource.adobe.com/spectrum-tokens/schemas/token-types/dimension.json", + "value": "5px" + } + } + }, + "dialog-confirm-description-text-size": { + "component": "dialog", + "$schema": "https://opensource.adobe.com/spectrum-tokens/schemas/token-types/scale-set.json", + "sets": { + "desktop": { + "$schema": "https://opensource.adobe.com/spectrum-tokens/schemas/token-types/dimension.json", + "value": "14px" + }, + "mobile": { + "$schema": "https://opensource.adobe.com/spectrum-tokens/schemas/token-types/dimension.json", + "value": "15px" + } + } + }, + "dialog-confirm-entry-animation-distance": { + "component": "dialog", + "$schema": "https://opensource.adobe.com/spectrum-tokens/schemas/token-types/scale-set.json", + "sets": { + "desktop": { + "$schema": "https://opensource.adobe.com/spectrum-tokens/schemas/token-types/dimension.json", + "value": "20px" + }, + "mobile": { + "$schema": "https://opensource.adobe.com/spectrum-tokens/schemas/token-types/dimension.json", + "value": "25px" + } + } + }, + "dialog-confirm-hero-height": { + "component": "dialog", + "$schema": "https://opensource.adobe.com/spectrum-tokens/schemas/token-types/scale-set.json", + "sets": { + "desktop": { + "$schema": "https://opensource.adobe.com/spectrum-tokens/schemas/token-types/dimension.json", + "value": "128px" + }, + "mobile": { + "$schema": "https://opensource.adobe.com/spectrum-tokens/schemas/token-types/dimension.json", + "value": "160px" + } + } + }, + "dialog-confirm-padding-grid": { + "component": "dialog", + "$schema": "https://opensource.adobe.com/spectrum-tokens/schemas/token-types/scale-set.json", + "sets": { + "desktop": { + "$schema": "https://opensource.adobe.com/spectrum-tokens/schemas/token-types/dimension.json", + "value": "40px" + }, + "mobile": { + "$schema": "https://opensource.adobe.com/spectrum-tokens/schemas/token-types/dimension.json", + "value": "24px" + } + } + }, + "dialog-confirm-title-text-size": { + "component": "dialog", + "$schema": "https://opensource.adobe.com/spectrum-tokens/schemas/token-types/scale-set.json", + "sets": { + "desktop": { + "$schema": "https://opensource.adobe.com/spectrum-tokens/schemas/token-types/dimension.json", + "value": "18px" + }, + "mobile": { + "$schema": "https://opensource.adobe.com/spectrum-tokens/schemas/token-types/dimension.json", + "value": "19px" + } + } + }, + "standard-dialog-spacing-edge-to-content": { + "component": "dialog", + "$schema": "https://opensource.adobe.com/spectrum-tokens/schemas/token-types/scale-set.json", + "sets": { + "desktop": { + "$schema": "https://opensource.adobe.com/spectrum-tokens/schemas/token-types/alias.json", + "value": "{spacing-500}" + }, + "mobile": { + "$schema": "https://opensource.adobe.com/spectrum-tokens/schemas/token-types/alias.json", + "value": "{spacing-400}" + } + } + }, + "takeover-dialog-spacing-grid-padding": { + "component": "dialog", + "$schema": "https://opensource.adobe.com/spectrum-tokens/schemas/token-types/scale-set.json", + "sets": { + "desktop": { + "$schema": "https://opensource.adobe.com/spectrum-tokens/schemas/token-types/alias.json", + "value": "{spacing-500}" + }, + "mobile": { + "$schema": "https://opensource.adobe.com/spectrum-tokens/schemas/token-types/alias.json", + "value": "{spacing-400}" + } + } + }, + "takeover-dialog-spacing-header-gap": { + "component": "dialog", + "$schema": "https://opensource.adobe.com/spectrum-tokens/schemas/token-types/scale-set.json", + "sets": { + "desktop": { + "$schema": "https://opensource.adobe.com/spectrum-tokens/schemas/token-types/alias.json", + "value": "{spacing-400}" + }, + "mobile": { + "$schema": "https://opensource.adobe.com/spectrum-tokens/schemas/token-types/alias.json", + "value": "{spacing-300}" + } + } + }, + "takeover-dialog-spacing-title-to-body": { + "component": "dialog", + "$schema": "https://opensource.adobe.com/spectrum-tokens/schemas/token-types/scale-set.json", + "sets": { + "desktop": { + "$schema": "https://opensource.adobe.com/spectrum-tokens/schemas/token-types/alias.json", + "value": "{spacing-500}" + }, + "mobile": { + "$schema": "https://opensource.adobe.com/spectrum-tokens/schemas/token-types/alias.json", + "value": "{spacing-400}" + } + } + } +} diff --git a/components/divider/tokens.json b/components/divider/tokens.json new file mode 100644 index 00000000000..b2c9a0cdfae --- /dev/null +++ b/components/divider/tokens.json @@ -0,0 +1,22 @@ +{ + "divider-background-color": { + "component": "divider", + "$schema": "https://opensource.adobe.com/spectrum-tokens/schemas/token-types/alias.json", + "value": "{gray-200}" + }, + "divider-thickness": { + "component": "divider", + "$schema": "https://opensource.adobe.com/spectrum-tokens/schemas/token-types/alias.json", + "value": "{divider-thickness-medium}" + }, + "divider-inline-minimum-size": { + "component": "divider", + "$schema": "https://opensource.adobe.com/spectrum-tokens/schemas/token-types/alias.json", + "value": "{divider-horizontal-minimum-width}" + }, + "divider-block-minimum-size": { + "component": "divider", + "$schema": "https://opensource.adobe.com/spectrum-tokens/schemas/token-types/alias.json", + "value": "{divider-vertical-minimum-height}" + } +} diff --git a/components/dropindicator/tokens.json b/components/dropindicator/tokens.json new file mode 100644 index 00000000000..610c3829b11 --- /dev/null +++ b/components/dropindicator/tokens.json @@ -0,0 +1,26 @@ +{ + "dropindicator-border-size": { + "component": "drop-indicator", + "$schema": "https://opensource.adobe.com/spectrum-tokens/schemas/token-types/alias.json", + "value": "{border-width-200}" + }, + "dropindicator-circle-size": { + "component": "drop-indicator", + "$schema": "https://opensource.adobe.com/spectrum-tokens/schemas/token-types/dimension.json", + "value": "12px" + }, + "dropindicator-color": { + "component": "drop-indicator", + "$schema": "https://opensource.adobe.com/spectrum-tokens/schemas/token-types/color-set.json", + "sets": { + "dark": { + "$schema": "https://opensource.adobe.com/spectrum-tokens/schemas/token-types/alias.json", + "value": "{blue-700}" + }, + "light": { + "$schema": "https://opensource.adobe.com/spectrum-tokens/schemas/token-types/alias.json", + "value": "{blue-800}" + } + } + } +} diff --git a/components/dropzone/dist/metadata.json b/components/dropzone/dist/metadata.json index e91812f2d27..eaf506c37eb 100644 --- a/components/dropzone/dist/metadata.json +++ b/components/dropzone/dist/metadata.json @@ -53,7 +53,6 @@ "--spectrum-drop-zone-background-color", "--spectrum-drop-zone-background-color-opacity", "--spectrum-drop-zone-background-color-opacity-filled", - "--spectrum-drop-zone-background-color-rgb", "--spectrum-drop-zone-body-font-size", "--spectrum-drop-zone-body-to-action", "--spectrum-drop-zone-border-color", diff --git a/components/dropzone/index.css b/components/dropzone/index.css index c5824560074..4606c5a88a0 100644 --- a/components/dropzone/index.css +++ b/components/dropzone/index.css @@ -20,7 +20,6 @@ --spectrum-drop-zone-inline-size: var(--spectrum-drop-zone-width); /* Color */ - --spectrum-drop-zone-background-color: var(--spectrum-drop-zone-background-color-rgb); --spectrum-drop-zone-border-color-hover: var(--spectrum-accent-visual-color); --spectrum-drop-zone-illustration-color-hover: var(--spectrum-accent-content-color-default); --spectrum-drop-zone-body-to-action: var(--spectrum-spacing-300); @@ -68,7 +67,7 @@ &.is-dragged { --mod-drop-zone-border-style: var(--mod-drop-zone-border-style-dragged, solid); - --mod-drop-zone-background-color: rgba(var(--spectrum-drop-zone-background-color), var(--mod-drop-zone-background-color-opacity, var(--spectrum-drop-zone-dragged-background-color))); + --mod-drop-zone-background-color: color-mix(in sRGB, var(--spectrum-drop-zone-background-color) var(--mod-drop-zone-background-color-opacity, var(--spectrum-drop-zone-dragged-background-color), transparent)); --spectrum-drop-zone-border-color: var(--highcontrast-drop-zone-border-color-hover, var(--mod-drop-zone-border-color-hover, var(--spectrum-drop-zone-border-color-hover))); /* Updated values for a nested illustrated message when state changes */ @@ -83,7 +82,7 @@ &.is-filled { /* note: the below applies to .is-filled.is-dragged but works here b/c dragged is the only state applying background color */ - --mod-drop-zone-background-color: rgba(var(--spectrum-drop-zone-background-color), var(--mod-drop-zone-background-color-opacity-filled, var(--spectrum-drop-zone-background-color-opacity-filled))); + --mod-drop-zone-background-color: color-mix(in sRGB, var(--spectrum-drop-zone-background-color) var(--mod-drop-zone-background-color-opacity-filled, var(--spectrum-drop-zone-background-color-opacity-filled), transparent)); /* Updated values for a nested illustrated message when state changes */ --mod-illustrated-message-display: none; diff --git a/components/dropzone/tokens.json b/components/dropzone/tokens.json new file mode 100644 index 00000000000..00f0f9441ed --- /dev/null +++ b/components/dropzone/tokens.json @@ -0,0 +1,121 @@ +{ + "drop-zone-padding": { + "component": "drop-zone", + "$schema": "https://opensource.adobe.com/spectrum-tokens/schemas/token-types/alias.json", + "value": "{spacing-400}" + }, + "drop-zone-border-width": { + "component": "drop-zone", + "$schema": "https://opensource.adobe.com/spectrum-tokens/schemas/token-types/alias.json", + "value": "{border-width-200}" + }, + "drop-zone-corner-radius": { + "component": "drop-zone", + "$schema": "https://opensource.adobe.com/spectrum-tokens/schemas/token-types/alias.json", + "value": "{corner-radius-700}" + }, + "drop-zone-border-color": { + "component": "drop-zone", + "$schema": "https://opensource.adobe.com/spectrum-tokens/schemas/token-types/alias.json", + "value": "{gray-300}" + }, + "drop-zone-inline-size": { + "component": "drop-zone", + "$schema": "https://opensource.adobe.com/spectrum-tokens/schemas/token-types/alias.json", + "value": "{drop-zone-width}" + }, + "drop-zone-border-color-hover": { + "component": "drop-zone", + "$schema": "https://opensource.adobe.com/spectrum-tokens/schemas/token-types/alias.json", + "value": "{accent-visual-color}" + }, + "drop-zone-illustration-color-hover": { + "component": "drop-zone", + "$schema": "https://opensource.adobe.com/spectrum-tokens/schemas/token-types/alias.json", + "value": "{accent-content-color-default}" + }, + "drop-zone-body-to-action": { + "component": "drop-zone", + "$schema": "https://opensource.adobe.com/spectrum-tokens/schemas/token-types/alias.json", + "value": "{spacing-300}" + }, + "drop-zone-stroke-dash-gap": { + "component": "drop-zone", + "$schema": "https://opensource.adobe.com/spectrum-tokens/schemas/token-types/alias.json", + "value": "{drop-zone-border-dash-gap}" + }, + "drop-zone-stroke-dash-length": { + "component": "drop-zone", + "$schema": "https://opensource.adobe.com/spectrum-tokens/schemas/token-types/alias.json", + "value": "{drop-zone-border-dash-length}" + }, + "drop-zone-dragged-background-color": { + "component": "drop-zone", + "$schema": "https://opensource.adobe.com/spectrum-tokens/schemas/token-types/alias.json", + "value": "{drop-zone-background-color-opacity}" + }, + "drop-zone-content-max-width": { + "component": "drop-zone", + "$schema": "https://opensource.adobe.com/spectrum-tokens/schemas/token-types/alias.json", + "value": "{drop-zone-content-maximum-width}" + }, + "drop-zone-content-top-to-text": { + "component": "drop-zone", + "$schema": "https://opensource.adobe.com/spectrum-tokens/schemas/token-types/alias.json", + "value": "{component-top-to-text-300}" + }, + "drop-zone-content-bottom-to-text": { + "component": "drop-zone", + "$schema": "https://opensource.adobe.com/spectrum-tokens/schemas/token-types/alias.json", + "value": "{component-bottom-to-text-300}" + }, + "drop-zone-component-height": { + "component": "drop-zone", + "$schema": "https://opensource.adobe.com/spectrum-tokens/schemas/token-types/alias.json", + "value": "{component-height-300}" + }, + "drop-zone-edge-to-text": { + "component": "drop-zone", + "$schema": "https://opensource.adobe.com/spectrum-tokens/schemas/token-types/alias.json", + "value": "{component-edge-to-text-300}" + }, + "drop-zone-content-font-family": { + "component": "drop-zone", + "$schema": "https://opensource.adobe.com/spectrum-tokens/schemas/token-types/alias.json", + "value": "{sans-font-family-stack}" + }, + "drop-zone-content-font-weight": { + "component": "drop-zone", + "$schema": "https://opensource.adobe.com/spectrum-tokens/schemas/token-types/alias.json", + "value": "{bold-font-weight}" + }, + "drop-zone-content-font-size": { + "component": "drop-zone", + "$schema": "https://opensource.adobe.com/spectrum-tokens/schemas/token-types/alias.json", + "value": "{font-size-300}" + }, + "drop-zone-title-line-height": { + "component": "drop-zone", + "$schema": "https://opensource.adobe.com/spectrum-tokens/schemas/token-types/alias.json", + "value": "{line-height-100}" + }, + "drop-zone-content-background-color": { + "component": "drop-zone", + "$schema": "https://opensource.adobe.com/spectrum-tokens/schemas/token-types/alias.json", + "value": "{accent-visual-color}" + }, + "drop-zone-background-color": { + "component": "drop-zone", + "$schema": "https://opensource.adobe.com/spectrum-tokens/schemas/token-types/color-set.json", + "sets": { + "dark": { + "$schema": "https://opensource.adobe.com/spectrum-tokens/schemas/token-types/alias.json", + "value": "{accent-color-900}" + }, + "light": { + "$schema": "https://opensource.adobe.com/spectrum-tokens/schemas/token-types/alias.json", + "value": "{accent-color-800}" + } + } + } +} diff --git a/components/fieldgroup/tokens.json b/components/fieldgroup/tokens.json new file mode 100644 index 00000000000..280e6b54b37 --- /dev/null +++ b/components/fieldgroup/tokens.json @@ -0,0 +1,7 @@ +{ + "fieldgroup-item-spacing": { + "component": "field-group", + "$schema": "https://opensource.adobe.com/spectrum-tokens/schemas/token-types/alias.json", + "value": "{spacing-300}" + } +} diff --git a/components/fieldlabel/tokens.json b/components/fieldlabel/tokens.json new file mode 100644 index 00000000000..266690c5bd7 --- /dev/null +++ b/components/fieldlabel/tokens.json @@ -0,0 +1,58 @@ +{ + "fieldlabel-min-height": { + "component": "field-label", + "$schema": "https://opensource.adobe.com/spectrum-tokens/schemas/token-types/alias.json", + "value": "{component-height-100}" + }, + "fieldlabel-color": { + "component": "field-label", + "$schema": "https://opensource.adobe.com/spectrum-tokens/schemas/token-types/alias.json", + "value": "{neutral-subdued-content-color-default}", + "sets": { + "whcm": { + "$schema": "https://opensource.adobe.com/spectrum-tokens/schemas/token-types/color.json", + "value": "GrayText" + } + } + }, + "fieldlabel-top-to-text": { + "component": "field-label", + "$schema": "https://opensource.adobe.com/spectrum-tokens/schemas/token-types/alias.json", + "value": "{component-top-to-text-100}" + }, + "fieldlabel-bottom-to-text": { + "component": "field-label", + "$schema": "https://opensource.adobe.com/spectrum-tokens/schemas/token-types/alias.json", + "value": "{component-bottom-to-text-100}" + }, + "fieldlabel-text-to-asterisk": { + "component": "field-label", + "$schema": "https://opensource.adobe.com/spectrum-tokens/schemas/token-types/alias.json", + "value": "{field-label-text-to-asterisk-medium}" + }, + "fieldlabel-font-size": { + "component": "field-label", + "$schema": "https://opensource.adobe.com/spectrum-tokens/schemas/token-types/alias.json", + "value": "{font-size-100}" + }, + "fieldlabel-font-weight": { + "component": "field-label", + "$schema": "https://opensource.adobe.com/spectrum-tokens/schemas/token-types/alias.json", + "value": "{regular-font-weight}" + }, + "fieldlabel-line-height": { + "component": "field-label", + "$schema": "https://opensource.adobe.com/spectrum-tokens/schemas/token-types/alias.json", + "value": "{line-height-100}" + }, + "fieldlabel-side-margin-block-start": { + "component": "field-label", + "$schema": "https://opensource.adobe.com/spectrum-tokens/schemas/token-types/alias.json", + "value": "{field-label-top-margin-medium}" + }, + "fieldlabel-side-padding-right": { + "component": "field-label", + "$schema": "https://opensource.adobe.com/spectrum-tokens/schemas/token-types/alias.json", + "value": "{spacing-200}" + } +} diff --git a/components/floatingactionbutton/tokens.json b/components/floatingactionbutton/tokens.json new file mode 100644 index 00000000000..8100480d312 --- /dev/null +++ b/components/floatingactionbutton/tokens.json @@ -0,0 +1,125 @@ +{ + "floating-action-button-size": { + "component": "floating-action-button", + "$schema": "https://opensource.adobe.com/spectrum-tokens/schemas/token-types/alias.json", + "value": "{component-height-200}" + }, + "floating-action-button-icon-size": { + "component": "floating-action-button", + "$schema": "https://opensource.adobe.com/spectrum-tokens/schemas/token-types/alias.json", + "value": "{workflow-icon-size-200}" + }, + "floating-action-button-padding": { + "component": "floating-action-button", + "$schema": "https://opensource.adobe.com/spectrum-tokens/schemas/token-types/alias.json", + "value": "{component-pill-edge-to-visual-only-200}" + }, + "floating-action-button-margin": { + "component": "floating-action-button", + "$schema": "https://opensource.adobe.com/spectrum-tokens/schemas/token-types/alias.json", + "value": "{spacing-200}" + }, + "floating-action-button-background-color": { + "component": "floating-action-button", + "$schema": "https://opensource.adobe.com/spectrum-tokens/schemas/token-types/alias.json", + "value": "{accent-background-color-default}", + "sets": { + "whcm": { + "$schema": "https://opensource.adobe.com/spectrum-tokens/schemas/token-types/color.json", + "value": "ButtonText" + } + } + }, + "floating-action-button-background-color-hover": { + "component": "floating-action-button", + "$schema": "https://opensource.adobe.com/spectrum-tokens/schemas/token-types/alias.json", + "value": "{accent-background-color-hover}", + "sets": { + "whcm": { + "$schema": "https://opensource.adobe.com/spectrum-tokens/schemas/token-types/color.json", + "value": "Highlight" + } + } + }, + "floating-action-button-background-color-down": { + "component": "floating-action-button", + "$schema": "https://opensource.adobe.com/spectrum-tokens/schemas/token-types/alias.json", + "value": "{accent-background-color-down}", + "sets": { + "whcm": { + "$schema": "https://opensource.adobe.com/spectrum-tokens/schemas/token-types/color.json", + "value": "Highlight" + } + } + }, + "floating-action-button-background-color-key-focus": { + "component": "floating-action-button", + "$schema": "https://opensource.adobe.com/spectrum-tokens/schemas/token-types/alias.json", + "value": "{accent-background-color-key-focus}", + "sets": { + "whcm": { + "$schema": "https://opensource.adobe.com/spectrum-tokens/schemas/token-types/color.json", + "value": "Highlight" + } + } + }, + "floating-action-button-icon-color": { + "component": "floating-action-button", + "$schema": "https://opensource.adobe.com/spectrum-tokens/schemas/token-types/alias.json", + "value": "{white}", + "sets": { + "whcm": { + "$schema": "https://opensource.adobe.com/spectrum-tokens/schemas/token-types/color.json", + "value": "ButtonFace" + } + } + }, + "floating-action-button-icon-color-hover": { + "component": "floating-action-button", + "$schema": "https://opensource.adobe.com/spectrum-tokens/schemas/token-types/alias.json", + "value": "{white}", + "sets": { + "whcm": { + "$schema": "https://opensource.adobe.com/spectrum-tokens/schemas/token-types/color.json", + "value": "ButtonFace" + } + } + }, + "floating-action-button-icon-color-down": { + "component": "floating-action-button", + "$schema": "https://opensource.adobe.com/spectrum-tokens/schemas/token-types/alias.json", + "value": "{white}", + "sets": { + "whcm": { + "$schema": "https://opensource.adobe.com/spectrum-tokens/schemas/token-types/color.json", + "value": "ButtonFace" + } + } + }, + "floating-action-button-icon-color-key-focus": { + "component": "floating-action-button", + "$schema": "https://opensource.adobe.com/spectrum-tokens/schemas/token-types/alias.json", + "value": "{white}", + "sets": { + "whcm": { + "$schema": "https://opensource.adobe.com/spectrum-tokens/schemas/token-types/color.json", + "value": "ButtonFace" + } + } + }, + "floating-action-button-drop-shadow-y": { + "component": "floating-action-button", + "$schema": "https://opensource.adobe.com/spectrum-tokens/schemas/token-types/alias.json", + "value": "{drop-shadow-y}" + }, + "floating-action-button-drop-shadow-blur": { + "component": "floating-action-button", + "$schema": "https://opensource.adobe.com/spectrum-tokens/schemas/token-types/alias.json", + "value": "{drop-shadow-blur}" + }, + "floating-action-button-drop-shadow-color": { + "component": "floating-action-button", + "$schema": "https://opensource.adobe.com/spectrum-tokens/schemas/token-types/alias.json", + "value": "{drop-shadow-color}" + } +} diff --git a/components/form/tokens.json b/components/form/tokens.json new file mode 100644 index 00000000000..3886f837d01 --- /dev/null +++ b/components/form/tokens.json @@ -0,0 +1,27 @@ +{ + "form-item-block-spacing": { + "component": "form", + "$schema": "https://opensource.adobe.com/spectrum-tokens/schemas/token-types/alias.json", + "value": "{spacing-300}" + }, + "form-item-block-spacing-labels-above": { + "component": "form", + "$schema": "https://opensource.adobe.com/spectrum-tokens/schemas/token-types/alias.json", + "value": "{spacing-200}" + }, + "form-grid-template-columns": { + "component": "form", + "$schema": "https://opensource.adobe.com/spectrum-tokens/schemas/token-types/dimension.json", + "value": "auto auto" + }, + "form-grid-template-columns-labels-above": { + "component": "form", + "$schema": "https://opensource.adobe.com/spectrum-tokens/schemas/token-types/dimension.json", + "value": "auto" + }, + "form-item-disabled-content-color": { + "component": "form", + "$schema": "https://opensource.adobe.com/spectrum-tokens/schemas/token-types/alias.json", + "value": "{disabled-content-color}" + } +} diff --git a/components/helptext/tokens.json b/components/helptext/tokens.json new file mode 100644 index 00000000000..d6bbabdaeaa --- /dev/null +++ b/components/helptext/tokens.json @@ -0,0 +1,198 @@ +{ + "helptext-min-height": { + "component": "helptext", + "$schema": "https://opensource.adobe.com/spectrum-tokens/schemas/token-types/scale-set.json", + "value": "{component-height-100}", + "sets": { + "size-s": { + "$schema": "https://opensource.adobe.com/spectrum-tokens/schemas/token-types/alias.json", + "value": "{component-height-75}" + }, + "size-l": { + "$schema": "https://opensource.adobe.com/spectrum-tokens/schemas/token-types/alias.json", + "value": "{component-height-200}" + }, + "size-xl": { + "$schema": "https://opensource.adobe.com/spectrum-tokens/schemas/token-types/alias.json", + "value": "{component-height-300}" + } + } + }, + "helptext-icon-size": { + "component": "helptext", + "$schema": "https://opensource.adobe.com/spectrum-tokens/schemas/token-types/scale-set.json", + "value": "{workflow-icon-size-100}", + "sets": { + "size-s": { + "$schema": "https://opensource.adobe.com/spectrum-tokens/schemas/token-types/alias.json", + "value": "{workflow-icon-size-75}" + }, + "size-l": { + "$schema": "https://opensource.adobe.com/spectrum-tokens/schemas/token-types/alias.json", + "value": "{workflow-icon-size-200}" + }, + "size-xl": { + "$schema": "https://opensource.adobe.com/spectrum-tokens/schemas/token-types/alias.json", + "value": "{workflow-icon-size-300}" + } + } + }, + "helptext-text-to-visual": { + "component": "helptext", + "$schema": "https://opensource.adobe.com/spectrum-tokens/schemas/token-types/scale-set.json", + "sets": { + "size-s": { + "$schema": "https://opensource.adobe.com/spectrum-tokens/schemas/token-types/alias.json", + "value": "{text-to-visual-75}" + }, + "size-l": { + "$schema": "https://opensource.adobe.com/spectrum-tokens/schemas/token-types/alias.json", + "value": "{text-to-visual-200}" + }, + "size-xl": { + "$schema": "https://opensource.adobe.com/spectrum-tokens/schemas/token-types/alias.json", + "value": "{text-to-visual-300}" + } + } + }, + "helptext-edge-to-workflow-icon": { + "component": "helptext", + "$schema": "https://opensource.adobe.com/spectrum-tokens/schemas/token-types/scale-set.json", + "value": "{component-top-to-workflow-icon-100}", + "sets": { + "size-s": { + "$schema": "https://opensource.adobe.com/spectrum-tokens/schemas/token-types/alias.json", + "value": "{component-top-to-workflow-icon-75}" + }, + "size-l": { + "$schema": "https://opensource.adobe.com/spectrum-tokens/schemas/token-types/alias.json", + "value": "{component-top-to-workflow-icon-200}" + }, + "size-xl": { + "$schema": "https://opensource.adobe.com/spectrum-tokens/schemas/token-types/alias.json", + "value": "{component-top-to-workflow-icon-300}" + } + } + }, + "helptext-top-to-text": { + "component": "helptext", + "$schema": "https://opensource.adobe.com/spectrum-tokens/schemas/token-types/scale-set.json", + "value": "{component-top-to-text-100}", + "sets": { + "size-s": { + "$schema": "https://opensource.adobe.com/spectrum-tokens/schemas/token-types/alias.json", + "value": "{component-top-to-text-75}" + }, + "size-l": { + "$schema": "https://opensource.adobe.com/spectrum-tokens/schemas/token-types/alias.json", + "value": "{component-top-to-text-200}" + }, + "size-xl": { + "$schema": "https://opensource.adobe.com/spectrum-tokens/schemas/token-types/alias.json", + "value": "{component-top-to-text-300}" + } + } + }, + "helptext-bottom-to-text": { + "component": "helptext", + "$schema": "https://opensource.adobe.com/spectrum-tokens/schemas/token-types/scale-set.json", + "value": "{component-bottom-to-text-100}", + "sets": { + "size-s": { + "$schema": "https://opensource.adobe.com/spectrum-tokens/schemas/token-types/alias.json", + "value": "{component-bottom-to-text-75}" + }, + "size-l": { + "$schema": "https://opensource.adobe.com/spectrum-tokens/schemas/token-types/alias.json", + "value": "{component-bottom-to-text-200}" + }, + "size-xl": { + "$schema": "https://opensource.adobe.com/spectrum-tokens/schemas/token-types/alias.json", + "value": "{component-bottom-to-text-300}" + } + } + }, + "helptext-font-size": { + "component": "helptext", + "$schema": "https://opensource.adobe.com/spectrum-tokens/schemas/token-types/scale-set.json", + "value": "{font-size-100}", + "sets": { + "size-s": { + "$schema": "https://opensource.adobe.com/spectrum-tokens/schemas/token-types/alias.json", + "value": "{font-size-75}" + }, + "size-l": { + "$schema": "https://opensource.adobe.com/spectrum-tokens/schemas/token-types/alias.json", + "value": "{font-size-200}" + }, + "size-xl": { + "$schema": "https://opensource.adobe.com/spectrum-tokens/schemas/token-types/alias.json", + "value": "{font-size-300}" + } + } + }, + "helptext-font-family": { + "component": "helptext", + "$schema": "https://opensource.adobe.com/spectrum-tokens/schemas/token-types/alias.json", + "value": "{sans-font-family-stack}" + }, + "helptext-font-style": { + "component": "helptext", + "$schema": "https://opensource.adobe.com/spectrum-tokens/schemas/token-types/alias.json", + "value": "{default-font-style}" + }, + "helptext-line-height": { + "component": "helptext", + "$schema": "https://opensource.adobe.com/spectrum-tokens/schemas/token-types/alias.json", + "value": "{line-height-100}" + }, + "helptext-font-weight": { + "component": "helptext", + "$schema": "https://opensource.adobe.com/spectrum-tokens/schemas/token-types/alias.json", + "value": "{regular-font-weight}" + }, + "helptext-content-color-default": { + "component": "helptext", + "$schema": "https://opensource.adobe.com/spectrum-tokens/schemas/token-types/alias.json", + "value": "{neutral-subdued-content-color-default}", + "sets": { + "whcm": { + "$schema": "https://opensource.adobe.com/spectrum-tokens/schemas/token-types/color.json", + "value": "CanvasText" + } + } + }, + "helptext-icon-color-default": { + "component": "helptext", + "$schema": "https://opensource.adobe.com/spectrum-tokens/schemas/token-types/alias.json", + "value": "{neutral-subdued-content-color-default}", + "sets": { + "whcm": { + "$schema": "https://opensource.adobe.com/spectrum-tokens/schemas/token-types/color.json", + "value": "CanvasText" + } + } + }, + "helptext-content-color-disabled": { + "component": "helptext", + "$schema": "https://opensource.adobe.com/spectrum-tokens/schemas/token-types/alias.json", + "value": "{disabled-content-color}", + "sets": { + "whcm": { + "$schema": "https://opensource.adobe.com/spectrum-tokens/schemas/token-types/color.json", + "value": "GrayText" + } + } + }, + "helptext-icon-color-disabled": { + "component": "helptext", + "$schema": "https://opensource.adobe.com/spectrum-tokens/schemas/token-types/alias.json", + "value": "{disabled-content-color}", + "sets": { + "whcm": { + "$schema": "https://opensource.adobe.com/spectrum-tokens/schemas/token-types/color.json", + "value": "GrayText" + } + } + } +} diff --git a/components/icon/tokens.json b/components/icon/tokens.json new file mode 100644 index 00000000000..fe2fe4e6e90 --- /dev/null +++ b/components/icon/tokens.json @@ -0,0 +1,17 @@ +{ + "icon-size": { + "component": "icon", + "$schema": "https://opensource.adobe.com/spectrum-tokens/schemas/token-types/alias.json", + "value": "{workflow-icon-size-100}" + }, + "icon-inline-size": { + "component": "icon", + "$schema": "https://opensource.adobe.com/spectrum-tokens/schemas/token-types/alias.json", + "value": "{icon-size}" + }, + "icon-block-size": { + "component": "icon", + "$schema": "https://opensource.adobe.com/spectrum-tokens/schemas/token-types/alias.json", + "value": "{icon-size}" + } +} diff --git a/components/illustratedmessage/tokens.json b/components/illustratedmessage/tokens.json new file mode 100644 index 00000000000..498ed06cd3f --- /dev/null +++ b/components/illustratedmessage/tokens.json @@ -0,0 +1,145 @@ +{ + "illustrated-message-heading-to-description": { + "component": "illustrated-message", + "$schema": "https://opensource.adobe.com/spectrum-tokens/schemas/token-types/alias.json", + "value": "{spacing-75}" + }, + "illustrated-message-illustration-to-heading": { + "component": "illustrated-message", + "$schema": "https://opensource.adobe.com/spectrum-tokens/schemas/token-types/scale-set.json", + "sets": { + "default": { + "$schema": "https://opensource.adobe.com/spectrum-tokens/schemas/token-types/alias.json", + "value": "{spacing-200}" + }, + "l": { + "$schema": "https://opensource.adobe.com/spectrum-tokens/schemas/token-types/alias.json", + "value": "{spacing-100}" + } + } + }, + "illustrated-message-illustration-to-content": { + "component": "illustrated-message", + "$schema": "https://opensource.adobe.com/spectrum-tokens/schemas/token-types/scale-set.json", + "sets": { + "default": { + "$schema": "https://opensource.adobe.com/spectrum-tokens/schemas/token-types/alias.json", + "value": "{spacing-200}" + }, + "l": { + "$schema": "https://opensource.adobe.com/spectrum-tokens/schemas/token-types/alias.json", + "value": "{spacing-100}" + } + } + }, + "illustrated-message-description-to-action": { + "component": "illustrated-message", + "$schema": "https://opensource.adobe.com/spectrum-tokens/schemas/token-types/alias.json", + "value": "{spacing-300}" + }, + "illustrated-message-illustration-color": { + "component": "illustrated-message", + "$schema": "https://opensource.adobe.com/spectrum-tokens/schemas/token-types/alias.json", + "value": "{neutral-content-color-default}", + "sets": { + "whcm": { + "$schema": "https://opensource.adobe.com/spectrum-tokens/schemas/token-types/color.json", + "value": "CanvasText" + } + } + }, + "illustrated-message-illustration-size": { + "component": "illustrated-message", + "$schema": "https://opensource.adobe.com/spectrum-tokens/schemas/token-types/scale-set.json", + "sets": { + "default": { + "$schema": "https://opensource.adobe.com/spectrum-tokens/schemas/token-types/dimension.json", + "value": "96px" + }, + "l": { + "$schema": "https://opensource.adobe.com/spectrum-tokens/schemas/token-types/dimension.json", + "value": "160px" + } + } + }, + "illustrated-message-title-font-family": { + "component": "illustrated-message", + "$schema": "https://opensource.adobe.com/spectrum-tokens/schemas/token-types/alias.json", + "value": "{sans-font-family-stack}" + }, + "illustrated-message-title-font-weight": { + "component": "illustrated-message", + "$schema": "https://opensource.adobe.com/spectrum-tokens/schemas/token-types/alias.json", + "value": "{title-sans-serif-font-weight}" + }, + "illustrated-message-title-font-style": { + "component": "illustrated-message", + "$schema": "https://opensource.adobe.com/spectrum-tokens/schemas/token-types/alias.json", + "value": "{title-sans-serif-font-style}" + }, + "illustrated-message-title-font-size": { + "component": "illustrated-message", + "$schema": "https://opensource.adobe.com/spectrum-tokens/schemas/token-types/scale-set.json", + "value": "{illustrated-message-medium-title-font-size}", + "sets": { + "size-s": { + "$schema": "https://opensource.adobe.com/spectrum-tokens/schemas/token-types/alias.json", + "value": "{illustrated-message-small-title-font-size}" + }, + "size-l": { + "$schema": "https://opensource.adobe.com/spectrum-tokens/schemas/token-types/alias.json", + "value": "{illustrated-message-large-title-font-size}" + } + } + }, + "illustrated-message-title-line-height": { + "component": "illustrated-message", + "$schema": "https://opensource.adobe.com/spectrum-tokens/schemas/token-types/alias.json", + "value": "{title-line-height}" + }, + "illustrated-message-title-color": { + "component": "illustrated-message", + "$schema": "https://opensource.adobe.com/spectrum-tokens/schemas/token-types/alias.json", + "value": "{heading-color}" + }, + "illustrated-message-description-font-family": { + "component": "illustrated-message", + "$schema": "https://opensource.adobe.com/spectrum-tokens/schemas/token-types/alias.json", + "value": "{sans-font-family-stack}" + }, + "illustrated-message-description-font-weight": { + "component": "illustrated-message", + "$schema": "https://opensource.adobe.com/spectrum-tokens/schemas/token-types/alias.json", + "value": "{body-sans-serif-font-weight}" + }, + "illustrated-message-description-font-style": { + "component": "illustrated-message", + "$schema": "https://opensource.adobe.com/spectrum-tokens/schemas/token-types/alias.json", + "value": "{body-sans-serif-font-style}" + }, + "illustrated-message-description-font-size": { + "component": "illustrated-message", + "$schema": "https://opensource.adobe.com/spectrum-tokens/schemas/token-types/scale-set.json", + "value": "{illustrated-message-medium-body-font-size}", + "sets": { + "size-s": { + "$schema": "https://opensource.adobe.com/spectrum-tokens/schemas/token-types/alias.json", + "value": "{illustrated-message-small-body-font-size}" + }, + "size-l": { + "$schema": "https://opensource.adobe.com/spectrum-tokens/schemas/token-types/alias.json", + "value": "{illustrated-message-large-body-font-size}" + } + } + }, + "illustrated-message-description-line-height": { + "component": "illustrated-message", + "$schema": "https://opensource.adobe.com/spectrum-tokens/schemas/token-types/alias.json", + "value": "{line-height-200}" + }, + "illustrated-message-description-color": { + "component": "illustrated-message", + "$schema": "https://opensource.adobe.com/spectrum-tokens/schemas/token-types/alias.json", + "value": "{body-color}" + } +} diff --git a/components/infieldbutton/tokens.json b/components/infieldbutton/tokens.json new file mode 100644 index 00000000000..acfddef5149 --- /dev/null +++ b/components/infieldbutton/tokens.json @@ -0,0 +1,186 @@ +{ + "infield-button-background-color": { + "component": "infield-button", + "$schema": "https://opensource.adobe.com/spectrum-tokens/schemas/token-types/alias.json", + "value": "{gray-100}" + }, + "infield-button-background-color-hover": { + "component": "infield-button", + "$schema": "https://opensource.adobe.com/spectrum-tokens/schemas/token-types/alias.json", + "value": "{gray-200}" + }, + "infield-button-background-color-down": { + "component": "infield-button", + "$schema": "https://opensource.adobe.com/spectrum-tokens/schemas/token-types/alias.json", + "value": "{gray-200}" + }, + "infield-button-icon-color": { + "component": "infield-button", + "$schema": "https://opensource.adobe.com/spectrum-tokens/schemas/token-types/alias.json", + "value": "{neutral-content-color-default}" + }, + "infield-button-icon-color-hover": { + "component": "infield-button", + "$schema": "https://opensource.adobe.com/spectrum-tokens/schemas/token-types/alias.json", + "value": "{neutral-content-color-hover}" + }, + "infield-button-icon-color-down": { + "component": "infield-button", + "$schema": "https://opensource.adobe.com/spectrum-tokens/schemas/token-types/alias.json", + "value": "{neutral-content-color-down}" + }, + "infield-button-height": { + "component": "infield-button", + "$schema": "https://opensource.adobe.com/spectrum-tokens/schemas/token-types/scale-set.json", + "value": "{component-height-100}", + "sets": { + "size-s": { + "$schema": "https://opensource.adobe.com/spectrum-tokens/schemas/token-types/alias.json", + "value": "{component-height-75}" + }, + "size-l": { + "$schema": "https://opensource.adobe.com/spectrum-tokens/schemas/token-types/alias.json", + "value": "{component-height-200}" + }, + "size-xl": { + "$schema": "https://opensource.adobe.com/spectrum-tokens/schemas/token-types/alias.json", + "value": "{component-height-300}" + } + } + }, + "infield-button-width": { + "component": "infield-button", + "$schema": "https://opensource.adobe.com/spectrum-tokens/schemas/token-types/scale-set.json", + "value": "{component-height-100}", + "sets": { + "size-s": { + "$schema": "https://opensource.adobe.com/spectrum-tokens/schemas/token-types/alias.json", + "value": "{component-height-75}" + }, + "size-l": { + "$schema": "https://opensource.adobe.com/spectrum-tokens/schemas/token-types/alias.json", + "value": "{component-height-200}" + }, + "size-xl": { + "$schema": "https://opensource.adobe.com/spectrum-tokens/schemas/token-types/alias.json", + "value": "{component-height-300}" + } + } + }, + "infield-button-border-radius": { + "component": "infield-button", + "$schema": "https://opensource.adobe.com/spectrum-tokens/schemas/token-types/scale-set.json", + "value": "{corner-radius-small-size-medium}", + "sets": { + "size-s": { + "$schema": "https://opensource.adobe.com/spectrum-tokens/schemas/token-types/alias.json", + "value": "{corner-radius-small-size-small}" + }, + "size-l": { + "$schema": "https://opensource.adobe.com/spectrum-tokens/schemas/token-types/alias.json", + "value": "{corner-radius-small-size-large}" + }, + "size-xl": { + "$schema": "https://opensource.adobe.com/spectrum-tokens/schemas/token-types/alias.json", + "value": "{corner-radius-small-size-extra-large}" + } + } + }, + "infield-button-edge-to-fill": { + "component": "infield-button", + "$schema": "https://opensource.adobe.com/spectrum-tokens/schemas/token-types/scale-set.json", + "value": "{in-field-button-edge-to-fill-medium}", + "sets": { + "size-s": { + "$schema": "https://opensource.adobe.com/spectrum-tokens/schemas/token-types/alias.json", + "value": "{in-field-button-edge-to-fill-small}" + }, + "size-l": { + "$schema": "https://opensource.adobe.com/spectrum-tokens/schemas/token-types/alias.json", + "value": "{in-field-button-edge-to-fill-large}" + }, + "size-xl": { + "$schema": "https://opensource.adobe.com/spectrum-tokens/schemas/token-types/alias.json", + "value": "{in-field-button-edge-to-fill-extra-large}" + } + } + }, + "infield-button-inline-field-edge-to-icon": { + "component": "infield-button", + "$schema": "https://opensource.adobe.com/spectrum-tokens/schemas/token-types/scale-set.json", + "value": "{field-edge-to-icon-100}", + "sets": { + "size-s": { + "$schema": "https://opensource.adobe.com/spectrum-tokens/schemas/token-types/alias.json", + "value": "{field-edge-to-icon-75}" + }, + "size-l": { + "$schema": "https://opensource.adobe.com/spectrum-tokens/schemas/token-types/alias.json", + "value": "{field-edge-to-icon-200}" + }, + "size-xl": { + "$schema": "https://opensource.adobe.com/spectrum-tokens/schemas/token-types/alias.json", + "value": "{field-edge-to-icon-300}" + } + } + }, + "infield-button-inline-edge-to-fill": { + "component": "infield-button", + "$schema": "https://opensource.adobe.com/spectrum-tokens/schemas/token-types/scale-set.json", + "value": "{in-field-button-side-edge-to-fill-medium}", + "sets": { + "size-s": { + "$schema": "https://opensource.adobe.com/spectrum-tokens/schemas/token-types/alias.json", + "value": "{in-field-button-side-edge-to-fill-small}" + }, + "size-l": { + "$schema": "https://opensource.adobe.com/spectrum-tokens/schemas/token-types/alias.json", + "value": "{in-field-button-side-edge-to-fill-large}" + }, + "size-xl": { + "$schema": "https://opensource.adobe.com/spectrum-tokens/schemas/token-types/alias.json", + "value": "{in-field-button-side-edge-to-fill-extra-large}" + } + } + }, + "infield-button-fill-padding": { + "component": "infield-button", + "$schema": "https://opensource.adobe.com/spectrum-tokens/schemas/token-types/dimension.json", + "value": "0px" + }, + "infield-button-field-edge-to-disclosure-icon": { + "component": "infield-button", + "$schema": "https://opensource.adobe.com/spectrum-tokens/schemas/token-types/scale-set.json", + "value": "{field-edge-to-disclosure-icon-100}", + "sets": { + "size-s": { + "$schema": "https://opensource.adobe.com/spectrum-tokens/schemas/token-types/alias.json", + "value": "{field-edge-to-disclosure-icon-75}" + }, + "size-l": { + "$schema": "https://opensource.adobe.com/spectrum-tokens/schemas/token-types/alias.json", + "value": "{field-edge-to-disclosure-icon-200}" + }, + "size-xl": { + "$schema": "https://opensource.adobe.com/spectrum-tokens/schemas/token-types/alias.json", + "value": "{field-edge-to-disclosure-icon-300}" + } + } + }, + "infield-button-fill-justify-content": { + "component": "infield-button", + "$schema": "https://opensource.adobe.com/spectrum-tokens/schemas/token-types/text-align.json", + "value": "center" + }, + "infield-button-downstate-perspective": { + "component": "infield-button", + "$schema": "https://opensource.adobe.com/spectrum-tokens/schemas/token-types/scale-set.json", + "value": "max({downstate-height}, {downstate-width} * {component-size-width-ratio-down})", + "sets": { + "size-s": { + "$schema": "https://opensource.adobe.com/spectrum-tokens/schemas/token-types/alias.json", + "value": "{component-size-minimum-perspective-down}" + } + } + } +} diff --git a/components/infieldprogresscircle/tokens.json b/components/infieldprogresscircle/tokens.json new file mode 100644 index 00000000000..5c97530c6c0 --- /dev/null +++ b/components/infieldprogresscircle/tokens.json @@ -0,0 +1,7 @@ +{ + "infieldprogresscircle-padding-block": { + "component": "infield-progress-circle", + "$schema": "https://opensource.adobe.com/spectrum-tokens/schemas/token-types/alias.json", + "value": "{in-field-progress-circle-edge-to-fill}" + } +} diff --git a/components/inlinealert/tokens.json b/components/inlinealert/tokens.json new file mode 100644 index 00000000000..a60daed8002 --- /dev/null +++ b/components/inlinealert/tokens.json @@ -0,0 +1,141 @@ +{ + "inlinealert-heading-font-family": { + "component": "inline-alert", + "$schema": "https://opensource.adobe.com/spectrum-tokens/schemas/token-types/alias.json", + "value": "{sans-font-family-stack}" + }, + "inlinealert-heading-font-weight": { + "component": "inline-alert", + "$schema": "https://opensource.adobe.com/spectrum-tokens/schemas/token-types/alias.json", + "value": "{heading-sans-serif-font-weight}" + }, + "inlinealert-heading-font-style": { + "component": "inline-alert", + "$schema": "https://opensource.adobe.com/spectrum-tokens/schemas/token-types/alias.json", + "value": "{heading-sans-serif-font-style}" + }, + "inlinealert-heading-font-size": { + "component": "inline-alert", + "$schema": "https://opensource.adobe.com/spectrum-tokens/schemas/token-types/alias.json", + "value": "{heading-size-xxs}" + }, + "inlinealert-heading-line-height": { + "component": "inline-alert", + "$schema": "https://opensource.adobe.com/spectrum-tokens/schemas/token-types/alias.json", + "value": "{heading-line-height}" + }, + "inlinealert-content-font-family": { + "component": "inline-alert", + "$schema": "https://opensource.adobe.com/spectrum-tokens/schemas/token-types/alias.json", + "value": "{sans-font-family-stack}" + }, + "inlinealert-content-font-weight": { + "component": "inline-alert", + "$schema": "https://opensource.adobe.com/spectrum-tokens/schemas/token-types/alias.json", + "value": "{body-sans-serif-font-weight}" + }, + "inlinealert-content-font-style": { + "component": "inline-alert", + "$schema": "https://opensource.adobe.com/spectrum-tokens/schemas/token-types/alias.json", + "value": "{body-sans-serif-font-style}" + }, + "inlinealert-content-font-size": { + "component": "inline-alert", + "$schema": "https://opensource.adobe.com/spectrum-tokens/schemas/token-types/alias.json", + "value": "{body-size-s}" + }, + "inlinealert-content-line-height": { + "component": "inline-alert", + "$schema": "https://opensource.adobe.com/spectrum-tokens/schemas/token-types/alias.json", + "value": "{body-line-height}" + }, + "inlinealert-border-width": { + "component": "inline-alert", + "$schema": "https://opensource.adobe.com/spectrum-tokens/schemas/token-types/alias.json", + "value": "{border-width-200}" + }, + "inlinealert-border-radius": { + "component": "inline-alert", + "$schema": "https://opensource.adobe.com/spectrum-tokens/schemas/token-types/alias.json", + "value": "{corner-radius-700}" + }, + "inlinealert-icon-size": { + "component": "inline-alert", + "$schema": "https://opensource.adobe.com/spectrum-tokens/schemas/token-types/alias.json", + "value": "{workflow-icon-size-100}" + }, + "inlinealert-min-inline-size": { + "component": "inline-alert", + "$schema": "https://opensource.adobe.com/spectrum-tokens/schemas/token-types/alias.json", + "value": "{in-line-alert-minimum-width}" + }, + "inlinealert-header-min-block-size": { + "component": "inline-alert", + "$schema": "https://opensource.adobe.com/spectrum-tokens/schemas/token-types/alias.json", + "value": "{component-height-50}" + }, + "inlinealert-spacing-edge-to-text": { + "component": "inline-alert", + "$schema": "https://opensource.adobe.com/spectrum-tokens/schemas/token-types/alias.json", + "value": "{spacing-300}" + }, + "inlinealert-min-spacing-header-to-icon": { + "component": "inline-alert", + "$schema": "https://opensource.adobe.com/spectrum-tokens/schemas/token-types/alias.json", + "value": "{spacing-100}" + }, + "inlinealert-spacing-header-content": { + "component": "inline-alert", + "$schema": "https://opensource.adobe.com/spectrum-tokens/schemas/token-types/alias.json", + "value": "{spacing-100}" + }, + "inlinealert-spacing-content-link-button": { + "component": "inline-alert", + "$schema": "https://opensource.adobe.com/spectrum-tokens/schemas/token-types/alias.json", + "value": "{spacing-200}" + }, + "inlinealert-background-color": { + "component": "inline-alert", + "$schema": "https://opensource.adobe.com/spectrum-tokens/schemas/token-types/alias.json", + "value": "{background-layer-2-color}", + "sets": { + "whcm": { + "$schema": "https://opensource.adobe.com/spectrum-tokens/schemas/token-types/color.json", + "value": "Canvas" + } + } + }, + "inlinealert-border-and-icon-color": { + "component": "inline-alert", + "$schema": "https://opensource.adobe.com/spectrum-tokens/schemas/token-types/alias.json", + "value": "{neutral-visual-color}", + "sets": { + "whcm": { + "$schema": "https://opensource.adobe.com/spectrum-tokens/schemas/token-types/color.json", + "value": "CanvasText" + } + } + }, + "inlinealert-header-color": { + "component": "inline-alert", + "$schema": "https://opensource.adobe.com/spectrum-tokens/schemas/token-types/alias.json", + "value": "{heading-color}", + "sets": { + "whcm": { + "$schema": "https://opensource.adobe.com/spectrum-tokens/schemas/token-types/color.json", + "value": "CanvasText" + } + } + }, + "inlinealert-content-color": { + "component": "inline-alert", + "$schema": "https://opensource.adobe.com/spectrum-tokens/schemas/token-types/alias.json", + "value": "{body-color}", + "sets": { + "whcm": { + "$schema": "https://opensource.adobe.com/spectrum-tokens/schemas/token-types/color.json", + "value": "CanvasText" + } + } + } +} diff --git a/components/link/tokens.json b/components/link/tokens.json new file mode 100644 index 00000000000..2a67331f3be --- /dev/null +++ b/components/link/tokens.json @@ -0,0 +1,84 @@ +{ + "link-focus-indicator-color": { + "component": "link", + "$schema": "https://opensource.adobe.com/spectrum-tokens/schemas/token-types/alias.json", + "value": "{focus-indicator-color}", + "sets": { + "whcm": { + "$schema": "https://opensource.adobe.com/spectrum-tokens/schemas/token-types/color.json", + "value": "LinkText" + } + } + }, + "link-focus-indicator-thickness": { + "component": "link", + "$schema": "https://opensource.adobe.com/spectrum-tokens/schemas/token-types/alias.json", + "value": "{focus-indicator-thickness}" + }, + "link-focus-indicator-gap": { + "component": "link", + "$schema": "https://opensource.adobe.com/spectrum-tokens/schemas/token-types/alias.json", + "value": "{focus-indicator-gap}" + }, + "link-corner-radius": { + "component": "link", + "$schema": "https://opensource.adobe.com/spectrum-tokens/schemas/token-types/alias.json", + "value": "{corner-radius-100}" + }, + "link-default-font-family": { + "component": "link", + "$schema": "https://opensource.adobe.com/spectrum-tokens/schemas/token-types/alias.json", + "value": "{sans-font-family-stack}" + }, + "link-line-height": { + "component": "link", + "$schema": "https://opensource.adobe.com/spectrum-tokens/schemas/token-types/alias.json", + "value": "{line-height-100}" + }, + "link-line-height-cjk": { + "component": "link", + "$schema": "https://opensource.adobe.com/spectrum-tokens/schemas/token-types/alias.json", + "value": "{cjk-line-height-100}" + }, + "link-font-size": { + "component": "link", + "$schema": "https://opensource.adobe.com/spectrum-tokens/schemas/token-types/alias.json", + "value": "{font-size-100}" + }, + "link-font-style": { + "component": "link", + "$schema": "https://opensource.adobe.com/spectrum-tokens/schemas/token-types/alias.json", + "value": "{default-font-style}" + }, + "link-font-weight": { + "component": "link", + "$schema": "https://opensource.adobe.com/spectrum-tokens/schemas/token-types/alias.json", + "value": "{medium-font-weight}" + }, + "link-text-underline-thickness": { + "component": "link", + "$schema": "https://opensource.adobe.com/spectrum-tokens/schemas/token-types/alias.json", + "value": "{text-underline-thickness}" + }, + "link-text-underline-gap": { + "component": "link", + "$schema": "https://opensource.adobe.com/spectrum-tokens/schemas/token-types/alias.json", + "value": "{text-underline-gap}" + }, + "link-inline-font-weight": { + "component": "link", + "$schema": "https://opensource.adobe.com/spectrum-tokens/schemas/token-types/alias.json", + "value": "{regular-font-weight}" + }, + "link-text-color": { + "component": "link", + "$schema": "https://opensource.adobe.com/spectrum-tokens/schemas/token-types/alias.json", + "value": "{accent-content-color-default}", + "sets": { + "whcm": { + "$schema": "https://opensource.adobe.com/spectrum-tokens/schemas/token-types/color.json", + "value": "LinkText" + } + } + } +} diff --git a/components/logicbutton/tokens.json b/components/logicbutton/tokens.json new file mode 100644 index 00000000000..c0c456abc4b --- /dev/null +++ b/components/logicbutton/tokens.json @@ -0,0 +1,229 @@ +{ + "logic-button-and-background-color": { + "component": "logic-button", + "$schema": "https://opensource.adobe.com/spectrum-tokens/schemas/token-types/color-set.json", + "sets": { + "dark": { + "$schema": "https://opensource.adobe.com/spectrum-tokens/schemas/token-types/alias.json", + "value": "{blue-800}" + }, + "light": { + "$schema": "https://opensource.adobe.com/spectrum-tokens/schemas/token-types/alias.json", + "value": "{blue-900}" + }, + "whcm": { + "$schema": "https://opensource.adobe.com/spectrum-tokens/schemas/token-types/color.json", + "value": "ButtonFace" + } + } + }, + "logic-button-and-background-color-hover": { + "component": "logic-button", + "$schema": "https://opensource.adobe.com/spectrum-tokens/schemas/token-types/color-set.json", + "sets": { + "dark": { + "$schema": "https://opensource.adobe.com/spectrum-tokens/schemas/token-types/alias.json", + "value": "{blue-1000}" + }, + "light": { + "$schema": "https://opensource.adobe.com/spectrum-tokens/schemas/token-types/alias.json", + "value": "{blue-1100}" + }, + "whcm": { + "$schema": "https://opensource.adobe.com/spectrum-tokens/schemas/token-types/color.json", + "value": "ButtonFace" + } + } + }, + "logic-button-and-border-color": { + "component": "logic-button", + "$schema": "https://opensource.adobe.com/spectrum-tokens/schemas/token-types/color-set.json", + "sets": { + "dark": { + "$schema": "https://opensource.adobe.com/spectrum-tokens/schemas/token-types/alias.json", + "value": "{blue-800}" + }, + "light": { + "$schema": "https://opensource.adobe.com/spectrum-tokens/schemas/token-types/alias.json", + "value": "{blue-900}" + }, + "whcm": { + "$schema": "https://opensource.adobe.com/spectrum-tokens/schemas/token-types/color.json", + "value": "ButtonText" + } + } + }, + "logic-button-and-border-color-hover": { + "component": "logic-button", + "$schema": "https://opensource.adobe.com/spectrum-tokens/schemas/token-types/color-set.json", + "sets": { + "dark": { + "$schema": "https://opensource.adobe.com/spectrum-tokens/schemas/token-types/alias.json", + "value": "{blue-1000}" + }, + "light": { + "$schema": "https://opensource.adobe.com/spectrum-tokens/schemas/token-types/alias.json", + "value": "{blue-1100}" + }, + "whcm": { + "$schema": "https://opensource.adobe.com/spectrum-tokens/schemas/token-types/color.json", + "value": "Highlight" + } + } + }, + "logic-button-or-background-color": { + "component": "logic-button", + "$schema": "https://opensource.adobe.com/spectrum-tokens/schemas/token-types/color-set.json", + "sets": { + "dark": { + "$schema": "https://opensource.adobe.com/spectrum-tokens/schemas/token-types/alias.json", + "value": "{magenta-700}" + }, + "light": { + "$schema": "https://opensource.adobe.com/spectrum-tokens/schemas/token-types/alias.json", + "value": "{magenta-900}" + }, + "whcm": { + "$schema": "https://opensource.adobe.com/spectrum-tokens/schemas/token-types/color.json", + "value": "ButtonFace" + } + } + }, + "logic-button-or-background-color-hover": { + "component": "logic-button", + "$schema": "https://opensource.adobe.com/spectrum-tokens/schemas/token-types/color-set.json", + "sets": { + "dark": { + "$schema": "https://opensource.adobe.com/spectrum-tokens/schemas/token-types/alias.json", + "value": "{magenta-900}" + }, + "light": { + "$schema": "https://opensource.adobe.com/spectrum-tokens/schemas/token-types/alias.json", + "value": "{magenta-1100}" + }, + "whcm": { + "$schema": "https://opensource.adobe.com/spectrum-tokens/schemas/token-types/color.json", + "value": "ButtonFace" + } + } + }, + "logic-button-or-border-color": { + "component": "logic-button", + "$schema": "https://opensource.adobe.com/spectrum-tokens/schemas/token-types/color-set.json", + "sets": { + "dark": { + "$schema": "https://opensource.adobe.com/spectrum-tokens/schemas/token-types/alias.json", + "value": "{magenta-700}" + }, + "light": { + "$schema": "https://opensource.adobe.com/spectrum-tokens/schemas/token-types/alias.json", + "value": "{magenta-900}" + }, + "whcm": { + "$schema": "https://opensource.adobe.com/spectrum-tokens/schemas/token-types/color.json", + "value": "ButtonText" + } + } + }, + "logic-button-or-border-color-hover": { + "component": "logic-button", + "$schema": "https://opensource.adobe.com/spectrum-tokens/schemas/token-types/color-set.json", + "sets": { + "dark": { + "$schema": "https://opensource.adobe.com/spectrum-tokens/schemas/token-types/alias.json", + "value": "{magenta-900}" + }, + "light": { + "$schema": "https://opensource.adobe.com/spectrum-tokens/schemas/token-types/alias.json", + "value": "{magenta-1100}" + }, + "whcm": { + "$schema": "https://opensource.adobe.com/spectrum-tokens/schemas/token-types/color.json", + "value": "Highlight" + } + } + }, + "logic-button-and-background-color-disabled": { + "component": "logic-button", + "$schema": "https://opensource.adobe.com/spectrum-tokens/schemas/token-types/alias.json", + "value": "{gray-100}" + }, + "logic-button-and-border-color-disabled": { + "component": "logic-button", + "$schema": "https://opensource.adobe.com/spectrum-tokens/schemas/token-types/alias.json", + "value": "{gray-100}" + }, + "logic-button-and-background-color-hover-disabled": { + "component": "logic-button", + "$schema": "https://opensource.adobe.com/spectrum-tokens/schemas/token-types/alias.json", + "value": "{gray-100}" + }, + "logic-button-and-border-color-hover-disabled": { + "component": "logic-button", + "$schema": "https://opensource.adobe.com/spectrum-tokens/schemas/token-types/alias.json", + "value": "{gray-100}" + }, + "logic-button-or-background-color-disabled": { + "component": "logic-button", + "$schema": "https://opensource.adobe.com/spectrum-tokens/schemas/token-types/alias.json", + "value": "{gray-100}" + }, + "logic-button-or-border-color-disabled": { + "component": "logic-button", + "$schema": "https://opensource.adobe.com/spectrum-tokens/schemas/token-types/alias.json", + "value": "{gray-100}" + }, + "logic-button-or-background-color-hover-disabled": { + "component": "logic-button", + "$schema": "https://opensource.adobe.com/spectrum-tokens/schemas/token-types/alias.json", + "value": "{gray-100}" + }, + "logic-button-or-border-color-hover-disabled": { + "component": "logic-button", + "$schema": "https://opensource.adobe.com/spectrum-tokens/schemas/token-types/alias.json", + "value": "{gray-100}" + }, + "logic-button-border-radius": { + "component": "logic-button", + "$schema": "https://opensource.adobe.com/spectrum-tokens/schemas/token-types/alias.json", + "value": "{corner-radius-100}" + }, + "logic-button-and-text-color": { + "component": "logic-button", + "$schema": "https://opensource.adobe.com/spectrum-tokens/schemas/token-types/alias.json", + "value": "{white}", + "sets": { + "whcm": { + "$schema": "https://opensource.adobe.com/spectrum-tokens/schemas/token-types/color.json", + "value": "ButtonText" + } + } + }, + "logic-button-or-text-color": { + "component": "logic-button", + "$schema": "https://opensource.adobe.com/spectrum-tokens/schemas/token-types/alias.json", + "value": "{white}", + "sets": { + "whcm": { + "$schema": "https://opensource.adobe.com/spectrum-tokens/schemas/token-types/color.json", + "value": "ButtonText" + } + } + }, + "logic-button-text-color-disabled": { + "component": "logic-button", + "$schema": "https://opensource.adobe.com/spectrum-tokens/schemas/token-types/alias.json", + "value": "{gray-500}" + }, + "logic-button-focus-indicator-color": { + "component": "logic-button", + "$schema": "https://opensource.adobe.com/spectrum-tokens/schemas/token-types/alias.json", + "value": "{focus-indicator-color}", + "sets": { + "whcm": { + "$schema": "https://opensource.adobe.com/spectrum-tokens/schemas/token-types/color.json", + "value": "Highlight" + } + } + } +} diff --git a/components/menu/tokens.json b/components/menu/tokens.json new file mode 100644 index 00000000000..d0033e72b46 --- /dev/null +++ b/components/menu/tokens.json @@ -0,0 +1,804 @@ +{ + "menu-item-checkmark-height-extra-large": { + "component": "menu", + "$schema": "https://opensource.adobe.com/spectrum-tokens/schemas/token-types/scale-set.json", + "sets": { + "desktop": { + "$schema": "https://opensource.adobe.com/spectrum-tokens/schemas/token-types/dimension.json", + "value": "14px" + }, + "mobile": { + "$schema": "https://opensource.adobe.com/spectrum-tokens/schemas/token-types/dimension.json", + "value": "16px" + } + } + }, + "menu-item-checkmark-height-large": { + "component": "menu", + "$schema": "https://opensource.adobe.com/spectrum-tokens/schemas/token-types/scale-set.json", + "sets": { + "desktop": { + "$schema": "https://opensource.adobe.com/spectrum-tokens/schemas/token-types/dimension.json", + "value": "12px" + }, + "mobile": { + "$schema": "https://opensource.adobe.com/spectrum-tokens/schemas/token-types/dimension.json", + "value": "16px" + } + } + }, + "menu-item-checkmark-height-medium": { + "component": "menu", + "$schema": "https://opensource.adobe.com/spectrum-tokens/schemas/token-types/scale-set.json", + "sets": { + "desktop": { + "$schema": "https://opensource.adobe.com/spectrum-tokens/schemas/token-types/dimension.json", + "value": "10px" + }, + "mobile": { + "$schema": "https://opensource.adobe.com/spectrum-tokens/schemas/token-types/dimension.json", + "value": "14px" + } + } + }, + "menu-item-checkmark-height-small": { + "component": "menu", + "$schema": "https://opensource.adobe.com/spectrum-tokens/schemas/token-types/scale-set.json", + "sets": { + "desktop": { + "$schema": "https://opensource.adobe.com/spectrum-tokens/schemas/token-types/dimension.json", + "value": "10px" + }, + "mobile": { + "$schema": "https://opensource.adobe.com/spectrum-tokens/schemas/token-types/dimension.json", + "value": "12px" + } + } + }, + "menu-item-checkmark-width-extra-large": { + "component": "menu", + "$schema": "https://opensource.adobe.com/spectrum-tokens/schemas/token-types/scale-set.json", + "sets": { + "desktop": { + "$schema": "https://opensource.adobe.com/spectrum-tokens/schemas/token-types/dimension.json", + "value": "14px" + }, + "mobile": { + "$schema": "https://opensource.adobe.com/spectrum-tokens/schemas/token-types/dimension.json", + "value": "16px" + } + } + }, + "menu-item-checkmark-width-large": { + "component": "menu", + "$schema": "https://opensource.adobe.com/spectrum-tokens/schemas/token-types/scale-set.json", + "sets": { + "desktop": { + "$schema": "https://opensource.adobe.com/spectrum-tokens/schemas/token-types/dimension.json", + "value": "12px" + }, + "mobile": { + "$schema": "https://opensource.adobe.com/spectrum-tokens/schemas/token-types/dimension.json", + "value": "16px" + } + } + }, + "menu-item-checkmark-width-medium": { + "component": "menu", + "$schema": "https://opensource.adobe.com/spectrum-tokens/schemas/token-types/scale-set.json", + "sets": { + "desktop": { + "$schema": "https://opensource.adobe.com/spectrum-tokens/schemas/token-types/dimension.json", + "value": "10px" + }, + "mobile": { + "$schema": "https://opensource.adobe.com/spectrum-tokens/schemas/token-types/dimension.json", + "value": "14px" + } + } + }, + "menu-item-checkmark-width-small": { + "component": "menu", + "$schema": "https://opensource.adobe.com/spectrum-tokens/schemas/token-types/scale-set.json", + "sets": { + "desktop": { + "$schema": "https://opensource.adobe.com/spectrum-tokens/schemas/token-types/dimension.json", + "value": "10px" + }, + "mobile": { + "$schema": "https://opensource.adobe.com/spectrum-tokens/schemas/token-types/dimension.json", + "value": "12px" + } + } + }, + "menu-item-selectable-edge-to-text-not-selected-extra-large": { + "component": "menu", + "$schema": "https://opensource.adobe.com/spectrum-tokens/schemas/token-types/scale-set.json", + "sets": { + "desktop": { + "$schema": "https://opensource.adobe.com/spectrum-tokens/schemas/token-types/dimension.json", + "value": "45px" + }, + "mobile": { + "$schema": "https://opensource.adobe.com/spectrum-tokens/schemas/token-types/dimension.json", + "value": "54px" + } + } + }, + "menu-item-selectable-edge-to-text-not-selected-large": { + "component": "menu", + "$schema": "https://opensource.adobe.com/spectrum-tokens/schemas/token-types/scale-set.json", + "sets": { + "desktop": { + "$schema": "https://opensource.adobe.com/spectrum-tokens/schemas/token-types/dimension.json", + "value": "38px" + }, + "mobile": { + "$schema": "https://opensource.adobe.com/spectrum-tokens/schemas/token-types/dimension.json", + "value": "47px" + } + } + }, + "menu-item-selectable-edge-to-text-not-selected-medium": { + "component": "menu", + "$schema": "https://opensource.adobe.com/spectrum-tokens/schemas/token-types/scale-set.json", + "sets": { + "desktop": { + "$schema": "https://opensource.adobe.com/spectrum-tokens/schemas/token-types/dimension.json", + "value": "32px" + }, + "mobile": { + "$schema": "https://opensource.adobe.com/spectrum-tokens/schemas/token-types/dimension.json", + "value": "42px" + } + } + }, + "menu-item-selectable-edge-to-text-not-selected-small": { + "component": "menu", + "$schema": "https://opensource.adobe.com/spectrum-tokens/schemas/token-types/scale-set.json", + "sets": { + "desktop": { + "$schema": "https://opensource.adobe.com/spectrum-tokens/schemas/token-types/dimension.json", + "value": "28px" + }, + "mobile": { + "$schema": "https://opensource.adobe.com/spectrum-tokens/schemas/token-types/dimension.json", + "value": "34px" + } + } + }, + "menu-item-background-color-default": { + "component": "menu", + "$schema": "https://opensource.adobe.com/spectrum-tokens/schemas/token-types/alias.json", + "value": "transparent", + "sets": { + "whcm": { + "$schema": "https://opensource.adobe.com/spectrum-tokens/schemas/token-types/color.json", + "value": "ButtonFace" + } + } + }, + "menu-item-background-color-hover": { + "component": "menu", + "$schema": "https://opensource.adobe.com/spectrum-tokens/schemas/token-types/alias.json", + "value": "{gray-100}", + "sets": { + "whcm": { + "$schema": "https://opensource.adobe.com/spectrum-tokens/schemas/token-types/color.json", + "value": "Highlight" + } + } + }, + "menu-item-background-color-down": { + "component": "menu", + "$schema": "https://opensource.adobe.com/spectrum-tokens/schemas/token-types/alias.json", + "value": "{gray-200}", + "sets": { + "whcm": { + "$schema": "https://opensource.adobe.com/spectrum-tokens/schemas/token-types/color.json", + "value": "Highlight" + } + } + }, + "menu-item-background-color-key-focus": { + "component": "menu", + "$schema": "https://opensource.adobe.com/spectrum-tokens/schemas/token-types/alias.json", + "value": "{gray-100}", + "sets": { + "whcm": { + "$schema": "https://opensource.adobe.com/spectrum-tokens/schemas/token-types/color.json", + "value": "Highlight" + } + } + }, + "menu-item-label-line-height": { + "component": "menu", + "$schema": "https://opensource.adobe.com/spectrum-tokens/schemas/token-types/alias.json", + "value": "{line-height-100}" + }, + "menu-item-label-line-height-cjk": { + "component": "menu", + "$schema": "https://opensource.adobe.com/spectrum-tokens/schemas/token-types/alias.json", + "value": "{cjk-line-height-100}" + }, + "menu-item-label-to-value-area-min-spacing": { + "component": "menu", + "$schema": "https://opensource.adobe.com/spectrum-tokens/schemas/token-types/alias.json", + "value": "{spacing-100}" + }, + "menu-item-label-content-color-default": { + "component": "menu", + "$schema": "https://opensource.adobe.com/spectrum-tokens/schemas/token-types/alias.json", + "value": "{neutral-content-color-default}", + "sets": { + "whcm": { + "$schema": "https://opensource.adobe.com/spectrum-tokens/schemas/token-types/color.json", + "value": "ButtonText" + } + } + }, + "menu-item-label-content-color-hover": { + "component": "menu", + "$schema": "https://opensource.adobe.com/spectrum-tokens/schemas/token-types/alias.json", + "value": "{neutral-content-color-hover}", + "sets": { + "whcm": { + "$schema": "https://opensource.adobe.com/spectrum-tokens/schemas/token-types/color.json", + "value": "HighlightText" + } + } + }, + "menu-item-label-content-color-down": { + "component": "menu", + "$schema": "https://opensource.adobe.com/spectrum-tokens/schemas/token-types/alias.json", + "value": "{neutral-content-color-down}", + "sets": { + "whcm": { + "$schema": "https://opensource.adobe.com/spectrum-tokens/schemas/token-types/color.json", + "value": "HighlightText" + } + } + }, + "menu-item-label-content-color-focus": { + "component": "menu", + "$schema": "https://opensource.adobe.com/spectrum-tokens/schemas/token-types/alias.json", + "value": "{neutral-content-color-key-focus}", + "sets": { + "whcm": { + "$schema": "https://opensource.adobe.com/spectrum-tokens/schemas/token-types/color.json", + "value": "HighlightText" + } + } + }, + "menu-item-label-icon-color-default": { + "component": "menu", + "$schema": "https://opensource.adobe.com/spectrum-tokens/schemas/token-types/alias.json", + "value": "{neutral-content-color-default}", + "sets": { + "whcm": { + "$schema": "https://opensource.adobe.com/spectrum-tokens/schemas/token-types/color.json", + "value": "ButtonText" + } + } + }, + "menu-item-label-icon-color-hover": { + "component": "menu", + "$schema": "https://opensource.adobe.com/spectrum-tokens/schemas/token-types/alias.json", + "value": "{neutral-content-color-hover}", + "sets": { + "whcm": { + "$schema": "https://opensource.adobe.com/spectrum-tokens/schemas/token-types/color.json", + "value": "HighlightText" + } + } + }, + "menu-item-label-icon-color-down": { + "component": "menu", + "$schema": "https://opensource.adobe.com/spectrum-tokens/schemas/token-types/alias.json", + "value": "{neutral-content-color-down}", + "sets": { + "whcm": { + "$schema": "https://opensource.adobe.com/spectrum-tokens/schemas/token-types/color.json", + "value": "HighlightText" + } + } + }, + "menu-item-label-icon-color-focus": { + "component": "menu", + "$schema": "https://opensource.adobe.com/spectrum-tokens/schemas/token-types/alias.json", + "value": "{neutral-content-color-key-focus}", + "sets": { + "whcm": { + "$schema": "https://opensource.adobe.com/spectrum-tokens/schemas/token-types/color.json", + "value": "HighlightText" + } + } + }, + "menu-item-label-content-color-disabled": { + "component": "menu", + "$schema": "https://opensource.adobe.com/spectrum-tokens/schemas/token-types/alias.json", + "value": "{disabled-content-color}", + "sets": { + "whcm": { + "$schema": "https://opensource.adobe.com/spectrum-tokens/schemas/token-types/color.json", + "value": "GrayText" + } + } + }, + "menu-item-label-icon-color-disabled": { + "component": "menu", + "$schema": "https://opensource.adobe.com/spectrum-tokens/schemas/token-types/alias.json", + "value": "{disabled-content-color}", + "sets": { + "whcm": { + "$schema": "https://opensource.adobe.com/spectrum-tokens/schemas/token-types/color.json", + "value": "GrayText" + } + } + }, + "menu-item-description-line-height": { + "component": "menu", + "$schema": "https://opensource.adobe.com/spectrum-tokens/schemas/token-types/alias.json", + "value": "{line-height-100}" + }, + "menu-item-description-line-height-cjk": { + "component": "menu", + "$schema": "https://opensource.adobe.com/spectrum-tokens/schemas/token-types/alias.json", + "value": "{cjk-line-height-100}" + }, + "menu-item-description-color-default": { + "component": "menu", + "$schema": "https://opensource.adobe.com/spectrum-tokens/schemas/token-types/alias.json", + "value": "{neutral-subdued-content-color-default}", + "sets": { + "whcm": { + "$schema": "https://opensource.adobe.com/spectrum-tokens/schemas/token-types/color.json", + "value": "ButtonText" + } + } + }, + "menu-item-description-color-hover": { + "component": "menu", + "$schema": "https://opensource.adobe.com/spectrum-tokens/schemas/token-types/alias.json", + "value": "{neutral-subdued-content-color-hover}", + "sets": { + "whcm": { + "$schema": "https://opensource.adobe.com/spectrum-tokens/schemas/token-types/color.json", + "value": "HighlightText" + } + } + }, + "menu-item-description-color-down": { + "component": "menu", + "$schema": "https://opensource.adobe.com/spectrum-tokens/schemas/token-types/alias.json", + "value": "{neutral-subdued-content-color-down}", + "sets": { + "whcm": { + "$schema": "https://opensource.adobe.com/spectrum-tokens/schemas/token-types/color.json", + "value": "HighlightText" + } + } + }, + "menu-item-description-color-focus": { + "component": "menu", + "$schema": "https://opensource.adobe.com/spectrum-tokens/schemas/token-types/alias.json", + "value": "{neutral-subdued-content-color-key-focus}", + "sets": { + "whcm": { + "$schema": "https://opensource.adobe.com/spectrum-tokens/schemas/token-types/color.json", + "value": "HighlightText" + } + } + }, + "menu-item-description-color-disabled": { + "component": "menu", + "$schema": "https://opensource.adobe.com/spectrum-tokens/schemas/token-types/alias.json", + "value": "{disabled-content-color}", + "sets": { + "whcm": { + "$schema": "https://opensource.adobe.com/spectrum-tokens/schemas/token-types/color.json", + "value": "GrayText" + } + } + }, + "menu-section-header-line-height": { + "component": "menu", + "$schema": "https://opensource.adobe.com/spectrum-tokens/schemas/token-types/alias.json", + "value": "{line-height-100}" + }, + "menu-section-header-line-height-cjk": { + "component": "menu", + "$schema": "https://opensource.adobe.com/spectrum-tokens/schemas/token-types/alias.json", + "value": "{cjk-line-height-100}" + }, + "menu-section-header-font-weight": { + "component": "menu", + "$schema": "https://opensource.adobe.com/spectrum-tokens/schemas/token-types/alias.json", + "value": "{bold-font-weight}" + }, + "menu-section-header-color": { + "component": "menu", + "$schema": "https://opensource.adobe.com/spectrum-tokens/schemas/token-types/alias.json", + "value": "{neutral-content-color-default}", + "sets": { + "whcm": { + "$schema": "https://opensource.adobe.com/spectrum-tokens/schemas/token-types/color.json", + "value": "ButtonText" + } + } + }, + "menu-section-header-font-size": { + "component": "menu", + "$schema": "https://opensource.adobe.com/spectrum-tokens/schemas/token-types/alias.json", + "value": "{font-size-100}" + }, + "menu-section-header-min-width": { + "component": "menu", + "$schema": "https://opensource.adobe.com/spectrum-tokens/schemas/token-types/alias.json", + "value": "{component-height-100}" + }, + "menu-section-description-line-height": { + "component": "menu", + "$schema": "https://opensource.adobe.com/spectrum-tokens/schemas/token-types/alias.json", + "value": "{line-height-100}" + }, + "menu-section-description-line-height-cjk": { + "component": "menu", + "$schema": "https://opensource.adobe.com/spectrum-tokens/schemas/token-types/alias.json", + "value": "{cjk-line-height-100}" + }, + "menu-section-description-font-weight": { + "component": "menu", + "$schema": "https://opensource.adobe.com/spectrum-tokens/schemas/token-types/alias.json", + "value": "{regular-font-weight}" + }, + "menu-section-description-color": { + "component": "menu", + "$schema": "https://opensource.adobe.com/spectrum-tokens/schemas/token-types/alias.json", + "value": "{neutral-subdued-content-color-default}" + }, + "menu-section-header-to-description": { + "component": "menu", + "$schema": "https://opensource.adobe.com/spectrum-tokens/schemas/token-types/alias.json", + "value": "{menu-section-header-to-description-medium}" + }, + "menu-item-label-to-description": { + "component": "menu", + "$schema": "https://opensource.adobe.com/spectrum-tokens/schemas/token-types/alias.json", + "value": "{menu-item-label-to-description-medium}" + }, + "menu-collapsible-icon-color": { + "component": "menu", + "$schema": "https://opensource.adobe.com/spectrum-tokens/schemas/token-types/alias.json", + "value": "{gray-900}", + "sets": { + "whcm": { + "$schema": "https://opensource.adobe.com/spectrum-tokens/schemas/token-types/color.json", + "value": "ButtonText" + } + } + }, + "menu-checkmark-icon-color-default": { + "component": "menu", + "$schema": "https://opensource.adobe.com/spectrum-tokens/schemas/token-types/alias.json", + "value": "{accent-color-900}", + "sets": { + "whcm": { + "$schema": "https://opensource.adobe.com/spectrum-tokens/schemas/token-types/color.json", + "value": "Highlight" + } + } + }, + "menu-checkmark-icon-color-hover": { + "component": "menu", + "$schema": "https://opensource.adobe.com/spectrum-tokens/schemas/token-types/alias.json", + "value": "{accent-color-1000}", + "sets": { + "whcm": { + "$schema": "https://opensource.adobe.com/spectrum-tokens/schemas/token-types/color.json", + "value": "Highlight" + } + } + }, + "menu-checkmark-icon-color-down": { + "component": "menu", + "$schema": "https://opensource.adobe.com/spectrum-tokens/schemas/token-types/alias.json", + "value": "{accent-color-1100}", + "sets": { + "whcm": { + "$schema": "https://opensource.adobe.com/spectrum-tokens/schemas/token-types/color.json", + "value": "Highlight" + } + } + }, + "menu-checkmark-icon-color-focus": { + "component": "menu", + "$schema": "https://opensource.adobe.com/spectrum-tokens/schemas/token-types/alias.json", + "value": "{accent-color-1000}", + "sets": { + "whcm": { + "$schema": "https://opensource.adobe.com/spectrum-tokens/schemas/token-types/color.json", + "value": "Highlight" + } + } + }, + "menu-drillin-icon-color-default": { + "component": "menu", + "$schema": "https://opensource.adobe.com/spectrum-tokens/schemas/token-types/alias.json", + "value": "{neutral-subdued-content-color-default}", + "sets": { + "whcm": { + "$schema": "https://opensource.adobe.com/spectrum-tokens/schemas/token-types/color.json", + "value": "ButtonText" + } + } + }, + "menu-drillin-icon-color-hover": { + "component": "menu", + "$schema": "https://opensource.adobe.com/spectrum-tokens/schemas/token-types/alias.json", + "value": "{neutral-subdued-content-color-hover}", + "sets": { + "whcm": { + "$schema": "https://opensource.adobe.com/spectrum-tokens/schemas/token-types/color.json", + "value": "HighlightText" + } + } + }, + "menu-drillin-icon-color-down": { + "component": "menu", + "$schema": "https://opensource.adobe.com/spectrum-tokens/schemas/token-types/alias.json", + "value": "{neutral-subdued-content-color-down}", + "sets": { + "whcm": { + "$schema": "https://opensource.adobe.com/spectrum-tokens/schemas/token-types/color.json", + "value": "HighlightText" + } + } + }, + "menu-drillin-icon-color-focus": { + "component": "menu", + "$schema": "https://opensource.adobe.com/spectrum-tokens/schemas/token-types/alias.json", + "value": "{neutral-subdued-content-color-key-focus}", + "sets": { + "whcm": { + "$schema": "https://opensource.adobe.com/spectrum-tokens/schemas/token-types/color.json", + "value": "HighlightText" + } + } + }, + "menu-item-value-color-default": { + "component": "menu", + "$schema": "https://opensource.adobe.com/spectrum-tokens/schemas/token-types/alias.json", + "value": "{neutral-subdued-content-color-default}", + "sets": { + "whcm": { + "$schema": "https://opensource.adobe.com/spectrum-tokens/schemas/token-types/color.json", + "value": "ButtonText" + } + } + }, + "menu-item-value-color-hover": { + "component": "menu", + "$schema": "https://opensource.adobe.com/spectrum-tokens/schemas/token-types/alias.json", + "value": "{neutral-subdued-content-color-hover}", + "sets": { + "whcm": { + "$schema": "https://opensource.adobe.com/spectrum-tokens/schemas/token-types/color.json", + "value": "HighlightText" + } + } + }, + "menu-item-value-color-down": { + "component": "menu", + "$schema": "https://opensource.adobe.com/spectrum-tokens/schemas/token-types/alias.json", + "value": "{neutral-subdued-content-color-down}", + "sets": { + "whcm": { + "$schema": "https://opensource.adobe.com/spectrum-tokens/schemas/token-types/color.json", + "value": "HighlightText" + } + } + }, + "menu-item-value-color-focus": { + "component": "menu", + "$schema": "https://opensource.adobe.com/spectrum-tokens/schemas/token-types/alias.json", + "value": "{neutral-subdued-content-color-key-focus}", + "sets": { + "whcm": { + "$schema": "https://opensource.adobe.com/spectrum-tokens/schemas/token-types/color.json", + "value": "HighlightText" + } + } + }, + "menu-checkmark-display-hidden": { + "component": "menu", + "$schema": "https://opensource.adobe.com/spectrum-tokens/schemas/token-types/dimension.json", + "value": "none" + }, + "menu-checkmark-display-shown": { + "component": "menu", + "$schema": "https://opensource.adobe.com/spectrum-tokens/schemas/token-types/dimension.json", + "value": "block" + }, + "menu-checkmark-display": { + "component": "menu", + "$schema": "https://opensource.adobe.com/spectrum-tokens/schemas/token-types/alias.json", + "value": "{menu-checkmark-display-shown}" + }, + "menu-item-min-height": { + "component": "menu", + "$schema": "https://opensource.adobe.com/spectrum-tokens/schemas/token-types/alias.json", + "value": "{component-height-100}" + }, + "menu-item-icon-height": { + "component": "menu", + "$schema": "https://opensource.adobe.com/spectrum-tokens/schemas/token-types/alias.json", + "value": "{workflow-icon-size-100}" + }, + "menu-item-icon-width": { + "component": "menu", + "$schema": "https://opensource.adobe.com/spectrum-tokens/schemas/token-types/alias.json", + "value": "{workflow-icon-size-100}" + }, + "menu-item-linkout-icon-height": { + "component": "menu", + "$schema": "https://opensource.adobe.com/spectrum-tokens/schemas/token-types/alias.json", + "value": "{link-out-icon-size-100}" + }, + "menu-item-linkout-icon-width": { + "component": "menu", + "$schema": "https://opensource.adobe.com/spectrum-tokens/schemas/token-types/alias.json", + "value": "{link-out-icon-size-100}" + }, + "menu-item-label-font-size": { + "component": "menu", + "$schema": "https://opensource.adobe.com/spectrum-tokens/schemas/token-types/alias.json", + "value": "{font-size-100}" + }, + "menu-item-label-text-to-visual": { + "component": "menu", + "$schema": "https://opensource.adobe.com/spectrum-tokens/schemas/token-types/alias.json", + "value": "{text-to-visual-100}" + }, + "menu-item-top-to-action": { + "component": "menu", + "$schema": "https://opensource.adobe.com/spectrum-tokens/schemas/token-types/alias.json", + "value": "{spacing-50}" + }, + "menu-item-top-to-checkbox": { + "component": "menu", + "$schema": "https://opensource.adobe.com/spectrum-tokens/schemas/token-types/alias.json", + "value": "{spacing-50}" + }, + "menu-item-top-to-workflow-icon": { + "component": "menu", + "$schema": "https://opensource.adobe.com/spectrum-tokens/schemas/token-types/alias.json", + "value": "{component-top-to-workflow-icon-100}" + }, + "menu-item-label-inline-edge-to-content": { + "component": "menu", + "$schema": "https://opensource.adobe.com/spectrum-tokens/schemas/token-types/alias.json", + "value": "{component-edge-to-text-100}" + }, + "menu-item-top-edge-to-text": { + "component": "menu", + "$schema": "https://opensource.adobe.com/spectrum-tokens/schemas/token-types/alias.json", + "value": "{component-top-to-text-100}" + }, + "menu-item-bottom-edge-to-text": { + "component": "menu", + "$schema": "https://opensource.adobe.com/spectrum-tokens/schemas/token-types/alias.json", + "value": "{component-bottom-to-text-100}" + }, + "menu-item-text-to-control": { + "component": "menu", + "$schema": "https://opensource.adobe.com/spectrum-tokens/schemas/token-types/alias.json", + "value": "{text-to-control-100}" + }, + "menu-item-selectable-edge-to-text-not-selected": { + "component": "menu", + "$schema": "https://opensource.adobe.com/spectrum-tokens/schemas/token-types/alias.json", + "value": "{menu-item-selectable-edge-to-text-not-selected-medium}" + }, + "menu-item-description-font-size": { + "component": "menu", + "$schema": "https://opensource.adobe.com/spectrum-tokens/schemas/token-types/alias.json", + "value": "{font-size-75}" + }, + "menu-item-corner-radius": { + "component": "menu", + "$schema": "https://opensource.adobe.com/spectrum-tokens/schemas/token-types/alias.json", + "value": "{corner-radius-500}" + }, + "menu-item-checkmark-height": { + "component": "menu", + "$schema": "https://opensource.adobe.com/spectrum-tokens/schemas/token-types/alias.json", + "value": "{checkmark-icon-size-100}" + }, + "menu-item-checkmark-width": { + "component": "menu", + "$schema": "https://opensource.adobe.com/spectrum-tokens/schemas/token-types/alias.json", + "value": "{checkmark-icon-size-100}" + }, + "menu-item-top-to-checkmark": { + "component": "menu", + "$schema": "https://opensource.adobe.com/spectrum-tokens/schemas/token-types/alias.json", + "value": "{menu-item-top-to-selected-icon-medium}" + }, + "menu-item-chevron-height": { + "component": "menu", + "$schema": "https://opensource.adobe.com/spectrum-tokens/schemas/token-types/alias.json", + "value": "{chevron-icon-size-100}" + }, + "menu-item-chevron-width": { + "component": "menu", + "$schema": "https://opensource.adobe.com/spectrum-tokens/schemas/token-types/alias.json", + "value": "{chevron-icon-size-100}" + }, + "menu-item-top-to-thumbnail": { + "component": "menu", + "$schema": "https://opensource.adobe.com/spectrum-tokens/schemas/token-types/alias.json", + "value": "{menu-item-top-to-thumbnail-medium}" + }, + "menu-item-thumbnail-to-label": { + "component": "menu", + "$schema": "https://opensource.adobe.com/spectrum-tokens/schemas/token-types/alias.json", + "value": "{text-to-visual-200}" + }, + "menu-item-thumbnail-height": { + "component": "menu", + "$schema": "https://opensource.adobe.com/spectrum-tokens/schemas/token-types/alias.json", + "value": "{thumbnail-size-700}" + }, + "menu-item-thumbnail-width": { + "component": "menu", + "$schema": "https://opensource.adobe.com/spectrum-tokens/schemas/token-types/alias.json", + "value": "{thumbnail-size-700}" + }, + "menu-item-thumbnail-opacity-disabled": { + "component": "menu", + "$schema": "https://opensource.adobe.com/spectrum-tokens/schemas/token-types/opacity.json", + "value": 0.3 + }, + "menu-back-icon-margin": { + "component": "menu", + "$schema": "https://opensource.adobe.com/spectrum-tokens/schemas/token-types/alias.json", + "value": "{navigational-indicator-top-to-back-icon-medium}" + }, + "menu-item-focus-indicator-width": { + "component": "menu", + "$schema": "https://opensource.adobe.com/spectrum-tokens/schemas/token-types/alias.json", + "value": "{focus-indicator-thickness}" + }, + "menu-item-focus-indicator-color": { + "component": "menu", + "$schema": "https://opensource.adobe.com/spectrum-tokens/schemas/token-types/alias.json", + "value": "{focus-indicator-color}", + "sets": { + "whcm": { + "$schema": "https://opensource.adobe.com/spectrum-tokens/schemas/token-types/color.json", + "value": "Highlight" + } + } + }, + "menu-item-focus-indicator-offset": { + "component": "menu", + "$schema": "https://opensource.adobe.com/spectrum-tokens/schemas/token-types/alias.json", + "value": "{focus-indicator-gap}" + }, + "menu-item-focus-indicator-outline-style": { + "component": "menu", + "$schema": "https://opensource.adobe.com/spectrum-tokens/schemas/token-types/dimension.json", + "value": "solid" + }, + "menu-item-focus-indicator-color-default": { + "component": "menu", + "$schema": "https://opensource.adobe.com/spectrum-tokens/schemas/token-types/alias.json", + "value": "{menu-item-focus-indicator-color}" + }, + "menu-item-focus-margin": { + "component": "menu", + "$schema": "https://opensource.adobe.com/spectrum-tokens/schemas/token-types/dimension.json", + "value": "calc({menu-item-focus-indicator-offset} + {menu-item-focus-indicator-width})" + } +} diff --git a/components/meter/tokens.json b/components/meter/tokens.json new file mode 100644 index 00000000000..6e90e53eb73 --- /dev/null +++ b/components/meter/tokens.json @@ -0,0 +1,27 @@ +{ + "meter-default-width": { + "component": "meter", + "$schema": "https://opensource.adobe.com/spectrum-tokens/schemas/token-types/alias.json", + "value": "{progressbar-size-default}" + }, + "meter-maximum-width": { + "component": "meter", + "$schema": "https://opensource.adobe.com/spectrum-tokens/schemas/token-types/alias.json", + "value": "{progressbar-max-size}" + }, + "meter-minimum-width": { + "component": "meter", + "$schema": "https://opensource.adobe.com/spectrum-tokens/schemas/token-types/alias.json", + "value": "{progressbar-min-size}" + }, + "meter-thickness-small": { + "component": "meter", + "$schema": "https://opensource.adobe.com/spectrum-tokens/schemas/token-types/alias.json", + "value": "{progressbar-thickness-small}" + }, + "meter-thickness-large": { + "component": "meter", + "$schema": "https://opensource.adobe.com/spectrum-tokens/schemas/token-types/alias.json", + "value": "{progressbar-thickness-large}" + } +} diff --git a/components/miller/tokens.json b/components/miller/tokens.json new file mode 100644 index 00000000000..f14eab76606 --- /dev/null +++ b/components/miller/tokens.json @@ -0,0 +1,22 @@ +{ + "millercolumns-padding": { + "component": "miller", + "$schema": "https://opensource.adobe.com/spectrum-tokens/schemas/token-types/alias.json", + "value": "{spacing-100}" + }, + "millercolumns-inline-size": { + "component": "miller", + "$schema": "https://opensource.adobe.com/spectrum-tokens/schemas/token-types/dimension.json", + "value": "272px" + }, + "millercolumns-margin-inline-end": { + "component": "miller", + "$schema": "https://opensource.adobe.com/spectrum-tokens/schemas/token-types/alias.json", + "value": "{spacing-100}" + }, + "millercolumns-margin-inline-start": { + "component": "miller", + "$schema": "https://opensource.adobe.com/spectrum-tokens/schemas/token-types/alias.json", + "value": "{spacing-100}" + } +} diff --git a/components/modal/index.css b/components/modal/index.css index 4dad9fccf32..312c204caea 100644 --- a/components/modal/index.css +++ b/components/modal/index.css @@ -49,9 +49,7 @@ * We use the stretch value to counteract this where supported. */ block-size: 100vh; - /* stylelint-disable-next-line value-no-vendor-prefix */ block-size: -moz-available; - /* stylelint-disable-next-line value-no-vendor-prefix */ block-size: -webkit-fill-available; /* autoprefixer: ignore next -- -moz-available providing inconsistent results; want to fall FF back to 100vh */ diff --git a/components/modal/tokens.json b/components/modal/tokens.json new file mode 100644 index 00000000000..66cdb70848f --- /dev/null +++ b/components/modal/tokens.json @@ -0,0 +1,57 @@ +{ + "modal-confirm-entry-animation-duration": { + "component": "modal", + "$schema": "https://opensource.adobe.com/spectrum-tokens/schemas/token-types/alias.json", + "value": "{animation-duration-500}" + }, + "modal-confirm-entry-animation-delay": { + "component": "modal", + "$schema": "https://opensource.adobe.com/spectrum-tokens/schemas/token-types/alias.json", + "value": "{animation-duration-200}" + }, + "modal-confirm-exit-animation-duration": { + "component": "modal", + "$schema": "https://opensource.adobe.com/spectrum-tokens/schemas/token-types/alias.json", + "value": "{animation-duration-100}" + }, + "modal-confirm-exit-animation-delay": { + "component": "modal", + "$schema": "https://opensource.adobe.com/spectrum-tokens/schemas/token-types/alias.json", + "value": "{animation-duration-0}" + }, + "modal-fullscreen-margin": { + "component": "modal", + "$schema": "https://opensource.adobe.com/spectrum-tokens/schemas/token-types/alias.json", + "value": "{window-to-edge}" + }, + "modal-takeover-window-to-edge": { + "component": "modal", + "$schema": "https://opensource.adobe.com/spectrum-tokens/schemas/token-types/dimension.json", + "value": "0" + }, + "modal-max-height": { + "component": "modal", + "$schema": "https://opensource.adobe.com/spectrum-tokens/schemas/token-types/dimension.json", + "value": "90vh" + }, + "modal-max-width": { + "component": "modal", + "$schema": "https://opensource.adobe.com/spectrum-tokens/schemas/token-types/dimension.json", + "value": "90%" + }, + "modal-background-color": { + "component": "modal", + "$schema": "https://opensource.adobe.com/spectrum-tokens/schemas/token-types/alias.json", + "value": "transparent" + }, + "modal-confirm-border-radius": { + "component": "modal", + "$schema": "https://opensource.adobe.com/spectrum-tokens/schemas/token-types/alias.json", + "value": "{corner-radius-extra-large-default}" + }, + "modal-transition-animation-duration": { + "component": "modal", + "$schema": "https://opensource.adobe.com/spectrum-tokens/schemas/token-types/alias.json", + "value": "{animation-duration-100}" + } +} diff --git a/components/opacitycheckerboard/tokens.json b/components/opacitycheckerboard/tokens.json new file mode 100644 index 00000000000..cfe8c569830 --- /dev/null +++ b/components/opacitycheckerboard/tokens.json @@ -0,0 +1,28 @@ +{ + "opacity-checkerboard-dark": { + "component": "opacity-checkerboard", + "$schema": "https://opensource.adobe.com/spectrum-tokens/schemas/token-types/alias.json", + "value": "{opacity-checkerboard-square-dark}" + }, + "opacity-checkerboard-light": { + "component": "opacity-checkerboard", + "$schema": "https://opensource.adobe.com/spectrum-tokens/schemas/token-types/alias.json", + "value": "{opacity-checkerboard-square-light}" + }, + "opacity-checkerboard-size": { + "component": "opacity-checkerboard", + "$schema": "https://opensource.adobe.com/spectrum-tokens/schemas/token-types/scale-set.json", + "value": "{opacity-checkerboard-square-size-medium}", + "sets": { + "size-s": { + "$schema": "https://opensource.adobe.com/spectrum-tokens/schemas/token-types/alias.json", + "value": "{opacity-checkerboard-square-size-small}" + } + } + }, + "opacity-checkerboard-position": { + "component": "opacity-checkerboard", + "$schema": "https://opensource.adobe.com/spectrum-tokens/schemas/token-types/dimension.json", + "value": "left top" + } +} diff --git a/components/page/tokens.json b/components/page/tokens.json new file mode 100644 index 00000000000..748a9ef2b64 --- /dev/null +++ b/components/page/tokens.json @@ -0,0 +1,12 @@ +{ + "page-background-color": { + "component": "page", + "$schema": "https://opensource.adobe.com/spectrum-tokens/schemas/token-types/alias.json", + "value": "{gray-75}" + }, + "page-content-tap-highlight": { + "component": "page", + "$schema": "https://opensource.adobe.com/spectrum-tokens/schemas/token-types/alias.json", + "value": "{transparent-black-25}" + } +} diff --git a/components/pagination/tokens.json b/components/pagination/tokens.json new file mode 100644 index 00000000000..0a1ceda7426 --- /dev/null +++ b/components/pagination/tokens.json @@ -0,0 +1,50 @@ +{ + "pagination-item-inline-spacing": { + "component": "pagination", + "$schema": "https://opensource.adobe.com/spectrum-tokens/schemas/token-types/scale-set.json", + "sets": { + "desktop": { + "$schema": "https://opensource.adobe.com/spectrum-tokens/schemas/token-types/dimension.json", + "value": "5px" + }, + "mobile": { + "$schema": "https://opensource.adobe.com/spectrum-tokens/schemas/token-types/dimension.json", + "value": "6px" + } + } + }, + "pagination-textfield-width": { + "component": "pagination", + "$schema": "https://opensource.adobe.com/spectrum-tokens/schemas/token-types/scale-set.json", + "sets": { + "desktop": { + "$schema": "https://opensource.adobe.com/spectrum-tokens/schemas/token-types/alias.json", + "value": "{spacing-700}" + }, + "mobile": { + "$schema": "https://opensource.adobe.com/spectrum-tokens/schemas/token-types/dimension.json", + "value": "60px" + } + } + }, + "pagination-counter-color": { + "component": "pagination", + "$schema": "https://opensource.adobe.com/spectrum-tokens/schemas/token-types/alias.json", + "value": "{neutral-subdued-content-color-default}" + }, + "pagination-counter-font-size": { + "component": "pagination", + "$schema": "https://opensource.adobe.com/spectrum-tokens/schemas/token-types/alias.json", + "value": "{font-size-100}" + }, + "pagination-counter-line-height": { + "component": "pagination", + "$schema": "https://opensource.adobe.com/spectrum-tokens/schemas/token-types/alias.json", + "value": "{line-height-100}" + }, + "pagination-counter-inline-spacing": { + "component": "pagination", + "$schema": "https://opensource.adobe.com/spectrum-tokens/schemas/token-types/alias.json", + "value": "{pagination-item-inline-spacing}" + } +} diff --git a/components/picker/tokens.json b/components/picker/tokens.json new file mode 100644 index 00000000000..dda134b423f --- /dev/null +++ b/components/picker/tokens.json @@ -0,0 +1,475 @@ +{ + "picker-background-color-default": { + "component": "picker", + "$schema": "https://opensource.adobe.com/spectrum-tokens/schemas/token-types/alias.json", + "value": "{gray-100}", + "sets": { + "whcm": { + "$schema": "https://opensource.adobe.com/spectrum-tokens/schemas/token-types/color.json", + "value": "ButtonFace" + } + } + }, + "picker-background-color-default-open": { + "component": "picker", + "$schema": "https://opensource.adobe.com/spectrum-tokens/schemas/token-types/alias.json", + "value": "{gray-200}", + "sets": { + "whcm": { + "$schema": "https://opensource.adobe.com/spectrum-tokens/schemas/token-types/color.json", + "value": "ButtonFace" + } + } + }, + "picker-background-color-hover": { + "component": "picker", + "$schema": "https://opensource.adobe.com/spectrum-tokens/schemas/token-types/alias.json", + "value": "{gray-200}", + "sets": { + "whcm": { + "$schema": "https://opensource.adobe.com/spectrum-tokens/schemas/token-types/color.json", + "value": "ButtonFace" + } + } + }, + "picker-background-color-hover-open": { + "component": "picker", + "$schema": "https://opensource.adobe.com/spectrum-tokens/schemas/token-types/alias.json", + "value": "{gray-200}", + "sets": { + "whcm": { + "$schema": "https://opensource.adobe.com/spectrum-tokens/schemas/token-types/color.json", + "value": "ButtonFace" + } + } + }, + "picker-background-color-active": { + "component": "picker", + "$schema": "https://opensource.adobe.com/spectrum-tokens/schemas/token-types/alias.json", + "value": "{gray-200}", + "sets": { + "whcm": { + "$schema": "https://opensource.adobe.com/spectrum-tokens/schemas/token-types/color.json", + "value": "ButtonFace" + } + } + }, + "picker-background-color-key-focus": { + "component": "picker", + "$schema": "https://opensource.adobe.com/spectrum-tokens/schemas/token-types/alias.json", + "value": "{gray-200}", + "sets": { + "whcm": { + "$schema": "https://opensource.adobe.com/spectrum-tokens/schemas/token-types/color.json", + "value": "ButtonFace" + } + } + }, + "picker-border-color-default": { + "component": "picker", + "$schema": "https://opensource.adobe.com/spectrum-tokens/schemas/token-types/color.json", + "value": "transparent", + "sets": { + "whcm": { + "$schema": "https://opensource.adobe.com/spectrum-tokens/schemas/token-types/color.json", + "value": "ButtonBorder" + } + } + }, + "picker-border-color-default-open": { + "component": "picker", + "$schema": "https://opensource.adobe.com/spectrum-tokens/schemas/token-types/color.json", + "value": "transparent", + "sets": { + "whcm": { + "$schema": "https://opensource.adobe.com/spectrum-tokens/schemas/token-types/color.json", + "value": "ButtonBorder" + } + } + }, + "picker-border-color-hover": { + "component": "picker", + "$schema": "https://opensource.adobe.com/spectrum-tokens/schemas/token-types/color.json", + "value": "transparent", + "sets": { + "whcm": { + "$schema": "https://opensource.adobe.com/spectrum-tokens/schemas/token-types/color.json", + "value": "Highlight" + } + } + }, + "picker-border-color-hover-open": { + "component": "picker", + "$schema": "https://opensource.adobe.com/spectrum-tokens/schemas/token-types/color.json", + "value": "transparent", + "sets": { + "whcm": { + "$schema": "https://opensource.adobe.com/spectrum-tokens/schemas/token-types/color.json", + "value": "Highlight" + } + } + }, + "picker-border-color-active": { + "component": "picker", + "$schema": "https://opensource.adobe.com/spectrum-tokens/schemas/token-types/color.json", + "value": "transparent", + "sets": { + "whcm": { + "$schema": "https://opensource.adobe.com/spectrum-tokens/schemas/token-types/color.json", + "value": "ButtonBorder" + } + } + }, + "picker-border-color-key-focus": { + "component": "picker", + "$schema": "https://opensource.adobe.com/spectrum-tokens/schemas/token-types/color.json", + "value": "transparent", + "sets": { + "whcm": { + "$schema": "https://opensource.adobe.com/spectrum-tokens/schemas/token-types/color.json", + "value": "ButtonBorder" + } + } + }, + "picker-font-size": { + "component": "picker", + "$schema": "https://opensource.adobe.com/spectrum-tokens/schemas/token-types/alias.json", + "value": "{font-size-100}" + }, + "picker-font-weight": { + "component": "picker", + "$schema": "https://opensource.adobe.com/spectrum-tokens/schemas/token-types/alias.json", + "value": "{regular-font-weight}" + }, + "picker-placeholder-font-style": { + "component": "picker", + "$schema": "https://opensource.adobe.com/spectrum-tokens/schemas/token-types/alias.json", + "value": "{default-font-style}" + }, + "picker-line-height": { + "component": "picker", + "$schema": "https://opensource.adobe.com/spectrum-tokens/schemas/token-types/alias.json", + "value": "{line-height-100}" + }, + "picker-line-height-cjk": { + "component": "picker", + "$schema": "https://opensource.adobe.com/spectrum-tokens/schemas/token-types/alias.json", + "value": "{cjk-line-height-100}" + }, + "picker-block-size": { + "component": "picker", + "$schema": "https://opensource.adobe.com/spectrum-tokens/schemas/token-types/alias.json", + "value": "{component-height-100}" + }, + "picker-inline-size": { + "component": "picker", + "$schema": "https://opensource.adobe.com/spectrum-tokens/schemas/token-types/alias.json", + "value": "{field-default-width-medium}" + }, + "picker-min-inline-size": { + "component": "picker", + "$schema": "https://opensource.adobe.com/spectrum-tokens/schemas/token-types/alias.json", + "value": "calc({picker-minimum-width-multiplier} * {picker-block-size})" + }, + "picker-border-radius": { + "component": "picker", + "$schema": "https://opensource.adobe.com/spectrum-tokens/schemas/token-types/alias.json", + "value": "{corner-radius-medium-size-medium}" + }, + "picker-border-width": { + "component": "picker", + "$schema": "https://opensource.adobe.com/spectrum-tokens/schemas/token-types/alias.json", + "value": "{border-width-200}" + }, + "picker-spacing-top-to-text": { + "component": "picker", + "$schema": "https://opensource.adobe.com/spectrum-tokens/schemas/token-types/alias.json", + "value": "{component-top-to-text-100}" + }, + "picker-spacing-bottom-to-text": { + "component": "picker", + "$schema": "https://opensource.adobe.com/spectrum-tokens/schemas/token-types/alias.json", + "value": "{component-bottom-to-text-100}" + }, + "picker-spacing-edge-to-text": { + "component": "picker", + "$schema": "https://opensource.adobe.com/spectrum-tokens/schemas/token-types/alias.json", + "value": "{component-edge-to-text-100}" + }, + "picker-spacing-label-to-picker": { + "component": "picker", + "$schema": "https://opensource.adobe.com/spectrum-tokens/schemas/token-types/alias.json", + "value": "{field-label-to-component}" + }, + "picker-spacing-label-to-picker-quiet": { + "component": "picker", + "$schema": "https://opensource.adobe.com/spectrum-tokens/schemas/token-types/alias.json", + "value": "{field-label-to-component-quiet-medium}" + }, + "picker-spacing-starting-icon-to-text": { + "component": "picker", + "$schema": "https://opensource.adobe.com/spectrum-tokens/schemas/token-types/alias.json", + "value": "{text-to-visual-100}" + }, + "picker-spacing-text-to-icon-inline-end": { + "component": "picker", + "$schema": "https://opensource.adobe.com/spectrum-tokens/schemas/token-types/alias.json", + "value": "{text-to-visual-100}" + }, + "picker-spacing-icon-to-disclosure-icon": { + "component": "picker", + "$schema": "https://opensource.adobe.com/spectrum-tokens/schemas/token-types/alias.json", + "value": "{picker-visual-to-disclosure-icon-medium}" + }, + "picker-spacing-top-to-alert-icon": { + "component": "picker", + "$schema": "https://opensource.adobe.com/spectrum-tokens/schemas/token-types/alias.json", + "value": "{component-top-to-workflow-icon-100}" + }, + "picker-spacing-top-to-progress-circle": { + "component": "picker", + "$schema": "https://opensource.adobe.com/spectrum-tokens/schemas/token-types/alias.json", + "value": "{field-top-to-progress-circle-medium}" + }, + "picker-spacing-top-to-disclosure-icon": { + "component": "picker", + "$schema": "https://opensource.adobe.com/spectrum-tokens/schemas/token-types/alias.json", + "value": "{field-top-to-disclosure-icon-100}" + }, + "picker-spacing-edge-to-disclosure-icon": { + "component": "picker", + "$schema": "https://opensource.adobe.com/spectrum-tokens/schemas/token-types/alias.json", + "value": "{field-end-edge-to-disclosure-icon-100}" + }, + "picker-animation-duration": { + "component": "picker", + "$schema": "https://opensource.adobe.com/spectrum-tokens/schemas/token-types/alias.json", + "value": "{animation-duration-100}" + }, + "picker-font-color-default": { + "component": "picker", + "$schema": "https://opensource.adobe.com/spectrum-tokens/schemas/token-types/alias.json", + "value": "{neutral-content-color-default}", + "sets": { + "whcm": { + "$schema": "https://opensource.adobe.com/spectrum-tokens/schemas/token-types/color.json", + "value": "ButtonText" + } + } + }, + "picker-font-color-default-open": { + "component": "picker", + "$schema": "https://opensource.adobe.com/spectrum-tokens/schemas/token-types/alias.json", + "value": "{neutral-content-color-focus}", + "sets": { + "whcm": { + "$schema": "https://opensource.adobe.com/spectrum-tokens/schemas/token-types/color.json", + "value": "ButtonText" + } + } + }, + "picker-font-color-hover": { + "component": "picker", + "$schema": "https://opensource.adobe.com/spectrum-tokens/schemas/token-types/alias.json", + "value": "{neutral-content-color-hover}", + "sets": { + "whcm": { + "$schema": "https://opensource.adobe.com/spectrum-tokens/schemas/token-types/color.json", + "value": "ButtonText" + } + } + }, + "picker-font-color-hover-open": { + "component": "picker", + "$schema": "https://opensource.adobe.com/spectrum-tokens/schemas/token-types/alias.json", + "value": "{neutral-content-color-focus-hover}", + "sets": { + "whcm": { + "$schema": "https://opensource.adobe.com/spectrum-tokens/schemas/token-types/color.json", + "value": "ButtonText" + } + } + }, + "picker-font-color-active": { + "component": "picker", + "$schema": "https://opensource.adobe.com/spectrum-tokens/schemas/token-types/alias.json", + "value": "{neutral-content-color-down}", + "sets": { + "whcm": { + "$schema": "https://opensource.adobe.com/spectrum-tokens/schemas/token-types/color.json", + "value": "ButtonText" + } + } + }, + "picker-font-color-key-focus": { + "component": "picker", + "$schema": "https://opensource.adobe.com/spectrum-tokens/schemas/token-types/alias.json", + "value": "{neutral-content-color-key-focus}", + "sets": { + "whcm": { + "$schema": "https://opensource.adobe.com/spectrum-tokens/schemas/token-types/color.json", + "value": "ButtonText" + } + } + }, + "picker-icon-color-default": { + "component": "picker", + "$schema": "https://opensource.adobe.com/spectrum-tokens/schemas/token-types/alias.json", + "value": "{neutral-content-color-default}", + "sets": { + "whcm": { + "$schema": "https://opensource.adobe.com/spectrum-tokens/schemas/token-types/color.json", + "value": "ButtonText" + } + } + }, + "picker-icon-color-default-open": { + "component": "picker", + "$schema": "https://opensource.adobe.com/spectrum-tokens/schemas/token-types/alias.json", + "value": "{neutral-content-color-focus}", + "sets": { + "whcm": { + "$schema": "https://opensource.adobe.com/spectrum-tokens/schemas/token-types/color.json", + "value": "ButtonText" + } + } + }, + "picker-icon-color-hover": { + "component": "picker", + "$schema": "https://opensource.adobe.com/spectrum-tokens/schemas/token-types/alias.json", + "value": "{neutral-content-color-hover}", + "sets": { + "whcm": { + "$schema": "https://opensource.adobe.com/spectrum-tokens/schemas/token-types/color.json", + "value": "ButtonText" + } + } + }, + "picker-icon-color-hover-open": { + "component": "picker", + "$schema": "https://opensource.adobe.com/spectrum-tokens/schemas/token-types/alias.json", + "value": "{neutral-content-color-focus-hover}", + "sets": { + "whcm": { + "$schema": "https://opensource.adobe.com/spectrum-tokens/schemas/token-types/color.json", + "value": "ButtonText" + } + } + }, + "picker-icon-color-active": { + "component": "picker", + "$schema": "https://opensource.adobe.com/spectrum-tokens/schemas/token-types/alias.json", + "value": "{neutral-content-color-down}", + "sets": { + "whcm": { + "$schema": "https://opensource.adobe.com/spectrum-tokens/schemas/token-types/color.json", + "value": "ButtonText" + } + } + }, + "picker-icon-color-key-focus": { + "component": "picker", + "$schema": "https://opensource.adobe.com/spectrum-tokens/schemas/token-types/alias.json", + "value": "{neutral-content-color-key-focus}", + "sets": { + "whcm": { + "$schema": "https://opensource.adobe.com/spectrum-tokens/schemas/token-types/color.json", + "value": "ButtonText" + } + } + }, + "picker-border-color-error-default": { + "component": "picker", + "$schema": "https://opensource.adobe.com/spectrum-tokens/schemas/token-types/alias.json", + "value": "{negative-border-color-default}" + }, + "picker-border-color-error-default-open": { + "component": "picker", + "$schema": "https://opensource.adobe.com/spectrum-tokens/schemas/token-types/alias.json", + "value": "{negative-border-color-focus}" + }, + "picker-border-color-error-hover": { + "component": "picker", + "$schema": "https://opensource.adobe.com/spectrum-tokens/schemas/token-types/alias.json", + "value": "{negative-border-color-hover}" + }, + "picker-border-color-error-hover-open": { + "component": "picker", + "$schema": "https://opensource.adobe.com/spectrum-tokens/schemas/token-types/alias.json", + "value": "{negative-border-color-focus-hover}" + }, + "picker-border-color-error-active": { + "component": "picker", + "$schema": "https://opensource.adobe.com/spectrum-tokens/schemas/token-types/alias.json", + "value": "{negative-border-color-down}" + }, + "picker-border-color-error-key-focus": { + "component": "picker", + "$schema": "https://opensource.adobe.com/spectrum-tokens/schemas/token-types/alias.json", + "value": "{negative-border-color-key-focus}" + }, + "picker-icon-color-error": { + "component": "picker", + "$schema": "https://opensource.adobe.com/spectrum-tokens/schemas/token-types/alias.json", + "value": "{negative-visual-color}" + }, + "picker-background-color-disabled": { + "component": "picker", + "$schema": "https://opensource.adobe.com/spectrum-tokens/schemas/token-types/alias.json", + "value": "{disabled-background-color}", + "sets": { + "whcm": { + "$schema": "https://opensource.adobe.com/spectrum-tokens/schemas/token-types/color.json", + "value": "ButtonFace" + } + } + }, + "picker-font-color-disabled": { + "component": "picker", + "$schema": "https://opensource.adobe.com/spectrum-tokens/schemas/token-types/alias.json", + "value": "{disabled-content-color}", + "sets": { + "whcm": { + "$schema": "https://opensource.adobe.com/spectrum-tokens/schemas/token-types/color.json", + "value": "GrayText" + } + } + }, + "picker-icon-color-disabled": { + "component": "picker", + "$schema": "https://opensource.adobe.com/spectrum-tokens/schemas/token-types/alias.json", + "value": "{disabled-content-color}", + "sets": { + "whcm": { + "$schema": "https://opensource.adobe.com/spectrum-tokens/schemas/token-types/color.json", + "value": "GrayText" + } + } + }, + "picker-focus-indicator-gap": { + "component": "picker", + "$schema": "https://opensource.adobe.com/spectrum-tokens/schemas/token-types/alias.json", + "value": "{focus-indicator-gap}" + }, + "picker-focus-indicator-thickness": { + "component": "picker", + "$schema": "https://opensource.adobe.com/spectrum-tokens/schemas/token-types/alias.json", + "value": "{focus-indicator-thickness}" + }, + "picker-focus-indicator-color": { + "component": "picker", + "$schema": "https://opensource.adobe.com/spectrum-tokens/schemas/token-types/alias.json", + "value": "{focus-indicator-color}", + "sets": { + "whcm": { + "$schema": "https://opensource.adobe.com/spectrum-tokens/schemas/token-types/color.json", + "value": "Highlight" + } + } + }, + "picker-popover-animation-distance": { + "component": "picker", + "$schema": "https://opensource.adobe.com/spectrum-tokens/schemas/token-types/alias.json", + "value": "{component-to-menu-medium}" + } +} diff --git a/components/pickerbutton/tokens.json b/components/pickerbutton/tokens.json new file mode 100644 index 00000000000..f567555675e --- /dev/null +++ b/components/pickerbutton/tokens.json @@ -0,0 +1,147 @@ +{ + "picker-button-padding": { + "component": "picker-button", + "$schema": "https://opensource.adobe.com/spectrum-tokens/schemas/token-types/dimension.json", + "value": "4px" + }, + "picker-button-height": { + "component": "picker-button", + "$schema": "https://opensource.adobe.com/spectrum-tokens/schemas/token-types/alias.json", + "value": "{component-height-100}" + }, + "picker-button-width": { + "component": "picker-button", + "$schema": "https://opensource.adobe.com/spectrum-tokens/schemas/token-types/alias.json", + "value": "{component-height-100}" + }, + "picker-button-gap": { + "component": "picker-button", + "$schema": "https://opensource.adobe.com/spectrum-tokens/schemas/token-types/alias.json", + "value": "{text-to-visual-50}" + }, + "picker-button-label-padding": { + "component": "picker-button", + "$schema": "https://opensource.adobe.com/spectrum-tokens/schemas/token-types/alias.json", + "value": "{text-to-visual-50}" + }, + "picker-button-fill-padding": { + "component": "picker-button", + "$schema": "https://opensource.adobe.com/spectrum-tokens/schemas/token-types/alias.json", + "value": "{field-edge-to-disclosure-icon-100}" + }, + "picker-button-icon-color": { + "component": "picker-button", + "$schema": "https://opensource.adobe.com/spectrum-tokens/schemas/token-types/alias.json", + "value": "{neutral-content-color-default}" + }, + "picker-button-icon-color-hover": { + "component": "picker-button", + "$schema": "https://opensource.adobe.com/spectrum-tokens/schemas/token-types/alias.json", + "value": "{neutral-content-color-hover}" + }, + "picker-button-icon-color-down": { + "component": "picker-button", + "$schema": "https://opensource.adobe.com/spectrum-tokens/schemas/token-types/alias.json", + "value": "{neutral-content-color-down}" + }, + "picker-button-icon-color-key-focus": { + "component": "picker-button", + "$schema": "https://opensource.adobe.com/spectrum-tokens/schemas/token-types/alias.json", + "value": "{neutral-content-color-key-focus}" + }, + "picker-button-font-color": { + "component": "picker-button", + "$schema": "https://opensource.adobe.com/spectrum-tokens/schemas/token-types/alias.json", + "value": "{neutral-content-color-default}" + }, + "picker-button-font-color-hover": { + "component": "picker-button", + "$schema": "https://opensource.adobe.com/spectrum-tokens/schemas/token-types/alias.json", + "value": "{neutral-content-color-hover}" + }, + "picker-button-font-color-down": { + "component": "picker-button", + "$schema": "https://opensource.adobe.com/spectrum-tokens/schemas/token-types/alias.json", + "value": "{neutral-content-color-down}" + }, + "picker-button-font-color-key-focus": { + "component": "picker-button", + "$schema": "https://opensource.adobe.com/spectrum-tokens/schemas/token-types/alias.json", + "value": "{neutral-content-color-key-focus}" + }, + "picker-button-font-family": { + "component": "picker-button", + "$schema": "https://opensource.adobe.com/spectrum-tokens/schemas/token-types/alias.json", + "value": "{sans-font-family-stack}" + }, + "picker-button-font-style": { + "component": "picker-button", + "$schema": "https://opensource.adobe.com/spectrum-tokens/schemas/token-types/alias.json", + "value": "{default-font-style}" + }, + "picker-button-font-weight": { + "component": "picker-button", + "$schema": "https://opensource.adobe.com/spectrum-tokens/schemas/token-types/alias.json", + "value": "{body-sans-serif-font-weight}" + }, + "picker-button-font-size": { + "component": "picker-button", + "$schema": "https://opensource.adobe.com/spectrum-tokens/schemas/token-types/alias.json", + "value": "{font-size-100}" + }, + "picker-button-border-color": { + "component": "picker-button", + "$schema": "https://opensource.adobe.com/spectrum-tokens/schemas/token-types/color.json", + "value": "inherit" + }, + "picker-button-border-radius": { + "component": "picker-button", + "$schema": "https://opensource.adobe.com/spectrum-tokens/schemas/token-types/alias.json", + "value": "{corner-radius-100}" + }, + "picker-button-border-radius-rounded-sided": { + "component": "picker-button", + "$schema": "https://opensource.adobe.com/spectrum-tokens/schemas/token-types/dimension.json", + "value": "0" + }, + "picker-button-border-radius-sided": { + "component": "picker-button", + "$schema": "https://opensource.adobe.com/spectrum-tokens/schemas/token-types/dimension.json", + "value": "0" + }, + "picker-button-border-width": { + "component": "picker-button", + "$schema": "https://opensource.adobe.com/spectrum-tokens/schemas/token-types/alias.json", + "value": "{border-width-100}" + }, + "picker-button-border-radius-rounded": { + "component": "picker-button", + "$schema": "https://opensource.adobe.com/spectrum-tokens/schemas/token-types/alias.json", + "value": "{corner-radius-200}" + }, + "picker-button-background-color": { + "component": "picker-button", + "$schema": "https://opensource.adobe.com/spectrum-tokens/schemas/token-types/alias.json", + "value": "{gray-50}" + }, + "picker-button-background-color-hover": { + "component": "picker-button", + "$schema": "https://opensource.adobe.com/spectrum-tokens/schemas/token-types/alias.json", + "value": "{gray-100}" + }, + "picker-button-background-color-down": { + "component": "picker-button", + "$schema": "https://opensource.adobe.com/spectrum-tokens/schemas/token-types/alias.json", + "value": "{gray-200}" + }, + "picker-button-background-color-key-focus": { + "component": "picker-button", + "$schema": "https://opensource.adobe.com/spectrum-tokens/schemas/token-types/alias.json", + "value": "{gray-100}" + }, + "picker-button-background-animation-duration": { + "component": "picker-button", + "$schema": "https://opensource.adobe.com/spectrum-tokens/schemas/token-types/alias.json", + "value": "{animation-duration-100}" + } +} diff --git a/components/popover/dist/metadata.json b/components/popover/dist/metadata.json index 2abca542258..339c867f0cb 100644 --- a/components/popover/dist/metadata.json +++ b/components/popover/dist/metadata.json @@ -119,10 +119,9 @@ "component": [ "--spectrum-popover-animation-distance", "--spectrum-popover-background-color", - "--spectrum-popover-border-color-rgb", + "--spectrum-popover-border-color", "--spectrum-popover-border-color-with-transparency", "--spectrum-popover-border-opacity", - "--spectrum-popover-border-transparency", "--spectrum-popover-border-width", "--spectrum-popover-box-shadow", "--spectrum-popover-content-area-spacing", @@ -150,7 +149,6 @@ "--spectrum-drop-shadow-elevated-color", "--spectrum-drop-shadow-elevated-x", "--spectrum-drop-shadow-elevated-y", - "--spectrum-gray-200-rgb", "--spectrum-spacing-100" ], "passthroughs": [], diff --git a/components/popover/index.css b/components/popover/index.css index 27722e1eaf6..03b1d52068f 100644 --- a/components/popover/index.css +++ b/components/popover/index.css @@ -15,19 +15,13 @@ .spectrum-Popover { /* animation distance is equal to and responsible for popover offset ("spacing" tip to source) */ - --spectrum-popover-animation-distance: var(--spectrum-spacing-100); - - --spectrum-popover-background-color: var(--spectrum-background-layer-2-color); - --spectrum-popover-border-width: var(--spectrum-border-width-100); - - /* TODO: Cannot use popover-border-color token until the value no longer has the rgba() function alpha/opacity. We should be able to refactor instances of `--spectrum-popover-border-color-rgb` with `--spectrum-popover-border-color` once this is available. */ - /* --spectrum-popover-border-color-default: var(--spectrum-popover-border-color); */ - --spectrum-popover-border-color-rgb: var(--spectrum-gray-200-rgb); - --spectrum-popover-border-transparency: var(--spectrum-popover-border-opacity); - --spectrum-popover-border-color-with-transparency: rgb(var(--spectrum-popover-border-color-rgb), var(--spectrum-popover-border-transparency)); + --spectrum-popover-animation-distance: var(--mod-popover-animation-distance, var(--spectrum-spacing-100)); + --spectrum-popover-background-color: var(--mod-popover-background-color, var(--spectrum-background-layer-2-color)); + --spectrum-popover-border-width: var(--mod-popover-border-width, var(--spectrum-border-width-100)); + --spectrum-popover-border-color-with-transparency: var(--highcontrast-popover-border-color, var(--mod-popover-border-color, color-mix(in sRGB, var(--spectrum-popover-border-color) var(--spectrum-popover-border-opacity), transparent))); /* popover inner padding */ - --spectrum-popover-content-area-spacing: var(--spectrum-popover-edge-to-content-area); + --spectrum-popover-content-area-spacing: var(--mod-popover-content-area-spacing, var(--spectrum-popover-edge-to-content-area)); /* popover drop shadow */ --spectrum-popover-drop-shadow-x: var(--spectrum-drop-shadow-elevated-x); @@ -36,25 +30,20 @@ --spectrum-popover-drop-shadow-color: var(--spectrum-drop-shadow-elevated-color); /* popover corner radius */ - --spectrum-popover-corner-radius: var(--spectrum-corner-radius-large-default); + --spectrum-popover-corner-radius: var(--mod-popover-corner-radius, var(--spectrum-corner-radius-large-default)); /* pointer tip dimensions */ - --spectrum-popover-pointer-width: var(--spectrum-popover-tip-width); - --spectrum-popover-pointer-height: var(--spectrum-popover-tip-height); + --spectrum-popover-pointer-width: var(--mod-popover-pointer-width, var(--spectrum-popover-tip-width)); + --spectrum-popover-pointer-height: var(--mod-popover-pointer-height, var(--spectrum-popover-tip-height)); +} +.spectrum-Popover { /* pointer tip - default spacing to edge - corner radius plus half of tip width to neutralize override */ --spectrum-popover-pointer-edge-offset: calc(var(--spectrum-popover-corner-radius) + (var(--spectrum-popover-tip-width) / 2)); /* pointer tip - spacing to edge will center pointer to source - apply in markup by setting '--spectrum-popover-pointer-edge-offset' value == half of source */ - --spectrum-popover-pointer-edge-spacing: calc(var(--spectrum-popover-pointer-edge-offset) - (var(--spectrum-popover-tip-width) / 2)); -} - -.spectrum-Popover { - /* filter is for popovers with a tip. we divide the blur by 2 to match the box-shadow rendering better. */ - --spectrum-popover-filter: drop-shadow(var(--mod-popover-drop-shadow-x, var(--spectrum-popover-drop-shadow-x)) var(--mod-popover-drop-shadow-y, var(--spectrum-popover-drop-shadow-y)) calc(var(--mod-popover-drop-shadow-blur, var(--spectrum-popover-drop-shadow-blur)) / 2) var(--mod-popover-drop-shadow-color, var(--spectrum-popover-drop-shadow-color))); - - /* box-shadow is for popovers without a tip. */ - --spectrum-popover-box-shadow: var(--mod-popover-drop-shadow-x, var(--spectrum-popover-drop-shadow-x)) var(--mod-popover-drop-shadow-y, var(--spectrum-popover-drop-shadow-y)) var(--mod-popover-drop-shadow-blur, var(--spectrum-popover-drop-shadow-blur)) var(--mod-popover-drop-shadow-color, var(--spectrum-popover-drop-shadow-color)); + --spectrum-popover-pointer-edge-spacing: var(--mod-popover-pointer-edge-spacing, calc(var(--spectrum-popover-pointer-edge-offset) - (var(--spectrum-popover-tip-width) / 2))); + --spectrum-popover-filter: drop-shadow(var(--mod-popover-drop-shadow-x, var(--spectrum-popover-drop-shadow-x)) var(--mod-popover-drop-shadow-y, var(--spectrum-popover-drop-shadow-y)) var(--mod-popover-drop-shadow-blur, var(--spectrum-popover-drop-shadow-blur)) var(--mod-popover-drop-shadow-color, var(--spectrum-popover-drop-shadow-color))); @extend %spectrum-overlay; @@ -63,16 +52,16 @@ outline: none; /* Hide focus outline */ - padding: var(--mod-popover-content-area-spacing, var(--spectrum-popover-content-area-spacing)); + padding: var(--spectrum-popover-content-area-spacing); display: inline-flex; flex-direction: column; border-style: solid; - border-radius: var(--mod-popover-corner-radius, var(--spectrum-popover-corner-radius)); - border-color: var(--highcontrast-popover-border-color, var(--mod-popover-border-color, var(--spectrum-popover-border-color-with-transparency))); + border-radius: var(--spectrum-popover-corner-radius); + border-color: var(--spectrum-popover-border-color-with-transparency); - border-width: var(--mod-popover-border-width, var(--spectrum-popover-border-width)); + border-width: var(--spectrum-popover-border-width); background-color: var(--mod-popover-background-color, var(--spectrum-popover-background-color)); box-shadow: var(--mod-popover-box-shadow, var(--spectrum-popover-box-shadow)); @@ -89,9 +78,9 @@ .spectrum-Popover-tip-triangle { stroke-linecap: square; stroke-linejoin: miter; - fill: var(--mod-popover-background-color, var(--spectrum-popover-background-color)); - stroke: var(--highcontrast-popover-border-color, var(--mod-popover-border-color, var(--spectrum-popover-border-color-with-transparency))); - stroke-width: var(--mod-popover-border-width, var(--spectrum-popover-border-width)); + fill: var(--spectrum-popover-background-color); + stroke: var(--spectrum-popover-border-color-with-transparency); + stroke-width: var(--spectrum-popover-border-width); } } } @@ -114,13 +103,13 @@ /* spacing to include tip in calculation of offset from source */ &.spectrum-Popover--withTip { /* tip size minus where it overlaps with popover border */ - margin-block-end: calc(var(--mod-popover-pointer-height, var(--spectrum-popover-pointer-height)) - var(--mod-popover-border-width, var(--spectrum-popover-border-width))); + margin-block-end: calc(var(--spectrum-popover-pointer-height) - var(--spectrum-popover-border-width)); } /* popover animates upward ⬆ */ &.is-open { /* TranslateZ is Safari fix to prevent clipping of filter dropshadow and accelerate the element to GPU layer */ - transform: translateY(calc(-1 * var(--mod-popover-animation-distance, var(--spectrum-popover-animation-distance)))) translateZ(0); + transform: translateY(calc(-1 * var(--spectrum-popover-animation-distance))) translateZ(0); } } @@ -133,13 +122,13 @@ /* spacing to include tip in calculation of offset from source */ &.spectrum-Popover--withTip { /* tip size minus where it overlaps with popover border */ - margin-block-start: calc(var(--mod-popover-pointer-height, var(--spectrum-popover-pointer-height)) - var(--mod-popover-border-width, var(--spectrum-popover-border-width))); + margin-block-start: calc(var(--spectrum-popover-pointer-height) - var(--spectrum-popover-border-width)); } /* popover animates downward ⬇ */ &.is-open { /* TranslateZ is Safari fix to prevent clipping of filter dropshadow and accelerate the element to GPU layer */ - transform: translateY(var(--mod-popover-animation-distance, var(--spectrum-popover-animation-distance))) translateZ(0); + transform: translateY(var(--spectrum-popover-animation-distance)) translateZ(0); } } @@ -151,13 +140,13 @@ &.spectrum-Popover--withTip { /* tip size minus where it overlaps with popover border */ /* stylelint-disable-next-line csstools/use-logical -- intentional, right stays on the same side even for RTL */ - margin-left: calc(var(--mod-popover-pointer-height, var(--spectrum-popover-pointer-height)) - var(--mod-popover-border-width, var(--spectrum-popover-border-width))); + margin-left: calc(var(--spectrum-popover-pointer-height) - var(--spectrum-popover-border-width)); } /* popover animates towards right ⮕ */ &.is-open { /* TranslateZ is Safari fix to prevent clipping of filter dropshadow and accelerate the element to GPU layer */ - transform: translateX(var(--mod-popover-animation-distance, var(--spectrum-popover-animation-distance))) translateZ(0); + transform: translateX(var(--spectrum-popover-animation-distance)) translateZ(0); } } @@ -169,13 +158,13 @@ &.spectrum-Popover--withTip { /* tip size minus where it overlaps with popover border */ /* stylelint-disable-next-line csstools/use-logical -- intentional, left stays on the same side even for RTL */ - margin-right: calc(var(--mod-popover-pointer-height, var(--spectrum-popover-pointer-height)) - var(--mod-popover-border-width, var(--spectrum-popover-border-width))); + margin-right: calc(var(--spectrum-popover-pointer-height) - var(--spectrum-popover-border-width)); } /* popover animates towards left ⬅ */ &.is-open { /* TranslateZ is Safari fix to prevent clipping of filter dropshadow and accelerate the element to GPU layer */ - transform: translateX(calc(-1 * var(--mod-popover-animation-distance, var(--spectrum-popover-animation-distance)))) translateZ(0); + transform: translateX(calc(-1 * var(--spectrum-popover-animation-distance))) translateZ(0); } } @@ -186,18 +175,18 @@ /* spacing to include tip in calculation of offset from source */ &.spectrum-Popover--withTip { /* tip size minus where it overlaps with popover border */ - margin-inline-end: calc(var(--mod-popover-pointer-height, var(--spectrum-popover-pointer-height)) - var(--mod-popover-border-width, var(--spectrum-popover-border-width))); + margin-inline-end: calc(var(--spectrum-popover-pointer-height) - var(--spectrum-popover-border-width)); } /* LTR read, popover animates towards left ⬅ */ &.is-open { /* TranslateZ is Safari fix to prevent clipping of filter dropshadow and accelerate the element to GPU layer */ - transform: translateX(calc(-1 * var(--mod-popover-animation-distance, var(--spectrum-popover-animation-distance)))) translateZ(0); + transform: translateX(calc(-1 * var(--spectrum-popover-animation-distance))) translateZ(0); } /* RTL read, popover animates towards right ⮕ */ &.is-open:dir(rtl) { - transform: translateX(var(--mod-popover-animation-distance, var(--spectrum-popover-animation-distance))) translateZ(0); + transform: translateX(var(--spectrum-popover-animation-distance)) translateZ(0); } } @@ -208,20 +197,20 @@ /* spacing to include tip in calculation of offset from source */ &.spectrum-Popover--withTip { /* tip size minus where it overlaps with popover border */ - margin-inline-start: calc(var(--mod-popover-pointer-height, var(--spectrum-popover-pointer-height)) - var(--mod-popover-border-width, var(--spectrum-popover-border-width))); + margin-inline-start: calc(var(--spectrum-popover-pointer-height) - var(--spectrum-popover-border-width)); } /* LTR read, popover animates towards right ⮕ */ &.is-open { /* TranslateZ is Safari fix to prevent clipping of filter dropshadow and accelerate the element to GPU layer */ - transform: translateX(var(--mod-popover-animation-distance, var(--spectrum-popover-animation-distance))) translateZ(0); + transform: translateX(var(--spectrum-popover-animation-distance)) translateZ(0); } /* RTL read, popover animates towards left ⬅ */ &:dir(rtl) { &.is-open { /* TranslateZ is Safari fix to prevent clipping of filter dropshadow and accelerate the element to GPU layer */ - transform: translateX(calc(-1 * var(--mod-popover-animation-distance, var(--spectrum-popover-animation-distance)))) translateZ(0); + transform: translateX(calc(-1 * var(--spectrum-popover-animation-distance))) translateZ(0); } } } @@ -241,8 +230,8 @@ &.spectrum-Popover--bottom-start, &.spectrum-Popover--bottom-end { .spectrum-Popover-tip { - inline-size: var(--mod-popover-pointer-width, var(--spectrum-popover-pointer-width)); - block-size: var(--mod-popover-pointer-height, var(--spectrum-popover-pointer-height)); + inline-size: var(--spectrum-popover-pointer-width); + block-size: var(--spectrum-popover-pointer-height); position: absolute; inset-block-start: 100%; inset-inline: 0; @@ -256,28 +245,28 @@ /* popover is at top of source, tip left and pointing down ▽ */ &.spectrum-Popover--top-left { .spectrum-Popover-tip { - inset-inline: var(--mod-popover-pointer-edge-spacing, var(--spectrum-popover-pointer-edge-spacing)) auto; + inset-inline: var(--spectrum-popover-pointer-edge-spacing) auto; } } /* popover is at top of source, tip right and pointing down ▽ */ &.spectrum-Popover--top-right { .spectrum-Popover-tip { - inset-inline: auto var(--mod-popover-pointer-edge-spacing, var(--spectrum-popover-pointer-edge-spacing)); + inset-inline: auto var(--spectrum-popover-pointer-edge-spacing); } } /* logical property - popover is above, source and tip are at start, tip pointing down ▽ */ &.spectrum-Popover--top-start { .spectrum-Popover-tip { - margin-inline-start: var(--mod-popover-pointer-edge-spacing, var(--spectrum-popover-pointer-edge-spacing)); + margin-inline-start: var(--spectrum-popover-pointer-edge-spacing); } } /* logical property - popover is above, source and tip are at end, tip pointing down ▽ */ &.spectrum-Popover--top-end { .spectrum-Popover-tip { - margin-inline-end: var(--mod-popover-pointer-edge-spacing, var(--spectrum-popover-pointer-edge-spacing)); + margin-inline-end: var(--spectrum-popover-pointer-edge-spacing); } } @@ -298,28 +287,28 @@ /* popover position is bottom, source is at left, tip pointing up △ */ &.spectrum-Popover--bottom-left { .spectrum-Popover-tip { - inset-inline: var(--mod-popover-pointer-edge-spacing, var(--spectrum-popover-pointer-edge-spacing)) auto; + inset-inline: var(--spectrum-popover-pointer-edge-spacing) auto; } } /* popover position is bottom, source is at right, tip pointing up △ */ &.spectrum-Popover--bottom-right { .spectrum-Popover-tip { - inset-inline: auto var(--mod-popover-pointer-edge-spacing, var(--spectrum-popover-pointer-edge-spacing)); + inset-inline: auto var(--spectrum-popover-pointer-edge-spacing); } } /* logical property - popover is below, source is at start, tip pointing up △ */ &.spectrum-Popover--bottom-start { .spectrum-Popover-tip { - margin-inline-start: var(--mod-popover-pointer-edge-spacing, var(--spectrum-popover-pointer-edge-spacing)); + margin-inline-start: var(--spectrum-popover-pointer-edge-spacing); } } /* logical property - popover is below, source is at end, tip pointing up △ */ &.spectrum-Popover--bottom-end { .spectrum-Popover-tip { - margin-inline-end: var(--mod-popover-pointer-edge-spacing, var(--spectrum-popover-pointer-edge-spacing)); + margin-inline-end: var(--spectrum-popover-pointer-edge-spacing); } } @@ -338,8 +327,8 @@ &.spectrum-Popover--end-bottom { .spectrum-Popover-tip { /* swap height and width for vertical triangle */ - inline-size: var(--mod-popover-pointer-height, var(--spectrum-popover-pointer-height)); - block-size: var(--mod-popover-pointer-width, var(--spectrum-popover-pointer-width)); + inline-size: var(--spectrum-popover-pointer-height); + block-size: var(--spectrum-popover-pointer-width); inset-block: 0; } } @@ -375,7 +364,7 @@ &.spectrum-Popover--start-top, &.spectrum-Popover--end-top { .spectrum-Popover-tip { - inset-block: var(--mod-popover-pointer-edge-spacing, var(--spectrum-popover-pointer-edge-spacing)) auto; + inset-block: var(--spectrum-popover-pointer-edge-spacing) auto; } } @@ -385,7 +374,7 @@ &.spectrum-Popover--start-bottom, &.spectrum-Popover--end-bottom { .spectrum-Popover-tip { - inset-block: auto var(--mod-popover-pointer-edge-spacing, var(--spectrum-popover-pointer-edge-spacing)); + inset-block: auto var(--spectrum-popover-pointer-edge-spacing); } } diff --git a/components/popover/tokens.json b/components/popover/tokens.json new file mode 100644 index 00000000000..d7c12633a26 --- /dev/null +++ b/components/popover/tokens.json @@ -0,0 +1,83 @@ +{ + "popover-animation-distance": { + "component": "popover", + "$schema": "https://opensource.adobe.com/spectrum-tokens/schemas/token-types/alias.json", + "value": "{spacing-100}" + }, + "popover-background-color": { + "component": "popover", + "$schema": "https://opensource.adobe.com/spectrum-tokens/schemas/token-types/alias.json", + "value": "{background-layer-2-color}" + }, + "popover-border-width": { + "component": "popover", + "$schema": "https://opensource.adobe.com/spectrum-tokens/schemas/token-types/alias.json", + "value": "{border-width-100}" + }, + "popover-border-color-with-transparency": { + "component": "popover", + "$schema": "https://opensource.adobe.com/spectrum-tokens/schemas/token-types/alias.json", + "value": "color-mix(in sRGB, {popover-border-color} {popover-border-opacity}, transparent)", + "sets": { + "whcm": { + "$schema": "https://opensource.adobe.com/spectrum-tokens/schemas/token-types/color.json", + "value": "CanvasText" + } + } + }, + "popover-content-area-spacing": { + "component": "popover", + "$schema": "https://opensource.adobe.com/spectrum-tokens/schemas/token-types/alias.json", + "value": "{popover-edge-to-content-area}" + }, + "popover-drop-shadow-x": { + "component": "popover", + "$schema": "https://opensource.adobe.com/spectrum-tokens/schemas/token-types/alias.json", + "value": "{drop-shadow-elevated-x}" + }, + "popover-drop-shadow-y": { + "component": "popover", + "$schema": "https://opensource.adobe.com/spectrum-tokens/schemas/token-types/alias.json", + "value": "{drop-shadow-elevated-y}" + }, + "popover-drop-shadow-blur": { + "component": "popover", + "$schema": "https://opensource.adobe.com/spectrum-tokens/schemas/token-types/alias.json", + "value": "{drop-shadow-elevated-blur}" + }, + "popover-drop-shadow-color": { + "component": "popover", + "$schema": "https://opensource.adobe.com/spectrum-tokens/schemas/token-types/alias.json", + "value": "{drop-shadow-elevated-color}" + }, + "popover-corner-radius": { + "component": "popover", + "$schema": "https://opensource.adobe.com/spectrum-tokens/schemas/token-types/alias.json", + "value": "{corner-radius-large-default}" + }, + "popover-pointer-width": { + "component": "popover", + "$schema": "https://opensource.adobe.com/spectrum-tokens/schemas/token-types/alias.json", + "value": "{popover-tip-width}" + }, + "popover-pointer-height": { + "component": "popover", + "$schema": "https://opensource.adobe.com/spectrum-tokens/schemas/token-types/alias.json", + "value": "{popover-tip-height}" + }, + "popover-pointer-edge-offset": { + "component": "popover", + "$schema": "https://opensource.adobe.com/spectrum-tokens/schemas/token-types/alias.json", + "value": "calc({popover-corner-radius} + ({popover-tip-width} / 2))" + }, + "popover-pointer-edge-spacing": { + "component": "popover", + "$schema": "https://opensource.adobe.com/spectrum-tokens/schemas/token-types/alias.json", + "value": "calc({popover-pointer-edge-offset} - ({popover-tip-width} / 2))" + }, + "popover-filter": { + "component": "popover", + "$schema": "https://opensource.adobe.com/spectrum-tokens/schemas/token-types/alias.json", + "value": "drop-shadow({popover-drop-shadow-x} {popover-drop-shadow-y} {popover-drop-shadow-blur} {popover-drop-shadow-color})" + } +} diff --git a/components/progressbar/tokens.json b/components/progressbar/tokens.json new file mode 100644 index 00000000000..32650289297 --- /dev/null +++ b/components/progressbar/tokens.json @@ -0,0 +1,135 @@ +{ + "progressbar-animation-ease-in-out-indeterminate": { + "component": "progress-bar", + "$schema": "https://opensource.adobe.com/spectrum-tokens/schemas/token-types/alias.json", + "value": "{animation-ease-in-out}" + }, + "progressbar-animation-duration-indeterminate": { + "component": "progress-bar", + "$schema": "https://opensource.adobe.com/spectrum-tokens/schemas/token-types/alias.json", + "value": "{animation-duration-2000}" + }, + "progressbar-corner-radius": { + "component": "progress-bar", + "$schema": "https://opensource.adobe.com/spectrum-tokens/schemas/token-types/alias.json", + "value": "{corner-radius-full}" + }, + "progressbar-fill-size-indeterminate": { + "component": "progress-bar", + "$schema": "https://opensource.adobe.com/spectrum-tokens/schemas/token-types/dimension.json", + "value": "70%" + }, + "progressbar-size-2400": { + "component": "progress-bar", + "$schema": "https://opensource.adobe.com/spectrum-tokens/schemas/token-types/dimension.json", + "value": "192px" + }, + "progressbar-size-2500": { + "component": "progress-bar", + "$schema": "https://opensource.adobe.com/spectrum-tokens/schemas/token-types/dimension.json", + "value": "200px" + }, + "progressbar-size-2800": { + "component": "progress-bar", + "$schema": "https://opensource.adobe.com/spectrum-tokens/schemas/token-types/dimension.json", + "value": "224px" + }, + "progressbar-size-default": { + "component": "progress-bar", + "$schema": "https://opensource.adobe.com/spectrum-tokens/schemas/token-types/alias.json", + "value": "{progressbar-size-2400}" + }, + "progressbar-font-size": { + "component": "progress-bar", + "$schema": "https://opensource.adobe.com/spectrum-tokens/schemas/token-types/alias.json", + "value": "{font-size-100}" + }, + "progressbar-line-height": { + "component": "progress-bar", + "$schema": "https://opensource.adobe.com/spectrum-tokens/schemas/token-types/alias.json", + "value": "{line-height-100}" + }, + "progressbar-line-height-cjk": { + "component": "progress-bar", + "$schema": "https://opensource.adobe.com/spectrum-tokens/schemas/token-types/alias.json", + "value": "{cjk-line-height-100}" + }, + "progressbar-min-size": { + "component": "progress-bar", + "$schema": "https://opensource.adobe.com/spectrum-tokens/schemas/token-types/alias.json", + "value": "{progress-bar-minimum-width}" + }, + "progressbar-max-size": { + "component": "progress-bar", + "$schema": "https://opensource.adobe.com/spectrum-tokens/schemas/token-types/alias.json", + "value": "{progress-bar-maximum-width}" + }, + "progressbar-thickness": { + "component": "progress-bar", + "$schema": "https://opensource.adobe.com/spectrum-tokens/schemas/token-types/alias.json", + "value": "{progress-bar-thickness-medium}" + }, + "progressbar-spacing-label-to-progressbar": { + "component": "progress-bar", + "$schema": "https://opensource.adobe.com/spectrum-tokens/schemas/token-types/alias.json", + "value": "{spacing-75}" + }, + "progressbar-spacing-top-to-text": { + "component": "progress-bar", + "$schema": "https://opensource.adobe.com/spectrum-tokens/schemas/token-types/alias.json", + "value": "{component-top-to-text-100}" + }, + "progressbar-spacing-label-to-text": { + "component": "progress-bar", + "$schema": "https://opensource.adobe.com/spectrum-tokens/schemas/token-types/alias.json", + "value": "{spacing-200}" + }, + "progressbar-text-color": { + "component": "progress-bar", + "$schema": "https://opensource.adobe.com/spectrum-tokens/schemas/token-types/alias.json", + "value": "{neutral-subdued-content-color-default}" + }, + "progressbar-track-color": { + "component": "progress-bar", + "$schema": "https://opensource.adobe.com/spectrum-tokens/schemas/token-types/alias.json", + "value": "{gray-300}", + "sets": { + "whcm": { + "$schema": "https://opensource.adobe.com/spectrum-tokens/schemas/token-types/color.json", + "value": "ButtonFace" + } + } + }, + "progressbar-fill-color": { + "component": "progress-bar", + "$schema": "https://opensource.adobe.com/spectrum-tokens/schemas/token-types/alias.json", + "value": "{accent-content-color-default}", + "sets": { + "whcm": { + "$schema": "https://opensource.adobe.com/spectrum-tokens/schemas/token-types/color.json", + "value": "ButtonText" + } + } + }, + "progressbar-label-and-value-white": { + "component": "progress-bar", + "$schema": "https://opensource.adobe.com/spectrum-tokens/schemas/token-types/alias.json", + "value": "{transparent-white-700}" + }, + "progressbar-track-color-white": { + "component": "progress-bar", + "$schema": "https://opensource.adobe.com/spectrum-tokens/schemas/token-types/alias.json", + "value": "{transparent-white-300}" + }, + "progressbar-fill-color-white": { + "component": "progress-bar", + "$schema": "https://opensource.adobe.com/spectrum-tokens/schemas/token-types/alias.json", + "value": "{transparent-white-900}", + "sets": { + "whcm": { + "$schema": "https://opensource.adobe.com/spectrum-tokens/schemas/token-types/color.json", + "value": "ButtonText" + } + } + } +} diff --git a/components/progresscircle/tokens.json b/components/progresscircle/tokens.json new file mode 100644 index 00000000000..698c620f5a9 --- /dev/null +++ b/components/progresscircle/tokens.json @@ -0,0 +1,34 @@ +{ + "progress-circle-track-border-color": { + "component": "progress-circle", + "$schema": "https://opensource.adobe.com/spectrum-tokens/schemas/token-types/alias.json", + "value": "{track-color}", + "sets": { + "whcm": { + "$schema": "https://opensource.adobe.com/spectrum-tokens/schemas/token-types/color.json", + "value": "Background" + } + } + }, + "progress-circle-fill-border-color": { + "component": "progress-circle", + "$schema": "https://opensource.adobe.com/spectrum-tokens/schemas/token-types/alias.json", + "value": "{accent-content-color-default}", + "sets": { + "whcm": { + "$schema": "https://opensource.adobe.com/spectrum-tokens/schemas/token-types/color.json", + "value": "Highlight" + } + } + }, + "progress-circle-size": { + "component": "progress-circle", + "$schema": "https://opensource.adobe.com/spectrum-tokens/schemas/token-types/alias.json", + "value": "{progress-circle-size-medium}" + }, + "progress-circle-thickness": { + "component": "progress-circle", + "$schema": "https://opensource.adobe.com/spectrum-tokens/schemas/token-types/alias.json", + "value": "{progress-circle-thickness-medium}" + } +} diff --git a/components/radio/tokens.json b/components/radio/tokens.json new file mode 100644 index 00000000000..3ba4953b9fa --- /dev/null +++ b/components/radio/tokens.json @@ -0,0 +1,157 @@ +{ + "radio-button-background-color": { + "component": "radio", + "$schema": "https://opensource.adobe.com/spectrum-tokens/schemas/token-types/alias.json", + "value": "{gray-25}" + }, + "radio-neutral-content-color": { + "component": "radio", + "$schema": "https://opensource.adobe.com/spectrum-tokens/schemas/token-types/alias.json", + "value": "{neutral-content-color-default}" + }, + "radio-neutral-content-color-hover": { + "component": "radio", + "$schema": "https://opensource.adobe.com/spectrum-tokens/schemas/token-types/alias.json", + "value": "{neutral-content-color-hover}" + }, + "radio-neutral-content-color-down": { + "component": "radio", + "$schema": "https://opensource.adobe.com/spectrum-tokens/schemas/token-types/alias.json", + "value": "{neutral-content-color-down}" + }, + "radio-neutral-content-color-focus": { + "component": "radio", + "$schema": "https://opensource.adobe.com/spectrum-tokens/schemas/token-types/alias.json", + "value": "{neutral-content-color-key-focus}" + }, + "radio-focus-indicator-thickness": { + "component": "radio", + "$schema": "https://opensource.adobe.com/spectrum-tokens/schemas/token-types/alias.json", + "value": "{focus-indicator-thickness}" + }, + "radio-focus-indicator-gap": { + "component": "radio", + "$schema": "https://opensource.adobe.com/spectrum-tokens/schemas/token-types/alias.json", + "value": "{focus-indicator-gap}" + }, + "radio-focus-indicator-color": { + "component": "radio", + "$schema": "https://opensource.adobe.com/spectrum-tokens/schemas/token-types/alias.json", + "value": "{focus-indicator-color}" + }, + "radio-disabled-content-color": { + "component": "radio", + "$schema": "https://opensource.adobe.com/spectrum-tokens/schemas/token-types/alias.json", + "value": "{disabled-content-color}" + }, + "radio-disabled-border-color": { + "component": "radio", + "$schema": "https://opensource.adobe.com/spectrum-tokens/schemas/token-types/alias.json", + "value": "{disabled-content-color}" + }, + "radio-emphasized-accent-color": { + "component": "radio", + "$schema": "https://opensource.adobe.com/spectrum-tokens/schemas/token-types/alias.json", + "value": "{accent-content-color-default}" + }, + "radio-emphasized-accent-color-hover": { + "component": "radio", + "$schema": "https://opensource.adobe.com/spectrum-tokens/schemas/token-types/alias.json", + "value": "{accent-content-color-hover}" + }, + "radio-emphasized-accent-color-down": { + "component": "radio", + "$schema": "https://opensource.adobe.com/spectrum-tokens/schemas/token-types/alias.json", + "value": "{accent-content-color-down}" + }, + "radio-emphasized-accent-color-focus": { + "component": "radio", + "$schema": "https://opensource.adobe.com/spectrum-tokens/schemas/token-types/alias.json", + "value": "{accent-content-color-key-focus}" + }, + "radio-button-border-color-default": { + "component": "radio", + "$schema": "https://opensource.adobe.com/spectrum-tokens/schemas/token-types/alias.json", + "value": "{neutral-content-color-default}" + }, + "radio-button-border-color-hover": { + "component": "radio", + "$schema": "https://opensource.adobe.com/spectrum-tokens/schemas/token-types/alias.json", + "value": "{neutral-content-color-hover}" + }, + "radio-button-border-color-down": { + "component": "radio", + "$schema": "https://opensource.adobe.com/spectrum-tokens/schemas/token-types/alias.json", + "value": "{neutral-content-color-down}" + }, + "radio-button-border-color-focus": { + "component": "radio", + "$schema": "https://opensource.adobe.com/spectrum-tokens/schemas/token-types/alias.json", + "value": "{neutral-content-color-key-focus}" + }, + "radio-line-height": { + "component": "radio", + "$schema": "https://opensource.adobe.com/spectrum-tokens/schemas/token-types/alias.json", + "value": "{line-height-100}" + }, + "radio-animation-duration": { + "component": "radio", + "$schema": "https://opensource.adobe.com/spectrum-tokens/schemas/token-types/alias.json", + "value": "{animation-duration-100}" + }, + "radio-height": { + "component": "radio", + "$schema": "https://opensource.adobe.com/spectrum-tokens/schemas/token-types/alias.json", + "value": "{component-height-100}" + }, + "radio-button-control-size": { + "component": "radio", + "$schema": "https://opensource.adobe.com/spectrum-tokens/schemas/token-types/alias.json", + "value": "{radio-button-control-size-medium}" + }, + "radio-text-to-control": { + "component": "radio", + "$schema": "https://opensource.adobe.com/spectrum-tokens/schemas/token-types/alias.json", + "value": "{text-to-control-100}" + }, + "radio-label-top-to-text": { + "component": "radio", + "$schema": "https://opensource.adobe.com/spectrum-tokens/schemas/token-types/alias.json", + "value": "{component-top-to-text-100}" + }, + "radio-label-bottom-to-text": { + "component": "radio", + "$schema": "https://opensource.adobe.com/spectrum-tokens/schemas/token-types/alias.json", + "value": "{component-bottom-to-text-100}" + }, + "radio-button-top-to-control": { + "component": "radio", + "$schema": "https://opensource.adobe.com/spectrum-tokens/schemas/token-types/alias.json", + "value": "{radio-button-top-to-control-medium}" + }, + "radio-font-size": { + "component": "radio", + "$schema": "https://opensource.adobe.com/spectrum-tokens/schemas/token-types/alias.json", + "value": "{font-size-100}" + }, + "radio-border-width": { + "component": "radio", + "$schema": "https://opensource.adobe.com/spectrum-tokens/schemas/token-types/alias.json", + "value": "{border-width-200}" + }, + "radio-text-font-weight": { + "component": "radio", + "$schema": "https://opensource.adobe.com/spectrum-tokens/schemas/token-types/alias.json", + "value": "{regular-font-weight}" + }, + "radio-text-font-style": { + "component": "radio", + "$schema": "https://opensource.adobe.com/spectrum-tokens/schemas/token-types/alias.json", + "value": "{default-font-style}" + }, + "radio-line-height-cjk": { + "component": "radio", + "$schema": "https://opensource.adobe.com/spectrum-tokens/schemas/token-types/alias.json", + "value": "{cjk-line-height-100}" + } +} diff --git a/components/rating/tokens.json b/components/rating/tokens.json new file mode 100644 index 00000000000..0eaed0d049f --- /dev/null +++ b/components/rating/tokens.json @@ -0,0 +1,140 @@ +{ + "rating-icon-spacing": { + "component": "rating", + "$schema": "https://opensource.adobe.com/spectrum-tokens/schemas/token-types/scale-set.json", + "sets": { + "desktop": { + "$schema": "https://opensource.adobe.com/spectrum-tokens/schemas/token-types/alias.json", + "value": "{spacing-75}" + }, + "mobile": { + "$schema": "https://opensource.adobe.com/spectrum-tokens/schemas/token-types/alias.json", + "value": "{spacing-100}" + } + } + }, + "rating-height": { + "component": "rating", + "$schema": "https://opensource.adobe.com/spectrum-tokens/schemas/token-types/alias.json", + "value": "{rating-height-medium}" + }, + "rating-width": { + "component": "rating", + "$schema": "https://opensource.adobe.com/spectrum-tokens/schemas/token-types/alias.json", + "value": "{rating-width-medium}" + }, + "rating-icon-height": { + "component": "rating", + "$schema": "https://opensource.adobe.com/spectrum-tokens/schemas/token-types/alias.json", + "value": "{workflow-icon-size-100}" + }, + "rating-icon-width": { + "component": "rating", + "$schema": "https://opensource.adobe.com/spectrum-tokens/schemas/token-types/alias.json", + "value": "{workflow-icon-size-100}" + }, + "rating-icon-color-default": { + "component": "rating", + "$schema": "https://opensource.adobe.com/spectrum-tokens/schemas/token-types/alias.json", + "value": "{neutral-content-color-default}" + }, + "rating-icon-color-hover": { + "component": "rating", + "$schema": "https://opensource.adobe.com/spectrum-tokens/schemas/token-types/alias.json", + "value": "{neutral-content-color-hover}" + }, + "rating-icon-color-down": { + "component": "rating", + "$schema": "https://opensource.adobe.com/spectrum-tokens/schemas/token-types/alias.json", + "value": "{neutral-content-color-down}" + }, + "rating-border-radius": { + "component": "rating", + "$schema": "https://opensource.adobe.com/spectrum-tokens/schemas/token-types/alias.json", + "value": "{corner-radius-medium-size-medium}" + }, + "rating-focus-indicator-thickness": { + "component": "rating", + "$schema": "https://opensource.adobe.com/spectrum-tokens/schemas/token-types/alias.json", + "value": "{focus-indicator-thickness}" + }, + "rating-focus-indicator-color": { + "component": "rating", + "$schema": "https://opensource.adobe.com/spectrum-tokens/schemas/token-types/alias.json", + "value": "{focus-indicator-color}" + }, + "rating-focus-indicator-gap": { + "component": "rating", + "$schema": "https://opensource.adobe.com/spectrum-tokens/schemas/token-types/alias.json", + "value": "{focus-indicator-gap}" + }, + "rating-top-to-content-area": { + "component": "rating", + "$schema": "https://opensource.adobe.com/spectrum-tokens/schemas/token-types/alias.json", + "value": "{rating-top-to-content-area-medium}" + }, + "rating-bottom-to-content-area": { + "component": "rating", + "$schema": "https://opensource.adobe.com/spectrum-tokens/schemas/token-types/alias.json", + "value": "{rating-bottom-to-content-area-medium}" + }, + "rating-edge-to-content-area": { + "component": "rating", + "$schema": "https://opensource.adobe.com/spectrum-tokens/schemas/token-types/alias.json", + "value": "{rating-edge-to-content-area-medium}" + }, + "rating-emphasized-icon-color-default": { + "component": "rating", + "$schema": "https://opensource.adobe.com/spectrum-tokens/schemas/token-types/alias.json", + "value": "{accent-content-color-default}", + "sets": { + "whcm": { + "$schema": "https://opensource.adobe.com/spectrum-tokens/schemas/token-types/color.json", + "value": "Highlight" + } + } + }, + "rating-emphasized-icon-color-hover": { + "component": "rating", + "$schema": "https://opensource.adobe.com/spectrum-tokens/schemas/token-types/alias.json", + "value": "{accent-content-color-hover}", + "sets": { + "whcm": { + "$schema": "https://opensource.adobe.com/spectrum-tokens/schemas/token-types/color.json", + "value": "Highlight" + } + } + }, + "rating-emphasized-icon-color-down": { + "component": "rating", + "$schema": "https://opensource.adobe.com/spectrum-tokens/schemas/token-types/alias.json", + "value": "{accent-content-color-down}", + "sets": { + "whcm": { + "$schema": "https://opensource.adobe.com/spectrum-tokens/schemas/token-types/color.json", + "value": "Highlight" + } + } + }, + "rating-emphasized-icon-color-key-focus": { + "component": "rating", + "$schema": "https://opensource.adobe.com/spectrum-tokens/schemas/token-types/alias.json", + "value": "{accent-content-color-default}" + }, + "rating-icon-color-disabled": { + "component": "rating", + "$schema": "https://opensource.adobe.com/spectrum-tokens/schemas/token-types/alias.json", + "value": "{disabled-content-color}", + "sets": { + "whcm": { + "$schema": "https://opensource.adobe.com/spectrum-tokens/schemas/token-types/color.json", + "value": "GrayText" + } + } + }, + "rating-icon-fill": { + "component": "rating", + "$schema": "https://opensource.adobe.com/spectrum-tokens/schemas/token-types/dimension.json", + "value": "100%" + } +} diff --git a/components/search/tokens.json b/components/search/tokens.json new file mode 100644 index 00000000000..62d3deb88b8 --- /dev/null +++ b/components/search/tokens.json @@ -0,0 +1,208 @@ +{ + "search-background-color": { + "component": "search", + "$schema": "https://opensource.adobe.com/spectrum-tokens/schemas/token-types/alias.json", + "value": "{gray-25}" + }, + "search-border-color-default": { + "component": "search", + "$schema": "https://opensource.adobe.com/spectrum-tokens/schemas/token-types/alias.json", + "value": "{gray-300}" + }, + "search-border-color-hover": { + "component": "search", + "$schema": "https://opensource.adobe.com/spectrum-tokens/schemas/token-types/alias.json", + "value": "{gray-400}" + }, + "search-border-color-focus": { + "component": "search", + "$schema": "https://opensource.adobe.com/spectrum-tokens/schemas/token-types/alias.json", + "value": "{gray-800}" + }, + "search-border-color-focus-hover": { + "component": "search", + "$schema": "https://opensource.adobe.com/spectrum-tokens/schemas/token-types/alias.json", + "value": "{gray-900}" + }, + "search-border-color-key-focus": { + "component": "search", + "$schema": "https://opensource.adobe.com/spectrum-tokens/schemas/token-types/alias.json", + "value": "{gray-800}" + }, + "search-border-width": { + "component": "search", + "$schema": "https://opensource.adobe.com/spectrum-tokens/schemas/token-types/alias.json", + "value": "{border-width-200}" + }, + "search-border-radius": { + "component": "search", + "$schema": "https://opensource.adobe.com/spectrum-tokens/schemas/token-types/alias.json", + "value": "{corner-radius-full}" + }, + "search-inline-size": { + "component": "search", + "$schema": "https://opensource.adobe.com/spectrum-tokens/schemas/token-types/alias.json", + "value": "{field-width}" + }, + "search-block-size": { + "component": "search", + "$schema": "https://opensource.adobe.com/spectrum-tokens/schemas/token-types/alias.json", + "value": "{component-height-100}" + }, + "search-button-inline-size": { + "component": "search", + "$schema": "https://opensource.adobe.com/spectrum-tokens/schemas/token-types/alias.json", + "value": "{search-block-size}" + }, + "search-min-inline-size": { + "component": "search", + "$schema": "https://opensource.adobe.com/spectrum-tokens/schemas/token-types/alias.json", + "value": "calc({search-field-minimum-width-multiplier} * {search-block-size})" + }, + "search-icon-size": { + "component": "search", + "$schema": "https://opensource.adobe.com/spectrum-tokens/schemas/token-types/alias.json", + "value": "{workflow-icon-size-100}" + }, + "search-text-to-icon": { + "component": "search", + "$schema": "https://opensource.adobe.com/spectrum-tokens/schemas/token-types/alias.json", + "value": "{text-to-visual-100}" + }, + "search-to-help-text": { + "component": "search", + "$schema": "https://opensource.adobe.com/spectrum-tokens/schemas/token-types/alias.json", + "value": "{help-text-to-component}" + }, + "search-top-to-text": { + "component": "search", + "$schema": "https://opensource.adobe.com/spectrum-tokens/schemas/token-types/alias.json", + "value": "{component-top-to-text-100}" + }, + "search-bottom-to-text": { + "component": "search", + "$schema": "https://opensource.adobe.com/spectrum-tokens/schemas/token-types/alias.json", + "value": "{component-bottom-to-text-100}" + }, + "search-edge-to-visual": { + "component": "search", + "$schema": "https://opensource.adobe.com/spectrum-tokens/schemas/token-types/alias.json", + "value": "{component-pill-edge-to-visual-100}" + }, + "search-top-to-icon": { + "component": "search", + "$schema": "https://opensource.adobe.com/spectrum-tokens/schemas/token-types/alias.json", + "value": "{component-top-to-workflow-icon-100}" + }, + "search-focus-indicator-thickness": { + "component": "search", + "$schema": "https://opensource.adobe.com/spectrum-tokens/schemas/token-types/alias.json", + "value": "{focus-indicator-thickness}" + }, + "search-focus-indicator-gap": { + "component": "search", + "$schema": "https://opensource.adobe.com/spectrum-tokens/schemas/token-types/alias.json", + "value": "{focus-indicator-gap}" + }, + "search-focus-indicator-color": { + "component": "search", + "$schema": "https://opensource.adobe.com/spectrum-tokens/schemas/token-types/alias.json", + "value": "{focus-indicator-color}" + }, + "search-font-family": { + "component": "search", + "$schema": "https://opensource.adobe.com/spectrum-tokens/schemas/token-types/alias.json", + "value": "{sans-font-family-stack}" + }, + "search-font-weight": { + "component": "search", + "$schema": "https://opensource.adobe.com/spectrum-tokens/schemas/token-types/alias.json", + "value": "{regular-font-weight}" + }, + "search-font-style": { + "component": "search", + "$schema": "https://opensource.adobe.com/spectrum-tokens/schemas/token-types/alias.json", + "value": "{default-font-style}" + }, + "search-line-height": { + "component": "search", + "$schema": "https://opensource.adobe.com/spectrum-tokens/schemas/token-types/alias.json", + "value": "{line-height-100}" + }, + "search-color-default": { + "component": "search", + "$schema": "https://opensource.adobe.com/spectrum-tokens/schemas/token-types/alias.json", + "value": "{neutral-content-color-default}", + "sets": { + "whcm": { + "$schema": "https://opensource.adobe.com/spectrum-tokens/schemas/token-types/color.json", + "value": "CanvasText" + } + } + }, + "search-color-hover": { + "component": "search", + "$schema": "https://opensource.adobe.com/spectrum-tokens/schemas/token-types/alias.json", + "value": "{neutral-content-color-hover}", + "sets": { + "whcm": { + "$schema": "https://opensource.adobe.com/spectrum-tokens/schemas/token-types/color.json", + "value": "CanvasText" + } + } + }, + "search-color-focus": { + "component": "search", + "$schema": "https://opensource.adobe.com/spectrum-tokens/schemas/token-types/alias.json", + "value": "{neutral-content-color-focus}", + "sets": { + "whcm": { + "$schema": "https://opensource.adobe.com/spectrum-tokens/schemas/token-types/color.json", + "value": "CanvasText" + } + } + }, + "search-color-focus-hover": { + "component": "search", + "$schema": "https://opensource.adobe.com/spectrum-tokens/schemas/token-types/alias.json", + "value": "{neutral-content-color-focus-hover}", + "sets": { + "whcm": { + "$schema": "https://opensource.adobe.com/spectrum-tokens/schemas/token-types/color.json", + "value": "CanvasText" + } + } + }, + "search-color-key-focus": { + "component": "search", + "$schema": "https://opensource.adobe.com/spectrum-tokens/schemas/token-types/alias.json", + "value": "{neutral-content-color-key-focus}", + "sets": { + "whcm": { + "$schema": "https://opensource.adobe.com/spectrum-tokens/schemas/token-types/color.json", + "value": "CanvasText" + } + } + }, + "search-color-disabled": { + "component": "search", + "$schema": "https://opensource.adobe.com/spectrum-tokens/schemas/token-types/alias.json", + "value": "{disabled-content-color}", + "sets": { + "whcm": { + "$schema": "https://opensource.adobe.com/spectrum-tokens/schemas/token-types/color.json", + "value": "GrayText" + } + } + }, + "search-background-color-disabled": { + "component": "search", + "$schema": "https://opensource.adobe.com/spectrum-tokens/schemas/token-types/alias.json", + "value": "{gray-25}" + }, + "search-border-color-disabled": { + "component": "search", + "$schema": "https://opensource.adobe.com/spectrum-tokens/schemas/token-types/alias.json", + "value": "{disabled-border-color}" + } +} diff --git a/components/sidenav/tokens.json b/components/sidenav/tokens.json new file mode 100644 index 00000000000..5d1ed1c4d78 --- /dev/null +++ b/components/sidenav/tokens.json @@ -0,0 +1,379 @@ +{ + "sidenav-background-hover": { + "component": "sidenav", + "$schema": "https://opensource.adobe.com/spectrum-tokens/schemas/token-types/alias.json", + "value": "{gray-100}", + "sets": { + "whcm": { + "$schema": "https://opensource.adobe.com/spectrum-tokens/schemas/token-types/color.json", + "value": "Highlight" + } + } + }, + "sidenav-item-background-down": { + "component": "sidenav", + "$schema": "https://opensource.adobe.com/spectrum-tokens/schemas/token-types/alias.json", + "value": "{gray-200}", + "sets": { + "whcm": { + "$schema": "https://opensource.adobe.com/spectrum-tokens/schemas/token-types/color.json", + "value": "Highlight" + } + } + }, + "sidenav-background-key-focus": { + "component": "sidenav", + "$schema": "https://opensource.adobe.com/spectrum-tokens/schemas/token-types/alias.json", + "value": "{gray-100}", + "sets": { + "whcm": { + "$schema": "https://opensource.adobe.com/spectrum-tokens/schemas/token-types/color.json", + "value": "Highlight" + } + } + }, + "sidenav-item-background-default-selected": { + "component": "sidenav", + "$schema": "https://opensource.adobe.com/spectrum-tokens/schemas/token-types/alias.json", + "value": "{gray-100}", + "sets": { + "whcm": { + "$schema": "https://opensource.adobe.com/spectrum-tokens/schemas/token-types/color.json", + "value": "SelectedItem" + } + } + }, + "sidenav-background-hover-selected": { + "component": "sidenav", + "$schema": "https://opensource.adobe.com/spectrum-tokens/schemas/token-types/alias.json", + "value": "{gray-200}", + "sets": { + "whcm": { + "$schema": "https://opensource.adobe.com/spectrum-tokens/schemas/token-types/color.json", + "value": "Highlight" + } + } + }, + "sidenav-item-background-down-selected": { + "component": "sidenav", + "$schema": "https://opensource.adobe.com/spectrum-tokens/schemas/token-types/alias.json", + "value": "{gray-200}", + "sets": { + "whcm": { + "$schema": "https://opensource.adobe.com/spectrum-tokens/schemas/token-types/color.json", + "value": "Highlight" + } + } + }, + "sidenav-background-key-focus-selected": { + "component": "sidenav", + "$schema": "https://opensource.adobe.com/spectrum-tokens/schemas/token-types/alias.json", + "value": "{gray-100}", + "sets": { + "whcm": { + "$schema": "https://opensource.adobe.com/spectrum-tokens/schemas/token-types/color.json", + "value": "Highlight" + } + } + }, + "sidenav-focus-ring-size": { + "component": "sidenav", + "$schema": "https://opensource.adobe.com/spectrum-tokens/schemas/token-types/alias.json", + "value": "{focus-indicator-thickness}" + }, + "sidenav-focus-ring-gap": { + "component": "sidenav", + "$schema": "https://opensource.adobe.com/spectrum-tokens/schemas/token-types/alias.json", + "value": "{focus-indicator-gap}" + }, + "sidenav-focus-ring-color": { + "component": "sidenav", + "$schema": "https://opensource.adobe.com/spectrum-tokens/schemas/token-types/alias.json", + "value": "{focus-indicator-color}", + "sets": { + "whcm": { + "$schema": "https://opensource.adobe.com/spectrum-tokens/schemas/token-types/color.json", + "value": "Highlight" + } + } + }, + "sidenav-min-height": { + "component": "sidenav", + "$schema": "https://opensource.adobe.com/spectrum-tokens/schemas/token-types/alias.json", + "value": "{component-height-100}" + }, + "sidenav-width": { + "component": "sidenav", + "$schema": "https://opensource.adobe.com/spectrum-tokens/schemas/token-types/dimension.json", + "value": "100%" + }, + "sidenav-min-width": { + "component": "sidenav", + "$schema": "https://opensource.adobe.com/spectrum-tokens/schemas/token-types/alias.json", + "value": "{side-navigation-minimum-width}" + }, + "sidenav-max-width": { + "component": "sidenav", + "$schema": "https://opensource.adobe.com/spectrum-tokens/schemas/token-types/alias.json", + "value": "{side-navigation-maximum-width}" + }, + "sidenav-border-radius": { + "component": "sidenav", + "$schema": "https://opensource.adobe.com/spectrum-tokens/schemas/token-types/alias.json", + "value": "{corner-radius-100}" + }, + "sidenav-icon-size": { + "component": "sidenav", + "$schema": "https://opensource.adobe.com/spectrum-tokens/schemas/token-types/alias.json", + "value": "{workflow-icon-size-100}" + }, + "sidenav-icon-spacing": { + "component": "sidenav", + "$schema": "https://opensource.adobe.com/spectrum-tokens/schemas/token-types/alias.json", + "value": "{text-to-visual-100}" + }, + "sidenav-inline-padding": { + "component": "sidenav", + "$schema": "https://opensource.adobe.com/spectrum-tokens/schemas/token-types/alias.json", + "value": "{component-edge-to-text-100}" + }, + "sidenav-gap": { + "component": "sidenav", + "$schema": "https://opensource.adobe.com/spectrum-tokens/schemas/token-types/alias.json", + "value": "{side-navigation-item-to-item}" + }, + "sidenav-top-to-icon": { + "component": "sidenav", + "$schema": "https://opensource.adobe.com/spectrum-tokens/schemas/token-types/alias.json", + "value": "{component-top-to-workflow-icon-100}" + }, + "sidenav-top-to-label": { + "component": "sidenav", + "$schema": "https://opensource.adobe.com/spectrum-tokens/schemas/token-types/alias.json", + "value": "{component-top-to-text-100}" + }, + "sidenav-bottom-to-label": { + "component": "sidenav", + "$schema": "https://opensource.adobe.com/spectrum-tokens/schemas/token-types/alias.json", + "value": "{side-navigation-bottom-to-text}" + }, + "sidenav-start-to-content-second-level": { + "component": "sidenav", + "$schema": "https://opensource.adobe.com/spectrum-tokens/schemas/token-types/alias.json", + "value": "{side-navigation-second-level-edge-to-text}" + }, + "sidenav-start-to-content-third-level": { + "component": "sidenav", + "$schema": "https://opensource.adobe.com/spectrum-tokens/schemas/token-types/alias.json", + "value": "{side-navigation-third-level-edge-to-text}" + }, + "sidenav-start-to-content-with-icon-second-level": { + "component": "sidenav", + "$schema": "https://opensource.adobe.com/spectrum-tokens/schemas/token-types/alias.json", + "value": "{side-navigation-with-icon-second-level-edge-to-text}" + }, + "sidenav-start-to-content-with-icon-third-level": { + "component": "sidenav", + "$schema": "https://opensource.adobe.com/spectrum-tokens/schemas/token-types/alias.json", + "value": "{side-navigation-with-icon-third-level-edge-to-text}" + }, + "sidenav-heading-top-margin": { + "component": "sidenav", + "$schema": "https://opensource.adobe.com/spectrum-tokens/schemas/token-types/alias.json", + "value": "{side-navigation-item-to-header}" + }, + "sidenav-heading-bottom-margin": { + "component": "sidenav", + "$schema": "https://opensource.adobe.com/spectrum-tokens/schemas/token-types/alias.json", + "value": "{side-navigation-header-to-item}" + }, + "sidenav-background-disabled": { + "component": "sidenav", + "$schema": "https://opensource.adobe.com/spectrum-tokens/schemas/token-types/color.json", + "value": "transparent" + }, + "sidenav-background-default": { + "component": "sidenav", + "$schema": "https://opensource.adobe.com/spectrum-tokens/schemas/token-types/color.json", + "value": "transparent" + }, + "sidenav-header-color": { + "component": "sidenav", + "$schema": "https://opensource.adobe.com/spectrum-tokens/schemas/token-types/alias.json", + "value": "{gray-600}" + }, + "sidenav-content-disabled-color": { + "component": "sidenav", + "$schema": "https://opensource.adobe.com/spectrum-tokens/schemas/token-types/alias.json", + "value": "{disabled-content-color}", + "sets": { + "whcm": { + "$schema": "https://opensource.adobe.com/spectrum-tokens/schemas/token-types/color.json", + "value": "GrayText" + } + } + }, + "sidenav-content-color-default": { + "component": "sidenav", + "$schema": "https://opensource.adobe.com/spectrum-tokens/schemas/token-types/alias.json", + "value": "{neutral-content-color-default}", + "sets": { + "whcm": { + "$schema": "https://opensource.adobe.com/spectrum-tokens/schemas/token-types/color.json", + "value": "ButtonText" + } + } + }, + "sidenav-content-color-hover": { + "component": "sidenav", + "$schema": "https://opensource.adobe.com/spectrum-tokens/schemas/token-types/alias.json", + "value": "{neutral-content-color-hover}", + "sets": { + "whcm": { + "$schema": "https://opensource.adobe.com/spectrum-tokens/schemas/token-types/color.json", + "value": "HighlightText" + } + } + }, + "sidenav-content-color-down": { + "component": "sidenav", + "$schema": "https://opensource.adobe.com/spectrum-tokens/schemas/token-types/alias.json", + "value": "{neutral-content-color-down}", + "sets": { + "whcm": { + "$schema": "https://opensource.adobe.com/spectrum-tokens/schemas/token-types/color.json", + "value": "HighlightText" + } + } + }, + "sidenav-content-color-key-focus": { + "component": "sidenav", + "$schema": "https://opensource.adobe.com/spectrum-tokens/schemas/token-types/alias.json", + "value": "{neutral-content-color-key-focus}", + "sets": { + "whcm": { + "$schema": "https://opensource.adobe.com/spectrum-tokens/schemas/token-types/color.json", + "value": "ButtonText" + } + } + }, + "sidenav-content-color-default-selected": { + "component": "sidenav", + "$schema": "https://opensource.adobe.com/spectrum-tokens/schemas/token-types/alias.json", + "value": "{neutral-content-color-default}", + "sets": { + "whcm": { + "$schema": "https://opensource.adobe.com/spectrum-tokens/schemas/token-types/color.json", + "value": "SelectedItemText" + } + } + }, + "sidenav-content-color-hover-selected": { + "component": "sidenav", + "$schema": "https://opensource.adobe.com/spectrum-tokens/schemas/token-types/alias.json", + "value": "{neutral-content-color-hover}", + "sets": { + "whcm": { + "$schema": "https://opensource.adobe.com/spectrum-tokens/schemas/token-types/color.json", + "value": "HighlightText" + } + } + }, + "sidenav-content-color-down-selected": { + "component": "sidenav", + "$schema": "https://opensource.adobe.com/spectrum-tokens/schemas/token-types/alias.json", + "value": "{neutral-content-color-down}", + "sets": { + "whcm": { + "$schema": "https://opensource.adobe.com/spectrum-tokens/schemas/token-types/color.json", + "value": "HighlightText" + } + } + }, + "sidenav-content-color-key-focus-selected": { + "component": "sidenav", + "$schema": "https://opensource.adobe.com/spectrum-tokens/schemas/token-types/alias.json", + "value": "{neutral-content-color-key-focus}", + "sets": { + "whcm": { + "$schema": "https://opensource.adobe.com/spectrum-tokens/schemas/token-types/color.json", + "value": "ButtonText" + } + } + }, + "sidenav-text-font-family": { + "component": "sidenav", + "$schema": "https://opensource.adobe.com/spectrum-tokens/schemas/token-types/alias.json", + "value": "{sans-font-family-stack}" + }, + "sidenav-text-font-weight": { + "component": "sidenav", + "$schema": "https://opensource.adobe.com/spectrum-tokens/schemas/token-types/alias.json", + "value": "{regular-font-weight}" + }, + "sidenav-text-font-style": { + "component": "sidenav", + "$schema": "https://opensource.adobe.com/spectrum-tokens/schemas/token-types/alias.json", + "value": "{default-font-style}" + }, + "sidenav-text-font-size": { + "component": "sidenav", + "$schema": "https://opensource.adobe.com/spectrum-tokens/schemas/token-types/alias.json", + "value": "{font-size-100}" + }, + "sidenav-text-line-height": { + "component": "sidenav", + "$schema": "https://opensource.adobe.com/spectrum-tokens/schemas/token-types/alias.json", + "value": "{line-height-100}" + }, + "sidenav-top-level-font-family": { + "component": "sidenav", + "$schema": "https://opensource.adobe.com/spectrum-tokens/schemas/token-types/alias.json", + "value": "{sans-font-family-stack}" + }, + "sidenav-top-level-font-weight": { + "component": "sidenav", + "$schema": "https://opensource.adobe.com/spectrum-tokens/schemas/token-types/alias.json", + "value": "{bold-font-weight}" + }, + "sidenav-top-level-font-style": { + "component": "sidenav", + "$schema": "https://opensource.adobe.com/spectrum-tokens/schemas/token-types/alias.json", + "value": "{default-font-style}" + }, + "sidenav-top-level-font-size": { + "component": "sidenav", + "$schema": "https://opensource.adobe.com/spectrum-tokens/schemas/token-types/alias.json", + "value": "{font-size-100}" + }, + "sidenav-top-level-line-height": { + "component": "sidenav", + "$schema": "https://opensource.adobe.com/spectrum-tokens/schemas/token-types/alias.json", + "value": "{line-height-100}" + }, + "sidenav-header-font-family": { + "component": "sidenav", + "$schema": "https://opensource.adobe.com/spectrum-tokens/schemas/token-types/alias.json", + "value": "{sans-font-family-stack}" + }, + "sidenav-header-font-weight": { + "component": "sidenav", + "$schema": "https://opensource.adobe.com/spectrum-tokens/schemas/token-types/alias.json", + "value": "{medium-font-weight}" + }, + "sidenav-header-font-style": { + "component": "sidenav", + "$schema": "https://opensource.adobe.com/spectrum-tokens/schemas/token-types/alias.json", + "value": "{default-font-style}" + }, + "sidenav-header-font-size": { + "component": "sidenav", + "$schema": "https://opensource.adobe.com/spectrum-tokens/schemas/token-types/alias.json", + "value": "{font-size-75}" + }, + "sidenav-header-line-height": { + "component": "sidenav", + "$schema": "https://opensource.adobe.com/spectrum-tokens/schemas/token-types/alias.json", + "value": "{line-height-100}" + } +} diff --git a/components/slider/tokens.json b/components/slider/tokens.json new file mode 100644 index 00000000000..d9b85bfa714 --- /dev/null +++ b/components/slider/tokens.json @@ -0,0 +1,353 @@ +{ + "slider-ramp-track-height": { + "component": "slider", + "$schema": "https://opensource.adobe.com/spectrum-tokens/schemas/token-types/scale-set.json", + "sets": { + "desktop": { + "$schema": "https://opensource.adobe.com/spectrum-tokens/schemas/token-types/dimension.json", + "value": "16px" + }, + "mobile": { + "$schema": "https://opensource.adobe.com/spectrum-tokens/schemas/token-types/dimension.json", + "value": "20px" + } + } + }, + "slider-tick-mark-height": { + "component": "slider", + "$schema": "https://opensource.adobe.com/spectrum-tokens/schemas/token-types/scale-set.json", + "sets": { + "desktop": { + "$schema": "https://opensource.adobe.com/spectrum-tokens/schemas/token-types/dimension.json", + "value": "10px" + }, + "mobile": { + "$schema": "https://opensource.adobe.com/spectrum-tokens/schemas/token-types/dimension.json", + "value": "13px" + } + } + }, + "slider-font-size": { + "component": "slider", + "$schema": "https://opensource.adobe.com/spectrum-tokens/schemas/token-types/alias.json", + "value": "{font-size-75}" + }, + "slider-handle-size": { + "component": "slider", + "$schema": "https://opensource.adobe.com/spectrum-tokens/schemas/token-types/alias.json", + "value": "{slider-handle-size-medium}" + }, + "slider-control-height": { + "component": "slider", + "$schema": "https://opensource.adobe.com/spectrum-tokens/schemas/token-types/alias.json", + "value": "{component-height-100}" + }, + "slider-handle-border-width-down": { + "component": "slider", + "$schema": "https://opensource.adobe.com/spectrum-tokens/schemas/token-types/alias.json", + "value": "{slider-handle-border-width-down-medium}" + }, + "slider-label-top-to-text": { + "component": "slider", + "$schema": "https://opensource.adobe.com/spectrum-tokens/schemas/token-types/alias.json", + "value": "{component-top-to-text-75}" + }, + "slider-control-to-field-label": { + "component": "slider", + "$schema": "https://opensource.adobe.com/spectrum-tokens/schemas/token-types/alias.json", + "value": "{slider-control-to-field-label-medium}" + }, + "slider-value-side-padding-inline": { + "component": "slider", + "$schema": "https://opensource.adobe.com/spectrum-tokens/schemas/token-types/alias.json", + "value": "{spacing-200}" + }, + "slider-value-inline-size": { + "component": "slider", + "$schema": "https://opensource.adobe.com/spectrum-tokens/schemas/token-types/dimension.json", + "value": "18px" + }, + "slider-cjk-line-height": { + "component": "slider", + "$schema": "https://opensource.adobe.com/spectrum-tokens/schemas/token-types/alias.json", + "value": "{cjk-line-height-100}" + }, + "slider-min-size": { + "component": "slider", + "$schema": "https://opensource.adobe.com/spectrum-tokens/schemas/token-types/alias.json", + "value": "{spacing-900}" + }, + "slider-label-margin-start": { + "component": "slider", + "$schema": "https://opensource.adobe.com/spectrum-tokens/schemas/token-types/alias.json", + "value": "{spacing-300}" + }, + "slider-handle-border-width": { + "component": "slider", + "$schema": "https://opensource.adobe.com/spectrum-tokens/schemas/token-types/alias.json", + "value": "{border-width-200}" + }, + "slider-handle-margin-left": { + "component": "slider", + "$schema": "https://opensource.adobe.com/spectrum-tokens/schemas/token-types/alias.json", + "value": "calc({slider-handle-size} / -2)" + }, + "slider-controls-margin": { + "component": "slider", + "$schema": "https://opensource.adobe.com/spectrum-tokens/schemas/token-types/alias.json", + "value": "calc({slider-handle-size} / 2)" + }, + "slider-track-margin-offset": { + "component": "slider", + "$schema": "https://opensource.adobe.com/spectrum-tokens/schemas/token-types/alias.json", + "value": "calc({slider-controls-margin} * -1)" + }, + "slider-track-middle-handleoffset": { + "component": "slider", + "$schema": "https://opensource.adobe.com/spectrum-tokens/schemas/token-types/alias.json", + "value": "calc({slider-handle-gap} + calc({slider-handle-size} / 2))" + }, + "slider-input-top-size": { + "component": "slider", + "$schema": "https://opensource.adobe.com/spectrum-tokens/schemas/token-types/alias.json", + "value": "calc({slider-handle-size} / -2 / 4)" + }, + "slider-track-fill-thickness": { + "component": "slider", + "$schema": "https://opensource.adobe.com/spectrum-tokens/schemas/token-types/alias.json", + "value": "{slider-track-thickness}" + }, + "slider-tick-mark-width": { + "component": "slider", + "$schema": "https://opensource.adobe.com/spectrum-tokens/schemas/token-types/alias.json", + "value": "{border-width-200}" + }, + "slider-tick-mark-border-radius": { + "component": "slider", + "$schema": "https://opensource.adobe.com/spectrum-tokens/schemas/token-types/dimension.json", + "value": "2px" + }, + "slider-tick-handle-background-color": { + "component": "slider", + "$schema": "https://opensource.adobe.com/spectrum-tokens/schemas/token-types/alias.json", + "value": "{gray-100}" + }, + "slider-track-color": { + "component": "slider", + "$schema": "https://opensource.adobe.com/spectrum-tokens/schemas/token-types/alias.json", + "value": "{gray-200}", + "sets": { + "whcm": { + "$schema": "https://opensource.adobe.com/spectrum-tokens/schemas/token-types/color.json", + "value": "ButtonText" + } + } + }, + "slider-track-fill-color": { + "component": "slider", + "$schema": "https://opensource.adobe.com/spectrum-tokens/schemas/token-types/alias.json", + "value": "{gray-700}", + "sets": { + "whcm": { + "$schema": "https://opensource.adobe.com/spectrum-tokens/schemas/token-types/color.json", + "value": "Highlight" + } + } + }, + "slider-ramp-track-color": { + "component": "slider", + "$schema": "https://opensource.adobe.com/spectrum-tokens/schemas/token-types/alias.json", + "value": "{gray-400}", + "sets": { + "whcm": { + "$schema": "https://opensource.adobe.com/spectrum-tokens/schemas/token-types/color.json", + "value": "ButtonText" + } + } + }, + "slider-ramp-track-color-disabled": { + "component": "slider", + "$schema": "https://opensource.adobe.com/spectrum-tokens/schemas/token-types/alias.json", + "value": "{gray-100}", + "sets": { + "whcm": { + "$schema": "https://opensource.adobe.com/spectrum-tokens/schemas/token-types/color.json", + "value": "GrayText" + } + } + }, + "slider-track-color-disabled": { + "component": "slider", + "$schema": "https://opensource.adobe.com/spectrum-tokens/schemas/token-types/alias.json", + "value": "{disabled-background-color}", + "sets": { + "whcm": { + "$schema": "https://opensource.adobe.com/spectrum-tokens/schemas/token-types/color.json", + "value": "GrayText" + } + } + }, + "slider-track-fill-color-disabled": { + "component": "slider", + "$schema": "https://opensource.adobe.com/spectrum-tokens/schemas/token-types/alias.json", + "value": "{disabled-background-color}", + "sets": { + "whcm": { + "$schema": "https://opensource.adobe.com/spectrum-tokens/schemas/token-types/color.json", + "value": "GrayText" + } + } + }, + "slider-handle-border-color-disabled": { + "component": "slider", + "$schema": "https://opensource.adobe.com/spectrum-tokens/schemas/token-types/alias.json", + "value": "{disabled-border-color}", + "sets": { + "whcm": { + "$schema": "https://opensource.adobe.com/spectrum-tokens/schemas/token-types/color.json", + "value": "GrayText" + } + } + }, + "slider-label-text-color": { + "component": "slider", + "$schema": "https://opensource.adobe.com/spectrum-tokens/schemas/token-types/alias.json", + "value": "{neutral-content-color-default}", + "sets": { + "whcm": { + "$schema": "https://opensource.adobe.com/spectrum-tokens/schemas/token-types/color.json", + "value": "CanvasText" + } + } + }, + "slider-tick-label-color": { + "component": "slider", + "$schema": "https://opensource.adobe.com/spectrum-tokens/schemas/token-types/alias.json", + "value": "{neutral-content-color-default}", + "sets": { + "whcm": { + "$schema": "https://opensource.adobe.com/spectrum-tokens/schemas/token-types/color.json", + "value": "CanvasText" + } + } + }, + "slider-label-text-color-disabled": { + "component": "slider", + "$schema": "https://opensource.adobe.com/spectrum-tokens/schemas/token-types/alias.json", + "value": "{disabled-content-color}", + "sets": { + "whcm": { + "$schema": "https://opensource.adobe.com/spectrum-tokens/schemas/token-types/color.json", + "value": "GrayText" + } + } + }, + "slider-tick-mark-color-disabled": { + "component": "slider", + "$schema": "https://opensource.adobe.com/spectrum-tokens/schemas/token-types/alias.json", + "value": "{disabled-background-color}", + "sets": { + "whcm": { + "$schema": "https://opensource.adobe.com/spectrum-tokens/schemas/token-types/color.json", + "value": "GrayText" + } + } + }, + "slider-ramp-handle-border-color-active": { + "component": "slider", + "$schema": "https://opensource.adobe.com/spectrum-tokens/schemas/token-types/alias.json", + "value": "{gray-100}", + "sets": { + "whcm": { + "$schema": "https://opensource.adobe.com/spectrum-tokens/schemas/token-types/color.json", + "value": "ButtonFace" + } + } + }, + "slider-handle-background-color": { + "component": "slider", + "$schema": "https://opensource.adobe.com/spectrum-tokens/schemas/token-types/color.json", + "value": "transparent", + "sets": { + "whcm": { + "$schema": "https://opensource.adobe.com/spectrum-tokens/schemas/token-types/color.json", + "value": "ButtonFace" + } + } + }, + "slider-handle-background-color-disabled": { + "component": "slider", + "$schema": "https://opensource.adobe.com/spectrum-tokens/schemas/token-types/color.json", + "value": "transparent" + }, + "slider-ramp-handle-background-color": { + "component": "slider", + "$schema": "https://opensource.adobe.com/spectrum-tokens/schemas/token-types/alias.json", + "value": "{gray-75}" + }, + "slider-ticks-handle-background-color": { + "component": "slider", + "$schema": "https://opensource.adobe.com/spectrum-tokens/schemas/token-types/alias.json", + "value": "{gray-75}" + }, + "slider-handle-border-color": { + "component": "slider", + "$schema": "https://opensource.adobe.com/spectrum-tokens/schemas/token-types/alias.json", + "value": "{gray-700}" + }, + "slider-handle-disabled-background-color": { + "component": "slider", + "$schema": "https://opensource.adobe.com/spectrum-tokens/schemas/token-types/alias.json", + "value": "{gray-75}" + }, + "slider-tick-mark-color": { + "component": "slider", + "$schema": "https://opensource.adobe.com/spectrum-tokens/schemas/token-types/alias.json", + "value": "{gray-200}" + }, + "slider-handle-border-color-hover": { + "component": "slider", + "$schema": "https://opensource.adobe.com/spectrum-tokens/schemas/token-types/alias.json", + "value": "{gray-800}" + }, + "slider-handle-border-color-down": { + "component": "slider", + "$schema": "https://opensource.adobe.com/spectrum-tokens/schemas/token-types/alias.json", + "value": "{gray-800}" + }, + "slider-handle-border-color-key-focus": { + "component": "slider", + "$schema": "https://opensource.adobe.com/spectrum-tokens/schemas/token-types/alias.json", + "value": "{gray-800}" + }, + "slider-handle-focus-ring-color-key-focus": { + "component": "slider", + "$schema": "https://opensource.adobe.com/spectrum-tokens/schemas/token-types/alias.json", + "value": "{focus-indicator-color}" + }, + "slider-input-left": { + "component": "slider", + "$schema": "https://opensource.adobe.com/spectrum-tokens/schemas/token-types/alias.json", + "value": "calc({slider-handle-margin-left} / 4)" + }, + "slider-track-handleoffset": { + "component": "slider", + "$schema": "https://opensource.adobe.com/spectrum-tokens/schemas/token-types/alias.json", + "value": "{slider-handle-gap}" + }, + "slider-range-track-reset": { + "component": "slider", + "$schema": "https://opensource.adobe.com/spectrum-tokens/schemas/token-types/dimension.json", + "value": "0" + }, + "slider-track-corner-radius": { + "component": "slider", + "$schema": "https://opensource.adobe.com/spectrum-tokens/schemas/token-types/dimension.json", + "value": "2px" + }, + "slider-handle-border-radius": { + "component": "slider", + "$schema": "https://opensource.adobe.com/spectrum-tokens/schemas/token-types/alias.json", + "value": "{corner-radius-500}" + } +} diff --git a/components/splitview/tokens.json b/components/splitview/tokens.json new file mode 100644 index 00000000000..6e0167f3bc5 --- /dev/null +++ b/components/splitview/tokens.json @@ -0,0 +1,106 @@ +{ + "splitview-background-color": { + "component": "split-view", + "$schema": "https://opensource.adobe.com/spectrum-tokens/schemas/token-types/alias.json", + "value": "{gray-75}" + }, + "splitview-handle-background-color": { + "component": "split-view", + "$schema": "https://opensource.adobe.com/spectrum-tokens/schemas/token-types/alias.json", + "value": "{gray-200}", + "sets": { + "whcm": { + "$schema": "https://opensource.adobe.com/spectrum-tokens/schemas/token-types/color.json", + "value": "CanvasText" + } + } + }, + "splitview-gripper-border-radius": { + "component": "split-view", + "$schema": "https://opensource.adobe.com/spectrum-tokens/schemas/token-types/dimension.json", + "value": "2px" + }, + "splitview-vertical-width": { + "component": "split-view", + "$schema": "https://opensource.adobe.com/spectrum-tokens/schemas/token-types/dimension.json", + "value": "100%" + }, + "splitview-vertical-gripper-width": { + "component": "split-view", + "$schema": "https://opensource.adobe.com/spectrum-tokens/schemas/token-types/dimension.json", + "value": "50%" + }, + "splitview-vertical-gripper-outer-width": { + "component": "split-view", + "$schema": "https://opensource.adobe.com/spectrum-tokens/schemas/token-types/dimension.json", + "value": "100%" + }, + "splitview-vertical-gripper-reset": { + "component": "split-view", + "$schema": "https://opensource.adobe.com/spectrum-tokens/schemas/token-types/dimension.json", + "value": "0" + }, + "splitview-content-color": { + "component": "split-view", + "$schema": "https://opensource.adobe.com/spectrum-tokens/schemas/token-types/alias.json", + "value": "{body-color}" + }, + "splitview-handle-background-color-hover": { + "component": "split-view", + "$schema": "https://opensource.adobe.com/spectrum-tokens/schemas/token-types/alias.json", + "value": "{gray-400}", + "sets": { + "whcm": { + "$schema": "https://opensource.adobe.com/spectrum-tokens/schemas/token-types/color.json", + "value": "CanvasText" + } + } + }, + "splitview-handle-background-color-down": { + "component": "split-view", + "$schema": "https://opensource.adobe.com/spectrum-tokens/schemas/token-types/alias.json", + "value": "{gray-800}", + "sets": { + "whcm": { + "$schema": "https://opensource.adobe.com/spectrum-tokens/schemas/token-types/color.json", + "value": "CanvasText" + } + } + }, + "splitview-handle-background-color-focus": { + "component": "split-view", + "$schema": "https://opensource.adobe.com/spectrum-tokens/schemas/token-types/alias.json", + "value": "{focus-indicator-color}", + "sets": { + "whcm": { + "$schema": "https://opensource.adobe.com/spectrum-tokens/schemas/token-types/color.json", + "value": "Highlight" + } + } + }, + "splitview-handle-width": { + "component": "split-view", + "$schema": "https://opensource.adobe.com/spectrum-tokens/schemas/token-types/alias.json", + "value": "{border-width-200}" + }, + "splitview-gripper-width": { + "component": "split-view", + "$schema": "https://opensource.adobe.com/spectrum-tokens/schemas/token-types/alias.json", + "value": "{border-width-400}" + }, + "splitview-gripper-height": { + "component": "split-view", + "$schema": "https://opensource.adobe.com/spectrum-tokens/schemas/token-types/dimension.json", + "value": "16px" + }, + "splitview-gripper-border-width-horizontal": { + "component": "split-view", + "$schema": "https://opensource.adobe.com/spectrum-tokens/schemas/token-types/dimension.json", + "value": "3px" + }, + "splitview-gripper-border-width-vertical": { + "component": "split-view", + "$schema": "https://opensource.adobe.com/spectrum-tokens/schemas/token-types/alias.json", + "value": "{border-width-400}" + } +} diff --git a/components/statuslight/tokens.json b/components/statuslight/tokens.json new file mode 100644 index 00000000000..8e16314eb1b --- /dev/null +++ b/components/statuslight/tokens.json @@ -0,0 +1,214 @@ +{ + "statuslight-corner-radius": { + "component": "status-light", + "$schema": "https://opensource.adobe.com/spectrum-tokens/schemas/token-types/alias.json", + "value": "{corner-radius-full}" + }, + "statuslight-border-width": { + "component": "status-light", + "$schema": "https://opensource.adobe.com/spectrum-tokens/schemas/token-types/alias.json", + "value": "{border-width-100}" + }, + "statuslight-height": { + "component": "status-light", + "$schema": "https://opensource.adobe.com/spectrum-tokens/schemas/token-types/alias.json", + "value": "{component-height-100}" + }, + "statuslight-dot-size": { + "component": "status-light", + "$schema": "https://opensource.adobe.com/spectrum-tokens/schemas/token-types/alias.json", + "value": "{status-light-dot-size-medium}" + }, + "statuslight-line-height": { + "component": "status-light", + "$schema": "https://opensource.adobe.com/spectrum-tokens/schemas/token-types/alias.json", + "value": "{line-height-100}" + }, + "statuslight-line-height-cjk": { + "component": "status-light", + "$schema": "https://opensource.adobe.com/spectrum-tokens/schemas/token-types/alias.json", + "value": "{cjk-line-height-100}" + }, + "statuslight-font-family": { + "component": "status-light", + "$schema": "https://opensource.adobe.com/spectrum-tokens/schemas/token-types/alias.json", + "value": "{sans-font-family-stack}" + }, + "statuslight-font-weight": { + "component": "status-light", + "$schema": "https://opensource.adobe.com/spectrum-tokens/schemas/token-types/alias.json", + "value": "{regular-font-weight}" + }, + "statuslight-font-style": { + "component": "status-light", + "$schema": "https://opensource.adobe.com/spectrum-tokens/schemas/token-types/alias.json", + "value": "{default-font-style}" + }, + "statuslight-font-size": { + "component": "status-light", + "$schema": "https://opensource.adobe.com/spectrum-tokens/schemas/token-types/alias.json", + "value": "{font-size-100}" + }, + "statuslight-spacing-dot-to-label": { + "component": "status-light", + "$schema": "https://opensource.adobe.com/spectrum-tokens/schemas/token-types/alias.json", + "value": "{status-light-text-to-visual-100}" + }, + "statuslight-spacing-top-to-dot": { + "component": "status-light", + "$schema": "https://opensource.adobe.com/spectrum-tokens/schemas/token-types/alias.json", + "value": "{status-light-top-to-dot-medium}" + }, + "statuslight-spacing-top-to-label": { + "component": "status-light", + "$schema": "https://opensource.adobe.com/spectrum-tokens/schemas/token-types/alias.json", + "value": "{component-top-to-text-100}" + }, + "statuslight-spacing-bottom-to-label": { + "component": "status-light", + "$schema": "https://opensource.adobe.com/spectrum-tokens/schemas/token-types/alias.json", + "value": "{component-bottom-to-text-100}" + }, + "statuslight-content-color-default": { + "component": "status-light", + "$schema": "https://opensource.adobe.com/spectrum-tokens/schemas/token-types/alias.json", + "value": "{neutral-content-color-default}", + "sets": { + "whcm": { + "$schema": "https://opensource.adobe.com/spectrum-tokens/schemas/token-types/color.json", + "value": "CanvasText" + } + } + }, + "statuslight-subdued-content-color-default": { + "component": "status-light", + "$schema": "https://opensource.adobe.com/spectrum-tokens/schemas/token-types/alias.json", + "value": "{gray-600}", + "sets": { + "whcm": { + "$schema": "https://opensource.adobe.com/spectrum-tokens/schemas/token-types/color.json", + "value": "CanvasText" + } + } + }, + "statuslight-semantic-neutral-color": { + "component": "status-light", + "$schema": "https://opensource.adobe.com/spectrum-tokens/schemas/token-types/alias.json", + "value": "{neutral-visual-color}" + }, + "statuslight-semantic-negative-color": { + "component": "status-light", + "$schema": "https://opensource.adobe.com/spectrum-tokens/schemas/token-types/alias.json", + "value": "{negative-visual-color}" + }, + "statuslight-semantic-info-color": { + "component": "status-light", + "$schema": "https://opensource.adobe.com/spectrum-tokens/schemas/token-types/alias.json", + "value": "{informative-visual-color}" + }, + "statuslight-semantic-notice-color": { + "component": "status-light", + "$schema": "https://opensource.adobe.com/spectrum-tokens/schemas/token-types/alias.json", + "value": "{notice-visual-color}" + }, + "statuslight-semantic-positive-color": { + "component": "status-light", + "$schema": "https://opensource.adobe.com/spectrum-tokens/schemas/token-types/alias.json", + "value": "{positive-visual-color}" + }, + "statuslight-nonsemantic-gray-color": { + "component": "status-light", + "$schema": "https://opensource.adobe.com/spectrum-tokens/schemas/token-types/alias.json", + "value": "{gray-visual-color}" + }, + "statuslight-nonsemantic-red-color": { + "component": "status-light", + "$schema": "https://opensource.adobe.com/spectrum-tokens/schemas/token-types/alias.json", + "value": "{red-visual-color}" + }, + "statuslight-nonsemantic-orange-color": { + "component": "status-light", + "$schema": "https://opensource.adobe.com/spectrum-tokens/schemas/token-types/alias.json", + "value": "{orange-visual-color}" + }, + "statuslight-nonsemantic-yellow-color": { + "component": "status-light", + "$schema": "https://opensource.adobe.com/spectrum-tokens/schemas/token-types/alias.json", + "value": "{yellow-visual-color}" + }, + "statuslight-nonsemantic-chartreuse-color": { + "component": "status-light", + "$schema": "https://opensource.adobe.com/spectrum-tokens/schemas/token-types/alias.json", + "value": "{chartreuse-visual-color}" + }, + "statuslight-nonsemantic-celery-color": { + "component": "status-light", + "$schema": "https://opensource.adobe.com/spectrum-tokens/schemas/token-types/alias.json", + "value": "{celery-visual-color}" + }, + "statuslight-nonsemantic-green-color": { + "component": "status-light", + "$schema": "https://opensource.adobe.com/spectrum-tokens/schemas/token-types/alias.json", + "value": "{green-visual-color}" + }, + "statuslight-nonsemantic-seafoam-color": { + "component": "status-light", + "$schema": "https://opensource.adobe.com/spectrum-tokens/schemas/token-types/alias.json", + "value": "{seafoam-visual-color}" + }, + "statuslight-nonsemantic-cyan-color": { + "component": "status-light", + "$schema": "https://opensource.adobe.com/spectrum-tokens/schemas/token-types/alias.json", + "value": "{cyan-visual-color}" + }, + "statuslight-nonsemantic-blue-color": { + "component": "status-light", + "$schema": "https://opensource.adobe.com/spectrum-tokens/schemas/token-types/alias.json", + "value": "{blue-visual-color}" + }, + "statuslight-nonsemantic-indigo-color": { + "component": "status-light", + "$schema": "https://opensource.adobe.com/spectrum-tokens/schemas/token-types/alias.json", + "value": "{indigo-visual-color}" + }, + "statuslight-nonsemantic-purple-color": { + "component": "status-light", + "$schema": "https://opensource.adobe.com/spectrum-tokens/schemas/token-types/alias.json", + "value": "{purple-visual-color}" + }, + "statuslight-nonsemantic-fuchsia-color": { + "component": "status-light", + "$schema": "https://opensource.adobe.com/spectrum-tokens/schemas/token-types/alias.json", + "value": "{fuchsia-visual-color}" + }, + "statuslight-nonsemantic-magenta-color": { + "component": "status-light", + "$schema": "https://opensource.adobe.com/spectrum-tokens/schemas/token-types/alias.json", + "value": "{magenta-visual-color}" + }, + "statuslight-nonsemantic-pink-color": { + "component": "status-light", + "$schema": "https://opensource.adobe.com/spectrum-tokens/schemas/token-types/alias.json", + "value": "{pink-visual-color}" + }, + "statuslight-nonsemantic-turquoise-color": { + "component": "status-light", + "$schema": "https://opensource.adobe.com/spectrum-tokens/schemas/token-types/alias.json", + "value": "{turquoise-visual-color}" + }, + "statuslight-nonsemantic-cinnamon-color": { + "component": "status-light", + "$schema": "https://opensource.adobe.com/spectrum-tokens/schemas/token-types/alias.json", + "value": "{cinnamon-visual-color}" + }, + "statuslight-nonsemantic-brown-color": { + "component": "status-light", + "$schema": "https://opensource.adobe.com/spectrum-tokens/schemas/token-types/alias.json", + "value": "{brown-visual-color}" + }, + "statuslight-nonsemantic-silver-color": { + "component": "status-light", + "$schema": "https://opensource.adobe.com/spectrum-tokens/schemas/token-types/alias.json", + "value": "{silver-visual-color}" + } +} diff --git a/components/steplist/tokens.json b/components/steplist/tokens.json new file mode 100644 index 00000000000..8f1daaf277a --- /dev/null +++ b/components/steplist/tokens.json @@ -0,0 +1,117 @@ +{ + "steplist-incomplete-marker-border-color": { + "component": "steplist", + "$schema": "https://opensource.adobe.com/spectrum-tokens/schemas/token-types/alias.json", + "value": "{gray-200}" + }, + "steplist-incomplete-segment-border-block-end-color": { + "component": "steplist", + "$schema": "https://opensource.adobe.com/spectrum-tokens/schemas/token-types/alias.json", + "value": "{gray-200}" + }, + "steplist-step-width": { + "component": "steplist", + "$schema": "https://opensource.adobe.com/spectrum-tokens/schemas/token-types/dimension.json", + "value": "80px" + }, + "steplist-marker-diameter": { + "component": "steplist", + "$schema": "https://opensource.adobe.com/spectrum-tokens/schemas/token-types/dimension.json", + "value": "8px" + }, + "steplist-marker-hit-area": { + "component": "steplist", + "$schema": "https://opensource.adobe.com/spectrum-tokens/schemas/token-types/dimension.json", + "value": "20px" + }, + "steplist-segment-height": { + "component": "steplist", + "$schema": "https://opensource.adobe.com/spectrum-tokens/schemas/token-types/dimension.json", + "value": "2px" + }, + "steplist-top-padding": { + "component": "steplist", + "$schema": "https://opensource.adobe.com/spectrum-tokens/schemas/token-types/dimension.json", + "value": "22px" + }, + "steplist-small-top-padding": { + "component": "steplist", + "$schema": "https://opensource.adobe.com/spectrum-tokens/schemas/token-types/dimension.json", + "value": "11px" + }, + "steplist-side-padding": { + "component": "steplist", + "$schema": "https://opensource.adobe.com/spectrum-tokens/schemas/token-types/dimension.json", + "value": "60px" + }, + "steplist-label-label-offset": { + "component": "steplist", + "$schema": "https://opensource.adobe.com/spectrum-tokens/schemas/token-types/dimension.json", + "value": "10px" + }, + "steplist-label-text-size": { + "component": "steplist", + "$schema": "https://opensource.adobe.com/spectrum-tokens/schemas/token-types/dimension.json", + "value": "12px" + }, + "steplist-current-label-text-color": { + "component": "steplist", + "$schema": "https://opensource.adobe.com/spectrum-tokens/schemas/token-types/alias.json", + "value": "{gray-800}" + }, + "steplist-current-marker-color": { + "component": "steplist", + "$schema": "https://opensource.adobe.com/spectrum-tokens/schemas/token-types/alias.json", + "value": "{gray-800}", + "sets": { + "whcm": { + "$schema": "https://opensource.adobe.com/spectrum-tokens/schemas/token-types/color.json", + "value": "Highlight" + } + } + }, + "steplist-complete-label-text-color": { + "component": "steplist", + "$schema": "https://opensource.adobe.com/spectrum-tokens/schemas/token-types/alias.json", + "value": "{gray-700}" + }, + "steplist-complete-marker-background-color": { + "component": "steplist", + "$schema": "https://opensource.adobe.com/spectrum-tokens/schemas/token-types/alias.json", + "value": "{gray-600}", + "sets": { + "whcm": { + "$schema": "https://opensource.adobe.com/spectrum-tokens/schemas/token-types/color.json", + "value": "CanvasText" + } + } + }, + "steplist-complete-segment-border-block-end-color": { + "component": "steplist", + "$schema": "https://opensource.adobe.com/spectrum-tokens/schemas/token-types/alias.json", + "value": "{gray-600}" + }, + "steplist-incomplete-label-color": { + "component": "steplist", + "$schema": "https://opensource.adobe.com/spectrum-tokens/schemas/token-types/alias.json", + "value": "{gray-600}" + }, + "steplist-current-marker-color-key-focus": { + "component": "steplist", + "$schema": "https://opensource.adobe.com/spectrum-tokens/schemas/token-types/color-set.json", + "sets": { + "dark": { + "$schema": "https://opensource.adobe.com/spectrum-tokens/schemas/token-types/alias.json", + "value": "{blue-700}" + }, + "light": { + "$schema": "https://opensource.adobe.com/spectrum-tokens/schemas/token-types/alias.json", + "value": "{blue-800}" + }, + "whcm": { + "$schema": "https://opensource.adobe.com/spectrum-tokens/schemas/token-types/color.json", + "value": "Highlight" + } + } + } +} diff --git a/components/stepper/tokens.json b/components/stepper/tokens.json new file mode 100644 index 00000000000..917d1fbcca9 --- /dev/null +++ b/components/stepper/tokens.json @@ -0,0 +1,79 @@ +{ + "stepper-border-color-default": { + "component": "stepper", + "$schema": "https://opensource.adobe.com/spectrum-tokens/schemas/token-types/alias.json", + "value": "{gray-300}", + "sets": { + "whcm": { + "$schema": "https://opensource.adobe.com/spectrum-tokens/schemas/token-types/color.json", + "value": "CanvasText" + } + } + }, + "stepper-border-color-hover": { + "component": "stepper", + "$schema": "https://opensource.adobe.com/spectrum-tokens/schemas/token-types/alias.json", + "value": "{gray-400}", + "sets": { + "whcm": { + "$schema": "https://opensource.adobe.com/spectrum-tokens/schemas/token-types/color.json", + "value": "Highlight" + } + } + }, + "stepper-border-color-focus": { + "component": "stepper", + "$schema": "https://opensource.adobe.com/spectrum-tokens/schemas/token-types/alias.json", + "value": "{gray-800}", + "sets": { + "whcm": { + "$schema": "https://opensource.adobe.com/spectrum-tokens/schemas/token-types/color.json", + "value": "Highlight" + } + } + }, + "stepper-border-color-keyboard-focus": { + "component": "stepper", + "$schema": "https://opensource.adobe.com/spectrum-tokens/schemas/token-types/alias.json", + "value": "{gray-800}", + "sets": { + "whcm": { + "$schema": "https://opensource.adobe.com/spectrum-tokens/schemas/token-types/color.json", + "value": "CanvasText" + } + } + }, + "stepper-border-color-focus-hover": { + "component": "stepper", + "$schema": "https://opensource.adobe.com/spectrum-tokens/schemas/token-types/alias.json", + "value": "{gray-900}", + "sets": { + "whcm": { + "$schema": "https://opensource.adobe.com/spectrum-tokens/schemas/token-types/color.json", + "value": "Highlight" + } + } + }, + "stepper-background-color": { + "component": "stepper", + "$schema": "https://opensource.adobe.com/spectrum-tokens/schemas/token-types/alias.json", + "value": "{gray-25}", + "sets": { + "whcm": { + "$schema": "https://opensource.adobe.com/spectrum-tokens/schemas/token-types/color.json", + "value": "Canvas" + } + } + }, + "stepper-focus-indicator-color": { + "component": "stepper", + "$schema": "https://opensource.adobe.com/spectrum-tokens/schemas/token-types/alias.json", + "value": "{focus-indicator-color}", + "sets": { + "whcm": { + "$schema": "https://opensource.adobe.com/spectrum-tokens/schemas/token-types/color.json", + "value": "Highlight" + } + } + } +} diff --git a/components/swatch/tokens.json b/components/swatch/tokens.json new file mode 100644 index 00000000000..8eaeba4fad0 --- /dev/null +++ b/components/swatch/tokens.json @@ -0,0 +1,139 @@ +{ + "swatch-border-color": { + "component": "swatch", + "$schema": "https://opensource.adobe.com/spectrum-tokens/schemas/token-types/color-set.json", + "sets": { + "dark": { + "$schema": "https://opensource.adobe.com/spectrum-tokens/schemas/token-types/color.json", + "value": "rgba(255 255 255 / 51%)" + }, + "light": { + "$schema": "https://opensource.adobe.com/spectrum-tokens/schemas/token-types/color.json", + "value": "rgb(0 0 0 / 51%)" + }, + "whcm": { + "$schema": "https://opensource.adobe.com/spectrum-tokens/schemas/token-types/color.json", + "value": "ButtonText" + } + } + }, + "swatch-border-color-light": { + "component": "swatch", + "$schema": "https://opensource.adobe.com/spectrum-tokens/schemas/token-types/color-set.json", + "sets": { + "dark": { + "$schema": "https://opensource.adobe.com/spectrum-tokens/schemas/token-types/color.json", + "value": "rgba(255 255 255 / 20%)" + }, + "light": { + "$schema": "https://opensource.adobe.com/spectrum-tokens/schemas/token-types/color.json", + "value": "rgba(0 0 0 / 20%)" + } + } + }, + "swatch-icon-border-color": { + "component": "swatch", + "$schema": "https://opensource.adobe.com/spectrum-tokens/schemas/token-types/alias.json", + "value": "rgb(0 0 0 / {swatch-disabled-icon-border-opacity})" + }, + "swatch-size": { + "component": "swatch", + "$schema": "https://opensource.adobe.com/spectrum-tokens/schemas/token-types/alias.json", + "value": "{swatch-size-medium}" + }, + "swatch-border-radius": { + "component": "swatch", + "$schema": "https://opensource.adobe.com/spectrum-tokens/schemas/token-types/alias.json", + "value": "{corner-radius-100}" + }, + "swatch-border-thickness": { + "component": "swatch", + "$schema": "https://opensource.adobe.com/spectrum-tokens/schemas/token-types/alias.json", + "value": "{border-width-100}" + }, + "swatch-border-thickness-selected": { + "component": "swatch", + "$schema": "https://opensource.adobe.com/spectrum-tokens/schemas/token-types/alias.json", + "value": "{border-width-200}" + }, + "swatch-disabled-icon-size": { + "component": "swatch", + "$schema": "https://opensource.adobe.com/spectrum-tokens/schemas/token-types/alias.json", + "value": "{workflow-icon-size-75}" + }, + "swatch-slash-thickness": { + "component": "swatch", + "$schema": "https://opensource.adobe.com/spectrum-tokens/schemas/token-types/alias.json", + "value": "{swatch-slash-thickness-medium}" + }, + "swatch-border-color-selected": { + "component": "swatch", + "$schema": "https://opensource.adobe.com/spectrum-tokens/schemas/token-types/alias.json", + "value": "{gray-1000}", + "sets": { + "whcm": { + "$schema": "https://opensource.adobe.com/spectrum-tokens/schemas/token-types/color.json", + "value": "Highlight" + } + } + }, + "swatch-inner-border-color-selected": { + "component": "swatch", + "$schema": "https://opensource.adobe.com/spectrum-tokens/schemas/token-types/alias.json", + "value": "{gray-25}", + "sets": { + "whcm": { + "$schema": "https://opensource.adobe.com/spectrum-tokens/schemas/token-types/color.json", + "value": "ButtonFace" + } + } + }, + "swatch-disabled-icon-color": { + "component": "swatch", + "$schema": "https://opensource.adobe.com/spectrum-tokens/schemas/token-types/alias.json", + "value": "{white}", + "sets": { + "whcm": { + "$schema": "https://opensource.adobe.com/spectrum-tokens/schemas/token-types/color.json", + "value": "GrayText" + } + } + }, + "swatch-icon-color": { + "component": "swatch", + "$schema": "https://opensource.adobe.com/spectrum-tokens/schemas/token-types/alias.json", + "value": "{neutral-content-color-default}", + "sets": { + "whcm": { + "$schema": "https://opensource.adobe.com/spectrum-tokens/schemas/token-types/color.json", + "value": "ButtonFace" + } + } + }, + "swatch-slash-icon-color": { + "component": "swatch", + "$schema": "https://opensource.adobe.com/spectrum-tokens/schemas/token-types/alias.json", + "value": "{negative-visual-color}" + }, + "swatch-focus-indicator-color": { + "component": "swatch", + "$schema": "https://opensource.adobe.com/spectrum-tokens/schemas/token-types/alias.json", + "value": "{focus-indicator-color}", + "sets": { + "whcm": { + "$schema": "https://opensource.adobe.com/spectrum-tokens/schemas/token-types/color.json", + "value": "ButtonText" + } + } + }, + "swatch-focus-indicator-thickness": { + "component": "swatch", + "$schema": "https://opensource.adobe.com/spectrum-tokens/schemas/token-types/alias.json", + "value": "{focus-indicator-thickness}" + }, + "swatch-focus-indicator-gap": { + "component": "swatch", + "$schema": "https://opensource.adobe.com/spectrum-tokens/schemas/token-types/alias.json", + "value": "{focus-indicator-gap}" + } +} diff --git a/components/swatchgroup/tokens.json b/components/swatchgroup/tokens.json new file mode 100644 index 00000000000..8ca71c831e3 --- /dev/null +++ b/components/swatchgroup/tokens.json @@ -0,0 +1,17 @@ +{ + "swatchgroup-spacing": { + "component": "swatch-group", + "$schema": "https://opensource.adobe.com/spectrum-tokens/schemas/token-types/alias.json", + "value": "{spacing-75}" + }, + "swatchgroup-spacing-compact": { + "component": "swatch-group", + "$schema": "https://opensource.adobe.com/spectrum-tokens/schemas/token-types/alias.json", + "value": "{spacing-50}" + }, + "swatchgroup-spacing-spacious-large": { + "component": "swatch-group", + "$schema": "https://opensource.adobe.com/spectrum-tokens/schemas/token-types/alias.json", + "value": "{spacing-100}" + } +} diff --git a/components/switch/tokens.json b/components/switch/tokens.json new file mode 100644 index 00000000000..387454cd925 --- /dev/null +++ b/components/switch/tokens.json @@ -0,0 +1,267 @@ +{ + "switch-label-color-default": { + "component": "switch", + "$schema": "https://opensource.adobe.com/spectrum-tokens/schemas/token-types/alias.json", + "value": "{neutral-content-color-default}", + "sets": { + "whcm": { + "$schema": "https://opensource.adobe.com/spectrum-tokens/schemas/token-types/color.json", + "value": "ButtonText" + } + } + }, + "switch-label-color-hover": { + "component": "switch", + "$schema": "https://opensource.adobe.com/spectrum-tokens/schemas/token-types/alias.json", + "value": "{neutral-content-color-hover}", + "sets": { + "whcm": { + "$schema": "https://opensource.adobe.com/spectrum-tokens/schemas/token-types/color.json", + "value": "ButtonText" + } + } + }, + "switch-label-color-down": { + "component": "switch", + "$schema": "https://opensource.adobe.com/spectrum-tokens/schemas/token-types/alias.json", + "value": "{neutral-content-color-down}", + "sets": { + "whcm": { + "$schema": "https://opensource.adobe.com/spectrum-tokens/schemas/token-types/color.json", + "value": "ButtonText" + } + } + }, + "switch-label-color-focus": { + "component": "switch", + "$schema": "https://opensource.adobe.com/spectrum-tokens/schemas/token-types/alias.json", + "value": "{neutral-content-color-key-focus}", + "sets": { + "whcm": { + "$schema": "https://opensource.adobe.com/spectrum-tokens/schemas/token-types/color.json", + "value": "ButtonText" + } + } + }, + "switch-label-color-disabled": { + "component": "switch", + "$schema": "https://opensource.adobe.com/spectrum-tokens/schemas/token-types/alias.json", + "value": "{disabled-content-color}", + "sets": { + "whcm": { + "$schema": "https://opensource.adobe.com/spectrum-tokens/schemas/token-types/color.json", + "value": "GrayText" + } + } + }, + "switch-border-width": { + "component": "switch", + "$schema": "https://opensource.adobe.com/spectrum-tokens/schemas/token-types/alias.json", + "value": "{border-width-200}" + }, + "switch-border-color-default": { + "component": "switch", + "$schema": "https://opensource.adobe.com/spectrum-tokens/schemas/token-types/alias.json", + "value": "{neutral-content-color-default}" + }, + "switch-border-color-hover": { + "component": "switch", + "$schema": "https://opensource.adobe.com/spectrum-tokens/schemas/token-types/alias.json", + "value": "{neutral-content-color-hover}" + }, + "switch-border-color-down": { + "component": "switch", + "$schema": "https://opensource.adobe.com/spectrum-tokens/schemas/token-types/alias.json", + "value": "{neutral-content-color-down}" + }, + "switch-border-color-focus": { + "component": "switch", + "$schema": "https://opensource.adobe.com/spectrum-tokens/schemas/token-types/alias.json", + "value": "{neutral-content-color-key-focus}" + }, + "switch-border-color-disabled": { + "component": "switch", + "$schema": "https://opensource.adobe.com/spectrum-tokens/schemas/token-types/alias.json", + "value": "{disabled-content-color}" + }, + "switch-border-color-selected-default": { + "component": "switch", + "$schema": "https://opensource.adobe.com/spectrum-tokens/schemas/token-types/alias.json", + "value": "{neutral-content-color-default}" + }, + "switch-border-color-selected-hover": { + "component": "switch", + "$schema": "https://opensource.adobe.com/spectrum-tokens/schemas/token-types/alias.json", + "value": "{neutral-content-color-hover}" + }, + "switch-border-color-selected-down": { + "component": "switch", + "$schema": "https://opensource.adobe.com/spectrum-tokens/schemas/token-types/alias.json", + "value": "{neutral-content-color-down}" + }, + "switch-border-color-selected-focus": { + "component": "switch", + "$schema": "https://opensource.adobe.com/spectrum-tokens/schemas/token-types/alias.json", + "value": "{neutral-content-color-key-focus}" + }, + "switch-background-color": { + "component": "switch", + "$schema": "https://opensource.adobe.com/spectrum-tokens/schemas/token-types/alias.json", + "value": "{gray-25}" + }, + "switch-background-color-disabled": { + "component": "switch", + "$schema": "https://opensource.adobe.com/spectrum-tokens/schemas/token-types/alias.json", + "value": "{gray-25}" + }, + "switch-background-color-selected-default": { + "component": "switch", + "$schema": "https://opensource.adobe.com/spectrum-tokens/schemas/token-types/alias.json", + "value": "{neutral-background-color-default}" + }, + "switch-background-color-selected-hover": { + "component": "switch", + "$schema": "https://opensource.adobe.com/spectrum-tokens/schemas/token-types/alias.json", + "value": "{neutral-background-color-hover}" + }, + "switch-background-color-selected-down": { + "component": "switch", + "$schema": "https://opensource.adobe.com/spectrum-tokens/schemas/token-types/alias.json", + "value": "{neutral-background-color-down}" + }, + "switch-background-color-selected-focus": { + "component": "switch", + "$schema": "https://opensource.adobe.com/spectrum-tokens/schemas/token-types/alias.json", + "value": "{neutral-background-color-key-focus}" + }, + "switch-background-color-selected-disabled": { + "component": "switch", + "$schema": "https://opensource.adobe.com/spectrum-tokens/schemas/token-types/alias.json", + "value": "{disabled-content-color}" + }, + "switch-focus-indicator-thickness": { + "component": "switch", + "$schema": "https://opensource.adobe.com/spectrum-tokens/schemas/token-types/alias.json", + "value": "{focus-indicator-thickness}" + }, + "switch-focus-indicator-color": { + "component": "switch", + "$schema": "https://opensource.adobe.com/spectrum-tokens/schemas/token-types/alias.json", + "value": "{focus-indicator-color}" + }, + "switch-focus-indicator-gap": { + "component": "switch", + "$schema": "https://opensource.adobe.com/spectrum-tokens/schemas/token-types/alias.json", + "value": "{focus-indicator-gap}" + }, + "switch-handle-background-color-default": { + "component": "switch", + "$schema": "https://opensource.adobe.com/spectrum-tokens/schemas/token-types/alias.json", + "value": "{neutral-content-color-default}" + }, + "switch-handle-background-color-hover": { + "component": "switch", + "$schema": "https://opensource.adobe.com/spectrum-tokens/schemas/token-types/alias.json", + "value": "{neutral-content-color-hover}" + }, + "switch-handle-background-color-down": { + "component": "switch", + "$schema": "https://opensource.adobe.com/spectrum-tokens/schemas/token-types/alias.json", + "value": "{neutral-content-color-down}" + }, + "switch-handle-background-color-focus": { + "component": "switch", + "$schema": "https://opensource.adobe.com/spectrum-tokens/schemas/token-types/alias.json", + "value": "{neutral-content-color-key-focus}" + }, + "switch-handle-background-color-disabled": { + "component": "switch", + "$schema": "https://opensource.adobe.com/spectrum-tokens/schemas/token-types/alias.json", + "value": "{disabled-content-color}" + }, + "switch-handle-background-color-selected": { + "component": "switch", + "$schema": "https://opensource.adobe.com/spectrum-tokens/schemas/token-types/alias.json", + "value": "{gray-25}" + }, + "switch-handle-background-color-selected-disabled": { + "component": "switch", + "$schema": "https://opensource.adobe.com/spectrum-tokens/schemas/token-types/alias.json", + "value": "{gray-25}" + }, + "switch-handle-size": { + "component": "switch", + "$schema": "https://opensource.adobe.com/spectrum-tokens/schemas/token-types/alias.json", + "value": "{switch-handle-size-medium}" + }, + "switch-handle-selected-size": { + "component": "switch", + "$schema": "https://opensource.adobe.com/spectrum-tokens/schemas/token-types/alias.json", + "value": "{switch-handle-selected-size-medium}" + }, + "switch-animation-duration-switch": { + "component": "switch", + "$schema": "https://opensource.adobe.com/spectrum-tokens/schemas/token-types/alias.json", + "value": "{animation-duration-100}" + }, + "switch-animation-duration-label": { + "component": "switch", + "$schema": "https://opensource.adobe.com/spectrum-tokens/schemas/token-types/alias.json", + "value": "{animation-duration-200}" + }, + "switch-min-height": { + "component": "switch", + "$schema": "https://opensource.adobe.com/spectrum-tokens/schemas/token-types/alias.json", + "value": "{component-height-100}" + }, + "switch-control-width": { + "component": "switch", + "$schema": "https://opensource.adobe.com/spectrum-tokens/schemas/token-types/alias.json", + "value": "{switch-control-width-medium}" + }, + "switch-control-height": { + "component": "switch", + "$schema": "https://opensource.adobe.com/spectrum-tokens/schemas/token-types/alias.json", + "value": "{switch-control-height-medium}" + }, + "switch-control-label-spacing": { + "component": "switch", + "$schema": "https://opensource.adobe.com/spectrum-tokens/schemas/token-types/alias.json", + "value": "{text-to-control-100}" + }, + "switch-spacing-top-to-control": { + "component": "switch", + "$schema": "https://opensource.adobe.com/spectrum-tokens/schemas/token-types/alias.json", + "value": "{switch-top-to-control-medium}" + }, + "switch-spacing-top-to-label": { + "component": "switch", + "$schema": "https://opensource.adobe.com/spectrum-tokens/schemas/token-types/alias.json", + "value": "{component-top-to-text-100}" + }, + "switch-spacing-bottom-to-label": { + "component": "switch", + "$schema": "https://opensource.adobe.com/spectrum-tokens/schemas/token-types/alias.json", + "value": "{component-bottom-to-text-100}" + }, + "switch-font-size": { + "component": "switch", + "$schema": "https://opensource.adobe.com/spectrum-tokens/schemas/token-types/alias.json", + "value": "{font-size-100}" + }, + "switch-line-height": { + "component": "switch", + "$schema": "https://opensource.adobe.com/spectrum-tokens/schemas/token-types/alias.json", + "value": "{line-height-100}" + }, + "switch-cjk-line-height": { + "component": "switch", + "$schema": "https://opensource.adobe.com/spectrum-tokens/schemas/token-types/alias.json", + "value": "{cjk-line-height-100}" + }, + "switch-border-radius": { + "component": "switch", + "$schema": "https://opensource.adobe.com/spectrum-tokens/schemas/token-types/alias.json", + "value": "{corner-radius-full}" + } +} diff --git a/components/table/dist/metadata.json b/components/table/dist/metadata.json index 24bfc87b340..054cf976cbe 100644 --- a/components/table/dist/metadata.json +++ b/components/table/dist/metadata.json @@ -282,7 +282,6 @@ "--spectrum-table-default-vertical-align", "--spectrum-table-disclosure-icon-size", "--spectrum-table-divider-color", - "--spectrum-table-drop-zone-background-color", "--spectrum-table-drop-zone-outline-color", "--spectrum-table-edge-to-content", "--spectrum-table-focus-indicator-color", @@ -307,6 +306,7 @@ "--spectrum-table-min-header-row-height", "--spectrum-table-min-row-height", "--spectrum-table-outer-border-inline-width", + "--spectrum-table-row-active-color", "--spectrum-table-row-background-color", "--spectrum-table-row-background-color-active", "--spectrum-table-row-background-color-hover", @@ -351,7 +351,6 @@ "--spectrum-table-selected-row-background-color-hover", "--spectrum-table-selected-row-background-color-non-emphasized", "--spectrum-table-selected-row-background-color-non-emphasized-focus", - "--spectrum-table-selected-row-background-color-rgb", "--spectrum-table-selected-row-background-opacity", "--spectrum-table-selected-row-background-opacity-hover", "--spectrum-table-selected-row-background-opacity-non-emphasized", @@ -378,17 +377,17 @@ "--spectrum-corner-radius-medium-size-extra-small", "--spectrum-corner-radius-small-default", "--spectrum-default-font-style", + "--spectrum-drop-zone-background-color", "--spectrum-drop-zone-background-color-opacity", - "--spectrum-drop-zone-background-color-rgb", "--spectrum-focus-indicator-color", "--spectrum-focus-indicator-thickness", "--spectrum-font-size-100", "--spectrum-gray-200", "--spectrum-gray-25", "--spectrum-gray-300", - "--spectrum-gray-700-rgb", + "--spectrum-gray-700", "--spectrum-gray-75", - "--spectrum-gray-900-rgb", + "--spectrum-gray-900", "--spectrum-line-height-100", "--spectrum-logical-rotation", "--spectrum-neutral-content-color-default", diff --git a/components/table/index.css b/components/table/index.css index 9f358a08f3f..1be0d1097e0 100644 --- a/components/table/index.css +++ b/components/table/index.css @@ -23,22 +23,24 @@ --spectrum-table-section-header-background-color: var(--spectrum-gray-200); /* @todo Refactor or remove these properties once the RGB stripped value is available. */ - --spectrum-table-selected-row-background-color: rgb(var(--spectrum-table-selected-row-background-color-rgb), var(--spectrum-table-selected-row-background-opacity)); - --spectrum-table-selected-row-background-color-non-emphasized: rgb(var(--spectrum-gray-700-rgb), var(--spectrum-table-selected-row-background-opacity-non-emphasized)); - --spectrum-table-selected-row-background-color-hover: rgb(var(--spectrum-table-selected-row-background-color-rgb), var(--spectrum-table-selected-row-background-opacity-hover)); - --spectrum-table-selected-row-background-color-active: rgb(var(--spectrum-table-selected-row-background-color-rgb), var(--spectrum-table-selected-row-background-opacity-hover)); - --spectrum-table-selected-row-background-color-non-emphasized-focus: rgb(var(--spectrum-gray-700-rgb), var(--spectrum-table-selected-row-background-opacity-non-emphasized-hover)); + --spectrum-table-selected-row-background-color: color-mix(in sRGB, var(--spectrum-table-selected-row-background-color) var(--spectrum-table-selected-row-background-opacity), transparent); + --spectrum-table-selected-row-background-color-non-emphasized: color-mix(in sRGB, var(--spectrum-gray-700) var(--spectrum-table-selected-row-background-opacity-non-emphasized), transparent); + --spectrum-table-selected-row-background-color-hover: color-mix(in sRGB, var(--spectrum-table-selected-row-background-color) var(--spectrum-table-selected-row-background-opacity-hover), transparent); + --spectrum-table-selected-row-background-color-active: color-mix(in sRGB, var(--spectrum-table-selected-row-background-color) var(--spectrum-table-selected-row-background-opacity-hover), transparent); + --spectrum-table-selected-row-background-color-non-emphasized-focus: color-mix(in sRGB, var(--spectrum-gray-700) var(--spectrum-table-selected-row-background-opacity-non-emphasized-hover), transparent); --spectrum-table-cell-background-color: var(--highcontrast-table-row-background-color, var(--mod-table-row-background-color, var(--spectrum-table-row-background-color))); --spectrum-table-selected-cell-background-color: var(--highcontrast-table-selected-row-background-color, var(--mod-table-selected-row-background-color-non-emphasized, var(--spectrum-table-selected-row-background-color-non-emphasized))); - --spectrum-table-drop-zone-background-color: rgb(var(--spectrum-drop-zone-background-color-rgb), var(--spectrum-drop-zone-background-color-opacity)); --spectrum-table-drop-zone-outline-color: var(--spectrum-accent-visual-color); + /* Row Selection */ + --spectrum-table-row-active-color: color-mix(in sRGB, var(--spectrum-gray-900) var(--spectrum-table-row-down-opacity), transparent); /* active/down state background color */ + /* Row States */ /* @todo Refactor or remove these properties once the RGB stripped value is available. */ - --spectrum-table-row-background-color-hover: rgb(var(--spectrum-gray-900-rgb), var(--spectrum-table-row-hover-opacity)); - --spectrum-table-row-background-color-active: rgb(var(--spectrum-gray-900-rgb), var(--spectrum-table-row-down-opacity)); /* active/down state background color */ + --spectrum-table-row-background-color-hover: color-mix(in sRGB, var(--spectrum-gray-900) var(--spectrum-table-row-hover-opacity), transparent); + --spectrum-table-row-background-color-active: color-mix(in sRGB, var(--spectrum-gray-900) var(--spectrum-table-row-down-opacity), transparent); /* active/down state background color */ /* Border */ --spectrum-table-border-color: var(--spectrum-gray-300); @@ -245,7 +247,7 @@ .spectrum-Table-body.is-drop-target & { --highcontrast-table-row-text-color: var(--highcontrast-table-selected-row-text-color); --highcontrast-table-icon-color: var(--highcontrast-table-selected-row-text-color); - --spectrum-table-cell-background-color: var(--highcontrast-table-selected-row-background-color, var(--mod-table-drop-zone-background-color, var(--spectrum-table-drop-zone-background-color))); + --spectrum-table-cell-background-color: var(--highcontrast-table-selected-row-background-color, var(--mod-table-drop-zone-background-color, color-mix(in sRGB, var(--spectrum-drop-zone-background-color) var(--spectrum-drop-zone-background-color-opacity), transparent))); } } diff --git a/components/table/tokens.json b/components/table/tokens.json new file mode 100644 index 00000000000..2f78cd07ba8 --- /dev/null +++ b/components/table/tokens.json @@ -0,0 +1,438 @@ +{ + "table-transition-duration": { + "component": "table", + "$schema": "https://opensource.adobe.com/spectrum-tokens/schemas/token-types/alias.json", + "value": "{animation-duration-100}", + "sets": { + "whcm": { + "$schema": "https://opensource.adobe.com/spectrum-tokens/schemas/token-types/duration.json", + "value": "0s" + } + } + }, + "table-header-background-color": { + "component": "table", + "$schema": "https://opensource.adobe.com/spectrum-tokens/schemas/token-types/alias.json", + "value": "{transparent-white-25}" + }, + "table-row-background-color": { + "component": "table", + "$schema": "https://opensource.adobe.com/spectrum-tokens/schemas/token-types/alias.json", + "value": "{gray-25}", + "sets": { + "whcm": { + "$schema": "https://opensource.adobe.com/spectrum-tokens/schemas/token-types/color.json", + "value": "Canvas" + } + } + }, + "table-row-background-color-hover": { + "component": "table", + "$schema": "https://opensource.adobe.com/spectrum-tokens/schemas/token-types/alias.json", + "value": "color-mix(in sRGB, {gray-900} {table-row-hover-opacity}, transparent)", + "sets": { + "whcm": { + "$schema": "https://opensource.adobe.com/spectrum-tokens/schemas/token-types/color.json", + "value": "Highlight" + } + } + }, + "table-summary-row-background-color": { + "component": "table", + "$schema": "https://opensource.adobe.com/spectrum-tokens/schemas/token-types/alias.json", + "value": "{gray-200}" + }, + "table-section-header-background-color": { + "component": "table", + "$schema": "https://opensource.adobe.com/spectrum-tokens/schemas/token-types/alias.json", + "value": "{gray-100}" + }, + "table-selected-row-background-color": { + "component": "table", + "$schema": "https://opensource.adobe.com/spectrum-tokens/schemas/token-types/alias.json", + "value": "color-mix(in sRGB, {blue-900} {table-selected-row-background-opacity}, transparent)", + "sets": { + "whcm": { + "$schema": "https://opensource.adobe.com/spectrum-tokens/schemas/token-types/color.json", + "value": "Highlight" + } + } + }, + "table-selected-row-background-color-non-emphasized": { + "component": "table", + "$schema": "https://opensource.adobe.com/spectrum-tokens/schemas/token-types/alias.json", + "value": "color-mix(in sRGB, {gray-700} {table-selected-row-background-opacity-non-emphasized}, transparent)", + "sets": { + "whcm": { + "$schema": "https://opensource.adobe.com/spectrum-tokens/schemas/token-types/color.json", + "value": "Highlight" + } + } + }, + "table-selected-row-background-color-focus": { + "component": "table", + "$schema": "https://opensource.adobe.com/spectrum-tokens/schemas/token-types/alias.json", + "value": "color-mix(in sRGB, {blue-900} {table-selected-row-background-opacity-hover}, transparent)", + "sets": { + "whcm": { + "$schema": "https://opensource.adobe.com/spectrum-tokens/schemas/token-types/color.json", + "value": "Highlight" + } + } + }, + "table-selected-row-background-color-non-emphasized-focus": { + "component": "table", + "$schema": "https://opensource.adobe.com/spectrum-tokens/schemas/token-types/alias.json", + "value": "color-mix(in sRGB, {gray-700} {table-selected-row-background-opacity-non-emphasized-hover}, transparent)", + "sets": { + "whcm": { + "$schema": "https://opensource.adobe.com/spectrum-tokens/schemas/token-types/color.json", + "value": "Highlight" + } + } + }, + "table-cell-background-color": { + "component": "table", + "$schema": "https://opensource.adobe.com/spectrum-tokens/schemas/token-types/alias.json", + "value": "{table-row-background-color}", + "sets": { + "whcm": { + "$schema": "https://opensource.adobe.com/spectrum-tokens/schemas/token-types/color.json", + "value": "Canvas" + } + } + }, + "table-selected-cell-background-color": { + "component": "table", + "$schema": "https://opensource.adobe.com/spectrum-tokens/schemas/token-types/alias.json", + "value": "{table-selected-row-background-color-non-emphasized}", + "sets": { + "whcm": { + "$schema": "https://opensource.adobe.com/spectrum-tokens/schemas/token-types/color.json", + "value": "Highlight" + } + } + }, + "table-drop-zone-outline-color": { + "component": "table", + "$schema": "https://opensource.adobe.com/spectrum-tokens/schemas/token-types/alias.json", + "value": "{accent-visual-color}" + }, + "table-row-active-color": { + "component": "table", + "$schema": "https://opensource.adobe.com/spectrum-tokens/schemas/token-types/alias.json", + "value": "color-mix(in sRGB, {gray-900} {table-row-down-opacity}, transparent)" + }, + "table-border-color": { + "component": "table", + "$schema": "https://opensource.adobe.com/spectrum-tokens/schemas/token-types/alias.json", + "value": "{gray-300}", + "sets": { + "whcm": { + "$schema": "https://opensource.adobe.com/spectrum-tokens/schemas/token-types/color.json", + "value": "CanvasText" + } + } + }, + "table-border-radius": { + "component": "table", + "$schema": "https://opensource.adobe.com/spectrum-tokens/schemas/token-types/alias.json", + "value": "{corner-radius-medium-size-extra-small}" + }, + "table-border-width": { + "component": "table", + "$schema": "https://opensource.adobe.com/spectrum-tokens/schemas/token-types/alias.json", + "value": "{table-border-divider-width}" + }, + "table-outer-border-inline-width": { + "component": "table", + "$schema": "https://opensource.adobe.com/spectrum-tokens/schemas/token-types/alias.json", + "value": "{table-border-divider-width}" + }, + "table-divider-color": { + "component": "table", + "$schema": "https://opensource.adobe.com/spectrum-tokens/schemas/token-types/alias.json", + "value": "{gray-300}", + "sets": { + "whcm": { + "$schema": "https://opensource.adobe.com/spectrum-tokens/schemas/token-types/color.json", + "value": "CanvasText" + } + } + }, + "table-focus-indicator-thickness": { + "component": "table", + "$schema": "https://opensource.adobe.com/spectrum-tokens/schemas/token-types/alias.json", + "value": "{focus-indicator-thickness}" + }, + "table-focus-indicator-color": { + "component": "table", + "$schema": "https://opensource.adobe.com/spectrum-tokens/schemas/token-types/alias.json", + "value": "{focus-indicator-color}", + "sets": { + "whcm": { + "$schema": "https://opensource.adobe.com/spectrum-tokens/schemas/token-types/color.json", + "value": "Highlight" + } + } + }, + "table-row-focus-indicator-width": { + "component": "table", + "$schema": "https://opensource.adobe.com/spectrum-tokens/schemas/token-types/alias.json", + "value": "{side-focus-indicator}" + }, + "table-focused-cell-border-radius": { + "component": "table", + "$schema": "https://opensource.adobe.com/spectrum-tokens/schemas/token-types/alias.json", + "value": "{corner-radius-small-default}" + }, + "table-selected-cell-background-color-focus": { + "component": "table", + "$schema": "https://opensource.adobe.com/spectrum-tokens/schemas/token-types/alias.json", + "value": "{table-selected-row-background-color-non-emphasized-focus}", + "sets": { + "whcm": { + "$schema": "https://opensource.adobe.com/spectrum-tokens/schemas/token-types/color.json", + "value": "Highlight" + } + } + }, + "table-icon-color-default": { + "component": "table", + "$schema": "https://opensource.adobe.com/spectrum-tokens/schemas/token-types/alias.json", + "value": "{neutral-subdued-content-color-default}", + "sets": { + "whcm": { + "$schema": "https://opensource.adobe.com/spectrum-tokens/schemas/token-types/color.json", + "value": "CanvasText" + } + } + }, + "table-icon-color-hover": { + "component": "table", + "$schema": "https://opensource.adobe.com/spectrum-tokens/schemas/token-types/alias.json", + "value": "{neutral-subdued-content-color-hover}", + "sets": { + "whcm": { + "$schema": "https://opensource.adobe.com/spectrum-tokens/schemas/token-types/color.json", + "value": "HighlightText" + } + } + }, + "table-icon-color-active": { + "component": "table", + "$schema": "https://opensource.adobe.com/spectrum-tokens/schemas/token-types/alias.json", + "value": "{neutral-subdued-content-color-down}", + "sets": { + "whcm": { + "$schema": "https://opensource.adobe.com/spectrum-tokens/schemas/token-types/color.json", + "value": "HighlightText" + } + } + }, + "table-icon-color-focus": { + "component": "table", + "$schema": "https://opensource.adobe.com/spectrum-tokens/schemas/token-types/alias.json", + "value": "{neutral-subdued-content-color-key-focus}", + "sets": { + "whcm": { + "$schema": "https://opensource.adobe.com/spectrum-tokens/schemas/token-types/color.json", + "value": "Highlight" + } + } + }, + "table-icon-color-focus-hover": { + "component": "table", + "$schema": "https://opensource.adobe.com/spectrum-tokens/schemas/token-types/alias.json", + "value": "{neutral-subdued-content-color-key-focus}", + "sets": { + "whcm": { + "$schema": "https://opensource.adobe.com/spectrum-tokens/schemas/token-types/color.json", + "value": "HighlightText" + } + } + }, + "table-icon-color-key-focus": { + "component": "table", + "$schema": "https://opensource.adobe.com/spectrum-tokens/schemas/token-types/alias.json", + "value": "{neutral-subdued-content-color-key-focus}", + "sets": { + "whcm": { + "$schema": "https://opensource.adobe.com/spectrum-tokens/schemas/token-types/color.json", + "value": "HighlightText" + } + } + }, + "table-disclosure-icon-size": { + "component": "table", + "$schema": "https://opensource.adobe.com/spectrum-tokens/schemas/token-types/alias.json", + "value": "{component-height-100}" + }, + "table-icon-color": { + "component": "table", + "$schema": "https://opensource.adobe.com/spectrum-tokens/schemas/token-types/alias.json", + "value": "{table-icon-color-default}", + "sets": { + "whcm": { + "$schema": "https://opensource.adobe.com/spectrum-tokens/schemas/token-types/color.json", + "value": "CanvasText" + } + } + }, + "table-default-vertical-align": { + "component": "table", + "$schema": "https://opensource.adobe.com/spectrum-tokens/schemas/token-types/alias.json", + "value": "middle" + }, + "table-header-font-weight": { + "component": "table", + "$schema": "https://opensource.adobe.com/spectrum-tokens/schemas/token-types/alias.json", + "value": "{bold-font-weight}" + }, + "table-header-text-color": { + "component": "table", + "$schema": "https://opensource.adobe.com/spectrum-tokens/schemas/token-types/alias.json", + "value": "{body-color}" + }, + "table-row-font-family": { + "component": "table", + "$schema": "https://opensource.adobe.com/spectrum-tokens/schemas/token-types/alias.json", + "value": "{sans-font-family-stack}" + }, + "table-row-font-weight": { + "component": "table", + "$schema": "https://opensource.adobe.com/spectrum-tokens/schemas/token-types/alias.json", + "value": "{regular-font-weight}" + }, + "table-row-font-style": { + "component": "table", + "$schema": "https://opensource.adobe.com/spectrum-tokens/schemas/token-types/alias.json", + "value": "{default-font-style}" + }, + "table-row-line-height": { + "component": "table", + "$schema": "https://opensource.adobe.com/spectrum-tokens/schemas/token-types/alias.json", + "value": "{line-height-100}" + }, + "table-row-text-color": { + "component": "table", + "$schema": "https://opensource.adobe.com/spectrum-tokens/schemas/token-types/alias.json", + "value": "{neutral-content-color-default}", + "sets": { + "whcm": { + "$schema": "https://opensource.adobe.com/spectrum-tokens/schemas/token-types/color.json", + "value": "CanvasText" + } + } + }, + "table-row-font-size": { + "component": "table", + "$schema": "https://opensource.adobe.com/spectrum-tokens/schemas/token-types/alias.json", + "value": "{font-size-100}" + }, + "table-summary-row-font-weight": { + "component": "table", + "$schema": "https://opensource.adobe.com/spectrum-tokens/schemas/token-types/alias.json", + "value": "{bold-font-weight}" + }, + "table-section-header-font-weight": { + "component": "table", + "$schema": "https://opensource.adobe.com/spectrum-tokens/schemas/token-types/alias.json", + "value": "{bold-font-weight}" + }, + "table-min-header-row-height": { + "component": "table", + "$schema": "https://opensource.adobe.com/spectrum-tokens/schemas/token-types/alias.json", + "value": "{component-height-100}" + }, + "table-header-row-top-to-text": { + "component": "table", + "$schema": "https://opensource.adobe.com/spectrum-tokens/schemas/token-types/alias.json", + "value": "{table-column-header-row-top-to-text-medium}" + }, + "table-header-row-bottom-to-text": { + "component": "table", + "$schema": "https://opensource.adobe.com/spectrum-tokens/schemas/token-types/alias.json", + "value": "{table-column-header-row-bottom-to-text-medium}" + }, + "table-min-row-height": { + "component": "table", + "$schema": "https://opensource.adobe.com/spectrum-tokens/schemas/token-types/alias.json", + "value": "{table-row-height-medium}" + }, + "table-row-top-to-text": { + "component": "table", + "$schema": "https://opensource.adobe.com/spectrum-tokens/schemas/token-types/alias.json", + "value": "{table-row-top-to-text-medium}" + }, + "table-row-bottom-to-text": { + "component": "table", + "$schema": "https://opensource.adobe.com/spectrum-tokens/schemas/token-types/alias.json", + "value": "{table-row-bottom-to-text-medium}" + }, + "table-header-row-checkbox-block-spacing": { + "component": "table", + "$schema": "https://opensource.adobe.com/spectrum-tokens/schemas/token-types/alias.json", + "value": "{table-header-row-checkbox-to-top-medium}" + }, + "table-row-checkbox-block-spacing": { + "component": "table", + "$schema": "https://opensource.adobe.com/spectrum-tokens/schemas/token-types/alias.json", + "value": "{table-row-checkbox-to-top-medium}" + }, + "table-section-header-min-height": { + "component": "table", + "$schema": "https://opensource.adobe.com/spectrum-tokens/schemas/token-types/alias.json", + "value": "{table-section-header-row-height-medium}" + }, + "table-section-header-block-start-spacing": { + "component": "table", + "$schema": "https://opensource.adobe.com/spectrum-tokens/schemas/token-types/alias.json", + "value": "{component-top-to-text-100}" + }, + "table-section-header-block-end-spacing": { + "component": "table", + "$schema": "https://opensource.adobe.com/spectrum-tokens/schemas/token-types/alias.json", + "value": "{component-bottom-to-text-100}" + }, + "table-visual-to-text": { + "component": "table", + "$schema": "https://opensource.adobe.com/spectrum-tokens/schemas/token-types/alias.json", + "value": "{text-to-visual-300}" + }, + "table-thumbnail-size": { + "component": "table", + "$schema": "https://opensource.adobe.com/spectrum-tokens/schemas/token-types/alias.json", + "value": "{thumbnail-size-100}" + }, + "table-avatar-size": { + "component": "table", + "$schema": "https://opensource.adobe.com/spectrum-tokens/schemas/token-types/alias.json", + "value": "{avatar-size-75}" + }, + "table-cell-inline-spacing": { + "component": "table", + "$schema": "https://opensource.adobe.com/spectrum-tokens/schemas/token-types/alias.json", + "value": "{table-edge-to-content}" + }, + "table-checkbox-to-cell-content": { + "component": "table", + "$schema": "https://opensource.adobe.com/spectrum-tokens/schemas/token-types/alias.json", + "value": "{table-checkbox-to-text}" + }, + "table-collapsible-tier-indent": { + "component": "table", + "$schema": "https://opensource.adobe.com/spectrum-tokens/schemas/token-types/alias.json", + "value": "{spacing-300}" + }, + "table-collapsible-disclosure-inline-spacing": { + "component": "table", + "$schema": "https://opensource.adobe.com/spectrum-tokens/schemas/token-types/alias.json", + "value": "0px" + }, + "table-collapsible-icon-animation-duration": { + "component": "table", + "$schema": "https://opensource.adobe.com/spectrum-tokens/schemas/token-types/alias.json", + "value": "{animation-duration-100}" + } +} diff --git a/components/tabs/tokens.json b/components/tabs/tokens.json new file mode 100644 index 00000000000..a0b2552f012 --- /dev/null +++ b/components/tabs/tokens.json @@ -0,0 +1,200 @@ +{ + "tabs-font-weight": { + "component": "tabs", + "$schema": "https://opensource.adobe.com/spectrum-tokens/schemas/token-types/alias.json", + "value": "{regular-font-weight}" + }, + "tabs-divider-background-color": { + "component": "tabs", + "$schema": "https://opensource.adobe.com/spectrum-tokens/schemas/token-types/alias.json", + "value": "{gray-200}", + "sets": { + "whcm": { + "$schema": "https://opensource.adobe.com/spectrum-tokens/schemas/token-types/color.json", + "value": "{gray-500}" + } + } + }, + "tabs-item-height": { + "component": "tabs", + "$schema": "https://opensource.adobe.com/spectrum-tokens/schemas/token-types/alias.json", + "value": "{tab-item-height-medium}" + }, + "tabs-item-horizontal-spacing": { + "component": "tabs", + "$schema": "https://opensource.adobe.com/spectrum-tokens/schemas/token-types/alias.json", + "value": "{tab-item-to-tab-item-horizontal-medium}" + }, + "tabs-item-vertical-spacing": { + "component": "tabs", + "$schema": "https://opensource.adobe.com/spectrum-tokens/schemas/token-types/alias.json", + "value": "{tab-item-to-tab-item-vertical-medium}" + }, + "tabs-start-to-edge": { + "component": "tabs", + "$schema": "https://opensource.adobe.com/spectrum-tokens/schemas/token-types/alias.json", + "value": "{tab-item-start-to-edge-medium}" + }, + "tabs-top-to-text": { + "component": "tabs", + "$schema": "https://opensource.adobe.com/spectrum-tokens/schemas/token-types/alias.json", + "value": "{tab-item-top-to-text-medium}" + }, + "tabs-bottom-to-text": { + "component": "tabs", + "$schema": "https://opensource.adobe.com/spectrum-tokens/schemas/token-types/alias.json", + "value": "{tab-item-bottom-to-text-medium}" + }, + "tabs-icon-size": { + "component": "tabs", + "$schema": "https://opensource.adobe.com/spectrum-tokens/schemas/token-types/alias.json", + "value": "{workflow-icon-size-75}" + }, + "tabs-icon-to-text": { + "component": "tabs", + "$schema": "https://opensource.adobe.com/spectrum-tokens/schemas/token-types/alias.json", + "value": "{text-to-visual-100}" + }, + "tabs-top-to-icon": { + "component": "tabs", + "$schema": "https://opensource.adobe.com/spectrum-tokens/schemas/token-types/alias.json", + "value": "{tab-item-top-to-workflow-icon-medium}" + }, + "tabs-color": { + "component": "tabs", + "$schema": "https://opensource.adobe.com/spectrum-tokens/schemas/token-types/alias.json", + "value": "{neutral-subdued-content-color-default}", + "sets": { + "whcm": { + "$schema": "https://opensource.adobe.com/spectrum-tokens/schemas/token-types/color.json", + "value": "ButtonText" + } + } + }, + "tabs-color-selected": { + "component": "tabs", + "$schema": "https://opensource.adobe.com/spectrum-tokens/schemas/token-types/alias.json", + "value": "{neutral-subdued-content-color-down}", + "sets": { + "whcm": { + "$schema": "https://opensource.adobe.com/spectrum-tokens/schemas/token-types/color.json", + "value": "HighlightText" + } + } + }, + "tabs-color-hover": { + "component": "tabs", + "$schema": "https://opensource.adobe.com/spectrum-tokens/schemas/token-types/alias.json", + "value": "{neutral-subdued-content-color-hover}", + "sets": { + "whcm": { + "$schema": "https://opensource.adobe.com/spectrum-tokens/schemas/token-types/color.json", + "value": "ButtonText" + } + } + }, + "tabs-color-key-focus": { + "component": "tabs", + "$schema": "https://opensource.adobe.com/spectrum-tokens/schemas/token-types/alias.json", + "value": "{neutral-subdued-content-color-key-focus}", + "sets": { + "whcm": { + "$schema": "https://opensource.adobe.com/spectrum-tokens/schemas/token-types/color.json", + "value": "ButtonText" + } + } + }, + "tabs-color-disabled": { + "component": "tabs", + "$schema": "https://opensource.adobe.com/spectrum-tokens/schemas/token-types/alias.json", + "value": "{gray-500}", + "sets": { + "whcm": { + "$schema": "https://opensource.adobe.com/spectrum-tokens/schemas/token-types/color.json", + "value": "GrayText" + } + } + }, + "tabs-font-family": { + "component": "tabs", + "$schema": "https://opensource.adobe.com/spectrum-tokens/schemas/token-types/alias.json", + "value": "{sans-font-family-stack}" + }, + "tabs-font-style": { + "component": "tabs", + "$schema": "https://opensource.adobe.com/spectrum-tokens/schemas/token-types/alias.json", + "value": "{default-font-style}" + }, + "tabs-font-size": { + "component": "tabs", + "$schema": "https://opensource.adobe.com/spectrum-tokens/schemas/token-types/alias.json", + "value": "{font-size-100}" + }, + "tabs-line-height": { + "component": "tabs", + "$schema": "https://opensource.adobe.com/spectrum-tokens/schemas/token-types/alias.json", + "value": "{line-height-100}" + }, + "tabs-focus-indicator-width": { + "component": "tabs", + "$schema": "https://opensource.adobe.com/spectrum-tokens/schemas/token-types/alias.json", + "value": "{focus-indicator-thickness}" + }, + "tabs-focus-indicator-border-radius": { + "component": "tabs", + "$schema": "https://opensource.adobe.com/spectrum-tokens/schemas/token-types/alias.json", + "value": "{corner-radius-100}" + }, + "tabs-focus-indicator-gap": { + "component": "tabs", + "$schema": "https://opensource.adobe.com/spectrum-tokens/schemas/token-types/alias.json", + "value": "{tab-item-focus-indicator-gap-medium}" + }, + "tabs-focus-indicator-color": { + "component": "tabs", + "$schema": "https://opensource.adobe.com/spectrum-tokens/schemas/token-types/alias.json", + "value": "{focus-indicator-color}", + "sets": { + "whcm": { + "$schema": "https://opensource.adobe.com/spectrum-tokens/schemas/token-types/color.json", + "value": "CanvasText" + } + } + }, + "tabs-selection-indicator-color": { + "component": "tabs", + "$schema": "https://opensource.adobe.com/spectrum-tokens/schemas/token-types/alias.json", + "value": "{neutral-subdued-content-color-down}", + "sets": { + "whcm": { + "$schema": "https://opensource.adobe.com/spectrum-tokens/schemas/token-types/color.json", + "value": "Highlight" + } + } + }, + "tabs-list-background-direction": { + "component": "tabs", + "$schema": "https://opensource.adobe.com/spectrum-tokens/schemas/token-types/alias.json", + "value": "top" + }, + "tabs-divider-size": { + "component": "tabs", + "$schema": "https://opensource.adobe.com/spectrum-tokens/schemas/token-types/alias.json", + "value": "{border-width-200}" + }, + "tabs-divider-border-radius": { + "component": "tabs", + "$schema": "https://opensource.adobe.com/spectrum-tokens/schemas/token-types/alias.json", + "value": "1px" + }, + "tabs-animation-duration": { + "component": "tabs", + "$schema": "https://opensource.adobe.com/spectrum-tokens/schemas/token-types/alias.json", + "value": "{animation-duration-100}" + }, + "tabs-animation-ease": { + "component": "tabs", + "$schema": "https://opensource.adobe.com/spectrum-tokens/schemas/token-types/alias.json", + "value": "{animation-ease-in-out}" + } +} diff --git a/components/tag/tokens.json b/components/tag/tokens.json new file mode 100644 index 00000000000..6af8c2d003e --- /dev/null +++ b/components/tag/tokens.json @@ -0,0 +1,450 @@ +{ + "tag-animation-duration": { + "component": "tag", + "$schema": "https://opensource.adobe.com/spectrum-tokens/schemas/token-types/alias.json", + "value": "{animation-duration-100}" + }, + "tag-border-width": { + "component": "tag", + "$schema": "https://opensource.adobe.com/spectrum-tokens/schemas/token-types/alias.json", + "value": "{border-width-100}" + }, + "tag-border-color": { + "component": "tag", + "$schema": "https://opensource.adobe.com/spectrum-tokens/schemas/token-types/alias.json", + "value": "transparent", + "sets": { + "whcm": { + "$schema": "https://opensource.adobe.com/spectrum-tokens/schemas/token-types/color.json", + "value": "ButtonText" + } + } + }, + "tag-border-color-hover": { + "component": "tag", + "$schema": "https://opensource.adobe.com/spectrum-tokens/schemas/token-types/alias.json", + "value": "transparent", + "sets": { + "whcm": { + "$schema": "https://opensource.adobe.com/spectrum-tokens/schemas/token-types/color.json", + "value": "ButtonText" + } + } + }, + "tag-border-color-active": { + "component": "tag", + "$schema": "https://opensource.adobe.com/spectrum-tokens/schemas/token-types/alias.json", + "value": "transparent", + "sets": { + "whcm": { + "$schema": "https://opensource.adobe.com/spectrum-tokens/schemas/token-types/color.json", + "value": "ButtonText" + } + } + }, + "tag-border-color-focus": { + "component": "tag", + "$schema": "https://opensource.adobe.com/spectrum-tokens/schemas/token-types/alias.json", + "value": "transparent", + "sets": { + "whcm": { + "$schema": "https://opensource.adobe.com/spectrum-tokens/schemas/token-types/color.json", + "value": "ButtonText" + } + } + }, + "tag-border-color-selected": { + "component": "tag", + "$schema": "https://opensource.adobe.com/spectrum-tokens/schemas/token-types/alias.json", + "value": "transparent", + "sets": { + "whcm": { + "$schema": "https://opensource.adobe.com/spectrum-tokens/schemas/token-types/color.json", + "value": "Highlight" + } + } + }, + "tag-background-color": { + "component": "tag", + "$schema": "https://opensource.adobe.com/spectrum-tokens/schemas/token-types/alias.json", + "value": "{gray-100}", + "sets": { + "whcm": { + "$schema": "https://opensource.adobe.com/spectrum-tokens/schemas/token-types/color.json", + "value": "ButtonFace" + } + } + }, + "tag-background-color-hover": { + "component": "tag", + "$schema": "https://opensource.adobe.com/spectrum-tokens/schemas/token-types/alias.json", + "value": "{gray-200}", + "sets": { + "whcm": { + "$schema": "https://opensource.adobe.com/spectrum-tokens/schemas/token-types/color.json", + "value": "ButtonFace" + } + } + }, + "tag-background-color-active": { + "component": "tag", + "$schema": "https://opensource.adobe.com/spectrum-tokens/schemas/token-types/alias.json", + "value": "{gray-200}", + "sets": { + "whcm": { + "$schema": "https://opensource.adobe.com/spectrum-tokens/schemas/token-types/color.json", + "value": "ButtonFace" + } + } + }, + "tag-background-color-focus": { + "component": "tag", + "$schema": "https://opensource.adobe.com/spectrum-tokens/schemas/token-types/alias.json", + "value": "{gray-200}", + "sets": { + "whcm": { + "$schema": "https://opensource.adobe.com/spectrum-tokens/schemas/token-types/color.json", + "value": "ButtonFace" + } + } + }, + "tag-background-color-selected": { + "component": "tag", + "$schema": "https://opensource.adobe.com/spectrum-tokens/schemas/token-types/alias.json", + "value": "{neutral-background-color-default}", + "sets": { + "whcm": { + "$schema": "https://opensource.adobe.com/spectrum-tokens/schemas/token-types/color.json", + "value": "Highlight" + } + } + }, + "tag-background-color-selected-hover": { + "component": "tag", + "$schema": "https://opensource.adobe.com/spectrum-tokens/schemas/token-types/alias.json", + "value": "{neutral-background-color-hover}", + "sets": { + "whcm": { + "$schema": "https://opensource.adobe.com/spectrum-tokens/schemas/token-types/color.json", + "value": "Highlight" + } + } + }, + "tag-background-color-selected-active": { + "component": "tag", + "$schema": "https://opensource.adobe.com/spectrum-tokens/schemas/token-types/alias.json", + "value": "{neutral-background-color-down}", + "sets": { + "whcm": { + "$schema": "https://opensource.adobe.com/spectrum-tokens/schemas/token-types/color.json", + "value": "Highlight" + } + } + }, + "tag-background-color-selected-focus": { + "component": "tag", + "$schema": "https://opensource.adobe.com/spectrum-tokens/schemas/token-types/alias.json", + "value": "{neutral-background-color-key-focus}", + "sets": { + "whcm": { + "$schema": "https://opensource.adobe.com/spectrum-tokens/schemas/token-types/color.json", + "value": "Highlight" + } + } + }, + "tag-content-color": { + "component": "tag", + "$schema": "https://opensource.adobe.com/spectrum-tokens/schemas/token-types/alias.json", + "value": "{neutral-content-color-default}", + "sets": { + "whcm": { + "$schema": "https://opensource.adobe.com/spectrum-tokens/schemas/token-types/color.json", + "value": "ButtonText" + } + } + }, + "tag-content-color-hover": { + "component": "tag", + "$schema": "https://opensource.adobe.com/spectrum-tokens/schemas/token-types/alias.json", + "value": "{neutral-content-color-hover}", + "sets": { + "whcm": { + "$schema": "https://opensource.adobe.com/spectrum-tokens/schemas/token-types/color.json", + "value": "ButtonText" + } + } + }, + "tag-content-color-active": { + "component": "tag", + "$schema": "https://opensource.adobe.com/spectrum-tokens/schemas/token-types/alias.json", + "value": "{neutral-content-color-down}", + "sets": { + "whcm": { + "$schema": "https://opensource.adobe.com/spectrum-tokens/schemas/token-types/color.json", + "value": "ButtonText" + } + } + }, + "tag-content-color-focus": { + "component": "tag", + "$schema": "https://opensource.adobe.com/spectrum-tokens/schemas/token-types/alias.json", + "value": "{neutral-content-color-key-focus}", + "sets": { + "whcm": { + "$schema": "https://opensource.adobe.com/spectrum-tokens/schemas/token-types/color.json", + "value": "ButtonText" + } + } + }, + "tag-content-color-selected": { + "component": "tag", + "$schema": "https://opensource.adobe.com/spectrum-tokens/schemas/token-types/alias.json", + "value": "{gray-25}", + "sets": { + "whcm": { + "$schema": "https://opensource.adobe.com/spectrum-tokens/schemas/token-types/color.json", + "value": "HighlightText" + } + } + }, + "tag-content-color-disabled": { + "component": "tag", + "$schema": "https://opensource.adobe.com/spectrum-tokens/schemas/token-types/alias.json", + "value": "{disabled-content-color}", + "sets": { + "whcm": { + "$schema": "https://opensource.adobe.com/spectrum-tokens/schemas/token-types/color.json", + "value": "GrayText" + } + } + }, + "tag-focus-ring-thickness": { + "component": "tag", + "$schema": "https://opensource.adobe.com/spectrum-tokens/schemas/token-types/alias.json", + "value": "{focus-indicator-thickness}" + }, + "tag-focus-ring-gap": { + "component": "tag", + "$schema": "https://opensource.adobe.com/spectrum-tokens/schemas/token-types/alias.json", + "value": "{focus-indicator-gap}" + }, + "tag-focus-ring-color": { + "component": "tag", + "$schema": "https://opensource.adobe.com/spectrum-tokens/schemas/token-types/alias.json", + "value": "{focus-indicator-color}", + "sets": { + "whcm": { + "$schema": "https://opensource.adobe.com/spectrum-tokens/schemas/token-types/color.json", + "value": "Highlight" + } + } + }, + "tag-label-line-height": { + "component": "tag", + "$schema": "https://opensource.adobe.com/spectrum-tokens/schemas/token-types/alias.json", + "value": "{line-height-100}" + }, + "tag-label-line-height-cjk": { + "component": "tag", + "$schema": "https://opensource.adobe.com/spectrum-tokens/schemas/token-types/alias.json", + "value": "{cjk-line-height-100}" + }, + "tag-label-font-family": { + "component": "tag", + "$schema": "https://opensource.adobe.com/spectrum-tokens/schemas/token-types/alias.json", + "value": "{sans-font-family-stack}" + }, + "tag-label-font-style": { + "component": "tag", + "$schema": "https://opensource.adobe.com/spectrum-tokens/schemas/token-types/alias.json", + "value": "{default-font-style}" + }, + "tag-label-font-weight": { + "component": "tag", + "$schema": "https://opensource.adobe.com/spectrum-tokens/schemas/token-types/alias.json", + "value": "{medium-font-weight}" + }, + "tag-height": { + "component": "tag", + "$schema": "https://opensource.adobe.com/spectrum-tokens/schemas/token-types/alias.json", + "value": "{component-height-75}" + }, + "tag-min-inline-size": { + "component": "tag", + "$schema": "https://opensource.adobe.com/spectrum-tokens/schemas/token-types/alias.json", + "value": "{tag-minimum-width-small}" + }, + "tag-font-size": { + "component": "tag", + "$schema": "https://opensource.adobe.com/spectrum-tokens/schemas/token-types/alias.json", + "value": "{font-size-75}" + }, + "tag-icon-size": { + "component": "tag", + "$schema": "https://opensource.adobe.com/spectrum-tokens/schemas/token-types/alias.json", + "value": "{workflow-icon-size-75}" + }, + "tag-corner-radius": { + "component": "tag", + "$schema": "https://opensource.adobe.com/spectrum-tokens/schemas/token-types/alias.json", + "value": "{corner-radius-medium-size-small}" + }, + "tag-clear-button-size": { + "component": "tag", + "$schema": "https://opensource.adobe.com/spectrum-tokens/schemas/token-types/alias.json", + "value": "{cross-icon-size-75}" + }, + "tag-clear-button-spacing-block": { + "component": "tag", + "$schema": "https://opensource.adobe.com/spectrum-tokens/schemas/token-types/alias.json", + "value": "{tag-top-to-cross-icon-small}" + }, + "tag-label-to-clear-icon": { + "component": "tag", + "$schema": "https://opensource.adobe.com/spectrum-tokens/schemas/token-types/alias.json", + "value": "{tag-label-to-clear-icon-small}" + }, + "tag-edge-to-clear-icon": { + "component": "tag", + "$schema": "https://opensource.adobe.com/spectrum-tokens/schemas/token-types/alias.json", + "value": "{tag-edge-to-clear-icon-small}" + }, + "tag-visual-spacing-inline-start": { + "component": "tag", + "$schema": "https://opensource.adobe.com/spectrum-tokens/schemas/token-types/alias.json", + "value": "{component-edge-to-visual-75}" + }, + "tag-visual-spacing-inline-end": { + "component": "tag", + "$schema": "https://opensource.adobe.com/spectrum-tokens/schemas/token-types/alias.json", + "value": "{text-to-visual-75}" + }, + "tag-icon-spacing-block-start": { + "component": "tag", + "$schema": "https://opensource.adobe.com/spectrum-tokens/schemas/token-types/alias.json", + "value": "{component-top-to-workflow-icon-75}" + }, + "tag-icon-spacing-block-end": { + "component": "tag", + "$schema": "https://opensource.adobe.com/spectrum-tokens/schemas/token-types/alias.json", + "value": "{component-top-to-workflow-icon-75}" + }, + "tag-avatar-size": { + "component": "tag", + "$schema": "https://opensource.adobe.com/spectrum-tokens/schemas/token-types/alias.json", + "value": "{avatar-size-50}" + }, + "tag-avatar-spacing-block-start": { + "component": "tag", + "$schema": "https://opensource.adobe.com/spectrum-tokens/schemas/token-types/alias.json", + "value": "{tag-top-to-avatar-small}" + }, + "tag-avatar-spacing-block-end": { + "component": "tag", + "$schema": "https://opensource.adobe.com/spectrum-tokens/schemas/token-types/alias.json", + "value": "{tag-top-to-avatar-small}" + }, + "tag-thumbnail-size": { + "component": "tag", + "$schema": "https://opensource.adobe.com/spectrum-tokens/schemas/token-types/alias.json", + "value": "{thumbnail-size-50}" + }, + "tag-label-spacing-block": { + "component": "tag", + "$schema": "https://opensource.adobe.com/spectrum-tokens/schemas/token-types/alias.json", + "value": "{component-top-to-text-75}" + }, + "tag-label-spacing-inline": { + "component": "tag", + "$schema": "https://opensource.adobe.com/spectrum-tokens/schemas/token-types/alias.json", + "value": "{component-edge-to-text-75}" + }, + "tag-border-color-disabled": { + "component": "tag", + "$schema": "https://opensource.adobe.com/spectrum-tokens/schemas/token-types/alias.json", + "value": "transparent", + "sets": { + "whcm": { + "$schema": "https://opensource.adobe.com/spectrum-tokens/schemas/token-types/color.json", + "value": "GrayText" + } + } + }, + "tag-background-color-disabled": { + "component": "tag", + "$schema": "https://opensource.adobe.com/spectrum-tokens/schemas/token-types/alias.json", + "value": "{disabled-background-color}", + "sets": { + "whcm": { + "$schema": "https://opensource.adobe.com/spectrum-tokens/schemas/token-types/color.json", + "value": "ButtonFace" + } + } + }, + "tag-border-color-emphasized": { + "component": "tag", + "$schema": "https://opensource.adobe.com/spectrum-tokens/schemas/token-types/alias.json", + "value": "transparent", + "sets": { + "whcm": { + "$schema": "https://opensource.adobe.com/spectrum-tokens/schemas/token-types/color.json", + "value": "Highlight" + } + } + }, + "tag-background-color-emphasized": { + "component": "tag", + "$schema": "https://opensource.adobe.com/spectrum-tokens/schemas/token-types/alias.json", + "value": "{accent-background-color-default}", + "sets": { + "whcm": { + "$schema": "https://opensource.adobe.com/spectrum-tokens/schemas/token-types/color.json", + "value": "ButtonFace" + } + } + }, + "tag-background-color-emphasized-hover": { + "component": "tag", + "$schema": "https://opensource.adobe.com/spectrum-tokens/schemas/token-types/alias.json", + "value": "{accent-background-color-hover}", + "sets": { + "whcm": { + "$schema": "https://opensource.adobe.com/spectrum-tokens/schemas/token-types/color.json", + "value": "ButtonFace" + } + } + }, + "tag-background-color-emphasized-active": { + "component": "tag", + "$schema": "https://opensource.adobe.com/spectrum-tokens/schemas/token-types/alias.json", + "value": "{accent-background-color-down}", + "sets": { + "whcm": { + "$schema": "https://opensource.adobe.com/spectrum-tokens/schemas/token-types/color.json", + "value": "ButtonFace" + } + } + }, + "tag-background-color-emphasized-focus": { + "component": "tag", + "$schema": "https://opensource.adobe.com/spectrum-tokens/schemas/token-types/alias.json", + "value": "{accent-background-color-key-focus}", + "sets": { + "whcm": { + "$schema": "https://opensource.adobe.com/spectrum-tokens/schemas/token-types/color.json", + "value": "ButtonFace" + } + } + }, + "tag-content-color-emphasized": { + "component": "tag", + "$schema": "https://opensource.adobe.com/spectrum-tokens/schemas/token-types/alias.json", + "value": "{white}", + "sets": { + "whcm": { + "$schema": "https://opensource.adobe.com/spectrum-tokens/schemas/token-types/color.json", + "value": "CanvasText" + } + } + } +} diff --git a/components/taggroup/tokens.json b/components/taggroup/tokens.json new file mode 100644 index 00000000000..4acb58f088e --- /dev/null +++ b/components/taggroup/tokens.json @@ -0,0 +1,12 @@ +{ + "tag-group-item-margin-block": { + "component": "tag-group", + "$schema": "https://opensource.adobe.com/spectrum-tokens/schemas/token-types/alias.json", + "value": "{spacing-75}" + }, + "tag-group-item-margin-inline": { + "component": "tag-group", + "$schema": "https://opensource.adobe.com/spectrum-tokens/schemas/token-types/alias.json", + "value": "{spacing-75}" + } +} diff --git a/components/textfield/tokens.json b/components/textfield/tokens.json new file mode 100644 index 00000000000..8a79e4c159b --- /dev/null +++ b/components/textfield/tokens.json @@ -0,0 +1,445 @@ +{ + "textfield-animation-duration": { + "component": "text-field", + "$schema": "https://opensource.adobe.com/spectrum-tokens/schemas/token-types/alias.json", + "value": "{animation-duration-100}" + }, + "textfield-height": { + "component": "text-field", + "$schema": "https://opensource.adobe.com/spectrum-tokens/schemas/token-types/alias.json", + "value": "{component-height-100}" + }, + "textfield-width": { + "component": "text-field", + "$schema": "https://opensource.adobe.com/spectrum-tokens/schemas/token-types/alias.json", + "value": "{field-default-width-medium}" + }, + "textfield-min-width": { + "component": "text-field", + "$schema": "https://opensource.adobe.com/spectrum-tokens/schemas/token-types/alias.json", + "value": "calc({textfield-height} * {text-field-minimum-width-multiplier})" + }, + "textfield-border-width": { + "component": "text-field", + "$schema": "https://opensource.adobe.com/spectrum-tokens/schemas/token-types/alias.json", + "value": "{border-width-200}" + }, + "textfield-corner-radius": { + "component": "text-field", + "$schema": "https://opensource.adobe.com/spectrum-tokens/schemas/token-types/alias.json", + "value": "{corner-radius-medium-size-medium}" + }, + "textfield-spacing-inline": { + "component": "text-field", + "$schema": "https://opensource.adobe.com/spectrum-tokens/schemas/token-types/alias.json", + "value": "{component-edge-to-text-100}" + }, + "textfield-spacing-block-start": { + "component": "text-field", + "$schema": "https://opensource.adobe.com/spectrum-tokens/schemas/token-types/alias.json", + "value": "{component-top-to-text-100}" + }, + "textfield-spacing-block-end": { + "component": "text-field", + "$schema": "https://opensource.adobe.com/spectrum-tokens/schemas/token-types/alias.json", + "value": "{component-bottom-to-text-100}" + }, + "textfield-label-spacing-block": { + "component": "text-field", + "$schema": "https://opensource.adobe.com/spectrum-tokens/schemas/token-types/alias.json", + "value": "{field-label-to-component}" + }, + "textfield-label-spacing-inline-side-label": { + "component": "text-field", + "$schema": "https://opensource.adobe.com/spectrum-tokens/schemas/token-types/alias.json", + "value": "{spacing-200}" + }, + "textfield-helptext-spacing-block": { + "component": "text-field", + "$schema": "https://opensource.adobe.com/spectrum-tokens/schemas/token-types/alias.json", + "value": "{help-text-to-component}" + }, + "textfield-icon-size-invalid": { + "component": "text-field", + "$schema": "https://opensource.adobe.com/spectrum-tokens/schemas/token-types/alias.json", + "value": "{workflow-icon-size-100}" + }, + "textfield-icon-size-valid": { + "component": "text-field", + "$schema": "https://opensource.adobe.com/spectrum-tokens/schemas/token-types/alias.json", + "value": "{checkmark-icon-size-100}" + }, + "textfield-icon-spacing-inline-start-invalid": { + "component": "text-field", + "$schema": "https://opensource.adobe.com/spectrum-tokens/schemas/token-types/alias.json", + "value": "{text-to-visual-100}" + }, + "textfield-icon-spacing-inline-end-invalid": { + "component": "text-field", + "$schema": "https://opensource.adobe.com/spectrum-tokens/schemas/token-types/alias.json", + "value": "{field-edge-to-alert-icon-medium}" + }, + "textfield-icon-spacing-block-invalid": { + "component": "text-field", + "$schema": "https://opensource.adobe.com/spectrum-tokens/schemas/token-types/alias.json", + "value": "{component-top-to-workflow-icon-100}" + }, + "textfield-icon-spacing-inline-start-valid": { + "component": "text-field", + "$schema": "https://opensource.adobe.com/spectrum-tokens/schemas/token-types/alias.json", + "value": "{text-to-visual-100}" + }, + "textfield-icon-spacing-inline-end-valid": { + "component": "text-field", + "$schema": "https://opensource.adobe.com/spectrum-tokens/schemas/token-types/alias.json", + "value": "{field-edge-to-validation-icon-medium}" + }, + "textfield-icon-spacing-block-valid": { + "component": "text-field", + "$schema": "https://opensource.adobe.com/spectrum-tokens/schemas/token-types/alias.json", + "value": "{field-top-to-validation-icon-medium}" + }, + "textfield-font-family": { + "component": "text-field", + "$schema": "https://opensource.adobe.com/spectrum-tokens/schemas/token-types/alias.json", + "value": "{sans-font-family-stack}" + }, + "textfield-font-weight": { + "component": "text-field", + "$schema": "https://opensource.adobe.com/spectrum-tokens/schemas/token-types/alias.json", + "value": "{regular-font-weight}" + }, + "textfield-font-style": { + "component": "text-field", + "$schema": "https://opensource.adobe.com/spectrum-tokens/schemas/token-types/alias.json", + "value": "{default-font-style}" + }, + "textfield-font-size": { + "component": "text-field", + "$schema": "https://opensource.adobe.com/spectrum-tokens/schemas/token-types/alias.json", + "value": "{font-size-100}" + }, + "textfield-line-height": { + "component": "text-field", + "$schema": "https://opensource.adobe.com/spectrum-tokens/schemas/token-types/alias.json", + "value": "{line-height-100}" + }, + "textfield-line-height-cjk": { + "component": "text-field", + "$schema": "https://opensource.adobe.com/spectrum-tokens/schemas/token-types/alias.json", + "value": "{cjk-line-height-100}" + }, + "textfield-input-line-height": { + "component": "text-field", + "$schema": "https://opensource.adobe.com/spectrum-tokens/schemas/token-types/alias.json", + "value": "{textfield-height}" + }, + "textfield-character-count-color": { + "component": "text-field", + "$schema": "https://opensource.adobe.com/spectrum-tokens/schemas/token-types/alias.json", + "value": "{neutral-subdued-content-color-default}" + }, + "textfield-character-count-spacing-inline": { + "component": "text-field", + "$schema": "https://opensource.adobe.com/spectrum-tokens/schemas/token-types/alias.json", + "value": "{spacing-200}" + }, + "textfield-character-count-spacing-block": { + "component": "text-field", + "$schema": "https://opensource.adobe.com/spectrum-tokens/schemas/token-types/alias.json", + "value": "{component-bottom-to-text-100}" + }, + "textfield-character-count-spacing-inline-side": { + "component": "text-field", + "$schema": "https://opensource.adobe.com/spectrum-tokens/schemas/token-types/alias.json", + "value": "{side-label-character-count-to-field}" + }, + "textfield-character-count-spacing-block-side": { + "component": "text-field", + "$schema": "https://opensource.adobe.com/spectrum-tokens/schemas/token-types/alias.json", + "value": "{component-top-to-text-100}" + }, + "textfield-focus-indicator-width": { + "component": "text-field", + "$schema": "https://opensource.adobe.com/spectrum-tokens/schemas/token-types/alias.json", + "value": "{focus-indicator-thickness}" + }, + "textfield-focus-indicator-gap": { + "component": "text-field", + "$schema": "https://opensource.adobe.com/spectrum-tokens/schemas/token-types/alias.json", + "value": "{focus-indicator-gap}" + }, + "textfield-background-color": { + "component": "text-field", + "$schema": "https://opensource.adobe.com/spectrum-tokens/schemas/token-types/alias.json", + "value": "{gray-25}", + "sets": { + "whcm": { + "$schema": "https://opensource.adobe.com/spectrum-tokens/schemas/token-types/color.json", + "value": "Canvas" + } + } + }, + "textfield-border-color": { + "component": "text-field", + "$schema": "https://opensource.adobe.com/spectrum-tokens/schemas/token-types/alias.json", + "value": "{gray-300}", + "sets": { + "whcm": { + "$schema": "https://opensource.adobe.com/spectrum-tokens/schemas/token-types/color.json", + "value": "CanvasText" + } + } + }, + "textfield-border-color-hover": { + "component": "text-field", + "$schema": "https://opensource.adobe.com/spectrum-tokens/schemas/token-types/alias.json", + "value": "{gray-400}", + "sets": { + "whcm": { + "$schema": "https://opensource.adobe.com/spectrum-tokens/schemas/token-types/color.json", + "value": "Highlight" + } + } + }, + "textfield-border-color-focus": { + "component": "text-field", + "$schema": "https://opensource.adobe.com/spectrum-tokens/schemas/token-types/alias.json", + "value": "{gray-800}", + "sets": { + "whcm": { + "$schema": "https://opensource.adobe.com/spectrum-tokens/schemas/token-types/color.json", + "value": "Highlight" + } + } + }, + "textfield-border-color-focus-hover": { + "component": "text-field", + "$schema": "https://opensource.adobe.com/spectrum-tokens/schemas/token-types/alias.json", + "value": "{gray-900}", + "sets": { + "whcm": { + "$schema": "https://opensource.adobe.com/spectrum-tokens/schemas/token-types/color.json", + "value": "Highlight" + } + } + }, + "textfield-border-color-keyboard-focus": { + "component": "text-field", + "$schema": "https://opensource.adobe.com/spectrum-tokens/schemas/token-types/alias.json", + "value": "{gray-800}", + "sets": { + "whcm": { + "$schema": "https://opensource.adobe.com/spectrum-tokens/schemas/token-types/color.json", + "value": "Highlight" + } + } + }, + "textfield-text-color-default": { + "component": "text-field", + "$schema": "https://opensource.adobe.com/spectrum-tokens/schemas/token-types/alias.json", + "value": "{neutral-content-color-default}", + "sets": { + "whcm": { + "$schema": "https://opensource.adobe.com/spectrum-tokens/schemas/token-types/color.json", + "value": "CanvasText" + } + } + }, + "textfield-text-color-hover": { + "component": "text-field", + "$schema": "https://opensource.adobe.com/spectrum-tokens/schemas/token-types/alias.json", + "value": "{neutral-content-color-hover}", + "sets": { + "whcm": { + "$schema": "https://opensource.adobe.com/spectrum-tokens/schemas/token-types/color.json", + "value": "CanvasText" + } + } + }, + "textfield-text-color-focus": { + "component": "text-field", + "$schema": "https://opensource.adobe.com/spectrum-tokens/schemas/token-types/alias.json", + "value": "{neutral-content-color-focus}", + "sets": { + "whcm": { + "$schema": "https://opensource.adobe.com/spectrum-tokens/schemas/token-types/color.json", + "value": "CanvasText" + } + } + }, + "textfield-text-color-focus-hover": { + "component": "text-field", + "$schema": "https://opensource.adobe.com/spectrum-tokens/schemas/token-types/alias.json", + "value": "{neutral-content-color-focus-hover}", + "sets": { + "whcm": { + "$schema": "https://opensource.adobe.com/spectrum-tokens/schemas/token-types/color.json", + "value": "CanvasText" + } + } + }, + "textfield-text-color-keyboard-focus": { + "component": "text-field", + "$schema": "https://opensource.adobe.com/spectrum-tokens/schemas/token-types/alias.json", + "value": "{neutral-content-color-key-focus}", + "sets": { + "whcm": { + "$schema": "https://opensource.adobe.com/spectrum-tokens/schemas/token-types/color.json", + "value": "CanvasText" + } + } + }, + "textfield-text-color-readonly": { + "component": "text-field", + "$schema": "https://opensource.adobe.com/spectrum-tokens/schemas/token-types/alias.json", + "value": "{neutral-content-color-default}", + "sets": { + "whcm": { + "$schema": "https://opensource.adobe.com/spectrum-tokens/schemas/token-types/color.json", + "value": "CanvasText" + } + } + }, + "textfield-background-color-disabled": { + "component": "text-field", + "$schema": "https://opensource.adobe.com/spectrum-tokens/schemas/token-types/alias.json", + "value": "{gray-25}", + "sets": { + "whcm": { + "$schema": "https://opensource.adobe.com/spectrum-tokens/schemas/token-types/color.json", + "value": "Canvas" + } + } + }, + "textfield-border-color-disabled": { + "component": "text-field", + "$schema": "https://opensource.adobe.com/spectrum-tokens/schemas/token-types/alias.json", + "value": "{disabled-border-color}", + "sets": { + "whcm": { + "$schema": "https://opensource.adobe.com/spectrum-tokens/schemas/token-types/color.json", + "value": "GrayText" + } + } + }, + "textfield-text-color-disabled": { + "component": "text-field", + "$schema": "https://opensource.adobe.com/spectrum-tokens/schemas/token-types/alias.json", + "value": "{disabled-content-color}", + "sets": { + "whcm": { + "$schema": "https://opensource.adobe.com/spectrum-tokens/schemas/token-types/color.json", + "value": "GrayText" + } + } + }, + "textfield-border-color-invalid-default": { + "component": "text-field", + "$schema": "https://opensource.adobe.com/spectrum-tokens/schemas/token-types/alias.json", + "value": "{negative-border-color-default}", + "sets": { + "whcm": { + "$schema": "https://opensource.adobe.com/spectrum-tokens/schemas/token-types/color.json", + "value": "Highlight" + } + } + }, + "textfield-border-color-invalid-hover": { + "component": "text-field", + "$schema": "https://opensource.adobe.com/spectrum-tokens/schemas/token-types/alias.json", + "value": "{negative-border-color-hover}", + "sets": { + "whcm": { + "$schema": "https://opensource.adobe.com/spectrum-tokens/schemas/token-types/color.json", + "value": "Highlight" + } + } + }, + "textfield-border-color-invalid-focus": { + "component": "text-field", + "$schema": "https://opensource.adobe.com/spectrum-tokens/schemas/token-types/alias.json", + "value": "{negative-border-color-focus}", + "sets": { + "whcm": { + "$schema": "https://opensource.adobe.com/spectrum-tokens/schemas/token-types/color.json", + "value": "Highlight" + } + } + }, + "textfield-border-color-invalid-focus-hover": { + "component": "text-field", + "$schema": "https://opensource.adobe.com/spectrum-tokens/schemas/token-types/alias.json", + "value": "{negative-border-color-focus-hover}", + "sets": { + "whcm": { + "$schema": "https://opensource.adobe.com/spectrum-tokens/schemas/token-types/color.json", + "value": "Highlight" + } + } + }, + "textfield-border-color-invalid-keyboard-focus": { + "component": "text-field", + "$schema": "https://opensource.adobe.com/spectrum-tokens/schemas/token-types/alias.json", + "value": "{negative-border-color-key-focus}", + "sets": { + "whcm": { + "$schema": "https://opensource.adobe.com/spectrum-tokens/schemas/token-types/color.json", + "value": "Highlight" + } + } + }, + "textfield-icon-color-invalid": { + "component": "text-field", + "$schema": "https://opensource.adobe.com/spectrum-tokens/schemas/token-types/alias.json", + "value": "{negative-visual-color}" + }, + "textfield-text-color-invalid": { + "component": "text-field", + "$schema": "https://opensource.adobe.com/spectrum-tokens/schemas/token-types/alias.json", + "value": "{neutral-content-color-default}", + "sets": { + "whcm": { + "$schema": "https://opensource.adobe.com/spectrum-tokens/schemas/token-types/color.json", + "value": "CanvasText" + } + } + }, + "textfield-text-color-valid": { + "component": "text-field", + "$schema": "https://opensource.adobe.com/spectrum-tokens/schemas/token-types/alias.json", + "value": "{neutral-content-color-default}", + "sets": { + "whcm": { + "$schema": "https://opensource.adobe.com/spectrum-tokens/schemas/token-types/color.json", + "value": "CanvasText" + } + } + }, + "textfield-icon-color-valid": { + "component": "text-field", + "$schema": "https://opensource.adobe.com/spectrum-tokens/schemas/token-types/alias.json", + "value": "{positive-visual-color}" + }, + "textfield-focus-indicator-color": { + "component": "text-field", + "$schema": "https://opensource.adobe.com/spectrum-tokens/schemas/token-types/alias.json", + "value": "{focus-indicator-color}", + "sets": { + "whcm": { + "$schema": "https://opensource.adobe.com/spectrum-tokens/schemas/token-types/color.json", + "value": "Highlight" + } + } + }, + "text-area-min-inline-size": { + "component": "text-field", + "$schema": "https://opensource.adobe.com/spectrum-tokens/schemas/token-types/alias.json", + "value": "{text-area-minimum-width}" + }, + "text-area-min-block-size": { + "component": "text-field", + "$schema": "https://opensource.adobe.com/spectrum-tokens/schemas/token-types/alias.json", + "value": "{text-area-minimum-height}" + } +} diff --git a/components/thumbnail/dist/metadata.json b/components/thumbnail/dist/metadata.json index 2a5fa051ef2..01ffda45a64 100644 --- a/components/thumbnail/dist/metadata.json +++ b/components/thumbnail/dist/metadata.json @@ -85,7 +85,6 @@ "--spectrum-focus-indicator-gap", "--spectrum-focus-indicator-thickness", "--spectrum-gray-500", - "--spectrum-gray-800-rgb", "--spectrum-white" ], "passthroughs": ["--mod-opacity-checkerboard-size"], diff --git a/components/thumbnail/index.css b/components/thumbnail/index.css index 3f2ab89f941..0ceac68a024 100644 --- a/components/thumbnail/index.css +++ b/components/thumbnail/index.css @@ -17,8 +17,7 @@ --spectrum-thumbnail-border-radius: var(--spectrum-thumbnail-corner-radius); --spectrum-thumbnail-border-width: var(--spectrum-border-width-100); - /* @todo Refactor with --spectrum-thumbnail-border-color once gray rgb token is no longer necessary to workaround nested rgb color token value using rgba(). */ - --spectrum-thumbnail-border-color: rgba(var(--spectrum-gray-800-rgb), var(--spectrum-thumbnail-border-opacity)); + --spectrum-thumbnail-border-color: color-mix(in sRGB, var(--spectrum-thumbnail-border-color) var(--spectrum-thumbnail-border-opacity), transparent); --spectrum-thumbnail-layer-border-width-inner: var(--spectrum-border-width-400); --spectrum-thumbnail-layer-border-color-inner: var(--spectrum-white); --spectrum-thumbnail-layer-border-width-outer: var(--spectrum-border-width-100); diff --git a/components/thumbnail/tokens.json b/components/thumbnail/tokens.json new file mode 100644 index 00000000000..b1972a20740 --- /dev/null +++ b/components/thumbnail/tokens.json @@ -0,0 +1,102 @@ +{ + "thumbnail-size": { + "component": "thumbnail", + "$schema": "https://opensource.adobe.com/spectrum-tokens/schemas/token-types/alias.json", + "value": "{thumbnail-size-500}" + }, + "thumbnail-border-radius": { + "component": "thumbnail", + "$schema": "https://opensource.adobe.com/spectrum-tokens/schemas/token-types/alias.json", + "value": "{thumbnail-corner-radius}" + }, + "thumbnail-border-width": { + "component": "thumbnail", + "$schema": "https://opensource.adobe.com/spectrum-tokens/schemas/token-types/alias.json", + "value": "{border-width-100}" + }, + "thumbnail-border-color": { + "component": "thumbnail", + "$schema": "https://opensource.adobe.com/spectrum-tokens/schemas/token-types/alias.json", + "value": "color-mix(in sRGB, {thumbnail-border-color} {thumbnail-border-opacity}, transparent)", + "sets": { + "whcm": { + "$schema": "https://opensource.adobe.com/spectrum-tokens/schemas/token-types/color.json", + "value": "CanvasText" + } + } + }, + "thumbnail-layer-border-width-inner": { + "component": "thumbnail", + "$schema": "https://opensource.adobe.com/spectrum-tokens/schemas/token-types/alias.json", + "value": "{border-width-400}" + }, + "thumbnail-layer-border-color-inner": { + "component": "thumbnail", + "$schema": "https://opensource.adobe.com/spectrum-tokens/schemas/token-types/alias.json", + "value": "{white}", + "sets": { + "whcm": { + "$schema": "https://opensource.adobe.com/spectrum-tokens/schemas/token-types/color.json", + "value": "Canvas" + } + } + }, + "thumbnail-layer-border-width-outer": { + "component": "thumbnail", + "$schema": "https://opensource.adobe.com/spectrum-tokens/schemas/token-types/alias.json", + "value": "{border-width-100}" + }, + "thumbnail-layer-border-color-outer": { + "component": "thumbnail", + "$schema": "https://opensource.adobe.com/spectrum-tokens/schemas/token-types/alias.json", + "value": "{gray-500}", + "sets": { + "whcm": { + "$schema": "https://opensource.adobe.com/spectrum-tokens/schemas/token-types/color.json", + "value": "CanvasText" + } + } + }, + "thumbnail-border-width-selected": { + "component": "thumbnail", + "$schema": "https://opensource.adobe.com/spectrum-tokens/schemas/token-types/alias.json", + "value": "{border-width-200}" + }, + "thumbnail-border-color-selected": { + "component": "thumbnail", + "$schema": "https://opensource.adobe.com/spectrum-tokens/schemas/token-types/alias.json", + "value": "{accent-color-800}", + "sets": { + "whcm": { + "$schema": "https://opensource.adobe.com/spectrum-tokens/schemas/token-types/color.json", + "value": "Highlight" + } + } + }, + "thumbnail-focus-indicator-thickness": { + "component": "thumbnail", + "$schema": "https://opensource.adobe.com/spectrum-tokens/schemas/token-types/alias.json", + "value": "{focus-indicator-thickness}" + }, + "thumbnail-focus-indicator-gap": { + "component": "thumbnail", + "$schema": "https://opensource.adobe.com/spectrum-tokens/schemas/token-types/alias.json", + "value": "{focus-indicator-gap}" + }, + "thumbnail-focus-indicator-color": { + "component": "thumbnail", + "$schema": "https://opensource.adobe.com/spectrum-tokens/schemas/token-types/alias.json", + "value": "{focus-indicator-color}", + "sets": { + "whcm": { + "$schema": "https://opensource.adobe.com/spectrum-tokens/schemas/token-types/color.json", + "value": "Highlight" + } + } + }, + "thumbnail-color-opacity-disabled": { + "component": "thumbnail", + "$schema": "https://opensource.adobe.com/spectrum-tokens/schemas/token-types/alias.json", + "value": "{thumbnail-opacity-disabled}" + } +} diff --git a/components/toast/tokens.json b/components/toast/tokens.json new file mode 100644 index 00000000000..dbb89beaa99 --- /dev/null +++ b/components/toast/tokens.json @@ -0,0 +1,137 @@ +{ + "toast-font-family": { + "component": "toast", + "$schema": "https://opensource.adobe.com/spectrum-tokens/schemas/token-types/alias.json", + "value": "{sans-font-family-stack}" + }, + "toast-font-style": { + "component": "toast", + "$schema": "https://opensource.adobe.com/spectrum-tokens/schemas/token-types/alias.json", + "value": "{default-font-style}" + }, + "toast-font-size": { + "component": "toast", + "$schema": "https://opensource.adobe.com/spectrum-tokens/schemas/token-types/alias.json", + "value": "{font-size-100}" + }, + "toast-font-weight": { + "component": "toast", + "$schema": "https://opensource.adobe.com/spectrum-tokens/schemas/token-types/alias.json", + "value": "{regular-font-weight}" + }, + "toast-corner-radius": { + "component": "toast", + "$schema": "https://opensource.adobe.com/spectrum-tokens/schemas/token-types/alias.json", + "value": "{corner-radius-800}" + }, + "toast-icon-block-size": { + "component": "toast", + "$schema": "https://opensource.adobe.com/spectrum-tokens/schemas/token-types/alias.json", + "value": "{workflow-icon-size-100}" + }, + "toast-min-block-size": { + "component": "toast", + "$schema": "https://opensource.adobe.com/spectrum-tokens/schemas/token-types/alias.json", + "value": "{toast-height}" + }, + "toast-max-inline-size": { + "component": "toast", + "$schema": "https://opensource.adobe.com/spectrum-tokens/schemas/token-types/alias.json", + "value": "{toast-maximum-width}" + }, + "toast-line-height": { + "component": "toast", + "$schema": "https://opensource.adobe.com/spectrum-tokens/schemas/token-types/alias.json", + "value": "{line-height-100}" + }, + "toast-line-height-cjk": { + "component": "toast", + "$schema": "https://opensource.adobe.com/spectrum-tokens/schemas/token-types/alias.json", + "value": "{cjk-line-height-100}" + }, + "toast-spacing-toast-to-edge": { + "component": "toast", + "$schema": "https://opensource.adobe.com/spectrum-tokens/schemas/token-types/alias.json", + "value": "{spacing-300}" + }, + "toast-spacing-block-close-button": { + "component": "toast", + "$schema": "https://opensource.adobe.com/spectrum-tokens/schemas/token-types/alias.json", + "value": "{spacing-200}" + }, + "toast-spacing-close-button-to-end-edge": { + "component": "toast", + "$schema": "https://opensource.adobe.com/spectrum-tokens/schemas/token-types/alias.json", + "value": "{spacing-100}" + }, + "toast-spacing-text-to-close-button": { + "component": "toast", + "$schema": "https://opensource.adobe.com/spectrum-tokens/schemas/token-types/alias.json", + "value": "{spacing-300}" + }, + "toast-spacing-edge-to-button-vertical": { + "component": "toast", + "$schema": "https://opensource.adobe.com/spectrum-tokens/schemas/token-types/alias.json", + "value": "{spacing-200}" + }, + "toast-spacing-text-to-button-horizontal": { + "component": "toast", + "$schema": "https://opensource.adobe.com/spectrum-tokens/schemas/token-types/alias.json", + "value": "{spacing-400}" + }, + "toast-spacing-button-to-close-button-horizontal": { + "component": "toast", + "$schema": "https://opensource.adobe.com/spectrum-tokens/schemas/token-types/alias.json", + "value": "{spacing-200}" + }, + "toast-spacing-icon-to-text": { + "component": "toast", + "$schema": "https://opensource.adobe.com/spectrum-tokens/schemas/token-types/alias.json", + "value": "{text-to-visual-300}" + }, + "toast-spacing-start-edge-to-text-and-icon": { + "component": "toast", + "$schema": "https://opensource.adobe.com/spectrum-tokens/schemas/token-types/alias.json", + "value": "{spacing-300}" + }, + "toast-spacing-top-edge-to-icon": { + "component": "toast", + "$schema": "https://opensource.adobe.com/spectrum-tokens/schemas/token-types/alias.json", + "value": "{toast-top-to-workflow-icon}" + }, + "toast-spacing-top-edge-to-text": { + "component": "toast", + "$schema": "https://opensource.adobe.com/spectrum-tokens/schemas/token-types/alias.json", + "value": "{toast-top-to-text}" + }, + "toast-spacing-bottom-edge-to-text": { + "component": "toast", + "$schema": "https://opensource.adobe.com/spectrum-tokens/schemas/token-types/alias.json", + "value": "{toast-bottom-to-text}" + }, + "toast-background-color-default": { + "component": "toast", + "$schema": "https://opensource.adobe.com/spectrum-tokens/schemas/token-types/alias.json", + "value": "{neutral-subdued-background-color-default}" + }, + "toast-negative-background-color-default": { + "component": "toast", + "$schema": "https://opensource.adobe.com/spectrum-tokens/schemas/token-types/alias.json", + "value": "{negative-background-color-default}" + }, + "toast-positive-background-color-default": { + "component": "toast", + "$schema": "https://opensource.adobe.com/spectrum-tokens/schemas/token-types/alias.json", + "value": "{positive-background-color-default}" + }, + "toast-informative-background-color-default": { + "component": "toast", + "$schema": "https://opensource.adobe.com/spectrum-tokens/schemas/token-types/alias.json", + "value": "{informative-background-color-default}" + }, + "toast-text-and-icon-color": { + "component": "toast", + "$schema": "https://opensource.adobe.com/spectrum-tokens/schemas/token-types/alias.json", + "value": "{white}" + } +} diff --git a/components/tooltip/tokens.json b/components/tooltip/tokens.json new file mode 100644 index 00000000000..86ea3006e36 --- /dev/null +++ b/components/tooltip/tokens.json @@ -0,0 +1,151 @@ +{ + "tooltip-tip-square-size": { + "component": "tooltip", + "$schema": "https://opensource.adobe.com/spectrum-tokens/schemas/token-types/scale-set.json", + "note": "To get a square that measures 10px/12px on the diagonal, the sides have to be 8px/10px.", + "sets": { + "desktop": { + "$schema": "https://opensource.adobe.com/spectrum-tokens/schemas/token-types/dimension.json", + "value": "8px" + }, + "mobile": { + "$schema": "https://opensource.adobe.com/spectrum-tokens/schemas/token-types/dimension.json", + "value": "10px" + } + } + }, + "tooltip-animation-duration": { + "component": "tooltip", + "$schema": "https://opensource.adobe.com/spectrum-tokens/schemas/token-types/alias.json", + "value": "{animation-duration-100}" + }, + "tooltip-animation-distance": { + "component": "tooltip", + "$schema": "https://opensource.adobe.com/spectrum-tokens/schemas/token-types/alias.json", + "value": "{spacing-75}" + }, + "tooltip-margin": { + "component": "tooltip", + "$schema": "https://opensource.adobe.com/spectrum-tokens/schemas/token-types/alias.json", + "value": "0px" + }, + "tooltip-height": { + "component": "tooltip", + "$schema": "https://opensource.adobe.com/spectrum-tokens/schemas/token-types/alias.json", + "value": "{component-height-75}" + }, + "tooltip-max-inline-size": { + "component": "tooltip", + "$schema": "https://opensource.adobe.com/spectrum-tokens/schemas/token-types/alias.json", + "value": "{tooltip-maximum-width}" + }, + "tooltip-border-radius": { + "component": "tooltip", + "$schema": "https://opensource.adobe.com/spectrum-tokens/schemas/token-types/alias.json", + "value": "{corner-radius-400}" + }, + "tooltip-font-size": { + "component": "tooltip", + "$schema": "https://opensource.adobe.com/spectrum-tokens/schemas/token-types/alias.json", + "value": "{font-size-75}" + }, + "tooltip-line-height": { + "component": "tooltip", + "$schema": "https://opensource.adobe.com/spectrum-tokens/schemas/token-types/alias.json", + "value": "1.2" + }, + "tooltip-cjk-line-height": { + "component": "tooltip", + "$schema": "https://opensource.adobe.com/spectrum-tokens/schemas/token-types/alias.json", + "value": "{cjk-line-height-100}" + }, + "tooltip-font-weight": { + "component": "tooltip", + "$schema": "https://opensource.adobe.com/spectrum-tokens/schemas/token-types/alias.json", + "value": "{regular-font-weight}" + }, + "tooltip-spacing-inline": { + "component": "tooltip", + "$schema": "https://opensource.adobe.com/spectrum-tokens/schemas/token-types/alias.json", + "value": "{component-edge-to-text-75}" + }, + "tooltip-spacing-block-start": { + "component": "tooltip", + "$schema": "https://opensource.adobe.com/spectrum-tokens/schemas/token-types/alias.json", + "value": "{component-top-to-text-75}" + }, + "tooltip-spacing-block-end": { + "component": "tooltip", + "$schema": "https://opensource.adobe.com/spectrum-tokens/schemas/token-types/alias.json", + "value": "{component-bottom-to-text-75}" + }, + "tooltip-content-color": { + "component": "tooltip", + "$schema": "https://opensource.adobe.com/spectrum-tokens/schemas/token-types/alias.json", + "value": "{gray-25}" + }, + "tooltip-background-color-default": { + "component": "tooltip", + "$schema": "https://opensource.adobe.com/spectrum-tokens/schemas/token-types/alias.json", + "value": "{neutral-background-color-default}", + "sets": { + "whcm": { + "$schema": "https://opensource.adobe.com/spectrum-tokens/schemas/token-types/color.json", + "value": "CanvasText" + } + } + }, + "tooltip-background-color-informative": { + "component": "tooltip", + "$schema": "https://opensource.adobe.com/spectrum-tokens/schemas/token-types/alias.json", + "value": "{informative-background-color-default}", + "sets": { + "whcm": { + "$schema": "https://opensource.adobe.com/spectrum-tokens/schemas/token-types/color.json", + "value": "CanvasText" + } + } + }, + "tooltip-background-color-negative": { + "component": "tooltip", + "$schema": "https://opensource.adobe.com/spectrum-tokens/schemas/token-types/alias.json", + "value": "{negative-background-color-default}", + "sets": { + "whcm": { + "$schema": "https://opensource.adobe.com/spectrum-tokens/schemas/token-types/color.json", + "value": "CanvasText" + } + } + }, + "tooltip-tip-block-size": { + "component": "tooltip", + "$schema": "https://opensource.adobe.com/spectrum-tokens/schemas/token-types/alias.json", + "value": "{tooltip-tip-height}" + }, + "tooltip-tip-height-percentage": { + "component": "tooltip", + "$schema": "https://opensource.adobe.com/spectrum-tokens/schemas/token-types/alias.json", + "value": "100%" + }, + "tooltip-tip-antialiasing-inset": { + "component": "tooltip", + "$schema": "https://opensource.adobe.com/spectrum-tokens/schemas/token-types/alias.json", + "value": "0.5px" + }, + "tooltip-pointer-corner-spacing": { + "component": "tooltip", + "$schema": "https://opensource.adobe.com/spectrum-tokens/schemas/token-types/alias.json", + "value": "{tooltip-border-radius}" + }, + "tooltip-border-width": { + "component": "tooltip", + "$schema": "https://opensource.adobe.com/spectrum-tokens/schemas/token-types/alias.json", + "value": "0px", + "sets": { + "whcm": { + "$schema": "https://opensource.adobe.com/spectrum-tokens/schemas/token-types/dimension.json", + "value": "1px" + } + } + } +} diff --git a/components/tray/tokens.json b/components/tray/tokens.json new file mode 100644 index 00000000000..756477b2b09 --- /dev/null +++ b/components/tray/tokens.json @@ -0,0 +1,48 @@ +{ + "tray-max-inline-size": { + "component": "tray", + "$schema": "https://opensource.adobe.com/spectrum-tokens/schemas/token-types/alias.json", + "value": "375px" + }, + "tray-spacing-edge-to-tray-safe-zone": { + "component": "tray", + "$schema": "https://opensource.adobe.com/spectrum-tokens/schemas/token-types/alias.json", + "value": "64px" + }, + "tray-entry-animation-delay": { + "component": "tray", + "$schema": "https://opensource.adobe.com/spectrum-tokens/schemas/token-types/alias.json", + "value": "160ms" + }, + "tray-entry-animation-duration": { + "component": "tray", + "$schema": "https://opensource.adobe.com/spectrum-tokens/schemas/token-types/alias.json", + "value": "{animation-duration-500}" + }, + "tray-exit-animation-delay": { + "component": "tray", + "$schema": "https://opensource.adobe.com/spectrum-tokens/schemas/token-types/alias.json", + "value": "0ms" + }, + "tray-exit-animation-duration": { + "component": "tray", + "$schema": "https://opensource.adobe.com/spectrum-tokens/schemas/token-types/alias.json", + "value": "{animation-duration-100}" + }, + "tray-corner-radius": { + "component": "tray", + "$schema": "https://opensource.adobe.com/spectrum-tokens/schemas/token-types/alias.json", + "value": "{corner-radius-100}" + }, + "tray-background-color": { + "component": "tray", + "$schema": "https://opensource.adobe.com/spectrum-tokens/schemas/token-types/alias.json", + "value": "{background-layer-2-color}", + "sets": { + "whcm": { + "$schema": "https://opensource.adobe.com/spectrum-tokens/schemas/token-types/color.json", + "value": "Canvas" + } + } + } +} diff --git a/components/treeview/tokens.json b/components/treeview/tokens.json new file mode 100644 index 00000000000..4d7a717a33c --- /dev/null +++ b/components/treeview/tokens.json @@ -0,0 +1,366 @@ +{ + "treeview-indicator-inset-block-start": { + "component": "treeview", + "$schema": "https://opensource.adobe.com/spectrum-tokens/schemas/token-types/scale-set.json", + "sets": { + "desktop": { + "$schema": "https://opensource.adobe.com/spectrum-tokens/schemas/token-types/dimension.json", + "value": "5px" + }, + "mobile": { + "$schema": "https://opensource.adobe.com/spectrum-tokens/schemas/token-types/dimension.json", + "value": "6px" + } + } + }, + "treeview-item-background-color-quiet-selected": { + "component": "treeview", + "$schema": "https://opensource.adobe.com/spectrum-tokens/schemas/token-types/color-set.json", + "sets": { + "dark": { + "$schema": "https://opensource.adobe.com/spectrum-tokens/schemas/token-types/color.json", + "value": "color-mix(in sRGB, {gray-900} 7%, transparent)" + }, + "light": { + "$schema": "https://opensource.adobe.com/spectrum-tokens/schemas/token-types/color.json", + "value": "color-mix(in sRGB, {gray-900} 6%, transparent)" + } + } + }, + "treeview-item-background-color-selected": { + "component": "treeview", + "$schema": "https://opensource.adobe.com/spectrum-tokens/schemas/token-types/color-set.json", + "sets": { + "dark": { + "$schema": "https://opensource.adobe.com/spectrum-tokens/schemas/token-types/color.json", + "value": "color-mix(in sRGB, {blue-800} 15%, transparent)" + }, + "light": { + "$schema": "https://opensource.adobe.com/spectrum-tokens/schemas/token-types/color.json", + "value": "color-mix(in sRGB, {blue-900} 15%, transparent)" + }, + "whcm": { + "$schema": "https://opensource.adobe.com/spectrum-tokens/schemas/token-types/color.json", + "value": "Highlight" + } + } + }, + "treeview-item-indentation-extra-large": { + "component": "treeview", + "$schema": "https://opensource.adobe.com/spectrum-tokens/schemas/token-types/scale-set.json", + "sets": { + "desktop": { + "$schema": "https://opensource.adobe.com/spectrum-tokens/schemas/token-types/alias.json", + "value": "{spacing-400}" + }, + "mobile": { + "$schema": "https://opensource.adobe.com/spectrum-tokens/schemas/token-types/dimension.json", + "value": "30px" + } + } + }, + "treeview-item-indentation-large": { + "component": "treeview", + "$schema": "https://opensource.adobe.com/spectrum-tokens/schemas/token-types/scale-set.json", + "sets": { + "desktop": { + "$schema": "https://opensource.adobe.com/spectrum-tokens/schemas/token-types/dimension.json", + "value": "20px" + }, + "mobile": { + "$schema": "https://opensource.adobe.com/spectrum-tokens/schemas/token-types/dimension.json", + "value": "25px" + } + } + }, + "treeview-item-indentation-medium": { + "component": "treeview", + "$schema": "https://opensource.adobe.com/spectrum-tokens/schemas/token-types/scale-set.json", + "sets": { + "desktop": { + "$schema": "https://opensource.adobe.com/spectrum-tokens/schemas/token-types/dimension.json", + "value": "{spacing-300}" + }, + "mobile": { + "$schema": "https://opensource.adobe.com/spectrum-tokens/schemas/token-types/dimension.json", + "value": "20px" + } + } + }, + "treeview-item-indentation-small": { + "component": "treeview", + "$schema": "https://opensource.adobe.com/spectrum-tokens/schemas/token-types/scale-set.json", + "sets": { + "desktop": { + "$schema": "https://opensource.adobe.com/spectrum-tokens/schemas/token-types/alias.json", + "value": "{spacing-200}" + }, + "mobile": { + "$schema": "https://opensource.adobe.com/spectrum-tokens/schemas/token-types/dimension.json", + "value": "15px" + } + } + }, + "treeview-item-min-block-size-thumbnail-offset-medium": { + "component": "treeview", + "$schema": "https://opensource.adobe.com/spectrum-tokens/schemas/token-types/scale-set.json", + "sets": { + "desktop": { + "$schema": "https://opensource.adobe.com/spectrum-tokens/schemas/token-types/dimension.json", + "value": "0px" + }, + "mobile": { + "$schema": "https://opensource.adobe.com/spectrum-tokens/schemas/token-types/dimension.json", + "value": "2px" + } + } + }, + "treeview-item-background-color-hover": { + "component": "treeview", + "$schema": "https://opensource.adobe.com/spectrum-tokens/schemas/token-types/alias.json", + "value": "{gray-100}" + }, + "treeview-item-background-color-focus": { + "component": "treeview", + "$schema": "https://opensource.adobe.com/spectrum-tokens/schemas/token-types/alias.json", + "value": "{gray-100}", + "sets": { + "whcm": { + "$schema": "https://opensource.adobe.com/spectrum-tokens/schemas/token-types/color.json", + "value": "Highlight" + } + } + }, + "treeview-item-background-color-disabled": { + "component": "treeview", + "$schema": "https://opensource.adobe.com/spectrum-tokens/schemas/token-types/alias.json", + "value": "transparent", + "sets": { + "whcm": { + "$schema": "https://opensource.adobe.com/spectrum-tokens/schemas/token-types/color.json", + "value": "Canvas" + } + } + }, + "treeview-item-border-size": { + "component": "treeview", + "$schema": "https://opensource.adobe.com/spectrum-tokens/schemas/token-types/alias.json", + "value": "{border-width-200}" + }, + "treeview-item-border-size-selected": { + "component": "treeview", + "$schema": "https://opensource.adobe.com/spectrum-tokens/schemas/token-types/alias.json", + "value": "1px" + }, + "treeview-item-border-radius": { + "component": "treeview", + "$schema": "https://opensource.adobe.com/spectrum-tokens/schemas/token-types/alias.json", + "value": "0px" + }, + "treeview-item-border-color-selected": { + "component": "treeview", + "$schema": "https://opensource.adobe.com/spectrum-tokens/schemas/token-types/alias.json", + "value": "{blue-800}", + "sets": { + "whcm": { + "$schema": "https://opensource.adobe.com/spectrum-tokens/schemas/token-types/color.json", + "value": "Highlight" + } + } + }, + "treeview-item-border-color-focus": { + "component": "treeview", + "$schema": "https://opensource.adobe.com/spectrum-tokens/schemas/token-types/alias.json", + "value": "{blue-700}", + "sets": { + "whcm": { + "$schema": "https://opensource.adobe.com/spectrum-tokens/schemas/token-types/color.json", + "value": "CanvasText" + } + } + }, + "treeview-item-border-color-quiet-selected": { + "component": "treeview", + "$schema": "https://opensource.adobe.com/spectrum-tokens/schemas/token-types/alias.json", + "value": "transparent" + }, + "treeview-item-icon-gap": { + "component": "treeview", + "$schema": "https://opensource.adobe.com/spectrum-tokens/schemas/token-types/alias.json", + "value": "{text-to-visual-75}" + }, + "treeview-item-icon-color": { + "component": "treeview", + "$schema": "https://opensource.adobe.com/spectrum-tokens/schemas/token-types/alias.json", + "value": "{gray-700}", + "sets": { + "whcm": { + "$schema": "https://opensource.adobe.com/spectrum-tokens/schemas/token-types/color.json", + "value": "LinkText" + } + } + }, + "treeview-item-icon-color-hover": { + "component": "treeview", + "$schema": "https://opensource.adobe.com/spectrum-tokens/schemas/token-types/alias.json", + "value": "{gray-900}" + }, + "treeview-item-icon-color-focus": { + "component": "treeview", + "$schema": "https://opensource.adobe.com/spectrum-tokens/schemas/token-types/alias.json", + "value": "{gray-900}", + "sets": { + "whcm": { + "$schema": "https://opensource.adobe.com/spectrum-tokens/schemas/token-types/color.json", + "value": "HighlightText" + } + } + }, + "treeview-item-icon-color-selected": { + "component": "treeview", + "$schema": "https://opensource.adobe.com/spectrum-tokens/schemas/token-types/alias.json", + "value": "{gray-900}", + "sets": { + "whcm": { + "$schema": "https://opensource.adobe.com/spectrum-tokens/schemas/token-types/color.json", + "value": "HighlightText" + } + } + }, + "treeview-item-icon-color-disabled": { + "component": "treeview", + "$schema": "https://opensource.adobe.com/spectrum-tokens/schemas/token-types/alias.json", + "value": "{disabled-content-color}", + "sets": { + "whcm": { + "$schema": "https://opensource.adobe.com/spectrum-tokens/schemas/token-types/color.json", + "value": "GrayText" + } + } + }, + "treeview-item-text-color": { + "component": "treeview", + "$schema": "https://opensource.adobe.com/spectrum-tokens/schemas/token-types/alias.json", + "value": "{neutral-content-color-default}", + "sets": { + "whcm": { + "$schema": "https://opensource.adobe.com/spectrum-tokens/schemas/token-types/color.json", + "value": "LinkText" + } + } + }, + "treeview-item-text-color-selected": { + "component": "treeview", + "$schema": "https://opensource.adobe.com/spectrum-tokens/schemas/token-types/alias.json", + "value": "{gray-900}", + "sets": { + "whcm": { + "$schema": "https://opensource.adobe.com/spectrum-tokens/schemas/token-types/color.json", + "value": "HighlightText" + } + } + }, + "treeview-item-text-color-disabled": { + "component": "treeview", + "$schema": "https://opensource.adobe.com/spectrum-tokens/schemas/token-types/alias.json", + "value": "{gray-500}", + "sets": { + "whcm": { + "$schema": "https://opensource.adobe.com/spectrum-tokens/schemas/token-types/color.json", + "value": "GrayText" + } + } + }, + "treeview-item-text-color-focus": { + "component": "treeview", + "$schema": "https://opensource.adobe.com/spectrum-tokens/schemas/token-types/alias.json", + "value": "{gray-900}", + "sets": { + "whcm": { + "$schema": "https://opensource.adobe.com/spectrum-tokens/schemas/token-types/color.json", + "value": "HighlightText" + } + } + }, + "treeview-item-text-color-hover": { + "component": "treeview", + "$schema": "https://opensource.adobe.com/spectrum-tokens/schemas/token-types/alias.json", + "value": "{gray-900}" + }, + "treeview-indicator-animation-duration": { + "component": "treeview", + "$schema": "https://opensource.adobe.com/spectrum-tokens/schemas/token-types/alias.json", + "value": "{animation-duration-100}" + }, + "treeview-item-min-block-size": { + "component": "treeview", + "$schema": "https://opensource.adobe.com/spectrum-tokens/schemas/token-types/alias.json", + "value": "{treeview-item-sized-min-block-size}" + }, + "treeview-font-size": { + "component": "treeview", + "$schema": "https://opensource.adobe.com/spectrum-tokens/schemas/token-types/alias.json", + "value": "{font-size-100}" + }, + "treeview-item-sized-min-block-size": { + "component": "treeview", + "$schema": "https://opensource.adobe.com/spectrum-tokens/schemas/token-types/alias.json", + "value": "{component-height-100}" + }, + "treeview-item-sized-indentation": { + "component": "treeview", + "$schema": "https://opensource.adobe.com/spectrum-tokens/schemas/token-types/alias.json", + "value": "{treeview-item-indentation-medium}" + }, + "treeview-heading-bottom-to-text": { + "component": "treeview", + "$schema": "https://opensource.adobe.com/spectrum-tokens/schemas/token-types/alias.json", + "value": "{component-edge-to-text-100}" + }, + "treeview-item-padding-inline-start": { + "component": "treeview", + "$schema": "https://opensource.adobe.com/spectrum-tokens/schemas/token-types/alias.json", + "value": "{component-height-100}" + }, + "treeview-item-padding-inline-end": { + "component": "treeview", + "$schema": "https://opensource.adobe.com/spectrum-tokens/schemas/token-types/alias.json", + "value": "{component-edge-to-text-100}" + }, + "treeview-indicator-margin-inline-start": { + "component": "treeview", + "$schema": "https://opensource.adobe.com/spectrum-tokens/schemas/token-types/alias.json", + "value": "calc(-1 * {component-height-100})" + }, + "treeview-indicator-padding": { + "component": "treeview", + "$schema": "https://opensource.adobe.com/spectrum-tokens/schemas/token-types/alias.json", + "value": "{disclosure-indicator-top-to-disclosure-icon-medium}" + }, + "treeview-item-min-block-size-thumbnail-offset": { + "component": "treeview", + "$schema": "https://opensource.adobe.com/spectrum-tokens/schemas/token-types/alias.json", + "value": "0" + }, + "treeview-item-indentation": { + "component": "treeview", + "$schema": "https://opensource.adobe.com/spectrum-tokens/schemas/token-types/alias.json", + "value": "{treeview-item-sized-indentation}" + }, + "treeview-section-spacing": { + "component": "treeview", + "$schema": "https://opensource.adobe.com/spectrum-tokens/schemas/token-types/alias.json", + "value": "{treeview-item-indentation}" + }, + "treeview-heading-color": { + "component": "treeview", + "$schema": "https://opensource.adobe.com/spectrum-tokens/schemas/token-types/alias.json", + "value": "{heading-color}", + "sets": { + "whcm": { + "$schema": "https://opensource.adobe.com/spectrum-tokens/schemas/token-types/color.json", + "value": "CanvasText" + } + } + } +} diff --git a/components/typography/stories/typography.stories.js b/components/typography/stories/typography.stories.js index ac19708ed4f..c6595cb6a24 100644 --- a/components/typography/stories/typography.stories.js +++ b/components/typography/stories/typography.stories.js @@ -4,16 +4,16 @@ import { size } from "@spectrum-css/preview/types"; import metadata from "../dist/metadata.json"; import packageJson from "../package.json"; import { - DocsBodyVariants, - DocsCodeVariants, - DocsDetailVariants, - DocsHeadingBodyPairing, - DocsHeadingVariants, - DocsInternationalizedBodyVariants, - DocsInternationalizedCodeVariants, - DocsInternationalizedDetailVariants, - DocsInternationalizedHeadingBodyPairing, - DocsInternationalizedHeadingVariants, Template + DocsBodyVariants, + DocsCodeVariants, + DocsDetailVariants, + DocsHeadingBodyPairing, + DocsHeadingVariants, + DocsInternationalizedBodyVariants, + DocsInternationalizedCodeVariants, + DocsInternationalizedDetailVariants, + DocsInternationalizedHeadingBodyPairing, + DocsInternationalizedHeadingVariants, Template } from "./template.js"; import { TypographyGroup } from "./typography.test.js"; diff --git a/components/typography/tokens.json b/components/typography/tokens.json new file mode 100644 index 00000000000..e485ec2bc30 --- /dev/null +++ b/components/typography/tokens.json @@ -0,0 +1,128 @@ +{ + "heading-font-size": { + "component": "typography", + "subcomponent": "heading", + "$schema": "https://opensource.adobe.com/spectrum-tokens/schemas/token-types/alias.json", + "value": "{heading-size-m}" + }, + "heading-cjk-font-size": { + "component": "typography", + "subcomponent": "heading", + "$schema": "https://opensource.adobe.com/spectrum-tokens/schemas/token-types/alias.json", + "value": "{heading-cjk-size-m}" + }, + "heading-sans-serif-font-family": { + "component": "typography", + "subcomponent": "heading", + "$schema": "https://opensource.adobe.com/spectrum-tokens/schemas/token-types/alias.json", + "value": "{sans-font-family-stack}" + }, + "heading-serif-font-family": { + "component": "typography", + "subcomponent": "heading", + "$schema": "https://opensource.adobe.com/spectrum-tokens/schemas/token-types/alias.json", + "value": "{serif-font-family-stack}" + }, + "heading-cjk-font-family": { + "component": "typography", + "subcomponent": "heading", + "$schema": "https://opensource.adobe.com/spectrum-tokens/schemas/token-types/alias.json", + "value": "{cjk-font-family-stack}" + }, + "heading-cjk-letter-spacing": { + "component": "typography", + "subcomponent": "heading", + "$schema": "https://opensource.adobe.com/spectrum-tokens/schemas/token-types/alias.json", + "value": "{cjk-letter-spacing}" + }, + "heading-font-color": { + "component": "typography", + "subcomponent": "heading", + "$schema": "https://opensource.adobe.com/spectrum-tokens/schemas/token-types/alias.json", + "value": "{heading-color}", + "sets": { + "whcm": { + "$schema": "https://opensource.adobe.com/spectrum-tokens/schemas/token-types/color.json", + "value": "Text" + } + } + }, + "heading-margin-start": { + "component": "typography", + "subcomponent": "heading", + "$schema": "https://opensource.adobe.com/spectrum-tokens/schemas/token-types/alias.json", + "value": "calc({heading-font-size} * {heading-margin-top-multiplier})" + }, + "heading-margin-end": { + "component": "typography", + "subcomponent": "heading", + "$schema": "https://opensource.adobe.com/spectrum-tokens/schemas/token-types/alias.json", + "value": "calc({heading-font-size} * {heading-margin-bottom-multiplier})" + }, + "body-font-size": { + "component": "typography", + "subcomponent": "body", + "$schema": "https://opensource.adobe.com/spectrum-tokens/schemas/token-types/alias.json", + "value": "{body-size-m}" + }, + "body-font-color": { + "component": "typography", + "subcomponent": "body", + "$schema": "https://opensource.adobe.com/spectrum-tokens/schemas/token-types/alias.json", + "value": "{body-color}", + "sets": { + "whcm": { + "$schema": "https://opensource.adobe.com/spectrum-tokens/schemas/token-types/color.json", + "value": "Text" + } + } + }, + "body-margin-end": { + "component": "typography", + "subcomponent": "body", + "$schema": "https://opensource.adobe.com/spectrum-tokens/schemas/token-types/alias.json", + "value": "calc({body-font-size} * {body-margin-multiplier})" + }, + "detail-font-size": { + "component": "typography", + "subcomponent": "detail", + "$schema": "https://opensource.adobe.com/spectrum-tokens/schemas/token-types/alias.json", + "value": "{detail-size-m}" + }, + "detail-font-color": { + "component": "typography", + "subcomponent": "detail", + "$schema": "https://opensource.adobe.com/spectrum-tokens/schemas/token-types/alias.json", + "value": "{detail-color}", + "sets": { + "whcm": { + "$schema": "https://opensource.adobe.com/spectrum-tokens/schemas/token-types/color.json", + "value": "Text" + } + } + }, + "detail-margin-start": { + "component": "typography", + "subcomponent": "detail", + "$schema": "https://opensource.adobe.com/spectrum-tokens/schemas/token-types/alias.json", + "value": "calc({detail-font-size} * {detail-margin-top-multiplier})" + }, + "detail-margin-end": { + "component": "typography", + "subcomponent": "detail", + "$schema": "https://opensource.adobe.com/spectrum-tokens/schemas/token-types/alias.json", + "value": "calc({detail-font-size} * {detail-margin-bottom-multiplier})" + }, + "code-font-color": { + "component": "typography", + "subcomponent": "code", + "$schema": "https://opensource.adobe.com/spectrum-tokens/schemas/token-types/alias.json", + "value": "{code-color}", + "sets": { + "whcm": { + "$schema": "https://opensource.adobe.com/spectrum-tokens/schemas/token-types/color.json", + "value": "Text" + } + } + } +} diff --git a/components/underlay/dist/metadata.json b/components/underlay/dist/metadata.json index 21a3e4aa1d0..2fd93c75a3a 100644 --- a/components/underlay/dist/metadata.json +++ b/components/underlay/dist/metadata.json @@ -27,7 +27,7 @@ "--spectrum-animation-duration-600", "--spectrum-animation-ease-in", "--spectrum-animation-ease-out", - "--spectrum-black-rgb", + "--spectrum-overlay-color", "--spectrum-overlay-opacity" ], "passthroughs": [], diff --git a/components/underlay/index.css b/components/underlay/index.css index 42effdc418a..8fba6068880 100644 --- a/components/underlay/index.css +++ b/components/underlay/index.css @@ -20,8 +20,7 @@ /* @deprecated --mod-overlay-animation-duration-opened in favor of --mod-underlay-background-entry-animation-delay */ --spectrum-underlay-background-entry-animation-delay: var(--mod-underlay-background-entry-animation-delay, var(--mod-overlay-animation-duration-opened, var(--spectrum-animation-duration-0))); - /* TODO update to --spectrum-overlay-color token once an RGB stripped value is available */ - --spectrum-underlay-background-color: var(--mod-underlay-background-color, rgba(var(--spectrum-black-rgb), var(--spectrum-overlay-opacity))); + --spectrum-underlay-background-color: var(--mod-underlay-background-color, color-mix(in sRGB, var(--spectrum-overlay-color) var(--spectrum-overlay-opacity), transparent)); pointer-events: none; visibility: hidden; diff --git a/components/underlay/tokens.json b/components/underlay/tokens.json new file mode 100644 index 00000000000..4a13c1eefda --- /dev/null +++ b/components/underlay/tokens.json @@ -0,0 +1,37 @@ +{ + "underlay-background-exit-animation-duration": { + "component": "underlay", + "$schema": "https://opensource.adobe.com/spectrum-tokens/schemas/token-types/alias.json", + "value": "{animation-duration-300}" + }, + "underlay-background-exit-animation-ease": { + "component": "underlay", + "$schema": "https://opensource.adobe.com/spectrum-tokens/schemas/token-types/alias.json", + "value": "{animation-ease-in}" + }, + "underlay-background-exit-animation-delay": { + "component": "underlay", + "$schema": "https://opensource.adobe.com/spectrum-tokens/schemas/token-types/alias.json", + "value": "{animation-duration-200}" + }, + "underlay-background-entry-animation-duration": { + "component": "underlay", + "$schema": "https://opensource.adobe.com/spectrum-tokens/schemas/token-types/alias.json", + "value": "{animation-duration-600}" + }, + "underlay-background-entry-animation-ease": { + "component": "underlay", + "$schema": "https://opensource.adobe.com/spectrum-tokens/schemas/token-types/alias.json", + "value": "{animation-ease-out}" + }, + "underlay-background-entry-animation-delay": { + "component": "underlay", + "$schema": "https://opensource.adobe.com/spectrum-tokens/schemas/token-types/alias.json", + "value": "{animation-duration-0}" + }, + "underlay-background-color": { + "component": "underlay", + "$schema": "https://opensource.adobe.com/spectrum-tokens/schemas/token-types/alias.json", + "value": "color-mix(in sRGB, {overlay-color} {overlay-opacity}, transparent)" + } +} diff --git a/components/well/dist/metadata.json b/components/well/dist/metadata.json index c9fdd7f6da1..56097c6784d 100644 --- a/components/well/dist/metadata.json +++ b/components/well/dist/metadata.json @@ -24,8 +24,8 @@ "global": [ "--spectrum-body-color", "--spectrum-border-width-100", - "--spectrum-gray-1000-rgb", - "--spectrum-gray-800-rgb" + "--spectrum-gray-1000", + "--spectrum-gray-800" ], "passthroughs": [], "high-contrast": [] diff --git a/components/well/index.css b/components/well/index.css index 1aabb0c2b55..15f0394d6a0 100644 --- a/components/well/index.css +++ b/components/well/index.css @@ -12,11 +12,11 @@ */ .spectrum-Well { - --spectrum-well-border-color: rgba(var(--spectrum-gray-1000-rgb), 0.05); + --spectrum-well-border-color: color-mix(in sRGB, var(--spectrum-gray-1000) 5%, transparent); --spectrum-well-border-width: var(--spectrum-border-width-100); --spectrum-well-content-color: var(--spectrum-body-color); - --spectrum-well-background-color: rgba(var(--spectrum-gray-800-rgb), 0.02); + --spectrum-well-background-color: color-mix(in sRGB, var(--spectrum-gray-800) 2%, transparent); text-align: start; display: block; diff --git a/components/well/tokens.json b/components/well/tokens.json new file mode 100644 index 00000000000..35ac9dc9d76 --- /dev/null +++ b/components/well/tokens.json @@ -0,0 +1,78 @@ +{ + "well-border-radius": { + "component": "well", + "$schema": "https://opensource.adobe.com/spectrum-tokens/schemas/token-types/scale-set.json", + "sets": { + "desktop": { + "$schema": "https://opensource.adobe.com/spectrum-tokens/schemas/token-types/alias.json", + "value": "{spacing-75}" + }, + "mobile": { + "$schema": "https://opensource.adobe.com/spectrum-tokens/schemas/token-types/dimension.json", + "value": "5px" + } + } + }, + "well-margin-top": { + "component": "well", + "$schema": "https://opensource.adobe.com/spectrum-tokens/schemas/token-types/scale-set.json", + "sets": { + "desktop": { + "$schema": "https://opensource.adobe.com/spectrum-tokens/schemas/token-types/alias.json", + "value": "{spacing-75}" + }, + "mobile": { + "$schema": "https://opensource.adobe.com/spectrum-tokens/schemas/token-types/dimension.json", + "value": "5px" + } + } + }, + "well-min-width": { + "component": "well", + "$schema": "https://opensource.adobe.com/spectrum-tokens/schemas/token-types/scale-set.json", + "sets": { + "desktop": { + "$schema": "https://opensource.adobe.com/spectrum-tokens/schemas/token-types/dimension.json", + "value": "240px" + }, + "mobile": { + "$schema": "https://opensource.adobe.com/spectrum-tokens/schemas/token-types/dimension.json", + "value": "300px" + } + } + }, + "well-padding": { + "component": "well", + "$schema": "https://opensource.adobe.com/spectrum-tokens/schemas/token-types/scale-set.json", + "sets": { + "desktop": { + "$schema": "https://opensource.adobe.com/spectrum-tokens/schemas/token-types/alias.json", + "value": "{spacing-300}" + }, + "mobile": { + "$schema": "https://opensource.adobe.com/spectrum-tokens/schemas/token-types/dimension.json", + "value": "20px" + } + } + }, + "well-border-color": { + "component": "well", + "$schema": "https://opensource.adobe.com/spectrum-tokens/schemas/token-types/alias.json", + "value": "color-mix(in sRGB, {gray-1000} 5%, transparent)" + }, + "well-border-width": { + "component": "well", + "$schema": "https://opensource.adobe.com/spectrum-tokens/schemas/token-types/alias.json", + "value": "{border-width-100}" + }, + "well-content-color": { + "component": "well", + "$schema": "https://opensource.adobe.com/spectrum-tokens/schemas/token-types/alias.json", + "value": "{body-color}" + }, + "well-background-color": { + "component": "well", + "$schema": "https://opensource.adobe.com/spectrum-tokens/schemas/token-types/alias.json", + "value": "color-mix(in sRGB, {gray-800} 2%, transparent)" + } +} diff --git a/nx.json b/nx.json index bf1055ed8b7..b0241c7be2d 100644 --- a/nx.json +++ b/nx.json @@ -109,7 +109,7 @@ "dependsOn": ["build", { "projects": ["bundle"], "target": "build" }], "executor": "nx:run-commands", "inputs": [ - "{workspaceRoot}/tasks/compare-compiled-output.js", + "{workspaceRoot}/tasks/component-compare.js", { "dependentTasksOutputFiles": "dist/*.css", "transitive": true }, { "externalDependencies": [ @@ -129,7 +129,7 @@ ], "options": { "commands": [ - "node --no-warnings ./tasks/compare-compiled-output.js $NX_TASK_TARGET_PROJECT" + "node --no-warnings ./tasks/component-compare.js $NX_TASK_TARGET_PROJECT" ] }, "outputs": ["{workspaceRoot}/.diff-output/**"] diff --git a/package.json b/package.json index 940e43019d4..2626da2af3c 100644 --- a/package.json +++ b/package.json @@ -70,8 +70,8 @@ "@changesets/cli": "^2.29.5", "@commitlint/cli": "^19.8.1", "@commitlint/config-conventional": "^19.8.1", + "@csstools/postcss-design-tokens": "^4.0.5", "@nx/devkit": "^21.2.3", - "@spectrum-tools/postcss-rgb-mapping": "1.1.0", "@yarnpkg/types": "^4.0.1", "at-rule-packer": "^0.5.0", "autoprefixer": "^10.4.21", diff --git a/plugins/postcss-rgb-mapping/CHANGELOG.md b/plugins/postcss-rgb-mapping/CHANGELOG.md deleted file mode 100644 index 9fd32bb6fba..00000000000 --- a/plugins/postcss-rgb-mapping/CHANGELOG.md +++ /dev/null @@ -1,38 +0,0 @@ -# Change Log - -## 1.1.0 - -### Minor Changes - -- [#3452](https://github.com/adobe/spectrum-css/pull/3452) [`287cff8`](https://github.com/adobe/spectrum-css/commit/287cff82b7706f0f56d6d37f48e1d9c60a6df4b9) Thanks [@marissahuysentruyt](https://github.com/marissahuysentruyt)! - Adds new functionality to better handle tokens that reference other transparent tokens. - - When a custom properties below is defined as another, specifically "transparent," variable, such as: - - ```css - --disabled-static-white-background-color: var( - --spectrum-transparent-white-100 - ); - ``` - - ...the plugin can now convert this single custom property into its `-rgb` and `-opacity` postfixed variables, that each correspond to the `-rgb` and `-opacity` variables of the definition's transparent token. It then reassembles the original, using and referencing these newly created variables. - - ```css - --disabled-static-white-background-color-rgb: var( - --spectrum-transparent-white-100-rgb - ); - --disabled-static-white-background-color-opacity: var( - --spectrum-transparent-white-100-opacity - ); - --disabled-static-white-background-color: rgba( - var(--disabled-static-white-background-color-rgb), - var(--disabled-static-white-background-color-opacity) - ); - ``` - -## 1.0.0 - -### Major Changes - -📝 [#3502](https://github.com/adobe/spectrum-css/pull/3502) [`562396e`](https://github.com/adobe/spectrum-css/commit/562396eaf21769341f78ea3761393b65f00e751b) Thanks [@castastrophe](https://github.com/castastrophe)! - -- Migrated the `postcss-rgb-mapping` package into the new `@spectrum-tools` namespace so updates may shipped and shared among other projects. diff --git a/plugins/postcss-rgb-mapping/README.md b/plugins/postcss-rgb-mapping/README.md deleted file mode 100644 index 1f7016a514c..00000000000 --- a/plugins/postcss-rgb-mapping/README.md +++ /dev/null @@ -1,89 +0,0 @@ -# postcss-rgb-mapping - -> Remaps rgb(a) values to an `rgb` postfixed variable. If an opacity is found, creates a separate `opacity` postfixed variable. -> Also remaps values that reference a transparent token (for example, `transparent-black-300`) to `rgb` and `opacity` postfixed variables. - -## Installation - -```sh -yarn add -D @spectrum-tools/postcss-rgb-mapping -postcss -u postcss-rgb-mapping -o dist/index.css src/index.css -``` - -## Usage - -### Example 1: RGB and opacity postfixed variables - -This plugin turns this: - -```css -.spectrum--lightest { - --spectrum-seafoam-100: rgba(206, 247, 243); - --spectrum-seafoam-200: rgba(170, 241, 234, 0.5); -} -``` - -Into this: - -```css -.spectrum--lightest { - /* Both --spectrum-seafoam-100 and --spectrum-seafoam-200 get split into separate - "-rgb" and "-opacity" values when applicable. */ - --spectrum-seafoam-100-rgb: 206, 247, 243; - --spectrum-seafoam-100: rgba(var(--spectrum-seafoam-100-rgb)); - --spectrum-seafoam-200-rgb: 170, 241, 234; - --spectrum-seafoam-200-opacity: 0.5; - /* The plugin then redefines the original custom variable to use the newly created - "-rgb" and/or "-opacity" custom variables. */ - --spectrum-seafoam-200: rgba( - var(--spectrum-seafoam-200-rgb), - var(--spectrum-seafoam-200-opacity) - ); -} -``` - -### Example 2: Remapping of transparent tokens - -This plugin turns this: - -```css -.spectrum--lightest { - --spectrum-transparent-white-100-rgb: 100, 100, 100; - --spectrum-transparent-white-100-opacity: 0.5; - --spectrum-transparent-white-100: rgba( - var(--spectrum-transparent-white-100-rgb), - var(--spectrum-transparent-white-100-opacity) - ); - /* The custom properties below is defined as another, specifically "transparent," variable. */ - --disabled-static-white-background-color: var( - --spectrum-transparent-white-100 - ); -} -``` - -Into this: - -```css -.spectrum--lightest { - --spectrum-transparent-white-100-rgb: 100, 100, 100; - --spectrum-transparent-white-100-opacity: 0.5; - --spectrum-transparent-white-100: rgba( - var(--spectrum-transparent-white-100-rgb), - var(--spectrum-transparent-white-100-opacity) - ); - /* In a similar fashion, the plugin creates new "-rgb" and "-opacity" postfixed custom - variables, that correspond to the definition's transparent "-rgb" and "-opacity" - postfixed custom variables. */ - --disabled-static-white-background-color-rgb: var( - --spectrum-transparent-white-100-rgb - ); - --disabled-static-white-background-color-opacity: var( - --spectrum-transparent-white-100-opacity - ); - /* Then reassembles the original to use and reference these newly created variables. */ - --disabled-static-white-background-color: rgba( - var(--disabled-static-white-background-color-rgb), - var(--disabled-static-white-background-color-opacity) - ); -} -``` diff --git a/plugins/postcss-rgb-mapping/expected/basic.css b/plugins/postcss-rgb-mapping/expected/basic.css deleted file mode 100644 index 8a5d3f3f350..00000000000 --- a/plugins/postcss-rgb-mapping/expected/basic.css +++ /dev/null @@ -1,15 +0,0 @@ -.elements { - --seafoam-100-rgb: 206, 247, 243; - --seafoam-100: rgba(var(--seafoam-100-rgb)); - --seafoam-200-rgb: 206, 247, 243; - --seafoam-200-opacity: 0.5; - --seafoam-200: rgba(var(--seafoam-200-rgb), var(--seafoam-200-opacity)); - --seafoam-300-rgb: 206, 247, 243; - --seafoam-300: rgba(var(--seafoam-300-rgb)); - --spectrum-transparent-white-100-rgb: 100, 100, 100; - --spectrum-transparent-white-100-opacity: 0.5; - --spectrum-transparent-white-100: rgba(var(--spectrum-transparent-white-100-rgb), var(--spectrum-transparent-white-100-opacity)); - --disabled-static-white-background-color-rgb: var(--spectrum-transparent-white-100-rgb); - --disabled-static-white-background-color-opacity: var(--spectrum-transparent-white-100-opacity); - --disabled-static-white-background-color: rgba(var(--disabled-static-white-background-color-rgb), var(--disabled-static-white-background-color-opacity)); -} diff --git a/plugins/postcss-rgb-mapping/expected/modern.css b/plugins/postcss-rgb-mapping/expected/modern.css deleted file mode 100644 index 209329ec912..00000000000 --- a/plugins/postcss-rgb-mapping/expected/modern.css +++ /dev/null @@ -1,15 +0,0 @@ -.elements { - --seafoam-100-rgb: 206 247 243; - --seafoam-100: rgba(var(--seafoam-100-rgb)); - --seafoam-200-rgb: 206 247 243; - --seafoam-200-opacity: 50%; - --seafoam-200: rgba(var(--seafoam-200-rgb) / var(--seafoam-200-opacity)); - --seafoam-300-rgb: 206 247 243; - --seafoam-300: rgba(var(--seafoam-300-rgb)); - --spectrum-transparent-white-100-rgb: 100 100 100; - --spectrum-transparent-white-100-opacity: 50%; - --spectrum-transparent-white-100: rgba(var(--spectrum-transparent-white-100-rgb) / var(--spectrum-transparent-white-100-opacity)); - --disabled-static-white-background-color-rgb: var(--spectrum-transparent-white-100-rgb); - --disabled-static-white-background-color-opacity: var(--spectrum-transparent-white-100-opacity); - --disabled-static-white-background-color: rgba(var(--disabled-static-white-background-color-rgb) / var(--disabled-static-white-background-color-opacity)); -} diff --git a/plugins/postcss-rgb-mapping/fixtures/basic.css b/plugins/postcss-rgb-mapping/fixtures/basic.css deleted file mode 100644 index d614c9cb38b..00000000000 --- a/plugins/postcss-rgb-mapping/fixtures/basic.css +++ /dev/null @@ -1,7 +0,0 @@ -.elements { - --seafoam-100: rgba(206, 247, 243); - --seafoam-200: rgba(206, 247, 243, 0.5); - --seafoam-300: rgb(206, 247, 243); - --spectrum-transparent-white-100: rgba(100, 100, 100, 0.5); - --disabled-static-white-background-color: var(--spectrum-transparent-white-100); -} diff --git a/plugins/postcss-rgb-mapping/index.js b/plugins/postcss-rgb-mapping/index.js deleted file mode 100644 index 22ee0214eb9..00000000000 --- a/plugins/postcss-rgb-mapping/index.js +++ /dev/null @@ -1,168 +0,0 @@ -/*! - * Copyright 2024. All rights reserved. - * - * This file is licensed to you under the Apache License, Version 2.0 (the "License"); - * you may not use this file except in compliance with the License. You may obtain a copy - * of the License at http://www.apache.org/licenses/LICENSE-2.0 - * - * Unless required by applicable law or agreed to in writing, software distributed under - * the License is distributed on an "AS IS" BASIS, WITHOUT WARRANTIES OR REPRESENTATIONS - * OF ANY KIND, either express or implied. See the License for the specific language - * governing permissions and limitations under the License. -*/ - -const valuesParser = require("postcss-values-parser"); - -/** @typedef {object} Options */ - -/** - * @type {import('postcss').PluginCreator} - * @param {Options} options - * @returns {import('postcss').Plugin} - */ -function rgbMappingFunction ({ - colorFunctionalNotation = false, -}) { - - return { - postcssPlugin: "@spectrum-tools/postcss-rgb-mapping", - /** @type {import('postcss').RootProcessor} */ - Root(root) { - /* Gather all the custom properties that reference "unprocessed" transparent tokens (i.e. transparent-white-200) */ - const transparentTokens = new Set(); - root.walkDecls(decl => { - if (decl.prop.startsWith('--spectrum-transparent-') && !decl.prop.endsWith('rgb') && !decl.prop.endsWith('opacity')) { - transparentTokens.add(decl.prop); - } - }); - - root.walkDecls(decl => { - const { prop, value } = decl; - - /* Determine if this property is a custom property */ - const isCustomProp = prop.startsWith("--"); - - /* Determine if this property has already been processed */ - const isProcessed = prop.endsWith("rgb") || prop.endsWith("opacity"); - - /* Check for transparent token reference */ - const transparentMatch = value.match(/var\((--spectrum-transparent-[^\s)]+)\)/); - if (isCustomProp && !isProcessed && transparentMatch) { - const referencedToken = transparentMatch[1]; - - if (transparentTokens.has(referencedToken)) { - /* Create the new RGB and opacity properties */ - decl.cloneBefore({ - prop: `${prop}-rgb`, - value: `var(${referencedToken}-rgb)` - }); - decl.cloneBefore({ - prop: `${prop}-opacity`, - value: `var(${referencedToken}-opacity)` - }); - - /* Update the original declaration */ - decl.value = `rgba(var(${prop}-rgb)${colorFunctionalNotation ? " / " : ", "}var(${prop}-opacity))`; - } - } - return; - }); - }, - - /** @type {import('postcss').DeclarationProcessor} */ - Declaration(decl, { Warning }) { - const { prop, value } = decl; - - /* Determine if this property is a custom property */ - const isCustomProp = prop.startsWith("--"); - - /* Determine if this property has already been processed */ - const isProcessed = prop.endsWith("rgb") || prop.endsWith("opacity"); - - /* Parse the value for its parts */ - const parsedValue = valuesParser.parse(value) || []; - - /* Determine if the value has an rgb or rgba value */ - const hasRGBValue = parsedValue.nodes.length ? parsedValue.nodes.some((node) => node.type === "func" && (["rgb", "rgba"].some(func => node.name === func))) : false; - - /* - * If the property is not a custom prop, or - * if the property is a custom prop and ends with 'rgb', or - * if the value is not an rgb or rgba value, or - * if the value is an rgba value with a var() function - * then return without processing. - */ - if (!isCustomProp || isProcessed || !hasRGBValue || parsedValue.nodes.length === 0) return; - - const rgba = parsedValue.nodes.find((node) => node.type === "func" && (["rgb", "rgba"].some(func => node.name === func))); - - const [r,g,b,a] = rgba.nodes.reduce((acc, node) => { - if (node.type === "numeric" && node.value) { - if (node?.unit && node.unit === "%") { - acc.push((node.value / 100).toFixed(2)); - } - else { - acc.push(node.value); - } - } - return acc; - }, []); - - /* If any of the values are undefined, return without processing */ - if (!r || !g || !b) { - return new Warning(`Unable to parse out rgb values: ${value}`, { node: decl }); - } - - /* Create a new declaration with the rgb values separated out */ - decl.cloneBefore({ - prop: `${prop}-rgb`, - value: colorFunctionalNotation ? `${r} ${g} ${b}` : `${r}, ${g}, ${b}`, - }); - - /* Update the original declaration value to point to the new variable */ - if (a) { - if (colorFunctionalNotation) { - if (typeof a === "string" && a.endsWith("%")) { - decl.cloneBefore({ - prop: `${prop}-opacity`, - value: a, - }); - } - else if (typeof a === "string" && a.startsWith("0.")) { - decl.cloneBefore({ - prop: `${prop}-opacity`, - value: `${parseFloat(a) * 100}%`, - }); - } - else { - decl.cloneBefore({ - prop: `${prop}-opacity`, - value: `${parseFloat(a) * 100}%`, - }); - } - } - else { - if (typeof a === "string" && a.endsWith("%")) { - decl.cloneBefore({ - prop: `${prop}-opacity`, - value: `${parseFloat(a) / 100}`, - }); - } - else { - decl.cloneBefore({ - prop: `${prop}-opacity`, - value: a, - }); - } - } - } - decl.assign({ - value: `rgba(var(${prop}-rgb)${a ? `${colorFunctionalNotation ? " /" : ","} var(${prop}-opacity)` : ""})`, - }); - return; - }, - }; -} - -rgbMappingFunction.postcss = true; -module.exports = rgbMappingFunction; diff --git a/plugins/postcss-rgb-mapping/package.json b/plugins/postcss-rgb-mapping/package.json deleted file mode 100644 index 1138cca011f..00000000000 --- a/plugins/postcss-rgb-mapping/package.json +++ /dev/null @@ -1,42 +0,0 @@ -{ - "name": "@spectrum-tools/postcss-rgb-mapping", - "version": "1.1.0", - "description": "Remaps rgb(a) values to an rgb postfixed variable", - "license": "Apache-2.0", - "author": "Adobe", - "contributors": [ - "Cassondra Roberts " - ], - "homepage": "https://opensource.adobe.com/spectrum-css", - "repository": { - "type": "git", - "url": "https://github.com/adobe/spectrum-css.git", - "directory": "plugins/postcss-rgb-mapping" - }, - "bugs": { - "url": "https://github.com/adobe/spectrum-css/issues" - }, - "main": "index.js", - "files": [ - "package.json", - "index.js", - "*.md" - ], - "dependencies": { - "postcss-values-parser": "^6.0.2" - }, - "peerDependencies": { - "postcss": ">=8" - }, - "devDependencies": { - "ava": "^6.4.0", - "c8": "^10.1.3", - "postcss": "^8.5.6" - }, - "keywords": [ - "css", - "rgb", - "plugin", - "postcss" - ] -} diff --git a/plugins/postcss-rgb-mapping/project.json b/plugins/postcss-rgb-mapping/project.json deleted file mode 100644 index 36438d12890..00000000000 --- a/plugins/postcss-rgb-mapping/project.json +++ /dev/null @@ -1,16 +0,0 @@ -{ - "$schema": "../../node_modules/nx/schemas/project-schema.json", - "name": "postcss-rgb-mapping", - "tags": ["tooling", "postcss", "plugin"], - "targets": { - "format": { - "defaultConfiguration": "plugins" - }, - "lint": { - "defaultConfiguration": "plugins" - }, - "test": { - "defaultConfiguration": "plugins" - } - } -} diff --git a/plugins/postcss-rgb-mapping/test.js b/plugins/postcss-rgb-mapping/test.js deleted file mode 100644 index 73e3319aa6c..00000000000 --- a/plugins/postcss-rgb-mapping/test.js +++ /dev/null @@ -1,42 +0,0 @@ -/*! - * Copyright 2024 Adobe. All rights reserved. - * - * This file is licensed to you under the Apache License, Version 2.0 (the "License"); - * you may not use this file except in compliance with the License. You may obtain a copy - * of the License at - * - * Unless required by applicable law or agreed to in writing, software distributed under - * the License is distributed on an "AS IS" BASIS, WITHOUT WARRANTIES OR REPRESENTATIONS - * OF ANY KIND, either express or implied. See the License for the specific language - * governing permissions and limitations under the License. - */ - -const fs = require("fs"); -const test = require("ava"); -const postcss = require("postcss"); -const plugin = require("./index.js"); - -function compare(t, fixtureFilePath, expectedFilePath, options = {}) { - return postcss([plugin(options)]) - .process(readFile(`./fixtures/${fixtureFilePath}`), { - from: fixtureFilePath, - }) - .then((result) => { - const actual = result.css; - const expected = readFile(`./expected/${expectedFilePath}`); - t.is(actual, expected); - t.is(result.warnings().length, 0); - }); -} - -function readFile(filename) { - return fs.readFileSync(filename, "utf8"); -} - -test("create basic output", (t) => { - return compare(t, "basic.css", "basic.css"); -}); - -test("use modern rgba format", (t) => { - return compare(t, "basic.css", "modern.css", { colorFunctionalNotation: true }); -}); diff --git a/postcss.config.js b/postcss.config.js index f5293934ffb..2987140d24d 100644 --- a/postcss.config.js +++ b/postcss.config.js @@ -55,6 +55,7 @@ module.exports = ({ return join(basedir, id); } } : false, + "@csstools/postcss-design-tokens": {}, /* --------------------------------------------------- */ /* ------------------- LINTING ---------------- */ // Linter needs to run before the minifier removes comments (such as the stylelint-ignore comments) @@ -114,11 +115,11 @@ module.exports = ({ reduceIdents: false, discardUnused: false, discardComments: { - remove: (comment) => !comment.includes("stylelint-"), + remove: (comment) => !comment.includes("stylelint-") && !comment.includes("deprecated"), }, // @todo yarn add -DW css-declaration-sorter cssDeclarationSorter: false, // @todo { order: "smacss" } - normalizeWhitespace: minify || isProduction, + normalizeWhitespace: minify, }, ], }, diff --git a/stylelint.config.js b/stylelint.config.js index bbfa2e8866b..bf7a2027fcd 100644 --- a/stylelint.config.js +++ b/stylelint.config.js @@ -14,14 +14,11 @@ module.exports = { // "stylelint-high-performance-animation", ], ignoreFiles: [ - // Static utility assets - "tokens/custom-*/*.css", "tools/generator/**/*.css", // Compiled and generated files "**/dist/**", ".storybook/storybook-static/**/*.css", "**/*-generated.css", - "tools/bundle/src/*.css", "**/node_modules/**", // Test files "plugins/*/expected/*.css", @@ -55,7 +52,7 @@ module.exports = { "at-rule-no-unknown": [ true, { - ignoreAtRules: ["extend", "each", "include", "mixin"], + ignoreAtRules: ["extend", "each", "include", "mixin", "design-tokens"], }, ], "block-no-empty": [true, { @@ -83,6 +80,12 @@ module.exports = { ignoreProperties: { "/.+/": ["CanvasText", "preserve-parent-color"], }, + propertiesSyntax: { + "/.+/": "| ", + }, + typesSyntax: { + "": "design-token( [ to ]? )", + }, }, ], "declaration-block-no-shorthand-property-overrides": true, @@ -90,6 +93,7 @@ module.exports = { true, { severity: "warning", + ignoreFunctions: ["design-token"], }, ], "max-nesting-depth": [3, { severity: "warning" }], @@ -171,7 +175,7 @@ module.exports = { * -------------------------------------------------------------- */ overrides: [ { - files: ["components/*/index.css", "components/*/themes/spectrum.css"], + files: ["components/*/index.css"], rules: { "selector-class-pattern": [ "^(spectrum-|is-|u-)[A-Za-z0-9-]+", { @@ -184,7 +188,6 @@ module.exports = { /** @note this is a list of custom properties that are allowed to be unknown */ ignoreList: [ /^--mod-/, - /^--system-/, /^--spectrum-picked-color$/, ], skipDependencies: false, @@ -217,7 +220,7 @@ module.exports = { { files: ["tokens*/**/*.css(?inline)?", "tokens/**/*.css"], rules: { - "custom-property-pattern": [/^(spectrum|color|scale|system)/, {}], + "custom-property-pattern": [/^(spectrum|scale)/, {}], } }, { diff --git a/tasks/component-compare.js b/tasks/component-compare.js index 213627b2ac5..daa839c8b4f 100644 --- a/tasks/component-compare.js +++ b/tasks/component-compare.js @@ -5,6 +5,7 @@ const { join, relative, dirname, basename, extname } = require("path"); const fg = require("fast-glob"); const tar = require("tar"); const _ = require("lodash"); +const semver = require("semver"); const nunjucks = require("nunjucks"); const env = new nunjucks.Environment(); @@ -145,6 +146,7 @@ async function generateDiff({ async function fetchPublishedComponent(packageName, { cacheLocation, outputLocation, + base, }) { const warnings = []; let tag; @@ -157,13 +159,23 @@ async function fetchPublishedComponent(packageName, { warnings.push(err ?? `Failed to fetch ${packageName.yellow} from npm.\n`); })) ?? {}; - // If the component exists on npm, fetch the latest release data - // @todo what is the fallback if there isn't a latest tag? - if (npmData["dist-tags"]?.latest) { + + // If a base was configured and it exists as a specific tag, use that + if (base) { + if (npmData["dist-tags"]?.[base]) { + tag = npmData["dist-tags"]?.[base]; + } + // Otherwise try to use the base as a version number + else if (semver.valid(base) && npmData.versions?.[base]) { + tag = base; + } + } + else if (npmData["dist-tags"]?.latest) { tag = npmData["dist-tags"]?.latest; } + // @todo: else fetch built assets from the main branch? - if (!tag) return; + if (!tag) return { warnings: [`No base version found for ${packageName.yellow}.`] }; // Check locally to see if we have already fetched the tarball // for this tag; if not, fetch it and extract it @@ -206,6 +218,7 @@ async function processComponent( cwd, output = pathing.output, cacheLocation = pathing.cache, + base, } ) { if (!component) return Promise.reject("No component specified."); @@ -253,6 +266,7 @@ async function processComponent( const npmResults = await fetchPublishedComponent(pkg.name, { cacheLocation, outputLocation: join(pathing.latest, component), + base, }); if (npmResults?.tag) { @@ -353,7 +367,7 @@ async function processFile(filename, localPath, comparePath) { async function main( components, output, - { skipCache = false } = {} + { skipCache = false, base } = {} ) { if (!components || components.length === 0) { components = getAllComponentNames(false); @@ -399,6 +413,7 @@ async function main( return processComponent(component, { output: pathing.output, cacheLocation: pathing.cache, + base, }).catch((err) => Promise.resolve({ component, @@ -548,13 +563,24 @@ async function main( } } -let { - _: components, - output = join(dirs.root, ".diff-output"), - cache = true, - // @todo allow to run against local main or published versions -} = yargs(hideBin(process.argv)).argv; - -main(components, output, { skipCache: !cache }).then((code) => { +let { _: components, output, cache, base } = yargs(hideBin(process.argv)) + .option("output", { + type: "string", + description: "The output directory for the diffs", + default: join(dirs.root, ".diff-output"), + }) + .option("cache", { + type: "boolean", + description: "Whether to cache the tarballs from npm", + default: true, + }) + .option("base", { + type: "string", + description: "The base version of the component to compare against", + default: "next", + }) + .argv; + +main(components, output, { base, skipCache: !cache }).then((code) => { process.exit(code); }); diff --git a/tasks/templates/compare-listing.njk b/tasks/templates/compare-listing.njk index f47eff8126e..d6200039645 100644 --- a/tasks/templates/compare-listing.njk +++ b/tasks/templates/compare-listing.njk @@ -15,7 +15,7 @@ --mod-table-cursor-row-default: auto; font-family: var(--spectrum-default-font-family); - background-color: var(--spectrum-background-layer-1-color); + background-color: var(--spectrum-background-base-color); color: var(--spectrum-neutral-content-color-default); -webkit-tap-highlight-color: rgba(0, 0, 0, 0); @@ -50,7 +50,7 @@ } - +
{{ nav | safe }} diff --git a/tasks/templates/diff-preview.njk b/tasks/templates/diff-preview.njk index d2e0cb642d2..7a280b2ee83 100644 --- a/tasks/templates/diff-preview.njk +++ b/tasks/templates/diff-preview.njk @@ -17,7 +17,7 @@ --mod-detail-margin-start: 0; font-family: var(--spectrum-default-font-family); - background-color: var(--spectrum-background-layer-1-color); + background-color: var(--spectrum-background-base-color); color: var(--spectrum-neutral-content-color-default); -webkit-tap-highlight-color: rgba(0, 0, 0, 0); @@ -47,7 +47,7 @@ margin-block-end: 2em; } .spectrum-Container-main section { - background-color: var(--spectrum-background-layer-2-color); + background-color: var(--spectrum-background-layer-1-color); color: var(--spectrum-neutral-content-color-default); border-radius: 4px; padding: 1rem; @@ -55,7 +55,7 @@ .d2h-code-side-linenumber { position: relative !important; } - +
{{ nav | safe }} diff --git a/tokens/custom-tokens.json b/tokens/custom-tokens.json new file mode 100644 index 00000000000..794649d4290 --- /dev/null +++ b/tokens/custom-tokens.json @@ -0,0 +1,99 @@ +{ + "animation-duration-0": { + "value": "0ms" + }, + "animation-duration-100": { + "value": "130ms" + }, + "animation-duration-1000": { + "value": "500ms" + }, + "animation-duration-200": { + "value": "160ms" + }, + "animation-duration-2000": { + "value": "1000ms" + }, + "animation-duration-300": { + "value": "190ms" + }, + "animation-duration-400": { + "value": "220ms" + }, + "animation-duration-4000": { + "value": "2000ms" + }, + "animation-duration-500": { + "value": "250ms" + }, + "animation-duration-600": { + "value": "300ms" + }, + "animation-duration-6000": { + "value": "3000ms" + }, + "animation-duration-700": { + "value": "3500ms" + }, + "animation-duration-800": { + "value": "400ms" + }, + "animation-duration-900": { + "value": "450ms" + }, + "animation-ease-in": { + "value": "cubic-bezier(0.5, 0, 1, 1)" + }, + "animation-ease-in-out": { + "value": "cubic-bezier(0.45, 0, 0.4, 1)" + }, + "animation-ease-linear": { + "value": "cubic-bezier(0, 0, 1, 1)" + }, + "animation-ease-out": { + "value": "cubic-bezier(0, 0, 0.4, 1)" + }, + "animation-linear": { + "value": "cubic-bezier(0, 0, 1, 1)" + }, + "cjk-font": { + "value": "{cjk-font-family-stack}" + }, + "cjk-font-family-stack": { + "value": "adobe-clean-han-japanese, var(--spectrum-cjk-font-family), sans-serif" + }, + "code-font-family-stack": { + "value": "\"Source Code Pro\", Monaco, monospace" + }, + "corner-radius-1000": { + "$schema": "https://opensource.adobe.com/spectrum-tokens/schemas/token-types/dimension.json", + "value": "9999px" + }, + "font-family": { + "value": "{sans-font-family-stack}" + }, + "font-family-ar": { + "value": "myriad-arabic, adobe-clean, \"Source Sans Pro\", -apple-system, BlinkMacSystemFont, \"Segoe UI\", Roboto, Ubuntu, \"Trebuchet MS\", \"Lucida Grande\", sans-serif" + }, + "font-family-he": { + "value": "myriad-hebrew, adobe-clean, \"Source Sans Pro\", -apple-system, BlinkMacSystemFont, \"Segoe UI\", Roboto, Ubuntu, \"Trebuchet MS\", \"Lucida Grande\", sans-serif" + }, + "font-size": { + "value": "{font-size-100}" + }, + "font-style": { + "value": "{default-font-style}" + }, + "sans-font-family-stack": { + "value": "adobe-clean, var(--spectrum-sans-serif-font-family), \"Source Sans Pro\", -apple-system, BlinkMacSystemFont, \"Segoe UI\", Roboto, Ubuntu, \"Trebuchet MS\", \"Lucida Grande\", sans-serif" + }, + "sans-serif-font": { + "value": "{sans-font-family-stack}" + }, + "serif-font": { + "value": "{serif-font-family-stack}" + }, + "serif-font-family-stack": { + "value": "adobe-clean-serif, var(--spectrum-serif-font-family), \"Source Serif Pro\", Georgia, serif" + } +} diff --git a/tokens/custom/dark-vars.css b/tokens/custom/dark-vars.css deleted file mode 100644 index 50174fa532e..00000000000 --- a/tokens/custom/dark-vars.css +++ /dev/null @@ -1,64 +0,0 @@ -/*! - * Copyright 2025 Adobe. All rights reserved. - * - * This file is licensed to you under the Apache License, Version 2.0 (the "License"); - * you may not use this file except in compliance with the License. You may obtain a copy - * of the License at - * - * Unless required by applicable law or agreed to in writing, software distributed under - * the License is distributed on an "AS IS" BASIS, WITHOUT WARRANTIES OR REPRESENTATIONS - * OF ANY KIND, either express or implied. See the License for the specific language - * governing permissions and limitations under the License. - */ - -/* This file contains overrides and additions to core tokens */ - -.spectrum--dark { - /* stylelint-disable-next-line custom-property-pattern -- context identification */ - --color-scheme: dark; - - /** COMPONENT-SPECIFIC OVERRIDES **/ - --spectrum-assetcard-border-color-selected: var(--spectrum-blue-800); - --spectrum-assetcard-border-color-selected-hover: var(--spectrum-blue-800); - --spectrum-assetcard-border-color-selected-down: var(--spectrum-blue-900); - --spectrum-assetcard-selectionindicator-background-color-ordered: var(--spectrum-blue-800); - --spectrum-assestcard-focus-indicator-color: var(--spectrum-blue-700); - - --spectrum-assetlist-item-background-color-selected-hover: rgb(var(--spectrum-blue-800-rgb), 0.25); - --spectrum-assetlist-item-background-color-selected: rgb(var(--spectrum-blue-800-rgb), 0.15); - --spectrum-assetlist-border-color-key-focus: var(--spectrum-blue-700); - - --spectrum-badge-label-icon-color-primary: var(--spectrum-black); - - --spectrum-calendar-day-background-color-selected: rgb(var(--spectrum-blue-800-rgb), 0.15); - --spectrum-calendar-day-background-color-hover: rgb(var(--spectrum-white-rgb), 0.07); - --spectrum-calendar-day-today-background-color-selected-hover: rgb(var(--spectrum-blue-800-rgb), 0.25); - --spectrum-calendar-day-background-color-selected-hover: rgb(var(--spectrum-blue-800-rgb), 0.25); - --spectrum-calendar-day-background-color-down: var(--spectrum-transparent-white-200); - --spectrum-calendar-day-background-color-cap-selected: rgb(var(--spectrum-blue-800-rgb), 0.25); - --spectrum-calendar-day-background-color-key-focus: rgb(var(--spectrum-white-rgb), 0.07); - --spectrum-calendar-day-border-color-key-focus: var(--spectrum-blue-700); - --spectrum-card-selected-background-color-rgb: var(--spectrum-blue-500-rgb); - - --spectrum-coach-indicator-ring-default-color: var(--spectrum-blue-700); - - --spectrum-drop-zone-background-color-rgb: var(--spectrum-blue-900-rgb); /* var(--spectrum-accent-color-900); */ - - --spectrum-dropindicator-color: var(--spectrum-blue-700); - - --spectrum-logic-button-and-background-color: var(--spectrum-blue-800); - --spectrum-logic-button-and-border-color: var(--spectrum-blue-800); - --spectrum-logic-button-and-background-color-hover: var(--spectrum-blue-1000); - --spectrum-logic-button-and-border-color-hover: var(--spectrum-blue-1000); - --spectrum-logic-button-or-background-color: var(--spectrum-magenta-700); - --spectrum-logic-button-or-border-color: var(--spectrum-magenta-700); - --spectrum-logic-button-or-background-color-hover: var(--spectrum-magenta-900); - --spectrum-logic-button-or-border-color-hover: var(--spectrum-magenta-900); - - --spectrum-steplist-current-marker-color-key-focus: var(--spectrum-blue-700); - - --spectrum-table-selected-row-background-color-rgb: var(--spectrum-blue-800-rgb); - - --spectrum-treeview-item-background-color-quiet-selected: rgb(var(--spectrum-gray-900-rgb), 0.07); - --spectrum-treeview-item-background-color-selected: rgb(var(--spectrum-blue-800-rgb), 0.15); -} diff --git a/tokens/custom/global-vars.css b/tokens/custom/global-vars.css deleted file mode 100644 index 43462ab54b1..00000000000 --- a/tokens/custom/global-vars.css +++ /dev/null @@ -1,68 +0,0 @@ -/*! - * Copyright 2024 Adobe. All rights reserved. - * - * This file is licensed to you under the Apache License, Version 2.0 (the "License"); - * you may not use this file except in compliance with the License. You may obtain a copy - * of the License at - * - * Unless required by applicable law or agreed to in writing, software distributed under - * the License is distributed on an "AS IS" BASIS, WITHOUT WARRANTIES OR REPRESENTATIONS - * OF ANY KIND, either express or implied. See the License for the specific language - * governing permissions and limitations under the License. - */ - -/* This file contains overrides and additions to core tokens */ -.spectrum { - --system: spectrum; - - --spectrum-animation-duration-0: 0ms; - --spectrum-animation-duration-100: 130ms; - --spectrum-animation-duration-200: 160ms; - --spectrum-animation-duration-300: 190ms; - --spectrum-animation-duration-400: 220ms; - --spectrum-animation-duration-500: 250ms; - --spectrum-animation-duration-600: 300ms; - --spectrum-animation-duration-700: 350ms; - --spectrum-animation-duration-800: 400ms; - --spectrum-animation-duration-900: 450ms; - --spectrum-animation-duration-1000: 500ms; - --spectrum-animation-duration-2000: 1000ms; - --spectrum-animation-duration-4000: 2000ms; - --spectrum-animation-duration-6000: 3000ms; - - --spectrum-animation-linear: cubic-bezier(0, 0, 1, 1); - - --spectrum-animation-ease-in-out: cubic-bezier(0.45, 0, 0.4, 1); - --spectrum-animation-ease-in: cubic-bezier(0.5, 0, 1, 1); - --spectrum-animation-ease-out: cubic-bezier(0, 0, 0.4, 1); - --spectrum-animation-ease-linear: cubic-bezier(0, 0, 1, 1); - - /* stylelint-disable value-keyword-case -- typography names should use their appropriate cases */ - --spectrum-sans-font-family-stack: adobe-clean, var(--spectrum-sans-serif-font-family), "Source Sans Pro", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Ubuntu, "Trebuchet MS", "Lucida Grande", sans-serif; - --spectrum-sans-serif-font: var(--spectrum-sans-font-family-stack); - - --spectrum-serif-font-family-stack: adobe-clean-serif, var(--spectrum-serif-font-family), "Source Serif Pro", Georgia, serif; - --spectrum-serif-font: var(--spectrum-serif-font-family-stack); - - --spectrum-code-font-family-stack: "Source Code Pro", Monaco, monospace; - - --spectrum-font-family-ar: myriad-arabic, adobe-clean, "Source Sans Pro", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Ubuntu, "Trebuchet MS", "Lucida Grande", sans-serif; - --spectrum-font-family-he: myriad-hebrew, adobe-clean, "Source Sans Pro", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Ubuntu, "Trebuchet MS", "Lucida Grande", sans-serif; - /* stylelint-enable value-keyword-case */ - - --spectrum-font-family: var(--spectrum-sans-font-family-stack); - --spectrum-font-style: var(--spectrum-default-font-style); - --spectrum-font-size: var(--spectrum-font-size-100); - - --spectrum-cjk-font-family-stack: adobe-clean-han-japanese, var(--spectrum-cjk-font-family), sans-serif; - --spectrum-cjk-font: var(--spectrum-cjk-font-family-stack); - - /* Gradient that changes with the color theme. */ - --spectrum-examples-gradient: linear-gradient(45deg, var(--spectrum-magenta-1500), var(--spectrum-blue-1500)); - - /* Gradients that do not change with the color theme, for use in static color backgrounds. */ - --spectrum-examples-gradient-static-black: linear-gradient(45deg, rgb(255 241 246), rgb(238 245 255)); - --spectrum-examples-gradient-static-white: linear-gradient(45deg, rgb(64 0 22), rgb(14 24 67)); - - --spectrum-coach-indicator-ring-static-white-color: var(--spectrum-white); -} diff --git a/tokens/custom/large-vars.css b/tokens/custom/large-vars.css deleted file mode 100644 index d1573c98a11..00000000000 --- a/tokens/custom/large-vars.css +++ /dev/null @@ -1,141 +0,0 @@ -/*! - * Copyright 2025 Adobe. All rights reserved. - * - * This file is licensed to you under the Apache License, Version 2.0 (the "License"); - * you may not use this file except in compliance with the License. You may obtain a copy - * of the License at - * - * Unless required by applicable law or agreed to in writing, software distributed under - * the License is distributed on an "AS IS" BASIS, WITHOUT WARRANTIES OR REPRESENTATIONS - * OF ANY KIND, either express or implied. See the License for the specific language - * governing permissions and limitations under the License. - */ - -/* This file contains overrides and additions to core tokens */ - -.spectrum--large { - /* stylelint-disable-next-line custom-property-pattern -- context identification */ - --scale: large; - - --spectrum-alert-banner-close-button-spacing: var(--spectrum-spacing-200); - --spectrum-alert-banner-edge-to-divider: var(--spectrum-spacing-200); - --spectrum-alert-banner-edge-to-button: var(--spectrum-spacing-200); - --spectrum-alert-banner-text-to-button-vertical: var(--spectrum-spacing-200); - - --spectrum-alert-dialog-edge-to-content: var(--spectrum-spacing-400); - - --spectrum-assetcard-focus-ring-border-radius: 9px; - --spectrum-assetcard-selectionindicator-margin: 15px; - --spectrum-assetcard-title-font-size: var(--spectrum-heading-size-xxs); - --spectrum-assetcard-header-content-font-size: var(--spectrum-heading-size-xxs); - --spectrum-assetcard-content-font-size: var(--spectrum-body-size-xs); - - --spectrum-button-top-to-text-small: 6px; - --spectrum-button-bottom-to-text-small: 5px; - --spectrum-button-top-to-text-medium: 9px; - --spectrum-button-bottom-to-text-medium: 10px; - --spectrum-button-top-to-text-large: 12px; - --spectrum-button-bottom-to-text-large: 13px; - --spectrum-button-top-to-text-extra-large: 16px; - --spectrum-button-bottom-to-text-extra-large: 17px; - - --spectrum-coach-indicator-gap: 8px; - --spectrum-coach-indicator-ring-diameter: 20px; - --spectrum-coach-indicator-quiet-ring-diameter: 10px; - --spectrum-coachmark-action-menu-vertical-offset: -6px; - --spectrum-coachmark-buttongroup-display: none; - --spectrum-coachmark-buttongroup-mobile-display: flex; - --spectrum-coachmark-menu-display: none; - --spectrum-coachmark-menu-mobile-display: inline-flex; - - --spectrum-colorwheel-path: "M 119 119 m -119 0 a 119 119 0 1 0 238 0 a 119 119 0 1 0 -238 0.2 M 119 119 m -91 0 a 91 91 0 1 0 182 0 a 91 91 0 1 0 -182 0"; - --spectrum-colorwheel-path-borders: "M 120 120 m -120 0 a 120 120 0 1 0 240 0 a 120 120 0 1 0 -240 0.2 M 120 120 m -90 0 a 90 90 0 1 0 180 0 a 90 90 0 1 0 -180 0"; - --spectrum-colorwheel-colorarea-container-size: 182px; - - --spectrum-colorloupe-checkerboard-fill: url("#checkerboard-secondary"); - - --spectrum-contextual-help-content-spacing: var(--spectrum-spacing-200); - - --spectrum-datepicker-initial-width: 160px; - --spectrum-datepicker-generic-padding: 15px; - --spectrum-datepicker-dash-line-height: 30px; - --spectrum-datepicker-width-quiet-first: 90px; - --spectrum-datepicker-width-quiet-second: 20px; - --spectrum-datepicker-datetime-width-first: 45px; - --spectrum-datepicker-invalid-icon-to-button: 10px; - --spectrum-datepicker-invalid-icon-to-button-quiet: 9px; - --spectrum-datepicker-input-datetime-width: 30px; - - --spectrum-dial-border-radius: 20px; - --spectrum-dial-handle-position: 10px; - --spectrum-dial-handle-block-margin: 20px; - --spectrum-dial-handle-inline-margin: 20px; - --spectrum-dial-controls-margin: 10px; - --spectrum-dial-label-gap-y: 6px; - --spectrum-dial-label-container-top-to-text: 5px; - - --spectrum-dialog-confirm-entry-animation-distance: 25px; - --spectrum-dialog-confirm-hero-height: 160px; - --spectrum-dialog-confirm-border-radius: 5px; - --spectrum-dialog-confirm-title-text-size: 19px; - --spectrum-dialog-confirm-description-text-size: 15px; - --spectrum-dialog-confirm-padding-grid: 24px; - - --spectrum-menu-item-selectable-edge-to-text-not-selected-small: 34px; - --spectrum-menu-item-selectable-edge-to-text-not-selected-medium: 42px; - --spectrum-menu-item-selectable-edge-to-text-not-selected-large: 47px; - --spectrum-menu-item-selectable-edge-to-text-not-selected-extra-large: 54px; - - --spectrum-menu-item-checkmark-height-small: 12px; - --spectrum-menu-item-checkmark-height-medium: 14px; - --spectrum-menu-item-checkmark-height-large: 16px; - --spectrum-menu-item-checkmark-height-extra-large: 16px; - - --spectrum-menu-item-checkmark-width-small: 12px; - --spectrum-menu-item-checkmark-width-medium: 14px; - --spectrum-menu-item-checkmark-width-large: 16px; - --spectrum-menu-item-checkmark-width-extra-large: 16px; - - --spectrum-pagination-textfield-width: 60px; - --spectrum-pagination-item-inline-spacing: 6px; - - --spectrum-slider-tick-mark-height: 13px; - --spectrum-slider-ramp-track-height: 20px; - - --spectrum-standard-dialog-spacing-edge-to-content: var(--spectrum-spacing-400); - --spectrum-takeover-dialog-spacing-grid-padding: var(--spectrum-spacing-400); - --spectrum-takeover-dialog-spacing-header-gap: var(--spectrum-spacing-300); - --spectrum-takeover-dialog-spacing-title-to-body: var(--spectrum-spacing-400); - - --spectrum-treeview-item-indentation-medium: 20px; - --spectrum-treeview-item-indentation-small: 15px; - --spectrum-treeview-item-indentation-large: 25px; - --spectrum-treeview-item-indentation-extra-large: 30px; - --spectrum-treeview-indicator-inset-block-start: 6px; - --spectrum-treeview-item-min-block-size-thumbnail-offset-medium: 2px; - - /* To get a square that measures 12px on the diagonal, the sides have to be 10px */ - --spectrum-tooltip-tip-square-size: 10px; - - --spectrum-ui-icon-medium-display: none; - --spectrum-ui-icon-large-display: block; - - --spectrum-well-border-radius: 5px; - --spectrum-well-margin-top: 5px; - --spectrum-well-min-width: 300px; - --spectrum-well-padding: 20px; - - /* XXL and XXS icon sizes are not within the design spec and are planned to be deprecated in Spectrum 2. */ - --spectrum-workflow-icon-size-xxl: 40px; - --spectrum-workflow-icon-size-xxs: 15px; - - --spectrum-in-field-button-side-edge-to-fill-small: 3px; - --spectrum-in-field-button-side-edge-to-fill-medium: 4px; - --spectrum-in-field-button-side-edge-to-fill-large: 4px; - --spectrum-in-field-button-side-edge-to-fill-extra-large: 4px; - - --spectrum-field-edge-to-icon-75: 6px; - --spectrum-field-edge-to-icon-100: 9px; - --spectrum-field-edge-to-icon-200: 11px; - --spectrum-field-edge-to-icon-300: 14px; -} diff --git a/tokens/custom/light-vars.css b/tokens/custom/light-vars.css deleted file mode 100644 index f1ae0d95ed2..00000000000 --- a/tokens/custom/light-vars.css +++ /dev/null @@ -1,62 +0,0 @@ -/*! - * Copyright 2025 Adobe. All rights reserved. - * - * This file is licensed to you under the Apache License, Version 2.0 (the "License"); - * you may not use this file except in compliance with the License. You may obtain a copy - * of the License at - * - * Unless required by applicable law or agreed to in writing, software distributed under - * the License is distributed on an "AS IS" BASIS, WITHOUT WARRANTIES OR REPRESENTATIONS - * OF ANY KIND, either express or implied. See the License for the specific language - * governing permissions and limitations under the License. - */ - -/* This file contains overrides and additions to core tokens */ -.spectrum--light { - /* stylelint-disable-next-line custom-property-pattern -- context identification */ - --color-scheme: light; - - --spectrum-assetcard-border-color-selected: var(--spectrum-blue-900); - --spectrum-assetcard-border-color-selected-hover: var(--spectrum-blue-900); - --spectrum-assetcard-border-color-selected-down: var(--spectrum-blue-1000); - --spectrum-assetcard-selectionindicator-background-color-ordered: var(--spectrum-blue-900); - --spectrum-assestcard-focus-indicator-color: var(--spectrum-blue-800); - - --spectrum-assetlist-item-background-color-selected-hover: rgb(var(--spectrum-blue-900-rgb), 0.2); - --spectrum-assetlist-item-background-color-selected: rgb(var(--spectrum-blue-900-rgb), 0.1); - --spectrum-assetlist-border-color-key-focus: var(--spectrum-blue-800); - - --spectrum-badge-label-icon-color-primary: var(--spectrum-white); - - --spectrum-calendar-day-background-color-selected: rgb(var(--spectrum-blue-900-rgb), 0.1); - --spectrum-calendar-day-background-color-hover: rgb(var(--spectrum-black-rgb), 0.06); - --spectrum-calendar-day-today-background-color-selected-hover: rgb(var(--spectrum-blue-900-rgb), 0.2); - --spectrum-calendar-day-background-color-selected-hover: rgb(var(--spectrum-blue-900-rgb), 0.2); - --spectrum-calendar-day-background-color-down: var(--spectrum-transparent-black-200); - --spectrum-calendar-day-background-color-cap-selected: rgb(var(--spectrum-blue-900-rgb), 0.2); - --spectrum-calendar-day-background-color-key-focus: rgb(var(--spectrum-black-rgb), 0.06); - --spectrum-calendar-day-border-color-key-focus: var(--spectrum-blue-800); - --spectrum-card-selected-background-color-rgb: var(--spectrum-blue-900-rgb); - - --spectrum-coach-indicator-ring-default-color: var(--spectrum-blue-800); - - --spectrum-drop-zone-background-color-rgb: var(--spectrum-blue-800-rgb); /* var(--spectrum-accent-color-800); */ - - --spectrum-dropindicator-color: var(--spectrum-blue-800); - - --spectrum-logic-button-and-background-color: var(--spectrum-blue-900); - --spectrum-logic-button-and-border-color: var(--spectrum-blue-900); - --spectrum-logic-button-and-background-color-hover: var(--spectrum-blue-1100); - --spectrum-logic-button-and-border-color-hover: var(--spectrum-blue-1100); - --spectrum-logic-button-or-background-color: var(--spectrum-magenta-900); - --spectrum-logic-button-or-border-color: var(--spectrum-magenta-900); - --spectrum-logic-button-or-background-color-hover: var(--spectrum-magenta-1100); - --spectrum-logic-button-or-border-color-hover: var(--spectrum-magenta-1100); - - --spectrum-steplist-current-marker-color-key-focus: var(--spectrum-blue-800); - - --spectrum-table-selected-row-background-color-rgb: var(--spectrum-blue-900-rgb); - - --spectrum-treeview-item-background-color-quiet-selected: rgb(var(--spectrum-gray-900-rgb), 0.06); - --spectrum-treeview-item-background-color-selected: rgb(var(--spectrum-blue-900-rgb), 0.1); -} diff --git a/tokens/custom/medium-vars.css b/tokens/custom/medium-vars.css deleted file mode 100644 index d9f08666d34..00000000000 --- a/tokens/custom/medium-vars.css +++ /dev/null @@ -1,139 +0,0 @@ -/*! - * Copyright 2025 Adobe. All rights reserved. - * - * This file is licensed to you under the Apache License, Version 2.0 (the "License"); - * you may not use this file except in compliance with the License. You may obtain a copy - * of the License at - * - * Unless required by applicable law or agreed to in writing, software distributed under - * the License is distributed on an "AS IS" BASIS, WITHOUT WARRANTIES OR REPRESENTATIONS - * OF ANY KIND, either express or implied. See the License for the specific language - * governing permissions and limitations under the License. - */ - -/* This file contains overrides and additions to core tokens */ - -.spectrum--medium { - /* stylelint-disable-next-line custom-property-pattern -- context identification */ - --scale: medium; - - --spectrum-alert-banner-close-button-spacing: var(--spectrum-spacing-100); - --spectrum-alert-banner-edge-to-button: var(--spectrum-spacing-100); - --spectrum-alert-banner-edge-to-divider: var(--spectrum-spacing-100); - --spectrum-alert-banner-text-to-button-vertical: var(--spectrum-spacing-100); - - --spectrum-alert-dialog-edge-to-content: var(--spectrum-spacing-500); - - --spectrum-assetcard-content-font-size: var(--spectrum-body-size-s); - --spectrum-assetcard-focus-ring-border-radius: 8px; - --spectrum-assetcard-header-content-font-size: var(--spectrum-heading-size-xs); - --spectrum-assetcard-selectionindicator-margin: 12px; - --spectrum-assetcard-title-font-size: var(--spectrum-heading-size-xs); - - --spectrum-button-bottom-to-text-small: 4px; - --spectrum-button-bottom-to-text-medium: 8px; - --spectrum-button-bottom-to-text-large: 10px; - --spectrum-button-bottom-to-text-extra-large: 13px; - --spectrum-button-top-to-text-small: 5px; - --spectrum-button-top-to-text-medium: 7px; - --spectrum-button-top-to-text-large: 10px; - --spectrum-button-top-to-text-extra-large: 13px; - - --spectrum-coach-indicator-gap: 6px; - --spectrum-coach-indicator-ring-diameter: var(--spectrum-spacing-300); - --spectrum-coach-indicator-quiet-ring-diameter: var(--spectrum-spacing-100); - --spectrum-coachmark-action-menu-vertical-offset: -4px; - --spectrum-coachmark-buttongroup-display: flex; - --spectrum-coachmark-buttongroup-mobile-display: none; - --spectrum-coachmark-menu-display: inline-flex; - --spectrum-coachmark-menu-mobile-display: none; - - --spectrum-colorloupe-checkerboard-fill: url("#checkerboard-primary"); - - --spectrum-colorwheel-colorarea-container-size: 144px; - --spectrum-colorwheel-path: "M 95 95 m -95 0 a 95 95 0 1 0 190 0 a 95 95 0 1 0 -190 0.2 M 95 95 m -73 0 a 73 73 0 1 0 146 0 a 73 73 0 1 0 -146 0"; - --spectrum-colorwheel-path-borders: "M 96 96 m -96 0 a 96 96 0 1 0 192 0 a 96 96 0 1 0 -192 0.2 M 96 96 m -72 0 a 72 72 0 1 0 144 0 a 72 72 0 1 0 -144 0"; - - --spectrum-contextual-help-content-spacing: var(--spectrum-spacing-100); - - --spectrum-datepicker-dash-line-height: 24px; - --spectrum-datepicker-datetime-width-first: 36px; - --spectrum-datepicker-generic-padding: var(--spectrum-spacing-200); - --spectrum-datepicker-initial-width: 128px; - --spectrum-datepicker-input-datetime-width: var(--spectrum-spacing-400); - --spectrum-datepicker-invalid-icon-to-button: 8px; - --spectrum-datepicker-invalid-icon-to-button-quiet: 7px; - --spectrum-datepicker-width-quiet-first: 72px; - --spectrum-datepicker-width-quiet-second: 16px; - - --spectrum-dial-border-radius: 16px; - --spectrum-dial-controls-margin: 8px; - --spectrum-dial-handle-block-margin: 16px; - --spectrum-dial-handle-inline-margin: 16px; - --spectrum-dial-handle-position: 8px; - --spectrum-dial-label-container-top-to-text: 4px; - --spectrum-dial-label-gap-y: 5px; - - --spectrum-dialog-confirm-border-radius: 4px; - --spectrum-dialog-confirm-description-text-size: 14px; - --spectrum-dialog-confirm-entry-animation-distance: 20px; - --spectrum-dialog-confirm-hero-height: 128px; - --spectrum-dialog-confirm-padding-grid: 40px; - --spectrum-dialog-confirm-title-text-size: 18px; - - --spectrum-menu-item-checkmark-height-small: 10px; - --spectrum-menu-item-checkmark-height-medium: 10px; - --spectrum-menu-item-checkmark-height-large: 12px; - --spectrum-menu-item-checkmark-height-extra-large: 14px; - --spectrum-menu-item-checkmark-width-small: 10px; - --spectrum-menu-item-checkmark-width-medium: 10px; - --spectrum-menu-item-checkmark-width-large: 12px; - --spectrum-menu-item-checkmark-width-extra-large: 14px; - --spectrum-menu-item-selectable-edge-to-text-not-selected-small: 28px; - --spectrum-menu-item-selectable-edge-to-text-not-selected-medium: 32px; - --spectrum-menu-item-selectable-edge-to-text-not-selected-large: 38px; - --spectrum-menu-item-selectable-edge-to-text-not-selected-extra-large: 45px; - - --spectrum-pagination-item-inline-spacing: 5px; - --spectrum-pagination-textfield-width: var(--spectrum-spacing-700); - - --spectrum-slider-ramp-track-height: 16px; - --spectrum-slider-tick-mark-height: 10px; - - --spectrum-standard-dialog-spacing-edge-to-content: var(--spectrum-spacing-500); - --spectrum-takeover-dialog-spacing-grid-padding: var(--spectrum-spacing-500); - --spectrum-takeover-dialog-spacing-header-gap: var(--spectrum-spacing-400); - --spectrum-takeover-dialog-spacing-title-to-body: var(--spectrum-spacing-500); - - --spectrum-treeview-indicator-inset-block-start: 5px; - --spectrum-treeview-item-indentation-small: var(--spectrum-spacing-200); - --spectrum-treeview-item-indentation-medium: var(--spectrum-spacing-300); - --spectrum-treeview-item-indentation-large: 20px; - --spectrum-treeview-item-indentation-extra-large: var(--spectrum-spacing-400); - --spectrum-treeview-item-min-block-size-thumbnail-offset-medium: 0px; - - /* To get a square that measures 10px on the diagonal, the sides have to be 8px */ - --spectrum-tooltip-tip-square-size: 8px; - - --spectrum-ui-icon-medium-display: block; - --spectrum-ui-icon-large-display: none; - - --spectrum-well-border-radius: var(--spectrum-spacing-75); - --spectrum-well-margin-top: var(--spectrum-spacing-75); - --spectrum-well-min-width: 240px; - --spectrum-well-padding: var(--spectrum-spacing-300); - - /* XXL and XXS icon sizes are not within the design spec and are planned to be deprecated in Spectrum 2. */ - --spectrum-workflow-icon-size-xxl: 32px; - --spectrum-workflow-icon-size-xxs: 12px; - - --spectrum-in-field-button-side-edge-to-fill-small: 4px; - --spectrum-in-field-button-side-edge-to-fill-medium: 3px; - --spectrum-in-field-button-side-edge-to-fill-large: 4px; - --spectrum-in-field-button-side-edge-to-fill-extra-large: 4px; - - --spectrum-field-edge-to-icon-75: 4px; - --spectrum-field-edge-to-icon-100: 5px; - --spectrum-field-edge-to-icon-200: 6px; - --spectrum-field-edge-to-icon-300: 10px; -} diff --git a/tokens/dist/json/tokens.json b/tokens/dist/json/tokens.json index 1bae2165578..4ad579947d3 100644 --- a/tokens/dist/json/tokens.json +++ b/tokens/dist/json/tokens.json @@ -269,6 +269,46 @@ "value": "rgb(86, 129, 255)" } }, + "accordion-background-color-default": { + "prop": "--spectrum-accordion-background-color-default", + "ref": "color-mix(in sRGB, var(--spectrum-gray-900) var(--spectrum-background-opacity-default), transparent)", + "light": { + "value": "rgb(19, 19, 19)" + }, + "dark": { + "value": "rgb(242, 242, 242)" + } + }, + "accordion-background-color-down": { + "prop": "--spectrum-accordion-background-color-down", + "ref": "color-mix(in sRGB, var(--spectrum-gray-900) var(--spectrum-background-opacity-down), transparent)", + "light": { + "value": "rgb(19, 19, 19)" + }, + "dark": { + "value": "rgb(242, 242, 242)" + } + }, + "accordion-background-color-hover": { + "prop": "--spectrum-accordion-background-color-hover", + "ref": "color-mix(in sRGB, var(--spectrum-gray-900) var(--spectrum-background-opacity-hover), transparent)", + "light": { + "value": "rgb(19, 19, 19)" + }, + "dark": { + "value": "rgb(242, 242, 242)" + } + }, + "accordion-background-color-key-focus": { + "prop": "--spectrum-accordion-background-color-key-focus", + "ref": "color-mix(in sRGB, var(--spectrum-gray-900) var(--spectrum-background-opacity-key-focus), transparent)", + "light": { + "value": "rgb(19, 19, 19)" + }, + "dark": { + "value": "rgb(242, 242, 242)" + } + }, "accordion-bottom-to-text-compact-extra-large": { "prop": "--spectrum-accordion-bottom-to-text-compact-extra-large", "desktop": { @@ -417,6 +457,16 @@ "value": "15px" } }, + "accordion-component-edge-to-text": { + "prop": "--spectrum-accordion-component-edge-to-text", + "ref": "var(--spectrum-component-edge-to-text-75)", + "desktop": { + "value": "9px" + }, + "mobile": { + "value": "11px" + } + }, "accordion-content-area-bottom-to-content": { "prop": "--spectrum-accordion-content-area-bottom-to-content", "desktop": { @@ -471,6 +521,21 @@ "value": "10px" } }, + "accordion-corner-radius": { + "prop": "--spectrum-accordion-corner-radius", + "ref": "var(--spectrum-corner-radius-100)", + "value": "4px" + }, + "accordion-disclosure-indicator-height": { + "prop": "--spectrum-accordion-disclosure-indicator-height", + "ref": "var(--spectrum-component-height-100)", + "desktop": { + "value": "32px" + }, + "mobile": { + "value": "40px" + } + }, "accordion-disclosure-indicator-to-text": { "prop": "--spectrum-accordion-disclosure-indicator-to-text", "value": "0px" @@ -511,6 +576,16 @@ "value": "9px" } }, + "accordion-divider-color": { + "prop": "--spectrum-accordion-divider-color", + "ref": "var(--spectrum-gray-200)", + "light": { + "value": "rgb(225, 225, 225)" + }, + "dark": { + "value": "rgb(50, 50, 50)" + } + }, "accordion-edge-to-content-area-extra-large": { "prop": "--spectrum-accordion-edge-to-content-area-extra-large", "value": "17px" @@ -535,14 +610,219 @@ "prop": "--spectrum-accordion-edge-to-text", "value": "0px" }, + "accordion-focus-indicator-color": { + "prop": "--spectrum-accordion-focus-indicator-color", + "ref": "var(--spectrum-focus-indicator-color)", + "light": { + "value": "rgb(75, 117, 255)" + }, + "dark": { + "value": "rgb(64, 105, 253)" + } + }, "accordion-focus-indicator-gap": { "prop": "--spectrum-accordion-focus-indicator-gap", + "ref": "var(--spectrum-focus-indicator-gap)", + "value": "2px" + }, + "accordion-focus-indicator-thickness": { + "prop": "--spectrum-accordion-focus-indicator-thickness", + "ref": "var(--spectrum-focus-indicator-thickness)", "value": "2px" }, + "accordion-item-content-area-bottom-to-content": { + "prop": "--spectrum-accordion-item-content-area-bottom-to-content", + "ref": "var(--spectrum-accordion-content-area-bottom-to-content)", + "desktop": { + "value": "16px" + }, + "mobile": { + "value": "20px" + } + }, + "accordion-item-content-area-top-to-content": { + "prop": "--spectrum-accordion-item-content-area-top-to-content", + "ref": "var(--spectrum-accordion-content-area-top-to-content)", + "desktop": { + "value": "8px" + }, + "mobile": { + "value": "10px" + } + }, + "accordion-item-content-color": { + "prop": "--spectrum-accordion-item-content-color", + "ref": "var(--spectrum-body-color)", + "light": { + "value": "rgb(41, 41, 41)" + }, + "dark": { + "value": "rgb(219, 219, 219)" + } + }, + "accordion-item-content-disabled-color": { + "prop": "--spectrum-accordion-item-content-disabled-color", + "ref": "var(--spectrum-disabled-content-color)", + "light": { + "value": "rgb(198, 198, 198)" + }, + "dark": { + "value": "rgb(68, 68, 68)" + } + }, + "accordion-item-content-font": { + "prop": "--spectrum-accordion-item-content-font", + "ref": "var(--spectrum-sans-font-family-stack)", + "value": "adobe-clean, var(--spectrum-sans-serif-font-family), \"Source Sans Pro\", -apple-system, BlinkMacSystemFont, \"Segoe UI\", Roboto, Ubuntu, \"Trebuchet MS\", \"Lucida Grande\", sans-serif" + }, + "accordion-item-content-font-size": { + "prop": "--spectrum-accordion-item-content-font-size", + "ref": "var(--spectrum-body-size-s)", + "desktop": { + "value": "14px" + }, + "mobile": { + "value": "17px" + } + }, + "accordion-item-content-font-style": { + "prop": "--spectrum-accordion-item-content-font-style", + "ref": "var(--spectrum-body-sans-serif-font-style)", + "value": "normal" + }, + "accordion-item-content-font-weight": { + "prop": "--spectrum-accordion-item-content-font-weight", + "ref": "var(--spectrum-body-sans-serif-font-weight)", + "value": "400" + }, + "accordion-item-content-line-height": { + "prop": "--spectrum-accordion-item-content-line-height", + "ref": "var(--spectrum-line-height-100)", + "value": 1.3 + }, + "accordion-item-header-bottom-to-text": { + "prop": "--spectrum-accordion-item-header-bottom-to-text", + "ref": "var(--spectrum-accordion-bottom-to-text-regular-medium)", + "desktop": { + "value": "9px" + }, + "mobile": { + "value": "13px" + } + }, + "accordion-item-header-color-default": { + "prop": "--spectrum-accordion-item-header-color-default", + "ref": "var(--spectrum-neutral-content-color-default)", + "light": { + "value": "rgb(41, 41, 41)" + }, + "dark": { + "value": "rgb(219, 219, 219)" + } + }, + "accordion-item-header-color-down": { + "prop": "--spectrum-accordion-item-header-color-down", + "ref": "var(--spectrum-neutral-content-color-down)", + "light": { + "value": "rgb(19, 19, 19)" + }, + "dark": { + "value": "rgb(242, 242, 242)" + } + }, + "accordion-item-header-color-hover": { + "prop": "--spectrum-accordion-item-header-color-hover", + "ref": "var(--spectrum-neutral-content-color-hover)", + "light": { + "value": "rgb(19, 19, 19)" + }, + "dark": { + "value": "rgb(242, 242, 242)" + } + }, + "accordion-item-header-color-key-focus": { + "prop": "--spectrum-accordion-item-header-color-key-focus", + "ref": "var(--spectrum-neutral-content-color-key-focus)", + "light": { + "value": "rgb(19, 19, 19)" + }, + "dark": { + "value": "rgb(242, 242, 242)" + } + }, + "accordion-item-header-disabled-color": { + "prop": "--spectrum-accordion-item-header-disabled-color", + "ref": "var(--spectrum-disabled-content-color)", + "light": { + "value": "rgb(198, 198, 198)" + }, + "dark": { + "value": "rgb(68, 68, 68)" + } + }, + "accordion-item-header-font": { + "prop": "--spectrum-accordion-item-header-font", + "ref": "var(--spectrum-sans-font-family-stack)", + "value": "adobe-clean, var(--spectrum-sans-serif-font-family), \"Source Sans Pro\", -apple-system, BlinkMacSystemFont, \"Segoe UI\", Roboto, Ubuntu, \"Trebuchet MS\", \"Lucida Grande\", sans-serif" + }, + "accordion-item-header-font-size": { + "prop": "--spectrum-accordion-item-header-font-size", + "ref": "var(--spectrum-font-size-300)", + "desktop": { + "value": "18px" + }, + "mobile": { + "value": "22px" + } + }, + "accordion-item-header-font-style": { + "prop": "--spectrum-accordion-item-header-font-style", + "ref": "var(--spectrum-default-font-style)", + "value": "normal" + }, + "accordion-item-header-font-weight": { + "prop": "--spectrum-accordion-item-header-font-weight", + "ref": "var(--spectrum-bold-font-weight)", + "value": "700" + }, + "accordion-item-header-line-height": { + "prop": "--spectrum-accordion-item-header-line-height", + "value": "1.25" + }, + "accordion-item-header-top-to-text": { + "prop": "--spectrum-accordion-item-header-top-to-text", + "ref": "var(--spectrum-accordion-top-to-text-regular-medium)", + "desktop": { + "value": "9px" + }, + "mobile": { + "value": "10px" + } + }, + "accordion-item-height": { + "prop": "--spectrum-accordion-item-height", + "ref": "var(--spectrum-component-height-200)", + "desktop": { + "value": "40px" + }, + "mobile": { + "value": "50px" + } + }, "accordion-item-to-divider": { "prop": "--spectrum-accordion-item-to-divider", "value": "0px" }, + "accordion-min-block-size": { + "prop": "--spectrum-accordion-min-block-size", + "ref": "max(var(--spectrum-accordion-item-height), calc(var(--spectrum-accordion-item-header-top-to-text) + var(--spectrum-accordion-item-header-bottom-to-text) + (var(--spectrum-accordion-item-header-font-size) * var(--spectrum-accordion-item-header-line-height))))", + "desktop": { + "value": "18px" + }, + "mobile": { + "value": "22px" + } + }, "accordion-minimum-width": { "prop": "--spectrum-accordion-minimum-width", "desktop": { @@ -1000,6 +1280,82 @@ "prop": "--spectrum-android-elevation", "value": "2dp" }, + "animation-duration-0": { + "prop": "--spectrum-animation-duration-0", + "value": "0ms" + }, + "animation-duration-100": { + "prop": "--spectrum-animation-duration-100", + "value": "130ms" + }, + "animation-duration-1000": { + "prop": "--spectrum-animation-duration-1000", + "value": "500ms" + }, + "animation-duration-200": { + "prop": "--spectrum-animation-duration-200", + "value": "160ms" + }, + "animation-duration-2000": { + "prop": "--spectrum-animation-duration-2000", + "value": "1000ms" + }, + "animation-duration-300": { + "prop": "--spectrum-animation-duration-300", + "value": "190ms" + }, + "animation-duration-400": { + "prop": "--spectrum-animation-duration-400", + "value": "220ms" + }, + "animation-duration-4000": { + "prop": "--spectrum-animation-duration-4000", + "value": "2000ms" + }, + "animation-duration-500": { + "prop": "--spectrum-animation-duration-500", + "value": "250ms" + }, + "animation-duration-600": { + "prop": "--spectrum-animation-duration-600", + "value": "300ms" + }, + "animation-duration-6000": { + "prop": "--spectrum-animation-duration-6000", + "value": "3000ms" + }, + "animation-duration-700": { + "prop": "--spectrum-animation-duration-700", + "value": "3500ms" + }, + "animation-duration-800": { + "prop": "--spectrum-animation-duration-800", + "value": "400ms" + }, + "animation-duration-900": { + "prop": "--spectrum-animation-duration-900", + "value": "450ms" + }, + "animation-ease-in": { + "prop": "--spectrum-animation-ease-in", + "value": "cubic-bezier(0.5, 0, 1, 1)" + }, + "animation-ease-in-out": { + "prop": "--spectrum-animation-ease-in-out", + "value": "cubic-bezier(0.45, 0, 0.4, 1)" + }, + "animation-ease-linear": { + "prop": "--spectrum-animation-ease-linear", + "value": "cubic-bezier(0, 0, 1, 1)" + }, + "animation-ease-out": { + "prop": "--spectrum-animation-ease-out", + "value": "cubic-bezier(0, 0, 0.4, 1)" + }, + "animation-linear": { + "prop": "--spectrum-animation-linear", + "value": "cubic-bezier(0, 0, 1, 1)" + }, "arrow-icon-size-100": { "prop": "--spectrum-arrow-icon-size-100", "desktop": { @@ -1182,7 +1538,7 @@ "avatar-opacity-disabled": { "prop": "--spectrum-avatar-opacity-disabled", "ref": "var(--spectrum-opacity-disabled)", - "value": "0.3" + "value": "30%" }, "avatar-size-100": { "prop": "--spectrum-avatar-size-100", @@ -1442,19 +1798,23 @@ }, "background-opacity-default": { "prop": "--spectrum-background-opacity-default", - "value": "0" + "ref": "0", + "value": "0%" }, "background-opacity-down": { "prop": "--spectrum-background-opacity-down", - "value": "0.1" + "ref": "0.1", + "value": "10%" }, "background-opacity-hover": { "prop": "--spectrum-background-opacity-hover", - "value": "0.1" + "ref": "0.1", + "value": "10%" }, "background-opacity-key-focus": { "prop": "--spectrum-background-opacity-key-focus", - "value": "0.1" + "ref": "0.1", + "value": "10%" }, "background-pasteboard-color": { "prop": "--spectrum-background-pasteboard-color", @@ -2673,7 +3033,8 @@ }, "card-selection-background-color-opacity": { "prop": "--spectrum-card-selection-background-color-opacity", - "value": "0.95" + "ref": "0.95", + "value": "95%" }, "card-selection-background-size": { "prop": "--spectrum-card-selection-background-size", @@ -3469,10 +3830,19 @@ "value": "rgb(192, 119, 80)" } }, + "cjk-font": { + "prop": "--spectrum-cjk-font", + "ref": "var(--spectrum-cjk-font-family-stack)", + "value": "adobe-clean-han-japanese, var(--spectrum-cjk-font-family), sans-serif" + }, "cjk-font-family": { "prop": "--spectrum-cjk-font-family", "value": "Adobe Clean Han" }, + "cjk-font-family-stack": { + "prop": "--spectrum-cjk-font-family-stack", + "value": "adobe-clean-han-japanese, var(--spectrum-cjk-font-family), sans-serif" + }, "cjk-letter-spacing": { "prop": "--spectrum-cjk-letter-spacing", "ref": "var(--spectrum-letter-spacing)", @@ -3522,7 +3892,8 @@ }, "coach-indicator-opacity": { "prop": "--spectrum-coach-indicator-opacity", - "value": "0.2" + "ref": "0.2", + "value": "20%" }, "coach-mark-body-font-size": { "prop": "--spectrum-coach-mark-body-font-size", @@ -3783,6 +4154,10 @@ "prop": "--spectrum-code-font-family", "value": "Source Code Pro" }, + "code-font-family-stack": { + "prop": "--spectrum-code-font-family-stack", + "value": "\"Source Code Pro\", Monaco, monospace" + }, "code-font-style": { "prop": "--spectrum-code-font-style", "ref": "var(--spectrum-default-font-style)", @@ -3920,7 +4295,8 @@ }, "color-area-border-opacity": { "prop": "--spectrum-color-area-border-opacity", - "value": "0.1" + "ref": "0.1", + "value": "10%" }, "color-area-border-rounding": { "prop": "--spectrum-color-area-border-rounding", @@ -4011,7 +4387,8 @@ }, "color-handle-inner-border-opacity": { "prop": "--spectrum-color-handle-inner-border-opacity", - "value": "0.42" + "ref": "0.42", + "value": "42%" }, "color-handle-inner-border-width": { "prop": "--spectrum-color-handle-inner-border-width", @@ -4025,7 +4402,7 @@ "color-handle-outer-border-opacity": { "prop": "--spectrum-color-handle-outer-border-opacity", "ref": "var(--spectrum-color-handle-inner-border-opacity)", - "value": "0.42" + "value": "42%" }, "color-handle-outer-border-width": { "prop": "--spectrum-color-handle-outer-border-width", @@ -4112,7 +4489,8 @@ }, "color-slider-border-opacity": { "prop": "--spectrum-color-slider-border-opacity", - "value": "0.1" + "ref": "0.1", + "value": "10%" }, "color-slider-border-rounding": { "prop": "--spectrum-color-slider-border-rounding", @@ -4153,7 +4531,8 @@ }, "color-wheel-border-opacity": { "prop": "--spectrum-color-wheel-border-opacity", - "value": "0.1" + "ref": "0.1", + "value": "10%" }, "color-wheel-color-area-margin": { "prop": "--spectrum-color-wheel-color-area-margin", @@ -4761,7 +5140,6 @@ }, "corner-radius-1000": { "prop": "--spectrum-corner-radius-1000", - "ref": 0.5, "value": "9999px" }, "corner-radius-200": { @@ -6000,11 +6378,13 @@ }, "drop-zone-background-color-opacity": { "prop": "--spectrum-drop-zone-background-color-opacity", - "value": "0.1" + "ref": "0.1", + "value": "10%" }, "drop-zone-background-color-opacity-filled": { "prop": "--spectrum-drop-zone-background-color-opacity-filled", - "value": "0.3" + "ref": "0.3", + "value": "30%" }, "drop-zone-body-font-size": { "prop": "--spectrum-drop-zone-body-font-size", @@ -6811,6 +7191,29 @@ "prop": "--spectrum-focus-indicator-thickness", "value": "2px" }, + "font-family": { + "prop": "--spectrum-font-family", + "ref": "var(--spectrum-sans-font-family-stack)", + "value": "adobe-clean, var(--spectrum-sans-serif-font-family), \"Source Sans Pro\", -apple-system, BlinkMacSystemFont, \"Segoe UI\", Roboto, Ubuntu, \"Trebuchet MS\", \"Lucida Grande\", sans-serif" + }, + "font-family-ar": { + "prop": "--spectrum-font-family-ar", + "value": "myriad-arabic, adobe-clean, \"Source Sans Pro\", -apple-system, BlinkMacSystemFont, \"Segoe UI\", Roboto, Ubuntu, \"Trebuchet MS\", \"Lucida Grande\", sans-serif" + }, + "font-family-he": { + "prop": "--spectrum-font-family-he", + "value": "myriad-hebrew, adobe-clean, \"Source Sans Pro\", -apple-system, BlinkMacSystemFont, \"Segoe UI\", Roboto, Ubuntu, \"Trebuchet MS\", \"Lucida Grande\", sans-serif" + }, + "font-size": { + "prop": "--spectrum-font-size", + "ref": "var(--spectrum-font-size-100)", + "desktop": { + "value": "14px" + }, + "mobile": { + "value": "17px" + } + }, "font-size-100": { "prop": "--spectrum-font-size-100", "desktop": { @@ -6973,6 +7376,11 @@ "value": "44px" } }, + "font-style": { + "prop": "--spectrum-font-style", + "ref": "var(--spectrum-default-font-style)", + "value": "normal" + }, "fuchsia-100": { "prop": "--spectrum-fuchsia-100", "light": { @@ -10171,7 +10579,8 @@ }, "menu-item-background-opacity": { "prop": "--spectrum-menu-item-background-opacity", - "value": "0" + "ref": "0", + "value": "0%" }, "menu-item-edge-to-content-not-selected-extra-large": { "prop": "--spectrum-menu-item-edge-to-content-not-selected-extra-large", @@ -11378,7 +11787,8 @@ }, "opacity-disabled": { "prop": "--spectrum-opacity-disabled", - "value": "0.3" + "ref": "0.3", + "value": "30%" }, "orange-100": { "prop": "--spectrum-orange-100", @@ -11562,10 +11972,12 @@ "overlay-opacity": { "prop": "--spectrum-overlay-opacity", "light": { - "value": "0.4" + "ref": "0.4", + "value": "40%" }, "dark": { - "value": "0.6" + "ref": "0.6", + "value": "60%" } }, "picker-border-width": { @@ -11810,10 +12222,12 @@ "popover-border-opacity": { "prop": "--spectrum-popover-border-opacity", "light": { - "value": "0" + "ref": "0", + "value": "0%" }, "dark": { - "value": "1.0" + "ref": "1.0", + "value": "100%" } }, "popover-edge-to-content-area": { @@ -12654,6 +13068,15 @@ "ref": "regular", "value": "400" }, + "sans-font-family-stack": { + "prop": "--spectrum-sans-font-family-stack", + "value": "adobe-clean, var(--spectrum-sans-serif-font-family), \"Source Sans Pro\", -apple-system, BlinkMacSystemFont, \"Segoe UI\", Roboto, Ubuntu, \"Trebuchet MS\", \"Lucida Grande\", sans-serif" + }, + "sans-serif-font": { + "prop": "--spectrum-sans-serif-font", + "ref": "var(--spectrum-sans-font-family-stack)", + "value": "adobe-clean, var(--spectrum-sans-serif-font-family), \"Source Sans Pro\", -apple-system, BlinkMacSystemFont, \"Segoe UI\", Roboto, Ubuntu, \"Trebuchet MS\", \"Lucida Grande\", sans-serif" + }, "sans-serif-font-family": { "prop": "--spectrum-sans-serif-font-family", "value": "Adobe Clean" @@ -12981,10 +13404,19 @@ "value": "10px" } }, + "serif-font": { + "prop": "--spectrum-serif-font", + "ref": "var(--spectrum-serif-font-family-stack)", + "value": "adobe-clean-serif, var(--spectrum-serif-font-family), \"Source Serif Pro\", Georgia, serif" + }, "serif-font-family": { "prop": "--spectrum-serif-font-family", "value": "Adobe Clean Serif" }, + "serif-font-family-stack": { + "prop": "--spectrum-serif-font-family-stack", + "value": "adobe-clean-serif, var(--spectrum-serif-font-family), \"Source Serif Pro\", Georgia, serif" + }, "side-focus-indicator": { "prop": "--spectrum-side-focus-indicator", "value": "4px" @@ -13858,19 +14290,23 @@ }, "stack-item-selected-background-opacity-emphasized": { "prop": "--spectrum-stack-item-selected-background-opacity-emphasized", - "value": "0.1" + "ref": "0.1", + "value": "10%" }, "stack-item-selected-background-opacity-emphasized-down": { "prop": "--spectrum-stack-item-selected-background-opacity-emphasized-down", - "value": "0.15" + "ref": "0.15", + "value": "15%" }, "stack-item-selected-background-opacity-emphasized-hover": { "prop": "--spectrum-stack-item-selected-background-opacity-emphasized-hover", - "value": "0.15" + "ref": "0.15", + "value": "15%" }, "stack-item-selected-background-opacity-emphasized-key-focus": { "prop": "--spectrum-stack-item-selected-background-opacity-emphasized-key-focus", - "value": "0.15" + "ref": "0.15", + "value": "15%" }, "stack-item-start-edge-to-content": { "prop": "--spectrum-stack-item-start-edge-to-content", @@ -14268,7 +14704,8 @@ }, "swatch-border-opacity": { "prop": "--spectrum-swatch-border-opacity", - "value": "0.42" + "ref": "0.42", + "value": "42%" }, "swatch-disabled-icon-border-color": { "prop": "--spectrum-swatch-disabled-icon-border-color", @@ -14277,7 +14714,8 @@ }, "swatch-disabled-icon-border-opacity": { "prop": "--spectrum-swatch-disabled-icon-border-opacity", - "value": "0.42" + "ref": "0.42", + "value": "42%" }, "swatch-group-border-color": { "prop": "--spectrum-swatch-group-border-color", @@ -14291,7 +14729,8 @@ }, "swatch-group-border-opacity": { "prop": "--spectrum-swatch-group-border-opacity", - "value": "0.2" + "ref": "0.2", + "value": "20%" }, "swatch-group-spacing-spacious": { "prop": "--spectrum-swatch-group-spacing-spacious", @@ -15404,7 +15843,8 @@ }, "table-row-down-opacity": { "prop": "--spectrum-table-row-down-opacity", - "value": "0.1" + "ref": "0.1", + "value": "10%" }, "table-row-height-extra-large": { "prop": "--spectrum-table-row-height-extra-large", @@ -15570,7 +16010,8 @@ }, "table-row-hover-opacity": { "prop": "--spectrum-table-row-hover-opacity", - "value": "0.07" + "ref": "0.07", + "value": "7.000000000000001%" }, "table-row-top-to-text-extra-large": { "prop": "--spectrum-table-row-top-to-text-extra-large", @@ -15782,19 +16223,23 @@ }, "table-selected-row-background-opacity": { "prop": "--spectrum-table-selected-row-background-opacity", - "value": "0.1" + "ref": "0.1", + "value": "10%" }, "table-selected-row-background-opacity-hover": { "prop": "--spectrum-table-selected-row-background-opacity-hover", - "value": "0.15" + "ref": "0.15", + "value": "15%" }, "table-selected-row-background-opacity-non-emphasized": { "prop": "--spectrum-table-selected-row-background-opacity-non-emphasized", - "value": "0.1" + "ref": "0.1", + "value": "10%" }, "table-selected-row-background-opacity-non-emphasized-hover": { "prop": "--spectrum-table-selected-row-background-opacity-non-emphasized-hover", - "value": "0.15" + "ref": "0.15", + "value": "15%" }, "table-thumbnail-to-top-minimum-extra-large": { "prop": "--spectrum-table-thumbnail-to-top-minimum-extra-large", @@ -16338,7 +16783,8 @@ }, "thumbnail-border-opacity": { "prop": "--spectrum-thumbnail-border-opacity", - "value": "0.1" + "ref": "0.1", + "value": "10%" }, "thumbnail-corner-radius": { "prop": "--spectrum-thumbnail-corner-radius", @@ -16352,7 +16798,7 @@ "thumbnail-opacity-disabled": { "prop": "--spectrum-thumbnail-opacity-disabled", "ref": "var(--spectrum-opacity-disabled)", - "value": "0.3" + "value": "30%" }, "thumbnail-size-100": { "prop": "--spectrum-thumbnail-size-100", @@ -17143,11 +17589,13 @@ }, "tree-view-selected-row-background-opacity-emphasized": { "prop": "--spectrum-tree-view-selected-row-background-opacity-emphasized", - "value": "0.1" + "ref": "0.1", + "value": "10%" }, "tree-view-selected-row-background-opacity-emphasized-hover": { "prop": "--spectrum-tree-view-selected-row-background-opacity-emphasized-hover", - "value": "0.15" + "ref": "0.15", + "value": "15%" }, "tree-view-top-to-action-button": { "prop": "--spectrum-tree-view-top-to-action-button", diff --git a/tokens/package.json b/tokens/package.json index 238832f1093..bbe970f852e 100644 --- a/tokens/package.json +++ b/tokens/package.json @@ -23,16 +23,29 @@ }, "main": "dist/css/index.css", "module": "style-dictionary.config.js", + "scripts": { + "build": "run-s clean build:tokens build:entry build:format build:min", + "build:entry": "postcss ./dist/css/index.css --replace", + "build:format": "prettier --write --cache --log-level error --ignore-unknown --no-error-on-unmatched-pattern ./dist/*/*", + "build:min": "postcss ./dist/css/index.css --dir ./dist/css --ext min.css", + "build:tokens": "style-dictionary build --config style-dictionary.config.js --verbose", + "clean": "rimraf dist", + "compare": "tdiff report --old-token-version @adobe/spectrum-tokens@${1:-13.7.0} --new-token-version @adobe/spectrum-tokens@${2:-13.9.0} --format markdown --output dist/tokens-diff.md" + }, "devDependencies": { "@adobe/spectrum-tokens": "^13.10.1", "@adobe/token-diff-generator": "^2.0.0", - "@spectrum-tools/postcss-rgb-mapping": "1.1.0", "deepmerge": "^4.3.1", "glob": "^11.0.3", "lodash-es": "^4.17.21", + "npm-run-all2": "^8.0.4", "postcss": "^8.5.6", + "postcss-cli": "^11.0.1", "postcss-sorting": "^9.1.0", - "style-dictionary": "^4.4.0" + "prettier": "^3.6.2", + "rimraf": "^6.0.1", + "style-dictionary": "^4.4.0", + "yargs": "^18.0.0" }, "keywords": [ "design-system", diff --git a/tokens/postcss.config.js b/tokens/postcss.config.js index 1a7d7d22cfa..1c6ccc5ad58 100644 --- a/tokens/postcss.config.js +++ b/tokens/postcss.config.js @@ -13,32 +13,25 @@ import postcssConfig from "../postcss.config.js"; -export default (options) => postcssConfig({ - ...options, +import yargs from "yargs"; +import { hideBin } from "yargs/helpers"; + +const { ext } = yargs(hideBin(process.argv)) + .option("ext", { + type: "string", + default: ".css", + }) + .argv; + +/** @type {import("postcss").ProcessOptions} */ +export default (ctx = {}) => postcssConfig({ + ...ctx, + minify: ext?.includes("min.") ?? false, env: "production", - map: false, additionalPlugins: { - "@spectrum-tools/postcss-rgb-mapping": { - colorFunctionalNotation: false, - }, "postcss-sorting": { order: ["custom-properties", "declarations", "at-rules", "rules"], "properties-order": "alphabetical", }, - cssnano: { - preset: [ - "cssnano-preset-advanced", - { - colormin: false, - discardComments: { removeAll: true }, - // @todo yarn add -DW css-declaration-sorter - cssDeclarationSorter: false, // @todo { order: "smacss" }, - normalizeWhitespace: false, - }, - ], - }, - "postcss-licensing": { - filename: "../COPYRIGHT", - }, }, }); diff --git a/tokens/project.json b/tokens/project.json index 70993a76967..c387e473dc8 100644 --- a/tokens/project.json +++ b/tokens/project.json @@ -2,46 +2,48 @@ "name": "tokens", "tag": ["tokens"], "namedInputs": { - "core": [ - "{projectRoot}/custom/*.css" - ], + "core": ["{projectRoot}/custom/*.css"], "scripts": ["{projectRoot}/style-dictionary.config.js", "{projectRoot}/utilities/*.js"], - "tools": ["{projectRoot}/postcss.config.js", "{projectRoot}/tasks/token-rollup.js"] + "tools": ["{projectRoot}/postcss.config.js"] }, "targets": { "build": { "cache": false, - "dependsOn": ["clean", "style-dictionary"], + "dependsOn": ["clean"], "executor": "nx:run-commands", "inputs": ["core", "tools", { "externalDependencies": ["postcss"] }], - "options": { - "commands": [ - "node --no-warnings ./tasks/token-rollup.js", - ], - "cwd": "{projectRoot}", - "parallel": false - }, - "outputs": [ - "{projectRoot}/dist/css/*-vars.css", - "{projectRoot}/dist/css/index.css" - ] - }, - "clean": { - "cache": false, - "executor": "nx:run-commands", - "inputs": ["{projectRoot}/dist", { "externalDependencies": ["rimraf"] }], - "options": { - "commands": [ - "rimraf {projectRoot}/dist", - "test -d {projectRoot}/dist && echo \"Error: dist directory could not be removed\" && exit 1 || exit 0" - ], - "parallel": false - }, - "outputs": [] - }, - "diff": { - "cache": true, - "executor": "nx:run-commands", + "options": { + "commands": [ + "style-dictionary build --config style-dictionary.config.js --verbose", + "postcss ./dist/css/index.css --replace", + "postcss ./dist/css/index.css --dir ./dist/css --ext min.css", + "prettier --write --cache --log-level error --ignore-unknown --no-error-on-unmatched-pattern ./dist/*/*" + ], + "cwd": "{projectRoot}", + "parallel": false + }, + "outputs": [ + "{projectRoot}/dist/css/index.css", + "{projectRoot}/dist/css/index.min.css", + "{projectRoot}/dist/json/tokens.json" + ] + }, + "clean": { + "cache": false, + "executor": "nx:run-commands", + "inputs": ["{projectRoot}/dist", { "externalDependencies": ["rimraf"] }], + "options": { + "commands": [ + "rimraf {projectRoot}/dist", + "test -d {projectRoot}/dist && echo \"Error: dist directory could not be removed\" && exit 1 || exit 0" + ], + "parallel": false + }, + "outputs": [] + }, + "compare": { + "cache": true, + "executor": "nx:run-commands", "inputs": [{ "externalDependencies": ["glob", "@adobe/token-diff-generator"] }], "options": { "commands": [ @@ -50,34 +52,9 @@ "forwardAllArgs": true, "v1": "13.10.0" }, - "outputs": [ - "{projectRoot}/dist/tokens-diff.md" - ] - }, - "format": {}, - "lint": {}, - "style-dictionary": { - "dependsOn": ["clean"], - "executor": "nx:run-commands", - "inputs": [ - "{projectRoot}/postcss.config.js", - "{projectRoot}/style-dictionary.config.js", - "{projectRoot}/utilities/style-dictionary.utils.js" - ], - "options": { - "commands": [ - "style-dictionary build --config style-dictionary.config.js" - ], - "cwd": "{projectRoot}" - }, - "outputs": [ - "{projectRoot}/dist/css/global-vars.css", - "{projectRoot}/dist/css/light-vars.css", - "{projectRoot}/dist/css/dark-vars.css", - "{projectRoot}/dist/css/medium-vars.css", - "{projectRoot}/dist/css/large-vars.css", - "{projectRoot}/dist/json/tokens.json" - ] - } - } + "outputs": ["{projectRoot}/dist/tokens-diff.md"] + }, + "format": {}, + "lint": {} + } } diff --git a/tokens/style-dictionary.config.js b/tokens/style-dictionary.config.js index e982115833a..09d8c12c369 100644 --- a/tokens/style-dictionary.config.js +++ b/tokens/style-dictionary.config.js @@ -11,23 +11,25 @@ * governing permissions and limitations under the License. */ -import { dirname, join, sep } from "path"; +import fg from "fast-glob"; +import { capitalize } from "lodash-es"; +import { basename, dirname, join, resolve, sep } from "path"; +import { fileURLToPath } from "url"; + +const __dirname = fileURLToPath(new URL(".", import.meta.url)); import StyleDictionary from "style-dictionary"; import { - AttributeSetsTransform, CSSBorderRoundingTransform, + CSSOpacityPercentTransform, CSSOpenTypeTransform, CSSSetsFormatter, DataJsonFormatter, - NameKebabTransfom, } from "./utilities/index.js"; StyleDictionary.registerTransform(CSSOpenTypeTransform); StyleDictionary.registerTransform(CSSBorderRoundingTransform); -StyleDictionary.registerTransform(NameKebabTransfom); -StyleDictionary.registerTransform(AttributeSetsTransform); - +StyleDictionary.registerTransform(CSSOpacityPercentTransform); StyleDictionary.registerFormat(CSSSetsFormatter); StyleDictionary.registerFormat(DataJsonFormatter); @@ -39,127 +41,97 @@ StyleDictionary.registerFormat(DataJsonFormatter); const tokensPath = import.meta.resolve("@adobe/spectrum-tokens/package.json")?.replace(/file:\/\//, ""); const tokensDir = dirname(tokensPath); +/** + * @type {import('style-dictionary').Config} + */ export default { - source: [join(tokensDir, "src", "*.json")], + source: [join(tokensDir, "src", "*.json"), "custom-tokens.json", "../components/accordion/tokens.json"], hooks: { transforms: { - [AttributeSetsTransform.name]: AttributeSetsTransform, - [NameKebabTransfom.name]: NameKebabTransfom, [CSSOpenTypeTransform.name]: CSSOpenTypeTransform, [CSSBorderRoundingTransform.name]: CSSBorderRoundingTransform, + [CSSOpacityPercentTransform.name]: CSSOpacityPercentTransform, }, }, platforms: { css: { buildPath: join("dist", "css") + sep, + prefix: "spectrum", + outputReferences: true, + outputReferenceFallbacks: false, + showFileHeader: false, transforms: [ - AttributeSetsTransform.name, - NameKebabTransfom.name, + "name/kebab", CSSOpenTypeTransform.name, CSSBorderRoundingTransform.name, + CSSOpacityPercentTransform.name, ], - prefix: "spectrum", files: [ { format: "css/sets", - options: { showFileHeader: false, outputReferences: true }, - destination: "global-vars.css", filter: (token) => { - const tokenSets = token.path.filter((_, idx, array) => array[idx - 1] == "sets"); - if (tokenSets.includes("wireframe")) return false; - if (tokenSets.length === 0) return true; - return false; - }, - }, - { - format: "css/sets", - options: { - showFileHeader: false, - outputReferences: true, - selector: ".spectrum--medium", - sets: ["desktop"], - }, - destination: "medium-vars.css", - filter: (token) => { - const tokenSets = token.path.filter((_, idx, array) => array[idx - 1] == "sets"); - if (tokenSets.includes("wireframe")) return false; - if (!tokenSets.includes("desktop")) return false; - if (tokenSets.length === 1) return true; - return false; - }, - }, - { - format: "css/sets", - options: { - showFileHeader: false, - outputReferences: true, - selector: ".spectrum--large", - sets: ["mobile"], - }, - destination: "large-vars.css", - filter: (token) => { - // Fetch the sets for this token - const tokenSets = token.path.filter((_, idx, array) => array[idx - 1] == "sets"); - if (tokenSets.includes("wireframe")) return false; - if (!tokenSets.includes("mobile")) return false; - if (tokenSets.length === 1) return true; - return false; + // filter out tokens that are in the local components folder + if (token.filePath?.split(sep)?.includes("components")) return false; + if (token.name.includes("android-")) return false; + if (token.path.includes("sets") && token.path.includes("mobile")) return false; + return true; }, + destination: "index.css", }, { format: "css/sets", - options: { - showFileHeader: false, - outputReferences: true, - selector: ".spectrum--light", - sets: ["light"], - }, - destination: "light-vars.css", + destination: "mobile.css", filter: (token) => { - const tokenSets = token.path.filter((_, idx, array) => array[idx - 1] == "sets"); - if (tokenSets.includes("wireframe")) return false; - if (!tokenSets.includes("light")) return false; - if (tokenSets.length === 1) return true; + // filter out tokens that are in the local components folder + if (token.filePath?.split(sep)?.includes("components")) return false; + if (token.name.includes("android-")) return false; + if (token.path.includes("sets") && token.path.includes("mobile")) return true; return false; }, }, - { + ], + }, + components: { + buildPath: resolve(__dirname, "..", "components") + sep, + prefix: "spectrum", + outputReferences: true, + outputReferenceFallbacks: true, + showFileHeader: false, + transforms: [ + "name/kebab", + CSSOpenTypeTransform.name, + CSSBorderRoundingTransform.name, + CSSOpacityPercentTransform.name, + ], + files: [ + // Iterate over all files in the components folder and build a css file for each + ...(fg.sync("accordion/tokens.json", { cwd: resolve(__dirname, "..", "components") })).map((pkg) => ({ format: "css/sets", + destination: `${dirname(pkg)}/dist/${basename(pkg, ".json")}.css`, options: { - showFileHeader: false, - outputReferences: true, - selector: ".spectrum--dark", - sets: ["dark"], + selector: `.spectrum-${capitalize(dirname(pkg))}`, }, - destination: "dark-vars.css", filter: (token) => { - const tokenSets = token.path.filter((_, idx, array) => array[idx - 1] == "sets"); - if (tokenSets.includes("wireframe")) return false; - if (!tokenSets.includes("dark")) return false; - if (tokenSets.length === 1) return true; + if (token.filePath?.includes(pkg)) return true; + if (token.component == dirname(pkg)) return true; return false; }, - }, + })), ], }, JSON: { buildPath: join("dist", "json") + sep, + prefix: "spectrum", transforms: [ - AttributeSetsTransform.name, - NameKebabTransfom.name, + "name/kebab", CSSOpenTypeTransform.name, CSSBorderRoundingTransform.name, + CSSOpacityPercentTransform.name, ], - prefix: "spectrum", files: [ { format: "json/sets", destination: "tokens.json", - filter: (token) => { - const tokenSets = token.path.filter((_, idx, array) => array[idx - 1] == "sets"); - if (tokenSets.includes("wireframe")) return false; - return true; - }, options: { showFileHeader: false, outputReferences: true, diff --git a/tokens/tasks/token-rollup.js b/tokens/tasks/token-rollup.js deleted file mode 100644 index a7348bd394d..00000000000 --- a/tokens/tasks/token-rollup.js +++ /dev/null @@ -1,167 +0,0 @@ -/*! - * Copyright 2024 Adobe. All rights reserved. - * - * This file is licensed to you under the Apache License, Version 2.0 (the "License"); - * you may not use this file except in compliance with the License. You may obtain a copy - * of the License at - * - * Unless required by applicable law or agreed to in writing, software distributed under - * the License is distributed on an "AS IS" BASIS, WITHOUT WARRANTIES OR REPRESENTATIONS - * OF ANY KIND, either express or implied. See the License for the specific language - * governing permissions and limitations under the License. - */ - -/* eslint-disable no-console */ - -import fs, { existsSync, mkdirSync } from "fs"; -import { join } from "path"; -const fsp = fs.promises; - -import fg from "fast-glob"; - -import { processCSS } from "../../tasks/component-builder.js"; -import { fetchContent } from "../../tasks/utilities.js"; - -import "colors"; - -/** - * Create a tagline for the CSS file based on the package.json data - * @param {Object} [packageJson={}] - * @param {string} packageJson.name - * @param {string} packageJson.version - * @returns - */ -function generateTagline({ name, version } = {}) { - if (!name) return ""; - if (!version) return `/* ${name} */\n\n`; - return `/* ${name}@v${version} */\n\n`; -} - -/** - * The builder for the main entry point - * @param {object} config - * @param {string} config.cwd - Current working directory for the component being built - * @param {boolean} config.clean - Should the built assets be cleaned before running the build - * @returns Promise - */ -async function index(inputGlob, outputPath, { cwd = process.cwd(), clean = false } = {}) { - // Read in the package version from the package.json file - const packageJson = await fsp.readFile(join(cwd, "package.json"), "utf-8").then(JSON.parse); - - const inputs = await fg(inputGlob, { cwd }); - const contents = inputs.map(input => `@import "@spectrum-css/tokens/${input}";`).join("\n"); - if (!contents) return; - - return processCSS(contents, undefined, outputPath, { - cwd, - clean, - configPath: cwd, - map: false, - customTagline: generateTagline(packageJson), - }); -} - -/** - * Append custom/*-vars.css files to the end of the dist/css/*-vars.css files - * @param {Object} config - * @param {string} [config.cwd=process.cwd()] - Current working directory for the component - * @returns {Promise} - */ -async function appendCustomOverrides({ cwd = process.cwd(), packageJson = {} } = {}) { - const promises = []; - - // Add custom/*-vars.css to the end of the dist/css/*-vars.css files and run through postcss before writing back to the dist/css/*-vars.css file - const customFiles = await fg(["*-vars.css"], { cwd: join(cwd, "custom"), onlyFiles: true }); - const globalFiles = await fg(["*-vars.css"], { cwd: join(cwd, "dist", "css"), onlyFiles: true }); - - // Create a list that combines the custom and dist files - const combinedFiles = [...new Set([...customFiles, ...globalFiles])]; - for (const file of combinedFiles) { - // Read in the custom file and the dist file and combine them into one file - const combinedContent = await fetchContent([ - join("dist", "css", file), - join("custom", file) - ], { cwd, shouldCombine: true }); - - if (!combinedContent || !combinedContent?.[0]?.content) continue; - - promises.push( - processCSS(combinedContent[0].content, join(cwd, "dist", "css", file), join(cwd, "dist", "css", file), { - cwd, - configPath: cwd, - customTagline: generateTagline(packageJson), - }) - ); - } - - return Promise.all(promises); -} - -/** - * The main entry point for this tool; this builds a CSS component - * @param {object} config - * @param {string} [config.componentName=process.env.NX_TASK_TARGET_PROJECT] - Current working directory for the component being built - * @param {string} [config.cwd=] - Current working directory for the component being built - * @param {boolean} [config.clean=false] - Should the built assets be cleaned before running the build - * @returns Promise - */ -async function main({ - cwd = process.cwd(), - clean, -} = {}) { - const key = `[build] ${"@spectrum-css/tokens".cyan} index`; - console.time(key); - - const compiledOutputPath = join(cwd, "dist"); - - // Ensure the dist directory exists - if (!existsSync(compiledOutputPath)) { - mkdirSync(compiledOutputPath); - } - - const reports = []; - const errors = []; - - // Read in the package version from the package.json file - const packageJson = await fsp.readFile(join(cwd, "package.json"), "utf-8").then(JSON.parse); - - // Wait for all the custom files to be processed - await appendCustomOverrides({ packageJson, cwd }).then((report) => { reports.push(report); }).catch((err) => { errors.push(err); }); - - // Then build the index.css file - await index(["dist/css/*-vars.css"], join(compiledOutputPath, "css", "index.css"), { cwd, clean }).then((report) => { reports.push(report); }).catch((err) => { errors.push(err); }); - - // Combine all the reports into a single log output - const logs = reports.flat(Infinity).filter(Boolean); - const errorLogs = errors.flat(Infinity).filter(Boolean); - - console.log(`\n\n${key} 🔨`); - console.log(`${"".padStart(30, "-")}`); - - if (!(errorLogs && errorLogs.length > 0)) { - if (logs && logs.length > 0) { - logs.forEach(log => { - // Strip the ../../tokens/ from the paths - console.log(log.replace(/(\.\.\/)+tokens\//g, "")); - }); - } - else console.log("No assets created.".gray); - } - else { - errorLogs.forEach(log => { - console.error(log); - }); - } - - console.log(`${"".padStart(30, "-")}`); - console.timeEnd(key); - console.log(""); - - if (errorLogs && errorLogs.length > 0) { - process.exit(1); - } -} - -main(); - -export { main as default }; diff --git a/tokens/utilities/attribute-sets-transform.js b/tokens/utilities/attribute-sets-transform.js deleted file mode 100644 index 143b9971e76..00000000000 --- a/tokens/utilities/attribute-sets-transform.js +++ /dev/null @@ -1,12 +0,0 @@ -export default { - type: "attribute", - name: "attribute/sets", - filter: (token) => token.path.includes("sets"), - transform: (token) => { - return { - sets: token.path.filter( - (_, index, array) => array[index - 1] == "sets" - ), - }; - }, -}; diff --git a/tokens/utilities/css-border-rounding-transform.js b/tokens/utilities/css-border-rounding-transform.js index 1a84a1a4553..965666c5a64 100644 --- a/tokens/utilities/css-border-rounding-transform.js +++ b/tokens/utilities/css-border-rounding-transform.js @@ -1,3 +1,7 @@ +/** + * @description Generates a kebab-case name for a token + * @type {import('style-dictionary/types').ValueTransform} + */ export default { type: "value", name: "border/rounding", diff --git a/tokens/utilities/css-font-open-type-transform.js b/tokens/utilities/css-font-open-type-transform.js index a2a7b9002a9..f865a9e6aa0 100644 --- a/tokens/utilities/css-font-open-type-transform.js +++ b/tokens/utilities/css-font-open-type-transform.js @@ -1,3 +1,7 @@ +/** + * @description Converts a font-weight token to a number + * @type {import('style-dictionary/types').ValueTransform} + */ export default { type: "value", name: "font/openType", diff --git a/tokens/utilities/css-opacity-percent-transform.js b/tokens/utilities/css-opacity-percent-transform.js new file mode 100644 index 00000000000..e561620c464 --- /dev/null +++ b/tokens/utilities/css-opacity-percent-transform.js @@ -0,0 +1,28 @@ +/** + * @description Converts a number to a percentage + * @type {import('style-dictionary/types').ValueTransform} +*/ +export default { + type: "value", + name: "opacity/percent", + filter: (token) => token.name?.includes?.("opacity"), + transform: (token) => { + // If the token is a percentage, return it as-is + if (token.value?.includes?.("%")) { + return token.value; + } + + // Check if the token is a number + if (typeof token.value === "number") { + return `${token.value * 100}%`; + } + + // If the token is a string, convert it to a number + if (typeof token.value === "string" && !isNaN(Number(token.value))) { + return `${Number(token.value) * 100}%`; + } + + // If the token is not a number or a string, return the value + return token.value; + }, +}; diff --git a/tokens/utilities/css-sets-formatter.js b/tokens/utilities/css-sets-formatter.js index ddb6bf9f7e3..0bbab5f2783 100644 --- a/tokens/utilities/css-sets-formatter.js +++ b/tokens/utilities/css-sets-formatter.js @@ -1,64 +1,164 @@ -import { usesReferences } from "style-dictionary/utils"; - -export const generateNameArray = (token, prefix) => { - let name = prefix ? [prefix] : []; - const cleanTokenPath = []; - for (let i = 0; i < token.path.length; i++) { - if (token.path[i] === "sets") { - i++; - } - else { - cleanTokenPath.push(token.path[i]); - } - } - name = name.concat(cleanTokenPath); - return name; -}; +import { cssTemplate } from "./css.template.js"; +import { pushToMap, referenceToVarFunction } from "./utilities.js"; + +const DEFAULT_SETS = ["light", "desktop"]; /** - * @description Formats the value of a token for CSS - * @param {import('style-dictionary').Token} token - * @param {import('style-dictionary').PlatformConfig} platform + * @param {import('style-dictionary/types').DesignToken} token + * @param {string} set The context of the set to resolve + * @param {import('style-dictionary/types').PlatformConfig} [platform={}] * @returns {string} */ -const valueFormatter = (token, platform) => { - if (!usesReferences(token.original.value)) return token.value; +function resolveSetValues(value, set, platform = {}) { + const { outputReferences = true, outputReferenceFallbacks = true, modifier = false } = platform; + if (typeof value === "object") { + // If we're outputing the references, return it in the format of {} + if (outputReferences && typeof value.name !== "undefined") { + // If we're outputing the references, return it in the format of {} + return referenceToVarFunction(`{${value.name}}`, { prefix: platform.prefix, fallback: outputReferenceFallbacks ? value.value : undefined, modifier }); + } + else if (!outputReferences && typeof value.value !== "undefined") { + // If we're not outputing the references, return the value + return resolveSetValues(value.value, set, platform); + } + else if (typeof value.sets !== "undefined") { + // Check if the value has a sets object + if (typeof set === "undefined") { + // Capture the default set value if found, otherwise it gets lost in the forEach loop context + let capture; - const resultAr = token.original.value - .substring(1, token.original.value.length - 1) - .split("."); + // Check for default set values + DEFAULT_SETS.forEach((defaultSet) => { + if (typeof value.sets[defaultSet] !== "undefined") { + capture = resolveSetValues(value.sets[defaultSet], set, platform); + } + }); - if (platform.prefix) resultAr.splice(0, 0, platform.prefix); + // If a default set value was found, return it + if (typeof capture !== "undefined") return capture; + } + else if (typeof value.sets[set] !== "undefined") { + return resolveSetValues(value.sets[set], set, platform); + } + } + } - return `var(--${resultAr.join("-")})`; -}; + // If the value is not an object, we can do a minor conversion of the reference to a CSS variable if needed + return referenceToVarFunction(value, { prefix: platform.prefix, modifier }); +} /** - * The format function to split out the token set data into distinct CSS variables - * @type {import('style-dictionary/types').FormatFn} format + * @type {import('style-dictionary/types').Format} */ -const format = ({ dictionary, platform, options }) => { - const resultAr = []; +export default { + name: "css/sets", + format: async function ({ dictionary, options = {}, file, platform = {} }) { + let layers = new Map(); + // @todo: this should be a configuration option + const layerDefinitions = { + core: [...DEFAULT_SETS, "size-m"], + dark: ["dark"], + large: ["mobile"], + }; + + // Iterate over the provided tokens and sort them into buckets based on their set data + for (const token of [...dictionary.tokenMap.values()]) { + const set = token.path && token.path.includes("sets") ? token.path[token.path.length - 1] : undefined; + const prop = token.path[0]; + platform.modifier = token.modifier; - dictionary.allTokens.forEach((token) => { - const name = generateNameArray(token, platform.prefix); - const value = valueFormatter(token, platform); + const value = resolveSetValues(token.value, set, platform); - if (!value) return; - if (name[1]?.startsWith("android-")) { - return; + // Why would a value not be found? + if (typeof value === "undefined") continue; + + if (typeof set === "undefined") { + layers = pushToMap(layers, "core", new Map([[prop, { + value, + deprecated: token.deprecated, + deprecated_comment: token.deprecated_comment, + }]])); + continue; + } + + // Skip wireframe tokens for CSS + if (set === "wireframe") continue; + + // @todo: move the light-dark logic to a value formatter + if (["light", "dark"].includes(set)) { + // The light-dark function can only be used with color values + // @todo: should we use a color package to handle this so that it accounts for all types of colors? + if (value.startsWith("rgb")) { + if (set === "light") { + const darkToken = dictionary.tokenMap.get(token.key?.replace("light", "dark")); + const { value: darkValue } = resolveSetValues(darkToken.value, "dark", platform); + if (typeof darkValue !== "undefined" && darkValue.startsWith("rgb")) { + layers = pushToMap(layers, "core", new Map([[prop, { + value: `light-dark(${value}, ${darkValue})`, + deprecated: token.deprecated, + deprecated_comment: token.deprecated_comment, + }]])); + continue; + } + } + + // Let the dark value fall through as it's already accounted for in the light-dark function + continue; + } + } + + let added = false; + for (const layer of Object.keys(layerDefinitions)) { + if (layerDefinitions[layer].includes(set)) { + layers = pushToMap(layers, layer, new Map([[prop, { + value, + deprecated: token.deprecated, + deprecated_comment: token.deprecated_comment, + }]])); + added = true; + break; + } + } + + if (added) continue; } - resultAr.push(` --${name.join("-")}: ${value};`); - }); + if (layers.has("dark") && layers.get("dark").size > 0) { + // Check if any of the dark values match the light values and delete the extra entries from the dark layer + for (const [darkKey, darkData] of layers.get("dark")) { + // Get the light value with the same key + const lightData = layers.get("core")?.get(darkKey) ?? {}; - const selector = options.selector ? options.selector : ".spectrum"; + // So far only 2 edge-cases match this + if (typeof lightData.value === "undefined") { + const initial = dictionary.tokenMap.get(`{${darkKey.replace("spectrum-", "")}.sets.light}`); + if (initial?.original?.value) { + const originalValue = referenceToVarFunction(initial.original.value, { prefix: platform.prefix, modifier: initial?.original?.modifier }); + if (typeof originalValue === "undefined") continue; - return `${selector} {\n${resultAr.join("\n")}\n}\n`; -}; -format.nested = true; + lightData.value = originalValue; + lightData.deprecated = initial.original.deprecated; + lightData.deprecated_comment = initial.original.deprecated_comment; -export default { - name: "css/sets", - format, + // Update the core layer with the new value + layers.get("core")?.set(darkKey, lightData); + } + + continue; + } + + if (lightData?.value === darkData?.value) { + layers.get("dark")?.delete(darkKey); + continue; + } + } + } + + return await cssTemplate(layers, { + ...options, + file, + dictionary, + platform, + }); + }, }; diff --git a/tokens/utilities/css.template.js b/tokens/utilities/css.template.js new file mode 100644 index 00000000000..70e16c04d6d --- /dev/null +++ b/tokens/utilities/css.template.js @@ -0,0 +1,98 @@ +import { fileHeader } from "style-dictionary/utils"; +import { processCSS } from "../../tasks/component-builder.js"; +import { cleanVariableName } from "./utilities.js"; + +/** + * @param {string} name + * @param {string} value + * @param {Object} [options={}] + * @param {string} [options.prefix] + * @param {boolean} [options.deprecated] + * @param {string} [options.deprecated_comment] + */ +const variableDefinition = (name, value, { prefix, deprecated, deprecated_comment } = {}) => { + const varName = `--${cleanVariableName(name, prefix)}`; + if (!deprecated) return `${varName}: ${value};`; + + // Find a string with multiple words joined by a dash + const captureVarName = deprecated_comment?.match(/(\w+(-\w+)+)/)?.[0]; + const commentVarName = captureVarName ? `--${prefix ? `${prefix}-` : ""}${captureVarName}` : undefined; + const comment = `/** @deprecated ${varName}${deprecated_comment ? ` -- ${deprecated_comment.replace(captureVarName, commentVarName)}` : ""} */`; + return [comment, `${varName}: ${value};`].filter(Boolean).join("\n\t"); +}; + +/** + * Remove prefix because the prefix option for createPropertyFormatter + * is not the same as the prefix inside header comment + * @param {FormattingOverrides} [formatting] + */ +function getFormattingCloneWithoutPrefix(formatting) { + const formattingWithoutPrefix = structuredClone(formatting) ?? {}; + delete formattingWithoutPrefix.prefix; + return formattingWithoutPrefix; +} + +/** + * @typedef {import('style-dictionary/types').TransformedTokens} TransformedTokens + * @param {Map} layers + * @param {import('style-dictionary/types').LocalOptions & { + * file: import('style-dictionary/types').File, + * dictionary: import('style-dictionary/types').Dictionary, + * platform: import('style-dictionary/types').PlatformConfig, + * selector: string | string[] + * }} [options={}] + * @returns {Promise} + */ +export const cssTemplate = async (layers, options = {}) => { + // Deconstruct the options object for easier reuse below + const { file, showFileHeader, formatting, platform = {}, selector = [":root"] } = options; + const selectors = Array.isArray(selector) ? selector : [selector]; + + const header = showFileHeader ? await fileHeader({ + file, + formatting: getFormattingCloneWithoutPrefix(formatting), + options, + }) : ""; + + const content = [...layers.entries()].sort((a) => { + // Force the global layer to be first + if (a[0] === "global") return -1; + return 0; + }).map(([context, layer]) => { + const variables = [...layer.entries()] + // Sort entries by name, alphanumerically + .sort((a, b) => a[0].localeCompare(b[0], "en", { numeric: true })) + .map(([name, { value, deprecated, deprecated_comment }]) => variableDefinition(name, value, { prefix: platform.prefix, deprecated, deprecated_comment })); + + const items = selectors.map((s) => { + if (s === ":root" && context !== "dark") return [":root"]; + if (s !== ":root" && context === "core") return [`@scope (${s})`, ":scope"]; + if (context === "dark") return ["@media (prefers-color-scheme: dark)", s]; + if (s !== ":scope" && s !== ":root") return [`${s}--${context}`]; + return [[options.prefix, context].filter(Boolean).join("-"), s]; + }).flat(); + + return items.reverse().reduce((previous, currentSelector, index) => { + const indentation = (formatting?.indentation || " ").repeat(selectors.length - index); + return `${indentation}${currentSelector} {\n${previous.split("\n").map((line) => `${indentation}${indentation}${line}`).join("\n")}\n${indentation}}\n`; + }, variables.join("\n")); + }).join("\n\n"); + + const result = [header, content].filter(Boolean).join("\n") + "\n"; + + // Run styles through the css processor, if possible + if (typeof processCSS === "function") { + return processCSS(result, undefined, undefined, { + cwd: platform?.buildPath ?? process.cwd(), + clean: true, + map: false, + }).catch((error) => { + // eslint-disable-next-line no-console + if (error) console.log(error); + + return result; + }); + } + + return result; +}; diff --git a/tokens/utilities/data-json-formatter.js b/tokens/utilities/data-json-formatter.js index 9956bb895d4..4e83a37d8eb 100644 --- a/tokens/utilities/data-json-formatter.js +++ b/tokens/utilities/data-json-formatter.js @@ -1,5 +1,9 @@ import { format as JSONSetsFormat } from "./json-sets-formatter.js"; +/** + * @description Formats the JSON sets + * @type {import('style-dictionary/types').FormatFn} + */ export const format = ({ dictionary, platform, file, options }) => { const prefix = platform.prefix ? platform.prefix : false; let result = {}; @@ -74,6 +78,9 @@ export const format = ({ dictionary, platform, file, options }) => { format.nested = true; +/** + * @type {import('style-dictionary/types').Format} + */ export default { name: "json/sets", format, diff --git a/tokens/utilities/index.js b/tokens/utilities/index.js index f209e8a4825..4d05914a31c 100644 --- a/tokens/utilities/index.js +++ b/tokens/utilities/index.js @@ -1,6 +1,12 @@ -export { default as AttributeSetsTransform } from "./attribute-sets-transform.js"; +/** + * @note These are custom transforms that are used by Style Dictionary + */ export { default as CSSBorderRoundingTransform } from "./css-border-rounding-transform.js"; export { default as CSSOpenTypeTransform } from "./css-font-open-type-transform.js"; +export { default as CSSOpacityPercentTransform } from "./css-opacity-percent-transform.js"; + +/** + * @note These are custom formatters that are used by Style Dictionary + */ export { default as CSSSetsFormatter } from "./css-sets-formatter.js"; export { default as DataJsonFormatter } from "./data-json-formatter.js"; -export { default as NameKebabTransfom } from "./name-kebab-transform.js"; diff --git a/tokens/utilities/json-sets-formatter.js b/tokens/utilities/json-sets-formatter.js index d4132cd7cfa..43dca349b31 100644 --- a/tokens/utilities/json-sets-formatter.js +++ b/tokens/utilities/json-sets-formatter.js @@ -1,17 +1,39 @@ import merge from "deepmerge"; import { usesReferences } from "style-dictionary/utils"; +/** + * @description Checks if a value is an object + * @param {unknown} value + * @returns {boolean} + */ const isObject = (item) => { return typeof item === "object" && !Array.isArray(item) && item !== null; }; +/** + * @description Converts an array to an object + * @param {string[]} pathAr + * @param {unknown} value + * @returns {Record} + */ const pathToObj = (pathAr, value) => pathAr.reduceRight((value, key) => ({ [key]: value }), value); +/** + * @description Checks if a value is a set + * @param {unknown} value + * @returns {boolean} + */ const isASet = (value) => { return isObject(value) && "sets" in value; }; +/** + * @description Gets the value of a token + * @param {import('style-dictionary').Token} token + * @param {import('style-dictionary').Dictionary} dictionary + * @returns {Record} + */ const getValue = (token, dictionary) => { if (usesReferences(token)) { const ref = token.original.value; @@ -34,6 +56,10 @@ const getValue = (token, dictionary) => { } }; +/** + * @description Formats the JSON sets + * @type {import('style-dictionary/types').FormatFn} + */ export const format = ({ dictionary }) => { let resultObj = {}; dictionary.allTokens.forEach((token) => { @@ -45,6 +71,9 @@ export const format = ({ dictionary }) => { format.nested = true; +/** + * @type {import('style-dictionary/types').Format} + */ export default { name: "json/sets", format, diff --git a/tokens/utilities/name-kebab-transform.js b/tokens/utilities/name-kebab-transform.js deleted file mode 100644 index 606a52caaca..00000000000 --- a/tokens/utilities/name-kebab-transform.js +++ /dev/null @@ -1,8 +0,0 @@ -import { kebabCase } from "lodash-es"; - -export default { - type: "name", - name: "name/kebab", - transform: (token, options) => - kebabCase([options.prefix].concat(token.path).join(" ")), -}; diff --git a/tokens/utilities/utilities.js b/tokens/utilities/utilities.js new file mode 100644 index 00000000000..dba1d544aeb --- /dev/null +++ b/tokens/utilities/utilities.js @@ -0,0 +1,78 @@ +/** + * @description Pushes a value to a map; supports nested maps and arrays + * @param {Map} map + * @param {string} key + * @param {any} value + * @returns {Map} + */ +export const pushToMap = (map, key, value) => { + if (!map.has(key)) { + map.set(key, value); + return map; + } + + let existing = map.get(key); + + // Check if the value is a Map + if (value instanceof Map) { + // Merge the two maps + for (const [k, v] of value.entries()) { + existing.set(k, v); + } + } + else if (value instanceof Object) { + // Merge the two objects + for (const [k, v] of Object.entries(value)) { + existing[k] = v; + } + } + else if (Array.isArray(value)) { + // Merge the two arrays + existing.push(...value); + } + else { + // If it's a primitive value, just set it + existing = value; + } + + map.set(key, existing); + return map; +}; + +/** + * @param {string} ref The reference to another token + * @param {string} [prefix] The prefix to add to the reference, if provided + * @returns {string} The cleaned reference string + */ +export const cleanVariableName = (ref, prefix = undefined) => { + // Clean up the key by removing any "sets-*" content + if (ref?.includes("sets-")) { + ref = ref.replace(/-sets-\w+/g, ""); + } + + // Ensure all keys start with the prefix + if (prefix && !ref.startsWith(prefix)) { + ref = prefix + "-" + ref; + } + + return ref; +}; + +/** + * @param {string} ref The reference to another token + * @param {string} [prefix] The prefix to add to the reference, if provided + * @param {string} [fallback] The fallback to add to the reference, if provided + * @returns {string} The converted reference string + */ +export const referenceToVarFunction = (ref, { prefix, fallback, modifier = false } = {}) => { + if (typeof ref === "string") { + if (!ref.startsWith("{") && !ref.startsWith("spectrum-")) return ref; + + const [, name] = ref.match(/^{?(.*?)(?:-sets-\w+)?}?$/); + if (typeof name === "string") { + return `${modifier ? `var(--${cleanVariableName(name, "mod")}, ` : ""}var(--${cleanVariableName(name, prefix)}${fallback ? `, ${fallback}` : ""})${modifier ? ")" : ""}`; + } + } + + return ref; +}; diff --git a/yarn.lock b/yarn.lock index 8134af22d27..92299d707d7 100644 --- a/yarn.lock +++ b/yarn.lock @@ -124,8 +124,8 @@ __metadata: "@changesets/cli": "npm:^2.29.5" "@commitlint/cli": "npm:^19.8.1" "@commitlint/config-conventional": "npm:^19.8.1" + "@csstools/postcss-design-tokens": "npm:^4.0.5" "@nx/devkit": "npm:^21.2.3" - "@spectrum-tools/postcss-rgb-mapping": "npm:1.1.0" "@yarnpkg/types": "npm:^4.0.1" at-rule-packer: "npm:^0.5.0" autoprefixer: "npm:^10.4.21" @@ -895,7 +895,7 @@ __metadata: languageName: node linkType: hard -"@babel/runtime@npm:^7.12.5, @babel/runtime@npm:^7.17.8, @babel/runtime@npm:^7.3.1, @babel/runtime@npm:^7.5.5": +"@babel/runtime@npm:^7.12.5, @babel/runtime@npm:^7.17.8": version: 7.26.10 resolution: "@babel/runtime@npm:7.26.10" dependencies: @@ -904,6 +904,22 @@ __metadata: languageName: node linkType: hard +"@babel/runtime@npm:^7.3.1": + version: 7.27.1 + resolution: "@babel/runtime@npm:7.27.1" + checksum: 10c0/530a7332f86ac5a7442250456823a930906911d895c0b743bf1852efc88a20a016ed4cd26d442d0ca40ae6d5448111e02a08dd638a4f1064b47d080e2875dc05 + languageName: node + linkType: hard + +"@babel/runtime@npm:^7.5.5": + version: 7.24.4 + resolution: "@babel/runtime@npm:7.24.4" + dependencies: + regenerator-runtime: "npm:^0.14.0" + checksum: 10c0/785aff96a3aa8ff97f90958e1e8a7b1d47f793b204b47c6455eaadc3f694f48c97cd5c0a921fe3596d818e71f18106610a164fb0f1c71fd68c622a58269d537c + languageName: node + linkType: hard + "@babel/template@npm:^7.22.5, @babel/template@npm:^7.3.3": version: 7.26.9 resolution: "@babel/template@npm:7.26.9" @@ -992,7 +1008,7 @@ __metadata: languageName: node linkType: hard -"@babel/types@npm:^7.26.10, @babel/types@npm:^7.26.9": +"@babel/types@npm:^7.26.10": version: 7.26.10 resolution: "@babel/types@npm:7.26.10" dependencies: @@ -1002,6 +1018,16 @@ __metadata: languageName: node linkType: hard +"@babel/types@npm:^7.26.9": + version: 7.26.9 + resolution: "@babel/types@npm:7.26.9" + dependencies: + "@babel/helper-string-parser": "npm:^7.25.9" + "@babel/helper-validator-identifier": "npm:^7.25.9" + checksum: 10c0/999c56269ba00e5c57aa711fbe7ff071cd6990bafd1b978341ea7572cc78919986e2aa6ee51dacf4b6a7a6fa63ba4eb3f1a03cf55eee31b896a56d068b895964 + languageName: node + linkType: hard + "@babel/types@npm:^7.27.1": version: 7.27.1 resolution: "@babel/types@npm:7.27.1" @@ -1684,6 +1710,19 @@ __metadata: languageName: node linkType: hard +"@csstools/postcss-design-tokens@npm:^4.0.5": + version: 4.0.5 + resolution: "@csstools/postcss-design-tokens@npm:4.0.5" + dependencies: + "@csstools/css-parser-algorithms": "npm:^3.0.5" + "@csstools/css-tokenizer": "npm:^3.0.4" + postcss-value-parser: "npm:^4.2.0" + peerDependencies: + postcss: ^8.4 + checksum: 10c0/cc02c0d2d15a3ee1fff95ec43be4395ee7f13a9483a3fd2edd8724c7c73ec97fbd43be5509d95ca9eccf2f65874262514bff752e8aa96f3bc407e74bdfbdfa93 + languageName: node + linkType: hard + "@csstools/postcss-exponential-functions@npm:^2.0.9": version: 2.0.9 resolution: "@csstools/postcss-exponential-functions@npm:2.0.9" @@ -5752,13 +5791,17 @@ __metadata: dependencies: "@adobe/spectrum-tokens": "npm:^13.10.1" "@adobe/token-diff-generator": "npm:^2.0.0" - "@spectrum-tools/postcss-rgb-mapping": "npm:1.1.0" deepmerge: "npm:^4.3.1" glob: "npm:^11.0.3" lodash-es: "npm:^4.17.21" + npm-run-all2: "npm:^8.0.4" postcss: "npm:^8.5.6" + postcss-cli: "npm:^11.0.1" postcss-sorting: "npm:^9.1.0" + prettier: "npm:^3.6.2" + rimraf: "npm:^6.0.1" style-dictionary: "npm:^4.4.0" + yargs: "npm:^18.0.0" languageName: unknown linkType: soft @@ -5897,19 +5940,6 @@ __metadata: languageName: unknown linkType: soft -"@spectrum-tools/postcss-rgb-mapping@npm:1.1.0, @spectrum-tools/postcss-rgb-mapping@workspace:plugins/postcss-rgb-mapping": - version: 0.0.0-use.local - resolution: "@spectrum-tools/postcss-rgb-mapping@workspace:plugins/postcss-rgb-mapping" - dependencies: - ava: "npm:^6.4.0" - c8: "npm:^10.1.3" - postcss: "npm:^8.5.6" - postcss-values-parser: "npm:^6.0.2" - peerDependencies: - postcss: ">=8" - languageName: unknown - linkType: soft - "@spectrum-tools/stylelint-no-missing-var@workspace:plugins/stylelint-no-missing-var": version: 0.0.0-use.local resolution: "@spectrum-tools/stylelint-no-missing-var@workspace:plugins/stylelint-no-missing-var" @@ -8218,13 +8248,20 @@ __metadata: languageName: node linkType: hard -"caniuse-lite@npm:^1.0.0, caniuse-lite@npm:^1.0.30001669, caniuse-lite@npm:^1.0.30001688, caniuse-lite@npm:^1.0.30001702": +"caniuse-lite@npm:^1.0.0, caniuse-lite@npm:^1.0.30001688, caniuse-lite@npm:^1.0.30001702": version: 1.0.30001703 resolution: "caniuse-lite@npm:1.0.30001703" checksum: 10c0/ed88e318da28e9e59c4ac3a2e3c42859558b7b713aebf03696a1f916e4ed4b70734dda82be04635e2b62ec355b8639bbed829b7b12ff528d7f9cc31a3a5bea91 languageName: node linkType: hard +"caniuse-lite@npm:^1.0.30001669": + version: 1.0.30001690 + resolution: "caniuse-lite@npm:1.0.30001690" + checksum: 10c0/646bd469032afa90400a84dec30a2b00a6eda62c03ead358117e3f884cda8aacec02ec058a6dbee5eaf9714f83e483b9b0eb4fb42febb8076569f5ca40f1d347 + languageName: node + linkType: hard + "caniuse-lite@npm:^1.0.30001716": version: 1.0.30001717 resolution: "caniuse-lite@npm:1.0.30001717" @@ -8494,7 +8531,7 @@ __metadata: languageName: node linkType: hard -"chokidar@npm:^3.6.0": +"chokidar@npm:^3.3.0, chokidar@npm:^3.6.0": version: 3.6.0 resolution: "chokidar@npm:3.6.0" dependencies: @@ -9707,6 +9744,13 @@ __metadata: languageName: node linkType: hard +"dependency-graph@npm:^1.0.0": + version: 1.0.0 + resolution: "dependency-graph@npm:1.0.0" + checksum: 10c0/10d1e248ab68a33654335559bae5ec142c51959cbff1cba8b35cdccfdc12eb8d136227df85c31b71b9ee9fed1b2bfbd01721661b4f927e12d890d13c4230788f + languageName: node + linkType: hard + "deprecation@npm:^2.0.0, deprecation@npm:^2.3.1": version: 2.3.1 resolution: "deprecation@npm:2.3.1" @@ -11468,6 +11512,17 @@ __metadata: languageName: node linkType: hard +"fs-extra@npm:^11.0.0": + version: 11.3.0 + resolution: "fs-extra@npm:11.3.0" + dependencies: + graceful-fs: "npm:^4.2.0" + jsonfile: "npm:^6.0.1" + universalify: "npm:^2.0.0" + checksum: 10c0/5f95e996186ff45463059feb115a22fb048bdaf7e487ecee8a8646c78ed8fdca63630e3077d4c16ce677051f5e60d3355a06f3cd61f3ca43f48cc58822a44d0a + languageName: node + linkType: hard + "fs-extra@npm:^11.1.1": version: 11.2.0 resolution: "fs-extra@npm:11.2.0" @@ -11741,7 +11796,7 @@ __metadata: languageName: node linkType: hard -"glob@npm:^10.0.0, glob@npm:^10.2.2, glob@npm:^10.3.7, glob@npm:^10.4.1, glob@npm:^10.4.2, glob@npm:^10.4.5": +"glob@npm:^10.0.0, glob@npm:^10.2.2, glob@npm:^10.3.10, glob@npm:^10.3.7, glob@npm:^10.4.1, glob@npm:^10.4.2, glob@npm:^10.4.5": version: 10.4.5 resolution: "glob@npm:10.4.5" dependencies: @@ -13971,6 +14026,13 @@ __metadata: languageName: node linkType: hard +"json-parse-even-better-errors@npm:^4.0.0": + version: 4.0.0 + resolution: "json-parse-even-better-errors@npm:4.0.0" + checksum: 10c0/84cd9304a97e8fb2af3937bf53acb91c026aeb859703c332684e688ea60db27fc2242aa532a84e1883fdcbe1e5c1fb57c2bef38e312021aa1cd300defc63cf16 + languageName: node + linkType: hard + "json-schema-traverse@npm:^0.3.0": version: 0.3.1 resolution: "json-schema-traverse@npm:0.3.1" @@ -14980,6 +15042,13 @@ __metadata: languageName: node linkType: hard +"memorystream@npm:^0.3.1": + version: 0.3.1 + resolution: "memorystream@npm:0.3.1" + checksum: 10c0/4bd164657711d9747ff5edb0508b2944414da3464b7fe21ac5c67cf35bba975c4b446a0124bd0f9a8be54cfc18faf92e92bd77563a20328b1ccf2ff04e9f39b9 + languageName: node + linkType: hard + "meow@npm:^12.0.1": version: 12.1.1 resolution: "meow@npm:12.1.1" @@ -15736,7 +15805,7 @@ __metadata: languageName: node linkType: hard -"node-gyp@npm:^11.2.0, node-gyp@npm:latest": +"node-gyp@npm:^11.2.0": version: 11.2.0 resolution: "node-gyp@npm:11.2.0" dependencies: @@ -15756,6 +15825,26 @@ __metadata: languageName: node linkType: hard +"node-gyp@npm:latest": + version: 11.1.0 + resolution: "node-gyp@npm:11.1.0" + dependencies: + env-paths: "npm:^2.2.0" + exponential-backoff: "npm:^3.1.1" + glob: "npm:^10.3.10" + graceful-fs: "npm:^4.2.6" + make-fetch-happen: "npm:^14.0.3" + nopt: "npm:^8.0.0" + proc-log: "npm:^5.0.0" + semver: "npm:^7.3.5" + tar: "npm:^7.4.3" + which: "npm:^5.0.0" + bin: + node-gyp: bin/node-gyp.js + checksum: 10c0/c38977ce502f1ea41ba2b8721bd5b49bc3d5b3f813eabfac8414082faf0620ccb5211e15c4daecc23ed9f5e3e9cc4da00e575a0bcfc2a95a069294f2afa1e0cd + languageName: node + linkType: hard + "node-int64@npm:^0.4.0": version: 0.4.0 resolution: "node-int64@npm:0.4.0" @@ -15857,6 +15946,13 @@ __metadata: languageName: node linkType: hard +"npm-normalize-package-bin@npm:^4.0.0": + version: 4.0.0 + resolution: "npm-normalize-package-bin@npm:4.0.0" + checksum: 10c0/1fa546fcae8eaab61ef9b9ec237b6c795008da50e1883eae030e9e38bb04ffa32c5aabcef9a0400eae3dc1f91809bcfa85e437ce80d677c69b419d1d9cacf0ab + languageName: node + linkType: hard + "npm-package-arg@npm:^12.0.0": version: 12.0.0 resolution: "npm-package-arg@npm:12.0.0" @@ -15885,6 +15981,27 @@ __metadata: languageName: node linkType: hard +"npm-run-all2@npm:^8.0.4": + version: 8.0.4 + resolution: "npm-run-all2@npm:8.0.4" + dependencies: + ansi-styles: "npm:^6.2.1" + cross-spawn: "npm:^7.0.6" + memorystream: "npm:^0.3.1" + picomatch: "npm:^4.0.2" + pidtree: "npm:^0.6.0" + read-package-json-fast: "npm:^4.0.0" + shell-quote: "npm:^1.7.3" + which: "npm:^5.0.0" + bin: + npm-run-all: bin/npm-run-all/index.js + npm-run-all2: bin/npm-run-all/index.js + run-p: bin/run-p/index.js + run-s: bin/run-s/index.js + checksum: 10c0/cfc2987df224e55456629301991b5fa6980cc644d1836fe3c22d74a4508512737d30389795b759bb5d659103e54281c59741ecdc0241cfd2615cb9bffbf7cceb + languageName: node + linkType: hard + "npm-run-path@npm:^4.0.1": version: 4.0.1 resolution: "npm-run-path@npm:4.0.1" @@ -16901,6 +17018,29 @@ __metadata: languageName: node linkType: hard +"postcss-cli@npm:^11.0.1": + version: 11.0.1 + resolution: "postcss-cli@npm:11.0.1" + dependencies: + chokidar: "npm:^3.3.0" + dependency-graph: "npm:^1.0.0" + fs-extra: "npm:^11.0.0" + picocolors: "npm:^1.0.0" + postcss-load-config: "npm:^5.0.0" + postcss-reporter: "npm:^7.0.0" + pretty-hrtime: "npm:^1.0.3" + read-cache: "npm:^1.0.0" + slash: "npm:^5.0.0" + tinyglobby: "npm:^0.2.12" + yargs: "npm:^17.0.0" + peerDependencies: + postcss: ^8.0.0 + bin: + postcss: index.js + checksum: 10c0/4aa0b517269e27d288cbbcff54f572f95ca45fe082e49b77e9c3c3582ad0312bc65f98d98d3d98d18d8f64c473546277596e85ce6572b4d3e9c3b4ef8a1aff71 + languageName: node + linkType: hard + "postcss-color-functional-notation@npm:^7.0.10": version: 7.0.10 resolution: "postcss-color-functional-notation@npm:7.0.10" @@ -17191,6 +17331,27 @@ __metadata: languageName: node linkType: hard +"postcss-load-config@npm:^5.0.0": + version: 5.1.0 + resolution: "postcss-load-config@npm:5.1.0" + dependencies: + lilconfig: "npm:^3.1.1" + yaml: "npm:^2.4.2" + peerDependencies: + jiti: ">=1.21.0" + postcss: ">=8.0.9" + tsx: ^4.8.1 + peerDependenciesMeta: + jiti: + optional: true + postcss: + optional: true + tsx: + optional: true + checksum: 10c0/1631f2869619387166cf0aa900b5f3f652578862c0abbd8d9e9e1d679929c42720dd65f7ce60ccf930f94d4440ebdc3aa6b69d33e2df82b761a079d8cba87e23 + languageName: node + linkType: hard + "postcss-load-config@npm:^6.0.1": version: 6.0.1 resolution: "postcss-load-config@npm:6.0.1" @@ -17674,7 +17835,7 @@ __metadata: languageName: node linkType: hard -"postcss-reporter@npm:^7.1.0": +"postcss-reporter@npm:^7.0.0, postcss-reporter@npm:^7.1.0": version: 7.1.0 resolution: "postcss-reporter@npm:7.1.0" dependencies: @@ -17913,6 +18074,13 @@ __metadata: languageName: node linkType: hard +"pretty-hrtime@npm:^1.0.3": + version: 1.0.3 + resolution: "pretty-hrtime@npm:1.0.3" + checksum: 10c0/67cb3fc283a72252b49ac488647e6a01b78b7aa1b8f2061834aa1650691229081518ef3ca940f77f41cc8a8f02ba9eeb74b843481596670209e493062f2e89e0 + languageName: node + linkType: hard + "pretty-ms@npm:^9.2.0": version: 9.2.0 resolution: "pretty-ms@npm:9.2.0" @@ -18158,6 +18326,16 @@ __metadata: languageName: node linkType: hard +"read-package-json-fast@npm:^4.0.0": + version: 4.0.0 + resolution: "read-package-json-fast@npm:4.0.0" + dependencies: + json-parse-even-better-errors: "npm:^4.0.0" + npm-normalize-package-bin: "npm:^4.0.0" + checksum: 10c0/8a03509ae8e852f1abc4b109c1be571dd90ac9ea65d55433b2fe287e409113441a9b00df698288fe48aa786c1a2550569d47b5ab01ed83ada073d691d5aff582 + languageName: node + linkType: hard + "read-yaml-file@npm:^1.1.0": version: 1.1.0 resolution: "read-yaml-file@npm:1.1.0" @@ -18890,7 +19068,7 @@ __metadata: languageName: node linkType: hard -"shell-quote@npm:^1.4.1": +"shell-quote@npm:^1.4.1, shell-quote@npm:^1.7.3": version: 1.8.2 resolution: "shell-quote@npm:1.8.2" checksum: 10c0/85fdd44f2ad76e723d34eb72c753f04d847ab64e9f1f10677e3f518d0e5b0752a176fd805297b30bb8c3a1556ebe6e77d2288dbd7b7b0110c7e941e9e9c20ce1 @@ -21160,6 +21338,15 @@ __metadata: languageName: node linkType: hard +"yaml@npm:^2.4.2": + version: 2.7.1 + resolution: "yaml@npm:2.7.1" + bin: + yaml: bin.mjs + checksum: 10c0/ee2126398ab7d1fdde566b4013b68e36930b9e6d8e68b6db356875c99614c10d678b6f45597a145ff6d63814961221fc305bf9242af8bf7450177f8a68537590 + languageName: node + linkType: hard + "yaml@npm:^2.6.0, yaml@npm:^2.8.0": version: 2.8.0 resolution: "yaml@npm:2.8.0"