diff --git a/.changeset/great-cows-cheat.md b/.changeset/great-cows-cheat.md new file mode 100644 index 00000000000..b6c0c8ba1c3 --- /dev/null +++ b/.changeset/great-cows-cheat.md @@ -0,0 +1,7 @@ +--- +"@spectrum-css/helptext": major +--- + +feat(helptext): s2 migration + +Help text now uses Spectrum 2 tokens and specifications. This includes updates to heights and spacing, icons and icon sizes, colors, and fonts. diff --git a/.changeset/nine-kings-repair.md b/.changeset/nine-kings-repair.md new file mode 100644 index 00000000000..0714bbb8274 --- /dev/null +++ b/.changeset/nine-kings-repair.md @@ -0,0 +1,15 @@ +--- +"@spectrum-css/button": major +--- + +#### Spectrum 2 migration +Button now uses Spectrum 2 tokens and specifications, which includes many color changes to all variants. A few other notable changes: +- Outline buttons are no longer available in accent and negative options — use the filled variant instead. +- Medium size is now the default. The class `.spectrum-Button--sizeM` is now unnecessary for this size, and has been removed. +- The `.spectrum-Button--fill` class is no longer needed and has been removed. + +The following `--mod` custom properties have been renamed: +- `--mod-line-height-100` has been renamed to `--mod-button-line-height` +- `--mod-sans-font-family-stack` has been renamed to `--mod-button-font-family` +- `--mod-animation-duration-100` has been renamed to `--mod-button-animation-duration` +- `--mod-bold-font-weight` has been renamed to `--mod-button-font-weight` diff --git a/.changeset/perfect-dogs-smash.md b/.changeset/perfect-dogs-smash.md new file mode 100644 index 00000000000..11a91efdd47 --- /dev/null +++ b/.changeset/perfect-dogs-smash.md @@ -0,0 +1,5 @@ +--- +"@spectrum-css/button": patch +--- + +chore: run branch through formatter diff --git a/.changeset/pre.json b/.changeset/pre.json new file mode 100644 index 00000000000..ff9746a861f --- /dev/null +++ b/.changeset/pre.json @@ -0,0 +1,107 @@ +{ + "mode": "pre", + "tag": "next", + "initialVersions": { + "@spectrum-tools/gh-action-file-diff": "2.0.5", + "@spectrum-css/preview": "8.1.0-next.1", + "@spectrum-css/accordion": "4.2.7-next.2", + "@spectrum-css/actionbar": "7.2.5-next.2", + "@spectrum-css/actionbutton": "5.2.7-next.2", + "@spectrum-css/actiongroup": "5.0.0-next.3", + "@spectrum-css/actionmenu": "5.1.4-next.2", + "@spectrum-css/alertbanner": "1.1.42-next.2", + "@spectrum-css/alertdialog": "1.2.5-next.2", + "@spectrum-css/asset": "4.0.1-next.2", + "@spectrum-css/assetcard": "3.1.5-next.2", + "@spectrum-css/assetlist": "5.2.5-next.2", + "@spectrum-css/avatar": "6.1.6-next.2", + "@spectrum-css/badge": "3.2.6-next.2", + "@spectrum-css/breadcrumb": "8.2.6-next.2", + "@spectrum-css/button": "14.0.0-next.4", + "@spectrum-css/buttongroup": "7.0.0-next.3", + "@spectrum-css/calendar": "4.2.6-next.2", + "@spectrum-css/card": "7.0.3-next.2", + "@spectrum-css/checkbox": "14.0.0-next.4", + "@spectrum-css/clearbutton": "5.1.5-next.2", + "@spectrum-css/closebutton": "5.0.0-next.2", + "@spectrum-css/coachindicator": "1.1.6-next.2", + "@spectrum-css/coachmark": "6.1.6-next.2", + "@spectrum-css/colorarea": "4.1.6-next.2", + "@spectrum-css/colorhandle": "7.1.5-next.2", + "@spectrum-css/colorloupe": "4.2.5-next.2", + "@spectrum-css/colorslider": "5.1.6-next.2", + "@spectrum-css/colorwheel": "3.1.6-next.2", + "@spectrum-css/combobox": "2.1.7-next.2", + "@spectrum-css/commons": "9.1.4-next.1", + "@spectrum-css/contextualhelp": "2.1.6-next.2", + "@spectrum-css/datepicker": "2.1.5-next.2", + "@spectrum-css/dial": "2.2.5-next.2", + "@spectrum-css/dialog": "9.2.5-next.2", + "@spectrum-css/divider": "2.2.6-next.2", + "@spectrum-css/dropindicator": "4.1.5-next.2", + "@spectrum-css/dropzone": "5.2.6-next.2", + "@spectrum-css/fieldgroup": "4.2.5-next.2", + "@spectrum-css/fieldlabel": "8.0.0-next.2", + "@spectrum-css/floatingactionbutton": "1.2.6-next.2", + "@spectrum-css/helptext": "4.1.6-next.2", + "@spectrum-css/icon": "6.0.6-next.2", + "@spectrum-css/illustratedmessage": "6.1.6-next.2", + "@spectrum-css/infieldbutton": "4.2.5-next.2", + "@spectrum-css/inlinealert": "7.1.7-next.2", + "@spectrum-css/link": "4.2.6-next.2", + "@spectrum-css/logicbutton": "3.3.5-next.2", + "@spectrum-css/menu": "6.1.6-next.2", + "@spectrum-css/miller": "5.1.5-next.2", + "@spectrum-css/modal": "4.2.7-next.2", + "@spectrum-css/opacitycheckerboard": "1.1.6-next.2", + "@spectrum-css/page": "7.1.5-next.2", + "@spectrum-css/pagination": "7.1.7-next.2", + "@spectrum-css/picker": "7.2.8-next.2", + "@spectrum-css/pickerbutton": "4.1.6-next.2", + "@spectrum-css/popover": "6.2.6-next.2", + "@spectrum-css/progressbar": "3.1.6-next.2", + "@spectrum-css/progresscircle": "2.2.4-next.2", + "@spectrum-css/radio": "8.1.6-next.2", + "@spectrum-css/rating": "4.2.5-next.2", + "@spectrum-css/search": "6.2.5-next.2", + "@spectrum-css/sidenav": "4.2.5-next.2", + "@spectrum-css/site": "4.2.5-next.2", + "@spectrum-css/slider": "4.3.6-next.2", + "@spectrum-css/splitview": "4.2.5-next.2", + "@spectrum-css/statuslight": "6.1.7-next.2", + "@spectrum-css/steplist": "4.1.5-next.2", + "@spectrum-css/stepper": "5.1.6-next.2", + "@spectrum-css/swatch": "5.1.6-next.2", + "@spectrum-css/swatchgroup": "2.1.6-next.2", + "@spectrum-css/switch": "4.2.6-next.2", + "@spectrum-css/table": "5.2.6-next.2", + "@spectrum-css/tabs": "4.1.5-next.2", + "@spectrum-css/tag": "8.1.6-next.2", + "@spectrum-css/taggroup": "4.1.6-next.2", + "@spectrum-css/textfield": "6.1.7-next.2", + "@spectrum-css/thumbnail": "5.2.5-next.2", + "@spectrum-css/toast": "9.1.26-next.2", + "@spectrum-css/tooltip": "5.3.6-next.2", + "@spectrum-css/tray": "2.2.8-next.2", + "@spectrum-css/treeview": "9.2.7-next.2", + "@spectrum-css/typography": "5.1.6-next.2", + "@spectrum-css/underlay": "3.2.5-next.2", + "@spectrum-css/well": "4.1.5-next.2", + "@spectrum-css/generator": "3.0.0", + "conventional-changelog-spectrum": "1.0.2", + "postcss-combininator": "2.0.0", + "postcss-custom-properties-mapping": "2.0.0", + "postcss-splitinator": "2.0.0", + "@spectrum-tools/stylelint-no-missing-var": "1.3.1", + "@spectrum-tools/stylelint-no-unknown-custom-properties": "1.3.2", + "@spectrum-tools/stylelint-no-unused-custom-properties": "1.3.1", + "@spectrum-tools/documentation": "1.0.0", + "@spectrum-css/tokens": "14.0.0-next.6", + "@spectrum-css/ui-icons": "1.1.2" + }, + "changesets": [ + "nine-kings-repair", + "perfect-dogs-smash", + "pretty-parents-drum" + ] +} diff --git a/.changeset/pretty-parents-drum.md b/.changeset/pretty-parents-drum.md new file mode 100644 index 00000000000..1ff4c501e45 --- /dev/null +++ b/.changeset/pretty-parents-drum.md @@ -0,0 +1,5 @@ +--- +"@spectrum-css/tokens": patch +--- + +use spectrum-tokens@13.0.0-beta.30 diff --git a/.storybook/CHANGELOG.md b/.storybook/CHANGELOG.md index 59ef90235d9..97e89c8854f 100644 --- a/.storybook/CHANGELOG.md +++ b/.storybook/CHANGELOG.md @@ -86,7 +86,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/assets/base.css b/.storybook/assets/base.css index 1ffc8c47d93..2f123142985 100644 --- a/.storybook/assets/base.css +++ b/.storybook/assets/base.css @@ -22,6 +22,13 @@ body { } .spectrum { + /* ---- Storybook only custom properties ---- */ + /* Gradient that changes with the color theme. */ + --spectrum-examples-gradient: linear-gradient(45deg, var(--spectrum-magenta-1500), var(--spectrum-blue-1500)); + /* Gradients that do not change with the color theme, for use in static color backgrounds. */ + --spectrum-examples-gradient-static-black: linear-gradient(45deg, rgb(255, 241, 246), rgb(238, 245, 255)); + --spectrum-examples-gradient-static-white: linear-gradient(45deg, rgb(64, 0, 22), rgb(14, 24, 67)); + background-color: var(--spectrum-background-layer-1-color); /* @todo: add back the text color and update VRTs */ @@ -29,6 +36,14 @@ body { -webkit-tap-highlight-color: rgba(0, 0, 0, 0%); } +.spectrum .spectrum-examples-static-black { + background: var(--spectrum-examples-gradient-static-black); +} + +.spectrum .spectrum-examples-static-white { + background: var(--spectrum-examples-gradient-static-white) +} + /* Hide the SVG elements that only include references */ svg:has(symbol):not(:has(use)) { display: none; diff --git a/.storybook/decorators/contextsWrapper.js b/.storybook/decorators/contextsWrapper.js index cea100fd699..a6361a1f66f 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; @@ -27,11 +27,17 @@ export const withContextWrapper = makeDecorator({ /** @type string */ const scale = args.scale ? args.scale : getDefaultValue(argTypes.scale) ?? "medium"; - const colors = ["light", "dark", "darkest"]; + const colors = ["light", "dark"]; 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); @@ -44,12 +50,15 @@ export const withContextWrapper = makeDecorator({ container.classList.toggle(`spectrum--${s}`, s === scale); } + // Change background color when demonstrating static color options. if (args.staticColor === "black") { - container.style.backgroundColor = "rgb(181, 209, 211)"; - } else if (args.staticColor === "white") { - container.style.backgroundColor = "rgb(15, 121, 125)"; - } else { - container.style.removeProperty("background-color"); + container.style.background = "var(--spectrum-examples-gradient-static-black)"; + } + else if (args.staticColor === "white") { + container.style.background = "var(--spectrum-examples-gradient-static-white)"; + } + else { + container.style.removeProperty("background"); } }, [color, scale, isExpress, args.staticColor]); diff --git a/.storybook/decorators/index.js b/.storybook/decorators/index.js index 9ca62537dc3..6fa9a859f73 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..d6e748a3330 100644 --- a/.storybook/main.js +++ b/.storybook/main.js @@ -10,8 +10,11 @@ const componentPkgs = readdirSync(componentsPath, { module.exports = { stories: [ + "../components/*/stories/*.mdx", "../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..791ceaca79f 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') && ['foundation','is-hidden-story'].every((tag) => !item.tags.includes(tag)), } }, }); diff --git a/.storybook/package.json b/.storybook/package.json index 320503f4457..3217b65e58c 100644 --- a/.storybook/package.json +++ b/.storybook/package.json @@ -11,7 +11,7 @@ }, "dependencies": { "@adobe/spectrum-css-workflow-icons": "^1.5.4", - "@spectrum-css/tokens": "^14.0.0", + "@spectrum-css/tokens": "^14.0.0-next.7", "@spectrum-css/ui-icons": "^1.1.2" }, "devDependencies": { @@ -50,5 +50,12 @@ "storybook": "^8.0.9", "style-loader": "4.0.0", "webpack": "^5.91.0" - } + }, + "keywords": [ + "adobe", + "css", + "design system", + "spectrum", + "storybook" + ] } diff --git a/.storybook/preview.js b/.storybook/preview.js index 5578d8c2b73..0440bda910f 100644 --- a/.storybook/preview.js +++ b/.storybook/preview.js @@ -1,13 +1,13 @@ -import DocumentationTemplate from './DocumentationTemplate.mdx'; +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 @@ -81,17 +81,16 @@ export const argTypes = { description: "Controls the color context of the component.", type: { required: true }, table: { - type: { summary: "light | dark | darkest" }, + type: { summary: "light | dark" }, defaultValue: { summary: "light" }, category: "Global", }, - options: ["light", "dark", "darkest"], + options: ["light", "dark"], control: { type: "select", labels: { light: "Light (default)", dark: "Dark", - darkest: "Darkest", }, }, }, @@ -187,11 +186,11 @@ export const parameters = { panelPosition: "bottom", showToolbar: true, isFullscreen: false, - actions: { argTypesRegex: '^on.*' }, + actions: { argTypesRegex: "^on.*" }, 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/README.md b/components/README.md index 66c02f39375..8fe781ba601 100644 --- a/components/README.md +++ b/components/README.md @@ -57,7 +57,7 @@ For example, `actionbar` gets its tokens from `vars`, and requires `button`, `ch "@spectrum-css/checkbox": ">=8", "@spectrum-css/icon": ">=6", "@spectrum-css/popover": ">=6", - "@spectrum-css/tokens": ">=13" + "@spectrum-css/tokens": ">=14.0.0-next.3" } } ``` diff --git a/components/accordion/index.css b/components/accordion/index.css index 643a33ed5dc..4ff270c953f 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 7ae121ed5ce..5a7712d4525 100644 --- a/components/accordion/package.json +++ b/components/accordion/package.json @@ -1,37 +1,35 @@ { - "name": "@spectrum-css/accordion", - "version": "5.0.0", - "description": "The Spectrum CSS accordion component", - "license": "Apache-2.0", - "author": "Adobe", - "homepage": "https://opensource.adobe.com/spectrum-css/accordion", - "repository": { - "type": "git", - "url": "https://github.com/adobe/spectrum-css.git", - "directory": "components/accordion" - }, - "bugs": { - "url": "https://github.com/adobe/spectrum-css/issues" - }, - "main": "dist/index.css", - "files": [ - "dist/*", - "CHANGELOG.md", - "package.json", - "stories/template.js", - "metadata/mods.md" - ], - "peerDependencies": { - "@spectrum-css/icon": ">=4", - "@spectrum-css/tokens": ">=13" - }, - "keywords": [ - "spectrum", - "css", - "design system", - "adobe" - ], - "publishConfig": { - "access": "public" - } + "name": "@spectrum-css/accordion", + "version": "5.0.0", + "description": "The Spectrum CSS accordion component", + "license": "Apache-2.0", + "author": "Adobe", + "homepage": "https://opensource.adobe.com/spectrum-css/accordion", + "repository": { + "type": "git", + "url": "https://github.com/adobe/spectrum-css.git", + "directory": "components/accordion" + }, + "bugs": { + "url": "https://github.com/adobe/spectrum-css/issues" + }, + "main": "dist/index.css", + "files": [ + "dist/*", + "metadata/mods.md", + "stories/template.js" + ], + "peerDependencies": { + "@spectrum-css/icon": ">=4", + "@spectrum-css/tokens": ">=14.0.0-next.3" + }, + "keywords": [ + "adobe", + "css", + "design system", + "spectrum" + ], + "publishConfig": { + "access": "public" + } } diff --git a/components/actionbar/index.css b/components/actionbar/index.css index 0c306f02923..bbe279eb0a4 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 e42a4eeda40..702b7b89b22 100644 --- a/components/actionbar/package.json +++ b/components/actionbar/package.json @@ -1,40 +1,38 @@ { - "name": "@spectrum-css/actionbar", - "version": "8.0.0", - "description": "The Spectrum CSS actionbar component", - "license": "Apache-2.0", - "author": "Adobe", - "homepage": "https://opensource.adobe.com/spectrum-css/actionbar", - "repository": { - "type": "git", - "url": "https://github.com/adobe/spectrum-css.git", - "directory": "components/actionbar" - }, - "bugs": { - "url": "https://github.com/adobe/spectrum-css/issues" - }, - "main": "dist/index.css", - "files": [ - "dist/*", - "CHANGELOG.md", - "package.json", - "stories/template.js", - "metadata/mods.md" - ], - "peerDependencies": { - "@spectrum-css/actiongroup": ">=4", - "@spectrum-css/closebutton": ">=4", - "@spectrum-css/fieldlabel": ">=7", - "@spectrum-css/popover": ">=6", - "@spectrum-css/tokens": ">=13" - }, - "keywords": [ - "spectrum", - "css", - "design system", - "adobe" - ], - "publishConfig": { - "access": "public" - } + "name": "@spectrum-css/actionbar", + "version": "8.0.0", + "description": "The Spectrum CSS actionbar component", + "license": "Apache-2.0", + "author": "Adobe", + "homepage": "https://opensource.adobe.com/spectrum-css/actionbar", + "repository": { + "type": "git", + "url": "https://github.com/adobe/spectrum-css.git", + "directory": "components/actionbar" + }, + "bugs": { + "url": "https://github.com/adobe/spectrum-css/issues" + }, + "main": "dist/index.css", + "files": [ + "dist/*", + "metadata/mods.md", + "stories/template.js" + ], + "peerDependencies": { + "@spectrum-css/actiongroup": ">=4", + "@spectrum-css/closebutton": ">=4", + "@spectrum-css/fieldlabel": ">=7", + "@spectrum-css/popover": ">=6", + "@spectrum-css/tokens": ">=14.0.0-next.3" + }, + "keywords": [ + "adobe", + "css", + "design system", + "spectrum" + ], + "publishConfig": { + "access": "public" + } } diff --git a/components/actionbutton/index.css b/components/actionbutton/index.css index f833caed867..c1131df5d88 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); @@ -38,10 +38,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)); @@ -58,6 +58,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); @@ -71,6 +73,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); @@ -84,6 +88,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); @@ -97,6 +103,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); @@ -110,6 +118,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..cb55c9cdb44 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 + ### 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/package.json b/components/actionbutton/package.json index 78cbf3180b6..6bc58520486 100644 --- a/components/actionbutton/package.json +++ b/components/actionbutton/package.json @@ -1,45 +1,43 @@ { - "name": "@spectrum-css/actionbutton", - "version": "6.0.0", - "description": "The Spectrum CSS action button component", - "license": "Apache-2.0", - "author": "Adobe", - "homepage": "https://opensource.adobe.com/spectrum-css/actionbutton", - "repository": { - "type": "git", - "url": "https://github.com/adobe/spectrum-css.git", - "directory": "components/actionbutton" - }, - "bugs": { - "url": "https://github.com/adobe/spectrum-css/issues" - }, - "main": "dist/index.css", - "files": [ - "dist/*", - "CHANGELOG.md", - "package.json", - "stories/template.js", - "metadata/mods.md" - ], - "peerDependencies": { - "@spectrum-css/icon": ">=4", - "@spectrum-css/tokens": ">=13" - }, - "peerDependenciesMeta": { - "@spectrum-css/icon": { - "optional": true - } - }, - "devDependencies": { - "@spectrum-css/commons": "^10.0.0" - }, - "keywords": [ - "spectrum", - "css", - "design system", - "adobe" - ], - "publishConfig": { - "access": "public" - } + "name": "@spectrum-css/actionbutton", + "version": "6.0.0", + "description": "The Spectrum CSS action button component", + "license": "Apache-2.0", + "author": "Adobe", + "homepage": "https://opensource.adobe.com/spectrum-css/actionbutton", + "repository": { + "type": "git", + "url": "https://github.com/adobe/spectrum-css.git", + "directory": "components/actionbutton" + }, + "bugs": { + "url": "https://github.com/adobe/spectrum-css/issues" + }, + "main": "dist/index.css", + "files": [ + "dist/*", + "metadata/mods.md", + "stories/template.js" + ], + "peerDependencies": { + "@spectrum-css/icon": ">=4", + "@spectrum-css/tokens": ">=14.0.0-next.3" + }, + "peerDependenciesMeta": { + "@spectrum-css/icon": { + "optional": true + } + }, + "devDependencies": { + "@spectrum-css/commons": "^10.0.0" + }, + "keywords": [ + "adobe", + "css", + "design system", + "spectrum" + ], + "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 24dd3ddd1be..8fedace7a32 100644 --- a/components/actiongroup/CHANGELOG.md +++ b/components/actiongroup/CHANGELOG.md @@ -8,15 +8,17 @@ See [Conventional Commits](https://conventionalcommits.org) for commit guideline 🗓 2024-04-18 • 📝 [Commits](https://github.com/adobe/spectrum-css/compare/@spectrum-css/actiongroup@4.2.5...@spectrum-css/actiongroup@5.0.0) -\*feat!: postcss config build and script; remove gulp (#2466)([b0f337b](https://github.com/adobe/spectrum-css/commit/b0f337b)), closes[#2466](https://github.com/adobe/spectrum-css/issues/2466) +- feat!: postcss config build and script; remove gulp (#2466)([b0f337b](https://github.com/adobe/spectrum-css/commit/b0f337b)), closes[#2466](https://github.com/adobe/spectrum-css/issues/2466) - ### - 🛑 BREAKING CHANGES + ### - * - - Removes component-builder & component-builder-simple for script leveraging postcss + 🛑 BREAKING CHANGES + + - + + * Removes component-builder & component-builder-simple for script leveraging postcss -- Imports added to index.css and themes/express.css +* Imports added to index.css and themes/express.css <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 55435c861ec..82f2a6e095d 100644 --- a/components/actiongroup/package.json +++ b/components/actiongroup/package.json @@ -1,42 +1,40 @@ { - "name": "@spectrum-css/actiongroup", - "version": "5.0.0", - "description": "The Spectrum CSS actiongroup component", - "license": "Apache-2.0", - "author": "Adobe", - "homepage": "https://opensource.adobe.com/spectrum-css/actiongroup", - "repository": { - "type": "git", - "url": "https://github.com/adobe/spectrum-css.git", - "directory": "components/actiongroup" - }, - "bugs": { - "url": "https://github.com/adobe/spectrum-css/issues" - }, - "main": "dist/index.css", - "files": [ - "dist/*", - "CHANGELOG.md", - "package.json", - "stories/template.js", - "metadata/mods.md" - ], - "peerDependencies": { - "@spectrum-css/actionbutton": ">=5", - "@spectrum-css/tokens": ">=13" - }, - "peerDependenciesMeta": { - "@spectrum-css/actionbutton": { - "optional": true - } - }, - "keywords": [ - "spectrum", - "css", - "design system", - "adobe" - ], - "publishConfig": { - "access": "public" - } + "name": "@spectrum-css/actiongroup", + "version": "5.0.0-next.3", + "description": "The Spectrum CSS actiongroup component", + "license": "Apache-2.0", + "author": "Adobe", + "homepage": "https://opensource.adobe.com/spectrum-css/actiongroup", + "repository": { + "type": "git", + "url": "https://github.com/adobe/spectrum-css.git", + "directory": "components/actiongroup" + }, + "bugs": { + "url": "https://github.com/adobe/spectrum-css/issues" + }, + "main": "dist/index.css", + "files": [ + "dist/*", + "metadata/mods.md", + "stories/template.js" + ], + "peerDependencies": { + "@spectrum-css/actionbutton": ">=5", + "@spectrum-css/tokens": ">=14.0.0-next.3" + }, + "peerDependenciesMeta": { + "@spectrum-css/actionbutton": { + "optional": true + } + }, + "keywords": [ + "adobe", + "css", + "design system", + "spectrum" + ], + "publishConfig": { + "access": "public" + } } 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 87a9d365836..3342b7caa31 100644 --- a/components/actionmenu/package.json +++ b/components/actionmenu/package.json @@ -32,7 +32,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 197e1fb3f6d..56a5fe0de15 100644 --- a/components/alertbanner/package.json +++ b/components/alertbanner/package.json @@ -1,45 +1,43 @@ { - "name": "@spectrum-css/alertbanner", - "version": "2.0.0", - "description": "The Spectrum CSS alertbanner component", - "license": "Apache-2.0", - "author": "Adobe", - "homepage": "https://opensource.adobe.com/spectrum-css/alertbanner", - "repository": { - "type": "git", - "url": "https://github.com/adobe/spectrum-css.git", - "directory": "components/alertbanner" - }, - "bugs": { - "url": "https://github.com/adobe/spectrum-css/issues" - }, - "main": "dist/index.css", - "files": [ - "dist/*", - "CHANGELOG.md", - "package.json", - "stories/template.js", - "metadata/mods.md" - ], - "peerDependencies": { - "@spectrum-css/button": ">=11", - "@spectrum-css/closebutton": ">=4", - "@spectrum-css/divider": ">=2", - "@spectrum-css/icon": ">=4", - "@spectrum-css/tokens": ">=13" - }, - "peerDependenciesMeta": { - "@spectrum-css/icon": { - "optional": true - } - }, - "keywords": [ - "spectrum", - "css", - "design system", - "adobe" - ], - "publishConfig": { - "access": "public" - } + "name": "@spectrum-css/alertbanner", + "version": "2.0.0", + "description": "The Spectrum CSS alertbanner component", + "license": "Apache-2.0", + "author": "Adobe", + "homepage": "https://opensource.adobe.com/spectrum-css/alertbanner", + "repository": { + "type": "git", + "url": "https://github.com/adobe/spectrum-css.git", + "directory": "components/alertbanner" + }, + "bugs": { + "url": "https://github.com/adobe/spectrum-css/issues" + }, + "main": "dist/index.css", + "files": [ + "dist/*", + "metadata/mods.md", + "stories/template.js" + ], + "peerDependencies": { + "@spectrum-css/button": ">=11", + "@spectrum-css/closebutton": ">=4", + "@spectrum-css/divider": ">=2", + "@spectrum-css/icon": ">=4", + "@spectrum-css/tokens": ">=14.0.0-next.3" + }, + "peerDependenciesMeta": { + "@spectrum-css/icon": { + "optional": true + } + }, + "keywords": [ + "adobe", + "css", + "design system", + "spectrum" + ], + "publishConfig": { + "access": "public" + } } diff --git a/components/alertdialog/package.json b/components/alertdialog/package.json index 9172858ddb2..8a80cd9dfc2 100644 --- a/components/alertdialog/package.json +++ b/components/alertdialog/package.json @@ -1,49 +1,47 @@ { - "name": "@spectrum-css/alertdialog", - "version": "2.0.0", - "description": "The Spectrum CSS alertdialog component", - "license": "Apache-2.0", - "author": "Adobe", - "homepage": "https://opensource.adobe.com/spectrum-css/", - "repository": { - "type": "git", - "url": "https://github.com/adobe/spectrum-css.git", - "directory": "components/alertdialog" - }, - "bugs": { - "url": "https://github.com/adobe/spectrum-css/issues" - }, - "main": "dist/index.css", - "files": [ - "dist/*", - "CHANGELOG.md", - "package.json", - "stories/template.js", - "metadata/mods.md" - ], - "peerDependencies": { - "@spectrum-css/buttongroup": ">=6", - "@spectrum-css/divider": ">=2", - "@spectrum-css/icon": ">=4", - "@spectrum-css/modal": ">=4", - "@spectrum-css/tokens": ">=13", - "@spectrum-css/underlay": ">=3" - }, - "peerDependenciesMeta": { - "@spectrum-css/buttongroup": { - "optional": true - }, - "@spectrum-css/icon": { - "optional": true - } - }, - "keywords": [ - "spectrum", - "css", - "design system", - "adobe" - ], - "publishConfig": { - "access": "public" - } + "name": "@spectrum-css/alertdialog", + "version": "2.0.0", + "description": "The Spectrum CSS alertdialog component", + "license": "Apache-2.0", + "author": "Adobe", + "homepage": "https://opensource.adobe.com/spectrum-css/", + "repository": { + "type": "git", + "url": "https://github.com/adobe/spectrum-css.git", + "directory": "components/alertdialog" + }, + "bugs": { + "url": "https://github.com/adobe/spectrum-css/issues" + }, + "main": "dist/index.css", + "files": [ + "dist/*", + "metadata/mods.md", + "stories/template.js" + ], + "peerDependencies": { + "@spectrum-css/buttongroup": ">=6", + "@spectrum-css/divider": ">=2", + "@spectrum-css/icon": ">=4", + "@spectrum-css/modal": ">=4", + "@spectrum-css/tokens": ">=14.0.0-next.3", + "@spectrum-css/underlay": ">=3" + }, + "peerDependenciesMeta": { + "@spectrum-css/buttongroup": { + "optional": true + }, + "@spectrum-css/icon": { + "optional": true + } + }, + "keywords": [ + "adobe", + "css", + "design system", + "spectrum" + ], + "publishConfig": { + "access": "public" + } } 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 761e94f5d31..dbe238afd24 100644 --- a/components/asset/package.json +++ b/components/asset/package.json @@ -1,36 +1,34 @@ { - "name": "@spectrum-css/asset", - "version": "5.0.0", - "description": "The Spectrum CSS asset component", - "license": "Apache-2.0", - "author": "Adobe", - "homepage": "https://opensource.adobe.com/spectrum-css/asset", - "repository": { - "type": "git", - "url": "https://github.com/adobe/spectrum-css.git", - "directory": "components/asset" - }, - "bugs": { - "url": "https://github.com/adobe/spectrum-css/issues" - }, - "main": "dist/index.css", - "files": [ - "dist/*", - "CHANGELOG.md", - "package.json", - "stories/template.js", - "metadata/mods.md" - ], - "peerDependencies": { - "@spectrum-css/tokens": ">=13" - }, - "keywords": [ - "spectrum", - "css", - "design system", - "adobe" - ], - "publishConfig": { - "access": "public" - } + "name": "@spectrum-css/asset", + "version": "5.0.0", + "description": "The Spectrum CSS asset component", + "license": "Apache-2.0", + "author": "Adobe", + "homepage": "https://opensource.adobe.com/spectrum-css/asset", + "repository": { + "type": "git", + "url": "https://github.com/adobe/spectrum-css.git", + "directory": "components/asset" + }, + "bugs": { + "url": "https://github.com/adobe/spectrum-css/issues" + }, + "main": "dist/index.css", + "files": [ + "dist/*", + "metadata/mods.md", + "stories/template.js" + ], + "peerDependencies": { + "@spectrum-css/tokens": ">=14.0.0-next.3" + }, + "keywords": [ + "adobe", + "css", + "design system", + "spectrum" + ], + "publishConfig": { + "access": "public" + } } diff --git a/components/assetcard/index.css b/components/assetcard/index.css index 418275e4019..ab9ca3238c3 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 d4955ebf1f2..e161afc5742 100644 --- a/components/assetcard/package.json +++ b/components/assetcard/package.json @@ -1,42 +1,40 @@ { - "name": "@spectrum-css/assetcard", - "version": "4.0.0", - "description": "The Spectrum CSS asset card component", - "license": "Apache-2.0", - "author": "Adobe", - "homepage": "https://opensource.adobe.com/spectrum-css/assetcard", - "repository": { - "type": "git", - "url": "https://github.com/adobe/spectrum-css.git", - "directory": "components/assetcard" - }, - "bugs": { - "url": "https://github.com/adobe/spectrum-css/issues" - }, - "main": "dist/index.css", - "files": [ - "dist/*", - "CHANGELOG.md", - "package.json", - "stories/template.js", - "metadata/mods.md" - ], - "peerDependencies": { - "@spectrum-css/checkbox": ">=7", - "@spectrum-css/tokens": ">=13" - }, - "peerDependenciesMeta": { - "@spectrum-css/checkbox": { - "optional": true - } - }, - "keywords": [ - "spectrum", - "css", - "design system", - "adobe" - ], - "publishConfig": { - "access": "public" - } + "name": "@spectrum-css/assetcard", + "version": "4.0.0", + "description": "The Spectrum CSS asset card component", + "license": "Apache-2.0", + "author": "Adobe", + "homepage": "https://opensource.adobe.com/spectrum-css/assetcard", + "repository": { + "type": "git", + "url": "https://github.com/adobe/spectrum-css.git", + "directory": "components/assetcard" + }, + "bugs": { + "url": "https://github.com/adobe/spectrum-css/issues" + }, + "main": "dist/index.css", + "files": [ + "dist/*", + "metadata/mods.md", + "stories/template.js" + ], + "peerDependencies": { + "@spectrum-css/checkbox": ">=7", + "@spectrum-css/tokens": ">=14.0.0-next.3" + }, + "peerDependenciesMeta": { + "@spectrum-css/checkbox": { + "optional": true + } + }, + "keywords": [ + "adobe", + "css", + "design system", + "spectrum" + ], + "publishConfig": { + "access": "public" + } } diff --git a/components/assetlist/index.css b/components/assetlist/index.css index ccb9ba09be3..73b035f3fa5 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 435d773f7cb..71496b13d7e 100644 --- a/components/assetlist/package.json +++ b/components/assetlist/package.json @@ -1,46 +1,44 @@ { - "name": "@spectrum-css/assetlist", - "version": "6.0.0", - "description": "The Spectrum CSS assetlist component", - "license": "Apache-2.0", - "author": "Adobe", - "homepage": "https://opensource.adobe.com/spectrum-css/assetlist", - "repository": { - "type": "git", - "url": "https://github.com/adobe/spectrum-css.git", - "directory": "components/assetlist" - }, - "bugs": { - "url": "https://github.com/adobe/spectrum-css/issues" - }, - "main": "dist/index.css", - "files": [ - "dist/*", - "CHANGELOG.md", - "package.json", - "stories/template.js", - "metadata/mods.md" - ], - "peerDependencies": { - "@spectrum-css/checkbox": ">=8", - "@spectrum-css/icon": ">=4", - "@spectrum-css/tokens": ">=13" - }, - "peerDependenciesMeta": { - "@spectrum-css/checkbox": { - "optional": true - }, - "@spectrum-css/icon": { - "optional": true - } - }, - "keywords": [ - "spectrum", - "css", - "design system", - "adobe" - ], - "publishConfig": { - "access": "public" - } + "name": "@spectrum-css/assetlist", + "version": "6.0.0", + "description": "The Spectrum CSS assetlist component", + "license": "Apache-2.0", + "author": "Adobe", + "homepage": "https://opensource.adobe.com/spectrum-css/assetlist", + "repository": { + "type": "git", + "url": "https://github.com/adobe/spectrum-css.git", + "directory": "components/assetlist" + }, + "bugs": { + "url": "https://github.com/adobe/spectrum-css/issues" + }, + "main": "dist/index.css", + "files": [ + "dist/*", + "metadata/mods.md", + "stories/template.js" + ], + "peerDependencies": { + "@spectrum-css/checkbox": ">=8", + "@spectrum-css/icon": ">=4", + "@spectrum-css/tokens": ">=14.0.0-next.3" + }, + "peerDependenciesMeta": { + "@spectrum-css/checkbox": { + "optional": true + }, + "@spectrum-css/icon": { + "optional": true + } + }, + "keywords": [ + "adobe", + "css", + "design system", + "spectrum" + ], + "publishConfig": { + "access": "public" + } } diff --git a/components/avatar/package.json b/components/avatar/package.json index 2b557aeb2d5..c0bbcdc3428 100644 --- a/components/avatar/package.json +++ b/components/avatar/package.json @@ -1,36 +1,34 @@ { - "name": "@spectrum-css/avatar", - "version": "7.0.0", - "description": "The Spectrum CSS avatar component", - "license": "Apache-2.0", - "author": "Adobe", - "homepage": "https://opensource.adobe.com/spectrum-css/avatar", - "repository": { - "type": "git", - "url": "https://github.com/adobe/spectrum-css.git", - "directory": "components/avatar" - }, - "bugs": { - "url": "https://github.com/adobe/spectrum-css/issues" - }, - "main": "dist/index.css", - "files": [ - "dist/*", - "CHANGELOG.md", - "package.json", - "stories/template.js", - "metadata/mods.md" - ], - "peerDependencies": { - "@spectrum-css/tokens": ">=13" - }, - "keywords": [ - "spectrum", - "css", - "design system", - "adobe" - ], - "publishConfig": { - "access": "public" - } + "name": "@spectrum-css/avatar", + "version": "7.0.0", + "description": "The Spectrum CSS avatar component", + "license": "Apache-2.0", + "author": "Adobe", + "homepage": "https://opensource.adobe.com/spectrum-css/avatar", + "repository": { + "type": "git", + "url": "https://github.com/adobe/spectrum-css.git", + "directory": "components/avatar" + }, + "bugs": { + "url": "https://github.com/adobe/spectrum-css/issues" + }, + "main": "dist/index.css", + "files": [ + "dist/*", + "metadata/mods.md", + "stories/template.js" + ], + "peerDependencies": { + "@spectrum-css/tokens": ">=14.0.0-next.3" + }, + "keywords": [ + "adobe", + "css", + "design system", + "spectrum" + ], + "publishConfig": { + "access": "public" + } } diff --git a/components/badge/package.json b/components/badge/package.json index ca189b0a3d6..0a59f305457 100644 --- a/components/badge/package.json +++ b/components/badge/package.json @@ -1,42 +1,40 @@ { - "name": "@spectrum-css/badge", - "version": "4.0.0", - "description": "The Spectrum CSS badge component", - "license": "Apache-2.0", - "author": "Adobe", - "homepage": "https://opensource.adobe.com/spectrum-css/badge", - "repository": { - "type": "git", - "url": "https://github.com/adobe/spectrum-css.git", - "directory": "components/badge" - }, - "bugs": { - "url": "https://github.com/adobe/spectrum-css/issues" - }, - "main": "dist/index.css", - "files": [ - "dist/*", - "CHANGELOG.md", - "package.json", - "stories/template.js", - "metadata/mods.md" - ], - "peerDependencies": { - "@spectrum-css/icon": ">=4", - "@spectrum-css/tokens": ">=13" - }, - "peerDependenciesMeta": { - "@spectrum-css/icon": { - "optional": true - } - }, - "keywords": [ - "spectrum", - "css", - "design system", - "adobe" - ], - "publishConfig": { - "access": "public" - } + "name": "@spectrum-css/badge", + "version": "4.0.0", + "description": "The Spectrum CSS badge component", + "license": "Apache-2.0", + "author": "Adobe", + "homepage": "https://opensource.adobe.com/spectrum-css/badge", + "repository": { + "type": "git", + "url": "https://github.com/adobe/spectrum-css.git", + "directory": "components/badge" + }, + "bugs": { + "url": "https://github.com/adobe/spectrum-css/issues" + }, + "main": "dist/index.css", + "files": [ + "dist/*", + "metadata/mods.md", + "stories/template.js" + ], + "peerDependencies": { + "@spectrum-css/icon": ">=4", + "@spectrum-css/tokens": ">=14.0.0-next.3" + }, + "peerDependenciesMeta": { + "@spectrum-css/icon": { + "optional": true + } + }, + "keywords": [ + "adobe", + "css", + "design system", + "spectrum" + ], + "publishConfig": { + "access": "public" + } } diff --git a/components/breadcrumb/package.json b/components/breadcrumb/package.json index e0d2394163c..c45563fd60d 100644 --- a/components/breadcrumb/package.json +++ b/components/breadcrumb/package.json @@ -1,46 +1,44 @@ { - "name": "@spectrum-css/breadcrumb", - "version": "9.0.0", - "description": "The Spectrum CSS breadcrumb component", - "license": "Apache-2.0", - "author": "Adobe", - "homepage": "https://opensource.adobe.com/spectrum-css/breadcrumb", - "repository": { - "type": "git", - "url": "https://github.com/adobe/spectrum-css.git", - "directory": "components/breadcrumb" - }, - "bugs": { - "url": "https://github.com/adobe/spectrum-css/issues" - }, - "main": "dist/index.css", - "files": [ - "dist/*", - "CHANGELOG.md", - "package.json", - "stories/template.js", - "metadata/mods.md" - ], - "peerDependencies": { - "@spectrum-css/actionbutton": ">=5", - "@spectrum-css/icon": ">=4", - "@spectrum-css/tokens": ">=13" - }, - "peerDependenciesMeta": { - "@spectrum-css/actionbutton": { - "optional": true - }, - "@spectrum-css/icon": { - "optional": true - } - }, - "keywords": [ - "spectrum", - "css", - "design system", - "adobe" - ], - "publishConfig": { - "access": "public" - } + "name": "@spectrum-css/breadcrumb", + "version": "9.0.0", + "description": "The Spectrum CSS breadcrumb component", + "license": "Apache-2.0", + "author": "Adobe", + "homepage": "https://opensource.adobe.com/spectrum-css/breadcrumb", + "repository": { + "type": "git", + "url": "https://github.com/adobe/spectrum-css.git", + "directory": "components/breadcrumb" + }, + "bugs": { + "url": "https://github.com/adobe/spectrum-css/issues" + }, + "main": "dist/index.css", + "files": [ + "dist/*", + "metadata/mods.md", + "stories/template.js" + ], + "peerDependencies": { + "@spectrum-css/actionbutton": ">=5", + "@spectrum-css/icon": ">=4", + "@spectrum-css/tokens": ">=14.0.0-next.3" + }, + "peerDependenciesMeta": { + "@spectrum-css/actionbutton": { + "optional": true + }, + "@spectrum-css/icon": { + "optional": true + } + }, + "keywords": [ + "adobe", + "css", + "design system", + "spectrum" + ], + "publishConfig": { + "access": "public" + } } diff --git a/components/button/CHANGELOG.md b/components/button/CHANGELOG.md index 7a472736e45..6ac2992ad7b 100644 --- a/components/button/CHANGELOG.md +++ b/components/button/CHANGELOG.md @@ -1,5 +1,31 @@ # Change Log +## 14.0.0-next.6 + +### Major Changes + +- [#2600](https://github.com/adobe/spectrum-css/pull/2600) [`3559678`](https://github.com/adobe/spectrum-css/commit/35596780a1309dd145fa565461d330ddfaf50e68) Thanks [@jawinn](https://github.com/jawinn)! + +#### Spectrum 2 migration + Button now uses Spectrum 2 tokens and specifications, which includes many color changes to all variants. A few other notable changes: + + - Outline buttons are no longer available in accent and negative options — use the filled variant instead. + - Medium size is now the default. The class `.spectrum-Button--sizeM` is now unnecessary for this size, and has been removed. + - The `.spectrum-Button--fill` class is no longer needed and has been removed. + + The following `--mod` custom properties have been renamed: + + - `--mod-line-height-100` has been renamed to `--mod-button-line-height` + - `--mod-sans-font-family-stack` has been renamed to `--mod-button-font-family` + - `--mod-animation-duration-100` has been renamed to `--mod-button-animation-duration` + - `--mod-bold-font-weight` has been renamed to `--mod-button-font-weight` + +## 14.0.0-next.5 + +### Patch Changes + +- [#2700](https://github.com/adobe/spectrum-css/pull/2700) [`fd0fbc2`](https://github.com/adobe/spectrum-css/commit/fd0fbc28ab944afdbfdc615e1108bc941beb93d5) Thanks [@castastrophe](https://github.com/castastrophe)! - chore: run branch through formatter + All notable changes to this project will be documented in this file. See [Conventional Commits](https://conventionalcommits.org) for commit guidelines. diff --git a/components/button/index.css b/components/button/index.css index 748097bbc91..5da0ec6c1a8 100644 --- a/components/button/index.css +++ b/components/button/index.css @@ -10,72 +10,73 @@ 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"; @import "@spectrum-css/commons/basebutton.css"; -/* default for all buttons */ .spectrum-Button { --spectrum-button-animation-duration: var(--spectrum-animation-duration-100); - --spectrum-button-border-radius: var(--spectrum-corner-radius-100); - --spectrum-button-border-width: var(--spectrum-border-width-200); - --spectrum-button-line-height: 1.2; /* Hack to keep buttons at 32px */ --spectrum-button-focus-ring-gap: var(--spectrum-focus-indicator-gap); - --spectrum-button-focus-ring-border-radius: calc(var(--spectrum-button-border-radius) + var(--spectrum-button-focus-ring-gap)); --spectrum-button-focus-ring-thickness: var(--spectrum-focus-indicator-thickness); --spectrum-button-focus-indicator-color: var(--spectrum-focus-indicator-color); - --spectrum-button-intended-icon-size: var(--spectrum-workflow-icon-size-50); + + --spectrum-button-min-width: calc(var(--spectrum-component-height-100) * var(--spectrum-button-minimum-width-multiplier)); + --spectrum-button-height: var(--spectrum-component-height-100); + + --spectrum-button-border-radius: calc(var(--spectrum-button-height) / 2); + --spectrum-button-border-width: var(--spectrum-border-width-200); + + /* @todo set line-height using font size specific line-height tokens when they are finalized along with the new variable font. */ + --spectrum-button-line-height: 1.2; + --spectrum-button-font-weight: var(--spectrum-bold-font-weight); + --spectrum-button-font-size: var(--spectrum-font-size-100); + + --spectrum-button-edge-to-visual: calc(var(--spectrum-component-pill-edge-to-visual-100) - var(--mod-button-border-width, var(--spectrum-button-border-width))); + --spectrum-button-edge-to-visual-only: calc(var(--spectrum-component-pill-edge-to-visual-only-100) - var(--mod-button-border-width, var(--spectrum-button-border-width))); + --spectrum-button-edge-to-text: calc(var(--spectrum-component-pill-edge-to-text-100) - var(--mod-button-border-width, var(--spectrum-button-border-width))); + --spectrum-button-padding-label-to-icon: var(--spectrum-text-to-visual-100); + --spectrum-button-top-to-text: var(--spectrum-button-top-to-text-medium); + --spectrum-button-bottom-to-text: var(--spectrum-button-bottom-to-text-medium); + --spectrum-button-top-to-icon: var(--spectrum-component-top-to-workflow-icon-100); + --spectrum-button-intended-icon-size: var(--spectrum-workflow-icon-size-100); --mod-progress-circle-position: absolute; + /* stylelint-disable-next-line spectrum-tools/no-unknown-custom-properties -- height and width are set by implementations */ + --spectrum-downstate-perspective: max(var(--spectrum-downstate-height), var(--spectrum-downstate-width) * var(--spectrum-component-size-width-ratio-down)); + + &.spectrum-Button--iconOnly { + --spectrum-button-border-radius: var(--spectrum-corner-radius-full); + } } .spectrum-Button--sizeS { --spectrum-button-min-width: calc(var(--spectrum-component-height-75) * var(--spectrum-button-minimum-width-multiplier)); - - --spectrum-button-border-radius: var(--spectrum-component-pill-edge-to-text-75); --spectrum-button-height: var(--spectrum-component-height-75); --spectrum-button-font-size: var(--spectrum-font-size-75); - --spectrum-button-edge-to-visual: calc(var(--spectrum-component-pill-edge-to-visual-75) - var(--spectrum-button-border-width)); - --spectrum-button-edge-to-visual-only: var(--spectrum-component-pill-edge-to-visual-only-75); - --spectrum-button-edge-to-text: calc(var(--spectrum-component-pill-edge-to-text-75) - var(--spectrum-button-border-width)); + --spectrum-button-edge-to-visual: calc(var(--spectrum-component-pill-edge-to-visual-75) - var(--mod-button-border-width, var(--spectrum-button-border-width))); + --spectrum-button-edge-to-visual-only: calc(var(--spectrum-component-pill-edge-to-visual-only-75) - var(--mod-button-border-width, var(--spectrum-button-border-width))); + --spectrum-button-edge-to-text: calc(var(--spectrum-component-pill-edge-to-text-75) - var(--mod-button-border-width, var(--spectrum-button-border-width))); --spectrum-button-padding-label-to-icon: var(--spectrum-text-to-visual-75); --spectrum-button-top-to-text: var(--spectrum-button-top-to-text-small); --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--sizeM { - --spectrum-button-min-width: calc(var(--spectrum-component-height-100) * var(--spectrum-button-minimum-width-multiplier)); - - --spectrum-button-border-radius: var(--spectrum-component-pill-edge-to-text-100); - --spectrum-button-height: var(--spectrum-component-height-100); - --spectrum-button-font-size: var(--spectrum-font-size-100); - - --spectrum-button-edge-to-visual: calc(var(--spectrum-component-pill-edge-to-visual-100) - var(--spectrum-button-border-width)); - --spectrum-button-edge-to-visual-only: var(--spectrum-component-pill-edge-to-visual-only-100); - --spectrum-button-edge-to-text: calc(var(--spectrum-component-pill-edge-to-text-100) - var(--spectrum-button-border-width)); - --spectrum-button-padding-label-to-icon: var(--spectrum-text-to-visual-100); - --spectrum-button-top-to-text: var(--spectrum-button-top-to-text-medium); - --spectrum-button-bottom-to-text: var(--spectrum-button-bottom-to-text-medium); - --spectrum-button-top-to-icon: var(--spectrum-component-top-to-workflow-icon-100); - --spectrum-button-intended-icon-size: var(--spectrum-workflow-icon-size-100); + &.spectrum-Button--iconOnly { + --spectrum-downstate-perspective: var(--spectrum-component-size-minimum-perspective-down); + } } .spectrum-Button--sizeL { --spectrum-button-min-width: calc(var(--spectrum-component-height-200) * var(--spectrum-button-minimum-width-multiplier)); - - --spectrum-button-border-radius: var(--spectrum-component-pill-edge-to-text-200); --spectrum-button-height: var(--spectrum-component-height-200); --spectrum-button-font-size: var(--spectrum-font-size-200); - --spectrum-button-edge-to-visual: calc(var(--spectrum-component-pill-edge-to-visual-200) - var(--spectrum-button-border-width)); - --spectrum-button-edge-to-visual-only: var(--spectrum-component-pill-edge-to-visual-only-200); - --spectrum-button-edge-to-text: calc(var(--spectrum-component-pill-edge-to-text-200) - var(--spectrum-button-border-width)); + --spectrum-button-edge-to-visual: calc(var(--spectrum-component-pill-edge-to-visual-200) - var(--mod-button-border-width, var(--spectrum-button-border-width))); + --spectrum-button-edge-to-visual-only: calc(var(--spectrum-component-pill-edge-to-visual-only-200) - var(--mod-button-border-width, var(--spectrum-button-border-width))); + --spectrum-button-edge-to-text: calc(var(--spectrum-component-pill-edge-to-text-200) - var(--mod-button-border-width, var(--spectrum-button-border-width))); --spectrum-button-padding-label-to-icon: var(--spectrum-text-to-visual-200); --spectrum-button-top-to-text: var(--spectrum-button-top-to-text-large); --spectrum-button-bottom-to-text: var(--spectrum-button-bottom-to-text-large); @@ -85,15 +86,13 @@ governing permissions and limitations under the License. .spectrum-Button--sizeXL { --spectrum-button-min-width: calc(var(--spectrum-component-height-300) * var(--spectrum-button-minimum-width-multiplier)); - - --spectrum-button-border-radius: var(--spectrum-component-pill-edge-to-text-300); --spectrum-button-height: var(--spectrum-component-height-300); --spectrum-button-font-size: var(--spectrum-font-size-300); - --spectrum-button-edge-to-visual: calc(var(--spectrum-component-pill-edge-to-visual-300) - var(--spectrum-button-border-width)); - --spectrum-button-edge-to-visual-only: var(--spectrum-component-pill-edge-to-visual-only-300); - --spectrum-button-edge-to-text: calc(var(--spectrum-component-pill-edge-to-text-300) - var(--spectrum-button-border-width)); + --spectrum-button-edge-to-visual: calc(var(--spectrum-component-pill-edge-to-visual-300) - var(--mod-button-border-width, var(--spectrum-button-border-width))); + --spectrum-button-edge-to-visual-only: calc(var(--spectrum-component-pill-edge-to-visual-only-300) - var(--mod-button-border-width, var(--spectrum-button-border-width))); + --spectrum-button-edge-to-text: calc(var(--spectrum-component-pill-edge-to-text-300) - var(--mod-button-border-width, var(--spectrum-button-border-width))); --spectrum-button-padding-label-to-icon: var(--spectrum-text-to-visual-300); --spectrum-button-top-to-text: var(--spectrum-button-top-to-text-extra-large); --spectrum-button-bottom-to-text: var(--spectrum-button-bottom-to-text-extra-large); @@ -101,6 +100,235 @@ governing permissions and limitations under the License. --spectrum-button-intended-icon-size: var(--spectrum-workflow-icon-size-300); } +/* Variants and colors */ +.spectrum-Button { + --spectrum-button-content-color-default: var(--spectrum-white); + --spectrum-button-content-color-hover: var(--spectrum-white); + --spectrum-button-content-color-down: var(--spectrum-white); + --spectrum-button-content-color-focus: var(--spectrum-white); + + --spectrum-button-border-color-default: transparent; + --spectrum-button-border-color-hover: transparent; + --spectrum-button-border-color-down: transparent; + --spectrum-button-border-color-focus: transparent; + + --spectrum-button-background-color-disabled: var(--spectrum-disabled-background-color); + --spectrum-button-border-color-disabled: transparent; + --spectrum-button-content-color-disabled: var(--spectrum-disabled-content-color); + + &.spectrum-Button--outline { + --spectrum-button-background-color-disabled: transparent; + --spectrum-button-border-color-disabled: var(--spectrum-disabled-border-color); + --spectrum-button-content-color-disabled: var(--spectrum-disabled-content-color); + } + + /* ---- Accent ---- */ + /* Also shows as the default when a variant class is not used. */ + &.spectrum-Button--accent, + & { + --spectrum-button-background-color-default: var(--spectrum-accent-background-color-default); + --spectrum-button-background-color-hover: var(--spectrum-accent-background-color-hover); + --spectrum-button-background-color-down: var(--spectrum-accent-background-color-down); + --spectrum-button-background-color-focus: var(--spectrum-accent-background-color-key-focus); + } + + /* ---- Negative ---- */ + &.spectrum-Button--negative { + --spectrum-button-background-color-default: var(--spectrum-negative-background-color-default); + --spectrum-button-background-color-hover: var(--spectrum-negative-background-color-hover); + --spectrum-button-background-color-down: var(--spectrum-negative-background-color-down); + --spectrum-button-background-color-focus: var(--spectrum-negative-background-color-key-focus); + } + + /* ---- Primary ---- */ + &.spectrum-Button--primary { + --spectrum-button-background-color-default: var(--spectrum-neutral-background-color-default); + --spectrum-button-background-color-hover: var(--spectrum-neutral-background-color-hover); + --spectrum-button-background-color-down: var(--spectrum-neutral-background-color-down); + --spectrum-button-background-color-focus: var(--spectrum-neutral-background-color-key-focus); + + --spectrum-button-content-color-default: var(--spectrum-gray-25); + --spectrum-button-content-color-hover: var(--spectrum-gray-25); + --spectrum-button-content-color-down: var(--spectrum-gray-25); + --spectrum-button-content-color-focus: var(--spectrum-gray-25); + + &.spectrum-Button--outline { + --spectrum-button-background-color-default: transparent; + --spectrum-button-background-color-hover: var(--spectrum-gray-100); + --spectrum-button-background-color-down: var(--spectrum-gray-100); + --spectrum-button-background-color-focus: var(--spectrum-gray-100); + + --spectrum-button-border-color-default: var(--spectrum-gray-800); + --spectrum-button-border-color-hover: var(--spectrum-gray-900); + --spectrum-button-border-color-down: var(--spectrum-gray-900); + --spectrum-button-border-color-focus: var(--spectrum-gray-900); + + --spectrum-button-content-color-default: var(--spectrum-neutral-content-color-default); + --spectrum-button-content-color-hover: var(--spectrum-neutral-content-color-hover); + --spectrum-button-content-color-down: var(--spectrum-neutral-content-color-down); + --spectrum-button-content-color-focus: var(--spectrum-neutral-content-color-key-focus); + } + } + + /* ---- Secondary ---- */ + &.spectrum-Button--secondary { + --spectrum-button-background-color-default: var(--spectrum-gray-100); + --spectrum-button-background-color-hover: var(--spectrum-gray-200); + --spectrum-button-background-color-down: var(--spectrum-gray-200); + --spectrum-button-background-color-focus: var(--spectrum-gray-200); + + --spectrum-button-content-color-default: var(--spectrum-neutral-content-color-default); + --spectrum-button-content-color-hover: var(--spectrum-neutral-content-color-hover); + --spectrum-button-content-color-down: var(--spectrum-neutral-content-color-down); + --spectrum-button-content-color-focus: var(--spectrum-neutral-content-color-key-focus); + + &.spectrum-Button--outline { + --spectrum-button-background-color-default: transparent; + --spectrum-button-background-color-hover: var(--spectrum-gray-100); + --spectrum-button-background-color-down: var(--spectrum-gray-100); + --spectrum-button-background-color-focus: var(--spectrum-gray-100); + + --spectrum-button-border-color-default: var(--spectrum-gray-300); + --spectrum-button-border-color-hover: var(--spectrum-gray-400); + --spectrum-button-border-color-down: var(--spectrum-gray-400); + --spectrum-button-border-color-focus: var(--spectrum-gray-400); + + --spectrum-button-content-color-default: var(--spectrum-neutral-content-color-default); + --spectrum-button-content-color-hover: var(--spectrum-neutral-content-color-hover); + --spectrum-button-content-color-down: var(--spectrum-neutral-content-color-down); + --spectrum-button-content-color-focus: var(--spectrum-neutral-content-color-key-focus); + } + } + + /* ---- Static White ---- */ + &.spectrum-Button--staticWhite { + --spectrum-button-background-color-default: var(--spectrum-transparent-white-800); + --spectrum-button-background-color-hover: var(--spectrum-transparent-white-900); + --spectrum-button-background-color-down: var(--spectrum-transparent-white-900); + --spectrum-button-background-color-focus: var(--spectrum-transparent-white-900); + + --spectrum-button-content-color-default: var(--spectrum-black); + --spectrum-button-content-color-hover: var(--spectrum-black); + --spectrum-button-content-color-down: var(--spectrum-black); + --spectrum-button-content-color-focus: var(--spectrum-black); + + --spectrum-button-focus-indicator-color: var(--spectrum-static-white-focus-indicator-color); + + --spectrum-button-background-color-disabled: var(--spectrum-disabled-static-white-background-color); + --spectrum-button-border-color-disabled: transparent; + --spectrum-button-content-color-disabled: var(--spectrum-disabled-static-white-content-color); + + &.spectrum-Button--outline { + --spectrum-button-background-color-default: var(--spectrum-transparent-white-25); + --spectrum-button-background-color-hover: var(--spectrum-transparent-white-100); + --spectrum-button-background-color-down: var(--spectrum-transparent-white-100); + --spectrum-button-background-color-focus: var(--spectrum-transparent-white-100); + + --spectrum-button-border-color-default: var(--spectrum-transparent-white-800); + --spectrum-button-border-color-hover: var(--spectrum-transparent-white-900); + --spectrum-button-border-color-down: var(--spectrum-transparent-white-900); + --spectrum-button-border-color-focus: var(--spectrum-transparent-white-900); + + --spectrum-button-content-color-default: var(--spectrum-transparent-white-800); + --spectrum-button-content-color-hover: var(--spectrum-transparent-white-900); + --spectrum-button-content-color-down: var(--spectrum-transparent-white-900); + --spectrum-button-content-color-focus: var(--spectrum-transparent-white-900); + + --spectrum-button-background-color-disabled: var(--spectrum-transparent-white-25); + --spectrum-button-border-color-disabled: var(--spectrum-disabled-static-white-border-color); + --spectrum-button-content-color-disabled: var(--spectrum-disabled-static-white-content-color); + } + + &.spectrum-Button--secondary { + --spectrum-button-background-color-default: var(--spectrum-transparent-white-100); + --spectrum-button-background-color-hover: var(--spectrum-transparent-white-200); + --spectrum-button-background-color-down: var(--spectrum-transparent-white-200); + --spectrum-button-background-color-focus: var(--spectrum-transparent-white-200); + + --spectrum-button-content-color-default: var(--spectrum-transparent-white-800); + --spectrum-button-content-color-hover: var(--spectrum-transparent-white-900); + --spectrum-button-content-color-down: var(--spectrum-transparent-white-900); + --spectrum-button-content-color-focus: var(--spectrum-transparent-white-900); + + &.spectrum-Button--outline { + --spectrum-button-background-color-default: var(--spectrum-transparent-white-25); + --spectrum-button-background-color-hover: var(--spectrum-transparent-white-100); + --spectrum-button-background-color-down: var(--spectrum-transparent-white-100); + --spectrum-button-background-color-focus: var(--spectrum-transparent-white-100); + + --spectrum-button-border-color-default: var(--spectrum-transparent-white-300); + --spectrum-button-border-color-hover: var(--spectrum-transparent-white-400); + --spectrum-button-border-color-down: var(--spectrum-transparent-white-400); + --spectrum-button-border-color-focus: var(--spectrum-transparent-white-400); + } + } + } + + /* ---- Static Black ---- */ + &.spectrum-Button--staticBlack { + --spectrum-button-background-color-default: var(--spectrum-transparent-black-800); + --spectrum-button-background-color-hover: var(--spectrum-transparent-black-900); + --spectrum-button-background-color-down: var(--spectrum-transparent-black-900); + --spectrum-button-background-color-focus: var(--spectrum-transparent-black-900); + + --spectrum-button-content-color-default: var(--spectrum-white); + --spectrum-button-content-color-hover: var(--spectrum-white); + --spectrum-button-content-color-down: var(--spectrum-white); + --spectrum-button-content-color-focus: var(--spectrum-white); + + --spectrum-button-focus-indicator-color: var(--spectrum-static-black-focus-indicator-color); + + --spectrum-button-background-color-disabled: var(--spectrum-disabled-static-black-background-color); + --spectrum-button-border-color-disabled: transparent; + --spectrum-button-content-color-disabled: var(--spectrum-disabled-static-black-content-color); + + &.spectrum-Button--outline { + --spectrum-button-background-color-default: var(--spectrum-transparent-black-25); + --spectrum-button-background-color-hover: var(--spectrum-transparent-black-100); + --spectrum-button-background-color-down: var(--spectrum-transparent-black-100); + --spectrum-button-background-color-focus: var(--spectrum-transparent-black-100); + + --spectrum-button-border-color-default: var(--spectrum-transparent-black-800); + --spectrum-button-border-color-hover: var(--spectrum-transparent-black-900); + --spectrum-button-border-color-down: var(--spectrum-transparent-black-900); + --spectrum-button-border-color-focus: var(--spectrum-transparent-black-900); + + --spectrum-button-content-color-default: var(--spectrum-transparent-black-800); + --spectrum-button-content-color-hover: var(--spectrum-transparent-black-900); + --spectrum-button-content-color-down: var(--spectrum-transparent-black-900); + --spectrum-button-content-color-focus: var(--spectrum-transparent-black-900); + + --spectrum-button-background-color-disabled: transparent; + --spectrum-button-border-color-disabled: var(--spectrum-disabled-static-black-border-color); + --spectrum-button-content-color-disabled: var(--spectrum-disabled-static-black-content-color); + } + + &.spectrum-Button--secondary { + --spectrum-button-background-color-default: var(--spectrum-transparent-black-100); + --spectrum-button-background-color-hover: var(--spectrum-transparent-black-200); + --spectrum-button-background-color-down: var(--spectrum-transparent-black-200); + --spectrum-button-background-color-focus: var(--spectrum-transparent-black-200); + + --spectrum-button-content-color-default: var(--spectrum-transparent-black-800); + --spectrum-button-content-color-hover: var(--spectrum-transparent-black-900); + --spectrum-button-content-color-down: var(--spectrum-transparent-black-900); + --spectrum-button-content-color-focus: var(--spectrum-transparent-black-900); + + &.spectrum-Button--outline { + --spectrum-button-background-color-default: var(--spectrum-transparent-black-25); + --spectrum-button-background-color-hover: var(--spectrum-transparent-black-100); + --spectrum-button-background-color-down: var(--spectrum-transparent-black-100); + --spectrum-button-background-color-focus: var(--spectrum-transparent-black-100); + + --spectrum-button-border-color-default: var(--spectrum-transparent-black-300); + --spectrum-button-border-color-hover: var(--spectrum-transparent-black-400); + --spectrum-button-border-color-down: var(--spectrum-transparent-black-400); + --spectrum-button-border-color-focus: var(--spectrum-transparent-black-400); + } + } + } +} + .spectrum-Button { @extend %spectrum-BaseButton; @extend %spectrum-ButtonWithFocusRing; @@ -109,32 +337,30 @@ governing permissions and limitations under the License. border-width: var(--mod-button-border-width, var(--spectrum-button-border-width)); border-style: solid; font-size: var(--mod-button-font-size, var(--spectrum-button-font-size)); - font-weight: var(--mod-bold-font-weight, var(--spectrum-bold-font-weight)); + font-weight: var(--mod-button-font-weight, var(--spectrum-button-font-weight)); gap: var(--mod-button-padding-label-to-icon, var(--spectrum-button-padding-label-to-icon)); min-inline-size: var(--mod-button-min-width, var(--spectrum-button-min-width)); min-block-size: var(--mod-button-height, var(--spectrum-button-height)); - /* Start with text-only padding */ padding-block: 0; padding-inline: var(--mod-button-edge-to-text, var(--spectrum-button-edge-to-text)); position: relative; - /* let staticColor variants inherit their color */ - color: inherit; + background-color: var(--highcontrast-button-background-color-default, var(--mod-button-background-color-default, var(--spectrum-button-background-color-default))); + border-color: var(--highcontrast-button-border-color-default, var(--mod-button-border-color-default, var(--spectrum-button-border-color-default))); + color: var(--highcontrast-button-content-color-default, var(--mod-button-content-color-default, var(--spectrum-button-content-color-default))); + transition: border var(--mod-button-animation-duration, var(--spectrum-button-animation-duration, 130ms)) linear, + color var(--mod-button-animation-duration, var(--spectrum-button-animation-duration, 130ms)) linear, + background-color var(--mod-button-animation-duration, var(--spectrum-button-animation-duration, 130ms)) linear; margin-block: var(--mod-button-margin-block); margin-inline-end: var(--mod-button-margin-right); margin-inline-start: var(--mod-button-margin-left); - &:hover, - &:active { - box-shadow: none; - } - .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. */ - --_icon-size-difference: max(0px, + --spectrum-button-icon-size-difference: max(0px, var(--spectrum-button-intended-icon-size) - var(--spectrum-icon-block-size, var(--spectrum-button-intended-icon-size)) ); @@ -143,7 +369,7 @@ governing permissions and limitations under the License. max(0px, var(--mod-button-top-to-icon, var(--spectrum-button-top-to-icon)) - var(--mod-button-border-width, var(--spectrum-button-border-width)) + - (var(--_icon-size-difference, 0px) / 2) + (var(--spectrum-button-icon-size-difference, 0px) / 2) ) ); @@ -156,91 +382,48 @@ governing permissions and limitations under the License. align-self: flex-start; } - /* correct focus indicator radius for t-shirt sizing */ - &::after { - border-radius: calc(var(--mod-button-border-radius, var(--spectrum-button-border-radius)) + var(--mod-focus-indicator-gap, var(--spectrum-focus-indicator-gap))); - } - - &.spectrum-Button--iconOnly { - min-inline-size: unset; - padding: calc(var(--mod-button-edge-to-visual-only, var(--spectrum-button-edge-to-visual-only)) - var(--mod-button-border-width, var(--spectrum-button-border-width))); - border-radius: 50%; - - .spectrum-Icon { - align-self: center; - margin-inline-start: 0; - margin-block-start: 0; - } - - &::after { - border-radius: 50%; - } - } -} - -a.spectrum-Button { - @extend %spectrum-AnchorButton; -} - -.spectrum-Button-label { - @extend %spectrum-ButtonLabel; - padding-block-start: calc(var(--mod-button-top-to-text, var(--spectrum-button-top-to-text)) - var(--mod-button-border-width, var(--spectrum-button-border-width))); - padding-block-end: calc(var(--mod-button-bottom-to-text, var(--spectrum-button-bottom-to-text)) - var(--mod-button-border-width, var(--spectrum-button-border-width))); - line-height: var(--mod-button-line-height, var(--spectrum-button-line-height)); - align-self: start; - text-align: var(--mod-button-text-align, center); -} - -.spectrum-Button .spectrum-Icon + .spectrum-Button-label { - text-align: var(--mod-button-text-align-with-icon, start); -} - -.spectrum-Button { - &:focus-visible, - &.is-focused { - &::after { - box-shadow: 0 0 0 var(--mod-button-focus-ring-thickness, var(--spectrum-button-focus-ring-thickness)) var(--mod-button-focus-ring-color, var(--spectrum-button-focus-indicator-color)); - } - } -} - -/* Special cases for focus indicator */ -.spectrum-Button { - transition: border-color var(--mod-button-animation-duration, var(--spectrum-button-animation-duration)) ease-in-out; - + /* Focus indicator */ &::after { position: absolute; inset: 0; - margin: calc((var(--mod-button-focus-ring-gap, var(--spectrum-button-focus-ring-gap)) + var(--mod-button-border-width, var(--spectrum-button-border-width))) * -1); - border-radius: var(--mod-button-focus-ring-border-radius, var(--spectrum-button-focus-ring-border-radius)); + margin: calc(( + var(--mod-button-focus-ring-gap, var(--spectrum-button-focus-ring-gap)) + + var(--mod-button-border-width, var(--spectrum-button-border-width)) + ) * -1 + ); + border-radius: var(--mod-button-focus-ring-border-radius, calc( + var(--mod-button-border-radius, var(--spectrum-button-border-radius)) + + var(--mod-button-focus-ring-gap, var(--spectrum-button-focus-ring-gap)) + )); transition: box-shadow var(--mod-button-animation-duration, var(--spectrum-button-animation-duration)) ease-in-out; pointer-events: none; content: ''; } - &:focus-visible { - /* Remove the default focus outline */ + &:focus-visible, + &.is-focused { box-shadow: none; outline: none; &::after { - box-shadow: 0 0 0 var(--mod-button-focus-ring-thickness, var(--spectrum-button-focus-ring-thickness)) var(--highcontrast-button-focus-ring-color, var(--mod-button-focus-ring-color, - var(--mod-button-focus-ring-color, var(--spectrum-button-focus-indicator-color)))); + box-shadow: 0 0 0 + var(--mod-button-focus-ring-thickness, var(--spectrum-button-focus-ring-thickness)) + var(--highcontrast-button-focus-ring-color, var(--mod-button-focus-ring-color, var(--spectrum-button-focus-indicator-color))); + + /* Margin is repeated to override declaration coming from the imported BaseButton. */ + margin: calc(( + var(--mod-button-focus-ring-gap, var(--spectrum-button-focus-ring-gap)) + + var(--mod-button-border-width, var(--spectrum-button-border-width)) + ) * -1 + ); } } -} -/* Core Token Theming */ -/* former skin.css, applied / copied from actionbutton/index.css */ -.spectrum-Button { - @extend %spectrum-BaseButton; - - background-color: var(--highcontrast-button-background-color-default, var(--mod-button-background-color-default, var(--spectrum-button-background-color-default))); - border-color: var(--highcontrast-button-border-color-default, var(--mod-button-border-color-default, var(--spectrum-button-border-color-default))); - color: var(--highcontrast-button-content-color-default, var(--mod-button-content-color-default, var(--spectrum-button-content-color-default))); - transition: border var(--mod-button-animation-duration, var(--spectrum-button-animation-duration, 130ms)) linear, - color var(--mod-button-animation-duration, var(--spectrum-button-animation-duration, 130ms)) linear, - background-color var(--mod-button-animation-duration, var(--spectrum-button-animation-duration, 130ms)) linear; + /* States and interaction */ + &:hover, + &:active { + box-shadow: none; + } &:hover { background-color: var(--highcontrast-button-background-color-hover, var(--mod-button-background-color-hover, var(--spectrum-button-background-color-hover))); @@ -258,6 +441,7 @@ a.spectrum-Button { background-color: var(--highcontrast-button-background-color-down, var(--mod-button-background-color-down, var(--spectrum-button-background-color-down))); border-color: var(--highcontrast-button-border-color-down, var(--mod-button-border-color-down, var(--spectrum-button-border-color-down))); color: var(--highcontrast-button-content-color-down, var(--mod-button-content-color-down, var(--spectrum-button-content-color-down))); + transform: perspective(var(--spectrum-downstate-perspective)) translateZ(var(--spectrum-component-size-difference-down)); } &:disabled, @@ -303,42 +487,75 @@ a.spectrum-Button { } } -/* Static color variants */ -.spectrum-Button--staticWhite { - --spectrum-button-focus-indicator-color: var(--mod-static-black-focus-indicator-color, var(--spectrum-static-black-focus-indicator-color)); +a.spectrum-Button { + @extend %spectrum-AnchorButton; +} + +.spectrum-Button-label { + @extend %spectrum-ButtonLabel; + padding-block-start: calc(var(--mod-button-top-to-text, var(--spectrum-button-top-to-text)) - var(--mod-button-border-width, var(--spectrum-button-border-width))); + padding-block-end: calc(var(--mod-button-bottom-to-text, var(--spectrum-button-bottom-to-text)) - var(--mod-button-border-width, var(--spectrum-button-border-width))); + line-height: var(--mod-button-line-height, var(--spectrum-button-line-height)); + align-self: start; + text-align: var(--mod-button-text-align, center); +} + +.spectrum-Button .spectrum-Icon + .spectrum-Button-label { + text-align: var(--mod-button-text-align-with-icon, start); } -.spectrum-Button--staticBlack { - --spectrum-button-focus-indicator-color: var(--mod-static-black-focus-indicator-color, var(--spectrum-static-black-focus-indicator-color)); +/* Icon only variant */ +.spectrum-Button.spectrum-Button--iconOnly { + min-inline-size: unset; + padding: var(--mod-button-edge-to-visual-only, var(--spectrum-button-edge-to-visual-only)); + + .spectrum-Icon { + align-self: center; + margin-inline-start: 0; + margin-block-start: 0; + } } -/* Windows High Contrast Mode */ +/* Forced colors / high contrast mode */ @media (forced-colors: active) { .spectrum-Button { --highcontrast-button-content-color-disabled: GrayText; --highcontrast-button-border-color-disabled: GrayText; + --highcontrast-button-background-color-disabled: ButtonFace; + --mod-progress-circle-track-border-color: ButtonText; --mod-progress-circle-track-border-color-over-background: ButtonText; --mod-progress-circle-thickness: var(--spectrum-progress-circle-thickness-medium); + --highcontrast-button-focus-ring-color: ButtonText; + &:focus-visible { &::after { + /* Make sure the box-shadow used for the focus indicator is displayed. */ forced-color-adjust: none; - box-shadow: 0 0 0 var(--mod-button-focus-ring-thickness, var(--spectrum-button-focus-ring-thickness)) ButtonText; } } - &.spectrum-Button--accent.spectrum-Button--fill { + &.spectrum-Button--accent, + &:not( + .spectrum-Button--primary, + .spectrum-Button--negative, + .spectrum-Button--secondary, + .spectrum-Button--staticBlack, + .spectrum-Button--staticWhite + ){ + /* The accent fill variant looks different than the other buttons. + It inverts the background and content colors. */ --highcontrast-button-background-color-default: ButtonText; --highcontrast-button-content-color-default: ButtonFace; - --highcontrast-button-background-color-disabled: ButtonFace; --highcontrast-button-background-color-hover: Highlight; --highcontrast-button-background-color-down: Highlight; --highcontrast-button-background-color-focus: Highlight; - --highcontrast-button-content-color-hover: ButtonFace; - --highcontrast-button-content-color-down: ButtonFace; - --highcontrast-button-content-color-focus: ButtonFace; + + --highcontrast-button-content-color-hover: HighlightText; + --highcontrast-button-content-color-down: HighlightText; + --highcontrast-button-content-color-focus: HighlightText; .spectrum-Button-label { forced-color-adjust: none; diff --git a/components/button/metadata/button-accent.yml b/components/button/metadata/button-accent.yml index 8d3be60b926..234a4f5e360 100644 --- a/components/button/metadata/button-accent.yml +++ b/components/button/metadata/button-accent.yml @@ -8,21 +8,29 @@ 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 - All buttons now require either the `.spectrum-Button--fill` or `.spectrum-Button--outline` class. - - ### CTA replaced by Accent with Fill - Replace all `.spectrum-Button--cta` with `.spectrum-Button--accent .spectrum-Button--fill`. + ### Version 13.0.0 + #### Spectrum 2 release + Button now uses Spectrum 2 tokens and specifications, which includes many color changes to all variants. A few other notable changes: + - Outline buttons are no longer available in accent and negative options — use the filled variant instead. + - Medium size is now the default. The class `.spectrum-Button--sizeM` is now unnecessary for this size, and has been removed. + - The `.spectrum-Button--fill` class is no longer needed and has been removed. + + The following `--mod` custom properties have been renamed: + - `--mod-line-height-100` has been renamed to `--mod-button-line-height`. + - `--mod-sans-font-family-stack` has been renamed to `--mod-button-font-family`. + - `--mod-animation-duration-100` has been renamed to `--mod-button-animation-duration`. + - `--mod-bold-font-weight` has been renamed to `--mod-button-font-weight`. + + ### Version 11.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. - ### Icon Only + ### Version 10.0.0 + #### 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 - 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: | Button classname | Workflow icon classname | @@ -32,8 +40,17 @@ sections: | `.spectrum-Button--sizeL` | `.spectrum-Icon--sizeL` | | `.spectrum-Button--sizeXL` | `.spectrum-Icon--sizeXL` | - ### 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. + ### Version 6.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 + Replace all `.spectrum-Button--cta` with `.spectrum-Button--accent .spectrum-Button--fill`. + + ### Version 3.0.0 + #### 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. + examples: - id: button-accent name: Sizing @@ -42,18 +59,18 @@ examples: <div class="spectrum-Examples-item"> <h4 class="spectrum-Heading spectrum-Heading--sizeXS spectrum-Examples-itemHeading">S</h4> - <button class="spectrum-Button spectrum-Button--fill spectrum-Button--accent spectrum-Button--sizeS"> + <button class="spectrum-Button spectrum-Button--accent spectrum-Button--sizeS"> <span class="spectrum-Button-label">Edit</span> </button> - <button class="spectrum-Button spectrum-Button--fill spectrum-Button--accent spectrum-Button--sizeS"> + <button class="spectrum-Button spectrum-Button--accent spectrum-Button--sizeS"> <svg class="spectrum-Icon spectrum-Icon--sizeS" focusable="false" aria-hidden="true"> <use xlink:href="#spectrum-icon-18-Edit" /> </svg> <span class="spectrum-Button-label">Edit</span> </button> - <button class="spectrum-Button spectrum-Button--fill spectrum-Button--accent spectrum-Button--sizeS spectrum-Button--iconOnly" aria-label="Edit"> + <button class="spectrum-Button spectrum-Button--accent spectrum-Button--sizeS spectrum-Button--iconOnly" aria-label="Edit"> <svg class="spectrum-Icon spectrum-Icon--sizeS" focusable="false" aria-hidden="true"> <use xlink:href="#spectrum-icon-18-Edit" /> </svg> @@ -62,18 +79,18 @@ examples: <div class="spectrum-Examples-item"> <h4 class="spectrum-Heading spectrum-Heading--sizeXS spectrum-Examples-itemHeading">M (default)</h4> - <button class="spectrum-Button spectrum-Button--fill spectrum-Button--accent spectrum-Button--sizeM"> + <button class="spectrum-Button spectrum-Button--accent"> <span class="spectrum-Button-label">Edit</span> </button> - <button class="spectrum-Button spectrum-Button--fill spectrum-Button--accent spectrum-Button--sizeM"> + <button class="spectrum-Button spectrum-Button--accent"> <svg class="spectrum-Icon spectrum-Icon--sizeM" focusable="false" aria-hidden="true"> <use xlink:href="#spectrum-icon-18-Edit" /> </svg> <span class="spectrum-Button-label">Edit</span> </button> - <button class="spectrum-Button spectrum-Button--fill spectrum-Button--accent spectrum-Button--sizeM spectrum-Button--iconOnly" aria-label="Edit"> + <button class="spectrum-Button spectrum-Button--accent spectrum-Button--iconOnly" aria-label="Edit"> <svg class="spectrum-Icon spectrum-Icon--sizeM" focusable="false" aria-hidden="true"> <use xlink:href="#spectrum-icon-18-Edit" /> </svg> @@ -83,18 +100,18 @@ examples: <div class="spectrum-Examples-item"> <h4 class="spectrum-Heading spectrum-Heading--sizeXS spectrum-Examples-itemHeading">L</h4> - <button class="spectrum-Button spectrum-Button--fill spectrum-Button--accent spectrum-Button--sizeL"> + <button class="spectrum-Button spectrum-Button--accent spectrum-Button--sizeL"> <span class="spectrum-Button-label">Edit</span> </button> - <button class="spectrum-Button spectrum-Button--fill spectrum-Button--accent spectrum-Button--sizeL"> + <button class="spectrum-Button spectrum-Button--accent spectrum-Button--sizeL"> <svg class="spectrum-Icon spectrum-Icon--sizeL" focusable="false" aria-hidden="true"> <use xlink:href="#spectrum-icon-18-Edit" /> </svg> <span class="spectrum-Button-label">Edit</span> </button> - <button class="spectrum-Button spectrum-Button--fill spectrum-Button--accent spectrum-Button--sizeL spectrum-Button--iconOnly" aria-label="Edit"> + <button class="spectrum-Button spectrum-Button--accent spectrum-Button--sizeL spectrum-Button--iconOnly" aria-label="Edit"> <svg class="spectrum-Icon spectrum-Icon--sizeL" focusable="false" aria-hidden="true"> <use xlink:href="#spectrum-icon-18-Edit" /> </svg> @@ -104,18 +121,18 @@ examples: <div class="spectrum-Examples-item"> <h4 class="spectrum-Heading spectrum-Heading--sizeXS spectrum-Examples-itemHeading">XL</h4> - <button class="spectrum-Button spectrum-Button--fill spectrum-Button--accent spectrum-Button--sizeXL"> + <button class="spectrum-Button spectrum-Button--accent spectrum-Button--sizeXL"> <span class="spectrum-Button-label">Edit</span> </button> - <button class="spectrum-Button spectrum-Button--fill spectrum-Button--accent spectrum-Button--sizeXL"> + <button class="spectrum-Button spectrum-Button--accent spectrum-Button--sizeXL"> <svg class="spectrum-Icon spectrum-Icon--sizeXL" focusable="false" aria-hidden="true"> <use xlink:href="#spectrum-icon-18-Edit" /> </svg> <span class="spectrum-Button-label">Edit</span> </button> - <button class="spectrum-Button spectrum-Button--fill spectrum-Button--accent spectrum-Button--sizeXL spectrum-Button--iconOnly" aria-label="Edit"> + <button class="spectrum-Button spectrum-Button--accent spectrum-Button--sizeXL spectrum-Button--iconOnly" aria-label="Edit"> <svg class="spectrum-Icon spectrum-Icon--sizeXL" focusable="false" aria-hidden="true"> <use xlink:href="#spectrum-icon-18-Edit" /> </svg> @@ -128,18 +145,18 @@ examples: markup: | <div class="spectrum-Examples"> <div class="spectrum-Examples-item"> - <button class="spectrum-Button spectrum-Button--sizeM spectrum-Button--fill spectrum-Button--accent" disabled> + <button class="spectrum-Button spectrum-Button--accent" disabled> <span class="spectrum-Button-label">Button</span> </button> - <button class="spectrum-Button spectrum-Button--sizeM spectrum-Button--fill spectrum-Button--accent" disabled> + <button class="spectrum-Button spectrum-Button--accent" disabled> <svg class="spectrum-Icon spectrum-Icon--sizeM" focusable="false" aria-hidden="true"> <use xlink:href="#spectrum-icon-18-Edit" /> </svg> <span class="spectrum-Button-label">Edit</span> </button> - <button class="spectrum-Button spectrum-Button--sizeM spectrum-Button--fill spectrum-Button--accent spectrum-Button--iconOnly" aria-label="Edit" disabled> + <button class="spectrum-Button spectrum-Button--accent spectrum-Button--iconOnly" aria-label="Edit" disabled> <svg class="spectrum-Icon spectrum-Icon--sizeM" focusable="false" aria-hidden="true"> <use xlink:href="#spectrum-icon-18-Edit" /> </svg> @@ -174,18 +191,18 @@ examples: <div class="spectrum-Examples-item"> <h4 class="spectrum-Heading spectrum-Heading--sizeXS spectrum-Examples-itemHeading">M (default)</h4> - <button class="spectrum-Button spectrum-Button--outline spectrum-Button--accent spectrum-Button--sizeM"> + <button class="spectrum-Button spectrum-Button--outline spectrum-Button--accent"> <span class="spectrum-Button-label">Edit</span> </button> - <button class="spectrum-Button spectrum-Button--outline spectrum-Button--accent spectrum-Button--sizeM"> + <button class="spectrum-Button spectrum-Button--outline spectrum-Button--accent"> <svg class="spectrum-Icon spectrum-Icon--sizeM" focusable="false" aria-hidden="true"> <use xlink:href="#spectrum-icon-18-Edit" /> </svg> <span class="spectrum-Button-label">Edit</span> </button> - <button class="spectrum-Button spectrum-Button--outline spectrum-Button--accent spectrum-Button--sizeM spectrum-Button--iconOnly" aria-label="Edit"> + <button class="spectrum-Button spectrum-Button--outline spectrum-Button--accent spectrum-Button--iconOnly" aria-label="Edit"> <svg class="spectrum-Icon spectrum-Icon--sizeM" focusable="false" aria-hidden="true"> <use xlink:href="#spectrum-icon-18-Edit" /> </svg> @@ -240,18 +257,18 @@ examples: markup: | <div class="spectrum-Examples"> <div class="spectrum-Examples-item"> - <button class="spectrum-Button spectrum-Button--sizeM spectrum-Button--outline spectrum-Button--accent" disabled> + <button class="spectrum-Button spectrum-Button--outline spectrum-Button--accent" disabled> <span class="spectrum-Button-label">Button</span> </button> - <button class="spectrum-Button spectrum-Button--sizeM spectrum-Button--outline spectrum-Button--accent" disabled> + <button class="spectrum-Button spectrum-Button--outline spectrum-Button--accent" disabled> <svg class="spectrum-Icon spectrum-Icon--sizeM" focusable="false" aria-hidden="true"> <use xlink:href="#spectrum-icon-18-Edit" /> </svg> <span class="spectrum-Button-label">Edit</span> </button> - <button class="spectrum-Button spectrum-Button--sizeM spectrum-Button--outline spectrum-Button--accent spectrum-Button--iconOnly" aria-label="Edit" disabled> + <button class="spectrum-Button spectrum-Button--outline spectrum-Button--accent spectrum-Button--iconOnly" aria-label="Edit" disabled> <svg class="spectrum-Icon spectrum-Icon--sizeM" focusable="false" aria-hidden="true"> <use xlink:href="#spectrum-icon-18-Edit" /> </svg> diff --git a/components/button/metadata/button-negative.yml b/components/button/metadata/button-negative.yml index 9acb42c7e1f..9cdce8eb913 100644 --- a/components/button/metadata/button-negative.yml +++ b/components/button/metadata/button-negative.yml @@ -8,24 +8,29 @@ 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 - All buttons now require either the `.spectrum-Button--fill` or `.spectrum-Button--outline` class. - - ### 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 - Replace all `.spectrum-Button--negative .spectrum-Button--quiet` with `.spectrum-Button--negative .spectrum-Button--outline`. + ### Version 13.0.0 + #### Spectrum 2 release + Button now uses Spectrum 2 tokens and specifications, which includes many color changes to all variants. A few other notable changes: + - Outline buttons are no longer available in accent and negative options — use the filled variant instead. + - Medium size is now the default. The class `.spectrum-Button--sizeM` is now unnecessary for this size, and has been removed. + - The `.spectrum-Button--fill` class is no longer needed and has been removed. + + The following `--mod` custom properties have been renamed: + - `--mod-line-height-100` has been renamed to `--mod-button-line-height`. + - `--mod-sans-font-family-stack` has been renamed to `--mod-button-font-family`. + - `--mod-animation-duration-100` has been renamed to `--mod-button-animation-duration`. + - `--mod-bold-font-weight` has been renamed to `--mod-button-font-weight`. + + ### Version 11.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. - ### Icon Only + ### Version 10.0.0 + #### 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 - 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: | Button classname | Workflow icon classname | @@ -35,8 +40,17 @@ sections: | `.spectrum-Button--sizeL` | `.spectrum-Icon--sizeL` | | `.spectrum-Button--sizeXL` | `.spectrum-Icon--sizeXL` | - ### 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. + ### Version 6.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 + Replace all `.spectrum-Button--cta` with `.spectrum-Button--accent .spectrum-Button--fill`. + + ### Version 3.0.0 + #### 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. + examples: - id: button-negative name: Sizing @@ -45,18 +59,18 @@ examples: <div class="spectrum-Examples-item"> <h4 class="spectrum-Heading spectrum-Heading--sizeXS spectrum-Examples-itemHeading">S</h4> - <button class="spectrum-Button spectrum-Button--fill spectrum-Button--negative spectrum-Button--sizeS"> + <button class="spectrum-Button spectrum-Button--negative spectrum-Button--sizeS"> <span class="spectrum-Button-label">Delete</span> </button> - <button class="spectrum-Button spectrum-Button--fill spectrum-Button--negative spectrum-Button--sizeS"> + <button class="spectrum-Button spectrum-Button--negative spectrum-Button--sizeS"> <svg class="spectrum-Icon spectrum-Icon--sizeS" focusable="false" aria-hidden="true"> <use xlink:href="#spectrum-icon-18-Delete" /> </svg> <span class="spectrum-Button-label">Delete</span> </button> - <button class="spectrum-Button spectrum-Button--fill spectrum-Button--negative spectrum-Button--sizeS spectrum-Button--iconOnly" aria-label="Delete"> + <button class="spectrum-Button spectrum-Button--negative spectrum-Button--sizeS spectrum-Button--iconOnly" aria-label="Delete"> <svg class="spectrum-Icon spectrum-Icon--sizeS" focusable="false" aria-hidden="true"> <use xlink:href="#spectrum-icon-18-Delete" /> </svg> @@ -65,18 +79,18 @@ examples: <div class="spectrum-Examples-item"> <h4 class="spectrum-Heading spectrum-Heading--sizeXS spectrum-Examples-itemHeading">M (default)</h4> - <button class="spectrum-Button spectrum-Button--fill spectrum-Button--negative spectrum-Button--sizeM"> + <button class="spectrum-Button spectrum-Button--negative"> <span class="spectrum-Button-label">Delete</span> </button> - <button class="spectrum-Button spectrum-Button--fill spectrum-Button--negative spectrum-Button--sizeM"> + <button class="spectrum-Button spectrum-Button--negative"> <svg class="spectrum-Icon spectrum-Icon--sizeM" focusable="false" aria-hidden="true"> <use xlink:href="#spectrum-icon-18-Delete" /> </svg> <span class="spectrum-Button-label">Delete</span> </button> - <button class="spectrum-Button spectrum-Button--fill spectrum-Button--negative spectrum-Button--sizeM spectrum-Button--iconOnly" aria-label="Delete"> + <button class="spectrum-Button spectrum-Button--negative spectrum-Button--iconOnly" aria-label="Delete"> <svg class="spectrum-Icon spectrum-Icon--sizeM" focusable="false" aria-hidden="true"> <use xlink:href="#spectrum-icon-18-Delete" /> </svg> @@ -86,18 +100,18 @@ examples: <div class="spectrum-Examples-item"> <h4 class="spectrum-Heading spectrum-Heading--sizeXS spectrum-Examples-itemHeading">L</h4> - <button class="spectrum-Button spectrum-Button--fill spectrum-Button--negative spectrum-Button--sizeL"> + <button class="spectrum-Button spectrum-Button--negative spectrum-Button--sizeL"> <span class="spectrum-Button-label">Delete</span> </button> - <button class="spectrum-Button spectrum-Button--fill spectrum-Button--negative spectrum-Button--sizeL"> + <button class="spectrum-Button spectrum-Button--negative spectrum-Button--sizeL"> <svg class="spectrum-Icon spectrum-Icon--sizeL" focusable="false" aria-hidden="true"> <use xlink:href="#spectrum-icon-18-Delete" /> </svg> <span class="spectrum-Button-label">Delete</span> </button> - <button class="spectrum-Button spectrum-Button--fill spectrum-Button--negative spectrum-Button--sizeL spectrum-Button--iconOnly" aria-label="Delete"> + <button class="spectrum-Button spectrum-Button--negative spectrum-Button--sizeL spectrum-Button--iconOnly" aria-label="Delete"> <svg class="spectrum-Icon spectrum-Icon--sizeL" focusable="false" aria-hidden="true"> <use xlink:href="#spectrum-icon-18-Delete" /> </svg> @@ -107,18 +121,18 @@ examples: <div class="spectrum-Examples-item"> <h4 class="spectrum-Heading spectrum-Heading--sizeXS spectrum-Examples-itemHeading">XL</h4> - <button class="spectrum-Button spectrum-Button--fill spectrum-Button--negative spectrum-Button--sizeXL"> + <button class="spectrum-Button spectrum-Button--negative spectrum-Button--sizeXL"> <span class="spectrum-Button-label">Delete</span> </button> - <button class="spectrum-Button spectrum-Button--fill spectrum-Button--negative spectrum-Button--sizeXL"> + <button class="spectrum-Button spectrum-Button--negative spectrum-Button--sizeXL"> <svg class="spectrum-Icon spectrum-Icon--sizeXL" focusable="false" aria-hidden="true"> <use xlink:href="#spectrum-icon-18-Delete" /> </svg> <span class="spectrum-Button-label">Delete</span> </button> - <button class="spectrum-Button spectrum-Button--fill spectrum-Button--negative spectrum-Button--sizeXL spectrum-Button--iconOnly" aria-label="Delete"> + <button class="spectrum-Button spectrum-Button--negative spectrum-Button--sizeXL spectrum-Button--iconOnly" aria-label="Delete"> <svg class="spectrum-Icon spectrum-Icon--sizeXL" focusable="false" aria-hidden="true"> <use xlink:href="#spectrum-icon-18-Delete" /> </svg> @@ -129,18 +143,18 @@ examples: - id: button-negative-disabled name: Disabled markup: | - <button class="spectrum-Button spectrum-Button--sizeM spectrum-Button--fill spectrum-Button--negative" disabled> + <button class="spectrum-Button spectrum-Button--negative" disabled> <span class="spectrum-Button-label">Delete</span> </button> - <button class="spectrum-Button spectrum-Button--sizeM spectrum-Button--fill spectrum-Button--negative" disabled> + <button class="spectrum-Button spectrum-Button--negative" disabled> <svg class="spectrum-Icon spectrum-Icon--sizeS" focusable="false" aria-hidden="true"> <use xlink:href="#spectrum-icon-18-Delete" /> </svg> <span class="spectrum-Button-label">Delete</span> </button> - <button class="spectrum-Button spectrum-Button--sizeM spectrum-Button--fill spectrum-Button--negative spectrum-Button--iconOnly" aria-label="Delete" disabled> + <button class="spectrum-Button spectrum-Button--negative spectrum-Button--iconOnly" aria-label="Delete" disabled> <svg class="spectrum-Icon spectrum-Icon--sizeM" focusable="false" aria-hidden="true"> <use xlink:href="#spectrum-icon-18-Delete" /> </svg> @@ -173,18 +187,18 @@ examples: <div class="spectrum-Examples-item"> <h4 class="spectrum-Heading spectrum-Heading--sizeXS spectrum-Examples-itemHeading">M (default)</h4> - <button class="spectrum-Button spectrum-Button--outline spectrum-Button--negative spectrum-Button--sizeM"> + <button class="spectrum-Button spectrum-Button--outline spectrum-Button--negative"> <span class="spectrum-Button-label">Delete</span> </button> - <button class="spectrum-Button spectrum-Button--outline spectrum-Button--negative spectrum-Button--sizeM"> + <button class="spectrum-Button spectrum-Button--outline spectrum-Button--negative"> <svg class="spectrum-Icon spectrum-Icon--sizeM" focusable="false" aria-hidden="true"> <use xlink:href="#spectrum-icon-18-Delete" /> </svg> <span class="spectrum-Button-label">Delete</span> </button> - <button class="spectrum-Button spectrum-Button--outline spectrum-Button--negative spectrum-Button--sizeM spectrum-Button--iconOnly" aria-label="Delete"> + <button class="spectrum-Button spectrum-Button--outline spectrum-Button--negative spectrum-Button--iconOnly" aria-label="Delete"> <svg class="spectrum-Icon spectrum-Icon--sizeM" focusable="false" aria-hidden="true"> <use xlink:href="#spectrum-icon-18-Delete" /> </svg> @@ -237,18 +251,18 @@ examples: - id: button-negative-outline-disabled name: Outline - Disabled markup: | - <button class="spectrum-Button spectrum-Button--sizeM spectrum-Button--outline spectrum-Button--negative" disabled> + <button class="spectrum-Button spectrum-Button--outline spectrum-Button--negative" disabled> <span class="spectrum-Button-label">Delete</span> </button> - <button class="spectrum-Button spectrum-Button--sizeM spectrum-Button--outline spectrum-Button--negative" disabled> + <button class="spectrum-Button spectrum-Button--outline spectrum-Button--negative" disabled> <svg class="spectrum-Icon spectrum-Icon--sizeS" focusable="false" aria-hidden="true"> <use xlink:href="#spectrum-icon-18-Delete" /> </svg> <span class="spectrum-Button-label">Delete</span> </button> - <button class="spectrum-Button spectrum-Button--sizeM spectrum-Button--outline spectrum-Button--negative spectrum-Button--iconOnly" disabled> + <button class="spectrum-Button spectrum-Button--outline spectrum-Button--negative spectrum-Button--iconOnly" disabled> <svg class="spectrum-Icon spectrum-Icon--sizeS" focusable="false" aria-hidden="true"> <use xlink:href="#spectrum-icon-18-Delete" /> </svg> diff --git a/components/button/metadata/button-pending.yml b/components/button/metadata/button-pending.yml index 1c9fd32a4ec..0e714e0f176 100644 --- a/components/button/metadata/button-pending.yml +++ b/components/button/metadata/button-pending.yml @@ -74,7 +74,7 @@ examples: <div class="spectrum-Examples-item"> <h4 class="spectrum-Heading spectrum-Heading--sizeXS spectrum-Examples-itemHeading">M (default)</h4> - <button class="spectrum-Button spectrum-Button--fill spectrum-Button--negative spectrum-Button--sizeM is-pending" disabled> + <button class="spectrum-Button spectrum-Button--fill spectrum-Button--negative is-pending" disabled> <span class="spectrum-Button-label">Edit</span> <div class="spectrum-ProgressCircle spectrum-ProgressCircle--indeterminate spectrum-ProgressCircle--small"> <div class="spectrum-ProgressCircle-track"></div> @@ -93,7 +93,7 @@ examples: </div> </button> - <button class="spectrum-Button spectrum-Button--fill spectrum-Button--negative spectrum-Button--sizeM is-pending" disabled> + <button class="spectrum-Button spectrum-Button--fill spectrum-Button--negative is-pending" disabled> <svg class="spectrum-Icon spectrum-Icon--sizeM" focusable="false" aria-hidden="true"> <use xlink:href="#spectrum-icon-18-Edit" /> </svg> @@ -115,7 +115,7 @@ examples: </div> </button> - <button class="spectrum-Button spectrum-Button--fill spectrum-Button--negative spectrum-Button--iconOnly spectrum-Button--sizeM is-pending" disabled> + <button class="spectrum-Button spectrum-Button--fill spectrum-Button--negative spectrum-Button--iconOnly is-pending" disabled> <svg class="spectrum-Icon spectrum-Icon--sizeM" focusable="false" aria-hidden="true"> <use xlink:href="#spectrum-icon-18-Edit" /> </svg> @@ -338,7 +338,7 @@ examples: <div class="spectrum-Examples-item"> <h4 class="spectrum-Heading spectrum-Heading--sizeXS spectrum-Examples-itemHeading">M (default)</h4> - <button class="spectrum-Button spectrum-Button--negative spectrum-Button--outline spectrum-Button--sizeM is-pending" disabled> + <button class="spectrum-Button spectrum-Button--negative spectrum-Button--outline is-pending" disabled> <span class="spectrum-Button-label">Edit</span> <div class="spectrum-ProgressCircle spectrum-ProgressCircle--indeterminate spectrum-ProgressCircle--small"> <div class="spectrum-ProgressCircle-track"></div> @@ -357,7 +357,7 @@ examples: </div> </button> - <button class="spectrum-Button spectrum-Button--negative spectrum-Button--outline spectrum-Button--sizeM is-pending" disabled> + <button class="spectrum-Button spectrum-Button--negative spectrum-Button--outline is-pending" disabled> <svg class="spectrum-Icon spectrum-Icon--sizeM" focusable="false" aria-hidden="true"> <use xlink:href="#spectrum-icon-18-Edit" /> </svg> @@ -379,7 +379,7 @@ examples: </div> </button> - <button class="spectrum-Button spectrum-Button--negative spectrum-Button--outline spectrum-Button--iconOnly spectrum-Button--sizeM is-pending" disabled> + <button class="spectrum-Button spectrum-Button--negative spectrum-Button--outline spectrum-Button--iconOnly is-pending" disabled> <svg class="spectrum-Icon spectrum-Icon--sizeM" focusable="false" aria-hidden="true"> <use xlink:href="#spectrum-icon-18-Edit" /> </svg> @@ -604,7 +604,7 @@ examples: <div class="spectrum-Examples-item"> <h4 class="spectrum-Heading spectrum-Heading--sizeXS spectrum-Examples-itemHeading">M (default)</h4> - <button class="spectrum-Button spectrum-Button--fill spectrum-Button--staticWhite spectrum-Button--sizeM is-pending" disabled> + <button class="spectrum-Button spectrum-Button--fill spectrum-Button--staticWhite is-pending" disabled> <span class="spectrum-Button-label">Edit</span> <div class="spectrum-ProgressCircle spectrum-ProgressCircle--indeterminate spectrum-ProgressCircle--small spectrum-ProgressCircle--staticWhite"> <div class="spectrum-ProgressCircle-track"></div> @@ -623,7 +623,7 @@ examples: </div> </button> - <button class="spectrum-Button spectrum-Button--fill spectrum-Button--staticWhite spectrum-Button--sizeM is-pending" disabled> + <button class="spectrum-Button spectrum-Button--fill spectrum-Button--staticWhite is-pending" disabled> <svg class="spectrum-Icon spectrum-Icon--sizeM" focusable="false" aria-hidden="true"> <use xlink:href="#spectrum-icon-18-Edit" /> </svg> @@ -645,7 +645,7 @@ examples: </div> </button> - <button class="spectrum-Button spectrum-Button--fill spectrum-Button--staticWhite spectrum-Button--iconOnly spectrum-Button--sizeM is-pending" disabled> + <button class="spectrum-Button spectrum-Button--fill spectrum-Button--staticWhite spectrum-Button--iconOnly is-pending" disabled> <svg class="spectrum-Icon spectrum-Icon--sizeM" focusable="false" aria-hidden="true"> <use xlink:href="#spectrum-icon-18-Edit" /> </svg> @@ -871,7 +871,7 @@ examples: <div class="spectrum-Examples-item"> <h4 class="spectrum-Heading spectrum-Heading--sizeXS spectrum-Examples-itemHeading">M (default)</h4> - <button class="spectrum-Button spectrum-Button--staticWhite spectrum-Button--outline spectrum-Button--sizeM is-pending" disabled> + <button class="spectrum-Button spectrum-Button--staticWhite spectrum-Button--outline is-pending" disabled> <span class="spectrum-Button-label">Edit</span> <div class="spectrum-ProgressCircle spectrum-ProgressCircle--indeterminate spectrum-ProgressCircle--small spectrum-ProgressCircle--staticWhite"> <div class="spectrum-ProgressCircle-track"></div> @@ -890,7 +890,7 @@ examples: </div> </button> - <button class="spectrum-Button spectrum-Button--staticWhite spectrum-Button--outline spectrum-Button--sizeM is-pending" disabled> + <button class="spectrum-Button spectrum-Button--staticWhite spectrum-Button--outline is-pending" disabled> <svg class="spectrum-Icon spectrum-Icon--sizeM" focusable="false" aria-hidden="true"> <use xlink:href="#spectrum-icon-18-Edit" /> </svg> @@ -912,7 +912,7 @@ examples: </div> </button> - <button class="spectrum-Button spectrum-Button--staticWhite spectrum-Button--outline spectrum-Button--iconOnly spectrum-Button--sizeM is-pending" disabled> + <button class="spectrum-Button spectrum-Button--staticWhite spectrum-Button--outline spectrum-Button--iconOnly is-pending" disabled> <svg class="spectrum-Icon spectrum-Icon--sizeM" focusable="false" aria-hidden="true"> <use xlink:href="#spectrum-icon-18-Edit" /> </svg> diff --git a/components/button/metadata/button-primary.yml b/components/button/metadata/button-primary.yml index e7bb7f449ec..11bad5f3061 100644 --- a/components/button/metadata/button-primary.yml +++ b/components/button/metadata/button-primary.yml @@ -8,24 +8,29 @@ 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 - All buttons now require either the `.spectrum-Button--fill` or `.spectrum-Button--outline` class. - - ### 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 - Replace all `.spectrum-Button--primary .spectrum-Button--quiet` with `.spectrum-Button--secondary .spectrum-Button--outline`. + ### Version 13.0.0 + #### Spectrum 2 release + Button now uses Spectrum 2 tokens and specifications, which includes many color changes to all variants. A few other notable changes: + - Outline buttons are no longer available in accent and negative options — use the filled variant instead. + - Medium size is now the default. The class `.spectrum-Button--sizeM` is now unnecessary for this size, and has been removed. + - The `.spectrum-Button--fill` class is no longer needed and has been removed. + + The following `--mod` custom properties have been renamed: + - `--mod-line-height-100` has been renamed to `--mod-button-line-height`. + - `--mod-sans-font-family-stack` has been renamed to `--mod-button-font-family`. + - `--mod-animation-duration-100` has been renamed to `--mod-button-animation-duration`. + - `--mod-bold-font-weight` has been renamed to `--mod-button-font-weight`. + + ### Version 11.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. - ### Icon Only + ### Version 10.0.0 + #### 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 - 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: | Button classname | Workflow icon classname | @@ -35,8 +40,17 @@ sections: | `.spectrum-Button--sizeL` | `.spectrum-Icon--sizeL` | | `.spectrum-Button--sizeXL` | `.spectrum-Icon--sizeXL` | - ### 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. + ### Version 6.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 + Replace all `.spectrum-Button--cta` with `.spectrum-Button--accent .spectrum-Button--fill`. + + ### Version 3.0.0 + #### 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. + examples: - id: button-primary name: Sizing @@ -45,18 +59,18 @@ examples: <div class="spectrum-Examples-item"> <h4 class="spectrum-Heading spectrum-Heading--sizeXS spectrum-Examples-itemHeading">S</h4> - <button class="spectrum-Button spectrum-Button--fill spectrum-Button--primary spectrum-Button--sizeS"> + <button class="spectrum-Button spectrum-Button--primary spectrum-Button--sizeS"> <span class="spectrum-Button-label">Edit</span> </button> - <button class="spectrum-Button spectrum-Button--fill spectrum-Button--primary spectrum-Button--sizeS"> + <button class="spectrum-Button spectrum-Button--primary spectrum-Button--sizeS"> <svg class="spectrum-Icon spectrum-Icon--sizeS" focusable="false" aria-hidden="true"> <use xlink:href="#spectrum-icon-18-Edit" /> </svg> <span class="spectrum-Button-label">Edit</span> </button> - <button class="spectrum-Button spectrum-Button--fill spectrum-Button--primary spectrum-Button--sizeS spectrum-Button--iconOnly" aria-label="Edit"> + <button class="spectrum-Button spectrum-Button--primary spectrum-Button--sizeS spectrum-Button--iconOnly" aria-label="Edit"> <svg class="spectrum-Icon spectrum-Icon--sizeS" focusable="false" aria-hidden="true"> <use xlink:href="#spectrum-icon-18-Edit" /> </svg> @@ -65,18 +79,18 @@ examples: <div class="spectrum-Examples-item"> <h4 class="spectrum-Heading spectrum-Heading--sizeXS spectrum-Examples-itemHeading">M (default)</h4> - <button class="spectrum-Button spectrum-Button--fill spectrum-Button--primary spectrum-Button--sizeM"> + <button class="spectrum-Button spectrum-Button--primary"> <span class="spectrum-Button-label">Edit</span> </button> - <button class="spectrum-Button spectrum-Button--fill spectrum-Button--primary spectrum-Button--sizeM"> + <button class="spectrum-Button spectrum-Button--primary"> <svg class="spectrum-Icon spectrum-Icon--sizeM" focusable="false" aria-hidden="true"> <use xlink:href="#spectrum-icon-18-Edit" /> </svg> <span class="spectrum-Button-label">Edit</span> </button> - <button class="spectrum-Button spectrum-Button--fill spectrum-Button--primary spectrum-Button--sizeM spectrum-Button--iconOnly" aria-label="Edit"> + <button class="spectrum-Button spectrum-Button--primary spectrum-Button--iconOnly" aria-label="Edit"> <svg class="spectrum-Icon spectrum-Icon--sizeM" focusable="false" aria-hidden="true"> <use xlink:href="#spectrum-icon-18-Edit" /> </svg> @@ -86,18 +100,18 @@ examples: <div class="spectrum-Examples-item"> <h4 class="spectrum-Heading spectrum-Heading--sizeXS spectrum-Examples-itemHeading">L</h4> - <button class="spectrum-Button spectrum-Button--fill spectrum-Button--primary spectrum-Button--sizeL"> + <button class="spectrum-Button spectrum-Button--primary spectrum-Button--sizeL"> <span class="spectrum-Button-label">Edit</span> </button> - <button class="spectrum-Button spectrum-Button--fill spectrum-Button--primary spectrum-Button--sizeL"> + <button class="spectrum-Button spectrum-Button--primary spectrum-Button--sizeL"> <svg class="spectrum-Icon spectrum-Icon--sizeL" focusable="false" aria-hidden="true"> <use xlink:href="#spectrum-icon-18-Edit" /> </svg> <span class="spectrum-Button-label">Edit</span> </button> - <button class="spectrum-Button spectrum-Button--fill spectrum-Button--primary spectrum-Button--sizeL spectrum-Button--iconOnly" aria-label="Edit"> + <button class="spectrum-Button spectrum-Button--primary spectrum-Button--sizeL spectrum-Button--iconOnly" aria-label="Edit"> <svg class="spectrum-Icon spectrum-Icon--sizeL" focusable="false" aria-hidden="true"> <use xlink:href="#spectrum-icon-18-Edit" /> </svg> @@ -107,18 +121,18 @@ examples: <div class="spectrum-Examples-item"> <h4 class="spectrum-Heading spectrum-Heading--sizeXS spectrum-Examples-itemHeading">XL</h4> - <button class="spectrum-Button spectrum-Button--fill spectrum-Button--primary spectrum-Button--sizeXL"> + <button class="spectrum-Button spectrum-Button--primary spectrum-Button--sizeXL"> <span class="spectrum-Button-label">Edit</span> </button> - <button class="spectrum-Button spectrum-Button--fill spectrum-Button--primary spectrum-Button--sizeXL"> + <button class="spectrum-Button spectrum-Button--primary spectrum-Button--sizeXL"> <svg class="spectrum-Icon spectrum-Icon--sizeXL" focusable="false" aria-hidden="true"> <use xlink:href="#spectrum-icon-18-Edit" /> </svg> <span class="spectrum-Button-label">Edit</span> </button> - <button class="spectrum-Button spectrum-Button--fill spectrum-Button--primary spectrum-Button--sizeXL spectrum-Button--iconOnly" aria-label="Edit"> + <button class="spectrum-Button spectrum-Button--primary spectrum-Button--sizeXL spectrum-Button--iconOnly" aria-label="Edit"> <svg class="spectrum-Icon spectrum-Icon--sizeXL" focusable="false" aria-hidden="true"> <use xlink:href="#spectrum-icon-18-Edit" /> </svg> @@ -129,18 +143,18 @@ examples: - id: button-primary-disabled name: Disabled markup: | - <button class="spectrum-Button spectrum-Button--sizeM spectrum-Button--fill spectrum-Button--primary" disabled> + <button class="spectrum-Button spectrum-Button--primary" disabled> <span class="spectrum-Button-label">Edit</span> </button> - <button class="spectrum-Button spectrum-Button--sizeM spectrum-Button--fill spectrum-Button--primary" disabled> + <button class="spectrum-Button spectrum-Button--primary" disabled> <svg class="spectrum-Icon spectrum-Icon--sizeS" focusable="false" aria-hidden="true"> <use xlink:href="#spectrum-icon-18-Edit" /> </svg> <span class="spectrum-Button-label">Edit</span> </button> - <button class="spectrum-Button spectrum-Button--sizeM spectrum-Button--fill spectrum-Button--primary spectrum-Button--iconOnly" aria-label="Edit" disabled> + <button class="spectrum-Button spectrum-Button--primary spectrum-Button--iconOnly" aria-label="Edit" disabled> <svg class="spectrum-Icon spectrum-Icon--sizeS" focusable="false" aria-hidden="true"> <use xlink:href="#spectrum-icon-18-Edit" /> </svg> @@ -173,18 +187,18 @@ examples: <div class="spectrum-Examples-item"> <h4 class="spectrum-Heading spectrum-Heading--sizeXS spectrum-Examples-itemHeading">M (default)</h4> - <button class="spectrum-Button spectrum-Button--outline spectrum-Button--primary spectrum-Button--sizeM"> + <button class="spectrum-Button spectrum-Button--outline spectrum-Button--primary"> <span class="spectrum-Button-label">Edit</span> </button> - <button class="spectrum-Button spectrum-Button--outline spectrum-Button--primary spectrum-Button--sizeM"> + <button class="spectrum-Button spectrum-Button--outline spectrum-Button--primary"> <svg class="spectrum-Icon spectrum-Icon--sizeM" focusable="false" aria-hidden="true"> <use xlink:href="#spectrum-icon-18-Edit" /> </svg> <span class="spectrum-Button-label">Edit</span> </button> - <button class="spectrum-Button spectrum-Button--outline spectrum-Button--primary spectrum-Button--sizeM spectrum-Button--iconOnly" aria-label="Edit"> + <button class="spectrum-Button spectrum-Button--outline spectrum-Button--primary spectrum-Button--iconOnly" aria-label="Edit"> <svg class="spectrum-Icon spectrum-Icon--sizeM" focusable="false" aria-hidden="true"> <use xlink:href="#spectrum-icon-18-Edit" /> </svg> @@ -237,18 +251,18 @@ examples: - id: button-primary-outline-disabled name: Outline - Disabled markup: | - <button class="spectrum-Button spectrum-Button--sizeM spectrum-Button--outline spectrum-Button--primary" disabled> + <button class="spectrum-Button spectrum-Button--outline spectrum-Button--primary" disabled> <span class="spectrum-Button-label">Edit</span> </button> - <button class="spectrum-Button spectrum-Button--sizeM spectrum-Button--outline spectrum-Button--primary" disabled> + <button class="spectrum-Button spectrum-Button--outline spectrum-Button--primary" disabled> <svg class="spectrum-Icon spectrum-Icon--sizeS" focusable="false" aria-hidden="true"> <use xlink:href="#spectrum-icon-18-Edit" /> </svg> <span class="spectrum-Button-label">Edit</span> </button> - <button class="spectrum-Button spectrum-Button--sizeM spectrum-Button--outline spectrum-Button--primary spectrum-Button--iconOnly" aria-label="Edit" disabled> + <button class="spectrum-Button spectrum-Button--outline spectrum-Button--primary spectrum-Button--iconOnly" aria-label="Edit" disabled> <svg class="spectrum-Icon spectrum-Icon--sizeS" focusable="false" aria-hidden="true"> <use xlink:href="#spectrum-icon-18-Edit" /> </svg> diff --git a/components/button/metadata/button-secondary.yml b/components/button/metadata/button-secondary.yml index 7b86a380ffc..56c71893e5a 100644 --- a/components/button/metadata/button-secondary.yml +++ b/components/button/metadata/button-secondary.yml @@ -8,24 +8,29 @@ 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 - All buttons now require either the `.spectrum-Button--fill` or `.spectrum-Button--outline` class. - - ### 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 - Replace all `.spectrum-Button--secondary .spectrum-Button--quiet` with `.spectrum-Button--secondary .spectrum-Button--outline`. + ### Version 13.0.0 + #### Spectrum 2 release + Button now uses Spectrum 2 tokens and specifications, which includes many color changes to all variants. A few other notable changes: + - Outline buttons are no longer available in accent and negative options — use the filled variant instead. + - Medium size is now the default. The class `.spectrum-Button--sizeM` is now unnecessary for this size, and has been removed. + - The `.spectrum-Button--fill` class is no longer needed and has been removed. + + The following `--mod` custom properties have been renamed: + - `--mod-line-height-100` has been renamed to `--mod-button-line-height`. + - `--mod-sans-font-family-stack` has been renamed to `--mod-button-font-family`. + - `--mod-animation-duration-100` has been renamed to `--mod-button-animation-duration`. + - `--mod-bold-font-weight` has been renamed to `--mod-button-font-weight`. + + ### Version 11.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. - ### Icon Only + ### Version 10.0.0 + #### 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 - 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: | Button classname | Workflow icon classname | @@ -35,8 +40,17 @@ sections: | `.spectrum-Button--sizeL` | `.spectrum-Icon--sizeL` | | `.spectrum-Button--sizeXL` | `.spectrum-Icon--sizeXL` | - ### 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. + ### Version 6.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 + Replace all `.spectrum-Button--cta` with `.spectrum-Button--accent .spectrum-Button--fill`. + + ### Version 3.0.0 + #### 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. + examples: - id: button-secondary name: Sizing @@ -45,18 +59,18 @@ examples: <div class="spectrum-Examples-item"> <h4 class="spectrum-Heading spectrum-Heading--sizeXS spectrum-Examples-itemHeading">S</h4> - <button class="spectrum-Button spectrum-Button--fill spectrum-Button--secondary spectrum-Button--sizeS"> + <button class="spectrum-Button spectrum-Button--secondary spectrum-Button--sizeS"> <span class="spectrum-Button-label">Edit</span> </button> - <button class="spectrum-Button spectrum-Button--fill spectrum-Button--secondary spectrum-Button--sizeS"> + <button class="spectrum-Button spectrum-Button--secondary spectrum-Button--sizeS"> <svg class="spectrum-Icon spectrum-Icon--sizeS" focusable="false" aria-hidden="true"> <use xlink:href="#spectrum-icon-18-Edit" /> </svg> <span class="spectrum-Button-label">Edit</span> </button> - <button class="spectrum-Button spectrum-Button--fill spectrum-Button--secondary spectrum-Button--sizeS spectrum-Button--iconOnly" aria-label="Edit"> + <button class="spectrum-Button spectrum-Button--secondary spectrum-Button--sizeS spectrum-Button--iconOnly" aria-label="Edit"> <svg class="spectrum-Icon spectrum-Icon--sizeS" focusable="false" aria-hidden="true"> <use xlink:href="#spectrum-icon-18-Edit" /> </svg> @@ -65,18 +79,18 @@ examples: <div class="spectrum-Examples-item"> <h4 class="spectrum-Heading spectrum-Heading--sizeXS spectrum-Examples-itemHeading">M (default)</h4> - <button class="spectrum-Button spectrum-Button--fill spectrum-Button--secondary spectrum-Button--sizeM"> + <button class="spectrum-Button spectrum-Button--secondary"> <span class="spectrum-Button-label">Edit</span> </button> - <button class="spectrum-Button spectrum-Button--fill spectrum-Button--secondary spectrum-Button--sizeM"> + <button class="spectrum-Button spectrum-Button--secondary"> <svg class="spectrum-Icon spectrum-Icon--sizeM" focusable="false" aria-hidden="true"> <use xlink:href="#spectrum-icon-18-Edit" /> </svg> <span class="spectrum-Button-label">Edit</span> </button> - <button class="spectrum-Button spectrum-Button--fill spectrum-Button--secondary spectrum-Button--sizeM spectrum-Button--iconOnly" aria-label="Edit"> + <button class="spectrum-Button spectrum-Button--secondary spectrum-Button--iconOnly" aria-label="Edit"> <svg class="spectrum-Icon spectrum-Icon--sizeM" focusable="false" aria-hidden="true"> <use xlink:href="#spectrum-icon-18-Edit" /> </svg> @@ -86,18 +100,18 @@ examples: <div class="spectrum-Examples-item"> <h4 class="spectrum-Heading spectrum-Heading--sizeXS spectrum-Examples-itemHeading">L</h4> - <button class="spectrum-Button spectrum-Button--fill spectrum-Button--secondary spectrum-Button--sizeL"> + <button class="spectrum-Button spectrum-Button--secondary spectrum-Button--sizeL"> <span class="spectrum-Button-label">Edit</span> </button> - <button class="spectrum-Button spectrum-Button--fill spectrum-Button--secondary spectrum-Button--sizeL"> + <button class="spectrum-Button spectrum-Button--secondary spectrum-Button--sizeL"> <svg class="spectrum-Icon spectrum-Icon--sizeL" focusable="false" aria-hidden="true"> <use xlink:href="#spectrum-icon-18-Edit" /> </svg> <span class="spectrum-Button-label">Edit</span> </button> - <button class="spectrum-Button spectrum-Button--fill spectrum-Button--secondary spectrum-Button--sizeL spectrum-Button--iconOnly" aria-label="Edit"> + <button class="spectrum-Button spectrum-Button--secondary spectrum-Button--sizeL spectrum-Button--iconOnly" aria-label="Edit"> <svg class="spectrum-Icon spectrum-Icon--sizeL" focusable="false" aria-hidden="true"> <use xlink:href="#spectrum-icon-18-Edit" /> </svg> @@ -107,18 +121,18 @@ examples: <div class="spectrum-Examples-item"> <h4 class="spectrum-Heading spectrum-Heading--sizeXS spectrum-Examples-itemHeading">XL</h4> - <button class="spectrum-Button spectrum-Button--fill spectrum-Button--secondary spectrum-Button--sizeXL"> + <button class="spectrum-Button spectrum-Button--secondary spectrum-Button--sizeXL"> <span class="spectrum-Button-label">Edit</span> </button> - <button class="spectrum-Button spectrum-Button--fill spectrum-Button--secondary spectrum-Button--sizeXL"> + <button class="spectrum-Button spectrum-Button--secondary spectrum-Button--sizeXL"> <svg class="spectrum-Icon spectrum-Icon--sizeXL" focusable="false" aria-hidden="true"> <use xlink:href="#spectrum-icon-18-Edit" /> </svg> <span class="spectrum-Button-label">Edit</span> </button> - <button class="spectrum-Button spectrum-Button--fill spectrum-Button--secondary spectrum-Button--sizeXL spectrum-Button--iconOnly" aria-label="Edit"> + <button class="spectrum-Button spectrum-Button--secondary spectrum-Button--sizeXL spectrum-Button--iconOnly" aria-label="Edit"> <svg class="spectrum-Icon spectrum-Icon--sizeXL" focusable="false" aria-hidden="true"> <use xlink:href="#spectrum-icon-18-Edit" /> </svg> @@ -129,18 +143,18 @@ examples: - id: button-secondary name: Disabled markup: | - <button class="spectrum-Button spectrum-Button--sizeM spectrum-Button--fill spectrum-Button--secondary" disabled> + <button class="spectrum-Button spectrum-Button--secondary" disabled> <span class="spectrum-Button-label">Edit</span> </button> - <button class="spectrum-Button spectrum-Button--sizeM spectrum-Button--fill spectrum-Button--secondary" disabled> + <button class="spectrum-Button spectrum-Button--secondary" disabled> <svg class="spectrum-Icon spectrum-Icon--sizeS" focusable="false" aria-hidden="true"> <use xlink:href="#spectrum-icon-18-Edit" /> </svg> <span class="spectrum-Button-label">Edit</span> </button> - <button class="spectrum-Button spectrum-Button--sizeM spectrum-Button--fill spectrum-Button--secondary spectrum-Button--iconOnly" aria-label="Edit" disabled> + <button class="spectrum-Button spectrum-Button--secondary spectrum-Button--iconOnly" aria-label="Edit" disabled> <svg class="spectrum-Icon spectrum-Icon--sizeS" focusable="false" aria-hidden="true"> <use xlink:href="#spectrum-icon-18-Edit" /> </svg> @@ -173,18 +187,18 @@ examples: <div class="spectrum-Examples-item"> <h4 class="spectrum-Heading spectrum-Heading--sizeXS spectrum-Examples-itemHeading">M (default)</h4> - <button class="spectrum-Button spectrum-Button--outline spectrum-Button--secondary spectrum-Button--sizeM"> + <button class="spectrum-Button spectrum-Button--outline spectrum-Button--secondary"> <span class="spectrum-Button-label">Edit</span> </button> - <button class="spectrum-Button spectrum-Button--outline spectrum-Button--secondary spectrum-Button--sizeM"> + <button class="spectrum-Button spectrum-Button--outline spectrum-Button--secondary"> <svg class="spectrum-Icon spectrum-Icon--sizeM" focusable="false" aria-hidden="true"> <use xlink:href="#spectrum-icon-18-Edit" /> </svg> <span class="spectrum-Button-label">Edit</span> </button> - <button class="spectrum-Button spectrum-Button--outline spectrum-Button--secondary spectrum-Button--sizeM spectrum-Button--iconOnly" aria-label="Edit"> + <button class="spectrum-Button spectrum-Button--outline spectrum-Button--secondary spectrum-Button--iconOnly" aria-label="Edit"> <svg class="spectrum-Icon spectrum-Icon--sizeM" focusable="false" aria-hidden="true"> <use xlink:href="#spectrum-icon-18-Edit" /> </svg> @@ -237,18 +251,18 @@ examples: - id: button-secondary-outline-disabled name: Outline - Disabled markup: | - <button class="spectrum-Button spectrum-Button--sizeM spectrum-Button--outline spectrum-Button--secondary" disabled> + <button class="spectrum-Button spectrum-Button--outline spectrum-Button--secondary" disabled> <span class="spectrum-Button-label">Edit</span> </button> - <button class="spectrum-Button spectrum-Button--sizeM spectrum-Button--outline spectrum-Button--secondary" disabled> + <button class="spectrum-Button spectrum-Button--outline spectrum-Button--secondary" disabled> <svg class="spectrum-Icon spectrum-Icon--sizeS" focusable="false" aria-hidden="true"> <use xlink:href="#spectrum-icon-18-Edit" /> </svg> <span class="spectrum-Button-label">Edit</span> </button> - <button class="spectrum-Button spectrum-Button--sizeM spectrum-Button--outline spectrum-Button--secondary spectrum-Button--iconOnly" aria-label="Edit" disabled> + <button class="spectrum-Button spectrum-Button--outline spectrum-Button--secondary spectrum-Button--iconOnly" aria-label="Edit" disabled> <svg class="spectrum-Icon spectrum-Icon--sizeS" focusable="false" aria-hidden="true"> <use xlink:href="#spectrum-icon-18-Edit" /> </svg> diff --git a/components/button/metadata/button-staticcolor.yml b/components/button/metadata/button-staticcolor.yml index ae8792424af..a797d01ee33 100644 --- a/components/button/metadata/button-staticcolor.yml +++ b/components/button/metadata/button-staticcolor.yml @@ -8,24 +8,29 @@ 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 - All buttons now require either the `.spectrum-Button--fill` or `.spectrum-Button--outline` class. - - ### 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 - Replace all `.spectrum-Button--overBackground .spectrum-Button--quiet` with `.spectrum-Button--staticWhite .spectrum-Button--outline`. + ### Version 13.0.0 + #### Spectrum 2 release + Button now uses Spectrum 2 tokens and specifications, which includes many color changes to all variants. A few other notable changes: + - Outline buttons are no longer available in accent and negative options — use the filled variant instead. + - Medium size is now the default. The class `.spectrum-Button--sizeM` is now unnecessary for this size, and has been removed. + - The `.spectrum-Button--fill` class is no longer needed and has been removed. + + The following `--mod` custom properties have been renamed: + - `--mod-line-height-100` has been renamed to `--mod-button-line-height`. + - `--mod-sans-font-family-stack` has been renamed to `--mod-button-font-family`. + - `--mod-animation-duration-100` has been renamed to `--mod-button-animation-duration`. + - `--mod-bold-font-weight` has been renamed to `--mod-button-font-weight`. + + ### Version 11.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. - ### Icon Only + ### Version 10.0.0 + #### 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 - 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: | Button classname | Workflow icon classname | @@ -35,29 +40,38 @@ sections: | `.spectrum-Button--sizeL` | `.spectrum-Icon--sizeL` | | `.spectrum-Button--sizeXL` | `.spectrum-Icon--sizeXL` | - ### 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. + ### Version 6.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 + Replace all `.spectrum-Button--cta` with `.spectrum-Button--accent .spectrum-Button--fill`. + + ### Version 3.0.0 + #### 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. + examples: - id: button-staticcolor name: Static White markup: | - <div style="background-color: rgb(15, 121, 125); color: rgb(15, 121, 125); --spectrum-alias-heading-text-color: white; padding: 15px 20px;"> + <div style="background-color: rgb(15, 121, 125); --mod-heading-font-color: white; padding: 15px 20px;"> <div class="spectrum-Examples"> <div class="spectrum-Examples-item"> <h4 class="spectrum-Heading spectrum-Heading--sizeXS spectrum-Examples-itemHeading">S</h4> - <button class="spectrum-Button spectrum-Button--fill spectrum-Button--staticWhite spectrum-Button--sizeS"> + <button class="spectrum-Button spectrum-Button--staticWhite spectrum-Button--sizeS"> <span class="spectrum-Button-label">Edit</span> </button> - <button class="spectrum-Button spectrum-Button--fill spectrum-Button--staticWhite spectrum-Button--sizeS"> + <button class="spectrum-Button spectrum-Button--staticWhite spectrum-Button--sizeS"> <svg class="spectrum-Icon spectrum-Icon--sizeS" focusable="false" aria-hidden="true"> <use xlink:href="#spectrum-icon-18-Edit" /> </svg> <span class="spectrum-Button-label">Edit</span> </button> - <button class="spectrum-Button spectrum-Button--fill spectrum-Button--staticWhite spectrum-Button--sizeS spectrum-Button--iconOnly" aria-label="Edit"> + <button class="spectrum-Button spectrum-Button--staticWhite spectrum-Button--sizeS spectrum-Button--iconOnly" aria-label="Edit"> <svg class="spectrum-Icon spectrum-Icon--sizeS" focusable="false" aria-hidden="true"> <use xlink:href="#spectrum-icon-18-Edit" /> </svg> @@ -66,18 +80,18 @@ examples: <div class="spectrum-Examples-item"> <h4 class="spectrum-Heading spectrum-Heading--sizeXS spectrum-Examples-itemHeading">M (default)</h4> - <button class="spectrum-Button spectrum-Button--fill spectrum-Button--staticWhite spectrum-Button--sizeM"> + <button class="spectrum-Button spectrum-Button--staticWhite"> <span class="spectrum-Button-label">Edit</span> </button> - <button class="spectrum-Button spectrum-Button--fill spectrum-Button--staticWhite spectrum-Button--sizeM"> + <button class="spectrum-Button spectrum-Button--staticWhite"> <svg class="spectrum-Icon spectrum-Icon--sizeM" focusable="false" aria-hidden="true"> <use xlink:href="#spectrum-icon-18-Edit" /> </svg> <span class="spectrum-Button-label">Edit</span> </button> - <button class="spectrum-Button spectrum-Button--fill spectrum-Button--staticWhite spectrum-Button--sizeM spectrum-Button--iconOnly" aria-label="Edit"> + <button class="spectrum-Button spectrum-Button--staticWhite spectrum-Button--iconOnly" aria-label="Edit"> <svg class="spectrum-Icon spectrum-Icon--sizeM" focusable="false" aria-hidden="true"> <use xlink:href="#spectrum-icon-18-Edit" /> </svg> @@ -87,18 +101,18 @@ examples: <div class="spectrum-Examples-item"> <h4 class="spectrum-Heading spectrum-Heading--sizeXS spectrum-Examples-itemHeading">L</h4> - <button class="spectrum-Button spectrum-Button--fill spectrum-Button--staticWhite spectrum-Button--sizeL"> + <button class="spectrum-Button spectrum-Button--staticWhite spectrum-Button--sizeL"> <span class="spectrum-Button-label">Edit</span> </button> - <button class="spectrum-Button spectrum-Button--fill spectrum-Button--staticWhite spectrum-Button--sizeL"> + <button class="spectrum-Button spectrum-Button--staticWhite spectrum-Button--sizeL"> <svg class="spectrum-Icon spectrum-Icon--sizeL" focusable="false" aria-hidden="true"> <use xlink:href="#spectrum-icon-18-Edit" /> </svg> <span class="spectrum-Button-label">Edit</span> </button> - <button class="spectrum-Button spectrum-Button--fill spectrum-Button--staticWhite spectrum-Button--sizeL spectrum-Button--iconOnly" aria-label="Edit"> + <button class="spectrum-Button spectrum-Button--staticWhite spectrum-Button--sizeL spectrum-Button--iconOnly" aria-label="Edit"> <svg class="spectrum-Icon spectrum-Icon--sizeL" focusable="false" aria-hidden="true"> <use xlink:href="#spectrum-icon-18-Edit" /> </svg> @@ -108,18 +122,18 @@ examples: <div class="spectrum-Examples-item"> <h4 class="spectrum-Heading spectrum-Heading--sizeXS spectrum-Examples-itemHeading">XL</h4> - <button class="spectrum-Button spectrum-Button--fill spectrum-Button--staticWhite spectrum-Button--sizeXL"> + <button class="spectrum-Button spectrum-Button--staticWhite spectrum-Button--sizeXL"> <span class="spectrum-Button-label">Edit</span> </button> - <button class="spectrum-Button spectrum-Button--fill spectrum-Button--staticWhite spectrum-Button--sizeXL"> + <button class="spectrum-Button spectrum-Button--staticWhite spectrum-Button--sizeXL"> <svg class="spectrum-Icon spectrum-Icon--sizeXL" focusable="false" aria-hidden="true"> <use xlink:href="#spectrum-icon-18-Edit" /> </svg> <span class="spectrum-Button-label">Edit</span> </button> - <button class="spectrum-Button spectrum-Button--fill spectrum-Button--staticWhite spectrum-Button--sizeXL spectrum-Button--iconOnly" aria-label="Edit"> + <button class="spectrum-Button spectrum-Button--staticWhite spectrum-Button--sizeXL spectrum-Button--iconOnly" aria-label="Edit"> <svg class="spectrum-Icon spectrum-Icon--sizeXL" focusable="false" aria-hidden="true"> <use xlink:href="#spectrum-icon-18-Edit" /> </svg> @@ -131,19 +145,19 @@ examples: - id: button-staticcolor name: Static White - Disabled markup: | - <div style="background-color: rgb(15, 121, 125); color: rgb(15, 121, 125); padding: 15px 20px;"> - <button class="spectrum-Button spectrum-Button--sizeM spectrum-Button--fill spectrum-Button--staticWhite" disabled> + <div style="background-color: rgb(15, 121, 125); padding: 15px 20px;"> + <button class="spectrum-Button spectrum-Button--staticWhite" disabled> <span class="spectrum-Button-label">Edit</span> </button> - <button class="spectrum-Button spectrum-Button--sizeM spectrum-Button--fill spectrum-Button--staticWhite" disabled> + <button class="spectrum-Button spectrum-Button--staticWhite" disabled> <svg class="spectrum-Icon spectrum-Icon--sizeS" focusable="false" aria-hidden="true"> <use xlink:href="#spectrum-icon-18-Edit" /> </svg> <span class="spectrum-Button-label">Edit</span> </button> - <button class="spectrum-Button spectrum-Button--sizeM spectrum-Button--fill spectrum-Button--staticWhite spectrum-Button--iconOnly" aria-label="Edit" disabled> + <button class="spectrum-Button spectrum-Button--staticWhite spectrum-Button--iconOnly" aria-label="Edit" disabled> <svg class="spectrum-Icon spectrum-Icon--sizeS" focusable="false" aria-hidden="true"> <use xlink:href="#spectrum-icon-18-Edit" /> </svg> @@ -153,19 +167,19 @@ examples: - id: button-staticcolor name: Static White - Secondary markup: | - <div style="background-color: rgb(15, 121, 125); color: rgb(15, 121, 125); padding: 15px 20px;"> - <button class="spectrum-Button spectrum-Button--sizeM spectrum-Button--fill spectrum-Button--staticWhite spectrum-Button--secondary"> + <div style="background-color: rgb(15, 121, 125); padding: 15px 20px;"> + <button class="spectrum-Button spectrum-Button--staticWhite spectrum-Button--secondary"> <span class="spectrum-Button-label">Edit</span> </button> - <button class="spectrum-Button spectrum-Button--sizeM spectrum-Button--fill spectrum-Button--staticWhite spectrum-Button--secondary"> + <button class="spectrum-Button spectrum-Button--staticWhite spectrum-Button--secondary"> <svg class="spectrum-Icon spectrum-Icon--sizeS" focusable="false" aria-hidden="true"> <use xlink:href="#spectrum-icon-18-Edit" /> </svg> <span class="spectrum-Button-label">Edit</span> </button> - <button class="spectrum-Button spectrum-Button--sizeM spectrum-Button--fill spectrum-Button--staticWhite spectrum-Button--secondary spectrum-Button--iconOnly" aria-label="Edit"> + <button class="spectrum-Button spectrum-Button--staticWhite spectrum-Button--secondary spectrum-Button--iconOnly" aria-label="Edit"> <svg class="spectrum-Icon spectrum-Icon--sizeS" focusable="false" aria-hidden="true"> <use xlink:href="#spectrum-icon-18-Edit" /> </svg> @@ -175,23 +189,23 @@ examples: - id: button-staticcolor name: Static Black markup: | - <div style="background-color: rgb(181, 209, 211); color: rgb(181, 209, 211); padding: 15px 20px;"> + <div style="background-color: rgb(181, 209, 211); --mod-heading-font-color: black; padding: 15px 20px;"> <div class="spectrum-Examples"> <div class="spectrum-Examples-item"> <h4 class="spectrum-Heading spectrum-Heading--sizeXS spectrum-Examples-itemHeading">S</h4> - <button class="spectrum-Button spectrum-Button--fill spectrum-Button--staticBlack spectrum-Button--sizeS"> + <button class="spectrum-Button spectrum-Button--staticBlack spectrum-Button--sizeS"> <span class="spectrum-Button-label">Edit</span> </button> - <button class="spectrum-Button spectrum-Button--fill spectrum-Button--staticBlack spectrum-Button--sizeS"> + <button class="spectrum-Button spectrum-Button--staticBlack spectrum-Button--sizeS"> <svg class="spectrum-Icon spectrum-Icon--sizeS" focusable="false" aria-hidden="true"> <use xlink:href="#spectrum-icon-18-Edit" /> </svg> <span class="spectrum-Button-label">Edit</span> </button> - <button class="spectrum-Button spectrum-Button--fill spectrum-Button--staticBlack spectrum-Button--sizeS spectrum-Button--iconOnly" aria-label="Edit"> + <button class="spectrum-Button spectrum-Button--staticBlack spectrum-Button--sizeS spectrum-Button--iconOnly" aria-label="Edit"> <svg class="spectrum-Icon spectrum-Icon--sizeS" focusable="false" aria-hidden="true"> <use xlink:href="#spectrum-icon-18-Edit" /> </svg> @@ -200,18 +214,18 @@ examples: <div class="spectrum-Examples-item"> <h4 class="spectrum-Heading spectrum-Heading--sizeXS spectrum-Examples-itemHeading">M (default)</h4> - <button class="spectrum-Button spectrum-Button--fill spectrum-Button--staticBlack spectrum-Button--sizeM"> + <button class="spectrum-Button spectrum-Button--staticBlack"> <span class="spectrum-Button-label">Edit</span> </button> - <button class="spectrum-Button spectrum-Button--fill spectrum-Button--staticBlack spectrum-Button--sizeM"> + <button class="spectrum-Button spectrum-Button--staticBlack"> <svg class="spectrum-Icon spectrum-Icon--sizeM" focusable="false" aria-hidden="true"> <use xlink:href="#spectrum-icon-18-Edit" /> </svg> <span class="spectrum-Button-label">Edit</span> </button> - <button class="spectrum-Button spectrum-Button--fill spectrum-Button--staticBlack spectrum-Button--sizeM spectrum-Button--iconOnly" aria-label="Edit"> + <button class="spectrum-Button spectrum-Button--staticBlack spectrum-Button--iconOnly" aria-label="Edit"> <svg class="spectrum-Icon spectrum-Icon--sizeM" focusable="false" aria-hidden="true"> <use xlink:href="#spectrum-icon-18-Edit" /> </svg> @@ -221,18 +235,18 @@ examples: <div class="spectrum-Examples-item"> <h4 class="spectrum-Heading spectrum-Heading--sizeXS spectrum-Examples-itemHeading">L</h4> - <button class="spectrum-Button spectrum-Button--fill spectrum-Button--staticBlack spectrum-Button--sizeL"> + <button class="spectrum-Button spectrum-Button--staticBlack spectrum-Button--sizeL"> <span class="spectrum-Button-label">Edit</span> </button> - <button class="spectrum-Button spectrum-Button--fill spectrum-Button--staticBlack spectrum-Button--sizeL"> + <button class="spectrum-Button spectrum-Button--staticBlack spectrum-Button--sizeL"> <svg class="spectrum-Icon spectrum-Icon--sizeL" focusable="false" aria-hidden="true"> <use xlink:href="#spectrum-icon-18-Edit" /> </svg> <span class="spectrum-Button-label">Edit</span> </button> - <button class="spectrum-Button spectrum-Button--fill spectrum-Button--staticBlack spectrum-Button--sizeL spectrum-Button--iconOnly" aria-label="Edit"> + <button class="spectrum-Button spectrum-Button--staticBlack spectrum-Button--sizeL spectrum-Button--iconOnly" aria-label="Edit"> <svg class="spectrum-Icon spectrum-Icon--sizeL" focusable="false" aria-hidden="true"> <use xlink:href="#spectrum-icon-18-Edit" /> </svg> @@ -242,18 +256,18 @@ examples: <div class="spectrum-Examples-item"> <h4 class="spectrum-Heading spectrum-Heading--sizeXS spectrum-Examples-itemHeading">XL</h4> - <button class="spectrum-Button spectrum-Button--fill spectrum-Button--staticBlack spectrum-Button--sizeXL"> + <button class="spectrum-Button spectrum-Button--staticBlack spectrum-Button--sizeXL"> <span class="spectrum-Button-label">Edit</span> </button> - <button class="spectrum-Button spectrum-Button--fill spectrum-Button--staticBlack spectrum-Button--sizeXL"> + <button class="spectrum-Button spectrum-Button--staticBlack spectrum-Button--sizeXL"> <svg class="spectrum-Icon spectrum-Icon--sizeXL" focusable="false" aria-hidden="true"> <use xlink:href="#spectrum-icon-18-Edit" /> </svg> <span class="spectrum-Button-label">Edit</span> </button> - <button class="spectrum-Button spectrum-Button--fill spectrum-Button--staticBlack spectrum-Button--sizeXL spectrum-Button--iconOnly" aria-label="Edit"> + <button class="spectrum-Button spectrum-Button--staticBlack spectrum-Button--sizeXL spectrum-Button--iconOnly" aria-label="Edit"> <svg class="spectrum-Icon spectrum-Icon--sizeXL" focusable="false" aria-hidden="true"> <use xlink:href="#spectrum-icon-18-Edit" /> </svg> @@ -265,19 +279,19 @@ examples: - id: button-staticcolor name: Static Black - Disabled markup: | - <div style="background-color: rgb(181, 209, 211); color: rgb(181, 209, 211); padding: 15px 20px;"> - <button class="spectrum-Button spectrum-Button--sizeM spectrum-Button--fill spectrum-Button--staticBlack" disabled> + <div style="background-color: rgb(181, 209, 211); padding: 15px 20px;"> + <button class="spectrum-Button spectrum-Button--staticBlack" disabled> <span class="spectrum-Button-label">Edit</span> </button> - <button class="spectrum-Button spectrum-Button--sizeM spectrum-Button--fill spectrum-Button--staticBlack" disabled> + <button class="spectrum-Button spectrum-Button--staticBlack" disabled> <svg class="spectrum-Icon spectrum-Icon--sizeS" focusable="false" aria-hidden="true"> <use xlink:href="#spectrum-icon-18-Edit" /> </svg> <span class="spectrum-Button-label">Edit</span> </button> - <button class="spectrum-Button spectrum-Button--sizeM spectrum-Button--fill spectrum-Button--staticBlack spectrum-Button--iconOnly" aria-label="Edit" disabled> + <button class="spectrum-Button spectrum-Button--staticBlack spectrum-Button--iconOnly" aria-label="Edit" disabled> <svg class="spectrum-Icon spectrum-Icon--sizeS" focusable="false" aria-hidden="true"> <use xlink:href="#spectrum-icon-18-Edit" /> </svg> @@ -288,18 +302,18 @@ examples: name: Static Black - Secondary markup: | <div style="background-color: rgb(181, 209, 211); color: rgb(181, 209, 211); padding: 15px 20px;"> - <button class="spectrum-Button spectrum-Button--sizeM spectrum-Button--fill spectrum-Button--staticBlack spectrum-Button--secondary"> + <button class="spectrum-Button spectrum-Button--staticBlack spectrum-Button--secondary"> <span class="spectrum-Button-label">Edit</span> </button> - <button class="spectrum-Button spectrum-Button--sizeM spectrum-Button--fill spectrum-Button--staticBlack spectrum-Button--secondary"> + <button class="spectrum-Button spectrum-Button--staticBlack spectrum-Button--secondary"> <svg class="spectrum-Icon spectrum-Icon--sizeS" focusable="false" aria-hidden="true"> <use xlink:href="#spectrum-icon-18-Edit" /> </svg> <span class="spectrum-Button-label">Edit</span> </button> - <button class="spectrum-Button spectrum-Button--sizeM spectrum-Button--fill spectrum-Button--staticBlack spectrum-Button--secondary spectrum-Button--iconOnly" aria-label="Edit"> + <button class="spectrum-Button spectrum-Button--staticBlack spectrum-Button--secondary spectrum-Button--iconOnly" aria-label="Edit"> <svg class="spectrum-Icon spectrum-Icon--sizeS" focusable="false" aria-hidden="true"> <use xlink:href="#spectrum-icon-18-Edit" /> </svg> @@ -309,7 +323,7 @@ examples: - id: button-staticcolor name: Static White - Outline markup: | - <div style="background-color: rgb(15, 121, 125); color: rgb(15, 121, 125); --spectrum-alias-heading-text-color: white; padding: 15px 20px;"> + <div style="background-color: rgb(15, 121, 125); --mod-heading-font-color: white; padding: 15px 20px;"> <div class="spectrum-Examples"> <div class="spectrum-Examples-item"> <h4 class="spectrum-Heading spectrum-Heading--sizeXS spectrum-Examples-itemHeading">S</h4> @@ -334,18 +348,18 @@ examples: <div class="spectrum-Examples-item"> <h4 class="spectrum-Heading spectrum-Heading--sizeXS spectrum-Examples-itemHeading">M (default)</h4> - <button class="spectrum-Button spectrum-Button--outline spectrum-Button--staticWhite spectrum-Button--sizeM"> + <button class="spectrum-Button spectrum-Button--outline spectrum-Button--staticWhite"> <span class="spectrum-Button-label">Edit</span> </button> - <button class="spectrum-Button spectrum-Button--outline spectrum-Button--staticWhite spectrum-Button--sizeM"> + <button class="spectrum-Button spectrum-Button--outline spectrum-Button--staticWhite"> <svg class="spectrum-Icon spectrum-Icon--sizeM" focusable="false" aria-hidden="true"> <use xlink:href="#spectrum-icon-18-Edit" /> </svg> <span class="spectrum-Button-label">Edit</span> </button> - <button class="spectrum-Button spectrum-Button--outline spectrum-Button--staticWhite spectrum-Button--sizeM spectrum-Button--iconOnly" aria-label="Edit"> + <button class="spectrum-Button spectrum-Button--outline spectrum-Button--staticWhite spectrum-Button--iconOnly" aria-label="Edit"> <svg class="spectrum-Icon spectrum-Icon--sizeM" focusable="false" aria-hidden="true"> <use xlink:href="#spectrum-icon-18-Edit" /> </svg> @@ -399,19 +413,19 @@ examples: - id: button-staticcolor name: Static White - Outline, Disabled markup: | - <div style="background-color: rgb(15, 121, 125); color: rgb(15, 121, 125); padding: 15px 20px;"> - <button class="spectrum-Button spectrum-Button--sizeM spectrum-Button--outline spectrum-Button--staticWhite" disabled> + <div style="background-color: rgb(15, 121, 125); padding: 15px 20px;"> + <button class="spectrum-Button spectrum-Button--outline spectrum-Button--staticWhite" disabled> <span class="spectrum-Button-label">Edit</span> </button> - <button class="spectrum-Button spectrum-Button--sizeM spectrum-Button--outline spectrum-Button--staticWhite" disabled> + <button class="spectrum-Button spectrum-Button--outline spectrum-Button--staticWhite" disabled> <svg class="spectrum-Icon spectrum-Icon--sizeS" focusable="false" aria-hidden="true"> <use xlink:href="#spectrum-icon-18-Edit" /> </svg> <span class="spectrum-Button-label">Edit</span> </button> - <button class="spectrum-Button spectrum-Button--sizeM spectrum-Button--outline spectrum-Button--staticWhite spectrum-Button--iconOnly" aria-label="Edit" disabled> + <button class="spectrum-Button spectrum-Button--outline spectrum-Button--staticWhite spectrum-Button--iconOnly" aria-label="Edit" disabled> <svg class="spectrum-Icon spectrum-Icon--sizeS" focusable="false" aria-hidden="true"> <use xlink:href="#spectrum-icon-18-Edit" /> </svg> @@ -421,19 +435,19 @@ examples: - id: button-staticcolor name: Static White - Outline, Secondary markup: | - <div style="background-color: rgb(15, 121, 125); color: rgb(15, 121, 125); padding: 15px 20px;"> - <button class="spectrum-Button spectrum-Button--sizeM spectrum-Button--outline spectrum-Button--staticWhite spectrum-Button--secondary"> + <div style="background-color: rgb(15, 121, 125); padding: 15px 20px;"> + <button class="spectrum-Button spectrum-Button--outline spectrum-Button--staticWhite spectrum-Button--secondary"> <span class="spectrum-Button-label">Edit</span> </button> - <button class="spectrum-Button spectrum-Button--sizeM spectrum-Button--outline spectrum-Button--staticWhite spectrum-Button--secondary"> + <button class="spectrum-Button spectrum-Button--outline spectrum-Button--staticWhite spectrum-Button--secondary"> <svg class="spectrum-Icon spectrum-Icon--sizeS" focusable="false" aria-hidden="true"> <use xlink:href="#spectrum-icon-18-Edit" /> </svg> <span class="spectrum-Button-label">Edit</span> </button> - <button class="spectrum-Button spectrum-Button--sizeM spectrum-Button--outline spectrum-Button--staticWhite spectrum-Button--secondary spectrum-Button--iconOnly" aria-label="Edit"> + <button class="spectrum-Button spectrum-Button--outline spectrum-Button--staticWhite spectrum-Button--secondary spectrum-Button--iconOnly" aria-label="Edit"> <svg class="spectrum-Icon spectrum-Icon--sizeS" focusable="false" aria-hidden="true"> <use xlink:href="#spectrum-icon-18-Edit" /> </svg> @@ -443,7 +457,7 @@ examples: - id: button-staticcolor name: Static Black - Outline markup: | - <div style="background-color: rgb(181, 209, 211); color: rgb(181, 209, 211); padding: 15px 20px;"> + <div style="background-color: rgb(181, 209, 211); --mod-heading-font-color: black; padding: 15px 20px;"> <div class="spectrum-Examples"> <div class="spectrum-Examples-item"> <h4 class="spectrum-Heading spectrum-Heading--sizeXS spectrum-Examples-itemHeading">S</h4> @@ -468,18 +482,18 @@ examples: <div class="spectrum-Examples-item"> <h4 class="spectrum-Heading spectrum-Heading--sizeXS spectrum-Examples-itemHeading">M (default)</h4> - <button class="spectrum-Button spectrum-Button--outline spectrum-Button--staticBlack spectrum-Button--sizeM"> + <button class="spectrum-Button spectrum-Button--outline spectrum-Button--staticBlack"> <span class="spectrum-Button-label">Edit</span> </button> - <button class="spectrum-Button spectrum-Button--outline spectrum-Button--staticBlack spectrum-Button--sizeM"> + <button class="spectrum-Button spectrum-Button--outline spectrum-Button--staticBlack"> <svg class="spectrum-Icon spectrum-Icon--sizeM" focusable="false" aria-hidden="true"> <use xlink:href="#spectrum-icon-18-Edit" /> </svg> <span class="spectrum-Button-label">Edit</span> </button> - <button class="spectrum-Button spectrum-Button--outline spectrum-Button--staticBlack spectrum-Button--sizeM spectrum-Button--iconOnly" aria-label="Edit"> + <button class="spectrum-Button spectrum-Button--outline spectrum-Button--staticBlack spectrum-Button--iconOnly" aria-label="Edit"> <svg class="spectrum-Icon spectrum-Icon--sizeM" focusable="false" aria-hidden="true"> <use xlink:href="#spectrum-icon-18-Edit" /> </svg> @@ -533,19 +547,19 @@ examples: - id: button-staticcolor name: Static Black - Outline, Disabled markup: | - <div style="background-color: rgb(181, 209, 211); color: rgb(181, 209, 211); padding: 15px 20px;"> - <button class="spectrum-Button spectrum-Button--sizeM spectrum-Button--outline spectrum-Button--staticBlack" disabled> + <div style="background-color: rgb(181, 209, 211); padding: 15px 20px;"> + <button class="spectrum-Button spectrum-Button--outline spectrum-Button--staticBlack" disabled> <span class="spectrum-Button-label">Edit</span> </button> - <button class="spectrum-Button spectrum-Button--sizeM spectrum-Button--outline spectrum-Button--staticBlack" disabled> + <button class="spectrum-Button spectrum-Button--outline spectrum-Button--staticBlack" disabled> <svg class="spectrum-Icon spectrum-Icon--sizeS" focusable="false" aria-hidden="true"> <use xlink:href="#spectrum-icon-18-Edit" /> </svg> <span class="spectrum-Button-label">Edit</span> </button> - <button class="spectrum-Button spectrum-Button--sizeM spectrum-Button--outline spectrum-Button--staticBlack spectrum-Button--iconOnly" aria-label="Edit" disabled> + <button class="spectrum-Button spectrum-Button--outline spectrum-Button--staticBlack spectrum-Button--iconOnly" aria-label="Edit" disabled> <svg class="spectrum-Icon spectrum-Icon--sizeS" focusable="false" aria-hidden="true"> <use xlink:href="#spectrum-icon-18-Edit" /> </svg> @@ -555,19 +569,19 @@ examples: - id: button-staticcolor name: Static Black - Outline, Secondary markup: | - <div style="background-color: rgb(181, 209, 211); color: rgb(181, 209, 211); padding: 15px 20px;"> - <button class="spectrum-Button spectrum-Button--sizeM spectrum-Button--outline spectrum-Button--staticBlack spectrum-Button--secondary"> + <div style="background-color: rgb(181, 209, 211); padding: 15px 20px;"> + <button class="spectrum-Button spectrum-Button--outline spectrum-Button--staticBlack spectrum-Button--secondary"> <span class="spectrum-Button-label">Edit</span> </button> - <button class="spectrum-Button spectrum-Button--sizeM spectrum-Button--outline spectrum-Button--staticBlack spectrum-Button--secondary"> + <button class="spectrum-Button spectrum-Button--outline spectrum-Button--staticBlack spectrum-Button--secondary"> <svg class="spectrum-Icon spectrum-Icon--sizeS" focusable="false" aria-hidden="true"> <use xlink:href="#spectrum-icon-18-Edit" /> </svg> <span class="spectrum-Button-label">Edit</span> </button> - <button class="spectrum-Button spectrum-Button--sizeM spectrum-Button--outline spectrum-Button--staticBlack spectrum-Button--secondary spectrum-Button--iconOnly" aria-label="Edit"> + <button class="spectrum-Button spectrum-Button--outline spectrum-Button--staticBlack spectrum-Button--secondary spectrum-Button--iconOnly" aria-label="Edit"> <svg class="spectrum-Icon spectrum-Icon--sizeS" focusable="false" aria-hidden="true"> <use xlink:href="#spectrum-icon-18-Edit" /> </svg> diff --git a/components/button/metadata/mods.md b/components/button/metadata/mods.md index c8fa31d2674..f4a574ffd7b 100644 --- a/components/button/metadata/mods.md +++ b/components/button/metadata/mods.md @@ -1,50 +1,44 @@ -| Modifiable custom properties | -| ------------------------------------------ | -| `--mod-animation-duration-100` | -| `--mod-bold-font-weight` | -| `--mod-button-animation-duration` | -| `--mod-button-background-color-default` | -| `--mod-button-background-color-disabled` | -| `--mod-button-background-color-down` | -| `--mod-button-background-color-focus` | -| `--mod-button-background-color-hover` | -| `--mod-button-border-color-default` | -| `--mod-button-border-color-disabled` | -| `--mod-button-border-color-down` | -| `--mod-button-border-color-focus` | -| `--mod-button-border-color-hover` | -| `--mod-button-border-radius` | -| `--mod-button-border-width` | -| `--mod-button-bottom-to-text` | -| `--mod-button-content-color-default` | -| `--mod-button-content-color-disabled` | -| `--mod-button-content-color-down` | -| `--mod-button-content-color-focus` | -| `--mod-button-content-color-hover` | -| `--mod-button-edge-to-text` | -| `--mod-button-edge-to-visual` | -| `--mod-button-edge-to-visual-only` | -| `--mod-button-focus-indicator-gap` | -| `--mod-button-focus-ring-border-radius` | -| `--mod-button-focus-ring-color` | -| `--mod-button-focus-ring-gap` | -| `--mod-button-focus-ring-thickness` | -| `--mod-button-font-family` | -| `--mod-button-font-size` | -| `--mod-button-height` | -| `--mod-button-icon-margin-block-start` | -| `--mod-button-line-height` | -| `--mod-button-margin-block` | -| `--mod-button-margin-left` | -| `--mod-button-margin-right` | -| `--mod-button-min-width` | -| `--mod-button-padding-label-to-icon` | -| `--mod-button-static-content-color` | -| `--mod-button-text-align` | -| `--mod-button-text-align-with-icon` | -| `--mod-button-top-to-icon` | -| `--mod-button-top-to-text` | -| `--mod-focus-indicator-gap` | -| `--mod-line-height-100` | -| `--mod-sans-font-family-stack` | -| `--mod-static-black-focus-indicator-color` | +| Modifiable custom properties | +| ---------------------------------------- | +| `--mod-button-animation-duration` | +| `--mod-button-background-color-default` | +| `--mod-button-background-color-disabled` | +| `--mod-button-background-color-down` | +| `--mod-button-background-color-focus` | +| `--mod-button-background-color-hover` | +| `--mod-button-border-color-default` | +| `--mod-button-border-color-disabled` | +| `--mod-button-border-color-down` | +| `--mod-button-border-color-focus` | +| `--mod-button-border-color-hover` | +| `--mod-button-border-radius` | +| `--mod-button-border-width` | +| `--mod-button-bottom-to-text` | +| `--mod-button-content-color-default` | +| `--mod-button-content-color-disabled` | +| `--mod-button-content-color-down` | +| `--mod-button-content-color-focus` | +| `--mod-button-content-color-hover` | +| `--mod-button-edge-to-text` | +| `--mod-button-edge-to-visual` | +| `--mod-button-edge-to-visual-only` | +| `--mod-button-focus-indicator-gap` | +| `--mod-button-focus-ring-border-radius` | +| `--mod-button-focus-ring-color` | +| `--mod-button-focus-ring-gap` | +| `--mod-button-focus-ring-thickness` | +| `--mod-button-font-family` | +| `--mod-button-font-size` | +| `--mod-button-font-weight` | +| `--mod-button-height` | +| `--mod-button-icon-margin-block-start` | +| `--mod-button-line-height` | +| `--mod-button-margin-block` | +| `--mod-button-margin-left` | +| `--mod-button-margin-right` | +| `--mod-button-min-width` | +| `--mod-button-padding-label-to-icon` | +| `--mod-button-text-align` | +| `--mod-button-text-align-with-icon` | +| `--mod-button-top-to-icon` | +| `--mod-button-top-to-text` | diff --git a/components/button/package.json b/components/button/package.json index 0cd7fa29489..935a66cc0aa 100644 --- a/components/button/package.json +++ b/components/button/package.json @@ -1,49 +1,47 @@ { - "name": "@spectrum-css/button", - "version": "13.0.0", - "description": "The Spectrum CSS button component", - "license": "Apache-2.0", - "author": "Adobe", - "homepage": "https://opensource.adobe.com/spectrum-css/button-accent", - "repository": { - "type": "git", - "url": "https://github.com/adobe/spectrum-css.git", - "directory": "components/button" - }, - "bugs": { - "url": "https://github.com/adobe/spectrum-css/issues" - }, - "main": "dist/index.css", - "files": [ - "dist/*", - "CHANGELOG.md", - "package.json", - "stories/template.js", - "metadata/mods.md" - ], - "peerDependencies": { - "@spectrum-css/icon": ">=6", - "@spectrum-css/progresscircle": ">=2", - "@spectrum-css/tokens": ">=13" - }, - "peerDependenciesMeta": { - "@spectrum-css/icon": { - "optional": true - }, - "@spectrum-css/progresscircle": { - "optional": true - } - }, - "devDependencies": { - "@spectrum-css/commons": "^10.0.0" - }, - "keywords": [ - "spectrum", - "css", - "design system", - "adobe" - ], - "publishConfig": { - "access": "public" - } + "name": "@spectrum-css/button", + "version": "14.0.0-next.6", + "description": "The Spectrum CSS button component", + "license": "Apache-2.0", + "author": "Adobe", + "homepage": "https://opensource.adobe.com/spectrum-css/button-accent", + "repository": { + "type": "git", + "url": "https://github.com/adobe/spectrum-css.git", + "directory": "components/button" + }, + "bugs": { + "url": "https://github.com/adobe/spectrum-css/issues" + }, + "main": "dist/index.css", + "files": [ + "dist/*", + "metadata/mods.md", + "stories/template.js" + ], + "peerDependencies": { + "@spectrum-css/icon": ">=6", + "@spectrum-css/progresscircle": ">=2", + "@spectrum-css/tokens": ">=14.0.0-next.3" + }, + "peerDependenciesMeta": { + "@spectrum-css/icon": { + "optional": true + }, + "@spectrum-css/progresscircle": { + "optional": true + } + }, + "devDependencies": { + "@spectrum-css/commons": "^9.1.4-next.1" + }, + "keywords": [ + "adobe", + "css", + "design system", + "spectrum" + ], + "publishConfig": { + "access": "public" + } } diff --git a/components/button/stories/button.mdx b/components/button/stories/button.mdx new file mode 100644 index 00000000000..a20869868f5 --- /dev/null +++ b/components/button/stories/button.mdx @@ -0,0 +1,101 @@ +import { Canvas, Meta, Description } from '@storybook/blocks'; + +import * as ButtonStories from './button.stories'; + +<Meta of={ButtonStories} title="Docs" /> + +# Button + +<Description of={ButtonStories} /> + +## Variants + +There are four available variants that are used for different levels of emphasis and different +types of actions. By default, a button uses the fill style with a solid background. The primary +and secondary variants also have an outline option. + +### Accent + +The call to action button communicates strong emphasis and is reserved for encouraging critical +actions. In general, only use the emphasized option for the most important action on the page. + +<Canvas of={ButtonStories.Accent} /> + +### Primary + +The primary button is for medium emphasis. Use it in place of a call to action button when the +action requires less prominence, or if there are multiple primary actions of the same importance +in the same view. Both the fill (default) and outline styles are demonstrated below: + +<Canvas of={ButtonStories.Primary} /> + +### Secondary + +The secondary button is for low emphasis. It’s paired with other button types to surface less +prominent actions, and should never be the only button in a group. Both the fill (default) and +outline styles are demonstrated below: + +<Canvas of={ButtonStories.Secondary} /> + +### Negative + +The negative button is for emphasizing actions that can be destructive or have negative +consequences if taken. Use it sparingly. + +<Canvas of={ButtonStories.Negative} /> + +## Static color + +When a button needs to be placed on top of a color background or a visual, use the static color +option. Static color buttons do not change shades or values depending upon the color theme. + +### Static white - primary + +<Canvas of={ButtonStories.StaticWhitePrimary} className="spectrum-examples-static-white" /> + +### Static white - secondary + +<Canvas of={ButtonStories.StaticWhiteSecondary} className="spectrum-examples-static-white" /> + +### Static black - primary + +<Canvas of={ButtonStories.StaticBlackPrimary} className="spectrum-examples-static-black" /> + +### Static black - secondary + +<Canvas of={ButtonStories.StaticBlackSecondary} className="spectrum-examples-static-black" /> + +## Sizing + +Buttons come in four different sizes: small, medium, large, and extra large. The medium size is +the default and most frequently used option. Use the other sizes sparingly; they should be used +to create a hierarchy of importance within the page. + +<Canvas of={ButtonStories.Sizing} /> + +## Pending state + +The pending button is for indicating that a quick progress action is taking place. In this case, the +label and optional icon disappear and a progress circle appears. The progress circle always shows an +indeterminate progress. We recommend the use of the `.is-pending` class on the component’s parent +container, but there is also an option to use an attribute of `pending` instead. Buttons should have +the disabled attribute when the pending state is applied. + +<Canvas of={ButtonStories.Pending} /> + +## Disabled state + +A button in a disabled state shows that an action exists, but is not available in that circumstance. +This state can be used to maintain layout continuity and to communicate that an action may become +available later. + +<Canvas of={ButtonStories.Disabled} /> + +## Text overflow behavior + +When the button text is too long for the horizontal space available, it wraps to form another line. +When there is no icon present, the text is aligned center. When there is an icon present, the text is +aligned `start` (left with a writing direction of left-to-right) and the icon remains vertically aligned +at the top. + +<Canvas of={ButtonStories.WithWrapping} /> \ No newline at end of file diff --git a/components/button/stories/button.stories.js b/components/button/stories/button.stories.js index cfd3c877d4f..8f5ae012009 100644 --- a/components/button/stories/button.stories.js +++ b/components/button/stories/button.stories.js @@ -1,5 +1,8 @@ +import { withDownStateDimensionCapture } from "@spectrum-css/preview/decorators"; + import { html } from "lit"; import { styleMap } from "lit/directives/style-map.js"; +import { when } from "lit/directives/when.js"; import { default as IconStories } from "@spectrum-css/icon/stories/icon.stories.js"; import { Template as Typography } from "@spectrum-css/typography/stories/template.js"; @@ -112,7 +115,7 @@ export default { type: { name: "string" }, table: { type: { summary: "string" }, - category: "Advanced", + category: "Component", }, options: ["white", "black"], @@ -143,6 +146,7 @@ export default { } }, decorators: [ + withDownStateDimensionCapture(".spectrum-Button:not(:disabled)"), (Story, context) => html` <style> .spectrum-Detail { display: inline-block; } @@ -192,6 +196,9 @@ const CustomButton = ({ })} `; +/** + * Chromatic only template for displaying all button states. + */ const States = (args) => html` <div> ${Typography({ @@ -280,6 +287,9 @@ const States = (args) => })} </div>`; +/** + * Display with all size options, and all treatments. + */ const Sizes = (args) => html` ${["s", "m", "l", "xl"].map((size) => { return html` <div> @@ -302,163 +312,197 @@ const Sizes = (args) => </div>`; })}`; -const Treatment = (args) => - html` -<div - style=${styleMap({ - display: "flex", - gap: "10px", - })} - id="render-root" -> - ${["fill", "outline"].map((treatment) => CustomButton({ ...args, treatment }))} -</div>`; +/** + * Display all treatments (fill + outline) + */ +const Treatment = ({treatmentLayout = "inline", ...args}) => { + const TreatmentWrapper = (content) => html` + <div + style=${styleMap({ + display: "flex", + alignItems: "flex-start", + gap: "10px", + })} + id="render-root" + >${content}</div>`; + // Stacked: display within separate wrappers so each treatment is in its own row. + if (treatmentLayout == "stacked") { + return html`${["fill", "outline"].map((treatment) => TreatmentWrapper(CustomButton({ ...args, treatment })))}`; + } + // Inline / default: display within the same wrapper, in a single row. + return TreatmentWrapper(html`${["fill", "outline"].map((treatment) => CustomButton({ ...args, treatment }))}`); +}; + +/* Text overflow scenarios. */ const Wrapping = (args) => html` ${Template({ - ...args, - customStyles: { - "max-inline-size": "480px", - }, - iconName: "Edit", - label: "An example of text overflow behavior within the button component. When the button text is too long for the horizontal space available, it wraps to form another line.", -})} - ${Template({ - ...args, - customStyles: { - "max-inline-size": "480px", - }, - // Uses a UI icon that is smaller than workflow sizing, to test alignment: - iconName: "Cross100", - label: "An example of text overflow behavior within the button component. When the button text is too long for the horizontal space available, it wraps to form another line.", -})} + ...args, + customStyles: { + "max-inline-size": "480px", + }, + label: "An example of text overflow behavior when there is no icon. When the button text is too long for the horizontal space available, it wraps to form another line.", + })} ${Template({ - ...args, - customStyles: { - "max-inline-size": "480px", - }, - // UI icon that is larger than workflow sizing: - iconName: "ArrowDown600", - label: "An example of text overflow behavior within the button component. When the button text is too long for the horizontal space available, it wraps to form another line.", -})}`; - -const Variants = (args) => - html` ${window.isChromatic() - ? html` <div class="spectrum-Typography"> - ${Typography({ - semantics: "detail", - size: "l", - content: ["Accent"], - })} - <div - style=${styleMap({ - display: "flex", - flexDirection: "column", - gap: "10px", - })} - > - ${States(args)} - </div> - </div> - <div class="spectrum-Typography"> - ${Typography({ - semantics: "detail", - size: "l", - content: ["Negative"], - })} - <div - style=${styleMap({ - display: "flex", - flexDirection: "column", - gap: "10px", - })} - > - ${States({ - ...args, - variant: "negative" - })} - </div> - </div> - <div class="spectrum-Typography"> - ${Typography({ - semantics: "detail", - size: "l", - content: ["Primary"], - })} - <div - style=${styleMap({ - display: "flex", - flexDirection: "column", - gap: "10px", - })} - > - ${States({ - ...args, - variant: "primary" - })} - </div> - </div> - <div class="spectrum-Typography"> - ${Typography({ - semantics: "detail", - size: "l", - content: ["Secondary"], - })} - <div - style=${styleMap({ - display: "flex", - flexDirection: "column", - gap: "10px", - })} - > - ${States({ - ...args, - variant: "secondary" - })} - </div> - </div> - <div class="spectrum-Typography"> - ${Typography({ - semantics: "detail", - size: "l", - content: ["Sizing"], - })} - <div - style=${styleMap({ - display: "flex", - flexDirection: "column", - gap: "10px", - })} - > - ${Sizes(args)} - </div> - </div> - <div class="spectrum-Typography"> - ${Typography({ - semantics: "detail", - size: "l", - content: ["Wrapping"], - })} - <div - style=${styleMap({ - display: "flex", - flexDirection: "column", - gap: "10px", - padding: "6px" - })} - > - ${Wrapping(args)} - </div> - </div> - ` : html` -<div - style=${styleMap({ - display: "flex", - gap: "10px", + ...args, + customStyles: { + "max-inline-size": "480px", + }, + iconName: "Edit", + label: "An example of text overflow behavior when the button has an icon. When the button text is too long for the horizontal space available, it wraps to form another line.", })} - id="render-root" ->${CustomButton(args)}</div>`}`; + ${when(window.isChromatic(), () => html` + ${Template({ + ...args, + customStyles: { + "max-inline-size": "480px", + }, + // Uses a UI icon that is smaller than workflow sizing, to test alignment: + iconName: "Cross100", + label: "An example of text overflow behavior when the button has an icon. When the button text is too long for the horizontal space available, it wraps to form another line.", + })} + ${Template({ + ...args, + customStyles: { + "max-inline-size": "480px", + }, + // UI icon that is larger than workflow sizing: + iconName: "ArrowDown600", + label: "An example of text overflow behavior when the button has an icon. When the button text is too long for the horizontal space available, it wraps to form another line.", + })} + `)} +`; +/** + * Default story. + * - Chromatic only template displays a large grid of all variants and their states + * - User view is a single set of buttons that can be adjusted with controls + */ +const Variants = (args) => { + return window.isChromatic() + ? html`<div class="spectrum-Typography"> + ${Typography({ + semantics: "detail", + size: "l", + content: ["Accent"], + })} + <div + style=${styleMap({ + display: "flex", + flexDirection: "column", + gap: "10px", + })} + > + ${States(args)} + </div> + </div> + <div class="spectrum-Typography"> + ${Typography({ + semantics: "detail", + size: "l", + content: ["Negative"], + })} + <div + style=${styleMap({ + display: "flex", + flexDirection: "column", + gap: "10px", + })} + > + ${States({ + ...args, + variant: "negative" + })} + </div> + </div> + <div class="spectrum-Typography"> + ${Typography({ + semantics: "detail", + size: "l", + content: ["Primary"], + })} + <div + style=${styleMap({ + display: "flex", + flexDirection: "column", + gap: "10px", + })} + > + ${States({ + ...args, + variant: "primary" + })} + </div> + </div> + <div class="spectrum-Typography"> + ${Typography({ + semantics: "detail", + size: "l", + content: ["Secondary"], + })} + <div + style=${styleMap({ + display: "flex", + flexDirection: "column", + gap: "10px", + })} + > + ${States({ + ...args, + variant: "secondary" + })} + </div> + </div> + <div class="spectrum-Typography"> + ${Typography({ + semantics: "detail", + size: "l", + content: ["Sizing"], + })} + <div + style=${styleMap({ + display: "flex", + flexDirection: "column", + gap: "10px", + })} + > + ${Sizes(args)} + </div> + </div> + <div class="spectrum-Typography"> + ${Typography({ + semantics: "detail", + size: "l", + content: ["Wrapping"], + })} + <div + style=${styleMap({ + display: "flex", + flexDirection: "column", + gap: "10px", + padding: "6px" + })} + > + ${Wrapping(args)} + </div> + </div>` + : CustomButtonWrap(args); +}; + +/** + * Flex layout used for displaying CustomButton elements in a row. + */ +const CustomButtonWrap = (args) => + html`<div + style=${styleMap({ + display: "flex", + gap: "10px", + alignItems: "flex-start", + })} + id="render-root" + >${CustomButton(args)}</div>`; + +/* Stories */ export const Default = Variants.bind({}); Default.args = {}; @@ -479,3 +523,126 @@ WithForcedColors.parameters = { WithForcedColors.args = { iconName: "Actions", }; + +// Stories for MDX "Docs" +export const Accent = CustomButtonWrap.bind({}); +Accent.tags = ["is-hidden-story"]; +Accent.args = { + variant: "accent", +}; +Accent.parameters = { + chromatic: { disableSnapshot: true }, +}; + +export const Primary = Treatment.bind({}); +Primary.tags = ["is-hidden-story"]; +Primary.args = { + variant: "primary", + treatmentLayout: "stacked", +}; +Primary.parameters = { + chromatic: { disableSnapshot: true }, +}; + +export const Secondary = Treatment.bind({}); +Secondary.tags = ["is-hidden-story"]; +Secondary.args = { + variant: "secondary", + treatmentLayout: "stacked", +}; +Secondary.parameters = { + chromatic: { disableSnapshot: true }, +}; + +export const Negative = CustomButtonWrap.bind({}); +Negative.tags = ["is-hidden-story"]; +Negative.args = { + variant: "negative", +}; +Negative.parameters = { + chromatic: { disableSnapshot: true }, +}; + +export const StaticWhitePrimary = Treatment.bind({}); +StaticWhitePrimary.tags = ["is-hidden-story"]; +StaticWhitePrimary.args = { + variant: "primary", + treatmentLayout: "stacked", + staticColor: "white", +}; +StaticWhitePrimary.parameters = { + chromatic: { disableSnapshot: true }, +}; + +export const StaticWhiteSecondary = Treatment.bind({}); +StaticWhiteSecondary.tags = ["is-hidden-story"]; +StaticWhiteSecondary.args = { + variant: "secondary", + treatmentLayout: "stacked", + staticColor: "white", +}; +StaticWhiteSecondary.parameters = { + chromatic: { disableSnapshot: true }, +}; + +export const StaticBlackPrimary = Treatment.bind({}); +StaticBlackPrimary.tags = ["is-hidden-story"]; +StaticBlackPrimary.args = { + variant: "primary", + treatmentLayout: "stacked", + staticColor: "black", +}; +StaticBlackPrimary.parameters = { + chromatic: { disableSnapshot: true }, +}; + +export const StaticBlackSecondary = Treatment.bind({}); +StaticBlackSecondary.tags = ["is-hidden-story"]; +StaticBlackSecondary.args = { + variant: "secondary", + treatmentLayout: "stacked", + staticColor: "black", +}; +StaticBlackSecondary.parameters = { + chromatic: { disableSnapshot: true }, +}; + +export const Sizing = Sizes.bind({}); +Sizing.tags = ["is-hidden-story"]; +Sizing.args = { + variant: "primary", +}; +Sizing.parameters = { + chromatic: { disableSnapshot: true }, +}; + +export const Pending = CustomButtonWrap.bind({}); +Pending.tags = ["is-hidden-story"]; +Pending.args = { + variant: "accent", + isPending: true, + onclick: () => {}, +}; +Pending.parameters = { + chromatic: { disableSnapshot: true }, +}; + +export const Disabled = CustomButtonWrap.bind({}); +Disabled.tags = ["is-hidden-story"]; +Disabled.args = { + variant: "accent", + isDisabled: true, +}; +Disabled.parameters = { + chromatic: { disableSnapshot: true }, +}; + +export const WithWrapping = Wrapping.bind({}); +WithWrapping.tags = ["is-hidden-story"]; +WithWrapping.storyName = "Wrapping"; +WithWrapping.args = { + variant: "primary", +}; +WithWrapping.parameters = { + chromatic: { disableSnapshot: true }, +}; \ No newline at end of file diff --git a/components/button/stories/template.js b/components/button/stories/template.js index 026578e795c..2ea23fbd8ec 100644 --- a/components/button/stories/template.js +++ b/components/button/stories/template.js @@ -37,24 +37,15 @@ export const Template = ({ ariaControls, ...globals }) => { - const { express } = globals; - try { - if (express) import(/* webpackPrefetch: true */ "../themes/express.css"); - else import(/* webpackPrefetch: true */ "../themes/spectrum.css"); - } - catch (e) { - console.warn(e); - } - const [, updateArgs] = useArgs(); return html` <button class=${classMap({ [rootClass]: true, - [`${rootClass}--${treatment}`]: typeof treatment !== "undefined", + [`${rootClass}--${treatment}`]: typeof treatment !== "undefined" && treatment !== "fill", [`${rootClass}--${variant}`]: typeof variant !== "undefined", - [`${rootClass}--size${size?.toUpperCase()}`]: typeof size !== "undefined", + [`${rootClass}--size${size?.toUpperCase()}`]: typeof size !== "undefined" && size !== "m", [`${rootClass}--static${capitalize(lowerCase(staticColor))}`]: typeof staticColor !== "undefined", [`${rootClass}--iconOnly`]: hideLabel, ["is-pending"]: isPending, diff --git a/components/button/themes/express.css b/components/button/themes/express.css deleted file mode 100644 index 495d6cf1fcc..00000000000 --- a/components/button/themes/express.css +++ /dev/null @@ -1,37 +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-Button { - --spectrum-button-background-color-default: var(--spectrum-gray-200); - --spectrum-button-background-color-hover: var(--spectrum-gray-300); - --spectrum-button-background-color-down: var(--spectrum-gray-400); - --spectrum-button-background-color-focus: var(--spectrum-gray-300); - - --spectrum-button-border-color-default: transparent; - --spectrum-button-border-color-hover: transparent; - --spectrum-button-border-color-down: transparent; - --spectrum-button-border-color-focus: transparent; - - --spectrum-button-background-color-disabled: var(--spectrum-disabled-background-color); - --spectrum-button-border-color-disabled: transparent; - - &.is-selected { - --spectrum-button-background-color-default: var(--spectrum-neutral-background-color-default); - --spectrum-button-background-color-hover: var(--spectrum-neutral-background-color-hover); - --spectrum-button-background-color-down: var(--spectrum-neutral-background-color-down); - --spectrum-button-background-color-focus: var(--spectrum-neutral-background-color-key-focus); - } - } - } diff --git a/components/button/themes/spectrum.css b/components/button/themes/spectrum.css deleted file mode 100644 index 2b1ded8454d..00000000000 --- a/components/button/themes/spectrum.css +++ /dev/null @@ -1,462 +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-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-border-color-default: var(--spectrum-gray-400); - --spectrum-button-border-color-hover: var(--spectrum-gray-500); - --spectrum-button-border-color-down: var(--spectrum-gray-600); - --spectrum-button-border-color-focus: var(--spectrum-gray-500); - - --spectrum-button-content-color-default: var(--spectrum-neutral-content-color-default); - --spectrum-button-content-color-hover: var(--spectrum-neutral-content-color-hover); - --spectrum-button-content-color-down: var(--spectrum-neutral-content-color-down); - --spectrum-button-content-color-focus: var(--spectrum-neutral-content-color-key-focus); - - --spectrum-button-background-color-disabled: transparent; - --spectrum-button-border-color-disabled: var(--spectrum-disabled-border-color); - --spectrum-button-content-color-disabled: var(--spectrum-disabled-content-color); - - - &.spectrum-Button--accent { - --spectrum-button-background-color-default: var(--spectrum-accent-background-color-default); - --spectrum-button-background-color-hover: var(--spectrum-accent-background-color-hover); - --spectrum-button-background-color-down: var(--spectrum-accent-background-color-down); - --spectrum-button-background-color-focus: var(--spectrum-accent-background-color-key-focus); - - --spectrum-button-border-color-default: transparent; - --spectrum-button-border-color-hover: transparent; - --spectrum-button-border-color-down: transparent; - --spectrum-button-border-color-focus: transparent; - - --spectrum-button-content-color-default: var(--spectrum-white); - --spectrum-button-content-color-hover: var(--spectrum-white); - --spectrum-button-content-color-down: var(--spectrum-white); - --spectrum-button-content-color-focus: var(--spectrum-white); - - --spectrum-button-background-color-disabled: var(--spectrum-disabled-background-color); - --spectrum-button-border-color-disabled: transparent; - --spectrum-button-content-color-disabled: var(--spectrum-disabled-content-color); - - &.spectrum-Button--outline { - --spectrum-button-background-color-default: transparent; - --spectrum-button-background-color-hover: var(--spectrum-accent-color-200); - --spectrum-button-background-color-down: var(--spectrum-accent-color-300); - --spectrum-button-background-color-focus: var(--spectrum-accent-color-200); - - --spectrum-button-border-color-default: var(--spectrum-accent-color-900); - --spectrum-button-border-color-hover: var(--spectrum-accent-color-1000); - --spectrum-button-border-color-down: var(--spectrum-accent-color-1100); - --spectrum-button-border-color-focus: var(--spectrum-accent-color-1000); - - --spectrum-button-content-color-default: var(--spectrum-accent-content-color-default); - --spectrum-button-content-color-hover: var(--spectrum-accent-content-color-hover); - --spectrum-button-content-color-down: var(--spectrum-accent-content-color-down); - --spectrum-button-content-color-focus: var(--spectrum-accent-content-color-key-focus); - - --spectrum-button-background-color-disabled: transparent; - --spectrum-button-border-color-disabled: var(--spectrum-disabled-border-color); - --spectrum-button-content-color-disabled: var(--spectrum-disabled-content-color); - } - } - - - &.spectrum-Button--negative { - --spectrum-button-background-color-default: var(--spectrum-negative-background-color-default); - --spectrum-button-background-color-hover: var(--spectrum-negative-background-color-hover); - --spectrum-button-background-color-down: var(--spectrum-negative-background-color-down); - --spectrum-button-background-color-focus: var(--spectrum-negative-background-color-key-focus); - - --spectrum-button-border-color-default: transparent; - --spectrum-button-border-color-hover: transparent; - --spectrum-button-border-color-down: transparent; - --spectrum-button-border-color-focus: transparent; - - --spectrum-button-content-color-default: var(--spectrum-white); - --spectrum-button-content-color-hover: var(--spectrum-white); - --spectrum-button-content-color-down: var(--spectrum-white); - --spectrum-button-content-color-focus: var(--spectrum-white); - - --spectrum-button-background-color-disabled: var(--spectrum-disabled-background-color); - --spectrum-button-border-color-disabled: transparent; - --spectrum-button-content-color-disabled: var(--spectrum-disabled-content-color); - - &.spectrum-Button--outline { - --spectrum-button-background-color-default: transparent; - --spectrum-button-background-color-hover: var(--spectrum-negative-color-200); - --spectrum-button-background-color-down: var(--spectrum-negative-color-300); - --spectrum-button-background-color-focus: var(--spectrum-negative-color-200); - - --spectrum-button-border-color-default: var(--spectrum-negative-color-900); - --spectrum-button-border-color-hover: var(--spectrum-negative-color-1000); - --spectrum-button-border-color-down: var(--spectrum-negative-color-1100); - --spectrum-button-border-color-focus: var(--spectrum-negative-color-1000); - - --spectrum-button-content-color-default: var(--spectrum-negative-content-color-default); - --spectrum-button-content-color-hover: var(--spectrum-negative-content-color-hover); - --spectrum-button-content-color-down: var(--spectrum-negative-content-color-down); - --spectrum-button-content-color-focus: var(--spectrum-negative-content-color-key-focus); - - --spectrum-button-background-color-disabled: transparent; - --spectrum-button-border-color-disabled: var(--spectrum-disabled-border-color); - --spectrum-button-content-color-disabled: var(--spectrum-disabled-content-color); - } - } - - &.spectrum-Button--primary { - --spectrum-button-background-color-default: var(--spectrum-neutral-background-color-default); - --spectrum-button-background-color-hover: var(--spectrum-neutral-background-color-hover); - --spectrum-button-background-color-down: var(--spectrum-neutral-background-color-down); - --spectrum-button-background-color-focus: var(--spectrum-neutral-background-color-key-focus); - - --spectrum-button-border-color-default: transparent; - --spectrum-button-border-color-hover: transparent; - --spectrum-button-border-color-down: transparent; - --spectrum-button-border-color-focus: transparent; - - --spectrum-button-content-color-default: var(--spectrum-white); - --spectrum-button-content-color-hover: var(--spectrum-white); - --spectrum-button-content-color-down: var(--spectrum-white); - --spectrum-button-content-color-focus: var(--spectrum-white); - - --spectrum-button-background-color-disabled: var(--spectrum-disabled-background-color); - --spectrum-button-border-color-disabled: transparent; - --spectrum-button-content-color-disabled: var(--spectrum-disabled-content-color); - - &.spectrum-Button--outline { - --spectrum-button-background-color-default: transparent; - --spectrum-button-background-color-hover: var(--spectrum-gray-300); - --spectrum-button-background-color-down: var(--spectrum-gray-400); - --spectrum-button-background-color-focus: var(--spectrum-gray-300); - - --spectrum-button-border-color-default: var(--spectrum-gray-800); - --spectrum-button-border-color-hover: var(--spectrum-gray-900); - --spectrum-button-border-color-down: var(--spectrum-gray-900); - --spectrum-button-border-color-focus: var(--spectrum-gray-900); - - --spectrum-button-content-color-default: var(--spectrum-neutral-content-color-default); - --spectrum-button-content-color-hover: var(--spectrum-neutral-content-color-hover); - --spectrum-button-content-color-down: var(--spectrum-neutral-content-color-down); - --spectrum-button-content-color-focus: var(--spectrum-neutral-content-color-key-focus); - - --spectrum-button-background-color-disabled: transparent; - --spectrum-button-border-color-disabled: var(--spectrum-disabled-border-color); - --spectrum-button-content-color-disabled: var(--spectrum-disabled-content-color); - } - } - - &.spectrum-Button--secondary { - --spectrum-button-background-color-default: var(--spectrum-gray-200); - --spectrum-button-background-color-hover: var(--spectrum-gray-300); - --spectrum-button-background-color-down: var(--spectrum-gray-400); - --spectrum-button-background-color-focus: var(--spectrum-gray-300); - - --spectrum-button-border-color-default: transparent; - --spectrum-button-border-color-hover: transparent; - --spectrum-button-border-color-down: transparent; - --spectrum-button-border-color-focus: transparent; - - --spectrum-button-content-color-default: var(--spectrum-neutral-content-color-default); - --spectrum-button-content-color-hover: var(--spectrum-neutral-content-color-hover); - --spectrum-button-content-color-down: var(--spectrum-neutral-content-color-down); - --spectrum-button-content-color-focus: var(--spectrum-neutral-content-color-key-focus); - - --spectrum-button-background-color-disabled: var(--spectrum-disabled-background-color); - --spectrum-button-border-color-disabled: transparent; - --spectrum-button-content-color-disabled: var(--spectrum-disabled-content-color); - - &.spectrum-Button--outline { - --spectrum-button-background-color-default: transparent; - --spectrum-button-background-color-hover: var(--spectrum-gray-300); - --spectrum-button-background-color-down: var(--spectrum-gray-400); - --spectrum-button-background-color-focus: var(--spectrum-gray-300); - - --spectrum-button-border-color-default: var(--spectrum-gray-300); - --spectrum-button-border-color-hover: var(--spectrum-gray-400); - --spectrum-button-border-color-down: var(--spectrum-gray-500); - --spectrum-button-border-color-focus: var(--spectrum-gray-400); - - --spectrum-button-content-color-default: var(--spectrum-neutral-content-color-default); - --spectrum-button-content-color-hover: var(--spectrum-neutral-content-color-hover); - --spectrum-button-content-color-down: var(--spectrum-neutral-content-color-down); - --spectrum-button-content-color-focus: var(--spectrum-neutral-content-color-key-focus); - - --spectrum-button-background-color-disabled: transparent; - --spectrum-button-border-color-disabled: var(--spectrum-disabled-border-color); - --spectrum-button-content-color-disabled: var(--spectrum-disabled-content-color); - } - } - - &.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-border-color-default: transparent; - --spectrum-button-border-color-hover: transparent; - --spectrum-button-border-color-down: transparent; - --spectrum-button-border-color-focus: transparent; - - --spectrum-button-background-color-disabled: transparent; - --spectrum-button-border-color-disabled: transparent; - } - - &.is-selected { - --spectrum-button-background-color-default: var(--spectrum-neutral-subdued-background-color-default); - --spectrum-button-background-color-hover: var(--spectrum-neutral-subdued-background-color-hover); - --spectrum-button-background-color-down: var(--spectrum-neutral-subdued-background-color-down); - --spectrum-button-background-color-focus: var(--spectrum-neutral-subdued-background-color-key-focus); - - --spectrum-button-border-color-default: transparent; - --spectrum-button-border-color-hover: transparent; - --spectrum-button-border-color-down: transparent; - --spectrum-button-border-color-focus: transparent; - - --spectrum-button-content-color-default: var(--spectrum-white); - --spectrum-button-content-color-hover: var(--spectrum-white); - --spectrum-button-content-color-down: var(--spectrum-white); - --spectrum-button-content-color-focus: var(--spectrum-white); - - --spectrum-button-background-color-disabled: var(--spectrum-disabled-background-color); - --spectrum-button-border-color-disabled: transparent; - - &.spectrum-Button--emphasized { - --spectrum-button-background-color-default: var(--spectrum-accent-background-color-default); - --spectrum-button-background-color-hover: var(--spectrum-accent-background-color-hover); - --spectrum-button-background-color-down: var(--spectrum-accent-background-color-down); - --spectrum-button-background-color-focus: var(--spectrum-accent-background-color-key-focus); - } - } - - &.spectrum-Button--staticBlack, - &.spectrum-Button--staticWhite { - &.spectrum-Button--quiet { - --spectrum-button-border-color-default: transparent; - --spectrum-button-border-color-hover: transparent; - --spectrum-button-border-color-down: transparent; - --spectrum-button-border-color-focus: transparent; - - --spectrum-button-border-color-disabled: transparent; - } - } - - /* static white */ - - &.spectrum-Button--staticWhite { - --spectrum-button-background-color-default: var(--spectrum-transparent-white-800); - --spectrum-button-background-color-hover: var(--spectrum-transparent-white-900); - --spectrum-button-background-color-down: var(--spectrum-transparent-white-900); - --spectrum-button-background-color-focus: var(--spectrum-transparent-white-900); - - --spectrum-button-border-color-default: transparent; - --spectrum-button-border-color-hover: transparent; - --spectrum-button-border-color-down: transparent; - --spectrum-button-border-color-focus: transparent; - - --spectrum-button-content-color-default: var(--spectrum-black); - --spectrum-button-content-color-hover: var(--spectrum-black); - --spectrum-button-content-color-down: var(--spectrum-black); - --spectrum-button-content-color-focus: var(--spectrum-black); - - --spectrum-button-focus-indicator-color: var(--spectrum-static-white-focus-indicator-color); - - --spectrum-button-background-color-disabled: var(--spectrum-disabled-static-white-background-color); - --spectrum-button-border-color-disabled: transparent; - --spectrum-button-content-color-disabled: var(--spectrum-disabled-static-white-content-color); - - &.spectrum-Button--outline { - --spectrum-button-background-color-default: transparent; - --spectrum-button-background-color-hover: var(--spectrum-transparent-white-300); - --spectrum-button-background-color-down: var(--spectrum-transparent-white-400); - --spectrum-button-background-color-focus: var(--spectrum-transparent-white-300); - - --spectrum-button-border-color-default: var(--spectrum-transparent-white-800); - --spectrum-button-border-color-hover: var(--spectrum-transparent-white-900); - --spectrum-button-border-color-down: var(--spectrum-transparent-white-900); - --spectrum-button-border-color-focus: var(--spectrum-transparent-white-900); - - --spectrum-button-content-color-default: var(--spectrum-white); - --spectrum-button-content-color-hover: var(--spectrum-white); - --spectrum-button-content-color-down: var(--spectrum-white); - --spectrum-button-content-color-focus: var(--spectrum-white); - - --spectrum-button-focus-indicator-color: var(--spectrum-static-white-focus-indicator-color); - - --spectrum-button-background-color-disabled: transparent; - --spectrum-button-border-color-disabled: var(--spectrum-disabled-static-white-border-color); - --spectrum-button-content-color-disabled: var(--spectrum-disabled-static-white-content-color); - } - - &.is-selected { - --spectrum-button-background-color-default: var(--spectrum-transparent-white-800); - --spectrum-button-background-color-hover: var(--spectrum-transparent-white-900); - --spectrum-button-background-color-down: var(--spectrum-transparent-white-900); - --spectrum-button-background-color-focus: var(--spectrum-transparent-white-900); - - --spectrum-button-content-color-default: var(--mod-button-static-content-color, var(--spectrum-black)); - --spectrum-button-content-color-hover: var(--mod-button-static-content-color, var(--spectrum-black)); - --spectrum-button-content-color-down: var(--mod-button-static-content-color, var(--spectrum-black)); - --spectrum-button-content-color-focus: var(--mod-button-static-content-color, var(--spectrum-black)); - - --spectrum-button-background-color-disabled: var(--spectrum-disabled-static-white-background-color); - --spectrum-button-border-color-disabled: transparent; - } - } - - &.spectrum-Button--staticWhite.spectrum-Button--secondary { - --spectrum-button-background-color-default: var(--spectrum-transparent-white-200); - --spectrum-button-background-color-hover: var(--spectrum-transparent-white-300); - --spectrum-button-background-color-down: var(--spectrum-transparent-white-400); - --spectrum-button-background-color-focus: var(--spectrum-transparent-white-300); - - --spectrum-button-border-color-default: transparent; - --spectrum-button-border-color-hover: transparent; - --spectrum-button-border-color-down: transparent; - --spectrum-button-border-color-focus: transparent; - - --spectrum-button-content-color-default: var(--spectrum-white); - --spectrum-button-content-color-hover: var(--spectrum-white); - --spectrum-button-content-color-down: var(--spectrum-white); - --spectrum-button-content-color-focus: var(--spectrum-white); - - --spectrum-button-focus-indicator-color: var(--spectrum-static-white-focus-indicator-color); - - --spectrum-button-background-color-disabled: var(--spectrum-disabled-static-white-background-color); - --spectrum-button-border-color-disabled: transparent; - --spectrum-button-content-color-disabled: var(--spectrum-disabled-static-white-content-color); - - &.spectrum-Button--outline { - --spectrum-button-background-color-default: transparent; - --spectrum-button-background-color-hover: var(--spectrum-transparent-white-300); - --spectrum-button-background-color-down: var(--spectrum-transparent-white-400); - --spectrum-button-background-color-focus: var(--spectrum-transparent-white-300); - - --spectrum-button-border-color-default: var(--spectrum-transparent-white-300); - --spectrum-button-border-color-hover: var(--spectrum-transparent-white-400); - --spectrum-button-border-color-down: var(--spectrum-transparent-white-500); - --spectrum-button-border-color-focus: var(--spectrum-transparent-white-400); - - --spectrum-button-content-color-default: var(--spectrum-white); - --spectrum-button-content-color-hover: var(--spectrum-white); - --spectrum-button-content-color-down: var(--spectrum-white); - --spectrum-button-content-color-focus: var(--spectrum-white); - - --spectrum-button-focus-indicator-color: var(--spectrum-static-white-focus-indicator-color); - - --spectrum-button-background-color-disabled: transparent; - --spectrum-button-border-color-disabled: var(--spectrum-disabled-static-white-border-color); - --spectrum-button-content-color-disabled: var(--spectrum-disabled-static-white-content-color); - } - } - - /* static black */ - &.spectrum-Button--staticBlack { - --spectrum-button-background-color-default: var(--spectrum-transparent-black-800); - --spectrum-button-background-color-hover: var(--spectrum-transparent-black-900); - --spectrum-button-background-color-down: var(--spectrum-transparent-black-900); - --spectrum-button-background-color-focus: var(--spectrum-transparent-black-900); - - --spectrum-button-border-color-default: transparent; - --spectrum-button-border-color-hover: transparent; - --spectrum-button-border-color-down: transparent; - --spectrum-button-border-color-focus: transparent; - - --spectrum-button-content-color-default: var(--spectrum-white); - --spectrum-button-content-color-hover: var(--spectrum-white); - --spectrum-button-content-color-down: var(--spectrum-white); - --spectrum-button-content-color-focus: var(--spectrum-white); - - --spectrum-button-focus-indicator-color: var(--spectrum-static-black-focus-indicator-color); - - --spectrum-button-background-color-disabled: var(--spectrum-disabled-static-black-background-color); - --spectrum-button-border-color-disabled: transparent; - --spectrum-button-content-color-disabled: var(--spectrum-disabled-static-black-content-color); - - &.spectrum-Button--outline { - --spectrum-button-background-color-default: transparent; - --spectrum-button-background-color-hover: var(--spectrum-transparent-black-300); - --spectrum-button-background-color-down: var(--spectrum-transparent-black-400); - --spectrum-button-background-color-focus: var(--spectrum-transparent-black-300); - - --spectrum-button-border-color-default: var(--spectrum-transparent-black-400); - --spectrum-button-border-color-hover: var(--spectrum-transparent-black-500); - --spectrum-button-border-color-down: var(--spectrum-transparent-black-600); - --spectrum-button-border-color-focus: var(--spectrum-transparent-black-500); - - --spectrum-button-content-color-default: var(--spectrum-black); - --spectrum-button-content-color-hover: var(--spectrum-black); - --spectrum-button-content-color-down: var(--spectrum-black); - --spectrum-button-content-color-focus: var(--spectrum-black); - - --spectrum-button-focus-indicator-color: var(--spectrum-static-black-focus-indicator-color); - - --spectrum-button-background-color-disabled: transparent; - --spectrum-button-border-color-disabled: var(--spectrum-disabled-static-black-border-color); - --spectrum-button-content-color-disabled: var(--spectrum-disabled-static-black-content-color); - } - } - - - &.spectrum-Button--staticBlack.spectrum-Button--secondary { - --spectrum-button-background-color-default: var(--spectrum-transparent-black-200); - --spectrum-button-background-color-hover: var(--spectrum-transparent-black-300); - --spectrum-button-background-color-down: var(--spectrum-transparent-black-400); - --spectrum-button-background-color-focus: var(--spectrum-transparent-black-300); - - - --spectrum-button-border-color-default: transparent; - --spectrum-button-border-color-hover: transparent; - --spectrum-button-border-color-down: transparent; - --spectrum-button-border-color-focus: transparent; - - --spectrum-button-content-color-default: var(--spectrum-black); - --spectrum-button-content-color-hover: var(--spectrum-black); - --spectrum-button-content-color-down: var(--spectrum-black); - --spectrum-button-content-color-focus: var(--spectrum-black); - - --spectrum-button-focus-indicator-color: var(--spectrum-static-black-focus-indicator-color); - - --spectrum-button-background-color-disabled: var(--spectrum-disabled-static-black-background-color); - --spectrum-button-border-color-disabled: transparent; - --spectrum-button-content-color-disabled: var(--spectrum-disabled-static-black-content-color); - - &.spectrum-Button--outline { - --spectrum-button-background-color-default: transparent; - --spectrum-button-background-color-hover: var(--spectrum-transparent-black-300); - --spectrum-button-background-color-down: var(--spectrum-transparent-black-400); - --spectrum-button-background-color-focus: var(--spectrum-transparent-black-300); - - --spectrum-button-border-color-default: var(--spectrum-transparent-black-300); - --spectrum-button-border-color-hover: var(--spectrum-transparent-black-400); - --spectrum-button-border-color-down: var(--spectrum-transparent-black-500); - --spectrum-button-border-color-focus: var(--spectrum-transparent-black-400); - - --spectrum-button-content-color-default: var(--spectrum-black); - --spectrum-button-content-color-hover: var(--spectrum-black); - --spectrum-button-content-color-down: var(--spectrum-black); - --spectrum-button-content-color-focus: var(--spectrum-black); - - --spectrum-button-focus-indicator-color: var(--spectrum-static-black-focus-indicator-color); - - --spectrum-button-background-color-disabled: transparent; - --spectrum-button-border-color-disabled: var(--spectrum-disabled-static-black-border-color); - --spectrum-button-content-color-disabled: var(--spectrum-disabled-static-black-content-color); - } - } - } -} diff --git a/components/buttongroup/CHANGELOG.md b/components/buttongroup/CHANGELOG.md index d78573a6a23..de0463d3726 100644 --- a/components/buttongroup/CHANGELOG.md +++ b/components/buttongroup/CHANGELOG.md @@ -8,15 +8,17 @@ See [Conventional Commits](https://conventionalcommits.org) for commit guideline 🗓 2024-04-18 • 📝 [Commits](https://github.com/adobe/spectrum-css/compare/@spectrum-css/buttongroup@6.2.5...@spectrum-css/buttongroup@7.0.0) -\*feat!: postcss config build and script; remove gulp (#2466)([b0f337b](https://github.com/adobe/spectrum-css/commit/b0f337b)), closes[#2466](https://github.com/adobe/spectrum-css/issues/2466) +- feat!: postcss config build and script; remove gulp (#2466)([b0f337b](https://github.com/adobe/spectrum-css/commit/b0f337b)), closes[#2466](https://github.com/adobe/spectrum-css/issues/2466) - ### - 🛑 BREAKING CHANGES + ### - * - - Removes component-builder & component-builder-simple for script leveraging postcss + 🛑 BREAKING CHANGES -- Imports added to index.css and themes/express.css + - + + * Removes component-builder & component-builder-simple for script leveraging postcss + +* Imports added to index.css and themes/express.css <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..bb6c32d1245 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: | + ### 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 38a492acaf5..e8d8b8b4da7 100644 --- a/components/buttongroup/package.json +++ b/components/buttongroup/package.json @@ -1,37 +1,35 @@ { - "name": "@spectrum-css/buttongroup", - "version": "7.0.0", - "description": "The Spectrum CSS buttongroup component", - "license": "Apache-2.0", - "author": "Adobe", - "homepage": "https://opensource.adobe.com/spectrum-css/buttongroup", - "repository": { - "type": "git", - "url": "https://github.com/adobe/spectrum-css.git", - "directory": "components/buttongroup" - }, - "bugs": { - "url": "https://github.com/adobe/spectrum-css/issues" - }, - "main": "dist/index.css", - "files": [ - "dist/*", - "CHANGELOG.md", - "package.json", - "stories/template.js", - "metadata/mods.md" - ], - "peerDependencies": { - "@spectrum-css/button": ">=11", - "@spectrum-css/tokens": ">=13" - }, - "keywords": [ - "spectrum", - "css", - "design system", - "adobe" - ], - "publishConfig": { - "access": "public" - } + "name": "@spectrum-css/buttongroup", + "version": "7.0.0-next.3", + "description": "The Spectrum CSS buttongroup component", + "license": "Apache-2.0", + "author": "Adobe", + "homepage": "https://opensource.adobe.com/spectrum-css/buttongroup", + "repository": { + "type": "git", + "url": "https://github.com/adobe/spectrum-css.git", + "directory": "components/buttongroup" + }, + "bugs": { + "url": "https://github.com/adobe/spectrum-css/issues" + }, + "main": "dist/index.css", + "files": [ + "dist/*", + "metadata/mods.md", + "stories/template.js" + ], + "peerDependencies": { + "@spectrum-css/button": ">=11", + "@spectrum-css/tokens": ">=14" + }, + "keywords": [ + "adobe", + "css", + "design system", + "spectrum" + ], + "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 ac870335f0e..a52f5a1db2f 100644 --- a/components/calendar/package.json +++ b/components/calendar/package.json @@ -1,37 +1,35 @@ { - "name": "@spectrum-css/calendar", - "version": "5.0.0", - "description": "The Spectrum CSS calendar component", - "license": "Apache-2.0", - "author": "Adobe", - "homepage": "https://opensource.adobe.com/spectrum-css/calendar", - "repository": { - "type": "git", - "url": "https://github.com/adobe/spectrum-css.git", - "directory": "components/calendar" - }, - "bugs": { - "url": "https://github.com/adobe/spectrum-css/issues" - }, - "main": "dist/index.css", - "files": [ - "dist/*", - "CHANGELOG.md", - "package.json", - "stories/template.js", - "metadata/mods.md" - ], - "peerDependencies": { - "@spectrum-css/actionbutton": ">=5", - "@spectrum-css/tokens": ">=13" - }, - "keywords": [ - "spectrum", - "css", - "design system", - "adobe" - ], - "publishConfig": { - "access": "public" - } + "name": "@spectrum-css/calendar", + "version": "5.0.0", + "description": "The Spectrum CSS calendar component", + "license": "Apache-2.0", + "author": "Adobe", + "homepage": "https://opensource.adobe.com/spectrum-css/calendar", + "repository": { + "type": "git", + "url": "https://github.com/adobe/spectrum-css.git", + "directory": "components/calendar" + }, + "bugs": { + "url": "https://github.com/adobe/spectrum-css/issues" + }, + "main": "dist/index.css", + "files": [ + "dist/*", + "metadata/mods.md", + "stories/template.js" + ], + "peerDependencies": { + "@spectrum-css/actionbutton": ">=5", + "@spectrum-css/tokens": ">=14.0.0-next.3" + }, + "keywords": [ + "adobe", + "css", + "design system", + "spectrum" + ], + "publishConfig": { + "access": "public" + } } diff --git a/components/card/index.css b/components/card/index.css index c03b6a8c9e3..883f1f5934b 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); @@ -72,14 +72,22 @@ governing permissions and limitations under the License. /* Selected */ --spectrum-card-selected-background-opacity: 0.1; /* table-selected-row-background-opacity does not exist in tokens yet */ - --spectrum-card-preview-border-width-selected: var(--spectrum-border-width-100); - --spectrum-card-preview-background-color: var(--spectrum-background-base-color); + --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); /* Horizontal */ --spectrum-card-horizontal-body-padding: var(--spectrum-spacing-300); --spectrum-card-horizontal-preview-padding: var(--spectrum-spacing-200); + /* Horizontal */ + --spectrum-card-horizontal-body-padding: var(--spectrum-spacing-300); + --spectrum-card-horizontal-preview-padding: var(--spectrum-spacing-200); + /* TODO: These are placeholder until recursive RGB is available */ .spectrum--light &, .spectrum--lightest & { @@ -108,6 +116,19 @@ governing permissions and limitations under the License. ); } +.spectrum-Card--quiet, +.spectrum-Card--gallery, +.spectrum-Card--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 { position: relative; display: inline-flex; @@ -412,30 +433,27 @@ governing permissions and limitations under the License. and will be removed in a future version. */ padding-block-start: var( --mod-card-body-padding-block-start, - var( - --mod-card-title-padding-top, - var(--spectrum-card-title-padding-top) - ) + var(--mod-card-title-padding-top, var(--spectrum-card-title-padding-top)) ); padding-inline-end: var( --mod-card-body-padding-inline-end, calc( var(--mod-card-body-spacing, var(--spectrum-card-body-spacing)) - - var(--mod-card-border-width, var(--spectrum-card-border-width)) + var(--mod-card-border-width, var(--spectrum-card-border-width)) ) ); padding-inline-start: var( --mod-card-body-padding-inline-start, calc( var(--mod-card-body-spacing, var(--spectrum-card-body-spacing)) - - var(--mod-card-border-width, var(--spectrum-card-border-width)) + var(--mod-card-border-width, var(--spectrum-card-border-width)) ) ); padding-block-end: var( --mod-card-body-padding-block-end, calc( var(--mod-card-body-spacing, var(--spectrum-card-body-spacing)) - - var(--mod-card-border-width, var(--spectrum-card-border-width)) + var(--mod-card-border-width, var(--spectrum-card-border-width)) ) ); } @@ -552,23 +570,17 @@ governing permissions and limitations under the License. ); margin-inline-start: var( --mod-card-footer-margin-inline-start, - var( - --mod-card-body-spacing, - var(--spectrum-card-body-spacing) - ) + var(--mod-card-body-spacing, var(--spectrum-card-body-spacing)) ); margin-inline-end: var( --mod-card-footer-margin-inline-end, - var( - --mod-card-body-spacing, - var(--spectrum-card-body-spacing) - ) + var(--mod-card-body-spacing, var(--spectrum-card-body-spacing)) ); padding-block-end: var( --mod-card-footer-padding-block-end, calc( var(--mod-card-body-spacing, var(--spectrum-card-body-spacing)) - - var(--mod-card-border-width, var(--spectrum-card-border-width)) + var(--mod-card-border-width, var(--spectrum-card-border-width)) ) ); @@ -576,10 +588,7 @@ governing permissions and limitations under the License. and will be removed in a future version. */ padding-block-start: var( --mod-card-footer-padding-block-start, - var( - --mod-card-footer-margin-top, - var(--spectrum-card-footer-padding-top) - ) + var(--mod-card-footer-margin-top, var(--spectrum-card-footer-padding-top)) ); color: var( @@ -698,7 +707,13 @@ governing permissions and limitations under the License. /* @deprecation --mod-animation-duration-100 has been renamed and will be removed in a future version. */ transition: background-color - var(--mod-card-animation-duration, var(--mod-animation-duration-100, var(--spectrum-animation-duration-100))); + var( + --mod-card-animation-duration, + var( + --mod-animation-duration-100, + var(--spectrum-animation-duration-100) + ) + ); overflow: visible; /* Use ::before to show the selected overlay */ @@ -834,9 +849,15 @@ governing permissions and limitations under the License. align-items: center; justify-content: center; - border-start-start-radius: calc(var(--mod-card-corner-radius, var(--spectrum-card-corner-radius)) - var(--mod-card-border-width, var(--spectrum-card-border-width))); + border-start-start-radius: calc( + var(--mod-card-corner-radius, var(--spectrum-card-corner-radius)) - + var(--mod-card-border-width, var(--spectrum-card-border-width)) + ); border-start-end-radius: 0; - border-end-start-radius: calc(var(--mod-card-corner-radius, var(--spectrum-card-corner-radius)) - var(--mod-card-border-width, var(--spectrum-card-border-width))); + border-end-start-radius: calc( + var(--mod-card-corner-radius, var(--spectrum-card-corner-radius)) - + var(--mod-card-border-width, var(--spectrum-card-border-width)) + ); border-end-end-radius: 0; padding: var( @@ -881,10 +902,10 @@ governing permissions and limitations under the License. } .spectrum-Card--gallery { - min-inline-size: 0; + min-inline-size: 0; - .spectrum-Card-preview { - padding: 0; - border-radius: 0; - } + .spectrum-Card-preview { + padding: 0; + border-radius: 0; + } } diff --git a/components/card/package.json b/components/card/package.json index 3aa319712ab..0a66b401262 100644 --- a/components/card/package.json +++ b/components/card/package.json @@ -1,62 +1,60 @@ { - "name": "@spectrum-css/card", - "version": "8.0.0", - "description": "The Spectrum CSS card component", - "license": "Apache-2.0", - "author": "Adobe", - "homepage": "https://opensource.adobe.com/spectrum-css/card", - "repository": { - "type": "git", - "url": "https://github.com/adobe/spectrum-css.git", - "directory": "components/card" - }, - "bugs": { - "url": "https://github.com/adobe/spectrum-css/issues" - }, - "main": "dist/index.css", - "files": [ - "dist/*", - "CHANGELOG.md", - "package.json", - "stories/template.js", - "metadata/mods.md" - ], - "peerDependencies": { - "@spectrum-css/actionbutton": ">=5", - "@spectrum-css/asset": ">=3", - "@spectrum-css/checkbox": ">=8", - "@spectrum-css/icon": ">=4", - "@spectrum-css/quickaction": ">=3", - "@spectrum-css/tokens": ">=13", - "@spectrum-css/typography": ">=4 <=5" - }, - "peerDependenciesMeta": { - "@spectrum-css/actionbutton": { - "optional": true - }, - "@spectrum-css/asset": { - "optional": true - }, - "@spectrum-css/checkbox": { - "optional": true - }, - "@spectrum-css/icon": { - "optional": true - }, - "@spectrum-css/quickaction": { - "optional": true - }, - "@spectrum-css/typography": { - "optional": true - } - }, - "keywords": [ - "spectrum", - "css", - "design system", - "adobe" - ], - "publishConfig": { - "access": "public" - } + "name": "@spectrum-css/card", + "version": "8.0.0", + "description": "The Spectrum CSS card component", + "license": "Apache-2.0", + "author": "Adobe", + "homepage": "https://opensource.adobe.com/spectrum-css/card", + "repository": { + "type": "git", + "url": "https://github.com/adobe/spectrum-css.git", + "directory": "components/card" + }, + "bugs": { + "url": "https://github.com/adobe/spectrum-css/issues" + }, + "main": "dist/index.css", + "files": [ + "dist/*", + "metadata/mods.md", + "stories/template.js" + ], + "peerDependencies": { + "@spectrum-css/actionbutton": ">=5", + "@spectrum-css/asset": ">=3", + "@spectrum-css/checkbox": ">=8", + "@spectrum-css/icon": ">=4", + "@spectrum-css/quickaction": ">=3", + "@spectrum-css/tokens": ">=14.0.0-next.3", + "@spectrum-css/typography": ">=4 <=5" + }, + "peerDependenciesMeta": { + "@spectrum-css/actionbutton": { + "optional": true + }, + "@spectrum-css/asset": { + "optional": true + }, + "@spectrum-css/checkbox": { + "optional": true + }, + "@spectrum-css/icon": { + "optional": true + }, + "@spectrum-css/quickaction": { + "optional": true + }, + "@spectrum-css/typography": { + "optional": true + } + }, + "keywords": [ + "adobe", + "css", + "design system", + "spectrum" + ], + "publishConfig": { + "access": "public" + } } diff --git a/components/checkbox/index.css b/components/checkbox/index.css index 9d467bd1010..1836b65ba39 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, diff --git a/components/checkbox/package.json b/components/checkbox/package.json index fcab68b84af..ce3e260ba82 100644 --- a/components/checkbox/package.json +++ b/components/checkbox/package.json @@ -1,37 +1,35 @@ { - "name": "@spectrum-css/checkbox", - "version": "9.0.0", - "description": "The Spectrum CSS checkbox component", - "license": "Apache-2.0", - "author": "Adobe", - "homepage": "https://opensource.adobe.com/spectrum-css/checkbox", - "repository": { - "type": "git", - "url": "https://github.com/adobe/spectrum-css.git", - "directory": "components/checkbox" - }, - "bugs": { - "url": "https://github.com/adobe/spectrum-css/issues" - }, - "main": "dist/index.css", - "files": [ - "dist/*", - "CHANGELOG.md", - "package.json", - "stories/template.js", - "metadata/mods.md" - ], - "peerDependencies": { - "@spectrum-css/icon": ">=4", - "@spectrum-css/tokens": ">=13" - }, - "keywords": [ - "spectrum", - "css", - "design system", - "adobe" - ], - "publishConfig": { - "access": "public" - } + "name": "@spectrum-css/checkbox", + "version": "9.0.0", + "description": "The Spectrum CSS checkbox component", + "license": "Apache-2.0", + "author": "Adobe", + "homepage": "https://opensource.adobe.com/spectrum-css/checkbox", + "repository": { + "type": "git", + "url": "https://github.com/adobe/spectrum-css.git", + "directory": "components/checkbox" + }, + "bugs": { + "url": "https://github.com/adobe/spectrum-css/issues" + }, + "main": "dist/index.css", + "files": [ + "dist/*", + "metadata/mods.md", + "stories/template.js" + ], + "peerDependencies": { + "@spectrum-css/icon": ">=4", + "@spectrum-css/tokens": ">=14.0.0-next.3" + }, + "keywords": [ + "adobe", + "css", + "design system", + "spectrum" + ], + "publishConfig": { + "access": "public" + } } diff --git a/components/clearbutton/package.json b/components/clearbutton/package.json index d91ae097470..0066384af3c 100644 --- a/components/clearbutton/package.json +++ b/components/clearbutton/package.json @@ -1,37 +1,35 @@ { - "name": "@spectrum-css/clearbutton", - "version": "6.0.0", - "description": "The Spectrum CSS clearbutton component", - "license": "Apache-2.0", - "author": "Adobe", - "homepage": "https://opensource.adobe.com/spectrum-css/clearbutton", - "repository": { - "type": "git", - "url": "https://github.com/adobe/spectrum-css.git", - "directory": "components/clearbutton" - }, - "bugs": { - "url": "https://github.com/adobe/spectrum-css/issues" - }, - "main": "dist/index.css", - "files": [ - "dist/*", - "CHANGELOG.md", - "package.json", - "stories/template.js", - "metadata/mods.md" - ], - "peerDependencies": { - "@spectrum-css/icon": ">=4", - "@spectrum-css/tokens": ">=13" - }, - "keywords": [ - "spectrum", - "css", - "design system", - "adobe" - ], - "publishConfig": { - "access": "public" - } + "name": "@spectrum-css/clearbutton", + "version": "6.0.0", + "description": "The Spectrum CSS clearbutton component", + "license": "Apache-2.0", + "author": "Adobe", + "homepage": "https://opensource.adobe.com/spectrum-css/clearbutton", + "repository": { + "type": "git", + "url": "https://github.com/adobe/spectrum-css.git", + "directory": "components/clearbutton" + }, + "bugs": { + "url": "https://github.com/adobe/spectrum-css/issues" + }, + "main": "dist/index.css", + "files": [ + "dist/*", + "metadata/mods.md", + "stories/template.js" + ], + "peerDependencies": { + "@spectrum-css/icon": ">=4", + "@spectrum-css/tokens": ">=14.0.0-next.3" + }, + "keywords": [ + "adobe", + "css", + "design system", + "spectrum" + ], + "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 24c5eb98cad..ce70e968a76 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..86151577cc4 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: + ### 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. + + ### 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. + + ### 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..dbf39678f36 100644 --- a/components/closebutton/metadata/mods.md +++ b/components/closebutton/metadata/mods.md @@ -1,33 +1,28 @@ -| 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-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-width` | +| `--mod-line-height-100` | +| `--mod-sans-font-family-stack` | diff --git a/components/closebutton/package.json b/components/closebutton/package.json index f8ccef8574a..10d47de3069 100644 --- a/components/closebutton/package.json +++ b/components/closebutton/package.json @@ -1,40 +1,38 @@ { - "name": "@spectrum-css/closebutton", - "version": "5.0.0", - "description": "The Spectrum CSS close button component", - "license": "Apache-2.0", - "author": "Adobe", - "homepage": "https://opensource.adobe.com/spectrum-css/closebutton", - "repository": { - "type": "git", - "url": "https://github.com/adobe/spectrum-css.git", - "directory": "components/closebutton" - }, - "bugs": { - "url": "https://github.com/adobe/spectrum-css/issues" - }, - "main": "dist/index.css", - "files": [ - "dist/*", - "CHANGELOG.md", - "package.json", - "stories/template.js", - "metadata/mods.md" - ], - "peerDependencies": { - "@spectrum-css/icon": ">=4", - "@spectrum-css/tokens": ">=13" - }, - "devDependencies": { - "@spectrum-css/commons": "^10.0.0" - }, - "keywords": [ - "spectrum", - "css", - "design system", - "adobe" - ], - "publishConfig": { - "access": "public" - } + "name": "@spectrum-css/closebutton", + "version": "5.0.0-next.2", + "description": "The Spectrum CSS close button component", + "license": "Apache-2.0", + "author": "Adobe", + "homepage": "https://opensource.adobe.com/spectrum-css/closebutton", + "repository": { + "type": "git", + "url": "https://github.com/adobe/spectrum-css.git", + "directory": "components/closebutton" + }, + "bugs": { + "url": "https://github.com/adobe/spectrum-css/issues" + }, + "main": "dist/index.css", + "files": [ + "dist/*", + "metadata/mods.md", + "stories/template.js" + ], + "peerDependencies": { + "@spectrum-css/icon": ">=4", + "@spectrum-css/tokens": ">=14.0.0-next.3" + }, + "devDependencies": { + "@spectrum-css/commons": "^10.0.0" + }, + "keywords": [ + "adobe", + "css", + "design system", + "spectrum" + ], + "publishConfig": { + "access": "public" + } } diff --git a/components/closebutton/stories/closebutton.stories.js b/components/closebutton/stories/closebutton.stories.js index 2354d519670..0dadc01c277 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,61 @@ export default { }, }; -export const Default = Template.bind({}); +const CloseButton = (args) => { + return html` + <div + style=${ifDefined(styleMap({ + padding: "1rem", + }))} + > + ${Template(args)} + ${when(window.isChromatic(), () => + html` + ${Template({ + ...args, + isDisabled: true, + })} + ${html` + <div + style=${ifDefined(styleMap({ + padding: "1rem", + background: "var(--spectrum-examples-gradient-static-white)" + }))} + > + ${Template({ + ...args, + staticColor: "white", + })} + ${Template({ + ...args, + staticColor: "white", + isDisabled: true, + })} + </div> + `} + ${html` + <div + style=${ifDefined(styleMap({ + padding: "1rem", + background: "var(--spectrum-examples-gradient-static-black)" + }))} + > + ${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 2d99f79002a..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,14 +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` @@ -47,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 4b46980e89f..7003572f825 100644 --- a/components/coachindicator/package.json +++ b/components/coachindicator/package.json @@ -1,36 +1,34 @@ { - "name": "@spectrum-css/coachindicator", - "version": "2.0.0", - "description": "The Spectrum CSS Coach Indicator component ", - "license": "Apache-2.0", - "author": "Adobe", - "homepage": "https://opensource.adobe.com/spectrum-css/coachindicator", - "repository": { - "type": "git", - "url": "https://github.com/adobe/spectrum-css.git", - "directory": "components/coachindicator" - }, - "bugs": { - "url": "https://github.com/adobe/spectrum-css/issues" - }, - "main": "dist/index.css", - "files": [ - "dist/*", - "CHANGELOG.md", - "package.json", - "stories/template.js", - "metadata/mods.md" - ], - "peerDependencies": { - "@spectrum-css/tokens": ">=13" - }, - "keywords": [ - "spectrum", - "css", - "design system", - "adobe" - ], - "publishConfig": { - "access": "public" - } + "name": "@spectrum-css/coachindicator", + "version": "2.0.0", + "description": "The Spectrum CSS Coach Indicator component ", + "license": "Apache-2.0", + "author": "Adobe", + "homepage": "https://opensource.adobe.com/spectrum-css/coachindicator", + "repository": { + "type": "git", + "url": "https://github.com/adobe/spectrum-css.git", + "directory": "components/coachindicator" + }, + "bugs": { + "url": "https://github.com/adobe/spectrum-css/issues" + }, + "main": "dist/index.css", + "files": [ + "dist/*", + "metadata/mods.md", + "stories/template.js" + ], + "peerDependencies": { + "@spectrum-css/tokens": ">=14.0.0-next.3" + }, + "keywords": [ + "adobe", + "css", + "design system", + "spectrum" + ], + "publishConfig": { + "access": "public" + } } diff --git a/components/coachmark/package.json b/components/coachmark/package.json index a660751584e..b7fc1295d7c 100644 --- a/components/coachmark/package.json +++ b/components/coachmark/package.json @@ -1,47 +1,45 @@ { - "name": "@spectrum-css/coachmark", - "version": "7.0.0", - "description": "The Spectrum CSS coachmark component", - "license": "Apache-2.0", - "author": "Adobe", - "homepage": "https://opensource.adobe.com/spectrum-css/coachmark", - "repository": { - "type": "git", - "url": "https://github.com/adobe/spectrum-css.git", - "directory": "components/coachmark" - }, - "bugs": { - "url": "https://github.com/adobe/spectrum-css/issues" - }, - "main": "dist/index.css", - "files": [ - "dist/*", - "CHANGELOG.md", - "package.json", - "stories/template.js", - "metadata/mods.md" - ], - "peerDependencies": { - "@spectrum-css/actionbutton": ">=5", - "@spectrum-css/actionmenu": ">=5", - "@spectrum-css/button": ">=11", - "@spectrum-css/buttongroup": ">=6", - "@spectrum-css/menu": ">=5", - "@spectrum-css/popover": ">=6", - "@spectrum-css/tokens": ">=13" - }, - "peerDependenciesMeta": { - "@spectrum-css/button": { - "optional": true - } - }, - "keywords": [ - "spectrum", - "css", - "design system", - "adobe" - ], - "publishConfig": { - "access": "public" - } + "name": "@spectrum-css/coachmark", + "version": "7.0.0", + "description": "The Spectrum CSS coachmark component", + "license": "Apache-2.0", + "author": "Adobe", + "homepage": "https://opensource.adobe.com/spectrum-css/coachmark", + "repository": { + "type": "git", + "url": "https://github.com/adobe/spectrum-css.git", + "directory": "components/coachmark" + }, + "bugs": { + "url": "https://github.com/adobe/spectrum-css/issues" + }, + "main": "dist/index.css", + "files": [ + "dist/*", + "metadata/mods.md", + "stories/template.js" + ], + "peerDependencies": { + "@spectrum-css/actionbutton": ">=5", + "@spectrum-css/actionmenu": ">=5", + "@spectrum-css/button": ">=11", + "@spectrum-css/buttongroup": ">=6", + "@spectrum-css/menu": ">=5", + "@spectrum-css/popover": ">=6", + "@spectrum-css/tokens": ">=14.0.0-next.3" + }, + "peerDependenciesMeta": { + "@spectrum-css/button": { + "optional": true + } + }, + "keywords": [ + "adobe", + "css", + "design system", + "spectrum" + ], + "publishConfig": { + "access": "public" + } } diff --git a/components/colorarea/package.json b/components/colorarea/package.json index 08f5fe91ff9..42160e63929 100644 --- a/components/colorarea/package.json +++ b/components/colorarea/package.json @@ -1,37 +1,35 @@ { - "name": "@spectrum-css/colorarea", - "version": "5.0.0", - "description": "The Spectrum CSS Color Area component", - "license": "Apache-2.0", - "author": "Adobe", - "homepage": "https://opensource.adobe.com/spectrum-css/colorarea", - "repository": { - "type": "git", - "url": "https://github.com/adobe/spectrum-css.git", - "directory": "components/colorarea" - }, - "bugs": { - "url": "https://github.com/adobe/spectrum-css/issues" - }, - "main": "dist/index.css", - "files": [ - "dist/*", - "CHANGELOG.md", - "package.json", - "stories/template.js", - "metadata/mods.md" - ], - "peerDependencies": { - "@spectrum-css/colorhandle": ">=7", - "@spectrum-css/tokens": ">=13" - }, - "keywords": [ - "spectrum", - "css", - "design system", - "adobe" - ], - "publishConfig": { - "access": "public" - } + "name": "@spectrum-css/colorarea", + "version": "5.0.0", + "description": "The Spectrum CSS Color Area component", + "license": "Apache-2.0", + "author": "Adobe", + "homepage": "https://opensource.adobe.com/spectrum-css/colorarea", + "repository": { + "type": "git", + "url": "https://github.com/adobe/spectrum-css.git", + "directory": "components/colorarea" + }, + "bugs": { + "url": "https://github.com/adobe/spectrum-css/issues" + }, + "main": "dist/index.css", + "files": [ + "dist/*", + "metadata/mods.md", + "stories/template.js" + ], + "peerDependencies": { + "@spectrum-css/colorhandle": ">=7", + "@spectrum-css/tokens": ">=14.0.0-next.3" + }, + "keywords": [ + "adobe", + "css", + "design system", + "spectrum" + ], + "publishConfig": { + "access": "public" + } } diff --git a/components/colorhandle/package.json b/components/colorhandle/package.json index 669ceac8ef1..10c1c53ce9b 100644 --- a/components/colorhandle/package.json +++ b/components/colorhandle/package.json @@ -1,43 +1,41 @@ { - "name": "@spectrum-css/colorhandle", - "version": "8.0.0", - "description": "The Spectrum CSS Color Handle component", - "license": "Apache-2.0", - "author": "Adobe", - "homepage": "https://opensource.adobe.com/spectrum-css/colorhandle", - "repository": { - "type": "git", - "url": "https://github.com/adobe/spectrum-css.git", - "directory": "components/colorhandle" - }, - "bugs": { - "url": "https://github.com/adobe/spectrum-css/issues" - }, - "main": "dist/index.css", - "files": [ - "dist/*", - "CHANGELOG.md", - "package.json", - "stories/template.js", - "metadata/mods.md" - ], - "peerDependencies": { - "@spectrum-css/colorloupe": ">=4", - "@spectrum-css/opacitycheckerboard": ">=1", - "@spectrum-css/tokens": ">=13" - }, - "peerDependenciesMeta": { - "@spectrum-css/colorloupe": { - "optional": true - } - }, - "keywords": [ - "spectrum", - "css", - "design system", - "adobe" - ], - "publishConfig": { - "access": "public" - } + "name": "@spectrum-css/colorhandle", + "version": "8.0.0", + "description": "The Spectrum CSS Color Handle component", + "license": "Apache-2.0", + "author": "Adobe", + "homepage": "https://opensource.adobe.com/spectrum-css/colorhandle", + "repository": { + "type": "git", + "url": "https://github.com/adobe/spectrum-css.git", + "directory": "components/colorhandle" + }, + "bugs": { + "url": "https://github.com/adobe/spectrum-css/issues" + }, + "main": "dist/index.css", + "files": [ + "dist/*", + "metadata/mods.md", + "stories/template.js" + ], + "peerDependencies": { + "@spectrum-css/colorloupe": ">=4", + "@spectrum-css/opacitycheckerboard": ">=1", + "@spectrum-css/tokens": ">=14.0.0-next.3" + }, + "peerDependenciesMeta": { + "@spectrum-css/colorloupe": { + "optional": true + } + }, + "keywords": [ + "adobe", + "css", + "design system", + "spectrum" + ], + "publishConfig": { + "access": "public" + } } diff --git a/components/colorloupe/package.json b/components/colorloupe/package.json index 48816492506..f7e1746388c 100644 --- a/components/colorloupe/package.json +++ b/components/colorloupe/package.json @@ -1,36 +1,34 @@ { - "name": "@spectrum-css/colorloupe", - "version": "5.0.0", - "description": "The Spectrum CSS Color Loupe component", - "license": "Apache-2.0", - "author": "Adobe", - "homepage": "https://opensource.adobe.com/spectrum-css/colorloupe", - "repository": { - "type": "git", - "url": "https://github.com/adobe/spectrum-css.git", - "directory": "components/colorloupe" - }, - "bugs": { - "url": "https://github.com/adobe/spectrum-css/issues" - }, - "main": "dist/index.css", - "files": [ - "dist/*", - "CHANGELOG.md", - "package.json", - "stories/template.js", - "metadata/mods.md" - ], - "peerDependencies": { - "@spectrum-css/tokens": ">=13" - }, - "keywords": [ - "spectrum", - "css", - "design system", - "adobe" - ], - "publishConfig": { - "access": "public" - } + "name": "@spectrum-css/colorloupe", + "version": "5.0.0", + "description": "The Spectrum CSS Color Loupe component", + "license": "Apache-2.0", + "author": "Adobe", + "homepage": "https://opensource.adobe.com/spectrum-css/colorloupe", + "repository": { + "type": "git", + "url": "https://github.com/adobe/spectrum-css.git", + "directory": "components/colorloupe" + }, + "bugs": { + "url": "https://github.com/adobe/spectrum-css/issues" + }, + "main": "dist/index.css", + "files": [ + "dist/*", + "metadata/mods.md", + "stories/template.js" + ], + "peerDependencies": { + "@spectrum-css/tokens": ">=14.0.0-next.3" + }, + "keywords": [ + "adobe", + "css", + "design system", + "spectrum" + ], + "publishConfig": { + "access": "public" + } } diff --git a/components/colorslider/package.json b/components/colorslider/package.json index bfc4da69616..1381ce1ac88 100644 --- a/components/colorslider/package.json +++ b/components/colorslider/package.json @@ -1,38 +1,36 @@ { - "name": "@spectrum-css/colorslider", - "version": "6.0.0", - "description": "The Spectrum CSS Color slider component", - "license": "Apache-2.0", - "author": "Adobe", - "homepage": "https://opensource.adobe.com/spectrum-css/colorslider", - "repository": { - "type": "git", - "url": "https://github.com/adobe/spectrum-css.git", - "directory": "components/colorslider" - }, - "bugs": { - "url": "https://github.com/adobe/spectrum-css/issues" - }, - "main": "dist/index.css", - "files": [ - "dist/*", - "CHANGELOG.md", - "package.json", - "stories/template.js", - "metadata/mods.md" - ], - "peerDependencies": { - "@spectrum-css/colorhandle": ">=7", - "@spectrum-css/opacitycheckerboard": ">=1", - "@spectrum-css/tokens": ">=13" - }, - "keywords": [ - "spectrum", - "css", - "design system", - "adobe" - ], - "publishConfig": { - "access": "public" - } + "name": "@spectrum-css/colorslider", + "version": "6.0.0", + "description": "The Spectrum CSS Color slider component", + "license": "Apache-2.0", + "author": "Adobe", + "homepage": "https://opensource.adobe.com/spectrum-css/colorslider", + "repository": { + "type": "git", + "url": "https://github.com/adobe/spectrum-css.git", + "directory": "components/colorslider" + }, + "bugs": { + "url": "https://github.com/adobe/spectrum-css/issues" + }, + "main": "dist/index.css", + "files": [ + "dist/*", + "metadata/mods.md", + "stories/template.js" + ], + "peerDependencies": { + "@spectrum-css/colorhandle": ">=7", + "@spectrum-css/opacitycheckerboard": ">=1", + "@spectrum-css/tokens": ">=14.0.0-next.3" + }, + "keywords": [ + "adobe", + "css", + "design system", + "spectrum" + ], + "publishConfig": { + "access": "public" + } } diff --git a/components/colorwheel/package.json b/components/colorwheel/package.json index 9c3ffd1683e..4c9872e0d05 100644 --- a/components/colorwheel/package.json +++ b/components/colorwheel/package.json @@ -1,47 +1,45 @@ { - "name": "@spectrum-css/colorwheel", - "version": "4.0.0", - "description": "The Spectrum CSS Color Area component", - "license": "Apache-2.0", - "author": "Adobe", - "homepage": "https://opensource.adobe.com/spectrum-css/colorwheel", - "repository": { - "type": "git", - "url": "https://github.com/adobe/spectrum-css.git", - "directory": "components/colorwheel" - }, - "bugs": { - "url": "https://github.com/adobe/spectrum-css/issues" - }, - "main": "dist/index.css", - "files": [ - "dist/*", - "CHANGELOG.md", - "package.json", - "stories/template.js", - "metadata/mods.md" - ], - "peerDependencies": { - "@spectrum-css/colorarea": ">=4", - "@spectrum-css/colorhandle": ">=7", - "@spectrum-css/colorloupe": ">=4", - "@spectrum-css/tokens": ">=13" - }, - "peerDependenciesMeta": { - "@spectrum-css/colorarea": { - "optional": true - }, - "@spectrum-css/colorloupe": { - "optional": true - } - }, - "keywords": [ - "spectrum", - "css", - "design system", - "adobe" - ], - "publishConfig": { - "access": "public" - } + "name": "@spectrum-css/colorwheel", + "version": "4.0.0", + "description": "The Spectrum CSS Color Area component", + "license": "Apache-2.0", + "author": "Adobe", + "homepage": "https://opensource.adobe.com/spectrum-css/colorwheel", + "repository": { + "type": "git", + "url": "https://github.com/adobe/spectrum-css.git", + "directory": "components/colorwheel" + }, + "bugs": { + "url": "https://github.com/adobe/spectrum-css/issues" + }, + "main": "dist/index.css", + "files": [ + "dist/*", + "metadata/mods.md", + "stories/template.js" + ], + "peerDependencies": { + "@spectrum-css/colorarea": ">=4", + "@spectrum-css/colorhandle": ">=7", + "@spectrum-css/colorloupe": ">=4", + "@spectrum-css/tokens": ">=14.0.0-next.3" + }, + "peerDependenciesMeta": { + "@spectrum-css/colorarea": { + "optional": true + }, + "@spectrum-css/colorloupe": { + "optional": true + } + }, + "keywords": [ + "adobe", + "css", + "design system", + "spectrum" + ], + "publishConfig": { + "access": "public" + } } diff --git a/components/combobox/package.json b/components/combobox/package.json index 111e519b1c2..6cc67cc2a0a 100644 --- a/components/combobox/package.json +++ b/components/combobox/package.json @@ -1,46 +1,44 @@ { - "name": "@spectrum-css/combobox", - "version": "3.0.0", - "description": "The Spectrum CSS combobox component", - "license": "Apache-2.0", - "author": "Adobe", - "homepage": "https://opensource.adobe.com/spectrum-css/", - "repository": { - "type": "git", - "url": "https://github.com/adobe/spectrum-css.git", - "directory": "components/combobox" - }, - "bugs": { - "url": "https://github.com/adobe/spectrum-css/issues" - }, - "main": "dist/index.css", - "files": [ - "dist/*", - "CHANGELOG.md", - "package.json", - "stories/template.js", - "metadata/mods.md" - ], - "peerDependencies": { - "@spectrum-css/menu": ">=5", - "@spectrum-css/pickerbutton": ">=4", - "@spectrum-css/popover": ">=6", - "@spectrum-css/progresscircle": ">=2", - "@spectrum-css/textfield": ">=6", - "@spectrum-css/tokens": ">=13" - }, - "peerDependenciesMeta": { - "@spectrum-css/progresscircle": { - "optional": true - } - }, - "keywords": [ - "spectrum", - "css", - "design system", - "adobe" - ], - "publishConfig": { - "access": "public" - } + "name": "@spectrum-css/combobox", + "version": "3.0.0", + "description": "The Spectrum CSS combobox component", + "license": "Apache-2.0", + "author": "Adobe", + "homepage": "https://opensource.adobe.com/spectrum-css/", + "repository": { + "type": "git", + "url": "https://github.com/adobe/spectrum-css.git", + "directory": "components/combobox" + }, + "bugs": { + "url": "https://github.com/adobe/spectrum-css/issues" + }, + "main": "dist/index.css", + "files": [ + "dist/*", + "metadata/mods.md", + "stories/template.js" + ], + "peerDependencies": { + "@spectrum-css/menu": ">=5", + "@spectrum-css/pickerbutton": ">=4", + "@spectrum-css/popover": ">=6", + "@spectrum-css/progresscircle": ">=2", + "@spectrum-css/textfield": ">=6", + "@spectrum-css/tokens": ">=14.0.0-next.3" + }, + "peerDependenciesMeta": { + "@spectrum-css/progresscircle": { + "optional": true + } + }, + "keywords": [ + "adobe", + "css", + "design system", + "spectrum" + ], + "publishConfig": { + "access": "public" + } } 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 ff46cc42f7b..5cc74352f12 100644 --- a/components/commons/package.json +++ b/components/commons/package.json @@ -1,23 +1,23 @@ { - "name": "@spectrum-css/commons", - "version": "10.0.0", - "description": "Common mixins for Spectrum CSS components", - "license": "Apache-2.0", - "author": "Adobe", - "homepage": "https://opensource.adobe.com/spectrum-css/", - "repository": { - "type": "git", - "url": "https://github.com/adobe/spectrum-css.git", - "directory": "components/commons" - }, - "bugs": { - "url": "https://github.com/adobe/spectrum-css/issues" - }, - "main": "index.css", - "peerDependencies": { - "@spectrum-css/tokens": ">=13" - }, - "publishConfig": { - "access": "public" - } + "name": "@spectrum-css/commons", + "version": "9.1.4-next.1", + "description": "Common mixins for Spectrum CSS components", + "license": "Apache-2.0", + "author": "Adobe", + "homepage": "https://opensource.adobe.com/spectrum-css/", + "repository": { + "type": "git", + "url": "https://github.com/adobe/spectrum-css.git", + "directory": "components/commons" + }, + "bugs": { + "url": "https://github.com/adobe/spectrum-css/issues" + }, + "main": "index.css", + "peerDependencies": { + "@spectrum-css/tokens": "^14.0.0-next.3" + }, + "publishConfig": { + "access": "public" + } } diff --git a/components/contextualhelp/package.json b/components/contextualhelp/package.json index 6e1e24f6691..a0e403b00bd 100644 --- a/components/contextualhelp/package.json +++ b/components/contextualhelp/package.json @@ -1,44 +1,42 @@ { - "name": "@spectrum-css/contextualhelp", - "version": "3.0.0", - "description": "The Spectrum CSS contextualhelp component", - "license": "Apache-2.0", - "author": "Adobe", - "homepage": "https://opensource.adobe.com/spectrum-css/", - "repository": { - "type": "git", - "url": "https://github.com/adobe/spectrum-css.git", - "directory": "components/contextualhelp" - }, - "bugs": { - "url": "https://github.com/adobe/spectrum-css/issues" - }, - "main": "dist/index.css", - "files": [ - "dist/*", - "CHANGELOG.md", - "package.json", - "stories/template.js", - "metadata/mods.md" - ], - "peerDependencies": { - "@spectrum-css/actionbutton": ">=5", - "@spectrum-css/link": ">=4", - "@spectrum-css/popover": ">=6", - "@spectrum-css/tokens": ">=13" - }, - "peerDependenciesMeta": { - "@spectrum-css/link": { - "optional": true - } - }, - "keywords": [ - "spectrum", - "css", - "design system", - "adobe" - ], - "publishConfig": { - "access": "public" - } + "name": "@spectrum-css/contextualhelp", + "version": "3.0.0", + "description": "The Spectrum CSS contextualhelp component", + "license": "Apache-2.0", + "author": "Adobe", + "homepage": "https://opensource.adobe.com/spectrum-css/", + "repository": { + "type": "git", + "url": "https://github.com/adobe/spectrum-css.git", + "directory": "components/contextualhelp" + }, + "bugs": { + "url": "https://github.com/adobe/spectrum-css/issues" + }, + "main": "dist/index.css", + "files": [ + "dist/*", + "metadata/mods.md", + "stories/template.js" + ], + "peerDependencies": { + "@spectrum-css/actionbutton": ">=5", + "@spectrum-css/link": ">=4", + "@spectrum-css/popover": ">=6", + "@spectrum-css/tokens": ">=14.0.0-next.3" + }, + "peerDependenciesMeta": { + "@spectrum-css/link": { + "optional": true + } + }, + "keywords": [ + "adobe", + "css", + "design system", + "spectrum" + ], + "publishConfig": { + "access": "public" + } } diff --git a/components/datepicker/package.json b/components/datepicker/package.json index a429cc7622a..57c71e256b2 100644 --- a/components/datepicker/package.json +++ b/components/datepicker/package.json @@ -1,40 +1,38 @@ { - "name": "@spectrum-css/datepicker", - "version": "3.0.0", - "description": "The Spectrum CSS datepicker component", - "license": "Apache-2.0", - "author": "Adobe", - "homepage": "https://opensource.adobe.com/spectrum-css/", - "repository": { - "type": "git", - "url": "https://github.com/adobe/spectrum-css.git", - "directory": "components/datepicker" - }, - "bugs": { - "url": "https://github.com/adobe/spectrum-css/issues" - }, - "main": "dist/index.css", - "files": [ - "dist/*", - "CHANGELOG.md", - "package.json", - "stories/template.js", - "metadata/mods.md" - ], - "peerDependencies": { - "@spectrum-css/calendar": ">=4", - "@spectrum-css/pickerbutton": ">=4", - "@spectrum-css/popover": ">=6", - "@spectrum-css/textfield": ">=6", - "@spectrum-css/tokens": ">=13" - }, - "keywords": [ - "spectrum", - "css", - "design system", - "adobe" - ], - "publishConfig": { - "access": "public" - } + "name": "@spectrum-css/datepicker", + "version": "3.0.0", + "description": "The Spectrum CSS datepicker component", + "license": "Apache-2.0", + "author": "Adobe", + "homepage": "https://opensource.adobe.com/spectrum-css/", + "repository": { + "type": "git", + "url": "https://github.com/adobe/spectrum-css.git", + "directory": "components/datepicker" + }, + "bugs": { + "url": "https://github.com/adobe/spectrum-css/issues" + }, + "main": "dist/index.css", + "files": [ + "dist/*", + "metadata/mods.md", + "stories/template.js" + ], + "peerDependencies": { + "@spectrum-css/calendar": ">=4", + "@spectrum-css/pickerbutton": ">=4", + "@spectrum-css/popover": ">=6", + "@spectrum-css/textfield": ">=6", + "@spectrum-css/tokens": ">=14.0.0-next.3" + }, + "keywords": [ + "adobe", + "css", + "design system", + "spectrum" + ], + "publishConfig": { + "access": "public" + } } diff --git a/components/dial/index.css b/components/dial/index.css index 8d3f6dd8a97..5eb5fb249b0 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-handle-marker-color-disabled: var(--spectrum-gray-300); - --spectrum-dial-border-color-disabled: var(--spectrum-gray-300); + --spectrum-dial-background-color-default: var(--spectrum-gray-75); + + --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 165d2b4f132..f7fdeda6899 100644 --- a/components/dial/package.json +++ b/components/dial/package.json @@ -1,36 +1,34 @@ { - "name": "@spectrum-css/dial", - "version": "3.0.0", - "description": "The Spectrum CSS dial component", - "license": "Apache-2.0", - "author": "Adobe", - "homepage": "https://opensource.adobe.com/spectrum-css/dial", - "repository": { - "type": "git", - "url": "https://github.com/adobe/spectrum-css.git", - "directory": "components/dial" - }, - "bugs": { - "url": "https://github.com/adobe/spectrum-css/issues" - }, - "main": "dist/index.css", - "files": [ - "dist/*", - "CHANGELOG.md", - "package.json", - "stories/template.js", - "metadata/mods.md" - ], - "peerDependencies": { - "@spectrum-css/tokens": ">=13" - }, - "keywords": [ - "spectrum", - "css", - "design system", - "adobe" - ], - "publishConfig": { - "access": "public" - } + "name": "@spectrum-css/dial", + "version": "3.0.0", + "description": "The Spectrum CSS dial component", + "license": "Apache-2.0", + "author": "Adobe", + "homepage": "https://opensource.adobe.com/spectrum-css/dial", + "repository": { + "type": "git", + "url": "https://github.com/adobe/spectrum-css.git", + "directory": "components/dial" + }, + "bugs": { + "url": "https://github.com/adobe/spectrum-css/issues" + }, + "main": "dist/index.css", + "files": [ + "dist/*", + "metadata/mods.md", + "stories/template.js" + ], + "peerDependencies": { + "@spectrum-css/tokens": ">=14.0.0-next.3" + }, + "keywords": [ + "adobe", + "css", + "design system", + "spectrum" + ], + "publishConfig": { + "access": "public" + } } diff --git a/components/dialog/package.json b/components/dialog/package.json index 1172a8098ce..edaefee6bb7 100644 --- a/components/dialog/package.json +++ b/components/dialog/package.json @@ -1,51 +1,49 @@ { - "name": "@spectrum-css/dialog", - "version": "10.0.0", - "description": "The Spectrum CSS dialog component", - "license": "Apache-2.0", - "author": "Adobe", - "homepage": "https://opensource.adobe.com/spectrum-css/dialog", - "repository": { - "type": "git", - "url": "https://github.com/adobe/spectrum-css.git", - "directory": "components/dialog" - }, - "bugs": { - "url": "https://github.com/adobe/spectrum-css/issues" - }, - "main": "dist/index.css", - "files": [ - "dist/*", - "CHANGELOG.md", - "package.json", - "stories/template.js", - "metadata/mods.md" - ], - "peerDependencies": { - "@spectrum-css/closebutton": ">=4", - "@spectrum-css/divider": ">=2", - "@spectrum-css/modal": ">=4", - "@spectrum-css/tokens": ">=13", - "@spectrum-css/underlay": ">=3" - }, - "peerDependenciesMeta": { - "@spectrum-css/divider": { - "optional": true - }, - "@spectrum-css/modal": { - "optional": true - }, - "@spectrum-css/underlay": { - "optional": true - } - }, - "keywords": [ - "spectrum", - "css", - "design system", - "adobe" - ], - "publishConfig": { - "access": "public" - } + "name": "@spectrum-css/dialog", + "version": "10.0.0", + "description": "The Spectrum CSS dialog component", + "license": "Apache-2.0", + "author": "Adobe", + "homepage": "https://opensource.adobe.com/spectrum-css/dialog", + "repository": { + "type": "git", + "url": "https://github.com/adobe/spectrum-css.git", + "directory": "components/dialog" + }, + "bugs": { + "url": "https://github.com/adobe/spectrum-css/issues" + }, + "main": "dist/index.css", + "files": [ + "dist/*", + "metadata/mods.md", + "stories/template.js" + ], + "peerDependencies": { + "@spectrum-css/closebutton": ">=4", + "@spectrum-css/divider": ">=2", + "@spectrum-css/modal": ">=4", + "@spectrum-css/tokens": ">=14.0.0-next.3", + "@spectrum-css/underlay": ">=3" + }, + "peerDependenciesMeta": { + "@spectrum-css/divider": { + "optional": true + }, + "@spectrum-css/modal": { + "optional": true + }, + "@spectrum-css/underlay": { + "optional": true + } + }, + "keywords": [ + "adobe", + "css", + "design system", + "spectrum" + ], + "publishConfig": { + "access": "public" + } } diff --git a/components/divider/index.css b/components/divider/index.css index d8e69872ba2..8594c903dc4 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 921abbe2eff..ce1b97f482e 100644 --- a/components/divider/package.json +++ b/components/divider/package.json @@ -1,36 +1,34 @@ { - "name": "@spectrum-css/divider", - "version": "3.0.0", - "description": "The Spectrum CSS divider component", - "license": "Apache-2.0", - "author": "Adobe", - "homepage": "https://opensource.adobe.com/spectrum-css/divider", - "repository": { - "type": "git", - "url": "https://github.com/adobe/spectrum-css.git", - "directory": "components/divider" - }, - "bugs": { - "url": "https://github.com/adobe/spectrum-css/issues" - }, - "main": "dist/index.css", - "files": [ - "dist/*", - "CHANGELOG.md", - "package.json", - "stories/template.js", - "metadata/mods.md" - ], - "peerDependencies": { - "@spectrum-css/tokens": ">=13" - }, - "keywords": [ - "spectrum", - "css", - "design system", - "adobe" - ], - "publishConfig": { - "access": "public" - } + "name": "@spectrum-css/divider", + "version": "3.0.0", + "description": "The Spectrum CSS divider component", + "license": "Apache-2.0", + "author": "Adobe", + "homepage": "https://opensource.adobe.com/spectrum-css/divider", + "repository": { + "type": "git", + "url": "https://github.com/adobe/spectrum-css.git", + "directory": "components/divider" + }, + "bugs": { + "url": "https://github.com/adobe/spectrum-css/issues" + }, + "main": "dist/index.css", + "files": [ + "dist/*", + "metadata/mods.md", + "stories/template.js" + ], + "peerDependencies": { + "@spectrum-css/tokens": ">=14.0.0-next.3" + }, + "keywords": [ + "adobe", + "css", + "design system", + "spectrum" + ], + "publishConfig": { + "access": "public" + } } diff --git a/components/dropindicator/package.json b/components/dropindicator/package.json index e46b589fa0c..93e6fca0f40 100644 --- a/components/dropindicator/package.json +++ b/components/dropindicator/package.json @@ -1,37 +1,35 @@ { - "name": "@spectrum-css/dropindicator", - "version": "5.0.0", - "description": "The Spectrum CSS dropindicator component", - "license": "Apache-2.0", - "author": "Adobe", - "homepage": "https://opensource.adobe.com/spectrum-css/dropindicator", - "repository": { - "type": "git", - "url": "https://github.com/adobe/spectrum-css.git", - "directory": "components/dropindicator" - }, - "bugs": { - "url": "https://github.com/adobe/spectrum-css/issues" - }, - "main": "dist/index.css", - "files": [ - "dist/*", - "CHANGELOG.md", - "package.json", - "stories/template.js", - "metadata/mods.md" - ], - "peerDependencies": { - "@spectrum-css/icon": ">=4", - "@spectrum-css/tokens": ">=13" - }, - "keywords": [ - "spectrum", - "css", - "design system", - "adobe" - ], - "publishConfig": { - "access": "public" - } + "name": "@spectrum-css/dropindicator", + "version": "5.0.0", + "description": "The Spectrum CSS dropindicator component", + "license": "Apache-2.0", + "author": "Adobe", + "homepage": "https://opensource.adobe.com/spectrum-css/dropindicator", + "repository": { + "type": "git", + "url": "https://github.com/adobe/spectrum-css.git", + "directory": "components/dropindicator" + }, + "bugs": { + "url": "https://github.com/adobe/spectrum-css/issues" + }, + "main": "dist/index.css", + "files": [ + "dist/*", + "metadata/mods.md", + "stories/template.js" + ], + "peerDependencies": { + "@spectrum-css/icon": ">=4", + "@spectrum-css/tokens": ">=14.0.0-next.3" + }, + "keywords": [ + "adobe", + "css", + "design system", + "spectrum" + ], + "publishConfig": { + "access": "public" + } } diff --git a/components/dropzone/index.css b/components/dropzone/index.css index df0e8e8e711..c2230090219 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 1d04e5633dd..fab7be5febf 100644 --- a/components/dropzone/package.json +++ b/components/dropzone/package.json @@ -1,47 +1,45 @@ { - "name": "@spectrum-css/dropzone", - "version": "6.0.0", - "description": "The Spectrum CSS dropzone component", - "license": "Apache-2.0", - "author": "Adobe", - "homepage": "https://opensource.adobe.com/spectrum-css/dropzone", - "repository": { - "type": "git", - "url": "https://github.com/adobe/spectrum-css.git", - "directory": "components/dropzone" - }, - "bugs": { - "url": "https://github.com/adobe/spectrum-css/issues" - }, - "main": "dist/index.css", - "files": [ - "dist/*", - "CHANGELOG.md", - "package.json", - "stories/template.js", - "metadata/mods.md" - ], - "peerDependencies": { - "@spectrum-css/actionbutton": ">=5", - "@spectrum-css/illustratedmessage": ">=6", - "@spectrum-css/link": ">=4", - "@spectrum-css/tokens": ">=13" - }, - "peerDependenciesMeta": { - "@spectrum-css/actionbutton": { - "optional": true - }, - "@spectrum-css/link": { - "optional": true - } - }, - "keywords": [ - "spectrum", - "css", - "design system", - "adobe" - ], - "publishConfig": { - "access": "public" - } + "name": "@spectrum-css/dropzone", + "version": "6.0.0", + "description": "The Spectrum CSS dropzone component", + "license": "Apache-2.0", + "author": "Adobe", + "homepage": "https://opensource.adobe.com/spectrum-css/dropzone", + "repository": { + "type": "git", + "url": "https://github.com/adobe/spectrum-css.git", + "directory": "components/dropzone" + }, + "bugs": { + "url": "https://github.com/adobe/spectrum-css/issues" + }, + "main": "dist/index.css", + "files": [ + "dist/*", + "metadata/mods.md", + "stories/template.js" + ], + "peerDependencies": { + "@spectrum-css/actionbutton": ">=5", + "@spectrum-css/illustratedmessage": ">=6", + "@spectrum-css/link": ">=4", + "@spectrum-css/tokens": ">=14.0.0-next.3" + }, + "peerDependenciesMeta": { + "@spectrum-css/actionbutton": { + "optional": true + }, + "@spectrum-css/link": { + "optional": true + } + }, + "keywords": [ + "adobe", + "css", + "design system", + "spectrum" + ], + "publishConfig": { + "access": "public" + } } diff --git a/components/fieldgroup/package.json b/components/fieldgroup/package.json index 1608d6ebab3..574e4cc27d2 100644 --- a/components/fieldgroup/package.json +++ b/components/fieldgroup/package.json @@ -1,50 +1,48 @@ { - "name": "@spectrum-css/fieldgroup", - "version": "5.0.0", - "description": "The Spectrum CSS fieldgroup component", - "license": "Apache-2.0", - "author": "Adobe", - "homepage": "https://opensource.adobe.com/spectrum-css/fieldgroup", - "repository": { - "type": "git", - "url": "https://github.com/adobe/spectrum-css.git", - "directory": "components/fieldgroup" - }, - "bugs": { - "url": "https://github.com/adobe/spectrum-css/issues" - }, - "main": "dist/index.css", - "files": [ - "dist/*", - "CHANGELOG.md", - "package.json", - "stories/template.js", - "metadata/mods.md" - ], - "peerDependencies": { - "@spectrum-css/checkbox": ">=8", - "@spectrum-css/helptext": ">=4", - "@spectrum-css/radio": ">=8", - "@spectrum-css/tokens": ">=13" - }, - "peerDependenciesMeta": { - "@spectrum-css/checkbox": { - "optional": true - }, - "@spectrum-css/helptext": { - "optional": true - }, - "@spectrum-css/radio": { - "optional": true - } - }, - "keywords": [ - "spectrum", - "css", - "design system", - "adobe" - ], - "publishConfig": { - "access": "public" - } + "name": "@spectrum-css/fieldgroup", + "version": "5.0.0", + "description": "The Spectrum CSS fieldgroup component", + "license": "Apache-2.0", + "author": "Adobe", + "homepage": "https://opensource.adobe.com/spectrum-css/fieldgroup", + "repository": { + "type": "git", + "url": "https://github.com/adobe/spectrum-css.git", + "directory": "components/fieldgroup" + }, + "bugs": { + "url": "https://github.com/adobe/spectrum-css/issues" + }, + "main": "dist/index.css", + "files": [ + "dist/*", + "metadata/mods.md", + "stories/template.js" + ], + "peerDependencies": { + "@spectrum-css/checkbox": ">=8", + "@spectrum-css/helptext": ">=4", + "@spectrum-css/radio": ">=8", + "@spectrum-css/tokens": ">=14.0.0-next.3" + }, + "peerDependenciesMeta": { + "@spectrum-css/checkbox": { + "optional": true + }, + "@spectrum-css/helptext": { + "optional": true + }, + "@spectrum-css/radio": { + "optional": true + } + }, + "keywords": [ + "adobe", + "css", + "design system", + "spectrum" + ], + "publishConfig": { + "access": "public" + } } 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..6c8e37f2a13 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 + ### 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`. + + ### 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..b95ad480591 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: | + ### 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 c37b8a18fdb..3545ab47066 100644 --- a/components/fieldlabel/package.json +++ b/components/fieldlabel/package.json @@ -1,37 +1,35 @@ { - "name": "@spectrum-css/fieldlabel", - "version": "8.0.0", - "description": "The Spectrum CSS fieldlabel component", - "license": "Apache-2.0", - "author": "Adobe", - "homepage": "https://opensource.adobe.com/spectrum-css/fieldlabel", - "repository": { - "type": "git", - "url": "https://github.com/adobe/spectrum-css.git", - "directory": "components/fieldlabel" - }, - "bugs": { - "url": "https://github.com/adobe/spectrum-css/issues" - }, - "main": "dist/index.css", - "files": [ - "dist/*", - "CHANGELOG.md", - "package.json", - "stories/template.js", - "metadata/mods.md" - ], - "peerDependencies": { - "@spectrum-css/icon": ">=4", - "@spectrum-css/tokens": ">=13" - }, - "keywords": [ - "spectrum", - "css", - "design system", - "adobe" - ], - "publishConfig": { - "access": "public" - } + "name": "@spectrum-css/fieldlabel", + "version": "8.0.0-next.2", + "description": "The Spectrum CSS fieldlabel component", + "license": "Apache-2.0", + "author": "Adobe", + "homepage": "https://opensource.adobe.com/spectrum-css/fieldlabel", + "repository": { + "type": "git", + "url": "https://github.com/adobe/spectrum-css.git", + "directory": "components/fieldlabel" + }, + "bugs": { + "url": "https://github.com/adobe/spectrum-css/issues" + }, + "main": "dist/index.css", + "files": [ + "dist/*", + "metadata/mods.md", + "stories/template.js" + ], + "peerDependencies": { + "@spectrum-css/icon": ">=4", + "@spectrum-css/tokens": ">=14" + }, + "keywords": [ + "adobe", + "css", + "design system", + "spectrum" + ], + "publishConfig": { + "access": "public" + } } diff --git a/components/fieldlabel/stories/fieldlabel.stories.js b/components/fieldlabel/stories/fieldlabel.stories.js index 59d60bbeb22..457543a9afd 100644 --- a/components/fieldlabel/stories/fieldlabel.stories.js +++ b/components/fieldlabel/stories/fieldlabel.stories.js @@ -1,4 +1,3 @@ -// Import the component markup template import { Template } from "./template"; export default { @@ -54,6 +53,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 +109,15 @@ WrappingAndRequired.args = { isRequired: true, style: { width: "200px" }, }; + +export const StaticWhite = Template.bind({}); +StaticWhite.args = { + label: "The static white class used on a label marked as required", + staticColor: "white", +}; + +export const StaticBlack = Template.bind({}); +StaticBlack.args = { + label: "The static black class used on a label marked as required", + staticColor: "black", +}; \ No newline at end of file diff --git a/components/fieldlabel/stories/template.js b/components/fieldlabel/stories/template.js index 2001e6a18c4..9cf94b0d17c 100644 --- a/components/fieldlabel/stories/template.js +++ b/components/fieldlabel/stories/template.js @@ -2,6 +2,7 @@ import { html } from "lit"; import { classMap } from "lit/directives/class-map.js"; import { ifDefined } from "lit/directives/if-defined.js"; import { styleMap } from "lit/directives/style-map.js"; +import { capitalize, 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 26038625db2..c7bc71ed24f 100644 --- a/components/floatingactionbutton/package.json +++ b/components/floatingactionbutton/package.json @@ -1,37 +1,35 @@ { - "name": "@spectrum-css/floatingactionbutton", - "version": "2.0.0", - "description": "The Spectrum CSS floatingactionbutton component", - "license": "Apache-2.0", - "author": "Adobe", - "contributors": [], - "homepage": "https://opensource.adobe.com/spectrum-css/", - "repository": { - "type": "git", - "url": "https://github.com/adobe/spectrum-css.git", - "directory": "components/floatingactionbutton" - }, - "bugs": { - "url": "https://github.com/adobe/spectrum-css/issues" - }, - "main": "dist/index.css", - "files": [ - "dist/*", - "CHANGELOG.md", - "package.json", - "stories/template.js", - "metadata/mods.md" - ], - "peerDependencies": { - "@spectrum-css/tokens": ">=13" - }, - "keywords": [ - "spectrum", - "css", - "design system", - "adobe" - ], - "publishConfig": { - "access": "public" - } + "name": "@spectrum-css/floatingactionbutton", + "version": "2.0.0", + "description": "The Spectrum CSS floatingactionbutton component", + "license": "Apache-2.0", + "author": "Adobe", + "contributors": [], + "homepage": "https://opensource.adobe.com/spectrum-css/", + "repository": { + "type": "git", + "url": "https://github.com/adobe/spectrum-css.git", + "directory": "components/floatingactionbutton" + }, + "bugs": { + "url": "https://github.com/adobe/spectrum-css/issues" + }, + "main": "dist/index.css", + "files": [ + "dist/*", + "metadata/mods.md", + "stories/template.js" + ], + "peerDependencies": { + "@spectrum-css/tokens": ">=14.0.0-next.3" + }, + "keywords": [ + "adobe", + "css", + "design system", + "spectrum" + ], + "publishConfig": { + "access": "public" + } } diff --git a/components/helptext/index.css b/components/helptext/index.css index dcf2189be8f..ead4911f8a4 100644 --- a/components/helptext/index.css +++ b/components/helptext/index.css @@ -12,23 +12,29 @@ governing permissions and limitations under the License. .spectrum-HelpText { --spectrum-helptext-line-height: var(--spectrum-line-height-100); - --spectrum-helptext-content-color-default: var(--spectrum-neutral-subdued-content-color-default); - --spectrum-helptext-icon-color-default: var(--spectrum-neutral-subdued-content-color-default); - --spectrum-helptext-disabled-content-color: var(--spectrum-disabled-content-color); + --spectrum-helptext-min-height: var(--spectrum-component-height-100); + --spectrum-helptext-icon-size: var(--spectrum-workflow-icon-size-100); + --spectrum-helptext-font-size: var(--spectrum-font-size-100); + --spectrum-helptext-text-to-visual: var(--spectrum-text-to-visual-100); + --spectrum-helptext-top-to-workflow-icon: var(--spectrum-component-top-to-workflow-icon-100); + --spectrum-helptext-bottom-to-workflow-icon: var(--spectrum-helptext-top-to-workflow-icon); + --spectrum-helptext-top-to-text: var(--spectrum-component-top-to-text-100); + --spectrum-helptext-bottom-to-text: var(--spectrum-component-bottom-to-text-100); + &, &.spectrum-HelpText--neutral { --spectrum-helptext-content-color-default: var(--spectrum-neutral-subdued-content-color-default); --spectrum-helptext-icon-color-default: var(--spectrum-neutral-subdued-content-color-default); } &.spectrum-HelpText--negative { - --spectrum-helptext-content-color-default: var(--spectrum-negative-color-900); - --spectrum-helptext-icon-color-default: var(--spectrum-negative-color-900); + --spectrum-helptext-content-color-default: var(--spectrum-negative-content-color-default); + --spectrum-helptext-icon-color-default: var(--spectrum-negative-content-color-default); } &.is-disabled { - --spectrum-helptext-content-color-default: var(--spectrum-helptext-disabled-content-color); - --spectrum-helptext-icon-color-default: var(--spectrum-helptext-disabled-content-color); + --spectrum-helptext-content-color-default: var(--spectrum-disabled-content-color); + --spectrum-helptext-icon-color-default: var(--spectrum-disabled-content-color); } &:lang(ja), @@ -43,57 +49,32 @@ governing permissions and limitations under the License. --spectrum-helptext-icon-size: var(--spectrum-workflow-icon-size-75); --spectrum-helptext-font-size: var(--spectrum-font-size-75); --spectrum-helptext-text-to-visual: var(--spectrum-text-to-visual-75); - --spectrum-helptext-top-to-workflow-icon: var(--spectrum-help-text-top-to-workflow-icon-small); - --spectrum-helptext-bottom-to-workflow-icon: var(--spectrum-helptext-top-to-workflow-icon); - --spectrum-helptext-top-to-text: var(--spectrum-component-top-to-text-75); - --spectrum-helptext-bottom-to-text: var(--spectrum-component-bottom-to-text-75); -} - -.spectrum-HelpText--sizeM { - --spectrum-helptext-min-height: var(--spectrum-component-height-75); - --spectrum-helptext-icon-size: var(--spectrum-workflow-icon-size-100); - --spectrum-helptext-font-size: var(--spectrum-font-size-75); - --spectrum-helptext-text-to-visual: var(--spectrum-text-to-visual-75); - --spectrum-helptext-top-to-workflow-icon: var(--spectrum-help-text-top-to-workflow-icon-medium); + --spectrum-helptext-top-to-workflow-icon: var(--spectrum-component-top-to-workflow-icon-75); --spectrum-helptext-bottom-to-workflow-icon: var(--spectrum-helptext-top-to-workflow-icon); --spectrum-helptext-top-to-text: var(--spectrum-component-top-to-text-75); --spectrum-helptext-bottom-to-text: var(--spectrum-component-bottom-to-text-75); } .spectrum-HelpText--sizeL { - --spectrum-helptext-min-height: var(--spectrum-component-height-100); - --spectrum-helptext-icon-size: var(--spectrum-workflow-icon-size-200); - --spectrum-helptext-font-size: var(--spectrum-font-size-100); - --spectrum-helptext-text-to-visual: var(--spectrum-text-to-visual-100); - --spectrum-helptext-top-to-workflow-icon: var(--spectrum-help-text-top-to-workflow-icon-large); - --spectrum-helptext-bottom-to-workflow-icon: var(--spectrum-helptext-top-to-workflow-icon); - --spectrum-helptext-top-to-text: var(--spectrum-component-top-to-text-100); - --spectrum-helptext-bottom-to-text: var(--spectrum-component-bottom-to-text-100); -} - -.spectrum-HelpText--sizeXL { --spectrum-helptext-min-height: var(--spectrum-component-height-200); - --spectrum-helptext-icon-size: var(--spectrum-workflow-icon-size-300); + --spectrum-helptext-icon-size: var(--spectrum-workflow-icon-size-200); --spectrum-helptext-font-size: var(--spectrum-font-size-200); --spectrum-helptext-text-to-visual: var(--spectrum-text-to-visual-200); - --spectrum-helptext-top-to-workflow-icon: var(--spectrum-help-text-top-to-workflow-icon-extra-large); + --spectrum-helptext-top-to-workflow-icon: var(--spectrum-component-top-to-workflow-icon-200); --spectrum-helptext-bottom-to-workflow-icon: var(--spectrum-helptext-top-to-workflow-icon); --spectrum-helptext-top-to-text: var(--spectrum-component-top-to-text-200); --spectrum-helptext-bottom-to-text: var(--spectrum-component-bottom-to-text-200); } -@media (forced-colors: active) { - .spectrum-HelpText { - --highcontrast-helptext-content-color-default: CanvasText; - --highcontrast-helptext-icon-color-default: CanvasText; - - forced-color-adjust: none; - - .spectrum-HelpText-validationIcon, - .spectrum-HelpText-text { - forced-color-adjust: none; - } - } +.spectrum-HelpText--sizeXL { + --spectrum-helptext-min-height: var(--spectrum-component-height-300); + --spectrum-helptext-icon-size: var(--spectrum-workflow-icon-size-300); + --spectrum-helptext-font-size: var(--spectrum-font-size-300); + --spectrum-helptext-text-to-visual: var(--spectrum-text-to-visual-300); + --spectrum-helptext-top-to-workflow-icon: var(--spectrum-component-top-to-workflow-icon-300); + --spectrum-helptext-bottom-to-workflow-icon: var(--spectrum-helptext-top-to-workflow-icon); + --spectrum-helptext-top-to-text: var(--spectrum-component-top-to-text-300); + --spectrum-helptext-bottom-to-text: var(--spectrum-component-bottom-to-text-300); } .spectrum-HelpText { @@ -155,3 +136,27 @@ governing permissions and limitations under the License. } } } + +@media (forced-colors: active) { + .spectrum-HelpText { + --highcontrast-helptext-content-color-default: CanvasText; + --highcontrast-helptext-icon-color-default: CanvasText; + + forced-color-adjust: none; + + .spectrum-HelpText-validationIcon, + .spectrum-HelpText-text { + forced-color-adjust: none; + } + + &.is-disabled { + .spectrum-HelpText-text { + --highcontrast-helptext-content-color-default: GrayText; + } + + .spectrum-HelpText-validationIcon { + --highcontrast-helptext-icon-color-default: GrayText; + } + } + } +} diff --git a/components/helptext/metadata/helptext.yml b/components/helptext/metadata/helptext.yml index 5e1b6d9eb31..5c860937d73 100644 --- a/components/helptext/metadata/helptext.yml +++ b/components/helptext/metadata/helptext.yml @@ -5,6 +5,11 @@ 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/helptext/metadata/mods.md">here</a>. + - name: Migration Guide + description: | + ### Version 6.0.0 + #### Spectrum 2 release + Help text now uses Spectrum 2 tokens and specifications. This includes updates to heights and spacing, icons and icon sizes, colors, and fonts. examples: - id: helptext-sizing name: Sizing diff --git a/components/helptext/package.json b/components/helptext/package.json index d4b40106693..1ef1259c47d 100644 --- a/components/helptext/package.json +++ b/components/helptext/package.json @@ -1,37 +1,35 @@ { - "name": "@spectrum-css/helptext", - "version": "5.0.0", - "description": "The Spectrum CSS helptext component", - "license": "Apache-2.0", - "author": "Adobe", - "homepage": "https://opensource.adobe.com/spectrum-css/helptext", - "repository": { - "type": "git", - "url": "https://github.com/adobe/spectrum-css.git", - "directory": "components/helptext" - }, - "bugs": { - "url": "https://github.com/adobe/spectrum-css/issues" - }, - "main": "dist/index.css", - "files": [ - "dist/*", - "CHANGELOG.md", - "package.json", - "stories/template.js", - "metadata/mods.md" - ], - "peerDependencies": { - "@spectrum-css/icon": ">=4", - "@spectrum-css/tokens": ">=13" - }, - "keywords": [ - "spectrum", - "css", - "design system", - "adobe" - ], - "publishConfig": { - "access": "public" - } + "name": "@spectrum-css/helptext", + "version": "5.0.0", + "description": "The Spectrum CSS helptext component", + "license": "Apache-2.0", + "author": "Adobe", + "homepage": "https://opensource.adobe.com/spectrum-css/helptext", + "repository": { + "type": "git", + "url": "https://github.com/adobe/spectrum-css.git", + "directory": "components/helptext" + }, + "bugs": { + "url": "https://github.com/adobe/spectrum-css/issues" + }, + "main": "dist/index.css", + "files": [ + "dist/*", + "metadata/mods.md", + "stories/template.js" + ], + "peerDependencies": { + "@spectrum-css/icon": ">=4", + "@spectrum-css/tokens": ">=14.0.0-next.6" + }, + "keywords": [ + "adobe", + "css", + "design system", + "spectrum" + ], + "publishConfig": { + "access": "public" + } } diff --git a/components/helptext/stories/helptext.stories.js b/components/helptext/stories/helptext.stories.js index ad9a4ea724d..e6472d32341 100644 --- a/components/helptext/stories/helptext.stories.js +++ b/components/helptext/stories/helptext.stories.js @@ -1,4 +1,7 @@ -// Import the component markup template +import { Template as Typography } from "@spectrum-css/typography/stories/template.js"; +import { html } from "lit"; +import { styleMap } from "lit/directives/style-map.js"; +import { when } from "lit/directives/when.js"; import { Template } from "./template"; export default { @@ -85,16 +88,166 @@ export default { type: "migrated", }, }, + decorators: [ + (Story, context) => html` + <style> + .spectrum-Detail { display: inline-block; } + .spectrum-Typography > div { + border: 1px solid var(--spectrum-gray-200); + border-radius: 4px; + padding: 0 1em 1em; + /* Why seafoam? Because it separates it from the component styles. */ + --mod-detail-font-color: var(--spectrum-seafoam-900); + } + </style> + <div + style=${styleMap({ + display: "flex", + flexDirection: "column", + alignItems: "flex-start", + gap: "1rem", + "--mod-detail-margin-end": ".3rem", + })} + > + ${Story(context)} + </div> + `, + ], }; -export const Default = Template.bind({}); -Default.storyName = "Neutral"; -Default.args = {}; +const States = (args) => + html` <div> + ${Typography({ + semantics: "detail", + size: "s", + content: ["Default"], + })} + ${Template(args)} + </div> + ${when(args.variant === "negative", () => html` + <div> + ${Typography({ + semantics: "detail", + size: "s", + content: ["Option for No Icon"], + })} + ${Template({ + ...args, + variant: "negative", + hideIcon: true, + })} + </div> + `)} + <div> + ${Typography({ + semantics: "detail", + size: "s", + content: ["Disabled"], + })} + ${Template({ + ...args, + isDisabled: true, + })} + </div> + `; -export const Negative = Template.bind({}); -Negative.storyName = "Negative"; -Negative.args = { - variant: "negative", - text: "This is an example with wrapping text. Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.", - customStyles: {"max-width": "350px"}, -}; +const Sizes = (args) => + html` ${["s", "m", "l", "xl"].map((size) => { + return html` <div> + ${Typography({ + semantics: "detail", + size: "s", + content: [ + { + s: "Small", + m: "Medium", + l: "Large", + xl: "Extra-large", + }[size], + ], + })} + ${Template({ + ...args, + size, + })} + </div>`; + })}`; + +const Variants = (args) => + html` ${window.isChromatic() + ? html` <div class="spectrum-Typography"> + ${Typography({ + semantics: "detail", + size: "l", + content: ["Neutral"], + })} + <div + style=${styleMap({ + display: "flex", + flexDirection: "column", + gap: ".3rem", + })} + > + ${States(args)} + </div> + </div> + <div class="spectrum-Typography"> + ${Typography({ + semantics: "detail", + size: "l", + content: ["Negative"], + })} + <div + style=${styleMap({ + display: "flex", + flexDirection: "column", + gap: ".3rem", + })} + > + ${States({ + ...args, + variant: "negative", + text: "This is an example with wrapping text. Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.", + customStyles: {"max-width": "350px"}, + })} + </div> + </div> + <div class="spectrum-Typography"> + ${Typography({ + semantics: "detail", + size: "l", + content: ["Sizing"], + })} + <div + style=${styleMap({ + display: "flex", + flexDirection: "column", + gap: ".3rem", + })} + > + ${Sizes(args)} + </div> + </div> + <div class="spectrum-Typography"> + ${Typography({ + semantics: "detail", + size: "l", + content: ["Sizing - Negative"], + })} + <div + style=${styleMap({ + display: "flex", + flexDirection: "column", + gap: ".3rem", + })} + > + ${Sizes({ + ...args, + variant: "negative", + })} + </div> + </div>` + : Template(args)}`; + +export const Default = Variants.bind({}); +Default.args = {}; diff --git a/components/icon/package.json b/components/icon/package.json index 606519827be..fbc0296b530 100644 --- a/components/icon/package.json +++ b/components/icon/package.json @@ -1,36 +1,34 @@ { - "name": "@spectrum-css/icon", - "version": "7.0.0", - "description": "The Spectrum CSS icon component", - "license": "Apache-2.0", - "author": "Adobe", - "homepage": "https://opensource.adobe.com/spectrum-css/", - "repository": { - "type": "git", - "url": "https://github.com/adobe/spectrum-css.git", - "directory": "components/icon" - }, - "bugs": { - "url": "https://github.com/adobe/spectrum-css/issues" - }, - "main": "dist/index.css", - "files": [ - "dist/*", - "CHANGELOG.md", - "package.json", - "stories/template.js", - "metadata/mods.md" - ], - "peerDependencies": { - "@spectrum-css/tokens": ">=13.1" - }, - "keywords": [ - "spectrum", - "css", - "design system", - "adobe" - ], - "publishConfig": { - "access": "public" - } + "name": "@spectrum-css/icon", + "version": "7.0.0", + "description": "The Spectrum CSS icon component", + "license": "Apache-2.0", + "author": "Adobe", + "homepage": "https://opensource.adobe.com/spectrum-css/", + "repository": { + "type": "git", + "url": "https://github.com/adobe/spectrum-css.git", + "directory": "components/icon" + }, + "bugs": { + "url": "https://github.com/adobe/spectrum-css/issues" + }, + "main": "dist/index.css", + "files": [ + "dist/*", + "metadata/mods.md", + "stories/template.js" + ], + "peerDependencies": { + "@spectrum-css/tokens": ">=13.1" + }, + "keywords": [ + "adobe", + "css", + "design system", + "spectrum" + ], + "publishConfig": { + "access": "public" + } } diff --git a/components/illustratedmessage/package.json b/components/illustratedmessage/package.json index 735c3b73469..2a74b841cfa 100644 --- a/components/illustratedmessage/package.json +++ b/components/illustratedmessage/package.json @@ -1,37 +1,35 @@ { - "name": "@spectrum-css/illustratedmessage", - "version": "7.0.0", - "description": "The Spectrum CSS illustratedmessage component", - "license": "Apache-2.0", - "author": "Adobe", - "homepage": "https://opensource.adobe.com/spectrum-css/illustratedmessage", - "repository": { - "type": "git", - "url": "https://github.com/adobe/spectrum-css.git", - "directory": "components/illustratedmessage" - }, - "bugs": { - "url": "https://github.com/adobe/spectrum-css/issues" - }, - "main": "dist/index.css", - "files": [ - "dist/*", - "CHANGELOG.md", - "package.json", - "stories/template.js", - "metadata/mods.md" - ], - "peerDependencies": { - "@spectrum-css/tokens": ">=13", - "@spectrum-css/typography": ">=5" - }, - "keywords": [ - "spectrum", - "css", - "design system", - "adobe" - ], - "publishConfig": { - "access": "public" - } + "name": "@spectrum-css/illustratedmessage", + "version": "7.0.0", + "description": "The Spectrum CSS illustratedmessage component", + "license": "Apache-2.0", + "author": "Adobe", + "homepage": "https://opensource.adobe.com/spectrum-css/illustratedmessage", + "repository": { + "type": "git", + "url": "https://github.com/adobe/spectrum-css.git", + "directory": "components/illustratedmessage" + }, + "bugs": { + "url": "https://github.com/adobe/spectrum-css/issues" + }, + "main": "dist/index.css", + "files": [ + "dist/*", + "metadata/mods.md", + "stories/template.js" + ], + "peerDependencies": { + "@spectrum-css/tokens": ">=14.0.0-next.3", + "@spectrum-css/typography": ">=5" + }, + "keywords": [ + "adobe", + "css", + "design system", + "spectrum" + ], + "publishConfig": { + "access": "public" + } } diff --git a/components/infieldbutton/package.json b/components/infieldbutton/package.json index 07fa184c383..e9367b61242 100644 --- a/components/infieldbutton/package.json +++ b/components/infieldbutton/package.json @@ -1,42 +1,40 @@ { - "name": "@spectrum-css/infieldbutton", - "version": "5.0.0", - "description": "The Spectrum CSS infield button component", - "license": "Apache-2.0", - "author": "Adobe", - "homepage": "https://opensource.adobe.com/spectrum-css/infieldbutton", - "repository": { - "type": "git", - "url": "https://github.com/adobe/spectrum-css.git", - "directory": "components/infieldbutton" - }, - "bugs": { - "url": "https://github.com/adobe/spectrum-css/issues" - }, - "main": "dist/index.css", - "files": [ - "dist/*", - "CHANGELOG.md", - "package.json", - "stories/template.js", - "metadata/mods.md" - ], - "peerDependencies": { - "@spectrum-css/icon": ">=4", - "@spectrum-css/tokens": ">=13" - }, - "peerDependenciesMeta": { - "@spectrum-css/icon": { - "optional": true - } - }, - "keywords": [ - "spectrum", - "css", - "design system", - "adobe" - ], - "publishConfig": { - "access": "public" - } + "name": "@spectrum-css/infieldbutton", + "version": "5.0.0", + "description": "The Spectrum CSS infield button component", + "license": "Apache-2.0", + "author": "Adobe", + "homepage": "https://opensource.adobe.com/spectrum-css/infieldbutton", + "repository": { + "type": "git", + "url": "https://github.com/adobe/spectrum-css.git", + "directory": "components/infieldbutton" + }, + "bugs": { + "url": "https://github.com/adobe/spectrum-css/issues" + }, + "main": "dist/index.css", + "files": [ + "dist/*", + "metadata/mods.md", + "stories/template.js" + ], + "peerDependencies": { + "@spectrum-css/icon": ">=4", + "@spectrum-css/tokens": ">=14.0.0-next.3" + }, + "peerDependenciesMeta": { + "@spectrum-css/icon": { + "optional": true + } + }, + "keywords": [ + "adobe", + "css", + "design system", + "spectrum" + ], + "publishConfig": { + "access": "public" + } } 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 2bcc58e8fcd..df892f66a62 100644 --- a/components/inlinealert/package.json +++ b/components/inlinealert/package.json @@ -1,43 +1,41 @@ { - "name": "@spectrum-css/inlinealert", - "version": "8.0.0", - "description": "The Spectrum CSS in-line alert component", - "license": "Apache-2.0", - "author": "Adobe", - "homepage": "https://opensource.adobe.com/spectrum-css/inlinealert", - "repository": { - "type": "git", - "url": "https://github.com/adobe/spectrum-css.git", - "directory": "components/inlinealert" - }, - "bugs": { - "url": "https://github.com/adobe/spectrum-css/issues" - }, - "main": "dist/index.css", - "files": [ - "dist/*", - "CHANGELOG.md", - "package.json", - "stories/template.js", - "metadata/mods.md" - ], - "peerDependencies": { - "@spectrum-css/button": ">=11", - "@spectrum-css/icon": ">=4", - "@spectrum-css/tokens": ">=13" - }, - "peerDependenciesMeta": { - "@spectrum-css/button": { - "optional": true - } - }, - "keywords": [ - "spectrum", - "css", - "design system", - "adobe" - ], - "publishConfig": { - "access": "public" - } + "name": "@spectrum-css/inlinealert", + "version": "8.0.0", + "description": "The Spectrum CSS in-line alert component", + "license": "Apache-2.0", + "author": "Adobe", + "homepage": "https://opensource.adobe.com/spectrum-css/inlinealert", + "repository": { + "type": "git", + "url": "https://github.com/adobe/spectrum-css.git", + "directory": "components/inlinealert" + }, + "bugs": { + "url": "https://github.com/adobe/spectrum-css/issues" + }, + "main": "dist/index.css", + "files": [ + "dist/*", + "metadata/mods.md", + "stories/template.js" + ], + "peerDependencies": { + "@spectrum-css/button": ">=11", + "@spectrum-css/icon": ">=4", + "@spectrum-css/tokens": ">=14.0.0-next.3" + }, + "peerDependenciesMeta": { + "@spectrum-css/button": { + "optional": true + } + }, + "keywords": [ + "adobe", + "css", + "design system", + "spectrum" + ], + "publishConfig": { + "access": "public" + } } diff --git a/components/link/package.json b/components/link/package.json index f38f3e6dc88..1cadd06f36d 100644 --- a/components/link/package.json +++ b/components/link/package.json @@ -1,36 +1,34 @@ { - "name": "@spectrum-css/link", - "version": "5.0.0", - "description": "The Spectrum CSS link component", - "license": "Apache-2.0", - "author": "Adobe", - "homepage": "https://opensource.adobe.com/spectrum-css/link", - "repository": { - "type": "git", - "url": "https://github.com/adobe/spectrum-css.git", - "directory": "components/link" - }, - "bugs": { - "url": "https://github.com/adobe/spectrum-css/issues" - }, - "main": "dist/index.css", - "files": [ - "dist/*", - "CHANGELOG.md", - "package.json", - "stories/template.js", - "metadata/mods.md" - ], - "peerDependencies": { - "@spectrum-css/tokens": ">=13" - }, - "keywords": [ - "spectrum", - "css", - "design system", - "adobe" - ], - "publishConfig": { - "access": "public" - } + "name": "@spectrum-css/link", + "version": "5.0.0", + "description": "The Spectrum CSS link component", + "license": "Apache-2.0", + "author": "Adobe", + "homepage": "https://opensource.adobe.com/spectrum-css/link", + "repository": { + "type": "git", + "url": "https://github.com/adobe/spectrum-css.git", + "directory": "components/link" + }, + "bugs": { + "url": "https://github.com/adobe/spectrum-css/issues" + }, + "main": "dist/index.css", + "files": [ + "dist/*", + "metadata/mods.md", + "stories/template.js" + ], + "peerDependencies": { + "@spectrum-css/tokens": ">=14.0.0-next.3" + }, + "keywords": [ + "adobe", + "css", + "design system", + "spectrum" + ], + "publishConfig": { + "access": "public" + } } diff --git a/components/logicbutton/index.css b/components/logicbutton/index.css index dee858148c5..ad65f071120 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..2f93f78518c 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 + ### 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`. + + ### 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/package.json b/components/logicbutton/package.json index 3f436ed9700..c829cd9d049 100644 --- a/components/logicbutton/package.json +++ b/components/logicbutton/package.json @@ -1,39 +1,37 @@ { - "name": "@spectrum-css/logicbutton", - "version": "4.0.0", - "description": "The Spectrum CSS logicbutton component", - "license": "Apache-2.0", - "author": "Adobe", - "homepage": "https://opensource.adobe.com/spectrum-css/logicbutton", - "repository": { - "type": "git", - "url": "https://github.com/adobe/spectrum-css.git", - "directory": "components/logicbutton" - }, - "bugs": { - "url": "https://github.com/adobe/spectrum-css/issues" - }, - "main": "dist/index.css", - "files": [ - "dist/*", - "CHANGELOG.md", - "package.json", - "stories/template.js", - "metadata/mods.md" - ], - "peerDependencies": { - "@spectrum-css/tokens": ">=13" - }, - "devDependencies": { - "@spectrum-css/commons": "^10.0.0" - }, - "keywords": [ - "spectrum", - "css", - "design system", - "adobe" - ], - "publishConfig": { - "access": "public" - } + "name": "@spectrum-css/logicbutton", + "version": "4.0.0", + "description": "The Spectrum CSS logicbutton component", + "license": "Apache-2.0", + "author": "Adobe", + "homepage": "https://opensource.adobe.com/spectrum-css/logicbutton", + "repository": { + "type": "git", + "url": "https://github.com/adobe/spectrum-css.git", + "directory": "components/logicbutton" + }, + "bugs": { + "url": "https://github.com/adobe/spectrum-css/issues" + }, + "main": "dist/index.css", + "files": [ + "dist/*", + "metadata/mods.md", + "stories/template.js" + ], + "peerDependencies": { + "@spectrum-css/tokens": ">=14.0.0-next.3" + }, + "devDependencies": { + "@spectrum-css/commons": "^10.0.0" + }, + "keywords": [ + "adobe", + "css", + "design system", + "spectrum" + ], + "publishConfig": { + "access": "public" + } } diff --git a/components/menu/package.json b/components/menu/package.json index 5c8024cb03f..c3164defb98 100644 --- a/components/menu/package.json +++ b/components/menu/package.json @@ -1,55 +1,53 @@ { - "name": "@spectrum-css/menu", - "version": "7.0.0", - "description": "The Spectrum CSS menu component", - "license": "Apache-2.0", - "author": "Adobe", - "homepage": "https://opensource.adobe.com/spectrum-css/menu", - "repository": { - "type": "git", - "url": "https://github.com/adobe/spectrum-css.git", - "directory": "components/menu" - }, - "bugs": { - "url": "https://github.com/adobe/spectrum-css/issues" - }, - "main": "dist/index.css", - "files": [ - "dist/*", - "CHANGELOG.md", - "package.json", - "stories/template.js", - "metadata/mods.md" - ], - "peerDependencies": { - "@spectrum-css/checkbox": ">=8", - "@spectrum-css/divider": ">=2", - "@spectrum-css/icon": ">=4", - "@spectrum-css/switch": ">=4", - "@spectrum-css/tokens": ">=13", - "@spectrum-css/tray": ">=2.1" - }, - "peerDependenciesMeta": { - "@spectrum-css/checkbox": { - "optional": true - }, - "@spectrum-css/divider": { - "optional": true - }, - "@spectrum-css/switch": { - "optional": true - }, - "@spectrum-css/tray": { - "optional": true - } - }, - "keywords": [ - "spectrum", - "css", - "design system", - "adobe" - ], - "publishConfig": { - "access": "public" - } + "name": "@spectrum-css/menu", + "version": "7.0.0", + "description": "The Spectrum CSS menu component", + "license": "Apache-2.0", + "author": "Adobe", + "homepage": "https://opensource.adobe.com/spectrum-css/menu", + "repository": { + "type": "git", + "url": "https://github.com/adobe/spectrum-css.git", + "directory": "components/menu" + }, + "bugs": { + "url": "https://github.com/adobe/spectrum-css/issues" + }, + "main": "dist/index.css", + "files": [ + "dist/*", + "metadata/mods.md", + "stories/template.js" + ], + "peerDependencies": { + "@spectrum-css/checkbox": ">=8", + "@spectrum-css/divider": ">=2", + "@spectrum-css/icon": ">=4", + "@spectrum-css/switch": ">=4", + "@spectrum-css/tokens": ">=14.0.0-next.3", + "@spectrum-css/tray": ">=2.1" + }, + "peerDependenciesMeta": { + "@spectrum-css/checkbox": { + "optional": true + }, + "@spectrum-css/divider": { + "optional": true + }, + "@spectrum-css/switch": { + "optional": true + }, + "@spectrum-css/tray": { + "optional": true + } + }, + "keywords": [ + "adobe", + "css", + "design system", + "spectrum" + ], + "publishConfig": { + "access": "public" + } } diff --git a/components/miller/package.json b/components/miller/package.json index f841a125d37..5988a9b879f 100644 --- a/components/miller/package.json +++ b/components/miller/package.json @@ -1,39 +1,37 @@ { - "name": "@spectrum-css/miller", - "version": "6.0.0", - "description": "The Spectrum CSS miller component", - "license": "Apache-2.0", - "author": "Adobe", - "homepage": "https://opensource.adobe.com/spectrum-css/miller", - "repository": { - "type": "git", - "url": "https://github.com/adobe/spectrum-css.git", - "directory": "components/miller" - }, - "bugs": { - "url": "https://github.com/adobe/spectrum-css/issues" - }, - "main": "dist/index.css", - "files": [ - "dist/*", - "CHANGELOG.md", - "package.json", - "stories/template.js", - "metadata/mods.md" - ], - "peerDependencies": { - "@spectrum-css/assetlist": ">=5", - "@spectrum-css/checkbox": ">=8", - "@spectrum-css/icon": ">=4", - "@spectrum-css/tokens": ">=13" - }, - "keywords": [ - "spectrum", - "css", - "design system", - "adobe" - ], - "publishConfig": { - "access": "public" - } + "name": "@spectrum-css/miller", + "version": "6.0.0", + "description": "The Spectrum CSS miller component", + "license": "Apache-2.0", + "author": "Adobe", + "homepage": "https://opensource.adobe.com/spectrum-css/miller", + "repository": { + "type": "git", + "url": "https://github.com/adobe/spectrum-css.git", + "directory": "components/miller" + }, + "bugs": { + "url": "https://github.com/adobe/spectrum-css/issues" + }, + "main": "dist/index.css", + "files": [ + "dist/*", + "metadata/mods.md", + "stories/template.js" + ], + "peerDependencies": { + "@spectrum-css/assetlist": ">=5", + "@spectrum-css/checkbox": ">=8", + "@spectrum-css/icon": ">=4", + "@spectrum-css/tokens": ">=14.0.0-next.3" + }, + "keywords": [ + "adobe", + "css", + "design system", + "spectrum" + ], + "publishConfig": { + "access": "public" + } } diff --git a/components/modal/index.css b/components/modal/index.css index ada06633931..8f272e8da6f 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 06f993714f8..5761ec65d82 100644 --- a/components/modal/package.json +++ b/components/modal/package.json @@ -1,39 +1,37 @@ { - "name": "@spectrum-css/modal", - "version": "5.0.0", - "description": "The Spectrum CSS modal component", - "license": "Apache-2.0", - "author": "Adobe", - "homepage": "https://opensource.adobe.com/spectrum-css/modal", - "repository": { - "type": "git", - "url": "https://github.com/adobe/spectrum-css.git", - "directory": "components/modal" - }, - "bugs": { - "url": "https://github.com/adobe/spectrum-css/issues" - }, - "main": "dist/index.css", - "files": [ - "dist/*", - "CHANGELOG.md", - "package.json", - "stories/template.js", - "metadata/mods.md" - ], - "peerDependencies": { - "@spectrum-css/tokens": ">=13" - }, - "devDependencies": { - "@spectrum-css/commons": "^10.0.0" - }, - "keywords": [ - "spectrum", - "css", - "design system", - "adobe" - ], - "publishConfig": { - "access": "public" - } + "name": "@spectrum-css/modal", + "version": "5.0.0", + "description": "The Spectrum CSS modal component", + "license": "Apache-2.0", + "author": "Adobe", + "homepage": "https://opensource.adobe.com/spectrum-css/modal", + "repository": { + "type": "git", + "url": "https://github.com/adobe/spectrum-css.git", + "directory": "components/modal" + }, + "bugs": { + "url": "https://github.com/adobe/spectrum-css/issues" + }, + "main": "dist/index.css", + "files": [ + "dist/*", + "metadata/mods.md", + "stories/template.js" + ], + "peerDependencies": { + "@spectrum-css/tokens": ">=14.0.0-next.3" + }, + "devDependencies": { + "@spectrum-css/commons": "^10.0.0" + }, + "keywords": [ + "adobe", + "css", + "design system", + "spectrum" + ], + "publishConfig": { + "access": "public" + } } diff --git a/components/opacitycheckerboard/index.css b/components/opacitycheckerboard/index.css index 5d9e7c78b04..379a4534e6f 100644 --- a/components/opacitycheckerboard/index.css +++ b/components/opacitycheckerboard/index.css @@ -15,11 +15,17 @@ permissions and limitations under the License. */ --spectrum-opacity-checkerboard-square-light ); --spectrum-opacity-checkerboard-size: var( - --spectrum-opacity-checkerboard-square-size + --spectrum-opacity-checkerboard-square-size-medium ); --spectrum-opacity-checkerboard-position: left top; } +.spectrum-OpacityCheckerboard--sizeS { + --spectrum-opacity-checkerboard-size: var( + --spectrum-opacity-checkerboard-square-size-small + ); +} + .spectrum-OpacityCheckerboard { background: repeating-conic-gradient( var( diff --git a/components/opacitycheckerboard/package.json b/components/opacitycheckerboard/package.json index bc0174de334..4ce88b029c7 100644 --- a/components/opacitycheckerboard/package.json +++ b/components/opacitycheckerboard/package.json @@ -1,36 +1,34 @@ { - "name": "@spectrum-css/opacitycheckerboard", - "version": "2.0.0", - "description": "The Spectrum CSS opacitycheckerboard component", - "license": "Apache-2.0", - "author": "Adobe", - "homepage": "https://opensource.adobe.com/spectrum-css/", - "repository": { - "type": "git", - "url": "https://github.com/adobe/spectrum-css.git", - "directory": "components/opacitycheckerboard" - }, - "bugs": { - "url": "https://github.com/adobe/spectrum-css/issues" - }, - "main": "dist/index.css", - "files": [ - "dist/*", - "CHANGELOG.md", - "package.json", - "stories/template.js", - "metadata/mods.md" - ], - "peerDependencies": { - "@spectrum-css/tokens": ">=13" - }, - "keywords": [ - "spectrum", - "css", - "design system", - "adobe" - ], - "publishConfig": { - "access": "public" - } + "name": "@spectrum-css/opacitycheckerboard", + "version": "2.0.0", + "description": "The Spectrum CSS opacitycheckerboard component", + "license": "Apache-2.0", + "author": "Adobe", + "homepage": "https://opensource.adobe.com/spectrum-css/", + "repository": { + "type": "git", + "url": "https://github.com/adobe/spectrum-css.git", + "directory": "components/opacitycheckerboard" + }, + "bugs": { + "url": "https://github.com/adobe/spectrum-css/issues" + }, + "main": "dist/index.css", + "files": [ + "dist/*", + "metadata/mods.md", + "stories/template.js" + ], + "peerDependencies": { + "@spectrum-css/tokens": ">=14.0.0-next.3" + }, + "keywords": [ + "adobe", + "css", + "design system", + "spectrum" + ], + "publishConfig": { + "access": "public" + } } diff --git a/components/opacitycheckerboard/stories/opacitycheckerboard.stories.js b/components/opacitycheckerboard/stories/opacitycheckerboard.stories.js index d1d6be94cb8..5d25e5d6e29 100644 --- a/components/opacitycheckerboard/stories/opacitycheckerboard.stories.js +++ b/components/opacitycheckerboard/stories/opacitycheckerboard.stories.js @@ -19,6 +19,16 @@ export default { control: "text", description: "Value for <code>--mod-opacity-checkerboard-position</code>. Accepts any valid CSS background-position property value.", }, + size: { + name: "Size", + type: { name: "string", required: true }, + table: { + type: { summary: "string" }, + category: "Component", + }, + options: ["s", "m"], + control: "select", + }, }, args: { rootClass: "spectrum-OpacityCheckerboard", @@ -36,21 +46,41 @@ export default { (Story, context) => html`<div style=${styleMap({ inlineSize: "100px", blockSize: "100px" })}>${Story(context)}</div>` ], }; -export const Default = Template.bind({}); -Default.args = { - customStyles: { - "inline-size": "100%", - "block-size": "100%" - } -}; -export const CheckerboardPosition = Template.bind({}); +const CheckerboardDefault = (args) => html` + ${window.isChromatic() ? html` + ${Template({ + ...args, + customStyles: { + "inline-size": "100%", + "block-size": "100%" + } + })} + <br> + ${Template({ + ...args, + customStyles: { + "inline-size": "100%", + "block-size": "100%" + }, + size: "s", + })} + ` : Template({ + ...args, + customStyles: { + "inline-size": "100%", + "block-size": "100%" + } + })} +`; + + +export const Default = CheckerboardDefault.bind({}); +Default.args = {}; + +export const CheckerboardPosition = CheckerboardDefault.bind({}); CheckerboardPosition.args = { backgroundPosition: "center center", - customStyles: { - "inline-size": "100%", - "block-size": "100%" - } }; CheckerboardPosition.parameters = { docs: { diff --git a/components/opacitycheckerboard/stories/template.js b/components/opacitycheckerboard/stories/template.js index dec44a36707..ce551ec5ee6 100644 --- a/components/opacitycheckerboard/stories/template.js +++ b/components/opacitycheckerboard/stories/template.js @@ -12,12 +12,14 @@ export const Template = ({ customStyles = {}, id, content = [], + size, role, }) => { return html` <div class=${classMap({ [rootClass]: true, + [`${rootClass}--size${size?.toUpperCase()}`]: typeof size !== "undefined", ...customClasses.reduce((a, c) => ({ ...a, [c]: true }), {}), })} style=${ifDefined(styleMap({ 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 2f6b42e8434..7f96f56fdd9 100644 --- a/components/page/package.json +++ b/components/page/package.json @@ -1,36 +1,34 @@ { - "name": "@spectrum-css/page", - "version": "8.0.0", - "description": "The Spectrum CSS page component", - "license": "Apache-2.0", - "author": "Adobe", - "homepage": "https://opensource.adobe.com/spectrum-css/page", - "repository": { - "type": "git", - "url": "https://github.com/adobe/spectrum-css.git", - "directory": "components/page" - }, - "bugs": { - "url": "https://github.com/adobe/spectrum-css/issues" - }, - "main": "dist/index.css", - "files": [ - "dist/*", - "CHANGELOG.md", - "package.json", - "stories/template.js", - "metadata/mods.md" - ], - "peerDependencies": { - "@spectrum-css/tokens": ">=13" - }, - "keywords": [ - "spectrum", - "css", - "design system", - "adobe" - ], - "publishConfig": { - "access": "public" - } + "name": "@spectrum-css/page", + "version": "8.0.0", + "description": "The Spectrum CSS page component", + "license": "Apache-2.0", + "author": "Adobe", + "homepage": "https://opensource.adobe.com/spectrum-css/page", + "repository": { + "type": "git", + "url": "https://github.com/adobe/spectrum-css.git", + "directory": "components/page" + }, + "bugs": { + "url": "https://github.com/adobe/spectrum-css/issues" + }, + "main": "dist/index.css", + "files": [ + "dist/*", + "metadata/mods.md", + "stories/template.js" + ], + "peerDependencies": { + "@spectrum-css/tokens": ">=14.0.0-next.3" + }, + "keywords": [ + "adobe", + "css", + "design system", + "spectrum" + ], + "publishConfig": { + "access": "public" + } } diff --git a/components/pagination/package.json b/components/pagination/package.json index e06191ba3a5..e56f6db3410 100644 --- a/components/pagination/package.json +++ b/components/pagination/package.json @@ -1,41 +1,39 @@ { - "name": "@spectrum-css/pagination", - "version": "8.0.0", - "description": "The Spectrum CSS Pagination component", - "license": "Apache-2.0", - "author": "Adobe", - "homepage": "https://opensource.adobe.com/spectrum-css/pagination", - "repository": { - "type": "git", - "url": "https://github.com/adobe/spectrum-css.git", - "directory": "components/pagination" - }, - "bugs": { - "url": "https://github.com/adobe/spectrum-css/issues" - }, - "main": "dist/index.css", - "files": [ - "dist/*", - "CHANGELOG.md", - "package.json", - "stories/template.js", - "metadata/mods.md" - ], - "peerDependencies": { - "@spectrum-css/actionbutton": ">=5", - "@spectrum-css/button": ">=11", - "@spectrum-css/icon": ">=4", - "@spectrum-css/splitbutton": ">=7", - "@spectrum-css/textfield": ">=6", - "@spectrum-css/tokens": ">=13" - }, - "keywords": [ - "spectrum", - "css", - "design system", - "adobe" - ], - "publishConfig": { - "access": "public" - } + "name": "@spectrum-css/pagination", + "version": "8.0.0", + "description": "The Spectrum CSS Pagination component", + "license": "Apache-2.0", + "author": "Adobe", + "homepage": "https://opensource.adobe.com/spectrum-css/pagination", + "repository": { + "type": "git", + "url": "https://github.com/adobe/spectrum-css.git", + "directory": "components/pagination" + }, + "bugs": { + "url": "https://github.com/adobe/spectrum-css/issues" + }, + "main": "dist/index.css", + "files": [ + "dist/*", + "metadata/mods.md", + "stories/template.js" + ], + "peerDependencies": { + "@spectrum-css/actionbutton": ">=5", + "@spectrum-css/button": ">=11", + "@spectrum-css/icon": ">=4", + "@spectrum-css/splitbutton": ">=7", + "@spectrum-css/textfield": ">=6", + "@spectrum-css/tokens": ">=14.0.0-next.3" + }, + "keywords": [ + "adobe", + "css", + "design system", + "spectrum" + ], + "publishConfig": { + "access": "public" + } } diff --git a/components/picker/metadata/picker.yml b/components/picker/metadata/picker.yml index 5339feeca39..7226b36801a 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 + ### 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 7e18a732eaf..62863878a12 100644 --- a/components/picker/package.json +++ b/components/picker/package.json @@ -1,52 +1,50 @@ { - "name": "@spectrum-css/picker", - "version": "8.0.0", - "description": "The Spectrum CSS picker component", - "license": "Apache-2.0", - "author": "Adobe", - "homepage": "https://opensource.adobe.com/spectrum-css/picker", - "repository": { - "type": "git", - "url": "https://github.com/adobe/spectrum-css.git", - "directory": "components/picker" - }, - "bugs": { - "url": "https://github.com/adobe/spectrum-css/issues" - }, - "main": "dist/index.css", - "files": [ - "dist/*", - "CHANGELOG.md", - "package.json", - "stories/template.js", - "metadata/mods.md" - ], - "peerDependencies": { - "@spectrum-css/helptext": ">=4", - "@spectrum-css/icon": ">=4", - "@spectrum-css/menu": ">=5", - "@spectrum-css/popover": ">=6", - "@spectrum-css/progresscircle": ">=2", - "@spectrum-css/tokens": ">=13" - }, - "peerDependenciesMeta": { - "@spectrum-css/helptext": { - "optional": true - }, - "@spectrum-css/progresscircle": { - "optional": true - } - }, - "devDependencies": { - "@spectrum-css/commons": "^10.0.0" - }, - "keywords": [ - "spectrum", - "css", - "design system", - "adobe" - ], - "publishConfig": { - "access": "public" - } + "name": "@spectrum-css/picker", + "version": "8.0.0", + "description": "The Spectrum CSS picker component", + "license": "Apache-2.0", + "author": "Adobe", + "homepage": "https://opensource.adobe.com/spectrum-css/picker", + "repository": { + "type": "git", + "url": "https://github.com/adobe/spectrum-css.git", + "directory": "components/picker" + }, + "bugs": { + "url": "https://github.com/adobe/spectrum-css/issues" + }, + "main": "dist/index.css", + "files": [ + "dist/*", + "metadata/mods.md", + "stories/template.js" + ], + "peerDependencies": { + "@spectrum-css/helptext": ">=4", + "@spectrum-css/icon": ">=4", + "@spectrum-css/menu": ">=5", + "@spectrum-css/popover": ">=6", + "@spectrum-css/progresscircle": ">=2", + "@spectrum-css/tokens": ">=14.0.0-next.3" + }, + "peerDependenciesMeta": { + "@spectrum-css/helptext": { + "optional": true + }, + "@spectrum-css/progresscircle": { + "optional": true + } + }, + "devDependencies": { + "@spectrum-css/commons": "^10.0.0" + }, + "keywords": [ + "adobe", + "css", + "design system", + "spectrum" + ], + "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 117e0533e84..f5fce885a3e 100644 --- a/components/pickerbutton/package.json +++ b/components/pickerbutton/package.json @@ -1,39 +1,37 @@ { - "name": "@spectrum-css/pickerbutton", - "version": "5.0.0", - "description": "The Spectrum CSS picker button component", - "license": "Apache-2.0", - "author": "Adobe", - "homepage": "https://opensource.adobe.com/spectrum-css/pickerbutton", - "repository": { - "type": "git", - "url": "https://github.com/adobe/spectrum-css.git", - "directory": "components/pickerbutton" - }, - "bugs": { - "url": "https://github.com/adobe/spectrum-css/issues" - }, - "main": "dist/index.css", - "files": [ - "dist/*", - "CHANGELOG.md", - "package.json", - "stories/template.js", - "metadata/mods.md" - ], - "peerDependencies": { - "@spectrum-css/icon": ">=4", - "@spectrum-css/menu": ">=5", - "@spectrum-css/popover": ">=5 <=6", - "@spectrum-css/tokens": ">=13" - }, - "keywords": [ - "spectrum", - "css", - "design system", - "adobe" - ], - "publishConfig": { - "access": "public" - } + "name": "@spectrum-css/pickerbutton", + "version": "5.0.0", + "description": "The Spectrum CSS picker button component", + "license": "Apache-2.0", + "author": "Adobe", + "homepage": "https://opensource.adobe.com/spectrum-css/pickerbutton", + "repository": { + "type": "git", + "url": "https://github.com/adobe/spectrum-css.git", + "directory": "components/pickerbutton" + }, + "bugs": { + "url": "https://github.com/adobe/spectrum-css/issues" + }, + "main": "dist/index.css", + "files": [ + "dist/*", + "metadata/mods.md", + "stories/template.js" + ], + "peerDependencies": { + "@spectrum-css/icon": ">=4", + "@spectrum-css/menu": ">=5", + "@spectrum-css/popover": ">=5 <=6", + "@spectrum-css/tokens": ">=14.0.0-next.3" + }, + "keywords": [ + "adobe", + "css", + "design system", + "spectrum" + ], + "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 74c7b1dffe1..9b6260ac52e 100644 --- a/components/popover/package.json +++ b/components/popover/package.json @@ -1,51 +1,49 @@ { - "name": "@spectrum-css/popover", - "version": "7.0.0", - "description": "The Spectrum CSS popover component", - "license": "Apache-2.0", - "author": "Adobe", - "homepage": "https://opensource.adobe.com/spectrum-css/popover", - "repository": { - "type": "git", - "url": "https://github.com/adobe/spectrum-css.git", - "directory": "components/popover" - }, - "bugs": { - "url": "https://github.com/adobe/spectrum-css/issues" - }, - "main": "dist/index.css", - "files": [ - "dist/*", - "CHANGELOG.md", - "package.json", - "stories/template.js", - "metadata/mods.md" - ], - "peerDependencies": { - "@spectrum-css/alertdialog": ">=1", - "@spectrum-css/dialog": ">=9", - "@spectrum-css/divider": ">=2", - "@spectrum-css/menu": ">=5", - "@spectrum-css/tokens": ">=13" - }, - "peerDependenciesMeta": { - "@spectrum-css/divider": { - "optional": true - }, - "@spectrum-css/menu": { - "optional": true - } - }, - "devDependencies": { - "@spectrum-css/commons": "^10.0.0" - }, - "keywords": [ - "spectrum", - "css", - "design system", - "adobe" - ], - "publishConfig": { - "access": "public" - } + "name": "@spectrum-css/popover", + "version": "7.0.0", + "description": "The Spectrum CSS popover component", + "license": "Apache-2.0", + "author": "Adobe", + "homepage": "https://opensource.adobe.com/spectrum-css/popover", + "repository": { + "type": "git", + "url": "https://github.com/adobe/spectrum-css.git", + "directory": "components/popover" + }, + "bugs": { + "url": "https://github.com/adobe/spectrum-css/issues" + }, + "main": "dist/index.css", + "files": [ + "dist/*", + "metadata/mods.md", + "stories/template.js" + ], + "peerDependencies": { + "@spectrum-css/alertdialog": ">=1", + "@spectrum-css/dialog": ">=9", + "@spectrum-css/divider": ">=2", + "@spectrum-css/menu": ">=5", + "@spectrum-css/tokens": ">=14.0.0-next.3" + }, + "peerDependenciesMeta": { + "@spectrum-css/divider": { + "optional": true + }, + "@spectrum-css/menu": { + "optional": true + } + }, + "devDependencies": { + "@spectrum-css/commons": "^10.0.0" + }, + "keywords": [ + "adobe", + "css", + "design system", + "spectrum" + ], + "publishConfig": { + "access": "public" + } } diff --git a/components/progressbar/index.css b/components/progressbar/index.css index 252f0d7e576..7c0fc4880ef 100644 --- a/components/progressbar/index.css +++ b/components/progressbar/index.css @@ -44,7 +44,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 a5da8ef0d03..093397ab515 100644 --- a/components/progressbar/package.json +++ b/components/progressbar/package.json @@ -1,42 +1,40 @@ { - "name": "@spectrum-css/progressbar", - "version": "4.0.0", - "description": "The Spectrum CSS progress bar component", - "license": "Apache-2.0", - "author": "Adobe", - "homepage": "https://opensource.adobe.com/spectrum-css/progressbar", - "repository": { - "type": "git", - "url": "https://github.com/adobe/spectrum-css.git", - "directory": "components/progressbar" - }, - "bugs": { - "url": "https://github.com/adobe/spectrum-css/issues" - }, - "main": "dist/index.css", - "files": [ - "dist/*", - "CHANGELOG.md", - "package.json", - "stories/template.js", - "metadata/mods.md" - ], - "peerDependencies": { - "@spectrum-css/fieldlabel": ">=7", - "@spectrum-css/tokens": ">=13" - }, - "peerDependenciesMeta": { - "@spectrum-css/fieldlabel": { - "optional": true - } - }, - "keywords": [ - "spectrum", - "css", - "design system", - "adobe" - ], - "publishConfig": { - "access": "public" - } + "name": "@spectrum-css/progressbar", + "version": "4.0.0", + "description": "The Spectrum CSS progress bar component", + "license": "Apache-2.0", + "author": "Adobe", + "homepage": "https://opensource.adobe.com/spectrum-css/progressbar", + "repository": { + "type": "git", + "url": "https://github.com/adobe/spectrum-css.git", + "directory": "components/progressbar" + }, + "bugs": { + "url": "https://github.com/adobe/spectrum-css/issues" + }, + "main": "dist/index.css", + "files": [ + "dist/*", + "metadata/mods.md", + "stories/template.js" + ], + "peerDependencies": { + "@spectrum-css/fieldlabel": ">=7", + "@spectrum-css/tokens": ">=14.0.0-next.3" + }, + "peerDependenciesMeta": { + "@spectrum-css/fieldlabel": { + "optional": true + } + }, + "keywords": [ + "adobe", + "css", + "design system", + "spectrum" + ], + "publishConfig": { + "access": "public" + } } diff --git a/components/progresscircle/index.css b/components/progresscircle/index.css index 5184180a382..673e59f2878 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 d18b9ccdce2..4d794c8bc2e 100644 --- a/components/progresscircle/package.json +++ b/components/progresscircle/package.json @@ -1,36 +1,34 @@ { - "name": "@spectrum-css/progresscircle", - "version": "3.0.0", - "description": "The Spectrum CSS progress circle component", - "license": "Apache-2.0", - "author": "Adobe", - "homepage": "https://opensource.adobe.com/spectrum-css/progresscircle", - "repository": { - "type": "git", - "url": "https://github.com/adobe/spectrum-css.git", - "directory": "components/progresscircle" - }, - "bugs": { - "url": "https://github.com/adobe/spectrum-css/issues" - }, - "main": "dist/index.css", - "files": [ - "dist/*", - "CHANGELOG.md", - "package.json", - "stories/template.js", - "metadata/mods.md" - ], - "peerDependencies": { - "@spectrum-css/tokens": ">=13" - }, - "keywords": [ - "spectrum", - "css", - "design system", - "adobe" - ], - "publishConfig": { - "access": "public" - } + "name": "@spectrum-css/progresscircle", + "version": "3.0.0", + "description": "The Spectrum CSS progress circle component", + "license": "Apache-2.0", + "author": "Adobe", + "homepage": "https://opensource.adobe.com/spectrum-css/progresscircle", + "repository": { + "type": "git", + "url": "https://github.com/adobe/spectrum-css.git", + "directory": "components/progresscircle" + }, + "bugs": { + "url": "https://github.com/adobe/spectrum-css/issues" + }, + "main": "dist/index.css", + "files": [ + "dist/*", + "metadata/mods.md", + "stories/template.js" + ], + "peerDependencies": { + "@spectrum-css/tokens": ">=14.0.0-next.3" + }, + "keywords": [ + "adobe", + "css", + "design system", + "spectrum" + ], + "publishConfig": { + "access": "public" + } } diff --git a/components/radio/index.css b/components/radio/index.css index 3256d3091f5..00a6f528a6a 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 337f832d000..cba6785793a 100644 --- a/components/radio/package.json +++ b/components/radio/package.json @@ -1,37 +1,35 @@ { - "name": "@spectrum-css/radio", - "version": "9.0.0", - "description": "The Spectrum CSS radio component", - "license": "Apache-2.0", - "author": "Adobe", - "homepage": "https://opensource.adobe.com/spectrum-css/radio", - "repository": { - "type": "git", - "url": "https://github.com/adobe/spectrum-css.git", - "directory": "components/radio" - }, - "bugs": { - "url": "https://github.com/adobe/spectrum-css/issues" - }, - "main": "dist/index.css", - "files": [ - "dist/*", - "CHANGELOG.md", - "package.json", - "stories/template.js", - "metadata/mods.md" - ], - "peerDependencies": { - "@spectrum-css/icon": ">=4", - "@spectrum-css/tokens": ">=13" - }, - "keywords": [ - "spectrum", - "css", - "design system", - "adobe" - ], - "publishConfig": { - "access": "public" - } + "name": "@spectrum-css/radio", + "version": "9.0.0", + "description": "The Spectrum CSS radio component", + "license": "Apache-2.0", + "author": "Adobe", + "homepage": "https://opensource.adobe.com/spectrum-css/radio", + "repository": { + "type": "git", + "url": "https://github.com/adobe/spectrum-css.git", + "directory": "components/radio" + }, + "bugs": { + "url": "https://github.com/adobe/spectrum-css/issues" + }, + "main": "dist/index.css", + "files": [ + "dist/*", + "metadata/mods.md", + "stories/template.js" + ], + "peerDependencies": { + "@spectrum-css/icon": ">=4", + "@spectrum-css/tokens": ">=14.0.0-next.3" + }, + "keywords": [ + "adobe", + "css", + "design system", + "spectrum" + ], + "publishConfig": { + "access": "public" + } } diff --git a/components/rating/package.json b/components/rating/package.json index d6cdf7916ea..eeac47f8f78 100644 --- a/components/rating/package.json +++ b/components/rating/package.json @@ -1,37 +1,35 @@ { - "name": "@spectrum-css/rating", - "version": "5.0.0", - "description": "The Spectrum CSS rating component", - "license": "Apache-2.0", - "author": "Adobe", - "homepage": "https://opensource.adobe.com/spectrum-css/rating", - "repository": { - "type": "git", - "url": "https://github.com/adobe/spectrum-css.git", - "directory": "components/rating" - }, - "bugs": { - "url": "https://github.com/adobe/spectrum-css/issues" - }, - "main": "dist/index.css", - "files": [ - "dist/*", - "CHANGELOG.md", - "package.json", - "stories/template.js", - "metadata/mods.md" - ], - "peerDependencies": { - "@spectrum-css/icon": ">=4", - "@spectrum-css/tokens": ">=13" - }, - "keywords": [ - "spectrum", - "css", - "design system", - "adobe" - ], - "publishConfig": { - "access": "public" - } + "name": "@spectrum-css/rating", + "version": "5.0.0", + "description": "The Spectrum CSS rating component", + "license": "Apache-2.0", + "author": "Adobe", + "homepage": "https://opensource.adobe.com/spectrum-css/rating", + "repository": { + "type": "git", + "url": "https://github.com/adobe/spectrum-css.git", + "directory": "components/rating" + }, + "bugs": { + "url": "https://github.com/adobe/spectrum-css/issues" + }, + "main": "dist/index.css", + "files": [ + "dist/*", + "metadata/mods.md", + "stories/template.js" + ], + "peerDependencies": { + "@spectrum-css/icon": ">=4", + "@spectrum-css/tokens": ">=14.0.0-next.3" + }, + "keywords": [ + "adobe", + "css", + "design system", + "spectrum" + ], + "publishConfig": { + "access": "public" + } } diff --git a/components/search/index.css b/components/search/index.css index dbe83a533f1..d3e24a33492 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 f541647108f..152026f941e 100644 --- a/components/search/package.json +++ b/components/search/package.json @@ -1,39 +1,37 @@ { - "name": "@spectrum-css/search", - "version": "7.0.0", - "description": "The Spectrum CSS search component", - "license": "Apache-2.0", - "author": "Adobe", - "homepage": "https://opensource.adobe.com/spectrum-css/search", - "repository": { - "type": "git", - "url": "https://github.com/adobe/spectrum-css.git", - "directory": "components/search" - }, - "bugs": { - "url": "https://github.com/adobe/spectrum-css/issues" - }, - "main": "dist/index.css", - "files": [ - "dist/*", - "CHANGELOG.md", - "package.json", - "stories/template.js", - "metadata/mods.md" - ], - "peerDependencies": { - "@spectrum-css/clearbutton": ">=5", - "@spectrum-css/icon": ">=4", - "@spectrum-css/textfield": ">=6", - "@spectrum-css/tokens": ">=13" - }, - "keywords": [ - "spectrum", - "css", - "design system", - "adobe" - ], - "publishConfig": { - "access": "public" - } + "name": "@spectrum-css/search", + "version": "7.0.0", + "description": "The Spectrum CSS search component", + "license": "Apache-2.0", + "author": "Adobe", + "homepage": "https://opensource.adobe.com/spectrum-css/search", + "repository": { + "type": "git", + "url": "https://github.com/adobe/spectrum-css.git", + "directory": "components/search" + }, + "bugs": { + "url": "https://github.com/adobe/spectrum-css/issues" + }, + "main": "dist/index.css", + "files": [ + "dist/*", + "metadata/mods.md", + "stories/template.js" + ], + "peerDependencies": { + "@spectrum-css/clearbutton": ">=5", + "@spectrum-css/icon": ">=4", + "@spectrum-css/textfield": ">=6", + "@spectrum-css/tokens": ">=14.0.0-next.3" + }, + "keywords": [ + "adobe", + "css", + "design system", + "spectrum" + ], + "publishConfig": { + "access": "public" + } } diff --git a/components/sidenav/index.css b/components/sidenav/index.css index ca558437ef8..714822a9f80 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 6507acf77d2..48217529ee6 100644 --- a/components/sidenav/package.json +++ b/components/sidenav/package.json @@ -1,42 +1,40 @@ { - "name": "@spectrum-css/sidenav", - "version": "5.0.0", - "description": "The Spectrum CSS sidenav component", - "license": "Apache-2.0", - "author": "Adobe", - "homepage": "https://opensource.adobe.com/spectrum-css/sidenav", - "repository": { - "type": "git", - "url": "https://github.com/adobe/spectrum-css.git", - "directory": "components/sidenav" - }, - "bugs": { - "url": "https://github.com/adobe/spectrum-css/issues" - }, - "main": "dist/index.css", - "files": [ - "dist/*", - "CHANGELOG.md", - "package.json", - "stories/template.js", - "metadata/mods.md" - ], - "peerDependencies": { - "@spectrum-css/icon": ">=4", - "@spectrum-css/tokens": ">=13" - }, - "peerDependenciesMeta": { - "@spectrum-css/icon": { - "optional": true - } - }, - "keywords": [ - "spectrum", - "css", - "design system", - "adobe" - ], - "publishConfig": { - "access": "public" - } + "name": "@spectrum-css/sidenav", + "version": "5.0.0", + "description": "The Spectrum CSS sidenav component", + "license": "Apache-2.0", + "author": "Adobe", + "homepage": "https://opensource.adobe.com/spectrum-css/sidenav", + "repository": { + "type": "git", + "url": "https://github.com/adobe/spectrum-css.git", + "directory": "components/sidenav" + }, + "bugs": { + "url": "https://github.com/adobe/spectrum-css/issues" + }, + "main": "dist/index.css", + "files": [ + "dist/*", + "metadata/mods.md", + "stories/template.js" + ], + "peerDependencies": { + "@spectrum-css/icon": ">=4", + "@spectrum-css/tokens": ">=14.0.0-next.3" + }, + "peerDependenciesMeta": { + "@spectrum-css/icon": { + "optional": true + } + }, + "keywords": [ + "adobe", + "css", + "design system", + "spectrum" + ], + "publishConfig": { + "access": "public" + } } diff --git a/components/site/package.json b/components/site/package.json index db1f045628d..29d5e8efe18 100644 --- a/components/site/package.json +++ b/components/site/package.json @@ -1,36 +1,34 @@ { - "name": "@spectrum-css/site", - "version": "5.0.0", - "description": "The Spectrum CSS Site component", - "license": "Apache-2.0", - "author": "Adobe", - "homepage": "https://opensource.adobe.com/spectrum-css/", - "repository": { - "type": "git", - "url": "https://github.com/adobe/spectrum-css.git", - "directory": "components/site" - }, - "bugs": { - "url": "https://github.com/adobe/spectrum-css/issues" - }, - "main": "dist/index.css", - "files": [ - "dist/*", - "CHANGELOG.md", - "package.json", - "stories/template.js", - "metadata/mods.md" - ], - "peerDependencies": { - "@spectrum-css/tokens": ">=13" - }, - "keywords": [ - "spectrum", - "css", - "design system", - "adobe" - ], - "publishConfig": { - "access": "public" - } + "name": "@spectrum-css/site", + "version": "5.0.0", + "description": "The Spectrum CSS Site component", + "license": "Apache-2.0", + "author": "Adobe", + "homepage": "https://opensource.adobe.com/spectrum-css/", + "repository": { + "type": "git", + "url": "https://github.com/adobe/spectrum-css.git", + "directory": "components/site" + }, + "bugs": { + "url": "https://github.com/adobe/spectrum-css/issues" + }, + "main": "dist/index.css", + "files": [ + "dist/*", + "metadata/mods.md", + "stories/template.js" + ], + "peerDependencies": { + "@spectrum-css/tokens": ">=14.0.0-next.3" + }, + "keywords": [ + "adobe", + "css", + "design system", + "spectrum" + ], + "publishConfig": { + "access": "public" + } } diff --git a/components/slider/index.css b/components/slider/index.css index 81fe996c63a..80334273a1e 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 a7dbf14d4ad..8f11546b658 100644 --- a/components/slider/package.json +++ b/components/slider/package.json @@ -1,37 +1,35 @@ { - "name": "@spectrum-css/slider", - "version": "5.0.0", - "description": "The Spectrum CSS slider component", - "license": "Apache-2.0", - "author": "Adobe", - "homepage": "https://opensource.adobe.com/spectrum-css/slider", - "repository": { - "type": "git", - "url": "https://github.com/adobe/spectrum-css.git", - "directory": "components/slider" - }, - "bugs": { - "url": "https://github.com/adobe/spectrum-css/issues" - }, - "main": "dist/index.css", - "files": [ - "dist/*", - "CHANGELOG.md", - "package.json", - "stories/template.js", - "metadata/mods.md" - ], - "peerDependencies": { - "@spectrum-css/stepper": ">=5", - "@spectrum-css/tokens": ">=13" - }, - "keywords": [ - "spectrum", - "css", - "design system", - "adobe" - ], - "publishConfig": { - "access": "public" - } + "name": "@spectrum-css/slider", + "version": "5.0.0", + "description": "The Spectrum CSS slider component", + "license": "Apache-2.0", + "author": "Adobe", + "homepage": "https://opensource.adobe.com/spectrum-css/slider", + "repository": { + "type": "git", + "url": "https://github.com/adobe/spectrum-css.git", + "directory": "components/slider" + }, + "bugs": { + "url": "https://github.com/adobe/spectrum-css/issues" + }, + "main": "dist/index.css", + "files": [ + "dist/*", + "metadata/mods.md", + "stories/template.js" + ], + "peerDependencies": { + "@spectrum-css/stepper": ">=5", + "@spectrum-css/tokens": ">=14.0.0-next.3" + }, + "keywords": [ + "adobe", + "css", + "design system", + "spectrum" + ], + "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 f40bd050a95..8cd2867f2c7 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 bd43fe0b383..ae482a69de9 100644 --- a/components/splitview/package.json +++ b/components/splitview/package.json @@ -1,36 +1,34 @@ { - "name": "@spectrum-css/splitview", - "version": "5.0.0", - "description": "The Spectrum CSS splitview component", - "license": "Apache-2.0", - "author": "Adobe", - "homepage": "https://opensource.adobe.com/spectrum-css/splitview", - "repository": { - "type": "git", - "url": "https://github.com/adobe/spectrum-css.git", - "directory": "components/splitview" - }, - "bugs": { - "url": "https://github.com/adobe/spectrum-css/issues" - }, - "main": "dist/index.css", - "files": [ - "dist/*", - "CHANGELOG.md", - "package.json", - "stories/template.js", - "metadata/mods.md" - ], - "peerDependencies": { - "@spectrum-css/tokens": ">=13" - }, - "keywords": [ - "spectrum", - "css", - "design system", - "adobe" - ], - "publishConfig": { - "access": "public" - } + "name": "@spectrum-css/splitview", + "version": "5.0.0", + "description": "The Spectrum CSS splitview component", + "license": "Apache-2.0", + "author": "Adobe", + "homepage": "https://opensource.adobe.com/spectrum-css/splitview", + "repository": { + "type": "git", + "url": "https://github.com/adobe/spectrum-css.git", + "directory": "components/splitview" + }, + "bugs": { + "url": "https://github.com/adobe/spectrum-css/issues" + }, + "main": "dist/index.css", + "files": [ + "dist/*", + "metadata/mods.md", + "stories/template.js" + ], + "peerDependencies": { + "@spectrum-css/tokens": ">=14.0.0-next.3" + }, + "keywords": [ + "adobe", + "css", + "design system", + "spectrum" + ], + "publishConfig": { + "access": "public" + } } diff --git a/components/statuslight/package.json b/components/statuslight/package.json index 338f1d9eb4e..3266d415668 100644 --- a/components/statuslight/package.json +++ b/components/statuslight/package.json @@ -1,36 +1,34 @@ { - "name": "@spectrum-css/statuslight", - "version": "7.0.0", - "description": "The Spectrum CSS statuslight component", - "license": "Apache-2.0", - "author": "Adobe", - "homepage": "https://opensource.adobe.com/spectrum-css/statuslight", - "repository": { - "type": "git", - "url": "https://github.com/adobe/spectrum-css.git", - "directory": "components/statuslight" - }, - "bugs": { - "url": "https://github.com/adobe/spectrum-css/issues" - }, - "main": "dist/index.css", - "files": [ - "dist/*", - "CHANGELOG.md", - "package.json", - "stories/template.js", - "metadata/mods.md" - ], - "peerDependencies": { - "@spectrum-css/tokens": ">=13" - }, - "keywords": [ - "spectrum", - "css", - "design system", - "adobe" - ], - "publishConfig": { - "access": "public" - } + "name": "@spectrum-css/statuslight", + "version": "7.0.0", + "description": "The Spectrum CSS statuslight component", + "license": "Apache-2.0", + "author": "Adobe", + "homepage": "https://opensource.adobe.com/spectrum-css/statuslight", + "repository": { + "type": "git", + "url": "https://github.com/adobe/spectrum-css.git", + "directory": "components/statuslight" + }, + "bugs": { + "url": "https://github.com/adobe/spectrum-css/issues" + }, + "main": "dist/index.css", + "files": [ + "dist/*", + "metadata/mods.md", + "stories/template.js" + ], + "peerDependencies": { + "@spectrum-css/tokens": ">=14.0.0-next.3" + }, + "keywords": [ + "adobe", + "css", + "design system", + "spectrum" + ], + "publishConfig": { + "access": "public" + } } diff --git a/components/steplist/index.css b/components/steplist/index.css index 7b4d11919e0..f9feb9df164 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 ad6ee5a04da..b9575549c53 100644 --- a/components/steplist/package.json +++ b/components/steplist/package.json @@ -1,43 +1,41 @@ { - "name": "@spectrum-css/steplist", - "version": "5.0.0", - "description": "The Spectrum CSS steplist component", - "license": "Apache-2.0", - "author": "Adobe", - "homepage": "https://opensource.adobe.com/spectrum-css/steplist", - "repository": { - "type": "git", - "url": "https://github.com/adobe/spectrum-css.git", - "directory": "components/steplist" - }, - "bugs": { - "url": "https://github.com/adobe/spectrum-css/issues" - }, - "main": "dist/index.css", - "files": [ - "dist/*", - "CHANGELOG.md", - "package.json", - "stories/template.js", - "metadata/mods.md" - ], - "peerDependencies": { - "@spectrum-css/icon": ">=4", - "@spectrum-css/tokens": ">=13", - "@spectrum-css/tooltip": ">=5" - }, - "peerDependenciesMeta": { - "@spectrum-css/tooltip": { - "optional": true - } - }, - "keywords": [ - "spectrum", - "css", - "design system", - "adobe" - ], - "publishConfig": { - "access": "public" - } + "name": "@spectrum-css/steplist", + "version": "5.0.0", + "description": "The Spectrum CSS steplist component", + "license": "Apache-2.0", + "author": "Adobe", + "homepage": "https://opensource.adobe.com/spectrum-css/steplist", + "repository": { + "type": "git", + "url": "https://github.com/adobe/spectrum-css.git", + "directory": "components/steplist" + }, + "bugs": { + "url": "https://github.com/adobe/spectrum-css/issues" + }, + "main": "dist/index.css", + "files": [ + "dist/*", + "metadata/mods.md", + "stories/template.js" + ], + "peerDependencies": { + "@spectrum-css/icon": ">=4", + "@spectrum-css/tokens": ">=14.0.0-next.3", + "@spectrum-css/tooltip": ">=5" + }, + "peerDependenciesMeta": { + "@spectrum-css/tooltip": { + "optional": true + } + }, + "keywords": [ + "adobe", + "css", + "design system", + "spectrum" + ], + "publishConfig": { + "access": "public" + } } diff --git a/components/stepper/package.json b/components/stepper/package.json index 00c5637b153..a3109ac7068 100644 --- a/components/stepper/package.json +++ b/components/stepper/package.json @@ -1,45 +1,43 @@ { - "name": "@spectrum-css/stepper", - "version": "6.0.0", - "description": "The Spectrum CSS stepper component", - "license": "Apache-2.0", - "author": "Adobe", - "homepage": "https://opensource.adobe.com/spectrum-css/stepper", - "repository": { - "type": "git", - "url": "https://github.com/adobe/spectrum-css.git", - "directory": "components/stepper" - }, - "bugs": { - "url": "https://github.com/adobe/spectrum-css/issues" - }, - "main": "dist/index.css", - "files": [ - "dist/*", - "CHANGELOG.md", - "package.json", - "stories/template.js", - "metadata/mods.md" - ], - "peerDependencies": { - "@spectrum-css/actionbutton": ">=5", - "@spectrum-css/icon": ">=4", - "@spectrum-css/infieldbutton": ">=4", - "@spectrum-css/textfield": ">=6", - "@spectrum-css/tokens": ">=13" - }, - "peerDependenciesMeta": { - "@spectrum-css/infieldbutton": { - "optional": true - } - }, - "keywords": [ - "spectrum", - "css", - "design system", - "adobe" - ], - "publishConfig": { - "access": "public" - } + "name": "@spectrum-css/stepper", + "version": "6.0.0", + "description": "The Spectrum CSS stepper component", + "license": "Apache-2.0", + "author": "Adobe", + "homepage": "https://opensource.adobe.com/spectrum-css/stepper", + "repository": { + "type": "git", + "url": "https://github.com/adobe/spectrum-css.git", + "directory": "components/stepper" + }, + "bugs": { + "url": "https://github.com/adobe/spectrum-css/issues" + }, + "main": "dist/index.css", + "files": [ + "dist/*", + "metadata/mods.md", + "stories/template.js" + ], + "peerDependencies": { + "@spectrum-css/actionbutton": ">=5", + "@spectrum-css/icon": ">=4", + "@spectrum-css/infieldbutton": ">=4", + "@spectrum-css/textfield": ">=6", + "@spectrum-css/tokens": ">=14.0.0-next.3" + }, + "peerDependenciesMeta": { + "@spectrum-css/infieldbutton": { + "optional": true + } + }, + "keywords": [ + "adobe", + "css", + "design system", + "spectrum" + ], + "publishConfig": { + "access": "public" + } } 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 0fbf80340c0..f9392006494 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 5177d5dcdbd..993aa5453cc 100644 --- a/components/swatch/package.json +++ b/components/swatch/package.json @@ -1,37 +1,35 @@ { - "name": "@spectrum-css/swatch", - "version": "6.0.0", - "description": "The Spectrum CSS Color swatch component", - "license": "Apache-2.0", - "author": "Adobe", - "homepage": "https://opensource.adobe.com/spectrum-css/swatch", - "repository": { - "type": "git", - "url": "https://github.com/adobe/spectrum-css.git", - "directory": "components/swatch" - }, - "bugs": { - "url": "https://github.com/adobe/spectrum-css/issues" - }, - "main": "dist/index.css", - "files": [ - "dist/*", - "CHANGELOG.md", - "package.json", - "stories/template.js", - "metadata/mods.md" - ], - "peerDependencies": { - "@spectrum-css/opacitycheckerboard": ">=1", - "@spectrum-css/tokens": ">=13" - }, - "keywords": [ - "spectrum", - "css", - "design system", - "adobe" - ], - "publishConfig": { - "access": "public" - } + "name": "@spectrum-css/swatch", + "version": "6.0.0", + "description": "The Spectrum CSS Color swatch component", + "license": "Apache-2.0", + "author": "Adobe", + "homepage": "https://opensource.adobe.com/spectrum-css/swatch", + "repository": { + "type": "git", + "url": "https://github.com/adobe/spectrum-css.git", + "directory": "components/swatch" + }, + "bugs": { + "url": "https://github.com/adobe/spectrum-css/issues" + }, + "main": "dist/index.css", + "files": [ + "dist/*", + "metadata/mods.md", + "stories/template.js" + ], + "peerDependencies": { + "@spectrum-css/opacitycheckerboard": ">=1", + "@spectrum-css/tokens": ">=14.0.0-next.3" + }, + "keywords": [ + "adobe", + "css", + "design system", + "spectrum" + ], + "publishConfig": { + "access": "public" + } } diff --git a/components/swatchgroup/package.json b/components/swatchgroup/package.json index 5eca84dd470..743891f0ac8 100644 --- a/components/swatchgroup/package.json +++ b/components/swatchgroup/package.json @@ -1,37 +1,35 @@ { - "name": "@spectrum-css/swatchgroup", - "version": "3.0.0", - "description": "The Spectrum CSS Color swatch group component", - "license": "Apache-2.0", - "author": "Adobe", - "homepage": "https://opensource.adobe.com/spectrum-css/swatchgroup", - "repository": { - "type": "git", - "url": "https://github.com/adobe/spectrum-css.git", - "directory": "components/swatchgroup" - }, - "bugs": { - "url": "https://github.com/adobe/spectrum-css/issues" - }, - "main": "dist/index.css", - "files": [ - "dist/*", - "CHANGELOG.md", - "package.json", - "stories/template.js", - "metadata/mods.md" - ], - "peerDependencies": { - "@spectrum-css/swatch": ">=5", - "@spectrum-css/tokens": ">=13" - }, - "keywords": [ - "spectrum", - "css", - "design system", - "adobe" - ], - "publishConfig": { - "access": "public" - } + "name": "@spectrum-css/swatchgroup", + "version": "3.0.0", + "description": "The Spectrum CSS Color swatch group component", + "license": "Apache-2.0", + "author": "Adobe", + "homepage": "https://opensource.adobe.com/spectrum-css/swatchgroup", + "repository": { + "type": "git", + "url": "https://github.com/adobe/spectrum-css.git", + "directory": "components/swatchgroup" + }, + "bugs": { + "url": "https://github.com/adobe/spectrum-css/issues" + }, + "main": "dist/index.css", + "files": [ + "dist/*", + "metadata/mods.md", + "stories/template.js" + ], + "peerDependencies": { + "@spectrum-css/swatch": ">=5", + "@spectrum-css/tokens": ">=14.0.0-next.3" + }, + "keywords": [ + "adobe", + "css", + "design system", + "spectrum" + ], + "publishConfig": { + "access": "public" + } } diff --git a/components/switch/index.css b/components/switch/index.css index 360f8b0f97f..bc82ee800f2 100644 --- a/components/switch/index.css +++ b/components/switch/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-Switch { --spectrum-switch-label-color-default: var(--spectrum-neutral-content-color-default); --spectrum-switch-label-color-hover: var(--spectrum-neutral-content-color-hover); @@ -19,20 +17,61 @@ 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-selected-disabled: var(--spectrum-disabled-content-color); + --spectrum-switch-border-width: var(--spectrum-border-width-200); + + --spectrum-switch-border-color-default: var(--spectrum-neutral-content-color-default); + --spectrum-switch-border-color-hover: var(--spectrum-neutral-content-color-hover); + --spectrum-switch-border-color-down: var(--spectrum-neutral-content-color-down); + --spectrum-switch-border-color-focus: var(--spectrum-neutral-content-color-key-focus); + --spectrum-switch-border-color-disabled: var(--spectrum-disabled-content-color); - --spectrum-switch-background-color-selected-default: var(--spectrum-neutral-background-color-selected-default); - --spectrum-switch-background-color-selected-hover: var(--spectrum-neutral-background-color-selected-hover); - --spectrum-switch-background-color-selected-down: var(--spectrum-neutral-background-color-selected-down); - --spectrum-switch-background-color-selected-focus: var(--spectrum-neutral-background-color-selected-key-focus); + --spectrum-switch-border-color-selected-default: var(--spectrum-neutral-content-color-default); + --spectrum-switch-border-color-selected-hover: var(--spectrum-neutral-content-color-hover); + --spectrum-switch-border-color-selected-down: var(--spectrum-neutral-content-color-down); + --spectrum-switch-border-color-selected-focus: var(--spectrum-neutral-content-color-key-focus); - --spectrum-switch-focus-indicator-thickness: var(--mod-focus-indicator-thickness, var(--spectrum-focus-indicator-thickness)); + --spectrum-switch-background-color: var(--spectrum-gray-25); + --spectrum-switch-background-color-disabled: var(--spectrum-gray-25); + + --spectrum-switch-background-color-selected-default: var(--spectrum-neutral-background-color-default); + --spectrum-switch-background-color-selected-hover: var(--spectrum-neutral-background-color-hover); + --spectrum-switch-background-color-selected-down: var(--spectrum-neutral-background-color-down); + --spectrum-switch-background-color-selected-focus: var(--spectrum-neutral-background-color-key-focus); + --spectrum-switch-background-color-selected-disabled: var(--spectrum-disabled-content-color); + + --spectrum-switch-focus-indicator-thickness: var(--spectrum-focus-indicator-thickness); --spectrum-switch-focus-indicator-color: var(--spectrum-focus-indicator-color); + --spectrum-switch-focus-indicator-gap: var(--spectrum-focus-indicator-gap); + + --spectrum-switch-handle-background-color-default: var(--spectrum-neutral-content-color-default); + --spectrum-switch-handle-background-color-hover: var(--spectrum-neutral-content-color-hover); + --spectrum-switch-handle-background-color-down: var(--spectrum-neutral-content-color-down); + --spectrum-switch-handle-background-color-focus: var(--spectrum-neutral-content-color-key-focus); + --spectrum-switch-handle-background-color-disabled: var(--spectrum-disabled-content-color); + + --spectrum-switch-handle-background-color-selected: var(--spectrum-gray-25); + --spectrum-switch-handle-background-color-selected-disabled: var(--spectrum-gray-25); + + --spectrum-switch-handle-size: var(--spectrum-switch-handle-size-medium); + --spectrum-switch-handle-selected-size: var(--spectrum-switch-handle-selected-size-medium); + + --spectrum-switch-animation-duration-100: var(--spectrum-animation-duration-100); + --spectrum-switch-animation-duration-200: var(--spectrum-animation-duration-200); + + /* Default size - medium */ + --spectrum-switch-min-height: var(--spectrum-component-height-100); + --spectrum-switch-control-width: var(--spectrum-switch-control-width-medium); + --spectrum-switch-control-height: var(--spectrum-switch-control-height-medium); + --spectrum-switch-control-label-spacing: var(--spectrum-text-to-control-100); + --spectrum-switch-spacing-top-to-control: var(--spectrum-switch-top-to-control-medium); + --spectrum-switch-spacing-top-to-label: var(--spectrum-component-top-to-text-100); + --spectrum-switch-spacing-bottom-to-label: var(--spectrum-component-bottom-to-text-100); + + --spectrum-switch-font-size: var(--spectrum-font-size-100); + --spectrum-switch-line-height: var(--spectrum-line-height-100); + --spectrum-switch-cjk-line-height: var(--spectrum-cjk-line-height-100); - --spectrum-switch-handle-background-color: var(--spectrum-gray-75); - --spectrum-switch-handle-border-color-disabled: var(--spectrum-disabled-content-color); + --spectrum-switch-border-radius: var(--spectrum-corner-radius-full); } .spectrum-Switch--disabled { @@ -40,21 +79,15 @@ governing permissions and limitations under the License. } .spectrum-Switch.spectrum-Switch--emphasized { - /* - Selector specificity needed to beat the cascade, post-build. - The `spectrum` & `express` theme vars get appended below this in the dist file - & the higher specificity here will override. - */ - /* selected + emphasized */ - --spectrum-switch-background-color-selected-default: var(--spectrum-accent-color-900); - --spectrum-switch-background-color-selected-hover: var(--spectrum-accent-color-1000); - --spectrum-switch-background-color-selected-down: var(--spectrum-accent-color-1100); - --spectrum-switch-background-color-selected-focus: var(--spectrum-accent-color-1000); - - --spectrum-switch-handle-border-color-selected-default: var(--spectrum-accent-color-900); - --spectrum-switch-handle-border-color-selected-hover: var(--spectrum-accent-color-1000); - --spectrum-switch-handle-border-color-selected-down: var(--spectrum-accent-color-1100); - --spectrum-switch-handle-border-color-selected-focus: var(--spectrum-accent-color-1000); + --spectrum-switch-background-color-selected-default: var(--spectrum-accent-background-color-default); + --spectrum-switch-background-color-selected-hover: var(--spectrum-accent-background-color-hover); + --spectrum-switch-background-color-selected-down: var(--spectrum-accent-background-color-down); + --spectrum-switch-background-color-selected-focus: var(--spectrum-accent-background-color-key-focus); + + --spectrum-switch-border-color-selected-default: var(--spectrum-accent-background-color-default); + --spectrum-switch-border-color-selected-hover: var(--spectrum-accent-background-color-hover); + --spectrum-switch-border-color-selected-down: var(--spectrum-accent-background-color-down); + --spectrum-switch-border-color-selected-focus: var(--spectrum-accent-background-color-key-focus); } .spectrum-Switch--sizeS { @@ -64,19 +97,12 @@ governing permissions and limitations under the License. --spectrum-switch-control-label-spacing: var(--spectrum-text-to-control-75); --spectrum-switch-spacing-top-to-control: var(--spectrum-switch-top-to-control-small); --spectrum-switch-spacing-top-to-label: var(--spectrum-component-top-to-text-75); + --spectrum-switch-spacing-bottom-to-label: var(--spectrum-component-bottom-to-text-75); - --spectrum-switch-font-size: var(--spectrum-font-size-75); -} - -.spectrum-Switch--sizeM { - --spectrum-switch-min-height: var(--spectrum-component-height-100); - --spectrum-switch-control-width: var(--spectrum-switch-control-width-medium); - --spectrum-switch-control-height: var(--spectrum-switch-control-height-medium); - --spectrum-switch-control-label-spacing: var(--spectrum-text-to-control-100); - --spectrum-switch-spacing-top-to-control: var(--spectrum-switch-top-to-control-medium); - --spectrum-switch-spacing-top-to-label: var(--spectrum-component-top-to-text-100); + --spectrum-switch-handle-size: var(--spectrum-switch-handle-size-small); + --spectrum-switch-handle-selected-size: var(--spectrum-switch-handle-selected-size-small); - --spectrum-switch-font-size: var(--spectrum-font-size-100); + --spectrum-switch-font-size: var(--spectrum-font-size-75); } .spectrum-Switch--sizeL { @@ -86,6 +112,10 @@ governing permissions and limitations under the License. --spectrum-switch-control-label-spacing: var(--spectrum-text-to-control-200); --spectrum-switch-spacing-top-to-control: var(--spectrum-switch-top-to-control-large); --spectrum-switch-spacing-top-to-label: var(--spectrum-component-top-to-text-200); + --spectrum-switch-spacing-bottom-to-label: var(--spectrum-component-bottom-to-text-200); + + --spectrum-switch-handle-size: var(--spectrum-switch-handle-size-large); + --spectrum-switch-handle-selected-size: var(--spectrum-switch-handle-selected-size-large); --spectrum-switch-font-size: var(--spectrum-font-size-200); } @@ -97,6 +127,10 @@ governing permissions and limitations under the License. --spectrum-switch-control-label-spacing: var(--spectrum-text-to-control-300); --spectrum-switch-spacing-top-to-control: var(--spectrum-switch-top-to-control-extra-large); --spectrum-switch-spacing-top-to-label: var(--spectrum-component-top-to-text-300); + --spectrum-switch-spacing-bottom-to-label: var(--spectrum-component-bottom-to-text-300); + + --spectrum-switch-handle-size: var(--spectrum-switch-handle-size-extra-large); + --spectrum-switch-handle-selected-size: var(--spectrum-switch-handle-selected-size-extra-large); --spectrum-switch-font-size: var(--spectrum-font-size-300); } @@ -111,13 +145,8 @@ governing permissions and limitations under the License. } .spectrum-Switch-input { - /* Remove the margin for input in Firefox and Safari. */ margin: 0; - - /* Add the correct box sizing for [type="checkbox"] in IE 10-. */ box-sizing: border-box; - - /* Remove the padding for [type="checkbox"] in IE 10-. */ padding: 0; position: absolute; @@ -130,43 +159,43 @@ governing permissions and limitations under the License. cursor: pointer; - &:checked+.spectrum-Switch-switch { - &::before { - transform: translateX(calc(var(--mod-switch-control-width, var(--spectrum-switch-control-width)) - 100%)); - } - - &:dir(rtl)::before { - transform: translateX(calc(-1 * (var(--mod-switch-control-width, var(--spectrum-switch-control-width)) - 100%))); - } - } - &:disabled, &[disabled] { cursor: default; } - - &:focus-visible + .spectrum-Switch-switch { - &::after { - margin: calc(var(--mod-focus-indicator-gap, var(--spectrum-focus-indicator-gap)) * -1); - } - } } .spectrum-Switch-label { color: var(--highcontrast-switch-label-color-default, var(--mod-switch-label-color-default, var(--spectrum-switch-label-color-default))); margin-inline: var(--mod-switch-control-label-spacing, var(--spectrum-switch-control-label-spacing)); margin-block-start: var(--mod-switch-spacing-top-to-label, var(--spectrum-switch-spacing-top-to-label)); - margin-block-end: 0; + margin-block-end: var(--mod-switch-spacing-bottom-to-label, var(--spectrum-switch-spacing-bottom-to-label));; font-size: var(--mod-switch-font-size, var(--spectrum-switch-font-size)); - line-height: var(--mod-line-height-100, var(--spectrum-line-height-100)); - transition: color var(--mod-animation-duration-200, var(--spectrum-animation-duration-200)) ease-in-out; + line-height: var(--mod-switch-line-height, var(--spectrum-switch-line-height)); + transition: color var(--mod-switch-animation-duration-200, var(--spectrum-switch-animation-duration-200)) ease-in-out; + + &:lang(ja), + &:lang(zh), + &:lang(ko) { + line-height: var(--mod-switch-cjk-line-height, var(--spectrum-switch-cjk-line-height)); + } + + .spectrum-Switch:hover ~ & { + color: var(--highcontrast-switch-label-color-hover, var(--mod-switch-label-color-hover, var(--spectrum-switch-label-color-hover))); + } + + .spectrum-Switch:active ~ & { + color: var(--highcontrast-switch-label-color-down, var(--mod-switch-label-color-down, var(--spectrum-switch-label-color-down))); + } + + .spectrum-Switch-input:focus-visible ~ & { + color: var(--highcontrast-switch-label-color-focus, var(--mod-switch-label-color-focus, var(--spectrum-switch-label-color-focus))); + } } .spectrum-Switch-switch { display: inline-block; box-sizing: border-box; - - /* positions the pseudo elements relative to this one */ position: relative; inline-size: var(--mod-switch-control-width, var(--spectrum-switch-control-width)); @@ -180,204 +209,172 @@ governing permissions and limitations under the License. vertical-align: middle; - transition: background var(--mod-animation-duration-100, var(--spectrum-animation-duration-100)) ease-in-out, - border var(--mod-animation-duration-100, var(--spectrum-animation-duration-100)) ease-in-out; + transition: background var(--mod-switch-animation-duration-100, var(--spectrum-switch-animation-duration-100)) ease-in-out, + border var(--mod-switch-animation-duration-100, var(--spectrum-switch-animation-duration-100)) ease-in-out; block-size: var(--mod-switch-control-height, var(--spectrum-switch-control-height)); inset-inline-start: 0; inset-inline-end: 0; - border-radius: calc(var(--mod-switch-control-height, var(--spectrum-switch-control-height)) / 2); + background-color: var(--highcontrast-switch-background-color, var(--mod-switch-background-color, var(--spectrum-switch-background-color))); + border-radius: var(--mod-switch-border-radius, var(--spectrum-switch-border-radius)); + border-width: var(--mod-switch-border-width, var(--spectrum-switch-border-width)); + border-color: var(--highcontrast-switch-border-color-default, var(--mod-switch-border-color-default, var(--spectrum-switch-border-color-default))); + border-style: solid; - &::before { - display: block; - position: absolute; - content: ""; - box-sizing: border-box; + .spectrum-Switch:hover & { + border-color: var(--highcontrast-switch-border-color-hover, var(--mod-switch-border-color-hover, var(--spectrum-switch-border-color-hover))); } - /* :before is used for the handle of the switch */ - &::before { - transition: background var(--mod-animation-duration-100, var(--spectrum-animation-duration-100)) ease-in-out, - border var(--mod-animation-duration-100, var(--spectrum-animation-duration-100)) ease-in-out, - transform var(--mod-animation-duration-100, var(--spectrum-animation-duration-100)) ease-in-out, - box-shadow var(--mod-animation-duration-100, var(--spectrum-animation-duration-100)) ease-in-out; - - inline-size: var(--mod-switch-control-height, var(--spectrum-switch-control-height)); - block-size: var(--mod-switch-control-height, var(--spectrum-switch-control-height)); - - inset-block-start: 0; - inset-inline-start: 0; - - border-width: var(--mod-border-width-200, var(--spectrum-border-width-200)); - border-radius: calc(var(--mod-switch-control-height, var(--spectrum-switch-control-height)) / 2); - border-style: solid; + .spectrum-Switch:active & { + border-color: var(--highcontrast-switch-border-color-down, var(--mod-switch-border-color-down, var(--spectrum-switch-border-color-down))); } - /* :after is used for the focus halo */ - &::after { - border-radius: calc(calc(var(--mod-switch-control-height, var(--spectrum-switch-control-height)) / 2) + var(--mod-focus-indicator-gap, var(--spectrum-focus-indicator-gap)) * 2); - content: ""; - display: block; - position: absolute; - inset-inline-start: 0; - inset-inline-end: 0; - inset-block-end: 0; - inset-block-start: 0; - margin: 0; - - transition: opacity var(--mod-animation-duration-100, var(--spectrum-animation-duration-100)) ease-out, - margin var(--spectrum-animation-duration-100, var(--spectrum-animation-duration-100)) ease-out; + .spectrum-Switch-input:focus-visible + & { + border-color: var(--highcontrast-switch-border-color-focus, var(--mod-switch-border-color-focus, var(--spectrum-switch-border-color-focus))); } -} -.spectrum-Switch { - .spectrum-Switch-switch { - background-color: var(--highcontrast-switch-background-color, var(--mod-switch-background-color, var(--spectrum-switch-background-color))); - - &::before { - background-color: var(--highcontrast-switch-handle-background-color, var(--mod-switch-handle-background-color, var(--spectrum-switch-handle-background-color))); - border-color: var(--highcontrast-switch-handle-border-color-default, var(--mod-switch-handle-border-color-default, var(--spectrum-switch-handle-border-color-default))); - } - } -} + .spectrum-Switch-input:checked + & { + background-color: var(--highcontrast-switch-background-color-selected-default, var(--mod-switch-background-color-selected-default, var(--spectrum-switch-background-color-selected-default))); + border-color: var(--highcontrast-switch-border-color-selected-default, var(--mod-switch-border-color-selected-default, var(--spectrum-switch-border-color-selected-default))); -/* stylelint-disable max-nesting-depth */ -.spectrum-Switch:hover { - .spectrum-Switch-input { - & + .spectrum-Switch-switch { - &::before { - border-color: var(--highcontrast-switch-handle-border-color-hover, var(--mod-switch-handle-border-color-hover, var(--spectrum-switch-handle-border-color-hover))); - box-shadow: none; - } + .spectrum-Switch:hover & { + background-color: var(--highcontrast-switch-background-color-selected-hover, var(--mod-switch-background-color-selected-hover, var(--spectrum-switch-background-color-selected-hover))); + border-color: var(--highcontrast-switch-border-color-selected-hover, var(--mod-switch-border-color-selected-hover, var(--spectrum-switch-border-color-selected-hover))); } - & ~ .spectrum-Switch-label { - color: var(--highcontrast-switch-label-color-hover, var(--mod-switch-label-color-hover, var(--spectrum-switch-label-color-hover))); + .spectrum-Switch:active & { + background-color: var(--highcontrast-switch-background-color-selected-down, var(--mod-switch-background-color-selected-down, var(--spectrum-switch-background-color-selected-down))); + border-color: var(--highcontrast-switch-border-color-selected-down, var(--mod-switch-border-color-selected-down, var(--spectrum-switch-border-color-selected-down))); } + } - /* selected, not emphasized */ - &:checked:enabled + .spectrum-Switch-switch { - background-color: var(--highcontrast-switch-background-color-selected-hover, var(--mod-switch-background-color-selected-hover, var(--spectrum-switch-background-color-selected-hover))); - - &::before { - border-color: var(--highcontrast-switch-handle-border-color-selected-hover, var(--mod-switch-handle-border-color-selected-hover, var(--spectrum-switch-handle-border-color-selected-hover))); - } - } + .spectrum-Switch-input:checked:focus-visible + & { + background-color: var(--highcontrast-switch-background-color-selected-focus, var(--mod-switch-background-color-selected-focus, var(--spectrum-switch-background-color-selected-focus))); + border-color: var(--highcontrast-switch-border-color-selected-focus, var(--mod-switch-border-color-selected-focus, var(--spectrum-switch-border-color-selected-focus))); + } - &:disabled, - &[disabled] { - & + .spectrum-Switch-switch { - background-color: var(--highcontrast-switch-background-color-disabled, var(--mod-switch-background-color-disabled, var(--spectrum-switch-background-color-disabled))); + /* :before is used for the handle of the switch */ + &::before { + display: block; + position: absolute; + content: ""; + box-sizing: border-box; - &::before { - border-color: var(--highcontrast-switch-handle-border-color-disabled, var(--mod-switch-handle-border-color-disabled, var(--spectrum-switch-handle-border-color-disabled))); - } - } + transition: background var(--mod-switch-animation-duration-100, var(--spectrum-switch-animation-duration-100)) ease-in-out, + border var(--mod-switch-animation-duration-100, var(--spectrum-switch-animation-duration-100)) ease-in-out, + transform var(--mod-switch-animation-duration-100, var(--spectrum-switch-animation-duration-100)) ease-in-out, + box-shadow var(--mod-switch-animation-duration-100, var(--spectrum-switch-animation-duration-100)) ease-in-out; - & ~ .spectrum-Switch-label { - color: var(--highcontrast-switch-label-color-disabled, var(--mod-switch-label-color-disabled, var(--spectrum-switch-label-color-disabled))); - } + inline-size: var(--mod-switch-handle-size, var(--spectrum-switch-handle-size)); + block-size: var(--mod-switch-handle-size, var(--spectrum-switch-handle-size)); - /* disabled + selected, not emphasized */ - &:checked { - & + .spectrum-Switch-switch { - background-color: var(--highcontrast-switch-background-color-selected-disabled, var(--mod-switch-background-color-selected-disabled, var(--spectrum-switch-background-color-selected-disabled))); + inset-block-start: calc((var(--mod-switch-control-height, var(--spectrum-switch-control-height)) - var(--mod-switch-handle-size, var(--spectrum-switch-handle-size))) * 0.25); + inset-inline-start: calc((var(--mod-switch-control-height, var(--spectrum-switch-control-height)) - var(--mod-switch-handle-size, var(--spectrum-switch-handle-size))) * 0.25); - &::before { - border-color: var(--highcontrast-switch-handle-border-color-disabled, var(--mod-switch-handle-border-color-disabled, var(--spectrum-switch-handle-border-color-disabled))); - } - } + background-color: var(--highcontrast-switch-handle-background-color-default, var(--mod-switch-handle-background-color-default, var(--spectrum-switch-handle-background-color-default))); + border-radius: var(--mod-switch-border-radius, var(--spectrum-switch-border-radius)); - & ~ .spectrum-Switch-label { - color: var(--highcontrast-switch-label-color-disabled, var(--mod-switch-label-color-disabled, var(--spectrum-switch-label-color-disabled))); - } - } + .spectrum-Switch:hover & { + background-color: var(--highcontrast-switch-handle-background-color-hover, var(--mod-switch-handle-background-color-hover, var(--spectrum-switch-handle-background-color-hover))); } - } -} -.spectrum-Switch:active { - .spectrum-Switch-input { - & + .spectrum-Switch-switch { - &::before { - border-color: var(--highcontrast-switch-handle-border-color-down, var(--mod-switch-handle-border-color-down, var(--spectrum-switch-handle-border-color-down))); - } + .spectrum-Switch:active & { + background-color: var(--highcontrast-switch-handle-background-color-down, var(--mod-switch-handle-background-color-down, var(--spectrum-switch-handle-background-color-down))); } - & ~ .spectrum-Switch-label { - color: var(--highcontrast-switch-label-color-down, var(--mod-switch-label-color-down, var(--spectrum-switch-label-color-down))); + .spectrum-Switch-input:focus-visible + & { + background-color: var(--highcontrast-switch-handle-background-color-focus, var(--mod-switch-handle-background-color-focus, var(--spectrum-switch-handle-background-color-focus))); } - /* selected, not emphasized */ - &:checked:enabled + .spectrum-Switch-switch { - background-color: var(--highcontrast-switch-background-color-selected-down, var(--mod-switch-background-color-selected-down, var(--spectrum-switch-background-color-selected-down))); + /* Handle size changes when selected/checked */ + .spectrum-Switch-input:checked + & { + background-color: var(--highcontrast-switch-handle-background-color-selected, var(--mod-switch-handle-background-color-selected, var(--spectrum-switch-handle-background-color-selected))); - &::before { - border-color: var(--highcontrast-switch-handle-border-color-selected-down, var(--mod-switch-handle-border-color-selected-down, var(--spectrum-switch-handle-border-color-selected-down))); - } - } - } -} + inline-size: var(--mod-switch-handle-selected-size, var(--spectrum-switch-handle-selected-size)); + block-size: var(--mod-switch-handle-selected-size, var(--spectrum-switch-handle-selected-size)); + + inset-block-start: calc((var(--mod-switch-control-height, var(--spectrum-switch-control-height)) + - var(--mod-switch-border-width, var(--spectrum-switch-border-width)) + - var(--mod-switch-handle-selected-size, var(--spectrum-switch-handle-selected-size))) + * 0.25 + ); + inset-inline-start: calc((var(--mod-switch-control-height, var(--spectrum-switch-control-height)) + - var(--mod-switch-border-width, var(--spectrum-switch-border-width)) + - var(--mod-switch-handle-selected-size, var(--spectrum-switch-handle-selected-size))) + * 0.25 + ); + + transform: translateX(calc(100% + (var(--mod-switch-border-width, var(--spectrum-switch-border-width)) * 0.25))); -/* key focus */ -/* :after is the focus ring */ -/* :before is used for the handle of the switch */ -.spectrum-Switch, -.spectrum-Switch:hover { - .spectrum-Switch-input:focus-visible { - & + .spectrum-Switch-switch { - &::after { - box-shadow: - 0 0 0 - var(--mod-switch-focus-indicator-thickness, var(--spectrum-switch-focus-indicator-thickness)) - var(--highcontrast-switch-focus-indicator-color, var(--mod-switch-focus-indicator-color, var(--spectrum-switch-focus-indicator-color))); + &:dir(rtl) { + transform: translateX(calc(-1 * (100% + (var(--mod-switch-border-width, var(--spectrum-switch-border-width)) * 0.25)))); } - &::before { - border-color: var(--highcontrast-switch-handle-border-color-focus, var(--mod-switch-handle-border-color-focus, var(--spectrum-switch-handle-border-color-focus))); + .spectrum-Switch:hover & { + background-color: var(--highcontrast-switch-handle-background-color-selected, var(--mod-switch-handle-background-color-selected, var(--spectrum-switch-handle-background-color-selected))); } } - /* selected, not emphasized key focus */ - &:checked { - & + .spectrum-Switch-switch { - background-color: var(--highcontrast-switch-background-color-selected-focus, var(--mod-switch-background-color-selected-focus, var(--spectrum-switch-background-color-selected-focus))); - - &::before { - border-color: var(--highcontrast-switch-handle-border-color-selected-focus, var(--mod-switch-handle-border-color-selected-focus, var(--spectrum-switch-handle-border-color-selected-focus))); - } - } + .spectrum-Switch:active .spectrum-Switch-input:not(:disabled) + & { + transform: + perspective(var(--spectrum-component-size-minimum-perspective-down)) + translateZ(var(--spectrum-component-size-difference-down)); } - & ~ .spectrum-Switch-label { - color: var(--highcontrast-switch-label-color-focus, var(--mod-switch-label-color-focus, var(--spectrum-switch-label-color-focus))); + .spectrum-Switch:active .spectrum-Switch-input:not(:disabled):checked + & { + /* Add down state without overriding translateX */ + transform: + translateX(calc(100% + (var(--mod-switch-border-width, var(--spectrum-switch-border-width)) * 0.25))) + perspective(var(--spectrum-component-size-minimum-perspective-down)) + translateZ(var(--spectrum-component-size-difference-down)); + + &:dir(rtl) { + /* Add down state without overriding translateX */ + transform: + translateX(calc(-1 * (100% + (var(--mod-switch-border-width, var(--spectrum-switch-border-width)) * 0.25)))) + perspective(var(--spectrum-component-size-minimum-perspective-down)) + translateZ(var(--spectrum-component-size-difference-down)); + } } } -} -/* stylelint-enable max-nesting-depth */ -/* when checked, after transition or set manually */ -.spectrum-Switch-input { - /* selected, not emphasized */ - &:checked + .spectrum-Switch-switch { - background-color: var(--highcontrast-switch-background-color-selected-default, var(--mod-switch-background-color-selected-default, var(--spectrum-switch-background-color-selected-default))); + /* :after is used for the track of the switch and the focus */ + &::after { + border-radius: var(--mod-switch-border-radius, var(--spectrum-switch-border-radius)); + content: ""; + display: block; + position: absolute; + inset-inline-start: 0; + inset-inline-end: 0; + inset-block-end: 0; + inset-block-start: 0; + margin: 0; - &::before { - border-color: var(--highcontrast-switch-handle-border-color-selected-default, var(--mod-switch-handle-border-color-selected-default, var(--spectrum-switch-handle-border-color-selected-default))); + transition: opacity var(--mod-switch-animation-duration-100, var(--spectrum-switch-animation-duration-100)) ease-out, + outline-offset var(--mod-switch-animation-duration-100, var(--spectrum-switch-animation-duration-100)) ease-out, + border var(--mod-switch-animation-duration-100, var(--spectrum-switch-animation-duration-100)) ease-in-out; + + .spectrum-Switch-input:focus-visible + & { + outline: var(--mod-switch-focus-indicator-thickness, var(--spectrum-switch-focus-indicator-thickness)) solid + var(--highcontrast-switch-focus-indicator-color, var(--mod-switch-focus-indicator-color, var(--spectrum-switch-focus-indicator-color))); + outline-offset: calc(var(--mod-switch-focus-indicator-gap, var(--spectrum-switch-focus-indicator-gap)) + var(--mod-switch-focus-indicator-thickness, var(--spectrum-switch-focus-indicator-thickness))); } } } /* disabled */ -.spectrum-Switch-input:disabled, -.spectrum-Switch-input[disabled] { +.spectrum-Switch .spectrum-Switch-input:disabled, +.spectrum-Switch .spectrum-Switch-input[disabled], +.spectrum-Switch:hover .spectrum-Switch-input:disabled, +.spectrum-Switch:hover .spectrum-Switch-input[disabled] { & + .spectrum-Switch-switch { background-color: var(--highcontrast-switch-background-color-disabled, var(--mod-switch-background-color-disabled, var(--spectrum-switch-background-color-disabled))); + border-color: var(--highcontrast-switch-border-color-disabled, var(--mod-switch-border-color-disabled, var(--spectrum-switch-border-color-disabled))); &::before { - border-color: var(--highcontrast-switch-handle-border-color-disabled, var(--mod-switch-handle-border-color-disabled, var(--spectrum-switch-handle-border-color-disabled))); + background-color: var(--highcontrast-switch-handle-background-color-disabled, var(--mod-switch-handle-background-color-disabled, var(--spectrum-switch-handle-background-color-disabled))); } } @@ -385,12 +382,11 @@ governing permissions and limitations under the License. color: var(--highcontrast-switch-label-color-disabled, var(--mod-switch-label-color-disabled, var(--spectrum-switch-label-color-disabled))); } - /* disabled + selected, not emphasized */ &:checked + .spectrum-Switch-switch { background-color: var(--highcontrast-switch-background-color-selected-disabled, var(--mod-switch-background-color-selected-disabled, var(--spectrum-switch-background-color-selected-disabled))); &::before { - border-color: var(--highcontrast-switch-handle-border-color-disabled, var(--mod-switch-handle-border-color-disabled, var(--spectrum-switch-handle-border-color-disabled))); + background-color: var(--highcontrast-switch-handle-background-color-selected-disabled, var(--mod-switch-handle-background-color-selected-disabled, var(--spectrum-switch-handle-background-color-selected-disabled))); } } @@ -410,83 +406,36 @@ governing permissions and limitations under the License. --highcontrast-switch-label-color-focus: ButtonText; --highcontrast-switch-label-color-disabled: GrayText; - --highcontrast-switch-handle-background-color: ButtonFace; + --highcontrast-switch-background-color: transparent; + + --highcontrast-switch-border-color-default: ButtonText; + --highcontrast-switch-border-color-hover: Highlight; + --highcontrast-switch-border-color-down: ButtonText; + --highcontrast-switch-border-color-focus: ButtonText; + --highcontrast-switch-border-color-disabled: GrayText; + + --highcontrast-switch-border-color-selected-default: Highlight; + --highcontrast-switch-border-color-selected-hover: Highlight; + --highcontrast-switch-border-color-selected-down: Highlight; + --highcontrast-switch-border-color-selected-focus: Highlight; - --highcontrast-switch-handle-border-color-default: ButtonText; - --highcontrast-switch-handle-border-color-hover: Highlight; - --highcontrast-switch-handle-border-color-down: Highlight; - --highcontrast-switch-handle-border-color-focus: Highlight; - --highcontrast-switch-handle-border-color-disabled: Highlight; + --highcontrast-switch-handle-background-color-default: ButtonText; + --highcontrast-switch-handle-background-color-hover: Highlight; + --highcontrast-switch-handle-background-color-down: ButtonText; + --highcontrast-switch-handle-background-color-focus: ButtonText; + --highcontrast-switch-handle-background-color-disabled: GrayText; - --highcontrast-switch-handle-border-color-selected-default: Highlight; - --highcontrast-switch-handle-border-color-selected-hover: Highlight; - --highcontrast-switch-handle-border-color-selected-down: Highlight; - --highcontrast-switch-handle-border-color-selected-focus: Highlight; + --highcontrast-switch-handle-background-color-selected: HighlightText; + --highcontrast-switch-handle-background-color-selected-disabled: ButtonFace; + + --highcontrast-switch-background-color-disabled: ButtonFace; - --highcontrast-switch-background-color: ButtonFace; --highcontrast-switch-background-color-selected-default: Highlight; --highcontrast-switch-background-color-selected-hover: Highlight; --highcontrast-switch-background-color-selected-down: Highlight; --highcontrast-switch-background-color-selected-focus: Highlight; - --highcontrast-switch-background-color-selected-disabled: Highlight; + --highcontrast-switch-background-color-selected-disabled: GrayText; --highcontrast-switch-focus-indicator-color: ButtonText; - - .spectrum-Switch-input { - &:not(:checked)+.spectrum-Switch-switch { - box-shadow: inset 0 0 0 1px ButtonText; - } - } - - /* stylelint-disable max-nesting-depth */ - &:hover .spectrum-Switch-input { - &:not(:checked) + .spectrum-Switch-switch { - box-shadow: inset 0 0 0 1px Highlight; - } - - &:disabled, - &[disabled] { - &:checked + .spectrum-Switch-switch { - box-shadow: inset 0 0 0 1px GrayText; - background-color: GrayText; - - &::before { - border-color: GrayText; - background-color: ButtonFace; - } - } - } - } - - /* over-writes for disabled button */ - .spectrum-Switch-input { - &:disabled, - &[disabled] { - &:not(:checked) + .spectrum-Switch-switch { - box-shadow: inset 0 0 0 1px GrayText; - background-color: ButtonFace; - - &::before { - border-color: GrayText; - background-color: ButtonFace; - } - } - - &:checked + .spectrum-Switch-switch { - box-shadow: inset 0 0 0 1px GrayText; - background-color: GrayText; - - &::before { - border-color: GrayText; - background-color: ButtonFace; - } - } - - & ~ .spectrum-Switch-label { - color: GrayText; - } - } - } - /* stylelint-enable max-nesting-depth */ } } diff --git a/components/switch/metadata/mods.md b/components/switch/metadata/mods.md index 1ddbb105433..1530280c1dc 100644 --- a/components/switch/metadata/mods.md +++ b/components/switch/metadata/mods.md @@ -1,39 +1,49 @@ -| Modifiable custom properties | -| --------------------------------------------------- | -| `--mod-animation-duration-100` | -| `--mod-animation-duration-200` | -| `--mod-border-width-200` | -| `--mod-focus-indicator-gap` | -| `--mod-focus-indicator-thickness` | -| `--mod-line-height-100` | -| `--mod-switch-background-color` | -| `--mod-switch-background-color-disabled` | -| `--mod-switch-background-color-selected-default` | -| `--mod-switch-background-color-selected-disabled` | -| `--mod-switch-background-color-selected-down` | -| `--mod-switch-background-color-selected-focus` | -| `--mod-switch-background-color-selected-hover` | -| `--mod-switch-control-height` | -| `--mod-switch-control-label-spacing` | -| `--mod-switch-control-width` | -| `--mod-switch-focus-indicator-color` | -| `--mod-switch-focus-indicator-thickness` | -| `--mod-switch-font-size` | -| `--mod-switch-handle-background-color` | -| `--mod-switch-handle-border-color-default` | -| `--mod-switch-handle-border-color-disabled` | -| `--mod-switch-handle-border-color-down` | -| `--mod-switch-handle-border-color-focus` | -| `--mod-switch-handle-border-color-hover` | -| `--mod-switch-handle-border-color-selected-default` | -| `--mod-switch-handle-border-color-selected-down` | -| `--mod-switch-handle-border-color-selected-focus` | -| `--mod-switch-handle-border-color-selected-hover` | -| `--mod-switch-height` | -| `--mod-switch-label-color-default` | -| `--mod-switch-label-color-disabled` | -| `--mod-switch-label-color-down` | -| `--mod-switch-label-color-focus` | -| `--mod-switch-label-color-hover` | -| `--mod-switch-spacing-top-to-control` | -| `--mod-switch-spacing-top-to-label` | +| Modifiable custom properties | +| -------------------------------------------------------- | +| `--mod-switch-animation-duration-100` | +| `--mod-switch-animation-duration-200` | +| `--mod-switch-background-color` | +| `--mod-switch-background-color-disabled` | +| `--mod-switch-background-color-selected-default` | +| `--mod-switch-background-color-selected-disabled` | +| `--mod-switch-background-color-selected-down` | +| `--mod-switch-background-color-selected-focus` | +| `--mod-switch-background-color-selected-hover` | +| `--mod-switch-border-color-default` | +| `--mod-switch-border-color-disabled` | +| `--mod-switch-border-color-down` | +| `--mod-switch-border-color-focus` | +| `--mod-switch-border-color-hover` | +| `--mod-switch-border-color-selected-default` | +| `--mod-switch-border-color-selected-down` | +| `--mod-switch-border-color-selected-focus` | +| `--mod-switch-border-color-selected-hover` | +| `--mod-switch-border-radius` | +| `--mod-switch-border-width` | +| `--mod-switch-cjk-line-height` | +| `--mod-switch-control-height` | +| `--mod-switch-control-label-spacing` | +| `--mod-switch-control-width` | +| `--mod-switch-focus-indicator-color` | +| `--mod-switch-focus-indicator-gap` | +| `--mod-switch-focus-indicator-thickness` | +| `--mod-switch-font-size` | +| `--mod-switch-handle-background-color-default` | +| `--mod-switch-handle-background-color-disabled` | +| `--mod-switch-handle-background-color-down` | +| `--mod-switch-handle-background-color-focus` | +| `--mod-switch-handle-background-color-hover` | +| `--mod-switch-handle-background-color-selected` | +| `--mod-switch-handle-background-color-selected-disabled` | +| `--mod-switch-handle-selected-size` | +| `--mod-switch-handle-size` | +| `--mod-switch-height` | +| `--mod-switch-label-color-default` | +| `--mod-switch-label-color-disabled` | +| `--mod-switch-label-color-down` | +| `--mod-switch-label-color-focus` | +| `--mod-switch-label-color-hover` | +| `--mod-switch-line-height` | +| `--mod-switch-spacing-bottom-to-label` | +| `--mod-switch-spacing-top-to-control` | +| `--mod-switch-spacing-top-to-label` | diff --git a/components/switch/metadata/switch.yml b/components/switch/metadata/switch.yml index 0cebd67302d..c0020d3f958 100644 --- a/components/switch/metadata/switch.yml +++ b/components/switch/metadata/switch.yml @@ -6,20 +6,55 @@ 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/switch/metadata/mods.md">here</a>. - name: Migration Guide description: | - ### Component renamed - Toggle is now known as Switch. Replace all `.spectrum-ToggleSwitch*` classnames with `.spectrum-Switch*`. - ### T-shirt sizing - Switch now supports t-shirt sizing and requires that you specify the size by adding a .spectrum-Switch--size* class. The default size is "medium". - ### Quiet and emphasized - Spectrum has chosen the variant previously known as `quiet` to be the default and has added an `emphasized` variant with the same styles as the previous default. - If you were using the `quiet` variant, the `.spectrum-Switch--quiet` class is no longer required and can be removed. - If you need a switch to look like it did before this change, add `.spectrum-Switch--emphasized`. + ### Version 5.0.0 + #### S2 Migration + Switch now uses Spectrum 2 tokens and specifications. The following properties have been adjusted: - ### A/B toggle variant removed - It's been deprecated and removed. A similar use case could be served by using Radio buttons. + - Medium is now the default size and `.spectrum-Switch--sizeM` has been removed + - Switch includes the Spectrum 2 down state transform + - Due to design changes (addition of a track border, handle color change, removal of border on handle, etc.), many mods required updates: + - Renamed mods: + - `--mod-animation-duration-100` renamed to `--mod-switch-animation-duration-100` + - `--mod-animation-duration-200` renamed to `--mod-switch-animation-duration-200` + - `--mod-border-width-200` renamed to `--mod-switch-border-width` + - `--mod-cjk-line-height-100` renamed to `--mod-switch-cjk-line-height` + - `--mod-focus-indicator-gap` renamed to `--mod-switch-focus-indicator-gap` + - `--mod-focus-indicator-thickness` renamed to `--mod-switch-focus-indicator-thickness` + - `--mod-line-height-100` renamed to `--mod-switch-line-height` + - `--mod-switch-handle-background-color` renamed to `--mod-switch-handle-background-color-default` + - New mods: + - `--mod-cjk-line-height-100` + - `--mod-switch-border-color-default` + - `--mod-switch-border-color-disabled` + - `--mod-switch-border-color-down` + - `--mod-switch-border-color-focus` + - `--mod-switch-border-color-hover` + - `--mod-switch-border-color-selected-default` + - `--mod-switch-border-color-selected-down` + - `--mod-switch-border-color-selected-focus` + - `--mod-switch-border-color-selected-hover` + - `--mod-switch-border-radius` + - `--mod-switch-handle-background-color-down` + - `--mod-switch-handle-background-color-focus` + - `--mod-switch-handle-background-color-hover` + - `--mod-switch-handle-background-color-disabled` + - `--mod-switch-handle-background-color-selected-disabled` + - `--mod-switch-handle-selected-background-color` + - `--mod-switch-handle-selected-size` + - `--mod-switch-handle-size` + - `--mod-switch-spacing-bottom-to-label` + - Removed mods: + - `--mod-switch-handle-border-color-default` + - `--mod-switch-handle-border-color-disabled` + - `--mod-switch-handle-border-color-down` + - `--mod-switch-handle-border-color-focus` + - `--mod-switch-handle-border-color-hover` + - `--mod-switch-handle-border-color-selected-default` + - `--mod-switch-handle-border-color-selected-down` + - `--mod-switch-handle-border-color-selected-focus` + - `--mod-switch-handle-border-color-selected-hover` + - Rework of forced-colors to only need custom prop reassignment to work (no more custom CSS for Windows High Contrast Mode) - ### 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: switch name: Standard diff --git a/components/switch/package.json b/components/switch/package.json index 3d110af4705..e5ac19a9b5e 100644 --- a/components/switch/package.json +++ b/components/switch/package.json @@ -1,36 +1,34 @@ { - "name": "@spectrum-css/switch", - "version": "5.0.0", - "description": "The Spectrum CSS switch component", - "license": "Apache-2.0", - "author": "Adobe", - "homepage": "https://opensource.adobe.com/spectrum-css/switch", - "repository": { - "type": "git", - "url": "https://github.com/adobe/spectrum-css.git", - "directory": "components/switch" - }, - "bugs": { - "url": "https://github.com/adobe/spectrum-css/issues" - }, - "main": "dist/index.css", - "files": [ - "dist/*", - "CHANGELOG.md", - "package.json", - "stories/template.js", - "metadata/mods.md" - ], - "peerDependencies": { - "@spectrum-css/tokens": ">=13" - }, - "keywords": [ - "spectrum", - "css", - "design system", - "adobe" - ], - "publishConfig": { - "access": "public" - } + "name": "@spectrum-css/switch", + "version": "5.0.0", + "description": "The Spectrum CSS switch component", + "license": "Apache-2.0", + "author": "Adobe", + "homepage": "https://opensource.adobe.com/spectrum-css/switch", + "repository": { + "type": "git", + "url": "https://github.com/adobe/spectrum-css.git", + "directory": "components/switch" + }, + "bugs": { + "url": "https://github.com/adobe/spectrum-css/issues" + }, + "main": "dist/index.css", + "files": [ + "dist/*", + "metadata/mods.md", + "stories/template.js" + ], + "peerDependencies": { + "@spectrum-css/tokens": ">=14.0.0-next.3" + }, + "keywords": [ + "adobe", + "css", + "design system", + "spectrum" + ], + "publishConfig": { + "access": "public" + } } diff --git a/components/switch/stories/switch.stories.js b/components/switch/stories/switch.stories.js index 822e1b67061..32dc91880a5 100644 --- a/components/switch/stories/switch.stories.js +++ b/components/switch/stories/switch.stories.js @@ -1,4 +1,6 @@ -// Import the component markup template +import { Template as Typography } from "@spectrum-css/typography/stories/template.js"; +import { html } from "lit"; +import { styleMap } from "lit/directives/style-map.js"; import { Template } from "./template"; export default { @@ -70,24 +72,166 @@ export default { type: "migrated", }, }, + decorators: [ + (Story, context) => html` + <style> + .spectrum-Detail { display: inline-block; } + .spectrum-Typography > div { + border: 1px solid var(--spectrum-gray-200); + border-radius: 4px; + padding: 0 1em 1em; + /* Why seafoam? Because it separates it from the component styles. */ + --mod-detail-font-color: var(--spectrum-seafoam-900); + } + </style> + <div + style=${styleMap({ + display: "flex", + flexDirection: "column", + alignItems: "flex-start", + gap: "1rem", + "--mod-detail-margin-end": ".3rem", + })} + > + ${Story(context)} + </div> + `, + ], }; -export const Default = Template.bind({}); -Default.args = {}; +const States = (args) => html` + ${Typography({ + semantics: "detail", + size: "s", + content: ["Default"], + })} + ${Template(args)} + ${Typography({ + semantics: "detail", + size: "s", + content: ["Checked"], + })} + ${Template({ + ...args, + isChecked: true, + })} + ${Typography({ + semantics: "detail", + size: "s", + content: ["Disabled"], + })} + ${Template({ + ...args, + customStyles: {"max-width": "250px"}, + isDisabled: true, + label: "Switch unchecked and disabled and so long it wraps to the next line", + })} + ${Typography({ + semantics: "detail", + size: "s", + content: ["Disabled + checked"], + })} + ${Template({ + ...args, + isChecked: true, + isDisabled: true, + })}`; -export const Emphasized = Template.bind({}); -Emphasized.args = { - isEmphasized: true, - label: "Switch label that is so long it wraps to the next line", - customStyles: {"max-width": "250px"} -}; +const Sizes = (args) => + html` ${["s", "m", "l", "xl"].map((size) => { + return html` + ${Typography({ + semantics: "detail", + size: "s", + content: [ + { + s: "Small", + m: "Medium", + l: "Large", + xl: "Extra-large", + }[size], + ], + })} + ${Template({ + ...args, + size, + })} + `; + })}`; -export const Checked = Template.bind({}); -Checked.args = { - isChecked: true -}; +const Variants = (args) => + html` ${window.isChromatic() + ? html` <div class="spectrum-Typography"> + ${Typography({ + semantics: "detail", + size: "l", + content: ["Default"], + })} + <div + style=${styleMap({ + display: "flex", + flexDirection: "column", + gap: ".3rem", + })} + > + ${States(args)} + </div> + </div> + <div class="spectrum-Typography"> + ${Typography({ + semantics: "detail", + size: "l", + content: ["Emphasized"], + })} + <div + style=${styleMap({ + display: "flex", + flexDirection: "column", + gap: ".3rem", + })} + > + ${States({ + ...args, + isEmphasized: true, + })} + </div> + </div> + <div class="spectrum-Typography"> + ${Typography({ + semantics: "detail", + size: "l", + content: ["Sizing - Unchecked"], + })} + <div + style=${styleMap({ + display: "flex", + flexDirection: "column", + gap: ".3rem", + })} + > + ${Sizes(args)} + </div> + </div> + <div class="spectrum-Typography"> + ${Typography({ + semantics: "detail", + size: "l", + content: ["Sizing - Checked"], + })} + <div + style=${styleMap({ + display: "flex", + flexDirection: "column", + gap: ".3rem", + })} + > + ${Sizes({ + ...args, + isChecked: true, + })} + </div> + </div>` + : Template(args)}`; -export const Disabled = Template.bind({}); -Disabled.args = { - isDisabled: true -}; +export const Default = Variants.bind({}); +Default.args = {}; diff --git a/components/switch/stories/template.js b/components/switch/stories/template.js index 177cd13d5d7..9db7dd6c2d8 100644 --- a/components/switch/stories/template.js +++ b/components/switch/stories/template.js @@ -14,19 +14,8 @@ export const Template = ({ isEmphasized, customClasses = [], customStyles = {}, - id, - ...globals + id }) => { - const { express } = globals; - - try { - if (!express) import(/* webpackPrefetch: true */ "../themes/spectrum.css"); - else import(/* webpackPrefetch: true */ "../themes/express.css"); - } - catch (e) { - console.warn(e); - } - // ID attribute value for the input element. const inputId = id ? `${id}-input` : "switch-onoff-0"; diff --git a/components/switch/themes/express.css b/components/switch/themes/express.css deleted file mode 100644 index 24bcac61171..00000000000 --- a/components/switch/themes/express.css +++ /dev/null @@ -1,27 +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-Switch { - --spectrum-switch-handle-border-color-default: var(--spectrum-gray-800); - --spectrum-switch-handle-border-color-hover: var(--spectrum-gray-900); - --spectrum-switch-handle-border-color-down: var(--spectrum-gray-900); - --spectrum-switch-handle-border-color-focus: var(--spectrum-gray-900); - - --spectrum-switch-handle-border-color-selected-default: var(--spectrum-gray-800); - --spectrum-switch-handle-border-color-selected-hover: var(--spectrum-gray-900); - --spectrum-switch-handle-border-color-selected-down: var(--spectrum-gray-900); - --spectrum-switch-handle-border-color-selected-focus: var(--spectrum-gray-900); - } -} diff --git a/components/switch/themes/spectrum.css b/components/switch/themes/spectrum.css deleted file mode 100644 index 30120df2455..00000000000 --- a/components/switch/themes/spectrum.css +++ /dev/null @@ -1,25 +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-Switch { - --spectrum-switch-handle-border-color-default: var(--spectrum-gray-600); - --spectrum-switch-handle-border-color-hover: var(--spectrum-gray-700); - --spectrum-switch-handle-border-color-down: var(--spectrum-gray-800); - --spectrum-switch-handle-border-color-focus: var(--spectrum-gray-700); - - --spectrum-switch-handle-border-color-selected-default: var(--spectrum-gray-700); - --spectrum-switch-handle-border-color-selected-hover: var(--spectrum-gray-800); - --spectrum-switch-handle-border-color-selected-down: var(--spectrum-gray-900); - --spectrum-switch-handle-border-color-selected-focus: var(--spectrum-gray-800); - } -} diff --git a/components/table/index.css b/components/table/index.css index 09f92a6b11d..4d19a9d9b39 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); /* ----- * @@ -83,14 +83,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); @@ -809,7 +809,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; @@ -825,7 +825,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 0d46fff917c..ccb536edaf2 100644 --- a/components/table/package.json +++ b/components/table/package.json @@ -1,51 +1,49 @@ { - "name": "@spectrum-css/table", - "version": "6.0.0", - "description": "The Spectrum CSS table component", - "license": "Apache-2.0", - "author": "Adobe", - "homepage": "https://opensource.adobe.com/spectrum-css/table", - "repository": { - "type": "git", - "url": "https://github.com/adobe/spectrum-css.git", - "directory": "components/table" - }, - "bugs": { - "url": "https://github.com/adobe/spectrum-css/issues" - }, - "main": "dist/index.css", - "files": [ - "dist/*", - "CHANGELOG.md", - "package.json", - "stories/template.js", - "metadata/mods.md" - ], - "peerDependencies": { - "@spectrum-css/button": ">=11", - "@spectrum-css/checkbox": ">=8", - "@spectrum-css/icon": ">=4", - "@spectrum-css/thumbnail": ">=5", - "@spectrum-css/tokens": ">=13" - }, - "peerDependenciesMeta": { - "@spectrum-css/button": { - "optional": true - }, - "@spectrum-css/checkbox": { - "optional": true - }, - "@spectrum-css/thumbnail": { - "optional": true - } - }, - "keywords": [ - "spectrum", - "css", - "design system", - "adobe" - ], - "publishConfig": { - "access": "public" - } + "name": "@spectrum-css/table", + "version": "6.0.0", + "description": "The Spectrum CSS table component", + "license": "Apache-2.0", + "author": "Adobe", + "homepage": "https://opensource.adobe.com/spectrum-css/table", + "repository": { + "type": "git", + "url": "https://github.com/adobe/spectrum-css.git", + "directory": "components/table" + }, + "bugs": { + "url": "https://github.com/adobe/spectrum-css/issues" + }, + "main": "dist/index.css", + "files": [ + "dist/*", + "metadata/mods.md", + "stories/template.js" + ], + "peerDependencies": { + "@spectrum-css/button": ">=11", + "@spectrum-css/checkbox": ">=8", + "@spectrum-css/icon": ">=4", + "@spectrum-css/thumbnail": ">=5", + "@spectrum-css/tokens": ">=14.0.0-next.3" + }, + "peerDependenciesMeta": { + "@spectrum-css/button": { + "optional": true + }, + "@spectrum-css/checkbox": { + "optional": true + }, + "@spectrum-css/thumbnail": { + "optional": true + } + }, + "keywords": [ + "adobe", + "css", + "design system", + "spectrum" + ], + "publishConfig": { + "access": "public" + } } diff --git a/components/tabs/index.css b/components/tabs/index.css index 72ec7fc2cdc..8becad8156b 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 6640079cb99..81f55bfff07 100644 --- a/components/tabs/package.json +++ b/components/tabs/package.json @@ -1,44 +1,42 @@ { - "name": "@spectrum-css/tabs", - "version": "5.0.0", - "description": "The Spectrum CSS tabs component", - "license": "Apache-2.0", - "author": "Adobe", - "homepage": "https://opensource.adobe.com/spectrum-css/tabs", - "repository": { - "type": "git", - "url": "https://github.com/adobe/spectrum-css.git", - "directory": "components/tabs" - }, - "bugs": { - "url": "https://github.com/adobe/spectrum-css/issues" - }, - "main": "dist/index.css", - "files": [ - "dist/*", - "CHANGELOG.md", - "package.json", - "stories/template.js", - "metadata/mods.md" - ], - "peerDependencies": { - "@spectrum-css/icon": ">=4", - "@spectrum-css/menu": ">=5", - "@spectrum-css/picker": ">=6", - "@spectrum-css/tokens": ">=13" - }, - "peerDependenciesMeta": { - "@spectrum-css/icon": { - "optional": true - } - }, - "keywords": [ - "spectrum", - "css", - "design system", - "adobe" - ], - "publishConfig": { - "access": "public" - } + "name": "@spectrum-css/tabs", + "version": "5.0.0", + "description": "The Spectrum CSS tabs component", + "license": "Apache-2.0", + "author": "Adobe", + "homepage": "https://opensource.adobe.com/spectrum-css/tabs", + "repository": { + "type": "git", + "url": "https://github.com/adobe/spectrum-css.git", + "directory": "components/tabs" + }, + "bugs": { + "url": "https://github.com/adobe/spectrum-css/issues" + }, + "main": "dist/index.css", + "files": [ + "dist/*", + "metadata/mods.md", + "stories/template.js" + ], + "peerDependencies": { + "@spectrum-css/icon": ">=4", + "@spectrum-css/menu": ">=5", + "@spectrum-css/picker": ">=6", + "@spectrum-css/tokens": ">=14.0.0-next.3" + }, + "peerDependenciesMeta": { + "@spectrum-css/icon": { + "optional": true + } + }, + "keywords": [ + "adobe", + "css", + "design system", + "spectrum" + ], + "publishConfig": { + "access": "public" + } } diff --git a/components/tag/index.css b/components/tag/index.css index 88319c8854f..5e23a317947 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 800745c834d..6d3c7c96481 100644 --- a/components/tag/package.json +++ b/components/tag/package.json @@ -1,47 +1,45 @@ { - "name": "@spectrum-css/tag", - "version": "9.0.0", - "description": "The Spectrum CSS tags component", - "license": "Apache-2.0", - "author": "Adobe", - "homepage": "https://opensource.adobe.com/spectrum-css/tag", - "repository": { - "type": "git", - "url": "https://github.com/adobe/spectrum-css.git", - "directory": "components/tag" - }, - "bugs": { - "url": "https://github.com/adobe/spectrum-css/issues" - }, - "main": "dist/index.css", - "files": [ - "dist/*", - "CHANGELOG.md", - "package.json", - "stories/template.js", - "metadata/mods.md" - ], - "peerDependencies": { - "@spectrum-css/avatar": ">=6", - "@spectrum-css/clearbutton": ">=5", - "@spectrum-css/icon": ">=4", - "@spectrum-css/tokens": ">=13" - }, - "peerDependenciesMeta": { - "@spectrum-css/avatar": { - "optional": true - }, - "@spectrum-css/icon": { - "optional": true - } - }, - "keywords": [ - "spectrum", - "css", - "design system", - "adobe" - ], - "publishConfig": { - "access": "public" - } + "name": "@spectrum-css/tag", + "version": "9.0.0", + "description": "The Spectrum CSS tags component", + "license": "Apache-2.0", + "author": "Adobe", + "homepage": "https://opensource.adobe.com/spectrum-css/tag", + "repository": { + "type": "git", + "url": "https://github.com/adobe/spectrum-css.git", + "directory": "components/tag" + }, + "bugs": { + "url": "https://github.com/adobe/spectrum-css/issues" + }, + "main": "dist/index.css", + "files": [ + "dist/*", + "metadata/mods.md", + "stories/template.js" + ], + "peerDependencies": { + "@spectrum-css/avatar": ">=6", + "@spectrum-css/clearbutton": ">=5", + "@spectrum-css/icon": ">=4", + "@spectrum-css/tokens": ">=14.0.0-next.3" + }, + "peerDependenciesMeta": { + "@spectrum-css/avatar": { + "optional": true + }, + "@spectrum-css/icon": { + "optional": true + } + }, + "keywords": [ + "adobe", + "css", + "design system", + "spectrum" + ], + "publishConfig": { + "access": "public" + } } 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 d780b51da5e..e90fbb6b08d 100644 --- a/components/taggroup/package.json +++ b/components/taggroup/package.json @@ -1,37 +1,35 @@ { - "name": "@spectrum-css/taggroup", - "version": "5.0.0", - "description": "The Spectrum CSS tag group component", - "license": "Apache-2.0", - "author": "Adobe", - "homepage": "https://opensource.adobe.com/spectrum-css/taggroup", - "repository": { - "type": "git", - "url": "https://github.com/adobe/spectrum-css.git", - "directory": "components/taggroup" - }, - "bugs": { - "url": "https://github.com/adobe/spectrum-css/issues" - }, - "main": "dist/index.css", - "files": [ - "dist/*", - "CHANGELOG.md", - "package.json", - "stories/template.js", - "metadata/mods.md" - ], - "peerDependencies": { - "@spectrum-css/tag": ">=8", - "@spectrum-css/tokens": ">=13" - }, - "keywords": [ - "spectrum", - "css", - "design system", - "adobe" - ], - "publishConfig": { - "access": "public" - } + "name": "@spectrum-css/taggroup", + "version": "5.0.0", + "description": "The Spectrum CSS tag group component", + "license": "Apache-2.0", + "author": "Adobe", + "homepage": "https://opensource.adobe.com/spectrum-css/taggroup", + "repository": { + "type": "git", + "url": "https://github.com/adobe/spectrum-css.git", + "directory": "components/taggroup" + }, + "bugs": { + "url": "https://github.com/adobe/spectrum-css/issues" + }, + "main": "dist/index.css", + "files": [ + "dist/*", + "metadata/mods.md", + "stories/template.js" + ], + "peerDependencies": { + "@spectrum-css/tag": ">=8", + "@spectrum-css/tokens": ">=14.0.0-next.3" + }, + "keywords": [ + "adobe", + "css", + "design system", + "spectrum" + ], + "publishConfig": { + "access": "public" + } } diff --git a/components/textfield/index.css b/components/textfield/index.css index dfea49a1646..e36b0c868a8 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 df5f46b276d..cd7acf7f770 100644 --- a/components/textfield/package.json +++ b/components/textfield/package.json @@ -1,42 +1,40 @@ { - "name": "@spectrum-css/textfield", - "version": "7.0.0", - "description": "The Spectrum CSS textfield component", - "license": "Apache-2.0", - "author": "Adobe", - "homepage": "https://opensource.adobe.com/spectrum-css/textfield", - "repository": { - "type": "git", - "url": "https://github.com/adobe/spectrum-css.git", - "directory": "components/textfield" - }, - "bugs": { - "url": "https://github.com/adobe/spectrum-css/issues" - }, - "main": "dist/index.css", - "files": [ - "dist/*", - "CHANGELOG.md", - "package.json", - "stories/template.js", - "metadata/mods.md" - ], - "peerDependencies": { - "@spectrum-css/helptext": ">=4", - "@spectrum-css/tokens": ">=13" - }, - "peerDependenciesMeta": { - "@spectrum-css/helptext": { - "optional": true - } - }, - "keywords": [ - "spectrum", - "css", - "design system", - "adobe" - ], - "publishConfig": { - "access": "public" - } + "name": "@spectrum-css/textfield", + "version": "7.0.0", + "description": "The Spectrum CSS textfield component", + "license": "Apache-2.0", + "author": "Adobe", + "homepage": "https://opensource.adobe.com/spectrum-css/textfield", + "repository": { + "type": "git", + "url": "https://github.com/adobe/spectrum-css.git", + "directory": "components/textfield" + }, + "bugs": { + "url": "https://github.com/adobe/spectrum-css/issues" + }, + "main": "dist/index.css", + "files": [ + "dist/*", + "metadata/mods.md", + "stories/template.js" + ], + "peerDependencies": { + "@spectrum-css/helptext": ">=4", + "@spectrum-css/tokens": ">=14.0.0-next.3" + }, + "peerDependenciesMeta": { + "@spectrum-css/helptext": { + "optional": true + } + }, + "keywords": [ + "adobe", + "css", + "design system", + "spectrum" + ], + "publishConfig": { + "access": "public" + } } diff --git a/components/thumbnail/package.json b/components/thumbnail/package.json index e7abe12d075..fc6c084d653 100644 --- a/components/thumbnail/package.json +++ b/components/thumbnail/package.json @@ -1,37 +1,35 @@ { - "name": "@spectrum-css/thumbnail", - "version": "6.0.0", - "description": "The Spectrum CSS thumbnail component", - "license": "Apache-2.0", - "author": "Adobe", - "homepage": "https://opensource.adobe.com/spectrum-css/thumbnail", - "repository": { - "type": "git", - "url": "https://github.com/adobe/spectrum-css.git", - "directory": "components/thumbnail" - }, - "bugs": { - "url": "https://github.com/adobe/spectrum-css/issues" - }, - "main": "dist/index.css", - "files": [ - "dist/*", - "CHANGELOG.md", - "package.json", - "stories/template.js", - "metadata/mods.md" - ], - "peerDependencies": { - "@spectrum-css/opacitycheckerboard": ">=1", - "@spectrum-css/tokens": ">=13" - }, - "keywords": [ - "spectrum", - "css", - "design system", - "adobe" - ], - "publishConfig": { - "access": "public" - } + "name": "@spectrum-css/thumbnail", + "version": "6.0.0", + "description": "The Spectrum CSS thumbnail component", + "license": "Apache-2.0", + "author": "Adobe", + "homepage": "https://opensource.adobe.com/spectrum-css/thumbnail", + "repository": { + "type": "git", + "url": "https://github.com/adobe/spectrum-css.git", + "directory": "components/thumbnail" + }, + "bugs": { + "url": "https://github.com/adobe/spectrum-css/issues" + }, + "main": "dist/index.css", + "files": [ + "dist/*", + "metadata/mods.md", + "stories/template.js" + ], + "peerDependencies": { + "@spectrum-css/opacitycheckerboard": ">=1", + "@spectrum-css/tokens": ">=14.0.0-next.3" + }, + "keywords": [ + "adobe", + "css", + "design system", + "spectrum" + ], + "publishConfig": { + "access": "public" + } } diff --git a/components/toast/package.json b/components/toast/package.json index 2bc67a40b9f..d35df92ff7b 100644 --- a/components/toast/package.json +++ b/components/toast/package.json @@ -1,39 +1,37 @@ { - "name": "@spectrum-css/toast", - "version": "10.0.0", - "description": "The Spectrum CSS toast component", - "license": "Apache-2.0", - "author": "Adobe", - "homepage": "https://opensource.adobe.com/spectrum-css/toast", - "repository": { - "type": "git", - "url": "https://github.com/adobe/spectrum-css.git", - "directory": "components/toast" - }, - "bugs": { - "url": "https://github.com/adobe/spectrum-css/issues" - }, - "main": "dist/index.css", - "files": [ - "dist/*", - "CHANGELOG.md", - "package.json", - "stories/template.js", - "metadata/mods.md" - ], - "peerDependencies": { - "@spectrum-css/button": ">=11", - "@spectrum-css/closebutton": ">=4", - "@spectrum-css/icon": ">=4", - "@spectrum-css/tokens": ">=13" - }, - "keywords": [ - "spectrum", - "css", - "design system", - "adobe" - ], - "publishConfig": { - "access": "public" - } + "name": "@spectrum-css/toast", + "version": "10.0.0", + "description": "The Spectrum CSS toast component", + "license": "Apache-2.0", + "author": "Adobe", + "homepage": "https://opensource.adobe.com/spectrum-css/toast", + "repository": { + "type": "git", + "url": "https://github.com/adobe/spectrum-css.git", + "directory": "components/toast" + }, + "bugs": { + "url": "https://github.com/adobe/spectrum-css/issues" + }, + "main": "dist/index.css", + "files": [ + "dist/*", + "metadata/mods.md", + "stories/template.js" + ], + "peerDependencies": { + "@spectrum-css/button": ">=11", + "@spectrum-css/closebutton": ">=4", + "@spectrum-css/icon": ">=4", + "@spectrum-css/tokens": ">=14.0.0-next.3" + }, + "keywords": [ + "adobe", + "css", + "design system", + "spectrum" + ], + "publishConfig": { + "access": "public" + } } diff --git a/components/tooltip/package.json b/components/tooltip/package.json index 76a6dda63a7..78d0c8e52b1 100644 --- a/components/tooltip/package.json +++ b/components/tooltip/package.json @@ -1,40 +1,38 @@ { - "name": "@spectrum-css/tooltip", - "version": "6.0.0", - "description": "The Spectrum CSS tooltip component", - "license": "Apache-2.0", - "author": "Adobe", - "homepage": "https://opensource.adobe.com/spectrum-css/tooltip", - "repository": { - "type": "git", - "url": "https://github.com/adobe/spectrum-css.git", - "directory": "components/tooltip" - }, - "bugs": { - "url": "https://github.com/adobe/spectrum-css/issues" - }, - "main": "dist/index.css", - "files": [ - "dist/*", - "CHANGELOG.md", - "package.json", - "stories/template.js", - "metadata/mods.md" - ], - "peerDependencies": { - "@spectrum-css/icon": ">=4", - "@spectrum-css/tokens": ">=13" - }, - "devDependencies": { - "@spectrum-css/commons": "^10.0.0" - }, - "keywords": [ - "spectrum", - "css", - "design system", - "adobe" - ], - "publishConfig": { - "access": "public" - } + "name": "@spectrum-css/tooltip", + "version": "6.0.0", + "description": "The Spectrum CSS tooltip component", + "license": "Apache-2.0", + "author": "Adobe", + "homepage": "https://opensource.adobe.com/spectrum-css/tooltip", + "repository": { + "type": "git", + "url": "https://github.com/adobe/spectrum-css.git", + "directory": "components/tooltip" + }, + "bugs": { + "url": "https://github.com/adobe/spectrum-css/issues" + }, + "main": "dist/index.css", + "files": [ + "dist/*", + "metadata/mods.md", + "stories/template.js" + ], + "peerDependencies": { + "@spectrum-css/icon": ">=4", + "@spectrum-css/tokens": ">=14.0.0-next.3" + }, + "devDependencies": { + "@spectrum-css/commons": "^10.0.0" + }, + "keywords": [ + "adobe", + "css", + "design system", + "spectrum" + ], + "publishConfig": { + "access": "public" + } } diff --git a/components/tray/package.json b/components/tray/package.json index 103fc2174c4..ca327264d1c 100644 --- a/components/tray/package.json +++ b/components/tray/package.json @@ -1,49 +1,47 @@ { - "name": "@spectrum-css/tray", - "version": "3.0.0", - "description": "The Spectrum CSS tray component", - "license": "Apache-2.0", - "author": "Adobe", - "homepage": "https://opensource.adobe.com/spectrum-css/tray", - "repository": { - "type": "git", - "url": "https://github.com/adobe/spectrum-css.git", - "directory": "components/tray" - }, - "bugs": { - "url": "https://github.com/adobe/spectrum-css/issues" - }, - "main": "dist/index.css", - "files": [ - "dist/*", - "CHANGELOG.md", - "package.json", - "stories/template.js", - "metadata/mods.md" - ], - "peerDependencies": { - "@spectrum-css/button": ">=11", - "@spectrum-css/dialog": ">=9", - "@spectrum-css/divider": ">=2", - "@spectrum-css/icon": ">=4", - "@spectrum-css/modal": ">=4", - "@spectrum-css/tokens": ">=13" - }, - "peerDependenciesMeta": { - "@spectrum-css/dialog": { - "optional": true - }, - "@spectrum-css/divider": { - "optional": true - } - }, - "keywords": [ - "spectrum", - "css", - "design system", - "adobe" - ], - "publishConfig": { - "access": "public" - } + "name": "@spectrum-css/tray", + "version": "3.0.0", + "description": "The Spectrum CSS tray component", + "license": "Apache-2.0", + "author": "Adobe", + "homepage": "https://opensource.adobe.com/spectrum-css/tray", + "repository": { + "type": "git", + "url": "https://github.com/adobe/spectrum-css.git", + "directory": "components/tray" + }, + "bugs": { + "url": "https://github.com/adobe/spectrum-css/issues" + }, + "main": "dist/index.css", + "files": [ + "dist/*", + "metadata/mods.md", + "stories/template.js" + ], + "peerDependencies": { + "@spectrum-css/button": ">=11", + "@spectrum-css/dialog": ">=9", + "@spectrum-css/divider": ">=2", + "@spectrum-css/icon": ">=4", + "@spectrum-css/modal": ">=4", + "@spectrum-css/tokens": ">=14.0.0-next.3" + }, + "peerDependenciesMeta": { + "@spectrum-css/dialog": { + "optional": true + }, + "@spectrum-css/divider": { + "optional": true + } + }, + "keywords": [ + "adobe", + "css", + "design system", + "spectrum" + ], + "publishConfig": { + "access": "public" + } } diff --git a/components/treeview/index.css b/components/treeview/index.css index 26b23eef661..df216c004d2 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 58601898efc..8071c331873 100644 --- a/components/treeview/package.json +++ b/components/treeview/package.json @@ -1,43 +1,41 @@ { - "name": "@spectrum-css/treeview", - "version": "10.0.0", - "description": "The Spectrum CSS Tree view component", - "license": "Apache-2.0", - "author": "Adobe", - "homepage": "https://opensource.adobe.com/spectrum-css/treeview", - "repository": { - "type": "git", - "url": "https://github.com/adobe/spectrum-css.git", - "directory": "components/treeview" - }, - "bugs": { - "url": "https://github.com/adobe/spectrum-css/issues" - }, - "main": "dist/index.css", - "files": [ - "dist/*", - "CHANGELOG.md", - "package.json", - "stories/template.js", - "metadata/mods.md" - ], - "peerDependencies": { - "@spectrum-css/icon": ">=4", - "@spectrum-css/thumbnail": ">=5", - "@spectrum-css/tokens": ">=13" - }, - "peerDependenciesMeta": { - "@spectrum-css/thumbnail": { - "optional": true - } - }, - "keywords": [ - "spectrum", - "css", - "design system", - "adobe" - ], - "publishConfig": { - "access": "public" - } + "name": "@spectrum-css/treeview", + "version": "10.0.0", + "description": "The Spectrum CSS Tree view component", + "license": "Apache-2.0", + "author": "Adobe", + "homepage": "https://opensource.adobe.com/spectrum-css/treeview", + "repository": { + "type": "git", + "url": "https://github.com/adobe/spectrum-css.git", + "directory": "components/treeview" + }, + "bugs": { + "url": "https://github.com/adobe/spectrum-css/issues" + }, + "main": "dist/index.css", + "files": [ + "dist/*", + "metadata/mods.md", + "stories/template.js" + ], + "peerDependencies": { + "@spectrum-css/icon": ">=4", + "@spectrum-css/thumbnail": ">=5", + "@spectrum-css/tokens": ">=14.0.0-next.3" + }, + "peerDependenciesMeta": { + "@spectrum-css/thumbnail": { + "optional": true + } + }, + "keywords": [ + "adobe", + "css", + "design system", + "spectrum" + ], + "publishConfig": { + "access": "public" + } } diff --git a/components/typography/package.json b/components/typography/package.json index 7c742a2ecc2..1bf15afc6a7 100644 --- a/components/typography/package.json +++ b/components/typography/package.json @@ -1,36 +1,34 @@ { - "name": "@spectrum-css/typography", - "version": "6.0.0", - "description": "The Spectrum CSS typography component", - "license": "Apache-2.0", - "author": "Adobe", - "homepage": "https://opensource.adobe.com/spectrum-css/typography", - "repository": { - "type": "git", - "url": "https://github.com/adobe/spectrum-css.git", - "directory": "components/typography" - }, - "bugs": { - "url": "https://github.com/adobe/spectrum-css/issues" - }, - "main": "dist/index.css", - "files": [ - "dist/*", - "CHANGELOG.md", - "package.json", - "stories/template.js", - "metadata/mods.md" - ], - "peerDependencies": { - "@spectrum-css/tokens": ">=13" - }, - "keywords": [ - "spectrum", - "css", - "design system", - "adobe" - ], - "publishConfig": { - "access": "public" - } + "name": "@spectrum-css/typography", + "version": "6.0.0", + "description": "The Spectrum CSS typography component", + "license": "Apache-2.0", + "author": "Adobe", + "homepage": "https://opensource.adobe.com/spectrum-css/typography", + "repository": { + "type": "git", + "url": "https://github.com/adobe/spectrum-css.git", + "directory": "components/typography" + }, + "bugs": { + "url": "https://github.com/adobe/spectrum-css/issues" + }, + "main": "dist/index.css", + "files": [ + "dist/*", + "metadata/mods.md", + "stories/template.js" + ], + "peerDependencies": { + "@spectrum-css/tokens": ">=14.0.0-next.3" + }, + "keywords": [ + "adobe", + "css", + "design system", + "spectrum" + ], + "publishConfig": { + "access": "public" + } } diff --git a/components/underlay/package.json b/components/underlay/package.json index 0cb4dd42b0c..92cfd9816f5 100644 --- a/components/underlay/package.json +++ b/components/underlay/package.json @@ -1,39 +1,37 @@ { - "name": "@spectrum-css/underlay", - "version": "4.0.0", - "description": "The Spectrum CSS underlay component", - "license": "Apache-2.0", - "author": "Adobe", - "homepage": "https://opensource.adobe.com/spectrum-css/", - "repository": { - "type": "git", - "url": "https://github.com/adobe/spectrum-css.git", - "directory": "components/underlay" - }, - "bugs": { - "url": "https://github.com/adobe/spectrum-css/issues" - }, - "main": "dist/index.css", - "files": [ - "dist/*", - "CHANGELOG.md", - "package.json", - "stories/template.js", - "metadata/mods.md" - ], - "peerDependencies": { - "@spectrum-css/tokens": ">=13" - }, - "devDependencies": { - "@spectrum-css/commons": "^10.0.0" - }, - "keywords": [ - "spectrum", - "css", - "design system", - "adobe" - ], - "publishConfig": { - "access": "public" - } + "name": "@spectrum-css/underlay", + "version": "4.0.0", + "description": "The Spectrum CSS underlay component", + "license": "Apache-2.0", + "author": "Adobe", + "homepage": "https://opensource.adobe.com/spectrum-css/", + "repository": { + "type": "git", + "url": "https://github.com/adobe/spectrum-css.git", + "directory": "components/underlay" + }, + "bugs": { + "url": "https://github.com/adobe/spectrum-css/issues" + }, + "main": "dist/index.css", + "files": [ + "dist/*", + "metadata/mods.md", + "stories/template.js" + ], + "peerDependencies": { + "@spectrum-css/tokens": ">=14.0.0-next.3" + }, + "devDependencies": { + "@spectrum-css/commons": "^10.0.0" + }, + "keywords": [ + "adobe", + "css", + "design system", + "spectrum" + ], + "publishConfig": { + "access": "public" + } } diff --git a/components/well/package.json b/components/well/package.json index ab0f34da8eb..44c9ced67ce 100644 --- a/components/well/package.json +++ b/components/well/package.json @@ -1,36 +1,34 @@ { - "name": "@spectrum-css/well", - "version": "5.0.0", - "description": "The Spectrum CSS well component", - "license": "Apache-2.0", - "author": "Adobe", - "homepage": "https://opensource.adobe.com/spectrum-css/well", - "repository": { - "type": "git", - "url": "https://github.com/adobe/spectrum-css.git", - "directory": "components/well" - }, - "bugs": { - "url": "https://github.com/adobe/spectrum-css/issues" - }, - "main": "dist/index.css", - "files": [ - "dist/*", - "CHANGELOG.md", - "package.json", - "stories/template.js", - "metadata/mods.md" - ], - "peerDependencies": { - "@spectrum-css/tokens": ">=13" - }, - "keywords": [ - "spectrum", - "css", - "design system", - "adobe" - ], - "publishConfig": { - "access": "public" - } + "name": "@spectrum-css/well", + "version": "5.0.0", + "description": "The Spectrum CSS well component", + "license": "Apache-2.0", + "author": "Adobe", + "homepage": "https://opensource.adobe.com/spectrum-css/well", + "repository": { + "type": "git", + "url": "https://github.com/adobe/spectrum-css.git", + "directory": "components/well" + }, + "bugs": { + "url": "https://github.com/adobe/spectrum-css/issues" + }, + "main": "dist/index.css", + "files": [ + "dist/*", + "metadata/mods.md", + "stories/template.js" + ], + "peerDependencies": { + "@spectrum-css/tokens": ">=14.0.0-next.3" + }, + "keywords": [ + "adobe", + "css", + "design system", + "spectrum" + ], + "publishConfig": { + "access": "public" + } } diff --git a/tokens/CHANGELOG.md b/tokens/CHANGELOG.md index 9727bd89e4b..d9246012d72 100644 --- a/tokens/CHANGELOG.md +++ b/tokens/CHANGELOG.md @@ -8,7 +8,7 @@ See [Conventional Commits](https://conventionalcommits.org) for commit guideline 🗓 2024-04-18 • 📝 [Commits](https://github.com/adobe/spectrum-css/compare/@spectrum-css/tokens@13.2.0...@spectrum-css/tokens@14.0.0) -\*feat!: postcss config build and script; remove gulp (#2466)([b0f337b](https://github.com/adobe/spectrum-css/commit/b0f337b)), closes[#2466](https://github.com/adobe/spectrum-css/issues/2466) +* feat!: postcss config build and script; remove gulp (#2466)([b0f337b](https://github.com/adobe/spectrum-css/commit/b0f337b)), closes[#2466](https://github.com/adobe/spectrum-css/issues/2466) ### 🛑 BREAKING CHANGES 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..6d27d4811ff 100644 --- a/tokens/dist/css/dark-vars.css +++ b/tokens/dist/css/dark-vars.css @@ -1,42 +1,33 @@ .spectrum--dark{ - --spectrum-overlay-opacity:0.5; - --spectrum-drop-shadow-color-rgb:0, 0, 0; - --spectrum-drop-shadow-color-opacity:0.5; - --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-overlay-opacity:0.6; + --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 +56,627 @@ --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-drop-shadow-color-100-rgb:0, 0, 0; + --spectrum-drop-shadow-color-100-opacity:0.36; + --spectrum-drop-shadow-color-100:rgba(var(--spectrum-drop-shadow-color-100-rgb), var(--spectrum-drop-shadow-color-100-opacity)); + --spectrum-drop-shadow-color-200-rgb:0, 0, 0; + --spectrum-drop-shadow-color-200-opacity:0.48; + --spectrum-drop-shadow-color-200:rgba(var(--spectrum-drop-shadow-color-200-rgb), var(--spectrum-drop-shadow-color-200-opacity)); --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..f626959aa65 100644 --- a/tokens/dist/css/global-vars.css +++ b/tokens/dist/css/global-vars.css @@ -3,12 +3,23 @@ --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-drop-shadow-color:var(--spectrum-drop-shadow-color-100); --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 +32,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); @@ -43,6 +54,10 @@ --spectrum-negative-border-color-focus-hover:var(--spectrum-negative-border-color-down); --spectrum-negative-border-color-focus:var(--spectrum-negative-color-1000); --spectrum-negative-border-color-key-focus:var(--spectrum-negative-color-1000); + --spectrum-title-color:var(--spectrum-gray-900); + --spectrum-drop-shadow-emphasized-default-color:var(--spectrum-drop-shadow-color-100); + --spectrum-drop-shadow-emphasized-hover-color:var(--spectrum-drop-shadow-color-200); + --spectrum-drop-shadow-elevated-color:var(--spectrum-drop-shadow-color-200); --spectrum-swatch-border-color:var(--spectrum-gray-900); --spectrum-swatch-border-opacity:0.51; --spectrum-swatch-disabled-icon-border-color:var(--spectrum-black); @@ -52,11 +67,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-color:var(--spectrum-drop-shadow-elevated-color); + --spectrum-color-loupe-drop-shadow-y:var(--spectrum-drop-shadow-elevated-y); + --spectrum-color-loupe-drop-shadow-blur:var(--spectrum-drop-shadow-elevated-blur); --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,68 +100,93 @@ --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; --spectrum-action-button-edge-to-hold-icon-extra-small:3px; --spectrum-action-button-edge-to-hold-icon-small:3px; --spectrum-button-minimum-width-multiplier:2.25; @@ -166,15 +208,24 @@ --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; --spectrum-combo-box-minimum-width-multiplier:2.5; --spectrum-combo-box-quiet-minimum-width-multiplier:2; - --spectrum-combo-box-visual-to-field-button-quiet:0px; + --spectrum-combo-box-visual-to-field-button-small:var(--spectrum-combo-box-visual-to-field-button); + --spectrum-combo-box-visual-to-field-button-medium:var(--spectrum-combo-box-visual-to-field-button); + --spectrum-combo-box-visual-to-field-button-large:var(--spectrum-combo-box-visual-to-field-button); + --spectrum-combo-box-visual-to-field-button-extra-large:var(--spectrum-combo-box-visual-to-field-button); + --spectrum-combo-box-visual-to-field-button-quiet:var(--spectrum-combo-box-visual-to-field-button); --spectrum-alert-dialog-minimum-width:288px; --spectrum-alert-dialog-maximum-width:480px; + --spectrum-alert-dialog-title-size:var(--spectrum-alert-dialog-title-font-size); + --spectrum-alert-dialog-description-size:var(--spectrum-alert-dialog-description-font-size); --spectrum-contextual-help-minimum-width:268px; --spectrum-breadcrumbs-height:var(--spectrum-component-height-300); --spectrum-breadcrumbs-height-compact:var(--spectrum-component-height-200); @@ -186,21 +237,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; @@ -211,6 +260,9 @@ --spectrum-drop-zone-title-size:var(--spectrum-illustrated-message-title-size); --spectrum-drop-zone-cjk-title-size:var(--spectrum-illustrated-message-cjk-title-size); --spectrum-drop-zone-body-size:var(--spectrum-illustrated-message-body-size); + --spectrum-coach-mark-title-size:var(--spectrum-coach-mark-title-font-size); + --spectrum-coach-mark-body-size:var(--spectrum-coach-mark-body-font-size); + --spectrum-coach-mark-pagination-body-size:var(--spectrum-coach-mark-pagination-body-font-size); --spectrum-accordion-top-to-text-compact-small:2px; --spectrum-accordion-top-to-text-compact-medium:4px; --spectrum-accordion-disclosure-indicator-to-text:0px; @@ -250,11 +302,97 @@ --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-combo-box-visual-to-field-button:0px; + --spectrum-in-field-button-edge-to-fill-medium:6px; + --spectrum-in-field-button-edge-to-fill-large:8px; + --spectrum-standard-dialog-maximum-width-small:400px; + --spectrum-standard-dialog-minimum-width:288px; + --spectrum-standard-dialog-maximum-width-medium:480px; + --spectrum-standard-dialog-maximum-width-large:640px; + --spectrum-status-light-text-to-visual-75:var(--spectrum-text-to-visual-75); + --spectrum-status-light-text-to-visual-100:var(--spectrum-text-to-visual-100); + --spectrum-status-light-text-to-visual-200:var(--spectrum-text-to-visual-200); + --spectrum-status-light-text-to-visual-300:var(--spectrum-text-to-visual-300); + --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:var(--spectrum-drop-shadow-x-100); + --spectrum-drop-shadow-y:var(--spectrum-drop-shadow-y-100); + --spectrum-drop-shadow-blur:var(--spectrum-drop-shadow-blur-100); --spectrum-android-elevation:2dp; --spectrum-spacing-50:2px; --spectrum-spacing-75:4px; @@ -270,6 +408,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 +416,65 @@ --spectrum-field-edge-to-border-quiet:0px; --spectrum-field-edge-to-alert-icon-quiet:0px; --spectrum-field-edge-to-validation-icon-quiet:0px; + --spectrum-field-width-small:var(--spectrum-field-default-width-small); + --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-field-width-medium:var(--spectrum-field-default-width-medium); + --spectrum-field-width-large:var(--spectrum-field-default-width-large); + --spectrum-field-width-extra-large:var(--spectrum-field-default-width-extra-large); + --spectrum-drop-shadow-x-100:0px; + --spectrum-drop-shadow-x-200:0px; + --spectrum-drop-shadow-y-100:1px; + --spectrum-drop-shadow-y-200:2px; + --spectrum-drop-shadow-blur-100:6px; + --spectrum-drop-shadow-blur-200:8px; + --spectrum-drop-shadow-emphasized-default-x:var(--spectrum-drop-shadow-x-100); + --spectrum-drop-shadow-emphasized-default-y:var(--spectrum-drop-shadow-y-100); + --spectrum-drop-shadow-emphasized-default-blur:var(--spectrum-drop-shadow-blur-100); + --spectrum-drop-shadow-emphasized-hover-x:var(--spectrum-drop-shadow-x-200); + --spectrum-drop-shadow-emphasized-hover-y:var(--spectrum-drop-shadow-y-200); + --spectrum-drop-shadow-emphasized-hover-blur:var(--spectrum-drop-shadow-blur-200); + --spectrum-drop-shadow-elevated-x:var(--spectrum-drop-shadow-x-200); + --spectrum-drop-shadow-elevated-y:var(--spectrum-drop-shadow-y-200); + --spectrum-drop-shadow-elevated-blur:var(--spectrum-drop-shadow-blur-200); + --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 +489,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 +505,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 +521,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 +537,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 +569,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 +605,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..1e8aed8ef77 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,29 +35,27 @@ --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-status-light-dot-size-medium:10px; - --spectrum-status-light-dot-size-large:12px; - --spectrum-status-light-dot-size-extra-large:12px; - --spectrum-status-light-top-to-dot-small:11px; - --spectrum-status-light-top-to-dot-medium:15px; - --spectrum-status-light-top-to-dot-large:19px; - --spectrum-status-light-top-to-dot-extra-large:24px; + --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-small:10px; + --spectrum-status-light-dot-size-medium:12px; + --spectrum-status-light-dot-size-large:14px; + --spectrum-status-light-dot-size-extra-large:16px; + --spectrum-status-light-top-to-dot-small:10px; + --spectrum-status-light-top-to-dot-medium:14px; + --spectrum-status-light-top-to-dot-large:18px; + --spectrum-status-light-top-to-dot-extra-large:22px; --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 +63,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 +100,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; @@ -134,10 +126,6 @@ --spectrum-picker-visual-to-disclosure-icon-extra-large:13px; --spectrum-text-area-minimum-width:140px; --spectrum-text-area-minimum-height:70px; - --spectrum-combo-box-visual-to-field-button-small:9px; - --spectrum-combo-box-visual-to-field-button-medium:10px; - --spectrum-combo-box-visual-to-field-button-large:11px; - --spectrum-combo-box-visual-to-field-button-extra-large:13px; --spectrum-thumbnail-size-50:20px; --spectrum-thumbnail-size-75:22px; --spectrum-thumbnail-size-100:26px; @@ -150,9 +138,8 @@ --spectrum-thumbnail-size-800:55px; --spectrum-thumbnail-size-900:62px; --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; @@ -181,7 +168,7 @@ --spectrum-avatar-size-700:50px; --spectrum-alert-banner-minimum-height:64px; --spectrum-alert-banner-width:680px; - --spectrum-alert-banner-top-to-workflow-icon:21px; + --spectrum-alert-banner-top-to-workflow-icon:20px; --spectrum-alert-banner-top-to-text:21px; --spectrum-alert-banner-bottom-to-text:22px; --spectrum-rating-indicator-width:22px; @@ -204,9 +191,6 @@ --spectrum-coach-mark-pagination-text-to-bottom-edge:22px; --spectrum-coach-mark-media-height:162px; --spectrum-coach-mark-media-minimum-height:121px; - --spectrum-coach-mark-title-size:var(--spectrum-heading-size-xxs); - --spectrum-coach-mark-body-size:var(--spectrum-body-size-xs); - --spectrum-coach-mark-pagination-body-size:var(--spectrum-body-size-xs); --spectrum-accordion-top-to-text-regular-small:7px; --spectrum-accordion-small-top-to-text-spacious:12px; --spectrum-accordion-top-to-text-regular-medium:9px; @@ -348,14 +332,98 @@ --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-alert-banner-top-to-alert-icon:29px; + --spectrum-accordion-top-to-text-spacious-small:12px; + --spectrum-field-default-width-small:240px; + --spectrum-field-default-width-medium:256px; + --spectrum-field-default-width-large:272px; + --spectrum-field-default-width-extra-large:288px; + --spectrum-tag-minimum-width-small:25px; + --spectrum-tag-minimum-width-medium:34px; + --spectrum-tag-minimum-width-large:42px; + --spectrum-in-field-button-edge-to-fill-small:5px; + --spectrum-in-field-button-edge-to-fill-extra-large:10px; + --spectrum-in-field-progress-circle-edge-to-fill:2px; + --spectrum-in-field-progress-circle-size-75:18px; + --spectrum-in-field-progress-circle-size-100:24px; + --spectrum-in-field-progress-circle-size-200:28px; + --spectrum-in-field-progress-circle-size-300:30px; + --spectrum-alert-dialog-description-font-size:var(--spectrum-body-size-s); + --spectrum-alert-dialog-title-font-size:var(--spectrum-title-size-xl); + --spectrum-coach-mark-body-font-size:var(--spectrum-body-size-s); + --spectrum-coach-mark-pagination-body-font-size:var(--spectrum-body-size-xs); + --spectrum-coach-mark-title-font-size:var(--spectrum-title-size-s); + --spectrum-standard-dialog-title-font-size:var(--spectrum-title-size-xl); + --spectrum-standard-dialog-body-font-size:var(--spectrum-body-size-s); + --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; @@ -371,10 +439,10 @@ --spectrum-component-pill-edge-to-visual-100:17px; --spectrum-component-pill-edge-to-visual-200:22px; --spectrum-component-pill-edge-to-visual-300:27px; - --spectrum-component-pill-edge-to-visual-only-75:5px; - --spectrum-component-pill-edge-to-visual-only-100:9px; - --spectrum-component-pill-edge-to-visual-only-200:13px; - --spectrum-component-pill-edge-to-visual-only-300:16px; + --spectrum-component-pill-edge-to-visual-only-75:6px; + --spectrum-component-pill-edge-to-visual-only-100:8px; + --spectrum-component-pill-edge-to-visual-only-200:11px; + --spectrum-component-pill-edge-to-visual-only-300:15px; --spectrum-component-pill-edge-to-text-75:15px; --spectrum-component-pill-edge-to-text-100:20px; --spectrum-component-pill-edge-to-text-200:25px; @@ -384,21 +452,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; @@ -433,10 +501,10 @@ --spectrum-field-top-to-validation-icon-medium:13px; --spectrum-field-top-to-validation-icon-large:17px; --spectrum-field-top-to-validation-icon-extra-large:22px; - --spectrum-field-top-to-progress-circle-small:7px; - --spectrum-field-top-to-progress-circle-medium:12px; - --spectrum-field-top-to-progress-circle-large:17px; - --spectrum-field-top-to-progress-circle-extra-large:22px; + --spectrum-field-top-to-progress-circle-small:6px; + --spectrum-field-top-to-progress-circle-medium:8px; + --spectrum-field-top-to-progress-circle-large:11px; + --spectrum-field-top-to-progress-circle-extra-large:15px; --spectrum-field-edge-to-alert-icon-small:11px; --spectrum-field-edge-to-alert-icon-medium:15px; --spectrum-field-edge-to-alert-icon-large:19px; @@ -453,16 +521,12 @@ --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-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 +536,10 @@ --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-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..577b21a248d 100644 --- a/tokens/dist/css/light-vars.css +++ b/tokens/dist/css/light-vars.css @@ -1,34 +1,25 @@ .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); @@ -65,393 +56,627 @@ --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-drop-shadow-color-100-rgb:0, 0, 0; + --spectrum-drop-shadow-color-100-opacity:0.12; + --spectrum-drop-shadow-color-100:rgba(var(--spectrum-drop-shadow-color-100-rgb), var(--spectrum-drop-shadow-color-100-opacity)); + --spectrum-drop-shadow-color-200-rgb:0, 0, 0; + --spectrum-drop-shadow-color-200-opacity:0.16; + --spectrum-drop-shadow-color-200:rgba(var(--spectrum-drop-shadow-color-200-rgb), var(--spectrum-drop-shadow-color-200-opacity)); --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..36c3957e51d 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,30 +34,28 @@ --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-status-light-dot-size-medium:8px; - --spectrum-status-light-dot-size-large:10px; - --spectrum-status-light-dot-size-extra-large:10px; + --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-small:8px; + --spectrum-status-light-dot-size-medium:10px; + --spectrum-status-light-dot-size-large:12px; + --spectrum-status-light-dot-size-extra-large:14px; --spectrum-status-light-top-to-dot-small:8px; - --spectrum-status-light-top-to-dot-medium:12px; - --spectrum-status-light-top-to-dot-large:15px; - --spectrum-status-light-top-to-dot-extra-large:19px; + --spectrum-status-light-top-to-dot-medium:11px; + --spectrum-status-light-top-to-dot-large:14px; + --spectrum-status-light-top-to-dot-extra-large:17px; --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 +63,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 +100,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; @@ -134,10 +126,6 @@ --spectrum-picker-visual-to-disclosure-icon-extra-large:10px; --spectrum-text-area-minimum-width:112px; --spectrum-text-area-minimum-height:56px; - --spectrum-combo-box-visual-to-field-button-small:7px; - --spectrum-combo-box-visual-to-field-button-medium:8px; - --spectrum-combo-box-visual-to-field-button-large:9px; - --spectrum-combo-box-visual-to-field-button-extra-large:10px; --spectrum-thumbnail-size-50:16px; --spectrum-thumbnail-size-75:18px; --spectrum-thumbnail-size-100:20px; @@ -150,9 +138,8 @@ --spectrum-thumbnail-size-800:44px; --spectrum-thumbnail-size-900:50px; --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 +166,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:18px; + --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; @@ -204,9 +191,6 @@ --spectrum-coach-mark-pagination-text-to-bottom-edge:33px; --spectrum-coach-mark-media-height:222px; --spectrum-coach-mark-media-minimum-height:166px; - --spectrum-coach-mark-title-size:var(--spectrum-heading-size-xs); - --spectrum-coach-mark-body-size:var(--spectrum-body-size-s); - --spectrum-coach-mark-pagination-body-size:var(--spectrum-body-size-s); --spectrum-accordion-top-to-text-regular-small:5px; --spectrum-accordion-small-top-to-text-spacious:9px; --spectrum-accordion-top-to-text-regular-medium:8px; @@ -348,14 +332,98 @@ --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-alert-banner-top-to-alert-icon:37px; + --spectrum-accordion-top-to-text-spacious-small:9px; + --spectrum-field-default-width-small:192px; + --spectrum-field-default-width-medium:208px; + --spectrum-field-default-width-large:224px; + --spectrum-field-default-width-extra-large:240px; + --spectrum-tag-minimum-width-small:21px; + --spectrum-tag-minimum-width-medium:27px; + --spectrum-tag-minimum-width-large:33px; + --spectrum-in-field-button-edge-to-fill-small:4px; + --spectrum-in-field-button-edge-to-fill-extra-large:8px; + --spectrum-in-field-progress-circle-edge-to-fill:1px; + --spectrum-in-field-progress-circle-size-75:16px; + --spectrum-in-field-progress-circle-size-100:20px; + --spectrum-in-field-progress-circle-size-200:22px; + --spectrum-in-field-progress-circle-size-300:26px; + --spectrum-alert-dialog-description-font-size:var(--spectrum-body-size-m); + --spectrum-alert-dialog-title-font-size:var(--spectrum-title-size-xxl); + --spectrum-coach-mark-body-font-size:var(--spectrum-body-size-m); + --spectrum-coach-mark-pagination-body-font-size:var(--spectrum-body-size-s); + --spectrum-coach-mark-title-font-size:var(--spectrum-title-size-m); + --spectrum-standard-dialog-title-font-size:var(--spectrum-title-size-xxl); + --spectrum-standard-dialog-body-font-size:var(--spectrum-body-size-m); + --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; @@ -372,9 +440,9 @@ --spectrum-component-pill-edge-to-visual-200:18px; --spectrum-component-pill-edge-to-visual-300:21px; --spectrum-component-pill-edge-to-visual-only-75:4px; - --spectrum-component-pill-edge-to-visual-only-100:7px; - --spectrum-component-pill-edge-to-visual-only-200:10px; - --spectrum-component-pill-edge-to-visual-only-300:13px; + --spectrum-component-pill-edge-to-visual-only-100:6px; + --spectrum-component-pill-edge-to-visual-only-200:9px; + --spectrum-component-pill-edge-to-visual-only-300:11px; --spectrum-component-pill-edge-to-text-75:12px; --spectrum-component-pill-edge-to-text-100:16px; --spectrum-component-pill-edge-to-text-200:20px; @@ -386,9 +454,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 +464,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; @@ -434,9 +502,9 @@ --spectrum-field-top-to-validation-icon-large:14px; --spectrum-field-top-to-validation-icon-extra-large:17px; --spectrum-field-top-to-progress-circle-small:4px; - --spectrum-field-top-to-progress-circle-medium:8px; - --spectrum-field-top-to-progress-circle-large:12px; - --spectrum-field-top-to-progress-circle-extra-large:16px; + --spectrum-field-top-to-progress-circle-medium:6px; + --spectrum-field-top-to-progress-circle-large:9px; + --spectrum-field-top-to-progress-circle-extra-large:11px; --spectrum-field-edge-to-alert-icon-small:9px; --spectrum-field-edge-to-alert-icon-medium:12px; --spectrum-field-edge-to-alert-icon-large:15px; @@ -453,16 +521,12 @@ --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-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 +536,10 @@ --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-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..326c6383c9b 100644 --- a/tokens/dist/index.css +++ b/tokens/dist/index.css @@ -1,42 +1,33 @@ .spectrum--dark{ - --spectrum-overlay-opacity:0.5; - --spectrum-drop-shadow-color-rgb:0, 0, 0; - --spectrum-drop-shadow-color-opacity:0.5; - --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-overlay-opacity:0.6; + --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 +56,627 @@ --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-drop-shadow-color-100-rgb:0, 0, 0; + --spectrum-drop-shadow-color-100-opacity:0.36; + --spectrum-drop-shadow-color-100:rgba(var(--spectrum-drop-shadow-color-100-rgb), var(--spectrum-drop-shadow-color-100-opacity)); + --spectrum-drop-shadow-color-200-rgb:0, 0, 0; + --spectrum-drop-shadow-color-200-opacity:0.48; + --spectrum-drop-shadow-color-200:rgba(var(--spectrum-drop-shadow-color-200-rgb), var(--spectrum-drop-shadow-color-200-opacity)); --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 +736,28 @@ --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-drop-shadow-color:var(--spectrum-drop-shadow-color-100); --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 +770,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); @@ -1069,6 +792,10 @@ --spectrum-negative-border-color-focus-hover:var(--spectrum-negative-border-color-down); --spectrum-negative-border-color-focus:var(--spectrum-negative-color-1000); --spectrum-negative-border-color-key-focus:var(--spectrum-negative-color-1000); + --spectrum-title-color:var(--spectrum-gray-900); + --spectrum-drop-shadow-emphasized-default-color:var(--spectrum-drop-shadow-color-100); + --spectrum-drop-shadow-emphasized-hover-color:var(--spectrum-drop-shadow-color-200); + --spectrum-drop-shadow-elevated-color:var(--spectrum-drop-shadow-color-200); --spectrum-swatch-border-color:var(--spectrum-gray-900); --spectrum-swatch-border-opacity:0.51; --spectrum-swatch-disabled-icon-border-color:var(--spectrum-black); @@ -1078,11 +805,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-color:var(--spectrum-drop-shadow-elevated-color); + --spectrum-color-loupe-drop-shadow-y:var(--spectrum-drop-shadow-elevated-y); + --spectrum-color-loupe-drop-shadow-blur:var(--spectrum-drop-shadow-elevated-blur); --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,68 +838,93 @@ --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; --spectrum-action-button-edge-to-hold-icon-extra-small:3px; --spectrum-action-button-edge-to-hold-icon-small:3px; --spectrum-button-minimum-width-multiplier:2.25; @@ -1192,15 +946,24 @@ --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; --spectrum-combo-box-minimum-width-multiplier:2.5; --spectrum-combo-box-quiet-minimum-width-multiplier:2; - --spectrum-combo-box-visual-to-field-button-quiet:0px; + --spectrum-combo-box-visual-to-field-button-small:var(--spectrum-combo-box-visual-to-field-button); + --spectrum-combo-box-visual-to-field-button-medium:var(--spectrum-combo-box-visual-to-field-button); + --spectrum-combo-box-visual-to-field-button-large:var(--spectrum-combo-box-visual-to-field-button); + --spectrum-combo-box-visual-to-field-button-extra-large:var(--spectrum-combo-box-visual-to-field-button); + --spectrum-combo-box-visual-to-field-button-quiet:var(--spectrum-combo-box-visual-to-field-button); --spectrum-alert-dialog-minimum-width:288px; --spectrum-alert-dialog-maximum-width:480px; + --spectrum-alert-dialog-title-size:var(--spectrum-alert-dialog-title-font-size); + --spectrum-alert-dialog-description-size:var(--spectrum-alert-dialog-description-font-size); --spectrum-contextual-help-minimum-width:268px; --spectrum-breadcrumbs-height:var(--spectrum-component-height-300); --spectrum-breadcrumbs-height-compact:var(--spectrum-component-height-200); @@ -1212,21 +975,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; @@ -1237,6 +998,9 @@ --spectrum-drop-zone-title-size:var(--spectrum-illustrated-message-title-size); --spectrum-drop-zone-cjk-title-size:var(--spectrum-illustrated-message-cjk-title-size); --spectrum-drop-zone-body-size:var(--spectrum-illustrated-message-body-size); + --spectrum-coach-mark-title-size:var(--spectrum-coach-mark-title-font-size); + --spectrum-coach-mark-body-size:var(--spectrum-coach-mark-body-font-size); + --spectrum-coach-mark-pagination-body-size:var(--spectrum-coach-mark-pagination-body-font-size); --spectrum-accordion-top-to-text-compact-small:2px; --spectrum-accordion-top-to-text-compact-medium:4px; --spectrum-accordion-disclosure-indicator-to-text:0px; @@ -1276,11 +1040,97 @@ --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-combo-box-visual-to-field-button:0px; + --spectrum-in-field-button-edge-to-fill-medium:6px; + --spectrum-in-field-button-edge-to-fill-large:8px; + --spectrum-standard-dialog-maximum-width-small:400px; + --spectrum-standard-dialog-minimum-width:288px; + --spectrum-standard-dialog-maximum-width-medium:480px; + --spectrum-standard-dialog-maximum-width-large:640px; + --spectrum-status-light-text-to-visual-75:var(--spectrum-text-to-visual-75); + --spectrum-status-light-text-to-visual-100:var(--spectrum-text-to-visual-100); + --spectrum-status-light-text-to-visual-200:var(--spectrum-text-to-visual-200); + --spectrum-status-light-text-to-visual-300:var(--spectrum-text-to-visual-300); + --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:var(--spectrum-drop-shadow-x-100); + --spectrum-drop-shadow-y:var(--spectrum-drop-shadow-y-100); + --spectrum-drop-shadow-blur:var(--spectrum-drop-shadow-blur-100); --spectrum-android-elevation:2dp; --spectrum-spacing-50:2px; --spectrum-spacing-75:4px; @@ -1296,6 +1146,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 +1154,65 @@ --spectrum-field-edge-to-border-quiet:0px; --spectrum-field-edge-to-alert-icon-quiet:0px; --spectrum-field-edge-to-validation-icon-quiet:0px; + --spectrum-field-width-small:var(--spectrum-field-default-width-small); + --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-field-width-medium:var(--spectrum-field-default-width-medium); + --spectrum-field-width-large:var(--spectrum-field-default-width-large); + --spectrum-field-width-extra-large:var(--spectrum-field-default-width-extra-large); + --spectrum-drop-shadow-x-100:0px; + --spectrum-drop-shadow-x-200:0px; + --spectrum-drop-shadow-y-100:1px; + --spectrum-drop-shadow-y-200:2px; + --spectrum-drop-shadow-blur-100:6px; + --spectrum-drop-shadow-blur-200:8px; + --spectrum-drop-shadow-emphasized-default-x:var(--spectrum-drop-shadow-x-100); + --spectrum-drop-shadow-emphasized-default-y:var(--spectrum-drop-shadow-y-100); + --spectrum-drop-shadow-emphasized-default-blur:var(--spectrum-drop-shadow-blur-100); + --spectrum-drop-shadow-emphasized-hover-x:var(--spectrum-drop-shadow-x-200); + --spectrum-drop-shadow-emphasized-hover-y:var(--spectrum-drop-shadow-y-200); + --spectrum-drop-shadow-emphasized-hover-blur:var(--spectrum-drop-shadow-blur-200); + --spectrum-drop-shadow-elevated-x:var(--spectrum-drop-shadow-x-200); + --spectrum-drop-shadow-elevated-y:var(--spectrum-drop-shadow-y-200); + --spectrum-drop-shadow-elevated-blur:var(--spectrum-drop-shadow-blur-200); + --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 +1227,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 +1243,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 +1259,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 +1275,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 +1307,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 +1343,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); @@ -1601,130 +1526,72 @@ --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-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,29 +1600,27 @@ --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-status-light-dot-size-medium:10px; - --spectrum-status-light-dot-size-large:12px; - --spectrum-status-light-dot-size-extra-large:12px; - --spectrum-status-light-top-to-dot-small:11px; - --spectrum-status-light-top-to-dot-medium:15px; - --spectrum-status-light-top-to-dot-large:19px; - --spectrum-status-light-top-to-dot-extra-large:24px; + --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-small:10px; + --spectrum-status-light-dot-size-medium:12px; + --spectrum-status-light-dot-size-large:14px; + --spectrum-status-light-dot-size-extra-large:16px; + --spectrum-status-light-top-to-dot-small:10px; + --spectrum-status-light-top-to-dot-medium:14px; + --spectrum-status-light-top-to-dot-large:18px; + --spectrum-status-light-top-to-dot-extra-large:22px; --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 +1628,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 +1665,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; @@ -1810,10 +1691,6 @@ --spectrum-picker-visual-to-disclosure-icon-extra-large:13px; --spectrum-text-area-minimum-width:140px; --spectrum-text-area-minimum-height:70px; - --spectrum-combo-box-visual-to-field-button-small:9px; - --spectrum-combo-box-visual-to-field-button-medium:10px; - --spectrum-combo-box-visual-to-field-button-large:11px; - --spectrum-combo-box-visual-to-field-button-extra-large:13px; --spectrum-thumbnail-size-50:20px; --spectrum-thumbnail-size-75:22px; --spectrum-thumbnail-size-100:26px; @@ -1826,9 +1703,8 @@ --spectrum-thumbnail-size-800:55px; --spectrum-thumbnail-size-900:62px; --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; @@ -1857,7 +1733,7 @@ --spectrum-avatar-size-700:50px; --spectrum-alert-banner-minimum-height:64px; --spectrum-alert-banner-width:680px; - --spectrum-alert-banner-top-to-workflow-icon:21px; + --spectrum-alert-banner-top-to-workflow-icon:20px; --spectrum-alert-banner-top-to-text:21px; --spectrum-alert-banner-bottom-to-text:22px; --spectrum-rating-indicator-width:22px; @@ -1880,9 +1756,6 @@ --spectrum-coach-mark-pagination-text-to-bottom-edge:22px; --spectrum-coach-mark-media-height:162px; --spectrum-coach-mark-media-minimum-height:121px; - --spectrum-coach-mark-title-size:var(--spectrum-heading-size-xxs); - --spectrum-coach-mark-body-size:var(--spectrum-body-size-xs); - --spectrum-coach-mark-pagination-body-size:var(--spectrum-body-size-xs); --spectrum-accordion-top-to-text-regular-small:7px; --spectrum-accordion-small-top-to-text-spacious:12px; --spectrum-accordion-top-to-text-regular-medium:9px; @@ -2024,14 +1897,98 @@ --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-alert-banner-top-to-alert-icon:29px; + --spectrum-accordion-top-to-text-spacious-small:12px; + --spectrum-field-default-width-small:240px; + --spectrum-field-default-width-medium:256px; + --spectrum-field-default-width-large:272px; + --spectrum-field-default-width-extra-large:288px; + --spectrum-tag-minimum-width-small:25px; + --spectrum-tag-minimum-width-medium:34px; + --spectrum-tag-minimum-width-large:42px; + --spectrum-in-field-button-edge-to-fill-small:5px; + --spectrum-in-field-button-edge-to-fill-extra-large:10px; + --spectrum-in-field-progress-circle-edge-to-fill:2px; + --spectrum-in-field-progress-circle-size-75:18px; + --spectrum-in-field-progress-circle-size-100:24px; + --spectrum-in-field-progress-circle-size-200:28px; + --spectrum-in-field-progress-circle-size-300:30px; + --spectrum-alert-dialog-description-font-size:var(--spectrum-body-size-s); + --spectrum-alert-dialog-title-font-size:var(--spectrum-title-size-xl); + --spectrum-coach-mark-body-font-size:var(--spectrum-body-size-s); + --spectrum-coach-mark-pagination-body-font-size:var(--spectrum-body-size-xs); + --spectrum-coach-mark-title-font-size:var(--spectrum-title-size-s); + --spectrum-standard-dialog-title-font-size:var(--spectrum-title-size-xl); + --spectrum-standard-dialog-body-font-size:var(--spectrum-body-size-s); + --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; @@ -2047,10 +2004,10 @@ --spectrum-component-pill-edge-to-visual-100:17px; --spectrum-component-pill-edge-to-visual-200:22px; --spectrum-component-pill-edge-to-visual-300:27px; - --spectrum-component-pill-edge-to-visual-only-75:5px; - --spectrum-component-pill-edge-to-visual-only-100:9px; - --spectrum-component-pill-edge-to-visual-only-200:13px; - --spectrum-component-pill-edge-to-visual-only-300:16px; + --spectrum-component-pill-edge-to-visual-only-75:6px; + --spectrum-component-pill-edge-to-visual-only-100:8px; + --spectrum-component-pill-edge-to-visual-only-200:11px; + --spectrum-component-pill-edge-to-visual-only-300:15px; --spectrum-component-pill-edge-to-text-75:15px; --spectrum-component-pill-edge-to-text-100:20px; --spectrum-component-pill-edge-to-text-200:25px; @@ -2060,21 +2017,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; @@ -2109,10 +2066,10 @@ --spectrum-field-top-to-validation-icon-medium:13px; --spectrum-field-top-to-validation-icon-large:17px; --spectrum-field-top-to-validation-icon-extra-large:22px; - --spectrum-field-top-to-progress-circle-small:7px; - --spectrum-field-top-to-progress-circle-medium:12px; - --spectrum-field-top-to-progress-circle-large:17px; - --spectrum-field-top-to-progress-circle-extra-large:22px; + --spectrum-field-top-to-progress-circle-small:6px; + --spectrum-field-top-to-progress-circle-medium:8px; + --spectrum-field-top-to-progress-circle-large:11px; + --spectrum-field-top-to-progress-circle-extra-large:15px; --spectrum-field-edge-to-alert-icon-small:11px; --spectrum-field-edge-to-alert-icon-medium:15px; --spectrum-field-edge-to-alert-icon-large:19px; @@ -2129,16 +2086,12 @@ --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-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 +2101,10 @@ --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-font-size-50:13px; --spectrum-font-size-75:15px; --spectrum-font-size-100:17px; @@ -2269,86 +2226,29 @@ --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 +2285,627 @@ --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-drop-shadow-color-100-rgb:0, 0, 0; + --spectrum-drop-shadow-color-100-opacity:0.12; + --spectrum-drop-shadow-color-100:rgba(var(--spectrum-drop-shadow-color-100-rgb), var(--spectrum-drop-shadow-color-100-opacity)); + --spectrum-drop-shadow-color-200-rgb:0, 0, 0; + --spectrum-drop-shadow-color-200-opacity:0.16; + --spectrum-drop-shadow-color-200:rgba(var(--spectrum-drop-shadow-color-200-rgb), var(--spectrum-drop-shadow-color-200-opacity)); --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); @@ -2797,91 +2931,69 @@ --spectrum-calendar-day-background-color-cap-selected:rgba(var(--spectrum-blue-900-rgb), 0.2); --spectrum-calendar-day-background-color-key-focus:rgba(var(--spectrum-black-rgb), 0.06); --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-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-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,30 +3001,28 @@ --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-status-light-dot-size-medium:8px; - --spectrum-status-light-dot-size-large:10px; - --spectrum-status-light-dot-size-extra-large:10px; + --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-small:8px; + --spectrum-status-light-dot-size-medium:10px; + --spectrum-status-light-dot-size-large:12px; + --spectrum-status-light-dot-size-extra-large:14px; --spectrum-status-light-top-to-dot-small:8px; - --spectrum-status-light-top-to-dot-medium:12px; - --spectrum-status-light-top-to-dot-large:15px; - --spectrum-status-light-top-to-dot-extra-large:19px; + --spectrum-status-light-top-to-dot-medium:11px; + --spectrum-status-light-top-to-dot-large:14px; + --spectrum-status-light-top-to-dot-extra-large:17px; --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 +3030,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 +3067,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; @@ -2967,10 +3093,6 @@ --spectrum-picker-visual-to-disclosure-icon-extra-large:10px; --spectrum-text-area-minimum-width:112px; --spectrum-text-area-minimum-height:56px; - --spectrum-combo-box-visual-to-field-button-small:7px; - --spectrum-combo-box-visual-to-field-button-medium:8px; - --spectrum-combo-box-visual-to-field-button-large:9px; - --spectrum-combo-box-visual-to-field-button-extra-large:10px; --spectrum-thumbnail-size-50:16px; --spectrum-thumbnail-size-75:18px; --spectrum-thumbnail-size-100:20px; @@ -2983,9 +3105,8 @@ --spectrum-thumbnail-size-800:44px; --spectrum-thumbnail-size-900:50px; --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 +3133,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:18px; + --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; @@ -3037,9 +3158,6 @@ --spectrum-coach-mark-pagination-text-to-bottom-edge:33px; --spectrum-coach-mark-media-height:222px; --spectrum-coach-mark-media-minimum-height:166px; - --spectrum-coach-mark-title-size:var(--spectrum-heading-size-xs); - --spectrum-coach-mark-body-size:var(--spectrum-body-size-s); - --spectrum-coach-mark-pagination-body-size:var(--spectrum-body-size-s); --spectrum-accordion-top-to-text-regular-small:5px; --spectrum-accordion-small-top-to-text-spacious:9px; --spectrum-accordion-top-to-text-regular-medium:8px; @@ -3181,14 +3299,98 @@ --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-alert-banner-top-to-alert-icon:37px; + --spectrum-accordion-top-to-text-spacious-small:9px; + --spectrum-field-default-width-small:192px; + --spectrum-field-default-width-medium:208px; + --spectrum-field-default-width-large:224px; + --spectrum-field-default-width-extra-large:240px; + --spectrum-tag-minimum-width-small:21px; + --spectrum-tag-minimum-width-medium:27px; + --spectrum-tag-minimum-width-large:33px; + --spectrum-in-field-button-edge-to-fill-small:4px; + --spectrum-in-field-button-edge-to-fill-extra-large:8px; + --spectrum-in-field-progress-circle-edge-to-fill:1px; + --spectrum-in-field-progress-circle-size-75:16px; + --spectrum-in-field-progress-circle-size-100:20px; + --spectrum-in-field-progress-circle-size-200:22px; + --spectrum-in-field-progress-circle-size-300:26px; + --spectrum-alert-dialog-description-font-size:var(--spectrum-body-size-m); + --spectrum-alert-dialog-title-font-size:var(--spectrum-title-size-xxl); + --spectrum-coach-mark-body-font-size:var(--spectrum-body-size-m); + --spectrum-coach-mark-pagination-body-font-size:var(--spectrum-body-size-s); + --spectrum-coach-mark-title-font-size:var(--spectrum-title-size-m); + --spectrum-standard-dialog-title-font-size:var(--spectrum-title-size-xxl); + --spectrum-standard-dialog-body-font-size:var(--spectrum-body-size-m); + --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; @@ -3205,9 +3407,9 @@ --spectrum-component-pill-edge-to-visual-200:18px; --spectrum-component-pill-edge-to-visual-300:21px; --spectrum-component-pill-edge-to-visual-only-75:4px; - --spectrum-component-pill-edge-to-visual-only-100:7px; - --spectrum-component-pill-edge-to-visual-only-200:10px; - --spectrum-component-pill-edge-to-visual-only-300:13px; + --spectrum-component-pill-edge-to-visual-only-100:6px; + --spectrum-component-pill-edge-to-visual-only-200:9px; + --spectrum-component-pill-edge-to-visual-only-300:11px; --spectrum-component-pill-edge-to-text-75:12px; --spectrum-component-pill-edge-to-text-100:16px; --spectrum-component-pill-edge-to-text-200:20px; @@ -3219,9 +3421,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 +3431,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; @@ -3267,9 +3469,9 @@ --spectrum-field-top-to-validation-icon-large:14px; --spectrum-field-top-to-validation-icon-extra-large:17px; --spectrum-field-top-to-progress-circle-small:4px; - --spectrum-field-top-to-progress-circle-medium:8px; - --spectrum-field-top-to-progress-circle-large:12px; - --spectrum-field-top-to-progress-circle-extra-large:16px; + --spectrum-field-top-to-progress-circle-medium:6px; + --spectrum-field-top-to-progress-circle-large:9px; + --spectrum-field-top-to-progress-circle-extra-large:11px; --spectrum-field-edge-to-alert-icon-small:9px; --spectrum-field-edge-to-alert-icon-medium:12px; --spectrum-field-edge-to-alert-icon-large:15px; @@ -3286,16 +3488,12 @@ --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-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 +3503,10 @@ --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-font-size-50:11px; --spectrum-font-size-75:12px; --spectrum-font-size-100:14px; @@ -3425,58 +3627,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 +3697,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 +3709,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 +3731,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 f55afc97496..f613544b36b 100644 --- a/tokens/package.json +++ b/tokens/package.json @@ -1,6 +1,6 @@ { "name": "@spectrum-css/tokens", - "version": "14.0.0", + "version": "14.0.0-next.7", "description": "The Spectrum CSS tokens package", "license": "Apache-2.0", "author": "Adobe", @@ -28,7 +28,7 @@ "adobe" ], "devDependencies": { - "@adobe/spectrum-tokens": "12.24.0", + "@adobe/spectrum-tokens": "13.0.0-beta.30", "@nxkit/style-dictionary": "^5.0.0", "postcss": "^8.4.35", "postcss-cli": "^11.0.0", diff --git a/yarn.lock b/yarn.lock index d301780a0fc..35998635857 100644 --- a/yarn.lock +++ b/yarn.lock @@ -121,10 +121,10 @@ __metadata: languageName: node linkType: hard -"@adobe/spectrum-tokens@npm:12.24.0": - version: 12.24.0 - resolution: "@adobe/spectrum-tokens@npm:12.24.0" - checksum: 10c0/73dfcccf07d1051826f0f77bba53966ac931120819798f1e2e8201493e1f2df62b8b00eefb9754868ed5d77e44d231a09f2fc41f6d10fd419e81fc6823efb364 +"@adobe/spectrum-tokens@npm:13.0.0-beta.30": + version: 13.0.0-beta.30 + resolution: "@adobe/spectrum-tokens@npm:13.0.0-beta.30" + checksum: 10c0/78c0627a4f1ba4adff1adab5c3be4bf5a98a8f6ac0dd5e7806a3db12d3f67f2e3afa85828c7e34f843e29ad91c0d2bd009bfbc9fecec81ab7e4b05c1dd81bab8 languageName: node linkType: hard @@ -4410,7 +4410,7 @@ __metadata: resolution: "@spectrum-css/accordion@workspace:components/accordion" peerDependencies: "@spectrum-css/icon": ">=4" - "@spectrum-css/tokens": ">=13" + "@spectrum-css/tokens": ">=14.0.0-next.3" languageName: unknown linkType: soft @@ -4422,7 +4422,7 @@ __metadata: "@spectrum-css/closebutton": ">=4" "@spectrum-css/fieldlabel": ">=7" "@spectrum-css/popover": ">=6" - "@spectrum-css/tokens": ">=13" + "@spectrum-css/tokens": ">=14.0.0-next.3" languageName: unknown linkType: soft @@ -4433,7 +4433,7 @@ __metadata: "@spectrum-css/commons": "npm:^10.0.0" peerDependencies: "@spectrum-css/icon": ">=4" - "@spectrum-css/tokens": ">=13" + "@spectrum-css/tokens": ">=14.0.0-next.3" peerDependenciesMeta: "@spectrum-css/icon": optional: true @@ -4445,7 +4445,7 @@ __metadata: resolution: "@spectrum-css/actiongroup@workspace:components/actiongroup" peerDependencies: "@spectrum-css/actionbutton": ">=5" - "@spectrum-css/tokens": ">=13" + "@spectrum-css/tokens": ">=14.0.0-next.3" peerDependenciesMeta: "@spectrum-css/actionbutton": optional: true @@ -4460,7 +4460,7 @@ __metadata: "@spectrum-css/icon": ">=4" "@spectrum-css/menu": ">=5" "@spectrum-css/popover": ">=6" - "@spectrum-css/tokens": ">=13" + "@spectrum-css/tokens": ">=14.0.0-next.3" languageName: unknown linkType: soft @@ -4472,7 +4472,7 @@ __metadata: "@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": optional: true @@ -4487,7 +4487,7 @@ __metadata: "@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: "@spectrum-css/buttongroup": @@ -4501,7 +4501,7 @@ __metadata: version: 0.0.0-use.local resolution: "@spectrum-css/asset@workspace:components/asset" peerDependencies: - "@spectrum-css/tokens": ">=13" + "@spectrum-css/tokens": ">=14.0.0-next.3" languageName: unknown linkType: soft @@ -4510,7 +4510,7 @@ __metadata: resolution: "@spectrum-css/assetcard@workspace:components/assetcard" peerDependencies: "@spectrum-css/checkbox": ">=7" - "@spectrum-css/tokens": ">=13" + "@spectrum-css/tokens": ">=14.0.0-next.3" peerDependenciesMeta: "@spectrum-css/checkbox": optional: true @@ -4523,7 +4523,7 @@ __metadata: 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": optional: true @@ -4536,7 +4536,7 @@ __metadata: version: 0.0.0-use.local resolution: "@spectrum-css/avatar@workspace:components/avatar" peerDependencies: - "@spectrum-css/tokens": ">=13" + "@spectrum-css/tokens": ">=14.0.0-next.3" languageName: unknown linkType: soft @@ -4545,7 +4545,7 @@ __metadata: resolution: "@spectrum-css/badge@workspace:components/badge" peerDependencies: "@spectrum-css/icon": ">=4" - "@spectrum-css/tokens": ">=13" + "@spectrum-css/tokens": ">=14.0.0-next.3" peerDependenciesMeta: "@spectrum-css/icon": optional: true @@ -4558,7 +4558,7 @@ __metadata: 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": optional: true @@ -4571,11 +4571,11 @@ __metadata: version: 0.0.0-use.local resolution: "@spectrum-css/button@workspace:components/button" dependencies: - "@spectrum-css/commons": "npm:^10.0.0" + "@spectrum-css/commons": "npm:^9.1.4-next.1" 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": optional: true @@ -4589,7 +4589,7 @@ __metadata: resolution: "@spectrum-css/buttongroup@workspace:components/buttongroup" peerDependencies: "@spectrum-css/button": ">=11" - "@spectrum-css/tokens": ">=13" + "@spectrum-css/tokens": ">=14" languageName: unknown linkType: soft @@ -4598,7 +4598,7 @@ __metadata: resolution: "@spectrum-css/calendar@workspace:components/calendar" peerDependencies: "@spectrum-css/actionbutton": ">=5" - "@spectrum-css/tokens": ">=13" + "@spectrum-css/tokens": ">=14.0.0-next.3" languageName: unknown linkType: soft @@ -4611,7 +4611,7 @@ __metadata: "@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: "@spectrum-css/actionbutton": @@ -4634,7 +4634,7 @@ __metadata: resolution: "@spectrum-css/checkbox@workspace:components/checkbox" peerDependencies: "@spectrum-css/icon": ">=4" - "@spectrum-css/tokens": ">=13" + "@spectrum-css/tokens": ">=14.0.0-next.3" languageName: unknown linkType: soft @@ -4643,7 +4643,7 @@ __metadata: resolution: "@spectrum-css/clearbutton@workspace:components/clearbutton" peerDependencies: "@spectrum-css/icon": ">=4" - "@spectrum-css/tokens": ">=13" + "@spectrum-css/tokens": ">=14.0.0-next.3" languageName: unknown linkType: soft @@ -4654,7 +4654,7 @@ __metadata: "@spectrum-css/commons": "npm:^10.0.0" peerDependencies: "@spectrum-css/icon": ">=4" - "@spectrum-css/tokens": ">=13" + "@spectrum-css/tokens": ">=14.0.0-next.3" languageName: unknown linkType: soft @@ -4662,7 +4662,7 @@ __metadata: version: 0.0.0-use.local resolution: "@spectrum-css/coachindicator@workspace:components/coachindicator" peerDependencies: - "@spectrum-css/tokens": ">=13" + "@spectrum-css/tokens": ">=14.0.0-next.3" languageName: unknown linkType: soft @@ -4676,7 +4676,7 @@ __metadata: "@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": optional: true @@ -4688,7 +4688,7 @@ __metadata: resolution: "@spectrum-css/colorarea@workspace:components/colorarea" peerDependencies: "@spectrum-css/colorhandle": ">=7" - "@spectrum-css/tokens": ">=13" + "@spectrum-css/tokens": ">=14.0.0-next.3" languageName: unknown linkType: soft @@ -4698,7 +4698,7 @@ __metadata: 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": optional: true @@ -4709,7 +4709,7 @@ __metadata: version: 0.0.0-use.local resolution: "@spectrum-css/colorloupe@workspace:components/colorloupe" peerDependencies: - "@spectrum-css/tokens": ">=13" + "@spectrum-css/tokens": ">=14.0.0-next.3" languageName: unknown linkType: soft @@ -4719,7 +4719,7 @@ __metadata: peerDependencies: "@spectrum-css/colorhandle": ">=7" "@spectrum-css/opacitycheckerboard": ">=1" - "@spectrum-css/tokens": ">=13" + "@spectrum-css/tokens": ">=14.0.0-next.3" languageName: unknown linkType: soft @@ -4730,7 +4730,7 @@ __metadata: "@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": optional: true @@ -4748,18 +4748,27 @@ __metadata: "@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": optional: true languageName: unknown linkType: soft -"@spectrum-css/commons@npm:^10.0.0, @spectrum-css/commons@workspace:components/commons": +"@spectrum-css/commons@npm:^10.0.0": + version: 10.0.0 + resolution: "@spectrum-css/commons@npm:10.0.0" + peerDependencies: + "@spectrum-css/tokens": ">=13" + checksum: 10c0/d97d22b6c68a93ef393b58adb4abd47c62e483d64d523505871600527f24df9fd8995c6930438ab21d682a6e7230cd30c97fb3fb9f10168d24ec2de521875538 + languageName: node + linkType: hard + +"@spectrum-css/commons@npm:^9.1.4-next.1, @spectrum-css/commons@workspace:components/commons": version: 0.0.0-use.local resolution: "@spectrum-css/commons@workspace:components/commons" peerDependencies: - "@spectrum-css/tokens": ">=13" + "@spectrum-css/tokens": ^14.0.0-next.3 languageName: unknown linkType: soft @@ -4770,7 +4779,7 @@ __metadata: "@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": optional: true @@ -4795,7 +4804,7 @@ __metadata: "@spectrum-css/pickerbutton": ">=4" "@spectrum-css/popover": ">=6" "@spectrum-css/textfield": ">=6" - "@spectrum-css/tokens": ">=13" + "@spectrum-css/tokens": ">=14.0.0-next.3" languageName: unknown linkType: soft @@ -4803,7 +4812,7 @@ __metadata: version: 0.0.0-use.local resolution: "@spectrum-css/dial@workspace:components/dial" peerDependencies: - "@spectrum-css/tokens": ">=13" + "@spectrum-css/tokens": ">=14.0.0-next.3" languageName: unknown linkType: soft @@ -4814,7 +4823,7 @@ __metadata: "@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: "@spectrum-css/divider": @@ -4830,7 +4839,7 @@ __metadata: version: 0.0.0-use.local resolution: "@spectrum-css/divider@workspace:components/divider" peerDependencies: - "@spectrum-css/tokens": ">=13" + "@spectrum-css/tokens": ">=14.0.0-next.3" languageName: unknown linkType: soft @@ -4839,7 +4848,7 @@ __metadata: resolution: "@spectrum-css/dropindicator@workspace:components/dropindicator" peerDependencies: "@spectrum-css/icon": ">=4" - "@spectrum-css/tokens": ">=13" + "@spectrum-css/tokens": ">=14.0.0-next.3" languageName: unknown linkType: soft @@ -4850,7 +4859,7 @@ __metadata: "@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": optional: true @@ -4866,7 +4875,7 @@ __metadata: "@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": optional: true @@ -4882,7 +4891,7 @@ __metadata: resolution: "@spectrum-css/fieldlabel@workspace:components/fieldlabel" peerDependencies: "@spectrum-css/icon": ">=4" - "@spectrum-css/tokens": ">=13" + "@spectrum-css/tokens": ">=14" languageName: unknown linkType: soft @@ -4890,7 +4899,7 @@ __metadata: version: 0.0.0-use.local resolution: "@spectrum-css/floatingactionbutton@workspace:components/floatingactionbutton" peerDependencies: - "@spectrum-css/tokens": ">=13" + "@spectrum-css/tokens": ">=14.0.0-next.3" languageName: unknown linkType: soft @@ -4910,7 +4919,7 @@ __metadata: resolution: "@spectrum-css/helptext@workspace:components/helptext" peerDependencies: "@spectrum-css/icon": ">=4" - "@spectrum-css/tokens": ">=13" + "@spectrum-css/tokens": ">=14.0.0-next.6" languageName: unknown linkType: soft @@ -4926,7 +4935,7 @@ __metadata: version: 0.0.0-use.local resolution: "@spectrum-css/illustratedmessage@workspace:components/illustratedmessage" peerDependencies: - "@spectrum-css/tokens": ">=13" + "@spectrum-css/tokens": ">=14.0.0-next.3" "@spectrum-css/typography": ">=5" languageName: unknown linkType: soft @@ -4936,7 +4945,7 @@ __metadata: resolution: "@spectrum-css/infieldbutton@workspace:components/infieldbutton" peerDependencies: "@spectrum-css/icon": ">=4" - "@spectrum-css/tokens": ">=13" + "@spectrum-css/tokens": ">=14.0.0-next.3" peerDependenciesMeta: "@spectrum-css/icon": optional: true @@ -4949,7 +4958,7 @@ __metadata: 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": optional: true @@ -4960,7 +4969,7 @@ __metadata: version: 0.0.0-use.local resolution: "@spectrum-css/link@workspace:components/link" peerDependencies: - "@spectrum-css/tokens": ">=13" + "@spectrum-css/tokens": ">=14.0.0-next.3" languageName: unknown linkType: soft @@ -4970,7 +4979,7 @@ __metadata: dependencies: "@spectrum-css/commons": "npm:^10.0.0" peerDependencies: - "@spectrum-css/tokens": ">=13" + "@spectrum-css/tokens": ">=14.0.0-next.3" languageName: unknown linkType: soft @@ -4982,7 +4991,7 @@ __metadata: "@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: "@spectrum-css/checkbox": @@ -5003,7 +5012,7 @@ __metadata: "@spectrum-css/assetlist": ">=5" "@spectrum-css/checkbox": ">=8" "@spectrum-css/icon": ">=4" - "@spectrum-css/tokens": ">=13" + "@spectrum-css/tokens": ">=14.0.0-next.3" languageName: unknown linkType: soft @@ -5013,7 +5022,7 @@ __metadata: dependencies: "@spectrum-css/commons": "npm:^10.0.0" peerDependencies: - "@spectrum-css/tokens": ">=13" + "@spectrum-css/tokens": ">=14.0.0-next.3" languageName: unknown linkType: soft @@ -5021,7 +5030,7 @@ __metadata: version: 0.0.0-use.local resolution: "@spectrum-css/opacitycheckerboard@workspace:components/opacitycheckerboard" peerDependencies: - "@spectrum-css/tokens": ">=13" + "@spectrum-css/tokens": ">=14.0.0-next.3" languageName: unknown linkType: soft @@ -5029,7 +5038,7 @@ __metadata: version: 0.0.0-use.local resolution: "@spectrum-css/page@workspace:components/page" peerDependencies: - "@spectrum-css/tokens": ">=13" + "@spectrum-css/tokens": ">=14.0.0-next.3" languageName: unknown linkType: soft @@ -5042,7 +5051,7 @@ __metadata: "@spectrum-css/icon": ">=4" "@spectrum-css/splitbutton": ">=7" "@spectrum-css/textfield": ">=6" - "@spectrum-css/tokens": ">=13" + "@spectrum-css/tokens": ">=14.0.0-next.3" languageName: unknown linkType: soft @@ -5057,7 +5066,7 @@ __metadata: "@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": optional: true @@ -5073,7 +5082,7 @@ __metadata: "@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" languageName: unknown linkType: soft @@ -5087,7 +5096,7 @@ __metadata: "@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": optional: true @@ -5104,7 +5113,7 @@ __metadata: "@babel/core": "npm:^7.24.4" "@chromaui/addon-visual-tests": "npm:^1.0.0" "@etchteam/storybook-addon-status": "npm:^4.2.4" - "@spectrum-css/tokens": "npm:^14.0.0" + "@spectrum-css/tokens": "npm:^14.0.0-next.7" "@spectrum-css/ui-icons": "npm:^1.1.2" "@storybook/addon-a11y": "npm:^8.0.9" "@storybook/addon-actions": "npm:^8.0.9" @@ -5146,7 +5155,7 @@ __metadata: resolution: "@spectrum-css/progressbar@workspace:components/progressbar" peerDependencies: "@spectrum-css/fieldlabel": ">=7" - "@spectrum-css/tokens": ">=13" + "@spectrum-css/tokens": ">=14.0.0-next.3" peerDependenciesMeta: "@spectrum-css/fieldlabel": optional: true @@ -5157,7 +5166,7 @@ __metadata: version: 0.0.0-use.local resolution: "@spectrum-css/progresscircle@workspace:components/progresscircle" peerDependencies: - "@spectrum-css/tokens": ">=13" + "@spectrum-css/tokens": ">=14.0.0-next.3" languageName: unknown linkType: soft @@ -5177,7 +5186,7 @@ __metadata: resolution: "@spectrum-css/radio@workspace:components/radio" peerDependencies: "@spectrum-css/icon": ">=4" - "@spectrum-css/tokens": ">=13" + "@spectrum-css/tokens": ">=14.0.0-next.3" languageName: unknown linkType: soft @@ -5186,7 +5195,7 @@ __metadata: resolution: "@spectrum-css/rating@workspace:components/rating" peerDependencies: "@spectrum-css/icon": ">=4" - "@spectrum-css/tokens": ">=13" + "@spectrum-css/tokens": ">=14.0.0-next.3" languageName: unknown linkType: soft @@ -5197,7 +5206,7 @@ __metadata: "@spectrum-css/clearbutton": ">=5" "@spectrum-css/icon": ">=4" "@spectrum-css/textfield": ">=6" - "@spectrum-css/tokens": ">=13" + "@spectrum-css/tokens": ">=14.0.0-next.3" languageName: unknown linkType: soft @@ -5219,7 +5228,7 @@ __metadata: resolution: "@spectrum-css/sidenav@workspace:components/sidenav" peerDependencies: "@spectrum-css/icon": ">=4" - "@spectrum-css/tokens": ">=13" + "@spectrum-css/tokens": ">=14.0.0-next.3" peerDependenciesMeta: "@spectrum-css/icon": optional: true @@ -5230,7 +5239,7 @@ __metadata: version: 0.0.0-use.local resolution: "@spectrum-css/site@workspace:components/site" peerDependencies: - "@spectrum-css/tokens": ">=13" + "@spectrum-css/tokens": ">=14.0.0-next.3" languageName: unknown linkType: soft @@ -5239,7 +5248,7 @@ __metadata: resolution: "@spectrum-css/slider@workspace:components/slider" peerDependencies: "@spectrum-css/stepper": ">=5" - "@spectrum-css/tokens": ">=13" + "@spectrum-css/tokens": ">=14.0.0-next.3" languageName: unknown linkType: soft @@ -5261,7 +5270,7 @@ __metadata: version: 0.0.0-use.local resolution: "@spectrum-css/splitview@workspace:components/splitview" peerDependencies: - "@spectrum-css/tokens": ">=13" + "@spectrum-css/tokens": ">=14.0.0-next.3" languageName: unknown linkType: soft @@ -5269,7 +5278,7 @@ __metadata: version: 0.0.0-use.local resolution: "@spectrum-css/statuslight@workspace:components/statuslight" peerDependencies: - "@spectrum-css/tokens": ">=13" + "@spectrum-css/tokens": ">=14.0.0-next.3" languageName: unknown linkType: soft @@ -5278,7 +5287,7 @@ __metadata: resolution: "@spectrum-css/steplist@workspace:components/steplist" peerDependencies: "@spectrum-css/icon": ">=4" - "@spectrum-css/tokens": ">=13" + "@spectrum-css/tokens": ">=14.0.0-next.3" "@spectrum-css/tooltip": ">=5" peerDependenciesMeta: "@spectrum-css/tooltip": @@ -5294,7 +5303,7 @@ __metadata: "@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": optional: true @@ -5306,7 +5315,7 @@ __metadata: resolution: "@spectrum-css/swatch@workspace:components/swatch" peerDependencies: "@spectrum-css/opacitycheckerboard": ">=1" - "@spectrum-css/tokens": ">=13" + "@spectrum-css/tokens": ">=14.0.0-next.3" languageName: unknown linkType: soft @@ -5315,7 +5324,7 @@ __metadata: resolution: "@spectrum-css/swatchgroup@workspace:components/swatchgroup" peerDependencies: "@spectrum-css/swatch": ">=5" - "@spectrum-css/tokens": ">=13" + "@spectrum-css/tokens": ">=14.0.0-next.3" languageName: unknown linkType: soft @@ -5323,7 +5332,7 @@ __metadata: version: 0.0.0-use.local resolution: "@spectrum-css/switch@workspace:components/switch" peerDependencies: - "@spectrum-css/tokens": ">=13" + "@spectrum-css/tokens": ">=14.0.0-next.3" languageName: unknown linkType: soft @@ -5335,7 +5344,7 @@ __metadata: "@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": optional: true @@ -5353,7 +5362,7 @@ __metadata: "@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": optional: true @@ -5367,7 +5376,7 @@ __metadata: "@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": optional: true @@ -5381,7 +5390,7 @@ __metadata: resolution: "@spectrum-css/taggroup@workspace:components/taggroup" peerDependencies: "@spectrum-css/tag": ">=8" - "@spectrum-css/tokens": ">=13" + "@spectrum-css/tokens": ">=14.0.0-next.3" languageName: unknown linkType: soft @@ -5390,7 +5399,7 @@ __metadata: resolution: "@spectrum-css/textfield@workspace:components/textfield" peerDependencies: "@spectrum-css/helptext": ">=4" - "@spectrum-css/tokens": ">=13" + "@spectrum-css/tokens": ">=14.0.0-next.3" peerDependenciesMeta: "@spectrum-css/helptext": optional: true @@ -5402,7 +5411,7 @@ __metadata: resolution: "@spectrum-css/thumbnail@workspace:components/thumbnail" peerDependencies: "@spectrum-css/opacitycheckerboard": ">=1" - "@spectrum-css/tokens": ">=13" + "@spectrum-css/tokens": ">=14.0.0-next.3" languageName: unknown linkType: soft @@ -5413,7 +5422,7 @@ __metadata: "@spectrum-css/button": ">=11" "@spectrum-css/closebutton": ">=4" "@spectrum-css/icon": ">=4" - "@spectrum-css/tokens": ">=13" + "@spectrum-css/tokens": ">=14.0.0-next.3" languageName: unknown linkType: soft @@ -5424,11 +5433,11 @@ __metadata: languageName: node linkType: hard -"@spectrum-css/tokens@npm:^14.0.0, @spectrum-css/tokens@workspace:tokens": +"@spectrum-css/tokens@npm:^14.0.0-next.7, @spectrum-css/tokens@workspace:tokens": version: 0.0.0-use.local resolution: "@spectrum-css/tokens@workspace:tokens" dependencies: - "@adobe/spectrum-tokens": "npm:12.24.0" + "@adobe/spectrum-tokens": "npm:13.0.0-beta.30" "@nxkit/style-dictionary": "npm:^5.0.0" postcss: "npm:^8.4.35" postcss-cli: "npm:^11.0.0" @@ -5452,7 +5461,7 @@ __metadata: "@spectrum-css/commons": "npm:^10.0.0" peerDependencies: "@spectrum-css/icon": ">=4" - "@spectrum-css/tokens": ">=13" + "@spectrum-css/tokens": ">=14.0.0-next.3" languageName: unknown linkType: soft @@ -5465,7 +5474,7 @@ __metadata: "@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": optional: true @@ -5480,7 +5489,7 @@ __metadata: 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": optional: true @@ -5491,7 +5500,7 @@ __metadata: version: 0.0.0-use.local resolution: "@spectrum-css/typography@workspace:components/typography" peerDependencies: - "@spectrum-css/tokens": ">=13" + "@spectrum-css/tokens": ">=14.0.0-next.3" languageName: unknown linkType: soft @@ -5512,7 +5521,7 @@ __metadata: dependencies: "@spectrum-css/commons": "npm:^10.0.0" peerDependencies: - "@spectrum-css/tokens": ">=13" + "@spectrum-css/tokens": ">=14.0.0-next.3" languageName: unknown linkType: soft @@ -5520,7 +5529,7 @@ __metadata: version: 0.0.0-use.local resolution: "@spectrum-css/well@workspace:components/well" peerDependencies: - "@spectrum-css/tokens": ">=13" + "@spectrum-css/tokens": ">=14.0.0-next.3" languageName: unknown linkType: soft