diff --git a/.changeset/pre.json b/.changeset/pre.json new file mode 100644 index 00000000000..dfb6b4dd823 --- /dev/null +++ b/.changeset/pre.json @@ -0,0 +1,101 @@ +{ + "mode": "pre", + "tag": "next", + "initialVersions": { + "@spectrum-tools/gh-action-file-diff": "2.2.0", + "@spectrum-css/preview": "12.0.3", + "@spectrum-css/accordion": "7.1.0", + "@spectrum-css/actionbar": "10.1.1", + "@spectrum-css/actionbutton": "7.1.1", + "@spectrum-css/actiongroup": "6.1.0", + "@spectrum-css/actionmenu": "7.1.1", + "@spectrum-css/alertbanner": "3.1.0", + "@spectrum-css/alertdialog": "4.1.0", + "@spectrum-css/asset": "7.1.0", + "@spectrum-css/assetcard": "5.1.0", + "@spectrum-css/assetlist": "8.1.0", + "@spectrum-css/avatar": "9.1.0", + "@spectrum-css/badge": "6.1.0", + "@spectrum-css/breadcrumb": "11.1.0", + "@spectrum-css/button": "14.1.1", + "@spectrum-css/buttongroup": "9.1.0", + "@spectrum-css/calendar": "7.1.0", + "@spectrum-css/card": "11.1.0", + "@spectrum-css/checkbox": "10.1.0", + "@spectrum-css/clearbutton": "7.1.0", + "@spectrum-css/closebutton": "6.1.0", + "@spectrum-css/coachindicator": "4.1.0", + "@spectrum-css/coachmark": "9.1.1", + "@spectrum-css/colorarea": "7.1.0", + "@spectrum-css/colorhandle": "10.1.0", + "@spectrum-css/colorloupe": "7.1.0", + "@spectrum-css/colorslider": "8.1.0", + "@spectrum-css/colorwheel": "6.1.0", + "@spectrum-css/combobox": "4.1.1", + "@spectrum-css/commons": "11.0.0", + "@spectrum-css/contextualhelp": "5.1.2", + "@spectrum-css/datepicker": "4.1.1", + "@spectrum-css/dial": "5.1.0", + "@spectrum-css/dialog": "12.1.0", + "@spectrum-css/divider": "5.1.0", + "@spectrum-css/dropindicator": "7.1.0", + "@spectrum-css/dropzone": "8.1.0", + "@spectrum-css/fieldgroup": "7.1.0", + "@spectrum-css/fieldlabel": "10.1.0", + "@spectrum-css/floatingactionbutton": "4.1.0", + "@spectrum-css/form": "1.1.0", + "@spectrum-css/helptext": "7.1.0", + "@spectrum-css/icon": "9.1.0", + "@spectrum-css/illustratedmessage": "9.1.0", + "@spectrum-css/infieldbutton": "6.1.1", + "@spectrum-css/inlinealert": "10.1.0", + "@spectrum-css/link": "7.1.0", + "@spectrum-css/logicbutton": "6.1.0", + "@spectrum-css/menu": "9.1.0", + "@spectrum-css/meter": "1.1.0", + "@spectrum-css/miller": "8.1.0", + "@spectrum-css/modal": "7.1.0", + "@spectrum-css/opacitycheckerboard": "4.1.0", + "@spectrum-css/page": "9.1.0", + "@spectrum-css/pagination": "10.1.0", + "@spectrum-css/picker": "9.1.2", + "@spectrum-css/pickerbutton": "6.1.1", + "@spectrum-css/popover": "8.2.0", + "@spectrum-css/progressbar": "6.1.0", + "@spectrum-css/progresscircle": "5.1.0", + "@spectrum-css/radio": "10.1.0", + "@spectrum-css/rating": "6.1.0", + "@spectrum-css/search": "8.1.0", + "@spectrum-css/sidenav": "7.1.0", + "@spectrum-css/slider": "6.1.0", + "@spectrum-css/splitview": "7.1.0", + "@spectrum-css/statuslight": "9.1.0", + "@spectrum-css/steplist": "7.1.0", + "@spectrum-css/stepper": "7.1.1", + "@spectrum-css/swatch": "8.1.1", + "@spectrum-css/swatchgroup": "5.1.0", + "@spectrum-css/switch": "6.1.0", + "@spectrum-css/table": "8.1.0", + "@spectrum-css/tabs": "6.1.1", + "@spectrum-css/tag": "10.1.0", + "@spectrum-css/taggroup": "7.1.0", + "@spectrum-css/textfield": "8.1.0", + "@spectrum-css/thumbnail": "8.1.0", + "@spectrum-css/toast": "11.1.0", + "@spectrum-css/tooltip": "7.1.0", + "@spectrum-css/tray": "5.1.0", + "@spectrum-css/treeview": "12.1.0", + "@spectrum-css/typography": "8.1.0", + "@spectrum-css/underlay": "6.1.0", + "@spectrum-css/well": "7.1.0", + "@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.4", + "@spectrum-css/tokens": "16.0.1", + "@spectrum-css/bundle": "1.0.0", + "@spectrum-css/generator": "4.1.0", + "@spectrum-css/ui-icons": "1.1.2" + }, + "changesets": [] +} diff --git a/.github/QUICK-START.md b/.github/QUICK-START.md index 963eb0580fb..4b97fcab7e8 100644 --- a/.github/QUICK-START.md +++ b/.github/QUICK-START.md @@ -3,6 +3,7 @@ This guide will show you how to quickly install Spectrum CSS and use it to display the Button component. ## Install using Node/yarn + Install the components you want along with their dependencies. Here's an example: ```shell @@ -12,26 +13,34 @@ yarn add -DW @spectrum-css/tokens @spectrum-css/typography @spectrum-css/page @s 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: ```html - + ``` -Use the `index.css` files in your project to include component and global styles ([Spectrum and Express contexts](https://github.com/adobe/spectrum-css?tab=readme-ov-file#visual-language), [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: +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 - - + + - - + + ``` Inside the `` tag, add the markup for your component (Spectrum button in our example). The example also includes the CSS class names `spectrum-Button--fill` and `spectrum-Button--accent`, to use the accent variant: ```html - ``` @@ -39,18 +48,26 @@ To put it all together, your final html file will look like this: ```html - - - - - - - - + + + + + + + ``` ## Include files from a CDN + Another way to include Spectrum CSS components in your project is to use a CDN to link to the components you want, plus their dependencies, in the `` tag of your HTML. If you choose to use a CDN, please note that Spectrum CSS doesn't manage a CDN, cannot confirm the availability or up-time of external CDNs, and doesn't recommend using a CDN for Spectrum CSS in a production environment. diff --git a/.github/actions/file-diff/package.json b/.github/actions/file-diff/package.json index 1d4cdd838a1..6e7a617f722 100644 --- a/.github/actions/file-diff/package.json +++ b/.github/actions/file-diff/package.json @@ -22,7 +22,7 @@ "package.json" ], "dependencies": { - "@actions/artifact": "^2.2.1", + "@actions/artifact": "^2.3.1", "@actions/core": "^1.11.1", "@actions/github": "^6.0.0", "@actions/glob": "^0.5.0", diff --git a/.github/workflows/development.yml b/.github/workflows/development.yml index 6924bb4dfbc..eede9e45e51 100644 --- a/.github/workflows/development.yml +++ b/.github/workflows/development.yml @@ -13,7 +13,7 @@ on: pull_request: branches: - main - - spectrum-two + - spectrum-2 # Allow us to run tests for PRs updating github actions - chore-*ci* - chore-*github-actions* @@ -100,8 +100,6 @@ jobs: files_yaml: | styles: - components/*/index.css - - components/*/themes/spectrum.css - - components/*/themes/express.css eslint: - components/*/stories/*.js mdlint: @@ -193,7 +191,7 @@ jobs: if: contains(github.event.pull_request.labels.*.name, 'run_vrt') || ((github.event.pull_request.draft != true || contains(github.event.pull_request.labels.*.name, 'run_ci')) && github.event.pull_request.mergeable == true) uses: ./.github/workflows/vrt.yml with: - skip: ${{ github.base_ref == 'spectrum-two' || contains(github.event.pull_request.labels.*.name, 'skip_vrt') }} + skip: ${{ contains(github.event.pull_request.labels.*.name, 'skip_vrt') }} secrets: inherit # ------------------------------------------------------------- diff --git a/.github/workflows/lint.yml b/.github/workflows/lint.yml index fe2f10c6172..b165fd55189 100644 --- a/.github/workflows/lint.yml +++ b/.github/workflows/lint.yml @@ -102,7 +102,7 @@ jobs: filter_mode: diff_context level: error reporter: github-pr-review - # stylelint_input: "components/*/index.css components/*/themes/*.css" + # stylelint_input: "components/*/index.css" stylelint_input: "${{ inputs.styles_added_files }} ${{ inputs.styles_modified_files }}" stylelint_config: "${{ github.workspace }}/stylelint.config.js" diff --git a/.github/workflows/production.yml b/.github/workflows/production.yml index 3b2be175eb5..ebf5baf243a 100644 --- a/.github/workflows/production.yml +++ b/.github/workflows/production.yml @@ -9,7 +9,7 @@ name: Build and verify production on: push: - branches: [main, spectrum-two] + branches: [main, spectrum-2] permissions: contents: read diff --git a/.github/workflows/release.yml b/.github/workflows/release.yml index 44b8ff6a45e..b71dd2f4e1d 100644 --- a/.github/workflows/release.yml +++ b/.github/workflows/release.yml @@ -4,7 +4,7 @@ on: push: branches: - main - - spectrum-two + - spectrum-2 concurrency: ${{ github.workflow }}-${{ github.ref }} diff --git a/.github/workflows/vrt.yml b/.github/workflows/vrt.yml index a8944aeecd4..aaa96777741 100644 --- a/.github/workflows/vrt.yml +++ b/.github/workflows/vrt.yml @@ -4,6 +4,7 @@ on: push: branches: - main + - spectrum-2 - "!changeset-release/**" - "!dependabot/**" workflow_dispatch: diff --git a/.storybook/assets/base.css b/.storybook/assets/base.css index fbf3f32e582..e5886de13ec 100644 --- a/.storybook/assets/base.css +++ b/.storybook/assets/base.css @@ -34,9 +34,12 @@ body { -webkit-tap-highlight-color: rgba(0, 0, 0, 0%); } -.spectrum.spectrum--legacy { - color: var(--spectrum-neutral-content-color-default); - background-color: var(--spectrum-background-layer-1-color); +.spectrum .spectrum-examples-static-black { + background: var(--spectrum-examples-gradient-static-black); +} + +.spectrum .spectrum-examples-static-white { + background: var(--spectrum-examples-gradient-static-white); } /* Hide the SVG elements that only include references */ diff --git a/.storybook/assets/index.css b/.storybook/assets/index.css index 95b4d83897d..b18c09d34ce 100644 --- a/.storybook/assets/index.css +++ b/.storybook/assets/index.css @@ -119,4 +119,11 @@ select:focus, border-color: rgb(2, 101, 220) !important; box-shadow: rgb(2, 101, 220) 0 0 0 1px inset !important; } + +nav.sidebar-container, +div.sb-bar { + color: var(--spectrum-neutral-content-color-default) !important; + background-color: var(--spectrum-background-layer-2-color) !important; +} + /* stylelint-enable selector-class-pattern */ diff --git a/.storybook/blocks/utilities.js b/.storybook/blocks/utilities.js index 204cb83a2e6..220a2acdd27 100644 --- a/.storybook/blocks/utilities.js +++ b/.storybook/blocks/utilities.js @@ -1,4 +1,3 @@ -import legacy from "@spectrum-css/tokens-legacy/dist/json/tokens.json"; import spectrum from "@spectrum-css/tokens/dist/json/tokens.json"; import { useTheme } from "@storybook/theming"; @@ -70,9 +69,8 @@ function fetchTheme({ color, scale, context } = {}) { // Create a platform context based on the scale (platform used in the token data) const platform = scale === "medium" ? "desktop" : "mobile"; - const tokens = context === "spectrum" ? spectrum : legacy; - return { color, scale, context, platform, tokens }; + return { color, scale, context, platform, tokens: spectrum }; } /** diff --git a/.storybook/decorators/context.js b/.storybook/decorators/context.js index 0ad4bb758aa..cc147ee10cd 100644 --- a/.storybook/decorators/context.js +++ b/.storybook/decorators/context.js @@ -1,7 +1,6 @@ import { makeDecorator, useEffect } from "@storybook/preview-api"; import { fetchContainers, toggleStyles } from "./helpers.js"; -import legacyTokens from "@spectrum-css/tokens-legacy/dist/index.css?inline"; import tokens from "@spectrum-css/tokens/dist/css/index.css?inline"; /** @@ -19,7 +18,6 @@ export const withContextWrapper = makeDecorator({ } = {}, globals: { color = "light", - context = "spectrum", scale = "medium", } = {}, parameters: { @@ -31,35 +29,26 @@ export const withContextWrapper = makeDecorator({ const staticColorSettings = { "black": { - background: "var(--spectrum-docs-static-black-background-color)", + background: "var(--spectrum-examples-gradient-static-black)", color: "light" }, "white": { - background: "var(--spectrum-docs-static-white-background-color)", + background: "var(--spectrum-examples-gradient-static-white)", color: "dark" }, }; - const original = { - color, - context, - scale, - }; + const original = { color, scale }; useEffect(() => { const isDocs = viewMode === "docs"; const isTesting = showTestingGrid; - const isRaw = Boolean(context === "raw"); - const isModern = Boolean(context === "spectrum"); - const isExpress = Boolean(context === "express"); - - if (!isRaw) { - // 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"); - } // Start by attaching the appropriate tokens to the container - toggleStyles(document.body, "tokens", isModern ? tokens : legacyTokens, !isRaw, context); + 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 @@ -69,7 +58,6 @@ export const withContextWrapper = makeDecorator({ // Reset the context to the original values color = original.color; - context = original.context; scale = original.scale; let staticKey = staticColor; @@ -84,20 +72,7 @@ export const withContextWrapper = makeDecorator({ if (!staticKey) hasStaticElement = false; // Every container gets the spectrum class - container.classList.toggle("spectrum", !isRaw); - - // S1 and S1 Express get the legacy class - container.classList.toggle("spectrum--legacy", !isModern && !isRaw); - - // Express only gets the express class - container.classList.toggle("spectrum--express", isExpress && !isRaw); - - // Darkest is deprecated in Spectrum 2 - if (isModern && color === "darkest") { - /* eslint-disable no-console -- notify that darkest was deprecated in S2 */ - console.warn("The 'darkest' color is deprecated in Spectrum 2. Please use 'dark' instead."); - color = "dark"; - } + container.classList.toggle("spectrum", true); // Let the static color override the color if it's set if (!isTestingWrapper && hasStaticElement && staticColorSettings[staticKey]?.color) { @@ -110,12 +85,12 @@ export const withContextWrapper = makeDecorator({ color = "light"; } - for (let c of ["light", "dark", "darkest"]) { - container.classList.toggle(`spectrum--${c}`, c === color && !isRaw); + 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 && !isRaw); + container.classList.toggle(`spectrum--${s}`, s === scale); } if (!isTestingWrapper) { @@ -129,7 +104,7 @@ export const withContextWrapper = makeDecorator({ } } - }, [context, color, scale, viewMode, original, staticColor, rootClass, tokens, legacyTokens, staticColorSettings, showTestingGrid]); + }, [viewMode, original, staticColor, color, scale, rootClass, tokens, staticColorSettings, showTestingGrid]); return StoryFn(data); }, diff --git a/.storybook/guides/develop.mdx b/.storybook/guides/develop.mdx index d36ba09a9a7..15211bc875d 100644 --- a/.storybook/guides/develop.mdx +++ b/.storybook/guides/develop.mdx @@ -14,11 +14,10 @@ Welcome to the development and exploration environment for Spectrum CSS, driven This guide is intended to get you up to speed on how we work within Storybook in the Spectrum CSS project. It will cover the following topics: -- [Architecture](#architecture) +- [Component architecture](#component-architecture) - [Writing stories](#writing-stories) - [Templates](#templates) - [Testing stories](#testing-stories) -- [Changelog](#changelog) For more general information about how to contribute to the Spectrum CSS project, take a look at our [contribution guidelines on GitHub](https://github.com/adobe/spectrum-css/blob/main/.github/CONTRIBUTING.md). @@ -31,35 +30,24 @@ For more general information about how to contribute to the Spectrum CSS project Each component has the following files: -- `index.css` - The source file for all styles related to the component. This contains all selectors and css properties for the component but specifically lacks any custom properties or variables. These values are sourced from the `themes` directory. -- `themes/*.css` - The theme-specific, component-level custom properties used to style the component. These files are meant to be loaded with the source styles. +- `index.css` - The source file for all styles related to the component. This contains all selectors and css properties for the component. - `stories/*.stories.js` - The storybook file that defines the component's stories and the available knobs for the component. - `stories/template.js` - The template function that generates the component's mark-up based on the provided settings. - `stories/*.test.js` - The testing grid for visual regression testing in Chromatic. -- `stories/*.mdx` - This asset generates the component-specific documentation and is rendered in Storybook as the Docs page. Each component outputs the following assets to `dist`: -- `index.css`: This asset includes the base CSS and the `themes/spectrum.css` definitions (without the system mapping layer). This asset is meant to be used in a environment where only the current Spectrum theme is supported. -- `index-base.css`: This asset includes only the base CSS; that is, the CSS without any custom property definitions. This can be used in conjunction with `index-theme.css` and the desired `themes/*.css` file to render a themed component. -- `index-theme.css`: This asset includes only the custom property definitions for the component as mapped to the system variables. This can be used in conjunction with `index-base.css` and the desired `themes/*.css` file to render a themed component. - -Each component outputs theme-specific assets to `dist/themes`. These assets include the system variables mapped to their global token counterparts. This file is meant to be loaded in conjunction with the `index-base.css` and `index-theme.css` files to render a themed component. - -- `themes/spectrum-two.css`: Represents the current Spectrum theme, aka Spectrum 2. -- `themes/spectrum.css`: Represents the legacy Spectrum theme, aka Spectrum 1. **deprecated** -- `themes/express.css`: Represents the Express theme. **deprecated** +- `index.css`: This asset includes the CSS for the component and is meant to be loaded in conjunction with the tokens for your desired color context and scales. ## Adding a new component 1. Generate a new component using the `yarn new component` command. The generator will prompt you to answer questions about your component. 2. Edit the `dependencies` within the `package.json` file to use only the dependencies your component needs. All components rely on `@spectrum-css/tokens`, and most rely on `@spectrum-css/icon`. 3. Once your folder has been generated, you can run `yarn start` in the root of the project to begin developing. -4. The `index.css` file is where most of your styles will be added. Add any custom property mappings to the global token library in the `themes/spectrum.css` asset. -5. Inside the `stories` directory you will find a `template.js`, `*.stories.js`, and `*.mdx` file. +4. The `index.css` file is where all of your styles should be added. +5. Inside the `stories` directory you will find a `template.js` and `*.stories.js` file. - In the `*.stories.js` file, define the available knobs and properties for your component, as well as any standard variations you want to surface in [Storybook](https://storybook.js.org/docs/react/writing-stories/introduction). - Update the `template.js` file with the markup, using [lit-html syntax](https://lit.dev/docs/templates/overview/) to adjust results based on the provided settings from the Storybook knobs. - - Update the `*.mdx` file with the documentation for your component. _Note_: Because we use scoped packages, before it can be published, you must manually publish the new component as public: @@ -116,8 +104,6 @@ CSS assets will be run through their respective postcss configurations. This mea ```js import "../index.css"; -import "../themes/express.css"; -import "../themes/spectrum.css"; ``` We are leaning on Storybook's `@storybook/web-components-vite` framework configuration as our stories rely on lit for dynamic attribute assignment. @@ -131,7 +117,7 @@ We rely on the following add-ons to power our implementation: - [@whitespace/storybook-addon-html](https://www.npmjs.com/package/@whitespace/storybook-addon-html) - [@etchteam/storybook-addon-status](https://storybook.js.org/addons/@etchteam/storybook-addon-status) - [@storybook/addon-interactions](https://github.com/storybookjs/storybook/tree/next/code/addons/interactions) -- [@chromaui/addon-visual-tests](https://www.chromatic.com/docs/visual-testing-addon/) +- [@chromatic-com/storybook](https://www.chromatic.com/docs/visual-testing-addon/) - [@storybook/addon-designs](https://storybook.js.org/addons/@storybook/addon-designs/) ## Writing stories @@ -345,8 +331,6 @@ import { ifDefined } from "lit/directives/if-defined.js"; import { when } from "lit/directives/when.js"; import "../index.css"; -import "../themes/express.css"; -import "../themes/spectrum.css"; export const Template = ( { @@ -479,7 +463,7 @@ Default.parameters = { }; ``` -#### Story tags +### Story tags A story's [tags](https://storybook.js.org/docs/writing-stories/tags#built-in-tags) can be configured for a few different purposes. Through this project's global configuration, all stories include the `autodocs` tag by default, which causes them to appear on the component's "Docs" page. The `dev` tag, which Storybook applies by default, denotes stories that should be included in the Storybook sidebar. The `!` symbol is used to negate the tag. diff --git a/.storybook/main.js b/.storybook/main.js index ccd00e2f45e..d8e1b0f2251 100644 --- a/.storybook/main.js +++ b/.storybook/main.js @@ -20,6 +20,11 @@ export default { files: "*.@(stories.js|mdx)", titlePrefix: "Guides", }, + { + directory: "./foundations", + files: "*/*.@(stories.js|mdx)", + titlePrefix: "Foundations", + }, { directory: "./deprecated", files: "**/*.@(stories.js|mdx)", diff --git a/.storybook/manager.js b/.storybook/manager.js index 53b86a56602..ce8c242b040 100644 --- a/.storybook/manager.js +++ b/.storybook/manager.js @@ -1,11 +1,14 @@ + import { addons } from "@storybook/manager-api"; import { create } from "@storybook/theming"; +import { startCase } from "lodash"; -import "./assets/index.css"; import logo from "./assets/logo.svg"; import pkg from "./package.json"; +import "./assets/index.css"; + const root = document.body ?? document.documentElement; if (root) root.classList.add("spectrum", "spectrum--light", "spectrum--medium"); @@ -64,5 +67,6 @@ addons.setConfig({ }), sidebar: { showRoots: false, + renderLabel: ({ name, type }) => (type === 'story' ? name : startCase(name)) + " 📚", }, }); diff --git a/.storybook/modes/index.js b/.storybook/modes/index.js index c3b991e5bd7..b4df304251d 100644 --- a/.storybook/modes/index.js +++ b/.storybook/modes/index.js @@ -20,16 +20,6 @@ const modes = { color: "dark", textDirection: "rtl", }, - "S1 | Light | LTR": { - context: "legacy", - color: "light", - textDirection: "ltr", - }, - "Express | Light | LTR": { - context: "express", - color: "light", - textDirection: "ltr", - }, }; export default modes; diff --git a/.storybook/package.json b/.storybook/package.json index 34e088be049..00f66af80ff 100644 --- a/.storybook/package.json +++ b/.storybook/package.json @@ -42,30 +42,29 @@ "@adobe/spectrum-css-workflow-icons": "^1.5.4", "@spectrum-css/bundle": "1.0.1", "@spectrum-css/tokens": "16.0.1", - "@spectrum-css/tokens-legacy": "npm:@spectrum-css/tokens@^15.0.0", "@spectrum-css/ui-icons": "1.1.2" }, "devDependencies": { - "@babel/core": "^7.26.0", - "@chromatic-com/storybook": "^3.2.3", + "@babel/core": "^7.26.9", + "@chromatic-com/storybook": "^3.2.5", "@etchteam/storybook-addon-status": "^5.0.0", - "@storybook/addon-a11y": "^8.4.7", - "@storybook/addon-actions": "^8.4.7", - "@storybook/addon-designs": "^8.0.4", - "@storybook/addon-docs": "^8.4.7", - "@storybook/addon-essentials": "^8.4.7", - "@storybook/addon-interactions": "^8.4.7", - "@storybook/blocks": "^8.4.7", - "@storybook/builder-vite": "^8.4.7", - "@storybook/components": "^8.4.7", - "@storybook/core-events": "^8.4.7", - "@storybook/manager-api": "^8.4.7", - "@storybook/preview-api": "^8.4.7", - "@storybook/test-runner": "^0.21.0", - "@storybook/theming": "^8.4.7", - "@storybook/web-components-vite": "^8.4.7", + "@storybook/addon-a11y": "^8.6.4", + "@storybook/addon-actions": "^8.6.4", + "@storybook/addon-designs": "^8.2.1", + "@storybook/addon-docs": "^8.6.4", + "@storybook/addon-essentials": "^8.6.4", + "@storybook/addon-interactions": "^8.6.4", + "@storybook/blocks": "^8.6.4", + "@storybook/builder-vite": "^8.6.4", + "@storybook/components": "^8.6.4", + "@storybook/core-events": "^8.6.4", + "@storybook/manager-api": "^8.6.4", + "@storybook/preview-api": "^8.6.4", + "@storybook/test-runner": "^0.22.0", + "@storybook/theming": "^8.6.4", + "@storybook/web-components-vite": "^8.6.4", "@whitespace/storybook-addon-html": "^6.1.1", - "chromatic": "^11.22.2", + "chromatic": "^11.27.0", "lit": "^3.2.1", "lodash-es": "^4.17.21", "npm-registry-fetch": "^18.0.2", @@ -74,10 +73,10 @@ "react": "^18.3.1", "react-dom": "^18.3.1", "react-syntax-highlighter": "^15.6.1", - "remark-gfm": "^4.0.0", + "remark-gfm": "^4.0.1", "rollup-plugin-postcss-lit": "^2.1.0", - "storybook": "^8.4.7", - "vite": "^5.4.11" + "storybook": "^8.6.4", + "vite": "^5.4.14" }, "keywords": [ "design-system", diff --git a/.storybook/preview.js b/.storybook/preview.js index ff243044967..9f75a7e221f 100644 --- a/.storybook/preview.js +++ b/.storybook/preview.js @@ -32,6 +32,8 @@ export const parameters = { order: [ "Guides", ["Contributing", "*", "Adobe Code of Conduct", "Changelog"], + "Foundations", + ["*"], "Components", ["*", ["Docs", "Default", "*"]], "Deprecated", @@ -88,7 +90,7 @@ export const parameters = { // Set an empty object to avoid the "undefined" value in the ComponentDetails doc block packageJson: {}, // A list of published npm tags that should not appear in the ComponentDetails doc block - ignoredTags: ["beta", "next"], + ignoredTags: ["beta"], }; export default { diff --git a/.storybook/types/global.js b/.storybook/types/global.js index 60a369079e5..55f8c760e4d 100644 --- a/.storybook/types/global.js +++ b/.storybook/types/global.js @@ -4,22 +4,6 @@ /** @type import('@storybook/types').GlobalTypes */ export default { - context: { - title: "Design context", - description: "The variation of Spectrum to use in the component", - defaultValue: "spectrum", - type: "string", - showName: true, - toolbar: { - items: [ - { value: "spectrum", title: "Spectrum 2", right: "default" }, - { value: "legacy", title: "Spectrum 1", right: "legacy" }, - { value: "express", title: "Express", right: "legacy" }, - { value: "raw", title: "Token-free", right: "raw" }, - ], - dynamicTitle: true, - }, - }, color: { title: "Color", description: "Controls the color context of the component", @@ -30,7 +14,6 @@ export default { items: [ { value: "light", title: "Light", right: "default" }, { value: "dark", title: "Dark" }, - { value: "darkest", title: "Darkest", right: "deprecated" }, ], dynamicTitle: true, }, diff --git a/.vscode/settings.json b/.vscode/settings.json index c940cee9d9d..d6ebe229e36 100644 --- a/.vscode/settings.json +++ b/.vscode/settings.json @@ -43,10 +43,6 @@ "siteId": "jira.corp.adobe.com" } ], - "atlascode.jira.lastCreateSiteAndProject": { - "projectKey": "CSS", - "siteId": "jira.corp.adobe.com" - }, "atlascode.jira.workingSite": { "baseUrlSuffix": "jira.corp.adobe.com" }, @@ -101,10 +97,8 @@ } ], "cssVariables.lookupFiles": [ - "${workspaceFolder}/tokens/dist/css/index.css", - "${workspaceFolder}/tokens/dist/css/*.css", - "${workspaceFolder}/components/*/index.css", - "${workspaceFolder}/components/*/themes/*.css" + "${workspaceFolder}/tokens/**/*.css", + "${workspaceFolder}/components/*/index.css" ], "docthis.includeDescriptionTag": true, "docthis.inferTypesFromNames": true, @@ -150,19 +144,19 @@ "githubPullRequests.queries": [ { "label": "Waiting for my review", - "query": "is:open review-requested:${user}" + "query": "repo:${owner}/${repository} is:open review-requested:${user}" }, { "label": "Assigned to me", - "query": "is:open assignee:${user}" + "query": "repo:${owner}/${repository} is:open assignee:${user}" }, { "label": "Created by me", - "query": "is:open author:${user}" + "query": "repo:${owner}/${repository} is:open author:${user}" }, { "label": "Mentioned me", - "query": "is:open mentions:${user}" + "query": "repo:${owner}/${repository} is:open mentions:${user}" } ], "js/ts.implicitProjectConfig.experimentalDecorators": true, diff --git a/components/accordion/dist/metadata.json b/components/accordion/dist/metadata.json index 3f3e89fbf15..4080a4b78ff 100644 --- a/components/accordion/dist/metadata.json +++ b/components/accordion/dist/metadata.json @@ -39,9 +39,7 @@ ".spectrum-Accordion:dir(rtl)", ".spectrum-Accordion:lang(ja)", ".spectrum-Accordion:lang(ko)", - ".spectrum-Accordion:lang(zh)", - "[dir=\"rtl\"] .spectrum-Accordion", - "[dir=\"rtl\"] .spectrum-Accordion-itemIconContainer" + ".spectrum-Accordion:lang(zh)" ], "modifiers": [ "--mod-accordion-background-color-default", @@ -198,11 +196,6 @@ "--spectrum-neutral-content-color-key-focus", "--spectrum-sans-font-family-stack" ], - "system-theme": [ - "--system-accordion-divider-color", - "--system-accordion-item-content-color", - "--system-accordion-item-content-disabled-color" - ], "passthroughs": [], "high-contrast": [] } diff --git a/components/accordion/index.css b/components/accordion/index.css index 2e0a7616455..e08441208df 100644 --- a/components/accordion/index.css +++ b/components/accordion/index.css @@ -11,9 +11,11 @@ * governing permissions and limitations under the License. */ -@import "./themes/spectrum-two.css"; - .spectrum-Accordion { + --spectrum-accordion-divider-color: var(--spectrum-gray-200); + --spectrum-accordion-item-content-disabled-color: var(--spectrum-disabled-content-color); + --spectrum-accordion-item-content-color: var(--spectrum-body-color); + --spectrum-accordion-item-height: var(--spectrum-component-height-200); --spectrum-accordion-item-width: var(--spectrum-accordion-minimum-width); --spectrum-accordion-disclosure-indicator-height: var(--spectrum-component-height-100); diff --git a/components/accordion/stories/template.js b/components/accordion/stories/template.js index 8294f3a4027..79fc3648bf3 100644 --- a/components/accordion/stories/template.js +++ b/components/accordion/stories/template.js @@ -7,9 +7,6 @@ import { repeat } from "lit/directives/repeat.js"; import { styleMap } from "lit/directives/style-map.js"; import "../index.css"; -import "../themes/spectrum.css"; -/* Must be imported last */ -import "../themes/express.css"; export const AccordionItem = ({ heading, diff --git a/components/accordion/themes/express.css b/components/accordion/themes/express.css deleted file mode 100644 index 9fd550418f2..00000000000 --- a/components/accordion/themes/express.css +++ /dev/null @@ -1,16 +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. - */ - -/* @combine .spectrum.spectrum--express */ - -@import "./spectrum.css"; diff --git a/components/accordion/themes/spectrum-two.css b/components/accordion/themes/spectrum-two.css deleted file mode 100644 index 7097b1adc62..00000000000 --- a/components/accordion/themes/spectrum-two.css +++ /dev/null @@ -1,20 +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. - */ - -@container style(--system: spectrum) { - .spectrum-Accordion { - --spectrum-accordion-divider-color: var(--spectrum-gray-200); - --spectrum-accordion-item-content-disabled-color: var(--spectrum-disabled-content-color); - --spectrum-accordion-item-content-color: var(--spectrum-body-color); - } -} diff --git a/components/accordion/themes/spectrum.css b/components/accordion/themes/spectrum.css deleted file mode 100644 index 572d3f1db1b..00000000000 --- a/components/accordion/themes/spectrum.css +++ /dev/null @@ -1,24 +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. - */ - -/* @combine .spectrum.spectrum--legacy */ - -@import "./spectrum-two.css"; - -@container style(--system: legacy) { - .spectrum-Accordion { - --spectrum-accordion-divider-color: var(--spectrum-gray-300); - --spectrum-accordion-item-content-disabled-color: var(--spectrum-gray-400); - --spectrum-accordion-item-content-color: var(--spectrum-gray-800); - } -} diff --git a/components/actionbar/dist/metadata.json b/components/actionbar/dist/metadata.json index 3632db90bf7..da9142c6fc3 100644 --- a/components/actionbar/dist/metadata.json +++ b/components/actionbar/dist/metadata.json @@ -88,10 +88,6 @@ "--spectrum-spacing-75", "--spectrum-white" ], - "system-theme": [ - "--system-action-bar-popover-background-color", - "--system-action-bar-popover-border-color" - ], "passthroughs": [], "high-contrast": ["--highcontrast-actionbar-popover-border-color"] } diff --git a/components/actionbar/index.css b/components/actionbar/index.css index 474499e462f..6bf566dcb34 100644 --- a/components/actionbar/index.css +++ b/components/actionbar/index.css @@ -11,9 +11,11 @@ * governing permissions and limitations under the License. */ -@import "./themes/spectrum-two.css"; - .spectrum-ActionBar { + /* colors - applied to popover */ + --spectrum-actionbar-popover-background-color: var(--spectrum-gray-25); + --spectrum-actionbar-popover-border-color: var(--spectrum-gray-400); + --spectrum-actionbar-height: var(--spectrum-action-bar-height); --spectrum-actionbar-corner-radius: var(--spectrum-corner-radius-100); diff --git a/components/actionbar/stories/template.js b/components/actionbar/stories/template.js index 8b134157bd2..6809e55225e 100644 --- a/components/actionbar/stories/template.js +++ b/components/actionbar/stories/template.js @@ -1,16 +1,13 @@ -import { Container } from "@spectrum-css/preview/decorators"; import { Template as ActionGroup } from "@spectrum-css/actiongroup/stories/template.js"; import { Template as CloseButton } from "@spectrum-css/closebutton/stories/template.js"; import { Template as FieldLabel } from "@spectrum-css/fieldlabel/stories/template.js"; import { Template as Popover } from "@spectrum-css/popover/stories/template.js"; +import { Container } from "@spectrum-css/preview/decorators"; import { html } from "lit"; import { classMap } from "lit/directives/class-map.js"; import { styleMap } from "lit/directives/style-map.js"; import "../index.css"; -import "../themes/spectrum.css"; -/* Must be imported last */ -import "../themes/express.css"; export const Template = ({ rootClass = "spectrum-ActionBar", diff --git a/components/actionbar/themes/express.css b/components/actionbar/themes/express.css deleted file mode 100644 index 9fd550418f2..00000000000 --- a/components/actionbar/themes/express.css +++ /dev/null @@ -1,16 +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. - */ - -/* @combine .spectrum.spectrum--express */ - -@import "./spectrum.css"; diff --git a/components/actionbar/themes/spectrum-two.css b/components/actionbar/themes/spectrum-two.css deleted file mode 100644 index 157c2dc9294..00000000000 --- a/components/actionbar/themes/spectrum-two.css +++ /dev/null @@ -1,20 +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. - */ - -@container style(--system: spectrum) { - .spectrum-ActionBar { - /* colors - applied to popover */ - --spectrum-actionbar-popover-background-color: var(--spectrum-gray-25); - --spectrum-actionbar-popover-border-color: var(--spectrum-gray-400); - } -} diff --git a/components/actionbar/themes/spectrum.css b/components/actionbar/themes/spectrum.css deleted file mode 100644 index 27971810d3d..00000000000 --- a/components/actionbar/themes/spectrum.css +++ /dev/null @@ -1,23 +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. - */ - -/* @combine .spectrum.spectrum--legacy */ - -@import "./spectrum-two.css"; - -@container style(--system: legacy) { - .spectrum-ActionBar { - --spectrum-actionbar-popover-background-color: var(--spectrum-gray-50); - --spectrum-actionbar-popover-border-color: var(--spectrum-gray-400); - } -} diff --git a/components/actionbutton/dist/metadata.json b/components/actionbutton/dist/metadata.json index 08d99aab279..f2ef34ab262 100644 --- a/components/actionbutton/dist/metadata.json +++ b/components/actionbutton/dist/metadata.json @@ -3,7 +3,6 @@ "selectors": [ ".spectrum-ActionButton", ".spectrum-ActionButton--sizeL", - ".spectrum-ActionButton--sizeM", ".spectrum-ActionButton--sizeS", ".spectrum-ActionButton--sizeXL", ".spectrum-ActionButton--sizeXS", @@ -20,11 +19,6 @@ ".spectrum-ActionButton.is-selected .spectrum-ActionButton-label", ".spectrum-ActionButton.spectrum-ActionButton--emphasized:not(.spectrum-ActionButton--staticBlack, .spectrum-ActionButton--staticWhite)", ".spectrum-ActionButton.spectrum-ActionButton--quiet", - ".spectrum-ActionButton.spectrum-ActionButton--sizeL", - ".spectrum-ActionButton.spectrum-ActionButton--sizeM", - ".spectrum-ActionButton.spectrum-ActionButton--sizeS", - ".spectrum-ActionButton.spectrum-ActionButton--sizeXL", - ".spectrum-ActionButton.spectrum-ActionButton--sizeXS", ".spectrum-ActionButton.spectrum-ActionButton--staticBlack", ".spectrum-ActionButton.spectrum-ActionButton--staticBlack.spectrum-ActionButton--quiet", ".spectrum-ActionButton.spectrum-ActionButton--staticWhite", @@ -38,7 +32,6 @@ ".spectrum-ActionButton:focus-visible", ".spectrum-ActionButton:focus-visible:after", ".spectrum-ActionButton:hover", - "[dir=\"rtl\"] .spectrum-ActionButton", "a.spectrum-ActionButton" ], "modifiers": [ @@ -90,10 +83,7 @@ "--mod-actionbutton-label-color", "--mod-actionbutton-min-width", "--mod-actionbutton-static-content-color", - "--mod-actionbutton-text-to-visual", - "--mod-animation-duration-100", - "--mod-line-height-100", - "--mod-sans-font-family-stack" + "--mod-actionbutton-text-to-visual" ], "component": [ "--spectrum-action-button-edge-to-hold-icon-extra-large", @@ -119,7 +109,6 @@ "--spectrum-actionbutton-border-color-focus", "--spectrum-actionbutton-border-color-hover", "--spectrum-actionbutton-border-radius", - "--spectrum-actionbutton-border-radius-default", "--spectrum-actionbutton-border-width", "--spectrum-actionbutton-content-color", "--spectrum-actionbutton-content-color-selected", @@ -213,12 +202,8 @@ "--spectrum-text-to-visual-75", "--spectrum-transparent-black-100", "--spectrum-transparent-black-200", - "--spectrum-transparent-black-800", - "--spectrum-transparent-black-900", "--spectrum-transparent-white-100", "--spectrum-transparent-white-200", - "--spectrum-transparent-white-800", - "--spectrum-transparent-white-900", "--spectrum-white", "--spectrum-workflow-icon-size-100", "--spectrum-workflow-icon-size-200", @@ -226,66 +211,6 @@ "--spectrum-workflow-icon-size-50", "--spectrum-workflow-icon-size-75" ], - "system-theme": [ - "--system-action-button-background-color-default", - "--system-action-button-background-color-disabled", - "--system-action-button-background-color-down", - "--system-action-button-background-color-focus", - "--system-action-button-background-color-hover", - "--system-action-button-background-color-selected", - "--system-action-button-background-color-selected-down", - "--system-action-button-background-color-selected-focus", - "--system-action-button-background-color-selected-hover", - "--system-action-button-border-color-default", - "--system-action-button-border-color-disabled", - "--system-action-button-border-color-down", - "--system-action-button-border-color-focus", - "--system-action-button-border-color-hover", - "--system-action-button-content-color-selected", - "--system-action-button-quiet-background-color-default", - "--system-action-button-quiet-background-color-disabled", - "--system-action-button-quiet-background-color-down", - "--system-action-button-quiet-background-color-focus", - "--system-action-button-quiet-background-color-hover", - "--system-action-button-quiet-background-color-selected-disabled", - "--system-action-button-size-l-border-radius-default", - "--system-action-button-size-m-border-radius-default", - "--system-action-button-size-s-border-radius-default", - "--system-action-button-size-xl-border-radius-default", - "--system-action-button-size-xs-border-radius-default", - "--system-action-button-static-black-background-color-default", - "--system-action-button-static-black-background-color-disabled", - "--system-action-button-static-black-background-color-down", - "--system-action-button-static-black-background-color-focus", - "--system-action-button-static-black-background-color-hover", - "--system-action-button-static-black-background-color-selected-disabled", - "--system-action-button-static-black-border-color-default", - "--system-action-button-static-black-border-color-disabled", - "--system-action-button-static-black-border-color-down", - "--system-action-button-static-black-border-color-focus", - "--system-action-button-static-black-border-color-hover", - "--system-action-button-static-black-quiet-background-color-default", - "--system-action-button-static-black-quiet-background-color-disabled", - "--system-action-button-static-black-quiet-background-color-down", - "--system-action-button-static-black-quiet-background-color-focus", - "--system-action-button-static-black-quiet-background-color-hover", - "--system-action-button-static-white-background-color-default", - "--system-action-button-static-white-background-color-disabled", - "--system-action-button-static-white-background-color-down", - "--system-action-button-static-white-background-color-focus", - "--system-action-button-static-white-background-color-hover", - "--system-action-button-static-white-background-color-selected-disabled", - "--system-action-button-static-white-border-color-default", - "--system-action-button-static-white-border-color-disabled", - "--system-action-button-static-white-border-color-down", - "--system-action-button-static-white-border-color-focus", - "--system-action-button-static-white-border-color-hover", - "--system-action-button-static-white-quiet-background-color-default", - "--system-action-button-static-white-quiet-background-color-disabled", - "--system-action-button-static-white-quiet-background-color-down", - "--system-action-button-static-white-quiet-background-color-focus", - "--system-action-button-static-white-quiet-background-color-hover" - ], "passthroughs": [ "--mod-button-animation-duration", "--mod-button-font-family", diff --git a/components/actionbutton/index.css b/components/actionbutton/index.css index ac4f410471e..d2bd0509b69 100644 --- a/components/actionbutton/index.css +++ b/components/actionbutton/index.css @@ -12,7 +12,6 @@ */ @import "@spectrum-css/commons/basebutton.css"; -@import "./themes/spectrum-two.css"; @media (forced-colors: active) { .spectrum-ActionButton { @@ -49,43 +48,75 @@ } .spectrum-ActionButton { + --spectrum-actionbutton-background-color-default: var(--spectrum-gray-100); + --spectrum-actionbutton-background-color-hover: var(--spectrum-gray-200); + --spectrum-actionbutton-background-color-down: var(--spectrum-gray-200); + --spectrum-actionbutton-background-color-focus: var(--spectrum-gray-200); + --spectrum-actionbutton-background-color-disabled: var(--spectrum-disabled-background-color); + --spectrum-actionbutton-background-color-selected-disabled: var(--spectrum-transparent-black-100); + + --spectrum-actionbutton-background-color-selected: var(--spectrum-neutral-background-color-selected-default); + --spectrum-actionbutton-background-color-selected-hover: var(--spectrum-neutral-background-color-selected-hover); + --spectrum-actionbutton-background-color-selected-down: var(--spectrum-neutral-background-color-selected-down); + --spectrum-actionbutton-background-color-selected-focus: var(--spectrum-neutral-background-color-selected-key-focus); + + --spectrum-actionbutton-border-color-default: transparent; + --spectrum-actionbutton-border-color-hover: transparent; + --spectrum-actionbutton-border-color-down: transparent; + --spectrum-actionbutton-border-color-focus: transparent; + --spectrum-actionbutton-border-color-disabled: transparent; + + --spectrum-actionbutton-content-color-selected: var(--spectrum-gray-50); + --spectrum-actionbutton-background-color: var(--highcontrast-actionbutton-background-color, var(--mod-actionbutton-background-color-default, var(--spectrum-actionbutton-background-color-default))); --spectrum-actionbutton-border-color: var(--highcontrast-actionbutton-border-color, var(--mod-actionbutton-border-color-default, var(--spectrum-actionbutton-border-color-default))); --spectrum-actionbutton-content-color: var(--highcontrast-actionbutton-content-color, var(--mod-actionbutton-content-color-default, var(--spectrum-neutral-content-color-default))); - --spectrum-actionbutton-border-radius: var(--mod-actionbutton-border-radius, var(--spectrum-actionbutton-border-radius-default)); + --spectrum-actionbutton-border-radius: var(--mod-actionbutton-border-radius, var(--spectrum-corner-radius-medium-size-medium)); --spectrum-actionbutton-border-width: var(--mod-actionbutton-border-width, var(--spectrum-border-width-100)); --spectrum-actionbutton-focus-indicator-gap: var(--mod-actionbutton-focus-indicator-gap, var(--spectrum-focus-indicator-gap)); --spectrum-actionbutton-focus-indicator-thickness: var(--mod-actionbutton-focus-indicator-thickness, var(--spectrum-focus-indicator-thickness)); --spectrum-actionbutton-focus-indicator-color: var(--highcontrast-actionbutton-focus-indicator-color, var(--mod-actionbutton-focus-indicator-color, var(--spectrum-focus-indicator-color))); + --spectrum-actionbutton-sized-height: var(--spectrum-component-height-100); + --spectrum-actionbutton-sized-icon-size: var(--spectrum-workflow-icon-size-100); + --spectrum-actionbutton-sized-font-size: var(--spectrum-font-size-100); + --spectrum-actionbutton-sized-text-to-visual: var(--spectrum-text-to-visual-100); + --spectrum-actionbutton-sized-edge-to-hold-icon: var(--spectrum-action-button-edge-to-hold-icon-medium); + --spectrum-actionbutton-sized-edge-to-visual: var(--spectrum-component-edge-to-visual-100); + --spectrum-actionbutton-sized-edge-to-text: var(--spectrum-component-edge-to-text-100); + --spectrum-actionbutton-sized-edge-to-visual-only: var(--spectrum-component-edge-to-visual-only-100); + &:dir(rtl) { --spectrum-logical-rotation: matrix(-1, 0, 0, 1, 0, 0); } &.spectrum-ActionButton--quiet { --spectrum-actionbutton-border-color: transparent; - } - /* Emphasized styles are only applied to the "selected" state of the button and are not applied in static color modes */ - &.spectrum-ActionButton--emphasized:not(.spectrum-ActionButton--staticBlack, .spectrum-ActionButton--staticWhite) { - --mod-actionbutton-background-color-default-selected: var(--mod-actionbutton-background-color-default-selected-emphasized, var(--spectrum-accent-background-color-default)); - --mod-actionbutton-background-color-hover-selected: var(--mod-actionbutton-background-color-hover-selected-emphasized, var(--spectrum-accent-background-color-hover)); - --mod-actionbutton-background-color-down-selected: var(--mod-actionbutton-background-color-down-selected-emphasized, var(--spectrum-accent-background-color-down)); - --mod-actionbutton-background-color-focus-selected: var(--mod-actionbutton-background-color-focus-selected-emphasized, var(--spectrum-accent-background-color-key-focus)); - - --mod-actionbutton-content-color-default-selected: var(--mod-actionbutton-content-color-default-selected-emphasized, var(--spectrum-white)); - --mod-actionbutton-content-color-hover-selected: var(--mod-actionbutton-content-color-hover-selected-emphasized, var(--spectrum-white)); - --mod-actionbutton-content-color-down-selected: var(--mod-actionbutton-content-color-down-selected-emphasized, var(--spectrum-white)); - --mod-actionbutton-content-color-focus-selected: var(--mod-actionbutton-content-color-focus-selected-emphasized, var(--spectrum-white)); + --spectrum-actionbutton-background-color-default: transparent; + --spectrum-actionbutton-background-color-hover: var(--spectrum-gray-200); + --spectrum-actionbutton-background-color-down: var(--spectrum-gray-200); + --spectrum-actionbutton-background-color-focus: var(--spectrum-gray-200); + --spectrum-actionbutton-background-color-disabled: transparent; + --spectrum-actionbutton-background-color-selected-disabled: var(--spectrum-disabled-background-color); } &.spectrum-ActionButton--staticBlack { - --mod-actionbutton-background-color-default-selected: var(--spectrum-transparent-black-800); - --mod-actionbutton-background-color-hover-selected: var(--spectrum-transparent-black-900); - --mod-actionbutton-background-color-down-selected: var(--spectrum-transparent-black-900); - --mod-actionbutton-background-color-focus-selected: var(--spectrum-transparent-black-900); + --spectrum-actionbutton-border-color-default: transparent; + --spectrum-actionbutton-border-color-hover: transparent; + --spectrum-actionbutton-border-color-down: transparent; + --spectrum-actionbutton-border-color-focus: transparent; + --spectrum-actionbutton-border-color-disabled: transparent; + + --spectrum-actionbutton-background-color-disabled: var(--spectrum-disabled-static-black-background-color); + --spectrum-actionbutton-background-color-selected-disabled: var(--spectrum-disabled-static-black-background-color); + + --spectrum-actionbutton-background-color-default: var(--spectrum-transparent-black-100); + --spectrum-actionbutton-background-color-hover: var(--spectrum-transparent-black-200); + --spectrum-actionbutton-background-color-down: var(--spectrum-transparent-black-200); + --spectrum-actionbutton-background-color-focus: var(--spectrum-transparent-black-200); --mod-actionbutton-content-color-default: var(--spectrum-black); --mod-actionbutton-content-color-hover: var(--spectrum-black); @@ -99,14 +130,30 @@ --mod-actionbutton-content-color-focus-selected: var(--mod-actionbutton-static-content-color, var(--spectrum-white)); --mod-actionbutton-focus-indicator-color: var(--spectrum-static-black-focus-indicator-color); + + &.spectrum-ActionButton--quiet { + --spectrum-actionbutton-background-color-default: transparent; + --spectrum-actionbutton-background-color-hover: var(--spectrum-transparent-black-200); + --spectrum-actionbutton-background-color-down: var(--spectrum-transparent-black-200); + --spectrum-actionbutton-background-color-focus: var(--spectrum-transparent-black-200); + --spectrum-actionbutton-background-color-disabled: transparent; + } } &.spectrum-ActionButton--staticWhite { - /* background color _not_ selected is coming from the system theme layer */ - --mod-actionbutton-background-color-default-selected: var(--spectrum-transparent-white-800); - --mod-actionbutton-background-color-hover-selected: var(--spectrum-transparent-white-900); - --mod-actionbutton-background-color-down-selected: var(--spectrum-transparent-white-900); - --mod-actionbutton-background-color-focus-selected: var(--spectrum-transparent-white-900); + --spectrum-actionbutton-border-color-default: transparent; + --spectrum-actionbutton-border-color-hover: transparent; + --spectrum-actionbutton-border-color-down: transparent; + --spectrum-actionbutton-border-color-focus: transparent; + --spectrum-actionbutton-border-color-disabled: transparent; + + --spectrum-actionbutton-background-color-disabled: var(--spectrum-disabled-static-white-background-color); + --spectrum-actionbutton-background-color-selected-disabled: var(--spectrum-disabled-static-white-background-color); + + --spectrum-actionbutton-background-color-default: var(--spectrum-transparent-white-100); + --spectrum-actionbutton-background-color-hover: var(--spectrum-transparent-white-200); + --spectrum-actionbutton-background-color-down: var(--spectrum-transparent-white-200); + --spectrum-actionbutton-background-color-focus: var(--spectrum-transparent-white-200); --mod-actionbutton-content-color-default: var(--spectrum-white); --mod-actionbutton-content-color-hover: var(--spectrum-white); @@ -120,6 +167,27 @@ --mod-actionbutton-content-color-focus-selected: var(--mod-actionbutton-static-content-color, var(--spectrum-black)); --mod-actionbutton-focus-indicator-color: var(--spectrum-static-white-focus-indicator-color); + + &.spectrum-ActionButton--quiet { + --spectrum-actionbutton-background-color-default: transparent; + --spectrum-actionbutton-background-color-hover: var(--spectrum-transparent-white-200); + --spectrum-actionbutton-background-color-down: var(--spectrum-transparent-white-200); + --spectrum-actionbutton-background-color-focus: var(--spectrum-transparent-white-200); + --spectrum-actionbutton-background-color-disabled: transparent; + } + } + + /* Emphasized styles are only applied to the "selected" state of the button and are not applied in static color modes */ + &.spectrum-ActionButton--emphasized:not(.spectrum-ActionButton--staticBlack, .spectrum-ActionButton--staticWhite) { + --mod-actionbutton-background-color-default-selected: var(--mod-actionbutton-background-color-default-selected-emphasized, var(--spectrum-accent-background-color-default)); + --mod-actionbutton-background-color-hover-selected: var(--mod-actionbutton-background-color-hover-selected-emphasized, var(--spectrum-accent-background-color-hover)); + --mod-actionbutton-background-color-down-selected: var(--mod-actionbutton-background-color-down-selected-emphasized, var(--spectrum-accent-background-color-down)); + --mod-actionbutton-background-color-focus-selected: var(--mod-actionbutton-background-color-focus-selected-emphasized, var(--spectrum-accent-background-color-key-focus)); + + --mod-actionbutton-content-color-default-selected: var(--mod-actionbutton-content-color-default-selected-emphasized, var(--spectrum-white)); + --mod-actionbutton-content-color-hover-selected: var(--mod-actionbutton-content-color-hover-selected-emphasized, var(--spectrum-white)); + --mod-actionbutton-content-color-down-selected: var(--mod-actionbutton-content-color-down-selected-emphasized, var(--spectrum-white)); + --mod-actionbutton-content-color-focus-selected: var(--mod-actionbutton-content-color-focus-selected-emphasized, var(--spectrum-white)); } &.is-selected { @@ -167,19 +235,8 @@ } } -.spectrum-ActionButton, -.spectrum-ActionButton--sizeM { - --spectrum-actionbutton-sized-height: var(--spectrum-component-height-100); - --spectrum-actionbutton-sized-icon-size: var(--spectrum-workflow-icon-size-100); - --spectrum-actionbutton-sized-font-size: var(--spectrum-font-size-100); - --spectrum-actionbutton-sized-text-to-visual: var(--spectrum-text-to-visual-100); - --spectrum-actionbutton-sized-edge-to-hold-icon: var(--spectrum-action-button-edge-to-hold-icon-medium); - --spectrum-actionbutton-sized-edge-to-visual: var(--spectrum-component-edge-to-visual-100); - --spectrum-actionbutton-sized-edge-to-text: var(--spectrum-component-edge-to-text-100); - --spectrum-actionbutton-sized-edge-to-visual-only: var(--spectrum-component-edge-to-visual-only-100); -} - .spectrum-ActionButton--sizeXS { + --spectrum-actionbutton-border-radius: var(--mod-actionbutton-border-radius, var(--spectrum-corner-radius-medium-size-extra-small)); --spectrum-actionbutton-sized-height: var(--spectrum-component-height-50); --spectrum-actionbutton-sized-icon-size: var(--spectrum-workflow-icon-size-50); --spectrum-actionbutton-sized-font-size: var(--spectrum-font-size-50); @@ -191,6 +248,7 @@ } .spectrum-ActionButton--sizeS { + --spectrum-actionbutton-border-radius: var(--mod-actionbutton-border-radius, var(--spectrum-corner-radius-medium-size-small)); --spectrum-actionbutton-sized-height: var(--spectrum-component-height-75); --spectrum-actionbutton-sized-icon-size: var(--spectrum-workflow-icon-size-75); --spectrum-actionbutton-sized-font-size: var(--spectrum-font-size-75); @@ -202,6 +260,7 @@ } .spectrum-ActionButton--sizeL { + --spectrum-actionbutton-border-radius: var(--mod-actionbutton-border-radius, var(--spectrum-corner-radius-medium-size-large)); --spectrum-actionbutton-sized-height: var(--spectrum-component-height-200); --spectrum-actionbutton-sized-icon-size: var(--spectrum-workflow-icon-size-200); --spectrum-actionbutton-sized-font-size: var(--spectrum-font-size-200); @@ -213,6 +272,7 @@ } .spectrum-ActionButton--sizeXL { + --spectrum-actionbutton-border-radius: var(--mod-actionbutton-border-radius, var(--spectrum-corner-radius-medium-size-extra-large)); --spectrum-actionbutton-sized-height: var(--spectrum-component-height-300); --spectrum-actionbutton-sized-icon-size: var(--spectrum-workflow-icon-size-300); --spectrum-actionbutton-sized-font-size: var(--spectrum-font-size-300); diff --git a/components/actionbutton/stories/template.js b/components/actionbutton/stories/template.js index 425b7e4115c..9c1fd980055 100644 --- a/components/actionbutton/stories/template.js +++ b/components/actionbutton/stories/template.js @@ -7,9 +7,6 @@ import { when } from "lit/directives/when.js"; import { capitalize } from "lodash-es"; import "../index.css"; -import "../themes/spectrum.css"; -/* Must be imported last */ -import "../themes/express.css"; /** * @todo load order should not influence the icon size but it is; fix this diff --git a/components/actionbutton/themes/express.css b/components/actionbutton/themes/express.css deleted file mode 100644 index a2f9f796101..00000000000 --- a/components/actionbutton/themes/express.css +++ /dev/null @@ -1,71 +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. - */ - -/* @combine .spectrum.spectrum--express */ - -@import "./spectrum.css"; - -@container style(--system: express) { - .spectrum-ActionButton { - --spectrum-actionbutton-background-color-default: var(--spectrum-gray-200); - --spectrum-actionbutton-background-color-hover: var(--spectrum-gray-300); - --spectrum-actionbutton-background-color-down: var(--spectrum-gray-400); - --spectrum-actionbutton-background-color-focus: var(--spectrum-gray-300); - --spectrum-actionbutton-background-color-disabled: var(--spectrum-gray-200); - - --spectrum-actionbutton-border-color-default: transparent; - --spectrum-actionbutton-border-color-hover: transparent; - --spectrum-actionbutton-border-color-down: transparent; - --spectrum-actionbutton-border-color-focus: transparent; - --spectrum-actionbutton-border-color-disabled: transparent; - - &.spectrum-ActionButton--quiet { - --spectrum-actionbutton-background-color-default: transparent; - --spectrum-actionbutton-background-color-hover: var(--spectrum-gray-300); - --spectrum-actionbutton-background-color-down: var(--spectrum-gray-400); - --spectrum-actionbutton-background-color-focus: var(--spectrum-gray-300); - } - - &.spectrum-ActionButton--staticBlack, - &.spectrum-ActionButton--staticWhite { - --spectrum-actionbutton-border-color-default: transparent; - --spectrum-actionbutton-border-color-hover: transparent; - --spectrum-actionbutton-border-color-down: transparent; - --spectrum-actionbutton-border-color-focus: transparent; - } - - &.spectrum-ActionButton--staticBlack { - --spectrum-actionbutton-background-color-disabled: transparent; - - &, - &.spectrum-ActionButton--quiet { - --spectrum-actionbutton-background-color-default: var(--spectrum-transparent-black-200); - --spectrum-actionbutton-background-color-hover: var(--spectrum-transparent-black-300); - --spectrum-actionbutton-background-color-down: var(--spectrum-transparent-black-400); - --spectrum-actionbutton-background-color-focus: var(--spectrum-transparent-black-300); - } - } - - &.spectrum-ActionButton--staticWhite { - --spectrum-actionbutton-background-color-disabled: transparent; - - &, - &.spectrum-ActionButton--quiet { - --spectrum-actionbutton-background-color-default: var(--spectrum-transparent-white-200); - --spectrum-actionbutton-background-color-hover: var(--spectrum-transparent-white-300); - --spectrum-actionbutton-background-color-down: var(--spectrum-transparent-white-400); - --spectrum-actionbutton-background-color-focus: var(--spectrum-transparent-white-300); - } - } - } -} diff --git a/components/actionbutton/themes/spectrum-two.css b/components/actionbutton/themes/spectrum-two.css deleted file mode 100644 index b436e9a77b5..00000000000 --- a/components/actionbutton/themes/spectrum-two.css +++ /dev/null @@ -1,112 +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. - */ - -@container style(--system: spectrum) { - .spectrum-ActionButton { - --spectrum-actionbutton-background-color-default: var(--spectrum-gray-100); - --spectrum-actionbutton-background-color-hover: var(--spectrum-gray-200); - --spectrum-actionbutton-background-color-down: var(--spectrum-gray-200); - --spectrum-actionbutton-background-color-focus: var(--spectrum-gray-200); - --spectrum-actionbutton-background-color-disabled: var(--spectrum-disabled-background-color); - - --spectrum-actionbutton-background-color-selected: var(--spectrum-neutral-background-color-selected-default); - --spectrum-actionbutton-background-color-selected-hover: var(--spectrum-neutral-background-color-selected-hover); - --spectrum-actionbutton-background-color-selected-down: var(--spectrum-neutral-background-color-selected-down); - --spectrum-actionbutton-background-color-selected-focus: var(--spectrum-neutral-background-color-selected-key-focus); - - --spectrum-actionbutton-border-color-default: transparent; - --spectrum-actionbutton-border-color-hover: transparent; - --spectrum-actionbutton-border-color-down: transparent; - --spectrum-actionbutton-border-color-focus: transparent; - --spectrum-actionbutton-border-color-disabled: transparent; - - --spectrum-actionbutton-content-color-selected: var(--spectrum-gray-50); - - &.spectrum-ActionButton--sizeM { - --spectrum-actionbutton-border-radius-default: var(--spectrum-corner-radius-medium-size-medium); - } - - &.spectrum-ActionButton--sizeXS { - --spectrum-actionbutton-border-radius-default: var(--spectrum-corner-radius-medium-size-extra-small); - } - - &.spectrum-ActionButton--sizeS { - --spectrum-actionbutton-border-radius-default: var(--spectrum-corner-radius-medium-size-small); - } - - &.spectrum-ActionButton--sizeL { - --spectrum-actionbutton-border-radius-default: var(--spectrum-corner-radius-medium-size-large); - } - - &.spectrum-ActionButton--sizeXL { - --spectrum-actionbutton-border-radius-default: var(--spectrum-corner-radius-medium-size-extra-large); - } - - &.spectrum-ActionButton--quiet { - --spectrum-actionbutton-background-color-default: transparent; - --spectrum-actionbutton-background-color-hover: var(--spectrum-gray-200); - --spectrum-actionbutton-background-color-down: var(--spectrum-gray-200); - --spectrum-actionbutton-background-color-focus: var(--spectrum-gray-200); - --spectrum-actionbutton-background-color-disabled: transparent; - --spectrum-actionbutton-background-color-selected-disabled: var(--spectrum-disabled-background-color); - } - - &.spectrum-ActionButton--staticBlack { - --spectrum-actionbutton-border-color-default: transparent; - --spectrum-actionbutton-border-color-hover: transparent; - --spectrum-actionbutton-border-color-down: transparent; - --spectrum-actionbutton-border-color-focus: transparent; - --spectrum-actionbutton-border-color-disabled: transparent; - - --spectrum-actionbutton-background-color-disabled: var(--spectrum-disabled-static-black-background-color); - --spectrum-actionbutton-background-color-selected-disabled: var(--spectrum-disabled-static-black-background-color); - - --spectrum-actionbutton-background-color-default: var(--spectrum-transparent-black-100); - --spectrum-actionbutton-background-color-hover: var(--spectrum-transparent-black-200); - --spectrum-actionbutton-background-color-down: var(--spectrum-transparent-black-200); - --spectrum-actionbutton-background-color-focus: var(--spectrum-transparent-black-200); - - &.spectrum-ActionButton--quiet { - --spectrum-actionbutton-background-color-default: transparent; - --spectrum-actionbutton-background-color-hover: var(--spectrum-transparent-black-200); - --spectrum-actionbutton-background-color-down: var(--spectrum-transparent-black-200); - --spectrum-actionbutton-background-color-focus: var(--spectrum-transparent-black-200); - --spectrum-actionbutton-background-color-disabled: transparent; - } - } - - &.spectrum-ActionButton--staticWhite { - --spectrum-actionbutton-border-color-default: transparent; - --spectrum-actionbutton-border-color-hover: transparent; - --spectrum-actionbutton-border-color-down: transparent; - --spectrum-actionbutton-border-color-focus: transparent; - --spectrum-actionbutton-border-color-disabled: transparent; - - --spectrum-actionbutton-background-color-disabled: var(--spectrum-disabled-static-white-background-color); - --spectrum-actionbutton-background-color-selected-disabled: var(--spectrum-disabled-static-white-background-color); - - --spectrum-actionbutton-background-color-default: var(--spectrum-transparent-white-100); - --spectrum-actionbutton-background-color-hover: var(--spectrum-transparent-white-200); - --spectrum-actionbutton-background-color-down: var(--spectrum-transparent-white-200); - --spectrum-actionbutton-background-color-focus: var(--spectrum-transparent-white-200); - - &.spectrum-ActionButton--quiet { - --spectrum-actionbutton-background-color-default: transparent; - --spectrum-actionbutton-background-color-hover: var(--spectrum-transparent-white-200); - --spectrum-actionbutton-background-color-down: var(--spectrum-transparent-white-200); - --spectrum-actionbutton-background-color-focus: var(--spectrum-transparent-white-200); - --spectrum-actionbutton-background-color-disabled: transparent; - } - } - } -} diff --git a/components/actionbutton/themes/spectrum.css b/components/actionbutton/themes/spectrum.css deleted file mode 100644 index 0c07028cf58..00000000000 --- a/components/actionbutton/themes/spectrum.css +++ /dev/null @@ -1,93 +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. - */ - -/* @combine .spectrum.spectrum--legacy */ - -@import "./spectrum-two.css"; - -@container style(--system: legacy) { - .spectrum-ActionButton { - --spectrum-actionbutton-background-color-default: var(--spectrum-gray-75); - --spectrum-actionbutton-background-color-hover: var(--spectrum-gray-200); - --spectrum-actionbutton-background-color-down: var(--spectrum-gray-300); - --spectrum-actionbutton-background-color-focus: var(--spectrum-gray-200); - --spectrum-actionbutton-background-color-disabled: transparent; - --spectrum-actionbutton-background-color-selected-disabled: var(--spectrum-disabled-background-color); - - --spectrum-actionbutton-border-color-default: var(--spectrum-gray-400); - --spectrum-actionbutton-border-color-hover: var(--spectrum-gray-500); - --spectrum-actionbutton-border-color-down: var(--spectrum-gray-600); - --spectrum-actionbutton-border-color-focus: var(--spectrum-gray-500); - --spectrum-actionbutton-border-color-disabled: var(--spectrum-disabled-border-color); - - --spectrum-actionbutton-content-color-selected: var(--spectrum-gray-75); - - &.spectrum-ActionButton--sizeXS, - &.spectrum-ActionButton--sizeS, - &.spectrum-ActionButton--sizeM, - &.spectrum-ActionButton--sizeL, - &.spectrum-ActionButton--sizeXL { - --spectrum-actionbutton-border-radius-default: var(--spectrum-corner-radius-100); - } - - &.spectrum-ActionButton--quiet { - --spectrum-actionbutton-background-color-hover: var(--spectrum-gray-200); - --spectrum-actionbutton-background-color-down: var(--spectrum-gray-300); - --spectrum-actionbutton-background-color-focus: var(--spectrum-gray-200); - } - - &.spectrum-ActionButton--staticBlack { - --spectrum-actionbutton-border-color-default: var(--spectrum-transparent-black-400); - --spectrum-actionbutton-border-color-hover: var(--spectrum-transparent-black-500); - --spectrum-actionbutton-border-color-down: var(--spectrum-transparent-black-600); - --spectrum-actionbutton-border-color-focus: var(--spectrum-transparent-black-500); - --spectrum-actionbutton-border-color-disabled: var(--spectrum-disabled-static-black-border-color); - - --spectrum-actionbutton-background-color-default: transparent; - --spectrum-actionbutton-background-color-hover: var(--spectrum-transparent-black-300); - --spectrum-actionbutton-background-color-down: var(--spectrum-transparent-black-400); - --spectrum-actionbutton-background-color-focus: var(--spectrum-transparent-black-300); - --spectrum-actionbutton-background-color-disabled: transparent; - - &.spectrum-ActionButton--quiet { - --spectrum-actionbutton-background-color-default: transparent; - --spectrum-actionbutton-background-color-hover: var(--spectrum-transparent-black-300); - --spectrum-actionbutton-background-color-down: var(--spectrum-transparent-black-400); - --spectrum-actionbutton-background-color-focus: var(--spectrum-transparent-black-300); - --spectrum-actionbutton-background-color-disabled: transparent; - } - } - - &.spectrum-ActionButton--staticWhite { - --spectrum-actionbutton-border-color-default: var(--spectrum-transparent-white-400); - --spectrum-actionbutton-border-color-hover: var(--spectrum-transparent-white-500); - --spectrum-actionbutton-border-color-down: var(--spectrum-transparent-white-600); - --spectrum-actionbutton-border-color-focus: var(--spectrum-transparent-white-500); - --spectrum-actionbutton-border-color-disabled: var(--spectrum-disabled-static-white-border-color); - - --spectrum-actionbutton-background-color-default: transparent; - --spectrum-actionbutton-background-color-hover: var(--spectrum-transparent-white-300); - --spectrum-actionbutton-background-color-down: var(--spectrum-transparent-white-400); - --spectrum-actionbutton-background-color-focus: var(--spectrum-transparent-white-300); - --spectrum-actionbutton-background-color-disabled: transparent; - - &.spectrum-ActionButton--quiet { - --spectrum-actionbutton-background-color-default: transparent; - --spectrum-actionbutton-background-color-hover: var(--spectrum-transparent-white-300); - --spectrum-actionbutton-background-color-down: var(--spectrum-transparent-white-400); - --spectrum-actionbutton-background-color-focus: var(--spectrum-transparent-white-300); - --spectrum-actionbutton-background-color-disabled: transparent; - } - } - } -} diff --git a/components/actiongroup/dist/metadata.json b/components/actiongroup/dist/metadata.json index c78e7d30965..b6de149009a 100644 --- a/components/actiongroup/dist/metadata.json +++ b/components/actiongroup/dist/metadata.json @@ -20,10 +20,7 @@ ".spectrum-ActionGroup--compact:not(.spectrum-ActionGroup--quiet) .spectrum-ActionGroup-item:hover", ".spectrum-ActionGroup--compact:not(.spectrum-ActionGroup--quiet) .spectrum-ActionGroup-item:last-child", ".spectrum-ActionGroup--justified .spectrum-ActionGroup-item", - ".spectrum-ActionGroup--sizeL", - ".spectrum-ActionGroup--sizeM", ".spectrum-ActionGroup--sizeS", - ".spectrum-ActionGroup--sizeXL", ".spectrum-ActionGroup--sizeXS", ".spectrum-ActionGroup--vertical", ".spectrum-ActionGroup:not(.spectrum-ActionGroup--vertical, .spectrum-ActionGroup--compact) .spectrum-ActionGroup-item" @@ -53,11 +50,6 @@ "--spectrum-spacing-100", "--spectrum-spacing-75" ], - "system-theme": [ - "--system-action-group-gap-size-compact", - "--system-action-group-horizontal-spacing-compact", - "--system-action-group-vertical-spacing-compact" - ], "passthroughs": ["--mod-actionbutton-focus-indicator-border-radius"], "high-contrast": [] } diff --git a/components/actiongroup/index.css b/components/actiongroup/index.css index bbd26cb0f65..0c11bb15f7a 100644 --- a/components/actiongroup/index.css +++ b/components/actiongroup/index.css @@ -11,9 +11,16 @@ * governing permissions and limitations under the License. */ -@import "./themes/spectrum-two.css"; - .spectrum-ActionGroup { + --spectrum-actiongroup-horizontal-spacing-regular: var(--spectrum-spacing-100); + --spectrum-actiongroup-vertical-spacing-regular: var(--spectrum-spacing-100); + + --spectrum-actiongroup-gap-size-compact: 0; + + /* account for button border */ + --spectrum-actiongroup-horizontal-spacing-compact: -1px; + --spectrum-actiongroup-vertical-spacing-compact: -1px; + --spectrum-actiongroup-button-spacing-reset: 0; --spectrum-actiongroup-border-radius-reset: 0; --spectrum-actiongroup-border-radius: var(--spectrum-corner-radius-100); @@ -25,13 +32,6 @@ --spectrum-actiongroup-vertical-spacing-regular: var(--spectrum-spacing-75); } -.spectrum-ActionGroup--sizeM, -.spectrum-ActionGroup--sizeL, -.spectrum-ActionGroup--sizeXL { - --spectrum-actiongroup-horizontal-spacing-regular: var(--spectrum-spacing-100); - --spectrum-actiongroup-vertical-spacing-regular: var(--spectrum-spacing-100); -} - .spectrum-ActionGroup { display: flex; flex-wrap: wrap; diff --git a/components/actiongroup/stories/template.js b/components/actiongroup/stories/template.js index d13cdac64aa..25d8f25f4e0 100644 --- a/components/actiongroup/stories/template.js +++ b/components/actiongroup/stories/template.js @@ -6,9 +6,6 @@ import { styleMap } from "lit/directives/style-map.js"; import { capitalize } from "lodash-es"; import "../index.css"; -import "../themes/spectrum.css"; -/* Must be imported last */ -import "../themes/express.css"; export const Template = ({ rootClass = "spectrum-ActionGroup", diff --git a/components/actiongroup/themes/express.css b/components/actiongroup/themes/express.css deleted file mode 100644 index 3fd8de9cdbb..00000000000 --- a/components/actiongroup/themes/express.css +++ /dev/null @@ -1,26 +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. - */ - -/* @combine .spectrum.spectrum--express */ - -@import "./spectrum.css"; - -@container style(--system: express) { - .spectrum-ActionGroup { - --spectrum-actiongroup-gap-size-compact: var(--spectrum-spacing-50); - - /* account for button border */ - --spectrum-actiongroup-horizontal-spacing-compact: calc(-1px * var(--spectrum-spacing-50)); - --spectrum-actiongroup-vertical-spacing-compact: calc(-1px * var(--spectrum-spacing-50)); - } -} diff --git a/components/actiongroup/themes/spectrum-two.css b/components/actiongroup/themes/spectrum-two.css deleted file mode 100644 index b25c0f945b2..00000000000 --- a/components/actiongroup/themes/spectrum-two.css +++ /dev/null @@ -1,22 +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. - */ - -@container style(--system: spectrum) { - .spectrum-ActionGroup { - --spectrum-actiongroup-gap-size-compact: 0; - - /* account for button border */ - --spectrum-actiongroup-horizontal-spacing-compact: -1px; - --spectrum-actiongroup-vertical-spacing-compact: -1px; - } -} diff --git a/components/actiongroup/themes/spectrum.css b/components/actiongroup/themes/spectrum.css deleted file mode 100644 index 3d81bc564b5..00000000000 --- a/components/actiongroup/themes/spectrum.css +++ /dev/null @@ -1,16 +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. - */ - -/* @combine .spectrum.spectrum--legacy */ - -@import "./spectrum-two.css"; diff --git a/components/alertbanner/dist/metadata.json b/components/alertbanner/dist/metadata.json index 15b6983e631..b9c7b84a4d5 100644 --- a/components/alertbanner/dist/metadata.json +++ b/components/alertbanner/dist/metadata.json @@ -71,7 +71,6 @@ "--spectrum-white", "--spectrum-workflow-icon-size-100" ], - "system-theme": ["--system-alert-banner-neutral-background"], "passthroughs": [ "--mod-button-margin-block", "--mod-button-margin-left", diff --git a/components/alertbanner/index.css b/components/alertbanner/index.css index 2f483970fb8..04701fe55f9 100644 --- a/components/alertbanner/index.css +++ b/components/alertbanner/index.css @@ -11,9 +11,9 @@ * governing permissions and limitations under the License. */ -@import "./themes/spectrum-two.css"; - .spectrum-AlertBanner { + --spectrum-alert-banner-neutral-background: var(--spectrum-neutral-subdued-background-color-default); + --spectrum-alert-banner-min-height: var(--spectrum-alert-banner-minimum-height); --spectrum-alert-banner-max-inline-size: var(--spectrum-alert-banner-width); --spectrum-alert-banner-size: auto; diff --git a/components/alertbanner/stories/template.js b/components/alertbanner/stories/template.js index 3eb719c0612..b564deeed0d 100644 --- a/components/alertbanner/stories/template.js +++ b/components/alertbanner/stories/template.js @@ -10,9 +10,6 @@ import { styleMap } from "lit/directives/style-map.js"; import { when } from "lit/directives/when.js"; import "../index.css"; -import "../themes/spectrum.css"; -/* Must be imported last */ -import "../themes/express.css"; export const Template = ({ rootClass = "spectrum-AlertBanner", diff --git a/components/alertbanner/themes/express.css b/components/alertbanner/themes/express.css deleted file mode 100644 index a86424d5e4b..00000000000 --- a/components/alertbanner/themes/express.css +++ /dev/null @@ -1,22 +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. - */ - -/* @combine .spectrum.spectrum--express */ - -@import "./spectrum.css"; - -@container style(--system: express) { - .spectrum-AlertBanner { - --spectrum-alert-banner-neutral-background: var(--spectrum-neutral-background-color-default); - } -} diff --git a/components/alertbanner/themes/spectrum-two.css b/components/alertbanner/themes/spectrum-two.css deleted file mode 100644 index 3e038dbd7a4..00000000000 --- a/components/alertbanner/themes/spectrum-two.css +++ /dev/null @@ -1,18 +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. - */ - -@container style(--system: spectrum) { - .spectrum-AlertBanner { - --spectrum-alert-banner-neutral-background: var(--spectrum-neutral-subdued-background-color-default); - } -} diff --git a/components/alertbanner/themes/spectrum.css b/components/alertbanner/themes/spectrum.css deleted file mode 100644 index 4dd42f109fe..00000000000 --- a/components/alertbanner/themes/spectrum.css +++ /dev/null @@ -1,22 +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. - */ - -/* @combine .spectrum.spectrum--legacy */ - -@import "./spectrum-two.css"; - -@container style(--system: legacy) { - .spectrum-AlertBanner { - --spectrum-alert-banner-neutral-background: var(--spectrum-neutral-subdued-background-color-default); - } -} diff --git a/components/alertdialog/dist/metadata.json b/components/alertdialog/dist/metadata.json index 03bf62123f2..4e34b0e5fb8 100644 --- a/components/alertdialog/dist/metadata.json +++ b/components/alertdialog/dist/metadata.json @@ -78,7 +78,6 @@ "--spectrum-spacing-300", "--spectrum-workflow-icon-size-100" ], - "system-theme": [], "passthroughs": ["--mod-buttongroup-justify-content", "--mod-icon-color"], "high-contrast": [] } diff --git a/components/asset/dist/metadata.json b/components/asset/dist/metadata.json index 306c123b1b6..6389e295f47 100644 --- a/components/asset/dist/metadata.json +++ b/components/asset/dist/metadata.json @@ -20,12 +20,9 @@ ], "component": [ "--spectrum-asset-file-background", - "--spectrum-asset-file-background-color", "--spectrum-asset-file-outline", "--spectrum-asset-folder-background", - "--spectrum-asset-folder-background-color", - "--spectrum-asset-folder-outline", - "--spectrum-asset-icon-outline-color" + "--spectrum-asset-folder-outline" ], "global": [ "--spectrum-animation-duration-100", @@ -33,11 +30,6 @@ "--spectrum-gray-25", "--spectrum-gray-500" ], - "system-theme": [ - "--system-asset-file-background-color", - "--system-asset-folder-background-color", - "--system-asset-icon-outline-color" - ], "passthroughs": [], "high-contrast": ["--highcontrast-asset-icon-background-color"] } diff --git a/components/asset/index.css b/components/asset/index.css index abf5d42572f..e31f6aea3a7 100644 --- a/components/asset/index.css +++ b/components/asset/index.css @@ -11,13 +11,11 @@ * governing permissions and limitations under the License. */ -@import "./themes/spectrum-two.css"; - .spectrum-Asset { - --spectrum-asset-folder-background: var(--highcontrast-asset-icon-background-color, var(--mod-asset-folder-background-color, var(--spectrum-asset-folder-background-color))); - --spectrum-asset-file-background: var(--highcontrast-asset-icon-background-color, var(--mod-asset-file-background-color, var(--spectrum-asset-file-background-color))); - --spectrum-asset-folder-outline: var(--mod-asset-icon-outline-color, var(--spectrum-asset-icon-outline-color)); - --spectrum-asset-file-outline: var(--mod-asset-icon-outline-color, var(--spectrum-asset-icon-outline-color)); + --spectrum-asset-folder-background: var(--highcontrast-asset-icon-background-color, var(--mod-asset-folder-background-color, var(--spectrum-gray-200))); + --spectrum-asset-file-background: var(--highcontrast-asset-icon-background-color, var(--mod-asset-file-background-color, var(--spectrum-gray-25))); + --spectrum-asset-folder-outline: var(--mod-asset-icon-outline-color, var(--spectrum-gray-500)); + --spectrum-asset-file-outline: var(--mod-asset-icon-outline-color, var(--spectrum-gray-500)); display: flex; align-items: center; diff --git a/components/asset/stories/template.js b/components/asset/stories/template.js index c32f792cd49..795c346c508 100644 --- a/components/asset/stories/template.js +++ b/components/asset/stories/template.js @@ -5,9 +5,6 @@ import { ifDefined } from "lit/directives/if-defined.js"; import { styleMap } from "lit/directives/style-map.js"; import "../index.css"; -import "../themes/spectrum.css"; -/* Must be imported last */ -import "../themes/express.css"; export const Template = ({ rootClass = "spectrum-Asset", diff --git a/components/asset/themes/express.css b/components/asset/themes/express.css deleted file mode 100644 index 9fd550418f2..00000000000 --- a/components/asset/themes/express.css +++ /dev/null @@ -1,16 +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. - */ - -/* @combine .spectrum.spectrum--express */ - -@import "./spectrum.css"; diff --git a/components/asset/themes/spectrum-two.css b/components/asset/themes/spectrum-two.css deleted file mode 100644 index 5eda732011b..00000000000 --- a/components/asset/themes/spectrum-two.css +++ /dev/null @@ -1,20 +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. - */ - -@container style(--system: spectrum) { - .spectrum-Asset { - --spectrum-asset-folder-background-color: var(--spectrum-gray-200); - --spectrum-asset-file-background-color: var(--spectrum-gray-25); - --spectrum-asset-icon-outline-color: var(--spectrum-gray-500); - } -} diff --git a/components/asset/themes/spectrum.css b/components/asset/themes/spectrum.css deleted file mode 100644 index 8b2b12ee379..00000000000 --- a/components/asset/themes/spectrum.css +++ /dev/null @@ -1,24 +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. - */ - -/* @combine .spectrum.spectrum--legacy */ - -@import "./spectrum-two.css"; - -@container style(--system: legacy) { - .spectrum-Asset { - --spectrum-asset-folder-background-color: var(--spectrum-gray-300); - --spectrum-asset-file-background-color: var(--spectrum-gray-50); - --spectrum-asset-icon-outline-color: var(--spectrum-gray-500); - } -} diff --git a/components/assetcard/dist/metadata.json b/components/assetcard/dist/metadata.json index 1c86dc47523..94bf07de0af 100644 --- a/components/assetcard/dist/metadata.json +++ b/components/assetcard/dist/metadata.json @@ -176,12 +176,6 @@ "--spectrum-transparent-black-300", "--spectrum-white" ], - "system-theme": [ - "--system-asset-card-background-color", - "--system-asset-card-overlay-background-color", - "--system-asset-card-selectionindicator-background-color-default", - "--system-asset-card-selectionindicator-box-shadow-color" - ], "passthroughs": [], "high-contrast": [ "--highcontrast-assectcard-border-color-selected-down", diff --git a/components/assetcard/index.css b/components/assetcard/index.css index 26881a3f45f..b776e53414b 100644 --- a/components/assetcard/index.css +++ b/components/assetcard/index.css @@ -11,10 +11,13 @@ * governing permissions and limitations under the License. */ -@import "./themes/spectrum-two.css"; - /* outer container, unstyled */ .spectrum-AssetCard { + --spectrum-assetcard-overlay-background-color: rgba(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-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-asset-animation-duration: var(--spectrum-animation-duration-100); diff --git a/components/assetcard/stories/template.js b/components/assetcard/stories/template.js index 864fcd951b7..1b44be4e568 100644 --- a/components/assetcard/stories/template.js +++ b/components/assetcard/stories/template.js @@ -8,9 +8,6 @@ import { when } from "lit/directives/when.js"; import { camelCase } from "lodash-es"; import "../index.css"; -import "../themes/spectrum.css"; -/* Must be imported last */ -import "../themes/express.css"; export const Template = ({ rootClass = "spectrum-AssetCard", diff --git a/components/assetcard/themes/express.css b/components/assetcard/themes/express.css deleted file mode 100644 index 63115538f15..00000000000 --- a/components/assetcard/themes/express.css +++ /dev/null @@ -1,22 +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. - */ - -/* @combine .spectrum.spectrum--express */ - -@import "./spectrum.css"; - -@container style(--system: express) { - .spectrum-AssetCard { - --spectrum-assetcard-overlay-background-color: rgba(109 115 246 / 20%); - } -} diff --git a/components/assetcard/themes/spectrum-two.css b/components/assetcard/themes/spectrum-two.css deleted file mode 100644 index f38045fb758..00000000000 --- a/components/assetcard/themes/spectrum-two.css +++ /dev/null @@ -1,21 +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. - */ - -@container style(--system: spectrum) { - .spectrum-AssetCard { - --spectrum-assetcard-overlay-background-color: rgba(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-box-shadow-color: var(--spectrum-transparent-black-300); - } -} diff --git a/components/assetcard/themes/spectrum.css b/components/assetcard/themes/spectrum.css deleted file mode 100644 index c3e7ef9e0a8..00000000000 --- a/components/assetcard/themes/spectrum.css +++ /dev/null @@ -1,25 +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. - */ - -/* @combine .spectrum.spectrum--legacy */ - -@import "./spectrum-two.css"; - -@container style(--system: legacy) { - .spectrum-AssetCard { - --spectrum-assetcard-overlay-background-color: rgba(27 127 245 / 10%); - --spectrum-assetcard-background-color: var(--spectrum-gray-200); - --spectrum-assetcard-selectionindicator-background-color-default: rgba(var(--spectrum-gray-100-rgb), 0.9); - --spectrum-assetcard-selectionindicator-box-shadow-color: var(--spectrum-transparent-black-200); - } -} diff --git a/components/assetlist/dist/metadata.json b/components/assetlist/dist/metadata.json index 011c28ee314..0da89f4ae57 100644 --- a/components/assetlist/dist/metadata.json +++ b/components/assetlist/dist/metadata.json @@ -24,8 +24,7 @@ ".spectrum-AssetList-itemChildIndicator", ".spectrum-AssetList-itemLabel", ".spectrum-AssetList-itemSelector", - ".spectrum-AssetList:dir(rtl)", - "[dir=\"rtl\"] .spectrum-AssetList" + ".spectrum-AssetList:dir(rtl)" ], "modifiers": [ "--mod-assetlist-border-color-key-focus", @@ -85,10 +84,6 @@ "--spectrum-spacing-600", "--spectrum-spacing-75" ], - "system-theme": [ - "--system-asset-list-item-background-color-down", - "--system-asset-list-item-background-color-hover" - ], "passthroughs": [], "high-contrast": [ "--highcontrast-assetlist-border-color-key-focus", diff --git a/components/assetlist/index.css b/components/assetlist/index.css index 742070edbd4..28801db0d89 100644 --- a/components/assetlist/index.css +++ b/components/assetlist/index.css @@ -11,9 +11,10 @@ * governing permissions and limitations under the License. */ -@import "./themes/spectrum-two.css"; - .spectrum-AssetList { + --spectrum-assetlist-item-background-color-down: var(--spectrum-gray-200); + --spectrum-assetlist-item-background-color-hover: var(--spectrum-gray-100); + --spectrum-assetlist-width: 272px; --spectrum-assetlist-child-indicator-animation: var(--spectrum-animation-duration-100); diff --git a/components/assetlist/stories/template.js b/components/assetlist/stories/template.js index 96d8f75a80c..f5c6d9731af 100644 --- a/components/assetlist/stories/template.js +++ b/components/assetlist/stories/template.js @@ -7,9 +7,6 @@ import { ifDefined } from "lit/directives/if-defined.js"; import { when } from "lit/directives/when.js"; import "../index.css"; -import "../themes/spectrum.css"; -/* Must be imported last */ -import "../themes/express.css"; export const AssetListItem = ({ rootClass = "spectrum-AssetList-item", @@ -45,10 +42,10 @@ export const AssetListItem = ({ customClasses: [`${rootClass}Selector`], }, context) )} - ${when(image, () => + ${when(image, () => html`asset image thumbnail` )} - ${when(iconName, () => + ${when(iconName, () => Icon({ iconName, setName: iconSet, diff --git a/components/assetlist/themes/express.css b/components/assetlist/themes/express.css deleted file mode 100644 index 9fd550418f2..00000000000 --- a/components/assetlist/themes/express.css +++ /dev/null @@ -1,16 +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. - */ - -/* @combine .spectrum.spectrum--express */ - -@import "./spectrum.css"; diff --git a/components/assetlist/themes/spectrum-two.css b/components/assetlist/themes/spectrum-two.css deleted file mode 100644 index 0624623caf5..00000000000 --- a/components/assetlist/themes/spectrum-two.css +++ /dev/null @@ -1,19 +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. - */ - -@container style(--system: spectrum) { - .spectrum-AssetList { - --spectrum-assetlist-item-background-color-down: var(--spectrum-gray-200); - --spectrum-assetlist-item-background-color-hover: var(--spectrum-gray-100); - } -} diff --git a/components/assetlist/themes/spectrum.css b/components/assetlist/themes/spectrum.css deleted file mode 100644 index 30f67757c2e..00000000000 --- a/components/assetlist/themes/spectrum.css +++ /dev/null @@ -1,23 +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. - */ - -/* @combine .spectrum.spectrum--legacy */ - -@import "./spectrum-two.css"; - -@container style(--system: legacy) { - .spectrum-AssetList { - --spectrum-assetlist-item-background-color-down: var(--spectrum-gray-300); - --spectrum-assetlist-item-background-color-hover: var(--spectrum-gray-200); - } -} diff --git a/components/avatar/dist/metadata.json b/components/avatar/dist/metadata.json index 47df733191c..93b1c6f25e5 100644 --- a/components/avatar/dist/metadata.json +++ b/components/avatar/dist/metadata.json @@ -52,7 +52,6 @@ "--spectrum-focus-indicator-gap", "--spectrum-focus-indicator-thickness" ], - "system-theme": [], "passthroughs": [], "high-contrast": ["--highcontrast-avatar-focus-indicator-color"] } diff --git a/components/badge/dist/metadata.json b/components/badge/dist/metadata.json index c8be859d830..050f08d41ef 100644 --- a/components/badge/dist/metadata.json +++ b/components/badge/dist/metadata.json @@ -175,7 +175,6 @@ "--spectrum-workflow-icon-size-75", "--spectrum-yellow-background-color-default" ], - "system-theme": [], "passthroughs": [], "high-contrast": ["--highcontrast-badge-border-color"] } diff --git a/components/badge/index.css b/components/badge/index.css index bf4e458aca8..8cbf37e63e1 100644 --- a/components/badge/index.css +++ b/components/badge/index.css @@ -12,20 +12,20 @@ */ .spectrum-Badge { - /* badge styling for all t-shirt sizes and all themes */ + /* badge styling for all t-shirt sizes */ --spectrum-badge-corner-radius: var(--spectrum-corner-radius-100); - /* label text styles for all t-shirt sizes and all themes */ + /* label text styles for all t-shirt sizes */ --spectrum-badge-line-height: var(--spectrum-line-height-100); --spectrum-badge-line-height-cjk: var(--spectrum-cjk-line-height-100); - /* text and icon color default white for all t-shirt sizes and all themes */ + /* text and icon color default white for all t-shirt sizes */ --spectrum-badge-label-icon-color: var(--spectrum-white); - /* background color default for all t-shirt sizes and all themes */ + /* background color default for all t-shirt sizes */ --spectrum-badge-background-color-default: var(--spectrum-neutral-subdued-background-color-default); - /* semantic background colors for all t-shirt sizes and all themes */ + /* semantic background colors for all t-shirt sizes */ --spectrum-badge-background-color-accent: var(--spectrum-accent-background-color-default); --spectrum-badge-background-color-informative: var(--spectrum-informative-background-color-default); --spectrum-badge-background-color-negative: var(--spectrum-negative-background-color-default); diff --git a/components/breadcrumb/dist/metadata.json b/components/breadcrumb/dist/metadata.json index 561253d9efa..8a3e1e5d55c 100644 --- a/components/breadcrumb/dist/metadata.json +++ b/components/breadcrumb/dist/metadata.json @@ -34,8 +34,7 @@ ".spectrum-Breadcrumbs-itemLink[tabindex=\"0\"]:focus-visible", ".spectrum-Breadcrumbs-itemLink[tabindex=\"0\"]:hover", ".spectrum-Breadcrumbs-itemSeparator", - ".spectrum-Breadcrumbs-itemSeparator:dir(rtl)", - "[dir=\"rtl\"] .spectrum-Breadcrumbs-itemSeparator" + ".spectrum-Breadcrumbs-itemSeparator:dir(rtl)" ], "modifiers": [ "--mod-breadcrumbs-action-button-color", @@ -190,7 +189,6 @@ "--spectrum-text-underline-gap", "--spectrum-text-underline-thickness" ], - "system-theme": [], "passthroughs": [], "high-contrast": [ "--highcontrast-breadcrumbs-action-button-color", diff --git a/components/button/dist/metadata.json b/components/button/dist/metadata.json index be9fdd8fe84..24f17dfea90 100644 --- a/components/button/dist/metadata.json +++ b/components/button/dist/metadata.json @@ -62,7 +62,6 @@ "a.spectrum-Button" ], "modifiers": [ - "--mod-animation-duration-100", "--mod-bold-font-weight", "--mod-button-animation-duration", "--mod-button-background-color-default", @@ -108,8 +107,6 @@ "--mod-button-top-to-icon", "--mod-button-top-to-text", "--mod-focus-indicator-gap", - "--mod-line-height-100", - "--mod-sans-font-family-stack", "--mod-static-black-focus-indicator-color" ], "component": [ @@ -284,110 +281,6 @@ "--spectrum-workflow-icon-size-300", "--spectrum-workflow-icon-size-75" ], - "system-theme": [ - "--system-button-background-color-default", - "--system-button-background-color-disabled", - "--system-button-background-color-down", - "--system-button-background-color-focus", - "--system-button-background-color-hover", - "--system-button-border-color-default", - "--system-button-border-color-disabled", - "--system-button-border-color-down", - "--system-button-border-color-focus", - "--system-button-border-color-hover", - "--system-button-primary-content-color-default", - "--system-button-primary-content-color-down", - "--system-button-primary-content-color-focus", - "--system-button-primary-content-color-hover", - "--system-button-primary-outline-background-color-down", - "--system-button-primary-outline-background-color-focus", - "--system-button-primary-outline-background-color-hover", - "--system-button-secondary-background-color-default", - "--system-button-secondary-background-color-down", - "--system-button-secondary-background-color-focus", - "--system-button-secondary-background-color-hover", - "--system-button-secondary-outline-background-color-down", - "--system-button-secondary-outline-background-color-focus", - "--system-button-secondary-outline-background-color-hover", - "--system-button-secondary-outline-border-color-default", - "--system-button-secondary-outline-border-color-down", - "--system-button-selected-background-color-default", - "--system-button-selected-background-color-down", - "--system-button-selected-background-color-focus", - "--system-button-selected-background-color-hover", - "--system-button-static-black-background-color-default", - "--system-button-static-black-background-color-down", - "--system-button-static-black-background-color-focus", - "--system-button-static-black-background-color-hover", - "--system-button-static-black-content-color-default", - "--system-button-static-black-content-color-down", - "--system-button-static-black-content-color-focus", - "--system-button-static-black-content-color-hover", - "--system-button-static-black-outline-background-color-default", - "--system-button-static-black-outline-background-color-down", - "--system-button-static-black-outline-background-color-focus", - "--system-button-static-black-outline-background-color-hover", - "--system-button-static-black-outline-border-color-default", - "--system-button-static-black-outline-border-color-down", - "--system-button-static-black-outline-border-color-focus", - "--system-button-static-black-outline-border-color-hover", - "--system-button-static-black-outline-content-color-default", - "--system-button-static-black-outline-content-color-down", - "--system-button-static-black-outline-content-color-focus", - "--system-button-static-black-outline-content-color-hover", - "--system-button-static-black-secondary-background-color-default", - "--system-button-static-black-secondary-background-color-down", - "--system-button-static-black-secondary-background-color-focus", - "--system-button-static-black-secondary-background-color-hover", - "--system-button-static-black-secondary-content-color-default", - "--system-button-static-black-secondary-content-color-down", - "--system-button-static-black-secondary-content-color-focus", - "--system-button-static-black-secondary-content-color-hover", - "--system-button-static-black-secondary-outline-background-color-default", - "--system-button-static-black-secondary-outline-background-color-down", - "--system-button-static-black-secondary-outline-background-color-focus", - "--system-button-static-black-secondary-outline-background-color-hover", - "--system-button-static-black-secondary-outline-border-color-default", - "--system-button-static-black-secondary-outline-border-color-down", - "--system-button-static-black-secondary-outline-border-color-focus", - "--system-button-static-black-secondary-outline-border-color-hover", - "--system-button-static-white-background-color-default", - "--system-button-static-white-background-color-down", - "--system-button-static-white-background-color-focus", - "--system-button-static-white-background-color-hover", - "--system-button-static-white-content-color-default", - "--system-button-static-white-content-color-down", - "--system-button-static-white-content-color-focus", - "--system-button-static-white-content-color-hover", - "--system-button-static-white-outline-background-color-default", - "--system-button-static-white-outline-background-color-down", - "--system-button-static-white-outline-background-color-focus", - "--system-button-static-white-outline-background-color-hover", - "--system-button-static-white-outline-border-color-default", - "--system-button-static-white-outline-border-color-down", - "--system-button-static-white-outline-border-color-focus", - "--system-button-static-white-outline-border-color-hover", - "--system-button-static-white-outline-content-color-default", - "--system-button-static-white-outline-content-color-down", - "--system-button-static-white-outline-content-color-focus", - "--system-button-static-white-outline-content-color-hover", - "--system-button-static-white-secondary-background-color-default", - "--system-button-static-white-secondary-background-color-down", - "--system-button-static-white-secondary-background-color-focus", - "--system-button-static-white-secondary-background-color-hover", - "--system-button-static-white-secondary-content-color-default", - "--system-button-static-white-secondary-content-color-down", - "--system-button-static-white-secondary-content-color-focus", - "--system-button-static-white-secondary-content-color-hover", - "--system-button-static-white-secondary-outline-background-color-default", - "--system-button-static-white-secondary-outline-background-color-down", - "--system-button-static-white-secondary-outline-background-color-focus", - "--system-button-static-white-secondary-outline-background-color-hover", - "--system-button-static-white-secondary-outline-border-color-default", - "--system-button-static-white-secondary-outline-border-color-down", - "--system-button-static-white-secondary-outline-border-color-focus", - "--system-button-static-white-secondary-outline-border-color-hover" - ], "passthroughs": [ "--mod-progress-circle-position", "--mod-progress-circle-thickness", diff --git a/components/button/index.css b/components/button/index.css index cbddb4e2ec1..8720612f9cb 100644 --- a/components/button/index.css +++ b/components/button/index.css @@ -12,7 +12,6 @@ */ @import "@spectrum-css/commons/basebutton.css"; -@import "./themes/spectrum-two.css"; .spectrum-Button { --spectrum-button-sized-height: var(--spectrum-component-height-100); @@ -78,6 +77,163 @@ --spectrum-button-content-color-focus: var(--spectrum-neutral-content-color-key-focus); --spectrum-button-content-color-disabled: var(--spectrum-disabled-content-color); + --spectrum-button-background-color-default: var(--spectrum-gray-50); + --spectrum-button-background-color-hover: var(--spectrum-gray-100); + --spectrum-button-background-color-down: var(--spectrum-gray-200); + --spectrum-button-background-color-focus: var(--spectrum-gray-100); + + --spectrum-button-border-color-default: var(--spectrum-gray-400); + --spectrum-button-border-color-hover: var(--spectrum-gray-500); + --spectrum-button-border-color-down: var(--spectrum-gray-600); + --spectrum-button-border-color-focus: var(--spectrum-gray-500); + + --spectrum-button-background-color-disabled: transparent; + --spectrum-button-border-color-disabled: var(--spectrum-disabled-border-color); + + &.is-selected { + --spectrum-button-background-color-default: var(--spectrum-neutral-subdued-background-color-default); + --spectrum-button-background-color-hover: var(--spectrum-neutral-subdued-background-color-hover); + --spectrum-button-background-color-down: var(--spectrum-neutral-subdued-background-color-down); + --spectrum-button-background-color-focus: var(--spectrum-neutral-subdued-background-color-key-focus); + } + + &.spectrum-Button--primary { + --spectrum-button-content-color-default: var(--spectrum-gray-25); + --spectrum-button-content-color-hover: var(--spectrum-gray-25); + --spectrum-button-content-color-down: var(--spectrum-gray-25); + --spectrum-button-content-color-focus: var(--spectrum-gray-25); + + &.spectrum-Button--outline { + --spectrum-button-background-color-hover: var(--spectrum-gray-100); + --spectrum-button-background-color-down: var(--spectrum-gray-100); + --spectrum-button-background-color-focus: var(--spectrum-gray-100); + } + } + + &.spectrum-Button--secondary { + --spectrum-button-background-color-default: var(--spectrum-gray-100); + --spectrum-button-background-color-hover: var(--spectrum-gray-200); + --spectrum-button-background-color-down: var(--spectrum-gray-200); + --spectrum-button-background-color-focus: var(--spectrum-gray-200); + + &.spectrum-Button--outline { + --spectrum-button-background-color-hover: var(--spectrum-gray-100); + --spectrum-button-background-color-down: var(--spectrum-gray-100); + --spectrum-button-background-color-focus: var(--spectrum-gray-100); + + --spectrum-button-border-color-default: var(--spectrum-gray-300); + --spectrum-button-border-color-down: var(--spectrum-gray-400); + } + } + + /* static white: double the selector, double the fun (specificity...) */ + &.spectrum-Button--staticWhite { + --spectrum-button-background-color-default: var(--spectrum-transparent-white-800); + --spectrum-button-background-color-hover: var(--spectrum-transparent-white-900); + --spectrum-button-background-color-down: var(--spectrum-transparent-white-900); + --spectrum-button-background-color-focus: var(--spectrum-transparent-white-900); + + --spectrum-button-content-color-default: var(--spectrum-black); + --spectrum-button-content-color-hover: var(--spectrum-black); + --spectrum-button-content-color-down: var(--spectrum-black); + --spectrum-button-content-color-focus: var(--spectrum-black); + + &.spectrum-Button--outline { + --spectrum-button-background-color-default: var(--spectrum-transparent-white-25); + --spectrum-button-background-color-hover: var(--spectrum-transparent-white-100); + --spectrum-button-background-color-down: var(--spectrum-transparent-white-100); + --spectrum-button-background-color-focus: var(--spectrum-transparent-white-100); + + --spectrum-button-content-color-default: var(--spectrum-transparent-white-800); + --spectrum-button-content-color-hover: var(--spectrum-transparent-white-900); + --spectrum-button-content-color-down: var(--spectrum-transparent-white-900); + --spectrum-button-content-color-focus: var(--spectrum-transparent-white-900); + + --spectrum-button-border-color-default: var(--spectrum-transparent-white-800); + --spectrum-button-border-color-hover: var(--spectrum-transparent-white-900); + --spectrum-button-border-color-down: var(--spectrum-transparent-white-900); + --spectrum-button-border-color-focus: var(--spectrum-transparent-white-900); + } + + &.spectrum-Button--secondary { + --spectrum-button-background-color-default: var(--spectrum-transparent-white-100); + --spectrum-button-background-color-hover: var(--spectrum-transparent-white-200); + --spectrum-button-background-color-down: var(--spectrum-transparent-white-200); + --spectrum-button-background-color-focus: var(--spectrum-transparent-white-200); + + --spectrum-button-content-color-default: var(--spectrum-transparent-white-800); + --spectrum-button-content-color-hover: var(--spectrum-transparent-white-900); + --spectrum-button-content-color-down: var(--spectrum-transparent-white-900); + --spectrum-button-content-color-focus: var(--spectrum-transparent-white-900); + + &.spectrum-Button--outline { + --spectrum-button-border-color-default: var(--spectrum-transparent-white-300); + --spectrum-button-border-color-hover: var(--spectrum-transparent-white-400); + --spectrum-button-border-color-down: var(--spectrum-transparent-white-400); + --spectrum-button-border-color-focus: var(--spectrum-transparent-white-400); + + --spectrum-button-background-color-default: var(--spectrum-transparent-white-25); + --spectrum-button-background-color-hover: var(--spectrum-transparent-white-100); + --spectrum-button-background-color-down: var(--spectrum-transparent-white-100); + --spectrum-button-background-color-focus: var(--spectrum-transparent-white-100); + } + } + } + + /* static black */ + &.spectrum-Button--staticBlack { + --spectrum-button-background-color-default: var(--spectrum-transparent-black-800); + --spectrum-button-background-color-hover: var(--spectrum-transparent-black-900); + --spectrum-button-background-color-down: var(--spectrum-transparent-black-900); + --spectrum-button-background-color-focus: var(--spectrum-transparent-black-900); + + --spectrum-button-content-color-default: var(--spectrum-white); + --spectrum-button-content-color-hover: var(--spectrum-white); + --spectrum-button-content-color-down: var(--spectrum-white); + --spectrum-button-content-color-focus: var(--spectrum-white); + + &.spectrum-Button--outline { + --spectrum-button-background-color-default: var(--spectrum-transparent-black-25); + --spectrum-button-background-color-hover: var(--spectrum-transparent-black-100); + --spectrum-button-background-color-down: var(--spectrum-transparent-black-100); + --spectrum-button-background-color-focus: var(--spectrum-transparent-black-100); + + --spectrum-button-content-color-default: var(--spectrum-transparent-black-800); + --spectrum-button-content-color-hover: var(--spectrum-transparent-black-900); + --spectrum-button-content-color-down: var(--spectrum-transparent-black-900); + --spectrum-button-content-color-focus: var(--spectrum-transparent-black-900); + + --spectrum-button-border-color-default: var(--spectrum-transparent-black-800); + --spectrum-button-border-color-hover: var(--spectrum-transparent-black-900); + --spectrum-button-border-color-down: var(--spectrum-transparent-black-900); + --spectrum-button-border-color-focus: var(--spectrum-transparent-black-900); + } + + &.spectrum-Button--secondary { + --spectrum-button-background-color-default: var(--spectrum-transparent-black-100); + --spectrum-button-background-color-hover: var(--spectrum-transparent-black-200); + --spectrum-button-background-color-down: var(--spectrum-transparent-black-200); + --spectrum-button-background-color-focus: var(--spectrum-transparent-black-200); + + --spectrum-button-content-color-default: var(--spectrum-transparent-black-800); + --spectrum-button-content-color-hover: var(--spectrum-transparent-black-900); + --spectrum-button-content-color-down: var(--spectrum-transparent-black-900); + --spectrum-button-content-color-focus: var(--spectrum-transparent-black-900); + + &.spectrum-Button--outline { + --spectrum-button-border-color-default: var(--spectrum-transparent-black-300); + --spectrum-button-border-color-hover: var(--spectrum-transparent-black-400); + --spectrum-button-border-color-down: var(--spectrum-transparent-black-400); + --spectrum-button-border-color-focus: var(--spectrum-transparent-black-400); + + --spectrum-button-background-color-default: var(--spectrum-transparent-black-25); + --spectrum-button-background-color-hover: var(--spectrum-transparent-black-100); + --spectrum-button-background-color-down: var(--spectrum-transparent-black-100); + --spectrum-button-background-color-focus: var(--spectrum-transparent-black-100); + } + } + } + &.is-selected { --spectrum-button-border-color-default: transparent; --spectrum-button-border-color-hover: transparent; diff --git a/components/button/stories/template.js b/components/button/stories/template.js index 16e259bd86f..cecada6f7a9 100644 --- a/components/button/stories/template.js +++ b/components/button/stories/template.js @@ -9,9 +9,6 @@ import { when } from "lit/directives/when.js"; import { capitalize } from "lodash-es"; import "../index.css"; -import "../themes/spectrum.css"; -/* Must be imported last */ -import "../themes/express.css"; export const Template = ({ rootClass = "spectrum-Button", diff --git a/components/button/themes/express.css b/components/button/themes/express.css deleted file mode 100644 index 1b4b5618ed8..00000000000 --- a/components/button/themes/express.css +++ /dev/null @@ -1,37 +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. - */ - -/* @combine .spectrum.spectrum--express */ - -@import "./spectrum.css"; - -@container style(--system: express) { - .spectrum-Button { - --spectrum-button-background-color-default: var(--spectrum-gray-200); - --spectrum-button-background-color-hover: var(--spectrum-gray-300); - --spectrum-button-background-color-down: var(--spectrum-gray-400); - --spectrum-button-background-color-focus: var(--spectrum-gray-300); - - --spectrum-button-border-color-default: transparent; - --spectrum-button-border-color-hover: transparent; - --spectrum-button-border-color-down: transparent; - --spectrum-button-border-color-focus: transparent; - - &.is-selected { - --spectrum-button-background-color-default: var(--spectrum-neutral-background-color-default); - --spectrum-button-background-color-hover: var(--spectrum-neutral-background-color-hover); - --spectrum-button-background-color-down: var(--spectrum-neutral-background-color-down); - --spectrum-button-background-color-focus: var(--spectrum-neutral-background-color-key-focus); - } - } -} diff --git a/components/button/themes/spectrum-two.css b/components/button/themes/spectrum-two.css deleted file mode 100644 index 1275f3fd45b..00000000000 --- a/components/button/themes/spectrum-two.css +++ /dev/null @@ -1,173 +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. - */ - -@container style(--system: spectrum) { - .spectrum-Button { - --spectrum-button-background-color-default: var(--spectrum-gray-50); - --spectrum-button-background-color-hover: var(--spectrum-gray-100); - --spectrum-button-background-color-down: var(--spectrum-gray-200); - --spectrum-button-background-color-focus: var(--spectrum-gray-100); - - --spectrum-button-border-color-default: var(--spectrum-gray-400); - --spectrum-button-border-color-hover: var(--spectrum-gray-500); - --spectrum-button-border-color-down: var(--spectrum-gray-600); - --spectrum-button-border-color-focus: var(--spectrum-gray-500); - - --spectrum-button-background-color-disabled: transparent; - --spectrum-button-border-color-disabled: var(--spectrum-disabled-border-color); - - &.is-selected { - --spectrum-button-background-color-default: var(--spectrum-neutral-subdued-background-color-default); - --spectrum-button-background-color-hover: var(--spectrum-neutral-subdued-background-color-hover); - --spectrum-button-background-color-down: var(--spectrum-neutral-subdued-background-color-down); - --spectrum-button-background-color-focus: var(--spectrum-neutral-subdued-background-color-key-focus); - } - - &.spectrum-Button--primary { - --spectrum-button-content-color-default: var(--spectrum-gray-25); - --spectrum-button-content-color-hover: var(--spectrum-gray-25); - --spectrum-button-content-color-down: var(--spectrum-gray-25); - --spectrum-button-content-color-focus: var(--spectrum-gray-25); - - &.spectrum-Button--outline { - --spectrum-button-background-color-hover: var(--spectrum-gray-100); - --spectrum-button-background-color-down: var(--spectrum-gray-100); - --spectrum-button-background-color-focus: var(--spectrum-gray-100); - } - } - - &.spectrum-Button--secondary { - --spectrum-button-background-color-default: var(--spectrum-gray-100); - --spectrum-button-background-color-hover: var(--spectrum-gray-200); - --spectrum-button-background-color-down: var(--spectrum-gray-200); - --spectrum-button-background-color-focus: var(--spectrum-gray-200); - - &.spectrum-Button--outline { - --spectrum-button-background-color-hover: var(--spectrum-gray-100); - --spectrum-button-background-color-down: var(--spectrum-gray-100); - --spectrum-button-background-color-focus: var(--spectrum-gray-100); - - --spectrum-button-border-color-default: var(--spectrum-gray-300); - --spectrum-button-border-color-down: var(--spectrum-gray-400); - } - } - - /* static white: double the selector, double the fun (specificity...) */ - &.spectrum-Button--staticWhite { - --spectrum-button-background-color-default: var(--spectrum-transparent-white-800); - --spectrum-button-background-color-hover: var(--spectrum-transparent-white-900); - --spectrum-button-background-color-down: var(--spectrum-transparent-white-900); - --spectrum-button-background-color-focus: var(--spectrum-transparent-white-900); - - --spectrum-button-content-color-default: var(--spectrum-black); - --spectrum-button-content-color-hover: var(--spectrum-black); - --spectrum-button-content-color-down: var(--spectrum-black); - --spectrum-button-content-color-focus: var(--spectrum-black); - - &.spectrum-Button--outline { - --spectrum-button-background-color-default: var(--spectrum-transparent-white-25); - --spectrum-button-background-color-hover: var(--spectrum-transparent-white-100); - --spectrum-button-background-color-down: var(--spectrum-transparent-white-100); - --spectrum-button-background-color-focus: var(--spectrum-transparent-white-100); - - --spectrum-button-content-color-default: var(--spectrum-transparent-white-800); - --spectrum-button-content-color-hover: var(--spectrum-transparent-white-900); - --spectrum-button-content-color-down: var(--spectrum-transparent-white-900); - --spectrum-button-content-color-focus: var(--spectrum-transparent-white-900); - - --spectrum-button-border-color-default: var(--spectrum-transparent-white-800); - --spectrum-button-border-color-hover: var(--spectrum-transparent-white-900); - --spectrum-button-border-color-down: var(--spectrum-transparent-white-900); - --spectrum-button-border-color-focus: var(--spectrum-transparent-white-900); - } - - &.spectrum-Button--secondary { - --spectrum-button-background-color-default: var(--spectrum-transparent-white-100); - --spectrum-button-background-color-hover: var(--spectrum-transparent-white-200); - --spectrum-button-background-color-down: var(--spectrum-transparent-white-200); - --spectrum-button-background-color-focus: var(--spectrum-transparent-white-200); - - --spectrum-button-content-color-default: var(--spectrum-transparent-white-800); - --spectrum-button-content-color-hover: var(--spectrum-transparent-white-900); - --spectrum-button-content-color-down: var(--spectrum-transparent-white-900); - --spectrum-button-content-color-focus: var(--spectrum-transparent-white-900); - - &.spectrum-Button--outline { - --spectrum-button-border-color-default: var(--spectrum-transparent-white-300); - --spectrum-button-border-color-hover: var(--spectrum-transparent-white-400); - --spectrum-button-border-color-down: var(--spectrum-transparent-white-400); - --spectrum-button-border-color-focus: var(--spectrum-transparent-white-400); - - --spectrum-button-background-color-default: var(--spectrum-transparent-white-25); - --spectrum-button-background-color-hover: var(--spectrum-transparent-white-100); - --spectrum-button-background-color-down: var(--spectrum-transparent-white-100); - --spectrum-button-background-color-focus: var(--spectrum-transparent-white-100); - } - } - } - - /* static black */ - &.spectrum-Button--staticBlack { - --spectrum-button-background-color-default: var(--spectrum-transparent-black-800); - --spectrum-button-background-color-hover: var(--spectrum-transparent-black-900); - --spectrum-button-background-color-down: var(--spectrum-transparent-black-900); - --spectrum-button-background-color-focus: var(--spectrum-transparent-black-900); - - --spectrum-button-content-color-default: var(--spectrum-white); - --spectrum-button-content-color-hover: var(--spectrum-white); - --spectrum-button-content-color-down: var(--spectrum-white); - --spectrum-button-content-color-focus: var(--spectrum-white); - - &.spectrum-Button--outline { - --spectrum-button-background-color-default: var(--spectrum-transparent-black-25); - --spectrum-button-background-color-hover: var(--spectrum-transparent-black-100); - --spectrum-button-background-color-down: var(--spectrum-transparent-black-100); - --spectrum-button-background-color-focus: var(--spectrum-transparent-black-100); - - --spectrum-button-content-color-default: var(--spectrum-transparent-black-800); - --spectrum-button-content-color-hover: var(--spectrum-transparent-black-900); - --spectrum-button-content-color-down: var(--spectrum-transparent-black-900); - --spectrum-button-content-color-focus: var(--spectrum-transparent-black-900); - - --spectrum-button-border-color-default: var(--spectrum-transparent-black-800); - --spectrum-button-border-color-hover: var(--spectrum-transparent-black-900); - --spectrum-button-border-color-down: var(--spectrum-transparent-black-900); - --spectrum-button-border-color-focus: var(--spectrum-transparent-black-900); - } - - &.spectrum-Button--secondary { - --spectrum-button-background-color-default: var(--spectrum-transparent-black-100); - --spectrum-button-background-color-hover: var(--spectrum-transparent-black-200); - --spectrum-button-background-color-down: var(--spectrum-transparent-black-200); - --spectrum-button-background-color-focus: var(--spectrum-transparent-black-200); - - --spectrum-button-content-color-default: var(--spectrum-transparent-black-800); - --spectrum-button-content-color-hover: var(--spectrum-transparent-black-900); - --spectrum-button-content-color-down: var(--spectrum-transparent-black-900); - --spectrum-button-content-color-focus: var(--spectrum-transparent-black-900); - - &.spectrum-Button--outline { - --spectrum-button-border-color-default: var(--spectrum-transparent-black-300); - --spectrum-button-border-color-hover: var(--spectrum-transparent-black-400); - --spectrum-button-border-color-down: var(--spectrum-transparent-black-400); - --spectrum-button-border-color-focus: var(--spectrum-transparent-black-400); - - --spectrum-button-background-color-default: var(--spectrum-transparent-black-25); - --spectrum-button-background-color-hover: var(--spectrum-transparent-black-100); - --spectrum-button-background-color-down: var(--spectrum-transparent-black-100); - --spectrum-button-background-color-focus: var(--spectrum-transparent-black-100); - } - } - } - } -} diff --git a/components/button/themes/spectrum.css b/components/button/themes/spectrum.css deleted file mode 100644 index 9f9dc03cd92..00000000000 --- a/components/button/themes/spectrum.css +++ /dev/null @@ -1,148 +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. - */ - -/* @combine .spectrum.spectrum--legacy */ - -@import "./spectrum-two.css"; - -@container style(--system: legacy) { - .spectrum-Button { - --spectrum-button-background-color-default: var(--spectrum-gray-75); - --spectrum-button-background-color-hover: var(--spectrum-gray-200); - --spectrum-button-background-color-down: var(--spectrum-gray-300); - --spectrum-button-background-color-focus: var(--spectrum-gray-200); - - &.spectrum-Button--primary { - --spectrum-button-content-color-default: var(--spectrum-white); - --spectrum-button-content-color-hover: var(--spectrum-white); - --spectrum-button-content-color-down: var(--spectrum-white); - --spectrum-button-content-color-focus: var(--spectrum-white); - - &.spectrum-Button--outline { - --spectrum-button-background-color-hover: var(--spectrum-gray-300); - --spectrum-button-background-color-down: var(--spectrum-gray-400); - --spectrum-button-background-color-focus: var(--spectrum-gray-300); - } - } - - &.spectrum-Button--secondary { - --spectrum-button-background-color-default: var(--spectrum-gray-200); - --spectrum-button-background-color-hover: var(--spectrum-gray-300); - --spectrum-button-background-color-down: var(--spectrum-gray-400); - --spectrum-button-background-color-focus: var(--spectrum-gray-300); - - &.spectrum-Button--outline { - --spectrum-button-background-color-hover: var(--spectrum-gray-300); - --spectrum-button-background-color-down: var(--spectrum-gray-400); - --spectrum-button-background-color-focus: var(--spectrum-gray-300); - - --spectrum-button-border-color-default: var(--spectrum-gray-300); - --spectrum-button-border-color-down: var(--spectrum-gray-500); - } - } - - &.spectrum-Button--staticWhite { - --spectrum-button-background-color-default: var(--spectrum-transparent-white-800); - --spectrum-button-background-color-hover: var(--spectrum-transparent-white-900); - --spectrum-button-background-color-down: var(--spectrum-transparent-white-900); - --spectrum-button-background-color-focus: var(--spectrum-transparent-white-900); - - &.spectrum-Button--outline { - --spectrum-button-background-color-hover: var(--spectrum-transparent-white-300); - --spectrum-button-background-color-down: var(--spectrum-transparent-white-400); - --spectrum-button-background-color-focus: var(--spectrum-transparent-white-300); - - --spectrum-button-content-color-default: var(--spectrum-white); - --spectrum-button-content-color-hover: var(--spectrum-white); - --spectrum-button-content-color-down: var(--spectrum-white); - --spectrum-button-content-color-focus: var(--spectrum-white); - - --spectrum-button-border-color-default: var(--spectrum-transparent-white-800); - --spectrum-button-border-color-hover: var(--spectrum-transparent-white-900); - --spectrum-button-border-color-down: var(--spectrum-transparent-white-900); - --spectrum-button-border-color-focus: var(--spectrum-transparent-white-900); - } - - &.spectrum-Button--secondary { - --spectrum-button-background-color-default: var(--spectrum-transparent-white-200); - --spectrum-button-background-color-hover: var(--spectrum-transparent-white-300); - --spectrum-button-background-color-down: var(--spectrum-transparent-white-400); - --spectrum-button-background-color-focus: var(--spectrum-transparent-white-300); - - --spectrum-button-content-color-default: var(--spectrum-white); - --spectrum-button-content-color-hover: var(--spectrum-white); - --spectrum-button-content-color-down: var(--spectrum-white); - --spectrum-button-content-color-focus: var(--spectrum-white); - - &.spectrum-Button--outline { - --spectrum-button-border-color-default: var(--spectrum-transparent-white-300); - --spectrum-button-border-color-hover: var(--spectrum-transparent-white-400); - --spectrum-button-border-color-down: var(--spectrum-transparent-white-500); - --spectrum-button-border-color-focus: var(--spectrum-transparent-white-400); - - --spectrum-button-background-color-default: var(--spectrum-transparent-white-800); - --spectrum-button-background-color-hover: var(--spectrum-transparent-white-300); - --spectrum-button-background-color-down: var(--spectrum-transparent-white-400); - --spectrum-button-background-color-focus: var(--spectrum-transparent-white-300); - } - } - } - - &.spectrum-Button--staticBlack { - --spectrum-button-background-color-default: var(--spectrum-transparent-black-800); - --spectrum-button-background-color-hover: var(--spectrum-transparent-black-900); - --spectrum-button-background-color-down: var(--spectrum-transparent-black-900); - --spectrum-button-background-color-focus: var(--spectrum-transparent-black-900); - - &.spectrum-Button--outline { - --spectrum-button-background-color-hover: var(--spectrum-transparent-black-300); - --spectrum-button-background-color-down: var(--spectrum-transparent-black-400); - --spectrum-button-background-color-focus: var(--spectrum-transparent-black-300); - - --spectrum-button-content-color-default: var(--spectrum-black); - --spectrum-button-content-color-hover: var(--spectrum-black); - --spectrum-button-content-color-down: var(--spectrum-black); - --spectrum-button-content-color-focus: var(--spectrum-black); - - --spectrum-button-border-color-default: var(--spectrum-transparent-black-400); - --spectrum-button-border-color-hover: var(--spectrum-transparent-black-500); - --spectrum-button-border-color-down: var(--spectrum-transparent-black-600); - --spectrum-button-border-color-focus: var(--spectrum-transparent-black-500); - } - - &.spectrum-Button--secondary { - --spectrum-button-background-color-default: var(--spectrum-transparent-black-200); - --spectrum-button-background-color-hover: var(--spectrum-transparent-black-300); - --spectrum-button-background-color-down: var(--spectrum-transparent-black-400); - --spectrum-button-background-color-focus: var(--spectrum-transparent-black-300); - - --spectrum-button-content-color-default: var(--spectrum-black); - --spectrum-button-content-color-hover: var(--spectrum-black); - --spectrum-button-content-color-down: var(--spectrum-black); - --spectrum-button-content-color-focus: var(--spectrum-black); - - &.spectrum-Button--outline { - --spectrum-button-border-color-default: var(--spectrum-transparent-black-300); - --spectrum-button-border-color-hover: var(--spectrum-transparent-black-400); - --spectrum-button-border-color-down: var(--spectrum-transparent-black-500); - --spectrum-button-border-color-focus: var(--spectrum-transparent-black-400); - - --spectrum-button-background-color-default: var(--spectrum-transparent-black-800); - --spectrum-button-background-color-hover: var(--spectrum-transparent-black-300); - --spectrum-button-background-color-down: var(--spectrum-transparent-black-400); - --spectrum-button-background-color-focus: var(--spectrum-transparent-black-300); - } - } - } - } -} diff --git a/components/buttongroup/dist/metadata.json b/components/buttongroup/dist/metadata.json index 38d29f26e39..ab60149abb4 100644 --- a/components/buttongroup/dist/metadata.json +++ b/components/buttongroup/dist/metadata.json @@ -19,7 +19,6 @@ "--spectrum-buttongroup-spacing" ], "global": ["--spectrum-spacing-200", "--spectrum-spacing-300"], - "system-theme": [], "passthroughs": [], "high-contrast": [] } diff --git a/components/calendar/dist/metadata.json b/components/calendar/dist/metadata.json index 676c81a041f..cc1fb80035c 100644 --- a/components/calendar/dist/metadata.json +++ b/components/calendar/dist/metadata.json @@ -54,8 +54,7 @@ ".spectrum-Calendar-tableCell", ".spectrum-Calendar-tableCell:focus", ".spectrum-Calendar-title", - ".spectrum-Calendar:dir(rtl)", - "[dir=\"rtl\"] .spectrum-Calendar" + ".spectrum-Calendar:dir(rtl)" ], "modifiers": [ "--mod-calendar-border-radius-reset", @@ -176,7 +175,6 @@ "--spectrum-neutral-subdued-content-color-default", "--spectrum-regular-font-weight" ], - "system-theme": ["--system-calendar-day-background-color-selected-disabled"], "passthroughs": [ "--mod-actionbutton-content-color-default", "--mod-actionbutton-edge-to-text", diff --git a/components/calendar/index.css b/components/calendar/index.css index 2ca1bc289aa..3a641fa47f8 100644 --- a/components/calendar/index.css +++ b/components/calendar/index.css @@ -11,9 +11,9 @@ * governing permissions and limitations under the License. */ -@import "./themes/spectrum-two.css"; - .spectrum-Calendar { + --spectrum-calendar-day-background-color-selected-disabled: rgba(var(--spectrum-gray-100-rgb), 0.4); + --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)); --spectrum-calendar-day-border-size: var(--mod-calendar-day-border-size, var(--spectrum-border-width-200)); diff --git a/components/calendar/stories/template.js b/components/calendar/stories/template.js index 19c70fe9395..863f5e8d113 100644 --- a/components/calendar/stories/template.js +++ b/components/calendar/stories/template.js @@ -8,9 +8,6 @@ import { repeat } from "lit/directives/repeat.js"; import { styleMap } from "lit/directives/style-map.js"; import "../index.css"; -import "../themes/spectrum.css"; -/* Must be imported last */ -import "../themes/express.css"; export const Template = ({ rootClass = "spectrum-Calendar", diff --git a/components/calendar/themes/express.css b/components/calendar/themes/express.css deleted file mode 100644 index 9fd550418f2..00000000000 --- a/components/calendar/themes/express.css +++ /dev/null @@ -1,16 +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. - */ - -/* @combine .spectrum.spectrum--express */ - -@import "./spectrum.css"; diff --git a/components/calendar/themes/spectrum-two.css b/components/calendar/themes/spectrum-two.css deleted file mode 100644 index b14c7134359..00000000000 --- a/components/calendar/themes/spectrum-two.css +++ /dev/null @@ -1,18 +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. - */ - -@container style(--system: spectrum) { - .spectrum-Calendar { - --spectrum-calendar-day-background-color-selected-disabled: rgba(var(--spectrum-gray-100-rgb), 0.4); - } -} diff --git a/components/calendar/themes/spectrum.css b/components/calendar/themes/spectrum.css deleted file mode 100644 index 368d50d51e8..00000000000 --- a/components/calendar/themes/spectrum.css +++ /dev/null @@ -1,22 +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. - */ - -/* @combine .spectrum.spectrum--legacy */ - -@import "./spectrum-two.css"; - -@container style(--system: legacy) { - .spectrum-Calendar { - --spectrum-calendar-day-background-color-selected-disabled: rgba(var(--spectrum-gray-200-rgb), 0.4); - } -} diff --git a/components/card/dist/metadata.json b/components/card/dist/metadata.json index 54eb899211d..83d96a40985 100644 --- a/components/card/dist/metadata.json +++ b/components/card/dist/metadata.json @@ -215,13 +215,6 @@ "--spectrum-spacing-300", "--spectrum-spacing-400" ], - "system-theme": [ - "--system-card-border-color", - "--system-card-border-color-hover", - "--system-card-divider-color", - "--system-card-preview-background-color", - "--system-card-preview-background-color-hover" - ], "passthroughs": [], "high-contrast": [] } diff --git a/components/card/index.css b/components/card/index.css index f56599c17c4..e6cabc897e4 100644 --- a/components/card/index.css +++ b/components/card/index.css @@ -11,9 +11,13 @@ * governing permissions and limitations under the License. */ -@import "./themes/spectrum-two.css"; - .spectrum-Card { + --spectrum-card-border-color: var(--spectrum-gray-100); + --spectrum-card-border-color-hover: var(--spectrum-gray-200); + --spectrum-card-divider-color: var(--spectrum-gray-200); + --spectrum-card-preview-background-color: var(--spectrum-gray-100); + --spectrum-card-preview-background-color-hover: var(--spectrum-gray-200); + /* Default Layout */ --spectrum-card-background-color: var(--mod-card-background-color, var(--spectrum-background-layer-2-color)); --spectrum-card-body-spacing: var(--mod-card-body-spacing, var(--spectrum-spacing-400)); diff --git a/components/card/stories/template.js b/components/card/stories/template.js index d1d226c7b0e..09eb0360803 100644 --- a/components/card/stories/template.js +++ b/components/card/stories/template.js @@ -11,9 +11,6 @@ import { styleMap } from "lit/directives/style-map.js"; import { when } from "lit/directives/when.js"; import "../index.css"; -import "../themes/spectrum.css"; -/* Must be imported last */ -import "../themes/express.css"; export const Template = ({ rootClass = "spectrum-Card", diff --git a/components/card/themes/express.css b/components/card/themes/express.css deleted file mode 100644 index 9fd550418f2..00000000000 --- a/components/card/themes/express.css +++ /dev/null @@ -1,16 +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. - */ - -/* @combine .spectrum.spectrum--express */ - -@import "./spectrum.css"; diff --git a/components/card/themes/spectrum-two.css b/components/card/themes/spectrum-two.css deleted file mode 100644 index 2ef275418ee..00000000000 --- a/components/card/themes/spectrum-two.css +++ /dev/null @@ -1,22 +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. - */ - -@container style(--system: spectrum) { - .spectrum-Card { - --spectrum-card-border-color: var(--spectrum-gray-100); - --spectrum-card-border-color-hover: var(--spectrum-gray-200); - --spectrum-card-divider-color: var(--spectrum-gray-200); - --spectrum-card-preview-background-color: var(--spectrum-gray-100); - --spectrum-card-preview-background-color-hover: var(--spectrum-gray-200); - } -} diff --git a/components/card/themes/spectrum.css b/components/card/themes/spectrum.css deleted file mode 100644 index a1906d601bd..00000000000 --- a/components/card/themes/spectrum.css +++ /dev/null @@ -1,26 +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. - */ - -/* @combine .spectrum.spectrum--legacy */ - -@import "./spectrum-two.css"; - -@container style(--system: legacy) { - .spectrum-Card { - --spectrum-card-border-color: var(--spectrum-gray-200); - --spectrum-card-border-color-hover: var(--spectrum-gray-300); - --spectrum-card-divider-color: var(--spectrum-gray-300); - --spectrum-card-preview-background-color: var(--spectrum-background-base-color); - --spectrum-card-preview-background-color-hover: var(--spectrum-gray-300); - } -} diff --git a/components/checkbox/dist/metadata.json b/components/checkbox/dist/metadata.json index 695a4df09f6..c493875171e 100644 --- a/components/checkbox/dist/metadata.json +++ b/components/checkbox/dist/metadata.json @@ -207,14 +207,6 @@ "--spectrum-text-to-control-300", "--spectrum-text-to-control-75" ], - "system-theme": [ - "--system-checkbox-checkmark-color", - "--system-checkbox-control-color-default", - "--system-checkbox-control-color-down", - "--system-checkbox-control-color-focus", - "--system-checkbox-control-color-hover", - "--system-checkbox-control-corner-radius" - ], "passthroughs": [], "high-contrast": [ "--highcontrast-checkbox-background-color-default", diff --git a/components/checkbox/index.css b/components/checkbox/index.css index 3c1a7782398..60513a6b87f 100644 --- a/components/checkbox/index.css +++ b/components/checkbox/index.css @@ -11,14 +11,15 @@ * governing permissions and limitations under the License. */ -@import "./themes/spectrum-two.css"; +.spectrum-Checkbox { + --spectrum-checkbox-control-color-default: var(--spectrum-neutral-content-color-default); + --spectrum-checkbox-control-color-hover: var(--spectrum-gray-700); + --spectrum-checkbox-control-color-down: var(--spectrum-gray-800); + --spectrum-checkbox-control-color-focus: var(--spectrum-gray-700); -/* - * .spectrum-Checkbox-box::before is the Checkbox "box" - * .spectrum-Checkbox-box::after is the focus indicator - */ + --spectrum-checkbox-checkmark-color: var(--spectrum-gray-50); + --spectrum-checkbox-control-corner-radius: 2px; -.spectrum-Checkbox { /* Color */ --spectrum-checkbox-content-color-default: var(--spectrum-neutral-content-color-default); --spectrum-checkbox-content-color-hover: var(--spectrum-neutral-content-color-hover); diff --git a/components/checkbox/stories/template.js b/components/checkbox/stories/template.js index ebeaba0e276..989fdf7e7f5 100644 --- a/components/checkbox/stories/template.js +++ b/components/checkbox/stories/template.js @@ -7,9 +7,6 @@ import { styleMap } from "lit/directives/style-map.js"; import { when } from "lit/directives/when.js"; import "../index.css"; -import "../themes/spectrum.css"; -/* Must be imported last */ -import "../themes/express.css"; export const Template = ({ rootClass = "spectrum-Checkbox", diff --git a/components/checkbox/themes/express.css b/components/checkbox/themes/express.css deleted file mode 100644 index 1c84aa5f83b..00000000000 --- a/components/checkbox/themes/express.css +++ /dev/null @@ -1,25 +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. - */ - -/* @combine .spectrum.spectrum--express */ - -@import "./spectrum.css"; - -@container style(--system: express) { - .spectrum-Checkbox { - --spectrum-checkbox-control-color-default: var(--spectrum-gray-800); - --spectrum-checkbox-control-color-hover: var(--spectrum-gray-900); - --spectrum-checkbox-control-color-down: var(--spectrum-gray-900); - --spectrum-checkbox-control-color-focus: var(--spectrum-gray-900); - } -} diff --git a/components/checkbox/themes/spectrum-two.css b/components/checkbox/themes/spectrum-two.css deleted file mode 100644 index 4b7d8a675f8..00000000000 --- a/components/checkbox/themes/spectrum-two.css +++ /dev/null @@ -1,24 +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. - */ - -@container style(--system: spectrum) { - .spectrum-Checkbox { - --spectrum-checkbox-control-color-default: var(--spectrum-neutral-content-color-default); - --spectrum-checkbox-control-color-hover: var(--spectrum-gray-700); - --spectrum-checkbox-control-color-down: var(--spectrum-gray-800); - --spectrum-checkbox-control-color-focus: var(--spectrum-gray-700); - - --spectrum-checkbox-checkmark-color: var(--spectrum-gray-50); - --spectrum-checkbox-control-corner-radius: 2px; - } -} diff --git a/components/checkbox/themes/spectrum.css b/components/checkbox/themes/spectrum.css deleted file mode 100644 index 698c531cc51..00000000000 --- a/components/checkbox/themes/spectrum.css +++ /dev/null @@ -1,24 +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. - */ - -/* @combine .spectrum.spectrum--legacy */ - -@import "./spectrum-two.css"; - -@container style(--system: legacy) { - .spectrum-Checkbox { - --spectrum-checkbox-control-color-default: var(--spectrum-gray-600); - --spectrum-checkbox-checkmark-color: var(--spectrum-gray-75); - --spectrum-checkbox-control-corner-radius: var(--spectrum-corner-radius-75); - } -} diff --git a/components/clearbutton/dist/metadata.json b/components/clearbutton/dist/metadata.json index 7702979183f..7c038466b7a 100644 --- a/components/clearbutton/dist/metadata.json +++ b/components/clearbutton/dist/metadata.json @@ -68,15 +68,6 @@ "--spectrum-transparent-white-500", "--spectrum-white" ], - "system-theme": [ - "--system-clear-button-background-color", - "--system-clear-button-background-color-down", - "--system-clear-button-background-color-hover", - "--system-clear-button-background-color-key-focus", - "--system-clear-button-static-white-background-color-down", - "--system-clear-button-static-white-background-color-hover", - "--system-clear-button-static-white-background-color-key-focus" - ], "passthroughs": [], "high-contrast": ["--highcontrast-clear-button-icon-color-hover"] } diff --git a/components/clearbutton/index.css b/components/clearbutton/index.css index edee47004ee..517093d7c3a 100644 --- a/components/clearbutton/index.css +++ b/components/clearbutton/index.css @@ -11,9 +11,12 @@ * governing permissions and limitations under the License. */ -@import "./themes/spectrum-two.css"; - .spectrum-ClearButton { + --spectrum-clear-button-background-color: transparent; + --spectrum-clear-button-background-color-hover: transparent; + --spectrum-clear-button-background-color-down: transparent; + --spectrum-clear-button-background-color-key-focus: transparent; + --spectrum-clear-button-height: var(--spectrum-component-height-100); --spectrum-clear-button-width: var(--spectrum-component-height-100); --spectrum-clear-button-padding: var(--spectrum-in-field-button-edge-to-fill); @@ -57,6 +60,10 @@ } &.spectrum-ClearButton--staticWhite { + --spectrum-clear-button-background-color-hover: var(--spectrum-transparent-white-400); + --spectrum-clear-button-background-color-down: var(--spectrum-transparent-white-500); + --spectrum-clear-button-background-color-key-focus: var(--spectrum-transparent-white-400); + --mod-clear-button-icon-color: var(--spectrum-white); --mod-clear-button-icon-color-hover: var(--spectrum-white); --mod-clear-button-icon-color-down: var(--spectrum-white); diff --git a/components/clearbutton/stories/template.js b/components/clearbutton/stories/template.js index 58e90007c04..a4ce921c7aa 100644 --- a/components/clearbutton/stories/template.js +++ b/components/clearbutton/stories/template.js @@ -6,9 +6,6 @@ import { ifDefined } from "lit/directives/if-defined.js"; import { styleMap } from "lit/directives/style-map.js"; import "../index.css"; -import "../themes/spectrum.css"; -/* Must be imported last */ -import "../themes/express.css"; export const Template = ({ rootClass = "spectrum-ClearButton", diff --git a/components/clearbutton/themes/express.css b/components/clearbutton/themes/express.css deleted file mode 100644 index e13724e2883..00000000000 --- a/components/clearbutton/themes/express.css +++ /dev/null @@ -1,25 +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. - */ - -/* @combine .spectrum.spectrum--express */ - -@import "./spectrum.css"; - -@container style(--system: express) { - .spectrum-ClearButton { - --spectrum-clear-button-background-color: var(--spectrum-gray-200); - --spectrum-clear-button-background-color-hover: var(--spectrum-gray-300); - --spectrum-clear-button-background-color-down: var(--spectrum-gray-400); - --spectrum-clear-button-background-color-key-focus: var(--spectrum-gray-300); - } -} diff --git a/components/clearbutton/themes/spectrum-two.css b/components/clearbutton/themes/spectrum-two.css deleted file mode 100644 index abba1f78556..00000000000 --- a/components/clearbutton/themes/spectrum-two.css +++ /dev/null @@ -1,27 +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. - */ - -@container style(--system: spectrum) { - .spectrum-ClearButton { - --spectrum-clear-button-background-color: transparent; - --spectrum-clear-button-background-color-hover: transparent; - --spectrum-clear-button-background-color-down: transparent; - --spectrum-clear-button-background-color-key-focus: transparent; - - &.spectrum-ClearButton--staticWhite { - --spectrum-clear-button-background-color-hover: var(--spectrum-transparent-white-400); - --spectrum-clear-button-background-color-down: var(--spectrum-transparent-white-500); - --spectrum-clear-button-background-color-key-focus: var(--spectrum-transparent-white-400); - } - } -} diff --git a/components/clearbutton/themes/spectrum.css b/components/clearbutton/themes/spectrum.css deleted file mode 100644 index e4235fb3dff..00000000000 --- a/components/clearbutton/themes/spectrum.css +++ /dev/null @@ -1,26 +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. - */ - -/* @combine .spectrum.spectrum--legacy */ - -@import "./spectrum-two.css"; - -@container style(--system: legacy) { - .spectrum-ClearButton { - &.spectrum-ClearButton--staticWhite { - --spectrum-clear-button-background-color-hover: var(--spectrum-transparent-white-300); - --spectrum-clear-button-background-color-down: var(--spectrum-transparent-white-400); - --spectrum-clear-button-background-color-key-focus: var(--spectrum-transparent-white-300); - } - } -} diff --git a/components/closebutton/dist/metadata.json b/components/closebutton/dist/metadata.json index 756fc3d7e62..ecd16bd998b 100644 --- a/components/closebutton/dist/metadata.json +++ b/components/closebutton/dist/metadata.json @@ -60,7 +60,6 @@ "a.spectrum-CloseButton" ], "modifiers": [ - "--mod-animation-duration-100", "--mod-closebutton-align-self", "--mod-closebutton-animation-duraction", "--mod-closebutton-animation-duration", @@ -85,9 +84,7 @@ "--mod-closebutton-static-background-color-down", "--mod-closebutton-static-background-color-focus", "--mod-closebutton-static-background-color-hover", - "--mod-closebutton-width", - "--mod-line-height-100", - "--mod-sans-font-family-stack" + "--mod-closebutton-width" ], "component": [ "--spectrum-closebutton-animation-duration", @@ -139,18 +136,6 @@ "--spectrum-transparent-white-500", "--spectrum-white" ], - "system-theme": [ - "--system-close-button-background-color-default", - "--system-close-button-background-color-down", - "--system-close-button-background-color-focus", - "--system-close-button-background-color-hover", - "--system-close-button-static-black-static-background-color-down", - "--system-close-button-static-black-static-background-color-focus", - "--system-close-button-static-black-static-background-color-hover", - "--system-close-button-static-white-static-background-color-down", - "--system-close-button-static-white-static-background-color-focus", - "--system-close-button-static-white-static-background-color-hover" - ], "passthroughs": [ "--mod-button-animation-duration", "--mod-button-font-family", diff --git a/components/closebutton/index.css b/components/closebutton/index.css index 14880d3ee6e..cec97f24c23 100644 --- a/components/closebutton/index.css +++ b/components/closebutton/index.css @@ -11,7 +11,6 @@ * governing permissions and limitations under the License. */ -@import "./themes/spectrum-two.css"; @import "@spectrum-css/commons/basebutton.css"; /* Windows high contrast mode */ @@ -49,6 +48,11 @@ } .spectrum-CloseButton { + --spectrum-closebutton-background-color-default: transparent; + --spectrum-closebutton-background-color-hover: var(--spectrum-gray-100); + --spectrum-closebutton-background-color-down: var(--spectrum-gray-200); + --spectrum-closebutton-background-color-focus: var(--spectrum-gray-100); + /* Cross icon */ --spectrum-closebutton-icon-color-default: var(--spectrum-neutral-content-color-default); --spectrum-closebutton-icon-color-hover: var(--spectrum-neutral-content-color-hover); @@ -85,6 +89,10 @@ } &.spectrum-CloseButton--staticWhite { + --spectrum-closebutton-static-background-color-hover: var(--spectrum-transparent-white-400); + --spectrum-closebutton-static-background-color-down: var(--spectrum-transparent-white-500); + --spectrum-closebutton-static-background-color-focus: var(--spectrum-transparent-white-400); + --spectrum-closebutton-static-background-color-default: transparent; --spectrum-closebutton-icon-color-default: var(--spectrum-white); @@ -93,13 +101,19 @@ } &.spectrum-CloseButton--staticBlack { + --spectrum-closebutton-static-background-color-hover: var(--spectrum-transparent-black-400); + --spectrum-closebutton-static-background-color-down: var(--spectrum-transparent-black-500); + --spectrum-closebutton-static-background-color-focus: var(--spectrum-transparent-black-400); + --spectrum-closebutton-static-background-color-default: transparent; --spectrum-closebutton-icon-color-default: var(--spectrum-black); --spectrum-closebutton-icon-color-disabled: var(--spectrum-disabled-static-black-content-color); --spectrum-closebutton-focus-indicator-color: var(--spectrum-static-black-focus-indicator-color); } +} +.spectrum-CloseButton { @extend %spectrum-BaseButton; block-size: var(--mod-closebutton-height, var(--spectrum-closebutton-size)); diff --git a/components/closebutton/stories/template.js b/components/closebutton/stories/template.js index 644ce705f62..4e730b8529c 100644 --- a/components/closebutton/stories/template.js +++ b/components/closebutton/stories/template.js @@ -6,9 +6,6 @@ import { ifDefined } from "lit/directives/if-defined.js"; import { capitalize, upperCase } from "lodash-es"; import "../index.css"; -import "../themes/spectrum.css"; -/* Must be imported last */ -import "../themes/express.css"; export const Template = ({ rootClass = "spectrum-CloseButton", diff --git a/components/closebutton/themes/express.css b/components/closebutton/themes/express.css deleted file mode 100644 index 06a90e4fee9..00000000000 --- a/components/closebutton/themes/express.css +++ /dev/null @@ -1,25 +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. - */ - -/* @combine .spectrum.spectrum--express */ - -@import "./spectrum.css"; - -@container style(--system: express) { - .spectrum-CloseButton { - --spectrum-closebutton-background-color-default: transparent; - --spectrum-closebutton-background-color-hover: var(--spectrum-gray-300); - --spectrum-closebutton-background-color-down: var(--spectrum-gray-400); - --spectrum-closebutton-background-color-focus: var(--spectrum-gray-300); - } -} diff --git a/components/closebutton/themes/spectrum-two.css b/components/closebutton/themes/spectrum-two.css deleted file mode 100644 index 01479c42fd4..00000000000 --- a/components/closebutton/themes/spectrum-two.css +++ /dev/null @@ -1,33 +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. - */ - -@container style(--system: spectrum) { - .spectrum-CloseButton { - --spectrum-closebutton-background-color-default: transparent; - --spectrum-closebutton-background-color-hover: var(--spectrum-gray-100); - --spectrum-closebutton-background-color-down: var(--spectrum-gray-200); - --spectrum-closebutton-background-color-focus: var(--spectrum-gray-100); - - &.spectrum-CloseButton--staticWhite { - --spectrum-closebutton-static-background-color-hover: var(--spectrum-transparent-white-400); - --spectrum-closebutton-static-background-color-down: var(--spectrum-transparent-white-500); - --spectrum-closebutton-static-background-color-focus: var(--spectrum-transparent-white-400); - } - - &.spectrum-CloseButton--staticBlack { - --spectrum-closebutton-static-background-color-hover: var(--spectrum-transparent-black-400); - --spectrum-closebutton-static-background-color-down: var(--spectrum-transparent-black-500); - --spectrum-closebutton-static-background-color-focus: var(--spectrum-transparent-black-400); - } - } -} diff --git a/components/closebutton/themes/spectrum.css b/components/closebutton/themes/spectrum.css deleted file mode 100644 index 62e907bae8a..00000000000 --- a/components/closebutton/themes/spectrum.css +++ /dev/null @@ -1,36 +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. - */ - -/* @combine .spectrum.spectrum--legacy */ - -@import "./spectrum-two.css"; - -@container style(--system: legacy) { - .spectrum-CloseButton { - --spectrum-closebutton-background-color-hover: var(--spectrum-gray-200); - --spectrum-closebutton-background-color-down: var(--spectrum-gray-300); - --spectrum-closebutton-background-color-focus: var(--spectrum-gray-200); - - &.spectrum-CloseButton--staticWhite { - --spectrum-closebutton-static-background-color-hover: var(--spectrum-transparent-white-300); - --spectrum-closebutton-static-background-color-down: var(--spectrum-transparent-white-400); - --spectrum-closebutton-static-background-color-focus: var(--spectrum-transparent-white-300); - } - - &.spectrum-CloseButton--staticBlack { - --spectrum-closebutton-static-background-color-hover: var(--spectrum-transparent-black-300); - --spectrum-closebutton-static-background-color-down: var(--spectrum-transparent-black-400); - --spectrum-closebutton-static-background-color-focus: var(--spectrum-transparent-black-300); - } - } -} diff --git a/components/coachindicator/dist/metadata.json b/components/coachindicator/dist/metadata.json index 9714f9f1ed1..8f4aa529653 100644 --- a/components/coachindicator/dist/metadata.json +++ b/components/coachindicator/dist/metadata.json @@ -10,10 +10,7 @@ ".spectrum-CoachIndicator.spectrum-CoachIndicator--light", ".spectrum-CoachIndicator.spectrum-CoachIndicator--quiet", ".spectrum-CoachIndicator.spectrum-CoachIndicator--staticBlack", - ".spectrum-CoachIndicator.spectrum-CoachIndicator--staticWhite", - "0%", - "50%", - "to" + ".spectrum-CoachIndicator.spectrum-CoachIndicator--staticWhite" ], "modifiers": [ "--mod-coach-animation-indicator-ring-center-delay-multiple", @@ -60,7 +57,6 @@ "--spectrum-coach-animation-indicator-ring-duration", "--spectrum-white" ], - "system-theme": [], "passthroughs": [], "high-contrast": [] } diff --git a/components/coachmark/dist/metadata.json b/components/coachmark/dist/metadata.json index 8bc036d5fca..690cd1f8f6e 100644 --- a/components/coachmark/dist/metadata.json +++ b/components/coachmark/dist/metadata.json @@ -81,7 +81,6 @@ "--spectrum-spacing-200", "--spectrum-spacing-300" ], - "system-theme": [], "passthroughs": [ "--mod-button-edge-to-visual-only", "--mod-buttongroup-justify-content", diff --git a/components/colorarea/dist/metadata.json b/components/colorarea/dist/metadata.json index ff86d1c0045..55a1b14c6bb 100644 --- a/components/colorarea/dist/metadata.json +++ b/components/colorarea/dist/metadata.json @@ -9,8 +9,7 @@ ".spectrum-ColorArea.is-disabled", ".spectrum-ColorArea.is-disabled .spectrum-ColorArea-gradient", ".spectrum-ColorArea.is-focused", - ".spectrum-ColorHandle-color", - "[dir=\"rtl\"] .spectrum-ColorArea-handle" + ".spectrum-ColorHandle-color" ], "modifiers": [ "--mod-colorarea-border-color", @@ -32,7 +31,6 @@ "--spectrum-colorarea-border-color" ], "global": ["--spectrum-disabled-background-color"], - "system-theme": [], "passthroughs": [], "high-contrast": [ "--highcontrast-colorarea-border-color", diff --git a/components/colorhandle/dist/metadata.json b/components/colorhandle/dist/metadata.json index 4d8589ac1c1..cbd2b5d599f 100644 --- a/components/colorhandle/dist/metadata.json +++ b/components/colorhandle/dist/metadata.json @@ -46,7 +46,6 @@ "--spectrum-picked-color", "--spectrum-white" ], - "system-theme": [], "passthroughs": ["--mod-opacity-checkerboard-position"], "high-contrast": [ "--highcontrast-colorhandle-border-color-disabled", diff --git a/components/colorloupe/dist/metadata.json b/components/colorloupe/dist/metadata.json index 245bb476b1f..0406b61c90f 100644 --- a/components/colorloupe/dist/metadata.json +++ b/components/colorloupe/dist/metadata.json @@ -9,8 +9,7 @@ ".spectrum-ColorLoupe-outer-border", ".spectrum-ColorLoupe.is-disabled", ".spectrum-ColorLoupe.is-open", - ".spectrum-ColorLoupe:dir(rtl)", - "[dir=\"rtl\"] .spectrum-ColorLoupe" + ".spectrum-ColorLoupe:dir(rtl)" ], "modifiers": [ "--mod-colorloupe-animation-distance", @@ -45,7 +44,6 @@ "--spectrum-opacity-checkerboard-square-light", "--spectrum-picked-color" ], - "system-theme": [], "passthroughs": [], "high-contrast": ["--highcontrast-colorloupe-outer-border-color"] } diff --git a/components/colorslider/dist/metadata.json b/components/colorslider/dist/metadata.json index ea202a9f0a0..1eb855b9d53 100644 --- a/components/colorslider/dist/metadata.json +++ b/components/colorslider/dist/metadata.json @@ -13,8 +13,7 @@ ".spectrum-ColorSlider.is-disabled", ".spectrum-ColorSlider.is-disabled .spectrum-ColorSlider-checkerboard", ".spectrum-ColorSlider.is-disabled .spectrum-ColorSlider-gradient", - ".spectrum-ColorSlider.is-focused", - "[dir=\"rtl\"] .spectrum-ColorSlider-gradient" + ".spectrum-ColorSlider.is-focused" ], "modifiers": [ "--mod-color-slider-background-color-disabled", @@ -45,7 +44,6 @@ "--spectrum-disabled-background-color", "--spectrum-gray-900-rgb" ], - "system-theme": [], "passthroughs": ["--mod-colorhandle-hitarea-border-radius"], "high-contrast": [ "--highcontrast-color-slider-background-color-disabled", diff --git a/components/colorwheel/dist/metadata.json b/components/colorwheel/dist/metadata.json index c321e1aca27..960c4171c9f 100644 --- a/components/colorwheel/dist/metadata.json +++ b/components/colorwheel/dist/metadata.json @@ -14,8 +14,7 @@ ".spectrum-ColorWheel-wheel.is-disabled", ".spectrum-ColorWheel.is-disabled", ".spectrum-ColorWheel.is-dragged", - ".spectrum-ColorWheel.is-focused", - "[dir=\"rtl\"] .spectrum-ColorWheel-ColorArea-handle" + ".spectrum-ColorWheel.is-focused" ], "modifiers": [ "--mod-colorwheel-border-color", @@ -50,7 +49,6 @@ "--spectrum-disabled-background-color", "--spectrum-transparent-black-300" ], - "system-theme": ["--system-color-wheel-border-color"], "passthroughs": [], "high-contrast": [ "--highcontrast-colorwheel-border-color-disabled", diff --git a/components/colorwheel/index.css b/components/colorwheel/index.css index e44d21045f0..9c0f9746c64 100644 --- a/components/colorwheel/index.css +++ b/components/colorwheel/index.css @@ -11,8 +11,6 @@ * governing permissions and limitations under the License. */ -@import "./themes/spectrum-two.css"; - /* Windows High Contrast Mode */ @media (forced-colors: active) { .spectrum-ColorWheel { @@ -24,6 +22,8 @@ } .spectrum-ColorWheel { + --spectrum-colorwheel-border-color: var(--spectrum-transparent-black-300); + --spectrum-colorwheel-width: var(--mod-colorwheel-width, var(--spectrum-color-wheel-width)); --spectrum-colorwheel-height: var(--mod-colorwheel-height, var(--spectrum-color-wheel-width)); --spectrum-colorwheel-fill-color-disabled: var(--mod-colorwheel-fill-color-disabled, var(--spectrum-disabled-background-color)); diff --git a/components/colorwheel/stories/template.js b/components/colorwheel/stories/template.js index 851150ffd37..1d02f5e7823 100644 --- a/components/colorwheel/stories/template.js +++ b/components/colorwheel/stories/template.js @@ -5,9 +5,6 @@ import { classMap } from "lit/directives/class-map.js"; import { when } from "lit/directives/when.js"; import "../index.css"; -import "../themes/spectrum.css"; -/* Must be imported last */ -import "../themes/express.css"; export const Template = ({ rootClass = "spectrum-ColorWheel", diff --git a/components/colorwheel/themes/express.css b/components/colorwheel/themes/express.css deleted file mode 100644 index 9fd550418f2..00000000000 --- a/components/colorwheel/themes/express.css +++ /dev/null @@ -1,16 +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. - */ - -/* @combine .spectrum.spectrum--express */ - -@import "./spectrum.css"; diff --git a/components/colorwheel/themes/spectrum-two.css b/components/colorwheel/themes/spectrum-two.css deleted file mode 100644 index b80c228ebb8..00000000000 --- a/components/colorwheel/themes/spectrum-two.css +++ /dev/null @@ -1,18 +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. - */ - -@container style(--system: spectrum) { - .spectrum-ColorWheel { - --spectrum-colorwheel-border-color: var(--spectrum-transparent-black-300); - } -} diff --git a/components/colorwheel/themes/spectrum.css b/components/colorwheel/themes/spectrum.css deleted file mode 100644 index 9c47a280a66..00000000000 --- a/components/colorwheel/themes/spectrum.css +++ /dev/null @@ -1,22 +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. - */ - -/* @combine .spectrum.spectrum--legacy */ - -@import "./spectrum-two.css"; - -@container style(--system: legacy) { - .spectrum-ColorWheel { - --spectrum-colorwheel-border-color: var(--spectrum-transparent-black-200); - } -} diff --git a/components/combobox/dist/metadata.json b/components/combobox/dist/metadata.json index bdf2685d75f..7477527a7df 100644 --- a/components/combobox/dist/metadata.json +++ b/components/combobox/dist/metadata.json @@ -78,8 +78,7 @@ ".spectrum-Combobox:hover:has(:focus) .spectrum-Combobox-button:not(:disabled, .is-invalid, .spectrum-PickerButton--quiet)", ".spectrum-Textfield.is-disabled .spectrum-Textfield-validationIcon", ".spectrum-Textfield.is-loading .spectrum-Textfield-validationIcon", - ".spectrum-Textfield.is-readOnly .spectrum-Textfield-validationIcon", - "[dir=\"rtl\"] .spectrum-Combobox-progress-circle" + ".spectrum-Textfield.is-readOnly .spectrum-Textfield-validationIcon" ], "modifiers": [ "--mod-combobox-alert-icon-color", @@ -251,16 +250,6 @@ "--spectrum-workflow-icon-size-300", "--spectrum-workflow-icon-size-75" ], - "system-theme": [ - "--system-combobox-background-color-disabled", - "--system-combobox-border-color-default", - "--system-combobox-border-color-disabled", - "--system-combobox-border-color-focus", - "--system-combobox-border-color-focus-hover", - "--system-combobox-border-color-hover", - "--system-combobox-border-color-key-focus", - "--system-combobox-readonly-input-border-color" - ], "passthroughs": [ "--mod-picker-button-background-color", "--mod-picker-button-background-color-disabled", diff --git a/components/combobox/index.css b/components/combobox/index.css index 1718cb5d750..9b82c8a2f42 100644 --- a/components/combobox/index.css +++ b/components/combobox/index.css @@ -11,9 +11,18 @@ * governing permissions and limitations under the License. */ -@import "./themes/spectrum-two.css"; - .spectrum-Combobox { + --spectrum-combobox-border-color-default: var(--spectrum-gray-500); + --spectrum-combobox-border-color-hover: var(--spectrum-gray-600); + --spectrum-combobox-border-color-focus: var(--spectrum-gray-800); + --spectrum-combobox-border-color-focus-hover: var(--spectrum-gray-900); + --spectrum-combobox-border-color-key-focus: var(--spectrum-gray-800); + + --spectrum-combobox-readonly-input-border-color: var(--spectrum-gray-500); + + --spectrum-combobox-background-color-disabled: var(--spectrum-gray-25); + --spectrum-combobox-border-color-disabled: var(--spectrum-disabled-border-color); + --spectrum-combobox-inline-size: var(--spectrum-field-width); --spectrum-combobox-block-size: var(--spectrum-component-height-100); --spectrum-combobox-min-inline-size: calc(var(--spectrum-combo-box-minimum-width-multiplier) * var(--spectrum-combobox-block-size)); diff --git a/components/combobox/stories/template.js b/components/combobox/stories/template.js index fe68d45cba9..96dfdcf25ee 100644 --- a/components/combobox/stories/template.js +++ b/components/combobox/stories/template.js @@ -10,9 +10,6 @@ import { styleMap } from "lit/directives/style-map.js"; import { when } from "lit/directives/when.js"; import "../index.css"; -import "../themes/spectrum.css"; -/* Must be imported last */ -import "../themes/express.css"; const Combobox = ({ rootClass = "spectrum-Combobox", diff --git a/components/combobox/themes/express.css b/components/combobox/themes/express.css deleted file mode 100644 index dc19625a853..00000000000 --- a/components/combobox/themes/express.css +++ /dev/null @@ -1,28 +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. - */ - -/* @combine .spectrum.spectrum--express */ - -@import "./spectrum.css"; - -@container style(--system: express) { - .spectrum-Combobox { - --spectrum-combobox-border-color-default: var(--spectrum-gray-400); - --spectrum-combobox-border-color-hover: var(--spectrum-gray-500); - --spectrum-combobox-border-color-focus: var(--spectrum-gray-900); - --spectrum-combobox-border-color-focus-hover: var(--spectrum-gray-800); - --spectrum-combobox-border-color-key-focus: var(--spectrum-gray-900); - - --spectrum-combobox-readonly-input-border-color: var(--spectrum-gray-400); - } -} diff --git a/components/combobox/themes/spectrum-two.css b/components/combobox/themes/spectrum-two.css deleted file mode 100644 index 9d8502ebb3e..00000000000 --- a/components/combobox/themes/spectrum-two.css +++ /dev/null @@ -1,27 +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. - */ - -@container style(--system: spectrum) { - .spectrum-Combobox { - --spectrum-combobox-border-color-default: var(--spectrum-gray-500); - --spectrum-combobox-border-color-hover: var(--spectrum-gray-600); - --spectrum-combobox-border-color-focus: var(--spectrum-gray-800); - --spectrum-combobox-border-color-focus-hover: var(--spectrum-gray-900); - --spectrum-combobox-border-color-key-focus: var(--spectrum-gray-800); - - --spectrum-combobox-readonly-input-border-color: var(--spectrum-gray-500); - - --spectrum-combobox-background-color-disabled: var(--spectrum-gray-25); - --spectrum-combobox-border-color-disabled: var(--spectrum-disabled-border-color); - } -} diff --git a/components/combobox/themes/spectrum.css b/components/combobox/themes/spectrum.css deleted file mode 100644 index 5b0a3eea8bf..00000000000 --- a/components/combobox/themes/spectrum.css +++ /dev/null @@ -1,29 +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. - */ - -/* @combine .spectrum.spectrum--legacy */ - -@import "./spectrum-two.css"; - -@container style(--system: legacy) { - .spectrum-Combobox { - --spectrum-combobox-border-color-focus: var(--spectrum-gray-500); - --spectrum-combobox-border-color-focus-hover: var(--spectrum-gray-600); - --spectrum-combobox-border-color-key-focus: var(--spectrum-gray-600); - - --spectrum-combobox-readonly-input-border-color: var(--spectrum-gray-500); - - --spectrum-combobox-background-color-disabled: var(--spectrum-disabled-background-color); - --spectrum-combobox-border-color-disabled: transparent; - } -} diff --git a/components/commons/basebutton.css b/components/commons/basebutton.css index fa015bc145f..ca0caa6bba2 100644 --- a/components/commons/basebutton.css +++ b/components/commons/basebutton.css @@ -29,39 +29,40 @@ /* Remove button the margin in Firefox and Safari. */ margin: 0; - /* @deprecation --mod-sans-font-family-stack has been renamed and will be removed in a future version. */ - font-family: var(--mod-button-font-family, var(--mod-sans-font-family-stack, var(--spectrum-sans-font-family-stack))); + font-family: var(--mod-button-font-family, var(--spectrum-sans-font-family-stack)); + + /* Adjacent buttons should be aligned correctly */ + vertical-align: top; -webkit-font-smoothing: antialiased; /* Font smoothing for Firefox */ -moz-osx-font-smoothing: grayscale; - /* @deprecation --mod-line-height-100 has been renamed and will be removed in a future version. */ - line-height: var(--mod-button-line-height, var(--mod-line-height-100, var(--spectrum-line-height-100))); + line-height: var(--mod-button-line-height, var(--spectrum-line-height-100)); text-decoration: none; /* Remove the inheritance of text transform on button in Edge, Firefox, and IE. */ text-transform: none; - /* Adjacent buttons should be aligned correctly */ - vertical-align: top; - /* stylelint-disable-next-line property-no-vendor-prefix -- Correct the inability to style clickable types in iOS and Safari (normalize). */ -webkit-appearance: button; - border-style: solid; - transition: - background var(--mod-button-animation-duration, var(--mod-animation-duration-100, var(--spectrum-animation-duration-100))) ease-out, - border-color var(--mod-button-animation-duration, var(--mod-animation-duration-100, var(--spectrum-animation-duration-100))) ease-out, - color var(--mod-button-animation-duration, var(--mod-animation-duration-100, var(--spectrum-animation-duration-100))) ease-out, - box-shadow var(--mod-button-animation-duration, var(--mod-animation-duration-100, var(--spectrum-animation-duration-100))) ease-out; + background var(--mod-button-animation-duration, var(--spectrum-animation-duration-100)) ease-out, + border-color var(--mod-button-animation-duration, var(--spectrum-animation-duration-100)) ease-out, + color var(--mod-button-animation-duration, var(--spectrum-animation-duration-100)) ease-out, + box-shadow var(--mod-button-animation-duration, var(--spectrum-animation-duration-100)) ease-out; /* Fix Firefox */ &::-moz-focus-inner { - border-style: none; + margin-block-start: -2px; + margin-block-end: -2px; padding: 0; + border: 0; + + /* Remove the inner border and padding for button in Firefox. */ + border-style: none; } &:focus { @@ -90,12 +91,11 @@ inset-inline-end: 0; display: block; - - margin: calc(-1 * var(--mod-button-focus-indicator-gap, var(--spectrum-focus-indicator-gap))); + margin: calc(var(--mod-button-focus-indicator-gap, var(--spectrum-focus-indicator-gap)) * -1); transition: - opacity var(--mod-button-animation-duration, var(--mod-button-animation-duration, var(--spectrum-animation-duration-100))) ease-out, - margin var(--mod-button-animation-duration, var(--mod-button-animation-duration, var(--spectrum-animation-duration-100))) ease-out; + opacity var(--mod-button-animation-duration, var(--spectrum-animation-duration-100)) ease-out, + margin var(--mod-button-animation-duration, var(--spectrum-animation-duration-100)) ease-out; } &:focus-visible::after { diff --git a/components/contextualhelp/dist/metadata.json b/components/contextualhelp/dist/metadata.json index 4f7dbd58c5b..8711f77b47f 100644 --- a/components/contextualhelp/dist/metadata.json +++ b/components/contextualhelp/dist/metadata.json @@ -31,7 +31,6 @@ "--spectrum-spacing-300", "--spectrum-spacing-400" ], - "system-theme": [], "passthroughs": [], "high-contrast": [ "--highcontrast-contextual-help-body-color", diff --git a/components/datepicker/dist/metadata.json b/components/datepicker/dist/metadata.json index f52f1b93cd6..cf8fffe86db 100644 --- a/components/datepicker/dist/metadata.json +++ b/components/datepicker/dist/metadata.json @@ -140,7 +140,6 @@ "--spectrum-text-to-visual-100", "--spectrum-workflow-icon-size-100" ], - "system-theme": ["--system-date-picker-initial-height"], "passthroughs": [ "--mod-picker-button-background-color", "--mod-picker-button-background-color-hover-disabled", diff --git a/components/datepicker/index.css b/components/datepicker/index.css index 7b20a28ae6b..6a5554d320e 100644 --- a/components/datepicker/index.css +++ b/components/datepicker/index.css @@ -11,9 +11,9 @@ * governing permissions and limitations under the License. */ -@import "./themes/spectrum-two.css"; - .spectrum-DatePicker { + --spectrum-datepicker-initial-height: var(--spectrum-component-height-100); + --spectrum-datepicker-border-radius: var(--mod-datepicker-border-radius, var(--spectrum-corner-radius-100)); --spectrum-datepicker-border-radius-quiet: var(--mod-datepicker-border-radius-quiet, 0); --spectrum-datepicker-border-width: var(--spectrum-border-width-100); diff --git a/components/datepicker/stories/template.js b/components/datepicker/stories/template.js index 2d56102d24e..eebb928df80 100644 --- a/components/datepicker/stories/template.js +++ b/components/datepicker/stories/template.js @@ -9,9 +9,6 @@ import { classMap } from "lit/directives/class-map.js"; import { ifDefined } from "lit/directives/if-defined.js"; import "../index.css"; -import "../themes/spectrum.css"; -/* Must be imported last */ -import "../themes/express.css"; export const DatePicker = ({ rootClass = "spectrum-DatePicker", diff --git a/components/datepicker/themes/express.css b/components/datepicker/themes/express.css deleted file mode 100644 index ead071e6f18..00000000000 --- a/components/datepicker/themes/express.css +++ /dev/null @@ -1,22 +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. - */ - -/* @combine .spectrum.spectrum--express */ - -@import "./spectrum.css"; - -@container style(--system: express) { - .spectrum-DatePicker { - --spectrum-datepicker-initial-height: var(--spectrum-component-height-75); - } -} diff --git a/components/datepicker/themes/spectrum-two.css b/components/datepicker/themes/spectrum-two.css deleted file mode 100644 index 05b3ca88ae4..00000000000 --- a/components/datepicker/themes/spectrum-two.css +++ /dev/null @@ -1,18 +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. - */ - -@container style(--system: spectrum) { - .spectrum-DatePicker { - --spectrum-datepicker-initial-height: var(--spectrum-component-height-100); - } -} diff --git a/components/datepicker/themes/spectrum.css b/components/datepicker/themes/spectrum.css deleted file mode 100644 index 3d81bc564b5..00000000000 --- a/components/datepicker/themes/spectrum.css +++ /dev/null @@ -1,16 +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. - */ - -/* @combine .spectrum.spectrum--legacy */ - -@import "./spectrum-two.css"; diff --git a/components/dial/dist/metadata.json b/components/dial/dist/metadata.json index cf8d026a3b2..1d91c2bb539 100644 --- a/components/dial/dist/metadata.json +++ b/components/dial/dist/metadata.json @@ -112,10 +112,6 @@ "--spectrum-gray-800", "--spectrum-line-height-200" ], - "system-theme": [ - "--system-dial-background-color-default", - "--system-dial-handle-marker-color-key-focus" - ], "passthroughs": [], "high-contrast": [ "--highcontrast-dial-border-color", diff --git a/components/dial/index.css b/components/dial/index.css index 8aee8cef361..1db955a115f 100644 --- a/components/dial/index.css +++ b/components/dial/index.css @@ -11,9 +11,10 @@ * governing permissions and limitations under the License. */ -@import "./themes/spectrum-two.css"; - .spectrum-Dial { + --spectrum-dial-background-color-default: var(--spectrum-gray-75); + --spectrum-dial-handle-marker-color-key-focus: var(--spectrum-gray-25); + --spectrum-dial-handle-marker-color: var(--spectrum-gray-700); --spectrum-dial-border-color: var(--spectrum-gray-700); diff --git a/components/dial/stories/template.js b/components/dial/stories/template.js index c8f25c2175b..547fb97f661 100644 --- a/components/dial/stories/template.js +++ b/components/dial/stories/template.js @@ -5,9 +5,6 @@ import { ifDefined } from "lit/directives/if-defined.js"; import { when } from "lit/directives/when.js"; import "../index.css"; -import "../themes/spectrum.css"; -/* Must be imported last */ -import "../themes/express.css"; export const Template = ({ rootClass = "spectrum-Dial", diff --git a/components/dial/themes/express.css b/components/dial/themes/express.css deleted file mode 100644 index 9fd550418f2..00000000000 --- a/components/dial/themes/express.css +++ /dev/null @@ -1,16 +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. - */ - -/* @combine .spectrum.spectrum--express */ - -@import "./spectrum.css"; diff --git a/components/dial/themes/spectrum-two.css b/components/dial/themes/spectrum-two.css deleted file mode 100644 index 410196c3916..00000000000 --- a/components/dial/themes/spectrum-two.css +++ /dev/null @@ -1,19 +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. - */ - -@container style(--system: spectrum) { - .spectrum-Dial { - --spectrum-dial-background-color-default: var(--spectrum-gray-75); - --spectrum-dial-handle-marker-color-key-focus: var(--spectrum-gray-25); - } -} diff --git a/components/dial/themes/spectrum.css b/components/dial/themes/spectrum.css deleted file mode 100644 index 24077607a8b..00000000000 --- a/components/dial/themes/spectrum.css +++ /dev/null @@ -1,23 +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. - */ - -/* @combine .spectrum.spectrum--legacy */ - -@import "./spectrum-two.css"; - -@container style(--system: legacy) { - .spectrum-Dial { - --spectrum-dial-background-color-default: var(--spectrum-gray-100); - --spectrum-dial-handle-marker-color-key-focus: var(--spectrum-gray-50); - } -} diff --git a/components/dialog/dist/metadata.json b/components/dialog/dist/metadata.json index 812542da227..101bdebcbd1 100644 --- a/components/dialog/dist/metadata.json +++ b/components/dialog/dist/metadata.json @@ -95,7 +95,6 @@ "--spectrum-spacing-50", "--spectrum-spacing-600" ], - "system-theme": [], "passthroughs": [], "high-contrast": [] } diff --git a/components/divider/dist/metadata.json b/components/divider/dist/metadata.json index a485bf25e3b..15fa0043a7b 100644 --- a/components/divider/dist/metadata.json +++ b/components/divider/dist/metadata.json @@ -42,11 +42,6 @@ "--spectrum-transparent-white-200", "--spectrum-transparent-white-800" ], - "system-theme": [ - "--system-divider-background-color", - "--system-divider-background-color-static-black", - "--system-divider-background-color-static-white" - ], "passthroughs": [], "high-contrast": ["--highcontrast-divider-background-color"] } diff --git a/components/divider/index.css b/components/divider/index.css index 188aeea7ecf..0e01578eed1 100644 --- a/components/divider/index.css +++ b/components/divider/index.css @@ -11,8 +11,6 @@ * governing permissions and limitations under the License. */ -@import "./themes/spectrum-two.css"; - /* windows high contrast mode */ @media (forced-colors: active) { .spectrum-Divider { @@ -21,6 +19,15 @@ } .spectrum-Divider { + /* background colors */ + --spectrum-divider-background-color: var(--spectrum-gray-200); + + /* static white background colors */ + --spectrum-divider-background-color-static-white: var(--spectrum-transparent-white-200); + + /* static black background colors */ + --spectrum-divider-background-color-static-black: var(--spectrum-transparent-black-200); + --spectrum-divider-thickness: var(--spectrum-divider-thickness-medium); } diff --git a/components/divider/stories/template.js b/components/divider/stories/template.js index ac2ffa2a4c1..cd3d9bc1a64 100644 --- a/components/divider/stories/template.js +++ b/components/divider/stories/template.js @@ -4,9 +4,6 @@ import { styleMap } from "lit/directives/style-map.js"; import { capitalize, upperCase } from "lodash-es"; import "../index.css"; -import "../themes/spectrum.css"; -/* Must be imported last */ -import "../themes/express.css"; export const Template = ({ rootClass = "spectrum-Divider", diff --git a/components/divider/themes/express.css b/components/divider/themes/express.css deleted file mode 100644 index 9fd550418f2..00000000000 --- a/components/divider/themes/express.css +++ /dev/null @@ -1,16 +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. - */ - -/* @combine .spectrum.spectrum--express */ - -@import "./spectrum.css"; diff --git a/components/divider/themes/spectrum-two.css b/components/divider/themes/spectrum-two.css deleted file mode 100644 index 58f8de9a767..00000000000 --- a/components/divider/themes/spectrum-two.css +++ /dev/null @@ -1,25 +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. - */ - -@container style(--system: spectrum) { - .spectrum-Divider { - /* background colors */ - --spectrum-divider-background-color: var(--spectrum-gray-200); - - /* static white background colors */ - --spectrum-divider-background-color-static-white: var(--spectrum-transparent-white-200); - - /* static black background colors */ - --spectrum-divider-background-color-static-black: var(--spectrum-transparent-black-200); - } -} diff --git a/components/divider/themes/spectrum.css b/components/divider/themes/spectrum.css deleted file mode 100644 index ecfe3f3a46a..00000000000 --- a/components/divider/themes/spectrum.css +++ /dev/null @@ -1,29 +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. - */ - -/* @combine .spectrum.spectrum--legacy */ - -@import "./spectrum-two.css"; - -@container style(--system: legacy) { - .spectrum-Divider { - /* background colors */ - --spectrum-divider-background-color: var(--spectrum-gray-300); - - /* static white background colors */ - --spectrum-divider-background-color-static-white: var(--spectrum-transparent-white-300); - - /* static black background colors */ - --spectrum-divider-background-color-static-black: var(--spectrum-transparent-black-300); - } -} diff --git a/components/dropindicator/dist/metadata.json b/components/dropindicator/dist/metadata.json index dd3a7a50810..294d6ad70bb 100644 --- a/components/dropindicator/dist/metadata.json +++ b/components/dropindicator/dist/metadata.json @@ -23,7 +23,6 @@ "--spectrum-dropindicator-color" ], "global": ["--spectrum-border-width-200"], - "system-theme": [], "passthroughs": [], "high-contrast": ["--highcontrast-dropindicator-color"] } diff --git a/components/dropzone/dist/metadata.json b/components/dropzone/dist/metadata.json index 3044ecfc906..96f850663e7 100644 --- a/components/dropzone/dist/metadata.json +++ b/components/dropzone/dist/metadata.json @@ -100,7 +100,6 @@ "--spectrum-spacing-75", "--spectrum-white" ], - "system-theme": ["--system-drop-zone-border-color"], "passthroughs": [ "--mod-actionbutton-edge-to-text", "--mod-actionbutton-font-size", diff --git a/components/dropzone/index.css b/components/dropzone/index.css index 2b3fbefe0c7..768ee1dd1f6 100644 --- a/components/dropzone/index.css +++ b/components/dropzone/index.css @@ -11,9 +11,9 @@ * governing permissions and limitations under the License. */ -@import "./themes/spectrum-two.css"; - .spectrum-DropZone { + --spectrum-drop-zone-border-color: var(--spectrum-gray-200); + --spectrum-drop-zone-border-width: var(--spectrum-border-width-200); --spectrum-drop-zone-background-color: var(--spectrum-drop-zone-background-color-rgb); --spectrum-drop-zone-border-color-hover: var(--spectrum-accent-visual-color); diff --git a/components/dropzone/stories/template.js b/components/dropzone/stories/template.js index 9eb2dfface7..3363790eccc 100644 --- a/components/dropzone/stories/template.js +++ b/components/dropzone/stories/template.js @@ -7,9 +7,6 @@ import { ifDefined } from "lit/directives/if-defined.js"; import { styleMap } from "lit/directives/style-map.js"; import "../index.css"; -import "../themes/spectrum.css"; -/* Must be imported last */ -import "../themes/express.css"; export const Template = ({ rootClass = "spectrum-DropZone", diff --git a/components/dropzone/themes/express.css b/components/dropzone/themes/express.css deleted file mode 100644 index 9fd550418f2..00000000000 --- a/components/dropzone/themes/express.css +++ /dev/null @@ -1,16 +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. - */ - -/* @combine .spectrum.spectrum--express */ - -@import "./spectrum.css"; diff --git a/components/dropzone/themes/spectrum-two.css b/components/dropzone/themes/spectrum-two.css deleted file mode 100644 index cf71b766c33..00000000000 --- a/components/dropzone/themes/spectrum-two.css +++ /dev/null @@ -1,18 +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. - */ - -@container style(--system: spectrum) { - .spectrum-DropZone { - --spectrum-drop-zone-border-color: var(--spectrum-gray-200); - } -} diff --git a/components/dropzone/themes/spectrum.css b/components/dropzone/themes/spectrum.css deleted file mode 100644 index 0760508568f..00000000000 --- a/components/dropzone/themes/spectrum.css +++ /dev/null @@ -1,22 +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. - */ - -/* @combine .spectrum.spectrum--legacy */ - -@import "./spectrum-two.css"; - -@container style(--system: legacy) { - .spectrum-DropZone { - --spectrum-drop-zone-border-color: var(--spectrum-gray-300); - } -} diff --git a/components/fieldgroup/dist/metadata.json b/components/fieldgroup/dist/metadata.json index c8875b9d3a9..3c2343b1019 100644 --- a/components/fieldgroup/dist/metadata.json +++ b/components/fieldgroup/dist/metadata.json @@ -13,7 +13,6 @@ "modifiers": [], "component": [], "global": ["--spectrum-spacing-300"], - "system-theme": [], "passthroughs": [], "high-contrast": [] } diff --git a/components/fieldlabel/dist/metadata.json b/components/fieldlabel/dist/metadata.json index cc26c19a022..0aec1706f24 100644 --- a/components/fieldlabel/dist/metadata.json +++ b/components/fieldlabel/dist/metadata.json @@ -75,7 +75,6 @@ "--spectrum-spacing-100", "--spectrum-spacing-200" ], - "system-theme": [], "passthroughs": [], "high-contrast": ["--highcontrast-field-label-content-color"] } diff --git a/components/floatingactionbutton/dist/metadata.json b/components/floatingactionbutton/dist/metadata.json index 7daf062a329..0ddd22d190a 100644 --- a/components/floatingactionbutton/dist/metadata.json +++ b/components/floatingactionbutton/dist/metadata.json @@ -72,7 +72,6 @@ "--spectrum-white", "--spectrum-workflow-icon-size-200" ], - "system-theme": [], "passthroughs": [], "high-contrast": [ "--highcontrast-floating-action-button-background-color", diff --git a/components/form/dist/metadata.json b/components/form/dist/metadata.json index 88655f8edd3..c07dfdca8d9 100644 --- a/components/form/dist/metadata.json +++ b/components/form/dist/metadata.json @@ -31,7 +31,6 @@ "--spectrum-spacing-200", "--spectrum-spacing-300" ], - "system-theme": [], "passthroughs": [], "high-contrast": ["--highcontrast-form-item-disabled-content-color"] } diff --git a/components/helptext/dist/metadata.json b/components/helptext/dist/metadata.json index f730c33a671..5eab153c21a 100644 --- a/components/helptext/dist/metadata.json +++ b/components/helptext/dist/metadata.json @@ -77,7 +77,6 @@ "--spectrum-workflow-icon-size-300", "--spectrum-workflow-icon-size-75" ], - "system-theme": [], "passthroughs": [], "high-contrast": [ "--highcontrast-helptext-content-color-default", diff --git a/components/icon/dist/metadata.json b/components/icon/dist/metadata.json index 7f5d27e3789..590503e05b8 100644 --- a/components/icon/dist/metadata.json +++ b/components/icon/dist/metadata.json @@ -170,7 +170,6 @@ "--spectrum-workflow-icon-size-xxl", "--spectrum-workflow-icon-size-xxs" ], - "system-theme": [], "passthroughs": [], "high-contrast": [] } diff --git a/components/illustratedmessage/dist/metadata.json b/components/illustratedmessage/dist/metadata.json index 24de798ac33..313c6d71885 100644 --- a/components/illustratedmessage/dist/metadata.json +++ b/components/illustratedmessage/dist/metadata.json @@ -76,7 +76,6 @@ "--spectrum-spacing-400", "--spectrum-spacing-75" ], - "system-theme": [], "passthroughs": [], "high-contrast": [ "--highcontrast-illustrated-message-illustration-accent-color", diff --git a/components/infieldbutton/dist/metadata.json b/components/infieldbutton/dist/metadata.json index 563089a4065..f280498caf3 100644 --- a/components/infieldbutton/dist/metadata.json +++ b/components/infieldbutton/dist/metadata.json @@ -138,19 +138,6 @@ "--spectrum-neutral-content-color-hover", "--spectrum-neutral-content-color-key-focus" ], - "system-theme": [ - "--system-infield-button-background-color", - "--system-infield-button-background-color-down", - "--system-infield-button-background-color-hover", - "--system-infield-button-background-color-key-focus", - "--system-infield-button-border-color", - "--system-infield-button-border-radius", - "--system-infield-button-border-radius-reset", - "--system-infield-button-border-width", - "--system-infield-button-disabled-border-color", - "--system-infield-button-stacked-bottom-border-radius-end-start", - "--system-infield-button-stacked-top-border-radius-start-start" - ], "passthroughs": [], "high-contrast": [ "--highcontrast-infield-button-border-color", diff --git a/components/infieldbutton/index.css b/components/infieldbutton/index.css index cf9c6458cc1..858845b4e21 100644 --- a/components/infieldbutton/index.css +++ b/components/infieldbutton/index.css @@ -11,9 +11,22 @@ * governing permissions and limitations under the License. */ -@import "./themes/spectrum-two.css"; - .spectrum-InfieldButton { + --spectrum-infield-button-border-width: var(--spectrum-border-width-100); + --spectrum-infield-button-border-color: inherit; + + --spectrum-infield-button-border-radius: var(--spectrum-corner-radius-100); + --spectrum-infield-button-border-radius-reset: 0; + + /* Have to call these out specifically due to Express differences */ + --spectrum-infield-button-stacked-top-border-radius-start-start: var(--spectrum-infield-button-border-radius-reset); + --spectrum-infield-button-stacked-bottom-border-radius-end-start: var(--spectrum-infield-button-border-radius-reset); + + --spectrum-infield-button-background-color: var(--spectrum-gray-100); + --spectrum-infield-button-background-color-hover: var(--spectrum-gray-200); + --spectrum-infield-button-background-color-down: var(--spectrum-gray-200); + --spectrum-infield-button-background-color-key-focus: var(--spectrum-gray-200); + /* Medium size is the default */ --spectrum-infield-button-height: var(--spectrum-component-height-100); --spectrum-infield-button-width: var(--spectrum-component-height-100); @@ -33,12 +46,22 @@ --spectrum-infield-button-fill-justify-content: center; + --spectrum-infield-button-border-width: var(--spectrum-border-width-100); + --spectrum-infield-button-border-color: inherit; + + --spectrum-infield-button-border-radius: var(--spectrum-corner-radius-100); + --spectrum-infield-button-border-radius-reset: 0; + + /* Have to call these out specifically due to Express differences */ + --spectrum-infield-button-stacked-top-border-radius-start-start: var(--spectrum-infield-button-border-radius-reset); + --spectrum-infield-button-stacked-bottom-border-radius-end-start: var(--spectrum-infield-button-border-radius-reset); + &:disabled { --mod-infield-button-background-color: var(--mod-infield-button-background-color-disabled, var(--spectrum-disabled-background-color)); --mod-infield-button-background-color-hover: var(--mod-infield-button-background-color-hover-disabled, var(--spectrum-disabled-background-color)); --mod-infield-button-background-color-down: var(--mod-infield-button-background-color-down-disabled, var(--spectrum-disabled-background-color)); - --mod-infield-button-border-color: var(--mod-infield-button-border-color-disabled, var(--spectrum-infield-button-border-color)); + --mod-infield-button-border-color: var(--mod-infield-button-border-color-disabled, var(--spectrum-gray-300)); --mod-infield-button-icon-color: var(--mod-infield-button-icon-color-disabled, var(--spectrum-disabled-content-color)); --mod-infield-button-icon-color-hover: var(--mod-infield-button-icon-color-hover-disabled, var(--spectrum-disabled-content-color)); diff --git a/components/infieldbutton/stories/template.js b/components/infieldbutton/stories/template.js index 7f0b4ee8db1..5cc77d42045 100644 --- a/components/infieldbutton/stories/template.js +++ b/components/infieldbutton/stories/template.js @@ -4,9 +4,6 @@ import { classMap } from "lit/directives/class-map.js"; import { when } from "lit/directives/when.js"; import "../index.css"; -import "../themes/spectrum.css"; -/* Must be imported last */ -import "../themes/express.css"; export const Template = ( { diff --git a/components/infieldbutton/themes/express.css b/components/infieldbutton/themes/express.css deleted file mode 100644 index 1d930d4cfee..00000000000 --- a/components/infieldbutton/themes/express.css +++ /dev/null @@ -1,34 +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. - */ - -/* @combine .spectrum.spectrum--express */ - -@import "./spectrum.css"; - -@container style(--system: express) { - .spectrum-InfieldButton { - --spectrum-infield-button-border-width: 0; - --spectrum-infield-button-border-color: transparent; - - --spectrum-infield-button-border-radius: var(--spectrum-corner-radius-75); - --spectrum-infield-button-border-radius-reset: var(--spectrum-corner-radius-75); - - --spectrum-infield-button-stacked-top-border-radius-start-start: var(--spectrum-corner-radius-75); - --spectrum-infield-button-stacked-bottom-border-radius-end-start: var(--spectrum-corner-radius-75); - - --spectrum-infield-button-background-color: var(--spectrum-gray-200); - --spectrum-infield-button-background-color-hover: var(--spectrum-gray-300); - --spectrum-infield-button-background-color-down: var(--spectrum-gray-400); - --spectrum-infield-button-background-color-key-focus: var(--spectrum-gray-300); - } -} diff --git a/components/infieldbutton/themes/spectrum-two.css b/components/infieldbutton/themes/spectrum-two.css deleted file mode 100644 index ec2307ef3a4..00000000000 --- a/components/infieldbutton/themes/spectrum-two.css +++ /dev/null @@ -1,35 +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. - */ - -@container style(--system: spectrum) { - .spectrum-InfieldButton { - --spectrum-infield-button-border-width: var(--spectrum-border-width-100); - --spectrum-infield-button-border-color: inherit; - - --spectrum-infield-button-border-radius: var(--spectrum-corner-radius-100); - --spectrum-infield-button-border-radius-reset: 0; - - /* Have to call these out specifically due to Express differences */ - --spectrum-infield-button-stacked-top-border-radius-start-start: var(--spectrum-infield-button-border-radius-reset); - --spectrum-infield-button-stacked-bottom-border-radius-end-start: var(--spectrum-infield-button-border-radius-reset); - - --spectrum-infield-button-background-color: var(--spectrum-gray-100); - --spectrum-infield-button-background-color-hover: var(--spectrum-gray-200); - --spectrum-infield-button-background-color-down: var(--spectrum-gray-200); - --spectrum-infield-button-background-color-key-focus: var(--spectrum-gray-200); - - &:disabled { - --spectrum-infield-button-border-color: var(--spectrum-gray-300); - } - } -} diff --git a/components/infieldbutton/themes/spectrum.css b/components/infieldbutton/themes/spectrum.css deleted file mode 100644 index 93ae76972e5..00000000000 --- a/components/infieldbutton/themes/spectrum.css +++ /dev/null @@ -1,29 +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. - */ - -/* @combine .spectrum.spectrum--legacy */ - -@import "./spectrum-two.css"; - -@container style(--system: legacy) { - .spectrum-InfieldButton { - --spectrum-infield-button-background-color: var(--spectrum-gray-75); - --spectrum-infield-button-background-color-hover: var(--spectrum-gray-200); - --spectrum-infield-button-background-color-down: var(--spectrum-gray-300); - --spectrum-infield-button-background-color-key-focus: var(--spectrum-gray-200); - - &:disabled { - --spectrum-infield-button-border-color: var(--spectrum-gray-200); - } - } -} diff --git a/components/inlinealert/dist/metadata.json b/components/inlinealert/dist/metadata.json index 935c89f08a3..bd5894d28c9 100644 --- a/components/inlinealert/dist/metadata.json +++ b/components/inlinealert/dist/metadata.json @@ -98,7 +98,6 @@ "--spectrum-spacing-400", "--spectrum-workflow-icon-size-100" ], - "system-theme": [], "passthroughs": [], "high-contrast": [ "--highcontrast-inlinealert-background-color", diff --git a/components/link/dist/metadata.json b/components/link/dist/metadata.json index 9befaceefc4..ad90df33840 100644 --- a/components/link/dist/metadata.json +++ b/components/link/dist/metadata.json @@ -42,7 +42,6 @@ "--spectrum-neutral-content-color-key-focus", "--spectrum-white" ], - "system-theme": [], "passthroughs": [], "high-contrast": ["--highcontrast-link-text-color"] } diff --git a/components/logicbutton/dist/metadata.json b/components/logicbutton/dist/metadata.json index 6adfbf58b24..195d8c87082 100644 --- a/components/logicbutton/dist/metadata.json +++ b/components/logicbutton/dist/metadata.json @@ -15,9 +15,7 @@ ".spectrum-LogicButton:focus-visible:after" ], "modifiers": [ - "--mod-animation-duration-100", "--mod-focus-indicator-gap", - "--mod-line-height-100", "--mod-logic-button-and-background-color", "--mod-logic-button-and-background-color-disabled", "--mod-logic-button-and-background-color-hover", @@ -46,8 +44,7 @@ "--mod-logic-button-or-border-color-hover-disabled", "--mod-logic-button-or-text-color", "--mod-logic-button-or-text-color-disabled", - "--mod-logic-button-padding", - "--mod-sans-font-family-stack" + "--mod-logic-button-padding" ], "component": [ "--spectrum-logic-button-and-background-color", @@ -88,16 +85,6 @@ "--spectrum-sans-font-family-stack", "--spectrum-white" ], - "system-theme": [ - "--system-logic-button-and-background-color-disabled", - "--system-logic-button-and-background-color-hover-disabled", - "--system-logic-button-and-border-color-disabled", - "--system-logic-button-and-border-color-hover-disabled", - "--system-logic-button-or-background-color-disabled", - "--system-logic-button-or-background-color-hover-disabled", - "--system-logic-button-or-border-color-disabled", - "--system-logic-button-or-border-color-hover-disabled" - ], "passthroughs": [ "--mod-button-animation-duration", "--mod-button-focus-indicator-gap", diff --git a/components/logicbutton/index.css b/components/logicbutton/index.css index 4429907705b..53984da575c 100644 --- a/components/logicbutton/index.css +++ b/components/logicbutton/index.css @@ -12,9 +12,18 @@ */ @import "@spectrum-css/commons/basebutton.css"; -@import "./themes/spectrum-two.css"; .spectrum-LogicButton { + --spectrum-logic-button-and-background-color-disabled: var(--spectrum-gray-100); + --spectrum-logic-button-and-border-color-disabled: var(--spectrum-gray-100); + --spectrum-logic-button-and-background-color-hover-disabled: var(--spectrum-gray-100); + --spectrum-logic-button-and-border-color-hover-disabled: var(--spectrum-gray-100); + + --spectrum-logic-button-or-background-color-disabled: var(--spectrum-gray-100); + --spectrum-logic-button-or-border-color-disabled: var(--spectrum-gray-100); + --spectrum-logic-button-or-background-color-hover-disabled: var(--spectrum-gray-100); + --spectrum-logic-button-or-border-color-hover-disabled: var(--spectrum-gray-100); + --spectrum-logic-button-border-radius: var(--spectrum-corner-radius-100); --spectrum-logic-button-and-text-color: var(--spectrum-white); @@ -23,7 +32,9 @@ --spectrum-logic-button-or-text-color: var(--spectrum-white); --spectrum-logic-button-text-color-disabled: var(--spectrum-gray-500); +} +.spectrum-LogicButton { @extend %spectrum-BaseButton; @extend %spectrum-ButtonWithFocusRing; diff --git a/components/logicbutton/stories/template.js b/components/logicbutton/stories/template.js index 5b0730616ef..02f5b3aa028 100644 --- a/components/logicbutton/stories/template.js +++ b/components/logicbutton/stories/template.js @@ -2,9 +2,6 @@ import { html } from "lit"; import { classMap } from "lit/directives/class-map.js"; import "../index.css"; -import "../themes/spectrum.css"; -/* Must be imported last */ -import "../themes/express.css"; export const Template = ({ rootClass = "spectrum-LogicButton", diff --git a/components/logicbutton/themes/express.css b/components/logicbutton/themes/express.css deleted file mode 100644 index 9fd550418f2..00000000000 --- a/components/logicbutton/themes/express.css +++ /dev/null @@ -1,16 +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. - */ - -/* @combine .spectrum.spectrum--express */ - -@import "./spectrum.css"; diff --git a/components/logicbutton/themes/spectrum-two.css b/components/logicbutton/themes/spectrum-two.css deleted file mode 100644 index c0bd0d1b3fb..00000000000 --- a/components/logicbutton/themes/spectrum-two.css +++ /dev/null @@ -1,26 +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. - */ - -@container style(--system: spectrum) { - .spectrum-LogicButton { - --spectrum-logic-button-and-background-color-disabled: var(--spectrum-gray-100); - --spectrum-logic-button-and-border-color-disabled: var(--spectrum-gray-100); - --spectrum-logic-button-and-background-color-hover-disabled: var(--spectrum-gray-100); - --spectrum-logic-button-and-border-color-hover-disabled: var(--spectrum-gray-100); - - --spectrum-logic-button-or-background-color-disabled: var(--spectrum-gray-100); - --spectrum-logic-button-or-border-color-disabled: var(--spectrum-gray-100); - --spectrum-logic-button-or-background-color-hover-disabled: var(--spectrum-gray-100); - --spectrum-logic-button-or-border-color-hover-disabled: var(--spectrum-gray-100); - } -} diff --git a/components/logicbutton/themes/spectrum.css b/components/logicbutton/themes/spectrum.css deleted file mode 100644 index 4aa43a01048..00000000000 --- a/components/logicbutton/themes/spectrum.css +++ /dev/null @@ -1,30 +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. - */ - -/* @combine .spectrum.spectrum--legacy */ - -@import "./spectrum-two.css"; - -@container style(--system: legacy) { - .spectrum-LogicButton { - --spectrum-logic-button-and-background-color-disabled: var(--spectrum-gray-200); - --spectrum-logic-button-and-border-color-disabled: var(--spectrum-gray-200); - --spectrum-logic-button-and-background-color-hover-disabled: var(--spectrum-gray-200); - --spectrum-logic-button-and-border-color-hover-disabled: var(--spectrum-gray-200); - - --spectrum-logic-button-or-background-color-disabled: var(--spectrum-gray-200); - --spectrum-logic-button-or-border-color-disabled: var(--spectrum-gray-200); - --spectrum-logic-button-or-background-color-hover-disabled: var(--spectrum-gray-200); - --spectrum-logic-button-or-border-color-hover-disabled: var(--spectrum-gray-200); - } -} diff --git a/components/menu/dist/metadata.json b/components/menu/dist/metadata.json index 5142e09aa66..e86959dc521 100644 --- a/components/menu/dist/metadata.json +++ b/components/menu/dist/metadata.json @@ -134,9 +134,7 @@ ".spectrum-Menu:dir(rtl)", ".spectrum-Menu:lang(ja)", ".spectrum-Menu:lang(ko)", - ".spectrum-Menu:lang(zh)", - "[dir=\"rtl\"] .spectrum-Menu", - "[dir=\"rtl\"] .spectrum-Menu .spectrum-Menu-chevron" + ".spectrum-Menu:lang(zh)" ], "modifiers": [ "--mod-menu-back-heading-color", @@ -378,16 +376,6 @@ "--spectrum-workflow-icon-size-300", "--spectrum-workflow-icon-size-75" ], - "system-theme": [ - "--system-menu-item-background-color-down", - "--system-menu-item-background-color-hover", - "--system-menu-item-background-color-key-focus", - "--system-menu-item-corner-radius", - "--system-menu-item-focus-indicator-offset", - "--system-menu-item-focus-indicator-outline-style", - "--system-menu-item-focus-indicator-shadow", - "--system-menu-item-spacing-multiplier" - ], "passthroughs": [ "--mod-checkbox-text-to-control", "--mod-checkbox-top-to-text", diff --git a/components/menu/index.css b/components/menu/index.css index 3d48ce76499..4055911de78 100644 --- a/components/menu/index.css +++ b/components/menu/index.css @@ -11,8 +11,6 @@ * governing permissions and limitations under the License. */ -@import "./themes/spectrum-two.css"; - @media (forced-colors: active) { .spectrum-Menu { --highcontrast-menu-item-background-color-default: ButtonFace; @@ -81,6 +79,18 @@ } .spectrum-Menu { + --spectrum-menu-item-background-color-hover: rgba(var(--spectrum-gray-1000-rgb), var(--spectrum-transparent-black-200-opacity)); + --spectrum-menu-item-background-color-down: rgba(var(--spectrum-gray-1000-rgb), var(--spectrum-transparent-black-200-opacity)); + --spectrum-menu-item-background-color-key-focus: rgba(var(--spectrum-gray-1000-rgb), var(--spectrum-transparent-black-200-opacity)); + + --spectrum-menu-item-corner-radius: var(--spectrum-corner-radius-100); + + /* Focus state styling */ + --spectrum-menu-item-focus-indicator-shadow: none; + --spectrum-menu-item-focus-indicator-offset: var(--spectrum-spacing-50); + --spectrum-menu-item-spacing-multiplier: 1; + --spectrum-menu-item-focus-indicator-outline-style: solid; + --spectrum-menu-item-top-to-action: var(--spectrum-spacing-50); --spectrum-menu-item-top-to-checkbox: var(--spectrum-spacing-50); diff --git a/components/menu/stories/template.js b/components/menu/stories/template.js index c50482cb696..79c4136fdad 100644 --- a/components/menu/stories/template.js +++ b/components/menu/stories/template.js @@ -13,9 +13,6 @@ import { styleMap } from "lit/directives/style-map.js"; import { when } from "lit/directives/when.js"; import "../index.css"; -import "../themes/spectrum.css"; -/* Must be imported last */ -import "../themes/express.css"; /** * Get the tray submenu back arrow name with scale number (defined in design spec). diff --git a/components/menu/themes/express.css b/components/menu/themes/express.css deleted file mode 100644 index 9fd550418f2..00000000000 --- a/components/menu/themes/express.css +++ /dev/null @@ -1,16 +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. - */ - -/* @combine .spectrum.spectrum--express */ - -@import "./spectrum.css"; diff --git a/components/menu/themes/spectrum-two.css b/components/menu/themes/spectrum-two.css deleted file mode 100644 index 11951a42550..00000000000 --- a/components/menu/themes/spectrum-two.css +++ /dev/null @@ -1,28 +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. - */ - -@container style(--system: spectrum) { - .spectrum-Menu { - --spectrum-menu-item-background-color-hover: rgba(var(--spectrum-gray-1000-rgb), var(--spectrum-transparent-black-200-opacity)); - --spectrum-menu-item-background-color-down: rgba(var(--spectrum-gray-1000-rgb), var(--spectrum-transparent-black-200-opacity)); - --spectrum-menu-item-background-color-key-focus: rgba(var(--spectrum-gray-1000-rgb), var(--spectrum-transparent-black-200-opacity)); - - --spectrum-menu-item-corner-radius: var(--spectrum-corner-radius-100); - - /* Focus state styling */ - --spectrum-menu-item-focus-indicator-shadow: none; - --spectrum-menu-item-focus-indicator-offset: var(--spectrum-spacing-50); - --spectrum-menu-item-spacing-multiplier: 1; - --spectrum-menu-item-focus-indicator-outline-style: solid; - } -} diff --git a/components/menu/themes/spectrum.css b/components/menu/themes/spectrum.css deleted file mode 100644 index 0836ce0774f..00000000000 --- a/components/menu/themes/spectrum.css +++ /dev/null @@ -1,32 +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. - */ - -/* @combine .spectrum.spectrum--legacy */ - -@import "./spectrum-two.css"; - -@container style(--system: legacy) { - .spectrum-Menu { - --spectrum-menu-item-background-color-hover: rgba(var(--spectrum-gray-900-rgb), var(--spectrum-transparent-black-200-opacity)); - --spectrum-menu-item-background-color-down: rgba(var(--spectrum-gray-900-rgb), var(--spectrum-transparent-black-200-opacity)); - --spectrum-menu-item-background-color-key-focus: rgba(var(--spectrum-gray-900-rgb), var(--spectrum-transparent-black-200-opacity)); - - --spectrum-menu-item-corner-radius: 0; - - /* Focus state styling */ - --spectrum-menu-item-focus-indicator-shadow: inset; - --spectrum-menu-item-focus-indicator-offset: 0; - --spectrum-menu-item-spacing-multiplier: 0; - --spectrum-menu-item-focus-indicator-outline-style: none; - } -} diff --git a/components/meter/dist/metadata.json b/components/meter/dist/metadata.json index 9bfe3424ce7..fbf343ed946 100644 --- a/components/meter/dist/metadata.json +++ b/components/meter/dist/metadata.json @@ -29,7 +29,6 @@ "--spectrum-notice-visual-color", "--spectrum-positive-visual-color" ], - "system-theme": [], "passthroughs": [ "--mod-progressbar-fill-color", "--mod-progressbar-font-size", diff --git a/components/miller/dist/metadata.json b/components/miller/dist/metadata.json index adb2109144c..fbb3770d558 100644 --- a/components/miller/dist/metadata.json +++ b/components/miller/dist/metadata.json @@ -13,7 +13,6 @@ ], "component": [], "global": ["--spectrum-spacing-100"], - "system-theme": [], "passthroughs": [], "high-contrast": [] } diff --git a/components/modal/dist/metadata.json b/components/modal/dist/metadata.json index 950d9fca3c6..d4d333cf3ba 100644 --- a/components/modal/dist/metadata.json +++ b/components/modal/dist/metadata.json @@ -46,7 +46,6 @@ "--spectrum-corner-radius-100", "--spectrum-dialog-confirm-entry-animation-distance" ], - "system-theme": ["--system-modal-background-color"], "passthroughs": [], "high-contrast": [] } diff --git a/components/modal/index.css b/components/modal/index.css index 8a5e2e9ad95..edf5cb5f9fb 100644 --- a/components/modal/index.css +++ b/components/modal/index.css @@ -12,20 +12,6 @@ */ @import "@spectrum-css/commons/overlay.css"; -@import "./themes/spectrum-two.css"; - -.spectrum-Modal { - --spectrum-modal-confirm-entry-animation-duration: var(--mod-modal-confirm-entry-animation-duration, var(--spectrum-animation-duration-500)); - /* @deprecated --mod-overlay-animation-duration-opened in favor of --mod-modal-confirm-entry-animation-delay */ - --spectrum-modal-confirm-entry-animation-delay: var(--mod-overlay-animation-duration-opened, var(--mod-modal-confirm-entry-animation-delay, var(--spectrum-animation-duration-200))); - - /* @deprecated --mod-overlay-animation-duration in favor of --mod-modal-confirm-exit-animation-duration */ - --spectrum-modal-confirm-exit-animation-duration: var(--mod-overlay-animation-duration, var(--mod-modal-confirm-exit-animation-duration, var(--spectrum-animation-duration-100))); - --spectrum-modal-confirm-exit-animation-delay: var(--mod-modal-confirm-exit-animation-delay, var(--spectrum-animation-duration-0)); - - /* Distance between top and bottom of modal and edge of window for fullscreen modal */ - --spectrum-modal-fullscreen-margin: var(--mod-modal-fullscreen-margin, 32px); -} /* Used to position the modal */ .spectrum-Modal-wrapper { @@ -68,6 +54,19 @@ } .spectrum-Modal { + --spectrum-modal-background-color: var(--spectrum-background-layer-2-color); + + --spectrum-modal-confirm-entry-animation-duration: var(--mod-modal-confirm-entry-animation-duration, var(--spectrum-animation-duration-500)); + /* @deprecated --mod-overlay-animation-duration-opened in favor of --mod-modal-confirm-entry-animation-delay */ + --spectrum-modal-confirm-entry-animation-delay: var(--mod-overlay-animation-duration-opened, var(--mod-modal-confirm-entry-animation-delay, var(--spectrum-animation-duration-200))); + + /* @deprecated --mod-overlay-animation-duration in favor of --mod-modal-confirm-exit-animation-duration */ + --spectrum-modal-confirm-exit-animation-duration: var(--mod-overlay-animation-duration, var(--mod-modal-confirm-exit-animation-duration, var(--spectrum-animation-duration-100))); + --spectrum-modal-confirm-exit-animation-delay: var(--mod-modal-confirm-exit-animation-delay, var(--spectrum-animation-duration-0)); + + /* Distance between top and bottom of modal and edge of window for fullscreen modal */ + --spectrum-modal-fullscreen-margin: var(--mod-modal-fullscreen-margin, 32px); + visibility: hidden; opacity: 0; diff --git a/components/modal/stories/template.js b/components/modal/stories/template.js index 07a52b89131..9abbf49ebea 100644 --- a/components/modal/stories/template.js +++ b/components/modal/stories/template.js @@ -5,9 +5,6 @@ import { styleMap } from "lit/directives/style-map.js"; import { when } from "lit/directives/when.js"; import "../index.css"; -import "../themes/spectrum.css"; -/* Must be imported last */ -import "../themes/express.css"; /** * Just the modal markup. diff --git a/components/modal/themes/express.css b/components/modal/themes/express.css deleted file mode 100644 index 9fd550418f2..00000000000 --- a/components/modal/themes/express.css +++ /dev/null @@ -1,16 +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. - */ - -/* @combine .spectrum.spectrum--express */ - -@import "./spectrum.css"; diff --git a/components/modal/themes/spectrum-two.css b/components/modal/themes/spectrum-two.css deleted file mode 100644 index c31756dcdae..00000000000 --- a/components/modal/themes/spectrum-two.css +++ /dev/null @@ -1,18 +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. - */ - -@container style(--system: spectrum) { - .spectrum-Modal { - --spectrum-modal-background-color: var(--spectrum-background-layer-2-color); - } -} diff --git a/components/modal/themes/spectrum.css b/components/modal/themes/spectrum.css deleted file mode 100644 index f637e6f343e..00000000000 --- a/components/modal/themes/spectrum.css +++ /dev/null @@ -1,22 +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. - */ - -/* @combine .spectrum.spectrum--legacy */ - -@import "./spectrum-two.css"; - -@container style(--system: legacy) { - .spectrum-Modal { - --spectrum-modal-background-color: var(--spectrum-gray-100); - } -} diff --git a/components/opacitycheckerboard/dist/metadata.json b/components/opacitycheckerboard/dist/metadata.json index 51c1a155873..83e45f13a2b 100644 --- a/components/opacitycheckerboard/dist/metadata.json +++ b/components/opacitycheckerboard/dist/metadata.json @@ -13,7 +13,6 @@ "--spectrum-opacity-checkerboard-square-size" ], "global": [], - "system-theme": [], "passthroughs": [], "high-contrast": [] } diff --git a/components/page/dist/metadata.json b/components/page/dist/metadata.json index cb8c8163de8..a0f8465c060 100644 --- a/components/page/dist/metadata.json +++ b/components/page/dist/metadata.json @@ -1,15 +1,16 @@ { "sourceFile": "index.css", "selectors": [":root"], - "modifiers": ["--mod-page-background", "--mod-page-content-tap-highlight"], - "component": [ - "--spectrum-page-background-color", - "--spectrum-page-content-tap-highlight" + "modifiers": [ + "--mod-page-background", + "--mod-page-content-color", + "--mod-page-content-tap-highlight" ], - "global": ["--spectrum-gray-75", "--spectrum-transparent-black-25"], - "system-theme": [ - "--system-root-page-background-color", - "--system-root-page-content-tap-highlight" + "component": [], + "global": [ + "--spectrum-gray-75", + "--spectrum-neutral-content-color-default", + "--spectrum-transparent-black-25" ], "passthroughs": [], "high-contrast": [] diff --git a/components/page/index.css b/components/page/index.css index 7a29f49a2e2..7f528553e64 100644 --- a/components/page/index.css +++ b/components/page/index.css @@ -11,11 +11,10 @@ * governing permissions and limitations under the License. */ -@import "./themes/spectrum-two.css"; - :root { - background: var(--mod-page-background, var(--spectrum-page-background-color)); + background: var(--mod-page-background, var(--spectrum-gray-75)); + color: var(--mod-page-content-color, var(--spectrum-neutral-content-color-default)); /* The highlight that appears over a link while it's being tapped */ - -webkit-tap-highlight-color: var(--mod-page-content-tap-highlight, var(--spectrum-page-content-tap-highlight)); + -webkit-tap-highlight-color: var(--mod-page-content-tap-highlight, var(--spectrum-transparent-black-25)); } diff --git a/components/page/stories/template.js b/components/page/stories/template.js index 570ca98b244..395f6d48390 100644 --- a/components/page/stories/template.js +++ b/components/page/stories/template.js @@ -2,9 +2,6 @@ import { renderContent } from "@spectrum-css/preview/decorators"; import { html } from "lit"; import "../index.css"; -import "../themes/spectrum.css"; -/* Must be imported last */ -import "../themes/express.css"; export const Template = ({ content = [] } = {}, context = {}) => { return html`${renderContent(content, { context })}`; diff --git a/components/page/themes/express.css b/components/page/themes/express.css deleted file mode 100644 index 9fd550418f2..00000000000 --- a/components/page/themes/express.css +++ /dev/null @@ -1,16 +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. - */ - -/* @combine .spectrum.spectrum--express */ - -@import "./spectrum.css"; diff --git a/components/page/themes/spectrum-two.css b/components/page/themes/spectrum-two.css deleted file mode 100644 index 896ecf506cc..00000000000 --- a/components/page/themes/spectrum-two.css +++ /dev/null @@ -1,19 +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. - */ - -@container style(--system: spectrum) { - :root { - --spectrum-page-background-color: var(--spectrum-gray-75); - --spectrum-page-content-tap-highlight: var(--spectrum-transparent-black-25); - } -} diff --git a/components/page/themes/spectrum.css b/components/page/themes/spectrum.css deleted file mode 100644 index f6c120c2d43..00000000000 --- a/components/page/themes/spectrum.css +++ /dev/null @@ -1,23 +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. - */ - -/* @combine .spectrum.spectrum--legacy */ - -@import "./spectrum-two.css"; - -@container style(--system: legacy) { - :root { - --spectrum-page-background-color: var(--spectrum-gray-100); - --spectrum-page-content-tap-highlight: var(--spectrum-transparent-black-100); - } -} diff --git a/components/pagination/dist/metadata.json b/components/pagination/dist/metadata.json index 7a0b21fe8dd..6c52ad62e8c 100644 --- a/components/pagination/dist/metadata.json +++ b/components/pagination/dist/metadata.json @@ -10,8 +10,7 @@ ".spectrum-Pagination-prevButton", ".spectrum-Pagination-prevButton .spectrum-Icon", ".spectrum-Pagination-textfield", - ".spectrum-Pagination:dir(rtl)", - "[dir=\"rtl\"] .spectrum-Pagination" + ".spectrum-Pagination:dir(rtl)" ], "modifiers": [ "--mod-pagination-counter-color", @@ -34,7 +33,6 @@ "--spectrum-logical-rotation", "--spectrum-neutral-subdued-content-color-default" ], - "system-theme": [], "passthroughs": ["--mod-textfield-min-width", "--mod-textfield-width"], "high-contrast": [] } diff --git a/components/picker/dist/metadata.json b/components/picker/dist/metadata.json index e2c3b4e5c0a..da0bfdc7492 100644 --- a/components/picker/dist/metadata.json +++ b/components/picker/dist/metadata.json @@ -77,8 +77,6 @@ ".spectrum-Picker:hover .spectrum-Picker-menuIcon" ], "modifiers": [ - "--mod-animation-duration-100", - "--mod-line-height-100", "--mod-picker-animation-duration", "--mod-picker-background-color-active", "--mod-picker-background-color-default", @@ -141,8 +139,7 @@ "--mod-picker-spacing-top-to-alert-icon", "--mod-picker-spacing-top-to-disclosure-icon", "--mod-picker-spacing-top-to-progress-circle", - "--mod-picker-spacing-top-to-text", - "--mod-sans-font-family-stack" + "--mod-picker-spacing-top-to-text" ], "component": [ "--spectrum-picker-animation-duration", @@ -304,22 +301,6 @@ "--spectrum-text-to-visual-300", "--spectrum-text-to-visual-75" ], - "system-theme": [ - "--system-picker-background-color-active", - "--system-picker-background-color-default", - "--system-picker-background-color-default-open", - "--system-picker-background-color-hover", - "--system-picker-background-color-hover-open", - "--system-picker-background-color-key-focus", - "--system-picker-border-color-active", - "--system-picker-border-color-default", - "--system-picker-border-color-default-open", - "--system-picker-border-color-disabled", - "--system-picker-border-color-hover", - "--system-picker-border-color-hover-open", - "--system-picker-border-color-key-focus", - "--system-picker-border-width" - ], "passthroughs": [ "--mod-button-animation-duration", "--mod-button-font-family", diff --git a/components/picker/index.css b/components/picker/index.css index e59888c78f5..6bfcf747c05 100644 --- a/components/picker/index.css +++ b/components/picker/index.css @@ -11,10 +11,26 @@ * governing permissions and limitations under the License. */ -@import "./themes/spectrum-two.css"; @import "@spectrum-css/commons/basebutton.css"; .spectrum-Picker { + --spectrum-picker-background-color-default: var(--spectrum-gray-100); + --spectrum-picker-background-color-default-open: var(--spectrum-gray-200); + --spectrum-picker-background-color-hover: var(--spectrum-gray-200); + --spectrum-picker-background-color-hover-open: var(--spectrum-gray-200); + --spectrum-picker-background-color-active: var(--spectrum-gray-200); + --spectrum-picker-background-color-key-focus: var(--spectrum-gray-200); + + --spectrum-picker-border-color-default: var(--spectrum-gray-500); + --spectrum-picker-border-color-default-open: var(--spectrum-gray-800); + --spectrum-picker-border-color-hover: var(--spectrum-gray-600); + --spectrum-picker-border-color-hover-open: var(--spectrum-gray-900); + --spectrum-picker-border-color-active: var(--spectrum-gray-700); + --spectrum-picker-border-color-key-focus: var(--spectrum-gray-900); + --spectrum-picker-border-color-disabled: var(--spectrum-gray-300); + + --spectrum-picker-border-width: var(--spectrum-border-width-100); + /* font */ --spectrum-picker-font-size: var(--spectrum-font-size-100); --spectrum-picker-font-weight: var(--spectrum-regular-font-weight); diff --git a/components/picker/stories/template.js b/components/picker/stories/template.js index 5bce15f0744..4be33a2092f 100644 --- a/components/picker/stories/template.js +++ b/components/picker/stories/template.js @@ -11,9 +11,6 @@ import { styleMap } from "lit/directives/style-map.js"; import { when } from "lit/directives/when.js"; import "../index.css"; -import "../themes/spectrum.css"; -/* Must be imported last */ -import "../themes/express.css"; /** * Template for Picker only (no popover or help text). diff --git a/components/picker/themes/express.css b/components/picker/themes/express.css deleted file mode 100644 index bb521933e6b..00000000000 --- a/components/picker/themes/express.css +++ /dev/null @@ -1,36 +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. - */ - -/* @combine .spectrum.spectrum--express */ - -@import "./spectrum.css"; - -@container style(--system: express) { - .spectrum-Picker { - --spectrum-picker-background-color-default: var(--spectrum-gray-200); - --spectrum-picker-background-color-default-open: var(--spectrum-gray-300); - --spectrum-picker-background-color-hover: var(--spectrum-gray-300); - --spectrum-picker-background-color-hover-open: var(--spectrum-gray-300); - --spectrum-picker-background-color-active: var(--spectrum-gray-400); - --spectrum-picker-background-color-key-focus: var(--spectrum-gray-300); - - --spectrum-picker-border-color-default: transparent; - --spectrum-picker-border-color-default-open: transparent; - --spectrum-picker-border-color-hover: transparent; - --spectrum-picker-border-color-hover-open: transparent; - --spectrum-picker-border-color-active: transparent; - --spectrum-picker-border-color-key-focus: transparent; - - --spectrum-picker-border-width: 0px; - } -} diff --git a/components/picker/themes/spectrum-two.css b/components/picker/themes/spectrum-two.css deleted file mode 100644 index 3be66bfa106..00000000000 --- a/components/picker/themes/spectrum-two.css +++ /dev/null @@ -1,33 +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. - */ - -@container style(--system: spectrum) { - .spectrum-Picker { - --spectrum-picker-background-color-default: var(--spectrum-gray-100); - --spectrum-picker-background-color-default-open: var(--spectrum-gray-200); - --spectrum-picker-background-color-hover: var(--spectrum-gray-200); - --spectrum-picker-background-color-hover-open: var(--spectrum-gray-200); - --spectrum-picker-background-color-active: var(--spectrum-gray-200); - --spectrum-picker-background-color-key-focus: var(--spectrum-gray-200); - - --spectrum-picker-border-color-default: var(--spectrum-gray-500); - --spectrum-picker-border-color-default-open: var(--spectrum-gray-800); - --spectrum-picker-border-color-hover: var(--spectrum-gray-600); - --spectrum-picker-border-color-hover-open: var(--spectrum-gray-900); - --spectrum-picker-border-color-active: var(--spectrum-gray-700); - --spectrum-picker-border-color-key-focus: var(--spectrum-gray-900); - --spectrum-picker-border-color-disabled: var(--spectrum-gray-300); - - --spectrum-picker-border-width: var(--spectrum-border-width-100); - } -} diff --git a/components/picker/themes/spectrum.css b/components/picker/themes/spectrum.css deleted file mode 100644 index 70759b6ea39..00000000000 --- a/components/picker/themes/spectrum.css +++ /dev/null @@ -1,33 +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. - */ - -/* @combine .spectrum.spectrum--legacy */ - -@import "./spectrum-two.css"; - -@container style(--system: legacy) { - .spectrum-Picker { - --spectrum-picker-background-color-default: var(--spectrum-gray-75); - --spectrum-picker-background-color-default-open: var(--spectrum-gray-200); - --spectrum-picker-background-color-active: var(--spectrum-gray-300); - --spectrum-picker-background-color-hover: var(--spectrum-gray-200); - --spectrum-picker-background-color-hover-open: var(--spectrum-gray-200); - --spectrum-picker-background-color-key-focus: var(--spectrum-gray-200); - - --spectrum-picker-border-color-default: var(--spectrum-gray-500); - --spectrum-picker-border-color-default-open: var(--spectrum-gray-500); - --spectrum-picker-border-color-hover-open: var(--spectrum-gray-600); - --spectrum-picker-border-color-key-focus: var(--spectrum-gray-600); - --spectrum-picker-border-color-disabled: transparent; - } -} diff --git a/components/pickerbutton/dist/metadata.json b/components/pickerbutton/dist/metadata.json index 7eb82d7c8c4..e2c3199a479 100644 --- a/components/pickerbutton/dist/metadata.json +++ b/components/pickerbutton/dist/metadata.json @@ -136,18 +136,6 @@ "--spectrum-text-to-visual-300", "--spectrum-text-to-visual-50" ], - "system-theme": [ - "--system-picker-button-background-color", - "--system-picker-button-background-color-down", - "--system-picker-button-background-color-hover", - "--system-picker-button-background-color-key-focus", - "--system-picker-button-border-color", - "--system-picker-button-border-radius", - "--system-picker-button-border-radius-rounded-sided", - "--system-picker-button-border-radius-sided", - "--system-picker-button-border-width", - "--system-picker-button-padding" - ], "passthroughs": [], "high-contrast": [] } diff --git a/components/pickerbutton/index.css b/components/pickerbutton/index.css index d9404687aca..695a29bdab0 100644 --- a/components/pickerbutton/index.css +++ b/components/pickerbutton/index.css @@ -11,9 +11,21 @@ * governing permissions and limitations under the License. */ -@import "./themes/spectrum-two.css"; - .spectrum-PickerButton { + --spectrum-picker-button-background-color: var(--spectrum-gray-100); + --spectrum-picker-button-background-color-hover: var(--spectrum-gray-200); + --spectrum-picker-button-background-color-down: var(--spectrum-gray-200); + --spectrum-picker-button-background-color-key-focus: var(--spectrum-gray-200); + + --spectrum-picker-button-border-color: none; + --spectrum-picker-button-border-radius: var(--spectrum-corner-radius-75); + --spectrum-picker-button-border-radius-rounded-sided: var(--spectrum-corner-radius-200); + --spectrum-picker-button-border-radius-sided: var(--spectrum-corner-radius-75); + --spectrum-picker-button-border-width: 0px; + + /* Bring back --spectrum-in-field-button-edge-to-fill when S2 tokens available */ + --spectrum-picker-button-padding: 4px; + --spectrum-picker-button-height: var(--spectrum-component-height-100); --spectrum-picker-button-width: var(--spectrum-component-height-100); --spectrum-picker-button-gap: var(--spectrum-text-to-visual-50); diff --git a/components/pickerbutton/stories/template.js b/components/pickerbutton/stories/template.js index 3df4f85b636..6adcb7398fd 100644 --- a/components/pickerbutton/stories/template.js +++ b/components/pickerbutton/stories/template.js @@ -8,9 +8,6 @@ import { styleMap } from "lit/directives/style-map.js"; import { when } from "lit/directives/when.js"; import "../index.css"; -import "../themes/spectrum.css"; -/* Must be imported last */ -import "../themes/express.css"; export const Template = ({ rootClass = "spectrum-PickerButton", diff --git a/components/pickerbutton/themes/express.css b/components/pickerbutton/themes/express.css deleted file mode 100644 index 9dbd1a7fa4a..00000000000 --- a/components/pickerbutton/themes/express.css +++ /dev/null @@ -1,33 +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. - */ - -/* @combine .spectrum.spectrum--express */ - -@import "./spectrum.css"; - -@container style(--system: express) { - .spectrum-PickerButton { - --spectrum-picker-button-background-color: var(--spectrum-gray-200); - --spectrum-picker-button-background-color-hover: var(--spectrum-gray-300); - --spectrum-picker-button-background-color-down: var(--spectrum-gray-400); - --spectrum-picker-button-background-color-key-focus: var(--spectrum-gray-300); - - --spectrum-picker-button-border-color: none; - --spectrum-picker-button-border-radius: var(--spectrum-corner-radius-75); - --spectrum-picker-button-border-radius-rounded-sided: var(--spectrum-corner-radius-200); - --spectrum-picker-button-border-radius-sided: var(--spectrum-corner-radius-75); - --spectrum-picker-button-border-width: 0px; - - --spectrum-picker-button-padding: var(--spectrum-in-field-button-edge-to-fill); - } -} diff --git a/components/pickerbutton/themes/spectrum-two.css b/components/pickerbutton/themes/spectrum-two.css deleted file mode 100644 index 3d7cb7d385a..00000000000 --- a/components/pickerbutton/themes/spectrum-two.css +++ /dev/null @@ -1,30 +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. - */ - -@container style(--system: spectrum) { - .spectrum-PickerButton { - --spectrum-picker-button-background-color: var(--spectrum-gray-100); - --spectrum-picker-button-background-color-hover: var(--spectrum-gray-200); - --spectrum-picker-button-background-color-down: var(--spectrum-gray-200); - --spectrum-picker-button-background-color-key-focus: var(--spectrum-gray-200); - - --spectrum-picker-button-border-color: none; - --spectrum-picker-button-border-radius: var(--spectrum-corner-radius-75); - --spectrum-picker-button-border-radius-rounded-sided: var(--spectrum-corner-radius-200); - --spectrum-picker-button-border-radius-sided: var(--spectrum-corner-radius-75); - --spectrum-picker-button-border-width: 0px; - - /* Bring back --spectrum-in-field-button-edge-to-fill when S2 tokens available */ - --spectrum-picker-button-padding: 4px; - } -} diff --git a/components/pickerbutton/themes/spectrum.css b/components/pickerbutton/themes/spectrum.css deleted file mode 100644 index 85c3b9aaf9e..00000000000 --- a/components/pickerbutton/themes/spectrum.css +++ /dev/null @@ -1,33 +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. - */ - -/* @combine .spectrum.spectrum--legacy */ - -@import "./spectrum-two.css"; - -@container style(--system: legacy) { - .spectrum-PickerButton { - --spectrum-picker-button-background-color: var(--spectrum-gray-75); - --spectrum-picker-button-background-color-hover: var(--spectrum-gray-200); - --spectrum-picker-button-background-color-down: var(--spectrum-gray-300); - --spectrum-picker-button-background-color-key-focus: var(--spectrum-gray-200); - - --spectrum-picker-button-border-color: inherit; - --spectrum-picker-button-border-radius: var(--spectrum-corner-radius-100); - --spectrum-picker-button-border-radius-rounded-sided: 0; - --spectrum-picker-button-border-radius-sided: 0; - --spectrum-picker-button-border-width: var(--spectrum-border-width-100); - - --spectrum-picker-button-padding: var(--spectrum-in-field-button-edge-to-fill); - } -} diff --git a/components/popover/dist/metadata.json b/components/popover/dist/metadata.json index 234562ed9ae..ed8f9308dde 100644 --- a/components/popover/dist/metadata.json +++ b/components/popover/dist/metadata.json @@ -84,19 +84,7 @@ ".spectrum-Popover--withTip.spectrum-Popover--top-start .spectrum-Popover-tip", ".spectrum-Popover.is-open", ".spectrum-Popover.spectrum-Popover--withTip", - ".spectrum-Popover.spectrum-Popover--withTip .spectrum-Popover-tip .spectrum-Popover-tip-triangle", - "[dir=\"rtl\"] .spectrum-Popover--end-bottom.is-open", - "[dir=\"rtl\"] .spectrum-Popover--end-top.is-open", - "[dir=\"rtl\"] .spectrum-Popover--end.is-open", - "[dir=\"rtl\"] .spectrum-Popover--start-bottom.is-open", - "[dir=\"rtl\"] .spectrum-Popover--start-top.is-open", - "[dir=\"rtl\"] .spectrum-Popover--start.is-open", - "[dir=\"rtl\"] .spectrum-Popover--withTip.spectrum-Popover--end .spectrum-Popover-tip", - "[dir=\"rtl\"] .spectrum-Popover--withTip.spectrum-Popover--end-bottom .spectrum-Popover-tip", - "[dir=\"rtl\"] .spectrum-Popover--withTip.spectrum-Popover--end-top .spectrum-Popover-tip", - "[dir=\"rtl\"] .spectrum-Popover--withTip.spectrum-Popover--start .spectrum-Popover-tip", - "[dir=\"rtl\"] .spectrum-Popover--withTip.spectrum-Popover--start-bottom .spectrum-Popover-tip", - "[dir=\"rtl\"] .spectrum-Popover--withTip.spectrum-Popover--start-top .spectrum-Popover-tip" + ".spectrum-Popover.spectrum-Popover--withTip .spectrum-Popover-tip .spectrum-Popover-tip-triangle" ], "modifiers": [ "--mod-overlay-animation-duration", @@ -149,7 +137,6 @@ "--spectrum-gray-400", "--spectrum-spacing-100" ], - "system-theme": ["--system-popover-border-width"], "passthroughs": [], "high-contrast": ["--highcontrast-popover-border-color"] } diff --git a/components/popover/index.css b/components/popover/index.css index 080412ed506..45c41dde7ae 100644 --- a/components/popover/index.css +++ b/components/popover/index.css @@ -11,10 +11,11 @@ * governing permissions and limitations under the License. */ -@import "./themes/spectrum-two.css"; @import "@spectrum-css/commons/overlay.css"; .spectrum-Popover { + --spectrum-popover-border-width: var(--spectrum-border-width-100); + /* animation distance is equal to and responsible for popover offset */ --spectrum-popover-animation-distance: var(--spectrum-spacing-100); diff --git a/components/popover/stories/template.js b/components/popover/stories/template.js index 6d7e55375e2..b76c6fe5dbf 100644 --- a/components/popover/stories/template.js +++ b/components/popover/stories/template.js @@ -8,9 +8,6 @@ import { styleMap } from "lit/directives/style-map.js"; import { when } from "lit/directives/when.js"; import "../index.css"; -import "../themes/spectrum.css"; -/* Must be imported last */ -import "../themes/express.css"; export const Template = ({ rootClass = "spectrum-Popover", diff --git a/components/popover/themes/express.css b/components/popover/themes/express.css deleted file mode 100644 index 32c92bf71b5..00000000000 --- a/components/popover/themes/express.css +++ /dev/null @@ -1,22 +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. - */ - -/* @combine .spectrum.spectrum--express */ - -@import "./spectrum.css"; - -@container style(--system: express) { - .spectrum-Popover { - --spectrum-popover-border-width: 0; - } -} diff --git a/components/popover/themes/spectrum-two.css b/components/popover/themes/spectrum-two.css deleted file mode 100644 index 80c0cdc94c4..00000000000 --- a/components/popover/themes/spectrum-two.css +++ /dev/null @@ -1,18 +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. - */ - -@container style(--system: spectrum) { - .spectrum-Popover { - --spectrum-popover-border-width: var(--spectrum-border-width-100); - } -} diff --git a/components/popover/themes/spectrum.css b/components/popover/themes/spectrum.css deleted file mode 100644 index 3d81bc564b5..00000000000 --- a/components/popover/themes/spectrum.css +++ /dev/null @@ -1,16 +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. - */ - -/* @combine .spectrum.spectrum--legacy */ - -@import "./spectrum-two.css"; diff --git a/components/progressbar/dist/metadata.json b/components/progressbar/dist/metadata.json index 3294d6c477a..ee2d79845c2 100644 --- a/components/progressbar/dist/metadata.json +++ b/components/progressbar/dist/metadata.json @@ -7,7 +7,6 @@ ".spectrum-ProgressBar--sideLabel .spectrum-ProgressBar-percentage", ".spectrum-ProgressBar--sideLabel .spectrum-ProgressBar-track", ".spectrum-ProgressBar--sizeL", - ".spectrum-ProgressBar--sizeM", ".spectrum-ProgressBar--sizeS", ".spectrum-ProgressBar--sizeXL", ".spectrum-ProgressBar-fill", @@ -19,10 +18,7 @@ ".spectrum-ProgressBar:dir(rtl)", ".spectrum-ProgressBar:lang(ja)", ".spectrum-ProgressBar:lang(ko)", - ".spectrum-ProgressBar:lang(zh)", - "0%", - "[dir=\"rtl\"] .spectrum-ProgressBar", - "to" + ".spectrum-ProgressBar:lang(zh)" ], "modifiers": [ "--mod-progressbar-animation-duration-indeterminate", @@ -102,10 +98,6 @@ "--spectrum-transparent-white-400", "--spectrum-white" ], - "system-theme": [ - "--system-progress-bar-track-color", - "--system-progress-bar-track-color-white" - ], "passthroughs": ["--mod-fieldlabel-font-size"], "high-contrast": [ "--highcontrast-progressbar-fill-color", diff --git a/components/progressbar/index.css b/components/progressbar/index.css index 648c492df0f..f28ba7dd2d6 100644 --- a/components/progressbar/index.css +++ b/components/progressbar/index.css @@ -11,17 +11,6 @@ * governing permissions and limitations under the License. */ -@import "./themes/spectrum-two.css"; - -.spectrum-ProgressBar, -.spectrum-ProgressBar--sizeM { - --spectrum-progressbar-sized-size-default: var(--spectrum-progressbar-size-2400); - --spectrum-progressbar-sized-font-size: var(--spectrum-font-size-75); - /* @todo should this be --spectrum-progress-bar-thickness-medium? */ - --spectrum-progressbar-sized-thickness: var(--spectrum-progress-bar-thickness-large); - --spectrum-progressbar-sized-spacing-top-to-text: var(--spectrum-component-top-to-text-100); -} - .spectrum-ProgressBar--sizeS { --spectrum-progressbar-sized-size-default: var(--spectrum-progressbar-size-2400); --spectrum-progressbar-sized-font-size: var(--spectrum-font-size-75); @@ -44,6 +33,15 @@ } .spectrum-ProgressBar { + --spectrum-progressbar-track-color: var(--spectrum-gray-200); + --spectrum-progressbar-track-color-white: var(--spectrum-transparent-white-400); + + --spectrum-progressbar-sized-size-default: var(--spectrum-progressbar-size-2400); + --spectrum-progressbar-sized-font-size: var(--spectrum-font-size-75); + /* @todo should this be --spectrum-progress-bar-thickness-medium? */ + --spectrum-progressbar-sized-thickness: var(--spectrum-progress-bar-thickness-large); + --spectrum-progressbar-sized-spacing-top-to-text: var(--spectrum-component-top-to-text-100); + --spectrum-progressbar-size-default: var(--mod-progressbar-size-default, var(--spectrum-progressbar-sized-size-default)); --spectrum-progressbar-font-size: var(--mod-progressbar-font-size, var(--spectrum-progressbar-sized-font-size)); --spectrum-progressbar-thickness: var(--mod-progressbar-thickness, var(--spectrum-progressbar-sized-thickness)); diff --git a/components/progressbar/stories/template.js b/components/progressbar/stories/template.js index c358879721c..30c9cfeb827 100644 --- a/components/progressbar/stories/template.js +++ b/components/progressbar/stories/template.js @@ -7,9 +7,6 @@ import { styleMap } from "lit/directives/style-map.js"; import { capitalize } from "lodash-es"; import "../index.css"; -import "../themes/spectrum.css"; -/* Must be imported last */ -import "../themes/express.css"; export const Template = ({ rootClass = "spectrum-ProgressBar", diff --git a/components/progressbar/themes/express.css b/components/progressbar/themes/express.css deleted file mode 100644 index 9fd550418f2..00000000000 --- a/components/progressbar/themes/express.css +++ /dev/null @@ -1,16 +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. - */ - -/* @combine .spectrum.spectrum--express */ - -@import "./spectrum.css"; diff --git a/components/progressbar/themes/spectrum-two.css b/components/progressbar/themes/spectrum-two.css deleted file mode 100644 index 3b705ef64c4..00000000000 --- a/components/progressbar/themes/spectrum-two.css +++ /dev/null @@ -1,19 +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. - */ - -@container style(--system: spectrum) { - .spectrum-ProgressBar { - --spectrum-progressbar-track-color: var(--spectrum-gray-200); - --spectrum-progressbar-track-color-white: var(--spectrum-transparent-white-400); - } -} diff --git a/components/progressbar/themes/spectrum.css b/components/progressbar/themes/spectrum.css deleted file mode 100644 index 3760cc4cfc4..00000000000 --- a/components/progressbar/themes/spectrum.css +++ /dev/null @@ -1,23 +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. - */ - -/* @combine .spectrum.spectrum--legacy */ - -@import "./spectrum-two.css"; - -@container style(--system: legacy) { - .spectrum-ProgressBar { - --spectrum-progressbar-track-color: var(--spectrum-gray-300); - --spectrum-progressbar-track-color-white: var(--spectrum-transparent-white-300); - } -} diff --git a/components/progresscircle/animation.css b/components/progresscircle/animation.css deleted file mode 100644 index 176d4da4c17..00000000000 --- a/components/progresscircle/animation.css +++ /dev/null @@ -1,510 +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. - */ - -.spectrum-ProgressCircle--indeterminate-fill-submask-2 { - animation: 1s infinite linear spectrum-fill-mask-2; -} - -@keyframes spectrum-fill-mask-1 { - 0% { - transform: rotate(90deg); - } - - 1.69% { - transform: rotate(72.3deg); - } - - 3.39% { - transform: rotate(55.5deg); - } - - 5.08% { - transform: rotate(40.3deg); - } - - 6.78% { - transform: rotate(25deg); - } - - 8.47% { - transform: rotate(10.6deg); - } - - 10.17% { - transform: rotate(0deg); - } - - 11.86% { - transform: rotate(0deg); - } - - 13.56% { - transform: rotate(0deg); - } - - 15.25% { - transform: rotate(0deg); - } - - 16.95% { - transform: rotate(0deg); - } - - 18.64% { - transform: rotate(0deg); - } - - 20.34% { - transform: rotate(0deg); - } - - 22.03% { - transform: rotate(0deg); - } - - 23.73% { - transform: rotate(0deg); - } - - 25.42% { - transform: rotate(0deg); - } - - 27.12% { - transform: rotate(0deg); - } - - 28.81% { - transform: rotate(0deg); - } - - 30.51% { - transform: rotate(0deg); - } - - 32.2% { - transform: rotate(0deg); - } - - 33.9% { - transform: rotate(0deg); - } - - 35.59% { - transform: rotate(0deg); - } - - 37.29% { - transform: rotate(0deg); - } - - 38.98% { - transform: rotate(0deg); - } - - 40.68% { - transform: rotate(0deg); - } - - 42.37% { - transform: rotate(5.3deg); - } - - 44.07% { - transform: rotate(13.4deg); - } - - 45.76% { - transform: rotate(20.6deg); - } - - 47.46% { - transform: rotate(29deg); - } - - 49.15% { - transform: rotate(36.5deg); - } - - 50.85% { - transform: rotate(42.6deg); - } - - 52.54% { - transform: rotate(48.8deg); - } - - 54.24% { - transform: rotate(54.2deg); - } - - 55.93% { - transform: rotate(59.4deg); - } - - 57.63% { - transform: rotate(63.2deg); - } - - 59.32% { - transform: rotate(67.2deg); - } - - 61.02% { - transform: rotate(70.8deg); - } - - 62.71% { - transform: rotate(73.8deg); - } - - 64.41% { - transform: rotate(76.2deg); - } - - 66.1% { - transform: rotate(78.7deg); - } - - 67.8% { - transform: rotate(80.6deg); - } - - 69.49% { - transform: rotate(82.6deg); - } - - 71.19% { - transform: rotate(83.7deg); - } - - 72.88% { - transform: rotate(85deg); - } - - 74.58% { - transform: rotate(86.3deg); - } - - 76.27% { - transform: rotate(87deg); - } - - 77.97% { - transform: rotate(87.7deg); - } - - 79.66% { - transform: rotate(88.3deg); - } - - 81.36% { - transform: rotate(88.6deg); - } - - 83.05% { - transform: rotate(89.2deg); - } - - 84.75% { - transform: rotate(89.2deg); - } - - 86.44% { - transform: rotate(89.5deg); - } - - 88.14% { - transform: rotate(89.9deg); - } - - 89.83% { - transform: rotate(89.7deg); - } - - 91.53% { - transform: rotate(90.1deg); - } - - 93.22% { - transform: rotate(90.2deg); - } - - 94.92% { - transform: rotate(90.1deg); - } - - 96.61% { - transform: rotate(90deg); - } - - 98.31% { - transform: rotate(89.8deg); - } - - 100% { - transform: rotate(90deg); - } -} - -@keyframes spectrum-fill-mask-2 { - 0% { - transform: rotate(180deg); - } - - 1.69% { - transform: rotate(180deg); - } - - 3.39% { - transform: rotate(180deg); - } - - 5.08% { - transform: rotate(180deg); - } - - 6.78% { - transform: rotate(180deg); - } - - 8.47% { - transform: rotate(180deg); - } - - 10.17% { - transform: rotate(179.2deg); - } - - 11.86% { - transform: rotate(164deg); - } - - 13.56% { - transform: rotate(151.8deg); - } - - 15.25% { - transform: rotate(140.8deg); - } - - 16.95% { - transform: rotate(130.3deg); - } - - 18.64% { - transform: rotate(120.4deg); - } - - 20.34% { - transform: rotate(110.8deg); - } - - 22.03% { - transform: rotate(101.6deg); - } - - 23.73% { - transform: rotate(93.5deg); - } - - 25.42% { - transform: rotate(85.4deg); - } - - 27.12% { - transform: rotate(78.1deg); - } - - 28.81% { - transform: rotate(71.2deg); - } - - 30.51% { - transform: rotate(89.1deg); - } - - 32.2% { - transform: rotate(105.5deg); - } - - 33.9% { - transform: rotate(121.3deg); - } - - 35.59% { - transform: rotate(135.5deg); - } - - 37.29% { - transform: rotate(148.4deg); - } - - 38.98% { - transform: rotate(161deg); - } - - 40.68% { - transform: rotate(173.5deg); - } - - 42.37% { - transform: rotate(180deg); - } - - 44.07% { - transform: rotate(180deg); - } - - 45.76% { - transform: rotate(180deg); - } - - 47.46% { - transform: rotate(180deg); - } - - 49.15% { - transform: rotate(180deg); - } - - 50.85% { - transform: rotate(180deg); - } - - 52.54% { - transform: rotate(180deg); - } - - 54.24% { - transform: rotate(180deg); - } - - 55.93% { - transform: rotate(180deg); - } - - 57.63% { - transform: rotate(180deg); - } - - 59.32% { - transform: rotate(180deg); - } - - 61.02% { - transform: rotate(180deg); - } - - 62.71% { - transform: rotate(180deg); - } - - 64.41% { - transform: rotate(180deg); - } - - 66.1% { - transform: rotate(180deg); - } - - 67.8% { - transform: rotate(180deg); - } - - 69.49% { - transform: rotate(180deg); - } - - 71.19% { - transform: rotate(180deg); - } - - 72.88% { - transform: rotate(180deg); - } - - 74.58% { - transform: rotate(180deg); - } - - 76.27% { - transform: rotate(180deg); - } - - 77.97% { - transform: rotate(180deg); - } - - 79.66% { - transform: rotate(180deg); - } - - 81.36% { - transform: rotate(180deg); - } - - 83.05% { - transform: rotate(180deg); - } - - 84.75% { - transform: rotate(180deg); - } - - 86.44% { - transform: rotate(180deg); - } - - 88.14% { - transform: rotate(180deg); - } - - 89.83% { - transform: rotate(180deg); - } - - 91.53% { - transform: rotate(180deg); - } - - 93.22% { - transform: rotate(180deg); - } - - 94.92% { - transform: rotate(180deg); - } - - 96.61% { - transform: rotate(180deg); - } - - 98.31% { - transform: rotate(180deg); - } - - 100% { - transform: rotate(180deg); - } -} - -@keyframes spectrum-fills-rotate { - 0% { - transform: rotate(-90deg); - } - - 100% { - transform: rotate(270deg); - } -} diff --git a/components/progresscircle/dist/metadata.json b/components/progresscircle/dist/metadata.json index 82493f14621..a815f0a2ddc 100644 --- a/components/progresscircle/dist/metadata.json +++ b/components/progresscircle/dist/metadata.json @@ -17,67 +17,7 @@ ".spectrum-ProgressCircle.spectrum-ProgressCircle--medium", ".spectrum-ProgressCircle.spectrum-ProgressCircle--small", ".spectrum-ProgressCircle.spectrum-ProgressCircle--staticWhite .spectrum-ProgressCircle-fill", - ".spectrum-ProgressCircle.spectrum-ProgressCircle--staticWhite .spectrum-ProgressCircle-track", - "0%", - "1.69%", - "10.17%", - "11.86%", - "13.56%", - "15.25%", - "16.95%", - "18.64%", - "20.34%", - "22.03%", - "23.73%", - "25.42%", - "27.12%", - "28.81%", - "3.39%", - "30.51%", - "32.2%", - "33.9%", - "35.59%", - "37.29%", - "38.98%", - "40.68%", - "42.37%", - "44.07%", - "45.76%", - "47.46%", - "49.15%", - "5.08%", - "50.85%", - "52.54%", - "54.24%", - "55.93%", - "57.63%", - "59.32%", - "6.78%", - "61.02%", - "62.71%", - "64.41%", - "66.1%", - "67.8%", - "69.49%", - "71.19%", - "72.88%", - "74.58%", - "76.27%", - "77.97%", - "79.66%", - "8.47%", - "81.36%", - "83.05%", - "84.75%", - "86.44%", - "88.14%", - "89.83%", - "91.53%", - "93.22%", - "94.92%", - "96.61%", - "98.31%", - "to" + ".spectrum-ProgressCircle.spectrum-ProgressCircle--staticWhite .spectrum-ProgressCircle-track" ], "modifiers": [ "--mod-progress-circle-fill-border-color", @@ -113,11 +53,6 @@ "--spectrum-transparent-white-400", "--spectrum-transparent-white-900" ], - "system-theme": [ - "--system-progress-circle-fill-border-color-over-background", - "--system-progress-circle-track-border-color", - "--system-progress-circle-track-border-color-over-background" - ], "passthroughs": [], "high-contrast": [ "--highcontrast-progress-circle-fill-border-color", diff --git a/components/progresscircle/index.css b/components/progresscircle/index.css index 019cbb78bbd..a0de5036237 100644 --- a/components/progresscircle/index.css +++ b/components/progresscircle/index.css @@ -11,8 +11,6 @@ * governing permissions and limitations under the License. */ -@import "./themes/spectrum-two.css"; - /* windows high contrast mode */ @media (forced-colors: active) { .spectrum-ProgressCircle { @@ -30,6 +28,12 @@ } .spectrum-ProgressCircle { + /* circle unfilled border color */ + --spectrum-progress-circle-track-border-color: var(--spectrum-gray-200); + + --spectrum-progress-circle-track-border-color-over-background: var(--spectrum-transparent-white-400); + --spectrum-progress-circle-fill-border-color-over-background: var(--spectrum-transparent-white-1000); + /* circle unfilled border color */ --spectrum-progress-circle-track-border-color: var(--spectrum-gray-300); diff --git a/components/progresscircle/stories/template.js b/components/progresscircle/stories/template.js index 2e27221f91a..8fbb22aa461 100644 --- a/components/progresscircle/stories/template.js +++ b/components/progresscircle/stories/template.js @@ -5,9 +5,6 @@ import { ifDefined } from "lit/directives/if-defined.js"; import { styleMap } from "lit/directives/style-map.js"; import "../index.css"; -import "../themes/spectrum.css"; -/* Must be imported last */ -import "../themes/express.css"; export const Template = ({ id = getRandomId("progress-circle"), @@ -59,4 +56,4 @@ export const Template = ({ `; -}; \ No newline at end of file +}; diff --git a/components/progresscircle/themes/express.css b/components/progresscircle/themes/express.css deleted file mode 100644 index 9fd550418f2..00000000000 --- a/components/progresscircle/themes/express.css +++ /dev/null @@ -1,16 +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. - */ - -/* @combine .spectrum.spectrum--express */ - -@import "./spectrum.css"; diff --git a/components/progresscircle/themes/spectrum-two.css b/components/progresscircle/themes/spectrum-two.css deleted file mode 100644 index 93464f22940..00000000000 --- a/components/progresscircle/themes/spectrum-two.css +++ /dev/null @@ -1,22 +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. - */ - -@container style(--system: spectrum) { - .spectrum-ProgressCircle { - /* circle unfilled border color */ - --spectrum-progress-circle-track-border-color: var(--spectrum-gray-200); - - --spectrum-progress-circle-track-border-color-over-background: var(--spectrum-transparent-white-400); - --spectrum-progress-circle-fill-border-color-over-background: var(--spectrum-transparent-white-1000); - } -} diff --git a/components/progresscircle/themes/spectrum.css b/components/progresscircle/themes/spectrum.css deleted file mode 100644 index 2d0e45eece1..00000000000 --- a/components/progresscircle/themes/spectrum.css +++ /dev/null @@ -1,26 +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. - */ - -/* @combine .spectrum.spectrum--legacy */ - -@import "./spectrum-two.css"; - -@container style(--system: legacy) { - .spectrum-ProgressCircle { - /* circle unfilled border color */ - --spectrum-progress-circle-track-border-color: var(--spectrum-gray-300); - - --spectrum-progress-circle-track-border-color-over-background: var(--spectrum-transparent-white-300); - --spectrum-progress-circle-fill-border-color-over-background: var(--spectrum-transparent-white-900); - } -} diff --git a/components/radio/dist/metadata.json b/components/radio/dist/metadata.json index b94c6dfcf90..56f388cd3b5 100644 --- a/components/radio/dist/metadata.json +++ b/components/radio/dist/metadata.json @@ -12,7 +12,6 @@ ".spectrum-Radio--emphasized:focus .spectrum-Radio-input:checked + .spectrum-Radio-button:before", ".spectrum-Radio--emphasized:hover .spectrum-Radio-input:checked + .spectrum-Radio-button:before", ".spectrum-Radio--sizeL", - ".spectrum-Radio--sizeM", ".spectrum-Radio--sizeS", ".spectrum-Radio--sizeXL", ".spectrum-Radio-button", @@ -43,8 +42,7 @@ ".spectrum-Radio:hover .spectrum-Radio-label", ".spectrum-Radio:lang(ja)", ".spectrum-Radio:lang(ko)", - ".spectrum-Radio:lang(zh)", - "[dir=\"rtl\"] .spectrum-Radio .spectrum-Radio-button:after" + ".spectrum-Radio:lang(zh)" ], "modifiers": [ "--mod-radio-animation-duration", @@ -167,13 +165,6 @@ "--spectrum-text-to-control-300", "--spectrum-text-to-control-75" ], - "system-theme": [ - "--system-radio-button-background-color", - "--system-radio-button-border-color-default", - "--system-radio-button-border-color-down", - "--system-radio-button-border-color-focus", - "--system-radio-button-border-color-hover" - ], "passthroughs": [], "high-contrast": [ "--highcontrast-radio-button-background-color", diff --git a/components/radio/index.css b/components/radio/index.css index f531d01f8dd..2365190a9ec 100644 --- a/components/radio/index.css +++ b/components/radio/index.css @@ -11,37 +11,37 @@ * governing permissions and limitations under the License. */ -@import "./themes/spectrum-two.css"; +.spectrum-Radio { + /* selection indicator */ + --spectrum-radio-button-border-color-default: var(--spectrum-gray-600); + --spectrum-radio-button-border-color-hover: var(--spectrum-gray-700); + --spectrum-radio-button-border-color-down: var(--spectrum-gray-800); + --spectrum-radio-button-border-color-focus: var(--spectrum-gray-700); -/* - * Radio: - * ::before is to style the input circle (selection indicator) - * ::after is to style the focus ring - */ + --spectrum-radio-button-background-color: var(--spectrum-gray-50); -.spectrum-Radio { - /* state colors for all themes */ + /* state colors */ --spectrum-radio-neutral-content-color: var(--spectrum-neutral-content-color-default); --spectrum-radio-neutral-content-color-hover: var(--spectrum-neutral-content-color-hover); --spectrum-radio-neutral-content-color-down: var(--spectrum-neutral-content-color-down); --spectrum-radio-neutral-content-color-focus: var(--spectrum-neutral-content-color-key-focus); - /* focus ring all themes */ + /* focus ring */ --spectrum-radio-focus-indicator-thickness: var(--spectrum-focus-indicator-thickness); --spectrum-radio-focus-indicator-gap: var(--spectrum-focus-indicator-gap); --spectrum-radio-focus-indicator-color: var(--spectrum-focus-indicator-color); - /* disabled all themes */ + /* disabled */ --spectrum-radio-disabled-content-color: var(--spectrum-disabled-content-color); --spectrum-radio-disabled-border-color: var(--spectrum-disabled-content-color); - /* emphasized state colors selection indicator all themes */ + /* emphasized state colors selection indicator */ --spectrum-radio-emphasized-accent-color: var(--spectrum-accent-color-900); --spectrum-radio-emphasized-accent-color-hover: var(--spectrum-accent-color-1000); --spectrum-radio-emphasized-accent-color-down: var(--spectrum-accent-color-1100); --spectrum-radio-emphasized-accent-color-focus: var(--spectrum-accent-color-1000); - /* selection indicator all themes */ + /* selection indicator */ --spectrum-radio-border-width: var(--spectrum-border-width-200); /* checked selection indicator */ @@ -52,19 +52,9 @@ --spectrum-radio-line-height: var(--spectrum-line-height-100); - /* animation all themes */ + /* animation */ --spectrum-radio-animation-duration: var(--spectrum-animation-duration-100); - /* CJK language support all themes */ - &:lang(ja), - &:lang(zh), - &:lang(ko) { - --spectrum-radio-line-height-cjk: var(--spectrum-cjk-line-height-100); - } -} - -.spectrum-Radio, -.spectrum-Radio--sizeM { --spectrum-radio-height: var(--spectrum-component-height-100); --spectrum-radio-button-control-size: var(--spectrum-radio-button-control-size-medium); @@ -74,6 +64,13 @@ --spectrum-radio-button-top-to-control: var(--spectrum-radio-button-top-to-control-medium); --spectrum-radio-font-size: var(--spectrum-font-size-100); + + /* CJK language support */ + &:lang(ja), + &:lang(zh), + &:lang(ko) { + --spectrum-radio-line-height-cjk: var(--spectrum-cjk-line-height-100); + } } .spectrum-Radio--sizeS { diff --git a/components/radio/stories/template.js b/components/radio/stories/template.js index 68c3cbf0e96..50ba8484b2f 100644 --- a/components/radio/stories/template.js +++ b/components/radio/stories/template.js @@ -5,9 +5,6 @@ import { ifDefined } from "lit/directives/if-defined.js"; import { styleMap } from "lit/directives/style-map.js"; import "../index.css"; -import "../themes/spectrum.css"; -/* Must be imported last */ -import "../themes/express.css"; export const Template = ({ rootClass = "spectrum-Radio", diff --git a/components/radio/themes/express.css b/components/radio/themes/express.css deleted file mode 100644 index 8565459259d..00000000000 --- a/components/radio/themes/express.css +++ /dev/null @@ -1,26 +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. - */ - -/* @combine .spectrum.spectrum--express */ - -@import "./spectrum.css"; - -@container style(--system: express) { - .spectrum-Radio { - /* selection indicator */ - --spectrum-radio-button-border-color-default: var(--spectrum-gray-800); - --spectrum-radio-button-border-color-hover: var(--spectrum-gray-900); - --spectrum-radio-button-border-color-down: var(--spectrum-gray-900); - --spectrum-radio-button-border-color-focus: var(--spectrum-gray-900); - } -} diff --git a/components/radio/themes/spectrum-two.css b/components/radio/themes/spectrum-two.css deleted file mode 100644 index 48b980fc0e4..00000000000 --- a/components/radio/themes/spectrum-two.css +++ /dev/null @@ -1,24 +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. - */ - -@container style(--system: spectrum) { - .spectrum-Radio { - /* selection indicator */ - --spectrum-radio-button-border-color-default: var(--spectrum-gray-600); - --spectrum-radio-button-border-color-hover: var(--spectrum-gray-700); - --spectrum-radio-button-border-color-down: var(--spectrum-gray-800); - --spectrum-radio-button-border-color-focus: var(--spectrum-gray-700); - - --spectrum-radio-button-background-color: var(--spectrum-gray-50); - } -} diff --git a/components/radio/themes/spectrum.css b/components/radio/themes/spectrum.css deleted file mode 100644 index 33772fcc7c9..00000000000 --- a/components/radio/themes/spectrum.css +++ /dev/null @@ -1,22 +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. - */ - -/* @combine .spectrum.spectrum--legacy */ - -@import "./spectrum-two.css"; - -@container style(--system: legacy) { - .spectrum-Radio { - --spectrum-radio-button-background-color: var(--spectrum-gray-75); - } -} diff --git a/components/rating/dist/metadata.json b/components/rating/dist/metadata.json index 75ee43e0895..f0ab77b22a9 100644 --- a/components/rating/dist/metadata.json +++ b/components/rating/dist/metadata.json @@ -101,13 +101,6 @@ "--spectrum-neutral-subdued-content-color-key-focus", "--spectrum-workflow-icon-size-100" ], - "system-theme": [ - "--system-rating-icon-color-default", - "--system-rating-icon-color-down", - "--system-rating-icon-color-hover", - "--system-rating-icon-color-key-focus", - "--system-rating-indicator-border-radius" - ], "passthroughs": [], "high-contrast": [ "--highcontrast-rating-emphasized-icon-color-default", diff --git a/components/rating/index.css b/components/rating/index.css index 02c76194916..6b2ed7acd61 100644 --- a/components/rating/index.css +++ b/components/rating/index.css @@ -11,9 +11,14 @@ * governing permissions and limitations under the License. */ -@import "./themes/spectrum-two.css"; - .spectrum-Rating { + --spectrum-rating-icon-color-default: var(--spectrum-neutral-subdued-content-color-default); + --spectrum-rating-icon-color-hover: var(--spectrum-neutral-subdued-content-color-hover); + --spectrum-rating-icon-color-down: var(--spectrum-neutral-subdued-content-color-down); + --spectrum-rating-icon-color-key-focus: var(--spectrum-neutral-subdued-content-color-key-focus); + + --spectrum-rating-indicator-border-radius: 2px; + /* Icon */ --spectrum-rating-icon-height: var(--spectrum-workflow-icon-size-100); --spectrum-rating-icon-width: var(--spectrum-workflow-icon-size-100); diff --git a/components/rating/stories/template.js b/components/rating/stories/template.js index 47ea5c5f61a..245694af8fa 100644 --- a/components/rating/stories/template.js +++ b/components/rating/stories/template.js @@ -6,9 +6,6 @@ import { ifDefined } from "lit/directives/if-defined.js"; import { repeat } from "lit/directives/repeat.js"; import "../index.css"; -import "../themes/spectrum.css"; -/* Must be imported last */ -import "../themes/express.css"; export const Template = ({ rootClass = "spectrum-Rating", diff --git a/components/rating/themes/express.css b/components/rating/themes/express.css deleted file mode 100644 index 1a0d5c792b2..00000000000 --- a/components/rating/themes/express.css +++ /dev/null @@ -1,25 +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. - */ - -/* @combine .spectrum.spectrum--express */ - -@import "./spectrum.css"; - -@container style(--system: express) { - .spectrum-Rating { - --spectrum-rating-icon-color-default: var(--spectrum-neutral-content-color-default); - --spectrum-rating-icon-color-hover: var(--spectrum-neutral-content-color-hover); - --spectrum-rating-icon-color-down: var(--spectrum-neutral-content-color-down); - --spectrum-rating-icon-color-key-focus: var(--spectrum-neutral-content-color-key-focus); - } -} diff --git a/components/rating/themes/spectrum-two.css b/components/rating/themes/spectrum-two.css deleted file mode 100644 index 0c2a8df9260..00000000000 --- a/components/rating/themes/spectrum-two.css +++ /dev/null @@ -1,23 +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. - */ - -@container style(--system: spectrum) { - .spectrum-Rating { - --spectrum-rating-icon-color-default: var(--spectrum-neutral-subdued-content-color-default); - --spectrum-rating-icon-color-hover: var(--spectrum-neutral-subdued-content-color-hover); - --spectrum-rating-icon-color-down: var(--spectrum-neutral-subdued-content-color-down); - --spectrum-rating-icon-color-key-focus: var(--spectrum-neutral-subdued-content-color-key-focus); - - --spectrum-rating-indicator-border-radius: 2px; - } -} diff --git a/components/rating/themes/spectrum.css b/components/rating/themes/spectrum.css deleted file mode 100644 index c99df8e652f..00000000000 --- a/components/rating/themes/spectrum.css +++ /dev/null @@ -1,22 +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. - */ - -/* @combine .spectrum.spectrum--legacy */ - -@import "./spectrum-two.css"; - -@container style(--system: legacy) { - .spectrum-Rating { - --spectrum-rating-indicator-border-radius: var(--spectrum-corner-radius-75); - } -} diff --git a/components/search/dist/metadata.json b/components/search/dist/metadata.json index b701431ddf2..35987fa36dd 100644 --- a/components/search/dist/metadata.json +++ b/components/search/dist/metadata.json @@ -25,10 +25,6 @@ ".spectrum-Search-textfield.is-keyboardFocused .spectrum-Search-icon", ".spectrum-Search-textfield:hover .spectrum-Search-icon", ".spectrum-Search.is-disabled .spectrum-Search-clearButton", - ".spectrum-Search.spectrum-Search--sizeL", - ".spectrum-Search.spectrum-Search--sizeM", - ".spectrum-Search.spectrum-Search--sizeS", - ".spectrum-Search.spectrum-Search--sizeXL", ".spectrum-Search:not(.spectrum-Search--quiet) .spectrum-Search-icon", ".spectrum-Search:not(.spectrum-Search--quiet) .spectrum-Search-input" ], @@ -149,28 +145,6 @@ "--spectrum-workflow-icon-size-300", "--spectrum-workflow-icon-size-75" ], - "system-theme": [ - "--system-search-background-color", - "--system-search-background-color-disabled", - "--system-search-border-color-default", - "--system-search-border-color-disabled", - "--system-search-border-color-focus", - "--system-search-border-color-focus-hover", - "--system-search-border-color-hover", - "--system-search-border-color-key-focus", - "--system-search-border-radius", - "--system-search-edge-to-visual", - "--system-search-quiet-background-color-disabled", - "--system-search-quiet-border-color-disabled", - "--system-search-size-l-border-radius", - "--system-search-size-l-edge-to-visual", - "--system-search-size-m-border-radius", - "--system-search-size-m-edge-to-visual", - "--system-search-size-s-border-radius", - "--system-search-size-s-edge-to-visual", - "--system-search-size-xl-border-radius", - "--system-search-size-xl-edge-to-visual" - ], "passthroughs": [ "--mod-textfield-background-color", "--mod-textfield-background-color-disabled", diff --git a/components/search/index.css b/components/search/index.css index 3f98f73e145..dc03c435851 100644 --- a/components/search/index.css +++ b/components/search/index.css @@ -11,9 +11,20 @@ * governing permissions and limitations under the License. */ -@import "./themes/spectrum-two.css"; - .spectrum-Search { + --spectrum-search-border-color-default: var(--spectrum-gray-500); + --spectrum-search-border-color-hover: var(--spectrum-gray-600); + --spectrum-search-border-color-focus: var(--spectrum-gray-800); + --spectrum-search-border-color-focus-hover: var(--spectrum-gray-900); + --spectrum-search-border-color-key-focus: var(--spectrum-gray-800); + + --spectrum-search-background-color: var(--spectrum-gray-25); + --spectrum-search-background-color-disabled: var(--spectrum-gray-25); + --spectrum-search-border-color-disabled: var(--spectrum-gray-300); + + --spectrum-search-border-radius: var(--spectrum-corner-radius-100); + --spectrum-search-edge-to-visual: var(--spectrum-component-edge-to-visual-100); + /* Size / Spacing */ --spectrum-search-inline-size: var(--spectrum-field-width); --spectrum-search-block-size: var(--spectrum-component-height-100); @@ -89,18 +100,27 @@ } .spectrum-Search--sizeS { + --spectrum-search-border-radius: var(--spectrum-corner-radius-100); + --spectrum-search-edge-to-visual: var(--spectrum-component-edge-to-visual-75); + --spectrum-search-block-size: var(--spectrum-component-height-75); --spectrum-search-icon-size: var(--spectrum-workflow-icon-size-75); --spectrum-search-text-to-icon: var(--spectrum-text-to-visual-75); } .spectrum-Search--sizeL { + --spectrum-search-border-radius: var(--spectrum-corner-radius-100); + --spectrum-search-edge-to-visual: var(--spectrum-component-edge-to-visual-200); + --spectrum-search-block-size: var(--spectrum-component-height-200); --spectrum-search-icon-size: var(--spectrum-workflow-icon-size-200); --spectrum-search-text-to-icon: var(--spectrum-text-to-visual-200); } .spectrum-Search--sizeXL { + --spectrum-search-border-radius: var(--spectrum-corner-radius-100); + --spectrum-search-edge-to-visual: var(--spectrum-component-edge-to-visual-300); + --spectrum-search-block-size: var(--spectrum-component-height-300); --spectrum-search-icon-size: var(--spectrum-workflow-icon-size-300); --spectrum-search-text-to-icon: var(--spectrum-text-to-visual-300); @@ -211,7 +231,7 @@ --spectrum-search-background-color-disabled: transparent; --spectrum-search-border-color-disabled: var(--spectrum-disabled-border-color); - /* Added specificity, otherwise they are overridden by system specific themes. */ + /* added specificity, otherwise they are overridden by system specific variants */ --mod-search-border-radius: 0; --mod-search-edge-to-visual: var(--spectrum-field-edge-to-visual-quiet); diff --git a/components/search/stories/template.js b/components/search/stories/template.js index 364c8d8fde6..09570d33581 100644 --- a/components/search/stories/template.js +++ b/components/search/stories/template.js @@ -7,9 +7,6 @@ import { classMap } from "lit/directives/class-map.js"; import { when } from "lit/directives/when.js"; import "../index.css"; -import "../themes/spectrum.css"; -/* Must be imported last */ -import "../themes/express.css"; export const Template = ({ rootClass = "spectrum-Search", diff --git a/components/search/themes/express.css b/components/search/themes/express.css deleted file mode 100644 index 002ab9cecb6..00000000000 --- a/components/search/themes/express.css +++ /dev/null @@ -1,47 +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. - */ - -/* @combine .spectrum.spectrum--express */ - -@import "./spectrum.css"; - -@container style(--system: express) { - .spectrum-Search { - --spectrum-search-border-color-default: var(--spectrum-gray-400); - --spectrum-search-border-color-hover: var(--spectrum-gray-500); - --spectrum-search-border-color-focus: var(--spectrum-gray-800); - --spectrum-search-border-color-focus-hover: var(--spectrum-gray-900); - --spectrum-search-border-color-key-focus: var(--spectrum-gray-900); - - &, - &.spectrum-Search--sizeM { - --spectrum-search-border-radius: calc(var(--spectrum-component-height-100) / 2); - --spectrum-search-edge-to-visual: var(--spectrum-component-pill-edge-to-visual-100); - } - - &.spectrum-Search--sizeS { - --spectrum-search-border-radius: calc(var(--spectrum-component-height-75) / 2); - --spectrum-search-edge-to-visual: var(--spectrum-component-pill-edge-to-visual-75); - } - - &.spectrum-Search--sizeL { - --spectrum-search-border-radius: calc(var(--spectrum-component-height-200) / 2); - --spectrum-search-edge-to-visual: var(--spectrum-component-pill-edge-to-visual-200); - } - - &.spectrum-Search--sizeXL { - --spectrum-search-border-radius: calc(var(--spectrum-component-height-300) / 2); - --spectrum-search-edge-to-visual: var(--spectrum-component-pill-edge-to-visual-300); - } - } -} diff --git a/components/search/themes/spectrum-two.css b/components/search/themes/spectrum-two.css deleted file mode 100644 index 446eaea93a6..00000000000 --- a/components/search/themes/spectrum-two.css +++ /dev/null @@ -1,52 +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. - */ - -@container style(--system: spectrum) { - .spectrum-Search { - --spectrum-search-border-color-default: var(--spectrum-gray-500); - --spectrum-search-border-color-hover: var(--spectrum-gray-600); - --spectrum-search-border-color-focus: var(--spectrum-gray-800); - --spectrum-search-border-color-focus-hover: var(--spectrum-gray-900); - --spectrum-search-border-color-key-focus: var(--spectrum-gray-800); - - --spectrum-search-background-color: var(--spectrum-gray-25); - --spectrum-search-background-color-disabled: var(--spectrum-gray-25); - --spectrum-search-border-color-disabled: var(--spectrum-gray-300); - - &, - &.spectrum-Search--sizeM { - --spectrum-search-border-radius: var(--spectrum-corner-radius-100); - --spectrum-search-edge-to-visual: var(--spectrum-component-edge-to-visual-100); - } - - &.spectrum-Search--sizeS { - --spectrum-search-border-radius: var(--spectrum-corner-radius-100); - --spectrum-search-edge-to-visual: var(--spectrum-component-edge-to-visual-75); - } - - &.spectrum-Search--sizeL { - --spectrum-search-border-radius: var(--spectrum-corner-radius-100); - --spectrum-search-edge-to-visual: var(--spectrum-component-edge-to-visual-200); - } - - &.spectrum-Search--sizeXL { - --spectrum-search-border-radius: var(--spectrum-corner-radius-100); - --spectrum-search-edge-to-visual: var(--spectrum-component-edge-to-visual-300); - } - } - - .spectrum-Search--quiet { - --spectrum-search-background-color-disabled: transparent; - --spectrum-search-border-color-disabled: var(--spectrum-disabled-border-color); - } -} diff --git a/components/search/themes/spectrum.css b/components/search/themes/spectrum.css deleted file mode 100644 index 59756ec73de..00000000000 --- a/components/search/themes/spectrum.css +++ /dev/null @@ -1,25 +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. - */ - -/* @combine .spectrum.spectrum--legacy */ - -@import "./spectrum-two.css"; - -@container style(--system: legacy) { - .spectrum-Search { - --spectrum-search-background-color-disabled: var(--spectrum-disabled-background-color); - --spectrum-search-border-color-disabled: var(--spectrum-disabled-background-color); - --spectrum-search-background-color: var(--spectrum-gray-50); - --spectrum-search-border-color-key-focus: var(--spectrum-gray-900); - } -} diff --git a/components/sidenav/dist/metadata.json b/components/sidenav/dist/metadata.json index a0be758aa57..0215529e384 100644 --- a/components/sidenav/dist/metadata.json +++ b/components/sidenav/dist/metadata.json @@ -180,15 +180,6 @@ "--spectrum-text-to-visual-100", "--spectrum-workflow-icon-size-100" ], - "system-theme": [ - "--system-side-nav-background-hover", - "--system-side-nav-background-hover-selected", - "--system-side-nav-background-key-focus", - "--system-side-nav-background-key-focus-selected", - "--system-side-nav-item-background-default-selected", - "--system-side-nav-item-background-down", - "--system-side-nav-item-background-down-selected" - ], "passthroughs": [], "high-contrast": [ "--highcontrast-sidenav-background-hover", diff --git a/components/sidenav/index.css b/components/sidenav/index.css index c0b75855d42..163a73f7590 100644 --- a/components/sidenav/index.css +++ b/components/sidenav/index.css @@ -11,8 +11,6 @@ * governing permissions and limitations under the License. */ -@import "./themes/spectrum-two.css"; - @media (forced-colors: active) { /* forced-color-adjust: preserve-parent-color addresses svg bug on icon hover */ .spectrum-SideNav { @@ -47,6 +45,15 @@ } .spectrum-SideNav { + --spectrum-sidenav-background-hover: var(--spectrum-gray-100); + --spectrum-sidenav-item-background-down: var(--spectrum-gray-200); + --spectrum-sidenav-background-key-focus: var(--spectrum-gray-100); + + --spectrum-sidenav-item-background-default-selected: var(--spectrum-gray-100); + --spectrum-sidenav-background-hover-selected: var(--spectrum-gray-200); + --spectrum-sidenav-item-background-down-selected: var(--spectrum-gray-200); + --spectrum-sidenav-background-key-focus-selected: var(--spectrum-gray-100); + /* focus indicator */ --spectrum-sidenav-focus-ring-size: var(--spectrum-focus-indicator-thickness); --spectrum-sidenav-focus-ring-gap: var(--spectrum-focus-indicator-gap); diff --git a/components/sidenav/stories/template.js b/components/sidenav/stories/template.js index 3aa9960e809..d3a832ab03a 100644 --- a/components/sidenav/stories/template.js +++ b/components/sidenav/stories/template.js @@ -7,9 +7,6 @@ import { repeat } from "lit/directives/repeat.js"; import { when } from "lit/directives/when.js"; import "../index.css"; -import "../themes/spectrum.css"; -/* Must be imported last */ -import "../themes/express.css"; export const Template = ({ rootClass = "spectrum-SideNav", diff --git a/components/sidenav/themes/express.css b/components/sidenav/themes/express.css deleted file mode 100644 index 9fd550418f2..00000000000 --- a/components/sidenav/themes/express.css +++ /dev/null @@ -1,16 +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. - */ - -/* @combine .spectrum.spectrum--express */ - -@import "./spectrum.css"; diff --git a/components/sidenav/themes/spectrum-two.css b/components/sidenav/themes/spectrum-two.css deleted file mode 100644 index 85869d92dbe..00000000000 --- a/components/sidenav/themes/spectrum-two.css +++ /dev/null @@ -1,25 +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. - */ - -@container style(--system: spectrum) { - .spectrum-SideNav { - --spectrum-sidenav-background-hover: var(--spectrum-gray-100); - --spectrum-sidenav-item-background-down: var(--spectrum-gray-200); - --spectrum-sidenav-background-key-focus: var(--spectrum-gray-100); - - --spectrum-sidenav-item-background-default-selected: var(--spectrum-gray-100); - --spectrum-sidenav-background-hover-selected: var(--spectrum-gray-200); - --spectrum-sidenav-item-background-down-selected: var(--spectrum-gray-200); - --spectrum-sidenav-background-key-focus-selected: var(--spectrum-gray-100); - } -} diff --git a/components/sidenav/themes/spectrum.css b/components/sidenav/themes/spectrum.css deleted file mode 100644 index 51828a4d8bf..00000000000 --- a/components/sidenav/themes/spectrum.css +++ /dev/null @@ -1,29 +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. - */ - -/* @combine .spectrum.spectrum--legacy */ - -@import "./spectrum-two.css"; - -@container style(--system: legacy) { - .spectrum-SideNav { - --spectrum-sidenav-background-hover: var(--spectrum-gray-200); - --spectrum-sidenav-item-background-down: var(--spectrum-gray-300); - --spectrum-sidenav-background-key-focus: var(--spectrum-gray-200); - - --spectrum-sidenav-item-background-default-selected: var(--spectrum-gray-200); - --spectrum-sidenav-background-hover-selected: var(--spectrum-gray-300); - --spectrum-sidenav-item-background-down-selected: var(--spectrum-gray-300); - --spectrum-sidenav-background-key-focus-selected: var(--spectrum-gray-200); - } -} diff --git a/components/slider/dist/metadata.json b/components/slider/dist/metadata.json index 015c2145100..a7a72c00314 100644 --- a/components/slider/dist/metadata.json +++ b/components/slider/dist/metadata.json @@ -83,19 +83,13 @@ ".spectrum-Slider.is-disabled.spectrum-Slider--filled .spectrum-Slider-track:first-child:before", ".spectrum-Slider.is-disabled.spectrum-Slider--range .spectrum-Slider-track:not(:first-of-type, :last-of-type):before", ".spectrum-Slider.spectrum-Slider--ramp .spectrum-Slider-handle", - ".spectrum-Slider.spectrum-Slider--sizeL", - ".spectrum-Slider.spectrum-Slider--sizeM", - ".spectrum-Slider.spectrum-Slider--sizeS", - ".spectrum-Slider.spectrum-Slider--sizeXL", ".spectrum-Slider:dir(rtl)", ".spectrum-Slider:dir(rtl) .spectrum-Slider-handle:before", ".spectrum-Slider:not(.is-disabled, .spectrum-Slider--filled, .spectrum-Slider--range) .spectrum-Slider-controls.is-focused", ".spectrum-Slider:not(.is-disabled, .spectrum-Slider--filled, .spectrum-Slider--range) .spectrum-Slider-controls:active", ".spectrum-Slider:not(.is-disabled, .spectrum-Slider--filled, .spectrum-Slider--range) .spectrum-Slider-controls:focus-within", ".spectrum-Slider:not(.is-disabled, .spectrum-Slider--filled, .spectrum-Slider--range) .spectrum-Slider-controls:hover", - ".spectrum-Slider:not(.spectrum-Slider--sideLabel) .spectrum-Slider-labelContainer + .spectrum-Slider-controls:has(.spectrum-Slider-ramp)", - "[dir=\"rtl\"] .spectrum-Slider", - "[dir=\"rtl\"] .spectrum-Slider .spectrum-Slider-handle:before" + ".spectrum-Slider:not(.spectrum-Slider--sideLabel) .spectrum-Slider-labelContainer + .spectrum-Slider-controls:has(.spectrum-Slider-ramp)" ], "modifiers": [ "--mod-animation-duration-100", @@ -258,29 +252,6 @@ "--spectrum-spacing-900", "--spectrum-text-to-visual-75" ], - "system-theme": [ - "--system-slider-handle-background-color", - "--system-slider-handle-background-color-disabled", - "--system-slider-handle-border-color", - "--system-slider-handle-border-color-down", - "--system-slider-handle-border-color-hover", - "--system-slider-handle-border-color-key-focus", - "--system-slider-handle-border-radius", - "--system-slider-handle-disabled-background-color", - "--system-slider-handle-focus-ring-color-key-focus", - "--system-slider-ramp-handle-background-color", - "--system-slider-ramp-track-color", - "--system-slider-ramp-track-color-disabled", - "--system-slider-size-l-handle-border-radius", - "--system-slider-size-m-handle-border-radius", - "--system-slider-size-s-handle-border-radius", - "--system-slider-size-xl-handle-border-radius", - "--system-slider-tick-mark-color", - "--system-slider-ticks-handle-background-color", - "--system-slider-track-color", - "--system-slider-track-corner-radius", - "--system-slider-track-fill-color" - ], "passthroughs": [], "high-contrast": [ "--highcontrast-slider-filled-track-fill-color", diff --git a/components/slider/index.css b/components/slider/index.css index d49f584aab0..54c875ab00e 100644 --- a/components/slider/index.css +++ b/components/slider/index.css @@ -11,9 +11,29 @@ * governing permissions and limitations under the License. */ -@import "./themes/spectrum-two.css"; - .spectrum-Slider { + --spectrum-slider-track-color: var(--spectrum-gray-200); + --spectrum-slider-track-fill-color: var(--spectrum-gray-700); + --spectrum-slider-ramp-track-color: var(--spectrum-gray-400); + --spectrum-slider-ramp-track-color-disabled: var(--spectrum-gray-100); + + --spectrum-slider-handle-background-color: transparent; + --spectrum-slider-handle-background-color-disabled: transparent; + --spectrum-slider-ramp-handle-background-color: var(--spectrum-gray-75); + --spectrum-slider-ticks-handle-background-color: var(--spectrum-gray-75); + --spectrum-slider-handle-border-color: var(--spectrum-gray-700); + --spectrum-slider-handle-disabled-background-color: var(--spectrum-gray-75); + + --spectrum-slider-tick-mark-color: var(--spectrum-gray-200); + + --spectrum-slider-handle-border-color-hover: var(--spectrum-gray-800); + --spectrum-slider-handle-border-color-down: var(--spectrum-gray-800); + --spectrum-slider-handle-border-color-key-focus: var(--spectrum-gray-800); + --spectrum-slider-handle-focus-ring-color-key-focus: var(--spectrum-focus-indicator-color); + --spectrum-slider-handle-border-radius: var(--spectrum-corner-radius-500); + + --spectrum-slider-track-corner-radius: 2px; + /* default sizing, matches t-shirt size M */ --spectrum-slider-font-size: var(--spectrum-font-size-75); --spectrum-slider-handle-size: var(--spectrum-slider-handle-size-medium); @@ -78,6 +98,8 @@ } .spectrum-Slider--sizeS { + --spectrum-slider-handle-border-radius: var(--spectrum-corner-radius-500); + --spectrum-slider-font-size: var(--spectrum-font-size-75); --spectrum-slider-handle-size: var(--spectrum-slider-handle-size-small); --spectrum-slider-control-height: var(--spectrum-component-height-75); @@ -88,6 +110,8 @@ } .spectrum-Slider--sizeL { + --spectrum-slider-handle-border-radius: calc(var(--spectrum-corner-radius-500) * 4); + --spectrum-slider-font-size: var(--spectrum-font-size-100); --spectrum-slider-handle-size: var(--spectrum-slider-handle-size-large); --spectrum-slider-control-height: var(--spectrum-component-height-200); @@ -101,6 +125,8 @@ } .spectrum-Slider--sizeXL { + --spectrum-slider-handle-border-radius: calc(var(--spectrum-corner-radius-500) * 4); + --spectrum-slider-font-size: var(--spectrum-font-size-200); --spectrum-slider-handle-size: var(--spectrum-slider-handle-size-extra-large); --spectrum-slider-control-height: var(--spectrum-component-height-300); diff --git a/components/slider/stories/template.js b/components/slider/stories/template.js index c69a96b487a..905fe770b40 100644 --- a/components/slider/stories/template.js +++ b/components/slider/stories/template.js @@ -7,9 +7,6 @@ import { styleMap } from "lit/directives/style-map.js"; import { when } from "lit/directives/when.js"; import "../index.css"; -import "../themes/spectrum.css"; -/* Must be imported last */ -import "../themes/express.css"; export const Template = ({ rootClass = "spectrum-Slider", diff --git a/components/slider/themes/express.css b/components/slider/themes/express.css deleted file mode 100644 index f9f149f4d93..00000000000 --- a/components/slider/themes/express.css +++ /dev/null @@ -1,39 +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. - */ - -/* @combine .spectrum.spectrum--express */ - -@import "./spectrum.css"; - -@container style(--system: express) { - .spectrum-Slider { - --spectrum-slider-track-color: var(--spectrum-gray-200); - --spectrum-slider-track-fill-color: var(--spectrum-gray-600); - --spectrum-slider-ramp-track-color: var(--spectrum-gray-300); - --spectrum-slider-ramp-track-color-disabled: var(--spectrum-gray-200); - - --spectrum-slider-handle-background-color: var(--spectrum-gray-50); - --spectrum-slider-handle-background-color-disabled: var(--spectrum-gray-50); - --spectrum-slider-ramp-handle-background-color: var(--spectrum-gray-50); - --spectrum-slider-ticks-handle-background-color: var(--spectrum-gray-50); - --spectrum-slider-handle-border-color: var(--spectrum-gray-800); - --spectrum-slider-handle-disabled-background-color: var(--spectrum-gray-50); - - --spectrum-slider-tick-mark-color: var(--spectrum-gray-200); - - --spectrum-slider-handle-border-color-hover: var(--spectrum-gray-900); - --spectrum-slider-handle-border-color-down: var(--spectrum-gray-900); - --spectrum-slider-handle-border-color-key-focus: var(--spectrum-gray-900); - --spectrum-slider-handle-focus-ring-color-key-focus: var(--spectrum-focus-indicator-color); - } -} diff --git a/components/slider/themes/spectrum-two.css b/components/slider/themes/spectrum-two.css deleted file mode 100644 index b118d77cffd..00000000000 --- a/components/slider/themes/spectrum-two.css +++ /dev/null @@ -1,54 +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. - */ - -@container style(--system: spectrum) { - .spectrum-Slider { - --spectrum-slider-track-color: var(--spectrum-gray-200); - --spectrum-slider-track-fill-color: var(--spectrum-gray-700); - --spectrum-slider-ramp-track-color: var(--spectrum-gray-400); - --spectrum-slider-ramp-track-color-disabled: var(--spectrum-gray-100); - - --spectrum-slider-handle-background-color: transparent; - --spectrum-slider-handle-background-color-disabled: transparent; - --spectrum-slider-ramp-handle-background-color: var(--spectrum-gray-75); - --spectrum-slider-ticks-handle-background-color: var(--spectrum-gray-75); - --spectrum-slider-handle-border-color: var(--spectrum-gray-700); - --spectrum-slider-handle-disabled-background-color: var(--spectrum-gray-75); - - --spectrum-slider-tick-mark-color: var(--spectrum-gray-200); - - --spectrum-slider-handle-border-color-hover: var(--spectrum-gray-800); - --spectrum-slider-handle-border-color-down: var(--spectrum-gray-800); - --spectrum-slider-handle-border-color-key-focus: var(--spectrum-gray-800); - --spectrum-slider-handle-focus-ring-color-key-focus: var(--spectrum-focus-indicator-color); - - --spectrum-slider-track-corner-radius: 2px; - - &, - &.spectrum-Slider--sizeM { - --spectrum-slider-handle-border-radius: var(--spectrum-corner-radius-500); - } - - &.spectrum-Slider--sizeS { - --spectrum-slider-handle-border-radius: var(--spectrum-corner-radius-500); - } - - &.spectrum-Slider--sizeL { - --spectrum-slider-handle-border-radius: calc(var(--spectrum-corner-radius-500) * 4); - } - - &.spectrum-Slider--sizeXL { - --spectrum-slider-handle-border-radius: calc(var(--spectrum-corner-radius-500) * 4); - } - } -} diff --git a/components/slider/themes/spectrum.css b/components/slider/themes/spectrum.css deleted file mode 100644 index f411427cc8d..00000000000 --- a/components/slider/themes/spectrum.css +++ /dev/null @@ -1,45 +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. - */ - -/* @combine .spectrum.spectrum--legacy */ - -@import "./spectrum-two.css"; - -@container style(--system: legacy) { - .spectrum-Slider { - --spectrum-slider-track-color: var(--spectrum-gray-300); - --spectrum-slider-ramp-track-color-disabled: var(--spectrum-gray-200); - --spectrum-slider-ramp-handle-background-color: var(--spectrum-gray-100); - --spectrum-slider-ticks-handle-background-color: var(--spectrum-gray-100); - --spectrum-slider-handle-disabled-background-color: var(--spectrum-gray-100); - --spectrum-slider-tick-mark-color: var(--spectrum-gray-300); - --spectrum-slider-track-corner-radius: var(--spectrum-corner-radius-75); - - &, - &.spectrum-Slider--sizeM { - --spectrum-slider-handle-border-radius: var(--spectrum-corner-radius-200); - } - - &.spectrum-Slider--sizeS { - --spectrum-slider-handle-border-radius: var(--spectrum-corner-radius-200); - } - - &.spectrum-Slider--sizeL { - --spectrum-slider-handle-border-radius: calc(var(--spectrum-corner-radius-200) * 4); - } - - &.spectrum-Slider--sizeXL { - --spectrum-slider-handle-border-radius: calc(var(--spectrum-corner-radius-200) * 4); - } - } -} diff --git a/components/splitview/dist/metadata.json b/components/splitview/dist/metadata.json index 4902e8e2368..c6925723f7c 100644 --- a/components/splitview/dist/metadata.json +++ b/components/splitview/dist/metadata.json @@ -81,11 +81,6 @@ "--spectrum-gray-75", "--spectrum-gray-800" ], - "system-theme": [ - "--system-split-view-background-color", - "--system-split-view-gripper-border-radius", - "--system-split-view-handle-background-color" - ], "passthroughs": [], "high-contrast": [ "--highcontrast-splitview-handle-background-color", diff --git a/components/splitview/index.css b/components/splitview/index.css index 81ca706a34d..990108806d3 100644 --- a/components/splitview/index.css +++ b/components/splitview/index.css @@ -11,9 +11,11 @@ * governing permissions and limitations under the License. */ -@import "./themes/spectrum-two.css"; - .spectrum-SplitView { + --spectrum-splitview-background-color: var(--spectrum-gray-75); + --spectrum-splitview-handle-background-color: var(--spectrum-gray-200); + --spectrum-splitview-gripper-border-radius: 2px; + --spectrum-splitview-vertical-width: 100%; --spectrum-splitview-vertical-gripper-width: 50%; --spectrum-splitview-vertical-gripper-outer-width: 100%; diff --git a/components/splitview/stories/template.js b/components/splitview/stories/template.js index 4fb08b911dd..aacdd00a3e7 100644 --- a/components/splitview/stories/template.js +++ b/components/splitview/stories/template.js @@ -3,9 +3,6 @@ import { classMap } from "lit/directives/class-map.js"; import { when } from "lit/directives/when.js"; import "../index.css"; -import "../themes/spectrum.css"; -/* Must be imported last */ -import "../themes/express.css"; export const Template = ({ rootClass = "spectrum-SplitView", diff --git a/components/splitview/themes/express.css b/components/splitview/themes/express.css deleted file mode 100644 index 9fd550418f2..00000000000 --- a/components/splitview/themes/express.css +++ /dev/null @@ -1,16 +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. - */ - -/* @combine .spectrum.spectrum--express */ - -@import "./spectrum.css"; diff --git a/components/splitview/themes/spectrum-two.css b/components/splitview/themes/spectrum-two.css deleted file mode 100644 index 14ef6131e5a..00000000000 --- a/components/splitview/themes/spectrum-two.css +++ /dev/null @@ -1,20 +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. - */ - -@container style(--system: spectrum) { - .spectrum-SplitView { - --spectrum-splitview-background-color: var(--spectrum-gray-75); - --spectrum-splitview-handle-background-color: var(--spectrum-gray-200); - --spectrum-splitview-gripper-border-radius: 2px; - } -} diff --git a/components/splitview/themes/spectrum.css b/components/splitview/themes/spectrum.css deleted file mode 100644 index 209e46a4b3b..00000000000 --- a/components/splitview/themes/spectrum.css +++ /dev/null @@ -1,24 +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. - */ - -/* @combine .spectrum.spectrum--legacy */ - -@import "./spectrum-two.css"; - -@container style(--system: legacy) { - .spectrum-SplitView { - --spectrum-splitview-background-color: var(--spectrum-gray-100); - --spectrum-splitview-handle-background-color: var(--spectrum-gray-300); - --spectrum-splitview-gripper-border-radius: var(--spectrum-corner-radius-75); - } -} diff --git a/components/statuslight/dist/metadata.json b/components/statuslight/dist/metadata.json index 7c7c6a7587f..ecfd85258a0 100644 --- a/components/statuslight/dist/metadata.json +++ b/components/statuslight/dist/metadata.json @@ -160,7 +160,6 @@ "--spectrum-text-to-visual-75", "--spectrum-yellow-visual-color" ], - "system-theme": [], "passthroughs": [], "high-contrast": [ "--highcontrast-statuslight-content-color-default", diff --git a/components/steplist/dist/metadata.json b/components/steplist/dist/metadata.json index 3e4e5dc0bed..27faf429c11 100644 --- a/components/steplist/dist/metadata.json +++ b/components/steplist/dist/metadata.json @@ -40,10 +40,7 @@ ".spectrum-Steplist-label:dir(rtl)", ".spectrum-Steplist-marker", ".spectrum-Steplist-markerContainer", - ".spectrum-Steplist-segment", - "[dir=\"rtl\"] .spectrum-Steplist-item:last-child .spectrum-Steplist-label", - "[dir=\"rtl\"] .spectrum-Steplist-item:only-child .spectrum-Steplist-label", - "[dir=\"rtl\"] .spectrum-Steplist-label" + ".spectrum-Steplist-segment" ], "modifiers": [ "--mod-steplist-complete-label-text-color", @@ -91,10 +88,6 @@ "--spectrum-gray-700", "--spectrum-gray-800" ], - "system-theme": [ - "--system-steplist-incomplete-marker-border-color", - "--system-steplist-incomplete-segment-border-block-end-color" - ], "passthroughs": [], "high-contrast": [ "--highcontrast-steplist-complete-marker-background-color", diff --git a/components/steplist/index.css b/components/steplist/index.css index 7fc57091919..62900591018 100644 --- a/components/steplist/index.css +++ b/components/steplist/index.css @@ -11,9 +11,10 @@ * governing permissions and limitations under the License. */ -@import "./themes/spectrum-two.css"; - .spectrum-Steplist { + --spectrum-steplist-incomplete-marker-border-color: var(--spectrum-gray-200); + --spectrum-steplist-incomplete-segment-border-block-end-color: var(--spectrum-gray-200); + /* The width of a step */ --spectrum-steplist-step-width: 80px; diff --git a/components/steplist/stories/template.js b/components/steplist/stories/template.js index ea9a57ef420..7edfdf8199b 100644 --- a/components/steplist/stories/template.js +++ b/components/steplist/stories/template.js @@ -6,9 +6,6 @@ import { ifDefined } from "lit/directives/if-defined.js"; import { repeat } from "lit/directives/repeat.js"; import "../index.css"; -import "../themes/spectrum.css"; -/* Must be imported last */ -import "../themes/express.css"; export const SteplistItem = ({ rootClass = "spectrum-Steplist-item", diff --git a/components/steplist/themes/express.css b/components/steplist/themes/express.css deleted file mode 100644 index 9fd550418f2..00000000000 --- a/components/steplist/themes/express.css +++ /dev/null @@ -1,16 +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. - */ - -/* @combine .spectrum.spectrum--express */ - -@import "./spectrum.css"; diff --git a/components/steplist/themes/spectrum-two.css b/components/steplist/themes/spectrum-two.css deleted file mode 100644 index 649e9fb4d3a..00000000000 --- a/components/steplist/themes/spectrum-two.css +++ /dev/null @@ -1,19 +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. - */ - -@container style(--system: spectrum) { - .spectrum-Steplist { - --spectrum-steplist-incomplete-marker-border-color: var(--spectrum-gray-200); - --spectrum-steplist-incomplete-segment-border-block-end-color: var(--spectrum-gray-200); - } -} diff --git a/components/steplist/themes/spectrum.css b/components/steplist/themes/spectrum.css deleted file mode 100644 index bfe1e5f6f8c..00000000000 --- a/components/steplist/themes/spectrum.css +++ /dev/null @@ -1,23 +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. - */ - -/* @combine .spectrum.spectrum--legacy */ - -@import "./spectrum-two.css"; - -@container style(--system: legacy) { - .spectrum-Steplist { - --spectrum-steplist-incomplete-marker-border-color: var(--spectrum-gray-300); - --spectrum-steplist-incomplete-segment-border-block-end-color: var(--spectrum-gray-300); - } -} diff --git a/components/stepper/dist/metadata.json b/components/stepper/dist/metadata.json index cfea6e878d6..03a2e756459 100644 --- a/components/stepper/dist/metadata.json +++ b/components/stepper/dist/metadata.json @@ -32,7 +32,6 @@ ".spectrum-Stepper.spectrum-Stepper--quiet:not(.is-disabled):focus:hover", ".spectrum-Stepper.spectrum-Stepper--quiet:not(.is-disabled):hover", ".spectrum-Stepper.spectrum-Stepper--sizeL", - ".spectrum-Stepper.spectrum-Stepper--sizeM", ".spectrum-Stepper.spectrum-Stepper--sizeS", ".spectrum-Stepper.spectrum-Stepper--sizeXL", ".spectrum-Stepper:before", @@ -143,31 +142,6 @@ "--spectrum-negative-border-color-key-focus", "--spectrum-text-field-minimum-width-multiplier" ], - "system-theme": [ - "--system-stepper-border-color-default", - "--system-stepper-border-color-disabled", - "--system-stepper-border-color-focus", - "--system-stepper-border-color-focus-hover", - "--system-stepper-border-color-focus-hover-invalid", - "--system-stepper-border-color-focus-invalid", - "--system-stepper-border-color-hover", - "--system-stepper-border-color-invalid", - "--system-stepper-border-color-keyboard-focus", - "--system-stepper-border-color-keyboard-focus-invalid", - "--system-stepper-border-width", - "--system-stepper-button-border-width", - "--system-stepper-button-border-width-disabled", - "--system-stepper-buttons-background-color", - "--system-stepper-buttons-background-color-disabled", - "--system-stepper-buttons-border-color", - "--system-stepper-buttons-border-color-focus", - "--system-stepper-buttons-border-color-hover", - "--system-stepper-buttons-border-color-keyboard-focus", - "--system-stepper-buttons-border-style", - "--system-stepper-buttons-border-width", - "--system-stepper-quiet-button-edge-to-fill", - "--system-stepper-quiet-buttons-border-style" - ], "passthroughs": [ "--mod-infield-button-border-block-end-width", "--mod-infield-button-border-color", diff --git a/components/stepper/index.css b/components/stepper/index.css index f3c9682c07d..3fdb3b69cd7 100644 --- a/components/stepper/index.css +++ b/components/stepper/index.css @@ -11,8 +11,6 @@ * governing permissions and limitations under the License. */ -@import "./themes/spectrum-two.css"; - /* --- High contrast settings --- */ @media (forced-colors: active) { .spectrum-Stepper { @@ -73,6 +71,34 @@ /* --- Component-level definitions --- */ .spectrum-Stepper { + --spectrum-stepper-border-width: var(--spectrum-border-width-100); + --spectrum-stepper-border-color-default: var(--spectrum-gray-500); + --spectrum-stepper-border-color-hover: var(--spectrum-gray-600); + --spectrum-stepper-border-color-focus: var(--spectrum-gray-800); + --spectrum-stepper-border-color-focus-hover: var(--spectrum-gray-900); + --spectrum-stepper-border-color-keyboard-focus: var(--spectrum-gray-800); + + --spectrum-stepper-buttons-border-style: none; + --spectrum-stepper-buttons-border-width: 0; + --spectrum-stepper-buttons-border-color: var(--spectrum-gray-500); + --spectrum-stepper-buttons-background-color: var(--spectrum-gray-100); + --spectrum-stepper-buttons-border-color-hover: var(--spectrum-gray-600); + --spectrum-stepper-buttons-border-color-focus: var(--spectrum-gray-800); + --spectrum-stepper-buttons-border-color-keyboard-focus: var(--spectrum-gray-800); + + --spectrum-stepper-button-border-width: var(--spectrum-border-width-100); + + /** Invalid **/ + --spectrum-stepper-border-color-invalid: var(--spectrum-negative-border-color-default); + --spectrum-stepper-border-color-focus-invalid: var(--spectrum-negative-border-color-focus); + --spectrum-stepper-border-color-focus-hover-invalid: var(--spectrum-negative-border-color-focus-hover); + --spectrum-stepper-border-color-keyboard-focus-invalid: var(--spectrum-negative-border-color-key-focus); + + /** Disabled **/ + --spectrum-stepper-border-color-disabled: var(--spectrum-gray-300); + --spectrum-stepper-button-border-width-disabled: var(--spectrum-border-width-200); + --spectrum-stepper-buttons-background-color-disabled: var(--spectrum-gray-50); + --spectrum-stepper-border-color: var(--highcontrast-stepper-border-color, var(--mod-stepper-border-color, var(--spectrum-stepper-border-color-default))); --spectrum-stepper-border-radius: var(--mod-stepper-border-radius, var(--spectrum-corner-radius-100)); @@ -82,11 +108,8 @@ --spectrum-stepper-animation-duration: var(--mod-stepper-animation-duration, var(--spectrum-animation-duration-100)); - &, - &.spectrum-Stepper--sizeM { - --spectrum-stepper-button-width: var(--mod-stepper-button-width, var(--spectrum-in-field-button-width-stacked-medium)); - --spectrum-stepper-height: var(--mod-stepper-height, var(--spectrum-component-height-100)); - } + --spectrum-stepper-button-width: var(--mod-stepper-button-width, var(--spectrum-in-field-button-width-stacked-medium)); + --spectrum-stepper-height: var(--mod-stepper-height, var(--spectrum-component-height-100)); &.spectrum-Stepper--sizeS { --spectrum-stepper-button-width: var(--mod-stepper-button-width, var(--spectrum-in-field-button-width-stacked-small)); @@ -136,6 +159,8 @@ } &.spectrum-Stepper--quiet { + --spectrum-stepper-buttons-border-style: none; + --spectrum-stepper-button-edge-to-fill: 0; --mod-stepper-buttons-background-color: transparent; /* quiet hover */ @@ -225,6 +250,7 @@ } &.spectrum-Stepper--quiet { + /* @passthrough start -- MODS for quiet variant */ --mod-infield-button-width-stacked: var(--mod-stepper-button-width-quiet, var(--spectrum-stepper-button-width)); --mod-infield-button-border-color: var(--spectrum-stepper-border-color); --mod-infield-button-border-color-quiet: var(--spectrum-stepper-border-color); @@ -239,6 +265,7 @@ --mod-textfield-focus-indicator-color: transparent; --mod-textfield-background-color: transparent; --mod-textfield-border-color-hover: var(--highcontrast-stepper-border-color, var(--mod-stepper-border-color-hover, var(--spectrum-stepper-border-color-hover))); + /* @passthrough end */ &:not(.is-disabled) { &:hover { diff --git a/components/stepper/stories/template.js b/components/stepper/stories/template.js index fbb818b72f3..fb14155af87 100644 --- a/components/stepper/stories/template.js +++ b/components/stepper/stories/template.js @@ -8,9 +8,6 @@ import { styleMap } from "lit/directives/style-map.js"; import { when } from "lit/directives/when.js"; import "../index.css"; -import "../themes/spectrum.css"; -/* Must be imported last */ -import "../themes/express.css"; export const Template = ({ rootClass = "spectrum-Stepper", diff --git a/components/stepper/themes/express.css b/components/stepper/themes/express.css deleted file mode 100644 index 724f4e973ff..00000000000 --- a/components/stepper/themes/express.css +++ /dev/null @@ -1,53 +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. - */ - -/* @combine .spectrum.spectrum--express */ - -@import "./spectrum.css"; - -@container style(--system: express) { - .spectrum-Stepper { - --spectrum-stepper-border-width: var(--spectrum-border-width-200); - --spectrum-stepper-border-color-default: var(--spectrum-gray-400); - --spectrum-stepper-border-color-hover: var(--spectrum-gray-500); - --spectrum-stepper-border-color-focus: var(--spectrum-gray-800); - --spectrum-stepper-border-color-focus-hover: var(--spectrum-gray-900); - --spectrum-stepper-border-color-keyboard-focus: var(--spectrum-gray-900); - --spectrum-stepper-border-color-disabled: var(--spectrum-disabled-background-color); - - --spectrum-stepper-buttons-border-style: solid; - --spectrum-stepper-buttons-border-width: var(--spectrum-border-width-200); - --spectrum-stepper-buttons-border-color: transparent; - --spectrum-stepper-buttons-background-color: var(--spectrum-gray-50); - --spectrum-stepper-buttons-border-color-hover: transparent; - --spectrum-stepper-buttons-border-color-focus: transparent; - --spectrum-stepper-buttons-border-color-keyboard-focus: transparent; - - --spectrum-stepper-button-border-width: 0; - - /** Invalid **/ - --spectrum-stepper-border-color-invalid: transparent; - --spectrum-stepper-border-color-focus-invalid: transparent; - --spectrum-stepper-border-color-focus-hover-invalid: transparent; - --spectrum-stepper-border-color-keyboard-focus-invalid: transparent; - - /** Disabled **/ - --spectrum-stepper-button-border-width-disabled: 0; - --spectrum-stepper-buttons-background-color-disabled: var(--spectrum-disabled-background-color); - } - - .spectrum-Stepper--quiet { - --spectrum-stepper-buttons-border-style: none; - --spectrum-stepper-button-edge-to-fill: 0; - } -} diff --git a/components/stepper/themes/spectrum-two.css b/components/stepper/themes/spectrum-two.css deleted file mode 100644 index 18c580ff127..00000000000 --- a/components/stepper/themes/spectrum-two.css +++ /dev/null @@ -1,49 +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. - */ - -@container style(--system: spectrum) { - .spectrum-Stepper { - --spectrum-stepper-border-width: var(--spectrum-border-width-100); - --spectrum-stepper-border-color-default: var(--spectrum-gray-500); - --spectrum-stepper-border-color-hover: var(--spectrum-gray-600); - --spectrum-stepper-border-color-focus: var(--spectrum-gray-800); - --spectrum-stepper-border-color-focus-hover: var(--spectrum-gray-900); - --spectrum-stepper-border-color-keyboard-focus: var(--spectrum-gray-800); - - --spectrum-stepper-buttons-border-style: none; - --spectrum-stepper-buttons-border-width: 0; - --spectrum-stepper-buttons-border-color: var(--spectrum-gray-500); - --spectrum-stepper-buttons-background-color: var(--spectrum-gray-100); - --spectrum-stepper-buttons-border-color-hover: var(--spectrum-gray-600); - --spectrum-stepper-buttons-border-color-focus: var(--spectrum-gray-800); - --spectrum-stepper-buttons-border-color-keyboard-focus: var(--spectrum-gray-800); - - --spectrum-stepper-button-border-width: var(--spectrum-border-width-100); - - /** Invalid **/ - --spectrum-stepper-border-color-invalid: var(--spectrum-negative-border-color-default); - --spectrum-stepper-border-color-focus-invalid: var(--spectrum-negative-border-color-focus); - --spectrum-stepper-border-color-focus-hover-invalid: var(--spectrum-negative-border-color-focus-hover); - --spectrum-stepper-border-color-keyboard-focus-invalid: var(--spectrum-negative-border-color-key-focus); - - /** Disabled **/ - --spectrum-stepper-border-color-disabled: var(--spectrum-gray-300); - --spectrum-stepper-button-border-width-disabled: var(--spectrum-border-width-200); - --spectrum-stepper-buttons-background-color-disabled: var(--spectrum-gray-50); - } - - .spectrum-Stepper--quiet { - --spectrum-stepper-buttons-border-style: none; - --spectrum-stepper-button-edge-to-fill: 0; - } -} diff --git a/components/stepper/themes/spectrum.css b/components/stepper/themes/spectrum.css deleted file mode 100644 index 1b904f9f952..00000000000 --- a/components/stepper/themes/spectrum.css +++ /dev/null @@ -1,25 +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. - */ - -/* @combine .spectrum.spectrum--legacy */ - -@import "./spectrum-two.css"; - -@container style(--system: legacy) { - .spectrum-Stepper { - --spectrum-stepper-border-color-disabled: transparent; - --spectrum-stepper-button-border-width-disabled: var(--spectrum-border-width-100); - --spectrum-stepper-buttons-background-color: var(--spectrum-gray-50); - --spectrum-stepper-buttons-background-color-disabled: var(--spectrum-gray-100); - } -} diff --git a/components/swatch/dist/metadata.json b/components/swatch/dist/metadata.json index 896cc7acc7c..cf8b5e71c81 100644 --- a/components/swatch/dist/metadata.json +++ b/components/swatch/dist/metadata.json @@ -121,11 +121,6 @@ "--spectrum-workflow-icon-size-50", "--spectrum-workflow-icon-size-75" ], - "system-theme": [ - "--system-swatch-border-color", - "--system-swatch-border-radius", - "--system-swatch-inner-border-color-selected" - ], "passthroughs": [], "high-contrast": [ "--highcontrast-swatch-background-color-selected", diff --git a/components/swatch/index.css b/components/swatch/index.css index b6e636906e6..a4d3ca19d4e 100644 --- a/components/swatch/index.css +++ b/components/swatch/index.css @@ -11,8 +11,6 @@ * governing permissions and limitations under the License. */ -@import "./themes/spectrum-two.css"; - /* Windows high contrast mode */ @media (forced-colors: active) { .spectrum-Swatch { @@ -60,9 +58,14 @@ } .spectrum-Swatch { + --spectrum-swatch-border-color: rgba(var(--spectrum-gray-1000-rgb), var(--spectrum-swatch-border-color-opacity)); + --spectrum-swatch-inner-border-color-selected: var(--spectrum-gray-25); + --spectrum-swatch-border-radius: var(--spectrum-corner-radius-75); + + --spectrum-swatch-disabled-icon-color: var(--spectrum-white); + --spectrum-swatch-focus-indicator-border-radius: 8px; --spectrum-swatch-icon-border-color: rgba(var(--spectrum-black-rgb), var(--spectrum-swatch-disabled-icon-border-opacity)); - --spectrum-swatch-disabled-icon-color: var(--spectrum-white); --spectrum-swatch-border-thickness: var(--spectrum-border-width-100); --spectrum-swatch-border-thickness-selected: var(--spectrum-border-width-200); --spectrum-swatch-focus-indicator-thickness: var(--spectrum-focus-indicator-thickness); diff --git a/components/swatch/stories/template.js b/components/swatch/stories/template.js index f3658577a3f..c1ff884c4c6 100644 --- a/components/swatch/stories/template.js +++ b/components/swatch/stories/template.js @@ -9,9 +9,6 @@ import { when } from "lit/directives/when.js"; import { capitalize, lowerCase } from "lodash-es"; import "../index.css"; -import "../themes/spectrum.css"; -/* Must be imported last */ -import "../themes/express.css"; export const Template = ({ rootClass = "spectrum-Swatch", diff --git a/components/swatch/themes/express.css b/components/swatch/themes/express.css deleted file mode 100644 index 9fd550418f2..00000000000 --- a/components/swatch/themes/express.css +++ /dev/null @@ -1,16 +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. - */ - -/* @combine .spectrum.spectrum--express */ - -@import "./spectrum.css"; diff --git a/components/swatch/themes/spectrum-two.css b/components/swatch/themes/spectrum-two.css deleted file mode 100644 index ee21266473f..00000000000 --- a/components/swatch/themes/spectrum-two.css +++ /dev/null @@ -1,21 +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. - */ - -@container style(--system: spectrum) { - /* Swatch tokens */ - .spectrum-Swatch { - --spectrum-swatch-border-color: rgba(var(--spectrum-gray-1000-rgb), var(--spectrum-swatch-border-color-opacity)); - --spectrum-swatch-inner-border-color-selected: var(--spectrum-gray-25); - --spectrum-swatch-border-radius: var(--spectrum-corner-radius-75); - } -} diff --git a/components/swatch/themes/spectrum.css b/components/swatch/themes/spectrum.css deleted file mode 100644 index 3661de0250e..00000000000 --- a/components/swatch/themes/spectrum.css +++ /dev/null @@ -1,24 +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. - */ - -/* @combine .spectrum.spectrum--legacy */ - -@import "./spectrum-two.css"; - -@container style(--system: legacy) { - .spectrum-Swatch { - --spectrum-swatch-border-color: rgba(var(--spectrum-gray-900-rgb), var(--spectrum-swatch-border-color-opacity)); - --spectrum-swatch-inner-border-color-selected: var(--spectrum-gray-50); - --spectrum-swatch-border-radius: var(--spectrum-corner-radius-100); - } -} diff --git a/components/swatchgroup/dist/metadata.json b/components/swatchgroup/dist/metadata.json index 74adf019d54..24e3423ca5d 100644 --- a/components/swatchgroup/dist/metadata.json +++ b/components/swatchgroup/dist/metadata.json @@ -16,7 +16,6 @@ "--spectrum-spacing-50", "--spectrum-spacing-75" ], - "system-theme": [], "passthroughs": [], "high-contrast": [] } diff --git a/components/switch/dist/metadata.json b/components/switch/dist/metadata.json index 00a47cdd798..37d76fda6a7 100644 --- a/components/switch/dist/metadata.json +++ b/components/switch/dist/metadata.json @@ -72,8 +72,7 @@ ".spectrum-Switch:hover .spectrum-Switch-input[disabled] ~ .spectrum-Switch-label", ".spectrum-Switch:hover .spectrum-Switch-input[disabled]:checked + .spectrum-Switch-switch", ".spectrum-Switch:hover .spectrum-Switch-input[disabled]:checked + .spectrum-Switch-switch:before", - ".spectrum-Switch:hover .spectrum-Switch-input[disabled]:checked ~ .spectrum-Switch-label", - "[dir=\"rtl\"] .spectrum-Switch-input:checked + .spectrum-Switch-switch:before" + ".spectrum-Switch:hover .spectrum-Switch-input[disabled]:checked ~ .spectrum-Switch-label" ], "modifiers": [ "--mod-animation-duration-100", @@ -202,19 +201,6 @@ "--spectrum-text-to-control-300", "--spectrum-text-to-control-75" ], - "system-theme": [ - "--system-switch-background-color", - "--system-switch-background-color-disabled", - "--system-switch-handle-background-color", - "--system-switch-handle-border-color-default", - "--system-switch-handle-border-color-down", - "--system-switch-handle-border-color-focus", - "--system-switch-handle-border-color-hover", - "--system-switch-handle-border-color-selected-default", - "--system-switch-handle-border-color-selected-down", - "--system-switch-handle-border-color-selected-focus", - "--system-switch-handle-border-color-selected-hover" - ], "passthroughs": [], "high-contrast": [ "--highcontrast-switch-background-color", diff --git a/components/switch/index.css b/components/switch/index.css index 763ad359ab8..a811d410400 100644 --- a/components/switch/index.css +++ b/components/switch/index.css @@ -11,9 +11,21 @@ * governing permissions and limitations under the License. */ -@import "./themes/spectrum-two.css"; - .spectrum-Switch { + --spectrum-switch-handle-border-color-default: var(--spectrum-gray-600); + --spectrum-switch-handle-border-color-hover: var(--spectrum-gray-700); + --spectrum-switch-handle-border-color-down: var(--spectrum-gray-800); + --spectrum-switch-handle-border-color-focus: var(--spectrum-gray-700); + + --spectrum-switch-handle-border-color-selected-default: var(--spectrum-gray-700); + --spectrum-switch-handle-border-color-selected-hover: var(--spectrum-gray-800); + --spectrum-switch-handle-border-color-selected-down: var(--spectrum-gray-900); + --spectrum-switch-handle-border-color-selected-focus: var(--spectrum-gray-800); + + --spectrum-switch-background-color: var(--spectrum-gray-200); + --spectrum-switch-background-color-disabled: var(--spectrum-gray-200); + --spectrum-switch-handle-background-color: var(--spectrum-gray-50); + --spectrum-switch-label-color-default: var(--spectrum-neutral-content-color-default); --spectrum-switch-label-color-hover: var(--spectrum-neutral-content-color-hover); --spectrum-switch-label-color-down: var(--spectrum-neutral-content-color-down); diff --git a/components/switch/stories/template.js b/components/switch/stories/template.js index 5e67a3cc8b3..4f0877d5c86 100644 --- a/components/switch/stories/template.js +++ b/components/switch/stories/template.js @@ -6,9 +6,6 @@ import { styleMap } from "lit/directives/style-map.js"; import { when } from "lit/directives/when.js"; import "../index.css"; -import "../themes/spectrum.css"; -/* Must be imported last */ -import "../themes/express.css"; export const Template = ({ rootClass = "spectrum-Switch", diff --git a/components/switch/themes/express.css b/components/switch/themes/express.css deleted file mode 100644 index ac5198ba733..00000000000 --- a/components/switch/themes/express.css +++ /dev/null @@ -1,30 +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. - */ - -/* @combine .spectrum.spectrum--express */ - -@import "./spectrum.css"; - -@container style(--system: express) { - .spectrum-Switch { - --spectrum-switch-handle-border-color-default: var(--spectrum-gray-800); - --spectrum-switch-handle-border-color-hover: var(--spectrum-gray-900); - --spectrum-switch-handle-border-color-down: var(--spectrum-gray-900); - --spectrum-switch-handle-border-color-focus: var(--spectrum-gray-900); - - --spectrum-switch-handle-border-color-selected-default: var(--spectrum-gray-800); - --spectrum-switch-handle-border-color-selected-hover: var(--spectrum-gray-900); - --spectrum-switch-handle-border-color-selected-down: var(--spectrum-gray-900); - --spectrum-switch-handle-border-color-selected-focus: var(--spectrum-gray-900); - } -} diff --git a/components/switch/themes/spectrum-two.css b/components/switch/themes/spectrum-two.css deleted file mode 100644 index c2ed1a192a4..00000000000 --- a/components/switch/themes/spectrum-two.css +++ /dev/null @@ -1,30 +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. - */ - -@container style(--system: spectrum) { - .spectrum-Switch { - --spectrum-switch-handle-border-color-default: var(--spectrum-gray-600); - --spectrum-switch-handle-border-color-hover: var(--spectrum-gray-700); - --spectrum-switch-handle-border-color-down: var(--spectrum-gray-800); - --spectrum-switch-handle-border-color-focus: var(--spectrum-gray-700); - - --spectrum-switch-handle-border-color-selected-default: var(--spectrum-gray-700); - --spectrum-switch-handle-border-color-selected-hover: var(--spectrum-gray-800); - --spectrum-switch-handle-border-color-selected-down: var(--spectrum-gray-900); - --spectrum-switch-handle-border-color-selected-focus: var(--spectrum-gray-800); - - --spectrum-switch-background-color: var(--spectrum-gray-200); - --spectrum-switch-background-color-disabled: var(--spectrum-gray-200); - --spectrum-switch-handle-background-color: var(--spectrum-gray-50); - } -} diff --git a/components/switch/themes/spectrum.css b/components/switch/themes/spectrum.css deleted file mode 100644 index 8b32e03d8f3..00000000000 --- a/components/switch/themes/spectrum.css +++ /dev/null @@ -1,24 +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. - */ - -/* @combine .spectrum.spectrum--legacy */ - -@import "./spectrum-two.css"; - -@container style(--system: legacy) { - .spectrum-Switch { - --spectrum-switch-background-color: var(--spectrum-gray-300); - --spectrum-switch-background-color-disabled: var(--spectrum-gray-300); - --spectrum-switch-handle-background-color: var(--spectrum-gray-75); - } -} diff --git a/components/table/dist/metadata.json b/components/table/dist/metadata.json index e319678fb13..573f4948a72 100644 --- a/components/table/dist/metadata.json +++ b/components/table/dist/metadata.json @@ -122,8 +122,7 @@ ".spectrum-Table-thumbnailInner .spectrum-Table-thumbnailContent", ".spectrum-Table-thumbnailInner .spectrum-Thumbnail", ".spectrum-Table:dir(rtl)", - ".spectrum-Table:not(.spectrum-Table-scroller)", - "[dir=\"rtl\"] .spectrum-Table" + ".spectrum-Table:not(.spectrum-Table-scroller)" ], "modifiers": [ "--mod-table-border-color", @@ -435,18 +434,6 @@ "--spectrum-transparent-white-100", "--spectrum-transparent-white-25" ], - "system-theme": [ - "--system-table-border-color", - "--system-table-divider-color", - "--system-table-header-background-color", - "--system-table-icon-color-focus", - "--system-table-icon-color-focus-hover", - "--system-table-quiet-header-background-color", - "--system-table-quiet-row-background-color", - "--system-table-row-background-color", - "--system-table-section-header-background-color", - "--system-table-summary-row-background-color" - ], "passthroughs": ["--mod-checkbox-spacing", "--mod-thumbnail-size"], "high-contrast": [ "--highcontrast-table-border-color", diff --git a/components/table/index.css b/components/table/index.css index 830e1528ff4..cbd0c1c7966 100644 --- a/components/table/index.css +++ b/components/table/index.css @@ -11,8 +11,6 @@ * governing permissions and limitations under the License. */ -@import "./themes/spectrum-two.css"; - /********* HIGH CONTRAST *********/ @media (forced-colors: active) { .spectrum-Table { @@ -72,6 +70,15 @@ } .spectrum-Table { + --spectrum-table-header-background-color: var(--spectrum-transparent-white-25); + --spectrum-table-border-color: var(--spectrum-gray-200); + --spectrum-table-divider-color: var(--spectrum-gray-200); + --spectrum-table-row-background-color: var(--spectrum-gray-25); + --spectrum-table-summary-row-background-color: var(--spectrum-gray-100); + --spectrum-table-section-header-background-color: var(--spectrum-gray-100); + --spectrum-table-icon-color-focus: var(--spectrum-neutral-subdued-content-color-key-focus); + --spectrum-table-icon-color-focus-hover: var(--spectrum-neutral-subdued-content-color-hover); + --spectrum-table-cell-inline-space: var(--spectrum-table-edge-to-content); --spectrum-table-border-radius: var(--spectrum-corner-radius-100); @@ -389,6 +396,9 @@ } .spectrum-Table--quiet { + --spectrum-table-header-background-color: var(--spectrum-transparent-white-25); + --spectrum-table-row-background-color: var(--spectrum-transparent-white-25); + --mod-table-border-radius: var(--mod-table-border-radius--quiet, 0px); --mod-table-outer-border-inline-width: var(--mod-table-outer-border-inline-width--quiet, 0px); --mod-table-header-background-color: var(--mod-table-header-background-color--quiet, var(--spectrum-transparent-white-100)); diff --git a/components/table/stories/template.js b/components/table/stories/template.js index 662a6e3206b..8487cca716d 100644 --- a/components/table/stories/template.js +++ b/components/table/stories/template.js @@ -9,9 +9,6 @@ import { when } from "lit/directives/when.js"; import { html, literal } from "lit/static-html.js"; import "../index.css"; -import "../themes/spectrum.css"; -/* Must be imported last */ -import "../themes/express.css"; export const TableRowItem = ({ rootClass = "spectrum-Table", diff --git a/components/table/themes/express.css b/components/table/themes/express.css deleted file mode 100644 index 9fd550418f2..00000000000 --- a/components/table/themes/express.css +++ /dev/null @@ -1,16 +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. - */ - -/* @combine .spectrum.spectrum--express */ - -@import "./spectrum.css"; diff --git a/components/table/themes/spectrum-two.css b/components/table/themes/spectrum-two.css deleted file mode 100644 index 1c0a4684070..00000000000 --- a/components/table/themes/spectrum-two.css +++ /dev/null @@ -1,30 +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. - */ - -@container style(--system: spectrum) { - .spectrum-Table { - --spectrum-table-header-background-color: var(--spectrum-transparent-white-25); - --spectrum-table-border-color: var(--spectrum-gray-200); - --spectrum-table-divider-color: var(--spectrum-gray-200); - --spectrum-table-row-background-color: var(--spectrum-gray-25); - --spectrum-table-summary-row-background-color: var(--spectrum-gray-100); - --spectrum-table-section-header-background-color: var(--spectrum-gray-100); - --spectrum-table-icon-color-focus: var(--spectrum-neutral-subdued-content-color-key-focus); - --spectrum-table-icon-color-focus-hover: var(--spectrum-neutral-subdued-content-color-hover); - } - - .spectrum-Table--quiet { - --spectrum-table-header-background-color: var(--spectrum-transparent-white-25); - --spectrum-table-row-background-color: var(--spectrum-transparent-white-25); - } -} diff --git a/components/table/themes/spectrum.css b/components/table/themes/spectrum.css deleted file mode 100644 index a40d7fabde2..00000000000 --- a/components/table/themes/spectrum.css +++ /dev/null @@ -1,34 +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. - */ - -/* @combine .spectrum.spectrum--legacy */ - -@import "./spectrum-two.css"; - -@container style(--system: legacy) { - .spectrum-Table { - --spectrum-table-header-background-color: var(--spectrum-transparent-white-100); - --spectrum-table-border-color: var(--spectrum-gray-300); - --spectrum-table-divider-color: var(--spectrum-gray-300); - --spectrum-table-row-background-color: var(--spectrum-gray-50); - --spectrum-table-summary-row-background-color: var(--spectrum-gray-200); - --spectrum-table-section-header-background-color: var(--spectrum-gray-200); - --spectrum-table-icon-color-focus: var(--spectrum-neutral-subdued-content-color-key-focus); - --spectrum-table-icon-color-focus-hover: var(--spectrum-neutral-subdued-content-down); - } - - .spectrum-Table--quiet { - --spectrum-table-header-background-color: var(--spectrum-transparent-white-100); - --spectrum-table-row-background-color: var(--spectrum-transparent-white-100); - } -} diff --git a/components/tabs/dist/metadata.json b/components/tabs/dist/metadata.json index 544295ef045..959f04854d4 100644 --- a/components/tabs/dist/metadata.json +++ b/components/tabs/dist/metadata.json @@ -50,9 +50,7 @@ ".spectrum-Tabs.spectrum-Tabs--sizeL", ".spectrum-Tabs.spectrum-Tabs--sizeS", ".spectrum-Tabs.spectrum-Tabs--sizeXL", - ".spectrum-Tabs.spectrum-Tabs--vertical.spectrum-Tabs--compact .spectrum-Tabs-item:before", - "[dir=\"rtl\"] .spectrum-Tabs--vertical", - "[dir=\"rtl\"] .spectrum-Tabs--vertical-right" + ".spectrum-Tabs.spectrum-Tabs--vertical.spectrum-Tabs--compact .spectrum-Tabs-item:before" ], "modifiers": [ "--mod-tabs-animation-duration", @@ -206,10 +204,6 @@ "--spectrum-workflow-icon-size-50", "--spectrum-workflow-icon-size-75" ], - "system-theme": [ - "--system-tabs-divider-background-color", - "--system-tabs-font-weight" - ], "passthroughs": [], "high-contrast": [ "--highcontrast-tabs-color", diff --git a/components/tabs/index.css b/components/tabs/index.css index 6727243f384..c2a430f3d7c 100644 --- a/components/tabs/index.css +++ b/components/tabs/index.css @@ -11,9 +11,10 @@ * governing permissions and limitations under the License. */ -@import "./themes/spectrum-two.css"; - .spectrum-Tabs { + --spectrum-tabs-font-weight: var(--spectrum-regular-font-weight); + --spectrum-tabs-divider-background-color: var(--spectrum-gray-200); + /* Default is Medium sizing */ --spectrum-tabs-item-height: var(--spectrum-tab-item-height-medium); --spectrum-tabs-item-horizontal-spacing: var(--spectrum-tab-item-to-tab-item-horizontal-medium); diff --git a/components/tabs/stories/template.js b/components/tabs/stories/template.js index 716f45ea2e5..387683f1ae9 100644 --- a/components/tabs/stories/template.js +++ b/components/tabs/stories/template.js @@ -10,9 +10,6 @@ import { when } from "lit/directives/when.js"; import { html, literal } from "lit/static-html.js"; import "../index.css"; -import "../themes/spectrum.css"; -/* Must be imported last */ -import "../themes/express.css"; export const Template = ({ rootClass = "spectrum-Tabs", diff --git a/components/tabs/themes/express.css b/components/tabs/themes/express.css deleted file mode 100644 index 83b105f4ac8..00000000000 --- a/components/tabs/themes/express.css +++ /dev/null @@ -1,22 +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. - */ - -/* @combine .spectrum.spectrum--express */ - -@import "./spectrum.css"; - -@container style(--system: express) { - .spectrum-Tabs { - --spectrum-tabs-font-weight: var(--spectrum-bold-font-weight); - } -} diff --git a/components/tabs/themes/spectrum-two.css b/components/tabs/themes/spectrum-two.css deleted file mode 100644 index 71d71c3c719..00000000000 --- a/components/tabs/themes/spectrum-two.css +++ /dev/null @@ -1,19 +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. - */ - -@container style(--system: spectrum) { - .spectrum-Tabs { - --spectrum-tabs-font-weight: var(--spectrum-regular-font-weight); - --spectrum-tabs-divider-background-color: var(--spectrum-gray-200); - } -} diff --git a/components/tabs/themes/spectrum.css b/components/tabs/themes/spectrum.css deleted file mode 100644 index 97cb90cac5b..00000000000 --- a/components/tabs/themes/spectrum.css +++ /dev/null @@ -1,23 +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. - */ - -/* @combine .spectrum.spectrum--legacy */ - -@import "./spectrum-two.css"; - -@container style(--system: legacy) { - .spectrum-Tabs { - --spectrum-tabs-font-weight: var(--spectrum-regular-font-weight); - --spectrum-tabs-divider-background-color: var(--spectrum-gray-300); - } -} diff --git a/components/tag/dist/metadata.json b/components/tag/dist/metadata.json index 10a87e4aa2c..20d2158b8a1 100644 --- a/components/tag/dist/metadata.json +++ b/components/tag/dist/metadata.json @@ -280,39 +280,6 @@ "--spectrum-workflow-icon-size-200", "--spectrum-workflow-icon-size-75" ], - "system-theme": [ - "--system-tag-background-color", - "--system-tag-background-color-active", - "--system-tag-background-color-disabled", - "--system-tag-background-color-focus", - "--system-tag-background-color-hover", - "--system-tag-border-color", - "--system-tag-border-color-active", - "--system-tag-border-color-disabled", - "--system-tag-border-color-focus", - "--system-tag-border-color-hover", - "--system-tag-border-color-selected", - "--system-tag-border-color-selected-active", - "--system-tag-border-color-selected-focus", - "--system-tag-border-color-selected-hover", - "--system-tag-content-color", - "--system-tag-content-color-active", - "--system-tag-content-color-focus", - "--system-tag-content-color-hover", - "--system-tag-content-color-selected", - "--system-tag-size-large-clear-button-spacing-inline-end", - "--system-tag-size-large-corner-radius", - "--system-tag-size-large-label-spacing-inline-end", - "--system-tag-size-large-spacing-inline-start", - "--system-tag-size-medium-clear-button-spacing-inline-end", - "--system-tag-size-medium-corner-radius", - "--system-tag-size-medium-label-spacing-inline-end", - "--system-tag-size-medium-spacing-inline-start", - "--system-tag-size-small-clear-button-spacing-inline-end", - "--system-tag-size-small-corner-radius", - "--system-tag-size-small-label-spacing-inline-end", - "--system-tag-size-small-spacing-inline-start" - ], "passthroughs": [ "--mod-avatar-opacity-disabled", "--mod-clear-button-width", diff --git a/components/tag/index.css b/components/tag/index.css index 9385b432e60..23a6453edce 100644 --- a/components/tag/index.css +++ b/components/tag/index.css @@ -11,9 +11,47 @@ * governing permissions and limitations under the License. */ -@import "./themes/spectrum-two.css"; - .spectrum-Tag { + --spectrum-tag-background-color: var(--spectrum-gray-50); + --spectrum-tag-background-color-hover: var(--spectrum-gray-50); + --spectrum-tag-background-color-active: var(--spectrum-gray-100); + --spectrum-tag-background-color-focus: var(--spectrum-gray-50); + + --spectrum-tag-size-small-corner-radius: var(--spectrum-corner-radius-100); + --spectrum-tag-size-medium-corner-radius: var(--spectrum-corner-radius-100); + --spectrum-tag-size-large-corner-radius: var(--spectrum-corner-radius-100); + + --spectrum-tag-border-color: var(--spectrum-gray-700); + --spectrum-tag-border-color-hover: var(--spectrum-gray-800); + --spectrum-tag-border-color-active: var(--spectrum-gray-900); + --spectrum-tag-border-color-focus: var(--spectrum-gray-800); + + --spectrum-tag-content-color: var(--spectrum-neutral-subdued-content-color-default); + --spectrum-tag-content-color-hover: var(--spectrum-neutral-subdued-content-color-hover); + --spectrum-tag-content-color-active: var(--spectrum-neutral-subdued-content-color-down); + --spectrum-tag-content-color-focus: var(--spectrum-neutral-subdued-content-color-key-focus); + --spectrum-tag-content-color-selected: var(--spectrum-gray-25); + + --spectrum-tag-border-color-selected: var(--spectrum-neutral-subdued-background-color-default); + --spectrum-tag-border-color-selected-hover: var(--spectrum-neutral-subdued-background-color-hover); + --spectrum-tag-border-color-selected-active: var(--spectrum-neutral-subdued-background-color-down); + --spectrum-tag-border-color-selected-focus: var(--spectrum-neutral-subdued-background-color-key-focus); + + /* disabled variant */ + --spectrum-tag-border-color-disabled: transparent; + --spectrum-tag-background-color-disabled: var(--spectrum-disabled-background-color); + + /* tokens based on theme and t-shirt size */ + --spectrum-tag-size-small-spacing-inline-start: var(--spectrum-component-edge-to-visual-75); + --spectrum-tag-size-small-label-spacing-inline-end: var(--spectrum-component-edge-to-text-75); + --spectrum-tag-size-small-clear-button-spacing-inline-end: var(--spectrum-component-edge-to-visual-75); + --spectrum-tag-size-medium-spacing-inline-start: var(--spectrum-component-edge-to-visual-100); + --spectrum-tag-size-medium-label-spacing-inline-end: var(--spectrum-component-edge-to-text-100); + --spectrum-tag-size-medium-clear-button-spacing-inline-end: var(--spectrum-component-edge-to-visual-100); + --spectrum-tag-size-large-spacing-inline-start: var(--spectrum-component-edge-to-visual-200); + --spectrum-tag-size-large-label-spacing-inline-end: var(--spectrum-component-edge-to-text-200); + --spectrum-tag-size-large-clear-button-spacing-inline-end: var(--spectrum-component-edge-to-visual-200); + /* TODO - replace placeholder disabled avatar opacity with correct token once avatar is migrated */ --spectrum-avatar-opacity-disabled: 0.3; diff --git a/components/tag/stories/template.js b/components/tag/stories/template.js index 90c72435bae..ee4b244dd43 100644 --- a/components/tag/stories/template.js +++ b/components/tag/stories/template.js @@ -9,9 +9,6 @@ import { styleMap } from "lit/directives/style-map.js"; import { when } from "lit/directives/when.js"; import "../index.css"; -import "../themes/spectrum.css"; -/* Must be imported last */ -import "../themes/express.css"; export const Template = ({ rootClass = "spectrum-Tag", diff --git a/components/tag/themes/express.css b/components/tag/themes/express.css deleted file mode 100644 index 7c2c2e67303..00000000000 --- a/components/tag/themes/express.css +++ /dev/null @@ -1,64 +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. - */ - -/* @combine .spectrum.spectrum--express */ - -@import "./spectrum.css"; - -@container style(--system: express) { - .spectrum-Tag { - /* border */ - --spectrum-tag-background-color: transparent; - --spectrum-tag-background-color-hover: var(--spectrum-gray-300); - --spectrum-tag-background-color-active: var(--spectrum-gray-400); - --spectrum-tag-background-color-focus: var(--spectrum-gray-300); - - /* express has pill style full corner radius */ - --spectrum-tag-size-small-corner-radius: var(--spectrum-component-height-75); - --spectrum-tag-size-medium-corner-radius: var(--spectrum-component-height-100); - --spectrum-tag-size-large-corner-radius: var(--spectrum-component-height-200); - - /* background */ - --spectrum-tag-border-color: var(--spectrum-gray-300); - --spectrum-tag-border-color-hover: var(--spectrum-gray-400); - --spectrum-tag-border-color-active: var(--spectrum-gray-500); - --spectrum-tag-border-color-focus: var(--spectrum-gray-400); - - /* content color */ - --spectrum-tag-content-color: var(--spectrum-neutral-content-color-default); - --spectrum-tag-content-color-hover: var(--spectrum-neutral-content-color-hover); - --spectrum-tag-content-color-active: var(--spectrum-neutral-content-color-down); - --spectrum-tag-content-color-focus: var(--spectrum-neutral-content-color-key-focus); - - /* selected */ - --spectrum-tag-border-color-selected: var(--spectrum-neutral-background-color-default); - --spectrum-tag-border-color-selected-hover: var(--spectrum-neutral-background-color-hover); - --spectrum-tag-border-color-selected-active: var(--spectrum-neutral-background-color-down); - --spectrum-tag-border-color-selected-focus: var(--spectrum-neutral-background-color-key-focus); - - /* disabled */ - --spectrum-tag-border-color-disabled: var(--spectrum-disabled-border-color); - --spectrum-tag-background-color-disabled: transparent; - - /* tokens based on theme and t-shirt size */ - --spectrum-tag-size-small-spacing-inline-start: var(--spectrum-component-pill-edge-to-visual-75); - --spectrum-tag-size-small-label-spacing-inline-end: var(--spectrum-component-pill-edge-to-text-75); - --spectrum-tag-size-small-clear-button-spacing-inline-end: var(--spectrum-component-pill-edge-to-visual-75); - --spectrum-tag-size-medium-spacing-inline-start: var(--spectrum-component-pill-edge-to-visual-100); - --spectrum-tag-size-medium-label-spacing-inline-end: var(--spectrum-component-pill-edge-to-text-100); - --spectrum-tag-size-medium-clear-button-spacing-inline-end: var(--spectrum-component-pill-edge-to-visual-100); - --spectrum-tag-size-large-spacing-inline-start: var(--spectrum-component-pill-edge-to-visual-200); - --spectrum-tag-size-large-label-spacing-inline-end: var(--spectrum-component-pill-edge-to-text-200); - --spectrum-tag-size-large-clear-button-spacing-inline-end: var(--spectrum-component-pill-edge-to-visual-200); - } -} diff --git a/components/tag/themes/spectrum-two.css b/components/tag/themes/spectrum-two.css deleted file mode 100644 index f9c51730f48..00000000000 --- a/components/tag/themes/spectrum-two.css +++ /dev/null @@ -1,56 +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. - */ - -@container style(--system: spectrum) { - .spectrum-Tag { - --spectrum-tag-background-color: var(--spectrum-gray-50); - --spectrum-tag-background-color-hover: var(--spectrum-gray-50); - --spectrum-tag-background-color-active: var(--spectrum-gray-100); - --spectrum-tag-background-color-focus: var(--spectrum-gray-50); - - --spectrum-tag-size-small-corner-radius: var(--spectrum-corner-radius-100); - --spectrum-tag-size-medium-corner-radius: var(--spectrum-corner-radius-100); - --spectrum-tag-size-large-corner-radius: var(--spectrum-corner-radius-100); - - --spectrum-tag-border-color: var(--spectrum-gray-700); - --spectrum-tag-border-color-hover: var(--spectrum-gray-800); - --spectrum-tag-border-color-active: var(--spectrum-gray-900); - --spectrum-tag-border-color-focus: var(--spectrum-gray-800); - - --spectrum-tag-content-color: var(--spectrum-neutral-subdued-content-color-default); - --spectrum-tag-content-color-hover: var(--spectrum-neutral-subdued-content-color-hover); - --spectrum-tag-content-color-active: var(--spectrum-neutral-subdued-content-color-down); - --spectrum-tag-content-color-focus: var(--spectrum-neutral-subdued-content-color-key-focus); - --spectrum-tag-content-color-selected: var(--spectrum-gray-25); - - --spectrum-tag-border-color-selected: var(--spectrum-neutral-subdued-background-color-default); - --spectrum-tag-border-color-selected-hover: var(--spectrum-neutral-subdued-background-color-hover); - --spectrum-tag-border-color-selected-active: var(--spectrum-neutral-subdued-background-color-down); - --spectrum-tag-border-color-selected-focus: var(--spectrum-neutral-subdued-background-color-key-focus); - - /* disabled variant */ - --spectrum-tag-border-color-disabled: transparent; - --spectrum-tag-background-color-disabled: var(--spectrum-disabled-background-color); - - /* tokens based on theme and t-shirt size */ - --spectrum-tag-size-small-spacing-inline-start: var(--spectrum-component-edge-to-visual-75); - --spectrum-tag-size-small-label-spacing-inline-end: var(--spectrum-component-edge-to-text-75); - --spectrum-tag-size-small-clear-button-spacing-inline-end: var(--spectrum-component-edge-to-visual-75); - --spectrum-tag-size-medium-spacing-inline-start: var(--spectrum-component-edge-to-visual-100); - --spectrum-tag-size-medium-label-spacing-inline-end: var(--spectrum-component-edge-to-text-100); - --spectrum-tag-size-medium-clear-button-spacing-inline-end: var(--spectrum-component-edge-to-visual-100); - --spectrum-tag-size-large-spacing-inline-start: var(--spectrum-component-edge-to-visual-200); - --spectrum-tag-size-large-label-spacing-inline-end: var(--spectrum-component-edge-to-text-200); - --spectrum-tag-size-large-clear-button-spacing-inline-end: var(--spectrum-component-edge-to-visual-200); - } -} diff --git a/components/tag/themes/spectrum.css b/components/tag/themes/spectrum.css deleted file mode 100644 index 171968e1f50..00000000000 --- a/components/tag/themes/spectrum.css +++ /dev/null @@ -1,27 +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. - */ - -/* @combine .spectrum.spectrum--legacy */ - -@import "./spectrum-two.css"; - -@container style(--system: legacy) { - .spectrum-Tag { - --spectrum-tag-background-color: var(--spectrum-gray-75); - --spectrum-tag-background-color-hover: var(--spectrum-gray-75); - --spectrum-tag-background-color-active: var(--spectrum-gray-200); - --spectrum-tag-background-color-focus: var(--spectrum-gray-75); - - --spectrum-tag-content-color-selected: var(--spectrum-gray-50); - } -} diff --git a/components/taggroup/dist/metadata.json b/components/taggroup/dist/metadata.json index 10ed81256ff..b9eeaede1e8 100644 --- a/components/taggroup/dist/metadata.json +++ b/components/taggroup/dist/metadata.json @@ -10,7 +10,6 @@ "--spectrum-tag-group-item-margin-inline" ], "global": ["--spectrum-spacing-75"], - "system-theme": [], "passthroughs": [], "high-contrast": [] } diff --git a/components/textfield/dist/metadata.json b/components/textfield/dist/metadata.json index 7e36cb740e0..ea7001c7db6 100644 --- a/components/textfield/dist/metadata.json +++ b/components/textfield/dist/metadata.json @@ -88,9 +88,6 @@ ".spectrum-Textfield.is-valid .spectrum-Textfield-validationIcon", ".spectrum-Textfield.spectrum-Textfield--quiet", ".spectrum-Textfield.spectrum-Textfield--sideLabel .spectrum-Textfield-validationIcon", - ".spectrum-Textfield.spectrum-Textfield--sizeL", - ".spectrum-Textfield.spectrum-Textfield--sizeS", - ".spectrum-Textfield.spectrum-Textfield--sizeXL", ".spectrum-Textfield:hover .spectrum-Textfield-input", ".spectrum-Textfield:hover .spectrum-Textfield-input::placeholder" ], @@ -331,22 +328,6 @@ "--spectrum-workflow-icon-size-300", "--spectrum-workflow-icon-size-75" ], - "system-theme": [ - "--system-textfield-background-color", - "--system-textfield-background-color-disabled", - "--system-textfield-border-color", - "--system-textfield-border-color-disabled", - "--system-textfield-border-color-focus", - "--system-textfield-border-color-focus-hover", - "--system-textfield-border-color-hover", - "--system-textfield-border-color-keyboard-focus", - "--system-textfield-border-width", - "--system-textfield-icon-spacing-block-invalid", - "--system-textfield-quiet-border-color-disabled", - "--system-textfield-size-l-icon-spacing-block-invalid", - "--system-textfield-size-s-icon-spacing-block-invalid", - "--system-textfield-size-xl-icon-spacing-block-invalid" - ], "passthroughs": [], "high-contrast": [ "--highcontrast-textfield-border-color", diff --git a/components/textfield/index.css b/components/textfield/index.css index 329672d06a4..3ad5784df6c 100644 --- a/components/textfield/index.css +++ b/components/textfield/index.css @@ -11,9 +11,21 @@ * governing permissions and limitations under the License. */ -@import "./themes/spectrum-two.css"; - .spectrum-Textfield { + --spectrum-textfield-background-color: var(--spectrum-gray-25); + --spectrum-textfield-background-color-disabled: var(--spectrum-gray-25); + + --spectrum-textfield-border-color: var(--spectrum-gray-500); + --spectrum-textfield-border-color-hover: var(--spectrum-gray-600); + --spectrum-textfield-border-color-focus: var(--spectrum-gray-800); + --spectrum-textfield-border-color-focus-hover: var(--spectrum-gray-900); + --spectrum-textfield-border-color-keyboard-focus: var(--spectrum-gray-800); + --spectrum-textfield-border-color-disabled: var(--spectrum-gray-300); + + --spectrum-textfield-border-width: var(--spectrum-border-width-100); + + --spectrum-textfield-icon-spacing-block-invalid: var(--spectrum-component-top-to-workflow-icon-100); + /* set input line-height to the height of the textfield - prevents the cutting off of diacritics in some languages */ /* disallow mod for max compatibility */ --spectrum-textfield-input-line-height: var(--spectrum-textfield-height); @@ -109,10 +121,16 @@ /* Text Area / Multiline size medium */ --spectrum-text-area-min-block-size-quiet: var(--spectrum-component-height-100); + + &.spectrum-Textfield--quiet { + --spectrum-textfield-border-color-disabled: var(--spectrum-gray-300); + } } /********* Text field t-shirt sizes *********/ .spectrum-Textfield--sizeS { + --spectrum-textfield-icon-spacing-block-invalid: var(--spectrum-component-top-to-workflow-icon-75); + --spectrum-textfield-height: var(--spectrum-component-height-75); --spectrum-textfield-label-spacing-block-quiet: var(--spectrum-field-label-to-component-quiet-small); --spectrum-textfield-label-spacing-inline-side-label: var(--spectrum-spacing-100); @@ -135,6 +153,8 @@ } .spectrum-Textfield--sizeL { + --spectrum-textfield-icon-spacing-block-invalid: var(--spectrum-component-top-to-workflow-icon-200); + --spectrum-textfield-height: var(--spectrum-component-height-200); --spectrum-textfield-label-spacing-block-quiet: var(--spectrum-field-label-to-component-quiet-large); --spectrum-textfield-label-spacing-inline-side-label: var(--spectrum-spacing-200); @@ -157,6 +177,8 @@ } .spectrum-Textfield--sizeXL { + --spectrum-textfield-icon-spacing-block-invalid: var(--spectrum-component-top-to-workflow-icon-300); + --spectrum-textfield-height: var(--spectrum-component-height-300); --spectrum-textfield-label-spacing-block-quiet: var(--spectrum-field-label-to-component-quiet-extra-large); --spectrum-textfield-label-spacing-inline-side-label: var(--spectrum-spacing-200); diff --git a/components/textfield/stories/template.js b/components/textfield/stories/template.js index 5f20b0abb86..55c2d55d124 100644 --- a/components/textfield/stories/template.js +++ b/components/textfield/stories/template.js @@ -10,9 +10,6 @@ import { styleMap } from "lit/directives/style-map.js"; import { when } from "lit/directives/when.js"; import "../index.css"; -import "../themes/spectrum.css"; -/* Must be imported last */ -import "../themes/express.css"; /** * @typedef API diff --git a/components/textfield/themes/express.css b/components/textfield/themes/express.css deleted file mode 100644 index 31de0c5779a..00000000000 --- a/components/textfield/themes/express.css +++ /dev/null @@ -1,28 +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. - */ - -/* @combine .spectrum.spectrum--express */ - -@import "./spectrum.css"; - -@container style(--system: express) { - .spectrum-Textfield { - --spectrum-textfield-border-color: var(--spectrum-gray-400); - --spectrum-textfield-border-color-hover: var(--spectrum-gray-500); - --spectrum-textfield-border-color-focus: var(--spectrum-gray-800); - --spectrum-textfield-border-color-focus-hover: var(--spectrum-gray-900); - --spectrum-textfield-border-color-keyboard-focus: var(--spectrum-gray-900); - - --spectrum-textfield-border-width: var(--spectrum-border-width-200); - } -} diff --git a/components/textfield/themes/spectrum-two.css b/components/textfield/themes/spectrum-two.css deleted file mode 100644 index 9d0f61284f3..00000000000 --- a/components/textfield/themes/spectrum-two.css +++ /dev/null @@ -1,46 +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. - */ - -@container style(--system: spectrum) { - .spectrum-Textfield { - --spectrum-textfield-background-color: var(--spectrum-gray-25); - --spectrum-textfield-background-color-disabled: var(--spectrum-gray-25); - - --spectrum-textfield-border-color: var(--spectrum-gray-500); - --spectrum-textfield-border-color-hover: var(--spectrum-gray-600); - --spectrum-textfield-border-color-focus: var(--spectrum-gray-800); - --spectrum-textfield-border-color-focus-hover: var(--spectrum-gray-900); - --spectrum-textfield-border-color-keyboard-focus: var(--spectrum-gray-800); - --spectrum-textfield-border-color-disabled: var(--spectrum-gray-300); - - --spectrum-textfield-border-width: var(--spectrum-border-width-100); - - --spectrum-textfield-icon-spacing-block-invalid: var(--spectrum-component-top-to-workflow-icon-100); - - &.spectrum-Textfield--sizeS { - --spectrum-textfield-icon-spacing-block-invalid: var(--spectrum-component-top-to-workflow-icon-75); - } - - &.spectrum-Textfield--sizeL { - --spectrum-textfield-icon-spacing-block-invalid: var(--spectrum-component-top-to-workflow-icon-200); - } - - &.spectrum-Textfield--sizeXL { - --spectrum-textfield-icon-spacing-block-invalid: var(--spectrum-component-top-to-workflow-icon-300); - } - - &.spectrum-Textfield--quiet { - --spectrum-textfield-border-color-disabled: var(--spectrum-gray-300); - } - } -} diff --git a/components/textfield/themes/spectrum.css b/components/textfield/themes/spectrum.css deleted file mode 100644 index 1a097e31eac..00000000000 --- a/components/textfield/themes/spectrum.css +++ /dev/null @@ -1,45 +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. - */ - -/* @combine .spectrum.spectrum--legacy */ - -@import "./spectrum-two.css"; - -@container style(--system: legacy) { - .spectrum-Textfield { - --spectrum-textfield-background-color: var(--spectrum-gray-50); - --spectrum-textfield-background-color-disabled: var(--spectrum-disabled-background-color); - - --spectrum-textfield-border-color-disabled: var(--spectrum-gray-200); - - --spectrum-textfield-border-color-keyboard-focus: var(--spectrum-gray-900); - - --spectrum-textfield-icon-spacing-block-invalid: var(--spectrum-field-top-to-alert-icon-medium); - - &.spectrum-Textfield--sizeS { - --spectrum-textfield-icon-spacing-block-invalid: var(--spectrum-field-top-to-alert-icon-small); - } - - &.spectrum-Textfield--sizeL { - --spectrum-textfield-icon-spacing-block-invalid: var(--spectrum-field-top-to-alert-icon-large); - } - - &.spectrum-Textfield--sizeXL { - --spectrum-textfield-icon-spacing-block-invalid: var(--spectrum-field-top-to-alert-icon-extra-large); - } - - &.spectrum-Textfield--quiet { - --spectrum-textfield-border-color-disabled: var(--spectrum-gray-300); - } - } -} diff --git a/components/thumbnail/dist/metadata.json b/components/thumbnail/dist/metadata.json index 067259ff6a1..6b62c03e7df 100644 --- a/components/thumbnail/dist/metadata.json +++ b/components/thumbnail/dist/metadata.json @@ -49,7 +49,6 @@ "--spectrum-thumbnail-border-color-selected", "--spectrum-thumbnail-border-opacity", "--spectrum-thumbnail-border-radius", - "--spectrum-thumbnail-border-radius-default", "--spectrum-thumbnail-border-width", "--spectrum-thumbnail-border-width-selected", "--spectrum-thumbnail-color-opacity-disabled", @@ -88,7 +87,6 @@ "--spectrum-gray-800-rgb", "--spectrum-white" ], - "system-theme": ["--system-thumbnail-border-radius"], "passthroughs": [], "high-contrast": [ "--highcontrast-thumbnail-border-color", diff --git a/components/thumbnail/index.css b/components/thumbnail/index.css index 62e44665518..2a2aaa9e72c 100644 --- a/components/thumbnail/index.css +++ b/components/thumbnail/index.css @@ -11,8 +11,6 @@ * governing permissions and limitations under the License. */ -@import "./themes/spectrum-two.css"; - .spectrum-Thumbnail, .spectrum-Thumbnail--size500 { --spectrum-thumbnail-sized-size: var(--spectrum-thumbnail-size-500); @@ -70,7 +68,7 @@ --spectrum-thumbnail-border-color-selected: var(--highcontrast-thumbnail-border-color-selected, var(--mod-thumbnail-border-color-selected, var(--spectrum-accent-color-800))); --spectrum-thumbnail-border-width: var(--mod-thumbnail-border-width, var(--spectrum-border-width-100)); --spectrum-thumbnail-border-width-selected: var(--mod-thumbnail-border-width-selected, var(--spectrum-border-width-200)); - --spectrum-thumbnail-border-radius-default: var(--mod-thumbnail-border-radius, var(--spectrum-thumbnail-border-radius)); + --spectrum-thumbnail-border-radius: var(--mod-thumbnail-border-radius, 2px); --spectrum-thumbnail-layer-border-color-inner: var(--highcontrast-thumbnail-layer-border-color-inner, var(--mod-thumbnail-layer-border-color-inner, var(--spectrum-white))); --spectrum-thumbnail-layer-border-color-outer: var(--highcontrast-thumbnail-layer-border-color-outer, var(--mod-thumbnail-layer-border-color-outer, var(--spectrum-gray-500))); @@ -91,7 +89,7 @@ inline-size: var(--spectrum-thumbnail-size); block-size: var(--spectrum-thumbnail-size); - border-radius: var(--spectrum-thumbnail-border-radius-default); + border-radius: var(--spectrum-thumbnail-border-radius); overflow: hidden; z-index: 0; @@ -102,7 +100,7 @@ position: absolute; inline-size: 100%; block-size: 100%; - border-radius: var(--spectrum-thumbnail-border-radius-default); + border-radius: var(--spectrum-thumbnail-border-radius); box-shadow: inset 0 0 0 var(--spectrum-thumbnail-border-width) var(--spectrum-thumbnail-border-color); } @@ -118,7 +116,7 @@ border-style: solid; border-width: var(--spectrum-thumbnail-focus-indicator-thickness); border-color: var(--spectrum-thumbnail-focus-indicator-color); - border-radius: var(--spectrum-thumbnail-border-radius-default); + border-radius: var(--spectrum-thumbnail-border-radius); position: absolute; inset-inline-start: calc((var(--spectrum-thumbnail-focus-indicator-gap) + var(--spectrum-thumbnail-focus-indicator-thickness)) * -1); inset-inline-end: calc((var(--spectrum-thumbnail-focus-indicator-gap) + var(--spectrum-thumbnail-focus-indicator-thickness)) * -1); @@ -128,7 +126,7 @@ .spectrum-Thumbnail-image-wrapper { overflow: hidden; - border-radius: var(--spectrum-thumbnail-border-radius-default); + border-radius: var(--spectrum-thumbnail-border-radius); } } } @@ -202,7 +200,7 @@ inline-size: 100%; background-size: cover; background-position: center center; - border-radius: var(--spectrum-thumbnail-border-radius-default); + border-radius: var(--spectrum-thumbnail-border-radius); } /* Windows High Contrast Mode */ diff --git a/components/thumbnail/stories/template.js b/components/thumbnail/stories/template.js index aa476ea722b..2b40d8e1015 100644 --- a/components/thumbnail/stories/template.js +++ b/components/thumbnail/stories/template.js @@ -7,9 +7,6 @@ import { styleMap } from "lit/directives/style-map.js"; import { when } from "lit/directives/when.js"; import "../index.css"; -import "../themes/spectrum.css"; -/* Must be imported last */ -import "../themes/express.css"; export const Template = ({ rootClass = "spectrum-Thumbnail", diff --git a/components/thumbnail/themes/express.css b/components/thumbnail/themes/express.css deleted file mode 100644 index 9fd550418f2..00000000000 --- a/components/thumbnail/themes/express.css +++ /dev/null @@ -1,16 +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. - */ - -/* @combine .spectrum.spectrum--express */ - -@import "./spectrum.css"; diff --git a/components/thumbnail/themes/spectrum-two.css b/components/thumbnail/themes/spectrum-two.css deleted file mode 100644 index 4cd647afd85..00000000000 --- a/components/thumbnail/themes/spectrum-two.css +++ /dev/null @@ -1,18 +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. - */ - -@container style(--system: spectrum) { - .spectrum-Thumbnail { - --spectrum-thumbnail-border-radius: 2px; - } -} diff --git a/components/thumbnail/themes/spectrum.css b/components/thumbnail/themes/spectrum.css deleted file mode 100644 index b1abf324653..00000000000 --- a/components/thumbnail/themes/spectrum.css +++ /dev/null @@ -1,22 +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. - */ - -/* @combine .spectrum.spectrum--legacy */ - -@import "./spectrum-two.css"; - -@container style(--system: legacy) { - .spectrum-Thumbnail { - --spectrum-thumbnail-border-radius: var(--spectrum-corner-radius-75); - } -} diff --git a/components/toast/dist/metadata.json b/components/toast/dist/metadata.json index 8721a98ef8a..e20cd4f7e40 100644 --- a/components/toast/dist/metadata.json +++ b/components/toast/dist/metadata.json @@ -18,8 +18,7 @@ ".spectrum-Toast-content:lang(ja)", ".spectrum-Toast-content:lang(ko)", ".spectrum-Toast-content:lang(zh)", - ".spectrum-Toast-typeIcon", - "[dir=\"rtl\"] .spectrum-Toast-body .spectrum-Button" + ".spectrum-Toast-typeIcon" ], "modifiers": [ "--mod-toast-background-color-default", @@ -99,10 +98,6 @@ "--spectrum-transparent-white-400", "--spectrum-white" ], - "system-theme": [ - "--system-toast-background-color-default", - "--system-toast-divider-color" - ], "passthroughs": [], "high-contrast": ["--highcontrast-toast-border-color"] } diff --git a/components/toast/index.css b/components/toast/index.css index 8b3793de9af..b8156dc08b9 100644 --- a/components/toast/index.css +++ b/components/toast/index.css @@ -11,9 +11,10 @@ * governing permissions and limitations under the License. */ -@import "./themes/spectrum-two.css"; - .spectrum-Toast { + --spectrum-toast-background-color-default: var(--spectrum-neutral-subdued-background-color-default); + --spectrum-toast-divider-color: var(--spectrum-transparent-white-400); + /* Hardcoded variables */ --spectrum-toast-font-weight: var(--spectrum-regular-font-weight); diff --git a/components/toast/stories/template.js b/components/toast/stories/template.js index 89d459dbf0a..6bf43215408 100644 --- a/components/toast/stories/template.js +++ b/components/toast/stories/template.js @@ -9,9 +9,6 @@ import { styleMap } from "lit/directives/style-map.js"; import { when } from "lit/directives/when.js"; import "../index.css"; -import "../themes/spectrum.css"; -/* Must be imported last */ -import "../themes/express.css"; export const Template = ({ rootClass = "spectrum-Toast", diff --git a/components/toast/themes/express.css b/components/toast/themes/express.css deleted file mode 100644 index 2de113b03ed..00000000000 --- a/components/toast/themes/express.css +++ /dev/null @@ -1,22 +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. - */ - -/* @combine .spectrum.spectrum--express */ - -@import "./spectrum.css"; - -@container style(--system: express) { - .spectrum-Toast { - --spectrum-toast-background-color-default: var(--spectrum-neutral-background-color-default); - } -} diff --git a/components/toast/themes/spectrum-two.css b/components/toast/themes/spectrum-two.css deleted file mode 100644 index 1097d457299..00000000000 --- a/components/toast/themes/spectrum-two.css +++ /dev/null @@ -1,19 +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. - */ - -@container style(--system: spectrum) { - .spectrum-Toast { - --spectrum-toast-background-color-default: var(--spectrum-neutral-subdued-background-color-default); - --spectrum-toast-divider-color: var(--spectrum-transparent-white-400); - } -} diff --git a/components/toast/themes/spectrum.css b/components/toast/themes/spectrum.css deleted file mode 100644 index 3f6e05c5d78..00000000000 --- a/components/toast/themes/spectrum.css +++ /dev/null @@ -1,22 +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. - */ - -/* @combine .spectrum.spectrum--legacy */ - -@import "./spectrum-two.css"; - -@container style(--system: legacy) { - .spectrum-Toast { - --spectrum-toast-divider-color: var(--spectrum-transparent-white-300); - } -} diff --git a/components/tooltip/dist/metadata.json b/components/tooltip/dist/metadata.json index 7f6d6d0b94d..3ac8acfd1ab 100644 --- a/components/tooltip/dist/metadata.json +++ b/components/tooltip/dist/metadata.json @@ -250,59 +250,7 @@ ".u-tooltip-showOnHover:hover .spectrum-Tooltip--top-end", ".u-tooltip-showOnHover:hover .spectrum-Tooltip--top-left", ".u-tooltip-showOnHover:hover .spectrum-Tooltip--top-right", - ".u-tooltip-showOnHover:hover .spectrum-Tooltip--top-start", - "[dir=\"rtl\"] .spectrum-Tooltip--bottom-end .spectrum-Tooltip-tip", - "[dir=\"rtl\"] .spectrum-Tooltip--bottom-start .spectrum-Tooltip-tip", - "[dir=\"rtl\"] .spectrum-Tooltip--end .spectrum-Tooltip-tip", - "[dir=\"rtl\"] .spectrum-Tooltip--end-bottom .spectrum-Tooltip-tip", - "[dir=\"rtl\"] .spectrum-Tooltip--end-bottom.is-open", - "[dir=\"rtl\"] .spectrum-Tooltip--end-top .spectrum-Tooltip-tip", - "[dir=\"rtl\"] .spectrum-Tooltip--end-top.is-open", - "[dir=\"rtl\"] .spectrum-Tooltip--end.is-open", - "[dir=\"rtl\"] .spectrum-Tooltip--left .spectrum-Tooltip-tip", - "[dir=\"rtl\"] .spectrum-Tooltip--left-bottom .spectrum-Tooltip-tip", - "[dir=\"rtl\"] .spectrum-Tooltip--left-top .spectrum-Tooltip-tip", - "[dir=\"rtl\"] .spectrum-Tooltip--right .spectrum-Tooltip-tip", - "[dir=\"rtl\"] .spectrum-Tooltip--right-bottom .spectrum-Tooltip-tip", - "[dir=\"rtl\"] .spectrum-Tooltip--right-top .spectrum-Tooltip-tip", - "[dir=\"rtl\"] .spectrum-Tooltip--start .spectrum-Tooltip-tip", - "[dir=\"rtl\"] .spectrum-Tooltip--start-bottom .spectrum-Tooltip-tip", - "[dir=\"rtl\"] .spectrum-Tooltip--start-bottom.is-open", - "[dir=\"rtl\"] .spectrum-Tooltip--start-top .spectrum-Tooltip-tip", - "[dir=\"rtl\"] .spectrum-Tooltip--start-top.is-open", - "[dir=\"rtl\"] .spectrum-Tooltip--start.is-open", - "[dir=\"rtl\"] .spectrum-Tooltip--top-end .spectrum-Tooltip-tip", - "[dir=\"rtl\"] .spectrum-Tooltip--top-start .spectrum-Tooltip-tip", - "[dir=\"rtl\"] .u-tooltip-showOnHover .spectrum-Tooltip--end", - "[dir=\"rtl\"] .u-tooltip-showOnHover .spectrum-Tooltip--end-bottom", - "[dir=\"rtl\"] .u-tooltip-showOnHover .spectrum-Tooltip--end-top", - "[dir=\"rtl\"] .u-tooltip-showOnHover .spectrum-Tooltip--start", - "[dir=\"rtl\"] .u-tooltip-showOnHover .spectrum-Tooltip--start-bottom", - "[dir=\"rtl\"] .u-tooltip-showOnHover .spectrum-Tooltip--start-top", - "[dir=\"rtl\"] .u-tooltip-showOnHover :focus .spectrum-Tooltip--end", - "[dir=\"rtl\"] .u-tooltip-showOnHover :focus .spectrum-Tooltip--end-bottom", - "[dir=\"rtl\"] .u-tooltip-showOnHover :focus .spectrum-Tooltip--end-top", - "[dir=\"rtl\"] .u-tooltip-showOnHover :focus .spectrum-Tooltip--start", - "[dir=\"rtl\"] .u-tooltip-showOnHover :focus .spectrum-Tooltip--start-bottom", - "[dir=\"rtl\"] .u-tooltip-showOnHover :focus .spectrum-Tooltip--start-top", - "[dir=\"rtl\"] .u-tooltip-showOnHover.is-focused .spectrum-Tooltip--end", - "[dir=\"rtl\"] .u-tooltip-showOnHover.is-focused .spectrum-Tooltip--end-bottom", - "[dir=\"rtl\"] .u-tooltip-showOnHover.is-focused .spectrum-Tooltip--end-top", - "[dir=\"rtl\"] .u-tooltip-showOnHover.is-focused .spectrum-Tooltip--start", - "[dir=\"rtl\"] .u-tooltip-showOnHover.is-focused .spectrum-Tooltip--start-bottom", - "[dir=\"rtl\"] .u-tooltip-showOnHover.is-focused .spectrum-Tooltip--start-top", - "[dir=\"rtl\"] .u-tooltip-showOnHover:focus .spectrum-Tooltip--end", - "[dir=\"rtl\"] .u-tooltip-showOnHover:focus .spectrum-Tooltip--end-bottom", - "[dir=\"rtl\"] .u-tooltip-showOnHover:focus .spectrum-Tooltip--end-top", - "[dir=\"rtl\"] .u-tooltip-showOnHover:focus .spectrum-Tooltip--start", - "[dir=\"rtl\"] .u-tooltip-showOnHover:focus .spectrum-Tooltip--start-bottom", - "[dir=\"rtl\"] .u-tooltip-showOnHover:focus .spectrum-Tooltip--start-top", - "[dir=\"rtl\"] .u-tooltip-showOnHover:hover .spectrum-Tooltip--end", - "[dir=\"rtl\"] .u-tooltip-showOnHover:hover .spectrum-Tooltip--end-bottom", - "[dir=\"rtl\"] .u-tooltip-showOnHover:hover .spectrum-Tooltip--end-top", - "[dir=\"rtl\"] .u-tooltip-showOnHover:hover .spectrum-Tooltip--start", - "[dir=\"rtl\"] .u-tooltip-showOnHover:hover .spectrum-Tooltip--start-bottom", - "[dir=\"rtl\"] .u-tooltip-showOnHover:hover .spectrum-Tooltip--start-top" + ".u-tooltip-showOnHover:hover .spectrum-Tooltip--top-start" ], "modifiers": [ "--mod-overlay-animation-duration", @@ -391,7 +339,6 @@ "--spectrum-white", "--spectrum-workflow-icon-size-50" ], - "system-theme": ["--system-tooltip-backgound-color-default-neutral"], "passthroughs": [], "high-contrast": [ "--highcontrast-tooltip-background-color-default", diff --git a/components/tooltip/index.css b/components/tooltip/index.css index f488b9cbf49..b8c5806afa7 100644 --- a/components/tooltip/index.css +++ b/components/tooltip/index.css @@ -11,10 +11,11 @@ * governing permissions and limitations under the License. */ -@import "./themes/spectrum-two.css"; @import "@spectrum-css/commons/overlay.css"; .spectrum-Tooltip { + --spectrum-tooltip-backgound-color-default-neutral: var(--spectrum-neutral-subdued-background-color-default); + --spectrum-tooltip-animation-duration: var(--spectrum-animation-duration-100); /* override if additional spacing to source is required */ diff --git a/components/tooltip/stories/template.js b/components/tooltip/stories/template.js index 5c5c260f4d6..4098beb8b73 100644 --- a/components/tooltip/stories/template.js +++ b/components/tooltip/stories/template.js @@ -7,9 +7,6 @@ import { when } from "lit/directives/when.js"; import { capitalize } from "lodash-es"; import "../index.css"; -import "../themes/spectrum.css"; -/* Must be imported last */ -import "../themes/express.css"; export const Template = ({ rootClass = "spectrum-Tooltip", diff --git a/components/tooltip/themes/express.css b/components/tooltip/themes/express.css deleted file mode 100644 index ec00162e91a..00000000000 --- a/components/tooltip/themes/express.css +++ /dev/null @@ -1,22 +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. - */ - -/* @combine .spectrum.spectrum--express */ - -@import "./spectrum.css"; - -@container style(--system: express) { - .spectrum-Tooltip { - --spectrum-tooltip-backgound-color-default-neutral: var(--spectrum-neutral-background-color-default); - } -} diff --git a/components/tooltip/themes/spectrum-two.css b/components/tooltip/themes/spectrum-two.css deleted file mode 100644 index 42b423e3448..00000000000 --- a/components/tooltip/themes/spectrum-two.css +++ /dev/null @@ -1,18 +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. - */ - -@container style(--system: spectrum) { - .spectrum-Tooltip { - --spectrum-tooltip-backgound-color-default-neutral: var(--spectrum-neutral-subdued-background-color-default); - } -} diff --git a/components/tooltip/themes/spectrum.css b/components/tooltip/themes/spectrum.css deleted file mode 100644 index 3d81bc564b5..00000000000 --- a/components/tooltip/themes/spectrum.css +++ /dev/null @@ -1,16 +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. - */ - -/* @combine .spectrum.spectrum--legacy */ - -@import "./spectrum-two.css"; diff --git a/components/tray/dist/metadata.json b/components/tray/dist/metadata.json index 2d510b6a7aa..db6c152c441 100644 --- a/components/tray/dist/metadata.json +++ b/components/tray/dist/metadata.json @@ -36,7 +36,6 @@ "--spectrum-background-layer-2-color", "--spectrum-corner-radius-100" ], - "system-theme": [], "passthroughs": ["--mod-modal-max-width"], "high-contrast": ["--highcontrast-tray-background-color"] } diff --git a/components/treeview/dist/metadata.json b/components/treeview/dist/metadata.json index 0e5af238587..e3b03e94fc5 100644 --- a/components/treeview/dist/metadata.json +++ b/components/treeview/dist/metadata.json @@ -49,8 +49,7 @@ ".spectrum-TreeView.spectrum-TreeView--detached", ".spectrum-TreeView.spectrum-TreeView--quiet", ".spectrum-TreeView.spectrum-TreeView--thumbnail", - ".spectrum-TreeView:dir(rtl)", - "[dir=\"rtl\"] .spectrum-TreeView" + ".spectrum-TreeView:dir(rtl)" ], "modifiers": [ "--mod-treeview-font-size", @@ -168,10 +167,6 @@ "--spectrum-neutral-content-color-default", "--spectrum-text-to-visual-75" ], - "system-theme": [ - "--system-tree-view-item-background-color-focus", - "--system-tree-view-item-background-color-hover" - ], "passthroughs": [], "high-contrast": [ "--highcontrast-treeview-heading-color", diff --git a/components/treeview/index.css b/components/treeview/index.css index 2c55ebea3be..31d6652fe0a 100644 --- a/components/treeview/index.css +++ b/components/treeview/index.css @@ -11,8 +11,6 @@ * governing permissions and limitations under the License. */ -@import "./themes/spectrum-two.css"; - @media (forced-colors: active) { .spectrum-TreeView { --highcontrast-treeview-item-background-color-selected: Highlight; @@ -116,6 +114,9 @@ } .spectrum-TreeView { + --spectrum-treeview-item-background-color-hover: var(--spectrum-gray-100); + --spectrum-treeview-item-background-color-focus: var(--spectrum-gray-100); + --spectrum-treeview-item-indentation: var(--mod-treeview-item-indentation, var(--spectrum-treeview-item-sized-indentation)); --spectrum-treeview-section-spacing: var(--mod-treeview-section-spacing, var(--spectrum-treeview-item-indentation)); --spectrum-treeview-heading-color: var(--highcontrast-treeview-heading-color, var(--mod-treeview-heading-color, var(--spectrum-heading-color))); diff --git a/components/treeview/stories/template.js b/components/treeview/stories/template.js index df31e3ed464..6c15ccdacd7 100644 --- a/components/treeview/stories/template.js +++ b/components/treeview/stories/template.js @@ -9,9 +9,6 @@ import { styleMap } from "lit/directives/style-map.js"; import { when } from "lit/directives/when.js"; import "../index.css"; -import "../themes/spectrum.css"; -/* Must be imported last */ -import "../themes/express.css"; export const TreeViewItem = ({ rootClass = "spectrum-TreeView", diff --git a/components/treeview/themes/express.css b/components/treeview/themes/express.css deleted file mode 100644 index 9fd550418f2..00000000000 --- a/components/treeview/themes/express.css +++ /dev/null @@ -1,16 +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. - */ - -/* @combine .spectrum.spectrum--express */ - -@import "./spectrum.css"; diff --git a/components/treeview/themes/spectrum-two.css b/components/treeview/themes/spectrum-two.css deleted file mode 100644 index 215290b3b6e..00000000000 --- a/components/treeview/themes/spectrum-two.css +++ /dev/null @@ -1,19 +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. - */ - -@container style(--system: spectrum) { - .spectrum-TreeView { - --spectrum-treeview-item-background-color-hover: var(--spectrum-gray-100); - --spectrum-treeview-item-background-color-focus: var(--spectrum-gray-100); - } -} diff --git a/components/treeview/themes/spectrum.css b/components/treeview/themes/spectrum.css deleted file mode 100644 index 7698b2b4c3e..00000000000 --- a/components/treeview/themes/spectrum.css +++ /dev/null @@ -1,23 +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. - */ - -/* @combine .spectrum.spectrum--legacy */ - -@import "./spectrum-two.css"; - -@container style(--system: legacy) { - .spectrum-TreeView { - --spectrum-treeview-item-background-color-hover: var(--spectrum-gray-200); - --spectrum-treeview-item-background-color-focus: var(--spectrum-gray-200); - } -} diff --git a/components/typography/dist/metadata.json b/components/typography/dist/metadata.json index 5d45be326da..3ef566f741d 100644 --- a/components/typography/dist/metadata.json +++ b/components/typography/dist/metadata.json @@ -751,7 +751,6 @@ "--spectrum-sans-font-family-stack", "--spectrum-serif-font-family-stack" ], - "system-theme": [], "passthroughs": [], "high-contrast": [ "--highcontrast-body-font-color", diff --git a/components/underlay/dist/metadata.json b/components/underlay/dist/metadata.json index 6b35fb4f7f0..21a3e4aa1d0 100644 --- a/components/underlay/dist/metadata.json +++ b/components/underlay/dist/metadata.json @@ -30,7 +30,6 @@ "--spectrum-black-rgb", "--spectrum-overlay-opacity" ], - "system-theme": [], "passthroughs": [], "high-contrast": [] } diff --git a/components/well/dist/metadata.json b/components/well/dist/metadata.json index 3587fa73f7a..c9fdd7f6da1 100644 --- a/components/well/dist/metadata.json +++ b/components/well/dist/metadata.json @@ -27,7 +27,6 @@ "--spectrum-gray-1000-rgb", "--spectrum-gray-800-rgb" ], - "system-theme": ["--system-well-border-color"], "passthroughs": [], "high-contrast": [] } diff --git a/components/well/index.css b/components/well/index.css index 26abcff0032..c29be3ca109 100644 --- a/components/well/index.css +++ b/components/well/index.css @@ -11,9 +11,8 @@ * governing permissions and limitations under the License. */ -@import "./themes/spectrum-two.css"; - .spectrum-Well { + --spectrum-well-border-color: rgba(var(--spectrum-gray-1000-rgb), 0.05); --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); diff --git a/components/well/stories/template.js b/components/well/stories/template.js index c9645cfdcdb..5e8210305d1 100644 --- a/components/well/stories/template.js +++ b/components/well/stories/template.js @@ -5,9 +5,6 @@ import { ifDefined } from "lit/directives/if-defined.js"; import { styleMap } from "lit/directives/style-map.js"; import "../index.css"; -import "../themes/spectrum.css"; -/* Must be imported last */ -import "../themes/express.css"; export const Template = ({ rootClass = "spectrum-Well", diff --git a/components/well/themes/express.css b/components/well/themes/express.css deleted file mode 100644 index 9fd550418f2..00000000000 --- a/components/well/themes/express.css +++ /dev/null @@ -1,16 +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. - */ - -/* @combine .spectrum.spectrum--express */ - -@import "./spectrum.css"; diff --git a/components/well/themes/spectrum-two.css b/components/well/themes/spectrum-two.css deleted file mode 100644 index f4a2ef0983e..00000000000 --- a/components/well/themes/spectrum-two.css +++ /dev/null @@ -1,18 +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. - */ - -@container style(--system: spectrum) { - .spectrum-Well { - --spectrum-well-border-color: rgba(var(--spectrum-gray-1000-rgb), 0.05); - } -} diff --git a/components/well/themes/spectrum.css b/components/well/themes/spectrum.css deleted file mode 100644 index 5cfe7120396..00000000000 --- a/components/well/themes/spectrum.css +++ /dev/null @@ -1,22 +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. - */ - -/* @combine .spectrum.spectrum--legacy */ - -@import "./spectrum-two.css"; - -@container style(--system: legacy) { - .spectrum-Well { - --spectrum-well-border-color: rgba(var(--spectrum-gray-900-rgb), 0.05); - } -} diff --git a/package.json b/package.json index 199db0c520d..1659263dd03 100644 --- a/package.json +++ b/package.json @@ -45,7 +45,7 @@ "refresh:config": "bash ./tasks/chromatic-config-creation.sh || exit 0", "refresh:env": "bash ./tasks/copy-env-from-root.sh || exit 0", "release": "yarn ci && changeset publish", - "report": "yarn reporter tag:component", + "report": "cross-env NODE_ENV=production yarn reporter tag:component", "reporter": "nx run-many --target report --projects", "start": "cross-env NODE_ENV=development nx start storybook", "test": "cross-env NODE_ENV=development nx test storybook", @@ -66,16 +66,14 @@ ], "devDependencies": { "@adobe/token-diff-generator": "^1.3.0", - "@changesets/changelog-github": "^0.5.0", - "@changesets/cli": "^2.27.11", - "@commitlint/cli": "^19.6.1", - "@commitlint/config-conventional": "^19.6.0", + "@changesets/changelog-github": "^0.5.1", + "@changesets/cli": "^2.28.1", + "@commitlint/cli": "^19.8.0", + "@commitlint/config-conventional": "^19.8.0", "@csstools/postcss-bundler": "^2.0.6", - "@nx/devkit": "^19.8.2", - "@spectrum-tools/postcss-add-theming-layer": "1.0.2", - "@spectrum-tools/postcss-property-rollup": "0.0.1", + "@nx/devkit": "^19.8.14", "@spectrum-tools/postcss-rgb-mapping": "1.1.0", - "@yarnpkg/types": "^4.0.0", + "@yarnpkg/types": "^4.0.1", "at-rule-packer": "^0.4.2", "autoprefixer": "^10.4.21", "colors": "^1.4.0", @@ -84,21 +82,21 @@ "cssnano-preset-advanced": "^7.0.6", "diff": "^7.0.0", "diff2html": "^3.4.51", - "eslint": "^8.57.0", - "eslint-plugin-jsonc": "^2.18.2", - "eslint-plugin-prettier": "^5.1.3", + "eslint": "^8.57.1", + "eslint-plugin-jsonc": "^2.19.1", + "eslint-plugin-prettier": "^5.2.3", "fast-glob": "^3.3.3", "gh-pages": "^6.3.0", "husky": "^9.1.7", "jsonc-eslint-parser": "^2.4.0", - "lint-staged": "^15.3.0", + "lint-staged": "^15.4.3", "lodash": "^4.17.21", "markdownlint": "^0.37.4", "markdownlint-cli": "^0.44.0", - "node-gyp": "^10.1.0", + "node-gyp": "^10.3.1", "npm-registry-fetch": "^18.0.2", "nunjucks": "^3.2.4", - "nx": "^19.8.2", + "nx": "^19.8.14", "open": "^10.1.0", "pajv": "^1.2.0", "postcss": "^8.5.3", @@ -118,7 +116,7 @@ "rimraf": "^6.0.1", "semver": "^7.7.1", "stylelint": "^16.15.0", - "stylelint-config-standard": "^36.0.1", + "stylelint-config-standard": "^37.0.0", "stylelint-header": "^2.1.0", "stylelint-high-performance-animation": "^1.11.0", "stylelint-order": "^6.0.4", diff --git a/plugins/postcss-add-theming-layer/README.md b/plugins/postcss-add-theming-layer/README.md deleted file mode 100644 index 610310f5662..00000000000 --- a/plugins/postcss-add-theming-layer/README.md +++ /dev/null @@ -1,115 +0,0 @@ -# postcss-add-theming-layer - -> Leveraging style container queries to create an abstraction layer for supporting multiple theming systems. - -## Installation - -Add the dependency to your project: - -```sh -npm install postcss-add-theming-layer -``` - -or - -```sh -yarn add -DW postcss-add-theming-layer -``` - -Use the plugin in your PostCSS configuration: - -```js -module.exports = { - plugins: { - "postcss-add-theming-layer": {}, - }, -}; -``` - -or as part of your CLI command: - -```sh -postcss -u postcss-add-theming-layer -o dist/index.css src/index.css -``` - -## Options - -### `selectorPrefix` [string] - -This optional input will prefix the new theming layer selector with the provided string. This can be useful if you want to namespace the injected selectors for the new theming layer to avoid conflicts. - -### `skipMapping` [boolean=false] - -Skip the mapping of the variables to the system variables. This can be useful if you only want to extract the variables and not map them to the system variables. - -### `preserveVariables` [boolean=true] - -When used with `skipMapping`, this option will preserve the variables defined inside the container query in the output by injecting them to the root selector. - -### `referencesOnly` [boolean=false] - -This option will only output those variables that are referencing the newly created system variables and not the system variables themselves. This can be used as a bridge between an old and new implementation for the component. - -### `stripLocalSelectors` [boolean=false] - -This option will remove the local selectors (those that map to system variables) from the output leaving only the system definitions. - -### `processIdentifier` [(identifierValue: string, identifierName: string) => string]` - -Customize the selectors that variables are placed in. Passed the value and key of the variable that was passed to the container, i.e. `identifierValue = spectrum` and `identifierName = system` for the example below. By default, `identifierName` is used as-is. - -## Usage - -This plugin turns this: - -```css -@container style(--system: legacy) { - .component { - --background-color: blue; - } - .component.is-selected { - --background-color: darkblue; - } - .component .icon { - --color: gray; - } -} - -@container style(--system: modern) { - .component { - --background-color: purple; - } - .component.is-selected { - --background-color: darkpurple; - } - .component .icon { - --color: white; - } -} -``` - -Into this: - -```css -.legacy { - --system-component-background-color: blue; - --system-component-selected-background-color: darkblue; -} - -.modern { - --system-component-background-color: purple; - --system-component-selected-background-color: darkpurple; -} - -.component { - --background-color: var(--system-component-background-color); -} - -.component.is-selected { - --background-color: var(--system-component-selected-background-color); -} -``` - -## Usage notes - -This plugin will ignore any underscore-prefixed variables, as they are considered private and not part of the theming layer. diff --git a/plugins/postcss-add-theming-layer/expected/basic.css b/plugins/postcss-add-theming-layer/expected/basic.css deleted file mode 100644 index 711a906a74d..00000000000 --- a/plugins/postcss-add-theming-layer/expected/basic.css +++ /dev/null @@ -1,41 +0,0 @@ -.legacy { - --system-component-background-color: blue; - --system-component-selected-background-color: darkblue; - --system-component-icon-color: gray; - --system-where-component-background-color: blue; - --system-component-where-selected-background-color: darkblue; - --system-component-has-icon-color: gray -} - -.modern { - --system-component-background-color: purple; - --system-component-selected-background-color: indigo; - --system-component-icon-color: white; - --system-where-component-background-color: indigo; - --system-component-where-selected-background-color: darkpurple; - --system-component-has-icon-color: white -} - -.component { - --background-color: var(--system-component-background-color) -} - -.component.is-selected { - --background-color: var(--system-component-selected-background-color) -} - -.component .icon { - --color: var(--system-component-icon-color) -} - -:where(.component) { - --background-color: var(--system-where-component-background-color) -} - -.component:where(:selected,.is-selected) { - --background-color: var(--system-component-where-selected-background-color) -} - -.component:has(.icon) { - --color: var(--system-component-has-icon-color) -} diff --git a/plugins/postcss-add-theming-layer/fixtures/basic.css b/plugins/postcss-add-theming-layer/fixtures/basic.css deleted file mode 100644 index 50692d97093..00000000000 --- a/plugins/postcss-add-theming-layer/fixtures/basic.css +++ /dev/null @@ -1,49 +0,0 @@ -@container style(--system: legacy) { - .component { - --background-color: blue; - } - .component.is-selected { - --background-color: darkblue; - } - .component .icon { - --color: gray; - } - - :where(.component) { - --background-color: blue; - } - - .component:where(:selected, .is-selected) { - --background-color: darkblue; - } - - .component:has(.icon) { - --color: gray; - } -} - -@container style(--system: modern) { - .component { - --background-color: purple; - } - - .component.is-selected { - --background-color: indigo; - } - - .component .icon { - --color: white; - } - - :where(.component) { - --background-color: indigo; - } - - .component:where(:selected, .is-selected) { - --background-color: darkpurple; - } - - .component:has(.icon) { - --color: white; - } -} diff --git a/plugins/postcss-add-theming-layer/index.js b/plugins/postcss-add-theming-layer/index.js deleted file mode 100644 index fa9904a5801..00000000000 --- a/plugins/postcss-add-theming-layer/index.js +++ /dev/null @@ -1,201 +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 selectorParser = require("postcss-selector-parser"); -const { - cleanPropertyName, - extractFallbackValue, - getVariableName, - checkForReplacement -} = require("./utilities"); - -/** - * @typedef Options - * @property {string} [selectorPrefix] - The prefix to use for the new selectors - * @property {boolean} [skipMapping=false] - Skip the mapping of the variables to the system variables. This can be useful if you only want to extract the variables and not map them to the system variables. - * @property {boolean} [preserveVariables=false] - When used with `skipMapping`, this option will preserve the variables defined inside the container query in the output by injecting them to the root selector. - * @property {boolean} [referencesOnly=false] - This option will only output those variables that are referencing the newly created system variables and not the system variables themselves. This can be used as a bridge between an old and new implementation for the component. - * @property {boolean} [stripLocalSelectors=false] - This option will remove the local selectors (those that map to system variables) from the output leaving only the system definitions. - * @property {(identifierValue: string, identifierName: string) => string} [processIdentifier] - A function that processes the identifier value and creates a new selector -*/ - -/** @type import('postcss').PluginCreator */ -module.exports = ({ - selectorPrefix, - skipMapping = false, - preserveVariables = true, - referencesOnly = false, - stripLocalSelectors = false, - processIdentifier, -}) => ({ - postcssPlugin: "postcss-add-theming-layer", - OnceExit(root, { Rule, Declaration }) { - // Fallback function to process the identifier value and create a new selector - if (typeof processIdentifier !== "function") { - // If the base prefix exists and differs from the identifier value, append the identifier value to the base prefix as the new class name - processIdentifier = (identifierValue) => selectorPrefix && selectorPrefix !== identifierValue ? `.${selectorPrefix}--${identifierValue}` : `.${identifierValue}`; - } - - // This object will store the mappings for each selector - const systemMap = new Map(); - const conversionMap = new Map(); - - // Step 1: loop over all the container style queries and create a new selector for each - // to be used as a theming toggle for components where style queries are not natively supported - // @todo should there be a support check around this? - root.walkAtRules(/container/, (container) => { - if (skipMapping) { - if (preserveVariables) { - // Iterate over each rule in the container and append them to the root - container.walkRules((rule) => { - root.insertAfter(root.first, rule); - }); - } - - container.remove(); - return; - } - - // Extract the custom property name and it's value to use in creating the new selector - // Identifier name is the prefix used for the custom properties created for the bridge - // Identifier value is used to create the new selector - const [, identifierName, identifierValue] = container.params.match( - /\(\s*--(.*?)\s*[:=]\s*(.*?)\s*\)/ - ); - - const selectorMap = systemMap.get(identifierName) ?? {}; - - // Create a new rule using this selector to attach the new system-level custom properties - let rule; - - // If we're only interested in references, we can skip the next step of appending the new rule - if (!referencesOnly) { - rule = new Rule({ - selector: processIdentifier(identifierValue, identifierName), - source: container.source, - }); - - container.parent.insertAfter(container, rule); - } - - // Iterate over each custom property in the container to create a new mapping that supports the new selector - container.walkDecls(/^--[A-Z|a-z]/, (decl) => { - selectorParser((selectors) => { - selectors.each((s) => { - // Check if the property is already mapped - const variableName = getVariableName(s, decl.prop, { - identifierName, - identifierValue, - selectorPrefix - }); - - const newDecl = decl.clone({ - prop: variableName, - }); - newDecl.raws.before = "\n "; - - const uniqueSet = conversionMap.get(decl.prop) ?? new Set(); - conversionMap.set(decl.prop, uniqueSet.add(variableName)); - - if (!referencesOnly) { - rule.append(newDecl); - } - - const selector = s.toString(); - selectorMap[selector] = selectorMap[selector] ?? {}; - - const selectorNode = selectorMap[selector]; - - // Check for fallbacks in the var() function - const fallbackValue = extractFallbackValue(decl.value); - if (fallbackValue) { - // The final declaration should have the override present - selectorNode[decl.prop] = `var(${fallbackValue}, var(${variableName}))`; - - // The system-level declaration should only have the fallback - newDecl.value = `var(${fallbackValue})`; - } - else { - selectorNode[decl.prop] = `var(${variableName})`; - } - - selectorMap[selector] = selectorNode; - }); - }).processSync(decl.parent.selector, { lossless: false }); - }); - - systemMap.set(identifierName, selectorMap); - - if (rule) { - rule.walkDecls((decl) => { - const convertedProps = [...conversionMap.keys()]; - - if (!convertedProps.some((key) => decl.value.includes(key))) return; - - // loop over all the updated properties and update internal references to the new variables - for (let [prop, mappedValues] of conversionMap.entries()) { - // Check if this key exists in the value - if (!decl.value.match(new RegExp(`${prop}[^-]`))) continue; - - const systemValues = [...mappedValues]; - - // If there is only one system variable, replace all instances of the prop with the system variable - if (systemValues.length === 1) { - decl.value = decl.value.replace(new RegExp(prop, "g"), systemValues[0]); - continue; - } - - const replacement = checkForReplacement(decl, prop, [ - `--${identifierName}-${cleanPropertyName(prop, { selectorPrefix })}`, - ], systemValues); - - if (replacement) { - decl.value = replacement; - continue; - } - - // @note: this will be an empty variable because we didn't find a match but it will match the format of the other variables - decl.value = decl.value.replace(new RegExp(decl.prop, "g"), `--${identifierName}-${cleanPropertyName(decl.prop, { selectorPrefix })}`); - } - }); - } - - container.remove(); - }); - - // Our job here is done - if (skipMapping || stripLocalSelectors) return; - - const rules = []; - for (let [, selectorMap] of systemMap.entries()) { - // This adds the new selectors to the root with their respective system-level mappings - for (let [selector, props] of Object.entries(selectorMap)) { - const rule = new Rule({ selector }); - - for (let [prop, value] of Object.entries(props)) { - const decl = new Declaration({ prop, value }); - decl.raws.before = "\n "; - - rule.append(decl); - } - - rules.push(rule); - } - } - - // Insert the new rules in order after the first rule in the root - root.append(rules); - }, -}); - -module.exports.postcss = true; diff --git a/plugins/postcss-add-theming-layer/package.json b/plugins/postcss-add-theming-layer/package.json deleted file mode 100644 index baf25437dd4..00000000000 --- a/plugins/postcss-add-theming-layer/package.json +++ /dev/null @@ -1,44 +0,0 @@ -{ - "name": "@spectrum-tools/postcss-add-theming-layer", - "version": "1.0.2", - "description": "Leveraging style container queries to create an abstraction layer for supporting multiple theming systems", - "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-add-theming-layer" - }, - "bugs": { - "url": "https://github.com/adobe/spectrum-css/issues" - }, - "main": "index.js", - "files": [ - "package.json", - "index.js", - "*.md" - ], - "dependencies": { - "postcss-selector-parser": "^6.1.2", - "postcss-values-parser": "^6.0.2" - }, - "peerDependencies": { - "postcss": ">=8" - }, - "devDependencies": { - "ava": "^6.2.0", - "c8": "^10.1.3", - "postcss": "^8.5.3" - }, - "keywords": [ - "css", - "theming", - "custom properties", - "postcss", - "postcss-plugin" - ] -} diff --git a/plugins/postcss-add-theming-layer/project.json b/plugins/postcss-add-theming-layer/project.json deleted file mode 100644 index 7797edce0f8..00000000000 --- a/plugins/postcss-add-theming-layer/project.json +++ /dev/null @@ -1,16 +0,0 @@ -{ - "$schema": "../../node_modules/nx/schemas/project-schema.json", - "name": "postcss-add-theming-layer", - "tags": ["tooling", "postcss"], - "targets": { - "format": { - "defaultConfiguration": "plugins" - }, - "lint": { - "defaultConfiguration": "plugins" - }, - "test": { - "defaultConfiguration": "plugins" - } - } -} diff --git a/plugins/postcss-add-theming-layer/test.js b/plugins/postcss-add-theming-layer/test.js deleted file mode 100644 index ed431c85f20..00000000000 --- a/plugins/postcss-add-theming-layer/test.js +++ /dev/null @@ -1,43 +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"); -}); diff --git a/plugins/postcss-add-theming-layer/utilities.js b/plugins/postcss-add-theming-layer/utilities.js deleted file mode 100644 index 0988f27ce38..00000000000 --- a/plugins/postcss-add-theming-layer/utilities.js +++ /dev/null @@ -1,244 +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 valuesParser = require("postcss-values-parser"); - -/** - * Clean the property name to be used as a variable name - * @param {string} prop - * @param {{ selectorPrefix: string }} options - * @returns {string} The clean variable name - */ -function cleanPropertyName(prop, { selectorPrefix = "" } = {}) { - if (!prop) return; - return ( - prop - // Remove the provided prefix if used - .replace(new RegExp(selectorPrefix, "gi"), "") - // Remove mod from the new property name - .replace(/-?mod-/g, "-") - // Remove state-based prefix - .replace(/is-/g, "") - // Remove the internal identifier marker - .replace(/^_/g, "") - // If a string has a lowercase letter followed by an uppercase letter, insert a dash between them - .replace(/([a-z])([A-Z])/g, "$1-$2") - // If a string has two uppercase letters followed by a lowercase letter, insert a dash between them - .replace(/([A-Z])([A-Z])([a-z])/g, "$1-$2$3") - .replace(/([a-z])([0-9])/g, "$1-$2") - // Remove all whitespace - .replace(/\s+/g, "") - // Remove non-alphanumeric characters - .replace(/\W/g, "-") - // Replace multiple dashes with a single dash - .replace(/-+/g, "-") - // Remove any leading or trailing dashes - .replace(/^-/g, "") - .replace(/-$/g, "") - .toLowerCase() - ); -} - -/** - * Extract the fallback value from a var() function - * @param {string} declValue - * @returns {string} The fallback value - */ -function extractFallbackValue(declValue) { - const parsed = valuesParser.parse(declValue); - let fallbackValue; - - parsed.walk((node) => { - if (node.type !== "func" || node.value !== "var") { - return; - } - - // Assuming the second argument of the var() function is the fallback - const fallbackNode = node.nodes[2]; - if (fallbackNode) { - // Convert the fallback node back to a string - fallbackValue = valuesParser.stringify(fallbackNode); - } - }); - - return fallbackValue; -} - -/** - * Get the base selector for a given selector - * @param {string} selector - * @param {{ selectorPrefix: string }} options - * @returns {string} The base selector - */ -function getBaseSelector(selector, { selectorPrefix = "" } = {}) { - let baseSelector; - - if (!selector || !selector.nodes) return baseSelector; - - // This regex is designed to pull spectrum- out of a selector - const baseRegex = new RegExp( - `^(${selectorPrefix ? `${selectorPrefix}-` : ""}[A-Z][^\\W-.\\s]+)`, - ); - - // Iterate over the selector nodes to find a common root class name - const found = []; - selector.each((node) => { - if (node.type !== "class") return; - if (!node.value) return; - - const value = node.value ?? node.toString(); - const matches = value.match(baseRegex); - if (!matches) return; - - const [, foundSelector] = matches; - if (foundSelector) found.push(foundSelector); - }); - - if (found.length === 1) { - return cleanPropertyName(found[0], { selectorPrefix }); - } - - let countMap = new Map(); - - // Find and return the most common base selector in the array - found.forEach((s) => countMap.set(s, (countMap.get(s) || 0) + 1)); - - let count = 0; - for (let [s, c] of countMap.entries()) { - if (c > count) { - baseSelector = s; - count = c; - } - } - - // Remove the selector prefix from the returned base selector - return baseSelector ? cleanPropertyName(baseSelector, { selectorPrefix }) : baseSelector; -} - -/** - * Fallback function to process the name of the new variable - * @param {string} selector - * @param {string} prop - * @param {{ identifierName: string, identifierValue: string, selectorPrefix: string }} options - * @returns {string} The new variable name - */ -function getVariableName( - selector, - prop, - { selectorPrefix = "", identifierName, identifierValue } = {}, -) { - const baseSelector = getBaseSelector(selector, { selectorPrefix }) ?? ""; - - const clean = (prop) => - prop && - cleanPropertyName( - prop - .replace(new RegExp(selectorPrefix, "gi"), "") - // Remove the identifers if they exist - .replace(new RegExp(baseSelector, "gi"), "") - // Check for identifiers in the property name that don't include the dash - .replace(new RegExp(baseSelector?.replace(/-/g, ""), "gi"), "") - .replace(new RegExp(identifierName, "gi"), "") - .replace(new RegExp(identifierValue, "gi"), ""), - { selectorPrefix } - ); - - let property = []; - - function processSelector(node) { - if (node.type === "pseudo") { - property.push(node.value.slice(1)); - } - else if (node.type === "tag") { - property.push(node.value); - } - else if (node.type === "combinator") { - switch (node.value) { - case " ": // Descendant combinator - break; - case ">": - property.push("child-of"); - break; - case "+": - property.push("next-to"); - break; - case "~": - property.push("sibling-of"); - break; - } - } - else if (node.type === "class") { - if (node.value === baseSelector) return; - property.push(clean(node.value)); - return; - } - - if (!node.nodes) return; - node.each(processSelector); - } - - selector.each(processSelector); - - // Dedupe the property array, removing the 2nd instance of a property - property = property - .filter((value, index) => property.indexOf(value) === index) - .filter(Boolean); - - return `--${[identifierName, baseSelector, clean([...property, prop].filter(Boolean).join("-"))].filter(Boolean).join("-").toLowerCase()}`; -} - -/** - * Check for a replacement value based on the provided guesses - * @param {import('postcss').Declaration} decl - * @param {string} replace - * @param {string[]} guesses - * @param {string[]} systemValues - * @returns {string|undefined|void} The updated declaration value - */ -function checkForReplacement( - decl, - replace, - guesses = [], - systemValues = [], -) { - if (!decl || !replace || guesses.length === 0) return; - - const replacer = new RegExp(replace, "g"); - - for (const g of guesses) { - if (systemValues.includes(g)) { - return decl.value.replace(replacer, g); - } - - const values = systemValues.filter((value) => value.startsWith(g)); - if (values.length === 0) continue; - - if (values.length === 1) { - return decl.value.replace(replacer, values[0]); - } - - if (values.length > 1) { - return decl.value.replace(replacer, values[0]); - } - - continue; - } -} - -module.exports = { - cleanPropertyName, - extractFallbackValue, - getBaseSelector, - getVariableName, - checkForReplacement, -}; diff --git a/plugins/postcss-property-rollup/README.md b/plugins/postcss-property-rollup/README.md deleted file mode 100644 index a7a653d2a1b..00000000000 --- a/plugins/postcss-property-rollup/README.md +++ /dev/null @@ -1,74 +0,0 @@ -# postcss-property-rollup - -> Combines multiple blocks of custom properties - -## Installation - -```sh -npm install postcss-property-rollup -``` - -## Usage - -On the command line: - -```sh -postcss -u postcss-property-rollup -o dist/index.css src/index.css -``` - -or in the PostCSS configuration: - -```js -module.exports = { - plugins: { - "postcss-property-rollup": {}, - }, -}; -``` - -This plugin turns this: - -```css -.lorem { - --spectrum-actionbutton-background-color: blue; - --spectrum-actionbutton-border-color: transparent; -} - -.ipsum { - --spectrum-actionbutton-background-color: purple; -} -``` - -Into this: - -```css -.ipsum { - --spectrum-actionbutton-border-color: transparent; - --spectrum-actionbutton-background-color: purple; -} -``` - -The resulting selector comes from the last rule unless a `newSelector` option is provided, and all duplicate properties in the subsequent rules override the previous declarations. - -## Options - -### `newSelector` - -Type: `string`
-Default: `null` - -The selector to use for the combined rule. If not provided, the last selector in the list will be used. - -### `ignore` - -Type: `string[]`
-Default: `[]` - -An array of selectors to ignore when combining rules. - -### `keyword` - -Type: `string`
-Default: `combine` - -The `@` prefixed comment keyword to search for when determining what code to roll-up into the new selector. diff --git a/plugins/postcss-property-rollup/expected/basic.css b/plugins/postcss-property-rollup/expected/basic.css deleted file mode 100644 index 201ab4356c5..00000000000 --- a/plugins/postcss-property-rollup/expected/basic.css +++ /dev/null @@ -1,4 +0,0 @@ -.spectrum--express { - --spectrum-actionbutton-background-color: purple; - --spectrum-actionbutton-border-color: transparent; -} diff --git a/plugins/postcss-property-rollup/fixtures/basic.css b/plugins/postcss-property-rollup/fixtures/basic.css deleted file mode 100644 index d7614ec6ee3..00000000000 --- a/plugins/postcss-property-rollup/fixtures/basic.css +++ /dev/null @@ -1,9 +0,0 @@ -/* @combine */ -.spectrum { - --spectrum-actionbutton-background-color: blue; - --spectrum-actionbutton-border-color: transparent; -} - -.spectrum--express { - --spectrum-actionbutton-background-color: purple; -} diff --git a/plugins/postcss-property-rollup/index.js b/plugins/postcss-property-rollup/index.js deleted file mode 100644 index 2d986684c94..00000000000 --- a/plugins/postcss-property-rollup/index.js +++ /dev/null @@ -1,98 +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. - */ - -/** - * @typedef Options - * @property ignore {string[]} - List of selectors to ignore - * @property newSelector {string} - New selector to create with the combined declarations - */ - -/** @type import('postcss').PluginCreator */ -module.exports = ({ - ignore = [], - newSelector, -} = {}) => { - return { - postcssPlugin: "postcss-property-rollup", - OnceExit(root, { Rule }) { - let shouldCombine = false; - let localSelector; - // Check the file for a comment with @combine and fetch the preceeding selector(s) - root.walkComments((comment) => { - if (!comment.text.includes("@combine")) return; - - shouldCombine = true; - - // Remove the @combine from the string - const selectors = comment.text.replace("@combine", "").trim(); - - comment.remove(); - - if (!selectors) return; - - // Prefer the selectors from the comment over one provided in the config - if (!localSelector) localSelector = selectors; - }); - - if (!shouldCombine) return; - - if (localSelector) newSelector = localSelector; - - const rules = []; - const declarations = {}; - - root.walkRules((rule) => { - if (ignore.includes(rule.selector)) return; - rules.push(rule); - rule.walkDecls(/^--/, (decl) => { - declarations[decl.prop] = decl; - decl.remove(); - }); - }); - - if (!rules.length) return; - - if (newSelector) { - // Create a new rule with the combined declarations - const newRule = new Rule({ selector: newSelector }); - for (const decl of Object.values(declarations)) { - newRule.append(decl); - } - root.append(newRule); - - // Remove the rules from the root - rules.forEach((rule) => { - rule.remove(); - }); - - return; - } - - // If no new selector is provided, combine the declarations into the last rule - const lastIdx = rules.length - 1; - const lastRule = rules[lastIdx]; - - if (!lastRule) return; - - rules.forEach((rule, index) => { - if (index !== lastIdx) rule.remove(); - }); - - for (const decl of Object.values(declarations)) { - lastRule.append(decl); - } - }, - }; -}; - -module.exports.postcss = true; diff --git a/plugins/postcss-property-rollup/package.json b/plugins/postcss-property-rollup/package.json deleted file mode 100644 index 1c909722236..00000000000 --- a/plugins/postcss-property-rollup/package.json +++ /dev/null @@ -1,40 +0,0 @@ -{ - "name": "@spectrum-tools/postcss-property-rollup", - "version": "0.0.1", - "description": "Combines custom properties from multiple selectors into a single selector", - "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-property-rollup" - }, - "bugs": { - "url": "https://github.com/adobe/spectrum-css/issues" - }, - "main": "index.js", - "files": [ - "package.json", - "index.js", - "*.md" - ], - "peerDependencies": { - "postcss": ">=8" - }, - "devDependencies": { - "ava": "^6.2.0", - "c8": "^10.1.3", - "postcss": "^8.5.3" - }, - "keywords": [ - "css", - "theming", - "custom properties", - "postcss", - "postcss-plugin" - ] -} diff --git a/plugins/postcss-property-rollup/project.json b/plugins/postcss-property-rollup/project.json deleted file mode 100644 index 681869f7a14..00000000000 --- a/plugins/postcss-property-rollup/project.json +++ /dev/null @@ -1,16 +0,0 @@ -{ - "$schema": "../../node_modules/nx/schemas/project-schema.json", - "name": "postcss-property-rollup", - "tags": ["tooling", "postcss"], - "targets": { - "format": { - "defaultConfiguration": "plugins" - }, - "lint": { - "defaultConfiguration": "plugins" - }, - "test": { - "defaultConfiguration": "plugins" - } - } -} diff --git a/plugins/postcss-property-rollup/test.js b/plugins/postcss-property-rollup/test.js deleted file mode 100644 index 2e2923f7b91..00000000000 --- a/plugins/postcss-property-rollup/test.js +++ /dev/null @@ -1,50 +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 = { - processIdentifier: (identifier) => { - if (identifier === "express") { - return "spectrum--express"; - } - return identifier; - }, - } -) { - 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"); -}); diff --git a/plugins/postcss-rgb-mapping/index.js b/plugins/postcss-rgb-mapping/index.js index ce1df4515d1..22ee0214eb9 100644 --- a/plugins/postcss-rgb-mapping/index.js +++ b/plugins/postcss-rgb-mapping/index.js @@ -25,7 +25,7 @@ function rgbMappingFunction ({ }) { return { - postcssPlugin: "postcss-rgb-mapping", + 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) */ diff --git a/plugins/stylelint-no-unknown-custom-properties/index.js b/plugins/stylelint-no-unknown-custom-properties/index.js index 443af61c20e..69ec3f8ad67 100644 --- a/plugins/stylelint-no-unknown-custom-properties/index.js +++ b/plugins/stylelint-no-unknown-custom-properties/index.js @@ -30,7 +30,6 @@ const messages = ruleMessages(ruleName, { expected: (prop) => `Custom property ${prop.magenta} not defined`, }); -import fg from "fast-glob"; import { parse } from "postcss"; import valuesParser from "postcss-values-parser"; @@ -71,14 +70,6 @@ const ruleFunction = (enabled, options = {}) => { const sharedDefinitions = new Set(); - for (const themePath of fg.sync(["themes/*.css"], { cwd: componentRoot, absolute: true })) { - const content = readFileSync(themePath, "utf8"); - if (!content) continue; - parse(content).walkDecls(/^--/, ({ prop }) => { - sharedDefinitions.add(prop); - }); - } - function fetchResolutions(depName) { let req; try { diff --git a/plugins/stylelint-theme-alignment/README.md b/plugins/stylelint-theme-alignment/README.md deleted file mode 100644 index 1aa58cd7fa4..00000000000 --- a/plugins/stylelint-theme-alignment/README.md +++ /dev/null @@ -1,78 +0,0 @@ -# stylelint-no-unused-custom-properties - -> Remove or report on unused variable definitions - -## Installation - -```sh -yarn add -D @spectrum-tools/stylelint-no-unused-custom-properties -``` - -## Usage - -Assuming you have some variables defined and rule(s) that use them: - -```css -:root { - --prefix-component-background-color: blue; - --prefix-component-width: 10px; - --prefix-component-height: 10px; - --prefix-component-size: 10px; -} - -.component { - background-color: var(--prefix-component-background-color); - - width: var(--prefix-component-width); - height: var(--prefix-component-height); -} -``` - -The variables that are not used in any rule will be removed from the output or reported to the console: - -```css -:root { - --prefix-component-background-color: blue; - --prefix-component-width: 10px; - --prefix-component-height: 10px; -} - -.component { - background-color: var(--prefix-component-background-color); - - width: var(--prefix-component-width); - height: var(--prefix-component-height); -} -``` - -To allow variables to be defined without being used, such as when you want to pass custom properties down to a child component, you can add a `/* @passthrough */` comment to the variable definition: - -```css -:root { - /* @passthrough */ - --nested-component-background-color: blue; - --prefix-component-width: 10px; - --prefix-component-height: 10px; - --prefix-component-size: 10px; -} -``` - -To allow a group of properties to be passed down, you can prefix the set with `/* @passthrough start */` and suffix it with `/* @passthrough end */`: - -```css -:root { - /* @passthrough start */ - --nested-component-background-color: blue; - --nested-component-width: 10px; - /* @passthrough end */ - - --prefix-component-height: 10px; - --prefix-component-size: 10px; -} -``` - -## Options - -### `ignoreList` (default: `[]`) - -An array of strings or regular expressions that will be matched against the variable name. If a match is found, the variable will be ignored. diff --git a/plugins/stylelint-theme-alignment/index.js b/plugins/stylelint-theme-alignment/index.js deleted file mode 100644 index 98653a2225a..00000000000 --- a/plugins/stylelint-theme-alignment/index.js +++ /dev/null @@ -1,158 +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 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. - */ - -import fs from "node:fs"; -import { basename, relative, sep } from "node:path"; - -import postcss from "postcss"; -import valuesParser from "postcss-values-parser"; -import stylelint from "stylelint"; -import { isString } from "stylelint/lib/utils/validateTypes.mjs"; - -const { - createPlugin, - utils: { report, ruleMessages, validateOptions } -} = stylelint; - -import "colors"; - -const ruleName = "spectrum-tools/theme-alignment"; -const messages = ruleMessages(ruleName, { - missing: (baseFile, sourceFile, rootPath) => `A base file (${relative(rootPath, baseFile)}) is required to validate ${relative(rootPath, sourceFile)}.`, - // Report if a selector is in this file but not in the base file - expected: (selector, baseFile, rootPath) => `Selector "${selector}" is not used or defined in the base file (${relative(rootPath, baseFile)}).`, - // Report if a custom property is used in this file but not in the base file - referenced: (property, baseFile, rootPath) => `Custom property "${property}" is not used or defined by the base file (${relative(rootPath, baseFile)}).`, -}); - -/** @type {import('stylelint').Plugin} */ -const ruleFunction = (enabled, options = {}) => { - return (root, result) => { - const validOptions = validateOptions( - result, - ruleName, - { - actual: enabled, - possible: [true], - }, - { - actual: options, - possible: { - baseFilename: isString, - }, - optional: true, - }, - ); - - if (!validOptions) return; - - - const { baseFilename = "spectrum" } = options; - - const sourceFile = root.source.input.file; - const parts = sourceFile ? sourceFile.split(sep) : []; - const isTheme = parts[parts.length - 2] === "themes"; - const filename = parts[parts.length - 1]; - - if (!isTheme || basename(filename, ".css") === baseFilename) return; - - // All the parts of the source file but replace the filename with the baseFilename - const baseFile = [...parts.slice(0, -1), `${baseFilename}.css`].join(sep); - const rootPath = parts.slice(0, -2).join(sep); - - // If the base file doesn't exist, throw an error - if (!fs.existsSync(baseFile)) { - report({ - message: messages.missing, - messageArgs: [baseFile, sourceFile, rootPath], - node: root, - result, - ruleName, - }); - return; - } - - // Read in the base file and parse it - const baseContent = fs.readFileSync(baseFile, "utf8"); - const baseRoot = postcss.parse(baseContent); - - /* A list of all selectors in the base file */ - const baseSelectors = new Set(); - /* A list of all properties in the base file */ - const baseProperties = new Set(); - - /* Iterate over selectors in the base root */ - baseRoot.walkRules((rule) => { - rule.selectors.forEach((selector) => { - // Add this selector to the selectors set - baseSelectors.add(selector); - }); - - rule.walkDecls((decl) => { - // If this is a custom property, add it to the properties set - if (decl.prop.startsWith("--")) { - baseProperties.add(decl.prop); - } - - // If the value of this declaration includes a custom property, add it to the properties set - const parsed = valuesParser.parse(decl.value); - parsed.walk((node) => { - if (node.type === "func" && node.value === "var") { - baseProperties.add(node.nodes[0].value); - } - }); - }); - }); - - /* Iterate over selectors in the source root and validate that they align with the base */ - root.walkRules((rule) => { - rule.selectors.forEach((selector) => { - // Check if this selector exists in the base - if (!baseSelectors.has(selector)) { - // Report any selectors that don't exist in the base - report({ - message: messages.expected, - messageArgs: [selector, baseFile, rootPath], - node: rule, - result, - ruleName, - }); - return; - } - }); - - rule.walkDecls((decl) => { - const isProperty = decl.prop.startsWith("--"); - // @todo should report that this is setting something other than a custom property in the theme file - if (!isProperty) { - return; - } - - // If this is a custom property, check if it's used in the base - if (!baseProperties.has(decl.prop)) { - report({ - message: messages.referenced, - messageArgs: [decl.prop, baseFile, rootPath], - node: decl, - result, - ruleName, - }); - } - }); - }); - }; -}; - -ruleFunction.ruleName = ruleName; -ruleFunction.messages = messages; - -export default createPlugin(ruleName, ruleFunction); diff --git a/plugins/stylelint-theme-alignment/package.json b/plugins/stylelint-theme-alignment/package.json deleted file mode 100644 index 38e269695b0..00000000000 --- a/plugins/stylelint-theme-alignment/package.json +++ /dev/null @@ -1,44 +0,0 @@ -{ - "name": "@spectrum-tools/stylelint-theme-alignment", - "version": "1.2.1", - "description": "A utility to ensure that all custom properties are intially defined in a core resource file and all subsequent uses leverage only values defined there first.", - "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/stylelint-theme-alignment" - }, - "bugs": { - "url": "https://github.com/adobe/spectrum-css/issues" - }, - "type": "module", - "main": "index.js", - "files": [ - "package.json", - "index.js", - "*.md" - ], - "dependencies": { - "colors": "^1.4.0", - "postcss": "^8.5.3", - "postcss-values-parser": "^6.0.2" - }, - "peerDependencies": { - "stylelint": ">=16" - }, - "devDependencies": { - "stylelint": "^16.15.0" - }, - "keywords": [ - "css", - "lint", - "properties", - "report", - "stylelint-plugin" - ] -} diff --git a/plugins/stylelint-theme-alignment/project.json b/plugins/stylelint-theme-alignment/project.json deleted file mode 100644 index 90709f217ad..00000000000 --- a/plugins/stylelint-theme-alignment/project.json +++ /dev/null @@ -1,13 +0,0 @@ -{ - "$schema": "../../node_modules/nx/schemas/project-schema.json", - "name": "stylelint-theme-alignment", - "tags": ["tooling", "stylelint"], - "targets": { - "format": { - "defaultConfiguration": "plugins" - }, - "lint": { - "defaultConfiguration": "plugins" - } - } -} diff --git a/postcss.config.js b/postcss.config.js index d30bb25de04..0aa79ab5b96 100644 --- a/postcss.config.js +++ b/postcss.config.js @@ -15,12 +15,7 @@ const fs = require("node:fs"); const { join, basename } = require("node:path"); module.exports = ({ - skipMapping = false, - referencesOnly = false, - preserveVariables = true, - stripLocalSelectors = false, resolveImports = true, - shouldCombine = false, lint = true, verbose = true, minify = false, @@ -84,19 +79,6 @@ module.exports = ({ prefix: "is-" } : false, "postcss-hover-media-feature": {}, - /* --------------------------------------------------- */ - /* ------------------- VARIABLE PARSING -------------- */ - "@spectrum-tools/postcss-add-theming-layer": { - selectorPrefix: "spectrum", - skipMapping, - preserveVariables, - referencesOnly, - stripLocalSelectors, - debug: verbose, - }, - "@spectrum-tools/postcss-property-rollup": shouldCombine ? { - newSelector: ".spectrum", - } : false, ...additionalPlugins, /* --------------------------------------------------- */ /* ------------------- POLYFILLS --------------------- */ @@ -113,7 +95,6 @@ module.exports = ({ stage: 2, env, features: { - "dir-pseudo-class": { preserve: true }, "nesting-rules": { preserve: true, edition: "2021", diff --git a/schemas/metadata.schema.json b/schemas/metadata.schema.json index c91ce98e0f2..1352f802900 100644 --- a/schemas/metadata.schema.json +++ b/schemas/metadata.schema.json @@ -10,71 +10,54 @@ "pattern": "^.+\\.css$", "description": "The path to the source file used in generating the metadata." }, - "selectors": { - "description": "These are the selectors available for the component.", - "type": "array", - "items": { - "type": "string" - } - }, - "modifiers": { - "description": "These are the modifiers available for the component.", - "type": "array", - "items": { - "type": "string", - "pattern": "^--mod-" - } - }, - "component": { - "description": "The component-level custom properties for the component.", - "type": "array", - "items": { - "type": "string", - "pattern": "^--spectrum-" - } - }, - "global": { - "description": "The global custom properties used in this component as generated by the design tokens.", - "type": "array", - "items": { - "type": "string", - "pattern": "^--spectrum-" - } - }, - "system-theme": { - "description": "The system theme hooks created by the postcss tooling to allow theme toggling on a component.", - "type": "array", - "items": { - "type": "string", - "pattern": "^--system-" - } - }, - "passthroughs": { - "description": "Modifier custom properties for nested components that are passed through by this component.", - "type": "array", - "items": { - "type": "string", - "pattern": "^--mod-" - } - }, - "high-contrast": { - "description": "Custom properties that allow high-contrast styles to be applied to the component.", - "type": "array", - "items": { - "type": "string", - "pattern": "^--highcontrast-" - } - } + "selectors": { + "description": "These are the selectors available for the component.", + "type": "array", + "items": { + "type": "string" + } + }, + "modifiers": { + "description": "These are the modifiers available for the component.", + "type": "array", + "items": { + "type": "string", + "pattern": "^--mod-" + } + }, + "component": { + "description": "The component-level custom properties for the component.", + "type": "array", + "items": { + "type": "string", + "pattern": "^--spectrum-" + } + }, + "global": { + "description": "The global custom properties used in this component as generated by the design tokens.", + "type": "array", + "items": { + "type": "string", + "pattern": "^--spectrum-" + } + }, + "passthroughs": { + "description": "Modifier custom properties for nested components that are passed through by this component.", + "type": "array", + "items": { + "type": "string", + "pattern": "^--mod-" + } + }, + "high-contrast": { + "description": "Custom properties that allow high-contrast styles to be applied to the component.", + "type": "array", + "items": { + "type": "string", + "pattern": "^--highcontrast-" + } + } }, - "required": [ - "sourceFile", - "selectors", - "modifiers", - "component", - "global", - "system-theme", - "passthroughs", - "high-contrast" - ], + "required": ["sourceFile", "selectors", "modifiers", "component", "global", "passthroughs", "high-contrast"], "additionalProperties": false } diff --git a/stylelint.config.js b/stylelint.config.js index e0afd5518ec..f4b704f4bd0 100644 --- a/stylelint.config.js +++ b/stylelint.config.js @@ -11,7 +11,6 @@ module.exports = { "@spectrum-tools/stylelint-no-missing-var", "@spectrum-tools/stylelint-no-unused-custom-properties", "@spectrum-tools/stylelint-no-unknown-custom-properties", - "@spectrum-tools/stylelint-theme-alignment", // "stylelint-high-performance-animation", ], ignoreFiles: [ @@ -164,7 +163,6 @@ module.exports = { * Local/custom plugins * -------------------------------------------------------------- */ "spectrum-tools/no-missing-var": true, - "spectrum-tools/theme-alignment": null, "spectrum-tools/no-unused-custom-properties": null, "spectrum-tools/no-unknown-custom-properties": null, }, @@ -173,7 +171,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-]+", { @@ -222,21 +220,6 @@ module.exports = { "custom-property-pattern": [/^(spectrum|color|scale|system)/, {}], } }, - { - /* Validate that the legacy themes don't introduce any new selectors or custom properties */ - files: ["components/*/themes/express.css", "components/*/themes/spectrum.css"], - rules: { - "spectrum-tools/no-unused-custom-properties": null, - "selector-class-pattern": [ - "^(spectrum-|is-|u-)[A-Za-z0-9-]+", { - resolveNestedSelectors: true - } - ], - "spectrum-tools/theme-alignment": [true, { - baseFilename: "spectrum-two", - }], - }, - }, { /* Allow "tree shaking" of unused custom properties in the bundle */ files: ["tools/bundle/**/*.css"], diff --git a/tasks/clean-up-after-migration.sh b/tasks/clean-up-after-migration.sh index 101f07e82ee..f04cb29e10c 100644 --- a/tasks/clean-up-after-migration.sh +++ b/tasks/clean-up-after-migration.sh @@ -13,11 +13,6 @@ # After migrating from our old build system, there are a lot of empty folders hanging out still # This script aims to clean up those folders -# Legacy tools folder (included storybook & generator) -# test -d "tools" && rm -rf tools - -test -d "tools" && rm -rf tools - # Remove deprecated files for folder in components/*; do # Only processing nested folders, not top-level files diff --git a/tasks/compare-compiled-output.js b/tasks/compare-compiled-output.js index 37b534c4251..a6657537ae9 100644 --- a/tasks/compare-compiled-output.js +++ b/tasks/compare-compiled-output.js @@ -150,7 +150,7 @@ async function generateDiff({ ...renderData, html, }, - join(outputPath, `index.html`) + join(outputPath, "index.html") ); } @@ -197,7 +197,8 @@ async function processComponent( const files = (await fg("**/*.css", { cwd: join(cwd, component, "dist") })) ?? []; files.forEach((file) => filelist.add(file)); - } else { + } + else { warnings.push( `${ `${relative(pathing.root, join(cwd, component))}`.yellow @@ -236,7 +237,8 @@ async function processComponent( (tarballFile.status && tarballFile.status !== 200) ) { log.error(`Failed to fetch release content for ${pkg.name}`); - } else { + } + else { await writeFile(tarballPath, await tarballFile.buffer(), { encoding: "utf-8", }); @@ -306,7 +308,6 @@ async function processComponent( } async function processFile(filename, localPath, comparePath) { - const componentName = localPath.split("/")[localPath.split("/").length - 2]; const data = {}; // Look for the file locally @@ -456,9 +457,9 @@ async function main( const { local, npm } = fileMap.get(file); const indicatorColor = (localSize, tagSize = 0) => { - if (localSize < tagSize) return 'green'; - if (localSize > tagSize) return 'red'; - else return 'gray'; + if (localSize < tagSize) return "green"; + if (localSize > tagSize) return "red"; + else return "gray"; }; const localSize = local?.size && `${bytesToSize(local.size)}`[indicatorColor(local.size, npm?.size)]; @@ -466,8 +467,8 @@ async function main( log.writeTable([ `${file}`.green, - localSize ?? `** removed **`.red, - tagSize ?? `** new **`.yellow, + localSize ?? "** removed **".red, + tagSize ?? "** new **".yellow, ], { min: 25, max: maxColumnWidth + 15 }); if (local?.size && npm?.size && local.size !== npm.size) { diff --git a/tasks/component-builder.js b/tasks/component-builder.js index 93afb637693..6d37af3b6a4 100644 --- a/tasks/component-builder.js +++ b/tasks/component-builder.js @@ -196,79 +196,6 @@ async function build({ cwd = process.cwd(), clean = false, minify = false, compo ]); } -/** - * The builder for the individual themes assets - * @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 buildThemes({ cwd = process.cwd(), minify = false, clean = false } = {}) { - // This fetches the content of the files and returns an array of objects with the content and input paths - const contentData = await fetchContent(["themes/*.css"], { cwd, clean }); - - // Nothing to do if there's no content - if (!contentData || contentData.length === 0) return; - - const imports = contentData.map(({ input }) => input); - const importMap = imports.map((i) => `@import "${i}";`).join("\n"); - - const basePostCSSOptions = { - cwd, - clean, - map: false, - env: "production", - lint: false, - }; - - const promises = []; - - contentData.forEach(async ({ content, input }) => { - const theme = path.basename(input, ".css"); - - promises.push( - processCSS(content, path.join(cwd, input), path.join(cwd, "dist", "themes", `${theme}.css`), { - ...basePostCSSOptions, - shouldCombine: true, - // Only output the new selectors with the system mappings - stripLocalSelectors: true, - }), - minify ? processCSS(content, path.join(cwd, input), path.join(cwd, "dist", "themes", `${theme}.min.css`), { - ...basePostCSSOptions, - shouldCombine: true, - // Only output the new selectors with the system mappings - stripLocalSelectors: true, - }) : Promise.resolve(), - ); - }); - - promises.push( - processCSS(undefined, path.join(cwd, "index.css"), path.join(cwd, "dist", "index-base.css"), { - ...basePostCSSOptions, - referencesOnly: true, - // Only output the new selectors with the system mappings - stripLocalSelectors: true, - }), - minify ? processCSS(undefined, path.join(cwd, "index.css"), path.join(cwd, "dist", "index-base.min.css"), { - ...basePostCSSOptions, - referencesOnly: true, - // Only output the new selectors with the system mappings - stripLocalSelectors: true, - }) : Promise.resolve(), - // Expect this file to have component-specific selectors mapping to the system tokens but not the system tokens themselves - processCSS(importMap, path.join(cwd, "index.css"), path.join(cwd, "dist", "index-theme.css"), { - ...basePostCSSOptions, - referencesOnly: true, - }), - minify ? processCSS(importMap, path.join(cwd, "index.css"), path.join(cwd, "dist", "index-theme.min.css"), { - ...basePostCSSOptions, - referencesOnly: true, - }) : Promise.resolve(), - ); - - return Promise.all(promises); -} - /** * The main entry point for this tool; this builds a CSS component * @param {object} config @@ -304,42 +231,33 @@ async function main({ const key = `[build] ${`@spectrum-css/${componentName}`.cyan}`; console.time(key); - // Create the dist directory if it doesn't exist - if (!fs.existsSync(path.join(cwd, "dist"))) { - fs.mkdirSync(path.join(cwd, "dist")); + const reports = []; + const errors = []; + + await build({ cwd, clean, minify }).then((report) => reports.push(report)).catch((err) => errors.push(err)); + + const logs = reports.flat(Infinity).filter(Boolean); + const errs = errors.flat(Infinity).filter(Boolean); + + console.log(`\n\n${key} 🔨`); + console.log(`${"".padStart(30, "-")}`); + + if (errs && errs.length > 0) { + errs.forEach((err) => console.error(err)); + } + else { + if (logs && logs.length > 0) { + logs.forEach((log) => console.log(log)); + } + else console.log("No assets created.".gray); } - return Promise.all([ - build({ cwd, clean, minify }), - buildThemes({ cwd, clean, minify }), - ]) - .then((report) => { - const logs = report.flat(Infinity).filter(Boolean); - - console.log(`\n\n${key} 🔨`); - console.log(`${"".padStart(30, "-")}`); - - if (logs && logs.length > 0) { - logs.forEach((log) => console.log(log)); - } - else console.log("No assets created.".gray); - - console.log(`${"".padStart(30, "-")}`); - console.timeEnd(key); - console.log(""); - }) - .catch((err) => { - console.log(`\n\n${key} 🔨`); - console.log(`${"".padStart(30, "-")}`); - - console.trace(err); - - console.log(`${"".padStart(30, "-")}`); - console.timeEnd(key); - console.log(""); - - process.exit(1); - }); + console.log(`${"".padStart(30, "-")}`); + console.timeEnd(key); + console.log(""); + + if (errs && errs.length > 0) process.exit(1); + else process.exit(0); } exports.processCSS = processCSS; diff --git a/tasks/component-reporter.js b/tasks/component-reporter.js index 444449c833a..379256b9107 100644 --- a/tasks/component-reporter.js +++ b/tasks/component-reporter.js @@ -66,6 +66,9 @@ async function extractModifiers( const selectors = new Set(); const root = postcss.parse(content); root.walkRules((rule) => { + // Check that the selector is not inside a keyframe + if (rule.parent.type === "atrule" && rule.parent.name === "keyframes") return; + if (rule.selectors) { rule.selectors.forEach((selector) => { // If the selector is not a base selector, add it to the set @@ -170,10 +173,6 @@ async function main({ const processed = await processCSS(undefined, sourceCSS, undefined, { cwd, - skipMapping: false, - referencesOnly: false, - preserveVariables: true, - stripLocalSelectors: false, map: false, env: "production", }); @@ -184,11 +183,10 @@ async function main({ cwd, sourcePath: sourceCSS, componentName, - baseSelectors: [".spectrum", ".spectrum--express", ".spectrum--legacy"], + baseSelectors: [".spectrum"], dataModel: { modifiers: ["mod"], spectrum: ["spectrum"], - "system-theme": ["system"], "high-contrast": ["highcontrast"], }, } @@ -203,7 +201,6 @@ async function main({ modifiers: meta.modifiers, component: meta.component, global: meta.global, - "system-theme": meta["system-theme"], passthroughs: meta.passthroughs, "high-contrast": meta["high-contrast"], }, null, 2), diff --git a/tasks/templates/diff-preview.njk b/tasks/templates/diff-preview.njk index dc90d09a576..468a77ed93c 100644 --- a/tasks/templates/diff-preview.njk +++ b/tasks/templates/diff-preview.njk @@ -7,11 +7,11 @@ - + - - - + + + diff --git a/tokens/README.md b/tokens/README.md index a0e99bf2381..ebdf427d75e 100644 --- a/tokens/README.md +++ b/tokens/README.md @@ -29,7 +29,7 @@ Consumers should load only the mappings for the components they are using in the The output is concatenated into a single `dist/index.css` for use in a vanilla HTML application. This entire file should be imported, and the relevant classes should be toggled to swap out core tokens. -On the `` element, start with `.spectrum`, add in `.spectrum--light`, then `.spectrum--medium`. To switch to another context, add `.spectrum--legacy` or `.spectrum--express`. +On the `` element, start with `.spectrum`, add in `.spectrum--light`, then `.spectrum--medium`. For additional guidance on which assets to load, see the architecture section below. diff --git a/tokens/custom/global-vars.css b/tokens/custom/global-vars.css index 55cad6984bd..663e24ad887 100644 --- a/tokens/custom/global-vars.css +++ b/tokens/custom/global-vars.css @@ -57,9 +57,15 @@ --spectrum-cjk-font-family-stack: adobe-clean-han-japanese, var(--spectrum-cjk-font-family), sans-serif; --spectrum-cjk-font: var(--spectrum-code-font-family-stack); - /* static white / black background color for docs containers */ - --spectrum-docs-static-white-background-color: rgb(15 121 125); - --spectrum-docs-static-black-background-color: rgb(181 209 211); + /* 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); + + /* override for Spectrum Tokens value until a Style Dictionary transform gets written for our usage */ + --spectrum-corner-radius-1000: 9999px; } diff --git a/tokens/custom/large-vars.css b/tokens/custom/large-vars.css index 358ad3404c6..cdc0bc73bf9 100644 --- a/tokens/custom/large-vars.css +++ b/tokens/custom/large-vars.css @@ -104,6 +104,11 @@ --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; @@ -111,7 +116,9 @@ --spectrum-treeview-indicator-inset-block-start: 6px; --spectrum-treeview-item-min-block-size-thumbnail-offset-medium: 2px; - --spectrum-tooltip-animation-distance: 5px; + /* 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; diff --git a/tokens/custom/medium-vars.css b/tokens/custom/medium-vars.css index 5221e74999c..817e26b2d5d 100644 --- a/tokens/custom/medium-vars.css +++ b/tokens/custom/medium-vars.css @@ -102,6 +102,11 @@ --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); @@ -109,7 +114,9 @@ --spectrum-treeview-item-indentation-extra-large: var(--spectrum-spacing-400); --spectrum-treeview-item-min-block-size-thumbnail-offset-medium: 0px; - --spectrum-tooltip-animation-distance: var(--spectrum-spacing-75); + /* 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; diff --git a/tokens/dist/json/tokens.json b/tokens/dist/json/tokens.json index 2be36fb5803..015269c161e 100644 --- a/tokens/dist/json/tokens.json +++ b/tokens/dist/json/tokens.json @@ -386,6 +386,42 @@ "value": "20px" } }, + "accordion-content-area-edge-to-content-extra-large": { + "prop": "--spectrum-accordion-content-area-edge-to-content-extra-large", + "desktop": { + "value": "15px" + }, + "mobile": { + "value": "19px" + } + }, + "accordion-content-area-edge-to-content-large": { + "prop": "--spectrum-accordion-content-area-edge-to-content-large", + "desktop": { + "value": "12px" + }, + "mobile": { + "value": "15px" + } + }, + "accordion-content-area-edge-to-content-medium": { + "prop": "--spectrum-accordion-content-area-edge-to-content-medium", + "desktop": { + "value": "9px" + }, + "mobile": { + "value": "11px" + } + }, + "accordion-content-area-edge-to-content-small": { + "prop": "--spectrum-accordion-content-area-edge-to-content-small", + "desktop": { + "value": "8px" + }, + "mobile": { + "value": "10px" + } + }, "accordion-content-area-top-to-content": { "prop": "--spectrum-accordion-content-area-top-to-content", "desktop": { @@ -399,6 +435,42 @@ "prop": "--spectrum-accordion-disclosure-indicator-to-text", "value": "0px" }, + "accordion-disclosure-indicator-to-text-extra-large": { + "prop": "--spectrum-accordion-disclosure-indicator-to-text-extra-large", + "desktop": { + "value": "17px" + }, + "mobile": { + "value": "22px" + } + }, + "accordion-disclosure-indicator-to-text-large": { + "prop": "--spectrum-accordion-disclosure-indicator-to-text-large", + "desktop": { + "value": "14px" + }, + "mobile": { + "value": "17px" + } + }, + "accordion-disclosure-indicator-to-text-medium": { + "prop": "--spectrum-accordion-disclosure-indicator-to-text-medium", + "desktop": { + "value": "11px" + }, + "mobile": { + "value": "13px" + } + }, + "accordion-disclosure-indicator-to-text-small": { + "prop": "--spectrum-accordion-disclosure-indicator-to-text-small", + "desktop": { + "value": "7px" + }, + "mobile": { + "value": "9px" + } + }, "accordion-edge-to-disclosure-indicator": { "prop": "--spectrum-accordion-edge-to-disclosure-indicator", "value": "0px" @@ -411,6 +483,10 @@ "prop": "--spectrum-accordion-focus-indicator-gap", "value": "0px" }, + "accordion-item-to-divider": { + "prop": "--spectrum-accordion-item-to-divider", + "value": "0px" + }, "accordion-minimum-width": { "prop": "--spectrum-accordion-minimum-width", "desktop": { @@ -527,22 +603,68 @@ "value": "12px" } }, + "action-bar-bottom-to-content-area": { + "prop": "--spectrum-action-bar-bottom-to-content-area", + "ref": "var(--spectrum-spacing-200)", + "value": "12px" + }, + "action-bar-close-button-to-counter": { + "prop": "--spectrum-action-bar-close-button-to-counter", + "ref": "var(--spectrum-text-to-control-50)", + "desktop": { + "value": "4px" + }, + "mobile": { + "value": "5px" + } + }, + "action-bar-counter-font-size": { + "prop": "--spectrum-action-bar-counter-font-size", + "ref": "var(--spectrum-font-size-100)", + "desktop": { + "value": "14px" + }, + "mobile": { + "value": "17px" + } + }, + "action-bar-edge-to-content-area": { + "prop": "--spectrum-action-bar-edge-to-content-area", + "ref": "var(--spectrum-spacing-100)", + "value": "8px" + }, "action-bar-height": { "prop": "--spectrum-action-bar-height", + "ref": "var(--spectrum-component-height-400)", "desktop": { - "value": "48px" + "value": "56px" }, "mobile": { - "value": "56px" + "value": "70px" } }, + "action-bar-label-to-action-group-area": { + "prop": "--spectrum-action-bar-label-to-action-group-area", + "ref": "var(--spectrum-spacing-300)", + "value": "16px" + }, + "action-bar-minimum-width": { + "prop": "--spectrum-action-bar-minimum-width", + "value": "176px" + }, + "action-bar-top-to-content-area": { + "prop": "--spectrum-action-bar-top-to-content-area", + "ref": "var(--spectrum-spacing-200)", + "value": "12px" + }, "action-bar-top-to-item-counter": { "prop": "--spectrum-action-bar-top-to-item-counter", + "ref": "var(--spectrum-component-top-to-text-300)", "desktop": { - "value": "14px" + "value": "12px" }, "mobile": { - "value": "16px" + "value": "15px" } }, "action-button-edge-to-hold-icon-extra-large": { @@ -583,7 +705,7 @@ "alert-banner-bottom-to-text": { "prop": "--spectrum-alert-banner-bottom-to-text", "desktop": { - "value": "17px" + "value": "20px" }, "mobile": { "value": "22px" @@ -592,7 +714,7 @@ "alert-banner-minimum-height": { "prop": "--spectrum-alert-banner-minimum-height", "desktop": { - "value": "48px" + "value": "56px" }, "mobile": { "value": "64px" @@ -602,7 +724,7 @@ "prop": "--spectrum-alert-banner-to-bottom-text", "ref": "var(--spectrum-alert-banner-bottom-to-text)", "desktop": { - "value": "17px" + "value": "20px" }, "mobile": { "value": "22px" @@ -612,7 +734,7 @@ "prop": "--spectrum-alert-banner-to-top-text", "ref": "var(--spectrum-alert-banner-top-to-text)", "desktop": { - "value": "14px" + "value": "18px" }, "mobile": { "value": "21px" @@ -622,16 +744,25 @@ "prop": "--spectrum-alert-banner-to-top-workflow-icon", "ref": "var(--spectrum-alert-banner-top-to-workflow-icon)", "desktop": { - "value": "15px" + "value": "18px" }, "mobile": { - "value": "21px" + "value": "20px" + } + }, + "alert-banner-top-to-alert-icon": { + "prop": "--spectrum-alert-banner-top-to-alert-icon", + "desktop": { + "value": "37px" + }, + "mobile": { + "value": "29px" } }, "alert-banner-top-to-text": { "prop": "--spectrum-alert-banner-top-to-text", "desktop": { - "value": "14px" + "value": "18px" }, "mobile": { "value": "21px" @@ -640,10 +771,10 @@ "alert-banner-top-to-workflow-icon": { "prop": "--spectrum-alert-banner-top-to-workflow-icon", "desktop": { - "value": "15px" + "value": "18px" }, "mobile": { - "value": "21px" + "value": "20px" } }, "alert-banner-width": { @@ -655,14 +786,24 @@ "value": "680px" } }, + "alert-dialog-description-font-size": { + "prop": "--spectrum-alert-dialog-description-font-size", + "ref": "var(--spectrum-body-size-s)", + "desktop": { + "value": "16px" + }, + "mobile": { + "value": "17px" + } + }, "alert-dialog-description-size": { "prop": "--spectrum-alert-dialog-description-size", - "ref": "var(--spectrum-body-size-xs)", + "ref": "var(--spectrum-body-size-s)", "desktop": { - "value": "14px" + "value": "16px" }, "mobile": { - "value": "15px" + "value": "17px" } }, "alert-dialog-maximum-width": { @@ -673,14 +814,24 @@ "prop": "--spectrum-alert-dialog-minimum-width", "value": "288px" }, + "alert-dialog-title-font-size": { + "prop": "--spectrum-alert-dialog-title-font-size", + "ref": "var(--spectrum-title-size-xl)", + "desktop": { + "value": "22px" + }, + "mobile": { + "value": "24px" + } + }, "alert-dialog-title-size": { "prop": "--spectrum-alert-dialog-title-size", - "ref": "var(--spectrum-heading-size-xs)", + "ref": "var(--spectrum-title-size-xl)", "desktop": { - "value": "18px" + "value": "22px" }, "mobile": { - "value": "19px" + "value": "24px" } }, "android-elevation": { @@ -781,49 +932,64 @@ "prop": "--spectrum-asterisk-icon-size-75", "value": "8px" }, - "avatar-opacity-disabled": { - "prop": "--spectrum-avatar-opacity-disabled", - "ref": "var(--spectrum-opacity-disabled)", - "value": "0.3" - }, - "avatar-size-100": { - "prop": "--spectrum-avatar-size-100", - "desktop": { - "value": "20px" + "avatar-border-color": { + "prop": "--spectrum-avatar-border-color", + "ref": "var(--spectrum-gray-25)", + "dark": { + "value": "rgb(17, 17, 17)" }, - "mobile": { - "value": "26px" + "light": { + "value": "rgb(255, 255, 255)" } }, - "avatar-size-200": { - "prop": "--spectrum-avatar-size-200", + "avatar-border-width": { + "prop": "--spectrum-avatar-border-width", + "ref": "var(--spectrum-border-width-100)", + "value": "1px" + }, + "avatar-group-size-100": { + "prop": "--spectrum-avatar-group-size-100", + "ref": "var(--spectrum-avatar-size-100)", "desktop": { - "value": "22px" + "value": "24px" }, "mobile": { "value": "28px" } }, - "avatar-size-300": { - "prop": "--spectrum-avatar-size-300", + "avatar-group-size-200": { + "prop": "--spectrum-avatar-group-size-200", + "ref": "var(--spectrum-avatar-size-200)", "desktop": { - "value": "26px" + "value": "28px" }, "mobile": { "value": "32px" } }, - "avatar-size-400": { - "prop": "--spectrum-avatar-size-400", + "avatar-group-size-300": { + "prop": "--spectrum-avatar-group-size-300", + "ref": "var(--spectrum-avatar-size-300)", "desktop": { - "value": "28px" + "value": "32px" }, "mobile": { "value": "36px" } }, - "avatar-size-50": { - "prop": "--spectrum-avatar-size-50", + "avatar-group-size-400": { + "prop": "--spectrum-avatar-group-size-400", + "ref": "var(--spectrum-avatar-size-400)", + "desktop": { + "value": "36px" + }, + "mobile": { + "value": "40px" + } + }, + "avatar-group-size-50": { + "prop": "--spectrum-avatar-group-size-50", + "ref": "var(--spectrum-avatar-size-50)", "desktop": { "value": "16px" }, @@ -831,89 +997,294 @@ "value": "20px" } }, - "avatar-size-500": { - "prop": "--spectrum-avatar-size-500", + "avatar-group-size-500": { + "prop": "--spectrum-avatar-group-size-500", + "ref": "var(--spectrum-avatar-size-500)", "desktop": { - "value": "32px" + "value": "40px" }, "mobile": { - "value": "40px" + "value": "44px" } }, - "avatar-size-600": { - "prop": "--spectrum-avatar-size-600", + "avatar-group-size-75": { + "prop": "--spectrum-avatar-group-size-75", + "ref": "var(--spectrum-avatar-size-75)", "desktop": { - "value": "36px" + "value": "20px" }, "mobile": { - "value": "46px" + "value": "24px" } }, - "avatar-size-700": { - "prop": "--spectrum-avatar-size-700", + "avatar-opacity-disabled": { + "prop": "--spectrum-avatar-opacity-disabled", + "ref": "var(--spectrum-opacity-disabled)", + "value": "0.3" + }, + "avatar-size-100": { + "prop": "--spectrum-avatar-size-100", "desktop": { - "value": "40px" + "value": "24px" }, "mobile": { - "value": "50px" + "value": "28px" } }, - "avatar-size-75": { - "prop": "--spectrum-avatar-size-75", + "avatar-size-1000": { + "prop": "--spectrum-avatar-size-1000", "desktop": { - "value": "18px" + "value": "64px" }, "mobile": { - "value": "22px" + "value": "72px" } }, - "background-base-color": { - "prop": "--spectrum-background-base-color", - "ref": "var(--spectrum-gray-25)", - "dark": { - "value": "rgb(17, 17, 17)" + "avatar-size-1100": { + "prop": "--spectrum-avatar-size-1100", + "desktop": { + "value": "72px" }, - "light": { - "value": "rgb(255, 255, 255)" + "mobile": { + "value": "80px" } }, - "background-elevated-color": { - "prop": "--spectrum-background-elevated-color", - "ref": "var(--spectrum-gray-25)", - "dark": { - "value": "rgb(34, 34, 34)" + "avatar-size-1200": { + "prop": "--spectrum-avatar-size-1200", + "desktop": { + "value": "80px" }, - "light": { - "value": "rgb(255, 255, 255)" + "mobile": { + "value": "88px" } }, - "background-layer-1-color": { - "prop": "--spectrum-background-layer-1-color", - "ref": "var(--spectrum-gray-50)", - "light": { - "value": "rgb(248, 248, 248)" + "avatar-size-1300": { + "prop": "--spectrum-avatar-size-1300", + "desktop": { + "value": "88px" }, - "dark": { - "value": "rgb(27, 27, 27)" + "mobile": { + "value": "96px" } }, - "background-layer-2-color": { - "prop": "--spectrum-background-layer-2-color", - "ref": "var(--spectrum-gray-75)", - "light": { - "value": "rgb(255, 255, 255)" + "avatar-size-1400": { + "prop": "--spectrum-avatar-size-1400", + "desktop": { + "value": "96px" }, - "dark": { - "value": "rgb(34, 34, 34)" + "mobile": { + "value": "104px" } }, - "background-opacity-default": { - "prop": "--spectrum-background-opacity-default", - "value": "0" - }, - "background-opacity-down": { - "prop": "--spectrum-background-opacity-down", - "value": "0.1" + "avatar-size-1500": { + "prop": "--spectrum-avatar-size-1500", + "desktop": { + "value": "104px" + }, + "mobile": { + "value": "112px" + } + }, + "avatar-size-200": { + "prop": "--spectrum-avatar-size-200", + "desktop": { + "value": "28px" + }, + "mobile": { + "value": "32px" + } + }, + "avatar-size-300": { + "prop": "--spectrum-avatar-size-300", + "desktop": { + "value": "32px" + }, + "mobile": { + "value": "36px" + } + }, + "avatar-size-400": { + "prop": "--spectrum-avatar-size-400", + "desktop": { + "value": "36px" + }, + "mobile": { + "value": "40px" + } + }, + "avatar-size-50": { + "prop": "--spectrum-avatar-size-50", + "desktop": { + "value": "16px" + }, + "mobile": { + "value": "20px" + } + }, + "avatar-size-500": { + "prop": "--spectrum-avatar-size-500", + "desktop": { + "value": "40px" + }, + "mobile": { + "value": "44px" + } + }, + "avatar-size-600": { + "prop": "--spectrum-avatar-size-600", + "desktop": { + "value": "44px" + }, + "mobile": { + "value": "48px" + } + }, + "avatar-size-700": { + "prop": "--spectrum-avatar-size-700", + "desktop": { + "value": "48px" + }, + "mobile": { + "value": "52px" + } + }, + "avatar-size-75": { + "prop": "--spectrum-avatar-size-75", + "desktop": { + "value": "20px" + }, + "mobile": { + "value": "24px" + } + }, + "avatar-size-800": { + "prop": "--spectrum-avatar-size-800", + "desktop": { + "value": "52px" + }, + "mobile": { + "value": "56px" + } + }, + "avatar-size-900": { + "prop": "--spectrum-avatar-size-900", + "desktop": { + "value": "56px" + }, + "mobile": { + "value": "64px" + } + }, + "avatar-to-avatar-100": { + "prop": "--spectrum-avatar-to-avatar-100", + "desktop": { + "value": "-6px" + }, + "mobile": { + "value": "-7px" + } + }, + "avatar-to-avatar-200": { + "prop": "--spectrum-avatar-to-avatar-200", + "desktop": { + "value": "-7px" + }, + "mobile": { + "value": "-8px" + } + }, + "avatar-to-avatar-300": { + "prop": "--spectrum-avatar-to-avatar-300", + "desktop": { + "value": "-8px" + }, + "mobile": { + "value": "-9px" + } + }, + "avatar-to-avatar-400": { + "prop": "--spectrum-avatar-to-avatar-400", + "desktop": { + "value": "-9px" + }, + "mobile": { + "value": "-10px" + } + }, + "avatar-to-avatar-50": { + "prop": "--spectrum-avatar-to-avatar-50", + "desktop": { + "value": "-4px" + }, + "mobile": { + "value": "-5px" + } + }, + "avatar-to-avatar-500": { + "prop": "--spectrum-avatar-to-avatar-500", + "desktop": { + "value": "-10px" + }, + "mobile": { + "value": "-11px" + } + }, + "avatar-to-avatar-75": { + "prop": "--spectrum-avatar-to-avatar-75", + "desktop": { + "value": "-5px" + }, + "mobile": { + "value": "-6px" + } + }, + "background-base-color": { + "prop": "--spectrum-background-base-color", + "ref": "var(--spectrum-gray-25)", + "dark": { + "value": "rgb(17, 17, 17)" + }, + "light": { + "value": "rgb(255, 255, 255)" + } + }, + "background-elevated-color": { + "prop": "--spectrum-background-elevated-color", + "ref": "var(--spectrum-gray-25)", + "dark": { + "value": "rgb(34, 34, 34)" + }, + "light": { + "value": "rgb(255, 255, 255)" + } + }, + "background-layer-1-color": { + "prop": "--spectrum-background-layer-1-color", + "ref": "var(--spectrum-gray-50)", + "light": { + "value": "rgb(248, 248, 248)" + }, + "dark": { + "value": "rgb(27, 27, 27)" + } + }, + "background-layer-2-color": { + "prop": "--spectrum-background-layer-2-color", + "ref": "var(--spectrum-gray-75)", + "light": { + "value": "rgb(255, 255, 255)" + }, + "dark": { + "value": "rgb(34, 34, 34)" + } + }, + "background-opacity-default": { + "prop": "--spectrum-background-opacity-default", + "value": "0" + }, + "background-opacity-down": { + "prop": "--spectrum-background-opacity-down", + "value": "0.1" }, "background-opacity-hover": { "prop": "--spectrum-background-opacity-hover", @@ -933,6 +1304,42 @@ "value": "rgb(233, 233, 233)" } }, + "bar-panel-gripper-color": { + "prop": "--spectrum-bar-panel-gripper-color", + "ref": "var(--spectrum-gray-200)", + "light": { + "value": "rgb(225, 225, 225)" + }, + "dark": { + "value": "rgb(50, 50, 50)" + } + }, + "bar-panel-gripper-color-drag": { + "prop": "--spectrum-bar-panel-gripper-color-drag", + "ref": "var(--spectrum-gray-800)", + "light": { + "value": "rgb(41, 41, 41)" + }, + "dark": { + "value": "rgb(219, 219, 219)" + } + }, + "bar-panel-maximum-width": { + "prop": "--spectrum-bar-panel-maximum-width", + "value": "72px" + }, + "bar-panel-minimum-width": { + "prop": "--spectrum-bar-panel-minimum-width", + "value": "40px" + }, + "bar-panel-spacing-extra-spacious": { + "prop": "--spectrum-bar-panel-spacing-extra-spacious", + "value": "20px" + }, + "bar-panel-width": { + "prop": "--spectrum-bar-panel-width", + "value": "56px" + }, "black": { "prop": "--spectrum-black", "value": "rgb(0, 0, 0)" @@ -1143,46 +1550,126 @@ "body-cjk-line-height": { "prop": "--spectrum-body-cjk-line-height", "ref": "var(--spectrum-cjk-line-height-200)", - "value": "1.7" + "value": 1.7 }, - "body-cjk-strong-emphasized-font-style": { - "prop": "--spectrum-body-cjk-strong-emphasized-font-style", - "ref": "var(--spectrum-default-font-style)", - "value": "normal" + "body-cjk-size-l": { + "prop": "--spectrum-body-cjk-size-l", + "ref": "var(--spectrum-font-size-200)", + "desktop": { + "value": "16px" + }, + "mobile": { + "value": "19px" + } }, - "body-cjk-strong-emphasized-font-weight": { - "prop": "--spectrum-body-cjk-strong-emphasized-font-weight", - "ref": "var(--spectrum-black-font-weight)", - "value": "900" + "body-cjk-size-m": { + "prop": "--spectrum-body-cjk-size-m", + "ref": "var(--spectrum-font-size-100)", + "desktop": { + "value": "14px" + }, + "mobile": { + "value": "17px" + } }, - "body-cjk-strong-font-style": { - "prop": "--spectrum-body-cjk-strong-font-style", - "ref": "var(--spectrum-default-font-style)", - "value": "normal" + "body-cjk-size-s": { + "prop": "--spectrum-body-cjk-size-s", + "ref": "var(--spectrum-font-size-75)", + "desktop": { + "value": "12px" + }, + "mobile": { + "value": "15px" + } }, - "body-cjk-strong-font-weight": { - "prop": "--spectrum-body-cjk-strong-font-weight", - "ref": "var(--spectrum-black-font-weight)", - "value": "900" + "body-cjk-size-xl": { + "prop": "--spectrum-body-cjk-size-xl", + "ref": "var(--spectrum-font-size-300)", + "desktop": { + "value": "18px" + }, + "mobile": { + "value": "22px" + } }, - "body-color": { - "prop": "--spectrum-body-color", - "ref": "var(--spectrum-gray-800)", - "light": { - "value": "rgb(41, 41, 41)" + "body-cjk-size-xs": { + "prop": "--spectrum-body-cjk-size-xs", + "ref": "var(--spectrum-font-size-50)", + "desktop": { + "value": "11px" }, - "dark": { - "value": "rgb(219, 219, 219)" + "mobile": { + "value": "13px" + } + }, + "body-cjk-size-xxl": { + "prop": "--spectrum-body-cjk-size-xxl", + "ref": "var(--spectrum-font-size-400)", + "desktop": { + "value": "20px" + }, + "mobile": { + "value": "24px" + } + }, + "body-cjk-size-xxs": { + "prop": "--spectrum-body-cjk-size-xxs", + "ref": "var(--spectrum-font-size-25)", + "desktop": { + "value": "10px" + }, + "mobile": { + "value": "12px" + } + }, + "body-cjk-size-xxxl": { + "prop": "--spectrum-body-cjk-size-xxxl", + "ref": "var(--spectrum-font-size-500)", + "desktop": { + "value": "22px" + }, + "mobile": { + "value": "27px" + } + }, + "body-cjk-strong-emphasized-font-style": { + "prop": "--spectrum-body-cjk-strong-emphasized-font-style", + "ref": "var(--spectrum-default-font-style)", + "value": "normal" + }, + "body-cjk-strong-emphasized-font-weight": { + "prop": "--spectrum-body-cjk-strong-emphasized-font-weight", + "ref": "var(--spectrum-extra-bold-font-weight)", + "value": "800" + }, + "body-cjk-strong-font-style": { + "prop": "--spectrum-body-cjk-strong-font-style", + "ref": "var(--spectrum-default-font-style)", + "value": "normal" + }, + "body-cjk-strong-font-weight": { + "prop": "--spectrum-body-cjk-strong-font-weight", + "ref": "var(--spectrum-extra-bold-font-weight)", + "value": "800" + }, + "body-color": { + "prop": "--spectrum-body-color", + "ref": "var(--spectrum-gray-800)", + "light": { + "value": "rgb(41, 41, 41)" + }, + "dark": { + "value": "rgb(219, 219, 219)" } }, "body-line-height": { "prop": "--spectrum-body-line-height", "ref": "var(--spectrum-line-height-200)", - "value": "1.5" + "value": 1.5 }, "body-margin-multiplier": { "prop": "--spectrum-body-margin-multiplier", - "value": "0.75" + "value": 0.75 }, "body-sans-serif-emphasized-font-style": { "prop": "--spectrum-body-sans-serif-emphasized-font-style", @@ -1334,6 +1821,16 @@ "value": "27px" } }, + "body-size-xxs": { + "prop": "--spectrum-body-size-xxs", + "ref": "var(--spectrum-font-size-50)", + "desktop": { + "value": "11px" + }, + "mobile": { + "value": "13px" + } + }, "body-size-xxxl": { "prop": "--spectrum-body-size-xxxl", "ref": "var(--spectrum-font-size-600)", @@ -1362,20 +1859,22 @@ }, "breadcrumbs-bottom-to-text": { "prop": "--spectrum-breadcrumbs-bottom-to-text", + "ref": "var(--spectrum-component-bottom-to-text-200)", "desktop": { - "value": "15px" + "value": "11px" }, "mobile": { - "value": "19px" + "value": "14px" } }, "breadcrumbs-bottom-to-text-compact": { "prop": "--spectrum-breadcrumbs-bottom-to-text-compact", + "ref": "var(--spectrum-component-bottom-to-text-100)", "desktop": { - "value": "12px" + "value": "9px" }, "mobile": { - "value": "19px" + "value": "11px" } }, "breadcrumbs-bottom-to-text-multiline": { @@ -1384,7 +1883,7 @@ "value": "9px" }, "mobile": { - "value": "10px" + "value": "11px" } }, "breadcrumbs-end-edge-to-text": { @@ -1393,22 +1892,22 @@ }, "breadcrumbs-height": { "prop": "--spectrum-breadcrumbs-height", - "ref": "var(--spectrum-component-height-300)", + "ref": "var(--spectrum-component-height-200)", "desktop": { - "value": "48px" + "value": "40px" }, "mobile": { - "value": "60px" + "value": "50px" } }, "breadcrumbs-height-compact": { "prop": "--spectrum-breadcrumbs-height-compact", - "ref": "var(--spectrum-component-height-200)", + "ref": "var(--spectrum-component-height-100)", "desktop": { - "value": "40px" + "value": "32px" }, "mobile": { - "value": "50px" + "value": "40px" } }, "breadcrumbs-height-multiline": { @@ -1417,11 +1916,21 @@ "value": "72px" }, "mobile": { - "value": "84px" + "value": "90px" } }, "breadcrumbs-separator-icon-to-bottom-text-multiline": { "prop": "--spectrum-breadcrumbs-separator-icon-to-bottom-text-multiline", + "ref": "var(--spectrum-breadcrumbs-separator-to-bottom-text-multiline)", + "desktop": { + "value": "11px" + }, + "mobile": { + "value": "15px" + } + }, + "breadcrumbs-separator-to-bottom-text-multiline": { + "prop": "--spectrum-breadcrumbs-separator-to-bottom-text-multiline", "desktop": { "value": "11px" }, @@ -1431,17 +1940,72 @@ }, "breadcrumbs-start-edge-to-text": { "prop": "--spectrum-breadcrumbs-start-edge-to-text", + "ref": "var(--spectrum-breadcrumbs-start-edge-to-text-large)", "desktop": { - "value": "8px" + "value": "9px" }, "mobile": { + "value": "11px" + } + }, + "breadcrumbs-start-edge-to-text-large": { + "prop": "--spectrum-breadcrumbs-start-edge-to-text-large", + "desktop": { "value": "9px" + }, + "mobile": { + "value": "11px" + } + }, + "breadcrumbs-start-edge-to-text-medium": { + "prop": "--spectrum-breadcrumbs-start-edge-to-text-medium", + "desktop": { + "value": "6px" + }, + "mobile": { + "value": "8px" + } + }, + "breadcrumbs-start-edge-to-text-multiline": { + "prop": "--spectrum-breadcrumbs-start-edge-to-text-multiline", + "desktop": { + "value": "4px" + }, + "mobile": { + "value": "5px" } }, "breadcrumbs-start-edge-to-truncated-menu": { "prop": "--spectrum-breadcrumbs-start-edge-to-truncated-menu", "value": "0px" }, + "breadcrumbs-text-to-separator-large": { + "prop": "--spectrum-breadcrumbs-text-to-separator-large", + "desktop": { + "value": "9px" + }, + "mobile": { + "value": "11px" + } + }, + "breadcrumbs-text-to-separator-medium": { + "prop": "--spectrum-breadcrumbs-text-to-separator-medium", + "desktop": { + "value": "6px" + }, + "mobile": { + "value": "8px" + } + }, + "breadcrumbs-text-to-separator-multiline": { + "prop": "--spectrum-breadcrumbs-text-to-separator-multiline", + "desktop": { + "value": "4px" + }, + "mobile": { + "value": "5px" + } + }, "breadcrumbs-top-text-to-bottom-text": { "prop": "--spectrum-breadcrumbs-top-text-to-bottom-text", "desktop": { @@ -1453,24 +2017,36 @@ }, "breadcrumbs-top-to-separator-icon": { "prop": "--spectrum-breadcrumbs-top-to-separator-icon", + "ref": "var(--spectrum-breadcrumbs-top-to-separator-large)", "desktop": { - "value": "19px" + "value": "15px" }, "mobile": { - "value": "25px" + "value": "20px" } }, "breadcrumbs-top-to-separator-icon-compact": { "prop": "--spectrum-breadcrumbs-top-to-separator-icon-compact", + "ref": "var(--spectrum-breadcrumbs-top-to-separator-medium)", "desktop": { - "value": "15px" + "value": "11px" }, "mobile": { - "value": "23px" + "value": "15px" } }, "breadcrumbs-top-to-separator-icon-multiline": { "prop": "--spectrum-breadcrumbs-top-to-separator-icon-multiline", + "ref": "var(--spectrum-breadcrumbs-separator-icon-to-bottom-text-multiline)", + "desktop": { + "value": "7px" + }, + "mobile": { + "value": "15px" + } + }, + "breadcrumbs-top-to-separator-large": { + "prop": "--spectrum-breadcrumbs-top-to-separator-large", "desktop": { "value": "15px" }, @@ -1478,44 +2054,64 @@ "value": "20px" } }, + "breadcrumbs-top-to-separator-medium": { + "prop": "--spectrum-breadcrumbs-top-to-separator-medium", + "desktop": { + "value": "11px" + }, + "mobile": { + "value": "15px" + } + }, + "breadcrumbs-top-to-separator-multiline": { + "prop": "--spectrum-breadcrumbs-top-to-separator-multiline", + "desktop": { + "value": "7px" + }, + "mobile": { + "value": "10px" + } + }, "breadcrumbs-top-to-text": { "prop": "--spectrum-breadcrumbs-top-to-text", + "ref": "var(--spectrum-component-top-to-text-200)", "desktop": { - "value": "13px" + "value": "9px" }, "mobile": { - "value": "17px" + "value": "12px" } }, "breadcrumbs-top-to-text-compact": { "prop": "--spectrum-breadcrumbs-top-to-text-compact", + "ref": "var(--spectrum-component-top-to-text-100)", "desktop": { - "value": "11px" + "value": "6px" }, "mobile": { - "value": "16px" + "value": "8px" } }, "breadcrumbs-top-to-text-multiline": { "prop": "--spectrum-breadcrumbs-top-to-text-multiline", "desktop": { - "value": "12px" + "value": "4px" }, "mobile": { - "value": "15px" + "value": "5px" } }, "breadcrumbs-top-to-truncated-menu": { "prop": "--spectrum-breadcrumbs-top-to-truncated-menu", - "desktop": { - "value": "8px" - }, - "mobile": { - "value": "10px" - } + "value": "0px" }, "breadcrumbs-top-to-truncated-menu-compact": { "prop": "--spectrum-breadcrumbs-top-to-truncated-menu-compact", + "ref": "var(--spectrum-breadcrumbs-top-to-truncated-menu)", + "value": "0px" + }, + "breadcrumbs-truncated-menu-to-bottom-text": { + "prop": "--spectrum-breadcrumbs-truncated-menu-to-bottom-text", "desktop": { "value": "4px" }, @@ -1523,12 +2119,13 @@ "value": "5px" } }, - "breadcrumbs-truncated-menu-to-bottom-text": { - "prop": "--spectrum-breadcrumbs-truncated-menu-to-bottom-text", + "breadcrumbs-truncated-menu-to-separator": { + "prop": "--spectrum-breadcrumbs-truncated-menu-to-separator", "value": "0px" }, "breadcrumbs-truncated-menu-to-separator-icon": { "prop": "--spectrum-breadcrumbs-truncated-menu-to-separator-icon", + "ref": "var(--spectrum-breadcrumbs-truncated-menu-to-separator)", "value": "0px" }, "brown-100": { @@ -1707,7 +2304,7 @@ }, "button-minimum-width-multiplier": { "prop": "--spectrum-button-minimum-width-multiplier", - "value": "2.25" + "value": 2.25 }, "card-minimum-width": { "prop": "--spectrum-card-minimum-width", @@ -2122,73 +2719,73 @@ "checkbox-control-size-extra-large": { "prop": "--spectrum-checkbox-control-size-extra-large", "desktop": { - "value": "18px" + "value": "20px" }, "mobile": { - "value": "22px" + "value": "26px" } }, "checkbox-control-size-large": { "prop": "--spectrum-checkbox-control-size-large", "desktop": { - "value": "16px" + "value": "18px" }, "mobile": { - "value": "20px" + "value": "22px" } }, "checkbox-control-size-medium": { "prop": "--spectrum-checkbox-control-size-medium", "desktop": { - "value": "14px" + "value": "16px" }, "mobile": { - "value": "18px" + "value": "20px" } }, "checkbox-control-size-small": { "prop": "--spectrum-checkbox-control-size-small", "desktop": { - "value": "12px" + "value": "14px" }, "mobile": { - "value": "16px" + "value": "18px" } }, "checkbox-top-to-control-extra-large": { "prop": "--spectrum-checkbox-top-to-control-extra-large", "desktop": { - "value": "15px" + "value": "14px" }, "mobile": { - "value": "19px" + "value": "17px" } }, "checkbox-top-to-control-large": { "prop": "--spectrum-checkbox-top-to-control-large", "desktop": { - "value": "12px" + "value": "11px" }, "mobile": { - "value": "15px" + "value": "14px" } }, "checkbox-top-to-control-medium": { "prop": "--spectrum-checkbox-top-to-control-medium", "desktop": { - "value": "9px" + "value": "8px" }, "mobile": { - "value": "11px" + "value": "10px" } }, "checkbox-top-to-control-small": { "prop": "--spectrum-checkbox-top-to-control-small", "desktop": { - "value": "6px" + "value": "5px" }, "mobile": { - "value": "7px" + "value": "6px" } }, "checkmark-icon-size-100": { @@ -2515,24 +3112,73 @@ }, "cjk-letter-spacing": { "prop": "--spectrum-cjk-letter-spacing", - "value": "0.05em" + "ref": "var(--spectrum-letter-spacing)", + "value": "0em" }, "cjk-line-height-100": { "prop": "--spectrum-cjk-line-height-100", - "value": "1.5" + "value": 1.5 }, "cjk-line-height-200": { "prop": "--spectrum-cjk-line-height-200", - "value": "1.7" + "value": 1.7 + }, + "coach-indicator-collapsed-gap": { + "prop": "--spectrum-coach-indicator-collapsed-gap", + "value": "2px" + }, + "coach-indicator-collapsed-ring-rounding-increment": { + "prop": "--spectrum-coach-indicator-collapsed-ring-rounding-increment", + "value": "6px" + }, + "coach-indicator-collapsed-ring-thickness": { + "prop": "--spectrum-coach-indicator-collapsed-ring-thickness", + "value": "4px" + }, + "coach-indicator-color": { + "prop": "--spectrum-coach-indicator-color", + "ref": "var(--spectrum-blue-800)", + "light": { + "value": "rgb(75, 117, 255)" + }, + "dark": { + "value": "rgb(64, 105, 253)" + } + }, + "coach-indicator-expanded-gap": { + "prop": "--spectrum-coach-indicator-expanded-gap", + "value": "6px" + }, + "coach-indicator-expanded-ring-rounding-increment": { + "prop": "--spectrum-coach-indicator-expanded-ring-rounding-increment", + "value": "14px" + }, + "coach-indicator-expanded-ring-thickness": { + "prop": "--spectrum-coach-indicator-expanded-ring-thickness", + "value": "8px" + }, + "coach-indicator-opacity": { + "prop": "--spectrum-coach-indicator-opacity", + "value": "0.2" + }, + "coach-mark-body-font-size": { + "prop": "--spectrum-coach-mark-body-font-size", + "ref": "var(--spectrum-body-size-s)", + "desktop": { + "value": "16px" + }, + "mobile": { + "value": "17px" + } }, "coach-mark-body-size": { "prop": "--spectrum-coach-mark-body-size", - "ref": "var(--spectrum-body-size-xs)", + "ref": "var(--spectrum-body-size-s)", "desktop": { - "value": "14px" + "value": "16px" }, "mobile": { - "value": "15px" + "value": "17px" } }, "coach-mark-edge-to-content": { @@ -2582,6 +3228,16 @@ "value": "216px" } }, + "coach-mark-pagination-body-font-size": { + "prop": "--spectrum-coach-mark-pagination-body-font-size", + "ref": "var(--spectrum-body-size-xs)", + "desktop": { + "value": "14px" + }, + "mobile": { + "value": "15px" + } + }, "coach-mark-pagination-body-size": { "prop": "--spectrum-coach-mark-pagination-body-size", "ref": "var(--spectrum-body-size-xs)", @@ -2611,9 +3267,19 @@ "value": "22px" } }, + "coach-mark-title-font-size": { + "prop": "--spectrum-coach-mark-title-font-size", + "ref": "var(--spectrum-title-size-s)", + "desktop": { + "value": "16px" + }, + "mobile": { + "value": "17px" + } + }, "coach-mark-title-size": { "prop": "--spectrum-coach-mark-title-size", - "ref": "var(--spectrum-heading-size-xxs)", + "ref": "var(--spectrum-title-size-s)", "desktop": { "value": "16px" }, @@ -2658,7 +3324,57 @@ "code-cjk-line-height": { "prop": "--spectrum-code-cjk-line-height", "ref": "var(--spectrum-cjk-line-height-200)", - "value": "1.7" + "value": 1.7 + }, + "code-cjk-size-l": { + "prop": "--spectrum-code-cjk-size-l", + "ref": "var(--spectrum-code-size-l)", + "desktop": { + "value": "18px" + }, + "mobile": { + "value": "22px" + } + }, + "code-cjk-size-m": { + "prop": "--spectrum-code-cjk-size-m", + "ref": "var(--spectrum-code-size-m)", + "desktop": { + "value": "16px" + }, + "mobile": { + "value": "19px" + } + }, + "code-cjk-size-s": { + "prop": "--spectrum-code-cjk-size-s", + "ref": "var(--spectrum-code-size-s)", + "desktop": { + "value": "14px" + }, + "mobile": { + "value": "17px" + } + }, + "code-cjk-size-xl": { + "prop": "--spectrum-code-cjk-size-xl", + "ref": "var(--spectrum-code-size-xl)", + "desktop": { + "value": "20px" + }, + "mobile": { + "value": "24px" + } + }, + "code-cjk-size-xs": { + "prop": "--spectrum-code-cjk-size-xs", + "ref": "var(--spectrum-code-size-xs)", + "desktop": { + "value": "12px" + }, + "mobile": { + "value": "15px" + } }, "code-cjk-strong-emphasized-font-style": { "prop": "--spectrum-code-cjk-strong-emphasized-font-style", @@ -2667,8 +3383,8 @@ }, "code-cjk-strong-emphasized-font-weight": { "prop": "--spectrum-code-cjk-strong-emphasized-font-weight", - "ref": "var(--spectrum-black-font-weight)", - "value": "900" + "ref": "var(--spectrum-bold-font-weight)", + "value": "700" }, "code-cjk-strong-font-style": { "prop": "--spectrum-code-cjk-strong-font-style", @@ -2677,8 +3393,8 @@ }, "code-cjk-strong-font-weight": { "prop": "--spectrum-code-cjk-strong-font-weight", - "ref": "var(--spectrum-black-font-weight)", - "value": "900" + "ref": "var(--spectrum-bold-font-weight)", + "value": "700" }, "code-color": { "prop": "--spectrum-code-color", @@ -2717,7 +3433,7 @@ "code-line-height": { "prop": "--spectrum-code-line-height", "ref": "var(--spectrum-line-height-200)", - "value": "1.5" + "value": 1.5 }, "code-size-l": { "prop": "--spectrum-code-size-l", @@ -2791,12 +3507,12 @@ }, "color-area-border-color": { "prop": "--spectrum-color-area-border-color", - "ref": "var(--spectrum-gray-900)", - "light": { - "value": "rgb(19, 19, 19)" - }, + "ref": "var(--spectrum-gray-1000)", "dark": { - "value": "rgb(242, 242, 242)" + "value": "rgb(255, 255, 255)" + }, + "light": { + "value": "rgb(0, 0, 0)" } }, "color-area-border-opacity": { @@ -2936,20 +3652,22 @@ }, "color-loupe-drop-shadow-blur": { "prop": "--spectrum-color-loupe-drop-shadow-blur", + "ref": "var(--spectrum-drop-shadow-elevated-blur)", "value": "8px" }, "color-loupe-drop-shadow-color": { "prop": "--spectrum-color-loupe-drop-shadow-color", - "ref": "var(--spectrum-transparent-black-300)", + "ref": "var(--spectrum-drop-shadow-elevated-color)", "light": { - "value": "rgba(0, 0, 0, 0.15)" + "value": "rgba(0, 0, 0, 0.16)" }, "dark": { - "value": "rgba(0, 0, 0, 0.15)" + "value": "rgba(0, 0, 0, 0.48)" } }, "color-loupe-drop-shadow-y": { "prop": "--spectrum-color-loupe-drop-shadow-y", + "ref": "var(--spectrum-drop-shadow-elevated-y)", "value": "2px" }, "color-loupe-height": { @@ -2959,12 +3677,7 @@ "color-loupe-inner-border": { "prop": "--spectrum-color-loupe-inner-border", "ref": "var(--spectrum-transparent-black-200)", - "light": { - "value": "rgba(0, 0, 0, 0.12)" - }, - "dark": { - "value": "rgba(0, 0, 0, 0.12)" - } + "value": "rgba(0, 0, 0, 0.12)" }, "color-loupe-inner-border-width": { "prop": "--spectrum-color-loupe-inner-border-width", @@ -2973,12 +3686,7 @@ "color-loupe-outer-border": { "prop": "--spectrum-color-loupe-outer-border", "ref": "var(--spectrum-white)", - "light": { - "value": "rgb(255, 255, 255)" - }, - "dark": { - "value": "rgb(255, 255, 255)" - } + "value": "rgb(255, 255, 255)" }, "color-loupe-outer-border-width": { "prop": "--spectrum-color-loupe-outer-border-width", @@ -2991,12 +3699,12 @@ }, "color-slider-border-color": { "prop": "--spectrum-color-slider-border-color", - "ref": "var(--spectrum-gray-900)", - "light": { - "value": "rgb(19, 19, 19)" - }, + "ref": "var(--spectrum-gray-1000)", "dark": { - "value": "rgb(242, 242, 242)" + "value": "rgb(255, 255, 255)" + }, + "light": { + "value": "rgb(0, 0, 0)" } }, "color-slider-border-opacity": { @@ -3030,6 +3738,20 @@ "value": "100px" } }, + "color-wheel-border-color": { + "prop": "--spectrum-color-wheel-border-color", + "ref": "var(--spectrum-gray-1000)", + "dark": { + "value": "rgb(255, 255, 255)" + }, + "light": { + "value": "rgb(0, 0, 0)" + } + }, + "color-wheel-border-opacity": { + "prop": "--spectrum-color-wheel-border-opacity", + "value": "0.1" + }, "color-wheel-color-area-margin": { "prop": "--spectrum-color-wheel-color-area-margin", "value": "12px" @@ -3054,51 +3776,40 @@ }, "combo-box-minimum-width-multiplier": { "prop": "--spectrum-combo-box-minimum-width-multiplier", - "value": "2.5" + "value": 2.5 }, "combo-box-quiet-minimum-width-multiplier": { "prop": "--spectrum-combo-box-quiet-minimum-width-multiplier", - "value": "2" + "value": 2 + }, + "combo-box-visual-to-field-button": { + "prop": "--spectrum-combo-box-visual-to-field-button", + "value": "0px" }, "combo-box-visual-to-field-button-extra-large": { "prop": "--spectrum-combo-box-visual-to-field-button-extra-large", - "desktop": { - "value": "10px" - }, - "mobile": { - "value": "13px" - } + "ref": "var(--spectrum-combo-box-visual-to-field-button)", + "value": "0px" }, "combo-box-visual-to-field-button-large": { "prop": "--spectrum-combo-box-visual-to-field-button-large", - "desktop": { - "value": "9px" - }, - "mobile": { - "value": "11px" - } + "ref": "var(--spectrum-combo-box-visual-to-field-button)", + "value": "0px" }, "combo-box-visual-to-field-button-medium": { "prop": "--spectrum-combo-box-visual-to-field-button-medium", - "desktop": { - "value": "8px" - }, - "mobile": { - "value": "10px" - } + "ref": "var(--spectrum-combo-box-visual-to-field-button)", + "value": "0px" }, "combo-box-visual-to-field-button-quiet": { "prop": "--spectrum-combo-box-visual-to-field-button-quiet", + "ref": "var(--spectrum-combo-box-visual-to-field-button)", "value": "0px" }, "combo-box-visual-to-field-button-small": { "prop": "--spectrum-combo-box-visual-to-field-button-small", - "desktop": { - "value": "7px" - }, - "mobile": { - "value": "9px" - } + "ref": "var(--spectrum-combo-box-visual-to-field-button)", + "value": "0px" }, "component-bottom-to-text-100": { "prop": "--spectrum-component-bottom-to-text-100", @@ -3160,13 +3871,13 @@ "value": "15px" }, "mobile": { - "value": "18px" + "value": "19px" } }, "component-edge-to-text-300": { "prop": "--spectrum-component-edge-to-text-300", "desktop": { - "value": "17px" + "value": "18px" }, "mobile": { "value": "22px" @@ -3178,16 +3889,16 @@ "value": "8px" }, "mobile": { - "value": "11px" + "value": "10px" } }, "component-edge-to-text-75": { "prop": "--spectrum-component-edge-to-text-75", "desktop": { - "value": "10px" + "value": "9px" }, "mobile": { - "value": "13px" + "value": "11px" } }, "component-edge-to-visual-100": { @@ -3205,34 +3916,34 @@ "value": "13px" }, "mobile": { - "value": "15px" + "value": "16px" } }, "component-edge-to-visual-300": { "prop": "--spectrum-component-edge-to-visual-300", "desktop": { - "value": "14px" + "value": "15px" }, "mobile": { - "value": "20px" + "value": "19px" } }, "component-edge-to-visual-50": { "prop": "--spectrum-component-edge-to-visual-50", "desktop": { - "value": "7px" + "value": "6px" }, "mobile": { - "value": "9px" + "value": "7px" } }, "component-edge-to-visual-75": { "prop": "--spectrum-component-edge-to-visual-75", "desktop": { - "value": "8px" + "value": "7px" }, "mobile": { - "value": "11px" + "value": "9px" } }, "component-edge-to-visual-only-100": { @@ -3358,13 +4069,13 @@ "value": "20px" }, "mobile": { - "value": "24px" + "value": "25px" } }, "component-pill-edge-to-text-300": { "prop": "--spectrum-component-pill-edge-to-text-300", "desktop": { - "value": "23px" + "value": "24px" }, "mobile": { "value": "30px" @@ -3373,10 +4084,10 @@ "component-pill-edge-to-text-75": { "prop": "--spectrum-component-pill-edge-to-text-75", "desktop": { - "value": "13px" + "value": "12px" }, "mobile": { - "value": "17px" + "value": "15px" } }, "component-pill-edge-to-visual-100": { @@ -3394,25 +4105,25 @@ "value": "18px" }, "mobile": { - "value": "21px" + "value": "22px" } }, "component-pill-edge-to-visual-300": { "prop": "--spectrum-component-pill-edge-to-visual-300", "desktop": { - "value": "20px" + "value": "21px" }, "mobile": { - "value": "28px" + "value": "27px" } }, "component-pill-edge-to-visual-75": { "prop": "--spectrum-component-pill-edge-to-visual-75", "desktop": { - "value": "11px" + "value": "10px" }, "mobile": { - "value": "15px" + "value": "13px" } }, "component-pill-edge-to-visual-only-100": { @@ -3451,6 +4162,22 @@ "value": "6px" } }, + "component-size-difference-down": { + "prop": "--spectrum-component-size-difference-down", + "value": "-2px" + }, + "component-size-maximum-perspective-down": { + "prop": "--spectrum-component-size-maximum-perspective-down", + "value": "96px" + }, + "component-size-minimum-perspective-down": { + "prop": "--spectrum-component-size-minimum-perspective-down", + "value": "24px" + }, + "component-size-width-ratio-down": { + "prop": "--spectrum-component-size-width-ratio-down", + "value": 0.3333 + }, "component-to-menu-extra-large": { "prop": "--spectrum-component-to-menu-extra-large", "desktop": { @@ -3577,6 +4304,16 @@ "value": "6px" } }, + "contextual-help-body-font-size": { + "prop": "--spectrum-contextual-help-body-font-size", + "ref": "var(--spectrum-body-size-xs)", + "desktop": { + "value": "14px" + }, + "mobile": { + "value": "15px" + } + }, "contextual-help-body-size": { "prop": "--spectrum-contextual-help-body-size", "ref": "var(--spectrum-body-size-xs)", @@ -3591,9 +4328,19 @@ "prop": "--spectrum-contextual-help-minimum-width", "value": "268px" }, + "contextual-help-title-font-size": { + "prop": "--spectrum-contextual-help-title-font-size", + "ref": "var(--spectrum-title-size-s)", + "desktop": { + "value": "16px" + }, + "mobile": { + "value": "17px" + } + }, "contextual-help-title-size": { "prop": "--spectrum-contextual-help-title-size", - "ref": "var(--spectrum-heading-size-xxs)", + "ref": "var(--spectrum-title-size-s)", "desktop": { "value": "16px" }, @@ -3607,15 +4354,15 @@ }, "corner-radius-100": { "prop": "--spectrum-corner-radius-100", - "value": "8px" + "value": "4px" }, "corner-radius-1000": { "prop": "--spectrum-corner-radius-1000", - "value": "0.5" + "value": 0.5 }, "corner-radius-200": { "prop": "--spectrum-corner-radius-200", - "value": "10px" + "value": "5px" }, "corner-radius-300": { "prop": "--spectrum-corner-radius-300", @@ -3639,7 +4386,7 @@ }, "corner-radius-75": { "prop": "--spectrum-corner-radius-75", - "value": "4px" + "value": "3px" }, "corner-radius-800": { "prop": "--spectrum-corner-radius-800", @@ -3653,7 +4400,7 @@ "corner-radius-full": { "prop": "--spectrum-corner-radius-full", "ref": "var(--spectrum-corner-radius-1000)", - "value": "0.5" + "value": 0.5 }, "corner-radius-large-default": { "prop": "--spectrum-corner-radius-large-default", @@ -3698,7 +4445,7 @@ "corner-radius-small-default": { "prop": "--spectrum-corner-radius-small-default", "ref": "var(--spectrum-corner-radius-100)", - "value": "8px" + "value": "4px" }, "corner-radius-small-size-extra-large": { "prop": "--spectrum-corner-radius-small-size-extra-large", @@ -3708,17 +4455,17 @@ "corner-radius-small-size-large": { "prop": "--spectrum-corner-radius-small-size-large", "ref": "var(--spectrum-corner-radius-200)", - "value": "10px" + "value": "5px" }, "corner-radius-small-size-medium": { "prop": "--spectrum-corner-radius-small-size-medium", "ref": "var(--spectrum-corner-radius-100)", - "value": "8px" + "value": "4px" }, "corner-radius-small-size-small": { "prop": "--spectrum-corner-radius-small-size-small", "ref": "var(--spectrum-corner-radius-75)", - "value": "4px" + "value": "3px" }, "corner-triangle-icon-size-100": { "prop": "--spectrum-corner-triangle-icon-size-100", @@ -4081,8 +4828,8 @@ }, "detail-cjk-emphasized-font-weight": { "prop": "--spectrum-detail-cjk-emphasized-font-weight", - "ref": "var(--spectrum-black-font-weight)", - "value": "900" + "ref": "var(--spectrum-extra-bold-font-weight)", + "value": "800" }, "detail-cjk-font-family": { "prop": "--spectrum-detail-cjk-font-family", @@ -4096,8 +4843,8 @@ }, "detail-cjk-font-weight": { "prop": "--spectrum-detail-cjk-font-weight", - "ref": "var(--spectrum-extra-bold-font-weight)", - "value": "800" + "ref": "var(--spectrum-bold-font-weight)", + "value": "700" }, "detail-cjk-light-emphasized-font-style": { "prop": "--spectrum-detail-cjk-light-emphasized-font-style", @@ -4142,7 +4889,57 @@ "detail-cjk-line-height": { "prop": "--spectrum-detail-cjk-line-height", "ref": "var(--spectrum-cjk-line-height-100)", - "value": "1.5" + "value": 1.5 + }, + "detail-cjk-size-l": { + "prop": "--spectrum-detail-cjk-size-l", + "ref": "var(--spectrum-font-size-100)", + "desktop": { + "value": "14px" + }, + "mobile": { + "value": "17px" + } + }, + "detail-cjk-size-m": { + "prop": "--spectrum-detail-cjk-size-m", + "ref": "var(--spectrum-font-size-75)", + "desktop": { + "value": "12px" + }, + "mobile": { + "value": "15px" + } + }, + "detail-cjk-size-s": { + "prop": "--spectrum-detail-cjk-size-s", + "ref": "var(--spectrum-font-size-50)", + "desktop": { + "value": "11px" + }, + "mobile": { + "value": "13px" + } + }, + "detail-cjk-size-xl": { + "prop": "--spectrum-detail-cjk-size-xl", + "ref": "var(--spectrum-font-size-200)", + "desktop": { + "value": "16px" + }, + "mobile": { + "value": "19px" + } + }, + "detail-cjk-size-xs": { + "prop": "--spectrum-detail-cjk-size-xs", + "ref": "var(--spectrum-font-size-25)", + "desktop": { + "value": "10px" + }, + "mobile": { + "value": "12px" + } }, "detail-cjk-strong-emphasized-font-style": { "prop": "--spectrum-detail-cjk-strong-emphasized-font-style", @@ -4151,8 +4948,8 @@ }, "detail-cjk-strong-emphasized-font-weight": { "prop": "--spectrum-detail-cjk-strong-emphasized-font-weight", - "ref": "var(--spectrum-black-font-weight)", - "value": "900" + "ref": "var(--spectrum-extra-bold-font-weight)", + "value": "800" }, "detail-cjk-strong-font-style": { "prop": "--spectrum-detail-cjk-strong-font-style", @@ -4161,17 +4958,17 @@ }, "detail-cjk-strong-font-weight": { "prop": "--spectrum-detail-cjk-strong-font-weight", - "ref": "var(--spectrum-black-font-weight)", - "value": "900" + "ref": "var(--spectrum-extra-bold-font-weight)", + "value": "800" }, "detail-color": { "prop": "--spectrum-detail-color", - "ref": "var(--spectrum-gray-900)", + "ref": "var(--spectrum-gray-600)", "light": { - "value": "rgb(19, 19, 19)" + "value": "rgb(113, 113, 113)" }, "dark": { - "value": "rgb(242, 242, 242)" + "value": "rgb(138, 138, 138)" } }, "detail-letter-spacing": { @@ -4181,15 +4978,15 @@ "detail-line-height": { "prop": "--spectrum-detail-line-height", "ref": "var(--spectrum-line-height-100)", - "value": "1.3" + "value": 1.3 }, "detail-margin-bottom-multiplier": { "prop": "--spectrum-detail-margin-bottom-multiplier", - "value": "0.25" + "value": 0.25 }, "detail-margin-top-multiplier": { "prop": "--spectrum-detail-margin-top-multiplier", - "value": "0.88888889" + "value": 0.88888889 }, "detail-sans-serif-emphasized-font-style": { "prop": "--spectrum-detail-sans-serif-emphasized-font-style", @@ -4198,8 +4995,8 @@ }, "detail-sans-serif-emphasized-font-weight": { "prop": "--spectrum-detail-sans-serif-emphasized-font-weight", - "ref": "var(--spectrum-bold-font-weight)", - "value": "700" + "ref": "var(--spectrum-regular-font-weight)", + "value": "400" }, "detail-sans-serif-font-family": { "prop": "--spectrum-detail-sans-serif-font-family", @@ -4213,8 +5010,8 @@ }, "detail-sans-serif-font-weight": { "prop": "--spectrum-detail-sans-serif-font-weight", - "ref": "var(--spectrum-bold-font-weight)", - "value": "700" + "ref": "var(--spectrum-medium-font-weight)", + "value": "500" }, "detail-sans-serif-light-emphasized-font-style": { "prop": "--spectrum-detail-sans-serif-light-emphasized-font-style", @@ -4287,8 +5084,8 @@ }, "detail-serif-emphasized-font-weight": { "prop": "--spectrum-detail-serif-emphasized-font-weight", - "ref": "var(--spectrum-bold-font-weight)", - "value": "700" + "ref": "var(--spectrum-medium-font-weight)", + "value": "500" }, "detail-serif-font-family": { "prop": "--spectrum-detail-serif-font-family", @@ -4302,8 +5099,8 @@ }, "detail-serif-font-weight": { "prop": "--spectrum-detail-serif-font-weight", - "ref": "var(--spectrum-bold-font-weight)", - "value": "700" + "ref": "var(--spectrum-medium-font-weight)", + "value": "500" }, "detail-serif-light-emphasized-font-style": { "prop": "--spectrum-detail-serif-light-emphasized-font-style", @@ -4371,42 +5168,52 @@ }, "detail-size-l": { "prop": "--spectrum-detail-size-l", - "ref": "var(--spectrum-font-size-100)", + "ref": "var(--spectrum-font-size-200)", "desktop": { - "value": "14px" + "value": "16px" }, "mobile": { - "value": "17px" + "value": "19px" } }, "detail-size-m": { "prop": "--spectrum-detail-size-m", - "ref": "var(--spectrum-font-size-75)", + "ref": "var(--spectrum-font-size-100)", "desktop": { - "value": "12px" + "value": "14px" }, "mobile": { - "value": "15px" + "value": "17px" } }, "detail-size-s": { "prop": "--spectrum-detail-size-s", - "ref": "var(--spectrum-font-size-50)", + "ref": "var(--spectrum-font-size-75)", "desktop": { - "value": "11px" + "value": "12px" }, "mobile": { - "value": "13px" + "value": "15px" } }, "detail-size-xl": { "prop": "--spectrum-detail-size-xl", - "ref": "var(--spectrum-font-size-200)", + "ref": "var(--spectrum-font-size-300)", "desktop": { - "value": "16px" + "value": "18px" }, "mobile": { - "value": "19px" + "value": "22px" + } + }, + "detail-size-xs": { + "prop": "--spectrum-detail-size-xs", + "ref": "var(--spectrum-font-size-50)", + "desktop": { + "value": "11px" + }, + "mobile": { + "value": "13px" } }, "disabled-background-color": { @@ -4442,62 +5249,32 @@ "disabled-static-black-background-color": { "prop": "--spectrum-disabled-static-black-background-color", "ref": "var(--spectrum-transparent-black-100)", - "light": { - "value": "rgba(0, 0, 0, 0.09)" - }, - "dark": { - "value": "rgba(0, 0, 0, 0.09)" - } + "value": "rgba(0, 0, 0, 0.09)" }, "disabled-static-black-border-color": { "prop": "--spectrum-disabled-static-black-border-color", "ref": "var(--spectrum-transparent-black-300)", - "light": { - "value": "rgba(0, 0, 0, 0.15)" - }, - "dark": { - "value": "rgba(0, 0, 0, 0.15)" - } + "value": "rgba(0, 0, 0, 0.15)" }, "disabled-static-black-content-color": { "prop": "--spectrum-disabled-static-black-content-color", "ref": "var(--spectrum-transparent-black-400)", - "light": { - "value": "rgba(0, 0, 0, 0.22)" - }, - "dark": { - "value": "rgba(0, 0, 0, 0.22)" - } + "value": "rgba(0, 0, 0, 0.22)" }, "disabled-static-white-background-color": { "prop": "--spectrum-disabled-static-white-background-color", "ref": "var(--spectrum-transparent-white-100)", - "light": { - "value": "rgba(255, 255, 255, 0.11)" - }, - "dark": { - "value": "rgba(255, 255, 255, 0.11)" - } + "value": "rgba(255, 255, 255, 0.11)" }, "disabled-static-white-border-color": { "prop": "--spectrum-disabled-static-white-border-color", "ref": "var(--spectrum-transparent-white-300)", - "light": { - "value": "rgba(255, 255, 255, 0.17)" - }, - "dark": { - "value": "rgba(255, 255, 255, 0.17)" - } + "value": "rgba(255, 255, 255, 0.17)" }, "disabled-static-white-content-color": { "prop": "--spectrum-disabled-static-white-content-color", "ref": "var(--spectrum-transparent-white-400)", - "light": { - "value": "rgba(255, 255, 255, 0.21)" - }, - "dark": { - "value": "rgba(255, 255, 255, 0.21)" - } + "value": "rgba(255, 255, 255, 0.21)" }, "disclosure-indicator-top-to-disclosure-icon-extra-large": { "prop": "--spectrum-disclosure-indicator-top-to-disclosure-icon-extra-large", @@ -4535,6 +5312,10 @@ "value": "9px" } }, + "divider-horizontal-minimum-width": { + "prop": "--spectrum-divider-horizontal-minimum-width", + "value": "200px" + }, "divider-thickness-large": { "prop": "--spectrum-divider-thickness-large", "value": "4px" @@ -4547,14 +5328,26 @@ "prop": "--spectrum-divider-thickness-small", "value": "1px" }, + "divider-vertical-minimum-height": { + "prop": "--spectrum-divider-vertical-minimum-height", + "value": "200px" + }, "drop-shadow-blur": { "prop": "--spectrum-drop-shadow-blur", - "desktop": { - "value": "4px" - }, - "mobile": { - "value": "6px" - } + "ref": "var(--spectrum-drop-shadow-blur-100)", + "value": "6px" + }, + "drop-shadow-blur-100": { + "prop": "--spectrum-drop-shadow-blur-100", + "value": "6px" + }, + "drop-shadow-blur-200": { + "prop": "--spectrum-drop-shadow-blur-200", + "value": "8px" + }, + "drop-shadow-blur-300": { + "prop": "--spectrum-drop-shadow-blur-300", + "value": "16px" }, "drop-shadow-color": { "prop": "--spectrum-drop-shadow-color", @@ -4593,6 +5386,11 @@ "value": "rgba(0, 0, 0, 0.6)" } }, + "drop-shadow-dragged-blur": { + "prop": "--spectrum-drop-shadow-dragged-blur", + "ref": "var(--spectrum-drop-shadow-blur-300)", + "value": "16px" + }, "drop-shadow-dragged-color": { "prop": "--spectrum-drop-shadow-dragged-color", "ref": "var(--spectrum-drop-shadow-color-300)", @@ -4603,6 +5401,21 @@ "value": "rgba(0, 0, 0, 0.6)" } }, + "drop-shadow-dragged-x": { + "prop": "--spectrum-drop-shadow-dragged-x", + "ref": "var(--spectrum-drop-shadow-x-300)", + "value": "0px" + }, + "drop-shadow-dragged-y": { + "prop": "--spectrum-drop-shadow-dragged-y", + "ref": "var(--spectrum-drop-shadow-y-300)", + "value": "6px" + }, + "drop-shadow-elevated-blur": { + "prop": "--spectrum-drop-shadow-elevated-blur", + "ref": "var(--spectrum-drop-shadow-blur-200)", + "value": "8px" + }, "drop-shadow-elevated-color": { "prop": "--spectrum-drop-shadow-elevated-color", "ref": "var(--spectrum-drop-shadow-color-200)", @@ -4613,6 +5426,21 @@ "value": "rgba(0, 0, 0, 0.48)" } }, + "drop-shadow-elevated-x": { + "prop": "--spectrum-drop-shadow-elevated-x", + "ref": "var(--spectrum-drop-shadow-x-200)", + "value": "0px" + }, + "drop-shadow-elevated-y": { + "prop": "--spectrum-drop-shadow-elevated-y", + "ref": "var(--spectrum-drop-shadow-y-200)", + "value": "2px" + }, + "drop-shadow-emphasized-default-blur": { + "prop": "--spectrum-drop-shadow-emphasized-default-blur", + "ref": "var(--spectrum-drop-shadow-blur-100)", + "value": "6px" + }, "drop-shadow-emphasized-default-color": { "prop": "--spectrum-drop-shadow-emphasized-default-color", "ref": "var(--spectrum-drop-shadow-color-100)", @@ -4623,6 +5451,21 @@ "value": "rgba(0, 0, 0, 0.36)" } }, + "drop-shadow-emphasized-default-x": { + "prop": "--spectrum-drop-shadow-emphasized-default-x", + "ref": "var(--spectrum-drop-shadow-x-100)", + "value": "0px" + }, + "drop-shadow-emphasized-default-y": { + "prop": "--spectrum-drop-shadow-emphasized-default-y", + "ref": "var(--spectrum-drop-shadow-y-100)", + "value": "1px" + }, + "drop-shadow-emphasized-hover-blur": { + "prop": "--spectrum-drop-shadow-emphasized-hover-blur", + "ref": "var(--spectrum-drop-shadow-blur-200)", + "value": "8px" + }, "drop-shadow-emphasized-hover-color": { "prop": "--spectrum-drop-shadow-emphasized-hover-color", "ref": "var(--spectrum-drop-shadow-color-200)", @@ -4633,18 +5476,49 @@ "value": "rgba(0, 0, 0, 0.48)" } }, + "drop-shadow-emphasized-hover-x": { + "prop": "--spectrum-drop-shadow-emphasized-hover-x", + "ref": "var(--spectrum-drop-shadow-x-200)", + "value": "0px" + }, + "drop-shadow-emphasized-hover-y": { + "prop": "--spectrum-drop-shadow-emphasized-hover-y", + "ref": "var(--spectrum-drop-shadow-y-200)", + "value": "2px" + }, "drop-shadow-x": { "prop": "--spectrum-drop-shadow-x", + "ref": "var(--spectrum-drop-shadow-x-100)", + "value": "0px" + }, + "drop-shadow-x-100": { + "prop": "--spectrum-drop-shadow-x-100", + "value": "0px" + }, + "drop-shadow-x-200": { + "prop": "--spectrum-drop-shadow-x-200", + "value": "0px" + }, + "drop-shadow-x-300": { + "prop": "--spectrum-drop-shadow-x-300", "value": "0px" }, "drop-shadow-y": { "prop": "--spectrum-drop-shadow-y", - "desktop": { - "value": "1px" - }, - "mobile": { - "value": "2px" - } + "ref": "var(--spectrum-drop-shadow-y-100)", + "value": "1px" + }, + "drop-shadow-y-100": { + "prop": "--spectrum-drop-shadow-y-100", + "value": "1px" + }, + "drop-shadow-y-200": { + "prop": "--spectrum-drop-shadow-y-200", + "value": "2px" + }, + "drop-shadow-y-300": { + "prop": "--spectrum-drop-shadow-y-300", + "value": "6px" }, "drop-zone-background-color": { "prop": "--spectrum-drop-zone-background-color", @@ -4664,8 +5538,8 @@ "prop": "--spectrum-drop-zone-background-color-opacity-filled", "value": "0.3" }, - "drop-zone-body-size": { - "prop": "--spectrum-drop-zone-body-size", + "drop-zone-body-font-size": { + "prop": "--spectrum-drop-zone-body-font-size", "ref": "var(--spectrum-body-size-xs)", "desktop": { "value": "14px" @@ -4674,39 +5548,54 @@ "value": "15px" } }, + "drop-zone-body-size": { + "prop": "--spectrum-drop-zone-body-size", + "ref": "var(--spectrum-drop-zone-body-font-size)", + "value": "{drop-zone-body-font-size}" + }, "drop-zone-border-dash-gap": { "prop": "--spectrum-drop-zone-border-dash-gap", - "value": "4px" + "value": "6px" }, "drop-zone-border-dash-length": { "prop": "--spectrum-drop-zone-border-dash-length", "value": "8px" }, - "drop-zone-cjk-title-size": { - "prop": "--spectrum-drop-zone-cjk-title-size", - "ref": "var(--spectrum-heading-cjk-size-s)", + "drop-zone-cjk-title-font-size": { + "prop": "--spectrum-drop-zone-cjk-title-font-size", + "ref": "var(--spectrum-title-cjk-size-l)", "desktop": { - "value": "20px" + "value": "18px" }, "mobile": { - "value": "22px" + "value": "19px" } }, + "drop-zone-cjk-title-size": { + "prop": "--spectrum-drop-zone-cjk-title-size", + "ref": "var(--spectrum-drop-zone-cjk-title-font-size)", + "value": "{drop-zone-cjk-title-font-size}" + }, "drop-zone-content-maximum-width": { "prop": "--spectrum-drop-zone-content-maximum-width", "ref": "var(--spectrum-illustrated-message-maximum-width)", "value": "380px" }, - "drop-zone-title-size": { - "prop": "--spectrum-drop-zone-title-size", - "ref": "var(--spectrum-heading-size-s)", + "drop-zone-title-font-size": { + "prop": "--spectrum-drop-zone-title-font-size", + "ref": "var(--spectrum-title-size-l)", "desktop": { - "value": "22px" + "value": "20px" }, "mobile": { "value": "22px" } }, + "drop-zone-title-size": { + "prop": "--spectrum-drop-zone-title-size", + "ref": "var(--spectrum-drop-zone-title-font-size)", + "value": "{drop-zone-title-font-size}" + }, "drop-zone-width": { "prop": "--spectrum-drop-zone-width", "value": "428px" @@ -4715,6 +5604,42 @@ "prop": "--spectrum-extra-bold-font-weight", "value": "800" }, + "field-default-width-extra-large": { + "prop": "--spectrum-field-default-width-extra-large", + "desktop": { + "value": "240px" + }, + "mobile": { + "value": "288px" + } + }, + "field-default-width-large": { + "prop": "--spectrum-field-default-width-large", + "desktop": { + "value": "224px" + }, + "mobile": { + "value": "272px" + } + }, + "field-default-width-medium": { + "prop": "--spectrum-field-default-width-medium", + "desktop": { + "value": "208px" + }, + "mobile": { + "value": "256px" + } + }, + "field-default-width-small": { + "prop": "--spectrum-field-default-width-small", + "desktop": { + "value": "192px" + }, + "mobile": { + "value": "240px" + } + }, "field-edge-to-alert-icon-extra-large": { "prop": "--spectrum-field-edge-to-alert-icon-extra-large", "desktop": { @@ -4957,30 +5882,15 @@ }, "field-label-top-margin-extra-large": { "prop": "--spectrum-field-label-top-margin-extra-large", - "desktop": { - "value": "5px" - }, - "mobile": { - "value": "6px" - } + "value": "0px" }, "field-label-top-margin-large": { "prop": "--spectrum-field-label-top-margin-large", - "desktop": { - "value": "5px" - }, - "mobile": { - "value": "6px" - } + "value": "0px" }, "field-label-top-margin-medium": { "prop": "--spectrum-field-label-top-margin-medium", - "desktop": { - "value": "4px" - }, - "mobile": { - "value": "5px" - } + "value": "0px" }, "field-label-top-margin-small": { "prop": "--spectrum-field-label-top-margin-small", @@ -4989,7 +5899,7 @@ "field-label-top-to-asterisk-extra-large": { "prop": "--spectrum-field-label-top-to-asterisk-extra-large", "desktop": { - "value": "19px" + "value": "18px" }, "mobile": { "value": "24px" @@ -5169,28 +6079,28 @@ "field-top-to-progress-circle-extra-large": { "prop": "--spectrum-field-top-to-progress-circle-extra-large", "desktop": { - "value": "16px" + "value": "11px" }, "mobile": { - "value": "22px" + "value": "15px" } }, "field-top-to-progress-circle-large": { "prop": "--spectrum-field-top-to-progress-circle-large", "desktop": { - "value": "12px" + "value": "9px" }, "mobile": { - "value": "17px" + "value": "11px" } }, "field-top-to-progress-circle-medium": { "prop": "--spectrum-field-top-to-progress-circle-medium", "desktop": { - "value": "8px" + "value": "6px" }, "mobile": { - "value": "12px" + "value": "8px" } }, "field-top-to-progress-circle-small": { @@ -5199,7 +6109,7 @@ "value": "4px" }, "mobile": { - "value": "7px" + "value": "6px" } }, "field-top-to-validation-icon-extra-large": { @@ -5240,6 +6150,47 @@ }, "field-width": { "prop": "--spectrum-field-width", + "ref": "var(--spectrum-field-width-small)", + "desktop": { + "value": "192px" + }, + "mobile": { + "value": "240px" + } + }, + "field-width-extra-large": { + "prop": "--spectrum-field-width-extra-large", + "ref": "var(--spectrum-field-default-width-extra-large)", + "desktop": { + "value": "240px" + }, + "mobile": { + "value": "288px" + } + }, + "field-width-large": { + "prop": "--spectrum-field-width-large", + "ref": "var(--spectrum-field-default-width-large)", + "desktop": { + "value": "224px" + }, + "mobile": { + "value": "272px" + } + }, + "field-width-medium": { + "prop": "--spectrum-field-width-medium", + "ref": "var(--spectrum-field-default-width-medium)", + "desktop": { + "value": "208px" + }, + "mobile": { + "value": "256px" + } + }, + "field-width-small": { + "prop": "--spectrum-field-width-small", + "ref": "var(--spectrum-field-default-width-small)", "desktop": { "value": "192px" }, @@ -5254,12 +6205,7 @@ "floating-action-button-drop-shadow-color": { "prop": "--spectrum-floating-action-button-drop-shadow-color", "ref": "var(--spectrum-transparent-black-300)", - "light": { - "value": "rgba(0, 0, 0, 0.15)" - }, - "dark": { - "value": "rgba(0, 0, 0, 0.15)" - } + "value": "rgba(0, 0, 0, 0.15)" }, "floating-action-button-drop-shadow-y": { "prop": "--spectrum-floating-action-button-drop-shadow-y", @@ -5268,12 +6214,7 @@ "floating-action-button-shadow-color": { "prop": "--spectrum-floating-action-button-shadow-color", "ref": "var(--spectrum-floating-action-button-drop-shadow-color)", - "light": { - "value": "rgba(0, 0, 0, 0.15)" - }, - "dark": { - "value": "rgba(0, 0, 0, 0.15)" - } + "value": "rgba(0, 0, 0, 0.15)" }, "focus-indicator-color": { "prop": "--spectrum-focus-indicator-color", @@ -5323,7 +6264,7 @@ "font-size-1200": { "prop": "--spectrum-font-size-1200", "desktop": { - "value": "50px" + "value": "51px" }, "mobile": { "value": "62px" @@ -5332,13 +6273,31 @@ "font-size-1300": { "prop": "--spectrum-font-size-1300", "desktop": { - "value": "60px" + "value": "58px" }, "mobile": { "value": "70px" } }, - "font-size-200": { + "font-size-1400": { + "prop": "--spectrum-font-size-1400", + "desktop": { + "value": "65px" + }, + "mobile": { + "value": "79px" + } + }, + "font-size-1500": { + "prop": "--spectrum-font-size-1500", + "desktop": { + "value": "73px" + }, + "mobile": { + "value": "88px" + } + }, + "font-size-200": { "prop": "--spectrum-font-size-200", "desktop": { "value": "16px" @@ -5347,6 +6306,15 @@ "value": "19px" } }, + "font-size-25": { + "prop": "--spectrum-font-size-25", + "desktop": { + "value": "10px" + }, + "mobile": { + "value": "12px" + } + }, "font-size-300": { "prop": "--spectrum-font-size-300", "desktop": { @@ -5602,6 +6570,30 @@ "value": "rgb(213, 73, 235)" } }, + "gradient-stop-1-genai": { + "prop": "--spectrum-gradient-stop-1-genai", + "value": 0 + }, + "gradient-stop-1-premium": { + "prop": "--spectrum-gradient-stop-1-premium", + "value": 0 + }, + "gradient-stop-2-genai": { + "prop": "--spectrum-gradient-stop-2-genai", + "value": 0.3333 + }, + "gradient-stop-2-premium": { + "prop": "--spectrum-gradient-stop-2-premium", + "value": 0.6666 + }, + "gradient-stop-3-genai": { + "prop": "--spectrum-gradient-stop-3-genai", + "value": 1 + }, + "gradient-stop-3-premium": { + "prop": "--spectrum-gradient-stop-3-premium", + "value": 1 + }, "gray-100": { "prop": "--spectrum-gray-100", "light": { @@ -5965,8 +6957,8 @@ }, "heading-cjk-heavy-font-weight": { "prop": "--spectrum-heading-cjk-heavy-font-weight", - "ref": "var(--spectrum-black-font-weight)", - "value": "900" + "ref": "var(--spectrum-extra-bold-font-weight)", + "value": "800" }, "heading-cjk-heavy-strong-emphasized-font-style": { "prop": "--spectrum-heading-cjk-heavy-strong-emphasized-font-style", @@ -6031,7 +7023,7 @@ "heading-cjk-line-height": { "prop": "--spectrum-heading-cjk-line-height", "ref": "var(--spectrum-cjk-line-height-100)", - "value": "1.5" + "value": 1.5 }, "heading-cjk-size-l": { "prop": "--spectrum-heading-cjk-size-l", @@ -6085,12 +7077,12 @@ }, "heading-cjk-size-xxl": { "prop": "--spectrum-heading-cjk-size-xxl", - "ref": "var(--spectrum-font-size-900)", + "ref": "var(--spectrum-font-size-1000)", "desktop": { - "value": "36px" + "value": "40px" }, "mobile": { - "value": "44px" + "value": "49px" } }, "heading-cjk-size-xxs": { @@ -6105,12 +7097,22 @@ }, "heading-cjk-size-xxxl": { "prop": "--spectrum-heading-cjk-size-xxxl", - "ref": "var(--spectrum-font-size-1300)", + "ref": "var(--spectrum-font-size-1200)", "desktop": { - "value": "60px" + "value": "51px" }, "mobile": { - "value": "70px" + "value": "62px" + } + }, + "heading-cjk-size-xxxxl": { + "prop": "--spectrum-heading-cjk-size-xxxxl", + "ref": "var(--spectrum-font-size-1400)", + "desktop": { + "value": "65px" + }, + "mobile": { + "value": "79px" } }, "heading-cjk-strong-emphasized-font-style": { @@ -6146,15 +7148,15 @@ "heading-line-height": { "prop": "--spectrum-heading-line-height", "ref": "var(--spectrum-line-height-100)", - "value": "1.3" + "value": 1.3 }, "heading-margin-bottom-multiplier": { "prop": "--spectrum-heading-margin-bottom-multiplier", - "value": "0.25" + "value": 0.25 }, "heading-margin-top-multiplier": { "prop": "--spectrum-heading-margin-top-multiplier", - "value": "0.88888889" + "value": 0.88888889 }, "heading-sans-serif-emphasized-font-style": { "prop": "--spectrum-heading-sans-serif-emphasized-font-style", @@ -6163,8 +7165,8 @@ }, "heading-sans-serif-emphasized-font-weight": { "prop": "--spectrum-heading-sans-serif-emphasized-font-weight", - "ref": "var(--spectrum-bold-font-weight)", - "value": "700" + "ref": "var(--spectrum-extra-bold-font-weight)", + "value": "800" }, "heading-sans-serif-font-family": { "prop": "--spectrum-heading-sans-serif-font-family", @@ -6178,8 +7180,8 @@ }, "heading-sans-serif-font-weight": { "prop": "--spectrum-heading-sans-serif-font-weight", - "ref": "var(--spectrum-bold-font-weight)", - "value": "700" + "ref": "var(--spectrum-extra-bold-font-weight)", + "value": "800" }, "heading-sans-serif-heavy-emphasized-font-style": { "prop": "--spectrum-heading-sans-serif-heavy-emphasized-font-style", @@ -6428,12 +7430,12 @@ }, "heading-size-s": { "prop": "--spectrum-heading-size-s", - "ref": "var(--spectrum-font-size-300)", + "ref": "var(--spectrum-font-size-400)", "desktop": { - "value": "18px" + "value": "20px" }, "mobile": { - "value": "22px" + "value": "24px" } }, "heading-size-xl": { @@ -6448,12 +7450,12 @@ }, "heading-size-xs": { "prop": "--spectrum-heading-size-xs", - "ref": "var(--spectrum-font-size-200)", + "ref": "var(--spectrum-font-size-300)", "desktop": { - "value": "16px" + "value": "18px" }, "mobile": { - "value": "19px" + "value": "22px" } }, "heading-size-xxl": { @@ -6480,50 +7482,74 @@ "prop": "--spectrum-heading-size-xxxl", "ref": "var(--spectrum-font-size-1300)", "desktop": { - "value": "60px" + "value": "58px" }, "mobile": { "value": "70px" } }, + "heading-size-xxxxl": { + "prop": "--spectrum-heading-size-xxxxl", + "ref": "var(--spectrum-font-size-1500)", + "desktop": { + "value": "73px" + }, + "mobile": { + "value": "88px" + } + }, "help-text-to-component": { "prop": "--spectrum-help-text-to-component", "value": "0px" }, "help-text-top-to-workflow-icon-extra-large": { "prop": "--spectrum-help-text-top-to-workflow-icon-extra-large", + "ref": "var(--spectrum-component-top-to-workflow-icon-300)", "desktop": { - "value": "9px" + "value": "11px" }, "mobile": { - "value": "11px" + "value": "15px" } }, "help-text-top-to-workflow-icon-large": { "prop": "--spectrum-help-text-top-to-workflow-icon-large", + "ref": "var(--spectrum-component-top-to-workflow-icon-200)", "desktop": { - "value": "6px" + "value": "9px" }, "mobile": { - "value": "8px" + "value": "11px" } }, "help-text-top-to-workflow-icon-medium": { "prop": "--spectrum-help-text-top-to-workflow-icon-medium", + "ref": "var(--spectrum-component-top-to-workflow-icon-100)", "desktop": { - "value": "3px" + "value": "6px" }, "mobile": { - "value": "4px" + "value": "8px" } }, "help-text-top-to-workflow-icon-small": { "prop": "--spectrum-help-text-top-to-workflow-icon-small", + "ref": "var(--spectrum-component-top-to-workflow-icon-75)", "desktop": { "value": "4px" }, "mobile": { - "value": "5px" + "value": "6px" + } + }, + "icon-color-blue-background": { + "prop": "--spectrum-icon-color-blue-background", + "ref": "var(--spectrum-blue-300)", + "light": { + "value": "rgb(229, 240, 254)" + }, + "dark": { + "value": "rgb(12, 33, 117)" } }, "icon-color-blue-primary-default": { @@ -6536,2000 +7562,2018 @@ "value": "rgb(64, 105, 253)" } }, - "icon-color-green-primary-default": { - "prop": "--spectrum-icon-color-green-primary-default", - "ref": "var(--spectrum-green-800)", + "icon-color-blue-primary-down": { + "prop": "--spectrum-icon-color-blue-primary-down", + "ref": "var(--spectrum-blue-1000)", "light": { - "value": "rgb(5, 131, 78)" + "value": "rgb(29, 62, 207)" }, "dark": { - "value": "rgb(6, 136, 80)" + "value": "rgb(105, 149, 254)" } }, - "icon-color-inverse": { - "prop": "--spectrum-icon-color-inverse", - "ref": "var(--spectrum-gray-50)", + "icon-color-blue-primary-hover": { + "prop": "--spectrum-icon-color-blue-primary-hover", + "ref": "var(--spectrum-blue-900)", "light": { - "value": "rgb(248, 248, 248)" + "value": "rgb(39, 77, 234)" }, "dark": { - "value": "rgb(27, 27, 27)" + "value": "rgb(86, 129, 255)" } }, - "icon-color-primary-default": { - "prop": "--spectrum-icon-color-primary-default", - "ref": "var(--spectrum-neutral-content-color-default)", + "icon-color-brown-background": { + "prop": "--spectrum-icon-color-brown-background", + "ref": "var(--spectrum-brown-400)", "light": { - "value": "rgb(41, 41, 41)" + "value": "rgb(247, 238, 225)" }, "dark": { - "value": "rgb(219, 219, 219)" + "value": "rgb(78, 55, 19)" } }, - "icon-color-red-primary-default": { - "prop": "--spectrum-icon-color-red-primary-default", - "ref": "var(--spectrum-red-700)", + "icon-color-brown-primary-default": { + "prop": "--spectrum-icon-color-brown-primary-default", + "ref": "var(--spectrum-brown-700)", "light": { - "value": "rgb(215, 50, 32)" + "value": "rgb(154, 123, 77)" }, "dark": { - "value": "rgb(205, 46, 29)" + "value": "rgb(132, 104, 61)" } }, - "icon-color-yellow-primary-default": { - "prop": "--spectrum-icon-color-yellow-primary-default", - "ref": "var(--spectrum-yellow-1000)", + "icon-color-brown-primary-down": { + "prop": "--spectrum-icon-color-brown-primary-down", + "ref": "var(--spectrum-brown-900)", "light": { - "value": "rgb(245, 199, 0)" + "value": "rgb(119, 91, 50)" }, "dark": { - "value": "rgb(203, 141, 0)" + "value": "rgb(163, 132, 84)" } }, - "illustrated-message-body-size": { - "prop": "--spectrum-illustrated-message-body-size", - "ref": "var(--spectrum-body-size-xs)", - "desktop": { - "value": "14px" + "icon-color-brown-primary-hover": { + "prop": "--spectrum-icon-color-brown-primary-hover", + "ref": "var(--spectrum-brown-800)", + "light": { + "value": "rgb(139, 109, 66)" }, - "mobile": { - "value": "15px" + "dark": { + "value": "rgb(143, 114, 69)" } }, - "illustrated-message-cjk-title-size": { - "prop": "--spectrum-illustrated-message-cjk-title-size", - "ref": "var(--spectrum-heading-cjk-size-s)", - "desktop": { - "value": "20px" + "icon-color-celery-background": { + "prop": "--spectrum-icon-color-celery-background", + "ref": "var(--spectrum-celery-400)", + "light": { + "value": "rgb(235, 255, 220)" }, - "mobile": { - "value": "22px" + "dark": { + "value": "rgb(31, 67, 4)" } }, - "illustrated-message-maximum-width": { - "prop": "--spectrum-illustrated-message-maximum-width", - "value": "380px" - }, - "illustrated-message-title-size": { - "prop": "--spectrum-illustrated-message-title-size", - "ref": "var(--spectrum-heading-size-s)", - "desktop": { - "value": "22px" + "icon-color-celery-primary-default": { + "prop": "--spectrum-icon-color-celery-primary-default", + "ref": "var(--spectrum-celery-900)", + "light": { + "value": "rgb(82, 161, 25)" }, - "mobile": { - "value": "22px" + "dark": { + "value": "rgb(78, 154, 23)" } }, - "in-field-button-edge-to-disclosure-icon-stacked-extra-large": { - "prop": "--spectrum-in-field-button-edge-to-disclosure-icon-stacked-extra-large", - "value": "16px" - }, - "in-field-button-edge-to-disclosure-icon-stacked-large": { - "prop": "--spectrum-in-field-button-edge-to-disclosure-icon-stacked-large", - "value": "13px" + "icon-color-celery-primary-down": { + "prop": "--spectrum-icon-color-celery-primary-down", + "ref": "var(--spectrum-celery-1100)", + "light": { + "value": "rgb(64, 129, 17)" + }, + "dark": { + "value": "rgb(100, 190, 35)" + } }, - "in-field-button-edge-to-disclosure-icon-stacked-medium": { - "prop": "--spectrum-in-field-button-edge-to-disclosure-icon-stacked-medium", - "value": "9px" + "icon-color-celery-primary-hover": { + "prop": "--spectrum-icon-color-celery-primary-hover", + "ref": "var(--spectrum-celery-1000)", + "light": { + "value": "rgb(72, 144, 20)" + }, + "dark": { + "value": "rgb(88, 172, 28)" + } }, - "in-field-button-edge-to-disclosure-icon-stacked-small": { - "prop": "--spectrum-in-field-button-edge-to-disclosure-icon-stacked-small", - "value": "7px" + "icon-color-chartreuse-background": { + "prop": "--spectrum-icon-color-chartreuse-background", + "ref": "var(--spectrum-chartreuse-400)", + "light": { + "value": "rgb(234, 246, 173)" + }, + "dark": { + "value": "rgb(53, 63, 0)" + } }, - "in-field-button-edge-to-fill": { - "prop": "--spectrum-in-field-button-edge-to-fill", - "value": "0px" + "icon-color-chartreuse-primary-default": { + "prop": "--spectrum-icon-color-chartreuse-primary-default", + "ref": "var(--spectrum-chartreuse-1000)", + "light": { + "value": "rgb(143, 172, 0)" + }, + "dark": { + "value": "rgb(136, 164, 0)" + } }, - "in-field-button-fill-stacked-inner-border-rounding": { - "prop": "--spectrum-in-field-button-fill-stacked-inner-border-rounding", - "value": "0px" + "icon-color-chartreuse-primary-down": { + "prop": "--spectrum-icon-color-chartreuse-primary-down", + "ref": "var(--spectrum-chartreuse-1200)", + "light": { + "value": "rgb(114, 137, 0)" + }, + "dark": { + "value": "rgb(169, 203, 0)" + } }, - "in-field-button-inner-edge-to-disclosure-icon-stacked-extra-large": { - "prop": "--spectrum-in-field-button-inner-edge-to-disclosure-icon-stacked-extra-large", - "ref": "var(--spectrum-in-field-button-outer-edge-to-disclosure-icon-stacked-extra-large)", - "value": "5px" + "icon-color-chartreuse-primary-hover": { + "prop": "--spectrum-icon-color-chartreuse-primary-hover", + "ref": "var(--spectrum-chartreuse-1100)", + "light": { + "value": "rgb(128, 153, 0)" + }, + "dark": { + "value": "rgb(151, 181, 0)" + } }, - "in-field-button-inner-edge-to-disclosure-icon-stacked-large": { - "prop": "--spectrum-in-field-button-inner-edge-to-disclosure-icon-stacked-large", - "ref": "var(--spectrum-in-field-button-outer-edge-to-disclosure-icon-stacked-large)", - "value": "4px" + "icon-color-cinnamon-background": { + "prop": "--spectrum-icon-color-cinnamon-background", + "ref": "var(--spectrum-cinnamon-300)", + "light": { + "value": "rgb(249, 236, 229)" + }, + "dark": { + "value": "rgb(79, 28, 7)" + } }, - "in-field-button-inner-edge-to-disclosure-icon-stacked-medium": { - "prop": "--spectrum-in-field-button-inner-edge-to-disclosure-icon-stacked-medium", - "ref": "var(--spectrum-in-field-button-outer-edge-to-disclosure-icon-stacked-medium)", - "value": "3px" + "icon-color-cinnamon-primary-default": { + "prop": "--spectrum-icon-color-cinnamon-primary-default", + "ref": "var(--spectrum-cinnamon-800)", + "dark": { + "value": "rgb(176, 98, 59)" + }, + "light": { + "value": "rgb(184, 109, 70)" + } }, - "in-field-button-inner-edge-to-disclosure-icon-stacked-small": { - "prop": "--spectrum-in-field-button-inner-edge-to-disclosure-icon-stacked-small", - "ref": "var(--spectrum-in-field-button-outer-edge-to-disclosure-icon-stacked-small)", - "value": "3px" + "icon-color-cinnamon-primary-down": { + "prop": "--spectrum-icon-color-cinnamon-primary-down", + "ref": "var(--spectrum-cinnamon-1000)", + "dark": { + "value": "rgb(206, 136, 99)" + }, + "light": { + "value": "rgb(147, 77, 43)" + } }, - "in-field-button-outer-edge-to-disclosure-icon-stacked-extra-large": { - "prop": "--spectrum-in-field-button-outer-edge-to-disclosure-icon-stacked-extra-large", - "value": "5px" - }, - "in-field-button-outer-edge-to-disclosure-icon-stacked-large": { - "prop": "--spectrum-in-field-button-outer-edge-to-disclosure-icon-stacked-large", - "value": "4px" - }, - "in-field-button-outer-edge-to-disclosure-icon-stacked-medium": { - "prop": "--spectrum-in-field-button-outer-edge-to-disclosure-icon-stacked-medium", - "value": "3px" - }, - "in-field-button-outer-edge-to-disclosure-icon-stacked-small": { - "prop": "--spectrum-in-field-button-outer-edge-to-disclosure-icon-stacked-small", - "value": "3px" - }, - "in-field-button-stacked-inner-edge-to-fill": { - "prop": "--spectrum-in-field-button-stacked-inner-edge-to-fill", - "value": "0px" - }, - "in-field-button-width-stacked-extra-large": { - "prop": "--spectrum-in-field-button-width-stacked-extra-large", - "value": "44px" - }, - "in-field-button-width-stacked-large": { - "prop": "--spectrum-in-field-button-width-stacked-large", - "value": "36px" - }, - "in-field-button-width-stacked-medium": { - "prop": "--spectrum-in-field-button-width-stacked-medium", - "value": "28px" - }, - "in-field-button-width-stacked-small": { - "prop": "--spectrum-in-field-button-width-stacked-small", - "value": "20px" - }, - "in-line-alert-minimum-width": { - "prop": "--spectrum-in-line-alert-minimum-width", - "value": "240px" - }, - "indigo-100": { - "prop": "--spectrum-indigo-100", - "light": { - "value": "rgb(247, 248, 255)" - }, + "icon-color-cinnamon-primary-hover": { + "prop": "--spectrum-icon-color-cinnamon-primary-hover", + "ref": "var(--spectrum-cinnamon-900)", "dark": { - "value": "rgb(30, 0, 93)" + "value": "rgb(192, 119, 80)" + }, + "light": { + "value": "rgb(170, 94, 56)" } }, - "indigo-1000": { - "prop": "--spectrum-indigo-1000", + "icon-color-cyan-background": { + "prop": "--spectrum-icon-color-cyan-background", + "ref": "var(--spectrum-cyan-400)", "light": { - "value": "rgb(99, 56, 238)" + "value": "rgb(238, 250, 254)" }, "dark": { - "value": "rgb(139, 141, 254)" + "value": "rgb(0, 64, 88)" } }, - "indigo-1100": { - "prop": "--spectrum-indigo-1100", + "icon-color-cyan-primary-default": { + "prop": "--spectrum-icon-color-cyan-primary-default", + "ref": "var(--spectrum-cyan-800)", "light": { - "value": "rgb(84, 36, 219)" + "value": "rgb(18, 134, 205)" }, "dark": { - "value": "rgb(153, 161, 255)" + "value": "rgb(13, 125, 186)" } }, - "indigo-1200": { - "prop": "--spectrum-indigo-1200", + "icon-color-cyan-primary-down": { + "prop": "--spectrum-icon-color-cyan-primary-down", + "ref": "var(--spectrum-cyan-1000)", "light": { - "value": "rgb(69, 19, 191)" + "value": "rgb(4, 102, 145)" }, "dark": { - "value": "rgb(176, 186, 255)" + "value": "rgb(38, 159, 244)" } }, - "indigo-1300": { - "prop": "--spectrum-indigo-1300", + "icon-color-cyan-primary-hover": { + "prop": "--spectrum-icon-color-cyan-primary-hover", + "ref": "var(--spectrum-cyan-900)", "light": { - "value": "rgb(55, 6, 160)" + "value": "rgb(11, 120, 179)" }, "dark": { - "value": "rgb(199, 208, 255)" + "value": "rgb(24, 142, 220)" } }, - "indigo-1400": { - "prop": "--spectrum-indigo-1400", + "icon-color-disabled-primary": { + "prop": "--spectrum-icon-color-disabled-primary", + "ref": "var(--spectrum-gray-400)", "light": { - "value": "rgb(42, 0, 129)" + "value": "rgb(198, 198, 198)" }, "dark": { - "value": "rgb(223, 228, 255)" + "value": "rgb(68, 68, 68)" } }, - "indigo-1500": { - "prop": "--spectrum-indigo-1500", - "dark": { - "value": "rgb(243, 244, 255)" - }, + "icon-color-emphasized-background": { + "prop": "--spectrum-icon-color-emphasized-background", + "ref": "var(--spectrum-gray-900)", "light": { - "value": "rgb(31, 0, 98)" - } - }, - "indigo-1600": { - "prop": "--spectrum-indigo-1600", - "dark": { - "value": "rgb(255, 255, 255)" + "value": "rgb(19, 19, 19)" }, - "light": { - "value": "rgb(17, 0, 54)" + "dark": { + "value": "rgb(242, 242, 242)" } }, - "indigo-200": { - "prop": "--spectrum-indigo-200", + "icon-color-fuchsia-background": { + "prop": "--spectrum-icon-color-fuchsia-background", + "ref": "var(--spectrum-fuchsia-200)", "light": { - "value": "rgb(235, 238, 255)" + "value": "rgb(253, 233, 255)" }, "dark": { - "value": "rgb(35, 0, 110)" + "value": "rgb(61, 0, 74)" } }, - "indigo-300": { - "prop": "--spectrum-indigo-300", + "icon-color-fuchsia-primary-default": { + "prop": "--spectrum-icon-color-fuchsia-primary-default", + "ref": "var(--spectrum-fuchsia-700)", "light": { - "value": "rgb(216, 222, 255)" + "value": "rgb(181, 57, 200)" }, "dark": { - "value": "rgb(47, 0, 140)" + "value": "rgb(173, 51, 192)" } }, - "indigo-400": { - "prop": "--spectrum-indigo-400", + "icon-color-fuchsia-primary-down": { + "prop": "--spectrum-icon-color-fuchsia-primary-down", + "ref": "var(--spectrum-fuchsia-900)", "light": { - "value": "rgb(192, 201, 255)" + "value": "rgb(135, 27, 154)" }, "dark": { - "value": "rgb(62, 12, 174)" + "value": "rgb(213, 73, 235)" } }, - "indigo-500": { - "prop": "--spectrum-indigo-500", + "icon-color-fuchsia-primary-hover": { + "prop": "--spectrum-icon-color-fuchsia-primary-hover", + "ref": "var(--spectrum-fuchsia-800)", "light": { - "value": "rgb(167, 178, 255)" + "value": "rgb(156, 40, 175)" }, "dark": { - "value": "rgb(79, 30, 209)" + "value": "rgb(186, 60, 206)" } }, - "indigo-600": { - "prop": "--spectrum-indigo-600", + "icon-color-green-background": { + "prop": "--spectrum-icon-color-green-background", + "ref": "var(--spectrum-green-400)", "light": { - "value": "rgb(145, 151, 254)" + "value": "rgb(237, 252, 241)" }, "dark": { - "value": "rgb(95, 52, 235)" + "value": "rgb(0, 68, 48)" } }, - "indigo-700": { - "prop": "--spectrum-indigo-700", + "icon-color-green-primary-default": { + "prop": "--spectrum-icon-color-green-primary-default", + "ref": "var(--spectrum-green-800)", "light": { - "value": "rgb(132, 128, 254)" + "value": "rgb(7, 147, 85)" }, "dark": { - "value": "rgb(109, 75, 248)" + "value": "rgb(6, 136, 80)" } }, - "indigo-800": { - "prop": "--spectrum-indigo-800", + "icon-color-green-primary-down": { + "prop": "--spectrum-icon-color-green-primary-down", + "ref": "var(--spectrum-green-1000)", "light": { - "value": "rgb(122, 106, 253)" + "value": "rgb(3, 110, 69)" }, "dark": { - "value": "rgb(116, 91, 252)" + "value": "rgb(14, 175, 98)" } }, - "indigo-900": { - "prop": "--spectrum-indigo-900", + "icon-color-green-primary-hover": { + "prop": "--spectrum-icon-color-green-primary-hover", + "ref": "var(--spectrum-green-900)", "light": { - "value": "rgb(113, 85, 250)" + "value": "rgb(5, 131, 78)" }, "dark": { - "value": "rgb(128, 119, 254)" + "value": "rgb(9, 157, 89)" } }, - "indigo-background-color-default": { - "prop": "--spectrum-indigo-background-color-default", - "ref": "var(--spectrum-indigo-800)", + "icon-color-indigo-background": { + "prop": "--spectrum-icon-color-indigo-background", + "ref": "var(--spectrum-indigo-100)", "light": { - "value": "rgb(113, 85, 250)" + "value": "rgb(235, 238, 255)" }, "dark": { - "value": "rgb(116, 91, 252)" + "value": "rgb(30, 0, 93)" } }, - "indigo-subtle-background-color-default": { - "prop": "--spectrum-indigo-subtle-background-color-default", - "ref": "var(--spectrum-indigo-300)", + "icon-color-indigo-primary-default": { + "prop": "--spectrum-icon-color-indigo-primary-default", + "ref": "var(--spectrum-indigo-700)", "light": { - "value": "rgb(235, 238, 255)" + "value": "rgb(113, 85, 250)" }, "dark": { - "value": "rgb(47, 0, 140)" + "value": "rgb(109, 75, 248)" } }, - "indigo-visual-color": { - "prop": "--spectrum-indigo-visual-color", + "icon-color-indigo-primary-down": { + "prop": "--spectrum-icon-color-indigo-primary-down", "ref": "var(--spectrum-indigo-900)", "light": { - "value": "rgb(122, 106, 253)" + "value": "rgb(84, 36, 219)" }, "dark": { "value": "rgb(128, 119, 254)" } }, - "informative-background-color-default": { - "prop": "--spectrum-informative-background-color-default", - "ref": "var(--spectrum-informative-color-800)", + "icon-color-indigo-primary-hover": { + "prop": "--spectrum-icon-color-indigo-primary-hover", + "ref": "var(--spectrum-indigo-800)", "light": { - "value": "rgb(59, 99, 251)" + "value": "rgb(99, 56, 238)" }, "dark": { - "value": "rgb(64, 105, 253)" + "value": "rgb(116, 91, 252)" } }, - "informative-background-color-down": { - "prop": "--spectrum-informative-background-color-down", - "ref": "var(--spectrum-informative-color-700)", + "icon-color-informative": { + "prop": "--spectrum-icon-color-informative", + "ref": "var(--spectrum-informative-color-900)", "light": { - "value": "rgb(39, 77, 234)" + "value": "rgb(75, 117, 255)" }, "dark": { - "value": "rgb(52, 91, 248)" + "value": "rgb(86, 129, 255)" } }, - "informative-background-color-hover": { - "prop": "--spectrum-informative-background-color-hover", - "ref": "var(--spectrum-informative-color-700)", + "icon-color-inverse": { + "prop": "--spectrum-icon-color-inverse", + "ref": "var(--spectrum-gray-50)", "light": { - "value": "rgb(39, 77, 234)" + "value": "rgb(248, 248, 248)" }, "dark": { - "value": "rgb(52, 91, 248)" + "value": "rgb(27, 27, 27)" } }, - "informative-background-color-key-focus": { - "prop": "--spectrum-informative-background-color-key-focus", - "ref": "var(--spectrum-informative-color-700)", + "icon-color-inverse-background": { + "prop": "--spectrum-icon-color-inverse-background", + "ref": "var(--spectrum-gray-50)", "light": { - "value": "rgb(39, 77, 234)" + "value": "rgb(248, 248, 248)" }, "dark": { - "value": "rgb(52, 91, 248)" + "value": "rgb(27, 27, 27)" } }, - "informative-color-100": { - "prop": "--spectrum-informative-color-100", - "ref": "var(--spectrum-blue-100)", + "icon-color-magenta-background": { + "prop": "--spectrum-icon-color-magenta-background", + "ref": "var(--spectrum-magenta-200)", "light": { - "value": "rgb(245, 249, 255)" + "value": "rgb(255, 232, 240)" }, "dark": { - "value": "rgb(14, 23, 63)" + "value": "rgb(74, 0, 27)" } }, - "informative-color-1000": { - "prop": "--spectrum-informative-color-1000", - "ref": "var(--spectrum-blue-1000)", + "icon-color-magenta-primary-default": { + "prop": "--spectrum-icon-color-magenta-primary-default", + "ref": "var(--spectrum-magenta-700)", "light": { - "value": "rgb(39, 77, 234)" + "value": "rgb(217, 35, 97)" }, "dark": { - "value": "rgb(105, 149, 254)" + "value": "rgb(207, 31, 92)" } }, - "informative-color-1100": { - "prop": "--spectrum-informative-color-1100", - "ref": "var(--spectrum-blue-1100)", + "icon-color-magenta-primary-down": { + "prop": "--spectrum-icon-color-magenta-primary-down", + "ref": "var(--spectrum-magenta-900)", "light": { - "value": "rgb(29, 62, 207)" + "value": "rgb(163, 5, 62)" }, "dark": { - "value": "rgb(124, 169, 252)" + "value": "rgb(255, 51, 119)" } }, - "informative-color-1200": { - "prop": "--spectrum-informative-color-1200", - "ref": "var(--spectrum-blue-1200)", + "icon-color-magenta-primary-hover": { + "prop": "--spectrum-icon-color-magenta-primary-hover", + "ref": "var(--spectrum-magenta-800)", "light": { - "value": "rgb(21, 50, 173)" + "value": "rgb(186, 22, 80)" }, "dark": { - "value": "rgb(152, 192, 252)" + "value": "rgb(224, 38, 101)" } }, - "informative-color-1300": { - "prop": "--spectrum-informative-color-1300", - "ref": "var(--spectrum-blue-1300)", + "icon-color-negative": { + "prop": "--spectrum-icon-color-negative", + "ref": "var(--spectrum-negative-color-900)", "light": { - "value": "rgb(16, 40, 140)" + "value": "rgb(240, 56, 35)" }, "dark": { - "value": "rgb(181, 213, 253)" + "value": "rgb(252, 67, 46)" } }, - "informative-color-1400": { - "prop": "--spectrum-informative-color-1400", - "ref": "var(--spectrum-blue-1400)", + "icon-color-neutral": { + "prop": "--spectrum-icon-color-neutral", + "ref": "var(--spectrum-gray-600)", "light": { - "value": "rgb(12, 31, 105)" + "value": "rgb(143, 143, 143)" }, "dark": { - "value": "rgb(213, 231, 254)" + "value": "rgb(138, 138, 138)" } }, - "informative-color-1500": { - "prop": "--spectrum-informative-color-1500", - "ref": "var(--spectrum-blue-1500)", - "dark": { - "value": "rgb(238, 245, 255)" - }, + "icon-color-notice": { + "prop": "--spectrum-icon-color-notice", + "ref": "var(--spectrum-notice-color-900)", "light": { - "value": "rgb(14, 24, 67)" - } - }, - "informative-color-1600": { - "prop": "--spectrum-informative-color-1600", - "ref": "var(--spectrum-blue-1600)", - "dark": { - "value": "rgb(255, 255, 255)" + "value": "rgb(212, 91, 0)" }, - "light": { - "value": "rgb(7, 11, 30)" + "dark": { + "value": "rgb(224, 100, 0)" } }, - "informative-color-200": { - "prop": "--spectrum-informative-color-200", - "ref": "var(--spectrum-blue-200)", + "icon-color-orange-background": { + "prop": "--spectrum-icon-color-orange-background", + "ref": "var(--spectrum-orange-300)", "light": { - "value": "rgb(229, 240, 254)" + "value": "rgb(255, 236, 207)" }, "dark": { - "value": "rgb(15, 28, 82)" + "value": "rgb(80, 27, 0)" } }, - "informative-color-300": { - "prop": "--spectrum-informative-color-300", - "ref": "var(--spectrum-blue-300)", + "icon-color-orange-primary-default": { + "prop": "--spectrum-icon-color-orange-primary-default", + "ref": "var(--spectrum-orange-900)", "light": { - "value": "rgb(203, 226, 254)" + "value": "rgb(232, 106, 0)" }, "dark": { - "value": "rgb(12, 33, 117)" + "value": "rgb(224, 100, 0)" } }, - "informative-color-400": { - "prop": "--spectrum-informative-color-400", - "ref": "var(--spectrum-blue-400)", + "icon-color-orange-primary-down": { + "prop": "--spectrum-icon-color-orange-primary-down", + "ref": "var(--spectrum-orange-1100)", "light": { - "value": "rgb(172, 207, 253)" + "value": "rgb(194, 78, 0)" }, "dark": { - "value": "rgb(18, 45, 154)" + "value": "rgb(255, 137, 0)" } }, - "informative-color-500": { - "prop": "--spectrum-informative-color-500", - "ref": "var(--spectrum-blue-500)", + "icon-color-orange-primary-hover": { + "prop": "--spectrum-icon-color-orange-primary-hover", + "ref": "var(--spectrum-orange-1000)", "light": { - "value": "rgb(142, 185, 252)" + "value": "rgb(212, 91, 0)" }, "dark": { - "value": "rgb(26, 58, 195)" + "value": "rgb(243, 117, 0)" } }, - "informative-color-600": { - "prop": "--spectrum-informative-color-600", - "ref": "var(--spectrum-blue-600)", - "light": { - "value": "rgb(114, 158, 253)" - }, + "icon-color-pink-background": { + "prop": "--spectrum-icon-color-pink-background", + "ref": "var(--spectrum-pink-200)", "dark": { - "value": "rgb(37, 73, 229)" + "value": "rgb(71, 0, 44)" + }, + "light": { + "value": "rgb(255, 232, 247)" } }, - "informative-color-700": { - "prop": "--spectrum-informative-color-700", - "ref": "var(--spectrum-blue-700)", + "icon-color-pink-primary-default": { + "prop": "--spectrum-icon-color-pink-primary-default", + "ref": "var(--spectrum-pink-700)", "light": { - "value": "rgb(93, 137, 255)" + "value": "rgb(228, 52, 163)" }, "dark": { - "value": "rgb(52, 91, 248)" + "value": "rgb(196, 39, 138)" } }, - "informative-color-800": { - "prop": "--spectrum-informative-color-800", - "ref": "var(--spectrum-blue-800)", + "icon-color-pink-primary-down": { + "prop": "--spectrum-icon-color-pink-primary-down", + "ref": "var(--spectrum-pink-900)", "light": { - "value": "rgb(75, 117, 255)" + "value": "rgb(176, 31, 123)" }, "dark": { - "value": "rgb(64, 105, 253)" + "value": "rgb(236, 67, 175)" } }, - "informative-color-900": { - "prop": "--spectrum-informative-color-900", - "ref": "var(--spectrum-blue-900)", + "icon-color-pink-primary-hover": { + "prop": "--spectrum-icon-color-pink-primary-hover", + "ref": "var(--spectrum-pink-800)", "light": { - "value": "rgb(59, 99, 251)" + "value": "rgb(206, 42, 146)" }, "dark": { - "value": "rgb(86, 129, 255)" + "value": "rgb(213, 45, 151)" } }, - "informative-subtle-background-color-default": { - "prop": "--spectrum-informative-subtle-background-color-default", - "ref": "var(--spectrum-informative-color-300)", + "icon-color-positive": { + "prop": "--spectrum-icon-color-positive", + "ref": "var(--spectrum-positive-color-900)", "light": { - "value": "rgb(229, 240, 254)" + "value": "rgb(7, 147, 85)" }, "dark": { - "value": "rgb(12, 33, 117)" + "value": "rgb(9, 157, 89)" } }, - "informative-visual-color": { - "prop": "--spectrum-informative-visual-color", - "ref": "var(--spectrum-informative-color-900)", + "icon-color-primary-default": { + "prop": "--spectrum-icon-color-primary-default", + "ref": "var(--spectrum-neutral-content-color-default)", "light": { - "value": "rgb(75, 117, 255)" + "value": "rgb(41, 41, 41)" }, "dark": { - "value": "rgb(86, 129, 255)" + "value": "rgb(219, 219, 219)" } }, - "italic-font-style": { - "prop": "--spectrum-italic-font-style", - "value": "italic" - }, - "light-font-weight": { - "prop": "--spectrum-light-font-weight", - "value": "300" - }, - "line-height-100": { - "prop": "--spectrum-line-height-100", - "value": "1.3" - }, - "line-height-200": { - "prop": "--spectrum-line-height-200", - "value": "1.5" - }, - "magenta-100": { - "prop": "--spectrum-magenta-100", + "icon-color-primary-down": { + "prop": "--spectrum-icon-color-primary-down", + "ref": "var(--spectrum-neutral-content-color-down)", "light": { - "value": "rgb(255, 245, 248)" + "value": "rgb(19, 19, 19)" }, "dark": { - "value": "rgb(59, 0, 22)" + "value": "rgb(242, 242, 242)" } }, - "magenta-1000": { - "prop": "--spectrum-magenta-1000", + "icon-color-primary-hover": { + "prop": "--spectrum-icon-color-primary-hover", + "ref": "var(--spectrum-neutral-content-color-hover)", "light": { - "value": "rgb(186, 22, 80)" + "value": "rgb(19, 19, 19)" }, "dark": { - "value": "rgb(255, 96, 149)" + "value": "rgb(242, 242, 242)" } }, - "magenta-1100": { - "prop": "--spectrum-magenta-1100", + "icon-color-purple-background": { + "prop": "--spectrum-icon-color-purple-background", + "ref": "var(--spectrum-purple-200)", "light": { - "value": "rgb(163, 5, 62)" + "value": "rgb(244, 235, 252)" }, "dark": { - "value": "rgb(255, 128, 171)" + "value": "rgb(50, 0, 96)" } }, - "magenta-1200": { - "prop": "--spectrum-magenta-1200", + "icon-color-purple-primary-default": { + "prop": "--spectrum-icon-color-purple-primary-default", + "ref": "var(--spectrum-purple-700)", "light": { - "value": "rgb(136, 0, 51)" + "value": "rgb(154, 71, 226)" }, "dark": { - "value": "rgb(255, 163, 194)" + "value": "rgb(148, 62, 224)" } }, - "magenta-1300": { - "prop": "--spectrum-magenta-1300", + "icon-color-purple-primary-down": { + "prop": "--spectrum-icon-color-purple-primary-down", + "ref": "var(--spectrum-purple-900)", "light": { - "value": "rgb(111, 0, 40)" + "value": "rgb(115, 13, 204)" }, "dark": { - "value": "rgb(255, 193, 214)" + "value": "rgb(173, 105, 233)" } }, - "magenta-1400": { - "prop": "--spectrum-magenta-1400", + "icon-color-purple-primary-hover": { + "prop": "--spectrum-icon-color-purple-primary-hover", + "ref": "var(--spectrum-purple-800)", "light": { - "value": "rgb(86, 0, 30)" + "value": "rgb(134, 40, 217)" }, "dark": { - "value": "rgb(255, 220, 232)" + "value": "rgb(157, 78, 228)" } }, - "magenta-1500": { - "prop": "--spectrum-magenta-1500", - "dark": { - "value": "rgb(255, 241, 246)" - }, + "icon-color-red-background": { + "prop": "--spectrum-icon-color-red-background", + "ref": "var(--spectrum-red-300)", "light": { - "value": "rgb(64, 0, 22)" + "value": "rgb(255, 235, 232)" + }, + "dark": { + "value": "rgb(87, 17, 7)" } }, - "magenta-1600": { - "prop": "--spectrum-magenta-1600", - "dark": { - "value": "rgb(255, 255, 255)" - }, + "icon-color-red-primary-default": { + "prop": "--spectrum-icon-color-red-primary-default", + "ref": "var(--spectrum-red-700)", "light": { - "value": "rgb(35, 0, 12)" + "value": "rgb(215, 50, 32)" + }, + "dark": { + "value": "rgb(205, 46, 29)" } }, - "magenta-200": { - "prop": "--spectrum-magenta-200", + "icon-color-red-primary-down": { + "prop": "--spectrum-icon-color-red-primary-down", + "ref": "var(--spectrum-red-900)", "light": { - "value": "rgb(255, 232, 240)" + "value": "rgb(156, 33, 19)" }, "dark": { - "value": "rgb(74, 0, 27)" + "value": "rgb(252, 67, 46)" } }, - "magenta-300": { - "prop": "--spectrum-magenta-300", + "icon-color-red-primary-hover": { + "prop": "--spectrum-icon-color-red-primary-hover", + "ref": "var(--spectrum-red-800)", "light": { - "value": "rgb(255, 213, 227)" + "value": "rgb(183, 40, 24)" }, "dark": { - "value": "rgb(93, 0, 34)" + "value": "rgb(223, 52, 34)" } }, - "magenta-400": { - "prop": "--spectrum-magenta-400", + "icon-color-seafoam-background": { + "prop": "--spectrum-icon-color-seafoam-background", + "ref": "var(--spectrum-seafoam-400)", "light": { - "value": "rgb(255, 185, 208)" + "value": "rgb(211, 246, 234)" }, "dark": { - "value": "rgb(123, 0, 45)" + "value": "rgb(0, 67, 59)" } }, - "magenta-500": { - "prop": "--spectrum-magenta-500", + "icon-color-seafoam-primary-default": { + "prop": "--spectrum-icon-color-seafoam-primary-default", + "ref": "var(--spectrum-seafoam-800)", "light": { - "value": "rgb(255, 152, 187)" + "value": "rgb(9, 144, 120)" }, "dark": { - "value": "rgb(152, 7, 60)" + "value": "rgb(8, 134, 112)" } }, - "magenta-600": { - "prop": "--spectrum-magenta-600", + "icon-color-seafoam-primary-down": { + "prop": "--spectrum-icon-color-seafoam-primary-down", + "ref": "var(--spectrum-seafoam-1000)", "light": { - "value": "rgb(255, 112, 159)" + "value": "rgb(5, 108, 92)" }, "dark": { - "value": "rgb(181, 19, 76)" + "value": "rgb(12, 173, 142)" } }, - "magenta-700": { - "prop": "--spectrum-magenta-700", + "icon-color-seafoam-primary-hover": { + "prop": "--spectrum-icon-color-seafoam-primary-hover", + "ref": "var(--spectrum-seafoam-900)", "light": { - "value": "rgb(255, 72, 133)" + "value": "rgb(7, 129, 109)" }, "dark": { - "value": "rgb(207, 31, 92)" + "value": "rgb(10, 154, 128)" } }, - "magenta-800": { - "prop": "--spectrum-magenta-800", + "icon-color-silver-background": { + "prop": "--spectrum-icon-color-silver-background", + "ref": "var(--spectrum-silver-400)", "light": { - "value": "rgb(240, 45, 110)" + "value": "rgb(239, 239, 239)" }, "dark": { - "value": "rgb(224, 38, 101)" + "value": "rgb(59, 59, 59)" } }, - "magenta-900": { - "prop": "--spectrum-magenta-900", + "icon-color-silver-primary-default": { + "prop": "--spectrum-icon-color-silver-primary-default", + "ref": "var(--spectrum-silver-800)", "light": { - "value": "rgb(217, 35, 97)" + "value": "rgb(143, 143, 143)" }, "dark": { - "value": "rgb(255, 51, 119)" + "value": "rgb(118, 118, 118)" } }, - "magenta-background-color-default": { - "prop": "--spectrum-magenta-background-color-default", - "ref": "var(--spectrum-magenta-800)", + "icon-color-silver-primary-down": { + "prop": "--spectrum-icon-color-silver-primary-down", + "ref": "var(--spectrum-silver-1000)", "light": { - "value": "rgb(217, 35, 97)" + "value": "rgb(114, 114, 114)" }, "dark": { - "value": "rgb(224, 38, 101)" + "value": "rgb(152, 152, 152)" } }, - "magenta-subtle-background-color-default": { - "prop": "--spectrum-magenta-subtle-background-color-default", - "ref": "var(--spectrum-magenta-300)", + "icon-color-silver-primary-hover": { + "prop": "--spectrum-icon-color-silver-primary-hover", + "ref": "var(--spectrum-silver-900)", "light": { - "value": "rgb(255, 232, 240)" + "value": "rgb(128, 128, 128)" }, "dark": { - "value": "rgb(93, 0, 34)" + "value": "rgb(137, 137, 137)" } }, - "magenta-visual-color": { - "prop": "--spectrum-magenta-visual-color", - "ref": "var(--spectrum-magenta-900)", + "icon-color-turquoise-background": { + "prop": "--spectrum-icon-color-turquoise-background", + "ref": "var(--spectrum-turquoise-400)", "light": { - "value": "rgb(240, 45, 110)" + "value": "rgb(209, 245, 245)" }, "dark": { - "value": "rgb(255, 51, 119)" + "value": "rgb(0, 66, 72)" } }, - "medium-font-weight": { - "prop": "--spectrum-medium-font-weight", - "value": "500" - }, - "menu-item-edge-to-content-not-selected-extra-large": { - "prop": "--spectrum-menu-item-edge-to-content-not-selected-extra-large", - "desktop": { - "value": "45px" + "icon-color-turquoise-primary-default": { + "prop": "--spectrum-icon-color-turquoise-primary-default", + "ref": "var(--spectrum-turquoise-800)", + "light": { + "value": "rgb(12, 158, 171)" }, - "mobile": { - "value": "54px" + "dark": { + "value": "rgb(9, 131, 142)" } }, - "menu-item-edge-to-content-not-selected-large": { - "prop": "--spectrum-menu-item-edge-to-content-not-selected-large", - "desktop": { - "value": "38px" + "icon-color-turquoise-primary-down": { + "prop": "--spectrum-icon-color-turquoise-primary-down", + "ref": "var(--spectrum-turquoise-1000)", + "light": { + "value": "rgb(8, 126, 137)" }, - "mobile": { - "value": "47px" + "dark": { + "value": "rgb(13, 168, 182)" } }, - "menu-item-edge-to-content-not-selected-medium": { - "prop": "--spectrum-menu-item-edge-to-content-not-selected-medium", - "desktop": { - "value": "32px" + "icon-color-turquoise-primary-hover": { + "prop": "--spectrum-icon-color-turquoise-primary-hover", + "ref": "var(--spectrum-turquoise-900)", + "light": { + "value": "rgb(10, 141, 153)" }, - "mobile": { - "value": "42px" + "dark": { + "value": "rgb(11, 151, 164)" } }, - "menu-item-edge-to-content-not-selected-small": { - "prop": "--spectrum-menu-item-edge-to-content-not-selected-small", - "desktop": { - "value": "28px" + "icon-color-yellow-background": { + "prop": "--spectrum-icon-color-yellow-background", + "ref": "var(--spectrum-yellow-400)", + "light": { + "value": "rgb(255, 248, 204)" }, - "mobile": { - "value": "24px" + "dark": { + "value": "rgb(83, 52, 0)" } }, - "menu-item-label-to-description": { - "prop": "--spectrum-menu-item-label-to-description", - "value": "1px" - }, - "menu-item-section-divider-height": { - "prop": "--spectrum-menu-item-section-divider-height", - "value": "8px" - }, - "menu-item-top-to-disclosure-icon-extra-large": { - "prop": "--spectrum-menu-item-top-to-disclosure-icon-extra-large", - "desktop": { - "value": "17px" + "icon-color-yellow-primary-default": { + "prop": "--spectrum-icon-color-yellow-primary-default", + "ref": "var(--spectrum-yellow-1200)", + "light": { + "value": "rgb(245, 199, 0)" }, - "mobile": { - "value": "22px" + "dark": { + "value": "rgb(235, 183, 0)" } }, - "menu-item-top-to-disclosure-icon-large": { - "prop": "--spectrum-menu-item-top-to-disclosure-icon-large", - "desktop": { - "value": "14px" + "icon-color-yellow-primary-down": { + "prop": "--spectrum-icon-color-yellow-primary-down", + "ref": "var(--spectrum-yellow-1400)", + "light": { + "value": "rgb(210, 149, 0)" }, - "mobile": { - "value": "17px" + "dark": { + "value": "rgb(255, 230, 86)" } }, - "menu-item-top-to-disclosure-icon-medium": { - "prop": "--spectrum-menu-item-top-to-disclosure-icon-medium", - "desktop": { - "value": "11px" + "icon-color-yellow-primary-hover": { + "prop": "--spectrum-icon-color-yellow-primary-hover", + "ref": "var(--spectrum-yellow-1300)", + "light": { + "value": "rgb(230, 175, 0)" }, - "mobile": { - "value": "13px" + "dark": { + "value": "rgb(249, 206, 0)" } }, - "menu-item-top-to-disclosure-icon-small": { - "prop": "--spectrum-menu-item-top-to-disclosure-icon-small", + "illustrated-message-body-size": { + "prop": "--spectrum-illustrated-message-body-size", + "ref": "var(--spectrum-body-size-xs)", "desktop": { - "value": "7px" + "value": "14px" }, "mobile": { - "value": "9px" + "value": "15px" } }, - "menu-item-top-to-selected-icon-extra-large": { - "prop": "--spectrum-menu-item-top-to-selected-icon-extra-large", + "illustrated-message-cjk-title-size": { + "prop": "--spectrum-illustrated-message-cjk-title-size", + "ref": "var(--spectrum-title-cjk-size-xl)", "desktop": { - "value": "17px" + "value": "20px" }, "mobile": { "value": "22px" } }, - "menu-item-top-to-selected-icon-large": { - "prop": "--spectrum-menu-item-top-to-selected-icon-large", + "illustrated-message-horizontal-maximum-width": { + "prop": "--spectrum-illustrated-message-horizontal-maximum-width", + "value": "535px" + }, + "illustrated-message-large-body-font-size": { + "prop": "--spectrum-illustrated-message-large-body-font-size", + "ref": "var(--spectrum-body-size-xs)", "desktop": { "value": "14px" }, "mobile": { - "value": "17px" + "value": "15px" } }, - "menu-item-top-to-selected-icon-medium": { - "prop": "--spectrum-menu-item-top-to-selected-icon-medium", + "illustrated-message-large-cjk-title-font-size": { + "prop": "--spectrum-illustrated-message-large-cjk-title-font-size", + "ref": "var(--spectrum-title-cjk-size-xl)", "desktop": { - "value": "11px" + "value": "20px" }, "mobile": { - "value": "13px" + "value": "22px" } }, - "menu-item-top-to-selected-icon-small": { - "prop": "--spectrum-menu-item-top-to-selected-icon-small", + "illustrated-message-large-title-font-size": { + "prop": "--spectrum-illustrated-message-large-title-font-size", + "ref": "var(--spectrum-title-size-xl)", "desktop": { - "value": "7px" + "value": "22px" }, "mobile": { - "value": "9px" + "value": "24px" } }, - "meter-default-width": { - "prop": "--spectrum-meter-default-width", - "ref": "var(--spectrum-meter-width)", + "illustrated-message-maximum-width": { + "prop": "--spectrum-illustrated-message-maximum-width", + "ref": "var(--spectrum-illustrated-message-vertical-maximum-width)", + "value": "380px" + }, + "illustrated-message-medium-body-font-size": { + "prop": "--spectrum-illustrated-message-medium-body-font-size", + "ref": "var(--spectrum-body-size-xs)", "desktop": { - "value": "192px" + "value": "14px" }, "mobile": { - "value": "240px" + "value": "15px" } }, - "meter-maximum-width": { - "prop": "--spectrum-meter-maximum-width", - "value": "768px" - }, - "meter-minimum-width": { - "prop": "--spectrum-meter-minimum-width", - "value": "48px" - }, - "meter-thickness-large": { - "prop": "--spectrum-meter-thickness-large", + "illustrated-message-medium-cjk-title-font-size": { + "prop": "--spectrum-illustrated-message-medium-cjk-title-font-size", + "ref": "var(--spectrum-title-cjk-size-l)", "desktop": { - "value": "6px" + "value": "18px" }, "mobile": { - "value": "8px" + "value": "19px" } }, - "meter-thickness-small": { - "prop": "--spectrum-meter-thickness-small", + "illustrated-message-medium-title-font-size": { + "prop": "--spectrum-illustrated-message-medium-title-font-size", + "ref": "var(--spectrum-title-size-l)", "desktop": { - "value": "4px" + "value": "20px" }, "mobile": { - "value": "5px" + "value": "22px" } }, - "meter-width": { - "prop": "--spectrum-meter-width", + "illustrated-message-small-body-font-size": { + "prop": "--spectrum-illustrated-message-small-body-font-size", + "ref": "var(--spectrum-body-size-xs)", "desktop": { - "value": "192px" + "value": "12px" }, "mobile": { - "value": "240px" + "value": "15px" } }, - "navigational-indicator-top-to-back-icon-extra-large": { - "prop": "--spectrum-navigational-indicator-top-to-back-icon-extra-large", + "illustrated-message-small-cjk-title-font-size": { + "prop": "--spectrum-illustrated-message-small-cjk-title-font-size", + "ref": "var(--spectrum-title-cjk-size-s)", "desktop": { - "value": "15px" + "value": "14px" }, "mobile": { - "value": "19px" + "value": "15px" } }, - "navigational-indicator-top-to-back-icon-large": { - "prop": "--spectrum-navigational-indicator-top-to-back-icon-large", + "illustrated-message-small-title-font-size": { + "prop": "--spectrum-illustrated-message-small-title-font-size", + "ref": "var(--spectrum-title-size-s)", "desktop": { - "value": "12px" + "value": "16px" }, "mobile": { - "value": "16px" + "value": "17px" } }, - "navigational-indicator-top-to-back-icon-medium": { - "prop": "--spectrum-navigational-indicator-top-to-back-icon-medium", + "illustrated-message-title-size": { + "prop": "--spectrum-illustrated-message-title-size", + "ref": "var(--spectrum-title-size-xl)", "desktop": { - "value": "9px" + "value": "22px" }, "mobile": { - "value": "12px" + "value": "24px" } }, - "navigational-indicator-top-to-back-icon-small": { - "prop": "--spectrum-navigational-indicator-top-to-back-icon-small", + "illustrated-message-vertical-maximum-width": { + "prop": "--spectrum-illustrated-message-vertical-maximum-width", + "value": "380px" + }, + "in-field-button-edge-to-disclosure-icon-stacked-extra-large": { + "prop": "--spectrum-in-field-button-edge-to-disclosure-icon-stacked-extra-large", + "value": "16px" + }, + "in-field-button-edge-to-disclosure-icon-stacked-large": { + "prop": "--spectrum-in-field-button-edge-to-disclosure-icon-stacked-large", + "value": "13px" + }, + "in-field-button-edge-to-disclosure-icon-stacked-medium": { + "prop": "--spectrum-in-field-button-edge-to-disclosure-icon-stacked-medium", + "value": "9px" + }, + "in-field-button-edge-to-disclosure-icon-stacked-small": { + "prop": "--spectrum-in-field-button-edge-to-disclosure-icon-stacked-small", + "value": "7px" + }, + "in-field-button-edge-to-fill": { + "prop": "--spectrum-in-field-button-edge-to-fill", + "value": "0px" + }, + "in-field-button-edge-to-fill-extra-large": { + "prop": "--spectrum-in-field-button-edge-to-fill-extra-large", "desktop": { - "value": "6px" + "value": "8px" }, "mobile": { - "value": "7px" + "value": "10px" } }, - "negative-background-color-default": { - "prop": "--spectrum-negative-background-color-default", - "ref": "var(--spectrum-negative-color-800)", - "light": { - "value": "rgb(215, 50, 32)" - }, - "dark": { - "value": "rgb(223, 52, 34)" - } + "in-field-button-edge-to-fill-large": { + "prop": "--spectrum-in-field-button-edge-to-fill-large", + "value": "8px" }, - "negative-background-color-down": { - "prop": "--spectrum-negative-background-color-down", - "ref": "var(--spectrum-negative-color-700)", - "light": { - "value": "rgb(183, 40, 24)" - }, - "dark": { - "value": "rgb(205, 46, 29)" - } + "in-field-button-edge-to-fill-medium": { + "prop": "--spectrum-in-field-button-edge-to-fill-medium", + "value": "6px" }, - "negative-background-color-hover": { - "prop": "--spectrum-negative-background-color-hover", - "ref": "var(--spectrum-negative-color-700)", - "light": { - "value": "rgb(183, 40, 24)" + "in-field-button-edge-to-fill-small": { + "prop": "--spectrum-in-field-button-edge-to-fill-small", + "desktop": { + "value": "4px" }, - "dark": { - "value": "rgb(205, 46, 29)" + "mobile": { + "value": "5px" } }, - "negative-background-color-key-focus": { - "prop": "--spectrum-negative-background-color-key-focus", - "ref": "var(--spectrum-negative-color-700)", - "light": { - "value": "rgb(183, 40, 24)" - }, - "dark": { - "value": "rgb(205, 46, 29)" - } + "in-field-button-fill-stacked-inner-border-rounding": { + "prop": "--spectrum-in-field-button-fill-stacked-inner-border-rounding", + "value": "0px" }, - "negative-border-color-default": { - "prop": "--spectrum-negative-border-color-default", - "ref": "var(--spectrum-negative-color-900)", - "light": { - "value": "rgb(215, 50, 32)" - }, - "dark": { - "value": "rgb(252, 67, 46)" + "in-field-button-inner-edge-to-disclosure-icon-stacked-extra-large": { + "prop": "--spectrum-in-field-button-inner-edge-to-disclosure-icon-stacked-extra-large", + "ref": "var(--spectrum-in-field-button-outer-edge-to-disclosure-icon-stacked-extra-large)", + "value": "5px" + }, + "in-field-button-inner-edge-to-disclosure-icon-stacked-large": { + "prop": "--spectrum-in-field-button-inner-edge-to-disclosure-icon-stacked-large", + "ref": "var(--spectrum-in-field-button-outer-edge-to-disclosure-icon-stacked-large)", + "value": "4px" + }, + "in-field-button-inner-edge-to-disclosure-icon-stacked-medium": { + "prop": "--spectrum-in-field-button-inner-edge-to-disclosure-icon-stacked-medium", + "ref": "var(--spectrum-in-field-button-outer-edge-to-disclosure-icon-stacked-medium)", + "value": "3px" + }, + "in-field-button-inner-edge-to-disclosure-icon-stacked-small": { + "prop": "--spectrum-in-field-button-inner-edge-to-disclosure-icon-stacked-small", + "ref": "var(--spectrum-in-field-button-outer-edge-to-disclosure-icon-stacked-small)", + "value": "3px" + }, + "in-field-button-outer-edge-to-disclosure-icon-stacked-extra-large": { + "prop": "--spectrum-in-field-button-outer-edge-to-disclosure-icon-stacked-extra-large", + "value": "5px" + }, + "in-field-button-outer-edge-to-disclosure-icon-stacked-large": { + "prop": "--spectrum-in-field-button-outer-edge-to-disclosure-icon-stacked-large", + "value": "4px" + }, + "in-field-button-outer-edge-to-disclosure-icon-stacked-medium": { + "prop": "--spectrum-in-field-button-outer-edge-to-disclosure-icon-stacked-medium", + "value": "3px" + }, + "in-field-button-outer-edge-to-disclosure-icon-stacked-small": { + "prop": "--spectrum-in-field-button-outer-edge-to-disclosure-icon-stacked-small", + "value": "3px" + }, + "in-field-button-stacked-inner-edge-to-fill": { + "prop": "--spectrum-in-field-button-stacked-inner-edge-to-fill", + "value": "0px" + }, + "in-field-button-width-stacked-extra-large": { + "prop": "--spectrum-in-field-button-width-stacked-extra-large", + "value": "44px" + }, + "in-field-button-width-stacked-large": { + "prop": "--spectrum-in-field-button-width-stacked-large", + "value": "36px" + }, + "in-field-button-width-stacked-medium": { + "prop": "--spectrum-in-field-button-width-stacked-medium", + "value": "28px" + }, + "in-field-button-width-stacked-small": { + "prop": "--spectrum-in-field-button-width-stacked-small", + "value": "20px" + }, + "in-field-progress-circle-edge-to-fill": { + "prop": "--spectrum-in-field-progress-circle-edge-to-fill", + "desktop": { + "value": "1px" + }, + "mobile": { + "value": "2px" } }, - "negative-border-color-down": { - "prop": "--spectrum-negative-border-color-down", - "ref": "var(--spectrum-negative-color-1100)", - "light": { - "value": "rgb(156, 33, 19)" + "in-field-progress-circle-size-100": { + "prop": "--spectrum-in-field-progress-circle-size-100", + "desktop": { + "value": "20px" }, - "dark": { - "value": "rgb(255, 134, 120)" + "mobile": { + "value": "24px" } }, - "negative-border-color-focus": { - "prop": "--spectrum-negative-border-color-focus", - "ref": "var(--spectrum-negative-color-1000)", - "light": { - "value": "rgb(183, 40, 24)" + "in-field-progress-circle-size-200": { + "prop": "--spectrum-in-field-progress-circle-size-200", + "desktop": { + "value": "22px" }, - "dark": { - "value": "rgb(255, 103, 86)" + "mobile": { + "value": "28px" } }, - "negative-border-color-focus-hover": { - "prop": "--spectrum-negative-border-color-focus-hover", - "ref": "var(--spectrum-negative-border-color-down)", - "light": { - "value": "rgb(156, 33, 19)" + "in-field-progress-circle-size-300": { + "prop": "--spectrum-in-field-progress-circle-size-300", + "desktop": { + "value": "26px" }, - "dark": { - "value": "rgb(255, 134, 120)" + "mobile": { + "value": "30px" } }, - "negative-border-color-hover": { - "prop": "--spectrum-negative-border-color-hover", - "ref": "var(--spectrum-negative-color-1000)", - "light": { - "value": "rgb(183, 40, 24)" + "in-field-progress-circle-size-75": { + "prop": "--spectrum-in-field-progress-circle-size-75", + "desktop": { + "value": "16px" }, - "dark": { - "value": "rgb(255, 103, 86)" + "mobile": { + "value": "18px" } }, - "negative-border-color-key-focus": { - "prop": "--spectrum-negative-border-color-key-focus", - "ref": "var(--spectrum-negative-color-1000)", - "light": { - "value": "rgb(183, 40, 24)" + "in-field-stepper-to-end-extra-large": { + "prop": "--spectrum-in-field-stepper-to-end-extra-large", + "desktop": { + "value": "4px" }, - "dark": { - "value": "rgb(255, 103, 86)" + "mobile": { + "value": "5px" } }, - "negative-color-100": { - "prop": "--spectrum-negative-color-100", - "ref": "var(--spectrum-red-100)", + "in-field-stepper-to-end-large": { + "prop": "--spectrum-in-field-stepper-to-end-large", + "value": "4px" + }, + "in-field-stepper-to-end-medium": { + "prop": "--spectrum-in-field-stepper-to-end-medium", + "value": "3px" + }, + "in-field-stepper-to-end-small": { + "prop": "--spectrum-in-field-stepper-to-end-small", + "desktop": { + "value": "0px" + }, + "mobile": { + "value": "3px" + } + }, + "in-line-alert-minimum-width": { + "prop": "--spectrum-in-line-alert-minimum-width", + "value": "240px" + }, + "indigo-100": { + "prop": "--spectrum-indigo-100", "light": { - "value": "rgb(255, 246, 245)" + "value": "rgb(247, 248, 255)" }, "dark": { - "value": "rgb(54, 10, 3)" + "value": "rgb(30, 0, 93)" } }, - "negative-color-1000": { - "prop": "--spectrum-negative-color-1000", - "ref": "var(--spectrum-red-1000)", + "indigo-1000": { + "prop": "--spectrum-indigo-1000", "light": { - "value": "rgb(183, 40, 24)" + "value": "rgb(99, 56, 238)" }, "dark": { - "value": "rgb(255, 103, 86)" + "value": "rgb(139, 141, 254)" } }, - "negative-color-1100": { - "prop": "--spectrum-negative-color-1100", - "ref": "var(--spectrum-red-1100)", + "indigo-1100": { + "prop": "--spectrum-indigo-1100", "light": { - "value": "rgb(156, 33, 19)" + "value": "rgb(84, 36, 219)" }, "dark": { - "value": "rgb(255, 134, 120)" + "value": "rgb(153, 161, 255)" } }, - "negative-color-1200": { - "prop": "--spectrum-negative-color-1200", - "ref": "var(--spectrum-red-1200)", + "indigo-1200": { + "prop": "--spectrum-indigo-1200", "light": { - "value": "rgb(129, 27, 14)" + "value": "rgb(69, 19, 191)" }, "dark": { - "value": "rgb(255, 167, 157)" + "value": "rgb(176, 186, 255)" } }, - "negative-color-1300": { - "prop": "--spectrum-negative-color-1300", - "ref": "var(--spectrum-red-1300)", + "indigo-1300": { + "prop": "--spectrum-indigo-1300", "light": { - "value": "rgb(104, 21, 10)" + "value": "rgb(55, 6, 160)" }, "dark": { - "value": "rgb(255, 196, 189)" + "value": "rgb(199, 208, 255)" } }, - "negative-color-1400": { - "prop": "--spectrum-negative-color-1400", - "ref": "var(--spectrum-red-1400)", + "indigo-1400": { + "prop": "--spectrum-indigo-1400", "light": { - "value": "rgb(80, 16, 6)" + "value": "rgb(42, 0, 129)" }, "dark": { - "value": "rgb(255, 222, 219)" + "value": "rgb(223, 228, 255)" } }, - "negative-color-1500": { - "prop": "--spectrum-negative-color-1500", - "ref": "var(--spectrum-red-1500)", + "indigo-1500": { + "prop": "--spectrum-indigo-1500", "dark": { - "value": "rgb(255, 242, 240)" + "value": "rgb(243, 244, 255)" }, "light": { - "value": "rgb(59, 11, 4)" + "value": "rgb(31, 0, 98)" } }, - "negative-color-1600": { - "prop": "--spectrum-negative-color-1600", - "ref": "var(--spectrum-red-1600)", + "indigo-1600": { + "prop": "--spectrum-indigo-1600", "dark": { "value": "rgb(255, 255, 255)" }, "light": { - "value": "rgb(29, 5, 2)" + "value": "rgb(17, 0, 54)" } }, - "negative-color-200": { - "prop": "--spectrum-negative-color-200", - "ref": "var(--spectrum-red-200)", + "indigo-200": { + "prop": "--spectrum-indigo-200", "light": { - "value": "rgb(255, 235, 232)" + "value": "rgb(235, 238, 255)" }, "dark": { - "value": "rgb(68, 13, 5)" + "value": "rgb(35, 0, 110)" } }, - "negative-color-300": { - "prop": "--spectrum-negative-color-300", - "ref": "var(--spectrum-red-300)", + "indigo-300": { + "prop": "--spectrum-indigo-300", "light": { - "value": "rgb(255, 214, 209)" + "value": "rgb(216, 222, 255)" }, "dark": { - "value": "rgb(87, 17, 7)" + "value": "rgb(47, 0, 140)" } }, - "negative-color-400": { - "prop": "--spectrum-negative-color-400", - "ref": "var(--spectrum-red-400)", + "indigo-400": { + "prop": "--spectrum-indigo-400", "light": { - "value": "rgb(255, 188, 180)" + "value": "rgb(192, 201, 255)" }, "dark": { - "value": "rgb(115, 24, 11)" + "value": "rgb(62, 12, 174)" } }, - "negative-color-500": { - "prop": "--spectrum-negative-color-500", - "ref": "var(--spectrum-red-500)", + "indigo-500": { + "prop": "--spectrum-indigo-500", "light": { - "value": "rgb(255, 157, 145)" + "value": "rgb(167, 178, 255)" }, "dark": { - "value": "rgb(147, 31, 17)" + "value": "rgb(79, 30, 209)" } }, - "negative-color-600": { - "prop": "--spectrum-negative-color-600", - "ref": "var(--spectrum-red-600)", + "indigo-600": { + "prop": "--spectrum-indigo-600", "light": { - "value": "rgb(255, 118, 101)" + "value": "rgb(145, 151, 254)" }, "dark": { - "value": "rgb(177, 38, 23)" + "value": "rgb(95, 52, 235)" } }, - "negative-color-700": { - "prop": "--spectrum-negative-color-700", - "ref": "var(--spectrum-red-700)", + "indigo-700": { + "prop": "--spectrum-indigo-700", "light": { - "value": "rgb(255, 81, 61)" + "value": "rgb(132, 128, 254)" }, "dark": { - "value": "rgb(205, 46, 29)" + "value": "rgb(109, 75, 248)" } }, - "negative-color-800": { - "prop": "--spectrum-negative-color-800", - "ref": "var(--spectrum-red-800)", + "indigo-800": { + "prop": "--spectrum-indigo-800", "light": { - "value": "rgb(240, 56, 35)" + "value": "rgb(122, 106, 253)" }, "dark": { - "value": "rgb(223, 52, 34)" + "value": "rgb(116, 91, 252)" } }, - "negative-color-900": { - "prop": "--spectrum-negative-color-900", - "ref": "var(--spectrum-red-900)", + "indigo-900": { + "prop": "--spectrum-indigo-900", "light": { - "value": "rgb(215, 50, 32)" + "value": "rgb(113, 85, 250)" }, "dark": { - "value": "rgb(252, 67, 46)" + "value": "rgb(128, 119, 254)" } }, - "negative-content-color-default": { - "prop": "--spectrum-negative-content-color-default", - "ref": "var(--spectrum-negative-color-900)", + "indigo-background-color-default": { + "prop": "--spectrum-indigo-background-color-default", + "ref": "var(--spectrum-indigo-800)", "light": { - "value": "rgb(215, 50, 32)" + "value": "rgb(113, 85, 250)" }, "dark": { - "value": "rgb(252, 67, 46)" + "value": "rgb(116, 91, 252)" } }, - "negative-content-color-down": { - "prop": "--spectrum-negative-content-color-down", - "ref": "var(--spectrum-negative-color-1000)", + "indigo-subtle-background-color-default": { + "prop": "--spectrum-indigo-subtle-background-color-default", + "ref": "var(--spectrum-indigo-300)", "light": { - "value": "rgb(183, 40, 24)" + "value": "rgb(235, 238, 255)" }, "dark": { - "value": "rgb(255, 103, 86)" + "value": "rgb(47, 0, 140)" } }, - "negative-content-color-hover": { - "prop": "--spectrum-negative-content-color-hover", - "ref": "var(--spectrum-negative-color-1000)", + "indigo-visual-color": { + "prop": "--spectrum-indigo-visual-color", + "ref": "var(--spectrum-indigo-900)", "light": { - "value": "rgb(183, 40, 24)" + "value": "rgb(122, 106, 253)" }, "dark": { - "value": "rgb(255, 103, 86)" + "value": "rgb(128, 119, 254)" } }, - "negative-content-color-key-focus": { - "prop": "--spectrum-negative-content-color-key-focus", - "ref": "var(--spectrum-negative-color-1000)", + "informative-background-color-default": { + "prop": "--spectrum-informative-background-color-default", + "ref": "var(--spectrum-informative-color-800)", "light": { - "value": "rgb(183, 40, 24)" + "value": "rgb(59, 99, 251)" }, "dark": { - "value": "rgb(255, 103, 86)" + "value": "rgb(64, 105, 253)" } }, - "negative-subdued-background-color-default": { - "prop": "--spectrum-negative-subdued-background-color-default", - "ref": "var(--spectrum-negative-color-300)", + "informative-background-color-down": { + "prop": "--spectrum-informative-background-color-down", + "ref": "var(--spectrum-informative-color-700)", "light": { - "value": "rgb(255, 235, 232)" + "value": "rgb(39, 77, 234)" }, "dark": { - "value": "rgb(87, 17, 7)" + "value": "rgb(52, 91, 248)" } }, - "negative-subdued-background-color-down": { - "prop": "--spectrum-negative-subdued-background-color-down", - "ref": "var(--spectrum-negative-color-300)", + "informative-background-color-hover": { + "prop": "--spectrum-informative-background-color-hover", + "ref": "var(--spectrum-informative-color-700)", "light": { - "value": "rgb(255, 214, 209)" + "value": "rgb(39, 77, 234)" }, "dark": { - "value": "rgb(87, 17, 7)" + "value": "rgb(52, 91, 248)" } }, - "negative-subdued-background-color-hover": { - "prop": "--spectrum-negative-subdued-background-color-hover", - "ref": "var(--spectrum-negative-color-300)", + "informative-background-color-key-focus": { + "prop": "--spectrum-informative-background-color-key-focus", + "ref": "var(--spectrum-informative-color-700)", "light": { - "value": "rgb(255, 214, 209)" + "value": "rgb(39, 77, 234)" }, "dark": { - "value": "rgb(87, 17, 7)" + "value": "rgb(52, 91, 248)" } }, - "negative-subdued-background-color-key-focus": { - "prop": "--spectrum-negative-subdued-background-color-key-focus", - "ref": "var(--spectrum-negative-color-300)", + "informative-color-100": { + "prop": "--spectrum-informative-color-100", + "ref": "var(--spectrum-blue-100)", "light": { - "value": "rgb(255, 214, 209)" + "value": "rgb(245, 249, 255)" }, "dark": { - "value": "rgb(87, 17, 7)" + "value": "rgb(14, 23, 63)" } }, - "negative-subtle-background-color-default": { - "prop": "--spectrum-negative-subtle-background-color-default", - "ref": "var(--spectrum-negative-color-300)", + "informative-color-1000": { + "prop": "--spectrum-informative-color-1000", + "ref": "var(--spectrum-blue-1000)", "light": { - "value": "rgb(255, 235, 232)" + "value": "rgb(39, 77, 234)" }, "dark": { - "value": "rgb(87, 17, 7)" + "value": "rgb(105, 149, 254)" } }, - "negative-visual-color": { - "prop": "--spectrum-negative-visual-color", - "ref": "var(--spectrum-negative-color-900)", + "informative-color-1100": { + "prop": "--spectrum-informative-color-1100", + "ref": "var(--spectrum-blue-1100)", "light": { - "value": "rgb(240, 56, 35)" + "value": "rgb(29, 62, 207)" }, "dark": { - "value": "rgb(252, 67, 46)" + "value": "rgb(124, 169, 252)" } }, - "neutral-background-color-default": { - "prop": "--spectrum-neutral-background-color-default", - "ref": "var(--spectrum-gray-800)", + "informative-color-1200": { + "prop": "--spectrum-informative-color-1200", + "ref": "var(--spectrum-blue-1200)", "light": { - "value": "rgb(41, 41, 41)" + "value": "rgb(21, 50, 173)" }, "dark": { - "value": "rgb(219, 219, 219)" + "value": "rgb(152, 192, 252)" } }, - "neutral-background-color-down": { - "prop": "--spectrum-neutral-background-color-down", - "ref": "var(--spectrum-gray-900)", + "informative-color-1300": { + "prop": "--spectrum-informative-color-1300", + "ref": "var(--spectrum-blue-1300)", "light": { - "value": "rgb(19, 19, 19)" + "value": "rgb(16, 40, 140)" }, "dark": { - "value": "rgb(242, 242, 242)" + "value": "rgb(181, 213, 253)" } }, - "neutral-background-color-hover": { - "prop": "--spectrum-neutral-background-color-hover", - "ref": "var(--spectrum-gray-900)", + "informative-color-1400": { + "prop": "--spectrum-informative-color-1400", + "ref": "var(--spectrum-blue-1400)", "light": { - "value": "rgb(19, 19, 19)" + "value": "rgb(12, 31, 105)" }, "dark": { - "value": "rgb(242, 242, 242)" + "value": "rgb(213, 231, 254)" } }, - "neutral-background-color-key-focus": { - "prop": "--spectrum-neutral-background-color-key-focus", - "ref": "var(--spectrum-gray-900)", - "light": { - "value": "rgb(19, 19, 19)" + "informative-color-1500": { + "prop": "--spectrum-informative-color-1500", + "ref": "var(--spectrum-blue-1500)", + "dark": { + "value": "rgb(238, 245, 255)" }, + "light": { + "value": "rgb(14, 24, 67)" + } + }, + "informative-color-1600": { + "prop": "--spectrum-informative-color-1600", + "ref": "var(--spectrum-blue-1600)", "dark": { - "value": "rgb(242, 242, 242)" + "value": "rgb(255, 255, 255)" + }, + "light": { + "value": "rgb(7, 11, 30)" } }, - "neutral-background-color-selected-default": { - "prop": "--spectrum-neutral-background-color-selected-default", - "ref": "var(--spectrum-gray-800)", + "informative-color-200": { + "prop": "--spectrum-informative-color-200", + "ref": "var(--spectrum-blue-200)", "light": { - "value": "rgb(41, 41, 41)" + "value": "rgb(229, 240, 254)" }, "dark": { - "value": "rgb(219, 219, 219)" + "value": "rgb(15, 28, 82)" } }, - "neutral-background-color-selected-down": { - "prop": "--spectrum-neutral-background-color-selected-down", - "ref": "var(--spectrum-gray-900)", + "informative-color-300": { + "prop": "--spectrum-informative-color-300", + "ref": "var(--spectrum-blue-300)", "light": { - "value": "rgb(19, 19, 19)" + "value": "rgb(203, 226, 254)" }, "dark": { - "value": "rgb(242, 242, 242)" + "value": "rgb(12, 33, 117)" } }, - "neutral-background-color-selected-hover": { - "prop": "--spectrum-neutral-background-color-selected-hover", - "ref": "var(--spectrum-gray-900)", + "informative-color-400": { + "prop": "--spectrum-informative-color-400", + "ref": "var(--spectrum-blue-400)", "light": { - "value": "rgb(19, 19, 19)" + "value": "rgb(172, 207, 253)" }, "dark": { - "value": "rgb(242, 242, 242)" + "value": "rgb(18, 45, 154)" } }, - "neutral-background-color-selected-key-focus": { - "prop": "--spectrum-neutral-background-color-selected-key-focus", - "ref": "var(--spectrum-gray-900)", + "informative-color-500": { + "prop": "--spectrum-informative-color-500", + "ref": "var(--spectrum-blue-500)", "light": { - "value": "rgb(19, 19, 19)" + "value": "rgb(142, 185, 252)" }, "dark": { - "value": "rgb(242, 242, 242)" + "value": "rgb(26, 58, 195)" } }, - "neutral-content-color-default": { - "prop": "--spectrum-neutral-content-color-default", - "ref": "var(--spectrum-gray-800)", + "informative-color-600": { + "prop": "--spectrum-informative-color-600", + "ref": "var(--spectrum-blue-600)", "light": { - "value": "rgb(41, 41, 41)" + "value": "rgb(114, 158, 253)" }, "dark": { - "value": "rgb(219, 219, 219)" + "value": "rgb(37, 73, 229)" } }, - "neutral-content-color-down": { - "prop": "--spectrum-neutral-content-color-down", - "ref": "var(--spectrum-gray-900)", + "informative-color-700": { + "prop": "--spectrum-informative-color-700", + "ref": "var(--spectrum-blue-700)", "light": { - "value": "rgb(19, 19, 19)" + "value": "rgb(93, 137, 255)" }, "dark": { - "value": "rgb(242, 242, 242)" + "value": "rgb(52, 91, 248)" } }, - "neutral-content-color-focus": { - "prop": "--spectrum-neutral-content-color-focus", - "ref": "var(--spectrum-neutral-content-color-down)", + "informative-color-800": { + "prop": "--spectrum-informative-color-800", + "ref": "var(--spectrum-blue-800)", "light": { - "value": "rgb(19, 19, 19)" + "value": "rgb(75, 117, 255)" }, "dark": { - "value": "rgb(242, 242, 242)" + "value": "rgb(64, 105, 253)" } }, - "neutral-content-color-focus-hover": { - "prop": "--spectrum-neutral-content-color-focus-hover", - "ref": "var(--spectrum-neutral-content-color-down)", + "informative-color-900": { + "prop": "--spectrum-informative-color-900", + "ref": "var(--spectrum-blue-900)", "light": { - "value": "rgb(19, 19, 19)" + "value": "rgb(59, 99, 251)" }, "dark": { - "value": "rgb(242, 242, 242)" + "value": "rgb(86, 129, 255)" } }, - "neutral-content-color-hover": { - "prop": "--spectrum-neutral-content-color-hover", - "ref": "var(--spectrum-gray-900)", + "informative-subtle-background-color-default": { + "prop": "--spectrum-informative-subtle-background-color-default", + "ref": "var(--spectrum-informative-color-300)", "light": { - "value": "rgb(19, 19, 19)" + "value": "rgb(229, 240, 254)" }, "dark": { - "value": "rgb(242, 242, 242)" + "value": "rgb(12, 33, 117)" } }, - "neutral-content-color-key-focus": { - "prop": "--spectrum-neutral-content-color-key-focus", - "ref": "var(--spectrum-gray-900)", + "informative-visual-color": { + "prop": "--spectrum-informative-visual-color", + "ref": "var(--spectrum-informative-color-900)", "light": { - "value": "rgb(19, 19, 19)" + "value": "rgb(75, 117, 255)" }, "dark": { - "value": "rgb(242, 242, 242)" + "value": "rgb(86, 129, 255)" } }, - "neutral-subdued-background-color-default": { - "prop": "--spectrum-neutral-subdued-background-color-default", - "ref": "var(--spectrum-gray-500)", - "light": { - "value": "rgb(80, 80, 80)" - }, - "dark": { - "value": "rgb(109, 109, 109)" - } + "italic-font-style": { + "prop": "--spectrum-italic-font-style", + "value": "italic" }, - "neutral-subdued-background-color-down": { - "prop": "--spectrum-neutral-subdued-background-color-down", - "ref": "var(--spectrum-gray-400)", - "light": { - "value": "rgb(41, 41, 41)" + "letter-spacing": { + "prop": "--spectrum-letter-spacing", + "value": "0em" + }, + "light-font-weight": { + "prop": "--spectrum-light-font-weight", + "value": "300" + }, + "line-height-100": { + "prop": "--spectrum-line-height-100", + "value": 1.3 + }, + "line-height-200": { + "prop": "--spectrum-line-height-200", + "value": 1.5 + }, + "link-out-icon-size-100": { + "prop": "--spectrum-link-out-icon-size-100", + "desktop": { + "value": "12px" }, - "dark": { - "value": "rgb(68, 68, 68)" + "mobile": { + "value": "14px" } }, - "neutral-subdued-background-color-hover": { - "prop": "--spectrum-neutral-subdued-background-color-hover", - "ref": "var(--spectrum-gray-400)", - "light": { - "value": "rgb(41, 41, 41)" + "link-out-icon-size-200": { + "prop": "--spectrum-link-out-icon-size-200", + "desktop": { + "value": "14px" }, - "dark": { - "value": "rgb(68, 68, 68)" + "mobile": { + "value": "16px" } }, - "neutral-subdued-background-color-key-focus": { - "prop": "--spectrum-neutral-subdued-background-color-key-focus", - "ref": "var(--spectrum-gray-400)", - "light": { - "value": "rgb(41, 41, 41)" + "link-out-icon-size-75": { + "prop": "--spectrum-link-out-icon-size-75", + "desktop": { + "value": "10px" }, - "dark": { - "value": "rgb(68, 68, 68)" + "mobile": { + "value": "12px" } }, - "neutral-subdued-content-color-default": { - "prop": "--spectrum-neutral-subdued-content-color-default", - "ref": "var(--spectrum-gray-700)", + "magenta-100": { + "prop": "--spectrum-magenta-100", "light": { - "value": "rgb(80, 80, 80)" + "value": "rgb(255, 245, 248)" }, "dark": { - "value": "rgb(175, 175, 175)" + "value": "rgb(59, 0, 22)" } }, - "neutral-subdued-content-color-down": { - "prop": "--spectrum-neutral-subdued-content-color-down", - "ref": "var(--spectrum-gray-800)", + "magenta-1000": { + "prop": "--spectrum-magenta-1000", "light": { - "value": "rgb(41, 41, 41)" + "value": "rgb(186, 22, 80)" }, "dark": { - "value": "rgb(219, 219, 219)" + "value": "rgb(255, 96, 149)" } }, - "neutral-subdued-content-color-hover": { - "prop": "--spectrum-neutral-subdued-content-color-hover", - "ref": "var(--spectrum-gray-800)", + "magenta-1100": { + "prop": "--spectrum-magenta-1100", "light": { - "value": "rgb(41, 41, 41)" + "value": "rgb(163, 5, 62)" }, "dark": { - "value": "rgb(219, 219, 219)" + "value": "rgb(255, 128, 171)" } }, - "neutral-subdued-content-color-key-focus": { - "prop": "--spectrum-neutral-subdued-content-color-key-focus", - "ref": "var(--spectrum-gray-800)", + "magenta-1200": { + "prop": "--spectrum-magenta-1200", "light": { - "value": "rgb(41, 41, 41)" + "value": "rgb(136, 0, 51)" }, "dark": { - "value": "rgb(219, 219, 219)" + "value": "rgb(255, 163, 194)" } }, - "neutral-subdued-content-color-selected": { - "prop": "--spectrum-neutral-subdued-content-color-selected", - "ref": "var(--spectrum-neutral-subdued-content-color-down)", + "magenta-1300": { + "prop": "--spectrum-magenta-1300", "light": { - "value": "rgb(41, 41, 41)" + "value": "rgb(111, 0, 40)" }, "dark": { - "value": "rgb(219, 219, 219)" + "value": "rgb(255, 193, 214)" } }, - "neutral-subtle-background-color-default": { - "prop": "--spectrum-neutral-subtle-background-color-default", - "ref": "var(--spectrum-gray-300)", + "magenta-1400": { + "prop": "--spectrum-magenta-1400", "light": { - "value": "rgb(233, 233, 233)" + "value": "rgb(86, 0, 30)" }, "dark": { - "value": "rgb(57, 57, 57)" + "value": "rgb(255, 220, 232)" } }, - "neutral-visual-color": { - "prop": "--spectrum-neutral-visual-color", - "ref": "var(--spectrum-gray-600)", - "light": { - "value": "rgb(143, 143, 143)" - }, + "magenta-1500": { + "prop": "--spectrum-magenta-1500", "dark": { - "value": "rgb(138, 138, 138)" + "value": "rgb(255, 241, 246)" + }, + "light": { + "value": "rgb(64, 0, 22)" } }, - "notice-background-color-default": { - "prop": "--spectrum-notice-background-color-default", - "ref": "var(--spectrum-notice-color-600)", + "magenta-1600": { + "prop": "--spectrum-magenta-1600", "dark": { - "value": "rgb(224, 100, 0)" + "value": "rgb(255, 255, 255)" }, "light": { - "value": "rgb(252, 125, 0)" + "value": "rgb(35, 0, 12)" } }, - "notice-color-100": { - "prop": "--spectrum-notice-color-100", - "ref": "var(--spectrum-orange-100)", + "magenta-200": { + "prop": "--spectrum-magenta-200", "light": { - "value": "rgb(255, 246, 231)" + "value": "rgb(255, 232, 240)" }, "dark": { - "value": "rgb(49, 16, 0)" + "value": "rgb(74, 0, 27)" } }, - "notice-color-1000": { - "prop": "--spectrum-notice-color-1000", - "ref": "var(--spectrum-orange-1000)", + "magenta-300": { + "prop": "--spectrum-magenta-300", "light": { - "value": "rgb(167, 62, 0)" + "value": "rgb(255, 213, 227)" }, "dark": { - "value": "rgb(243, 117, 0)" + "value": "rgb(93, 0, 34)" } }, - "notice-color-1100": { - "prop": "--spectrum-notice-color-1100", - "ref": "var(--spectrum-orange-1100)", + "magenta-400": { + "prop": "--spectrum-magenta-400", "light": { - "value": "rgb(144, 51, 0)" + "value": "rgb(255, 185, 208)" }, "dark": { - "value": "rgb(255, 137, 0)" + "value": "rgb(123, 0, 45)" } }, - "notice-color-1200": { - "prop": "--spectrum-notice-color-1200", - "ref": "var(--spectrum-orange-1200)", + "magenta-500": { + "prop": "--spectrum-magenta-500", "light": { - "value": "rgb(118, 41, 0)" + "value": "rgb(255, 152, 187)" }, "dark": { - "value": "rgb(255, 173, 45)" + "value": "rgb(152, 7, 60)" } }, - "notice-color-1300": { - "prop": "--spectrum-notice-color-1300", - "ref": "var(--spectrum-orange-1300)", + "magenta-600": { + "prop": "--spectrum-magenta-600", "light": { - "value": "rgb(95, 32, 0)" + "value": "rgb(255, 112, 159)" }, "dark": { - "value": "rgb(255, 201, 116)" + "value": "rgb(181, 19, 76)" } }, - "notice-color-1400": { - "prop": "--spectrum-notice-color-1400", - "ref": "var(--spectrum-orange-1400)", + "magenta-700": { + "prop": "--spectrum-magenta-700", "light": { - "value": "rgb(73, 24, 0)" + "value": "rgb(255, 72, 133)" }, "dark": { - "value": "rgb(255, 225, 178)" + "value": "rgb(207, 31, 92)" } }, - "notice-color-1500": { - "prop": "--spectrum-notice-color-1500", - "ref": "var(--spectrum-orange-1500)", - "dark": { - "value": "rgb(255, 243, 225)" - }, + "magenta-800": { + "prop": "--spectrum-magenta-800", "light": { - "value": "rgb(52, 18, 0)" - } - }, - "notice-color-1600": { - "prop": "--spectrum-notice-color-1600", - "ref": "var(--spectrum-orange-1600)", - "dark": { - "value": "rgb(255, 255, 255)" + "value": "rgb(240, 45, 110)" }, - "light": { - "value": "rgb(25, 8, 0)" + "dark": { + "value": "rgb(224, 38, 101)" } }, - "notice-color-200": { - "prop": "--spectrum-notice-color-200", - "ref": "var(--spectrum-orange-200)", + "magenta-900": { + "prop": "--spectrum-magenta-900", "light": { - "value": "rgb(255, 236, 207)" + "value": "rgb(217, 35, 97)" }, "dark": { - "value": "rgb(61, 21, 0)" + "value": "rgb(255, 51, 119)" } }, - "notice-color-300": { - "prop": "--spectrum-notice-color-300", - "ref": "var(--spectrum-orange-300)", + "magenta-background-color-default": { + "prop": "--spectrum-magenta-background-color-default", + "ref": "var(--spectrum-magenta-800)", "light": { - "value": "rgb(255, 218, 158)" + "value": "rgb(217, 35, 97)" }, "dark": { - "value": "rgb(80, 27, 0)" + "value": "rgb(224, 38, 101)" } }, - "notice-color-400": { - "prop": "--spectrum-notice-color-400", - "ref": "var(--spectrum-orange-400)", + "magenta-subtle-background-color-default": { + "prop": "--spectrum-magenta-subtle-background-color-default", + "ref": "var(--spectrum-magenta-300)", "light": { - "value": "rgb(255, 193, 94)" + "value": "rgb(255, 232, 240)" }, "dark": { - "value": "rgb(106, 36, 0)" + "value": "rgb(93, 0, 34)" } }, - "notice-color-500": { - "prop": "--spectrum-notice-color-500", - "ref": "var(--spectrum-orange-500)", + "magenta-visual-color": { + "prop": "--spectrum-magenta-visual-color", + "ref": "var(--spectrum-magenta-900)", "light": { - "value": "rgb(255, 162, 19)" + "value": "rgb(240, 45, 110)" }, "dark": { - "value": "rgb(135, 47, 0)" + "value": "rgb(255, 51, 119)" } }, - "notice-color-600": { - "prop": "--spectrum-notice-color-600", - "ref": "var(--spectrum-orange-600)", + "medium-font-weight": { + "prop": "--spectrum-medium-font-weight", + "value": "500" + }, + "menu-item-background-color-default": { + "prop": "--spectrum-menu-item-background-color-default", + "ref": "var(--spectrum-gray-200)", "light": { - "value": "rgb(252, 125, 0)" + "value": "rgb(233, 233, 233)" }, "dark": { - "value": "rgb(162, 59, 0)" + "value": "rgb(50, 50, 50)" } }, - "notice-color-700": { - "prop": "--spectrum-notice-color-700", - "ref": "var(--spectrum-orange-700)", + "menu-item-background-color-disabled": { + "prop": "--spectrum-menu-item-background-color-disabled", + "ref": "var(--spectrum-gray-200)", "light": { - "value": "rgb(232, 106, 0)" + "value": "rgb(233, 233, 233)" }, "dark": { - "value": "rgb(185, 73, 0)" + "value": "rgb(50, 50, 50)" } }, - "notice-color-800": { - "prop": "--spectrum-notice-color-800", - "ref": "var(--spectrum-orange-800)", + "menu-item-background-color-down": { + "prop": "--spectrum-menu-item-background-color-down", + "ref": "var(--spectrum-gray-200)", "light": { - "value": "rgb(212, 91, 0)" + "value": "rgb(233, 233, 233)" }, "dark": { - "value": "rgb(199, 82, 0)" + "value": "rgb(50, 50, 50)" } }, - "notice-color-900": { - "prop": "--spectrum-notice-color-900", - "ref": "var(--spectrum-orange-900)", + "menu-item-background-color-hover": { + "prop": "--spectrum-menu-item-background-color-hover", + "ref": "var(--spectrum-gray-200)", "light": { - "value": "rgb(194, 78, 0)" + "value": "rgb(233, 233, 233)" }, "dark": { - "value": "rgb(224, 100, 0)" + "value": "rgb(50, 50, 50)" } }, - "notice-subtle-background-color-default": { - "prop": "--spectrum-notice-subtle-background-color-default", - "ref": "var(--spectrum-notice-color-300)", + "menu-item-background-color-keyboard-focus": { + "prop": "--spectrum-menu-item-background-color-keyboard-focus", + "ref": "var(--spectrum-gray-200)", "light": { - "value": "rgb(255, 236, 207)" + "value": "rgb(233, 233, 233)" }, "dark": { - "value": "rgb(80, 27, 0)" + "value": "rgb(50, 50, 50)" } }, - "notice-visual-color": { - "prop": "--spectrum-notice-visual-color", - "ref": "var(--spectrum-notice-color-900)", - "light": { - "value": "rgb(212, 91, 0)" + "menu-item-background-opacity": { + "prop": "--spectrum-menu-item-background-opacity", + "value": "0" + }, + "menu-item-edge-to-content-not-selected-extra-large": { + "prop": "--spectrum-menu-item-edge-to-content-not-selected-extra-large", + "desktop": { + "value": "45px" }, - "dark": { - "value": "rgb(224, 100, 0)" + "mobile": { + "value": "54px" } }, - "opacity-checkerboard-square-dark": { - "prop": "--spectrum-opacity-checkerboard-square-dark", - "ref": "var(--spectrum-gray-800)", - "light": { - "value": "rgb(225, 225, 225)" + "menu-item-edge-to-content-not-selected-large": { + "prop": "--spectrum-menu-item-edge-to-content-not-selected-large", + "desktop": { + "value": "38px" }, - "dark": { - "value": "rgb(219, 219, 219)" + "mobile": { + "value": "47px" } }, - "opacity-checkerboard-square-light": { - "prop": "--spectrum-opacity-checkerboard-square-light", - "ref": "var(--spectrum-white)", - "light": { - "value": "rgb(255, 255, 255)" + "menu-item-edge-to-content-not-selected-medium": { + "prop": "--spectrum-menu-item-edge-to-content-not-selected-medium", + "desktop": { + "value": "32px" }, - "dark": { - "value": "rgb(255, 255, 255)" + "mobile": { + "value": "42px" } }, - "opacity-checkerboard-square-size": { - "prop": "--spectrum-opacity-checkerboard-square-size", + "menu-item-edge-to-content-not-selected-small": { + "prop": "--spectrum-menu-item-edge-to-content-not-selected-small", "desktop": { - "value": "8px" + "value": "28px" }, "mobile": { - "value": "10px" + "value": "24px" } }, - "opacity-disabled": { - "prop": "--spectrum-opacity-disabled", - "value": "0.3" + "menu-item-label-to-description": { + "prop": "--spectrum-menu-item-label-to-description", + "ref": "var(--spectrum-menu-item-label-to-description-medium)", + "value": "1px" }, - "orange-100": { - "prop": "--spectrum-orange-100", - "light": { - "value": "rgb(255, 246, 231)" - }, - "dark": { - "value": "rgb(49, 16, 0)" - } + "menu-item-label-to-description-extra-large": { + "prop": "--spectrum-menu-item-label-to-description-extra-large", + "value": "2px" }, - "orange-1000": { - "prop": "--spectrum-orange-1000", - "light": { - "value": "rgb(167, 62, 0)" + "menu-item-label-to-description-large": { + "prop": "--spectrum-menu-item-label-to-description-large", + "value": "2px" + }, + "menu-item-label-to-description-medium": { + "prop": "--spectrum-menu-item-label-to-description-medium", + "value": "1px" + }, + "menu-item-label-to-description-small": { + "prop": "--spectrum-menu-item-label-to-description-small", + "value": "1px" + }, + "menu-item-section-divider-height": { + "prop": "--spectrum-menu-item-section-divider-height", + "value": "12px" + }, + "menu-item-top-to-disclosure-icon-extra-large": { + "prop": "--spectrum-menu-item-top-to-disclosure-icon-extra-large", + "desktop": { + "value": "17px" }, - "dark": { - "value": "rgb(243, 117, 0)" + "mobile": { + "value": "22px" } }, - "orange-1100": { - "prop": "--spectrum-orange-1100", - "light": { - "value": "rgb(144, 51, 0)" + "menu-item-top-to-disclosure-icon-large": { + "prop": "--spectrum-menu-item-top-to-disclosure-icon-large", + "desktop": { + "value": "14px" }, - "dark": { - "value": "rgb(255, 137, 0)" + "mobile": { + "value": "17px" } }, - "orange-1200": { - "prop": "--spectrum-orange-1200", - "light": { - "value": "rgb(118, 41, 0)" + "menu-item-top-to-disclosure-icon-medium": { + "prop": "--spectrum-menu-item-top-to-disclosure-icon-medium", + "desktop": { + "value": "11px" }, - "dark": { - "value": "rgb(255, 173, 45)" + "mobile": { + "value": "13px" } }, - "orange-1300": { - "prop": "--spectrum-orange-1300", - "light": { - "value": "rgb(95, 32, 0)" + "menu-item-top-to-disclosure-icon-small": { + "prop": "--spectrum-menu-item-top-to-disclosure-icon-small", + "desktop": { + "value": "7px" }, - "dark": { - "value": "rgb(255, 201, 116)" + "mobile": { + "value": "9px" } }, - "orange-1400": { - "prop": "--spectrum-orange-1400", - "light": { - "value": "rgb(73, 24, 0)" + "menu-item-top-to-selected-icon-extra-large": { + "prop": "--spectrum-menu-item-top-to-selected-icon-extra-large", + "desktop": { + "value": "17px" }, - "dark": { - "value": "rgb(255, 225, 178)" + "mobile": { + "value": "22px" } }, - "orange-1500": { - "prop": "--spectrum-orange-1500", - "dark": { - "value": "rgb(255, 243, 225)" + "menu-item-top-to-selected-icon-large": { + "prop": "--spectrum-menu-item-top-to-selected-icon-large", + "desktop": { + "value": "14px" }, - "light": { - "value": "rgb(52, 18, 0)" + "mobile": { + "value": "17px" } }, - "orange-1600": { - "prop": "--spectrum-orange-1600", - "dark": { - "value": "rgb(255, 255, 255)" + "menu-item-top-to-selected-icon-medium": { + "prop": "--spectrum-menu-item-top-to-selected-icon-medium", + "desktop": { + "value": "11px" }, - "light": { - "value": "rgb(25, 8, 0)" + "mobile": { + "value": "13px" } }, - "orange-200": { - "prop": "--spectrum-orange-200", - "light": { - "value": "rgb(255, 236, 207)" + "menu-item-top-to-selected-icon-small": { + "prop": "--spectrum-menu-item-top-to-selected-icon-small", + "desktop": { + "value": "7px" }, - "dark": { - "value": "rgb(61, 21, 0)" + "mobile": { + "value": "9px" } }, - "orange-300": { - "prop": "--spectrum-orange-300", - "light": { - "value": "rgb(255, 218, 158)" + "menu-item-top-to-thumbnail-extra-large": { + "prop": "--spectrum-menu-item-top-to-thumbnail-extra-large", + "desktop": { + "value": "11px" }, - "dark": { - "value": "rgb(80, 27, 0)" + "mobile": { + "value": "13px" } }, - "orange-400": { - "prop": "--spectrum-orange-400", - "light": { - "value": "rgb(255, 193, 94)" + "menu-item-top-to-thumbnail-large": { + "prop": "--spectrum-menu-item-top-to-thumbnail-large", + "desktop": { + "value": "10px" }, - "dark": { - "value": "rgb(106, 36, 0)" + "mobile": { + "value": "12px" } }, - "orange-500": { - "prop": "--spectrum-orange-500", - "light": { - "value": "rgb(255, 162, 19)" + "menu-item-top-to-thumbnail-medium": { + "prop": "--spectrum-menu-item-top-to-thumbnail-medium", + "desktop": { + "value": "9px" }, - "dark": { - "value": "rgb(135, 47, 0)" + "mobile": { + "value": "11px" } }, - "orange-600": { - "prop": "--spectrum-orange-600", - "light": { - "value": "rgb(252, 125, 0)" + "menu-item-top-to-thumbnail-small": { + "prop": "--spectrum-menu-item-top-to-thumbnail-small", + "desktop": { + "value": "8px" }, - "dark": { - "value": "rgb(162, 59, 0)" + "mobile": { + "value": "10px" } }, - "orange-700": { - "prop": "--spectrum-orange-700", - "light": { - "value": "rgb(232, 106, 0)" - }, - "dark": { - "value": "rgb(185, 73, 0)" - } - }, - "orange-800": { - "prop": "--spectrum-orange-800", - "light": { - "value": "rgb(212, 91, 0)" - }, - "dark": { - "value": "rgb(199, 82, 0)" - } - }, - "orange-900": { - "prop": "--spectrum-orange-900", - "light": { - "value": "rgb(194, 78, 0)" - }, - "dark": { - "value": "rgb(224, 100, 0)" - } - }, - "orange-background-color-default": { - "prop": "--spectrum-orange-background-color-default", - "ref": "var(--spectrum-orange-900)", - "light": { - "value": "rgb(252, 125, 0)" - }, - "dark": { - "value": "rgb(224, 100, 0)" - } + "menu-section-header-to-description-extra-large": { + "prop": "--spectrum-menu-section-header-to-description-extra-large", + "value": "2px" }, - "orange-subtle-background-color-default": { - "prop": "--spectrum-orange-subtle-background-color-default", - "ref": "var(--spectrum-orange-300)", - "light": { - "value": "rgb(255, 236, 207)" - }, - "dark": { - "value": "rgb(80, 27, 0)" - } + "menu-section-header-to-description-large": { + "prop": "--spectrum-menu-section-header-to-description-large", + "value": "2px" }, - "orange-visual-color": { - "prop": "--spectrum-orange-visual-color", - "ref": "var(--spectrum-orange-900)", - "light": { - "value": "rgb(232, 106, 0)" - }, - "dark": { - "value": "rgb(224, 100, 0)" - } + "menu-section-header-to-description-medium": { + "prop": "--spectrum-menu-section-header-to-description-medium", + "value": "1px" }, - "overlay-color": { - "prop": "--spectrum-overlay-color", - "ref": "var(--spectrum-black)", - "value": "rgb(0, 0, 0)" + "menu-section-header-to-description-small": { + "prop": "--spectrum-menu-section-header-to-description-small", + "value": "1px" }, - "overlay-opacity": { - "prop": "--spectrum-overlay-opacity", - "light": { - "value": "0.4" + "meter-default-width": { + "prop": "--spectrum-meter-default-width", + "ref": "var(--spectrum-meter-width)", + "desktop": { + "value": "192px" }, - "dark": { - "value": "0.6" + "mobile": { + "value": "240px" } }, - "picker-border-width": { - "prop": "--spectrum-picker-border-width", - "ref": "var(--spectrum-border-width-100)", - "value": "1px" - }, - "picker-end-edge-to-disclosure-icon-quiet": { - "prop": "--spectrum-picker-end-edge-to-disclosure-icon-quiet", - "value": "0px" - }, - "picker-end-edge-to-disclousure-icon-quiet": { - "prop": "--spectrum-picker-end-edge-to-disclousure-icon-quiet", - "ref": "var(--spectrum-picker-end-edge-to-disclosure-icon-quiet)", - "value": "0px" + "meter-maximum-width": { + "prop": "--spectrum-meter-maximum-width", + "value": "768px" }, - "picker-minimum-width-multiplier": { - "prop": "--spectrum-picker-minimum-width-multiplier", - "value": "2" + "meter-minimum-width": { + "prop": "--spectrum-meter-minimum-width", + "value": "48px" }, - "picker-visual-to-disclosure-icon-extra-large": { - "prop": "--spectrum-picker-visual-to-disclosure-icon-extra-large", + "meter-thickness-extra-large": { + "prop": "--spectrum-meter-thickness-extra-large", "desktop": { "value": "10px" }, @@ -8537,1185 +9581,3592 @@ "value": "13px" } }, - "picker-visual-to-disclosure-icon-large": { - "prop": "--spectrum-picker-visual-to-disclosure-icon-large", + "meter-thickness-large": { + "prop": "--spectrum-meter-thickness-large", "desktop": { - "value": "9px" + "value": "8px" }, "mobile": { - "value": "11px" + "value": "10px" } }, - "picker-visual-to-disclosure-icon-medium": { - "prop": "--spectrum-picker-visual-to-disclosure-icon-medium", + "meter-thickness-medium": { + "prop": "--spectrum-meter-thickness-medium", "desktop": { - "value": "8px" + "value": "6px" }, "mobile": { - "value": "10px" + "value": "8px" } }, - "picker-visual-to-disclosure-icon-small": { - "prop": "--spectrum-picker-visual-to-disclosure-icon-small", + "meter-thickness-small": { + "prop": "--spectrum-meter-thickness-small", "desktop": { - "value": "7px" + "value": "4px" }, "mobile": { - "value": "9px" + "value": "5px" } }, - "pink-100": { - "prop": "--spectrum-pink-100", - "dark": { - "value": "rgb(58, 0, 37)" + "meter-width": { + "prop": "--spectrum-meter-width", + "desktop": { + "value": "192px" }, - "light": { - "value": "rgb(255, 246, 252)" + "mobile": { + "value": "240px" } }, - "pink-1000": { - "prop": "--spectrum-pink-1000", - "dark": { - "value": "rgb(251, 90, 196)" + "navigational-indicator-top-to-back-icon-extra-large": { + "prop": "--spectrum-navigational-indicator-top-to-back-icon-extra-large", + "desktop": { + "value": "15px" }, - "light": { - "value": "rgb(176, 31, 123)" + "mobile": { + "value": "19px" } }, - "pink-1100": { - "prop": "--spectrum-pink-1100", - "dark": { - "value": "rgb(255, 122, 210)" + "navigational-indicator-top-to-back-icon-large": { + "prop": "--spectrum-navigational-indicator-top-to-back-icon-large", + "desktop": { + "value": "12px" }, - "light": { - "value": "rgb(152, 22, 104)" + "mobile": { + "value": "16px" } }, - "pink-1200": { - "prop": "--spectrum-pink-1200", - "dark": { - "value": "rgb(255, 159, 223)" + "navigational-indicator-top-to-back-icon-medium": { + "prop": "--spectrum-navigational-indicator-top-to-back-icon-medium", + "desktop": { + "value": "9px" }, - "light": { - "value": "rgb(128, 12, 85)" + "mobile": { + "value": "12px" } }, - "pink-1300": { - "prop": "--spectrum-pink-1300", - "dark": { - "value": "rgb(255, 191, 234)" + "navigational-indicator-top-to-back-icon-small": { + "prop": "--spectrum-navigational-indicator-top-to-back-icon-small", + "desktop": { + "value": "6px" }, - "light": { - "value": "rgb(105, 3, 68)" + "mobile": { + "value": "7px" } }, - "pink-1400": { - "prop": "--spectrum-pink-1400", - "dark": { - "value": "rgb(255, 219, 243)" - }, + "negative-background-color-default": { + "prop": "--spectrum-negative-background-color-default", + "ref": "var(--spectrum-negative-color-800)", "light": { - "value": "rgb(83, 0, 53)" + "value": "rgb(215, 50, 32)" + }, + "dark": { + "value": "rgb(223, 52, 34)" } }, - "pink-1500": { - "prop": "--spectrum-pink-1500", - "dark": { - "value": "rgb(255, 241, 250)" - }, + "negative-background-color-down": { + "prop": "--spectrum-negative-background-color-down", + "ref": "var(--spectrum-negative-color-700)", "light": { - "value": "rgb(62, 0, 39)" + "value": "rgb(183, 40, 24)" + }, + "dark": { + "value": "rgb(205, 46, 29)" } }, - "pink-1600": { - "prop": "--spectrum-pink-1600", - "dark": { - "value": "rgb(255, 255, 255)" - }, + "negative-background-color-hover": { + "prop": "--spectrum-negative-background-color-hover", + "ref": "var(--spectrum-negative-color-700)", "light": { - "value": "rgb(33, 0, 21)" + "value": "rgb(183, 40, 24)" + }, + "dark": { + "value": "rgb(205, 46, 29)" } }, - "pink-200": { - "prop": "--spectrum-pink-200", - "dark": { - "value": "rgb(71, 0, 44)" - }, + "negative-background-color-key-focus": { + "prop": "--spectrum-negative-background-color-key-focus", + "ref": "var(--spectrum-negative-color-700)", "light": { - "value": "rgb(255, 232, 247)" + "value": "rgb(183, 40, 24)" + }, + "dark": { + "value": "rgb(205, 46, 29)" } }, - "pink-300": { - "prop": "--spectrum-pink-300", - "dark": { - "value": "rgb(90, 0, 57)" - }, + "negative-border-color-default": { + "prop": "--spectrum-negative-border-color-default", + "ref": "var(--spectrum-negative-color-900)", "light": { - "value": "rgb(255, 211, 240)" + "value": "rgb(215, 50, 32)" + }, + "dark": { + "value": "rgb(252, 67, 46)" } }, - "pink-400": { - "prop": "--spectrum-pink-400", - "dark": { - "value": "rgb(115, 7, 75)" - }, + "negative-border-color-down": { + "prop": "--spectrum-negative-border-color-down", + "ref": "var(--spectrum-negative-color-1100)", "light": { - "value": "rgb(255, 181, 230)" + "value": "rgb(156, 33, 19)" + }, + "dark": { + "value": "rgb(255, 134, 120)" } }, - "pink-500": { - "prop": "--spectrum-pink-500", - "dark": { - "value": "rgb(143, 18, 97)" - }, + "negative-border-color-focus": { + "prop": "--spectrum-negative-border-color-focus", + "ref": "var(--spectrum-negative-color-1000)", "light": { - "value": "rgb(255, 148, 219)" - } - }, - "pink-600": { - "prop": "--spectrum-pink-600", - "dark": { - "value": "rgb(171, 29, 119)" + "value": "rgb(183, 40, 24)" }, - "light": { - "value": "rgb(255, 103, 204)" - } - }, - "pink-700": { - "prop": "--spectrum-pink-700", "dark": { - "value": "rgb(196, 39, 138)" - }, - "light": { - "value": "rgb(242, 76, 184)" + "value": "rgb(255, 103, 86)" } }, - "pink-800": { - "prop": "--spectrum-pink-800", - "dark": { - "value": "rgb(213, 45, 151)" - }, + "negative-border-color-focus-hover": { + "prop": "--spectrum-negative-border-color-focus-hover", + "ref": "var(--spectrum-negative-border-color-down)", "light": { - "value": "rgb(228, 52, 163)" - } - }, - "pink-900": { - "prop": "--spectrum-pink-900", - "dark": { - "value": "rgb(236, 67, 175)" + "value": "rgb(156, 33, 19)" }, - "light": { - "value": "rgb(206, 42, 146)" + "dark": { + "value": "rgb(255, 134, 120)" } }, - "pink-background-color-default": { - "prop": "--spectrum-pink-background-color-default", - "ref": "var(--spectrum-pink-800)", + "negative-border-color-hover": { + "prop": "--spectrum-negative-border-color-hover", + "ref": "var(--spectrum-negative-color-1000)", "light": { - "value": "rgb(206, 42, 146)" + "value": "rgb(183, 40, 24)" }, "dark": { - "value": "rgb(213, 45, 151)" + "value": "rgb(255, 103, 86)" } }, - "pink-subtle-background-color-default": { - "prop": "--spectrum-pink-subtle-background-color-default", - "ref": "var(--spectrum-pink-300)", + "negative-border-color-key-focus": { + "prop": "--spectrum-negative-border-color-key-focus", + "ref": "var(--spectrum-negative-color-1000)", "light": { - "value": "rgb(255, 232, 247)" + "value": "rgb(183, 40, 24)" }, "dark": { - "value": "rgb(90, 0, 57)" + "value": "rgb(255, 103, 86)" } }, - "pink-visual-color": { - "prop": "--spectrum-pink-visual-color", - "ref": "var(--spectrum-pink-900)", + "negative-color-100": { + "prop": "--spectrum-negative-color-100", + "ref": "var(--spectrum-red-100)", "light": { - "value": "rgb(228, 52, 163)" + "value": "rgb(255, 246, 245)" }, "dark": { - "value": "rgb(236, 67, 175)" - } - }, - "popover-tip-height": { - "prop": "--spectrum-popover-tip-height", - "value": "8px" - }, - "popover-tip-width": { - "prop": "--spectrum-popover-tip-width", - "value": "16px" - }, - "popover-top-to-content-area": { - "prop": "--spectrum-popover-top-to-content-area", - "desktop": { - "value": "4px" - }, - "mobile": { - "value": "5px" + "value": "rgb(54, 10, 3)" } }, - "positive-background-color-default": { - "prop": "--spectrum-positive-background-color-default", - "ref": "var(--spectrum-positive-color-800)", + "negative-color-1000": { + "prop": "--spectrum-negative-color-1000", + "ref": "var(--spectrum-red-1000)", "light": { - "value": "rgb(5, 131, 78)" + "value": "rgb(183, 40, 24)" }, "dark": { - "value": "rgb(6, 136, 80)" + "value": "rgb(255, 103, 86)" } }, - "positive-background-color-down": { - "prop": "--spectrum-positive-background-color-down", - "ref": "var(--spectrum-positive-color-700)", + "negative-color-1100": { + "prop": "--spectrum-negative-color-1100", + "ref": "var(--spectrum-red-1100)", "light": { - "value": "rgb(3, 110, 69)" + "value": "rgb(156, 33, 19)" }, "dark": { - "value": "rgb(4, 124, 75)" + "value": "rgb(255, 134, 120)" } }, - "positive-background-color-hover": { - "prop": "--spectrum-positive-background-color-hover", - "ref": "var(--spectrum-positive-color-700)", + "negative-color-1200": { + "prop": "--spectrum-negative-color-1200", + "ref": "var(--spectrum-red-1200)", "light": { - "value": "rgb(3, 110, 69)" + "value": "rgb(129, 27, 14)" }, "dark": { - "value": "rgb(4, 124, 75)" + "value": "rgb(255, 167, 157)" } }, - "positive-background-color-key-focus": { - "prop": "--spectrum-positive-background-color-key-focus", - "ref": "var(--spectrum-positive-color-700)", + "negative-color-1300": { + "prop": "--spectrum-negative-color-1300", + "ref": "var(--spectrum-red-1300)", "light": { - "value": "rgb(3, 110, 69)" + "value": "rgb(104, 21, 10)" }, "dark": { - "value": "rgb(4, 124, 75)" + "value": "rgb(255, 196, 189)" } }, - "positive-color-100": { - "prop": "--spectrum-positive-color-100", - "ref": "var(--spectrum-green-100)", + "negative-color-1400": { + "prop": "--spectrum-negative-color-1400", + "ref": "var(--spectrum-red-1400)", "light": { - "value": "rgb(237, 252, 241)" + "value": "rgb(80, 16, 6)" }, "dark": { - "value": "rgb(0, 30, 23)" + "value": "rgb(255, 222, 219)" } }, - "positive-color-1000": { - "prop": "--spectrum-positive-color-1000", - "ref": "var(--spectrum-green-1000)", - "light": { - "value": "rgb(3, 110, 69)" + "negative-color-1500": { + "prop": "--spectrum-negative-color-1500", + "ref": "var(--spectrum-red-1500)", + "dark": { + "value": "rgb(255, 242, 240)" }, + "light": { + "value": "rgb(59, 11, 4)" + } + }, + "negative-color-1600": { + "prop": "--spectrum-negative-color-1600", + "ref": "var(--spectrum-red-1600)", "dark": { - "value": "rgb(14, 175, 98)" + "value": "rgb(255, 255, 255)" + }, + "light": { + "value": "rgb(29, 5, 2)" } }, - "positive-color-1100": { - "prop": "--spectrum-positive-color-1100", - "ref": "var(--spectrum-green-1100)", + "negative-color-200": { + "prop": "--spectrum-negative-color-200", + "ref": "var(--spectrum-red-200)", "light": { - "value": "rgb(2, 93, 60)" + "value": "rgb(255, 235, 232)" }, "dark": { - "value": "rgb(24, 193, 110)" + "value": "rgb(68, 13, 5)" } }, - "positive-color-1200": { - "prop": "--spectrum-positive-color-1200", - "ref": "var(--spectrum-green-1200)", + "negative-color-300": { + "prop": "--spectrum-negative-color-300", + "ref": "var(--spectrum-red-300)", "light": { - "value": "rgb(1, 76, 52)" + "value": "rgb(255, 214, 209)" }, "dark": { - "value": "rgb(57, 215, 134)" + "value": "rgb(87, 17, 7)" } }, - "positive-color-1300": { - "prop": "--spectrum-positive-color-1300", - "ref": "var(--spectrum-green-1300)", + "negative-color-400": { + "prop": "--spectrum-negative-color-400", + "ref": "var(--spectrum-red-400)", "light": { - "value": "rgb(0, 61, 44)" + "value": "rgb(255, 188, 180)" }, "dark": { - "value": "rgb(126, 231, 172)" + "value": "rgb(115, 24, 11)" } }, - "positive-color-1400": { - "prop": "--spectrum-positive-color-1400", - "ref": "var(--spectrum-green-1400)", + "negative-color-500": { + "prop": "--spectrum-negative-color-500", + "ref": "var(--spectrum-red-500)", "light": { - "value": "rgb(0, 46, 34)" + "value": "rgb(255, 157, 145)" }, "dark": { - "value": "rgb(189, 241, 208)" + "value": "rgb(147, 31, 17)" } }, - "positive-color-1500": { - "prop": "--spectrum-positive-color-1500", - "ref": "var(--spectrum-green-1500)", - "dark": { - "value": "rgb(229, 250, 236)" - }, + "negative-color-600": { + "prop": "--spectrum-negative-color-600", + "ref": "var(--spectrum-red-600)", "light": { - "value": "rgb(0, 33, 25)" - } - }, - "positive-color-1600": { - "prop": "--spectrum-positive-color-1600", - "ref": "var(--spectrum-green-1600)", - "dark": { - "value": "rgb(255, 255, 255)" + "value": "rgb(255, 118, 101)" }, - "light": { - "value": "rgb(0, 15, 12)" + "dark": { + "value": "rgb(177, 38, 23)" } }, - "positive-color-200": { - "prop": "--spectrum-positive-color-200", - "ref": "var(--spectrum-green-200)", + "negative-color-700": { + "prop": "--spectrum-negative-color-700", + "ref": "var(--spectrum-red-700)", "light": { - "value": "rgb(215, 247, 225)" + "value": "rgb(255, 81, 61)" }, "dark": { - "value": "rgb(0, 38, 29)" + "value": "rgb(205, 46, 29)" } }, - "positive-color-300": { - "prop": "--spectrum-positive-color-300", - "ref": "var(--spectrum-green-300)", + "negative-color-800": { + "prop": "--spectrum-negative-color-800", + "ref": "var(--spectrum-red-800)", "light": { - "value": "rgb(173, 238, 197)" + "value": "rgb(240, 56, 35)" }, "dark": { - "value": "rgb(0, 51, 38)" + "value": "rgb(223, 52, 34)" } }, - "positive-color-400": { - "prop": "--spectrum-positive-color-400", - "ref": "var(--spectrum-green-400)", + "negative-color-900": { + "prop": "--spectrum-negative-color-900", + "ref": "var(--spectrum-red-900)", "light": { - "value": "rgb(107, 227, 162)" + "value": "rgb(215, 50, 32)" }, "dark": { - "value": "rgb(0, 68, 48)" + "value": "rgb(252, 67, 46)" } }, - "positive-color-500": { - "prop": "--spectrum-positive-color-500", - "ref": "var(--spectrum-green-500)", + "negative-content-color-default": { + "prop": "--spectrum-negative-content-color-default", + "ref": "var(--spectrum-negative-color-900)", "light": { - "value": "rgb(43, 209, 125)" + "value": "rgb(215, 50, 32)" }, "dark": { - "value": "rgb(2, 87, 58)" + "value": "rgb(252, 67, 46)" } }, - "positive-color-600": { - "prop": "--spectrum-positive-color-600", - "ref": "var(--spectrum-green-600)", + "negative-content-color-down": { + "prop": "--spectrum-negative-content-color-down", + "ref": "var(--spectrum-negative-color-1000)", "light": { - "value": "rgb(18, 184, 103)" + "value": "rgb(183, 40, 24)" }, "dark": { - "value": "rgb(3, 106, 67)" + "value": "rgb(255, 103, 86)" } }, - "positive-color-700": { - "prop": "--spectrum-positive-color-700", - "ref": "var(--spectrum-green-700)", + "negative-content-color-hover": { + "prop": "--spectrum-negative-content-color-hover", + "ref": "var(--spectrum-negative-color-1000)", "light": { - "value": "rgb(11, 164, 93)" + "value": "rgb(183, 40, 24)" }, "dark": { - "value": "rgb(4, 124, 75)" + "value": "rgb(255, 103, 86)" } }, - "positive-color-800": { - "prop": "--spectrum-positive-color-800", - "ref": "var(--spectrum-green-800)", + "negative-content-color-key-focus": { + "prop": "--spectrum-negative-content-color-key-focus", + "ref": "var(--spectrum-negative-color-1000)", "light": { - "value": "rgb(7, 147, 85)" + "value": "rgb(183, 40, 24)" }, "dark": { - "value": "rgb(6, 136, 80)" + "value": "rgb(255, 103, 86)" } }, - "positive-color-900": { - "prop": "--spectrum-positive-color-900", - "ref": "var(--spectrum-green-900)", + "negative-subdued-background-color-default": { + "prop": "--spectrum-negative-subdued-background-color-default", + "ref": "var(--spectrum-negative-color-300)", "light": { - "value": "rgb(5, 131, 78)" + "value": "rgb(255, 235, 232)" }, "dark": { - "value": "rgb(9, 157, 89)" + "value": "rgb(87, 17, 7)" } }, - "positive-subtle-background-color-default": { - "prop": "--spectrum-positive-subtle-background-color-default", - "ref": "var(--spectrum-positive-color-300)", + "negative-subdued-background-color-down": { + "prop": "--spectrum-negative-subdued-background-color-down", + "ref": "var(--spectrum-negative-color-300)", "light": { - "value": "rgb(215, 247, 225)" + "value": "rgb(255, 214, 209)" }, "dark": { - "value": "rgb(0, 51, 38)" + "value": "rgb(87, 17, 7)" } }, - "positive-visual-color": { - "prop": "--spectrum-positive-visual-color", - "ref": "var(--spectrum-positive-color-900)", + "negative-subdued-background-color-hover": { + "prop": "--spectrum-negative-subdued-background-color-hover", + "ref": "var(--spectrum-negative-color-300)", "light": { - "value": "rgb(7, 147, 85)" + "value": "rgb(255, 214, 209)" }, "dark": { - "value": "rgb(9, 157, 89)" - } - }, - "progress-bar-maximum-width": { - "prop": "--spectrum-progress-bar-maximum-width", - "value": "768px" - }, - "progress-bar-minimum-width": { - "prop": "--spectrum-progress-bar-minimum-width", - "value": "48px" - }, - "progress-bar-thickness-extra-large": { - "prop": "--spectrum-progress-bar-thickness-extra-large", - "desktop": { - "value": "10px" - }, - "mobile": { - "value": "13px" + "value": "rgb(87, 17, 7)" } }, - "progress-bar-thickness-large": { - "prop": "--spectrum-progress-bar-thickness-large", - "desktop": { - "value": "8px" + "negative-subdued-background-color-key-focus": { + "prop": "--spectrum-negative-subdued-background-color-key-focus", + "ref": "var(--spectrum-negative-color-300)", + "light": { + "value": "rgb(255, 214, 209)" }, - "mobile": { - "value": "10px" + "dark": { + "value": "rgb(87, 17, 7)" } }, - "progress-bar-thickness-medium": { - "prop": "--spectrum-progress-bar-thickness-medium", - "desktop": { - "value": "6px" + "negative-subtle-background-color-default": { + "prop": "--spectrum-negative-subtle-background-color-default", + "ref": "var(--spectrum-negative-color-300)", + "light": { + "value": "rgb(255, 235, 232)" }, - "mobile": { - "value": "8px" + "dark": { + "value": "rgb(87, 17, 7)" } }, - "progress-bar-thickness-small": { - "prop": "--spectrum-progress-bar-thickness-small", - "desktop": { - "value": "4px" + "negative-visual-color": { + "prop": "--spectrum-negative-visual-color", + "ref": "var(--spectrum-negative-color-900)", + "light": { + "value": "rgb(240, 56, 35)" }, - "mobile": { - "value": "5px" + "dark": { + "value": "rgb(252, 67, 46)" } }, - "progress-circle-size-large": { - "prop": "--spectrum-progress-circle-size-large", - "desktop": { - "value": "64px" + "neutral-background-color-default": { + "prop": "--spectrum-neutral-background-color-default", + "ref": "var(--spectrum-gray-800)", + "light": { + "value": "rgb(41, 41, 41)" }, - "mobile": { - "value": "80px" + "dark": { + "value": "rgb(219, 219, 219)" } }, - "progress-circle-size-medium": { - "prop": "--spectrum-progress-circle-size-medium", - "desktop": { - "value": "32px" + "neutral-background-color-down": { + "prop": "--spectrum-neutral-background-color-down", + "ref": "var(--spectrum-gray-900)", + "light": { + "value": "rgb(19, 19, 19)" }, - "mobile": { - "value": "40px" + "dark": { + "value": "rgb(242, 242, 242)" } }, - "progress-circle-size-small": { - "prop": "--spectrum-progress-circle-size-small", - "desktop": { - "value": "16px" + "neutral-background-color-hover": { + "prop": "--spectrum-neutral-background-color-hover", + "ref": "var(--spectrum-gray-900)", + "light": { + "value": "rgb(19, 19, 19)" }, - "mobile": { - "value": "20px" + "dark": { + "value": "rgb(242, 242, 242)" } }, - "progress-circle-thickness-large": { - "prop": "--spectrum-progress-circle-thickness-large", - "desktop": { - "value": "4px" + "neutral-background-color-key-focus": { + "prop": "--spectrum-neutral-background-color-key-focus", + "ref": "var(--spectrum-gray-900)", + "light": { + "value": "rgb(19, 19, 19)" }, - "mobile": { - "value": "5px" + "dark": { + "value": "rgb(242, 242, 242)" } }, - "progress-circle-thickness-medium": { - "prop": "--spectrum-progress-circle-thickness-medium", - "desktop": { - "value": "3px" + "neutral-background-color-selected-default": { + "prop": "--spectrum-neutral-background-color-selected-default", + "ref": "var(--spectrum-gray-800)", + "light": { + "value": "rgb(41, 41, 41)" }, - "mobile": { - "value": "4px" + "dark": { + "value": "rgb(219, 219, 219)" } }, - "progress-circle-thickness-small": { - "prop": "--spectrum-progress-circle-thickness-small", - "desktop": { - "value": "2px" + "neutral-background-color-selected-down": { + "prop": "--spectrum-neutral-background-color-selected-down", + "ref": "var(--spectrum-gray-900)", + "light": { + "value": "rgb(19, 19, 19)" }, - "mobile": { - "value": "3px" + "dark": { + "value": "rgb(242, 242, 242)" } }, - "purple-100": { - "prop": "--spectrum-purple-100", + "neutral-background-color-selected-hover": { + "prop": "--spectrum-neutral-background-color-selected-hover", + "ref": "var(--spectrum-gray-900)", "light": { - "value": "rgb(251, 247, 254)" + "value": "rgb(19, 19, 19)" }, "dark": { - "value": "rgb(41, 0, 79)" + "value": "rgb(242, 242, 242)" } }, - "purple-1000": { - "prop": "--spectrum-purple-1000", + "neutral-background-color-selected-key-focus": { + "prop": "--spectrum-neutral-background-color-selected-key-focus", + "ref": "var(--spectrum-gray-900)", "light": { - "value": "rgb(134, 40, 217)" + "value": "rgb(19, 19, 19)" }, "dark": { - "value": "rgb(186, 127, 237)" + "value": "rgb(242, 242, 242)" } }, - "purple-1100": { - "prop": "--spectrum-purple-1100", + "neutral-content-color-default": { + "prop": "--spectrum-neutral-content-color-default", + "ref": "var(--spectrum-gray-800)", "light": { - "value": "rgb(115, 13, 204)" + "value": "rgb(41, 41, 41)" }, "dark": { - "value": "rgb(197, 149, 240)" + "value": "rgb(219, 219, 219)" } }, - "purple-1200": { - "prop": "--spectrum-purple-1200", + "neutral-content-color-down": { + "prop": "--spectrum-neutral-content-color-down", + "ref": "var(--spectrum-gray-900)", "light": { - "value": "rgb(93, 0, 177)" + "value": "rgb(19, 19, 19)" }, "dark": { - "value": "rgb(212, 176, 244)" + "value": "rgb(242, 242, 242)" } }, - "purple-1300": { - "prop": "--spectrum-purple-1300", + "neutral-content-color-focus": { + "prop": "--spectrum-neutral-content-color-focus", + "ref": "var(--spectrum-neutral-content-color-down)", "light": { - "value": "rgb(75, 0, 144)" + "value": "rgb(19, 19, 19)" }, "dark": { - "value": "rgb(225, 201, 247)" + "value": "rgb(242, 242, 242)" } }, - "purple-1400": { - "prop": "--spectrum-purple-1400", + "neutral-content-color-focus-hover": { + "prop": "--spectrum-neutral-content-color-focus-hover", + "ref": "var(--spectrum-neutral-content-color-down)", "light": { - "value": "rgb(59, 0, 111)" + "value": "rgb(19, 19, 19)" }, "dark": { - "value": "rgb(238, 224, 250)" + "value": "rgb(242, 242, 242)" } }, - "purple-1500": { - "prop": "--spectrum-purple-1500", - "dark": { - "value": "rgb(248, 243, 253)" - }, + "neutral-content-color-hover": { + "prop": "--spectrum-neutral-content-color-hover", + "ref": "var(--spectrum-gray-900)", "light": { - "value": "rgb(44, 0, 84)" + "value": "rgb(19, 19, 19)" + }, + "dark": { + "value": "rgb(242, 242, 242)" } }, - "purple-1600": { - "prop": "--spectrum-purple-1600", - "dark": { - "value": "rgb(255, 255, 255)" - }, + "neutral-content-color-key-focus": { + "prop": "--spectrum-neutral-content-color-key-focus", + "ref": "var(--spectrum-gray-900)", "light": { - "value": "rgb(23, 0, 45)" + "value": "rgb(19, 19, 19)" + }, + "dark": { + "value": "rgb(242, 242, 242)" } }, - "purple-200": { - "prop": "--spectrum-purple-200", + "neutral-subdued-background-color-default": { + "prop": "--spectrum-neutral-subdued-background-color-default", + "ref": "var(--spectrum-gray-500)", "light": { - "value": "rgb(244, 235, 252)" + "value": "rgb(80, 80, 80)" }, "dark": { - "value": "rgb(50, 0, 96)" + "value": "rgb(109, 109, 109)" } }, - "purple-300": { - "prop": "--spectrum-purple-300", + "neutral-subdued-background-color-down": { + "prop": "--spectrum-neutral-subdued-background-color-down", + "ref": "var(--spectrum-gray-400)", "light": { - "value": "rgb(235, 218, 249)" + "value": "rgb(41, 41, 41)" }, "dark": { - "value": "rgb(64, 0, 122)" + "value": "rgb(68, 68, 68)" } }, - "purple-400": { - "prop": "--spectrum-purple-400", + "neutral-subdued-background-color-hover": { + "prop": "--spectrum-neutral-subdued-background-color-hover", + "ref": "var(--spectrum-gray-400)", "light": { - "value": "rgb(221, 193, 246)" + "value": "rgb(41, 41, 41)" }, "dark": { - "value": "rgb(83, 0, 159)" + "value": "rgb(68, 68, 68)" } }, - "purple-500": { - "prop": "--spectrum-purple-500", + "neutral-subdued-background-color-key-focus": { + "prop": "--spectrum-neutral-subdued-background-color-key-focus", + "ref": "var(--spectrum-gray-400)", "light": { - "value": "rgb(208, 167, 243)" + "value": "rgb(41, 41, 41)" }, "dark": { - "value": "rgb(107, 6, 195)" + "value": "rgb(68, 68, 68)" } }, - "purple-600": { - "prop": "--spectrum-purple-600", + "neutral-subdued-content-color-default": { + "prop": "--spectrum-neutral-subdued-content-color-default", + "ref": "var(--spectrum-gray-700)", "light": { - "value": "rgb(191, 138, 238)" + "value": "rgb(80, 80, 80)" }, "dark": { - "value": "rgb(130, 34, 215)" + "value": "rgb(175, 175, 175)" } }, - "purple-700": { - "prop": "--spectrum-purple-700", + "neutral-subdued-content-color-down": { + "prop": "--spectrum-neutral-subdued-content-color-down", + "ref": "var(--spectrum-gray-800)", "light": { - "value": "rgb(178, 114, 235)" + "value": "rgb(41, 41, 41)" }, "dark": { - "value": "rgb(148, 62, 224)" + "value": "rgb(219, 219, 219)" } }, - "purple-800": { - "prop": "--spectrum-purple-800", + "neutral-subdued-content-color-hover": { + "prop": "--spectrum-neutral-subdued-content-color-hover", + "ref": "var(--spectrum-gray-800)", "light": { - "value": "rgb(166, 92, 231)" + "value": "rgb(41, 41, 41)" }, "dark": { - "value": "rgb(157, 78, 228)" + "value": "rgb(219, 219, 219)" } }, - "purple-900": { - "prop": "--spectrum-purple-900", + "neutral-subdued-content-color-key-focus": { + "prop": "--spectrum-neutral-subdued-content-color-key-focus", + "ref": "var(--spectrum-gray-800)", "light": { - "value": "rgb(154, 71, 226)" + "value": "rgb(41, 41, 41)" }, "dark": { - "value": "rgb(173, 105, 233)" + "value": "rgb(219, 219, 219)" } }, - "purple-background-color-default": { - "prop": "--spectrum-purple-background-color-default", - "ref": "var(--spectrum-purple-800)", + "neutral-subdued-content-color-selected": { + "prop": "--spectrum-neutral-subdued-content-color-selected", + "ref": "var(--spectrum-neutral-subdued-content-color-down)", "light": { - "value": "rgb(154, 71, 226)" + "value": "rgb(41, 41, 41)" }, "dark": { - "value": "rgb(157, 78, 228)" + "value": "rgb(219, 219, 219)" } }, - "purple-subtle-background-color-default": { - "prop": "--spectrum-purple-subtle-background-color-default", - "ref": "var(--spectrum-purple-300)", + "neutral-subtle-background-color-default": { + "prop": "--spectrum-neutral-subtle-background-color-default", + "ref": "var(--spectrum-gray-300)", "light": { - "value": "rgb(244, 235, 252)" + "value": "rgb(233, 233, 233)" }, "dark": { - "value": "rgb(64, 0, 122)" + "value": "rgb(57, 57, 57)" } }, - "purple-visual-color": { - "prop": "--spectrum-purple-visual-color", - "ref": "var(--spectrum-purple-900)", + "neutral-visual-color": { + "prop": "--spectrum-neutral-visual-color", + "ref": "var(--spectrum-gray-600)", "light": { - "value": "rgb(166, 92, 231)" + "value": "rgb(143, 143, 143)" }, "dark": { - "value": "rgb(173, 105, 233)" + "value": "rgb(138, 138, 138)" } }, - "radio-button-control-size-extra-large": { - "prop": "--spectrum-radio-button-control-size-extra-large", - "desktop": { - "value": "18px" + "notice-background-color-default": { + "prop": "--spectrum-notice-background-color-default", + "ref": "var(--spectrum-notice-color-600)", + "dark": { + "value": "rgb(224, 100, 0)" }, - "mobile": { - "value": "22px" + "light": { + "value": "rgb(252, 125, 0)" } }, - "radio-button-control-size-large": { - "prop": "--spectrum-radio-button-control-size-large", - "desktop": { - "value": "16px" + "notice-color-100": { + "prop": "--spectrum-notice-color-100", + "ref": "var(--spectrum-orange-100)", + "light": { + "value": "rgb(255, 246, 231)" }, - "mobile": { - "value": "20px" + "dark": { + "value": "rgb(49, 16, 0)" } }, - "radio-button-control-size-medium": { - "prop": "--spectrum-radio-button-control-size-medium", - "desktop": { - "value": "14px" + "notice-color-1000": { + "prop": "--spectrum-notice-color-1000", + "ref": "var(--spectrum-orange-1000)", + "light": { + "value": "rgb(167, 62, 0)" }, - "mobile": { - "value": "18px" + "dark": { + "value": "rgb(243, 117, 0)" } }, - "radio-button-control-size-small": { - "prop": "--spectrum-radio-button-control-size-small", - "desktop": { - "value": "12px" + "notice-color-1100": { + "prop": "--spectrum-notice-color-1100", + "ref": "var(--spectrum-orange-1100)", + "light": { + "value": "rgb(144, 51, 0)" }, - "mobile": { - "value": "16px" + "dark": { + "value": "rgb(255, 137, 0)" } }, - "radio-button-selection-indicator": { - "prop": "--spectrum-radio-button-selection-indicator", - "value": "4px" - }, - "radio-button-top-to-control-extra-large": { - "prop": "--spectrum-radio-button-top-to-control-extra-large", - "desktop": { - "value": "15px" + "notice-color-1200": { + "prop": "--spectrum-notice-color-1200", + "ref": "var(--spectrum-orange-1200)", + "light": { + "value": "rgb(118, 41, 0)" }, - "mobile": { - "value": "19px" + "dark": { + "value": "rgb(255, 173, 45)" } }, - "radio-button-top-to-control-large": { - "prop": "--spectrum-radio-button-top-to-control-large", - "desktop": { - "value": "12px" + "notice-color-1300": { + "prop": "--spectrum-notice-color-1300", + "ref": "var(--spectrum-orange-1300)", + "light": { + "value": "rgb(95, 32, 0)" }, - "mobile": { - "value": "15px" + "dark": { + "value": "rgb(255, 201, 116)" } }, - "radio-button-top-to-control-medium": { - "prop": "--spectrum-radio-button-top-to-control-medium", - "desktop": { - "value": "9px" + "notice-color-1400": { + "prop": "--spectrum-notice-color-1400", + "ref": "var(--spectrum-orange-1400)", + "light": { + "value": "rgb(73, 24, 0)" }, - "mobile": { - "value": "11px" + "dark": { + "value": "rgb(255, 225, 178)" } }, - "radio-button-top-to-control-small": { - "prop": "--spectrum-radio-button-top-to-control-small", - "desktop": { - "value": "6px" + "notice-color-1500": { + "prop": "--spectrum-notice-color-1500", + "ref": "var(--spectrum-orange-1500)", + "dark": { + "value": "rgb(255, 243, 225)" }, - "mobile": { - "value": "7px" + "light": { + "value": "rgb(52, 18, 0)" } }, - "rating-indicator-to-icon": { - "prop": "--spectrum-rating-indicator-to-icon", - "desktop": { - "value": "4px" + "notice-color-1600": { + "prop": "--spectrum-notice-color-1600", + "ref": "var(--spectrum-orange-1600)", + "dark": { + "value": "rgb(255, 255, 255)" }, - "mobile": { - "value": "5px" + "light": { + "value": "rgb(25, 8, 0)" } }, - "rating-indicator-width": { - "prop": "--spectrum-rating-indicator-width", - "desktop": { - "value": "18px" - }, - "mobile": { - "value": "22px" - } - }, - "red-100": { - "prop": "--spectrum-red-100", + "notice-color-200": { + "prop": "--spectrum-notice-color-200", + "ref": "var(--spectrum-orange-200)", "light": { - "value": "rgb(255, 246, 245)" + "value": "rgb(255, 236, 207)" }, "dark": { - "value": "rgb(54, 10, 3)" + "value": "rgb(61, 21, 0)" } }, - "red-1000": { - "prop": "--spectrum-red-1000", + "notice-color-300": { + "prop": "--spectrum-notice-color-300", + "ref": "var(--spectrum-orange-300)", "light": { - "value": "rgb(183, 40, 24)" + "value": "rgb(255, 218, 158)" }, "dark": { - "value": "rgb(255, 103, 86)" + "value": "rgb(80, 27, 0)" } }, - "red-1100": { - "prop": "--spectrum-red-1100", + "notice-color-400": { + "prop": "--spectrum-notice-color-400", + "ref": "var(--spectrum-orange-400)", "light": { - "value": "rgb(156, 33, 19)" + "value": "rgb(255, 193, 94)" }, "dark": { - "value": "rgb(255, 134, 120)" + "value": "rgb(106, 36, 0)" } }, - "red-1200": { - "prop": "--spectrum-red-1200", + "notice-color-500": { + "prop": "--spectrum-notice-color-500", + "ref": "var(--spectrum-orange-500)", "light": { - "value": "rgb(129, 27, 14)" + "value": "rgb(255, 162, 19)" }, "dark": { - "value": "rgb(255, 167, 157)" + "value": "rgb(135, 47, 0)" } }, - "red-1300": { - "prop": "--spectrum-red-1300", + "notice-color-600": { + "prop": "--spectrum-notice-color-600", + "ref": "var(--spectrum-orange-600)", "light": { - "value": "rgb(104, 21, 10)" + "value": "rgb(252, 125, 0)" }, "dark": { - "value": "rgb(255, 196, 189)" + "value": "rgb(162, 59, 0)" } }, - "red-1400": { - "prop": "--spectrum-red-1400", + "notice-color-700": { + "prop": "--spectrum-notice-color-700", + "ref": "var(--spectrum-orange-700)", "light": { - "value": "rgb(80, 16, 6)" + "value": "rgb(232, 106, 0)" }, "dark": { - "value": "rgb(255, 222, 219)" + "value": "rgb(185, 73, 0)" } }, - "red-1500": { - "prop": "--spectrum-red-1500", - "dark": { - "value": "rgb(255, 242, 240)" - }, + "notice-color-800": { + "prop": "--spectrum-notice-color-800", + "ref": "var(--spectrum-orange-800)", "light": { - "value": "rgb(59, 11, 4)" - } - }, - "red-1600": { - "prop": "--spectrum-red-1600", - "dark": { - "value": "rgb(255, 255, 255)" + "value": "rgb(212, 91, 0)" }, - "light": { - "value": "rgb(29, 5, 2)" + "dark": { + "value": "rgb(199, 82, 0)" } }, - "red-200": { - "prop": "--spectrum-red-200", + "notice-color-900": { + "prop": "--spectrum-notice-color-900", + "ref": "var(--spectrum-orange-900)", "light": { - "value": "rgb(255, 235, 232)" + "value": "rgb(194, 78, 0)" }, "dark": { - "value": "rgb(68, 13, 5)" + "value": "rgb(224, 100, 0)" } }, - "red-300": { - "prop": "--spectrum-red-300", + "notice-subtle-background-color-default": { + "prop": "--spectrum-notice-subtle-background-color-default", + "ref": "var(--spectrum-notice-color-300)", "light": { - "value": "rgb(255, 214, 209)" + "value": "rgb(255, 236, 207)" }, "dark": { - "value": "rgb(87, 17, 7)" + "value": "rgb(80, 27, 0)" } }, - "red-400": { - "prop": "--spectrum-red-400", + "notice-visual-color": { + "prop": "--spectrum-notice-visual-color", + "ref": "var(--spectrum-notice-color-900)", "light": { - "value": "rgb(255, 188, 180)" + "value": "rgb(212, 91, 0)" }, "dark": { - "value": "rgb(115, 24, 11)" + "value": "rgb(224, 100, 0)" } }, - "red-500": { - "prop": "--spectrum-red-500", - "light": { - "value": "rgb(255, 157, 145)" + "number-field-minimum-width-multiplier": { + "prop": "--spectrum-number-field-minimum-width-multiplier", + "value": 1.25 + }, + "number-field-visual-to-in-field-stepper-extra-large": { + "prop": "--spectrum-number-field-visual-to-in-field-stepper-extra-large", + "desktop": { + "value": "8px" }, - "dark": { - "value": "rgb(147, 31, 17)" + "mobile": { + "value": "10px" } }, - "red-600": { - "prop": "--spectrum-red-600", - "light": { - "value": "rgb(255, 118, 101)" + "number-field-visual-to-in-field-stepper-large": { + "prop": "--spectrum-number-field-visual-to-in-field-stepper-large", + "desktop": { + "value": "7px" }, - "dark": { - "value": "rgb(177, 38, 23)" + "mobile": { + "value": "9px" } }, - "red-700": { - "prop": "--spectrum-red-700", - "light": { - "value": "rgb(255, 81, 61)" + "number-field-visual-to-in-field-stepper-medium": { + "prop": "--spectrum-number-field-visual-to-in-field-stepper-medium", + "desktop": { + "value": "6px" }, - "dark": { - "value": "rgb(205, 46, 29)" + "mobile": { + "value": "8px" } }, - "red-800": { - "prop": "--spectrum-red-800", - "light": { - "value": "rgb(240, 56, 35)" + "number-field-visual-to-in-field-stepper-small": { + "prop": "--spectrum-number-field-visual-to-in-field-stepper-small", + "desktop": { + "value": "5px" }, - "dark": { - "value": "rgb(223, 52, 34)" + "mobile": { + "value": "7px" } }, - "red-900": { - "prop": "--spectrum-red-900", - "light": { - "value": "rgb(215, 50, 32)" + "number-field-with-stepper-minimum-width-extra-large": { + "prop": "--spectrum-number-field-with-stepper-minimum-width-extra-large", + "desktop": { + "value": "168px" }, - "dark": { - "value": "rgb(252, 67, 46)" + "mobile": { + "value": "198px" } }, - "red-background-color-default": { - "prop": "--spectrum-red-background-color-default", - "ref": "var(--spectrum-red-800)", - "light": { - "value": "rgb(215, 50, 32)" + "number-field-with-stepper-minimum-width-large": { + "prop": "--spectrum-number-field-with-stepper-minimum-width-large", + "desktop": { + "value": "144px" }, - "dark": { - "value": "rgb(223, 52, 34)" + "mobile": { + "value": "174px" } }, - "red-subtle-background-color-default": { - "prop": "--spectrum-red-subtle-background-color-default", - "ref": "var(--spectrum-red-300)", - "light": { - "value": "rgb(255, 235, 232)" + "number-field-with-stepper-minimum-width-medium": { + "prop": "--spectrum-number-field-with-stepper-minimum-width-medium", + "desktop": { + "value": "120px" }, - "dark": { - "value": "rgb(87, 17, 7)" + "mobile": { + "value": "150px" } }, - "red-visual-color": { - "prop": "--spectrum-red-visual-color", - "ref": "var(--spectrum-red-700)", + "number-field-with-stepper-minimum-width-small": { + "prop": "--spectrum-number-field-with-stepper-minimum-width-small", + "desktop": { + "value": "104px" + }, + "mobile": { + "value": "126px" + } + }, + "opacity-checkerboard-square-dark": { + "prop": "--spectrum-opacity-checkerboard-square-dark", + "ref": "var(--spectrum-gray-800)", "light": { - "value": "rgb(240, 56, 35)" + "value": "rgb(225, 225, 225)" }, "dark": { - "value": "rgb(205, 46, 29)" + "value": "rgb(219, 219, 219)" } }, - "regular-font-weight": { - "prop": "--spectrum-regular-font-weight", - "value": "400" - }, - "sans-serif-font-family": { - "prop": "--spectrum-sans-serif-font-family", - "value": "Adobe Clean" + "opacity-checkerboard-square-light": { + "prop": "--spectrum-opacity-checkerboard-square-light", + "ref": "var(--spectrum-white)", + "value": "rgb(255, 255, 255)" }, - "seafoam-100": { - "prop": "--spectrum-seafoam-100", - "light": { - "value": "rgb(235, 251, 246)" + "opacity-checkerboard-square-size": { + "prop": "--spectrum-opacity-checkerboard-square-size", + "ref": "var(--spectrum-opacity-checkerboard-square-size-medium)", + "desktop": { + "value": "8px" }, - "dark": { - "value": "rgb(0, 30, 27)" + "mobile": { + "value": "10px" } }, - "seafoam-1000": { - "prop": "--spectrum-seafoam-1000", - "light": { - "value": "rgb(5, 108, 92)" + "opacity-checkerboard-square-size-medium": { + "prop": "--spectrum-opacity-checkerboard-square-size-medium", + "desktop": { + "value": "8px" }, - "dark": { - "value": "rgb(12, 173, 142)" + "mobile": { + "value": "10px" } }, - "seafoam-1100": { - "prop": "--spectrum-seafoam-1100", - "light": { - "value": "rgb(3, 92, 80)" + "opacity-checkerboard-square-size-small": { + "prop": "--spectrum-opacity-checkerboard-square-size-small", + "desktop": { + "value": "4px" }, - "dark": { - "value": "rgb(14, 190, 156)" + "mobile": { + "value": "5px" } }, - "seafoam-1200": { - "prop": "--spectrum-seafoam-1200", + "opacity-disabled": { + "prop": "--spectrum-opacity-disabled", + "value": "0.3" + }, + "orange-100": { + "prop": "--spectrum-orange-100", "light": { - "value": "rgb(1, 75, 67)" + "value": "rgb(255, 246, 231)" }, "dark": { - "value": "rgb(29, 214, 176)" + "value": "rgb(49, 16, 0)" } }, - "seafoam-1300": { - "prop": "--spectrum-seafoam-1300", + "orange-1000": { + "prop": "--spectrum-orange-1000", "light": { - "value": "rgb(0, 60, 54)" + "value": "rgb(167, 62, 0)" }, "dark": { - "value": "rgb(122, 229, 203)" + "value": "rgb(243, 117, 0)" } }, - "seafoam-1400": { - "prop": "--spectrum-seafoam-1400", + "orange-1100": { + "prop": "--spectrum-orange-1100", "light": { - "value": "rgb(0, 46, 40)" + "value": "rgb(144, 51, 0)" }, "dark": { - "value": "rgb(186, 241, 222)" + "value": "rgb(255, 137, 0)" } }, - "seafoam-1500": { - "prop": "--spectrum-seafoam-1500", + "orange-1200": { + "prop": "--spectrum-orange-1200", + "light": { + "value": "rgb(118, 41, 0)" + }, "dark": { - "value": "rgb(229, 249, 243)" + "value": "rgb(255, 173, 45)" + } + }, + "orange-1300": { + "prop": "--spectrum-orange-1300", + "light": { + "value": "rgb(95, 32, 0)" }, + "dark": { + "value": "rgb(255, 201, 116)" + } + }, + "orange-1400": { + "prop": "--spectrum-orange-1400", "light": { - "value": "rgb(0, 33, 29)" + "value": "rgb(73, 24, 0)" + }, + "dark": { + "value": "rgb(255, 225, 178)" } }, - "seafoam-1600": { - "prop": "--spectrum-seafoam-1600", + "orange-1500": { + "prop": "--spectrum-orange-1500", + "dark": { + "value": "rgb(255, 243, 225)" + }, + "light": { + "value": "rgb(52, 18, 0)" + } + }, + "orange-1600": { + "prop": "--spectrum-orange-1600", "dark": { "value": "rgb(255, 255, 255)" }, "light": { - "value": "rgb(0, 15, 14)" + "value": "rgb(25, 8, 0)" } }, - "seafoam-200": { - "prop": "--spectrum-seafoam-200", + "orange-200": { + "prop": "--spectrum-orange-200", "light": { - "value": "rgb(211, 246, 234)" + "value": "rgb(255, 236, 207)" }, "dark": { - "value": "rgb(0, 39, 35)" + "value": "rgb(61, 21, 0)" + } + }, + "orange-300": { + "prop": "--spectrum-orange-300", + "light": { + "value": "rgb(255, 218, 158)" + }, + "dark": { + "value": "rgb(80, 27, 0)" + } + }, + "orange-400": { + "prop": "--spectrum-orange-400", + "light": { + "value": "rgb(255, 193, 94)" + }, + "dark": { + "value": "rgb(106, 36, 0)" + } + }, + "orange-500": { + "prop": "--spectrum-orange-500", + "light": { + "value": "rgb(255, 162, 19)" + }, + "dark": { + "value": "rgb(135, 47, 0)" + } + }, + "orange-600": { + "prop": "--spectrum-orange-600", + "light": { + "value": "rgb(252, 125, 0)" + }, + "dark": { + "value": "rgb(162, 59, 0)" + } + }, + "orange-700": { + "prop": "--spectrum-orange-700", + "light": { + "value": "rgb(232, 106, 0)" + }, + "dark": { + "value": "rgb(185, 73, 0)" + } + }, + "orange-800": { + "prop": "--spectrum-orange-800", + "light": { + "value": "rgb(212, 91, 0)" + }, + "dark": { + "value": "rgb(199, 82, 0)" + } + }, + "orange-900": { + "prop": "--spectrum-orange-900", + "light": { + "value": "rgb(194, 78, 0)" + }, + "dark": { + "value": "rgb(224, 100, 0)" + } + }, + "orange-background-color-default": { + "prop": "--spectrum-orange-background-color-default", + "ref": "var(--spectrum-orange-900)", + "light": { + "value": "rgb(252, 125, 0)" + }, + "dark": { + "value": "rgb(224, 100, 0)" + } + }, + "orange-subtle-background-color-default": { + "prop": "--spectrum-orange-subtle-background-color-default", + "ref": "var(--spectrum-orange-300)", + "light": { + "value": "rgb(255, 236, 207)" + }, + "dark": { + "value": "rgb(80, 27, 0)" + } + }, + "orange-visual-color": { + "prop": "--spectrum-orange-visual-color", + "ref": "var(--spectrum-orange-900)", + "light": { + "value": "rgb(232, 106, 0)" + }, + "dark": { + "value": "rgb(224, 100, 0)" + } + }, + "overlay-color": { + "prop": "--spectrum-overlay-color", + "ref": "var(--spectrum-black)", + "value": "rgb(0, 0, 0)" + }, + "overlay-opacity": { + "prop": "--spectrum-overlay-opacity", + "light": { + "value": "0.4" + }, + "dark": { + "value": "0.6" + } + }, + "picker-border-width": { + "prop": "--spectrum-picker-border-width", + "ref": "var(--spectrum-border-width-100)", + "value": "1px" + }, + "picker-end-edge-to-disclosure-icon-quiet": { + "prop": "--spectrum-picker-end-edge-to-disclosure-icon-quiet", + "value": "0px" + }, + "picker-end-edge-to-disclousure-icon-quiet": { + "prop": "--spectrum-picker-end-edge-to-disclousure-icon-quiet", + "ref": "var(--spectrum-picker-end-edge-to-disclosure-icon-quiet)", + "value": "0px" + }, + "picker-minimum-width-multiplier": { + "prop": "--spectrum-picker-minimum-width-multiplier", + "value": 2 + }, + "picker-visual-to-disclosure-icon-extra-large": { + "prop": "--spectrum-picker-visual-to-disclosure-icon-extra-large", + "desktop": { + "value": "10px" + }, + "mobile": { + "value": "13px" + } + }, + "picker-visual-to-disclosure-icon-large": { + "prop": "--spectrum-picker-visual-to-disclosure-icon-large", + "desktop": { + "value": "9px" + }, + "mobile": { + "value": "11px" + } + }, + "picker-visual-to-disclosure-icon-medium": { + "prop": "--spectrum-picker-visual-to-disclosure-icon-medium", + "desktop": { + "value": "8px" + }, + "mobile": { + "value": "10px" + } + }, + "picker-visual-to-disclosure-icon-small": { + "prop": "--spectrum-picker-visual-to-disclosure-icon-small", + "desktop": { + "value": "7px" + }, + "mobile": { + "value": "9px" + } + }, + "pink-100": { + "prop": "--spectrum-pink-100", + "dark": { + "value": "rgb(58, 0, 37)" + }, + "light": { + "value": "rgb(255, 246, 252)" + } + }, + "pink-1000": { + "prop": "--spectrum-pink-1000", + "dark": { + "value": "rgb(251, 90, 196)" + }, + "light": { + "value": "rgb(176, 31, 123)" + } + }, + "pink-1100": { + "prop": "--spectrum-pink-1100", + "dark": { + "value": "rgb(255, 122, 210)" + }, + "light": { + "value": "rgb(152, 22, 104)" + } + }, + "pink-1200": { + "prop": "--spectrum-pink-1200", + "dark": { + "value": "rgb(255, 159, 223)" + }, + "light": { + "value": "rgb(128, 12, 85)" + } + }, + "pink-1300": { + "prop": "--spectrum-pink-1300", + "dark": { + "value": "rgb(255, 191, 234)" + }, + "light": { + "value": "rgb(105, 3, 68)" } }, - "seafoam-300": { - "prop": "--spectrum-seafoam-300", - "light": { - "value": "rgb(169, 237, 216)" - }, - "dark": { - "value": "rgb(0, 50, 44)" - } + "pink-1400": { + "prop": "--spectrum-pink-1400", + "dark": { + "value": "rgb(255, 219, 243)" + }, + "light": { + "value": "rgb(83, 0, 53)" + } + }, + "pink-1500": { + "prop": "--spectrum-pink-1500", + "dark": { + "value": "rgb(255, 241, 250)" + }, + "light": { + "value": "rgb(62, 0, 39)" + } + }, + "pink-1600": { + "prop": "--spectrum-pink-1600", + "dark": { + "value": "rgb(255, 255, 255)" + }, + "light": { + "value": "rgb(33, 0, 21)" + } + }, + "pink-200": { + "prop": "--spectrum-pink-200", + "dark": { + "value": "rgb(71, 0, 44)" + }, + "light": { + "value": "rgb(255, 232, 247)" + } + }, + "pink-300": { + "prop": "--spectrum-pink-300", + "dark": { + "value": "rgb(90, 0, 57)" + }, + "light": { + "value": "rgb(255, 211, 240)" + } + }, + "pink-400": { + "prop": "--spectrum-pink-400", + "dark": { + "value": "rgb(115, 7, 75)" + }, + "light": { + "value": "rgb(255, 181, 230)" + } + }, + "pink-500": { + "prop": "--spectrum-pink-500", + "dark": { + "value": "rgb(143, 18, 97)" + }, + "light": { + "value": "rgb(255, 148, 219)" + } + }, + "pink-600": { + "prop": "--spectrum-pink-600", + "dark": { + "value": "rgb(171, 29, 119)" + }, + "light": { + "value": "rgb(255, 103, 204)" + } + }, + "pink-700": { + "prop": "--spectrum-pink-700", + "dark": { + "value": "rgb(196, 39, 138)" + }, + "light": { + "value": "rgb(242, 76, 184)" + } + }, + "pink-800": { + "prop": "--spectrum-pink-800", + "dark": { + "value": "rgb(213, 45, 151)" + }, + "light": { + "value": "rgb(228, 52, 163)" + } + }, + "pink-900": { + "prop": "--spectrum-pink-900", + "dark": { + "value": "rgb(236, 67, 175)" + }, + "light": { + "value": "rgb(206, 42, 146)" + } + }, + "pink-background-color-default": { + "prop": "--spectrum-pink-background-color-default", + "ref": "var(--spectrum-pink-800)", + "light": { + "value": "rgb(206, 42, 146)" + }, + "dark": { + "value": "rgb(213, 45, 151)" + } + }, + "pink-subtle-background-color-default": { + "prop": "--spectrum-pink-subtle-background-color-default", + "ref": "var(--spectrum-pink-300)", + "light": { + "value": "rgb(255, 232, 247)" + }, + "dark": { + "value": "rgb(90, 0, 57)" + } + }, + "pink-visual-color": { + "prop": "--spectrum-pink-visual-color", + "ref": "var(--spectrum-pink-900)", + "light": { + "value": "rgb(228, 52, 163)" + }, + "dark": { + "value": "rgb(236, 67, 175)" + } + }, + "popover-border-color": { + "prop": "--spectrum-popover-border-color", + "light": { + "ref": "var(--spectrum-transparent-white-25)", + "value": "rgba(255, 255, 255, 0)" + }, + "ref": "var(--spectrum-gray-400)", + "dark": { + "value": "rgb(68, 68, 68)" + } + }, + "popover-border-opacity": { + "prop": "--spectrum-popover-border-opacity", + "light": { + "value": "0" + }, + "dark": { + "value": "1.0" + } + }, + "popover-edge-to-content-area": { + "prop": "--spectrum-popover-edge-to-content-area", + "ref": "var(--spectrum-spacing-100)", + "value": "8px" + }, + "popover-tip-height": { + "prop": "--spectrum-popover-tip-height", + "value": "8px" + }, + "popover-tip-width": { + "prop": "--spectrum-popover-tip-width", + "value": "16px" + }, + "popover-top-to-content-area": { + "prop": "--spectrum-popover-top-to-content-area", + "ref": "var(--spectrum-popover-edge-to-content-area)", + "value": "8px" + }, + "positive-background-color-default": { + "prop": "--spectrum-positive-background-color-default", + "ref": "var(--spectrum-positive-color-800)", + "light": { + "value": "rgb(5, 131, 78)" + }, + "dark": { + "value": "rgb(6, 136, 80)" + } + }, + "positive-background-color-down": { + "prop": "--spectrum-positive-background-color-down", + "ref": "var(--spectrum-positive-color-700)", + "light": { + "value": "rgb(3, 110, 69)" + }, + "dark": { + "value": "rgb(4, 124, 75)" + } + }, + "positive-background-color-hover": { + "prop": "--spectrum-positive-background-color-hover", + "ref": "var(--spectrum-positive-color-700)", + "light": { + "value": "rgb(3, 110, 69)" + }, + "dark": { + "value": "rgb(4, 124, 75)" + } + }, + "positive-background-color-key-focus": { + "prop": "--spectrum-positive-background-color-key-focus", + "ref": "var(--spectrum-positive-color-700)", + "light": { + "value": "rgb(3, 110, 69)" + }, + "dark": { + "value": "rgb(4, 124, 75)" + } + }, + "positive-color-100": { + "prop": "--spectrum-positive-color-100", + "ref": "var(--spectrum-green-100)", + "light": { + "value": "rgb(237, 252, 241)" + }, + "dark": { + "value": "rgb(0, 30, 23)" + } + }, + "positive-color-1000": { + "prop": "--spectrum-positive-color-1000", + "ref": "var(--spectrum-green-1000)", + "light": { + "value": "rgb(3, 110, 69)" + }, + "dark": { + "value": "rgb(14, 175, 98)" + } + }, + "positive-color-1100": { + "prop": "--spectrum-positive-color-1100", + "ref": "var(--spectrum-green-1100)", + "light": { + "value": "rgb(2, 93, 60)" + }, + "dark": { + "value": "rgb(24, 193, 110)" + } + }, + "positive-color-1200": { + "prop": "--spectrum-positive-color-1200", + "ref": "var(--spectrum-green-1200)", + "light": { + "value": "rgb(1, 76, 52)" + }, + "dark": { + "value": "rgb(57, 215, 134)" + } + }, + "positive-color-1300": { + "prop": "--spectrum-positive-color-1300", + "ref": "var(--spectrum-green-1300)", + "light": { + "value": "rgb(0, 61, 44)" + }, + "dark": { + "value": "rgb(126, 231, 172)" + } + }, + "positive-color-1400": { + "prop": "--spectrum-positive-color-1400", + "ref": "var(--spectrum-green-1400)", + "light": { + "value": "rgb(0, 46, 34)" + }, + "dark": { + "value": "rgb(189, 241, 208)" + } + }, + "positive-color-1500": { + "prop": "--spectrum-positive-color-1500", + "ref": "var(--spectrum-green-1500)", + "dark": { + "value": "rgb(229, 250, 236)" + }, + "light": { + "value": "rgb(0, 33, 25)" + } + }, + "positive-color-1600": { + "prop": "--spectrum-positive-color-1600", + "ref": "var(--spectrum-green-1600)", + "dark": { + "value": "rgb(255, 255, 255)" + }, + "light": { + "value": "rgb(0, 15, 12)" + } + }, + "positive-color-200": { + "prop": "--spectrum-positive-color-200", + "ref": "var(--spectrum-green-200)", + "light": { + "value": "rgb(215, 247, 225)" + }, + "dark": { + "value": "rgb(0, 38, 29)" + } + }, + "positive-color-300": { + "prop": "--spectrum-positive-color-300", + "ref": "var(--spectrum-green-300)", + "light": { + "value": "rgb(173, 238, 197)" + }, + "dark": { + "value": "rgb(0, 51, 38)" + } + }, + "positive-color-400": { + "prop": "--spectrum-positive-color-400", + "ref": "var(--spectrum-green-400)", + "light": { + "value": "rgb(107, 227, 162)" + }, + "dark": { + "value": "rgb(0, 68, 48)" + } + }, + "positive-color-500": { + "prop": "--spectrum-positive-color-500", + "ref": "var(--spectrum-green-500)", + "light": { + "value": "rgb(43, 209, 125)" + }, + "dark": { + "value": "rgb(2, 87, 58)" + } + }, + "positive-color-600": { + "prop": "--spectrum-positive-color-600", + "ref": "var(--spectrum-green-600)", + "light": { + "value": "rgb(18, 184, 103)" + }, + "dark": { + "value": "rgb(3, 106, 67)" + } + }, + "positive-color-700": { + "prop": "--spectrum-positive-color-700", + "ref": "var(--spectrum-green-700)", + "light": { + "value": "rgb(11, 164, 93)" + }, + "dark": { + "value": "rgb(4, 124, 75)" + } + }, + "positive-color-800": { + "prop": "--spectrum-positive-color-800", + "ref": "var(--spectrum-green-800)", + "light": { + "value": "rgb(7, 147, 85)" + }, + "dark": { + "value": "rgb(6, 136, 80)" + } + }, + "positive-color-900": { + "prop": "--spectrum-positive-color-900", + "ref": "var(--spectrum-green-900)", + "light": { + "value": "rgb(5, 131, 78)" + }, + "dark": { + "value": "rgb(9, 157, 89)" + } + }, + "positive-subtle-background-color-default": { + "prop": "--spectrum-positive-subtle-background-color-default", + "ref": "var(--spectrum-positive-color-300)", + "light": { + "value": "rgb(215, 247, 225)" + }, + "dark": { + "value": "rgb(0, 51, 38)" + } + }, + "positive-visual-color": { + "prop": "--spectrum-positive-visual-color", + "ref": "var(--spectrum-positive-color-900)", + "light": { + "value": "rgb(7, 147, 85)" + }, + "dark": { + "value": "rgb(9, 157, 89)" + } + }, + "progress-bar-maximum-width": { + "prop": "--spectrum-progress-bar-maximum-width", + "value": "768px" + }, + "progress-bar-minimum-width": { + "prop": "--spectrum-progress-bar-minimum-width", + "value": "48px" + }, + "progress-bar-thickness-extra-large": { + "prop": "--spectrum-progress-bar-thickness-extra-large", + "desktop": { + "value": "10px" + }, + "mobile": { + "value": "13px" + } + }, + "progress-bar-thickness-large": { + "prop": "--spectrum-progress-bar-thickness-large", + "desktop": { + "value": "8px" + }, + "mobile": { + "value": "10px" + } + }, + "progress-bar-thickness-medium": { + "prop": "--spectrum-progress-bar-thickness-medium", + "desktop": { + "value": "6px" + }, + "mobile": { + "value": "8px" + } + }, + "progress-bar-thickness-small": { + "prop": "--spectrum-progress-bar-thickness-small", + "desktop": { + "value": "4px" + }, + "mobile": { + "value": "5px" + } + }, + "progress-circle-size-large": { + "prop": "--spectrum-progress-circle-size-large", + "desktop": { + "value": "64px" + }, + "mobile": { + "value": "80px" + } + }, + "progress-circle-size-medium": { + "prop": "--spectrum-progress-circle-size-medium", + "desktop": { + "value": "32px" + }, + "mobile": { + "value": "40px" + } + }, + "progress-circle-size-small": { + "prop": "--spectrum-progress-circle-size-small", + "desktop": { + "value": "16px" + }, + "mobile": { + "value": "20px" + } + }, + "progress-circle-thickness-large": { + "prop": "--spectrum-progress-circle-thickness-large", + "desktop": { + "value": "4px" + }, + "mobile": { + "value": "5px" + } + }, + "progress-circle-thickness-medium": { + "prop": "--spectrum-progress-circle-thickness-medium", + "desktop": { + "value": "3px" + }, + "mobile": { + "value": "4px" + } + }, + "progress-circle-thickness-small": { + "prop": "--spectrum-progress-circle-thickness-small", + "desktop": { + "value": "2px" + }, + "mobile": { + "value": "3px" + } + }, + "purple-100": { + "prop": "--spectrum-purple-100", + "light": { + "value": "rgb(251, 247, 254)" + }, + "dark": { + "value": "rgb(41, 0, 79)" + } + }, + "purple-1000": { + "prop": "--spectrum-purple-1000", + "light": { + "value": "rgb(134, 40, 217)" + }, + "dark": { + "value": "rgb(186, 127, 237)" + } + }, + "purple-1100": { + "prop": "--spectrum-purple-1100", + "light": { + "value": "rgb(115, 13, 204)" + }, + "dark": { + "value": "rgb(197, 149, 240)" + } + }, + "purple-1200": { + "prop": "--spectrum-purple-1200", + "light": { + "value": "rgb(93, 0, 177)" + }, + "dark": { + "value": "rgb(212, 176, 244)" + } + }, + "purple-1300": { + "prop": "--spectrum-purple-1300", + "light": { + "value": "rgb(75, 0, 144)" + }, + "dark": { + "value": "rgb(225, 201, 247)" + } + }, + "purple-1400": { + "prop": "--spectrum-purple-1400", + "light": { + "value": "rgb(59, 0, 111)" + }, + "dark": { + "value": "rgb(238, 224, 250)" + } + }, + "purple-1500": { + "prop": "--spectrum-purple-1500", + "dark": { + "value": "rgb(248, 243, 253)" + }, + "light": { + "value": "rgb(44, 0, 84)" + } + }, + "purple-1600": { + "prop": "--spectrum-purple-1600", + "dark": { + "value": "rgb(255, 255, 255)" + }, + "light": { + "value": "rgb(23, 0, 45)" + } + }, + "purple-200": { + "prop": "--spectrum-purple-200", + "light": { + "value": "rgb(244, 235, 252)" + }, + "dark": { + "value": "rgb(50, 0, 96)" + } + }, + "purple-300": { + "prop": "--spectrum-purple-300", + "light": { + "value": "rgb(235, 218, 249)" + }, + "dark": { + "value": "rgb(64, 0, 122)" + } + }, + "purple-400": { + "prop": "--spectrum-purple-400", + "light": { + "value": "rgb(221, 193, 246)" + }, + "dark": { + "value": "rgb(83, 0, 159)" + } + }, + "purple-500": { + "prop": "--spectrum-purple-500", + "light": { + "value": "rgb(208, 167, 243)" + }, + "dark": { + "value": "rgb(107, 6, 195)" + } + }, + "purple-600": { + "prop": "--spectrum-purple-600", + "light": { + "value": "rgb(191, 138, 238)" + }, + "dark": { + "value": "rgb(130, 34, 215)" + } + }, + "purple-700": { + "prop": "--spectrum-purple-700", + "light": { + "value": "rgb(178, 114, 235)" + }, + "dark": { + "value": "rgb(148, 62, 224)" + } + }, + "purple-800": { + "prop": "--spectrum-purple-800", + "light": { + "value": "rgb(166, 92, 231)" + }, + "dark": { + "value": "rgb(157, 78, 228)" + } + }, + "purple-900": { + "prop": "--spectrum-purple-900", + "light": { + "value": "rgb(154, 71, 226)" + }, + "dark": { + "value": "rgb(173, 105, 233)" + } + }, + "purple-background-color-default": { + "prop": "--spectrum-purple-background-color-default", + "ref": "var(--spectrum-purple-800)", + "light": { + "value": "rgb(154, 71, 226)" + }, + "dark": { + "value": "rgb(157, 78, 228)" + } + }, + "purple-subtle-background-color-default": { + "prop": "--spectrum-purple-subtle-background-color-default", + "ref": "var(--spectrum-purple-300)", + "light": { + "value": "rgb(244, 235, 252)" + }, + "dark": { + "value": "rgb(64, 0, 122)" + } + }, + "purple-visual-color": { + "prop": "--spectrum-purple-visual-color", + "ref": "var(--spectrum-purple-900)", + "light": { + "value": "rgb(166, 92, 231)" + }, + "dark": { + "value": "rgb(173, 105, 233)" + } + }, + "radio-button-control-size-extra-large": { + "prop": "--spectrum-radio-button-control-size-extra-large", + "desktop": { + "value": "18px" + }, + "mobile": { + "value": "22px" + } + }, + "radio-button-control-size-large": { + "prop": "--spectrum-radio-button-control-size-large", + "desktop": { + "value": "16px" + }, + "mobile": { + "value": "20px" + } + }, + "radio-button-control-size-medium": { + "prop": "--spectrum-radio-button-control-size-medium", + "desktop": { + "value": "14px" + }, + "mobile": { + "value": "18px" + } + }, + "radio-button-control-size-small": { + "prop": "--spectrum-radio-button-control-size-small", + "desktop": { + "value": "12px" + }, + "mobile": { + "value": "16px" + } + }, + "radio-button-selection-indicator": { + "prop": "--spectrum-radio-button-selection-indicator", + "value": "4px" + }, + "radio-button-top-to-control-extra-large": { + "prop": "--spectrum-radio-button-top-to-control-extra-large", + "desktop": { + "value": "15px" + }, + "mobile": { + "value": "19px" + } + }, + "radio-button-top-to-control-large": { + "prop": "--spectrum-radio-button-top-to-control-large", + "desktop": { + "value": "12px" + }, + "mobile": { + "value": "15px" + } + }, + "radio-button-top-to-control-medium": { + "prop": "--spectrum-radio-button-top-to-control-medium", + "desktop": { + "value": "9px" + }, + "mobile": { + "value": "11px" + } + }, + "radio-button-top-to-control-small": { + "prop": "--spectrum-radio-button-top-to-control-small", + "desktop": { + "value": "6px" + }, + "mobile": { + "value": "7px" + } + }, + "rating-bottom-to-content-area-medium": { + "prop": "--spectrum-rating-bottom-to-content-area-medium", + "value": "6px" + }, + "rating-bottom-to-content-area-small": { + "prop": "--spectrum-rating-bottom-to-content-area-small", + "ref": "var(--spectrum-spacing-75)", + "value": "4px" + }, + "rating-edge-to-content-area-medium": { + "prop": "--spectrum-rating-edge-to-content-area-medium", + "value": "6px" + }, + "rating-edge-to-content-area-small": { + "prop": "--spectrum-rating-edge-to-content-area-small", + "ref": "var(--spectrum-spacing-75)", + "value": "4px" + }, + "rating-height-medium": { + "prop": "--spectrum-rating-height-medium", + "ref": "var(--spectrum-component-height-100)", + "desktop": { + "value": "32px" + }, + "mobile": { + "value": "40px" + } + }, + "rating-height-small": { + "prop": "--spectrum-rating-height-small", + "ref": "var(--spectrum-component-height-75)", + "desktop": { + "value": "24px" + }, + "mobile": { + "value": "30px" + } + }, + "rating-indicator-to-icon": { + "prop": "--spectrum-rating-indicator-to-icon", + "desktop": { + "value": "4px" + }, + "mobile": { + "value": "5px" + } + }, + "rating-indicator-width": { + "prop": "--spectrum-rating-indicator-width", + "desktop": { + "value": "18px" + }, + "mobile": { + "value": "22px" + } + }, + "rating-top-to-content-area-medium": { + "prop": "--spectrum-rating-top-to-content-area-medium", + "value": "6px" + }, + "rating-top-to-content-area-small": { + "prop": "--spectrum-rating-top-to-content-area-small", + "ref": "var(--spectrum-spacing-75)", + "value": "4px" + }, + "rating-width-medium": { + "prop": "--spectrum-rating-width-medium", + "value": "128px" + }, + "rating-width-small": { + "prop": "--spectrum-rating-width-small", + "value": "104px" + }, + "red-100": { + "prop": "--spectrum-red-100", + "light": { + "value": "rgb(255, 246, 245)" + }, + "dark": { + "value": "rgb(54, 10, 3)" + } + }, + "red-1000": { + "prop": "--spectrum-red-1000", + "light": { + "value": "rgb(183, 40, 24)" + }, + "dark": { + "value": "rgb(255, 103, 86)" + } + }, + "red-1100": { + "prop": "--spectrum-red-1100", + "light": { + "value": "rgb(156, 33, 19)" + }, + "dark": { + "value": "rgb(255, 134, 120)" + } + }, + "red-1200": { + "prop": "--spectrum-red-1200", + "light": { + "value": "rgb(129, 27, 14)" + }, + "dark": { + "value": "rgb(255, 167, 157)" + } + }, + "red-1300": { + "prop": "--spectrum-red-1300", + "light": { + "value": "rgb(104, 21, 10)" + }, + "dark": { + "value": "rgb(255, 196, 189)" + } + }, + "red-1400": { + "prop": "--spectrum-red-1400", + "light": { + "value": "rgb(80, 16, 6)" + }, + "dark": { + "value": "rgb(255, 222, 219)" + } + }, + "red-1500": { + "prop": "--spectrum-red-1500", + "dark": { + "value": "rgb(255, 242, 240)" + }, + "light": { + "value": "rgb(59, 11, 4)" + } + }, + "red-1600": { + "prop": "--spectrum-red-1600", + "dark": { + "value": "rgb(255, 255, 255)" + }, + "light": { + "value": "rgb(29, 5, 2)" + } + }, + "red-200": { + "prop": "--spectrum-red-200", + "light": { + "value": "rgb(255, 235, 232)" + }, + "dark": { + "value": "rgb(68, 13, 5)" + } + }, + "red-300": { + "prop": "--spectrum-red-300", + "light": { + "value": "rgb(255, 214, 209)" + }, + "dark": { + "value": "rgb(87, 17, 7)" + } + }, + "red-400": { + "prop": "--spectrum-red-400", + "light": { + "value": "rgb(255, 188, 180)" + }, + "dark": { + "value": "rgb(115, 24, 11)" + } + }, + "red-500": { + "prop": "--spectrum-red-500", + "light": { + "value": "rgb(255, 157, 145)" + }, + "dark": { + "value": "rgb(147, 31, 17)" + } + }, + "red-600": { + "prop": "--spectrum-red-600", + "light": { + "value": "rgb(255, 118, 101)" + }, + "dark": { + "value": "rgb(177, 38, 23)" + } + }, + "red-700": { + "prop": "--spectrum-red-700", + "light": { + "value": "rgb(255, 81, 61)" + }, + "dark": { + "value": "rgb(205, 46, 29)" + } + }, + "red-800": { + "prop": "--spectrum-red-800", + "light": { + "value": "rgb(240, 56, 35)" + }, + "dark": { + "value": "rgb(223, 52, 34)" + } + }, + "red-900": { + "prop": "--spectrum-red-900", + "light": { + "value": "rgb(215, 50, 32)" + }, + "dark": { + "value": "rgb(252, 67, 46)" + } + }, + "red-background-color-default": { + "prop": "--spectrum-red-background-color-default", + "ref": "var(--spectrum-red-800)", + "light": { + "value": "rgb(215, 50, 32)" + }, + "dark": { + "value": "rgb(223, 52, 34)" + } + }, + "red-subtle-background-color-default": { + "prop": "--spectrum-red-subtle-background-color-default", + "ref": "var(--spectrum-red-300)", + "light": { + "value": "rgb(255, 235, 232)" + }, + "dark": { + "value": "rgb(87, 17, 7)" + } + }, + "red-visual-color": { + "prop": "--spectrum-red-visual-color", + "ref": "var(--spectrum-red-700)", + "light": { + "value": "rgb(240, 56, 35)" + }, + "dark": { + "value": "rgb(205, 46, 29)" + } + }, + "regular-font-weight": { + "prop": "--spectrum-regular-font-weight", + "value": "400" + }, + "sans-serif-font-family": { + "prop": "--spectrum-sans-serif-font-family", + "value": "Adobe Clean" + }, + "seafoam-100": { + "prop": "--spectrum-seafoam-100", + "light": { + "value": "rgb(235, 251, 246)" + }, + "dark": { + "value": "rgb(0, 30, 27)" + } + }, + "seafoam-1000": { + "prop": "--spectrum-seafoam-1000", + "light": { + "value": "rgb(5, 108, 92)" + }, + "dark": { + "value": "rgb(12, 173, 142)" + } + }, + "seafoam-1100": { + "prop": "--spectrum-seafoam-1100", + "light": { + "value": "rgb(3, 92, 80)" + }, + "dark": { + "value": "rgb(14, 190, 156)" + } + }, + "seafoam-1200": { + "prop": "--spectrum-seafoam-1200", + "light": { + "value": "rgb(1, 75, 67)" + }, + "dark": { + "value": "rgb(29, 214, 176)" + } + }, + "seafoam-1300": { + "prop": "--spectrum-seafoam-1300", + "light": { + "value": "rgb(0, 60, 54)" + }, + "dark": { + "value": "rgb(122, 229, 203)" + } + }, + "seafoam-1400": { + "prop": "--spectrum-seafoam-1400", + "light": { + "value": "rgb(0, 46, 40)" + }, + "dark": { + "value": "rgb(186, 241, 222)" + } + }, + "seafoam-1500": { + "prop": "--spectrum-seafoam-1500", + "dark": { + "value": "rgb(229, 249, 243)" + }, + "light": { + "value": "rgb(0, 33, 29)" + } + }, + "seafoam-1600": { + "prop": "--spectrum-seafoam-1600", + "dark": { + "value": "rgb(255, 255, 255)" + }, + "light": { + "value": "rgb(0, 15, 14)" + } + }, + "seafoam-200": { + "prop": "--spectrum-seafoam-200", + "light": { + "value": "rgb(211, 246, 234)" + }, + "dark": { + "value": "rgb(0, 39, 35)" + } + }, + "seafoam-300": { + "prop": "--spectrum-seafoam-300", + "light": { + "value": "rgb(169, 237, 216)" + }, + "dark": { + "value": "rgb(0, 50, 44)" + } + }, + "seafoam-400": { + "prop": "--spectrum-seafoam-400", + "light": { + "value": "rgb(92, 225, 194)" + }, + "dark": { + "value": "rgb(0, 67, 59)" + } + }, + "seafoam-500": { + "prop": "--spectrum-seafoam-500", + "light": { + "value": "rgb(16, 207, 169)" + }, + "dark": { + "value": "rgb(2, 86, 75)" + } + }, + "seafoam-600": { + "prop": "--spectrum-seafoam-600", + "light": { + "value": "rgb(13, 181, 149)" + }, + "dark": { + "value": "rgb(4, 105, 89)" + } + }, + "seafoam-700": { + "prop": "--spectrum-seafoam-700", + "light": { + "value": "rgb(11, 162, 134)" + }, + "dark": { + "value": "rgb(6, 122, 103)" + } + }, + "seafoam-800": { + "prop": "--spectrum-seafoam-800", + "light": { + "value": "rgb(9, 144, 120)" + }, + "dark": { + "value": "rgb(8, 134, 112)" + } + }, + "seafoam-900": { + "prop": "--spectrum-seafoam-900", + "light": { + "value": "rgb(7, 129, 109)" + }, + "dark": { + "value": "rgb(10, 154, 128)" + } + }, + "seafoam-background-color-default": { + "prop": "--spectrum-seafoam-background-color-default", + "ref": "var(--spectrum-seafoam-800)", + "light": { + "value": "rgb(7, 129, 109)" + }, + "dark": { + "value": "rgb(8, 134, 112)" + } + }, + "seafoam-subtle-background-color-default": { + "prop": "--spectrum-seafoam-subtle-background-color-default", + "ref": "var(--spectrum-seafoam-300)", + "light": { + "value": "rgb(211, 246, 234)" + }, + "dark": { + "value": "rgb(0, 50, 44)" + } + }, + "seafoam-visual-color": { + "prop": "--spectrum-seafoam-visual-color", + "ref": "var(--spectrum-seafoam-800)", + "light": { + "value": "rgb(11, 162, 134)" + }, + "dark": { + "value": "rgb(8, 134, 112)" + } + }, + "search-field-minimum-width-multiplier": { + "prop": "--spectrum-search-field-minimum-width-multiplier", + "value": 4 + }, + "segmented-control-item-height": { + "prop": "--spectrum-segmented-control-item-height", + "ref": "var(--spectrum-component-height-100)", + "desktop": { + "value": "32px" + }, + "mobile": { + "value": "40px" + } + }, + "segmented-control-selection-border-width": { + "prop": "--spectrum-segmented-control-selection-border-width", + "ref": "var(--spectrum-border-width-200)", + "value": "2px" + }, + "select-box-edge-to-checkbox": { + "prop": "--spectrum-select-box-edge-to-checkbox", + "desktop": { + "value": "12px" + }, + "mobile": { + "value": "15px" + } + }, + "select-box-horizontal-end-to-content": { + "prop": "--spectrum-select-box-horizontal-end-to-content", + "desktop": { + "value": "32px" + }, + "mobile": { + "value": "40px" + } + }, + "select-box-horizontal-illustration-to-label": { + "prop": "--spectrum-select-box-horizontal-illustration-to-label", + "desktop": { + "value": "10px" + }, + "mobile": { + "value": "12px" + } + }, + "select-box-horizontal-label-to-description": { + "prop": "--spectrum-select-box-horizontal-label-to-description", + "desktop": { + "value": "2px" + }, + "mobile": { + "value": "3px" + } + }, + "select-box-horizontal-minimum-height": { + "prop": "--spectrum-select-box-horizontal-minimum-height", + "desktop": { + "value": "80px" + }, + "mobile": { + "value": "100px" + } + }, + "select-box-horizontal-start-to-content": { + "prop": "--spectrum-select-box-horizontal-start-to-content", + "desktop": { + "value": "24px" + }, + "mobile": { + "value": "30px" + } + }, + "select-box-horizontal-top-to-content": { + "prop": "--spectrum-select-box-horizontal-top-to-content", + "desktop": { + "value": "16px" + }, + "mobile": { + "value": "20px" + } + }, + "select-box-horizontal-width": { + "prop": "--spectrum-select-box-horizontal-width", + "desktop": { + "value": "368px" + }, + "mobile": { + "value": "460px" + } + }, + "select-box-selected-border-color": { + "prop": "--spectrum-select-box-selected-border-color", + "ref": "var(--spectrum-gray-800)", + "light": { + "value": "rgb(41, 41, 41)" + }, + "dark": { + "value": "rgb(219, 219, 219)" + } + }, + "select-box-top-to-checkbox": { + "prop": "--spectrum-select-box-top-to-checkbox", + "desktop": { + "value": "4px" + }, + "mobile": { + "value": "5px" + } + }, + "select-box-vertical-edge-to-content": { + "prop": "--spectrum-select-box-vertical-edge-to-content", + "desktop": { + "value": "24px" + }, + "mobile": { + "value": "30px" + } + }, + "select-box-vertical-height": { + "prop": "--spectrum-select-box-vertical-height", + "desktop": { + "value": "170px" + }, + "mobile": { + "value": "212px" + } + }, + "select-box-vertical-illustration-to-label": { + "prop": "--spectrum-select-box-vertical-illustration-to-label", + "desktop": { + "value": "8px" + }, + "mobile": { + "value": "10px" + } + }, + "serif-font-family": { + "prop": "--spectrum-serif-font-family", + "value": "Adobe Clean Serif" + }, + "side-focus-indicator": { + "prop": "--spectrum-side-focus-indicator", + "value": "4px" + }, + "side-label-character-count-to-field": { + "prop": "--spectrum-side-label-character-count-to-field", + "desktop": { + "value": "12px" + }, + "mobile": { + "value": "15px" + } + }, + "side-label-character-count-top-margin-extra-large": { + "prop": "--spectrum-side-label-character-count-top-margin-extra-large", + "value": "0px" + }, + "side-label-character-count-top-margin-large": { + "prop": "--spectrum-side-label-character-count-top-margin-large", + "value": "0px" + }, + "side-label-character-count-top-margin-medium": { + "prop": "--spectrum-side-label-character-count-top-margin-medium", + "value": "0px" + }, + "side-label-character-count-top-margin-small": { + "prop": "--spectrum-side-label-character-count-top-margin-small", + "value": "0px" + }, + "side-navigation-bottom-to-text": { + "prop": "--spectrum-side-navigation-bottom-to-text", + "desktop": { + "value": "8px" + }, + "mobile": { + "value": "10px" + } + }, + "side-navigation-header-to-item": { + "prop": "--spectrum-side-navigation-header-to-item", + "desktop": { + "value": "8px" + }, + "mobile": { + "value": "10px" + } + }, + "side-navigation-item-to-header": { + "prop": "--spectrum-side-navigation-item-to-header", + "desktop": { + "value": "24px" + }, + "mobile": { + "value": "30px" + } + }, + "side-navigation-item-to-item": { + "prop": "--spectrum-side-navigation-item-to-item", + "desktop": { + "value": "4px" + }, + "mobile": { + "value": "5px" + } + }, + "side-navigation-maximum-width": { + "prop": "--spectrum-side-navigation-maximum-width", + "desktop": { + "value": "240px" + }, + "mobile": { + "value": "300px" + } + }, + "side-navigation-minimum-width": { + "prop": "--spectrum-side-navigation-minimum-width", + "desktop": { + "value": "160px" + }, + "mobile": { + "value": "200px" + } + }, + "side-navigation-second-level-edge-to-text": { + "prop": "--spectrum-side-navigation-second-level-edge-to-text", + "desktop": { + "value": "24px" + }, + "mobile": { + "value": "30px" + } + }, + "side-navigation-third-level-edge-to-text": { + "prop": "--spectrum-side-navigation-third-level-edge-to-text", + "desktop": { + "value": "36px" + }, + "mobile": { + "value": "45px" + } + }, + "side-navigation-width": { + "prop": "--spectrum-side-navigation-width", + "desktop": { + "value": "192px" + }, + "mobile": { + "value": "240px" + } + }, + "side-navigation-with-icon-second-level-edge-to-text": { + "prop": "--spectrum-side-navigation-with-icon-second-level-edge-to-text", + "desktop": { + "value": "50px" + }, + "mobile": { + "value": "62px" + } + }, + "side-navigation-with-icon-third-level-edge-to-text": { + "prop": "--spectrum-side-navigation-with-icon-third-level-edge-to-text", + "desktop": { + "value": "62px" + }, + "mobile": { + "value": "77px" + } + }, + "silver-100": { + "prop": "--spectrum-silver-100", + "dark": { + "value": "rgb(26, 26, 26)" + }, + "light": { + "value": "rgb(247, 247, 247)" + } + }, + "silver-1000": { + "prop": "--spectrum-silver-1000", + "dark": { + "value": "rgb(152, 152, 152)" + }, + "light": { + "value": "rgb(96, 96, 96)" + } + }, + "silver-1100": { + "prop": "--spectrum-silver-1100", + "dark": { + "value": "rgb(169, 169, 169)" + }, + "light": { + "value": "rgb(81, 81, 81)" + } + }, + "silver-1200": { + "prop": "--spectrum-silver-1200", + "dark": { + "value": "rgb(190, 190, 190)" + }, + "light": { + "value": "rgb(66, 66, 66)" + } + }, + "silver-1300": { + "prop": "--spectrum-silver-1300", + "dark": { + "value": "rgb(211, 211, 211)" + }, + "light": { + "value": "rgb(52, 52, 52)" + } + }, + "silver-1400": { + "prop": "--spectrum-silver-1400", + "dark": { + "value": "rgb(229, 229, 229)" + }, + "light": { + "value": "rgb(39, 39, 39)" + } + }, + "silver-1500": { + "prop": "--spectrum-silver-1500", + "dark": { + "value": "rgb(244, 244, 244)" + }, + "light": { + "value": "rgb(28, 28, 28)" + } + }, + "silver-1600": { + "prop": "--spectrum-silver-1600", + "dark": { + "value": "rgb(255, 255, 255)" + }, + "light": { + "value": "rgb(12, 12, 12)" + } + }, + "silver-200": { + "prop": "--spectrum-silver-200", + "dark": { + "value": "rgb(33, 33, 33)" + }, + "light": { + "value": "rgb(239, 239, 239)" + } + }, + "silver-300": { + "prop": "--spectrum-silver-300", + "dark": { + "value": "rgb(44, 44, 44)" + }, + "light": { + "value": "rgb(223, 223, 223)" + } + }, + "silver-400": { + "prop": "--spectrum-silver-400", + "dark": { + "value": "rgb(59, 59, 59)" + }, + "light": { + "value": "rgb(204, 204, 204)" + } + }, + "silver-500": { + "prop": "--spectrum-silver-500", + "dark": { + "value": "rgb(76, 76, 76)" + }, + "light": { + "value": "rgb(183, 183, 183)" + } + }, + "silver-600": { + "prop": "--spectrum-silver-600", + "dark": { + "value": "rgb(92, 92, 92)" + }, + "light": { + "value": "rgb(160, 160, 160)" + } + }, + "silver-700": { + "prop": "--spectrum-silver-700", + "dark": { + "value": "rgb(108, 108, 108)" + }, + "light": { + "value": "rgb(143, 143, 143)" + } + }, + "silver-800": { + "prop": "--spectrum-silver-800", + "dark": { + "value": "rgb(118, 118, 118)" + }, + "light": { + "value": "rgb(128, 128, 128)" + } + }, + "silver-900": { + "prop": "--spectrum-silver-900", + "dark": { + "value": "rgb(137, 137, 137)" + }, + "light": { + "value": "rgb(114, 114, 114)" + } + }, + "silver-background-color-default": { + "prop": "--spectrum-silver-background-color-default", + "ref": "var(--spectrum-silver-800)", + "light": { + "value": "rgb(114, 114, 114)" + }, + "dark": { + "value": "rgb(118, 118, 118)" + } + }, + "silver-subtle-background-color-default": { + "prop": "--spectrum-silver-subtle-background-color-default", + "ref": "var(--spectrum-silver-300)", + "light": { + "value": "rgb(239, 239, 239)" + }, + "dark": { + "value": "rgb(44, 44, 44)" + } + }, + "silver-visual-color": { + "prop": "--spectrum-silver-visual-color", + "ref": "var(--spectrum-silver-900)", + "light": { + "value": "rgb(128, 128, 128)" + }, + "dark": { + "value": "rgb(137, 137, 137)" + } + }, + "slider-bottom-to-handle-extra-large": { + "prop": "--spectrum-slider-bottom-to-handle-extra-large", + "desktop": { + "value": "14px" + }, + "mobile": { + "value": "17px" + } + }, + "slider-bottom-to-handle-large": { + "prop": "--spectrum-slider-bottom-to-handle-large", + "desktop": { + "value": "11px" + }, + "mobile": { + "value": "14px" + } + }, + "slider-bottom-to-handle-medium": { + "prop": "--spectrum-slider-bottom-to-handle-medium", + "desktop": { + "value": "8px" + }, + "mobile": { + "value": "10px" + } + }, + "slider-bottom-to-handle-small": { + "prop": "--spectrum-slider-bottom-to-handle-small", + "desktop": { + "value": "5px" + }, + "mobile": { + "value": "6px" + } + }, + "slider-control-height-extra-large": { + "prop": "--spectrum-slider-control-height-extra-large", + "desktop": { + "value": "20px" + }, + "mobile": { + "value": "26px" + } + }, + "slider-control-height-large": { + "prop": "--spectrum-slider-control-height-large", + "desktop": { + "value": "18px" + }, + "mobile": { + "value": "22px" + } + }, + "slider-control-height-medium": { + "prop": "--spectrum-slider-control-height-medium", + "desktop": { + "value": "16px" + }, + "mobile": { + "value": "20px" + } + }, + "slider-control-height-small": { + "prop": "--spectrum-slider-control-height-small", + "desktop": { + "value": "14px" + }, + "mobile": { + "value": "18px" + } + }, + "slider-control-to-field-label-editable-extra-large": { + "prop": "--spectrum-slider-control-to-field-label-editable-extra-large", + "desktop": { + "value": "-20px" + }, + "mobile": { + "value": "-24px" + } + }, + "slider-control-to-field-label-editable-large": { + "prop": "--spectrum-slider-control-to-field-label-editable-large", + "desktop": { + "value": "-16px" + }, + "mobile": { + "value": "-20px" + } + }, + "slider-control-to-field-label-editable-medium": { + "prop": "--spectrum-slider-control-to-field-label-editable-medium", + "desktop": { + "value": "-12px" + }, + "mobile": { + "value": "-16px" + } + }, + "slider-control-to-field-label-editable-small": { + "prop": "--spectrum-slider-control-to-field-label-editable-small", + "desktop": { + "value": "-4px" + }, + "mobile": { + "value": "-8px" + } + }, + "slider-control-to-field-label-extra-large": { + "prop": "--spectrum-slider-control-to-field-label-extra-large", + "desktop": { + "value": "-20px" + }, + "mobile": { + "value": "-28px" + } + }, + "slider-control-to-field-label-large": { + "prop": "--spectrum-slider-control-to-field-label-large", + "desktop": { + "value": "-16px" + }, + "mobile": { + "value": "-20px" + } + }, + "slider-control-to-field-label-medium": { + "prop": "--spectrum-slider-control-to-field-label-medium", + "desktop": { + "value": "-12px" + }, + "mobile": { + "value": "-16px" + } + }, + "slider-control-to-field-label-side-extra-large": { + "prop": "--spectrum-slider-control-to-field-label-side-extra-large", + "desktop": { + "value": "24px" + }, + "mobile": { + "value": "28px" + } + }, + "slider-control-to-field-label-side-large": { + "prop": "--spectrum-slider-control-to-field-label-side-large", + "desktop": { + "value": "20px" + }, + "mobile": { + "value": "24px" + } + }, + "slider-control-to-field-label-side-medium": { + "prop": "--spectrum-slider-control-to-field-label-side-medium", + "desktop": { + "value": "16px" + }, + "mobile": { + "value": "20px" + } + }, + "slider-control-to-field-label-side-small": { + "prop": "--spectrum-slider-control-to-field-label-side-small", + "desktop": { + "value": "16px" + }, + "mobile": { + "value": "20px" + } + }, + "slider-control-to-field-label-small": { + "prop": "--spectrum-slider-control-to-field-label-small", + "desktop": { + "value": "-4px" + }, + "mobile": { + "value": "-8px" + } + }, + "slider-control-to-text-field-extra-large": { + "prop": "--spectrum-slider-control-to-text-field-extra-large", + "desktop": { + "value": "24px" + }, + "mobile": { + "value": "28px" + } + }, + "slider-control-to-text-field-large": { + "prop": "--spectrum-slider-control-to-text-field-large", + "desktop": { + "value": "20px" + }, + "mobile": { + "value": "24px" + } + }, + "slider-control-to-text-field-medium": { + "prop": "--spectrum-slider-control-to-text-field-medium", + "desktop": { + "value": "16px" + }, + "mobile": { + "value": "20px" + } + }, + "slider-control-to-text-field-small": { + "prop": "--spectrum-slider-control-to-text-field-small", + "desktop": { + "value": "16px" + }, + "mobile": { + "value": "20px" + } + }, + "slider-handle-border-width-down-extra-large": { + "prop": "--spectrum-slider-handle-border-width-down-extra-large", + "desktop": { + "value": "8px" + }, + "mobile": { + "value": "11px" + } + }, + "slider-handle-border-width-down-large": { + "prop": "--spectrum-slider-handle-border-width-down-large", + "desktop": { + "value": "7px" + }, + "mobile": { + "value": "9px" + } + }, + "slider-handle-border-width-down-medium": { + "prop": "--spectrum-slider-handle-border-width-down-medium", + "desktop": { + "value": "6px" + }, + "mobile": { + "value": "8px" + } + }, + "slider-handle-border-width-down-small": { + "prop": "--spectrum-slider-handle-border-width-down-small", + "desktop": { + "value": "5px" + }, + "mobile": { + "value": "7px" + } + }, + "slider-handle-extra-large": { + "prop": "--spectrum-slider-handle-extra-large", + "desktop": { + "value": "24px" + }, + "mobile": { + "value": "30px" + } + }, + "slider-handle-gap": { + "prop": "--spectrum-slider-handle-gap", + "value": "4px" + }, + "slider-handle-height-precision-extra-large": { + "prop": "--spectrum-slider-handle-height-precision-extra-large", + "desktop": { + "value": "26px" + }, + "mobile": { + "value": "32px" + } + }, + "slider-handle-height-precision-large": { + "prop": "--spectrum-slider-handle-height-precision-large", + "desktop": { + "value": "24px" + }, + "mobile": { + "value": "30px" + } + }, + "slider-handle-height-precision-medium": { + "prop": "--spectrum-slider-handle-height-precision-medium", + "desktop": { + "value": "22px" + }, + "mobile": { + "value": "26px" + } + }, + "slider-handle-height-precision-small": { + "prop": "--spectrum-slider-handle-height-precision-small", + "desktop": { + "value": "20px" + }, + "mobile": { + "value": "24px" + } + }, + "slider-handle-large": { + "prop": "--spectrum-slider-handle-large", + "desktop": { + "value": "22px" + }, + "mobile": { + "value": "28px" + } + }, + "slider-handle-medium": { + "prop": "--spectrum-slider-handle-medium", + "desktop": { + "value": "20px" + }, + "mobile": { + "value": "24px" + } + }, + "slider-handle-precision-width": { + "prop": "--spectrum-slider-handle-precision-width", + "value": "6px" + }, + "slider-handle-size-extra-large": { + "prop": "--spectrum-slider-handle-size-extra-large", + "desktop": { + "value": "20px" + }, + "mobile": { + "value": "26px" + } + }, + "slider-handle-size-large": { + "prop": "--spectrum-slider-handle-size-large", + "desktop": { + "value": "18px" + }, + "mobile": { + "value": "22px" + } + }, + "slider-handle-size-medium": { + "prop": "--spectrum-slider-handle-size-medium", + "desktop": { + "value": "16px" + }, + "mobile": { + "value": "20px" + } + }, + "slider-handle-size-small": { + "prop": "--spectrum-slider-handle-size-small", + "desktop": { + "value": "14px" + }, + "mobile": { + "value": "18px" + } + }, + "slider-handle-small": { + "prop": "--spectrum-slider-handle-small", + "desktop": { + "value": "18px" + }, + "mobile": { + "value": "22px" + } + }, + "slider-track-height-large": { + "prop": "--spectrum-slider-track-height-large", + "value": "16px" + }, + "slider-track-height-medium": { + "prop": "--spectrum-slider-track-height-medium", + "value": "4px" + }, + "slider-track-thickness": { + "prop": "--spectrum-slider-track-thickness", + "value": "2px" + }, + "spacing-100": { + "prop": "--spectrum-spacing-100", + "value": "8px" + }, + "spacing-1000": { + "prop": "--spectrum-spacing-1000", + "value": "96px" + }, + "spacing-200": { + "prop": "--spectrum-spacing-200", + "value": "12px" + }, + "spacing-300": { + "prop": "--spectrum-spacing-300", + "value": "16px" + }, + "spacing-400": { + "prop": "--spectrum-spacing-400", + "value": "24px" + }, + "spacing-50": { + "prop": "--spectrum-spacing-50", + "value": "2px" + }, + "spacing-500": { + "prop": "--spectrum-spacing-500", + "value": "32px" + }, + "spacing-600": { + "prop": "--spectrum-spacing-600", + "value": "40px" + }, + "spacing-700": { + "prop": "--spectrum-spacing-700", + "value": "48px" + }, + "spacing-75": { + "prop": "--spectrum-spacing-75", + "value": "4px" + }, + "spacing-800": { + "prop": "--spectrum-spacing-800", + "value": "64px" + }, + "spacing-900": { + "prop": "--spectrum-spacing-900", + "value": "80px" + }, + "standard-dialog-body-font-size": { + "prop": "--spectrum-standard-dialog-body-font-size", + "ref": "var(--spectrum-body-size-s)", + "desktop": { + "value": "16px" + }, + "mobile": { + "value": "17px" + } + }, + "standard-dialog-maximum-width-large": { + "prop": "--spectrum-standard-dialog-maximum-width-large", + "value": "640px" + }, + "standard-dialog-maximum-width-medium": { + "prop": "--spectrum-standard-dialog-maximum-width-medium", + "value": "480px" + }, + "standard-dialog-maximum-width-small": { + "prop": "--spectrum-standard-dialog-maximum-width-small", + "value": "400px" + }, + "standard-dialog-minimum-width": { + "prop": "--spectrum-standard-dialog-minimum-width", + "value": "288px" + }, + "standard-dialog-title-font-size": { + "prop": "--spectrum-standard-dialog-title-font-size", + "ref": "var(--spectrum-title-size-xl)", + "desktop": { + "value": "22px" + }, + "mobile": { + "value": "24px" + } + }, + "standard-panel-edge-to-close-button-compact": { + "prop": "--spectrum-standard-panel-edge-to-close-button-compact", + "value": "3px" + }, + "standard-panel-edge-to-close-button-regular": { + "prop": "--spectrum-standard-panel-edge-to-close-button-regular", + "value": "7px" + }, + "standard-panel-edge-to-close-button-spacious": { + "prop": "--spectrum-standard-panel-edge-to-close-button-spacious", + "value": "15px" + }, + "standard-panel-gripper-color": { + "prop": "--spectrum-standard-panel-gripper-color", + "ref": "var(--spectrum-gray-200)", + "light": { + "value": "rgb(225, 225, 225)" + }, + "dark": { + "value": "rgb(50, 50, 50)" + } + }, + "standard-panel-gripper-color-drag": { + "prop": "--spectrum-standard-panel-gripper-color-drag", + "ref": "var(--spectrum-gray-800)", + "light": { + "value": "rgb(41, 41, 41)" + }, + "dark": { + "value": "rgb(219, 219, 219)" + } + }, + "standard-panel-maximum-width": { + "prop": "--spectrum-standard-panel-maximum-width", + "value": "400px" + }, + "standard-panel-minimum-width": { + "prop": "--spectrum-standard-panel-minimum-width", + "value": "200px" + }, + "standard-panel-title-font-size": { + "prop": "--spectrum-standard-panel-title-font-size", + "ref": "var(--spectrum-title-size-s)", + "desktop": { + "value": "14px" + }, + "mobile": { + "value": "17px" + } + }, + "standard-panel-top-to-close-button-compact": { + "prop": "--spectrum-standard-panel-top-to-close-button-compact", + "value": "5px" + }, + "standard-panel-top-to-close-button-regular": { + "prop": "--spectrum-standard-panel-top-to-close-button-regular", + "value": "9px" + }, + "standard-panel-top-to-close-button-spacious": { + "prop": "--spectrum-standard-panel-top-to-close-button-spacious", + "value": "17px" + }, + "standard-panel-width": { + "prop": "--spectrum-standard-panel-width", + "value": "260px" + }, + "static-black-focus-indicator-color": { + "prop": "--spectrum-static-black-focus-indicator-color", + "ref": "var(--spectrum-black)", + "value": "rgb(0, 0, 0)" + }, + "static-black-text-color": { + "prop": "--spectrum-static-black-text-color", + "ref": "var(--spectrum-black)", + "value": "rgb(0, 0, 0)" + }, + "static-black-track-color": { + "prop": "--spectrum-static-black-track-color", + "ref": "var(--spectrum-transparent-black-300)", + "value": "rgba(0, 0, 0, 0.15)" + }, + "static-black-track-indicator-color": { + "prop": "--spectrum-static-black-track-indicator-color", + "ref": "var(--spectrum-transparent-black-900)", + "value": "rgba(0, 0, 0, 0.93)" + }, + "static-blue-1000": { + "prop": "--spectrum-static-blue-1000", + "value": "rgb(39, 77, 234)" + }, + "static-blue-900": { + "prop": "--spectrum-static-blue-900", + "value": "rgb(59, 99, 251)" + }, + "static-fuchsia-1000": { + "prop": "--spectrum-static-fuchsia-1000", + "value": "rgb(156, 40, 175)" + }, + "static-fuchsia-900": { + "prop": "--spectrum-static-fuchsia-900", + "value": "rgb(181, 57, 200)" + }, + "static-indigo-1000": { + "prop": "--spectrum-static-indigo-1000", + "value": "rgb(99, 56, 238)" + }, + "static-indigo-900": { + "prop": "--spectrum-static-indigo-900", + "value": "rgb(113, 85, 250)" + }, + "static-magenta-1000": { + "prop": "--spectrum-static-magenta-1000", + "value": "rgb(186, 22, 80)" + }, + "static-magenta-900": { + "prop": "--spectrum-static-magenta-900", + "value": "rgb(217, 35, 97)" + }, + "static-red-1000": { + "prop": "--spectrum-static-red-1000", + "value": "rgb(183, 40, 24)" + }, + "static-red-900": { + "prop": "--spectrum-static-red-900", + "value": "rgb(215, 50, 32)" + }, + "static-white-focus-indicator-color": { + "prop": "--spectrum-static-white-focus-indicator-color", + "ref": "var(--spectrum-white)", + "value": "rgb(255, 255, 255)" + }, + "static-white-text-color": { + "prop": "--spectrum-static-white-text-color", + "ref": "var(--spectrum-white)", + "value": "rgb(255, 255, 255)" + }, + "static-white-track-color": { + "prop": "--spectrum-static-white-track-color", + "ref": "var(--spectrum-transparent-white-300)", + "value": "rgba(255, 255, 255, 0.17)" }, - "seafoam-400": { - "prop": "--spectrum-seafoam-400", - "light": { - "value": "rgb(92, 225, 194)" - }, - "dark": { - "value": "rgb(0, 67, 59)" - } + "static-white-track-indicator-color": { + "prop": "--spectrum-static-white-track-indicator-color", + "ref": "var(--spectrum-transparent-white-900)", + "value": "rgba(255, 255, 255, 0.94)" }, - "seafoam-500": { - "prop": "--spectrum-seafoam-500", - "light": { - "value": "rgb(16, 207, 169)" + "status-light-dot-size-extra-large": { + "prop": "--spectrum-status-light-dot-size-extra-large", + "desktop": { + "value": "14px" }, - "dark": { - "value": "rgb(2, 86, 75)" + "mobile": { + "value": "16px" } }, - "seafoam-600": { - "prop": "--spectrum-seafoam-600", - "light": { - "value": "rgb(13, 181, 149)" + "status-light-dot-size-large": { + "prop": "--spectrum-status-light-dot-size-large", + "desktop": { + "value": "12px" }, - "dark": { - "value": "rgb(4, 105, 89)" + "mobile": { + "value": "14px" } }, - "seafoam-700": { - "prop": "--spectrum-seafoam-700", - "light": { - "value": "rgb(11, 162, 134)" + "status-light-dot-size-medium": { + "prop": "--spectrum-status-light-dot-size-medium", + "desktop": { + "value": "10px" }, - "dark": { - "value": "rgb(6, 122, 103)" + "mobile": { + "value": "12px" } }, - "seafoam-800": { - "prop": "--spectrum-seafoam-800", - "light": { - "value": "rgb(9, 144, 120)" + "status-light-dot-size-small": { + "prop": "--spectrum-status-light-dot-size-small", + "desktop": { + "value": "8px" }, - "dark": { - "value": "rgb(8, 134, 112)" + "mobile": { + "value": "10px" } }, - "seafoam-900": { - "prop": "--spectrum-seafoam-900", - "light": { - "value": "rgb(7, 129, 109)" + "status-light-text-to-visual-100": { + "prop": "--spectrum-status-light-text-to-visual-100", + "ref": "var(--spectrum-text-to-visual-100)", + "desktop": { + "value": "6px" }, - "dark": { - "value": "rgb(10, 154, 128)" + "mobile": { + "value": "8px" } }, - "seafoam-background-color-default": { - "prop": "--spectrum-seafoam-background-color-default", - "ref": "var(--spectrum-seafoam-800)", - "light": { - "value": "rgb(7, 129, 109)" + "status-light-text-to-visual-200": { + "prop": "--spectrum-status-light-text-to-visual-200", + "ref": "var(--spectrum-text-to-visual-200)", + "desktop": { + "value": "7px" }, - "dark": { - "value": "rgb(8, 134, 112)" + "mobile": { + "value": "9px" } }, - "seafoam-subtle-background-color-default": { - "prop": "--spectrum-seafoam-subtle-background-color-default", - "ref": "var(--spectrum-seafoam-300)", - "light": { - "value": "rgb(211, 246, 234)" + "status-light-text-to-visual-300": { + "prop": "--spectrum-status-light-text-to-visual-300", + "ref": "var(--spectrum-text-to-visual-300)", + "desktop": { + "value": "8px" }, - "dark": { - "value": "rgb(0, 50, 44)" + "mobile": { + "value": "10px" } }, - "seafoam-visual-color": { - "prop": "--spectrum-seafoam-visual-color", - "ref": "var(--spectrum-seafoam-800)", - "light": { - "value": "rgb(11, 162, 134)" + "status-light-text-to-visual-75": { + "prop": "--spectrum-status-light-text-to-visual-75", + "ref": "var(--spectrum-text-to-visual-75)", + "desktop": { + "value": "5px" }, - "dark": { - "value": "rgb(8, 134, 112)" + "mobile": { + "value": "7px" } }, - "search-field-minimum-width-multiplier": { - "prop": "--spectrum-search-field-minimum-width-multiplier", - "value": "3" - }, - "serif-font-family": { - "prop": "--spectrum-serif-font-family", - "value": "Adobe Clean Serif" - }, - "side-label-character-count-to-field": { - "prop": "--spectrum-side-label-character-count-to-field", + "status-light-top-to-dot-extra-large": { + "prop": "--spectrum-status-light-top-to-dot-extra-large", "desktop": { - "value": "12px" + "value": "17px" }, "mobile": { - "value": "15px" + "value": "22px" } }, - "side-label-character-count-top-margin-extra-large": { - "prop": "--spectrum-side-label-character-count-top-margin-extra-large", + "status-light-top-to-dot-large": { + "prop": "--spectrum-status-light-top-to-dot-large", "desktop": { "value": "14px" }, @@ -9723,8 +13174,8 @@ "value": "18px" } }, - "side-label-character-count-top-margin-large": { - "prop": "--spectrum-side-label-character-count-top-margin-large", + "status-light-top-to-dot-medium": { + "prop": "--spectrum-status-light-top-to-dot-medium", "desktop": { "value": "11px" }, @@ -9732,8 +13183,8 @@ "value": "14px" } }, - "side-label-character-count-top-margin-medium": { - "prop": "--spectrum-side-label-character-count-top-margin-medium", + "status-light-top-to-dot-small": { + "prop": "--spectrum-status-light-top-to-dot-small", "desktop": { "value": "8px" }, @@ -9741,35 +13192,80 @@ "value": "10px" } }, - "side-label-character-count-top-margin-small": { - "prop": "--spectrum-side-label-character-count-top-margin-small", + "swatch-border-color": { + "prop": "--spectrum-swatch-border-color", + "ref": "var(--spectrum-gray-1000)", + "dark": { + "value": "rgb(255, 255, 255)" + }, + "light": { + "value": "rgb(0, 0, 0)" + } + }, + "swatch-border-opacity": { + "prop": "--spectrum-swatch-border-opacity", + "value": "0.42" + }, + "swatch-disabled-icon-border-color": { + "prop": "--spectrum-swatch-disabled-icon-border-color", + "ref": "var(--spectrum-black)", + "value": "rgb(0, 0, 0)" + }, + "swatch-disabled-icon-border-opacity": { + "prop": "--spectrum-swatch-disabled-icon-border-opacity", + "value": "0.42" + }, + "swatch-group-border-color": { + "prop": "--spectrum-swatch-group-border-color", + "ref": "var(--spectrum-gray-1000)", + "dark": { + "value": "rgb(255, 255, 255)" + }, + "light": { + "value": "rgb(0, 0, 0)" + } + }, + "swatch-group-border-opacity": { + "prop": "--spectrum-swatch-group-border-opacity", + "value": "0.2" + }, + "swatch-group-spacing-spacious": { + "prop": "--spectrum-swatch-group-spacing-spacious", + "value": "6px" + }, + "swatch-rectangle-width-multiplier": { + "prop": "--spectrum-swatch-rectangle-width-multiplier", + "value": 2 + }, + "swatch-size-extra-small": { + "prop": "--spectrum-swatch-size-extra-small", "desktop": { - "value": "4px" + "value": "16px" }, "mobile": { - "value": "5px" + "value": "20px" } }, - "side-navigation-bottom-to-text": { - "prop": "--spectrum-side-navigation-bottom-to-text", + "swatch-size-large": { + "prop": "--spectrum-swatch-size-large", "desktop": { - "value": "8px" + "value": "40px" }, "mobile": { - "value": "10px" + "value": "50px" } }, - "side-navigation-header-to-item": { - "prop": "--spectrum-side-navigation-header-to-item", + "swatch-size-medium": { + "prop": "--spectrum-swatch-size-medium", "desktop": { - "value": "8px" + "value": "32px" }, "mobile": { - "value": "10px" + "value": "40px" } }, - "side-navigation-item-to-header": { - "prop": "--spectrum-side-navigation-item-to-header", + "swatch-size-small": { + "prop": "--spectrum-swatch-size-small", "desktop": { "value": "24px" }, @@ -9777,560 +13273,513 @@ "value": "30px" } }, - "side-navigation-item-to-item": { - "prop": "--spectrum-side-navigation-item-to-item", + "swatch-slash-thickness-extra-small": { + "prop": "--spectrum-swatch-slash-thickness-extra-small", + "value": "2px" + }, + "swatch-slash-thickness-large": { + "prop": "--spectrum-swatch-slash-thickness-large", + "value": "5px" + }, + "swatch-slash-thickness-medium": { + "prop": "--spectrum-swatch-slash-thickness-medium", + "value": "4px" + }, + "swatch-slash-thickness-small": { + "prop": "--spectrum-swatch-slash-thickness-small", + "value": "3px" + }, + "switch-control-height-extra-large": { + "prop": "--spectrum-switch-control-height-extra-large", "desktop": { - "value": "4px" + "value": "20px" }, "mobile": { - "value": "5px" + "value": "26px" } }, - "side-navigation-maximum-width": { - "prop": "--spectrum-side-navigation-maximum-width", + "switch-control-height-large": { + "prop": "--spectrum-switch-control-height-large", "desktop": { - "value": "240px" + "value": "18px" }, "mobile": { - "value": "300px" + "value": "22px" } }, - "side-navigation-minimum-width": { - "prop": "--spectrum-side-navigation-minimum-width", + "switch-control-height-medium": { + "prop": "--spectrum-switch-control-height-medium", "desktop": { - "value": "160px" + "value": "16px" }, "mobile": { - "value": "200px" + "value": "20px" } }, - "side-navigation-second-level-edge-to-text": { - "prop": "--spectrum-side-navigation-second-level-edge-to-text", + "switch-control-height-small": { + "prop": "--spectrum-switch-control-height-small", "desktop": { - "value": "24px" + "value": "14px" }, "mobile": { - "value": "30px" + "value": "18px" } }, - "side-navigation-third-level-edge-to-text": { - "prop": "--spectrum-side-navigation-third-level-edge-to-text", + "switch-control-width-extra-large": { + "prop": "--spectrum-switch-control-width-extra-large", "desktop": { - "value": "36px" + "value": "34px" }, "mobile": { - "value": "45px" + "value": "46px" } }, - "side-navigation-width": { - "prop": "--spectrum-side-navigation-width", + "switch-control-width-large": { + "prop": "--spectrum-switch-control-width-large", "desktop": { - "value": "192px" + "value": "30px" }, "mobile": { - "value": "240px" + "value": "38px" } }, - "side-navigation-with-icon-second-level-edge-to-text": { - "prop": "--spectrum-side-navigation-with-icon-second-level-edge-to-text", + "switch-control-width-medium": { + "prop": "--spectrum-switch-control-width-medium", "desktop": { - "value": "50px" + "value": "26px" }, "mobile": { - "value": "62px" + "value": "34px" } }, - "side-navigation-with-icon-third-level-edge-to-text": { - "prop": "--spectrum-side-navigation-with-icon-third-level-edge-to-text", + "switch-control-width-small": { + "prop": "--spectrum-switch-control-width-small", "desktop": { - "value": "62px" + "value": "22px" }, "mobile": { - "value": "77px" + "value": "30px" } }, - "silver-100": { - "prop": "--spectrum-silver-100", - "dark": { - "value": "rgb(26, 26, 26)" + "switch-handle-selected-size-extra-large": { + "prop": "--spectrum-switch-handle-selected-size-extra-large", + "desktop": { + "value": "14px" }, - "light": { - "value": "rgb(247, 247, 247)" + "mobile": { + "value": "20px" } }, - "silver-1000": { - "prop": "--spectrum-silver-1000", - "dark": { - "value": "rgb(152, 152, 152)" + "switch-handle-selected-size-large": { + "prop": "--spectrum-switch-handle-selected-size-large", + "desktop": { + "value": "12px" }, - "light": { - "value": "rgb(96, 96, 96)" + "mobile": { + "value": "16px" } }, - "silver-1100": { - "prop": "--spectrum-silver-1100", - "dark": { - "value": "rgb(169, 169, 169)" + "switch-handle-selected-size-medium": { + "prop": "--spectrum-switch-handle-selected-size-medium", + "desktop": { + "value": "10px" }, - "light": { - "value": "rgb(81, 81, 81)" + "mobile": { + "value": "14px" } }, - "silver-1200": { - "prop": "--spectrum-silver-1200", - "dark": { - "value": "rgb(190, 190, 190)" + "switch-handle-selected-size-small": { + "prop": "--spectrum-switch-handle-selected-size-small", + "desktop": { + "value": "8px" }, - "light": { - "value": "rgb(66, 66, 66)" + "mobile": { + "value": "12px" } }, - "silver-1300": { - "prop": "--spectrum-silver-1300", - "dark": { - "value": "rgb(211, 211, 211)" + "switch-handle-size-extra-large": { + "prop": "--spectrum-switch-handle-size-extra-large", + "desktop": { + "value": "12px" }, - "light": { - "value": "rgb(52, 52, 52)" + "mobile": { + "value": "18px" } }, - "silver-1400": { - "prop": "--spectrum-silver-1400", - "dark": { - "value": "rgb(229, 229, 229)" + "switch-handle-size-large": { + "prop": "--spectrum-switch-handle-size-large", + "desktop": { + "value": "10px" }, - "light": { - "value": "rgb(39, 39, 39)" + "mobile": { + "value": "14px" } }, - "silver-1500": { - "prop": "--spectrum-silver-1500", - "dark": { - "value": "rgb(244, 244, 244)" + "switch-handle-size-medium": { + "prop": "--spectrum-switch-handle-size-medium", + "desktop": { + "value": "8px" }, - "light": { - "value": "rgb(28, 28, 28)" + "mobile": { + "value": "12px" } }, - "silver-1600": { - "prop": "--spectrum-silver-1600", - "dark": { - "value": "rgb(255, 255, 255)" + "switch-handle-size-small": { + "prop": "--spectrum-switch-handle-size-small", + "desktop": { + "value": "6px" }, - "light": { - "value": "rgb(12, 12, 12)" + "mobile": { + "value": "10px" } }, - "silver-200": { - "prop": "--spectrum-silver-200", - "dark": { - "value": "rgb(33, 33, 33)" + "switch-top-to-control-extra-large": { + "prop": "--spectrum-switch-top-to-control-extra-large", + "desktop": { + "value": "15px" }, - "light": { - "value": "rgb(239, 239, 239)" + "mobile": { + "value": "19px" } }, - "silver-300": { - "prop": "--spectrum-silver-300", - "dark": { - "value": "rgb(44, 44, 44)" + "switch-top-to-control-large": { + "prop": "--spectrum-switch-top-to-control-large", + "desktop": { + "value": "12px" }, - "light": { - "value": "rgb(223, 223, 223)" + "mobile": { + "value": "15px" } }, - "silver-400": { - "prop": "--spectrum-silver-400", - "dark": { - "value": "rgb(59, 59, 59)" + "switch-top-to-control-medium": { + "prop": "--spectrum-switch-top-to-control-medium", + "desktop": { + "value": "9px" }, - "light": { - "value": "rgb(204, 204, 204)" + "mobile": { + "value": "11px" } }, - "silver-500": { - "prop": "--spectrum-silver-500", - "dark": { - "value": "rgb(76, 76, 76)" + "switch-top-to-control-small": { + "prop": "--spectrum-switch-top-to-control-small", + "desktop": { + "value": "6px" }, - "light": { - "value": "rgb(183, 183, 183)" + "mobile": { + "value": "7px" } }, - "silver-600": { - "prop": "--spectrum-silver-600", - "dark": { - "value": "rgb(92, 92, 92)" + "tab-item-bottom-to-text-compact-extra-large": { + "prop": "--spectrum-tab-item-bottom-to-text-compact-extra-large", + "desktop": { + "value": "13px" }, - "light": { - "value": "rgb(160, 160, 160)" + "mobile": { + "value": "17px" } }, - "silver-700": { - "prop": "--spectrum-silver-700", - "dark": { - "value": "rgb(108, 108, 108)" + "tab-item-bottom-to-text-compact-large": { + "prop": "--spectrum-tab-item-bottom-to-text-compact-large", + "desktop": { + "value": "12px" }, - "light": { - "value": "rgb(143, 143, 143)" + "mobile": { + "value": "14px" } }, - "silver-800": { - "prop": "--spectrum-silver-800", - "dark": { - "value": "rgb(118, 118, 118)" + "tab-item-bottom-to-text-compact-medium": { + "prop": "--spectrum-tab-item-bottom-to-text-compact-medium", + "desktop": { + "value": "8px" }, - "light": { - "value": "rgb(128, 128, 128)" + "mobile": { + "value": "10px" } }, - "silver-900": { - "prop": "--spectrum-silver-900", - "dark": { - "value": "rgb(137, 137, 137)" + "tab-item-bottom-to-text-compact-small": { + "prop": "--spectrum-tab-item-bottom-to-text-compact-small", + "desktop": { + "value": "5px" }, - "light": { - "value": "rgb(114, 114, 114)" + "mobile": { + "value": "6px" } }, - "silver-background-color-default": { - "prop": "--spectrum-silver-background-color-default", - "ref": "var(--spectrum-silver-800)", - "light": { - "value": "rgb(114, 114, 114)" + "tab-item-bottom-to-text-extra-large": { + "prop": "--spectrum-tab-item-bottom-to-text-extra-large", + "desktop": { + "value": "20px" }, - "dark": { - "value": "rgb(118, 118, 118)" + "mobile": { + "value": "25px" } }, - "silver-subtle-background-color-default": { - "prop": "--spectrum-silver-subtle-background-color-default", - "ref": "var(--spectrum-silver-300)", - "light": { - "value": "rgb(239, 239, 239)" + "tab-item-bottom-to-text-large": { + "prop": "--spectrum-tab-item-bottom-to-text-large", + "desktop": { + "value": "18px" }, - "dark": { - "value": "rgb(44, 44, 44)" + "mobile": { + "value": "22px" } }, - "silver-visual-color": { - "prop": "--spectrum-silver-visual-color", - "ref": "var(--spectrum-silver-900)", - "light": { - "value": "rgb(128, 128, 128)" + "tab-item-bottom-to-text-medium": { + "prop": "--spectrum-tab-item-bottom-to-text-medium", + "desktop": { + "value": "14px" }, - "dark": { - "value": "rgb(137, 137, 137)" + "mobile": { + "value": "19px" } }, - "slider-bottom-to-handle-extra-large": { - "prop": "--spectrum-slider-bottom-to-handle-extra-large", + "tab-item-bottom-to-text-small": { + "prop": "--spectrum-tab-item-bottom-to-text-small", "desktop": { - "value": "14px" + "value": "12px" }, "mobile": { - "value": "17px" + "value": "15px" } }, - "slider-bottom-to-handle-large": { - "prop": "--spectrum-slider-bottom-to-handle-large", + "tab-item-compact-height-extra-large": { + "prop": "--spectrum-tab-item-compact-height-extra-large", + "ref": "var(--spectrum-component-height-300)", "desktop": { - "value": "11px" + "value": "48px" }, "mobile": { - "value": "14px" + "value": "60px" } }, - "slider-bottom-to-handle-medium": { - "prop": "--spectrum-slider-bottom-to-handle-medium", + "tab-item-compact-height-large": { + "prop": "--spectrum-tab-item-compact-height-large", + "ref": "var(--spectrum-component-height-200)", "desktop": { - "value": "8px" + "value": "40px" }, "mobile": { - "value": "10px" + "value": "50px" } }, - "slider-bottom-to-handle-small": { - "prop": "--spectrum-slider-bottom-to-handle-small", + "tab-item-compact-height-medium": { + "prop": "--spectrum-tab-item-compact-height-medium", + "ref": "var(--spectrum-component-height-100)", "desktop": { - "value": "5px" + "value": "32px" }, "mobile": { - "value": "6px" + "value": "40px" } }, - "slider-control-height-extra-large": { - "prop": "--spectrum-slider-control-height-extra-large", + "tab-item-compact-height-small": { + "prop": "--spectrum-tab-item-compact-height-small", + "ref": "var(--spectrum-component-height-75)", "desktop": { - "value": "20px" + "value": "24px" }, "mobile": { - "value": "26px" + "value": "30px" } }, - "slider-control-height-large": { - "prop": "--spectrum-slider-control-height-large", + "tab-item-focus-indicator-gap-extra-large": { + "prop": "--spectrum-tab-item-focus-indicator-gap-extra-large", "desktop": { - "value": "18px" + "value": "10px" }, "mobile": { - "value": "22px" + "value": "12px" } }, - "slider-control-height-medium": { - "prop": "--spectrum-slider-control-height-medium", + "tab-item-focus-indicator-gap-large": { + "prop": "--spectrum-tab-item-focus-indicator-gap-large", "desktop": { - "value": "16px" + "value": "9px" }, "mobile": { - "value": "20px" + "value": "11px" } }, - "slider-control-height-small": { - "prop": "--spectrum-slider-control-height-small", + "tab-item-focus-indicator-gap-medium": { + "prop": "--spectrum-tab-item-focus-indicator-gap-medium", "desktop": { - "value": "14px" + "value": "8px" }, "mobile": { - "value": "18px" + "value": "10px" } }, - "slider-control-to-field-label-extra-large": { - "prop": "--spectrum-slider-control-to-field-label-extra-large", + "tab-item-focus-indicator-gap-small": { + "prop": "--spectrum-tab-item-focus-indicator-gap-small", "desktop": { - "value": "14px" + "value": "7px" }, "mobile": { - "value": "17px" + "value": "9px" } }, - "slider-control-to-field-label-large": { - "prop": "--spectrum-slider-control-to-field-label-large", + "tab-item-height-extra-large": { + "prop": "--spectrum-tab-item-height-extra-large", + "ref": "var(--spectrum-component-height-500)", "desktop": { - "value": "11px" + "value": "64px" }, "mobile": { - "value": "14px" + "value": "80px" } }, - "slider-control-to-field-label-medium": { - "prop": "--spectrum-slider-control-to-field-label-medium", + "tab-item-height-large": { + "prop": "--spectrum-tab-item-height-large", + "ref": "var(--spectrum-component-height-400)", "desktop": { - "value": "8px" + "value": "56px" }, "mobile": { - "value": "10px" + "value": "70px" } }, - "slider-control-to-field-label-small": { - "prop": "--spectrum-slider-control-to-field-label-small", + "tab-item-height-medium": { + "prop": "--spectrum-tab-item-height-medium", + "ref": "var(--spectrum-component-height-300)", "desktop": { - "value": "5px" + "value": "48px" }, "mobile": { - "value": "6px" + "value": "60px" } }, - "slider-handle-border-width-down-extra-large": { - "prop": "--spectrum-slider-handle-border-width-down-extra-large", + "tab-item-height-small": { + "prop": "--spectrum-tab-item-height-small", + "ref": "var(--spectrum-component-height-200)", "desktop": { - "value": "8px" + "value": "40px" }, "mobile": { - "value": "11px" + "value": "50px" } }, - "slider-handle-border-width-down-large": { - "prop": "--spectrum-slider-handle-border-width-down-large", + "tab-item-start-to-edge-extra-large": { + "prop": "--spectrum-tab-item-start-to-edge-extra-large", "desktop": { - "value": "7px" + "value": "13px" }, "mobile": { - "value": "9px" + "value": "19px" } }, - "slider-handle-border-width-down-medium": { - "prop": "--spectrum-slider-handle-border-width-down-medium", + "tab-item-start-to-edge-large": { + "prop": "--spectrum-tab-item-start-to-edge-large", "desktop": { - "value": "6px" + "value": "13px" }, "mobile": { - "value": "8px" + "value": "17px" } }, - "slider-handle-border-width-down-small": { - "prop": "--spectrum-slider-handle-border-width-down-small", + "tab-item-start-to-edge-medium": { + "prop": "--spectrum-tab-item-start-to-edge-medium", "desktop": { - "value": "5px" + "value": "12px" }, "mobile": { - "value": "7px" + "value": "15px" } }, - "slider-handle-gap": { - "prop": "--spectrum-slider-handle-gap", - "value": "4px" + "tab-item-start-to-edge-quiet": { + "prop": "--spectrum-tab-item-start-to-edge-quiet", + "value": "0px" }, - "slider-handle-size-extra-large": { - "prop": "--spectrum-slider-handle-size-extra-large", + "tab-item-start-to-edge-small": { + "prop": "--spectrum-tab-item-start-to-edge-small", "desktop": { - "value": "20px" + "value": "12px" }, "mobile": { - "value": "26px" + "value": "13px" } }, - "slider-handle-size-large": { - "prop": "--spectrum-slider-handle-size-large", + "tab-item-to-tab-item-horizontal-extra-large": { + "prop": "--spectrum-tab-item-to-tab-item-horizontal-extra-large", "desktop": { - "value": "18px" + "value": "30px" }, "mobile": { - "value": "22px" + "value": "36px" } }, - "slider-handle-size-medium": { - "prop": "--spectrum-slider-handle-size-medium", + "tab-item-to-tab-item-horizontal-large": { + "prop": "--spectrum-tab-item-to-tab-item-horizontal-large", "desktop": { - "value": "16px" + "value": "27px" }, "mobile": { - "value": "20px" + "value": "33px" } }, - "slider-handle-size-small": { - "prop": "--spectrum-slider-handle-size-small", + "tab-item-to-tab-item-horizontal-medium": { + "prop": "--spectrum-tab-item-to-tab-item-horizontal-medium", "desktop": { - "value": "14px" + "value": "24px" }, "mobile": { - "value": "18px" + "value": "30px" } }, - "slider-track-thickness": { - "prop": "--spectrum-slider-track-thickness", - "value": "2px" - }, - "spacing-100": { - "prop": "--spectrum-spacing-100", - "value": "8px" - }, - "spacing-1000": { - "prop": "--spectrum-spacing-1000", - "value": "96px" - }, - "spacing-200": { - "prop": "--spectrum-spacing-200", - "value": "12px" - }, - "spacing-300": { - "prop": "--spectrum-spacing-300", - "value": "16px" - }, - "spacing-400": { - "prop": "--spectrum-spacing-400", - "value": "24px" - }, - "spacing-50": { - "prop": "--spectrum-spacing-50", - "value": "2px" - }, - "spacing-500": { - "prop": "--spectrum-spacing-500", - "value": "32px" - }, - "spacing-600": { - "prop": "--spectrum-spacing-600", - "value": "40px" - }, - "spacing-700": { - "prop": "--spectrum-spacing-700", - "value": "48px" - }, - "spacing-75": { - "prop": "--spectrum-spacing-75", - "value": "4px" - }, - "spacing-800": { - "prop": "--spectrum-spacing-800", - "value": "64px" - }, - "spacing-900": { - "prop": "--spectrum-spacing-900", - "value": "80px" - }, - "static-black-focus-indicator-color": { - "prop": "--spectrum-static-black-focus-indicator-color", - "ref": "var(--spectrum-black)", - "value": "rgb(0, 0, 0)" - }, - "static-black-text-color": { - "prop": "--spectrum-static-black-text-color", - "ref": "var(--spectrum-black)", - "value": "rgb(0, 0, 0)" - }, - "static-black-track-color": { - "prop": "--spectrum-static-black-track-color", - "ref": "var(--spectrum-transparent-black-300)", - "light": { - "value": "rgba(0, 0, 0, 0.15)" + "tab-item-to-tab-item-horizontal-small": { + "prop": "--spectrum-tab-item-to-tab-item-horizontal-small", + "desktop": { + "value": "21px" }, - "dark": { - "value": "rgba(0, 0, 0, 0.15)" + "mobile": { + "value": "27px" } }, - "static-black-track-indicator-color": { - "prop": "--spectrum-static-black-track-indicator-color", - "ref": "var(--spectrum-transparent-black-900)", - "light": { - "value": "rgba(0, 0, 0, 0.93)" + "tab-item-to-tab-item-vertical-extra-large": { + "prop": "--spectrum-tab-item-to-tab-item-vertical-extra-large", + "desktop": { + "value": "5px" }, - "dark": { - "value": "rgba(0, 0, 0, 0.93)" + "mobile": { + "value": "6px" } }, - "static-white-focus-indicator-color": { - "prop": "--spectrum-static-white-focus-indicator-color", - "ref": "var(--spectrum-white)", - "light": { - "value": "rgb(255, 255, 255)" + "tab-item-to-tab-item-vertical-large": { + "prop": "--spectrum-tab-item-to-tab-item-vertical-large", + "desktop": { + "value": "5px" }, - "dark": { - "value": "rgb(255, 255, 255)" + "mobile": { + "value": "6px" } }, - "static-white-text-color": { - "prop": "--spectrum-static-white-text-color", - "ref": "var(--spectrum-white)", - "light": { - "value": "rgb(255, 255, 255)" + "tab-item-to-tab-item-vertical-medium": { + "prop": "--spectrum-tab-item-to-tab-item-vertical-medium", + "desktop": { + "value": "4px" }, - "dark": { - "value": "rgb(255, 255, 255)" + "mobile": { + "value": "5px" } }, - "static-white-track-color": { - "prop": "--spectrum-static-white-track-color", - "ref": "var(--spectrum-transparent-white-300)", - "light": { - "value": "rgba(255, 255, 255, 0.17)" + "tab-item-to-tab-item-vertical-small": { + "prop": "--spectrum-tab-item-to-tab-item-vertical-small", + "desktop": { + "value": "4px" }, - "dark": { - "value": "rgba(255, 255, 255, 0.17)" + "mobile": { + "value": "5px" } }, - "static-white-track-indicator-color": { - "prop": "--spectrum-static-white-track-indicator-color", - "ref": "var(--spectrum-transparent-white-900)", - "light": { - "value": "rgba(255, 255, 255, 0.94)" + "tab-item-top-to-text-compact-extra-large": { + "prop": "--spectrum-tab-item-top-to-text-compact-extra-large", + "desktop": { + "value": "12px" }, - "dark": { - "value": "rgba(255, 255, 255, 0.94)" + "mobile": { + "value": "15px" } }, - "status-light-dot-size-extra-large": { - "prop": "--spectrum-status-light-dot-size-extra-large", + "tab-item-top-to-text-compact-large": { + "prop": "--spectrum-tab-item-top-to-text-compact-large", "desktop": { "value": "10px" }, @@ -10338,374 +13787,345 @@ "value": "12px" } }, - "status-light-dot-size-large": { - "prop": "--spectrum-status-light-dot-size-large", + "tab-item-top-to-text-compact-medium": { + "prop": "--spectrum-tab-item-top-to-text-compact-medium", "desktop": { - "value": "10px" + "value": "6px" }, "mobile": { - "value": "12px" + "value": "9px" } }, - "status-light-dot-size-medium": { - "prop": "--spectrum-status-light-dot-size-medium", + "tab-item-top-to-text-compact-small": { + "prop": "--spectrum-tab-item-top-to-text-compact-small", "desktop": { - "value": "8px" + "value": "4px" }, "mobile": { - "value": "10px" + "value": "5px" } }, - "status-light-dot-size-small": { - "prop": "--spectrum-status-light-dot-size-small", - "value": "8px" - }, - "status-light-top-to-dot-extra-large": { - "prop": "--spectrum-status-light-top-to-dot-extra-large", + "tab-item-top-to-text-extra-large": { + "prop": "--spectrum-tab-item-top-to-text-extra-large", "desktop": { "value": "19px" }, "mobile": { - "value": "24px" + "value": "25px" } }, - "status-light-top-to-dot-large": { - "prop": "--spectrum-status-light-top-to-dot-large", + "tab-item-top-to-text-large": { + "prop": "--spectrum-tab-item-top-to-text-large", "desktop": { - "value": "15px" + "value": "16px" }, "mobile": { - "value": "19px" + "value": "22px" } }, - "status-light-top-to-dot-medium": { - "prop": "--spectrum-status-light-top-to-dot-medium", + "tab-item-top-to-text-medium": { + "prop": "--spectrum-tab-item-top-to-text-medium", "desktop": { - "value": "12px" + "value": "14px" }, "mobile": { - "value": "15px" + "value": "18px" } }, - "status-light-top-to-dot-small": { - "prop": "--spectrum-status-light-top-to-dot-small", + "tab-item-top-to-text-small": { + "prop": "--spectrum-tab-item-top-to-text-small", "desktop": { - "value": "8px" + "value": "11px" }, "mobile": { - "value": "11px" + "value": "14px" } }, - "swatch-border-color": { - "prop": "--spectrum-swatch-border-color", - "ref": "var(--spectrum-gray-900)", - "light": { - "value": "rgb(19, 19, 19)" + "tab-item-top-to-workflow-icon-compact-extra-large": { + "prop": "--spectrum-tab-item-top-to-workflow-icon-compact-extra-large", + "desktop": { + "value": "11px" }, - "dark": { - "value": "rgb(242, 242, 242)" + "mobile": { + "value": "16px" } }, - "swatch-border-opacity": { - "prop": "--spectrum-swatch-border-opacity", - "value": "0.51" - }, - "swatch-disabled-icon-border-color": { - "prop": "--spectrum-swatch-disabled-icon-border-color", - "ref": "var(--spectrum-black)", - "value": "rgb(0, 0, 0)" - }, - "swatch-disabled-icon-border-opacity": { - "prop": "--spectrum-swatch-disabled-icon-border-opacity", - "value": "0.51" - }, - "swatch-rectangle-width-multiplier": { - "prop": "--spectrum-swatch-rectangle-width-multiplier", - "value": "2" - }, - "swatch-size-extra-small": { - "prop": "--spectrum-swatch-size-extra-small", + "tab-item-top-to-workflow-icon-compact-large": { + "prop": "--spectrum-tab-item-top-to-workflow-icon-compact-large", "desktop": { - "value": "16px" + "value": "9px" }, "mobile": { - "value": "20px" + "value": "13px" } }, - "swatch-size-large": { - "prop": "--spectrum-swatch-size-large", + "tab-item-top-to-workflow-icon-compact-medium": { + "prop": "--spectrum-tab-item-top-to-workflow-icon-compact-medium", "desktop": { - "value": "40px" + "value": "7px" }, "mobile": { - "value": "50px" + "value": "9px" } }, - "swatch-size-medium": { - "prop": "--spectrum-swatch-size-medium", + "tab-item-top-to-workflow-icon-compact-small": { + "prop": "--spectrum-tab-item-top-to-workflow-icon-compact-small", "desktop": { - "value": "32px" + "value": "3px" }, "mobile": { - "value": "40px" + "value": "5px" } }, - "swatch-size-small": { - "prop": "--spectrum-swatch-size-small", + "tab-item-top-to-workflow-icon-extra-large": { + "prop": "--spectrum-tab-item-top-to-workflow-icon-extra-large", "desktop": { - "value": "24px" + "value": "19px" }, "mobile": { - "value": "30px" + "value": "26px" } }, - "swatch-slash-thickness-extra-small": { - "prop": "--spectrum-swatch-slash-thickness-extra-small", - "value": "2px" - }, - "swatch-slash-thickness-large": { - "prop": "--spectrum-swatch-slash-thickness-large", - "value": "5px" - }, - "swatch-slash-thickness-medium": { - "prop": "--spectrum-swatch-slash-thickness-medium", - "value": "4px" - }, - "swatch-slash-thickness-small": { - "prop": "--spectrum-swatch-slash-thickness-small", - "value": "3px" - }, - "switch-control-height-extra-large": { - "prop": "--spectrum-switch-control-height-extra-large", + "tab-item-top-to-workflow-icon-large": { + "prop": "--spectrum-tab-item-top-to-workflow-icon-large", "desktop": { - "value": "18px" + "value": "17px" }, "mobile": { - "value": "22px" + "value": "23px" } }, - "switch-control-height-large": { - "prop": "--spectrum-switch-control-height-large", + "tab-item-top-to-workflow-icon-medium": { + "prop": "--spectrum-tab-item-top-to-workflow-icon-medium", "desktop": { - "value": "16px" + "value": "15px" }, "mobile": { - "value": "20px" + "value": "19px" } }, - "switch-control-height-medium": { - "prop": "--spectrum-switch-control-height-medium", + "tab-item-top-to-workflow-icon-small": { + "prop": "--spectrum-tab-item-top-to-workflow-icon-small", "desktop": { - "value": "14px" + "value": "13px" }, "mobile": { - "value": "18px" + "value": "15px" } }, - "switch-control-height-small": { - "prop": "--spectrum-switch-control-height-small", + "table-border-divider-width": { + "prop": "--spectrum-table-border-divider-width", + "value": "1px" + }, + "table-checkbox-to-text": { + "prop": "--spectrum-table-checkbox-to-text", "desktop": { - "value": "12px" + "value": "24px" }, "mobile": { - "value": "16px" + "value": "30px" } }, - "switch-control-width-extra-large": { - "prop": "--spectrum-switch-control-width-extra-large", + "table-column-header-row-bottom-to-text-extra-large": { + "prop": "--spectrum-table-column-header-row-bottom-to-text-extra-large", "desktop": { - "value": "33px" + "value": "13px" }, "mobile": { - "value": "46px" + "value": "17px" } }, - "switch-control-width-large": { - "prop": "--spectrum-switch-control-width-large", + "table-column-header-row-bottom-to-text-large": { + "prop": "--spectrum-table-column-header-row-bottom-to-text-large", "desktop": { - "value": "29px" + "value": "10px" }, "mobile": { - "value": "41px" + "value": "13px" } }, - "switch-control-width-medium": { - "prop": "--spectrum-switch-control-width-medium", + "table-column-header-row-bottom-to-text-medium": { + "prop": "--spectrum-table-column-header-row-bottom-to-text-medium", "desktop": { - "value": "26px" + "value": "8px" }, "mobile": { - "value": "36px" + "value": "10px" } }, - "switch-control-width-small": { - "prop": "--spectrum-switch-control-width-small", + "table-column-header-row-bottom-to-text-small": { + "prop": "--spectrum-table-column-header-row-bottom-to-text-small", "desktop": { - "value": "23px" + "value": "9px" }, "mobile": { - "value": "32px" + "value": "11px" } }, - "switch-top-to-control-extra-large": { - "prop": "--spectrum-switch-top-to-control-extra-large", + "table-column-header-row-top-to-text-extra-large": { + "prop": "--spectrum-table-column-header-row-top-to-text-extra-large", "desktop": { - "value": "15px" + "value": "13px" }, "mobile": { - "value": "19px" + "value": "16px" } }, - "switch-top-to-control-large": { - "prop": "--spectrum-switch-top-to-control-large", + "table-column-header-row-top-to-text-large": { + "prop": "--spectrum-table-column-header-row-top-to-text-large", "desktop": { - "value": "12px" + "value": "10px" }, "mobile": { - "value": "15px" + "value": "13px" } }, - "switch-top-to-control-medium": { - "prop": "--spectrum-switch-top-to-control-medium", + "table-column-header-row-top-to-text-medium": { + "prop": "--spectrum-table-column-header-row-top-to-text-medium", "desktop": { - "value": "9px" + "value": "6px" }, "mobile": { - "value": "11px" + "value": "9px" } }, - "switch-top-to-control-small": { - "prop": "--spectrum-switch-top-to-control-small", + "table-column-header-row-top-to-text-small": { + "prop": "--spectrum-table-column-header-row-top-to-text-small", "desktop": { - "value": "6px" + "value": "8px" }, "mobile": { - "value": "7px" + "value": "10px" } }, - "tab-item-bottom-to-text-compact-extra-large": { - "prop": "--spectrum-tab-item-bottom-to-text-compact-extra-large", + "table-edge-to-content": { + "prop": "--spectrum-table-edge-to-content", + "value": "16px" + }, + "table-header-row-checkbox-to-top-extra-large": { + "prop": "--spectrum-table-header-row-checkbox-to-top-extra-large", "desktop": { - "value": "13px" + "value": "15px" }, "mobile": { - "value": "17px" + "value": "21px" } }, - "tab-item-bottom-to-text-compact-large": { - "prop": "--spectrum-tab-item-bottom-to-text-compact-large", + "table-header-row-checkbox-to-top-large": { + "prop": "--spectrum-table-header-row-checkbox-to-top-large", "desktop": { "value": "12px" }, "mobile": { - "value": "14px" + "value": "17px" } }, - "tab-item-bottom-to-text-compact-medium": { - "prop": "--spectrum-tab-item-bottom-to-text-compact-medium", + "table-header-row-checkbox-to-top-medium": { + "prop": "--spectrum-table-header-row-checkbox-to-top-medium", "desktop": { "value": "8px" }, "mobile": { - "value": "10px" + "value": "11px" } }, - "tab-item-bottom-to-text-compact-small": { - "prop": "--spectrum-tab-item-bottom-to-text-compact-small", + "table-header-row-checkbox-to-top-small": { + "prop": "--spectrum-table-header-row-checkbox-to-top-small", "desktop": { - "value": "5px" + "value": "10px" }, "mobile": { - "value": "6px" + "value": "14px" } }, - "tab-item-bottom-to-text-extra-large": { - "prop": "--spectrum-tab-item-bottom-to-text-extra-large", + "table-row-bottom-to-text-extra-large": { + "prop": "--spectrum-table-row-bottom-to-text-extra-large", "desktop": { - "value": "20px" + "value": "17px" }, "mobile": { - "value": "25px" + "value": "22px" } }, - "tab-item-bottom-to-text-large": { - "prop": "--spectrum-tab-item-bottom-to-text-large", + "table-row-bottom-to-text-extra-large-compact": { + "prop": "--spectrum-table-row-bottom-to-text-extra-large-compact", + "ref": "var(--spectrum-component-bottom-to-text-300)", "desktop": { - "value": "18px" + "value": "14px" }, "mobile": { - "value": "22px" + "value": "18px" } }, - "tab-item-bottom-to-text-medium": { - "prop": "--spectrum-tab-item-bottom-to-text-medium", + "table-row-bottom-to-text-extra-large-regular": { + "prop": "--spectrum-table-row-bottom-to-text-extra-large-regular", + "ref": "var(--spectrum-table-row-bottom-to-text-extra-large)", "desktop": { - "value": "14px" + "value": "17px" }, "mobile": { - "value": "19px" + "value": "22px" } }, - "tab-item-bottom-to-text-small": { - "prop": "--spectrum-tab-item-bottom-to-text-small", + "table-row-bottom-to-text-extra-large-spacious": { + "prop": "--spectrum-table-row-bottom-to-text-extra-large-spacious", "desktop": { - "value": "12px" + "value": "21px" }, "mobile": { - "value": "15px" + "value": "27px" } }, - "tab-item-compact-height-extra-large": { - "prop": "--spectrum-tab-item-compact-height-extra-large", - "ref": "var(--spectrum-component-height-300)", + "table-row-bottom-to-text-large": { + "prop": "--spectrum-table-row-bottom-to-text-large", "desktop": { - "value": "48px" + "value": "14px" }, "mobile": { - "value": "60px" + "value": "18px" } }, - "tab-item-compact-height-large": { - "prop": "--spectrum-tab-item-compact-height-large", - "ref": "var(--spectrum-component-height-200)", + "table-row-bottom-to-text-large-compact": { + "prop": "--spectrum-table-row-bottom-to-text-large-compact", + "ref": "var(--spectrum-component-bottom-to-text-200)", "desktop": { - "value": "40px" + "value": "11px" }, "mobile": { - "value": "50px" + "value": "14px" } }, - "tab-item-compact-height-medium": { - "prop": "--spectrum-tab-item-compact-height-medium", - "ref": "var(--spectrum-component-height-100)", + "table-row-bottom-to-text-large-regular": { + "prop": "--spectrum-table-row-bottom-to-text-large-regular", + "ref": "var(--spectrum-table-row-bottom-to-text-large)", "desktop": { - "value": "32px" + "value": "14px" }, "mobile": { - "value": "40px" + "value": "18px" } }, - "tab-item-compact-height-small": { - "prop": "--spectrum-tab-item-compact-height-small", - "ref": "var(--spectrum-component-height-75)", + "table-row-bottom-to-text-large-spacious": { + "prop": "--spectrum-table-row-bottom-to-text-large-spacious", "desktop": { - "value": "24px" + "value": "18px" }, "mobile": { - "value": "30px" + "value": "23px" } }, - "tab-item-focus-indicator-gap-extra-large": { - "prop": "--spectrum-tab-item-focus-indicator-gap-extra-large", + "table-row-bottom-to-text-medium": { + "prop": "--spectrum-table-row-bottom-to-text-medium", "desktop": { - "value": "10px" + "value": "13px" }, "mobile": { - "value": "12px" + "value": "15px" } }, - "tab-item-focus-indicator-gap-large": { - "prop": "--spectrum-tab-item-focus-indicator-gap-large", + "table-row-bottom-to-text-medium-compact": { + "prop": "--spectrum-table-row-bottom-to-text-medium-compact", + "ref": "var(--spectrum-component-bottom-to-text-100)", "desktop": { "value": "9px" }, @@ -10713,326 +14133,341 @@ "value": "11px" } }, - "tab-item-focus-indicator-gap-medium": { - "prop": "--spectrum-tab-item-focus-indicator-gap-medium", + "table-row-bottom-to-text-medium-regular": { + "prop": "--spectrum-table-row-bottom-to-text-medium-regular", + "ref": "var(--spectrum-table-row-bottom-to-text-medium)", "desktop": { - "value": "8px" + "value": "13px" }, "mobile": { - "value": "10px" + "value": "15px" } }, - "tab-item-focus-indicator-gap-small": { - "prop": "--spectrum-tab-item-focus-indicator-gap-small", + "table-row-bottom-to-text-medium-spacious": { + "prop": "--spectrum-table-row-bottom-to-text-medium-spacious", "desktop": { - "value": "7px" + "value": "16px" }, "mobile": { - "value": "9px" + "value": "18px" } }, - "tab-item-height-extra-large": { - "prop": "--spectrum-tab-item-height-extra-large", - "ref": "var(--spectrum-component-height-500)", + "table-row-bottom-to-text-small": { + "prop": "--spectrum-table-row-bottom-to-text-small", "desktop": { - "value": "64px" + "value": "9px" }, "mobile": { - "value": "80px" + "value": "11px" } }, - "tab-item-height-large": { - "prop": "--spectrum-tab-item-height-large", - "ref": "var(--spectrum-component-height-400)", + "table-row-bottom-to-text-small-compact": { + "prop": "--spectrum-table-row-bottom-to-text-small-compact", + "ref": "var(--spectrum-component-bottom-to-text-75)", "desktop": { - "value": "56px" + "value": "5px" }, "mobile": { - "value": "70px" + "value": "6px" } }, - "tab-item-height-medium": { - "prop": "--spectrum-tab-item-height-medium", - "ref": "var(--spectrum-component-height-300)", + "table-row-bottom-to-text-small-regular": { + "prop": "--spectrum-table-row-bottom-to-text-small-regular", + "ref": "var(--spectrum-table-row-bottom-to-text-small)", "desktop": { - "value": "48px" + "value": "9px" }, "mobile": { - "value": "60px" + "value": "11px" } }, - "tab-item-height-small": { - "prop": "--spectrum-tab-item-height-small", - "ref": "var(--spectrum-component-height-200)", + "table-row-bottom-to-text-small-spacious": { + "prop": "--spectrum-table-row-bottom-to-text-small-spacious", "desktop": { - "value": "40px" + "value": "13px" }, "mobile": { - "value": "50px" + "value": "16px" } }, - "tab-item-start-to-edge-extra-large": { - "prop": "--spectrum-tab-item-start-to-edge-extra-large", + "table-row-checkbox-to-top-extra-large": { + "prop": "--spectrum-table-row-checkbox-to-top-extra-large", "desktop": { - "value": "13px" + "value": "19px" }, "mobile": { - "value": "19px" + "value": "26px" } }, - "tab-item-start-to-edge-large": { - "prop": "--spectrum-tab-item-start-to-edge-large", + "table-row-checkbox-to-top-extra-large-compact": { + "prop": "--spectrum-table-row-checkbox-to-top-extra-large-compact", "desktop": { - "value": "13px" + "value": "15px" }, "mobile": { - "value": "17px" + "value": "21px" } }, - "tab-item-start-to-edge-medium": { - "prop": "--spectrum-tab-item-start-to-edge-medium", + "table-row-checkbox-to-top-extra-large-regular": { + "prop": "--spectrum-table-row-checkbox-to-top-extra-large-regular", + "ref": "var(--spectrum-table-row-checkbox-to-top-extra-large)", "desktop": { - "value": "12px" + "value": "19px" }, "mobile": { - "value": "15px" + "value": "26px" } }, - "tab-item-start-to-edge-quiet": { - "prop": "--spectrum-tab-item-start-to-edge-quiet", - "value": "0px" - }, - "tab-item-start-to-edge-small": { - "prop": "--spectrum-tab-item-start-to-edge-small", + "table-row-checkbox-to-top-extra-large-spacious": { + "prop": "--spectrum-table-row-checkbox-to-top-extra-large-spacious", "desktop": { - "value": "12px" + "value": "23px" }, "mobile": { - "value": "13px" + "value": "31px" } }, - "tab-item-to-tab-item-horizontal-extra-large": { - "prop": "--spectrum-tab-item-to-tab-item-horizontal-extra-large", + "table-row-checkbox-to-top-large": { + "prop": "--spectrum-table-row-checkbox-to-top-large", "desktop": { - "value": "30px" + "value": "16px" }, "mobile": { - "value": "36px" + "value": "22px" } }, - "tab-item-to-tab-item-horizontal-large": { - "prop": "--spectrum-tab-item-to-tab-item-horizontal-large", + "table-row-checkbox-to-top-large-compact": { + "prop": "--spectrum-table-row-checkbox-to-top-large-compact", "desktop": { - "value": "27px" + "value": "12px" }, "mobile": { - "value": "33px" + "value": "17px" } }, - "tab-item-to-tab-item-horizontal-medium": { - "prop": "--spectrum-tab-item-to-tab-item-horizontal-medium", + "table-row-checkbox-to-top-large-regular": { + "prop": "--spectrum-table-row-checkbox-to-top-large-regular", + "ref": "var(--spectrum-table-row-checkbox-to-top-large)", "desktop": { - "value": "24px" + "value": "16px" }, "mobile": { - "value": "30px" + "value": "22px" } }, - "tab-item-to-tab-item-horizontal-small": { - "prop": "--spectrum-tab-item-to-tab-item-horizontal-small", + "table-row-checkbox-to-top-large-spacious": { + "prop": "--spectrum-table-row-checkbox-to-top-large-spacious", "desktop": { - "value": "21px" + "value": "20px" }, "mobile": { "value": "27px" } }, - "tab-item-to-tab-item-vertical-extra-large": { - "prop": "--spectrum-tab-item-to-tab-item-vertical-extra-large", + "table-row-checkbox-to-top-medium": { + "prop": "--spectrum-table-row-checkbox-to-top-medium", "desktop": { - "value": "5px" + "value": "12px" }, "mobile": { - "value": "6px" + "value": "16px" } }, - "tab-item-to-tab-item-vertical-large": { - "prop": "--spectrum-tab-item-to-tab-item-vertical-large", + "table-row-checkbox-to-top-medium-compact": { + "prop": "--spectrum-table-row-checkbox-to-top-medium-compact", "desktop": { - "value": "5px" + "value": "8px" }, "mobile": { - "value": "6px" + "value": "11px" + } + }, + "table-row-checkbox-to-top-medium-regular": { + "prop": "--spectrum-table-row-checkbox-to-top-medium-regular", + "ref": "var(--spectrum-table-row-checkbox-to-top-medium)", + "desktop": { + "value": "12px" + }, + "mobile": { + "value": "16px" } }, - "tab-item-to-tab-item-vertical-medium": { - "prop": "--spectrum-tab-item-to-tab-item-vertical-medium", + "table-row-checkbox-to-top-medium-spacious": { + "prop": "--spectrum-table-row-checkbox-to-top-medium-spacious", "desktop": { - "value": "4px" + "value": "16px" }, "mobile": { - "value": "5px" + "value": "21px" } }, - "tab-item-to-tab-item-vertical-small": { - "prop": "--spectrum-tab-item-to-tab-item-vertical-small", + "table-row-checkbox-to-top-small": { + "prop": "--spectrum-table-row-checkbox-to-top-small", "desktop": { - "value": "4px" + "value": "10px" }, "mobile": { - "value": "5px" + "value": "14px" } }, - "tab-item-top-to-text-compact-extra-large": { - "prop": "--spectrum-tab-item-top-to-text-compact-extra-large", + "table-row-checkbox-to-top-small-compact": { + "prop": "--spectrum-table-row-checkbox-to-top-small-compact", "desktop": { - "value": "12px" + "value": "6px" }, "mobile": { - "value": "15px" + "value": "9px" } }, - "tab-item-top-to-text-compact-large": { - "prop": "--spectrum-tab-item-top-to-text-compact-large", + "table-row-checkbox-to-top-small-regular": { + "prop": "--spectrum-table-row-checkbox-to-top-small-regular", + "ref": "var(--spectrum-table-row-checkbox-to-top-small)", "desktop": { "value": "10px" }, "mobile": { - "value": "12px" + "value": "14px" } }, - "tab-item-top-to-text-compact-medium": { - "prop": "--spectrum-tab-item-top-to-text-compact-medium", + "table-row-checkbox-to-top-small-spacious": { + "prop": "--spectrum-table-row-checkbox-to-top-small-spacious", "desktop": { - "value": "6px" + "value": "14px" }, "mobile": { - "value": "9px" + "value": "19px" } }, - "tab-item-top-to-text-compact-small": { - "prop": "--spectrum-tab-item-top-to-text-compact-small", + "table-row-down-opacity": { + "prop": "--spectrum-table-row-down-opacity", + "value": "0.1" + }, + "table-row-height-extra-large": { + "prop": "--spectrum-table-row-height-extra-large", "desktop": { - "value": "4px" + "value": "56px" }, "mobile": { - "value": "5px" + "value": "70px" } }, - "tab-item-top-to-text-extra-large": { - "prop": "--spectrum-tab-item-top-to-text-extra-large", + "table-row-height-extra-large-compact": { + "prop": "--spectrum-table-row-height-extra-large-compact", + "ref": "var(--spectrum-component-height-300)", "desktop": { - "value": "19px" + "value": "48px" }, "mobile": { - "value": "25px" + "value": "60px" } }, - "tab-item-top-to-text-large": { - "prop": "--spectrum-tab-item-top-to-text-large", + "table-row-height-extra-large-regular": { + "prop": "--spectrum-table-row-height-extra-large-regular", + "ref": "var(--spectrum-table-row-height-extra-large)", "desktop": { - "value": "16px" + "value": "56px" }, "mobile": { - "value": "22px" + "value": "70px" } }, - "tab-item-top-to-text-medium": { - "prop": "--spectrum-tab-item-top-to-text-medium", + "table-row-height-extra-large-spacious": { + "prop": "--spectrum-table-row-height-extra-large-spacious", "desktop": { - "value": "14px" + "value": "64px" }, "mobile": { - "value": "18px" + "value": "80px" } }, - "tab-item-top-to-text-small": { - "prop": "--spectrum-tab-item-top-to-text-small", + "table-row-height-large": { + "prop": "--spectrum-table-row-height-large", "desktop": { - "value": "11px" + "value": "48px" }, "mobile": { - "value": "14px" + "value": "60px" } }, - "tab-item-top-to-workflow-icon-compact-extra-large": { - "prop": "--spectrum-tab-item-top-to-workflow-icon-compact-extra-large", + "table-row-height-large-compact": { + "prop": "--spectrum-table-row-height-large-compact", + "ref": "var(--spectrum-component-height-200)", "desktop": { - "value": "11px" + "value": "40px" }, "mobile": { - "value": "16px" + "value": "50px" } }, - "tab-item-top-to-workflow-icon-compact-large": { - "prop": "--spectrum-tab-item-top-to-workflow-icon-compact-large", + "table-row-height-large-regular": { + "prop": "--spectrum-table-row-height-large-regular", + "ref": "var(--spectrum-table-row-height-large)", "desktop": { - "value": "9px" + "value": "48px" }, "mobile": { - "value": "13px" + "value": "60px" } }, - "tab-item-top-to-workflow-icon-compact-medium": { - "prop": "--spectrum-tab-item-top-to-workflow-icon-compact-medium", + "table-row-height-large-spacious": { + "prop": "--spectrum-table-row-height-large-spacious", "desktop": { - "value": "7px" + "value": "56px" }, "mobile": { - "value": "9px" + "value": "70px" } }, - "tab-item-top-to-workflow-icon-compact-small": { - "prop": "--spectrum-tab-item-top-to-workflow-icon-compact-small", + "table-row-height-medium": { + "prop": "--spectrum-table-row-height-medium", "desktop": { - "value": "3px" + "value": "40px" }, "mobile": { - "value": "5px" + "value": "50px" } }, - "tab-item-top-to-workflow-icon-extra-large": { - "prop": "--spectrum-tab-item-top-to-workflow-icon-extra-large", + "table-row-height-medium-compact": { + "prop": "--spectrum-table-row-height-medium-compact", + "ref": "var(--spectrum-component-height-100)", "desktop": { - "value": "19px" + "value": "32px" }, "mobile": { - "value": "26px" + "value": "40px" } }, - "tab-item-top-to-workflow-icon-large": { - "prop": "--spectrum-tab-item-top-to-workflow-icon-large", + "table-row-height-medium-regular": { + "prop": "--spectrum-table-row-height-medium-regular", + "ref": "var(--spectrum-table-row-height-medium)", "desktop": { - "value": "17px" + "value": "40px" }, "mobile": { - "value": "23px" + "value": "50px" } }, - "tab-item-top-to-workflow-icon-medium": { - "prop": "--spectrum-tab-item-top-to-workflow-icon-medium", + "table-row-height-medium-spacious": { + "prop": "--spectrum-table-row-height-medium-spacious", "desktop": { - "value": "15px" + "value": "48px" }, "mobile": { - "value": "19px" + "value": "60px" } }, - "tab-item-top-to-workflow-icon-small": { - "prop": "--spectrum-tab-item-top-to-workflow-icon-small", + "table-row-height-small": { + "prop": "--spectrum-table-row-height-small", "desktop": { - "value": "13px" + "value": "32px" }, "mobile": { - "value": "15px" + "value": "40px" } }, - "table-border-divider-width": { - "prop": "--spectrum-table-border-divider-width", - "value": "1px" - }, - "table-checkbox-to-text": { - "prop": "--spectrum-table-checkbox-to-text", + "table-row-height-small-compact": { + "prop": "--spectrum-table-row-height-small-compact", + "ref": "var(--spectrum-component-height-75)", "desktop": { "value": "24px" }, @@ -11040,111 +14475,137 @@ "value": "30px" } }, - "table-column-header-row-bottom-to-text-extra-large": { - "prop": "--spectrum-table-column-header-row-bottom-to-text-extra-large", + "table-row-height-small-regular": { + "prop": "--spectrum-table-row-height-small-regular", + "ref": "var(--spectrum-table-row-height-small)", "desktop": { - "value": "13px" + "value": "32px" }, "mobile": { - "value": "17px" + "value": "40px" } }, - "table-column-header-row-bottom-to-text-large": { - "prop": "--spectrum-table-column-header-row-bottom-to-text-large", + "table-row-height-small-spacious": { + "prop": "--spectrum-table-row-height-small-spacious", "desktop": { - "value": "10px" + "value": "40px" }, "mobile": { - "value": "13px" + "value": "50px" } }, - "table-column-header-row-bottom-to-text-medium": { - "prop": "--spectrum-table-column-header-row-bottom-to-text-medium", + "table-row-hover-color": { + "prop": "--spectrum-table-row-hover-color", + "ref": "var(--spectrum-gray-900)", + "light": { + "value": "rgb(19, 19, 19)" + }, + "dark": { + "value": "rgb(242, 242, 242)" + } + }, + "table-row-hover-opacity": { + "prop": "--spectrum-table-row-hover-opacity", + "value": "0.07" + }, + "table-row-top-to-text-extra-large": { + "prop": "--spectrum-table-row-top-to-text-extra-large", "desktop": { - "value": "8px" + "value": "17px" }, "mobile": { - "value": "10px" + "value": "21px" } }, - "table-column-header-row-bottom-to-text-small": { - "prop": "--spectrum-table-column-header-row-bottom-to-text-small", + "table-row-top-to-text-extra-large-compact": { + "prop": "--spectrum-table-row-top-to-text-extra-large-compact", + "ref": "var(--spectrum-component-top-to-text-300)", "desktop": { - "value": "9px" + "value": "12px" }, "mobile": { - "value": "11px" + "value": "15px" } }, - "table-column-header-row-top-to-text-extra-large": { - "prop": "--spectrum-table-column-header-row-top-to-text-extra-large", + "table-row-top-to-text-extra-large-regular": { + "prop": "--spectrum-table-row-top-to-text-extra-large-regular", + "ref": "var(--spectrum-table-row-top-to-text-extra-large)", "desktop": { - "value": "13px" + "value": "17px" }, "mobile": { - "value": "16px" + "value": "21px" } }, - "table-column-header-row-top-to-text-large": { - "prop": "--spectrum-table-column-header-row-top-to-text-large", + "table-row-top-to-text-extra-large-spacious": { + "prop": "--spectrum-table-row-top-to-text-extra-large-spacious", "desktop": { - "value": "10px" + "value": "21px" }, "mobile": { - "value": "13px" + "value": "26px" } }, - "table-column-header-row-top-to-text-medium": { - "prop": "--spectrum-table-column-header-row-top-to-text-medium", + "table-row-top-to-text-large": { + "prop": "--spectrum-table-row-top-to-text-large", "desktop": { - "value": "7px" + "value": "14px" }, "mobile": { - "value": "9px" + "value": "18px" } }, - "table-column-header-row-top-to-text-small": { - "prop": "--spectrum-table-column-header-row-top-to-text-small", + "table-row-top-to-text-large-compact": { + "prop": "--spectrum-table-row-top-to-text-large-compact", + "ref": "var(--spectrum-component-top-to-text-200)", "desktop": { - "value": "8px" + "value": "9px" }, "mobile": { - "value": "10px" + "value": "12px" } }, - "table-edge-to-content": { - "prop": "--spectrum-table-edge-to-content", - "value": "16px" + "table-row-top-to-text-large-regular": { + "prop": "--spectrum-table-row-top-to-text-large-regular", + "ref": "var(--spectrum-table-row-top-to-text-large)", + "desktop": { + "value": "14px" + }, + "mobile": { + "value": "18px" + } }, - "table-header-row-checkbox-to-top-extra-large": { - "prop": "--spectrum-table-header-row-checkbox-to-top-extra-large", + "table-row-top-to-text-large-spacious": { + "prop": "--spectrum-table-row-top-to-text-large-spacious", "desktop": { - "value": "15px" + "value": "18px" }, "mobile": { - "value": "21px" + "value": "23px" } }, - "table-header-row-checkbox-to-top-large": { - "prop": "--spectrum-table-header-row-checkbox-to-top-large", + "table-row-top-to-text-medium": { + "prop": "--spectrum-table-row-top-to-text-medium", "desktop": { - "value": "12px" + "value": "10px" }, "mobile": { - "value": "17px" + "value": "14px" } }, - "table-header-row-checkbox-to-top-medium": { - "prop": "--spectrum-table-header-row-checkbox-to-top-medium", + "table-row-top-to-text-medium-compact": { + "prop": "--spectrum-table-row-top-to-text-medium-compact", + "ref": "var(--spectrum-component-top-to-text-100)", "desktop": { - "value": "9px" + "value": "6px" }, "mobile": { - "value": "13px" + "value": "8px" } }, - "table-header-row-checkbox-to-top-small": { - "prop": "--spectrum-table-header-row-checkbox-to-top-small", + "table-row-top-to-text-medium-regular": { + "prop": "--spectrum-table-row-top-to-text-medium-regular", + "ref": "var(--spectrum-table-row-top-to-text-medium)", "desktop": { "value": "10px" }, @@ -11152,424 +14613,469 @@ "value": "14px" } }, - "table-row-bottom-to-text-extra-large-compact": { - "prop": "--spectrum-table-row-bottom-to-text-extra-large-compact", - "ref": "var(--spectrum-component-bottom-to-text-300)", + "table-row-top-to-text-medium-spacious": { + "prop": "--spectrum-table-row-top-to-text-medium-spacious", "desktop": { - "value": "14px" + "value": "15px" }, "mobile": { - "value": "18px" + "value": "16px" } }, - "table-row-bottom-to-text-extra-large-regular": { - "prop": "--spectrum-table-row-bottom-to-text-extra-large-regular", + "table-row-top-to-text-small": { + "prop": "--spectrum-table-row-top-to-text-small", "desktop": { - "value": "17px" + "value": "8px" }, "mobile": { - "value": "22px" + "value": "10px" } }, - "table-row-bottom-to-text-extra-large-spacious": { - "prop": "--spectrum-table-row-bottom-to-text-extra-large-spacious", + "table-row-top-to-text-small-compact": { + "prop": "--spectrum-table-row-top-to-text-small-compact", + "ref": "var(--spectrum-component-top-to-text-75)", "desktop": { - "value": "21px" + "value": "4px" }, "mobile": { - "value": "27px" + "value": "5px" } }, - "table-row-bottom-to-text-large-compact": { - "prop": "--spectrum-table-row-bottom-to-text-large-compact", - "ref": "var(--spectrum-component-bottom-to-text-200)", + "table-row-top-to-text-small-regular": { + "prop": "--spectrum-table-row-top-to-text-small-regular", + "ref": "var(--spectrum-table-row-top-to-text-small)", "desktop": { - "value": "11px" + "value": "8px" }, "mobile": { - "value": "14px" + "value": "10px" } }, - "table-row-bottom-to-text-large-regular": { - "prop": "--spectrum-table-row-bottom-to-text-large-regular", + "table-row-top-to-text-small-spacious": { + "prop": "--spectrum-table-row-top-to-text-small-spacious", "desktop": { - "value": "14px" + "value": "12px" }, "mobile": { - "value": "18px" + "value": "15px" } }, - "table-row-bottom-to-text-large-spacious": { - "prop": "--spectrum-table-row-bottom-to-text-large-spacious", + "table-section-header-row-height-extra-large": { + "prop": "--spectrum-table-section-header-row-height-extra-large", "desktop": { - "value": "18px" + "value": "48px" }, "mobile": { - "value": "23px" + "value": "60px" } }, - "table-row-bottom-to-text-medium-compact": { - "prop": "--spectrum-table-row-bottom-to-text-medium-compact", - "ref": "var(--spectrum-component-bottom-to-text-100)", + "table-section-header-row-height-large": { + "prop": "--spectrum-table-section-header-row-height-large", "desktop": { - "value": "9px" + "value": "40px" }, "mobile": { - "value": "11px" + "value": "50px" } }, - "table-row-bottom-to-text-medium-regular": { - "prop": "--spectrum-table-row-bottom-to-text-medium-regular", + "table-section-header-row-height-medium": { + "prop": "--spectrum-table-section-header-row-height-medium", "desktop": { - "value": "12px" + "value": "32px" }, "mobile": { - "value": "15px" + "value": "40px" } }, - "table-row-bottom-to-text-medium-spacious": { - "prop": "--spectrum-table-row-bottom-to-text-medium-spacious", + "table-section-header-row-height-small": { + "prop": "--spectrum-table-section-header-row-height-small", "desktop": { - "value": "16px" + "value": "24px" }, "mobile": { - "value": "18px" + "value": "30px" } }, - "table-row-bottom-to-text-small-compact": { - "prop": "--spectrum-table-row-bottom-to-text-small-compact", - "ref": "var(--spectrum-component-bottom-to-text-75)", - "desktop": { - "value": "5px" + "table-selected-row-background-color": { + "prop": "--spectrum-table-selected-row-background-color", + "ref": "var(--spectrum-informative-color-800)", + "light": { + "value": "rgb(59, 99, 251)" }, - "mobile": { - "value": "6px" + "dark": { + "value": "rgb(64, 105, 253)" } }, - "table-row-bottom-to-text-small-regular": { - "prop": "--spectrum-table-row-bottom-to-text-small-regular", - "desktop": { - "value": "9px" + "table-selected-row-background-color-non-emphasized": { + "prop": "--spectrum-table-selected-row-background-color-non-emphasized", + "ref": "var(--spectrum-neutral-background-color-selected-default)", + "light": { + "value": "rgb(41, 41, 41)" }, - "mobile": { - "value": "11px" + "dark": { + "value": "rgb(219, 219, 219)" } }, - "table-row-bottom-to-text-small-spacious": { - "prop": "--spectrum-table-row-bottom-to-text-small-spacious", + "table-selected-row-background-opacity": { + "prop": "--spectrum-table-selected-row-background-opacity", + "value": "0.1" + }, + "table-selected-row-background-opacity-hover": { + "prop": "--spectrum-table-selected-row-background-opacity-hover", + "value": "0.15" + }, + "table-selected-row-background-opacity-non-emphasized": { + "prop": "--spectrum-table-selected-row-background-opacity-non-emphasized", + "value": "0.1" + }, + "table-selected-row-background-opacity-non-emphasized-hover": { + "prop": "--spectrum-table-selected-row-background-opacity-non-emphasized-hover", + "value": "0.15" + }, + "table-thumbnail-to-top-minimum-extra-large": { + "prop": "--spectrum-table-thumbnail-to-top-minimum-extra-large", "desktop": { - "value": "13px" + "value": "8px" }, "mobile": { - "value": "16px" + "value": "10px" } }, - "table-row-checkbox-to-top-extra-large-compact": { - "prop": "--spectrum-table-row-checkbox-to-top-extra-large-compact", + "table-thumbnail-to-top-minimum-extra-large-compact": { + "prop": "--spectrum-table-thumbnail-to-top-minimum-extra-large-compact", "desktop": { - "value": "15px" + "value": "8px" }, "mobile": { - "value": "21px" + "value": "10px" } }, - "table-row-checkbox-to-top-extra-large-regular": { - "prop": "--spectrum-table-row-checkbox-to-top-extra-large-regular", + "table-thumbnail-to-top-minimum-extra-large-regular": { + "prop": "--spectrum-table-thumbnail-to-top-minimum-extra-large-regular", + "ref": "var(--spectrum-table-thumbnail-to-top-minimum-extra-large)", "desktop": { - "value": "19px" + "value": "8px" }, "mobile": { - "value": "26px" + "value": "10px" } }, - "table-row-checkbox-to-top-extra-large-spacious": { - "prop": "--spectrum-table-row-checkbox-to-top-extra-large-spacious", + "table-thumbnail-to-top-minimum-extra-large-spacious": { + "prop": "--spectrum-table-thumbnail-to-top-minimum-extra-large-spacious", "desktop": { - "value": "23px" + "value": "10px" }, "mobile": { - "value": "31px" + "value": "12px" } }, - "table-row-checkbox-to-top-large-compact": { - "prop": "--spectrum-table-row-checkbox-to-top-large-compact", + "table-thumbnail-to-top-minimum-large": { + "prop": "--spectrum-table-thumbnail-to-top-minimum-large", "desktop": { - "value": "12px" + "value": "8px" }, "mobile": { - "value": "17px" + "value": "10px" } }, - "table-row-checkbox-to-top-large-regular": { - "prop": "--spectrum-table-row-checkbox-to-top-large-regular", + "table-thumbnail-to-top-minimum-large-compact": { + "prop": "--spectrum-table-thumbnail-to-top-minimum-large-compact", "desktop": { - "value": "16px" + "value": "7px" }, "mobile": { - "value": "22px" + "value": "9px" } }, - "table-row-checkbox-to-top-large-spacious": { - "prop": "--spectrum-table-row-checkbox-to-top-large-spacious", + "table-thumbnail-to-top-minimum-large-regular": { + "prop": "--spectrum-table-thumbnail-to-top-minimum-large-regular", + "ref": "var(--spectrum-table-thumbnail-to-top-minimum-large)", "desktop": { - "value": "20px" + "value": "8px" }, "mobile": { - "value": "27px" + "value": "10px" } }, - "table-row-checkbox-to-top-medium-compact": { - "prop": "--spectrum-table-row-checkbox-to-top-medium-compact", + "table-thumbnail-to-top-minimum-large-spacious": { + "prop": "--spectrum-table-thumbnail-to-top-minimum-large-spacious", "desktop": { - "value": "9px" + "value": "8px" }, "mobile": { - "value": "13px" + "value": "10px" } }, - "table-row-checkbox-to-top-medium-regular": { - "prop": "--spectrum-table-row-checkbox-to-top-medium-regular", + "table-thumbnail-to-top-minimum-medium": { + "prop": "--spectrum-table-thumbnail-to-top-minimum-medium", "desktop": { - "value": "13px" + "value": "7px" }, "mobile": { - "value": "18px" + "value": "9px" } }, - "table-row-checkbox-to-top-medium-spacious": { - "prop": "--spectrum-table-row-checkbox-to-top-medium-spacious", + "table-thumbnail-to-top-minimum-medium-compact": { + "prop": "--spectrum-table-thumbnail-to-top-minimum-medium-compact", "desktop": { - "value": "17px" + "value": "5px" }, "mobile": { - "value": "23px" + "value": "6px" } }, - "table-row-checkbox-to-top-small-compact": { - "prop": "--spectrum-table-row-checkbox-to-top-small-compact", + "table-thumbnail-to-top-minimum-medium-regular": { + "prop": "--spectrum-table-thumbnail-to-top-minimum-medium-regular", + "ref": "var(--spectrum-table-thumbnail-to-top-minimum-medium)", "desktop": { - "value": "6px" + "value": "7px" }, "mobile": { "value": "9px" } }, - "table-row-checkbox-to-top-small-regular": { - "prop": "--spectrum-table-row-checkbox-to-top-small-regular", + "table-thumbnail-to-top-minimum-medium-spacious": { + "prop": "--spectrum-table-thumbnail-to-top-minimum-medium-spacious", "desktop": { - "value": "10px" + "value": "8px" }, "mobile": { - "value": "14px" + "value": "10px" } }, - "table-row-checkbox-to-top-small-spacious": { - "prop": "--spectrum-table-row-checkbox-to-top-small-spacious", + "table-thumbnail-to-top-minimum-small": { + "prop": "--spectrum-table-thumbnail-to-top-minimum-small", "desktop": { - "value": "14px" + "value": "5px" }, "mobile": { - "value": "19px" + "value": "6px" } }, - "table-row-down-opacity": { - "prop": "--spectrum-table-row-down-opacity", - "value": "0.1" + "table-thumbnail-to-top-minimum-small-compact": { + "prop": "--spectrum-table-thumbnail-to-top-minimum-small-compact", + "desktop": { + "value": "4px" + }, + "mobile": { + "value": "5px" + } }, - "table-row-height-extra-large-compact": { - "prop": "--spectrum-table-row-height-extra-large-compact", - "ref": "var(--spectrum-component-height-300)", + "table-thumbnail-to-top-minimum-small-regular": { + "prop": "--spectrum-table-thumbnail-to-top-minimum-small-regular", + "ref": "var(--spectrum-table-thumbnail-to-top-minimum-small)", "desktop": { - "value": "48px" + "value": "5px" }, "mobile": { - "value": "60px" + "value": "6px" } }, - "table-row-height-extra-large-regular": { - "prop": "--spectrum-table-row-height-extra-large-regular", + "table-thumbnail-to-top-minimum-small-spacious": { + "prop": "--spectrum-table-thumbnail-to-top-minimum-small-spacious", "desktop": { - "value": "56px" + "value": "7px" }, "mobile": { - "value": "70px" + "value": "9px" } }, - "table-row-height-extra-large-spacious": { - "prop": "--spectrum-table-row-height-extra-large-spacious", + "tag-edge-to-clear-icon-large": { + "prop": "--spectrum-tag-edge-to-clear-icon-large", "desktop": { - "value": "64px" + "value": "15px" }, "mobile": { - "value": "80px" + "value": "19px" } }, - "table-row-height-large-compact": { - "prop": "--spectrum-table-row-height-large-compact", - "ref": "var(--spectrum-component-height-200)", + "tag-edge-to-clear-icon-medium": { + "prop": "--spectrum-tag-edge-to-clear-icon-medium", "desktop": { - "value": "40px" + "value": "12px" }, "mobile": { - "value": "50px" + "value": "15px" } }, - "table-row-height-large-regular": { - "prop": "--spectrum-table-row-height-large-regular", + "tag-edge-to-clear-icon-small": { + "prop": "--spectrum-tag-edge-to-clear-icon-small", "desktop": { - "value": "48px" + "value": "8px" }, "mobile": { - "value": "60px" + "value": "10px" } }, - "table-row-height-large-spacious": { - "prop": "--spectrum-table-row-height-large-spacious", + "tag-label-to-clear-icon-large": { + "prop": "--spectrum-tag-label-to-clear-icon-large", "desktop": { - "value": "56px" + "value": "15px" }, "mobile": { - "value": "70px" + "value": "19px" } }, - "table-row-height-medium-compact": { - "prop": "--spectrum-table-row-height-medium-compact", - "ref": "var(--spectrum-component-height-100)", + "tag-label-to-clear-icon-medium": { + "prop": "--spectrum-tag-label-to-clear-icon-medium", "desktop": { - "value": "32px" + "value": "12px" }, "mobile": { - "value": "40px" + "value": "15px" } }, - "table-row-height-medium-regular": { - "prop": "--spectrum-table-row-height-medium-regular", + "tag-label-to-clear-icon-small": { + "prop": "--spectrum-tag-label-to-clear-icon-small", "desktop": { - "value": "40px" + "value": "8px" }, "mobile": { - "value": "50px" + "value": "10px" } }, - "table-row-height-medium-spacious": { - "prop": "--spectrum-table-row-height-medium-spacious", + "tag-maximum-width-multiplier": { + "prop": "--spectrum-tag-maximum-width-multiplier", + "value": 7 + }, + "tag-minimum-width-large": { + "prop": "--spectrum-tag-minimum-width-large", "desktop": { - "value": "48px" + "value": "33px" }, "mobile": { - "value": "60px" + "value": "42px" } }, - "table-row-height-small-compact": { - "prop": "--spectrum-table-row-height-small-compact", - "ref": "var(--spectrum-component-height-75)", + "tag-minimum-width-medium": { + "prop": "--spectrum-tag-minimum-width-medium", "desktop": { - "value": "24px" + "value": "27px" }, "mobile": { - "value": "30px" + "value": "34px" } }, - "table-row-height-small-regular": { - "prop": "--spectrum-table-row-height-small-regular", + "tag-minimum-width-multiplier": { + "prop": "--spectrum-tag-minimum-width-multiplier", + "value": 1 + }, + "tag-minimum-width-small": { + "prop": "--spectrum-tag-minimum-width-small", "desktop": { - "value": "32px" + "value": "21px" }, "mobile": { - "value": "40px" + "value": "25px" } }, - "table-row-height-small-spacious": { - "prop": "--spectrum-table-row-height-small-spacious", + "tag-top-to-avatar-large": { + "prop": "--spectrum-tag-top-to-avatar-large", "desktop": { - "value": "40px" + "value": "9px" }, "mobile": { - "value": "50px" + "value": "11px" } }, - "table-row-hover-color": { - "prop": "--spectrum-table-row-hover-color", - "ref": "var(--spectrum-gray-900)", - "light": { - "value": "rgb(19, 19, 19)" + "tag-top-to-avatar-medium": { + "prop": "--spectrum-tag-top-to-avatar-medium", + "desktop": { + "value": "6px" }, - "dark": { - "value": "rgb(242, 242, 242)" + "mobile": { + "value": "7px" } }, - "table-row-hover-opacity": { - "prop": "--spectrum-table-row-hover-opacity", - "value": "0.07" - }, - "table-row-top-to-text-extra-large-compact": { - "prop": "--spectrum-table-row-top-to-text-extra-large-compact", - "ref": "var(--spectrum-component-top-to-text-300)", + "tag-top-to-avatar-small": { + "prop": "--spectrum-tag-top-to-avatar-small", "desktop": { - "value": "12px" + "value": "4px" }, "mobile": { - "value": "15px" + "value": "5px" } }, - "table-row-top-to-text-extra-large-regular": { - "prop": "--spectrum-table-row-top-to-text-extra-large-regular", + "tag-top-to-cross-icon-large": { + "prop": "--spectrum-tag-top-to-cross-icon-large", "desktop": { - "value": "17px" + "value": "15px" }, "mobile": { - "value": "21px" + "value": "19px" } }, - "table-row-top-to-text-extra-large-spacious": { - "prop": "--spectrum-table-row-top-to-text-extra-large-spacious", + "tag-top-to-cross-icon-medium": { + "prop": "--spectrum-tag-top-to-cross-icon-medium", "desktop": { - "value": "21px" + "value": "12px" }, "mobile": { - "value": "26px" + "value": "15px" } }, - "table-row-top-to-text-large-compact": { - "prop": "--spectrum-table-row-top-to-text-large-compact", - "ref": "var(--spectrum-component-top-to-text-200)", + "tag-top-to-cross-icon-small": { + "prop": "--spectrum-tag-top-to-cross-icon-small", "desktop": { - "value": "9px" + "value": "8px" }, "mobile": { - "value": "12px" + "value": "10px" } }, - "table-row-top-to-text-large-regular": { - "prop": "--spectrum-table-row-top-to-text-large-regular", + "takeover-dialog-height": { + "prop": "--spectrum-takeover-dialog-height", + "value": "100%" + }, + "takeover-dialog-width": { + "prop": "--spectrum-takeover-dialog-width", + "value": "100%" + }, + "text-align-center": { + "prop": "--spectrum-text-align-center", + "value": "center" + }, + "text-align-end": { + "prop": "--spectrum-text-align-end", + "value": "end" + }, + "text-align-start": { + "prop": "--spectrum-text-align-start", + "value": "start" + }, + "text-area-minimum-height": { + "prop": "--spectrum-text-area-minimum-height", "desktop": { - "value": "14px" + "value": "56px" }, "mobile": { - "value": "18px" + "value": "70px" } }, - "table-row-top-to-text-large-spacious": { - "prop": "--spectrum-table-row-top-to-text-large-spacious", + "text-area-minimum-width": { + "prop": "--spectrum-text-area-minimum-width", "desktop": { - "value": "18px" + "value": "112px" }, "mobile": { - "value": "23px" + "value": "140px" } }, - "table-row-top-to-text-medium-compact": { - "prop": "--spectrum-table-row-top-to-text-medium-compact", - "ref": "var(--spectrum-component-top-to-text-100)", + "text-field-minimum-width-multiplier": { + "prop": "--spectrum-text-field-minimum-width-multiplier", + "value": 1.5 + }, + "text-to-control-100": { + "prop": "--spectrum-text-to-control-100", "desktop": { - "value": "6px" + "value": "10px" }, "mobile": { - "value": "8px" + "value": "13px" } }, - "table-row-top-to-text-medium-regular": { - "prop": "--spectrum-table-row-top-to-text-medium-regular", + "text-to-control-200": { + "prop": "--spectrum-text-to-control-200", "desktop": { "value": "11px" }, @@ -11577,18 +15083,17 @@ "value": "14px" } }, - "table-row-top-to-text-medium-spacious": { - "prop": "--spectrum-table-row-top-to-text-medium-spacious", + "text-to-control-300": { + "prop": "--spectrum-text-to-control-300", "desktop": { - "value": "15px" + "value": "13px" }, "mobile": { - "value": "18px" + "value": "16px" } }, - "table-row-top-to-text-small-compact": { - "prop": "--spectrum-table-row-top-to-text-small-compact", - "ref": "var(--spectrum-component-top-to-text-75)", + "text-to-control-50": { + "prop": "--spectrum-text-to-control-50", "desktop": { "value": "4px" }, @@ -11596,73 +15101,80 @@ "value": "5px" } }, - "table-row-top-to-text-small-regular": { - "prop": "--spectrum-table-row-top-to-text-small-regular", + "text-to-control-75": { + "prop": "--spectrum-text-to-control-75", "desktop": { - "value": "8px" + "value": "9px" }, "mobile": { - "value": "10px" + "value": "11px" } }, - "table-row-top-to-text-small-spacious": { - "prop": "--spectrum-table-row-top-to-text-small-spacious", + "text-to-visual-100": { + "prop": "--spectrum-text-to-visual-100", "desktop": { - "value": "12px" + "value": "6px" }, "mobile": { - "value": "15px" + "value": "8px" } }, - "table-section-header-row-height-extra-large": { - "prop": "--spectrum-table-section-header-row-height-extra-large", + "text-to-visual-200": { + "prop": "--spectrum-text-to-visual-200", "desktop": { - "value": "48px" + "value": "7px" }, "mobile": { - "value": "60px" + "value": "9px" } }, - "table-section-header-row-height-large": { - "prop": "--spectrum-table-section-header-row-height-large", + "text-to-visual-300": { + "prop": "--spectrum-text-to-visual-300", "desktop": { - "value": "40px" + "value": "8px" }, "mobile": { - "value": "50px" + "value": "10px" } }, - "table-section-header-row-height-medium": { - "prop": "--spectrum-table-section-header-row-height-medium", + "text-to-visual-400": { + "prop": "--spectrum-text-to-visual-400", "desktop": { - "value": "32px" + "value": "9px" }, "mobile": { - "value": "40px" + "value": "11px" } }, - "table-section-header-row-height-small": { - "prop": "--spectrum-table-section-header-row-height-small", + "text-to-visual-50": { + "prop": "--spectrum-text-to-visual-50", "desktop": { - "value": "24px" + "value": "5px" }, "mobile": { - "value": "30px" + "value": "7px" } }, - "table-selected-row-background-color": { - "prop": "--spectrum-table-selected-row-background-color", - "ref": "var(--spectrum-informative-color-800)", - "light": { - "value": "rgb(59, 99, 251)" + "text-to-visual-75": { + "prop": "--spectrum-text-to-visual-75", + "desktop": { + "value": "5px" }, - "dark": { - "value": "rgb(64, 105, 253)" + "mobile": { + "value": "7px" } }, - "table-selected-row-background-color-non-emphasized": { - "prop": "--spectrum-table-selected-row-background-color-non-emphasized", - "ref": "var(--spectrum-neutral-background-color-selected-default)", + "text-underline-gap": { + "prop": "--spectrum-text-underline-gap", + "value": "1px" + }, + "text-underline-thickness": { + "prop": "--spectrum-text-underline-thickness", + "value": "1px" + }, + "thumbnail-border-color": { + "prop": "--spectrum-thumbnail-border-color", + "ref": "var(--spectrum-gray-800)", "light": { "value": "rgb(41, 41, 41)" }, @@ -11670,168 +15182,185 @@ "value": "rgb(219, 219, 219)" } }, - "table-selected-row-background-opacity": { - "prop": "--spectrum-table-selected-row-background-opacity", + "thumbnail-border-opacity": { + "prop": "--spectrum-thumbnail-border-opacity", "value": "0.1" }, - "table-selected-row-background-opacity-hover": { - "prop": "--spectrum-table-selected-row-background-opacity-hover", - "value": "0.15" - }, - "table-selected-row-background-opacity-non-emphasized": { - "prop": "--spectrum-table-selected-row-background-opacity-non-emphasized", - "value": "0.1" + "thumbnail-corner-radius": { + "prop": "--spectrum-thumbnail-corner-radius", + "ref": "var(--spectrum-corner-radius-75)", + "value": "3px" }, - "table-selected-row-background-opacity-non-emphasized-hover": { - "prop": "--spectrum-table-selected-row-background-opacity-non-emphasized-hover", - "value": "0.15" + "thumbnail-opacity-checkerboard-square-size": { + "prop": "--spectrum-thumbnail-opacity-checkerboard-square-size", + "value": "4px" }, - "table-thumbnail-to-top-minimum-extra-large-compact": { - "prop": "--spectrum-table-thumbnail-to-top-minimum-extra-large-compact", - "desktop": { - "value": "8px" - }, - "mobile": { - "value": "10px" - } + "thumbnail-opacity-disabled": { + "prop": "--spectrum-thumbnail-opacity-disabled", + "ref": "var(--spectrum-opacity-disabled)", + "value": "0.3" }, - "table-thumbnail-to-top-minimum-extra-large-regular": { - "prop": "--spectrum-table-thumbnail-to-top-minimum-extra-large-regular", + "thumbnail-size-100": { + "prop": "--spectrum-thumbnail-size-100", "desktop": { - "value": "8px" + "value": "24px" }, "mobile": { - "value": "10px" + "value": "28px" } }, - "table-thumbnail-to-top-minimum-extra-large-spacious": { - "prop": "--spectrum-table-thumbnail-to-top-minimum-extra-large-spacious", + "thumbnail-size-1000": { + "prop": "--spectrum-thumbnail-size-1000", "desktop": { - "value": "10px" + "value": "64px" }, "mobile": { - "value": "12px" + "value": "72px" } }, - "table-thumbnail-to-top-minimum-large-compact": { - "prop": "--spectrum-table-thumbnail-to-top-minimum-large-compact", + "thumbnail-size-200": { + "prop": "--spectrum-thumbnail-size-200", "desktop": { - "value": "7px" + "value": "28px" }, "mobile": { - "value": "9px" + "value": "32px" } }, - "table-thumbnail-to-top-minimum-large-regular": { - "prop": "--spectrum-table-thumbnail-to-top-minimum-large-regular", + "thumbnail-size-300": { + "prop": "--spectrum-thumbnail-size-300", "desktop": { - "value": "8px" + "value": "32px" }, "mobile": { - "value": "10px" + "value": "36px" } }, - "table-thumbnail-to-top-minimum-large-spacious": { - "prop": "--spectrum-table-thumbnail-to-top-minimum-large-spacious", + "thumbnail-size-400": { + "prop": "--spectrum-thumbnail-size-400", "desktop": { - "value": "8px" + "value": "36px" }, "mobile": { - "value": "10px" + "value": "40px" } }, - "table-thumbnail-to-top-minimum-medium-compact": { - "prop": "--spectrum-table-thumbnail-to-top-minimum-medium-compact", + "thumbnail-size-50": { + "prop": "--spectrum-thumbnail-size-50", "desktop": { - "value": "5px" + "value": "16px" }, "mobile": { - "value": "6px" + "value": "20px" } }, - "table-thumbnail-to-top-minimum-medium-regular": { - "prop": "--spectrum-table-thumbnail-to-top-minimum-medium-regular", + "thumbnail-size-500": { + "prop": "--spectrum-thumbnail-size-500", "desktop": { - "value": "7px" + "value": "40px" }, "mobile": { - "value": "9px" + "value": "44px" } }, - "table-thumbnail-to-top-minimum-medium-spacious": { - "prop": "--spectrum-table-thumbnail-to-top-minimum-medium-spacious", + "thumbnail-size-600": { + "prop": "--spectrum-thumbnail-size-600", "desktop": { - "value": "8px" + "value": "44px" }, "mobile": { - "value": "10px" + "value": "48px" } }, - "table-thumbnail-to-top-minimum-small-compact": { - "prop": "--spectrum-table-thumbnail-to-top-minimum-small-compact", + "thumbnail-size-700": { + "prop": "--spectrum-thumbnail-size-700", "desktop": { - "value": "4px" + "value": "48px" }, "mobile": { - "value": "5px" + "value": "52px" } }, - "table-thumbnail-to-top-minimum-small-regular": { - "prop": "--spectrum-table-thumbnail-to-top-minimum-small-regular", + "thumbnail-size-75": { + "prop": "--spectrum-thumbnail-size-75", "desktop": { - "value": "5px" + "value": "20px" }, "mobile": { - "value": "6px" + "value": "24px" } }, - "table-thumbnail-to-top-minimum-small-spacious": { - "prop": "--spectrum-table-thumbnail-to-top-minimum-small-spacious", + "thumbnail-size-800": { + "prop": "--spectrum-thumbnail-size-800", "desktop": { - "value": "7px" + "value": "52px" }, "mobile": { - "value": "9px" + "value": "56px" } }, - "tag-top-to-avatar-large": { - "prop": "--spectrum-tag-top-to-avatar-large", + "thumbnail-size-900": { + "prop": "--spectrum-thumbnail-size-900", "desktop": { - "value": "9px" + "value": "56px" }, "mobile": { - "value": "11px" + "value": "64px" } }, - "tag-top-to-avatar-medium": { - "prop": "--spectrum-tag-top-to-avatar-medium", - "desktop": { - "value": "6px" - }, - "mobile": { - "value": "7px" - } + "title-cjk-emphasized-font-style": { + "prop": "--spectrum-title-cjk-emphasized-font-style", + "ref": "var(--spectrum-default-font-style)", + "value": "normal" }, - "tag-top-to-avatar-small": { - "prop": "--spectrum-tag-top-to-avatar-small", + "title-cjk-emphasized-font-weight": { + "prop": "--spectrum-title-cjk-emphasized-font-weight", + "ref": "var(--spectrum-extra-bold-font-weight)", + "value": "800" + }, + "title-cjk-font-family": { + "prop": "--spectrum-title-cjk-font-family", + "ref": "var(--spectrum-cjk-font-family)", + "value": "Adobe Clean Han" + }, + "title-cjk-font-style": { + "prop": "--spectrum-title-cjk-font-style", + "ref": "var(--spectrum-default-font-style)", + "value": "normal" + }, + "title-cjk-font-weight": { + "prop": "--spectrum-title-cjk-font-weight", + "ref": "var(--spectrum-bold-font-weight)", + "value": "700" + }, + "title-cjk-line-height": { + "prop": "--spectrum-title-cjk-line-height", + "ref": "var(--spectrum-cjk-line-height-100)", + "value": 1.5 + }, + "title-cjk-size-l": { + "prop": "--spectrum-title-cjk-size-l", + "ref": "var(--spectrum-font-size-200)", "desktop": { - "value": "4px" + "value": "16px" }, "mobile": { - "value": "5px" + "value": "19px" } }, - "tag-top-to-cross-icon-large": { - "prop": "--spectrum-tag-top-to-cross-icon-large", + "title-cjk-size-m": { + "prop": "--spectrum-title-cjk-size-m", + "ref": "var(--spectrum-font-size-100)", "desktop": { - "value": "15px" + "value": "14px" }, "mobile": { - "value": "19px" + "value": "17px" } }, - "tag-top-to-cross-icon-medium": { - "prop": "--spectrum-tag-top-to-cross-icon-medium", + "title-cjk-size-s": { + "prop": "--spectrum-title-cjk-size-s", + "ref": "var(--spectrum-font-size-75)", "desktop": { "value": "12px" }, @@ -11839,328 +15368,495 @@ "value": "15px" } }, - "tag-top-to-cross-icon-small": { - "prop": "--spectrum-tag-top-to-cross-icon-small", + "title-cjk-size-xl": { + "prop": "--spectrum-title-cjk-size-xl", + "ref": "var(--spectrum-font-size-300)", "desktop": { - "value": "8px" + "value": "18px" }, "mobile": { - "value": "10px" + "value": "22px" } }, - "text-area-minimum-height": { - "prop": "--spectrum-text-area-minimum-height", + "title-cjk-size-xs": { + "prop": "--spectrum-title-cjk-size-xs", + "ref": "var(--spectrum-font-size-50)", "desktop": { - "value": "56px" + "value": "11px" }, "mobile": { - "value": "70px" + "value": "13px" } }, - "text-area-minimum-width": { - "prop": "--spectrum-text-area-minimum-width", + "title-cjk-size-xxl": { + "prop": "--spectrum-title-cjk-size-xxl", + "ref": "var(--spectrum-font-size-400)", "desktop": { - "value": "112px" + "value": "20px" }, "mobile": { - "value": "140px" + "value": "24px" } }, - "text-field-minimum-width-multiplier": { - "prop": "--spectrum-text-field-minimum-width-multiplier", - "value": "1.5" - }, - "text-to-control-100": { - "prop": "--spectrum-text-to-control-100", + "title-cjk-size-xxxl": { + "prop": "--spectrum-title-cjk-size-xxxl", + "ref": "var(--spectrum-font-size-500)", "desktop": { - "value": "10px" + "value": "22px" }, "mobile": { - "value": "13px" + "value": "27px" } }, - "text-to-control-200": { - "prop": "--spectrum-text-to-control-200", - "desktop": { - "value": "11px" - }, - "mobile": { - "value": "14px" - } + "title-cjk-strong-emphasized-font-style": { + "prop": "--spectrum-title-cjk-strong-emphasized-font-style", + "ref": "var(--spectrum-default-font-style)", + "value": "normal" }, - "text-to-control-300": { - "prop": "--spectrum-text-to-control-300", - "desktop": { - "value": "13px" - }, - "mobile": { - "value": "16px" - } + "title-cjk-strong-emphasized-font-weight": { + "prop": "--spectrum-title-cjk-strong-emphasized-font-weight", + "ref": "var(--spectrum-extra-bold-font-weight)", + "value": "800" }, - "text-to-control-75": { - "prop": "--spectrum-text-to-control-75", - "desktop": { - "value": "9px" + "title-cjk-strong-font-style": { + "prop": "--spectrum-title-cjk-strong-font-style", + "ref": "var(--spectrum-default-font-style)", + "value": "normal" + }, + "title-cjk-strong-font-weight": { + "prop": "--spectrum-title-cjk-strong-font-weight", + "ref": "var(--spectrum-extra-bold-font-weight)", + "value": "800" + }, + "title-color": { + "prop": "--spectrum-title-color", + "ref": "var(--spectrum-gray-900)", + "light": { + "value": "rgb(19, 19, 19)" }, - "mobile": { - "value": "11px" + "dark": { + "value": "rgb(242, 242, 242)" } }, - "text-to-visual-100": { - "prop": "--spectrum-text-to-visual-100", - "desktop": { - "value": "6px" - }, - "mobile": { - "value": "8px" - } + "title-line-height": { + "prop": "--spectrum-title-line-height", + "ref": "var(--spectrum-line-height-100)", + "value": 1.3 + }, + "title-margin-bottom-multiplier": { + "prop": "--spectrum-title-margin-bottom-multiplier", + "value": 0.25 + }, + "title-margin-top-multiplier": { + "prop": "--spectrum-title-margin-top-multiplier", + "value": 0.88888889 + }, + "title-sans-serif-emphasized-font-style": { + "prop": "--spectrum-title-sans-serif-emphasized-font-style", + "ref": "var(--spectrum-italic-font-style)", + "value": "italic" + }, + "title-sans-serif-emphasized-font-weight": { + "prop": "--spectrum-title-sans-serif-emphasized-font-weight", + "ref": "var(--spectrum-bold-font-weight)", + "value": "700" + }, + "title-sans-serif-font-family": { + "prop": "--spectrum-title-sans-serif-font-family", + "ref": "var(--spectrum-sans-serif-font-family)", + "value": "Adobe Clean" + }, + "title-sans-serif-font-style": { + "prop": "--spectrum-title-sans-serif-font-style", + "ref": "var(--spectrum-default-font-style)", + "value": "normal" + }, + "title-sans-serif-font-weight": { + "prop": "--spectrum-title-sans-serif-font-weight", + "ref": "var(--spectrum-bold-font-weight)", + "value": "700" + }, + "title-sans-serif-strong-emphasized-font-style": { + "prop": "--spectrum-title-sans-serif-strong-emphasized-font-style", + "ref": "var(--spectrum-italic-font-style)", + "value": "italic" + }, + "title-sans-serif-strong-emphasized-font-weight": { + "prop": "--spectrum-title-sans-serif-strong-emphasized-font-weight", + "ref": "var(--spectrum-extra-bold-font-weight)", + "value": "800" + }, + "title-sans-serif-strong-font-style": { + "prop": "--spectrum-title-sans-serif-strong-font-style", + "ref": "var(--spectrum-default-font-style)", + "value": "normal" + }, + "title-sans-serif-strong-font-weight": { + "prop": "--spectrum-title-sans-serif-strong-font-weight", + "ref": "var(--spectrum-extra-bold-font-weight)", + "value": "800" + }, + "title-serif-emphasized-font-style": { + "prop": "--spectrum-title-serif-emphasized-font-style", + "ref": "var(--spectrum-italic-font-style)", + "value": "italic" + }, + "title-serif-emphasized-font-weight": { + "prop": "--spectrum-title-serif-emphasized-font-weight", + "ref": "var(--spectrum-bold-font-weight)", + "value": "700" + }, + "title-serif-font-family": { + "prop": "--spectrum-title-serif-font-family", + "ref": "var(--spectrum-serif-font-family)", + "value": "Adobe Clean Serif" + }, + "title-serif-font-style": { + "prop": "--spectrum-title-serif-font-style", + "ref": "var(--spectrum-default-font-style)", + "value": "normal" + }, + "title-serif-font-weight": { + "prop": "--spectrum-title-serif-font-weight", + "ref": "var(--spectrum-bold-font-weight)", + "value": "700" + }, + "title-serif-strong-emphasized-font-style": { + "prop": "--spectrum-title-serif-strong-emphasized-font-style", + "ref": "var(--spectrum-italic-font-style)", + "value": "italic" + }, + "title-serif-strong-emphasized-font-weight": { + "prop": "--spectrum-title-serif-strong-emphasized-font-weight", + "ref": "var(--spectrum-black-font-weight)", + "value": "900" }, - "text-to-visual-200": { - "prop": "--spectrum-text-to-visual-200", - "desktop": { - "value": "7px" - }, - "mobile": { - "value": "9px" - } + "title-serif-strong-font-style": { + "prop": "--spectrum-title-serif-strong-font-style", + "ref": "var(--spectrum-default-font-style)", + "value": "normal" }, - "text-to-visual-300": { - "prop": "--spectrum-text-to-visual-300", - "desktop": { - "value": "8px" - }, - "mobile": { - "value": "10px" - } + "title-serif-strong-font-weight": { + "prop": "--spectrum-title-serif-strong-font-weight", + "ref": "var(--spectrum-black-font-weight)", + "value": "900" }, - "text-to-visual-400": { - "prop": "--spectrum-text-to-visual-400", + "title-size-l": { + "prop": "--spectrum-title-size-l", + "ref": "var(--spectrum-font-size-300)", "desktop": { - "value": "9px" + "value": "18px" }, "mobile": { - "value": "11px" + "value": "22px" } }, - "text-to-visual-50": { - "prop": "--spectrum-text-to-visual-50", + "title-size-m": { + "prop": "--spectrum-title-size-m", + "ref": "var(--spectrum-font-size-200)", "desktop": { - "value": "5px" + "value": "16px" }, "mobile": { - "value": "7px" + "value": "19px" } }, - "text-to-visual-75": { - "prop": "--spectrum-text-to-visual-75", + "title-size-s": { + "prop": "--spectrum-title-size-s", + "ref": "var(--spectrum-font-size-100)", "desktop": { - "value": "5px" + "value": "14px" }, "mobile": { - "value": "7px" - } - }, - "text-underline-gap": { - "prop": "--spectrum-text-underline-gap", - "value": "1px" - }, - "text-underline-thickness": { - "prop": "--spectrum-text-underline-thickness", - "value": "1px" - }, - "thumbnail-border-color": { - "prop": "--spectrum-thumbnail-border-color", - "ref": "var(--spectrum-gray-800)", - "light": { - "value": "rgb(41, 41, 41)" - }, - "dark": { - "value": "rgb(219, 219, 219)" + "value": "17px" } }, - "thumbnail-border-opacity": { - "prop": "--spectrum-thumbnail-border-opacity", - "value": "0.1" - }, - "thumbnail-opacity-disabled": { - "prop": "--spectrum-thumbnail-opacity-disabled", - "ref": "var(--spectrum-opacity-disabled)", - "value": "0.3" - }, - "thumbnail-size-100": { - "prop": "--spectrum-thumbnail-size-100", + "title-size-xl": { + "prop": "--spectrum-title-size-xl", + "ref": "var(--spectrum-font-size-400)", "desktop": { "value": "20px" }, "mobile": { - "value": "26px" + "value": "24px" } }, - "thumbnail-size-1000": { - "prop": "--spectrum-thumbnail-size-1000", + "title-size-xs": { + "prop": "--spectrum-title-size-xs", + "ref": "var(--spectrum-font-size-75)", "desktop": { - "value": "56px" + "value": "12px" }, "mobile": { - "value": "70px" + "value": "15px" } }, - "thumbnail-size-200": { - "prop": "--spectrum-thumbnail-size-200", + "title-size-xxl": { + "prop": "--spectrum-title-size-xxl", + "ref": "var(--spectrum-font-size-500)", "desktop": { "value": "22px" }, "mobile": { - "value": "28px" + "value": "27px" } }, - "thumbnail-size-300": { - "prop": "--spectrum-thumbnail-size-300", + "title-size-xxxl": { + "prop": "--spectrum-title-size-xxxl", + "ref": "var(--spectrum-font-size-600)", "desktop": { - "value": "26px" + "value": "25px" }, "mobile": { - "value": "32px" + "value": "31px" } }, - "thumbnail-size-400": { - "prop": "--spectrum-thumbnail-size-400", + "toast-bottom-to-text": { + "prop": "--spectrum-toast-bottom-to-text", "desktop": { - "value": "28px" + "value": "20px" }, "mobile": { - "value": "36px" + "value": "22px" } }, - "thumbnail-size-50": { - "prop": "--spectrum-thumbnail-size-50", + "toast-height": { + "prop": "--spectrum-toast-height", "desktop": { - "value": "16px" + "value": "52px" }, "mobile": { - "value": "20px" + "value": "60px" } }, - "thumbnail-size-500": { - "prop": "--spectrum-thumbnail-size-500", + "toast-maximum-width": { + "prop": "--spectrum-toast-maximum-width", "desktop": { - "value": "32px" + "value": "336px" }, "mobile": { - "value": "40px" + "value": "420px" } }, - "thumbnail-size-600": { - "prop": "--spectrum-thumbnail-size-600", + "toast-top-to-text": { + "prop": "--spectrum-toast-top-to-text", "desktop": { - "value": "36px" + "value": "18px" }, "mobile": { - "value": "46px" + "value": "20px" } }, - "thumbnail-size-700": { - "prop": "--spectrum-thumbnail-size-700", + "toast-top-to-workflow-icon": { + "prop": "--spectrum-toast-top-to-workflow-icon", "desktop": { - "value": "40px" + "value": "18px" }, "mobile": { - "value": "50px" + "value": "20px" } }, - "thumbnail-size-75": { - "prop": "--spectrum-thumbnail-size-75", + "tooltip-maximum-width": { + "prop": "--spectrum-tooltip-maximum-width", "desktop": { - "value": "18px" + "value": "160px" }, "mobile": { - "value": "22px" + "value": "200px" } }, - "thumbnail-size-800": { - "prop": "--spectrum-thumbnail-size-800", + "tooltip-tip-corner-radius": { + "prop": "--spectrum-tooltip-tip-corner-radius", + "value": "1px" + }, + "tooltip-tip-height": { + "prop": "--spectrum-tooltip-tip-height", "desktop": { - "value": "44px" + "value": "5px" }, "mobile": { - "value": "55px" + "value": "6px" } }, - "thumbnail-size-900": { - "prop": "--spectrum-thumbnail-size-900", + "tooltip-tip-width": { + "prop": "--spectrum-tooltip-tip-width", "desktop": { - "value": "50px" + "value": "10px" }, "mobile": { - "value": "62px" + "value": "12px" } }, - "title-color": { - "prop": "--spectrum-title-color", - "ref": "var(--spectrum-gray-900)", + "track-color": { + "prop": "--spectrum-track-color", + "ref": "var(--spectrum-gray-300)", "light": { - "value": "rgb(19, 19, 19)" + "value": "rgb(218, 218, 218)" }, "dark": { - "value": "rgb(242, 242, 242)" + "value": "rgb(57, 57, 57)" } }, - "toast-bottom-to-text": { - "prop": "--spectrum-toast-bottom-to-text", + "transparent-black-100": { + "prop": "--spectrum-transparent-black-100", + "value": "rgba(0, 0, 0, 0.09)" + }, + "transparent-black-1000": { + "prop": "--spectrum-transparent-black-1000", + "value": "rgb(0, 0, 0)" + }, + "transparent-black-200": { + "prop": "--spectrum-transparent-black-200", + "value": "rgba(0, 0, 0, 0.12)" + }, + "transparent-black-25": { + "prop": "--spectrum-transparent-black-25", + "value": "rgba(0, 0, 0, 0)" + }, + "transparent-black-300": { + "prop": "--spectrum-transparent-black-300", + "value": "rgba(0, 0, 0, 0.15)" + }, + "transparent-black-400": { + "prop": "--spectrum-transparent-black-400", + "value": "rgba(0, 0, 0, 0.22)" + }, + "transparent-black-50": { + "prop": "--spectrum-transparent-black-50", + "value": "rgba(0, 0, 0, 0.03)" + }, + "transparent-black-500": { + "prop": "--spectrum-transparent-black-500", + "value": "rgba(0, 0, 0, 0.44)" + }, + "transparent-black-600": { + "prop": "--spectrum-transparent-black-600", + "value": "rgba(0, 0, 0, 0.56)" + }, + "transparent-black-700": { + "prop": "--spectrum-transparent-black-700", + "value": "rgba(0, 0, 0, 0.69)" + }, + "transparent-black-75": { + "prop": "--spectrum-transparent-black-75", + "value": "rgba(0, 0, 0, 0.05)" + }, + "transparent-black-800": { + "prop": "--spectrum-transparent-black-800", + "value": "rgba(0, 0, 0, 0.84)" + }, + "transparent-black-900": { + "prop": "--spectrum-transparent-black-900", + "value": "rgba(0, 0, 0, 0.93)" + }, + "transparent-white-100": { + "prop": "--spectrum-transparent-white-100", + "value": "rgba(255, 255, 255, 0.11)" + }, + "transparent-white-1000": { + "prop": "--spectrum-transparent-white-1000", + "value": "rgb(255, 255, 255)" + }, + "transparent-white-200": { + "prop": "--spectrum-transparent-white-200", + "value": "rgba(255, 255, 255, 0.14)" + }, + "transparent-white-25": { + "prop": "--spectrum-transparent-white-25", + "value": "rgba(255, 255, 255, 0)" + }, + "transparent-white-300": { + "prop": "--spectrum-transparent-white-300", + "value": "rgba(255, 255, 255, 0.17)" + }, + "transparent-white-400": { + "prop": "--spectrum-transparent-white-400", + "value": "rgba(255, 255, 255, 0.21)" + }, + "transparent-white-50": { + "prop": "--spectrum-transparent-white-50", + "value": "rgba(255, 255, 255, 0.04)" + }, + "transparent-white-500": { + "prop": "--spectrum-transparent-white-500", + "value": "rgba(255, 255, 255, 0.39)" + }, + "transparent-white-600": { + "prop": "--spectrum-transparent-white-600", + "value": "rgba(255, 255, 255, 0.51)" + }, + "transparent-white-700": { + "prop": "--spectrum-transparent-white-700", + "value": "rgba(255, 255, 255, 0.66)" + }, + "transparent-white-75": { + "prop": "--spectrum-transparent-white-75", + "value": "rgba(255, 255, 255, 0.07)" + }, + "transparent-white-800": { + "prop": "--spectrum-transparent-white-800", + "value": "rgba(255, 255, 255, 0.85)" + }, + "transparent-white-900": { + "prop": "--spectrum-transparent-white-900", + "value": "rgba(255, 255, 255, 0.94)" + }, + "tray-top-to-content-area": { + "prop": "--spectrum-tray-top-to-content-area", "desktop": { - "value": "17px" + "value": "4px" }, "mobile": { - "value": "19px" + "value": "5px" } }, - "toast-height": { - "prop": "--spectrum-toast-height", + "tree-view-bottom-to-label": { + "prop": "--spectrum-tree-view-bottom-to-label", "desktop": { - "value": "48px" + "value": "12px" }, "mobile": { - "value": "56px" + "value": "16px" } }, - "toast-maximum-width": { - "prop": "--spectrum-toast-maximum-width", + "tree-view-disclosure-indicator-height": { + "prop": "--spectrum-tree-view-disclosure-indicator-height", "desktop": { - "value": "336px" + "value": "32px" }, "mobile": { - "value": "420px" + "value": "40px" } }, - "toast-top-to-text": { - "prop": "--spectrum-toast-top-to-text", + "tree-view-disclosure-indicator-width": { + "prop": "--spectrum-tree-view-disclosure-indicator-width", "desktop": { - "value": "14px" + "value": "34px" }, "mobile": { - "value": "16px" + "value": "42px" } }, - "toast-top-to-workflow-icon": { - "prop": "--spectrum-toast-top-to-workflow-icon", + "tree-view-drag-handle-to-checkbox": { + "prop": "--spectrum-tree-view-drag-handle-to-checkbox", "desktop": { - "value": "15px" + "value": "8px" }, "mobile": { - "value": "17px" + "value": "10px" } }, - "tooltip-maximum-width": { - "prop": "--spectrum-tooltip-maximum-width", + "tree-view-edge-to-checkbox": { + "prop": "--spectrum-tree-view-edge-to-checkbox", "desktop": { - "value": "160px" + "value": "12px" }, "mobile": { - "value": "200px" + "value": "15px" } }, - "tooltip-tip-height": { - "prop": "--spectrum-tooltip-tip-height", + "tree-view-edge-to-drag-handle": { + "prop": "--spectrum-tree-view-edge-to-drag-handle", "desktop": { "value": "4px" }, @@ -12168,261 +15864,172 @@ "value": "5px" } }, - "tooltip-tip-width": { - "prop": "--spectrum-tooltip-tip-width", + "tree-view-end-edge-to-action-area": { + "prop": "--spectrum-tree-view-end-edge-to-action-area", "desktop": { - "value": "8px" + "value": "6px" }, "mobile": { - "value": "10px" - } - }, - "track-color": { - "prop": "--spectrum-track-color", - "ref": "var(--spectrum-gray-300)", - "light": { - "value": "rgb(218, 218, 218)" - }, - "dark": { - "value": "rgb(57, 57, 57)" - } - }, - "transparent-black-100": { - "prop": "--spectrum-transparent-black-100", - "light": { - "value": "rgba(0, 0, 0, 0.09)" - }, - "dark": { - "value": "rgba(0, 0, 0, 0.09)" - } - }, - "transparent-black-1000": { - "prop": "--spectrum-transparent-black-1000", - "value": "rgb(0, 0, 0)" - }, - "transparent-black-200": { - "prop": "--spectrum-transparent-black-200", - "light": { - "value": "rgba(0, 0, 0, 0.12)" - }, - "dark": { - "value": "rgba(0, 0, 0, 0.12)" - } - }, - "transparent-black-25": { - "prop": "--spectrum-transparent-black-25", - "light": { - "value": "rgba(0, 0, 0, 0)" - }, - "dark": { - "value": "rgba(0, 0, 0, 0)" - } - }, - "transparent-black-300": { - "prop": "--spectrum-transparent-black-300", - "light": { - "value": "rgba(0, 0, 0, 0.15)" - }, - "dark": { - "value": "rgba(0, 0, 0, 0.15)" - } - }, - "transparent-black-400": { - "prop": "--spectrum-transparent-black-400", - "light": { - "value": "rgba(0, 0, 0, 0.22)" - }, - "dark": { - "value": "rgba(0, 0, 0, 0.22)" - } - }, - "transparent-black-50": { - "prop": "--spectrum-transparent-black-50", - "light": { - "value": "rgba(0, 0, 0, 0.03)" - }, - "dark": { - "value": "rgba(0, 0, 0, 0.03)" + "value": "7px" } }, - "transparent-black-500": { - "prop": "--spectrum-transparent-black-500", - "light": { - "value": "rgba(0, 0, 0, 0.44)" - }, - "dark": { - "value": "rgba(0, 0, 0, 0.44)" - } + "tree-view-header-to-item": { + "prop": "--spectrum-tree-view-header-to-item", + "value": "-1px" }, - "transparent-black-600": { - "prop": "--spectrum-transparent-black-600", - "light": { - "value": "rgba(0, 0, 0, 0.56)" + "tree-view-item-to-header": { + "prop": "--spectrum-tree-view-item-to-header", + "desktop": { + "value": "24px" }, - "dark": { - "value": "rgba(0, 0, 0, 0.56)" + "mobile": { + "value": "30px" } }, - "transparent-black-700": { - "prop": "--spectrum-transparent-black-700", - "light": { - "value": "rgba(0, 0, 0, 0.69)" - }, - "dark": { - "value": "rgba(0, 0, 0, 0.69)" - } + "tree-view-item-to-item": { + "prop": "--spectrum-tree-view-item-to-item", + "value": "-1px" }, - "transparent-black-75": { - "prop": "--spectrum-transparent-black-75", - "light": { - "value": "rgba(0, 0, 0, 0.05)" - }, - "dark": { - "value": "rgba(0, 0, 0, 0.05)" - } + "tree-view-item-to-item-detached": { + "prop": "--spectrum-tree-view-item-to-item-detached", + "value": "2px" }, - "transparent-black-800": { - "prop": "--spectrum-transparent-black-800", - "light": { - "value": "rgba(0, 0, 0, 0.84)" + "tree-view-label-to-action-area": { + "prop": "--spectrum-tree-view-label-to-action-area", + "desktop": { + "value": "6px" }, - "dark": { - "value": "rgba(0, 0, 0, 0.84)" + "mobile": { + "value": "8px" } }, - "transparent-black-900": { - "prop": "--spectrum-transparent-black-900", - "light": { - "value": "rgba(0, 0, 0, 0.93)" + "tree-view-level-increment": { + "prop": "--spectrum-tree-view-level-increment", + "desktop": { + "value": "16px" }, - "dark": { - "value": "rgba(0, 0, 0, 0.93)" + "mobile": { + "value": "20px" } }, - "transparent-white-100": { - "prop": "--spectrum-transparent-white-100", - "light": { - "value": "rgba(255, 255, 255, 0.11)" + "tree-view-minimum-height": { + "prop": "--spectrum-tree-view-minimum-height", + "desktop": { + "value": "40px" }, - "dark": { - "value": "rgba(255, 255, 255, 0.11)" + "mobile": { + "value": "50px" } }, - "transparent-white-1000": { - "prop": "--spectrum-transparent-white-1000", - "light": { - "value": "rgb(255, 255, 255)" + "tree-view-minimum-top-to-context-area": { + "prop": "--spectrum-tree-view-minimum-top-to-context-area", + "desktop": { + "value": "8px" }, - "dark": { - "value": "rgb(255, 255, 255)" + "mobile": { + "value": "10px" } }, - "transparent-white-200": { - "prop": "--spectrum-transparent-white-200", - "light": { - "value": "rgba(255, 255, 255, 0.14)" + "tree-view-minimum-width": { + "prop": "--spectrum-tree-view-minimum-width", + "desktop": { + "value": "160px" }, - "dark": { - "value": "rgba(255, 255, 255, 0.14)" + "mobile": { + "value": "200px" } }, - "transparent-white-25": { - "prop": "--spectrum-transparent-white-25", + "tree-view-row-background-hover": { + "prop": "--spectrum-tree-view-row-background-hover", + "ref": "var(--spectrum-gray-100)", "light": { - "value": "rgba(255, 255, 255, 0)" + "value": "rgb(233, 233, 233)" }, "dark": { - "value": "rgba(255, 255, 255, 0)" + "value": "rgb(44, 44, 44)" } }, - "transparent-white-300": { - "prop": "--spectrum-transparent-white-300", + "tree-view-selected-row-background-color-emphasized": { + "prop": "--spectrum-tree-view-selected-row-background-color-emphasized", + "ref": "var(--spectrum-informative-color-800)", "light": { - "value": "rgba(255, 255, 255, 0.17)" + "value": "rgb(59, 99, 251)" }, "dark": { - "value": "rgba(255, 255, 255, 0.17)" + "value": "rgb(64, 105, 253)" } }, - "transparent-white-400": { - "prop": "--spectrum-transparent-white-400", + "tree-view-selected-row-background-default": { + "prop": "--spectrum-tree-view-selected-row-background-default", + "ref": "var(--spectrum-gray-100)", "light": { - "value": "rgba(255, 255, 255, 0.21)" + "value": "rgb(233, 233, 233)" }, "dark": { - "value": "rgba(255, 255, 255, 0.21)" + "value": "rgb(44, 44, 44)" } }, - "transparent-white-50": { - "prop": "--spectrum-transparent-white-50", + "tree-view-selected-row-background-hover": { + "prop": "--spectrum-tree-view-selected-row-background-hover", + "ref": "var(--spectrum-gray-100)", "light": { - "value": "rgba(255, 255, 255, 0.04)" + "value": "rgb(233, 233, 233)" }, "dark": { - "value": "rgba(255, 255, 255, 0.04)" + "value": "rgb(44, 44, 44)" } }, - "transparent-white-500": { - "prop": "--spectrum-transparent-white-500", - "light": { - "value": "rgba(255, 255, 255, 0.39)" - }, - "dark": { - "value": "rgba(255, 255, 255, 0.39)" - } + "tree-view-selected-row-background-opacity-emphasized": { + "prop": "--spectrum-tree-view-selected-row-background-opacity-emphasized", + "value": "0.1" }, - "transparent-white-600": { - "prop": "--spectrum-transparent-white-600", - "light": { - "value": "rgba(255, 255, 255, 0.51)" - }, - "dark": { - "value": "rgba(255, 255, 255, 0.51)" - } + "tree-view-selected-row-background-opacity-emphasized-hover": { + "prop": "--spectrum-tree-view-selected-row-background-opacity-emphasized-hover", + "value": "0.15" }, - "transparent-white-700": { - "prop": "--spectrum-transparent-white-700", - "light": { - "value": "rgba(255, 255, 255, 0.66)" + "tree-view-top-to-action-button": { + "prop": "--spectrum-tree-view-top-to-action-button", + "desktop": { + "value": "4px" }, - "dark": { - "value": "rgba(255, 255, 255, 0.66)" + "mobile": { + "value": "5px" } }, - "transparent-white-75": { - "prop": "--spectrum-transparent-white-75", - "light": { - "value": "rgba(255, 255, 255, 0.07)" + "tree-view-top-to-checkbox": { + "prop": "--spectrum-tree-view-top-to-checkbox", + "desktop": { + "value": "4px" }, - "dark": { - "value": "rgba(255, 255, 255, 0.07)" + "mobile": { + "value": "5px" } }, - "transparent-white-800": { - "prop": "--spectrum-transparent-white-800", - "light": { - "value": "rgba(255, 255, 255, 0.85)" + "tree-view-top-to-disclosure-indicator": { + "prop": "--spectrum-tree-view-top-to-disclosure-indicator", + "desktop": { + "value": "15px" }, - "dark": { - "value": "rgba(255, 255, 255, 0.85)" + "mobile": { + "value": "19px" } }, - "transparent-white-900": { - "prop": "--spectrum-transparent-white-900", - "light": { - "value": "rgba(255, 255, 255, 0.94)" + "tree-view-top-to-drag-handle": { + "prop": "--spectrum-tree-view-top-to-drag-handle", + "desktop": { + "value": "15px" }, - "dark": { - "value": "rgba(255, 255, 255, 0.94)" + "mobile": { + "value": "19px" } }, - "tray-top-to-content-area": { - "prop": "--spectrum-tray-top-to-content-area", + "tree-view-top-to-label": { + "prop": "--spectrum-tree-view-top-to-label", "desktop": { - "value": "4px" + "value": "10px" }, "mobile": { - "value": "5px" + "value": "13px" } }, "turquoise-100": { @@ -12601,12 +16208,12 @@ }, "white": { "prop": "--spectrum-white", - "light": { - "value": "rgb(255, 255, 255)" - }, - "dark": { - "value": "rgb(255, 255, 255)" - } + "value": "rgb(255, 255, 255)" + }, + "window-to-edge": { + "prop": "--spectrum-window-to-edge", + "ref": "var(--spectrum-spacing-600)", + "value": "40px" }, "workflow-icon-size-100": { "prop": "--spectrum-workflow-icon-size-100", diff --git a/tokens/package.json b/tokens/package.json index c8acd2c875b..ee3f0849235 100644 --- a/tokens/package.json +++ b/tokens/package.json @@ -27,7 +27,7 @@ "package.json" ], "devDependencies": { - "@adobe/spectrum-tokens": "0.0.0-s2-foundations-20241121221506", + "@adobe/spectrum-tokens": "13.0.0-beta.57", "@adobe/token-diff-generator": "^1.3.0", "@nxkit/style-dictionary": "^6.0.0", "@spectrum-tools/postcss-rgb-mapping": "1.1.0", diff --git a/tokens/postcss.config.js b/tokens/postcss.config.js index e117b38812b..dff6ce1fea5 100644 --- a/tokens/postcss.config.js +++ b/tokens/postcss.config.js @@ -11,15 +11,9 @@ * governing permissions and limitations under the License. */ -module.exports = ({ - resolveImports = true, - ...options -}) => require("../postcss.config.js")({ - ...options, - resolveImports, - env: "production", - map: false, - additionalPlugins: { +module.exports = () => ({ + plugins: { + "postcss-import": {}, "@spectrum-tools/postcss-rgb-mapping": { colorFunctionalNotation: false, }, @@ -27,5 +21,20 @@ module.exports = ({ 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 0e9ead556bc..92061b809b0 100644 --- a/tokens/project.json +++ b/tokens/project.json @@ -3,8 +3,7 @@ "tag": ["tokens"], "namedInputs": { "core": [ - "{projectRoot}/custom-express/*.css", - "{projectRoot}/custom-spectrum/*.css" + "{projectRoot}/custom/*.css" ], "scripts": ["{projectRoot}/style-dictionary.config.js", "{projectRoot}/utilities/*.js"], "tools": ["{projectRoot}/postcss.config.js", "{projectRoot}/tasks/token-rollup.js"] @@ -71,15 +70,8 @@ "{projectRoot}/dist/css/global-vars.css", "{projectRoot}/dist/css/light-vars.css", "{projectRoot}/dist/css/dark-vars.css", - "{projectRoot}/dist/css/darkest-vars.css", "{projectRoot}/dist/css/medium-vars.css", - "{projectRoot}/dist/css/large-vars.css", - "{projectRoot}/dist/css/spectrum/global-vars.css", - "{projectRoot}/dist/css/spectrum/medium-vars.css", - "{projectRoot}/dist/css/spectrum/large-vars.css", - "{projectRoot}/dist/css/express/global-vars.css", - "{projectRoot}/dist/css/express/medium-vars.css", - "{projectRoot}/dist/css/express/large-vars.css" + "{projectRoot}/dist/css/large-vars.css" ] } } diff --git a/tokens/style-dictionary.config.js b/tokens/style-dictionary.config.js index 8f47346d1f7..a02485db3d7 100644 --- a/tokens/style-dictionary.config.js +++ b/tokens/style-dictionary.config.js @@ -11,23 +11,22 @@ * governing permissions and limitations under the License. */ -const path = require("path"); - -const generateFileConfig = require("./utilities/style-dictionary.utils.js"); +const path = require("node:path"); const StyleDictionary = require("style-dictionary"); + const CSSSetsFormatter = require("style-dictionary-sets").CSSSetsFormatter; -const JsonSetsFormatter = require("./utilities/data-json-formatter.js"); const NameKebabTransfom = require("style-dictionary-sets").NameKebabTransfom; -const AttributeSetsTransform = - require("style-dictionary-sets").AttributeSetsTransform; -const CSSOpenTypeTransform = - require("style-dictionary-sets").CSSOpenTypeTransform; +const AttributeSetsTransform = require("style-dictionary-sets").AttributeSetsTransform; +const CSSOpenTypeTransform = require("style-dictionary-sets").CSSOpenTypeTransform; StyleDictionary.registerTransform(CSSOpenTypeTransform); StyleDictionary.registerTransform(NameKebabTransfom); StyleDictionary.registerTransform(AttributeSetsTransform); StyleDictionary.registerFormat(CSSSetsFormatter); + +const JsonSetsFormatter = require("./utilities/data-json-formatter.js"); + StyleDictionary.registerFormat(JsonSetsFormatter); /** @@ -49,12 +48,89 @@ module.exports = { CSSOpenTypeTransform.name, ], prefix: "spectrum", - files: [ - generateFileConfig(), - ...["desktop", "mobile", "light", "dark"].map((context) => - generateFileConfig({ setName: context }), - ), - ], + files: [{ + format: "css/sets", + options: { + showFileHeader: false, + outputReferences: true, + selector: ".spectrum" + }, + destination: "global-vars.css", + filter: (token) => { + // Fetch the sets for this token + const tokenSets = token.path.filter((_, idx, array) => array[idx - 1] == "sets"); + 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) => { + // 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("desktop")) return false; + if (tokenSets.length === 1) return true; + }, + }, { + 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; + }, + }, { + format: "css/sets", + options: { + showFileHeader: false, + outputReferences: true, + selector: ".spectrum--light", + sets: [ "light" ] + }, + destination: "light-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("light")) return false; + if (tokenSets.length === 1) return true; + }, + }, { + format: "css/sets", + options: { + showFileHeader: false, + outputReferences: true, + selector: ".spectrum--dark", + sets: [ "dark" ] + }, + destination: "dark-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("light")) return false; + if (tokenSets.length === 1) return true; + }, + }], }, JSON: { buildPath: "dist/json/", @@ -71,9 +147,7 @@ module.exports = { filter: (token) => { // Fetch the sets for this token const sets = token.path.filter((_, idx, array) => array[idx - 1] == "sets"); - if (sets.includes("wireframe")) return false; - return true; }, options: { diff --git a/tokens/tasks/token-rollup.js b/tokens/tasks/token-rollup.js index 39f907f7ee1..551f2001c88 100644 --- a/tokens/tasks/token-rollup.js +++ b/tokens/tasks/token-rollup.js @@ -115,52 +115,44 @@ async function main({ const compiledOutputPath = path.join(cwd, "dist"); - // Ensure the dist directory exists - if (!fs.existsSync(compiledOutputPath)) { - fs.mkdirSync(compiledOutputPath); + const reports = []; + const errors = []; + + // Wait for all the custom files to be processed + await appendCustomOverrides({ cwd }).then((report) => { reports.push(report); }).catch((err) => { errors.push(err); }); + + // Then build the index.css file + await index(["dist/css/*-vars.css"], path.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); + }); } - // Read in the package version from the package.json file - const packageJson = await fsp.readFile(path.join(cwd, "package.json"), "utf-8").then(JSON.parse); + console.log(`${"".padStart(30, "-")}`); + console.timeEnd(key); + console.log(""); - // Wait for all the custom files to be processed - return appendCustomOverrides({ packageJson, cwd }).then(async (r) => - Promise.all([ - index( - ["dist/css/*-vars.css"], - path.join(compiledOutputPath, "css", "index.css"), - { cwd, clean, packageJson } - ) - ]).then((reports) => { - const logs = [reports, r].flat(Infinity).filter(Boolean); - - console.log(`\n\n${key} 🔨`); - console.log(`${"".padStart(30, "-")}`); - - 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); - - console.log(`${"".padStart(30, "-")}`); - console.timeEnd(key); - console.log(""); - }).catch((err) => { - console.log(`\n\n${key} 🔨`); - console.log(`${"".padStart(30, "-")}`); - - console.trace(err); - - console.log(`${"".padStart(30, "-")}`); - console.timeEnd(key); - console.log(""); - - process.exit(1); - }) - ); + if (errorLogs && errorLogs.length > 0) { + process.exit(1); + } } exports.default = main; diff --git a/tokens/utilities/style-dictionary.utils.js b/tokens/utilities/style-dictionary.utils.js deleted file mode 100644 index 57b9b37d384..00000000000 --- a/tokens/utilities/style-dictionary.utils.js +++ /dev/null @@ -1,89 +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 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. - */ - -module.exports = function ({ setName, format = "css" } = {}) { - let selector = ".spectrum"; - - const baseConfig = { - format: `${format}/sets`, - options: { - showFileHeader: false, - outputReferences: true, - }, - }; - - if (!setName) { - return { - ...baseConfig, - destination: `global-vars.${format}`, - filter: (token) => { - if (token.name.startsWith("spectrum-android")) { - return false; - } - - return !token.path.includes("sets"); - }, - options: { - ...baseConfig.options, - selector, - }, - }; - } - - const isGlobal = !setName; - - let scope = - { - desktop: "medium", - mobile: "large", - }[setName] ?? setName; - - if (isGlobal) scope = "global"; - selector = isGlobal ? ".spectrum" : `.spectrum--${scope}`; - - const getSets = (token) => - token.path.filter((_, idx, array) => array[idx - 1] == "sets"); - - function filter(token) { - // Fetch the sets for this token - const tokenSets = getSets(token); - - if (tokenSets.includes("wireframe")) return false; - - if (!setName) { - if (tokenSets.length === 0) { - return true; - } - } - else { - if (!tokenSets.includes(setName)) return false; - - if (tokenSets.length === 1) { - return true; - } - } - - return false; - } - - return { - ...baseConfig, - destination: `${scope}-vars.${format}`, - filter, - options: { - ...baseConfig.options, - selector, - sets: setName ? [setName] : [], - }, - }; -}; diff --git a/tools/generator/package.json b/tools/generator/package.json index 91f18d8eea8..6dc958d7c9a 100644 --- a/tools/generator/package.json +++ b/tools/generator/package.json @@ -25,7 +25,7 @@ }, "devDependencies": { "fuzzy": "^0.1.3", - "inquirer": "^9.2.23", + "inquirer": "^9.3.7", "inquirer-autocomplete-prompt": "^3.0.1", "plop": "^4.0.1" }, diff --git a/tools/generator/templates/index.css.hbs b/tools/generator/templates/index.css.hbs index 2219223a2b1..e664ce4eeb4 100644 --- a/tools/generator/templates/index.css.hbs +++ b/tools/generator/templates/index.css.hbs @@ -12,18 +12,16 @@ */ .spectrum-{{ pascalCase name }} { - // color: var(--highcontrast-{{ folderName }}-content-color-default, var(--mod-{{ folderName }}-content-color-default, var(--spectrum-{{ folderName }}-content-color-default))); - - &.spectrum-{{ pascalCase name }}--sizeS {} - &, - &.spectrum-{{ pascalCase name }}--sizeM {} - &.spectrum-{{ pascalCase name }}--sizeL {} - &.spectrum-{{ pascalCase name }}--sizeXL {} + // color: var(--highcontrast-{{ folderName }}-content-color, var(--mod-{{ folderName }}-content-color, var(--spectrum-{{ folderName }}-content-color))); } +.spectrum-{{ pascalCase name }}--sizeS {} +.spectrum-{{ pascalCase name }}--sizeL {} +.spectrum-{{ pascalCase name }}--sizeXL {} + @media (forced-colors: active) { .spectrum-{{ pascalCase name }} { - --highcontrast-{{ folderName }}-content-color-default: CanvasText; + --highcontrast-{{ folderName }}-content-color: CanvasText; forced-color-adjust: none; } diff --git a/tools/generator/templates/package.json.hbs b/tools/generator/templates/package.json.hbs index 4ae644481fd..e9bdba4af66 100644 --- a/tools/generator/templates/package.json.hbs +++ b/tools/generator/templates/package.json.hbs @@ -13,24 +13,41 @@ "bugs": { "url": "https://github.com/adobe/spectrum-css/issues" }, + "exports": { + ".": "./dist/index.css", + "./*.md": "./*.md", + "./dist/*": "./dist/*", + "./index.css": "./dist/index.css", + "./metadata.json": "./dist/metadata.json", + "./package.json": "./package.json" + }, "main": "dist/index.css", "files": [ "dist/*", - "CHANGELOG.md", + "*.md", "package.json", - "stories/template.js", - "metadata/mods.md" + "stories/*", + "metadata/*" ], + "peerDependencies": { + "{{ tokens.name }}": ">={{ parse tokens.version '.' 0 1 }}" + }, + "devDependencies": { + "@spectrum-css/tokens": "workspace:^" + }, "keywords": [ "spectrum", "css", "design system", "adobe" ], - "peerDependencies": { - "{{ tokens.name }}": ">={{ parse tokens.version '.' 0 1 }}" - }, "publishConfig": { "access": "public" - } + }, + "spectrum": [ + { + "rootClass": "spectrum-{{ pascalCase name }}", + "swc": "https://opensource.adobe.com/spectrum-web-components/components/{{ folderName }}/" + } + ] } diff --git a/tools/generator/templates/stories/template.js.hbs b/tools/generator/templates/stories/template.js.hbs index af1047abb64..394ccd11658 100644 --- a/tools/generator/templates/stories/template.js.hbs +++ b/tools/generator/templates/stories/template.js.hbs @@ -7,8 +7,6 @@ import { styleMap } from "lit/directives/style-map.js"; import { when } from "lit/directives/when.js"; import "../index.css"; -import "../themes/express.css"; -import "../themes/spectrum.css"; export const Template = ({ rootClass = "spectrum-{{ pascalCase name }}", diff --git a/ui-icons/CHANGELOG.md b/ui-icons/CHANGELOG.md index d47e30f5640..171a627d102 100644 --- a/ui-icons/CHANGELOG.md +++ b/ui-icons/CHANGELOG.md @@ -2,7 +2,7 @@ ## 1.1.2 -🗓 2024-02-06 +🗓 2024-02-06 • 📝 [Commits](https://github.com/adobe/spectrum-css/compare/@spectrum-css/ui-icons@1.1.1...@spectrum-css/ui-icons@1.1.1) **Note:** Version bump only for package @spectrum-css/ui-icons diff --git a/ui-icons/index.js b/ui-icons/index.js index 884926f2215..b055b43463c 100644 --- a/ui-icons/index.js +++ b/ui-icons/index.js @@ -1,118 +1,118 @@ -const fs = require('fs'); +const fs = require("fs"); const fsp = fs.promises; -const path = require('path'); +const path = require("path"); -const fg = require('fast-glob'); -const { optimize } = require('svgo'); -const combine = require('svgcombiner'); -const svgstore = require('svgstore'); +const fg = require("fast-glob"); +const { optimize } = require("svgo"); +const combine = require("svgcombiner"); +const svgstore = require("svgstore"); async function setupIconStores() { - const stores = new Map(); - stores.set('all', svgstore()); - - for (const variant of await fg(['*'], { - cwd: __dirname, - ignore: ['dist', 'node_modules'], - onlyDirectories: true, - })) { - stores.set(variant, svgstore()); - } - - return stores; + const stores = new Map(); + stores.set("all", svgstore()); + + for (const variant of await fg(["*"], { + cwd: __dirname, + ignore: ["dist", "node_modules"], + onlyDirectories: true, + })) { + stores.set(variant, svgstore()); + } + + return stores; } async function main() { - // Not using svgo's loadConfig because it doesn't support dynamic config files - const getSvgoConfig = require('./svgo.config.js'); + // Not using svgo's loadConfig because it doesn't support dynamic config files + const getSvgoConfig = require("./svgo.config.js"); - // Hash to hold all icons arranged by processed name - const icons = new Map(); - const stores = await setupIconStores(); - const variants = [...stores.keys()].filter((key) => key !== 'all'); + // Hash to hold all icons arranged by processed name + const icons = new Map(); + const stores = await setupIconStores(); + const variants = [...stores.keys()].filter((key) => key !== "all"); - const files = await fg([`{${variants.join(',')}}/*.svg`], { - cwd: __dirname, - onlyFiles: true, - }); + const files = await fg([`{${variants.join(",")}}/*.svg`], { + cwd: __dirname, + onlyFiles: true, + }); - const promises = []; - for (const file of files) { - const assetName = path.basename(file, '.svg'); + const promises = []; + for (const file of files) { + const assetName = path.basename(file, ".svg"); - // Capture metadata about the icon from the path and filename - const variant = path.dirname(file); + // Capture metadata about the icon from the path and filename + const variant = path.dirname(file); - // Read in the SVG contents - const contents = await fsp.readFile(file, 'utf-8'); - const result = optimize(contents, getSvgoConfig({ clean: true })); + // Read in the SVG contents + const contents = await fsp.readFile(file, "utf-8"); + const result = optimize(contents, getSvgoConfig({ clean: true })); - icons.set(assetName, { - ...(icons.has(assetName) ? icons.get(assetName) : {}), - [variant]: result.data, - }); + icons.set(assetName, { + ...(icons.has(assetName) ? icons.get(assetName) : {}), + [variant]: result.data, + }); - stores.get(variant).add(assetName, result.data); + stores.get(variant).add(assetName, result.data); - const dest = path.join(__dirname, 'dist', file); - if (!fs.existsSync(path.dirname(dest))) { - fs.mkdirSync(path.dirname(dest), { recursive: true }); - } + const dest = path.join(__dirname, "dist", file); + if (!fs.existsSync(path.dirname(dest))) { + fs.mkdirSync(path.dirname(dest), { recursive: true }); + } - promises.push(fsp.writeFile(dest, result.data)); - } + promises.push(fsp.writeFile(dest, result.data)); + } - // Wait for all the SVG content to be read in and processed before continuing - await Promise.all(promises); + // Wait for all the SVG content to be read in and processed before continuing + await Promise.all(promises); - if (icons.size === 0) return; + if (icons.size === 0) return; - // For each entry in the map, combine the SVG variants into a single SVG file with multiple symbols - promises.length = 0; - [...icons.entries()].map(([iconName, data]) => { - // Combine the SVG variants into a single SVG file with multiple symbols - const contents = combine(iconName, data); + // For each entry in the map, combine the SVG variants into a single SVG file with multiple symbols + promises.length = 0; + [...icons.entries()].map(([iconName, data]) => { + // Combine the SVG variants into a single SVG file with multiple symbols + const contents = combine(iconName, data); - // Add the combined SVG to the "all" store so we can generate a single SVG file with all icons - stores.get('all').add(iconName, contents); + // Add the combined SVG to the "all" store so we can generate a single SVG file with all icons + stores.get("all").add(iconName, contents); - // Write the combined SVG to the dist folder - const destPath = path.join(__dirname, 'dist/combined'); - if (!fs.existsSync(destPath)) fs.mkdirSync(destPath, { recursive: true }); + // Write the combined SVG to the dist folder + const destPath = path.join(__dirname, "dist/combined"); + if (!fs.existsSync(destPath)) fs.mkdirSync(destPath, { recursive: true }); - promises.push(fsp.writeFile(path.join(destPath, `${iconName}.svg`), optimize(contents, getSvgoConfig())?.data)); - }); + promises.push(fsp.writeFile(path.join(destPath, `${iconName}.svg`), optimize(contents, getSvgoConfig())?.data)); + }); - // Finally, we write out the stores to disk - for (const [identifier, store] of stores.entries()) { - const isFullSet = identifier === 'all'; - const filename = isFullSet ? 'spectrum-css-icons' : `spectrum-css-icons-${identifier}`; - const dest = path.join(__dirname, `dist/${filename}.svg`); - const config = getSvgoConfig( - isFullSet - ? { - idPrefix: 'spectrum-css-icon', - removeViewBox: true, - } - : {}, - ); + // Finally, we write out the stores to disk + for (const [identifier, store] of stores.entries()) { + const isFullSet = identifier === "all"; + const filename = isFullSet ? "spectrum-css-icons" : `spectrum-css-icons-${identifier}`; + const dest = path.join(__dirname, `dist/${filename}.svg`); + const config = getSvgoConfig( + isFullSet + ? { + idPrefix: "spectrum-css-icon", + removeViewBox: true, + } + : {}, + ); - const result = optimize(store.toString(), config); + const result = optimize(store.toString(), config); - if (!result?.data) continue; + if (!result?.data) continue; - promises.push(fsp.writeFile(dest, result?.data)); - } + promises.push(fsp.writeFile(dest, result?.data)); + } - return Promise.all(promises); + return Promise.all(promises); } main() - .then(() => { - console.log('✔ Icons generated successfully.'); - process.exit(0); - }) - .catch((e) => { - console.error(e); - process.exit(1); - }); + .then(() => { + console.log("✔ Icons generated successfully."); + process.exit(0); + }) + .catch((e) => { + console.error(e); + process.exit(1); + }); diff --git a/yarn.lock b/yarn.lock index d28c636c4cc..0c6980fe6d8 100644 --- a/yarn.lock +++ b/yarn.lock @@ -5,9 +5,9 @@ __metadata: version: 8 cacheKey: 10c0 -"@actions/artifact@npm:^2.2.1": - version: 2.2.1 - resolution: "@actions/artifact@npm:2.2.1" +"@actions/artifact@npm:^2.3.1": + version: 2.3.1 + resolution: "@actions/artifact@npm:2.3.1" dependencies: "@actions/core": "npm:^1.10.0" "@actions/github": "npm:^5.1.1" @@ -20,9 +20,8 @@ __metadata: "@protobuf-ts/plugin": "npm:^2.2.3-alpha.1" archiver: "npm:^7.0.1" jwt-decode: "npm:^3.1.2" - twirp-ts: "npm:^2.5.0" unzip-stream: "npm:^0.3.1" - checksum: 10c0/ed4689b9df2f362e7fead772953f1b13bf348104174482123d7ab247fc4a5bd39fc21d093155789203755a06415811e6705110b6dc0aa4209006ae9bb1aef3d9 + checksum: 10c0/e1ff127a1e36519b0082d0fce47458d3f35d7c1c84b454f04e7a60c0865fbc4d1e2344adf8ce928f8a83e60dc0514c9f9ecd80b81024f72f506ab51791d53891 languageName: node linkType: hard @@ -118,16 +117,14 @@ __metadata: resolution: "@adobe/spectrum-css-monorepo@workspace:." dependencies: "@adobe/token-diff-generator": "npm:^1.3.0" - "@changesets/changelog-github": "npm:^0.5.0" - "@changesets/cli": "npm:^2.27.11" - "@commitlint/cli": "npm:^19.6.1" - "@commitlint/config-conventional": "npm:^19.6.0" + "@changesets/changelog-github": "npm:^0.5.1" + "@changesets/cli": "npm:^2.28.1" + "@commitlint/cli": "npm:^19.8.0" + "@commitlint/config-conventional": "npm:^19.8.0" "@csstools/postcss-bundler": "npm:^2.0.6" - "@nx/devkit": "npm:^19.8.2" - "@spectrum-tools/postcss-add-theming-layer": "npm:1.0.2" - "@spectrum-tools/postcss-property-rollup": "npm:0.0.1" + "@nx/devkit": "npm:^19.8.14" "@spectrum-tools/postcss-rgb-mapping": "npm:1.1.0" - "@yarnpkg/types": "npm:^4.0.0" + "@yarnpkg/types": "npm:^4.0.1" at-rule-packer: "npm:^0.4.2" autoprefixer: "npm:^10.4.21" colors: "npm:^1.4.0" @@ -136,21 +133,21 @@ __metadata: cssnano-preset-advanced: "npm:^7.0.6" diff: "npm:^7.0.0" diff2html: "npm:^3.4.51" - eslint: "npm:^8.57.0" - eslint-plugin-jsonc: "npm:^2.18.2" - eslint-plugin-prettier: "npm:^5.1.3" + eslint: "npm:^8.57.1" + eslint-plugin-jsonc: "npm:^2.19.1" + eslint-plugin-prettier: "npm:^5.2.3" fast-glob: "npm:^3.3.3" gh-pages: "npm:^6.3.0" husky: "npm:^9.1.7" jsonc-eslint-parser: "npm:^2.4.0" - lint-staged: "npm:^15.3.0" + lint-staged: "npm:^15.4.3" lodash: "npm:^4.17.21" markdownlint: "npm:^0.37.4" markdownlint-cli: "npm:^0.44.0" - node-gyp: "npm:^10.1.0" + node-gyp: "npm:^10.3.1" npm-registry-fetch: "npm:^18.0.2" nunjucks: "npm:^3.2.4" - nx: "npm:^19.8.2" + nx: "npm:^19.8.14" open: "npm:^10.1.0" pajv: "npm:^1.2.0" postcss: "npm:^8.5.3" @@ -170,7 +167,7 @@ __metadata: rimraf: "npm:^6.0.1" semver: "npm:^7.7.1" stylelint: "npm:^16.15.0" - stylelint-config-standard: "npm:^36.0.1" + stylelint-config-standard: "npm:^37.0.0" stylelint-header: "npm:^2.1.0" stylelint-high-performance-animation: "npm:^1.11.0" stylelint-order: "npm:^6.0.4" @@ -189,10 +186,10 @@ __metadata: languageName: node linkType: hard -"@adobe/spectrum-tokens@npm:0.0.0-s2-foundations-20241121221506": - version: 0.0.0-s2-foundations-20241121221506 - resolution: "@adobe/spectrum-tokens@npm:0.0.0-s2-foundations-20241121221506" - checksum: 10c0/64664995ca98170c2a089ecb215103c77bb5a3ff49848371e2dfc301dc3ca30ef4dafae3d44cda82a1609d877e54608cc2e591edef37095ee646c6cf185143ee +"@adobe/spectrum-tokens@npm:13.0.0-beta.57": + version: 13.0.0-beta.57 + resolution: "@adobe/spectrum-tokens@npm:13.0.0-beta.57" + checksum: 10c0/7345001d6f539c40b022f5633aa0697d155a4f668b979ad07e8e5d338f658971eedc9ae30b9285fc273502e6e88d10683603861703b8127c1f71548224905535 languageName: node linkType: hard @@ -416,7 +413,14 @@ __metadata: languageName: node linkType: hard -"@babel/core@npm:^7.11.6, @babel/core@npm:^7.12.3, @babel/core@npm:^7.22.5, @babel/core@npm:^7.23.9, @babel/core@npm:^7.26.0, @babel/core@npm:^7.7.5": +"@babel/compat-data@npm:^7.26.5": + version: 7.26.8 + resolution: "@babel/compat-data@npm:7.26.8" + checksum: 10c0/66408a0388c3457fff1c2f6c3a061278dd7b3d2f0455ea29bb7b187fa52c60ae8b4054b3c0a184e21e45f0eaac63cf390737bc7504d1f4a088a6e7f652c068ca + languageName: node + linkType: hard + +"@babel/core@npm:^7.11.6, @babel/core@npm:^7.12.3, @babel/core@npm:^7.22.5, @babel/core@npm:^7.23.9, @babel/core@npm:^7.7.5": version: 7.26.0 resolution: "@babel/core@npm:7.26.0" dependencies: @@ -439,6 +443,29 @@ __metadata: languageName: node linkType: hard +"@babel/core@npm:^7.26.9": + version: 7.26.9 + resolution: "@babel/core@npm:7.26.9" + dependencies: + "@ampproject/remapping": "npm:^2.2.0" + "@babel/code-frame": "npm:^7.26.2" + "@babel/generator": "npm:^7.26.9" + "@babel/helper-compilation-targets": "npm:^7.26.5" + "@babel/helper-module-transforms": "npm:^7.26.0" + "@babel/helpers": "npm:^7.26.9" + "@babel/parser": "npm:^7.26.9" + "@babel/template": "npm:^7.26.9" + "@babel/traverse": "npm:^7.26.9" + "@babel/types": "npm:^7.26.9" + convert-source-map: "npm:^2.0.0" + debug: "npm:^4.1.0" + gensync: "npm:^1.0.0-beta.2" + json5: "npm:^2.2.3" + semver: "npm:^6.3.1" + checksum: 10c0/ed7212ff42a9453765787019b7d191b167afcacd4bd8fec10b055344ef53fa0cc648c9a80159ae4ecf870016a6318731e087042dcb68d1a2a9d34eb290dc014b + languageName: node + linkType: hard + "@babel/generator@npm:^7.22.5, @babel/generator@npm:^7.7.2": version: 7.26.5 resolution: "@babel/generator@npm:7.26.5" @@ -465,6 +492,19 @@ __metadata: languageName: node linkType: hard +"@babel/generator@npm:^7.26.9": + version: 7.26.9 + resolution: "@babel/generator@npm:7.26.9" + dependencies: + "@babel/parser": "npm:^7.26.9" + "@babel/types": "npm:^7.26.9" + "@jridgewell/gen-mapping": "npm:^0.3.5" + "@jridgewell/trace-mapping": "npm:^0.3.25" + jsesc: "npm:^3.0.2" + checksum: 10c0/6b78872128205224a9a9761b9ea7543a9a7902a04b82fc2f6801ead4de8f59056bab3fd17b1f834ca7b049555fc4c79234b9a6230dd9531a06525306050becad + languageName: node + linkType: hard + "@babel/helper-compilation-targets@npm:^7.25.9": version: 7.25.9 resolution: "@babel/helper-compilation-targets@npm:7.25.9" @@ -478,6 +518,19 @@ __metadata: languageName: node linkType: hard +"@babel/helper-compilation-targets@npm:^7.26.5": + version: 7.26.5 + resolution: "@babel/helper-compilation-targets@npm:7.26.5" + dependencies: + "@babel/compat-data": "npm:^7.26.5" + "@babel/helper-validator-option": "npm:^7.25.9" + browserslist: "npm:^4.24.0" + lru-cache: "npm:^5.1.1" + semver: "npm:^6.3.1" + checksum: 10c0/9da5c77e5722f1a2fcb3e893049a01d414124522bbf51323bb1a0c9dcd326f15279836450fc36f83c9e8a846f3c40e88be032ed939c5a9840922bed6073edfb4 + languageName: node + linkType: hard + "@babel/helper-module-imports@npm:^7.25.9": version: 7.25.9 resolution: "@babel/helper-module-imports@npm:7.25.9" @@ -553,6 +606,16 @@ __metadata: languageName: node linkType: hard +"@babel/helpers@npm:^7.26.9": + version: 7.26.9 + resolution: "@babel/helpers@npm:7.26.9" + dependencies: + "@babel/template": "npm:^7.26.9" + "@babel/types": "npm:^7.26.9" + checksum: 10c0/3d4dbc4a33fe4181ed810cac52318b578294745ceaec07e2f6ecccf6cda55d25e4bfcea8f085f333bf911c9e1fc13320248dd1d5315ab47ad82ce1077410df05 + languageName: node + linkType: hard + "@babel/highlight@npm:^7.24.7": version: 7.24.7 resolution: "@babel/highlight@npm:7.24.7" @@ -794,7 +857,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, @babel/runtime@npm:^7.3.1": version: 7.26.10 resolution: "@babel/runtime@npm:7.26.10" dependencies: @@ -803,6 +866,15 @@ __metadata: 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.25.9, @babel/template@npm:^7.3.3": version: 7.25.9 resolution: "@babel/template@npm:7.25.9" @@ -840,6 +912,21 @@ __metadata: languageName: node linkType: hard +"@babel/traverse@npm:^7.26.9": + version: 7.26.9 + resolution: "@babel/traverse@npm:7.26.9" + dependencies: + "@babel/code-frame": "npm:^7.26.2" + "@babel/generator": "npm:^7.26.9" + "@babel/parser": "npm:^7.26.9" + "@babel/template": "npm:^7.26.9" + "@babel/types": "npm:^7.26.9" + debug: "npm:^4.3.1" + globals: "npm:^11.1.0" + checksum: 10c0/51dd57fa39ea34d04816806bfead04c74f37301269d24c192d1406dc6e244fea99713b3b9c5f3e926d9ef6aa9cd5c062ad4f2fc1caa9cf843d5e864484ac955e + languageName: node + linkType: hard + "@babel/types@npm:^7.0.0, @babel/types@npm:^7.20.7, @babel/types@npm:^7.8.3": version: 7.24.9 resolution: "@babel/types@npm:7.24.9" @@ -871,7 +958,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: @@ -881,6 +968,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 + "@bcoe/v8-coverage@npm:^0.2.3": version: 0.2.3 resolution: "@bcoe/v8-coverage@npm:0.2.3" @@ -895,15 +992,15 @@ __metadata: languageName: node linkType: hard -"@changesets/apply-release-plan@npm:^7.0.7": - version: 7.0.7 - resolution: "@changesets/apply-release-plan@npm:7.0.7" +"@changesets/apply-release-plan@npm:^7.0.10": + version: 7.0.10 + resolution: "@changesets/apply-release-plan@npm:7.0.10" dependencies: - "@changesets/config": "npm:^3.0.5" + "@changesets/config": "npm:^3.1.1" "@changesets/get-version-range-type": "npm:^0.4.0" "@changesets/git": "npm:^3.0.2" - "@changesets/should-skip-package": "npm:^0.1.1" - "@changesets/types": "npm:^6.0.0" + "@changesets/should-skip-package": "npm:^0.1.2" + "@changesets/types": "npm:^6.1.0" "@manypkg/get-packages": "npm:^1.1.3" detect-indent: "npm:^6.0.0" fs-extra: "npm:^7.0.1" @@ -912,62 +1009,62 @@ __metadata: prettier: "npm:^2.7.1" resolve-from: "npm:^5.0.0" semver: "npm:^7.5.3" - checksum: 10c0/6ecbcccd46832b230b0c734ec2fc77648401f837dea91a7bf63be07207e4bb01cc6e1d6a05644bb85b6ee4b556bad031f43af7e8c742b873ee1313edb0a03929 + checksum: 10c0/4ee5951448c26bbf73fac5c9a0785d5bb0cc3f2e6c1ffc9337766b446fe79a7b018834be2a4723938faec0d331aa30f1d6c7ea47db48d7a7babe37862645dd57 languageName: node linkType: hard -"@changesets/assemble-release-plan@npm:^6.0.5": - version: 6.0.5 - resolution: "@changesets/assemble-release-plan@npm:6.0.5" +"@changesets/assemble-release-plan@npm:^6.0.6": + version: 6.0.6 + resolution: "@changesets/assemble-release-plan@npm:6.0.6" dependencies: "@changesets/errors": "npm:^0.2.0" - "@changesets/get-dependents-graph": "npm:^2.1.2" - "@changesets/should-skip-package": "npm:^0.1.1" - "@changesets/types": "npm:^6.0.0" + "@changesets/get-dependents-graph": "npm:^2.1.3" + "@changesets/should-skip-package": "npm:^0.1.2" + "@changesets/types": "npm:^6.1.0" "@manypkg/get-packages": "npm:^1.1.3" semver: "npm:^7.5.3" - checksum: 10c0/6e4b699d67c9f1e78133a33bba7bb46b3119d6497e1f1dba5033905fd60911c90239c67ad6c4823ccd44225dee40d0689083be40f8c86ea30c5535e12d8db041 + checksum: 10c0/292c6570310818f5427b97f1ddfd518ae4493f47e2674ca40bb11251808a20d7f07bff548c4277b1ad5ddfe53602b69ae6628fc45864286e34edfb5f7c2e19a0 languageName: node linkType: hard -"@changesets/changelog-git@npm:^0.2.0": - version: 0.2.0 - resolution: "@changesets/changelog-git@npm:0.2.0" +"@changesets/changelog-git@npm:^0.2.1": + version: 0.2.1 + resolution: "@changesets/changelog-git@npm:0.2.1" dependencies: - "@changesets/types": "npm:^6.0.0" - checksum: 10c0/d94df555656ac4ac9698d87a173b1955227ac0f1763d59b9b4d4f149ab3f879ca67603e48407b1dfdadaef4e7882ae7bbc7b7be160a45a55f05442004bdc61bd + "@changesets/types": "npm:^6.1.0" + checksum: 10c0/6a6fb315ffb2266fcb8f32ae9a60ccdb5436e52350a2f53beacf9822d3355f9052aba5001a718e12af472b4a8fabd69b408d0b11c02ac909ba7a183d27a9f7fd languageName: node linkType: hard -"@changesets/changelog-github@npm:^0.5.0": - version: 0.5.0 - resolution: "@changesets/changelog-github@npm:0.5.0" +"@changesets/changelog-github@npm:^0.5.1": + version: 0.5.1 + resolution: "@changesets/changelog-github@npm:0.5.1" dependencies: "@changesets/get-github-info": "npm:^0.6.0" - "@changesets/types": "npm:^6.0.0" + "@changesets/types": "npm:^6.1.0" dotenv: "npm:^8.1.0" - checksum: 10c0/fc6a6947185af6f1c7543c572ca6e46d733188586ab873c75476f389fb11c675df1c230a56394d490aa9a7f13bdf88d23541265deeda77f167d06b0cc3206923 + checksum: 10c0/0ce02d3d7d6bedf86ca2a2bf88ab304ee0f4d5e491edd912769d9420386702876c17850f739f59fe6f90da690e11803cb2047eeef3a6abf411604c7ccab375fb languageName: node linkType: hard -"@changesets/cli@npm:^2.27.11": - version: 2.27.11 - resolution: "@changesets/cli@npm:2.27.11" +"@changesets/cli@npm:^2.28.1": + version: 2.28.1 + resolution: "@changesets/cli@npm:2.28.1" dependencies: - "@changesets/apply-release-plan": "npm:^7.0.7" - "@changesets/assemble-release-plan": "npm:^6.0.5" - "@changesets/changelog-git": "npm:^0.2.0" - "@changesets/config": "npm:^3.0.5" + "@changesets/apply-release-plan": "npm:^7.0.10" + "@changesets/assemble-release-plan": "npm:^6.0.6" + "@changesets/changelog-git": "npm:^0.2.1" + "@changesets/config": "npm:^3.1.1" "@changesets/errors": "npm:^0.2.0" - "@changesets/get-dependents-graph": "npm:^2.1.2" - "@changesets/get-release-plan": "npm:^4.0.6" + "@changesets/get-dependents-graph": "npm:^2.1.3" + "@changesets/get-release-plan": "npm:^4.0.8" "@changesets/git": "npm:^3.0.2" "@changesets/logger": "npm:^0.1.1" - "@changesets/pre": "npm:^2.0.1" - "@changesets/read": "npm:^0.6.2" - "@changesets/should-skip-package": "npm:^0.1.1" - "@changesets/types": "npm:^6.0.0" - "@changesets/write": "npm:^0.3.2" + "@changesets/pre": "npm:^2.0.2" + "@changesets/read": "npm:^0.6.3" + "@changesets/should-skip-package": "npm:^0.1.2" + "@changesets/types": "npm:^6.1.0" + "@changesets/write": "npm:^0.4.0" "@manypkg/get-packages": "npm:^1.1.3" ansi-colors: "npm:^4.1.3" ci-info: "npm:^3.7.0" @@ -984,22 +1081,22 @@ __metadata: term-size: "npm:^2.1.0" bin: changeset: bin.js - checksum: 10c0/dcaad88c6cd671c5a37005358ed3ab51b5f6f74e2dc1747af060e7bac6918a1ad31e122ca51ef1d337cb291e10997ad4e9156878aa90bf977ed8d38456c603da + checksum: 10c0/f965b56fa533f91b5de0f5fd5b09fac46662f023dafbe474d3fc7ceb71629dce4783a37429a927d50292a7ea95c0694e5a8f0c143d9cbba95d28a4d11ab8106b languageName: node linkType: hard -"@changesets/config@npm:^3.0.5": - version: 3.0.5 - resolution: "@changesets/config@npm:3.0.5" +"@changesets/config@npm:^3.1.1": + version: 3.1.1 + resolution: "@changesets/config@npm:3.1.1" dependencies: "@changesets/errors": "npm:^0.2.0" - "@changesets/get-dependents-graph": "npm:^2.1.2" + "@changesets/get-dependents-graph": "npm:^2.1.3" "@changesets/logger": "npm:^0.1.1" - "@changesets/types": "npm:^6.0.0" + "@changesets/types": "npm:^6.1.0" "@manypkg/get-packages": "npm:^1.1.3" fs-extra: "npm:^7.0.1" micromatch: "npm:^4.0.8" - checksum: 10c0/fead5b29b322c247c00bb6e5fbe5d580c290c1f68c4a507b83a06ea7267100c1242d7fc7aeb29f1389377ec6d8ebf39f0387ee0bdbcc338b2a5ab2487e0c8342 + checksum: 10c0/e6e529ca9525d1550cc2155a01a477c5b923e084985cb5cb15b6efc06da543c2faf623dd67d305688ffa8a8fc9d48f1ba74ad6653ce230183e40f10ffaa0c2dc languageName: node linkType: hard @@ -1012,15 +1109,15 @@ __metadata: languageName: node linkType: hard -"@changesets/get-dependents-graph@npm:^2.1.2": - version: 2.1.2 - resolution: "@changesets/get-dependents-graph@npm:2.1.2" +"@changesets/get-dependents-graph@npm:^2.1.3": + version: 2.1.3 + resolution: "@changesets/get-dependents-graph@npm:2.1.3" dependencies: - "@changesets/types": "npm:^6.0.0" + "@changesets/types": "npm:^6.1.0" "@manypkg/get-packages": "npm:^1.1.3" picocolors: "npm:^1.1.0" semver: "npm:^7.5.3" - checksum: 10c0/f2674ccb71f989b2abf2088953548b6de503e17d0b1f5b0147c4ef1672a5a2dd5201b828b419ccb67841e7812d1fbe1607d12668ea8972b3d0de5a1d2b38b61b + checksum: 10c0/b9d9992440b7e09dcaf22f57d28f1d8e0e31996e1bc44dbbfa1801e44f93fa49ebba6f9356c60f6ff0bd85cd0f0d0b8602f7e0f2addc5be647b686e6f8985f70 languageName: node linkType: hard @@ -1034,17 +1131,17 @@ __metadata: languageName: node linkType: hard -"@changesets/get-release-plan@npm:^4.0.6": - version: 4.0.6 - resolution: "@changesets/get-release-plan@npm:4.0.6" +"@changesets/get-release-plan@npm:^4.0.8": + version: 4.0.8 + resolution: "@changesets/get-release-plan@npm:4.0.8" dependencies: - "@changesets/assemble-release-plan": "npm:^6.0.5" - "@changesets/config": "npm:^3.0.5" - "@changesets/pre": "npm:^2.0.1" - "@changesets/read": "npm:^0.6.2" - "@changesets/types": "npm:^6.0.0" + "@changesets/assemble-release-plan": "npm:^6.0.6" + "@changesets/config": "npm:^3.1.1" + "@changesets/pre": "npm:^2.0.2" + "@changesets/read": "npm:^0.6.3" + "@changesets/types": "npm:^6.1.0" "@manypkg/get-packages": "npm:^1.1.3" - checksum: 10c0/7c35f1dc5bf6be17b0e2aabc7c2fceec68b4a9c73087d946a7a1691ce5221f16d172be3ae502d4daffdae1e567cdaf7022004d2fb745807ddc74e403c756c246 + checksum: 10c0/b638f83683264818ea6cb729a3fd10f9edf29c61c7acee15ce321287cacbe03700706a20c0b531fdb3bbb23bda8967f4c6cbef08db207189fb7289313f473a1a languageName: node linkType: hard @@ -1077,50 +1174,50 @@ __metadata: languageName: node linkType: hard -"@changesets/parse@npm:^0.4.0": - version: 0.4.0 - resolution: "@changesets/parse@npm:0.4.0" +"@changesets/parse@npm:^0.4.1": + version: 0.4.1 + resolution: "@changesets/parse@npm:0.4.1" dependencies: - "@changesets/types": "npm:^6.0.0" + "@changesets/types": "npm:^6.1.0" js-yaml: "npm:^3.13.1" - checksum: 10c0/8e76f8540aceb2263eb76c97f027c1990fc069bf275321ad0aabf843cb51bc6711b13118eda35c701a30a36d26f48e75f7afc14e9a5c863f8a98091021fd5d61 + checksum: 10c0/8caf73b48addb1add246f0287f0dcbd47ca0444b33f251b6208dad36de9c21d2654f0ae0527e5bf14b075be23144b59f48a36e2d87850fb7c004050f07461fdc languageName: node linkType: hard -"@changesets/pre@npm:^2.0.1": - version: 2.0.1 - resolution: "@changesets/pre@npm:2.0.1" +"@changesets/pre@npm:^2.0.2": + version: 2.0.2 + resolution: "@changesets/pre@npm:2.0.2" dependencies: "@changesets/errors": "npm:^0.2.0" - "@changesets/types": "npm:^6.0.0" + "@changesets/types": "npm:^6.1.0" "@manypkg/get-packages": "npm:^1.1.3" fs-extra: "npm:^7.0.1" - checksum: 10c0/aacd4a71cab8a511702903bee50434188f300503a1207a08b89d09dc575981c28af77b7357a610504ce48d101e67308fc6ed4427ac2a61d162de4d01a2a0f695 + checksum: 10c0/0af9396d84c47a88d79b757e9db4e3579b6620260f92c243b8349e7fcefca3c2652583f6d215c13115bed5d5cdc30c975f307fd6acbb89d205b1ba2ae403b918 languageName: node linkType: hard -"@changesets/read@npm:^0.6.2": - version: 0.6.2 - resolution: "@changesets/read@npm:0.6.2" +"@changesets/read@npm:^0.6.3": + version: 0.6.3 + resolution: "@changesets/read@npm:0.6.3" dependencies: "@changesets/git": "npm:^3.0.2" "@changesets/logger": "npm:^0.1.1" - "@changesets/parse": "npm:^0.4.0" - "@changesets/types": "npm:^6.0.0" + "@changesets/parse": "npm:^0.4.1" + "@changesets/types": "npm:^6.1.0" fs-extra: "npm:^7.0.1" p-filter: "npm:^2.1.0" picocolors: "npm:^1.1.0" - checksum: 10c0/a63efb4605c56ac216734fa5749f4f4ed9f8ab0ec2cbef96530b99c244ab84b2a47514d34f8f656e517237b65a456dd274e599b9c745f351719baeb503d0d6c3 + checksum: 10c0/4c2eac60aab0a6b14ad5a2ed2f57427019fe567dd6d2c6e122bd3cbf7f69903dcec6c864a67c39544ed011369223c838e498212303404a7f884428f4366f10da languageName: node linkType: hard -"@changesets/should-skip-package@npm:^0.1.1": - version: 0.1.1 - resolution: "@changesets/should-skip-package@npm:0.1.1" +"@changesets/should-skip-package@npm:^0.1.2": + version: 0.1.2 + resolution: "@changesets/should-skip-package@npm:0.1.2" dependencies: - "@changesets/types": "npm:^6.0.0" + "@changesets/types": "npm:^6.1.0" "@manypkg/get-packages": "npm:^1.1.3" - checksum: 10c0/4fb0a17538492db15733a9514560ff1d4dfbd94882a349495a6585eb675f9414aa74020aa886f1f72542ca70d5d96a842db2f52b08fcb571705b1d9ed3632e57 + checksum: 10c0/484e339e7d6e6950e12bff4eda6e8eccb077c0fbb1f09dd95d2ae948b715226a838c71eaf50cd2d7e0e631ce3bfb1ca93ac752436e6feae5b87aece2e917b440 languageName: node linkType: hard @@ -1131,28 +1228,28 @@ __metadata: languageName: node linkType: hard -"@changesets/types@npm:^6.0.0": - version: 6.0.0 - resolution: "@changesets/types@npm:6.0.0" - checksum: 10c0/e755f208792547e3b9ece15ce4da22466267da810c6fd87d927a1b8cec4d7fb7f0eea0d1a7585747676238e3e4ba1ffdabe016ccb05cfa537b4e4b03ec399f41 +"@changesets/types@npm:^6.1.0": + version: 6.1.0 + resolution: "@changesets/types@npm:6.1.0" + checksum: 10c0/b4cea3a4465d1eaf0bbd7be1e404aca5a055a61d4cc72aadcb73bbbda1670b4022736b8d3052616cbf1f451afa0637545d077697f4b923236539af9cd5abce6c languageName: node linkType: hard -"@changesets/write@npm:^0.3.2": - version: 0.3.2 - resolution: "@changesets/write@npm:0.3.2" +"@changesets/write@npm:^0.4.0": + version: 0.4.0 + resolution: "@changesets/write@npm:0.4.0" dependencies: - "@changesets/types": "npm:^6.0.0" + "@changesets/types": "npm:^6.1.0" fs-extra: "npm:^7.0.1" - human-id: "npm:^1.0.2" + human-id: "npm:^4.1.1" prettier: "npm:^2.7.1" - checksum: 10c0/1e00af0a82a780f74e03359d672690b35b6c788891e515a37488fca756109471f0d2da4904185b758a38d26e5cc2f426de4a2201ca3b6e26cf03ab747773690f + checksum: 10c0/311f4d0e536d1b5f2d3f9053537d62b2d4cdbd51e1d2767807ac9d1e0f380367f915d2ad370e5c73902d5a54bffd282d53fff5418c8ad31df51751d652bea826 languageName: node linkType: hard -"@chromatic-com/storybook@npm:^3.2.3": - version: 3.2.3 - resolution: "@chromatic-com/storybook@npm:3.2.3" +"@chromatic-com/storybook@npm:^3.2.5": + version: 3.2.5 + resolution: "@chromatic-com/storybook@npm:3.2.5" dependencies: chromatic: "npm:^11.15.0" filesize: "npm:^10.0.12" @@ -1161,198 +1258,198 @@ __metadata: strip-ansi: "npm:^7.1.0" peerDependencies: storybook: ^8.2.0 || ^8.3.0-0 || ^8.4.0-0 || ^8.5.0-0 || ^8.6.0-0 - checksum: 10c0/23c59b7d225347d4af8cb6a7596da3417dc3abc2d5036c4ef5cee2852b994a16b5996a1bd1a584bb56e97266d85ce9ae7daeeac296b3060d6b80b14cad10d9d1 + checksum: 10c0/a8064e433caf8842079a676a9ecc0e423b6599e2549d14f9d69cef19d0a4f527c819c9577975436463925dcc8046278fc2f1f3d2bb2d1c250df14e37b0ae44a4 languageName: node linkType: hard -"@commitlint/cli@npm:^19.6.1": - version: 19.6.1 - resolution: "@commitlint/cli@npm:19.6.1" +"@commitlint/cli@npm:^19.8.0": + version: 19.8.0 + resolution: "@commitlint/cli@npm:19.8.0" dependencies: - "@commitlint/format": "npm:^19.5.0" - "@commitlint/lint": "npm:^19.6.0" - "@commitlint/load": "npm:^19.6.1" - "@commitlint/read": "npm:^19.5.0" - "@commitlint/types": "npm:^19.5.0" + "@commitlint/format": "npm:^19.8.0" + "@commitlint/lint": "npm:^19.8.0" + "@commitlint/load": "npm:^19.8.0" + "@commitlint/read": "npm:^19.8.0" + "@commitlint/types": "npm:^19.8.0" tinyexec: "npm:^0.3.0" yargs: "npm:^17.0.0" bin: - commitlint: cli.js - checksum: 10c0/fa7a344292f1d25533b195b061bcae0a80434490fae843ad28593c09668f48e9a74906b69f95d26df4152c56c71ab31a0bc169d333e22c6ca53dc54646a2ff19 + commitlint: ./cli.js + checksum: 10c0/6931c62c18b848b2c7266ec0b2d3a690a9ec9f83151a67a89ef20a49c84d5e6ee8dbaee4aaec14b2bd1229fdd91c7a0b41b7fd68c52fff8632a0037d52bd6eb2 languageName: node linkType: hard -"@commitlint/config-conventional@npm:^19.6.0": - version: 19.6.0 - resolution: "@commitlint/config-conventional@npm:19.6.0" +"@commitlint/config-conventional@npm:^19.8.0": + version: 19.8.0 + resolution: "@commitlint/config-conventional@npm:19.8.0" dependencies: - "@commitlint/types": "npm:^19.5.0" + "@commitlint/types": "npm:^19.8.0" conventional-changelog-conventionalcommits: "npm:^7.0.2" - checksum: 10c0/984870138f5d4b947bc2ea8d12fcb8103ef9e6141d0fb50a6e387665495b80b35890d9dc025443a243a53d2a69d7c0bab1d77c5658a6e5a15a3dd7773557fad2 + checksum: 10c0/c0e2ad4ee8b793ad08ce8f0fd242d8111c71c81eba53b652431b7852e02d3eef0a383e234b7574429f5d1876b712a915921f6ff61fdaccdf708cbbaf3fa1f2f0 languageName: node linkType: hard -"@commitlint/config-validator@npm:^19.5.0": - version: 19.5.0 - resolution: "@commitlint/config-validator@npm:19.5.0" +"@commitlint/config-validator@npm:^19.8.0": + version: 19.8.0 + resolution: "@commitlint/config-validator@npm:19.8.0" dependencies: - "@commitlint/types": "npm:^19.5.0" + "@commitlint/types": "npm:^19.8.0" ajv: "npm:^8.11.0" - checksum: 10c0/f04b8c66448c9a4f335d1ac9625393d471d2bcc864adc834eeec52ce19939c25475bf90677504df03ab88869e883b4ebfddff68f99f7652900d6b297ef586643 + checksum: 10c0/968b3041dbf1683f9da443c2998a53ced52e86b98a48862f39f303af69638c72b7409840c16b3ded27eaa1636bdbf6b2464f8a2628c40d8f14a66a5474359ed5 languageName: node linkType: hard -"@commitlint/ensure@npm:^19.5.0": - version: 19.5.0 - resolution: "@commitlint/ensure@npm:19.5.0" +"@commitlint/ensure@npm:^19.8.0": + version: 19.8.0 + resolution: "@commitlint/ensure@npm:19.8.0" dependencies: - "@commitlint/types": "npm:^19.5.0" + "@commitlint/types": "npm:^19.8.0" lodash.camelcase: "npm:^4.3.0" lodash.kebabcase: "npm:^4.1.1" lodash.snakecase: "npm:^4.1.1" lodash.startcase: "npm:^4.4.0" lodash.upperfirst: "npm:^4.3.1" - checksum: 10c0/94955d424da36a4e9390dfb6e128160d1dcd3ffa20b835a9b6fdd92af46bf8897851f19cbeb9d12a70e9b9c36a993d3a48a60893e74f32fe1b601e1e68484d71 + checksum: 10c0/5160dcf41c595496894cf1d075b4ee15c14b3689967d8693d4121689475d36853eceeb09fc4e07b6f002e7b8869e75418b0c1cd95d4ee32d062811301337875c languageName: node linkType: hard -"@commitlint/execute-rule@npm:^19.5.0": - version: 19.5.0 - resolution: "@commitlint/execute-rule@npm:19.5.0" - checksum: 10c0/966dfc09ae3fe609527fb49c7773ae210ade9d14a802a92a57ab251900a77d2968aed08df6b34f175bf4ae9bf5d675b52b346e7b10b717e8a635499e4cf42267 +"@commitlint/execute-rule@npm:^19.8.0": + version: 19.8.0 + resolution: "@commitlint/execute-rule@npm:19.8.0" + checksum: 10c0/fee5848e41680935510c6eebe2afcfe3511e2ccc39686c555f2e2db0205345479c7dbd84e7a8a2b22c7700ce75e6442b24685fbc3a419b0ea91f83a0850c6489 languageName: node linkType: hard -"@commitlint/format@npm:^19.5.0": - version: 19.5.0 - resolution: "@commitlint/format@npm:19.5.0" +"@commitlint/format@npm:^19.8.0": + version: 19.8.0 + resolution: "@commitlint/format@npm:19.8.0" dependencies: - "@commitlint/types": "npm:^19.5.0" + "@commitlint/types": "npm:^19.8.0" chalk: "npm:^5.3.0" - checksum: 10c0/209a3d530d028d483886ea2337d6ec8a95b61119f53f7f1db167b13fd8a204bdcbcd704e649406a0b2285e8424b3bac9e1e6856d2a78f45e176976b9efb76e45 + checksum: 10c0/25de71d5b19c126e7e9f471dcf8015bc362ee94fec7ca0da866181832548cb4a04c18f732c8d7cc64641e896a33d0e199bd445edd9e0ef164b0e7bd7259b86b1 languageName: node linkType: hard -"@commitlint/is-ignored@npm:^19.6.0": - version: 19.6.0 - resolution: "@commitlint/is-ignored@npm:19.6.0" +"@commitlint/is-ignored@npm:^19.8.0": + version: 19.8.0 + resolution: "@commitlint/is-ignored@npm:19.8.0" dependencies: - "@commitlint/types": "npm:^19.5.0" + "@commitlint/types": "npm:^19.8.0" semver: "npm:^7.6.0" - checksum: 10c0/64e3522598f131aefab72e78f2b0d5d78228041fbe14fd9785611bd5a4ff7dfae38288ff87b171ab2ff722342983387b6e568ab4d758f3c97866eb924252e6c5 + checksum: 10c0/6f882266cca84fdc2a435cc01388b070c60cdda56dff6cb1bd98a443982d8bb90b186972450c733ee1190122882f53e715a7204d9fc9787b5303ca545985958c languageName: node linkType: hard -"@commitlint/lint@npm:^19.6.0": - version: 19.6.0 - resolution: "@commitlint/lint@npm:19.6.0" +"@commitlint/lint@npm:^19.8.0": + version: 19.8.0 + resolution: "@commitlint/lint@npm:19.8.0" dependencies: - "@commitlint/is-ignored": "npm:^19.6.0" - "@commitlint/parse": "npm:^19.5.0" - "@commitlint/rules": "npm:^19.6.0" - "@commitlint/types": "npm:^19.5.0" - checksum: 10c0/d7e3c6a43d89b2196362dce5abef6665869844455176103f311cab7a92f6b7be60edec4f03d27b946a65ee2ceb8ff16f5955cba1da6ecdeb9efe9f215b16f47f + "@commitlint/is-ignored": "npm:^19.8.0" + "@commitlint/parse": "npm:^19.8.0" + "@commitlint/rules": "npm:^19.8.0" + "@commitlint/types": "npm:^19.8.0" + checksum: 10c0/5ce1074e5ad1ed12158fb722d4d643be71c3ae35113c6b13faa71dd85a07eeafec50ef2fee3f3e6fccdbd8bf8684613aa097e287b54a7cbcae1f9f28e2b95e8d languageName: node linkType: hard -"@commitlint/load@npm:^19.6.1": - version: 19.6.1 - resolution: "@commitlint/load@npm:19.6.1" +"@commitlint/load@npm:^19.8.0": + version: 19.8.0 + resolution: "@commitlint/load@npm:19.8.0" dependencies: - "@commitlint/config-validator": "npm:^19.5.0" - "@commitlint/execute-rule": "npm:^19.5.0" - "@commitlint/resolve-extends": "npm:^19.5.0" - "@commitlint/types": "npm:^19.5.0" + "@commitlint/config-validator": "npm:^19.8.0" + "@commitlint/execute-rule": "npm:^19.8.0" + "@commitlint/resolve-extends": "npm:^19.8.0" + "@commitlint/types": "npm:^19.8.0" chalk: "npm:^5.3.0" cosmiconfig: "npm:^9.0.0" cosmiconfig-typescript-loader: "npm:^6.1.0" lodash.isplainobject: "npm:^4.0.6" lodash.merge: "npm:^4.6.2" lodash.uniq: "npm:^4.5.0" - checksum: 10c0/3f92ef6a592491dbb48ae985ef8e3897adccbbb735c09425304cbe574a0ec392b2d724ca14ebb99107e32f60bbec3b873ab64e87fea6d5af7aa579a9052a626e + checksum: 10c0/6826a015ce40ae6043ff45bf29c7d515822ea416ab2a2a6eec6a69e5ba81b71419cadd609070aa3695d59f5442c34e3c264889df343eb66595c130185db58bad languageName: node linkType: hard -"@commitlint/message@npm:^19.5.0": - version: 19.5.0 - resolution: "@commitlint/message@npm:19.5.0" - checksum: 10c0/72b990ba8c3c41441bff2126f4ea536a635c9768dee7000b4951770ac82c5e0bb4c2d408cf28cadbf51a0abbdb7a09ddd36e0968af0997fcc166596d4c3866a7 +"@commitlint/message@npm:^19.8.0": + version: 19.8.0 + resolution: "@commitlint/message@npm:19.8.0" + checksum: 10c0/a7390fade33e381a17d53ec16081bd6915d61cf4eb326739ee4b4c1f3a4016f84e953dd273126fcf23deaf5ca2ed49d75c0e667bc159dcfb26cb37ce840d97a9 languageName: node linkType: hard -"@commitlint/parse@npm:^19.5.0": - version: 19.5.0 - resolution: "@commitlint/parse@npm:19.5.0" +"@commitlint/parse@npm:^19.8.0": + version: 19.8.0 + resolution: "@commitlint/parse@npm:19.8.0" dependencies: - "@commitlint/types": "npm:^19.5.0" + "@commitlint/types": "npm:^19.8.0" conventional-changelog-angular: "npm:^7.0.0" conventional-commits-parser: "npm:^5.0.0" - checksum: 10c0/63655cedcf48b29613ef959155ee83f49942406abe40ee6b64ad989a169a0582451dcf15a9c9b69a66011ae451ab2e086fb80c1823cc7ddf275705ff627660b1 + checksum: 10c0/ece54b76d2bf6eb620d972810a8db276a104cbd29db6a3c7eb661fc6eaf8212fda04a42920eac56831f65af77bc4a8e15260c2c0881f351289d93e4cf5371cde languageName: node linkType: hard -"@commitlint/read@npm:^19.5.0": - version: 19.5.0 - resolution: "@commitlint/read@npm:19.5.0" +"@commitlint/read@npm:^19.8.0": + version: 19.8.0 + resolution: "@commitlint/read@npm:19.8.0" dependencies: - "@commitlint/top-level": "npm:^19.5.0" - "@commitlint/types": "npm:^19.5.0" + "@commitlint/top-level": "npm:^19.8.0" + "@commitlint/types": "npm:^19.8.0" git-raw-commits: "npm:^4.0.0" minimist: "npm:^1.2.8" tinyexec: "npm:^0.3.0" - checksum: 10c0/c2d6f958930e815337a4994779ca1dfcbbb6b81b8f3098cc7380e2cc5ddeae69ebd839b48fecd08950e565d43bc42c479915c578eaf57b3877706bca1fad6b8a + checksum: 10c0/94b9156f67b95d0ca7dd9653e399b7129d0b84c4940dc79a5264148688ca01c70780ef235b67d344059e575938c9e0988af9fa7233a793dcd74f49f9278e0e68 languageName: node linkType: hard -"@commitlint/resolve-extends@npm:^19.5.0": - version: 19.5.0 - resolution: "@commitlint/resolve-extends@npm:19.5.0" +"@commitlint/resolve-extends@npm:^19.8.0": + version: 19.8.0 + resolution: "@commitlint/resolve-extends@npm:19.8.0" dependencies: - "@commitlint/config-validator": "npm:^19.5.0" - "@commitlint/types": "npm:^19.5.0" + "@commitlint/config-validator": "npm:^19.8.0" + "@commitlint/types": "npm:^19.8.0" global-directory: "npm:^4.0.1" import-meta-resolve: "npm:^4.0.0" lodash.mergewith: "npm:^4.6.2" resolve-from: "npm:^5.0.0" - checksum: 10c0/10569a46036b7aa93c77dc5001a67bc9f36b340b97b2fd39b5ee95b0efc5e35335c61f86d4ba0bb5a8e6dd49ccf956990cce9ee29cfea9ba567e02668be01841 + checksum: 10c0/7b05d0c9bc2171e1475baeef13d30d6d985e1dd9cb4652355484a8d4841797dffd3e80edd5c61182cbfab1a28f4180ccbdef87bfa8f4586e057e05e238f5b19b languageName: node linkType: hard -"@commitlint/rules@npm:^19.6.0": - version: 19.6.0 - resolution: "@commitlint/rules@npm:19.6.0" +"@commitlint/rules@npm:^19.8.0": + version: 19.8.0 + resolution: "@commitlint/rules@npm:19.8.0" dependencies: - "@commitlint/ensure": "npm:^19.5.0" - "@commitlint/message": "npm:^19.5.0" - "@commitlint/to-lines": "npm:^19.5.0" - "@commitlint/types": "npm:^19.5.0" - checksum: 10c0/1d93b741cfb46e6c5314ddb03282844b65db832aa4767561bb37e9d0595d02330e6a0a557fb66f86d78b2ffd91cd2ed794899df59ee23b27abc44e1e57b42d0e + "@commitlint/ensure": "npm:^19.8.0" + "@commitlint/message": "npm:^19.8.0" + "@commitlint/to-lines": "npm:^19.8.0" + "@commitlint/types": "npm:^19.8.0" + checksum: 10c0/3d6e932dfbd4c6384d3b3ded66a9f886667988cae4b1ae091350198ae8ca5c703142f13ccd8b632a0d260fd48072f5bc67836c15e6d637033b97dac2c81c95dd languageName: node linkType: hard -"@commitlint/to-lines@npm:^19.5.0": - version: 19.5.0 - resolution: "@commitlint/to-lines@npm:19.5.0" - checksum: 10c0/7674b4b6887c09e84728b9fa9c986ab77db400bf53ec83aaae84e03e0f3ed33088d450d1f67135f0f7a4cbc1121181775199779e1ca162fe604c902987e3008f +"@commitlint/to-lines@npm:^19.8.0": + version: 19.8.0 + resolution: "@commitlint/to-lines@npm:19.8.0" + checksum: 10c0/1a0f34805615f244f34471138cfd5c8a45531ec3d1a0254370835db817dd06ec14181a8b281cd508632cf217d6cf5148473984bf4736d74b275fe69b8cd40863 languageName: node linkType: hard -"@commitlint/top-level@npm:^19.5.0": - version: 19.5.0 - resolution: "@commitlint/top-level@npm:19.5.0" +"@commitlint/top-level@npm:^19.8.0": + version: 19.8.0 + resolution: "@commitlint/top-level@npm:19.8.0" dependencies: find-up: "npm:^7.0.0" - checksum: 10c0/8c1edc513c8d6655606e52d160d31ccd4b13234400ca67d21782798ab66701780b1ec21a7bb411fe8270db7735f10d39d3b0a3e52f3ddd1109b80741eb512bb4 + checksum: 10c0/04d39835bfb8d9f86b693d8d13bfe7e6566d48ac57e382e5139277bb0e5fa286645fe220c323fcb8e6569eea48ab26253c0eb4f6a142855a3a7b7565891ead7c languageName: node linkType: hard -"@commitlint/types@npm:^19.5.0": - version: 19.5.0 - resolution: "@commitlint/types@npm:19.5.0" +"@commitlint/types@npm:^19.8.0": + version: 19.8.0 + resolution: "@commitlint/types@npm:19.8.0" dependencies: "@types/conventional-commits-parser": "npm:^5.0.0" chalk: "npm:^5.3.0" - checksum: 10c0/f4a93992f43b23cd5af200c69bb73227fdc0f78a6f7ebcda73dad10d558c1ac66ff164aa6dc3c2ddb322c9ed8b1a89b05f458e40d7c440a0358f435d2d71c2df + checksum: 10c0/634a5db20110675da8ddf226f200c33f262c6e99d06853fd4a2f6d543e6cc7dfe48b045f7ae76bcce2e39595099bfebe6a5dd6da37ff2968733c1263b8d46644 languageName: node linkType: hard @@ -1922,9 +2019,9 @@ __metadata: languageName: node linkType: hard -"@esbuild/aix-ppc64@npm:0.24.0": - version: 0.24.0 - resolution: "@esbuild/aix-ppc64@npm:0.24.0" +"@esbuild/aix-ppc64@npm:0.25.1": + version: 0.25.1 + resolution: "@esbuild/aix-ppc64@npm:0.25.1" conditions: os=aix & cpu=ppc64 languageName: node linkType: hard @@ -1936,9 +2033,9 @@ __metadata: languageName: node linkType: hard -"@esbuild/android-arm64@npm:0.24.0": - version: 0.24.0 - resolution: "@esbuild/android-arm64@npm:0.24.0" +"@esbuild/android-arm64@npm:0.25.1": + version: 0.25.1 + resolution: "@esbuild/android-arm64@npm:0.25.1" conditions: os=android & cpu=arm64 languageName: node linkType: hard @@ -1950,9 +2047,9 @@ __metadata: languageName: node linkType: hard -"@esbuild/android-arm@npm:0.24.0": - version: 0.24.0 - resolution: "@esbuild/android-arm@npm:0.24.0" +"@esbuild/android-arm@npm:0.25.1": + version: 0.25.1 + resolution: "@esbuild/android-arm@npm:0.25.1" conditions: os=android & cpu=arm languageName: node linkType: hard @@ -1964,9 +2061,9 @@ __metadata: languageName: node linkType: hard -"@esbuild/android-x64@npm:0.24.0": - version: 0.24.0 - resolution: "@esbuild/android-x64@npm:0.24.0" +"@esbuild/android-x64@npm:0.25.1": + version: 0.25.1 + resolution: "@esbuild/android-x64@npm:0.25.1" conditions: os=android & cpu=x64 languageName: node linkType: hard @@ -1978,9 +2075,9 @@ __metadata: languageName: node linkType: hard -"@esbuild/darwin-arm64@npm:0.24.0": - version: 0.24.0 - resolution: "@esbuild/darwin-arm64@npm:0.24.0" +"@esbuild/darwin-arm64@npm:0.25.1": + version: 0.25.1 + resolution: "@esbuild/darwin-arm64@npm:0.25.1" conditions: os=darwin & cpu=arm64 languageName: node linkType: hard @@ -1992,9 +2089,9 @@ __metadata: languageName: node linkType: hard -"@esbuild/darwin-x64@npm:0.24.0": - version: 0.24.0 - resolution: "@esbuild/darwin-x64@npm:0.24.0" +"@esbuild/darwin-x64@npm:0.25.1": + version: 0.25.1 + resolution: "@esbuild/darwin-x64@npm:0.25.1" conditions: os=darwin & cpu=x64 languageName: node linkType: hard @@ -2006,9 +2103,9 @@ __metadata: languageName: node linkType: hard -"@esbuild/freebsd-arm64@npm:0.24.0": - version: 0.24.0 - resolution: "@esbuild/freebsd-arm64@npm:0.24.0" +"@esbuild/freebsd-arm64@npm:0.25.1": + version: 0.25.1 + resolution: "@esbuild/freebsd-arm64@npm:0.25.1" conditions: os=freebsd & cpu=arm64 languageName: node linkType: hard @@ -2020,9 +2117,9 @@ __metadata: languageName: node linkType: hard -"@esbuild/freebsd-x64@npm:0.24.0": - version: 0.24.0 - resolution: "@esbuild/freebsd-x64@npm:0.24.0" +"@esbuild/freebsd-x64@npm:0.25.1": + version: 0.25.1 + resolution: "@esbuild/freebsd-x64@npm:0.25.1" conditions: os=freebsd & cpu=x64 languageName: node linkType: hard @@ -2034,9 +2131,9 @@ __metadata: languageName: node linkType: hard -"@esbuild/linux-arm64@npm:0.24.0": - version: 0.24.0 - resolution: "@esbuild/linux-arm64@npm:0.24.0" +"@esbuild/linux-arm64@npm:0.25.1": + version: 0.25.1 + resolution: "@esbuild/linux-arm64@npm:0.25.1" conditions: os=linux & cpu=arm64 languageName: node linkType: hard @@ -2048,9 +2145,9 @@ __metadata: languageName: node linkType: hard -"@esbuild/linux-arm@npm:0.24.0": - version: 0.24.0 - resolution: "@esbuild/linux-arm@npm:0.24.0" +"@esbuild/linux-arm@npm:0.25.1": + version: 0.25.1 + resolution: "@esbuild/linux-arm@npm:0.25.1" conditions: os=linux & cpu=arm languageName: node linkType: hard @@ -2062,9 +2159,9 @@ __metadata: languageName: node linkType: hard -"@esbuild/linux-ia32@npm:0.24.0": - version: 0.24.0 - resolution: "@esbuild/linux-ia32@npm:0.24.0" +"@esbuild/linux-ia32@npm:0.25.1": + version: 0.25.1 + resolution: "@esbuild/linux-ia32@npm:0.25.1" conditions: os=linux & cpu=ia32 languageName: node linkType: hard @@ -2076,9 +2173,9 @@ __metadata: languageName: node linkType: hard -"@esbuild/linux-loong64@npm:0.24.0": - version: 0.24.0 - resolution: "@esbuild/linux-loong64@npm:0.24.0" +"@esbuild/linux-loong64@npm:0.25.1": + version: 0.25.1 + resolution: "@esbuild/linux-loong64@npm:0.25.1" conditions: os=linux & cpu=loong64 languageName: node linkType: hard @@ -2090,9 +2187,9 @@ __metadata: languageName: node linkType: hard -"@esbuild/linux-mips64el@npm:0.24.0": - version: 0.24.0 - resolution: "@esbuild/linux-mips64el@npm:0.24.0" +"@esbuild/linux-mips64el@npm:0.25.1": + version: 0.25.1 + resolution: "@esbuild/linux-mips64el@npm:0.25.1" conditions: os=linux & cpu=mips64el languageName: node linkType: hard @@ -2104,9 +2201,9 @@ __metadata: languageName: node linkType: hard -"@esbuild/linux-ppc64@npm:0.24.0": - version: 0.24.0 - resolution: "@esbuild/linux-ppc64@npm:0.24.0" +"@esbuild/linux-ppc64@npm:0.25.1": + version: 0.25.1 + resolution: "@esbuild/linux-ppc64@npm:0.25.1" conditions: os=linux & cpu=ppc64 languageName: node linkType: hard @@ -2118,9 +2215,9 @@ __metadata: languageName: node linkType: hard -"@esbuild/linux-riscv64@npm:0.24.0": - version: 0.24.0 - resolution: "@esbuild/linux-riscv64@npm:0.24.0" +"@esbuild/linux-riscv64@npm:0.25.1": + version: 0.25.1 + resolution: "@esbuild/linux-riscv64@npm:0.25.1" conditions: os=linux & cpu=riscv64 languageName: node linkType: hard @@ -2132,9 +2229,9 @@ __metadata: languageName: node linkType: hard -"@esbuild/linux-s390x@npm:0.24.0": - version: 0.24.0 - resolution: "@esbuild/linux-s390x@npm:0.24.0" +"@esbuild/linux-s390x@npm:0.25.1": + version: 0.25.1 + resolution: "@esbuild/linux-s390x@npm:0.25.1" conditions: os=linux & cpu=s390x languageName: node linkType: hard @@ -2146,13 +2243,20 @@ __metadata: languageName: node linkType: hard -"@esbuild/linux-x64@npm:0.24.0": - version: 0.24.0 - resolution: "@esbuild/linux-x64@npm:0.24.0" +"@esbuild/linux-x64@npm:0.25.1": + version: 0.25.1 + resolution: "@esbuild/linux-x64@npm:0.25.1" conditions: os=linux & cpu=x64 languageName: node linkType: hard +"@esbuild/netbsd-arm64@npm:0.25.1": + version: 0.25.1 + resolution: "@esbuild/netbsd-arm64@npm:0.25.1" + conditions: os=netbsd & cpu=arm64 + languageName: node + linkType: hard + "@esbuild/netbsd-x64@npm:0.21.5": version: 0.21.5 resolution: "@esbuild/netbsd-x64@npm:0.21.5" @@ -2160,16 +2264,16 @@ __metadata: languageName: node linkType: hard -"@esbuild/netbsd-x64@npm:0.24.0": - version: 0.24.0 - resolution: "@esbuild/netbsd-x64@npm:0.24.0" +"@esbuild/netbsd-x64@npm:0.25.1": + version: 0.25.1 + resolution: "@esbuild/netbsd-x64@npm:0.25.1" conditions: os=netbsd & cpu=x64 languageName: node linkType: hard -"@esbuild/openbsd-arm64@npm:0.24.0": - version: 0.24.0 - resolution: "@esbuild/openbsd-arm64@npm:0.24.0" +"@esbuild/openbsd-arm64@npm:0.25.1": + version: 0.25.1 + resolution: "@esbuild/openbsd-arm64@npm:0.25.1" conditions: os=openbsd & cpu=arm64 languageName: node linkType: hard @@ -2181,9 +2285,9 @@ __metadata: languageName: node linkType: hard -"@esbuild/openbsd-x64@npm:0.24.0": - version: 0.24.0 - resolution: "@esbuild/openbsd-x64@npm:0.24.0" +"@esbuild/openbsd-x64@npm:0.25.1": + version: 0.25.1 + resolution: "@esbuild/openbsd-x64@npm:0.25.1" conditions: os=openbsd & cpu=x64 languageName: node linkType: hard @@ -2195,9 +2299,9 @@ __metadata: languageName: node linkType: hard -"@esbuild/sunos-x64@npm:0.24.0": - version: 0.24.0 - resolution: "@esbuild/sunos-x64@npm:0.24.0" +"@esbuild/sunos-x64@npm:0.25.1": + version: 0.25.1 + resolution: "@esbuild/sunos-x64@npm:0.25.1" conditions: os=sunos & cpu=x64 languageName: node linkType: hard @@ -2209,9 +2313,9 @@ __metadata: languageName: node linkType: hard -"@esbuild/win32-arm64@npm:0.24.0": - version: 0.24.0 - resolution: "@esbuild/win32-arm64@npm:0.24.0" +"@esbuild/win32-arm64@npm:0.25.1": + version: 0.25.1 + resolution: "@esbuild/win32-arm64@npm:0.25.1" conditions: os=win32 & cpu=arm64 languageName: node linkType: hard @@ -2223,9 +2327,9 @@ __metadata: languageName: node linkType: hard -"@esbuild/win32-ia32@npm:0.24.0": - version: 0.24.0 - resolution: "@esbuild/win32-ia32@npm:0.24.0" +"@esbuild/win32-ia32@npm:0.25.1": + version: 0.25.1 + resolution: "@esbuild/win32-ia32@npm:0.25.1" conditions: os=win32 & cpu=ia32 languageName: node linkType: hard @@ -2237,9 +2341,9 @@ __metadata: languageName: node linkType: hard -"@esbuild/win32-x64@npm:0.24.0": - version: 0.24.0 - resolution: "@esbuild/win32-x64@npm:0.24.0" +"@esbuild/win32-x64@npm:0.25.1": + version: 0.25.1 + resolution: "@esbuild/win32-x64@npm:0.25.1" conditions: os=win32 & cpu=x64 languageName: node linkType: hard @@ -2279,10 +2383,10 @@ __metadata: languageName: node linkType: hard -"@eslint/js@npm:8.57.0": - version: 8.57.0 - resolution: "@eslint/js@npm:8.57.0" - checksum: 10c0/9a518bb8625ba3350613903a6d8c622352ab0c6557a59fe6ff6178bf882bf57123f9d92aa826ee8ac3ee74b9c6203fe630e9ee00efb03d753962dcf65ee4bd94 +"@eslint/js@npm:8.57.1": + version: 8.57.1 + resolution: "@eslint/js@npm:8.57.1" + checksum: 10c0/b489c474a3b5b54381c62e82b3f7f65f4b8a5eaaed126546520bf2fede5532a8ed53212919fed1e9048dcf7f37167c8561d58d0ba4492a4244004e7793805223 languageName: node linkType: hard @@ -2339,14 +2443,14 @@ __metadata: languageName: node linkType: hard -"@humanwhocodes/config-array@npm:^0.11.14": - version: 0.11.14 - resolution: "@humanwhocodes/config-array@npm:0.11.14" +"@humanwhocodes/config-array@npm:^0.13.0": + version: 0.13.0 + resolution: "@humanwhocodes/config-array@npm:0.13.0" dependencies: - "@humanwhocodes/object-schema": "npm:^2.0.2" + "@humanwhocodes/object-schema": "npm:^2.0.3" debug: "npm:^4.3.1" minimatch: "npm:^3.0.5" - checksum: 10c0/66f725b4ee5fdd8322c737cb5013e19fac72d4d69c8bf4b7feb192fcb83442b035b92186f8e9497c220e58b2d51a080f28a73f7899bc1ab288c3be172c467541 + checksum: 10c0/205c99e756b759f92e1f44a3dc6292b37db199beacba8f26c2165d4051fe73a4ae52fdcfd08ffa93e7e5cb63da7c88648f0e84e197d154bbbbe137b2e0dd332e languageName: node linkType: hard @@ -2357,7 +2461,7 @@ __metadata: languageName: node linkType: hard -"@humanwhocodes/object-schema@npm:^2.0.2": +"@humanwhocodes/object-schema@npm:^2.0.3": version: 2.0.3 resolution: "@humanwhocodes/object-schema@npm:2.0.3" checksum: 10c0/80520eabbfc2d32fe195a93557cef50dfe8c8905de447f022675aaf66abc33ae54098f5ea78548d925aa671cd4ab7c7daa5ad704fe42358c9b5e7db60f80696c @@ -2931,15 +3035,6 @@ __metadata: languageName: node linkType: hard -"@ljharb/through@npm:^2.3.13": - version: 2.3.13 - resolution: "@ljharb/through@npm:2.3.13" - dependencies: - call-bind: "npm:^1.0.7" - checksum: 10c0/fb60b2fb2c674a674d8ebdb8972ccf52f8a62a9c1f5a2ac42557bc0273231c65d642aa2d7627cbb300766a25ae4642acd0f95fba2f8a1ff891086f0cb15807c3 - languageName: node - linkType: hard - "@manypkg/find-root@npm:^1.1.0": version: 1.1.0 resolution: "@manypkg/find-root@npm:1.1.0" @@ -3084,32 +3179,32 @@ __metadata: languageName: node linkType: hard -"@nrwl/devkit@npm:19.8.2": - version: 19.8.2 - resolution: "@nrwl/devkit@npm:19.8.2" +"@nrwl/devkit@npm:19.8.14": + version: 19.8.14 + resolution: "@nrwl/devkit@npm:19.8.14" dependencies: - "@nx/devkit": "npm:19.8.2" - checksum: 10c0/031f0332788923370b6b41ebbd70a2a01daadeb7f39d5a5fa8894aad7a680baca610ee82e86b9c193e851ed8498e9b50c11795bd4bb3d6037ce18d1bde4cfac8 + "@nx/devkit": "npm:19.8.14" + checksum: 10c0/de398c1fbb53c4737ea3c8361a3c8a66442c24e3ec7fe366de66c5ede8009ff8975c037a3b6ba4784d3a223f0f4ee4f9b47faefa6ce1aa85c26822e7a17689da languageName: node linkType: hard -"@nrwl/tao@npm:19.8.2": - version: 19.8.2 - resolution: "@nrwl/tao@npm:19.8.2" +"@nrwl/tao@npm:19.8.14": + version: 19.8.14 + resolution: "@nrwl/tao@npm:19.8.14" dependencies: - nx: "npm:19.8.2" + nx: "npm:19.8.14" tslib: "npm:^2.3.0" bin: tao: index.js - checksum: 10c0/e85be912f2851750c012fed71c85f0362d466ff2752361ff0a8f91df275fb7d9d4499ba1083ffa28aabd6dcce2c225e704bdbe06f1a9b3f36b558dc31ffaa045 + checksum: 10c0/863a28ab4746f5999a8049d5b86e3d7412c17608135b84513f37997874611672b06c61c026b06cbaa12e37016986c90601d82e65efe34e828414c69b159c4457 languageName: node linkType: hard -"@nx/devkit@npm:19.8.2, @nx/devkit@npm:^19.8.2": - version: 19.8.2 - resolution: "@nx/devkit@npm:19.8.2" +"@nx/devkit@npm:19.8.14, @nx/devkit@npm:^19.8.14": + version: 19.8.14 + resolution: "@nx/devkit@npm:19.8.14" dependencies: - "@nrwl/devkit": "npm:19.8.2" + "@nrwl/devkit": "npm:19.8.14" ejs: "npm:^3.1.7" enquirer: "npm:~2.3.6" ignore: "npm:^5.0.4" @@ -3119,8 +3214,8 @@ __metadata: tslib: "npm:^2.3.0" yargs-parser: "npm:21.1.1" peerDependencies: - nx: ">= 17 <= 20" - checksum: 10c0/af26cce31e8e259a645d28bfb7399762001f25928eb004050dda96954827da6ceb58ac841a2815dc919f8c76bcc616c8a22acc7da5b91aa0b4a2ca5b3fdc5b12 + nx: ">= 19 <= 21" + checksum: 10c0/86de0ba41cd30c2c9ac20fa45d77e7f0f878d7df8423ac3905e6846211ae67b3f843987dec76e712e3e82c05af2e89fa6b1b9cab24675ab30221e678d05d1be7 languageName: node linkType: hard @@ -3142,72 +3237,72 @@ __metadata: languageName: node linkType: hard -"@nx/nx-darwin-arm64@npm:19.8.2": - version: 19.8.2 - resolution: "@nx/nx-darwin-arm64@npm:19.8.2" +"@nx/nx-darwin-arm64@npm:19.8.14": + version: 19.8.14 + resolution: "@nx/nx-darwin-arm64@npm:19.8.14" conditions: os=darwin & cpu=arm64 languageName: node linkType: hard -"@nx/nx-darwin-x64@npm:19.8.2": - version: 19.8.2 - resolution: "@nx/nx-darwin-x64@npm:19.8.2" +"@nx/nx-darwin-x64@npm:19.8.14": + version: 19.8.14 + resolution: "@nx/nx-darwin-x64@npm:19.8.14" conditions: os=darwin & cpu=x64 languageName: node linkType: hard -"@nx/nx-freebsd-x64@npm:19.8.2": - version: 19.8.2 - resolution: "@nx/nx-freebsd-x64@npm:19.8.2" +"@nx/nx-freebsd-x64@npm:19.8.14": + version: 19.8.14 + resolution: "@nx/nx-freebsd-x64@npm:19.8.14" conditions: os=freebsd & cpu=x64 languageName: node linkType: hard -"@nx/nx-linux-arm-gnueabihf@npm:19.8.2": - version: 19.8.2 - resolution: "@nx/nx-linux-arm-gnueabihf@npm:19.8.2" +"@nx/nx-linux-arm-gnueabihf@npm:19.8.14": + version: 19.8.14 + resolution: "@nx/nx-linux-arm-gnueabihf@npm:19.8.14" conditions: os=linux & cpu=arm languageName: node linkType: hard -"@nx/nx-linux-arm64-gnu@npm:19.8.2": - version: 19.8.2 - resolution: "@nx/nx-linux-arm64-gnu@npm:19.8.2" +"@nx/nx-linux-arm64-gnu@npm:19.8.14": + version: 19.8.14 + resolution: "@nx/nx-linux-arm64-gnu@npm:19.8.14" conditions: os=linux & cpu=arm64 & libc=glibc languageName: node linkType: hard -"@nx/nx-linux-arm64-musl@npm:19.8.2": - version: 19.8.2 - resolution: "@nx/nx-linux-arm64-musl@npm:19.8.2" +"@nx/nx-linux-arm64-musl@npm:19.8.14": + version: 19.8.14 + resolution: "@nx/nx-linux-arm64-musl@npm:19.8.14" conditions: os=linux & cpu=arm64 & libc=musl languageName: node linkType: hard -"@nx/nx-linux-x64-gnu@npm:19.8.2": - version: 19.8.2 - resolution: "@nx/nx-linux-x64-gnu@npm:19.8.2" +"@nx/nx-linux-x64-gnu@npm:19.8.14": + version: 19.8.14 + resolution: "@nx/nx-linux-x64-gnu@npm:19.8.14" conditions: os=linux & cpu=x64 & libc=glibc languageName: node linkType: hard -"@nx/nx-linux-x64-musl@npm:19.8.2": - version: 19.8.2 - resolution: "@nx/nx-linux-x64-musl@npm:19.8.2" +"@nx/nx-linux-x64-musl@npm:19.8.14": + version: 19.8.14 + resolution: "@nx/nx-linux-x64-musl@npm:19.8.14" conditions: os=linux & cpu=x64 & libc=musl languageName: node linkType: hard -"@nx/nx-win32-arm64-msvc@npm:19.8.2": - version: 19.8.2 - resolution: "@nx/nx-win32-arm64-msvc@npm:19.8.2" +"@nx/nx-win32-arm64-msvc@npm:19.8.14": + version: 19.8.14 + resolution: "@nx/nx-win32-arm64-msvc@npm:19.8.14" conditions: os=win32 & cpu=arm64 languageName: node linkType: hard -"@nx/nx-win32-x64-msvc@npm:19.8.2": - version: 19.8.2 - resolution: "@nx/nx-win32-x64-msvc@npm:19.8.2" +"@nx/nx-win32-x64-msvc@npm:19.8.14": + version: 19.8.14 + resolution: "@nx/nx-win32-x64-msvc@npm:19.8.14" conditions: os=win32 & cpu=x64 languageName: node linkType: hard @@ -3501,7 +3596,7 @@ __metadata: languageName: node linkType: hard -"@protobuf-ts/plugin-framework@npm:^2.0.7, @protobuf-ts/plugin-framework@npm:^2.9.4": +"@protobuf-ts/plugin-framework@npm:^2.9.4": version: 2.9.4 resolution: "@protobuf-ts/plugin-framework@npm:2.9.4" dependencies: @@ -4686,7 +4781,7 @@ __metadata: resolution: "@spectrum-css/generator@workspace:tools/generator" dependencies: fuzzy: "npm:^0.1.3" - inquirer: "npm:^9.2.23" + inquirer: "npm:^9.3.7" inquirer-autocomplete-prompt: "npm:^3.0.1" plop: "npm:^4.0.1" languageName: unknown @@ -5042,30 +5137,29 @@ __metadata: resolution: "@spectrum-css/preview@workspace:.storybook" dependencies: "@adobe/spectrum-css-workflow-icons": "npm:^1.5.4" - "@babel/core": "npm:^7.26.0" - "@chromatic-com/storybook": "npm:^3.2.3" + "@babel/core": "npm:^7.26.9" + "@chromatic-com/storybook": "npm:^3.2.5" "@etchteam/storybook-addon-status": "npm:^5.0.0" "@spectrum-css/bundle": "npm:1.0.1" "@spectrum-css/tokens": "npm:16.0.1" - "@spectrum-css/tokens-legacy": "npm:@spectrum-css/tokens@^15.0.0" "@spectrum-css/ui-icons": "npm:1.1.2" - "@storybook/addon-a11y": "npm:^8.4.7" - "@storybook/addon-actions": "npm:^8.4.7" - "@storybook/addon-designs": "npm:^8.0.4" - "@storybook/addon-docs": "npm:^8.4.7" - "@storybook/addon-essentials": "npm:^8.4.7" - "@storybook/addon-interactions": "npm:^8.4.7" - "@storybook/blocks": "npm:^8.4.7" - "@storybook/builder-vite": "npm:^8.4.7" - "@storybook/components": "npm:^8.4.7" - "@storybook/core-events": "npm:^8.4.7" - "@storybook/manager-api": "npm:^8.4.7" - "@storybook/preview-api": "npm:^8.4.7" - "@storybook/test-runner": "npm:^0.21.0" - "@storybook/theming": "npm:^8.4.7" - "@storybook/web-components-vite": "npm:^8.4.7" + "@storybook/addon-a11y": "npm:^8.6.4" + "@storybook/addon-actions": "npm:^8.6.4" + "@storybook/addon-designs": "npm:^8.2.1" + "@storybook/addon-docs": "npm:^8.6.4" + "@storybook/addon-essentials": "npm:^8.6.4" + "@storybook/addon-interactions": "npm:^8.6.4" + "@storybook/blocks": "npm:^8.6.4" + "@storybook/builder-vite": "npm:^8.6.4" + "@storybook/components": "npm:^8.6.4" + "@storybook/core-events": "npm:^8.6.4" + "@storybook/manager-api": "npm:^8.6.4" + "@storybook/preview-api": "npm:^8.6.4" + "@storybook/test-runner": "npm:^0.22.0" + "@storybook/theming": "npm:^8.6.4" + "@storybook/web-components-vite": "npm:^8.6.4" "@whitespace/storybook-addon-html": "npm:^6.1.1" - chromatic: "npm:^11.22.2" + chromatic: "npm:^11.27.0" lit: "npm:^3.2.1" lodash-es: "npm:^4.17.21" npm-registry-fetch: "npm:^18.0.2" @@ -5074,10 +5168,10 @@ __metadata: react: "npm:^18.3.1" react-dom: "npm:^18.3.1" react-syntax-highlighter: "npm:^15.6.1" - remark-gfm: "npm:^4.0.0" + remark-gfm: "npm:^4.0.1" rollup-plugin-postcss-lit: "npm:^2.1.0" - storybook: "npm:^8.4.7" - vite: "npm:^5.4.11" + storybook: "npm:^8.6.4" + vite: "npm:^5.4.14" languageName: unknown linkType: soft @@ -5482,18 +5576,11 @@ __metadata: languageName: unknown linkType: soft -"@spectrum-css/tokens-legacy@npm:@spectrum-css/tokens@^15.0.0": - version: 15.2.0 - resolution: "@spectrum-css/tokens@npm:15.2.0" - checksum: 10c0/dd8d1dd39fc72d57bc12e183b3fda7654a7ebf90902267e8c4145d54b09eecfc150f09c92ec837b6c501c0c9da573e2d9b0bc3745c7c8981c3a39ee03367fc24 - languageName: node - linkType: hard - "@spectrum-css/tokens@npm:16.0.1, @spectrum-css/tokens@workspace:tokens": version: 0.0.0-use.local resolution: "@spectrum-css/tokens@workspace:tokens" dependencies: - "@adobe/spectrum-tokens": "npm:0.0.0-s2-foundations-20241121221506" + "@adobe/spectrum-tokens": "npm:13.0.0-beta.57" "@adobe/token-diff-generator": "npm:^1.3.0" "@nxkit/style-dictionary": "npm:^6.0.0" "@spectrum-tools/postcss-rgb-mapping": "npm:1.1.0" @@ -5631,7 +5718,7 @@ __metadata: version: 0.0.0-use.local resolution: "@spectrum-tools/gh-action-file-diff@workspace:.github/actions/file-diff" dependencies: - "@actions/artifact": "npm:^2.2.1" + "@actions/artifact": "npm:^2.3.1" "@actions/core": "npm:^1.11.1" "@actions/github": "npm:^6.0.0" "@actions/glob": "npm:^0.5.0" @@ -5640,32 +5727,6 @@ __metadata: languageName: unknown linkType: soft -"@spectrum-tools/postcss-add-theming-layer@npm:1.0.2, @spectrum-tools/postcss-add-theming-layer@workspace:plugins/postcss-add-theming-layer": - version: 0.0.0-use.local - resolution: "@spectrum-tools/postcss-add-theming-layer@workspace:plugins/postcss-add-theming-layer" - dependencies: - ava: "npm:^6.2.0" - c8: "npm:^10.1.3" - postcss: "npm:^8.5.3" - postcss-selector-parser: "npm:^6.1.2" - postcss-values-parser: "npm:^6.0.2" - peerDependencies: - postcss: ">=8" - languageName: unknown - linkType: soft - -"@spectrum-tools/postcss-property-rollup@npm:0.0.1, @spectrum-tools/postcss-property-rollup@workspace:plugins/postcss-property-rollup": - version: 0.0.0-use.local - resolution: "@spectrum-tools/postcss-property-rollup@workspace:plugins/postcss-property-rollup" - dependencies: - ava: "npm:^6.2.0" - c8: "npm:^10.1.3" - postcss: "npm:^8.5.3" - peerDependencies: - postcss: ">=8" - 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" @@ -5723,34 +5784,22 @@ __metadata: languageName: unknown linkType: soft -"@spectrum-tools/stylelint-theme-alignment@workspace:plugins/stylelint-theme-alignment": - version: 0.0.0-use.local - resolution: "@spectrum-tools/stylelint-theme-alignment@workspace:plugins/stylelint-theme-alignment" - dependencies: - colors: "npm:^1.4.0" - postcss: "npm:^8.5.3" - postcss-values-parser: "npm:^6.0.2" - stylelint: "npm:^16.15.0" - peerDependencies: - stylelint: ">=16" - languageName: unknown - linkType: soft - -"@storybook/addon-a11y@npm:^8.4.7": - version: 8.4.7 - resolution: "@storybook/addon-a11y@npm:8.4.7" +"@storybook/addon-a11y@npm:^8.6.4": + version: 8.6.4 + resolution: "@storybook/addon-a11y@npm:8.6.4" dependencies: - "@storybook/addon-highlight": "npm:8.4.7" + "@storybook/addon-highlight": "npm:8.6.4" + "@storybook/test": "npm:8.6.4" axe-core: "npm:^4.2.0" peerDependencies: - storybook: ^8.4.7 - checksum: 10c0/d00c65b8e256dfc283774562e0ff3cabbd8b9f3fbe619eb23d2c9951d7b075cf29fe8bdb57d3f05756f649bee8b04dfbed6389e852632b40f748cb6c8bba8896 + storybook: ^8.6.4 + checksum: 10c0/949e060bae079175e002f52cf2f59b788549f866ab2635f6c121d75a3515a8c8faf1b019627edddad664ae1308c96e11a3786e4fe41d6d687523f335ab770362 languageName: node linkType: hard -"@storybook/addon-actions@npm:8.4.7, @storybook/addon-actions@npm:^8.4.7": - version: 8.4.7 - resolution: "@storybook/addon-actions@npm:8.4.7" +"@storybook/addon-actions@npm:8.6.4, @storybook/addon-actions@npm:^8.6.4": + version: 8.6.4 + resolution: "@storybook/addon-actions@npm:8.6.4" dependencies: "@storybook/global": "npm:^5.0.0" "@types/uuid": "npm:^9.0.1" @@ -5758,48 +5807,48 @@ __metadata: polished: "npm:^4.2.2" uuid: "npm:^9.0.0" peerDependencies: - storybook: ^8.4.7 - checksum: 10c0/411be60f358101291cbd4ff8e5ddbac58fa0583c95338b82b410dc030a73632b654eaf7004b421c7e309cf0bfa709c4f93728b943e1b59dcfff5a249686501c1 + storybook: ^8.6.4 + checksum: 10c0/4300b32a1936dbd41c66c2737d55bf5baeaac084ae3fde4145dea8d29255611cd1f52fe1979d3f12e6c9ba9aac81c181f8269eb9f9f6841e8d96d27c92148328 languageName: node linkType: hard -"@storybook/addon-backgrounds@npm:8.4.7": - version: 8.4.7 - resolution: "@storybook/addon-backgrounds@npm:8.4.7" +"@storybook/addon-backgrounds@npm:8.6.4": + version: 8.6.4 + resolution: "@storybook/addon-backgrounds@npm:8.6.4" dependencies: "@storybook/global": "npm:^5.0.0" memoizerific: "npm:^1.11.3" ts-dedent: "npm:^2.0.0" peerDependencies: - storybook: ^8.4.7 - checksum: 10c0/d22c4acd1d99f616865dde11c70b444a0aac7fe7623904479a29a0142b504f284ddc2407eacfd1203c3b0856e5497e7902eb86e287516364c7735b90e224bbcb + storybook: ^8.6.4 + checksum: 10c0/c15a4ac6ffe8449090c39714b594be1d120fca8dfef18763df91f261a9833482b51d63bac3c5b1a58b45c6d56f6e5d5681ff8e91e19d955539afe5db4d4b9d46 languageName: node linkType: hard -"@storybook/addon-controls@npm:8.4.7": - version: 8.4.7 - resolution: "@storybook/addon-controls@npm:8.4.7" +"@storybook/addon-controls@npm:8.6.4": + version: 8.6.4 + resolution: "@storybook/addon-controls@npm:8.6.4" dependencies: "@storybook/global": "npm:^5.0.0" dequal: "npm:^2.0.2" ts-dedent: "npm:^2.0.0" peerDependencies: - storybook: ^8.4.7 - checksum: 10c0/900c71d172e9f75a1c39a87de1d411890fcea012586be02e3293c705c500a3a62a2bdecb10c11ba9c9f6117706dfbc34aaa40d2ca8e8a9d7b8a6a739d6a73e0c + storybook: ^8.6.4 + checksum: 10c0/ac43704652ef43088390d76f5293efb00e9185a17dd68542c8d29b4aa20487f5c77d0e0c3dee4f7274a06cb776195b263a9b2466bd9c3d452faf464dadb79adf languageName: node linkType: hard -"@storybook/addon-designs@npm:^8.0.4": - version: 8.0.4 - resolution: "@storybook/addon-designs@npm:8.0.4" +"@storybook/addon-designs@npm:^8.2.1": + version: 8.2.1 + resolution: "@storybook/addon-designs@npm:8.2.1" dependencies: "@figspec/react": "npm:^1.0.0" peerDependencies: "@storybook/blocks": ^8.0.0 || ^8.1.0-0 || ^8.2.0-0 || ^8.3.0-0 || ^8.4.0-0 || ^8.5.0-0 || ^8.6.0-0 "@storybook/components": ^8.0.0 || ^8.1.0-0 || ^8.2.0-0 || ^8.3.0-0 || ^8.4.0-0 || ^8.5.0-0 || ^8.6.0-0 "@storybook/theming": ^8.0.0 || ^8.1.0-0 || ^8.2.0-0 || ^8.3.0-0 || ^8.4.0-0 || ^8.5.0-0 || ^8.6.0-0 - react: ^16.8.0 || ^17.0.0 || ^18.0.0 - react-dom: ^16.8.0 || ^17.0.0 || ^18.0.0 + react: ^16.8.0 || ^17.0.0 || ^18.0.0 || ^19.0.0-beta + react-dom: ^16.8.0 || ^17.0.0 || ^18.0.0 || ^19.0.0-beta peerDependenciesMeta: "@storybook/blocks": optional: true @@ -5811,177 +5860,176 @@ __metadata: optional: true react-dom: optional: true - checksum: 10c0/fcc2aaa901f159ac689f652f0f891170a011bcf1b9ea0a0b5106999c1d78faa093331f5a20cd4575bf87aca5faae98048e1d1c8300050270919848d7357df4af + checksum: 10c0/65d63fc7fd771e1af510f6f47f576aff6e48d38f235a817d311e509b374ab50e5c46603b3aa8fa657bf8db91685758595ede08341920be4c2558dc341e755102 languageName: node linkType: hard -"@storybook/addon-docs@npm:8.4.7, @storybook/addon-docs@npm:^8.4.7": - version: 8.4.7 - resolution: "@storybook/addon-docs@npm:8.4.7" +"@storybook/addon-docs@npm:8.6.4, @storybook/addon-docs@npm:^8.6.4": + version: 8.6.4 + resolution: "@storybook/addon-docs@npm:8.6.4" dependencies: "@mdx-js/react": "npm:^3.0.0" - "@storybook/blocks": "npm:8.4.7" - "@storybook/csf-plugin": "npm:8.4.7" - "@storybook/react-dom-shim": "npm:8.4.7" - react: "npm:^16.8.0 || ^17.0.0 || ^18.0.0" - react-dom: "npm:^16.8.0 || ^17.0.0 || ^18.0.0" + "@storybook/blocks": "npm:8.6.4" + "@storybook/csf-plugin": "npm:8.6.4" + "@storybook/react-dom-shim": "npm:8.6.4" + react: "npm:^16.8.0 || ^17.0.0 || ^18.0.0 || ^19.0.0" + react-dom: "npm:^16.8.0 || ^17.0.0 || ^18.0.0 || ^19.0.0" ts-dedent: "npm:^2.0.0" peerDependencies: - storybook: ^8.4.7 - checksum: 10c0/0eb1854ddb6dbef1b32f89746944ee7a16db986403fe0a3712f43d39faa6335e0bce4ac21a8c20d09955ae73cccd1962f3b45037ab1144f61c1317d686e8695f + storybook: ^8.6.4 + checksum: 10c0/28e731442052f1c2cf0fa3c4cefeade7ba671bc3a5083425f44d3663e3c3c420fb20d84e9c20966f559d8b2deb78f66bc0af7677c10e72337c3ebc3ddcf6ee9b languageName: node linkType: hard -"@storybook/addon-essentials@npm:^8.4.7": - version: 8.4.7 - resolution: "@storybook/addon-essentials@npm:8.4.7" +"@storybook/addon-essentials@npm:^8.6.4": + version: 8.6.4 + resolution: "@storybook/addon-essentials@npm:8.6.4" dependencies: - "@storybook/addon-actions": "npm:8.4.7" - "@storybook/addon-backgrounds": "npm:8.4.7" - "@storybook/addon-controls": "npm:8.4.7" - "@storybook/addon-docs": "npm:8.4.7" - "@storybook/addon-highlight": "npm:8.4.7" - "@storybook/addon-measure": "npm:8.4.7" - "@storybook/addon-outline": "npm:8.4.7" - "@storybook/addon-toolbars": "npm:8.4.7" - "@storybook/addon-viewport": "npm:8.4.7" + "@storybook/addon-actions": "npm:8.6.4" + "@storybook/addon-backgrounds": "npm:8.6.4" + "@storybook/addon-controls": "npm:8.6.4" + "@storybook/addon-docs": "npm:8.6.4" + "@storybook/addon-highlight": "npm:8.6.4" + "@storybook/addon-measure": "npm:8.6.4" + "@storybook/addon-outline": "npm:8.6.4" + "@storybook/addon-toolbars": "npm:8.6.4" + "@storybook/addon-viewport": "npm:8.6.4" ts-dedent: "npm:^2.0.0" peerDependencies: - storybook: ^8.4.7 - checksum: 10c0/82ddd8424dfd5bf0ef44cee6a320f8395c63678bc0d4566307b2c68bd83c39f6bd447fb421681e3ab581c35c9d991207b01bebf20269c083931f581bb4651d6d + storybook: ^8.6.4 + checksum: 10c0/9669c42d5ae5a78d590f519dad4fd81ca699914fbe8f4867f289d2b3059bc68bf6767a43dde985343fa44dbd714779c955562f2bd228f19da84d4fa7489ce8d9 languageName: node linkType: hard -"@storybook/addon-highlight@npm:8.4.7": - version: 8.4.7 - resolution: "@storybook/addon-highlight@npm:8.4.7" +"@storybook/addon-highlight@npm:8.6.4": + version: 8.6.4 + resolution: "@storybook/addon-highlight@npm:8.6.4" dependencies: "@storybook/global": "npm:^5.0.0" peerDependencies: - storybook: ^8.4.7 - checksum: 10c0/2256b880d1f83c86c64287988bd4f4b76a8e1990f2a2a080a322994a9a8e553013fc21b7503c218ec394a880c1b72b131975e6eeadec6accb7eb35d3cb85a6ce + storybook: ^8.6.4 + checksum: 10c0/81924e016e5b25d6c4cab18f93932824e2f876f810c7be8298f0f40f7347af200c25c464484e4dff3f5ad70554d00804fa0fbd87830be34bde288b77a02bdf1c languageName: node linkType: hard -"@storybook/addon-interactions@npm:^8.4.7": - version: 8.4.7 - resolution: "@storybook/addon-interactions@npm:8.4.7" +"@storybook/addon-interactions@npm:^8.6.4": + version: 8.6.4 + resolution: "@storybook/addon-interactions@npm:8.6.4" dependencies: "@storybook/global": "npm:^5.0.0" - "@storybook/instrumenter": "npm:8.4.7" - "@storybook/test": "npm:8.4.7" + "@storybook/instrumenter": "npm:8.6.4" + "@storybook/test": "npm:8.6.4" polished: "npm:^4.2.2" ts-dedent: "npm:^2.2.0" peerDependencies: - storybook: ^8.4.7 - checksum: 10c0/5c35d2f33122f053568a746c36eb99eb1764ee990146ea374b0fc01defd3f0b33674d2758c027c760fe2966f8683193e8c414089c07e1136ffc562e3346ce479 + storybook: ^8.6.4 + checksum: 10c0/3f86d031f3bff678041b20ddac9dd51625e9af92d04087c00c570254d2f54639c803647718cd5770d1ef1fff07c8da9adb5506c539bad3b1bcd50e3d03343b8c languageName: node linkType: hard -"@storybook/addon-measure@npm:8.4.7": - version: 8.4.7 - resolution: "@storybook/addon-measure@npm:8.4.7" +"@storybook/addon-measure@npm:8.6.4": + version: 8.6.4 + resolution: "@storybook/addon-measure@npm:8.6.4" dependencies: "@storybook/global": "npm:^5.0.0" tiny-invariant: "npm:^1.3.1" peerDependencies: - storybook: ^8.4.7 - checksum: 10c0/a9e87c91cbcade2d0059cdc471e8ba479ad6d9dee0c2558c3b706e37d58b4cb3d986924ea0ff623aa791300ee2a8d2429e8fb3ef32eeec9d49861f8677815ac2 + storybook: ^8.6.4 + checksum: 10c0/1416344adbfa487b1641e0c5d58d78b944a7727bcac7e99754d83c3f50f97b445858e4e40108cacb19559cb257195876a81587498459d76ac9ef164fee2c9e12 languageName: node linkType: hard -"@storybook/addon-outline@npm:8.4.7": - version: 8.4.7 - resolution: "@storybook/addon-outline@npm:8.4.7" +"@storybook/addon-outline@npm:8.6.4": + version: 8.6.4 + resolution: "@storybook/addon-outline@npm:8.6.4" dependencies: "@storybook/global": "npm:^5.0.0" ts-dedent: "npm:^2.0.0" peerDependencies: - storybook: ^8.4.7 - checksum: 10c0/13e8579ad1e9c8e338a66935331764351d9681e177469c7be72bc8383d6ab0441a783b2089ac3a730979d9a97c347800a47769b1f1ab5b4dfd7fc31f29e1709f + storybook: ^8.6.4 + checksum: 10c0/733d4cc076765f717b1fb75248e6dc5cf205ea842c6b8a960278edfb25854508646af68de8b21d2e1bfb9732e20019f66540db450aa80a4a8cde3f346fe643de languageName: node linkType: hard -"@storybook/addon-toolbars@npm:8.4.7": - version: 8.4.7 - resolution: "@storybook/addon-toolbars@npm:8.4.7" +"@storybook/addon-toolbars@npm:8.6.4": + version: 8.6.4 + resolution: "@storybook/addon-toolbars@npm:8.6.4" peerDependencies: - storybook: ^8.4.7 - checksum: 10c0/1c315d5ad07291f35ad780ef69fbd6570a582c008ab911cf14bff84061546b9ea1373d1127213844652d73a47c3011d28c1ad08d465fc120969c133dabfe7638 + storybook: ^8.6.4 + checksum: 10c0/ee29365ef3170fa411a96527f253a6146f94066346aa07e0899b6e53b7cb1c4eaf03d55329872f7761b35c24dbef25b0191eefbea5740548fc24db1bee3b0017 languageName: node linkType: hard -"@storybook/addon-viewport@npm:8.4.7": - version: 8.4.7 - resolution: "@storybook/addon-viewport@npm:8.4.7" +"@storybook/addon-viewport@npm:8.6.4": + version: 8.6.4 + resolution: "@storybook/addon-viewport@npm:8.6.4" dependencies: memoizerific: "npm:^1.11.3" peerDependencies: - storybook: ^8.4.7 - checksum: 10c0/4dec3b59be1f3b99d3c9eaab695a7e346d975b772f6691f8286005d78a13a204c5680c6c8733ae83060c7639b56efed9f3580cee7413834ac6595b56345183ef + storybook: ^8.6.4 + checksum: 10c0/e1e9cb5a7e2114a0ca4d6ef158b51a15e9a0e1a424aec33347f2a4618bbbefdba614e8211fe100f32d3df5986b4e25093c714561ffae2811353f5ad26b3916b7 languageName: node linkType: hard -"@storybook/blocks@npm:8.4.7, @storybook/blocks@npm:^8.4.7": - version: 8.4.7 - resolution: "@storybook/blocks@npm:8.4.7" +"@storybook/blocks@npm:8.6.4, @storybook/blocks@npm:^8.6.4": + version: 8.6.4 + resolution: "@storybook/blocks@npm:8.6.4" dependencies: - "@storybook/csf": "npm:^0.1.11" "@storybook/icons": "npm:^1.2.12" ts-dedent: "npm:^2.0.0" peerDependencies: - react: ^16.8.0 || ^17.0.0 || ^18.0.0 || ^19.0.0-beta - react-dom: ^16.8.0 || ^17.0.0 || ^18.0.0 || ^19.0.0-beta - storybook: ^8.4.7 + react: ^16.8.0 || ^17.0.0 || ^18.0.0 || ^19.0.0 + react-dom: ^16.8.0 || ^17.0.0 || ^18.0.0 || ^19.0.0 + storybook: ^8.6.4 peerDependenciesMeta: react: optional: true react-dom: optional: true - checksum: 10c0/1cb87811f9c7bad087dca752fb0d6483c237cb5776abea59cb555d8fce9ca14f4d5487725f5d8679a49f7e3f38bbe84189703498a31f2a9aa306f9fb3c8e65c8 + checksum: 10c0/7b44ecf075108ad5d04708ca748e7e357d9e22c981765951a7964a1691102c6be06437410efe53edff7ab777328d63b597f4b3e721aced1daf0b0452ab3b5e13 languageName: node linkType: hard -"@storybook/builder-vite@npm:8.4.7, @storybook/builder-vite@npm:^8.4.7": - version: 8.4.7 - resolution: "@storybook/builder-vite@npm:8.4.7" +"@storybook/builder-vite@npm:8.6.4, @storybook/builder-vite@npm:^8.6.4": + version: 8.6.4 + resolution: "@storybook/builder-vite@npm:8.6.4" dependencies: - "@storybook/csf-plugin": "npm:8.4.7" + "@storybook/csf-plugin": "npm:8.6.4" browser-assert: "npm:^1.2.1" ts-dedent: "npm:^2.0.0" peerDependencies: - storybook: ^8.4.7 + storybook: ^8.6.4 vite: ^4.0.0 || ^5.0.0 || ^6.0.0 - checksum: 10c0/138651b9042356972580a121eb3116c745f9fbc8b188ae0a5e543070dc54fcb6c1f14d35bc0cd1294ee763993a5f0e3a30cbe92508e74d183fed04a4d4125591 + checksum: 10c0/a1a32ba299d53c806a49ce522730b550faa92cf9c9541b7cf5b6b2a521c7cb83108ddfefe9412203aeebf7605efe4ea4979f5ef5f09877e2fb8a1d03ccbd6663 languageName: node linkType: hard -"@storybook/components@npm:8.4.7, @storybook/components@npm:^8.4.7": - version: 8.4.7 - resolution: "@storybook/components@npm:8.4.7" +"@storybook/components@npm:8.6.4, @storybook/components@npm:^8.6.4": + version: 8.6.4 + resolution: "@storybook/components@npm:8.6.4" peerDependencies: storybook: ^8.2.0 || ^8.3.0-0 || ^8.4.0-0 || ^8.5.0-0 || ^8.6.0-0 - checksum: 10c0/7c1eb12fe2310a306f3c2f77a499c3a0caeb4694d4af8dde418f3b2d2ac8a3549b3f56cdc4629b9c15d79177c72e8668dd781a71bf257948f799b0e9cba201fa + checksum: 10c0/7834df70dcf9044e7ccf4ee8d02577a671bf1411d23469e0bc9bdf78387bfbea237c20c8e83dac08e0aa4b52bb44911d46ba381dab45192838ae18138fca3991 languageName: node linkType: hard -"@storybook/core-events@npm:^8.4.7": - version: 8.4.7 - resolution: "@storybook/core-events@npm:8.4.7" +"@storybook/core-events@npm:^8.6.4": + version: 8.6.4 + resolution: "@storybook/core-events@npm:8.6.4" peerDependencies: storybook: ^8.2.0 || ^8.3.0-0 || ^8.4.0-0 || ^8.5.0-0 || ^8.6.0-0 - checksum: 10c0/3e8267a5bb6aa8cd3fcbf81a5fead96e6e0416568518a966e90b2409b998e7c49d87cd97e928be43cc9e978784f5474d19cc71c707937adf712db390784f4f05 + checksum: 10c0/3d298c74f889f45f8dd8f9e41c5b07d84cc98c3f754ba46268334b5b63f08336f519a12d26ee48397a9a9cfa87bcdd1bb8edcb38efcd4d1a372678bcd835dafa languageName: node linkType: hard -"@storybook/core@npm:8.4.7": - version: 8.4.7 - resolution: "@storybook/core@npm:8.4.7" +"@storybook/core@npm:8.6.4": + version: 8.6.4 + resolution: "@storybook/core@npm:8.6.4" dependencies: - "@storybook/csf": "npm:^0.1.11" + "@storybook/theming": "npm:8.6.4" better-opn: "npm:^3.0.2" browser-assert: "npm:^1.2.1" - esbuild: "npm:^0.18.0 || ^0.19.0 || ^0.20.0 || ^0.21.0 || ^0.22.0 || ^0.23.0 || ^0.24.0" + esbuild: "npm:^0.18.0 || ^0.19.0 || ^0.20.0 || ^0.21.0 || ^0.22.0 || ^0.23.0 || ^0.24.0 || ^0.25.0" esbuild-register: "npm:^3.5.0" jsdoc-type-pratt-parser: "npm:^4.0.0" process: "npm:^0.11.10" @@ -5994,18 +6042,18 @@ __metadata: peerDependenciesMeta: prettier: optional: true - checksum: 10c0/0943ea7cd092739834ae4347cb46c66aa1c238ee9494af60345364f11568ee60d6290875a593808cd7aeb79715ae27365c2448e6ae5c644e316cd194af184755 + checksum: 10c0/6cafc0010006041faef1bc23c78aec7ffea475c4c0a5e64d9bbba0b49d5facae80b52d553ba6ba9723684358ee5e72c9cbc7a47e1a48fd1d172de2863a5d3845 languageName: node linkType: hard -"@storybook/csf-plugin@npm:8.4.7": - version: 8.4.7 - resolution: "@storybook/csf-plugin@npm:8.4.7" +"@storybook/csf-plugin@npm:8.6.4": + version: 8.6.4 + resolution: "@storybook/csf-plugin@npm:8.6.4" dependencies: unplugin: "npm:^1.3.1" peerDependencies: - storybook: ^8.4.7 - checksum: 10c0/da38e2422e474e323e237e569b3dd678af77d975a4a08fa36108e66c9228858e510246628e18b013bd859a4e674c1a3d0072952a71dac0d7058e03e7c3417b3f + storybook: ^8.6.4 + checksum: 10c0/d2c53e68ee2ccc02ef77dcf1cb4f68f455f1228b9c268042b3bd647fe563853fa60c784f7bff51244122dd89313faaa0d3f8684f5729f2f7718812df53f2efd1 languageName: node linkType: hard @@ -6035,50 +6083,50 @@ __metadata: languageName: node linkType: hard -"@storybook/instrumenter@npm:8.4.7": - version: 8.4.7 - resolution: "@storybook/instrumenter@npm:8.4.7" +"@storybook/instrumenter@npm:8.6.4": + version: 8.6.4 + resolution: "@storybook/instrumenter@npm:8.6.4" dependencies: "@storybook/global": "npm:^5.0.0" "@vitest/utils": "npm:^2.1.1" peerDependencies: - storybook: ^8.4.7 - checksum: 10c0/bc0865fed7f3c8242cd97978257e3d48f1880ad01e9794cc45122c4bcc7cf4a498c6ff8deebffcc70332b4a096e98b00e695ac152e40d0ef2c23160009c86f5d + storybook: ^8.6.4 + checksum: 10c0/f6976c5fe5cbee0ade029e1c367c875b782c61887408ae0f05917c664137dc403f963b61087f5272988406c2c3e4bbb53df6b0c2f8c788d3af8b57784c132998 languageName: node linkType: hard -"@storybook/manager-api@npm:8.4.7, @storybook/manager-api@npm:^8.4.7": - version: 8.4.7 - resolution: "@storybook/manager-api@npm:8.4.7" +"@storybook/manager-api@npm:8.6.4, @storybook/manager-api@npm:^8.6.4": + version: 8.6.4 + resolution: "@storybook/manager-api@npm:8.6.4" peerDependencies: storybook: ^8.2.0 || ^8.3.0-0 || ^8.4.0-0 || ^8.5.0-0 || ^8.6.0-0 - checksum: 10c0/a3aeed441a2cca1a8fac73336a853b389a00a1e7dbbbbcd54492a90f2f12f86e976235fd1272f27a606532fb7e0f82dec3f7ecd1f2b87b03ffa74b667830152a + checksum: 10c0/de9829bcf25c5a8de2b9107811819b8b0fda57b2f2f5a3795078b91ee3ea5cc6401fb19a8f6aec58508b971781fce3fbe620adc54832859e29b554461a3be946 languageName: node linkType: hard -"@storybook/preview-api@npm:8.4.7, @storybook/preview-api@npm:^8.4.7": - version: 8.4.7 - resolution: "@storybook/preview-api@npm:8.4.7" +"@storybook/preview-api@npm:8.6.4, @storybook/preview-api@npm:^8.6.4": + version: 8.6.4 + resolution: "@storybook/preview-api@npm:8.6.4" peerDependencies: storybook: ^8.2.0 || ^8.3.0-0 || ^8.4.0-0 || ^8.5.0-0 || ^8.6.0-0 - checksum: 10c0/86e8dd8e46b20a4cab99655ded093a76ae5a2b2b9ab03af57292022c8143d76e0f76a137f8768b8f6847fd1b522abf3dee8504f0ba5ff16b5779120d3875967c + checksum: 10c0/b2973c20ea6d16e3efa8eacbb4c636afea9d2ba0a2a8d86d4e97e419e92dbc93cea68b4d3755cebfcb90a9f6f65e1163bfc4e4fdd31c7f688d9e3bfe8c3d1cd1 languageName: node linkType: hard -"@storybook/react-dom-shim@npm:8.4.7": - version: 8.4.7 - resolution: "@storybook/react-dom-shim@npm:8.4.7" +"@storybook/react-dom-shim@npm:8.6.4": + version: 8.6.4 + resolution: "@storybook/react-dom-shim@npm:8.6.4" peerDependencies: react: ^16.8.0 || ^17.0.0 || ^18.0.0 || ^19.0.0-beta react-dom: ^16.8.0 || ^17.0.0 || ^18.0.0 || ^19.0.0-beta - storybook: ^8.4.7 - checksum: 10c0/5db1306c844a36264587836860d17f3fd44e5981a2417e66ccb0699d2b05364736f29df2ebc605ae19a7f7b9b9d6a19845771c3052b167ce27702e20337cd334 + storybook: ^8.6.4 + checksum: 10c0/240e6285da80a827917b77502a5fac6229ad0204f92cd2ce98d6792f5b62dfefaa2bf0450bd4cac327b470e97a19d988587e3ad59b9bafdc76eec6ccceca351c languageName: node linkType: hard -"@storybook/test-runner@npm:^0.21.0": - version: 0.21.0 - resolution: "@storybook/test-runner@npm:0.21.0" +"@storybook/test-runner@npm:^0.22.0": + version: 0.22.0 + resolution: "@storybook/test-runner@npm:0.22.0" dependencies: "@babel/core": "npm:^7.22.5" "@babel/generator": "npm:^7.22.5" @@ -6100,68 +6148,67 @@ __metadata: nyc: "npm:^15.1.0" playwright: "npm:^1.14.0" peerDependencies: - storybook: ^8.2.0 || ^8.3.0-0 || ^8.4.0-0 || ^8.5.0-0 || ^8.6.0-0 + storybook: ^0.0.0-0 || ^8.2.0 || ^8.3.0-0 || ^8.4.0-0 || ^8.5.0-0 || ^8.6.0-0 || ^9.0.0-0 bin: test-storybook: dist/test-storybook.js - checksum: 10c0/376d9dee64547171407947fd0ee7042bf94152af6b45475917d3a7df2a23a89d46212afdaf946217328b2e6f1c1cf9dc921829cb64e197c50061573707cfafe8 + checksum: 10c0/f644ee495298e013f85f57643afbcbd26fe6579890aeb2e7e28a06f1a488e3dbbaf01473a3d961e75c5b9b341a484895eb464cd1b5781abdc6db8dd796eabafd languageName: node linkType: hard -"@storybook/test@npm:8.4.7": - version: 8.4.7 - resolution: "@storybook/test@npm:8.4.7" +"@storybook/test@npm:8.6.4": + version: 8.6.4 + resolution: "@storybook/test@npm:8.6.4" dependencies: - "@storybook/csf": "npm:^0.1.11" "@storybook/global": "npm:^5.0.0" - "@storybook/instrumenter": "npm:8.4.7" + "@storybook/instrumenter": "npm:8.6.4" "@testing-library/dom": "npm:10.4.0" "@testing-library/jest-dom": "npm:6.5.0" "@testing-library/user-event": "npm:14.5.2" "@vitest/expect": "npm:2.0.5" "@vitest/spy": "npm:2.0.5" peerDependencies: - storybook: ^8.4.7 - checksum: 10c0/4b100eacdca6d016a08358b1bf4c17f36450dffc9005557e0184814e546e71d200afccfb652fd2d45404fbd15e75f61fb4b93d869694249769ca919a0a2111f1 + storybook: ^8.6.4 + checksum: 10c0/b4d80c0601444c2817d0da858b61f256d61e7781b9c46111e59c96e4791cc90161cd7719fc211a2e3c446163d7494af09afbd0da3c102ee0c06741fa3fabd6aa languageName: node linkType: hard -"@storybook/theming@npm:8.4.7, @storybook/theming@npm:^8.4.7": - version: 8.4.7 - resolution: "@storybook/theming@npm:8.4.7" +"@storybook/theming@npm:8.6.4, @storybook/theming@npm:^8.6.4": + version: 8.6.4 + resolution: "@storybook/theming@npm:8.6.4" peerDependencies: storybook: ^8.2.0 || ^8.3.0-0 || ^8.4.0-0 || ^8.5.0-0 || ^8.6.0-0 - checksum: 10c0/20a4975478063cea616ce6ab6b1e9ec181af1424280678ed74dc5afc15b828c043e843696a1643601331c4fd266169ec4bcc5bb43fd2f1f3c01c0e21443a658a + checksum: 10c0/4d69b36a1167679aa0cac0e7ef0ec76b69df31dbd4286ed04d01638deac14a02791124ae855e809f5cda57f130816b20a9a665db67e0e33026206c30dd26f10c languageName: node linkType: hard -"@storybook/web-components-vite@npm:^8.4.7": - version: 8.4.7 - resolution: "@storybook/web-components-vite@npm:8.4.7" +"@storybook/web-components-vite@npm:^8.6.4": + version: 8.6.4 + resolution: "@storybook/web-components-vite@npm:8.6.4" dependencies: - "@storybook/builder-vite": "npm:8.4.7" - "@storybook/web-components": "npm:8.4.7" + "@storybook/builder-vite": "npm:8.6.4" + "@storybook/web-components": "npm:8.6.4" magic-string: "npm:^0.30.0" peerDependencies: - storybook: ^8.4.7 - checksum: 10c0/c3dbe86cf132cc3d6a18dc85a6679e1077a246297fc1cba22f5082401b85a359b91ef8efd6e5efc59adac2841a02508263072e40fcf7f2ff6987dec45b47711a + storybook: ^8.6.4 + checksum: 10c0/fb5b23ac3c92e4d52d6ea413b76185aa63e5aa52f3b61ddd67098692df37638a104f6a4399ba05644052c146a88732afb2e98aa21b7cf5de60e2732d5df6910e languageName: node linkType: hard -"@storybook/web-components@npm:8.4.7": - version: 8.4.7 - resolution: "@storybook/web-components@npm:8.4.7" +"@storybook/web-components@npm:8.6.4": + version: 8.6.4 + resolution: "@storybook/web-components@npm:8.6.4" dependencies: - "@storybook/components": "npm:8.4.7" + "@storybook/components": "npm:8.6.4" "@storybook/global": "npm:^5.0.0" - "@storybook/manager-api": "npm:8.4.7" - "@storybook/preview-api": "npm:8.4.7" - "@storybook/theming": "npm:8.4.7" + "@storybook/manager-api": "npm:8.6.4" + "@storybook/preview-api": "npm:8.6.4" + "@storybook/theming": "npm:8.6.4" tiny-invariant: "npm:^1.3.1" ts-dedent: "npm:^2.0.0" peerDependencies: lit: ^2.0.0 || ^3.0.0 - storybook: ^8.4.7 - checksum: 10c0/a5e922a250ac142d9e265ad31a4543433af757fcdf1d3f9ccc2c9a1225eb8b80dbd23833bd7da2b30d0e2862ac0411253383d50c4adedda3c24d33c35903c4a2 + storybook: ^8.6.4 + checksum: 10c0/c98ab3427311751a238330085252d9c34b6bbaf533dc8efeb034b8faae5fb47ac9f3a4656fb9d006fd9c50c6e3d961f6164b6b2de3982700a7c7a8365bbfe411 languageName: node linkType: hard @@ -6777,12 +6824,12 @@ __metadata: languageName: node linkType: hard -"@yarnpkg/types@npm:^4.0.0": - version: 4.0.0 - resolution: "@yarnpkg/types@npm:4.0.0" +"@yarnpkg/types@npm:^4.0.1": + version: 4.0.1 + resolution: "@yarnpkg/types@npm:4.0.1" dependencies: tslib: "npm:^2.4.0" - checksum: 10c0/41f67a4aa5c414c1e228f51453451fa15e0dd70c5cf2b1ae1ca142a3f018f25e4a37e60372cd0f5970c755e1804a2e31e208bff427add1cf13f899b0b9adc1e0 + checksum: 10c0/90226789475680ba599833571dd76c0718dd5b4c5022481263ef309d6a628f6246671cd6ca86e49c966ddefa7aca6ccef82240dc1476d2cea702ea5bee2a6b72 languageName: node linkType: hard @@ -8175,7 +8222,7 @@ __metadata: languageName: node linkType: hard -"chalk@npm:^5.2.0, chalk@npm:~5.4.1": +"chalk@npm:^5.2.0, chalk@npm:^5.4.1": version: 5.4.1 resolution: "chalk@npm:5.4.1" checksum: 10c0/b23e88132c702f4855ca6d25cb5538b1114343e41472d5263ee8a37cccfccd9c4216d111e1097c6a27830407a1dc81fecdf2a56f2c63033d4dbbd88c10b0dcef @@ -8388,9 +8435,9 @@ __metadata: languageName: node linkType: hard -"chromatic@npm:^11.22.2": - version: 11.22.2 - resolution: "chromatic@npm:11.22.2" +"chromatic@npm:^11.27.0": + version: 11.27.0 + resolution: "chromatic@npm:11.27.0" peerDependencies: "@chromatic-com/cypress": ^0.*.* || ^1.0.0 "@chromatic-com/playwright": ^0.*.* || ^1.0.0 @@ -8403,7 +8450,7 @@ __metadata: chroma: dist/bin.js chromatic: dist/bin.js chromatic-cli: dist/bin.js - checksum: 10c0/29b9afa333e83a1e04434030a948cb175c22de8b5908915d0507644aeaa3a5fe127ef7e5d0da6c53f48cc3d3d615325ff53da09cc471567b48187bf6336a68f9 + checksum: 10c0/500c1a522a48b3ef9188d63693b2602128b4cd7b2b96e5cb5412cdc0e3b7ac2a33c30d8f55f7662de4111e1c7c70bcb970e86782700e02580881400bdd10419b languageName: node linkType: hard @@ -8673,7 +8720,7 @@ __metadata: languageName: node linkType: hard -"commander@npm:, commander@npm:^12.1.0, commander@npm:~12.1.0": +"commander@npm:, commander@npm:^12.1.0": version: 12.1.0 resolution: "commander@npm:12.1.0" checksum: 10c0/6e1996680c083b3b897bfc1cfe1c58dfbcd9842fd43e1aaf8a795fbc237f65efcc860a3ef457b318e73f29a4f4a28f6403c3d653d021d960e4632dd45bde54a9 @@ -8687,6 +8734,13 @@ __metadata: languageName: node linkType: hard +"commander@npm:^13.1.0, commander@npm:~13.1.0": + version: 13.1.0 + resolution: "commander@npm:13.1.0" + checksum: 10c0/7b8c5544bba704fbe84b7cab2e043df8586d5c114a4c5b607f83ae5060708940ed0b5bd5838cf8ce27539cde265c1cbd59ce3c8c6b017ed3eec8943e3a415164 + languageName: node + linkType: hard + "commander@npm:^2.14.1": version: 2.20.3 resolution: "commander@npm:2.20.3" @@ -8708,13 +8762,6 @@ __metadata: languageName: node linkType: hard -"commander@npm:^6.1.0": - version: 6.2.1 - resolution: "commander@npm:6.2.1" - checksum: 10c0/85748abd9d18c8bc88febed58b98f66b7c591d9b5017cad459565761d7b29ca13b7783ea2ee5ce84bf235897333706c4ce29adf1ce15c8252780e7000e2ce9ea - languageName: node - linkType: hard - "commander@npm:^7.2.0": version: 7.2.0 resolution: "commander@npm:7.2.0" @@ -8729,13 +8776,6 @@ __metadata: languageName: node linkType: hard -"commander@npm:~13.1.0": - version: 13.1.0 - resolution: "commander@npm:13.1.0" - checksum: 10c0/7b8c5544bba704fbe84b7cab2e043df8586d5c114a4c5b607f83ae5060708940ed0b5bd5838cf8ce27539cde265c1cbd59ce3c8c6b017ed3eec8943e3a415164 - languageName: node - linkType: hard - "commander@npm:~2.13.0": version: 2.13.0 resolution: "commander@npm:2.13.0" @@ -9364,7 +9404,7 @@ __metadata: languageName: node linkType: hard -"debug@npm:^4.0.0, debug@npm:^4.1.1, debug@npm:^4.3.7, debug@npm:~4.4.0": +"debug@npm:^4.0.0, debug@npm:^4.1.1, debug@npm:^4.3.7, debug@npm:^4.4.0": version: 4.4.0 resolution: "debug@npm:4.4.0" dependencies: @@ -9782,18 +9822,6 @@ __metadata: languageName: node linkType: hard -"dot-object@npm:^2.1.4": - version: 2.1.5 - resolution: "dot-object@npm:2.1.5" - dependencies: - commander: "npm:^6.1.0" - glob: "npm:^7.1.6" - bin: - dot-object: bin/dot-object - checksum: 10c0/5a9cc1ec156bb3d1363b76946bb84ac062317ceffab52aecb6a751eb13cf2387dbf09fcbe243e4bf16dc47b7531331b25de604729daa5e6bbf105a8ce87418f2 - languageName: node - linkType: hard - "dot-prop@npm:^5.1.0": version: 5.3.0 resolution: "dot-prop@npm:5.3.0" @@ -10176,34 +10204,35 @@ __metadata: languageName: node linkType: hard -"esbuild@npm:^0.18.0 || ^0.19.0 || ^0.20.0 || ^0.21.0 || ^0.22.0 || ^0.23.0 || ^0.24.0": - version: 0.24.0 - resolution: "esbuild@npm:0.24.0" - dependencies: - "@esbuild/aix-ppc64": "npm:0.24.0" - "@esbuild/android-arm": "npm:0.24.0" - "@esbuild/android-arm64": "npm:0.24.0" - "@esbuild/android-x64": "npm:0.24.0" - "@esbuild/darwin-arm64": "npm:0.24.0" - "@esbuild/darwin-x64": "npm:0.24.0" - "@esbuild/freebsd-arm64": "npm:0.24.0" - "@esbuild/freebsd-x64": "npm:0.24.0" - "@esbuild/linux-arm": "npm:0.24.0" - "@esbuild/linux-arm64": "npm:0.24.0" - "@esbuild/linux-ia32": "npm:0.24.0" - "@esbuild/linux-loong64": "npm:0.24.0" - "@esbuild/linux-mips64el": "npm:0.24.0" - "@esbuild/linux-ppc64": "npm:0.24.0" - "@esbuild/linux-riscv64": "npm:0.24.0" - "@esbuild/linux-s390x": "npm:0.24.0" - "@esbuild/linux-x64": "npm:0.24.0" - "@esbuild/netbsd-x64": "npm:0.24.0" - "@esbuild/openbsd-arm64": "npm:0.24.0" - "@esbuild/openbsd-x64": "npm:0.24.0" - "@esbuild/sunos-x64": "npm:0.24.0" - "@esbuild/win32-arm64": "npm:0.24.0" - "@esbuild/win32-ia32": "npm:0.24.0" - "@esbuild/win32-x64": "npm:0.24.0" +"esbuild@npm:^0.18.0 || ^0.19.0 || ^0.20.0 || ^0.21.0 || ^0.22.0 || ^0.23.0 || ^0.24.0 || ^0.25.0": + version: 0.25.1 + resolution: "esbuild@npm:0.25.1" + dependencies: + "@esbuild/aix-ppc64": "npm:0.25.1" + "@esbuild/android-arm": "npm:0.25.1" + "@esbuild/android-arm64": "npm:0.25.1" + "@esbuild/android-x64": "npm:0.25.1" + "@esbuild/darwin-arm64": "npm:0.25.1" + "@esbuild/darwin-x64": "npm:0.25.1" + "@esbuild/freebsd-arm64": "npm:0.25.1" + "@esbuild/freebsd-x64": "npm:0.25.1" + "@esbuild/linux-arm": "npm:0.25.1" + "@esbuild/linux-arm64": "npm:0.25.1" + "@esbuild/linux-ia32": "npm:0.25.1" + "@esbuild/linux-loong64": "npm:0.25.1" + "@esbuild/linux-mips64el": "npm:0.25.1" + "@esbuild/linux-ppc64": "npm:0.25.1" + "@esbuild/linux-riscv64": "npm:0.25.1" + "@esbuild/linux-s390x": "npm:0.25.1" + "@esbuild/linux-x64": "npm:0.25.1" + "@esbuild/netbsd-arm64": "npm:0.25.1" + "@esbuild/netbsd-x64": "npm:0.25.1" + "@esbuild/openbsd-arm64": "npm:0.25.1" + "@esbuild/openbsd-x64": "npm:0.25.1" + "@esbuild/sunos-x64": "npm:0.25.1" + "@esbuild/win32-arm64": "npm:0.25.1" + "@esbuild/win32-ia32": "npm:0.25.1" + "@esbuild/win32-x64": "npm:0.25.1" dependenciesMeta: "@esbuild/aix-ppc64": optional: true @@ -10239,6 +10268,8 @@ __metadata: optional: true "@esbuild/linux-x64": optional: true + "@esbuild/netbsd-arm64": + optional: true "@esbuild/netbsd-x64": optional: true "@esbuild/openbsd-arm64": @@ -10255,7 +10286,7 @@ __metadata: optional: true bin: esbuild: bin/esbuild - checksum: 10c0/9f1aadd8d64f3bff422ae78387e66e51a5e09de6935a6f987b6e4e189ed00fdc2d1bc03d2e33633b094008529c8b6e06c7ad1a9782fb09fec223bf95998c0683 + checksum: 10c0/80fca30dd0f21aec23fdfab34f0a8d5f55df5097dd7f475f2ab561d45662c32ee306f5649071cd1a0ba0614b164c48ca3dc3ee1551a4daf204b8af90e4d893f5 languageName: node linkType: hard @@ -10407,9 +10438,9 @@ __metadata: languageName: node linkType: hard -"eslint-plugin-jsonc@npm:^2.18.2": - version: 2.18.2 - resolution: "eslint-plugin-jsonc@npm:2.18.2" +"eslint-plugin-jsonc@npm:^2.19.1": + version: 2.19.1 + resolution: "eslint-plugin-jsonc@npm:2.19.1" dependencies: "@eslint-community/eslint-utils": "npm:^4.2.0" eslint-compat-utils: "npm:^0.6.0" @@ -10421,13 +10452,13 @@ __metadata: synckit: "npm:^0.6.0" peerDependencies: eslint: ">=6.0.0" - checksum: 10c0/5ba6fa7f5320838066e0a55d6b5b4e1fa5f244b76593be76e60a5e7153bc6c7b05c8faa38873a663acdc7efc892589f1285f367765b4c8934a941324c14dc107 + checksum: 10c0/256751242bbd1518871cd50a10daa0cf205498b509c3bf99f887a444cbab93adaa3dbf89c8d6e2aeb0707400365d8c7c59bbdb2fa3e53e586b1f4bc583d01473 languageName: node linkType: hard -"eslint-plugin-prettier@npm:^5.1.3": - version: 5.2.1 - resolution: "eslint-plugin-prettier@npm:5.2.1" +"eslint-plugin-prettier@npm:^5.2.3": + version: 5.2.3 + resolution: "eslint-plugin-prettier@npm:5.2.3" dependencies: prettier-linter-helpers: "npm:^1.0.0" synckit: "npm:^0.9.1" @@ -10441,7 +10472,7 @@ __metadata: optional: true eslint-config-prettier: optional: true - checksum: 10c0/4bc8bbaf5bb556c9c501dcdff369137763c49ccaf544f9fa91400360ed5e3a3f1234ab59690e06beca5b1b7e6f6356978cdd3b02af6aba3edea2ffe69ca6e8b2 + checksum: 10c0/60d9c03491ec6080ac1d71d0bee1361539ff6beb9b91ac98cfa7176c9ed52b7dbe7119ebee5b441b479d447d17d802a4a492ee06095ef2f22c460e3dd6459302 languageName: node linkType: hard @@ -10462,15 +10493,15 @@ __metadata: languageName: node linkType: hard -"eslint@npm:^8.57.0": - version: 8.57.0 - resolution: "eslint@npm:8.57.0" +"eslint@npm:^8.57.1": + version: 8.57.1 + resolution: "eslint@npm:8.57.1" dependencies: "@eslint-community/eslint-utils": "npm:^4.2.0" "@eslint-community/regexpp": "npm:^4.6.1" "@eslint/eslintrc": "npm:^2.1.4" - "@eslint/js": "npm:8.57.0" - "@humanwhocodes/config-array": "npm:^0.11.14" + "@eslint/js": "npm:8.57.1" + "@humanwhocodes/config-array": "npm:^0.13.0" "@humanwhocodes/module-importer": "npm:^1.0.1" "@nodelib/fs.walk": "npm:^1.2.8" "@ungap/structured-clone": "npm:^1.2.0" @@ -10506,7 +10537,7 @@ __metadata: text-table: "npm:^0.2.0" bin: eslint: bin/eslint.js - checksum: 10c0/00bb96fd2471039a312435a6776fe1fd557c056755eaa2b96093ef3a8508c92c8775d5f754768be6b1dddd09fdd3379ddb231eeb9b6c579ee17ea7d68000a529 + checksum: 10c0/1fd31533086c1b72f86770a4d9d7058ee8b4643fd1cfd10c7aac1ecb8725698e88352a87805cf4b2ce890aa35947df4b4da9655fb7fdfa60dbb448a43f6ebcf1 languageName: node linkType: hard @@ -10617,7 +10648,7 @@ __metadata: languageName: node linkType: hard -"execa@npm:~8.0.1": +"execa@npm:^8.0.1": version: 8.0.1 resolution: "execa@npm:8.0.1" dependencies: @@ -12063,10 +12094,12 @@ __metadata: languageName: node linkType: hard -"human-id@npm:^1.0.2": - version: 1.0.2 - resolution: "human-id@npm:1.0.2" - checksum: 10c0/e4c3be49b3927ff8ac54ae4a95ed77ad94fd793b57be51aff39aa81931c6efe56303ce1ec76a70c74f85748644207c89ccfa63d828def1313eff7526a14c3b3b +"human-id@npm:^4.1.1": + version: 4.1.1 + resolution: "human-id@npm:4.1.1" + bin: + human-id: dist/cli.js + checksum: 10c0/9a9a18130fb7d6bc707054bacc32cb328289be0de47ba5669fd04995435e7e59931b87c644a223d68473c450221d104175a5fefe93d77f3522822ead8945def8 languageName: node linkType: hard @@ -12288,18 +12321,14 @@ __metadata: languageName: node linkType: hard -"inquirer@npm:^9.2.23": - version: 9.2.23 - resolution: "inquirer@npm:9.2.23" +"inquirer@npm:^9.3.7": + version: 9.3.7 + resolution: "inquirer@npm:9.3.7" dependencies: "@inquirer/figures": "npm:^1.0.3" - "@ljharb/through": "npm:^2.3.13" ansi-escapes: "npm:^4.3.2" - chalk: "npm:^5.3.0" - cli-cursor: "npm:^3.1.0" cli-width: "npm:^4.1.0" external-editor: "npm:^3.1.0" - lodash: "npm:^4.17.21" mute-stream: "npm:1.0.0" ora: "npm:^5.4.1" run-async: "npm:^3.0.0" @@ -12307,7 +12336,8 @@ __metadata: string-width: "npm:^4.2.3" strip-ansi: "npm:^6.0.1" wrap-ansi: "npm:^6.2.0" - checksum: 10c0/6adf3a6a9c666ff2baf3e8aef841f3ae266506cf0256ef445de5ec9a456aec8d6ff38180cc436ad3f9045cbb018d11dca98ed3570c28fbf8a857f1e4712eddc7 + yoctocolors-cjs: "npm:^2.1.2" + checksum: 10c0/7a5b70312a734b579846648365cbf354e8b23ec73f379d46ada30bc2cf3961dc33b7ca59a3c2beed8a8e03744e3d6c12d4998a34b2d3904774aed238d77328b4 languageName: node linkType: hard @@ -13888,7 +13918,7 @@ __metadata: languageName: node linkType: hard -"lilconfig@npm:~3.1.3": +"lilconfig@npm:^3.1.3": version: 3.1.3 resolution: "lilconfig@npm:3.1.3" checksum: 10c0/f5604e7240c5c275743561442fbc5abf2a84ad94da0f5adc71d25e31fa8483048de3dcedcb7a44112a942fed305fd75841cdf6c9681c7f640c63f1049e9a5dcc @@ -13918,27 +13948,27 @@ __metadata: languageName: node linkType: hard -"lint-staged@npm:^15.3.0": - version: 15.3.0 - resolution: "lint-staged@npm:15.3.0" +"lint-staged@npm:^15.4.3": + version: 15.4.3 + resolution: "lint-staged@npm:15.4.3" dependencies: - chalk: "npm:~5.4.1" - commander: "npm:~12.1.0" - debug: "npm:~4.4.0" - execa: "npm:~8.0.1" - lilconfig: "npm:~3.1.3" - listr2: "npm:~8.2.5" - micromatch: "npm:~4.0.8" - pidtree: "npm:~0.6.0" - string-argv: "npm:~0.3.2" - yaml: "npm:~2.6.1" + chalk: "npm:^5.4.1" + commander: "npm:^13.1.0" + debug: "npm:^4.4.0" + execa: "npm:^8.0.1" + lilconfig: "npm:^3.1.3" + listr2: "npm:^8.2.5" + micromatch: "npm:^4.0.8" + pidtree: "npm:^0.6.0" + string-argv: "npm:^0.3.2" + yaml: "npm:^2.7.0" bin: lint-staged: bin/lint-staged.js - checksum: 10c0/1ddf9488c523c0b65c85b755428d4ad74fac3aa6ccb2e28e9bff5b8d86503158fe241d20d5433a11146872050b43580644901a5ef4c924b1ad7017c224a07339 + checksum: 10c0/c1f71f2273bcbd992af929620f5acc6b9f6899da4b395e780e0b3ab33a0d725c239eb961873067c8c842e057c585c71dd4d44c0dc8b25539d3c2e97a3bdd6f30 languageName: node linkType: hard -"listr2@npm:~8.2.5": +"listr2@npm:^8.2.5": version: 8.2.5 resolution: "listr2@npm:8.2.5" dependencies: @@ -15084,7 +15114,7 @@ __metadata: languageName: node linkType: hard -"micromatch@npm:^4.0.4, micromatch@npm:^4.0.8, micromatch@npm:~4.0.8": +"micromatch@npm:^4.0.4, micromatch@npm:^4.0.8": version: 4.0.8 resolution: "micromatch@npm:4.0.8" dependencies: @@ -15491,7 +15521,27 @@ __metadata: languageName: node linkType: hard -"node-gyp@npm:^10.1.0, node-gyp@npm:latest": +"node-gyp@npm:^10.3.1": + version: 10.3.1 + resolution: "node-gyp@npm:10.3.1" + 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:^13.0.0" + nopt: "npm:^7.0.0" + proc-log: "npm:^4.1.0" + semver: "npm:^7.3.5" + tar: "npm:^6.2.1" + which: "npm:^4.0.0" + bin: + node-gyp: bin/node-gyp.js + checksum: 10c0/87c3b50e1f6f5256b5d2879a8c064eefa53ed444bad2a20870be43bc189db7cbffe22c30af056046c6d904181d73881b1726fd391d2f6f79f89b991019f195ea + languageName: node + linkType: hard + +"node-gyp@npm:latest": version: 10.2.0 resolution: "node-gyp@npm:10.2.0" dependencies: @@ -15696,22 +15746,22 @@ __metadata: languageName: node linkType: hard -"nx@npm:19.8.2, nx@npm:^19.8.2": - version: 19.8.2 - resolution: "nx@npm:19.8.2" +"nx@npm:19.8.14, nx@npm:^19.8.14": + version: 19.8.14 + resolution: "nx@npm:19.8.14" dependencies: "@napi-rs/wasm-runtime": "npm:0.2.4" - "@nrwl/tao": "npm:19.8.2" - "@nx/nx-darwin-arm64": "npm:19.8.2" - "@nx/nx-darwin-x64": "npm:19.8.2" - "@nx/nx-freebsd-x64": "npm:19.8.2" - "@nx/nx-linux-arm-gnueabihf": "npm:19.8.2" - "@nx/nx-linux-arm64-gnu": "npm:19.8.2" - "@nx/nx-linux-arm64-musl": "npm:19.8.2" - "@nx/nx-linux-x64-gnu": "npm:19.8.2" - "@nx/nx-linux-x64-musl": "npm:19.8.2" - "@nx/nx-win32-arm64-msvc": "npm:19.8.2" - "@nx/nx-win32-x64-msvc": "npm:19.8.2" + "@nrwl/tao": "npm:19.8.14" + "@nx/nx-darwin-arm64": "npm:19.8.14" + "@nx/nx-darwin-x64": "npm:19.8.14" + "@nx/nx-freebsd-x64": "npm:19.8.14" + "@nx/nx-linux-arm-gnueabihf": "npm:19.8.14" + "@nx/nx-linux-arm64-gnu": "npm:19.8.14" + "@nx/nx-linux-arm64-musl": "npm:19.8.14" + "@nx/nx-linux-x64-gnu": "npm:19.8.14" + "@nx/nx-linux-x64-musl": "npm:19.8.14" + "@nx/nx-win32-arm64-msvc": "npm:19.8.14" + "@nx/nx-win32-x64-msvc": "npm:19.8.14" "@yarnpkg/lockfile": "npm:^1.1.0" "@yarnpkg/parsers": "npm:3.0.0-rc.46" "@zkochan/js-yaml": "npm:0.0.7" @@ -15776,7 +15826,7 @@ __metadata: bin: nx: bin/nx.js nx-cloud: bin/nx-cloud.js - checksum: 10c0/c6c48a30b7981bd6088f5b8317a249e05e837514f6ba4b7eb49055133f368ded77e23931fc22f72f3480635d6e939ac4ff827d4e08d973e34076fef2905c2bed + checksum: 10c0/3bc8b33b341054875a9ddbd9da63d001504948e1e4c7e707c138c939c52ea0269d6bc436aa3b9cf66c315177c626974d8f9322d19a5c1deceb4aa6faaaf67309 languageName: node linkType: hard @@ -16427,13 +16477,6 @@ __metadata: languageName: node linkType: hard -"path-to-regexp@npm:^6.2.0": - version: 6.3.0 - resolution: "path-to-regexp@npm:6.3.0" - checksum: 10c0/73b67f4638b41cde56254e6354e46ae3a2ebc08279583f6af3d96fe4664fc75788f74ed0d18ca44fa4a98491b69434f9eee73b97bb5314bd1b5adb700f5c18d6 - languageName: node - linkType: hard - "path-type@npm:^4.0.0": version: 4.0.0 resolution: "path-type@npm:4.0.0" @@ -16490,7 +16533,7 @@ __metadata: languageName: node linkType: hard -"pidtree@npm:~0.6.0": +"pidtree@npm:^0.6.0": version: 0.6.0 resolution: "pidtree@npm:0.6.0" bin: @@ -17662,7 +17705,7 @@ __metadata: languageName: node linkType: hard -"prettier@npm:^2.5.1, prettier@npm:^2.7.1": +"prettier@npm:^2.7.1": version: 2.8.8 resolution: "prettier@npm:2.8.8" bin: @@ -17867,7 +17910,18 @@ __metadata: languageName: node linkType: hard -"react-dom@npm:^16.8.0 || ^17.0.0 || ^18.0.0, react-dom@npm:^18.3.1": +"react-dom@npm:^16.8.0 || ^17.0.0 || ^18.0.0 || ^19.0.0": + version: 19.0.0 + resolution: "react-dom@npm:19.0.0" + dependencies: + scheduler: "npm:^0.25.0" + peerDependencies: + react: ^19.0.0 + checksum: 10c0/a36ce7ab507b237ae2759c984cdaad4af4096d8199fb65b3815c16825e5cfeb7293da790a3fc2184b52bfba7ba3ff31c058c01947aff6fd1a3701632aabaa6a9 + languageName: node + linkType: hard + +"react-dom@npm:^18.3.1": version: 18.3.1 resolution: "react-dom@npm:18.3.1" dependencies: @@ -17909,7 +17963,14 @@ __metadata: languageName: node linkType: hard -"react@npm:^16.8.0 || ^17.0.0 || ^18.0.0, react@npm:^18.3.1": +"react@npm:^16.8.0 || ^17.0.0 || ^18.0.0 || ^19.0.0": + version: 19.0.0 + resolution: "react@npm:19.0.0" + checksum: 10c0/9cad8f103e8e3a16d15cb18a0d8115d8bd9f9e1ce3420310aea381eb42aa0a4f812cf047bb5441349257a05fba8a291515691e3cb51267279b2d2c3253f38471 + languageName: node + linkType: hard + +"react@npm:^18.3.1": version: 18.3.1 resolution: "react@npm:18.3.1" dependencies: @@ -18067,9 +18128,9 @@ __metadata: languageName: node linkType: hard -"remark-gfm@npm:^4.0.0": - version: 4.0.0 - resolution: "remark-gfm@npm:4.0.0" +"remark-gfm@npm:^4.0.1": + version: 4.0.1 + resolution: "remark-gfm@npm:4.0.1" dependencies: "@types/mdast": "npm:^4.0.0" mdast-util-gfm: "npm:^3.0.0" @@ -18077,7 +18138,7 @@ __metadata: remark-parse: "npm:^11.0.0" remark-stringify: "npm:^11.0.0" unified: "npm:^11.0.0" - checksum: 10c0/db0aa85ab718d475c2596e27c95be9255d3b0fc730a4eda9af076b919f7dd812f7be3ac020611a8dbe5253fd29671d7b12750b56e529fdc32dfebad6dbf77403 + checksum: 10c0/427ecc6af3e76222662061a5f670a3e4e33ec5fffe2cabf04034da6a3f9a1bda1fc023e838a636385ba314e66e2bebbf017ca61ebea357eb0f5200fe0625a4b7 languageName: node linkType: hard @@ -18491,6 +18552,13 @@ __metadata: languageName: node linkType: hard +"scheduler@npm:^0.25.0": + version: 0.25.0 + resolution: "scheduler@npm:0.25.0" + checksum: 10c0/a4bb1da406b613ce72c1299db43759526058fdcc413999c3c3e0db8956df7633acf395cb20eb2303b6a65d658d66b6585d344460abaee8080b4aa931f10eaafe + languageName: node + linkType: hard + "semver@npm:^6.0.0, semver@npm:^6.3.0, semver@npm:^6.3.1": version: 6.3.1 resolution: "semver@npm:6.3.1" @@ -18900,11 +18968,11 @@ __metadata: languageName: node linkType: hard -"storybook@npm:^8.4.7": - version: 8.4.7 - resolution: "storybook@npm:8.4.7" +"storybook@npm:^8.6.4": + version: 8.6.4 + resolution: "storybook@npm:8.6.4" dependencies: - "@storybook/core": "npm:8.4.7" + "@storybook/core": "npm:8.6.4" peerDependencies: prettier: ^2 || ^3 peerDependenciesMeta: @@ -18914,7 +18982,7 @@ __metadata: getstorybook: ./bin/index.cjs sb: ./bin/index.cjs storybook: ./bin/index.cjs - checksum: 10c0/795b79950b88b41ee0158fe2e2583a8ce97ff843c054f91e3c55310967b9e5c4e4d72814773380b543c33bd6d57ce6b5f377ce93ce73962e803b250a751be37c + checksum: 10c0/8a0f01274fa079b6e3563df19568933a13ca3b45981d8d5fa66376d12da4f926cca0e9c79a071930527610fbd0cb71a5346ff487bf331ff7a029058a26c3932f languageName: node linkType: hard @@ -18933,7 +19001,7 @@ __metadata: languageName: node linkType: hard -"string-argv@npm:~0.3.2": +"string-argv@npm:^0.3.2": version: 0.3.2 resolution: "string-argv@npm:0.3.2" checksum: 10c0/75c02a83759ad1722e040b86823909d9a2fc75d15dd71ec4b537c3560746e33b5f5a07f7332d1e3f88319909f82190843aa2f0a0d8c8d591ec08e93d5b8dec82 @@ -19218,23 +19286,23 @@ __metadata: languageName: node linkType: hard -"stylelint-config-recommended@npm:^14.0.1": - version: 14.0.1 - resolution: "stylelint-config-recommended@npm:14.0.1" +"stylelint-config-recommended@npm:^15.0.0": + version: 15.0.0 + resolution: "stylelint-config-recommended@npm:15.0.0" peerDependencies: - stylelint: ^16.1.0 - checksum: 10c0/a0a0ecd91f4d193bbe2cc3408228f8a2d8fcb2b2578d77233f86780c9247c796a04e16aad7a91d97cb918e2de34b6a8062bab66ee017c3835d855081d94f4828 + stylelint: ^16.13.0 + checksum: 10c0/de82e675e7d0cdbc486beee1f76002d5a5676247c1780fbe04f6adb617b016033f18f3361f4e99a76fc4d2115fbfc97786d9cf87ee7d90a345e146de35b04ab8 languageName: node linkType: hard -"stylelint-config-standard@npm:^36.0.1": - version: 36.0.1 - resolution: "stylelint-config-standard@npm:36.0.1" +"stylelint-config-standard@npm:^37.0.0": + version: 37.0.0 + resolution: "stylelint-config-standard@npm:37.0.0" dependencies: - stylelint-config-recommended: "npm:^14.0.1" + stylelint-config-recommended: "npm:^15.0.0" peerDependencies: - stylelint: ^16.1.0 - checksum: 10c0/7f9b954694358e77be5110418f31335be579ce59dd952bc3c6a9449265297db3170ec520e0905769253b48b99c3109a95c71f5b985bf402e48fd6c89b5364cb2 + stylelint: ^16.13.0 + checksum: 10c0/99c184384126f8676061c857e36d6d58fd9b391c1c1ec94a3f019c23ba1e0dc7665fc064a630f6ee66bc8624a6fd850fc7ab33ff086f5fde7b46d4ae0d92edf5 languageName: node linkType: hard @@ -19826,16 +19894,6 @@ __metadata: languageName: node linkType: hard -"ts-poet@npm:^4.5.0": - version: 4.15.0 - resolution: "ts-poet@npm:4.15.0" - dependencies: - lodash: "npm:^4.17.15" - prettier: "npm:^2.5.1" - checksum: 10c0/87ce3589f071a66a9701c88ee830ce778f2e4c43bcfdee9308a8f38bb53b8fb36e7b5900749389b4bb8aaddf67e87043d51c2fbf36ec25aa98bcfff90bf6d742 - languageName: node - linkType: hard - "tsconfig-paths@npm:^4.1.2": version: 4.2.0 resolution: "tsconfig-paths@npm:4.2.0" @@ -19875,30 +19933,6 @@ __metadata: languageName: node linkType: hard -"twirp-ts@npm:^2.5.0": - version: 2.5.0 - resolution: "twirp-ts@npm:2.5.0" - dependencies: - "@protobuf-ts/plugin-framework": "npm:^2.0.7" - camel-case: "npm:^4.1.2" - dot-object: "npm:^2.1.4" - path-to-regexp: "npm:^6.2.0" - ts-poet: "npm:^4.5.0" - yaml: "npm:^1.10.2" - peerDependencies: - "@protobuf-ts/plugin": ^2.5.0 - ts-proto: ^1.81.3 - peerDependenciesMeta: - "@protobuf-ts/plugin": - optional: true - ts-proto: - optional: true - bin: - protoc-gen-twirp_ts: protoc-gen-twirp_ts - checksum: 10c0/046ef483420105e92bb8429931e754d7046516fd4fc4f5eeeacbf57dd26ec06ab9c69eba934e587e525f24f49177b03667d18dea78741c408b3e69e1c9774bbd - languageName: node - linkType: hard - "type-check@npm:^0.4.0, type-check@npm:~0.4.0": version: 0.4.0 resolution: "type-check@npm:0.4.0" @@ -20418,9 +20452,9 @@ __metadata: languageName: node linkType: hard -"vite@npm:^5.4.11": - version: 5.4.11 - resolution: "vite@npm:5.4.11" +"vite@npm:^5.4.14": + version: 5.4.14 + resolution: "vite@npm:5.4.14" dependencies: esbuild: "npm:^0.21.3" fsevents: "npm:~2.3.3" @@ -20457,7 +20491,7 @@ __metadata: optional: true bin: vite: bin/vite.js - checksum: 10c0/d536bb7af57dd0eca2a808f95f5ff1d7b7ffb8d86e17c6893087680a0448bd0d15e07475270c8a6de65cb5115592d037130a1dd979dc76bcef8c1dda202a1874 + checksum: 10c0/8842933bd70ca6a98489a0bb9c8464bec373de00f9a97c8c7a4e64b24d15c88bfaa8c1acb38a68c3e5eb49072ffbccb146842c2d4edcdd036a9802964cffe3d1 languageName: node linkType: hard @@ -20842,19 +20876,12 @@ __metadata: languageName: node linkType: hard -"yaml@npm:^1.10.2": - version: 1.10.2 - resolution: "yaml@npm:1.10.2" - checksum: 10c0/5c28b9eb7adc46544f28d9a8d20c5b3cb1215a886609a2fd41f51628d8aaa5878ccd628b755dbcd29f6bb4921bd04ffbc6dcc370689bb96e594e2f9813d2605f - languageName: node - linkType: hard - -"yaml@npm:~2.6.1": - version: 2.6.1 - resolution: "yaml@npm:2.6.1" +"yaml@npm:^2.7.0": + version: 2.7.0 + resolution: "yaml@npm:2.7.0" bin: yaml: bin.mjs - checksum: 10c0/aebf07f61c72b38c74d2b60c3a3ccf89ee4da45bcd94b2bfb7899ba07a5257625a7c9f717c65a6fc511563d48001e01deb1d9e55f0133f3e2edf86039c8c1be7 + checksum: 10c0/886a7d2abbd70704b79f1d2d05fe9fb0aa63aefb86e1cb9991837dced65193d300f5554747a872b4b10ae9a12bc5d5327e4d04205f70336e863e35e89d8f4ea9 languageName: node linkType: hard