diff --git a/.storybook/CHANGELOG.md b/.storybook/CHANGELOG.md index 6f4f7d715de..1ecad8c174e 100644 --- a/.storybook/CHANGELOG.md +++ b/.storybook/CHANGELOG.md @@ -61,7 +61,12 @@ This component has been deprecated. Use an action bar to allow users to perform ##7.4.2 🗓 2024-02-06 + +##7.4.2-next.0 +🗓 +2024-02-06 • 📝 [Commits](https://github.com/adobe/spectrum-css/compare/@spectrum-css/preview@7.4.1...@spectrum-css/preview@7.4.2-next.0) +**Note:** Spectrum 2 next version **Note:** Version bump only for package @spectrum-css/preview diff --git a/.storybook/decorators/contextsWrapper.js b/.storybook/decorators/contextsWrapper.js index cea100fd699..a24d57b552f 100644 --- a/.storybook/decorators/contextsWrapper.js +++ b/.storybook/decorators/contextsWrapper.js @@ -8,7 +8,7 @@ export const withContextWrapper = makeDecorator({ name: "withContextWrapper", parameterName: "context", wrapper: (StoryFn, context) => { - const { args, argTypes, viewMode } = context; + const { args, argTypes, id, viewMode } = context; const getDefaultValue = (type) => { if (!type) return null; @@ -31,7 +31,13 @@ export const withContextWrapper = makeDecorator({ const scales = ["medium", "large"]; useEffect(() => { - const container = viewMode === "docs" && !window.isChromatic() ? document.querySelector('#root-inner') ?? document.body : document.body; + const container = + viewMode === "docs" && + !window.isChromatic() && + !id.includes('foundation') + ? document.querySelector('#root-inner') ?? document.body + : document.body; + container.classList.toggle("spectrum", true); container.classList.toggle("spectrum--express", isExpress); diff --git a/.storybook/decorators/index.js b/.storybook/decorators/index.js index adecd25321e..f87e67b230e 100644 --- a/.storybook/decorators/index.js +++ b/.storybook/decorators/index.js @@ -2,6 +2,7 @@ import { makeDecorator, useEffect } from "@storybook/preview-api"; import { html } from "lit"; export { withContextWrapper } from "./contextsWrapper.js"; +export { withDownStateDimensionCapture } from "./withDownStateDimensionCapture.js"; export { withTestingPreviewWrapper } from "./withTestingPreviewWrapper.js"; /** diff --git a/.storybook/decorators/withDownStateDimensionCapture.js b/.storybook/decorators/withDownStateDimensionCapture.js new file mode 100644 index 00000000000..616852d34ce --- /dev/null +++ b/.storybook/decorators/withDownStateDimensionCapture.js @@ -0,0 +1,19 @@ +export const withDownStateDimensionCapture = (selector) => (Story, context) => { + const captureDownStateDimensions = () => { + const components = document.querySelectorAll(selector); + components.forEach((component) => { + const { width, height } = component.getBoundingClientRect(); + component.style.setProperty('--spectrum-downstate-width', `${width}px`); + component.style.setProperty('--spectrum-downstate-height', `${height}px`); + }); + }; + + document.addEventListener("DOMContentLoaded", () => { + // Wait to make sure the story is fully rendered (otherwise width/height can be wrong) + setTimeout(() => { + captureDownStateDimensions(); + }, 100); + }); + + return Story(context); +}; diff --git a/.storybook/foundations/corner-rounding/action-button-corner-rounding.stories.js b/.storybook/foundations/corner-rounding/action-button-corner-rounding.stories.js new file mode 100644 index 00000000000..372879350f5 --- /dev/null +++ b/.storybook/foundations/corner-rounding/action-button-corner-rounding.stories.js @@ -0,0 +1,105 @@ +import { html } from "lit"; +import { Template } from "../../../components/actionbutton/stories/template"; + +export default { + title: "Foundations/Corner rounding", + description: + "The action button component represents an action a user can take.", + component: "ActionButton", + args: { + rootClass: "spectrum-ActionButton", + }, + parameters: { + actions: { + handles: ["click .spectrum-ActionButton:not([disabled])"], + }, + }, + tags: ['foundation'], +}; + +const ActionButton = ({ + ...args +}) => { + return html` +
+ ${Template({ + ...args, + iconName: undefined, + })} +
+ `; +}; + +const ActionButtonTable = ({ ...args }) => { + return html` + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
TokenValueMedium example
--spectrum-corner-radius-medium-size-extra-small6px + ${ActionButton({ + ...args, + label: "Extra Small", + size: "xs" + })} +
--spectrum-corner-radius-medium-size-small7px + ${ActionButton({ + ...args, + label: "Small", + size: "s" + })} +
--spectrum-corner-radius-medium-size-medium8px + ${ActionButton({ + ...args, + label: "Medium", + size: "m" + })} +
--spectrum-corner-radius-medium-size-large9px + ${ActionButton({ + ...args, + label: "Large", + size: "l" + })} +
--spectrum-corner-radius-medium-size-extra-large10px + ${ActionButton({ + ...args, + label: "Extra Large", + size: "xl" + })} +
+ `; +}; + +export const ActionButtonExamples = ActionButtonTable.bind({}); +ActionButtonExamples.args = {}; diff --git a/.storybook/foundations/corner-rounding/checkbox-corner-rounding.stories.js b/.storybook/foundations/corner-rounding/checkbox-corner-rounding.stories.js new file mode 100644 index 00000000000..3dad56fd49f --- /dev/null +++ b/.storybook/foundations/corner-rounding/checkbox-corner-rounding.stories.js @@ -0,0 +1,97 @@ +// Import the component markup template +import { html } from "lit"; +import { Template } from "../../../components/checkbox/stories/template"; + +export default { + title: "Foundations/Corner rounding", + description: + "Checkboxes allow users to select multiple items from a list of individual items, or mark one individual item as selected.", + component: "Checkbox", + args: { + rootClass: "spectrum-Checkbox", + }, + parameters: { + actions: { + handles: ['click input[type="checkbox"]'], + }, + }, + tags: ['foundation'], +}; + +const Checkbox = ({ + customStyles = {}, + isChecked = false, + ...args +}) => { + return html` +
+ ${Template({ + ...args, + iconName: undefined, + })} +
+ `; +}; + +const CheckboxTable = ({...args}) => { + return html` + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
TokenValueSmall example
--spectrum-corner-radius-small-size-small3px + ${Checkbox({ + ...args, + label: "Small", + size: "s" + })} +
--spectrum-corner-radius-small-size-medium4px + ${Checkbox({ + ...args, + label: "Medium", + size: "m" + })} +
--spectrum-corner-radius-small-size-large5px + ${Checkbox({ + ...args, + label: "Large", + size: "l" + })} +
--spectrum-corner-radius-small-size-extra-large6px + ${Checkbox({ + ...args, + label: "Extra Large", + size: "xl" + })} +
+ `; +} + +export const CheckboxExamples = CheckboxTable.bind({}); +CheckboxExamples.args = {}; diff --git a/.storybook/foundations/corner-rounding/component-size-tokens-medium.md b/.storybook/foundations/corner-rounding/component-size-tokens-medium.md new file mode 100644 index 00000000000..2f01b1ba44d --- /dev/null +++ b/.storybook/foundations/corner-rounding/component-size-tokens-medium.md @@ -0,0 +1,7 @@ +| Component size token | Alias token (if available) | Global token | Value | +|---------------------------------------------------|-------------------------------|------------------------------|-------| +| --spectrum-corner-radius-medium-size-extra-small | | --spectrum-corner-radius-300 | 6px | +| --spectrum-corner-radius-medium-size-small | | --spectrum-corner-radius-400 | 7px | +| --spectrum-corner-radius-medium-size-medium | --spectrum-corner-radius-medium-default | --spectrum-corner-radius-500 | 8px | +| --spectrum-corner-radius-medium-size-large | | --spectrum-corner-radius-600 | 9px | +| --spectrum-corner-radius-medium-size-extra-large | --spectrum-corner-radius-large-default | --spectrum-corner-radius-700 | 10px | diff --git a/.storybook/foundations/corner-rounding/component-size-tokens-small.md b/.storybook/foundations/corner-rounding/component-size-tokens-small.md new file mode 100644 index 00000000000..1fdcae6ad6d --- /dev/null +++ b/.storybook/foundations/corner-rounding/component-size-tokens-small.md @@ -0,0 +1,6 @@ +| Component size token | Alias token (if available) | Global token | Value | +|---------------------------------------------------|-------------------------------|------------------------------|-------| +| --spectrum-corner-radius-small-size-small | | --spectrum-corner-radius-75 | 3px | +| --spectrum-corner-radius-small-size-medium | --spectrum-corner-radius-small-default | --spectrum-corner-radius-100 | 4px | +| --spectrum-corner-radius-small-size-large | | --spectrum-corner-radius-200 | 5px | +| --spectrum-corner-radius-small-size-extra-large | | --spectrum-corner-radius-300 | 6px | diff --git a/.storybook/foundations/corner-rounding/corner-rounding.mdx b/.storybook/foundations/corner-rounding/corner-rounding.mdx new file mode 100644 index 00000000000..0af56f6e446 --- /dev/null +++ b/.storybook/foundations/corner-rounding/corner-rounding.mdx @@ -0,0 +1,26 @@ +import { Meta, Canvas, Story, Title, Unstyled } from '@storybook/blocks'; +import * as CornerRoundingStories from './corner-rounding.stories.js'; +import * as CheckboxStories from './checkbox-corner-rounding.stories.js'; +import * as ActionButtonStories from './action-button-corner-rounding.stories.js'; + + + + + +## Default values + +<Story of={CornerRoundingStories.CornerRounding} /> + +## Component examples + +### Small tokens + +Checkbox includes small component size tokens to scale corner rounding. + +<Story of={CheckboxStories.CheckboxExamples} /> + +### Medium tokens + +Action button includes medium component size tokens to scale corner rounding. + +<Story of={ActionButtonStories.ActionButtonExamples} /> diff --git a/.storybook/foundations/corner-rounding/corner-rounding.stories.js b/.storybook/foundations/corner-rounding/corner-rounding.stories.js new file mode 100644 index 00000000000..21da965f948 --- /dev/null +++ b/.storybook/foundations/corner-rounding/corner-rounding.stories.js @@ -0,0 +1,75 @@ +// Import the component markup template +import { html } from "lit"; +import { Template } from './template'; + +export default { + title: "Foundations/Corner rounding", + description: + "Corner rounding is a foundation that shows the different border-radius tokens that can be applied to a component.", + component: "Corner rounding", + args: { + rootClass: "spectrum-Foundations-Example-CornerRounding", + }, + tags: ['foundation'], +}; + +const CornerRadiusGroup = ({ + customStyles = {}, + ...args +}) => { + return html` + <div> + <table class="spectrum-Foundations-Example-CornerRounding-table"> + <thead> + <tr> + <th scope="col">Token</th> + <th scope="col" style="padding: 0 2rem;">Value</th> + <th scope="col">Example<br>(No Border)</th> + <th scope="col">Example<br>(Border)</th> + </tr> + </thead> + <tbody> + ${Template({ + ...args, + label: '--spectrum-corner-radius-none', + size: 'none', + value: '0px', + })} + ${Template({ + ...args, + label: '--spectrum-corner-radius-small-default', + size: 's', + value: '4px', + })} + ${Template({ + ...args, + label: '--spectrum-corner-radius-medium-default', + size: 'm', + value: '8px', + })} + ${Template({ + ...args, + label: '--spectrum-corner-radius-large-default', + size: 'l', + value: '10px', + })} + ${Template({ + ...args, + label: '--spectrum-corner-radius-extra-large-default', + size: 'xl', + value: '16px', + })} + ${Template({ + ...args, + label: '--spectrum-corner-radius-full', + size: 'full', + value: '9999px', + })} + </tbody> + </table> + </div> + `; +}; + +export const CornerRounding = CornerRadiusGroup.bind({}); +CornerRounding.args = {}; diff --git a/.storybook/foundations/corner-rounding/index.css b/.storybook/foundations/corner-rounding/index.css new file mode 100644 index 00000000000..ebdd50f180f --- /dev/null +++ b/.storybook/foundations/corner-rounding/index.css @@ -0,0 +1,56 @@ +/*! +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. +*/ + +.spectrum-Foundations-Example-CornerRounding-table { + border-spacing: 1rem 0; + margin-inline-start: -1rem; +} + +.spectrum-Foundations-Example-CornerRounding-table th { + text-align: start; +} + +.spectrum-Foundations-Example-CornerRounding { + inline-size: 3rem; + block-size: 3rem; + margin: 0.5rem; + background-color: var(--spectrum-gray-500); +} + +.spectrum-Foundations-Example-CornerRounding--border { + background-color: var(--spectrum-gray-25); + border: var(--spectrum-border-width-200) solid var(--spectrum-gray-700); +} + +.spectrum-Foundations-Example-CornerRounding--none { + border-radius: var(--spectrum-corner-radius-none); +} + +.spectrum-Foundations-Example-CornerRounding--sizeS { + border-radius: var(--spectrum-corner-radius-small-default); +} + +.spectrum-Foundations-Example-CornerRounding--sizeM { + border-radius: var(--spectrum-corner-radius-medium-default); +} + +.spectrum-Foundations-Example-CornerRounding--sizeL { + border-radius: var(--spectrum-corner-radius-large-default); +} + +.spectrum-Foundations-Example-CornerRounding--sizeXL { + border-radius: var(--spectrum-corner-radius-extra-large-default); +} + +.spectrum-Foundations-Example-CornerRounding--full { + border-radius: var(--spectrum-corner-radius-full); +} diff --git a/.storybook/foundations/corner-rounding/template.js b/.storybook/foundations/corner-rounding/template.js new file mode 100644 index 00000000000..4d24cc43dbe --- /dev/null +++ b/.storybook/foundations/corner-rounding/template.js @@ -0,0 +1,42 @@ +import { html } from "lit"; +import { classMap } from "lit/directives/class-map.js"; +import './index.css'; + +const getSizeModifier = (size) => { + if (size === 'none' || size === 'full') { + return size; + } else { + return `size${size.toUpperCase()}`; + } +}; + +export const Template = ({ + rootClass = "spectrum-Foundations-Example-CornerRounding", + size = "none", + label, + value, +}) => html` + <tr> + <td>${label}</td> + <td style="padding: 0 2rem;">${value}</td> + <td> + <div + class=${classMap({ + [rootClass]: true, + [`${rootClass}--${getSizeModifier(size)}`]: typeof size !== "undefined", + })} + > + </div> + </td> + <td> + <div + class=${classMap({ + [rootClass]: true, + [`${rootClass}--${getSizeModifier(size)}`]: typeof size !== "undefined", + [`${rootClass}--border`]: true, + })} + > + </div> + </td> + </tr> + `; diff --git a/.storybook/foundations/down-state/button-down-state.stories.js b/.storybook/foundations/down-state/button-down-state.stories.js new file mode 100644 index 00000000000..603fa500c9a --- /dev/null +++ b/.storybook/foundations/down-state/button-down-state.stories.js @@ -0,0 +1,27 @@ +import { Template } from "../../../components/button/stories/template"; + +export default { + title: "Foundations/Down state", + description: + "Buttons allow users to perform an action or to navigate to another page. They have multiple styles for various needs, and are ideal for calling attention to where a user needs to do something in order to move forward in a flow.", + component: "Button", + args: { + rootClass: "spectrum-Button", + }, + parameters: { + actions: { + handles: ["click .spectrum-Button"], + }, + }, + tags: ["foundation"], +}; + +export const ButtonDownState = Template.bind({}); +ButtonDownState.args = { + label: "Edit", + variant: "accent", + customStyles: { + "--spectrum-downstate-width": "72px", + "--spectrum-downstate-height": "32px" + } +}; diff --git a/.storybook/foundations/down-state/checkbox-down-state.stories.js b/.storybook/foundations/down-state/checkbox-down-state.stories.js new file mode 100644 index 00000000000..fcc43a4ee1a --- /dev/null +++ b/.storybook/foundations/down-state/checkbox-down-state.stories.js @@ -0,0 +1,22 @@ +import { Template } from "../../../components/checkbox/stories/template"; + +export default { + title: "Foundations/Down state", + description: + "Checkboxes allow users to select multiple items from a list of individual items, or mark one individual item as selected.", + component: "Checkbox", + args: { + rootClass: "spectrum-Checkbox", + }, + parameters: { + actions: { + handles: ["click input[type=\"checkbox\"]"], + }, + }, + tags: ["foundation"], +}; + +export const CheckboxDownState = Template.bind({}); +CheckboxDownState.args = { + label: "Checkbox", +}; diff --git a/.storybook/foundations/down-state/down-state.mdx b/.storybook/foundations/down-state/down-state.mdx new file mode 100644 index 00000000000..f07e65d2f8d --- /dev/null +++ b/.storybook/foundations/down-state/down-state.mdx @@ -0,0 +1,44 @@ +import { Meta, Story } from '@storybook/blocks'; +import * as Checkbox from './checkbox-down-state.stories.js'; +import * as Button from './button-down-state.stories.js'; + +<Meta title="Foundations/Down state" /> + +# Down state + +Down state is a Spectrum 2 feature that creates the illusion of components being pressed-in when active. This functionality is already included in Spectrum 2 components that require down state in this project. It is implemented with a CSS transform. The implementation depends on the size of the interactable element, as shown in the examples below. + +## Examples + +### Minimum perspective + +For elements that have a width of 24px or less, the minimum perspective token is used to apply the down state. One example of a component that uses this token is the checkbox: + +<Story of={Checkbox.CheckboxDownState} /> + +In this case, we use the minimum perspective token: + +``` +transform: + perspective(var(--spectrum-component-size-minimum-perspective-down)) + translateZ(var(--spectrum-component-size-difference-down)); +``` + +### Calculated perspective + +For elements that have a width of greater than 24px, we need to use the component's width and height to apply the down state. One example of a component that uses this logic is the button: + +<Story of={Button.ButtonDownState} /> + +In this case, we use a max formula to calculate the perspective based on component width and height (this helps us account for components that may be very wide): + +``` +transform: + perspective(max( + var(--spectrum-downstate-height), + var(--spectrum-downstate-width) * var(--spectrum-component-size-width-ratio-down) + )) + translateZ(var(--spectrum-component-size-difference-down)); +``` + +*Note that in this case, users are required to develop an implementation to determine the width and height of the component. Assign these values to the `--spectrum-downstate-width` and `--spectrum-downstate-height` custom properties in a `style` attribute on the HTML element to expose them for use in the CSS.* diff --git a/.storybook/main.js b/.storybook/main.js index 8910d9da2e9..8a024ddafa8 100644 --- a/.storybook/main.js +++ b/.storybook/main.js @@ -12,6 +12,8 @@ module.exports = { stories: [ "../components/*/stories/*.stories.js", "./guides/*.mdx", + "./foundations/*/*.mdx", + "./foundations/*/*.stories.js", "./deprecated/*/*.stories.js", ], rootDir: "../", diff --git a/.storybook/manager.js b/.storybook/manager.js index ceacc56a50d..fb843f695a3 100644 --- a/.storybook/manager.js +++ b/.storybook/manager.js @@ -50,7 +50,7 @@ addons.setConfig({ sidebar: { showRoots: false, filters: { - patterns: (item) => !item.id.includes('forced-colors'), + patterns: (item) => !(item.id.includes('forced-colors') || item.tags.includes('foundation')), } }, }); diff --git a/.storybook/package.json b/.storybook/package.json index c2e562c15f4..f16cc430df0 100644 --- a/.storybook/package.json +++ b/.storybook/package.json @@ -1,6 +1,6 @@ { "name": "@spectrum-css/preview", - "version": "8.0.4", + "version": "8.1.0-next.0", "description": "A Spectrum CSS preview", "license": "Apache-2.0", "author": "Adobe", @@ -11,7 +11,7 @@ }, "dependencies": { "@adobe/spectrum-css-workflow-icons": "^1.5.4", - "@spectrum-css/tokens": "^13.2.0", + "@spectrum-css/tokens": "^14.0.0-next.3", "@spectrum-css/ui-icons": "^1.1.2" }, "devDependencies": { diff --git a/.storybook/preview.js b/.storybook/preview.js index 5578d8c2b73..8a3b42114e9 100644 --- a/.storybook/preview.js +++ b/.storybook/preview.js @@ -3,11 +3,11 @@ import DocumentationTemplate from './DocumentationTemplate.mdx'; import { withActions } from "@storybook/addon-actions/decorator"; import { - withContextWrapper, - withLanguageWrapper, - withReducedMotionWrapper, - withTestingPreviewWrapper, - withTextDirectionWrapper, + withContextWrapper, + withLanguageWrapper, + withReducedMotionWrapper, + withTestingPreviewWrapper, + withTextDirectionWrapper, } from "./decorators/index.js"; // https://github.com/storybookjs/storybook-addon-console @@ -191,7 +191,7 @@ export const parameters = { options: { storySort: { method: "alphabetical", - order: ['Guides', ['Contributing', '*', 'Adobe Code of Conduct', 'Changelog'], 'Components', ['Docs', 'Default', '*'], '*'], + order: ['Guides', ['Contributing', '*', 'Adobe Code of Conduct', 'Changelog'], 'Foundations', 'Components', ['Docs', 'Default', '*'], '*'], includeNames: true, }, }, diff --git a/components/accordion/index.css b/components/accordion/index.css index b6bec7f80c1..2ee38eb88ef 100644 --- a/components/accordion/index.css +++ b/components/accordion/index.css @@ -120,7 +120,7 @@ governing permissions and limitations under the License. ); /* Divider */ - --spectrum-accordion-divider-color: var(--spectrum-gray-300); + --spectrum-accordion-divider-color: var(--spectrum-gray-200); --spectrum-accordion-min-block-size: max( var(--mod-accordion-item-height, var(--spectrum-accordion-item-height)), calc( diff --git a/components/accordion/package.json b/components/accordion/package.json index ec17b8f0b87..92aaf2a8e5d 100644 --- a/components/accordion/package.json +++ b/components/accordion/package.json @@ -1,6 +1,6 @@ { "name": "@spectrum-css/accordion", - "version": "4.2.6", + "version": "4.2.7-next.1", "description": "The Spectrum CSS accordion component", "license": "Apache-2.0", "author": "Adobe", @@ -16,7 +16,7 @@ "main": "dist/index.css", "peerDependencies": { "@spectrum-css/icon": ">=4", - "@spectrum-css/tokens": ">=13" + "@spectrum-css/tokens": "^14.0.0-next.3" }, "publishConfig": { "access": "public" diff --git a/components/actionbar/index.css b/components/actionbar/index.css index f8ee7db67a1..4ad4cbc120c 100644 --- a/components/actionbar/index.css +++ b/components/actionbar/index.css @@ -26,7 +26,7 @@ governing permissions and limitations under the License. } /* colors - applied to popover */ - --spectrum-actionbar-popover-background-color: var(--spectrum-gray-50); + --spectrum-actionbar-popover-background-color: var(--spectrum-gray-25); --spectrum-actionbar-popover-border-color: var(--spectrum-gray-400); /* emphasized variation colors */ diff --git a/components/actionbar/package.json b/components/actionbar/package.json index 87a95a0daab..b42dff463a1 100644 --- a/components/actionbar/package.json +++ b/components/actionbar/package.json @@ -1,6 +1,6 @@ { "name": "@spectrum-css/actionbar", - "version": "7.2.4", + "version": "7.2.5-next.1", "description": "The Spectrum CSS actionbar component", "license": "Apache-2.0", "author": "Adobe", @@ -19,7 +19,7 @@ "@spectrum-css/closebutton": ">=4", "@spectrum-css/fieldlabel": ">=7", "@spectrum-css/popover": ">=6", - "@spectrum-css/tokens": ">=13" + "@spectrum-css/tokens": "^14.0.0-next.3" }, "publishConfig": { "access": "public" diff --git a/components/actionbutton/index.css b/components/actionbutton/index.css index 61ca44b8cab..5fe6f581daa 100644 --- a/components/actionbutton/index.css +++ b/components/actionbutton/index.css @@ -15,7 +15,7 @@ governing permissions and limitations under the License. .spectrum-ActionButton { --spectrum-actionbutton-animation-duration: var(--spectrum-animation-duration-100); - --spectrum-actionbutton-border-radius: var(--spectrum-corner-radius-100); + --spectrum-actionbutton-border-radius: var(--spectrum-corner-radius-medium-size-medium); --spectrum-actionbutton-border-width: var(--spectrum-border-width-100); --spectrum-actionbutton-content-color-default: var(--spectrum-neutral-content-color-default); @@ -39,10 +39,10 @@ governing permissions and limitations under the License. --mod-actionbutton-background-color-down: var(--mod-actionbutton-background-color-down-selected, var(--spectrum-neutral-background-color-selected-down)); --mod-actionbutton-background-color-focus: var(--mod-actionbutton-background-color-focus-selected, var(--spectrum-neutral-background-color-selected-key-focus)); - --mod-actionbutton-content-color-default: var(--mod-actionbutton-content-color-default-selected, var(--spectrum-gray-50)); - --mod-actionbutton-content-color-hover: var(--mod-actionbutton-content-color-hover-selected, var(--spectrum-gray-50)); - --mod-actionbutton-content-color-down: var(--mod-actionbutton-content-color-down-selected, var(--spectrum-gray-50)); - --mod-actionbutton-content-color-focus: var(--mod-actionbutton-content-color-focus-selected, var(--spectrum-gray-50)); + --mod-actionbutton-content-color-default: var(--mod-actionbutton-content-color-default-selected, var(--spectrum-gray-25)); + --mod-actionbutton-content-color-hover: var(--mod-actionbutton-content-color-hover-selected, var(--spectrum-gray-25)); + --mod-actionbutton-content-color-down: var(--mod-actionbutton-content-color-down-selected, var(--spectrum-gray-25)); + --mod-actionbutton-content-color-focus: var(--mod-actionbutton-content-color-focus-selected, var(--spectrum-gray-25)); &.spectrum-ActionButton--emphasized { --mod-actionbutton-background-color-default: var(--mod-actionbutton-background-color-default-selected-emphasized, var(--spectrum-accent-background-color-default)); @@ -59,6 +59,8 @@ governing permissions and limitations under the License. } .spectrum-ActionButton--sizeXS { + --spectrum-actionbutton-border-radius: var(--spectrum-corner-radius-medium-size-extra-small); + --spectrum-actionbutton-min-width: calc((var(--spectrum-component-edge-to-visual-only-50) * 2) + var(--spectrum-workflow-icon-size-50)); --spectrum-actionbutton-height: var(--spectrum-component-height-50); @@ -72,6 +74,8 @@ governing permissions and limitations under the License. } .spectrum-ActionButton--sizeS { + --spectrum-actionbutton-border-radius: var(--spectrum-corner-radius-medium-size-small); + --spectrum-actionbutton-min-width: calc((var(--spectrum-component-edge-to-visual-only-75) * 2) + var(--spectrum-workflow-icon-size-75)); --spectrum-actionbutton-height: var(--spectrum-component-height-75); @@ -85,6 +89,8 @@ governing permissions and limitations under the License. } .spectrum-ActionButton--sizeM { + --spectrum-actionbutton-border-radius: var(--spectrum-corner-radius-medium-size-medium); + --spectrum-actionbutton-min-width: calc((var(--spectrum-component-edge-to-visual-only-100) * 2) + var(--spectrum-workflow-icon-size-100)); --spectrum-actionbutton-height: var(--spectrum-component-height-100); @@ -98,6 +104,8 @@ governing permissions and limitations under the License. } .spectrum-ActionButton--sizeL { + --spectrum-actionbutton-border-radius: var(--spectrum-corner-radius-medium-size-large); + --spectrum-actionbutton-min-width: calc((var(--spectrum-component-edge-to-visual-only-200) * 2) + var(--spectrum-workflow-icon-size-200)); --spectrum-actionbutton-height: var(--spectrum-component-height-200); @@ -111,6 +119,8 @@ governing permissions and limitations under the License. } .spectrum-ActionButton--sizeXL { + --spectrum-actionbutton-border-radius: var(--spectrum-corner-radius-medium-size-extra-large); + --spectrum-actionbutton-min-width: calc((var(--spectrum-component-edge-to-visual-only-300) * 2) + var(--spectrum-workflow-icon-size-300)); --spectrum-actionbutton-height: var(--spectrum-component-height-300); diff --git a/components/actionbutton/metadata/actionbutton.yml b/components/actionbutton/metadata/actionbutton.yml index acc03b5be7c..e2cdbb7badf 100644 --- a/components/actionbutton/metadata/actionbutton.yml +++ b/components/actionbutton/metadata/actionbutton.yml @@ -12,16 +12,24 @@ sections: This component can be modified via its `--mod-*` prefixed custom properties. A list of those prefixed custom properties can be found <a class="spectrum-Link" href="https://github.com/adobe/spectrum-css/tree/main/components/actionbutton/metadata/mods.md">here</a>. - name: Migration Guide description: | - ### Action Button now requires a class on its icon + ### x/x/2024 - Version 6.0.0 + #### Spectrum 2 release + Action button now uses Spectrum 2 tokens and specifications. A few notable changes: + - The mod custom property `--mod-line-height-100` has been renamed to `--mod-button-line-height`. + - The mod custom property `--mod-sans-font-family-stack` has been renamed to `--mod-button-font-family`. + - The mod custom property `--mod-animation-duration-100` has been renamed to `--mod-button-animation-duration`. + + ### Versions prior to 6.0.0 + #### Action Button now requires a class on its icon The `.spectrum-ActionButton-icon` class is now required on the icon. - ### T-shirt sizing + #### T-shirt sizing Action Button now supports t-shirt sizing and requires that you specify the size by adding a `.spectrum-ActionButton--size*` class. - ### Action Button is now a separate component + #### Action Button is now a separate component Action Button has been moved to the [Action Button](actionbutton.html) component. - ### Change workflow icon size + #### Change workflow icon size Previously, all Action Buttons used `.spectrum-Icon--sizeS`. This has changed: @@ -33,7 +41,7 @@ sections: | `.spectrum-ActionButton--sizeL` | `.spectrum-Icon--sizeL` | | `.spectrum-ActionButton--sizeXL` | `.spectrum-Icon--sizeXL` | - ### Change hold icon classnames + #### Change hold icon classnames Hold icon classnames must be set as follows: @@ -45,10 +53,10 @@ sections: | `.spectrum-ActionButton--sizeL` | `.spectrum-UIIcon-CornerTriangle200` | | `.spectrum-ActionButton--sizeXL` | `.spectrum-UIIcon-CornerTriangle300` | - ### Include markup for hold icon before workflow icon + #### Include markup for hold icon before workflow icon Because of the way padding is calculated, the hold icon must be placed before the workflow icon. - ### Remove focus-ring class + #### Remove focus-ring class We've migrated away from the focus-ring class in favor of the native `:focus-visible` pseudo-class due to changes in browser support. examples: - id: actionbutton-sizing diff --git a/components/actionbutton/metadata/mods.md b/components/actionbutton/metadata/mods.md index 1ee43dbeda1..fd40645cf65 100644 --- a/components/actionbutton/metadata/mods.md +++ b/components/actionbutton/metadata/mods.md @@ -49,9 +49,6 @@ | `--mod-actionbutton-min-width` | | `--mod-actionbutton-static-content-color` | | `--mod-actionbutton-text-to-visual` | -| `--mod-animation-duration-100` | | `--mod-button-animation-duration` | | `--mod-button-font-family` | | `--mod-button-line-height` | -| `--mod-line-height-100` | -| `--mod-sans-font-family-stack` | diff --git a/components/actionbutton/package.json b/components/actionbutton/package.json index ba22e72b1c2..a16c08f02c7 100644 --- a/components/actionbutton/package.json +++ b/components/actionbutton/package.json @@ -1,6 +1,6 @@ { "name": "@spectrum-css/actionbutton", - "version": "5.2.6", + "version": "5.2.7-next.1", "description": "The Spectrum CSS action button component", "license": "Apache-2.0", "author": "Adobe", @@ -16,7 +16,7 @@ "main": "dist/index.css", "peerDependencies": { "@spectrum-css/icon": ">=4", - "@spectrum-css/tokens": ">=13" + "@spectrum-css/tokens": "^14.0.0-next.3" }, "peerDependenciesMeta": { "@spectrum-css/icon": { @@ -24,7 +24,7 @@ } }, "devDependencies": { - "@spectrum-css/commons": "^9.1.3" + "@spectrum-css/commons": "^9.1.4-next.0" }, "publishConfig": { "access": "public" diff --git a/components/actionbutton/themes/express.css b/components/actionbutton/themes/express.css index f56b4e5081b..70f3a177ba1 100644 --- a/components/actionbutton/themes/express.css +++ b/components/actionbutton/themes/express.css @@ -14,10 +14,10 @@ governing permissions and limitations under the License. @container (--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-default: var(--spectrum-gray-100); + --spectrum-actionbutton-background-color-hover: var(--spectrum-gray-200); --spectrum-actionbutton-background-color-down: var(--spectrum-gray-400); - --spectrum-actionbutton-background-color-focus: var(--spectrum-gray-300); + --spectrum-actionbutton-background-color-focus: var(--spectrum-gray-200); --spectrum-actionbutton-border-color-default: transparent; --spectrum-actionbutton-border-color-hover: transparent; @@ -29,9 +29,9 @@ governing permissions and limitations under the License. &.spectrum-ActionButton--quiet { --spectrum-actionbutton-background-color-default: transparent; - --spectrum-actionbutton-background-color-hover: var(--spectrum-gray-300); + --spectrum-actionbutton-background-color-hover: var(--spectrum-gray-200); --spectrum-actionbutton-background-color-down: var(--spectrum-gray-400); - --spectrum-actionbutton-background-color-focus: var(--spectrum-gray-300); + --spectrum-actionbutton-background-color-focus: var(--spectrum-gray-200); } &.spectrum-ActionButton--staticBlack, diff --git a/components/actionbutton/themes/spectrum.css b/components/actionbutton/themes/spectrum.css index 30de8aaf3a6..23a64b906b8 100644 --- a/components/actionbutton/themes/spectrum.css +++ b/components/actionbutton/themes/spectrum.css @@ -12,10 +12,10 @@ governing permissions and limitations under the License. @container (--system: spectrum) { .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-default: var(--spectrum-gray-50); + --spectrum-actionbutton-background-color-hover: var(--spectrum-gray-100); + --spectrum-actionbutton-background-color-down: var(--spectrum-gray-200); + --spectrum-actionbutton-background-color-focus: var(--spectrum-gray-100); --spectrum-actionbutton-border-color-default: var(--spectrum-gray-400); --spectrum-actionbutton-border-color-hover: var(--spectrum-gray-500); @@ -28,9 +28,9 @@ governing permissions and limitations under the License. &.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-300); - --spectrum-actionbutton-background-color-focus: var(--spectrum-gray-200); + --spectrum-actionbutton-background-color-hover: var(--spectrum-gray-100); + --spectrum-actionbutton-background-color-down: var(--spectrum-gray-200); + --spectrum-actionbutton-background-color-focus: var(--spectrum-gray-100); --spectrum-actionbutton-border-color-default: transparent; --spectrum-actionbutton-border-color-hover: transparent; diff --git a/components/actiongroup/CHANGELOG.md b/components/actiongroup/CHANGELOG.md index 487f6357f49..8d5a41938a4 100644 --- a/components/actiongroup/CHANGELOG.md +++ b/components/actiongroup/CHANGELOG.md @@ -3,6 +3,19 @@ All notable changes to this project will be documented in this file. See [Conventional Commits](https://conventionalcommits.org) for commit guidelines. +<a name="5.0.0-next.0"></a> +#5.0.0-next.0 +🗓 +2024-02-06 • 📝 [Commits](https://github.com/adobe/spectrum-css/compare/@spectrum-css/actiongroup@4.2.0...@spectrum-css/actiongroup@5.0.0-next.0) + +\*feat(actiongroup)!: migrate to S2 (#2453)([afb5788](https://github.com/adobe/spectrum-css/commit/afb5788)), closes[#2453](https://github.com/adobe/spectrum-css/issues/2453) + + ### + 🛑 BREAKING CHANGES + + * + migrates `Action Group` to Spectrum 2, Removes some mod properties + <a name="4.2.5"></a> ##4.2.5 🗓 diff --git a/components/actiongroup/index.css b/components/actiongroup/index.css index 7f78b2945f1..492f0be14f5 100644 --- a/components/actiongroup/index.css +++ b/components/actiongroup/index.css @@ -16,6 +16,7 @@ governing permissions and limitations under the License. --spectrum-actiongroup-button-spacing-reset: 0; --spectrum-actiongroup-border-radius-reset: 0; --spectrum-actiongroup-border-radius: var(--spectrum-corner-radius-100); + --spectrum-actiongroup-gap-size-compact: var(--spectrum-spacing-50); } .spectrum-ActionGroup--sizeXS, @@ -76,15 +77,6 @@ governing permissions and limitations under the License. border-start-start-radius: var(--mod-actiongroup-border-radius, var(--spectrum-actiongroup-border-radius)); border-end-start-radius: var(--mod-actiongroup-border-radius, var(--spectrum-actiongroup-border-radius)); - margin-inline-start: var(--mod-actiongroup-button-spacing-reset, var(--spectrum-actiongroup-button-spacing-reset)); - } - - & + .spectrum-ActionGroup-item { - /* Action button passthrough styling */ - --mod-actionbutton-focus-indicator-border-radius: 0px; - - margin-inline-start: var(--mod-actiongroup-horizontal-spacing-compact, var(--spectrum-actiongroup-horizontal-spacing-compact)); - margin-inline-end: var(--mod-actiongroup-horizontal-spacing-compact, var(--spectrum-actiongroup-horizontal-spacing-compact)); } &:last-child { @@ -93,8 +85,6 @@ governing permissions and limitations under the License. border-start-end-radius: var(--mod-actiongroup-border-radius, var(--spectrum-actiongroup-border-radius)); border-end-end-radius: var(--mod-actiongroup-border-radius, var(--spectrum-actiongroup-border-radius)); - margin-inline-start: var(--mod-actiongroup-horizontal-spacing-compact, var(--spectrum-actiongroup-horizontal-spacing-compact)); - margin-inline-end: var(--mod-actiongroup-border-radius-reset, var(--spectrum-actiongroup-border-radius-reset)); } &.is-selected { @@ -128,16 +118,6 @@ governing permissions and limitations under the License. border-start-start-radius: var(--mod-actiongroup-border-radius, var(--spectrum-actiongroup-border-radius)); border-start-end-radius: var(--mod-actiongroup-border-radius, var(--spectrum-actiongroup-border-radius)); - margin-inline-end: var(--mod-actiongroup-button-spacing-reset, var(--spectrum-actiongroup-button-spacing-reset)); - margin-block-start: var(--mod-actiongroup-vertical-spacing-compact, var(--spectrum-actiongroup-vertical-spacing-compact)); - margin-block-end: var(--mod-actiongroup-vertical-spacing-compact, var(--spectrum-actiongroup-vertical-spacing-compact)); - } - - & + .spectrum-ActionGroup-item { - margin-inline-start: var(--mod-actiongroup-button-spacing-reset, var(--spectrum-actiongroup-button-spacing-reset)); - margin-inline-end: var(--mod-actiongroup-button-spacing-reset, var(--spectrum-actiongroup-button-spacing-reset)); - margin-block-start: var(--mod-actiongroup-button-spacing-reset, var(--spectrum-actiongroup-button-spacing-reset)); - margin-block-end: var(--mod-actiongroup-vertical-spacing-compact, var(--spectrum-actiongroup-vertical-spacing-compact)); } &:last-child { @@ -146,8 +126,6 @@ governing permissions and limitations under the License. border-end-start-radius: var(--mod-actiongroup-border-radius, var(--spectrum-actiongroup-border-radius)); border-end-end-radius: var(--mod-actiongroup-border-radius, var(--spectrum-actiongroup-border-radius)); - margin-block-start: var(--mod-actiongroup-vertical-spacing-compact, var(--spectrum-actiongroup-vertical-spacing-compact)); - margin-block-end: var(--mod-actiongroup-button-spacing-reset, var(--spectrum-actiongroup-button-spacing-reset)); } } } diff --git a/components/actiongroup/metadata/mods.md b/components/actiongroup/metadata/mods.md index 2fcc384c89f..50e28461152 100644 --- a/components/actiongroup/metadata/mods.md +++ b/components/actiongroup/metadata/mods.md @@ -2,9 +2,6 @@ | ---------------------------------------------- | | `--mod-actiongroup-border-radius` | | `--mod-actiongroup-border-radius-reset` | -| `--mod-actiongroup-button-spacing-reset` | | `--mod-actiongroup-gap-size-compact` | -| `--mod-actiongroup-horizontal-spacing-compact` | | `--mod-actiongroup-horizontal-spacing-regular` | -| `--mod-actiongroup-vertical-spacing-compact` | | `--mod-actiongroup-vertical-spacing-regular` | diff --git a/components/actiongroup/package.json b/components/actiongroup/package.json index 2a7831523f0..51a99ca9b08 100644 --- a/components/actiongroup/package.json +++ b/components/actiongroup/package.json @@ -1,6 +1,6 @@ { "name": "@spectrum-css/actiongroup", - "version": "4.2.5", + "version": "5.0.0-next.2", "description": "The Spectrum CSS actiongroup component", "license": "Apache-2.0", "author": "Adobe", @@ -16,7 +16,7 @@ "main": "dist/index.css", "peerDependencies": { "@spectrum-css/actionbutton": ">=5", - "@spectrum-css/tokens": ">=13" + "@spectrum-css/tokens": "^14.0.0-next.3" }, "peerDependenciesMeta": { "@spectrum-css/actionbutton": { diff --git a/components/actiongroup/stories/actiongroup.stories.js b/components/actiongroup/stories/actiongroup.stories.js index 056eb3d71f9..77eb03f8345 100644 --- a/components/actiongroup/stories/actiongroup.stories.js +++ b/components/actiongroup/stories/actiongroup.stories.js @@ -117,8 +117,22 @@ Justified.args = { content: items }; +export const JustifiedCompact = Template.bind({}); +JustifiedCompact.args = { + justified: true, + compact: true, + content: items, +}; + export const Quiet = Template.bind({}); Quiet.args = { areQuiet: true, content: items }; + +export const QuietCompact = Template.bind({}); +QuietCompact.args = { + areQuiet: true, + compact: true, + content: items, +}; diff --git a/components/actiongroup/themes/express.css b/components/actiongroup/themes/express.css index 73630a7c0b2..48de489f60a 100644 --- a/components/actiongroup/themes/express.css +++ b/components/actiongroup/themes/express.css @@ -13,11 +13,4 @@ governing permissions and limitations under the License. @import "./spectrum.css"; @container (--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.css b/components/actiongroup/themes/spectrum.css index 0b606f3f6b3..7507c3c1e64 100644 --- a/components/actiongroup/themes/spectrum.css +++ b/components/actiongroup/themes/spectrum.css @@ -11,11 +11,4 @@ governing permissions and limitations under the License. */ @container (--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/actionmenu/package.json b/components/actionmenu/package.json index d62624d9b1b..1afb40d35c2 100644 --- a/components/actionmenu/package.json +++ b/components/actionmenu/package.json @@ -1,6 +1,6 @@ { "name": "@spectrum-css/actionmenu", - "version": "5.1.3", + "version": "5.1.4-next.1", "description": "The Spectrum CSS actionmenu component", "license": "Apache-2.0", "author": "Adobe", @@ -19,7 +19,7 @@ "@spectrum-css/icon": ">=4", "@spectrum-css/menu": ">=5", "@spectrum-css/popover": ">=6", - "@spectrum-css/tokens": ">=13" + "@spectrum-css/tokens": "^14.0.0-next.3" }, "publishConfig": { "access": "public" diff --git a/components/alertbanner/package.json b/components/alertbanner/package.json index 8a39aba796b..36b55df1cfd 100644 --- a/components/alertbanner/package.json +++ b/components/alertbanner/package.json @@ -1,6 +1,6 @@ { "name": "@spectrum-css/alertbanner", - "version": "1.1.41", + "version": "1.1.42-next.1", "description": "The Spectrum CSS alertbanner component", "license": "Apache-2.0", "author": "Adobe", @@ -19,7 +19,7 @@ "@spectrum-css/closebutton": ">=4", "@spectrum-css/divider": ">=2", "@spectrum-css/icon": ">=4", - "@spectrum-css/tokens": ">=13" + "@spectrum-css/tokens": "^14.0.0-next.3" }, "peerDependenciesMeta": { "@spectrum-css/icon": { diff --git a/components/alertdialog/package.json b/components/alertdialog/package.json index 562d6a6b27f..35841344a6b 100644 --- a/components/alertdialog/package.json +++ b/components/alertdialog/package.json @@ -1,6 +1,6 @@ { "name": "@spectrum-css/alertdialog", - "version": "1.2.4", + "version": "1.2.5-next.1", "description": "The Spectrum CSS alertdialog component", "license": "Apache-2.0", "author": "Adobe", @@ -19,7 +19,7 @@ "@spectrum-css/divider": ">=2", "@spectrum-css/icon": ">=4", "@spectrum-css/modal": ">=4", - "@spectrum-css/tokens": ">=13", + "@spectrum-css/tokens": "^14.0.0-next.3", "@spectrum-css/underlay": ">=3" }, "peerDependenciesMeta": { diff --git a/components/asset/index.css b/components/asset/index.css index 29fdf09c0fd..8c83901a8de 100644 --- a/components/asset/index.css +++ b/components/asset/index.css @@ -42,7 +42,7 @@ governing permissions and limitations under the License. --highcontrast-asset-folder-background-color, var( --mod-asset-folder-background-color, - var(--spectrum-gray-300) + var(--spectrum-gray-200) ) ); } @@ -52,7 +52,7 @@ governing permissions and limitations under the License. --highcontrast-asset-file-background-color, var( --mod-asset-file-background-color, - var(--spectrum-gray-50) + var(--spectrum-gray-25) ) ); } diff --git a/components/asset/package.json b/components/asset/package.json index 8ccf0fd141c..ff2003edb37 100644 --- a/components/asset/package.json +++ b/components/asset/package.json @@ -1,6 +1,6 @@ { "name": "@spectrum-css/asset", - "version": "4.0.0", + "version": "4.0.1-next.1", "description": "The Spectrum CSS asset component", "license": "Apache-2.0", "author": "Adobe", @@ -15,7 +15,7 @@ }, "main": "dist/index.css", "peerDependencies": { - "@spectrum-css/tokens": ">=13" + "@spectrum-css/tokens": "^14.0.0-next.3" }, "publishConfig": { "access": "public" diff --git a/components/assetcard/index.css b/components/assetcard/index.css index 9e52732690b..c0b75ca6f3d 100644 --- a/components/assetcard/index.css +++ b/components/assetcard/index.css @@ -16,7 +16,7 @@ governing permissions and limitations under the License. .spectrum-AssetCard { /* todo: this isn't quite the size from the XD file as 232px is not a size token, so we use 224px */ --spectrum-assetcard-asset-size: 224px; - --spectrum-assetcard-background-color: var(--spectrum-gray-200); + --spectrum-assetcard-background-color: var(--spectrum-gray-100); --spectrum-assetcard-asset-animation-duration: var(--spectrum-animation-duration-100); --spectrum-assetcard-asset-container-border-size: 1px; --spectrum-assetcard-header-margin-block-start: var(--spectrum-spacing-300); diff --git a/components/assetcard/package.json b/components/assetcard/package.json index 2886e8e11a8..1d0bb82af78 100644 --- a/components/assetcard/package.json +++ b/components/assetcard/package.json @@ -1,6 +1,6 @@ { "name": "@spectrum-css/assetcard", - "version": "3.1.4", + "version": "3.1.5-next.1", "description": "The Spectrum CSS asset card component", "license": "Apache-2.0", "author": "Adobe", @@ -16,7 +16,7 @@ "main": "dist/index.css", "peerDependencies": { "@spectrum-css/checkbox": ">=7", - "@spectrum-css/tokens": ">=13" + "@spectrum-css/tokens": "^14.0.0-next.3" }, "peerDependenciesMeta": { "@spectrum-css/checkbox": { diff --git a/components/assetlist/index.css b/components/assetlist/index.css index c68b44ddc09..c25c662d68f 100644 --- a/components/assetlist/index.css +++ b/components/assetlist/index.css @@ -23,8 +23,8 @@ governing permissions and limitations under the License. --spectrum-assetlist-item-animation: var(--spectrum-animation-duration-100); --spectrum-assetlist-item-font-size: var(--spectrum-font-size-100); --spectrum-assetlist-item-font-weight: var(--spectrum-regular-font-weight); - --spectrum-assetlist-item-background-color-down: var(--spectrum-gray-300); - --spectrum-assetlist-item-background-color-hover: var(--spectrum-gray-200); + --spectrum-assetlist-item-background-color-down: var(--spectrum-gray-200); + --spectrum-assetlist-item-background-color-hover: var(--spectrum-gray-100); /* thumbnail */ --spectrum-assetlist-thumbnail-width: var(--spectrum-spacing-400); diff --git a/components/assetlist/package.json b/components/assetlist/package.json index 827fcf9e129..70dc2b666ac 100644 --- a/components/assetlist/package.json +++ b/components/assetlist/package.json @@ -1,6 +1,6 @@ { "name": "@spectrum-css/assetlist", - "version": "5.2.4", + "version": "5.2.5-next.1", "description": "The Spectrum CSS assetlist component", "license": "Apache-2.0", "author": "Adobe", @@ -17,7 +17,7 @@ "peerDependencies": { "@spectrum-css/checkbox": ">=8", "@spectrum-css/icon": ">=4", - "@spectrum-css/tokens": ">=13" + "@spectrum-css/tokens": "^14.0.0-next.3" }, "peerDependenciesMeta": { "@spectrum-css/checkbox": { diff --git a/components/avatar/package.json b/components/avatar/package.json index 450a6f78a68..843d12a7b47 100644 --- a/components/avatar/package.json +++ b/components/avatar/package.json @@ -1,6 +1,6 @@ { "name": "@spectrum-css/avatar", - "version": "6.1.5", + "version": "6.1.6-next.1", "description": "The Spectrum CSS avatar component", "license": "Apache-2.0", "author": "Adobe", @@ -15,7 +15,7 @@ }, "main": "dist/index.css", "peerDependencies": { - "@spectrum-css/tokens": ">=13" + "@spectrum-css/tokens": "^14.0.0-next.3" }, "publishConfig": { "access": "public" diff --git a/components/badge/package.json b/components/badge/package.json index 52904522302..bacbcb6e76e 100644 --- a/components/badge/package.json +++ b/components/badge/package.json @@ -1,6 +1,6 @@ { "name": "@spectrum-css/badge", - "version": "3.2.5", + "version": "3.2.6-next.1", "description": "The Spectrum CSS badge component", "license": "Apache-2.0", "author": "Adobe", @@ -16,7 +16,7 @@ "main": "dist/index.css", "peerDependencies": { "@spectrum-css/icon": ">=4", - "@spectrum-css/tokens": ">=13" + "@spectrum-css/tokens": "^14.0.0-next.3" }, "peerDependenciesMeta": { "@spectrum-css/icon": { diff --git a/components/breadcrumb/package.json b/components/breadcrumb/package.json index f731fc33958..ded5c9998bc 100644 --- a/components/breadcrumb/package.json +++ b/components/breadcrumb/package.json @@ -1,6 +1,6 @@ { "name": "@spectrum-css/breadcrumb", - "version": "8.2.5", + "version": "8.2.6-next.1", "description": "The Spectrum CSS breadcrumb component", "license": "Apache-2.0", "author": "Adobe", @@ -17,7 +17,7 @@ "peerDependencies": { "@spectrum-css/actionbutton": ">=5", "@spectrum-css/icon": ">=4", - "@spectrum-css/tokens": ">=13" + "@spectrum-css/tokens": "^14.0.0-next.3" }, "peerDependenciesMeta": { "@spectrum-css/actionbutton": { diff --git a/components/button/index.css b/components/button/index.css index e6fc0d85beb..ec317bb6271 100644 --- a/components/button/index.css +++ b/components/button/index.css @@ -27,6 +27,8 @@ governing permissions and limitations under the License. --spectrum-button-intended-icon-size: var(--spectrum-workflow-icon-size-50); --mod-progress-circle-position: absolute; + /* stylelint-disable-next-line spectrum-tools/no-unknown-custom-properties */ + --spectrum-downstate-perspective: max(var(--spectrum-downstate-height), var(--spectrum-downstate-width) * var(--spectrum-component-size-width-ratio-down)); } .spectrum-Button--sizeS { @@ -45,6 +47,10 @@ governing permissions and limitations under the License. --spectrum-button-bottom-to-text: var(--spectrum-button-bottom-to-text-small); --spectrum-button-top-to-icon: var(--spectrum-component-top-to-workflow-icon-75); --spectrum-button-intended-icon-size: var(--spectrum-workflow-icon-size-75); + + &.spectrum-Button--iconOnly { + --spectrum-downstate-perspective: var(--spectrum-component-size-minimum-perspective-down); + } } .spectrum-Button--sizeM { @@ -130,6 +136,10 @@ governing permissions and limitations under the License. box-shadow: none; } + &:active { + transform: perspective(var(--spectrum-downstate-perspective)) translateZ(var(--spectrum-component-size-difference-down)); + } + .spectrum-Icon { /* Any block-size difference between the intended workflow icon size and actual icon used. Helps support any existing use of smaller UI icons instead of intended Workflow icons. */ diff --git a/components/button/metadata/button-accent.yml b/components/button/metadata/button-accent.yml index 8d3be60b926..9870c50f9ec 100644 --- a/components/button/metadata/button-accent.yml +++ b/components/button/metadata/button-accent.yml @@ -8,20 +8,28 @@ sections: This component can be modified via its `--mod-*` prefixed custom properties. A list of those prefixed custom properties can be found <a class="spectrum-Link" href="https://github.com/adobe/spectrum-css/tree/main/components/button/metadata/mods.md">here</a>. - name: Migration Guide description: | - ### Fill or Outline class required + ### x/x/2024 - Version 13.0.0 + #### Spectrum 2 release + Button now uses Spectrum 2 tokens and specifications. A few notable changes: + - The mod custom property `--mod-line-height-100` has been renamed to `--mod-button-line-height`. + - The mod custom property `--mod-sans-font-family-stack` has been renamed to `--mod-button-font-family`. + - The mod custom property `--mod-animation-duration-100` has been renamed to `--mod-button-animation-duration`. + + ### Versions prior to 13.0.0 + #### Fill or Outline class required All buttons now require either the `.spectrum-Button--fill` or `.spectrum-Button--outline` class. - ### CTA replaced by Accent with Fill + #### CTA replaced by Accent with Fill Replace all `.spectrum-Button--cta` with `.spectrum-Button--accent .spectrum-Button--fill`. - ### Icon Only + #### Icon Only Add the `.spectrum-Button--iconOnly` class to apply the correct styling when an icon is used without a label. Provide an `aria-label` on the button itself when using this variant for accessibility. - ### T-shirt sizing + #### T-shirt sizing Button now supports t-shirt sizing and requires that you specify the size of button by adding a `.spectrum-Button--size*` class. - ### Change workflow icon size + #### Change workflow icon size Previously, all Buttons used `.spectrum-Icon--sizeS`. This has changed: @@ -32,7 +40,7 @@ sections: | `.spectrum-Button--sizeL` | `.spectrum-Icon--sizeL` | | `.spectrum-Button--sizeXL` | `.spectrum-Icon--sizeXL` | - ### Remove focus-ring class + #### Remove focus-ring class We've migrated away from the focus-ring class in favor of the native `:focus-visible` pseudo-class due to changes in browser support. examples: - id: button-accent diff --git a/components/button/metadata/button-negative.yml b/components/button/metadata/button-negative.yml index 9acb42c7e1f..633599be170 100644 --- a/components/button/metadata/button-negative.yml +++ b/components/button/metadata/button-negative.yml @@ -8,23 +8,31 @@ sections: This component can be modified via its `--mod-*` prefixed custom properties. A list of those prefixed custom properties can be found <a class="spectrum-Link" href="https://github.com/adobe/spectrum-css/tree/main/components/button/metadata/mods.md">here</a>. - name: Migration Guide description: | - ### Fill or Outline class required + ### x/x/2024 - Version 13.0.0 + #### Spectrum 2 release + Button now uses Spectrum 2 tokens and specifications. A few notable changes: + - The mod custom property `--mod-line-height-100` has been renamed to `--mod-button-line-height`. + - The mod custom property `--mod-sans-font-family-stack` has been renamed to `--mod-button-font-family`. + - The mod custom property `--mod-animation-duration-100` has been renamed to `--mod-button-animation-duration`. + + ### Versions prior to 13.0.0 + #### Fill or Outline class required All buttons now require either the `.spectrum-Button--fill` or `.spectrum-Button--outline` class. - ### Negative replaced by Negative with Outline + #### Negative replaced by Negative with Outline Replace all `.spectrum-Button--negative` with `.spectrum-Button--negative .spectrum-Button--outline`. - ### Negative Quiet replaced by Negative with Outline + #### Negative Quiet replaced by Negative with Outline Replace all `.spectrum-Button--negative .spectrum-Button--quiet` with `.spectrum-Button--negative .spectrum-Button--outline`. - ### Icon Only + #### Icon Only Add the `.spectrum-Button--iconOnly` class to apply the correct styling when an icon is used without a label. Provide an `aria-label` on the button itself when using this variant for accessibility. - ### T-shirt sizing + #### T-shirt sizing Button now supports t-shirt sizing and requires that you specify the size of button by adding a `.spectrum-Button--size*` class. - ### Change workflow icon size + #### Change workflow icon size Previously, all Buttons used `.spectrum-Icon--sizeS`. This has changed: @@ -35,7 +43,7 @@ sections: | `.spectrum-Button--sizeL` | `.spectrum-Icon--sizeL` | | `.spectrum-Button--sizeXL` | `.spectrum-Icon--sizeXL` | - ### Remove focus-ring class + #### Remove focus-ring class We've migrated away from the focus-ring class in favor of the native `:focus-visible` pseudo-class due to changes in browser support. examples: - id: button-negative diff --git a/components/button/metadata/button-primary.yml b/components/button/metadata/button-primary.yml index e7bb7f449ec..707495aec11 100644 --- a/components/button/metadata/button-primary.yml +++ b/components/button/metadata/button-primary.yml @@ -8,23 +8,31 @@ sections: This component can be modified via its `--mod-*` prefixed custom properties. A list of those prefixed custom properties can be found <a class="spectrum-Link" href="https://github.com/adobe/spectrum-css/tree/main/components/button/metadata/mods.md">here</a>. - name: Migration Guide description: | - ### Fill or Outline class required + ### x/x/2024 - Version 13.0.0 + #### Spectrum 2 release + Button now uses Spectrum 2 tokens and specifications. A few notable changes: + - The mod custom property `--mod-line-height-100` has been renamed to `--mod-button-line-height`. + - The mod custom property `--mod-sans-font-family-stack` has been renamed to `--mod-button-font-family`. + - The mod custom property `--mod-animation-duration-100` has been renamed to `--mod-button-animation-duration`. + + ### Versions prior to 13.0.0 + #### Fill or Outline class required All buttons now require either the `.spectrum-Button--fill` or `.spectrum-Button--outline` class. - ### Primary replaced by Primary with Outline + #### Primary replaced by Primary with Outline Replace all `.spectrum-Button--primary` with `.spectrum-Button--primary .spectrum-Button--outline`. - ### Primary Quiet replaced by Secondary with Outline + #### Primary Quiet replaced by Secondary with Outline Replace all `.spectrum-Button--primary .spectrum-Button--quiet` with `.spectrum-Button--secondary .spectrum-Button--outline`. - ### Icon Only + #### Icon Only Add the `.spectrum-Button--iconOnly` class to apply the correct styling when an icon is used without a label. Provide an `aria-label` on the button itself when using this variant for accessibility. - ### T-shirt sizing + #### T-shirt sizing Button now supports t-shirt sizing and requires that you specify the size of button by adding a `.spectrum-Button--size*` class. - ### Change workflow icon size + #### Change workflow icon size Previously, all Buttons used `.spectrum-Icon--sizeS`. This has changed: @@ -35,7 +43,7 @@ sections: | `.spectrum-Button--sizeL` | `.spectrum-Icon--sizeL` | | `.spectrum-Button--sizeXL` | `.spectrum-Icon--sizeXL` | - ### Remove focus-ring class + #### Remove focus-ring class We've migrated away from the focus-ring class in favor of the native `:focus-visible` pseudo-class due to changes in browser support. examples: - id: button-primary diff --git a/components/button/metadata/button-secondary.yml b/components/button/metadata/button-secondary.yml index 7b86a380ffc..989879ab204 100644 --- a/components/button/metadata/button-secondary.yml +++ b/components/button/metadata/button-secondary.yml @@ -8,23 +8,31 @@ sections: This component can be modified via its `--mod-*` prefixed custom properties. A list of those prefixed custom properties can be found <a class="spectrum-Link" href="https://github.com/adobe/spectrum-css/tree/main/components/button/metadata/mods.md">here</a>. - name: Migration Guide description: | - ### Fill or Outline class required + ### x/x/2024 - Version 13.0.0 + #### Spectrum 2 release + Button now uses Spectrum 2 tokens and specifications. A few notable changes: + - The mod custom property `--mod-line-height-100` has been renamed to `--mod-button-line-height`. + - The mod custom property `--mod-sans-font-family-stack` has been renamed to `--mod-button-font-family`. + - The mod custom property `--mod-animation-duration-100` has been renamed to `--mod-button-animation-duration`. + + ### Versions prior to 13.0.0 + #### Fill or Outline class required All buttons now require either the `.spectrum-Button--fill` or `.spectrum-Button--outline` class. - ### Secondary replaced by Secondary with Outline + #### Secondary replaced by Secondary with Outline Replace all `.spectrum-Button--secondary` with `.spectrum-Button--secondary .spectrum-Button--outline`. - ### Secondary Quiet replaced by Secondary with Outline + #### Secondary Quiet replaced by Secondary with Outline Replace all `.spectrum-Button--secondary .spectrum-Button--quiet` with `.spectrum-Button--secondary .spectrum-Button--outline`. - ### Icon Only + #### Icon Only Add the `.spectrum-Button--iconOnly` class to apply the correct styling when an icon is used without a label. Provide an `aria-label` on the button itself when using this variant for accessibility. - ### T-shirt sizing + #### T-shirt sizing Button now supports t-shirt sizing and requires that you specify the size of button by adding a `.spectrum-Button--size*` class. - ### Change workflow icon size + #### Change workflow icon size Previously, all Buttons used `.spectrum-Icon--sizeS`. This has changed: @@ -35,7 +43,7 @@ sections: | `.spectrum-Button--sizeL` | `.spectrum-Icon--sizeL` | | `.spectrum-Button--sizeXL` | `.spectrum-Icon--sizeXL` | - ### Remove focus-ring class + #### Remove focus-ring class We've migrated away from the focus-ring class in favor of the native `:focus-visible` pseudo-class due to changes in browser support. examples: - id: button-secondary diff --git a/components/button/metadata/button-staticcolor.yml b/components/button/metadata/button-staticcolor.yml index ae8792424af..9c588cf0298 100644 --- a/components/button/metadata/button-staticcolor.yml +++ b/components/button/metadata/button-staticcolor.yml @@ -8,23 +8,31 @@ sections: This component can be modified via its `--mod-*` prefixed custom properties. A list of those prefixed custom properties can be found <a class="spectrum-Link" href="https://github.com/adobe/spectrum-css/tree/main/components/button/metadata/mods.md">here</a>. - name: Migration Guide description: | - ### Fill or Outline class required + ### x/x/2024 - Version 13.0.0 + #### Spectrum 2 release + Button now uses Spectrum 2 tokens and specifications. A few notable changes: + - The mod custom property `--mod-line-height-100` has been renamed to `--mod-button-line-height`. + - The mod custom property `--mod-sans-font-family-stack` has been renamed to `--mod-button-font-family`. + - The mod custom property `--mod-animation-duration-100` has been renamed to `--mod-button-animation-duration`. + + ### Versions prior to 13.0.0 + #### Fill or Outline class required All buttons now require either the `.spectrum-Button--fill` or `.spectrum-Button--outline` class. - ### Over background replaced by StaticWhite with Outline + #### Over background replaced by StaticWhite with Outline Replace all `.spectrum-Button--overBackground` with `.spectrum-Button--staticWhite .spectrum-Button--outline`. - ### Over background Quiet replaced by StaticWhite with Outline + #### Over background Quiet replaced by StaticWhite with Outline Replace all `.spectrum-Button--overBackground .spectrum-Button--quiet` with `.spectrum-Button--staticWhite .spectrum-Button--outline`. - ### Icon Only + #### Icon Only Add the `.spectrum-Button--iconOnly` class to apply the correct styling when an icon is used without a label. Provide an `aria-label` on the button itself when using this variant for accessibility. - ### T-shirt sizing + #### T-shirt sizing Button now supports t-shirt sizing and requires that you specify the size of button by adding a `.spectrum-Button--size*` class. - ### Change workflow icon size + #### Change workflow icon size Previously, all Buttons used `.spectrum-Icon--sizeS`. This has changed: @@ -35,7 +43,7 @@ sections: | `.spectrum-Button--sizeL` | `.spectrum-Icon--sizeL` | | `.spectrum-Button--sizeXL` | `.spectrum-Icon--sizeXL` | - ### Remove focus-ring class + #### Remove focus-ring class We've migrated away from the focus-ring class in favor of the native `:focus-visible` pseudo-class due to changes in browser support. examples: - id: button-staticcolor diff --git a/components/button/metadata/mods.md b/components/button/metadata/mods.md index c8fa31d2674..4460826b8ac 100644 --- a/components/button/metadata/mods.md +++ b/components/button/metadata/mods.md @@ -1,6 +1,5 @@ | Modifiable custom properties | | ------------------------------------------ | -| `--mod-animation-duration-100` | | `--mod-bold-font-weight` | | `--mod-button-animation-duration` | | `--mod-button-background-color-default` | @@ -45,6 +44,4 @@ | `--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` | diff --git a/components/button/package.json b/components/button/package.json index b0464e1df1b..047131f6dd6 100644 --- a/components/button/package.json +++ b/components/button/package.json @@ -1,6 +1,6 @@ { "name": "@spectrum-css/button", - "version": "12.0.2", + "version": "14.0.0-next.3", "description": "The Spectrum CSS button component", "license": "Apache-2.0", "author": "Adobe", @@ -17,7 +17,7 @@ "peerDependencies": { "@spectrum-css/icon": ">=6", "@spectrum-css/progresscircle": ">=2", - "@spectrum-css/tokens": ">=13" + "@spectrum-css/tokens": "^14.0.0-next.3" }, "peerDependenciesMeta": { "@spectrum-css/icon": { @@ -28,7 +28,7 @@ } }, "devDependencies": { - "@spectrum-css/commons": "^9.1.3" + "@spectrum-css/commons": "^9.1.4-next.0" }, "publishConfig": { "access": "public" diff --git a/components/button/stories/button.stories.js b/components/button/stories/button.stories.js index cfd3c877d4f..d2cbe6ffe3f 100644 --- a/components/button/stories/button.stories.js +++ b/components/button/stories/button.stories.js @@ -1,5 +1,7 @@ import { html } from "lit"; import { styleMap } from "lit/directives/style-map.js"; +import { when } from "lit/directives/when.js"; +import { withDownStateDimensionCapture } from "../../../.storybook/decorators"; import { default as IconStories } from "@spectrum-css/icon/stories/icon.stories.js"; import { Template as Typography } from "@spectrum-css/typography/stories/template.js"; @@ -12,6 +14,7 @@ import { Template } from "./template"; export default { title: "Components/Button", component: "Button", + decorators: [withDownStateDimensionCapture('.spectrum-Button:not(:disabled)')], argTypes: { size: { name: "Size", diff --git a/components/button/themes/express.css b/components/button/themes/express.css index 495d6cf1fcc..d23f67bfcc2 100644 --- a/components/button/themes/express.css +++ b/components/button/themes/express.css @@ -14,10 +14,10 @@ governing permissions and limitations under the License. @container (--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-default: var(--spectrum-gray-100); + --spectrum-button-background-color-hover: var(--spectrum-gray-200); --spectrum-button-background-color-down: var(--spectrum-gray-400); - --spectrum-button-background-color-focus: var(--spectrum-gray-300); + --spectrum-button-background-color-focus: var(--spectrum-gray-200); --spectrum-button-border-color-default: transparent; --spectrum-button-border-color-hover: transparent; diff --git a/components/button/themes/spectrum.css b/components/button/themes/spectrum.css index 2b1ded8454d..b90399e6cdc 100644 --- a/components/button/themes/spectrum.css +++ b/components/button/themes/spectrum.css @@ -12,10 +12,10 @@ governing permissions and limitations under the License. @container (--system: spectrum) { .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-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); @@ -139,9 +139,9 @@ governing permissions and limitations under the License. &.spectrum-Button--outline { --spectrum-button-background-color-default: transparent; - --spectrum-button-background-color-hover: var(--spectrum-gray-300); + --spectrum-button-background-color-hover: var(--spectrum-gray-200); --spectrum-button-background-color-down: var(--spectrum-gray-400); - --spectrum-button-background-color-focus: var(--spectrum-gray-300); + --spectrum-button-background-color-focus: var(--spectrum-gray-200); --spectrum-button-border-color-default: var(--spectrum-gray-800); --spectrum-button-border-color-hover: var(--spectrum-gray-900); @@ -160,10 +160,10 @@ governing permissions and limitations under the License. } &.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-default: var(--spectrum-gray-100); + --spectrum-button-background-color-hover: var(--spectrum-gray-200); --spectrum-button-background-color-down: var(--spectrum-gray-400); - --spectrum-button-background-color-focus: var(--spectrum-gray-300); + --spectrum-button-background-color-focus: var(--spectrum-gray-200); --spectrum-button-border-color-default: transparent; --spectrum-button-border-color-hover: transparent; @@ -181,11 +181,11 @@ governing permissions and limitations under the License. &.spectrum-Button--outline { --spectrum-button-background-color-default: transparent; - --spectrum-button-background-color-hover: var(--spectrum-gray-300); + --spectrum-button-background-color-hover: var(--spectrum-gray-200); --spectrum-button-background-color-down: var(--spectrum-gray-400); - --spectrum-button-background-color-focus: var(--spectrum-gray-300); + --spectrum-button-background-color-focus: var(--spectrum-gray-200); - --spectrum-button-border-color-default: var(--spectrum-gray-300); + --spectrum-button-border-color-default: var(--spectrum-gray-200); --spectrum-button-border-color-hover: var(--spectrum-gray-400); --spectrum-button-border-color-down: var(--spectrum-gray-500); --spectrum-button-border-color-focus: var(--spectrum-gray-400); @@ -203,9 +203,9 @@ governing permissions and limitations under the License. &.spectrum-Button--quiet { --spectrum-button-background-color-default: transparent; - --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-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: transparent; --spectrum-button-border-color-hover: transparent; diff --git a/components/buttongroup/CHANGELOG.md b/components/buttongroup/CHANGELOG.md index 1bfb8315c75..dd09b85eb8f 100644 --- a/components/buttongroup/CHANGELOG.md +++ b/components/buttongroup/CHANGELOG.md @@ -3,6 +3,24 @@ All notable changes to this project will be documented in this file. See [Conventional Commits](https://conventionalcommits.org) for commit guidelines. +<a name="7.0.0-next.0"></a> +#7.0.0-next.0 +🗓 +2024-02-06 • 📝 [Commits](https://github.com/adobe/spectrum-css/compare/@spectrum-css/buttongroup@6.2.0...@spectrum-css/buttongroup@7.0.0-next.0) + +\*feat(buttongroup)!: migrate to S2 (#2457)([66d2cee](https://github.com/adobe/spectrum-css/commit/66d2cee)), closes[#2457](https://github.com/adobe/spectrum-css/issues/2457) + + ### + 🛑 BREAKING CHANGES + + * + migrates Button Group to Spectrum 2 + +Also: + +- docs(buttongroup): expand chromatic coverage +- refactor(buttongroup): remove extra css classes + <a name="6.2.5"></a> ##6.2.5 🗓 diff --git a/components/buttongroup/index.css b/components/buttongroup/index.css index ebc9683da69..bdaf0716ccb 100644 --- a/components/buttongroup/index.css +++ b/components/buttongroup/index.css @@ -11,28 +11,13 @@ governing permissions and limitations under the License. */ .spectrum-ButtonGroup { - --spectrum-buttongroup-spacing-horizontal: var(--spectrum-spacing-300); - --spectrum-buttongroup-spacing-vertical: var(--spectrum-spacing-300); -} - -.spectrum-ButtonGroup--sizeS { --spectrum-buttongroup-spacing-horizontal: var(--spectrum-spacing-200); --spectrum-buttongroup-spacing-vertical: var(--spectrum-spacing-200); } -.spectrum-ButtonGroup--sizeM { - --spectrum-buttongroup-spacing-horizontal: var(--spectrum-spacing-300); - --spectrum-buttongroup-spacing-vertical: var(--spectrum-spacing-300); -} - -.spectrum-ButtonGroup--sizeL { - --spectrum-buttongroup-spacing-horizontal: var(--spectrum-spacing-300); - --spectrum-buttongroup-spacing-vertical: var(--spectrum-spacing-300); -} - -.spectrum-ButtonGroup--sizeXL { - --spectrum-buttongroup-spacing-horizontal: var(--spectrum-spacing-300); - --spectrum-buttongroup-spacing-vertical: var(--spectrum-spacing-300); +.spectrum-ButtonGroup--sizeS { + --spectrum-buttongroup-spacing-horizontal: var(--spectrum-spacing-100); + --spectrum-buttongroup-spacing-vertical: var(--spectrum-spacing-100); } .spectrum-ButtonGroup { diff --git a/components/buttongroup/metadata/buttongroup.yml b/components/buttongroup/metadata/buttongroup.yml index f35ccb05ec5..b74efb3726c 100644 --- a/components/buttongroup/metadata/buttongroup.yml +++ b/components/buttongroup/metadata/buttongroup.yml @@ -1,6 +1,11 @@ name: Button group SpectrumSiteSlug: https://spectrum.adobe.com/page/button/ sections: + - name: Migration Guide + description: | + ### 1/24/2024 - Version 7.0.0 + #### Spectrum 2 migration also removed `.spectrum-ButtonGroup--sizeM`, `.spectrum-ButtonGroup--sizeL`, and `.spectrum-ButtonGroup--sizeXL` + Since each of these classes were using the same tokens for spacing, these classes were removed. - name: Custom Properties API description: | This component can be modified via its `--mod-*` prefixed custom properties. A list of those prefixed custom properties can be found <a class="spectrum-Link" href="https://github.com/adobe/spectrum-css/tree/main/components/buttongroup/metadata/mods.md">here</a>. @@ -8,7 +13,7 @@ examples: - id: buttongroup-horizontal name: Horizontal description: | - Default spacing for Medium, Large, and Extra Large t-shirt sizes. + Default horizontal spacing for when using medium, large, and extra large buttons. markup: | <div class="spectrum-ButtonGroup"> <button class="spectrum-Button spectrum-Button--sizeM spectrum-Button--outline spectrum-Button--secondary spectrum-ButtonGroup-item"> @@ -25,7 +30,7 @@ examples: - id: buttongroup-horizontal-small name: Horizontal - Small description: | - Spacing for the Small t-shirt size. + Horizontal spacing for the small t-shirt size. Should be used with small buttons. markup: | <div class="spectrum-ButtonGroup spectrum-ButtonGroup--sizeS"> <button class="spectrum-Button spectrum-Button--sizeS spectrum-Button--outline spectrum-Button--secondary spectrum-ButtonGroup-item"> @@ -42,7 +47,7 @@ examples: - id: buttongroup-vertical name: Vertical description: | - Default spacing for Medium, Large, and Extra Large t-shirt sizes. + Default vertical spacing for when using medium, large, and extra large buttons. markup: | <div class="spectrum-ButtonGroup spectrum-ButtonGroup--vertical"> <button class="spectrum-Button spectrum-Button--sizeM spectrum-Button--outline spectrum-Button--secondary spectrum-ButtonGroup-item"> @@ -59,7 +64,7 @@ examples: - id: buttongroup-vertical-small name: Vertical - Small description: | - Spacing for the Small t-shirt size. + Vertical spacing for the small t-shirt size. Should be used with small buttons. markup: | <div class="spectrum-ButtonGroup spectrum-ButtonGroup--sizeS spectrum-ButtonGroup--vertical"> <button class="spectrum-Button spectrum-Button--sizeS spectrum-Button--outline spectrum-Button--secondary spectrum-ButtonGroup-item"> diff --git a/components/buttongroup/package.json b/components/buttongroup/package.json index e3c7d312b1c..f37b3575890 100644 --- a/components/buttongroup/package.json +++ b/components/buttongroup/package.json @@ -1,6 +1,6 @@ { "name": "@spectrum-css/buttongroup", - "version": "6.2.5", + "version": "7.0.0-next.2", "description": "The Spectrum CSS buttongroup component", "license": "Apache-2.0", "author": "Adobe", @@ -16,7 +16,7 @@ "main": "dist/index.css", "peerDependencies": { "@spectrum-css/button": ">=11", - "@spectrum-css/tokens": ">=13" + "@spectrum-css/tokens": "^14.0.0-next.3" }, "publishConfig": { "access": "public" diff --git a/components/buttongroup/stories/buttongroup.stories.js b/components/buttongroup/stories/buttongroup.stories.js index f5a55fe207c..bfb413ee525 100644 --- a/components/buttongroup/stories/buttongroup.stories.js +++ b/components/buttongroup/stories/buttongroup.stories.js @@ -1,5 +1,7 @@ // Import the component markup template import { Template } from "./template"; +import isChromatic from "chromatic/isChromatic"; +import { html } from "lit"; export default { title: "Components/Button group", @@ -43,7 +45,17 @@ export default { }, }; -export const Default = Template.bind({}); +const chromaticKitchenSink = (args) => html` + <div style="display: grid; justify-content: start; gap: 2rem;"> + ${Template(args)} + ${Template({ + ...args, + size: "s" + })} + </div> +`; + +export const Default = (args) => isChromatic() ? chromaticKitchenSink(args) : Template(args); Default.args = { items: [ { @@ -65,7 +77,7 @@ Default.args = { ], }; -export const Vertical = Template.bind({}); +export const Vertical = (args) => isChromatic() ? chromaticKitchenSink(args) : Template(args); Vertical.args = { vertical: true, items: [ diff --git a/components/calendar/package.json b/components/calendar/package.json index 118d39edd3a..48e49f93d45 100644 --- a/components/calendar/package.json +++ b/components/calendar/package.json @@ -1,6 +1,6 @@ { "name": "@spectrum-css/calendar", - "version": "4.2.5", + "version": "4.2.6-next.1", "description": "The Spectrum CSS calendar component", "license": "Apache-2.0", "author": "Adobe", @@ -16,7 +16,7 @@ "main": "dist/index.css", "peerDependencies": { "@spectrum-css/actionbutton": ">=5", - "@spectrum-css/tokens": ">=13" + "@spectrum-css/tokens": "^14.0.0-next.3" }, "publishConfig": { "access": "public" diff --git a/components/card/index.css b/components/card/index.css index 191ceb4acf2..c379113c1ad 100644 --- a/components/card/index.css +++ b/components/card/index.css @@ -23,11 +23,11 @@ governing permissions and limitations under the License. --spectrum-card-border-width: var(--spectrum-border-width-100); --spectrum-card-corner-radius: var(--spectrum-corner-radius-100); - --spectrum-card-border-color: var(--spectrum-gray-200); - --spectrum-card-border-color-hover: var(--spectrum-gray-300); + --spectrum-card-border-color: var(--spectrum-gray-100); + --spectrum-card-border-color-hover: var(--spectrum-gray-200); --spectrum-card-border-color-selected: var(--spectrum-blue-700); - --spectrum-card-divider-color: var(--spectrum-gray-300); + --spectrum-card-divider-color: var(--spectrum-gray-200); /* Typography */ --spectrum-card-title-font-family: var(--spectrum-sans-font-family-stack); @@ -99,6 +99,19 @@ governing permissions and limitations under the License. ); } + &--quiet, + &--gallery, + &--horizontal { + --mod-card-preview-background-color: var( + --spectrum-card-preview-background-color-quiet, + var(--spectrum-background-base-color) + ); + --spectrum-card-preview-background-color-hover: var( + --spectrum-card-background-color-hover-quiet, + var(--spectrum-gray-200) + ); + } + --spectrum-card-preview-border-width-selected: var(--spectrum-border-width-100); --spectrum-card-preview-background-color: var(--spectrum-background-base-color); --spectrum-card-preview-background-color-hover: var(--spectrum-gray-300); @@ -679,9 +692,9 @@ governing permissions and limitations under the License. var(--spectrum-card-corner-radius) ); background-color: var( - --mod-card-preview-background-color, + --mod-card-preview-background-color, var( - --mod-card-background-color, + --mod-card-background-color, var(--spectrum-card-preview-background-color) ) ); @@ -760,9 +773,9 @@ governing permissions and limitations under the License. .spectrum-Card-preview { transition: none; background-color: var( - --mod-card-preview-background-color, + --mod-card-preview-background-color, var( - --mod-card-background-color, + --mod-card-background-color, var(--spectrum-card-preview-background-color) ) ); diff --git a/components/card/package.json b/components/card/package.json index 4d45d49755a..de2322aed97 100644 --- a/components/card/package.json +++ b/components/card/package.json @@ -1,6 +1,6 @@ { "name": "@spectrum-css/card", - "version": "7.0.2", + "version": "7.0.3-next.1", "description": "The Spectrum CSS card component", "license": "Apache-2.0", "author": "Adobe", @@ -20,7 +20,7 @@ "@spectrum-css/checkbox": ">=8", "@spectrum-css/icon": ">=4", "@spectrum-css/quickaction": ">=3", - "@spectrum-css/tokens": ">=13", + "@spectrum-css/tokens": "^14.0.0-next.3", "@spectrum-css/typography": ">=4 <=5" }, "peerDependenciesMeta": { diff --git a/components/checkbox/index.css b/components/checkbox/index.css index 759fc11e8cf..14c4560f507 100644 --- a/components/checkbox/index.css +++ b/components/checkbox/index.css @@ -30,7 +30,7 @@ governing permissions and limitations under the License. --spectrum-checkbox-content-color-disabled: var(--spectrum-disabled-content-color); --spectrum-checkbox-control-color-disabled: var(--spectrum-disabled-content-color); - --spectrum-checkbox-checkmark-color: var(--spectrum-gray-75); + --spectrum-checkbox-checkmark-color: var(--spectrum-gray-50); --spectrum-checkbox-invalid-color-default: var(--spectrum-negative-color-900); --spectrum-checkbox-invalid-color-hover: var(--spectrum-negative-color-1000); @@ -55,7 +55,7 @@ governing permissions and limitations under the License. /* Size */ --spectrum-checkbox-height: var(--spectrum-component-height-100); --spectrum-checkbox-control-size: var(--spectrum-checkbox-control-size-medium); - --spectrum-checkbox-control-corner-radius: var(--spectrum-corner-radius-75); + --spectrum-checkbox-control-corner-radius: var(--spectrum-corner-radius-small-size-medium); --spectrum-checkbox-focus-indicator-gap: var(--spectrum-focus-indicator-gap); --spectrum-checkbox-focus-indicator-thickness: var(--spectrum-focus-indicator-thickness); @@ -70,6 +70,8 @@ governing permissions and limitations under the License. } .spectrum-Checkbox--sizeS { + --spectrum-checkbox-control-corner-radius: var(--spectrum-corner-radius-small-size-small); + --spectrum-checkbox-font-size: var(--spectrum-font-size-75); --spectrum-checkbox-height: var(--spectrum-component-height-75); @@ -79,17 +81,9 @@ governing permissions and limitations under the License. --spectrum-checkbox-text-to-control: var(--spectrum-text-to-control-75); } -.spectrum-Checkbox--sizeM { - --spectrum-checkbox-font-size: var(--spectrum-font-size-100); - - --spectrum-checkbox-height: var(--spectrum-component-height-100); - --spectrum-checkbox-control-size: var(--spectrum-checkbox-control-size-medium); - - --spectrum-checkbox-top-to-text: var(--spectrum-component-top-to-text-100); - --spectrum-checkbox-text-to-control: var(--spectrum-text-to-control-100); -} - .spectrum-Checkbox--sizeL { + --spectrum-checkbox-control-corner-radius: var(--spectrum-corner-radius-small-size-large); + --spectrum-checkbox-font-size: var(--spectrum-font-size-200); --spectrum-checkbox-height: var(--spectrum-component-height-200); @@ -100,6 +94,8 @@ governing permissions and limitations under the License. } .spectrum-Checkbox--sizeXL { + --spectrum-checkbox-control-corner-radius: var(--spectrum-corner-radius-small-size-extra-large); + --spectrum-checkbox-font-size: var(--spectrum-font-size-300); --spectrum-checkbox-height: var(--spectrum-component-height-300); @@ -152,6 +148,12 @@ governing permissions and limitations under the License. } } + &:not(.is-readOnly):active { + .spectrum-Checkbox-input:not(:disabled) + .spectrum-Checkbox-box { + transform: perspective(var(--spectrum-component-size-minimum-perspective-down)) translateZ(var(--spectrum-component-size-difference-down)); + } + } + /* Selected Invalid */ &.is-invalid { .spectrum-Checkbox-input:checked + .spectrum-Checkbox-box, @@ -374,6 +376,7 @@ governing permissions and limitations under the License. } } } + /* stylelint-enable max-nesting-depth */ .spectrum-Checkbox-label { diff --git a/components/checkbox/package.json b/components/checkbox/package.json index 81fa66f1cbc..f666f677111 100644 --- a/components/checkbox/package.json +++ b/components/checkbox/package.json @@ -1,6 +1,6 @@ { "name": "@spectrum-css/checkbox", - "version": "8.1.5", + "version": "14.0.0-next.3", "description": "The Spectrum CSS checkbox component", "license": "Apache-2.0", "author": "Adobe", @@ -16,7 +16,7 @@ "main": "dist/index.css", "peerDependencies": { "@spectrum-css/icon": ">=4", - "@spectrum-css/tokens": ">=13" + "@spectrum-css/tokens": "^14.0.0-next.3" }, "publishConfig": { "access": "public" diff --git a/components/clearbutton/package.json b/components/clearbutton/package.json index 5ad41f95b47..294116edaa1 100644 --- a/components/clearbutton/package.json +++ b/components/clearbutton/package.json @@ -1,6 +1,6 @@ { "name": "@spectrum-css/clearbutton", - "version": "5.1.4", + "version": "5.1.5-next.1", "description": "The Spectrum CSS clearbutton component", "license": "Apache-2.0", "author": "Adobe", @@ -16,7 +16,7 @@ "main": "dist/index.css", "peerDependencies": { "@spectrum-css/icon": ">=4", - "@spectrum-css/tokens": ">=13" + "@spectrum-css/tokens": "^14.0.0-next.3" }, "publishConfig": { "access": "public" diff --git a/components/clearbutton/themes/express.css b/components/clearbutton/themes/express.css index b7e935e3ec7..84006f7559f 100644 --- a/components/clearbutton/themes/express.css +++ b/components/clearbutton/themes/express.css @@ -13,9 +13,9 @@ governing permissions and limitations under the License. @container (--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: var(--spectrum-gray-100); + --spectrum-clear-button-background-color-hover: var(--spectrum-gray-200); --spectrum-clear-button-background-color-down: var(--spectrum-gray-400); - --spectrum-clear-button-background-color-key-focus: var(--spectrum-gray-300); + --spectrum-clear-button-background-color-key-focus: var(--spectrum-gray-200); } } diff --git a/components/closebutton/index.css b/components/closebutton/index.css index 74409297c65..dffc2e3cba4 100644 --- a/components/closebutton/index.css +++ b/components/closebutton/index.css @@ -1,5 +1,5 @@ /*! -Copyright 2023 Adobe. All rights reserved. +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 @@ -14,17 +14,13 @@ governing permissions and limitations under the License. /* closebutton/index.css * - * .spectrum-Closebutton::after is the Focus ring + * .spectrum-CloseButton::after is the Focus ring */ @import "@spectrum-css/commons/basebutton.css"; .spectrum-CloseButton { - /* Hardcoded tokens */ - --spectrum-closebutton-size-300: 24px; - --spectrum-closebutton-size-400: 32px; - --spectrum-closebutton-size-500: 40px; - --spectrum-closebutton-size-600: 48px; + --spectrum-closebutton-border-radius: var(--spectrum-corner-radius-full); /* Cross icon */ --spectrum-closebutton-icon-color-default: var(--spectrum-neutral-content-color-default); @@ -33,7 +29,7 @@ governing permissions and limitations under the License. --spectrum-closebutton-icon-color-focus: var(--spectrum-neutral-content-color-key-focus); --spectrum-closebutton-icon-color-disabled: var(--spectrum-disabled-content-color); - /* Focus ring */ + /* Focus indicator */ --spectrum-closebutton-focus-indicator-thickness: var(--spectrum-focus-indicator-thickness); --spectrum-closebutton-focus-indicator-gap: var(--spectrum-focus-indicator-gap); --spectrum-closebutton-focus-indicator-color: var(--spectrum-focus-indicator-color); @@ -41,57 +37,64 @@ governing permissions and limitations under the License. /* Size */ --spectrum-closebutton-height: var(--spectrum-component-height-100); --spectrum-closebutton-width: var(--spectrum-closebutton-height); - --spectrum-closebutton-size: var(--spectrum-closebutton-size-400); - --spectrum-closebutton-border-radius: var(--spectrum-closebutton-size-400); --spectrum-closebutton-animation-duration: var(--spectrum-animation-duration-100); -} -.spectrum-Closebutton--sizeS { - --spectrum-closebutton-height: var(--spectrum-component-height-75); - --spectrum-closebutton-width: var(--spectrum-closebutton-height); - --spectrum-closebutton-size: var(--spectrum-closebutton-size-300); - --spectrum-closebutton-border-radius: var(--spectrum-closebutton-size-300); + /* Background color */ + --spectrum-closebutton-background-color-default: transparent; + --spectrum-closebutton-background-color-hover: var(--spectrum-gray-100); + --spectrum-closebutton-background-color-down: var(--spectrum-gray-100); + --spectrum-closebutton-background-color-focus: var(--spectrum-gray-100); } -.spectrum-Closebutton--sizeM { - --spectrum-closebutton-height: var(--spectrum-component-height-100); +.spectrum-CloseButton--sizeS { + --spectrum-closebutton-height: var(--spectrum-component-height-75); --spectrum-closebutton-width: var(--spectrum-closebutton-height); - --spectrum-closebutton-size: var(--spectrum-closebutton-size-400); - --spectrum-closebutton-border-radius: var(--spectrum-closebutton-size-400); } -.spectrum-Closebutton--sizeL { +.spectrum-CloseButton--sizeL { --spectrum-closebutton-height: var(--spectrum-component-height-200); --spectrum-closebutton-width: var(--spectrum-closebutton-height); - --spectrum-closebutton-size: var(--spectrum-closebutton-size-500); - --spectrum-closebutton-border-radius: var(--spectrum-closebutton-size-500); } -.spectrum-Closebutton--sizeXL { +.spectrum-CloseButton--sizeXL { --spectrum-closebutton-height: var(--spectrum-component-height-300); --spectrum-closebutton-width: var(--spectrum-closebutton-height); - --spectrum-closebutton-size: var(--spectrum-closebutton-size-600); - --spectrum-closebutton-border-radius: var(--spectrum-closebutton-size-600); } .spectrum-CloseButton--staticWhite { - --spectrum-closebutton-static-background-color-default: transparent; - --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-icon-color-default: var(--spectrum-white); - --spectrum-closebutton-icon-color-disabled: var(--spectrum-disabled-static-white-content-color); + /* Cross icon */ + --spectrum-closebutton-icon-color-default: var(--spectrum-transparent-white-800); + --spectrum-closebutton-icon-color-hover: var(--spectrum-transparent-white-900); + --spectrum-closebutton-icon-color-down: var(--spectrum-transparent-white-900); + --spectrum-closebutton-icon-color-focus: var(--spectrum-transparent-white-900); + --spectrum-closebutton-icon-color-disabled: var(--spectrum-disabled-static-white-background-color); + + /* Background color */ + --spectrum-closebutton-background-color-default: transparent; + --spectrum-closebutton-background-color-hover: var(--spectrum-transparent-white-100); + --spectrum-closebutton-background-color-down: var(--spectrum-transparent-white-100); + --spectrum-closebutton-background-color-focus: var(--spectrum-transparent-white-100); + + /* Focus indicator */ --spectrum-closebutton-focus-indicator-color: var(--spectrum-static-white-focus-indicator-color); } .spectrum-CloseButton--staticBlack { - --spectrum-closebutton-static-background-color-default: transparent; - --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); - --spectrum-closebutton-icon-color-default: var(--spectrum-black); - --spectrum-closebutton-icon-color-disabled: var(--spectrum-disabled-static-black-content-color); + /* Cross icon */ + --spectrum-closebutton-icon-color-default: var(--spectrum-transparent-black-800); + --spectrum-closebutton-icon-color-hover: var(--spectrum-transparent-black-900); + --spectrum-closebutton-icon-color-down: var(--spectrum-transparent-black-900); + --spectrum-closebutton-icon-color-focus: var(--spectrum-transparent-black-900); + --spectrum-closebutton-icon-color-disabled: var(--spectrum-disabled-static-black-background-color); + + /* Background color */ + --spectrum-closebutton-background-color-default: transparent; + --spectrum-closebutton-background-color-hover: var(--spectrum-transparent-black-100); + --spectrum-closebutton-background-color-down: var(--spectrum-transparent-black-100); + --spectrum-closebutton-background-color-focus: var(--spectrum-transparent-black-100); + + /* Focus indicator */ --spectrum-closebutton-focus-indicator-color: var(--spectrum-static-black-focus-indicator-color); } @@ -167,7 +170,7 @@ a.spectrum-CloseButton { inset-block-end: 0; inset-block-start: 0; margin: calc(var(--mod-closebutton-focus-indicator-gap, var(--spectrum-closebutton-focus-indicator-gap)) * -1); - border-radius: calc(var(--mod-closebutton-size, var(--spectrum-closebutton-size)) + var(--mod-closebutton-focus-indicator-gap, var(--spectrum-closebutton-focus-indicator-gap))); + border-radius: calc(var(--mod-closebutton-border-radius, var(--spectrum-closebutton-border-radius)) + var(--mod-closebutton-focus-indicator-gap, var(--spectrum-closebutton-focus-indicator-gap))); transition: box-shadow var(--mod-closebutton-animation-duration, var(--spectrum-closebutton-animation-duration)) ease-in-out; } @@ -179,7 +182,6 @@ a.spectrum-CloseButton { box-shadow: 0 0 0 var(--mod-closebutton-focus-indicator-thickness, var(--spectrum-closebutton-focus-indicator-thickness)) var(--highcontrast-closebutton-focus-indicator-color, var(--mod-closebutton-focus-indicator-color, var(--spectrum-closebutton-focus-indicator-color))); - } } } @@ -233,55 +235,6 @@ a.spectrum-CloseButton { } } -/* Modifier Classes */ -.spectrum-CloseButton--staticBlack:not(:disabled), -.spectrum-CloseButton--staticWhite:not(:disabled) { - background-color: var(--highcontrast-closebutton-static-background-color-default, var(--mod-closebutton-static-background-color-default, var(--spectrum-closebutton-static-background-color-default))); - - &:hover { - background-color: var(--highcontrast-closebutton-static-background-color-hover, var(--mod-closebutton-static-background-color-hover, var(--spectrum-closebutton-static-background-color-hover))); - - .spectrum-CloseButton-UIIcon { - color: var(--highcontrast-closebutton-icon-color-default, var(--mod-closebutton-icon-color-default, var(--spectrum-closebutton-icon-color-default))); - } - } - - &:active { - background-color: var(--highcontrast-closebutton-static-background-color-down, var(--mod-closebutton-static-background-color-down, var(--spectrum-closebutton-static-background-color-down))); - - .spectrum-CloseButton-UIIcon { - color: var(--highcontrast-closebutton-icon-color-default, var(--mod-closebutton-icon-color-default, var(--spectrum-closebutton-icon-color-default))); - } - } - - &:focus-visible, - &.is-keyboardFocused { - background-color: var(--highcontrast-closebutton-static-background-color-focus, var(--mod-closebutton-static-background-color-focus, var(--spectrum-closebutton-static-background-color-focus))); - - .spectrum-CloseButton-UIIcon { - color: var(--highcontrast-closebutton-icon-color-default, var(--mod-closebutton-icon-color-default, var(--spectrum-closebutton-icon-color-default))); - } - } - - &:focus, - &.is-focused { - .spectrum-CloseButton-UIIcon { - color: var(--highcontrast-closebutton-icon-color-default, var(--mod-closebutton-icon-color-default, var(--spectrum-closebutton-icon-color-default))); - } - } - - .spectrum-CloseButton-UIIcon { - color: var(--mod-closebutton-icon-color-default, var(--spectrum-closebutton-icon-color-default)); - } -} - -.spectrum-CloseButton--staticBlack:disabled, -.spectrum-CloseButton--staticWhite:disabled { - .spectrum-CloseButton-UIIcon { - color: var(--highcontrast-closebutton-icon-disabled, var(--mod-closebutton-icon-color-disabled, var(--spectrum-closebutton-icon-color-disabled))); - } -} - .spectrum-CloseButton-UIIcon { margin: 0; } diff --git a/components/closebutton/metadata/closebutton.yml b/components/closebutton/metadata/closebutton.yml index 7e8b107e9ae..42da1f98b6e 100644 --- a/components/closebutton/metadata/closebutton.yml +++ b/components/closebutton/metadata/closebutton.yml @@ -8,8 +8,37 @@ sections: This component can be modified via its `--mod-*` prefixed custom properties. A list of those prefixed custom properties can be found <a class="spectrum-Link" href="https://github.com/adobe/spectrum-css/tree/main/components/closebutton/metadata/mods.md">here</a>. - name: Migration Guide description: | - ### Sizing - Close button supports different sized icons. By default, you should use the following icons: + ### x/x/2024 - Version 5.0.0 + #### Spectrum 2 release + Close button now uses Spectrum 2 tokens and specifications. A few notable changes and additions: + * Removes all static-specific `--mod` custom properties since they are no longer needed. The existing background-color mods can be used instead: + | Removed | + |-----------------------------------------------------| + | `--mod-closebutton-static-background-color-default` | + | `--mod-closebutton-static-background-color-down` | + | `--mod-closebutton-static-background-color-focus` | + | `--mod-closebutton-static-background-color-hover` | + + | Use these existing mods instead | + |----------------------------------------------| + | `--mod-closebutton-background-color-default` | + | `--mod-closebutton-background-color-down` | + | `--mod-closebutton-background-color-focus` | + | `--mod-closebutton-background-color-hover` | + + * The mod custom property `--mod-closebutton-size` has been removed. It was only used for rounded corners, that are now set with a single rounding token. + * The mod custom property `--mod-line-height-100` has been renamed to `--mod-button-line-height`. + * The mod custom property `--mod-sans-font-family-stack` has been renamed to `--mod-button-font-family`. + * The mod custom property `--mod-animation-duration-100` has been renamed to `--mod-button-animation-duration`. + * The regular and large "Icon size" variants have been removed. + + ### 8/16/2023 - Version 4.0.0 + #### Remove focus-ring class + We've migrated away from the focus-ring class in favor of the native `:focus-visible` pseudo-class due to changes in browser support. + + ### 8/3/2022 - Version 2.0.0 + #### Sizing and Spectrum tokens migration + Close button was migrated to use Spectrum tokens. Close button now supports different sizes. By default, the following icons should be used for each size: | Close button classname | UI icon classname | | ------------------------------- | --------------------------- | @@ -17,72 +46,18 @@ sections: | `.spectrum-CloseButton--sizeM` | `.spectrum-UIIcon-Cross100` | | `.spectrum-CloseButton--sizeL` | `.spectrum-UIIcon-Cross200` | | `.spectrum-CloseButton--sizeXL` | `.spectrum-UIIcon-Cross300` | - - ### Remove focus-ring class - We've migrated away from the focus-ring class in favor of the native `:focus-visible` pseudo-class due to changes in browser support. examples: - - id: close - name: Icon Size - Regular - markup: | - <div class="spectrum-Examples"> - <div class="spectrum-Examples-item"> - <h4 class="spectrum-Heading spectrum-Heading--sizeXS spectrum-Examples-itemHeading">S</h4> - - <div class="spectrum-Examples-itemGroup"> - <button class="spectrum-CloseButton spectrum-CloseButton--sizeS"> - <svg class="spectrum-CloseButton-UIIcon spectrum-Icon spectrum-UIIcon-Cross75" focusable="false" aria-hidden="true"> - <use xlink:href="#spectrum-css-icon-Cross75" /> - </svg> - </button> - </div> - </div> - <div class="spectrum-Examples-item"> - <h4 class="spectrum-Heading spectrum-Heading--sizeXS spectrum-Examples-itemHeading">M (default)</h4> - - <div class="spectrum-Examples-itemGroup"> - <button class="spectrum-CloseButton spectrum-CloseButton--sizeM"> - <svg class="spectrum-CloseButton-UIIcon spectrum-Icon spectrum-UIIcon-Cross100" focusable="false" aria-hidden="true"> - <use xlink:href="#spectrum-css-icon-Cross100" /> - </svg> - </button> - </div> - </div> - - <div class="spectrum-Examples-item"> - <h4 class="spectrum-Heading spectrum-Heading--sizeXS spectrum-Examples-itemHeading">L</h4> - - <div class="spectrum-Examples-itemGroup"> - <button class="spectrum-CloseButton spectrum-CloseButton--sizeL"> - <svg class="spectrum-CloseButton-UIIcon spectrum-Icon spectrum-UIIcon-Cross200" focusable="false" aria-hidden="true"> - <use xlink:href="#spectrum-css-icon-Cross200" /> - </svg> - </button> - </div> - </div> - - <div class="spectrum-Examples-item"> - <h4 class="spectrum-Heading spectrum-Heading--sizeXS spectrum-Examples-itemHeading">XL</h4> - - <div class="spectrum-Examples-itemGroup"> - <button class="spectrum-CloseButton spectrum-CloseButton--sizeXL"> - <svg class="spectrum-CloseButton-UIIcon spectrum-Icon spectrum-UIIcon-Cross300" focusable="false" aria-hidden="true"> - <use xlink:href="#spectrum-css-icon-Cross300" /> - </svg> - </button> - </div> - </div> - </div> - - id: closebutton-largeicon - name: Icon Size - Large + - id: closebutton + name: Sizing description: | - Close button supports different sized icons. For cases where you need large icons, you should use the following icons: - - | Close button classname | UI icon classname | - | ------------------------------- | --------------------------- | - | `.spectrum-CloseButton--sizeS` | `.spectrum-UIIcon-Cross200` | - | `.spectrum-CloseButton--sizeM` | `.spectrum-UIIcon-Cross300` | - | `.spectrum-CloseButton--sizeL` | `.spectrum-UIIcon-Cross400` | - | `.spectrum-CloseButton--sizeXL` | `.spectrum-UIIcon-Cross500` | + At each size, Close button uses a specific UI icon size: + + | Close button size | UI icon | + | ------------------ | ---------- | + | Small | `Cross200` | + | Medium | `Cross300` | + | Large | `Cross400` | + | Extra large | `Cross500` | markup: | <div class="spectrum-Examples"> <div class="spectrum-Examples-item"> diff --git a/components/closebutton/metadata/mods.md b/components/closebutton/metadata/mods.md index e3cb047528b..aef46b690ae 100644 --- a/components/closebutton/metadata/mods.md +++ b/components/closebutton/metadata/mods.md @@ -1,33 +1,25 @@ -| Modifiable custom properties | -| --------------------------------------------------- | -| `--mod-animation-duration-100` | -| `--mod-button-animation-duration` | -| `--mod-button-font-family` | -| `--mod-button-line-height` | -| `--mod-closebutton-align-self` | -| `--mod-closebutton-animation-duraction` | -| `--mod-closebutton-animation-duration` | -| `--mod-closebutton-background-color-default` | -| `--mod-closebutton-background-color-down` | -| `--mod-closebutton-background-color-focus` | -| `--mod-closebutton-background-color-hover` | -| `--mod-closebutton-border-radius` | -| `--mod-closebutton-focus-indicator-color` | -| `--mod-closebutton-focus-indicator-gap` | -| `--mod-closebutton-focus-indicator-thickness` | -| `--mod-closebutton-height` | -| `--mod-closebutton-icon-color-default` | -| `--mod-closebutton-icon-color-disabled` | -| `--mod-closebutton-icon-color-down` | -| `--mod-closebutton-icon-color-focus` | -| `--mod-closebutton-icon-color-hover` | -| `--mod-closebutton-margin-inline` | -| `--mod-closebutton-margin-top` | -| `--mod-closebutton-size` | -| `--mod-closebutton-static-background-color-default` | -| `--mod-closebutton-static-background-color-down` | -| `--mod-closebutton-static-background-color-focus` | -| `--mod-closebutton-static-background-color-hover` | -| `--mod-closebutton-width` | -| `--mod-line-height-100` | -| `--mod-sans-font-family-stack` | +| Modifiable custom properties | +| --------------------------------------------- | +| `--mod-button-animation-duration` | +| `--mod-button-font-family` | +| `--mod-button-line-height` | +| `--mod-closebutton-align-self` | +| `--mod-closebutton-animation-duraction` | +| `--mod-closebutton-animation-duration` | +| `--mod-closebutton-background-color-default` | +| `--mod-closebutton-background-color-down` | +| `--mod-closebutton-background-color-focus` | +| `--mod-closebutton-background-color-hover` | +| `--mod-closebutton-border-radius` | +| `--mod-closebutton-focus-indicator-color` | +| `--mod-closebutton-focus-indicator-gap` | +| `--mod-closebutton-focus-indicator-thickness` | +| `--mod-closebutton-height` | +| `--mod-closebutton-icon-color-default` | +| `--mod-closebutton-icon-color-disabled` | +| `--mod-closebutton-icon-color-down` | +| `--mod-closebutton-icon-color-focus` | +| `--mod-closebutton-icon-color-hover` | +| `--mod-closebutton-margin-inline` | +| `--mod-closebutton-margin-top` | +| `--mod-closebutton-width` | diff --git a/components/closebutton/package.json b/components/closebutton/package.json index dbacfeee066..52bd5c02e8a 100644 --- a/components/closebutton/package.json +++ b/components/closebutton/package.json @@ -1,6 +1,6 @@ { "name": "@spectrum-css/closebutton", - "version": "4.2.5", + "version": "5.0.0-next.1", "description": "The Spectrum CSS close button component", "license": "Apache-2.0", "author": "Adobe", @@ -16,10 +16,10 @@ "main": "dist/index.css", "peerDependencies": { "@spectrum-css/icon": ">=4", - "@spectrum-css/tokens": ">=13" + "@spectrum-css/tokens": "^14.0.0-next.3" }, "devDependencies": { - "@spectrum-css/commons": "^9.1.3" + "@spectrum-css/commons": "^9.1.4-next.0" }, "publishConfig": { "access": "public" diff --git a/components/closebutton/stories/closebutton.stories.js b/components/closebutton/stories/closebutton.stories.js index 2354d519670..8be568e580b 100644 --- a/components/closebutton/stories/closebutton.stories.js +++ b/components/closebutton/stories/closebutton.stories.js @@ -1,4 +1,8 @@ -// Import the component markup template +import { html } from "lit"; +import { ifDefined } from "lit/directives/if-defined.js"; +import { styleMap } from "lit/directives/style-map.js"; +import { when } from "lit/directives/when.js"; + import { Template } from "./template"; export default { @@ -51,5 +55,65 @@ export default { }, }; -export const Default = Template.bind({}); +const CloseButton = ({ + staticColor, + ...args +}) => { + return html` + <div + style=${ifDefined(styleMap({ + padding: "1rem", + backgroundColor: staticColor === "white" ? "rgb(15, 121, 125)" : staticColor === "black" ? "rgb(181, 209, 211)" : undefined, + }))} + > + ${Template({...args, staticColor})} + ${when(window.isChromatic(), () => + html` + ${Template({ + ...args, + isDisabled: true, + })} + ${html` + <div + style=${ifDefined(styleMap({ + padding: "1rem", + backgroundColor: "rgb(15, 121, 125)" + }))} + > + ${Template({ + ...args, + staticColor: "white", + })} + ${Template({ + ...args, + staticColor: "white", + isDisabled: true, + })} + </div> + `} + ${html` + <div + style=${ifDefined(styleMap({ + padding: "1rem", + backgroundColor: "rgb(181, 209, 211)" + }))} + > + ${Template({ + ...args, + staticColor: "black", + })} + ${Template({ + ...args, + staticColor: "black", + isDisabled: true, + })} + </div> + `} + ` + )} + </div> + `; +} + +export const Default = CloseButton.bind({}); Default.args = {}; diff --git a/components/closebutton/stories/template.js b/components/closebutton/stories/template.js index c96d015591f..5d6479b7156 100644 --- a/components/closebutton/stories/template.js +++ b/components/closebutton/stories/template.js @@ -2,7 +2,7 @@ import { html } from "lit"; import { classMap } from "lit/directives/class-map.js"; import { ifDefined } from "lit/directives/if-defined.js"; -import { upperCase, lowerCase, capitalize } from "lodash-es"; +import { capitalize, lowerCase, upperCase } from "lodash-es"; import { Template as Icon } from "@spectrum-css/icon/stories/template.js"; @@ -19,13 +19,19 @@ export const Template = ({ onclick, ...globals }) => { - const { express } = globals; - - try { - if (!express) import(/* webpackPrefetch: true */ "../themes/spectrum.css"); - else import(/* webpackPrefetch: true */ "../themes/express.css"); - } catch (e) { - console.warn(e); + let iconName = "Cross300"; + switch (size) { + case "s": + iconName = "Cross200"; + break; + case "l": + iconName = "Cross400"; + break; + case "xl": + iconName = "Cross500"; + break; + default: + iconName = "Cross300"; } return html` @@ -46,7 +52,7 @@ export const Template = ({ ${Icon({ ...globals, size, - iconName: "Cross", + iconName, customClasses: [`${rootClass}-UIIcon`], })} </button> diff --git a/components/closebutton/themes/express.css b/components/closebutton/themes/express.css index 482625bd921..aba9a602e0a 100644 --- a/components/closebutton/themes/express.css +++ b/components/closebutton/themes/express.css @@ -9,13 +9,11 @@ OF ANY KIND, either express or implied. See the License for the specific languag governing permissions and limitations under the License. */ -@import "./spectrum.css"; - @container (--system: express) { .spectrum-CloseButton { --spectrum-closebutton-background-color-default: transparent; - --spectrum-closebutton-background-color-hover: var(--spectrum-gray-300); + --spectrum-closebutton-background-color-hover: var(--spectrum-gray-200); --spectrum-closebutton-background-color-down: var(--spectrum-gray-400); - --spectrum-closebutton-background-color-focus: var(--spectrum-gray-300); + --spectrum-closebutton-background-color-focus: var(--spectrum-gray-200); } } diff --git a/components/closebutton/themes/spectrum.css b/components/closebutton/themes/spectrum.css index e14e52e3628..7315c90a7ab 100644 --- a/components/closebutton/themes/spectrum.css +++ b/components/closebutton/themes/spectrum.css @@ -12,8 +12,8 @@ governing permissions and limitations under the License. @container (--system: spectrum) { .spectrum-CloseButton { --spectrum-closebutton-background-color-default: transparent; - --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-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); } } diff --git a/components/coachindicator/package.json b/components/coachindicator/package.json index 170b07793b3..bf777e0d37a 100644 --- a/components/coachindicator/package.json +++ b/components/coachindicator/package.json @@ -1,6 +1,6 @@ { "name": "@spectrum-css/coachindicator", - "version": "1.1.5", + "version": "1.1.6-next.1", "description": "The Spectrum CSS Coach Indicator component ", "license": "Apache-2.0", "author": "Adobe", @@ -15,7 +15,7 @@ }, "main": "dist/index.css", "peerDependencies": { - "@spectrum-css/tokens": ">=13" + "@spectrum-css/tokens": "^14.0.0-next.3" }, "publishConfig": { "access": "public" diff --git a/components/coachmark/package.json b/components/coachmark/package.json index 59fae6860d1..dbaa3554044 100644 --- a/components/coachmark/package.json +++ b/components/coachmark/package.json @@ -1,6 +1,6 @@ { "name": "@spectrum-css/coachmark", - "version": "6.1.5", + "version": "6.1.6-next.1", "description": "The Spectrum CSS coachmark component", "license": "Apache-2.0", "author": "Adobe", @@ -21,7 +21,7 @@ "@spectrum-css/buttongroup": ">=6", "@spectrum-css/menu": ">=5", "@spectrum-css/popover": ">=6", - "@spectrum-css/tokens": ">=13" + "@spectrum-css/tokens": "^14.0.0-next.3" }, "peerDependenciesMeta": { "@spectrum-css/button": { diff --git a/components/colorarea/package.json b/components/colorarea/package.json index e5487b961c8..4e1f9a8b1c7 100644 --- a/components/colorarea/package.json +++ b/components/colorarea/package.json @@ -1,6 +1,6 @@ { "name": "@spectrum-css/colorarea", - "version": "4.1.5", + "version": "4.1.6-next.1", "description": "The Spectrum CSS Color Area component", "license": "Apache-2.0", "author": "Adobe", @@ -16,7 +16,7 @@ "main": "dist/index.css", "peerDependencies": { "@spectrum-css/colorhandle": ">=7", - "@spectrum-css/tokens": ">=13" + "@spectrum-css/tokens": "^14.0.0-next.3" }, "publishConfig": { "access": "public" diff --git a/components/colorhandle/package.json b/components/colorhandle/package.json index 390f87673f5..8300fe98731 100644 --- a/components/colorhandle/package.json +++ b/components/colorhandle/package.json @@ -1,6 +1,6 @@ { "name": "@spectrum-css/colorhandle", - "version": "7.1.4", + "version": "7.1.5-next.1", "description": "The Spectrum CSS Color Handle component", "license": "Apache-2.0", "author": "Adobe", @@ -17,7 +17,7 @@ "peerDependencies": { "@spectrum-css/colorloupe": ">=4", "@spectrum-css/opacitycheckerboard": ">=1", - "@spectrum-css/tokens": ">=13" + "@spectrum-css/tokens": "^14.0.0-next.3" }, "peerDependenciesMeta": { "@spectrum-css/colorloupe": { diff --git a/components/colorloupe/package.json b/components/colorloupe/package.json index 9085be8637a..b67f7ac3108 100644 --- a/components/colorloupe/package.json +++ b/components/colorloupe/package.json @@ -1,6 +1,6 @@ { "name": "@spectrum-css/colorloupe", - "version": "4.2.4", + "version": "4.2.5-next.1", "description": "The Spectrum CSS Color Loupe component", "license": "Apache-2.0", "author": "Adobe", @@ -15,7 +15,7 @@ }, "main": "dist/index.css", "peerDependencies": { - "@spectrum-css/tokens": ">=13" + "@spectrum-css/tokens": "^14.0.0-next.3" }, "publishConfig": { "access": "public" diff --git a/components/colorslider/package.json b/components/colorslider/package.json index 280c458bb65..d7e9eaf0943 100644 --- a/components/colorslider/package.json +++ b/components/colorslider/package.json @@ -1,6 +1,6 @@ { "name": "@spectrum-css/colorslider", - "version": "5.1.5", + "version": "5.1.6-next.1", "description": "The Spectrum CSS Color slider component", "license": "Apache-2.0", "author": "Adobe", @@ -17,7 +17,7 @@ "peerDependencies": { "@spectrum-css/colorhandle": ">=7", "@spectrum-css/opacitycheckerboard": ">=1", - "@spectrum-css/tokens": ">=13" + "@spectrum-css/tokens": "^14.0.0-next.3" }, "publishConfig": { "access": "public" diff --git a/components/colorwheel/package.json b/components/colorwheel/package.json index 4e9dfd2807a..c354539d602 100644 --- a/components/colorwheel/package.json +++ b/components/colorwheel/package.json @@ -1,6 +1,6 @@ { "name": "@spectrum-css/colorwheel", - "version": "3.1.5", + "version": "3.1.6-next.1", "description": "The Spectrum CSS Color Area component", "license": "Apache-2.0", "author": "Adobe", @@ -18,7 +18,7 @@ "@spectrum-css/colorarea": ">=4", "@spectrum-css/colorhandle": ">=7", "@spectrum-css/colorloupe": ">=4", - "@spectrum-css/tokens": ">=13" + "@spectrum-css/tokens": "^14.0.0-next.3" }, "peerDependenciesMeta": { "@spectrum-css/colorarea": { diff --git a/components/combobox/package.json b/components/combobox/package.json index 0142af81225..4b13094c245 100644 --- a/components/combobox/package.json +++ b/components/combobox/package.json @@ -1,6 +1,6 @@ { "name": "@spectrum-css/combobox", - "version": "2.1.6", + "version": "2.1.7-next.1", "description": "The Spectrum CSS combobox component", "license": "Apache-2.0", "author": "Adobe", @@ -20,7 +20,7 @@ "@spectrum-css/popover": ">=6", "@spectrum-css/progresscircle": ">=2", "@spectrum-css/textfield": ">=6", - "@spectrum-css/tokens": ">=13" + "@spectrum-css/tokens": "^14.0.0-next.3" }, "peerDependenciesMeta": { "@spectrum-css/progresscircle": { diff --git a/components/commons/basebutton.css b/components/commons/basebutton.css index 00ca18e6808..38936c53b99 100644 --- a/components/commons/basebutton.css +++ b/components/commons/basebutton.css @@ -31,14 +31,10 @@ governing permissions and limitations under the License. /* 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))); - - /* @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))); + font-family: var(--mod-button-font-family, var(--spectrum-sans-font-family-stack)); + 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; @@ -49,10 +45,10 @@ governing permissions and limitations under the License. -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; + transition: 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; -webkit-font-smoothing: antialiased; @@ -61,11 +57,9 @@ governing permissions and limitations under the License. /* Fix Firefox */ &::-moz-focus-inner { - /* Use uppercase PX so values don't get converted to rem */ margin-block-start: -2px; margin-block-end: -2px; padding: 0; - border: 0; /* Remove the inner border and padding for button in Firefox. */ @@ -98,17 +92,14 @@ governing permissions and limitations under the License. inset-inline-end: 0; display: block; + margin: calc(var(--mod-button-focus-indicator-gap, var(--spectrum-focus-indicator-gap)) * -1); - /* @deprecation --mod-focus-indicator-gap has been renamed and will be removed in a future version. */ - margin: calc(var(--mod-button-focus-indicator-gap, var(--mod-focus-indicator-gap, var(--spectrum-focus-indicator-gap))) * -1); - - /* @deprecation --mod-animation-duration-100 has been renamed and will be removed in a future version. */ - transition: opacity var(--mod-button-animation-duration, var(--mod-button-animation-duration, var(--mod-animation-duration-100, var(--spectrum-animation-duration-100)))) ease-out, - margin var(--mod-button-animation-duration, var(--mod-button-animation-duration, var(--mod-animation-duration-100, var(--spectrum-animation-duration-100)))) ease-out; + transition: 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 { - margin: calc(var(--mod-focus-indicator-gap, var(--spectrum-focus-indicator-gap)) * -2); + margin: calc(var(--mod-button-focus-indicator-gap, var(--spectrum-focus-indicator-gap)) * -2); } } diff --git a/components/commons/package.json b/components/commons/package.json index aa86877579c..7033899e53c 100644 --- a/components/commons/package.json +++ b/components/commons/package.json @@ -1,6 +1,6 @@ { "name": "@spectrum-css/commons", - "version": "9.1.3", + "version": "9.1.4-next.0", "description": "Common mixins for Spectrum CSS components", "license": "Apache-2.0", "author": "Adobe", @@ -15,7 +15,7 @@ }, "main": "index.css", "peerDependencies": { - "@spectrum-css/tokens": ">=13" + "@spectrum-css/tokens": "^14.0.0-next.3" }, "publishConfig": { "access": "public" diff --git a/components/contextualhelp/package.json b/components/contextualhelp/package.json index 6d497a1b562..0cddbfaa30e 100644 --- a/components/contextualhelp/package.json +++ b/components/contextualhelp/package.json @@ -1,6 +1,6 @@ { "name": "@spectrum-css/contextualhelp", - "version": "2.1.5", + "version": "2.1.6-next.1", "description": "The Spectrum CSS contextualhelp component", "license": "Apache-2.0", "author": "Adobe", @@ -18,7 +18,7 @@ "@spectrum-css/actionbutton": ">=5", "@spectrum-css/link": ">=4", "@spectrum-css/popover": ">=6", - "@spectrum-css/tokens": ">=13" + "@spectrum-css/tokens": "^14.0.0-next.3" }, "peerDependenciesMeta": { "@spectrum-css/link": { diff --git a/components/datepicker/package.json b/components/datepicker/package.json index f50c9656ebc..24b0c5e3e2e 100644 --- a/components/datepicker/package.json +++ b/components/datepicker/package.json @@ -1,6 +1,6 @@ { "name": "@spectrum-css/datepicker", - "version": "2.1.4", + "version": "2.1.5-next.1", "description": "The Spectrum CSS datepicker component", "license": "Apache-2.0", "author": "Adobe", @@ -19,7 +19,7 @@ "@spectrum-css/pickerbutton": ">=4", "@spectrum-css/popover": ">=6", "@spectrum-css/textfield": ">=6", - "@spectrum-css/tokens": ">=13" + "@spectrum-css/tokens": "^14.0.0-next.3" }, "publishConfig": { "access": "public" diff --git a/components/dial/index.css b/components/dial/index.css index 04c0cec5eb6..7ea06d0bc76 100644 --- a/components/dial/index.css +++ b/components/dial/index.css @@ -11,10 +11,10 @@ governing permissions and limitations under the License. */ .spectrum-Dial { - --spectrum-dial-background-color-default: var(--spectrum-gray-100); + --spectrum-dial-background-color-default: var(--spectrum-gray-75); - --spectrum-dial-handle-marker-color-disabled: var(--spectrum-gray-300); - --spectrum-dial-border-color-disabled: var(--spectrum-gray-300); + --spectrum-dial-handle-marker-color-disabled: var(--spectrum-gray-200); + --spectrum-dial-border-color-disabled: var(--spectrum-gray-200); --spectrum-dial-handle-marker-color: var(--spectrum-gray-700); --spectrum-dial-border-color: var(--spectrum-gray-700); @@ -24,8 +24,8 @@ governing permissions and limitations under the License. --spectrum-dial-handle-marker-color-hover: var(--spectrum-gray-800); --spectrum-dial-border-color-hover: var(--spectrum-gray-800); - --spectrum-dial-handle-marker-color-key-focus: var(--spectrum-gray-50); - --spectrum-dial-border-color-key-focus: var(--spectrum-gray-50); + --spectrum-dial-handle-marker-color-key-focus: var(--spectrum-gray-25); + --spectrum-dial-border-color-key-focus: var(--spectrum-gray-25); --spectrum-dial-handle-marker-color-mouse-focus: var(--spectrum-gray-700); --spectrum-dial-border-color-mouse-focus: var(--spectrum-gray-700); diff --git a/components/dial/package.json b/components/dial/package.json index 10b1fddd73b..64ad66692a5 100644 --- a/components/dial/package.json +++ b/components/dial/package.json @@ -1,6 +1,6 @@ { "name": "@spectrum-css/dial", - "version": "2.2.4", + "version": "2.2.5-next.1", "description": "The Spectrum CSS dial component", "license": "Apache-2.0", "author": "Adobe", @@ -15,7 +15,7 @@ }, "main": "dist/index.css", "peerDependencies": { - "@spectrum-css/tokens": ">=13" + "@spectrum-css/tokens": "^14.0.0-next.3" }, "publishConfig": { "access": "public" diff --git a/components/dialog/package.json b/components/dialog/package.json index ce068945e0b..2483b5e1979 100644 --- a/components/dialog/package.json +++ b/components/dialog/package.json @@ -1,6 +1,6 @@ { "name": "@spectrum-css/dialog", - "version": "9.2.4", + "version": "9.2.5-next.1", "description": "The Spectrum CSS dialog component", "license": "Apache-2.0", "author": "Adobe", @@ -18,7 +18,7 @@ "@spectrum-css/closebutton": ">=4", "@spectrum-css/divider": ">=2", "@spectrum-css/modal": ">=4", - "@spectrum-css/tokens": ">=13", + "@spectrum-css/tokens": "^14.0.0-next.3", "@spectrum-css/underlay": ">=3" }, "peerDependenciesMeta": { diff --git a/components/divider/index.css b/components/divider/index.css index 9f190d487f9..fe86dd2e275 100644 --- a/components/divider/index.css +++ b/components/divider/index.css @@ -18,8 +18,8 @@ governing permissions and limitations under the License. --spectrum-divider-background-color: var(--spectrum-divider-background-color-medium); /* background colors */ - --spectrum-divider-background-color-small: var(--spectrum-gray-300); - --spectrum-divider-background-color-medium: var(--spectrum-gray-300); + --spectrum-divider-background-color-small: var(--spectrum-gray-200); + --spectrum-divider-background-color-medium: var(--spectrum-gray-200); --spectrum-divider-background-color-large: var(--spectrum-gray-800); /* static white background colors */ diff --git a/components/divider/package.json b/components/divider/package.json index 058ed4fee03..7b93c05d8a4 100644 --- a/components/divider/package.json +++ b/components/divider/package.json @@ -1,6 +1,6 @@ { "name": "@spectrum-css/divider", - "version": "2.2.5", + "version": "2.2.6-next.1", "description": "The Spectrum CSS divider component", "license": "Apache-2.0", "author": "Adobe", @@ -15,7 +15,7 @@ }, "main": "dist/index.css", "peerDependencies": { - "@spectrum-css/tokens": ">=13" + "@spectrum-css/tokens": "^14.0.0-next.3" }, "publishConfig": { "access": "public" diff --git a/components/dropindicator/package.json b/components/dropindicator/package.json index dd83cddfef0..444d954d678 100644 --- a/components/dropindicator/package.json +++ b/components/dropindicator/package.json @@ -1,6 +1,6 @@ { "name": "@spectrum-css/dropindicator", - "version": "4.1.4", + "version": "4.1.5-next.1", "description": "The Spectrum CSS dropindicator component", "license": "Apache-2.0", "author": "Adobe", @@ -16,7 +16,7 @@ "main": "dist/index.css", "peerDependencies": { "@spectrum-css/icon": ">=4", - "@spectrum-css/tokens": ">=13" + "@spectrum-css/tokens": "^14.0.0-next.3" }, "publishConfig": { "access": "public" diff --git a/components/dropzone/index.css b/components/dropzone/index.css index ebd15d793ac..625b41d4850 100644 --- a/components/dropzone/index.css +++ b/components/dropzone/index.css @@ -17,7 +17,7 @@ governing permissions and limitations under the License. --spectrum-drop-zone-border-width: var(--spectrum-border-width-200); --spectrum-drop-zone-corner-radius: var(--spectrum-corner-radius-100); - --spectrum-drop-zone-border-color: var(--spectrum-gray-300); + --spectrum-drop-zone-border-color: var(--spectrum-gray-200); --spectrum-drop-zone-heading-font-family: var(--spectrum-sans-font-family-stack); --spectrum-drop-zone-heading-font-weight: var(--spectrum-heading-sans-serif-font-weight); diff --git a/components/dropzone/package.json b/components/dropzone/package.json index f456c34cf6f..4ee3488c2ac 100644 --- a/components/dropzone/package.json +++ b/components/dropzone/package.json @@ -1,6 +1,6 @@ { "name": "@spectrum-css/dropzone", - "version": "5.2.5", + "version": "5.2.6-next.1", "description": "The Spectrum CSS dropzone component", "license": "Apache-2.0", "author": "Adobe", @@ -18,7 +18,7 @@ "@spectrum-css/actionbutton": ">=5", "@spectrum-css/illustratedmessage": ">=6", "@spectrum-css/link": ">=4", - "@spectrum-css/tokens": ">=13" + "@spectrum-css/tokens": "^14.0.0-next.3" }, "peerDependenciesMeta": { "@spectrum-css/actionbutton": { diff --git a/components/fieldgroup/package.json b/components/fieldgroup/package.json index 342b252768c..12ddc1c5614 100644 --- a/components/fieldgroup/package.json +++ b/components/fieldgroup/package.json @@ -1,6 +1,6 @@ { "name": "@spectrum-css/fieldgroup", - "version": "4.2.4", + "version": "4.2.5-next.1", "description": "The Spectrum CSS fieldgroup component", "license": "Apache-2.0", "author": "Adobe", @@ -18,7 +18,7 @@ "@spectrum-css/checkbox": ">=8", "@spectrum-css/helptext": ">=4", "@spectrum-css/radio": ">=8", - "@spectrum-css/tokens": ">=13" + "@spectrum-css/tokens": "^14.0.0-next.3" }, "peerDependenciesMeta": { "@spectrum-css/checkbox": { diff --git a/components/fieldlabel/index.css b/components/fieldlabel/index.css index fd4b63b2f43..e092a335028 100644 --- a/components/fieldlabel/index.css +++ b/components/fieldlabel/index.css @@ -11,82 +11,72 @@ governing permissions and limitations under the License. */ .spectrum-FieldLabel { - --spectrum-fieldlabel-min-height: var(--spectrum-component-height-75); - --spectrum-fieldlabel-color: var(--spectrum-neutral-subdued-content-color-default); - + --spectrum-fieldlabel-min-height: var(--spectrum-component-height-100); + --spectrum-fieldlabel-top-to-text: var(--spectrum-component-top-to-text-100); + --spectrum-fieldlabel-bottom-to-text: var(--spectrum-component-bottom-to-text-100); --spectrum-field-label-text-to-asterisk: var(--spectrum-field-label-text-to-asterisk-medium); + --spectrum-fieldlabel-font-size: var(--spectrum-font-size-100); --spectrum-fieldlabel-font-weight: var(--spectrum-regular-font-weight); --spectrum-fieldlabel-line-height: var(--spectrum-line-height-100); --spectrum-fieldlabel-line-height-cjk: var(--spectrum-cjk-line-height-100); + + --spectrum-fieldlabel-side-margin-block-start: var(--spectrum-field-label-top-margin-medium); + --spectrum-fieldlabel-side-padding-right: var(--spectrum-spacing-200); + + --spectrum-fieldlabel-color: var(--spectrum-neutral-subdued-content-color-default); } .spectrum-FieldLabel--sizeS { --spectrum-fieldlabel-min-height: var(--spectrum-component-height-75); --spectrum-fieldlabel-top-to-text: var(--spectrum-component-top-to-text-75); --spectrum-fieldlabel-bottom-to-text: var(--spectrum-component-bottom-to-text-75); - --spectrum-fieldlabel-font-size: var(--spectrum-font-size-75); - - --spectrum-fieldlabel-side-margin-block-start: var(--spectrum-field-label-top-margin-small); - --spectrum-fieldlabel-side-padding-right: var(--spectrum-spacing-100); - --spectrum-field-label-text-to-asterisk: var(--spectrum-field-label-text-to-asterisk-small); -} -.spectrum-FieldLabel--sizeM { - --spectrum-fieldlabel-min-height: var(--spectrum-component-height-75); - --spectrum-fieldlabel-top-to-text: var(--spectrum-component-top-to-text-75); - --spectrum-fieldlabel-bottom-to-text: var(--spectrum-component-bottom-to-text-75); --spectrum-fieldlabel-font-size: var(--spectrum-font-size-75); - --spectrum-fieldlabel-side-margin-block-start: var(--spectrum-field-label-top-margin-medium); - --spectrum-fieldlabel-side-padding-right: var(--spectrum-spacing-200); - - --spectrum-field-label-text-to-asterisk: var(--spectrum-field-label-text-to-asterisk-medium); + --spectrum-fieldlabel-side-margin-block-start: var(--spectrum-field-label-top-margin-small); + --spectrum-fieldlabel-side-padding-right: var(--spectrum-spacing-100); } .spectrum-FieldLabel--sizeL { - --spectrum-fieldlabel-min-height: var(--spectrum-component-height-100); - --spectrum-fieldlabel-top-to-text: var(--spectrum-component-top-to-text-100); - --spectrum-fieldlabel-bottom-to-text: var(--spectrum-component-bottom-to-text-100); - --spectrum-fieldlabel-font-size: var(--spectrum-font-size-100); - - --spectrum-fieldlabel-side-margin-block-start: var(--spectrum-field-label-top-margin-large); - --spectrum-fieldlabel-side-padding-right: var(--spectrum-spacing-200); - - --spectrum-field-label-text-to-asterisk: var(--spectrum-field-label-text-to-asterisk-large); -} - -.spectrum-FieldLabel--sizeXL { --spectrum-fieldlabel-min-height: var(--spectrum-component-height-200); --spectrum-fieldlabel-top-to-text: var(--spectrum-component-top-to-text-200); --spectrum-fieldlabel-bottom-to-text: var(--spectrum-component-bottom-to-text-200); + --spectrum-field-label-text-to-asterisk: var(--spectrum-field-label-text-to-asterisk-large); + --spectrum-fieldlabel-font-size: var(--spectrum-font-size-200); - --spectrum-fieldlabel-side-margin-block-start: var(--spectrum-field-label-top-margin-extra-large); - --spectrum-fieldlabel-side-padding-right: var(--spectrum-spacing-200); + --spectrum-fieldlabel-side-margin-block-start: var(--spectrum-field-label-top-margin-large); +} +.spectrum-FieldLabel--sizeXL { + --spectrum-fieldlabel-min-height: var(--spectrum-component-height-300); + --spectrum-fieldlabel-top-to-text: var(--spectrum-component-top-to-text-300); + --spectrum-fieldlabel-bottom-to-text: var(--spectrum-component-bottom-to-text-300); --spectrum-field-label-text-to-asterisk: var(--spectrum-field-label-text-to-asterisk-extra-large); + + --spectrum-fieldlabel-font-size: var(--spectrum-font-size-300); + + --spectrum-fieldlabel-side-margin-block-start: var(--spectrum-field-label-top-margin-extra-large); } .spectrum-FieldLabel { display: block; + box-sizing: border-box; min-block-size: var(--mod-fieldlabel-min-height, var(--spectrum-fieldlabel-min-height)); - padding-block: var(--mod-field-label-top-to-text, var(--spectrum-fieldlabel-top-to-text)) var(--mod-field-label-bottom-to-text, var(--spectrum-fieldlabel-bottom-to-text)); padding-inline: 0; font-size: var(--mod-fieldlabel-font-size, var(--spectrum-fieldlabel-font-size)); font-weight: var(--mod-fieldlabel-font-weight, var(--spectrum-fieldlabel-font-weight)); - line-height: var(--mod-fieldlabel-line-height, var(--spectrum-fieldlabel-line-height)); + color: var(--spectrum-fieldlabel-color); -webkit-font-smoothing: subpixel-antialiased; -moz-osx-font-smoothing: auto; - color: var(--spectrum-fieldlabel-color); - /* CJK (Chinese, Japanese, and Korean) language support */ &:lang(ja), &:lang(zh), @@ -116,19 +106,25 @@ governing permissions and limitations under the License. text-align: end; } +.spectrum-FieldLabel--staticBlack { + color: var(--spectrum-black); +} + +.spectrum-FieldLabel--staticWhite { + color: var(--spectrum-white); +} + /********* Form *********/ .spectrum-Form { --spectrum-tableform-item-block-spacing: var(--spectrum-spacing-300); - margin: 0; display: grid; grid-template-columns: var(--mod-form-grid-template-columns, auto auto); - inline-size: var(--mod-form-inline-size, fit-content); + row-gap: var(--mod-form-item-block-spacing, var(--spectrum-tableform-item-block-spacing)); justify-content: start; - /* @deprecation --mod-tableform-item-block-spacing has been renamed to - --mod-form-item-block-spacing. The fallback will be removed in a future version. */ - row-gap: var(--mod-form-item-block-spacing, var(--mod-tableform-item-block-spacing, var(--spectrum-tableform-item-block-spacing))); + inline-size: var(--mod-form-inline-size, fit-content); + margin: 0; } /* Row */ @@ -156,9 +152,7 @@ governing permissions and limitations under the License. /* Rows with stacked alignment */ .spectrum-Form--labelsAbove { - /* @deprecation --mod-tableform-item-block-spacing-labels-above has been renamed to - --mod-form-item-block-spacing-labels-above. The fallback will be removed in a future version. */ - --mod-form-item-block-spacing: var(--mod-form-item-block-spacing-labels-above, var(--mod-tableform-item-block-spacing-labels-above, var(--spectrum-spacing-200))); + --mod-form-item-block-spacing: var(--mod-form-item-block-spacing-labels-above, var(--spectrum-spacing-200)); --mod-form-grid-template-columns: var(--mod-form-grid-template-columns-labels-above, auto); .spectrum-Form-item { @@ -170,10 +164,10 @@ governing permissions and limitations under the License. .spectrum-FieldLabel, .spectrum-Form-itemLabel { &.is-disabled { - color: var(--highcontrast-disabled-content-color, var(--mod-disabled-content-color, var(--spectrum-disabled-content-color))); + color: var(--highcontrast-field-label-disabled-content-color, var(--mod-field-label-disabled-content-color, var(--spectrum-disabled-content-color))); .spectrum-FieldLabel-requiredIcon { - color: var(--highcontrast-disabled-content-color, var(--mod-disabled-content-color, var(--spectrum-disabled-content-color))); + color: var(--highcontrast-field-label-disabled-content-color, var(--mod-field-label-disabled-content-color, var(--spectrum-disabled-content-color))); } } } @@ -181,6 +175,6 @@ governing permissions and limitations under the License. /********* WHCM *********/ @media (forced-colors: active) { .spectrum-FieldLabel { - --highcontrast-disabled-content-color: GrayText; + --highcontrast-field-label-disabled-content-color: GrayText; } } diff --git a/components/fieldlabel/metadata/fieldlabel.yml b/components/fieldlabel/metadata/fieldlabel.yml index 4a1a2c3ab65..6840249ab12 100644 --- a/components/fieldlabel/metadata/fieldlabel.yml +++ b/components/fieldlabel/metadata/fieldlabel.yml @@ -6,7 +6,15 @@ sections: This component can be modified via its `--mod-*` prefixed custom properties. A list of those prefixed custom properties can be found <a class="spectrum-Link" href="https://github.com/adobe/spectrum-css/tree/main/components/fieldlabel/metadata/mods.md">here</a>. - name: Migration Guide description: | - ### T-shirt sizing + ### x/x/2024 - Version 8.0.0 + #### Spectrum 2 release + Field label now uses Spectrum 2 tokens and specifications. A few notable changes and additions: + - The medium size styles are used by default, so the `spectrum-FieldLabel--sizeM` class is no longer necessary and has been removed. + - Two variant classes have been added for black and white static colors. + - The mod custom property `--mod-disabled-content-color` has been renamed to `--mod-field-label-disabled-content-color`. + + ### 11/13/2020 - Version 3.0.0 + #### T-shirt sizing Field label now supports t-shirt sizing and requires that you specify the size by adding a `.spectrum-FieldLabel--size*` class. examples: - id: fieldlabel-sizing @@ -14,75 +22,82 @@ examples: markup: | <div class="spectrum-Examples"> <div class="spectrum-Examples-item"> - <h4 class="spectrum-Heading spectrum-Heading--sizeXS spectrum-Examples-itemHeading">S</h4> + <h4 class="spectrum-Heading spectrum-Heading--sizeXS spectrum-Examples-itemHeading">Small</h4> - <label for="lifestory" class="spectrum-FieldLabel spectrum-FieldLabel--sizeS">Life story</label> + <label for="lifestory-s" class="spectrum-FieldLabel spectrum-FieldLabel--sizeS">Life story</label> <div class="spectrum-Textfield"> - <input id="lifestory" name="field" value="" class="spectrum-Textfield-input"> + <input id="lifestory-s" name="field" value="" class="spectrum-Textfield-input"> </div> </div> <div class="spectrum-Examples-item"> - <h4 class="spectrum-Heading spectrum-Heading--sizeXS spectrum-Examples-itemHeading">M (default)</h4> + <h4 class="spectrum-Heading spectrum-Heading--sizeXS spectrum-Examples-itemHeading">Medium (default)</h4> - <label for="lifestory" class="spectrum-FieldLabel spectrum-FieldLabel--sizeM">Life story</label> + <label for="lifestory-m" class="spectrum-FieldLabel">Life story</label> <div class="spectrum-Textfield"> - <input id="lifestory" name="field" value="" class="spectrum-Textfield-input"> + <input id="lifestory-m" name="field" value="" class="spectrum-Textfield-input"> </div> </div> <div class="spectrum-Examples-item"> - <h4 class="spectrum-Heading spectrum-Heading--sizeXS spectrum-Examples-itemHeading">L</h4> + <h4 class="spectrum-Heading spectrum-Heading--sizeXS spectrum-Examples-itemHeading">Large</h4> - <label for="lifestory" class="spectrum-FieldLabel spectrum-FieldLabel--sizeL">Life story</label> + <label for="lifestory-l" class="spectrum-FieldLabel spectrum-FieldLabel--sizeL">Life story</label> <div class="spectrum-Textfield"> - <input id="lifestory" name="field" value="" class="spectrum-Textfield-input"> + <input id="lifestory-l" name="field" value="" class="spectrum-Textfield-input"> </div> </div> <div class="spectrum-Examples-item"> - <h4 class="spectrum-Heading spectrum-Heading--sizeXS spectrum-Examples-itemHeading">XL</h4> + <h4 class="spectrum-Heading spectrum-Heading--sizeXS spectrum-Examples-itemHeading">Extra large</h4> - <label for="lifestory" class="spectrum-FieldLabel spectrum-FieldLabel--sizeXL">Life story</label> + <label for="lifestory-xl" class="spectrum-FieldLabel spectrum-FieldLabel--sizeXL">Life story</label> <div class="spectrum-Textfield"> - <input id="lifestory" name="field" value="" class="spectrum-Textfield-input"> + <input id="lifestory-xl" name="field" value="" class="spectrum-Textfield-input"> </div> </div> </div> - id: fieldlabel-standard name: Standard markup: | - <label for="lifestory" class="spectrum-FieldLabel spectrum-FieldLabel--sizeM">Life story</label> + <label for="lifestory" class="spectrum-FieldLabel">Life story</label> <div class="spectrum-Textfield"> <input id="lifestory" name="field" value="" class="spectrum-Textfield-input"> </div> - <label for="lifestory2" class="spectrum-FieldLabel spectrum-FieldLabel--sizeM is-disabled">Life story</label> + <label for="lifestory2" class="spectrum-FieldLabel is-disabled">Life story</label> <div class="spectrum-Textfield is-disabled"> <input id="lifestory2" name="field" value="" class="spectrum-Textfield-input" disabled> </div> - id: fieldlabel-side-left - name: Left - description: A left aligned Field label. + name: Side label with left aligned text + description: Labels with either the `spectrum-FieldLabel--left` or `spectrum-FieldLabel--right` class are for positioning the label to the side (inline start) of the form field. The left class sets the text alignment to left. markup: | - <label for="lifestory3" class="spectrum-FieldLabel spectrum-FieldLabel--sizeM spectrum-FieldLabel--left" style="width: 72px">Life story</label> + <label for="lifestory3" class="spectrum-FieldLabel spectrum-FieldLabel--left" style="width: 72px">Life story</label> <div class="spectrum-Textfield spectrum-Textfield--multiline"> <textarea id="lifestory3" name="field" value="" class="spectrum-Textfield-input"></textarea> </div> - id: fieldlabel-side-right - name: Right - description: A right aligned Field label. + name: Side label with right aligned text + description: With `spectrum-FieldLabel--right`, the side label is still positioned similarly to the left class, but with the text alignment set to right. markup: | - <label for="lifestory4" class="spectrum-FieldLabel spectrum-FieldLabel--sizeM spectrum-FieldLabel--right" style="width: 72px">Life story</label> + <label for="lifestory4" class="spectrum-FieldLabel spectrum-FieldLabel--right" style="width: 72px">Life story</label> <div class="spectrum-Textfield spectrum-Textfield--multiline"> <textarea id="lifestory4" name="field" value="" class="spectrum-Textfield-input"></textarea> </div> - id: fieldlabel-required name: Required - description: A Field label for a required field can display either the text "(required)", or an asterisk. If using the asterisk icon, do not leave any space between the label text and the start of the `<svg>` element in the markup, so extra space is not added in addition to the inline margin. + description: | + A Field label for a required field can display either the text "(required)", or an asterisk. + + If using the asterisk icon, do not leave any space between the label text and the start of the `<svg>` element in the markup, so extra space is not added in addition to the inline margin. The following UI icon sizes are used for the asterisk: + - Asterisk100: Small and medium + - Asterisk200: Large + - Asterisk300: Extra large + markup: | - <label for="lifestory5" class="spectrum-FieldLabel spectrum-FieldLabel--sizeM"> + <label for="lifestory5" class="spectrum-FieldLabel"> Life story<svg class="spectrum-Icon spectrum-UIIcon-Asterisk100 spectrum-FieldLabel-requiredIcon" focusable="false" aria-hidden="true"> <use xlink:href="#spectrum-css-icon-Asterisk100" /> @@ -92,7 +107,7 @@ examples: <input id="lifestory5" name="field" value="" class="spectrum-Textfield-input"> </div> - <label for="lifestory6" class="spectrum-FieldLabel spectrum-FieldLabel--sizeM">Life story (required)</label> + <label for="lifestory6" class="spectrum-FieldLabel">Life story (required)</label> <div class="spectrum-Textfield"> <input id="lifestory6" name="field" value="" class="spectrum-Textfield-input"> </div> @@ -100,7 +115,7 @@ examples: <br/> <br/> - <label for="lifestory7" class="spectrum-FieldLabel spectrum-FieldLabel--sizeM spectrum-FieldLabel--left"> + <label for="lifestory7" class="spectrum-FieldLabel spectrum-FieldLabel--left"> Life story<svg class="spectrum-Icon spectrum-UIIcon-Asterisk100 spectrum-FieldLabel-requiredIcon" focusable="false" aria-hidden="true"> <use xlink:href="#spectrum-css-icon-Asterisk100" /> @@ -110,7 +125,7 @@ examples: <textarea id="lifestory7" name="field" value="" class="spectrum-Textfield-input"></textarea> </div> - <label for="lifestory8" class="spectrum-FieldLabel spectrum-FieldLabel--sizeM is-disabled"> + <label for="lifestory8" class="spectrum-FieldLabel is-disabled"> Life story<svg class="spectrum-Icon spectrum-UIIcon-Asterisk100 spectrum-FieldLabel-requiredIcon" focusable="false" aria-hidden="true"> <use xlink:href="#spectrum-css-icon-Asterisk100" /> @@ -119,3 +134,29 @@ examples: <div class="spectrum-Textfield is-disabled"> <input id="lifestory8" name="field" value="" class="spectrum-Textfield-input" disabled> </div> + + - id: fieldlabel-static-colors + name: Static colors + markup: | + <div style="background-color: rgb(181, 209, 211); color: rgb(181, 209, 211); padding: 15px 20px;"> + <label for="lifestory6" class="spectrum-FieldLabel spectrum-FieldLabel--staticBlack"> + Static black label with example background<svg + class="spectrum-Icon spectrum-UIIcon-Asterisk100 spectrum-FieldLabel-requiredIcon" focusable="false" aria-hidden="true"> + <use xlink:href="#spectrum-css-icon-Asterisk100" /> + </svg> + </label> + <div class="spectrum-Textfield"> + <input id="lifestory6" name="field" value="" class="spectrum-Textfield-input"> + </div> + </div> + <div style="background-color: rgb(15, 121, 125); color: rgb(15, 121, 125); padding: 15px 20px;"> + <label for="lifestory7" class="spectrum-FieldLabel spectrum-FieldLabel--staticWhite"> + Static white label with example background<svg + class="spectrum-Icon spectrum-UIIcon-Asterisk100 spectrum-FieldLabel-requiredIcon" focusable="false" aria-hidden="true"> + <use xlink:href="#spectrum-css-icon-Asterisk100" /> + </svg> + </label> + <div class="spectrum-Textfield"> + <input id="lifestory7" name="field" value="" class="spectrum-Textfield-input"> + </div> + </div> diff --git a/components/fieldlabel/metadata/form.yml b/components/fieldlabel/metadata/form.yml index 92375a2152c..268c686e10b 100644 --- a/components/fieldlabel/metadata/form.yml +++ b/components/fieldlabel/metadata/form.yml @@ -1,5 +1,16 @@ name: Form description: Form provides structure and spacing for your form fields. +sections: + - name: Custom Properties API + description: | + This component can be modified via its `--mod-*` prefixed custom properties. A list of those prefixed custom properties can be found <a class="spectrum-Link" href="https://github.com/adobe/spectrum-css/tree/main/components/fieldlabel/metadata/mods.md">here</a>. + - name: Migration Guide + description: | + ### x/x/2024 - Version 8.0.0 + #### Spectrum 2 release + The renamed mod properties previously marked as deprecated have been removed: + - `--mod-tableform-item-block-spacing` has been renamed to `--mod-form-item-block-spacing` + - `--mod-tableform-item-block-spacing-labels-above` has been renamed to `--mod-form-item-block-spacing-labels-above` examples: - id: form-labels-left name: Standard - left-aligned text diff --git a/components/fieldlabel/metadata/mods.md b/components/fieldlabel/metadata/mods.md index 7d1daa362bc..858134dce56 100644 --- a/components/fieldlabel/metadata/mods.md +++ b/components/fieldlabel/metadata/mods.md @@ -1,21 +1,19 @@ -| Modifiable custom properties | -| ------------------------------------------------- | -| `--mod-disabled-content-color` | -| `--mod-field-label-asterisk-vertical-align` | -| `--mod-field-label-bottom-to-text` | -| `--mod-field-label-text-to-asterisk` | -| `--mod-field-label-top-to-text` | -| `--mod-fieldlabel-font-size` | -| `--mod-fieldlabel-font-weight` | -| `--mod-fieldlabel-line-height` | -| `--mod-fieldlabel-line-height-cjk` | -| `--mod-fieldlabel-min-height` | -| `--mod-fieldlabel-side-margin-block-start` | -| `--mod-fieldlabel-side-padding-right` | -| `--mod-form-grid-template-columns` | -| `--mod-form-grid-template-columns-labels-above` | -| `--mod-form-inline-size` | -| `--mod-form-item-block-spacing` | -| `--mod-form-item-block-spacing-labels-above` | -| `--mod-tableform-item-block-spacing` | -| `--mod-tableform-item-block-spacing-labels-above` | +| Modifiable custom properties | +| ----------------------------------------------- | +| `--mod-field-label-asterisk-vertical-align` | +| `--mod-field-label-bottom-to-text` | +| `--mod-field-label-disabled-content-color` | +| `--mod-field-label-text-to-asterisk` | +| `--mod-field-label-top-to-text` | +| `--mod-fieldlabel-font-size` | +| `--mod-fieldlabel-font-weight` | +| `--mod-fieldlabel-line-height` | +| `--mod-fieldlabel-line-height-cjk` | +| `--mod-fieldlabel-min-height` | +| `--mod-fieldlabel-side-margin-block-start` | +| `--mod-fieldlabel-side-padding-right` | +| `--mod-form-grid-template-columns` | +| `--mod-form-grid-template-columns-labels-above` | +| `--mod-form-inline-size` | +| `--mod-form-item-block-spacing` | +| `--mod-form-item-block-spacing-labels-above` | diff --git a/components/fieldlabel/package.json b/components/fieldlabel/package.json index ac7b9c8293d..838594d15dc 100644 --- a/components/fieldlabel/package.json +++ b/components/fieldlabel/package.json @@ -1,6 +1,6 @@ { "name": "@spectrum-css/fieldlabel", - "version": "7.3.6", + "version": "8.0.0-next.1", "description": "The Spectrum CSS fieldlabel component", "license": "Apache-2.0", "author": "Adobe", @@ -16,7 +16,7 @@ "main": "dist/index.css", "peerDependencies": { "@spectrum-css/icon": ">=4", - "@spectrum-css/tokens": ">=13" + "@spectrum-css/tokens": "^14.0.0-next.3" }, "publishConfig": { "access": "public" diff --git a/components/fieldlabel/stories/fieldlabel.stories.js b/components/fieldlabel/stories/fieldlabel.stories.js index 59d60bbeb22..94ea6149c36 100644 --- a/components/fieldlabel/stories/fieldlabel.stories.js +++ b/components/fieldlabel/stories/fieldlabel.stories.js @@ -1,4 +1,4 @@ -// Import the component markup template +import { html } from "lit"; import { Template } from "./template"; export default { @@ -54,6 +54,17 @@ export default { }, control: "boolean", }, + staticColor: { + name: "Static color", + description: "Variants that can be used when a Field label needs to be placed on top of a colored background or a visual.", + type: { name: "string" }, + table: { + type: { summary: "string" }, + category: "Component", + }, + options: ["black", "white"], + control: "select", + }, }, args: { rootClass: "spectrum-FieldLabel", @@ -99,3 +110,22 @@ WrappingAndRequired.args = { isRequired: true, style: { width: "200px" }, }; + +export const StaticColors = (args) => html` + ${Template({ + ...args, + label: "The black static color class used on a label marked as required", + staticColor: "black", + })} + ${Template({ + ...args, + label: "The white static color class used on a label marked as required", + staticColor: "white", + })} +`; + +StaticColors.storyName = "Static colors"; +StaticColors.args = { + alignment: "left", + isRequired: true, +}; diff --git a/components/fieldlabel/stories/template.js b/components/fieldlabel/stories/template.js index d92a10156dc..6a1ff04b232 100644 --- a/components/fieldlabel/stories/template.js +++ b/components/fieldlabel/stories/template.js @@ -1,7 +1,8 @@ import { html } from "lit"; import { classMap } from "lit/directives/class-map.js"; -import { styleMap } from "lit/directives/style-map.js"; import { ifDefined } from "lit/directives/if-defined.js"; +import { styleMap } from "lit/directives/style-map.js"; +import { capitalize, lowerCase } from "lodash-es"; import { Template as Icon } from "@spectrum-css/icon/stories/template.js"; @@ -17,6 +18,7 @@ export const Template = ({ alignment, isDisabled, isRequired, + staticColor, style = {}, ...globals }) => { @@ -40,13 +42,14 @@ export const Template = ({ iconName = "Asterisk100"; } - return html` + const labelMarkup = html` <label class=${classMap({ [rootClass]: true, [`${rootClass}--size${size?.toUpperCase()}`]: typeof size !== "undefined", [`${rootClass}--${alignment}`]: typeof alignment !== "undefined", + [`${rootClass}--static${capitalize(lowerCase(staticColor))}`]: typeof staticColor !== "undefined", "is-disabled": isDisabled, ...customClasses.reduce((a, c) => ({ ...a, [c]: true }), {}), })} @@ -64,4 +67,18 @@ export const Template = ({ : ""} </label> `; + + // When using the static color variants, wrap the label in an example element with a background color. + return !staticColor + ? labelMarkup + : html` + <div + style=${styleMap({ + padding: "1rem", + backgroundColor: staticColor === "white" ? "rgb(15, 121, 125)" : staticColor === "black" ? "rgb(181, 209, 211)" : undefined, + })} + </div> + ${labelMarkup} + </div> + `; }; diff --git a/components/floatingactionbutton/package.json b/components/floatingactionbutton/package.json index 6fe4e1b8748..35d96145c1d 100644 --- a/components/floatingactionbutton/package.json +++ b/components/floatingactionbutton/package.json @@ -1,6 +1,6 @@ { "name": "@spectrum-css/floatingactionbutton", - "version": "1.2.5", + "version": "1.2.6-next.1", "description": "The Spectrum CSS floatingactionbutton component", "license": "Apache-2.0", "author": "Adobe", @@ -16,7 +16,7 @@ }, "main": "dist/index.css", "peerDependencies": { - "@spectrum-css/tokens": ">=13" + "@spectrum-css/tokens": "^14.0.0-next.3" }, "publishConfig": { "access": "public" diff --git a/components/helptext/package.json b/components/helptext/package.json index fb5427812c3..588ed5a9ee1 100644 --- a/components/helptext/package.json +++ b/components/helptext/package.json @@ -1,6 +1,6 @@ { "name": "@spectrum-css/helptext", - "version": "4.1.5", + "version": "4.1.6-next.1", "description": "The Spectrum CSS helptext component", "license": "Apache-2.0", "author": "Adobe", @@ -16,7 +16,7 @@ "main": "dist/index.css", "peerDependencies": { "@spectrum-css/icon": ">=4", - "@spectrum-css/tokens": ">=13" + "@spectrum-css/tokens": "^14.0.0-next.3" }, "publishConfig": { "access": "public" diff --git a/components/icon/package.json b/components/icon/package.json index 0110e4a652d..7dce575829d 100644 --- a/components/icon/package.json +++ b/components/icon/package.json @@ -1,6 +1,6 @@ { "name": "@spectrum-css/icon", - "version": "6.0.5", + "version": "6.0.6-next.1", "description": "The Spectrum CSS icon component", "license": "Apache-2.0", "author": "Adobe", diff --git a/components/illustratedmessage/package.json b/components/illustratedmessage/package.json index 99848b3dcdd..45a1d46fc54 100644 --- a/components/illustratedmessage/package.json +++ b/components/illustratedmessage/package.json @@ -1,6 +1,6 @@ { "name": "@spectrum-css/illustratedmessage", - "version": "6.1.5", + "version": "6.1.6-next.1", "description": "The Spectrum CSS illustratedmessage component", "license": "Apache-2.0", "author": "Adobe", @@ -15,7 +15,7 @@ }, "main": "dist/index.css", "peerDependencies": { - "@spectrum-css/tokens": ">=13", + "@spectrum-css/tokens": "^14.0.0-next.3", "@spectrum-css/typography": ">=5" }, "publishConfig": { diff --git a/components/infieldbutton/package.json b/components/infieldbutton/package.json index 32638a14f55..1db2d657fb9 100644 --- a/components/infieldbutton/package.json +++ b/components/infieldbutton/package.json @@ -1,6 +1,6 @@ { "name": "@spectrum-css/infieldbutton", - "version": "4.2.4", + "version": "4.2.5-next.1", "description": "The Spectrum CSS infield button component", "license": "Apache-2.0", "author": "Adobe", @@ -16,7 +16,7 @@ "main": "dist/index.css", "peerDependencies": { "@spectrum-css/icon": ">=4", - "@spectrum-css/tokens": ">=13" + "@spectrum-css/tokens": "^14.0.0-next.3" }, "peerDependenciesMeta": { "@spectrum-css/icon": { diff --git a/components/infieldbutton/themes/express.css b/components/infieldbutton/themes/express.css index d08bbd8cc6c..7fd3dfcb63c 100644 --- a/components/infieldbutton/themes/express.css +++ b/components/infieldbutton/themes/express.css @@ -23,9 +23,9 @@ governing permissions and limitations under the License. --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: var(--spectrum-gray-100); + --spectrum-infield-button-background-color-hover: var(--spectrum-gray-200); --spectrum-infield-button-background-color-down: var(--spectrum-gray-400); - --spectrum-infield-button-background-color-key-focus: var(--spectrum-gray-300); + --spectrum-infield-button-background-color-key-focus: var(--spectrum-gray-200); } } diff --git a/components/infieldbutton/themes/spectrum.css b/components/infieldbutton/themes/spectrum.css index ae22ee72443..426cdd4c6bc 100644 --- a/components/infieldbutton/themes/spectrum.css +++ b/components/infieldbutton/themes/spectrum.css @@ -22,9 +22,9 @@ governing permissions and limitations under the License. --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-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); + --spectrum-infield-button-background-color: var(--spectrum-gray-50); + --spectrum-infield-button-background-color-hover: var(--spectrum-gray-100); + --spectrum-infield-button-background-color-down: var(--spectrum-gray-200); + --spectrum-infield-button-background-color-key-focus: var(--spectrum-gray-100); } } diff --git a/components/inlinealert/package.json b/components/inlinealert/package.json index 8f0e819462c..cc63e06ce0a 100644 --- a/components/inlinealert/package.json +++ b/components/inlinealert/package.json @@ -1,6 +1,6 @@ { "name": "@spectrum-css/inlinealert", - "version": "7.1.6", + "version": "7.1.7-next.1", "description": "The Spectrum CSS in-line alert component", "license": "Apache-2.0", "author": "Adobe", @@ -17,7 +17,7 @@ "peerDependencies": { "@spectrum-css/button": ">=11", "@spectrum-css/icon": ">=4", - "@spectrum-css/tokens": ">=13" + "@spectrum-css/tokens": "^14.0.0-next.3" }, "peerDependenciesMeta": { "@spectrum-css/button": { diff --git a/components/link/package.json b/components/link/package.json index dc95a3887e6..8af8af4965e 100644 --- a/components/link/package.json +++ b/components/link/package.json @@ -1,6 +1,6 @@ { "name": "@spectrum-css/link", - "version": "4.2.5", + "version": "4.2.6-next.1", "description": "The Spectrum CSS link component", "license": "Apache-2.0", "author": "Adobe", @@ -15,7 +15,7 @@ }, "main": "dist/index.css", "peerDependencies": { - "@spectrum-css/tokens": ">=13" + "@spectrum-css/tokens": "^14.0.0-next.3" }, "publishConfig": { "access": "public" diff --git a/components/logicbutton/index.css b/components/logicbutton/index.css index 70c4bf93938..e612c1177b1 100644 --- a/components/logicbutton/index.css +++ b/components/logicbutton/index.css @@ -33,17 +33,17 @@ governing permissions and limitations under the License. &:disabled, &.is-disabled { - --mod-logic-button-and-background-color: var(--mod-logic-button-and-background-color-disabled, var(--spectrum-gray-200)); - --mod-logic-button-and-border-color: var(--mod-logic-button-and-border-color-disabled, var(--spectrum-gray-200)); + --mod-logic-button-and-background-color: var(--mod-logic-button-and-background-color-disabled, var(--spectrum-gray-100)); + --mod-logic-button-and-border-color: var(--mod-logic-button-and-border-color-disabled, var(--spectrum-gray-100)); --mod-logic-button-and-text-color: var(--mod-logic-button-and-text-color-disabled, var(--spectrum-gray-500)); - --mod-logic-button-and-background-color-hover: var(--mod-logic-button-and-background-color-hover-disabled, var(--spectrum-gray-200)); - --mod-logic-button-and-border-color-hover: var(--mod-logic-button-and-border-color-hover-disabled, var(--spectrum-gray-200)); + --mod-logic-button-and-background-color-hover: var(--mod-logic-button-and-background-color-hover-disabled, var(--spectrum-gray-100)); + --mod-logic-button-and-border-color-hover: var(--mod-logic-button-and-border-color-hover-disabled, var(--spectrum-gray-100)); - --mod-logic-button-or-background-color: var(--mod-logic-button-or-background-color-disabled, var(--spectrum-gray-200)); - --mod-logic-button-or-border-color: var(--mod-logic-button-or-border-color-disabled, var(--spectrum-gray-200)); + --mod-logic-button-or-background-color: var(--mod-logic-button-or-background-color-disabled, var(--spectrum-gray-100)); + --mod-logic-button-or-border-color: var(--mod-logic-button-or-border-color-disabled, var(--spectrum-gray-100)); --mod-logic-button-or-text-color: var(--mod-logic-button-or-text-color-disabled, var(--spectrum-gray-500)); - --mod-logic-button-or-background-color-hover: var(--mod-logic-button-or-background-color-hover-disabled, var(--spectrum-gray-200)); - --mod-logic-button-or-border-color-hover: var(--mod-logic-button-or-border-color-hover-disabled, var(--spectrum-gray-200)); + --mod-logic-button-or-background-color-hover: var(--mod-logic-button-or-background-color-hover-disabled, var(--spectrum-gray-100)); + --mod-logic-button-or-border-color-hover: var(--mod-logic-button-or-border-color-hover-disabled, var(--spectrum-gray-100)); } } diff --git a/components/logicbutton/metadata/logicbutton.yml b/components/logicbutton/metadata/logicbutton.yml index f8dba482fc8..f7ee38eb9d9 100644 --- a/components/logicbutton/metadata/logicbutton.yml +++ b/components/logicbutton/metadata/logicbutton.yml @@ -4,7 +4,16 @@ description: A LogicButton displays an operator within a boolean logic sequence. sections: - name: Migration Guide description: | - ### Remove focus-ring class + ### x/x/2024 - Version 4.0.0 + #### Spectrum 2 release + Logic button now uses Spectrum 2 tokens and specifications. A few notable changes: + - The mod custom property `--mod-line-height-100` has been renamed to `--mod-button-line-height`. + - The mod custom property `--mod-sans-font-family-stack` has been renamed to `--mod-button-font-family`. + - The mod custom property `--mod-focus-indicator-gap` has been renamed to `--mod-button-focus-indicator-gap`. + - The mod custom property `--mod-animation-duration-100` has been renamed to `--mod-button-animation-duration`. + + ### 8/16/2023 - Version 2.0.0 + #### Remove focus-ring class We've migrated away from the focus-ring class in favor of the native `:focus-visible` pseudo-class due to changes in browser support. examples: - id: logicbutton-and diff --git a/components/logicbutton/metadata/mods.md b/components/logicbutton/metadata/mods.md index a3187f962e5..c9ee009b8ea 100644 --- a/components/logicbutton/metadata/mods.md +++ b/components/logicbutton/metadata/mods.md @@ -1,12 +1,9 @@ | Modifiable custom properties | | -------------------------------------------------------- | -| `--mod-animation-duration-100` | | `--mod-button-animation-duration` | | `--mod-button-focus-indicator-gap` | | `--mod-button-font-family` | | `--mod-button-line-height` | -| `--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` | @@ -36,4 +33,3 @@ | `--mod-logic-button-or-text-color` | | `--mod-logic-button-or-text-color-disabled` | | `--mod-logic-button-padding` | -| `--mod-sans-font-family-stack` | diff --git a/components/logicbutton/package.json b/components/logicbutton/package.json index 078e08fd044..083d5ea537a 100644 --- a/components/logicbutton/package.json +++ b/components/logicbutton/package.json @@ -1,6 +1,6 @@ { "name": "@spectrum-css/logicbutton", - "version": "3.3.4", + "version": "3.3.5-next.1", "description": "The Spectrum CSS logicbutton component", "license": "Apache-2.0", "author": "Adobe", @@ -15,10 +15,10 @@ }, "main": "dist/index.css", "peerDependencies": { - "@spectrum-css/tokens": ">=13" + "@spectrum-css/tokens": "^14.0.0-next.3" }, "devDependencies": { - "@spectrum-css/commons": "^9.1.3" + "@spectrum-css/commons": "^9.1.4-next.0" }, "publishConfig": { "access": "public" diff --git a/components/menu/package.json b/components/menu/package.json index ed695d14675..0063f1d9e9d 100644 --- a/components/menu/package.json +++ b/components/menu/package.json @@ -1,6 +1,6 @@ { "name": "@spectrum-css/menu", - "version": "6.1.5", + "version": "6.1.6-next.1", "description": "The Spectrum CSS menu component", "license": "Apache-2.0", "author": "Adobe", @@ -19,7 +19,7 @@ "@spectrum-css/divider": ">=2", "@spectrum-css/icon": ">=4", "@spectrum-css/switch": ">=4", - "@spectrum-css/tokens": ">=13", + "@spectrum-css/tokens": "^14.0.0-next.3", "@spectrum-css/tray": ">=2.1" }, "peerDependenciesMeta": { diff --git a/components/miller/package.json b/components/miller/package.json index 0e3c9264967..a3631df6468 100644 --- a/components/miller/package.json +++ b/components/miller/package.json @@ -1,6 +1,6 @@ { "name": "@spectrum-css/miller", - "version": "5.1.4", + "version": "5.1.5-next.1", "description": "The Spectrum CSS miller component", "license": "Apache-2.0", "author": "Adobe", @@ -18,7 +18,7 @@ "@spectrum-css/assetlist": ">=5", "@spectrum-css/checkbox": ">=8", "@spectrum-css/icon": ">=4", - "@spectrum-css/tokens": ">=13" + "@spectrum-css/tokens": "^14.0.0-next.3" }, "publishConfig": { "access": "public" diff --git a/components/modal/index.css b/components/modal/index.css index 4aa96484e2b..60589ebd37a 100644 --- a/components/modal/index.css +++ b/components/modal/index.css @@ -21,7 +21,7 @@ governing permissions and limitations under the License. --spectrum-modal-max-height: 90vh; --spectrum-modal-max-width: 90%; - --spectrum-modal-background-color: var(--spectrum-gray-100); + --spectrum-modal-background-color: var(--spectrum-gray-75); --spectrum-modal-confirm-border-radius: var(--spectrum-corner-radius-100); --spectrum-modal-confirm-exit-animation-duration: var(--spectrum-animation-duration-100); --spectrum-modal-confirm-entry-animation-duration: var(--spectrum-animation-duration-500); diff --git a/components/modal/package.json b/components/modal/package.json index 9aa2138ecd7..1f72146dd79 100644 --- a/components/modal/package.json +++ b/components/modal/package.json @@ -1,6 +1,6 @@ { "name": "@spectrum-css/modal", - "version": "4.2.6", + "version": "4.2.7-next.1", "description": "The Spectrum CSS modal component", "license": "Apache-2.0", "author": "Adobe", @@ -15,10 +15,10 @@ }, "main": "dist/index.css", "peerDependencies": { - "@spectrum-css/tokens": ">=13" + "@spectrum-css/tokens": "^14.0.0-next.3" }, "devDependencies": { - "@spectrum-css/commons": "^9.1.3" + "@spectrum-css/commons": "^9.1.4-next.0" }, "publishConfig": { "access": "public" diff --git a/components/opacitycheckerboard/package.json b/components/opacitycheckerboard/package.json index f59a5a61cd2..30c8b302c23 100644 --- a/components/opacitycheckerboard/package.json +++ b/components/opacitycheckerboard/package.json @@ -1,6 +1,6 @@ { "name": "@spectrum-css/opacitycheckerboard", - "version": "1.1.5", + "version": "1.1.6-next.1", "description": "The Spectrum CSS opacitycheckerboard component", "license": "Apache-2.0", "author": "Adobe", @@ -15,7 +15,7 @@ }, "main": "dist/index.css", "peerDependencies": { - "@spectrum-css/tokens": ">=13" + "@spectrum-css/tokens": "^14.0.0-next.3" }, "publishConfig": { "access": "public" diff --git a/components/page/index.css b/components/page/index.css index 513b114a586..f8a78b775cd 100644 --- a/components/page/index.css +++ b/components/page/index.css @@ -11,7 +11,7 @@ governing permissions and limitations under the License. */ :root { - background-color: var(--spectrum-gray-100); + background-color: var(--spectrum-gray-75); /* Prevent tap highlights */ -webkit-tap-highlight-color: var(--spectrum-transparent-black-100); diff --git a/components/page/package.json b/components/page/package.json index f46d65f5cfe..274d00cfafc 100644 --- a/components/page/package.json +++ b/components/page/package.json @@ -1,6 +1,6 @@ { "name": "@spectrum-css/page", - "version": "7.1.4", + "version": "7.1.5-next.1", "description": "The Spectrum CSS page component", "license": "Apache-2.0", "author": "Adobe", @@ -15,7 +15,7 @@ }, "main": "dist/index.css", "peerDependencies": { - "@spectrum-css/tokens": ">=13" + "@spectrum-css/tokens": "^14.0.0-next.3" }, "publishConfig": { "access": "public" diff --git a/components/pagination/package.json b/components/pagination/package.json index 06b336b1613..229ebadae6e 100644 --- a/components/pagination/package.json +++ b/components/pagination/package.json @@ -1,6 +1,6 @@ { "name": "@spectrum-css/pagination", - "version": "7.1.6", + "version": "7.1.7-next.1", "description": "The Spectrum CSS Pagination component", "license": "Apache-2.0", "author": "Adobe", @@ -20,7 +20,7 @@ "@spectrum-css/icon": ">=4", "@spectrum-css/splitbutton": ">=7", "@spectrum-css/textfield": ">=6", - "@spectrum-css/tokens": ">=13" + "@spectrum-css/tokens": "^14.0.0-next.3" }, "publishConfig": { "access": "public" diff --git a/components/picker/metadata/mods.md b/components/picker/metadata/mods.md index 057ce9d8643..6a75c97b7b3 100644 --- a/components/picker/metadata/mods.md +++ b/components/picker/metadata/mods.md @@ -1,10 +1,8 @@ | Modifiable custom properties | | ------------------------------------------------------ | -| `--mod-animation-duration-100` | | `--mod-button-animation-duration` | | `--mod-button-font-family` | | `--mod-button-line-height` | -| `--mod-line-height-100` | | `--mod-picker-animation-duration` | | `--mod-picker-background-color-active` | | `--mod-picker-background-color-default` | @@ -68,4 +66,3 @@ | `--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` | diff --git a/components/picker/metadata/picker.yml b/components/picker/metadata/picker.yml index 5339feeca39..783f9fd1a49 100644 --- a/components/picker/metadata/picker.yml +++ b/components/picker/metadata/picker.yml @@ -7,17 +7,25 @@ sections: This component can be modified via its `--mod-*` prefixed custom properties. A list of those prefixed custom properties can be found <a class="spectrum-Link" href="https://github.com/adobe/spectrum-css/tree/main/components/picker/metadata/mods.md">here</a>. - name: Migration Guide description: | - ### Component renamed + ### x/x/2024 - Version 8.0.0 + #### Spectrum 2 release + Picker now uses Spectrum 2 tokens and specifications. A few notable changes: + - The mod custom property `--mod-line-height-100` has been renamed to `--mod-button-line-height`. + - The mod custom property `--mod-sans-font-family-stack` has been renamed to `--mod-button-font-family`. + - The mod custom property `--mod-animation-duration-100` has been renamed to `--mod-button-animation-duration`. + + ### Versions prior to 8.0 + #### Component renamed Dropdown is now known as Picker. Replace all `.spectrum-Dropdown*` classnames with `.spectrum-Picker*`. - ### Markup change + #### Markup change The outer `<div>` is now gone and `.spectrum-FieldButton` is no longer used. Instead, the outer tag is now `<button>` with the `.spectrum-Picker` classname. Additionally, `.spectrum-Picker` should not contain the `.spectrum-Popover` that it opens. In order to use a side label with a Picker, add the `spectrum-Picker--sideLabel` class to the Picker. - ### Icon classname changes + #### Icon classname changes Each of the 3 possible icons now has its own specific classname: @@ -27,13 +35,13 @@ sections: | `.spectrum-Icon` (workflow) | `.spectrum-Picker-icon` | | `.spectrum-Icon` (validation) | `.spectrum-Picker-validationIcon` | - ### `.is-selected` is now `.is-open` + #### `.is-selected` is now `.is-open` In order to more accurately reflect what's going on, you should add `.is-open` to `.spectrum-Picker` when the menu is shown. - ### Change workflow icon size to medium + #### Change workflow icon size to medium If you use a `.spectrum-Picker-icon` in your markup, please replace `.spectrum-Icon--sizeS` with `.spectrum-Icon--sizeM`. - ### T-shirt sizing + #### T-shirt sizing Picker now supports t-shirt sizing and requires that you specify the size by adding a `.spectrum-Picker--size*` class. Using the classes `.spectrum-Picker .spectrum-Picker--sizeM` will get result in the previous default picker size. @@ -46,7 +54,7 @@ sections: | `spectrum-Picker--sizeL` | `spectrum-css-icon-Chevron200` | | `spectrum-Picker--sizeXL` | `spectrum-css-icon-Chevron300` | - ### Remove focus-ring class + #### Remove focus-ring class We've migrated away from the focus-ring class in favor of the native `:focus-visible` pseudo-class due to changes in browser support. examples: - id: picker-standard diff --git a/components/picker/package.json b/components/picker/package.json index 09d81168a6a..e7d782f84d6 100644 --- a/components/picker/package.json +++ b/components/picker/package.json @@ -1,6 +1,6 @@ { "name": "@spectrum-css/picker", - "version": "7.2.7", + "version": "7.2.8-next.1", "description": "The Spectrum CSS picker component", "license": "Apache-2.0", "author": "Adobe", @@ -20,7 +20,7 @@ "@spectrum-css/menu": ">=5", "@spectrum-css/popover": ">=6", "@spectrum-css/progresscircle": ">=2", - "@spectrum-css/tokens": ">=13" + "@spectrum-css/tokens": "^14.0.0-next.3" }, "peerDependenciesMeta": { "@spectrum-css/helptext": { @@ -31,7 +31,7 @@ } }, "devDependencies": { - "@spectrum-css/commons": "^9.1.3" + "@spectrum-css/commons": "^9.1.4-next.0" }, "publishConfig": { "access": "public" diff --git a/components/picker/themes/express.css b/components/picker/themes/express.css index 4b305b4846f..ac253f63db9 100644 --- a/components/picker/themes/express.css +++ b/components/picker/themes/express.css @@ -13,12 +13,12 @@ governing permissions and limitations under the License. @container (--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-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-400); - --spectrum-picker-background-color-key-focus: var(--spectrum-gray-300); + --spectrum-picker-background-color-key-focus: var(--spectrum-gray-200); --spectrum-picker-border-color-default: transparent; --spectrum-picker-border-color-default-open: transparent; diff --git a/components/picker/themes/spectrum.css b/components/picker/themes/spectrum.css index c9452754589..d6ed20d735a 100644 --- a/components/picker/themes/spectrum.css +++ b/components/picker/themes/spectrum.css @@ -11,12 +11,12 @@ governing permissions and limitations under the License. @container (--system: spectrum) { .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-background-color-default: var(--spectrum-gray-50); + --spectrum-picker-background-color-default-open: var(--spectrum-gray-100); + --spectrum-picker-background-color-active: var(--spectrum-gray-200); + --spectrum-picker-background-color-hover: var(--spectrum-gray-100); + --spectrum-picker-background-color-hover-open: var(--spectrum-gray-100); + --spectrum-picker-background-color-key-focus: var(--spectrum-gray-100); --spectrum-picker-border-color-default: var(--spectrum-gray-500); --spectrum-picker-border-color-default-open: var(--spectrum-gray-500); diff --git a/components/pickerbutton/package.json b/components/pickerbutton/package.json index 576ea35d962..65b909da819 100644 --- a/components/pickerbutton/package.json +++ b/components/pickerbutton/package.json @@ -1,6 +1,6 @@ { "name": "@spectrum-css/pickerbutton", - "version": "4.1.5", + "version": "4.1.6-next.1", "description": "The Spectrum CSS picker button component", "license": "Apache-2.0", "author": "Adobe", @@ -18,7 +18,7 @@ "@spectrum-css/icon": ">=4", "@spectrum-css/menu": ">=5", "@spectrum-css/popover": ">=5 <=6", - "@spectrum-css/tokens": ">=13" + "@spectrum-css/tokens": "^14.0.0-next.3" }, "publishConfig": { "access": "public" diff --git a/components/pickerbutton/themes/express.css b/components/pickerbutton/themes/express.css index 76d7a370cfa..6556bd62e9a 100644 --- a/components/pickerbutton/themes/express.css +++ b/components/pickerbutton/themes/express.css @@ -14,10 +14,10 @@ governing permissions and limitations under the License. @container (--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: var(--spectrum-gray-100); + --spectrum-picker-button-background-color-hover: var(--spectrum-gray-200); --spectrum-picker-button-background-color-down: var(--spectrum-gray-400); - --spectrum-picker-button-background-color-key-focus: var(--spectrum-gray-300); + --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); diff --git a/components/pickerbutton/themes/spectrum.css b/components/pickerbutton/themes/spectrum.css index 5250be4186e..c1ade89850c 100644 --- a/components/pickerbutton/themes/spectrum.css +++ b/components/pickerbutton/themes/spectrum.css @@ -12,10 +12,10 @@ governing permissions and limitations under the License. @container (--system: spectrum) { .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-background-color: var(--spectrum-gray-50); + --spectrum-picker-button-background-color-hover: var(--spectrum-gray-100); + --spectrum-picker-button-background-color-down: var(--spectrum-gray-200); + --spectrum-picker-button-background-color-key-focus: var(--spectrum-gray-100); --spectrum-picker-button-border-color: inherit; --spectrum-picker-button-border-radius: var(--spectrum-corner-radius-100); diff --git a/components/popover/package.json b/components/popover/package.json index 7658ffb21cb..91e005dc76f 100644 --- a/components/popover/package.json +++ b/components/popover/package.json @@ -1,6 +1,6 @@ { "name": "@spectrum-css/popover", - "version": "6.2.5", + "version": "6.2.6-next.1", "description": "The Spectrum CSS popover component", "license": "Apache-2.0", "author": "Adobe", @@ -19,7 +19,7 @@ "@spectrum-css/dialog": ">=9", "@spectrum-css/divider": ">=2", "@spectrum-css/menu": ">=5", - "@spectrum-css/tokens": ">=13" + "@spectrum-css/tokens": "^14.0.0-next.3" }, "peerDependenciesMeta": { "@spectrum-css/divider": { @@ -30,7 +30,7 @@ } }, "devDependencies": { - "@spectrum-css/commons": "^9.1.3" + "@spectrum-css/commons": "^9.1.4-next.0" }, "publishConfig": { "access": "public" diff --git a/components/progressbar/index.css b/components/progressbar/index.css index 107df987f7f..694f4de6871 100644 --- a/components/progressbar/index.css +++ b/components/progressbar/index.css @@ -41,7 +41,7 @@ governing permissions and limitations under the License. /* Color */ --spectrum-progressbar-text-color: var(--spectrum-neutral-content-color-default); - --spectrum-progressbar-track-color: var(--spectrum-gray-300); + --spectrum-progressbar-track-color: var(--spectrum-gray-200); --spectrum-progressbar-fill-color: var(--spectrum-accent-color-900); --spectrum-progressbar-fill-color-positive: var(--spectrum-positive-visual-color); --spectrum-progressbar-fill-color-notice: var(--spectrum-notice-visual-color); diff --git a/components/progressbar/package.json b/components/progressbar/package.json index 6a85c2dfeee..5078ba97d91 100644 --- a/components/progressbar/package.json +++ b/components/progressbar/package.json @@ -1,6 +1,6 @@ { "name": "@spectrum-css/progressbar", - "version": "3.1.5", + "version": "3.1.6-next.1", "description": "The Spectrum CSS progress bar component", "license": "Apache-2.0", "author": "Adobe", @@ -16,7 +16,7 @@ "main": "dist/index.css", "peerDependencies": { "@spectrum-css/fieldlabel": ">=7", - "@spectrum-css/tokens": ">=13" + "@spectrum-css/tokens": "^14.0.0-next.3" }, "peerDependenciesMeta": { "@spectrum-css/fieldlabel": { diff --git a/components/progresscircle/index.css b/components/progresscircle/index.css index f02b067fa9b..6182690572f 100644 --- a/components/progresscircle/index.css +++ b/components/progresscircle/index.css @@ -14,7 +14,7 @@ governing permissions and limitations under the License. .spectrum-ProgressCircle { /* circle unfilled border color */ - --spectrum-progress-circle-track-border-color: var(--spectrum-gray-300); + --spectrum-progress-circle-track-border-color: var(--spectrum-gray-200); /* circle progress fill border color */ --spectrum-progress-circle-fill-border-color: var(--spectrum-accent-content-color-default); diff --git a/components/progresscircle/package.json b/components/progresscircle/package.json index 650bdf0f5e7..4764acc8798 100644 --- a/components/progresscircle/package.json +++ b/components/progresscircle/package.json @@ -1,6 +1,6 @@ { "name": "@spectrum-css/progresscircle", - "version": "2.2.3", + "version": "2.2.4-next.1", "description": "The Spectrum CSS progress circle component", "license": "Apache-2.0", "author": "Adobe", @@ -15,7 +15,7 @@ }, "main": "dist/index.css", "peerDependencies": { - "@spectrum-css/tokens": ">=13" + "@spectrum-css/tokens": "^14.0.0-next.3" }, "publishConfig": { "access": "public" diff --git a/components/radio/index.css b/components/radio/index.css index b68b3bfde77..663b3cae402 100644 --- a/components/radio/index.css +++ b/components/radio/index.css @@ -43,7 +43,7 @@ governing permissions and limitations under the License. /* selection indicator all themes */ --spectrum-radio-border-width: var(--spectrum-border-width-200); - --spectrum-radio-button-background-color: var(--spectrum-gray-75); + --spectrum-radio-button-background-color: var(--spectrum-gray-50); /* checked selection indicator */ --spectrum-radio-button-checked-border-color-default: var(--spectrum-neutral-background-color-selected-default); diff --git a/components/radio/package.json b/components/radio/package.json index 3850ee287b0..32f15432586 100644 --- a/components/radio/package.json +++ b/components/radio/package.json @@ -1,6 +1,6 @@ { "name": "@spectrum-css/radio", - "version": "8.1.5", + "version": "8.1.6-next.1", "description": "The Spectrum CSS radio component", "license": "Apache-2.0", "author": "Adobe", @@ -16,7 +16,7 @@ "main": "dist/index.css", "peerDependencies": { "@spectrum-css/icon": ">=4", - "@spectrum-css/tokens": ">=13" + "@spectrum-css/tokens": "^14.0.0-next.3" }, "publishConfig": { "access": "public" diff --git a/components/rating/package.json b/components/rating/package.json index f4cb14cb405..c3be7994728 100644 --- a/components/rating/package.json +++ b/components/rating/package.json @@ -1,6 +1,6 @@ { "name": "@spectrum-css/rating", - "version": "4.2.4", + "version": "4.2.5-next.1", "description": "The Spectrum CSS rating component", "license": "Apache-2.0", "author": "Adobe", @@ -16,7 +16,7 @@ "main": "dist/index.css", "peerDependencies": { "@spectrum-css/icon": ">=4", - "@spectrum-css/tokens": ">=13" + "@spectrum-css/tokens": "^14.0.0-next.3" }, "publishConfig": { "access": "public" diff --git a/components/search/index.css b/components/search/index.css index fcc63db8858..e3c3b011677 100644 --- a/components/search/index.css +++ b/components/search/index.css @@ -59,7 +59,7 @@ governing permissions and limitations under the License. /* Background and Border */ --spectrum-search-border-width: var(--spectrum-border-width-100); - --spectrum-search-background-color: var(--spectrum-gray-50); + --spectrum-search-background-color: var(--spectrum-gray-25); /* Disabled */ --spectrum-search-color-disabled: var(--spectrum-disabled-content-color); diff --git a/components/search/package.json b/components/search/package.json index 0872aac8feb..4efac2103f7 100644 --- a/components/search/package.json +++ b/components/search/package.json @@ -1,6 +1,6 @@ { "name": "@spectrum-css/search", - "version": "6.2.4", + "version": "6.2.5-next.1", "description": "The Spectrum CSS search component", "license": "Apache-2.0", "author": "Adobe", @@ -18,7 +18,7 @@ "@spectrum-css/clearbutton": ">=5", "@spectrum-css/icon": ">=4", "@spectrum-css/textfield": ">=6", - "@spectrum-css/tokens": ">=13" + "@spectrum-css/tokens": "^14.0.0-next.3" }, "publishConfig": { "access": "public" diff --git a/components/sidenav/index.css b/components/sidenav/index.css index 728b5b4e48b..2923ae4bda6 100644 --- a/components/sidenav/index.css +++ b/components/sidenav/index.css @@ -42,14 +42,14 @@ governing permissions and limitations under the License. /* color - background */ --spectrum-sidenav-background-disabled: transparent; --spectrum-sidenav-background-default: transparent; - --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); + --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); /* color font */ --spectrum-sidenav-header-color: var(--spectrum-gray-600); diff --git a/components/sidenav/package.json b/components/sidenav/package.json index 6968e7816c8..1a74951ce3c 100644 --- a/components/sidenav/package.json +++ b/components/sidenav/package.json @@ -1,6 +1,6 @@ { "name": "@spectrum-css/sidenav", - "version": "4.2.4", + "version": "4.2.5-next.1", "description": "The Spectrum CSS sidenav component", "license": "Apache-2.0", "author": "Adobe", @@ -16,7 +16,7 @@ "main": "dist/index.css", "peerDependencies": { "@spectrum-css/icon": ">=4", - "@spectrum-css/tokens": ">=13" + "@spectrum-css/tokens": "^14.0.0-next.3" }, "peerDependenciesMeta": { "@spectrum-css/icon": { diff --git a/components/site/package.json b/components/site/package.json index ad8bfe21a91..e354e52378a 100644 --- a/components/site/package.json +++ b/components/site/package.json @@ -1,6 +1,6 @@ { "name": "@spectrum-css/site", - "version": "4.2.4", + "version": "4.2.5-next.1", "description": "The Spectrum CSS Site component", "license": "Apache-2.0", "author": "Adobe", @@ -15,7 +15,7 @@ }, "main": "dist/index.css", "peerDependencies": { - "@spectrum-css/tokens": ">=13" + "@spectrum-css/tokens": "^14.0.0-next.3" }, "publishConfig": { "access": "public" diff --git a/components/slider/index.css b/components/slider/index.css index fd2ccb25784..b3d31132208 100644 --- a/components/slider/index.css +++ b/components/slider/index.css @@ -88,7 +88,7 @@ governing permissions and limitations under the License. --spectrum-slider-track-fill-thickness: var(--spectrum-slider-track-thickness); --spectrum-slider-tick-mark-width: var(--spectrum-border-width-200); --spectrum-slider-tick-mark-border-radius: 2px; - --spectrum-slider-tick-handle-background-color: var(--spectrum-gray-100); + --spectrum-slider-tick-handle-background-color: var(--spectrum-gray-75); /* colors */ --spectrum-slider-track-color-disabled: var(--spectrum-disabled-background-color); @@ -97,7 +97,7 @@ governing permissions and limitations under the License. --spectrum-slider-label-text-color: var(--spectrum-neutral-content-color-default); --spectrum-slider-label-text-color-disabled: var(--spectrum-disabled-content-color); --spectrum-slider-tick-mark-color-disabled: var(--spectrum-disabled-background-color); - --spectrum-slider-ramp-handle-border-color-active: var(--spectrum-gray-100); + --spectrum-slider-ramp-handle-border-color-active: var(--spectrum-gray-75); /* values */ --spectrum-slider-input-left: calc(var(--spectrum-slider-handle-margin-left) / 4); diff --git a/components/slider/package.json b/components/slider/package.json index 74b31e01fcd..ac731345c71 100644 --- a/components/slider/package.json +++ b/components/slider/package.json @@ -1,6 +1,6 @@ { "name": "@spectrum-css/slider", - "version": "4.3.5", + "version": "4.3.6-next.1", "description": "The Spectrum CSS slider component", "license": "Apache-2.0", "author": "Adobe", @@ -16,7 +16,7 @@ "main": "dist/index.css", "peerDependencies": { "@spectrum-css/stepper": ">=5", - "@spectrum-css/tokens": ">=13" + "@spectrum-css/tokens": "^14.0.0-next.3" }, "publishConfig": { "access": "public" diff --git a/components/slider/themes/express.css b/components/slider/themes/express.css index 1df5f6ef8ee..f3b47ac5fc2 100644 --- a/components/slider/themes/express.css +++ b/components/slider/themes/express.css @@ -13,19 +13,19 @@ governing permissions and limitations under the License. @container (--system: express) { .spectrum-Slider { - --spectrum-slider-track-color: var(--spectrum-gray-200); + --spectrum-slider-track-color: var(--spectrum-gray-100); --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-ramp-track-color: var(--spectrum-gray-200); + --spectrum-slider-ramp-track-color-disabled: var(--spectrum-gray-100); - --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-background-color: var(--spectrum-gray-25); + --spectrum-slider-handle-background-color-disabled: var(--spectrum-gray-25); + --spectrum-slider-ramp-handle-background-color: var(--spectrum-gray-25); + --spectrum-slider-ticks-handle-background-color: var(--spectrum-gray-25); --spectrum-slider-handle-border-color: var(--spectrum-gray-800); - --spectrum-slider-handle-disabled-background-color: var(--spectrum-gray-50); + --spectrum-slider-handle-disabled-background-color: var(--spectrum-gray-25); - --spectrum-slider-tick-mark-color: var(--spectrum-gray-200); + --spectrum-slider-tick-mark-color: var(--spectrum-gray-100); --spectrum-slider-handle-border-color-hover: var(--spectrum-gray-900); --spectrum-slider-handle-border-color-down: var(--spectrum-gray-900); diff --git a/components/slider/themes/spectrum.css b/components/slider/themes/spectrum.css index 90f77d3b6db..5711d043d3f 100644 --- a/components/slider/themes/spectrum.css +++ b/components/slider/themes/spectrum.css @@ -11,19 +11,19 @@ governing permissions and limitations under the License. @container (--system: spectrum) { .spectrum-Slider { - --spectrum-slider-track-color: var(--spectrum-gray-300); + --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-200); + --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-100); - --spectrum-slider-ticks-handle-background-color: var(--spectrum-gray-100); + --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-100); + --spectrum-slider-handle-disabled-background-color: var(--spectrum-gray-75); - --spectrum-slider-tick-mark-color: var(--spectrum-gray-300); + --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); diff --git a/components/splitview/index.css b/components/splitview/index.css index f38626acede..08c895ed59d 100644 --- a/components/splitview/index.css +++ b/components/splitview/index.css @@ -16,8 +16,8 @@ governing permissions and limitations under the License. --spectrum-splitview-vertical-gripper-outer-width: 100%; --spectrum-splitview-vertical-gripper-reset: 0; - --spectrum-splitview-background-color: var(--spectrum-gray-100); - --spectrum-splitview-handle-background-color: var(--spectrum-gray-300); + --spectrum-splitview-background-color: var(--spectrum-gray-75); + --spectrum-splitview-handle-background-color: var(--spectrum-gray-200); --spectrum-splitview-handle-background-color-hover: var(--spectrum-gray-400); --spectrum-splitview-handle-background-color-down: var(--spectrum-gray-800); --spectrum-splitview-handle-background-color-focus: var(--spectrum-focus-indicator-color); diff --git a/components/splitview/package.json b/components/splitview/package.json index 05b4a925f14..991818b19ff 100644 --- a/components/splitview/package.json +++ b/components/splitview/package.json @@ -1,6 +1,6 @@ { "name": "@spectrum-css/splitview", - "version": "4.2.4", + "version": "4.2.5-next.1", "description": "The Spectrum CSS splitview component", "license": "Apache-2.0", "author": "Adobe", @@ -15,7 +15,7 @@ }, "main": "dist/index.css", "peerDependencies": { - "@spectrum-css/tokens": ">=13" + "@spectrum-css/tokens": "^14.0.0-next.3" }, "publishConfig": { "access": "public" diff --git a/components/statuslight/package.json b/components/statuslight/package.json index 96f792e8b9b..92628be7729 100644 --- a/components/statuslight/package.json +++ b/components/statuslight/package.json @@ -1,6 +1,6 @@ { "name": "@spectrum-css/statuslight", - "version": "6.1.6", + "version": "6.1.7-next.1", "description": "The Spectrum CSS statuslight component", "license": "Apache-2.0", "author": "Adobe", @@ -15,7 +15,7 @@ }, "main": "dist/index.css", "peerDependencies": { - "@spectrum-css/tokens": ">=13" + "@spectrum-css/tokens": "^14.0.0-next.3" }, "publishConfig": { "access": "public" diff --git a/components/steplist/index.css b/components/steplist/index.css index 34d99296530..3fb83644cbb 100644 --- a/components/steplist/index.css +++ b/components/steplist/index.css @@ -46,9 +46,9 @@ governing permissions and limitations under the License. --spectrum-steplist-complete-marker-background-color: var(--spectrum-gray-600); - --spectrum-steplist-incomplete-marker-border-color: var(--spectrum-gray-300); + --spectrum-steplist-incomplete-marker-border-color: var(--spectrum-gray-200); - --spectrum-steplist-incomplete-segment-border-block-end-color: var(--spectrum-gray-300); + --spectrum-steplist-incomplete-segment-border-block-end-color: var(--spectrum-gray-200); --spectrum-steplist-complete-segment-border-block-end-color: var(--spectrum-gray-600); } diff --git a/components/steplist/package.json b/components/steplist/package.json index 01c50af63e4..d4a81919de1 100644 --- a/components/steplist/package.json +++ b/components/steplist/package.json @@ -1,6 +1,6 @@ { "name": "@spectrum-css/steplist", - "version": "4.1.4", + "version": "4.1.5-next.1", "description": "The Spectrum CSS steplist component", "license": "Apache-2.0", "author": "Adobe", @@ -16,7 +16,7 @@ "main": "dist/index.css", "peerDependencies": { "@spectrum-css/icon": ">=4", - "@spectrum-css/tokens": ">=13", + "@spectrum-css/tokens": "^14.0.0-next.3", "@spectrum-css/tooltip": ">=5" }, "peerDependenciesMeta": { diff --git a/components/stepper/package.json b/components/stepper/package.json index 55995c3a546..b7e98e03674 100644 --- a/components/stepper/package.json +++ b/components/stepper/package.json @@ -1,6 +1,6 @@ { "name": "@spectrum-css/stepper", - "version": "5.1.5", + "version": "5.1.6-next.1", "description": "The Spectrum CSS stepper component", "license": "Apache-2.0", "author": "Adobe", @@ -19,7 +19,7 @@ "@spectrum-css/icon": ">=4", "@spectrum-css/infieldbutton": ">=4", "@spectrum-css/textfield": ">=6", - "@spectrum-css/tokens": ">=13" + "@spectrum-css/tokens": "^14.0.0-next.3" }, "peerDependenciesMeta": { "@spectrum-css/infieldbutton": { diff --git a/components/stepper/themes/express.css b/components/stepper/themes/express.css index 835ebeb952b..d674b2b8aca 100644 --- a/components/stepper/themes/express.css +++ b/components/stepper/themes/express.css @@ -19,7 +19,7 @@ governing permissions and limitations under the License. --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-background-color: var(--spectrum-gray-25); --spectrum-stepper-buttons-border-color-hover: transparent; --spectrum-stepper-buttons-border-color-focus: transparent; --spectrum-stepper-buttons-border-color-keyboard-focus: transparent; @@ -39,7 +39,7 @@ governing permissions and limitations under the License. --spectrum-stepper-border-color-keyboard-focus-invalid: transparent; --spectrum-stepper-button-background-color-focus: var(--spectrum-gray-400); - --spectrum-stepper-button-background-color-keyboard-focus: var(--spectrum-gray-300); + --spectrum-stepper-button-background-color-keyboard-focus: var(--spectrum-gray-200); &.is-disabled { --spectrum-stepper-buttons-background-color: var(--spectrum-disabled-background-color); diff --git a/components/stepper/themes/spectrum.css b/components/stepper/themes/spectrum.css index a59b448068d..da0ed2a7976 100644 --- a/components/stepper/themes/spectrum.css +++ b/components/stepper/themes/spectrum.css @@ -17,7 +17,7 @@ governing permissions and limitations under the License. --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-50); + --spectrum-stepper-buttons-background-color: var(--spectrum-gray-25); --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-900); @@ -36,7 +36,7 @@ governing permissions and limitations under the License. --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); - --spectrum-stepper-button-background-color-focus: var(--spectrum-gray-300); - --spectrum-stepper-button-background-color-keyboard-focus: var(--spectrum-gray-200); + --spectrum-stepper-button-background-color-focus: var(--spectrum-gray-200); + --spectrum-stepper-button-background-color-keyboard-focus: var(--spectrum-gray-100); } } diff --git a/components/swatch/index.css b/components/swatch/index.css index 2d47bab6d36..373071b304c 100644 --- a/components/swatch/index.css +++ b/components/swatch/index.css @@ -28,7 +28,7 @@ governing permissions and limitations under the License. /* Color */ --spectrum-swatch-border-color-selected: var(--spectrum-gray-900); - --spectrum-swatch-inner-border-color-selected: var(--spectrum-gray-50); + --spectrum-swatch-inner-border-color-selected: var(--spectrum-gray-25); --spectrum-swatch-disabled-icon-border-color: var(--spectrum-swatch-disabled-icon-border-color); --spectrum-swatch-disabled-icon-color: var(--spectrum-white); --spectrum-swatch-dash-icon-color: var(--spectrum-gray-800); diff --git a/components/swatch/package.json b/components/swatch/package.json index c2b1fff2979..8fb4886f4ac 100644 --- a/components/swatch/package.json +++ b/components/swatch/package.json @@ -1,6 +1,6 @@ { "name": "@spectrum-css/swatch", - "version": "5.1.5", + "version": "5.1.6-next.1", "description": "The Spectrum CSS Color swatch component", "license": "Apache-2.0", "author": "Adobe", @@ -16,7 +16,7 @@ "main": "dist/index.css", "peerDependencies": { "@spectrum-css/opacitycheckerboard": ">=1", - "@spectrum-css/tokens": ">=13" + "@spectrum-css/tokens": "^14.0.0-next.3" }, "publishConfig": { "access": "public" diff --git a/components/swatchgroup/package.json b/components/swatchgroup/package.json index 4f44370bae9..f9487143806 100644 --- a/components/swatchgroup/package.json +++ b/components/swatchgroup/package.json @@ -1,6 +1,6 @@ { "name": "@spectrum-css/swatchgroup", - "version": "2.1.5", + "version": "2.1.6-next.1", "description": "The Spectrum CSS Color swatch group component", "license": "Apache-2.0", "author": "Adobe", @@ -16,7 +16,7 @@ "main": "dist/index.css", "peerDependencies": { "@spectrum-css/swatch": ">=5", - "@spectrum-css/tokens": ">=13" + "@spectrum-css/tokens": "^14.0.0-next.3" }, "publishConfig": { "access": "public" diff --git a/components/switch/index.css b/components/switch/index.css index 3dd7debec89..c984205c8ac 100644 --- a/components/switch/index.css +++ b/components/switch/index.css @@ -19,8 +19,8 @@ governing permissions and limitations under the License. --spectrum-switch-label-color-focus: var(--spectrum-neutral-content-color-key-focus); --spectrum-switch-label-color-disabled: var(--spectrum-disabled-content-color); - --spectrum-switch-background-color: var(--spectrum-gray-300); - --spectrum-switch-background-color-disabled: var(--spectrum-gray-300); + --spectrum-switch-background-color: var(--spectrum-gray-200); + --spectrum-switch-background-color-disabled: var(--spectrum-gray-200); --spectrum-switch-background-color-selected-disabled: var(--spectrum-disabled-content-color); --spectrum-switch-background-color-selected-default: var(--spectrum-neutral-background-color-selected-default); @@ -31,7 +31,7 @@ governing permissions and limitations under the License. --spectrum-switch-focus-indicator-thickness: var(--mod-focus-indicator-thickness, var(--spectrum-focus-indicator-thickness)); --spectrum-switch-focus-indicator-color: var(--spectrum-focus-indicator-color); - --spectrum-switch-handle-background-color: var(--spectrum-gray-75); + --spectrum-switch-handle-background-color: var(--spectrum-gray-50); --spectrum-switch-handle-border-color-disabled: var(--spectrum-disabled-content-color); } diff --git a/components/switch/package.json b/components/switch/package.json index 07ad33f6f1c..17d1971c57c 100644 --- a/components/switch/package.json +++ b/components/switch/package.json @@ -1,6 +1,6 @@ { "name": "@spectrum-css/switch", - "version": "4.2.5", + "version": "4.2.6-next.1", "description": "The Spectrum CSS switch component", "license": "Apache-2.0", "author": "Adobe", @@ -15,7 +15,7 @@ }, "main": "dist/index.css", "peerDependencies": { - "@spectrum-css/tokens": ">=13" + "@spectrum-css/tokens": "^14.0.0-next.3" }, "publishConfig": { "access": "public" diff --git a/components/table/index.css b/components/table/index.css index 05bdc7ec337..805e994a9bd 100644 --- a/components/table/index.css +++ b/components/table/index.css @@ -41,13 +41,13 @@ governing permissions and limitations under the License. --spectrum-table-row-line-height: var(--spectrum-line-height-100); /* General Colors */ - --spectrum-table-border-color: var(--spectrum-gray-300); - --spectrum-table-divider-color: var(--spectrum-gray-300); + --spectrum-table-border-color: var(--spectrum-gray-200); + --spectrum-table-divider-color: var(--spectrum-gray-200); --spectrum-table-header-background-color: var(--spectrum-transparent-white-100); --spectrum-table-header-text-color: var(--spectrum-body-color); - --spectrum-table-row-background-color: var(--spectrum-gray-50); + --spectrum-table-row-background-color: var(--spectrum-gray-25); --spectrum-table-row-text-color: var(--spectrum-neutral-content-color-default); /* ----- * @@ -82,14 +82,14 @@ governing permissions and limitations under the License. /* Summary Row and Section Header Row */ --spectrum-table-summary-row-font-weight: var(--spectrum-bold-font-weight); - --spectrum-table-summary-row-background-color: var(--spectrum-gray-200); + --spectrum-table-summary-row-background-color: var(--spectrum-gray-100); --spectrum-table-section-header-min-height: var(--spectrum-table-section-header-row-height-medium); --spectrum-table-section-header-block-start-spacing: var(--spectrum-component-top-to-text-100); --spectrum-table-section-header-block-end-spacing: var(--spectrum-component-bottom-to-text-100); --spectrum-table-section-header-font-weight: var(--spectrum-bold-font-weight); - --spectrum-table-section-header-background-color: var(--spectrum-gray-200); + --spectrum-table-section-header-background-color: var(--spectrum-gray-100); /* Collapsible and Thumbnails */ --spectrum-table-collapsible-tier-indent: var(--spectrum-spacing-300); @@ -807,7 +807,7 @@ governing permissions and limitations under the License. /********* SCROLLABLE *********/ /* Wrapper that allows a scrollable body and sticky column header. */ .spectrum-Table-scroller { - --spectrum-table-header-background-color: var(--mod-table-header-background-color-scrollable, var(--spectrum-background-layer-1-color, var(--spectrum-gray-100))); + --spectrum-table-header-background-color: var(--mod-table-header-background-color-scrollable, var(--spectrum-background-layer-1-color, var(--spectrum-gray-75))); box-sizing: border-box; display: inline-block; @@ -823,7 +823,7 @@ governing permissions and limitations under the License. var(--highcontrast-table-border-color, var(--mod-table-border-color, var(--spectrum-table-border-color))); &.spectrum-Table--quiet { - --mod-table-header-background-color--quiet: var(--mod-table-header-background-color-scrollable, var(--spectrum-background-layer-1-color, var(--spectrum-gray-100))); + --mod-table-header-background-color--quiet: var(--mod-table-header-background-color-scrollable, var(--spectrum-background-layer-1-color, var(--spectrum-gray-75))); border-block-start: none; } diff --git a/components/table/package.json b/components/table/package.json index eabd6c52eae..74a99b7b3b2 100644 --- a/components/table/package.json +++ b/components/table/package.json @@ -1,6 +1,6 @@ { "name": "@spectrum-css/table", - "version": "5.2.5", + "version": "5.2.6-next.1", "description": "The Spectrum CSS table component", "license": "Apache-2.0", "author": "Adobe", @@ -19,7 +19,7 @@ "@spectrum-css/checkbox": ">=8", "@spectrum-css/icon": ">=4", "@spectrum-css/thumbnail": ">=5", - "@spectrum-css/tokens": ">=13" + "@spectrum-css/tokens": "^14.0.0-next.3" }, "peerDependenciesMeta": { "@spectrum-css/button": { diff --git a/components/tabs/index.css b/components/tabs/index.css index 160c80a90bf..6fa030de42b 100644 --- a/components/tabs/index.css +++ b/components/tabs/index.css @@ -64,7 +64,7 @@ governing permissions and limitations under the License. ); --spectrum-tabs-list-background-direction: top; - --spectrum-tabs-divider-background-color: var(--spectrum-gray-300); + --spectrum-tabs-divider-background-color: var(--spectrum-gray-200); --spectrum-tabs-divider-size: var(--spectrum-border-width-200); --spectrum-tabs-divider-border-radius: 1px; diff --git a/components/tabs/package.json b/components/tabs/package.json index afc34e0dc89..6ee350ae527 100644 --- a/components/tabs/package.json +++ b/components/tabs/package.json @@ -1,6 +1,6 @@ { "name": "@spectrum-css/tabs", - "version": "4.1.4", + "version": "4.1.5-next.1", "description": "The Spectrum CSS tabs component", "license": "Apache-2.0", "author": "Adobe", @@ -18,7 +18,7 @@ "@spectrum-css/icon": ">=4", "@spectrum-css/menu": ">=5", "@spectrum-css/picker": ">=6", - "@spectrum-css/tokens": ">=13" + "@spectrum-css/tokens": "^14.0.0-next.3" }, "peerDependenciesMeta": { "@spectrum-css/icon": { diff --git a/components/tag/index.css b/components/tag/index.css index cc93e1d5bf7..4706a5146bc 100644 --- a/components/tag/index.css +++ b/components/tag/index.css @@ -29,7 +29,7 @@ governing permissions and limitations under the License. --spectrum-tag-label-font-weight: var(--spectrum-regular-font-weight); /* selected */ - --spectrum-tag-content-color-selected: var(--spectrum-gray-50); + --spectrum-tag-content-color-selected: var(--spectrum-gray-25); --spectrum-tag-background-color-selected: var(--spectrum-neutral-background-color-selected-default); --spectrum-tag-background-color-selected-hover: var(--spectrum-neutral-background-color-selected-hover); --spectrum-tag-background-color-selected-active: var(--spectrum-neutral-background-color-selected-down); diff --git a/components/tag/package.json b/components/tag/package.json index d741dc84bb2..1907ca6bc2f 100644 --- a/components/tag/package.json +++ b/components/tag/package.json @@ -1,6 +1,6 @@ { "name": "@spectrum-css/tag", - "version": "8.1.5", + "version": "8.1.6-next.1", "description": "The Spectrum CSS tags component", "license": "Apache-2.0", "author": "Adobe", @@ -18,7 +18,7 @@ "@spectrum-css/avatar": ">=6", "@spectrum-css/clearbutton": ">=5", "@spectrum-css/icon": ">=4", - "@spectrum-css/tokens": ">=13" + "@spectrum-css/tokens": "^14.0.0-next.3" }, "peerDependenciesMeta": { "@spectrum-css/avatar": { diff --git a/components/tag/themes/express.css b/components/tag/themes/express.css index 720c1b53f71..f4817e107f9 100644 --- a/components/tag/themes/express.css +++ b/components/tag/themes/express.css @@ -16,9 +16,9 @@ governing permissions and limitations under the License. .spectrum-Tag { /* border */ --spectrum-tag-background-color: transparent; - --spectrum-tag-background-color-hover: var(--spectrum-gray-300); + --spectrum-tag-background-color-hover: var(--spectrum-gray-200); --spectrum-tag-background-color-active: var(--spectrum-gray-400); - --spectrum-tag-background-color-focus: var(--spectrum-gray-300); + --spectrum-tag-background-color-focus: var(--spectrum-gray-200); /* express has pill style full corner radius */ --spectrum-tag-size-small-corner-radius: var(--spectrum-component-height-75); @@ -26,7 +26,7 @@ governing permissions and limitations under the License. --spectrum-tag-size-large-corner-radius: var(--spectrum-component-height-200); /* background */ - --spectrum-tag-border-color: var(--spectrum-gray-300); + --spectrum-tag-border-color: var(--spectrum-gray-200); --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); diff --git a/components/tag/themes/spectrum.css b/components/tag/themes/spectrum.css index 8c02defb2f8..01bff14b1b2 100644 --- a/components/tag/themes/spectrum.css +++ b/components/tag/themes/spectrum.css @@ -24,10 +24,10 @@ governing permissions and limitations under the License. --spectrum-tag-size-large-corner-radius: var(--spectrum-corner-radius-100); /* background */ - --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-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); /* content color */ --spectrum-tag-content-color: var(--spectrum-neutral-subdued-content-color-default); diff --git a/components/taggroup/package.json b/components/taggroup/package.json index e0c3335675e..4975b9c4a34 100644 --- a/components/taggroup/package.json +++ b/components/taggroup/package.json @@ -1,6 +1,6 @@ { "name": "@spectrum-css/taggroup", - "version": "4.1.5", + "version": "4.1.6-next.1", "description": "The Spectrum CSS tag group component", "license": "Apache-2.0", "author": "Adobe", @@ -16,7 +16,7 @@ "main": "dist/index.css", "peerDependencies": { "@spectrum-css/tag": ">=8", - "@spectrum-css/tokens": ">=13" + "@spectrum-css/tokens": "^14.0.0-next.3" }, "publishConfig": { "access": "public" diff --git a/components/textfield/index.css b/components/textfield/index.css index e97e5944319..2d3c4b0812d 100644 --- a/components/textfield/index.css +++ b/components/textfield/index.css @@ -131,7 +131,7 @@ governing permissions and limitations under the License. --spectrum-textfield-focus-indicator-gap: var(--spectrum-focus-indicator-gap); /*** Colors ***/ - --spectrum-textfield-background-color: var(--spectrum-gray-50); + --spectrum-textfield-background-color: var(--spectrum-gray-25); /* Text Colors */ --spectrum-textfield-text-color-default: var( diff --git a/components/textfield/package.json b/components/textfield/package.json index 7145c10b893..e3251c8034a 100644 --- a/components/textfield/package.json +++ b/components/textfield/package.json @@ -1,6 +1,6 @@ { "name": "@spectrum-css/textfield", - "version": "6.1.6", + "version": "6.1.7-next.1", "description": "The Spectrum CSS textfield component", "license": "Apache-2.0", "author": "Adobe", @@ -16,7 +16,7 @@ "main": "dist/index.css", "peerDependencies": { "@spectrum-css/helptext": ">=4", - "@spectrum-css/tokens": ">=13" + "@spectrum-css/tokens": "^14.0.0-next.3" }, "peerDependenciesMeta": { "@spectrum-css/helptext": { diff --git a/components/thumbnail/package.json b/components/thumbnail/package.json index 2131baf79e6..f27c599ec16 100644 --- a/components/thumbnail/package.json +++ b/components/thumbnail/package.json @@ -1,6 +1,6 @@ { "name": "@spectrum-css/thumbnail", - "version": "5.2.4", + "version": "5.2.5-next.1", "description": "The Spectrum CSS thumbnail component", "license": "Apache-2.0", "author": "Adobe", @@ -16,7 +16,7 @@ "main": "dist/index.css", "peerDependencies": { "@spectrum-css/opacitycheckerboard": ">=1", - "@spectrum-css/tokens": ">=13" + "@spectrum-css/tokens": "^14.0.0-next.3" }, "publishConfig": { "access": "public" diff --git a/components/toast/index.css b/components/toast/index.css index c3be10e1ed3..58c7d76bc54 100644 --- a/components/toast/index.css +++ b/components/toast/index.css @@ -1,5 +1,5 @@ /*! -Copyright 2023 Adobe. All rights reserved. +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 @@ -10,8 +10,6 @@ OF ANY KIND, either express or implied. See the License for the specific languag governing permissions and limitations under the License. */ -@import "./themes/express.css"; - .spectrum-Toast { /* Hardcoded variables */ --spectrum-toast-font-weight: var(--spectrum-regular-font-weight); @@ -19,7 +17,7 @@ governing permissions and limitations under the License. /* Size */ --spectrum-toast-font-size: var(--spectrum-font-size-100); - --spectrum-toast-corner-radius: var(--spectrum-corner-radius-100); + --spectrum-toast-corner-radius: var(--spectrum-corner-radius-800); --spectrum-toast-block-size: var(--spectrum-toast-height); --spectrum-toast-max-inline-size: var(--spectrum-toast-maximum-width); --spectrum-toast-border-width: var(--spectrum-border-width-100); @@ -28,35 +26,35 @@ governing permissions and limitations under the License. --spectrum-toast-line-height-cjk: var(--spectrum-cjk-line-height-100); /* Space */ + --spectrum-toast-spacing-close-button-to-edge: var(--spectrum-spacing-100); + --spectrum-toast-spacing-text-to-close-button: var(--spectrum-spacing-300); + --spectrum-toast-spacing-text-to-action-button-horizontal: var(--spectrum-spacing-400); - --spectrum-toast-spacing-icon-to-text: var(--spectrum-text-to-visual-100); + --spectrum-toast-spacing-icon-to-text: var(--spectrum-text-to-visual-300); --spectrum-toast-spacing-start-edge-to-text-and-icon: var(--spectrum-spacing-300); - --spectrum-toast-spacing-text-and-action-button-to-divider: var(--spectrum-spacing-300); + --spectrum-toast-spacing-action-button-to-close-button: var(--spectrum-spacing-200); - --spectrum-toast-spacing-top-edge-to-divider: var(--spectrum-spacing-100); - --spectrum-toast-spacing-bottom-edge-to-divider: var(--spectrum-spacing-100); + --spectrum-toast-spacing-top-edge-to-close-button: var(--spectrum-spacing-200); + --spectrum-toast-spacing-bottom-edge-to-close-button: var(--spectrum-spacing-200); --spectrum-toast-spacing-top-edge-to-icon: var(--spectrum-toast-top-to-workflow-icon); - --spectrum-toast-spacing-text-to-action-button-horizontal: var(--spectrum-spacing-300); - --spectrum-toast-spacing-close-button: var(--spectrum-spacing-100); - - --spectrum-toast-spacing-block-start: var(--spectrum-spacing-100); - --spectrum-toast-spacing-block-end: var(--spectrum-spacing-100); + --spectrum-toast-spacing-block-start: var(--spectrum-spacing-200); + --spectrum-toast-spacing-block-end: var(--spectrum-spacing-200); --spectrum-toast-spacing-top-edge-to-text: var(--spectrum-toast-top-to-text); --spectrum-toast-spacing-bottom-edge-to-text: var(--spectrum-toast-bottom-to-text); /* Color */ - + --spectrum-toast-background-color-default: var(--spectrum-neutral-subdued-background-color-default); --spectrum-toast-negative-background-color-default: var(--spectrum-negative-background-color-default); --spectrum-toast-positive-background-color-default: var(--spectrum-positive-background-color-default); --spectrum-toast-informative-background-color-default: var(--spectrum-informative-background-color-default); --spectrum-toast-text-and-icon-color: var(--spectrum-white); - --spectrum-toast-divider-color: var(--spectrum-transparent-white-300); + --mod-closebutton-icon-color-default: var(--highcontrast-toast-text-and-icon-color, var(--mod-toast-text-and-icon-color, var(--spectrum-toast-text-and-icon-color))); } @media (forced-colors: active) { @@ -86,33 +84,17 @@ governing permissions and limitations under the License. -webkit-font-smoothing: antialiased; background-color: var(--highcontrast-toast-background-color-default, var(--mod-toast-background-color-default, var(--spectrum-toast-background-color-default))); - color: var(--highcontrast-toast-background-color-default, var(--mod-toast-background-color-default, var(--spectrum-toast-background-color-default))); &--negative { background-color: var(--highcontrast-toast-negative-background-color-default, var(--mod-toast-negative-background-color-default, var(--spectrum-toast-negative-background-color-default))); - color: var(--highcontrast-toast-negative-background-color-default, var(--mod-toast-negative-background-color-default, var(--spectrum-toast-negative-background-color-default))); - - .spectrum-Toast-closeButton:focus-visible:not(:active) { - color: var(--highcontrast-toast-negative-background-color-default, var(--mod-toast-negative-background-color-default, var(--spectrum-toast-negative-background-color-default))); - } } &--info { background-color: var(--highcontrast-toast-informative-background-color-default, var(--mod-toast-informative-background-color-default, var(--spectrum-toast-informative-background-color-default))); - color: var(--highcontrast-toast-informative-background-color-default, var(--mod-toast-informative-background-color-default, var(--spectrum-toast-informative-background-color-default))); - - .spectrum-Toast-closeButton:focus-visible:not(:active) { - color: var(--highcontrast-toast-informative-background-color-default, var(--mod-toast-informative-background-color-default, var(--spectrum-toast-informative-background-color-default))); - } } &--positive { background-color: var(--highcontrast-toast-positive-background-color-default, var(--mod-toast-positive-background-color-default, var(--spectrum-toast-positive-background-color-default))); - color: var(--highcontrast-toast-positive-background-color-default, var(--mod-toast-positive-background-color-default, var(--spectrum-toast-positive-background-color-default))); - - .spectrum-Toast-closeButton:focus-visible:not(:active) { - color: var(--highcontrast-toast-positive-background-color-default, var(--mod-toast-positive-background-color-default, var(--spectrum-toast-positive-background-color-default))); - } } } @@ -134,8 +116,6 @@ governing permissions and limitations under the License. padding-block-start: calc(var(--mod-toast-spacing-top-edge-to-text, var(--spectrum-toast-spacing-top-edge-to-text)) - var(--mod-toast-spacing-block-start, var(--spectrum-toast-spacing-block-start))); padding-block-end: calc(var(--mod-toast-spacing-bottom-edge-to-text, var(--spectrum-toast-spacing-bottom-edge-to-text)) - var(--mod-toast-spacing-block-end, var(--spectrum-toast-spacing-block-end))); - - padding-inline-end: var(--mod-toast-spacing-text-to-action-button-horizontal, var(--spectrum-toast-spacing-text-to-action-button-horizontal)); padding-inline-start: 0; line-height: var(--mod-toast-line-height, var(--spectrum-toast-line-height)); @@ -156,45 +136,34 @@ governing permissions and limitations under the License. flex: 0 0 auto; align-items: flex-start; - margin-block-start: var(--mod-toast-spacing-top-edge-to-divider, var(--spectrum-toast-spacing-top-edge-to-divider)); - margin-block-end: var(--mod-toast-spacing-bottom-edge-to-divider, var(--spectrum-toast-spacing-bottom-edge-to-divider)); - - /* Divider color for Text | Action Button */ - border-inline-start-color: var(--mod-toast-divider-color, var(--spectrum-toast-divider-color)); - padding-inline-end: var(--mod-toast-spacing-close-button, var(--spectrum-toast-spacing-close-button)); + margin-block-start: var(--mod-toast-spacing-top-edge-to-close-button, var(--spectrum-toast-spacing-top-edge-to-close-button)); + margin-block-end: var(--mod-toast-spacing-bottom-edge-to-close-button, var(--spectrum-toast-spacing-bottom-edge-to-close-button)); + padding-inline-start: var(--mod-toast-spacing-text-to-close-button, var(--spectrum-toast-spacing-text-to-close-button)); + padding-inline-end: var(--mod-toast-spacing-close-button-to-edge, var(--spectrum-toast-spacing-close-button-to-edge)); .spectrum-CloseButton { align-self: flex-start; } } +.spectrum-Toast .spectrum-Button { + margin-inline-start: var(--mod-toast-spacing-text-to-action-button-horizontal, var(--spectrum-toast-spacing-text-to-action-button-horizontal)); +} + +.spectrum-Toast:has(.spectrum-Button) { + .spectrum-Toast-buttons { + padding-inline-start: var(--mod-toast-spacing-action-button-to-close-button, var(--spectrum-toast-spacing-action-button-to-close-button)); + } +} + .spectrum-Toast-body { display: flex; flex-wrap: wrap; align-items: center; flex: 1 1 auto; align-self: center; + justify-content: flex-end; padding-block-start: var(--mod-toast-spacing-block-start, var(--spectrum-toast-spacing-block-start)); padding-block-end: var(--mod-toast-spacing-block-end, var(--spectrum-toast-spacing-block-end)); - - .spectrum-Button { - margin-inline-end: var(--mod-toast-spacing-text-and-action-button-to-divider, var(--spectrum-toast-spacing-text-and-action-button-to-divider)); - - [dir="ltr"] & { - margin-inline-start: auto; - } - - [dir="rtl"] & { - margin-inline-end: auto; - margin-inline-end: var(--mod-toast-spacing-text-and-action-button-to-divider, var(--spectrum-toast-spacing-text-and-action-button-to-divider)); - } - } - - & + .spectrum-Toast-buttons { - padding-inline-start: var(--mod-toast-spacing-close-button, var(--spectrum-toast-spacing-close-button)); - - border-inline-start-width: 1px; - border-inline-start-style: solid; - } } diff --git a/components/toast/metadata/mods.md b/components/toast/metadata/mods.md index 388983a16a0..c4c75cdec35 100644 --- a/components/toast/metadata/mods.md +++ b/components/toast/metadata/mods.md @@ -1,28 +1,28 @@ -| Modifiable custom properties | -| ------------------------------------------------------- | -| `--mod-toast-background-color-default` | -| `--mod-toast-block-size` | -| `--mod-toast-border-width` | -| `--mod-toast-corner-radius` | -| `--mod-toast-divider-color` | -| `--mod-toast-font-size` | -| `--mod-toast-font-weight` | -| `--mod-toast-informative-background-color-default` | -| `--mod-toast-line-height` | -| `--mod-toast-line-height-cjk` | -| `--mod-toast-max-inline-size` | -| `--mod-toast-negative-background-color-default` | -| `--mod-toast-positive-background-color-default` | -| `--mod-toast-spacing-block-end` | -| `--mod-toast-spacing-block-start` | -| `--mod-toast-spacing-bottom-edge-to-divider` | -| `--mod-toast-spacing-bottom-edge-to-text` | -| `--mod-toast-spacing-close-button` | -| `--mod-toast-spacing-icon-to-text` | -| `--mod-toast-spacing-start-edge-to-text-and-icon` | -| `--mod-toast-spacing-text-and-action-button-to-divider` | -| `--mod-toast-spacing-text-to-action-button-horizontal` | -| `--mod-toast-spacing-top-edge-to-divider` | -| `--mod-toast-spacing-top-edge-to-icon` | -| `--mod-toast-spacing-top-edge-to-text` | -| `--mod-toast-text-and-icon-color` | +| Modifiable custom properties | +| ------------------------------------------------------ | +| `--mod-toast-background-color-default` | +| `--mod-toast-block-size` | +| `--mod-toast-border-width` | +| `--mod-toast-corner-radius` | +| `--mod-toast-font-size` | +| `--mod-toast-font-weight` | +| `--mod-toast-informative-background-color-default` | +| `--mod-toast-line-height` | +| `--mod-toast-line-height-cjk` | +| `--mod-toast-max-inline-size` | +| `--mod-toast-negative-background-color-default` | +| `--mod-toast-positive-background-color-default` | +| `--mod-toast-spacing-action-button-to-close-button` | +| `--mod-toast-spacing-block-end` | +| `--mod-toast-spacing-block-start` | +| `--mod-toast-spacing-bottom-edge-to-close-button` | +| `--mod-toast-spacing-bottom-edge-to-text` | +| `--mod-toast-spacing-close-button-to-edge` | +| `--mod-toast-spacing-icon-to-text` | +| `--mod-toast-spacing-start-edge-to-text-and-icon` | +| `--mod-toast-spacing-text-to-action-button-horizontal` | +| `--mod-toast-spacing-text-to-close-button` | +| `--mod-toast-spacing-top-edge-to-close-button` | +| `--mod-toast-spacing-top-edge-to-icon` | +| `--mod-toast-spacing-top-edge-to-text` | +| `--mod-toast-text-and-icon-color` | diff --git a/components/toast/metadata/toast.yml b/components/toast/metadata/toast.yml index 6165311d23a..17688a40da5 100644 --- a/components/toast/metadata/toast.yml +++ b/components/toast/metadata/toast.yml @@ -6,10 +6,18 @@ sections: This component can be modified via its `--mod-*` prefixed custom properties. A list of those prefixed custom properties can be found <a class="spectrum-Link" href="https://github.com/adobe/spectrum-css/tree/main/components/toast/metadata/mods.md">here</a>. - name: Migration Guide description: | - ### Clear button replaced by Close button - Replace `spectrum-ClearButton spectrum-ClearButton--overBackground spectrum-ClearButton--sizeM` with `spectrum-CloseButton spectrum-CloseButton--sizeM spectrum-CloseButton--staticWhite` and remove the `<div class="spectrum-ClearButton-fill">` element. - ### Over background replaced by Static White with Outline - Replace all `.spectrum-Button--overBackground .spectrum-Button--quiet` with `.spectrum-Button--staticWhite .spectrum-Button--outline`. + ### Version 10.0.0 + #### Spectrum 2 Release + Toast now uses Spectrum 2 tokens and specifications. This includes spacing, color, and icon changes. The following properties have been adjusted: + + - `.spectrum-Toast-closeButton` class has been removed. Use Close Button `--mod` custom properties instead. + - `--mod-toast-divider-color` has been removed. There is no divider included in this version of Toast + - `--mod-toast-spacing-text-and-action-button-to-divider` has been renamed to `--spectrum-toast-spacing-action-button-to-close-button` + - `--mod-toast-spacing-top-edge-to-divider` has been renamed to `--mod-toast-spacing-top-edge-to-close-button` + - `--mod-toast-spacing-bottom-edge-to-divider` has been renamed to `--mod-toast-spacing-bottom-edge-to-close-button` + - `--mod-toast-spacing-close-button` has been renamed to `--mod-toast-spacing-close-button-to-edge` + + Also note that Spectrum 2 design specifications require spacing of `spacing-300` around the Toast component. This is not included in the Spectrum CSS component and should instead be included in implementation. examples: - id: toast name: Default diff --git a/components/toast/package.json b/components/toast/package.json index aacec17d585..a8ee9afd9cc 100644 --- a/components/toast/package.json +++ b/components/toast/package.json @@ -1,6 +1,6 @@ { "name": "@spectrum-css/toast", - "version": "9.1.25", + "version": "9.1.26-next.1", "description": "The Spectrum CSS toast component", "license": "Apache-2.0", "author": "Adobe", @@ -15,10 +15,10 @@ }, "main": "dist/index.css", "peerDependencies": { - "@spectrum-css/button": ">=11", - "@spectrum-css/closebutton": ">=4", - "@spectrum-css/icon": ">=4", - "@spectrum-css/tokens": ">=13" + "@spectrum-css/button": ">=12", + "@spectrum-css/closebutton": "^5.0.0-next.0", + "@spectrum-css/icon": ">=6", + "@spectrum-css/tokens": "^14.0.0-next.3" }, "publishConfig": { "access": "public" diff --git a/components/toast/stories/template.js b/components/toast/stories/template.js index e6c6573c6db..a49903caefe 100644 --- a/components/toast/stories/template.js +++ b/components/toast/stories/template.js @@ -2,9 +2,9 @@ import { html } from "lit"; import { classMap } from "lit/directives/class-map.js"; import { ifDefined } from "lit/directives/if-defined.js"; -import { Template as Icon } from "@spectrum-css/icon/stories/template.js"; -import { Template as CloseButton } from "@spectrum-css/closebutton/stories/template.js"; import { Template as Button } from "@spectrum-css/button/stories/template.js"; +import { Template as CloseButton } from "@spectrum-css/closebutton/stories/template.js"; +import { Template as Icon } from "@spectrum-css/icon/stories/template.js"; import "../index.css"; @@ -13,28 +13,27 @@ export const Template = ({ rootClass = "spectrum-Toast", message, inlineButtonLabel, - width, variant, customClasses = [], id, ...globals }) => { - const { express } = globals; - try { - if (!express) import(/* webpackPrefetch: true */ "../themes/spectrum.css"); - else import(/* webpackPrefetch: true */ "../themes/express.css"); - } catch (e) { - console.warn(e); + let iconName = ""; + switch (variant) { + case "info": + iconName = "Info"; + break; + case "positive": + iconName = "CheckmarkCircle"; + break; + case "negative": + iconName = "Alert"; + break; + default: + iconName = ""; } - const iconName = - variant === "negative" - ? "Alert" - : variant === "positive" - ? "CheckmarkCircle" - : "Info"; - return html` <div class=${classMap({ @@ -50,7 +49,7 @@ export const Template = ({ iconName: ifDefined(iconName), size: "m", customClasses: [`${rootClass}-typeIcon`], - }) + }) : ""} <div class="${rootClass}-body"> <div class="${rootClass}-content">${message}</div> @@ -62,7 +61,7 @@ export const Template = ({ staticColor: "white", treatment: "outline", label: inlineButtonLabel, - }) + }) : ""} </div> <div class="${rootClass}-buttons"> diff --git a/components/toast/stories/toast.stories.js b/components/toast/stories/toast.stories.js index b8a73bbbf29..e9890bc9bb5 100644 --- a/components/toast/stories/toast.stories.js +++ b/components/toast/stories/toast.stories.js @@ -13,7 +13,14 @@ export default { component: "Toast", argTypes: { variant: { - table: { disable: true }, + name: "Variant", + type: { name: "string", required: true }, + table: { + type: { summary: "string" }, + category: "Component", + }, + options: ["default", "info", "positive", "negative"], + control: "select", }, message: { name: "Message", diff --git a/components/toast/themes/express.css b/components/toast/themes/express.css deleted file mode 100644 index 86cf741f932..00000000000 --- a/components/toast/themes/express.css +++ /dev/null @@ -1,18 +0,0 @@ -/*! -Copyright 2023 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 "./spectrum.css"; - -@container (--system: express) { - .spectrum-Toast { - --spectrum-toast-background-color-default: var(--spectrum-neutral-background-color-default); - } -} diff --git a/components/toast/themes/spectrum.css b/components/toast/themes/spectrum.css deleted file mode 100644 index 5ff0e5f14c0..00000000000 --- a/components/toast/themes/spectrum.css +++ /dev/null @@ -1,16 +0,0 @@ -/*! -Copyright 2023 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. -*/ - -@container (--system: spectrum) { - .spectrum-Toast { - --spectrum-toast-background-color-default: var(--spectrum-neutral-subdued-background-color-default); - } -} diff --git a/components/tooltip/package.json b/components/tooltip/package.json index e6699f15541..0130a253230 100644 --- a/components/tooltip/package.json +++ b/components/tooltip/package.json @@ -1,6 +1,6 @@ { "name": "@spectrum-css/tooltip", - "version": "5.3.5", + "version": "5.3.6-next.1", "description": "The Spectrum CSS tooltip component", "license": "Apache-2.0", "author": "Adobe", @@ -16,10 +16,10 @@ "main": "dist/index.css", "peerDependencies": { "@spectrum-css/icon": ">=4", - "@spectrum-css/tokens": ">=13" + "@spectrum-css/tokens": "^14.0.0-next.3" }, "devDependencies": { - "@spectrum-css/commons": "^9.1.3" + "@spectrum-css/commons": "^9.1.4-next.0" }, "publishConfig": { "access": "public" diff --git a/components/tray/package.json b/components/tray/package.json index cf10d1cf91f..fb10bef39e5 100644 --- a/components/tray/package.json +++ b/components/tray/package.json @@ -1,6 +1,6 @@ { "name": "@spectrum-css/tray", - "version": "2.2.7", + "version": "2.2.8-next.1", "description": "The Spectrum CSS tray component", "license": "Apache-2.0", "author": "Adobe", @@ -20,7 +20,7 @@ "@spectrum-css/divider": ">=2", "@spectrum-css/icon": ">=4", "@spectrum-css/modal": ">=4", - "@spectrum-css/tokens": ">=13" + "@spectrum-css/tokens": "^14.0.0-next.3" }, "peerDependenciesMeta": { "@spectrum-css/dialog": { diff --git a/components/treeview/index.css b/components/treeview/index.css index 38b72be9614..a94442555b5 100644 --- a/components/treeview/index.css +++ b/components/treeview/index.css @@ -32,8 +32,8 @@ governing permissions and limitations under the License. --spectrum-treeview-item-border-color-selected: var(--spectrum-blue-800); --spectrum-treeview-item-border-color-focus: var(--spectrum-blue-700); - --spectrum-treeview-item-background-color-hover: var(--spectrum-gray-200); - --spectrum-treeview-item-background-color-focus: var(--spectrum-gray-200); + --spectrum-treeview-item-background-color-hover: var(--spectrum-gray-100); + --spectrum-treeview-item-background-color-focus: var(--spectrum-gray-100); --spectrum-treeview-item-border-color-quiet-selected: transparent; diff --git a/components/treeview/package.json b/components/treeview/package.json index 0273a6c66ce..7120258d7e0 100644 --- a/components/treeview/package.json +++ b/components/treeview/package.json @@ -1,6 +1,6 @@ { "name": "@spectrum-css/treeview", - "version": "9.2.6", + "version": "9.2.7-next.1", "description": "The Spectrum CSS Tree view component", "license": "Apache-2.0", "author": "Adobe", @@ -17,7 +17,7 @@ "peerDependencies": { "@spectrum-css/icon": ">=4", "@spectrum-css/thumbnail": ">=5", - "@spectrum-css/tokens": ">=13" + "@spectrum-css/tokens": "^14.0.0-next.3" }, "peerDependenciesMeta": { "@spectrum-css/thumbnail": { diff --git a/components/typography/package.json b/components/typography/package.json index 74f8422bb63..378f59a174f 100644 --- a/components/typography/package.json +++ b/components/typography/package.json @@ -1,6 +1,6 @@ { "name": "@spectrum-css/typography", - "version": "5.1.5", + "version": "5.1.6-next.1", "description": "The Spectrum CSS typography component", "license": "Apache-2.0", "author": "Adobe", @@ -15,7 +15,7 @@ }, "main": "dist/index.css", "peerDependencies": { - "@spectrum-css/tokens": ">=13" + "@spectrum-css/tokens": "^14.0.0-next.3" }, "publishConfig": { "access": "public" diff --git a/components/underlay/package.json b/components/underlay/package.json index 71d3640467e..89329531c6a 100644 --- a/components/underlay/package.json +++ b/components/underlay/package.json @@ -1,6 +1,6 @@ { "name": "@spectrum-css/underlay", - "version": "3.2.4", + "version": "3.2.5-next.1", "description": "The Spectrum CSS underlay component", "license": "Apache-2.0", "author": "Adobe", @@ -15,10 +15,10 @@ }, "main": "dist/index.css", "peerDependencies": { - "@spectrum-css/tokens": ">=13" + "@spectrum-css/tokens": "^14.0.0-next.3" }, "devDependencies": { - "@spectrum-css/commons": "^9.1.3" + "@spectrum-css/commons": "^9.1.4-next.0" }, "publishConfig": { "access": "public" diff --git a/components/well/package.json b/components/well/package.json index 93c010a293d..27a052cadfc 100644 --- a/components/well/package.json +++ b/components/well/package.json @@ -1,6 +1,6 @@ { "name": "@spectrum-css/well", - "version": "4.1.4", + "version": "4.1.5-next.1", "description": "The Spectrum CSS well component", "license": "Apache-2.0", "author": "Adobe", @@ -15,7 +15,7 @@ }, "main": "dist/index.css", "peerDependencies": { - "@spectrum-css/tokens": ">=13" + "@spectrum-css/tokens": "^14.0.0-next.3" }, "publishConfig": { "access": "public" diff --git a/tokens/CHANGELOG.md b/tokens/CHANGELOG.md index dcc9c6cf720..e705dbe0f0f 100644 --- a/tokens/CHANGELOG.md +++ b/tokens/CHANGELOG.md @@ -3,6 +3,25 @@ All notable changes to this project will be documented in this file. See [Conventional Commits](https://conventionalcommits.org) for commit guidelines. +<a name="14.0.0-next.0"></a> +#14.0.0-next.0 +🗓 +2024-02-06 • 📝 [Commits](https://github.com/adobe/spectrum-css/compare/@spectrum-css/tokens@13.1.0...@spectrum-css/tokens@14.0.0-next.0) + +### ✨ Features + +- **tokens:**use 13.0.0-beta.5([cd95fe1](https://github.com/adobe/spectrum-css/commit/cd95fe1))* + **tokens:**use 13.0.0-beta.8([1d9a801](https://github.com/adobe/spectrum-css/commit/1d9a801))* + **tokens:**use 13.0.0-beta.9([3c23f31](https://github.com/adobe/spectrum-css/commit/3c23f31)) + + \*feat(tokens)!: use 13.0.0-beta.13([1b959b3](https://github.com/adobe/spectrum-css/commit/1b959b3)) + + ### + 🛑 BREAKING CHANGES + + * + uses Spectrum 2 tokens + <a name="13.2.0"></a> #13.2.0 🗓 diff --git a/tokens/custom-spectrum/custom-vars.css b/tokens/custom-spectrum/custom-vars.css index 303178006b7..f135f3e4ff7 100644 --- a/tokens/custom-spectrum/custom-vars.css +++ b/tokens/custom-spectrum/custom-vars.css @@ -51,4 +51,7 @@ governing permissions and limitations under the License. /* 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(206, 247, 243); + + /* override for Spectrum Tokens value until a Style Dictionary transform gets written for our usage */ + --spectrum-corner-radius-1000: 9999px; } diff --git a/tokens/dist/css/dark-vars.css b/tokens/dist/css/dark-vars.css index 7683a1a3235..f7d2226784c 100644 --- a/tokens/dist/css/dark-vars.css +++ b/tokens/dist/css/dark-vars.css @@ -1,42 +1,36 @@ .spectrum--dark{ - --spectrum-overlay-opacity:0.5; + --spectrum-overlay-opacity:0.6; --spectrum-drop-shadow-color-rgb:0, 0, 0; - --spectrum-drop-shadow-color-opacity:0.5; + --spectrum-drop-shadow-color-opacity:0.8; --spectrum-drop-shadow-color:rgba(var(--spectrum-drop-shadow-color-rgb), var(--spectrum-drop-shadow-color-opacity)); - --spectrum-background-base-color:var(--spectrum-gray-50); - --spectrum-background-layer-1-color:var(--spectrum-gray-75); - --spectrum-background-layer-2-color:var(--spectrum-gray-100); - --spectrum-neutral-background-color-default:var(--spectrum-gray-400); - --spectrum-neutral-background-color-hover:var(--spectrum-gray-300); - --spectrum-neutral-background-color-down:var(--spectrum-gray-200); - --spectrum-neutral-background-color-key-focus:var(--spectrum-gray-300); - --spectrum-neutral-subdued-background-color-default:var(--spectrum-gray-400); - --spectrum-neutral-subdued-background-color-hover:var(--spectrum-gray-300); - --spectrum-neutral-subdued-background-color-down:var(--spectrum-gray-200); - --spectrum-neutral-subdued-background-color-key-focus:var(--spectrum-gray-300); - --spectrum-accent-background-color-default:var(--spectrum-accent-color-500); - --spectrum-accent-background-color-hover:var(--spectrum-accent-color-400); - --spectrum-accent-background-color-down:var(--spectrum-accent-color-300); - --spectrum-accent-background-color-key-focus:var(--spectrum-accent-color-400); - --spectrum-informative-background-color-default:var(--spectrum-informative-color-500); - --spectrum-informative-background-color-hover:var(--spectrum-informative-color-400); - --spectrum-informative-background-color-down:var(--spectrum-informative-color-300); - --spectrum-informative-background-color-key-focus:var(--spectrum-informative-color-400); - --spectrum-negative-background-color-default:var(--spectrum-negative-color-500); - --spectrum-negative-background-color-hover:var(--spectrum-negative-color-400); - --spectrum-negative-background-color-down:var(--spectrum-negative-color-300); - --spectrum-negative-background-color-key-focus:var(--spectrum-negative-color-400); - --spectrum-positive-background-color-default:var(--spectrum-positive-color-500); - --spectrum-positive-background-color-hover:var(--spectrum-positive-color-400); - --spectrum-positive-background-color-down:var(--spectrum-positive-color-300); - --spectrum-positive-background-color-key-focus:var(--spectrum-positive-color-400); - --spectrum-notice-background-color-default:var(--spectrum-notice-color-800); - --spectrum-gray-background-color-default:var(--spectrum-gray-700); + --spectrum-background-layer-2-color:var(--spectrum-gray-75); + --spectrum-neutral-subdued-background-color-default:var(--spectrum-gray-500); + --spectrum-neutral-subdued-background-color-hover:var(--spectrum-gray-400); + --spectrum-neutral-subdued-background-color-down:var(--spectrum-gray-400); + --spectrum-neutral-subdued-background-color-key-focus:var(--spectrum-gray-400); + --spectrum-accent-background-color-default:var(--spectrum-accent-color-700); + --spectrum-accent-background-color-hover:var(--spectrum-accent-color-600); + --spectrum-accent-background-color-down:var(--spectrum-accent-color-600); + --spectrum-accent-background-color-key-focus:var(--spectrum-accent-color-600); + --spectrum-informative-background-color-default:var(--spectrum-informative-color-700); + --spectrum-informative-background-color-hover:var(--spectrum-informative-color-600); + --spectrum-informative-background-color-down:var(--spectrum-informative-color-600); + --spectrum-informative-background-color-key-focus:var(--spectrum-informative-color-600); + --spectrum-negative-background-color-default:var(--spectrum-negative-color-700); + --spectrum-negative-background-color-hover:var(--spectrum-negative-color-600); + --spectrum-negative-background-color-down:var(--spectrum-negative-color-600); + --spectrum-negative-background-color-key-focus:var(--spectrum-negative-color-600); + --spectrum-positive-background-color-default:var(--spectrum-positive-color-700); + --spectrum-positive-background-color-hover:var(--spectrum-positive-color-600); + --spectrum-positive-background-color-down:var(--spectrum-positive-color-600); + --spectrum-positive-background-color-key-focus:var(--spectrum-positive-color-600); + --spectrum-notice-background-color-default:var(--spectrum-notice-color-900); + --spectrum-gray-background-color-default:var(--spectrum-gray-500); --spectrum-red-background-color-default:var(--spectrum-red-700); - --spectrum-orange-background-color-default:var(--spectrum-orange-800); - --spectrum-yellow-background-color-default:var(--spectrum-yellow-1000); - --spectrum-chartreuse-background-color-default:var(--spectrum-chartreuse-900); - --spectrum-celery-background-color-default:var(--spectrum-celery-800); + --spectrum-orange-background-color-default:var(--spectrum-orange-900); + --spectrum-yellow-background-color-default:var(--spectrum-yellow-1100); + --spectrum-chartreuse-background-color-default:var(--spectrum-chartreuse-1000); + --spectrum-celery-background-color-default:var(--spectrum-celery-900); --spectrum-green-background-color-default:var(--spectrum-green-700); --spectrum-seafoam-background-color-default:var(--spectrum-seafoam-700); --spectrum-cyan-background-color-default:var(--spectrum-cyan-700); @@ -65,393 +59,621 @@ --spectrum-purple-visual-color:var(--spectrum-purple-900); --spectrum-fuchsia-visual-color:var(--spectrum-fuchsia-900); --spectrum-magenta-visual-color:var(--spectrum-magenta-900); + --spectrum-background-elevated-color:var(--spectrum-gray-75); + --spectrum-background-pasteboard-color:var(--spectrum-gray-25); + --spectrum-brown-visual-color:var(--spectrum-brown-900); + --spectrum-cinnamon-visual-color:var(--spectrum-cinnamon-900); + --spectrum-pink-visual-color:var(--spectrum-pink-900); + --spectrum-silver-visual-color:var(--spectrum-silver-900); + --spectrum-turquoise-visual-color:var(--spectrum-turquoise-900); + --spectrum-brown-background-color-default:var(--spectrum-brown-700); + --spectrum-cinnamon-background-color-default:var(--spectrum-cinnamon-700); + --spectrum-pink-background-color-default:var(--spectrum-pink-700); + --spectrum-silver-background-color-default:var(--spectrum-silver-700); + --spectrum-turquoise-background-color-default:var(--spectrum-turquoise-700); --spectrum-opacity-checkerboard-square-dark:var(--spectrum-gray-800); - --spectrum-gray-50-rgb:29, 29, 29; + --spectrum-gray-25-rgb:17, 17, 17; + --spectrum-gray-25:rgba(var(--spectrum-gray-25-rgb)); + --spectrum-gray-50-rgb:27, 27, 27; --spectrum-gray-50:rgba(var(--spectrum-gray-50-rgb)); - --spectrum-gray-75-rgb:38, 38, 38; + --spectrum-gray-75-rgb:34, 34, 34; --spectrum-gray-75:rgba(var(--spectrum-gray-75-rgb)); - --spectrum-gray-100-rgb:50, 50, 50; + --spectrum-gray-100-rgb:44, 44, 44; --spectrum-gray-100:rgba(var(--spectrum-gray-100-rgb)); - --spectrum-gray-200-rgb:63, 63, 63; + --spectrum-gray-200-rgb:50, 50, 50; --spectrum-gray-200:rgba(var(--spectrum-gray-200-rgb)); - --spectrum-gray-300-rgb:84, 84, 84; + --spectrum-gray-300-rgb:57, 57, 57; --spectrum-gray-300:rgba(var(--spectrum-gray-300-rgb)); - --spectrum-gray-400-rgb:112, 112, 112; + --spectrum-gray-400-rgb:68, 68, 68; --spectrum-gray-400:rgba(var(--spectrum-gray-400-rgb)); - --spectrum-gray-500-rgb:144, 144, 144; + --spectrum-gray-500-rgb:109, 109, 109; --spectrum-gray-500:rgba(var(--spectrum-gray-500-rgb)); - --spectrum-gray-600-rgb:178, 178, 178; + --spectrum-gray-600-rgb:138, 138, 138; --spectrum-gray-600:rgba(var(--spectrum-gray-600-rgb)); - --spectrum-gray-700-rgb:209, 209, 209; + --spectrum-gray-700-rgb:175, 175, 175; --spectrum-gray-700:rgba(var(--spectrum-gray-700-rgb)); - --spectrum-gray-800-rgb:235, 235, 235; + --spectrum-gray-800-rgb:219, 219, 219; --spectrum-gray-800:rgba(var(--spectrum-gray-800-rgb)); - --spectrum-gray-900-rgb:255, 255, 255; + --spectrum-gray-900-rgb:242, 242, 242; --spectrum-gray-900:rgba(var(--spectrum-gray-900-rgb)); - --spectrum-blue-100-rgb:0, 56, 119; + --spectrum-gray-1000-rgb:255, 255, 255; + --spectrum-gray-1000:rgba(var(--spectrum-gray-1000-rgb)); + --spectrum-blue-100-rgb:14, 23, 63; --spectrum-blue-100:rgba(var(--spectrum-blue-100-rgb)); - --spectrum-blue-200-rgb:0, 65, 138; + --spectrum-blue-200-rgb:15, 28, 82; --spectrum-blue-200:rgba(var(--spectrum-blue-200-rgb)); - --spectrum-blue-300-rgb:0, 77, 163; + --spectrum-blue-300-rgb:12, 33, 117; --spectrum-blue-300:rgba(var(--spectrum-blue-300-rgb)); - --spectrum-blue-400-rgb:0, 89, 194; + --spectrum-blue-400-rgb:18, 45, 154; --spectrum-blue-400:rgba(var(--spectrum-blue-400-rgb)); - --spectrum-blue-500-rgb:3, 103, 224; + --spectrum-blue-500-rgb:26, 58, 195; --spectrum-blue-500:rgba(var(--spectrum-blue-500-rgb)); - --spectrum-blue-600-rgb:19, 121, 243; + --spectrum-blue-600-rgb:37, 73, 229; --spectrum-blue-600:rgba(var(--spectrum-blue-600-rgb)); - --spectrum-blue-700-rgb:52, 143, 244; + --spectrum-blue-700-rgb:52, 91, 248; --spectrum-blue-700:rgba(var(--spectrum-blue-700-rgb)); - --spectrum-blue-800-rgb:84, 163, 246; + --spectrum-blue-800-rgb:69, 110, 254; --spectrum-blue-800:rgba(var(--spectrum-blue-800-rgb)); - --spectrum-blue-900-rgb:114, 183, 249; + --spectrum-blue-900-rgb:86, 129, 255; --spectrum-blue-900:rgba(var(--spectrum-blue-900-rgb)); - --spectrum-blue-1000-rgb:143, 202, 252; + --spectrum-blue-1000-rgb:105, 149, 254; --spectrum-blue-1000:rgba(var(--spectrum-blue-1000-rgb)); - --spectrum-blue-1100-rgb:174, 219, 254; + --spectrum-blue-1100-rgb:124, 169, 252; --spectrum-blue-1100:rgba(var(--spectrum-blue-1100-rgb)); - --spectrum-blue-1200-rgb:204, 233, 255; + --spectrum-blue-1200-rgb:152, 192, 252; --spectrum-blue-1200:rgba(var(--spectrum-blue-1200-rgb)); - --spectrum-blue-1300-rgb:232, 246, 255; + --spectrum-blue-1300-rgb:181, 213, 253; --spectrum-blue-1300:rgba(var(--spectrum-blue-1300-rgb)); - --spectrum-blue-1400-rgb:255, 255, 255; + --spectrum-blue-1400-rgb:213, 231, 254; --spectrum-blue-1400:rgba(var(--spectrum-blue-1400-rgb)); - --spectrum-red-100-rgb:123, 0, 0; + --spectrum-blue-1500-rgb:238, 245, 255; + --spectrum-blue-1500:rgba(var(--spectrum-blue-1500-rgb)); + --spectrum-blue-1600-rgb:255, 255, 255; + --spectrum-blue-1600:rgba(var(--spectrum-blue-1600-rgb)); + --spectrum-red-100-rgb:54, 10, 3; --spectrum-red-100:rgba(var(--spectrum-red-100-rgb)); - --spectrum-red-200-rgb:141, 0, 0; + --spectrum-red-200-rgb:68, 13, 5; --spectrum-red-200:rgba(var(--spectrum-red-200-rgb)); - --spectrum-red-300-rgb:165, 0, 0; + --spectrum-red-300-rgb:87, 17, 7; --spectrum-red-300:rgba(var(--spectrum-red-300-rgb)); - --spectrum-red-400-rgb:190, 4, 3; + --spectrum-red-400-rgb:115, 24, 11; --spectrum-red-400:rgba(var(--spectrum-red-400-rgb)); - --spectrum-red-500-rgb:215, 25, 19; + --spectrum-red-500-rgb:147, 31, 17; --spectrum-red-500:rgba(var(--spectrum-red-500-rgb)); - --spectrum-red-600-rgb:234, 56, 41; + --spectrum-red-600-rgb:177, 38, 23; --spectrum-red-600:rgba(var(--spectrum-red-600-rgb)); - --spectrum-red-700-rgb:246, 88, 67; + --spectrum-red-700-rgb:205, 46, 29; --spectrum-red-700:rgba(var(--spectrum-red-700-rgb)); - --spectrum-red-800-rgb:255, 117, 94; + --spectrum-red-800-rgb:230, 54, 35; --spectrum-red-800:rgba(var(--spectrum-red-800-rgb)); - --spectrum-red-900-rgb:255, 149, 129; + --spectrum-red-900-rgb:252, 67, 46; --spectrum-red-900:rgba(var(--spectrum-red-900-rgb)); - --spectrum-red-1000-rgb:255, 176, 161; + --spectrum-red-1000-rgb:255, 103, 86; --spectrum-red-1000:rgba(var(--spectrum-red-1000-rgb)); - --spectrum-red-1100-rgb:255, 201, 189; + --spectrum-red-1100-rgb:255, 134, 120; --spectrum-red-1100:rgba(var(--spectrum-red-1100-rgb)); - --spectrum-red-1200-rgb:255, 222, 216; + --spectrum-red-1200-rgb:255, 167, 157; --spectrum-red-1200:rgba(var(--spectrum-red-1200-rgb)); - --spectrum-red-1300-rgb:255, 241, 238; + --spectrum-red-1300-rgb:255, 196, 189; --spectrum-red-1300:rgba(var(--spectrum-red-1300-rgb)); - --spectrum-red-1400-rgb:255, 255, 255; + --spectrum-red-1400-rgb:255, 222, 219; --spectrum-red-1400:rgba(var(--spectrum-red-1400-rgb)); - --spectrum-orange-100-rgb:102, 37, 0; + --spectrum-red-1500-rgb:255, 242, 240; + --spectrum-red-1500:rgba(var(--spectrum-red-1500-rgb)); + --spectrum-red-1600-rgb:255, 255, 255; + --spectrum-red-1600:rgba(var(--spectrum-red-1600-rgb)); + --spectrum-orange-100-rgb:49, 16, 0; --spectrum-orange-100:rgba(var(--spectrum-orange-100-rgb)); - --spectrum-orange-200-rgb:117, 45, 0; + --spectrum-orange-200-rgb:61, 21, 0; --spectrum-orange-200:rgba(var(--spectrum-orange-200-rgb)); - --spectrum-orange-300-rgb:137, 55, 0; + --spectrum-orange-300-rgb:80, 27, 0; --spectrum-orange-300:rgba(var(--spectrum-orange-300-rgb)); - --spectrum-orange-400-rgb:158, 66, 0; + --spectrum-orange-400-rgb:106, 36, 0; --spectrum-orange-400:rgba(var(--spectrum-orange-400-rgb)); - --spectrum-orange-500-rgb:180, 78, 0; + --spectrum-orange-500-rgb:135, 47, 0; --spectrum-orange-500:rgba(var(--spectrum-orange-500-rgb)); - --spectrum-orange-600-rgb:202, 93, 0; + --spectrum-orange-600-rgb:162, 59, 0; --spectrum-orange-600:rgba(var(--spectrum-orange-600-rgb)); - --spectrum-orange-700-rgb:225, 109, 0; + --spectrum-orange-700-rgb:185, 73, 0; --spectrum-orange-700:rgba(var(--spectrum-orange-700-rgb)); - --spectrum-orange-800-rgb:244, 129, 12; + --spectrum-orange-800-rgb:205, 86, 0; --spectrum-orange-800:rgba(var(--spectrum-orange-800-rgb)); - --spectrum-orange-900-rgb:254, 154, 46; + --spectrum-orange-900-rgb:224, 100, 0; --spectrum-orange-900:rgba(var(--spectrum-orange-900-rgb)); - --spectrum-orange-1000-rgb:255, 181, 88; + --spectrum-orange-1000-rgb:243, 117, 0; --spectrum-orange-1000:rgba(var(--spectrum-orange-1000-rgb)); - --spectrum-orange-1100-rgb:253, 206, 136; + --spectrum-orange-1100-rgb:255, 137, 0; --spectrum-orange-1100:rgba(var(--spectrum-orange-1100-rgb)); - --spectrum-orange-1200-rgb:255, 225, 179; + --spectrum-orange-1200-rgb:255, 173, 45; --spectrum-orange-1200:rgba(var(--spectrum-orange-1200-rgb)); - --spectrum-orange-1300-rgb:255, 242, 221; + --spectrum-orange-1300-rgb:255, 201, 116; --spectrum-orange-1300:rgba(var(--spectrum-orange-1300-rgb)); - --spectrum-orange-1400-rgb:255, 253, 249; + --spectrum-orange-1400-rgb:255, 225, 178; --spectrum-orange-1400:rgba(var(--spectrum-orange-1400-rgb)); - --spectrum-yellow-100-rgb:76, 54, 0; + --spectrum-orange-1500-rgb:255, 243, 225; + --spectrum-orange-1500:rgba(var(--spectrum-orange-1500-rgb)); + --spectrum-orange-1600-rgb:255, 255, 255; + --spectrum-orange-1600:rgba(var(--spectrum-orange-1600-rgb)); + --spectrum-yellow-100-rgb:37, 23, 0; --spectrum-yellow-100:rgba(var(--spectrum-yellow-100-rgb)); - --spectrum-yellow-200-rgb:88, 64, 0; + --spectrum-yellow-200-rgb:47, 29, 0; --spectrum-yellow-200:rgba(var(--spectrum-yellow-200-rgb)); - --spectrum-yellow-300-rgb:103, 76, 0; + --spectrum-yellow-300-rgb:61, 39, 0; --spectrum-yellow-300:rgba(var(--spectrum-yellow-300-rgb)); - --spectrum-yellow-400-rgb:119, 89, 0; + --spectrum-yellow-400-rgb:83, 52, 0; --spectrum-yellow-400:rgba(var(--spectrum-yellow-400-rgb)); - --spectrum-yellow-500-rgb:136, 104, 0; + --spectrum-yellow-500-rgb:107, 67, 0; --spectrum-yellow-500:rgba(var(--spectrum-yellow-500-rgb)); - --spectrum-yellow-600-rgb:155, 120, 0; + --spectrum-yellow-600-rgb:130, 82, 0; --spectrum-yellow-600:rgba(var(--spectrum-yellow-600-rgb)); - --spectrum-yellow-700-rgb:174, 137, 0; + --spectrum-yellow-700-rgb:151, 97, 0; --spectrum-yellow-700:rgba(var(--spectrum-yellow-700-rgb)); - --spectrum-yellow-800-rgb:192, 156, 0; + --spectrum-yellow-800-rgb:169, 110, 0; --spectrum-yellow-800:rgba(var(--spectrum-yellow-800-rgb)); - --spectrum-yellow-900-rgb:211, 174, 0; + --spectrum-yellow-900-rgb:186, 124, 0; --spectrum-yellow-900:rgba(var(--spectrum-yellow-900-rgb)); - --spectrum-yellow-1000-rgb:228, 194, 0; + --spectrum-yellow-1000-rgb:203, 141, 0; --spectrum-yellow-1000:rgba(var(--spectrum-yellow-1000-rgb)); - --spectrum-yellow-1100-rgb:244, 213, 0; + --spectrum-yellow-1100-rgb:218, 159, 0; --spectrum-yellow-1100:rgba(var(--spectrum-yellow-1100-rgb)); - --spectrum-yellow-1200-rgb:249, 232, 92; + --spectrum-yellow-1200-rgb:235, 183, 0; --spectrum-yellow-1200:rgba(var(--spectrum-yellow-1200-rgb)); - --spectrum-yellow-1300-rgb:252, 246, 187; + --spectrum-yellow-1300-rgb:249, 206, 0; --spectrum-yellow-1300:rgba(var(--spectrum-yellow-1300-rgb)); - --spectrum-yellow-1400-rgb:255, 255, 255; + --spectrum-yellow-1400-rgb:255, 230, 86; --spectrum-yellow-1400:rgba(var(--spectrum-yellow-1400-rgb)); - --spectrum-chartreuse-100-rgb:48, 64, 0; + --spectrum-yellow-1500-rgb:255, 246, 195; + --spectrum-yellow-1500:rgba(var(--spectrum-yellow-1500-rgb)); + --spectrum-yellow-1600-rgb:255, 255, 255; + --spectrum-yellow-1600:rgba(var(--spectrum-yellow-1600-rgb)); + --spectrum-chartreuse-100-rgb:23, 28, 0; --spectrum-chartreuse-100:rgba(var(--spectrum-chartreuse-100-rgb)); - --spectrum-chartreuse-200-rgb:55, 74, 0; + --spectrum-chartreuse-200-rgb:30, 36, 0; --spectrum-chartreuse-200:rgba(var(--spectrum-chartreuse-200-rgb)); - --spectrum-chartreuse-300-rgb:65, 87, 0; + --spectrum-chartreuse-300-rgb:39, 47, 0; --spectrum-chartreuse-300:rgba(var(--spectrum-chartreuse-300-rgb)); - --spectrum-chartreuse-400-rgb:76, 102, 0; + --spectrum-chartreuse-400-rgb:53, 63, 0; --spectrum-chartreuse-400:rgba(var(--spectrum-chartreuse-400-rgb)); - --spectrum-chartreuse-500-rgb:89, 118, 0; + --spectrum-chartreuse-500-rgb:68, 82, 0; --spectrum-chartreuse-500:rgba(var(--spectrum-chartreuse-500-rgb)); - --spectrum-chartreuse-600-rgb:102, 136, 0; + --spectrum-chartreuse-600-rgb:83, 100, 0; --spectrum-chartreuse-600:rgba(var(--spectrum-chartreuse-600-rgb)); - --spectrum-chartreuse-700-rgb:117, 154, 0; + --spectrum-chartreuse-700-rgb:97, 116, 0; --spectrum-chartreuse-700:rgba(var(--spectrum-chartreuse-700-rgb)); - --spectrum-chartreuse-800-rgb:132, 173, 1; + --spectrum-chartreuse-800-rgb:109, 131, 0; --spectrum-chartreuse-800:rgba(var(--spectrum-chartreuse-800-rgb)); - --spectrum-chartreuse-900-rgb:148, 192, 8; + --spectrum-chartreuse-900-rgb:122, 147, 0; --spectrum-chartreuse-900:rgba(var(--spectrum-chartreuse-900-rgb)); - --spectrum-chartreuse-1000-rgb:166, 211, 18; + --spectrum-chartreuse-1000-rgb:136, 164, 0; --spectrum-chartreuse-1000:rgba(var(--spectrum-chartreuse-1000-rgb)); - --spectrum-chartreuse-1100-rgb:184, 229, 37; + --spectrum-chartreuse-1100-rgb:151, 181, 0; --spectrum-chartreuse-1100:rgba(var(--spectrum-chartreuse-1100-rgb)); - --spectrum-chartreuse-1200-rgb:205, 245, 71; + --spectrum-chartreuse-1200-rgb:169, 203, 0; --spectrum-chartreuse-1200:rgba(var(--spectrum-chartreuse-1200-rgb)); - --spectrum-chartreuse-1300-rgb:231, 254, 154; + --spectrum-chartreuse-1300-rgb:187, 225, 0; --spectrum-chartreuse-1300:rgba(var(--spectrum-chartreuse-1300-rgb)); - --spectrum-chartreuse-1400-rgb:255, 255, 255; + --spectrum-chartreuse-1400-rgb:219, 240, 117; --spectrum-chartreuse-1400:rgba(var(--spectrum-chartreuse-1400-rgb)); - --spectrum-celery-100-rgb:0, 69, 10; + --spectrum-chartreuse-1500-rgb:242, 249, 206; + --spectrum-chartreuse-1500:rgba(var(--spectrum-chartreuse-1500-rgb)); + --spectrum-chartreuse-1600-rgb:255, 255, 255; + --spectrum-chartreuse-1600:rgba(var(--spectrum-chartreuse-1600-rgb)); + --spectrum-celery-100-rgb:11, 31, 0; --spectrum-celery-100:rgba(var(--spectrum-celery-100-rgb)); - --spectrum-celery-200-rgb:0, 80, 12; + --spectrum-celery-200-rgb:15, 38, 0; --spectrum-celery-200:rgba(var(--spectrum-celery-200-rgb)); - --spectrum-celery-300-rgb:0, 94, 14; + --spectrum-celery-300-rgb:21, 51, 1; --spectrum-celery-300:rgba(var(--spectrum-celery-300-rgb)); - --spectrum-celery-400-rgb:0, 109, 15; + --spectrum-celery-400-rgb:31, 67, 4; --spectrum-celery-400:rgba(var(--spectrum-celery-400-rgb)); - --spectrum-celery-500-rgb:0, 127, 15; + --spectrum-celery-500-rgb:41, 86, 8; --spectrum-celery-500:rgba(var(--spectrum-celery-500-rgb)); - --spectrum-celery-600-rgb:0, 145, 18; + --spectrum-celery-600-rgb:50, 105, 11; --spectrum-celery-600:rgba(var(--spectrum-celery-600-rgb)); - --spectrum-celery-700-rgb:4, 165, 30; + --spectrum-celery-700-rgb:60, 122, 15; --spectrum-celery-700:rgba(var(--spectrum-celery-700-rgb)); - --spectrum-celery-800-rgb:34, 184, 51; + --spectrum-celery-800-rgb:69, 138, 19; --spectrum-celery-800:rgba(var(--spectrum-celery-800-rgb)); - --spectrum-celery-900-rgb:68, 202, 73; + --spectrum-celery-900-rgb:78, 154, 23; --spectrum-celery-900:rgba(var(--spectrum-celery-900-rgb)); - --spectrum-celery-1000-rgb:105, 220, 99; + --spectrum-celery-1000-rgb:88, 172, 28; --spectrum-celery-1000:rgba(var(--spectrum-celery-1000-rgb)); - --spectrum-celery-1100-rgb:142, 235, 127; + --spectrum-celery-1100-rgb:100, 190, 35; --spectrum-celery-1100:rgba(var(--spectrum-celery-1100-rgb)); - --spectrum-celery-1200-rgb:180, 247, 162; + --spectrum-celery-1200-rgb:116, 213, 46; --spectrum-celery-1200:rgba(var(--spectrum-celery-1200-rgb)); - --spectrum-celery-1300-rgb:221, 253, 211; + --spectrum-celery-1300-rgb:136, 234, 65; --spectrum-celery-1300:rgba(var(--spectrum-celery-1300-rgb)); - --spectrum-celery-1400-rgb:255, 255, 255; + --spectrum-celery-1400-rgb:170, 251, 112; --spectrum-celery-1400:rgba(var(--spectrum-celery-1400-rgb)); - --spectrum-green-100-rgb:4, 67, 41; + --spectrum-celery-1500-rgb:222, 255, 198; + --spectrum-celery-1500:rgba(var(--spectrum-celery-1500-rgb)); + --spectrum-celery-1600-rgb:255, 255, 255; + --spectrum-celery-1600:rgba(var(--spectrum-celery-1600-rgb)); + --spectrum-green-100-rgb:0, 30, 23; --spectrum-green-100:rgba(var(--spectrum-green-100-rgb)); - --spectrum-green-200-rgb:0, 78, 47; + --spectrum-green-200-rgb:0, 38, 29; --spectrum-green-200:rgba(var(--spectrum-green-200-rgb)); - --spectrum-green-300-rgb:0, 92, 56; + --spectrum-green-300-rgb:0, 51, 38; --spectrum-green-300:rgba(var(--spectrum-green-300-rgb)); - --spectrum-green-400-rgb:0, 108, 67; + --spectrum-green-400-rgb:0, 68, 48; --spectrum-green-400:rgba(var(--spectrum-green-400-rgb)); - --spectrum-green-500-rgb:0, 125, 78; + --spectrum-green-500-rgb:2, 87, 58; --spectrum-green-500:rgba(var(--spectrum-green-500-rgb)); - --spectrum-green-600-rgb:0, 143, 93; + --spectrum-green-600-rgb:3, 106, 67; --spectrum-green-600:rgba(var(--spectrum-green-600-rgb)); - --spectrum-green-700-rgb:18, 162, 108; + --spectrum-green-700-rgb:4, 124, 75; --spectrum-green-700:rgba(var(--spectrum-green-700-rgb)); - --spectrum-green-800-rgb:43, 180, 125; + --spectrum-green-800-rgb:6, 140, 82; --spectrum-green-800:rgba(var(--spectrum-green-800-rgb)); - --spectrum-green-900-rgb:67, 199, 143; + --spectrum-green-900-rgb:9, 157, 89; --spectrum-green-900:rgba(var(--spectrum-green-900-rgb)); - --spectrum-green-1000-rgb:94, 217, 162; + --spectrum-green-1000-rgb:14, 175, 98; --spectrum-green-1000:rgba(var(--spectrum-green-1000-rgb)); - --spectrum-green-1100-rgb:129, 233, 184; + --spectrum-green-1100-rgb:24, 193, 110; --spectrum-green-1100:rgba(var(--spectrum-green-1100-rgb)); - --spectrum-green-1200-rgb:177, 244, 209; + --spectrum-green-1200-rgb:57, 215, 134; --spectrum-green-1200:rgba(var(--spectrum-green-1200-rgb)); - --spectrum-green-1300-rgb:223, 250, 234; + --spectrum-green-1300-rgb:126, 231, 172; --spectrum-green-1300:rgba(var(--spectrum-green-1300-rgb)); - --spectrum-green-1400-rgb:254, 255, 252; + --spectrum-green-1400-rgb:189, 241, 208; --spectrum-green-1400:rgba(var(--spectrum-green-1400-rgb)); - --spectrum-seafoam-100-rgb:18, 65, 63; + --spectrum-green-1500-rgb:229, 250, 236; + --spectrum-green-1500:rgba(var(--spectrum-green-1500-rgb)); + --spectrum-green-1600-rgb:255, 255, 255; + --spectrum-green-1600:rgba(var(--spectrum-green-1600-rgb)); + --spectrum-seafoam-100-rgb:0, 30, 27; --spectrum-seafoam-100:rgba(var(--spectrum-seafoam-100-rgb)); - --spectrum-seafoam-200-rgb:14, 76, 73; + --spectrum-seafoam-200-rgb:0, 39, 35; --spectrum-seafoam-200:rgba(var(--spectrum-seafoam-200-rgb)); - --spectrum-seafoam-300-rgb:4, 90, 87; + --spectrum-seafoam-300-rgb:0, 50, 44; --spectrum-seafoam-300:rgba(var(--spectrum-seafoam-300-rgb)); - --spectrum-seafoam-400-rgb:0, 105, 101; + --spectrum-seafoam-400-rgb:0, 67, 59; --spectrum-seafoam-400:rgba(var(--spectrum-seafoam-400-rgb)); - --spectrum-seafoam-500-rgb:0, 122, 117; + --spectrum-seafoam-500-rgb:2, 86, 75; --spectrum-seafoam-500:rgba(var(--spectrum-seafoam-500-rgb)); - --spectrum-seafoam-600-rgb:0, 140, 135; + --spectrum-seafoam-600-rgb:4, 105, 89; --spectrum-seafoam-600:rgba(var(--spectrum-seafoam-600-rgb)); - --spectrum-seafoam-700-rgb:0, 158, 152; + --spectrum-seafoam-700-rgb:6, 122, 103; --spectrum-seafoam-700:rgba(var(--spectrum-seafoam-700-rgb)); - --spectrum-seafoam-800-rgb:3, 178, 171; + --spectrum-seafoam-800-rgb:8, 138, 116; --spectrum-seafoam-800:rgba(var(--spectrum-seafoam-800-rgb)); - --spectrum-seafoam-900-rgb:54, 197, 189; + --spectrum-seafoam-900-rgb:10, 154, 128; --spectrum-seafoam-900:rgba(var(--spectrum-seafoam-900-rgb)); - --spectrum-seafoam-1000-rgb:93, 214, 207; + --spectrum-seafoam-1000-rgb:12, 173, 142; --spectrum-seafoam-1000:rgba(var(--spectrum-seafoam-1000-rgb)); - --spectrum-seafoam-1100-rgb:132, 230, 223; + --spectrum-seafoam-1100-rgb:14, 190, 156; --spectrum-seafoam-1100:rgba(var(--spectrum-seafoam-1100-rgb)); - --spectrum-seafoam-1200-rgb:176, 242, 236; + --spectrum-seafoam-1200-rgb:29, 214, 176; --spectrum-seafoam-1200:rgba(var(--spectrum-seafoam-1200-rgb)); - --spectrum-seafoam-1300-rgb:223, 249, 246; + --spectrum-seafoam-1300-rgb:122, 229, 203; --spectrum-seafoam-1300:rgba(var(--spectrum-seafoam-1300-rgb)); - --spectrum-seafoam-1400-rgb:254, 255, 254; + --spectrum-seafoam-1400-rgb:186, 241, 222; --spectrum-seafoam-1400:rgba(var(--spectrum-seafoam-1400-rgb)); - --spectrum-cyan-100-rgb:0, 61, 98; + --spectrum-seafoam-1500-rgb:229, 249, 243; + --spectrum-seafoam-1500:rgba(var(--spectrum-seafoam-1500-rgb)); + --spectrum-seafoam-1600-rgb:255, 255, 255; + --spectrum-seafoam-1600:rgba(var(--spectrum-seafoam-1600-rgb)); + --spectrum-cyan-100-rgb:0, 29, 39; --spectrum-cyan-100:rgba(var(--spectrum-cyan-100-rgb)); - --spectrum-cyan-200-rgb:0, 71, 111; + --spectrum-cyan-200-rgb:0, 36, 49; --spectrum-cyan-200:rgba(var(--spectrum-cyan-200-rgb)); - --spectrum-cyan-300-rgb:0, 85, 127; + --spectrum-cyan-300-rgb:0, 48, 65; --spectrum-cyan-300:rgba(var(--spectrum-cyan-300-rgb)); - --spectrum-cyan-400-rgb:0, 100, 145; + --spectrum-cyan-400-rgb:0, 64, 88; --spectrum-cyan-400:rgba(var(--spectrum-cyan-400-rgb)); - --spectrum-cyan-500-rgb:0, 116, 162; + --spectrum-cyan-500-rgb:0, 82, 113; --spectrum-cyan-500:rgba(var(--spectrum-cyan-500-rgb)); - --spectrum-cyan-600-rgb:0, 134, 180; + --spectrum-cyan-600-rgb:3, 99, 140; --spectrum-cyan-600:rgba(var(--spectrum-cyan-600-rgb)); - --spectrum-cyan-700-rgb:0, 153, 198; + --spectrum-cyan-700-rgb:8, 115, 168; --spectrum-cyan-700:rgba(var(--spectrum-cyan-700-rgb)); - --spectrum-cyan-800-rgb:14, 173, 215; + --spectrum-cyan-800-rgb:15, 128, 194; --spectrum-cyan-800:rgba(var(--spectrum-cyan-800-rgb)); - --spectrum-cyan-900-rgb:44, 193, 230; + --spectrum-cyan-900-rgb:24, 142, 220; --spectrum-cyan-900:rgba(var(--spectrum-cyan-900-rgb)); - --spectrum-cyan-1000-rgb:84, 211, 241; + --spectrum-cyan-1000-rgb:38, 159, 244; --spectrum-cyan-1000:rgba(var(--spectrum-cyan-1000-rgb)); - --spectrum-cyan-1100-rgb:127, 228, 249; + --spectrum-cyan-1100-rgb:63, 177, 255; --spectrum-cyan-1100:rgba(var(--spectrum-cyan-1100-rgb)); - --spectrum-cyan-1200-rgb:167, 241, 255; + --spectrum-cyan-1200-rgb:107, 199, 255; --spectrum-cyan-1200:rgba(var(--spectrum-cyan-1200-rgb)); - --spectrum-cyan-1300-rgb:215, 250, 255; + --spectrum-cyan-1300-rgb:152, 219, 255; --spectrum-cyan-1300:rgba(var(--spectrum-cyan-1300-rgb)); - --spectrum-cyan-1400-rgb:255, 255, 255; + --spectrum-cyan-1400-rgb:195, 236, 252; --spectrum-cyan-1400:rgba(var(--spectrum-cyan-1400-rgb)); - --spectrum-indigo-100-rgb:40, 44, 140; + --spectrum-cyan-1500-rgb:230, 248, 253; + --spectrum-cyan-1500:rgba(var(--spectrum-cyan-1500-rgb)); + --spectrum-cyan-1600-rgb:255, 255, 255; + --spectrum-cyan-1600:rgba(var(--spectrum-cyan-1600-rgb)); + --spectrum-indigo-100-rgb:30, 0, 93; --spectrum-indigo-100:rgba(var(--spectrum-indigo-100-rgb)); - --spectrum-indigo-200-rgb:47, 52, 163; + --spectrum-indigo-200-rgb:35, 0, 110; --spectrum-indigo-200:rgba(var(--spectrum-indigo-200-rgb)); - --spectrum-indigo-300-rgb:57, 63, 187; + --spectrum-indigo-300-rgb:47, 0, 140; --spectrum-indigo-300:rgba(var(--spectrum-indigo-300-rgb)); - --spectrum-indigo-400-rgb:70, 75, 211; + --spectrum-indigo-400-rgb:62, 12, 174; --spectrum-indigo-400:rgba(var(--spectrum-indigo-400-rgb)); - --spectrum-indigo-500-rgb:85, 91, 231; + --spectrum-indigo-500-rgb:79, 30, 209; --spectrum-indigo-500:rgba(var(--spectrum-indigo-500-rgb)); - --spectrum-indigo-600-rgb:104, 109, 244; + --spectrum-indigo-600-rgb:95, 52, 235; --spectrum-indigo-600:rgba(var(--spectrum-indigo-600-rgb)); - --spectrum-indigo-700-rgb:124, 129, 251; + --spectrum-indigo-700-rgb:109, 75, 248; --spectrum-indigo-700:rgba(var(--spectrum-indigo-700-rgb)); - --spectrum-indigo-800-rgb:145, 149, 255; + --spectrum-indigo-800-rgb:119, 97, 252; --spectrum-indigo-800:rgba(var(--spectrum-indigo-800-rgb)); - --spectrum-indigo-900-rgb:167, 170, 255; + --spectrum-indigo-900-rgb:128, 119, 254; --spectrum-indigo-900:rgba(var(--spectrum-indigo-900-rgb)); - --spectrum-indigo-1000-rgb:188, 190, 255; + --spectrum-indigo-1000-rgb:139, 141, 254; --spectrum-indigo-1000:rgba(var(--spectrum-indigo-1000-rgb)); - --spectrum-indigo-1100-rgb:208, 210, 255; + --spectrum-indigo-1100-rgb:153, 161, 255; --spectrum-indigo-1100:rgba(var(--spectrum-indigo-1100-rgb)); - --spectrum-indigo-1200-rgb:226, 228, 255; + --spectrum-indigo-1200-rgb:176, 186, 255; --spectrum-indigo-1200:rgba(var(--spectrum-indigo-1200-rgb)); - --spectrum-indigo-1300-rgb:243, 243, 254; + --spectrum-indigo-1300-rgb:199, 208, 255; --spectrum-indigo-1300:rgba(var(--spectrum-indigo-1300-rgb)); - --spectrum-indigo-1400-rgb:255, 255, 255; + --spectrum-indigo-1400-rgb:223, 228, 255; --spectrum-indigo-1400:rgba(var(--spectrum-indigo-1400-rgb)); - --spectrum-purple-100-rgb:76, 13, 157; + --spectrum-indigo-1500-rgb:243, 244, 255; + --spectrum-indigo-1500:rgba(var(--spectrum-indigo-1500-rgb)); + --spectrum-indigo-1600-rgb:255, 255, 255; + --spectrum-indigo-1600:rgba(var(--spectrum-indigo-1600-rgb)); + --spectrum-purple-100-rgb:41, 0, 79; --spectrum-purple-100:rgba(var(--spectrum-purple-100-rgb)); - --spectrum-purple-200-rgb:89, 17, 177; + --spectrum-purple-200-rgb:50, 0, 96; --spectrum-purple-200:rgba(var(--spectrum-purple-200-rgb)); - --spectrum-purple-300-rgb:105, 28, 200; + --spectrum-purple-300-rgb:64, 0, 122; --spectrum-purple-300:rgba(var(--spectrum-purple-300-rgb)); - --spectrum-purple-400-rgb:122, 45, 218; + --spectrum-purple-400-rgb:83, 0, 159; --spectrum-purple-400:rgba(var(--spectrum-purple-400-rgb)); - --spectrum-purple-500-rgb:140, 65, 233; + --spectrum-purple-500-rgb:107, 6, 195; --spectrum-purple-500:rgba(var(--spectrum-purple-500-rgb)); - --spectrum-purple-600-rgb:157, 87, 243; + --spectrum-purple-600-rgb:130, 34, 215; --spectrum-purple-600:rgba(var(--spectrum-purple-600-rgb)); - --spectrum-purple-700-rgb:172, 111, 249; + --spectrum-purple-700-rgb:148, 62, 224; --spectrum-purple-700:rgba(var(--spectrum-purple-700-rgb)); - --spectrum-purple-800-rgb:187, 135, 251; + --spectrum-purple-800-rgb:161, 84, 229; --spectrum-purple-800:rgba(var(--spectrum-purple-800-rgb)); - --spectrum-purple-900-rgb:202, 159, 252; + --spectrum-purple-900-rgb:173, 105, 233; --spectrum-purple-900:rgba(var(--spectrum-purple-900-rgb)); - --spectrum-purple-1000-rgb:215, 182, 254; + --spectrum-purple-1000-rgb:186, 127, 237; --spectrum-purple-1000:rgba(var(--spectrum-purple-1000-rgb)); - --spectrum-purple-1100-rgb:228, 204, 254; + --spectrum-purple-1100-rgb:197, 149, 240; --spectrum-purple-1100:rgba(var(--spectrum-purple-1100-rgb)); - --spectrum-purple-1200-rgb:239, 223, 255; + --spectrum-purple-1200-rgb:212, 176, 244; --spectrum-purple-1200:rgba(var(--spectrum-purple-1200-rgb)); - --spectrum-purple-1300-rgb:249, 240, 255; + --spectrum-purple-1300-rgb:225, 201, 247; --spectrum-purple-1300:rgba(var(--spectrum-purple-1300-rgb)); - --spectrum-purple-1400-rgb:255, 253, 255; + --spectrum-purple-1400-rgb:238, 224, 250; --spectrum-purple-1400:rgba(var(--spectrum-purple-1400-rgb)); - --spectrum-fuchsia-100-rgb:107, 3, 106; + --spectrum-purple-1500-rgb:248, 243, 253; + --spectrum-purple-1500:rgba(var(--spectrum-purple-1500-rgb)); + --spectrum-purple-1600-rgb:255, 255, 255; + --spectrum-purple-1600:rgba(var(--spectrum-purple-1600-rgb)); + --spectrum-fuchsia-100-rgb:50, 0, 61; --spectrum-fuchsia-100:rgba(var(--spectrum-fuchsia-100-rgb)); - --spectrum-fuchsia-200-rgb:123, 0, 123; + --spectrum-fuchsia-200-rgb:61, 0, 74; --spectrum-fuchsia-200:rgba(var(--spectrum-fuchsia-200-rgb)); - --spectrum-fuchsia-300-rgb:144, 0, 145; + --spectrum-fuchsia-300-rgb:79, 0, 95; --spectrum-fuchsia-300:rgba(var(--spectrum-fuchsia-300-rgb)); - --spectrum-fuchsia-400-rgb:165, 13, 166; + --spectrum-fuchsia-400-rgb:102, 9, 120; --spectrum-fuchsia-400:rgba(var(--spectrum-fuchsia-400-rgb)); - --spectrum-fuchsia-500-rgb:185, 37, 185; + --spectrum-fuchsia-500-rgb:127, 23, 146; --spectrum-fuchsia-500:rgba(var(--spectrum-fuchsia-500-rgb)); - --spectrum-fuchsia-600-rgb:205, 57, 206; + --spectrum-fuchsia-600-rgb:151, 38, 170; --spectrum-fuchsia-600:rgba(var(--spectrum-fuchsia-600-rgb)); - --spectrum-fuchsia-700-rgb:223, 81, 224; + --spectrum-fuchsia-700-rgb:173, 51, 192; --spectrum-fuchsia-700:rgba(var(--spectrum-fuchsia-700-rgb)); - --spectrum-fuchsia-800-rgb:235, 110, 236; + --spectrum-fuchsia-800-rgb:192, 64, 212; --spectrum-fuchsia-800:rgba(var(--spectrum-fuchsia-800-rgb)); - --spectrum-fuchsia-900-rgb:244, 140, 242; + --spectrum-fuchsia-900-rgb:213, 73, 235; --spectrum-fuchsia-900:rgba(var(--spectrum-fuchsia-900-rgb)); - --spectrum-fuchsia-1000-rgb:250, 168, 245; + --spectrum-fuchsia-1000-rgb:232, 91, 253; --spectrum-fuchsia-1000:rgba(var(--spectrum-fuchsia-1000-rgb)); - --spectrum-fuchsia-1100-rgb:254, 194, 248; + --spectrum-fuchsia-1100-rgb:240, 122, 255; --spectrum-fuchsia-1100:rgba(var(--spectrum-fuchsia-1100-rgb)); - --spectrum-fuchsia-1200-rgb:255, 219, 250; + --spectrum-fuchsia-1200-rgb:245, 159, 255; --spectrum-fuchsia-1200:rgba(var(--spectrum-fuchsia-1200-rgb)); - --spectrum-fuchsia-1300-rgb:255, 239, 252; + --spectrum-fuchsia-1300-rgb:248, 191, 255; --spectrum-fuchsia-1300:rgba(var(--spectrum-fuchsia-1300-rgb)); - --spectrum-fuchsia-1400-rgb:255, 253, 255; + --spectrum-fuchsia-1400-rgb:251, 219, 255; --spectrum-fuchsia-1400:rgba(var(--spectrum-fuchsia-1400-rgb)); - --spectrum-magenta-100-rgb:118, 0, 58; + --spectrum-fuchsia-1500-rgb:253, 241, 255; + --spectrum-fuchsia-1500:rgba(var(--spectrum-fuchsia-1500-rgb)); + --spectrum-fuchsia-1600-rgb:255, 255, 255; + --spectrum-fuchsia-1600:rgba(var(--spectrum-fuchsia-1600-rgb)); + --spectrum-magenta-100-rgb:59, 0, 22; --spectrum-magenta-100:rgba(var(--spectrum-magenta-100-rgb)); - --spectrum-magenta-200-rgb:137, 0, 66; + --spectrum-magenta-200-rgb:74, 0, 27; --spectrum-magenta-200:rgba(var(--spectrum-magenta-200-rgb)); - --spectrum-magenta-300-rgb:160, 0, 77; + --spectrum-magenta-300-rgb:93, 0, 34; --spectrum-magenta-300:rgba(var(--spectrum-magenta-300-rgb)); - --spectrum-magenta-400-rgb:182, 18, 90; + --spectrum-magenta-400-rgb:123, 0, 45; --spectrum-magenta-400:rgba(var(--spectrum-magenta-400-rgb)); - --spectrum-magenta-500-rgb:203, 38, 109; + --spectrum-magenta-500-rgb:152, 7, 60; --spectrum-magenta-500:rgba(var(--spectrum-magenta-500-rgb)); - --spectrum-magenta-600-rgb:222, 61, 130; + --spectrum-magenta-600-rgb:181, 19, 76; --spectrum-magenta-600:rgba(var(--spectrum-magenta-600-rgb)); - --spectrum-magenta-700-rgb:237, 87, 149; + --spectrum-magenta-700-rgb:207, 31, 92; --spectrum-magenta-700:rgba(var(--spectrum-magenta-700-rgb)); - --spectrum-magenta-800-rgb:249, 114, 167; + --spectrum-magenta-800-rgb:231, 41, 105; --spectrum-magenta-800:rgba(var(--spectrum-magenta-800-rgb)); - --spectrum-magenta-900-rgb:255, 143, 185; + --spectrum-magenta-900-rgb:255, 51, 119; --spectrum-magenta-900:rgba(var(--spectrum-magenta-900-rgb)); - --spectrum-magenta-1000-rgb:255, 172, 202; + --spectrum-magenta-1000-rgb:255, 96, 149; --spectrum-magenta-1000:rgba(var(--spectrum-magenta-1000-rgb)); - --spectrum-magenta-1100-rgb:255, 198, 218; + --spectrum-magenta-1100-rgb:255, 128, 171; --spectrum-magenta-1100:rgba(var(--spectrum-magenta-1100-rgb)); - --spectrum-magenta-1200-rgb:255, 221, 233; + --spectrum-magenta-1200-rgb:255, 163, 194; --spectrum-magenta-1200:rgba(var(--spectrum-magenta-1200-rgb)); - --spectrum-magenta-1300-rgb:255, 240, 245; + --spectrum-magenta-1300-rgb:255, 193, 214; --spectrum-magenta-1300:rgba(var(--spectrum-magenta-1300-rgb)); - --spectrum-magenta-1400-rgb:255, 252, 253; + --spectrum-magenta-1400-rgb:255, 220, 232; --spectrum-magenta-1400:rgba(var(--spectrum-magenta-1400-rgb)); + --spectrum-magenta-1500-rgb:255, 241, 246; + --spectrum-magenta-1500:rgba(var(--spectrum-magenta-1500-rgb)); + --spectrum-magenta-1600-rgb:255, 255, 255; + --spectrum-magenta-1600:rgba(var(--spectrum-magenta-1600-rgb)); + --spectrum-pink-100-rgb:58, 0, 37; + --spectrum-pink-100:rgba(var(--spectrum-pink-100-rgb)); + --spectrum-pink-200-rgb:71, 0, 44; + --spectrum-pink-200:rgba(var(--spectrum-pink-200-rgb)); + --spectrum-pink-300-rgb:90, 0, 57; + --spectrum-pink-300:rgba(var(--spectrum-pink-300-rgb)); + --spectrum-pink-400-rgb:115, 7, 75; + --spectrum-pink-400:rgba(var(--spectrum-pink-400-rgb)); + --spectrum-pink-500-rgb:143, 18, 97; + --spectrum-pink-500:rgba(var(--spectrum-pink-500-rgb)); + --spectrum-pink-600-rgb:171, 29, 119; + --spectrum-pink-600:rgba(var(--spectrum-pink-600-rgb)); + --spectrum-pink-700-rgb:196, 39, 138; + --spectrum-pink-700:rgba(var(--spectrum-pink-700-rgb)); + --spectrum-pink-800-rgb:220, 47, 156; + --spectrum-pink-800:rgba(var(--spectrum-pink-800-rgb)); + --spectrum-pink-900-rgb:236, 67, 175; + --spectrum-pink-900:rgba(var(--spectrum-pink-900-rgb)); + --spectrum-pink-1000-rgb:251, 90, 196; + --spectrum-pink-1000:rgba(var(--spectrum-pink-1000-rgb)); + --spectrum-pink-1100-rgb:255, 122, 210; + --spectrum-pink-1100:rgba(var(--spectrum-pink-1100-rgb)); + --spectrum-pink-1200-rgb:255, 159, 223; + --spectrum-pink-1200:rgba(var(--spectrum-pink-1200-rgb)); + --spectrum-pink-1300-rgb:255, 191, 234; + --spectrum-pink-1300:rgba(var(--spectrum-pink-1300-rgb)); + --spectrum-pink-1400-rgb:255, 219, 243; + --spectrum-pink-1400:rgba(var(--spectrum-pink-1400-rgb)); + --spectrum-pink-1500-rgb:255, 241, 250; + --spectrum-pink-1500:rgba(var(--spectrum-pink-1500-rgb)); + --spectrum-pink-1600-rgb:255, 255, 255; + --spectrum-pink-1600:rgba(var(--spectrum-pink-1600-rgb)); + --spectrum-turquoise-100-rgb:0, 30, 33; + --spectrum-turquoise-100:rgba(var(--spectrum-turquoise-100-rgb)); + --spectrum-turquoise-200-rgb:0, 37, 41; + --spectrum-turquoise-200:rgba(var(--spectrum-turquoise-200-rgb)); + --spectrum-turquoise-300-rgb:0, 49, 54; + --spectrum-turquoise-300:rgba(var(--spectrum-turquoise-300-rgb)); + --spectrum-turquoise-400-rgb:0, 66, 72; + --spectrum-turquoise-400:rgba(var(--spectrum-turquoise-400-rgb)); + --spectrum-turquoise-500-rgb:3, 84, 92; + --spectrum-turquoise-500:rgba(var(--spectrum-turquoise-500-rgb)); + --spectrum-turquoise-600-rgb:5, 103, 112; + --spectrum-turquoise-600:rgba(var(--spectrum-turquoise-600-rgb)); + --spectrum-turquoise-700-rgb:7, 120, 131; + --spectrum-turquoise-700:rgba(var(--spectrum-turquoise-700-rgb)); + --spectrum-turquoise-800-rgb:9, 135, 147; + --spectrum-turquoise-800:rgba(var(--spectrum-turquoise-800-rgb)); + --spectrum-turquoise-900-rgb:11, 151, 164; + --spectrum-turquoise-900:rgba(var(--spectrum-turquoise-900-rgb)); + --spectrum-turquoise-1000-rgb:13, 168, 182; + --spectrum-turquoise-1000:rgba(var(--spectrum-turquoise-1000-rgb)); + --spectrum-turquoise-1100-rgb:16, 186, 202; + --spectrum-turquoise-1100:rgba(var(--spectrum-turquoise-1100-rgb)); + --spectrum-turquoise-1200-rgb:64, 208, 220; + --spectrum-turquoise-1200:rgba(var(--spectrum-turquoise-1200-rgb)); + --spectrum-turquoise-1300-rgb:128, 225, 231; + --spectrum-turquoise-1300:rgba(var(--spectrum-turquoise-1300-rgb)); + --spectrum-turquoise-1400-rgb:183, 240, 240; + --spectrum-turquoise-1400:rgba(var(--spectrum-turquoise-1400-rgb)); + --spectrum-turquoise-1500-rgb:228, 249, 249; + --spectrum-turquoise-1500:rgba(var(--spectrum-turquoise-1500-rgb)); + --spectrum-turquoise-1600-rgb:255, 255, 255; + --spectrum-turquoise-1600:rgba(var(--spectrum-turquoise-1600-rgb)); + --spectrum-brown-100-rgb:35, 24, 8; + --spectrum-brown-100:rgba(var(--spectrum-brown-100-rgb)); + --spectrum-brown-200-rgb:44, 31, 11; + --spectrum-brown-200:rgba(var(--spectrum-brown-200-rgb)); + --spectrum-brown-300-rgb:58, 40, 14; + --spectrum-brown-300:rgba(var(--spectrum-brown-300-rgb)); + --spectrum-brown-400-rgb:78, 55, 19; + --spectrum-brown-400:rgba(var(--spectrum-brown-400-rgb)); + --spectrum-brown-500-rgb:98, 71, 30; + --spectrum-brown-500:rgba(var(--spectrum-brown-500-rgb)); + --spectrum-brown-600-rgb:115, 88, 47; + --spectrum-brown-600:rgba(var(--spectrum-brown-600-rgb)); + --spectrum-brown-700-rgb:132, 104, 61; + --spectrum-brown-700:rgba(var(--spectrum-brown-700-rgb)); + --spectrum-brown-800-rgb:148, 118, 73; + --spectrum-brown-800:rgba(var(--spectrum-brown-800-rgb)); + --spectrum-brown-900-rgb:163, 132, 84; + --spectrum-brown-900:rgba(var(--spectrum-brown-900-rgb)); + --spectrum-brown-1000-rgb:181, 147, 98; + --spectrum-brown-1000:rgba(var(--spectrum-brown-1000-rgb)); + --spectrum-brown-1100-rgb:199, 163, 112; + --spectrum-brown-1100:rgba(var(--spectrum-brown-1100-rgb)); + --spectrum-brown-1200-rgb:222, 185, 130; + --spectrum-brown-1200:rgba(var(--spectrum-brown-1200-rgb)); + --spectrum-brown-1300-rgb:232, 207, 169; + --spectrum-brown-1300:rgba(var(--spectrum-brown-1300-rgb)); + --spectrum-brown-1400-rgb:242, 227, 206; + --spectrum-brown-1400:rgba(var(--spectrum-brown-1400-rgb)); + --spectrum-brown-1500-rgb:250, 244, 236; + --spectrum-brown-1500:rgba(var(--spectrum-brown-1500-rgb)); + --spectrum-brown-1600-rgb:255, 255, 255; + --spectrum-brown-1600:rgba(var(--spectrum-brown-1600-rgb)); + --spectrum-silver-100-rgb:26, 26, 26; + --spectrum-silver-100:rgba(var(--spectrum-silver-100-rgb)); + --spectrum-silver-200-rgb:33, 33, 33; + --spectrum-silver-200:rgba(var(--spectrum-silver-200-rgb)); + --spectrum-silver-300-rgb:44, 44, 44; + --spectrum-silver-300:rgba(var(--spectrum-silver-300-rgb)); + --spectrum-silver-400-rgb:59, 59, 59; + --spectrum-silver-400:rgba(var(--spectrum-silver-400-rgb)); + --spectrum-silver-500-rgb:76, 76, 76; + --spectrum-silver-500:rgba(var(--spectrum-silver-500-rgb)); + --spectrum-silver-600-rgb:92, 92, 92; + --spectrum-silver-600:rgba(var(--spectrum-silver-600-rgb)); + --spectrum-silver-700-rgb:108, 108, 108; + --spectrum-silver-700:rgba(var(--spectrum-silver-700-rgb)); + --spectrum-silver-800-rgb:123, 123, 123; + --spectrum-silver-800:rgba(var(--spectrum-silver-800-rgb)); + --spectrum-silver-900-rgb:137, 137, 137; + --spectrum-silver-900:rgba(var(--spectrum-silver-900-rgb)); + --spectrum-silver-1000-rgb:152, 152, 152; + --spectrum-silver-1000:rgba(var(--spectrum-silver-1000-rgb)); + --spectrum-silver-1100-rgb:169, 169, 169; + --spectrum-silver-1100:rgba(var(--spectrum-silver-1100-rgb)); + --spectrum-silver-1200-rgb:190, 190, 190; + --spectrum-silver-1200:rgba(var(--spectrum-silver-1200-rgb)); + --spectrum-silver-1300-rgb:211, 211, 211; + --spectrum-silver-1300:rgba(var(--spectrum-silver-1300-rgb)); + --spectrum-silver-1400-rgb:229, 229, 229; + --spectrum-silver-1400:rgba(var(--spectrum-silver-1400-rgb)); + --spectrum-silver-1500-rgb:244, 244, 244; + --spectrum-silver-1500:rgba(var(--spectrum-silver-1500-rgb)); + --spectrum-silver-1600-rgb:255, 255, 255; + --spectrum-silver-1600:rgba(var(--spectrum-silver-1600-rgb)); + --spectrum-cinnamon-100-rgb:48, 17, 4; + --spectrum-cinnamon-100:rgba(var(--spectrum-cinnamon-100-rgb)); + --spectrum-cinnamon-200-rgb:59, 21, 5; + --spectrum-cinnamon-200:rgba(var(--spectrum-cinnamon-200-rgb)); + --spectrum-cinnamon-300-rgb:79, 28, 7; + --spectrum-cinnamon-300:rgba(var(--spectrum-cinnamon-300-rgb)); + --spectrum-cinnamon-400-rgb:100, 41, 15; + --spectrum-cinnamon-400:rgba(var(--spectrum-cinnamon-400-rgb)); + --spectrum-cinnamon-500-rgb:122, 57, 28; + --spectrum-cinnamon-500:rgba(var(--spectrum-cinnamon-500-rgb)); + --spectrum-cinnamon-600-rgb:143, 74, 40; + --spectrum-cinnamon-600:rgba(var(--spectrum-cinnamon-600-rgb)); + --spectrum-cinnamon-700-rgb:163, 88, 52; + --spectrum-cinnamon-700:rgba(var(--spectrum-cinnamon-700-rgb)); + --spectrum-cinnamon-800-rgb:179, 103, 64; + --spectrum-cinnamon-800:rgba(var(--spectrum-cinnamon-800-rgb)); + --spectrum-cinnamon-900-rgb:192, 119, 80; + --spectrum-cinnamon-900:rgba(var(--spectrum-cinnamon-900-rgb)); + --spectrum-cinnamon-1000-rgb:206, 136, 99; + --spectrum-cinnamon-1000:rgba(var(--spectrum-cinnamon-1000-rgb)); + --spectrum-cinnamon-1100-rgb:220, 154, 118; + --spectrum-cinnamon-1100:rgba(var(--spectrum-cinnamon-1100-rgb)); + --spectrum-cinnamon-1200-rgb:232, 179, 149; + --spectrum-cinnamon-1200:rgba(var(--spectrum-cinnamon-1200-rgb)); + --spectrum-cinnamon-1300-rgb:239, 203, 183; + --spectrum-cinnamon-1300:rgba(var(--spectrum-cinnamon-1300-rgb)); + --spectrum-cinnamon-1400-rgb:246, 225, 214; + --spectrum-cinnamon-1400:rgba(var(--spectrum-cinnamon-1400-rgb)); + --spectrum-cinnamon-1500-rgb:252, 244, 239; + --spectrum-cinnamon-1500:rgba(var(--spectrum-cinnamon-1500-rgb)); + --spectrum-cinnamon-1600-rgb:255, 255, 255; + --spectrum-cinnamon-1600:rgba(var(--spectrum-cinnamon-1600-rgb)); --spectrum-icon-color-blue-primary-default:var(--spectrum-blue-800); --spectrum-icon-color-green-primary-default:var(--spectrum-green-800); --spectrum-icon-color-red-primary-default:var(--spectrum-red-700); diff --git a/tokens/dist/css/darkest-vars.css b/tokens/dist/css/darkest-vars.css deleted file mode 100644 index a12e6bf4992..00000000000 --- a/tokens/dist/css/darkest-vars.css +++ /dev/null @@ -1,459 +0,0 @@ -.spectrum--darkest{ - --spectrum-overlay-opacity:0.6; - --spectrum-drop-shadow-color-rgb:0, 0, 0; - --spectrum-drop-shadow-color-opacity:0.8; - --spectrum-drop-shadow-color:rgba(var(--spectrum-drop-shadow-color-rgb), var(--spectrum-drop-shadow-color-opacity)); - --spectrum-background-base-color:var(--spectrum-gray-50); - --spectrum-background-layer-1-color:var(--spectrum-gray-75); - --spectrum-background-layer-2-color:var(--spectrum-gray-100); - --spectrum-neutral-background-color-default:var(--spectrum-gray-400); - --spectrum-neutral-background-color-hover:var(--spectrum-gray-300); - --spectrum-neutral-background-color-down:var(--spectrum-gray-200); - --spectrum-neutral-background-color-key-focus:var(--spectrum-gray-300); - --spectrum-neutral-subdued-background-color-default:var(--spectrum-gray-400); - --spectrum-neutral-subdued-background-color-hover:var(--spectrum-gray-300); - --spectrum-neutral-subdued-background-color-down:var(--spectrum-gray-200); - --spectrum-neutral-subdued-background-color-key-focus:var(--spectrum-gray-300); - --spectrum-accent-background-color-default:var(--spectrum-accent-color-600); - --spectrum-accent-background-color-hover:var(--spectrum-accent-color-500); - --spectrum-accent-background-color-down:var(--spectrum-accent-color-400); - --spectrum-accent-background-color-key-focus:var(--spectrum-accent-color-500); - --spectrum-informative-background-color-default:var(--spectrum-informative-color-600); - --spectrum-informative-background-color-hover:var(--spectrum-informative-color-500); - --spectrum-informative-background-color-down:var(--spectrum-informative-color-400); - --spectrum-informative-background-color-key-focus:var(--spectrum-informative-color-500); - --spectrum-negative-background-color-default:var(--spectrum-negative-color-600); - --spectrum-negative-background-color-hover:var(--spectrum-negative-color-500); - --spectrum-negative-background-color-down:var(--spectrum-negative-color-400); - --spectrum-negative-background-color-key-focus:var(--spectrum-negative-color-500); - --spectrum-positive-background-color-default:var(--spectrum-positive-color-600); - --spectrum-positive-background-color-hover:var(--spectrum-positive-color-500); - --spectrum-positive-background-color-down:var(--spectrum-positive-color-400); - --spectrum-positive-background-color-key-focus:var(--spectrum-positive-color-500); - --spectrum-notice-background-color-default:var(--spectrum-notice-color-800); - --spectrum-gray-background-color-default:var(--spectrum-gray-700); - --spectrum-red-background-color-default:var(--spectrum-red-700); - --spectrum-orange-background-color-default:var(--spectrum-orange-800); - --spectrum-yellow-background-color-default:var(--spectrum-yellow-1000); - --spectrum-chartreuse-background-color-default:var(--spectrum-chartreuse-900); - --spectrum-celery-background-color-default:var(--spectrum-celery-800); - --spectrum-green-background-color-default:var(--spectrum-green-700); - --spectrum-seafoam-background-color-default:var(--spectrum-seafoam-700); - --spectrum-cyan-background-color-default:var(--spectrum-cyan-700); - --spectrum-blue-background-color-default:var(--spectrum-blue-700); - --spectrum-indigo-background-color-default:var(--spectrum-indigo-700); - --spectrum-purple-background-color-default:var(--spectrum-purple-700); - --spectrum-fuchsia-background-color-default:var(--spectrum-fuchsia-700); - --spectrum-magenta-background-color-default:var(--spectrum-magenta-700); - --spectrum-neutral-visual-color:var(--spectrum-gray-600); - --spectrum-accent-visual-color:var(--spectrum-accent-color-900); - --spectrum-informative-visual-color:var(--spectrum-informative-color-900); - --spectrum-negative-visual-color:var(--spectrum-negative-color-700); - --spectrum-notice-visual-color:var(--spectrum-notice-color-900); - --spectrum-positive-visual-color:var(--spectrum-positive-color-800); - --spectrum-gray-visual-color:var(--spectrum-gray-600); - --spectrum-red-visual-color:var(--spectrum-red-700); - --spectrum-orange-visual-color:var(--spectrum-orange-900); - --spectrum-yellow-visual-color:var(--spectrum-yellow-1100); - --spectrum-chartreuse-visual-color:var(--spectrum-chartreuse-900); - --spectrum-celery-visual-color:var(--spectrum-celery-800); - --spectrum-green-visual-color:var(--spectrum-green-800); - --spectrum-seafoam-visual-color:var(--spectrum-seafoam-800); - --spectrum-cyan-visual-color:var(--spectrum-cyan-900); - --spectrum-blue-visual-color:var(--spectrum-blue-900); - --spectrum-indigo-visual-color:var(--spectrum-indigo-900); - --spectrum-purple-visual-color:var(--spectrum-purple-900); - --spectrum-fuchsia-visual-color:var(--spectrum-fuchsia-900); - --spectrum-magenta-visual-color:var(--spectrum-magenta-900); - --spectrum-opacity-checkerboard-square-dark:var(--spectrum-gray-800); - --spectrum-gray-50-rgb:0, 0, 0; - --spectrum-gray-50:rgba(var(--spectrum-gray-50-rgb)); - --spectrum-gray-75-rgb:14, 14, 14; - --spectrum-gray-75:rgba(var(--spectrum-gray-75-rgb)); - --spectrum-gray-100-rgb:29, 29, 29; - --spectrum-gray-100:rgba(var(--spectrum-gray-100-rgb)); - --spectrum-gray-200-rgb:48, 48, 48; - --spectrum-gray-200:rgba(var(--spectrum-gray-200-rgb)); - --spectrum-gray-300-rgb:75, 75, 75; - --spectrum-gray-300:rgba(var(--spectrum-gray-300-rgb)); - --spectrum-gray-400-rgb:106, 106, 106; - --spectrum-gray-400:rgba(var(--spectrum-gray-400-rgb)); - --spectrum-gray-500-rgb:141, 141, 141; - --spectrum-gray-500:rgba(var(--spectrum-gray-500-rgb)); - --spectrum-gray-600-rgb:176, 176, 176; - --spectrum-gray-600:rgba(var(--spectrum-gray-600-rgb)); - --spectrum-gray-700-rgb:208, 208, 208; - --spectrum-gray-700:rgba(var(--spectrum-gray-700-rgb)); - --spectrum-gray-800-rgb:235, 235, 235; - --spectrum-gray-800:rgba(var(--spectrum-gray-800-rgb)); - --spectrum-gray-900-rgb:255, 255, 255; - --spectrum-gray-900:rgba(var(--spectrum-gray-900-rgb)); - --spectrum-blue-100-rgb:0, 38, 81; - --spectrum-blue-100:rgba(var(--spectrum-blue-100-rgb)); - --spectrum-blue-200-rgb:0, 50, 106; - --spectrum-blue-200:rgba(var(--spectrum-blue-200-rgb)); - --spectrum-blue-300-rgb:0, 64, 135; - --spectrum-blue-300:rgba(var(--spectrum-blue-300-rgb)); - --spectrum-blue-400-rgb:0, 78, 166; - --spectrum-blue-400:rgba(var(--spectrum-blue-400-rgb)); - --spectrum-blue-500-rgb:0, 92, 200; - --spectrum-blue-500:rgba(var(--spectrum-blue-500-rgb)); - --spectrum-blue-600-rgb:6, 108, 231; - --spectrum-blue-600:rgba(var(--spectrum-blue-600-rgb)); - --spectrum-blue-700-rgb:29, 128, 245; - --spectrum-blue-700:rgba(var(--spectrum-blue-700-rgb)); - --spectrum-blue-800-rgb:64, 150, 243; - --spectrum-blue-800:rgba(var(--spectrum-blue-800-rgb)); - --spectrum-blue-900-rgb:94, 170, 247; - --spectrum-blue-900:rgba(var(--spectrum-blue-900-rgb)); - --spectrum-blue-1000-rgb:124, 189, 250; - --spectrum-blue-1000:rgba(var(--spectrum-blue-1000-rgb)); - --spectrum-blue-1100-rgb:152, 206, 253; - --spectrum-blue-1100:rgba(var(--spectrum-blue-1100-rgb)); - --spectrum-blue-1200-rgb:179, 222, 254; - --spectrum-blue-1200:rgba(var(--spectrum-blue-1200-rgb)); - --spectrum-blue-1300-rgb:206, 234, 255; - --spectrum-blue-1300:rgba(var(--spectrum-blue-1300-rgb)); - --spectrum-blue-1400-rgb:227, 243, 255; - --spectrum-blue-1400:rgba(var(--spectrum-blue-1400-rgb)); - --spectrum-red-100-rgb:87, 0, 0; - --spectrum-red-100:rgba(var(--spectrum-red-100-rgb)); - --spectrum-red-200-rgb:110, 0, 0; - --spectrum-red-200:rgba(var(--spectrum-red-200-rgb)); - --spectrum-red-300-rgb:138, 0, 0; - --spectrum-red-300:rgba(var(--spectrum-red-300-rgb)); - --spectrum-red-400-rgb:167, 0, 0; - --spectrum-red-400:rgba(var(--spectrum-red-400-rgb)); - --spectrum-red-500-rgb:196, 7, 6; - --spectrum-red-500:rgba(var(--spectrum-red-500-rgb)); - --spectrum-red-600-rgb:221, 33, 24; - --spectrum-red-600:rgba(var(--spectrum-red-600-rgb)); - --spectrum-red-700-rgb:238, 67, 49; - --spectrum-red-700:rgba(var(--spectrum-red-700-rgb)); - --spectrum-red-800-rgb:249, 99, 76; - --spectrum-red-800:rgba(var(--spectrum-red-800-rgb)); - --spectrum-red-900-rgb:255, 129, 107; - --spectrum-red-900:rgba(var(--spectrum-red-900-rgb)); - --spectrum-red-1000-rgb:255, 158, 140; - --spectrum-red-1000:rgba(var(--spectrum-red-1000-rgb)); - --spectrum-red-1100-rgb:255, 183, 169; - --spectrum-red-1100:rgba(var(--spectrum-red-1100-rgb)); - --spectrum-red-1200-rgb:255, 205, 195; - --spectrum-red-1200:rgba(var(--spectrum-red-1200-rgb)); - --spectrum-red-1300-rgb:255, 223, 217; - --spectrum-red-1300:rgba(var(--spectrum-red-1300-rgb)); - --spectrum-red-1400-rgb:255, 237, 234; - --spectrum-red-1400:rgba(var(--spectrum-red-1400-rgb)); - --spectrum-orange-100-rgb:72, 24, 1; - --spectrum-orange-100:rgba(var(--spectrum-orange-100-rgb)); - --spectrum-orange-200-rgb:92, 32, 0; - --spectrum-orange-200:rgba(var(--spectrum-orange-200-rgb)); - --spectrum-orange-300-rgb:115, 43, 0; - --spectrum-orange-300:rgba(var(--spectrum-orange-300-rgb)); - --spectrum-orange-400-rgb:138, 55, 0; - --spectrum-orange-400:rgba(var(--spectrum-orange-400-rgb)); - --spectrum-orange-500-rgb:162, 68, 0; - --spectrum-orange-500:rgba(var(--spectrum-orange-500-rgb)); - --spectrum-orange-600-rgb:186, 82, 0; - --spectrum-orange-600:rgba(var(--spectrum-orange-600-rgb)); - --spectrum-orange-700-rgb:210, 98, 0; - --spectrum-orange-700:rgba(var(--spectrum-orange-700-rgb)); - --spectrum-orange-800-rgb:232, 116, 0; - --spectrum-orange-800:rgba(var(--spectrum-orange-800-rgb)); - --spectrum-orange-900-rgb:249, 137, 23; - --spectrum-orange-900:rgba(var(--spectrum-orange-900-rgb)); - --spectrum-orange-1000-rgb:255, 162, 59; - --spectrum-orange-1000:rgba(var(--spectrum-orange-1000-rgb)); - --spectrum-orange-1100-rgb:255, 188, 102; - --spectrum-orange-1100:rgba(var(--spectrum-orange-1100-rgb)); - --spectrum-orange-1200-rgb:253, 210, 145; - --spectrum-orange-1200:rgba(var(--spectrum-orange-1200-rgb)); - --spectrum-orange-1300-rgb:255, 226, 181; - --spectrum-orange-1300:rgba(var(--spectrum-orange-1300-rgb)); - --spectrum-orange-1400-rgb:255, 239, 213; - --spectrum-orange-1400:rgba(var(--spectrum-orange-1400-rgb)); - --spectrum-yellow-100-rgb:53, 36, 0; - --spectrum-yellow-100:rgba(var(--spectrum-yellow-100-rgb)); - --spectrum-yellow-200-rgb:68, 47, 0; - --spectrum-yellow-200:rgba(var(--spectrum-yellow-200-rgb)); - --spectrum-yellow-300-rgb:86, 62, 0; - --spectrum-yellow-300:rgba(var(--spectrum-yellow-300-rgb)); - --spectrum-yellow-400-rgb:103, 77, 0; - --spectrum-yellow-400:rgba(var(--spectrum-yellow-400-rgb)); - --spectrum-yellow-500-rgb:122, 92, 0; - --spectrum-yellow-500:rgba(var(--spectrum-yellow-500-rgb)); - --spectrum-yellow-600-rgb:141, 108, 0; - --spectrum-yellow-600:rgba(var(--spectrum-yellow-600-rgb)); - --spectrum-yellow-700-rgb:161, 126, 0; - --spectrum-yellow-700:rgba(var(--spectrum-yellow-700-rgb)); - --spectrum-yellow-800-rgb:180, 144, 0; - --spectrum-yellow-800:rgba(var(--spectrum-yellow-800-rgb)); - --spectrum-yellow-900-rgb:199, 162, 0; - --spectrum-yellow-900:rgba(var(--spectrum-yellow-900-rgb)); - --spectrum-yellow-1000-rgb:216, 181, 0; - --spectrum-yellow-1000:rgba(var(--spectrum-yellow-1000-rgb)); - --spectrum-yellow-1100-rgb:233, 199, 0; - --spectrum-yellow-1100:rgba(var(--spectrum-yellow-1100-rgb)); - --spectrum-yellow-1200-rgb:247, 216, 4; - --spectrum-yellow-1200:rgba(var(--spectrum-yellow-1200-rgb)); - --spectrum-yellow-1300-rgb:249, 233, 97; - --spectrum-yellow-1300:rgba(var(--spectrum-yellow-1300-rgb)); - --spectrum-yellow-1400-rgb:252, 243, 170; - --spectrum-yellow-1400:rgba(var(--spectrum-yellow-1400-rgb)); - --spectrum-chartreuse-100-rgb:32, 43, 0; - --spectrum-chartreuse-100:rgba(var(--spectrum-chartreuse-100-rgb)); - --spectrum-chartreuse-200-rgb:42, 56, 0; - --spectrum-chartreuse-200:rgba(var(--spectrum-chartreuse-200-rgb)); - --spectrum-chartreuse-300-rgb:54, 72, 0; - --spectrum-chartreuse-300:rgba(var(--spectrum-chartreuse-300-rgb)); - --spectrum-chartreuse-400-rgb:66, 88, 0; - --spectrum-chartreuse-400:rgba(var(--spectrum-chartreuse-400-rgb)); - --spectrum-chartreuse-500-rgb:79, 105, 0; - --spectrum-chartreuse-500:rgba(var(--spectrum-chartreuse-500-rgb)); - --spectrum-chartreuse-600-rgb:93, 123, 0; - --spectrum-chartreuse-600:rgba(var(--spectrum-chartreuse-600-rgb)); - --spectrum-chartreuse-700-rgb:107, 142, 0; - --spectrum-chartreuse-700:rgba(var(--spectrum-chartreuse-700-rgb)); - --spectrum-chartreuse-800-rgb:122, 161, 0; - --spectrum-chartreuse-800:rgba(var(--spectrum-chartreuse-800-rgb)); - --spectrum-chartreuse-900-rgb:138, 180, 3; - --spectrum-chartreuse-900:rgba(var(--spectrum-chartreuse-900-rgb)); - --spectrum-chartreuse-1000-rgb:154, 198, 11; - --spectrum-chartreuse-1000:rgba(var(--spectrum-chartreuse-1000-rgb)); - --spectrum-chartreuse-1100-rgb:170, 216, 22; - --spectrum-chartreuse-1100:rgba(var(--spectrum-chartreuse-1100-rgb)); - --spectrum-chartreuse-1200-rgb:187, 232, 41; - --spectrum-chartreuse-1200:rgba(var(--spectrum-chartreuse-1200-rgb)); - --spectrum-chartreuse-1300-rgb:205, 246, 72; - --spectrum-chartreuse-1300:rgba(var(--spectrum-chartreuse-1300-rgb)); - --spectrum-chartreuse-1400-rgb:225, 253, 132; - --spectrum-chartreuse-1400:rgba(var(--spectrum-chartreuse-1400-rgb)); - --spectrum-celery-100-rgb:0, 47, 7; - --spectrum-celery-100:rgba(var(--spectrum-celery-100-rgb)); - --spectrum-celery-200-rgb:0, 61, 9; - --spectrum-celery-200:rgba(var(--spectrum-celery-200-rgb)); - --spectrum-celery-300-rgb:0, 77, 12; - --spectrum-celery-300:rgba(var(--spectrum-celery-300-rgb)); - --spectrum-celery-400-rgb:0, 95, 15; - --spectrum-celery-400:rgba(var(--spectrum-celery-400-rgb)); - --spectrum-celery-500-rgb:0, 113, 15; - --spectrum-celery-500:rgba(var(--spectrum-celery-500-rgb)); - --spectrum-celery-600-rgb:0, 132, 15; - --spectrum-celery-600:rgba(var(--spectrum-celery-600-rgb)); - --spectrum-celery-700-rgb:0, 151, 20; - --spectrum-celery-700:rgba(var(--spectrum-celery-700-rgb)); - --spectrum-celery-800-rgb:13, 171, 37; - --spectrum-celery-800:rgba(var(--spectrum-celery-800-rgb)); - --spectrum-celery-900-rgb:45, 191, 58; - --spectrum-celery-900:rgba(var(--spectrum-celery-900-rgb)); - --spectrum-celery-1000-rgb:80, 208, 82; - --spectrum-celery-1000:rgba(var(--spectrum-celery-1000-rgb)); - --spectrum-celery-1100-rgb:115, 224, 107; - --spectrum-celery-1100:rgba(var(--spectrum-celery-1100-rgb)); - --spectrum-celery-1200-rgb:147, 237, 131; - --spectrum-celery-1200:rgba(var(--spectrum-celery-1200-rgb)); - --spectrum-celery-1300-rgb:180, 247, 162; - --spectrum-celery-1300:rgba(var(--spectrum-celery-1300-rgb)); - --spectrum-celery-1400-rgb:213, 252, 202; - --spectrum-celery-1400:rgba(var(--spectrum-celery-1400-rgb)); - --spectrum-green-100-rgb:10, 44, 28; - --spectrum-green-100:rgba(var(--spectrum-green-100-rgb)); - --spectrum-green-200-rgb:7, 59, 36; - --spectrum-green-200:rgba(var(--spectrum-green-200-rgb)); - --spectrum-green-300-rgb:0, 76, 46; - --spectrum-green-300:rgba(var(--spectrum-green-300-rgb)); - --spectrum-green-400-rgb:0, 93, 57; - --spectrum-green-400:rgba(var(--spectrum-green-400-rgb)); - --spectrum-green-500-rgb:0, 111, 69; - --spectrum-green-500:rgba(var(--spectrum-green-500-rgb)); - --spectrum-green-600-rgb:0, 130, 82; - --spectrum-green-600:rgba(var(--spectrum-green-600-rgb)); - --spectrum-green-700-rgb:0, 149, 98; - --spectrum-green-700:rgba(var(--spectrum-green-700-rgb)); - --spectrum-green-800-rgb:28, 168, 114; - --spectrum-green-800:rgba(var(--spectrum-green-800-rgb)); - --spectrum-green-900-rgb:52, 187, 132; - --spectrum-green-900:rgba(var(--spectrum-green-900-rgb)); - --spectrum-green-1000-rgb:75, 205, 149; - --spectrum-green-1000:rgba(var(--spectrum-green-1000-rgb)); - --spectrum-green-1100-rgb:103, 222, 168; - --spectrum-green-1100:rgba(var(--spectrum-green-1100-rgb)); - --spectrum-green-1200-rgb:137, 236, 188; - --spectrum-green-1200:rgba(var(--spectrum-green-1200-rgb)); - --spectrum-green-1300-rgb:177, 244, 209; - --spectrum-green-1300:rgba(var(--spectrum-green-1300-rgb)); - --spectrum-green-1400-rgb:214, 249, 228; - --spectrum-green-1400:rgba(var(--spectrum-green-1400-rgb)); - --spectrum-seafoam-100-rgb:18, 43, 42; - --spectrum-seafoam-100:rgba(var(--spectrum-seafoam-100-rgb)); - --spectrum-seafoam-200-rgb:19, 57, 55; - --spectrum-seafoam-200:rgba(var(--spectrum-seafoam-200-rgb)); - --spectrum-seafoam-300-rgb:16, 73, 70; - --spectrum-seafoam-300:rgba(var(--spectrum-seafoam-300-rgb)); - --spectrum-seafoam-400-rgb:3, 91, 88; - --spectrum-seafoam-400:rgba(var(--spectrum-seafoam-400-rgb)); - --spectrum-seafoam-500-rgb:0, 108, 104; - --spectrum-seafoam-500:rgba(var(--spectrum-seafoam-500-rgb)); - --spectrum-seafoam-600-rgb:0, 127, 121; - --spectrum-seafoam-600:rgba(var(--spectrum-seafoam-600-rgb)); - --spectrum-seafoam-700-rgb:0, 146, 140; - --spectrum-seafoam-700:rgba(var(--spectrum-seafoam-700-rgb)); - --spectrum-seafoam-800-rgb:0, 165, 159; - --spectrum-seafoam-800:rgba(var(--spectrum-seafoam-800-rgb)); - --spectrum-seafoam-900-rgb:26, 185, 178; - --spectrum-seafoam-900:rgba(var(--spectrum-seafoam-900-rgb)); - --spectrum-seafoam-1000-rgb:66, 202, 195; - --spectrum-seafoam-1000:rgba(var(--spectrum-seafoam-1000-rgb)); - --spectrum-seafoam-1100-rgb:102, 218, 211; - --spectrum-seafoam-1100:rgba(var(--spectrum-seafoam-1100-rgb)); - --spectrum-seafoam-1200-rgb:139, 232, 225; - --spectrum-seafoam-1200:rgba(var(--spectrum-seafoam-1200-rgb)); - --spectrum-seafoam-1300-rgb:179, 242, 237; - --spectrum-seafoam-1300:rgba(var(--spectrum-seafoam-1300-rgb)); - --spectrum-seafoam-1400-rgb:215, 248, 244; - --spectrum-seafoam-1400:rgba(var(--spectrum-seafoam-1400-rgb)); - --spectrum-cyan-100-rgb:0, 41, 68; - --spectrum-cyan-100:rgba(var(--spectrum-cyan-100-rgb)); - --spectrum-cyan-200-rgb:0, 54, 88; - --spectrum-cyan-200:rgba(var(--spectrum-cyan-200-rgb)); - --spectrum-cyan-300-rgb:0, 69, 108; - --spectrum-cyan-300:rgba(var(--spectrum-cyan-300-rgb)); - --spectrum-cyan-400-rgb:0, 86, 128; - --spectrum-cyan-400:rgba(var(--spectrum-cyan-400-rgb)); - --spectrum-cyan-500-rgb:0, 103, 147; - --spectrum-cyan-500:rgba(var(--spectrum-cyan-500-rgb)); - --spectrum-cyan-600-rgb:0, 121, 167; - --spectrum-cyan-600:rgba(var(--spectrum-cyan-600-rgb)); - --spectrum-cyan-700-rgb:0, 140, 186; - --spectrum-cyan-700:rgba(var(--spectrum-cyan-700-rgb)); - --spectrum-cyan-800-rgb:4, 160, 205; - --spectrum-cyan-800:rgba(var(--spectrum-cyan-800-rgb)); - --spectrum-cyan-900-rgb:23, 180, 221; - --spectrum-cyan-900:rgba(var(--spectrum-cyan-900-rgb)); - --spectrum-cyan-1000-rgb:57, 199, 234; - --spectrum-cyan-1000:rgba(var(--spectrum-cyan-1000-rgb)); - --spectrum-cyan-1100-rgb:96, 216, 243; - --spectrum-cyan-1100:rgba(var(--spectrum-cyan-1100-rgb)); - --spectrum-cyan-1200-rgb:134, 230, 250; - --spectrum-cyan-1200:rgba(var(--spectrum-cyan-1200-rgb)); - --spectrum-cyan-1300-rgb:170, 242, 255; - --spectrum-cyan-1300:rgba(var(--spectrum-cyan-1300-rgb)); - --spectrum-cyan-1400-rgb:206, 249, 255; - --spectrum-cyan-1400:rgba(var(--spectrum-cyan-1400-rgb)); - --spectrum-indigo-100-rgb:26, 29, 97; - --spectrum-indigo-100:rgba(var(--spectrum-indigo-100-rgb)); - --spectrum-indigo-200-rgb:35, 39, 125; - --spectrum-indigo-200:rgba(var(--spectrum-indigo-200-rgb)); - --spectrum-indigo-300-rgb:46, 50, 158; - --spectrum-indigo-300:rgba(var(--spectrum-indigo-300-rgb)); - --spectrum-indigo-400-rgb:58, 63, 189; - --spectrum-indigo-400:rgba(var(--spectrum-indigo-400-rgb)); - --spectrum-indigo-500-rgb:73, 78, 216; - --spectrum-indigo-500:rgba(var(--spectrum-indigo-500-rgb)); - --spectrum-indigo-600-rgb:90, 96, 235; - --spectrum-indigo-600:rgba(var(--spectrum-indigo-600-rgb)); - --spectrum-indigo-700-rgb:110, 115, 246; - --spectrum-indigo-700:rgba(var(--spectrum-indigo-700-rgb)); - --spectrum-indigo-800-rgb:132, 136, 253; - --spectrum-indigo-800:rgba(var(--spectrum-indigo-800-rgb)); - --spectrum-indigo-900-rgb:153, 157, 255; - --spectrum-indigo-900:rgba(var(--spectrum-indigo-900-rgb)); - --spectrum-indigo-1000-rgb:174, 177, 255; - --spectrum-indigo-1000:rgba(var(--spectrum-indigo-1000-rgb)); - --spectrum-indigo-1100-rgb:194, 196, 255; - --spectrum-indigo-1100:rgba(var(--spectrum-indigo-1100-rgb)); - --spectrum-indigo-1200-rgb:212, 213, 255; - --spectrum-indigo-1200:rgba(var(--spectrum-indigo-1200-rgb)); - --spectrum-indigo-1300-rgb:227, 228, 255; - --spectrum-indigo-1300:rgba(var(--spectrum-indigo-1300-rgb)); - --spectrum-indigo-1400-rgb:240, 240, 255; - --spectrum-indigo-1400:rgba(var(--spectrum-indigo-1400-rgb)); - --spectrum-purple-100-rgb:50, 16, 104; - --spectrum-purple-100:rgba(var(--spectrum-purple-100-rgb)); - --spectrum-purple-200-rgb:67, 13, 140; - --spectrum-purple-200:rgba(var(--spectrum-purple-200-rgb)); - --spectrum-purple-300-rgb:86, 16, 173; - --spectrum-purple-300:rgba(var(--spectrum-purple-300-rgb)); - --spectrum-purple-400-rgb:106, 29, 200; - --spectrum-purple-400:rgba(var(--spectrum-purple-400-rgb)); - --spectrum-purple-500-rgb:126, 49, 222; - --spectrum-purple-500:rgba(var(--spectrum-purple-500-rgb)); - --spectrum-purple-600-rgb:145, 70, 236; - --spectrum-purple-600:rgba(var(--spectrum-purple-600-rgb)); - --spectrum-purple-700-rgb:162, 94, 246; - --spectrum-purple-700:rgba(var(--spectrum-purple-700-rgb)); - --spectrum-purple-800-rgb:178, 119, 250; - --spectrum-purple-800:rgba(var(--spectrum-purple-800-rgb)); - --spectrum-purple-900-rgb:192, 143, 252; - --spectrum-purple-900:rgba(var(--spectrum-purple-900-rgb)); - --spectrum-purple-1000-rgb:206, 166, 253; - --spectrum-purple-1000:rgba(var(--spectrum-purple-1000-rgb)); - --spectrum-purple-1100-rgb:219, 188, 254; - --spectrum-purple-1100:rgba(var(--spectrum-purple-1100-rgb)); - --spectrum-purple-1200-rgb:230, 207, 255; - --spectrum-purple-1200:rgba(var(--spectrum-purple-1200-rgb)); - --spectrum-purple-1300-rgb:240, 224, 255; - --spectrum-purple-1300:rgba(var(--spectrum-purple-1300-rgb)); - --spectrum-purple-1400-rgb:248, 237, 255; - --spectrum-purple-1400:rgba(var(--spectrum-purple-1400-rgb)); - --spectrum-fuchsia-100-rgb:70, 14, 68; - --spectrum-fuchsia-100:rgba(var(--spectrum-fuchsia-100-rgb)); - --spectrum-fuchsia-200-rgb:93, 9, 92; - --spectrum-fuchsia-200:rgba(var(--spectrum-fuchsia-200-rgb)); - --spectrum-fuchsia-300-rgb:120, 0, 120; - --spectrum-fuchsia-300:rgba(var(--spectrum-fuchsia-300-rgb)); - --spectrum-fuchsia-400-rgb:146, 0, 147; - --spectrum-fuchsia-400:rgba(var(--spectrum-fuchsia-400-rgb)); - --spectrum-fuchsia-500-rgb:169, 19, 170; - --spectrum-fuchsia-500:rgba(var(--spectrum-fuchsia-500-rgb)); - --spectrum-fuchsia-600-rgb:191, 43, 191; - --spectrum-fuchsia-600:rgba(var(--spectrum-fuchsia-600-rgb)); - --spectrum-fuchsia-700-rgb:211, 65, 213; - --spectrum-fuchsia-700:rgba(var(--spectrum-fuchsia-700-rgb)); - --spectrum-fuchsia-800-rgb:228, 91, 229; - --spectrum-fuchsia-800:rgba(var(--spectrum-fuchsia-800-rgb)); - --spectrum-fuchsia-900-rgb:239, 120, 238; - --spectrum-fuchsia-900:rgba(var(--spectrum-fuchsia-900-rgb)); - --spectrum-fuchsia-1000-rgb:246, 149, 243; - --spectrum-fuchsia-1000:rgba(var(--spectrum-fuchsia-1000-rgb)); - --spectrum-fuchsia-1100-rgb:251, 175, 246; - --spectrum-fuchsia-1100:rgba(var(--spectrum-fuchsia-1100-rgb)); - --spectrum-fuchsia-1200-rgb:254, 199, 248; - --spectrum-fuchsia-1200:rgba(var(--spectrum-fuchsia-1200-rgb)); - --spectrum-fuchsia-1300-rgb:255, 220, 250; - --spectrum-fuchsia-1300:rgba(var(--spectrum-fuchsia-1300-rgb)); - --spectrum-fuchsia-1400-rgb:255, 235, 252; - --spectrum-fuchsia-1400:rgba(var(--spectrum-fuchsia-1400-rgb)); - --spectrum-magenta-100-rgb:83, 3, 41; - --spectrum-magenta-100:rgba(var(--spectrum-magenta-100-rgb)); - --spectrum-magenta-200-rgb:106, 0, 52; - --spectrum-magenta-200:rgba(var(--spectrum-magenta-200-rgb)); - --spectrum-magenta-300-rgb:133, 0, 65; - --spectrum-magenta-300:rgba(var(--spectrum-magenta-300-rgb)); - --spectrum-magenta-400-rgb:161, 0, 78; - --spectrum-magenta-400:rgba(var(--spectrum-magenta-400-rgb)); - --spectrum-magenta-500-rgb:186, 22, 93; - --spectrum-magenta-500:rgba(var(--spectrum-magenta-500-rgb)); - --spectrum-magenta-600-rgb:209, 43, 114; - --spectrum-magenta-600:rgba(var(--spectrum-magenta-600-rgb)); - --spectrum-magenta-700-rgb:227, 69, 137; - --spectrum-magenta-700:rgba(var(--spectrum-magenta-700-rgb)); - --spectrum-magenta-800-rgb:241, 97, 156; - --spectrum-magenta-800:rgba(var(--spectrum-magenta-800-rgb)); - --spectrum-magenta-900-rgb:252, 124, 173; - --spectrum-magenta-900:rgba(var(--spectrum-magenta-900-rgb)); - --spectrum-magenta-1000-rgb:255, 152, 191; - --spectrum-magenta-1000:rgba(var(--spectrum-magenta-1000-rgb)); - --spectrum-magenta-1100-rgb:255, 179, 207; - --spectrum-magenta-1100:rgba(var(--spectrum-magenta-1100-rgb)); - --spectrum-magenta-1200-rgb:255, 202, 221; - --spectrum-magenta-1200:rgba(var(--spectrum-magenta-1200-rgb)); - --spectrum-magenta-1300-rgb:255, 221, 233; - --spectrum-magenta-1300:rgba(var(--spectrum-magenta-1300-rgb)); - --spectrum-magenta-1400-rgb:255, 236, 243; - --spectrum-magenta-1400:rgba(var(--spectrum-magenta-1400-rgb)); - --spectrum-icon-color-blue-primary-default:var(--spectrum-blue-800); - --spectrum-icon-color-green-primary-default:var(--spectrum-green-800); - --spectrum-icon-color-red-primary-default:var(--spectrum-red-700); - --spectrum-icon-color-yellow-primary-default:var(--spectrum-yellow-1000); -} diff --git a/tokens/dist/css/express/global-vars.css b/tokens/dist/css/express/global-vars.css deleted file mode 100644 index 2afc013168c..00000000000 --- a/tokens/dist/css/express/global-vars.css +++ /dev/null @@ -1,39 +0,0 @@ -.spectrum--express{ - --spectrum-neutral-background-color-selected-default:var(--spectrum-gray-800); - --spectrum-neutral-background-color-selected-hover:var(--spectrum-gray-900); - --spectrum-neutral-background-color-selected-down:var(--spectrum-gray-900); - --spectrum-neutral-background-color-selected-key-focus:var(--spectrum-gray-900); - --spectrum-slider-track-thickness:4px; - --spectrum-slider-handle-gap:0px; - --spectrum-picker-border-width:0; - --spectrum-in-field-button-fill-stacked-inner-border-rounding:1px; - --spectrum-in-field-button-edge-to-fill:4px; - --spectrum-in-field-button-stacked-inner-edge-to-fill:1px; - --spectrum-in-field-button-outer-edge-to-disclosure-icon-stacked-medium:5px; - --spectrum-in-field-button-outer-edge-to-disclosure-icon-stacked-large:7px; - --spectrum-in-field-button-outer-edge-to-disclosure-icon-stacked-extra-large:8px; - --spectrum-in-field-button-inner-edge-to-disclosure-icon-stacked-small:1px; - --spectrum-in-field-button-inner-edge-to-disclosure-icon-stacked-medium:1px; - --spectrum-in-field-button-inner-edge-to-disclosure-icon-stacked-large:3px; - --spectrum-in-field-button-inner-edge-to-disclosure-icon-stacked-extra-large:4px; - --spectrum-border-width-100:2px; - --spectrum-accent-color-100:var(--spectrum-indigo-100); - --spectrum-accent-color-200:var(--spectrum-indigo-200); - --spectrum-accent-color-300:var(--spectrum-indigo-300); - --spectrum-accent-color-400:var(--spectrum-indigo-400); - --spectrum-accent-color-500:var(--spectrum-indigo-500); - --spectrum-accent-color-600:var(--spectrum-indigo-600); - --spectrum-accent-color-700:var(--spectrum-indigo-700); - --spectrum-accent-color-800:var(--spectrum-indigo-800); - --spectrum-accent-color-900:var(--spectrum-indigo-900); - --spectrum-accent-color-1000:var(--spectrum-indigo-1000); - --spectrum-accent-color-1100:var(--spectrum-indigo-1100); - --spectrum-accent-color-1200:var(--spectrum-indigo-1200); - --spectrum-accent-color-1300:var(--spectrum-indigo-1300); - --spectrum-accent-color-1400:var(--spectrum-indigo-1400); - --spectrum-heading-sans-serif-font-weight:var(--spectrum-black-font-weight); - --spectrum-heading-serif-font-weight:var(--spectrum-black-font-weight); - --spectrum-heading-cjk-font-weight:var(--spectrum-black-font-weight); - --spectrum-heading-sans-serif-emphasized-font-weight:var(--spectrum-black-font-weight); - --spectrum-heading-serif-emphasized-font-weight:var(--spectrum-black-font-weight); -} diff --git a/tokens/dist/css/express/large-vars.css b/tokens/dist/css/express/large-vars.css deleted file mode 100644 index a1f73565193..00000000000 --- a/tokens/dist/css/express/large-vars.css +++ /dev/null @@ -1,52 +0,0 @@ -.spectrum--express.spectrum--large{ - --spectrum-checkbox-control-size-small:18px; - --spectrum-checkbox-control-size-medium:20px; - --spectrum-checkbox-control-size-large:22px; - --spectrum-checkbox-control-size-extra-large:26px; - --spectrum-checkbox-top-to-control-small:6px; - --spectrum-checkbox-top-to-control-medium:10px; - --spectrum-checkbox-top-to-control-large:14px; - --spectrum-checkbox-top-to-control-extra-large:17px; - --spectrum-switch-control-width-small:32px; - --spectrum-switch-control-width-medium:36px; - --spectrum-switch-control-width-large:41px; - --spectrum-switch-control-width-extra-large:46px; - --spectrum-switch-control-height-small:18px; - --spectrum-switch-control-height-medium:20px; - --spectrum-switch-control-height-large:22px; - --spectrum-switch-control-height-extra-large:26px; - --spectrum-switch-top-to-control-small:6px; - --spectrum-switch-top-to-control-medium:10px; - --spectrum-switch-top-to-control-large:14px; - --spectrum-switch-top-to-control-extra-large:17px; - --spectrum-radio-button-control-size-small:18px; - --spectrum-radio-button-control-size-medium:20px; - --spectrum-radio-button-control-size-large:22px; - --spectrum-radio-button-control-size-extra-large:26px; - --spectrum-radio-button-top-to-control-small:6px; - --spectrum-radio-button-top-to-control-medium:10px; - --spectrum-radio-button-top-to-control-large:14px; - --spectrum-radio-button-top-to-control-extra-large:17px; - --spectrum-slider-control-height-small:22px; - --spectrum-slider-control-height-medium:24px; - --spectrum-slider-control-height-large:28px; - --spectrum-slider-control-height-extra-large:30px; - --spectrum-slider-handle-size-small:22px; - --spectrum-slider-handle-size-medium:24px; - --spectrum-slider-handle-size-large:28px; - --spectrum-slider-handle-size-extra-large:30px; - --spectrum-slider-handle-border-width-down-small:var(--spectrum-border-width-200); - --spectrum-slider-handle-border-width-down-medium:var(--spectrum-border-width-200); - --spectrum-slider-handle-border-width-down-large:var(--spectrum-border-width-200); - --spectrum-slider-handle-border-width-down-extra-large:var(--spectrum-border-width-200); - --spectrum-slider-bottom-to-handle-small:4px; - --spectrum-slider-bottom-to-handle-medium:8px; - --spectrum-slider-bottom-to-handle-large:12px; - --spectrum-slider-bottom-to-handle-extra-large:15px; - --spectrum-corner-radius-75:4px; - --spectrum-corner-radius-100:8px; - --spectrum-corner-radius-200:16px; - --spectrum-drop-shadow-x:0px; - --spectrum-drop-shadow-y:4px; - --spectrum-drop-shadow-blur:16px; -} diff --git a/tokens/dist/css/express/medium-vars.css b/tokens/dist/css/express/medium-vars.css deleted file mode 100644 index 306753d6693..00000000000 --- a/tokens/dist/css/express/medium-vars.css +++ /dev/null @@ -1,52 +0,0 @@ -.spectrum--express.spectrum--medium{ - --spectrum-checkbox-control-size-small:14px; - --spectrum-checkbox-control-size-medium:16px; - --spectrum-checkbox-control-size-large:18px; - --spectrum-checkbox-control-size-extra-large:20px; - --spectrum-checkbox-top-to-control-small:5px; - --spectrum-checkbox-top-to-control-medium:8px; - --spectrum-checkbox-top-to-control-large:11px; - --spectrum-checkbox-top-to-control-extra-large:14px; - --spectrum-switch-control-width-small:25px; - --spectrum-switch-control-width-medium:28px; - --spectrum-switch-control-width-large:32px; - --spectrum-switch-control-width-extra-large:35px; - --spectrum-switch-control-height-small:14px; - --spectrum-switch-control-height-medium:16px; - --spectrum-switch-control-height-large:18px; - --spectrum-switch-control-height-extra-large:20px; - --spectrum-switch-top-to-control-small:5px; - --spectrum-switch-top-to-control-medium:8px; - --spectrum-switch-top-to-control-large:11px; - --spectrum-switch-top-to-control-extra-large:14px; - --spectrum-radio-button-control-size-small:14px; - --spectrum-radio-button-control-size-medium:16px; - --spectrum-radio-button-control-size-large:18px; - --spectrum-radio-button-control-size-extra-large:20px; - --spectrum-radio-button-top-to-control-small:5px; - --spectrum-radio-button-top-to-control-medium:8px; - --spectrum-radio-button-top-to-control-large:11px; - --spectrum-radio-button-top-to-control-extra-large:14px; - --spectrum-slider-control-height-small:18px; - --spectrum-slider-control-height-medium:20px; - --spectrum-slider-control-height-large:22px; - --spectrum-slider-control-height-extra-large:24px; - --spectrum-slider-handle-size-small:18px; - --spectrum-slider-handle-size-medium:20px; - --spectrum-slider-handle-size-large:22px; - --spectrum-slider-handle-size-extra-large:24px; - --spectrum-slider-handle-border-width-down-small:var(--spectrum-border-width-200); - --spectrum-slider-handle-border-width-down-medium:var(--spectrum-border-width-200); - --spectrum-slider-handle-border-width-down-large:var(--spectrum-border-width-200); - --spectrum-slider-handle-border-width-down-extra-large:var(--spectrum-border-width-200); - --spectrum-slider-bottom-to-handle-small:3px; - --spectrum-slider-bottom-to-handle-medium:6px; - --spectrum-slider-bottom-to-handle-large:9px; - --spectrum-slider-bottom-to-handle-extra-large:12px; - --spectrum-corner-radius-75:3px; - --spectrum-corner-radius-100:6px; - --spectrum-corner-radius-200:12px; - --spectrum-drop-shadow-x:0px; - --spectrum-drop-shadow-y:4px; - --spectrum-drop-shadow-blur:16px; -} diff --git a/tokens/dist/css/global-vars.css b/tokens/dist/css/global-vars.css index b80512bd452..26f5c66e237 100644 --- a/tokens/dist/css/global-vars.css +++ b/tokens/dist/css/global-vars.css @@ -4,11 +4,21 @@ --spectrum-static-black-focus-indicator-color:var(--spectrum-black); --spectrum-overlay-color:var(--spectrum-black); --spectrum-opacity-disabled:0.3; + --spectrum-background-base-color:var(--spectrum-gray-25); + --spectrum-background-layer-1-color:var(--spectrum-gray-50); + --spectrum-neutral-background-color-default:var(--spectrum-gray-800); + --spectrum-neutral-background-color-hover:var(--spectrum-gray-900); + --spectrum-neutral-background-color-down:var(--spectrum-gray-900); + --spectrum-neutral-background-color-key-focus:var(--spectrum-gray-900); + --spectrum-neutral-background-color-selected-default:var(--spectrum-gray-800); + --spectrum-neutral-background-color-selected-hover:var(--spectrum-gray-900); + --spectrum-neutral-background-color-selected-down:var(--spectrum-gray-900); + --spectrum-neutral-background-color-selected-key-focus:var(--spectrum-gray-900); --spectrum-neutral-subdued-content-color-selected:var(--spectrum-neutral-subdued-content-color-down); --spectrum-accent-content-color-selected:var(--spectrum-accent-content-color-down); - --spectrum-disabled-background-color:var(--spectrum-gray-200); - --spectrum-disabled-static-white-background-color:var(--spectrum-transparent-white-200); - --spectrum-disabled-static-black-background-color:var(--spectrum-transparent-black-200); + --spectrum-disabled-background-color:var(--spectrum-gray-100); + --spectrum-disabled-static-white-background-color:var(--spectrum-transparent-white-100); + --spectrum-disabled-static-black-background-color:var(--spectrum-transparent-black-100); --spectrum-background-opacity-default:0; --spectrum-background-opacity-hover:0.1; --spectrum-background-opacity-down:0.1; @@ -21,19 +31,19 @@ --spectrum-neutral-content-color-key-focus:var(--spectrum-gray-900); --spectrum-neutral-subdued-content-color-default:var(--spectrum-gray-700); --spectrum-neutral-subdued-content-color-hover:var(--spectrum-gray-800); - --spectrum-neutral-subdued-content-color-down:var(--spectrum-gray-900); + --spectrum-neutral-subdued-content-color-down:var(--spectrum-gray-800); --spectrum-neutral-subdued-content-color-key-focus:var(--spectrum-gray-800); --spectrum-accent-content-color-default:var(--spectrum-accent-color-900); --spectrum-accent-content-color-hover:var(--spectrum-accent-color-1000); - --spectrum-accent-content-color-down:var(--spectrum-accent-color-1100); + --spectrum-accent-content-color-down:var(--spectrum-accent-color-1000); --spectrum-accent-content-color-key-focus:var(--spectrum-accent-color-1000); --spectrum-negative-content-color-default:var(--spectrum-negative-color-900); --spectrum-negative-content-color-hover:var(--spectrum-negative-color-1000); - --spectrum-negative-content-color-down:var(--spectrum-negative-color-1100); + --spectrum-negative-content-color-down:var(--spectrum-negative-color-1000); --spectrum-negative-content-color-key-focus:var(--spectrum-negative-color-1000); --spectrum-disabled-content-color:var(--spectrum-gray-400); - --spectrum-disabled-static-white-content-color:var(--spectrum-transparent-white-500); - --spectrum-disabled-static-black-content-color:var(--spectrum-transparent-black-500); + --spectrum-disabled-static-white-content-color:var(--spectrum-transparent-white-400); + --spectrum-disabled-static-black-content-color:var(--spectrum-transparent-black-400); --spectrum-disabled-border-color:var(--spectrum-gray-300); --spectrum-disabled-static-white-border-color:var(--spectrum-transparent-white-300); --spectrum-disabled-static-black-border-color:var(--spectrum-transparent-black-300); @@ -52,11 +62,13 @@ --spectrum-thumbnail-opacity-disabled:var(--spectrum-opacity-disabled); --spectrum-opacity-checkerboard-square-light:var(--spectrum-white); --spectrum-avatar-opacity-disabled:var(--spectrum-opacity-disabled); - --spectrum-color-area-border-color:var(--spectrum-gray-900); + --spectrum-color-area-border-color:var(--spectrum-gray-1000); --spectrum-color-area-border-opacity:0.1; - --spectrum-color-slider-border-color:var(--spectrum-gray-900); + --spectrum-color-slider-border-color:var(--spectrum-gray-1000); --spectrum-color-slider-border-opacity:0.1; --spectrum-color-loupe-drop-shadow-color:var(--spectrum-transparent-black-300); + --spectrum-color-loupe-drop-shadow-y:2px; + --spectrum-color-loupe-drop-shadow-blur:8px; --spectrum-color-loupe-inner-border:var(--spectrum-transparent-black-200); --spectrum-color-loupe-outer-border:var(--spectrum-white); --spectrum-card-selection-background-color:var(--spectrum-gray-100); @@ -83,65 +95,91 @@ --spectrum-table-selected-row-background-opacity-non-emphasized-hover:0.15; --spectrum-white-rgb:255, 255, 255; --spectrum-white:rgba(var(--spectrum-white-rgb)); + --spectrum-transparent-white-25-rgb:255, 255, 255; + --spectrum-transparent-white-25-opacity:0; + --spectrum-transparent-white-25:rgba(var(--spectrum-transparent-white-25-rgb), var(--spectrum-transparent-white-25-opacity)); + --spectrum-transparent-white-50-rgb:255, 255, 255; + --spectrum-transparent-white-50-opacity:0.04; + --spectrum-transparent-white-50:rgba(var(--spectrum-transparent-white-50-rgb), var(--spectrum-transparent-white-50-opacity)); + --spectrum-transparent-white-75-rgb:255, 255, 255; + --spectrum-transparent-white-75-opacity:0.07; + --spectrum-transparent-white-75:rgba(var(--spectrum-transparent-white-75-rgb), var(--spectrum-transparent-white-75-opacity)); --spectrum-transparent-white-100-rgb:255, 255, 255; - --spectrum-transparent-white-100-opacity:0; + --spectrum-transparent-white-100-opacity:0.11; --spectrum-transparent-white-100:rgba(var(--spectrum-transparent-white-100-rgb), var(--spectrum-transparent-white-100-opacity)); --spectrum-transparent-white-200-rgb:255, 255, 255; - --spectrum-transparent-white-200-opacity:0.1; + --spectrum-transparent-white-200-opacity:0.14; --spectrum-transparent-white-200:rgba(var(--spectrum-transparent-white-200-rgb), var(--spectrum-transparent-white-200-opacity)); --spectrum-transparent-white-300-rgb:255, 255, 255; - --spectrum-transparent-white-300-opacity:0.25; + --spectrum-transparent-white-300-opacity:0.17; --spectrum-transparent-white-300:rgba(var(--spectrum-transparent-white-300-rgb), var(--spectrum-transparent-white-300-opacity)); --spectrum-transparent-white-400-rgb:255, 255, 255; - --spectrum-transparent-white-400-opacity:0.4; + --spectrum-transparent-white-400-opacity:0.21; --spectrum-transparent-white-400:rgba(var(--spectrum-transparent-white-400-rgb), var(--spectrum-transparent-white-400-opacity)); --spectrum-transparent-white-500-rgb:255, 255, 255; - --spectrum-transparent-white-500-opacity:0.55; + --spectrum-transparent-white-500-opacity:0.39; --spectrum-transparent-white-500:rgba(var(--spectrum-transparent-white-500-rgb), var(--spectrum-transparent-white-500-opacity)); --spectrum-transparent-white-600-rgb:255, 255, 255; - --spectrum-transparent-white-600-opacity:0.7; + --spectrum-transparent-white-600-opacity:0.51; --spectrum-transparent-white-600:rgba(var(--spectrum-transparent-white-600-rgb), var(--spectrum-transparent-white-600-opacity)); --spectrum-transparent-white-700-rgb:255, 255, 255; - --spectrum-transparent-white-700-opacity:0.8; + --spectrum-transparent-white-700-opacity:0.66; --spectrum-transparent-white-700:rgba(var(--spectrum-transparent-white-700-rgb), var(--spectrum-transparent-white-700-opacity)); --spectrum-transparent-white-800-rgb:255, 255, 255; - --spectrum-transparent-white-800-opacity:0.9; + --spectrum-transparent-white-800-opacity:0.85; --spectrum-transparent-white-800:rgba(var(--spectrum-transparent-white-800-rgb), var(--spectrum-transparent-white-800-opacity)); --spectrum-transparent-white-900-rgb:255, 255, 255; - --spectrum-transparent-white-900:rgba(var(--spectrum-transparent-white-900-rgb)); + --spectrum-transparent-white-900-opacity:0.94; + --spectrum-transparent-white-900:rgba(var(--spectrum-transparent-white-900-rgb), var(--spectrum-transparent-white-900-opacity)); + --spectrum-transparent-white-1000-rgb:255, 255, 255; + --spectrum-transparent-white-1000:rgba(var(--spectrum-transparent-white-1000-rgb)); --spectrum-black-rgb:0, 0, 0; --spectrum-black:rgba(var(--spectrum-black-rgb)); + --spectrum-transparent-black-25-rgb:0, 0, 0; + --spectrum-transparent-black-25-opacity:0; + --spectrum-transparent-black-25:rgba(var(--spectrum-transparent-black-25-rgb), var(--spectrum-transparent-black-25-opacity)); + --spectrum-transparent-black-50-rgb:0, 0, 0; + --spectrum-transparent-black-50-opacity:0.03; + --spectrum-transparent-black-50:rgba(var(--spectrum-transparent-black-50-rgb), var(--spectrum-transparent-black-50-opacity)); + --spectrum-transparent-black-75-rgb:0, 0, 0; + --spectrum-transparent-black-75-opacity:0.05; + --spectrum-transparent-black-75:rgba(var(--spectrum-transparent-black-75-rgb), var(--spectrum-transparent-black-75-opacity)); --spectrum-transparent-black-100-rgb:0, 0, 0; - --spectrum-transparent-black-100-opacity:0; + --spectrum-transparent-black-100-opacity:0.09; --spectrum-transparent-black-100:rgba(var(--spectrum-transparent-black-100-rgb), var(--spectrum-transparent-black-100-opacity)); --spectrum-transparent-black-200-rgb:0, 0, 0; - --spectrum-transparent-black-200-opacity:0.1; + --spectrum-transparent-black-200-opacity:0.12; --spectrum-transparent-black-200:rgba(var(--spectrum-transparent-black-200-rgb), var(--spectrum-transparent-black-200-opacity)); --spectrum-transparent-black-300-rgb:0, 0, 0; - --spectrum-transparent-black-300-opacity:0.25; + --spectrum-transparent-black-300-opacity:0.15; --spectrum-transparent-black-300:rgba(var(--spectrum-transparent-black-300-rgb), var(--spectrum-transparent-black-300-opacity)); --spectrum-transparent-black-400-rgb:0, 0, 0; - --spectrum-transparent-black-400-opacity:0.4; + --spectrum-transparent-black-400-opacity:0.22; --spectrum-transparent-black-400:rgba(var(--spectrum-transparent-black-400-rgb), var(--spectrum-transparent-black-400-opacity)); --spectrum-transparent-black-500-rgb:0, 0, 0; - --spectrum-transparent-black-500-opacity:0.55; + --spectrum-transparent-black-500-opacity:0.44; --spectrum-transparent-black-500:rgba(var(--spectrum-transparent-black-500-rgb), var(--spectrum-transparent-black-500-opacity)); --spectrum-transparent-black-600-rgb:0, 0, 0; - --spectrum-transparent-black-600-opacity:0.7; + --spectrum-transparent-black-600-opacity:0.56; --spectrum-transparent-black-600:rgba(var(--spectrum-transparent-black-600-rgb), var(--spectrum-transparent-black-600-opacity)); --spectrum-transparent-black-700-rgb:0, 0, 0; - --spectrum-transparent-black-700-opacity:0.8; + --spectrum-transparent-black-700-opacity:0.69; --spectrum-transparent-black-700:rgba(var(--spectrum-transparent-black-700-rgb), var(--spectrum-transparent-black-700-opacity)); --spectrum-transparent-black-800-rgb:0, 0, 0; - --spectrum-transparent-black-800-opacity:0.9; + --spectrum-transparent-black-800-opacity:0.84; --spectrum-transparent-black-800:rgba(var(--spectrum-transparent-black-800-rgb), var(--spectrum-transparent-black-800-opacity)); --spectrum-transparent-black-900-rgb:0, 0, 0; - --spectrum-transparent-black-900:rgba(var(--spectrum-transparent-black-900-rgb)); + --spectrum-transparent-black-900-opacity:0.93; + --spectrum-transparent-black-900:rgba(var(--spectrum-transparent-black-900-rgb), var(--spectrum-transparent-black-900-opacity)); + --spectrum-transparent-black-1000-rgb:0, 0, 0; + --spectrum-transparent-black-1000:rgba(var(--spectrum-transparent-black-1000-rgb)); --spectrum-icon-color-inverse:var(--spectrum-gray-50); --spectrum-icon-color-primary-default:var(--spectrum-neutral-content-color-default); - --spectrum-asterisk-icon-size-75:8px; --spectrum-radio-button-selection-indicator:4px; --spectrum-field-label-top-margin-small:0px; + --spectrum-field-label-top-margin-medium:0px; + --spectrum-field-label-top-margin-large:0px; + --spectrum-field-label-top-margin-extra-large:0px; --spectrum-field-label-to-component:0px; --spectrum-help-text-to-component:0px; --spectrum-status-light-dot-size-small:8px; @@ -166,7 +204,10 @@ --spectrum-popover-tip-height:8px; --spectrum-menu-item-label-to-description:1px; --spectrum-menu-item-section-divider-height:8px; + --spectrum-slider-track-thickness:2px; + --spectrum-slider-handle-gap:4px; --spectrum-picker-minimum-width-multiplier:2; + --spectrum-picker-border-width:var(--spectrum-border-width-100); --spectrum-picker-end-edge-to-disclousure-icon-quiet:var(--spectrum-picker-end-edge-to-disclosure-icon-quiet); --spectrum-picker-end-edge-to-disclosure-icon-quiet:0px; --spectrum-text-field-minimum-width-multiplier:1.5; @@ -186,21 +227,19 @@ --spectrum-alert-banner-to-top-text:var(--spectrum-alert-banner-top-to-text); --spectrum-alert-banner-to-bottom-text:var(--spectrum-alert-banner-bottom-to-text); --spectrum-color-area-border-width:var(--spectrum-border-width-100); - --spectrum-color-area-border-rounding:var(--spectrum-corner-radius-100); + --spectrum-color-area-border-rounding:var(--spectrum-corner-radius-medium-size-small); --spectrum-color-wheel-color-area-margin:12px; --spectrum-color-slider-border-width:1px; - --spectrum-color-slider-border-rounding:4px; + --spectrum-color-slider-border-rounding:var(--spectrum-corner-radius-medium-size-small); --spectrum-floating-action-button-drop-shadow-blur:12px; --spectrum-floating-action-button-drop-shadow-y:4px; --spectrum-illustrated-message-maximum-width:380px; - --spectrum-search-field-minimum-width-multiplier:3; + --spectrum-search-field-minimum-width-multiplier:4; --spectrum-color-loupe-height:64px; --spectrum-color-loupe-width:48px; --spectrum-color-loupe-bottom-to-color-handle:12px; --spectrum-color-loupe-outer-border-width:var(--spectrum-border-width-200); --spectrum-color-loupe-inner-border-width:1px; - --spectrum-color-loupe-drop-shadow-y:2px; - --spectrum-color-loupe-drop-shadow-blur:8px; --spectrum-card-minimum-width:100px; --spectrum-card-preview-minimum-height:130px; --spectrum-card-selection-background-size:40px; @@ -250,11 +289,84 @@ --spectrum-in-field-button-width-stacked-medium:28px; --spectrum-in-field-button-width-stacked-large:36px; --spectrum-in-field-button-width-stacked-extra-large:44px; + --spectrum-in-field-button-fill-stacked-inner-border-rounding:0px; + --spectrum-in-field-button-edge-to-fill:0px; + --spectrum-in-field-button-stacked-inner-edge-to-fill:0px; --spectrum-in-field-button-edge-to-disclosure-icon-stacked-small:7px; --spectrum-in-field-button-edge-to-disclosure-icon-stacked-medium:9px; --spectrum-in-field-button-edge-to-disclosure-icon-stacked-large:13px; --spectrum-in-field-button-edge-to-disclosure-icon-stacked-extra-large:16px; --spectrum-in-field-button-outer-edge-to-disclosure-icon-stacked-small:3px; + --spectrum-in-field-button-outer-edge-to-disclosure-icon-stacked-medium:3px; + --spectrum-in-field-button-outer-edge-to-disclosure-icon-stacked-large:4px; + --spectrum-in-field-button-outer-edge-to-disclosure-icon-stacked-extra-large:5px; + --spectrum-in-field-button-inner-edge-to-disclosure-icon-stacked-small:var(--spectrum-in-field-button-outer-edge-to-disclosure-icon-stacked-small); + --spectrum-in-field-button-inner-edge-to-disclosure-icon-stacked-medium:var(--spectrum-in-field-button-outer-edge-to-disclosure-icon-stacked-medium); + --spectrum-in-field-button-inner-edge-to-disclosure-icon-stacked-large:var(--spectrum-in-field-button-outer-edge-to-disclosure-icon-stacked-large); + --spectrum-in-field-button-inner-edge-to-disclosure-icon-stacked-extra-large:var(--spectrum-in-field-button-outer-edge-to-disclosure-icon-stacked-extra-large); + --spectrum-asterisk-icon-size-75:8px; + --spectrum-divider-vertical-minimum-height:200px; + --spectrum-divider-horizontal-minimum-width:200px; + --spectrum-tooltip-tip-corner-radius:1px; + --spectrum-tag-minimum-width-multiplier:1; + --spectrum-tag-maximum-width-multiplier:7; + --spectrum-title-cjk-emphasized-font-style:var(--spectrum-default-font-style); + --spectrum-title-cjk-emphasized-font-weight:var(--spectrum-extra-bold-font-weight); + --spectrum-title-cjk-font-family:var(--spectrum-cjk-font-family); + --spectrum-title-cjk-font-style:var(--spectrum-default-font-style); + --spectrum-title-cjk-font-weight:var(--spectrum-bold-font-weight); + --spectrum-title-cjk-line-height:var(--spectrum-cjk-line-height-100); + --spectrum-title-cjk-size-l:var(--spectrum-font-size-200); + --spectrum-title-cjk-size-m:var(--spectrum-font-size-100); + --spectrum-title-cjk-size-s:var(--spectrum-font-size-75); + --spectrum-title-cjk-size-xl:var(--spectrum-font-size-300); + --spectrum-title-cjk-size-xs:var(--spectrum-font-size-50); + --spectrum-title-cjk-size-xxl:var(--spectrum-font-size-400); + --spectrum-title-cjk-size-xxxl:var(--spectrum-font-size-500); + --spectrum-title-cjk-strong-emphasized-font-style:var(--spectrum-default-font-style); + --spectrum-title-cjk-strong-emphasized-font-weight:var(--spectrum-extra-bold-font-weight); + --spectrum-title-cjk-strong-font-style:var(--spectrum-default-font-style); + --spectrum-title-cjk-strong-font-weight:var(--spectrum-extra-bold-font-weight); + --spectrum-title-line-height:var(--spectrum-line-height-100); + --spectrum-title-margin-bottom-multiplier:0.25; + --spectrum-title-margin-top-multiplier:0.88888889; + --spectrum-title-sans-serif-emphasized-font-style:var(--spectrum-italic-font-style); + --spectrum-title-sans-serif-emphasized-font-weight:var(--spectrum-bold-font-weight); + --spectrum-title-sans-serif-font-family:var(--spectrum-sans-serif-font-family); + --spectrum-title-sans-serif-font-style:var(--spectrum-default-font-style); + --spectrum-title-sans-serif-font-weight:var(--spectrum-bold-font-weight); + --spectrum-title-sans-serif-strong-emphasized-font-style:var(--spectrum-italic-font-style); + --spectrum-title-sans-serif-strong-emphasized-font-weight:var(--spectrum-extra-bold-font-weight); + --spectrum-title-sans-serif-strong-font-style:var(--spectrum-default-font-style); + --spectrum-title-sans-serif-strong-font-weight:var(--spectrum-extra-bold-font-weight); + --spectrum-title-serif-emphasized-font-style:var(--spectrum-italic-font-style); + --spectrum-title-serif-emphasized-font-weight:var(--spectrum-bold-font-weight); + --spectrum-title-serif-font-family:var(--spectrum-serif-font-family); + --spectrum-title-serif-font-style:var(--spectrum-default-font-style); + --spectrum-title-serif-font-weight:var(--spectrum-bold-font-weight); + --spectrum-title-serif-strong-emphasized-font-style:var(--spectrum-italic-font-style); + --spectrum-title-serif-strong-emphasized-font-weight:var(--spectrum-black-font-weight); + --spectrum-title-serif-strong-font-style:var(--spectrum-default-font-style); + --spectrum-title-serif-strong-font-weight:var(--spectrum-black-font-weight); + --spectrum-title-size-l:var(--spectrum-font-size-300); + --spectrum-title-size-m:var(--spectrum-font-size-200); + --spectrum-title-size-s:var(--spectrum-font-size-100); + --spectrum-title-size-xl:var(--spectrum-font-size-400); + --spectrum-title-size-xs:var(--spectrum-font-size-75); + --spectrum-title-size-xxl:var(--spectrum-font-size-500); + --spectrum-title-size-xxxl:var(--spectrum-font-size-600); + --spectrum-corner-radius-0:0px; + --spectrum-corner-radius-75:3px; + --spectrum-corner-radius-100:4px; + --spectrum-corner-radius-200:5px; + --spectrum-corner-radius-300:6px; + --spectrum-corner-radius-400:7px; + --spectrum-corner-radius-500:8px; + --spectrum-corner-radius-600:9px; + --spectrum-corner-radius-700:10px; + --spectrum-corner-radius-800:16px; + --spectrum-corner-radius-1000:0.5; + --spectrum-drop-shadow-x:0px; --spectrum-android-elevation:2dp; --spectrum-spacing-50:2px; --spectrum-spacing-75:4px; @@ -270,6 +382,7 @@ --spectrum-spacing-1000:96px; --spectrum-focus-indicator-thickness:2px; --spectrum-focus-indicator-gap:2px; + --spectrum-border-width-100:1px; --spectrum-border-width-200:2px; --spectrum-border-width-400:4px; --spectrum-field-edge-to-text-quiet:0px; @@ -277,8 +390,46 @@ --spectrum-field-edge-to-border-quiet:0px; --spectrum-field-edge-to-alert-icon-quiet:0px; --spectrum-field-edge-to-validation-icon-quiet:0px; + --spectrum-side-label-character-count-top-margin-small:0px; + --spectrum-side-label-character-count-top-margin-medium:0px; + --spectrum-side-label-character-count-top-margin-large:0px; + --spectrum-side-label-character-count-top-margin-extra-large:0px; --spectrum-text-underline-thickness:1px; --spectrum-text-underline-gap:1px; + --spectrum-component-size-width-ratio-down:0.3333; + --spectrum-component-size-minimum-perspective-down:24px; + --spectrum-component-size-difference-down:-2px; + --spectrum-corner-radius-none:var(--spectrum-corner-radius-0); + --spectrum-corner-radius-small-default:var(--spectrum-corner-radius-100); + --spectrum-corner-radius-medium-default:var(--spectrum-corner-radius-500); + --spectrum-corner-radius-large-default:var(--spectrum-corner-radius-700); + --spectrum-corner-radius-extra-large-default:var(--spectrum-corner-radius-800); + --spectrum-corner-radius-full:var(--spectrum-corner-radius-1000); + --spectrum-corner-radius-small-size-small:var(--spectrum-corner-radius-75); + --spectrum-corner-radius-small-size-medium:var(--spectrum-corner-radius-100); + --spectrum-corner-radius-small-size-large:var(--spectrum-corner-radius-200); + --spectrum-corner-radius-small-size-extra-large:var(--spectrum-corner-radius-300); + --spectrum-corner-radius-medium-size-extra-small:var(--spectrum-corner-radius-300); + --spectrum-corner-radius-medium-size-small:var(--spectrum-corner-radius-400); + --spectrum-corner-radius-medium-size-medium:var(--spectrum-corner-radius-500); + --spectrum-corner-radius-medium-size-large:var(--spectrum-corner-radius-600); + --spectrum-corner-radius-medium-size-extra-large:var(--spectrum-corner-radius-700); + --spectrum-accent-color-100:var(--spectrum-blue-100); + --spectrum-accent-color-200:var(--spectrum-blue-200); + --spectrum-accent-color-300:var(--spectrum-blue-300); + --spectrum-accent-color-400:var(--spectrum-blue-400); + --spectrum-accent-color-500:var(--spectrum-blue-500); + --spectrum-accent-color-600:var(--spectrum-blue-600); + --spectrum-accent-color-700:var(--spectrum-blue-700); + --spectrum-accent-color-800:var(--spectrum-blue-800); + --spectrum-accent-color-900:var(--spectrum-blue-900); + --spectrum-accent-color-1000:var(--spectrum-blue-1000); + --spectrum-accent-color-1100:var(--spectrum-blue-1100); + --spectrum-accent-color-1200:var(--spectrum-blue-1200); + --spectrum-accent-color-1300:var(--spectrum-blue-1300); + --spectrum-accent-color-1400:var(--spectrum-blue-1400); + --spectrum-accent-color-1500:var(--spectrum-blue-1500); + --spectrum-accent-color-1600:var(--spectrum-blue-1600); --spectrum-informative-color-100:var(--spectrum-blue-100); --spectrum-informative-color-200:var(--spectrum-blue-200); --spectrum-informative-color-300:var(--spectrum-blue-300); @@ -293,6 +444,8 @@ --spectrum-informative-color-1200:var(--spectrum-blue-1200); --spectrum-informative-color-1300:var(--spectrum-blue-1300); --spectrum-informative-color-1400:var(--spectrum-blue-1400); + --spectrum-informative-color-1500:var(--spectrum-blue-1500); + --spectrum-informative-color-1600:var(--spectrum-blue-1600); --spectrum-negative-color-100:var(--spectrum-red-100); --spectrum-negative-color-200:var(--spectrum-red-200); --spectrum-negative-color-300:var(--spectrum-red-300); @@ -307,6 +460,8 @@ --spectrum-negative-color-1200:var(--spectrum-red-1200); --spectrum-negative-color-1300:var(--spectrum-red-1300); --spectrum-negative-color-1400:var(--spectrum-red-1400); + --spectrum-negative-color-1500:var(--spectrum-red-1500); + --spectrum-negative-color-1600:var(--spectrum-red-1600); --spectrum-notice-color-100:var(--spectrum-orange-100); --spectrum-notice-color-200:var(--spectrum-orange-200); --spectrum-notice-color-300:var(--spectrum-orange-300); @@ -321,6 +476,8 @@ --spectrum-notice-color-1200:var(--spectrum-orange-1200); --spectrum-notice-color-1300:var(--spectrum-orange-1300); --spectrum-notice-color-1400:var(--spectrum-orange-1400); + --spectrum-notice-color-1500:var(--spectrum-orange-1500); + --spectrum-notice-color-1600:var(--spectrum-orange-1600); --spectrum-positive-color-100:var(--spectrum-green-100); --spectrum-positive-color-200:var(--spectrum-green-200); --spectrum-positive-color-300:var(--spectrum-green-300); @@ -335,6 +492,12 @@ --spectrum-positive-color-1200:var(--spectrum-green-1200); --spectrum-positive-color-1300:var(--spectrum-green-1300); --spectrum-positive-color-1400:var(--spectrum-green-1400); + --spectrum-positive-color-1500:var(--spectrum-green-1500); + --spectrum-positive-color-1600:var(--spectrum-green-1600); + --spectrum-negative-subdued-background-color-default:var(--spectrum-negative-color-200); + --spectrum-negative-subdued-background-color-hover:var(--spectrum-negative-color-300); + --spectrum-negative-subdued-background-color-down:var(--spectrum-negative-color-300); + --spectrum-negative-subdued-background-color-key-focus:var(--spectrum-negative-color-300); --spectrum-default-font-family:var(--spectrum-sans-serif-font-family); --spectrum-sans-serif-font-family:Adobe Clean; --spectrum-serif-font-family:Adobe Clean Serif; @@ -361,8 +524,11 @@ --spectrum-heading-serif-light-font-style:var(--spectrum-default-font-style); --spectrum-heading-cjk-light-font-weight:var(--spectrum-light-font-weight); --spectrum-heading-cjk-light-font-style:var(--spectrum-default-font-style); + --spectrum-heading-sans-serif-font-weight:var(--spectrum-bold-font-weight); --spectrum-heading-sans-serif-font-style:var(--spectrum-default-font-style); + --spectrum-heading-serif-font-weight:var(--spectrum-bold-font-weight); --spectrum-heading-serif-font-style:var(--spectrum-default-font-style); + --spectrum-heading-cjk-font-weight:var(--spectrum-extra-bold-font-weight); --spectrum-heading-cjk-font-style:var(--spectrum-default-font-style); --spectrum-heading-sans-serif-heavy-font-weight:var(--spectrum-black-font-weight); --spectrum-heading-sans-serif-heavy-font-style:var(--spectrum-default-font-style); @@ -394,7 +560,9 @@ --spectrum-heading-serif-light-emphasized-font-style:var(--spectrum-italic-font-style); --spectrum-heading-cjk-light-emphasized-font-weight:var(--spectrum-regular-font-weight); --spectrum-heading-cjk-light-emphasized-font-style:var(--spectrum-default-font-style); + --spectrum-heading-sans-serif-emphasized-font-weight:var(--spectrum-bold-font-weight); --spectrum-heading-sans-serif-emphasized-font-style:var(--spectrum-italic-font-style); + --spectrum-heading-serif-emphasized-font-weight:var(--spectrum-bold-font-weight); --spectrum-heading-serif-emphasized-font-style:var(--spectrum-italic-font-style); --spectrum-heading-cjk-emphasized-font-weight:var(--spectrum-black-font-weight); --spectrum-heading-cjk-emphasized-font-style:var(--spectrum-default-font-style); diff --git a/tokens/dist/css/large-vars.css b/tokens/dist/css/large-vars.css index 411c827e0db..dfc0df03924 100644 --- a/tokens/dist/css/large-vars.css +++ b/tokens/dist/css/large-vars.css @@ -1,54 +1,32 @@ .spectrum--large{ - --spectrum-workflow-icon-size-50:18px; - --spectrum-workflow-icon-size-75:20px; - --spectrum-workflow-icon-size-100:22px; - --spectrum-workflow-icon-size-200:24px; - --spectrum-workflow-icon-size-300:28px; - --spectrum-arrow-icon-size-75:12px; - --spectrum-arrow-icon-size-100:14px; - --spectrum-arrow-icon-size-200:16px; - --spectrum-arrow-icon-size-300:16px; - --spectrum-arrow-icon-size-400:18px; - --spectrum-arrow-icon-size-500:22px; - --spectrum-arrow-icon-size-600:24px; - --spectrum-asterisk-icon-size-100:10px; - --spectrum-asterisk-icon-size-200:12px; - --spectrum-asterisk-icon-size-300:12px; - --spectrum-checkmark-icon-size-50:12px; - --spectrum-checkmark-icon-size-75:12px; - --spectrum-checkmark-icon-size-100:14px; - --spectrum-checkmark-icon-size-200:14px; - --spectrum-checkmark-icon-size-300:16px; - --spectrum-checkmark-icon-size-400:18px; - --spectrum-checkmark-icon-size-500:20px; - --spectrum-checkmark-icon-size-600:24px; - --spectrum-chevron-icon-size-50:8px; - --spectrum-chevron-icon-size-75:12px; - --spectrum-chevron-icon-size-100:14px; - --spectrum-chevron-icon-size-200:14px; - --spectrum-chevron-icon-size-300:16px; - --spectrum-chevron-icon-size-400:18px; - --spectrum-chevron-icon-size-500:20px; - --spectrum-chevron-icon-size-600:24px; - --spectrum-corner-triangle-icon-size-75:6px; - --spectrum-corner-triangle-icon-size-100:7px; - --spectrum-corner-triangle-icon-size-200:8px; - --spectrum-corner-triangle-icon-size-300:8px; - --spectrum-cross-icon-size-75:10px; - --spectrum-cross-icon-size-100:10px; - --spectrum-cross-icon-size-200:12px; - --spectrum-cross-icon-size-300:14px; - --spectrum-cross-icon-size-400:16px; - --spectrum-cross-icon-size-500:16px; - --spectrum-cross-icon-size-600:18px; - --spectrum-dash-icon-size-50:10px; - --spectrum-dash-icon-size-75:10px; - --spectrum-dash-icon-size-100:12px; - --spectrum-dash-icon-size-200:14px; - --spectrum-dash-icon-size-300:16px; - --spectrum-dash-icon-size-400:18px; - --spectrum-dash-icon-size-500:20px; - --spectrum-dash-icon-size-600:22px; + --spectrum-checkbox-control-size-small:16px; + --spectrum-checkbox-control-size-medium:18px; + --spectrum-checkbox-control-size-large:20px; + --spectrum-checkbox-control-size-extra-large:22px; + --spectrum-checkbox-top-to-control-small:7px; + --spectrum-checkbox-top-to-control-medium:11px; + --spectrum-checkbox-top-to-control-large:15px; + --spectrum-checkbox-top-to-control-extra-large:19px; + --spectrum-switch-control-width-small:30px; + --spectrum-switch-control-width-medium:34px; + --spectrum-switch-control-width-large:38px; + --spectrum-switch-control-width-extra-large:46px; + --spectrum-switch-control-height-small:18px; + --spectrum-switch-control-height-medium:20px; + --spectrum-switch-control-height-large:22px; + --spectrum-switch-control-height-extra-large:26px; + --spectrum-switch-top-to-control-small:7px; + --spectrum-switch-top-to-control-medium:11px; + --spectrum-switch-top-to-control-large:15px; + --spectrum-switch-top-to-control-extra-large:19px; + --spectrum-radio-button-control-size-small:16px; + --spectrum-radio-button-control-size-medium:18px; + --spectrum-radio-button-control-size-large:20px; + --spectrum-radio-button-control-size-extra-large:22px; + --spectrum-radio-button-top-to-control-small:7px; + --spectrum-radio-button-top-to-control-medium:11px; + --spectrum-radio-button-top-to-control-large:15px; + --spectrum-radio-button-top-to-control-extra-large:19px; --spectrum-field-label-text-to-asterisk-small:5px; --spectrum-field-label-text-to-asterisk-medium:5px; --spectrum-field-label-text-to-asterisk-large:6px; @@ -57,17 +35,14 @@ --spectrum-field-label-top-to-asterisk-medium:15px; --spectrum-field-label-top-to-asterisk-large:19px; --spectrum-field-label-top-to-asterisk-extra-large:24px; - --spectrum-field-label-top-margin-medium:5px; - --spectrum-field-label-top-margin-large:6px; - --spectrum-field-label-top-margin-extra-large:6px; --spectrum-field-label-to-component-quiet-small:-10px; --spectrum-field-label-to-component-quiet-medium:-10px; --spectrum-field-label-to-component-quiet-large:-15px; --spectrum-field-label-to-component-quiet-extra-large:-19px; - --spectrum-help-text-top-to-workflow-icon-small:5px; - --spectrum-help-text-top-to-workflow-icon-medium:4px; - --spectrum-help-text-top-to-workflow-icon-large:8px; - --spectrum-help-text-top-to-workflow-icon-extra-large:11px; + --spectrum-help-text-top-to-workflow-icon-small:var(--spectrum-component-top-to-workflow-icon-75); + --spectrum-help-text-top-to-workflow-icon-medium:var(--spectrum-component-top-to-workflow-icon-100); + --spectrum-help-text-top-to-workflow-icon-large:var(--spectrum-component-top-to-workflow-icon-200); + --spectrum-help-text-top-to-workflow-icon-extra-large:var(--spectrum-component-top-to-workflow-icon-300); --spectrum-status-light-dot-size-medium:10px; --spectrum-status-light-dot-size-large:12px; --spectrum-status-light-dot-size-extra-large:12px; @@ -78,8 +53,8 @@ --spectrum-action-button-edge-to-hold-icon-medium:5px; --spectrum-action-button-edge-to-hold-icon-large:6px; --spectrum-action-button-edge-to-hold-icon-extra-large:7px; - --spectrum-tooltip-tip-width:10px; - --spectrum-tooltip-tip-height:5px; + --spectrum-tooltip-tip-width:12px; + --spectrum-tooltip-tip-height:6px; --spectrum-tooltip-maximum-width:200px; --spectrum-progress-circle-size-small:20px; --spectrum-progress-circle-size-medium:40px; @@ -87,11 +62,11 @@ --spectrum-progress-circle-thickness-small:3px; --spectrum-progress-circle-thickness-medium:4px; --spectrum-progress-circle-thickness-large:5px; - --spectrum-toast-height:56px; + --spectrum-toast-height:60px; --spectrum-toast-maximum-width:420px; - --spectrum-toast-top-to-workflow-icon:17px; - --spectrum-toast-top-to-text:16px; - --spectrum-toast-bottom-to-text:19px; + --spectrum-toast-top-to-workflow-icon:20px; + --spectrum-toast-top-to-text:20px; + --spectrum-toast-bottom-to-text:22px; --spectrum-action-bar-height:56px; --spectrum-action-bar-top-to-item-counter:16px; --spectrum-swatch-size-extra-small:20px; @@ -124,6 +99,22 @@ --spectrum-menu-item-top-to-selected-icon-medium:13px; --spectrum-menu-item-top-to-selected-icon-large:17px; --spectrum-menu-item-top-to-selected-icon-extra-large:22px; + --spectrum-slider-control-height-small:18px; + --spectrum-slider-control-height-medium:20px; + --spectrum-slider-control-height-large:22px; + --spectrum-slider-control-height-extra-large:26px; + --spectrum-slider-handle-size-small:18px; + --spectrum-slider-handle-size-medium:20px; + --spectrum-slider-handle-size-large:22px; + --spectrum-slider-handle-size-extra-large:26px; + --spectrum-slider-handle-border-width-down-small:7px; + --spectrum-slider-handle-border-width-down-medium:8px; + --spectrum-slider-handle-border-width-down-large:9px; + --spectrum-slider-handle-border-width-down-extra-large:11px; + --spectrum-slider-bottom-to-handle-small:6px; + --spectrum-slider-bottom-to-handle-medium:10px; + --spectrum-slider-bottom-to-handle-large:14px; + --spectrum-slider-bottom-to-handle-extra-large:17px; --spectrum-slider-control-to-field-label-small:6px; --spectrum-slider-control-to-field-label-medium:10px; --spectrum-slider-control-to-field-label-large:14px; @@ -152,7 +143,8 @@ --spectrum-thumbnail-size-1000:70px; --spectrum-alert-dialog-title-size:var(--spectrum-heading-size-xs); --spectrum-alert-dialog-description-size:var(--spectrum-body-size-xs); - --spectrum-opacity-checkerboard-square-size:10px; + --spectrum-opacity-checkerboard-square-size:var(--spectrum-opacity-checkerboard-square-size-medium); + --spectrum-opacity-checkerboard-square-size-medium:10px; --spectrum-contextual-help-title-size:var(--spectrum-heading-size-xxs); --spectrum-contextual-help-body-size:var(--spectrum-body-size-xs); --spectrum-breadcrumbs-height-multiline:84px; @@ -348,14 +340,77 @@ --spectrum-side-navigation-with-icon-third-level-edge-to-text:77px; --spectrum-side-navigation-item-to-item:5px; --spectrum-side-navigation-item-to-header:30px; - --spectrum-side-navigation-header-to-item:10px; --spectrum-side-navigation-bottom-to-text:10px; --spectrum-tray-top-to-content-area:5px; - --spectrum-text-to-visual-50:8px; - --spectrum-text-to-visual-75:9px; - --spectrum-text-to-visual-100:10px; - --spectrum-text-to-visual-200:11px; - --spectrum-text-to-visual-300:13px; + --spectrum-arrow-icon-size-75:12px; + --spectrum-arrow-icon-size-100:14px; + --spectrum-arrow-icon-size-200:16px; + --spectrum-arrow-icon-size-300:16px; + --spectrum-arrow-icon-size-400:18px; + --spectrum-arrow-icon-size-500:22px; + --spectrum-arrow-icon-size-600:24px; + --spectrum-asterisk-icon-size-100:10px; + --spectrum-asterisk-icon-size-200:12px; + --spectrum-asterisk-icon-size-300:12px; + --spectrum-checkmark-icon-size-50:12px; + --spectrum-checkmark-icon-size-75:12px; + --spectrum-checkmark-icon-size-100:14px; + --spectrum-checkmark-icon-size-200:14px; + --spectrum-checkmark-icon-size-300:16px; + --spectrum-checkmark-icon-size-400:18px; + --spectrum-checkmark-icon-size-500:20px; + --spectrum-checkmark-icon-size-600:24px; + --spectrum-chevron-icon-size-50:8px; + --spectrum-chevron-icon-size-75:12px; + --spectrum-chevron-icon-size-100:14px; + --spectrum-chevron-icon-size-200:14px; + --spectrum-chevron-icon-size-300:16px; + --spectrum-chevron-icon-size-400:18px; + --spectrum-chevron-icon-size-500:20px; + --spectrum-chevron-icon-size-600:24px; + --spectrum-cross-icon-size-75:10px; + --spectrum-cross-icon-size-100:10px; + --spectrum-cross-icon-size-200:12px; + --spectrum-cross-icon-size-300:14px; + --spectrum-cross-icon-size-400:16px; + --spectrum-cross-icon-size-500:16px; + --spectrum-cross-icon-size-600:18px; + --spectrum-dash-icon-size-50:10px; + --spectrum-dash-icon-size-75:10px; + --spectrum-dash-icon-size-100:12px; + --spectrum-dash-icon-size-200:14px; + --spectrum-dash-icon-size-300:16px; + --spectrum-dash-icon-size-400:18px; + --spectrum-dash-icon-size-500:20px; + --spectrum-dash-icon-size-600:22px; + --spectrum-side-navigation-header-to-item:10px; + --spectrum-switch-handle-size-small:10px; + --spectrum-switch-handle-selected-size-small:12px; + --spectrum-switch-handle-selected-size-medium:14px; + --spectrum-switch-handle-selected-size-large:16px; + --spectrum-switch-handle-selected-size-extra-large:20px; + --spectrum-switch-handle-size-medium:12px; + --spectrum-switch-handle-size-large:14px; + --spectrum-switch-handle-size-extra-large:18px; + --spectrum-tag-label-to-clear-icon-small:10px; + --spectrum-tag-label-to-clear-icon-medium:15px; + --spectrum-tag-label-to-clear-icon-large:19px; + --spectrum-tag-edge-to-clear-icon-small:10px; + --spectrum-tag-edge-to-clear-icon-medium:15px; + --spectrum-tag-edge-to-clear-icon-large:19px; + --spectrum-opacity-checkerboard-square-size-small:5px; + --spectrum-drop-shadow-y:2px; + --spectrum-drop-shadow-blur:6px; + --spectrum-workflow-icon-size-50:16px; + --spectrum-workflow-icon-size-75:18px; + --spectrum-workflow-icon-size-100:24px; + --spectrum-workflow-icon-size-200:28px; + --spectrum-workflow-icon-size-300:30px; + --spectrum-text-to-visual-50:7px; + --spectrum-text-to-visual-75:7px; + --spectrum-text-to-visual-100:8px; + --spectrum-text-to-visual-200:9px; + --spectrum-text-to-visual-300:10px; --spectrum-text-to-control-75:11px; --spectrum-text-to-control-100:13px; --spectrum-text-to-control-200:14px; @@ -384,21 +439,21 @@ --spectrum-component-edge-to-visual-100:12px; --spectrum-component-edge-to-visual-200:16px; --spectrum-component-edge-to-visual-300:19px; - --spectrum-component-edge-to-visual-only-50:4px; - --spectrum-component-edge-to-visual-only-75:5px; - --spectrum-component-edge-to-visual-only-100:9px; - --spectrum-component-edge-to-visual-only-200:13px; - --spectrum-component-edge-to-visual-only-300:16px; + --spectrum-component-edge-to-visual-only-50:5px; + --spectrum-component-edge-to-visual-only-75:6px; + --spectrum-component-edge-to-visual-only-100:8px; + --spectrum-component-edge-to-visual-only-200:11px; + --spectrum-component-edge-to-visual-only-300:15px; --spectrum-component-edge-to-text-50:10px; --spectrum-component-edge-to-text-75:11px; --spectrum-component-edge-to-text-100:15px; --spectrum-component-edge-to-text-200:19px; --spectrum-component-edge-to-text-300:22px; - --spectrum-component-top-to-workflow-icon-50:4px; - --spectrum-component-top-to-workflow-icon-75:5px; - --spectrum-component-top-to-workflow-icon-100:9px; - --spectrum-component-top-to-workflow-icon-200:13px; - --spectrum-component-top-to-workflow-icon-300:16px; + --spectrum-component-top-to-workflow-icon-50:5px; + --spectrum-component-top-to-workflow-icon-75:6px; + --spectrum-component-top-to-workflow-icon-100:8px; + --spectrum-component-top-to-workflow-icon-200:11px; + --spectrum-component-top-to-workflow-icon-300:15px; --spectrum-component-top-to-text-50:4px; --spectrum-component-top-to-text-75:5px; --spectrum-component-top-to-text-100:8px; @@ -453,16 +508,13 @@ --spectrum-field-text-to-validation-icon-medium:15px; --spectrum-field-text-to-validation-icon-large:19px; --spectrum-field-text-to-validation-icon-extra-large:22px; - --spectrum-field-width:240px; + --spectrum-field-width:var(--spectrum-field-width-small); + --spectrum-field-width-small:240px; --spectrum-character-count-to-field-quiet-small:-4px; --spectrum-character-count-to-field-quiet-medium:-4px; --spectrum-character-count-to-field-quiet-large:-4px; --spectrum-character-count-to-field-quiet-extra-large:-5px; --spectrum-side-label-character-count-to-field:15px; - --spectrum-side-label-character-count-top-margin-small:5px; - --spectrum-side-label-character-count-top-margin-medium:10px; - --spectrum-side-label-character-count-top-margin-large:14px; - --spectrum-side-label-character-count-top-margin-extra-large:18px; --spectrum-disclosure-indicator-top-to-disclosure-icon-small:9px; --spectrum-disclosure-indicator-top-to-disclosure-icon-medium:13px; --spectrum-disclosure-indicator-top-to-disclosure-icon-large:17px; @@ -472,6 +524,13 @@ --spectrum-navigational-indicator-top-to-back-icon-large:16px; --spectrum-navigational-indicator-top-to-back-icon-extra-large:19px; --spectrum-color-control-track-width:30px; + --spectrum-corner-triangle-icon-size-75:6px; + --spectrum-corner-triangle-icon-size-100:7px; + --spectrum-corner-triangle-icon-size-200:8px; + --spectrum-corner-triangle-icon-size-300:8px; + --spectrum-field-width-medium:256px; + --spectrum-field-width-large:272px; + --spectrum-field-width-extra-large:288px; --spectrum-font-size-50:13px; --spectrum-font-size-75:15px; --spectrum-font-size-100:17px; diff --git a/tokens/dist/css/light-vars.css b/tokens/dist/css/light-vars.css index 43d7086ec86..dea87d6f185 100644 --- a/tokens/dist/css/light-vars.css +++ b/tokens/dist/css/light-vars.css @@ -3,32 +3,26 @@ --spectrum-drop-shadow-color-rgb:0, 0, 0; --spectrum-drop-shadow-color-opacity:0.15; --spectrum-drop-shadow-color:rgba(var(--spectrum-drop-shadow-color-rgb), var(--spectrum-drop-shadow-color-opacity)); - --spectrum-background-base-color:var(--spectrum-gray-200); - --spectrum-background-layer-1-color:var(--spectrum-gray-100); - --spectrum-background-layer-2-color:var(--spectrum-gray-50); - --spectrum-neutral-background-color-default:var(--spectrum-gray-800); - --spectrum-neutral-background-color-hover:var(--spectrum-gray-900); - --spectrum-neutral-background-color-down:var(--spectrum-gray-900); - --spectrum-neutral-background-color-key-focus:var(--spectrum-gray-900); - --spectrum-neutral-subdued-background-color-default:var(--spectrum-gray-600); - --spectrum-neutral-subdued-background-color-hover:var(--spectrum-gray-700); + --spectrum-background-layer-2-color:var(--spectrum-gray-25); + --spectrum-neutral-subdued-background-color-default:var(--spectrum-gray-700); + --spectrum-neutral-subdued-background-color-hover:var(--spectrum-gray-800); --spectrum-neutral-subdued-background-color-down:var(--spectrum-gray-800); - --spectrum-neutral-subdued-background-color-key-focus:var(--spectrum-gray-700); + --spectrum-neutral-subdued-background-color-key-focus:var(--spectrum-gray-800); --spectrum-accent-background-color-default:var(--spectrum-accent-color-900); --spectrum-accent-background-color-hover:var(--spectrum-accent-color-1000); - --spectrum-accent-background-color-down:var(--spectrum-accent-color-1100); + --spectrum-accent-background-color-down:var(--spectrum-accent-color-1000); --spectrum-accent-background-color-key-focus:var(--spectrum-accent-color-1000); --spectrum-informative-background-color-default:var(--spectrum-informative-color-900); --spectrum-informative-background-color-hover:var(--spectrum-informative-color-1000); - --spectrum-informative-background-color-down:var(--spectrum-informative-color-1100); + --spectrum-informative-background-color-down:var(--spectrum-informative-color-1000); --spectrum-informative-background-color-key-focus:var(--spectrum-informative-color-1000); --spectrum-negative-background-color-default:var(--spectrum-negative-color-900); --spectrum-negative-background-color-hover:var(--spectrum-negative-color-1000); - --spectrum-negative-background-color-down:var(--spectrum-negative-color-1100); + --spectrum-negative-background-color-down:var(--spectrum-negative-color-1000); --spectrum-negative-background-color-key-focus:var(--spectrum-negative-color-1000); --spectrum-positive-background-color-default:var(--spectrum-positive-color-900); --spectrum-positive-background-color-hover:var(--spectrum-positive-color-1000); - --spectrum-positive-background-color-down:var(--spectrum-positive-color-1100); + --spectrum-positive-background-color-down:var(--spectrum-positive-color-1000); --spectrum-positive-background-color-key-focus:var(--spectrum-positive-color-1000); --spectrum-notice-background-color-default:var(--spectrum-notice-color-600); --spectrum-gray-background-color-default:var(--spectrum-gray-700); @@ -65,393 +59,621 @@ --spectrum-purple-visual-color:var(--spectrum-purple-800); --spectrum-fuchsia-visual-color:var(--spectrum-fuchsia-800); --spectrum-magenta-visual-color:var(--spectrum-magenta-800); + --spectrum-background-elevated-color:var(--spectrum-gray-25); + --spectrum-background-pasteboard-color:var(--spectrum-gray-100); + --spectrum-brown-visual-color:var(--spectrum-brown-800); + --spectrum-cinnamon-visual-color:var(--spectrum-cinnamon-800); + --spectrum-pink-visual-color:var(--spectrum-pink-800); + --spectrum-silver-visual-color:var(--spectrum-silver-800); + --spectrum-turquoise-visual-color:var(--spectrum-turquoise-800); + --spectrum-brown-background-color-default:var(--spectrum-brown-900); + --spectrum-cinnamon-background-color-default:var(--spectrum-cinnamon-900); + --spectrum-pink-background-color-default:var(--spectrum-pink-900); + --spectrum-silver-background-color-default:var(--spectrum-silver-900); + --spectrum-turquoise-background-color-default:var(--spectrum-turquoise-900); --spectrum-opacity-checkerboard-square-dark:var(--spectrum-gray-200); - --spectrum-gray-50-rgb:255, 255, 255; + --spectrum-gray-25-rgb:255, 255, 255; + --spectrum-gray-25:rgba(var(--spectrum-gray-25-rgb)); + --spectrum-gray-50-rgb:248, 248, 248; --spectrum-gray-50:rgba(var(--spectrum-gray-50-rgb)); - --spectrum-gray-75-rgb:253, 253, 253; + --spectrum-gray-75-rgb:243, 243, 243; --spectrum-gray-75:rgba(var(--spectrum-gray-75-rgb)); - --spectrum-gray-100-rgb:248, 248, 248; + --spectrum-gray-100-rgb:233, 233, 233; --spectrum-gray-100:rgba(var(--spectrum-gray-100-rgb)); - --spectrum-gray-200-rgb:230, 230, 230; + --spectrum-gray-200-rgb:225, 225, 225; --spectrum-gray-200:rgba(var(--spectrum-gray-200-rgb)); - --spectrum-gray-300-rgb:213, 213, 213; + --spectrum-gray-300-rgb:218, 218, 218; --spectrum-gray-300:rgba(var(--spectrum-gray-300-rgb)); - --spectrum-gray-400-rgb:177, 177, 177; + --spectrum-gray-400-rgb:198, 198, 198; --spectrum-gray-400:rgba(var(--spectrum-gray-400-rgb)); - --spectrum-gray-500-rgb:144, 144, 144; + --spectrum-gray-500-rgb:143, 143, 143; --spectrum-gray-500:rgba(var(--spectrum-gray-500-rgb)); - --spectrum-gray-600-rgb:109, 109, 109; + --spectrum-gray-600-rgb:113, 113, 113; --spectrum-gray-600:rgba(var(--spectrum-gray-600-rgb)); - --spectrum-gray-700-rgb:70, 70, 70; + --spectrum-gray-700-rgb:80, 80, 80; --spectrum-gray-700:rgba(var(--spectrum-gray-700-rgb)); - --spectrum-gray-800-rgb:34, 34, 34; + --spectrum-gray-800-rgb:41, 41, 41; --spectrum-gray-800:rgba(var(--spectrum-gray-800-rgb)); - --spectrum-gray-900-rgb:0, 0, 0; + --spectrum-gray-900-rgb:19, 19, 19; --spectrum-gray-900:rgba(var(--spectrum-gray-900-rgb)); - --spectrum-blue-100-rgb:224, 242, 255; + --spectrum-gray-1000-rgb:0, 0, 0; + --spectrum-gray-1000:rgba(var(--spectrum-gray-1000-rgb)); + --spectrum-blue-100-rgb:245, 249, 255; --spectrum-blue-100:rgba(var(--spectrum-blue-100-rgb)); - --spectrum-blue-200-rgb:202, 232, 255; + --spectrum-blue-200-rgb:229, 240, 254; --spectrum-blue-200:rgba(var(--spectrum-blue-200-rgb)); - --spectrum-blue-300-rgb:181, 222, 255; + --spectrum-blue-300-rgb:203, 226, 254; --spectrum-blue-300:rgba(var(--spectrum-blue-300-rgb)); - --spectrum-blue-400-rgb:150, 206, 253; + --spectrum-blue-400-rgb:172, 207, 253; --spectrum-blue-400:rgba(var(--spectrum-blue-400-rgb)); - --spectrum-blue-500-rgb:120, 187, 250; + --spectrum-blue-500-rgb:142, 185, 252; --spectrum-blue-500:rgba(var(--spectrum-blue-500-rgb)); - --spectrum-blue-600-rgb:89, 167, 246; + --spectrum-blue-600-rgb:114, 158, 253; --spectrum-blue-600:rgba(var(--spectrum-blue-600-rgb)); - --spectrum-blue-700-rgb:56, 146, 243; + --spectrum-blue-700-rgb:93, 137, 255; --spectrum-blue-700:rgba(var(--spectrum-blue-700-rgb)); - --spectrum-blue-800-rgb:20, 122, 243; + --spectrum-blue-800-rgb:75, 117, 255; --spectrum-blue-800:rgba(var(--spectrum-blue-800-rgb)); - --spectrum-blue-900-rgb:2, 101, 220; + --spectrum-blue-900-rgb:59, 99, 251; --spectrum-blue-900:rgba(var(--spectrum-blue-900-rgb)); - --spectrum-blue-1000-rgb:0, 84, 182; + --spectrum-blue-1000-rgb:39, 77, 234; --spectrum-blue-1000:rgba(var(--spectrum-blue-1000-rgb)); - --spectrum-blue-1100-rgb:0, 68, 145; + --spectrum-blue-1100-rgb:29, 62, 207; --spectrum-blue-1100:rgba(var(--spectrum-blue-1100-rgb)); - --spectrum-blue-1200-rgb:0, 53, 113; + --spectrum-blue-1200-rgb:21, 50, 173; --spectrum-blue-1200:rgba(var(--spectrum-blue-1200-rgb)); - --spectrum-blue-1300-rgb:0, 39, 84; + --spectrum-blue-1300-rgb:16, 40, 140; --spectrum-blue-1300:rgba(var(--spectrum-blue-1300-rgb)); - --spectrum-blue-1400-rgb:0, 28, 60; + --spectrum-blue-1400-rgb:12, 31, 105; --spectrum-blue-1400:rgba(var(--spectrum-blue-1400-rgb)); - --spectrum-red-100-rgb:255, 235, 231; + --spectrum-blue-1500-rgb:14, 24, 67; + --spectrum-blue-1500:rgba(var(--spectrum-blue-1500-rgb)); + --spectrum-blue-1600-rgb:7, 11, 30; + --spectrum-blue-1600:rgba(var(--spectrum-blue-1600-rgb)); + --spectrum-red-100-rgb:255, 246, 245; --spectrum-red-100:rgba(var(--spectrum-red-100-rgb)); - --spectrum-red-200-rgb:255, 221, 214; + --spectrum-red-200-rgb:255, 235, 232; --spectrum-red-200:rgba(var(--spectrum-red-200-rgb)); - --spectrum-red-300-rgb:255, 205, 195; + --spectrum-red-300-rgb:255, 214, 209; --spectrum-red-300:rgba(var(--spectrum-red-300-rgb)); - --spectrum-red-400-rgb:255, 183, 169; + --spectrum-red-400-rgb:255, 188, 180; --spectrum-red-400:rgba(var(--spectrum-red-400-rgb)); - --spectrum-red-500-rgb:255, 155, 136; + --spectrum-red-500-rgb:255, 157, 145; --spectrum-red-500:rgba(var(--spectrum-red-500-rgb)); - --spectrum-red-600-rgb:255, 124, 101; + --spectrum-red-600-rgb:255, 118, 101; --spectrum-red-600:rgba(var(--spectrum-red-600-rgb)); - --spectrum-red-700-rgb:247, 92, 70; + --spectrum-red-700-rgb:255, 81, 61; --spectrum-red-700:rgba(var(--spectrum-red-700-rgb)); - --spectrum-red-800-rgb:234, 56, 41; + --spectrum-red-800-rgb:240, 56, 35; --spectrum-red-800:rgba(var(--spectrum-red-800-rgb)); - --spectrum-red-900-rgb:211, 21, 16; + --spectrum-red-900-rgb:215, 50, 32; --spectrum-red-900:rgba(var(--spectrum-red-900-rgb)); - --spectrum-red-1000-rgb:180, 0, 0; + --spectrum-red-1000-rgb:183, 40, 24; --spectrum-red-1000:rgba(var(--spectrum-red-1000-rgb)); - --spectrum-red-1100-rgb:147, 0, 0; + --spectrum-red-1100-rgb:156, 33, 19; --spectrum-red-1100:rgba(var(--spectrum-red-1100-rgb)); - --spectrum-red-1200-rgb:116, 0, 0; + --spectrum-red-1200-rgb:129, 27, 14; --spectrum-red-1200:rgba(var(--spectrum-red-1200-rgb)); - --spectrum-red-1300-rgb:89, 0, 0; + --spectrum-red-1300-rgb:104, 21, 10; --spectrum-red-1300:rgba(var(--spectrum-red-1300-rgb)); - --spectrum-red-1400-rgb:67, 0, 0; + --spectrum-red-1400-rgb:80, 16, 6; --spectrum-red-1400:rgba(var(--spectrum-red-1400-rgb)); - --spectrum-orange-100-rgb:255, 236, 204; + --spectrum-red-1500-rgb:59, 11, 4; + --spectrum-red-1500:rgba(var(--spectrum-red-1500-rgb)); + --spectrum-red-1600-rgb:29, 5, 2; + --spectrum-red-1600:rgba(var(--spectrum-red-1600-rgb)); + --spectrum-orange-100-rgb:255, 246, 231; --spectrum-orange-100:rgba(var(--spectrum-orange-100-rgb)); - --spectrum-orange-200-rgb:255, 223, 173; + --spectrum-orange-200-rgb:255, 236, 207; --spectrum-orange-200:rgba(var(--spectrum-orange-200-rgb)); - --spectrum-orange-300-rgb:253, 210, 145; + --spectrum-orange-300-rgb:255, 218, 158; --spectrum-orange-300:rgba(var(--spectrum-orange-300-rgb)); - --spectrum-orange-400-rgb:255, 187, 99; + --spectrum-orange-400-rgb:255, 193, 94; --spectrum-orange-400:rgba(var(--spectrum-orange-400-rgb)); - --spectrum-orange-500-rgb:255, 160, 55; + --spectrum-orange-500-rgb:255, 162, 19; --spectrum-orange-500:rgba(var(--spectrum-orange-500-rgb)); - --spectrum-orange-600-rgb:246, 133, 17; + --spectrum-orange-600-rgb:252, 125, 0; --spectrum-orange-600:rgba(var(--spectrum-orange-600-rgb)); - --spectrum-orange-700-rgb:228, 111, 0; + --spectrum-orange-700-rgb:232, 106, 0; --spectrum-orange-700:rgba(var(--spectrum-orange-700-rgb)); - --spectrum-orange-800-rgb:203, 93, 0; + --spectrum-orange-800-rgb:212, 91, 0; --spectrum-orange-800:rgba(var(--spectrum-orange-800-rgb)); - --spectrum-orange-900-rgb:177, 76, 0; + --spectrum-orange-900-rgb:194, 78, 0; --spectrum-orange-900:rgba(var(--spectrum-orange-900-rgb)); - --spectrum-orange-1000-rgb:149, 61, 0; + --spectrum-orange-1000-rgb:167, 62, 0; --spectrum-orange-1000:rgba(var(--spectrum-orange-1000-rgb)); - --spectrum-orange-1100-rgb:122, 47, 0; + --spectrum-orange-1100-rgb:144, 51, 0; --spectrum-orange-1100:rgba(var(--spectrum-orange-1100-rgb)); - --spectrum-orange-1200-rgb:97, 35, 0; + --spectrum-orange-1200-rgb:118, 41, 0; --spectrum-orange-1200:rgba(var(--spectrum-orange-1200-rgb)); - --spectrum-orange-1300-rgb:73, 25, 1; + --spectrum-orange-1300-rgb:95, 32, 0; --spectrum-orange-1300:rgba(var(--spectrum-orange-1300-rgb)); - --spectrum-orange-1400-rgb:53, 18, 1; + --spectrum-orange-1400-rgb:73, 24, 0; --spectrum-orange-1400:rgba(var(--spectrum-orange-1400-rgb)); - --spectrum-yellow-100-rgb:251, 241, 152; + --spectrum-orange-1500-rgb:52, 18, 0; + --spectrum-orange-1500:rgba(var(--spectrum-orange-1500-rgb)); + --spectrum-orange-1600-rgb:25, 8, 0; + --spectrum-orange-1600:rgba(var(--spectrum-orange-1600-rgb)); + --spectrum-yellow-100-rgb:255, 248, 204; --spectrum-yellow-100:rgba(var(--spectrum-yellow-100-rgb)); - --spectrum-yellow-200-rgb:248, 231, 80; + --spectrum-yellow-200-rgb:255, 241, 151; --spectrum-yellow-200:rgba(var(--spectrum-yellow-200-rgb)); - --spectrum-yellow-300-rgb:248, 217, 4; + --spectrum-yellow-300-rgb:255, 222, 44; --spectrum-yellow-300:rgba(var(--spectrum-yellow-300-rgb)); - --spectrum-yellow-400-rgb:232, 198, 0; + --spectrum-yellow-400-rgb:245, 199, 0; --spectrum-yellow-400:rgba(var(--spectrum-yellow-400-rgb)); - --spectrum-yellow-500-rgb:215, 179, 0; + --spectrum-yellow-500-rgb:230, 175, 0; --spectrum-yellow-500:rgba(var(--spectrum-yellow-500-rgb)); - --spectrum-yellow-600-rgb:196, 159, 0; + --spectrum-yellow-600-rgb:210, 149, 0; --spectrum-yellow-600:rgba(var(--spectrum-yellow-600-rgb)); - --spectrum-yellow-700-rgb:176, 140, 0; + --spectrum-yellow-700-rgb:193, 131, 0; --spectrum-yellow-700:rgba(var(--spectrum-yellow-700-rgb)); - --spectrum-yellow-800-rgb:155, 120, 0; + --spectrum-yellow-800-rgb:175, 116, 0; --spectrum-yellow-800:rgba(var(--spectrum-yellow-800-rgb)); - --spectrum-yellow-900-rgb:133, 102, 0; + --spectrum-yellow-900-rgb:158, 102, 0; --spectrum-yellow-900:rgba(var(--spectrum-yellow-900-rgb)); - --spectrum-yellow-1000-rgb:112, 83, 0; + --spectrum-yellow-1000-rgb:134, 85, 0; --spectrum-yellow-1000:rgba(var(--spectrum-yellow-1000-rgb)); - --spectrum-yellow-1100-rgb:91, 67, 0; + --spectrum-yellow-1100-rgb:114, 72, 0; --spectrum-yellow-1100:rgba(var(--spectrum-yellow-1100-rgb)); - --spectrum-yellow-1200-rgb:72, 51, 0; + --spectrum-yellow-1200-rgb:93, 59, 0; --spectrum-yellow-1200:rgba(var(--spectrum-yellow-1200-rgb)); - --spectrum-yellow-1300-rgb:54, 37, 0; + --spectrum-yellow-1300-rgb:75, 47, 0; --spectrum-yellow-1300:rgba(var(--spectrum-yellow-1300-rgb)); - --spectrum-yellow-1400-rgb:40, 26, 0; + --spectrum-yellow-1400-rgb:56, 35, 0; --spectrum-yellow-1400:rgba(var(--spectrum-yellow-1400-rgb)); - --spectrum-chartreuse-100-rgb:219, 252, 110; + --spectrum-yellow-1500-rgb:40, 25, 0; + --spectrum-yellow-1500:rgba(var(--spectrum-yellow-1500-rgb)); + --spectrum-yellow-1600-rgb:18, 11, 0; + --spectrum-yellow-1600:rgba(var(--spectrum-yellow-1600-rgb)); + --spectrum-chartreuse-100-rgb:246, 251, 222; --spectrum-chartreuse-100:rgba(var(--spectrum-chartreuse-100-rgb)); - --spectrum-chartreuse-200-rgb:203, 244, 67; + --spectrum-chartreuse-200-rgb:234, 246, 173; --spectrum-chartreuse-200:rgba(var(--spectrum-chartreuse-200-rgb)); - --spectrum-chartreuse-300-rgb:188, 233, 42; + --spectrum-chartreuse-300-rgb:208, 236, 70; --spectrum-chartreuse-300:rgba(var(--spectrum-chartreuse-300-rgb)); - --spectrum-chartreuse-400-rgb:170, 216, 22; + --spectrum-chartreuse-400-rgb:182, 219, 0; --spectrum-chartreuse-400:rgba(var(--spectrum-chartreuse-400-rgb)); - --spectrum-chartreuse-500-rgb:152, 197, 10; + --spectrum-chartreuse-500-rgb:163, 196, 0; --spectrum-chartreuse-500:rgba(var(--spectrum-chartreuse-500-rgb)); - --spectrum-chartreuse-600-rgb:135, 177, 3; + --spectrum-chartreuse-600-rgb:143, 172, 0; --spectrum-chartreuse-600:rgba(var(--spectrum-chartreuse-600-rgb)); - --spectrum-chartreuse-700-rgb:118, 156, 0; + --spectrum-chartreuse-700-rgb:128, 153, 0; --spectrum-chartreuse-700:rgba(var(--spectrum-chartreuse-700-rgb)); - --spectrum-chartreuse-800-rgb:103, 136, 0; + --spectrum-chartreuse-800-rgb:114, 137, 0; --spectrum-chartreuse-800:rgba(var(--spectrum-chartreuse-800-rgb)); - --spectrum-chartreuse-900-rgb:87, 116, 0; + --spectrum-chartreuse-900-rgb:102, 122, 0; --spectrum-chartreuse-900:rgba(var(--spectrum-chartreuse-900-rgb)); - --spectrum-chartreuse-1000-rgb:72, 96, 0; + --spectrum-chartreuse-1000-rgb:86, 103, 0; --spectrum-chartreuse-1000:rgba(var(--spectrum-chartreuse-1000-rgb)); - --spectrum-chartreuse-1100-rgb:58, 77, 0; + --spectrum-chartreuse-1100-rgb:73, 87, 0; --spectrum-chartreuse-1100:rgba(var(--spectrum-chartreuse-1100-rgb)); - --spectrum-chartreuse-1200-rgb:44, 59, 0; + --spectrum-chartreuse-1200-rgb:60, 71, 0; --spectrum-chartreuse-1200:rgba(var(--spectrum-chartreuse-1200-rgb)); - --spectrum-chartreuse-1300-rgb:33, 44, 0; + --spectrum-chartreuse-1300-rgb:47, 57, 0; --spectrum-chartreuse-1300:rgba(var(--spectrum-chartreuse-1300-rgb)); - --spectrum-chartreuse-1400-rgb:24, 31, 0; + --spectrum-chartreuse-1400-rgb:35, 43, 0; --spectrum-chartreuse-1400:rgba(var(--spectrum-chartreuse-1400-rgb)); - --spectrum-celery-100-rgb:205, 252, 191; + --spectrum-chartreuse-1500-rgb:25, 30, 0; + --spectrum-chartreuse-1500:rgba(var(--spectrum-chartreuse-1500-rgb)); + --spectrum-chartreuse-1600-rgb:11, 14, 0; + --spectrum-chartreuse-1600:rgba(var(--spectrum-chartreuse-1600-rgb)); + --spectrum-celery-100-rgb:235, 255, 220; --spectrum-celery-100:rgba(var(--spectrum-celery-100-rgb)); - --spectrum-celery-200-rgb:174, 246, 157; + --spectrum-celery-200-rgb:197, 255, 156; --spectrum-celery-200:rgba(var(--spectrum-celery-200-rgb)); - --spectrum-celery-300-rgb:150, 238, 133; + --spectrum-celery-300-rgb:157, 247, 92; --spectrum-celery-300:rgba(var(--spectrum-celery-300-rgb)); - --spectrum-celery-400-rgb:114, 224, 106; + --spectrum-celery-400-rgb:129, 228, 58; --spectrum-celery-400:rgba(var(--spectrum-celery-400-rgb)); - --spectrum-celery-500-rgb:78, 207, 80; + --spectrum-celery-500-rgb:110, 206, 42; --spectrum-celery-500:rgba(var(--spectrum-celery-500-rgb)); - --spectrum-celery-600-rgb:39, 187, 54; + --spectrum-celery-600-rgb:93, 180, 31; --spectrum-celery-600:rgba(var(--spectrum-celery-600-rgb)); - --spectrum-celery-700-rgb:7, 167, 33; + --spectrum-celery-700-rgb:82, 161, 25; --spectrum-celery-700:rgba(var(--spectrum-celery-700-rgb)); - --spectrum-celery-800-rgb:0, 145, 18; + --spectrum-celery-800-rgb:72, 144, 20; --spectrum-celery-800:rgba(var(--spectrum-celery-800-rgb)); - --spectrum-celery-900-rgb:0, 124, 15; + --spectrum-celery-900-rgb:64, 129, 17; --spectrum-celery-900:rgba(var(--spectrum-celery-900-rgb)); - --spectrum-celery-1000-rgb:0, 103, 15; + --spectrum-celery-1000-rgb:52, 109, 12; --spectrum-celery-1000:rgba(var(--spectrum-celery-1000-rgb)); - --spectrum-celery-1100-rgb:0, 83, 13; + --spectrum-celery-1100-rgb:44, 92, 9; --spectrum-celery-1100:rgba(var(--spectrum-celery-1100-rgb)); - --spectrum-celery-1200-rgb:0, 64, 10; + --spectrum-celery-1200-rgb:35, 75, 6; --spectrum-celery-1200:rgba(var(--spectrum-celery-1200-rgb)); - --spectrum-celery-1300-rgb:0, 48, 7; + --spectrum-celery-1300-rgb:27, 60, 3; --spectrum-celery-1300:rgba(var(--spectrum-celery-1300-rgb)); - --spectrum-celery-1400-rgb:0, 34, 5; + --spectrum-celery-1400-rgb:19, 46, 0; --spectrum-celery-1400:rgba(var(--spectrum-celery-1400-rgb)); - --spectrum-green-100-rgb:206, 248, 224; + --spectrum-celery-1500-rgb:12, 33, 0; + --spectrum-celery-1500:rgba(var(--spectrum-celery-1500-rgb)); + --spectrum-celery-1600-rgb:4, 15, 0; + --spectrum-celery-1600:rgba(var(--spectrum-celery-1600-rgb)); + --spectrum-green-100-rgb:237, 252, 241; --spectrum-green-100:rgba(var(--spectrum-green-100-rgb)); - --spectrum-green-200-rgb:173, 244, 206; + --spectrum-green-200-rgb:215, 247, 225; --spectrum-green-200:rgba(var(--spectrum-green-200-rgb)); - --spectrum-green-300-rgb:137, 236, 188; + --spectrum-green-300-rgb:173, 238, 197; --spectrum-green-300:rgba(var(--spectrum-green-300-rgb)); - --spectrum-green-400-rgb:103, 222, 168; + --spectrum-green-400-rgb:107, 227, 162; --spectrum-green-400:rgba(var(--spectrum-green-400-rgb)); - --spectrum-green-500-rgb:73, 204, 147; + --spectrum-green-500-rgb:43, 209, 125; --spectrum-green-500:rgba(var(--spectrum-green-500-rgb)); - --spectrum-green-600-rgb:47, 184, 128; + --spectrum-green-600-rgb:18, 184, 103; --spectrum-green-600:rgba(var(--spectrum-green-600-rgb)); - --spectrum-green-700-rgb:21, 164, 110; + --spectrum-green-700-rgb:11, 164, 93; --spectrum-green-700:rgba(var(--spectrum-green-700-rgb)); - --spectrum-green-800-rgb:0, 143, 93; + --spectrum-green-800-rgb:7, 147, 85; --spectrum-green-800:rgba(var(--spectrum-green-800-rgb)); - --spectrum-green-900-rgb:0, 122, 77; + --spectrum-green-900-rgb:5, 131, 78; --spectrum-green-900:rgba(var(--spectrum-green-900-rgb)); - --spectrum-green-1000-rgb:0, 101, 62; + --spectrum-green-1000-rgb:3, 110, 69; --spectrum-green-1000:rgba(var(--spectrum-green-1000-rgb)); - --spectrum-green-1100-rgb:0, 81, 50; + --spectrum-green-1100-rgb:2, 93, 60; --spectrum-green-1100:rgba(var(--spectrum-green-1100-rgb)); - --spectrum-green-1200-rgb:5, 63, 39; + --spectrum-green-1200-rgb:1, 76, 52; --spectrum-green-1200:rgba(var(--spectrum-green-1200-rgb)); - --spectrum-green-1300-rgb:10, 46, 29; + --spectrum-green-1300-rgb:0, 61, 44; --spectrum-green-1300:rgba(var(--spectrum-green-1300-rgb)); - --spectrum-green-1400-rgb:10, 32, 21; + --spectrum-green-1400-rgb:0, 46, 34; --spectrum-green-1400:rgba(var(--spectrum-green-1400-rgb)); - --spectrum-seafoam-100-rgb:206, 247, 243; + --spectrum-green-1500-rgb:0, 33, 25; + --spectrum-green-1500:rgba(var(--spectrum-green-1500-rgb)); + --spectrum-green-1600-rgb:0, 15, 12; + --spectrum-green-1600:rgba(var(--spectrum-green-1600-rgb)); + --spectrum-seafoam-100-rgb:235, 251, 246; --spectrum-seafoam-100:rgba(var(--spectrum-seafoam-100-rgb)); - --spectrum-seafoam-200-rgb:170, 241, 234; + --spectrum-seafoam-200-rgb:211, 246, 234; --spectrum-seafoam-200:rgba(var(--spectrum-seafoam-200-rgb)); - --spectrum-seafoam-300-rgb:140, 233, 226; + --spectrum-seafoam-300-rgb:169, 237, 216; --spectrum-seafoam-300:rgba(var(--spectrum-seafoam-300-rgb)); - --spectrum-seafoam-400-rgb:101, 218, 210; + --spectrum-seafoam-400-rgb:92, 225, 194; --spectrum-seafoam-400:rgba(var(--spectrum-seafoam-400-rgb)); - --spectrum-seafoam-500-rgb:63, 201, 193; + --spectrum-seafoam-500-rgb:16, 207, 169; --spectrum-seafoam-500:rgba(var(--spectrum-seafoam-500-rgb)); - --spectrum-seafoam-600-rgb:15, 181, 174; + --spectrum-seafoam-600-rgb:13, 181, 149; --spectrum-seafoam-600:rgba(var(--spectrum-seafoam-600-rgb)); - --spectrum-seafoam-700-rgb:0, 161, 154; + --spectrum-seafoam-700-rgb:11, 162, 134; --spectrum-seafoam-700:rgba(var(--spectrum-seafoam-700-rgb)); - --spectrum-seafoam-800-rgb:0, 140, 135; + --spectrum-seafoam-800-rgb:9, 144, 120; --spectrum-seafoam-800:rgba(var(--spectrum-seafoam-800-rgb)); - --spectrum-seafoam-900-rgb:0, 119, 114; + --spectrum-seafoam-900-rgb:7, 129, 109; --spectrum-seafoam-900:rgba(var(--spectrum-seafoam-900-rgb)); - --spectrum-seafoam-1000-rgb:0, 99, 95; + --spectrum-seafoam-1000-rgb:5, 108, 92; --spectrum-seafoam-1000:rgba(var(--spectrum-seafoam-1000-rgb)); - --spectrum-seafoam-1100-rgb:12, 79, 76; + --spectrum-seafoam-1100-rgb:3, 92, 80; --spectrum-seafoam-1100:rgba(var(--spectrum-seafoam-1100-rgb)); - --spectrum-seafoam-1200-rgb:18, 60, 58; + --spectrum-seafoam-1200-rgb:1, 75, 67; --spectrum-seafoam-1200:rgba(var(--spectrum-seafoam-1200-rgb)); - --spectrum-seafoam-1300-rgb:18, 44, 43; + --spectrum-seafoam-1300-rgb:0, 60, 54; --spectrum-seafoam-1300:rgba(var(--spectrum-seafoam-1300-rgb)); - --spectrum-seafoam-1400-rgb:15, 31, 30; + --spectrum-seafoam-1400-rgb:0, 46, 40; --spectrum-seafoam-1400:rgba(var(--spectrum-seafoam-1400-rgb)); - --spectrum-cyan-100-rgb:197, 248, 255; + --spectrum-seafoam-1500-rgb:0, 33, 29; + --spectrum-seafoam-1500:rgba(var(--spectrum-seafoam-1500-rgb)); + --spectrum-seafoam-1600-rgb:0, 15, 14; + --spectrum-seafoam-1600:rgba(var(--spectrum-seafoam-1600-rgb)); + --spectrum-cyan-100-rgb:238, 250, 254; --spectrum-cyan-100:rgba(var(--spectrum-cyan-100-rgb)); - --spectrum-cyan-200-rgb:164, 240, 255; + --spectrum-cyan-200-rgb:217, 244, 253; --spectrum-cyan-200:rgba(var(--spectrum-cyan-200-rgb)); - --spectrum-cyan-300-rgb:136, 231, 250; + --spectrum-cyan-300-rgb:183, 231, 252; --spectrum-cyan-300:rgba(var(--spectrum-cyan-300-rgb)); - --spectrum-cyan-400-rgb:96, 216, 243; + --spectrum-cyan-400-rgb:138, 213, 255; --spectrum-cyan-400:rgba(var(--spectrum-cyan-400-rgb)); - --spectrum-cyan-500-rgb:51, 197, 232; + --spectrum-cyan-500-rgb:92, 192, 255; --spectrum-cyan-500:rgba(var(--spectrum-cyan-500-rgb)); - --spectrum-cyan-600-rgb:18, 176, 218; + --spectrum-cyan-600-rgb:48, 167, 254; --spectrum-cyan-600:rgba(var(--spectrum-cyan-600-rgb)); - --spectrum-cyan-700-rgb:1, 156, 200; + --spectrum-cyan-700-rgb:29, 149, 231; --spectrum-cyan-700:rgba(var(--spectrum-cyan-700-rgb)); - --spectrum-cyan-800-rgb:0, 134, 180; + --spectrum-cyan-800-rgb:18, 134, 205; --spectrum-cyan-800:rgba(var(--spectrum-cyan-800-rgb)); - --spectrum-cyan-900-rgb:0, 113, 159; + --spectrum-cyan-900-rgb:11, 120, 179; --spectrum-cyan-900:rgba(var(--spectrum-cyan-900-rgb)); - --spectrum-cyan-1000-rgb:0, 93, 137; + --spectrum-cyan-1000-rgb:4, 102, 145; --spectrum-cyan-1000:rgba(var(--spectrum-cyan-1000-rgb)); - --spectrum-cyan-1100-rgb:0, 74, 115; + --spectrum-cyan-1100-rgb:0, 87, 121; --spectrum-cyan-1100:rgba(var(--spectrum-cyan-1100-rgb)); - --spectrum-cyan-1200-rgb:0, 57, 93; + --spectrum-cyan-1200-rgb:0, 71, 98; --spectrum-cyan-1200:rgba(var(--spectrum-cyan-1200-rgb)); - --spectrum-cyan-1300-rgb:0, 42, 70; + --spectrum-cyan-1300-rgb:0, 57, 78; --spectrum-cyan-1300:rgba(var(--spectrum-cyan-1300-rgb)); - --spectrum-cyan-1400-rgb:0, 30, 51; + --spectrum-cyan-1400-rgb:0, 43, 59; --spectrum-cyan-1400:rgba(var(--spectrum-cyan-1400-rgb)); - --spectrum-indigo-100-rgb:237, 238, 255; + --spectrum-cyan-1500-rgb:0, 31, 43; + --spectrum-cyan-1500:rgba(var(--spectrum-cyan-1500-rgb)); + --spectrum-cyan-1600-rgb:0, 14, 20; + --spectrum-cyan-1600:rgba(var(--spectrum-cyan-1600-rgb)); + --spectrum-indigo-100-rgb:247, 248, 255; --spectrum-indigo-100:rgba(var(--spectrum-indigo-100-rgb)); - --spectrum-indigo-200-rgb:224, 226, 255; + --spectrum-indigo-200-rgb:235, 238, 255; --spectrum-indigo-200:rgba(var(--spectrum-indigo-200-rgb)); - --spectrum-indigo-300-rgb:211, 213, 255; + --spectrum-indigo-300-rgb:216, 222, 255; --spectrum-indigo-300:rgba(var(--spectrum-indigo-300-rgb)); - --spectrum-indigo-400-rgb:193, 196, 255; + --spectrum-indigo-400-rgb:192, 201, 255; --spectrum-indigo-400:rgba(var(--spectrum-indigo-400-rgb)); - --spectrum-indigo-500-rgb:172, 175, 255; + --spectrum-indigo-500-rgb:167, 178, 255; --spectrum-indigo-500:rgba(var(--spectrum-indigo-500-rgb)); - --spectrum-indigo-600-rgb:149, 153, 255; + --spectrum-indigo-600-rgb:145, 151, 254; --spectrum-indigo-600:rgba(var(--spectrum-indigo-600-rgb)); - --spectrum-indigo-700-rgb:126, 132, 252; + --spectrum-indigo-700-rgb:132, 128, 254; --spectrum-indigo-700:rgba(var(--spectrum-indigo-700-rgb)); - --spectrum-indigo-800-rgb:104, 109, 244; + --spectrum-indigo-800-rgb:122, 106, 253; --spectrum-indigo-800:rgba(var(--spectrum-indigo-800-rgb)); - --spectrum-indigo-900-rgb:82, 88, 228; + --spectrum-indigo-900-rgb:113, 85, 250; --spectrum-indigo-900:rgba(var(--spectrum-indigo-900-rgb)); - --spectrum-indigo-1000-rgb:64, 70, 202; + --spectrum-indigo-1000-rgb:99, 56, 238; --spectrum-indigo-1000:rgba(var(--spectrum-indigo-1000-rgb)); - --spectrum-indigo-1100-rgb:50, 54, 168; + --spectrum-indigo-1100-rgb:84, 36, 219; --spectrum-indigo-1100:rgba(var(--spectrum-indigo-1100-rgb)); - --spectrum-indigo-1200-rgb:38, 41, 134; + --spectrum-indigo-1200-rgb:69, 19, 191; --spectrum-indigo-1200:rgba(var(--spectrum-indigo-1200-rgb)); - --spectrum-indigo-1300-rgb:27, 30, 100; + --spectrum-indigo-1300-rgb:55, 6, 160; --spectrum-indigo-1300:rgba(var(--spectrum-indigo-1300-rgb)); - --spectrum-indigo-1400-rgb:20, 22, 72; + --spectrum-indigo-1400-rgb:42, 0, 129; --spectrum-indigo-1400:rgba(var(--spectrum-indigo-1400-rgb)); - --spectrum-purple-100-rgb:246, 235, 255; + --spectrum-indigo-1500-rgb:31, 0, 98; + --spectrum-indigo-1500:rgba(var(--spectrum-indigo-1500-rgb)); + --spectrum-indigo-1600-rgb:17, 0, 54; + --spectrum-indigo-1600:rgba(var(--spectrum-indigo-1600-rgb)); + --spectrum-purple-100-rgb:251, 247, 254; --spectrum-purple-100:rgba(var(--spectrum-purple-100-rgb)); - --spectrum-purple-200-rgb:238, 221, 255; + --spectrum-purple-200-rgb:244, 235, 252; --spectrum-purple-200:rgba(var(--spectrum-purple-200-rgb)); - --spectrum-purple-300-rgb:230, 208, 255; + --spectrum-purple-300-rgb:235, 218, 249; --spectrum-purple-300:rgba(var(--spectrum-purple-300-rgb)); - --spectrum-purple-400-rgb:219, 187, 254; + --spectrum-purple-400-rgb:221, 193, 246; --spectrum-purple-400:rgba(var(--spectrum-purple-400-rgb)); - --spectrum-purple-500-rgb:204, 164, 253; + --spectrum-purple-500-rgb:208, 167, 243; --spectrum-purple-500:rgba(var(--spectrum-purple-500-rgb)); - --spectrum-purple-600-rgb:189, 139, 252; + --spectrum-purple-600-rgb:191, 138, 238; --spectrum-purple-600:rgba(var(--spectrum-purple-600-rgb)); - --spectrum-purple-700-rgb:174, 114, 249; + --spectrum-purple-700-rgb:178, 114, 235; --spectrum-purple-700:rgba(var(--spectrum-purple-700-rgb)); - --spectrum-purple-800-rgb:157, 87, 244; + --spectrum-purple-800-rgb:166, 92, 231; --spectrum-purple-800:rgba(var(--spectrum-purple-800-rgb)); - --spectrum-purple-900-rgb:137, 61, 231; + --spectrum-purple-900-rgb:154, 71, 226; --spectrum-purple-900:rgba(var(--spectrum-purple-900-rgb)); - --spectrum-purple-1000-rgb:115, 38, 211; + --spectrum-purple-1000-rgb:134, 40, 217; --spectrum-purple-1000:rgba(var(--spectrum-purple-1000-rgb)); - --spectrum-purple-1100-rgb:93, 19, 183; + --spectrum-purple-1100-rgb:115, 13, 204; --spectrum-purple-1100:rgba(var(--spectrum-purple-1100-rgb)); - --spectrum-purple-1200-rgb:71, 12, 148; + --spectrum-purple-1200-rgb:93, 0, 177; --spectrum-purple-1200:rgba(var(--spectrum-purple-1200-rgb)); - --spectrum-purple-1300-rgb:51, 16, 106; + --spectrum-purple-1300-rgb:75, 0, 144; --spectrum-purple-1300:rgba(var(--spectrum-purple-1300-rgb)); - --spectrum-purple-1400-rgb:35, 15, 73; + --spectrum-purple-1400-rgb:59, 0, 111; --spectrum-purple-1400:rgba(var(--spectrum-purple-1400-rgb)); - --spectrum-fuchsia-100-rgb:255, 233, 252; + --spectrum-purple-1500-rgb:44, 0, 84; + --spectrum-purple-1500:rgba(var(--spectrum-purple-1500-rgb)); + --spectrum-purple-1600-rgb:23, 0, 45; + --spectrum-purple-1600:rgba(var(--spectrum-purple-1600-rgb)); + --spectrum-fuchsia-100-rgb:254, 246, 255; --spectrum-fuchsia-100:rgba(var(--spectrum-fuchsia-100-rgb)); - --spectrum-fuchsia-200-rgb:255, 218, 250; + --spectrum-fuchsia-200-rgb:253, 233, 255; --spectrum-fuchsia-200:rgba(var(--spectrum-fuchsia-200-rgb)); - --spectrum-fuchsia-300-rgb:254, 199, 248; + --spectrum-fuchsia-300-rgb:250, 211, 255; --spectrum-fuchsia-300:rgba(var(--spectrum-fuchsia-300-rgb)); - --spectrum-fuchsia-400-rgb:251, 174, 246; + --spectrum-fuchsia-400-rgb:247, 181, 255; --spectrum-fuchsia-400:rgba(var(--spectrum-fuchsia-400-rgb)); - --spectrum-fuchsia-500-rgb:245, 146, 243; + --spectrum-fuchsia-500-rgb:243, 147, 255; --spectrum-fuchsia-500:rgba(var(--spectrum-fuchsia-500-rgb)); - --spectrum-fuchsia-600-rgb:237, 116, 237; + --spectrum-fuchsia-600-rgb:236, 105, 255; --spectrum-fuchsia-600:rgba(var(--spectrum-fuchsia-600-rgb)); - --spectrum-fuchsia-700-rgb:224, 85, 226; + --spectrum-fuchsia-700-rgb:223, 77, 245; --spectrum-fuchsia-700:rgba(var(--spectrum-fuchsia-700-rgb)); - --spectrum-fuchsia-800-rgb:205, 58, 206; + --spectrum-fuchsia-800-rgb:200, 68, 220; --spectrum-fuchsia-800:rgba(var(--spectrum-fuchsia-800-rgb)); - --spectrum-fuchsia-900-rgb:182, 34, 183; + --spectrum-fuchsia-900-rgb:181, 57, 200; --spectrum-fuchsia-900:rgba(var(--spectrum-fuchsia-900-rgb)); - --spectrum-fuchsia-1000-rgb:157, 3, 158; + --spectrum-fuchsia-1000-rgb:156, 40, 175; --spectrum-fuchsia-1000:rgba(var(--spectrum-fuchsia-1000-rgb)); - --spectrum-fuchsia-1100-rgb:128, 0, 129; + --spectrum-fuchsia-1100-rgb:135, 27, 154; --spectrum-fuchsia-1100:rgba(var(--spectrum-fuchsia-1100-rgb)); - --spectrum-fuchsia-1200-rgb:100, 6, 100; + --spectrum-fuchsia-1200-rgb:113, 15, 131; --spectrum-fuchsia-1200:rgba(var(--spectrum-fuchsia-1200-rgb)); - --spectrum-fuchsia-1300-rgb:71, 14, 70; + --spectrum-fuchsia-1300-rgb:92, 4, 109; --spectrum-fuchsia-1300:rgba(var(--spectrum-fuchsia-1300-rgb)); - --spectrum-fuchsia-1400-rgb:50, 13, 49; + --spectrum-fuchsia-1400-rgb:72, 0, 88; --spectrum-fuchsia-1400:rgba(var(--spectrum-fuchsia-1400-rgb)); - --spectrum-magenta-100-rgb:255, 234, 241; + --spectrum-fuchsia-1500-rgb:54, 0, 66; + --spectrum-fuchsia-1500:rgba(var(--spectrum-fuchsia-1500-rgb)); + --spectrum-fuchsia-1600-rgb:29, 0, 35; + --spectrum-fuchsia-1600:rgba(var(--spectrum-fuchsia-1600-rgb)); + --spectrum-magenta-100-rgb:255, 245, 248; --spectrum-magenta-100:rgba(var(--spectrum-magenta-100-rgb)); - --spectrum-magenta-200-rgb:255, 220, 232; + --spectrum-magenta-200-rgb:255, 232, 240; --spectrum-magenta-200:rgba(var(--spectrum-magenta-200-rgb)); - --spectrum-magenta-300-rgb:255, 202, 221; + --spectrum-magenta-300-rgb:255, 213, 227; --spectrum-magenta-300:rgba(var(--spectrum-magenta-300-rgb)); - --spectrum-magenta-400-rgb:255, 178, 206; + --spectrum-magenta-400-rgb:255, 185, 208; --spectrum-magenta-400:rgba(var(--spectrum-magenta-400-rgb)); - --spectrum-magenta-500-rgb:255, 149, 189; + --spectrum-magenta-500-rgb:255, 152, 187; --spectrum-magenta-500:rgba(var(--spectrum-magenta-500-rgb)); - --spectrum-magenta-600-rgb:250, 119, 170; + --spectrum-magenta-600-rgb:255, 112, 159; --spectrum-magenta-600:rgba(var(--spectrum-magenta-600-rgb)); - --spectrum-magenta-700-rgb:239, 90, 152; + --spectrum-magenta-700-rgb:255, 72, 133; --spectrum-magenta-700:rgba(var(--spectrum-magenta-700-rgb)); - --spectrum-magenta-800-rgb:222, 61, 130; + --spectrum-magenta-800-rgb:240, 45, 110; --spectrum-magenta-800:rgba(var(--spectrum-magenta-800-rgb)); - --spectrum-magenta-900-rgb:200, 34, 105; + --spectrum-magenta-900-rgb:217, 35, 97; --spectrum-magenta-900:rgba(var(--spectrum-magenta-900-rgb)); - --spectrum-magenta-1000-rgb:173, 9, 85; + --spectrum-magenta-1000-rgb:186, 22, 80; --spectrum-magenta-1000:rgba(var(--spectrum-magenta-1000-rgb)); - --spectrum-magenta-1100-rgb:142, 0, 69; + --spectrum-magenta-1100-rgb:163, 5, 62; --spectrum-magenta-1100:rgba(var(--spectrum-magenta-1100-rgb)); - --spectrum-magenta-1200-rgb:112, 0, 55; + --spectrum-magenta-1200-rgb:136, 0, 51; --spectrum-magenta-1200:rgba(var(--spectrum-magenta-1200-rgb)); - --spectrum-magenta-1300-rgb:84, 3, 42; + --spectrum-magenta-1300-rgb:111, 0, 40; --spectrum-magenta-1300:rgba(var(--spectrum-magenta-1300-rgb)); - --spectrum-magenta-1400-rgb:60, 6, 29; + --spectrum-magenta-1400-rgb:86, 0, 30; --spectrum-magenta-1400:rgba(var(--spectrum-magenta-1400-rgb)); + --spectrum-magenta-1500-rgb:64, 0, 22; + --spectrum-magenta-1500:rgba(var(--spectrum-magenta-1500-rgb)); + --spectrum-magenta-1600-rgb:35, 0, 12; + --spectrum-magenta-1600:rgba(var(--spectrum-magenta-1600-rgb)); + --spectrum-pink-100-rgb:255, 246, 252; + --spectrum-pink-100:rgba(var(--spectrum-pink-100-rgb)); + --spectrum-pink-200-rgb:255, 232, 247; + --spectrum-pink-200:rgba(var(--spectrum-pink-200-rgb)); + --spectrum-pink-300-rgb:255, 211, 240; + --spectrum-pink-300:rgba(var(--spectrum-pink-300-rgb)); + --spectrum-pink-400-rgb:255, 181, 230; + --spectrum-pink-400:rgba(var(--spectrum-pink-400-rgb)); + --spectrum-pink-500-rgb:255, 148, 219; + --spectrum-pink-500:rgba(var(--spectrum-pink-500-rgb)); + --spectrum-pink-600-rgb:255, 103, 204; + --spectrum-pink-600:rgba(var(--spectrum-pink-600-rgb)); + --spectrum-pink-700-rgb:242, 76, 184; + --spectrum-pink-700:rgba(var(--spectrum-pink-700-rgb)); + --spectrum-pink-800-rgb:228, 52, 163; + --spectrum-pink-800:rgba(var(--spectrum-pink-800-rgb)); + --spectrum-pink-900-rgb:206, 42, 146; + --spectrum-pink-900:rgba(var(--spectrum-pink-900-rgb)); + --spectrum-pink-1000-rgb:176, 31, 123; + --spectrum-pink-1000:rgba(var(--spectrum-pink-1000-rgb)); + --spectrum-pink-1100-rgb:152, 22, 104; + --spectrum-pink-1100:rgba(var(--spectrum-pink-1100-rgb)); + --spectrum-pink-1200-rgb:128, 12, 85; + --spectrum-pink-1200:rgba(var(--spectrum-pink-1200-rgb)); + --spectrum-pink-1300-rgb:105, 3, 68; + --spectrum-pink-1300:rgba(var(--spectrum-pink-1300-rgb)); + --spectrum-pink-1400-rgb:83, 0, 53; + --spectrum-pink-1400:rgba(var(--spectrum-pink-1400-rgb)); + --spectrum-pink-1500-rgb:62, 0, 39; + --spectrum-pink-1500:rgba(var(--spectrum-pink-1500-rgb)); + --spectrum-pink-1600-rgb:33, 0, 21; + --spectrum-pink-1600:rgba(var(--spectrum-pink-1600-rgb)); + --spectrum-turquoise-100-rgb:238, 251, 251; + --spectrum-turquoise-100:rgba(var(--spectrum-turquoise-100-rgb)); + --spectrum-turquoise-200-rgb:209, 245, 245; + --spectrum-turquoise-200:rgba(var(--spectrum-turquoise-200-rgb)); + --spectrum-turquoise-300-rgb:169, 236, 237; + --spectrum-turquoise-300:rgba(var(--spectrum-turquoise-300-rgb)); + --spectrum-turquoise-400-rgb:111, 221, 228; + --spectrum-turquoise-400:rgba(var(--spectrum-turquoise-400-rgb)); + --spectrum-turquoise-500-rgb:39, 202, 216; + --spectrum-turquoise-500:rgba(var(--spectrum-turquoise-500-rgb)); + --spectrum-turquoise-600-rgb:15, 177, 192; + --spectrum-turquoise-600:rgba(var(--spectrum-turquoise-600-rgb)); + --spectrum-turquoise-700-rgb:12, 158, 171; + --spectrum-turquoise-700:rgba(var(--spectrum-turquoise-700-rgb)); + --spectrum-turquoise-800-rgb:10, 141, 153; + --spectrum-turquoise-800:rgba(var(--spectrum-turquoise-800-rgb)); + --spectrum-turquoise-900-rgb:8, 126, 137; + --spectrum-turquoise-900:rgba(var(--spectrum-turquoise-900-rgb)); + --spectrum-turquoise-1000-rgb:5, 107, 116; + --spectrum-turquoise-1000:rgba(var(--spectrum-turquoise-1000-rgb)); + --spectrum-turquoise-1100-rgb:3, 90, 98; + --spectrum-turquoise-1100:rgba(var(--spectrum-turquoise-1100-rgb)); + --spectrum-turquoise-1200-rgb:1, 74, 81; + --spectrum-turquoise-1200:rgba(var(--spectrum-turquoise-1200-rgb)); + --spectrum-turquoise-1300-rgb:0, 59, 65; + --spectrum-turquoise-1300:rgba(var(--spectrum-turquoise-1300-rgb)); + --spectrum-turquoise-1400-rgb:0, 44, 49; + --spectrum-turquoise-1400:rgba(var(--spectrum-turquoise-1400-rgb)); + --spectrum-turquoise-1500-rgb:0, 32, 35; + --spectrum-turquoise-1500:rgba(var(--spectrum-turquoise-1500-rgb)); + --spectrum-turquoise-1600-rgb:0, 15, 17; + --spectrum-turquoise-1600:rgba(var(--spectrum-turquoise-1600-rgb)); + --spectrum-brown-100-rgb:252, 247, 242; + --spectrum-brown-100:rgba(var(--spectrum-brown-100-rgb)); + --spectrum-brown-200-rgb:247, 238, 225; + --spectrum-brown-200:rgba(var(--spectrum-brown-200-rgb)); + --spectrum-brown-300-rgb:239, 221, 195; + --spectrum-brown-300:rgba(var(--spectrum-brown-300-rgb)); + --spectrum-brown-400-rgb:229, 200, 157; + --spectrum-brown-400:rgba(var(--spectrum-brown-400-rgb)); + --spectrum-brown-500-rgb:214, 177, 123; + --spectrum-brown-500:rgba(var(--spectrum-brown-500-rgb)); + --spectrum-brown-600-rgb:190, 155, 104; + --spectrum-brown-600:rgba(var(--spectrum-brown-600-rgb)); + --spectrum-brown-700-rgb:171, 138, 90; + --spectrum-brown-700:rgba(var(--spectrum-brown-700-rgb)); + --spectrum-brown-800-rgb:154, 123, 77; + --spectrum-brown-800:rgba(var(--spectrum-brown-800-rgb)); + --spectrum-brown-900-rgb:139, 109, 66; + --spectrum-brown-900:rgba(var(--spectrum-brown-900-rgb)); + --spectrum-brown-1000-rgb:119, 91, 50; + --spectrum-brown-1000:rgba(var(--spectrum-brown-1000-rgb)); + --spectrum-brown-1100-rgb:103, 76, 35; + --spectrum-brown-1100:rgba(var(--spectrum-brown-1100-rgb)); + --spectrum-brown-1200-rgb:88, 61, 21; + --spectrum-brown-1200:rgba(var(--spectrum-brown-1200-rgb)); + --spectrum-brown-1300-rgb:70, 49, 17; + --spectrum-brown-1300:rgba(var(--spectrum-brown-1300-rgb)); + --spectrum-brown-1400-rgb:52, 37, 13; + --spectrum-brown-1400:rgba(var(--spectrum-brown-1400-rgb)); + --spectrum-brown-1500-rgb:38, 26, 9; + --spectrum-brown-1500:rgba(var(--spectrum-brown-1500-rgb)); + --spectrum-brown-1600-rgb:16, 12, 4; + --spectrum-brown-1600:rgba(var(--spectrum-brown-1600-rgb)); + --spectrum-silver-100-rgb:247, 247, 247; + --spectrum-silver-100:rgba(var(--spectrum-silver-100-rgb)); + --spectrum-silver-200-rgb:239, 239, 239; + --spectrum-silver-200:rgba(var(--spectrum-silver-200-rgb)); + --spectrum-silver-300-rgb:223, 223, 223; + --spectrum-silver-300:rgba(var(--spectrum-silver-300-rgb)); + --spectrum-silver-400-rgb:204, 204, 204; + --spectrum-silver-400:rgba(var(--spectrum-silver-400-rgb)); + --spectrum-silver-500-rgb:183, 183, 183; + --spectrum-silver-500:rgba(var(--spectrum-silver-500-rgb)); + --spectrum-silver-600-rgb:160, 160, 160; + --spectrum-silver-600:rgba(var(--spectrum-silver-600-rgb)); + --spectrum-silver-700-rgb:143, 143, 143; + --spectrum-silver-700:rgba(var(--spectrum-silver-700-rgb)); + --spectrum-silver-800-rgb:128, 128, 128; + --spectrum-silver-800:rgba(var(--spectrum-silver-800-rgb)); + --spectrum-silver-900-rgb:114, 114, 114; + --spectrum-silver-900:rgba(var(--spectrum-silver-900-rgb)); + --spectrum-silver-1000-rgb:96, 96, 96; + --spectrum-silver-1000:rgba(var(--spectrum-silver-1000-rgb)); + --spectrum-silver-1100-rgb:81, 81, 81; + --spectrum-silver-1100:rgba(var(--spectrum-silver-1100-rgb)); + --spectrum-silver-1200-rgb:66, 66, 66; + --spectrum-silver-1200:rgba(var(--spectrum-silver-1200-rgb)); + --spectrum-silver-1300-rgb:52, 52, 52; + --spectrum-silver-1300:rgba(var(--spectrum-silver-1300-rgb)); + --spectrum-silver-1400-rgb:39, 39, 39; + --spectrum-silver-1400:rgba(var(--spectrum-silver-1400-rgb)); + --spectrum-silver-1500-rgb:28, 28, 28; + --spectrum-silver-1500:rgba(var(--spectrum-silver-1500-rgb)); + --spectrum-silver-1600-rgb:12, 12, 12; + --spectrum-silver-1600:rgba(var(--spectrum-silver-1600-rgb)); + --spectrum-cinnamon-100-rgb:253, 247, 243; + --spectrum-cinnamon-100:rgba(var(--spectrum-cinnamon-100-rgb)); + --spectrum-cinnamon-200-rgb:249, 236, 229; + --spectrum-cinnamon-200:rgba(var(--spectrum-cinnamon-200-rgb)); + --spectrum-cinnamon-300-rgb:244, 218, 203; + --spectrum-cinnamon-300:rgba(var(--spectrum-cinnamon-300-rgb)); + --spectrum-cinnamon-400-rgb:237, 196, 172; + --spectrum-cinnamon-400:rgba(var(--spectrum-cinnamon-400-rgb)); + --spectrum-cinnamon-500-rgb:229, 170, 136; + --spectrum-cinnamon-500:rgba(var(--spectrum-cinnamon-500-rgb)); + --spectrum-cinnamon-600-rgb:212, 145, 108; + --spectrum-cinnamon-600:rgba(var(--spectrum-cinnamon-600-rgb)); + --spectrum-cinnamon-700-rgb:198, 126, 88; + --spectrum-cinnamon-700:rgba(var(--spectrum-cinnamon-700-rgb)); + --spectrum-cinnamon-800-rgb:184, 109, 70; + --spectrum-cinnamon-800:rgba(var(--spectrum-cinnamon-800-rgb)); + --spectrum-cinnamon-900-rgb:170, 94, 56; + --spectrum-cinnamon-900:rgba(var(--spectrum-cinnamon-900-rgb)); + --spectrum-cinnamon-1000-rgb:147, 77, 43; + --spectrum-cinnamon-1000:rgba(var(--spectrum-cinnamon-1000-rgb)); + --spectrum-cinnamon-1100-rgb:128, 62, 32; + --spectrum-cinnamon-1100:rgba(var(--spectrum-cinnamon-1100-rgb)); + --spectrum-cinnamon-1200-rgb:110, 48, 21; + --spectrum-cinnamon-1200:rgba(var(--spectrum-cinnamon-1200-rgb)); + --spectrum-cinnamon-1300-rgb:92, 35, 11; + --spectrum-cinnamon-1300:rgba(var(--spectrum-cinnamon-1300-rgb)); + --spectrum-cinnamon-1400-rgb:72, 25, 6; + --spectrum-cinnamon-1400:rgba(var(--spectrum-cinnamon-1400-rgb)); + --spectrum-cinnamon-1500-rgb:52, 18, 4; + --spectrum-cinnamon-1500:rgba(var(--spectrum-cinnamon-1500-rgb)); + --spectrum-cinnamon-1600-rgb:24, 8, 2; + --spectrum-cinnamon-1600:rgba(var(--spectrum-cinnamon-1600-rgb)); --spectrum-icon-color-blue-primary-default:var(--spectrum-blue-900); --spectrum-icon-color-green-primary-default:var(--spectrum-green-900); --spectrum-icon-color-red-primary-default:var(--spectrum-red-900); diff --git a/tokens/dist/css/medium-vars.css b/tokens/dist/css/medium-vars.css index d89901c5f48..b953545f2bd 100644 --- a/tokens/dist/css/medium-vars.css +++ b/tokens/dist/css/medium-vars.css @@ -1,54 +1,32 @@ .spectrum--medium{ - --spectrum-workflow-icon-size-50:14px; - --spectrum-workflow-icon-size-75:16px; - --spectrum-workflow-icon-size-100:18px; - --spectrum-workflow-icon-size-200:20px; - --spectrum-workflow-icon-size-300:22px; - --spectrum-arrow-icon-size-75:10px; - --spectrum-arrow-icon-size-100:10px; - --spectrum-arrow-icon-size-200:12px; - --spectrum-arrow-icon-size-300:14px; - --spectrum-arrow-icon-size-400:16px; - --spectrum-arrow-icon-size-500:18px; - --spectrum-arrow-icon-size-600:20px; - --spectrum-asterisk-icon-size-100:8px; - --spectrum-asterisk-icon-size-200:10px; - --spectrum-asterisk-icon-size-300:10px; - --spectrum-checkmark-icon-size-50:10px; - --spectrum-checkmark-icon-size-75:10px; - --spectrum-checkmark-icon-size-100:10px; - --spectrum-checkmark-icon-size-200:12px; - --spectrum-checkmark-icon-size-300:14px; - --spectrum-checkmark-icon-size-400:16px; - --spectrum-checkmark-icon-size-500:16px; - --spectrum-checkmark-icon-size-600:18px; - --spectrum-chevron-icon-size-50:6px; - --spectrum-chevron-icon-size-75:10px; - --spectrum-chevron-icon-size-100:10px; - --spectrum-chevron-icon-size-200:12px; - --spectrum-chevron-icon-size-300:14px; - --spectrum-chevron-icon-size-400:16px; - --spectrum-chevron-icon-size-500:16px; - --spectrum-chevron-icon-size-600:18px; - --spectrum-corner-triangle-icon-size-75:5px; - --spectrum-corner-triangle-icon-size-100:5px; - --spectrum-corner-triangle-icon-size-200:6px; - --spectrum-corner-triangle-icon-size-300:7px; - --spectrum-cross-icon-size-75:8px; - --spectrum-cross-icon-size-100:8px; - --spectrum-cross-icon-size-200:10px; - --spectrum-cross-icon-size-300:12px; - --spectrum-cross-icon-size-400:12px; - --spectrum-cross-icon-size-500:14px; - --spectrum-cross-icon-size-600:16px; - --spectrum-dash-icon-size-50:8px; - --spectrum-dash-icon-size-75:8px; - --spectrum-dash-icon-size-100:10px; - --spectrum-dash-icon-size-200:12px; - --spectrum-dash-icon-size-300:12px; - --spectrum-dash-icon-size-400:14px; - --spectrum-dash-icon-size-500:16px; - --spectrum-dash-icon-size-600:18px; + --spectrum-checkbox-control-size-small:12px; + --spectrum-checkbox-control-size-medium:14px; + --spectrum-checkbox-control-size-large:16px; + --spectrum-checkbox-control-size-extra-large:18px; + --spectrum-checkbox-top-to-control-small:6px; + --spectrum-checkbox-top-to-control-medium:9px; + --spectrum-checkbox-top-to-control-large:12px; + --spectrum-checkbox-top-to-control-extra-large:15px; + --spectrum-switch-control-width-small:22px; + --spectrum-switch-control-width-medium:26px; + --spectrum-switch-control-width-large:30px; + --spectrum-switch-control-width-extra-large:34px; + --spectrum-switch-control-height-small:14px; + --spectrum-switch-control-height-medium:16px; + --spectrum-switch-control-height-large:18px; + --spectrum-switch-control-height-extra-large:20px; + --spectrum-switch-top-to-control-small:6px; + --spectrum-switch-top-to-control-medium:9px; + --spectrum-switch-top-to-control-large:12px; + --spectrum-switch-top-to-control-extra-large:15px; + --spectrum-radio-button-control-size-small:12px; + --spectrum-radio-button-control-size-medium:14px; + --spectrum-radio-button-control-size-large:16px; + --spectrum-radio-button-control-size-extra-large:18px; + --spectrum-radio-button-top-to-control-small:6px; + --spectrum-radio-button-top-to-control-medium:9px; + --spectrum-radio-button-top-to-control-large:12px; + --spectrum-radio-button-top-to-control-extra-large:15px; --spectrum-field-label-text-to-asterisk-small:4px; --spectrum-field-label-text-to-asterisk-medium:4px; --spectrum-field-label-text-to-asterisk-large:5px; @@ -56,18 +34,15 @@ --spectrum-field-label-top-to-asterisk-small:8px; --spectrum-field-label-top-to-asterisk-medium:12px; --spectrum-field-label-top-to-asterisk-large:15px; - --spectrum-field-label-top-to-asterisk-extra-large:19px; - --spectrum-field-label-top-margin-medium:4px; - --spectrum-field-label-top-margin-large:5px; - --spectrum-field-label-top-margin-extra-large:5px; + --spectrum-field-label-top-to-asterisk-extra-large:18px; --spectrum-field-label-to-component-quiet-small:-8px; --spectrum-field-label-to-component-quiet-medium:-8px; --spectrum-field-label-to-component-quiet-large:-12px; --spectrum-field-label-to-component-quiet-extra-large:-15px; - --spectrum-help-text-top-to-workflow-icon-small:4px; - --spectrum-help-text-top-to-workflow-icon-medium:3px; - --spectrum-help-text-top-to-workflow-icon-large:6px; - --spectrum-help-text-top-to-workflow-icon-extra-large:9px; + --spectrum-help-text-top-to-workflow-icon-small:var(--spectrum-component-top-to-workflow-icon-75); + --spectrum-help-text-top-to-workflow-icon-medium:var(--spectrum-component-top-to-workflow-icon-100); + --spectrum-help-text-top-to-workflow-icon-large:var(--spectrum-component-top-to-workflow-icon-200); + --spectrum-help-text-top-to-workflow-icon-extra-large:var(--spectrum-component-top-to-workflow-icon-300); --spectrum-status-light-dot-size-medium:8px; --spectrum-status-light-dot-size-large:10px; --spectrum-status-light-dot-size-extra-large:10px; @@ -78,8 +53,8 @@ --spectrum-action-button-edge-to-hold-icon-medium:4px; --spectrum-action-button-edge-to-hold-icon-large:5px; --spectrum-action-button-edge-to-hold-icon-extra-large:6px; - --spectrum-tooltip-tip-width:8px; - --spectrum-tooltip-tip-height:4px; + --spectrum-tooltip-tip-width:10px; + --spectrum-tooltip-tip-height:5px; --spectrum-tooltip-maximum-width:160px; --spectrum-progress-circle-size-small:16px; --spectrum-progress-circle-size-medium:32px; @@ -87,11 +62,11 @@ --spectrum-progress-circle-thickness-small:2px; --spectrum-progress-circle-thickness-medium:3px; --spectrum-progress-circle-thickness-large:4px; - --spectrum-toast-height:48px; + --spectrum-toast-height:52px; --spectrum-toast-maximum-width:336px; - --spectrum-toast-top-to-workflow-icon:15px; - --spectrum-toast-top-to-text:14px; - --spectrum-toast-bottom-to-text:17px; + --spectrum-toast-top-to-workflow-icon:18px; + --spectrum-toast-top-to-text:18px; + --spectrum-toast-bottom-to-text:20px; --spectrum-action-bar-height:48px; --spectrum-action-bar-top-to-item-counter:14px; --spectrum-swatch-size-extra-small:16px; @@ -124,6 +99,22 @@ --spectrum-menu-item-top-to-selected-icon-medium:11px; --spectrum-menu-item-top-to-selected-icon-large:14px; --spectrum-menu-item-top-to-selected-icon-extra-large:17px; + --spectrum-slider-control-height-small:14px; + --spectrum-slider-control-height-medium:16px; + --spectrum-slider-control-height-large:18px; + --spectrum-slider-control-height-extra-large:20px; + --spectrum-slider-handle-size-small:14px; + --spectrum-slider-handle-size-medium:16px; + --spectrum-slider-handle-size-large:18px; + --spectrum-slider-handle-size-extra-large:20px; + --spectrum-slider-handle-border-width-down-small:5px; + --spectrum-slider-handle-border-width-down-medium:6px; + --spectrum-slider-handle-border-width-down-large:7px; + --spectrum-slider-handle-border-width-down-extra-large:8px; + --spectrum-slider-bottom-to-handle-small:5px; + --spectrum-slider-bottom-to-handle-medium:8px; + --spectrum-slider-bottom-to-handle-large:11px; + --spectrum-slider-bottom-to-handle-extra-large:14px; --spectrum-slider-control-to-field-label-small:5px; --spectrum-slider-control-to-field-label-medium:8px; --spectrum-slider-control-to-field-label-large:11px; @@ -152,7 +143,8 @@ --spectrum-thumbnail-size-1000:56px; --spectrum-alert-dialog-title-size:var(--spectrum-heading-size-s); --spectrum-alert-dialog-description-size:var(--spectrum-body-size-s); - --spectrum-opacity-checkerboard-square-size:8px; + --spectrum-opacity-checkerboard-square-size:var(--spectrum-opacity-checkerboard-square-size-medium); + --spectrum-opacity-checkerboard-square-size-medium:8px; --spectrum-contextual-help-title-size:var(--spectrum-heading-size-xs); --spectrum-contextual-help-body-size:var(--spectrum-body-size-s); --spectrum-breadcrumbs-height-multiline:72px; @@ -179,11 +171,11 @@ --spectrum-avatar-size-500:32px; --spectrum-avatar-size-600:36px; --spectrum-avatar-size-700:40px; - --spectrum-alert-banner-minimum-height:48px; + --spectrum-alert-banner-minimum-height:56px; --spectrum-alert-banner-width:832px; - --spectrum-alert-banner-top-to-workflow-icon:15px; - --spectrum-alert-banner-top-to-text:14px; - --spectrum-alert-banner-bottom-to-text:17px; + --spectrum-alert-banner-top-to-workflow-icon:19px; + --spectrum-alert-banner-top-to-text:18px; + --spectrum-alert-banner-bottom-to-text:20px; --spectrum-rating-indicator-width:18px; --spectrum-rating-indicator-to-icon:4px; --spectrum-color-area-width:192px; @@ -348,14 +340,77 @@ --spectrum-side-navigation-with-icon-third-level-edge-to-text:62px; --spectrum-side-navigation-item-to-item:4px; --spectrum-side-navigation-item-to-header:24px; - --spectrum-side-navigation-header-to-item:8px; --spectrum-side-navigation-bottom-to-text:8px; --spectrum-tray-top-to-content-area:4px; - --spectrum-text-to-visual-50:6px; - --spectrum-text-to-visual-75:7px; - --spectrum-text-to-visual-100:8px; - --spectrum-text-to-visual-200:9px; - --spectrum-text-to-visual-300:10px; + --spectrum-arrow-icon-size-75:10px; + --spectrum-arrow-icon-size-100:10px; + --spectrum-arrow-icon-size-200:12px; + --spectrum-arrow-icon-size-300:14px; + --spectrum-arrow-icon-size-400:16px; + --spectrum-arrow-icon-size-500:18px; + --spectrum-arrow-icon-size-600:20px; + --spectrum-asterisk-icon-size-100:8px; + --spectrum-asterisk-icon-size-200:10px; + --spectrum-asterisk-icon-size-300:10px; + --spectrum-checkmark-icon-size-50:10px; + --spectrum-checkmark-icon-size-75:10px; + --spectrum-checkmark-icon-size-100:10px; + --spectrum-checkmark-icon-size-200:12px; + --spectrum-checkmark-icon-size-300:14px; + --spectrum-checkmark-icon-size-400:16px; + --spectrum-checkmark-icon-size-500:16px; + --spectrum-checkmark-icon-size-600:18px; + --spectrum-chevron-icon-size-50:6px; + --spectrum-chevron-icon-size-75:10px; + --spectrum-chevron-icon-size-100:10px; + --spectrum-chevron-icon-size-200:12px; + --spectrum-chevron-icon-size-300:14px; + --spectrum-chevron-icon-size-400:16px; + --spectrum-chevron-icon-size-500:16px; + --spectrum-chevron-icon-size-600:18px; + --spectrum-cross-icon-size-75:8px; + --spectrum-cross-icon-size-100:8px; + --spectrum-cross-icon-size-200:10px; + --spectrum-cross-icon-size-300:12px; + --spectrum-cross-icon-size-400:12px; + --spectrum-cross-icon-size-500:14px; + --spectrum-cross-icon-size-600:16px; + --spectrum-dash-icon-size-50:8px; + --spectrum-dash-icon-size-75:8px; + --spectrum-dash-icon-size-100:10px; + --spectrum-dash-icon-size-200:12px; + --spectrum-dash-icon-size-300:12px; + --spectrum-dash-icon-size-400:14px; + --spectrum-dash-icon-size-500:16px; + --spectrum-dash-icon-size-600:18px; + --spectrum-side-navigation-header-to-item:8px; + --spectrum-switch-handle-size-small:6px; + --spectrum-switch-handle-selected-size-small:8px; + --spectrum-switch-handle-selected-size-medium:10px; + --spectrum-switch-handle-selected-size-large:12px; + --spectrum-switch-handle-selected-size-extra-large:14px; + --spectrum-switch-handle-size-medium:8px; + --spectrum-switch-handle-size-large:10px; + --spectrum-switch-handle-size-extra-large:12px; + --spectrum-tag-label-to-clear-icon-small:8px; + --spectrum-tag-label-to-clear-icon-medium:12px; + --spectrum-tag-label-to-clear-icon-large:15px; + --spectrum-tag-edge-to-clear-icon-small:8px; + --spectrum-tag-edge-to-clear-icon-medium:12px; + --spectrum-tag-edge-to-clear-icon-large:15px; + --spectrum-opacity-checkerboard-square-size-small:4px; + --spectrum-drop-shadow-y:1px; + --spectrum-drop-shadow-blur:4px; + --spectrum-workflow-icon-size-50:14px; + --spectrum-workflow-icon-size-75:16px; + --spectrum-workflow-icon-size-100:20px; + --spectrum-workflow-icon-size-200:22px; + --spectrum-workflow-icon-size-300:26px; + --spectrum-text-to-visual-50:5px; + --spectrum-text-to-visual-75:5px; + --spectrum-text-to-visual-100:6px; + --spectrum-text-to-visual-200:7px; + --spectrum-text-to-visual-300:8px; --spectrum-text-to-control-75:9px; --spectrum-text-to-control-100:10px; --spectrum-text-to-control-200:11px; @@ -386,9 +441,9 @@ --spectrum-component-edge-to-visual-300:15px; --spectrum-component-edge-to-visual-only-50:3px; --spectrum-component-edge-to-visual-only-75:4px; - --spectrum-component-edge-to-visual-only-100:7px; - --spectrum-component-edge-to-visual-only-200:10px; - --spectrum-component-edge-to-visual-only-300:13px; + --spectrum-component-edge-to-visual-only-100:6px; + --spectrum-component-edge-to-visual-only-200:9px; + --spectrum-component-edge-to-visual-only-300:11px; --spectrum-component-edge-to-text-50:8px; --spectrum-component-edge-to-text-75:9px; --spectrum-component-edge-to-text-100:12px; @@ -396,9 +451,9 @@ --spectrum-component-edge-to-text-300:18px; --spectrum-component-top-to-workflow-icon-50:3px; --spectrum-component-top-to-workflow-icon-75:4px; - --spectrum-component-top-to-workflow-icon-100:7px; - --spectrum-component-top-to-workflow-icon-200:10px; - --spectrum-component-top-to-workflow-icon-300:13px; + --spectrum-component-top-to-workflow-icon-100:6px; + --spectrum-component-top-to-workflow-icon-200:9px; + --spectrum-component-top-to-workflow-icon-300:11px; --spectrum-component-top-to-text-50:3px; --spectrum-component-top-to-text-75:4px; --spectrum-component-top-to-text-100:6px; @@ -453,16 +508,13 @@ --spectrum-field-text-to-validation-icon-medium:12px; --spectrum-field-text-to-validation-icon-large:15px; --spectrum-field-text-to-validation-icon-extra-large:18px; - --spectrum-field-width:192px; + --spectrum-field-width:var(--spectrum-field-width-small); + --spectrum-field-width-small:192px; --spectrum-character-count-to-field-quiet-small:-3px; --spectrum-character-count-to-field-quiet-medium:-3px; --spectrum-character-count-to-field-quiet-large:-3px; --spectrum-character-count-to-field-quiet-extra-large:-4px; --spectrum-side-label-character-count-to-field:12px; - --spectrum-side-label-character-count-top-margin-small:4px; - --spectrum-side-label-character-count-top-margin-medium:8px; - --spectrum-side-label-character-count-top-margin-large:11px; - --spectrum-side-label-character-count-top-margin-extra-large:14px; --spectrum-disclosure-indicator-top-to-disclosure-icon-small:7px; --spectrum-disclosure-indicator-top-to-disclosure-icon-medium:11px; --spectrum-disclosure-indicator-top-to-disclosure-icon-large:14px; @@ -472,6 +524,13 @@ --spectrum-navigational-indicator-top-to-back-icon-large:12px; --spectrum-navigational-indicator-top-to-back-icon-extra-large:15px; --spectrum-color-control-track-width:24px; + --spectrum-corner-triangle-icon-size-75:5px; + --spectrum-corner-triangle-icon-size-100:5px; + --spectrum-corner-triangle-icon-size-200:6px; + --spectrum-corner-triangle-icon-size-300:7px; + --spectrum-field-width-medium:208px; + --spectrum-field-width-large:224px; + --spectrum-field-width-extra-large:240px; --spectrum-font-size-50:11px; --spectrum-font-size-75:12px; --spectrum-font-size-100:14px; diff --git a/tokens/dist/css/spectrum/custom-vars.css b/tokens/dist/css/spectrum/custom-vars.css index ee28dfa0c36..bdd819c28e0 100644 --- a/tokens/dist/css/spectrum/custom-vars.css +++ b/tokens/dist/css/spectrum/custom-vars.css @@ -37,4 +37,7 @@ --spectrum-docs-static-white-background-color:rgba(var(--spectrum-docs-static-white-background-color-rgb)); --spectrum-docs-static-black-background-color-rgb:206, 247, 243; --spectrum-docs-static-black-background-color:rgba(var(--spectrum-docs-static-black-background-color-rgb)); + + /* override for Spectrum Tokens value until a Style Dictionary transform gets written for our usage */ + --spectrum-corner-radius-1000:9999px; } diff --git a/tokens/dist/css/spectrum/global-vars.css b/tokens/dist/css/spectrum/global-vars.css deleted file mode 100644 index a383bc8aaae..00000000000 --- a/tokens/dist/css/spectrum/global-vars.css +++ /dev/null @@ -1,41 +0,0 @@ -.spectrum{ - --spectrum-neutral-background-color-selected-default:var(--spectrum-gray-700); - --spectrum-neutral-background-color-selected-hover:var(--spectrum-gray-800); - --spectrum-neutral-background-color-selected-down:var(--spectrum-gray-900); - --spectrum-neutral-background-color-selected-key-focus:var(--spectrum-gray-800); - --spectrum-slider-track-thickness:2px; - --spectrum-slider-handle-gap:4px; - --spectrum-picker-border-width:var(--spectrum-border-width-100); - --spectrum-in-field-button-fill-stacked-inner-border-rounding:0px; - --spectrum-in-field-button-edge-to-fill:0px; - --spectrum-in-field-button-stacked-inner-edge-to-fill:0px; - --spectrum-in-field-button-outer-edge-to-disclosure-icon-stacked-medium:3px; - --spectrum-in-field-button-outer-edge-to-disclosure-icon-stacked-large:4px; - --spectrum-in-field-button-outer-edge-to-disclosure-icon-stacked-extra-large:5px; - --spectrum-in-field-button-inner-edge-to-disclosure-icon-stacked-small:var(--spectrum-in-field-button-outer-edge-to-disclosure-icon-stacked-small); - --spectrum-in-field-button-inner-edge-to-disclosure-icon-stacked-medium:var(--spectrum-in-field-button-outer-edge-to-disclosure-icon-stacked-medium); - --spectrum-in-field-button-inner-edge-to-disclosure-icon-stacked-large:var(--spectrum-in-field-button-outer-edge-to-disclosure-icon-stacked-large); - --spectrum-in-field-button-inner-edge-to-disclosure-icon-stacked-extra-large:var(--spectrum-in-field-button-outer-edge-to-disclosure-icon-stacked-extra-large); - --spectrum-corner-radius-75:2px; - --spectrum-drop-shadow-x:0px; - --spectrum-border-width-100:1px; - --spectrum-accent-color-100:var(--spectrum-blue-100); - --spectrum-accent-color-200:var(--spectrum-blue-200); - --spectrum-accent-color-300:var(--spectrum-blue-300); - --spectrum-accent-color-400:var(--spectrum-blue-400); - --spectrum-accent-color-500:var(--spectrum-blue-500); - --spectrum-accent-color-600:var(--spectrum-blue-600); - --spectrum-accent-color-700:var(--spectrum-blue-700); - --spectrum-accent-color-800:var(--spectrum-blue-800); - --spectrum-accent-color-900:var(--spectrum-blue-900); - --spectrum-accent-color-1000:var(--spectrum-blue-1000); - --spectrum-accent-color-1100:var(--spectrum-blue-1100); - --spectrum-accent-color-1200:var(--spectrum-blue-1200); - --spectrum-accent-color-1300:var(--spectrum-blue-1300); - --spectrum-accent-color-1400:var(--spectrum-blue-1400); - --spectrum-heading-sans-serif-font-weight:var(--spectrum-bold-font-weight); - --spectrum-heading-serif-font-weight:var(--spectrum-bold-font-weight); - --spectrum-heading-cjk-font-weight:var(--spectrum-extra-bold-font-weight); - --spectrum-heading-sans-serif-emphasized-font-weight:var(--spectrum-bold-font-weight); - --spectrum-heading-serif-emphasized-font-weight:var(--spectrum-bold-font-weight); -} diff --git a/tokens/dist/css/spectrum/large-vars.css b/tokens/dist/css/spectrum/large-vars.css deleted file mode 100644 index 7b8e056e61a..00000000000 --- a/tokens/dist/css/spectrum/large-vars.css +++ /dev/null @@ -1,50 +0,0 @@ -.spectrum--large{ - --spectrum-checkbox-control-size-small:16px; - --spectrum-checkbox-control-size-medium:18px; - --spectrum-checkbox-control-size-large:20px; - --spectrum-checkbox-control-size-extra-large:22px; - --spectrum-checkbox-top-to-control-small:7px; - --spectrum-checkbox-top-to-control-medium:11px; - --spectrum-checkbox-top-to-control-large:15px; - --spectrum-checkbox-top-to-control-extra-large:19px; - --spectrum-switch-control-width-small:32px; - --spectrum-switch-control-width-medium:36px; - --spectrum-switch-control-width-large:41px; - --spectrum-switch-control-width-extra-large:46px; - --spectrum-switch-control-height-small:16px; - --spectrum-switch-control-height-medium:18px; - --spectrum-switch-control-height-large:20px; - --spectrum-switch-control-height-extra-large:22px; - --spectrum-switch-top-to-control-small:7px; - --spectrum-switch-top-to-control-medium:11px; - --spectrum-switch-top-to-control-large:15px; - --spectrum-switch-top-to-control-extra-large:19px; - --spectrum-radio-button-control-size-small:16px; - --spectrum-radio-button-control-size-medium:18px; - --spectrum-radio-button-control-size-large:20px; - --spectrum-radio-button-control-size-extra-large:22px; - --spectrum-radio-button-top-to-control-small:7px; - --spectrum-radio-button-top-to-control-medium:11px; - --spectrum-radio-button-top-to-control-large:15px; - --spectrum-radio-button-top-to-control-extra-large:19px; - --spectrum-slider-control-height-small:18px; - --spectrum-slider-control-height-medium:20px; - --spectrum-slider-control-height-large:22px; - --spectrum-slider-control-height-extra-large:26px; - --spectrum-slider-handle-size-small:18px; - --spectrum-slider-handle-size-medium:20px; - --spectrum-slider-handle-size-large:22px; - --spectrum-slider-handle-size-extra-large:26px; - --spectrum-slider-handle-border-width-down-small:7px; - --spectrum-slider-handle-border-width-down-medium:8px; - --spectrum-slider-handle-border-width-down-large:9px; - --spectrum-slider-handle-border-width-down-extra-large:11px; - --spectrum-slider-bottom-to-handle-small:6px; - --spectrum-slider-bottom-to-handle-medium:10px; - --spectrum-slider-bottom-to-handle-large:14px; - --spectrum-slider-bottom-to-handle-extra-large:17px; - --spectrum-corner-radius-100:5px; - --spectrum-corner-radius-200:10px; - --spectrum-drop-shadow-y:2px; - --spectrum-drop-shadow-blur:6px; -} diff --git a/tokens/dist/css/spectrum/medium-vars.css b/tokens/dist/css/spectrum/medium-vars.css deleted file mode 100644 index bd8298fd061..00000000000 --- a/tokens/dist/css/spectrum/medium-vars.css +++ /dev/null @@ -1,50 +0,0 @@ -.spectrum--medium{ - --spectrum-checkbox-control-size-small:12px; - --spectrum-checkbox-control-size-medium:14px; - --spectrum-checkbox-control-size-large:16px; - --spectrum-checkbox-control-size-extra-large:18px; - --spectrum-checkbox-top-to-control-small:6px; - --spectrum-checkbox-top-to-control-medium:9px; - --spectrum-checkbox-top-to-control-large:12px; - --spectrum-checkbox-top-to-control-extra-large:15px; - --spectrum-switch-control-width-small:23px; - --spectrum-switch-control-width-medium:26px; - --spectrum-switch-control-width-large:29px; - --spectrum-switch-control-width-extra-large:33px; - --spectrum-switch-control-height-small:12px; - --spectrum-switch-control-height-medium:14px; - --spectrum-switch-control-height-large:16px; - --spectrum-switch-control-height-extra-large:18px; - --spectrum-switch-top-to-control-small:6px; - --spectrum-switch-top-to-control-medium:9px; - --spectrum-switch-top-to-control-large:12px; - --spectrum-switch-top-to-control-extra-large:15px; - --spectrum-radio-button-control-size-small:12px; - --spectrum-radio-button-control-size-medium:14px; - --spectrum-radio-button-control-size-large:16px; - --spectrum-radio-button-control-size-extra-large:18px; - --spectrum-radio-button-top-to-control-small:6px; - --spectrum-radio-button-top-to-control-medium:9px; - --spectrum-radio-button-top-to-control-large:12px; - --spectrum-radio-button-top-to-control-extra-large:15px; - --spectrum-slider-control-height-small:14px; - --spectrum-slider-control-height-medium:16px; - --spectrum-slider-control-height-large:18px; - --spectrum-slider-control-height-extra-large:20px; - --spectrum-slider-handle-size-small:14px; - --spectrum-slider-handle-size-medium:16px; - --spectrum-slider-handle-size-large:18px; - --spectrum-slider-handle-size-extra-large:20px; - --spectrum-slider-handle-border-width-down-small:5px; - --spectrum-slider-handle-border-width-down-medium:6px; - --spectrum-slider-handle-border-width-down-large:7px; - --spectrum-slider-handle-border-width-down-extra-large:8px; - --spectrum-slider-bottom-to-handle-small:5px; - --spectrum-slider-bottom-to-handle-medium:8px; - --spectrum-slider-bottom-to-handle-large:11px; - --spectrum-slider-bottom-to-handle-extra-large:14px; - --spectrum-corner-radius-100:4px; - --spectrum-corner-radius-200:8px; - --spectrum-drop-shadow-y:1px; - --spectrum-drop-shadow-blur:4px; -} diff --git a/tokens/dist/index.css b/tokens/dist/index.css index fc9685e0c46..f81b7fe0cce 100644 --- a/tokens/dist/index.css +++ b/tokens/dist/index.css @@ -1,42 +1,36 @@ .spectrum--dark{ - --spectrum-overlay-opacity:0.5; + --spectrum-overlay-opacity:0.6; --spectrum-drop-shadow-color-rgb:0, 0, 0; - --spectrum-drop-shadow-color-opacity:0.5; + --spectrum-drop-shadow-color-opacity:0.8; --spectrum-drop-shadow-color:rgba(var(--spectrum-drop-shadow-color-rgb), var(--spectrum-drop-shadow-color-opacity)); - --spectrum-background-base-color:var(--spectrum-gray-50); - --spectrum-background-layer-1-color:var(--spectrum-gray-75); - --spectrum-background-layer-2-color:var(--spectrum-gray-100); - --spectrum-neutral-background-color-default:var(--spectrum-gray-400); - --spectrum-neutral-background-color-hover:var(--spectrum-gray-300); - --spectrum-neutral-background-color-down:var(--spectrum-gray-200); - --spectrum-neutral-background-color-key-focus:var(--spectrum-gray-300); - --spectrum-neutral-subdued-background-color-default:var(--spectrum-gray-400); - --spectrum-neutral-subdued-background-color-hover:var(--spectrum-gray-300); - --spectrum-neutral-subdued-background-color-down:var(--spectrum-gray-200); - --spectrum-neutral-subdued-background-color-key-focus:var(--spectrum-gray-300); - --spectrum-accent-background-color-default:var(--spectrum-accent-color-500); - --spectrum-accent-background-color-hover:var(--spectrum-accent-color-400); - --spectrum-accent-background-color-down:var(--spectrum-accent-color-300); - --spectrum-accent-background-color-key-focus:var(--spectrum-accent-color-400); - --spectrum-informative-background-color-default:var(--spectrum-informative-color-500); - --spectrum-informative-background-color-hover:var(--spectrum-informative-color-400); - --spectrum-informative-background-color-down:var(--spectrum-informative-color-300); - --spectrum-informative-background-color-key-focus:var(--spectrum-informative-color-400); - --spectrum-negative-background-color-default:var(--spectrum-negative-color-500); - --spectrum-negative-background-color-hover:var(--spectrum-negative-color-400); - --spectrum-negative-background-color-down:var(--spectrum-negative-color-300); - --spectrum-negative-background-color-key-focus:var(--spectrum-negative-color-400); - --spectrum-positive-background-color-default:var(--spectrum-positive-color-500); - --spectrum-positive-background-color-hover:var(--spectrum-positive-color-400); - --spectrum-positive-background-color-down:var(--spectrum-positive-color-300); - --spectrum-positive-background-color-key-focus:var(--spectrum-positive-color-400); - --spectrum-notice-background-color-default:var(--spectrum-notice-color-800); - --spectrum-gray-background-color-default:var(--spectrum-gray-700); + --spectrum-background-layer-2-color:var(--spectrum-gray-75); + --spectrum-neutral-subdued-background-color-default:var(--spectrum-gray-500); + --spectrum-neutral-subdued-background-color-hover:var(--spectrum-gray-400); + --spectrum-neutral-subdued-background-color-down:var(--spectrum-gray-400); + --spectrum-neutral-subdued-background-color-key-focus:var(--spectrum-gray-400); + --spectrum-accent-background-color-default:var(--spectrum-accent-color-700); + --spectrum-accent-background-color-hover:var(--spectrum-accent-color-600); + --spectrum-accent-background-color-down:var(--spectrum-accent-color-600); + --spectrum-accent-background-color-key-focus:var(--spectrum-accent-color-600); + --spectrum-informative-background-color-default:var(--spectrum-informative-color-700); + --spectrum-informative-background-color-hover:var(--spectrum-informative-color-600); + --spectrum-informative-background-color-down:var(--spectrum-informative-color-600); + --spectrum-informative-background-color-key-focus:var(--spectrum-informative-color-600); + --spectrum-negative-background-color-default:var(--spectrum-negative-color-700); + --spectrum-negative-background-color-hover:var(--spectrum-negative-color-600); + --spectrum-negative-background-color-down:var(--spectrum-negative-color-600); + --spectrum-negative-background-color-key-focus:var(--spectrum-negative-color-600); + --spectrum-positive-background-color-default:var(--spectrum-positive-color-700); + --spectrum-positive-background-color-hover:var(--spectrum-positive-color-600); + --spectrum-positive-background-color-down:var(--spectrum-positive-color-600); + --spectrum-positive-background-color-key-focus:var(--spectrum-positive-color-600); + --spectrum-notice-background-color-default:var(--spectrum-notice-color-900); + --spectrum-gray-background-color-default:var(--spectrum-gray-500); --spectrum-red-background-color-default:var(--spectrum-red-700); - --spectrum-orange-background-color-default:var(--spectrum-orange-800); - --spectrum-yellow-background-color-default:var(--spectrum-yellow-1000); - --spectrum-chartreuse-background-color-default:var(--spectrum-chartreuse-900); - --spectrum-celery-background-color-default:var(--spectrum-celery-800); + --spectrum-orange-background-color-default:var(--spectrum-orange-900); + --spectrum-yellow-background-color-default:var(--spectrum-yellow-1100); + --spectrum-chartreuse-background-color-default:var(--spectrum-chartreuse-1000); + --spectrum-celery-background-color-default:var(--spectrum-celery-900); --spectrum-green-background-color-default:var(--spectrum-green-700); --spectrum-seafoam-background-color-default:var(--spectrum-seafoam-700); --spectrum-cyan-background-color-default:var(--spectrum-cyan-700); @@ -65,393 +59,621 @@ --spectrum-purple-visual-color:var(--spectrum-purple-900); --spectrum-fuchsia-visual-color:var(--spectrum-fuchsia-900); --spectrum-magenta-visual-color:var(--spectrum-magenta-900); + --spectrum-background-elevated-color:var(--spectrum-gray-75); + --spectrum-background-pasteboard-color:var(--spectrum-gray-25); + --spectrum-brown-visual-color:var(--spectrum-brown-900); + --spectrum-cinnamon-visual-color:var(--spectrum-cinnamon-900); + --spectrum-pink-visual-color:var(--spectrum-pink-900); + --spectrum-silver-visual-color:var(--spectrum-silver-900); + --spectrum-turquoise-visual-color:var(--spectrum-turquoise-900); + --spectrum-brown-background-color-default:var(--spectrum-brown-700); + --spectrum-cinnamon-background-color-default:var(--spectrum-cinnamon-700); + --spectrum-pink-background-color-default:var(--spectrum-pink-700); + --spectrum-silver-background-color-default:var(--spectrum-silver-700); + --spectrum-turquoise-background-color-default:var(--spectrum-turquoise-700); --spectrum-opacity-checkerboard-square-dark:var(--spectrum-gray-800); - --spectrum-gray-50-rgb:29, 29, 29; + --spectrum-gray-25-rgb:17, 17, 17; + --spectrum-gray-25:rgba(var(--spectrum-gray-25-rgb)); + --spectrum-gray-50-rgb:27, 27, 27; --spectrum-gray-50:rgba(var(--spectrum-gray-50-rgb)); - --spectrum-gray-75-rgb:38, 38, 38; + --spectrum-gray-75-rgb:34, 34, 34; --spectrum-gray-75:rgba(var(--spectrum-gray-75-rgb)); - --spectrum-gray-100-rgb:50, 50, 50; + --spectrum-gray-100-rgb:44, 44, 44; --spectrum-gray-100:rgba(var(--spectrum-gray-100-rgb)); - --spectrum-gray-200-rgb:63, 63, 63; + --spectrum-gray-200-rgb:50, 50, 50; --spectrum-gray-200:rgba(var(--spectrum-gray-200-rgb)); - --spectrum-gray-300-rgb:84, 84, 84; + --spectrum-gray-300-rgb:57, 57, 57; --spectrum-gray-300:rgba(var(--spectrum-gray-300-rgb)); - --spectrum-gray-400-rgb:112, 112, 112; + --spectrum-gray-400-rgb:68, 68, 68; --spectrum-gray-400:rgba(var(--spectrum-gray-400-rgb)); - --spectrum-gray-500-rgb:144, 144, 144; + --spectrum-gray-500-rgb:109, 109, 109; --spectrum-gray-500:rgba(var(--spectrum-gray-500-rgb)); - --spectrum-gray-600-rgb:178, 178, 178; + --spectrum-gray-600-rgb:138, 138, 138; --spectrum-gray-600:rgba(var(--spectrum-gray-600-rgb)); - --spectrum-gray-700-rgb:209, 209, 209; + --spectrum-gray-700-rgb:175, 175, 175; --spectrum-gray-700:rgba(var(--spectrum-gray-700-rgb)); - --spectrum-gray-800-rgb:235, 235, 235; + --spectrum-gray-800-rgb:219, 219, 219; --spectrum-gray-800:rgba(var(--spectrum-gray-800-rgb)); - --spectrum-gray-900-rgb:255, 255, 255; + --spectrum-gray-900-rgb:242, 242, 242; --spectrum-gray-900:rgba(var(--spectrum-gray-900-rgb)); - --spectrum-blue-100-rgb:0, 56, 119; + --spectrum-gray-1000-rgb:255, 255, 255; + --spectrum-gray-1000:rgba(var(--spectrum-gray-1000-rgb)); + --spectrum-blue-100-rgb:14, 23, 63; --spectrum-blue-100:rgba(var(--spectrum-blue-100-rgb)); - --spectrum-blue-200-rgb:0, 65, 138; + --spectrum-blue-200-rgb:15, 28, 82; --spectrum-blue-200:rgba(var(--spectrum-blue-200-rgb)); - --spectrum-blue-300-rgb:0, 77, 163; + --spectrum-blue-300-rgb:12, 33, 117; --spectrum-blue-300:rgba(var(--spectrum-blue-300-rgb)); - --spectrum-blue-400-rgb:0, 89, 194; + --spectrum-blue-400-rgb:18, 45, 154; --spectrum-blue-400:rgba(var(--spectrum-blue-400-rgb)); - --spectrum-blue-500-rgb:3, 103, 224; + --spectrum-blue-500-rgb:26, 58, 195; --spectrum-blue-500:rgba(var(--spectrum-blue-500-rgb)); - --spectrum-blue-600-rgb:19, 121, 243; + --spectrum-blue-600-rgb:37, 73, 229; --spectrum-blue-600:rgba(var(--spectrum-blue-600-rgb)); - --spectrum-blue-700-rgb:52, 143, 244; + --spectrum-blue-700-rgb:52, 91, 248; --spectrum-blue-700:rgba(var(--spectrum-blue-700-rgb)); - --spectrum-blue-800-rgb:84, 163, 246; + --spectrum-blue-800-rgb:69, 110, 254; --spectrum-blue-800:rgba(var(--spectrum-blue-800-rgb)); - --spectrum-blue-900-rgb:114, 183, 249; + --spectrum-blue-900-rgb:86, 129, 255; --spectrum-blue-900:rgba(var(--spectrum-blue-900-rgb)); - --spectrum-blue-1000-rgb:143, 202, 252; + --spectrum-blue-1000-rgb:105, 149, 254; --spectrum-blue-1000:rgba(var(--spectrum-blue-1000-rgb)); - --spectrum-blue-1100-rgb:174, 219, 254; + --spectrum-blue-1100-rgb:124, 169, 252; --spectrum-blue-1100:rgba(var(--spectrum-blue-1100-rgb)); - --spectrum-blue-1200-rgb:204, 233, 255; + --spectrum-blue-1200-rgb:152, 192, 252; --spectrum-blue-1200:rgba(var(--spectrum-blue-1200-rgb)); - --spectrum-blue-1300-rgb:232, 246, 255; + --spectrum-blue-1300-rgb:181, 213, 253; --spectrum-blue-1300:rgba(var(--spectrum-blue-1300-rgb)); - --spectrum-blue-1400-rgb:255, 255, 255; + --spectrum-blue-1400-rgb:213, 231, 254; --spectrum-blue-1400:rgba(var(--spectrum-blue-1400-rgb)); - --spectrum-red-100-rgb:123, 0, 0; + --spectrum-blue-1500-rgb:238, 245, 255; + --spectrum-blue-1500:rgba(var(--spectrum-blue-1500-rgb)); + --spectrum-blue-1600-rgb:255, 255, 255; + --spectrum-blue-1600:rgba(var(--spectrum-blue-1600-rgb)); + --spectrum-red-100-rgb:54, 10, 3; --spectrum-red-100:rgba(var(--spectrum-red-100-rgb)); - --spectrum-red-200-rgb:141, 0, 0; + --spectrum-red-200-rgb:68, 13, 5; --spectrum-red-200:rgba(var(--spectrum-red-200-rgb)); - --spectrum-red-300-rgb:165, 0, 0; + --spectrum-red-300-rgb:87, 17, 7; --spectrum-red-300:rgba(var(--spectrum-red-300-rgb)); - --spectrum-red-400-rgb:190, 4, 3; + --spectrum-red-400-rgb:115, 24, 11; --spectrum-red-400:rgba(var(--spectrum-red-400-rgb)); - --spectrum-red-500-rgb:215, 25, 19; + --spectrum-red-500-rgb:147, 31, 17; --spectrum-red-500:rgba(var(--spectrum-red-500-rgb)); - --spectrum-red-600-rgb:234, 56, 41; + --spectrum-red-600-rgb:177, 38, 23; --spectrum-red-600:rgba(var(--spectrum-red-600-rgb)); - --spectrum-red-700-rgb:246, 88, 67; + --spectrum-red-700-rgb:205, 46, 29; --spectrum-red-700:rgba(var(--spectrum-red-700-rgb)); - --spectrum-red-800-rgb:255, 117, 94; + --spectrum-red-800-rgb:230, 54, 35; --spectrum-red-800:rgba(var(--spectrum-red-800-rgb)); - --spectrum-red-900-rgb:255, 149, 129; + --spectrum-red-900-rgb:252, 67, 46; --spectrum-red-900:rgba(var(--spectrum-red-900-rgb)); - --spectrum-red-1000-rgb:255, 176, 161; + --spectrum-red-1000-rgb:255, 103, 86; --spectrum-red-1000:rgba(var(--spectrum-red-1000-rgb)); - --spectrum-red-1100-rgb:255, 201, 189; + --spectrum-red-1100-rgb:255, 134, 120; --spectrum-red-1100:rgba(var(--spectrum-red-1100-rgb)); - --spectrum-red-1200-rgb:255, 222, 216; + --spectrum-red-1200-rgb:255, 167, 157; --spectrum-red-1200:rgba(var(--spectrum-red-1200-rgb)); - --spectrum-red-1300-rgb:255, 241, 238; + --spectrum-red-1300-rgb:255, 196, 189; --spectrum-red-1300:rgba(var(--spectrum-red-1300-rgb)); - --spectrum-red-1400-rgb:255, 255, 255; + --spectrum-red-1400-rgb:255, 222, 219; --spectrum-red-1400:rgba(var(--spectrum-red-1400-rgb)); - --spectrum-orange-100-rgb:102, 37, 0; + --spectrum-red-1500-rgb:255, 242, 240; + --spectrum-red-1500:rgba(var(--spectrum-red-1500-rgb)); + --spectrum-red-1600-rgb:255, 255, 255; + --spectrum-red-1600:rgba(var(--spectrum-red-1600-rgb)); + --spectrum-orange-100-rgb:49, 16, 0; --spectrum-orange-100:rgba(var(--spectrum-orange-100-rgb)); - --spectrum-orange-200-rgb:117, 45, 0; + --spectrum-orange-200-rgb:61, 21, 0; --spectrum-orange-200:rgba(var(--spectrum-orange-200-rgb)); - --spectrum-orange-300-rgb:137, 55, 0; + --spectrum-orange-300-rgb:80, 27, 0; --spectrum-orange-300:rgba(var(--spectrum-orange-300-rgb)); - --spectrum-orange-400-rgb:158, 66, 0; + --spectrum-orange-400-rgb:106, 36, 0; --spectrum-orange-400:rgba(var(--spectrum-orange-400-rgb)); - --spectrum-orange-500-rgb:180, 78, 0; + --spectrum-orange-500-rgb:135, 47, 0; --spectrum-orange-500:rgba(var(--spectrum-orange-500-rgb)); - --spectrum-orange-600-rgb:202, 93, 0; + --spectrum-orange-600-rgb:162, 59, 0; --spectrum-orange-600:rgba(var(--spectrum-orange-600-rgb)); - --spectrum-orange-700-rgb:225, 109, 0; + --spectrum-orange-700-rgb:185, 73, 0; --spectrum-orange-700:rgba(var(--spectrum-orange-700-rgb)); - --spectrum-orange-800-rgb:244, 129, 12; + --spectrum-orange-800-rgb:205, 86, 0; --spectrum-orange-800:rgba(var(--spectrum-orange-800-rgb)); - --spectrum-orange-900-rgb:254, 154, 46; + --spectrum-orange-900-rgb:224, 100, 0; --spectrum-orange-900:rgba(var(--spectrum-orange-900-rgb)); - --spectrum-orange-1000-rgb:255, 181, 88; + --spectrum-orange-1000-rgb:243, 117, 0; --spectrum-orange-1000:rgba(var(--spectrum-orange-1000-rgb)); - --spectrum-orange-1100-rgb:253, 206, 136; + --spectrum-orange-1100-rgb:255, 137, 0; --spectrum-orange-1100:rgba(var(--spectrum-orange-1100-rgb)); - --spectrum-orange-1200-rgb:255, 225, 179; + --spectrum-orange-1200-rgb:255, 173, 45; --spectrum-orange-1200:rgba(var(--spectrum-orange-1200-rgb)); - --spectrum-orange-1300-rgb:255, 242, 221; + --spectrum-orange-1300-rgb:255, 201, 116; --spectrum-orange-1300:rgba(var(--spectrum-orange-1300-rgb)); - --spectrum-orange-1400-rgb:255, 253, 249; + --spectrum-orange-1400-rgb:255, 225, 178; --spectrum-orange-1400:rgba(var(--spectrum-orange-1400-rgb)); - --spectrum-yellow-100-rgb:76, 54, 0; + --spectrum-orange-1500-rgb:255, 243, 225; + --spectrum-orange-1500:rgba(var(--spectrum-orange-1500-rgb)); + --spectrum-orange-1600-rgb:255, 255, 255; + --spectrum-orange-1600:rgba(var(--spectrum-orange-1600-rgb)); + --spectrum-yellow-100-rgb:37, 23, 0; --spectrum-yellow-100:rgba(var(--spectrum-yellow-100-rgb)); - --spectrum-yellow-200-rgb:88, 64, 0; + --spectrum-yellow-200-rgb:47, 29, 0; --spectrum-yellow-200:rgba(var(--spectrum-yellow-200-rgb)); - --spectrum-yellow-300-rgb:103, 76, 0; + --spectrum-yellow-300-rgb:61, 39, 0; --spectrum-yellow-300:rgba(var(--spectrum-yellow-300-rgb)); - --spectrum-yellow-400-rgb:119, 89, 0; + --spectrum-yellow-400-rgb:83, 52, 0; --spectrum-yellow-400:rgba(var(--spectrum-yellow-400-rgb)); - --spectrum-yellow-500-rgb:136, 104, 0; + --spectrum-yellow-500-rgb:107, 67, 0; --spectrum-yellow-500:rgba(var(--spectrum-yellow-500-rgb)); - --spectrum-yellow-600-rgb:155, 120, 0; + --spectrum-yellow-600-rgb:130, 82, 0; --spectrum-yellow-600:rgba(var(--spectrum-yellow-600-rgb)); - --spectrum-yellow-700-rgb:174, 137, 0; + --spectrum-yellow-700-rgb:151, 97, 0; --spectrum-yellow-700:rgba(var(--spectrum-yellow-700-rgb)); - --spectrum-yellow-800-rgb:192, 156, 0; + --spectrum-yellow-800-rgb:169, 110, 0; --spectrum-yellow-800:rgba(var(--spectrum-yellow-800-rgb)); - --spectrum-yellow-900-rgb:211, 174, 0; + --spectrum-yellow-900-rgb:186, 124, 0; --spectrum-yellow-900:rgba(var(--spectrum-yellow-900-rgb)); - --spectrum-yellow-1000-rgb:228, 194, 0; + --spectrum-yellow-1000-rgb:203, 141, 0; --spectrum-yellow-1000:rgba(var(--spectrum-yellow-1000-rgb)); - --spectrum-yellow-1100-rgb:244, 213, 0; + --spectrum-yellow-1100-rgb:218, 159, 0; --spectrum-yellow-1100:rgba(var(--spectrum-yellow-1100-rgb)); - --spectrum-yellow-1200-rgb:249, 232, 92; + --spectrum-yellow-1200-rgb:235, 183, 0; --spectrum-yellow-1200:rgba(var(--spectrum-yellow-1200-rgb)); - --spectrum-yellow-1300-rgb:252, 246, 187; + --spectrum-yellow-1300-rgb:249, 206, 0; --spectrum-yellow-1300:rgba(var(--spectrum-yellow-1300-rgb)); - --spectrum-yellow-1400-rgb:255, 255, 255; + --spectrum-yellow-1400-rgb:255, 230, 86; --spectrum-yellow-1400:rgba(var(--spectrum-yellow-1400-rgb)); - --spectrum-chartreuse-100-rgb:48, 64, 0; + --spectrum-yellow-1500-rgb:255, 246, 195; + --spectrum-yellow-1500:rgba(var(--spectrum-yellow-1500-rgb)); + --spectrum-yellow-1600-rgb:255, 255, 255; + --spectrum-yellow-1600:rgba(var(--spectrum-yellow-1600-rgb)); + --spectrum-chartreuse-100-rgb:23, 28, 0; --spectrum-chartreuse-100:rgba(var(--spectrum-chartreuse-100-rgb)); - --spectrum-chartreuse-200-rgb:55, 74, 0; + --spectrum-chartreuse-200-rgb:30, 36, 0; --spectrum-chartreuse-200:rgba(var(--spectrum-chartreuse-200-rgb)); - --spectrum-chartreuse-300-rgb:65, 87, 0; + --spectrum-chartreuse-300-rgb:39, 47, 0; --spectrum-chartreuse-300:rgba(var(--spectrum-chartreuse-300-rgb)); - --spectrum-chartreuse-400-rgb:76, 102, 0; + --spectrum-chartreuse-400-rgb:53, 63, 0; --spectrum-chartreuse-400:rgba(var(--spectrum-chartreuse-400-rgb)); - --spectrum-chartreuse-500-rgb:89, 118, 0; + --spectrum-chartreuse-500-rgb:68, 82, 0; --spectrum-chartreuse-500:rgba(var(--spectrum-chartreuse-500-rgb)); - --spectrum-chartreuse-600-rgb:102, 136, 0; + --spectrum-chartreuse-600-rgb:83, 100, 0; --spectrum-chartreuse-600:rgba(var(--spectrum-chartreuse-600-rgb)); - --spectrum-chartreuse-700-rgb:117, 154, 0; + --spectrum-chartreuse-700-rgb:97, 116, 0; --spectrum-chartreuse-700:rgba(var(--spectrum-chartreuse-700-rgb)); - --spectrum-chartreuse-800-rgb:132, 173, 1; + --spectrum-chartreuse-800-rgb:109, 131, 0; --spectrum-chartreuse-800:rgba(var(--spectrum-chartreuse-800-rgb)); - --spectrum-chartreuse-900-rgb:148, 192, 8; + --spectrum-chartreuse-900-rgb:122, 147, 0; --spectrum-chartreuse-900:rgba(var(--spectrum-chartreuse-900-rgb)); - --spectrum-chartreuse-1000-rgb:166, 211, 18; + --spectrum-chartreuse-1000-rgb:136, 164, 0; --spectrum-chartreuse-1000:rgba(var(--spectrum-chartreuse-1000-rgb)); - --spectrum-chartreuse-1100-rgb:184, 229, 37; + --spectrum-chartreuse-1100-rgb:151, 181, 0; --spectrum-chartreuse-1100:rgba(var(--spectrum-chartreuse-1100-rgb)); - --spectrum-chartreuse-1200-rgb:205, 245, 71; + --spectrum-chartreuse-1200-rgb:169, 203, 0; --spectrum-chartreuse-1200:rgba(var(--spectrum-chartreuse-1200-rgb)); - --spectrum-chartreuse-1300-rgb:231, 254, 154; + --spectrum-chartreuse-1300-rgb:187, 225, 0; --spectrum-chartreuse-1300:rgba(var(--spectrum-chartreuse-1300-rgb)); - --spectrum-chartreuse-1400-rgb:255, 255, 255; + --spectrum-chartreuse-1400-rgb:219, 240, 117; --spectrum-chartreuse-1400:rgba(var(--spectrum-chartreuse-1400-rgb)); - --spectrum-celery-100-rgb:0, 69, 10; + --spectrum-chartreuse-1500-rgb:242, 249, 206; + --spectrum-chartreuse-1500:rgba(var(--spectrum-chartreuse-1500-rgb)); + --spectrum-chartreuse-1600-rgb:255, 255, 255; + --spectrum-chartreuse-1600:rgba(var(--spectrum-chartreuse-1600-rgb)); + --spectrum-celery-100-rgb:11, 31, 0; --spectrum-celery-100:rgba(var(--spectrum-celery-100-rgb)); - --spectrum-celery-200-rgb:0, 80, 12; + --spectrum-celery-200-rgb:15, 38, 0; --spectrum-celery-200:rgba(var(--spectrum-celery-200-rgb)); - --spectrum-celery-300-rgb:0, 94, 14; + --spectrum-celery-300-rgb:21, 51, 1; --spectrum-celery-300:rgba(var(--spectrum-celery-300-rgb)); - --spectrum-celery-400-rgb:0, 109, 15; + --spectrum-celery-400-rgb:31, 67, 4; --spectrum-celery-400:rgba(var(--spectrum-celery-400-rgb)); - --spectrum-celery-500-rgb:0, 127, 15; + --spectrum-celery-500-rgb:41, 86, 8; --spectrum-celery-500:rgba(var(--spectrum-celery-500-rgb)); - --spectrum-celery-600-rgb:0, 145, 18; + --spectrum-celery-600-rgb:50, 105, 11; --spectrum-celery-600:rgba(var(--spectrum-celery-600-rgb)); - --spectrum-celery-700-rgb:4, 165, 30; + --spectrum-celery-700-rgb:60, 122, 15; --spectrum-celery-700:rgba(var(--spectrum-celery-700-rgb)); - --spectrum-celery-800-rgb:34, 184, 51; + --spectrum-celery-800-rgb:69, 138, 19; --spectrum-celery-800:rgba(var(--spectrum-celery-800-rgb)); - --spectrum-celery-900-rgb:68, 202, 73; + --spectrum-celery-900-rgb:78, 154, 23; --spectrum-celery-900:rgba(var(--spectrum-celery-900-rgb)); - --spectrum-celery-1000-rgb:105, 220, 99; + --spectrum-celery-1000-rgb:88, 172, 28; --spectrum-celery-1000:rgba(var(--spectrum-celery-1000-rgb)); - --spectrum-celery-1100-rgb:142, 235, 127; + --spectrum-celery-1100-rgb:100, 190, 35; --spectrum-celery-1100:rgba(var(--spectrum-celery-1100-rgb)); - --spectrum-celery-1200-rgb:180, 247, 162; + --spectrum-celery-1200-rgb:116, 213, 46; --spectrum-celery-1200:rgba(var(--spectrum-celery-1200-rgb)); - --spectrum-celery-1300-rgb:221, 253, 211; + --spectrum-celery-1300-rgb:136, 234, 65; --spectrum-celery-1300:rgba(var(--spectrum-celery-1300-rgb)); - --spectrum-celery-1400-rgb:255, 255, 255; + --spectrum-celery-1400-rgb:170, 251, 112; --spectrum-celery-1400:rgba(var(--spectrum-celery-1400-rgb)); - --spectrum-green-100-rgb:4, 67, 41; + --spectrum-celery-1500-rgb:222, 255, 198; + --spectrum-celery-1500:rgba(var(--spectrum-celery-1500-rgb)); + --spectrum-celery-1600-rgb:255, 255, 255; + --spectrum-celery-1600:rgba(var(--spectrum-celery-1600-rgb)); + --spectrum-green-100-rgb:0, 30, 23; --spectrum-green-100:rgba(var(--spectrum-green-100-rgb)); - --spectrum-green-200-rgb:0, 78, 47; + --spectrum-green-200-rgb:0, 38, 29; --spectrum-green-200:rgba(var(--spectrum-green-200-rgb)); - --spectrum-green-300-rgb:0, 92, 56; + --spectrum-green-300-rgb:0, 51, 38; --spectrum-green-300:rgba(var(--spectrum-green-300-rgb)); - --spectrum-green-400-rgb:0, 108, 67; + --spectrum-green-400-rgb:0, 68, 48; --spectrum-green-400:rgba(var(--spectrum-green-400-rgb)); - --spectrum-green-500-rgb:0, 125, 78; + --spectrum-green-500-rgb:2, 87, 58; --spectrum-green-500:rgba(var(--spectrum-green-500-rgb)); - --spectrum-green-600-rgb:0, 143, 93; + --spectrum-green-600-rgb:3, 106, 67; --spectrum-green-600:rgba(var(--spectrum-green-600-rgb)); - --spectrum-green-700-rgb:18, 162, 108; + --spectrum-green-700-rgb:4, 124, 75; --spectrum-green-700:rgba(var(--spectrum-green-700-rgb)); - --spectrum-green-800-rgb:43, 180, 125; + --spectrum-green-800-rgb:6, 140, 82; --spectrum-green-800:rgba(var(--spectrum-green-800-rgb)); - --spectrum-green-900-rgb:67, 199, 143; + --spectrum-green-900-rgb:9, 157, 89; --spectrum-green-900:rgba(var(--spectrum-green-900-rgb)); - --spectrum-green-1000-rgb:94, 217, 162; + --spectrum-green-1000-rgb:14, 175, 98; --spectrum-green-1000:rgba(var(--spectrum-green-1000-rgb)); - --spectrum-green-1100-rgb:129, 233, 184; + --spectrum-green-1100-rgb:24, 193, 110; --spectrum-green-1100:rgba(var(--spectrum-green-1100-rgb)); - --spectrum-green-1200-rgb:177, 244, 209; + --spectrum-green-1200-rgb:57, 215, 134; --spectrum-green-1200:rgba(var(--spectrum-green-1200-rgb)); - --spectrum-green-1300-rgb:223, 250, 234; + --spectrum-green-1300-rgb:126, 231, 172; --spectrum-green-1300:rgba(var(--spectrum-green-1300-rgb)); - --spectrum-green-1400-rgb:254, 255, 252; + --spectrum-green-1400-rgb:189, 241, 208; --spectrum-green-1400:rgba(var(--spectrum-green-1400-rgb)); - --spectrum-seafoam-100-rgb:18, 65, 63; + --spectrum-green-1500-rgb:229, 250, 236; + --spectrum-green-1500:rgba(var(--spectrum-green-1500-rgb)); + --spectrum-green-1600-rgb:255, 255, 255; + --spectrum-green-1600:rgba(var(--spectrum-green-1600-rgb)); + --spectrum-seafoam-100-rgb:0, 30, 27; --spectrum-seafoam-100:rgba(var(--spectrum-seafoam-100-rgb)); - --spectrum-seafoam-200-rgb:14, 76, 73; + --spectrum-seafoam-200-rgb:0, 39, 35; --spectrum-seafoam-200:rgba(var(--spectrum-seafoam-200-rgb)); - --spectrum-seafoam-300-rgb:4, 90, 87; + --spectrum-seafoam-300-rgb:0, 50, 44; --spectrum-seafoam-300:rgba(var(--spectrum-seafoam-300-rgb)); - --spectrum-seafoam-400-rgb:0, 105, 101; + --spectrum-seafoam-400-rgb:0, 67, 59; --spectrum-seafoam-400:rgba(var(--spectrum-seafoam-400-rgb)); - --spectrum-seafoam-500-rgb:0, 122, 117; + --spectrum-seafoam-500-rgb:2, 86, 75; --spectrum-seafoam-500:rgba(var(--spectrum-seafoam-500-rgb)); - --spectrum-seafoam-600-rgb:0, 140, 135; + --spectrum-seafoam-600-rgb:4, 105, 89; --spectrum-seafoam-600:rgba(var(--spectrum-seafoam-600-rgb)); - --spectrum-seafoam-700-rgb:0, 158, 152; + --spectrum-seafoam-700-rgb:6, 122, 103; --spectrum-seafoam-700:rgba(var(--spectrum-seafoam-700-rgb)); - --spectrum-seafoam-800-rgb:3, 178, 171; + --spectrum-seafoam-800-rgb:8, 138, 116; --spectrum-seafoam-800:rgba(var(--spectrum-seafoam-800-rgb)); - --spectrum-seafoam-900-rgb:54, 197, 189; + --spectrum-seafoam-900-rgb:10, 154, 128; --spectrum-seafoam-900:rgba(var(--spectrum-seafoam-900-rgb)); - --spectrum-seafoam-1000-rgb:93, 214, 207; + --spectrum-seafoam-1000-rgb:12, 173, 142; --spectrum-seafoam-1000:rgba(var(--spectrum-seafoam-1000-rgb)); - --spectrum-seafoam-1100-rgb:132, 230, 223; + --spectrum-seafoam-1100-rgb:14, 190, 156; --spectrum-seafoam-1100:rgba(var(--spectrum-seafoam-1100-rgb)); - --spectrum-seafoam-1200-rgb:176, 242, 236; + --spectrum-seafoam-1200-rgb:29, 214, 176; --spectrum-seafoam-1200:rgba(var(--spectrum-seafoam-1200-rgb)); - --spectrum-seafoam-1300-rgb:223, 249, 246; + --spectrum-seafoam-1300-rgb:122, 229, 203; --spectrum-seafoam-1300:rgba(var(--spectrum-seafoam-1300-rgb)); - --spectrum-seafoam-1400-rgb:254, 255, 254; + --spectrum-seafoam-1400-rgb:186, 241, 222; --spectrum-seafoam-1400:rgba(var(--spectrum-seafoam-1400-rgb)); - --spectrum-cyan-100-rgb:0, 61, 98; + --spectrum-seafoam-1500-rgb:229, 249, 243; + --spectrum-seafoam-1500:rgba(var(--spectrum-seafoam-1500-rgb)); + --spectrum-seafoam-1600-rgb:255, 255, 255; + --spectrum-seafoam-1600:rgba(var(--spectrum-seafoam-1600-rgb)); + --spectrum-cyan-100-rgb:0, 29, 39; --spectrum-cyan-100:rgba(var(--spectrum-cyan-100-rgb)); - --spectrum-cyan-200-rgb:0, 71, 111; + --spectrum-cyan-200-rgb:0, 36, 49; --spectrum-cyan-200:rgba(var(--spectrum-cyan-200-rgb)); - --spectrum-cyan-300-rgb:0, 85, 127; + --spectrum-cyan-300-rgb:0, 48, 65; --spectrum-cyan-300:rgba(var(--spectrum-cyan-300-rgb)); - --spectrum-cyan-400-rgb:0, 100, 145; + --spectrum-cyan-400-rgb:0, 64, 88; --spectrum-cyan-400:rgba(var(--spectrum-cyan-400-rgb)); - --spectrum-cyan-500-rgb:0, 116, 162; + --spectrum-cyan-500-rgb:0, 82, 113; --spectrum-cyan-500:rgba(var(--spectrum-cyan-500-rgb)); - --spectrum-cyan-600-rgb:0, 134, 180; + --spectrum-cyan-600-rgb:3, 99, 140; --spectrum-cyan-600:rgba(var(--spectrum-cyan-600-rgb)); - --spectrum-cyan-700-rgb:0, 153, 198; + --spectrum-cyan-700-rgb:8, 115, 168; --spectrum-cyan-700:rgba(var(--spectrum-cyan-700-rgb)); - --spectrum-cyan-800-rgb:14, 173, 215; + --spectrum-cyan-800-rgb:15, 128, 194; --spectrum-cyan-800:rgba(var(--spectrum-cyan-800-rgb)); - --spectrum-cyan-900-rgb:44, 193, 230; + --spectrum-cyan-900-rgb:24, 142, 220; --spectrum-cyan-900:rgba(var(--spectrum-cyan-900-rgb)); - --spectrum-cyan-1000-rgb:84, 211, 241; + --spectrum-cyan-1000-rgb:38, 159, 244; --spectrum-cyan-1000:rgba(var(--spectrum-cyan-1000-rgb)); - --spectrum-cyan-1100-rgb:127, 228, 249; + --spectrum-cyan-1100-rgb:63, 177, 255; --spectrum-cyan-1100:rgba(var(--spectrum-cyan-1100-rgb)); - --spectrum-cyan-1200-rgb:167, 241, 255; + --spectrum-cyan-1200-rgb:107, 199, 255; --spectrum-cyan-1200:rgba(var(--spectrum-cyan-1200-rgb)); - --spectrum-cyan-1300-rgb:215, 250, 255; + --spectrum-cyan-1300-rgb:152, 219, 255; --spectrum-cyan-1300:rgba(var(--spectrum-cyan-1300-rgb)); - --spectrum-cyan-1400-rgb:255, 255, 255; + --spectrum-cyan-1400-rgb:195, 236, 252; --spectrum-cyan-1400:rgba(var(--spectrum-cyan-1400-rgb)); - --spectrum-indigo-100-rgb:40, 44, 140; + --spectrum-cyan-1500-rgb:230, 248, 253; + --spectrum-cyan-1500:rgba(var(--spectrum-cyan-1500-rgb)); + --spectrum-cyan-1600-rgb:255, 255, 255; + --spectrum-cyan-1600:rgba(var(--spectrum-cyan-1600-rgb)); + --spectrum-indigo-100-rgb:30, 0, 93; --spectrum-indigo-100:rgba(var(--spectrum-indigo-100-rgb)); - --spectrum-indigo-200-rgb:47, 52, 163; + --spectrum-indigo-200-rgb:35, 0, 110; --spectrum-indigo-200:rgba(var(--spectrum-indigo-200-rgb)); - --spectrum-indigo-300-rgb:57, 63, 187; + --spectrum-indigo-300-rgb:47, 0, 140; --spectrum-indigo-300:rgba(var(--spectrum-indigo-300-rgb)); - --spectrum-indigo-400-rgb:70, 75, 211; + --spectrum-indigo-400-rgb:62, 12, 174; --spectrum-indigo-400:rgba(var(--spectrum-indigo-400-rgb)); - --spectrum-indigo-500-rgb:85, 91, 231; + --spectrum-indigo-500-rgb:79, 30, 209; --spectrum-indigo-500:rgba(var(--spectrum-indigo-500-rgb)); - --spectrum-indigo-600-rgb:104, 109, 244; + --spectrum-indigo-600-rgb:95, 52, 235; --spectrum-indigo-600:rgba(var(--spectrum-indigo-600-rgb)); - --spectrum-indigo-700-rgb:124, 129, 251; + --spectrum-indigo-700-rgb:109, 75, 248; --spectrum-indigo-700:rgba(var(--spectrum-indigo-700-rgb)); - --spectrum-indigo-800-rgb:145, 149, 255; + --spectrum-indigo-800-rgb:119, 97, 252; --spectrum-indigo-800:rgba(var(--spectrum-indigo-800-rgb)); - --spectrum-indigo-900-rgb:167, 170, 255; + --spectrum-indigo-900-rgb:128, 119, 254; --spectrum-indigo-900:rgba(var(--spectrum-indigo-900-rgb)); - --spectrum-indigo-1000-rgb:188, 190, 255; + --spectrum-indigo-1000-rgb:139, 141, 254; --spectrum-indigo-1000:rgba(var(--spectrum-indigo-1000-rgb)); - --spectrum-indigo-1100-rgb:208, 210, 255; + --spectrum-indigo-1100-rgb:153, 161, 255; --spectrum-indigo-1100:rgba(var(--spectrum-indigo-1100-rgb)); - --spectrum-indigo-1200-rgb:226, 228, 255; + --spectrum-indigo-1200-rgb:176, 186, 255; --spectrum-indigo-1200:rgba(var(--spectrum-indigo-1200-rgb)); - --spectrum-indigo-1300-rgb:243, 243, 254; + --spectrum-indigo-1300-rgb:199, 208, 255; --spectrum-indigo-1300:rgba(var(--spectrum-indigo-1300-rgb)); - --spectrum-indigo-1400-rgb:255, 255, 255; + --spectrum-indigo-1400-rgb:223, 228, 255; --spectrum-indigo-1400:rgba(var(--spectrum-indigo-1400-rgb)); - --spectrum-purple-100-rgb:76, 13, 157; + --spectrum-indigo-1500-rgb:243, 244, 255; + --spectrum-indigo-1500:rgba(var(--spectrum-indigo-1500-rgb)); + --spectrum-indigo-1600-rgb:255, 255, 255; + --spectrum-indigo-1600:rgba(var(--spectrum-indigo-1600-rgb)); + --spectrum-purple-100-rgb:41, 0, 79; --spectrum-purple-100:rgba(var(--spectrum-purple-100-rgb)); - --spectrum-purple-200-rgb:89, 17, 177; + --spectrum-purple-200-rgb:50, 0, 96; --spectrum-purple-200:rgba(var(--spectrum-purple-200-rgb)); - --spectrum-purple-300-rgb:105, 28, 200; + --spectrum-purple-300-rgb:64, 0, 122; --spectrum-purple-300:rgba(var(--spectrum-purple-300-rgb)); - --spectrum-purple-400-rgb:122, 45, 218; + --spectrum-purple-400-rgb:83, 0, 159; --spectrum-purple-400:rgba(var(--spectrum-purple-400-rgb)); - --spectrum-purple-500-rgb:140, 65, 233; + --spectrum-purple-500-rgb:107, 6, 195; --spectrum-purple-500:rgba(var(--spectrum-purple-500-rgb)); - --spectrum-purple-600-rgb:157, 87, 243; + --spectrum-purple-600-rgb:130, 34, 215; --spectrum-purple-600:rgba(var(--spectrum-purple-600-rgb)); - --spectrum-purple-700-rgb:172, 111, 249; + --spectrum-purple-700-rgb:148, 62, 224; --spectrum-purple-700:rgba(var(--spectrum-purple-700-rgb)); - --spectrum-purple-800-rgb:187, 135, 251; + --spectrum-purple-800-rgb:161, 84, 229; --spectrum-purple-800:rgba(var(--spectrum-purple-800-rgb)); - --spectrum-purple-900-rgb:202, 159, 252; + --spectrum-purple-900-rgb:173, 105, 233; --spectrum-purple-900:rgba(var(--spectrum-purple-900-rgb)); - --spectrum-purple-1000-rgb:215, 182, 254; + --spectrum-purple-1000-rgb:186, 127, 237; --spectrum-purple-1000:rgba(var(--spectrum-purple-1000-rgb)); - --spectrum-purple-1100-rgb:228, 204, 254; + --spectrum-purple-1100-rgb:197, 149, 240; --spectrum-purple-1100:rgba(var(--spectrum-purple-1100-rgb)); - --spectrum-purple-1200-rgb:239, 223, 255; + --spectrum-purple-1200-rgb:212, 176, 244; --spectrum-purple-1200:rgba(var(--spectrum-purple-1200-rgb)); - --spectrum-purple-1300-rgb:249, 240, 255; + --spectrum-purple-1300-rgb:225, 201, 247; --spectrum-purple-1300:rgba(var(--spectrum-purple-1300-rgb)); - --spectrum-purple-1400-rgb:255, 253, 255; + --spectrum-purple-1400-rgb:238, 224, 250; --spectrum-purple-1400:rgba(var(--spectrum-purple-1400-rgb)); - --spectrum-fuchsia-100-rgb:107, 3, 106; + --spectrum-purple-1500-rgb:248, 243, 253; + --spectrum-purple-1500:rgba(var(--spectrum-purple-1500-rgb)); + --spectrum-purple-1600-rgb:255, 255, 255; + --spectrum-purple-1600:rgba(var(--spectrum-purple-1600-rgb)); + --spectrum-fuchsia-100-rgb:50, 0, 61; --spectrum-fuchsia-100:rgba(var(--spectrum-fuchsia-100-rgb)); - --spectrum-fuchsia-200-rgb:123, 0, 123; + --spectrum-fuchsia-200-rgb:61, 0, 74; --spectrum-fuchsia-200:rgba(var(--spectrum-fuchsia-200-rgb)); - --spectrum-fuchsia-300-rgb:144, 0, 145; + --spectrum-fuchsia-300-rgb:79, 0, 95; --spectrum-fuchsia-300:rgba(var(--spectrum-fuchsia-300-rgb)); - --spectrum-fuchsia-400-rgb:165, 13, 166; + --spectrum-fuchsia-400-rgb:102, 9, 120; --spectrum-fuchsia-400:rgba(var(--spectrum-fuchsia-400-rgb)); - --spectrum-fuchsia-500-rgb:185, 37, 185; + --spectrum-fuchsia-500-rgb:127, 23, 146; --spectrum-fuchsia-500:rgba(var(--spectrum-fuchsia-500-rgb)); - --spectrum-fuchsia-600-rgb:205, 57, 206; + --spectrum-fuchsia-600-rgb:151, 38, 170; --spectrum-fuchsia-600:rgba(var(--spectrum-fuchsia-600-rgb)); - --spectrum-fuchsia-700-rgb:223, 81, 224; + --spectrum-fuchsia-700-rgb:173, 51, 192; --spectrum-fuchsia-700:rgba(var(--spectrum-fuchsia-700-rgb)); - --spectrum-fuchsia-800-rgb:235, 110, 236; + --spectrum-fuchsia-800-rgb:192, 64, 212; --spectrum-fuchsia-800:rgba(var(--spectrum-fuchsia-800-rgb)); - --spectrum-fuchsia-900-rgb:244, 140, 242; + --spectrum-fuchsia-900-rgb:213, 73, 235; --spectrum-fuchsia-900:rgba(var(--spectrum-fuchsia-900-rgb)); - --spectrum-fuchsia-1000-rgb:250, 168, 245; + --spectrum-fuchsia-1000-rgb:232, 91, 253; --spectrum-fuchsia-1000:rgba(var(--spectrum-fuchsia-1000-rgb)); - --spectrum-fuchsia-1100-rgb:254, 194, 248; + --spectrum-fuchsia-1100-rgb:240, 122, 255; --spectrum-fuchsia-1100:rgba(var(--spectrum-fuchsia-1100-rgb)); - --spectrum-fuchsia-1200-rgb:255, 219, 250; + --spectrum-fuchsia-1200-rgb:245, 159, 255; --spectrum-fuchsia-1200:rgba(var(--spectrum-fuchsia-1200-rgb)); - --spectrum-fuchsia-1300-rgb:255, 239, 252; + --spectrum-fuchsia-1300-rgb:248, 191, 255; --spectrum-fuchsia-1300:rgba(var(--spectrum-fuchsia-1300-rgb)); - --spectrum-fuchsia-1400-rgb:255, 253, 255; + --spectrum-fuchsia-1400-rgb:251, 219, 255; --spectrum-fuchsia-1400:rgba(var(--spectrum-fuchsia-1400-rgb)); - --spectrum-magenta-100-rgb:118, 0, 58; + --spectrum-fuchsia-1500-rgb:253, 241, 255; + --spectrum-fuchsia-1500:rgba(var(--spectrum-fuchsia-1500-rgb)); + --spectrum-fuchsia-1600-rgb:255, 255, 255; + --spectrum-fuchsia-1600:rgba(var(--spectrum-fuchsia-1600-rgb)); + --spectrum-magenta-100-rgb:59, 0, 22; --spectrum-magenta-100:rgba(var(--spectrum-magenta-100-rgb)); - --spectrum-magenta-200-rgb:137, 0, 66; + --spectrum-magenta-200-rgb:74, 0, 27; --spectrum-magenta-200:rgba(var(--spectrum-magenta-200-rgb)); - --spectrum-magenta-300-rgb:160, 0, 77; + --spectrum-magenta-300-rgb:93, 0, 34; --spectrum-magenta-300:rgba(var(--spectrum-magenta-300-rgb)); - --spectrum-magenta-400-rgb:182, 18, 90; + --spectrum-magenta-400-rgb:123, 0, 45; --spectrum-magenta-400:rgba(var(--spectrum-magenta-400-rgb)); - --spectrum-magenta-500-rgb:203, 38, 109; + --spectrum-magenta-500-rgb:152, 7, 60; --spectrum-magenta-500:rgba(var(--spectrum-magenta-500-rgb)); - --spectrum-magenta-600-rgb:222, 61, 130; + --spectrum-magenta-600-rgb:181, 19, 76; --spectrum-magenta-600:rgba(var(--spectrum-magenta-600-rgb)); - --spectrum-magenta-700-rgb:237, 87, 149; + --spectrum-magenta-700-rgb:207, 31, 92; --spectrum-magenta-700:rgba(var(--spectrum-magenta-700-rgb)); - --spectrum-magenta-800-rgb:249, 114, 167; + --spectrum-magenta-800-rgb:231, 41, 105; --spectrum-magenta-800:rgba(var(--spectrum-magenta-800-rgb)); - --spectrum-magenta-900-rgb:255, 143, 185; + --spectrum-magenta-900-rgb:255, 51, 119; --spectrum-magenta-900:rgba(var(--spectrum-magenta-900-rgb)); - --spectrum-magenta-1000-rgb:255, 172, 202; + --spectrum-magenta-1000-rgb:255, 96, 149; --spectrum-magenta-1000:rgba(var(--spectrum-magenta-1000-rgb)); - --spectrum-magenta-1100-rgb:255, 198, 218; + --spectrum-magenta-1100-rgb:255, 128, 171; --spectrum-magenta-1100:rgba(var(--spectrum-magenta-1100-rgb)); - --spectrum-magenta-1200-rgb:255, 221, 233; + --spectrum-magenta-1200-rgb:255, 163, 194; --spectrum-magenta-1200:rgba(var(--spectrum-magenta-1200-rgb)); - --spectrum-magenta-1300-rgb:255, 240, 245; + --spectrum-magenta-1300-rgb:255, 193, 214; --spectrum-magenta-1300:rgba(var(--spectrum-magenta-1300-rgb)); - --spectrum-magenta-1400-rgb:255, 252, 253; + --spectrum-magenta-1400-rgb:255, 220, 232; --spectrum-magenta-1400:rgba(var(--spectrum-magenta-1400-rgb)); + --spectrum-magenta-1500-rgb:255, 241, 246; + --spectrum-magenta-1500:rgba(var(--spectrum-magenta-1500-rgb)); + --spectrum-magenta-1600-rgb:255, 255, 255; + --spectrum-magenta-1600:rgba(var(--spectrum-magenta-1600-rgb)); + --spectrum-pink-100-rgb:58, 0, 37; + --spectrum-pink-100:rgba(var(--spectrum-pink-100-rgb)); + --spectrum-pink-200-rgb:71, 0, 44; + --spectrum-pink-200:rgba(var(--spectrum-pink-200-rgb)); + --spectrum-pink-300-rgb:90, 0, 57; + --spectrum-pink-300:rgba(var(--spectrum-pink-300-rgb)); + --spectrum-pink-400-rgb:115, 7, 75; + --spectrum-pink-400:rgba(var(--spectrum-pink-400-rgb)); + --spectrum-pink-500-rgb:143, 18, 97; + --spectrum-pink-500:rgba(var(--spectrum-pink-500-rgb)); + --spectrum-pink-600-rgb:171, 29, 119; + --spectrum-pink-600:rgba(var(--spectrum-pink-600-rgb)); + --spectrum-pink-700-rgb:196, 39, 138; + --spectrum-pink-700:rgba(var(--spectrum-pink-700-rgb)); + --spectrum-pink-800-rgb:220, 47, 156; + --spectrum-pink-800:rgba(var(--spectrum-pink-800-rgb)); + --spectrum-pink-900-rgb:236, 67, 175; + --spectrum-pink-900:rgba(var(--spectrum-pink-900-rgb)); + --spectrum-pink-1000-rgb:251, 90, 196; + --spectrum-pink-1000:rgba(var(--spectrum-pink-1000-rgb)); + --spectrum-pink-1100-rgb:255, 122, 210; + --spectrum-pink-1100:rgba(var(--spectrum-pink-1100-rgb)); + --spectrum-pink-1200-rgb:255, 159, 223; + --spectrum-pink-1200:rgba(var(--spectrum-pink-1200-rgb)); + --spectrum-pink-1300-rgb:255, 191, 234; + --spectrum-pink-1300:rgba(var(--spectrum-pink-1300-rgb)); + --spectrum-pink-1400-rgb:255, 219, 243; + --spectrum-pink-1400:rgba(var(--spectrum-pink-1400-rgb)); + --spectrum-pink-1500-rgb:255, 241, 250; + --spectrum-pink-1500:rgba(var(--spectrum-pink-1500-rgb)); + --spectrum-pink-1600-rgb:255, 255, 255; + --spectrum-pink-1600:rgba(var(--spectrum-pink-1600-rgb)); + --spectrum-turquoise-100-rgb:0, 30, 33; + --spectrum-turquoise-100:rgba(var(--spectrum-turquoise-100-rgb)); + --spectrum-turquoise-200-rgb:0, 37, 41; + --spectrum-turquoise-200:rgba(var(--spectrum-turquoise-200-rgb)); + --spectrum-turquoise-300-rgb:0, 49, 54; + --spectrum-turquoise-300:rgba(var(--spectrum-turquoise-300-rgb)); + --spectrum-turquoise-400-rgb:0, 66, 72; + --spectrum-turquoise-400:rgba(var(--spectrum-turquoise-400-rgb)); + --spectrum-turquoise-500-rgb:3, 84, 92; + --spectrum-turquoise-500:rgba(var(--spectrum-turquoise-500-rgb)); + --spectrum-turquoise-600-rgb:5, 103, 112; + --spectrum-turquoise-600:rgba(var(--spectrum-turquoise-600-rgb)); + --spectrum-turquoise-700-rgb:7, 120, 131; + --spectrum-turquoise-700:rgba(var(--spectrum-turquoise-700-rgb)); + --spectrum-turquoise-800-rgb:9, 135, 147; + --spectrum-turquoise-800:rgba(var(--spectrum-turquoise-800-rgb)); + --spectrum-turquoise-900-rgb:11, 151, 164; + --spectrum-turquoise-900:rgba(var(--spectrum-turquoise-900-rgb)); + --spectrum-turquoise-1000-rgb:13, 168, 182; + --spectrum-turquoise-1000:rgba(var(--spectrum-turquoise-1000-rgb)); + --spectrum-turquoise-1100-rgb:16, 186, 202; + --spectrum-turquoise-1100:rgba(var(--spectrum-turquoise-1100-rgb)); + --spectrum-turquoise-1200-rgb:64, 208, 220; + --spectrum-turquoise-1200:rgba(var(--spectrum-turquoise-1200-rgb)); + --spectrum-turquoise-1300-rgb:128, 225, 231; + --spectrum-turquoise-1300:rgba(var(--spectrum-turquoise-1300-rgb)); + --spectrum-turquoise-1400-rgb:183, 240, 240; + --spectrum-turquoise-1400:rgba(var(--spectrum-turquoise-1400-rgb)); + --spectrum-turquoise-1500-rgb:228, 249, 249; + --spectrum-turquoise-1500:rgba(var(--spectrum-turquoise-1500-rgb)); + --spectrum-turquoise-1600-rgb:255, 255, 255; + --spectrum-turquoise-1600:rgba(var(--spectrum-turquoise-1600-rgb)); + --spectrum-brown-100-rgb:35, 24, 8; + --spectrum-brown-100:rgba(var(--spectrum-brown-100-rgb)); + --spectrum-brown-200-rgb:44, 31, 11; + --spectrum-brown-200:rgba(var(--spectrum-brown-200-rgb)); + --spectrum-brown-300-rgb:58, 40, 14; + --spectrum-brown-300:rgba(var(--spectrum-brown-300-rgb)); + --spectrum-brown-400-rgb:78, 55, 19; + --spectrum-brown-400:rgba(var(--spectrum-brown-400-rgb)); + --spectrum-brown-500-rgb:98, 71, 30; + --spectrum-brown-500:rgba(var(--spectrum-brown-500-rgb)); + --spectrum-brown-600-rgb:115, 88, 47; + --spectrum-brown-600:rgba(var(--spectrum-brown-600-rgb)); + --spectrum-brown-700-rgb:132, 104, 61; + --spectrum-brown-700:rgba(var(--spectrum-brown-700-rgb)); + --spectrum-brown-800-rgb:148, 118, 73; + --spectrum-brown-800:rgba(var(--spectrum-brown-800-rgb)); + --spectrum-brown-900-rgb:163, 132, 84; + --spectrum-brown-900:rgba(var(--spectrum-brown-900-rgb)); + --spectrum-brown-1000-rgb:181, 147, 98; + --spectrum-brown-1000:rgba(var(--spectrum-brown-1000-rgb)); + --spectrum-brown-1100-rgb:199, 163, 112; + --spectrum-brown-1100:rgba(var(--spectrum-brown-1100-rgb)); + --spectrum-brown-1200-rgb:222, 185, 130; + --spectrum-brown-1200:rgba(var(--spectrum-brown-1200-rgb)); + --spectrum-brown-1300-rgb:232, 207, 169; + --spectrum-brown-1300:rgba(var(--spectrum-brown-1300-rgb)); + --spectrum-brown-1400-rgb:242, 227, 206; + --spectrum-brown-1400:rgba(var(--spectrum-brown-1400-rgb)); + --spectrum-brown-1500-rgb:250, 244, 236; + --spectrum-brown-1500:rgba(var(--spectrum-brown-1500-rgb)); + --spectrum-brown-1600-rgb:255, 255, 255; + --spectrum-brown-1600:rgba(var(--spectrum-brown-1600-rgb)); + --spectrum-silver-100-rgb:26, 26, 26; + --spectrum-silver-100:rgba(var(--spectrum-silver-100-rgb)); + --spectrum-silver-200-rgb:33, 33, 33; + --spectrum-silver-200:rgba(var(--spectrum-silver-200-rgb)); + --spectrum-silver-300-rgb:44, 44, 44; + --spectrum-silver-300:rgba(var(--spectrum-silver-300-rgb)); + --spectrum-silver-400-rgb:59, 59, 59; + --spectrum-silver-400:rgba(var(--spectrum-silver-400-rgb)); + --spectrum-silver-500-rgb:76, 76, 76; + --spectrum-silver-500:rgba(var(--spectrum-silver-500-rgb)); + --spectrum-silver-600-rgb:92, 92, 92; + --spectrum-silver-600:rgba(var(--spectrum-silver-600-rgb)); + --spectrum-silver-700-rgb:108, 108, 108; + --spectrum-silver-700:rgba(var(--spectrum-silver-700-rgb)); + --spectrum-silver-800-rgb:123, 123, 123; + --spectrum-silver-800:rgba(var(--spectrum-silver-800-rgb)); + --spectrum-silver-900-rgb:137, 137, 137; + --spectrum-silver-900:rgba(var(--spectrum-silver-900-rgb)); + --spectrum-silver-1000-rgb:152, 152, 152; + --spectrum-silver-1000:rgba(var(--spectrum-silver-1000-rgb)); + --spectrum-silver-1100-rgb:169, 169, 169; + --spectrum-silver-1100:rgba(var(--spectrum-silver-1100-rgb)); + --spectrum-silver-1200-rgb:190, 190, 190; + --spectrum-silver-1200:rgba(var(--spectrum-silver-1200-rgb)); + --spectrum-silver-1300-rgb:211, 211, 211; + --spectrum-silver-1300:rgba(var(--spectrum-silver-1300-rgb)); + --spectrum-silver-1400-rgb:229, 229, 229; + --spectrum-silver-1400:rgba(var(--spectrum-silver-1400-rgb)); + --spectrum-silver-1500-rgb:244, 244, 244; + --spectrum-silver-1500:rgba(var(--spectrum-silver-1500-rgb)); + --spectrum-silver-1600-rgb:255, 255, 255; + --spectrum-silver-1600:rgba(var(--spectrum-silver-1600-rgb)); + --spectrum-cinnamon-100-rgb:48, 17, 4; + --spectrum-cinnamon-100:rgba(var(--spectrum-cinnamon-100-rgb)); + --spectrum-cinnamon-200-rgb:59, 21, 5; + --spectrum-cinnamon-200:rgba(var(--spectrum-cinnamon-200-rgb)); + --spectrum-cinnamon-300-rgb:79, 28, 7; + --spectrum-cinnamon-300:rgba(var(--spectrum-cinnamon-300-rgb)); + --spectrum-cinnamon-400-rgb:100, 41, 15; + --spectrum-cinnamon-400:rgba(var(--spectrum-cinnamon-400-rgb)); + --spectrum-cinnamon-500-rgb:122, 57, 28; + --spectrum-cinnamon-500:rgba(var(--spectrum-cinnamon-500-rgb)); + --spectrum-cinnamon-600-rgb:143, 74, 40; + --spectrum-cinnamon-600:rgba(var(--spectrum-cinnamon-600-rgb)); + --spectrum-cinnamon-700-rgb:163, 88, 52; + --spectrum-cinnamon-700:rgba(var(--spectrum-cinnamon-700-rgb)); + --spectrum-cinnamon-800-rgb:179, 103, 64; + --spectrum-cinnamon-800:rgba(var(--spectrum-cinnamon-800-rgb)); + --spectrum-cinnamon-900-rgb:192, 119, 80; + --spectrum-cinnamon-900:rgba(var(--spectrum-cinnamon-900-rgb)); + --spectrum-cinnamon-1000-rgb:206, 136, 99; + --spectrum-cinnamon-1000:rgba(var(--spectrum-cinnamon-1000-rgb)); + --spectrum-cinnamon-1100-rgb:220, 154, 118; + --spectrum-cinnamon-1100:rgba(var(--spectrum-cinnamon-1100-rgb)); + --spectrum-cinnamon-1200-rgb:232, 179, 149; + --spectrum-cinnamon-1200:rgba(var(--spectrum-cinnamon-1200-rgb)); + --spectrum-cinnamon-1300-rgb:239, 203, 183; + --spectrum-cinnamon-1300:rgba(var(--spectrum-cinnamon-1300-rgb)); + --spectrum-cinnamon-1400-rgb:246, 225, 214; + --spectrum-cinnamon-1400:rgba(var(--spectrum-cinnamon-1400-rgb)); + --spectrum-cinnamon-1500-rgb:252, 244, 239; + --spectrum-cinnamon-1500:rgba(var(--spectrum-cinnamon-1500-rgb)); + --spectrum-cinnamon-1600-rgb:255, 255, 255; + --spectrum-cinnamon-1600:rgba(var(--spectrum-cinnamon-1600-rgb)); --spectrum-icon-color-blue-primary-default:var(--spectrum-blue-800); --spectrum-icon-color-green-primary-default:var(--spectrum-green-800); --spectrum-icon-color-red-primary-default:var(--spectrum-red-700); @@ -511,530 +733,27 @@ --spectrum-assetlist-item-background-color-selected:rgba(var(--spectrum-blue-800-rgb), 0.15); --spectrum-assetlist-border-color-key-focus:var(--spectrum-blue-700); } -.spectrum--darkest{ - --spectrum-overlay-opacity:0.6; - --spectrum-drop-shadow-color-rgb:0, 0, 0; - --spectrum-drop-shadow-color-opacity:0.8; - --spectrum-drop-shadow-color:rgba(var(--spectrum-drop-shadow-color-rgb), var(--spectrum-drop-shadow-color-opacity)); - --spectrum-background-base-color:var(--spectrum-gray-50); - --spectrum-background-layer-1-color:var(--spectrum-gray-75); - --spectrum-background-layer-2-color:var(--spectrum-gray-100); - --spectrum-neutral-background-color-default:var(--spectrum-gray-400); - --spectrum-neutral-background-color-hover:var(--spectrum-gray-300); - --spectrum-neutral-background-color-down:var(--spectrum-gray-200); - --spectrum-neutral-background-color-key-focus:var(--spectrum-gray-300); - --spectrum-neutral-subdued-background-color-default:var(--spectrum-gray-400); - --spectrum-neutral-subdued-background-color-hover:var(--spectrum-gray-300); - --spectrum-neutral-subdued-background-color-down:var(--spectrum-gray-200); - --spectrum-neutral-subdued-background-color-key-focus:var(--spectrum-gray-300); - --spectrum-accent-background-color-default:var(--spectrum-accent-color-600); - --spectrum-accent-background-color-hover:var(--spectrum-accent-color-500); - --spectrum-accent-background-color-down:var(--spectrum-accent-color-400); - --spectrum-accent-background-color-key-focus:var(--spectrum-accent-color-500); - --spectrum-informative-background-color-default:var(--spectrum-informative-color-600); - --spectrum-informative-background-color-hover:var(--spectrum-informative-color-500); - --spectrum-informative-background-color-down:var(--spectrum-informative-color-400); - --spectrum-informative-background-color-key-focus:var(--spectrum-informative-color-500); - --spectrum-negative-background-color-default:var(--spectrum-negative-color-600); - --spectrum-negative-background-color-hover:var(--spectrum-negative-color-500); - --spectrum-negative-background-color-down:var(--spectrum-negative-color-400); - --spectrum-negative-background-color-key-focus:var(--spectrum-negative-color-500); - --spectrum-positive-background-color-default:var(--spectrum-positive-color-600); - --spectrum-positive-background-color-hover:var(--spectrum-positive-color-500); - --spectrum-positive-background-color-down:var(--spectrum-positive-color-400); - --spectrum-positive-background-color-key-focus:var(--spectrum-positive-color-500); - --spectrum-notice-background-color-default:var(--spectrum-notice-color-800); - --spectrum-gray-background-color-default:var(--spectrum-gray-700); - --spectrum-red-background-color-default:var(--spectrum-red-700); - --spectrum-orange-background-color-default:var(--spectrum-orange-800); - --spectrum-yellow-background-color-default:var(--spectrum-yellow-1000); - --spectrum-chartreuse-background-color-default:var(--spectrum-chartreuse-900); - --spectrum-celery-background-color-default:var(--spectrum-celery-800); - --spectrum-green-background-color-default:var(--spectrum-green-700); - --spectrum-seafoam-background-color-default:var(--spectrum-seafoam-700); - --spectrum-cyan-background-color-default:var(--spectrum-cyan-700); - --spectrum-blue-background-color-default:var(--spectrum-blue-700); - --spectrum-indigo-background-color-default:var(--spectrum-indigo-700); - --spectrum-purple-background-color-default:var(--spectrum-purple-700); - --spectrum-fuchsia-background-color-default:var(--spectrum-fuchsia-700); - --spectrum-magenta-background-color-default:var(--spectrum-magenta-700); - --spectrum-neutral-visual-color:var(--spectrum-gray-600); - --spectrum-accent-visual-color:var(--spectrum-accent-color-900); - --spectrum-informative-visual-color:var(--spectrum-informative-color-900); - --spectrum-negative-visual-color:var(--spectrum-negative-color-700); - --spectrum-notice-visual-color:var(--spectrum-notice-color-900); - --spectrum-positive-visual-color:var(--spectrum-positive-color-800); - --spectrum-gray-visual-color:var(--spectrum-gray-600); - --spectrum-red-visual-color:var(--spectrum-red-700); - --spectrum-orange-visual-color:var(--spectrum-orange-900); - --spectrum-yellow-visual-color:var(--spectrum-yellow-1100); - --spectrum-chartreuse-visual-color:var(--spectrum-chartreuse-900); - --spectrum-celery-visual-color:var(--spectrum-celery-800); - --spectrum-green-visual-color:var(--spectrum-green-800); - --spectrum-seafoam-visual-color:var(--spectrum-seafoam-800); - --spectrum-cyan-visual-color:var(--spectrum-cyan-900); - --spectrum-blue-visual-color:var(--spectrum-blue-900); - --spectrum-indigo-visual-color:var(--spectrum-indigo-900); - --spectrum-purple-visual-color:var(--spectrum-purple-900); - --spectrum-fuchsia-visual-color:var(--spectrum-fuchsia-900); - --spectrum-magenta-visual-color:var(--spectrum-magenta-900); - --spectrum-opacity-checkerboard-square-dark:var(--spectrum-gray-800); - --spectrum-gray-50-rgb:0, 0, 0; - --spectrum-gray-50:rgba(var(--spectrum-gray-50-rgb)); - --spectrum-gray-75-rgb:14, 14, 14; - --spectrum-gray-75:rgba(var(--spectrum-gray-75-rgb)); - --spectrum-gray-100-rgb:29, 29, 29; - --spectrum-gray-100:rgba(var(--spectrum-gray-100-rgb)); - --spectrum-gray-200-rgb:48, 48, 48; - --spectrum-gray-200:rgba(var(--spectrum-gray-200-rgb)); - --spectrum-gray-300-rgb:75, 75, 75; - --spectrum-gray-300:rgba(var(--spectrum-gray-300-rgb)); - --spectrum-gray-400-rgb:106, 106, 106; - --spectrum-gray-400:rgba(var(--spectrum-gray-400-rgb)); - --spectrum-gray-500-rgb:141, 141, 141; - --spectrum-gray-500:rgba(var(--spectrum-gray-500-rgb)); - --spectrum-gray-600-rgb:176, 176, 176; - --spectrum-gray-600:rgba(var(--spectrum-gray-600-rgb)); - --spectrum-gray-700-rgb:208, 208, 208; - --spectrum-gray-700:rgba(var(--spectrum-gray-700-rgb)); - --spectrum-gray-800-rgb:235, 235, 235; - --spectrum-gray-800:rgba(var(--spectrum-gray-800-rgb)); - --spectrum-gray-900-rgb:255, 255, 255; - --spectrum-gray-900:rgba(var(--spectrum-gray-900-rgb)); - --spectrum-blue-100-rgb:0, 38, 81; - --spectrum-blue-100:rgba(var(--spectrum-blue-100-rgb)); - --spectrum-blue-200-rgb:0, 50, 106; - --spectrum-blue-200:rgba(var(--spectrum-blue-200-rgb)); - --spectrum-blue-300-rgb:0, 64, 135; - --spectrum-blue-300:rgba(var(--spectrum-blue-300-rgb)); - --spectrum-blue-400-rgb:0, 78, 166; - --spectrum-blue-400:rgba(var(--spectrum-blue-400-rgb)); - --spectrum-blue-500-rgb:0, 92, 200; - --spectrum-blue-500:rgba(var(--spectrum-blue-500-rgb)); - --spectrum-blue-600-rgb:6, 108, 231; - --spectrum-blue-600:rgba(var(--spectrum-blue-600-rgb)); - --spectrum-blue-700-rgb:29, 128, 245; - --spectrum-blue-700:rgba(var(--spectrum-blue-700-rgb)); - --spectrum-blue-800-rgb:64, 150, 243; - --spectrum-blue-800:rgba(var(--spectrum-blue-800-rgb)); - --spectrum-blue-900-rgb:94, 170, 247; - --spectrum-blue-900:rgba(var(--spectrum-blue-900-rgb)); - --spectrum-blue-1000-rgb:124, 189, 250; - --spectrum-blue-1000:rgba(var(--spectrum-blue-1000-rgb)); - --spectrum-blue-1100-rgb:152, 206, 253; - --spectrum-blue-1100:rgba(var(--spectrum-blue-1100-rgb)); - --spectrum-blue-1200-rgb:179, 222, 254; - --spectrum-blue-1200:rgba(var(--spectrum-blue-1200-rgb)); - --spectrum-blue-1300-rgb:206, 234, 255; - --spectrum-blue-1300:rgba(var(--spectrum-blue-1300-rgb)); - --spectrum-blue-1400-rgb:227, 243, 255; - --spectrum-blue-1400:rgba(var(--spectrum-blue-1400-rgb)); - --spectrum-red-100-rgb:87, 0, 0; - --spectrum-red-100:rgba(var(--spectrum-red-100-rgb)); - --spectrum-red-200-rgb:110, 0, 0; - --spectrum-red-200:rgba(var(--spectrum-red-200-rgb)); - --spectrum-red-300-rgb:138, 0, 0; - --spectrum-red-300:rgba(var(--spectrum-red-300-rgb)); - --spectrum-red-400-rgb:167, 0, 0; - --spectrum-red-400:rgba(var(--spectrum-red-400-rgb)); - --spectrum-red-500-rgb:196, 7, 6; - --spectrum-red-500:rgba(var(--spectrum-red-500-rgb)); - --spectrum-red-600-rgb:221, 33, 24; - --spectrum-red-600:rgba(var(--spectrum-red-600-rgb)); - --spectrum-red-700-rgb:238, 67, 49; - --spectrum-red-700:rgba(var(--spectrum-red-700-rgb)); - --spectrum-red-800-rgb:249, 99, 76; - --spectrum-red-800:rgba(var(--spectrum-red-800-rgb)); - --spectrum-red-900-rgb:255, 129, 107; - --spectrum-red-900:rgba(var(--spectrum-red-900-rgb)); - --spectrum-red-1000-rgb:255, 158, 140; - --spectrum-red-1000:rgba(var(--spectrum-red-1000-rgb)); - --spectrum-red-1100-rgb:255, 183, 169; - --spectrum-red-1100:rgba(var(--spectrum-red-1100-rgb)); - --spectrum-red-1200-rgb:255, 205, 195; - --spectrum-red-1200:rgba(var(--spectrum-red-1200-rgb)); - --spectrum-red-1300-rgb:255, 223, 217; - --spectrum-red-1300:rgba(var(--spectrum-red-1300-rgb)); - --spectrum-red-1400-rgb:255, 237, 234; - --spectrum-red-1400:rgba(var(--spectrum-red-1400-rgb)); - --spectrum-orange-100-rgb:72, 24, 1; - --spectrum-orange-100:rgba(var(--spectrum-orange-100-rgb)); - --spectrum-orange-200-rgb:92, 32, 0; - --spectrum-orange-200:rgba(var(--spectrum-orange-200-rgb)); - --spectrum-orange-300-rgb:115, 43, 0; - --spectrum-orange-300:rgba(var(--spectrum-orange-300-rgb)); - --spectrum-orange-400-rgb:138, 55, 0; - --spectrum-orange-400:rgba(var(--spectrum-orange-400-rgb)); - --spectrum-orange-500-rgb:162, 68, 0; - --spectrum-orange-500:rgba(var(--spectrum-orange-500-rgb)); - --spectrum-orange-600-rgb:186, 82, 0; - --spectrum-orange-600:rgba(var(--spectrum-orange-600-rgb)); - --spectrum-orange-700-rgb:210, 98, 0; - --spectrum-orange-700:rgba(var(--spectrum-orange-700-rgb)); - --spectrum-orange-800-rgb:232, 116, 0; - --spectrum-orange-800:rgba(var(--spectrum-orange-800-rgb)); - --spectrum-orange-900-rgb:249, 137, 23; - --spectrum-orange-900:rgba(var(--spectrum-orange-900-rgb)); - --spectrum-orange-1000-rgb:255, 162, 59; - --spectrum-orange-1000:rgba(var(--spectrum-orange-1000-rgb)); - --spectrum-orange-1100-rgb:255, 188, 102; - --spectrum-orange-1100:rgba(var(--spectrum-orange-1100-rgb)); - --spectrum-orange-1200-rgb:253, 210, 145; - --spectrum-orange-1200:rgba(var(--spectrum-orange-1200-rgb)); - --spectrum-orange-1300-rgb:255, 226, 181; - --spectrum-orange-1300:rgba(var(--spectrum-orange-1300-rgb)); - --spectrum-orange-1400-rgb:255, 239, 213; - --spectrum-orange-1400:rgba(var(--spectrum-orange-1400-rgb)); - --spectrum-yellow-100-rgb:53, 36, 0; - --spectrum-yellow-100:rgba(var(--spectrum-yellow-100-rgb)); - --spectrum-yellow-200-rgb:68, 47, 0; - --spectrum-yellow-200:rgba(var(--spectrum-yellow-200-rgb)); - --spectrum-yellow-300-rgb:86, 62, 0; - --spectrum-yellow-300:rgba(var(--spectrum-yellow-300-rgb)); - --spectrum-yellow-400-rgb:103, 77, 0; - --spectrum-yellow-400:rgba(var(--spectrum-yellow-400-rgb)); - --spectrum-yellow-500-rgb:122, 92, 0; - --spectrum-yellow-500:rgba(var(--spectrum-yellow-500-rgb)); - --spectrum-yellow-600-rgb:141, 108, 0; - --spectrum-yellow-600:rgba(var(--spectrum-yellow-600-rgb)); - --spectrum-yellow-700-rgb:161, 126, 0; - --spectrum-yellow-700:rgba(var(--spectrum-yellow-700-rgb)); - --spectrum-yellow-800-rgb:180, 144, 0; - --spectrum-yellow-800:rgba(var(--spectrum-yellow-800-rgb)); - --spectrum-yellow-900-rgb:199, 162, 0; - --spectrum-yellow-900:rgba(var(--spectrum-yellow-900-rgb)); - --spectrum-yellow-1000-rgb:216, 181, 0; - --spectrum-yellow-1000:rgba(var(--spectrum-yellow-1000-rgb)); - --spectrum-yellow-1100-rgb:233, 199, 0; - --spectrum-yellow-1100:rgba(var(--spectrum-yellow-1100-rgb)); - --spectrum-yellow-1200-rgb:247, 216, 4; - --spectrum-yellow-1200:rgba(var(--spectrum-yellow-1200-rgb)); - --spectrum-yellow-1300-rgb:249, 233, 97; - --spectrum-yellow-1300:rgba(var(--spectrum-yellow-1300-rgb)); - --spectrum-yellow-1400-rgb:252, 243, 170; - --spectrum-yellow-1400:rgba(var(--spectrum-yellow-1400-rgb)); - --spectrum-chartreuse-100-rgb:32, 43, 0; - --spectrum-chartreuse-100:rgba(var(--spectrum-chartreuse-100-rgb)); - --spectrum-chartreuse-200-rgb:42, 56, 0; - --spectrum-chartreuse-200:rgba(var(--spectrum-chartreuse-200-rgb)); - --spectrum-chartreuse-300-rgb:54, 72, 0; - --spectrum-chartreuse-300:rgba(var(--spectrum-chartreuse-300-rgb)); - --spectrum-chartreuse-400-rgb:66, 88, 0; - --spectrum-chartreuse-400:rgba(var(--spectrum-chartreuse-400-rgb)); - --spectrum-chartreuse-500-rgb:79, 105, 0; - --spectrum-chartreuse-500:rgba(var(--spectrum-chartreuse-500-rgb)); - --spectrum-chartreuse-600-rgb:93, 123, 0; - --spectrum-chartreuse-600:rgba(var(--spectrum-chartreuse-600-rgb)); - --spectrum-chartreuse-700-rgb:107, 142, 0; - --spectrum-chartreuse-700:rgba(var(--spectrum-chartreuse-700-rgb)); - --spectrum-chartreuse-800-rgb:122, 161, 0; - --spectrum-chartreuse-800:rgba(var(--spectrum-chartreuse-800-rgb)); - --spectrum-chartreuse-900-rgb:138, 180, 3; - --spectrum-chartreuse-900:rgba(var(--spectrum-chartreuse-900-rgb)); - --spectrum-chartreuse-1000-rgb:154, 198, 11; - --spectrum-chartreuse-1000:rgba(var(--spectrum-chartreuse-1000-rgb)); - --spectrum-chartreuse-1100-rgb:170, 216, 22; - --spectrum-chartreuse-1100:rgba(var(--spectrum-chartreuse-1100-rgb)); - --spectrum-chartreuse-1200-rgb:187, 232, 41; - --spectrum-chartreuse-1200:rgba(var(--spectrum-chartreuse-1200-rgb)); - --spectrum-chartreuse-1300-rgb:205, 246, 72; - --spectrum-chartreuse-1300:rgba(var(--spectrum-chartreuse-1300-rgb)); - --spectrum-chartreuse-1400-rgb:225, 253, 132; - --spectrum-chartreuse-1400:rgba(var(--spectrum-chartreuse-1400-rgb)); - --spectrum-celery-100-rgb:0, 47, 7; - --spectrum-celery-100:rgba(var(--spectrum-celery-100-rgb)); - --spectrum-celery-200-rgb:0, 61, 9; - --spectrum-celery-200:rgba(var(--spectrum-celery-200-rgb)); - --spectrum-celery-300-rgb:0, 77, 12; - --spectrum-celery-300:rgba(var(--spectrum-celery-300-rgb)); - --spectrum-celery-400-rgb:0, 95, 15; - --spectrum-celery-400:rgba(var(--spectrum-celery-400-rgb)); - --spectrum-celery-500-rgb:0, 113, 15; - --spectrum-celery-500:rgba(var(--spectrum-celery-500-rgb)); - --spectrum-celery-600-rgb:0, 132, 15; - --spectrum-celery-600:rgba(var(--spectrum-celery-600-rgb)); - --spectrum-celery-700-rgb:0, 151, 20; - --spectrum-celery-700:rgba(var(--spectrum-celery-700-rgb)); - --spectrum-celery-800-rgb:13, 171, 37; - --spectrum-celery-800:rgba(var(--spectrum-celery-800-rgb)); - --spectrum-celery-900-rgb:45, 191, 58; - --spectrum-celery-900:rgba(var(--spectrum-celery-900-rgb)); - --spectrum-celery-1000-rgb:80, 208, 82; - --spectrum-celery-1000:rgba(var(--spectrum-celery-1000-rgb)); - --spectrum-celery-1100-rgb:115, 224, 107; - --spectrum-celery-1100:rgba(var(--spectrum-celery-1100-rgb)); - --spectrum-celery-1200-rgb:147, 237, 131; - --spectrum-celery-1200:rgba(var(--spectrum-celery-1200-rgb)); - --spectrum-celery-1300-rgb:180, 247, 162; - --spectrum-celery-1300:rgba(var(--spectrum-celery-1300-rgb)); - --spectrum-celery-1400-rgb:213, 252, 202; - --spectrum-celery-1400:rgba(var(--spectrum-celery-1400-rgb)); - --spectrum-green-100-rgb:10, 44, 28; - --spectrum-green-100:rgba(var(--spectrum-green-100-rgb)); - --spectrum-green-200-rgb:7, 59, 36; - --spectrum-green-200:rgba(var(--spectrum-green-200-rgb)); - --spectrum-green-300-rgb:0, 76, 46; - --spectrum-green-300:rgba(var(--spectrum-green-300-rgb)); - --spectrum-green-400-rgb:0, 93, 57; - --spectrum-green-400:rgba(var(--spectrum-green-400-rgb)); - --spectrum-green-500-rgb:0, 111, 69; - --spectrum-green-500:rgba(var(--spectrum-green-500-rgb)); - --spectrum-green-600-rgb:0, 130, 82; - --spectrum-green-600:rgba(var(--spectrum-green-600-rgb)); - --spectrum-green-700-rgb:0, 149, 98; - --spectrum-green-700:rgba(var(--spectrum-green-700-rgb)); - --spectrum-green-800-rgb:28, 168, 114; - --spectrum-green-800:rgba(var(--spectrum-green-800-rgb)); - --spectrum-green-900-rgb:52, 187, 132; - --spectrum-green-900:rgba(var(--spectrum-green-900-rgb)); - --spectrum-green-1000-rgb:75, 205, 149; - --spectrum-green-1000:rgba(var(--spectrum-green-1000-rgb)); - --spectrum-green-1100-rgb:103, 222, 168; - --spectrum-green-1100:rgba(var(--spectrum-green-1100-rgb)); - --spectrum-green-1200-rgb:137, 236, 188; - --spectrum-green-1200:rgba(var(--spectrum-green-1200-rgb)); - --spectrum-green-1300-rgb:177, 244, 209; - --spectrum-green-1300:rgba(var(--spectrum-green-1300-rgb)); - --spectrum-green-1400-rgb:214, 249, 228; - --spectrum-green-1400:rgba(var(--spectrum-green-1400-rgb)); - --spectrum-seafoam-100-rgb:18, 43, 42; - --spectrum-seafoam-100:rgba(var(--spectrum-seafoam-100-rgb)); - --spectrum-seafoam-200-rgb:19, 57, 55; - --spectrum-seafoam-200:rgba(var(--spectrum-seafoam-200-rgb)); - --spectrum-seafoam-300-rgb:16, 73, 70; - --spectrum-seafoam-300:rgba(var(--spectrum-seafoam-300-rgb)); - --spectrum-seafoam-400-rgb:3, 91, 88; - --spectrum-seafoam-400:rgba(var(--spectrum-seafoam-400-rgb)); - --spectrum-seafoam-500-rgb:0, 108, 104; - --spectrum-seafoam-500:rgba(var(--spectrum-seafoam-500-rgb)); - --spectrum-seafoam-600-rgb:0, 127, 121; - --spectrum-seafoam-600:rgba(var(--spectrum-seafoam-600-rgb)); - --spectrum-seafoam-700-rgb:0, 146, 140; - --spectrum-seafoam-700:rgba(var(--spectrum-seafoam-700-rgb)); - --spectrum-seafoam-800-rgb:0, 165, 159; - --spectrum-seafoam-800:rgba(var(--spectrum-seafoam-800-rgb)); - --spectrum-seafoam-900-rgb:26, 185, 178; - --spectrum-seafoam-900:rgba(var(--spectrum-seafoam-900-rgb)); - --spectrum-seafoam-1000-rgb:66, 202, 195; - --spectrum-seafoam-1000:rgba(var(--spectrum-seafoam-1000-rgb)); - --spectrum-seafoam-1100-rgb:102, 218, 211; - --spectrum-seafoam-1100:rgba(var(--spectrum-seafoam-1100-rgb)); - --spectrum-seafoam-1200-rgb:139, 232, 225; - --spectrum-seafoam-1200:rgba(var(--spectrum-seafoam-1200-rgb)); - --spectrum-seafoam-1300-rgb:179, 242, 237; - --spectrum-seafoam-1300:rgba(var(--spectrum-seafoam-1300-rgb)); - --spectrum-seafoam-1400-rgb:215, 248, 244; - --spectrum-seafoam-1400:rgba(var(--spectrum-seafoam-1400-rgb)); - --spectrum-cyan-100-rgb:0, 41, 68; - --spectrum-cyan-100:rgba(var(--spectrum-cyan-100-rgb)); - --spectrum-cyan-200-rgb:0, 54, 88; - --spectrum-cyan-200:rgba(var(--spectrum-cyan-200-rgb)); - --spectrum-cyan-300-rgb:0, 69, 108; - --spectrum-cyan-300:rgba(var(--spectrum-cyan-300-rgb)); - --spectrum-cyan-400-rgb:0, 86, 128; - --spectrum-cyan-400:rgba(var(--spectrum-cyan-400-rgb)); - --spectrum-cyan-500-rgb:0, 103, 147; - --spectrum-cyan-500:rgba(var(--spectrum-cyan-500-rgb)); - --spectrum-cyan-600-rgb:0, 121, 167; - --spectrum-cyan-600:rgba(var(--spectrum-cyan-600-rgb)); - --spectrum-cyan-700-rgb:0, 140, 186; - --spectrum-cyan-700:rgba(var(--spectrum-cyan-700-rgb)); - --spectrum-cyan-800-rgb:4, 160, 205; - --spectrum-cyan-800:rgba(var(--spectrum-cyan-800-rgb)); - --spectrum-cyan-900-rgb:23, 180, 221; - --spectrum-cyan-900:rgba(var(--spectrum-cyan-900-rgb)); - --spectrum-cyan-1000-rgb:57, 199, 234; - --spectrum-cyan-1000:rgba(var(--spectrum-cyan-1000-rgb)); - --spectrum-cyan-1100-rgb:96, 216, 243; - --spectrum-cyan-1100:rgba(var(--spectrum-cyan-1100-rgb)); - --spectrum-cyan-1200-rgb:134, 230, 250; - --spectrum-cyan-1200:rgba(var(--spectrum-cyan-1200-rgb)); - --spectrum-cyan-1300-rgb:170, 242, 255; - --spectrum-cyan-1300:rgba(var(--spectrum-cyan-1300-rgb)); - --spectrum-cyan-1400-rgb:206, 249, 255; - --spectrum-cyan-1400:rgba(var(--spectrum-cyan-1400-rgb)); - --spectrum-indigo-100-rgb:26, 29, 97; - --spectrum-indigo-100:rgba(var(--spectrum-indigo-100-rgb)); - --spectrum-indigo-200-rgb:35, 39, 125; - --spectrum-indigo-200:rgba(var(--spectrum-indigo-200-rgb)); - --spectrum-indigo-300-rgb:46, 50, 158; - --spectrum-indigo-300:rgba(var(--spectrum-indigo-300-rgb)); - --spectrum-indigo-400-rgb:58, 63, 189; - --spectrum-indigo-400:rgba(var(--spectrum-indigo-400-rgb)); - --spectrum-indigo-500-rgb:73, 78, 216; - --spectrum-indigo-500:rgba(var(--spectrum-indigo-500-rgb)); - --spectrum-indigo-600-rgb:90, 96, 235; - --spectrum-indigo-600:rgba(var(--spectrum-indigo-600-rgb)); - --spectrum-indigo-700-rgb:110, 115, 246; - --spectrum-indigo-700:rgba(var(--spectrum-indigo-700-rgb)); - --spectrum-indigo-800-rgb:132, 136, 253; - --spectrum-indigo-800:rgba(var(--spectrum-indigo-800-rgb)); - --spectrum-indigo-900-rgb:153, 157, 255; - --spectrum-indigo-900:rgba(var(--spectrum-indigo-900-rgb)); - --spectrum-indigo-1000-rgb:174, 177, 255; - --spectrum-indigo-1000:rgba(var(--spectrum-indigo-1000-rgb)); - --spectrum-indigo-1100-rgb:194, 196, 255; - --spectrum-indigo-1100:rgba(var(--spectrum-indigo-1100-rgb)); - --spectrum-indigo-1200-rgb:212, 213, 255; - --spectrum-indigo-1200:rgba(var(--spectrum-indigo-1200-rgb)); - --spectrum-indigo-1300-rgb:227, 228, 255; - --spectrum-indigo-1300:rgba(var(--spectrum-indigo-1300-rgb)); - --spectrum-indigo-1400-rgb:240, 240, 255; - --spectrum-indigo-1400:rgba(var(--spectrum-indigo-1400-rgb)); - --spectrum-purple-100-rgb:50, 16, 104; - --spectrum-purple-100:rgba(var(--spectrum-purple-100-rgb)); - --spectrum-purple-200-rgb:67, 13, 140; - --spectrum-purple-200:rgba(var(--spectrum-purple-200-rgb)); - --spectrum-purple-300-rgb:86, 16, 173; - --spectrum-purple-300:rgba(var(--spectrum-purple-300-rgb)); - --spectrum-purple-400-rgb:106, 29, 200; - --spectrum-purple-400:rgba(var(--spectrum-purple-400-rgb)); - --spectrum-purple-500-rgb:126, 49, 222; - --spectrum-purple-500:rgba(var(--spectrum-purple-500-rgb)); - --spectrum-purple-600-rgb:145, 70, 236; - --spectrum-purple-600:rgba(var(--spectrum-purple-600-rgb)); - --spectrum-purple-700-rgb:162, 94, 246; - --spectrum-purple-700:rgba(var(--spectrum-purple-700-rgb)); - --spectrum-purple-800-rgb:178, 119, 250; - --spectrum-purple-800:rgba(var(--spectrum-purple-800-rgb)); - --spectrum-purple-900-rgb:192, 143, 252; - --spectrum-purple-900:rgba(var(--spectrum-purple-900-rgb)); - --spectrum-purple-1000-rgb:206, 166, 253; - --spectrum-purple-1000:rgba(var(--spectrum-purple-1000-rgb)); - --spectrum-purple-1100-rgb:219, 188, 254; - --spectrum-purple-1100:rgba(var(--spectrum-purple-1100-rgb)); - --spectrum-purple-1200-rgb:230, 207, 255; - --spectrum-purple-1200:rgba(var(--spectrum-purple-1200-rgb)); - --spectrum-purple-1300-rgb:240, 224, 255; - --spectrum-purple-1300:rgba(var(--spectrum-purple-1300-rgb)); - --spectrum-purple-1400-rgb:248, 237, 255; - --spectrum-purple-1400:rgba(var(--spectrum-purple-1400-rgb)); - --spectrum-fuchsia-100-rgb:70, 14, 68; - --spectrum-fuchsia-100:rgba(var(--spectrum-fuchsia-100-rgb)); - --spectrum-fuchsia-200-rgb:93, 9, 92; - --spectrum-fuchsia-200:rgba(var(--spectrum-fuchsia-200-rgb)); - --spectrum-fuchsia-300-rgb:120, 0, 120; - --spectrum-fuchsia-300:rgba(var(--spectrum-fuchsia-300-rgb)); - --spectrum-fuchsia-400-rgb:146, 0, 147; - --spectrum-fuchsia-400:rgba(var(--spectrum-fuchsia-400-rgb)); - --spectrum-fuchsia-500-rgb:169, 19, 170; - --spectrum-fuchsia-500:rgba(var(--spectrum-fuchsia-500-rgb)); - --spectrum-fuchsia-600-rgb:191, 43, 191; - --spectrum-fuchsia-600:rgba(var(--spectrum-fuchsia-600-rgb)); - --spectrum-fuchsia-700-rgb:211, 65, 213; - --spectrum-fuchsia-700:rgba(var(--spectrum-fuchsia-700-rgb)); - --spectrum-fuchsia-800-rgb:228, 91, 229; - --spectrum-fuchsia-800:rgba(var(--spectrum-fuchsia-800-rgb)); - --spectrum-fuchsia-900-rgb:239, 120, 238; - --spectrum-fuchsia-900:rgba(var(--spectrum-fuchsia-900-rgb)); - --spectrum-fuchsia-1000-rgb:246, 149, 243; - --spectrum-fuchsia-1000:rgba(var(--spectrum-fuchsia-1000-rgb)); - --spectrum-fuchsia-1100-rgb:251, 175, 246; - --spectrum-fuchsia-1100:rgba(var(--spectrum-fuchsia-1100-rgb)); - --spectrum-fuchsia-1200-rgb:254, 199, 248; - --spectrum-fuchsia-1200:rgba(var(--spectrum-fuchsia-1200-rgb)); - --spectrum-fuchsia-1300-rgb:255, 220, 250; - --spectrum-fuchsia-1300:rgba(var(--spectrum-fuchsia-1300-rgb)); - --spectrum-fuchsia-1400-rgb:255, 235, 252; - --spectrum-fuchsia-1400:rgba(var(--spectrum-fuchsia-1400-rgb)); - --spectrum-magenta-100-rgb:83, 3, 41; - --spectrum-magenta-100:rgba(var(--spectrum-magenta-100-rgb)); - --spectrum-magenta-200-rgb:106, 0, 52; - --spectrum-magenta-200:rgba(var(--spectrum-magenta-200-rgb)); - --spectrum-magenta-300-rgb:133, 0, 65; - --spectrum-magenta-300:rgba(var(--spectrum-magenta-300-rgb)); - --spectrum-magenta-400-rgb:161, 0, 78; - --spectrum-magenta-400:rgba(var(--spectrum-magenta-400-rgb)); - --spectrum-magenta-500-rgb:186, 22, 93; - --spectrum-magenta-500:rgba(var(--spectrum-magenta-500-rgb)); - --spectrum-magenta-600-rgb:209, 43, 114; - --spectrum-magenta-600:rgba(var(--spectrum-magenta-600-rgb)); - --spectrum-magenta-700-rgb:227, 69, 137; - --spectrum-magenta-700:rgba(var(--spectrum-magenta-700-rgb)); - --spectrum-magenta-800-rgb:241, 97, 156; - --spectrum-magenta-800:rgba(var(--spectrum-magenta-800-rgb)); - --spectrum-magenta-900-rgb:252, 124, 173; - --spectrum-magenta-900:rgba(var(--spectrum-magenta-900-rgb)); - --spectrum-magenta-1000-rgb:255, 152, 191; - --spectrum-magenta-1000:rgba(var(--spectrum-magenta-1000-rgb)); - --spectrum-magenta-1100-rgb:255, 179, 207; - --spectrum-magenta-1100:rgba(var(--spectrum-magenta-1100-rgb)); - --spectrum-magenta-1200-rgb:255, 202, 221; - --spectrum-magenta-1200:rgba(var(--spectrum-magenta-1200-rgb)); - --spectrum-magenta-1300-rgb:255, 221, 233; - --spectrum-magenta-1300:rgba(var(--spectrum-magenta-1300-rgb)); - --spectrum-magenta-1400-rgb:255, 236, 243; - --spectrum-magenta-1400:rgba(var(--spectrum-magenta-1400-rgb)); - --spectrum-icon-color-blue-primary-default:var(--spectrum-blue-800); - --spectrum-icon-color-green-primary-default:var(--spectrum-green-800); - --spectrum-icon-color-red-primary-default:var(--spectrum-red-700); - --spectrum-icon-color-yellow-primary-default:var(--spectrum-yellow-1000); - --spectrum-menu-item-background-color-default-rgb:255, 255, 255; - --spectrum-menu-item-background-color-default-opacity:0; - --spectrum-menu-item-background-color-default:rgba(var(--spectrum-menu-item-background-color-default-rgb), var(--spectrum-menu-item-background-color-default-opacity)); /* --spectrum-gray-900 */ - --spectrum-menu-item-background-color-hover:var(--spectrum-transparent-white-200); - --spectrum-menu-item-background-color-down:var(--spectrum-transparent-white-200); - --spectrum-menu-item-background-color-key-focus:var(--spectrum-transparent-white-200); - - /* Drop Zone background color rgb */ - --spectrum-drop-zone-background-color-rgb:var( --spectrum-blue-900-rgb); /* var(--spectrum-accent-color-900);*/ - - /* Drop Indicator color rgb */ - --spectrum-dropindicator-color:var(--spectrum-blue-700); - - --spectrum-calendar-day-background-color-selected:rgba(var(--spectrum-blue-800-rgb), 0.2); - --spectrum-calendar-day-background-color-hover:rgba(var(--spectrum-white-rgb), 0.08); - --spectrum-calendar-day-today-background-color-selected-hover:rgba(var(--spectrum-blue-800-rgb), 0.3); - --spectrum-calendar-day-background-color-selected-hover:rgba(var(--spectrum-blue-800-rgb), 0.3); - --spectrum-calendar-day-background-color-down:rgba(var(--spectrum-white-rgb), 0.15); - --spectrum-calendar-day-background-color-cap-selected:rgba(var(--spectrum-blue-800-rgb), 0.3); - --spectrum-calendar-day-background-color-key-focus:rgba(var(--spectrum-white-rgb), 0.08); - --spectrum-calendar-day-border-color-key-focus:var(--spectrum-blue-700); - - --spectrum-badge-label-icon-color-primary:var(--spectrum-black); - - --spectrum-coach-indicator-ring-default-color:var(--spectrum-blue-700); - --spectrum-coach-indicator-ring-dark-color:var(--spectrum-gray-900); - --spectrum-coach-indicator-ring-light-color:var(--spectrum-gray-50); - - --spectrum-well-border-color:rgba(var(--spectrum-white-rgb), 0.05); - - --spectrum-steplist-current-marker-color-key-focus:var(--spectrum-blue-700); - - --spectrum-treeview-item-background-color-quiet-selected:rgba(var(--spectrum-gray-900-rgb), 0.08); - --spectrum-treeview-item-background-color-selected:rgba(var(--spectrum-blue-800-rgb), 0.2); - - --spectrum-logic-button-and-background-color:var(--spectrum-blue-800); - --spectrum-logic-button-and-border-color:var(--spectrum-blue-800); - --spectrum-logic-button-and-background-color-hover:var(--spectrum-blue-1000); - --spectrum-logic-button-and-border-color-hover:var(--spectrum-blue-1000); - - --spectrum-logic-button-or-background-color:var(--spectrum-magenta-700); - --spectrum-logic-button-or-border-color:var(--spectrum-magenta-700); - --spectrum-logic-button-or-background-color-hover:var(--spectrum-magenta-900); - --spectrum-logic-button-or-border-color-hover:var(--spectrum-magenta-900); - - --spectrum-assetcard-border-color-selected:var(--spectrum-blue-800); - --spectrum-assetcard-border-color-selected-hover:var(--spectrum-blue-800); - --spectrum-assetcard-border-color-selected-down:var(--spectrum-blue-900); - --spectrum-assetcard-selectionindicator-background-color-ordered:var(--spectrum-blue-800); - --spectrum-assestcard-focus-indicator-color:var(--spectrum-blue-700); - - --spectrum-assetlist-item-background-color-selected-hover:rgba(var(--spectrum-blue-800-rgb), 0.3); - --spectrum-assetlist-item-background-color-selected:rgba(var(--spectrum-blue-800-rgb), 0.2); - --spectrum-assetlist-border-color-key-focus:var(--spectrum-blue-700); -} .spectrum{ --spectrum-focus-indicator-color:var(--spectrum-blue-800); --spectrum-static-white-focus-indicator-color:var(--spectrum-white); --spectrum-static-black-focus-indicator-color:var(--spectrum-black); --spectrum-overlay-color:var(--spectrum-black); --spectrum-opacity-disabled:0.3; + --spectrum-background-base-color:var(--spectrum-gray-25); + --spectrum-background-layer-1-color:var(--spectrum-gray-50); + --spectrum-neutral-background-color-default:var(--spectrum-gray-800); + --spectrum-neutral-background-color-hover:var(--spectrum-gray-900); + --spectrum-neutral-background-color-down:var(--spectrum-gray-900); + --spectrum-neutral-background-color-key-focus:var(--spectrum-gray-900); + --spectrum-neutral-background-color-selected-default:var(--spectrum-gray-800); + --spectrum-neutral-background-color-selected-hover:var(--spectrum-gray-900); + --spectrum-neutral-background-color-selected-down:var(--spectrum-gray-900); + --spectrum-neutral-background-color-selected-key-focus:var(--spectrum-gray-900); --spectrum-neutral-subdued-content-color-selected:var(--spectrum-neutral-subdued-content-color-down); --spectrum-accent-content-color-selected:var(--spectrum-accent-content-color-down); - --spectrum-disabled-background-color:var(--spectrum-gray-200); - --spectrum-disabled-static-white-background-color:var(--spectrum-transparent-white-200); - --spectrum-disabled-static-black-background-color:var(--spectrum-transparent-black-200); + --spectrum-disabled-background-color:var(--spectrum-gray-100); + --spectrum-disabled-static-white-background-color:var(--spectrum-transparent-white-100); + --spectrum-disabled-static-black-background-color:var(--spectrum-transparent-black-100); --spectrum-background-opacity-default:0; --spectrum-background-opacity-hover:0.1; --spectrum-background-opacity-down:0.1; @@ -1047,19 +766,19 @@ --spectrum-neutral-content-color-key-focus:var(--spectrum-gray-900); --spectrum-neutral-subdued-content-color-default:var(--spectrum-gray-700); --spectrum-neutral-subdued-content-color-hover:var(--spectrum-gray-800); - --spectrum-neutral-subdued-content-color-down:var(--spectrum-gray-900); + --spectrum-neutral-subdued-content-color-down:var(--spectrum-gray-800); --spectrum-neutral-subdued-content-color-key-focus:var(--spectrum-gray-800); --spectrum-accent-content-color-default:var(--spectrum-accent-color-900); --spectrum-accent-content-color-hover:var(--spectrum-accent-color-1000); - --spectrum-accent-content-color-down:var(--spectrum-accent-color-1100); + --spectrum-accent-content-color-down:var(--spectrum-accent-color-1000); --spectrum-accent-content-color-key-focus:var(--spectrum-accent-color-1000); --spectrum-negative-content-color-default:var(--spectrum-negative-color-900); --spectrum-negative-content-color-hover:var(--spectrum-negative-color-1000); - --spectrum-negative-content-color-down:var(--spectrum-negative-color-1100); + --spectrum-negative-content-color-down:var(--spectrum-negative-color-1000); --spectrum-negative-content-color-key-focus:var(--spectrum-negative-color-1000); --spectrum-disabled-content-color:var(--spectrum-gray-400); - --spectrum-disabled-static-white-content-color:var(--spectrum-transparent-white-500); - --spectrum-disabled-static-black-content-color:var(--spectrum-transparent-black-500); + --spectrum-disabled-static-white-content-color:var(--spectrum-transparent-white-400); + --spectrum-disabled-static-black-content-color:var(--spectrum-transparent-black-400); --spectrum-disabled-border-color:var(--spectrum-gray-300); --spectrum-disabled-static-white-border-color:var(--spectrum-transparent-white-300); --spectrum-disabled-static-black-border-color:var(--spectrum-transparent-black-300); @@ -1078,11 +797,13 @@ --spectrum-thumbnail-opacity-disabled:var(--spectrum-opacity-disabled); --spectrum-opacity-checkerboard-square-light:var(--spectrum-white); --spectrum-avatar-opacity-disabled:var(--spectrum-opacity-disabled); - --spectrum-color-area-border-color:var(--spectrum-gray-900); + --spectrum-color-area-border-color:var(--spectrum-gray-1000); --spectrum-color-area-border-opacity:0.1; - --spectrum-color-slider-border-color:var(--spectrum-gray-900); + --spectrum-color-slider-border-color:var(--spectrum-gray-1000); --spectrum-color-slider-border-opacity:0.1; --spectrum-color-loupe-drop-shadow-color:var(--spectrum-transparent-black-300); + --spectrum-color-loupe-drop-shadow-y:2px; + --spectrum-color-loupe-drop-shadow-blur:8px; --spectrum-color-loupe-inner-border:var(--spectrum-transparent-black-200); --spectrum-color-loupe-outer-border:var(--spectrum-white); --spectrum-card-selection-background-color:var(--spectrum-gray-100); @@ -1109,65 +830,91 @@ --spectrum-table-selected-row-background-opacity-non-emphasized-hover:0.15; --spectrum-white-rgb:255, 255, 255; --spectrum-white:rgba(var(--spectrum-white-rgb)); + --spectrum-transparent-white-25-rgb:255, 255, 255; + --spectrum-transparent-white-25-opacity:0; + --spectrum-transparent-white-25:rgba(var(--spectrum-transparent-white-25-rgb), var(--spectrum-transparent-white-25-opacity)); + --spectrum-transparent-white-50-rgb:255, 255, 255; + --spectrum-transparent-white-50-opacity:0.04; + --spectrum-transparent-white-50:rgba(var(--spectrum-transparent-white-50-rgb), var(--spectrum-transparent-white-50-opacity)); + --spectrum-transparent-white-75-rgb:255, 255, 255; + --spectrum-transparent-white-75-opacity:0.07; + --spectrum-transparent-white-75:rgba(var(--spectrum-transparent-white-75-rgb), var(--spectrum-transparent-white-75-opacity)); --spectrum-transparent-white-100-rgb:255, 255, 255; - --spectrum-transparent-white-100-opacity:0; + --spectrum-transparent-white-100-opacity:0.11; --spectrum-transparent-white-100:rgba(var(--spectrum-transparent-white-100-rgb), var(--spectrum-transparent-white-100-opacity)); --spectrum-transparent-white-200-rgb:255, 255, 255; - --spectrum-transparent-white-200-opacity:0.1; + --spectrum-transparent-white-200-opacity:0.14; --spectrum-transparent-white-200:rgba(var(--spectrum-transparent-white-200-rgb), var(--spectrum-transparent-white-200-opacity)); --spectrum-transparent-white-300-rgb:255, 255, 255; - --spectrum-transparent-white-300-opacity:0.25; + --spectrum-transparent-white-300-opacity:0.17; --spectrum-transparent-white-300:rgba(var(--spectrum-transparent-white-300-rgb), var(--spectrum-transparent-white-300-opacity)); --spectrum-transparent-white-400-rgb:255, 255, 255; - --spectrum-transparent-white-400-opacity:0.4; + --spectrum-transparent-white-400-opacity:0.21; --spectrum-transparent-white-400:rgba(var(--spectrum-transparent-white-400-rgb), var(--spectrum-transparent-white-400-opacity)); --spectrum-transparent-white-500-rgb:255, 255, 255; - --spectrum-transparent-white-500-opacity:0.55; + --spectrum-transparent-white-500-opacity:0.39; --spectrum-transparent-white-500:rgba(var(--spectrum-transparent-white-500-rgb), var(--spectrum-transparent-white-500-opacity)); --spectrum-transparent-white-600-rgb:255, 255, 255; - --spectrum-transparent-white-600-opacity:0.7; + --spectrum-transparent-white-600-opacity:0.51; --spectrum-transparent-white-600:rgba(var(--spectrum-transparent-white-600-rgb), var(--spectrum-transparent-white-600-opacity)); --spectrum-transparent-white-700-rgb:255, 255, 255; - --spectrum-transparent-white-700-opacity:0.8; + --spectrum-transparent-white-700-opacity:0.66; --spectrum-transparent-white-700:rgba(var(--spectrum-transparent-white-700-rgb), var(--spectrum-transparent-white-700-opacity)); --spectrum-transparent-white-800-rgb:255, 255, 255; - --spectrum-transparent-white-800-opacity:0.9; + --spectrum-transparent-white-800-opacity:0.85; --spectrum-transparent-white-800:rgba(var(--spectrum-transparent-white-800-rgb), var(--spectrum-transparent-white-800-opacity)); --spectrum-transparent-white-900-rgb:255, 255, 255; - --spectrum-transparent-white-900:rgba(var(--spectrum-transparent-white-900-rgb)); + --spectrum-transparent-white-900-opacity:0.94; + --spectrum-transparent-white-900:rgba(var(--spectrum-transparent-white-900-rgb), var(--spectrum-transparent-white-900-opacity)); + --spectrum-transparent-white-1000-rgb:255, 255, 255; + --spectrum-transparent-white-1000:rgba(var(--spectrum-transparent-white-1000-rgb)); --spectrum-black-rgb:0, 0, 0; --spectrum-black:rgba(var(--spectrum-black-rgb)); + --spectrum-transparent-black-25-rgb:0, 0, 0; + --spectrum-transparent-black-25-opacity:0; + --spectrum-transparent-black-25:rgba(var(--spectrum-transparent-black-25-rgb), var(--spectrum-transparent-black-25-opacity)); + --spectrum-transparent-black-50-rgb:0, 0, 0; + --spectrum-transparent-black-50-opacity:0.03; + --spectrum-transparent-black-50:rgba(var(--spectrum-transparent-black-50-rgb), var(--spectrum-transparent-black-50-opacity)); + --spectrum-transparent-black-75-rgb:0, 0, 0; + --spectrum-transparent-black-75-opacity:0.05; + --spectrum-transparent-black-75:rgba(var(--spectrum-transparent-black-75-rgb), var(--spectrum-transparent-black-75-opacity)); --spectrum-transparent-black-100-rgb:0, 0, 0; - --spectrum-transparent-black-100-opacity:0; + --spectrum-transparent-black-100-opacity:0.09; --spectrum-transparent-black-100:rgba(var(--spectrum-transparent-black-100-rgb), var(--spectrum-transparent-black-100-opacity)); --spectrum-transparent-black-200-rgb:0, 0, 0; - --spectrum-transparent-black-200-opacity:0.1; + --spectrum-transparent-black-200-opacity:0.12; --spectrum-transparent-black-200:rgba(var(--spectrum-transparent-black-200-rgb), var(--spectrum-transparent-black-200-opacity)); --spectrum-transparent-black-300-rgb:0, 0, 0; - --spectrum-transparent-black-300-opacity:0.25; + --spectrum-transparent-black-300-opacity:0.15; --spectrum-transparent-black-300:rgba(var(--spectrum-transparent-black-300-rgb), var(--spectrum-transparent-black-300-opacity)); --spectrum-transparent-black-400-rgb:0, 0, 0; - --spectrum-transparent-black-400-opacity:0.4; + --spectrum-transparent-black-400-opacity:0.22; --spectrum-transparent-black-400:rgba(var(--spectrum-transparent-black-400-rgb), var(--spectrum-transparent-black-400-opacity)); --spectrum-transparent-black-500-rgb:0, 0, 0; - --spectrum-transparent-black-500-opacity:0.55; + --spectrum-transparent-black-500-opacity:0.44; --spectrum-transparent-black-500:rgba(var(--spectrum-transparent-black-500-rgb), var(--spectrum-transparent-black-500-opacity)); --spectrum-transparent-black-600-rgb:0, 0, 0; - --spectrum-transparent-black-600-opacity:0.7; + --spectrum-transparent-black-600-opacity:0.56; --spectrum-transparent-black-600:rgba(var(--spectrum-transparent-black-600-rgb), var(--spectrum-transparent-black-600-opacity)); --spectrum-transparent-black-700-rgb:0, 0, 0; - --spectrum-transparent-black-700-opacity:0.8; + --spectrum-transparent-black-700-opacity:0.69; --spectrum-transparent-black-700:rgba(var(--spectrum-transparent-black-700-rgb), var(--spectrum-transparent-black-700-opacity)); --spectrum-transparent-black-800-rgb:0, 0, 0; - --spectrum-transparent-black-800-opacity:0.9; + --spectrum-transparent-black-800-opacity:0.84; --spectrum-transparent-black-800:rgba(var(--spectrum-transparent-black-800-rgb), var(--spectrum-transparent-black-800-opacity)); --spectrum-transparent-black-900-rgb:0, 0, 0; - --spectrum-transparent-black-900:rgba(var(--spectrum-transparent-black-900-rgb)); + --spectrum-transparent-black-900-opacity:0.93; + --spectrum-transparent-black-900:rgba(var(--spectrum-transparent-black-900-rgb), var(--spectrum-transparent-black-900-opacity)); + --spectrum-transparent-black-1000-rgb:0, 0, 0; + --spectrum-transparent-black-1000:rgba(var(--spectrum-transparent-black-1000-rgb)); --spectrum-icon-color-inverse:var(--spectrum-gray-50); --spectrum-icon-color-primary-default:var(--spectrum-neutral-content-color-default); - --spectrum-asterisk-icon-size-75:8px; --spectrum-radio-button-selection-indicator:4px; --spectrum-field-label-top-margin-small:0px; + --spectrum-field-label-top-margin-medium:0px; + --spectrum-field-label-top-margin-large:0px; + --spectrum-field-label-top-margin-extra-large:0px; --spectrum-field-label-to-component:0px; --spectrum-help-text-to-component:0px; --spectrum-status-light-dot-size-small:8px; @@ -1192,7 +939,10 @@ --spectrum-popover-tip-height:8px; --spectrum-menu-item-label-to-description:1px; --spectrum-menu-item-section-divider-height:8px; + --spectrum-slider-track-thickness:2px; + --spectrum-slider-handle-gap:4px; --spectrum-picker-minimum-width-multiplier:2; + --spectrum-picker-border-width:var(--spectrum-border-width-100); --spectrum-picker-end-edge-to-disclousure-icon-quiet:var(--spectrum-picker-end-edge-to-disclosure-icon-quiet); --spectrum-picker-end-edge-to-disclosure-icon-quiet:0px; --spectrum-text-field-minimum-width-multiplier:1.5; @@ -1212,21 +962,19 @@ --spectrum-alert-banner-to-top-text:var(--spectrum-alert-banner-top-to-text); --spectrum-alert-banner-to-bottom-text:var(--spectrum-alert-banner-bottom-to-text); --spectrum-color-area-border-width:var(--spectrum-border-width-100); - --spectrum-color-area-border-rounding:var(--spectrum-corner-radius-100); + --spectrum-color-area-border-rounding:var(--spectrum-corner-radius-medium-size-small); --spectrum-color-wheel-color-area-margin:12px; --spectrum-color-slider-border-width:1px; - --spectrum-color-slider-border-rounding:4px; + --spectrum-color-slider-border-rounding:var(--spectrum-corner-radius-medium-size-small); --spectrum-floating-action-button-drop-shadow-blur:12px; --spectrum-floating-action-button-drop-shadow-y:4px; --spectrum-illustrated-message-maximum-width:380px; - --spectrum-search-field-minimum-width-multiplier:3; + --spectrum-search-field-minimum-width-multiplier:4; --spectrum-color-loupe-height:64px; --spectrum-color-loupe-width:48px; --spectrum-color-loupe-bottom-to-color-handle:12px; --spectrum-color-loupe-outer-border-width:var(--spectrum-border-width-200); --spectrum-color-loupe-inner-border-width:1px; - --spectrum-color-loupe-drop-shadow-y:2px; - --spectrum-color-loupe-drop-shadow-blur:8px; --spectrum-card-minimum-width:100px; --spectrum-card-preview-minimum-height:130px; --spectrum-card-selection-background-size:40px; @@ -1276,11 +1024,84 @@ --spectrum-in-field-button-width-stacked-medium:28px; --spectrum-in-field-button-width-stacked-large:36px; --spectrum-in-field-button-width-stacked-extra-large:44px; + --spectrum-in-field-button-fill-stacked-inner-border-rounding:0px; + --spectrum-in-field-button-edge-to-fill:0px; + --spectrum-in-field-button-stacked-inner-edge-to-fill:0px; --spectrum-in-field-button-edge-to-disclosure-icon-stacked-small:7px; --spectrum-in-field-button-edge-to-disclosure-icon-stacked-medium:9px; --spectrum-in-field-button-edge-to-disclosure-icon-stacked-large:13px; --spectrum-in-field-button-edge-to-disclosure-icon-stacked-extra-large:16px; --spectrum-in-field-button-outer-edge-to-disclosure-icon-stacked-small:3px; + --spectrum-in-field-button-outer-edge-to-disclosure-icon-stacked-medium:3px; + --spectrum-in-field-button-outer-edge-to-disclosure-icon-stacked-large:4px; + --spectrum-in-field-button-outer-edge-to-disclosure-icon-stacked-extra-large:5px; + --spectrum-in-field-button-inner-edge-to-disclosure-icon-stacked-small:var(--spectrum-in-field-button-outer-edge-to-disclosure-icon-stacked-small); + --spectrum-in-field-button-inner-edge-to-disclosure-icon-stacked-medium:var(--spectrum-in-field-button-outer-edge-to-disclosure-icon-stacked-medium); + --spectrum-in-field-button-inner-edge-to-disclosure-icon-stacked-large:var(--spectrum-in-field-button-outer-edge-to-disclosure-icon-stacked-large); + --spectrum-in-field-button-inner-edge-to-disclosure-icon-stacked-extra-large:var(--spectrum-in-field-button-outer-edge-to-disclosure-icon-stacked-extra-large); + --spectrum-asterisk-icon-size-75:8px; + --spectrum-divider-vertical-minimum-height:200px; + --spectrum-divider-horizontal-minimum-width:200px; + --spectrum-tooltip-tip-corner-radius:1px; + --spectrum-tag-minimum-width-multiplier:1; + --spectrum-tag-maximum-width-multiplier:7; + --spectrum-title-cjk-emphasized-font-style:var(--spectrum-default-font-style); + --spectrum-title-cjk-emphasized-font-weight:var(--spectrum-extra-bold-font-weight); + --spectrum-title-cjk-font-family:var(--spectrum-cjk-font-family); + --spectrum-title-cjk-font-style:var(--spectrum-default-font-style); + --spectrum-title-cjk-font-weight:var(--spectrum-bold-font-weight); + --spectrum-title-cjk-line-height:var(--spectrum-cjk-line-height-100); + --spectrum-title-cjk-size-l:var(--spectrum-font-size-200); + --spectrum-title-cjk-size-m:var(--spectrum-font-size-100); + --spectrum-title-cjk-size-s:var(--spectrum-font-size-75); + --spectrum-title-cjk-size-xl:var(--spectrum-font-size-300); + --spectrum-title-cjk-size-xs:var(--spectrum-font-size-50); + --spectrum-title-cjk-size-xxl:var(--spectrum-font-size-400); + --spectrum-title-cjk-size-xxxl:var(--spectrum-font-size-500); + --spectrum-title-cjk-strong-emphasized-font-style:var(--spectrum-default-font-style); + --spectrum-title-cjk-strong-emphasized-font-weight:var(--spectrum-extra-bold-font-weight); + --spectrum-title-cjk-strong-font-style:var(--spectrum-default-font-style); + --spectrum-title-cjk-strong-font-weight:var(--spectrum-extra-bold-font-weight); + --spectrum-title-line-height:var(--spectrum-line-height-100); + --spectrum-title-margin-bottom-multiplier:0.25; + --spectrum-title-margin-top-multiplier:0.88888889; + --spectrum-title-sans-serif-emphasized-font-style:var(--spectrum-italic-font-style); + --spectrum-title-sans-serif-emphasized-font-weight:var(--spectrum-bold-font-weight); + --spectrum-title-sans-serif-font-family:var(--spectrum-sans-serif-font-family); + --spectrum-title-sans-serif-font-style:var(--spectrum-default-font-style); + --spectrum-title-sans-serif-font-weight:var(--spectrum-bold-font-weight); + --spectrum-title-sans-serif-strong-emphasized-font-style:var(--spectrum-italic-font-style); + --spectrum-title-sans-serif-strong-emphasized-font-weight:var(--spectrum-extra-bold-font-weight); + --spectrum-title-sans-serif-strong-font-style:var(--spectrum-default-font-style); + --spectrum-title-sans-serif-strong-font-weight:var(--spectrum-extra-bold-font-weight); + --spectrum-title-serif-emphasized-font-style:var(--spectrum-italic-font-style); + --spectrum-title-serif-emphasized-font-weight:var(--spectrum-bold-font-weight); + --spectrum-title-serif-font-family:var(--spectrum-serif-font-family); + --spectrum-title-serif-font-style:var(--spectrum-default-font-style); + --spectrum-title-serif-font-weight:var(--spectrum-bold-font-weight); + --spectrum-title-serif-strong-emphasized-font-style:var(--spectrum-italic-font-style); + --spectrum-title-serif-strong-emphasized-font-weight:var(--spectrum-black-font-weight); + --spectrum-title-serif-strong-font-style:var(--spectrum-default-font-style); + --spectrum-title-serif-strong-font-weight:var(--spectrum-black-font-weight); + --spectrum-title-size-l:var(--spectrum-font-size-300); + --spectrum-title-size-m:var(--spectrum-font-size-200); + --spectrum-title-size-s:var(--spectrum-font-size-100); + --spectrum-title-size-xl:var(--spectrum-font-size-400); + --spectrum-title-size-xs:var(--spectrum-font-size-75); + --spectrum-title-size-xxl:var(--spectrum-font-size-500); + --spectrum-title-size-xxxl:var(--spectrum-font-size-600); + --spectrum-corner-radius-0:0px; + --spectrum-corner-radius-75:3px; + --spectrum-corner-radius-100:4px; + --spectrum-corner-radius-200:5px; + --spectrum-corner-radius-300:6px; + --spectrum-corner-radius-400:7px; + --spectrum-corner-radius-500:8px; + --spectrum-corner-radius-600:9px; + --spectrum-corner-radius-700:10px; + --spectrum-corner-radius-800:16px; + --spectrum-corner-radius-1000:0.5; + --spectrum-drop-shadow-x:0px; --spectrum-android-elevation:2dp; --spectrum-spacing-50:2px; --spectrum-spacing-75:4px; @@ -1296,6 +1117,7 @@ --spectrum-spacing-1000:96px; --spectrum-focus-indicator-thickness:2px; --spectrum-focus-indicator-gap:2px; + --spectrum-border-width-100:1px; --spectrum-border-width-200:2px; --spectrum-border-width-400:4px; --spectrum-field-edge-to-text-quiet:0px; @@ -1303,8 +1125,46 @@ --spectrum-field-edge-to-border-quiet:0px; --spectrum-field-edge-to-alert-icon-quiet:0px; --spectrum-field-edge-to-validation-icon-quiet:0px; + --spectrum-side-label-character-count-top-margin-small:0px; + --spectrum-side-label-character-count-top-margin-medium:0px; + --spectrum-side-label-character-count-top-margin-large:0px; + --spectrum-side-label-character-count-top-margin-extra-large:0px; --spectrum-text-underline-thickness:1px; --spectrum-text-underline-gap:1px; + --spectrum-component-size-width-ratio-down:0.3333; + --spectrum-component-size-minimum-perspective-down:24px; + --spectrum-component-size-difference-down:-2px; + --spectrum-corner-radius-none:var(--spectrum-corner-radius-0); + --spectrum-corner-radius-small-default:var(--spectrum-corner-radius-100); + --spectrum-corner-radius-medium-default:var(--spectrum-corner-radius-500); + --spectrum-corner-radius-large-default:var(--spectrum-corner-radius-700); + --spectrum-corner-radius-extra-large-default:var(--spectrum-corner-radius-800); + --spectrum-corner-radius-full:var(--spectrum-corner-radius-1000); + --spectrum-corner-radius-small-size-small:var(--spectrum-corner-radius-75); + --spectrum-corner-radius-small-size-medium:var(--spectrum-corner-radius-100); + --spectrum-corner-radius-small-size-large:var(--spectrum-corner-radius-200); + --spectrum-corner-radius-small-size-extra-large:var(--spectrum-corner-radius-300); + --spectrum-corner-radius-medium-size-extra-small:var(--spectrum-corner-radius-300); + --spectrum-corner-radius-medium-size-small:var(--spectrum-corner-radius-400); + --spectrum-corner-radius-medium-size-medium:var(--spectrum-corner-radius-500); + --spectrum-corner-radius-medium-size-large:var(--spectrum-corner-radius-600); + --spectrum-corner-radius-medium-size-extra-large:var(--spectrum-corner-radius-700); + --spectrum-accent-color-100:var(--spectrum-blue-100); + --spectrum-accent-color-200:var(--spectrum-blue-200); + --spectrum-accent-color-300:var(--spectrum-blue-300); + --spectrum-accent-color-400:var(--spectrum-blue-400); + --spectrum-accent-color-500:var(--spectrum-blue-500); + --spectrum-accent-color-600:var(--spectrum-blue-600); + --spectrum-accent-color-700:var(--spectrum-blue-700); + --spectrum-accent-color-800:var(--spectrum-blue-800); + --spectrum-accent-color-900:var(--spectrum-blue-900); + --spectrum-accent-color-1000:var(--spectrum-blue-1000); + --spectrum-accent-color-1100:var(--spectrum-blue-1100); + --spectrum-accent-color-1200:var(--spectrum-blue-1200); + --spectrum-accent-color-1300:var(--spectrum-blue-1300); + --spectrum-accent-color-1400:var(--spectrum-blue-1400); + --spectrum-accent-color-1500:var(--spectrum-blue-1500); + --spectrum-accent-color-1600:var(--spectrum-blue-1600); --spectrum-informative-color-100:var(--spectrum-blue-100); --spectrum-informative-color-200:var(--spectrum-blue-200); --spectrum-informative-color-300:var(--spectrum-blue-300); @@ -1319,6 +1179,8 @@ --spectrum-informative-color-1200:var(--spectrum-blue-1200); --spectrum-informative-color-1300:var(--spectrum-blue-1300); --spectrum-informative-color-1400:var(--spectrum-blue-1400); + --spectrum-informative-color-1500:var(--spectrum-blue-1500); + --spectrum-informative-color-1600:var(--spectrum-blue-1600); --spectrum-negative-color-100:var(--spectrum-red-100); --spectrum-negative-color-200:var(--spectrum-red-200); --spectrum-negative-color-300:var(--spectrum-red-300); @@ -1333,6 +1195,8 @@ --spectrum-negative-color-1200:var(--spectrum-red-1200); --spectrum-negative-color-1300:var(--spectrum-red-1300); --spectrum-negative-color-1400:var(--spectrum-red-1400); + --spectrum-negative-color-1500:var(--spectrum-red-1500); + --spectrum-negative-color-1600:var(--spectrum-red-1600); --spectrum-notice-color-100:var(--spectrum-orange-100); --spectrum-notice-color-200:var(--spectrum-orange-200); --spectrum-notice-color-300:var(--spectrum-orange-300); @@ -1347,6 +1211,8 @@ --spectrum-notice-color-1200:var(--spectrum-orange-1200); --spectrum-notice-color-1300:var(--spectrum-orange-1300); --spectrum-notice-color-1400:var(--spectrum-orange-1400); + --spectrum-notice-color-1500:var(--spectrum-orange-1500); + --spectrum-notice-color-1600:var(--spectrum-orange-1600); --spectrum-positive-color-100:var(--spectrum-green-100); --spectrum-positive-color-200:var(--spectrum-green-200); --spectrum-positive-color-300:var(--spectrum-green-300); @@ -1361,6 +1227,12 @@ --spectrum-positive-color-1200:var(--spectrum-green-1200); --spectrum-positive-color-1300:var(--spectrum-green-1300); --spectrum-positive-color-1400:var(--spectrum-green-1400); + --spectrum-positive-color-1500:var(--spectrum-green-1500); + --spectrum-positive-color-1600:var(--spectrum-green-1600); + --spectrum-negative-subdued-background-color-default:var(--spectrum-negative-color-200); + --spectrum-negative-subdued-background-color-hover:var(--spectrum-negative-color-300); + --spectrum-negative-subdued-background-color-down:var(--spectrum-negative-color-300); + --spectrum-negative-subdued-background-color-key-focus:var(--spectrum-negative-color-300); --spectrum-default-font-family:var(--spectrum-sans-serif-font-family); --spectrum-sans-serif-font-family:Adobe Clean; --spectrum-serif-font-family:Adobe Clean Serif; @@ -1387,8 +1259,11 @@ --spectrum-heading-serif-light-font-style:var(--spectrum-default-font-style); --spectrum-heading-cjk-light-font-weight:var(--spectrum-light-font-weight); --spectrum-heading-cjk-light-font-style:var(--spectrum-default-font-style); + --spectrum-heading-sans-serif-font-weight:var(--spectrum-bold-font-weight); --spectrum-heading-sans-serif-font-style:var(--spectrum-default-font-style); + --spectrum-heading-serif-font-weight:var(--spectrum-bold-font-weight); --spectrum-heading-serif-font-style:var(--spectrum-default-font-style); + --spectrum-heading-cjk-font-weight:var(--spectrum-extra-bold-font-weight); --spectrum-heading-cjk-font-style:var(--spectrum-default-font-style); --spectrum-heading-sans-serif-heavy-font-weight:var(--spectrum-black-font-weight); --spectrum-heading-sans-serif-heavy-font-style:var(--spectrum-default-font-style); @@ -1420,7 +1295,9 @@ --spectrum-heading-serif-light-emphasized-font-style:var(--spectrum-italic-font-style); --spectrum-heading-cjk-light-emphasized-font-weight:var(--spectrum-regular-font-weight); --spectrum-heading-cjk-light-emphasized-font-style:var(--spectrum-default-font-style); + --spectrum-heading-sans-serif-emphasized-font-weight:var(--spectrum-bold-font-weight); --spectrum-heading-sans-serif-emphasized-font-style:var(--spectrum-italic-font-style); + --spectrum-heading-serif-emphasized-font-weight:var(--spectrum-bold-font-weight); --spectrum-heading-serif-emphasized-font-style:var(--spectrum-italic-font-style); --spectrum-heading-cjk-emphasized-font-weight:var(--spectrum-black-font-weight); --spectrum-heading-cjk-emphasized-font-style:var(--spectrum-default-font-style); @@ -1600,131 +1477,73 @@ --spectrum-animation-linear:cubic-bezier(0, 0, 1, 1); --spectrum-animation-duration-0:0ms; --spectrum-animation-duration-100:130ms; - --spectrum-animation-duration-200:160ms; - --spectrum-animation-duration-300:190ms; - --spectrum-animation-duration-400:220ms; - --spectrum-animation-duration-500:250ms; - --spectrum-animation-duration-600:300ms; - --spectrum-animation-duration-700:350ms; - --spectrum-animation-duration-800:400ms; - --spectrum-animation-duration-900:450ms; - --spectrum-animation-duration-1000:500ms; - --spectrum-animation-duration-2000:1000ms; - --spectrum-animation-duration-4000:2000ms; - --spectrum-animation-duration-6000:3000ms; - --spectrum-animation-ease-in-out:cubic-bezier(.45, 0, .40, 1); - --spectrum-animation-ease-in:cubic-bezier(.50, 0, 1, 1); - --spectrum-animation-ease-out:cubic-bezier(0, 0, 0.40, 1); - --spectrum-animation-ease-linear:cubic-bezier(0, 0, 1, 1); - - - --spectrum-sans-font-family-stack:adobe-clean, var(--spectrum-sans-serif-font-family), 'Source Sans Pro', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Ubuntu, 'Trebuchet MS', 'Lucida Grande', sans-serif; - --spectrum-sans-serif-font:var(--spectrum-sans-font-family-stack); - - --spectrum-serif-font-family-stack:adobe-clean-serif, var(--spectrum-serif-font-family), 'Source Serif Pro', Georgia, serif; - --spectrum-serif-font:var(--spectrum-serif-font-family-stack); - - --spectrum-code-font-family-stack:'Source Code Pro', Monaco, monospace; - - --spectrum-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-white-background-color:rgba(var(--spectrum-docs-static-white-background-color-rgb)); - --spectrum-docs-static-black-background-color-rgb:206, 247, 243; - --spectrum-docs-static-black-background-color:rgba(var(--spectrum-docs-static-black-background-color-rgb)); - --spectrum-neutral-background-color-selected-default:var(--spectrum-gray-700); - --spectrum-neutral-background-color-selected-hover:var(--spectrum-gray-800); - --spectrum-neutral-background-color-selected-down:var(--spectrum-gray-900); - --spectrum-neutral-background-color-selected-key-focus:var(--spectrum-gray-800); - --spectrum-slider-track-thickness:2px; - --spectrum-slider-handle-gap:4px; - --spectrum-picker-border-width:var(--spectrum-border-width-100); - --spectrum-in-field-button-fill-stacked-inner-border-rounding:0px; - --spectrum-in-field-button-edge-to-fill:0px; - --spectrum-in-field-button-stacked-inner-edge-to-fill:0px; - --spectrum-in-field-button-outer-edge-to-disclosure-icon-stacked-medium:3px; - --spectrum-in-field-button-outer-edge-to-disclosure-icon-stacked-large:4px; - --spectrum-in-field-button-outer-edge-to-disclosure-icon-stacked-extra-large:5px; - --spectrum-in-field-button-inner-edge-to-disclosure-icon-stacked-small:var(--spectrum-in-field-button-outer-edge-to-disclosure-icon-stacked-small); - --spectrum-in-field-button-inner-edge-to-disclosure-icon-stacked-medium:var(--spectrum-in-field-button-outer-edge-to-disclosure-icon-stacked-medium); - --spectrum-in-field-button-inner-edge-to-disclosure-icon-stacked-large:var(--spectrum-in-field-button-outer-edge-to-disclosure-icon-stacked-large); - --spectrum-in-field-button-inner-edge-to-disclosure-icon-stacked-extra-large:var(--spectrum-in-field-button-outer-edge-to-disclosure-icon-stacked-extra-large); - --spectrum-corner-radius-75:2px; - --spectrum-drop-shadow-x:0px; - --spectrum-border-width-100:1px; - --spectrum-accent-color-100:var(--spectrum-blue-100); - --spectrum-accent-color-200:var(--spectrum-blue-200); - --spectrum-accent-color-300:var(--spectrum-blue-300); - --spectrum-accent-color-400:var(--spectrum-blue-400); - --spectrum-accent-color-500:var(--spectrum-blue-500); - --spectrum-accent-color-600:var(--spectrum-blue-600); - --spectrum-accent-color-700:var(--spectrum-blue-700); - --spectrum-accent-color-800:var(--spectrum-blue-800); - --spectrum-accent-color-900:var(--spectrum-blue-900); - --spectrum-accent-color-1000:var(--spectrum-blue-1000); - --spectrum-accent-color-1100:var(--spectrum-blue-1100); - --spectrum-accent-color-1200:var(--spectrum-blue-1200); - --spectrum-accent-color-1300:var(--spectrum-blue-1300); - --spectrum-accent-color-1400:var(--spectrum-blue-1400); - --spectrum-heading-sans-serif-font-weight:var(--spectrum-bold-font-weight); - --spectrum-heading-serif-font-weight:var(--spectrum-bold-font-weight); - --spectrum-heading-cjk-font-weight:var(--spectrum-extra-bold-font-weight); - --spectrum-heading-sans-serif-emphasized-font-weight:var(--spectrum-bold-font-weight); - --spectrum-heading-serif-emphasized-font-weight:var(--spectrum-bold-font-weight); -} -.spectrum--large{ - --spectrum-workflow-icon-size-50:18px; - --spectrum-workflow-icon-size-75:20px; - --spectrum-workflow-icon-size-100:22px; - --spectrum-workflow-icon-size-200:24px; - --spectrum-workflow-icon-size-300:28px; - --spectrum-arrow-icon-size-75:12px; - --spectrum-arrow-icon-size-100:14px; - --spectrum-arrow-icon-size-200:16px; - --spectrum-arrow-icon-size-300:16px; - --spectrum-arrow-icon-size-400:18px; - --spectrum-arrow-icon-size-500:22px; - --spectrum-arrow-icon-size-600:24px; - --spectrum-asterisk-icon-size-100:10px; - --spectrum-asterisk-icon-size-200:12px; - --spectrum-asterisk-icon-size-300:12px; - --spectrum-checkmark-icon-size-50:12px; - --spectrum-checkmark-icon-size-75:12px; - --spectrum-checkmark-icon-size-100:14px; - --spectrum-checkmark-icon-size-200:14px; - --spectrum-checkmark-icon-size-300:16px; - --spectrum-checkmark-icon-size-400:18px; - --spectrum-checkmark-icon-size-500:20px; - --spectrum-checkmark-icon-size-600:24px; - --spectrum-chevron-icon-size-50:8px; - --spectrum-chevron-icon-size-75:12px; - --spectrum-chevron-icon-size-100:14px; - --spectrum-chevron-icon-size-200:14px; - --spectrum-chevron-icon-size-300:16px; - --spectrum-chevron-icon-size-400:18px; - --spectrum-chevron-icon-size-500:20px; - --spectrum-chevron-icon-size-600:24px; - --spectrum-corner-triangle-icon-size-75:6px; - --spectrum-corner-triangle-icon-size-100:7px; - --spectrum-corner-triangle-icon-size-200:8px; - --spectrum-corner-triangle-icon-size-300:8px; - --spectrum-cross-icon-size-75:10px; - --spectrum-cross-icon-size-100:10px; - --spectrum-cross-icon-size-200:12px; - --spectrum-cross-icon-size-300:14px; - --spectrum-cross-icon-size-400:16px; - --spectrum-cross-icon-size-500:16px; - --spectrum-cross-icon-size-600:18px; - --spectrum-dash-icon-size-50:10px; - --spectrum-dash-icon-size-75:10px; - --spectrum-dash-icon-size-100:12px; - --spectrum-dash-icon-size-200:14px; - --spectrum-dash-icon-size-300:16px; - --spectrum-dash-icon-size-400:18px; - --spectrum-dash-icon-size-500:20px; - --spectrum-dash-icon-size-600:22px; + --spectrum-animation-duration-200:160ms; + --spectrum-animation-duration-300:190ms; + --spectrum-animation-duration-400:220ms; + --spectrum-animation-duration-500:250ms; + --spectrum-animation-duration-600:300ms; + --spectrum-animation-duration-700:350ms; + --spectrum-animation-duration-800:400ms; + --spectrum-animation-duration-900:450ms; + --spectrum-animation-duration-1000:500ms; + --spectrum-animation-duration-2000:1000ms; + --spectrum-animation-duration-4000:2000ms; + --spectrum-animation-duration-6000:3000ms; + --spectrum-animation-ease-in-out:cubic-bezier(.45, 0, .40, 1); + --spectrum-animation-ease-in:cubic-bezier(.50, 0, 1, 1); + --spectrum-animation-ease-out:cubic-bezier(0, 0, 0.40, 1); + --spectrum-animation-ease-linear:cubic-bezier(0, 0, 1, 1); + + + --spectrum-sans-font-family-stack:adobe-clean, var(--spectrum-sans-serif-font-family), 'Source Sans Pro', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Ubuntu, 'Trebuchet MS', 'Lucida Grande', sans-serif; + --spectrum-sans-serif-font:var(--spectrum-sans-font-family-stack); + + --spectrum-serif-font-family-stack:adobe-clean-serif, var(--spectrum-serif-font-family), 'Source Serif Pro', Georgia, serif; + --spectrum-serif-font:var(--spectrum-serif-font-family-stack); + + --spectrum-code-font-family-stack:'Source Code Pro', Monaco, monospace; + + --spectrum-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-white-background-color:rgba(var(--spectrum-docs-static-white-background-color-rgb)); + --spectrum-docs-static-black-background-color-rgb:206, 247, 243; + --spectrum-docs-static-black-background-color:rgba(var(--spectrum-docs-static-black-background-color-rgb)); + + /* override for Spectrum Tokens value until a Style Dictionary transform gets written for our usage */ + --spectrum-corner-radius-1000:9999px; +} +.spectrum--large{ + --spectrum-checkbox-control-size-small:16px; + --spectrum-checkbox-control-size-medium:18px; + --spectrum-checkbox-control-size-large:20px; + --spectrum-checkbox-control-size-extra-large:22px; + --spectrum-checkbox-top-to-control-small:7px; + --spectrum-checkbox-top-to-control-medium:11px; + --spectrum-checkbox-top-to-control-large:15px; + --spectrum-checkbox-top-to-control-extra-large:19px; + --spectrum-switch-control-width-small:30px; + --spectrum-switch-control-width-medium:34px; + --spectrum-switch-control-width-large:38px; + --spectrum-switch-control-width-extra-large:46px; + --spectrum-switch-control-height-small:18px; + --spectrum-switch-control-height-medium:20px; + --spectrum-switch-control-height-large:22px; + --spectrum-switch-control-height-extra-large:26px; + --spectrum-switch-top-to-control-small:7px; + --spectrum-switch-top-to-control-medium:11px; + --spectrum-switch-top-to-control-large:15px; + --spectrum-switch-top-to-control-extra-large:19px; + --spectrum-radio-button-control-size-small:16px; + --spectrum-radio-button-control-size-medium:18px; + --spectrum-radio-button-control-size-large:20px; + --spectrum-radio-button-control-size-extra-large:22px; + --spectrum-radio-button-top-to-control-small:7px; + --spectrum-radio-button-top-to-control-medium:11px; + --spectrum-radio-button-top-to-control-large:15px; + --spectrum-radio-button-top-to-control-extra-large:19px; --spectrum-field-label-text-to-asterisk-small:5px; --spectrum-field-label-text-to-asterisk-medium:5px; --spectrum-field-label-text-to-asterisk-large:6px; @@ -1733,17 +1552,14 @@ --spectrum-field-label-top-to-asterisk-medium:15px; --spectrum-field-label-top-to-asterisk-large:19px; --spectrum-field-label-top-to-asterisk-extra-large:24px; - --spectrum-field-label-top-margin-medium:5px; - --spectrum-field-label-top-margin-large:6px; - --spectrum-field-label-top-margin-extra-large:6px; --spectrum-field-label-to-component-quiet-small:-10px; --spectrum-field-label-to-component-quiet-medium:-10px; --spectrum-field-label-to-component-quiet-large:-15px; --spectrum-field-label-to-component-quiet-extra-large:-19px; - --spectrum-help-text-top-to-workflow-icon-small:5px; - --spectrum-help-text-top-to-workflow-icon-medium:4px; - --spectrum-help-text-top-to-workflow-icon-large:8px; - --spectrum-help-text-top-to-workflow-icon-extra-large:11px; + --spectrum-help-text-top-to-workflow-icon-small:var(--spectrum-component-top-to-workflow-icon-75); + --spectrum-help-text-top-to-workflow-icon-medium:var(--spectrum-component-top-to-workflow-icon-100); + --spectrum-help-text-top-to-workflow-icon-large:var(--spectrum-component-top-to-workflow-icon-200); + --spectrum-help-text-top-to-workflow-icon-extra-large:var(--spectrum-component-top-to-workflow-icon-300); --spectrum-status-light-dot-size-medium:10px; --spectrum-status-light-dot-size-large:12px; --spectrum-status-light-dot-size-extra-large:12px; @@ -1754,8 +1570,8 @@ --spectrum-action-button-edge-to-hold-icon-medium:5px; --spectrum-action-button-edge-to-hold-icon-large:6px; --spectrum-action-button-edge-to-hold-icon-extra-large:7px; - --spectrum-tooltip-tip-width:10px; - --spectrum-tooltip-tip-height:5px; + --spectrum-tooltip-tip-width:12px; + --spectrum-tooltip-tip-height:6px; --spectrum-tooltip-maximum-width:200px; --spectrum-progress-circle-size-small:20px; --spectrum-progress-circle-size-medium:40px; @@ -1763,11 +1579,11 @@ --spectrum-progress-circle-thickness-small:3px; --spectrum-progress-circle-thickness-medium:4px; --spectrum-progress-circle-thickness-large:5px; - --spectrum-toast-height:56px; + --spectrum-toast-height:60px; --spectrum-toast-maximum-width:420px; - --spectrum-toast-top-to-workflow-icon:17px; - --spectrum-toast-top-to-text:16px; - --spectrum-toast-bottom-to-text:19px; + --spectrum-toast-top-to-workflow-icon:20px; + --spectrum-toast-top-to-text:20px; + --spectrum-toast-bottom-to-text:22px; --spectrum-action-bar-height:56px; --spectrum-action-bar-top-to-item-counter:16px; --spectrum-swatch-size-extra-small:20px; @@ -1800,6 +1616,22 @@ --spectrum-menu-item-top-to-selected-icon-medium:13px; --spectrum-menu-item-top-to-selected-icon-large:17px; --spectrum-menu-item-top-to-selected-icon-extra-large:22px; + --spectrum-slider-control-height-small:18px; + --spectrum-slider-control-height-medium:20px; + --spectrum-slider-control-height-large:22px; + --spectrum-slider-control-height-extra-large:26px; + --spectrum-slider-handle-size-small:18px; + --spectrum-slider-handle-size-medium:20px; + --spectrum-slider-handle-size-large:22px; + --spectrum-slider-handle-size-extra-large:26px; + --spectrum-slider-handle-border-width-down-small:7px; + --spectrum-slider-handle-border-width-down-medium:8px; + --spectrum-slider-handle-border-width-down-large:9px; + --spectrum-slider-handle-border-width-down-extra-large:11px; + --spectrum-slider-bottom-to-handle-small:6px; + --spectrum-slider-bottom-to-handle-medium:10px; + --spectrum-slider-bottom-to-handle-large:14px; + --spectrum-slider-bottom-to-handle-extra-large:17px; --spectrum-slider-control-to-field-label-small:6px; --spectrum-slider-control-to-field-label-medium:10px; --spectrum-slider-control-to-field-label-large:14px; @@ -1828,7 +1660,8 @@ --spectrum-thumbnail-size-1000:70px; --spectrum-alert-dialog-title-size:var(--spectrum-heading-size-xs); --spectrum-alert-dialog-description-size:var(--spectrum-body-size-xs); - --spectrum-opacity-checkerboard-square-size:10px; + --spectrum-opacity-checkerboard-square-size:var(--spectrum-opacity-checkerboard-square-size-medium); + --spectrum-opacity-checkerboard-square-size-medium:10px; --spectrum-contextual-help-title-size:var(--spectrum-heading-size-xxs); --spectrum-contextual-help-body-size:var(--spectrum-body-size-xs); --spectrum-breadcrumbs-height-multiline:84px; @@ -2024,14 +1857,77 @@ --spectrum-side-navigation-with-icon-third-level-edge-to-text:77px; --spectrum-side-navigation-item-to-item:5px; --spectrum-side-navigation-item-to-header:30px; - --spectrum-side-navigation-header-to-item:10px; --spectrum-side-navigation-bottom-to-text:10px; --spectrum-tray-top-to-content-area:5px; - --spectrum-text-to-visual-50:8px; - --spectrum-text-to-visual-75:9px; - --spectrum-text-to-visual-100:10px; - --spectrum-text-to-visual-200:11px; - --spectrum-text-to-visual-300:13px; + --spectrum-arrow-icon-size-75:12px; + --spectrum-arrow-icon-size-100:14px; + --spectrum-arrow-icon-size-200:16px; + --spectrum-arrow-icon-size-300:16px; + --spectrum-arrow-icon-size-400:18px; + --spectrum-arrow-icon-size-500:22px; + --spectrum-arrow-icon-size-600:24px; + --spectrum-asterisk-icon-size-100:10px; + --spectrum-asterisk-icon-size-200:12px; + --spectrum-asterisk-icon-size-300:12px; + --spectrum-checkmark-icon-size-50:12px; + --spectrum-checkmark-icon-size-75:12px; + --spectrum-checkmark-icon-size-100:14px; + --spectrum-checkmark-icon-size-200:14px; + --spectrum-checkmark-icon-size-300:16px; + --spectrum-checkmark-icon-size-400:18px; + --spectrum-checkmark-icon-size-500:20px; + --spectrum-checkmark-icon-size-600:24px; + --spectrum-chevron-icon-size-50:8px; + --spectrum-chevron-icon-size-75:12px; + --spectrum-chevron-icon-size-100:14px; + --spectrum-chevron-icon-size-200:14px; + --spectrum-chevron-icon-size-300:16px; + --spectrum-chevron-icon-size-400:18px; + --spectrum-chevron-icon-size-500:20px; + --spectrum-chevron-icon-size-600:24px; + --spectrum-cross-icon-size-75:10px; + --spectrum-cross-icon-size-100:10px; + --spectrum-cross-icon-size-200:12px; + --spectrum-cross-icon-size-300:14px; + --spectrum-cross-icon-size-400:16px; + --spectrum-cross-icon-size-500:16px; + --spectrum-cross-icon-size-600:18px; + --spectrum-dash-icon-size-50:10px; + --spectrum-dash-icon-size-75:10px; + --spectrum-dash-icon-size-100:12px; + --spectrum-dash-icon-size-200:14px; + --spectrum-dash-icon-size-300:16px; + --spectrum-dash-icon-size-400:18px; + --spectrum-dash-icon-size-500:20px; + --spectrum-dash-icon-size-600:22px; + --spectrum-side-navigation-header-to-item:10px; + --spectrum-switch-handle-size-small:10px; + --spectrum-switch-handle-selected-size-small:12px; + --spectrum-switch-handle-selected-size-medium:14px; + --spectrum-switch-handle-selected-size-large:16px; + --spectrum-switch-handle-selected-size-extra-large:20px; + --spectrum-switch-handle-size-medium:12px; + --spectrum-switch-handle-size-large:14px; + --spectrum-switch-handle-size-extra-large:18px; + --spectrum-tag-label-to-clear-icon-small:10px; + --spectrum-tag-label-to-clear-icon-medium:15px; + --spectrum-tag-label-to-clear-icon-large:19px; + --spectrum-tag-edge-to-clear-icon-small:10px; + --spectrum-tag-edge-to-clear-icon-medium:15px; + --spectrum-tag-edge-to-clear-icon-large:19px; + --spectrum-opacity-checkerboard-square-size-small:5px; + --spectrum-drop-shadow-y:2px; + --spectrum-drop-shadow-blur:6px; + --spectrum-workflow-icon-size-50:16px; + --spectrum-workflow-icon-size-75:18px; + --spectrum-workflow-icon-size-100:24px; + --spectrum-workflow-icon-size-200:28px; + --spectrum-workflow-icon-size-300:30px; + --spectrum-text-to-visual-50:7px; + --spectrum-text-to-visual-75:7px; + --spectrum-text-to-visual-100:8px; + --spectrum-text-to-visual-200:9px; + --spectrum-text-to-visual-300:10px; --spectrum-text-to-control-75:11px; --spectrum-text-to-control-100:13px; --spectrum-text-to-control-200:14px; @@ -2060,21 +1956,21 @@ --spectrum-component-edge-to-visual-100:12px; --spectrum-component-edge-to-visual-200:16px; --spectrum-component-edge-to-visual-300:19px; - --spectrum-component-edge-to-visual-only-50:4px; - --spectrum-component-edge-to-visual-only-75:5px; - --spectrum-component-edge-to-visual-only-100:9px; - --spectrum-component-edge-to-visual-only-200:13px; - --spectrum-component-edge-to-visual-only-300:16px; + --spectrum-component-edge-to-visual-only-50:5px; + --spectrum-component-edge-to-visual-only-75:6px; + --spectrum-component-edge-to-visual-only-100:8px; + --spectrum-component-edge-to-visual-only-200:11px; + --spectrum-component-edge-to-visual-only-300:15px; --spectrum-component-edge-to-text-50:10px; --spectrum-component-edge-to-text-75:11px; --spectrum-component-edge-to-text-100:15px; --spectrum-component-edge-to-text-200:19px; --spectrum-component-edge-to-text-300:22px; - --spectrum-component-top-to-workflow-icon-50:4px; - --spectrum-component-top-to-workflow-icon-75:5px; - --spectrum-component-top-to-workflow-icon-100:9px; - --spectrum-component-top-to-workflow-icon-200:13px; - --spectrum-component-top-to-workflow-icon-300:16px; + --spectrum-component-top-to-workflow-icon-50:5px; + --spectrum-component-top-to-workflow-icon-75:6px; + --spectrum-component-top-to-workflow-icon-100:8px; + --spectrum-component-top-to-workflow-icon-200:11px; + --spectrum-component-top-to-workflow-icon-300:15px; --spectrum-component-top-to-text-50:4px; --spectrum-component-top-to-text-75:5px; --spectrum-component-top-to-text-100:8px; @@ -2129,16 +2025,13 @@ --spectrum-field-text-to-validation-icon-medium:15px; --spectrum-field-text-to-validation-icon-large:19px; --spectrum-field-text-to-validation-icon-extra-large:22px; - --spectrum-field-width:240px; + --spectrum-field-width:var(--spectrum-field-width-small); + --spectrum-field-width-small:240px; --spectrum-character-count-to-field-quiet-small:-4px; --spectrum-character-count-to-field-quiet-medium:-4px; --spectrum-character-count-to-field-quiet-large:-4px; --spectrum-character-count-to-field-quiet-extra-large:-5px; --spectrum-side-label-character-count-to-field:15px; - --spectrum-side-label-character-count-top-margin-small:5px; - --spectrum-side-label-character-count-top-margin-medium:10px; - --spectrum-side-label-character-count-top-margin-large:14px; - --spectrum-side-label-character-count-top-margin-extra-large:18px; --spectrum-disclosure-indicator-top-to-disclosure-icon-small:9px; --spectrum-disclosure-indicator-top-to-disclosure-icon-medium:13px; --spectrum-disclosure-indicator-top-to-disclosure-icon-large:17px; @@ -2148,6 +2041,13 @@ --spectrum-navigational-indicator-top-to-back-icon-large:16px; --spectrum-navigational-indicator-top-to-back-icon-extra-large:19px; --spectrum-color-control-track-width:30px; + --spectrum-corner-triangle-icon-size-75:6px; + --spectrum-corner-triangle-icon-size-100:7px; + --spectrum-corner-triangle-icon-size-200:8px; + --spectrum-corner-triangle-icon-size-300:8px; + --spectrum-field-width-medium:256px; + --spectrum-field-width-large:272px; + --spectrum-field-width-extra-large:288px; --spectrum-font-size-50:13px; --spectrum-font-size-75:15px; --spectrum-font-size-100:17px; @@ -2269,86 +2169,32 @@ --spectrum-ui-icon-medium-display:none; --spectrum-ui-icon-large-display:block; - --spectrum-checkbox-control-size-small:16px; - --spectrum-checkbox-control-size-medium:18px; - --spectrum-checkbox-control-size-large:20px; - --spectrum-checkbox-control-size-extra-large:22px; - --spectrum-checkbox-top-to-control-small:7px; - --spectrum-checkbox-top-to-control-medium:11px; - --spectrum-checkbox-top-to-control-large:15px; - --spectrum-checkbox-top-to-control-extra-large:19px; - --spectrum-switch-control-width-small:32px; - --spectrum-switch-control-width-medium:36px; - --spectrum-switch-control-width-large:41px; - --spectrum-switch-control-width-extra-large:46px; - --spectrum-switch-control-height-small:16px; - --spectrum-switch-control-height-medium:18px; - --spectrum-switch-control-height-large:20px; - --spectrum-switch-control-height-extra-large:22px; - --spectrum-switch-top-to-control-small:7px; - --spectrum-switch-top-to-control-medium:11px; - --spectrum-switch-top-to-control-large:15px; - --spectrum-switch-top-to-control-extra-large:19px; - --spectrum-radio-button-control-size-small:16px; - --spectrum-radio-button-control-size-medium:18px; - --spectrum-radio-button-control-size-large:20px; - --spectrum-radio-button-control-size-extra-large:22px; - --spectrum-radio-button-top-to-control-small:7px; - --spectrum-radio-button-top-to-control-medium:11px; - --spectrum-radio-button-top-to-control-large:15px; - --spectrum-radio-button-top-to-control-extra-large:19px; - --spectrum-slider-control-height-small:18px; - --spectrum-slider-control-height-medium:20px; - --spectrum-slider-control-height-large:22px; - --spectrum-slider-control-height-extra-large:26px; - --spectrum-slider-handle-size-small:18px; - --spectrum-slider-handle-size-medium:20px; - --spectrum-slider-handle-size-large:22px; - --spectrum-slider-handle-size-extra-large:26px; - --spectrum-slider-handle-border-width-down-small:7px; - --spectrum-slider-handle-border-width-down-medium:8px; - --spectrum-slider-handle-border-width-down-large:9px; - --spectrum-slider-handle-border-width-down-extra-large:11px; - --spectrum-slider-bottom-to-handle-small:6px; - --spectrum-slider-bottom-to-handle-medium:10px; - --spectrum-slider-bottom-to-handle-large:14px; - --spectrum-slider-bottom-to-handle-extra-large:17px; - --spectrum-corner-radius-100:5px; - --spectrum-corner-radius-200:10px; - --spectrum-drop-shadow-y:2px; - --spectrum-drop-shadow-blur:6px; } .spectrum--light, .spectrum--lightest{ --spectrum-overlay-opacity:0.4; --spectrum-drop-shadow-color-rgb:0, 0, 0; --spectrum-drop-shadow-color-opacity:0.15; --spectrum-drop-shadow-color:rgba(var(--spectrum-drop-shadow-color-rgb), var(--spectrum-drop-shadow-color-opacity)); - --spectrum-background-base-color:var(--spectrum-gray-200); - --spectrum-background-layer-1-color:var(--spectrum-gray-100); - --spectrum-background-layer-2-color:var(--spectrum-gray-50); - --spectrum-neutral-background-color-default:var(--spectrum-gray-800); - --spectrum-neutral-background-color-hover:var(--spectrum-gray-900); - --spectrum-neutral-background-color-down:var(--spectrum-gray-900); - --spectrum-neutral-background-color-key-focus:var(--spectrum-gray-900); - --spectrum-neutral-subdued-background-color-default:var(--spectrum-gray-600); - --spectrum-neutral-subdued-background-color-hover:var(--spectrum-gray-700); + --spectrum-background-layer-2-color:var(--spectrum-gray-25); + --spectrum-neutral-subdued-background-color-default:var(--spectrum-gray-700); + --spectrum-neutral-subdued-background-color-hover:var(--spectrum-gray-800); --spectrum-neutral-subdued-background-color-down:var(--spectrum-gray-800); - --spectrum-neutral-subdued-background-color-key-focus:var(--spectrum-gray-700); + --spectrum-neutral-subdued-background-color-key-focus:var(--spectrum-gray-800); --spectrum-accent-background-color-default:var(--spectrum-accent-color-900); --spectrum-accent-background-color-hover:var(--spectrum-accent-color-1000); - --spectrum-accent-background-color-down:var(--spectrum-accent-color-1100); + --spectrum-accent-background-color-down:var(--spectrum-accent-color-1000); --spectrum-accent-background-color-key-focus:var(--spectrum-accent-color-1000); --spectrum-informative-background-color-default:var(--spectrum-informative-color-900); --spectrum-informative-background-color-hover:var(--spectrum-informative-color-1000); - --spectrum-informative-background-color-down:var(--spectrum-informative-color-1100); + --spectrum-informative-background-color-down:var(--spectrum-informative-color-1000); --spectrum-informative-background-color-key-focus:var(--spectrum-informative-color-1000); --spectrum-negative-background-color-default:var(--spectrum-negative-color-900); --spectrum-negative-background-color-hover:var(--spectrum-negative-color-1000); - --spectrum-negative-background-color-down:var(--spectrum-negative-color-1100); + --spectrum-negative-background-color-down:var(--spectrum-negative-color-1000); --spectrum-negative-background-color-key-focus:var(--spectrum-negative-color-1000); --spectrum-positive-background-color-default:var(--spectrum-positive-color-900); --spectrum-positive-background-color-hover:var(--spectrum-positive-color-1000); - --spectrum-positive-background-color-down:var(--spectrum-positive-color-1100); + --spectrum-positive-background-color-down:var(--spectrum-positive-color-1000); --spectrum-positive-background-color-key-focus:var(--spectrum-positive-color-1000); --spectrum-notice-background-color-default:var(--spectrum-notice-color-600); --spectrum-gray-background-color-default:var(--spectrum-gray-700); @@ -2385,393 +2231,621 @@ --spectrum-purple-visual-color:var(--spectrum-purple-800); --spectrum-fuchsia-visual-color:var(--spectrum-fuchsia-800); --spectrum-magenta-visual-color:var(--spectrum-magenta-800); + --spectrum-background-elevated-color:var(--spectrum-gray-25); + --spectrum-background-pasteboard-color:var(--spectrum-gray-100); + --spectrum-brown-visual-color:var(--spectrum-brown-800); + --spectrum-cinnamon-visual-color:var(--spectrum-cinnamon-800); + --spectrum-pink-visual-color:var(--spectrum-pink-800); + --spectrum-silver-visual-color:var(--spectrum-silver-800); + --spectrum-turquoise-visual-color:var(--spectrum-turquoise-800); + --spectrum-brown-background-color-default:var(--spectrum-brown-900); + --spectrum-cinnamon-background-color-default:var(--spectrum-cinnamon-900); + --spectrum-pink-background-color-default:var(--spectrum-pink-900); + --spectrum-silver-background-color-default:var(--spectrum-silver-900); + --spectrum-turquoise-background-color-default:var(--spectrum-turquoise-900); --spectrum-opacity-checkerboard-square-dark:var(--spectrum-gray-200); - --spectrum-gray-50-rgb:255, 255, 255; + --spectrum-gray-25-rgb:255, 255, 255; + --spectrum-gray-25:rgba(var(--spectrum-gray-25-rgb)); + --spectrum-gray-50-rgb:248, 248, 248; --spectrum-gray-50:rgba(var(--spectrum-gray-50-rgb)); - --spectrum-gray-75-rgb:253, 253, 253; + --spectrum-gray-75-rgb:243, 243, 243; --spectrum-gray-75:rgba(var(--spectrum-gray-75-rgb)); - --spectrum-gray-100-rgb:248, 248, 248; + --spectrum-gray-100-rgb:233, 233, 233; --spectrum-gray-100:rgba(var(--spectrum-gray-100-rgb)); - --spectrum-gray-200-rgb:230, 230, 230; + --spectrum-gray-200-rgb:225, 225, 225; --spectrum-gray-200:rgba(var(--spectrum-gray-200-rgb)); - --spectrum-gray-300-rgb:213, 213, 213; + --spectrum-gray-300-rgb:218, 218, 218; --spectrum-gray-300:rgba(var(--spectrum-gray-300-rgb)); - --spectrum-gray-400-rgb:177, 177, 177; + --spectrum-gray-400-rgb:198, 198, 198; --spectrum-gray-400:rgba(var(--spectrum-gray-400-rgb)); - --spectrum-gray-500-rgb:144, 144, 144; + --spectrum-gray-500-rgb:143, 143, 143; --spectrum-gray-500:rgba(var(--spectrum-gray-500-rgb)); - --spectrum-gray-600-rgb:109, 109, 109; + --spectrum-gray-600-rgb:113, 113, 113; --spectrum-gray-600:rgba(var(--spectrum-gray-600-rgb)); - --spectrum-gray-700-rgb:70, 70, 70; + --spectrum-gray-700-rgb:80, 80, 80; --spectrum-gray-700:rgba(var(--spectrum-gray-700-rgb)); - --spectrum-gray-800-rgb:34, 34, 34; + --spectrum-gray-800-rgb:41, 41, 41; --spectrum-gray-800:rgba(var(--spectrum-gray-800-rgb)); - --spectrum-gray-900-rgb:0, 0, 0; + --spectrum-gray-900-rgb:19, 19, 19; --spectrum-gray-900:rgba(var(--spectrum-gray-900-rgb)); - --spectrum-blue-100-rgb:224, 242, 255; + --spectrum-gray-1000-rgb:0, 0, 0; + --spectrum-gray-1000:rgba(var(--spectrum-gray-1000-rgb)); + --spectrum-blue-100-rgb:245, 249, 255; --spectrum-blue-100:rgba(var(--spectrum-blue-100-rgb)); - --spectrum-blue-200-rgb:202, 232, 255; + --spectrum-blue-200-rgb:229, 240, 254; --spectrum-blue-200:rgba(var(--spectrum-blue-200-rgb)); - --spectrum-blue-300-rgb:181, 222, 255; + --spectrum-blue-300-rgb:203, 226, 254; --spectrum-blue-300:rgba(var(--spectrum-blue-300-rgb)); - --spectrum-blue-400-rgb:150, 206, 253; + --spectrum-blue-400-rgb:172, 207, 253; --spectrum-blue-400:rgba(var(--spectrum-blue-400-rgb)); - --spectrum-blue-500-rgb:120, 187, 250; + --spectrum-blue-500-rgb:142, 185, 252; --spectrum-blue-500:rgba(var(--spectrum-blue-500-rgb)); - --spectrum-blue-600-rgb:89, 167, 246; + --spectrum-blue-600-rgb:114, 158, 253; --spectrum-blue-600:rgba(var(--spectrum-blue-600-rgb)); - --spectrum-blue-700-rgb:56, 146, 243; + --spectrum-blue-700-rgb:93, 137, 255; --spectrum-blue-700:rgba(var(--spectrum-blue-700-rgb)); - --spectrum-blue-800-rgb:20, 122, 243; + --spectrum-blue-800-rgb:75, 117, 255; --spectrum-blue-800:rgba(var(--spectrum-blue-800-rgb)); - --spectrum-blue-900-rgb:2, 101, 220; + --spectrum-blue-900-rgb:59, 99, 251; --spectrum-blue-900:rgba(var(--spectrum-blue-900-rgb)); - --spectrum-blue-1000-rgb:0, 84, 182; + --spectrum-blue-1000-rgb:39, 77, 234; --spectrum-blue-1000:rgba(var(--spectrum-blue-1000-rgb)); - --spectrum-blue-1100-rgb:0, 68, 145; + --spectrum-blue-1100-rgb:29, 62, 207; --spectrum-blue-1100:rgba(var(--spectrum-blue-1100-rgb)); - --spectrum-blue-1200-rgb:0, 53, 113; + --spectrum-blue-1200-rgb:21, 50, 173; --spectrum-blue-1200:rgba(var(--spectrum-blue-1200-rgb)); - --spectrum-blue-1300-rgb:0, 39, 84; + --spectrum-blue-1300-rgb:16, 40, 140; --spectrum-blue-1300:rgba(var(--spectrum-blue-1300-rgb)); - --spectrum-blue-1400-rgb:0, 28, 60; + --spectrum-blue-1400-rgb:12, 31, 105; --spectrum-blue-1400:rgba(var(--spectrum-blue-1400-rgb)); - --spectrum-red-100-rgb:255, 235, 231; + --spectrum-blue-1500-rgb:14, 24, 67; + --spectrum-blue-1500:rgba(var(--spectrum-blue-1500-rgb)); + --spectrum-blue-1600-rgb:7, 11, 30; + --spectrum-blue-1600:rgba(var(--spectrum-blue-1600-rgb)); + --spectrum-red-100-rgb:255, 246, 245; --spectrum-red-100:rgba(var(--spectrum-red-100-rgb)); - --spectrum-red-200-rgb:255, 221, 214; + --spectrum-red-200-rgb:255, 235, 232; --spectrum-red-200:rgba(var(--spectrum-red-200-rgb)); - --spectrum-red-300-rgb:255, 205, 195; + --spectrum-red-300-rgb:255, 214, 209; --spectrum-red-300:rgba(var(--spectrum-red-300-rgb)); - --spectrum-red-400-rgb:255, 183, 169; + --spectrum-red-400-rgb:255, 188, 180; --spectrum-red-400:rgba(var(--spectrum-red-400-rgb)); - --spectrum-red-500-rgb:255, 155, 136; + --spectrum-red-500-rgb:255, 157, 145; --spectrum-red-500:rgba(var(--spectrum-red-500-rgb)); - --spectrum-red-600-rgb:255, 124, 101; + --spectrum-red-600-rgb:255, 118, 101; --spectrum-red-600:rgba(var(--spectrum-red-600-rgb)); - --spectrum-red-700-rgb:247, 92, 70; + --spectrum-red-700-rgb:255, 81, 61; --spectrum-red-700:rgba(var(--spectrum-red-700-rgb)); - --spectrum-red-800-rgb:234, 56, 41; + --spectrum-red-800-rgb:240, 56, 35; --spectrum-red-800:rgba(var(--spectrum-red-800-rgb)); - --spectrum-red-900-rgb:211, 21, 16; + --spectrum-red-900-rgb:215, 50, 32; --spectrum-red-900:rgba(var(--spectrum-red-900-rgb)); - --spectrum-red-1000-rgb:180, 0, 0; + --spectrum-red-1000-rgb:183, 40, 24; --spectrum-red-1000:rgba(var(--spectrum-red-1000-rgb)); - --spectrum-red-1100-rgb:147, 0, 0; + --spectrum-red-1100-rgb:156, 33, 19; --spectrum-red-1100:rgba(var(--spectrum-red-1100-rgb)); - --spectrum-red-1200-rgb:116, 0, 0; + --spectrum-red-1200-rgb:129, 27, 14; --spectrum-red-1200:rgba(var(--spectrum-red-1200-rgb)); - --spectrum-red-1300-rgb:89, 0, 0; + --spectrum-red-1300-rgb:104, 21, 10; --spectrum-red-1300:rgba(var(--spectrum-red-1300-rgb)); - --spectrum-red-1400-rgb:67, 0, 0; + --spectrum-red-1400-rgb:80, 16, 6; --spectrum-red-1400:rgba(var(--spectrum-red-1400-rgb)); - --spectrum-orange-100-rgb:255, 236, 204; + --spectrum-red-1500-rgb:59, 11, 4; + --spectrum-red-1500:rgba(var(--spectrum-red-1500-rgb)); + --spectrum-red-1600-rgb:29, 5, 2; + --spectrum-red-1600:rgba(var(--spectrum-red-1600-rgb)); + --spectrum-orange-100-rgb:255, 246, 231; --spectrum-orange-100:rgba(var(--spectrum-orange-100-rgb)); - --spectrum-orange-200-rgb:255, 223, 173; + --spectrum-orange-200-rgb:255, 236, 207; --spectrum-orange-200:rgba(var(--spectrum-orange-200-rgb)); - --spectrum-orange-300-rgb:253, 210, 145; + --spectrum-orange-300-rgb:255, 218, 158; --spectrum-orange-300:rgba(var(--spectrum-orange-300-rgb)); - --spectrum-orange-400-rgb:255, 187, 99; + --spectrum-orange-400-rgb:255, 193, 94; --spectrum-orange-400:rgba(var(--spectrum-orange-400-rgb)); - --spectrum-orange-500-rgb:255, 160, 55; + --spectrum-orange-500-rgb:255, 162, 19; --spectrum-orange-500:rgba(var(--spectrum-orange-500-rgb)); - --spectrum-orange-600-rgb:246, 133, 17; + --spectrum-orange-600-rgb:252, 125, 0; --spectrum-orange-600:rgba(var(--spectrum-orange-600-rgb)); - --spectrum-orange-700-rgb:228, 111, 0; + --spectrum-orange-700-rgb:232, 106, 0; --spectrum-orange-700:rgba(var(--spectrum-orange-700-rgb)); - --spectrum-orange-800-rgb:203, 93, 0; + --spectrum-orange-800-rgb:212, 91, 0; --spectrum-orange-800:rgba(var(--spectrum-orange-800-rgb)); - --spectrum-orange-900-rgb:177, 76, 0; + --spectrum-orange-900-rgb:194, 78, 0; --spectrum-orange-900:rgba(var(--spectrum-orange-900-rgb)); - --spectrum-orange-1000-rgb:149, 61, 0; + --spectrum-orange-1000-rgb:167, 62, 0; --spectrum-orange-1000:rgba(var(--spectrum-orange-1000-rgb)); - --spectrum-orange-1100-rgb:122, 47, 0; + --spectrum-orange-1100-rgb:144, 51, 0; --spectrum-orange-1100:rgba(var(--spectrum-orange-1100-rgb)); - --spectrum-orange-1200-rgb:97, 35, 0; + --spectrum-orange-1200-rgb:118, 41, 0; --spectrum-orange-1200:rgba(var(--spectrum-orange-1200-rgb)); - --spectrum-orange-1300-rgb:73, 25, 1; + --spectrum-orange-1300-rgb:95, 32, 0; --spectrum-orange-1300:rgba(var(--spectrum-orange-1300-rgb)); - --spectrum-orange-1400-rgb:53, 18, 1; + --spectrum-orange-1400-rgb:73, 24, 0; --spectrum-orange-1400:rgba(var(--spectrum-orange-1400-rgb)); - --spectrum-yellow-100-rgb:251, 241, 152; + --spectrum-orange-1500-rgb:52, 18, 0; + --spectrum-orange-1500:rgba(var(--spectrum-orange-1500-rgb)); + --spectrum-orange-1600-rgb:25, 8, 0; + --spectrum-orange-1600:rgba(var(--spectrum-orange-1600-rgb)); + --spectrum-yellow-100-rgb:255, 248, 204; --spectrum-yellow-100:rgba(var(--spectrum-yellow-100-rgb)); - --spectrum-yellow-200-rgb:248, 231, 80; + --spectrum-yellow-200-rgb:255, 241, 151; --spectrum-yellow-200:rgba(var(--spectrum-yellow-200-rgb)); - --spectrum-yellow-300-rgb:248, 217, 4; + --spectrum-yellow-300-rgb:255, 222, 44; --spectrum-yellow-300:rgba(var(--spectrum-yellow-300-rgb)); - --spectrum-yellow-400-rgb:232, 198, 0; + --spectrum-yellow-400-rgb:245, 199, 0; --spectrum-yellow-400:rgba(var(--spectrum-yellow-400-rgb)); - --spectrum-yellow-500-rgb:215, 179, 0; + --spectrum-yellow-500-rgb:230, 175, 0; --spectrum-yellow-500:rgba(var(--spectrum-yellow-500-rgb)); - --spectrum-yellow-600-rgb:196, 159, 0; + --spectrum-yellow-600-rgb:210, 149, 0; --spectrum-yellow-600:rgba(var(--spectrum-yellow-600-rgb)); - --spectrum-yellow-700-rgb:176, 140, 0; + --spectrum-yellow-700-rgb:193, 131, 0; --spectrum-yellow-700:rgba(var(--spectrum-yellow-700-rgb)); - --spectrum-yellow-800-rgb:155, 120, 0; + --spectrum-yellow-800-rgb:175, 116, 0; --spectrum-yellow-800:rgba(var(--spectrum-yellow-800-rgb)); - --spectrum-yellow-900-rgb:133, 102, 0; + --spectrum-yellow-900-rgb:158, 102, 0; --spectrum-yellow-900:rgba(var(--spectrum-yellow-900-rgb)); - --spectrum-yellow-1000-rgb:112, 83, 0; + --spectrum-yellow-1000-rgb:134, 85, 0; --spectrum-yellow-1000:rgba(var(--spectrum-yellow-1000-rgb)); - --spectrum-yellow-1100-rgb:91, 67, 0; + --spectrum-yellow-1100-rgb:114, 72, 0; --spectrum-yellow-1100:rgba(var(--spectrum-yellow-1100-rgb)); - --spectrum-yellow-1200-rgb:72, 51, 0; + --spectrum-yellow-1200-rgb:93, 59, 0; --spectrum-yellow-1200:rgba(var(--spectrum-yellow-1200-rgb)); - --spectrum-yellow-1300-rgb:54, 37, 0; + --spectrum-yellow-1300-rgb:75, 47, 0; --spectrum-yellow-1300:rgba(var(--spectrum-yellow-1300-rgb)); - --spectrum-yellow-1400-rgb:40, 26, 0; + --spectrum-yellow-1400-rgb:56, 35, 0; --spectrum-yellow-1400:rgba(var(--spectrum-yellow-1400-rgb)); - --spectrum-chartreuse-100-rgb:219, 252, 110; + --spectrum-yellow-1500-rgb:40, 25, 0; + --spectrum-yellow-1500:rgba(var(--spectrum-yellow-1500-rgb)); + --spectrum-yellow-1600-rgb:18, 11, 0; + --spectrum-yellow-1600:rgba(var(--spectrum-yellow-1600-rgb)); + --spectrum-chartreuse-100-rgb:246, 251, 222; --spectrum-chartreuse-100:rgba(var(--spectrum-chartreuse-100-rgb)); - --spectrum-chartreuse-200-rgb:203, 244, 67; + --spectrum-chartreuse-200-rgb:234, 246, 173; --spectrum-chartreuse-200:rgba(var(--spectrum-chartreuse-200-rgb)); - --spectrum-chartreuse-300-rgb:188, 233, 42; + --spectrum-chartreuse-300-rgb:208, 236, 70; --spectrum-chartreuse-300:rgba(var(--spectrum-chartreuse-300-rgb)); - --spectrum-chartreuse-400-rgb:170, 216, 22; + --spectrum-chartreuse-400-rgb:182, 219, 0; --spectrum-chartreuse-400:rgba(var(--spectrum-chartreuse-400-rgb)); - --spectrum-chartreuse-500-rgb:152, 197, 10; + --spectrum-chartreuse-500-rgb:163, 196, 0; --spectrum-chartreuse-500:rgba(var(--spectrum-chartreuse-500-rgb)); - --spectrum-chartreuse-600-rgb:135, 177, 3; + --spectrum-chartreuse-600-rgb:143, 172, 0; --spectrum-chartreuse-600:rgba(var(--spectrum-chartreuse-600-rgb)); - --spectrum-chartreuse-700-rgb:118, 156, 0; + --spectrum-chartreuse-700-rgb:128, 153, 0; --spectrum-chartreuse-700:rgba(var(--spectrum-chartreuse-700-rgb)); - --spectrum-chartreuse-800-rgb:103, 136, 0; + --spectrum-chartreuse-800-rgb:114, 137, 0; --spectrum-chartreuse-800:rgba(var(--spectrum-chartreuse-800-rgb)); - --spectrum-chartreuse-900-rgb:87, 116, 0; + --spectrum-chartreuse-900-rgb:102, 122, 0; --spectrum-chartreuse-900:rgba(var(--spectrum-chartreuse-900-rgb)); - --spectrum-chartreuse-1000-rgb:72, 96, 0; + --spectrum-chartreuse-1000-rgb:86, 103, 0; --spectrum-chartreuse-1000:rgba(var(--spectrum-chartreuse-1000-rgb)); - --spectrum-chartreuse-1100-rgb:58, 77, 0; + --spectrum-chartreuse-1100-rgb:73, 87, 0; --spectrum-chartreuse-1100:rgba(var(--spectrum-chartreuse-1100-rgb)); - --spectrum-chartreuse-1200-rgb:44, 59, 0; + --spectrum-chartreuse-1200-rgb:60, 71, 0; --spectrum-chartreuse-1200:rgba(var(--spectrum-chartreuse-1200-rgb)); - --spectrum-chartreuse-1300-rgb:33, 44, 0; + --spectrum-chartreuse-1300-rgb:47, 57, 0; --spectrum-chartreuse-1300:rgba(var(--spectrum-chartreuse-1300-rgb)); - --spectrum-chartreuse-1400-rgb:24, 31, 0; + --spectrum-chartreuse-1400-rgb:35, 43, 0; --spectrum-chartreuse-1400:rgba(var(--spectrum-chartreuse-1400-rgb)); - --spectrum-celery-100-rgb:205, 252, 191; + --spectrum-chartreuse-1500-rgb:25, 30, 0; + --spectrum-chartreuse-1500:rgba(var(--spectrum-chartreuse-1500-rgb)); + --spectrum-chartreuse-1600-rgb:11, 14, 0; + --spectrum-chartreuse-1600:rgba(var(--spectrum-chartreuse-1600-rgb)); + --spectrum-celery-100-rgb:235, 255, 220; --spectrum-celery-100:rgba(var(--spectrum-celery-100-rgb)); - --spectrum-celery-200-rgb:174, 246, 157; + --spectrum-celery-200-rgb:197, 255, 156; --spectrum-celery-200:rgba(var(--spectrum-celery-200-rgb)); - --spectrum-celery-300-rgb:150, 238, 133; + --spectrum-celery-300-rgb:157, 247, 92; --spectrum-celery-300:rgba(var(--spectrum-celery-300-rgb)); - --spectrum-celery-400-rgb:114, 224, 106; + --spectrum-celery-400-rgb:129, 228, 58; --spectrum-celery-400:rgba(var(--spectrum-celery-400-rgb)); - --spectrum-celery-500-rgb:78, 207, 80; + --spectrum-celery-500-rgb:110, 206, 42; --spectrum-celery-500:rgba(var(--spectrum-celery-500-rgb)); - --spectrum-celery-600-rgb:39, 187, 54; + --spectrum-celery-600-rgb:93, 180, 31; --spectrum-celery-600:rgba(var(--spectrum-celery-600-rgb)); - --spectrum-celery-700-rgb:7, 167, 33; + --spectrum-celery-700-rgb:82, 161, 25; --spectrum-celery-700:rgba(var(--spectrum-celery-700-rgb)); - --spectrum-celery-800-rgb:0, 145, 18; + --spectrum-celery-800-rgb:72, 144, 20; --spectrum-celery-800:rgba(var(--spectrum-celery-800-rgb)); - --spectrum-celery-900-rgb:0, 124, 15; + --spectrum-celery-900-rgb:64, 129, 17; --spectrum-celery-900:rgba(var(--spectrum-celery-900-rgb)); - --spectrum-celery-1000-rgb:0, 103, 15; + --spectrum-celery-1000-rgb:52, 109, 12; --spectrum-celery-1000:rgba(var(--spectrum-celery-1000-rgb)); - --spectrum-celery-1100-rgb:0, 83, 13; + --spectrum-celery-1100-rgb:44, 92, 9; --spectrum-celery-1100:rgba(var(--spectrum-celery-1100-rgb)); - --spectrum-celery-1200-rgb:0, 64, 10; + --spectrum-celery-1200-rgb:35, 75, 6; --spectrum-celery-1200:rgba(var(--spectrum-celery-1200-rgb)); - --spectrum-celery-1300-rgb:0, 48, 7; + --spectrum-celery-1300-rgb:27, 60, 3; --spectrum-celery-1300:rgba(var(--spectrum-celery-1300-rgb)); - --spectrum-celery-1400-rgb:0, 34, 5; + --spectrum-celery-1400-rgb:19, 46, 0; --spectrum-celery-1400:rgba(var(--spectrum-celery-1400-rgb)); - --spectrum-green-100-rgb:206, 248, 224; + --spectrum-celery-1500-rgb:12, 33, 0; + --spectrum-celery-1500:rgba(var(--spectrum-celery-1500-rgb)); + --spectrum-celery-1600-rgb:4, 15, 0; + --spectrum-celery-1600:rgba(var(--spectrum-celery-1600-rgb)); + --spectrum-green-100-rgb:237, 252, 241; --spectrum-green-100:rgba(var(--spectrum-green-100-rgb)); - --spectrum-green-200-rgb:173, 244, 206; + --spectrum-green-200-rgb:215, 247, 225; --spectrum-green-200:rgba(var(--spectrum-green-200-rgb)); - --spectrum-green-300-rgb:137, 236, 188; + --spectrum-green-300-rgb:173, 238, 197; --spectrum-green-300:rgba(var(--spectrum-green-300-rgb)); - --spectrum-green-400-rgb:103, 222, 168; + --spectrum-green-400-rgb:107, 227, 162; --spectrum-green-400:rgba(var(--spectrum-green-400-rgb)); - --spectrum-green-500-rgb:73, 204, 147; + --spectrum-green-500-rgb:43, 209, 125; --spectrum-green-500:rgba(var(--spectrum-green-500-rgb)); - --spectrum-green-600-rgb:47, 184, 128; + --spectrum-green-600-rgb:18, 184, 103; --spectrum-green-600:rgba(var(--spectrum-green-600-rgb)); - --spectrum-green-700-rgb:21, 164, 110; + --spectrum-green-700-rgb:11, 164, 93; --spectrum-green-700:rgba(var(--spectrum-green-700-rgb)); - --spectrum-green-800-rgb:0, 143, 93; + --spectrum-green-800-rgb:7, 147, 85; --spectrum-green-800:rgba(var(--spectrum-green-800-rgb)); - --spectrum-green-900-rgb:0, 122, 77; + --spectrum-green-900-rgb:5, 131, 78; --spectrum-green-900:rgba(var(--spectrum-green-900-rgb)); - --spectrum-green-1000-rgb:0, 101, 62; + --spectrum-green-1000-rgb:3, 110, 69; --spectrum-green-1000:rgba(var(--spectrum-green-1000-rgb)); - --spectrum-green-1100-rgb:0, 81, 50; + --spectrum-green-1100-rgb:2, 93, 60; --spectrum-green-1100:rgba(var(--spectrum-green-1100-rgb)); - --spectrum-green-1200-rgb:5, 63, 39; + --spectrum-green-1200-rgb:1, 76, 52; --spectrum-green-1200:rgba(var(--spectrum-green-1200-rgb)); - --spectrum-green-1300-rgb:10, 46, 29; + --spectrum-green-1300-rgb:0, 61, 44; --spectrum-green-1300:rgba(var(--spectrum-green-1300-rgb)); - --spectrum-green-1400-rgb:10, 32, 21; + --spectrum-green-1400-rgb:0, 46, 34; --spectrum-green-1400:rgba(var(--spectrum-green-1400-rgb)); - --spectrum-seafoam-100-rgb:206, 247, 243; + --spectrum-green-1500-rgb:0, 33, 25; + --spectrum-green-1500:rgba(var(--spectrum-green-1500-rgb)); + --spectrum-green-1600-rgb:0, 15, 12; + --spectrum-green-1600:rgba(var(--spectrum-green-1600-rgb)); + --spectrum-seafoam-100-rgb:235, 251, 246; --spectrum-seafoam-100:rgba(var(--spectrum-seafoam-100-rgb)); - --spectrum-seafoam-200-rgb:170, 241, 234; + --spectrum-seafoam-200-rgb:211, 246, 234; --spectrum-seafoam-200:rgba(var(--spectrum-seafoam-200-rgb)); - --spectrum-seafoam-300-rgb:140, 233, 226; + --spectrum-seafoam-300-rgb:169, 237, 216; --spectrum-seafoam-300:rgba(var(--spectrum-seafoam-300-rgb)); - --spectrum-seafoam-400-rgb:101, 218, 210; + --spectrum-seafoam-400-rgb:92, 225, 194; --spectrum-seafoam-400:rgba(var(--spectrum-seafoam-400-rgb)); - --spectrum-seafoam-500-rgb:63, 201, 193; + --spectrum-seafoam-500-rgb:16, 207, 169; --spectrum-seafoam-500:rgba(var(--spectrum-seafoam-500-rgb)); - --spectrum-seafoam-600-rgb:15, 181, 174; + --spectrum-seafoam-600-rgb:13, 181, 149; --spectrum-seafoam-600:rgba(var(--spectrum-seafoam-600-rgb)); - --spectrum-seafoam-700-rgb:0, 161, 154; + --spectrum-seafoam-700-rgb:11, 162, 134; --spectrum-seafoam-700:rgba(var(--spectrum-seafoam-700-rgb)); - --spectrum-seafoam-800-rgb:0, 140, 135; + --spectrum-seafoam-800-rgb:9, 144, 120; --spectrum-seafoam-800:rgba(var(--spectrum-seafoam-800-rgb)); - --spectrum-seafoam-900-rgb:0, 119, 114; + --spectrum-seafoam-900-rgb:7, 129, 109; --spectrum-seafoam-900:rgba(var(--spectrum-seafoam-900-rgb)); - --spectrum-seafoam-1000-rgb:0, 99, 95; + --spectrum-seafoam-1000-rgb:5, 108, 92; --spectrum-seafoam-1000:rgba(var(--spectrum-seafoam-1000-rgb)); - --spectrum-seafoam-1100-rgb:12, 79, 76; + --spectrum-seafoam-1100-rgb:3, 92, 80; --spectrum-seafoam-1100:rgba(var(--spectrum-seafoam-1100-rgb)); - --spectrum-seafoam-1200-rgb:18, 60, 58; + --spectrum-seafoam-1200-rgb:1, 75, 67; --spectrum-seafoam-1200:rgba(var(--spectrum-seafoam-1200-rgb)); - --spectrum-seafoam-1300-rgb:18, 44, 43; + --spectrum-seafoam-1300-rgb:0, 60, 54; --spectrum-seafoam-1300:rgba(var(--spectrum-seafoam-1300-rgb)); - --spectrum-seafoam-1400-rgb:15, 31, 30; + --spectrum-seafoam-1400-rgb:0, 46, 40; --spectrum-seafoam-1400:rgba(var(--spectrum-seafoam-1400-rgb)); - --spectrum-cyan-100-rgb:197, 248, 255; + --spectrum-seafoam-1500-rgb:0, 33, 29; + --spectrum-seafoam-1500:rgba(var(--spectrum-seafoam-1500-rgb)); + --spectrum-seafoam-1600-rgb:0, 15, 14; + --spectrum-seafoam-1600:rgba(var(--spectrum-seafoam-1600-rgb)); + --spectrum-cyan-100-rgb:238, 250, 254; --spectrum-cyan-100:rgba(var(--spectrum-cyan-100-rgb)); - --spectrum-cyan-200-rgb:164, 240, 255; + --spectrum-cyan-200-rgb:217, 244, 253; --spectrum-cyan-200:rgba(var(--spectrum-cyan-200-rgb)); - --spectrum-cyan-300-rgb:136, 231, 250; + --spectrum-cyan-300-rgb:183, 231, 252; --spectrum-cyan-300:rgba(var(--spectrum-cyan-300-rgb)); - --spectrum-cyan-400-rgb:96, 216, 243; + --spectrum-cyan-400-rgb:138, 213, 255; --spectrum-cyan-400:rgba(var(--spectrum-cyan-400-rgb)); - --spectrum-cyan-500-rgb:51, 197, 232; + --spectrum-cyan-500-rgb:92, 192, 255; --spectrum-cyan-500:rgba(var(--spectrum-cyan-500-rgb)); - --spectrum-cyan-600-rgb:18, 176, 218; + --spectrum-cyan-600-rgb:48, 167, 254; --spectrum-cyan-600:rgba(var(--spectrum-cyan-600-rgb)); - --spectrum-cyan-700-rgb:1, 156, 200; + --spectrum-cyan-700-rgb:29, 149, 231; --spectrum-cyan-700:rgba(var(--spectrum-cyan-700-rgb)); - --spectrum-cyan-800-rgb:0, 134, 180; + --spectrum-cyan-800-rgb:18, 134, 205; --spectrum-cyan-800:rgba(var(--spectrum-cyan-800-rgb)); - --spectrum-cyan-900-rgb:0, 113, 159; + --spectrum-cyan-900-rgb:11, 120, 179; --spectrum-cyan-900:rgba(var(--spectrum-cyan-900-rgb)); - --spectrum-cyan-1000-rgb:0, 93, 137; + --spectrum-cyan-1000-rgb:4, 102, 145; --spectrum-cyan-1000:rgba(var(--spectrum-cyan-1000-rgb)); - --spectrum-cyan-1100-rgb:0, 74, 115; + --spectrum-cyan-1100-rgb:0, 87, 121; --spectrum-cyan-1100:rgba(var(--spectrum-cyan-1100-rgb)); - --spectrum-cyan-1200-rgb:0, 57, 93; + --spectrum-cyan-1200-rgb:0, 71, 98; --spectrum-cyan-1200:rgba(var(--spectrum-cyan-1200-rgb)); - --spectrum-cyan-1300-rgb:0, 42, 70; + --spectrum-cyan-1300-rgb:0, 57, 78; --spectrum-cyan-1300:rgba(var(--spectrum-cyan-1300-rgb)); - --spectrum-cyan-1400-rgb:0, 30, 51; + --spectrum-cyan-1400-rgb:0, 43, 59; --spectrum-cyan-1400:rgba(var(--spectrum-cyan-1400-rgb)); - --spectrum-indigo-100-rgb:237, 238, 255; + --spectrum-cyan-1500-rgb:0, 31, 43; + --spectrum-cyan-1500:rgba(var(--spectrum-cyan-1500-rgb)); + --spectrum-cyan-1600-rgb:0, 14, 20; + --spectrum-cyan-1600:rgba(var(--spectrum-cyan-1600-rgb)); + --spectrum-indigo-100-rgb:247, 248, 255; --spectrum-indigo-100:rgba(var(--spectrum-indigo-100-rgb)); - --spectrum-indigo-200-rgb:224, 226, 255; + --spectrum-indigo-200-rgb:235, 238, 255; --spectrum-indigo-200:rgba(var(--spectrum-indigo-200-rgb)); - --spectrum-indigo-300-rgb:211, 213, 255; + --spectrum-indigo-300-rgb:216, 222, 255; --spectrum-indigo-300:rgba(var(--spectrum-indigo-300-rgb)); - --spectrum-indigo-400-rgb:193, 196, 255; + --spectrum-indigo-400-rgb:192, 201, 255; --spectrum-indigo-400:rgba(var(--spectrum-indigo-400-rgb)); - --spectrum-indigo-500-rgb:172, 175, 255; + --spectrum-indigo-500-rgb:167, 178, 255; --spectrum-indigo-500:rgba(var(--spectrum-indigo-500-rgb)); - --spectrum-indigo-600-rgb:149, 153, 255; + --spectrum-indigo-600-rgb:145, 151, 254; --spectrum-indigo-600:rgba(var(--spectrum-indigo-600-rgb)); - --spectrum-indigo-700-rgb:126, 132, 252; + --spectrum-indigo-700-rgb:132, 128, 254; --spectrum-indigo-700:rgba(var(--spectrum-indigo-700-rgb)); - --spectrum-indigo-800-rgb:104, 109, 244; + --spectrum-indigo-800-rgb:122, 106, 253; --spectrum-indigo-800:rgba(var(--spectrum-indigo-800-rgb)); - --spectrum-indigo-900-rgb:82, 88, 228; + --spectrum-indigo-900-rgb:113, 85, 250; --spectrum-indigo-900:rgba(var(--spectrum-indigo-900-rgb)); - --spectrum-indigo-1000-rgb:64, 70, 202; + --spectrum-indigo-1000-rgb:99, 56, 238; --spectrum-indigo-1000:rgba(var(--spectrum-indigo-1000-rgb)); - --spectrum-indigo-1100-rgb:50, 54, 168; + --spectrum-indigo-1100-rgb:84, 36, 219; --spectrum-indigo-1100:rgba(var(--spectrum-indigo-1100-rgb)); - --spectrum-indigo-1200-rgb:38, 41, 134; + --spectrum-indigo-1200-rgb:69, 19, 191; --spectrum-indigo-1200:rgba(var(--spectrum-indigo-1200-rgb)); - --spectrum-indigo-1300-rgb:27, 30, 100; + --spectrum-indigo-1300-rgb:55, 6, 160; --spectrum-indigo-1300:rgba(var(--spectrum-indigo-1300-rgb)); - --spectrum-indigo-1400-rgb:20, 22, 72; + --spectrum-indigo-1400-rgb:42, 0, 129; --spectrum-indigo-1400:rgba(var(--spectrum-indigo-1400-rgb)); - --spectrum-purple-100-rgb:246, 235, 255; + --spectrum-indigo-1500-rgb:31, 0, 98; + --spectrum-indigo-1500:rgba(var(--spectrum-indigo-1500-rgb)); + --spectrum-indigo-1600-rgb:17, 0, 54; + --spectrum-indigo-1600:rgba(var(--spectrum-indigo-1600-rgb)); + --spectrum-purple-100-rgb:251, 247, 254; --spectrum-purple-100:rgba(var(--spectrum-purple-100-rgb)); - --spectrum-purple-200-rgb:238, 221, 255; + --spectrum-purple-200-rgb:244, 235, 252; --spectrum-purple-200:rgba(var(--spectrum-purple-200-rgb)); - --spectrum-purple-300-rgb:230, 208, 255; + --spectrum-purple-300-rgb:235, 218, 249; --spectrum-purple-300:rgba(var(--spectrum-purple-300-rgb)); - --spectrum-purple-400-rgb:219, 187, 254; + --spectrum-purple-400-rgb:221, 193, 246; --spectrum-purple-400:rgba(var(--spectrum-purple-400-rgb)); - --spectrum-purple-500-rgb:204, 164, 253; + --spectrum-purple-500-rgb:208, 167, 243; --spectrum-purple-500:rgba(var(--spectrum-purple-500-rgb)); - --spectrum-purple-600-rgb:189, 139, 252; + --spectrum-purple-600-rgb:191, 138, 238; --spectrum-purple-600:rgba(var(--spectrum-purple-600-rgb)); - --spectrum-purple-700-rgb:174, 114, 249; + --spectrum-purple-700-rgb:178, 114, 235; --spectrum-purple-700:rgba(var(--spectrum-purple-700-rgb)); - --spectrum-purple-800-rgb:157, 87, 244; + --spectrum-purple-800-rgb:166, 92, 231; --spectrum-purple-800:rgba(var(--spectrum-purple-800-rgb)); - --spectrum-purple-900-rgb:137, 61, 231; + --spectrum-purple-900-rgb:154, 71, 226; --spectrum-purple-900:rgba(var(--spectrum-purple-900-rgb)); - --spectrum-purple-1000-rgb:115, 38, 211; + --spectrum-purple-1000-rgb:134, 40, 217; --spectrum-purple-1000:rgba(var(--spectrum-purple-1000-rgb)); - --spectrum-purple-1100-rgb:93, 19, 183; + --spectrum-purple-1100-rgb:115, 13, 204; --spectrum-purple-1100:rgba(var(--spectrum-purple-1100-rgb)); - --spectrum-purple-1200-rgb:71, 12, 148; + --spectrum-purple-1200-rgb:93, 0, 177; --spectrum-purple-1200:rgba(var(--spectrum-purple-1200-rgb)); - --spectrum-purple-1300-rgb:51, 16, 106; + --spectrum-purple-1300-rgb:75, 0, 144; --spectrum-purple-1300:rgba(var(--spectrum-purple-1300-rgb)); - --spectrum-purple-1400-rgb:35, 15, 73; + --spectrum-purple-1400-rgb:59, 0, 111; --spectrum-purple-1400:rgba(var(--spectrum-purple-1400-rgb)); - --spectrum-fuchsia-100-rgb:255, 233, 252; + --spectrum-purple-1500-rgb:44, 0, 84; + --spectrum-purple-1500:rgba(var(--spectrum-purple-1500-rgb)); + --spectrum-purple-1600-rgb:23, 0, 45; + --spectrum-purple-1600:rgba(var(--spectrum-purple-1600-rgb)); + --spectrum-fuchsia-100-rgb:254, 246, 255; --spectrum-fuchsia-100:rgba(var(--spectrum-fuchsia-100-rgb)); - --spectrum-fuchsia-200-rgb:255, 218, 250; + --spectrum-fuchsia-200-rgb:253, 233, 255; --spectrum-fuchsia-200:rgba(var(--spectrum-fuchsia-200-rgb)); - --spectrum-fuchsia-300-rgb:254, 199, 248; + --spectrum-fuchsia-300-rgb:250, 211, 255; --spectrum-fuchsia-300:rgba(var(--spectrum-fuchsia-300-rgb)); - --spectrum-fuchsia-400-rgb:251, 174, 246; + --spectrum-fuchsia-400-rgb:247, 181, 255; --spectrum-fuchsia-400:rgba(var(--spectrum-fuchsia-400-rgb)); - --spectrum-fuchsia-500-rgb:245, 146, 243; + --spectrum-fuchsia-500-rgb:243, 147, 255; --spectrum-fuchsia-500:rgba(var(--spectrum-fuchsia-500-rgb)); - --spectrum-fuchsia-600-rgb:237, 116, 237; + --spectrum-fuchsia-600-rgb:236, 105, 255; --spectrum-fuchsia-600:rgba(var(--spectrum-fuchsia-600-rgb)); - --spectrum-fuchsia-700-rgb:224, 85, 226; + --spectrum-fuchsia-700-rgb:223, 77, 245; --spectrum-fuchsia-700:rgba(var(--spectrum-fuchsia-700-rgb)); - --spectrum-fuchsia-800-rgb:205, 58, 206; + --spectrum-fuchsia-800-rgb:200, 68, 220; --spectrum-fuchsia-800:rgba(var(--spectrum-fuchsia-800-rgb)); - --spectrum-fuchsia-900-rgb:182, 34, 183; + --spectrum-fuchsia-900-rgb:181, 57, 200; --spectrum-fuchsia-900:rgba(var(--spectrum-fuchsia-900-rgb)); - --spectrum-fuchsia-1000-rgb:157, 3, 158; + --spectrum-fuchsia-1000-rgb:156, 40, 175; --spectrum-fuchsia-1000:rgba(var(--spectrum-fuchsia-1000-rgb)); - --spectrum-fuchsia-1100-rgb:128, 0, 129; + --spectrum-fuchsia-1100-rgb:135, 27, 154; --spectrum-fuchsia-1100:rgba(var(--spectrum-fuchsia-1100-rgb)); - --spectrum-fuchsia-1200-rgb:100, 6, 100; + --spectrum-fuchsia-1200-rgb:113, 15, 131; --spectrum-fuchsia-1200:rgba(var(--spectrum-fuchsia-1200-rgb)); - --spectrum-fuchsia-1300-rgb:71, 14, 70; + --spectrum-fuchsia-1300-rgb:92, 4, 109; --spectrum-fuchsia-1300:rgba(var(--spectrum-fuchsia-1300-rgb)); - --spectrum-fuchsia-1400-rgb:50, 13, 49; + --spectrum-fuchsia-1400-rgb:72, 0, 88; --spectrum-fuchsia-1400:rgba(var(--spectrum-fuchsia-1400-rgb)); - --spectrum-magenta-100-rgb:255, 234, 241; + --spectrum-fuchsia-1500-rgb:54, 0, 66; + --spectrum-fuchsia-1500:rgba(var(--spectrum-fuchsia-1500-rgb)); + --spectrum-fuchsia-1600-rgb:29, 0, 35; + --spectrum-fuchsia-1600:rgba(var(--spectrum-fuchsia-1600-rgb)); + --spectrum-magenta-100-rgb:255, 245, 248; --spectrum-magenta-100:rgba(var(--spectrum-magenta-100-rgb)); - --spectrum-magenta-200-rgb:255, 220, 232; + --spectrum-magenta-200-rgb:255, 232, 240; --spectrum-magenta-200:rgba(var(--spectrum-magenta-200-rgb)); - --spectrum-magenta-300-rgb:255, 202, 221; + --spectrum-magenta-300-rgb:255, 213, 227; --spectrum-magenta-300:rgba(var(--spectrum-magenta-300-rgb)); - --spectrum-magenta-400-rgb:255, 178, 206; + --spectrum-magenta-400-rgb:255, 185, 208; --spectrum-magenta-400:rgba(var(--spectrum-magenta-400-rgb)); - --spectrum-magenta-500-rgb:255, 149, 189; + --spectrum-magenta-500-rgb:255, 152, 187; --spectrum-magenta-500:rgba(var(--spectrum-magenta-500-rgb)); - --spectrum-magenta-600-rgb:250, 119, 170; + --spectrum-magenta-600-rgb:255, 112, 159; --spectrum-magenta-600:rgba(var(--spectrum-magenta-600-rgb)); - --spectrum-magenta-700-rgb:239, 90, 152; + --spectrum-magenta-700-rgb:255, 72, 133; --spectrum-magenta-700:rgba(var(--spectrum-magenta-700-rgb)); - --spectrum-magenta-800-rgb:222, 61, 130; + --spectrum-magenta-800-rgb:240, 45, 110; --spectrum-magenta-800:rgba(var(--spectrum-magenta-800-rgb)); - --spectrum-magenta-900-rgb:200, 34, 105; + --spectrum-magenta-900-rgb:217, 35, 97; --spectrum-magenta-900:rgba(var(--spectrum-magenta-900-rgb)); - --spectrum-magenta-1000-rgb:173, 9, 85; + --spectrum-magenta-1000-rgb:186, 22, 80; --spectrum-magenta-1000:rgba(var(--spectrum-magenta-1000-rgb)); - --spectrum-magenta-1100-rgb:142, 0, 69; + --spectrum-magenta-1100-rgb:163, 5, 62; --spectrum-magenta-1100:rgba(var(--spectrum-magenta-1100-rgb)); - --spectrum-magenta-1200-rgb:112, 0, 55; + --spectrum-magenta-1200-rgb:136, 0, 51; --spectrum-magenta-1200:rgba(var(--spectrum-magenta-1200-rgb)); - --spectrum-magenta-1300-rgb:84, 3, 42; + --spectrum-magenta-1300-rgb:111, 0, 40; --spectrum-magenta-1300:rgba(var(--spectrum-magenta-1300-rgb)); - --spectrum-magenta-1400-rgb:60, 6, 29; + --spectrum-magenta-1400-rgb:86, 0, 30; --spectrum-magenta-1400:rgba(var(--spectrum-magenta-1400-rgb)); + --spectrum-magenta-1500-rgb:64, 0, 22; + --spectrum-magenta-1500:rgba(var(--spectrum-magenta-1500-rgb)); + --spectrum-magenta-1600-rgb:35, 0, 12; + --spectrum-magenta-1600:rgba(var(--spectrum-magenta-1600-rgb)); + --spectrum-pink-100-rgb:255, 246, 252; + --spectrum-pink-100:rgba(var(--spectrum-pink-100-rgb)); + --spectrum-pink-200-rgb:255, 232, 247; + --spectrum-pink-200:rgba(var(--spectrum-pink-200-rgb)); + --spectrum-pink-300-rgb:255, 211, 240; + --spectrum-pink-300:rgba(var(--spectrum-pink-300-rgb)); + --spectrum-pink-400-rgb:255, 181, 230; + --spectrum-pink-400:rgba(var(--spectrum-pink-400-rgb)); + --spectrum-pink-500-rgb:255, 148, 219; + --spectrum-pink-500:rgba(var(--spectrum-pink-500-rgb)); + --spectrum-pink-600-rgb:255, 103, 204; + --spectrum-pink-600:rgba(var(--spectrum-pink-600-rgb)); + --spectrum-pink-700-rgb:242, 76, 184; + --spectrum-pink-700:rgba(var(--spectrum-pink-700-rgb)); + --spectrum-pink-800-rgb:228, 52, 163; + --spectrum-pink-800:rgba(var(--spectrum-pink-800-rgb)); + --spectrum-pink-900-rgb:206, 42, 146; + --spectrum-pink-900:rgba(var(--spectrum-pink-900-rgb)); + --spectrum-pink-1000-rgb:176, 31, 123; + --spectrum-pink-1000:rgba(var(--spectrum-pink-1000-rgb)); + --spectrum-pink-1100-rgb:152, 22, 104; + --spectrum-pink-1100:rgba(var(--spectrum-pink-1100-rgb)); + --spectrum-pink-1200-rgb:128, 12, 85; + --spectrum-pink-1200:rgba(var(--spectrum-pink-1200-rgb)); + --spectrum-pink-1300-rgb:105, 3, 68; + --spectrum-pink-1300:rgba(var(--spectrum-pink-1300-rgb)); + --spectrum-pink-1400-rgb:83, 0, 53; + --spectrum-pink-1400:rgba(var(--spectrum-pink-1400-rgb)); + --spectrum-pink-1500-rgb:62, 0, 39; + --spectrum-pink-1500:rgba(var(--spectrum-pink-1500-rgb)); + --spectrum-pink-1600-rgb:33, 0, 21; + --spectrum-pink-1600:rgba(var(--spectrum-pink-1600-rgb)); + --spectrum-turquoise-100-rgb:238, 251, 251; + --spectrum-turquoise-100:rgba(var(--spectrum-turquoise-100-rgb)); + --spectrum-turquoise-200-rgb:209, 245, 245; + --spectrum-turquoise-200:rgba(var(--spectrum-turquoise-200-rgb)); + --spectrum-turquoise-300-rgb:169, 236, 237; + --spectrum-turquoise-300:rgba(var(--spectrum-turquoise-300-rgb)); + --spectrum-turquoise-400-rgb:111, 221, 228; + --spectrum-turquoise-400:rgba(var(--spectrum-turquoise-400-rgb)); + --spectrum-turquoise-500-rgb:39, 202, 216; + --spectrum-turquoise-500:rgba(var(--spectrum-turquoise-500-rgb)); + --spectrum-turquoise-600-rgb:15, 177, 192; + --spectrum-turquoise-600:rgba(var(--spectrum-turquoise-600-rgb)); + --spectrum-turquoise-700-rgb:12, 158, 171; + --spectrum-turquoise-700:rgba(var(--spectrum-turquoise-700-rgb)); + --spectrum-turquoise-800-rgb:10, 141, 153; + --spectrum-turquoise-800:rgba(var(--spectrum-turquoise-800-rgb)); + --spectrum-turquoise-900-rgb:8, 126, 137; + --spectrum-turquoise-900:rgba(var(--spectrum-turquoise-900-rgb)); + --spectrum-turquoise-1000-rgb:5, 107, 116; + --spectrum-turquoise-1000:rgba(var(--spectrum-turquoise-1000-rgb)); + --spectrum-turquoise-1100-rgb:3, 90, 98; + --spectrum-turquoise-1100:rgba(var(--spectrum-turquoise-1100-rgb)); + --spectrum-turquoise-1200-rgb:1, 74, 81; + --spectrum-turquoise-1200:rgba(var(--spectrum-turquoise-1200-rgb)); + --spectrum-turquoise-1300-rgb:0, 59, 65; + --spectrum-turquoise-1300:rgba(var(--spectrum-turquoise-1300-rgb)); + --spectrum-turquoise-1400-rgb:0, 44, 49; + --spectrum-turquoise-1400:rgba(var(--spectrum-turquoise-1400-rgb)); + --spectrum-turquoise-1500-rgb:0, 32, 35; + --spectrum-turquoise-1500:rgba(var(--spectrum-turquoise-1500-rgb)); + --spectrum-turquoise-1600-rgb:0, 15, 17; + --spectrum-turquoise-1600:rgba(var(--spectrum-turquoise-1600-rgb)); + --spectrum-brown-100-rgb:252, 247, 242; + --spectrum-brown-100:rgba(var(--spectrum-brown-100-rgb)); + --spectrum-brown-200-rgb:247, 238, 225; + --spectrum-brown-200:rgba(var(--spectrum-brown-200-rgb)); + --spectrum-brown-300-rgb:239, 221, 195; + --spectrum-brown-300:rgba(var(--spectrum-brown-300-rgb)); + --spectrum-brown-400-rgb:229, 200, 157; + --spectrum-brown-400:rgba(var(--spectrum-brown-400-rgb)); + --spectrum-brown-500-rgb:214, 177, 123; + --spectrum-brown-500:rgba(var(--spectrum-brown-500-rgb)); + --spectrum-brown-600-rgb:190, 155, 104; + --spectrum-brown-600:rgba(var(--spectrum-brown-600-rgb)); + --spectrum-brown-700-rgb:171, 138, 90; + --spectrum-brown-700:rgba(var(--spectrum-brown-700-rgb)); + --spectrum-brown-800-rgb:154, 123, 77; + --spectrum-brown-800:rgba(var(--spectrum-brown-800-rgb)); + --spectrum-brown-900-rgb:139, 109, 66; + --spectrum-brown-900:rgba(var(--spectrum-brown-900-rgb)); + --spectrum-brown-1000-rgb:119, 91, 50; + --spectrum-brown-1000:rgba(var(--spectrum-brown-1000-rgb)); + --spectrum-brown-1100-rgb:103, 76, 35; + --spectrum-brown-1100:rgba(var(--spectrum-brown-1100-rgb)); + --spectrum-brown-1200-rgb:88, 61, 21; + --spectrum-brown-1200:rgba(var(--spectrum-brown-1200-rgb)); + --spectrum-brown-1300-rgb:70, 49, 17; + --spectrum-brown-1300:rgba(var(--spectrum-brown-1300-rgb)); + --spectrum-brown-1400-rgb:52, 37, 13; + --spectrum-brown-1400:rgba(var(--spectrum-brown-1400-rgb)); + --spectrum-brown-1500-rgb:38, 26, 9; + --spectrum-brown-1500:rgba(var(--spectrum-brown-1500-rgb)); + --spectrum-brown-1600-rgb:16, 12, 4; + --spectrum-brown-1600:rgba(var(--spectrum-brown-1600-rgb)); + --spectrum-silver-100-rgb:247, 247, 247; + --spectrum-silver-100:rgba(var(--spectrum-silver-100-rgb)); + --spectrum-silver-200-rgb:239, 239, 239; + --spectrum-silver-200:rgba(var(--spectrum-silver-200-rgb)); + --spectrum-silver-300-rgb:223, 223, 223; + --spectrum-silver-300:rgba(var(--spectrum-silver-300-rgb)); + --spectrum-silver-400-rgb:204, 204, 204; + --spectrum-silver-400:rgba(var(--spectrum-silver-400-rgb)); + --spectrum-silver-500-rgb:183, 183, 183; + --spectrum-silver-500:rgba(var(--spectrum-silver-500-rgb)); + --spectrum-silver-600-rgb:160, 160, 160; + --spectrum-silver-600:rgba(var(--spectrum-silver-600-rgb)); + --spectrum-silver-700-rgb:143, 143, 143; + --spectrum-silver-700:rgba(var(--spectrum-silver-700-rgb)); + --spectrum-silver-800-rgb:128, 128, 128; + --spectrum-silver-800:rgba(var(--spectrum-silver-800-rgb)); + --spectrum-silver-900-rgb:114, 114, 114; + --spectrum-silver-900:rgba(var(--spectrum-silver-900-rgb)); + --spectrum-silver-1000-rgb:96, 96, 96; + --spectrum-silver-1000:rgba(var(--spectrum-silver-1000-rgb)); + --spectrum-silver-1100-rgb:81, 81, 81; + --spectrum-silver-1100:rgba(var(--spectrum-silver-1100-rgb)); + --spectrum-silver-1200-rgb:66, 66, 66; + --spectrum-silver-1200:rgba(var(--spectrum-silver-1200-rgb)); + --spectrum-silver-1300-rgb:52, 52, 52; + --spectrum-silver-1300:rgba(var(--spectrum-silver-1300-rgb)); + --spectrum-silver-1400-rgb:39, 39, 39; + --spectrum-silver-1400:rgba(var(--spectrum-silver-1400-rgb)); + --spectrum-silver-1500-rgb:28, 28, 28; + --spectrum-silver-1500:rgba(var(--spectrum-silver-1500-rgb)); + --spectrum-silver-1600-rgb:12, 12, 12; + --spectrum-silver-1600:rgba(var(--spectrum-silver-1600-rgb)); + --spectrum-cinnamon-100-rgb:253, 247, 243; + --spectrum-cinnamon-100:rgba(var(--spectrum-cinnamon-100-rgb)); + --spectrum-cinnamon-200-rgb:249, 236, 229; + --spectrum-cinnamon-200:rgba(var(--spectrum-cinnamon-200-rgb)); + --spectrum-cinnamon-300-rgb:244, 218, 203; + --spectrum-cinnamon-300:rgba(var(--spectrum-cinnamon-300-rgb)); + --spectrum-cinnamon-400-rgb:237, 196, 172; + --spectrum-cinnamon-400:rgba(var(--spectrum-cinnamon-400-rgb)); + --spectrum-cinnamon-500-rgb:229, 170, 136; + --spectrum-cinnamon-500:rgba(var(--spectrum-cinnamon-500-rgb)); + --spectrum-cinnamon-600-rgb:212, 145, 108; + --spectrum-cinnamon-600:rgba(var(--spectrum-cinnamon-600-rgb)); + --spectrum-cinnamon-700-rgb:198, 126, 88; + --spectrum-cinnamon-700:rgba(var(--spectrum-cinnamon-700-rgb)); + --spectrum-cinnamon-800-rgb:184, 109, 70; + --spectrum-cinnamon-800:rgba(var(--spectrum-cinnamon-800-rgb)); + --spectrum-cinnamon-900-rgb:170, 94, 56; + --spectrum-cinnamon-900:rgba(var(--spectrum-cinnamon-900-rgb)); + --spectrum-cinnamon-1000-rgb:147, 77, 43; + --spectrum-cinnamon-1000:rgba(var(--spectrum-cinnamon-1000-rgb)); + --spectrum-cinnamon-1100-rgb:128, 62, 32; + --spectrum-cinnamon-1100:rgba(var(--spectrum-cinnamon-1100-rgb)); + --spectrum-cinnamon-1200-rgb:110, 48, 21; + --spectrum-cinnamon-1200:rgba(var(--spectrum-cinnamon-1200-rgb)); + --spectrum-cinnamon-1300-rgb:92, 35, 11; + --spectrum-cinnamon-1300:rgba(var(--spectrum-cinnamon-1300-rgb)); + --spectrum-cinnamon-1400-rgb:72, 25, 6; + --spectrum-cinnamon-1400:rgba(var(--spectrum-cinnamon-1400-rgb)); + --spectrum-cinnamon-1500-rgb:52, 18, 4; + --spectrum-cinnamon-1500:rgba(var(--spectrum-cinnamon-1500-rgb)); + --spectrum-cinnamon-1600-rgb:24, 8, 2; + --spectrum-cinnamon-1600:rgba(var(--spectrum-cinnamon-1600-rgb)); --spectrum-icon-color-blue-primary-default:var(--spectrum-blue-900); --spectrum-icon-color-green-primary-default:var(--spectrum-green-900); --spectrum-icon-color-red-primary-default:var(--spectrum-red-900); @@ -2799,89 +2873,67 @@ --spectrum-calendar-day-border-color-key-focus:var(--spectrum-blue-800); --spectrum-badge-label-icon-color-primary:var(--spectrum-white); - - --spectrum-coach-indicator-ring-default-color:var(--spectrum-blue-800); - --spectrum-coach-indicator-ring-dark-color:var(--spectrum-gray-900); - --spectrum-coach-indicator-ring-light-color:var(--spectrum-gray-50); - - --spectrum-well-border-color:var(--spectrum-black-rgb); - - --spectrum-steplist-current-marker-color-key-focus:var(--spectrum-blue-800); - - --spectrum-treeview-item-background-color-quiet-selected:rgba(var(--spectrum-gray-900-rgb), 0.06); - --spectrum-treeview-item-background-color-selected:rgba(var(--spectrum-blue-900-rgb), 0.1); - - --spectrum-logic-button-and-background-color:var(--spectrum-blue-900); - --spectrum-logic-button-and-border-color:var(--spectrum-blue-900); - --spectrum-logic-button-and-background-color-hover:var(--spectrum-blue-1100); - --spectrum-logic-button-and-border-color-hover:var(--spectrum-blue-1100); - - --spectrum-logic-button-or-background-color:var(--spectrum-magenta-900); - --spectrum-logic-button-or-border-color:var(--spectrum-magenta-900); - --spectrum-logic-button-or-background-color-hover:var(--spectrum-magenta-1100); - --spectrum-logic-button-or-border-color-hover:var(--spectrum-magenta-1100); - - --spectrum-assetcard-border-color-selected:var(--spectrum-blue-900); - --spectrum-assetcard-border-color-selected-hover:var(--spectrum-blue-900); - --spectrum-assetcard-border-color-selected-down:var(--spectrum-blue-1000); - --spectrum-assetcard-selectionindicator-background-color-ordered:var(--spectrum-blue-900); - --spectrum-assestcard-focus-indicator-color:var(--spectrum-blue-800); - - --spectrum-assetlist-item-background-color-selected-hover:rgba(var(--spectrum-blue-900-rgb),0.2); - --spectrum-assetlist-item-background-color-selected:rgba(var(--spectrum-blue-900-rgb),0.1); - --spectrum-assetlist-border-color-key-focus:var(--spectrum-blue-800); -} -.spectrum--medium{ - --spectrum-workflow-icon-size-50:14px; - --spectrum-workflow-icon-size-75:16px; - --spectrum-workflow-icon-size-100:18px; - --spectrum-workflow-icon-size-200:20px; - --spectrum-workflow-icon-size-300:22px; - --spectrum-arrow-icon-size-75:10px; - --spectrum-arrow-icon-size-100:10px; - --spectrum-arrow-icon-size-200:12px; - --spectrum-arrow-icon-size-300:14px; - --spectrum-arrow-icon-size-400:16px; - --spectrum-arrow-icon-size-500:18px; - --spectrum-arrow-icon-size-600:20px; - --spectrum-asterisk-icon-size-100:8px; - --spectrum-asterisk-icon-size-200:10px; - --spectrum-asterisk-icon-size-300:10px; - --spectrum-checkmark-icon-size-50:10px; - --spectrum-checkmark-icon-size-75:10px; - --spectrum-checkmark-icon-size-100:10px; - --spectrum-checkmark-icon-size-200:12px; - --spectrum-checkmark-icon-size-300:14px; - --spectrum-checkmark-icon-size-400:16px; - --spectrum-checkmark-icon-size-500:16px; - --spectrum-checkmark-icon-size-600:18px; - --spectrum-chevron-icon-size-50:6px; - --spectrum-chevron-icon-size-75:10px; - --spectrum-chevron-icon-size-100:10px; - --spectrum-chevron-icon-size-200:12px; - --spectrum-chevron-icon-size-300:14px; - --spectrum-chevron-icon-size-400:16px; - --spectrum-chevron-icon-size-500:16px; - --spectrum-chevron-icon-size-600:18px; - --spectrum-corner-triangle-icon-size-75:5px; - --spectrum-corner-triangle-icon-size-100:5px; - --spectrum-corner-triangle-icon-size-200:6px; - --spectrum-corner-triangle-icon-size-300:7px; - --spectrum-cross-icon-size-75:8px; - --spectrum-cross-icon-size-100:8px; - --spectrum-cross-icon-size-200:10px; - --spectrum-cross-icon-size-300:12px; - --spectrum-cross-icon-size-400:12px; - --spectrum-cross-icon-size-500:14px; - --spectrum-cross-icon-size-600:16px; - --spectrum-dash-icon-size-50:8px; - --spectrum-dash-icon-size-75:8px; - --spectrum-dash-icon-size-100:10px; - --spectrum-dash-icon-size-200:12px; - --spectrum-dash-icon-size-300:12px; - --spectrum-dash-icon-size-400:14px; - --spectrum-dash-icon-size-500:16px; - --spectrum-dash-icon-size-600:18px; + + --spectrum-coach-indicator-ring-default-color:var(--spectrum-blue-800); + --spectrum-coach-indicator-ring-dark-color:var(--spectrum-gray-900); + --spectrum-coach-indicator-ring-light-color:var(--spectrum-gray-50); + + --spectrum-well-border-color:var(--spectrum-black-rgb); + + --spectrum-steplist-current-marker-color-key-focus:var(--spectrum-blue-800); + + --spectrum-treeview-item-background-color-quiet-selected:rgba(var(--spectrum-gray-900-rgb), 0.06); + --spectrum-treeview-item-background-color-selected:rgba(var(--spectrum-blue-900-rgb), 0.1); + + --spectrum-logic-button-and-background-color:var(--spectrum-blue-900); + --spectrum-logic-button-and-border-color:var(--spectrum-blue-900); + --spectrum-logic-button-and-background-color-hover:var(--spectrum-blue-1100); + --spectrum-logic-button-and-border-color-hover:var(--spectrum-blue-1100); + + --spectrum-logic-button-or-background-color:var(--spectrum-magenta-900); + --spectrum-logic-button-or-border-color:var(--spectrum-magenta-900); + --spectrum-logic-button-or-background-color-hover:var(--spectrum-magenta-1100); + --spectrum-logic-button-or-border-color-hover:var(--spectrum-magenta-1100); + + --spectrum-assetcard-border-color-selected:var(--spectrum-blue-900); + --spectrum-assetcard-border-color-selected-hover:var(--spectrum-blue-900); + --spectrum-assetcard-border-color-selected-down:var(--spectrum-blue-1000); + --spectrum-assetcard-selectionindicator-background-color-ordered:var(--spectrum-blue-900); + --spectrum-assestcard-focus-indicator-color:var(--spectrum-blue-800); + + --spectrum-assetlist-item-background-color-selected-hover:rgba(var(--spectrum-blue-900-rgb),0.2); + --spectrum-assetlist-item-background-color-selected:rgba(var(--spectrum-blue-900-rgb),0.1); + --spectrum-assetlist-border-color-key-focus:var(--spectrum-blue-800); +} +.spectrum--medium{ + --spectrum-checkbox-control-size-small:12px; + --spectrum-checkbox-control-size-medium:14px; + --spectrum-checkbox-control-size-large:16px; + --spectrum-checkbox-control-size-extra-large:18px; + --spectrum-checkbox-top-to-control-small:6px; + --spectrum-checkbox-top-to-control-medium:9px; + --spectrum-checkbox-top-to-control-large:12px; + --spectrum-checkbox-top-to-control-extra-large:15px; + --spectrum-switch-control-width-small:22px; + --spectrum-switch-control-width-medium:26px; + --spectrum-switch-control-width-large:30px; + --spectrum-switch-control-width-extra-large:34px; + --spectrum-switch-control-height-small:14px; + --spectrum-switch-control-height-medium:16px; + --spectrum-switch-control-height-large:18px; + --spectrum-switch-control-height-extra-large:20px; + --spectrum-switch-top-to-control-small:6px; + --spectrum-switch-top-to-control-medium:9px; + --spectrum-switch-top-to-control-large:12px; + --spectrum-switch-top-to-control-extra-large:15px; + --spectrum-radio-button-control-size-small:12px; + --spectrum-radio-button-control-size-medium:14px; + --spectrum-radio-button-control-size-large:16px; + --spectrum-radio-button-control-size-extra-large:18px; + --spectrum-radio-button-top-to-control-small:6px; + --spectrum-radio-button-top-to-control-medium:9px; + --spectrum-radio-button-top-to-control-large:12px; + --spectrum-radio-button-top-to-control-extra-large:15px; --spectrum-field-label-text-to-asterisk-small:4px; --spectrum-field-label-text-to-asterisk-medium:4px; --spectrum-field-label-text-to-asterisk-large:5px; @@ -2889,18 +2941,15 @@ --spectrum-field-label-top-to-asterisk-small:8px; --spectrum-field-label-top-to-asterisk-medium:12px; --spectrum-field-label-top-to-asterisk-large:15px; - --spectrum-field-label-top-to-asterisk-extra-large:19px; - --spectrum-field-label-top-margin-medium:4px; - --spectrum-field-label-top-margin-large:5px; - --spectrum-field-label-top-margin-extra-large:5px; + --spectrum-field-label-top-to-asterisk-extra-large:18px; --spectrum-field-label-to-component-quiet-small:-8px; --spectrum-field-label-to-component-quiet-medium:-8px; --spectrum-field-label-to-component-quiet-large:-12px; --spectrum-field-label-to-component-quiet-extra-large:-15px; - --spectrum-help-text-top-to-workflow-icon-small:4px; - --spectrum-help-text-top-to-workflow-icon-medium:3px; - --spectrum-help-text-top-to-workflow-icon-large:6px; - --spectrum-help-text-top-to-workflow-icon-extra-large:9px; + --spectrum-help-text-top-to-workflow-icon-small:var(--spectrum-component-top-to-workflow-icon-75); + --spectrum-help-text-top-to-workflow-icon-medium:var(--spectrum-component-top-to-workflow-icon-100); + --spectrum-help-text-top-to-workflow-icon-large:var(--spectrum-component-top-to-workflow-icon-200); + --spectrum-help-text-top-to-workflow-icon-extra-large:var(--spectrum-component-top-to-workflow-icon-300); --spectrum-status-light-dot-size-medium:8px; --spectrum-status-light-dot-size-large:10px; --spectrum-status-light-dot-size-extra-large:10px; @@ -2911,8 +2960,8 @@ --spectrum-action-button-edge-to-hold-icon-medium:4px; --spectrum-action-button-edge-to-hold-icon-large:5px; --spectrum-action-button-edge-to-hold-icon-extra-large:6px; - --spectrum-tooltip-tip-width:8px; - --spectrum-tooltip-tip-height:4px; + --spectrum-tooltip-tip-width:10px; + --spectrum-tooltip-tip-height:5px; --spectrum-tooltip-maximum-width:160px; --spectrum-progress-circle-size-small:16px; --spectrum-progress-circle-size-medium:32px; @@ -2920,11 +2969,11 @@ --spectrum-progress-circle-thickness-small:2px; --spectrum-progress-circle-thickness-medium:3px; --spectrum-progress-circle-thickness-large:4px; - --spectrum-toast-height:48px; + --spectrum-toast-height:52px; --spectrum-toast-maximum-width:336px; - --spectrum-toast-top-to-workflow-icon:15px; - --spectrum-toast-top-to-text:14px; - --spectrum-toast-bottom-to-text:17px; + --spectrum-toast-top-to-workflow-icon:18px; + --spectrum-toast-top-to-text:18px; + --spectrum-toast-bottom-to-text:20px; --spectrum-action-bar-height:48px; --spectrum-action-bar-top-to-item-counter:14px; --spectrum-swatch-size-extra-small:16px; @@ -2957,6 +3006,22 @@ --spectrum-menu-item-top-to-selected-icon-medium:11px; --spectrum-menu-item-top-to-selected-icon-large:14px; --spectrum-menu-item-top-to-selected-icon-extra-large:17px; + --spectrum-slider-control-height-small:14px; + --spectrum-slider-control-height-medium:16px; + --spectrum-slider-control-height-large:18px; + --spectrum-slider-control-height-extra-large:20px; + --spectrum-slider-handle-size-small:14px; + --spectrum-slider-handle-size-medium:16px; + --spectrum-slider-handle-size-large:18px; + --spectrum-slider-handle-size-extra-large:20px; + --spectrum-slider-handle-border-width-down-small:5px; + --spectrum-slider-handle-border-width-down-medium:6px; + --spectrum-slider-handle-border-width-down-large:7px; + --spectrum-slider-handle-border-width-down-extra-large:8px; + --spectrum-slider-bottom-to-handle-small:5px; + --spectrum-slider-bottom-to-handle-medium:8px; + --spectrum-slider-bottom-to-handle-large:11px; + --spectrum-slider-bottom-to-handle-extra-large:14px; --spectrum-slider-control-to-field-label-small:5px; --spectrum-slider-control-to-field-label-medium:8px; --spectrum-slider-control-to-field-label-large:11px; @@ -2985,7 +3050,8 @@ --spectrum-thumbnail-size-1000:56px; --spectrum-alert-dialog-title-size:var(--spectrum-heading-size-s); --spectrum-alert-dialog-description-size:var(--spectrum-body-size-s); - --spectrum-opacity-checkerboard-square-size:8px; + --spectrum-opacity-checkerboard-square-size:var(--spectrum-opacity-checkerboard-square-size-medium); + --spectrum-opacity-checkerboard-square-size-medium:8px; --spectrum-contextual-help-title-size:var(--spectrum-heading-size-xs); --spectrum-contextual-help-body-size:var(--spectrum-body-size-s); --spectrum-breadcrumbs-height-multiline:72px; @@ -3012,11 +3078,11 @@ --spectrum-avatar-size-500:32px; --spectrum-avatar-size-600:36px; --spectrum-avatar-size-700:40px; - --spectrum-alert-banner-minimum-height:48px; + --spectrum-alert-banner-minimum-height:56px; --spectrum-alert-banner-width:832px; - --spectrum-alert-banner-top-to-workflow-icon:15px; - --spectrum-alert-banner-top-to-text:14px; - --spectrum-alert-banner-bottom-to-text:17px; + --spectrum-alert-banner-top-to-workflow-icon:19px; + --spectrum-alert-banner-top-to-text:18px; + --spectrum-alert-banner-bottom-to-text:20px; --spectrum-rating-indicator-width:18px; --spectrum-rating-indicator-to-icon:4px; --spectrum-color-area-width:192px; @@ -3181,14 +3247,77 @@ --spectrum-side-navigation-with-icon-third-level-edge-to-text:62px; --spectrum-side-navigation-item-to-item:4px; --spectrum-side-navigation-item-to-header:24px; - --spectrum-side-navigation-header-to-item:8px; --spectrum-side-navigation-bottom-to-text:8px; --spectrum-tray-top-to-content-area:4px; - --spectrum-text-to-visual-50:6px; - --spectrum-text-to-visual-75:7px; - --spectrum-text-to-visual-100:8px; - --spectrum-text-to-visual-200:9px; - --spectrum-text-to-visual-300:10px; + --spectrum-arrow-icon-size-75:10px; + --spectrum-arrow-icon-size-100:10px; + --spectrum-arrow-icon-size-200:12px; + --spectrum-arrow-icon-size-300:14px; + --spectrum-arrow-icon-size-400:16px; + --spectrum-arrow-icon-size-500:18px; + --spectrum-arrow-icon-size-600:20px; + --spectrum-asterisk-icon-size-100:8px; + --spectrum-asterisk-icon-size-200:10px; + --spectrum-asterisk-icon-size-300:10px; + --spectrum-checkmark-icon-size-50:10px; + --spectrum-checkmark-icon-size-75:10px; + --spectrum-checkmark-icon-size-100:10px; + --spectrum-checkmark-icon-size-200:12px; + --spectrum-checkmark-icon-size-300:14px; + --spectrum-checkmark-icon-size-400:16px; + --spectrum-checkmark-icon-size-500:16px; + --spectrum-checkmark-icon-size-600:18px; + --spectrum-chevron-icon-size-50:6px; + --spectrum-chevron-icon-size-75:10px; + --spectrum-chevron-icon-size-100:10px; + --spectrum-chevron-icon-size-200:12px; + --spectrum-chevron-icon-size-300:14px; + --spectrum-chevron-icon-size-400:16px; + --spectrum-chevron-icon-size-500:16px; + --spectrum-chevron-icon-size-600:18px; + --spectrum-cross-icon-size-75:8px; + --spectrum-cross-icon-size-100:8px; + --spectrum-cross-icon-size-200:10px; + --spectrum-cross-icon-size-300:12px; + --spectrum-cross-icon-size-400:12px; + --spectrum-cross-icon-size-500:14px; + --spectrum-cross-icon-size-600:16px; + --spectrum-dash-icon-size-50:8px; + --spectrum-dash-icon-size-75:8px; + --spectrum-dash-icon-size-100:10px; + --spectrum-dash-icon-size-200:12px; + --spectrum-dash-icon-size-300:12px; + --spectrum-dash-icon-size-400:14px; + --spectrum-dash-icon-size-500:16px; + --spectrum-dash-icon-size-600:18px; + --spectrum-side-navigation-header-to-item:8px; + --spectrum-switch-handle-size-small:6px; + --spectrum-switch-handle-selected-size-small:8px; + --spectrum-switch-handle-selected-size-medium:10px; + --spectrum-switch-handle-selected-size-large:12px; + --spectrum-switch-handle-selected-size-extra-large:14px; + --spectrum-switch-handle-size-medium:8px; + --spectrum-switch-handle-size-large:10px; + --spectrum-switch-handle-size-extra-large:12px; + --spectrum-tag-label-to-clear-icon-small:8px; + --spectrum-tag-label-to-clear-icon-medium:12px; + --spectrum-tag-label-to-clear-icon-large:15px; + --spectrum-tag-edge-to-clear-icon-small:8px; + --spectrum-tag-edge-to-clear-icon-medium:12px; + --spectrum-tag-edge-to-clear-icon-large:15px; + --spectrum-opacity-checkerboard-square-size-small:4px; + --spectrum-drop-shadow-y:1px; + --spectrum-drop-shadow-blur:4px; + --spectrum-workflow-icon-size-50:14px; + --spectrum-workflow-icon-size-75:16px; + --spectrum-workflow-icon-size-100:20px; + --spectrum-workflow-icon-size-200:22px; + --spectrum-workflow-icon-size-300:26px; + --spectrum-text-to-visual-50:5px; + --spectrum-text-to-visual-75:5px; + --spectrum-text-to-visual-100:6px; + --spectrum-text-to-visual-200:7px; + --spectrum-text-to-visual-300:8px; --spectrum-text-to-control-75:9px; --spectrum-text-to-control-100:10px; --spectrum-text-to-control-200:11px; @@ -3219,9 +3348,9 @@ --spectrum-component-edge-to-visual-300:15px; --spectrum-component-edge-to-visual-only-50:3px; --spectrum-component-edge-to-visual-only-75:4px; - --spectrum-component-edge-to-visual-only-100:7px; - --spectrum-component-edge-to-visual-only-200:10px; - --spectrum-component-edge-to-visual-only-300:13px; + --spectrum-component-edge-to-visual-only-100:6px; + --spectrum-component-edge-to-visual-only-200:9px; + --spectrum-component-edge-to-visual-only-300:11px; --spectrum-component-edge-to-text-50:8px; --spectrum-component-edge-to-text-75:9px; --spectrum-component-edge-to-text-100:12px; @@ -3229,9 +3358,9 @@ --spectrum-component-edge-to-text-300:18px; --spectrum-component-top-to-workflow-icon-50:3px; --spectrum-component-top-to-workflow-icon-75:4px; - --spectrum-component-top-to-workflow-icon-100:7px; - --spectrum-component-top-to-workflow-icon-200:10px; - --spectrum-component-top-to-workflow-icon-300:13px; + --spectrum-component-top-to-workflow-icon-100:6px; + --spectrum-component-top-to-workflow-icon-200:9px; + --spectrum-component-top-to-workflow-icon-300:11px; --spectrum-component-top-to-text-50:3px; --spectrum-component-top-to-text-75:4px; --spectrum-component-top-to-text-100:6px; @@ -3286,16 +3415,13 @@ --spectrum-field-text-to-validation-icon-medium:12px; --spectrum-field-text-to-validation-icon-large:15px; --spectrum-field-text-to-validation-icon-extra-large:18px; - --spectrum-field-width:192px; + --spectrum-field-width:var(--spectrum-field-width-small); + --spectrum-field-width-small:192px; --spectrum-character-count-to-field-quiet-small:-3px; --spectrum-character-count-to-field-quiet-medium:-3px; --spectrum-character-count-to-field-quiet-large:-3px; --spectrum-character-count-to-field-quiet-extra-large:-4px; --spectrum-side-label-character-count-to-field:12px; - --spectrum-side-label-character-count-top-margin-small:4px; - --spectrum-side-label-character-count-top-margin-medium:8px; - --spectrum-side-label-character-count-top-margin-large:11px; - --spectrum-side-label-character-count-top-margin-extra-large:14px; --spectrum-disclosure-indicator-top-to-disclosure-icon-small:7px; --spectrum-disclosure-indicator-top-to-disclosure-icon-medium:11px; --spectrum-disclosure-indicator-top-to-disclosure-icon-large:14px; @@ -3305,6 +3431,13 @@ --spectrum-navigational-indicator-top-to-back-icon-large:12px; --spectrum-navigational-indicator-top-to-back-icon-extra-large:15px; --spectrum-color-control-track-width:24px; + --spectrum-corner-triangle-icon-size-75:5px; + --spectrum-corner-triangle-icon-size-100:5px; + --spectrum-corner-triangle-icon-size-200:6px; + --spectrum-corner-triangle-icon-size-300:7px; + --spectrum-field-width-medium:208px; + --spectrum-field-width-large:224px; + --spectrum-field-width-extra-large:240px; --spectrum-font-size-50:11px; --spectrum-font-size-75:12px; --spectrum-font-size-100:14px; @@ -3425,58 +3558,68 @@ --spectrum-ui-icon-medium-display:block; --spectrum-ui-icon-large-display:none; - --spectrum-checkbox-control-size-small:12px; - --spectrum-checkbox-control-size-medium:14px; - --spectrum-checkbox-control-size-large:16px; - --spectrum-checkbox-control-size-extra-large:18px; - --spectrum-checkbox-top-to-control-small:6px; - --spectrum-checkbox-top-to-control-medium:9px; - --spectrum-checkbox-top-to-control-large:12px; - --spectrum-checkbox-top-to-control-extra-large:15px; - --spectrum-switch-control-width-small:23px; - --spectrum-switch-control-width-medium:26px; - --spectrum-switch-control-width-large:29px; - --spectrum-switch-control-width-extra-large:33px; - --spectrum-switch-control-height-small:12px; - --spectrum-switch-control-height-medium:14px; - --spectrum-switch-control-height-large:16px; - --spectrum-switch-control-height-extra-large:18px; - --spectrum-switch-top-to-control-small:6px; - --spectrum-switch-top-to-control-medium:9px; - --spectrum-switch-top-to-control-large:12px; - --spectrum-switch-top-to-control-extra-large:15px; - --spectrum-radio-button-control-size-small:12px; - --spectrum-radio-button-control-size-medium:14px; - --spectrum-radio-button-control-size-large:16px; - --spectrum-radio-button-control-size-extra-large:18px; - --spectrum-radio-button-top-to-control-small:6px; - --spectrum-radio-button-top-to-control-medium:9px; - --spectrum-radio-button-top-to-control-large:12px; - --spectrum-radio-button-top-to-control-extra-large:15px; - --spectrum-slider-control-height-small:14px; - --spectrum-slider-control-height-medium:16px; - --spectrum-slider-control-height-large:18px; - --spectrum-slider-control-height-extra-large:20px; - --spectrum-slider-handle-size-small:14px; - --spectrum-slider-handle-size-medium:16px; - --spectrum-slider-handle-size-large:18px; - --spectrum-slider-handle-size-extra-large:20px; - --spectrum-slider-handle-border-width-down-small:5px; - --spectrum-slider-handle-border-width-down-medium:6px; - --spectrum-slider-handle-border-width-down-large:7px; - --spectrum-slider-handle-border-width-down-extra-large:8px; - --spectrum-slider-bottom-to-handle-small:5px; - --spectrum-slider-bottom-to-handle-medium:8px; - --spectrum-slider-bottom-to-handle-large:11px; - --spectrum-slider-bottom-to-handle-extra-large:14px; - --spectrum-corner-radius-100:4px; - --spectrum-corner-radius-200:8px; - --spectrum-drop-shadow-y:1px; - --spectrum-drop-shadow-blur:4px; } -.spectrum--express.spectrum--dark,.spectrum--express.spectrum--darkest{ +.spectrum--darkest{ + --spectrum-menu-item-background-color-default-rgb:255, 255, 255; + --spectrum-menu-item-background-color-default-opacity:0; + --spectrum-menu-item-background-color-default:rgba(var(--spectrum-menu-item-background-color-default-rgb), var(--spectrum-menu-item-background-color-default-opacity)); /* --spectrum-gray-900 */ + --spectrum-menu-item-background-color-hover:var(--spectrum-transparent-white-200); + --spectrum-menu-item-background-color-down:var(--spectrum-transparent-white-200); + --spectrum-menu-item-background-color-key-focus:var(--spectrum-transparent-white-200); + /* Drop Zone background color rgb */ - --spectrum-drop-zone-background-color-rgb:var(--spectrum-indigo-900-rgb); /* var(--spectrum-accent-color-900);*/ + --spectrum-drop-zone-background-color-rgb:var( --spectrum-blue-900-rgb); /* var(--spectrum-accent-color-900);*/ + + /* Drop Indicator color rgb */ + --spectrum-dropindicator-color:var(--spectrum-blue-700); + + --spectrum-calendar-day-background-color-selected:rgba(var(--spectrum-blue-800-rgb), 0.2); + --spectrum-calendar-day-background-color-hover:rgba(var(--spectrum-white-rgb), 0.08); + --spectrum-calendar-day-today-background-color-selected-hover:rgba(var(--spectrum-blue-800-rgb), 0.3); + --spectrum-calendar-day-background-color-selected-hover:rgba(var(--spectrum-blue-800-rgb), 0.3); + --spectrum-calendar-day-background-color-down:rgba(var(--spectrum-white-rgb), 0.15); + --spectrum-calendar-day-background-color-cap-selected:rgba(var(--spectrum-blue-800-rgb), 0.3); + --spectrum-calendar-day-background-color-key-focus:rgba(var(--spectrum-white-rgb), 0.08); + --spectrum-calendar-day-border-color-key-focus:var(--spectrum-blue-700); + + --spectrum-badge-label-icon-color-primary:var(--spectrum-black); + + --spectrum-coach-indicator-ring-default-color:var(--spectrum-blue-700); + --spectrum-coach-indicator-ring-dark-color:var(--spectrum-gray-900); + --spectrum-coach-indicator-ring-light-color:var(--spectrum-gray-50); + + --spectrum-well-border-color:rgba(var(--spectrum-white-rgb), 0.05); + + --spectrum-steplist-current-marker-color-key-focus:var(--spectrum-blue-700); + + --spectrum-treeview-item-background-color-quiet-selected:rgba(var(--spectrum-gray-900-rgb), 0.08); + --spectrum-treeview-item-background-color-selected:rgba(var(--spectrum-blue-800-rgb), 0.2); + + --spectrum-logic-button-and-background-color:var(--spectrum-blue-800); + --spectrum-logic-button-and-border-color:var(--spectrum-blue-800); + --spectrum-logic-button-and-background-color-hover:var(--spectrum-blue-1000); + --spectrum-logic-button-and-border-color-hover:var(--spectrum-blue-1000); + + --spectrum-logic-button-or-background-color:var(--spectrum-magenta-700); + --spectrum-logic-button-or-border-color:var(--spectrum-magenta-700); + --spectrum-logic-button-or-background-color-hover:var(--spectrum-magenta-900); + --spectrum-logic-button-or-border-color-hover:var(--spectrum-magenta-900); + + --spectrum-assetcard-border-color-selected:var(--spectrum-blue-800); + --spectrum-assetcard-border-color-selected-hover:var(--spectrum-blue-800); + --spectrum-assetcard-border-color-selected-down:var(--spectrum-blue-900); + --spectrum-assetcard-selectionindicator-background-color-ordered:var(--spectrum-blue-800); + --spectrum-assestcard-focus-indicator-color:var(--spectrum-blue-700); + + --spectrum-assetlist-item-background-color-selected-hover:rgba(var(--spectrum-blue-800-rgb), 0.3); + --spectrum-assetlist-item-background-color-selected:rgba(var(--spectrum-blue-800-rgb), 0.2); + --spectrum-assetlist-border-color-key-focus:var(--spectrum-blue-700); +} +.spectrum--express.spectrum--dark{ + /* Drop Zone background color rgb */ /* var(--spectrum-accent-color-900);*/ +} +.spectrum--express.spectrum--dark,.spectrum--express.spectrum--darkest{ + --spectrum-drop-zone-background-color-rgb:var(--spectrum-indigo-900-rgb); --spectrum-well-border-color:rgba(var(--spectrum-white-rgb), 0.05); @@ -3485,6 +3628,9 @@ --spectrum-assetcard-border-color-selected-down:var(--spectrum-indigo-800); --spectrum-assetcard-selectionindicator-background-color-ordered:var(--spectrum-indigo-700); } +.spectrum--express.spectrum--darkest{ + /* Drop Zone background color rgb */ /* var(--spectrum-accent-color-900);*/ +} .spectrum--express.spectrum--large{ --spectrum-colorwheel-path:"M 118 118 m -118 0 a 118 118 0 1 0 236 0 a 118 118 0 1 0 -236 0.2 M 118 118 m -92 0 a 92 92 0 1 0 184 0 a 92 92 0 1 0 -184 0"; --spectrum-colorwheel-path-borders:"M 120 120 m -120 0 a 120 120 0 1 0 240 0 a 120 120 0 1 0 -240 0.2 M 120 120 m -90 0 a 90 90 0 1 0 180 0 a 90 90 0 1 0 -180 0"; @@ -3494,56 +3640,6 @@ --spectrum-dial-border-radius:15px; --spectrum-assetcard-focus-ring-border-radius:12px; - --spectrum-checkbox-control-size-small:18px; - --spectrum-checkbox-control-size-medium:20px; - --spectrum-checkbox-control-size-large:22px; - --spectrum-checkbox-control-size-extra-large:26px; - --spectrum-checkbox-top-to-control-small:6px; - --spectrum-checkbox-top-to-control-medium:10px; - --spectrum-checkbox-top-to-control-large:14px; - --spectrum-checkbox-top-to-control-extra-large:17px; - --spectrum-switch-control-width-small:32px; - --spectrum-switch-control-width-medium:36px; - --spectrum-switch-control-width-large:41px; - --spectrum-switch-control-width-extra-large:46px; - --spectrum-switch-control-height-small:18px; - --spectrum-switch-control-height-medium:20px; - --spectrum-switch-control-height-large:22px; - --spectrum-switch-control-height-extra-large:26px; - --spectrum-switch-top-to-control-small:6px; - --spectrum-switch-top-to-control-medium:10px; - --spectrum-switch-top-to-control-large:14px; - --spectrum-switch-top-to-control-extra-large:17px; - --spectrum-radio-button-control-size-small:18px; - --spectrum-radio-button-control-size-medium:20px; - --spectrum-radio-button-control-size-large:22px; - --spectrum-radio-button-control-size-extra-large:26px; - --spectrum-radio-button-top-to-control-small:6px; - --spectrum-radio-button-top-to-control-medium:10px; - --spectrum-radio-button-top-to-control-large:14px; - --spectrum-radio-button-top-to-control-extra-large:17px; - --spectrum-slider-control-height-small:22px; - --spectrum-slider-control-height-medium:24px; - --spectrum-slider-control-height-large:28px; - --spectrum-slider-control-height-extra-large:30px; - --spectrum-slider-handle-size-small:22px; - --spectrum-slider-handle-size-medium:24px; - --spectrum-slider-handle-size-large:28px; - --spectrum-slider-handle-size-extra-large:30px; - --spectrum-slider-handle-border-width-down-small:var(--spectrum-border-width-200); - --spectrum-slider-handle-border-width-down-medium:var(--spectrum-border-width-200); - --spectrum-slider-handle-border-width-down-large:var(--spectrum-border-width-200); - --spectrum-slider-handle-border-width-down-extra-large:var(--spectrum-border-width-200); - --spectrum-slider-bottom-to-handle-small:4px; - --spectrum-slider-bottom-to-handle-medium:8px; - --spectrum-slider-bottom-to-handle-large:12px; - --spectrum-slider-bottom-to-handle-extra-large:15px; - --spectrum-corner-radius-75:4px; - --spectrum-corner-radius-100:8px; - --spectrum-corner-radius-200:16px; - --spectrum-drop-shadow-x:0px; - --spectrum-drop-shadow-y:4px; - --spectrum-drop-shadow-blur:16px; } .spectrum--express.spectrum--light, .spectrum--express.spectrum--lightest{ @@ -3566,94 +3662,7 @@ --spectrum-dial-border-radius:12px; --spectrum-assetcard-focus-ring-border-radius:10px; - --spectrum-checkbox-control-size-small:14px; - --spectrum-checkbox-control-size-medium:16px; - --spectrum-checkbox-control-size-large:18px; - --spectrum-checkbox-control-size-extra-large:20px; - --spectrum-checkbox-top-to-control-small:5px; - --spectrum-checkbox-top-to-control-medium:8px; - --spectrum-checkbox-top-to-control-large:11px; - --spectrum-checkbox-top-to-control-extra-large:14px; - --spectrum-switch-control-width-small:25px; - --spectrum-switch-control-width-medium:28px; - --spectrum-switch-control-width-large:32px; - --spectrum-switch-control-width-extra-large:35px; - --spectrum-switch-control-height-small:14px; - --spectrum-switch-control-height-medium:16px; - --spectrum-switch-control-height-large:18px; - --spectrum-switch-control-height-extra-large:20px; - --spectrum-switch-top-to-control-small:5px; - --spectrum-switch-top-to-control-medium:8px; - --spectrum-switch-top-to-control-large:11px; - --spectrum-switch-top-to-control-extra-large:14px; - --spectrum-radio-button-control-size-small:14px; - --spectrum-radio-button-control-size-medium:16px; - --spectrum-radio-button-control-size-large:18px; - --spectrum-radio-button-control-size-extra-large:20px; - --spectrum-radio-button-top-to-control-small:5px; - --spectrum-radio-button-top-to-control-medium:8px; - --spectrum-radio-button-top-to-control-large:11px; - --spectrum-radio-button-top-to-control-extra-large:14px; - --spectrum-slider-control-height-small:18px; - --spectrum-slider-control-height-medium:20px; - --spectrum-slider-control-height-large:22px; - --spectrum-slider-control-height-extra-large:24px; - --spectrum-slider-handle-size-small:18px; - --spectrum-slider-handle-size-medium:20px; - --spectrum-slider-handle-size-large:22px; - --spectrum-slider-handle-size-extra-large:24px; - --spectrum-slider-handle-border-width-down-small:var(--spectrum-border-width-200); - --spectrum-slider-handle-border-width-down-medium:var(--spectrum-border-width-200); - --spectrum-slider-handle-border-width-down-large:var(--spectrum-border-width-200); - --spectrum-slider-handle-border-width-down-extra-large:var(--spectrum-border-width-200); - --spectrum-slider-bottom-to-handle-small:3px; - --spectrum-slider-bottom-to-handle-medium:6px; - --spectrum-slider-bottom-to-handle-large:9px; - --spectrum-slider-bottom-to-handle-extra-large:12px; - --spectrum-corner-radius-75:3px; - --spectrum-corner-radius-100:6px; - --spectrum-corner-radius-200:12px; - --spectrum-drop-shadow-x:0px; - --spectrum-drop-shadow-y:4px; - --spectrum-drop-shadow-blur:16px; } .spectrum--express{ --system:express; - --spectrum-neutral-background-color-selected-default:var(--spectrum-gray-800); - --spectrum-neutral-background-color-selected-hover:var(--spectrum-gray-900); - --spectrum-neutral-background-color-selected-down:var(--spectrum-gray-900); - --spectrum-neutral-background-color-selected-key-focus:var(--spectrum-gray-900); - --spectrum-slider-track-thickness:4px; - --spectrum-slider-handle-gap:0px; - --spectrum-picker-border-width:0; - --spectrum-in-field-button-fill-stacked-inner-border-rounding:1px; - --spectrum-in-field-button-edge-to-fill:4px; - --spectrum-in-field-button-stacked-inner-edge-to-fill:1px; - --spectrum-in-field-button-outer-edge-to-disclosure-icon-stacked-medium:5px; - --spectrum-in-field-button-outer-edge-to-disclosure-icon-stacked-large:7px; - --spectrum-in-field-button-outer-edge-to-disclosure-icon-stacked-extra-large:8px; - --spectrum-in-field-button-inner-edge-to-disclosure-icon-stacked-small:1px; - --spectrum-in-field-button-inner-edge-to-disclosure-icon-stacked-medium:1px; - --spectrum-in-field-button-inner-edge-to-disclosure-icon-stacked-large:3px; - --spectrum-in-field-button-inner-edge-to-disclosure-icon-stacked-extra-large:4px; - --spectrum-border-width-100:2px; - --spectrum-accent-color-100:var(--spectrum-indigo-100); - --spectrum-accent-color-200:var(--spectrum-indigo-200); - --spectrum-accent-color-300:var(--spectrum-indigo-300); - --spectrum-accent-color-400:var(--spectrum-indigo-400); - --spectrum-accent-color-500:var(--spectrum-indigo-500); - --spectrum-accent-color-600:var(--spectrum-indigo-600); - --spectrum-accent-color-700:var(--spectrum-indigo-700); - --spectrum-accent-color-800:var(--spectrum-indigo-800); - --spectrum-accent-color-900:var(--spectrum-indigo-900); - --spectrum-accent-color-1000:var(--spectrum-indigo-1000); - --spectrum-accent-color-1100:var(--spectrum-indigo-1100); - --spectrum-accent-color-1200:var(--spectrum-indigo-1200); - --spectrum-accent-color-1300:var(--spectrum-indigo-1300); - --spectrum-accent-color-1400:var(--spectrum-indigo-1400); - --spectrum-heading-sans-serif-font-weight:var(--spectrum-black-font-weight); - --spectrum-heading-serif-font-weight:var(--spectrum-black-font-weight); - --spectrum-heading-cjk-font-weight:var(--spectrum-black-font-weight); - --spectrum-heading-sans-serif-emphasized-font-weight:var(--spectrum-black-font-weight); - --spectrum-heading-serif-emphasized-font-weight:var(--spectrum-black-font-weight); } diff --git a/tokens/package.json b/tokens/package.json index c67583fefeb..d033df56aed 100644 --- a/tokens/package.json +++ b/tokens/package.json @@ -1,6 +1,6 @@ { "name": "@spectrum-css/tokens", - "version": "13.2.0", + "version": "14.0.0-next.3", "description": "The Spectrum CSS tokens package", "license": "Apache-2.0", "author": "Adobe", @@ -15,7 +15,7 @@ }, "main": "dist/index.css", "devDependencies": { - "@adobe/spectrum-tokens": "12.24.0", + "@adobe/spectrum-tokens": "13.0.0-beta.21", "@nxkit/style-dictionary": "^4.0.0", "postcss": "^8.4.35", "postcss-cli": "^11.0.0", diff --git a/yarn.lock b/yarn.lock index 5979106423f..88b044c12bb 100644 --- a/yarn.lock +++ b/yarn.lock @@ -91,10 +91,10 @@ resolved "https://registry.yarnpkg.com/@adobe/spectrum-css-workflow-icons/-/spectrum-css-workflow-icons-1.5.4.tgz#0e09ff519c36139176c3ba3ce617a995c9032f67" integrity sha512-sZ19YOLGw5xTZzCEkVXPjf53lXVzo063KmDTJjpSjy/XLVsF+RaX0b436SfSM4hsIUZ7n27+UsbOvzFaFjcYXw== -"@adobe/spectrum-tokens@12.24.0": - version "12.24.0" - resolved "https://registry.yarnpkg.com/@adobe/spectrum-tokens/-/spectrum-tokens-12.24.0.tgz#0056d4fc8aaae3871177a2d3d02900bee6c43d70" - integrity sha512-I4M5RAOaeetAFd4W7JFc607bBItndKNqBVXMj55t5T/qRhsOg/j/b5gd2sVsEH2pFrexgBfPxLBLUP9EKFgm8A== +"@adobe/spectrum-tokens@13.0.0-beta.21": + version "13.0.0-beta.21" + resolved "https://registry.yarnpkg.com/@adobe/spectrum-tokens/-/spectrum-tokens-13.0.0-beta.21.tgz#e006e302daaada5fcfb6f3a428e31f754a51ec78" + integrity sha512-QY5AYLdpbrpdx50uZWFxFIpTgHUgMUbWDaDvXZRRoyFqRTjPhVbLoY/IU7eUymv+RouZLwOXnvqkoT7c70K2kA== "@ampproject/remapping@^2.2.0": version "2.2.1" @@ -3246,6 +3246,11 @@ resolved "https://registry.yarnpkg.com/@spectrum-css/splitbutton/-/splitbutton-8.1.2.tgz#149d9e98094cd035f6f348f8cf50d72ce8f17f19" integrity sha512-hUsqhEhgm8PfKvwKPSACPU+Jqt0NaovD53gOp9QRa4jU9G3q8RpE5uJbs+pGZ9vyI6ocsm5lbs0zYtA082axzQ== +"@spectrum-css/tokens@^13.0.8": + version "13.2.0" + resolved "https://registry.yarnpkg.com/@spectrum-css/tokens/-/tokens-13.2.0.tgz#db41a16ae5554b9cdef591aba0df6ad7f75e74da" + integrity sha512-w1JJbbYkIeQjvsogOO1rdePuikmLaOs69+bBBL80Nb3deZUssrZE9cWOrLTv1iNzditKtn4pgrtdVXv3+Wp6SA== + "@storybook/addon-a11y@^7.6.17": version "7.6.17" resolved "https://registry.yarnpkg.com/@storybook/addon-a11y/-/addon-a11y-7.6.17.tgz#77209c23b6908d52dc470a3318d76a0ffe9d47cb"